/* ============================================================================
   LessonX NOVA — the app design system (light default + dark).
   Loads AFTER css/style.css and REPLACES css/theme-x.css on migrated pages.
   Source of truth: docs/NOVA-REDESIGN-PLAN.md (§3 tokens, §4 shell contract).
   Structure:
     1. tokens (light + dark)          4. Nova components (cards, chips, …)
     2. base (body, type, a11y)        5. legacy class re-skins (Group B)
     3. shell (sidebar/topbar/focus)   6. per-page sections (appended per phase)
   Rules: never change layout mechanics of .canvas-frame/#worksheetPage (ink
   coordinate space); writing surfaces stay LIGHT in dark mode; keep every
   class name that page JS creates (.x-pill, .x-choice, .swatch, .mk-card…).
   ========================================================================== */

/* ---------- 1. TOKENS ---------------------------------------------------- */
:root{
  /* Nova Light (default) */
  --bg:#f7f9fc; --panel:#ffffff; --panel2:#f1f5fb;
  --ink:#172033; --muted:#66758d;
  --line:#24364d; --softline:#d7e0ec;
  --blue:#4f7df3; --aqua:#31cbb5; --violet:#8e72f4; --lime:#7fcb43;
  --amber:#f1b84b; --danger:#e85f78;
  --radius:22px; --radius-sm:13px; --shadow:none;
  --font:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  /* bridge tokens (legacy names used by style.css + page JS markup) */
  --brand:var(--blue); --brand-dark:#405fbe; --border:var(--softline);
  --navy:#24364d; --ok:#36751f; --panel-solid:#ffffff;
  /* soft state tints (light) */
  --tint-blue:#eef4ff; --tint-good:#effae8; --tint-bad:#fdeef1; --tint-warn:#fff7e2;
  --chip-good-bd:#9fd082; --chip-bad-bd:#e8a5b3;
  /* fixed writing-surface palette — SAME in both themes (plan D5) */
  --paper-bg:#fbfdff; --paper-grid:#e9eef5; --paper-ink:#162033;
  --grad:linear-gradient(135deg,var(--blue),var(--violet));
}
html[data-theme="dark"]{
  --bg:#07101d; --panel:#0c1828; --panel2:#101f33;
  --ink:#f7f9ff; --muted:#9fb0c8;
  --line:#253b56; --softline:#1d3049;
  --blue:#79a7ff; --aqua:#5eead4; --violet:#b294ff; --lime:#b6f36b;
  --amber:#ffd166; --danger:#ff7a90;
  --shadow:0 30px 80px rgba(0,0,0,.32);
  --brand:var(--blue); --brand-dark:#405fbe; --border:var(--softline);
  --navy:#9fb0c8; --ok:#8fdc74; --panel-solid:#0c1828;
  --tint-blue:#152742; --tint-good:#16301b; --tint-bad:#3a1b24; --tint-warn:#33290f;
  --chip-good-bd:#3f6b31; --chip-bad-bd:#7c4451;
  /* --paper-* NOT overridden: canvas stays light in dark mode */
}

