*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --ink:#0D1B2A;
  --ink2:#3D4A5C;
  --ink3:#7A8599;
  --line:#E8EBF0;
  --surface:#F2F4F8;
  --white:#FFFFFF;
  --crimson:#8B1A2E;
  --crimson-light:#F7EEF0;
  --crimson-mid:#C4273E;
  --gold:#9A7B2F;
  --gold-light:#FBF6E8;
  --green:#1A5C3A;
  --green-light:#EBF5F0;
  --r:6px;
  --shadow-sm: 0 1px 3px rgba(13,27,42,.07), 0 1px 2px rgba(13,27,42,.04);
  --shadow-md: 0 4px 16px rgba(13,27,42,.08), 0 1px 4px rgba(13,27,42,.04);
  --shadow-lg: 0 8px 32px rgba(13,27,42,.10), 0 2px 8px rgba(13,27,42,.05);
}

/* ── LIGHT THEME OVERRIDES ── */
body.theme-light {
  --dash-bg: #f0f2f7;
  --dash-bg2: #f7f8fc;
  --sidebar-bg: rgba(255,255,255,0.98);
  --sidebar-border: rgba(13,27,42,0.09);
  --sidebar-text: var(--ink2);
  --sidebar-text-dim: var(--ink3);
  --topbar-bg: rgba(247,248,252,0.97);
  --topbar-border: var(--line);
  --sbnav-active-bg: rgba(139,26,46,0.08);
  --sbnav-active-border: rgba(139,26,46,0.2);
  --sbnav-active-color: var(--crimson);
  --sbnav-icon-active: var(--crimson);
  --sbnav-hover-bg: rgba(13,27,42,0.04);
  --sbnav-color: var(--ink3);
  --glass-card-bg: rgba(255,255,255,0.95);
  --glass-card-border: var(--line);
  --glass-card-head-bg: var(--surface);
  --hero-bg: linear-gradient(130deg,#f7eef0 0%,#eef1f7 100%);
  --hero-border: rgba(139,26,46,0.18);
  --journey-bg: var(--white);
  --journey-border: var(--line);
  --journey-head-bg: var(--surface);
  --degree-row-border: var(--line);
  --ql-bg: var(--white);
  --ql-border: var(--line);
  --ql-hover-bg: var(--crimson-light);
  --ql-hover-border: rgba(139,26,46,0.2);
  --ql-title: var(--ink);
  --ql-sub: var(--ink3);
  --ql-icon-bg: var(--crimson-light);
  --ql-arrow: rgba(13,27,42,0.18);
  --ql-arrow-hover: var(--crimson);
  --banner-bg: var(--white);
  --banner-border: var(--line);
  --icard-bg: var(--white);
  --icard-border: var(--line);
  --icard-head-bg: var(--surface);
  --icard-cell-border: var(--line);
  --grades-banner-bg: var(--crimson-light);
  --grades-banner-border: rgba(139,26,46,0.18);
  --ts-bg: var(--white);
  --ts-border: var(--line);
  --ts-val-color: var(--ink);
  --ts-lbl-color: var(--ink3);
  --ts-divider: var(--line);
  --gwrap-bg: var(--white);
  --gwrap-border: var(--line);
  --g-year-head-bg: var(--surface);
  --g-year-color: var(--ink);
  --g-block-head-bg: #FAFBFC;
  --g-block-color: var(--ink3);
  --g-totals-bg: var(--surface);
  --g-totals-color: var(--ink3);
  --gt-th-color: var(--ink3);
  --gt-td-color: var(--ink);
  --gt-row-border: var(--line);
  --gt-hover-bg: #F8F9FC;
  --gt-course-color: var(--ink);
  --gt-assess-color: var(--ink3);
  --gt-cr-bg: var(--surface);
  --gt-cr-border: var(--line);
  --gt-cr-color: var(--ink);
  --sbar-num-color: var(--ink);
  --gt-pts-color: var(--ink);
  --no-g-color: var(--ink3);
  --doc-card-bg: var(--white);
  --doc-card-border: var(--line);
  --doc-title-color: var(--ink);
  --doc-desc-color: var(--ink3);
  --doc-deg-bg: var(--surface);
  --doc-deg-border: var(--line);
  --degree-name-color: var(--ink);
  --degree-meta-color: var(--ink3);
  --sec-head-title: var(--ink);
  --sec-head-sub: var(--ink3);
  --section-label-color: var(--ink3);
  --signout-bg: var(--surface);
  --signout-border: var(--line);
  --signout-color: var(--ink2);
  --topbar-title-color: var(--ink);
  --topbar-id-bg: var(--surface);
  --topbar-id-border: var(--line);
  --topbar-id-color: var(--ink3);
  --footer-bg: rgba(247,248,252,0.9);
  --footer-border: var(--line);
  --footer-color: var(--ink3);
  --tab-color: var(--ink3);
  --tab-active-color: var(--crimson);
  --tab-active-border: var(--crimson);
  --photo-input-bg: var(--white);
  --photo-input-border: var(--line);
  --photo-input-color: var(--ink);
}

/* Light mode: dashboard body background */
body.theme-light.dashboard-active {
  background-color: #f0f2f7;
  background-image: none;
}

/* Light mode: sidebar */
body.theme-light .sidebar {
  background: rgba(255,255,255,0.98);
  border-right-color: rgba(13,27,42,0.08);
  box-shadow: 2px 0 20px rgba(13,27,42,0.06);
}
body.theme-light .sb-brand { border-bottom-color: var(--line); }
body.theme-light .sb-brand-name { color: var(--ink); }
body.theme-light .sb-brand-sub { color: var(--ink3); }
body.theme-light .sb-user {
  background: var(--crimson-light);
  border-color: rgba(139,26,46,0.15);
}
body.theme-light .sb-user-name { color: var(--ink); }
body.theme-light .sb-user-id { color: var(--ink3); }
body.theme-light .sb-user-avatar {
  background: rgba(139,26,46,0.12);
  border-color: rgba(139,26,46,0.2);
  color: var(--crimson);
}
body.theme-light .sb-section-lbl { color: var(--ink3); opacity: .6; }
body.theme-light .sbnav-item { color: var(--ink3); }
body.theme-light .sbnav-item:hover { background: rgba(13,27,42,0.04); color: var(--ink2); }
body.theme-light .sbnav-item.active {
  background: rgba(139,26,46,0.08);
  border-color: rgba(139,26,46,0.18);
  color: var(--crimson);
}
body.theme-light .sbnav-item.active .sbnav-icon { color: var(--crimson); }
body.theme-light .sbnav-icon { color: var(--ink3); }
body.theme-light .sbnav-item:hover .sbnav-icon { color: var(--ink2); }
body.theme-light .sbnav-ext { color: var(--ink3); opacity: .5; }
body.theme-light .sb-footer { border-top-color: var(--line); }
body.theme-light .btn-signout {
  background: var(--surface);
  border-color: var(--line);
  color: var(--ink3);
}
body.theme-light .btn-signout:hover {
  background: var(--crimson-light);
  border-color: rgba(139,26,46,0.2);
  color: var(--crimson);
}

/* Light mode: main area */
body.theme-light .dash-main {
  background: #f0f2f7;
  background-image: none;
}
body.theme-light .dash-topbar {
  background: rgba(255,255,255,0.97);
  border-bottom-color: var(--line);
  box-shadow: 0 1px 8px rgba(13,27,42,0.05);
}
body.theme-light .dash-topbar-title { color: var(--ink); }
body.theme-light .dash-topbar-id {
  background: var(--surface);
  border-color: var(--line);
  color: var(--ink3);
}
body.theme-light .theme-toggle-btn { color: var(--ink3); }
body.theme-light .theme-toggle-btn:hover { background: var(--surface); color: var(--crimson); }

/* Light mode: glass cards and sections */
body.theme-light .glass-card {
  background: rgba(255,255,255,0.95);
  border-color: var(--line);
  box-shadow: var(--shadow-sm);
}
body.theme-light .glass-card:hover { border-color: rgba(139,26,46,0.2); }
body.theme-light .glass-card-head {
  background: var(--surface);
  border-bottom-color: var(--line);
  color: var(--ink3);
}
body.theme-light .sec-head h2 { color: var(--ink); }
body.theme-light .sec-head p { color: var(--ink3); }
body.theme-light .home-section-label { color: var(--ink3); }

/* Light mode: home hero */
body.theme-light .home-hero {
  background: linear-gradient(130deg, #f7eef0 0%, #eef1f7 100%);
  border-color: rgba(139,26,46,0.18);
  box-shadow: var(--shadow-md);
}
body.theme-light .home-hero::before {
  background: radial-gradient(ellipse at 85% 50%, rgba(139,26,46,.08) 0%, transparent 60%);
}
body.theme-light .home-hero-avatar {
  background: var(--crimson-light);
  border-color: rgba(139,26,46,0.2);
  color: var(--crimson);
}
body.theme-light .home-hero-greeting { color: rgba(13,27,42,0.4); }
body.theme-light .home-hero-name { color: var(--ink); }
body.theme-light .home-hero-sub { color: var(--ink3); }
body.theme-light .home-hero-badge {
  background: var(--white);
  border-color: var(--line);
  box-shadow: var(--shadow-sm);
}
body.theme-light .home-hero-badge-label { color: var(--ink3); }
body.theme-light .home-hero-badge-val { color: var(--ink); font-family: monospace; }
body.theme-light .home-hero-badge-sub { color: var(--ink3); }

/* Light mode: journey card */
body.theme-light .journey-card {
  background: var(--white);
  border-color: var(--line);
  box-shadow: var(--shadow-sm);
}
body.theme-light .journey-card-head {
  background: var(--surface);
  border-bottom-color: var(--line);
  color: var(--ink3);
}
body.theme-light .degree-row { border-bottom-color: var(--line); }

/* Light mode: quick links */
body.theme-light .ql {
  background: var(--white);
  border-color: var(--line);
  box-shadow: var(--shadow-sm);
}
body.theme-light .ql:hover { border-color: rgba(139,26,46,0.25); background: var(--white); }
body.theme-light .ql-icon { background: var(--crimson-light); }
body.theme-light .ql-icon svg, body.theme-light .ql-icon i { color: var(--crimson) !important; stroke: var(--crimson) !important; fill: none; }
body.theme-light .ql-t { color: var(--ink); }
body.theme-light .ql-s { color: var(--ink3); }
body.theme-light .ql-arrow { color: rgba(13,27,42,0.18); }
body.theme-light .ql:hover .ql-arrow { color: var(--crimson); }

/* Light mode: banner, icard */
body.theme-light .banner { background: var(--white); border-color: var(--line); }
body.theme-light .b-name h1 { color: var(--ink); }
body.theme-light .b-name .mm { color: var(--ink3); }
body.theme-light .icard { background: var(--white); border-color: var(--line); box-shadow: var(--shadow-sm); }
body.theme-light .icard-head { background: var(--surface); border-bottom-color: var(--line); color: var(--ink3); }
body.theme-light .icell { border-bottom-color: var(--line); }
body.theme-light .icell:nth-child(odd) { border-right-color: var(--line); }
body.theme-light .ic-lbl { color: var(--ink3); }
body.theme-light .ic-val { color: var(--ink); }
body.theme-light .avatar { background: var(--crimson-light); border-color: rgba(139,26,46,0.15); color: var(--crimson); }

/* Light mode: grades */
body.theme-light .grades-header-banner {
  background: var(--ink);
  border-color: transparent;
}
body.theme-light .transcript-summary { background: var(--white); border-color: var(--line); flex-direction: row; }
body.theme-light .ts-item { border-bottom: none; border-right: 1px solid var(--line); flex-direction: column; justify-content: center; align-items: center; }
body.theme-light .ts-item:last-child { border-right: none; }
body.theme-light .ts-lbl { color: var(--ink3); }
body.theme-light .ts-val { color: var(--ink); }
body.theme-light .degree-tabs { border-bottom-color: var(--line); }
body.theme-light .degree-tab { color: var(--ink3); }
body.theme-light .degree-tab:hover { color: var(--ink); }
body.theme-light .degree-tab.active { color: var(--crimson); border-bottom-color: var(--crimson); }
body.theme-light .g-wrap { background: var(--white); border-color: var(--line); box-shadow: var(--shadow-sm); }
body.theme-light .g-year-head { background: var(--surface); border-bottom-color: var(--line); color: var(--ink); }
body.theme-light .g-year-head::before { background: var(--crimson); }
body.theme-light .g-block-head { background: #FAFBFC; border-bottom-color: var(--line); color: var(--ink3); }
body.theme-light .g-year-totals { background: var(--surface); border-top-color: var(--line); color: var(--ink3); }
body.theme-light table.gt thead tr { border-bottom-color: var(--line); }
body.theme-light table.gt th { color: var(--ink3); }
body.theme-light table.gt td { color: var(--ink); border-bottom-color: var(--line); }
body.theme-light table.gt tbody tr:hover { background: #F8F9FC; }
body.theme-light .gt-course { color: var(--ink); }
body.theme-light .gt-assess { color: var(--ink3); }
body.theme-light .gt-cr { background: var(--surface); border-color: var(--line); color: var(--ink); }
body.theme-light .sbar-num { color: var(--ink); }
body.theme-light .gt-pts { color: var(--ink); }
body.theme-light .no-g { color: var(--ink3); }

/* Light mode: documents */
body.theme-light .doc-card { background: var(--white); border-color: var(--line); box-shadow: var(--shadow-sm); }
body.theme-light .doc-title { color: var(--ink); }
body.theme-light .doc-desc { color: var(--ink3); }

/* Light mode: footer */
body.theme-light .dash-footer {
  background: rgba(247,248,252,0.95);
  border-top-color: var(--line);
  color: var(--ink3);
}

/* Light mode: section headings accent colors */
body.theme-light .mb-year-head { background: var(--surface); color: var(--ink); border-bottom-color: var(--line); }
body.theme-light .comms-loading { color: var(--ink3); }

body.theme-light #appsToggleBtn {
  border-color: var(--line);
  color: var(--ink3);
  background: var(--white);
}
body.theme-light #appsToggleBtn:hover {
  background: var(--crimson-light);
  border-color: rgba(139,26,46,0.2);
  color: var(--crimson);
}
/* End light theme overrides */

/* ── OUR CHRONICLES IN SPRING — Panel & Card Styles ── */
:root {
  --chr-spring: #2D6A4F;
  --chr-spring-light: #D8F3DC;
  --chr-spring-mid: #52B788;
  --chr-event: #1D3557;
  --chr-event-light: #E8F0F9;
  --chr-notice: #7B2D8B;
  --chr-notice-light: #F3E8F9;
  --chr-news: #8B1A2E;
  --chr-news-light: #F7EEF0;
}

/* Panel header with spring gradient */
#panel-news .sec-head,
#panel-share .sec-head {
  position: relative;
  overflow: hidden;
}
#panel-news .sec-head::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(45,106,79,0.06) 0%, rgba(82,183,136,0.04) 100%);
  border-radius: inherit;
  pointer-events: none;
}
#panel-news .sec-head h2::before {
  content: '';
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--chr-spring), var(--chr-spring-mid));
  margin-right: 10px;
  vertical-align: middle;
  position: relative; top: -1px;
}

/* Chronicles section title badge */
.chronicles-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 0 16px;
  border-bottom: 1px solid var(--glass-card-border);
  margin-bottom: 20px;
}
.chronicles-icon {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--chr-spring), var(--chr-spring-mid));
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(45,106,79,0.3);
}
.chronicles-title-wrap { flex: 1; }
.chronicles-title {
  font-family: 'Libre Baskerville', serif;
  font-size: 17px; font-weight: 700;
  color: var(--ink);
  letter-spacing: -.2px;
}
.chronicles-subtitle {
  font-size: 12px; color: var(--ink3);
  margin-top: 2px;
}

/* Featured card (first item) */
.chr-featured {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  margin-bottom: 16px;
  border: 1px solid var(--glass-card-border);
  background: var(--glass-card-bg);
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.chr-featured:hover {
  border-color: var(--chr-spring-mid);
  box-shadow: 0 8px 32px rgba(45,106,79,0.15);
  transform: translateY(-2px);
}
.chr-featured-img {
  width: 100%; height: 260px;
  object-fit: cover; display: block;
  pointer-events: none; user-select: none;
}
.chr-featured-noimgbg {
  height: 100px;
  background: linear-gradient(135deg, rgba(45,106,79,0.12) 0%, rgba(82,183,136,0.07) 100%);
  display: flex; align-items: center; justify-content: center;
  font-size: 36px;
}
.chr-featured-body {
  padding: 20px 22px;
}
.chr-featured-meta {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 10px;
}
.chr-featured-title {
  font-family: 'Libre Baskerville', serif;
  font-size: 20px; font-weight: 700;
  color: var(--ink); line-height: 1.35;
  margin-bottom: 8px;
  letter-spacing: -.2px;
}
.chr-featured-excerpt {
  font-size: 13.5px; color: var(--ink2);
  line-height: 1.7;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.chr-featured-footer {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--glass-card-border);
}
.chr-featured-author { font-size: 12px; color: var(--ink3); }
.chr-featured-cta {
  font-size: 12px; font-weight: 600;
  color: var(--chr-spring);
  letter-spacing: .3px;
}
body.theme-light .chr-featured-cta { color: var(--chr-spring); }

/* Grid of smaller cards */
.chr-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-bottom: 16px;
}
@media (max-width: 700px) {
  .chr-grid { grid-template-columns: 1fr; }
}

.chr-card {
  background: var(--glass-card-bg);
  border: 1px solid var(--glass-card-border);
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  transition: border-color .18s, box-shadow .18s, transform .18s;
  display: flex;
  flex-direction: column;
}
.chr-card:hover {
  border-color: var(--chr-spring-mid);
  box-shadow: 0 4px 20px rgba(45,106,79,0.12);
  transform: translateY(-1px);
}
.chr-card-img {
  width: 100%; height: 140px;
  object-fit: cover; display: block;
  pointer-events: none; user-select: none;
  flex-shrink: 0;
}
.chr-card-noimgbg {
  height: 60px;
  background: linear-gradient(135deg, rgba(45,106,79,0.08) 0%, rgba(82,183,136,0.05) 100%);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; flex-shrink: 0;
}
.chr-card-body {
  padding: 14px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.chr-card-meta {
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap;
}
.chr-card-title {
  font-size: 14px; font-weight: 600;
  color: var(--ink); line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.chr-card-author {
  font-size: 11px; color: var(--ink3);
  margin-top: auto;
}

/* Section group header */
.chr-group-label {
  display: flex; align-items: center; gap: 10px;
  font-size: 10px; font-weight: 700;
  letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--ink3);
  margin: 20px 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--glass-card-border);
}
.chr-group-label::before {
  content: '';
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.chr-group-label.events::before { background: #5B21B6; }
.chr-group-label.news::before   { background: var(--chr-spring); }

/* Type badges in Chronicles */
.chr-badge {
  display: inline-block;
  font-size: 9px; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase;
  padding: 3px 8px; border-radius: 20px;
}
.chr-badge.news     { background: var(--chr-news-light);   color: var(--chr-news);   border: 1px solid rgba(139,26,46,0.18); }
.chr-badge.event    { background: var(--chr-event-light);  color: var(--chr-event);  border: 1px solid rgba(29,53,87,0.18); }
.chr-badge.announcement { background: var(--chr-notice-light); color: var(--chr-notice); border: 1px solid rgba(123,45,139,0.18); }
body.theme-light .chr-badge.news        { background: var(--chr-news-light); }
body.theme-light .chr-badge.event       { background: var(--chr-event-light); }
body.theme-light .chr-badge.announcement{ background: var(--chr-notice-light); }

/* ── DARK MODE: Chronicles cards ── */
/* Glass card bg/border in dark mode */
:root {
  --glass-card-bg: rgba(255,255,255,0.04);
  --glass-card-border: rgba(255,255,255,0.08);
}

/* Featured card — dark overrides use body:not(.theme-light) to win cascade over base styles */
.chr-featured { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.08); }
body:not(.theme-light) .chr-featured-title { color: rgba(255,255,255,0.88) !important; }
body:not(.theme-light) .chr-featured-excerpt { color: rgba(255,255,255,0.5) !important; }
body:not(.theme-light) .chr-featured-author { color: rgba(255,255,255,0.35) !important; }
.chr-featured-footer { border-top-color: rgba(255,255,255,0.07); }

/* Grid card */
.chr-card { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.08); }
body:not(.theme-light) .chr-card-title { color: rgba(255,255,255,0.82) !important; }
body:not(.theme-light) .chr-card-author { color: rgba(255,255,255,0.35) !important; }

/* Event card */
.chr-event-card { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.08); }
body:not(.theme-light) .chr-event-title { color: rgba(255,255,255,0.82) !important; }
body:not(.theme-light) .chr-event-meta { color: rgba(255,255,255,0.38) !important; }

/* Home strip card — dark overrides placed after base styles via body:not(.theme-light) to win specificity */
.chr-home-card { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.08); }
body:not(.theme-light) .chr-home-card-title { color: rgba(255,255,255,0.82) !important; }
body:not(.theme-light) .chr-home-card-author { color: rgba(255,255,255,0.35) !important; }

/* Group labels */
.chr-group-label { color: rgba(255,255,255,0.3); border-bottom-color: rgba(255,255,255,0.07); }

