/* =====================================================================
   AceMatric portal — design tokens + components
   ---------------------------------------------------------------------
   Two themes on one token set: light (ACEIR navy, the default) and dark
   (the original AceMatric night palette). Theme lives on <html data-theme>.
   Green means "marks earned / on track", red means "marks lost". No orange.
   The question paper is a printed sheet and stays light in both themes.
   ===================================================================== */

:root{
  /* surfaces */
  --bg:#f3f5f8; --surface:#ffffff; --surface-2:#f7f9fb; --surface-3:#eef2f6;
  --line:#e1e7ee; --line-strong:#c9d3de;
  /* text */
  --text:#0f2236; --text-2:#46586c; --text-3:#6a7a8c; --text-inv:#ffffff;
  /* brand: ACEIR navy */
  --brand:#123a63; --brand-hover:#0d2c4c; --brand-ink:#ffffff;
  --link:#1d5a96; --focus:rgba(29,90,150,.35); --brand-soft:#e8eff7;
  /* semantic */
  --good:#167a46; --good-soft:#e6f4ec; --good-line:#a9d8bd;
  --mid:#1d5a96;  --mid-soft:#e8eff7;  --mid-line:#b8cde3;
  --bad:#b4372f;  --bad-soft:#fbecea;  --bad-line:#eab7b1;
  --violet:#6d5bd0;
  /* sidebar */
  --side-bg:#123a63; --side-text:#c9d7e6; --side-text-strong:#ffffff;
  --side-hover:rgba(255,255,255,.07); --side-active:rgba(255,255,255,.12); --side-line:rgba(255,255,255,.1);
  /* elevation */
  --shadow-1:0 1px 2px rgba(15,34,54,.06),0 1px 1px rgba(15,34,54,.04);
  --shadow-2:0 8px 24px -12px rgba(15,34,54,.18);
  /* type */
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --mono:ui-monospace,"SF Mono","Cascadia Mono",Menlo,Consolas,monospace;
  --paperserif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  /* the printed paper never follows the theme */
  --paper:#fdfcf8; --paper-edge:#ece7d9; --ink:#1a1a1a; --ink-soft:#4a4a46; --rule:#d8d2c4;
  --paper-accent:#1d5a96;
  /* radii */
  --r-sm:6px; --r-md:10px; --r-lg:14px;
  --side-w:248px; --top-h:60px;
  color-scheme:light;
}
/* legacy aliases: older inline styles in app.js still reference these */
:root,html[data-theme="dark"]{
  --rail-soft:var(--text-3); --rail-ink:var(--text); --rail-line:var(--line); --rail-2:var(--surface);
  --live:var(--link); --gold:var(--good); --award:var(--good); --risk:var(--bad); --serif:var(--sans);
}
html[data-theme="dark"]{
  --bg:#0b0e14; --surface:#151921; --surface-2:#11151c; --surface-3:#1b2029;
  --line:#262c36; --line-strong:#353d4a;
  --text:#e6ebf2; --text-2:#a3b0c2; --text-3:#7d8a9c; --text-inv:#0b0e14;
  --brand:#4a90e2; --brand-hover:#6aa4ea; --brand-ink:#ffffff;
  --link:#7ab0ee; --focus:rgba(74,144,226,.45); --brand-soft:rgba(74,144,226,.12);
  --good:#5fcf8f; --good-soft:rgba(72,187,120,.12); --good-line:rgba(72,187,120,.4);
  --mid:#7ab0ee;  --mid-soft:rgba(74,144,226,.12); --mid-line:rgba(74,144,226,.4);
  --bad:#f0917f;  --bad-soft:rgba(240,145,127,.1); --bad-line:rgba(240,145,127,.4);
  --violet:#a78bfa;
  --side-bg:#0e1219; --side-text:#94a3b8; --side-text-strong:#ffffff;
  --side-hover:rgba(255,255,255,.04); --side-active:rgba(74,144,226,.14); --side-line:#1f252e;
  --shadow-1:0 1px 0 rgba(0,0,0,.4); --shadow-2:0 12px 30px -14px rgba(0,0,0,.7);
  color-scheme:dark;
}

/* ---------------- base ---------------- */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:var(--bg);color:var(--text);font-family:var(--sans);font-size:14px;line-height:1.5;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;font-feature-settings:"cv11","ss01"}
a{color:var(--link);text-decoration:none}
a:hover{text-decoration:underline}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--link);outline-offset:2px;border-radius:4px}
.num,.tnum{font-variant-numeric:tabular-nums}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
#view{min-height:calc(100vh - var(--top-h));transition:opacity .2s ease}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* ---------------- app shell ---------------- */
.shell{display:grid;grid-template-columns:var(--side-w) 1fr;min-height:100vh}
body.public .shell,body.focus .shell{grid-template-columns:1fr}
body.public #sidebar,body.public #topbar{display:none}
body.public #view{min-height:100vh}

#sidebar{position:sticky;top:0;height:100vh;background:var(--side-bg);color:var(--side-text);
  display:flex;flex-direction:column;border-right:1px solid var(--side-line);z-index:60}
body.focus #sidebar{display:none}
.side-brand{display:flex;align-items:center;gap:11px;height:var(--top-h);padding:0 20px;
  border-bottom:1px solid var(--side-line);color:var(--side-text-strong)}
.side-brand .mark{width:30px;height:30px;border-radius:8px;background:#fff;color:#123a63;
  display:grid;place-items:center;font-weight:800;font-size:15px;letter-spacing:-.04em}
html[data-theme="dark"] .side-brand .mark{background:var(--brand);color:#fff}
.side-brand .word{font-weight:700;font-size:15.5px;letter-spacing:-.01em;line-height:1.1}
.side-brand .word small{display:block;font-weight:500;font-size:11.5px;color:var(--side-text);letter-spacing:0}
.side-nav{flex:1;overflow-y:auto;padding:14px 12px}
.side-group{font-size:11.5px;font-weight:600;color:var(--side-text);opacity:.75;padding:16px 10px 6px}
.side-link{display:flex;align-items:center;gap:11px;width:100%;padding:9px 10px;border-radius:8px;
  color:var(--side-text);font-weight:500;font-size:14px;background:none;border:none;cursor:pointer;text-align:left}
.side-link:hover{background:var(--side-hover);color:var(--side-text-strong);text-decoration:none}
.side-link.on{background:var(--side-active);color:var(--side-text-strong)}
.side-link svg{width:18px;height:18px;flex:none;opacity:.9}
.side-link .count{margin-left:auto;font-size:12px;font-variant-numeric:tabular-nums;opacity:.7}
.side-sub{padding-left:39px;font-size:13.5px}
.side-foot{border-top:1px solid var(--side-line);padding:12px}
.side-user{display:flex;align-items:center;gap:10px;padding:8px 10px;color:var(--side-text-strong)}
a.side-user{border-radius:8px;text-decoration:none}
a.side-user:hover{background:var(--side-hover);text-decoration:none}
.avatar{width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;
  display:grid;place-items:center;font-weight:600;font-size:12.5px;flex:none}
.side-user .who{min-width:0}
.side-user .who b{display:block;font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side-user .who span{font-size:12px;color:var(--side-text)}

.main{min-width:0;display:flex;flex-direction:column}
#topbar{position:sticky;top:0;z-index:50;height:var(--top-h);display:flex;align-items:center;gap:14px;
  padding:0 28px;background:color-mix(in srgb,var(--surface) 88%,transparent);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line)}
.crumbs{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--text-3);min-width:0}
.crumbs a{color:var(--text-2)}
.crumbs .sep{color:var(--line-strong)}
.crumbs b{color:var(--text);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top-right{margin-left:auto;display:flex;align-items:center;gap:8px}
.top-pill{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--text-2);padding:6px 10px;
  border:1px solid var(--line);border-radius:999px;background:var(--surface)}
