/* G.O.C Academy Hub — stylesheet
   Split out of the single-file prototype. Everything the app looks like
   lives in this one file; no CSS is loaded from the internet. */
/* ============ TOKENS ============ */
:root{
  color-scheme: light;
  --red:#DC2626; --red-deep:#B91C1C; --red-dk:#7F1D1D; --maroon:#5E1212;
  --red-mute:#FEF8F8; /* secondary/muted text on red hero backgrounds — was #FFD9D9 (3.7:1, failed AA); this clears 4.5:1 against the lightest red in use */
  --gold:#F0A500; --gold-lt:#FEF08A; /* was #FBBF24 (~3.2:1 on the dashboard hero card, failed AA); lightened to clear 4.5:1 */ --gold-deep:#8A5600; --gold-soft:#FDECC8; --green:#15803D; --green-lt:#22A559; --amber:#D97706; --teal:#0E7490;
  --ink:#20242C; --slate:#334155; --gray:#6B7280; --mute:#616D7E;
  --line:#EAE4DA; --card:#F3EFE9; --bg:#FAF7F2; --white:#fff;
  --r-sm:12px; --r-md:16px; --r-lg:22px; --r-xl:28px;
  --sh-sm:0 1px 3px rgba(17,24,39,.06),0 1px 2px rgba(17,24,39,.04);
  --sh-md:0 6px 20px rgba(17,24,39,.10);
  --sh-lg:0 16px 40px rgba(17,24,39,.16);
  --font: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  font-family:var(--font); background:#0e0f12; color:var(--ink);
  display:flex; align-items:center; justify-content:center; min-height:100dvh;
  background-image:radial-gradient(1200px 600px at 50% -10%, #2a2c33 0%, #0e0f12 60%);
}
/* ============ PHONE FRAME ============ */
.phone{
  position:relative; width:min(430px,100vw); height:min(924px,100dvh);
  background:var(--bg); overflow:hidden; border-radius:38px;
  box-shadow:var(--sh-lg), 0 0 0 10px #1b1c20, 0 0 0 12px #34363d;
}
.notch{position:absolute;top:0;left:50%;transform:translateX(-50%);width:150px;height:26px;background:#1b1c20;border-radius:0 0 16px 16px;z-index:60;pointer-events:none}
@media (max-width:480px){
  body{background:var(--bg)}
  .phone{width:100vw;height:100dvh;border-radius:0;box-shadow:none}
  .notch{display:none}
}
/* Desktop layout (adaptive web app with a left sidebar) is defined in the
   responsive block at the END of this stylesheet. */
.screens{position:absolute;inset:0}
.screen{position:absolute;inset:0;display:none;flex-direction:column;overflow-y:auto;overflow-x:hidden;background:var(--bg);-webkit-overflow-scrolling:touch}
.screen.active{display:flex}
@media (prefers-reduced-motion: no-preference){
  .screen.active{animation:fade .28s ease}
}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.screen.pad{padding-bottom:88px}
.scroll{flex:1;overflow-y:auto}
/* ============ SHARED ============ */
.wrap{padding:0 18px}
.row{display:flex;align-items:center}
.between{justify-content:space-between}
.gap8{gap:8px}.gap12{gap:12px}.gap6{gap:6px}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;padding:6px 11px;border-radius:999px}
.chip.red{background:#FEECEC;color:var(--red-deep)}
.chip.gold{background:var(--gold-soft);color:var(--gold-deep)}
.chip.green{background:#E6F4EC;color:#106b34}
.chip.gray{background:#EEF0F3;color:var(--slate)}
.pill{font-size:11px;font-weight:800;letter-spacing:.4px;text-transform:uppercase}
.card{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-sm)}
.muted{color:var(--gray)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:none;cursor:pointer;font-family:var(--font);font-weight:800;font-size:15px;border-radius:14px;padding:14px 18px;transition:transform .08s ease,filter .15s ease}
.btn:active{transform:scale(.97)}
.btn-red{background:var(--red);color:#fff;box-shadow:0 6px 16px rgba(220,38,38,.28)}
.btn-red:active{filter:brightness(.96)}
.btn-ghost{background:var(--card);color:var(--ink)}
.btn-outline{background:#fff;border:1.5px solid var(--line);color:var(--ink)}
.btn-block{width:100%}
h1,h2,h3{letter-spacing:-.02em;line-height:1.15}
.hdr{position:sticky;top:0;z-index:30;background:var(--bg);padding:14px 18px 10px}
.hdr.solid{background:var(--white);border-bottom:1px solid var(--line)}
.h-title{font-size:21px;font-weight:800;color:var(--ink)}
.eyebrow{font-size:11px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;color:var(--red)}
.back{width:38px;height:38px;border-radius:12px;background:var(--card);display:flex;align-items:center;justify-content:center;border:none;cursor:pointer}
.icon{width:22px;height:22px;display:block}
.avatar{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,#DC2626,#7F1D1D);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:16px;flex:0 0 auto}
.progress{height:9px;border-radius:999px;background:#EEF0F3;overflow:hidden}
.progress>span{display:block;height:100%;border-radius:999px;background:var(--red)}
.section-t{font-size:15px;font-weight:800;color:var(--ink)}
.divider{height:1px;background:var(--line);margin:14px 0}
/* ============ TABBAR ============ */
.tabbar{position:absolute;left:0;right:0;bottom:0;height:74px;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-top:1px solid var(--line);display:flex;z-index:50;padding-bottom:6px}
.tab{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border:none;background:none;cursor:pointer;color:var(--mute);font-family:var(--font);font-size:10.5px;font-weight:700}
.tab .icon{width:24px;height:24px}
.tab.on{color:var(--red)}
.tab.on .icon{stroke:var(--red)}
/* ============ FORM FIELDS ============ */
.field{margin-bottom:14px}
.field label{display:block;font-size:12.5px;font-weight:700;color:var(--slate);margin-bottom:7px}
.field input{width:100%;border:1.5px solid var(--line);border-radius:14px;padding:14px;font-size:15px;font-family:var(--font);background:var(--bg);color:var(--ink)}
.field input:focus{outline:none;border-color:var(--red);background:#fff}
/* ============ MODALS ============ */
.overlay{position:absolute;inset:0;z-index:80;background:rgba(15,17,20,.55);backdrop-filter:blur(3px);display:none;align-items:center;justify-content:center;padding:22px}
.overlay.show{display:flex}
@media (prefers-reduced-motion: no-preference){
  .overlay.show{animation:fade .25s ease}
}
.flyer{width:100%;max-width:360px;border-radius:26px;overflow:hidden;box-shadow:var(--sh-lg);background:#fff}
.flyer-top{background:linear-gradient(150deg,#DC2626,#7F1D1D);color:#fff;padding:26px 24px 30px;position:relative;text-align:center}
.flyer-top .date{font-size:12px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--red-mute)}
.flyer-top .quote{font-size:22px;font-weight:800;line-height:1.28;margin-top:14px}
.flyer-top .mark{font-size:44px;line-height:0;opacity:.35;font-weight:900}
.flyer-body{padding:20px 22px 24px;text-align:center}
.flyer-body p{color:var(--gray);font-size:13.5px;line-height:1.5;margin-bottom:16px}
.sun{width:54px;height:54px;border-radius:50%;background:#FFF3DE;display:flex;align-items:center;justify-content:center;margin:-48px auto 12px;position:relative;border:4px solid #fff}
/* time-up */
.winddown{width:100%;max-width:340px;background:#fff;border-radius:26px;padding:28px 24px;text-align:center;box-shadow:var(--sh-lg)}
.winddown .big{width:66px;height:66px;border-radius:50%;background:#FEECEC;display:flex;align-items:center;justify-content:center;margin:0 auto 16px}
.winddown h3{font-size:20px;font-weight:800;margin-bottom:8px}
.winddown p{color:var(--gray);font-size:14px;line-height:1.55;margin-bottom:20px}
.sheet-back{position:absolute;inset:0;background:rgba(15,17,20,.4);z-index:84;display:none}
.sheet-back.show{display:block}
/* ============ DASHBOARD ============ */
.dash-hero{background:linear-gradient(160deg,#DC2626,#8f1717);color:#fff;padding:16px 18px 22px;border-radius:0 0 26px 26px}
.statusbar{display:flex;justify-content:space-between;align-items:center;font-size:12px;font-weight:700;color:var(--red-mute);padding:2px 2px 12px}
.hello{font-size:13px;color:var(--red-mute);font-weight:600}
.hello + .name{font-size:23px;font-weight:900;margin-top:1px}
.hero-stats{display:flex;gap:8px;margin-top:16px}
.hstat{flex:1;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.16);border-radius:16px;padding:11px 10px;text-align:center}
.hstat .v{font-size:18px;font-weight:900}
.hstat .v.gold{color:var(--gold-lt)}
.hstat .l{font-size:10.5px;color:var(--red-mute);font-weight:700;margin-top:2px}
/* focus ring card (SIGNATURE) */
.focus-card{margin:-14px 16px 0;position:relative;z-index:5;background:#fff;border-radius:22px;box-shadow:var(--sh-md);padding:20px;display:flex;align-items:center;gap:18px}
.focus-tag{display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--red-deep);background:#FDECEC;padding:3px 9px;border-radius:999px;margin-bottom:7px}
.admin-note{background:#FDECEC;color:#7F1D1D;border-radius:14px;padding:14px 16px;font-size:13px;font-weight:600;line-height:1.5;margin:14px 0 4px}
.admin-help{font-size:12.5px;color:var(--gray);line-height:1.5;margin-top:14px}
.id-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px;margin-top:8px}
.id-top{display:flex;align-items:center;gap:14px;padding-bottom:16px;border-bottom:1px solid #F1F2F4}
.id-ava{width:46px;height:46px;border-radius:14px;background:linear-gradient(135deg,#DC2626,#7F1D1D);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px;flex:none;letter-spacing:.5px}
.id-who{min-width:0}
.id-who b{display:block;font-size:15.5px;font-weight:800;color:var(--ink);line-height:1.3}
.id-who span{display:inline-block;margin-top:4px;font-size:11px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:#8A5600;background:#FFF7ED;border-radius:20px;padding:3px 9px}
.id-idbox{background:#F8F9FB;border:1px solid var(--line);border-radius:12px;padding:13px 14px;margin-top:16px}
.id-idlab{font-size:10.5px;font-weight:800;letter-spacing:.7px;text-transform:uppercase;color:var(--gray)}
.id-idrow{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:7px}
.id-idrow code{font-family:ui-monospace,'Courier New',monospace;font-size:17px;font-weight:800;color:var(--ink);letter-spacing:1.2px}
.id-copy{border:1px solid var(--line);background:#fff;color:var(--red);font-size:11.5px;font-weight:800;padding:7px 12px;border-radius:8px;cursor:pointer;flex:none}
.id-note{font-size:12px;color:var(--gray);line-height:1.6;margin-top:16px}
.ios-install-help{font-size:12.5px;color:var(--slate);line-height:1.6;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin:0 16px 16px}
.ios-install-help ol{margin:8px 0 8px 18px;padding:0}
.ios-install-help li{margin-bottom:4px}
/* Scholar ID strip on the dashboard */
.id-strip{display:flex;align-items:center;gap:12px;background:#141821;border-radius:14px;padding:13px 15px;margin-top:14px}
.id-strip .s-l{flex:1;min-width:0}
.id-strip .s-l span{display:block;font-size:10.5px;font-weight:800;letter-spacing:.7px;text-transform:uppercase;color:#98A2B3}
.id-strip .s-l code{font-family:ui-monospace,'Courier New',monospace;font-size:15.5px;font-weight:800;color:#fff;letter-spacing:1.1px}
.id-strip button{border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.08);color:#F0A500;font-size:11.5px;font-weight:800;padding:7px 12px;border-radius:8px;cursor:pointer;flex:none}
/* ===== Professional admin console ===== */
#admin{background:#F3F4F6}
.adm-top{display:flex;align-items:center;gap:12px;padding:16px 18px;background:#141821;color:#fff}
.adm-back{width:34px;height:34px;border-radius:9px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);display:flex;align-items:center;justify-content:center;cursor:pointer;flex:none}
.adm-top-t{flex:1;min-width:0}
.adm-brand{font-weight:800;font-size:15px;letter-spacing:.2px}
.adm-sub{font-size:11.5px;color:#98A2B3;margin-top:1px}
.adm-badge{font-size:10.5px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:#F0A500;border:1px solid rgba(240,165,0,.4);border-radius:20px;padding:4px 10px}
.adm-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:#E4E7EC;border-bottom:1px solid #E4E7EC}
.adm-kpi{background:#fff;padding:14px 8px;text-align:center}
.adm-kpi .k-v{font-size:22px;font-weight:800;color:#141821;line-height:1}
.adm-kpi .k-l{font-size:10.5px;color:#667085;font-weight:600;margin-top:4px;text-transform:uppercase;letter-spacing:.4px}
.adm-select-wrap{padding:14px 16px 10px}
.adm-select-wrap label{display:block;font-size:11px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:#98A2B3;margin-bottom:6px}
.adm-select{position:relative}
.adm-select select{width:100%;appearance:none;-webkit-appearance:none;border:1px solid #E4E7EC;background:#fff;color:#141821;font-size:14.5px;font-weight:700;font-family:inherit;padding:13px 40px 13px 14px;border-radius:12px;cursor:pointer}
.adm-select svg{position:absolute;right:12px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:#667085;pointer-events:none}
.adm-panel{padding:2px 16px 6px}
.adm-foot{font-size:11.5px;color:#98A2B3;line-height:1.5;padding:16px 18px 4px;border-top:1px solid #E4E7EC;margin-top:8px}
.ad-card{background:#fff;border:1px solid #E4E7EC;border-radius:14px;padding:16px;margin-bottom:12px}
.ad-h{font-size:15px;font-weight:800;color:#141821;margin-bottom:2px}
.ad-p{font-size:12.5px;color:#667085;line-height:1.5}
.ad-row{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid #F1F2F4}
.ad-row:last-child{border-bottom:none}
.ad-av{width:38px;height:38px;border-radius:10px;background:#141821;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;flex:none}
.ad-row .nm{flex:1;min-width:0}
.ad-row .nm b{font-size:13.5px;color:#141821;display:block}
.ad-row .nm span{font-size:11.5px;color:#667085}
.ad-tag{font-size:10.5px;font-weight:800;padding:4px 9px;border-radius:20px;flex:none}
.ad-tag.g{background:#DCFCE7;color:#15803D}.ad-tag.a{background:#FEF3C7;color:#8A5600}.ad-tag.r{background:#FEE2E2;color:#B91C1C}
/* a declared topic nothing carries yet: stated plainly, not warned about */
.ad-tag{background:#EEF0F3;color:#5A6472}
.ad-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.ad-btn{border:1px solid #E4E7EC;background:#fff;color:#141821;font-size:12.5px;font-weight:700;padding:9px 13px;border-radius:9px;cursor:pointer}
.ad-btn.pri{background:#DC2626;border-color:#DC2626;color:#fff}
.ad-metric{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid #F1F2F4;font-size:13px}
.ad-metric:last-child{border-bottom:none}.ad-metric b{color:#141821}.ad-metric span{color:#667085}
/* Student credential cards (Scholar ID + masked password) */
.ad-cred{border:1px solid #E9EBEF;border-radius:12px;padding:13px;margin-top:11px;background:#fff}
.ac-top{display:flex;align-items:center;gap:11px}
.ac-who{flex:1;min-width:0}
.ac-who b{display:block;font-size:13.5px;color:#141821}
.ac-who span{font-size:11.5px;color:#667085}
.ac-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:11px}
.ac-cell{background:#F8F9FB;border-radius:9px;padding:9px 11px;min-width:0}
.ac-cell label{display:block;font-size:9.5px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:#98A2B3;margin-bottom:3px}
.ac-cell code{font-family:ui-monospace,'Courier New',monospace;font-size:13px;font-weight:700;color:#141821;letter-spacing:.6px;word-break:break-all}
.ac-btns{display:flex;gap:8px;margin-top:11px}
.ac-btns .ad-btn{flex:1;text-align:center}
/* A closed account (Priority 7). Nothing is deleted — the card simply reads as
   closed, so a deactivated scholar is obvious at a glance. */
.ad-cred.off{background:#FEF7F7;border-color:#FCA5A5;border-style:dashed}
.ad-btn.warn{color:#B91C1C;border-color:#FCA5A5}
.ad-btn.warn:hover{background:#FEF2F2}
.ad-btn.danger{background:#B91C1C;border-color:#B91C1C;color:#fff}
.ad-btn.danger:hover{background:#991B1B;border-color:#991B1B}
.ad-btn.danger:active{transform:scale(.97)}
.ad-warn{margin-top:13px;background:#FFFBEB;border:1px solid #FDE68A;border-radius:10px;padding:10px 12px;font-size:11.5px;line-height:1.55;color:#8A5600}
/* Management preview banner */
.pv-bar{position:absolute;left:0;right:0;top:0;z-index:60;display:flex;align-items:center;gap:10px;background:#141821;color:#fff;padding:10px 14px;font-size:11.5px;line-height:1.4}
.pv-bar b{color:#F0A500}
.pv-bar span{flex:1;min-width:0}
.pv-bar button{border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.1);color:#fff;font-size:11px;font-weight:800;padding:6px 11px;border-radius:8px;cursor:pointer;flex:none}
body.previewing .screen.active{padding-top:44px}
/* Session expiry warning (Priority 9). Sits above every in-app screen, in the
   same absolute band the preview banner uses, so no screen has to make room for
   it in its own markup. Amber rather than red: it is a warning the student can
   still act on, not an error. */
.ss-bar{position:absolute;left:0;right:0;top:0;z-index:70;display:flex;align-items:flex-start;gap:10px;
  background:#78350F;color:#FFFBEB;padding:10px 14px;font-size:11.5px;line-height:1.45;
  box-shadow:0 6px 18px rgba(20,24,33,.22)}
.ss-bar .ss-ico{width:17px;height:17px;flex:none;margin-top:1px;color:#FCD34D}
.ss-bar .ss-txt{flex:1;min-width:0}
.ss-bar b{color:#FCD34D;font-weight:800}
.ss-bar .ss-count{display:block;margin-top:3px;font-weight:800;font-size:12.5px;color:#fff;
  font-variant-numeric:tabular-nums}
/* When it is showing, every active screen drops by its height so nothing is
   covered — the specification forbids content displacement, so the bar pushes
   rather than overlaps. */
body.session-warning .screen.active{padding-top:56px}
body.session-warning.previewing .ss-bar{top:40px}
/* The warning appears once and then holds still; it must not pulse or flash. */
@media (prefers-reduced-motion: no-preference){
  .ss-bar{animation:ssIn .28s ease-out}
}
@keyframes ssIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
/* Why a student is back at the login screen when they did not log out. */
.auth-notice{margin-top:16px;background:#FFFBEB;border:1px solid #FDE68A;border-left:3px solid #D97706;
  border-radius:10px;padding:11px 13px;font-size:12.5px;line-height:1.55;color:#78350F}
.auth-notice b{color:#7C2D12}
.ad-win{text-align:center;padding:6px 0 2px}
.ad-win .big{font-size:44px;font-weight:800;color:#DC2626;line-height:1}
.ad-win .big s{font-size:16px;color:#98A2B3;text-decoration:none}
/* subject import chips + upload dropzone */
.ad-seg{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.ad-seg button{border:1px solid #E4E7EC;background:#fff;color:#475467;font-size:12.5px;font-weight:700;padding:8px 12px;border-radius:9px;cursor:pointer}
.ad-seg button.on{background:#141821;color:#fff;border-color:#141821}
.ad-seg button.seg-brand{display:inline-flex;align-items:center;gap:6px;border-color:#F0C9A0;background:#FFF8EF;color:#8A5600}
.ad-seg button.seg-brand:not(.on):hover{border-color:#E6A75C;color:#6E4400}
.ad-seg button.seg-brand.on{background:linear-gradient(135deg,var(--red) 0%,#B91C1C 100%);border-color:var(--red);color:#fff}
.seg-mark{width:12px;height:12px;flex:0 0 auto;color:currentColor}
.ad-drop{border:1.5px dashed #CBD2DC;border-radius:12px;background:#FAFBFC;padding:20px 14px;text-align:center;cursor:pointer;margin-top:10px}
.ad-drop svg{width:26px;height:26px;color:#98A2B3}
.ad-drop b{display:block;font-size:13px;color:#141821;margin-top:6px}
.ad-drop span{font-size:11.5px;color:#98A2B3}
.ad-field{margin-top:10px}
.ad-field label{display:block;font-size:11.5px;font-weight:700;color:#475467;margin-bottom:5px}
.ad-field input,.ad-field select,.ad-field textarea{width:100%;border:1px solid #E4E7EC;border-radius:9px;padding:10px 12px;font-size:13px;font-family:inherit;color:#141821;background:#fff}
.ad-field textarea{min-height:64px;resize:vertical}
/* Web Test management — extends the .ad-* console vocabulary, no second language */
.ad-grid2{display:flex;gap:8px;flex-wrap:wrap}
.ad-grid2 .ad-field{flex:1 1 132px;min-width:0}
.ad-note{font-size:11.5px;color:#667085;line-height:1.55;margin-top:8px}
.ad-note.warn{color:#B42318;background:#FEF3F2;border:1px solid #FDA29B;border-radius:10px;padding:8px 10px}
.ad-loading,.ad-empty{font-size:12.5px;color:#98A2B3;padding:16px 0;text-align:center}
.ad-sub{font-size:11px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:#98A2B3;margin:14px 0 2px}
.ad-q{border:1px solid #E9EBEF;border-radius:12px;padding:12px;margin-top:9px;background:#fff}
.ad-q.off{background:#FAFAFA;border-style:dashed}
.ad-q .qh{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:6px}
.ad-q .qh code{font-size:11px;color:#667085;background:#F4F5F7;border-radius:6px;padding:2px 6px;font-family:inherit}
.ad-q .qt{font-size:13px;line-height:1.5;color:#141821;overflow-wrap:break-word}
.ad-q .qm{font-size:11.5px;color:#667085;margin-top:6px;line-height:1.55;overflow-wrap:break-word}
.ad-q .qm b{color:#15803D;font-weight:700}
.ad-q .ad-actions{margin-top:10px}
/* The CSV importer. The column list is long and must wrap rather than push the
   card wider than the phone, and the file input sits inside its dashed drop
   zone instead of looking like a stray form control. */
.ad-cols{display:block;background:#F4F5F7;border:1px solid #E9EBEF;border-radius:9px;padding:9px 10px;font-size:11px;line-height:1.6;color:#344054;overflow-wrap:break-word;word-break:break-word}
.ad-drop input[type=file]{display:block;width:100%;margin-top:10px;font-size:11.5px;color:#667085;font-family:inherit}
.ad-drop label{display:block}
.ad-res{display:flex;align-items:center;gap:10px;width:100%;padding:11px 2px;border:0;border-bottom:1px solid #F1F2F4;background:none;text-align:left;font-family:inherit;cursor:pointer}
.ad-res:last-child{border-bottom:none}
.ad-res .pc{width:46px;height:46px;border-radius:13px;color:#fff;font-weight:800;font-size:12.5px;display:flex;align-items:center;justify-content:center;flex:none}
.ad-res .nm{flex:1;min-width:0}
.ad-res .nm b{display:block;font-size:13px;color:#141821}
.ad-res .nm span{display:block;font-size:11.5px;color:#667085;line-height:1.55;overflow-wrap:break-word}
.ad-mk{border:1px solid #E9EBEF;border-radius:12px;padding:12px;margin-top:10px}
.ad-mk .mq{font-size:11px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;color:#DC2626;margin-bottom:4px}
.ad-mk .mt{font-size:13px;line-height:1.5;color:#141821;overflow-wrap:break-word}
.ad-mk .mb{margin-top:8px;font-size:12.5px;line-height:1.55;color:#475467;background:#FAFBFC;border:1px solid #F1F2F4;border-radius:10px;padding:9px 11px;overflow-wrap:break-word;white-space:pre-wrap}
.ad-mk .mb em{display:block;font-style:normal;font-size:10.5px;font-weight:800;color:#98A2B3;text-transform:uppercase;letter-spacing:.4px;margin-bottom:3px}
.ad-mk .mm{display:flex;align-items:center;gap:8px;margin-top:10px;flex-wrap:wrap}
.ad-mk .mm label{font-size:11.5px;font-weight:700;color:#475467}
.ad-mk .mm input{width:84px;border:1px solid #E4E7EC;border-radius:9px;padding:8px 10px;font-size:13px;font-family:inherit;text-align:center;color:#141821;background:#fff}
.ad-mk .mm s{text-decoration:none;font-size:11.5px;color:#98A2B3}
/* Access portal / firewall */
#admin-gate{background:#0E1116}
.gate-wrap{min-height:100%;display:flex;align-items:center;justify-content:center;padding:24px}
.gate-card{width:100%;max-width:340px;background:#161B22;border:1px solid #262C36;border-radius:20px;padding:26px 22px;text-align:center;box-shadow:0 20px 50px rgba(0,0,0,.4)}
.gate-lock{width:56px;height:56px;border-radius:16px;background:linear-gradient(135deg,#DC2626,#7F1D1D);display:flex;align-items:center;justify-content:center;margin:0 auto 14px}
.gate-t{font-size:19px;font-weight:800;color:#fff}
.gate-p{font-size:12.5px;color:#98A2B3;line-height:1.5;margin:6px 0 18px}
.gate-pins{display:flex;justify-content:center;gap:12px;margin-bottom:6px}
.gate-pins span{width:14px;height:14px;border-radius:50%;border:2px solid #3A424E;transition:.15s}
.gate-pins span.f{background:#DC2626;border-color:#DC2626}
.gate-err{font-size:12px;color:#F87171;font-weight:700;height:16px;margin-bottom:8px}
.gate-pad{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:8px}
.gate-pad button{aspect-ratio:1.6;border:1px solid #262C36;background:#1E242D;color:#fff;font-size:19px;font-weight:700;border-radius:12px;cursor:pointer}
.gate-pad button:active{background:#2A313B}
.gate-pad button.ghost{color:#98A2B3;font-size:15px}
.gate-hint{font-size:11px;color:#667085;margin-top:14px;line-height:1.5}
.gate-hint b{color:#F0A500}
.ring{width:96px;height:96px;flex:0 0 auto;position:relative}
.ring svg{transform:rotate(-90deg)}
.ring .rc{fill:none;stroke-width:11;stroke-linecap:round}
.ring .rt{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.ring .rt b{font-size:19px;font-weight:900;color:var(--ink);line-height:1}
.ring .rt s{font-size:9.5px;color:var(--gray);text-decoration:none;font-weight:700;margin-top:2px}
.focus-info h4{font-size:14.5px;font-weight:800}
.focus-info p{font-size:12.5px;color:var(--gray);line-height:1.45;margin-top:3px}
.mini-link{color:var(--red);font-weight:800;font-size:12.5px;background:none;border:none;padding:6px 0 0;cursor:pointer}
/* mission */
.mission-item{display:flex;align-items:center;gap:12px;padding:14px 0}
.mission-item + .mission-item{border-top:1px solid var(--line)}
.check{width:26px;height:26px;border-radius:50%;border:2px solid var(--line);flex:0 0 auto;display:flex;align-items:center;justify-content:center;background:#fff}
.check.done{background:var(--green);border-color:var(--green)}
.mission-item.done .mtext{color:var(--mute);text-decoration:line-through}
.mtext{font-size:14px;font-weight:600;flex:1}
.mission-item .xp{font-size:11.5px;font-weight:800;color:var(--gold-deep)}
/* subject list */
.subj{display:flex;align-items:center;gap:12px;padding:13px 0}
.subj + .subj{border-top:1px solid var(--line)}
.dot{width:38px;height:38px;border-radius:12px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:13px}
.subj .nm{flex:1;font-weight:700;font-size:14px}
.subj .pct{font-size:12.5px;font-weight:800;color:var(--slate)}
.subj .progress{width:96px}
/* continue card */
.continue{background:linear-gradient(135deg,#1f2937,#374151);color:#fff;border-radius:20px;padding:16px;display:flex;align-items:center;gap:14px}
.continue .play{width:44px;height:44px;border-radius:50%;background:var(--red);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.continue h4{font-size:15px;font-weight:800}
.continue p{font-size:12px;color:#cbd2dc;margin-top:2px}
/* section header */
.sec-head{display:flex;align-items:center;justify-content:space-between;margin:26px 0 12px}
.sec-head a{color:var(--red);font-weight:800;font-size:12.5px;cursor:pointer;text-decoration:none}
/* CBT recent */
.cbt-row{display:flex;align-items:center;gap:12px;padding:13px 0}
.cbt-row + .cbt-row{border-top:1px solid var(--line)}
.score{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:14px;color:#fff;flex:0 0 auto}
/* ============ TIMETABLE ============ */
.week-strip{display:flex;gap:7px;padding:2px 0 4px;overflow-x:auto}
.wday{flex:0 0 auto;width:44px;text-align:center;padding:9px 0;border-radius:14px;background:#fff;border:1px solid var(--line);cursor:pointer}
.wday.on{background:var(--red);border-color:var(--red);color:#fff}
.wday .d{font-size:11px;font-weight:700;color:var(--gray)}
.wday.on .d{color:var(--red-mute)}
.wday .n{font-size:16px;font-weight:900;margin-top:2px}
.tt-block{display:flex;gap:12px;padding:14px;border-radius:16px;background:#fff;border:1px solid var(--line);box-shadow:var(--sh-sm);margin-bottom:12px;align-items:stretch}
.tt-bar{width:5px;border-radius:999px;flex:0 0 auto}
.tt-time{font-size:12px;font-weight:800;color:var(--slate);width:52px;flex:0 0 auto;padding-top:1px}
.tt-main{flex:1}
.tt-main h4{font-size:14.5px;font-weight:800}
.tt-main p{font-size:12.5px;color:var(--gray);margin-top:2px}
.tt-tag{font-size:10.5px;font-weight:800;padding:3px 8px;border-radius:999px;align-self:flex-start;margin-top:6px;display:inline-block}
.rest{text-align:center;color:var(--mute);font-size:13px;font-weight:600;padding:22px}
/* ============ STUDY / LESSON / PRACTICE ============ */
.tile{display:flex;align-items:center;gap:14px;padding:17px 16px;border-radius:18px;background:#fff;border:1px solid var(--line);box-shadow:var(--sh-sm);margin-bottom:14px;cursor:pointer;width:100%;text-align:left;font-family:var(--font)}
.tile:active{transform:scale(.99)}
.tile .ti{width:48px;height:48px;border-radius:14px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;color:#fff}
.tile h4{font-size:15.5px;font-weight:800}
.tile p{font-size:12.5px;color:var(--gray);margin-top:2px}
.tile .arr{margin-left:auto;color:var(--mute)}
/* watermark (content protection demo) */
.wm{position:absolute;inset:0;pointer-events:none;z-index:2;overflow:hidden;opacity:.05}
.wm b{position:absolute;font-size:15px;font-weight:800;color:#000;white-space:nowrap;transform:rotate(-30deg)}
.protected{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;position:relative}
.lesson-body{padding:18px;position:relative;z-index:3}
.lesson-body h2{font-size:20px;font-weight:900;margin-bottom:6px}
.lesson-body .kb{font-size:12.5px;color:var(--red);font-weight:800;text-transform:uppercase;letter-spacing:.6px}
.lesson-body p{font-size:14.5px;line-height:1.62;color:var(--slate);margin:12px 0}
.callout{background:#FFF7ED;border:1px solid #FCE3C4;border-radius:14px;padding:13px 14px;font-size:13.5px;color:#7c4a03;line-height:1.5;margin:14px 0}
.formula{background:var(--ink);color:#fff;border-radius:14px;padding:15px;text-align:center;font-size:17px;font-weight:700;letter-spacing:.5px;margin:14px 0}
/* question */
.q-prog{display:flex;gap:5px;padding:14px 18px 4px}
.q-prog span{flex:1;height:6px;border-radius:999px;background:#E7E9ED}
.q-prog span.on{background:var(--green)}
.q-prog span.cur{background:var(--red)}
.q-card{padding:18px}
.q-num{font-size:12.5px;font-weight:800;color:var(--gray)}
.q-text{font-size:18px;font-weight:800;line-height:1.4;margin:8px 0 18px;color:var(--ink)}
.opt{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:#fff;border:1.5px solid var(--line);border-radius:15px;padding:15px;margin-bottom:11px;cursor:pointer;font-family:var(--font);font-size:15px;font-weight:600;color:var(--ink);transition:.12s}
.opt .key{width:28px;height:28px;border-radius:8px;background:var(--card);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;flex:0 0 auto;color:var(--slate)}
.opt.correct{border-color:var(--green);background:#EAF6EF}
.opt.correct .key{background:var(--green);color:#fff}
.opt.wrong{border-color:var(--red);background:#FDECEC}
.opt.wrong .key{background:var(--red);color:#fff}
/* A chosen answer during a test — deliberately not green, because nothing has
   been marked yet and a student must not read a verdict into their own choice. */
.opt.sel{border-color:var(--red);background:#FEECEC}
.opt.sel .key{background:var(--red);color:#fff}
.opt:disabled{cursor:default}
.feedback{border-radius:16px;padding:15px;margin-top:6px}
.feedback.ok{background:#EAF6EF}
.feedback.no{background:#FDECEC}
.feedback h4{font-size:14.5px;font-weight:800;margin-bottom:5px}
.feedback.ok h4{color:var(--green)}
.feedback.no h4{color:var(--red-deep)}
.feedback p{font-size:13px;line-height:1.5;color:var(--slate)}
.bottom-bar{position:sticky;bottom:0;background:#fff;border-top:1px solid var(--line);padding:14px 18px;display:flex;gap:10px}
/* CBT */
.cbt-top{background:var(--ink);color:#fff;padding:14px 18px;display:flex;align-items:center;justify-content:space-between}
.timer{font-size:16px;font-weight:900;font-variant-numeric:tabular-nums;display:flex;align-items:center;gap:7px}
.timer.warn{color:#FCA5A5}
.qnav{display:flex;flex-wrap:wrap;gap:8px;padding:16px 18px}
.qn{width:38px;height:38px;border-radius:10px;border:1.5px solid var(--line);background:#fff;font-weight:800;font-size:13.5px;cursor:pointer;color:var(--slate)}
.qn.ans{background:var(--green);color:#fff;border-color:var(--green)}
.qn.cur{border-color:var(--red);color:var(--red)}
.qn.cur.ans{color:#fff}
/* ============ WEB TEST (Priority 3) ============
   Reuses the question, timer and navigation vocabulary above; only the hub
   listing and the theory answer box need new rules. */
.wt-seg{display:flex;gap:8px;margin:14px 0 8px}
.wt-tab{flex:1;min-width:0;border:1.5px solid var(--line);background:#fff;color:var(--slate);font-family:var(--font);font-size:13.5px;font-weight:800;padding:12px 10px;border-radius:14px;cursor:pointer;transition:.14s}
.wt-tab.on{background:var(--red);border-color:var(--red);color:#fff;box-shadow:0 6px 16px rgba(220,38,38,.22)}
.wt-sec{background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--sh-sm);padding:16px;margin-bottom:14px}
.wt-sec-top{display:flex;align-items:center;gap:12px}
.wt-si{width:42px;height:42px;border-radius:13px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;color:#fff}
.wt-sec-top .wt-st{flex:1;min-width:0}
.wt-sec-top h4{font-size:15px;font-weight:800;color:var(--ink)}
.wt-sec-top p{font-size:12px;color:var(--gray);line-height:1.45;margin-top:2px}
/* The papers inside one objective sitting: a scholar moves between them on the
   same clock, so the strip stays put at the top of the runner. */
.wt-subs{display:flex;gap:7px;overflow-x:auto;padding:10px 14px 0;-webkit-overflow-scrolling:touch}
.wt-subs::-webkit-scrollbar{display:none}
.wt-sub{flex:0 0 auto;border:1.5px solid var(--line);background:#fff;border-radius:12px;padding:7px 11px;font-family:var(--font);cursor:pointer;text-align:left;line-height:1.2;transition:.14s}
.wt-sub b{display:block;font-size:12px;font-weight:800;color:var(--slate);white-space:nowrap}
.wt-sub span{font-size:10.5px;font-weight:700;color:var(--mute);font-variant-numeric:tabular-nums}
.wt-sub.done{border-color:#BFE3CD;background:#F2FAF5}
.wt-sub.done span{color:#106b34}
.wt-sub.cur{border-color:var(--red);background:var(--red);box-shadow:0 5px 14px rgba(220,38,38,.22)}
.wt-sub.cur b,.wt-sub.cur span{color:#fff}
.wt-row{display:flex;align-items:center;gap:12px;padding:13px 0}
.wt-row + .wt-row{border-top:1px solid var(--line)}
.wt-row.first{border-top:1px solid var(--line);margin-top:12px}
.wt-row .nm{flex:1;min-width:0}
.wt-row .nm b{display:block;font-size:14px;font-weight:800;color:var(--ink)}
.wt-row .nm span{font-size:11.5px;color:var(--gray);font-variant-numeric:tabular-nums}
.wt-start{flex:0 0 auto;border:none;background:var(--red);color:#fff;font-family:var(--font);font-size:12.5px;font-weight:800;padding:10px 15px;border-radius:11px;cursor:pointer}
.wt-start:active{transform:scale(.97)}
.wt-start.retake{background:#fff;border:1.5px solid var(--line);color:var(--red)}
.wt-none{font-size:12.5px;color:var(--mute);font-weight:600;padding:14px 0 2px;line-height:1.5}
.wt-foot{font-size:11.5px;color:var(--gray);line-height:1.6;margin-top:16px}
.wt-lab{display:block;font-size:12.5px;font-weight:800;color:var(--slate);margin-bottom:7px}
.wt-area{width:100%;max-width:100%;box-sizing:border-box;border:1.5px solid var(--line);border-radius:14px;padding:14px;font-size:15px;line-height:1.55;font-family:var(--font);color:var(--ink);background:var(--bg);resize:vertical}
.wt-area:focus{outline:none;border-color:var(--red);background:#fff}
.wt-hint{font-size:11.5px;color:var(--gray);font-weight:700;margin-top:8px}
.wt-stat{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;font-size:13.5px}
.wt-stat + .wt-stat{border-top:1px solid var(--line)}
.wt-stat span{color:var(--gray);font-weight:600}
.wt-stat b{color:var(--ink);font-weight:800;font-variant-numeric:tabular-nums;text-align:right}
.wt-rev{background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px;margin-bottom:11px}
.wt-rev .rq{font-size:11.5px;font-weight:800;color:var(--gray);text-transform:uppercase;letter-spacing:.5px}
.wt-rev .rt{font-size:14px;font-weight:700;line-height:1.45;color:var(--ink);margin:6px 0 9px}
.wt-rev .ra{font-size:13px;line-height:1.55;color:var(--slate);background:var(--bg);border-radius:10px;padding:10px 12px;word-wrap:break-word;overflow-wrap:break-word}
.wt-rev .ra em{display:block;font-size:10.5px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--gray);font-style:normal;margin-bottom:4px}
.wt-rev .ra + .ra{margin-top:8px}
.wt-rev .verdict{font-size:11px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;padding:4px 9px;border-radius:999px;display:inline-block;margin-top:9px}
.wt-rev .verdict.ok{background:#E6F4EC;color:#106b34}
.wt-rev .verdict.no{background:#FDECEC;color:#B91C1C}
.wt-rev .verdict.wait{background:#FFF3DE;color:#8A5600}
.wt-his{display:flex;align-items:center;gap:12px;padding:13px 0;width:100%;text-align:left;background:none;border:none;font-family:var(--font);cursor:pointer}
.wt-his + .wt-his{border-top:1px solid var(--line)}
.wt-his .nm{flex:1;min-width:0}
.wt-his .nm b{display:block;font-size:13.5px;font-weight:800;color:var(--ink)}
.wt-his .nm span{font-size:11.5px;color:var(--gray)}
/* results */
.result-ring{width:150px;height:150px;margin:8px auto 6px;position:relative}
.result-ring .rt{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.result-ring .rt b{font-size:38px;font-weight:900;color:var(--ink);line-height:1}
.result-ring .rt s{font-size:12px;color:var(--gray);font-weight:700;text-decoration:none}
.brk{display:flex;align-items:center;gap:12px;padding:12px 0}
.brk + .brk{border-top:1px solid var(--line)}
.brk .tag{width:11px;height:11px;border-radius:50%;flex:0 0 auto}
.brk .nm{flex:1;font-weight:700;font-size:14px}
.brk .st{font-size:12px;font-weight:800;padding:3px 9px;border-radius:999px}
/* leaderboard */
.lead-hero{background:linear-gradient(160deg,#F0A500,#C77A00);color:#fff;padding:20px 18px;border-radius:0 0 24px 24px;text-align:center}
.lead-hero h2{font-size:20px;font-weight:900}
.lead-hero p{font-size:12.5px;color:#FFEAC7;margin-top:3px}
.podium{display:flex;align-items:flex-end;justify-content:center;gap:10px;margin-top:16px}
.pod{display:flex;flex-direction:column;align-items:center;gap:6px}
.pod .av{width:52px;height:52px;border-radius:50%;background:#fff;color:var(--gold-deep);display:flex;align-items:center;justify-content:center;font-weight:900;font-size:18px;border:3px solid #fff}
.pod .base{background:rgba(255,255,255,.2);border-radius:12px 12px 0 0;width:64px;display:flex;align-items:flex-start;justify-content:center;padding-top:7px;font-weight:900}
.pod .nm{font-size:11.5px;font-weight:700;max-width:64px;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pod .xp{font-size:10.5px;color:#FFEAC7}
.lrow{display:flex;align-items:center;gap:12px;padding:12px 0}
.lrow + .lrow{border-top:1px solid var(--line)}
.lrow .rk{width:26px;font-weight:900;color:var(--gray);text-align:center;flex:0 0 auto}
.lrow .nm{flex:1;font-weight:700;font-size:14px}
.lrow.me{background:#FEECEC;margin:0 -18px;padding:12px 18px;border-radius:12px}
.lrow.me .nm{color:var(--red-deep)}
/* League standings (Priorities 10–12). Performance is the figure on the right,
   because that is what decides the order; XP sits under the name as the
   tie-breaker it is. Same row, same chips — only what they carry has changed. */
.lrow .nm em{display:block;font-style:normal;font-size:11.5px;font-weight:600;color:var(--gray);margin-top:2px}
.lrow .nm .you{display:inline-block;font-size:10px;font-weight:800;letter-spacing:.04em;
  text-transform:uppercase;color:var(--red-deep);background:#fff;border:1px solid #F6C9C9;
  border-radius:999px;padding:1px 6px;margin-left:6px;vertical-align:1px}
.lrow .unranked{font-size:11.5px;font-weight:700;color:var(--gray)}
.lg-empty{padding:18px 0;text-align:center;font-size:13px;color:var(--gray);line-height:1.6}
.lg-mine{display:flex;align-items:center;gap:14px}
.lg-mine-rank{flex:0 0 auto;min-width:58px;text-align:center;background:#FEECEC;border-radius:14px;padding:8px 6px}
.lg-mine-rank b{display:block;font-size:22px;font-weight:900;color:var(--red-deep);line-height:1.1}
.lg-mine-rank span{display:block;font-size:10.5px;font-weight:700;color:var(--red-deep);opacity:.8}
.lg-mine-body{min-width:0}
.lg-mine-body h4{font-size:15px;font-weight:800;color:var(--ink)}
.lg-mine-body p{font-size:12px;color:var(--gray);margin-top:3px;line-height:1.5}
.lg-mine-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:14px;
  border-top:1px solid var(--line);padding-top:12px}
.lg-stat{text-align:center;min-width:0}
.lg-stat .v{font-size:15px;font-weight:900;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lg-stat .l{font-size:10px;font-weight:700;color:var(--gray);margin-top:2px;text-transform:uppercase;letter-spacing:.03em}
.lg-basis{font-size:11.5px;color:var(--gray);line-height:1.65;margin-top:12px}
/* Narrow phones: four figures in one row would crowd, so they fall to two. */
@media (max-width:359px){
  .lg-mine-stats{grid-template-columns:repeat(2,1fr);gap:10px}
}
/* profile */
.prof-hero{background:linear-gradient(160deg,#DC2626,#7F1D1D);color:#fff;padding:26px 18px 22px;text-align:center;border-radius:0 0 26px 26px}
.prof-hero .avatar{width:78px;height:78px;font-size:28px;margin:0 auto 12px;background:#fff;color:var(--red);border:3px solid rgba(255,255,255,.5)}
.prof-hero h2{font-size:21px;font-weight:900}
.prof-hero .id{font-size:12px;color:var(--red-mute);font-weight:600;margin-top:3px}
.badges{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.badge{text-align:center}
.badge .b{width:56px;height:56px;border-radius:16px;margin:0 auto 6px;display:flex;align-items:center;justify-content:center;color:#fff}
.badge.lock .b{background:var(--card);color:var(--mute)}
.badge span{font-size:10.5px;font-weight:700;color:var(--slate)}
.set-row{display:flex;align-items:center;gap:12px;padding:15px 0}
.set-row + .set-row{border-top:1px solid var(--line)}
.set-row .si{width:38px;height:38px;border-radius:11px;background:var(--card);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.set-row .lbl{flex:1}
.set-row .lbl h4{font-size:14.5px;font-weight:700}
.set-row .lbl p{font-size:12px;color:var(--gray);margin-top:1px}
/* stepper */
.stepper{display:flex;align-items:center;gap:14px}
.stepper button{width:34px;height:34px;border-radius:10px;border:1.5px solid var(--line);background:#fff;font-size:19px;font-weight:800;color:var(--red);cursor:pointer;line-height:1}
.stepper b{font-size:16px;font-weight:900;min-width:66px;text-align:center}
.toast{position:absolute;left:50%;bottom:92px;transform:translateX(-50%) translateY(20px);background:var(--ink);color:#fff;padding:12px 18px;border-radius:14px;font-size:13.5px;font-weight:700;z-index:90;opacity:0;transition:.28s;box-shadow:var(--sh-md);pointer-events:none;white-space:nowrap}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.spacer{height:22px}
/* ============ BRAND MARK ============ */
.gmark{display:block}
.brandline{display:flex;align-items:center;gap:7px}
.brandline b{font-size:12.5px;font-weight:800;letter-spacing:.2px;color:#fff}
/* ============ CLASSES / VIDEOS ============ */
.filter-strip{display:flex;gap:8px;overflow-x:auto;padding:2px 0 4px;margin:2px 0 6px}
.fchip{flex:0 0 auto;font-size:12.5px;font-weight:700;padding:8px 14px;border-radius:999px;background:#fff;border:1px solid var(--line);color:var(--slate);cursor:pointer;white-space:nowrap;font-family:var(--font)}
.fchip.on{background:var(--red);border-color:var(--red);color:#fff}
.fchip.brand{display:inline-flex;align-items:center;gap:6px;border-color:#F0C9A0;background:#FFF8EF;color:#8A5600}
.fchip.brand:not(.on):hover{border-color:#E6A75C;color:#6E4400}
.fchip.brand.on{background:linear-gradient(135deg,var(--red) 0%,#B91C1C 100%);border-color:var(--red);color:#fff}
.fchip-mark{width:12px;height:12px;flex:0 0 auto;color:currentColor}
.sub-lead{font-size:12.5px;color:var(--gray);margin:-4px 0 12px;line-height:1.45}
.vcard{display:block;width:100%;text-align:left;background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:var(--sh-sm);margin-bottom:14px;cursor:pointer;font-family:var(--font);padding:0}
.vcard:active{transform:scale(.99)}
.vthumb{position:relative;height:150px;display:flex;align-items:center;justify-content:center}
.vplay{width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.92);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(0,0,0,.25);cursor:pointer}
.vbadge{position:absolute;top:10px;left:10px;font-size:10px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;padding:4px 9px;border-radius:999px;background:rgba(0,0,0,.55);color:#fff;display:flex;align-items:center;gap:5px}
.vbadge.live{background:var(--red)}
.vdur{position:absolute;bottom:10px;right:10px;font-size:11px;font-weight:800;padding:3px 8px;border-radius:8px;background:rgba(0,0,0,.7);color:#fff;font-variant-numeric:tabular-nums}
.vmeta{padding:12px 14px 14px}
.vtag{display:inline-block;font-size:10.5px;font-weight:800;padding:3px 9px;border-radius:999px;margin-bottom:7px}
.vmeta h4{font-size:15px;font-weight:800;line-height:1.28}
.vmeta p{font-size:12.5px;color:var(--gray);margin-top:4px}
/* video player */
.player-stage{position:relative;aspect-ratio:16/9;display:flex;align-items:center;justify-content:center}
.player-stage .vplay{width:64px;height:64px}
.player-bar{display:flex;align-items:center;gap:10px;padding:12px 16px;background:var(--ink);color:#fff}
.player-track{flex:1;height:5px;border-radius:999px;background:rgba(255,255,255,.25);position:relative}
.player-track span{position:absolute;left:0;top:0;bottom:0;width:32%;background:var(--red);border-radius:999px}
.player-track i{position:absolute;left:32%;top:50%;transform:translate(-50%,-50%);width:13px;height:13px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.4)}
.player-time{font-size:11.5px;font-weight:700;font-variant-numeric:tabular-nums;color:#cbd2dc}
/* ============ RESOURCES ============ */
.rcard{display:flex;align-items:center;gap:8px;width:100%;background:#fff;border:1px solid var(--line);border-radius:16px;padding:15px 14px;box-shadow:var(--sh-sm);margin-bottom:13px;font-family:var(--font)}
.rcard-main{display:flex;align-items:center;gap:13px;flex:1;min-width:0;text-align:left;background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer}
.rcard-main:active{transform:scale(.99)}
.ricon{width:46px;height:46px;border-radius:12px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:900;color:#fff;letter-spacing:.3px}
.rcard h4{font-size:14.5px;font-weight:800;line-height:1.28}
.rcard p{font-size:12px;color:var(--gray);margin-top:3px}
.rcard-dl{flex:0 0 auto;width:38px;height:38px;border-radius:12px;background:var(--card);border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background-color .15s ease}
.rcard-dl:active{transform:scale(.94)}
.rcard-dl .icon{width:19px;height:19px}
.rcard{transition:box-shadow .18s ease,transform .18s ease,border-color .18s ease}
.ricon{box-shadow:inset 0 -10px 14px rgba(0,0,0,.12)}
@media (hover:hover){
  .rcard:hover{box-shadow:var(--sh-md);border-color:#DDD3C2;transform:translateY(-1px)}
  .rcard-dl:hover{background:#EAE1D3}
  .fchip:not(.on):hover{border-color:var(--red);color:var(--red-deep)}
}
@media (prefers-reduced-motion: no-preference){
  #resList .rcard{animation:fade .22s ease both}
  #resList .rcard:nth-child(2){animation-delay:.03s}
  #resList .rcard:nth-child(3){animation-delay:.06s}
  #resList .rcard:nth-child(4){animation-delay:.09s}
  #resList .rcard:nth-child(n+5){animation-delay:.12s}
}

/* ============ RESOURCE VIEWER (js/app.js openResourceMediaViewer) ============
   The overlay itself is built with inline styles in JS (layout-critical, kept
   there so the flex math stays next to the logic that depends on it). These
   rules only add polish — hover/press feedback, depth, a calmer entrance —
   through the class names the JS already attaches alongside those inline
   styles, so nothing here can change the viewer's sizing or behaviour. */
.goc-viewer-header{box-shadow:0 1px 0 rgba(17,24,39,.05)}
.goc-viewer-title{letter-spacing:.1px}
.goc-viewer-btn,.goc-zoom-btn,.goc-pager-btn{transition:background-color .15s ease,transform .1s ease}
.goc-viewer-btn:active,.goc-zoom-btn:active,.goc-pager-btn:active{transform:scale(.92)}
.goc-pager-btn:disabled{opacity:.38;cursor:default}
.goc-zoom-bar{backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);box-shadow:var(--sh-md)}
.goc-viewer-dl{transition:background-color .15s ease,transform .1s ease}
.goc-viewer-dl:active{transform:scale(.96)}
@media (hover:hover){
  .goc-viewer-btn:hover{background:#e9eaec}
  .goc-zoom-btn:hover{background:#f3f4f6}
  .goc-pager-btn:hover:not(:disabled){background:#e9eaec}
  .goc-viewer-dl:hover{background:var(--red-deep)}
}
@media (prefers-reduced-motion: no-preference){
  .goc-viewer{animation:fade .2s ease}
}

/* ============ LANDING PAGE (public homepage) ============ */
#landing{background:var(--white);color:var(--ink)}
.lp-nav{position:sticky;top:0;z-index:40;display:flex;align-items:center;justify-content:space-between;
  padding:14px 18px;background:rgba(255,255,255,.86);backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--line)}
.lp-brand{display:flex;align-items:center;gap:9px}
.lp-brand .bm{width:34px;height:34px;border-radius:10px;background:var(--red);display:flex;align-items:center;justify-content:center;flex:0 0 auto;box-shadow:0 5px 13px rgba(220,38,38,.3)}
.lp-brand .bt{font-size:15px;font-weight:900;letter-spacing:-.01em;color:var(--ink)}
.lp-nav .lp-actions{display:flex;align-items:center;gap:8px}
.lp-link{background:none;border:none;font-family:var(--font);font-weight:700;font-size:13.5px;color:var(--slate);cursor:pointer;padding:9px 10px}
.lp-cta{font-family:var(--font);font-weight:800;font-size:13.5px;color:#fff;background:var(--red);border:none;border-radius:11px;padding:9px 15px;cursor:pointer;box-shadow:0 5px 14px rgba(220,38,38,.28)}
/* ===== Mobile slide-out drawer (public homepage only) ===== */
.lp-burger{display:flex;flex-direction:column;justify-content:center;gap:4px;width:38px;height:38px;padding:0 9px;
  border:1px solid var(--line);background:#fff;border-radius:11px;cursor:pointer;flex:0 0 auto;margin-right:10px}
.lp-burger span{display:block;height:2px;border-radius:2px;background:var(--ink)}
.lp-burger span:nth-child(2){width:72%}
.lp-scrim{position:absolute;inset:0;z-index:70;background:rgba(15,18,25,.5);opacity:0;visibility:hidden;transition:opacity .26s ease}
.lp-scrim.on{opacity:1;visibility:visible}
.lp-drawer{position:absolute;top:0;left:0;bottom:0;z-index:71;width:82%;max-width:320px;background:#fff;
  display:flex;flex-direction:column;padding:16px 16px 18px;overflow-y:auto;
  transform:translateX(-102%);transition:transform .28s cubic-bezier(.22,.61,.36,1);box-shadow:14px 0 40px rgba(15,18,25,.22)}
.lp-drawer.on{transform:translateX(0)}
.dw-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.dw-head .lp-brand .bt{font-size:13.5px}
.dw-x{border:none;background:#F2F4F7;color:var(--ink);width:32px;height:32px;border-radius:9px;font-size:20px;line-height:1;cursor:pointer;flex:none}
.dw-motto{margin:12px 0 4px;font-size:11.5px;font-weight:700;color:var(--red);letter-spacing:.2px;line-height:1.5}
.dw-nav{display:flex;flex-direction:column;margin-top:12px;border-top:1px solid var(--line)}
.dw-nav button{display:flex;align-items:center;gap:10px;width:100%;text-align:left;font-family:var(--font);
  font-size:14.5px;font-weight:700;color:var(--ink);background:none;border:none;border-bottom:1px solid var(--line);
  padding:14px 2px;cursor:pointer}
.dw-nav button:active{background:#FAFAFB}
.dw-nav .dwi{color:var(--red);font-size:11px}
.dw-btns{margin-top:18px}
.dw-foot{margin-top:auto;padding-top:18px;display:flex;flex-direction:column;gap:5px}
.dw-foot a{font-size:12px;color:var(--slate);text-decoration:none}
/* Mobile: the drawer carries these links, so the top bar keeps only the CTA */
.lp-nav .lp-actions .lp-link{display:none}
.lp-hero{position:relative;overflow:hidden;padding:44px 20px 48px;text-align:center;
  background-color:#B91C1C;
  background:radial-gradient(120% 100% at 50% 0%,#DC2626 0%,#9d1a1a 52%,#6d1414 100%);color:#fff}
.lp-hero .kick{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);color:#fff;padding:6px 13px;border-radius:999px;margin-bottom:18px}
.lp-hero .lp-inner{position:relative;z-index:2}
.lp-hero h1{position:relative;z-index:2;color:#fff;font-size:31px;font-weight:900;line-height:1.12;letter-spacing:-.02em;max-width:16ch;margin:0 auto}
.lp-hero .sub{font-size:15px;line-height:1.55;color:#FFE1E1;max-width:44ch;margin:16px auto 0}
.lp-hero .hero-btns{display:flex;flex-direction:column;gap:11px;max-width:320px;margin:26px auto 0}
.lp-btn-light{background:#fff;color:var(--red);font-weight:800;border:none;border-radius:14px;padding:15px;font-size:15.5px;font-family:var(--font);cursor:pointer;box-shadow:0 10px 26px rgba(0,0,0,.22)}
.lp-btn-ghost{background:rgba(255,255,255,.08);color:#fff;font-weight:800;border:1.5px solid rgba(255,255,255,.4);border-radius:14px;padding:15px;font-size:15.5px;font-family:var(--font);cursor:pointer}
.lp-trust{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;margin-top:26px;color:var(--red-mute);font-size:12px;font-weight:600}
.lp-trust span{display:inline-flex;align-items:center;gap:6px}
.lp-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border-bottom:1px solid var(--line)}
.lp-stat{background:#fff;padding:22px 10px;text-align:center}
.lp-stat b{display:block;font-size:26px;font-weight:900;color:var(--red);letter-spacing:-.02em}
.lp-stat span{font-size:11.5px;font-weight:700;color:var(--gray)}
.lp-sec{padding:44px 20px}
.lp-sec.alt{background:var(--bg)}
.lp-eyebrow{font-size:11.5px;font-weight:800;letter-spacing:1.3px;text-transform:uppercase;color:var(--red);text-align:center}
.lp-sec h2{font-size:24px;font-weight:900;letter-spacing:-.02em;text-align:center;margin:10px auto 8px;max-width:20ch}
.lp-sec .lead{font-size:14.5px;line-height:1.55;color:var(--gray);text-align:center;max-width:52ch;margin:0 auto 26px}
.lp-feat{background:#fff;border:1px solid var(--line);border-radius:20px;padding:24px;margin-bottom:14px;box-shadow:var(--sh-sm)}
.lp-feat .fi{width:50px;height:50px;border-radius:14px;display:flex;align-items:center;justify-content:center;margin-bottom:15px}
/* Priority 1.1 — the connectors between the three ecosystem cards. The box sits
   in the gap below its card on a phone and in the gap beside it from 900px, so
   it is placed from the layout rather than from measured geometry. It is out of
   flow, so it can never reflow the row, and with no scripts running it stands
   still as a plain diagram. */
#lpFeatures .lp-grid .lp-feat{position:relative}
#lpFeatures .lp-grid .lp-feat:not(:last-child){margin-bottom:30px}
#lpFeatures .lp-thread{position:absolute;left:50%;top:100%;margin-left:-1px;width:2px;height:30px;pointer-events:none}
#lpFeatures .lp-thread .lt-svg{display:block;width:100%;height:100%;opacity:.34}
#lpFeatures .lp-thread .lt-h{display:none}
#lpFeatures .lp-thread .lt-dot{position:absolute;left:-2px;top:-3px;width:6px;height:6px;border-radius:50%;background:#DC2626;opacity:0}
.lp-feat h3{font-size:17px;font-weight:800;margin-bottom:7px;letter-spacing:-.01em}
.lp-feat p{font-size:13.5px;line-height:1.58;color:var(--slate)}
.lp-step{display:flex;gap:15px;padding:15px 0}
.lp-step + .lp-step{border-top:1px solid var(--line)}
.lp-step .sn{width:34px;height:34px;border-radius:10px;background:var(--red);color:#fff;font-weight:900;font-size:15px;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.lp-step h4{font-size:15.5px;font-weight:800;margin-bottom:3px}
.lp-step p{font-size:13.5px;line-height:1.5;color:var(--slate)}
.lp-quote{background:var(--ink);color:#fff;border-radius:22px;padding:28px 24px;text-align:center;max-width:640px;margin:0 auto}
.lp-quote .q{font-size:18px;font-weight:700;line-height:1.5;letter-spacing:-.01em}
.lp-quote .who{margin-top:18px;font-size:13px;color:#cbd2dc;font-weight:600}
.lp-band{background:linear-gradient(135deg,#DC2626,#7F1D1D);color:#fff;text-align:center;padding:40px 22px}
.lp-band h2{font-size:23px;font-weight:900;letter-spacing:-.02em;max-width:22ch;margin:0 auto 20px}
.lp-foot{background:#111318;border-top:1px solid #111318;padding:34px 20px 34px;text-align:center}
.lp-foot .fb .bt{color:#fff}
.lp-foot p{font-size:12px;color:#9aa3b2;line-height:1.6}
.lp-foot .fb{display:flex;align-items:center;justify-content:center;gap:9px;margin-bottom:12px}
.lp-foot .links{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin:14px 0}
.lp-foot .links a{font-size:12.5px;font-weight:700;color:#cbd2dc;cursor:pointer;text-decoration:none}

/* ---- homepage v2 additions ---- */
.lp-hero .hero-art{margin:30px auto 0;max-width:340px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);border-radius:22px;padding:16px;backdrop-filter:blur(2px)}
.lp-hero .hero-art .mini{background:#fff;border-radius:15px;padding:15px;text-align:left;box-shadow:0 16px 40px rgba(0,0,0,.28)}
.lp-hero .hero-art .mrow{display:flex;align-items:center;gap:10px;margin-bottom:11px}
.lp-hero .hero-art .mrow .av{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#DC2626,#F0A500);flex:0 0 auto}
.lp-hero .hero-art .mrow b{font-size:13px;color:var(--ink);display:block}
.lp-hero .hero-art .mrow span{font-size:11px;color:var(--gray)}
.lp-hero .hero-art .bar{height:9px;border-radius:6px;background:var(--line);overflow:hidden;margin-bottom:9px}
.lp-hero .hero-art .bar i{display:block;height:100%;background:linear-gradient(90deg,#DC2626,#F0A500);border-radius:6px}
.lp-hero .hero-art .chips{display:flex;gap:6px;margin-top:12px}
.lp-hero .hero-art .chips em{flex:1;text-align:center;font-style:normal;font-size:10.5px;font-weight:800;padding:7px 4px;border-radius:9px;background:#FDECC8;color:#8A5600}
.lp-logos{padding:22px 20px;text-align:center;background:#fff;border-bottom:1px solid var(--line)}
.lp-logos .cap{font-size:11px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:var(--gray);margin-bottom:12px}
.lp-logos .row{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.lp-logos .row b{font-size:12.5px;font-weight:800;color:var(--slate);background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:7px 14px}
.lp-subj{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;max-width:640px;margin:0 auto}
.lp-subj .sj{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px;box-shadow:var(--sh-sm)}
.lp-subj .sj .si{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:20px;margin-bottom:11px}
.lp-subj .sj h4{font-size:15px;font-weight:800;margin-bottom:3px}
.lp-subj .sj p{font-size:12px;color:var(--gray)}
.lp-contact{max-width:960px;margin:0 auto;display:grid;gap:16px}
.lp-cinfo{display:grid;gap:12px}
.lp-crow{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px 18px;box-shadow:var(--sh-sm)}
.lp-crow .ci{width:42px;height:42px;border-radius:11px;background:#FEECEC;color:var(--red);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.lp-crow .cl{display:block;font-size:11px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--gray);margin-bottom:3px}
.lp-crow .cv{display:block;font-size:14.5px;font-weight:700;color:var(--ink);text-decoration:none;word-break:break-word}
a.cv:hover{color:var(--red)}
.lp-cform{background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px;box-shadow:var(--sh-sm)}
.lp-cform label{display:block;font-size:12.5px;font-weight:700;margin:0 0 6px}
.lp-cform input,.lp-cform textarea{width:100%;font-family:var(--font);font-size:14px;border:1.5px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:14px;background:var(--bg);color:var(--ink)}
.lp-cform textarea{min-height:96px;resize:vertical}
.lp-cform input:focus,.lp-cform textarea:focus{outline:none;border-color:var(--red)}
.lp-cform button{width:100%;background:var(--red);color:#fff;font-family:var(--font);font-weight:800;font-size:15px;border:none;border-radius:13px;padding:14px;cursor:pointer;box-shadow:0 8px 20px rgba(220,38,38,.26)}
.lp-social{display:flex;gap:9px;justify-content:center;margin-top:14px}
.lp-social a,.lp-social button{font-size:17px;width:38px;height:38px;border-radius:11px;background:var(--bg);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--slate);cursor:pointer}
.lp-qcols{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:760px;margin:6px auto 20px;text-align:left}
.lp-qcol b{display:block;font-size:12px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;color:#fff;margin-bottom:10px}
.lp-qcol a,.lp-qcol button{background:none;border:none;text-align:left;font-family:inherit;display:block;font-size:13px;font-weight:600;color:#aeb6c4;cursor:pointer;text-decoration:none;padding:4px 0;word-break:break-word}
.legal-screen{background:var(--bg)}
.legal-wrap{max-width:840px;margin:0 auto;padding:22px 18px 38px}
.legal-card{background:#fff;border:1px solid var(--line);border-radius:22px;padding:24px 20px 20px;box-shadow:var(--sh-sm)}
.legal-card h1{font-size:30px;font-weight:900;letter-spacing:-.03em;margin:10px 0 10px}
.legal-card h2{font-size:18px;font-weight:800;margin:22px 0 10px;letter-spacing:-.02em}
.legal-card p,.legal-card li{font-size:14px;line-height:1.7;color:var(--slate)}
.legal-card ul{padding-left:20px;margin:10px 0}
.legal-card strong{color:var(--ink)}
.legal-card .meta{font-size:12.5px;color:var(--gray);font-weight:700;margin-top:8px}
.legal-actions{display:flex;justify-content:center;margin-top:20px}
.inline-legal-btn{background:none;border:none;padding:0;color:var(--red);font:inherit;font-weight:800;cursor:pointer;text-decoration:underline}
/* updates / news page */
.up-head{background:linear-gradient(135deg,#DC2626,#7F1D1D);color:#fff;padding:34px 20px 30px;text-align:center}
.up-head h1{font-size:26px;font-weight:900;letter-spacing:-.02em}
.up-head p{font-size:14px;color:#FFE1E1;margin-top:8px;max-width:44ch;margin-left:auto;margin-right:auto}
/* The filter row sits directly below the sticky .lp-nav. --goc-navh is measured
   at runtime (see upStickTop in js/app.js); the 66px is the fallback for a
   first paint, and for file:// where scripts may be slow. z-index stays under
   the nav's 40 so the nav always wins if they ever meet. */
.up-filterwrap{position:sticky;top:var(--goc-navh,66px);z-index:20;background:#fff;
  border-bottom:1px solid var(--line)}
.up-filterwrap::after{content:'';position:absolute;top:0;right:0;bottom:0;width:38px;pointer-events:none;
  background:linear-gradient(90deg,rgba(255,255,255,0),#fff 70%);opacity:0;transition:opacity .18s ease}
.up-filterwrap.up-more::after{opacity:1}
.up-filters{display:flex;gap:8px;overflow-x:auto;padding:14px 20px;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;-ms-overflow-style:none}
.up-filters::-webkit-scrollbar{display:none}
.up-chip{flex:0 0 auto;font-family:var(--font);font-size:12.5px;font-weight:800;border:1.5px solid var(--line);background:#fff;color:var(--slate);border-radius:999px;padding:8px 14px;cursor:pointer;scroll-margin:20px}
.up-chip.on{background:var(--red);border-color:var(--red);color:#fff;box-shadow:0 4px 12px rgba(220,38,38,.26)}
.up-list{padding:20px;display:grid;gap:14px;max-width:820px;margin:0 auto}
.up-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:20px;box-shadow:var(--sh-sm)}
.up-card .tagrow{display:flex;align-items:center;gap:9px;margin-bottom:10px;flex-wrap:wrap}
.up-tag{font-size:10.5px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;border-radius:999px;padding:4px 10px}
.up-tag.admission{background:#FEECEC;color:#B91C1C}
.up-tag.utme{background:#E7F1F4;color:#0E7490}
.up-tag.scholarship{background:#FDECC8;color:#8A5600}
.up-tag.news{background:#E6F4EC;color:#106b34}
.up-card .date{font-size:11.5px;color:var(--gray);font-weight:600}
.up-card h3{font-size:16.5px;font-weight:800;letter-spacing:-.01em;margin-bottom:6px}
.up-card p{font-size:13.5px;line-height:1.6;color:var(--slate)}
.up-card .more{margin-top:12px;font-size:12.5px;font-weight:800;color:var(--red);background:none;border:none;cursor:pointer;padding:0;font-family:var(--font)}

/* ============ AUTH (login / sign-up) ============ */
.auth{background:var(--bg);color:var(--ink);display:none}
.auth.active{display:flex}
.auth-brandbar{display:flex;align-items:center;justify-content:space-between;padding:15px 18px;background:#fff;border-bottom:1px solid var(--line)}
.auth-scroll{flex:1;overflow-y:auto;display:flex;flex-direction:column}
.auth-card{width:100%;max-width:420px;margin:0 auto;padding:30px 22px 40px}
.auth-card h1{font-size:25px;font-weight:900;letter-spacing:-.02em}
.auth-card .tagline{font-size:14px;color:var(--gray);margin-top:6px;line-height:1.5}
.auth-card form{margin-top:24px}
.auth-social{display:flex;flex-direction:column;gap:10px;margin-bottom:20px}
.auth-oauth{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;background:#fff;border:1.5px solid var(--line);border-radius:13px;padding:13px;font-family:var(--font);font-size:14.5px;font-weight:700;color:var(--ink);cursor:pointer}
.auth-oauth:active{background:var(--bg)}
.auth-or{display:flex;align-items:center;gap:12px;color:var(--mute);font-size:12px;font-weight:700;margin:4px 0 18px}
.auth-or::before,.auth-or::after{content:"";flex:1;height:1px;background:var(--line)}
.auth-row{display:flex;gap:12px}
.auth-row .field{flex:1}
.field-hint{font-size:11.5px;color:var(--mute);line-height:1.5;margin-top:6px}
.pw-wrap{position:relative}
.pw-toggle{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--gray);font-size:12px;font-weight:800;cursor:pointer;font-family:var(--font)}
.auth-opts{display:flex;align-items:center;justify-content:space-between;margin:4px 0 20px}
.check-lbl{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--slate);cursor:pointer}
.check-lbl input{width:17px;height:17px;accent-color:var(--red)}
.auth-link{background:none;border:none;color:var(--red);font-weight:800;font-size:13px;cursor:pointer;font-family:var(--font);padding:0}
.auth-select{width:100%;border:1.5px solid var(--line);border-radius:14px;padding:14px;font-size:15px;font-family:var(--font);background:var(--bg);color:var(--ink);-webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%236B7280' stroke-width='2'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center}
.auth-swap{text-align:center;font-size:13.5px;color:var(--gray);margin-top:22px}
.auth-legal{font-size:11.5px;color:var(--mute);line-height:1.5;margin-top:16px;text-align:center}
.auth-side{display:none}
.auth-back{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1.5px solid var(--line);border-radius:11px;padding:9px 14px;font-family:var(--font);font-size:13px;font-weight:800;color:var(--slate);cursor:pointer;margin-bottom:20px}
.auth-back:hover{border-color:var(--red);color:var(--red)}
.auth-card .auth-back{display:none}

/* ===== Sign-up: exam notice + JAMB subject combination =====
   The academy registers UTME candidates only, and every candidate takes Use of
   English plus exactly three sciences. Both rules are explained here on screen;
   the API enforces them again so the form is never the only guard. */
.exam-note{margin-top:10px;border:1.5px solid #FBD5D5;background:#FEF6F6;border-radius:13px;padding:11px 13px;font-size:12px;line-height:1.55;color:var(--red-deep)}
.exam-note b{display:block;font-size:12.5px;margin-bottom:3px;color:var(--red-dk)}
.exam-note span{color:var(--slate)}
.exam-note span b{display:inline;margin:0;color:var(--red-deep)}
.subj-pick{border:1.5px solid var(--line);border-radius:16px;padding:14px;background:var(--bg)}
.signup-gate{border:1.5px solid var(--line);border-radius:16px;padding:14px;background:var(--bg)}
.signup-gate input{text-transform:uppercase;letter-spacing:.06em;font-weight:800}
.signup-gate input::placeholder{text-transform:none;letter-spacing:0;font-weight:600}
.subj-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
.subj-opt{position:relative;display:flex;align-items:center;gap:9px;background:#fff;border:1.5px solid var(--line);border-radius:13px;padding:11px 12px;font-size:13.5px;font-weight:700;color:var(--slate);cursor:pointer;transition:border-color .14s ease,background .14s ease}
.subj-opt input{position:absolute;opacity:0;width:1px;height:1px}
.subj-opt .so-box{flex:none;width:19px;height:19px;border-radius:6px;border:1.5px solid var(--line);background:var(--bg);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:900;color:transparent}
.subj-opt .so-name{flex:1;min-width:0}
.subj-opt .so-tag{font-size:10.5px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;color:var(--red-deep);background:#FEECEC;border-radius:999px;padding:4px 8px}
.subj-opt.on{border-color:var(--red);background:#FEF6F6;color:var(--ink)}
.subj-opt.on .so-box,.subj-opt .so-box.on{border-color:var(--red);background:var(--red);color:#fff}
.subj-opt.locked{cursor:default;background:#fff;border-color:#FBD5D5}
.subj-opt input:focus-visible + .so-box{outline:2px solid var(--red);outline-offset:2px}
.subj-foot{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin-top:10px}
.subj-count{font-size:11.5px;font-weight:800;color:var(--slate)}
.subj-count.done{color:var(--green)}
.subj-msg{font-size:11.5px;font-weight:700;color:var(--red-deep);line-height:1.45}
@media (max-width:359px){ .subj-grid{grid-template-columns:1fr} }

/* ============ DESKTOP / TABLET — ADAPTIVE WEB APP (left sidebar) ============
   Below 900px the layout is the untouched mobile phone. At >=900px the app
   fills the window: the bottom tab bar becomes a left sidebar, content sits in a
   centred reading column, and the login screen stays full-bleed. ============ */
.side-brand{display:none}
@media (min-width:900px){
  html,body{height:100%}
  body{background:var(--bg);display:block;margin:0;padding:0}
  .phone{position:relative;width:100vw;height:100dvh;max-width:none;border-radius:0;box-shadow:none;background:var(--bg)}
  .notch{display:none}

  /* the bottom tab bar becomes a fixed left sidebar on every app screen */
  .phone:not(.is-login) .tabbar{
    display:flex!important;flex-direction:column;align-items:stretch;
    top:0;bottom:0;left:0;right:auto;width:256px;height:auto;
    background:#fff;backdrop-filter:none;border-top:none;border-right:1px solid var(--line);
    padding:0;z-index:60;box-shadow:2px 0 22px rgba(17,24,39,.05)}
  .phone.is-login .tabbar{display:none!important}
  .side-brand{display:flex;align-items:center;gap:11px;padding:22px 20px 18px;border-bottom:1px solid var(--line)}
  .side-brand .bmk{width:40px;height:40px;border-radius:12px;background:var(--red);color:#fff;display:flex;align-items:center;justify-content:center;flex:0 0 auto;box-shadow:0 6px 15px rgba(220,38,38,.32)}
  .side-brand .bwrap{display:flex;flex-direction:column;line-height:1.12}
  .side-brand .bt{font-size:14.5px;font-weight:900;color:var(--ink);letter-spacing:-.01em}
  .side-brand .bs{font-size:11px;font-weight:700;color:var(--gray);margin-top:2px}
  .tabbar .tab{flex:0 0 auto;flex-direction:row;justify-content:flex-start;gap:14px;width:100%;padding:13px 20px;font-size:14.5px;color:var(--slate)}
  .tabbar .tab .icon{width:22px;height:22px}
  .tabbar .tab.on{color:var(--red-deep);background:#FEECEC;box-shadow:inset 4px 0 0 var(--red)}

  /* content sits to the right of the sidebar; login stays full-bleed */
  .phone:not(.is-login) .screens{left:256px}
  .phone.is-login .screens{left:0}

  /* centred reading column so nothing stretches edge-to-edge */
  .phone:not(.is-login) .screen>*{max-width:980px;width:100%;margin-left:auto;margin-right:auto}

  /* let the video / resource collections use the extra width */
  .phone:not(.is-login) #liveList,
  .phone:not(.is-login) #lessonList,
  .phone:not(.is-login) #resList{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
  .phone:not(.is-login) #liveList>*,
  .phone:not(.is-login) #lessonList>*,
  .phone:not(.is-login) #resList>*{margin-bottom:0}

  /* login as a centred card on the full red canvas */
  #login{justify-content:center;align-items:center;padding:32px}
  #login .login-top{padding:0 26px 26px;max-width:520px}
  #login>div[style*="flex:1"]{display:none}
  #login .login-form{width:100%;max-width:430px;border-radius:26px;box-shadow:0 30px 70px rgba(0,0,0,.35)}

  .toast{bottom:28px}

  /* extra breathing room on desktop so the wide column never feels cramped */
  .phone:not(.is-login) .wrap{padding:0 30px}
  .phone:not(.is-login) .sec-head{margin:30px 0 14px}
  .phone:not(.is-login) .tile{margin-bottom:16px}
  .phone:not(.is-login) .tt-block{margin-bottom:14px}
  .phone:not(.is-login) #liveList,
  .phone:not(.is-login) #lessonList,
  .phone:not(.is-login) #resList{gap:20px}
  .phone:not(.is-login) .lesson-body{padding:26px 30px}
  .phone:not(.is-login) .q-card{padding:24px 30px}
  .phone:not(.is-login) .dash-hero,
  .phone:not(.is-login) .lead-hero,
  .phone:not(.is-login) .prof-hero{padding-left:30px;padding-right:30px}

  /* ---- landing page: centred content, wider hero, multi-column grids ---- */
  /* Desktop keeps the original inline nav — no burger, no drawer. */
  .lp-burger{display:none}
  .lp-drawer,.lp-scrim{display:none}
  .lp-nav .lp-actions .lp-link{display:inline-block}
  #landing .lp-nav{padding:16px max(24px,calc((100% - 1120px)/2))}
  #landing .lp-hero{padding:72px 20px 76px}
  #landing .lp-hero h1{font-size:50px;max-width:18ch}
  #landing .lp-hero .sub{font-size:18px;margin-top:20px}
  #landing .lp-hero .hero-btns{flex-direction:row;justify-content:center;max-width:none}
  #landing .lp-hero .lp-btn-light,#landing .lp-hero .lp-btn-ghost{min-width:190px}
  #landing .lp-stats,#landing .lp-inner{max-width:1120px;margin:0 auto}
  #landing .lp-sec>*{max-width:1000px;margin-left:auto;margin-right:auto}
  #landing .lp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:1000px;margin:0 auto}
  #landing .lp-grid .lp-feat{margin-bottom:0}
  /* Priority 1.1 — the same two connectors, turned to run across the row. */
  #landing #lpFeatures .lp-grid .lp-feat:not(:last-child){margin-bottom:0}
  #landing #lpFeatures .lp-thread{left:100%;top:50%;margin-left:0;margin-top:-1px;width:18px;height:2px}
  #landing #lpFeatures .lp-thread .lt-v{display:none}
  #landing #lpFeatures .lp-thread .lt-h{display:block}
  #landing #lpFeatures .lp-thread .lt-dot{left:-3px;top:-2px}
  #landing .lp-sec h2{font-size:32px}
  #landing .lp-hero .lp-inner{display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:40px;max-width:1120px;margin:0 auto;text-align:left}
  #landing .lp-hero h1,#landing .lp-hero .sub{margin-left:0;margin-right:0}
  #landing .lp-hero .kick,#landing .lp-hero .lp-trust{justify-content:flex-start}
  #landing .lp-hero .hero-btns{justify-content:flex-start;margin-left:0}
  #landing .lp-hero .hero-art{margin:0;max-width:none;grid-row:span 1}
  #landing .lp-subj{grid-template-columns:repeat(4,1fr);max-width:1000px}
  #landing .lp-contact{grid-template-columns:.9fr 1.1fr;align-items:start}
  #landing .lp-qcols{max-width:820px}

  /* ---- auth: two-panel layout (brand story + form) ---- */
  .phone.is-login #login-v2 .auth-scroll,
  .phone.is-login #signup .auth-scroll{flex-direction:row}
  .auth-side{display:flex;flex-direction:column;justify-content:space-between;flex:1;
    background:radial-gradient(120% 100% at 20% 0%,#DC2626,#7F1D1D);color:#fff;padding:48px 44px}
  .auth-side .as-top{display:flex;align-items:center;gap:11px}
  .auth-side .as-top b{font-size:16px;font-weight:900}
  .auth-side h2{font-size:34px;font-weight:900;line-height:1.15;letter-spacing:-.02em;margin-top:auto;max-width:16ch}
  .auth-side p{font-size:15px;color:#FFE1E1;line-height:1.6;margin-top:16px;max-width:40ch}
  .auth-side .as-points{margin-top:28px;display:flex;flex-direction:column;gap:14px}
  .auth-side .as-pt{display:flex;align-items:center;gap:11px;font-size:14px;font-weight:600}
  .auth-side .as-pt .ck{width:24px;height:24px;border-radius:50%;background:rgba(255,255,255,.16);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
  .phone.is-login #login-v2 .auth-brandbar,
  .phone.is-login #signup .auth-brandbar{display:none}
  .phone.is-login #login-v2 .auth-formwrap,
  .phone.is-login #signup .auth-formwrap{flex:1;display:flex;align-items:flex-start;justify-content:center;overflow-y:auto;padding:48px 24px}
  .phone.is-login .auth-formwrap .auth-card{margin:auto 0}
  .auth-card{padding:40px 30px}
  .phone.is-login .auth-card .auth-back{display:inline-flex}
}
@media (min-width:1280px){
  .phone:not(.is-login) .screen>*{max-width:1060px}
}

/* ==========================================================================
   PRIORITY 1 — PREMIUM MOTION
   --------------------------------------------------------------------------
   Four rules govern everything in this section, and breaking any one of them
   is a defect rather than a matter of taste:

   1. Only transform and opacity are animated. Nothing here animates width,
      height, margin, padding, top/left or letter-spacing, so no animation can
      move text that is already on screen or cost a layout pass on a cheap
      phone.
   2. Nothing is hidden unless JavaScript is running. Every reveal below is
      gated behind html.anim-on, which js/app.js adds only once it is able to
      take the class back off again. Without scripts, or if the reveal code
      never runs, the page is simply visible — a motion effect must never be
      able to make content unreadable.
   3. Space is reserved before the animation starts. Cards translate within
      space the grid has already allocated, so nothing reflows as they arrive.
   4. Every effect sits inside @media (prefers-reduced-motion: no-preference).
      A student who has asked their phone to stop animating things gets a
      static page, not a slower one.

   The logo is never animated. .lp-brand and .bm are deliberately absent from
   this entire section; only the .bt wordmark text beside the logo moves.
   ======================================================================== */

@media (prefers-reduced-motion: no-preference){

  /* ---- 1.1 the connected ecosystem ------------------------------------
     "Three parts working as one" is the claim the section makes, so the three
     cards arrive in sequence rather than together, and each one's icon wakes
     as it lands — a signal passing along the row. The stagger is what carries
     the meaning; the fade is only there to make it graceful. */
  html.anim-on #lpFeatures .lp-feat{opacity:0;transform:translateY(18px)}
  html.anim-on #lpFeatures .lp-grid.rv .lp-feat{animation:featIn .58s cubic-bezier(.22,.68,.36,1) both}
  html.anim-on #lpFeatures .lp-grid.rv .lp-feat:nth-child(2){animation-delay:.13s}
  html.anim-on #lpFeatures .lp-grid.rv .lp-feat:nth-child(3){animation-delay:.26s}

  html.anim-on #lpFeatures .lp-feat .fi{transform:scale(.86)}
  html.anim-on #lpFeatures .lp-grid.rv .lp-feat .fi{animation:iconWake .62s cubic-bezier(.34,1.4,.5,1) both}
  html.anim-on #lpFeatures .lp-grid.rv .lp-feat:nth-child(2) .fi{animation-delay:.26s}
  html.anim-on #lpFeatures .lp-grid.rv .lp-feat:nth-child(3) .fi{animation-delay:.39s}

  /* The thread between two cards draws once the card it leaves has landed, and a
     particle then travels along it on a loop: progressive activation first,
     continuous flow after — three parts connecting, then staying connected. The
     path is scaled along its own axis rather than drawn with stroke-dashoffset,
     which would animate a property that costs a paint on every frame. */
  html.anim-on #lpFeatures .lp-thread{transform:scaleY(0);transform-origin:top center}
  html.anim-on #lpFeatures .lp-grid.rv .lp-thread{animation:threadDraw .46s cubic-bezier(.22,.68,.36,1) .44s both}
  html.anim-on #lpFeatures .lp-grid.rv .lp-feat:nth-child(2) .lp-thread{animation-delay:.57s}
  html.anim-on #lpFeatures .lp-grid.rv .lp-thread .lt-dot{animation:dotFlow 2.8s linear 1s infinite}
  html.anim-on #lpFeatures .lp-grid.rv .lp-feat:nth-child(2) .lp-thread .lt-dot{animation-delay:1.4s}

  /* From 900px the same two threads run across the row instead of down it, so
     only the axis of each keyframe changes. */
  @media (min-width:900px){
    html.anim-on #lpFeatures .lp-thread{transform:scaleX(0);transform-origin:left center}
    html.anim-on #lpFeatures .lp-grid.rv .lp-thread{animation-name:threadDrawH}
    html.anim-on #lpFeatures .lp-grid.rv .lp-thread .lt-dot{animation-name:dotFlowH}
  }

  /* The subject tiles use the same idea at a faster cadence, because there are
     five of them and a long stagger would read as sluggish. */
  html.anim-on .lp-subj .sj{opacity:0;transform:translateY(14px)}
  html.anim-on .lp-subj.rv .sj{animation:featIn .48s cubic-bezier(.22,.68,.36,1) both}
  html.anim-on .lp-subj.rv .sj:nth-child(2){animation-delay:.06s}
  html.anim-on .lp-subj.rv .sj:nth-child(3){animation-delay:.12s}
  html.anim-on .lp-subj.rv .sj:nth-child(4){animation-delay:.18s}
  html.anim-on .lp-subj.rv .sj:nth-child(5){animation-delay:.24s}

  /* ---- 1.4 the wordmark, and only the wordmark ------------------------
     The mark itself must not move, so this targets the .bt text span inside
     the nav brand and nothing else. Opacity and a 7px slide: the text settles
     beside a logo that was already in place. */
  html.anim-on #landing .lp-nav .lp-brand .bt{animation:markIn .66s ease-out both}

  /* ---- 1.2 / 1.3 the hand-off into the app ---------------------------
     Signing in and signing up are the two moments the app should feel like it
     opened rather than switched. .enter-rich is set by js/app.js for exactly
     one screen activation and cleared on the next, so this plays once on
     arrival and never again on an ordinary tab change. */
  .screen.active.enter-rich{animation:richIn .5s cubic-bezier(.2,.7,.3,1)}
  .screen.active.enter-rich>*{animation:featIn .52s cubic-bezier(.22,.68,.36,1) both;animation-delay:.06s}
  /* The blocks of the dashboard arrive in reading order, which is what makes the
     arrival read as a sequence — authentication, entry, then the dashboard
     assembling — without a single timer standing between the student and a
     screen that is already interactive. Everything past the fourth block shares
     one delay, so a long screen never has a slow bottom. */
  .screen.active.enter-rich>*:nth-child(2){animation-delay:.13s}
  .screen.active.enter-rich>*:nth-child(3){animation-delay:.2s}
  .screen.active.enter-rich>*:nth-child(4){animation-delay:.27s}
  .screen.active.enter-rich>*:nth-child(n+5){animation-delay:.34s}

  /* 1.3 only — the Scholar ID the server has just issued is the last thing to
     settle, because it is the one part of a new account the student has to keep.
     js/app.js marks the screen with .enter-id on that one arrival, so an
     ordinary login does not re-announce an ID the student already has. */
  .screen.active.enter-rich.enter-id #idStrip{animation:idLand .6s cubic-bezier(.34,1.35,.5,1) .42s both}

  /* The primary button acknowledges the press before the network answers. */
  .lp-cta:active,.btn.primary:active{transform:translateY(1px) scale(.985)}
}

@keyframes featIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes iconWake{from{transform:scale(.86)}to{transform:scale(1)}}
@keyframes markIn{from{opacity:0;transform:translateX(-7px)}to{opacity:1;transform:none}}
@keyframes richIn{from{opacity:0;transform:scale(.988)}to{opacity:1;transform:none}}
@keyframes threadDraw{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes threadDrawH{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes dotFlow{0%{opacity:0;transform:translateY(0)}14%{opacity:1}82%{opacity:1}100%{opacity:0;transform:translateY(30px)}}
@keyframes dotFlowH{0%{opacity:0;transform:translateX(0)}14%{opacity:1}82%{opacity:1}100%{opacity:0;transform:translateX(18px)}}
@keyframes idLand{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}

/* ===== Self-directed study: set-up, reading picker, study review =====
   The student chooses the paper, the topics, the question count and — for CBT
   only — the clock. Topic rows are real buttons rather than checkbox inputs so
   the whole row is a tap target on a phone; the tick is drawn in CSS. */
.ss-link{background:none;border:none;font-family:var(--font);font-size:12.5px;font-weight:800;color:var(--red);cursor:pointer;padding:0}
.ss-row{display:flex;align-items:center;gap:12px;padding:13px 0;width:100%;text-align:left;background:none;border:none;font-family:var(--font);cursor:pointer}
.ss-row + .ss-row{border-top:1px solid var(--line)}
.ss-row .bx{width:22px;height:22px;flex:0 0 auto;border-radius:7px;border:1.5px solid var(--line);background:#fff;position:relative;transition:.12s}
.ss-row.on .bx{background:var(--red);border-color:var(--red)}
.ss-row.on .bx:after{content:"";position:absolute;left:6px;top:3px;width:6px;height:11px;border-right:2.5px solid #fff;border-bottom:2.5px solid #fff;transform:rotate(40deg)}
.ss-row .nm{flex:1;min-width:0}
.ss-row .nm b{display:block;font-size:14px;font-weight:800;color:var(--ink)}
.ss-row .nm span{font-size:11.5px;color:var(--gray);font-variant-numeric:tabular-nums}
.ss-row[disabled]{opacity:.5;cursor:default}
.wt-seg .wt-tab.sm{font-size:13px;padding:11px 4px}
/* Reading picker: a topic, then the notes published under it. */
.rd-tp{font-size:11.5px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--gray);margin:18px 0 8px}
.rd-note{display:flex;align-items:center;gap:12px;padding:14px;width:100%;text-align:left;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--sh-sm);margin-bottom:10px;font-family:var(--font);cursor:pointer}
.rd-note .nm{flex:1;min-width:0}
.rd-note .nm b{display:block;font-size:14.5px;font-weight:800;color:var(--ink)}
.rd-note .nm span{font-size:11.5px;color:var(--gray)}
.rd-note .mins{flex:0 0 auto;font-size:11px;font-weight:800;color:var(--slate);background:var(--bg);border-radius:999px;padding:5px 10px}

/* A tile the academy has not opened yet: legible, clearly inert, and it keeps
   its place in the list so the student can see what is on the way. */
.tile.soon{ opacity:.72; }
.tile.soon .ti{ filter:grayscale(.55); }
.soon-tag{
  display:inline-block; margin-left:6px; padding:2px 7px; border-radius:999px;
  background:#EEF1F5; color:#5B6472; font-size:10px; font-weight:800;
  letter-spacing:.02em; text-transform:uppercase; vertical-align:middle;
}

/* Results & Review — one card per type of test sat, then the papers themselves. */
.rs-sec{ display:flex; align-items:center; gap:11px; width:100%; text-align:left;
  background:#fff; border:1px solid #EBEEF2; border-radius:14px; padding:11px 13px;
  margin-bottom:9px; cursor:pointer; }
.rs-sec:active{ background:#FAFBFC; }
.rs-pct{ flex:none; min-width:56px; padding:9px 4px; border-radius:12px; text-align:center;
  font-size:15px; font-weight:800; letter-spacing:-.01em; }
.rs-pct.sm{ min-width:48px; padding:7px 4px; font-size:13px; }
.rs-body{ flex:1; min-width:0; }
.rs-body h4{ margin:0; font-size:14px; font-weight:700; color:#151A21; }
.rs-body p{ margin:2px 0 0; font-size:11.5px; color:#6B7480; }
.rs-w{ flex:none; font-size:10px; font-weight:800; color:#8A93A0; text-transform:uppercase;
  letter-spacing:.03em; }

/* ---- the objective sitting and the sessions held back for the pilot ---- */
.wt-sec.soon{ opacity:.72; }
.wt-none.soon{ display:block; width:100%; text-align:left; background:none; border:0;
  font:inherit; font-size:12.5px; color:#6B7480; font-weight:600; padding:14px 0 2px;
  line-height:1.5; cursor:pointer; }
.wt-row .nm span.papers{ display:block; margin-top:2px; font-size:11px; color:#8A93A0;
  font-weight:700; }
.timer.none{ font-size:12px; font-weight:800; letter-spacing:.02em; opacity:.85; }

/* ---- the dashboard's own panels (drawn from the account's real record) ---- */
.dash-card{ padding:4px 16px; }
.dash-card .wt-none{ padding:12px 0; }
.dash-jump{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.dj{ display:block; text-align:left; background:#fff; border:1px solid var(--line);
  border-radius:16px; box-shadow:var(--sh-sm); padding:13px; font-family:var(--font);
  cursor:pointer; transition:.14s; }
.dj:active{ transform:scale(.98); }
.dj b{ display:block; font-size:13.5px; font-weight:800; color:var(--ink); margin-top:9px; }
.dj s{ display:block; text-decoration:none; font-size:11px; color:var(--gray);
  font-weight:600; line-height:1.35; margin-top:2px; }
.dj-i{ display:flex; align-items:center; justify-content:center; width:34px; height:34px;
  border-radius:11px; color:#fff; }
.dj-i .icon{ width:18px; height:18px; }
@media (min-width:720px){ .dash-jump{ grid-template-columns:repeat(4,1fr); } }

/* ============ MATHEMATICS ============
   The Hub sets its own formulas. There is no MathJax and no KaTeX because the
   page loads nothing from another origin and has to work in a hall with no
   internet, so a fraction is a two-row inline-block, a root is a glyph beside an
   overlined body, and a limit is a stacked column. Every rule below is either
   size, spacing or stacking — nothing here measures text, which is what makes it
   safe on a 360px phone as well as on a laptop. */
.mth{ display:inline-block; font-family:"Cambria Math",Cambria,"Latin Modern Math",
  "STIX Two Math","Times New Roman",Times,serif; font-size:1.06em; line-height:1.28;
  white-space:nowrap; vertical-align:-.08em; }
.mth i{ font-style:italic; }
/* A formula on its own line. Long ones — the quadratic formula on a small phone —
   scroll sideways rather than pushing the whole question off the screen. */
.mth-d{ display:block; margin:10px 0; text-align:center; font-size:1.16em;
  max-width:100%; overflow-x:auto; overflow-y:hidden; padding-bottom:2px; }

/* ---- fractions ---- */
.m-frac{ display:inline-block; vertical-align:-.52em; text-align:center;
  margin:0 .16em; }
.m-num{ display:block; padding:0 .22em .06em; border-bottom:1.1px solid currentColor; }
.m-den{ display:block; padding:.08em .22em 0; }
.m-frac.m-nobar>.m-num{ border-bottom:0; padding-bottom:.02em; }
.m-frac.m-nobar>.m-den{ padding-top:.02em; }

/* ---- roots ---- */
.m-sqrt{ display:inline-block; white-space:nowrap; margin:0 .06em; }
.m-idx{ display:inline-block; font-size:.62em; vertical-align:.66em; margin-right:-.34em; }
.m-rad{ display:inline-block; transform:scaleY(1.18); transform-origin:center;
  padding-right:.02em; }
.m-rbody{ display:inline-block; border-top:1.1px solid currentColor;
  padding:.1em .12em 0 .16em; }

/* ---- powers and indices ---- */
.m-sup,.m-sub{ display:inline-block; font-size:.7em; line-height:1; }
.m-sup{ vertical-align:.62em; }
.m-sub{ vertical-align:-.28em; }
.m-ss{ display:inline-block; font-size:.7em; line-height:1.06; text-align:left;
  vertical-align:-.1em; }
.m-ss>.m-u,.m-ss>.m-l{ display:block; }

/* ---- spacing, which is a property of what a symbol is ---- */
.m-bin{ margin:0 .22em; }
.m-rel{ margin:0 .28em; }
.m-sgn{ margin-right:.02em; }
.m-pun{ margin-right:.18em; }
.m-sp{ display:inline-block; width:.22em; }
.m-sp.m-wide{ width:.9em; }
.m-sp.m-wider{ width:1.8em; }
.m-fn{ font-style:normal; margin:0 .16em 0 .06em; }
.m-txt{ font-family:var(--font); font-style:normal; font-size:.93em; margin:0 .1em; }
.m-bf{ font-weight:700; }
.m-it{ font-style:italic; }
.m-ph{ visibility:hidden; }

/* ---- bars, hats and arrows over a symbol ---- */
.m-ov{ display:inline-block; border-top:1.1px solid currentColor; padding-top:.08em; }
.m-un{ display:inline-block; border-bottom:1.1px solid currentColor; padding-bottom:.06em; }
.m-acc{ display:inline-block; position:relative; }
.m-accm{ position:absolute; left:0; right:0; top:-.62em; font-size:.82em;
  text-align:center; line-height:1; }

/* ---- sums, integrals and limits ---- */
.m-bigop{ font-size:1.34em; vertical-align:-.14em; margin:0 .08em; }
.m-big{ display:inline-block; text-align:center; vertical-align:-.34em; margin:0 .1em; }
.m-lim{ display:block; font-size:.66em; line-height:1.1; }

/* ---- brackets that grow, matrices and determinants ---- */
.m-fence{ display:inline-block; }
.m-fence.m-tall{ transform-origin:center; }
.m-mat,.m-grid{ display:inline-table; vertical-align:middle; margin:0 .1em; }
.m-row{ display:table-row; }
.m-cell{ display:table-cell; padding:.08em .4em; text-align:center; }

/* ---- what a formula the Hub cannot set looks like ---- */
.m-raw{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.86em; background:#FDECC8; color:#8A5600; border-radius:5px;
  padding:0 .22em; white-space:pre-wrap; }

/* The console's live preview of a formula as the author types it, and the plain
   warnings under it. The point is that she never has to save to find out. */
.mprev{ background:#fff; border:1px solid var(--line); border-radius:var(--r-sm);
  padding:11px 12px; font-size:13.5px; color:var(--ink); line-height:1.55;
  overflow-x:auto; }
.mprev.empty{ color:var(--mute); font-style:italic; }
.mprev+.mprev{ margin-top:7px; }
.mprev b{ display:inline-block; font-size:10px; font-weight:800; color:var(--mute);
  text-transform:uppercase; letter-spacing:.05em; margin-right:7px; }
.mprev-l{ display:block; font-size:10px; font-weight:800; color:var(--mute);
  text-transform:uppercase; letter-spacing:.05em; margin:12px 0 5px; }
.mwarn{ margin-top:8px; padding:9px 11px; background:var(--gold-soft);
  border-radius:var(--r-sm); font-size:11.5px; color:#7A4E00; line-height:1.5; }
.mwarn b{ display:block; font-weight:800; margin-bottom:3px; }
.mwarn ul{ margin:0; padding-left:15px; }
.mwarn li+li{ margin-top:3px; }
.mhelp{ margin-top:9px; font-size:11.5px; color:var(--gray); line-height:1.75; }
.mhelp code{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:11px; background:var(--card); border-radius:4px; padding:1px 4px;
  color:var(--slate); }
.mhelp span{ display:inline-block; margin-right:10px; white-space:nowrap; }


/* G.O.C resource management */
#admResourceList{
  margin-top:8px;
}

.goc-resource-item{
  display:flex;
  align-items:center;
  gap:12px;
  padding:13px 0;
  border-bottom:1px solid #F1F2F4;
}

.goc-resource-item:last-child{
  border-bottom:none;
}

.goc-resource-icon{
  width:42px;
  height:42px;
  flex:0 0 42px;
  border-radius:10px;
  background:#F3F4F6;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  font-weight:800;
  color:#475467;
}

.goc-resource-main{
  flex:1;
  min-width:0;
}

.goc-resource-title{
  display:block;
  font-size:13px;
  line-height:1.35;
  font-weight:700;
  color:#141821;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.goc-resource-meta{
  display:flex;
  flex-wrap:wrap;
  gap:5px;
  margin-top:5px;
}

.goc-resource-meta span{
  font-size:10.5px;
  color:#667085;
  background:#F8F9FA;
  border:1px solid #EAECF0;
  border-radius:999px;
  padding:3px 7px;
}

.goc-resource-actions{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:6px;
  flex:0 0 auto;
}

.goc-resource-status{
  font-size:10px;
  font-weight:800;
  border-radius:999px;
  padding:4px 8px;
}

.goc-resource-status.draft{
  color:#B54708;
  background:#FFFAEB;
}

.goc-resource-status.published{
  color:#027A48;
  background:#ECFDF3;
}

.goc-resource-actions .ad-btn{
  min-width:82px;
  padding:7px 10px;
  font-size:11.5px;
}

@media (max-width:520px){
  .goc-resource-item{
    align-items:flex-start;
  }

  .goc-resource-icon{
    width:38px;
    height:38px;
    flex-basis:38px;
  }

  .goc-resource-title{
    white-space:normal;
  }

  .goc-resource-actions{
    align-items:flex-end;
  }
}

/* Phase 3 responsive QA: the footer's three link columns (Explore / Get
   started / Legal) sit in a fixed 3-column grid with no override anywhere
   in the file. At 320-360px width that leaves roughly 80px per column,
   which wraps labels like "Updates & News" and "UTME Bootcamp" onto three
   or four lines each — readable, but cramped and visually broken compared
   to every other section on the page, which already reflows to one column
   well above this width. Stacking to one column below 480px (the same
   breakpoint already used elsewhere in this file for phone-width layout
   changes) matches how the rest of the landing page already behaves. */
@media (max-width:480px){
  .lp-qcols{grid-template-columns:1fr;max-width:280px;gap:22px;text-align:left}
}