/* Badges in dark mode */
.chr-badge.news         { background: rgba(139,26,46,0.25);  color: #f87171; border-color: rgba(139,26,46,0.3); }
.chr-badge.event        { background: rgba(91,33,182,0.2);   color: #c4b5fd; border-color: rgba(91,33,182,0.3); }
.chr-badge.announcement { background: rgba(123,45,139,0.2);  color: #d8b4fe; border-color: rgba(123,45,139,0.3); }
.chr-badge.notice       { background: rgba(29,53,87,0.25);   color: #93c5fd; border-color: rgba(29,53,87,0.35); }
.chr-badge.newsitem     { background: rgba(45,106,79,0.2);   color: #6ee7b7; border-color: rgba(45,106,79,0.3); }

/* Submit wrap */
.chr-submit-wrap { background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.07); }
body:not(.theme-light) .chr-submit-title { color: rgba(255,255,255,0.88) !important; }
body:not(.theme-light) .chr-submit-sub { color: rgba(255,255,255,0.35) !important; }
.chr-submit-header { border-bottom-color: rgba(255,255,255,0.07); }

/* Light mode overrides to restore correct colors */
body.theme-light .chr-featured { background: rgba(255,255,255,0.95); border-color: var(--line); }
body.theme-light .chr-featured-title { color: var(--ink); }
body.theme-light .chr-featured-excerpt { color: var(--ink2); }
body.theme-light .chr-featured-author { color: var(--ink3); }
body.theme-light .chr-featured-footer { border-top-color: var(--line); }
body.theme-light .chr-card { background: rgba(255,255,255,0.95); border-color: var(--line); }
body.theme-light .chr-card-title { color: var(--ink); }
body.theme-light .chr-card-author { color: var(--ink3); }
body.theme-light .chr-event-card { background: var(--white); border-color: var(--line); }
body.theme-light .chr-event-title { color: var(--ink); }
body.theme-light .chr-event-meta { color: var(--ink3); }
body.theme-light .chr-home-card { background: var(--white); border-color: var(--line); }
body.theme-light .chr-home-card-title { color: var(--ink); }
body.theme-light .chr-home-card-author { color: var(--ink3); }
body.theme-light .chr-group-label { color: var(--ink3); border-bottom-color: var(--line); }
body.theme-light .chr-badge.news         { background: var(--chr-news-light);   color: var(--chr-news);   border-color: rgba(139,26,46,0.18); }
body.theme-light .chr-badge.event        { background: var(--chr-event-light);  color: var(--chr-event);  border-color: rgba(29,53,87,0.18); }
body.theme-light .chr-badge.announcement { background: var(--chr-notice-light); color: var(--chr-notice); border-color: rgba(123,45,139,0.18); }
body.theme-light .chr-badge.notice       { background: var(--chr-event-light);  color: var(--chr-event);  border-color: rgba(29,53,87,0.18); }
body.theme-light .chr-badge.newsitem     { background: var(--chr-news-light);   color: var(--chr-news);   border-color: rgba(139,26,46,0.18); }
body.theme-light .chr-submit-wrap { background: var(--white); border-color: var(--line); }
body.theme-light .chr-submit-title { color: var(--ink); }
body.theme-light .chr-submit-sub { color: var(--ink3); }
body.theme-light .chr-submit-header { border-bottom-color: var(--line); }

/* Event card special style */
.chr-event-card {
  background: var(--glass-card-bg);
  border: 1px solid var(--glass-card-border);
  border-left: 4px solid #5B21B6;
  border-radius: 10px;
  padding: 16px;
  cursor: pointer;
  display: flex; gap: 16px; align-items: flex-start;
  transition: border-color .18s, box-shadow .18s;
  margin-bottom: 10px;
}
.chr-event-card:hover {
  border-color: #7C3AED;
  box-shadow: 0 4px 16px rgba(91,33,182,0.12);
}
.chr-event-date-block {
  background: linear-gradient(135deg, #5B21B6, #7C3AED);
  border-radius: 8px;
  padding: 10px 12px;
  text-align: center;
  flex-shrink: 0;
  min-width: 52px;
  box-shadow: 0 2px 8px rgba(91,33,182,0.25);
}
.chr-event-month { font-size: 9px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: rgba(255,255,255,0.7); }
.chr-event-day   { font-size: 22px; font-weight: 700; color: #fff; line-height: 1.1; }
.chr-event-body  { flex: 1; }
.chr-event-title { font-size: 14px; font-weight: 600; color: var(--ink); line-height: 1.4; margin-bottom: 6px; }
.chr-event-meta  { font-size: 12px; color: var(--ink3); display: flex; flex-wrap: wrap; gap: 8px; }
.chr-event-meta-item { display: flex; align-items: center; gap: 4px; }

/* Home feed Chronicles strip */
.chr-home-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
@media (max-width: 1100px) {
  .chr-home-strip { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .chr-home-strip { grid-template-columns: 1fr; }
}
.chr-home-card {
  background: var(--glass-card-bg);
  border: 1px solid var(--glass-card-border);
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  transition: border-color .18s, box-shadow .18s, transform .18s;
}
.chr-home-card:hover {
  border-color: var(--chr-spring-mid);
  box-shadow: 0 4px 20px rgba(45,106,79,0.12);
  transform: translateY(-2px);
}
.chr-home-card-img {
  width: 100%; height: 110px;
  object-fit: cover; display: block;
  pointer-events: none; user-select: none;
}
.chr-home-card-noimgbg {
  height: 50px;
  background: linear-gradient(135deg, rgba(45,106,79,0.1), rgba(82,183,136,0.06));
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
}
.chr-home-card-body {
  padding: 11px 13px;
  display: flex; flex-direction: column; gap: 5px;
}
.chr-home-card-title {
  font-size: 13px; font-weight: 600;
  color: var(--ink); line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.chr-home-card-meta {
  display: flex; align-items: center; gap: 7px;
  flex-wrap: wrap;
}
.chr-home-card-author { font-size: 11px; color: var(--ink3); }

/* Submit panel redesign */
.chr-submit-wrap {
  background: var(--glass-card-bg);
  border: 1px solid var(--glass-card-border);
  border-radius: 12px;
  overflow: hidden;
}
.chr-submit-header {
  background: linear-gradient(135deg, rgba(45,106,79,0.08) 0%, rgba(82,183,136,0.05) 100%);
  border-bottom: 1px solid var(--glass-card-border);
  padding: 18px 22px;
  display: flex; align-items: center; gap: 12px;
}
.chr-submit-icon {
  width: 36px; height: 36px;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--chr-spring), var(--chr-spring-mid));
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(45,106,79,0.3);
  flex-shrink: 0;
}
.chr-submit-title {
  font-size: 15px; font-weight: 600;
  color: var(--ink);
}
.chr-submit-sub {
  font-size: 12px; color: var(--ink3); margin-top: 2px;
}
.chr-submit-body {
  padding: 20px 22px;
  display: flex; flex-direction: column; gap: 14px;
}
.chr-type-tabs {
  display: flex; gap: 8px; flex-wrap: wrap;
}
.chr-type-tab {
  padding: 7px 16px;
  border-radius: 20px;
  border: 1px solid var(--glass-card-border);
  background: var(--glass-card-bg);
  color: var(--ink3);
  font-size: 12px; font-weight: 600;
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  transition: all .15s;
  letter-spacing: .3px;
}
.chr-type-tab:hover {
  border-color: var(--chr-spring-mid);
  color: var(--chr-spring);
  background: rgba(45,106,79,0.05);
}
.chr-type-tab.active {
  background: linear-gradient(135deg, var(--chr-spring), var(--chr-spring-mid));
  color: #fff;
  border-color: transparent;
  box-shadow: 0 2px 8px rgba(45,106,79,0.3);
}
.chr-input {
  width: 100%;
  padding: 11px 14px;
  border-radius: 8px;
  border: 1px solid var(--glass-card-border);
  background: var(--dash-bg2);
  color: rgba(255,255,255,0.88);
  font-size: 14px;
  font-family: 'DM Sans', sans-serif;
  box-sizing: border-box;
  transition: border-color .15s;
}
.chr-input:focus {
  outline: none;
  border-color: var(--chr-spring-mid);
  box-shadow: 0 0 0 3px rgba(45,106,79,0.1);
}
body.theme-light .chr-input { color: var(--ink); background: #fff; }

.chr-photo-label {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px;
  border-radius: 8px;
  border: 1.5px dashed var(--glass-card-border);
  background: var(--dash-bg2);
  color: var(--ink3);
  font-size: 13px;
  cursor: pointer;
  box-sizing: border-box;
  transition: border-color .2s, background .2s;
}
.chr-photo-label:hover {
  border-color: var(--chr-spring-mid);
  background: rgba(45,106,79,0.04);
  color: var(--chr-spring);
}
.chr-submit-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 26px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--chr-spring), var(--chr-spring-mid));
  color: #fff;
  font-size: 14px; font-weight: 600;
  font-family: 'DM Sans', sans-serif;
  border: none; cursor: pointer;
  box-shadow: 0 3px 10px rgba(45,106,79,0.35);
  transition: opacity .15s, transform .15s;
  letter-spacing: .2px;
}
.chr-submit-btn:hover { opacity: .92; transform: translateY(-1px); }
.chr-submit-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }

/* Home feed label */
.chr-home-label {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--ink3);
}
.chr-home-label::before {
  content: '';
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--chr-spring), var(--chr-spring-mid));
  flex-shrink: 0;
}
/* End Chronicles styles */
body{
  font-family:'DM Sans',sans-serif;
  background-color:var(--surface);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900' viewBox='0 0 900 900'%3E%3Cg stroke='%238B1A2E' stroke-width='1' fill='none' opacity='0.055'%3E%3C!-- Stethoscope head --%3E%3Ccircle cx='80' cy='80' r='18'/%3E%3Ccircle cx='80' cy='80' r='10'/%3E%3Cpath d='M80 62 Q80 30 110 30 Q140 30 140 60 L140 110 Q140 150 110 165 Q80 180 70 210'/%3E%3C!-- Heartbeat/ECG line --%3E%3Cpolyline points='200,120 230,120 245,90 255,150 270,80 285,160 300,120 340,120'/%3E%3C!-- DNA double helix strands --%3E%3Cpath d='M400 60 Q415 90 400 120 Q385 150 400 180 Q415 210 400 240'/%3E%3Cpath d='M420 60 Q405 90 420 120 Q435 150 420 180 Q405 210 420 240'/%3E%3Cline x1='403' y1='75' x2='417' y2='75'/%3E%3Cline x1='397' y1='105' x2='423' y2='105'/%3E%3Cline x1='403' y1='135' x2='417' y2='135'/%3E%3Cline x1='397' y1='165' x2='423' y2='165'/%3E%3Cline x1='403' y1='195' x2='417' y2='195'/%3E%3Cline x1='397' y1='225' x2='423' y2='225'/%3E%3C!-- Graduation cap --%3E%3Cpolygon points='560,50 520,70 560,90 600,70'/%3E%3Cline x1='560' y1='90' x2='560' y2='120'/%3E%3Cpath d='M540 105 Q540 130 560 135 Q580 130 580 105'/%3E%3Cline x1='600' y1='70' x2='600' y2='95'/%3E%3C!-- Microscope --%3E%3Crect x='700' y='100' width='10' height='40' rx='3'/%3E%3Cpath d='M695 100 Q705 80 715 100'/%3E%3Crect x='690' y='140' width='30' height='8' rx='2'/%3E%3Cpath d='M700 148 L695 165 L715 165 L710 148'/%3E%3C!-- Pill / capsule shapes --%3E%3Cellipse cx='100' cy='250' rx='25' ry='10' transform='rotate(-30 100 250)'/%3E%3Cellipse cx='160' cy='280' rx='25' ry='10' transform='rotate(15 160 280)'/%3E%3C!-- Caduceus staff (simplified) --%3E%3Cline x1='800' y1='40' x2='800' y2='160'/%3E%3Cpath d='M800 60 Q820 75 800 90 Q780 105 800 120'/%3E%3Cpath d='M800 55 Q780 70 800 85 Q820 100 800 115'/%3E%3Ccircle cx='800' cy='42' r='8'/%3E%3C!-- Atom-like rings --%3E%3Cellipse cx='200' cy='340' rx='35' ry='12'/%3E%3Cellipse cx='200' cy='340' rx='35' ry='12' transform='rotate(60 200 340)'/%3E%3Cellipse cx='200' cy='340' rx='35' ry='12' transform='rotate(120 200 340)'/%3E%3Ccircle cx='200' cy='340' r='5'/%3E%3C!-- Medical cross --%3E%3Crect x='438' y='310' width='8' height='40' rx='2'/%3E%3Crect x='422' y='326' width='40' height='8' rx='2'/%3E%3C!-- Diploma / scroll --%3E%3Crect x='550' y='280' width='80' height='60' rx='4'/%3E%3Ccircle cx='550' cy='310' r='8'/%3E%3Ccircle cx='630' cy='310' r='8'/%3E%3Cline x1='570' y1='300' x2='610' y2='300'/%3E%3Cline x1='570' y1='312' x2='610' y2='312'/%3E%3Cline x1='570' y1='324' x2='610' y2='324'/%3E%3C!-- Heartbeat again lower --%3E%3Cpolyline points='700,320 730,320 745,290 755,350 770,270 785,360 800,320 840,320'/%3E%3C!-- Syringe / injector --%3E%3Crect x='60' y='420' width='12' height='50' rx='3'/%3E%3Cpolygon points='66,470 60,500 72,500'/%3E%3Crect x='48' y='430' width='36' height='8' rx='2'/%3E%3Cline x1='66' y1='415' x2='66' y2='420'/%3E%3C!-- Book open --%3E%3Cpath d='M160 400 Q160 380 200 380 Q240 380 240 400 L240 460 Q200 450 160 460 Z'/%3E%3Cline x1='200' y1='380' x2='200' y2='460'/%3E%3C!-- Bacteria / cell-like circles --%3E%3Ccircle cx='350' cy='460' r='20'/%3E%3Cline x1='370' y1='450' x2='390' y2='440'/%3E%3Cline x1='370' y1='462' x2='395' y2='462'/%3E%3Cline x1='368' y1='474' x2='388' y2='484'/%3E%3Cline x1='330' y1='474' x2='310' y2='484'/%3E%3Cline x1='330' y1='450' x2='310' y2='440'/%3E%3Ccircle cx='350' cy='460' r='8'/%3E%3C!-- Lungs simplified --%3E%3Cpath d='M490 400 Q480 420 480 450 Q480 480 500 490 Q520 500 530 480 Q540 460 530 440 Q525 420 510 400'/%3E%3Cpath d='M510 400 Q520 420 520 450 Q520 480 500 490'/%3E%3Cline x1='500' y1='395' x2='500' y2='410'/%3E%3C!-- Corner dots / decorative --%3E%3Ccircle cx='650' cy='430' r='3'/%3E%3Ccircle cx='665' cy='430' r='3'/%3E%3Ccircle cx='680' cy='430' r='3'/%3E%3Ccircle cx='650' cy='445' r='3'/%3E%3Ccircle cx='665' cy='445' r='3'/%3E%3Ccircle cx='680' cy='445' r='3'/%3E%3Ccircle cx='650' cy='460' r='3'/%3E%3Ccircle cx='665' cy='460' r='3'/%3E%3Ccircle cx='680' cy='460' r='3'/%3E%3C!-- More hearts / ECG bottom --%3E%3Cpolyline points='50,600 80,600 95,570 105,630 120,550 135,640 150,600 190,600'/%3E%3C!-- Spine-like dots column --%3E%3Ccircle cx='780' cy='480' r='6'/%3E%3Ccircle cx='780' cy='500' r='6'/%3E%3Ccircle cx='780' cy='520' r='6'/%3E%3Ccircle cx='780' cy='540' r='6'/%3E%3Ccircle cx='780' cy='560' r='6'/%3E%3Cline x1='786' y1='486' x2='786' y2='494'/%3E%3Cline x1='786' y1='506' x2='786' y2='514'/%3E%3Cline x1='786' y1='526' x2='786' y2='534'/%3E%3Cline x1='786' y1='546' x2='786' y2='554'/%3E%3C!-- Test tube --%3E%3Crect x='860' y='60' width='14' height='50' rx='7'/%3E%3Cellipse cx='867' cy='110' rx='7' ry='7'/%3E%3Cline x1='856' y1='80' x2='874' y2='80'/%3E%3C!-- Circular pattern bottom right --%3E%3Ccircle cx='820' cy='700' r='40'/%3E%3Ccircle cx='820' cy='700' r='28'/%3E%3Ccircle cx='820' cy='700' r='14'/%3E%3Ccircle cx='820' cy='700' r='4'/%3E%3C!-- Cross pattern scatter --%3E%3Crect x='300' y='600' width='6' height='24' rx='2'/%3E%3Crect x='293' y='607' width='20' height='6' rx='2'/%3E%3Crect x='440' y='550' width='6' height='24' rx='2'/%3E%3Crect x='433' y='557' width='20' height='6' rx='2'/%3E%3Crect x='120' y='720' width='6' height='24' rx='2'/%3E%3Crect x='113' y='727' width='20' height='6' rx='2'/%3E%3C!-- Wavy lines (paper/document feel) --%3E%3Cpath d='M500 620 Q510 610 520 620 Q530 630 540 620 Q550 610 560 620 Q570 630 580 620'/%3E%3Cpath d='M500 635 Q510 625 520 635 Q530 645 540 635 Q550 625 560 635 Q570 645 580 635'/%3E%3Cpath d='M500 650 Q510 640 520 650 Q530 660 540 650 Q550 640 560 650 Q570 660 580 650'/%3E%3C!-- Mortar and pestle hint --%3E%3Cellipse cx='200' cy='700' rx='30' ry='12'/%3E%3Cpath d='M175 700 Q175 720 200 725 Q225 720 225 700'/%3E%3Cline x1='215' y1='680' x2='225' y2='695'/%3E%3C!-- Pills bottom --%3E%3Cellipse cx='650' cy='660' rx='22' ry='9' transform='rotate(-25 650 660)'/%3E%3Cellipse cx='700' cy='640' rx='22' ry='9' transform='rotate(20 700 640)'/%3E%3Cellipse cx='680' cy='700' rx='22' ry='9' transform='rotate(-10 680 700)'/%3E%3C!-- Star of life hints --%3E%3Cline x1='400' y1='730' x2='400' y2='780'/%3E%3Cline x1='375' y1='742' x2='425' y2='768'/%3E%3Cline x1='375' y1='768' x2='425' y2='742'/%3E%3Ccircle cx='400' cy='755' r='12'/%3E%3Crect x='394' y='749' width='12' height='12' rx='1' fill='%238B1A2E' opacity='0.6'/%3E%3C!-- UM2 hint - circles/university seal --%3E%3Ccircle cx='850' cy='840' r='30'/%3E%3Ccircle cx='850' cy='840' r='22'/%3E%3Ctext x='850' y='845' font-family='serif' font-size='14' text-anchor='middle' fill='%238B1A2E' opacity='0.1'%3EUM2%3C/text%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 900px 900px;
  color:var(--ink);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  font-size:14px;
}

.login-mobile-brand { display: none; }
/* ── LOGIN ── */
#loginScreen{position:fixed;inset:0;z-index:100;display:flex;background:var(--white);transition:opacity .4s,visibility .4s;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain;min-height:100vh;min-height:100dvh}
#loginScreen.hidden{opacity:0;visibility:hidden;pointer-events:none}
.login-left{width:440px;flex-shrink:0;background:var(--ink);display:flex;flex-direction:column;justify-content:space-between;padding:52px 56px;position:relative;overflow:hidden}
.login-left::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 30% 20%, rgba(139,26,46,0.35) 0%, transparent 60%), radial-gradient(ellipse at 80% 80%, rgba(154,123,47,0.15) 0%, transparent 50%);pointer-events:none}
.login-left::after{content:'';position:absolute;top:-80px;right:-80px;width:320px;height:320px;border:1.5px solid rgba(255,255,255,0.06);border-radius:50%;pointer-events:none}
.login-crest{margin-bottom:auto;position:relative;z-index:1}
.crest-ring{width:68px;height:68px;border:1.5px solid rgba(255,255,255,0.18);border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:32px;background:rgba(255,255,255,0.04);backdrop-filter:blur(4px);box-shadow:0 0 0 6px rgba(255,255,255,0.03)}
.crest-abbr{font-family:'Bebas Neue',sans-serif;font-size:22px;color:var(--white);letter-spacing:1px}
.login-institution{
  font-family:'Bebas Neue',sans-serif;
  font-size:20px;
  letter-spacing:3px;
  text-transform:uppercase;
  color:rgba(255,255,255,0.35);
  margin-bottom:14px;
}
.login-tagline{font-family:'Bebas Neue',sans-serif;font-size:30px;color:var(--white);line-height:1.2;letter-spacing:-0.3px}
.login-tagline em{font-style;color:rgba(255,255,255,0.4)}
.login-footer-txt{font-size:11px;color:rgba(255,255,255,0.22);line-height:1.7;position:relative;z-index:1}
.login-right{
  flex:1;display:flex;align-items:center;justify-content:center;padding:40px;
  background-color:var(--white);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900' viewBox='0 0 900 900'%3E%3Cg stroke='%238B1A2E' stroke-width='1' fill='none' opacity='0.045'%3E%3Ccircle cx='80' cy='80' r='18'/%3E%3Ccircle cx='80' cy='80' r='10'/%3E%3Cpath d='M80 62 Q80 30 110 30 Q140 30 140 60 L140 110 Q140 150 110 165 Q80 180 70 210'/%3E%3Cpolyline points='200,120 230,120 245,90 255,150 270,80 285,160 300,120 340,120'/%3E%3Cpath d='M400 60 Q415 90 400 120 Q385 150 400 180 Q415 210 400 240'/%3E%3Cpath d='M420 60 Q405 90 420 120 Q435 150 420 180 Q405 210 420 240'/%3E%3Cline x1='403' y1='75' x2='417' y2='75'/%3E%3Cline x1='397' y1='105' x2='423' y2='105'/%3E%3Cline x1='403' y1='135' x2='417' y2='135'/%3E%3Cline x1='397' y1='165' x2='423' y2='165'/%3E%3Cpolygon points='560,50 520,70 560,90 600,70'/%3E%3Cline x1='560' y1='90' x2='560' y2='120'/%3E%3Cpath d='M540 105 Q540 130 560 135 Q580 130 580 105'/%3E%3Crect x='700' y='100' width='10' height='40' rx='3'/%3E%3Cpath d='M695 100 Q705 80 715 100'/%3E%3Crect x='690' y='140' width='30' height='8' rx='2'/%3E%3Cellipse cx='100' cy='250' rx='25' ry='10' transform='rotate(-30 100 250)'/%3E%3Cellipse cx='160' cy='280' rx='25' ry='10' transform='rotate(15 160 280)'/%3E%3Cline x1='800' y1='40' x2='800' y2='160'/%3E%3Cpath d='M800 60 Q820 75 800 90 Q780 105 800 120'/%3E%3Ccircle cx='800' cy='42' r='8'/%3E%3Cellipse cx='200' cy='340' rx='35' ry='12'/%3E%3Cellipse cx='200' cy='340' rx='35' ry='12' transform='rotate(60 200 340)'/%3E%3Cellipse cx='200' cy='340' rx='35' ry='12' transform='rotate(120 200 340)'/%3E%3Ccircle cx='200' cy='340' r='5'/%3E%3Crect x='438' y='310' width='8' height='40' rx='2'/%3E%3Crect x='422' y='326' width='40' height='8' rx='2'/%3E%3Crect x='550' y='280' width='80' height='60' rx='4'/%3E%3Ccircle cx='550' cy='310' r='8'/%3E%3Ccircle cx='630' cy='310' r='8'/%3E%3Cpolyline points='700,320 730,320 745,290 755,350 770,270 785,360 800,320 840,320'/%3E%3Crect x='60' y='420' width='12' height='50' rx='3'/%3E%3Cpolygon points='66,470 60,500 72,500'/%3E%3Cpath d='M160 400 Q160 380 200 380 Q240 380 240 400 L240 460 Q200 450 160 460 Z'/%3E%3Ccircle cx='350' cy='460' r='20'/%3E%3Ccircle cx='350' cy='460' r='8'/%3E%3Cpath d='M490 400 Q480 420 480 450 Q480 480 500 490 Q520 500 530 480 Q540 460 530 440 Q525 420 510 400'/%3E%3Ccircle cx='650' cy='430' r='3'/%3E%3Ccircle cx='665' cy='430' r='3'/%3E%3Ccircle cx='680' cy='430' r='3'/%3E%3Ccircle cx='650' cy='445' r='3'/%3E%3Ccircle cx='665' cy='445' r='3'/%3E%3Ccircle cx='680' cy='445' r='3'/%3E%3Cpolyline points='50,600 80,600 95,570 105,630 120,550 135,640 150,600 190,600'/%3E%3Ccircle cx='780' cy='480' r='6'/%3E%3Ccircle cx='780' cy='500' r='6'/%3E%3Ccircle cx='780' cy='520' r='6'/%3E%3Ccircle cx='780' cy='540' r='6'/%3E%3Crect x='860' y='60' width='14' height='50' rx='7'/%3E%3Ccircle cx='820' cy='700' r='40'/%3E%3Ccircle cx='820' cy='700' r='28'/%3E%3Ccircle cx='820' cy='700' r='14'/%3E%3Ccircle cx='820' cy='700' r='4'/%3E%3Crect x='300' y='600' width='6' height='24' rx='2'/%3E%3Crect x='293' y='607' width='20' height='6' rx='2'/%3E%3Cpath d='M500 620 Q510 610 520 620 Q530 630 540 620 Q550 610 560 620 Q570 630 580 620'/%3E%3Cellipse cx='200' cy='700' rx='30' ry='12'/%3E%3Cellipse cx='650' cy='660' rx='22' ry='9' transform='rotate(-25 650 660)'/%3E%3Ccircle cx='850' cy='840' r='30'/%3E%3Ccircle cx='850' cy='840' r='22'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 900px 900px;
  position: relative;
}
.login-form-wrap{
  width:100%;max-width:380px;
  background: rgba(255,255,255,0.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.9);
  border-radius: 16px;
  padding: 40px 36px;
  box-shadow: 0 8px 40px rgba(13,27,42,0.10), 0 1px 4px rgba(13,27,42,0.06);
}
.login-form-wrap h2{font-family:'DM Sans',sans-serif;font-size:23px;color:var(--ink);margin-bottom:6px;letter-spacing:-0.3px}
.login-form-wrap p{font-size:13px;color:var(--ink3);margin-bottom:36px}
.field{margin-bottom:20px}
.field label{display:block;font-size:11px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;color:var(--ink3);margin-bottom:8px}
.field input{width:100%;padding:11px 14px;border:1.5px solid var(--line);border-radius:var(--r);font-family:'DM Sans',sans-serif;font-size:14px;color:var(--ink);background:var(--white);outline:none;transition:border-color .2s, box-shadow .2s}
.field input:focus{border-color:var(--crimson);box-shadow:0 0 0 3px rgba(139,26,46,0.08)}
.field input::placeholder{color:#C5CBD6}
.btn-login{width:100%;padding:13px;background:var(--crimson);border:none;border-radius:var(--r);font-family:'DM Sans',sans-serif;font-size:14px;font-weight:600;color:var(--white);cursor:pointer;letter-spacing:.3px;transition:background .15s, box-shadow .15s, transform .1s;box-shadow:0 2px 8px rgba(139,26,46,0.25)}
.btn-login:hover{background:var(--crimson-mid);box-shadow:0 4px 16px rgba(139,26,46,0.3);transform:translateY(-1px)}
.btn-login:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}
.login-err{display:none;margin-top:14px;padding:10px 14px;background:#FEF2F4;border:1px solid #FACDD3;border-radius:var(--r);font-size:13px;color:#8B1A2E;text-align:center}
.login-err.show{display:block}
.login-loading{display:none;text-align:center;padding:10px 0 0;font-size:13px;color:var(--ink3)}
.login-loading.show{display:block}

/* ── DASHBOARD ── */
#dashboard{display:none;min-height:100vh;flex-direction:column}
#dashboard.show{display:flex;animation:fadeUp .35s ease}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

/* ── HEADER ── */
.header{background:rgba(255,255,255,0.92);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 1px 0 var(--line), 0 2px 8px rgba(13,27,42,0.04)}
.header-inner{max-width:1120px;margin:0 auto;padding:0 28px;height:58px;display:flex;align-items:center;gap:16px}
.h-brand{display:flex;align-items:center;gap:12px;margin-right:auto}
.h-badge{background:var(--crimson);color:var(--white);font-family:'DM Sans',sans-serif;font-size:13px;padding:4px 10px;border-radius:4px;letter-spacing:.5px}
.h-name{font-size:13px;color:var(--ink3);font-weight:400}
.h-divider{width:1px;height:20px;background:var(--line)}
.h-user{font-size:13px;color:var(--ink2);font-weight:500}
.h-user span{color:var(--ink3);font-weight:400;margin-right:4px}
.btn-out{font-family:'DM Sans',sans-serif;font-size:12px;color:var(--ink3);background:none;border:1px solid var(--line);border-radius:4px;padding:5px 12px;cursor:pointer;transition:all .15s}
.btn-out:hover{border-color:var(--crimson);color:var(--crimson);background:var(--crimson-light)}

/* ── NAV ── */
.nav{background:rgba(255,255,255,0.92);border-bottom:1px solid var(--line);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.nav-inner{max-width:1120px;margin:0 auto;padding:0 28px;display:flex;overflow-x:auto;scrollbar-width:none}
.nav-inner::-webkit-scrollbar{display:none}
.ntab{padding:14px 16px;font-family:'DM Sans',sans-serif;font-size:13px;font-weight:400;color:var(--ink3);background:none;border:none;border-bottom:2px solid transparent;cursor:pointer;white-space:nowrap;transition:color .15s,border-color .15s}
.ntab:hover{color:var(--ink)}
.ntab.active{color:var(--crimson);border-bottom-color:var(--crimson);font-weight:500}
.ntab.ext::after{content:'';font-size:10px;margin-left:4px;opacity:.5}

/* ── MAIN ── */
.main{max-width:1120px;margin:0 auto;padding:32px 28px 80px;flex:1}
.panel{display:none}
.panel.active{display:block;animation:fadeUp .2s ease}

/* ── PAGE HEADER ── */
.ph{margin-bottom:24px}
.ph h2{font-family:'DM Sans',sans-serif;font-size:24px;color:var(--ink);margin-bottom:3px}
.ph p{font-size:13px;color:var(--ink3)}

/* ── STUDENT BANNER ── */
.banner{background:var(--white);border:1px solid var(--line);border-radius:10px;padding:24px 28px;margin-bottom:16px;display:grid;grid-template-columns:60px 1fr auto;gap:20px;align-items:center;position:relative;overflow:hidden;box-shadow:var(--shadow-sm)}
.banner::after{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(180deg,var(--crimson),var(--crimson-mid));border-radius:3px 0 0 3px}
.avatar{width:60px;height:60px;border-radius:8px;background:var(--crimson-light);display:flex;align-items:center;justify-content:center;font-family:'DM Sans',sans-serif;font-size:22px;color:var(--crimson);flex-shrink:0;border:1.5px solid rgba(139,26,46,0.12)}
.b-name h1{font-family:'DM Sans',sans-serif;font-size:20px;color:var(--ink);margin-bottom:2px;letter-spacing:-0.2px}
.b-name .mm{font-size:13px;color:var(--ink3);margin-bottom:10px}
.tags{display:flex;flex-wrap:wrap;gap:6px}
.tag{font-size:10px;font-weight:600;letter-spacing:.6px;text-transform:uppercase;padding:3px 8px;border-radius:3px}
.tag-r{background:var(--crimson-light);color:var(--crimson);border:1px solid rgba(139,26,46,.12)}
.tag-g{background:var(--gold-light);color:var(--gold);border:1px solid rgba(154,123,47,.15)}
.tag-n{background:var(--surface);color:var(--ink3);border:1px solid var(--line)}


/* ── INFO CARD ── */
.icard{background:var(--white);border:1px solid var(--line);border-radius:10px;overflow:hidden;margin-bottom:16px;box-shadow:var(--shadow-sm)}
.icard-head{padding:11px 18px;background:var(--surface);border-bottom:1px solid var(--line);font-size:10px;font-weight:700;letter-spacing:1.8px;text-transform:uppercase;color:var(--ink3)}
.igrid{display:grid;grid-template-columns:1fr 1fr}
.icell{padding:14px 18px;border-bottom:1px solid var(--line)}
.icell:nth-child(odd){border-right:1px solid var(--line)}
.icell:nth-last-child(-n+2){border-bottom:none}
.ic-lbl{font-size:10px;font-weight:600;letter-spacing:.9px;text-transform:uppercase;color:var(--ink3);margin-bottom:3px}
.ic-val{font-size:13px;color:var(--ink)}

/* ── QUICK LINKS — improved home grid ── */
.qlinks{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;margin-bottom:24px}
.ql{
  background:var(--white);border:1px solid var(--line);border-radius:12px;
  padding:22px 22px;cursor:pointer;
  transition:border-color .2s,box-shadow .2s,transform .15s;
  text-align:left;box-shadow:var(--shadow-sm);
  display:flex;flex-direction:column;gap:0;
  min-height:120px;
  position:relative;overflow:hidden;
}
.ql::after{
  content:'';position:absolute;bottom:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--crimson),var(--crimson-mid));
  opacity:0;transition:opacity .2s;
}
.ql:hover{border-color:rgba(139,26,46,0.25);box-shadow:0 6px 24px rgba(139,26,46,.12);transform:translateY(-3px)}
.ql:hover::after{opacity:1}
.ql.dim{opacity:.4;cursor:not-allowed;pointer-events:none}
.ql-icon{width:40px;height:40px;border-radius:8px;background:var(--crimson-light);display:flex;align-items:center;justify-content:center;margin-bottom:12px;flex-shrink:0}
.ql-bar{width:24px;height:2.5px;background:var(--crimson);border-radius:99px;margin-bottom:14px}
.ql-t{font-size:14px;font-weight:600;color:var(--ink);margin-bottom:4px;letter-spacing:-.1px}
.ql-s{font-size:12px;color:var(--ink3);line-height:1.4}
.ql-arrow{
  position:absolute;top:18px;right:18px;
  font-size:16px;color:var(--line);
  transition:color .2s,transform .2s;
}
.ql:hover .ql-arrow{color:var(--crimson);transform:translate(2px,-2px)}