.top-pill b{color:var(--text);font-variant-numeric:tabular-nums}
.icon-btn{width:36px;height:36px;display:grid;place-items:center;border-radius:8px;border:1px solid var(--line);
  background:var(--surface);color:var(--text-2);cursor:pointer}
.icon-btn:hover{color:var(--text);border-color:var(--line-strong)}
.icon-btn svg{width:18px;height:18px}
.menu-btn{display:none}
#topbar .focus-exit{display:none}
body.focus #topbar .focus-exit{display:inline-flex}
body.focus .menu-btn{display:none!important}

@media (max-width:960px){
  .shell{grid-template-columns:1fr}
  #sidebar{position:fixed;left:0;top:0;width:var(--side-w);transform:translateX(-100%);transition:transform .22s ease;
    box-shadow:var(--shadow-2)}
  body.nav-open #sidebar{transform:none}
  body.nav-open .scrim{display:block}
  .menu-btn{display:grid}
  #topbar{padding:0 14px}
  .top-pill.hide-sm{display:none}
}
.scrim{display:none;position:fixed;inset:0;background:rgba(10,20,32,.45);z-index:55}

/* ---------------- page scaffolding ---------------- */
.page{max-width:1200px;margin:0 auto;padding:32px 32px 72px}
.page.narrow{max-width:860px}
@media (max-width:640px){.page{padding:22px 16px 56px}}
.page-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:26px}
.page-head .kicker{font-size:13px;font-weight:500;color:var(--text-3);margin-bottom:6px}
h1{font-size:28px;line-height:1.2;font-weight:700;letter-spacing:-.022em;color:var(--text)}
h2{font-size:17px;line-height:1.3;font-weight:650;letter-spacing:-.01em;color:var(--text)}
h3{font-size:15px;font-weight:600;color:var(--text)}
.lead{color:var(--text-2);font-size:15px;margin-top:8px;max-width:68ch;line-height:1.55}
.muted{color:var(--text-3)}
.page-actions{display:flex;gap:10px;flex-wrap:wrap}
.section{margin-top:32px}
.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:14px}
.section-head p{font-size:13.5px;color:var(--text-3);margin-top:3px}
.empty{color:var(--text-3);padding:28px;text-align:center}
.empty a{font-weight:500}
.empty-card{border:1px dashed var(--line-strong);border-radius:var(--r-md);padding:32px;text-align:center;color:var(--text-2)}
.empty-card h3{margin-bottom:6px}
.grid{display:grid;gap:16px}
.grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid.auto{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.split{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:20px;align-items:start}
@media (max-width:1100px){.grid.cols-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){.split,.grid.cols-3,.grid.cols-2{grid-template-columns:1fr}}
@media (max-width:520px){.grid.cols-4{grid-template-columns:1fr 1fr}}

/* ---------------- cards ---------------- */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-1)}
.panel-pad{padding:22px}
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 20px;border-bottom:1px solid var(--line)}
.panel-head h2{font-size:15.5px}
.panel-head p{font-size:13px;color:var(--text-3);margin-top:2px}
.panel-body{padding:18px 20px}

.kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px 20px;box-shadow:var(--shadow-1);min-width:0}
.kpi .k{font-size:13px;color:var(--text-2);font-weight:500}
.kpi .v{font-size:28px;font-weight:700;letter-spacing:-.02em;margin-top:6px;font-variant-numeric:tabular-nums;line-height:1.1}
.kpi .v small{font-size:15px;font-weight:500;color:var(--text-3);margin-left:2px}
.kpi .s{font-size:12.5px;color:var(--text-3);margin-top:6px}
.kpi .v.good{color:var(--good)}.kpi .v.mid{color:var(--mid)}.kpi .v.low{color:var(--bad)}
.kpi.link{cursor:pointer}
.kpi.link:hover{border-color:var(--line-strong)}

.tile{display:flex;flex-direction:column;text-align:left;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:20px;cursor:pointer;box-shadow:var(--shadow-1);transition:border-color .15s,box-shadow .15s;min-width:0}
.tile:hover{border-color:var(--line-strong);box-shadow:var(--shadow-2)}
.tile .t-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.tile .t-name{font-size:17px;font-weight:650;letter-spacing:-.01em;color:var(--text)}
.tile .t-sub{font-size:13px;color:var(--text-3);margin-top:3px}
.tile .t-stats{display:flex;gap:18px;margin-top:16px;font-size:13px;color:var(--text-2)}
.tile .t-stats b{display:block;font-size:17px;color:var(--text);font-weight:650;font-variant-numeric:tabular-nums}
.tile .t-foot{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);display:flex;align-items:center;gap:10px;font-size:13px;color:var(--text-2)}
.tile .t-foot .meter{flex:1}

/* ---------------- badges ---------------- */
.badge{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:550;line-height:1;
  padding:5px 9px;border-radius:999px;background:var(--surface-3);color:var(--text-2);white-space:nowrap}
.badge.good{background:var(--good-soft);color:var(--good)}
.badge.mid{background:var(--mid-soft);color:var(--mid)}
.badge.low,.badge.bad{background:var(--bad-soft);color:var(--bad)}
.badge.brand{background:var(--brand-soft);color:var(--link)}
.badge.outline{background:none;border:1px solid var(--line-strong)}
.dot-s{width:7px;height:7px;border-radius:50%;background:currentColor;display:inline-block}

/* ---------------- buttons ---------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 16px;
  border-radius:var(--r-sm);border:1px solid transparent;font-weight:600;font-size:14px;cursor:pointer;
  white-space:nowrap;transition:background .15s,border-color .15s,color .15s;text-decoration:none!important}
.btn svg{width:17px;height:17px}
.btn-primary{background:var(--brand);color:var(--brand-ink)}
.btn-primary:hover{background:var(--brand-hover)}
.btn-secondary{background:var(--surface);border-color:var(--line-strong);color:var(--text)}
.btn-secondary:hover{background:var(--surface-2);border-color:var(--text-3)}
.btn-ghost{background:none;color:var(--link)}
.btn-ghost:hover{background:var(--brand-soft)}
.btn-good{background:var(--good);color:#fff}
.btn-good:hover{filter:brightness(1.07)}
.btn-danger{background:var(--bad);color:#fff}
.btn-danger:hover{filter:brightness(1.07)}
.btn-sm{height:32px;padding:0 12px;font-size:13px}
.btn-lg{height:46px;padding:0 20px;font-size:15px}
.btn-block{width:100%}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}

/* ---------------- forms ---------------- */
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.field>span,.field-label{font-size:13px;font-weight:550;color:var(--text-2)}
.field .hint{font-size:12.5px;color:var(--text-3)}
.input,.select,textarea.input{width:100%;height:42px;padding:0 12px;border:1px solid var(--line-strong);border-radius:var(--r-sm);
  background:var(--surface);color:var(--text);font-size:14.5px;transition:border-color .15s,box-shadow .15s}
textarea.input{height:auto;padding:10px 12px;resize:vertical;min-height:90px}
.input:focus,.select:focus{outline:none;border-color:var(--link);box-shadow:0 0 0 3px var(--focus)}
.input::placeholder{color:var(--text-3)}
.select{appearance:none;padding-right:34px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%236a7a8c' stroke-width='1.6'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center}
.check{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:var(--text-2);margin-bottom:12px;line-height:1.45}
.check input{margin-top:3px;width:16px;height:16px;accent-color:var(--brand);flex:none}
.form-error{color:var(--bad);font-size:13px;min-height:1px;margin:2px 0 8px}
.form-error:empty{margin:0}
.range{width:100%;accent-color:var(--brand)}
.fieldset{border-top:1px solid var(--line);padding-top:18px;margin-top:6px}
.fieldset:first-child{border-top:none;padding-top:0;margin-top:0}
.fieldset h3{margin-bottom:4px}
.fieldset>p{font-size:13px;color:var(--text-3);margin-bottom:12px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 13px;border-radius:999px;border:1px solid var(--line-strong);
  background:var(--surface);color:var(--text-2);font-size:13.5px;font-weight:500;cursor:pointer}
.chip:hover{border-color:var(--text-3)}
.chip.on{background:var(--brand-soft);border-color:var(--link);color:var(--text)}
.chip.on::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--link)}

