/* ============================================================
   TPO WEBAPP — Dr. Ramesh Menon's College Admin dashboard
   ============================================================
   Sprint: BTX-MOCKUPS-V3-WEBAPP-001 (BMW3-T11)
   Architecture: operator-desktop product. Dark sidebar (matches
   existing TPO ink palette). No mockup chrome — real bureau-feel
   webapp as if Dr. Menon logged into his TPO office console.
   Mobile-responsive but desktop-first (612-student grids).
   ============================================================ */
body{background:var(--fog);margin:0;font-family:'Inter',sans-serif;color:var(--ink);min-height:100vh}
[x-cloak]{display:none !important}
/* Brand palette inlined as a fallback so colors always render even if _shared/brand.css fails to load (cache / file:// / offline). Values mirror brand.css :root. */
:root{
  --honey:#F59E0B; --honey-d:#B45309; --honey-soft:#FCD34D; --honey-glow:#FEF3C7; --honey-cream:#FEF6E0;
  --teal:#0F766E; --teal-d:#134E4A; --teal-soft:#99F6E4; --teal-glow:#CCFBF1;
  --plum:#6B21A8; --plum-d:#581C87; --plum-soft:#C4B5FD; --plum-glow:#EDE9FE;
  --emerald:#10B981; --emerald-d:#059669; --emerald-glow:#D1FAE5;
  --rose:#E11D48; --rose-d:#9F1239; --rose-glow:#FFE4E6;
  --ink:#0B1220; --ink-2:#1E293B; --ink-3:#334155;
  --body:#475569; --mute:#64748B; --line:#E2E8F0;
  --cream:#FBF7EE; --cream-2:#F5EFE2; --mist:#F1F5F9; --fog:#F8FAFC;
}