/* ── DEGREE LEVEL TOKENS ── */
:root {
  --bach:#1E3A6E; --bach-light:#EBF0F8;
  --mast:#4A2080; --mast-light:#F0EBF8;
  --phd:#8B1A2E;  --phd-light:#F7EEF0;
}

/* ── ACADEMIC JOURNEY (home panel) ── */
.journey-card{background:var(--white);border:1px solid var(--line);border-radius:10px;overflow:hidden;margin-bottom:24px;box-shadow:var(--shadow-sm)}
.journey-card-head{padding:11px 18px;background:var(--surface);border-bottom:1px solid var(--line);font-size:10px;font-weight:700;letter-spacing:1.8px;text-transform:uppercase;color:var(--ink3)}
.degree-row{display:flex;align-items:center;gap:14px;padding:14px 18px;border-bottom:1px solid var(--line);transition:background .12s;cursor:default;position:relative}
.degree-row:last-child{border-bottom:none}
.degree-lvl-pip{width:4px;position:absolute;left:0;top:0;bottom:0;border-radius:0}
.degree-lvl-pip.bach{background:var(--bach)}
.degree-lvl-pip.mast{background:var(--mast)}
.degree-lvl-pip.phd {background:var(--phd)}
.degree-row-icon{width:38px;height:38px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
.degree-row-icon.bach{background:var(--bach-light)}
.degree-row-icon.mast{background:var(--mast-light)}
.degree-row-icon.phd {background:var(--phd-light)}
.degree-row-info{flex:1;min-width:0}
.degree-row-name{font-size:13px;font-weight:600;color:var(--ink);margin-bottom:2px}
.degree-row-meta{font-size:11px;color:var(--ink3)}
.degree-row-lvl{font-size:9px;font-weight:700;letter-spacing:1px;text-transform:uppercase;margin-bottom:3px}
.degree-row-lvl.bach{color:var(--bach)}
.degree-row-lvl.mast{color:var(--mast)}
.degree-row-lvl.phd {color:var(--phd)}
.degree-row-gpa{text-align:right;flex-shrink:0}
.degree-row-gpa-val{font-family:'Libre Baskerville',serif;font-size:20px;color:var(--ink);line-height:1}
.degree-row-gpa-den{font-size:10px;color:var(--ink3)}
.degree-row-badge{margin-left:10px;flex-shrink:0}
.dbadge{display:inline-block;padding:2px 8px;border-radius:3px;font-size:9px;font-weight:700;letter-spacing:.4px;text-transform:uppercase}
.dbadge-green{background:var(--green-light);color:var(--green)}
.dbadge-gold{background:var(--gold-light);color:var(--gold)}
.dbadge-muted{background:var(--surface);color:var(--ink3);border:1px solid var(--line)}
.dbadge-red{background:var(--crimson-light);color:var(--crimson)}

/* ── GRADES DEGREE TABS ── */
.degree-tabs{display:flex;gap:2px;border-bottom:2px solid var(--line);margin-bottom:0;overflow-x:auto;scrollbar-width:none}
.degree-tabs::-webkit-scrollbar{display:none}
.degree-tab{padding:10px 18px;font-size:13px;color:var(--ink3);border-bottom:2px solid transparent;margin-bottom:-2px;cursor:pointer;white-space:nowrap;transition:color .15s,border-color .15s;background:none;border-top:none;border-left:none;border-right:none;font-family:'DM Sans',sans-serif}
.degree-tab:hover{color:var(--ink)}
.degree-tab.active{color:var(--crimson);border-bottom-color:var(--crimson);font-weight:500}
.degree-panel{display:none}
.degree-panel.active{display:block;animation:fadeUp .2s ease}

/* ── DOCUMENT DEGREE PICKER ── */
.doc-degree-picker{display:none;margin-bottom:12px;padding:12px 16px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r)}
.doc-degree-picker label{display:block;font-size:10px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--ink3);margin-bottom:7px}
.doc-degree-picker select{width:100%;padding:9px 12px;border:1.5px solid var(--line);border-radius:var(--r);font-family:'DM Sans',sans-serif;font-size:13px;color:var(--ink);background:var(--white);outline:none;transition:border-color .15s}
.doc-degree-picker select:focus{border-color:var(--crimson)}
.doc-degree-picker.show{display:block}

/* ── HOME welcome banner ── */
.home-hero{
  background:linear-gradient(130deg,var(--ink) 0%,#1e3050 100%);
  border-radius:14px;padding:32px 36px;margin-bottom:24px;
  display:flex;align-items:center;gap:28px;
  position:relative;overflow:hidden;
  box-shadow:0 4px 24px rgba(13,27,42,.18);
}
.home-hero::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at 80% 50%,rgba(139,26,46,.28) 0%,transparent 60%),
             radial-gradient(ellipse at 10% 80%,rgba(154,123,47,.12) 0%,transparent 50%);
  pointer-events:none;
}
.home-hero-avatar{
  width:72px;height:72px;border-radius:12px;
  background:rgba(255,255,255,.1);border:2px solid rgba(255,255,255,.15);
  display:flex;align-items:center;justify-content:center;
  font-family:'Libre Baskerville',serif;font-size:28px;color:rgba(255,255,255,.9);
  flex-shrink:0;position:relative;z-index:1;
  backdrop-filter:blur(4px);
}
.home-hero-text{position:relative;z-index:1;flex:1}
.home-hero-greeting{font-size:13px;color:rgba(255,255,255,.5);letter-spacing:.5px;text-transform:uppercase;margin-bottom:4px}
.home-hero-name{font-family:'Libre Baskerville',serif;font-size:26px;color:#fff;margin-bottom:4px;line-height:1.2}
.home-hero-sub{font-size:13px;color:rgba(255,255,255,.45)}
.home-hero-badge{
  position:relative;z-index:1;flex-shrink:0;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);
  border-radius:10px;padding:14px 20px;text-align:center;
  backdrop-filter:blur(8px);
}
.home-hero-badge-label{font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:rgba(255,255,255,.4);margin-bottom:4px}
.home-hero-badge-val{font-family:'Libre Baskerville',serif;font-size:28px;color:#fff;line-height:1}
.home-hero-badge-sub{font-size:11px;color:rgba(255,255,255,.35);margin-top:2px}

/* ── HOME section label ── */
.home-section-label{font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--ink3);margin-bottom:12px;padding-left:2px}

/* ── GRADES — redesigned transcript ── */
.g-wrap {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 20px;
  box-shadow: var(--shadow-sm);
}

/* Student identity banner at top of grades panel */
.grades-header-banner {
  background: var(--ink);
  border-radius: 10px;
  padding: 20px 24px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 20px;
  position: relative;
  overflow: hidden;
}
.grades-header-banner::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 85% 50%, rgba(139,26,46,.3) 0%, transparent 60%);
  pointer-events: none;
}
.grades-hdr-avatar {
  width: 52px; height: 52px; border-radius: 8px;
  background: rgba(255,255,255,.1);
  border: 1.5px solid rgba(255,255,255,.15);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Libre Baskerville', serif; font-size: 20px;
  color: rgba(255,255,255,.9); flex-shrink: 0; position: relative; z-index: 1;
}
.grades-hdr-info { flex: 1; position: relative; z-index: 1; }
.grades-hdr-name {
  font-family: 'Libre Baskerville', serif;
  font-size: 18px; color: #fff; margin-bottom: 2px; line-height: 1.2;
}
.grades-hdr-id {
  font-size: 11px; color: rgba(255,255,255,.45);
  font-family: monospace; letter-spacing: .06em;
}
.grades-hdr-gpa {
  position: relative; z-index: 1; text-align: right; flex-shrink: 0;
}
.grades-hdr-gpa-label {
  font-size: 9px; font-weight: 700; letter-spacing: 1.4px;
  text-transform: uppercase; color: rgba(255,255,255,.4); margin-bottom: 2px;
}
.grades-hdr-gpa-val {
  font-family: 'Libre Baskerville', serif;
  font-size: 32px; color: #fff; line-height: 1;
}
.grades-hdr-gpa-den { font-size: 12px; color: rgba(255,255,255,.35); }

/* Year heading */
.g-year-head {
  background: var(--surface);
  padding: 10px 18px;
  border-bottom: 1px solid var(--line);
  font-size: 11px; font-weight: 700; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--ink);
  display: flex; align-items: center; gap: 10px;
}
.g-year-head::before {
  content: '';
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--crimson); flex-shrink: 0;
}
.g-block-head {
  padding: 7px 18px;
  background: #FAFBFC;
  border-bottom: 1px solid var(--line);
  font-size: 10px; font-weight: 700; letter-spacing: 1.2px;
  text-transform: uppercase; color: var(--ink3);
}
.g-year-totals {
  background: var(--surface);
  border-top: 1px solid var(--line);
  padding: 9px 18px;
  display: flex; justify-content: flex-end; gap: 28px;
  font-size: 11px; color: var(--ink3);
}
.g-year-totals strong { color: var(--ink); font-weight: 700; }