/* segmented control */
.seg{display:inline-flex;gap:3px;padding:3px;border-radius:9px;background:var(--surface-3);flex-wrap:wrap}
.seg button{border:none;background:none;height:32px;padding:0 13px;border-radius:7px;font-size:13.5px;font-weight:550;color:var(--text-2);cursor:pointer}
.seg button:hover{color:var(--text)}
.seg button.on{background:var(--surface);color:var(--text);box-shadow:var(--shadow-1)}

/* ---------------- data table ---------------- */
.dt{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-1);overflow:hidden}
.dt-toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:12px 14px;border-bottom:1px solid var(--line)}
.dt-title{font-size:15.5px;font-weight:650;margin-right:auto}
.dt-spacer{margin-right:auto}
.dt-search{position:relative;flex:0 1 260px}
.dt-search svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--text-3)}
.dt-search .input{height:36px;padding-left:34px;font-size:13.5px}
.dt-toolbar .select{height:36px;width:auto;min-width:120px;font-size:13.5px}
.dt-scroll{overflow-x:auto}
.dt table{width:100%;border-collapse:collapse;font-size:14px}
.dt th{text-align:left;font-size:12.5px;font-weight:600;color:var(--text-3);background:var(--surface-2);
  padding:10px 16px;border-bottom:1px solid var(--line);white-space:nowrap;user-select:none}
.dt th.sortable{cursor:pointer}
.dt th.sortable:hover{color:var(--text)}
.dt th .arrow{display:inline-block;width:10px;margin-left:4px;color:var(--text-3)}
.dt th.num,.dt td.num{text-align:right;font-variant-numeric:tabular-nums}
.dt td{padding:12px 16px;border-bottom:1px solid var(--line);vertical-align:middle;color:var(--text-2)}
.dt tr:last-child td{border-bottom:none}
.dt td.primary{color:var(--text);font-weight:550}
.dt td:not(.primary){white-space:nowrap}
.dt td .sub{display:block;font-size:12.5px;color:var(--text-3);font-weight:400;margin-top:1px}
.dt tbody tr.click{cursor:pointer}
.dt tbody tr.click:hover td{background:var(--surface-2)}
.dt td.act{text-align:right;white-space:nowrap}
.dt-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:10px 14px;border-top:1px solid var(--line);
  font-size:13px;color:var(--text-3)}
.pager{display:flex;align-items:center;gap:4px}
.pager button{min-width:32px;height:32px;padding:0 8px;border-radius:7px;border:1px solid transparent;background:none;
  color:var(--text-2);font-size:13px;font-weight:550;cursor:pointer;font-variant-numeric:tabular-nums}
.pager button:hover:not(:disabled){background:var(--surface-3);color:var(--text)}
.pager button.on{border-color:var(--line-strong);background:var(--surface);color:var(--text)}
.pager button:disabled{opacity:.4;cursor:default}
.pager .gap{padding:0 4px}
.dt-size{display:flex;align-items:center;gap:8px}
.dt-size .select{height:32px;width:auto;min-width:0;font-size:13px;padding-right:30px}
.dt-empty{padding:36px 16px;text-align:center;color:var(--text-3)}
.show-sm{display:none}
@media (max-width:640px){.show-sm{display:inline}}
@media (max-width:640px){
  .dt-search{flex:1 1 100%}
  .dt-toolbar .select{flex:1 1 calc(50% - 5px);min-width:0}
  .dt-title{flex:1 1 100%}
  .dt-spacer{display:none}
  .dt th.hide-sm,.dt td.hide-sm,.dt th.act,.dt td.act{display:none}
  .dt tbody tr.click td.primary{color:var(--link)}
  .dt td,.dt th{padding:10px 12px}
}

