/* =====================  STUDENT DASHBOARD · GLASSMORPHISM + DARK / LIGHT  =====================
   Loaded after style.css / mobile.css. Everything is scoped to body.dash-mode so the landing page,
   exam page and admin pages are untouched. Theme = html[data-theme="light" | "dark"] (set by dash-glass.js). */

/* ---------- theme tokens ---------- */
body.dash-mode { color-scheme:light; }
html[data-theme="dark"] body.dash-mode { color-scheme:dark; }

body.dash-mode {
  --g-ink:#0f1f2e; --g-sub:#475569; --g-mute:#7b8a9c;
  --g-card:rgba(255,255,255,.55); --g-card-hi:rgba(255,255,255,.78); --g-input:rgba(255,255,255,.7);
  --g-border:rgba(255,255,255,.75); --g-line:rgba(15,31,46,.09);
  --g-shadow:0 8px 32px rgba(31,45,90,.10), inset 0 1px 0 rgba(255,255,255,.7);
  --g-accent:#4f46e5; --g-accent-2:#0ea5e9; --g-violet:#7c3aed; --g-accent-soft:rgba(79,70,229,.12); --g-brand:linear-gradient(135deg,#7c3aed 0%,#2563eb 55%,#0ea5e9 100%); --g-side-solid:#eef1fc;
  --g-good:#0f9d75; --g-mid:#e8a317; --g-weak:#e5484d;
  --g-blur:blur(18px) saturate(165%);
  --g-bg:linear-gradient(135deg,#e7ecfd 0%,#eaf3fd 48%,#f1eafd 100%);
  --g-blob-1:rgba(124,58,237,.30); --g-blob-2:rgba(37,99,235,.28); --g-blob-3:rgba(14,165,233,.28);
  --g-side:rgba(255,255,255,.62);
  --sb-w:250px;
}
html[data-theme="dark"] body.dash-mode {
  --g-ink:#e8edf6; --g-sub:#aab6c9; --g-mute:#76869c;
  --g-card:rgba(255,255,255,.06); --g-card-hi:rgba(255,255,255,.11); --g-input:rgba(255,255,255,.08);
  --g-border:rgba(255,255,255,.12); --g-line:rgba(255,255,255,.09);
  --g-shadow:0 10px 36px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.08);
  --g-accent:#8b93ff; --g-accent-2:#38bdf8; --g-violet:#a78bfa; --g-accent-soft:rgba(129,140,248,.18); --g-side-solid:#0c1224;
  --g-good:#34d399; --g-mid:#fbbf24; --g-weak:#fb7185;
  --g-bg:linear-gradient(135deg,#090d1c 0%,#0c1426 50%,#120f26 100%);
  --g-blob-1:rgba(124,58,237,.34); --g-blob-2:rgba(37,99,235,.30); --g-blob-3:rgba(14,165,233,.22);
  --g-side:rgba(10,15,30,.62);
}

/* map the old dashboard variables (charts, bars, cards) onto the theme so they follow it automatically */
body.dash-mode {
  --d-ink:var(--g-ink); --d-sub:var(--g-sub); --d-mute:var(--g-mute); --d-line:var(--g-line); --d-edge:var(--g-line);
  --d-teal:var(--g-accent); --d-teal-dk:var(--g-accent); --d-mint:var(--g-accent-soft);
  --d-good:var(--g-good); --d-mid:var(--g-mid); --d-weak:var(--g-weak); --d-blue:var(--g-accent-2);
  --d-bg:transparent; --d-glass:var(--g-card); --d-glass-hi:var(--g-card-hi); --d-shadow:var(--g-shadow);
  background:var(--g-bg); background-attachment:fixed; color:var(--g-ink);
}
body.dash-mode::before, body.dash-mode::after { display:block; content:""; position:fixed; z-index:-1; border-radius:50%; filter:blur(70px); pointer-events:none; }
body.dash-mode::before { width:520px; height:520px; top:-160px; left:8%; background:radial-gradient(circle,var(--g-blob-1),transparent 68%); }
body.dash-mode::after { width:560px; height:560px; bottom:-200px; right:-80px; background:radial-gradient(circle,var(--g-blob-2),transparent 68%); }
body.dash-mode .wrap::before { content:""; position:fixed; z-index:-1; width:420px; height:420px; top:38%; left:42%; border-radius:50%; filter:blur(80px); background:radial-gradient(circle,var(--g-blob-3),transparent 70%); pointer-events:none; }

/* ---------- glass surfaces ---------- */
body.dash-mode .card,
body.dash-mode .dash-stat,
body.dash-mode .gl-card {
  background:var(--g-card); border:1px solid var(--g-border); box-shadow:var(--g-shadow);
  -webkit-backdrop-filter:var(--g-blur); backdrop-filter:var(--g-blur); color:var(--g-ink);
}
body.dash-mode .card { border-radius:18px; }
body.dash-mode .muted, body.dash-mode .dch-sub { color:var(--g-mute); }
body.dash-mode h1, body.dash-mode h2, body.dash-mode h3, body.dash-mode h4 { color:var(--g-ink); }
body.dash-mode .btn.secondary, body.dash-mode .chip { background:var(--g-card-hi); border-color:var(--g-border); color:var(--g-ink); -webkit-backdrop-filter:var(--g-blur); backdrop-filter:var(--g-blur); }
body.dash-mode .btn:not(.secondary):not(.danger) { background:var(--g-brand); color:#fff; box-shadow:0 6px 18px rgba(79,70,229,.35); }
body.dash-mode .chip.active { background:var(--g-accent); border-color:var(--g-accent); color:#fff; }
body.dash-mode input:not([type=checkbox]):not([type=radio]):not([type=file]), body.dash-mode select, body.dash-mode textarea, body.dash-mode .input {
  background:var(--g-input); border-color:var(--g-line); color:var(--g-ink); }
body.dash-mode ::placeholder { color:var(--g-mute); }
body.dash-mode .sk { background:linear-gradient(90deg,var(--g-card) 25%,var(--g-card-hi) 50%,var(--g-card) 75%); background-size:200% 100%; }
body.dash-mode .tb-track, body.dash-mode .dn-track { background:var(--g-line); stroke:var(--g-line); }
body.dash-mode .tc-grid i { border-top-color:var(--g-line); }
body.dash-mode .ex-meta span { background:var(--g-card-hi); color:var(--g-sub); }
body.dash-mode .ex-card { background:var(--g-card-hi); border-color:var(--g-line); }
body.dash-mode .ex-card.st-in_progress { background:color-mix(in srgb,var(--g-mid) 14%,var(--g-card-hi)); }
body.dash-mode .tc-dots i { background:var(--g-card-hi); }

/* ---------- layout (desktop): icon rail that expands on hover + glass top bar ---------- */
@media (min-width:901px) {
  body.dash-mode { --sb-w:76px; --sb-open:252px; }
  body.dash-mode .wrap { max-width:none; margin:0 0 0 var(--sb-w); padding:0 1.6rem; }
  body.dash-mode #view-dashboard { display:block; padding-bottom:2.5rem; max-width:1180px; margin:0 auto; }
  body.dash-mode #view-dashboard > .dash-pane, body.dash-mode #view-dashboard > .dash-head { grid-column:auto; grid-row:auto; }

  body.dash-mode .navbar {
    position:sticky; top:0; z-index:60; margin-left:var(--sb-w); height:62px; padding:0 1.6rem; gap:.4rem;
    background:var(--g-side); -webkit-backdrop-filter:var(--g-blur); backdrop-filter:var(--g-blur);
    border-bottom:1px solid var(--g-border); box-shadow:none;
  }
  body.dash-mode .navbar .brand { display:none; }
  body.dash-mode .navbar #navHomeBtn, body.dash-mode .navbar #navDashboardBtn { display:none; }

  body.dash-mode #view-dashboard > .dash-tabs, body.dash-mode .dash-tabs {
    position:fixed; z-index:80; top:0; left:0; bottom:0; width:var(--sb-w); margin:0; padding:0 .8rem .7rem;
    display:flex; flex-direction:column; gap:.14rem; overflow-y:auto; overflow-x:hidden; border-radius:0; border:0; height:auto; grid-column:auto; grid-row:auto;
    border-right:1px solid var(--g-border); background:var(--g-side); box-shadow:none;
    -webkit-backdrop-filter:var(--g-blur); backdrop-filter:var(--g-blur); scrollbar-width:none; transition:width .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s;
  }
  body.dash-mode .dash-tabs::-webkit-scrollbar { display:none; }
  body.dash-mode .dash-tabs:hover, body.dash-mode .dash-tabs:focus-within { width:var(--sb-open); box-shadow:18px 0 50px rgba(10,20,50,.22); }
  /* collapsed: icons only */
  body.dash-mode #dashTabs .dash-tab { flex:0 0 auto; width:100%; justify-content:flex-start; padding:.6rem .8rem; gap:.9rem; position:relative; white-space:nowrap; border-radius:13px; }
  body.dash-mode #dashTabs .dash-tab > span:not(.tab-badge), .gl-lbl, body.dash-mode #dashTabs .dt-label { opacity:0; transition:opacity .15s; }
  body.dash-mode .dash-tabs:hover .dash-tab > span:not(.tab-badge), body.dash-mode .dash-tabs:focus-within .dash-tab > span:not(.tab-badge),
  body.dash-mode .dash-tabs:hover .gl-lbl, body.dash-mode .dash-tabs:focus-within .gl-lbl, body.dash-mode .dash-tabs:hover .dt-label, body.dash-mode .dash-tabs:focus-within .dt-label { opacity:1; transition-delay:.06s; }
  body.dash-mode #dashTabs .dash-tab .ic { width:20px; height:20px; }
  body.dash-mode #dashTabs .dash-tab .tab-badge { position:absolute; top:5px; left:28px; min-width:16px; height:16px; font-size:.62rem; margin:0; }
  body.dash-mode .dash-tabs:hover .tab-badge, body.dash-mode .dash-tabs:focus-within .tab-badge { position:static; margin-left:auto; min-width:1.35rem; height:1.35rem; font-size:.74rem; }
  body.dash-mode #dashTabs .dt-label { height:1.2rem; padding:.7rem .5rem .1rem; margin-top:.25rem; overflow:hidden; }
  body.dash-mode .dash-tab.active::before { left:-.8rem; }
}
/* brand header + user card injected into the sidebar */
.gl-brand { display:flex; align-items:center; gap:.7rem; padding:1rem .35rem .8rem; margin:0 -.1rem .3rem; position:sticky; top:0; z-index:2; white-space:nowrap; overflow:hidden;
  background:linear-gradient(var(--g-side) 78%,transparent); cursor:pointer; }
.gl-brand img { flex:none; width:36px; height:36px; border-radius:10px; object-fit:contain; }
.gl-brand b { font:800 1.05rem/1.1 "Plus Jakarta Sans","Anek Bangla",sans-serif; color:var(--g-ink); letter-spacing:-.01em; }
.gl-brand small { display:block; font-weight:600; font-size:.64rem; letter-spacing:.08em; text-transform:uppercase; color:var(--g-accent); margin-top:2px; }
.gl-user { margin-top:auto; position:sticky; bottom:0; padding-top:.7rem; background:linear-gradient(transparent,var(--g-side) 22%); }
.gl-user-in { display:flex; align-items:center; gap:.65rem; padding:.45rem; border-radius:14px; background:var(--g-card-hi); border:1px solid var(--g-border); overflow:hidden; white-space:nowrap; }
.gl-av { flex:none; width:36px; height:36px; border-radius:50%; display:grid; place-items:center; font-weight:800; color:#fff; background:var(--g-brand); }
.gl-user-in > div { min-width:0; flex:1; }
.gl-user-in b { display:block; font-size:.85rem; color:var(--g-ink); overflow:hidden; text-overflow:ellipsis; }
.gl-user-in small { color:var(--g-mute); font-size:.72rem; }
.gl-user-in button { flex:none; border:0; background:transparent; color:var(--g-mute); cursor:pointer; padding:.35rem; border-radius:8px; display:grid; place-items:center; opacity:0; transition:opacity .15s; }
.dash-tabs:hover .gl-user-in button, .dash-tabs:focus-within .gl-user-in button { opacity:1; }
.gl-user-in button:hover { background:var(--g-accent-soft); color:var(--g-accent); }

body.dash-mode .dt-label { display:flex; align-items:center; justify-content:space-between; cursor:pointer; user-select:none; color:var(--g-mute); font-size:.66rem; }
body.dash-mode .dt-label::after { content:""; width:6px; height:6px; border-right:1.8px solid currentColor; border-bottom:1.8px solid currentColor; transform:rotate(45deg); transition:transform .18s; margin-right:.2rem; }
body.dash-mode .dt-label.gl-collapsed::after { transform:rotate(-45deg); }
body.dash-mode .dt-label:hover { color:var(--g-accent); }
body.dash-mode .dash-tab.gl-fold { display:none !important; }
body.dash-mode .dash-tab { color:var(--g-sub); }
body.dash-mode .dash-tab:hover { background:var(--g-card-hi); color:var(--g-ink); }
body.dash-mode .dash-tab.active { background:var(--g-accent-soft); color:var(--g-accent); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--g-accent) 26%,transparent); }
body.dash-mode .dash-tab.active .ic { stroke:var(--g-accent); }
body.dash-mode .dash-tab.active::before { background:var(--g-accent); }
body.dash-mode .tab-badge { background:var(--g-weak); color:#fff; }
body.dash-mode .dash-tab.active .tab-badge { background:var(--g-accent); color:#fff; }

/* ---------- top bar widgets ---------- */
.gl-tools { display:none; align-items:center; gap:.45rem; margin-right:.6rem; }
body.dash-mode .gl-tools { display:flex; }
.gl-title { display:none; font:800 1.05rem/1 "Plus Jakarta Sans","Anek Bangla",sans-serif; color:var(--g-ink); margin-right:auto; }
@media (min-width:901px) { body.dash-mode .gl-title { display:block; } }
.gl-ibtn { position:relative; width:36px; height:36px; display:grid; place-items:center; border-radius:11px; cursor:pointer; color:var(--g-sub);
  background:var(--g-card-hi); border:1px solid var(--g-border); transition:.15s; -webkit-backdrop-filter:var(--g-blur); backdrop-filter:var(--g-blur); }
.gl-ibtn:hover { color:var(--g-accent); transform:translateY(-1px); }
.gl-ibtn svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.gl-ibtn .gl-dot { position:absolute; top:-4px; right:-4px; min-width:16px; height:16px; padding:0 4px; border-radius:99px; background:var(--g-weak); color:#fff; font:700 .62rem/16px sans-serif; text-align:center; }
.gl-xp { display:inline-flex; align-items:center; gap:.3rem; padding:.3rem .7rem; border-radius:99px; font:800 .78rem "Plus Jakarta Sans",sans-serif; color:#b45309;
  background:rgba(251,191,36,.2); border:1px solid rgba(251,191,36,.45); }
html[data-theme="dark"] .gl-xp { color:#fcd34d; }
.gl-theme .sun { display:none; } html[data-theme="dark"] .gl-theme .sun { display:block; } html[data-theme="dark"] .gl-theme .moon { display:none; }
.gl-pop { position:absolute; top:46px; right:0; width:310px; max-height:60vh; overflow:auto; z-index:90; padding:.5rem; border-radius:16px;
  background:var(--g-side); border:1px solid var(--g-border); box-shadow:0 20px 50px rgba(0,0,0,.25); -webkit-backdrop-filter:var(--g-blur); backdrop-filter:var(--g-blur); }
.gl-pop h5 { margin:.4rem .6rem; font-size:.74rem; letter-spacing:.06em; text-transform:uppercase; color:var(--g-mute); }
.gl-pop button { display:flex; width:100%; align-items:center; gap:.6rem; text-align:left; border:0; background:transparent; color:var(--g-ink); padding:.55rem .6rem; border-radius:10px; cursor:pointer; font:600 .86rem "Hind Siliguri",sans-serif; }
.gl-pop button:hover, .gl-pop button.on { background:var(--g-accent-soft); }
.gl-pop small { display:block; color:var(--g-mute); font-weight:500; }
.gl-pop .gl-empty { padding:.8rem; color:var(--g-mute); font-size:.85rem; text-align:center; }
.gl-tool-wrap { position:relative; }
.gl-search { position:fixed; inset:0; z-index:2000; display:none; align-items:flex-start; justify-content:center; padding-top:14vh; background:rgba(5,10,25,.45); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.gl-search.open { display:flex; }
.gl-search-box { width:min(560px,92vw); padding:.6rem; border-radius:20px; background:var(--g-side); border:1px solid var(--g-border); box-shadow:0 30px 80px rgba(0,0,0,.4); -webkit-backdrop-filter:var(--g-blur); backdrop-filter:var(--g-blur); }
.gl-search-box input { width:100%; padding:.85rem 1rem; font-size:1rem; border-radius:12px; border:1px solid var(--g-line); background:var(--g-input); color:var(--g-ink); outline:none; }
.gl-search-list { max-height:48vh; overflow:auto; margin-top:.4rem; }
.gl-search-list button { display:flex; align-items:center; gap:.7rem; width:100%; border:0; background:transparent; color:var(--g-ink); padding:.65rem .75rem; border-radius:10px; cursor:pointer; font:600 .92rem "Hind Siliguri",sans-serif; text-align:left; }
.gl-search-list button:hover, .gl-search-list button.on { background:var(--g-accent-soft); }
.gl-search-list .ic { color:var(--g-accent); }

.gl-searchpill { display:flex; align-items:center; gap:.5rem; width:230px; height:36px; padding:0 .7rem; border-radius:99px; cursor:pointer; color:var(--g-mute); font:500 .84rem "Hind Siliguri",sans-serif;
  background:var(--g-input); border:1px solid var(--g-border); -webkit-backdrop-filter:var(--g-blur); backdrop-filter:var(--g-blur); }
.gl-searchpill:hover { border-color:var(--g-accent); } .gl-searchpill svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }
.gl-searchpill span { flex:1; text-align:left; } .gl-searchpill kbd { font:700 .68rem monospace; padding:1px 6px; border-radius:6px; border:1px solid var(--g-line); color:var(--g-sub); }
@media (max-width:900px) { .gl-searchpill { width:36px; padding:0; justify-content:center; } .gl-searchpill span, .gl-searchpill kbd { display:none; } }
/* profile menu in the top bar */
body.dash-mode .prof-btn { background:var(--g-card-hi); border-color:var(--g-border); color:var(--g-ink); }
body.dash-mode .prof-pop { background:var(--g-side); border:1px solid var(--g-border); -webkit-backdrop-filter:var(--g-blur); backdrop-filter:var(--g-blur); color:var(--g-ink); }
body.dash-mode .prof-item { color:var(--g-ink); } body.dash-mode .prof-item:hover { background:var(--g-accent-soft); }
body.dash-mode .prof-head b { color:var(--g-ink); } body.dash-mode .prof-sep { background:var(--g-line); }

/* ---------- greeting header ---------- */
body.dash-mode .dash-head { margin:1.3rem 0 .9rem; }
body.dash-mode .dash-head h1 { color:var(--g-ink); }
body.dash-mode .dh-eyebrow { color:var(--g-accent); }
body.dash-mode .dash-stats { display:none; }          /* replaced by the study-stats block below */

/* ---------- new overview widgets (bento layout) ---------- */
#glOverview { margin-bottom:1rem; }
.gl-bento { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:1rem; }
.gl-card { border-radius:20px; padding:1.1rem 1.2rem; min-width:0; }
.gl-card h4 { margin:0; font:700 .98rem/1.3 "Plus Jakarta Sans","Anek Bangla",sans-serif; }
.gl-card .gl-sub { margin:.1rem 0 0; font-size:.76rem; color:var(--g-mute); }
.gl-statshead { display:flex; align-items:flex-start; justify-content:space-between; gap:.6rem; margin-bottom:.8rem; }

.gl-hero { grid-column:span 8; position:relative; overflow:hidden; padding:1.6rem 1.7rem; display:flex; flex-direction:column; gap:.6rem;
  background:linear-gradient(135deg,color-mix(in srgb,var(--g-accent) 22%,var(--g-card-hi)),var(--g-card) 70%); }
.gl-hero::after { content:""; position:absolute; right:-70px; top:-70px; width:260px; height:260px; border-radius:50%; background:radial-gradient(circle,color-mix(in srgb,var(--g-accent-2) 40%,transparent),transparent 70%); pointer-events:none; }
.gl-eyebrow { font:700 .72rem "Plus Jakarta Sans",sans-serif; letter-spacing:.08em; text-transform:uppercase; color:var(--g-accent); }
.gl-hero h2 { margin:0; font:800 clamp(1.5rem,3vw,2.1rem)/1.15 "Plus Jakarta Sans",sans-serif; letter-spacing:-.02em; }
.gl-hero p { margin:0; max-width:46ch; color:var(--g-sub); font-size:.98rem; line-height:1.5; }
.gl-hero-cta { display:flex; gap:.6rem; flex-wrap:wrap; margin:.3rem 0 .4rem; position:relative; z-index:1; }
.gl-chips { display:flex; gap:.45rem; flex-wrap:wrap; position:relative; z-index:1; margin-top:auto; }
.gl-chips button { display:inline-flex; align-items:center; gap:.4rem; padding:.42rem .8rem; border-radius:99px; border:1px solid var(--g-border); background:var(--g-card-hi); color:var(--g-ink); cursor:pointer; font:600 .78rem "Hind Siliguri",sans-serif; transition:.15s; }
.gl-chips button:hover { border-color:var(--g-accent); color:var(--g-accent); transform:translateY(-1px); }
.gl-chips .ic { width:15px; height:15px; color:var(--g-accent); }

.gl-level { grid-column:span 4; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.5rem; text-align:center; }
.dn-ring.lv { width:116px; height:116px; }
.gl-level-t b { display:block; font:800 1.25rem "Plus Jakarta Sans",sans-serif; } .gl-level-t small { color:var(--g-mute); font-size:.78rem; }
.gl-streak { display:flex; align-items:center; gap:.6rem; padding:.45rem .9rem; border-radius:14px; background:linear-gradient(135deg,rgba(251,146,60,.22),rgba(251,191,36,.12)); border:1px solid rgba(251,146,60,.35); }
.gl-flame { font-size:1.5rem; filter:drop-shadow(0 3px 8px rgba(249,115,22,.5)); } .gl-streak.off .gl-flame { filter:grayscale(1) opacity(.55); }
.gl-streak div { text-align:left; } .gl-streak b { font:800 1.15rem/1 "Plus Jakarta Sans",sans-serif; display:block; } .gl-streak small { color:var(--g-sub); font-size:.72rem; }
.gl-week { display:flex; gap:4px; width:100%; max-width:200px; } .gl-week i { flex:1; height:6px; border-radius:99px; background:var(--g-line); } .gl-week i.on { background:#f97316; }

.gl-kpis { grid-column:span 12; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem; }
.gl-kpi { display:flex; align-items:center; gap:.9rem; padding:.95rem 1.1rem; }
.gl-kpi i { flex:none; width:44px; height:44px; border-radius:14px; display:grid; place-items:center; font-style:normal; }
.gl-kpi i .ic { width:21px; height:21px; }
.gl-kpi.k1 i { background:rgba(124,58,237,.16); color:#7c3aed; } .gl-kpi.k2 i { background:rgba(14,165,233,.16); color:#0ea5e9; }
.gl-kpi.k3 i { background:rgba(245,158,11,.18); color:#f59e0b; } .gl-kpi.k4 i { background:rgba(168,85,247,.16); color:#a855f7; }
.gl-kpi b { display:block; font:800 1.5rem/1.1 "Plus Jakarta Sans",sans-serif; } .gl-kpi small { color:var(--g-mute); font-size:.76rem; }

.gl-chart { grid-column:span 7; } .gl-acc { grid-column:span 5; display:flex; flex-direction:column; align-items:center; gap:.7rem; } .gl-acc h4 { align-self:flex-start; }
.gl-acc .dn-ring { width:130px; height:130px; }
.gl-leg { display:flex; gap:.8rem; font-size:.74rem; color:var(--g-sub); flex-wrap:wrap; justify-content:center; } .gl-leg i { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:4px; }
.gl-range { display:inline-flex; padding:3px; border-radius:99px; background:var(--g-card-hi); border:1px solid var(--g-border); }
.gl-range button { border:0; background:transparent; color:var(--g-sub); cursor:pointer; padding:.25rem .7rem; border-radius:99px; font:700 .72rem sans-serif; }
.gl-range button.on { background:var(--g-brand); color:#fff; } 
.gl-bars { display:flex; align-items:flex-end; gap:3px; height:150px; border-bottom:1px solid var(--g-line); }
.gl-bars span { flex:1; min-width:2px; border-radius:6px 6px 0 0; background:linear-gradient(180deg,var(--g-accent-2),var(--g-accent) 70%,var(--g-violet)); transition:height .4s; position:relative; }
.gl-bars span.z { background:var(--g-line); height:3px !important; }
.gl-bars span:hover::after { content:attr(data-t); position:absolute; bottom:calc(100% + 4px); left:50%; transform:translateX(-50%); white-space:nowrap; font:700 .66rem sans-serif; padding:2px 6px; border-radius:6px; background:var(--g-ink); color:var(--g-side); z-index:3; }
.gl-axis { display:flex; justify-content:space-between; font-size:.68rem; color:var(--g-mute); margin-top:.3rem; }

.gl-missions { grid-column:span 5; } .gl-skills { grid-column:span 7; } .gl-time { grid-column:span 5; } .gl-ach { grid-column:span 7; }
.gl-ms { display:flex; align-items:center; gap:.7rem; padding:.65rem 0; border-top:1px solid var(--g-line); } .gl-ms:first-of-type { border-top:0; }
.gl-chk { flex:none; width:24px; height:24px; border-radius:50%; border:2px solid var(--g-line); display:grid; place-items:center; font-size:.8rem; font-weight:800; color:#fff; } .gl-ms.done .gl-chk { background:var(--g-good); border-color:var(--g-good); }
.gl-ms-b { flex:1; min-width:0; } .gl-ms b { font-size:.86rem; display:block; } .gl-ms small { color:var(--g-mute); font-size:.72rem; }
.gl-bar { height:6px; border-radius:99px; background:var(--g-line); margin:.4rem 0 .3rem; overflow:hidden; } .gl-bar i { display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,var(--g-violet),var(--g-accent-2)); transition:width .5s; }
.gl-ms.done .gl-bar i { background:var(--g-good); }
.gl-link { border:0; background:none; color:var(--g-accent); cursor:pointer; font:700 .78rem sans-serif; white-space:nowrap; }

.gl-sj-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.7rem; }
.gl-sj { padding:.7rem .8rem; border-radius:14px; background:var(--g-card-hi); border:1px solid var(--g-line); }
.gl-sj-t { display:flex; justify-content:space-between; gap:.5rem; font-weight:600; font-size:.88rem; } .gl-sj-t span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gl-sj-t b { font:800 .85rem "Plus Jakarta Sans",sans-serif; } .gl-sj.good b { color:var(--g-good); } .gl-sj.mid b { color:var(--g-mid); } .gl-sj.weak b { color:var(--g-weak); }
.gl-sj.weak .gl-bar i { background:var(--g-weak); } .gl-sj.mid .gl-bar i { background:var(--g-mid); } .gl-sj small { color:var(--g-mute); font-size:.7rem; }
.gl-sj-grid .gl-empty-s { grid-column:1 / -1; }

.gl-tl { list-style:none; margin:0; padding:0 0 0 .3rem; position:relative; display:flex; flex-direction:column; gap:.2rem; }
.gl-tl::before { content:""; position:absolute; left:.72rem; top:.6rem; bottom:.6rem; width:2px; background:var(--g-line); }
.gl-tl li { display:flex; align-items:center; gap:.8rem; padding:.5rem 0; position:relative; }
.gl-tl li > i { flex:none; width:14px; height:14px; border-radius:50%; background:var(--g-accent); border:3px solid var(--g-side); box-shadow:0 0 0 2px var(--g-accent); z-index:1; } .gl-tl li > i.practice { background:#a855f7; box-shadow:0 0 0 2px #a855f7; }
.gl-tl div { flex:1; min-width:0; } .gl-tl b { display:block; font-size:.86rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .gl-tl small { color:var(--g-mute); font-size:.72rem; }
.gl-xpchip { font:800 .7rem "Plus Jakarta Sans",sans-serif; padding:3px 9px; border-radius:99px; background:rgba(16,185,129,.16); color:var(--g-good); white-space:nowrap; }
.gl-empty-s { text-align:center; padding:1.2rem .5rem; font-size:.85rem; color:var(--g-mute); }

.gl-badges { display:grid; grid-template-columns:repeat(auto-fill,minmax(92px,1fr)); gap:.7rem; }
.gl-badge { display:flex; flex-direction:column; align-items:center; gap:.3rem; font-size:.72rem; font-weight:700; color:var(--g-sub); text-align:center; }
.gl-badge i { font-style:normal; font-size:1.6rem; width:52px; height:52px; display:grid; place-items:center; border-radius:18px; background:var(--g-accent-soft); border:1px solid var(--g-border); }
.gl-badge.lock { opacity:.42; filter:grayscale(1); }
.gl-league { display:flex; justify-content:space-between; align-items:center; gap:.8rem; margin-top:1rem; padding:.7rem .9rem; border-radius:14px; background:var(--g-card-hi); border:1px dashed var(--g-line); font-size:.82rem; color:var(--g-sub); }
.gl-sechead { display:flex; justify-content:space-between; align-items:center; margin:1.4rem .2rem .8rem; font:700 .78rem "Plus Jakarta Sans",sans-serif; letter-spacing:.06em; text-transform:uppercase; color:var(--g-mute); }

/* ---------- legacy panes in dark mode (their own CSS is light-only, so the content is inverted; images stay natural) ---------- */
html[data-theme="dark"] body.dash-mode .dash-pane:not([data-pane="overview"]) .card > :not(.dash-card-head) { filter:invert(.92) hue-rotate(180deg); }
html[data-theme="dark"] body.dash-mode .dash-pane:not([data-pane="overview"]) .card > :not(.dash-card-head) :is(img,video,canvas,iframe,picture) { filter:invert(1) hue-rotate(180deg); }
/* inside the inverted subtree the LIGHT token values are restored, so that the inversion turns them into the right dark look */
html[data-theme="dark"] body.dash-mode .dash-pane:not([data-pane="overview"]) .card > :not(.dash-card-head) {
  color-scheme:dark;
  --g-ink:#0f1f2e; --g-sub:#475569; --g-mute:#7b8a9c; --g-card:#fff; --g-card-hi:#fff; --g-input:#fff; --g-line:rgba(15,31,46,.09); --g-border:#e5e9f0;
  --g-accent:#4f46e5; --g-accent-soft:rgba(79,70,229,.12); --g-accent-2:#0ea5e9; --g-good:#0f9d75; --g-mid:#e8a317; --g-weak:#e5484d; --g-side:#fff;
  --d-ink:#0f1f2e; --d-sub:#5b6b7b; --d-mute:#8896a6; --d-line:#e5e9f0; --d-edge:#e5e9f0; --d-teal:#4f46e5; --d-teal-dk:#4338ca; --d-mint:rgba(79,70,229,.08);
  --d-good:#0f9d75; --d-mid:#e8a317; --d-weak:#e5484d; --d-blue:#0ea5e9; --d-glass:#fff; --d-glass-hi:#fff;
}
/* overview legacy chart block (uses the mapped variables) */
html[data-theme="dark"] body.dash-mode .ov-grid .lg-bar, html[data-theme="dark"] body.dash-mode .ov-grid .tb-lv { filter:none; }

/* ---------- responsive ---------- */
@media (max-width:1100px) {
  .gl-hero, .gl-level, .gl-chart, .gl-acc, .gl-missions, .gl-skills, .gl-time, .gl-ach { grid-column:span 12; }
  .gl-level { flex-direction:row; flex-wrap:wrap; justify-content:space-around; }
  .gl-kpis { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:900px) {
  body.dash-mode .gl-tools { margin-left:auto; }
  body.dash-mode .navbar { background:var(--g-side); -webkit-backdrop-filter:var(--g-blur); backdrop-filter:var(--g-blur); border-bottom:1px solid var(--g-border); }
  body.dash-mode .navbar .brand { color:var(--g-ink); }
  body.dash-mode .navbar .mn-iconbtn, body.dash-mode .navbar .mn-burger { color:var(--g-ink); }
  body.has-mn.dash-mode .mn-bottom { background:var(--g-side); border-top-color:var(--g-border); }
  body.has-mn.dash-mode .mn-tab { color:var(--g-mute); } body.has-mn.dash-mode .mn-tab.on { color:var(--g-accent); } body.has-mn.dash-mode .mn-tab.on::before { background:var(--g-accent); }
  .gl-xp { display:none; }
  .gl-sj-grid { grid-template-columns:1fr; }
  .gl-pop { position:fixed; top:62px; right:10px; left:10px; width:auto; }
}
@media (max-width:560px) { .gl-hero { padding:1.2rem; } .gl-kpi b { font-size:1.25rem; } }
@media (prefers-reduced-motion:reduce) { .gl-chips button, .gl-ibtn, .gl-bar i, .gl-bars span, .dash-tabs { transition:none; } }

/* ---------- mobile app chrome (burger, cart, avatar, slide-in menu, bottom bar) follows the theme ---------- */
@media (max-width:900px) {
  body.dash-mode .navbar .mn-burger, body.dash-mode .navbar .mn-iconbtn { background:var(--g-card-hi); border-color:var(--g-border); color:var(--g-ink); box-shadow:none; }
  body.dash-mode .mn-dot { box-shadow:0 0 0 2px var(--g-side); }
  html[data-theme="dark"] .mn-drawer { background:rgba(11,16,32,.97); -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px); border-right:1px solid rgba(255,255,255,.08); }
  html[data-theme="dark"] .mn-group { color:#76869c; }
  html[data-theme="dark"] .mn-item { color:#d3dcea; }
  html[data-theme="dark"] .mn-item:hover, html[data-theme="dark"] .mn-item:focus-visible, html[data-theme="dark"] .mn-item:active { background:rgba(255,255,255,.08); }
  html[data-theme="dark"] .mn-ico { background:rgba(255,255,255,.08); color:#aab6c9; }
  html[data-theme="dark"] .mn-item.on { background:rgba(129,140,248,.18); color:#a5b0ff; }
  html[data-theme="dark"] .mn-item.on .mn-ico { background:#6366f1; color:#fff; }
  html[data-theme="dark"] .mn-sep { background:rgba(255,255,255,.09); }
  html[data-theme="dark"] .mn-cta .btn.secondary { background:rgba(255,255,255,.08); color:#e8edf6; border-color:rgba(255,255,255,.18); }
  html[data-theme="dark"] .mn-item.danger .mn-ico { background:rgba(251,113,133,.16); }
}

/* compact page header inside the dashboard: the top bar already shows the page title */
body.dash-mode .dash-head { display:flex; justify-content:flex-end; margin:.9rem 0 .2rem; }
body.dash-mode .dash-head > div:first-child { display:none; }
body.dash-mode[data-tab="overview"] .dash-head { display:none; }

/* ---------- quick links as small cards (all devices) ---------- */
.gl-chips { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.6rem; margin-top:.6rem; }
.gl-chips button { flex-direction:column; justify-content:center; gap:.45rem; padding:.8rem .4rem; border-radius:16px; text-align:center; line-height:1.2; box-shadow:var(--g-shadow); -webkit-backdrop-filter:var(--g-blur); backdrop-filter:var(--g-blur); }
.gl-chips button:hover { transform:translateY(-3px); }
.gl-chips button i { width:38px; height:38px; display:grid; place-items:center; border-radius:12px; background:var(--g-accent-soft); color:var(--g-accent); }
.gl-chips button:nth-child(3n+2) i { background:rgba(59,111,212,.15); color:var(--g-accent-2); }
.gl-chips button:nth-child(3n) i { background:rgba(168,85,247,.15); color:#a855f7; }
.gl-chips button i .ic { width:19px; height:19px; color:inherit; }
.gl-chips button span { font-size:.76rem; }
@media (max-width:560px) { .gl-chips { grid-template-columns:repeat(4,minmax(0,1fr)); gap:.45rem; } .gl-chips button { padding:.6rem .2rem; } .gl-chips button i { width:34px; height:34px; } .gl-chips button span { font-size:.66rem; } }

/* ---------- desktop sidebar: always expanded, option names always visible ---------- */
@media (min-width:901px) {
  body.dash-mode { --sb-w:250px; --sb-open:250px; }
  body.dash-mode .dash-tabs, body.dash-mode .dash-tabs:hover, body.dash-mode .dash-tabs:focus-within { width:var(--sb-w); box-shadow:none; }
  body.dash-mode #dashTabs .dash-tab > span:not(.tab-badge), body.dash-mode #dashTabs .gl-lbl, body.dash-mode #dashTabs .dt-label { opacity:1; }
  body.dash-mode #dashTabs .dash-tab { padding:.55rem .8rem; }
  body.dash-mode #dashTabs .dash-tab .tab-badge { position:static; margin-left:auto; min-width:1.35rem; height:1.35rem; font-size:.74rem; }
  body.dash-mode #dashTabs .dt-label { height:auto; padding:.85rem .6rem .3rem; overflow:visible; }
  .gl-user-in button { opacity:1; }
  body.dash-mode .dash-tab.active::before { left:-.7rem; }
}

/* ---------- sidebar brand header + user card: never squashed, never see-through ---------- */
.gl-brand { flex:none; min-height:66px; padding:1rem .45rem .8rem; background:var(--g-side-solid); overflow:visible; border-bottom:1px solid var(--g-line); margin:0 -.8rem .4rem; padding-left:1.25rem; }
.gl-brand img { background:none; }
.gl-brand > div { min-width:0; line-height:1.15; } .gl-brand b { display:block; white-space:nowrap; } .gl-brand small { display:block; margin-top:3px; line-height:1; }
.gl-user { flex:none; margin:auto -.8rem 0; padding:.7rem .8rem .8rem; background:var(--g-side-solid); border-top:1px solid var(--g-line); }
.gl-user-in { background:var(--g-card-hi); }
body.dash-mode .dash-tab.active { background:linear-gradient(135deg,rgba(124,58,237,.16),rgba(14,165,233,.14)); }
body.dash-mode .gl-hero { background:linear-gradient(135deg,color-mix(in srgb,var(--g-violet) 20%,var(--g-card-hi)),var(--g-card) 70%); }
body.dash-mode .gl-hero::after { background:radial-gradient(circle,color-mix(in srgb,var(--g-accent-2) 45%,transparent),transparent 70%); }
body.dash-mode .gl-sj.good .gl-bar i { background:var(--g-good); }

/* hero: no greeting heading — the status line leads; a little breathing room above the first row */
#glOverview { margin-top:1.1rem; }
.gl-hero p { font:700 clamp(1.05rem,1.8vw,1.3rem)/1.4 "Plus Jakarta Sans","Hind Siliguri",sans-serif; color:var(--g-ink); max-width:34ch; margin:.1rem 0 .3rem; letter-spacing:-.01em; }

/* ---------- profile picture ---------- */
.has-img { color:transparent !important; font-size:0 !important; background-size:cover !important; background-position:center !important; background-repeat:no-repeat !important; }
.acc-photo-row { display:flex; align-items:center; gap:1rem; flex-wrap:wrap; }
.acc-photo-row .btn { margin-right:.4rem; margin-bottom:.3rem; }
.acc-av.lg { width:84px; height:84px; font-size:2rem; flex:none; }
body.dash-mode .acc-av { background:var(--g-brand); color:#fff; }
.gl-user-in .gl-av { transition:transform .15s; } .gl-user-in .gl-av:hover { transform:scale(1.06); }