@import url('https://fonts.googleapis.com/css2?family=Lora:wght@500;600;700&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500;600&display=swap');

/* ===========================================================================
   PaperCraft design system

   The palette is deliberately stationery rather than SaaS: warm paper, navy
   ink, gold leaf. It belongs to a product that prints examination papers, and
   it keeps the admin console, the school panel and the printed sheet feeling
   like one object.

   Everything below is token-driven, so a reskin means editing :root.
   ======================================================================== */

:root{
  /* Surfaces */
  --paper:#FFFDF8; --paper-shade:#F6F1E4; --paper-sunk:#F1ECDC;
  --bg:#EFEDE4; --line:#DED6BE; --line-soft:#EAE3CF;

  /* Ink */
  --ink:#1D2B4F; --ink-soft:#3A3A3A; --ink-mid:#5B6478; --muted:#8A836C;

  /* Accents */
  --gold:#B8912F; --gold-soft:#F3E6C4; --gold-deep:#8C6D1F;
  --red:#AE3B26; --red-soft:#FBE9E5;
  --green:#2F4F3A; --green-soft:#E4EFE6;
  --blue:#2C4A7C; --blue-soft:#E6EDF7;

  /* Elevation — low and warm, never a hard grey drop shadow */
  --shadow-xs:0 1px 2px rgba(29,43,79,.05);
  --shadow-sm:0 1px 3px rgba(29,43,79,.07), 0 1px 2px rgba(29,43,79,.04);
  --shadow-md:0 4px 12px rgba(29,43,79,.08), 0 1px 3px rgba(29,43,79,.05);
  --shadow-lg:0 12px 32px rgba(29,43,79,.12), 0 2px 8px rgba(29,43,79,.06);

  --radius:8px; --radius-sm:5px; --radius-lg:14px;
  --ease:180ms cubic-bezier(.4,0,.2,1);
}

*{ box-sizing:border-box; }
html,body{
  margin:0; padding:0; background:var(--bg); color:var(--ink-soft);
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  font-size:14px; line-height:1.55;
  /*
   * Safety net, not the fix itself: any one element rendered wider than
   * the viewport anywhere in the app -- a fixed-width box, an unbroken
   * long string, a miscomputed transform:scale() -- otherwise stretches
   * html/body along with it and the whole page becomes side-scrollable,
   * which reads to a phone user as "the page expanded" rather than as
   * the one overflowing element it actually is. This clips that at the
   * document edge so a single bad element degrades to being clipped or
   * needing its own inner scrollbar, never to the entire app panning
   * sideways. Deliberately only on the axis nothing in this app is ever
   * meant to use -- everything here scrolls vertically -- so it can
   * never hide a real horizontal scroll area (.table-wrap, .paper-scroll,
   * .ptable-wrap all still scroll internally exactly as they did).
   */
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
a{ color:var(--ink); text-decoration-color:rgba(29,43,79,.25); text-underline-offset:2px; }
a:hover{ text-decoration-color:currentColor; }
h1,h2,h3,h4{ font-family:'Lora',Georgia,serif; color:var(--ink); margin:0 0 .5em; font-weight:600; }
h3{ font-size:15.5px; letter-spacing:-.01em; }
.mono{ font-family:'IBM Plex Mono',ui-monospace,monospace; font-variant-numeric:tabular-nums; }
::selection{ background:var(--gold-soft); color:var(--ink); }

/* Keyboard focus is always visible — never removed, only styled. */
:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; border-radius:3px; }

/* ---- layout ------------------------------------------------------------ */
.shell{ display:flex; min-height:100vh; }