/* ---------------- meters & rings ---------------- */
.meter{height:7px;border-radius:999px;background:var(--surface-3);overflow:hidden;min-width:60px}
.meter>i{display:block;height:100%;border-radius:999px;background:var(--brand)}
.meter.good>i{background:var(--good)}.meter.mid>i{background:var(--mid)}.meter.low>i{background:var(--bad)}
.meter.cov>i{background:var(--mid)}.meter.perf>i{background:var(--good)}.meter.exam>i{background:var(--violet)}
.meter-cell{display:flex;align-items:center;gap:10px;min-width:150px}
.meter-cell .meter{flex:1}
.meter-cell b{font-size:13px;font-weight:600;color:var(--text);min-width:38px;text-align:right;font-variant-numeric:tabular-nums}
.ring{position:relative;width:120px;height:120px;flex:none}
.ring.sm{width:88px;height:88px}
.ring.lg{width:148px;height:148px}
.ring svg{transform:rotate(-90deg);width:100%;height:100%}
.ring .track{fill:none;stroke:var(--surface-3);stroke-width:9}
.ring .fill{fill:none;stroke:var(--brand);stroke-width:9;stroke-linecap:round;transition:stroke-dasharray .5s ease}
.ring .fill.good{stroke:var(--good)}.ring .fill.mid{stroke:var(--mid)}.ring .fill.low{stroke:var(--bad)}
.ring .val{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.ring .val b{font-size:28px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1}
.ring.sm .val b{font-size:21px}.ring.lg .val b{font-size:34px}
.ring .val span{font-size:12px;color:var(--text-3);margin-top:4px}
.ring.click{cursor:pointer}
.legend{display:flex;gap:16px;flex-wrap:wrap;font-size:13px;color:var(--text-2)}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.legend .cov{background:var(--mid)}.legend .perf{background:var(--good)}.legend .exam{background:var(--violet)}

/* ---------------- dashboard ---------------- */
.hero{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px;align-items:center;padding:26px 28px}
.hero-rings{display:flex;gap:22px}
@media (max-width:760px){.hero{grid-template-columns:1fr}.hero-rings{gap:14px}}
.focus-list{display:flex;flex-direction:column}
.focus-item{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 14px;padding:16px 20px;border-top:1px solid var(--line)}
.focus-item:first-child{border-top:none}
.focus-item .ico{grid-row:span 2;width:36px;height:36px;border-radius:9px;display:grid;place-items:center;background:var(--brand-soft);color:var(--link)}
.focus-item .ico svg{width:18px;height:18px}
.focus-item .ico.bad{background:var(--bad-soft);color:var(--bad)}
.focus-item .ico.good{background:var(--good-soft);color:var(--good)}
.focus-item .what{font-size:12.5px;color:var(--text-3);font-weight:500}
.focus-item .main{font-size:15px;font-weight:600;color:var(--text)}
.focus-item .why{grid-column:2;font-size:13px;color:var(--text-2)}
.link-list a,.link-list button{display:flex;align-items:center;gap:12px;width:100%;padding:14px 20px;border:none;border-top:1px solid var(--line);
  background:none;text-align:left;color:var(--text);cursor:pointer;text-decoration:none}
.link-list>:first-child{border-top:none}
.link-list a:hover,.link-list button:hover{background:var(--surface-2)}
.link-list .ll-ico{width:34px;height:34px;border-radius:9px;background:var(--surface-3);display:grid;place-items:center;color:var(--text-2);flex:none}
.link-list .ll-ico svg{width:17px;height:17px}
.link-list b{display:block;font-size:14px;font-weight:600;color:var(--text)}
.link-list span{font-size:13px;color:var(--text-3)}
.link-list .chev{margin-left:auto;color:var(--text-3);width:16px;height:16px;flex:none}

/* subject hub header actions */
.subject-actions{display:flex;gap:10px;flex-wrap:wrap}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:18px;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs button{border:none;background:none;padding:11px 14px;font-size:14px;font-weight:550;color:var(--text-3);cursor:pointer;
  border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.tabs button:hover{color:var(--text)}
.tabs button.on{color:var(--text);border-bottom-color:var(--brand)}
.tabs .count{display:inline-block;margin-left:6px;font-size:12px;padding:2px 7px;border-radius:999px;background:var(--surface-3);color:var(--text-2)}

/* readiness cards */
.rd-card{display:flex;flex-direction:column;gap:14px}
.rd-card .rd-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.rd-score{font-size:30px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1}
.rd-score small{font-size:13px;color:var(--text-3);font-weight:500}
.rd-score.good{color:var(--good)}.rd-score.mid{color:var(--mid)}.rd-score.low{color:var(--bad)}
.rd-rows{display:flex;flex-direction:column;gap:9px}
.rd-row{display:grid;grid-template-columns:104px 1fr 40px;align-items:center;gap:10px;font-size:13px;color:var(--text-2)}
.rd-row b{text-align:right;font-weight:600;color:var(--text);font-variant-numeric:tabular-nums}
.rd-facts{font-size:13px;color:var(--text-3);padding-top:12px;border-top:1px solid var(--line)}

/* callout */
.callout{display:flex;gap:14px;align-items:flex-start;padding:16px 18px;border-radius:var(--r-md);background:var(--brand-soft);color:var(--text)}
.callout svg{width:20px;height:20px;flex:none;color:var(--link);margin-top:1px}
.callout.good{background:var(--good-soft)}.callout.good svg{color:var(--good)}
.callout p{font-size:14px;line-height:1.6;color:var(--text-2)}
.callout b{color:var(--text)}

/* prose / notice */
.prose h3{margin:22px 0 8px}
.prose h3:first-child{margin-top:0}
.prose ul{padding-left:20px;display:flex;flex-direction:column;gap:7px}
.prose li{color:var(--text-2);line-height:1.6}
.prose li b{color:var(--text)}
.prose p{color:var(--text-2);line-height:1.6}
.code-box{font-family:var(--mono);font-size:26px;letter-spacing:.28em;text-align:center;padding:16px;border-radius:var(--r-md);
  background:var(--surface-2);border:1px solid var(--line);color:var(--text);font-weight:600}
.steps{list-style:none;counter-reset:st;display:flex;flex-direction:column;gap:14px}
.steps li{counter-increment:st;display:grid;grid-template-columns:28px 1fr;gap:12px;color:var(--text-2);line-height:1.55}
.steps li::before{content:counter(st);width:26px;height:26px;border-radius:50%;background:var(--brand-soft);color:var(--link);
  display:grid;place-items:center;font-size:13px;font-weight:650}
.steps li b{color:var(--text)}
.rules{list-style:none;display:flex;flex-direction:column;gap:12px}
.rules li{display:grid;grid-template-columns:22px 1fr;gap:10px;color:var(--text-2);line-height:1.55}
.rules li svg{width:18px;height:18px;color:var(--link);margin-top:2px}
.rules li b{color:var(--text)}

/* ---------------- auth ---------------- */
.auth{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);min-height:100vh}
.auth-brand{background:#123a63;color:#d6e2ef;padding:48px 56px;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow:hidden}
html[data-theme="dark"] .auth-brand{background:#0e1219;border-right:1px solid var(--line)}
.auth-brand .side-brand{border:none;padding:0;height:auto}
.auth-pitch{margin-top:auto;margin-bottom:auto;padding:40px 0;max-width:470px}
.auth-pitch h1{color:#fff;font-size:38px;letter-spacing:-.03em;line-height:1.12}
.auth-pitch p{color:#b9cadc;font-size:16px;line-height:1.6;margin-top:16px}
.auth-points{list-style:none;margin-top:30px;display:flex;flex-direction:column;gap:14px}
.auth-points li{display:grid;grid-template-columns:22px 1fr;gap:12px;font-size:14.5px;color:#d6e2ef;line-height:1.5}
.auth-points svg{width:19px;height:19px;color:#7fd3a2;margin-top:1px}
.auth-foot{font-size:12.5px;color:#8fa6bf}
/* a sliver of a real paper header, set in the paper serif: the one decorative moment */
.auth-sheet{position:absolute;right:-60px;bottom:-40px;width:330px;transform:rotate(-6deg);background:var(--paper);color:var(--ink);
  font-family:var(--paperserif);padding:22px 26px 60px;border-radius:2px;box-shadow:0 30px 60px -20px rgba(0,0,0,.55);opacity:.96}
.auth-sheet .sh-head{display:flex;justify-content:space-between;font-size:11px;font-style:italic;color:var(--ink-soft);border-bottom:1px solid var(--ink);padding-bottom:4px}
.auth-sheet .sh-q{display:flex;gap:12px;margin-top:14px;font-size:13px;line-height:1.5}
.auth-sheet .sh-q span:first-child{color:var(--ink-soft);min-width:30px}
.auth-sheet .sh-q span:last-child{margin-left:auto;font-weight:600}
.auth-form{display:flex;flex-direction:column;justify-content:center;padding:48px 56px;background:var(--surface)}
.auth-form-inner{width:100%;max-width:440px;margin:0 auto}
.auth-form h2{font-size:24px;letter-spacing:-.02em}
.auth-form .sub{color:var(--text-2);margin:6px 0 24px}
.auth-switch{font-size:13.5px;color:var(--text-2);margin-top:20px;text-align:center}
.auth-tabs{margin-bottom:26px;width:100%;display:flex}
.auth-tabs button{flex:1}
@media (max-width:960px){
  .auth{grid-template-columns:1fr}
  .auth-brand{padding:28px 24px;position:relative;height:auto}
  .auth-pitch{padding:22px 0 6px}
  .auth-pitch h1{font-size:28px}
  .auth-points,.auth-sheet,.auth-foot{display:none}
  .auth-form{padding:28px 20px 48px}
}
.theme-float{position:fixed;top:14px;right:14px;z-index:70}
body:not(.public) .theme-float{display:none}

/* ---------------- APS ---------------- */
.aps-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:20px;align-items:start}
@media (max-width:980px){.aps-layout{grid-template-columns:1fr}}
.slider{padding:12px 0;border-top:1px solid var(--line)}
.slider:first-child{border-top:none;padding-top:0}
.slider .s-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px;font-size:14px;font-weight:550}
.slider .s-top b{font-variant-numeric:tabular-nums;color:var(--text)}
.slider .s-top em{font-style:normal;font-size:12.5px;color:var(--text-3);font-weight:500;margin-left:8px}
.aps-filters{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:14px}
@media (max-width:820px){.aps-filters{grid-template-columns:1fr}}
.uni-options{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.uni-card{border:1px solid var(--line);border-radius:var(--r-md);padding:16px;background:var(--surface)}
.uni-card.good{border-color:var(--good-line)}
.uc-head{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;margin-bottom:12px}
.uc-uni{font-size:16px;font-weight:700}
.uc-uniname{font-size:12.5px;color:var(--text-3);margin-top:1px}
.req{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--line);font-size:13px}
.req .rl{color:var(--text-2)}
.req .rv{font-weight:600;font-variant-numeric:tabular-nums;text-align:right}
.req.met .rv{color:var(--good)}.req.short .rv{color:var(--bad)}.req.not_taking .rv{color:var(--text-3)}
.note{font-size:12.5px;color:var(--text-3);margin-top:10px}

/* ---------------- mock ---------------- */
.mock-clock{font-size:46px;font-weight:700;letter-spacing:-.02em;text-align:center;color:var(--text);margin:8px 0 2px;font-variant-numeric:tabular-nums}
.mock-clock.late{color:var(--bad);animation:pulse 1s infinite}
@keyframes pulse{50%{opacity:.45}}
.mock-progress{font-size:13px;text-align:center;color:var(--text-3);margin-bottom:16px}
.score-pill{font-size:34px;font-weight:700;letter-spacing:-.02em;border-radius:var(--r-lg);padding:16px 24px;flex:none;font-variant-numeric:tabular-nums}
.score-pill.good{color:var(--good);background:var(--good-soft)}
.score-pill.mid{color:var(--mid);background:var(--mid-soft)}
.score-pill.low{color:var(--bad);background:var(--bad-soft)}
.res-q{padding:18px 20px;border-top:1px solid var(--line)}
.res-q:first-child{border-top:none}
.res-q-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;gap:12px}
.res-q-head .qref{font-weight:600}
.res-marks{font-weight:700;font-variant-numeric:tabular-nums}
.res-marks.good{color:var(--good)}.res-marks.mid{color:var(--mid)}.res-marks.low{color:var(--bad)}
.res-recover{font-size:13.5px;color:var(--text-2);margin-top:10px;line-height:1.55}
.res-recover b{color:var(--good)}
.res-tip{font-size:13px;color:var(--text-3);font-style:italic;margin-top:8px;line-height:1.5}
.res-skip{font-size:13.5px;color:var(--bad)}

/* ---------------- marking components (rail + results) ---------------- */
.comp{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;margin-top:6px;border:1px solid var(--line);
  border-radius:8px;background:var(--surface)}
.comp .cdot{width:8px;height:8px;border-radius:50%;flex:none;margin-top:6px;background:var(--text-3)}
.comp .ctxt{flex:1;min-width:0}
.comp .cname{font-size:13.5px;color:var(--text);line-height:1.4}
.comp .creason{font-size:12.5px;color:var(--text-3);margin-top:3px;line-height:1.45}
.comp .tag{flex:none;margin-top:1px}
.comp.won{border-color:var(--good-line);background:var(--good-soft)}
.comp.won .cdot{background:var(--good)}
.comp.lost{border-color:var(--bad-line);background:var(--bad-soft)}
.comp.lost .cdot{background:var(--bad)}
.comp.risk{border-color:var(--mid-line)}
.comp.risk .cdot{background:var(--mid)}
.tag{font-size:11.5px;font-weight:600;padding:3px 8px;border-radius:999px;white-space:nowrap;background:var(--surface-3);color:var(--text-2)}
.tag.won,.tag.high{background:var(--good-soft);color:var(--good)}
.tag.lost,.tag.crit{background:var(--bad-soft);color:var(--bad)}
.tag.med{background:var(--mid-soft);color:var(--mid)}

/* ---------------- exam room (focus mode) ---------------- */
.room{display:grid;grid-template-columns:minmax(0,1fr) 384px;min-height:calc(100vh - var(--top-h))}
@media (max-width:1100px){.room{grid-template-columns:minmax(0,1fr)}.room .rail{display:none}}
.paper-scroll{min-width:0}
.paper-scroll{padding:30px 0 80px;background:var(--bg)}
.rail{background:var(--surface);border-left:1px solid var(--line);display:flex;flex-direction:column;
  position:sticky;top:var(--top-h);height:calc(100vh - var(--top-h))}
.rail-head{padding:18px 20px 14px;border-bottom:1px solid var(--line)}
.rail-eyebrow{font-size:12.5px;font-weight:550;color:var(--text-3);display:flex;align-items:center;gap:8px}
.rail .dot{width:7px;height:7px;border-radius:50%;background:var(--good);animation:pulse 2s infinite}
.rail-title{color:var(--text);font-size:17px;margin-top:4px;font-weight:700;letter-spacing:-.01em}
.rail-model{font-size:12px;color:var(--text-3);margin-top:3px}
.rail-body{flex:1;overflow-y:auto;padding:4px 20px 24px}
.rail-scrollhint{color:var(--text-2);font-size:13.5px;padding:20px 0;line-height:1.6}
.rail-scrollhint b{color:var(--text)}
.layer-k{font-size:12.5px;font-weight:600;color:var(--text-3);margin:18px 0 0}
.rail .card,.card{background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:14px;margin-top:8px}
.card-k{font-size:13px;font-weight:600;color:var(--text);display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.card.state-good{border-color:var(--good-line)}
.card.state-bad{border-color:var(--bad-line)}
.trace{display:none}
.rail-caption{font-size:12px;color:var(--text-3);text-align:center;margin:18px 6px 6px;line-height:1.55}
.score-ring{display:flex;align-items:center;gap:14px}
.score-num{font-size:34px;color:var(--text);font-weight:700;font-variant-numeric:tabular-nums;line-height:1;letter-spacing:-.02em}
.score-num.good{color:var(--good)}.score-num.bad{color:var(--bad)}
.score-num small{font-size:16px;color:var(--text-3);font-weight:500}
.score-lbl{font-size:12.5px;color:var(--text-3);line-height:1.4}
.rec{font-size:13.5px;color:var(--text-2);line-height:1.55;padding:6px 0 6px 16px;position:relative}
.rec::before{content:"";position:absolute;left:2px;top:13px;width:6px;height:6px;border-radius:50%;background:var(--link)}
.tip{font-size:13.5px;color:var(--text-2);line-height:1.6}
.prob{height:6px;background:var(--surface-3);border-radius:999px;overflow:hidden;margin-top:6px}
.prob i{display:block;height:100%;background:var(--good)}
.prob-k{font-size:12px;color:var(--text-3);margin-top:8px}
.freqbar{height:6px;background:var(--surface-3);border-radius:999px;overflow:hidden;width:70px}
.freqbar i{display:block;height:100%;background:var(--good)}
.freqpct{font-size:12.5px;color:var(--text-2);font-variant-numeric:tabular-nums}
.mastery-row{display:flex;align-items:center;gap:10px;margin-top:10px}
.rail-foot{padding:11px 20px;border-top:1px solid var(--line);font-size:12px;color:var(--text-3);
  display:flex;justify-content:space-between;align-items:center}
.spinner{width:14px;height:14px;border:2px solid var(--line-strong);border-top-color:var(--link);border-radius:50%;animation:spin .7s linear infinite;display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}
.slideup{animation:slideup .25s ease both}
@keyframes slideup{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* =====================================================================
   THE PAPER — a printed DBE sheet. Fixed colours: never themed.
   ===================================================================== */
.paper{width:min(780px,94%);margin:0 auto;background:var(--paper);border:1px solid var(--paper-edge);
  box-shadow:0 1px 0 rgba(0,0,0,.06),0 24px 60px -24px rgba(15,34,54,.35);border-radius:2px;
  padding:52px 60px 64px;position:relative;color:var(--ink);font-family:var(--paperserif)}
html[data-theme="dark"] .paper{box-shadow:0 1px 0 rgba(0,0,0,.5),0 24px 60px -20px rgba(0,0,0,.7)}
.paper::before{content:"";position:absolute;top:0;bottom:0;left:44px;width:1px;background:#e7b7ac;opacity:.5}
.paper a{color:var(--paper-accent)}
.paper-head{display:flex;justify-content:space-between;align-items:flex-start;font-size:12.5px;
  font-style:italic;color:var(--ink-soft);border-bottom:1px solid var(--ink);padding-bottom:6px;margin-bottom:4px}
.paper-head .center{font-style:normal;text-align:center;line-height:1.3}
.paper-sub{text-align:center;font-size:12px;color:var(--ink-soft);letter-spacing:.02em;margin-bottom:34px;font-style:italic;line-height:1.6}
.paper-sub a{font-style:normal}
.qblock{margin:0 0 30px;scroll-margin-top:76px}
.qhead{display:flex;align-items:baseline;gap:14px;font-weight:700;font-size:16px;margin-bottom:14px}
.qhead .qtotal{margin-left:auto}
.qsrc{font-family:var(--sans);font-weight:500;font-size:11px;color:var(--ink-soft);border:1px solid #cfc8b6;border-radius:20px;padding:2px 9px}
.yearband{font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.02em;color:var(--ink-soft);
  border-bottom:1px solid #d8d2c4;padding-bottom:6px;margin:34px 0 22px;text-align:center}
#questions .yearband:first-child{margin-top:0}
.qfig{display:block;margin:16px auto 8px;max-width:420px;width:100%}
.qfig svg{width:100%;height:auto;display:block}
.qfig img{max-width:100%;height:auto;display:block;margin:0 auto;border:1px solid var(--rule);background:#fff}
.qfig-cap{font-family:var(--paperserif);font-size:11px;font-style:italic;color:var(--ink-soft);text-align:center;margin-top:4px}
.stimulus-block{border:1px solid var(--rule);border-left:3px solid var(--ink);background:#f7f4ec;border-radius:3px;padding:14px 18px;margin:8px 0 22px}
.stim-label{font-family:var(--paperserif);font-weight:700;font-size:14px;color:var(--ink);margin-bottom:8px;letter-spacing:.02em}
.stim-body{font-family:var(--paperserif);font-size:14.5px;line-height:1.6;color:var(--ink)}
.qfig text{font-family:var(--paperserif);font-size:13px;fill:var(--ink)}
.sectionband{font-family:var(--paperserif);font-weight:700;font-size:15px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink);
  border-top:2px solid var(--ink);border-bottom:1px solid var(--rule);padding:8px 0;margin:38px 0 18px}
#questions .sectionband:first-child{margin-top:0}
.qheading{font-family:var(--paperserif);font-weight:700;font-size:15px;color:var(--ink);margin:22px 0 10px}
.ptx{font-family:var(--paperserif);line-height:1.5}
.stim-body .ptx{font-size:13.5px;letter-spacing:-.005em}
.stimulus-block:has(.ptx){padding:12px 12px}
.ptx .pp{margin:0 0 .75em}
.ptx .pp:last-child{margin-bottom:0}
.ptx .pl{display:grid;grid-template-columns:1.8em minmax(0,1fr) 1.8em;column-gap:.4em;align-items:baseline}
.ptx .pl .tx{min-width:0;overflow-wrap:anywhere}
/* formulas wider than the sheet (long series on a phone) scroll inside themselves */
.paper mjx-container{max-width:100%;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;padding-bottom:3px}
.paper mjx-container:not([display="true"]){display:inline-block;vertical-align:middle}
.ptx .pl .ln{color:var(--ink-soft);font-size:.9em;text-align:left}
.ptx .pl .rn{color:var(--ink-soft);font-size:.85em;text-align:right;font-variant-numeric:tabular-nums}
.ptx .pl.bullet .ln::before{content:"•";color:var(--ink)}
.subq .body .ptx .pl{grid-template-columns:auto minmax(0,1fr) auto}
.subq .body .ptx .pl .ln:empty,.subq .body .ptx .pl .rn:empty{display:none}
.ptx .ptitle{text-align:center;font-weight:700;margin:.2em 0 .5em}
.ptx .pbox{border:1.5px solid var(--ink);padding:8px 8px;margin:8px 0 12px;background:#fffef9}
.ptable-wrap{overflow-x:auto;margin:8px 0 12px}
.ptable{border-collapse:collapse;font-size:13.5px;min-width:60%;background:#fffef9}
.ptable th,.ptable td{border:1px solid #7a766c;padding:3px 8px;vertical-align:top;text-align:left}
.ptable th{font-weight:700;text-align:center}
.ptable td.num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.ptable td.shade,.ptable th.shade{background:#c9c6bf}
.pfig{margin:10px auto;max-width:520px;text-align:center}
.pfig img{max-width:100%;height:auto;border:1px solid var(--rule);background:#fff}
.pfig figcaption{font-size:11px;font-style:italic;color:var(--ink-soft);margin-top:3px}
@media (max-width:560px){.ptx .pl{grid-template-columns:1.6em minmax(0,1fr) 1.8em;column-gap:.3em}}
.subq{display:flex;gap:16px;padding:9px 0;align-items:flex-start;cursor:pointer}
.subq .lbl{min-width:46px;color:var(--ink-soft);font-size:14.5px;padding-top:2px}
.subq .body{flex:1;font-size:15.5px;line-height:1.6;min-width:0}
.subq .marks{min-width:34px;text-align:right;font-weight:600;font-size:14px;font-variant-numeric:tabular-nums;padding-top:2px}
.subq .marks::before{content:"("}.subq .marks::after{content:")"}
.subq .marks:empty::before,.subq .marks:empty::after{content:none}
.subq.active{background:linear-gradient(90deg,rgba(29,90,150,.07),transparent);
  border-left:2px solid var(--paper-accent);margin-left:-16px;padding-left:14px;border-radius:0 4px 4px 0}
.answer-open{margin:6px 0 2px;font-family:var(--sans);font-size:12.5px;font-weight:600;color:var(--paper-accent);background:none;border:none;cursor:pointer;padding:4px 0}
.answer-open:hover{text-decoration:underline}
.answer-box{margin:8px 0 4px;display:none}
.answer-box.show{display:block;animation:drop .25s ease}
@keyframes drop{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.answer-box textarea{width:100%;min-height:96px;border:1px solid var(--rule);border-radius:4px;
  padding:12px 14px;font-family:var(--mono);font-size:13.5px;line-height:1.75;color:var(--ink);resize:vertical;
  background-image:repeating-linear-gradient(#fffef9 0 27px,#eee7d4 27px 28px);background-attachment:local}
.answer-box textarea:focus{outline:none;border-color:var(--paper-accent);box-shadow:0 0 0 3px rgba(29,90,150,.14)}
.math-hint{font-family:var(--sans);font-size:12px;color:var(--ink-soft);margin-bottom:6px}
.math-lines math-field{display:block;width:100%;min-height:44px;font-size:16.5px;background:#fffef9;border:1px solid var(--rule);border-radius:4px;
  margin-bottom:6px;padding:7px 10px;--caret-color:#1d5a96}
.math-lines math-field:focus-within{outline:none;border-color:var(--paper-accent);box-shadow:0 0 0 3px rgba(29,90,150,.14)}
.math-addline{font-family:var(--sans);font-size:12px;font-weight:600;color:var(--paper-accent);background:none;border:1px dashed var(--rule);border-radius:4px;
  padding:5px 12px;cursor:pointer;margin-bottom:6px}
.math-addline:hover{border-color:var(--paper-accent)}
.essay-answer .rubric{background:#fffef9;border:1px solid var(--rule);border-left:3px solid var(--paper-accent);border-radius:4px;padding:9px 12px;margin-bottom:8px}
.rubric-h{font-family:var(--sans);font-size:12px;font-weight:600;color:var(--ink-soft);margin-bottom:7px}
.rubric-row{display:flex;justify-content:space-between;align-items:baseline;font-family:var(--paperserif);font-size:13.5px;font-weight:700;color:var(--ink);margin-top:6px}
.rubric-m{font-family:var(--sans);font-size:11.5px;font-weight:600;color:var(--paper-accent);border:1px solid currentColor;border-radius:10px;padding:1px 8px;flex:none;margin-left:10px}
.rubric-note{font-family:var(--paperserif);font-size:12px;color:var(--ink-soft);line-height:1.45;margin:2px 0 2px}
.essay-answer .essay-ta{min-height:220px}
.wordcount{font-family:var(--sans);font-size:12px;color:var(--ink-soft);margin-top:5px;text-align:right}
.wordcount .wc-n{color:var(--paper-accent);font-weight:700}
.table-answer table{width:100%;border-collapse:collapse;background:#fffef9;font-family:var(--paperserif);font-size:13.5px;margin-bottom:8px}
.table-answer caption{font-family:var(--paperserif);font-weight:700;font-size:13px;text-align:left;color:var(--ink);padding:4px 2px 6px;caption-side:top}
.table-answer th{border:1px solid var(--ink);background:#f1ecdd;font-weight:700;padding:7px 9px;text-align:left;color:var(--ink);font-size:12.5px}
.table-answer td{border:1px solid var(--ink);padding:0;color:var(--ink)}
.table-answer td:not(:has(input)){padding:7px 9px}
.table-answer .tbl-in{width:100%;border:none;background:rgba(29,90,150,.06);font-family:var(--paperserif);font-size:13.5px;color:var(--ink);padding:7px 9px}
.table-answer .tbl-in:focus{outline:2px solid var(--paper-accent);outline-offset:-2px;background:#fff}
.qtable-wrap{overflow-x:auto;margin:12px 0}
.qtable{border-collapse:collapse;background:#fffef9;font-family:var(--paperserif);font-size:13.5px;min-width:min(100%,340px)}
.qtable th,.qtable td{border:1px solid var(--ink);padding:6px 10px;text-align:left;color:var(--ink);vertical-align:top}
.qtable th{background:#f1ecdd;font-weight:700;font-size:12.5px}
.table-answer .grid-overlay{position:relative;width:100%;margin:0 0 10px;line-height:0}
.table-answer .grid-overlay img{width:100%;height:auto;display:block}
.table-answer .grid-in{position:absolute;box-sizing:border-box;border:1px solid var(--paper-accent);background:rgba(29,90,150,.10);
  font-family:var(--paperserif);font-size:clamp(9px,2.4vw,13px);color:var(--ink);padding:0 2px;margin:0;line-height:1.05}
.table-answer .grid-in:focus{outline:none;background:#fff;box-shadow:0 0 0 2px var(--paper-accent)}
.sketch-form{display:flex;flex-direction:column;gap:8px;margin-top:4px}
.sketch-row{display:grid;grid-template-columns:minmax(9em,34%) 1fr;align-items:center;gap:10px}
.sketch-lbl{font-family:var(--paperserif);font-size:13px;font-weight:700;color:var(--ink)}
.sketch-in{width:100%;border:none;border-bottom:1.5px solid var(--rule);background:rgba(29,90,150,.06);font-family:var(--paperserif);font-size:13.5px;color:var(--ink);padding:6px 8px}
.sketch-in:focus{outline:none;border-bottom-color:var(--paper-accent);background:#fff}
@media (max-width:480px){.sketch-row{grid-template-columns:1fr;gap:2px}}
.draw-tools{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:6px}
.draw-tool{font-family:var(--sans);font-size:12px;font-weight:550;color:var(--ink-soft);background:#fffef9;border:1px solid var(--rule);border-radius:4px;padding:5px 10px;cursor:pointer}
.draw-tool.on{color:#fff;background:var(--ink);border-color:var(--ink)}
.draw-answer canvas{width:100%;height:auto;display:block;background:#fff;border:1px solid var(--ink);border-radius:2px;cursor:crosshair;touch-action:none;margin-bottom:6px}
.answer-actions{display:flex;gap:10px;margin-top:8px;align-items:center;flex-wrap:wrap}
.mark-btn{font-family:var(--sans);font-size:13px;font-weight:600;background:#123a63;color:#fff;border:none;border-radius:6px;padding:9px 16px;cursor:pointer;display:inline-flex;gap:8px;align-items:center}
.mark-btn:hover{background:#0d2c4c}.mark-btn:disabled{opacity:.55;cursor:wait}
.guide-btn{font-family:var(--sans);font-size:13px;font-weight:600;background:none;color:var(--ink);border:1px solid #bdb6a6;border-radius:6px;padding:8px 14px;cursor:pointer;display:inline-flex;gap:8px;align-items:center}
.guide-btn:hover{background:rgba(0,0,0,.04)}.guide-btn:disabled{opacity:.5;cursor:wait}
.hint{font-family:var(--sans);font-size:12px;color:var(--ink-soft)}
.footline{display:flex;justify-content:space-between;font-size:11px;font-style:italic;color:var(--ink-soft);border-top:1px solid var(--rule);margin-top:40px;padding-top:8px}
.paper-attrib{font-family:var(--paperserif);font-size:10.5px;font-style:italic;color:var(--ink-soft);text-align:center;margin-top:10px}
.load-more{display:block;margin:20px auto 0}

/* scrollbars */
::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:10px;border:3px solid var(--bg)}

@media (max-width:640px){
  h1{font-size:23px}
  .seg{display:grid;grid-template-columns:1fr 1fr;width:100%}
  .seg button{height:auto;min-height:34px;padding:6px 8px;white-space:normal;line-height:1.25}
  .auth-tabs.seg{grid-template-columns:repeat(4,1fr)}
  .page-head .ring,.page-head .ring.lg{width:92px;height:92px}
  .page-head .ring .val b{font-size:22px}
  .page-head .ring .val span{font-size:11px}
  .paper{width:100%;padding:30px 18px 40px}
  .paper-scroll{padding-top:14px}
  .table-answer{overflow-x:auto}
  .table-answer table{width:auto;min-width:100%}
  .hero{padding:20px}
}

/* profile + one-off notices */
.readonly{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid var(--line);font-size:14px}
.readonly:first-child{border-top:none;padding-top:0}
.readonly span{color:var(--text-3)}
.readonly b{font-weight:600;color:var(--text);text-align:right}
.saved{font-size:13px;color:var(--good);font-weight:600;align-self:center}
.temp-pass{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;padding:12px 14px;border-radius:var(--r-md);
  background:var(--surface-2);border:1px solid var(--line)}
.temp-pass code{margin-left:auto;font-family:var(--mono);font-size:20px;font-weight:600;letter-spacing:.06em;color:var(--text)}
.link-btn{background:none;border:none;padding:0;color:var(--link);font-weight:500;cursor:pointer;font-size:inherit}
.link-btn:hover{text-decoration:underline}
/* school picker */
.picker{position:relative}
.picker .dt-search .input{height:42px;font-size:14.5px}
.picker-list{position:absolute;top:46px;left:0;right:0;z-index:30;background:var(--surface);border:1px solid var(--line-strong);
  border-radius:var(--r-md);box-shadow:var(--shadow-2);max-height:300px;overflow-y:auto}
.picker-item{padding:10px 14px;cursor:pointer;font-size:14px;font-weight:550;color:var(--text);border-top:1px solid var(--line)}
.picker-item:first-child{border-top:none}
.picker-item small{display:block;font-weight:400;font-size:12.5px;color:var(--text-3);margin-top:2px}
.picker-item:hover,.picker-item.on{background:var(--surface-2)}
.picker-empty{padding:14px;font-size:13px;color:var(--text-3)}
/* ---------------- back office ---------------- */
.chart{position:relative}
.chart svg{width:100%;height:190px;display:block;overflow:visible}
.chart .cg{stroke:var(--line);stroke-width:1}
.chart .ct{fill:var(--text-3);font-size:11px;font-family:var(--sans)}
.chart .cbar{fill:var(--link)}
.chart .cb.on .cbar{fill:var(--brand-hover)}
html[data-theme="dark"] .chart .cbar{fill:#4a90e2}
html[data-theme="dark"] .chart .cb.on .cbar{fill:#6aa4ea}
.chart-tip{position:absolute;z-index:5;pointer-events:none;background:var(--text);color:var(--surface);font-size:12.5px;font-weight:550;
  padding:6px 9px;border-radius:6px;white-space:nowrap;box-shadow:var(--shadow-2)}
.stepper{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}
.step{display:flex;align-items:center;gap:8px;padding:7px 12px 7px 8px;border-radius:999px;background:var(--surface-3);color:var(--text-3);font-size:13px;font-weight:550}
.step span{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--surface);font-size:12px;font-weight:700}
.step span svg{width:13px;height:13px}
.step.done{color:var(--good);background:var(--good-soft)}
.step.now{color:var(--text);background:var(--brand-soft);box-shadow:inset 0 0 0 1px var(--link)}
textarea.input.code{font-family:var(--mono);font-size:12.5px;line-height:1.55;min-height:480px;white-space:pre;overflow:auto;tab-size:2}
pre.log{font-family:var(--mono);font-size:12px;line-height:1.55;white-space:pre-wrap;color:var(--text-2);max-height:260px;overflow:auto}
input.input.file{height:auto;padding:9px 12px}
code{font-family:var(--mono);font-size:.9em;background:var(--surface-3);padding:1px 5px;border-radius:4px}
.steps.panel li{grid-template-columns:28px auto}
/* ---------------- school console: learner management ---------------- */
.mgmt-row{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 20px;border-top:1px solid var(--line);flex-wrap:wrap}
.mgmt-row:first-child{border-top:none}
.mgmt-row h3{font-size:14.5px;margin-bottom:3px}
.mgmt-row p{font-size:13.5px;color:var(--text-3);max-width:62ch}
.mgmt-confirm{padding:0 20px 16px}
.mgmt-confirm:empty{display:none}
.callout.bad{background:var(--bad-soft)}.callout.bad svg{color:var(--bad)}
.btn.danger{color:var(--bad)}
.btn-primary.danger{background:var(--bad);border-color:var(--bad);color:#fff}
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);opacity:0;pointer-events:none;z-index:60;
  background:var(--text);color:var(--surface);padding:10px 16px;border-radius:8px;font-size:13.5px;font-weight:550;box-shadow:var(--shadow-2);
  transition:opacity .18s,transform .18s;max-width:calc(100vw - 32px)}
.toast.on{opacity:1;transform:translate(-50%,0)}
.toast.bad{background:var(--bad);color:#fff}
@media (prefers-reduced-motion:reduce){.toast{transition:none}}
/* ---------------- back office: link typed schools ---------------- */
.link-card{padding:18px 20px;margin-bottom:14px}
.link-head h3{font-size:16px;margin:2px 0 3px}
.link-body{margin-top:14px;max-width:720px}
.link-opts{display:flex;flex-direction:column;gap:8px}
.link-opt{display:flex;align-items:center;gap:12px;padding:10px 14px;border:1px solid var(--line-strong);border-radius:10px;cursor:pointer;background:var(--surface)}
.link-opt:has(input:checked){border-color:var(--link);background:var(--brand-soft)}
.link-opt input{accent-color:var(--brand);width:16px;height:16px;flex:none}
.link-opt span:nth-child(2){flex:1;min-width:0;font-size:14px}
.link-opt small{display:block;color:var(--text-3);font-size:12.5px;margin-top:2px}
.link-opt .badge{flex:none}
/* ---------------- back office: paper editor ---------------- */
.ed-layout{display:grid;grid-template-columns:300px minmax(0,1fr);gap:20px;align-items:start}
.ed-list{position:sticky;top:calc(var(--top-h) + 16px);max-height:calc(100vh - var(--top-h) - 32px);display:flex;flex-direction:column;overflow:hidden}
.ed-list-head{padding:12px;border-bottom:1px solid var(--line)}
.ed-items{overflow:auto;flex:1}
.ed-item{display:grid;grid-template-columns:auto 1fr;column-gap:10px;padding:10px 14px;border-top:1px solid var(--line);color:var(--text-2);text-decoration:none;font-size:13px}
.ed-item:first-child{border-top:none}
.ed-item b{color:var(--text);font-variant-numeric:tabular-nums;grid-row:span 2}
.ed-item span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ed-item small{color:var(--text-3);font-size:12px}
.ed-item small em{font-style:normal;color:var(--mid)}
.ed-item:hover{background:var(--surface-2)}
.ed-item.on{background:var(--brand-soft);box-shadow:inset 3px 0 0 var(--link)}
.ed-main{display:flex;flex-direction:column;gap:20px;min-width:0}
.ed-card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.ed-card-head p{font-size:13px;margin-top:3px}
.ed-hint{font-size:13px;margin:14px 0}
.ed-sub{font-size:14px;margin:18px 0 10px}
.ed-fig{display:grid;grid-template-columns:200px minmax(0,1fr);gap:16px;padding:14px;border:1px solid var(--line);border-radius:10px;margin-bottom:10px;background:var(--surface)}
.ed-fig img{max-width:100%;max-height:200px;object-fit:contain;background:#fff;border:1px solid var(--line);border-radius:6px;justify-self:center}
.ed-fig-body .field{margin-bottom:8px}
.ed-fig-body p{margin-bottom:10px}
.ed-paper{max-width:none;margin:0;box-shadow:none}
@media (max-width:900px){.ed-layout{grid-template-columns:1fr}.ed-list{position:static;max-height:320px}.ed-fig{grid-template-columns:1fr}}
.page.wide{max-width:1440px}

/* ---- plans & billing ---- */
.pl-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.pl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.pl-card{text-align:left;border:1.5px solid var(--line);border-radius:12px;background:var(--surface);padding:16px 16px 14px;cursor:pointer;color:var(--text);font:inherit}
.pl-card:hover{border-color:var(--text-3)}
.pl-card.on{border-color:var(--link);box-shadow:0 0 0 3px var(--brand-soft)}
.pl-name{font-weight:650;font-size:15px}
.pl-price{font-size:26px;font-weight:700;margin:8px 0 2px;font-variant-numeric:tabular-nums}
.pl-price small{font-size:13px;font-weight:500;color:var(--text-3)}
.pl-small{font-size:13px}
.pl-blurb{font-size:12.5px;color:var(--text-2);margin-top:8px;line-height:1.4}
.pl-row{display:flex;gap:14px;align-items:baseline;flex-wrap:wrap;padding:8px 0;border-bottom:1px solid var(--line)}
.pl-pay{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;position:sticky;bottom:12px;z-index:5;margin-top:18px}
.pl-total{font-size:30px;font-weight:700;font-variant-numeric:tabular-nums}
.school-prices{margin-top:26px}
.school-prices h3{font-size:15px;margin-bottom:10px}
.school-prices td,.school-prices th{font-size:12.5px}
.pl-pay svg{width:14px;height:14px;vertical-align:-2px;flex:none}

/* ---- subject picker ---- */
.sp-search{margin-bottom:10px}
.sp-summary{font-size:13px;color:var(--text-2);margin-bottom:12px;line-height:1.45}
.sp-group{margin-bottom:14px}
.sp-gtitle{font-size:12.5px;font-weight:650;color:var(--text-3);margin-bottom:7px}
.sp-hint{font-size:12.5px;color:var(--text-3);margin:-3px 0 8px}
.sp-langs{border:1px solid var(--line);border-radius:10px;overflow:hidden}
.sp-lang{display:grid;grid-template-columns:minmax(96px,1fr) auto;align-items:center;gap:10px;padding:6px 10px;border-top:1px solid var(--line)}
.sp-lang:first-child{border-top:none}
.sp-head{background:var(--surface-3);font-size:11.5px;color:var(--text-3);padding:5px 10px}
.sp-lname{font-size:13.5px;font-weight:550}
.sp-levels{display:grid;grid-template-columns:repeat(3,92px);gap:6px;text-align:center}
.sp-lv{height:30px;border-radius:7px;border:1px solid var(--line-strong);background:none;color:var(--text-2);font:inherit;font-size:12.5px;cursor:pointer}
.sp-lv:hover{border-color:var(--text-3)}
.sp-lv.on{background:var(--brand-soft);border-color:var(--link);color:var(--text);font-weight:600}
.sp-lv.none{border:none;cursor:default}
@media (max-width:520px){.sp-levels{grid-template-columns:repeat(3,minmax(64px,1fr))}.sp-lang{grid-template-columns:1fr}}