/* Table — clean transcript style */
table.gt {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  font-family: 'DM Sans', sans-serif;
}
table.gt thead tr { border-bottom: 2px solid var(--line); }
table.gt th {
  padding: 9px 14px;
  text-align: left;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--ink3);
  white-space: nowrap;
}
table.gt th:nth-child(3),
table.gt th:nth-child(4),
table.gt th:nth-child(5),
table.gt th:nth-child(6),
table.gt th:nth-child(7) { text-align: center; }
table.gt th:nth-child(8) { text-align: left; }
table.gt td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  vertical-align: middle;
}
table.gt td:nth-child(3),
table.gt td:nth-child(4),
table.gt td:nth-child(5),
table.gt td:nth-child(6),
table.gt td:nth-child(7) { text-align: center; }
/* Grade column — force all badges into one locked column width */
table.gt th:nth-child(7),
table.gt td:nth-child(7) {
  text-align: center;
  width: 66px;
  min-width: 66px;
  max-width: 66px;
  padding-left: 4px;
  padding-right: 4px;
}
table.gt td:nth-child(8) { font-size: 11px; color: var(--ink3); font-style: italic; }
table.gt tr:last-child td { border-bottom: none; }
table.gt tbody tr { transition: background .1s; }
table.gt tbody tr:hover { background: #F8F9FC; }

/* Course name */
.gt-course {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.3;
}
.gt-assess { font-size: 11px; color: var(--ink3); margin-top: 2px; }

/* Credits */
.gt-cr {
  font-size: 12px;
  font-weight: 500;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 2px 8px;
  display: inline-block;
}

/* Score bar */
.sbar-wrap { display: inline-flex; align-items: center; gap: 7px; }
.sbar { display: none; }
.sbar-fill { display: none; }
.sbar-num { font-size: 12px; font-weight: 600; color: var(--ink); }

/* Grade badge — proper colored badges */
.gbadge {
  display: inline-flex;
  align-items: center; justify-content: center;
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  font-weight: 700;
  width: 42px;
  min-width: 42px;
  height: 26px;
  border-radius: 5px;
  padding: 0;
  letter-spacing: .2px;
  text-align: center;
}
.gAp { background: #D1FAE5; color: #065F46; border: 1px solid #6EE7B7; }
.gA  { background: #D1FAE5; color: #065F46; border: 1px solid #A7F3D0; }
.gAm { background: #DBEAFE; color: #1E40AF; border: 1px solid #BFDBFE; }
.gBp { background: var(--gold-light); color: #7C5F0A; border: 1px solid #FCD34D; }
.gB  { background: var(--gold-light); color: var(--gold); border: 1px solid rgba(154,123,47,.25); }
.gX  { background: var(--surface); color: var(--ink3); border: 1px solid var(--line); }
.gC  { background: #EDE9FE; color: #5B21B6; border: 1px solid #C4B5FD; }

/* Grade points */
.gt-pts {
  font-size: 13px; font-weight: 700; color: var(--ink);
  font-family: 'Libre Baskerville', serif;
}

/* Empty state */
.no-g { padding: 56px; text-align: center; color: var(--ink3); font-size: 13px; }

/* Transcript summary bar */
.transcript-summary {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0;
  margin-bottom: 20px;
  display: flex;
  flex-direction: row;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.ts-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px 22px;
  flex: 1;
  border-right: 1px solid var(--line);
  text-align: center;
  gap: 4px;
}
.ts-item:last-child { border-right: none; }
.ts-lbl { font-size: 10px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--ink3); }
.ts-val { font-family: 'Libre Baskerville', serif; font-size: 22px; font-weight: 700; color: var(--ink); line-height: 1.1; }
.ts-val.accent { color: var(--crimson); }
.ts-divider { display: none; }

/* ── ID CARD ── */
.idcard-wrap{display:flex;flex-direction:column;align-items:center;gap:28px;padding:20px 0}

/* ── Card shell: landscape, credit-card ratio 85.6×54mm scaled up ── */
.idcard{width:480px;border-radius:10px;overflow:hidden;box-shadow:0 20px 60px rgba(13,27,42,.25),0 4px 16px rgba(13,27,42,.12),0 0 0 1px rgba(13,27,42,.1);position:relative;user-select:none;font-family:'DM Sans',sans-serif}

/* ══ FRONT ══════════════════════════════════════════════════════════ */
.idcard-front{display:flex;flex-direction:row;background:#fff;height:295px;min-height:295px;position:relative;overflow:hidden}

/* Left colour band */
.idcard-left-band{width:120px;flex-shrink:0;background:linear-gradient(175deg,#8B1A2E 0%,#6b1222 55%,#3e0b18 100%);display:flex;flex-direction:column;align-items:center;padding:18px 10px 14px;position:relative;overflow:hidden}
.idcard-left-band::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(135deg,rgba(255,255,255,.03) 0px,rgba(255,255,255,.03) 1px,transparent 1px,transparent 14px);pointer-events:none}
.idcard-left-band::after{content:'';position:absolute;top:0;left:0;right:0;height:60%;background:radial-gradient(ellipse at 50% 0%,rgba(255,255,255,.1) 0%,transparent 70%);pointer-events:none}

.idcard-band-logo{width:54px;height:auto;object-fit:contain;margin-bottom:10px;position:relative;z-index:1}
.idcard-band-title{font-size:7px;font-weight:800;letter-spacing:1.6px;text-transform:uppercase;color:rgba(255,255,255,.6);text-align:center;line-height:1.6;position:relative;z-index:1;margin-bottom:12px}

/* Photo in left band */
.idcard-photo{width:82px;height:100px;border-radius:3px;background:rgba(255,255,255,.12);border:1.5px solid rgba(255,255,255,.35);display:flex;align-items:center;justify-content:center;overflow:hidden;font-size:28px;font-weight:700;color:rgba(255,255,255,.65);box-shadow:0 4px 14px rgba(0,0,0,.4);position:relative;z-index:1;flex-shrink:0}
.idcard-photo img,.idcard-photo canvas{width:100%;height:100%;object-fit:cover;display:block}

.idcard-band-badge{margin-top:auto;padding-top:14px;font-size:6.5px;font-weight:800;letter-spacing:1.8px;text-transform:uppercase;color:rgba(255,255,255,.85);text-align:center;position:relative;z-index:1;border-top:1px solid rgba(255,255,255,.15);width:100%}

/* Right content panel */
.idcard-right{flex:1;display:flex;flex-direction:column;background:#fff;position:relative;overflow:hidden;min-width:0}
.idcard-right::before{content:'';position:absolute;inset:0;background-image:radial-gradient(circle,rgba(139,26,46,.045) 1px,transparent 1px);background-size:18px 18px;pointer-events:none}

/* University header strip */
.idcard-right-header{padding:11px 16px 9px;border-bottom:2px solid #8B1A2E;position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:8px}
.idcard-uni-block{flex:1;min-width:0}
.idcard-uni-name{font-size:10px;font-weight:800;color:#0D1B2A;letter-spacing:.3px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.idcard-uni-sub{font-size:7px;color:#7A8599;letter-spacing:.2px;line-height:1.5}
.idcard-right-badge{font-size:6.5px;font-weight:800;letter-spacing:1.8px;text-transform:uppercase;background:#8B1A2E;color:#fff;padding:3px 8px;border-radius:2px;white-space:nowrap;flex-shrink:0}

/* Main fields */
.idcard-right-body{flex:1;padding:11px 16px 10px;position:relative;z-index:1;display:flex;flex-direction:column;gap:7px}
.idcard-name{font-size:15.5px;font-weight:800;color:#0D1B2A;line-height:1.2;letter-spacing:-.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.idcard-name-mm{font-size:9.5px;color:#7A8599;line-height:1.4;margin-top:-3px;margin-bottom:3px}
.idcard-fields{display:grid;grid-template-columns:1fr 1fr;gap:6px 12px}
.idcard-field{display:flex;flex-direction:column;gap:1px}
.idcard-field-lbl{font-size:6.5px;font-weight:700;letter-spacing:1.3px;text-transform:uppercase;color:#9A7B2F}
.idcard-field-val{font-size:11px;font-weight:600;color:#0D1B2A;line-height:1.3}

/* Gold holographic strip */
.idcard-holo-strip{height:4px;background:linear-gradient(90deg,#9A7B2F,#e8c96a,#f5d98a,#9A7B2F,#c8a84b,#f0d080,#9A7B2F,#e8c96a);position:relative;z-index:1}

/* Bottom dark bar with ID */
.idcard-bottom{background:#0D1B2A;padding:8px 16px;display:flex;align-items:center;justify-content:space-between;position:relative;z-index:1}
.idcard-id-label{font-size:6.5px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:rgba(255,255,255,.4);margin-bottom:1px}
.idcard-id-value{font-family:monospace;font-size:15px;font-weight:700;color:#fff;letter-spacing:2.5px}
.idcard-validity{text-align:right}
.idcard-validity span{font-size:6.5px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:rgba(255,255,255,.4);display:block}
.idcard-validity strong{font-size:11px;color:rgba(255,255,255,.88);letter-spacing:.5px;font-weight:700;display:block}

/* ══ BACK ═══════════════════════════════════════════════════════════ */
.idcard-back{display:flex;flex-direction:row;background:#fff;height:295px;min-height:295px;position:relative;overflow:hidden;border-top:3px solid #8B1A2E}
.idcard-back::before{content:'';position:absolute;inset:0;background-image:radial-gradient(circle,rgba(139,26,46,.04) 1px,transparent 1px);background-size:18px 18px;pointer-events:none}

.idcard-back-left{width:120px;flex-shrink:0;background:#f9f1f3;border-right:1px solid #e8d4d8;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:16px 10px;gap:12px;position:relative;z-index:1}
.idcard-qr-wrap{display:flex;flex-direction:column;align-items:center;gap:4px}
.idcard-qr-wrap canvas,.idcard-qr-wrap img{border:1px solid #ddd;border-radius:2px;display:block;width:100px !important;height:100px !important}
.idcard-qr-lbl{font-size:6px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#9A7B2F;text-align:center}
.idcard-sig-area{border-top:1px solid #ccc;padding-top:6px;width:100%;text-align:center;font-size:6px;color:#7A8599;letter-spacing:.4px;text-transform:uppercase}

.idcard-back-right{flex:1;padding:14px 16px;display:flex;flex-direction:column;gap:10px;position:relative;z-index:1}
.idcard-back-header{font-size:7px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:#8B1A2E;padding-bottom:6px;border-bottom:1px solid #e8d4d8}
.idcard-back-fields{display:grid;grid-template-columns:1fr 1fr;gap:8px;flex:1}
.idcard-back-field .lbl{font-size:6.5px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:#7A8599;margin-bottom:2px}
.idcard-back-field .val{font-size:11.5px;font-weight:600;color:#0D1B2A}
.idcard-back-bottom{display:flex;flex-direction:column;gap:2px}
.idcard-sid-block .lbl{font-size:6.5px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#7A8599;margin-bottom:2px}
.idcard-sid-block .val{font-size:13px;font-weight:700;color:#0D1B2A;letter-spacing:2px;font-family:monospace}
.idcard-notice{font-size:6.5px;color:#9A9A9A;line-height:1.6;font-style:italic}

.idcard-actions{display:flex;gap:10px}
.btn-idcard{padding:10px 20px;border-radius:var(--r);font-family:'DM Sans',sans-serif;font-size:13px;font-weight:600;cursor:pointer;transition:all .15s;display:flex;align-items:center;gap:8px}
.btn-idcard-primary{background:var(--crimson);color:#fff;border:none;box-shadow:0 2px 8px rgba(139,26,46,.25)}
.btn-idcard-primary:hover{background:var(--crimson-mid)}
.btn-idcard-secondary{background:transparent;color:var(--crimson);border:1.5px solid var(--crimson)}
.btn-idcard-secondary:hover{background:var(--crimson-light)}

/* ── PRINT ── */
/* Watermark: hidden on screen */
.print-watermark {
  display: none;
}
/* Print footer: hidden on screen */
.print-footer {
  display: none;
}
/* Print page header: hidden on screen */
.print-page-header {
  display: none;
}

@page {
  margin: 24mm 20mm 22mm 20mm;
  @bottom-left {
    font-family: 'DM Sans', sans-serif;
    font-size: 7.5pt;
    color: #444;
    border-top: 1.5px solid #0D1B2A;
    padding-top: 5pt;
  }
  @bottom-center {
    content: attr(data-student-name);
    font-family: 'DM Sans', sans-serif;
    font-size: 7.5pt;
    color: #777;
    border-top: 1.5px solid #0D1B2A;
    padding-top: 5pt;
    text-align: center;
  }
  @bottom-right {
    font-family: 'DM Sans', sans-serif;
    font-size: 7.5pt;
    color: #444;
    border-top: 1.5px solid #0D1B2A;
    padding-top: 5pt;
  }
}

@media print {
  /* General print reset */
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body { background: #fff; font-size: 12px; padding-bottom: 18mm; }

  /* Watermark — fixed so it appears on every printed page */
  .print-watermark {
    display: block !important;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-35deg);
    font-family: 'DM Sans', serif;
    font-size: 40pt;
    font-weight: 700;
    color: rgba(139, 26, 46, 0.07);
    letter-spacing: 10px;
    pointer-events: none;
    z-index: 0;
    white-space: nowrap;
  }

  /* Footer — fixed so it appears on every printed page */
  .print-footer {
    display: flex !important;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    border-top: 1.5px solid #0D1B2A;
    padding: 5px 20mm;
    font-family: 'DM Sans', sans-serif;
    font-size: 8pt;
    color: #444;
    justify-content: space-between;
    align-items: center;
    z-index: 9999;
    background: #fff;
    counter-increment: page;
  }
  .print-footer-sid {
    font-weight: 700;
    color: #0D1B2A;
    margin-left: 4px;
  }
  .print-footer-center {
    font-size: 7.5pt;
    color: #888;
  }
  .print-footer-page::before {
    content: "Page " counter(page);
    font-size: 7.5pt;
    color: #444;
    letter-spacing: .3px;
  }

  /* Print page header — repeats at top of each page */
  .print-page-header {
    display: flex !important;
    position: fixed;
    top: 0; left: 0; right: 0;
    border-bottom: 1.5px solid #0D1B2A;
    padding: 5px 28mm;
    font-family: 'DM Sans', sans-serif;
    font-size: 8pt;
    color: #444;
    justify-content: space-between;
    align-items: center;
    background: #fff;
    z-index: 9999;
  }
  #printPageHeaderSID {
    font-weight: 700;
    color: #8B1A2E;
    font-size: 8pt;
  }

  /* Hide everything except the active panel */
  #loginScreen, .sidebar, .sb-toggle, .dash-topbar,
  .ql, .qlinks, .btn-signout, .btn-login, .dash-footer { display: none !important; }
  #dashboard { display: block !important; }
  .dash-main { margin-left: 0 !important; }
  .dash-content { padding: 0 !important; }
  .section { display: none !important; }
  .section.active { display: block !important; }

  /* ── DOCUMENTS / PROFILE print ── */
  #panel-profile.active {
    padding: 24mm 28mm;   /* increased left/right margins */
  }

  /* Remove the seal / avatar — hide and collapse grid column */
  #panel-profile .avatar,
  #panel-profile #avatarEl {
    display: none !important;
    width: 0 !important;
    min-width: 0 !important;
  }

  /* Banner layout without avatar column */
  #panel-profile .banner {
    grid-template-columns: 1fr auto;
    border: 1px solid #ccc;
    box-shadow: none;
    padding: 16px 20px;
    page-break-inside: avoid;
  }
  #panel-profile .banner::after { display: none; }

  /* Info card */
  #panel-profile .icard {
    border: 1px solid #ccc;
    box-shadow: none;
    page-break-inside: avoid;
  }
  #panel-profile .icard-head { background: #f0f0f0 !important; }
  #panel-profile .igrid { grid-template-columns: 1fr 1fr; }
  #panel-profile .icell { padding: 8px 14px; }

  /* Page header for profile print */
  #panel-profile .ph h2 { font-size: 18px; }

  /* ── TRANSCRIPT / GRADES print ── */
  #panel-grades.active { padding: 0; }

  /* Summary card in print */
  .transcript-summary {
    border: 1px solid #ccc !important;
    box-shadow: none !important;
    margin-bottom: 12px !important;
    padding: 0 !important;
    page-break-inside: avoid;
  }
  .ts-item { padding: 8px 16px !important; border-bottom: 1px solid #e0e0e0 !important; }
  .ts-item:last-child { border-bottom: none !important; }
  .ts-val { font-size: 14px !important; }
  .ts-divider { display: none !important; }

  /* Hide score bars in print — show number only */
  .sbar { display: none !important; }
  .sbar-wrap { display: inline !important; }
  .sbar-num { font-size: 11px !important; }

  /* Year block */
  .g-wrap {
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    margin-bottom: 16px !important;
    page-break-inside: avoid;
  }

  /* Semester header — clean uppercase label */
  .g-year-head {
    background: var(--white) !important;
    color: var(--ink) !important;
    font-size: 8pt !important;
    padding: 8px 0 4px !important;
    letter-spacing: 2px !important;
    border-bottom: 1.5px solid #0D1B2A !important;
  }
  .g-year-head::before { display: none !important; }

  /* Block sub-heading — hidden */
  .g-block-head { display: none !important; }

  /* Year totals footer */
  .g-year-totals {
    background: #fff !important;
    border-top: 1px solid #ccc !important;
    font-size: 8pt !important;
    padding: 5px 0 !important;
    gap: 24px !important;
  }

  /* Table */
  table.gt {
    font-size: 7.5pt !important;
    border-collapse: collapse !important;
  }
  table.gt thead tr { border-bottom: 1.5px solid #0D1B2A !important; }
  table.gt th {
    padding: 5px 8px !important;
    font-size: 6.5pt !important;
    letter-spacing: .8px !important;
    color: #555 !important;
    background: transparent !important;
    border-bottom: 1px solid #999 !important;
    text-align: left !important;
    white-space: nowrap !important;
  }
  table.gt th:nth-child(3),
  table.gt th:nth-child(4),
  table.gt th:nth-child(5),
  table.gt th:nth-child(6),
  table.gt td:nth-child(3),
  table.gt td:nth-child(4),
  table.gt td:nth-child(5),
  table.gt td:nth-child(6) { text-align: center !important; }
  table.gt td {
    padding: 5px 8px !important;
    border-bottom: 1px solid #ebebeb !important;
    color: #111 !important;
    vertical-align: middle !important;
  }
  table.gt tr:last-child td { border-bottom: none !important; }
  table.gt tbody tr:nth-child(even) td { background: #fafafa !important; }
  table.gt tbody tr:hover { background: none !important; }


  /* Print-only: Type of Completion column — 4pt smaller than regular table text */
  table.gt td:nth-child(4) {
    font-size: 6.5pt !important;
  }

  /* Course cell */
  .gt-course {
    font-family: 'DM Sans', sans-serif !important;
    font-weight: 500 !important;
    font-size: 7pt !important;
    line-height: 1.25 !important;
    color: #0D1B2A !important;
    letter-spacing: -.05px !important;
  }

  /* Credits — plain */
  .gt-cr {
    background: none !important;
    border: none !important;
    font-size: 9pt !important;
    color: #333 !important;
    padding: 0 !important;
  }

  /* Score bar — hide */
  .sbar { display: none !important; }
  .sbar-wrap { display: inline !important; }
  .sbar-num { font-size: 9pt !important; }

  /* Grade badge — plain letter */
  .gbadge {
    background: none !important;
    border: none !important;
    color: #0D1B2A !important;
    font-family: 'DM Sans', sans-serif !important;
    font-size: 8.8pt !important;
    font-weight: 700 !important;
    min-width: auto !important;
    height: auto !important;
    padding: 0 !important;
    display: inline !important;
  }
  .gbadge sup {
    font-size: 0.65em !important;
    line-height: 0 !important;
    position: relative !important;
    top: -0.4em !important;
    vertical-align: baseline !important;
  }
  /* Prevent sup from expanding the row height */
  table.gt td { line-height: 1.2 !important; overflow: visible !important; }
  table.gt td span.gbadge { line-height: 1 !important; display: inline-block !important; vertical-align: middle !important; }

  /* Grade points */
  .gt-pts {
    font-size: 9pt !important;
    font-weight: 400 !important;
    color: #0D1B2A !important;
  }

  /* Page title */
  #panel-grades .ph h2 { font-size: 16pt !important; margin-bottom: 2px !important; }
  #panel-grades .ph p  { font-size: 9pt !important; color: #666 !important; }

  #panel-grades,
#panel-grades *,
#panel-profile,
#panel-profile *,
.transcript-summary,
.transcript-summary *,
table.gt,
table.gt * {
  font-family: 'DM Sans', sans-serif !important;
}
}


/* ── DOCUMENTS TAB ── */
.doc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 24px;
}
@media(max-width:700px){ .doc-grid { grid-template-columns: 1fr; } }

.doc-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 28px 28px 24px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 0;
  box-shadow: 0 1px 4px rgba(13,27,42,.04);
  transition: border-color .15s, box-shadow .15s;
}
.doc-card:hover { border-color: rgba(139,26,46,.25); box-shadow: 0 4px 16px rgba(139,26,46,.07); }
   

@keyframes spin { to { transform: rotate(360deg); } }
 
.odoc-card {
  background: var(--doc-card-bg, var(--white));
  border: 1px solid var(--doc-card-border, var(--line));
  border-radius: 10px;
  padding: 22px 22px 18px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 0;
  box-shadow: var(--shadow-sm);
  transition: border-color .15s, box-shadow .15s;
}
.odoc-card:hover {
  border-color: rgba(139,26,46,.25);
  box-shadow: 0 4px 16px rgba(139,26,46,.07);
}
.odoc-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--crimson);
  border-radius: 3px 0 0 3px;
}
.odoc-icon {
  width: 40px; height: 40px;
  border-radius: 8px;
  background: var(--crimson-light);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
  flex-shrink: 0;
}
.odoc-icon svg { width: 20px; height: 20px; stroke: var(--crimson); fill: none; stroke-width: 1.8; }
.odoc-title {
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--doc-title-color, var(--ink));
  margin-bottom: 6px;
  line-height: 1.3;
}
.odoc-desc {
  font-size: 12px;
  color: var(--doc-desc-color, var(--ink3));
  line-height: 1.55;
  margin-bottom: 14px;
  flex: 1;
}
.odoc-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.odoc-category {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 3px;
  border: 1px solid rgba(139,26,46,.2);
  color: var(--crimson);
  background: var(--crimson-light);
}
.odoc-filetype {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .8px;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 3px;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink3);
}
.odoc-btn {
  width: 100%;
  padding: 11px 0;
  background: var(--crimson);
  border: none;
  border-radius: 7px;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  text-decoration: none;
  transition: opacity .15s, transform .1s;
}
.odoc-btn:hover { opacity: .88; transform: translateY(-1px); }
.odoc-btn svg { width: 14px; height: 14px; stroke: #fff; fill: none; stroke-width: 2.2; flex-shrink: 0; }
 
/* Dark mode overrides */
body:not(.theme-light) .odoc-card {
  background: rgba(255,255,255,0.03);
  border-color: rgba(255,255,255,0.07);
}
body:not(.theme-light) .odoc-card:hover {
  background: rgba(139,26,46,0.04);
  border-color: rgba(139,26,46,0.3);
}
body:not(.theme-light) .odoc-filetype {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.4);
}
/* .odoc-title / .odoc-desc read var(--doc-title-color)/var(--doc-desc-color),
   which are only ever set inside body.theme-light — in dark mode they fell
   back to var(--ink), a dark navy, rendering invisible on the dark card
   background. Force white text explicitly in dark mode. */
body:not(.theme-light) .odoc-title {
  color: #ffffff;
}
body:not(.theme-light) .odoc-desc {
  color: rgba(255,255,255,0.75);
}

/* My Documents (doc-history) rows — these are built with inline
   styles that fall back to var(--ink), and --ink is only ever
   defined once at :root as a dark navy (#0D1B2A). In dark mode that
   var never gets redefined, so the row title and Download button
   text rendered dark-on-dark and was effectively invisible. Force
   them to light text here (matches the rest of this dark-mode
   override block, which already wins over inline styles via
   !important). */
body:not(.theme-light) .doc-history-row {
  color: rgba(255,255,255,0.88);
}
body:not(.theme-light) .doc-history-row > div > div:first-child {
  color: rgba(255,255,255,0.92) !important;
}
body:not(.theme-light) .doc-history-row > div > div:last-child {
  color: rgba(255,255,255,0.5) !important;
}
body:not(.theme-light) .doc-history-download-btn {
  color: rgba(255,255,255,0.85) !important;
  border-color: rgba(255,255,255,0.18) !important;
}
body:not(.theme-light) .doc-history-download-btn:hover {
  border-color: rgba(255,255,255,0.32) !important;
  background: rgba(255,255,255,0.06) !important;
}
 
.doc-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--crimson);
  border-radius: 3px 0 0 3px;
}
.doc-icon {
  width: 44px; height: 44px;
  border-radius: 8px;
  background: var(--crimson-light);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
}
.doc-icon svg { width: 20px; height: 20px; stroke: var(--crimson); fill: none; stroke-width: 1.8; }
.doc-title {
  font-family: 'DM Sans', serif;
  font-size: 17px;
  color: var(--ink);
  margin-bottom: 8px;
}
.doc-desc {
  font-size: 13px;
  color: var(--ink3);
  line-height: 1.55;
  margin-bottom: 16px;
  flex: 1;
}
.doc-tags {
  display: flex; gap: 6px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.doc-tag {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 3px;
  border: 1px solid rgba(139,26,46,.2);
  color: var(--crimson);
  background: var(--crimson-light);
}
.btn-print-doc {
  width: 100%;
  padding: 13px 0;
  background: var(--crimson);
  border: none;
  border-radius: 7px;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--white);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  letter-spacing: .2px;
  transition: background .15s, transform .1s;
}
.btn-print-doc:hover { background: var(--crimson-mid); transform: translateY(-1px); }
.btn-print-doc svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; }

/* ── Photo protection ── */
canvas.photo-canvas, #idcardPhoto canvas, #homeAvatar canvas, #gradesAvatar canvas, #profilePhotoPreview canvas {
  -webkit-touch-callout: none;
  user-select: none;
  -webkit-user-select: none;
  pointer-events: none;
}

/* ══════════════════════════════════════════════
   SIDEBAR DASHBOARD LAYOUT
   ══════════════════════════════════════════════ */

/* Dark academic background for dashboard */
body.dashboard-active {
  background-color: #0a0f1a;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900' viewBox='0 0 900 900'%3E%3Cg stroke='%238B1A2E' stroke-width='1' fill='none' opacity='0.03'%3E%3Ccircle cx='80' cy='80' r='18'/%3E%3Ccircle cx='80' cy='80' r='10'/%3E%3Cpolyline points='200,120 230,120 245,90 255,150 270,80 285,160 300,120 340,120'/%3E%3Cpath d='M400 60 Q415 90 400 120 Q385 150 400 180 Q415 210 400 240'/%3E%3Cpath d='M420 60 Q405 90 420 120 Q435 150 420 180 Q405 210 420 240'/%3E%3Cpolygon points='560,50 520,70 560,90 600,70'/%3E%3Crect x='438' y='310' width='8' height='40' rx='2'/%3E%3Crect x='422' y='326' width='40' height='8' rx='2'/%3E%3Cpolyline points='700,320 730,320 745,290 755,350 770,270 785,360 800,320 840,320'/%3E%3Ccircle cx='820' cy='700' r='40'/%3E%3Ccircle cx='820' cy='700' r='28'/%3E%3Ccircle cx='820' cy='700' r='14'/%3E%3C/g%3E%3C/svg%3E");
}

/* ── SIDEBAR LAYOUT ── */
#dashboard {
  display: none;
  position: fixed;
  inset: 0;
  overflow: hidden;
}
#dashboard.show {
  display: flex;
  flex-direction: row;
  animation: fadeUp .35s ease;
}

/* ── SIDEBAR ── */
.sidebar {
  width: 256px;
  flex-shrink: 0;
  background: rgba(10,15,26,0.97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-right: 1px solid rgba(255,255,255,0.06);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; left: 0; bottom: 0;
  z-index: 40;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
}
.sidebar::-webkit-scrollbar { display: none; }

/* Sidebar brand */
.sb-brand {
  padding: 24px 22px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.sb-brand img { height: 36px; width: auto; object-fit: contain; opacity: .9; }
.sb-brand-text { display: flex; flex-direction: column; gap: 1px; }
.sb-brand-name {
  font-family: 'DM Sans', sans-serif;
  font-size: 13px; font-weight: 700;
  color: rgba(255,255,255,0.92);
  letter-spacing: .3px;
}
.sb-brand-sub {
  font-size: 10px;
  color: rgba(255,255,255,0.3);
  letter-spacing: .5px;
  text-transform: uppercase;
}

/* Sidebar user card */
.sb-user {
  margin: 16px 14px;
  padding: 14px 14px;
  background: rgba(139,26,46,0.12);
  border: 1px solid rgba(139,26,46,0.2);
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.sb-user-avatar {
  width: 36px; height: 36px;
  border-radius: 8px;
  background: rgba(139,26,46,0.3);
  border: 1.5px solid rgba(139,26,46,0.4);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Libre Baskerville', serif;
  font-size: 14px; color: rgba(255,255,255,0.85);
  flex-shrink: 0; overflow: hidden;
}
.sb-user-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; }
.sb-user-info { flex: 1; min-width: 0; }
.sb-user-name {
  font-size: 12px; font-weight: 600;
  color: rgba(255,255,255,0.88);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sb-user-id {
  font-size: 10px;
  color: rgba(255,255,255,0.35);
  font-family: monospace;
  letter-spacing: .05em;
  margin-top: 1px;
}

/* Nav section label */
.sb-section-lbl {
  padding: 14px 22px 6px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.22);
  flex-shrink: 0;
}

/* Nav items */
.sb-nav { flex: 1; padding: 4px 0 8px; }
.sbnav-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 14px 10px 18px;
  margin: 1px 10px;
  border-radius: 9px;
  cursor: pointer;
  transition: background .15s, color .15s;
  text-decoration: none;
  border: none;
  background: none;
  width: calc(100% - 20px);
  text-align: left;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  color: rgba(255,255,255,0.45);
  position: relative;
}
.sbnav-item:hover {
  background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.78);
}
.sbnav-item.active {
  background: rgba(139,26,46,0.18);
  color: rgba(255,255,255,0.92);
  border: 1px solid rgba(139,26,46,0.25);
}
.sbnav-item.active .sbnav-icon { color: #e05470; }
.sbnav-icon {
  width: 18px; height: 18px;
  flex-shrink: 0;
  color: rgba(255,255,255,0.3);
  transition: color .15s;
}
.sbnav-item:hover .sbnav-icon { color: rgba(255,255,255,0.6); }
.sbnav-label { font-size: 13px; font-weight: 500; }
.sbnav-ext {
  margin-left: auto;
  font-size: 9px;
  color: rgba(255,255,255,0.2);
  flex-shrink: 0;
}
.sbnav-item.ext-link { opacity: .7; }

/* Sidebar footer */
.sb-footer {
  padding: 14px 14px 20px;
  border-top: 1px solid rgba(255,255,255,0.06);
  flex-shrink: 0;
}
.btn-signout {
  width: 100%;
  padding: 9px 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: rgba(255,255,255,0.4);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  transition: all .15s;
}
.btn-signout:hover {
  background: rgba(139,26,46,0.15);
  border-color: rgba(139,26,46,0.3);
  color: rgba(255,255,255,0.7);
}

/* Mobile sidebar toggle */
.sb-toggle {
  display: none;
  position: fixed;
  top: 14px; left: 14px;
  z-index: 60;
  width: 40px; height: 40px;
  background: rgba(10,15,26,0.92);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 9px;
  align-items: center; justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(12px);
  color: rgba(255,255,255,0.7);
}
.sb-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 39;
  backdrop-filter: blur(2px);
}
.sb-overlay.show { display: block; }

/* ── MAIN CONTENT AREA ── */
.dash-main {
  margin-left: 256px;
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  background: #0e1420;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600' viewBox='0 0 600 600'%3E%3Cg stroke='%238B1A2E' stroke-width='1' fill='none' opacity='0.025'%3E%3Ccircle cx='50' cy='50' r='14'/%3E%3Cpolyline points='140,80 160,80 170,60 178,100 188,50 196,110 206,80 230,80'/%3E%3Crect x='290' y='205' width='6' height='28' rx='2'/%3E%3Crect x='278' y='217' width='30' height='6' rx='2'/%3E%3Ccircle cx='530' cy='460' r='30'/%3E%3Ccircle cx='530' cy='460' r='20'/%3E%3Cpath d='M320 40 Q330 60 320 80 Q310 100 320 120'/%3E%3Cpath d='M334 40 Q324 60 334 80 Q344 100 334 120'/%3E%3C/g%3E%3C/svg%3E");
}

/* Top bar inside main */
.dash-topbar {
  height: 56px;
  background: rgba(14,20,32,0.95);
  border-bottom: 1px solid rgba(255,255,255,0.05);
  display: flex;
  align-items: center;
  padding: 0 32px;
  gap: 14px;
  position: sticky; top: 0; z-index: 30;
  backdrop-filter: blur(12px);
  flex-shrink: 0;
}
.dash-topbar-title {
  font-size: 15px;
  font-weight: 600;
  color: rgba(255,255,255,0.85);
  flex: 1;
  letter-spacing: -.1px;
}
.dash-topbar-id {
  font-size: 11px;
  color: rgba(255,255,255,0.3);
  font-family: monospace;
  letter-spacing: .06em;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 5px;
  padding: 4px 10px;
}

/* Content scroll area */
.dash-content {
  flex: 1;
  padding: 32px 36px 96px;
  overflow-x: hidden;
}

/* Section / Panel */
.section { display: none; }
.section.active { display: block; animation: fadeUp .25s ease; }

/* ── SECTION HEADINGS ── */
.sec-head {
  margin-bottom: 28px;
}
.sec-head h2 {
  font-family: 'DM Sans', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: rgba(255,255,255,0.9);
  letter-spacing: -.3px;
  margin-bottom: 4px;
}
.sec-head p {
  font-size: 13px;
  color: rgba(255,255,255,0.35);
}

/* ── GLASS CARD ── */
.glass-card {
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 20px;
  transition: border-color .2s;
}
.glass-card:hover { border-color: rgba(255,255,255,0.12); }
.glass-card-head {
  padding: 13px 20px;
  background: rgba(255,255,255,0.03);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
}

/* ── HERO BANNER (home) ── */
.home-hero {
  background: linear-gradient(130deg, rgba(139,26,46,0.22) 0%, rgba(10,15,26,0.6) 100%);
  border: 1px solid rgba(139,26,46,0.25);
  border-radius: 16px;
  padding: 32px 32px;
  margin-bottom: 28px;
  display: flex;
  align-items: center;
  gap: 24px;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(16px);
}
.home-hero::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 85% 50%, rgba(139,26,46,.25) 0%, transparent 60%);
  pointer-events: none;
}
.home-hero-avatar {
  width: 72px; height: 72px;
  border-radius: 12px;
  background: rgba(139,26,46,0.3);
  border: 2px solid rgba(139,26,46,0.4);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Libre Baskerville', serif;
  font-size: 26px; color: rgba(255,255,255,0.85);
  flex-shrink: 0; position: relative; z-index: 1;
  overflow: hidden;
}
.home-hero-text { position: relative; z-index: 1; flex: 1; min-width: 0; }
.home-hero-greeting { font-size: 11px; color: rgba(255,255,255,.4); letter-spacing: 1px; text-transform: uppercase; margin-bottom: 4px; }
.home-hero-name { font-family: 'Libre Baskerville', serif; font-size: 24px; color: #fff; margin-bottom: 4px; line-height: 1.2; }
.home-hero-sub { font-size: 12px; color: rgba(255,255,255,.35); }
.home-hero-badge {
  position: relative; z-index: 1; flex-shrink: 0;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px; padding: 14px 20px; text-align: center;
  backdrop-filter: blur(8px);
}
.home-hero-badge-label { font-size: 9px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255,255,255,.35); margin-bottom: 4px; }
.home-hero-badge-val { font-family: monospace; font-size: 15px; color: #fff; letter-spacing: .06em; line-height: 1; }
.home-hero-badge-sub { font-size: 10px; color: rgba(255,255,255,.25); margin-top: 3px; }

/* ── JOURNEY CARD (home) ── */
.journey-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 24px;
}
.journey-card-head {
  padding: 12px 20px;
  background: rgba(255,255,255,0.03);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  font-size: 10px; font-weight: 700; letter-spacing: 1.8px;
  text-transform: uppercase; color: rgba(255,255,255,0.3);
}
.degree-row {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  transition: background .12s; cursor: default; position: relative;
}
.degree-row:last-child { border-bottom: none; }
.degree-lvl-pip { width: 3px; position: absolute; left: 0; top: 0; bottom: 0; border-radius: 0; }
.degree-lvl-pip.bach { background: #4f86e0; }
.degree-lvl-pip.mast { background: #9b72d4; }
.degree-lvl-pip.phd  { background: #e05470; }
.degree-row-icon { width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 17px; flex-shrink: 0; }
.degree-row-icon.bach { background: rgba(79,134,224,0.15); }
.degree-row-icon.mast { background: rgba(155,114,212,0.15); }
.degree-row-icon.phd  { background: rgba(224,84,112,0.15); }
.degree-row-info { flex: 1; min-width: 0; }
.degree-row-name { font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.8); margin-bottom: 2px; }
.degree-row-meta { font-size: 11px; color: rgba(255,255,255,0.35); }
.degree-row-lvl { font-size: 9px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 3px; }
.degree-row-lvl.bach { color: #4f86e0; }
.degree-row-lvl.mast { color: #9b72d4; }
.degree-row-lvl.phd  { color: #e05470; }
.degree-row-gpa { text-align: right; flex-shrink: 0; }
.degree-row-gpa-val { font-family: 'Libre Baskerville', serif; font-size: 20px; color: rgba(255,255,255,0.85); line-height: 1; }
.degree-row-gpa-den { font-size: 10px; color: rgba(255,255,255,0.3); }
.degree-row-badge { margin-left: 10px; flex-shrink: 0; }
.dbadge { display: inline-block; padding: 2px 8px; border-radius: 3px; font-size: 9px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; }
.dbadge-green { background: rgba(26,92,58,0.4); color: #4ade80; border: 1px solid rgba(74,222,128,0.2); }
.dbadge-gold  { background: rgba(154,123,47,0.25); color: #fbbf24; border: 1px solid rgba(251,191,36,0.2); }
.dbadge-muted { background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.4); border: 1px solid rgba(255,255,255,0.08); }
.dbadge-red   { background: rgba(139,26,46,0.3); color: #f87171; border: 1px solid rgba(248,113,113,0.2); }

/* ── QUICK LINKS ── */
.home-section-label {
  font-size: 10px; font-weight: 700; letter-spacing: 1.5px;
  text-transform: uppercase; color: rgba(255,255,255,0.3);
  margin-bottom: 14px; padding-left: 2px;
}
.qlinks {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
  margin-bottom: 28px;
}
.ql {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 12px;
  padding: 20px 20px;
  cursor: pointer;
  transition: border-color .2s, background .2s, transform .15s;
  text-align: left;
  display: flex; flex-direction: column; gap: 0;
  min-height: 110px;
  position: relative; overflow: hidden;
}
.ql::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, #8B1A2E, #C4273E);
  opacity: 0; transition: opacity .2s;
}
.ql:hover { border-color: rgba(139,26,46,0.35); background: rgba(139,26,46,0.08); transform: translateY(-2px); }
.ql:hover::after { opacity: 1; }
.ql.dim { opacity: .3; cursor: not-allowed; pointer-events: none; }
.ql-icon { width: 36px; height: 36px; border-radius: 7px; background: rgba(139,26,46,0.2); display: flex; align-items: center; justify-content: center; margin-bottom: 12px; flex-shrink: 0; }
.ql-t { font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.8); margin-bottom: 4px; letter-spacing: -.1px; }
.ql-s { font-size: 11px; color: rgba(255,255,255,0.3); line-height: 1.4; }
.ql-arrow { position: absolute; top: 16px; right: 16px; font-size: 14px; color: rgba(255,255,255,0.15); transition: color .2s, transform .2s; }
.ql:hover .ql-arrow { color: #e05470; transform: translate(2px,-2px); }

/* ── PROFILE BANNER ── */
.banner {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 24px 26px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 20px;
  position: relative; overflow: hidden;
}
.banner::after {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, #8B1A2E, #C4273E);
  border-radius: 3px 0 0 3px;
}
.avatar {
  width: 60px; height: 60px; border-radius: 10px;
  background: rgba(139,26,46,0.25);
  border: 1.5px solid rgba(139,26,46,0.35);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Libre Baskerville', serif;
  font-size: 22px; color: rgba(255,255,255,0.8);
  flex-shrink: 0; overflow: hidden;
}
.b-name h1 { font-family: 'DM Sans', sans-serif; font-size: 20px; color: rgba(255,255,255,0.88); margin-bottom: 2px; letter-spacing: -.2px; }
.b-name .mm { font-size: 13px; color: rgba(255,255,255,0.35); margin-bottom: 10px; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tag { font-size: 10px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase; padding: 3px 8px; border-radius: 3px; }
.tag-r { background: rgba(139,26,46,0.25); color: #f87171; border: 1px solid rgba(248,113,113,0.2); }
.tag-g { background: rgba(154,123,47,0.2); color: #fbbf24; border: 1px solid rgba(251,191,36,0.15); }
.tag-n { background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.4); border: 1px solid rgba(255,255,255,0.08); }

/* ── INFO CARD ── */
.icard {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 20px;
}
.icard-head {
  padding: 12px 20px;
  background: rgba(255,255,255,0.03);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  font-size: 10px; font-weight: 700; letter-spacing: 1.8px;
  text-transform: uppercase; color: rgba(255,255,255,0.3);
}
.igrid { display: grid; grid-template-columns: 1fr 1fr; }
.icell { padding: 14px 20px; border-bottom: 1px solid rgba(255,255,255,0.05); }
.icell:nth-child(odd) { border-right: 1px solid rgba(255,255,255,0.05); }
.icell:nth-last-child(-n+2) { border-bottom: none; }
.ic-lbl { font-size: 10px; font-weight: 600; letter-spacing: .9px; text-transform: uppercase; color: rgba(255,255,255,0.3); margin-bottom: 4px; }
.ic-val { font-size: 13px; color: rgba(255,255,255,0.75); }

/* ── GRADES ── */
.grades-header-banner {
  background: rgba(139,26,46,0.15);
  border: 1px solid rgba(139,26,46,0.25);
  border-radius: 14px;
  padding: 20px 24px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 20px;
  position: relative; overflow: hidden;
}
.grades-header-banner::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 85% 50%, rgba(139,26,46,.3) 0%, transparent 60%);
  pointer-events: none;
}
.grades-hdr-avatar {
  width: 52px; height: 52px; border-radius: 9px;
  background: rgba(139,26,46,0.3);
  border: 1.5px solid rgba(139,26,46,0.4);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Libre Baskerville', serif; font-size: 20px;
  color: rgba(255,255,255,.9); flex-shrink: 0; position: relative; z-index: 1;
  overflow: hidden;
}
.grades-hdr-info { flex: 1; position: relative; z-index: 1; }
.grades-hdr-name { font-family: 'Libre Baskerville', serif; font-size: 18px; color: #fff; margin-bottom: 2px; }
.grades-hdr-id { font-size: 11px; color: rgba(255,255,255,.4); font-family: monospace; letter-spacing: .06em; }
.grades-hdr-gpa { position: relative; z-index: 1; text-align: right; flex-shrink: 0; }
.grades-hdr-gpa-label { font-size: 9px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: rgba(255,255,255,.35); margin-bottom: 2px; }
.grades-hdr-gpa-val { font-family: 'Libre Baskerville', serif; font-size: 32px; color: #fff; line-height: 1; }
.grades-hdr-gpa-den { font-size: 12px; color: rgba(255,255,255,.3); }

.transcript-summary {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 12px;
  padding: 0;
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.ts-item { display: flex; flex-direction: row; align-items: center; justify-content: space-between; padding: 14px 22px; border-bottom: 1px solid rgba(255,255,255,0.06); gap: 12px; }
.ts-item:last-child { border-bottom: none; }
.ts-lbl { font-size: 11px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: rgba(255,255,255,0.3); }
.ts-val { font-family: 'Libre Baskerville', serif; font-size: 20px; font-weight: 700; color: rgba(255,255,255,0.85); line-height: 1.1; text-align: right; }
.ts-val.accent { color: #e05470; }
.ts-divider { display: none; }

/* Degree selector in grades */
.degree-tabs { display: flex; gap: 2px; border-bottom: 1px solid rgba(255,255,255,0.07); margin-bottom: 0; overflow-x: auto; scrollbar-width: none; }
.degree-tabs::-webkit-scrollbar { display: none; }
.degree-tab { padding: 10px 18px; font-size: 13px; color: rgba(255,255,255,.35); border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; white-space: nowrap; transition: color .15s, border-color .15s; background: none; border-top: none; border-left: none; border-right: none; font-family: 'DM Sans', sans-serif; }
.degree-tab:hover { color: rgba(255,255,255,.65); }
.degree-tab.active { color: #e05470; border-bottom-color: #e05470; font-weight: 500; }
.degree-panel { display: none; }
.degree-panel.active { display: block; animation: fadeUp .2s ease; }

.g-wrap { background: rgba(255,255,255,0.025); border: 1px solid rgba(255,255,255,0.06); border-radius: 12px; overflow: hidden; margin-bottom: 16px; }
.g-year-head { background: rgba(255,255,255,0.04); padding: 9px 18px; border-bottom: 1px solid rgba(255,255,255,0.06); font-size: 11px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: rgba(255,255,255,0.55); display: flex; align-items: center; gap: 10px; }
.g-year-head::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #e05470; flex-shrink: 0; }
.g-block-head { padding: 6px 18px; background: rgba(255,255,255,0.02); border-bottom: 1px solid rgba(255,255,255,0.04); font-size: 10px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: rgba(255,255,255,0.25); }
.g-year-totals { background: rgba(255,255,255,0.03); border-top: 1px solid rgba(255,255,255,0.05); padding: 9px 18px; display: flex; justify-content: flex-end; gap: 28px; font-size: 11px; color: rgba(255,255,255,0.35); }
.g-year-totals strong { color: rgba(255,255,255,0.65); font-weight: 700; }
table.gt { width: 100%; border-collapse: collapse; font-size: 12px; font-family: 'DM Sans', sans-serif; }
table.gt thead tr { border-bottom: 1px solid rgba(255,255,255,0.08); }
table.gt th { padding: 9px 14px; text-align: left; font-size: 10px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: rgba(255,255,255,0.3); white-space: nowrap; }
table.gt th:nth-child(3),table.gt th:nth-child(4),table.gt th:nth-child(5),table.gt th:nth-child(6),table.gt th:nth-child(7) { text-align: center; }
table.gt td { padding: 10px 14px; border-bottom: 1px solid rgba(255,255,255,0.04); color: rgba(255,255,255,0.7); vertical-align: middle; }
table.gt td:nth-child(3),table.gt td:nth-child(4),table.gt td:nth-child(5),table.gt td:nth-child(6),table.gt td:nth-child(7) { text-align: center; }
table.gt td:nth-child(8) { font-size: 11px; color: rgba(255,255,255,0.35); font-style: italic; }
table.gt tr:last-child td { border-bottom: none; }
table.gt tbody tr { transition: background .1s; }
table.gt tbody tr:hover { background: rgba(255,255,255,0.03); }
.gt-course { font-size: 13px; font-weight: 500; color: rgba(255,255,255,0.78); line-height: 1.3; }
.gt-assess { font-size: 11px; color: rgba(255,255,255,0.3); margin-top: 2px; }
.gt-cr { font-size: 12px; font-weight: 500; color: rgba(255,255,255,0.6); background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08); border-radius: 4px; padding: 2px 8px; display: inline-block; }
.sbar-wrap { display: inline-flex; align-items: center; gap: 7px; }
.sbar { display: none; }
.sbar-fill { display: none; }
.sbar-num { font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.7); }
.gbadge { display: inline-flex; align-items: center; justify-content: center; font-family: 'DM Sans', sans-serif; font-size: 12px; font-weight: 700; min-width: 36px; height: 26px; border-radius: 5px; padding: 0 8px; letter-spacing: .2px; }
.gAp { background: rgba(16,185,129,0.2); color: #34d399; border: 1px solid rgba(52,211,153,0.25); }
.gA  { background: rgba(16,185,129,0.15); color: #6ee7b7; border: 1px solid rgba(110,231,183,0.2); }
.gAm { background: rgba(59,130,246,0.15); color: #93c5fd; border: 1px solid rgba(147,197,253,0.2); }
.gBp { background: rgba(251,191,36,0.15); color: #fcd34d; border: 1px solid rgba(252,211,77,0.2); }
.gB  { background: rgba(154,123,47,0.2); color: #fbbf24; border: 1px solid rgba(251,191,36,0.15); }
.gX  { background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.4); border: 1px solid rgba(255,255,255,0.08); }
.gC  { background: rgba(139,92,246,0.15); color: #c4b5fd; border: 1px solid rgba(167,139,250,0.2); }
.gt-pts { font-size: 13px; font-weight: 700; color: rgba(255,255,255,0.8); font-family: 'Libre Baskerville', serif; }
.no-g { padding: 48px; text-align: center; color: rgba(255,255,255,0.3); font-size: 13px; }

/* ── DOCUMENTS ── */
.doc-degree-picker { display: none; margin-bottom: 14px; padding: 14px 18px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07); border-radius: 10px; }
.doc-degree-picker label { display: block; font-size: 10px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: rgba(255,255,255,0.3); margin-bottom: 8px; }
.doc-degree-picker select { width: 100%; padding: 9px 12px; border: 1px solid rgba(255,255,255,0.1); border-radius: 6px; font-family: 'DM Sans', sans-serif; font-size: 13px; color: rgba(255,255,255,0.75); background: rgba(255,255,255,0.06); outline: none; transition: border-color .15s; }
.doc-degree-picker select:focus { border-color: #8B1A2E; }
.doc-degree-picker.show { display: block; }
.doc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 24px; }
@media(max-width:700px){ .doc-grid { grid-template-columns: 1fr; } }
.doc-card { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07); border-radius: 14px; padding: 26px 26px 22px; position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 0; transition: border-color .15s, background .15s; }
.doc-card:hover { border-color: rgba(139,26,46,0.3); background: rgba(139,26,46,0.04); }
.doc-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: #8B1A2E; border-radius: 3px 0 0 3px; }
.doc-icon { width: 42px; height: 42px; border-radius: 8px; background: rgba(139,26,46,0.2); display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.doc-icon svg { width: 20px; height: 20px; stroke: #e05470; fill: none; stroke-width: 1.8; }
.doc-title { font-family: 'DM Sans', serif; font-size: 16px; color: #ffffff; margin-bottom: 8px; }
.doc-desc { font-size: 13px; color: rgba(255,255,255,0.75); line-height: 1.55; margin-bottom: 16px; flex: 1; }
.doc-tags { display: flex; gap: 6px; margin-bottom: 18px; flex-wrap: wrap; }
.doc-tag { font-size: 9px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; padding: 3px 9px; border-radius: 3px; border: 1px solid rgba(139,26,46,0.3); color: #e05470; background: rgba(139,26,46,0.15); }
.btn-print-doc { width: 100%; padding: 12px 0; background: #8B1A2E; border: none; border-radius: 8px; font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 600; color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; letter-spacing: .2px; transition: background .15s, transform .1s; }
.btn-print-doc:hover { background: #C4273E; transform: translateY(-1px); }
.btn-print-doc svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; }
.cert-section-head { font-size: 13px; font-weight: 700; color: rgba(255,255,255,0.6); margin: 24px 0 14px; letter-spacing: .3px; }

/* ── ID CARD SECTION ── */
.idcard-wrap { display: flex; flex-direction: column; align-items: center; gap: 24px; padding: 12px 0; }
.idcard { width: 354px; border-radius: 12px; overflow: hidden; box-shadow: 0 24px 64px rgba(0,0,0,0.55), 0 4px 16px rgba(0,0,0,0.35), 0 0 0 1px rgba(0,0,0,0.2); position: relative; user-select: none; font-family: 'DM Sans', sans-serif; }
.idcard-front { display: flex; flex-direction: row; background: #fff; min-height: 295px; position: relative; overflow: hidden; }
.idcard-left-band { width: 120px; flex-shrink: 0; background: linear-gradient(175deg,#8B1A2E 0%,#6b1222 55%,#3e0b18 100%); display: flex; flex-direction: column; align-items: center; padding: 18px 10px 14px; position: relative; overflow: hidden; }
.idcard-left-band::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(135deg,rgba(255,255,255,.03) 0px,rgba(255,255,255,.03) 1px,transparent 1px,transparent 14px); pointer-events: none; }
.idcard-left-band::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 60%; background: radial-gradient(ellipse at 50% 0%,rgba(255,255,255,.1) 0%,transparent 70%); pointer-events: none; }
.idcard-band-logo { width: 54px; height: auto; object-fit: contain; margin-bottom: 10px; position: relative; z-index: 1; }
.idcard-band-title { font-size: 7px; font-weight: 800; letter-spacing: 1.6px; text-transform: uppercase; color: rgba(255,255,255,.6); text-align: center; line-height: 1.6; position: relative; z-index: 1; margin-bottom: 12px; }
.idcard-photo { width: 82px; height: 100px; border-radius: 3px; background: rgba(255,255,255,.12); border: 1.5px solid rgba(255,255,255,.35); display: flex; align-items: center; justify-content: center; overflow: hidden; font-size: 28px; font-weight: 700; color: rgba(255,255,255,.65); box-shadow: 0 4px 14px rgba(0,0,0,.4); position: relative; z-index: 1; flex-shrink: 0; }
.idcard-photo img,.idcard-photo canvas { width: 100%; height: 100%; object-fit: cover; display: block; }
.idcard-band-badge { margin-top: auto; padding-top: 14px; font-size: 6.5px; font-weight: 800; letter-spacing: 1.8px; text-transform: uppercase; color: rgba(255,255,255,.85); text-align: center; position: relative; z-index: 1; border-top: 1px solid rgba(255,255,255,.15); width: 100%; }
.idcard-right { flex: 1; display: flex; flex-direction: column; background: #fff; position: relative; overflow: hidden; min-width: 0; }
.idcard-right::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle,rgba(139,26,46,.045) 1px,transparent 1px); background-size: 18px 18px; pointer-events: none; }
.idcard-right-header { padding: 11px 16px 9px; border-bottom: 2px solid #8B1A2E; position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.idcard-uni-block { flex: 1; min-width: 0; }
.idcard-uni-name { font-size: 10px; font-weight: 800; color: #0D1B2A; letter-spacing: .3px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.idcard-uni-sub { font-size: 7px; color: #7A8599; letter-spacing: .2px; line-height: 1.5; }
.idcard-right-badge { font-size: 6.5px; font-weight: 800; letter-spacing: 1.8px; text-transform: uppercase; background: #8B1A2E; color: #fff; padding: 3px 8px; border-radius: 2px; white-space: nowrap; flex-shrink: 0; }
.idcard-right-body { flex: 1; padding: 11px 16px 10px; position: relative; z-index: 1; display: flex; flex-direction: column; gap: 7px; }
.idcard-name { font-size: 15.5px; font-weight: 800; color: #0D1B2A; line-height: 1.2; letter-spacing: -.2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.idcard-name-mm { font-size: 9.5px; color: #7A8599; line-height: 1.4; margin-top: -3px; margin-bottom: 3px; }
.idcard-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; }
.idcard-field { display: flex; flex-direction: column; gap: 1px; }
.idcard-field-lbl { font-size: 6.5px; font-weight: 700; letter-spacing: 1.3px; text-transform: uppercase; color: #9A7B2F; }
.idcard-field-val { font-size: 11px; font-weight: 600; color: #0D1B2A; line-height: 1.3; }
.idcard-holo-strip { height: 4px; background: linear-gradient(90deg,#9A7B2F,#e8c96a,#f5d98a,#9A7B2F,#c8a84b,#f0d080,#9A7B2F,#e8c96a); position: relative; z-index: 1; }
.idcard-bottom { background: #0D1B2A; padding: 8px 16px; display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 1; }
.idcard-id-label { font-size: 6.5px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255,255,255,.4); margin-bottom: 1px; }
.idcard-id-value { font-family: monospace; font-size: 15px; font-weight: 700; color: #fff; letter-spacing: 2.5px; }
.idcard-validity { text-align: right; }
.idcard-validity span { font-size: 6.5px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: rgba(255,255,255,.4); display: block; }
.idcard-validity strong { font-size: 11px; color: rgba(255,255,255,.88); letter-spacing: .5px; font-weight: 700; display: block; }
.idcard-back { display: flex; flex-direction: row; background: #fff; position: relative; overflow: hidden; border-top: 3px solid #8B1A2E; }
.idcard-back::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle,rgba(139,26,46,.04) 1px,transparent 1px); background-size: 18px 18px; pointer-events: none; }
.idcard-back-left { width: 120px; flex-shrink: 0; background: #f9f1f3; border-right: 1px solid #e8d4d8; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 16px 10px; gap: 12px; position: relative; z-index: 1; }
.idcard-qr-wrap { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.idcard-qr-wrap canvas,.idcard-qr-wrap img { border: 1px solid #ddd; border-radius: 2px; display: block; width: 100px !important; height: 100px !important; }
.idcard-qr-lbl { font-size: 6px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: #9A7B2F; text-align: center; }
.idcard-sig-area { border-top: 1px solid #ccc; padding-top: 6px; width: 100%; text-align: center; font-size: 6px; color: #7A8599; letter-spacing: .4px; text-transform: uppercase; }
.idcard-back-right { flex: 1; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; position: relative; z-index: 1; }
.idcard-back-header { font-size: 7px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: #8B1A2E; padding-bottom: 6px; border-bottom: 1px solid #e8d4d8; }
.idcard-back-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; flex: 1; }
.idcard-back-field .lbl { font-size: 6.5px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: #7A8599; margin-bottom: 2px; }
.idcard-back-field .val { font-size: 11.5px; font-weight: 600; color: #0D1B2A; }
.idcard-back-bottom { display: flex; flex-direction: column; gap: 2px; }
.idcard-sid-block .lbl { font-size: 6.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: #7A8599; margin-bottom: 2px; }
.idcard-sid-block .val { font-size: 13px; font-weight: 700; color: #0D1B2A; letter-spacing: 2px; font-family: monospace; }
.idcard-notice { font-size: 6.5px; color: #9A9A9A; line-height: 1.6; font-style: italic; }
.idcard-actions { display: flex; gap: 10px; }
.btn-idcard { padding: 10px 20px; border-radius: 8px; font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 600; cursor: pointer; transition: all .15s; display: flex; align-items: center; gap: 8px; }
.btn-idcard-primary { background: #8B1A2E; color: #fff; border: none; box-shadow: 0 2px 12px rgba(139,26,46,0.4); }
.btn-idcard-primary:hover { background: #C4273E; }
.btn-idcard-secondary { background: transparent; color: #e05470; border: 1.5px solid rgba(224,84,112,0.4); }
.btn-idcard-secondary:hover { background: rgba(139,26,46,0.12); }

/* ── PHOTO PANEL ── */
#panel-photo .icard { background: rgba(255,255,255,0.03); }
#panel-photo .field input { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.1); color: rgba(255,255,255,0.8); }
#photoDropZone { border-color: rgba(255,255,255,0.12) !important; background: rgba(255,255,255,0.02) !important; }
#photoDropZone:hover { border-color: rgba(139,26,46,0.4) !important; }
#photoDropZone > div:first-child { color: rgba(255,255,255,0.6) !important; }
#photoDropZone > div:last-child { color: rgba(255,255,255,0.25) !important; }

/* ── PHOTO PROTECTION ── */
canvas.photo-canvas, #idcardPhoto canvas, #homeAvatar canvas, #gradesAvatar canvas, #profilePhotoPreview canvas { -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; pointer-events: none; }

/* ── DASHBOARD FOOTER ── */
.dash-footer {
  padding: 16px 36px;
  border-top: 1px solid rgba(255,255,255,0.05);
  text-align: center;
  font-size: 11px;
  color: rgba(255,255,255,0.2);
  background: rgba(14,20,32,0.8);
  flex-shrink: 0;
}

/* ── TABLET ── */
@media(max-width:900px){
  .sidebar { width: 220px; }
  .dash-main { margin-left: 220px; }
  /* 2-col news grid on tablet */
  #homeNewsCards { grid-template-columns: repeat(2,1fr) !important; }
  .iris-bottom-bar { left: 220px; }
}

/* ══════════════════════════════════════════════════
   MOBILE — Complete redesign (≤700px)
   Pattern: fixed top bar + bottom tab bar + icon grid
   ══════════════════════════════════════════════════ */
@media(max-width:700px){

  /* ── Hide desktop sidebar completely ── */
  .sidebar, .sb-toggle, .sb-overlay { display: none !important; }

  /* ── Login ── */
  .login-left { display: none; }

  #loginScreen {
    background:
      radial-gradient(ellipse at 20% 15%, rgba(139,26,46,0.45) 0%, transparent 55%),
      radial-gradient(ellipse at 85% 80%, rgba(154,123,47,0.18) 0%, transparent 50%),
      var(--ink);

    /* iOS Chrome: let the fixed login overlay itself scroll when the
       software keyboard reduces the visible viewport. */
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    min-height: 100vh;
    min-height: 100dvh;
  }
  #loginScreen::before {
    content: '';
    position: absolute; inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900' viewBox='0 0 900 900'%3E%3Cg stroke='%23ffffff' stroke-width='1' fill='none' opacity='0.035'%3E%3Ccircle cx='80' cy='80' r='18'/%3E%3Cpolyline points='200,120 230,120 245,90 255,150 270,80 285,160 300,120 340,120'/%3E%3Crect x='438' y='310' width='8' height='40' rx='2'/%3E%3Crect x='422' y='326' width='40' height='8' rx='2'/%3E%3Ccircle cx='820' cy='700' r='40'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: repeat; background-size: 600px 600px;
    pointer-events: none; z-index: 0;
  }
  .login-right {
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    height: auto;
    padding: max(32px, env(safe-area-inset-top)) 0 max(32px, env(safe-area-inset-bottom));
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    background: none; position: relative; z-index: 1;
  }

  /* When an input is focused the iOS keyboard can make the visual
     viewport much shorter. Top-align the content so Chrome can scroll
     to every field/button instead of clipping a vertically centred form. */
  #loginScreen:focus-within .login-right {
    justify-content: flex-start;
    padding-top: max(20px, env(safe-area-inset-top));
    padding-bottom: max(40px, env(safe-area-inset-bottom));
  }
  .login-right::before {
    content: ''; position: fixed; top: 0; left: 0; right: 0; height: 4px;
    background: linear-gradient(90deg, var(--crimson), rgba(154,123,47,0.8)); z-index: 10;
  }
  .login-mobile-brand {
    display: flex !important; flex-direction: column; align-items: center;
    gap: 6px; margin-bottom: 28px; position: relative; z-index: 2;
  }
  .login-mobile-brand .mob-brand-abbr {
    font-family: 'Bebas Neue', sans-serif; font-size: 13px; letter-spacing: 4px;
    color: rgba(255,255,255,0.38); text-transform: uppercase;
  }
  .login-mobile-brand .mob-brand-title {
    font-family: 'Bebas Neue', sans-serif; font-size: 28px;
    color: rgba(255,255,255,0.92); letter-spacing: 0.5px; line-height: 1;
  }
  .login-form-wrap {
    width: calc(100% - 40px); max-width: 400px;
    border-radius: 18px; padding: 36px 28px 32px;
    min-height: unset; display: flex; flex-direction: column; justify-content: center;
    background: rgba(255,255,255,0.93);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.95);
    box-shadow: 0 24px 60px rgba(0,0,0,0.35), 0 2px 8px rgba(0,0,0,0.15);
    position: relative; z-index: 2; margin-bottom: 24px;
    flex-shrink: 0;
  }
  body.theme-light #loginScreen {
    background:
      radial-gradient(ellipse at 20% 15%, rgba(139,26,46,0.25) 0%, transparent 55%),
      radial-gradient(ellipse at 85% 80%, rgba(154,123,47,0.1) 0%, transparent 50%), #1a2540;
  }
  body.theme-light .login-form-wrap {
    background: rgba(255,255,255,0.97);
    box-shadow: 0 24px 60px rgba(0,0,0,0.28), 0 2px 8px rgba(0,0,0,0.10);
  }
  .login-form-wrap h2 { font-size: 21px; }
  .field input { padding: 13px 15px; font-size: 15px; border-radius: 10px; }
  .btn-login { padding: 14px; font-size: 15px; border-radius: 10px; }

  /* ── Main layout: no left margin, full width ── */
  .dash-main {
    margin-left: 0 !important;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* ── MOBILE TOP BAR ── */
  .dash-topbar {
    height: 56px; padding: 0 16px;
    display: flex; align-items: center; gap: 10px;
    position: sticky; top: 0; z-index: 50;
  }
  .dash-topbar::before { display: none; }
  .dash-topbar-logo {
    display: block !important; height: 28px; width: auto;
    object-fit: contain; margin-right: auto; opacity: 0.9; flex-shrink: 0;
  }
  body.theme-light .dash-topbar-logo { filter: none; }
  .dash-topbar-title { display: none; }
  .dash-topbar-id {
    font-size: 11px; padding: 4px 10px; max-width: 110px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-radius: 6px;
  }
  .theme-toggle-btn { width: 36px; height: 36px; flex-shrink: 0; }
  .topbar-logout-btn { display: flex !important; }

  /* ── MOBILE BOTTOM TAB BAR — hidden ── */
  .mob-tabbar { display: none !important; }

  /* Hide mob-news-quick (not needed; homeNewsFeed shown below) */
  .mob-news-quick { display: none !important; }
  /* Show desktop news feed on mobile too */
  #homeNewsFeed { display: block !important; }

  /* ── Content area ── */
  .dash-content {
    padding: 16px 14px 80px;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* ── SECTION HEADINGS ── */
  .sec-head { margin-bottom: 16px; }
  .sec-head h2 { font-size: 19px; }
  .sec-head p { font-size: 12px; line-height: 1.5; }

  /* ── HOME: Hero banner — single-layer stacked ── */
  .home-hero {
    flex-direction: column; gap: 0;
    padding: 20px 18px; border-radius: 14px; margin-bottom: 18px;
    align-items: flex-start; justify-content: center;
  }
  .home-hero-avatar { display: none; }
  .home-hero-text { flex: 1; text-align: left; width: 100%; }
  .home-hero-greeting { display: none; }
  .home-hero-name { font-size: 28px; margin-bottom: 6px; line-height: 1.15; }
  .home-hero-sub {
    font-size: 12px;
    display: flex; flex-direction: column; gap: 2px;
    color: rgba(255,255,255,.45);
  }
  .home-hero-sub .hero-year { display: block; }
  .home-hero-sub .hero-dot { display: none; }
  .home-hero-sub .hero-degree { display: block; }
  .home-hero-badge { display: none; }

  /* ── HOME: Quick-access icon grid (3 cols) ── */
  .home-section-label { font-size: 11px; margin-bottom: 10px; }
  .qlinks {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important; margin-bottom: 20px;
  }
  .ql {
    background: rgba(255,255,255,0.05) !important;
    border: 1px solid rgba(255,255,255,0.09) !important;
    border-radius: 14px !important; padding: 14px 6px 12px !important;
    min-height: auto !important;
    display: flex !important; flex-direction: column !important;
    align-items: center !important; justify-content: flex-start !important;
    text-align: center !important; gap: 0 !important;
    transform: none !important; transition: background .15s !important;
  }
  .ql:active { background: rgba(139,26,46,0.18) !important; }
  .ql:hover { transform: none !important; }
  .ql::after { display: none !important; }
  .ql-icon {
    width: 48px; height: 48px; border-radius: 50% !important;
    background: rgba(139,26,46,0.22) !important;
    border: 1.5px solid rgba(139,26,46,0.3);
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 7px !important; flex-shrink: 0;
  }
  .ql-icon svg { width: 20px; height: 20px; }
  .ql-t { font-size: 10.5px !important; font-weight: 600; line-height: 1.25; color: rgba(255,255,255,0.82) !important; }
  .ql-s, .ql-arrow { display: none !important; }
  body.theme-light .ql { background: var(--white) !important; border-color: var(--line) !important; }
  body.theme-light .ql:active { background: var(--crimson-light) !important; }
  body.theme-light .ql-icon { background: var(--crimson-light) !important; border-color: rgba(139,26,46,0.15) !important; }
  body.theme-light .ql-icon svg, body.theme-light .ql-icon i { color: var(--crimson) !important; stroke: var(--crimson) !important; fill: none; }
  body.theme-light .ql-t { color: var(--ink) !important; }

  /* ── Journey card ── */
  .journey-card { border-radius: 12px; margin-bottom: 16px; }
  .degree-row { padding: 12px 14px; gap: 10px; }
  .degree-row-name { font-size: 12px; }
  .degree-row-meta { font-size: 10px; }
  .degree-row-gpa-val { font-size: 18px; }
  .degree-row-badge { display: none; }

  /* ── PROFILE section ── */
  .banner {
    flex-direction: column; gap: 12px; align-items: flex-start;
    padding: 16px; border-radius: 12px; margin-bottom: 14px;
  }
  .b-name h1 { font-size: 17px; }
  .b-name .mm { font-size: 12px; margin-bottom: 8px; }
  .icard { border-radius: 12px; margin-bottom: 14px; overflow: hidden; }
  .icard-head { padding: 10px 14px; font-size: 9px; letter-spacing: 1.4px; }
  /* Single-column info grid */
  .igrid { grid-template-columns: 1fr; }
  .icell { padding: 11px 14px; border-right: none !important; }
  .icell:nth-last-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,0.05) !important; }
  body.theme-light .icell:nth-last-child(-n+2) { border-bottom: 1px solid var(--line) !important; }
  .icell:last-child { border-bottom: none !important; }
  .ic-lbl { font-size: 9px; margin-bottom: 2px; }
  .ic-val { font-size: 13px; }

  /* ── GRADES / Academic Record ── */
  .grades-header-banner { flex-direction: column; gap: 10px; padding: 14px; border-radius: 12px; margin-bottom: 14px; }
  .grades-hdr-gpa { text-align: left; }
  .grades-hdr-gpa-val { font-size: 28px; }
  /* Transcript summary: stack vertically on mobile */
  .transcript-summary { flex-direction: column; border-radius: 12px; margin-bottom: 14px; }
  .ts-item { flex-direction: row; justify-content: space-between; align-items: center; padding: 11px 14px; border-right: none; border-bottom: 1px solid var(--line); text-align: left; }
  .ts-item:last-child { border-bottom: none; }
  .ts-val { font-size: 17px; }
  .ts-lbl { font-size: 10px; }
  /* Degree tabs */
  .degree-tabs { padding: 0 2px; }
  .degree-tab { padding: 10px 12px; font-size: 12px; }
  /* Grade table: horizontal scroll wrapper */
  .g-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 12px; margin-bottom: 14px; }
  table.gt { min-width: 500px; font-size: 11.5px; }
  table.gt th { padding: 7px 8px; font-size: 9px; }
  table.gt td { padding: 8px 8px; }

  /* ── Course Session ── */
  .cs-wrap { padding: 0; }
  .cs-header { padding: 12px 14px; background: rgba(255,255,255,0.03); border-radius: 10px; margin-bottom: 10px; }
  body.theme-light .cs-header { background: var(--surface); }
  .cs-year-tabs { gap: 6px; margin-bottom: 12px; flex-wrap: wrap; }
  .cs-year-tab { padding: 7px 14px; font-size: 12px; min-height: 36px; }
  /* List cards: larger tap targets */
  .cs-card { padding: 12px 14px 12px 14px; border-radius: 10px; min-height: 52px; }
  .cs-card-name { font-size: 13px; }
  .cs-card-meta { font-size: 11px; }
  .cs-status-icon { width: 22px; height: 22px; }
  .cs-grid { gap: 6px; }

  /* ── Mark Book ── */
  .mb-year-head { padding: 10px 14px; font-size: 10px; }

  /* ── DOCUMENTS section ── */
  .doc-grid { grid-template-columns: 1fr !important; gap: 12px; }
  .doc-card { padding: 18px 16px 16px; border-radius: 12px; }
  .doc-title { font-size: 15px; }
  .doc-desc { font-size: 12px; }
  .btn-print-doc { padding: 14px; font-size: 14px; border-radius: 8px; min-height: 48px; }

  /* ── ID CARD section ── */
  .idcard { width: 100%; max-width: 340px; }
  .idcard-wrap { padding: 8px 0 0; gap: 16px; align-items: center; }
  .idcard-actions { flex-direction: column; gap: 8px; width: 100%; max-width: 340px; }
  .btn-idcard { justify-content: center; padding: 14px 20px; font-size: 14px; min-height: 48px; }

  /* ── Communication / Channels ── */
  .comms-grid { grid-template-columns: 1fr !important; gap: 10px; }

  /* ── Lecture Rooms ── */
  .lr-grid { grid-template-columns: 1fr !important; gap: 12px; }

  /* ── Edit Info form ── */
  #panel-editinfo [style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* ── Glass card ── */
  .glass-card { border-radius: 12px; }
  .glass-card-head { padding: 10px 14px; }

  /* ── DASHBOARD FOOTER ── */
  .dash-footer {
    font-size: 10px !important; padding: 12px 16px 16px !important;
    line-height: 1.6 !important; text-align: center !important;
    color: rgba(255,255,255,0.18) !important; letter-spacing: 0 !important;
    margin-bottom: 72px;
  }
  body.theme-light .dash-footer { color: var(--ink3) !important; }
}

/* ══════════════════════════════════════
   THEME TOGGLE BUTTON
   ══════════════════════════════════════ */
.theme-toggle-btn {
  width: 36px; height: 36px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.07);
  color: rgba(255,255,255,0.6);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .2s;
  flex-shrink: 0;
}
.theme-toggle-btn:hover {
  background: rgba(255,255,255,0.13);
  color: rgba(255,255,255,0.9);
  border-color: rgba(255,255,255,0.2);
}
body.theme-light .theme-toggle-btn {
  border-color: var(--line);
  background: var(--surface);
  color: var(--ink2);
}
body.theme-light .theme-toggle-btn:hover {
  background: var(--crimson-light);
  border-color: rgba(139,26,46,0.2);
  color: var(--crimson);
}

/* ── LOGIN PAGE THEME TOGGLE PILL ── */
.login-theme-pill {
  position: fixed;
  top: 18px; right: 18px;
  z-index: 200;
  display: flex; align-items: center;
  background: rgba(13,27,42,0.55);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 99px;
  padding: 3px;
  gap: 2px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 2px 12px rgba(0,0,0,0.25);
  transition: background .2s, border-color .2s;
}
body.theme-light .login-theme-pill {
  background: rgba(255,255,255,0.92);
  border-color: rgba(13,27,42,0.12);
  box-shadow: 0 2px 12px rgba(13,27,42,0.12);
}
.login-theme-opt {
  display: flex; align-items: center; gap: 5px;
  padding: 6px 13px;
  border-radius: 99px;
  border: none; background: none;
  font-family: 'DM Sans', sans-serif;
  font-size: 12px; font-weight: 500;
  color: rgba(255,255,255,0.45);
  cursor: pointer;
  transition: all .18s;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
body.theme-light .login-theme-opt { color: var(--ink3); }
.login-theme-opt svg { flex-shrink: 0; transition: color .18s; }
.login-theme-opt.active {
  background: rgba(255,255,255,0.13);
  color: rgba(255,255,255,0.92);
  font-weight: 600;
}
body.theme-light .login-theme-opt.active {
  background: var(--white);
  color: var(--ink);
  box-shadow: 0 1px 4px rgba(13,27,42,0.10);
}
body.theme-light .login-theme-opt[data-theme="light"].active {
  background: var(--crimson-light);
  color: var(--crimson);
}

/* Light theme overrides for login page */
body.theme-light #loginScreen { background: #f0f2f7; }
body.theme-light .login-left {
  background: linear-gradient(160deg, #1a2540 0%, #8B1A2E 100%);
}
body.theme-light .login-right { background-color: #f0f2f7; }
body.theme-light .login-form-wrap {
  background: rgba(255,255,255,0.97);
  border-color: rgba(13,27,42,0.08);
  box-shadow: 0 8px 40px rgba(13,27,42,0.10), 0 1px 4px rgba(13,27,42,0.06);
}

/* Hide old bare icon button */
.login-theme-btn { display: none !important; }

/* Hide login theme pill when dashboard is active */
body.dashboard-active .login-theme-pill { display: none !important; }

/* ══════════════════════════════════════
   LIGHT THEME — DASHBOARD OVERRIDES
   ══════════════════════════════════════ */
body.theme-light.dashboard-active {
  background-color: #eef1f7;
}
body.theme-light .sidebar {
  background: rgba(255,255,255,0.98);
  border-right-color: rgba(13,27,42,0.09);
}
body.theme-light .sb-brand {
  border-bottom-color: var(--line);
}
body.theme-light .sb-brand-name { color: var(--ink); }
body.theme-light .sb-brand-sub  { color: var(--ink3); }
body.theme-light .sb-user {
  background: var(--crimson-light);
  border-color: rgba(139,26,46,0.15);
}
body.theme-light .sb-user-avatar {
  background: rgba(139,26,46,0.12);
  border-color: rgba(139,26,46,0.2);
  color: var(--crimson);
}
body.theme-light .sb-user-name { color: var(--ink); }
body.theme-light .sb-user-id   { color: var(--ink3); }
body.theme-light .sb-section-lbl { color: var(--ink3); opacity:.7; }
body.theme-light .sbnav-item { color: var(--ink3); }
body.theme-light .sbnav-item:hover { background: rgba(13,27,42,0.05); color: var(--ink); }
body.theme-light .sbnav-item.active { background: rgba(139,26,46,0.08); border-color: rgba(139,26,46,0.18); color: var(--crimson); }
body.theme-light .sbnav-icon { color: var(--ink3); }
body.theme-light .sbnav-item.active .sbnav-icon { color: var(--crimson); }
body.theme-light .sbnav-item:hover .sbnav-icon { color: var(--ink2); }
body.theme-light .sbnav-ext { color: var(--ink3); }
body.theme-light .sb-footer { border-top-color: var(--line); }
body.theme-light .btn-signout {
  background: var(--surface);
  border-color: var(--line);
  color: var(--ink2);
}
body.theme-light .btn-signout:hover {
  background: var(--crimson-light);
  border-color: rgba(139,26,46,0.2);
  color: var(--crimson);
}
body.theme-light .sb-toggle {
  background: rgba(255,255,255,0.95);
  border-color: var(--line);
  color: var(--ink2);
}
body.theme-light .dash-main {
  background: #eef1f7;
  background-image: none;
}
body.theme-light .dash-topbar {
  background: rgba(255,255,255,0.97);
  border-bottom-color: var(--line);
}
body.theme-light .dash-topbar-title { color: var(--ink); }
body.theme-light .dash-topbar-id {
  background: var(--surface);
  border-color: var(--line);
  color: var(--ink3);
}
body.theme-light .dash-footer {
  background: rgba(247,248,252,0.95);
  border-top-color: var(--line);
  color: var(--ink3);
}
body.theme-light .sec-head h2 { color: var(--ink); }
body.theme-light .sec-head p { color: var(--ink3); }
body.theme-light .home-section-label { color: var(--ink3); }

/* Home hero */
body.theme-light .home-hero {
  background: linear-gradient(130deg,rgba(139,26,46,0.08) 0%,rgba(224,228,240,0.7) 100%);
  border-color: rgba(139,26,46,0.15);
}
body.theme-light .home-hero::before {
  background: radial-gradient(ellipse at 85% 50%,rgba(139,26,46,.1) 0%,transparent 60%);
}
body.theme-light .home-hero-avatar {
  background: var(--crimson-light);
  border-color: rgba(139,26,46,0.18);
  color: var(--crimson);
}
body.theme-light .home-hero-greeting { color: var(--ink3); }
body.theme-light .home-hero-name { color: var(--ink); }
body.theme-light .home-hero-sub { color: var(--ink3); }
body.theme-light .home-hero-badge {
  background: rgba(255,255,255,0.7);
  border-color: var(--line);
}
body.theme-light .home-hero-badge-label { color: var(--ink3); }
body.theme-light .home-hero-badge-val { color: var(--ink); }
body.theme-light .home-hero-badge-sub { color: var(--ink3); }

/* Quick links */
body.theme-light .ql {
  background: var(--white);
  border-color: var(--line);
}
body.theme-light .ql:hover {
  background: var(--crimson-light);
  border-color: rgba(139,26,46,0.2);
}
body.theme-light .ql-icon { background: var(--crimson-light); }
body.theme-light .ql-icon svg, body.theme-light .ql-icon i { color: var(--crimson) !important; stroke: var(--crimson) !important; fill: none; }
body.theme-light .ql-t { color: var(--ink); }
body.theme-light .ql-s { color: var(--ink3); }
body.theme-light .ql-arrow { color: rgba(13,27,42,0.18); }
body.theme-light .ql:hover .ql-arrow { color: var(--crimson); }

/* Journey card */
body.theme-light .journey-card {
  background: var(--white);
  border-color: var(--line);
}
body.theme-light .journey-card-head {
  background: var(--surface);
  border-bottom-color: var(--line);
  color: var(--ink3);
}
body.theme-light .degree-row { border-bottom-color: var(--line); }
body.theme-light .degree-row-name { color: var(--ink); }
body.theme-light .degree-row-meta { color: var(--ink3); }
body.theme-light .degree-row-gpa-val { color: var(--ink); }
body.theme-light .degree-row-gpa-den { color: var(--ink3); }

/* Glass card */
body.theme-light .glass-card {
  background: var(--white);
  border-color: var(--line);
}
body.theme-light .glass-card:hover { border-color: rgba(139,26,46,0.18); }
body.theme-light .glass-card-head {
  background: var(--surface);
  border-bottom-color: var(--line);
  color: var(--ink3);
}

/* Banner (profile) */
body.theme-light .banner {
  background: var(--white);
  border-color: var(--line);
}
body.theme-light .avatar {
  background: var(--crimson-light);
  border-color: rgba(139,26,46,0.18);
  color: var(--crimson);
}
body.theme-light .b-name h1 { color: var(--ink); }
body.theme-light .b-name .mm { color: var(--ink3); }
body.theme-light .tag-r { background: var(--crimson-light); color: var(--crimson); border-color: rgba(139,26,46,.12); }
body.theme-light .tag-g { background: var(--gold-light); color: var(--gold); border-color: rgba(154,123,47,.15); }
body.theme-light .tag-n { background: var(--surface); color: var(--ink3); border-color: var(--line); }

/* Info card */
body.theme-light .icard {
  background: var(--white);
  border-color: var(--line);
}
body.theme-light .icard-head {
  background: var(--surface);
  border-bottom-color: var(--line);
  color: var(--ink3);
}
body.theme-light .icell { border-bottom-color: var(--line); }
body.theme-light .icell:nth-child(odd) { border-right-color: var(--line); }
body.theme-light .icell:nth-last-child(-n+2) { border-bottom-color: var(--line); }
body.theme-light .icell:last-child { border-bottom: none; }
body.theme-light .ic-lbl { color: var(--ink3); }
body.theme-light .ic-val { color: var(--ink); }

/* Grades */
body.theme-light .grades-header-banner {
  background: var(--crimson-light);
  border-color: rgba(139,26,46,0.18);
}
body.theme-light .grades-header-banner::before { opacity: .5; }
body.theme-light .grades-hdr-avatar { background: rgba(139,26,46,0.12); border-color: rgba(139,26,46,0.2); color: var(--crimson); }
body.theme-light .grades-hdr-name { color: var(--ink); }
body.theme-light .grades-hdr-id { color: var(--ink3); }
body.theme-light .grades-hdr-gpa-label { color: var(--ink3); }
body.theme-light .grades-hdr-gpa-val { color: var(--ink); }
body.theme-light .grades-hdr-gpa-den { color: var(--ink3); }
body.theme-light .transcript-summary { background: var(--white); border-color: var(--line); }
body.theme-light .ts-lbl { color: var(--ink3); }
body.theme-light .ts-val { color: var(--ink); }
body.theme-light .ts-val.accent { color: var(--crimson); }
body.theme-light .ts-divider { background: var(--line); }
body.theme-light .degree-tabs { border-bottom-color: var(--line); }
body.theme-light .degree-tab { color: var(--ink3); }
body.theme-light .degree-tab:hover { color: var(--ink); }
body.theme-light .degree-tab.active { color: var(--crimson); border-bottom-color: var(--crimson); }
body.theme-light .g-wrap { background: var(--white); border-color: var(--line); }
body.theme-light .g-year-head { background: var(--surface); border-bottom-color: var(--line); color: var(--ink); }
body.theme-light .g-year-head::before { background: var(--crimson); }
body.theme-light .g-block-head { background: #FAFBFC; border-bottom-color: var(--line); color: var(--ink3); }
body.theme-light .g-year-totals { background: var(--surface); border-top-color: var(--line); color: var(--ink3); }
body.theme-light .g-year-totals strong { color: var(--ink); }
body.theme-light table.gt thead tr { border-bottom-color: var(--line); }
body.theme-light table.gt th { color: var(--ink3); }
body.theme-light table.gt td { color: var(--ink); border-bottom-color: var(--line); }
body.theme-light table.gt tbody tr:hover { background: #F8F9FC; }
body.theme-light .gt-course { color: var(--ink); }
body.theme-light .gt-assess { color: var(--ink3); }
body.theme-light .gt-cr { background: var(--surface); border-color: var(--line); color: var(--ink); }
body.theme-light .sbar-num { color: var(--ink); }
body.theme-light .gt-pts { color: var(--ink); }
body.theme-light .no-g { color: var(--ink3); }
body.theme-light .gAp { background: #D1FAE5; color: #065F46; border-color: #6EE7B7; }
body.theme-light .gA  { background: #D1FAE5; color: #065F46; border-color: #A7F3D0; }
body.theme-light .gAm { background: #DBEAFE; color: #1E40AF; border-color: #BFDBFE; }
body.theme-light .gC  { background: #EDE9FE; color: #5B21B6; border-color: #C4B5FD; }
body.theme-light .gBp { background: var(--gold-light); color: #7C5F0A; border-color: #FCD34D; }
body.theme-light .gB  { background: var(--gold-light); color: var(--gold); border-color: rgba(154,123,47,.25); }
body.theme-light .gX  { background: var(--surface); color: var(--ink3); border-color: var(--line); }
body.theme-light .dbadge-green { background: var(--green-light); color: var(--green); border-color: rgba(26,92,58,0.25); }
body.theme-light .dbadge-gold  { background: var(--gold-light); color: var(--gold); border-color: rgba(154,123,47,0.2); }
body.theme-light .dbadge-muted { background: var(--surface); color: var(--ink3); border-color: var(--line); }
body.theme-light .dbadge-red   { background: var(--crimson-light); color: var(--crimson); border-color: rgba(139,26,46,0.2); }

/* Documents */
body.theme-light .doc-degree-picker { background: var(--surface); border-color: var(--line); }
body.theme-light .doc-degree-picker label { color: var(--ink3); }
body.theme-light .doc-degree-picker select { background: var(--white); border-color: var(--line); color: var(--ink); }
body.theme-light .doc-card { background: var(--white); border-color: var(--line); }
body.theme-light .doc-card:hover { border-color: rgba(139,26,46,0.2); background: var(--crimson-light); }
body.theme-light .doc-icon { background: var(--crimson-light); }
body.theme-light .doc-icon svg { stroke: var(--crimson); }
body.theme-light .doc-title { color: var(--ink); }
body.theme-light .doc-desc { color: var(--ink3); }
body.theme-light .doc-tag { color: var(--crimson); border-color: rgba(139,26,46,0.15); background: var(--crimson-light); }
body.theme-light .cert-section-head { color: var(--ink2); }

/* Photo panel */
body.theme-light #panel-photo .icard { background: var(--white); }
body.theme-light #panel-photo .field input { background: var(--white); border-color: var(--line); color: var(--ink); }
body.theme-light #photoDropZone { border-color: var(--line) !important; background: var(--surface) !important; }

/* ── Very small screens (≤380px) ── */
@media(max-width:380px){
  .qlinks { grid-template-columns: repeat(3,1fr) !important; gap: 6px !important; }
  .ql-icon { width: 42px !important; height: 42px !important; }
  .ql-t { font-size: 9.5px !important; }
  .dash-content { padding: 12px 10px 110px; }
  .cs-card { padding: 10px 12px; }
  .cs-card-name { font-size: 12px; }
}

/* ══════════════════════════════════════
   MOBILE BOTTOM TAB BAR
   ══════════════════════════════════════ */
.mob-tabbar {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: 68px;
  z-index: 60;
  background: rgba(10,15,26,0.97);
  border-top: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding: 0 4px;
  padding-bottom: env(safe-area-inset-bottom);
  align-items: center;
  justify-content: space-around;
}
body.theme-light .mob-tabbar {
  background: rgba(255,255,255,0.97);
  border-top-color: var(--line);
}
.mob-tab {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 3px; flex: 1;
  height: 56px;
  border: none; background: none;
  cursor: pointer; padding: 6px 4px;
  border-radius: 10px;
  transition: background .15s;
  -webkit-tap-highlight-color: transparent;
  position: relative;
}
.mob-tab:active { background: rgba(255,255,255,0.06); }
body.theme-light .mob-tab:active { background: rgba(13,27,42,0.05); }
.mob-tab-icon {
  width: 22px; height: 22px;
  color: rgba(255,255,255,0.35);
  transition: color .15s, transform .15s;
  flex-shrink: 0;
}
.mob-tab-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 9.5px; font-weight: 500;
  color: rgba(255,255,255,0.35);
  transition: color .15s;
  white-space: nowrap;
}
body.theme-light .mob-tab-icon  { color: var(--ink3); }
body.theme-light .mob-tab-label { color: var(--ink3); }
.mob-tab.active .mob-tab-icon  { color: #e05470; transform: translateY(-1px); }
.mob-tab.active .mob-tab-label { color: #e05470; font-weight: 700; }
body.theme-light .mob-tab.active .mob-tab-icon  { color: var(--crimson); }
body.theme-light .mob-tab.active .mob-tab-label { color: var(--crimson); }
.mob-tab.active::after {
  content: '';
  position: absolute; top: 4px;
  width: 4px; height: 4px; border-radius: 50%;
  background: #e05470;
}
body.theme-light .mob-tab.active::after { background: var(--crimson); }

/* More menu popup */
.mob-more-menu {
  display: none;
  position: fixed;
  bottom: 76px; right: 8px;
  background: rgba(14,20,32,0.97);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 16px;
  overflow-y: auto; overflow-x: hidden;
  max-height: calc(100vh - 110px);
  z-index: 70;
  min-width: 220px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
  backdrop-filter: blur(20px);
}
body.theme-light .mob-more-menu {
  background: var(--white);
  border-color: var(--line);
  box-shadow: 0 8px 32px rgba(13,27,42,0.15);
}
.mob-more-menu.open { display: block; }
.mob-more-user {
  padding: 14px 18px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
body.theme-light .mob-more-user { border-bottom-color: var(--line); }
.mob-more-user-name {
  font-size: 14px; font-weight: 600;
  color: rgba(255,255,255,0.88);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mob-more-user-id { font-size: 11px; color: rgba(255,255,255,0.3); font-family: monospace; margin-top: 2px; }
body.theme-light .mob-more-user-name { color: var(--ink); }
body.theme-light .mob-more-user-id   { color: var(--ink3); }
.mob-more-item {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 18px;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px; color: rgba(255,255,255,0.7);
  border-top: 1px solid rgba(255,255,255,0.05);
  cursor: pointer; transition: background .15s;
  border-left: none; border-right: none; border-bottom: none;
  background: none; width: 100%; text-align: left;
}
.mob-more-item:first-of-type { border-top: 1px solid rgba(255,255,255,0.06); }
.mob-more-item:active { background: rgba(255,255,255,0.06); }
.mob-more-item svg { flex-shrink: 0; color: rgba(255,255,255,0.35); }
body.theme-light .mob-more-item { color: var(--ink2); border-top-color: var(--line); }
body.theme-light .mob-more-item svg { color: var(--ink3); }
.mob-more-item.danger { color: #f87171; }
.mob-more-item.dim { opacity: .4; cursor: not-allowed; pointer-events: none; }
.mob-more-item.danger svg { color: #f87171; }
body.theme-light .mob-more-item.danger { color: var(--crimson); }
body.theme-light .mob-more-item.danger svg { color: var(--crimson); }
.mob-more-overlay { display:none; position:fixed; inset:0; z-index:65; }
.mob-more-overlay.open { display:block; }

/* Grade badge + and - as superscript */
.gbadge sup { font-size: 0.65em; line-height: 0; position: relative; top: -0.4em; vertical-align: baseline; }
table.gt td span.gbadge { vertical-align: middle; }

/* Green completion icon for courses with grades */
.gt-course-graded {
  display: inline-flex; align-items: center; gap: 5px;
}
.gt-graded-icon {
  width: 16px; height: 16px; flex-shrink: 0;
  color: #22c55e;
}
body.theme-light .gt-graded-icon { color: var(--green); }

/* Course session badge */
.gt-session {
  display: inline-block;
  font-size: 9px; font-weight: 700; letter-spacing: .6px;
  text-transform: uppercase;
  padding: 2px 7px; border-radius: 3px;
  background: rgba(139,26,46,0.12);
  color: rgba(224,84,112,0.85);
  border: 1px solid rgba(139,26,46,0.18);
  white-space: nowrap;
}
body.theme-light .gt-session {
  background: var(--crimson-light);
  color: var(--crimson);
  border-color: rgba(139,26,46,0.2);
}

/* ── COURSE SESSION GRID ── */
.cs-wrap {
  margin-bottom: 24px;
}
.cs-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px; flex-wrap: wrap; gap: 8px;
  padding: 14px 18px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 10px;
}
body.theme-light .cs-header {
  background: var(--surface);
  border-color: var(--line);
}
.cs-header-left { display: flex; align-items: center; gap: 10px; }
.cs-title {
  font-size: 11px; font-weight: 700; letter-spacing: 1.5px;
  text-transform: uppercase; color: rgba(255,255,255,0.35);
}
body.theme-light .cs-title { color: var(--ink3); }
.cs-year-badge {
  font-size: 10px; font-weight: 700; letter-spacing: .8px;
  text-transform: uppercase;
  padding: 3px 10px; border-radius: 4px;
  background: rgba(139,26,46,0.18);
  color: #e05470;
  border: 1px solid rgba(139,26,46,0.28);
}
body.theme-light .cs-year-badge {
  background: var(--crimson-light); color: var(--crimson);
  border-color: rgba(139,26,46,0.2);
}
.cs-progress-bar-wrap {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; color: rgba(255,255,255,0.3);
}
body.theme-light .cs-progress-bar-wrap { color: var(--ink3); }
.cs-progress-track {
  width: 100px; height: 5px; border-radius: 99px;
  background: rgba(255,255,255,0.08);
  overflow: hidden; flex-shrink: 0;
}
body.theme-light .cs-progress-track { background: var(--line); }
.cs-progress-fill {
  height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, #22c55e, #16a34a);
  transition: width .5s ease;
}
.cs-grid {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
@media(max-width:700px) { .cs-grid { gap: 5px; } }
.cs-card {
  position: relative;
  border-radius: 8px;
  padding: 10px 14px 10px 16px;
  display: flex; flex-direction: row; align-items: center; gap: 12px;
  border: 1px solid rgba(255,255,255,0.07);
  background: rgba(255,255,255,0.03);
  transition: border-color .18s, background .18s;
  overflow: hidden;
}
body.theme-light .cs-card {
  background: var(--white); border-color: var(--line);
}
.cs-card.completed {
  border-color: rgba(34,197,94,0.25);
  background: rgba(34,197,94,0.05);
}
body.theme-light .cs-card.completed {
  border-color: rgba(26,92,58,0.25);
  background: rgba(26,92,58,0.04);
}
.cs-card.pending {
  border-color: rgba(255,255,255,0.07);
}
.cs-card-top {
  display: flex; align-items: center; gap: 6px; flex-shrink: 0;
}
.cs-card-body {
  flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px;
}
.cs-card-right { flex-shrink: 0; }
.cs-card-code {
  font-size: 9px; font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase;
  font-family: monospace;
  color: rgba(255,255,255,0.28);
}
body.theme-light .cs-card-code { color: var(--ink3); }
.cs-status-icon {
  flex-shrink: 0; width: 18px; height: 18px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.cs-status-icon.done {
  background: rgba(34,197,94,0.18);
  border: 1.5px solid rgba(34,197,94,0.4);
  color: #22c55e;
}
body.theme-light .cs-status-icon.done {
  background: var(--green-light); border-color: rgba(26,92,58,0.3); color: var(--green);
}
.cs-status-icon.todo {
  background: rgba(255,255,255,0.05);
  border: 1.5px solid rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.2);
}
body.theme-light .cs-status-icon.todo {
  background: var(--surface); border-color: var(--line); color: var(--ink3);
}
.cs-card-name {
  font-size: 12px; font-weight: 600; line-height: 1.35;
  color: rgba(255,255,255,0.78);
}
body.theme-light .cs-card-name { color: var(--ink); }
.cs-card-meta {
  font-size: 10px; color: rgba(255,255,255,0.25); line-height: 1.3;
}
body.theme-light .cs-card-meta { color: var(--ink3); }
.cs-card-grade {
  margin-top: 2px;
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10px; font-weight: 700;
  color: #22c55e;
}
body.theme-light .cs-card-grade { color: var(--green); }
.cs-card-grade .gbadge {
  font-size: 10px; min-width: 28px; height: 20px; padding: 0 5px;
}
/* Completed shimmer accent line */
.cs-card.completed::before {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, #22c55e, #16a34a);
  border-radius: 3px 0 0 3px;
}
body.theme-light .cs-card.completed::before {
  background: linear-gradient(180deg, var(--green), #2d9a5a);
}

/* Course session year tabs */
.cs-year-tabs {
  display: flex; gap: 4px; margin-bottom: 16px;
  overflow-x: auto; scrollbar-width: none;
  flex-wrap: wrap;
}
.cs-year-tabs::-webkit-scrollbar { display: none; }
.cs-year-tab {
  padding: 6px 14px; border-radius: 99px;
  font-size: 11px; font-weight: 600; letter-spacing: .3px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.4);
  cursor: pointer; white-space: nowrap;
  transition: all .15s;
  font-family: 'DM Sans', sans-serif;
}
.cs-year-tab:hover { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.7); }
.cs-year-tab.active {
  background: rgba(139,26,46,0.22);
  border-color: rgba(139,26,46,0.4);
  color: #e05470;
}
body.theme-light .cs-year-tab {
  background: var(--surface); border-color: var(--line); color: var(--ink3);
}
body.theme-light .cs-year-tab:hover { background: var(--crimson-light); color: var(--crimson); }
body.theme-light .cs-year-tab.active {
  background: var(--crimson-light); border-color: rgba(139,26,46,0.25); color: var(--crimson);
}

/* ── TIMETABLE ── */

.tt-filter-bar {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 16px; flex-wrap: wrap;
}
.tt-filter-label {
  font-size: 11px; font-weight: 600; letter-spacing: .5px;
  text-transform: uppercase; color: rgba(255,255,255,.35);
  font-family: 'DM Sans', sans-serif;
}
body.theme-light .tt-filter-label { color: var(--ink3); }
.tt-filter-pill {
  padding: 5px 12px; border-radius: 99px; font-size: 11px;
  border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.4); cursor: pointer; font-family: 'DM Sans', sans-serif;
  transition: all .15s;
}
.tt-filter-pill:hover { background: rgba(255,255,255,0.08); color: rgba(255,255,255,.7); }
.tt-filter-pill.active {
  background: rgba(139,26,46,0.22); border-color: rgba(139,26,46,0.4); color: #e05470;
}
body.theme-light .tt-filter-pill { background: var(--surface); border-color: var(--line); color: var(--ink3); }
body.theme-light .tt-filter-pill:hover { background: var(--crimson-light); color: var(--crimson); }
body.theme-light .tt-filter-pill.active { background: var(--crimson-light); border-color: rgba(139,26,46,.25); color: var(--crimson); }

/* Schedule list (mobile-first, grouped by day) */
.tt-day-group { margin-bottom: 18px; }
.tt-day-head {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 14px; border-radius: 8px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  font-size: 11px; font-weight: 700; letter-spacing: 1.2px;
  text-transform: uppercase; color: rgba(255,255,255,.55);
  font-family: 'DM Sans', sans-serif; margin-bottom: 8px;
}
.tt-day-head.today { background: rgba(139,26,46,0.14); border-color: rgba(139,26,46,0.3); color: #e05470; }
body.theme-light .tt-day-head { background: var(--surface); border-color: var(--line); color: var(--ink3); }
body.theme-light .tt-day-head.today { background: var(--crimson-light); border-color: rgba(139,26,46,.2); color: var(--crimson); }

.tt-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(255,255,255,.25); flex-shrink: 0;
}
.tt-day-head.today .tt-dot { background: #e05470; }

.tt-row {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 14px; border-radius: 10px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  margin-bottom: 6px; transition: border-color .15s;
}
.tt-row:hover { border-color: rgba(139,26,46,0.3); }
body.theme-light .tt-row { background: var(--white); border-color: var(--line); }
body.theme-light .tt-row:hover { border-color: rgba(139,26,46,.2); }

.tt-time-col {
  flex-shrink: 0; width: 80px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
}
.tt-time-start {
  font-family: 'Libre Baskerville', serif; font-size: 15px; font-weight: 700;
  color: rgba(255,255,255,.85); line-height: 1.1;
}
body.theme-light .tt-time-start { color: var(--ink); }
.tt-time-end {
  font-size: 10px; color: rgba(255,255,255,.3); letter-spacing: .3px;
}
body.theme-light .tt-time-end { color: var(--ink3); }
.tt-time-dur {
  display: inline-block; margin-top: 3px;
  font-size: 9px; font-weight: 600; letter-spacing: .4px;
  text-transform: uppercase; padding: 2px 6px; border-radius: 99px;
  background: rgba(255,255,255,0.06); color: rgba(255,255,255,.3);
  font-family: 'DM Sans', sans-serif;
}
body.theme-light .tt-time-dur { background: var(--surface); color: var(--ink3); }

.tt-body-col { flex: 1; min-width: 0; }
.tt-course-id {
  font-size: 10px; font-weight: 700; letter-spacing: .8px;
  text-transform: uppercase; color: rgba(139,26,46,.8);
  font-family: 'DM Sans', sans-serif; margin-bottom: 2px;
}
body.theme-light .tt-course-id { color: var(--crimson); }
.tt-course-name {
  font-size: 13px; font-weight: 600; color: rgba(255,255,255,.88);
  font-family: 'DM Sans', sans-serif; line-height: 1.3; margin-bottom: 3px;
}
body.theme-light .tt-course-name { color: var(--ink); }
.tt-subtopic {
  font-size: 11px; color: rgba(255,255,255,.4);
  font-style: italic; line-height: 1.4; margin-bottom: 4px;
}
body.theme-light .tt-subtopic { color: var(--ink3); }

.tt-attend-btn {
  margin-top: 8px;
  padding: 6px 14px;
  background: rgba(139,26,46,0.15);
  color: var(--crimson, #8b1a2e);
  border: 1px solid rgba(139,26,46,0.4);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.tt-attend-btn:hover:not(:disabled) {
  background: var(--crimson, #8b1a2e);
  color: #fff;
}
.tt-attend-btn:disabled {
  cursor: not-allowed;
  opacity: 0.8;
}
.tt-room-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10px; font-weight: 600; letter-spacing: .3px;
  padding: 3px 8px; border-radius: 6px;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
  color: rgba(255,255,255,.5); font-family: 'DM Sans', sans-serif;
}
body.theme-light 
.tt-attend-btn {
  margin-top: 8px;
  padding: 6px 14px;
  background: rgba(139,26,46,0.15);
  color: var(--crimson, #8b1a2e);
  border: 1px solid rgba(139,26,46,0.4);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.tt-attend-btn:hover:not(:disabled) {
  background: var(--crimson, #8b1a2e);
  color: #fff;
}
.tt-attend-btn:disabled {
  cursor: not-allowed;
  opacity: 0.8;
}
.tt-room-badge { background: var(--surface); border-color: var(--line); color: var(--ink3); }

/* Date badge shown when a specific date is set */
.tt-date-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10px; color: rgba(154,123,47,0.9);
  background: rgba(154,123,47,0.1); border: 1px solid rgba(154,123,47,0.25);
  border-radius: 6px; padding: 2px 8px; margin-left: 6px;
  font-family: 'DM Sans', sans-serif; font-weight: 500;
}
body.theme-light .tt-date-badge { background: var(--gold-light); border-color: rgba(154,123,47,.25); color: var(--gold); }

/* ── Week bar: label + Show All / This Week toggle ── */
.tt-week-bar {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 8px; margin-bottom: 14px;
}
.tt-week-label {
  font-size: 11px; letter-spacing: .4px;
  color: rgba(255,255,255,0.55);
}
.tt-toggle-btn {
  font-size: 11px; padding: 4px 14px; border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.85);
  cursor: pointer; letter-spacing: .3px;
  transition: background 0.2s, color 0.2s;
}
.tt-toggle-btn:hover { background: rgba(255,255,255,0.15); color: #fff; }
body.theme-light .tt-week-label { color: var(--ink3); }
body.theme-light .tt-toggle-btn {
  border-color: var(--line);
  background: var(--surface);
  color: var(--ink3);
}
body.theme-light .tt-toggle-btn:hover {
  background: var(--crimson-light);
  color: var(--crimson);
  border-color: rgba(139,26,46,.25);
}

.tt-empty, .tt-loading, .tt-error {
  text-align: center; padding: 56px 24px;
  color: rgba(255,255,255,.2); font-size: 13px;
}
body.theme-light .tt-empty, body.theme-light .tt-loading, body.theme-light .tt-error { color: var(--ink3); }
.tt-loading { display: flex; align-items: center; justify-content: center; gap: 8px; }
.tt-error { color: rgba(224,84,112,.7); }
body.theme-light .tt-error { color: var(--crimson); }

@media (max-width: 700px) {
  .tt-time-col { width: 68px; }
  .tt-time-start { font-size: 13px; }
  .tt-row { padding: 10px 12px; gap: 10px; }
  .tt-course-name { font-size: 12px; }
}

/* ── MARK BOOK ── */
.mb-year-head {
  background: rgba(255,255,255,0.04);
  padding: 9px 18px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  font-size: 11px; font-weight: 700; letter-spacing: 1.4px;
  text-transform: uppercase; color: rgba(255,255,255,0.55);
  display: flex; align-items: center; gap: 10px;
}
body.theme-light .mb-year-head { background: var(--surface); color: var(--ink); border-bottom-color: var(--line); }
.mb-year-head::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: #f59e0b; flex-shrink: 0;
}
.mb-mark-bar {
  display: inline-flex; align-items: center; gap: 6px;
}
.mb-bar-track {
  width: 60px; height: 4px; border-radius: 99px;
  background: rgba(255,255,255,0.08); overflow: hidden;
}
body.theme-light .mb-bar-track { background: var(--line); }
.mb-bar-fill {
  height: 100%; border-radius: 99px;
  transition: width .4s ease;
}
.mb-bar-fill.high   { background: #22c55e; }
.mb-bar-fill.mid    { background: #f59e0b; }
.mb-bar-fill.low    { background: #ef4444; }
.mb-pct {
  font-size: 11px; font-weight: 700;
  min-width: 38px; text-align: right;
}
.mb-pct.high { color: #22c55e; }
.mb-pct.mid  { color: #f59e0b; }
.mb-pct.low  { color: #ef4444; }
body.theme-light .mb-pct.high { color: var(--green); }
body.theme-light .mb-pct.mid  { color: var(--gold); }
body.theme-light .mb-pct.low  { color: var(--crimson); }

/* ── COMMUNICATION SECTION ── */
.comms-loading {
  display: flex; align-items: center; gap: 10px;
  padding: 28px 24px; color: rgba(255,255,255,0.35);
  font-size: 13px;
}
.comms-loading svg { animation: spin 1.1s linear infinite; flex-shrink: 0; }
@keyframes spin { to { transform: rotate(360deg); } }

.comms-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 24px;
}
@media(max-width:700px){ .comms-grid { grid-template-columns: 1fr; } }

/* ── Lecture Rooms ─────────────────────────────────────── */
/* ── Lecture Rooms — Academic Classroom Design ───────────────────── */
.lr-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 20px;
  margin-top: 8px;
}
@media(max-width:700px){ .lr-grid { grid-template-columns: 1fr; } }

/* Card shell — warm academic parchment feel */
.lr-card {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(160deg, #1a1410 0%, #110e0a 100%);
  border: 1px solid rgba(180,140,80,0.2);
  cursor: pointer;
  transition: transform .22s cubic-bezier(.22,1,.36,1), box-shadow .22s ease, border-color .22s ease;
  box-shadow: 0 4px 20px rgba(0,0,0,0.35), inset 0 1px 0 rgba(200,160,80,0.08);
}
.lr-card:hover {
  transform: translateY(-4px) scale(1.012);
  border-color: rgba(180,140,80,0.45);
  box-shadow: 0 20px 50px rgba(0,0,0,0.5), 0 0 0 1px rgba(180,140,80,0.18), 0 0 40px rgba(120,80,20,0.12);
}

/* ── Lecture hall illustration area ── */
.lr-screen {
  position: relative;
  height: 148px;
  background: linear-gradient(180deg, #0a0806 0%, #12100c 55%, #1a1510 100%);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Tiered floor lines — lecture theatre perspective */
.lr-screen::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    /* Floor tier lines */
    linear-gradient(180deg,
      transparent 55%,
      rgba(180,140,60,0.06) 56%, transparent 57%,
      transparent 65%,
      rgba(180,140,60,0.05) 66%, transparent 67%,
      transparent 75%,
      rgba(180,140,60,0.04) 76%, transparent 77%
    ),
    /* Side wall lines converging to vanishing point */
    repeating-linear-gradient(
      90deg,
      transparent 0px,
      transparent 48px,
      rgba(180,140,60,0.025) 48px,
      rgba(180,140,60,0.025) 49px
    );
  pointer-events: none;
}
/* Warm ambient light from the board */
.lr-screen::after {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 260px; height: 100px;
  background: radial-gradient(ellipse at 50% 0%, rgba(200,160,60,0.14) 0%, transparent 70%);
  pointer-events: none;
}

/* The lecture blackboard / whiteboard */
.lr-screen-display {
  position: relative;
  z-index: 2;
  width: 148px;
  height: 88px;
  border-radius: 3px;
  background: linear-gradient(160deg, #1a2e1a 0%, #142414 50%, #1c301c 100%);
  border: 3px solid #5a4a2a;
  border-bottom: 5px solid #4a3a1a;
  box-shadow:
    0 0 0 1px rgba(90,74,42,0.5),
    0 2px 0 2px rgba(40,28,8,0.8),
    0 6px 24px rgba(0,0,0,0.6),
    inset 0 1px 0 rgba(255,255,255,0.04);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
/* Chalk texture on the board */
.lr-screen-display::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 30% 40%, rgba(255,255,255,0.025) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 60%, rgba(255,255,255,0.015) 0%, transparent 40%);
  pointer-events: none;
}
/* Board content — chalk writing lines */
.lr-screen-logo {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 8px;
}
.lr-screen-logo svg { opacity: .75; }
.lr-screen-logo-text {
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: rgba(200,220,200,0.5);
  font-family: 'Libre Baskerville', serif;
}

/* Session status badge */
.lr-live-badge {
  position: absolute;
  top: 10px; left: 12px;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 5px;
  background: rgba(20,14,6,0.75);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(180,140,60,0.25);
  border-radius: 6px;
  padding: 4px 10px 4px 8px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
  color: rgba(200,170,100,0.85);
  text-transform: uppercase;
  font-family: 'DM Sans', sans-serif;
}
.lr-live-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #c8a050;
  box-shadow: 0 0 0 0 rgba(200,160,80,0.6);
  animation: lr-pulse 2.5s ease-in-out infinite;
}
@keyframes lr-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(200,160,80,0.55); }
  50%      { box-shadow: 0 0 0 5px rgba(200,160,80,0); }
}

/* Chalk tray at the bottom of the board */
.lr-chalk-tray {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 6px;
  background: linear-gradient(90deg, #3a2a0a, #5a4a1a, #3a2a0a);
  border-top: 1px solid rgba(140,100,30,0.4);
  z-index: 3;
}

/* ── Card info area ── */
.lr-card-body {
  padding: 16px 18px 6px;
  position: relative;
}
/* Subtle warm glow from board into body */
.lr-card-body::before {
  content: '';
  position: absolute;
  top: -16px; left: 50%;
  transform: translateX(-50%);
  width: 200px; height: 32px;
  background: radial-gradient(ellipse, rgba(180,140,60,0.06) 0%, transparent 70%);
  pointer-events: none;
}
.lr-card-subject {
  font-size: 15px;
  font-weight: 700;
  color: rgba(240,220,180,0.92);
  margin-bottom: 3px;
  letter-spacing: -.1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  position: relative;
  font-family: 'Libre Baskerville', serif;
}
.lr-card-desc {
  font-size: 12px;
  color: rgba(200,175,130,0.45);
  line-height: 1.5;
  margin-bottom: 12px;
  position: relative;
}

/* Meeting info chips */
.lr-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
  position: relative;
}
.lr-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 5px;
  background: rgba(180,140,60,0.07);
  border: 1px solid rgba(180,140,60,0.15);
  font-size: 11px;
  color: rgba(200,175,130,0.65);
}
.lr-chip-label {
  color: rgba(180,140,60,0.5);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .6px;
  font-weight: 700;
}
.lr-chip-val {
  font-family: 'SF Mono','Fira Code',monospace;
  font-size: 11px;
  color: rgba(210,180,100,0.85);
  letter-spacing: .2px;
}

/* ── Action footer ── */
.lr-card-footer {
  padding: 10px 18px 16px;
  display: flex;
  gap: 8px;
}
.lr-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .2px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: all .18s cubic-bezier(.22,1,.36,1);
}
.lr-btn-join {
  background: linear-gradient(135deg, #7a3a10 0%, #a05020 100%);
  color: rgba(255,235,200,0.95);
  box-shadow: 0 4px 14px rgba(120,60,16,0.4);
  border: 1px solid rgba(200,140,60,0.3);
}
.lr-btn-join:hover {
  background: linear-gradient(135deg, #8a4520 0%, #b06030 100%);
  box-shadow: 0 6px 20px rgba(120,60,16,0.55);
  transform: translateY(-1px);
}
.lr-btn-copy {
  background: rgba(180,140,60,0.08);
  color: rgba(200,170,100,0.7);
  border: 1px solid rgba(180,140,60,0.18);
  flex: none;
  padding: 10px 14px;
}
.lr-btn-copy:hover {
  background: rgba(180,140,60,0.14);
  color: rgba(220,190,120,0.9);
  transform: translateY(-1px);
}
.lr-btn-copy.copied {
  background: rgba(34,197,94,0.12);
  color: #86efac;
  border-color: rgba(34,197,94,0.28);
}

/* Divider line between board and body — like a chalk ledge */
.lr-divider {
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(180,140,60,0.2) 20%, rgba(180,140,60,0.2) 80%, transparent);
  border-top: 1px solid rgba(40,28,8,0.8);
}

/* Light theme overrides */
body.theme-light .lr-card {
  background: linear-gradient(160deg, #fdf8f0 0%, #f5ede0 100%);
  border-color: rgba(140,100,40,0.2);
  box-shadow: 0 2px 12px rgba(100,60,10,0.1), inset 0 1px 0 rgba(255,255,255,0.8);
}
body.theme-light .lr-card:hover {
  border-color: rgba(139,26,46,0.35);
  box-shadow: 0 16px 40px rgba(100,60,10,0.18);
}
body.theme-light .lr-screen {
  background: linear-gradient(180deg, #2a3520 0%, #1e2818 55%, #253020 100%);
}
body.theme-light .lr-screen::after { background: radial-gradient(ellipse at 50% 0%, rgba(180,220,150,0.18) 0%, transparent 70%); }
body.theme-light .lr-screen-display {
  background: linear-gradient(160deg, #1e3a1e 0%, #162c16 50%, #203e20 100%);
}
body.theme-light .lr-live-badge {
  background: rgba(255,255,255,0.85);
  color: #6b4a10;
  border-color: rgba(140,100,40,0.3);
}
body.theme-light .lr-live-dot { background: #c8901a; box-shadow: 0 0 0 0 rgba(200,144,26,0.6); }
body.theme-light .lr-card-subject { color: var(--ink); }
body.theme-light .lr-card-desc { color: var(--ink3); }
body.theme-light .lr-chip { background: rgba(139,26,46,0.06); border-color: rgba(139,26,46,0.14); }
body.theme-light .lr-chip-val { color: var(--crimson); }
body.theme-light .lr-chip-label { color: var(--ink3); }
body.theme-light .lr-btn-join { background: linear-gradient(135deg, var(--crimson) 0%, var(--crimson-mid) 100%); color: #fff; box-shadow: 0 4px 14px rgba(139,26,46,0.3); border-color: transparent; }
body.theme-light .lr-btn-join:hover { background: linear-gradient(135deg, var(--crimson-mid) 0%, #d93050 100%); }
body.theme-light .lr-btn-copy { background: var(--surface); color: var(--ink2); border-color: var(--line); }
body.theme-light .lr-btn-copy:hover { background: var(--crimson-light); color: var(--crimson); border-color: rgba(139,26,46,0.2); }
body.theme-light .lr-divider { background: linear-gradient(90deg,transparent,rgba(139,26,46,0.12) 20%,rgba(139,26,46,0.12) 80%,transparent); border-top-color: rgba(180,140,80,0.15); }

.comms-channel-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color .18s, box-shadow .18s, transform .18s;
  display: flex; flex-direction: column;
  text-decoration: none;
  cursor: pointer;
  position: relative;
}
.comms-channel-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(0,0,0,0.25);
}
.comms-channel-card.telegram  { border-color: rgba(38,167,224,0.2); }
.comms-channel-card.telegram:hover { border-color: rgba(38,167,224,0.45); box-shadow: 0 8px 28px rgba(38,167,224,0.12); }
.comms-channel-card.whatsapp  { border-color: rgba(37,211,102,0.2); }
.comms-channel-card.whatsapp:hover { border-color: rgba(37,211,102,0.45); box-shadow: 0 8px 28px rgba(37,211,102,0.12); }
.comms-channel-card.facebook  { border-color: rgba(66,103,178,0.2); }
.comms-channel-card.facebook:hover { border-color: rgba(66,103,178,0.45); box-shadow: 0 8px 28px rgba(66,103,178,0.12); }
.comms-channel-card.viber     { border-color: rgba(123,101,191,0.2); }
.comms-channel-card.viber:hover { border-color: rgba(123,101,191,0.45); box-shadow: 0 8px 28px rgba(123,101,191,0.12); }
.comms-channel-card.other     { border-color: rgba(255,255,255,0.1); }
.comms-channel-card.other:hover { border-color: rgba(255,255,255,0.22); }

.comms-channel-card.disabled  {
  opacity: 0.48; cursor: default; pointer-events: none;
}

.comms-ch-accent {
  height: 3px; width: 100%;
}
.telegram  .comms-ch-accent { background: linear-gradient(90deg,#229ED9,#4FC5E8); }
.whatsapp  .comms-ch-accent { background: linear-gradient(90deg,#25D366,#5BE078); }
.facebook  .comms-ch-accent { background: linear-gradient(90deg,#4267B2,#6A85D1); }
.viber     .comms-ch-accent { background: linear-gradient(90deg,#7B65BF,#A993D9); }
.other     .comms-ch-accent { background: linear-gradient(90deg,var(--crimson),var(--crimson-mid)); }

.comms-ch-body {
  padding: 20px 22px 18px;
  display: flex; gap: 16px; align-items: flex-start; flex: 1;
}
.comms-ch-icon {
  width: 44px; height: 44px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.telegram  .comms-ch-icon { background: rgba(38,167,224,0.12); }
.whatsapp  .comms-ch-icon { background: rgba(37,211,102,0.12); }
.facebook  .comms-ch-icon { background: rgba(66,103,178,0.12); }
.viber     .comms-ch-icon { background: rgba(123,101,191,0.12); }
.other     .comms-ch-icon { background: rgba(139,26,46,0.12); }

.comms-ch-info { flex: 1; min-width: 0; }
.comms-ch-type {
  font-size: 10px; font-weight: 700; letter-spacing: 1.2px;
  text-transform: uppercase; margin-bottom: 3px;
}
.telegram  .comms-ch-type { color: #4FC5E8; }
.whatsapp  .comms-ch-type { color: #5BE078; }
.facebook  .comms-ch-type { color: #6A85D1; }
.viber     .comms-ch-type { color: #A993D9; }
.other     .comms-ch-type { color: rgba(255,255,255,0.5); }

.comms-ch-name {
  font-size: 15px; font-weight: 700;
  color: rgba(255,255,255,0.88); margin-bottom: 5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.comms-ch-desc {
  font-size: 12px; color: rgba(255,255,255,0.35);
  line-height: 1.55; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.comms-ch-footer {
  padding: 10px 22px 14px;
  display: flex; align-items: center; justify-content: space-between;
  border-top: 1px solid rgba(255,255,255,0.05);
}
.comms-ch-members {
  font-size: 11px; color: rgba(255,255,255,0.28);
  display: flex; align-items: center; gap: 5px;
}
.comms-ch-join {
  font-size: 11px; font-weight: 700; letter-spacing: .5px;
  padding: 5px 13px; border-radius: 99px;
  transition: opacity .15s;
}
.telegram  .comms-ch-join { background: rgba(38,167,224,0.18); color: #4FC5E8; border: 1px solid rgba(38,167,224,0.25); }
.whatsapp  .comms-ch-join { background: rgba(37,211,102,0.18); color: #5BE078; border: 1px solid rgba(37,211,102,0.25); }
.facebook  .comms-ch-join { background: rgba(66,103,178,0.18); color: #6A85D1; border: 1px solid rgba(66,103,178,0.25); }
.viber     .comms-ch-join { background: rgba(123,101,191,0.18); color: #A993D9; border: 1px solid rgba(123,101,191,0.25); }
.other     .comms-ch-join { background: rgba(139,26,46,0.18); color: #e05470; border: 1px solid rgba(139,26,46,0.25); }

/* ── Comms action buttons ── */
.comms-ch-actions { display: flex; gap: 7px; flex-wrap: wrap; }
.comms-ch-btn {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 700; letter-spacing: .4px;
  padding: 5px 12px; border-radius: 99px;
  text-decoration: none; border: 1px solid transparent;
  transition: opacity .15s, transform .12s;
  white-space: nowrap;
}
.comms-ch-btn:hover { opacity: .82; transform: translateY(-1px); }
.comms-ch-btn svg { flex-shrink: 0; }

/* Channel button — platform tint */
.telegram  .comms-ch-btn-channel { background: rgba(38,167,224,0.18); color: #4FC5E8; border-color: rgba(38,167,224,0.3); }
.whatsapp  .comms-ch-btn-channel { background: rgba(37,211,102,0.18); color: #5BE078; border-color: rgba(37,211,102,0.3); }
.facebook  .comms-ch-btn-channel { background: rgba(66,103,178,0.18); color: #6A85D1; border-color: rgba(66,103,178,0.3); }
.viber     .comms-ch-btn-channel { background: rgba(123,101,191,0.18); color: #A993D9; border-color: rgba(123,101,191,0.3); }
.other     .comms-ch-btn-channel { background: rgba(139,26,46,0.18); color: #e05470; border-color: rgba(139,26,46,0.3); }

/* GP / Group button — slightly brighter fill */
.telegram  .comms-ch-btn-gp { background: rgba(38,167,224,0.28); color: #fff; border-color: rgba(38,167,224,0.4); }
.whatsapp  .comms-ch-btn-gp { background: rgba(37,211,102,0.28); color: #fff; border-color: rgba(37,211,102,0.4); }
.facebook  .comms-ch-btn-gp { background: rgba(66,103,178,0.28); color: #fff; border-color: rgba(66,103,178,0.4); }
.viber     .comms-ch-btn-gp { background: rgba(123,101,191,0.28); color: #fff; border-color: rgba(123,101,191,0.4); }
.other     .comms-ch-btn-gp { background: rgba(139,26,46,0.28); color: #fff; border-color: rgba(139,26,46,0.4); }

/* Light theme overrides for comms */
body.theme-light .comms-channel-card {
  background: var(--white); border-color: var(--line);
}
body.theme-light .comms-channel-card.telegram:hover  { border-color: rgba(38,167,224,0.4); }
body.theme-light .comms-channel-card.whatsapp:hover  { border-color: rgba(37,211,102,0.4); }
body.theme-light .comms-channel-card.facebook:hover  { border-color: rgba(66,103,178,0.4); }
body.theme-light .comms-channel-card.viber:hover     { border-color: rgba(123,101,191,0.4); }
body.theme-light .comms-channel-card.other:hover     { border-color: rgba(139,26,46,0.3); }
body.theme-light .comms-ch-name  { color: var(--ink); }
body.theme-light .comms-ch-desc  { color: var(--ink3); }
body.theme-light .comms-ch-footer { border-top-color: var(--line); }
body.theme-light .comms-ch-members { color: var(--ink3); }
body.theme-light .comms-loading { color: var(--ink3); }
body.theme-light .comms-ch-btn-channel,
body.theme-light .comms-ch-btn-gp { color: inherit; }
/* Fixed bottom bar — sits above viewport bottom, inside dash-main */
.iris-bottom-bar {
  position: fixed;
  bottom: 0;
  /* Align with dash-main by offsetting the sidebar width */
  left: 256px;
  right: 0;
  z-index: 40;
  display: none; /* hidden until dashboard is shown */
  align-items: center;
  gap: 14px;
  padding: 0 36px;
  height: 52px;
  background: rgba(10, 14, 24, 0.92);
  border-top: 1px solid rgba(255,255,255,0.06);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
body.theme-light .iris-bottom-bar {
  background: rgba(247,248,252,0.95);
  border-top-color: var(--line);
}

/* Glow accent on left edge */
.iris-bottom-bar::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--crimson), var(--crimson-mid));
}

.iris-bb-logo-wrap {
  width: 28px; height: 28px;
  border-radius: 6px;
  background: rgba(139,26,46,0.18);
  border: 1px solid rgba(139,26,46,0.32);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; overflow: hidden;
}
body.theme-light .iris-bb-logo-wrap {
  background: var(--crimson-light);
  border-color: rgba(139,26,46,0.18);
}
.iris-bb-logo {
  height: 18px; width: auto; object-fit: contain; opacity: .9;
}
.iris-bb-fallback {
  display: none;
  font-family: 'Libre Baskerville', serif;
  font-size: 11px; font-weight: 700; color: #e05470;
}
.iris-bb-info {
  display: flex; align-items: baseline; gap: 10px; flex: 1; min-width: 0;
}
.iris-bb-full {
  font-size: 12px;
  font-weight: 500;
  color: rgba(255,255,255,0.45);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.theme-light .iris-bb-full { color: var(--ink3); }
.iris-bb-sep {
  font-size: 11px;
  color: rgba(255,255,255,0.15);
  flex-shrink: 0;
}
body.theme-light .iris-bb-sep { color: var(--line); }
.iris-bb-org {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: rgba(139,26,46,0.7);
  white-space: nowrap;
  flex-shrink: 0;
}
body.theme-light .iris-bb-org { color: var(--crimson); opacity: .75; }

/* ── Responsive: on mobile, full width (no sidebar offset) ── */
@media (max-width: 700px) {
  .iris-bottom-bar {
    left: 0;
    padding: 0 16px;
    height: 48px;
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* Show bar only when dashboard is visible */
#dashboard.show ~ .iris-bottom-bar,
#dashboard.show + .iris-bottom-bar {
  display: flex;
}
/* ── Notification Bars ─────────────────────────────────────── */
#notifBannersContainer {
  display: none;
  margin-bottom: 12px;
}

.notif-bar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 44px;
  padding: 0 12px 0 0;
  margin-bottom: 6px;
  background: var(--notif-bg);
  border: 1px solid var(--notif-border);
  border-left: none;
  border-radius: 8px;
  overflow: hidden;
  transition: opacity 0.2s, transform 0.2s;
}

.notif-bar-accent {
  width: 3px;
  align-self: stretch;
  flex-shrink: 0;
  background: var(--notif-color);
}

.notif-bar-icon {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: var(--notif-color);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #fff;
  opacity: 0.92;
}
.notif-bar-icon svg {
  width: 14px;
  height: 14px;
  stroke: #fff;
}

.notif-bar-body {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 7px;
  overflow: hidden;
}
.notif-bar-title {
  font-size: 12px;
  font-weight: 700;
  color: #ffffff;
  white-space: nowrap;
  flex-shrink: 0;
}
.notif-bar-msg {
  font-size: 12px;
  color: rgba(255,255,255,0.7);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.notif-bar-time {
  font-size: 11px;
  color: rgba(255,255,255,0.5);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Light mode text overrides */
body.theme-light .notif-bar-title {
  color: var(--ink);
}
body.theme-light .notif-bar-msg {
  color: var(--ink3);
}
body.theme-light .notif-bar-time {
  color: var(--ink3);
  opacity: 0.7;
}

.notif-bar-close {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: none;
  background: none;
  cursor: pointer;
  color: rgba(255,255,255,0.6);
  border-radius: 4px;
  opacity: 0.6;
  transition: opacity 0.15s, background 0.15s;
  padding: 0;
}
.notif-bar-close:hover {
  opacity: 1;
  background: rgba(255,255,255,0.12);
}
body.theme-light .notif-bar-close {
  color: var(--ink3);
}
body.theme-light .notif-bar-close:hover {
  background: rgba(13,27,42,0.06);
}

.notif-bar.dismissing {
  opacity: 0;
  transform: translateX(8px);
}
/* ══════════════════════════════════════════════════════════
   FIX: Prevent degree certificate / cert-banner content
   from bleeding through the dashboard UI.

   Root causes:
   1. .cert-banner had no background → inheriting the nearly-
      transparent .doc-card glass bg, letting content show through.
   2. #certSection lacked display:none when not active.
   3. .doc-card / .doc-grid had no isolation context, so z-index
      stacking let the cert text paint above the card overlay layer.
   ══════════════════════════════════════════════════════════ */

/* 1. Give cert-banner cards a solid opaque background so they
      never bleed through other layers */
.cert-banner {
  background: var(--ink2, #1a2433) !important;
  border-color: rgba(139, 26, 46, 0.35) !important;
  isolation: isolate;
  position: relative;
  z-index: 1;
}
body.theme-light .cert-banner {
  background: var(--white) !important;
  border-color: rgba(139, 26, 46, 0.25) !important;
}

/* 2. Ensure #certSection is hidden by default and only shown
      when the documents section is active */
#certSection {
  display: none;
}
.section.active #certSection {
  display: block;
}

/* 3. Give every doc-card a stacking context so inner content
      never leaks outside the card's painted area */
.doc-card,
.doc-grid {
  isolation: isolate;
  position: relative;
  z-index: 1;
}

/* 4. Harden doc-card backgrounds — the near-transparent glass
      look was letting content behind bleed through */
.doc-card {
  background: var(--ink2, #1a2433) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
body.theme-light .doc-card {
  background: var(--white) !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* 5. Make sure the QR temp-div used by generateQRDataUrl()
      can never accidentally be visible */
body > div[style*="left:-9999px"],
body > div[style*="left: -9999px"] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  overflow: hidden !important;
}

/* =========================================================
   MY DOCUMENTS — FINAL VISIBILITY FIX
   Actual container id is #docHistoryContainer.
   Also catches legacy inline var(--ink) / var(--ink3) styles.
   ========================================================= */

body:not(.theme-light) #docHistoryContainer,
body:not(.theme-light) #docHistoryContainer .doc-history-row {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

/* Legacy markup generated by older documents.js */
body:not(.theme-light) #docHistoryContainer .doc-history-row [style*="color:var(--ink"],
body:not(.theme-light) #docHistoryContainer .doc-history-row [style*="color: var(--ink"],
body:not(.theme-light) #docHistoryContainer .doc-history-row > div > div:first-child,
body:not(.theme-light) #docHistoryContainer .doc-history-title {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  opacity: 1 !important;
}

body:not(.theme-light) #docHistoryContainer .doc-history-row [style*="color:var(--ink3"],
body:not(.theme-light) #docHistoryContainer .doc-history-row [style*="color: var(--ink3"],
body:not(.theme-light) #docHistoryContainer .doc-history-row > div > div:last-child,
body:not(.theme-light) #docHistoryContainer .doc-history-meta {
  color: rgba(255,255,255,.68) !important;
  -webkit-text-fill-color: rgba(255,255,255,.68) !important;
  opacity: 1 !important;
}

body:not(.theme-light) #docHistoryContainer .doc-history-download-btn {
  -webkit-appearance: none !important;
  appearance: none !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  border: 1px solid rgba(255,255,255,.72) !important;
  background: transparent !important;
  opacity: 1 !important;
}

/* Light theme */
body.theme-light #docHistoryContainer .doc-history-row > div > div:first-child,
body.theme-light #docHistoryContainer .doc-history-title {
  color: var(--ink) !important;
  -webkit-text-fill-color: var(--ink) !important;
}

body.theme-light #docHistoryContainer .doc-history-row > div > div:last-child,
body.theme-light #docHistoryContainer .doc-history-meta {
  color: var(--ink3) !important;
  -webkit-text-fill-color: var(--ink3) !important;
}

body.theme-light #docHistoryContainer .doc-history-download-btn {
  -webkit-appearance: none !important;
  appearance: none !important;
  color: var(--ink) !important;
  -webkit-text-fill-color: var(--ink) !important;
  border-color: rgba(13,27,42,.25) !important;
}



/* ID card back field full-width helper */
.idcard-back-field.span-2 {
  grid-column: 1 / -1;
}

/* ID card front identity fields */
.idcard-field-span-2 { grid-column: 1 / -1; }
.idcard-front-id-val { letter-spacing: 1.4px; font-weight: 700; }

.idcard-back-id-val{font-size:11.5px;font-weight:700;color:#0D1B2A;letter-spacing:1px;font-family:monospace;text-transform:none}
.idcard-website{font-size:6.5px;color:#7A8599;line-height:1.4;font-weight:600;margin-top:2px}

/* ══════════════════════════════════════════════════════════════
   MARK BOOK — Course-first IS-style view
   Groups assessment records by course and keeps the first course expanded.
   ══════════════════════════════════════════════════════════════ */
.mb-is-list {
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.15);
  overflow: hidden;
  border-radius: 2px;
}
.mb-is-course { border-bottom: 1px solid rgba(255,255,255,.14); }
.mb-is-course:last-child { border-bottom: 0; }
.mb-is-course-head {
  width: 100%; border: 0; background: rgba(255,255,255,.035); color: inherit;
  display: grid; grid-template-columns: minmax(0,1fr) auto 22px;
  gap: 14px; align-items: center; padding: 14px 18px; text-align: left;
  cursor: pointer; font-family: inherit;
}
.mb-is-course-head:hover { background: rgba(255,255,255,.055); }
.mb-is-course-head:focus-visible { outline: 2px solid rgba(120,128,140,.35); outline-offset: -2px; }
.mb-is-course-title { font-size: 14px; color: rgba(255,255,255,.82); line-height: 1.4; }
.mb-is-course-title strong { font-weight: 700; }
.mb-is-course-modified,
.mb-is-entry-meta {
  font-size: 11px; color: rgba(255,255,255,.38); line-height: 1.55;
  text-align: right; white-space: nowrap;
}
.mb-is-chevron { font-size: 16px; color: rgba(255,255,255,.45); transition: transform .18s; }
.mb-is-course:not(.is-open) .mb-is-chevron { transform: rotate(180deg); }
.mb-is-course-body { background: rgba(0,0,0,.18); padding: 0 18px 18px 26px; }
.mb-is-entry {
  display: grid; grid-template-columns: minmax(170px,27%) minmax(0,1fr) minmax(145px,20%);
  gap: 28px; padding: 17px 14px; border-bottom: 1px solid rgba(255,255,255,.07);
  align-items: start;
}
.mb-is-entry:last-child { border-bottom: 0; }
.mb-is-entry-label { font-size: 13px; font-weight: 600; color: rgba(255,255,255,.82); }
.mb-is-entry-value {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 14px; color: rgba(255,255,255,.86);
}
.mb-is-entry-sub { margin-top: 4px; font-size: 11px; color: rgba(255,255,255,.38); }
.mb-is-entry-notes {
  margin-top: 9px; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 12.5px; line-height: 1.55; color: rgba(255,255,255,.72);
  white-space: normal; overflow-wrap: anywhere;
}
.mb-is-empty {
  border: 1px solid rgba(255,255,255,.09); padding: 34px; text-align: center;
  color: rgba(255,255,255,.34); font-size: 13px; background: rgba(255,255,255,.02);
}
body.theme-light .mb-is-list { border-color: var(--line); background: #fff; }
body.theme-light .mb-is-course { border-color: var(--line); }
body.theme-light .mb-is-course-head { background: #fafafa; }
body.theme-light .mb-is-course-head:hover { background: #f5f5f5; }
body.theme-light .mb-is-course-title { color: var(--ink); }
body.theme-light .mb-is-course-modified,
body.theme-light .mb-is-entry-meta { color: var(--ink3); }
body.theme-light .mb-is-chevron { color: var(--ink3); }
body.theme-light .mb-is-course-body { background: #fff; }
body.theme-light .mb-is-entry { border-color: var(--line); }
body.theme-light .mb-is-entry-label,
body.theme-light .mb-is-entry-value { color: var(--ink); }
body.theme-light .mb-is-entry-sub { color: var(--ink3); }
body.theme-light .mb-is-entry-notes { color: var(--ink2); }
body.theme-light .mb-is-empty { background: #fff; border-color: var(--line); color: var(--ink3); }
@media (max-width: 720px) {
  .mb-is-course-head { grid-template-columns: minmax(0,1fr) 18px; padding: 12px; }
  .mb-is-course-modified { display: none; }
  .mb-is-entry { grid-template-columns: 1fr; gap: 6px; padding: 14px 4px; }
  .mb-is-entry-meta { text-align: left; white-space: normal; margin-top: 4px; }
  .mb-is-course-body { padding: 0 14px 14px; }
}