.side{
  width:236px; background:var(--ink); color:#EDE7D6;
  display:flex; flex-direction:column; flex-shrink:0;
  background-image:linear-gradient(180deg, #22315A 0%, #1D2B4F 40%, #16213D 100%);
}
.side .brand{
  padding:20px 18px 16px; font-family:'Lora',serif; font-weight:700; font-size:17px;
  border-bottom:1px solid rgba(255,255,255,.1); display:flex; align-items:center; gap:9px; color:#fff;
}
.side .brand small{
  display:block; font-family:'Inter',sans-serif; font-weight:500; font-size:10.5px;
  color:#C9C2AA; opacity:.85; letter-spacing:.02em;
}
.brand-school-logo{ height:26px; width:26px; object-fit:contain; border-radius:5px; background:#fff; padding:2px; flex-shrink:0; }
.side nav{ display:flex; flex-direction:column; padding:10px 0; gap:1px; overflow-y:auto; }
.side nav a{
  display:flex; align-items:center; gap:11px; padding:9px 18px; color:#BDB6A0;
  font-size:13.5px; font-weight:500; text-decoration:none;
  border-left:3px solid transparent; transition:background var(--ease), color var(--ease);
}
.side nav a:hover{ background:rgba(255,255,255,.06); color:#fff; }
.side nav a.active{
  background:rgba(255,255,255,.09); color:#fff; border-left-color:var(--gold); font-weight:600;
}
/* Groups the sidebar without adding visual weight. */
.side .nav-label{
  padding:14px 18px 5px; font-size:10px; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; color:#7E8AA8;
}

.main{ flex:1; min-width:0; display:flex; flex-direction:column; }
.topbar{
  background:var(--paper); border-bottom:1px solid var(--line); padding:13px 28px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  position:sticky; top:0; z-index:20; box-shadow:var(--shadow-xs);
}
.topbar h1{ font-family:'Lora',serif; font-size:19px; color:var(--ink); margin:0; letter-spacing:-.01em; }
.topbar-account{ display:flex; align-items:center; gap:10px; margin-left:auto; flex-shrink:0; }
.topbar-account-link{ display:flex; align-items:center; gap:8px; text-decoration:none; border-radius:8px;
  padding:4px 8px 4px 4px; transition:background .12s; }
.topbar-account-link:hover{ background:var(--paper-shade); }
.topbar-avatar{ width:32px; height:32px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.topbar-avatar-fallback{ display:flex; align-items:center; justify-content:center; background:var(--ink);
  color:#fff; font-size:12px; font-weight:700; }
.topbar-account-name{ font-size:13px; font-weight:600; color:var(--ink); white-space:nowrap; }
.topbar-signout button{ background:none; border:1px solid var(--line); border-radius:6px; padding:6px 12px;
  color:var(--ink-mid); font-size:12px; font-weight:600; cursor:pointer; white-space:nowrap; }
.topbar-signout button:hover{ background:var(--paper-shade); border-color:var(--ink-mid); color:var(--ink); }
@media (max-width:640px){ .topbar-account-name{ display:none; } }
.content{ padding:24px 28px 56px; flex:1; }
.sub{ color:var(--ink-mid); font-size:13px; margin:-2px 0 18px; max-width:74ch; }

/* ---- cards ------------------------------------------------------------- */
.card{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  padding:17px 19px; margin-bottom:16px; box-shadow:var(--shadow-sm);
}
.card > h3:first-child{ margin-top:0; }
.card.flush{ padding:0; overflow:hidden; }
.card.raised{ box-shadow:var(--shadow-md); }

/* ---- buttons ----------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  padding:8px 15px; border:1px solid var(--line); border-radius:var(--radius-sm);
  background:var(--paper); color:var(--ink); font-family:inherit; font-size:13px; font-weight:600;
  cursor:pointer; text-decoration:none; white-space:nowrap;
  transition:background var(--ease), border-color var(--ease), box-shadow var(--ease), transform var(--ease);
  box-shadow:var(--shadow-xs);
}
.btn:hover{ background:var(--paper-shade); border-color:var(--muted); }
.btn:active{ transform:translateY(1px); box-shadow:none; }
.btn[disabled],.btn:disabled{ opacity:.5; cursor:not-allowed; transform:none; }

.btn.primary{ background:var(--ink); border-color:var(--ink); color:#fff; }
.btn.primary:hover{ background:#26375F; border-color:#26375F; box-shadow:var(--shadow-md); }

.btn.gold{ background:var(--gold); border-color:var(--gold-deep); color:#fff; }
.btn.gold:hover{ background:var(--gold-deep); }

.btn.danger{ background:var(--red); border-color:var(--red); color:#fff; }
.btn.danger:hover{ background:#93301F; }

.btn.ghost{ background:transparent; border-color:transparent; box-shadow:none; }
.btn.ghost:hover{ background:var(--paper-shade); }

.btn.sm{ padding:5px 10px; font-size:12px; }
.btn.block{ width:100%; }

/* ---- forms ------------------------------------------------------------- */
.fld{ display:block; margin-bottom:13px; }
.fld > span{
  display:block; font-size:11.5px; font-weight:600; color:var(--ink-mid);
  margin-bottom:4px; letter-spacing:.02em;
}
.fld-label{
  display:block; font-size:11.5px; font-weight:600; color:var(--ink-mid);
  margin:2px 0 4px; letter-spacing:.02em;
}
.curriculum-tier-empty{ font-size:12px; color:var(--ink-mid); font-style:italic; padding:4px 2px; }
.curriculum-class-field{ max-width:320px; }
.input{
  width:100%; padding:8px 11px; border:1px solid var(--line); border-radius:var(--radius-sm);
  background:var(--paper); color:var(--ink-soft); font-family:inherit; font-size:13.5px;
  transition:border-color var(--ease), box-shadow var(--ease);
}
.input:hover{ border-color:var(--muted); }
.input:focus{
  outline:none; border-color:var(--ink);
  box-shadow:0 0 0 3px rgba(29,43,79,.09);
}
.input::placeholder{ color:#B3AC96; }

/*
 * .pw-field is injected around any input[type=password] at runtime by
 * password-toggle.js -- covers the school signup form, the teacher
 * invitation/accept-invite page, and every password-change form in
 * account settings, all of which share this .input styling already.
 */
.pw-field{ position:relative; }
.pw-field .input{ padding-right:38px; }
.pw-toggle{
  position:absolute; top:50%; right:3px; transform:translateY(-50%);
  width:28px; height:28px; display:flex; align-items:center; justify-content:center;
  border:none; background:none; border-radius:6px; color:var(--ink-mid); cursor:pointer;
}
.pw-toggle:hover{ background:var(--paper-shade); color:var(--ink); }
.pw-toggle:focus-visible{ outline:2px solid var(--ink); outline-offset:1px; }
.pw-toggle svg{ width:16px; height:16px; display:block; }

textarea.input{ resize:vertical; min-height:62px; line-height:1.55; }
select.input{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath fill='%238A836C' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 11px center; padding-right:28px;
}
fieldset{ border:1px solid var(--line-soft); border-radius:var(--radius-sm); padding:10px 13px; margin:12px 0; }
legend{ font-size:11.5px; font-weight:700; color:var(--ink-mid); padding:0 6px; letter-spacing:.02em; }
.row{ display:flex; gap:11px; flex-wrap:wrap; }
.row > .fld{ flex:1; min-width:150px; }
.toolbar{ display:flex; gap:9px; flex-wrap:wrap; align-items:flex-end; }
.chk{ display:inline-flex; align-items:center; gap:6px; font-size:13px; margin-right:14px; cursor:pointer; }
.err{ color:var(--red); font-size:12px; margin:3px 0 0; }

/* ---- tables ------------------------------------------------------------ */
/* Wide tables scroll inside their card instead of stretching the page. The
   wrapper is what scrolls, so the card border stays put. */
.table-wrap{ width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.table-wrap > .table{ min-width:560px; }
.card.flush > .table-wrap > .table{ min-width:620px; }

.table{ width:100%; border-collapse:separate; border-spacing:0; font-size:13px; }
.table thead th{
  text-align:left; padding:9px 12px; font-size:10.5px; font-weight:700; letter-spacing:.07em;
  text-transform:uppercase; color:var(--muted); background:var(--paper-sunk);
  border-bottom:1px solid var(--line); white-space:nowrap;
}
.table thead th:first-child{ border-top-left-radius:var(--radius-sm); }
.table thead th:last-child{ border-top-right-radius:var(--radius-sm); }
.table td{ padding:10px 12px; border-bottom:1px solid var(--line-soft); vertical-align:top; }
.table tbody tr{ transition:background var(--ease); }
.table tbody tr:hover{ background:var(--paper-shade); }
.table tbody tr:last-child td{ border-bottom:none; }
.nowrap{ white-space:nowrap; }
.right{ text-align:right; }
.center{ text-align:center; }

/* ---- badges and pills -------------------------------------------------- */
.badge{
  display:inline-block; padding:2px 8px; border-radius:99px; font-size:10.5px; font-weight:700;
  letter-spacing:.03em; background:var(--paper-sunk); color:var(--ink-mid);
  border:1px solid var(--line-soft); vertical-align:middle;
}
.badge.gold{ background:var(--gold-soft); color:var(--gold-deep); border-color:#E5D3A4; }
.badge.green{ background:var(--green-soft); color:var(--green); border-color:#C9DECE; }
.badge.red{ background:var(--red-soft); color:var(--red); border-color:#F0CFC8; }
.badge.blue{ background:var(--blue-soft); color:var(--blue); border-color:#CBD9EC; }
.badge.bloom{ background:var(--blue-soft); color:var(--blue); border-color:#CBD9EC; }

/* ---- flashes ----------------------------------------------------------- */
.flash{
  padding:10px 14px; border-radius:var(--radius-sm); font-size:13px; margin-bottom:14px;
  border:1px solid var(--line); background:var(--paper); border-left-width:3px;
}
.flash.ok, .alert.ok{ background:var(--green-soft); border-color:#C9DECE; border-left-color:var(--green); color:var(--green); }
.flash.err, .alert.error{ background:var(--red-soft); border-color:#F0CFC8; border-left-color:var(--red); color:var(--red); }
.alert{
  padding:11px 15px; border-radius:var(--radius-sm); font-size:13px; margin-bottom:15px;
  background:var(--gold-soft); border:1px solid #E5D3A4; border-left:3px solid var(--gold); color:#6E5518;
}

/* ---- stats ------------------------------------------------------------- */
.grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:14px; margin-bottom:18px; }
.stat{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  padding:15px 17px; box-shadow:var(--shadow-sm); position:relative; overflow:hidden;
}
/* A hairline of gold at the top edge, the one flourish in the system. */
.stat::before{
  content:''; position:absolute; inset:0 0 auto 0; height:2px;
  background:linear-gradient(90deg, var(--gold) 0%, var(--gold-soft) 100%);
}
.stat .k{ font-size:10.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); }
.stat .v{ font-family:'Lora',serif; font-size:27px; font-weight:600; color:var(--ink); line-height:1.15; margin-top:5px; }
.stat .d{ font-size:11.5px; color:var(--ink-mid); margin-top:3px; }
.meter{ height:5px; background:var(--paper-sunk); border-radius:99px; overflow:hidden; margin-top:9px; }
.meter > span{ display:block; height:100%; background:var(--ink); border-radius:99px; }
.meter > span.warn{ background:var(--gold); }
.meter > span.over{ background:var(--red); }

/* ---- marketplace ------------------------------------------------------- */
.pack-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(268px,1fr)); gap:16px; }
.pack-card{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:0; overflow:hidden; box-shadow:var(--shadow-sm); display:flex; flex-direction:column;
  transition:box-shadow var(--ease), transform var(--ease), border-color var(--ease);
}
.pack-card:hover{ box-shadow:var(--shadow-lg); transform:translateY(-2px); border-color:var(--muted); }
.pack-card .cover{
  height:96px; background:linear-gradient(135deg, #22315A 0%, #1D2B4F 55%, #2C4A7C 100%);
  display:flex; align-items:center; justify-content:center; position:relative;
}
.pack-card .cover .glyph{ font-family:'Lora',serif; font-size:30px; color:rgba(255,255,255,.9); }
.pack-card .cover .ribbon{
  position:absolute; top:10px; right:10px; background:var(--gold); color:#fff;
  font-size:10px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  padding:3px 9px; border-radius:99px; box-shadow:var(--shadow-sm);
}
.pack-card .body{ padding:14px 16px 16px; display:flex; flex-direction:column; flex:1; }
.pack-card h3{ margin:0 0 5px; font-size:15px; line-height:1.3; }
.pack-card .coverage{ font-size:11.5px; color:var(--muted); margin-bottom:8px; }
.pack-card .blurb{ font-size:12.5px; color:var(--ink-mid); margin:0 0 12px; flex:1; }
.pack-card .foot{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  border-top:1px solid var(--line-soft); padding-top:11px; margin-top:auto;
}
.price{ font-family:'Lora',serif; font-size:19px; font-weight:600; color:var(--ink); }
.price.free{ color:var(--green); }
.price .was{ font-size:12px; color:var(--muted); text-decoration:line-through; margin-left:5px; font-family:'Inter',sans-serif; }

/* ---- empty states ------------------------------------------------------ */
.empty{
  text-align:center; padding:44px 22px; color:var(--ink-mid);
  border:1px dashed var(--line); border-radius:var(--radius-lg); background:var(--paper);
}
.empty .glyph{ font-size:32px; opacity:.4; margin-bottom:10px; }
.empty h3{ margin-bottom:5px; }
.empty p{ font-size:13px; margin:0 auto 15px; max-width:46ch; }

/* ---- carried over from the previous stylesheet -------------------------- */
/* Existing views use these, so they keep working after the reskin. */
.h2{ font-family:'Lora',serif; font-size:16px; color:var(--ink); margin:0 0 4px; font-weight:600; }
.grid.cols-2{ grid-template-columns:repeat(2,1fr); }
.grid.cols-3{ grid-template-columns:repeat(3,1fr); }
.grid.cols-4{ grid-template-columns:repeat(4,1fr); }
.btn.small{ padding:5px 10px; font-size:12px; }
.badge.amber{ background:var(--gold-soft); color:#8a5a1f; border-color:#E5D3A4; }
.authcard .logo{
  font-family:'Lora',serif; font-weight:700; font-size:23px; color:var(--ink);
  text-align:center; margin-bottom:2px;
  display:flex; align-items:center; justify-content:center; gap:9px;
}
.authcard .logo-img{ height:32px; width:auto; max-width:120px; object-fit:contain; }
.authcard .tag{ text-align:center; color:var(--muted); font-size:12.5px; margin-bottom:20px; }

/* ---- misc -------------------------------------------------------------- */
.muted{ color:var(--muted); }
.hr{ border:0; border-top:1px solid var(--line-soft); margin:16px 0; }
hr{ border:0; border-top:1px solid var(--line-soft); margin:16px 0; }
.pagination{ display:flex; gap:5px; flex-wrap:wrap; margin-top:15px; font-size:13px; }
.pagination a, .pagination span{
  padding:5px 10px; border:1px solid var(--line); border-radius:var(--radius-sm);
  background:var(--paper); text-decoration:none; color:var(--ink);
}
.pagination .active span, .pagination span[aria-current]{ background:var(--ink); color:#fff; border-color:var(--ink); }
details summary{ cursor:pointer; font-size:12.5px; }
code{
  font-family:'IBM Plex Mono',monospace; font-size:12px;
  background:var(--paper-sunk); padding:1px 5px; border-radius:3px; color:var(--ink);
}

/* ---- auth screens ------------------------------------------------------ */
.authwrap{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:22px;
  background:radial-gradient(circle at 50% 0%, #F7F4EA 0%, var(--bg) 60%); }
.authcard{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:32px 30px; width:100%; max-width:392px; box-shadow:var(--shadow-lg);
}
.authcard h1{ font-size:22px; margin-bottom:4px; }

/* ---- responsive --------------------------------------------------------
   Mobile-first: the sidebar is a slide-in drawer on small screens,
   opened by a hamburger button in the topbar.
   The drawer is server-side HTML — no framework needed.
   ----------------------------------------------------------------------- */

/* Hamburger button — hidden on wide screens */
.nav-toggle{
  display:none; background:none; border:none; cursor:pointer;
  padding:6px; color:var(--ink); margin-left:-4px; flex-shrink:0;
}
.nav-toggle svg{ display:block; }

/* Overlay behind the open drawer */
.nav-overlay{
  display:none; position:fixed; inset:0; background:rgba(0,0,0,.45);
  z-index:90; -webkit-tap-highlight-color:transparent;
}
body.nav-open .nav-overlay{ display:block; }

@media (max-width:1040px) and (min-width:861px){
  .grid.cols-3,.grid.cols-4{ grid-template-columns:repeat(2,1fr); }
}

@media (max-width:860px){
  /* The sidebar becomes a slide-in drawer */
  .side{
    position:fixed; top:0; left:0; bottom:0; z-index:100;
    width:260px; transform:translateX(-100%);
    transition:transform .22s cubic-bezier(.4,0,.2,1);
    overflow-y:auto;
  }
  body.nav-open .side{ transform:translateX(0); }

  .nav-toggle{ display:flex; align-items:center; justify-content:center; }

  /* The main column fills the full viewport width */
  .shell{ flex-direction:column; }
  .main{ min-height:100vh; }

  /* Topbar stays stuck at top */
  .topbar{ padding:10px 14px; gap:10px; }
  .topbar h1{ font-size:16px; }

  .content{ padding:14px 14px 48px; }
  .grid.cols-3,.grid.cols-4{ grid-template-columns:repeat(2,1fr); }
  .grid.cols-2{ grid-template-columns:1fr; }
}

@media (max-width:480px){
  /*
   * 16px is the threshold below which iOS Safari zooms into a focused field,
   * shifting the whole layout on every tap. Only the controls need it, and
   * only on phones — the desktop scale is left alone.
   */
  .input, select.input, textarea.input{ font-size:16px; }

  .content{ padding:12px 12px 44px; }
  .grid.cols-3,.grid.cols-4,.grid.cols-2{ grid-template-columns:1fr; }
  .topbar h1{ font-size:15px; }
  .row{ flex-direction:column; }
  .row .fld{ min-width:0 !important; width:100%; }
  .btn{ font-size:13px; }
  .stat b{ font-size:26px; }
  /* Cards tighter on phones */
  .card{ padding:14px; }
}

@media print{
  .side,.topbar,.no-print{ display:none !important; }
  .content{ padding:0; }
  .card{ border:none; box-shadow:none; padding:0; }
  body{ background:#fff; }
}

/* ---- formula editor ----------------------------------------------------- */

.mx-bar{ display:flex; gap:6px; align-items:center; margin-top:6px; flex-wrap:wrap; }
.mx-bar .mx-fx{ font-style:italic; font-weight:700; letter-spacing:.3px; }
.mx-barlabel{ font-size:11.5px; color:var(--ink-soft); }

.mx-backdrop{
    position:fixed; inset:0; background:rgba(20,25,40,.55); z-index:300;
    display:none; align-items:center; justify-content:center; padding:18px;
}
.mx-backdrop.is-open{ display:flex; }
.mx-panel{
    background:var(--paper); border-radius:var(--radius-lg); width:min(760px,100%);
    max-height:92vh; display:flex; flex-direction:column; box-shadow:var(--shadow-lg); overflow:hidden;
}
.mx-head{ display:flex; align-items:center; gap:12px; padding:12px 16px; border-bottom:1px solid var(--line); }
.mx-modes{ display:flex; gap:12px; margin-left:auto; font-size:12.5px; }
.mx-modes label{ display:flex; gap:5px; align-items:center; }

.mx-tabs{ display:flex; gap:4px; padding:8px 16px 0; flex-wrap:wrap; }
.mx-tab{
    border:1px solid var(--line); background:var(--paper-shade); cursor:pointer;
    padding:4px 11px; border-radius:999px; font-size:12.5px; color:var(--ink-soft);
    font-family:inherit;
}
.mx-tab.is-on{ background:var(--accent, #1D2B4F); color:#fff; border-color:transparent; }

.mx-palette{
    display:grid; grid-template-columns:repeat(auto-fill,minmax(74px,1fr));
    gap:5px; padding:12px 16px; max-height:230px; overflow:auto;
    border-bottom:1px solid var(--line-soft);
}
.mx-key{
    min-height:38px; border:1px solid var(--line); border-radius:var(--radius-sm);
    background:#fff; cursor:pointer; padding:5px 6px; font-size:13px;
    display:flex; align-items:center; justify-content:center; text-align:center;
    font-family:inherit; line-height:1.2;
}
.mx-key:hover{ border-color:var(--accent, #1D2B4F); background:var(--paper-shade); }
.mx-key .katex{ font-size:1.02em; }

/*
 * KaTeX has no explicit size rule anywhere else on the site, so every
 * live-rendered formula -- Build Paper preview, the CBT exam screen,
 * anywhere auto-render.min.js runs -- just inherits whatever size KaTeX
 * itself defaults to. That default is calibrated to look right in
 * isolation, but KaTeX_Main (its own math font) has noticeably taller
 * glyph proportions than the site's regular sans-serif body font at the
 * exact same nominal size, so a formula sits visibly larger than the
 * surrounding question text even though nothing is technically "wrong"
 * with either size number. 0.94em is a starting point to visually match
 * ordinary paragraph text -- nudge it up or down half a step
 * (0.90em-0.98em) if it still reads a little big or small once you see
 * it against your actual question text.
 *
 * Was 0.88em: that value was tuned against all-caps chemical formulas
 * ("CH3CH2CH2CHO"), which read as visually heavier than mixed-case prose
 * even at a technically-correct scale and so wanted a more aggressive
 * reduction. But \frac's numerator and denominator are already rendered
 * at a REDUCED internal size by KaTeX's own TeX-derived sizing rules
 * (a textstyle fraction's parts sit in a smaller script size than the
 * surrounding formula by design, before this rule ever touches them) --
 * so the same 0.88em multiplier that looked right on a plain chemical
 * formula compounded on top of that existing internal reduction and
 * made fraction numerators/denominators read as uncomfortably small.
 * Confirmed live: "1/9" as a boxed answer choice, and "1/3^2 = 1/9" in
 * an explanation, both reported as too small even though the same
 * question's non-fraction text sized correctly. 0.94em plus the
 * .mfrac-specific boost immediately below is a compromise: less
 * reduction overall so fractions stay legible, with the extra size
 * gap for all-caps formulas made up separately rather than by pushing
 * the shared base value as low as it can go.
 */
.katex{ font-size:0.94em; }

/*
 * Fraction numerator/denominator sizing, addressed separately from the
 * shared .katex rule above rather than by raising that one value
 * further -- raising the shared value to compensate for fractions would
 * undo part of the all-caps-formula fix that rule exists for in the
 * first place, since most all-caps chemical formulas on this site don't
 * use \frac at all and would simply get bigger again for no reason.
 * 1.15em here is relative to the already-reduced 0.94em base above (CSS
 * em units cascade multiplicatively), so it specifically restores size
 * to fraction internals without touching plain single-line formulas.
 */
.katex .mfrac{ font-size:1.4em; }

.mx-editrow{ padding:12px 16px 0; }
.mx-latex{ font-family:'Courier New',monospace; font-size:13px; }

.mx-preview-wrap{ padding:10px 16px 14px; }
.mx-preview-label{ font-size:11px; text-transform:uppercase; letter-spacing:.6px; color:var(--ink-soft); margin-bottom:5px; }
.mx-preview{
    min-height:52px; border:1px solid var(--line); border-radius:var(--radius-sm);
    background:#fff; padding:12px 14px; display:flex; align-items:center;
    justify-content:center; overflow-x:auto; font-size:16px;
}
.mx-preview.is-bad{ border-color:#C0563F; background:#FDF5F3; }
.mx-error{ color:#9C3E28; font-size:12.5px; font-family:'Courier New',monospace; text-align:left; }
.mx-empty{ color:var(--ink-soft); font-size:12.5px; }

.mx-foot{ display:flex; align-items:center; gap:8px; padding:11px 16px; border-top:1px solid var(--line); }
.mx-hint{ font-size:11.5px; color:var(--ink-soft); }

@media (max-width:640px){
    .mx-palette{ grid-template-columns:repeat(auto-fill,minmax(62px,1fr)); max-height:180px; }
    .mx-modes{ width:100%; margin-left:0; order:3; }
    .mx-head{ flex-wrap:wrap; }
}

/* ---- MCQ option editor --------------------------------------------------
   Shared by the question form and the AI review screen: reviewing a generated
   question is the same job as editing a written one, so it should look and
   behave identically.
   --------------------------------------------------------------------- */

/* Passage / Case Study authoring editor */
.sub-row{
    border:1px solid var(--line); border-radius:8px; padding:12px; margin-bottom:10px; background:#fafbfc;
}
.cp-row{
    border:1px solid var(--line); border-radius:8px; padding:12px; margin-bottom:10px; background:#fafbfc;
}
.sub-opt-list{ display:flex; flex-direction:column; gap:6px; margin-top:6px; }
.ptable-wrap{ overflow-x:auto; margin-bottom:8px; }
.ptable{ border-collapse:collapse; width:100%; }
.ptable th, .ptable td{ border:1px solid var(--line); padding:4px 6px; vertical-align:top; }
.ptable th{ background:#f5f7fa; }
.ptable th .input, .ptable td .input{ width:100%; min-width:100px; border:none; background:transparent; padding:2px; }
.ptable th{ display:flex; align-items:center; gap:4px; border:1px solid var(--line); }

.match-table{ border-collapse:collapse; width:100%; margin-bottom:4px; }
.match-table th, .match-table td{ border:1px solid var(--line); padding:5px 7px; vertical-align:top; }
.match-table th{ background:#f5f7fa; text-align:left; font-size:12.5px; }
.match-table .input{ width:calc(100% - 30px); display:inline-block; }
.match-idx{ font-weight:600; color:var(--muted); font-size:12.5px; }

.opt-list{ display:flex; flex-direction:column; gap:7px; }
.opt-row{
    display:flex; gap:9px; align-items:center;
    padding:7px 9px; border:1px solid var(--line); border-radius:var(--radius-sm);
    background:var(--paper);
}
.opt-row.is-correct{ border-color:#2E7D4F; background:#F2F9F5; }
.opt-row .pick{ flex:0 0 auto; display:flex; align-items:center; }
.opt-row .pick input{ width:17px; height:17px; cursor:pointer; }
.opt-row .lab{ flex:0 0 auto; font-weight:700; width:16px; color:var(--ink-soft); }
.opt-row .txt{ flex:1; min-width:0; }
.opt-row .tools{ flex:0 0 auto; display:flex; gap:6px; align-items:center; }
.opt-row .anchor{ font-size:11.5px; display:flex; gap:4px; align-items:center; color:var(--ink-soft); white-space:nowrap; }
.opt-row .anchor input{ width:auto; }
.opt-row.anchored .lab:after{ content:'\2693'; margin-left:3px; }
.opt-row .thumb{ height:34px; border:1px solid var(--line); border-radius:4px; background:#fff; }

/* On the review screen the text field is the flexible element. */
.review-opts .opt-row .input{ flex:1; min-width:0; }

@media (max-width:700px){
    .opt-row{ flex-wrap:wrap; }
    .opt-row .txt{ flex:1 1 100%; order:3; }
    .review-opts .opt-row .input{ flex:1 1 100%; order:3; }
}

.flash.warn{
    background:#FDF6EC; border:1px solid #E4C089; color:#7A521B;
}

/*
 * Question-pack coverage breakdown -- what a pack actually contains, by
 * class/subject/chapter, computed from its real questions. Shared between
 * the admin's own pack editor and the school-facing marketplace page a
 * school reads before buying, so this lives in the shared stylesheet
 * rather than being duplicated in each view's own <style> block.
 */
.coverage-breakdown{ display:flex; flex-direction:column; gap:8px; margin-bottom:16px;
    padding:12px 14px; background:var(--paper-sunk); border:1px solid var(--line-soft); border-radius:8px; }
.coverage-axis{ display:flex; align-items:center; flex-wrap:wrap; gap:6px; }
.coverage-axis-label{ font-size:11px; font-weight:700; color:var(--ink-mid); text-transform:uppercase;
    letter-spacing:.04em; width:76px; flex-shrink:0; }
.coverage-chip{ display:inline-flex; align-items:center; gap:5px; font-size:12px; background:#fff;
    border:1px solid var(--line); border-radius:999px; padding:3px 10px; color:var(--ink-soft); }
.coverage-chip b{ color:var(--ink); font-weight:700; }

/*
 * Dashboard stat cards -- shared between the admin and school dashboards, so
 * both present the platform's own numbers with the same visual language
 * rather than the admin side using a much older, plainer .stat treatment.
 */
.db-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:20px; }
.db-stat-card{
    background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-md);
    padding:16px 18px;
}
.db-stat-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
.db-stat-label{ font-size:11.5px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-soft); }
.db-stat-link{ font-size:11.5px; color:var(--ink-soft); text-decoration:none; }
.db-stat-link:hover{ color:var(--ink); text-decoration:underline; }
.db-stat-number{ font-size:32px; font-weight:700; font-family:'Lora',serif; color:var(--ink); line-height:1; margin-bottom:10px; }
.db-gauge{ height:4px; background:var(--line); border-radius:2px; overflow:hidden; margin-bottom:6px; }
.db-gauge-bar{ height:100%; border-radius:2px; transition:width .4s; }
.db-gauge-bar.gauge-ok{ background:#2E7D4F; }
.db-gauge-bar.gauge-amber{ background:#C6A03A; }
.db-gauge-bar.gauge-red{ background:#C0563F; }
.db-stat-cap{ font-size:11px; }

.db-banner{ padding:12px 16px; border-radius:10px; font-size:13px; display:flex; flex-direction:column; gap:5px; }
.db-banner a{ color:inherit; font-weight:600; }
.db-banner-amber{ background:#FBF3DF; border:1px solid #E9CE8E; color:#7A5C15; }
.db-banner-red{ background:#FBE7E2; border:1px solid #E3AC9C; color:#8A3C26; }

@media (max-width:1100px){ .db-stats{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px){ .db-stats{ grid-template-columns:1fr 1fr; } .db-stat-number{ font-size:26px; } }

/*
 * A togglable checkbox styled as a pill -- the shared multi-select pattern
 * used wherever a GET-driven filter form or a curation picker needs "tick
 * several of these" without a full dropdown component (Question Pack
 * picker, bank access grants, and the question bank's own filter bar).
 * Previously duplicated locally in two separate views, in two slightly
 * different versions; consolidated here using the more complete of the
 * two (hover state, a highlighted checked state) so every use gets the
 * better version rather than whichever one a given view happened to have.
 */
.chk-pill{
    display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:500;
    background:#fff; border:1px solid var(--line); border-radius:999px; padding:5px 12px 5px 8px;
    cursor:pointer; user-select:none; transition:border-color .12s, background .12s;
}
.chk-pill:hover{ border-color:var(--ink-mid); }
.chk-pill input{ margin:0; accent-color:var(--ink); }
.chk-pill:has(input:checked){ background:var(--gold-soft); border-color:#E5D3A4; }

/*
 * Collapsible multi-select -- see msel-collapse.js. Wraps an existing
 * checkbox group into a dropdown: a toggle showing a live summary,
 * expanding into the same checkboxes on click.
 */
.msel-collapse{ position:relative; margin-bottom:6px; }
.msel-collapse-toggle{
    display:flex; align-items:center; gap:8px; width:100%; max-width:320px;
    background:#fff; border:1px solid var(--line); border-radius:8px; padding:9px 12px;
    cursor:pointer; font-size:13px; text-align:left; transition:border-color .12s;
}
.msel-collapse-toggle:hover{ border-color:var(--ink-mid); }
.msel-collapse-toggle.open{ border-color:var(--ink); border-radius:8px 8px 0 0; }
.msel-collapse-toggle-label{ font-weight:600; color:var(--ink); }
.msel-collapse-summary{ color:var(--ink-mid); flex:1; }
.msel-collapse-toggle.has-selection .msel-collapse-summary{ color:var(--gold-deep); font-weight:600; }
.msel-collapse-caret{ color:var(--ink-mid); font-size:11px; transition:transform .12s; }
.msel-collapse-toggle.open .msel-collapse-caret{ transform:rotate(180deg); }
.msel-collapse-panel{
    position:absolute; top:100%; left:0; z-index:15; width:100%; min-width:320px; max-width:480px;
    background:#fff; border:1px solid var(--ink); border-top:none; border-radius:0 0 8px 8px;
    padding:12px; box-shadow:var(--shadow-md); max-height:280px; overflow-y:auto;
}
.msel-collapse-panel .pick-row{ display:flex; flex-wrap:wrap; gap:8px; }

@media (max-width:480px){
    /*
     * A hard min-width:320px on the panel is exactly the kind of thing
     * that overflows a narrow phone regardless of what actually contains
     * it -- on anything under ~340px wide (once page padding is
     * accounted for) this either got clipped or forced the whole page to
     * scroll sideways. The panel now tracks its parent's real available
     * width instead of a fixed minimum, and the toggle goes full width
     * too, both for the fix and because a full-width control is simply
     * easier to tap accurately on a phone.
     */
    .msel-collapse-toggle{ max-width:none; }
    .msel-collapse-panel{ min-width:0; max-width:none; }
}

/* ===========================================================================
   PaperCraft — premium panel redesign (sidebar, topbar, dashboards)

   Everything above this line is untouched: dozens of existing admin/school
   views depend on .card, .btn, .table, .stat, .grid, .pack-card etc, and
   none of that is being removed. This block only replaces the shell
   (.side/.side nav/.topbar/.brand) and adds new component classes
   (.nav-group*, .db-hero, .icon) that nothing else currently uses, so
   nothing existing regresses.
   ======================================================================== */

.icon{ flex-shrink:0; display:block; }

/* ---- sidebar ------------------------------------------------------------ */
.side{
  width:250px; color:#EDE7D6; display:flex; flex-direction:column; flex-shrink:0;
  background:#141F3D;
  background-image:
    radial-gradient(120% 90% at 100% 0%, rgba(184,145,47,.14) 0%, transparent 55%),
    linear-gradient(180deg, #1B2A50 0%, #16213D 45%, #101A33 100%);
  position:relative;
}
.side::after{
  /* A hairline gold seam on the sidebar's trailing edge — the same single
     flourish used on .stat, echoed here so the shell reads as the same
     design system as the content it wraps. */
  content:''; position:absolute; top:0; right:0; bottom:0; width:1px;
  background:linear-gradient(180deg, rgba(184,145,47,.5) 0%, rgba(184,145,47,0) 70%);
}

.side .brand{
  padding:20px 18px 18px; font-family:'Lora',serif; font-weight:700; font-size:16.5px;
  border-bottom:1px solid rgba(255,255,255,.08); display:flex; align-items:center; gap:10px; color:#fff;
}
.brand-mark{
  display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px;
  border-radius:8px; flex-shrink:0; font-size:15px; color:#16213D;
  background:linear-gradient(135deg, #E4C670 0%, var(--gold) 100%);
  box-shadow:0 2px 8px rgba(184,145,47,.35);
}
.brand-text{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.side .brand small{
  font-family:'Inter',sans-serif; font-weight:500; font-size:10.5px;
  color:#A9B4D4; opacity:.9; letter-spacing:.02em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.brand-school-logo{ height:28px; width:28px; object-fit:contain; border-radius:7px; background:#fff; padding:2px; flex-shrink:0; }

.side nav{ display:flex; flex-direction:column; padding:12px 10px 18px; gap:2px; overflow-y:auto; flex:1; }
.side nav::-webkit-scrollbar{ width:6px; }
.side nav::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.12); border-radius:99px; }

/* Top-level links (Dashboard, Settings) — not part of any collapsible
   group, so visually distinct: filled when active rather than just a
   left-border tick, since there's no group chrome around them to carry
   that signal. */
.nav-top-link{
  display:flex; align-items:center; gap:10px; padding:9px 12px; margin-bottom:4px;
  border-radius:8px; color:#C7CEE6; font-size:13.5px; font-weight:600; text-decoration:none;
  transition:background .15s ease, color .15s ease;
}
.nav-top-link:hover{ background:rgba(255,255,255,.06); color:#fff; }
.nav-top-link.active{ background:linear-gradient(90deg, rgba(184,145,47,.22), rgba(184,145,47,.08)); color:#fff; }
.nav-settings-link{ margin-top:auto; }

/* Collapsible category groups */
.nav-group{ margin-bottom:2px; }
.nav-group-toggle{
  width:100%; display:flex; align-items:center; gap:10px; padding:9px 12px;
  background:none; border:none; border-radius:8px; cursor:pointer; font-family:inherit;
  color:#9FA9C9; font-size:11.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  transition:background .15s ease, color .15s ease;
}
.nav-group-toggle:hover{ background:rgba(255,255,255,.05); color:#EDE7D6; }
.nav-group.is-open .nav-group-toggle{ color:#EDE7D6; }
.nav-group-label{ flex:1; text-align:left; }
.nav-group-caret{ transition:transform .18s ease; opacity:.7; }
.nav-group.is-open .nav-group-caret{ transform:rotate(180deg); }

.nav-group-items{
  overflow:hidden; max-height:0; transition:max-height .22s cubic-bezier(.4,0,.2,1);
  display:flex; flex-direction:column; gap:1px; padding-left:6px;
}
.nav-group-items a{
  display:flex; align-items:center; gap:10px; padding:8px 12px 8px 16px; margin:0 4px;
  color:#AEB6D2; font-size:13px; font-weight:500; text-decoration:none; border-radius:7px;
  border-left:2px solid transparent; transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.nav-group-items a:hover{ background:rgba(255,255,255,.06); color:#fff; }
.nav-group-items a.active{
  background:rgba(184,145,47,.16); color:#fff; border-left-color:var(--gold); font-weight:600;
}
.nav-group-items a.active .icon{ color:var(--gold); }
.nav-item-badge{
  margin-left:auto; background:#E5A93B; color:#3D2A00; font-size:10.5px; font-weight:800;
  line-height:1; padding:3px 6px; border-radius:99px; flex-shrink:0;
}

/* ---- topbar --------------------------------------------------------------
   Slightly more presence than before: a subtle gradient rather than a flat
   fill, and the account area gets a soft container so it reads as one
   cohesive control rather than two unrelated elements sitting side by
   side. */
.topbar{
  background:linear-gradient(180deg, #FFFFFF 0%, var(--paper) 100%);
  border-bottom:1px solid var(--line); padding:13px 26px;
  display:flex; align-items:center; gap:16px;
  position:sticky; top:0; z-index:20; box-shadow:var(--shadow-xs);
}
.topbar h1{ font-family:'Lora',serif; font-size:19px; color:var(--ink); margin:0; letter-spacing:-.01em; }
.topbar-account{
  display:flex; align-items:center; gap:6px; margin-left:auto; flex-shrink:0;
  background:var(--paper-shade); border:1px solid var(--line-soft); border-radius:99px; padding:4px;
}
.topbar-account-link{ display:flex; align-items:center; gap:8px; text-decoration:none; border-radius:99px;
  padding:3px 10px 3px 3px; transition:background .12s; }
.topbar-account-link:hover{ background:#fff; box-shadow:var(--shadow-xs); }
.topbar-avatar{ width:30px; height:30px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.topbar-avatar-fallback{ display:flex; align-items:center; justify-content:center; background:var(--ink);
  color:#fff; font-size:12px; font-weight:700; }
.topbar-account-name{ font-size:13px; font-weight:600; color:var(--ink); white-space:nowrap; }
.topbar-signout{ margin:0; }
.topbar-signout button{ background:none; border:none; border-radius:99px; padding:7px 13px;
  color:var(--ink-mid); font-size:12px; font-weight:600; cursor:pointer; white-space:nowrap; transition:background .12s, color .12s; }
.topbar-signout button:hover{ background:#fff; color:var(--ink); box-shadow:var(--shadow-xs); }
@media (max-width:640px){ .topbar-account-name{ display:none; } }

/* ---- fullscreen toggle -----------------------------------------------
   One button, shared by the admin/school/teacher topbar above and the
   student topbar further down (both load fullscreen-toggle.js) -- see
   that file for the click/keyboard-Escape behavior. Sits with the
   account cluster rather than the sidebar controls: this is a per-
   session viewing preference, the same category as the account menu,
   not a navigation action like the hamburger toggle. */
.topbar-fullscreen-btn{
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  width:34px; height:34px; background:none; border:1px solid var(--line);
  border-radius:8px; color:var(--ink-mid); cursor:pointer; transition:background .12s, color .12s, border-color .12s;
}
.topbar-fullscreen-btn:hover{ background:var(--paper-shade); border-color:var(--ink-mid); color:var(--ink); }
.topbar-fullscreen-btn svg{ display:block; }

/* ---- premium touch on shared components ---------------------------------
   Small, additive refinements — nothing here removes an existing rule,
   each one only adds a hover/hairline detail on top of the base .card /
   .btn.primary / .db-stat-card treatment already used across ~100 views. */
.card{ transition:box-shadow .18s ease, border-color .18s ease; }
.btn.primary{
  background:linear-gradient(180deg, #26375F 0%, var(--ink) 100%);
  border-color:var(--ink);
}
.btn.primary:hover{ box-shadow:0 6px 16px rgba(29,43,79,.28); }

.db-stat-card{
  transition:box-shadow .18s ease, transform .18s ease, border-color .18s ease;
  position:relative; overflow:hidden;
}
.db-stat-card::before{
  content:''; position:absolute; inset:0 0 auto 0; height:2px;
  background:linear-gradient(90deg, var(--gold) 0%, rgba(184,145,47,0) 100%);
  opacity:0; transition:opacity .18s ease;
}
.db-stat-card:hover{ box-shadow:var(--shadow-md); border-color:var(--muted); transform:translateY(-1px); }
.db-stat-card:hover::before{ opacity:1; }

/* ---- dashboard hero (new: school identity / admin summary strip) -------- */
.db-hero{
  background:linear-gradient(120deg, #1B2A50 0%, #16213D 65%, #12193A 100%);
  border-radius:var(--radius-lg); padding:22px 26px; margin-bottom:20px; color:#fff;
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
  box-shadow:var(--shadow-md); position:relative; overflow:hidden;
}
.db-hero::before{
  content:''; position:absolute; top:-40%; right:-10%; width:280px; height:280px; border-radius:50%;
  background:radial-gradient(circle, rgba(184,145,47,.22) 0%, transparent 70%);
}
.db-hero-title{ font-family:'Lora',serif; font-size:21px; font-weight:600; margin-bottom:4px; position:relative; }
.db-hero-sub{ font-size:12.5px; color:#B7C0DE; position:relative; }
.db-hero-right{ display:flex; align-items:center; gap:10px; position:relative; flex-wrap:wrap; }
.db-hero-right .btn.ghost{ color:#fff; border-color:rgba(255,255,255,.28); border-width:1px; border-style:solid; }
.db-hero-right .btn.ghost:hover{ background:rgba(255,255,255,.1); }
.db-hero-right .btn.primary{ box-shadow:0 4px 14px rgba(0,0,0,.25); }

/* ---- responsive: sidebar drawer, adjusted for the new group markup ------ */
@media (max-width:860px){
  .side{
    position:fixed; top:0; left:0; bottom:0; z-index:100;
    width:270px; transform:translateX(-100%);
    transition:transform .22s cubic-bezier(.4,0,.2,1);
    overflow-y:auto;
  }
  body.nav-open .side{ transform:translateX(0); }
  .side nav{ padding-bottom:28px; }
  .topbar{ padding:10px 14px; gap:10px; }
  .topbar h1{ font-size:16px; }
  .db-hero{ padding:18px; }
  .db-hero-title{ font-size:18px; }
}

@media (max-width:480px){
  .nav-top-link, .nav-group-toggle{ padding:10px 12px; }
  .nav-group-items a{ padding:9px 12px 9px 16px; }
  .db-hero{ flex-direction:column; align-items:flex-start; }
}

/* ===========================================================================
   Discussion forum -- shared component classes used by all three panels
   (admin, school, student). Admin/school render these inside .content
   (layouts.panel's existing container, using --ink/--paper/--gold tokens);
   the student panel's own view files use the .sp-* equivalents defined in
   layouts.student.blade.php, so a couple of these are duplicated in that
   file's own <style> block under the fc- prefix with the sp- palette
   instead -- see that file rather than assuming a single shared class
   works unmodified across the light "stationery" admin theme and the
   white/navy student theme.
   ======================================================================== */

.fc-category-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:14px; }
.fc-category-card{
  display:flex; gap:14px; align-items:flex-start; background:var(--paper); border:1px solid var(--line);
  border-radius:var(--radius-lg); padding:16px 18px; text-decoration:none; color:inherit; position:relative;
  transition:box-shadow var(--ease), border-color var(--ease), transform var(--ease);
}
.fc-category-card:hover{ box-shadow:var(--shadow-md); border-color:var(--muted); transform:translateY(-1px); }
.fc-category-icon{
  width:42px; height:42px; border-radius:10px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, #22315A 0%, #1D2B4F 100%); color:#fff;
}
.fc-category-body{ min-width:0; flex:1; }
.fc-category-name{ font-family:'Lora',serif; font-weight:600; font-size:15px; color:var(--ink); margin-bottom:2px; }
.fc-category-scope{ font-size:11px; color:var(--gold-deep); font-weight:700; text-transform:uppercase; letter-spacing:.04em; margin-bottom:4px; }
.fc-category-desc{ font-size:12.5px; color:var(--ink-mid); margin-bottom:8px; }
.fc-category-count{ font-size:11.5px; color:var(--muted); }

.fc-thread-row{
  display:flex; align-items:flex-start; gap:12px; padding:14px 16px; border:1px solid var(--line);
  border-radius:var(--radius); background:var(--paper); margin-bottom:8px; text-decoration:none; color:inherit;
  transition:box-shadow var(--ease), border-color var(--ease);
}
.fc-thread-row:hover{ box-shadow:var(--shadow-sm); border-color:var(--muted); }
.fc-thread-row.is-pinned{ border-color:#E5D3A4; background:var(--gold-soft); }
.fc-thread-main{ flex:1; min-width:0; }
.fc-thread-title{ font-weight:700; font-size:14px; color:var(--ink); display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.fc-thread-meta{ font-size:11.5px; color:var(--muted); margin-top:4px; }
.fc-thread-stats{ display:flex; flex-direction:column; align-items:flex-end; gap:2px; flex-shrink:0; font-size:11.5px; color:var(--ink-mid); white-space:nowrap; }
.fc-thread-stats b{ font-size:15px; color:var(--ink); font-family:'Lora',serif; }

.fc-post{
  display:flex; gap:12px; padding:16px 18px; border:1px solid var(--line); border-radius:var(--radius);
  background:var(--paper); margin-bottom:12px;
}
.fc-post.is-op{ border-color:#D8C177; background:linear-gradient(180deg, var(--gold-soft) 0%, var(--paper) 60px); }
.fc-post-avatar{ width:38px; height:38px; border-radius:50%; flex-shrink:0; object-fit:cover; }
.fc-post-avatar-fallback{
  width:38px; height:38px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  background:var(--ink); color:#fff; font-size:13px; font-weight:700;
}
.fc-post-body{ flex:1; min-width:0; }
.fc-post-head{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; margin-bottom:6px; }
.fc-post-author{ font-weight:700; font-size:13.5px; color:var(--ink); }
.fc-post-role{
  font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; padding:2px 7px; border-radius:99px;
}
.fc-post-role.role-admin{ background:var(--red-soft); color:var(--red); }
.fc-post-role.role-teacher, .fc-post-role.role-school-admin{ background:var(--blue-soft); color:var(--blue); }
.fc-post-role.role-student{ background:var(--green-soft); color:var(--green); }
.fc-post-date{ font-size:11.5px; color:var(--muted); margin-left:auto; }
.fc-post-content{ font-size:13.5px; line-height:1.65; color:var(--ink-soft); }
.fc-post-content p{ margin:0 0 .8em; }
.fc-post-content p:last-child{ margin-bottom:0; }
.fc-post-content ul, .fc-post-content ol{ margin:0 0 .8em; padding-left:1.4em; }
.fc-post-content blockquote{
  margin:0 0 .8em; padding:6px 0 6px 14px; border-left:3px solid var(--gold);
  color:var(--ink-mid); font-size:12.5px; background:var(--paper-shade); border-radius:0 6px 6px 0;
}
.fc-post-content blockquote b{ color:var(--ink-soft); }
.fc-post-removed{ font-style:italic; color:var(--muted); font-size:13px; }
.fc-post-actions{ display:flex; gap:12px; margin-top:10px; }
.fc-post-actions button, .fc-post-actions a{
  background:none; border:none; padding:0; font-size:11.5px; color:var(--ink-mid); cursor:pointer;
  text-decoration:none; font-weight:600;
}
.fc-post-actions button:hover, .fc-post-actions a:hover{ color:var(--ink); text-decoration:underline; }

.fc-composer textarea{ min-height:110px; }
.fc-composer-toolbar{ display:flex; gap:4px; margin-bottom:6px; }
.fc-composer-toolbar button{
  width:28px; height:28px; border:1px solid var(--line); background:var(--paper); border-radius:6px;
  cursor:pointer; font-size:13px; font-weight:700; color:var(--ink-mid); display:flex; align-items:center; justify-content:center;
}
.fc-composer-toolbar button:hover{ background:var(--paper-shade); color:var(--ink); }
.fc-composer-editable{
  min-height:110px; border:1px solid var(--line); border-radius:var(--radius-sm); padding:10px 12px;
  font-size:13.5px; line-height:1.6; background:var(--paper); overflow-y:auto;
}
.fc-composer-editable:focus{ outline:none; border-color:var(--ink); box-shadow:0 0 0 3px rgba(29,43,79,.09); }

/* Clickable starter-question prompts on an empty category -- styled as
   a quiet suggestion chip, not a real button, since clicking one only
   pre-fills and focuses the composer above rather than submitting
   anything itself. */
.fc-starter-prompt{
  display:block; width:100%; text-align:left; background:var(--paper-shade); border:1px solid var(--line-soft);
  border-radius:var(--radius-sm); padding:9px 13px; font-size:12.5px; color:var(--ink-mid); cursor:pointer;
  font-family:inherit; transition:background var(--ease), border-color var(--ease), color var(--ease);
}
.fc-starter-prompt:hover{ background:#fff; border-color:var(--muted); color:var(--ink); }
.fc-starter-prompt::before{ content:'💭  '; }
.fc-composer-editable:empty::before{ content:attr(data-placeholder); color:#B3AC96; }

@media (max-width:640px){
  .fc-category-grid{ grid-template-columns:1fr; }
  .fc-thread-stats{ display:none; }
}

/* Generic modal shell, same visual treatment as .mx-backdrop/.mx-panel
   (the formula editor's own modal) but under a name that doesn't imply
   "math" -- used by the forum's report dialog, and available for any
   future simple modal rather than each one reinventing this. */
.modal-backdrop{
  position:fixed; inset:0; background:rgba(20,25,40,.55); z-index:300;
  display:none; align-items:center; justify-content:center; padding:18px;
}
.modal-backdrop.is-open{ display:flex; }
.modal-panel{
  background:var(--paper); border-radius:var(--radius-lg); width:min(440px,100%);
  max-height:92vh; display:flex; flex-direction:column; box-shadow:var(--shadow-lg); overflow:hidden;
}
.modal-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 18px; border-bottom:1px solid var(--line); }
.modal-head h3{ margin:0; font-size:15.5px; }
.modal-close{ background:none; border:none; cursor:pointer; font-size:18px; color:var(--ink-mid); line-height:1; padding:2px; }
.modal-body{ padding:16px 18px; overflow-y:auto; }
.modal-foot{ display:flex; gap:8px; justify-content:flex-end; padding:12px 18px; border-top:1px solid var(--line); }