/* ── TOPBAR (dark, operator) ────────────────────────── */
.app-topbar{position:sticky;top:0;z-index:50;background:var(--ink);color:#fff;border-bottom:1px solid #FFFFFF14;height:62px;display:flex;align-items:center;padding:0 24px;gap:16px}
.app-topbar .brand-mark{display:flex;align-items:center;gap:10px;cursor:pointer;text-decoration:none;color:inherit}
.app-topbar .hex{width:24px;height:28px;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 84 96'><polygon fill='%23F59E0B' points='42,2 80,24 80,72 42,94 4,72 4,24'/></svg>") center/contain no-repeat;flex-shrink:0}
.app-topbar .brand-name{font-family:'Inter';font-weight:800;font-size:15px;color:#fff;letter-spacing:-0.015em}
.app-topbar .brand-sub{font-family:'JetBrains Mono';font-size:10px;color:var(--honey-soft);letter-spacing:.16em;text-transform:uppercase;margin-left:8px;padding-left:8px;border-left:1px solid #FFFFFF22}
.app-topbar .spacer{flex:1}
.app-topbar .tb-search{flex:0 1 360px;display:flex;align-items:center;gap:8px;padding:7px 12px;background:#FFFFFF12;border:1px solid transparent;border-radius:8px;cursor:text;transition:.15s;font-size:12.5px;color:#FFFFFF99}
.app-topbar .tb-search:hover,.app-topbar .tb-search:focus-within{background:#FFFFFF1F;border-color:#FFFFFF22}
.app-topbar .tb-search input{flex:1;border:0;outline:0;background:transparent;font-family:'Inter';font-size:12.5px;color:#fff}
.app-topbar .tb-search input::placeholder{color:#FFFFFF88}
.app-topbar .tb-search kbd{font-family:'JetBrains Mono';font-size:10px;background:#FFFFFF22;border:1px solid #FFFFFF33;border-radius:4px;padding:1px 5px;color:#fff}
.app-topbar .tb-search-wrap{position:relative;flex:0 1 360px;display:flex}
.app-topbar .tb-search-wrap .tb-search{flex:1}
.tb-search-pop{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:300;background:#fff;border:1px solid #E5E7EB;border-radius:10px;box-shadow:0 14px 34px rgba(15,23,42,.18);padding:6px;max-height:360px;overflow:auto}
.tb-search-item{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border:0;background:transparent;border-radius:7px;cursor:pointer;text-align:left;font-family:'Inter';font-size:13px;color:#111827}
.tb-search-item:hover,.tb-search-item.active{background:#F3F4F6}
.tb-search-item .si-ic{width:18px;text-align:center;color:#6B7280;font-size:13px}
.tb-search-item .si-lbl{flex:1}
.tb-search-item .si-grp{font-size:10px;color:#9CA3AF;text-transform:uppercase;letter-spacing:.06em;font-family:'JetBrains Mono',monospace}
.tb-search-empty{padding:14px 12px;font-size:12.5px;color:#6B7280}
.app-topbar .tb-icon{position:relative;width:36px;height:36px;border-radius:8px;background:transparent;border:none;cursor:pointer;display:grid;place-items:center;font-size:16px;color:#FFFFFFC0;transition:.15s}
.app-topbar .tb-icon:hover{background:#FFFFFF14;color:#fff}
.app-topbar .tb-icon .badge{position:absolute;top:4px;right:4px;background:var(--rose);color:#fff;font-family:'JetBrains Mono';font-size:9px;font-weight:700;padding:1px 4px;border-radius:999px;min-width:16px;text-align:center;line-height:1.3}
.app-topbar .tb-user{display:flex;align-items:center;gap:10px;padding:6px 12px 6px 6px;border-radius:999px;cursor:pointer;transition:.15s}
.app-topbar .tb-user:hover{background:#FFFFFF14}
.app-topbar .tb-avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--honey),var(--honey-d));color:var(--ink);display:grid;place-items:center;font-weight:700;font-size:12.5px;letter-spacing:.02em}
.app-topbar .tb-user-info{font-size:12px;line-height:1.25;display:none}
.app-topbar .tb-user-info b{display:block;color:#fff;font-weight:600;font-size:12.5px}
.app-topbar .tb-user-info span{color:#FFFFFF88;font-size:10.5px}
@media (min-width:900px){.app-topbar .tb-user-info{display:block}}
.app-topbar .tb-user-wrap{position:relative}
.app-topbar .tb-user-menu{position:absolute;top:calc(100% + 8px);right:0;min-width:210px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 32px rgba(0,0,0,.18);padding:6px;z-index:50}
.app-topbar .tb-user-menu .um-head{padding:8px 10px 10px;border-bottom:1px solid var(--line);margin-bottom:6px}
.app-topbar .tb-user-menu .um-head b{display:block;font-size:13px;color:var(--ink);font-weight:600}
.app-topbar .tb-user-menu .um-head span{font-size:11px;color:var(--mute)}
.app-topbar .tb-user-menu button{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:9px 10px;border:none;background:transparent;border-radius:8px;cursor:pointer;font-size:13px;color:var(--ink-2);transition:.12s}
.app-topbar .tb-user-menu button:hover{background:var(--mist)}
.app-topbar .tb-user-menu button.danger{color:var(--rose-d,#c0334e)}
.app-topbar .tb-user-menu button.danger:hover{background:#fde8ec}
.app-topbar .tb-user-menu .um-sep{height:1px;background:var(--line);margin:6px 0}
@media (max-width:600px){.app-topbar{padding:0 14px;gap:8px}.app-topbar .tb-search-wrap{display:none}.app-topbar .brand-sub{display:none}}

/* ── VIEW WRAPPER ───────────────────────────────────── */
.app-main{padding:0;background:var(--fog)}
.app-view{padding:28px 32px 64px;max-width:1440px;margin:0 auto;animation:viewFadeIn .18s ease-out}
@keyframes viewFadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
.app-view-head{margin-bottom:24px;display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.app-view-head h1{font-family:'Inter';font-weight:800;font-size:28px;letter-spacing:-0.02em;color:var(--ink);margin:0 0 4px;line-height:1.2}
.app-view-head h1 .em{color:var(--honey-d);font-style:italic;font-weight:500}
.app-view-head .sub{font-size:13.5px;color:var(--mute);margin:0;line-height:1.5}
.app-view-head .crumbs{font-family:'JetBrains Mono';font-size:10.5px;color:var(--mute);letter-spacing:.06em;margin-bottom:4px}
.app-view-head .crumbs b{color:var(--ink-2)}
.head-actions{display:flex;gap:8px;flex-wrap:wrap;flex-shrink:0}
.head-actions .btn{padding:8px 14px;border-radius:8px;font-family:'Inter';font-size:12.5px;font-weight:600;background:#fff;border:1.5px solid var(--line);color:var(--ink-2);cursor:pointer;transition:.15s}
.head-actions .btn:hover{border-color:var(--ink);color:var(--ink)}
.head-actions .btn.primary{background:var(--ink);color:#fff;border-color:var(--ink)}
.head-actions .btn.primary:hover{background:var(--honey-d);border-color:var(--honey-d)}
@media (max-width:600px){.app-view{padding:18px 16px 48px}.app-view-head h1{font-size:20px}}

/* ── KPI ROW ────────────────────────────────────────── */
.kpi-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:22px}
@media (max-width:900px){.kpi-row{grid-template-columns:repeat(2,1fr)}}
@media (max-width:540px){.kpi-row{grid-template-columns:1fr}}
.kpi{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px 18px;display:flex;flex-direction:column;gap:5px;position:relative;overflow:hidden}
.kpi .lbl{font-family:'JetBrains Mono';font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);font-weight:700}
.kpi .v{font-family:'Inter';font-weight:800;font-size:28px;color:var(--ink);line-height:1;letter-spacing:-0.025em;display:flex;align-items:baseline;gap:4px}
.kpi .v .sub{font-family:'Inter';font-size:13px;font-weight:500;color:var(--mute)}
.kpi .delta{font-family:'JetBrains Mono';font-size:10.5px;font-weight:700;letter-spacing:.06em;margin-top:3px}
.kpi .delta.up{color:var(--emerald-d)}
.kpi .delta.down{color:var(--rose-d)}
.kpi .delta.neutral{color:var(--mute)}
.kpi.featured{background:var(--ink);color:#fff;border-color:var(--ink)}
.kpi.featured .lbl{color:var(--honey-soft)}
.kpi.featured .v{color:#fff}
.kpi.featured .v .sub{color:#FFFFFF88}
.kpi.honey{background:var(--honey-cream);border-color:var(--honey-glow)}
.kpi.emerald{background:var(--emerald-glow);border-color:#A7F3D0}
.kpi.rose{background:var(--rose-glow);border-color:#FECDD3}

/* ── DASH CARD ──────────────────────────────────────── */
.dash-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
.dash-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px 22px;display:flex;flex-direction:column;gap:12px}
.dash-card.span-6{grid-column:span 6}
.dash-card.span-4{grid-column:span 4}
.dash-card.span-8{grid-column:span 8}
.dash-card.span-12{grid-column:span 12}
@media (max-width:1000px){.dash-card.span-6,.dash-card.span-8,.dash-card.span-4{grid-column:span 12}}
.dash-card .ch{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.dash-card .ch h3{font-family:'Inter';font-weight:700;font-size:14.5px;color:var(--ink);margin:0;letter-spacing:-0.01em;line-height:1.25}
.dash-card .ch .hint{font-size:11.5px;color:var(--mute);margin-top:3px;line-height:1.4}
.dash-card .pill{font-family:'JetBrains Mono';font-size:9.5px;font-weight:700;padding:3px 9px;border-radius:999px;letter-spacing:.08em;text-transform:uppercase;background:var(--honey-glow);color:var(--honey-d);flex-shrink:0;white-space:nowrap}
.dash-card .pill.em{background:var(--emerald-glow);color:var(--emerald-d)}
.dash-card .pill.tl{background:var(--teal-glow);color:var(--teal-d)}
.dash-card .pill.rs{background:var(--rose-glow);color:var(--rose-d)}
.dash-card .pill.plum{background:var(--plum-glow);color:var(--plum-d)}

/* Stream readiness bars */
.stream-bars{display:flex;flex-direction:column;gap:8px}
.stream-bar{display:grid;grid-template-columns:200px 1fr 50px;align-items:center;gap:12px;font-size:12.5px}
.stream-bar .name{font-weight:600;color:var(--ink-2);font-size:12.5px;display:flex;align-items:center;gap:8px}
.stream-bar .name .dot{width:8px;height:8px;border-radius:50%;background:var(--honey-d);flex-shrink:0}
.stream-bar .name .dot.green{background:var(--emerald-d)}
.stream-bar .name .dot.honey{background:var(--honey-d)}
.stream-bar .name .dot.rose{background:var(--rose-d)}
.stream-bar .track{position:relative;height:14px;background:var(--mist);border-radius:7px;overflow:hidden}
.stream-bar .fill{height:100%;background:linear-gradient(90deg,var(--honey-soft),var(--honey-d));border-radius:7px;transition:.3s}
.stream-bar .fill.green{background:linear-gradient(90deg,#86EFAC,var(--emerald-d))}
.stream-bar .fill.rose{background:linear-gradient(90deg,#FECDD3,var(--rose))}
.stream-bar .pct{font-family:'JetBrains Mono';font-weight:700;color:var(--ink);font-size:12px;text-align:right;letter-spacing:.02em}
@media (max-width:700px){.stream-bar{grid-template-columns:140px 1fr 44px}}

/* Alert/activity list */
.alert-list{display:flex;flex-direction:column;gap:0;border-left:2px solid var(--line);padding-left:14px;margin-left:6px}
.alert-item{position:relative;padding:8px 0 14px}
.alert-item::before{content:"";position:absolute;left:-21px;top:13px;width:10px;height:10px;border-radius:50%;background:var(--honey-d);border:2px solid #fff;box-shadow:0 0 0 2px var(--line)}
.alert-item.rose::before{background:var(--rose);box-shadow:0 0 0 2px var(--rose-glow)}
.alert-item.emerald::before{background:var(--emerald-d);box-shadow:0 0 0 2px var(--emerald-glow)}
.alert-item .ai-msg{font-size:12.5px;color:var(--ink-2);line-height:1.5}
.alert-item .ai-msg b{color:var(--ink);font-weight:600}
.alert-item .ai-time{font-family:'JetBrains Mono';font-size:10px;color:var(--mute);letter-spacing:.06em;margin-top:2px}
.alert-item .ai-action{font-family:'Inter';font-size:11.5px;color:var(--honey-d);font-weight:600;margin-top:4px;background:none;border:none;cursor:pointer;padding:0;text-decoration:underline}

/* Student row / table for cohort surfaces */
.tbl{width:100%;border-collapse:collapse;font-size:12.5px}
.tbl th{text-align:left;padding:10px 12px;font-family:'JetBrains Mono';font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);font-weight:700;border-bottom:1px solid var(--line);background:var(--fog)}
.tbl td{padding:12px;border-bottom:1px solid var(--line);color:var(--ink-2);vertical-align:middle}
.tbl tr:hover td{background:var(--mist)}
.tbl .student-name{font-weight:600;color:var(--ink)}
.tbl .small{font-size:11px;color:var(--mute);display:block;margin-top:2px}
.tbl .score-cell{font-family:'JetBrains Mono';font-weight:700;font-size:13px;color:var(--ink)}
.tbl .score-cell.strong{color:var(--emerald-d)}
.tbl .score-cell.weak{color:var(--rose-d)}
.tbl .score-cell.mid{color:var(--honey-d)}
.tbl .row-action{padding:5px 10px;font-size:11px;background:var(--ink);color:#fff;border:none;border-radius:5px;font-family:'Inter';font-weight:600;cursor:pointer}
.tbl .row-action:hover{background:var(--honey-d)}

/* Heatmap (skill gap view) */
.heatmap{display:grid;grid-template-columns:140px repeat(9,1fr);gap:2px;font-size:11px}
.heatmap .hm-cell{padding:10px 6px;text-align:center;border-radius:4px;font-family:'JetBrains Mono';font-weight:700;color:var(--ink)}
.heatmap .hm-label{background:transparent;text-align:left;color:var(--mute);font-family:'Inter';font-weight:600;font-size:11.5px;padding-right:10px}
.heatmap .hm-h{font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);background:transparent;padding:8px 4px}
.heatmap .hm-cell.strong{background:var(--emerald-glow);color:var(--emerald-d)}
.heatmap .hm-cell.good{background:#DCFCE7;color:var(--emerald-d)}
.heatmap .hm-cell.mid{background:var(--honey-glow);color:var(--honey-d)}
.heatmap .hm-cell.weak{background:#FFE4E6;color:var(--rose-d)}
.heatmap .hm-cell.severe{background:var(--rose-glow);color:var(--rose-d)}

/* Forecast timeline */
.timeline{display:flex;flex-direction:column;gap:10px}
.timeline-week{display:grid;grid-template-columns:80px 1fr 90px;align-items:center;gap:12px;font-size:12.5px;padding:8px 0;border-bottom:1px dashed var(--line)}
.timeline-week .wk{font-family:'JetBrains Mono';font-size:11px;color:var(--mute);letter-spacing:.06em;font-weight:700}
.timeline-week .progress{position:relative;height:22px;background:var(--mist);border-radius:11px;overflow:hidden}
.timeline-week .progress .ready{position:absolute;left:0;top:0;height:100%;background:linear-gradient(90deg,var(--emerald-glow),var(--emerald));border-radius:11px}
.timeline-week .progress .lbl{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:'JetBrains Mono';font-size:10.5px;font-weight:700;color:var(--ink-2);letter-spacing:.04em}
.timeline-week .delta{font-family:'JetBrains Mono';font-size:11px;font-weight:700;text-align:right;color:var(--emerald-d)}

/* Top decile student card */
.td-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.td-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px 18px;display:flex;flex-direction:column;gap:8px}
.td-card .td-top{display:flex;align-items:center;gap:12px}
.td-card .td-av{width:44px;height:44px;border-radius:50%;background:var(--honey);color:var(--ink);display:grid;place-items:center;font-weight:800;font-size:14px;flex-shrink:0}
.td-card .td-name{font-size:14px;font-weight:700;color:var(--ink);line-height:1.2}
.td-card .td-meta{font-size:11.5px;color:var(--mute)}
.td-card .td-score{font-family:'JetBrains Mono';font-weight:800;font-size:20px;color:var(--honey-d);margin-left:auto}
.td-card .td-tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:4px}
.td-card .td-tag{font-family:'JetBrains Mono';font-size:9.5px;letter-spacing:.06em;font-weight:700;text-transform:uppercase;padding:2px 7px;border-radius:4px;background:var(--mist);color:var(--ink-2)}
.td-card .td-action{margin-top:6px;padding:7px 12px;background:var(--ink);color:#fff;border:none;border-radius:6px;font-family:'Inter';font-weight:600;font-size:12px;cursor:pointer}
.td-card .td-action:hover{background:var(--honey-d)}

/* HITL validation queue */
.val-row{display:grid;grid-template-columns:1fr 100px 100px;gap:14px;align-items:center;padding:14px 16px;background:var(--fog);border:1px solid var(--line);border-radius:10px;margin-bottom:8px}
.val-row .vr-title{font-weight:700;color:var(--ink);font-size:13.5px;margin-bottom:3px}
.val-row .vr-meta{font-size:11.5px;color:var(--mute);line-height:1.4}
.val-row .vr-pillar{font-family:'JetBrains Mono';font-size:10.5px;font-weight:700;letter-spacing:.06em;color:var(--honey-d);background:var(--honey-glow);padding:4px 10px;border-radius:6px;text-align:center}
.val-row .vr-actions{display:flex;gap:6px}
.val-row .vr-actions button{padding:6px 10px;font-size:11px;border:none;border-radius:5px;font-family:'Inter';font-weight:600;cursor:pointer}
.val-row .vr-actions .vr-yes{background:var(--emerald-d);color:#fff}
.val-row .vr-actions .vr-no{background:var(--rose);color:#fff}
@media (max-width:700px){.val-row{grid-template-columns:1fr;gap:8px}}

/* Consent log entries */
.consent-row{display:grid;grid-template-columns:140px 1fr 140px;gap:14px;align-items:center;padding:11px 14px;background:#fff;border:1px solid var(--line);border-radius:8px;margin-bottom:6px;font-size:12.5px}
.consent-row .cr-time{font-family:'JetBrains Mono';font-size:11px;color:var(--mute);letter-spacing:.04em}
.consent-row .cr-event{color:var(--ink-2);line-height:1.4}
.consent-row .cr-event b{color:var(--ink);font-weight:600}
.consent-row .cr-status{font-family:'JetBrains Mono';font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:3px 9px;border-radius:4px;text-align:center}
.consent-row .cr-status.granted{background:var(--emerald-glow);color:var(--emerald-d)}
.consent-row .cr-status.revoked{background:var(--rose-glow);color:var(--rose-d)}
.consent-row .cr-status.audit{background:var(--mist);color:var(--mute)}
@media (max-width:700px){.consent-row{grid-template-columns:1fr;gap:6px}}

/* Privacy notice strip */
.privacy-strip{padding:14px 18px;background:var(--teal-glow);border-left:3px solid var(--teal);border-radius:0 8px 8px 0;font-size:12.5px;color:var(--teal-d);line-height:1.55;margin-bottom:16px}
.privacy-strip b{color:var(--ink)}

/* Leaderboard */
.lb-table{width:100%;border-collapse:collapse;font-size:13px}
.lb-table th{text-align:left;padding:10px 12px;font-family:'JetBrains Mono';font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);font-weight:700;border-bottom:2px solid var(--line)}
.lb-table td{padding:12px;border-bottom:1px solid var(--line);color:var(--ink-2)}
.lb-table .rank{font-family:'JetBrains Mono';font-weight:800;color:var(--ink);width:50px}
.lb-table .me{background:var(--honey-glow)}
.lb-table .me .rank{color:var(--honey-d)}
.lb-table .college-name{font-weight:700;color:var(--ink)}
.lb-table .college-name .sub{font-size:11px;color:var(--mute);font-weight:400;display:block;margin-top:2px}
.lb-table .lb-score{font-family:'JetBrains Mono';font-weight:700;color:var(--ink);font-size:13px}
.lb-table .lb-delta{font-family:'JetBrains Mono';font-weight:700;font-size:11px}
.lb-table .lb-delta.up{color:var(--emerald-d)}
.lb-table .lb-delta.down{color:var(--rose-d)}

.placeholder{padding:48px 32px;text-align:center;color:var(--mute);background:#fff;border:1px dashed var(--line);border-radius:14px}
.placeholder h3{margin:0 0 8px;color:var(--ink);font-family:'Inter';font-weight:700;font-size:18px}
.placeholder p{font-size:13px;margin:0;line-height:1.55}

/* App shell layout: inlined fallback mirroring brand.css so the sidebar renders correctly even if the external stylesheet fails to load. */
.app-shell{display:grid;grid-template-columns:240px minmax(0,1fr);min-height:calc(100vh - 62px);background:var(--fog)}
.app-sidebar{position:sticky;top:62px;align-self:start;height:calc(100vh - 62px);overflow-y:auto;padding:18px 12px;border-right:1px solid var(--line);background:#fff;font-family:'Inter',sans-serif;display:flex;flex-direction:column;gap:2px}
.app-sidebar::-webkit-scrollbar{width:0}
.app-sidebar.persona-tpo{background:var(--ink);color:#fff;border-right:1px solid #FFFFFF14}
.app-sidebar.persona-admin{background:var(--ink-2);color:#fff;border-right:1px solid #FFFFFF1A}
.app-nav-section{padding:14px 14px 4px;font-family:'JetBrains Mono',monospace;font-size:9px;color:var(--mute);letter-spacing:.18em;text-transform:uppercase;font-weight:700}
.app-sidebar.persona-tpo .app-nav-section,.app-sidebar.persona-admin .app-nav-section{color:#FFFFFF80}
.app-nav-section.internal{padding-top:18px;border-top:1px dotted var(--line);margin-top:4px}
.app-sidebar.persona-tpo .app-nav-section.internal,.app-sidebar.persona-admin .app-nav-section.internal{border-top-color:#FFFFFF22}
.app-nav-btn{padding:8px 14px;border-radius:8px;font-family:'Inter';font-size:13px;font-weight:500;color:var(--ink-2);background:transparent;border:none;cursor:pointer;display:flex;align-items:center;gap:10px;transition:.12s;width:100%;text-align:left;line-height:1.35;user-select:none}
.app-sidebar.persona-tpo .app-nav-btn,.app-sidebar.persona-admin .app-nav-btn{color:#FFFFFFB8}
.app-nav-btn:hover{background:var(--honey-glow);color:var(--honey-d)}
.app-sidebar.persona-tpo .app-nav-btn:hover,.app-sidebar.persona-admin .app-nav-btn:hover{background:#FFFFFF12;color:#fff}
.app-nav-btn.active{background:var(--honey-d);color:#fff;font-weight:600;box-shadow:0 1px 0 #00000020}
.app-nav-btn .idx{font-family:'JetBrains Mono';font-size:10px;opacity:.7;letter-spacing:.06em;min-width:22px;flex-shrink:0}
.app-nav-btn .ic{width:18px;display:grid;place-items:center;font-size:13px;flex-shrink:0}
.app-nav-btn .lbl{flex:1}
.app-nav-btn .count{margin-left:auto;font-family:'JetBrains Mono';font-size:9.5px;font-weight:700;padding:1px 7px;border-radius:999px;background:var(--rose-glow);color:var(--rose-d)}
.app-nav-btn .pill-int{margin-left:auto;font-family:'JetBrains Mono';font-size:8px;color:var(--mute);letter-spacing:.1em;background:var(--mist);padding:2px 5px;border-radius:4px;font-weight:700}
.app-sidebar.persona-tpo .app-nav-btn .pill-int,.app-sidebar.persona-admin .app-nav-btn .pill-int{background:#FFFFFF12;color:#FFFFFFA0}
.app-nav-btn .light-data{margin-left:auto;font-size:11px;opacity:.5}
.app-main{padding:0;background:var(--fog);min-width:0;overflow-x:hidden}
@media (max-width:900px){
  .app-shell{grid-template-columns:1fr;min-height:auto}
  .app-sidebar{position:relative;top:0;height:auto;border-right:none;border-bottom:1px solid var(--line);padding:10px 14px;flex-direction:row;flex-wrap:nowrap;gap:6px;overflow-x:auto;overflow-y:hidden}
  .app-nav-section{display:none}
  .app-nav-btn{flex:0 0 auto;width:auto;padding:6px 12px;border-radius:999px;font-size:12px;white-space:nowrap}
  .app-nav-btn .idx,.app-nav-btn .pill-int,.app-nav-btn .count,.app-nav-btn .light-data{display:none}
}

/* ════════════════════════════════════════════════════════════
   AUTH — login / signup gate (teal-themed, College persona)
   ════════════════════════════════════════════════════════════ */
.auth-page{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--fog);padding:24px}
.auth-card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:40px;max-width:400px;width:100%;box-shadow:0 4px 24px rgba(11,18,32,.06)}
.auth-card h2{font-family:'Inter';font-weight:800;font-size:24px;letter-spacing:-.02em;color:var(--ink);margin:0 0 6px}
.auth-card .sub{font-size:13.5px;color:var(--mute);margin:0 0 28px;line-height:1.5}
.auth-field{display:flex;flex-direction:column;gap:5px;margin-bottom:14px}
.auth-field label{font-family:'JetBrains Mono';font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);font-weight:700}
.auth-field input{padding:11px 14px;border:1px solid var(--line);border-radius:8px;font-family:'Inter';font-size:13.5px;color:var(--ink);outline:none;transition:.15s;box-sizing:border-box;width:100%}
.auth-field input:focus{border-color:var(--teal-d);box-shadow:0 0 0 3px var(--teal-glow)}
.auth-btn{width:100%;padding:12px;background:var(--teal-d);color:#fff;border:none;border-radius:10px;font-family:'Inter';font-weight:700;font-size:14px;cursor:pointer;margin-top:6px;transition:.15s}
.auth-btn:hover{background:var(--ink)}
.auth-btn.sec{background:#fff;color:var(--ink);border:1px solid var(--line);margin-top:8px}
.auth-btn.sec:hover{background:var(--fog);border-color:var(--teal-d);color:var(--teal-d)}
.auth-switch{text-align:center;margin-top:18px;font-size:13px;color:var(--mute)}
.auth-switch a{color:var(--teal-d);font-weight:600;cursor:pointer;text-decoration:none}
.auth-dpdp{margin-top:16px;padding:11px 14px;background:var(--teal-glow);border-radius:8px;font-size:11.5px;color:var(--ink-2);line-height:1.55;border:1px solid var(--teal)}
.auth-back{display:block;text-align:center;margin-top:14px;font-size:12px;color:var(--mute);cursor:pointer;text-decoration:none}
.auth-back:hover{color:var(--teal-d)}

/* ── Settings: Appearance / Dark-mode toggle (base, non-dark) ── */
.settings-rows{display:flex;flex-direction:column;gap:8px;max-width:720px}
.set-row{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;background:#fff;border:1px solid var(--line);border-radius:10px}
.set-row .sr-body{flex:1;min-width:0}
.set-row .sr-title{font-size:13.5px;font-weight:600;color:var(--ink);margin-bottom:2px}
.set-row .sr-desc{font-size:11.5px;color:var(--mute);line-height:1.4}
.set-row .sr-control{flex-shrink:0;margin-left:14px}
.set-row .sr-toggle{width:42px;height:24px;background:var(--line);border-radius:999px;position:relative;cursor:pointer;transition:.18s;border:none;padding:0}
.set-row .sr-toggle.on{background:var(--honey-d)}
.set-row .sr-toggle::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;background:#fff;border-radius:50%;transition:.18s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.set-row .sr-toggle.on::after{left:21px}

/* ════════════════════════════════════════════════════════════
   DARK MODE — surface overrides (tokens flip in shared/brand.css)
   ════════════════════════════════════════════════════════════ */
/* Elevated surfaces (white in light) → --surface */
[data-theme="dark"] .tb-search,
[data-theme="dark"] .tb-search-pop,
[data-theme="dark"] .tb-user-menu,
[data-theme="dark"] .btn,
[data-theme="dark"] .kpi,
[data-theme="dark"] .dash-card,
[data-theme="dark"] .td-card,
[data-theme="dark"] .consent-row,
[data-theme="dark"] .placeholder,
[data-theme="dark"] .app-sidebar,
[data-theme="dark"] .auth-card,
[data-theme="dark"] .auth-btn.sec,
[data-theme="dark"] .set-row{ background:var(--surface) }

/* Intentionally-dark surfaces (--ink bg) → --deep (stay dark in BOTH themes) */
[data-theme="dark"] .app-topbar,
[data-theme="dark"] .btn.primary,
[data-theme="dark"] .kpi.featured,
[data-theme="dark"] .row-action,
[data-theme="dark"] .td-action,
[data-theme="dark"] .app-sidebar.persona-tpo{ background:var(--deep) }