/* ---------- 2. BASE ------------------------------------------------------ */
body{
  margin:0; font-family:var(--font); color:var(--ink); min-height:100vh;
  background:
    radial-gradient(circle at 8% -5%, rgba(79,125,243,.11), transparent 27%),
    radial-gradient(circle at 96% 4%, rgba(49,203,181,.09), transparent 24%),
    linear-gradient(180deg,#fbfcfe 0,#f4f7fb 55%,#f8fafc 100%);
}
html[data-theme="dark"] body{
  background:
    radial-gradient(circle at 10% -10%, rgba(121,167,255,.18), transparent 27%),
    radial-gradient(circle at 95% 3%, rgba(94,234,212,.11), transparent 24%),
    linear-gradient(180deg,#07101d 0,#081321 100%);
}
a{color:inherit}
button,input,select,textarea{font:inherit}
h1,h2,h3{letter-spacing:-.03em}
::selection{background:rgba(79,125,243,.25)}
:focus-visible{outline:2px solid var(--blue); outline-offset:2px; border-radius:4px}
@media (prefers-reduced-motion: reduce){
  *,*:before,*:after{transition:none!important; animation:none!important}
}
[hidden]{display:none!important} /* re-assert after any display rules below */

/* ---------- 3. SHELL (rendered by js/shell.js) --------------------------- */
.nova-shell{display:grid; grid-template-columns:230px 1fr; min-height:100vh}
.sidebar{position:sticky; top:0; height:100vh; padding:20px 14px;
  border-right:1.5px solid var(--line); display:flex; flex-direction:column;
  gap:4px; background:rgba(255,255,255,.88); backdrop-filter:blur(22px); z-index:40}
html[data-theme="dark"] .sidebar{background:rgba(12,24,40,.86)}
.brand{display:flex; align-items:center; gap:11px; font-weight:850;
  letter-spacing:-.04em; padding:7px 10px 21px; text-decoration:none; font-size:17px}
.brandmark{width:40px; height:40px; border-radius:13px; background:var(--grad);
  display:grid; place-items:center; color:#fff; font-weight:950; transform:rotate(-5deg)}
/* Plaito rebrand: icon + vector wordmark (currentColor → theme-aware) */
.brandmark-icon{width:40px; height:40px; border-radius:13px; transform:rotate(-5deg); flex:none}
.brand-txt svg.brand-word{height:24px; width:auto; display:block; color:var(--ink)}
.brand-txt small{color:#6D4CC2; font-size:9px; font-weight:800; letter-spacing:.22em; line-height:1.6}
html[data-theme="dark"] .brand-txt small{color:#a88ff7}
.brand small{display:block; color:var(--muted); font-size:10px;
  letter-spacing:.08em; text-transform:uppercase; margin-top:1px; font-weight:750}
.snav{display:grid; gap:5px; overflow-y:auto; min-height:0; flex:1 1 auto;
  align-content:start}
.snav a{display:flex; align-items:center; gap:12px; padding:11px 12px;
  border-radius:14px; color:var(--muted); font-weight:650; font-size:14px;
  border:1px solid transparent; text-decoration:none}
.snav a:hover,.snav a[aria-current="page"]{
  background:linear-gradient(90deg,rgba(79,125,243,.10),rgba(49,203,181,.05));
  color:var(--ink); border-color:#cbd6e4}
html[data-theme="dark"] .snav a:hover,html[data-theme="dark"] .snav a[aria-current="page"]{
  background:var(--panel2); border-color:var(--line)}
.snav i{width:25px; height:25px; border:1px solid #c7d2df; border-radius:9px;
  display:grid; place-items:center; font-style:normal; font-size:12px; background:var(--panel-solid)}
html[data-theme="dark"] .snav i{border-color:var(--line)}
.snav .snav-sec{margin:12px 10px 2px; font-size:10px; font-weight:850;
  letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
.sidebar-bottom{margin-top:auto}
.profile-mini{padding:11px; border:1.5px solid var(--line); border-radius:16px;
  background:var(--panel); display:flex; gap:10px; align-items:center;
  text-decoration:none}
.profile-mini b{font-size:13.5px}
.profile-mini small{color:var(--muted); display:block; font-size:11.5px}
.pmini-avatar{width:38px; height:38px; border-radius:50%; display:grid;
  place-items:center; background:linear-gradient(145deg,#bdf4ea,#b8ccff);
  color:#172033; font-weight:900; border:1px solid #afbed2; font-size:13px; flex:none}
.nova-main{min-width:0; display:flex; flex-direction:column}
.nova-topbar{height:64px; display:flex; align-items:center; gap:12px;
  justify-content:space-between; padding:0 24px; border-bottom:1.5px solid var(--line);
  background:rgba(248,250,252,.82); backdrop-filter:blur(18px);
  position:sticky; top:0; z-index:30}
html[data-theme="dark"] .nova-topbar{background:rgba(7,16,29,.82)}
.crumb{font-weight:750; font-size:15.5px}
.top-actions{display:flex; align-items:center; gap:9px}
.nova-content{padding:24px; max-width:1500px; margin:0 auto; width:100%; box-sizing:border-box}

/* focus variant (no sidebar) */
.focusbar{height:60px; display:flex; align-items:center; gap:14px;
  padding:0 16px; border-bottom:1.5px solid var(--line);
  background:rgba(248,250,252,.86); backdrop-filter:blur(18px);
  position:sticky; top:0; z-index:30}
html[data-theme="dark"] .focusbar{background:rgba(7,16,29,.86)}
.focus-title{display:flex; flex-direction:column; min-width:0}
.focus-title b{font-weight:800; font-size:14.5px; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis}
.focus-title small{color:var(--muted); font-size:11px}
.focus-slot{display:flex; align-items:center; gap:9px; margin-left:auto}
#shellActionsMini{display:flex; align-items:center; gap:9px}
.focus-main{flex:1; min-height:0; display:flex; flex-direction:column}
.nova-focus{height:100vh; height:100dvh; display:flex; flex-direction:column;
  overflow:hidden}
.focusbar{flex:none}

@media (max-width:1100px){
  .nova-shell{grid-template-columns:76px 1fr}
  .brand>div,.snav a span,.profile-mini>div,.snav .snav-sec{display:none}
  .sidebar{padding:16px 10px}
  .brand{justify-content:center; padding-bottom:14px}
  .snav a{justify-content:center; padding:10px 6px}
  .profile-mini{justify-content:center; padding:8px}
}
@media (max-width:800px){
  .nova-shell{display:block}
  .sidebar{height:auto; position:fixed; left:10px; right:10px; bottom:10px; top:auto;
    border:1.5px solid var(--line); border-radius:20px; padding:8px; flex-direction:row;
    background:rgba(255,255,255,.94)}
  html[data-theme="dark"] .sidebar{background:rgba(12,24,40,.96)}
  .brand,.sidebar-bottom{display:none}
  .snav{grid-auto-flow:column; grid-auto-columns:1fr; width:100%}
  .snav a{padding:10px 4px}
  .snav a:nth-child(n+6){display:none}
  .nova-content{padding:16px 16px 96px}
}

/* ---------- 4. NOVA COMPONENTS ------------------------------------------- */
.iconbtn,.btn{border:1.5px solid var(--line); background:var(--panel);
  color:var(--ink); border-radius:var(--radius-sm); padding:10px 14px;
  cursor:pointer; font-weight:750; font-size:13.5px; text-decoration:none;
  display:inline-flex; align-items:center; gap:7px; line-height:1.1;
  width:auto} /* width:auto beats style.css .btn{width:100%} */
.iconbtn{padding:10px 12px}
.btn:hover,.iconbtn:hover{border-color:var(--blue)}
.btn.primary{background:var(--grad); border-color:var(--brand-dark); color:#fff}
.btn.primary:hover{filter:brightness(1.06)}
/* dark theme: gradient goes pastel — dark ink text for contrast (mockup-true) */
html[data-theme="dark"] .btn.primary,html[data-theme="dark"] .tbtn.primary,
html[data-theme="dark"] .authform .btn,html[data-theme="dark"] .landing .btn,
html[data-theme="dark"] .tab.active{color:#0b1526}
.btn.aqua{background:#dff9f4; border-color:#2d9d8e; color:#173833}
html[data-theme="dark"] .btn.aqua{background:#123a34; border-color:#2d9d8e; color:#a9efe4}
.btn.ghost{background:transparent; border-color:transparent}
.btn.small{padding:6px 10px; font-size:12.5px}
.btn[disabled],.tbtn[disabled]{opacity:.5; cursor:not-allowed}
.card{background:var(--panel); border:1.5px solid var(--line);
  border-radius:var(--radius); padding:20px; min-width:0; box-shadow:var(--shadow)}
.card h3{margin:0 0 7px; letter-spacing:-.025em; font-size:16.5px}
.muted{color:var(--muted)}
.eyebrow{text-transform:uppercase; letter-spacing:.16em; color:#187c70;
  font-size:11px; font-weight:850}
html[data-theme="dark"] .eyebrow{color:var(--aqua)}
.page-title{font-size:clamp(24px,3vw,30px); line-height:1.05;
  letter-spacing:-.045em; margin:10px 0 8px}
.section-title{margin:28px 0 14px; font-size:21px; letter-spacing:-.035em}
.hero{border:1.5px solid var(--line); border-radius:26px; padding:26px 28px;
  position:relative; overflow:hidden; box-shadow:var(--shadow);
  background:linear-gradient(135deg,rgba(79,125,243,.10),rgba(142,114,244,.04) 50%,rgba(49,203,181,.07)),var(--panel)}
.hero p{color:var(--muted); max-width:640px; margin:6px 0 0}
.row{display:flex; align-items:center}
.between{justify-content:space-between}
.gap{gap:10px}
.wrap{flex-wrap:wrap}
.grid{display:grid; gap:16px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1100px){.g4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:800px){.g2,.g3,.g4{grid-template-columns:1fr}}
.metric{font-size:32px; font-weight:850; letter-spacing:-.05em}
.metric small{font-size:12px; color:var(--muted); letter-spacing:0; font-weight:650}
.chip{display:inline-flex; align-items:center; gap:6px; border:1px solid #aebdce;
  border-radius:999px; padding:5px 10px; color:#526279; background:var(--panel-solid);
  font-size:12px; font-weight:700; line-height:1.2}
html[data-theme="dark"] .chip{border-color:var(--line); color:var(--muted)}
.chip.good{color:var(--ok); border-color:var(--chip-good-bd); background:var(--tint-good)}
.chip.live{color:#a42d46; background:var(--tint-bad); border-color:var(--chip-bad-bd)}
html[data-theme="dark"] .chip.live{color:#ffb3c1}
.progress{height:7px; border-radius:999px; background:#e2e9f2; overflow:hidden}
html[data-theme="dark"] .progress{background:#152640}
.progress i{height:100%; display:block; background:linear-gradient(90deg,var(--blue),var(--aqua));
  border-radius:inherit}
.list{display:grid; gap:10px}
.list-item{display:flex; align-items:center; gap:12px; padding:12px;
  border:1px solid #c7d2df; border-radius:15px; background:var(--panel-solid)}
html[data-theme="dark"] .list-item{border-color:var(--line)}
.list-item .grow{flex:1; min-width:0}
.list-item strong{display:block}
.list-item small{color:var(--muted)}
.orb{width:44px; height:44px; border-radius:15px; display:grid; place-items:center;
  background:var(--tint-blue); border:1px solid #aebfda; font-weight:900;
  color:#335eb7; flex:none}
html[data-theme="dark"] .orb{border-color:var(--line); color:var(--blue)}
.table{width:100%; border-collapse:collapse}
.table th,.table td{text-align:left; padding:12px 10px;
  border-bottom:1px solid var(--softline); font-size:13px}
.table th{color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.09em}
.seg{display:inline-flex; border:1.5px solid var(--line); border-radius:var(--radius-sm);
  padding:4px; background:var(--panel2); gap:2px}
.seg button{flex:1; border:1px solid transparent; border-radius:9px; padding:8px 12px;
  background:transparent; color:var(--muted); font-weight:700; cursor:pointer; font-size:13px}
.seg button.active{background:var(--panel-solid); color:var(--ink); border-color:#bac6d4}
html[data-theme="dark"] .seg button.active{border-color:var(--line)}
.form{display:grid; gap:15px}
.field label{display:block; font-size:12px; color:var(--muted); margin-bottom:7px; font-weight:750}
.field input,.field select,.field textarea,
input.nv,select.nv,textarea.nv{width:100%; border:1.5px solid var(--line);
  background:var(--panel-solid); color:var(--ink); padding:12px 13px;
  border-radius:var(--radius-sm); outline:none; box-sizing:border-box}
.field textarea{min-height:110px; resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--blue)}
.builder{display:grid; grid-template-columns:330px 1fr; gap:16px}
@media (max-width:900px){.builder{grid-template-columns:1fr}}
.tool{border:1px solid #afbdcd; border-radius:12px; padding:8px 10px; text-align:center;
  color:#516176; background:var(--panel2); font-size:12.5px; font-weight:700; cursor:pointer}
html[data-theme="dark"] .tool{border-color:var(--line); color:var(--muted)}
.tool.active{color:#fff; background:var(--blue); border-color:#3e66c7}
.toolgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:7px}
.auth-card{width:min(440px,100%); border:1.5px solid var(--line);
  background:var(--panel); border-radius:28px; padding:30px; box-shadow:var(--shadow)}
.auth-card h2{font-size:30px; letter-spacing:-.045em; margin:0 0 8px}

/* ---------- 5. LEGACY RE-SKINS (Group B — shared) ------------------------- */
/* beats style.css .btn.secondary{background:#fff} (specificity 0,2,0) */
.btn.secondary{background:var(--panel-solid); color:var(--ink);
  border:1.5px solid var(--line)}
/* board / worksheet-picker inputs (aside.panel) */
.ws-field select,.ws-field input{background:var(--panel-solid); color:var(--ink);
  border:1.5px solid var(--line); border-radius:10px; padding:7px 9px}
/* buttons used across old pages + created by JS */
.tbtn{border:1.5px solid var(--line); background:var(--panel); color:var(--ink);
  border-radius:11px; padding:8px 12px; cursor:pointer; font-weight:700; font-size:13px}
.tbtn:hover{border-color:var(--blue)}
.tbtn.primary{background:var(--grad); border-color:var(--brand-dark); color:#fff}
.tbtn.rec{background:var(--danger); border-color:#c24a60; color:#fff}
.nav-logo{font-weight:900; letter-spacing:-.04em; color:var(--ink); font-size:18px}
.nav-logo span{color:var(--blue)}
.swatch{width:22px; height:22px; border-radius:50%; display:inline-block;
  cursor:pointer; border:2px solid var(--panel-solid); outline:1px solid #aebdce}
.swatch.active{outline:2.5px solid var(--blue)}
.spacer{flex:1}
.modal-card{background:var(--panel); border:1.5px solid var(--line);
  border-radius:18px; box-shadow:0 30px 80px rgba(0,0,0,.35); color:var(--ink)}
/* content-card variant of .panel (progress/classes/students pages).
   NOTE: style.css scopes the board aside as `aside.panel` — untouched. */
div.panel,section.panel{background:var(--panel); border:1.5px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow)}
/* writing surfaces keep light paper in BOTH themes (plan D5) */
.canvas-frame{background:var(--paper-bg); border:1.5px solid var(--line);
  border-radius:16px; box-shadow:var(--shadow)}
#worksheetPage{color:var(--paper-ink)}

/* ---------- 6. PAGE SECTIONS --------------------------------------------- */
/* ===== library.html ===== */
.welcome-banner{background:linear-gradient(135deg,rgba(79,125,243,.10),rgba(142,114,244,.05)),var(--panel);
  border:1.5px solid var(--line); border-radius:16px; color:var(--ink)}
.chip-btn{border:1px solid #aebdce; border-radius:999px; padding:6px 12px;
  background:var(--panel-solid); color:#526279; font-size:12.5px; font-weight:700; cursor:pointer}
html[data-theme="dark"] .chip-btn{border-color:var(--line); color:var(--muted)}
.chip-btn.active{background:var(--grad); color:#fff; border-color:var(--brand-dark)}
html[data-theme="dark"] .chip-btn.active{color:#0b1526}
.rec-card{background:var(--panel); border:1.5px solid var(--line); border-radius:18px}

/* ===== exam.html (focus two-panel: question | canvas) ===== */
.x-titleblock{display:flex; flex-direction:column; min-width:0}
.x-titleblock .x-title{font-weight:800; font-size:14.5px; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis}
.x-titleblock .x-prog{color:var(--muted); font-size:11px}
.x-timer{font-variant-numeric:tabular-nums; font-weight:800; font-size:15px;
  border:1px solid #aebdce; border-radius:999px; padding:6px 12px;
  background:var(--panel-solid)}
html[data-theme="dark"] .x-timer{border-color:var(--line)}
.x-timer.low{color:#a42d46; background:var(--tint-bad); border-color:var(--chip-bad-bd)}
html[data-theme="dark"] .x-timer.low{color:#ffb3c1}
.x-main{flex:1; min-height:0; display:grid;
  grid-template-columns:minmax(360px,44%) 1fr; gap:14px; padding:14px}
.x-q-panel{display:flex; flex-direction:column; min-height:0;
  background:var(--panel); border:1.5px solid var(--line);
  border-radius:18px; box-shadow:var(--shadow); overflow:hidden}
.x-nav{display:flex; gap:4px; flex-wrap:wrap; padding:10px 12px;
  border-bottom:1.5px solid var(--softline); max-height:92px; overflow-y:auto; flex:none}
.x-pill{width:30px; height:26px; border:1px solid #aebdce; border-radius:8px;
  background:var(--panel-solid); font-size:12px; font-weight:700; cursor:pointer;
  color:var(--ink)}
html[data-theme="dark"] .x-pill{border-color:var(--line)}
.x-pill.done{background:var(--tint-blue); border-color:#93b1e8}
.x-pill.cur{outline:2px solid var(--blue); outline-offset:1px}
.x-pill.ok{background:var(--tint-good); border-color:var(--chip-good-bd)}
.x-pill.bad{background:var(--tint-bad); border-color:var(--chip-bad-bd)}
.x-q{flex:1; overflow-y:auto; padding:16px 18px; min-height:0}
.x-more{flex:none; border:0; border-top:1.5px solid var(--softline);
  background:var(--panel2); color:var(--muted); font:inherit; font-size:12px;
  font-weight:700; padding:4px 0; cursor:pointer}
.x-q .prompt{font-size:17px; font-weight:600; white-space:pre-wrap; line-height:1.5}
.x-q img.crop{max-width:100%; border:1px solid var(--softline); border-radius:10px; margin:10px 0;
  background:#fff} /* scans authored on white */
details.x-passage{margin:8px 0 12px; font-size:14px; background:var(--panel2);
  border:1px solid var(--softline); border-radius:10px; padding:8px 12px; white-space:pre-wrap}
.x-choices{display:flex; flex-direction:column; gap:8px; margin-top:14px}
.x-choice{display:flex; gap:10px; align-items:baseline; text-align:left; font:inherit;
  font-size:15px; padding:10px 13px; border:1px solid #c7d2df; border-radius:15px;
  background:var(--panel-solid); color:var(--ink); cursor:pointer}
html[data-theme="dark"] .x-choice{border-color:var(--line)}
.x-choice b{min-width:20px; color:#335eb7}
html[data-theme="dark"] .x-choice b{color:var(--blue)}
.x-choice:hover{border-color:var(--blue)}
.x-choice.sel{border-color:var(--blue); background:var(--tint-blue);
  outline:1px solid var(--blue)}
.x-choice.rv-ok{border-color:var(--chip-good-bd); background:var(--tint-good)}
.x-choice.rv-bad{border-color:var(--chip-bad-bd); background:var(--tint-bad)}
.x-foot{display:flex; gap:10px; align-items:center; padding:10px 12px;
  border-top:1.5px solid var(--softline); flex:none}
.x-foot .x-prog{color:var(--muted); font-size:12px}
.x-work{display:flex; flex-direction:column; min-height:0;
  background:var(--panel); border:1.5px solid var(--line);
  border-radius:18px; box-shadow:var(--shadow); overflow:hidden}
/* Reading questions: passage pane (left) + question/choices (right); the
   working canvas hides — same two-pane shape as the entry quizzes.
   The passage matches the REAL exam surface: it gets MOST of the width and
   reads as plain white paper (white in dark mode too, like the ink canvas)
   with its own scrollbar — not a themed card. */
.x-passage-panel{display:none; flex-direction:column; min-height:0;
  background:#fff; border:1px solid #d5dbe6;
  border-radius:12px; overflow:hidden}
.x-main.has-passage{grid-template-columns:minmax(420px,57%) 1fr}
.x-main.has-passage .x-work{display:none}
.x-main.has-passage .x-passage-panel{display:flex}
.x-passage-panel .x-tools{background:#f4f6fa; border-bottom:1px solid #e3e8f0;
  color:#3c4658}
.x-passage-panel .x-tools .label{color:#5a6478}
.x-passage-body{flex:1; overflow-y:auto; padding:22px 30px; min-height:0;
  background:#fff; color:#1c2433}
.x-passage-body h3{margin:0 0 12px; font-size:17px; color:#1c2433}
#ptext{font-size:15px; line-height:1.7; white-space:pre-wrap; cursor:text;
  max-width:70ch}
.hl-sw{width:20px; height:20px; border-radius:50%; cursor:pointer; flex:none;
  display:inline-block; border:2px solid rgba(0,0,0,.18)}
html[data-theme="dark"] .hl-sw{border-color:rgba(255,255,255,.35)}
.hl-sw.active{outline:2px solid var(--blue); outline-offset:1px}
#ptext mark.hl{border-radius:3px; padding:0 1px; cursor:pointer; color:#111}
mark.hl-y{background:#fde047} mark.hl-g{background:#86efac} mark.hl-p{background:#f9a8d4}
.x-tools{display:flex; align-items:center; gap:8px; padding:8px 12px;
  border-bottom:1.5px solid var(--softline); flex:none}
.x-tools .label{font-size:11px; font-weight:750; color:var(--muted); text-transform:uppercase;
  letter-spacing:.07em}
.x-tools .tbtn.active{background:var(--tint-blue); border-color:var(--blue)}
/* the writing surface: light grid paper in BOTH themes (plan D5) */
.x-canvas-wrap{flex:1; min-height:0; position:relative;
  background:linear-gradient(var(--paper-grid) 1px,transparent 1px),
             linear-gradient(90deg,var(--paper-grid) 1px,transparent 1px),
             var(--paper-bg);
  background-size:28px 28px}
canvas#work{position:absolute; inset:0; width:100%; height:100%;
  touch-action:none; cursor:crosshair}
.x-sol{background:var(--tint-blue); border:1px solid #93b1e8; border-radius:12px;
  padding:10px 12px; margin-top:12px; font-size:14px; white-space:pre-wrap}
html[data-theme="dark"] .x-sol{border-color:#3c5a8f}
.x-res{padding:8px 0 4px; font-size:15px; font-weight:750}
.x-skillbar{font-size:12px; margin:3px 0}
.x-skillbar .bar{display:inline-block; height:8px; background:var(--grad);
  border-radius:4px; vertical-align:middle}
.mk-card{margin-top:10px; border-radius:12px; padding:10px 12px; font-size:13.5px;
  border:1.5px solid var(--softline); background:var(--panel2)}
.mk-card div{margin-top:4px}
.mk-correct{border-color:var(--chip-good-bd); background:var(--tint-good)}
.mk-partially_correct{border-color:#d9b44a; background:var(--tint-warn)}
.mk-incorrect{border-color:var(--chip-bad-bd); background:var(--tint-bad)}
/* Tablets & phones: the exam ALWAYS fits one screen — no page scroll.
   (Palm-scroll cancels in-flight Apple-Pencil strokes; see .exam-body rules.) */
@media (max-width:900px){
  .x-main{grid-template-columns:minmax(272px,46%) 1fr; gap:10px; padding:10px}
}
@media (max-width:640px){
  .x-main{grid-template-columns:1fr;
    grid-template-rows:minmax(0,56%) minmax(0,44%); padding:8px; gap:8px}
  .x-q-panel,.x-work{min-height:0}
  /* tall scan crops push the choices out of the short stacked pane */
  .x-q img.crop{max-height:30vh}
}

/* ===== admin.html (focus builder: params | output) ===== */
.focus-main{overflow-y:auto}
.ad-wrap{max-width:1180px; margin:0 auto; padding:22px 20px 60px; width:100%; box-sizing:border-box}
.ad-wrap h2{margin:30px 0 4px; font-size:20px; letter-spacing:-.03em}
.ad-wrap .sub{color:var(--muted); font-size:13px; margin:0 0 14px}
.ad-builder{margin-top:14px}
.ad-params{display:grid; gap:14px; align-content:start}
.ad-tiles{display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:12px}
.ad-tile{background:var(--panel); border:1.5px solid var(--line); border-radius:16px;
  padding:14px 16px; box-shadow:var(--shadow)}
.ad-tile b{font-size:26px; display:block; letter-spacing:-.04em}
.ad-tile span{font-size:12px; color:var(--muted)}
.ad-card{background:var(--panel); border:1.5px solid var(--line); border-radius:18px;
  padding:16px; box-shadow:var(--shadow)}
.ad-card h3{margin:0 0 10px; font-size:15px}
.ad-card label{display:block; font-size:12px; font-weight:650; margin:10px 0 3px; color:var(--muted)}
.ad-card input,.ad-card select{width:100%; box-sizing:border-box; padding:8px 10px;
  border:1.5px solid var(--line); border-radius:10px; font:inherit; font-size:13px;
  background:var(--panel-solid); color:var(--ink)}
.ad-row{display:flex; gap:10px}
.ad-row > div{flex:1}
.ad-out{font-size:12.5px; margin-top:10px; white-space:pre-wrap}
.ad-out:empty{display:none}
.ad-out:not(:empty){background:var(--tint-good); border:1px solid var(--chip-good-bd);
  border-radius:12px; padding:10px 12px; color:var(--ink)}
.ad-table{width:100%; border-collapse:collapse; font-size:13px}
.ad-table th,.ad-table td{text-align:left; padding:8px 10px; border-bottom:1px solid var(--softline)}
.ad-table th{font-size:11px; text-transform:uppercase; color:var(--muted); letter-spacing:.07em}
.ad-tools{display:grid; grid-template-columns:repeat(auto-fill,minmax(245px,1fr)); gap:12px}
.ad-tool{background:var(--panel); border:1.5px solid var(--line); border-radius:16px; padding:14px 16px}
.ad-tool h3{margin:0 0 4px; font-size:14px}
.ad-tool p{margin:0 0 8px; font-size:12px; color:var(--muted)}
.ad-tool .who{display:inline-block; font-size:10px; font-weight:800; padding:2px 9px;
  border-radius:10px; background:var(--tint-blue); color:#335eb7; text-transform:uppercase;
  margin-bottom:6px; letter-spacing:.06em}
html[data-theme="dark"] .ad-tool .who{color:var(--blue)}
.ad-guide details{background:var(--panel); border:1.5px solid var(--line); border-radius:14px;
  padding:10px 14px; margin-bottom:8px}
.ad-guide summary{font-weight:700; font-size:14px; cursor:pointer}
.ad-guide p,.ad-guide li{font-size:13px; line-height:1.55}
.ad-wrap #gate{display:none} /* admin-only: soapbox has its own #gate (visible) */
@media (max-width:900px){.ad-builder{grid-template-columns:1fr}}

/* ===== exams.html (hub) ===== */
.ex-wrap{max-width:1040px; margin:0 auto; padding:4px 4px 60px}
.ex-wrap h2{margin:26px 0 4px; font-size:20px; letter-spacing:-.03em}
.ex-wrap .sub{color:var(--muted); font-size:13px; margin:0 0 14px}
.ex-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:14px}
.ex-card{background:var(--panel); border:1.5px solid var(--line); border-radius:18px;
  padding:16px; display:flex; flex-direction:column; gap:8px; box-shadow:var(--shadow)}
.ex-card h3{margin:0; font-size:15px}
.ex-meta{font-size:12px; color:var(--muted)}
.ex-tag{display:inline-block; font-size:10px; font-weight:800; padding:2px 9px;
  border-radius:10px; background:var(--tint-blue); color:#335eb7; text-transform:uppercase;
  letter-spacing:.06em; align-self:flex-start}
html[data-theme="dark"] .ex-tag{color:var(--blue)}
.ex-actions{display:flex; align-items:center; gap:10px; margin-top:auto}
.sk-row{display:flex; align-items:center; gap:10px; background:var(--panel);
  border:1px solid #c7d2df; border-radius:14px; padding:10px 14px; margin-bottom:8px}
html[data-theme="dark"] .sk-row{border-color:var(--line)}
.sk-row b{font-size:14px}
.sk-row .d{font-size:12px; color:var(--muted); flex:1}
.sk-btns{display:flex; gap:6px; flex-wrap:wrap}
.dom-tabs{display:flex; gap:6px; margin-bottom:12px; flex-wrap:wrap}
.dom-tab{border:1px solid #aebdce; background:var(--panel-solid); color:var(--muted);
  border-radius:999px; padding:6px 14px; font-size:13px; font-weight:700; cursor:pointer}
html[data-theme="dark"] .dom-tab{border-color:var(--line)}
.dom-tab.on{background:var(--grad); color:#fff; border-color:var(--brand-dark)}
html[data-theme="dark"] .dom-tab.on{color:#0b1526}
.toggle{user-select:none}
/* exams hub v2: top-level section tabs, grouped sim cards, skill cards */
.seg-tabs{display:inline-flex; gap:4px; border:1.5px solid var(--line); background:var(--panel);
  border-radius:14px; padding:4px; margin:6px 0 16px; box-shadow:var(--shadow)}
.seg-tab{border:1px solid transparent; background:transparent; color:var(--muted);
  font-weight:800; font-size:13.5px; padding:8px 16px; border-radius:10px; cursor:pointer}
.seg-tab.on{background:var(--grad); color:#fff; border-color:var(--brand-dark)}
html[data-theme="dark"] .seg-tab.on{color:#0b1526}
.seg-tab .cnt{opacity:.75; font-weight:700}
.type-chips{display:flex; gap:6px; flex-wrap:wrap; margin:0 0 14px}
.ex-grid.sims{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.ex-head{display:flex; align-items:center; justify-content:space-between; gap:8px}
.ex-head .toggle{font-size:12px; color:var(--muted)}
.ex-secs{display:flex; flex-direction:column; margin-top:2px}
.ex-sec{display:flex; align-items:center; gap:8px; padding:7px 0; border-top:1px solid var(--line); font-size:12.5px}
.ex-sec-name{font-weight:700}
.ex-sec-meta{color:var(--muted); white-space:nowrap}
.ex-sec .tbtn{margin-left:auto; padding:5px 12px; font-size:12px; border-radius:9px}
.sk-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:12px}
.sk-card{background:var(--panel); border:1.5px solid var(--line); border-radius:16px;
  padding:14px 16px; display:flex; flex-direction:column; gap:8px; box-shadow:var(--shadow)}
.sk-card b{font-size:14px}
.sk-card .d{font-size:12px; color:var(--muted); flex:1}

/* ===== practice.html (focus two-panel: set-up | paper) ===== */
.p-main{flex:1; min-height:0; display:grid;
  grid-template-columns:248px 1fr; gap:14px; padding:14px}
.p-panel{background:var(--panel); border:1.5px solid var(--line);
  border-radius:18px; box-shadow:var(--shadow); padding:14px;
  overflow-y:auto; display:flex; flex-direction:column; gap:10px}
.p-sec{font-size:11px; font-weight:850; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted); margin-top:6px}
.p-sec:first-child{margin-top:0}
.p-tools{display:flex; flex-wrap:wrap; gap:7px; align-items:center}
.ws-sel{width:100%; border:1.5px solid var(--line); background:var(--panel-solid);
  color:var(--ink); padding:10px 12px; border-radius:var(--radius-sm)}
.lvl-tabs{display:flex; border:1.5px solid var(--line); border-radius:var(--radius-sm);
  padding:4px; background:var(--panel2); gap:2px}
.lvl-tab{flex:1; border:1px solid transparent; border-radius:9px; padding:7px 4px;
  background:transparent; color:var(--muted); font-weight:700; font-size:12.5px; cursor:pointer}
.lvl-tab.active{background:var(--panel-solid); color:var(--ink); border-color:#bac6d4}
html[data-theme="dark"] .lvl-tab.active{border-color:var(--line)}
.toggle{display:flex; gap:8px; align-items:center; font-size:13px; color:var(--muted);
  font-weight:650; cursor:pointer}
.width-dot{display:inline-block; border-radius:50%; background:var(--ink)}
.rec-slot .status{display:inline-flex; align-items:center; gap:6px; font-size:12px;
  color:var(--muted); font-weight:700}
.rec-slot .dot{width:9px; height:9px; border-radius:50%; background:#9aa7b8; display:inline-block}
.rec-slot .dot.on{background:var(--danger)}
.rec-timer{font-variant-numeric:tabular-nums; font-weight:800; font-size:13px}
@media (max-width:900px){
  .p-main{grid-template-columns:1fr; grid-template-rows:auto 1fr; padding:10px; gap:10px}
  .p-panel{flex-direction:row; flex-wrap:wrap; align-items:center; overflow:visible;
    max-height:none}
  .p-panel .p-sec{display:none}
  .p-panel .ws-sel,.p-panel .lvl-tabs{width:auto; flex:1; min-width:140px}
  .p-panel #newBtn{width:auto!important}
}

/* ===== questions.html (Q&A shared skins — also question/profile/studio) ===== */
/* JS-created classes (questions.js/profile.js/studio.js) — names must not change */
.qrow{background:var(--panel-solid); border:1px solid #c7d2df; border-radius:15px}
html[data-theme="dark"] .qrow{border-color:var(--line)}
.qrow:hover{border-color:var(--blue)}
.bounty{color:#8a5f0e; background:var(--tint-warn); border:1px solid #d9b44a}
html[data-theme="dark"] .bounty{color:var(--amber)}
.solved{color:var(--ok); background:var(--tint-good); border:1px solid var(--chip-good-bd)}
.qrow-meta .rec-subject,.qbox-top .rec-subject{background:var(--tint-blue); color:#335eb7}
html[data-theme="dark"] .qrow-meta .rec-subject,
html[data-theme="dark"] .qbox-top .rec-subject{color:var(--blue)}

/* ===== question.html ===== */
.flag-banner{background:var(--tint-bad); border:1px solid var(--chip-bad-bd); color:#a42d46; border-radius:12px}
html[data-theme="dark"] .flag-banner{color:#ffb3c1}
.qbox{border:1.5px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow)}
.answer{background:var(--panel-solid); border:1px solid #c7d2df; border-radius:15px}
html[data-theme="dark"] .answer{border-color:var(--line)}
.answer.accepted{border-color:var(--chip-good-bd); background:var(--tint-good)}
#answerCard textarea{width:100%; box-sizing:border-box; border:1.5px solid var(--line);
  background:var(--panel-solid); color:var(--ink); border-radius:var(--radius-sm);
  padding:12px 13px; resize:vertical}
#answerCard textarea:focus{border-color:var(--blue)}

/* ===== profile.html ===== */
.prof{border:1.5px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow)}
.chip.tutor{background:#f2eefe; border-color:#cfc2f0; color:#6b4fd8}
.chip.student{background:#e4f8f4; border-color:#9fd8cd; color:#187c70}
html[data-theme="dark"] .chip.tutor{background:var(--panel2); border-color:var(--line); color:var(--violet)}
html[data-theme="dark"] .chip.student{background:var(--panel2); border-color:var(--line); color:var(--aqua)}

/* ===== premium.html ===== */
/* premium.js creates plain .btn CTAs — style them primary in place */
#actions .btn{justify-content:center; background:var(--grad); border-color:var(--brand-dark); color:#fff}
html[data-theme="dark"] #actions .btn{color:#0b1526}

/* ===== record.html (focus: q-pane | canvas, tool bar below) ===== */
/* rec cluster lives in the focus bar; recorder.js/practice.js set class
   "dot off" while recording — that is the red "live" state */
.rec-slot .dot.off{background:var(--danger)}
.record-body .toolbar{border-top:1.5px solid var(--line); background:var(--panel)}
.record-body .toolbar .label{font-size:11px; font-weight:750; color:var(--muted);
  text-transform:uppercase; letter-spacing:.07em}
.record-body .tbtn:hover{background:var(--panel2)} /* style.css hover is #f8fafc — unreadable in dark */
.q-pane{border-right:1.5px solid var(--line)}
.q-pane-label{letter-spacing:.09em}

/* ===== watch.html (app shell player) ===== */
.watch{padding:4px 0 40px}
.player{border:1.5px solid var(--line); border-radius:15px; box-shadow:var(--shadow)}
.play-btn{background:var(--grad)}
.play-btn:hover{background:var(--grad); filter:brightness(1.06)}
/* compact chrome when embedded inside another page (?embed=1);
   shell.js no-ops there, so no sidebar/topbar renders either */
body.embed .watch-head,body.embed .watch-desc,body.embed .watch-note{display:none}
body.embed .watch{padding:0; max-width:none}

/* ===== hw.html (standalone code-entry card) ===== */
.landing .hw-card{width:min(560px,100%); max-width:560px}
.hw-card h1{margin:0 0 4px; font-size:22px}
.hw-due{color:var(--danger); font-weight:750; font-size:13px}
.hw-note{background:var(--panel2); border:1px solid var(--softline); border-radius:10px;
  padding:10px 14px; margin:10px 0; font-size:14px; white-space:pre-wrap}
.hw-meta{color:var(--muted); font-size:13px; margin:8px 0 16px}
.hw-gen{display:inline-block; margin:2px 6px 2px 0}
.hw-card a.tbtn{text-decoration:none; color:var(--ink)}
.hw-card .tbtn:hover{background:var(--panel2)}
.hw-card .fld label{display:block; font-size:12px; font-weight:750; color:var(--muted);
  margin-bottom:4px}
.hw-card .fld input{width:100%; box-sizing:border-box; font:inherit; padding:10px 12px;
  border:1.5px solid var(--line); border-radius:10px; background:var(--panel-solid);
  color:var(--ink); outline:none}
.hw-card .fld input:focus{border-color:var(--blue)}
.hw-card .go{margin-top:14px; width:100%; padding:11px; font-size:15px}

/* ===== digest.html (parent-facing weekly report; standalone, dg-scoped
       so its .chip/.watch/.panel never leak into other pages) ===== */
.dg-wrap{max-width:780px; margin:0 auto; padding:18px 20px 60px}
.dg-wrap .panel{padding:16px; margin-bottom:14px; border-radius:18px}
.dg-wrap .panel h3{margin:0 0 10px; font-size:15px}
.dg-wrap .m{color:var(--muted); font-size:12px}
.dg-wrap .tiles{display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:10px}
.dg-wrap .tile{border:1px solid var(--softline); border-radius:12px; padding:10px 12px;
  background:var(--panel-solid)}
.dg-wrap .tile b{font-size:22px; display:block; letter-spacing:-.04em}
.dg-wrap .bar-row{display:flex; align-items:center; gap:8px; font-size:12.5px; margin:4px 0}
.dg-wrap .bar-row .lbl{width:200px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.dg-wrap .bar{height:10px; border-radius:5px; background:var(--grad)}
.dg-wrap .bar.low{background:var(--danger)}
.dg-wrap .chip{display:inline-block; font-size:11px; border:1px solid var(--softline);
  border-radius:99px; padding:1px 8px; background:var(--panel2); color:var(--ink);
  margin:1px; font-weight:650}
.dg-wrap .chip.ok{background:var(--tint-good); border-color:var(--chip-good-bd)}
.dg-wrap .chip.part{background:var(--tint-warn); border-color:#d9b44a}
.dg-wrap .chip.bad{background:var(--tint-bad); border-color:var(--chip-bad-bd)}
.dg-wrap .cele{background:var(--tint-good); border:1px solid var(--chip-good-bd);
  border-radius:9px; padding:8px 12px; font-size:13.5px}
.dg-wrap .watch{background:var(--tint-warn); border:1px solid #d9b44a; border-radius:9px;
  padding:8px 12px; font-size:13px; margin:0 0 8px; max-width:none}

/* ===== one-screen work pages (exam / practice / watch) ==================
   These pages must never scroll: on iPad, a palm-triggered page scroll
   CANCELS the in-flight Apple-Pencil stroke (feels like the pen dropping
   out). Admin keeps the default scrollable .focus-main. */
.exam-body .focus-main,.practice-body .focus-main,.watch-body .focus-main{
  overflow:hidden}
/* shared drawing toolbar (js/inktools.js) — same tools on every ink surface */
.inktools{display:flex; align-items:center; gap:7px; flex-wrap:wrap; min-width:0}
.inktools .label{font-size:11px; font-weight:750; color:var(--muted);
  text-transform:uppercase; letter-spacing:.07em; margin-left:4px}
.inktools .tbtn{white-space:nowrap}
.x-tools #tools{flex:1; min-width:0}

/* iPad ink pages: an Apple-Pencil drag must ink, never start text selection
   (Safari runs pencil text-selection unless the page opts out; fingers are
   already covered by touch-action). Form fields opt back in, and the exam
   reading passage opts back in deliberately — selecting there IS the
   highlighter. */
.exam-body,.practice-body,.watch-body,.record-body,.board-body{
  -webkit-user-select:none; user-select:none; -webkit-touch-callout:none}
.exam-body input,.exam-body textarea,
.practice-body input,.practice-body textarea,
.record-body input,.record-body textarea,
.board-body input,.board-body textarea,.board-body select,.board-body .out{
  -webkit-user-select:text; user-select:text}
.exam-body #ptext{-webkit-user-select:text; user-select:text}
.exam-body,.practice-body,.watch-body,.record-body{
  overscroll-behavior:none; touch-action:manipulation}
.x-canvas-wrap,.canvas-frame,.canvas-wrap{touch-action:none;
  -webkit-user-select:none; user-select:none}
/* panels beside the canvas still scroll by touch */
.x-q,.p-panel{touch-action:pan-y}

/* ===== watch.html (focus one-screen player) ===== */
.watch-tb{display:flex; align-items:center; gap:10px; min-width:0}
.watch-tb .watch-av{width:34px; height:34px; flex:none; border-radius:50%;
  overflow:hidden; display:block}
.watch-tb .watch-av svg{width:100%; height:100%; display:block}
.watch-tb b{font-weight:800; font-size:14.5px; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; display:block}
.watch-tb small{color:var(--muted); font-size:11px; display:flex; gap:6px}
.watch-body .watch{flex:1; min-height:0; display:flex; flex-direction:column;
  max-width:1160px; width:100%; margin:0 auto; padding:10px 14px 12px;
  box-sizing:border-box}
.watch-stage{flex:1; min-height:0; display:grid; place-items:center}
/* reading replay panes (board recordings with an event track) — white exam
   paper in both themes, like the live board's reading surface */
.watch-body #wrPanes{width:100%; height:100%; min-height:0; display:grid;
  grid-template-columns:minmax(0,57%) minmax(0,1fr); gap:12px}
.watch-body #wrPanes[hidden]{display:none}
.wr-pane{background:#fff; border:1px solid #d5dbe6; border-radius:14px;
  overflow-y:auto; padding:18px 22px; min-height:0; color:#1c2433}
.wr-pane h3{margin:0 0 10px; font-size:16px; color:#1c2433}
#wrPtext{white-space:pre-wrap; font-size:15px; line-height:1.7; max-width:70ch}
#wrPtext mark{border-radius:3px; padding:0 1px}
.wr-src{font-size:12px; color:#667c91; margin-bottom:8px}
.wr-prompt{white-space:pre-wrap; font-size:15px; margin-bottom:10px}
@media (max-width:700px){ .watch-body #wrPanes{grid-template-columns:1fr} }
/* replayed choice picks (both the reading panes and the v1 in-canvas page) */
.bq-choice.sel{background:var(--tint-blue); box-shadow:inset 0 0 0 2px #2B5BD7;
  border-radius:8px}
.bq-choice.rv-ok{background:var(--tint-good)}
.watch-body .watch-frame{width:100%; aspect-ratio:auto} /* JS sizes to fit */
.watch-body .player{flex:none; margin-top:10px}
.watch-body .watch-desc{flex:none; margin:8px 0 0; color:var(--muted);
  font-size:13px; display:-webkit-box; -webkit-line-clamp:2;
  -webkit-box-orient:vertical; overflow:hidden}
.watch-body .watch-note{flex:none; margin:4px 0 0; font-size:12px;
  color:var(--muted)}
@media (max-height:540px){ /* small landscape: give every pixel to the board */
  .watch-body .watch-desc,.watch-body .watch-note{display:none}
}
/* embedded (?embed=1): shell no-ops — keep the simple in-flow layout */
body.embed [data-focus-slot],body.embed [data-focus-title]{display:none!important}
body.embed .watch{display:block; height:auto}
body.embed .watch-frame{aspect-ratio:4/3; width:100%; height:auto!important}

/* ===== login.html ===== */
.landing .card{background:var(--panel); border:1.5px solid var(--line);
  border-radius:28px; box-shadow:var(--shadow); max-width:440px; padding:30px}
.tab{background:var(--panel2); color:var(--muted); border:1.5px solid var(--line);
  border-radius:11px}
.tab.active{background:var(--grad); color:#fff; border-color:var(--brand-dark)}
.authform .btn,.landing .btn{width:100%; justify-content:center;
  background:var(--grad); border:1.5px solid var(--brand-dark); color:#fff;
  border-radius:var(--radius-sm); padding:12px 16px; font-weight:750}
.field input,.authform .field select,.authform textarea{
  background:var(--panel-solid); color:var(--ink); border:1.5px solid var(--line)}
.field input:focus{border-color:var(--blue); box-shadow:0 0 0 3px rgba(79,125,243,.18)}
.floating-theme{position:fixed; top:14px; right:14px; z-index:60}
/* ===== index.html (/tutoring) ===== */
.nova-content .landing{min-height:calc(100vh - 200px)}
.divider{display:flex; align-items:center; gap:12px; color:var(--muted);
  font-size:12px; margin:16px 0; font-weight:650}
.divider:before,.divider:after{content:""; flex:1; height:1px; background:var(--softline)}

/* ===== lessons.html ===== */
.ls-wrap{max-width:1100px; margin:0 auto; padding:16px 20px 60px}
.ls-cols{display:grid; grid-template-columns:330px 1fr; gap:18px}
@media (max-width:900px){.ls-cols{grid-template-columns:1fr}}
.ls-panel{background:var(--panel); border:1.5px solid var(--line);
  border-radius:18px; padding:16px; box-shadow:var(--shadow)}
.ls-panel h3{margin:0 0 10px; font-size:15px}
.ls-item{padding:8px 10px; border:1px solid var(--softline); border-radius:12px;
  margin-bottom:6px; cursor:pointer; font-size:13px; background:var(--panel-solid)}
.ls-item:hover{border-color:var(--blue)}
.ls-item.sel{border-color:var(--blue); background:var(--tint-blue)}
.ls-item .m{color:var(--muted); font-size:11px}
.fld{margin-bottom:10px}
.fld label{display:block; font-size:11px; font-weight:750; color:var(--muted);
  text-transform:uppercase; margin-bottom:3px}
.fld input,.fld select,.fld textarea{width:100%; box-sizing:border-box; font:inherit;
  font-size:13px; padding:7px 9px; border:1.5px solid var(--line); border-radius:10px;
  background:var(--panel-solid); color:var(--ink)}
/* inline-styled inputs (courseTitle, pickSearch) + JS-built item fields */
.ls-wrap input,.ls-wrap select,.ls-wrap textarea{background:var(--panel-solid); color:var(--ink)}
.it-row{display:flex; gap:8px; align-items:flex-start; padding:8px 10px;
  border:1px solid var(--softline); border-radius:12px; margin-bottom:6px;
  background:var(--panel-solid); font-size:13px}
.it-row .tag{font-size:10px; font-weight:800; text-transform:uppercase; padding:2px 7px;
  border-radius:8px; background:var(--tint-blue); color:#335eb7; white-space:nowrap}
html[data-theme="dark"] .it-row .tag{color:var(--blue)}
.it-row .body{flex:1; min-width:0}
.it-row .x{cursor:pointer; color:var(--danger); font-weight:700; background:none; border:none}
.add-bar{display:flex; gap:6px; flex-wrap:wrap; margin:8px 0}
.pick-q{max-height:300px; overflow-y:auto; border:1px solid var(--softline);
  border-radius:12px; background:var(--panel-solid)}
.pick-q .pq{padding:7px 10px; border-bottom:1px solid var(--softline); font-size:12px; cursor:pointer}
.pick-q .pq:hover{background:var(--panel2)}
.pick-q .pq b{color:var(--blue)}
.hw-table{width:100%; border-collapse:collapse; font-size:13px}
.hw-table th,.hw-table td{text-align:left; padding:6px 8px; border-bottom:1px solid var(--softline)}
.ls-wrap .muted{font-size:12px}
.rowflex{display:flex; gap:8px; align-items:center; flex-wrap:wrap}

/* ===== classes.html ===== */
   creates "btn small secondary"; style.css hardcodes #fff) */
.cl-wrap{max-width:1120px; margin:0 auto; padding:16px 20px 60px}
.cl-cols{display:grid; grid-template-columns:320px 1fr; gap:16px}
@media (max-width:900px){.cl-cols{grid-template-columns:1fr}}
.cl-wrap .panel{padding:16px}
.cl-wrap .panel h3{margin:0 0 10px; font-size:15px}
.cl-wrap .panel h4{margin:16px 0 8px; font-size:13.5px}
.cl-row{padding:9px 11px; border:1px solid var(--softline); border-radius:12px;
  margin-bottom:6px; cursor:pointer; font-size:13px; background:var(--panel-solid)}
.cl-row:hover{border-color:var(--blue)}
.cl-row.sel{border-color:var(--blue); background:var(--tint-blue)}
.cl-wrap .m{color:var(--muted); font-size:11.5px}
.cl-wrap table{width:100%; border-collapse:collapse; font-size:13px}
.cl-wrap th,.cl-wrap td{text-align:left; padding:5px 7px; border-bottom:1px solid var(--softline)}
.cl-wrap input,.cl-wrap select{font:inherit; font-size:13px; padding:5px 7px;
  border:1.5px solid var(--line); border-radius:9px; background:var(--panel-solid); color:var(--ink)}
.code-chip{display:inline-block; font:700 14px/1 ui-monospace,monospace; letter-spacing:2px;
  background:var(--tint-warn); border:1px solid #d9b44a; border-radius:8px; padding:5px 9px}
/* status chips (JS-created; denser than the Nova default chip) */
.cl-wrap .chip{font-size:11px; padding:2px 9px}
.cl-wrap .chip.ok{background:var(--tint-good); border-color:var(--chip-good-bd); color:var(--ok)}
.cl-wrap .chip.part{background:var(--tint-warn); border-color:#d9b44a; color:var(--ink)}
.cl-wrap .chip.none{background:var(--panel2); color:var(--muted)}
.att-btn{border:1px solid var(--softline); background:var(--panel-solid); color:var(--ink);
  border-radius:9px; padding:3px 8px; cursor:pointer; font-size:12px}
.att-btn.on-present{background:var(--tint-good); border-color:var(--chip-good-bd)}
.att-btn.on-late{background:var(--tint-warn); border-color:#d9b44a}
.att-btn.on-absent{background:var(--tint-bad); border-color:var(--chip-bad-bd)}
.cl-wrap .bar-row{display:flex; align-items:center; gap:8px; font-size:12.5px; margin:4px 0}
.cl-wrap .bar-row .lbl{width:210px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.cl-wrap .bar{height:10px; border-radius:5px; background:var(--blue)}
.cl-wrap .bar.low{background:var(--danger)}
.slot-row{display:flex; gap:6px; margin-bottom:6px; align-items:center}
.cl-wrap .x-del{cursor:pointer; color:var(--danger); font-weight:700; padding:0 4px}
.cl-wrap .sec{border-top:1px dashed var(--softline); margin-top:14px; padding-top:4px}

/* ===== students.html ===== */
.st-wrap{max-width:1040px; margin:0 auto; padding:16px 20px 60px}
.st-cols{display:grid; grid-template-columns:340px 1fr; gap:16px}
@media (max-width:860px){.st-cols{grid-template-columns:1fr}}
.st-wrap .panel{padding:16px}
.st-wrap .panel h3{margin:0 0 10px; font-size:15px}
.st-row{padding:9px 11px; border:1px solid var(--softline); border-radius:12px;
  margin-bottom:6px; cursor:pointer; font-size:13px; background:var(--panel-solid)}
.st-row:hover{border-color:var(--blue)}
.st-row.sel{border-color:var(--blue); background:var(--tint-blue)}
.st-wrap .m{color:var(--muted); font-size:11.5px}
.st-wrap table{width:100%; border-collapse:collapse; font-size:13px}
.st-wrap th,.st-wrap td{text-align:left; padding:6px 8px; border-bottom:1px solid var(--softline)}
.st-wrap .bar-row{display:flex; align-items:center; gap:8px; font-size:12.5px; margin:4px 0}
.st-wrap .bar-row .lbl{width:220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.st-wrap .bar{height:10px; border-radius:5px; background:var(--blue)}
.st-wrap .bar.low{background:var(--danger)}
.weak{background:var(--tint-bad); border:1px solid var(--chip-bad-bd); border-radius:12px;
  padding:8px 12px; font-size:12.5px; margin-bottom:10px}

/* ===== progress.html ===== */
.pg-wrap{max-width:780px; margin:0 auto; padding:18px 20px 60px}
.pg-wrap .panel{padding:16px; margin-bottom:14px}
.pg-wrap .panel h3{margin:0 0 10px; font-size:15px}
.pg-wrap .m{color:var(--muted); font-size:12px}
.pg-wrap .bar-row{display:flex; align-items:center; gap:8px; font-size:13px; margin:5px 0}
.pg-wrap .bar-row .lbl{width:240px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.pg-wrap .bar{height:12px; border-radius:6px; background:var(--lime)}
.pg-wrap .bar.mid{background:var(--amber)}
.pg-wrap .bar.low{background:var(--danger)}
.pg-wrap table{width:100%; border-collapse:collapse; font-size:13px}
.pg-wrap th,.pg-wrap td{text-align:left; padding:6px 8px; border-bottom:1px solid var(--softline)}
/* JS-built inline inputs (join code, peer code, exam date) */
.pg-wrap input,.pg-wrap select{font:inherit; padding:4px 7px; border:1.5px solid var(--line);
  border-radius:8px; background:var(--panel-solid); color:var(--ink)}

/* ===== bank.html (admin workbench: full-height two-column) ===== */
body.bank-body{height:100vh; overflow:hidden}
body.bank-body .nova-shell{height:100vh}
body.bank-body .nova-content{flex:1; min-height:0; display:flex; flex-direction:column;
  max-width:none; padding:14px; gap:10px}
.bank-filters{display:flex; flex-wrap:wrap; gap:8px; align-items:center; padding:10px 14px;
  background:var(--panel); border:1.5px solid var(--line); border-radius:14px; flex:none}
.bank-filters select,.bank-filters input{padding:6px 8px; border:1.5px solid var(--line);
  border-radius:9px; font-size:13px; background:var(--panel-solid); color:var(--ink)}
.bank-filters input{width:180px}
.bank-count{font-size:12px; color:var(--muted); margin-left:auto}
.bank-main{flex:1; min-height:0; display:grid; grid-template-columns:380px 1fr;
  background:var(--panel); border:1.5px solid var(--line); border-radius:18px;
  overflow:hidden; box-shadow:var(--shadow)}
.bank-list{overflow-y:auto; border-right:1.5px solid var(--softline); background:var(--panel-solid)}
.bq{padding:8px 12px; border-bottom:1px solid var(--softline); cursor:pointer; font-size:12px}
.bq:hover{background:var(--panel2)}
.bq.sel{background:var(--tint-blue)}
.bq .top{display:flex; gap:6px; align-items:center; font-weight:600}
.bq .prev{color:var(--muted); margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.chip-st{font-size:10px; font-weight:700; padding:1px 7px; border-radius:10px}
.chip-st.published{background:var(--tint-good); color:var(--ok); border:1px solid var(--chip-good-bd)}
.chip-st.review{background:var(--tint-warn); color:#8a6117; border:1px solid #d9b44a}
.bq .rsn{color:#8a6117; font-size:10px}
html[data-theme="dark"] .chip-st.review,html[data-theme="dark"] .bq .rsn,
html[data-theme="dark"] .be-reasons{color:var(--amber)}
.bank-edit{overflow-y:auto; padding:14px 18px}
.bank-edit h3{margin:0 0 4px; font-size:15px}
.be-meta{font-size:12px; color:var(--muted); margin-bottom:10px}
.be-field{margin-bottom:10px}
.be-field label{display:block; font-size:11px; font-weight:750; color:var(--muted);
  margin-bottom:3px; text-transform:uppercase}
.be-field textarea,.be-field input[type=text]{width:100%; box-sizing:border-box;
  padding:7px 9px; border:1.5px solid var(--line); border-radius:10px; font:inherit;
  font-size:13px; background:var(--panel-solid); color:var(--ink)}
.be-choices{display:grid; grid-template-columns:repeat(5,1fr); gap:6px}
.be-choice{display:flex; align-items:center; gap:4px}
.be-choice b{width:14px}
.be-choice input[type=text]{flex:1; min-width:0; padding:5px 7px;
  border:1.5px solid var(--line); border-radius:8px; font-size:12px;
  background:var(--panel-solid); color:var(--ink)}
.be-correct{display:flex; gap:6px}
.be-correct button{width:38px; height:32px; border:1.5px solid var(--line); border-radius:9px;
  background:var(--panel-solid); color:var(--ink); font-weight:700; cursor:pointer}
.be-correct button.on{background:var(--blue); color:#fff; border-color:#3e66c7}
.be-assets img{max-width:100%; border:1px solid var(--softline); border-radius:10px;
  margin-bottom:6px; display:block; background:#fff} /* scans authored on white */
.be-actions{display:flex; gap:8px; align-items:center; position:sticky; bottom:0;
  background:var(--panel); padding:10px 0; border-top:1.5px solid var(--softline)}
.be-msg{font-size:12px; color:var(--muted)}
.be-reasons{font-size:12px; color:#8a6117; margin-bottom:8px}
details.be-passage{margin-bottom:10px; font-size:13px}
.bank-guard{display:grid; place-items:center; flex:1; color:var(--muted)}
@media (max-width:900px){
  .bank-main{grid-template-columns:1fr; grid-template-rows:minmax(0,40vh) 1fr}
  .bank-list{border-right:none; border-bottom:1.5px solid var(--softline)}
}


/* Stacked (vinculum) fractions in question text — MathXText.frac() */
/* /progress — My classes as full-width tiles (ex-card look, one per row) */
.cls-tiles{display:flex; flex-direction:column; gap:12px; margin:10px 0 12px}
.cls-tile h3{font-size:17px}
.cls-tile .cls-line{font-size:13.5px; line-height:1.6}

/* homework rows inside a class tile — one tile-style row per assignment */
.hw-row{display:flex; align-items:center; gap:10px; margin:8px 0; padding:10px 14px;
  border:1.5px solid var(--line); border-radius:12px; background:var(--panel2);
  text-decoration:none; color:inherit; font-size:14px}
a.hw-row:hover{border-color:var(--blue); background:var(--tint-blue)}
.hw-row .hw-ic{flex:none}
.hw-row .hw-t{flex:1; font-weight:650; min-width:0}
.hw-row .hw-go{margin-left:auto; flex:none}
.hw-row.done{opacity:.85; background:var(--tint-good, #eefaf1)}
a.hw-row.done:hover{opacity:1; border-color:var(--blue)}

.mx-frac{display:inline-flex; flex-direction:column; align-items:center;
  vertical-align:middle; line-height:1.05; font-size:.9em; margin:0 2px}
.mx-frac .n{padding:0 3px; border-bottom:1.6px solid currentColor}
.mx-frac .d{padding:1px 3px 0}