/* ════════════════════════════════════════════════════════════════════════
   SHIRE JAMA LMS · DESIGN SYSTEM
   Derived from the institutional seal — deep forest green, seal gold,
   warm parchment, the rising sun and the open book.
   “Education Without Limits.”
   ════════════════════════════════════════════════════════════════════════ */

/* ── Fonts (vendored — no runtime CDN, works worldwide offline) ────────── */
@font-face { font-family:'Oswald'; src:url('/assets/fonts/oswald-500.woff2') format('woff2'); font-weight:500; font-display:swap; }
@font-face { font-family:'Oswald'; src:url('/assets/fonts/oswald-600.woff2') format('woff2'); font-weight:600; font-display:swap; }
@font-face { font-family:'Oswald'; src:url('/assets/fonts/oswald-700.woff2') format('woff2'); font-weight:700; font-display:swap; }
@font-face { font-family:'Inter'; src:url('/assets/fonts/inter-400.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'Inter'; src:url('/assets/fonts/inter-500.woff2') format('woff2'); font-weight:500; font-display:swap; }
@font-face { font-family:'Inter'; src:url('/assets/fonts/inter-600.woff2') format('woff2'); font-weight:600; font-display:swap; }
@font-face { font-family:'Inter'; src:url('/assets/fonts/inter-700.woff2') format('woff2'); font-weight:700; font-display:swap; }
@font-face { font-family:'JBMono'; src:url('/assets/fonts/jbmono-400.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'JBMono'; src:url('/assets/fonts/jbmono-600.woff2') format('woff2'); font-weight:600; font-display:swap; }

/* ── Tokens ────────────────────────────────────────────────────────────── */
:root {
  /* ink greens */
  --ink-950:#0B1B10; --ink-900:#122A19; --ink-800:#1E3A24; --ink-700:#2A4D31;
  --ink-600:#3C6B45; --ink-500:#4E8256;
  /* seal gold */
  --gold-400:#FFC94D; --gold-500:#F2A712; --gold-600:#C77F06; --gold-700:#9A6205; --gold-800:#7A5104;
  /* parchment */
  --paper:#FBF9F2; --paper-2:#F3EFE2; --paper-3:#EBE5D2;
  --card:#FFFFFF; --line:#E4DCC8; --line-2:#D5CBB0;
  --text:#1C2A20; --muted:#5C6B5E; --faint:#8B988C;
  /* semantics */
  --ok:#2F7D46; --ok-bg:#E7F3E9;
  --warn:#B3540B; --warn-bg:#FBF0E2;
  --danger:#A3241C; --danger-bg:#F9E9E7;
  --info:#2B5C8A; --info-bg:#E8F0F7;
  /* geometry & motion */
  --r-s:8px; --r-m:12px; --r-l:16px;
  --shadow-1:0 1px 2px rgba(18,42,25,.06), 0 2px 8px rgba(18,42,25,.05);
  --shadow-2:0 4px 12px rgba(18,42,25,.10), 0 12px 32px rgba(18,42,25,.08);
  --shadow-pop:0 12px 28px rgba(11,27,16,.22), 0 2px 6px rgba(11,27,16,.18);
  --dur:.22s; --ease:cubic-bezier(.2,.7,.2,1);
  --font-display:'Oswald', 'Arial Narrow', system-ui, sans-serif;
  --font-body:'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:'JBMono', ui-monospace, 'Cascadia Mono', monospace;
  --topbar-h:60px; --rail-w:248px; --rail-w-collapsed:68px;
}
:root[data-theme="dusk"] {
  --paper:#0E1A12; --paper-2:#13231A; --paper-3:#1A2E21;
  --card:#16281D; --line:#28402F; --line-2:#33503B;
  --text:#E9EFE4; --muted:#A5B5A6; --faint:#75887A;
  --ok:#5FBF7C; --ok-bg:#15271B; --warn:#E39A5B; --warn-bg:#2A1F12;
  --danger:#E5766D; --danger-bg:#2E1614; --info:#7AA9D4; --info-bg:#12202E;
  --shadow-1:0 1px 2px rgba(0,0,0,.35); --shadow-2:0 6px 18px rgba(0,0,0,.45);
}

/* ── Base ──────────────────────────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box; }
html{ height:100%; }
body{
  margin:0; min-height:100%;
  font-family:var(--font-body); font-size:15px; line-height:1.55;
  color:var(--text); background:var(--paper);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:600; letter-spacing:.01em; line-height:1.15; margin:0; }
a{ color:var(--gold-800); text-decoration:none; } a:hover{ text-decoration:underline; }
button{ font:inherit; color:inherit; }
img{ max-width:100%; }
::selection{ background:rgba(242,167,18,.35); }
:focus-visible{ outline:2px solid var(--gold-500); outline-offset:2px; border-radius:4px; }
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001s !important; transition-duration:.001s !important; }
}

/* subtle manuscript texture on the content field */
.manuscript{
  background:
    radial-gradient(1200px 500px at 85% -10%, rgba(242,167,18,.055), transparent 60%),
    radial-gradient(900px 420px at -10% 110%, rgba(30,58,36,.05), transparent 60%),
    var(--paper);
}

/* ── Boot splash ───────────────────────────────────────────────────────── */
.boot-splash{ min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  background:var(--ink-900); color:#F5EFDC; }
.boot-mark{ animation:bootspin 1.6s var(--ease) infinite; }
.boot-word{ font-family:var(--font-display); font-weight:600; letter-spacing:.42em; font-size:15px; color:var(--gold-400); }
.boot-sub{ font-size:12.5px; color:#9DB3A0; letter-spacing:.08em; }
@keyframes bootspin{ 0%{transform:rotate(0)} 100%{transform:rotate(360deg)} }

/* ── Motifs ────────────────────────────────────────────────────────────── */
.sunburst{
  background:
    radial-gradient(120% 90% at 50% 118%, rgba(242,167,18,.22), transparent 55%),
    repeating-conic-gradient(from -90deg at 50% 118%,
      rgba(242,167,18,.10) 0deg 4deg, transparent 4deg 11deg),
    radial-gradient(140% 110% at 50% 118%, var(--ink-800), var(--ink-950) 70%);
}
.weave{
  background-image:
    repeating-linear-gradient(45deg,  rgba(251,249,242,.035) 0 2px, transparent 2px 9px),
    repeating-linear-gradient(-45deg, rgba(251,249,242,.035) 0 2px, transparent 2px 9px);
}
.ring-seal{ /* engraved circle around numbers/letters */
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:50%; border:1.5px solid var(--gold-500); position:relative;
}
.ring-seal::after{ content:''; position:absolute; inset:2.5px; border-radius:50%; border:1px solid rgba(242,167,18,.45); }

/* ════════════════ APP SHELL ════════════════ */
.shell{ min-height:100vh; display:flex; flex-direction:column; }
.topbar{
  position:sticky; top:0; z-index:60; height:var(--topbar-h);
  display:flex; align-items:center; gap:14px; padding:0 18px;
  background:linear-gradient(180deg, var(--ink-800), var(--ink-900));
  color:#F2EDDC; border-bottom:3px solid var(--gold-500);
}
.topbar .wordmark{ display:flex; align-items:center; gap:10px; min-width:0; }
.topbar .wordmark img{ width:34px; height:34px; }
.topbar .word-title{ font-family:var(--font-display); font-weight:600; letter-spacing:.14em; font-size:14px; color:#FBF9F2; white-space:nowrap; }
.topbar .word-sub{ font-size:10px; letter-spacing:.22em; color:var(--gold-400); text-transform:uppercase; white-space:nowrap; }
.crumbs{ display:flex; align-items:center; gap:8px; font-size:13px; color:#B9C9BB; margin-left:8px; min-width:0; overflow:hidden; }
.crumbs .crumb{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.crumbs .crumb-sep{ color:var(--gold-600); }
.crumbs a{ color:#D8E2D6; }
.top-spacer{ flex:1; }
.icon-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  height:36px; min-width:36px; padding:0 10px; border-radius:9px; cursor:pointer;
  background:transparent; border:1px solid transparent; color:#CBD8CC;
  transition:background var(--dur) var(--ease), color var(--dur);
}
.icon-btn:hover{ background:rgba(251,249,242,.08); color:#fff; }
.kbd{ font-family:var(--font-mono); font-size:10.5px; padding:2px 5px; border-radius:5px;
  background:rgba(251,249,242,.12); border:1px solid rgba(251,249,242,.18); color:#DFE8DD; }
.userchip{ display:flex; align-items:center; gap:10px; padding:4px 6px 4px 4px; border-radius:99px; cursor:pointer;
  background:rgba(251,249,242,.07); border:1px solid rgba(251,249,242,.1); }
.userchip:hover{ background:rgba(251,249,242,.12); }
.userchip .avatar{ width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--gold-500); color:var(--ink-900); font-weight:700; font-size:13px; font-family:var(--font-display); }
.userchip .uname{ font-size:12.5px; font-weight:600; color:#F2EDDC; line-height:1.1; }
.userchip .urole{ font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-400); }

.shell-body{ flex:1; display:flex; min-height:calc(100vh - var(--topbar-h)); }
.rail{
  width:var(--rail-w); flex-shrink:0; background:var(--ink-900); color:#C4D2C4;
  padding:14px 10px 20px; display:flex; flex-direction:column; gap:4px;
  position:sticky; top:var(--topbar-h); height:calc(100vh - var(--topbar-h)); overflow-y:auto;
  transition:width var(--dur) var(--ease);
}
.rail-label{ font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:#6E8471; padding:12px 12px 6px; }
.rail a{
  display:flex; align-items:center; gap:11px; padding:9px 12px; border-radius:10px;
  color:#C4D2C4; font-size:13.5px; font-weight:500; text-decoration:none;
  border:1px solid transparent; transition:all var(--dur) var(--ease);
}
.rail a:hover{ background:rgba(251,249,242,.06); color:#fff; }
.rail a.active{ background:rgba(242,167,18,.14); color:var(--gold-400); border-color:rgba(242,167,18,.35); }
.rail a .ic{ width:19px; height:19px; flex-shrink:0; }
.rail .rail-count{ margin-left:auto; font-family:var(--font-mono); font-size:10.5px; background:var(--gold-500);
  color:var(--ink-900); border-radius:99px; padding:1px 7px; font-weight:600; }
.rail .rail-count.gray{ background:rgba(251,249,242,.14); color:#AEBFAF; }
.rail-foot{ margin-top:auto; padding:12px; font-size:11px; color:#5F7562; line-height:1.6; }
.rail-foot b{ color:#8FA391; font-weight:600; letter-spacing:.06em; }

.main{ flex:1; min-width:0; padding:26px clamp(18px, 3.4vw, 44px) 60px; }

/* page header */
.page-head{ display:flex; align-items:flex-end; gap:18px; flex-wrap:wrap; margin-bottom:22px; }
.page-head h1{ font-size:clamp(22px, 2.6vw, 30px); font-weight:600; text-transform:uppercase; letter-spacing:.05em; }
.page-head .eyebrow{ font-size:10.5px; letter-spacing:.28em; text-transform:uppercase; color:var(--gold-700); font-weight:600; margin-bottom:5px; display:flex; align-items:center; gap:8px; }
.page-head .eyebrow::before{ content:''; width:22px; height:1.5px; background:var(--gold-500); display:inline-block; }
.page-head .head-sub{ color:var(--muted); font-size:13.5px; margin-top:6px; max-width:640px; }
.head-actions{ margin-left:auto; display:flex; gap:10px; align-items:center; flex-wrap:wrap; }

/* ════════════════ COMPONENTS ════════════════ */
/* buttons */
.btn{
  --btn-bg:var(--ink-800); --btn-fg:#FBF9F2;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:9px 16px; border-radius:10px; border:1px solid transparent;
  background:var(--btn-bg); color:var(--btn-fg);
  font-size:13px; font-weight:600; letter-spacing:.02em; cursor:pointer;
  transition:transform var(--dur) var(--ease), box-shadow var(--dur), filter var(--dur);
  text-decoration:none !important; white-space:nowrap;
}
.btn:hover{ filter:brightness(1.12); box-shadow:var(--shadow-1); }
.btn:active{ transform:translateY(1px); }
.btn:disabled{ opacity:.5; cursor:not-allowed; filter:none; }
.btn.primary{ background:linear-gradient(180deg, var(--gold-400), var(--gold-500)); color:var(--ink-900);
  border-color:var(--gold-600); font-weight:700; }
.btn.primary:hover{ filter:brightness(1.06); }
.btn.gold-ghost{ background:transparent; color:var(--gold-800); border-color:var(--gold-500); }
.btn.ghost{ background:transparent; color:var(--text); border-color:var(--line-2); }
.btn.danger{ background:var(--danger); color:#fff; }
.btn.danger-ghost{ background:transparent; color:var(--danger); border-color:color-mix(in srgb, var(--danger) 45%, transparent); }
.btn.sm{ padding:6px 11px; font-size:12px; border-radius:8px; }
.btn.lg{ padding:12px 22px; font-size:14px; }
.btn svg{ width:15px; height:15px; }

/* cards — the engraved certificate frame */
.card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-l);
  box-shadow:var(--shadow-1); position:relative;
}
.card.frame::before{ content:''; position:absolute; inset:4px; border-radius:12px; pointer-events:none;
  border:1px solid color-mix(in srgb, var(--gold-500) 34%, transparent); }
.card .card-pad{ padding:20px 22px; }
.card h3{ font-size:16px; }
.card-title-row{ display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.card-title-row h3{ font-size:15px; text-transform:uppercase; letter-spacing:.06em; }
.card-title-row .sub{ font-size:12px; color:var(--muted); }

/* stats */
.stat-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); gap:14px; }
.stat{ padding:16px 18px 14px; }
.stat .s-label{ font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); font-weight:600; }
.stat .s-value{ font-family:var(--font-display); font-size:34px; font-weight:600; color:var(--ink-800); line-height:1.1; margin-top:4px; }
:root[data-theme="dusk"] .stat .s-value{ color:var(--gold-400); }
.stat .s-foot{ font-size:11.5px; color:var(--faint); margin-top:2px; }
.stat .s-ico{ position:absolute; top:14px; right:14px; width:30px; height:30px; color:var(--gold-600); opacity:.85; }

/* forms */
.field{ display:flex; flex-direction:column; gap:6px; margin-bottom:14px; }
.field > label{ font-size:11.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.field .req{ color:var(--gold-600); }
.input, .select, textarea.input{
  width:100%; padding:9px 12px; font:inherit; color:var(--text);
  background:var(--card); border:1.5px solid var(--line-2); border-radius:10px;
  transition:border-color var(--dur), box-shadow var(--dur);
}
.input:focus, .select:focus, textarea.input:focus{ border-color:var(--gold-500); box-shadow:0 0 0 3px rgba(242,167,18,.18); outline:none; }
textarea.input{ resize:vertical; min-height:74px; }
.hint{ font-size:11.5px; color:var(--faint); }
.err-line{ font-size:12.5px; color:var(--danger); font-weight:500; }
.form-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:0 16px; }

/* checkbox pill */
.check{ display:flex; gap:10px; align-items:flex-start; cursor:pointer; padding:8px 0; }
.check input{ accent-color:var(--gold-600); width:16px; height:16px; margin-top:2px; }

/* chips / badges */
.chip{ display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:99px;
  font-size:11.5px; font-weight:600; letter-spacing:.03em; white-space:nowrap; }
.chip svg{ width:12px; height:12px; }
.chip.ok{ background:var(--ok-bg); color:var(--ok); }
.chip.warn{ background:var(--warn-bg); color:var(--warn); }
.chip.danger{ background:var(--danger-bg); color:var(--danger); }
.chip.info{ background:var(--info-bg); color:var(--info); }
.chip.neutral{ background:var(--paper-2); color:var(--muted); border:1px solid var(--line); }
.chip.gold{ background:rgba(242,167,18,.14); color:var(--gold-800); border:1px solid rgba(242,167,18,.4); }
:root[data-theme="dusk"] .chip.gold{ color:var(--gold-400); }

/* tables */
.table-wrap{ overflow-x:auto; border:1px solid var(--line); border-radius:var(--r-l); background:var(--card); box-shadow:var(--shadow-1); }
table.tbl{ width:100%; border-collapse:collapse; font-size:13.5px; }
.tbl th{ text-align:left; font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
  padding:11px 14px; border-bottom:1.5px solid var(--line-2); background:var(--paper-2); white-space:nowrap; }
.tbl td{ padding:11px 14px; border-bottom:1px solid var(--line); vertical-align:middle; }
.tbl tr:last-child td{ border-bottom:none; }
.tbl tbody tr{ transition:background var(--dur); }
.tbl tbody tr:hover{ background:color-mix(in srgb, var(--gold-500) 4%, transparent); }
.tbl .mono{ font-family:var(--font-mono); font-size:12px; }
.tbl .row-actions{ display:flex; gap:6px; justify-content:flex-end; }

/* tabs */
.tabs{ display:flex; gap:4px; border-bottom:2px solid var(--line-2); margin-bottom:18px; flex-wrap:wrap; }
.tab{ padding:9px 16px; font-size:13px; font-weight:600; color:var(--muted); cursor:pointer; background:none;
  border:none; border-bottom:2.5px solid transparent; margin-bottom:-2px; letter-spacing:.02em;
  display:inline-flex; gap:7px; align-items:center; transition:color var(--dur), border-color var(--dur); }
.tab:hover{ color:var(--text); }
.tab.active{ color:var(--ink-800); border-bottom-color:var(--gold-500); }
:root[data-theme="dusk"] .tab.active{ color:var(--gold-400); }
.tab .tcount{ font-family:var(--font-mono); font-size:10.5px; background:var(--paper-2); border:1px solid var(--line);
  padding:0 6px; border-radius:99px; color:var(--muted); }

/* modal + theater */
.modal-backdrop{ border:none; padding:0; background:rgba(11,27,16,.55); backdrop-filter:blur(3px); }
.modal-backdrop::backdrop{ background:rgba(11,27,16,.55); backdrop-filter:blur(3px); }
.modal-card{ width:min(640px, calc(100vw - 32px)); max-height:min(86vh, 780px); overflow:auto;
  background:var(--card); border-radius:16px; border:1px solid var(--line-2); box-shadow:var(--shadow-pop); padding:0; }
.modal-card.wide{ width:min(860px, calc(100vw - 32px)); }
.modal-head{ display:flex; align-items:center; gap:12px; padding:16px 20px; border-bottom:1px solid var(--line);
  position:sticky; top:0; background:var(--card); z-index:2; }
.modal-head h3{ font-size:16px; text-transform:uppercase; letter-spacing:.06em; }
.modal-head .x{ margin-left:auto; }
.modal-body{ padding:20px; }
.modal-foot{ display:flex; gap:10px; justify-content:flex-end; padding:14px 20px; border-top:1px solid var(--line);
  position:sticky; bottom:0; background:var(--card); }
.theater-backdrop{ border:none; padding:0; background:rgba(6,14,9,.92); width:100vw; max-width:100vw; height:100vh; max-height:100vh; }
.theater-backdrop::backdrop{ background:rgba(6,14,9,.92); }
.theater-card{ width:100vw; height:100vh; display:flex; flex-direction:column; background:transparent; }
.theater-bar{ display:flex; align-items:center; gap:12px; padding:10px 18px; color:#EDE8D5; background:rgba(11,27,16,.65); }
.theater-bar .t-title{ font-family:var(--font-display); letter-spacing:.08em; text-transform:uppercase; font-size:14px; }
.theater-stage{ flex:1; display:flex; align-items:center; justify-content:center; min-height:0; padding:14px; }
.theater-stage iframe, .theater-stage video{ width:100%; height:100%; max-height:calc(100vh - 120px); border:none; background:#0B1B10; border-radius:8px; }
.theater-stage iframe{ background:#333; }

/* toasts */
.toasts{ position:fixed; bottom:18px; right:18px; display:flex; flex-direction:column; gap:10px; z-index:200; max-width:min(380px, calc(100vw - 36px)); }
.toast{ display:flex; gap:11px; align-items:flex-start; padding:12px 14px; border-radius:12px;
  background:var(--ink-900); color:#F0EBD8; box-shadow:var(--shadow-pop);
  border-left:4px solid var(--gold-500); animation:toast-in .3s var(--ease); font-size:13.5px; }
.toast.ok{ border-left-color:var(--ok); } .toast.err{ border-left-color:var(--danger); }
.toast .t-ico{ width:17px; height:17px; flex-shrink:0; margin-top:1px; }
.toast.err .t-ico{ color:#F1A49D; } .toast.ok .t-ico{ color:#7FD598; }
@keyframes toast-in{ from{ opacity:0; transform:translateY(8px) scale(.98);} to{opacity:1; transform:none;} }

/* skeletons */
.skel{ border-radius:10px; background:linear-gradient(100deg, var(--paper-2) 40%, var(--paper-3) 50%, var(--paper-2) 60%);
  background-size:200% 100%; animation:skel 1.3s infinite linear; min-height:14px; }
@keyframes skel{ to{ background-position:-200% 0; } }

/* empty states */
.empty{ text-align:center; padding:46px 20px; color:var(--muted); }
.empty .e-ico{ width:54px; height:54px; margin:0 auto 12px; color:var(--gold-600); opacity:.7; }
.empty h4{ font-size:15px; text-transform:uppercase; letter-spacing:.08em; color:var(--text); margin-bottom:6px; }
.empty p{ font-size:13px; max-width:380px; margin:0 auto 14px; }

/* progress ring */
.ring{ --pct:0; --size:46px; width:var(--size); height:var(--size); border-radius:50%; position:relative; flex-shrink:0;
  background:conic-gradient(var(--gold-500) calc(var(--pct) * 1%), var(--line) 0); display:grid; place-items:center; }
.ring::before{ content:''; position:absolute; inset:4px; border-radius:50%; background:var(--card); }
.ring .ring-num{ position:relative; font-family:var(--font-mono); font-size:11px; font-weight:600; color:var(--ink-700); }
:root[data-theme="dusk"] .ring .ring-num{ color:var(--gold-400); }
.ring.lg{ --size:64px; } .ring.lg .ring-num{ font-size:13px; }
.progressbar{ height:7px; border-radius:99px; background:var(--line); overflow:hidden; }
.progressbar > i{ display:block; height:100%; border-radius:99px;
  background:linear-gradient(90deg, var(--gold-600), var(--gold-400)); transition:width .5s var(--ease); }

/* ════════════════ GATE (sign-in) ════════════════ */
.gate{ min-height:100vh; display:grid; grid-template-columns:minmax(340px, 46%) 1fr; }
@media (max-width:900px){ .gate{ grid-template-columns:1fr; } .gate-left{ display:none; } }
.gate-left{ position:relative; overflow:hidden; padding:clamp(28px,4vw,56px); color:#F5EFDC;
  display:flex; flex-direction:column; }
.gate-left .gate-brand{ display:flex; align-items:center; gap:14px; }
.gate-left .gate-brand img{ width:56px; height:56px; }
.gate-left .gb-title{ font-family:var(--font-display); font-size:19px; font-weight:600; letter-spacing:.18em; }
.gate-left .gb-sub{ font-size:10.5px; letter-spacing:.3em; text-transform:uppercase; color:var(--gold-400); }
.gate-center{ margin:auto 0; padding:30px 0; position:relative; z-index:2; max-width:520px; }
.gate-motto{ font-family:var(--font-display); font-size:clamp(28px, 3.4vw, 42px); font-weight:600; line-height:1.12;
  text-transform:uppercase; letter-spacing:.03em; }
.gate-motto em{ font-style:normal; color:var(--gold-400); }
.gate-proverb{ margin-top:18px; font-size:14.5px; color:#C6D4C4; max-width:420px; line-height:1.65; }
.gate-proverb b{ color:#EBDFB4; font-weight:600; }
.gate-foot{ margin-top:auto; font-size:11.5px; color:#7E947F; letter-spacing:.05em; z-index:2; }
.gate-right{ display:flex; align-items:center; justify-content:center; padding:34px clamp(20px, 4vw, 60px); }
.gate-panel{ width:min(460px, 100%); }
.gate-panel .back-link{ display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:600;
  color:var(--muted); cursor:pointer; margin-bottom:14px; border:none; background:none; padding:4px 0; }
.gate-panel .back-link:hover{ color:var(--text); }
.gate-panel h1{ font-size:24px; text-transform:uppercase; letter-spacing:.05em; margin-bottom:4px; }
.gate-panel .gate-sub{ color:var(--muted); font-size:13px; margin-bottom:22px; }
.role-cards{ display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; margin-bottom:24px; }
.role-card{ position:relative; padding:16px 12px 14px; text-align:center; border-radius:14px; cursor:pointer;
  background:var(--card); border:1.5px solid var(--line-2); transition:all var(--dur) var(--ease); }
.role-card:hover{ transform:translateY(-2px); box-shadow:var(--shadow-2); border-color:var(--gold-500); }
.role-card.selected{ border-color:var(--gold-500); box-shadow:0 0 0 3px rgba(242,167,18,.2), var(--shadow-1); background:linear-gradient(180deg, rgba(242,167,18,.07), var(--card) 60%); }
.role-card .rc-ring{ width:44px; height:44px; margin:0 auto 9px; font-family:var(--font-display); font-weight:600; font-size:16px; color:var(--gold-700); }
.role-card.selected .rc-ring{ color:var(--gold-600); }
.role-card .rc-name{ font-size:12.5px; font-weight:600; }
.role-card .rc-desc{ font-size:10.5px; color:var(--faint); margin-top:3px; line-height:1.35; }
.gate-note{ margin-top:18px; padding:12px 14px; border-radius:10px; background:var(--paper-2); border:1px dashed var(--line-2);
  font-size:12px; color:var(--muted); line-height:1.55; }

/* ════════════════ COURSE CARDS ════════════════ */
.course-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:18px; }
.course-card{ display:flex; flex-direction:column; gap:0; overflow:hidden; transition:transform var(--dur) var(--ease), box-shadow var(--dur); }
.course-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-2); }
.course-card .cc-band{ height:7px; background:repeating-linear-gradient(-55deg, var(--gold-500) 0 14px, var(--ink-800) 14px 28px); }
.course-card .cc-pad{ padding:18px 20px 16px; display:flex; flex-direction:column; gap:10px; flex:1; }
.course-card h3{ font-size:17px; line-height:1.3; }
.course-card .cc-desc{ font-size:12.5px; color:var(--muted); line-height:1.5; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:2.9em; }
.course-card .cc-meta{ display:flex; gap:7px; flex-wrap:wrap; }
.course-card .cc-foot{ display:flex; align-items:center; gap:12px; margin-top:auto; padding-top:12px; border-top:1px solid var(--line); }
.course-card .cc-teacher{ font-size:11.5px; color:var(--faint); }
.course-card .cc-teacher b{ color:var(--muted); font-weight:600; }

/* ════════════════ CHAPTER TIMELINE (authoring + learning) ════════════════ */
.chapter{ margin-bottom:16px; }
.chapter-head{ display:flex; align-items:center; gap:12px; padding:13px 16px; background:var(--paper-2);
  border:1px solid var(--line); border-radius:12px 12px 0 0; border-bottom:none; flex-wrap:wrap; }
.chapter-head .ch-num{ width:34px; height:34px; font-family:var(--font-display); font-size:15px; color:var(--gold-700);
  background:var(--card); }
.chapter-head .ch-title{ font-weight:600; font-size:14.5px; flex:1; min-width:140px; }
.chapter-head .ch-tools{ display:flex; gap:4px; margin-left:auto; }
.chapter-body{ border:1px solid var(--line); border-radius:0 0 12px 12px; background:var(--card); padding:6px 14px 14px; }
.res-row{ display:flex; align-items:center; gap:12px; padding:11px 8px; border-bottom:1px dashed var(--line); }
.res-row:last-child{ border-bottom:none; }
.res-row .rr-ico{ width:34px; height:34px; border-radius:9px; display:flex; align-items:center; justify-content:center;
  background:var(--paper-2); color:var(--gold-700); flex-shrink:0; }
.res-row.rr-video .rr-ico{ color:var(--ink-600); background:#E8EEE4; }
:root[data-theme="dusk"] .res-row.rr-video .rr-ico{ background:#1D3324; }
.res-row .rr-main{ flex:1; min-width:0; }
.res-row .rr-title{ font-size:13.5px; font-weight:600; }
.res-row .rr-sub{ font-size:11.5px; color:var(--faint); display:flex; gap:8px; flex-wrap:wrap; margin-top:1px; }
.res-row .rr-actions{ display:flex; gap:6px; align-items:center; }
.done-check{ display:inline-flex; align-items:center; gap:8px; cursor:pointer; font-size:12.5px; font-weight:600;
  color:var(--muted); padding:6px 10px; border-radius:8px; border:1.5px dashed var(--line-2); transition:all var(--dur); user-select:none; }
.done-check:hover{ border-color:var(--gold-500); color:var(--text); }
.done-check.on{ color:var(--ok); border:1.5px solid color-mix(in srgb, var(--ok) 50%, transparent); background:var(--ok-bg); border-style:solid; }
.done-check input{ display:none; }
.done-check .dc-ring{ width:16px; height:16px; border-radius:50%; border:1.5px solid currentColor; display:inline-flex;
  align-items:center; justify-content:center; }
.done-check.on .dc-ring::after{ content:'✓'; font-size:10px; }

/* ════════════════ QUIZ BUILDER & RUNNER ════════════════ */
.q-card{ padding:16px 18px; margin-bottom:12px; }
.q-card .q-head{ display:flex; gap:10px; align-items:center; margin-bottom:8px; flex-wrap:wrap; }
.q-type-badge{ font-family:var(--font-mono); font-size:10px; letter-spacing:.12em; padding:3px 8px; border-radius:6px; font-weight:600; }
.q-type-badge.mc{ background:rgba(30,58,36,.1); color:var(--ink-700); }
:root[data-theme="dusk"] .q-type-badge.mc{ background:#1D3324; color:#9FC5A8; }
.q-type-badge.doc{ background:rgba(242,167,18,.15); color:var(--gold-800); }
:root[data-theme="dusk"] .q-type-badge.doc{ color:var(--gold-400); }
.opt-row{ display:flex; align-items:center; gap:10px; padding:8px 10px; border:1px solid var(--line); border-radius:10px; margin-bottom:7px; background:var(--card); }
.opt-row .opt-radio{ width:17px; height:17px; accent-color:var(--gold-600); flex-shrink:0; }
.opt-row.correct{ border-color:color-mix(in srgb, var(--ok) 55%, transparent); background:var(--ok-bg); }

/* quiz runner */
.runner-shell{ max-width:860px; margin:0 auto; position:relative; }
.runner-top{ display:flex; align-items:center; gap:14px; margin-bottom:16px; flex-wrap:wrap; }
.timer-pill{ display:inline-flex; align-items:center; gap:9px; padding:8px 16px; border-radius:99px;
  font-family:var(--font-mono); font-weight:600; font-size:16px; background:var(--ink-900); color:var(--gold-400);
  border:1px solid var(--gold-600); }
.timer-pill.warn{ color:#FFB84D; animation:pulse 1s infinite; }
.timer-pill.crit{ color:#FF7A6E; animation:pulse .6s infinite; }
@keyframes pulse{ 50%{ opacity:.6; } }
.q-nav-dots{ display:flex; gap:6px; flex-wrap:wrap; margin-left:auto; }
.q-dot{ width:26px; height:26px; border-radius:8px; border:1.5px solid var(--line-2); background:var(--card);
  font-family:var(--font-mono); font-size:11px; font-weight:600; color:var(--muted); cursor:pointer; transition:all var(--dur); }
.q-dot:hover{ border-color:var(--gold-500); }
.q-dot.current{ border-color:var(--gold-500); box-shadow:0 0 0 3px rgba(242,167,18,.2); color:var(--text); }
.q-dot.answered{ background:var(--ink-800); border-color:var(--ink-800); color:var(--gold-400); }
.run-q{ padding:20px 22px; margin-bottom:14px; }
.run-q .rq-pos{ font-family:var(--font-display); font-size:12px; letter-spacing:.2em; color:var(--gold-700); text-transform:uppercase; font-weight:600; }
.run-q .rq-prompt{ font-size:16px; line-height:1.55; margin:10px 0 14px; font-weight:500; white-space:pre-wrap; }
.run-q img.q-img{ max-width:min(420px,100%); border-radius:10px; border:1px solid var(--line); margin-bottom:14px; display:block; }
.choice{ display:flex; align-items:center; gap:12px; padding:12px 14px; border:1.5px solid var(--line-2); border-radius:11px;
  margin-bottom:9px; cursor:pointer; transition:all var(--dur) var(--ease); background:var(--card); }
.choice:hover{ border-color:var(--gold-500); }
.choice input{ accent-color:var(--gold-600); width:17px; height:17px; }
.choice.picked{ border-color:var(--gold-500); background:linear-gradient(90deg, rgba(242,167,18,.1), var(--card)); box-shadow:0 0 0 3px rgba(242,167,18,.14); }
.choice .letter{ width:26px; height:26px; border-radius:50%; border:1.5px solid var(--line-2); display:flex; align-items:center;
  justify-content:center; font-family:var(--font-mono); font-size:11.5px; font-weight:600; color:var(--muted); flex-shrink:0; }
.choice.picked .letter{ border-color:var(--gold-600); color:var(--gold-800); background:rgba(242,167,18,.14); }
:root[data-theme="dusk"] .choice.picked .letter{ color:var(--gold-400); }
.attachment-note{ display:flex; align-items:center; gap:11px; padding:12px 14px; border-radius:11px;
  background:var(--paper-2); border:1px solid var(--line-2); margin-bottom:14px; font-size:13px; }
.autosave-note{ font-size:11.5px; color:var(--faint); display:inline-flex; gap:6px; align-items:center; font-family:var(--font-mono); }

/* grading drawer items */
.grade-item{ border:1px solid var(--line); border-radius:12px; padding:14px 16px; margin-bottom:12px; background:var(--card); }
.grade-item .gi-head{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:6px; }
.grade-item .gi-prompt{ font-size:14px; font-weight:500; margin-bottom:10px; white-space:pre-wrap; }
.grade-item .gi-answer{ padding:10px 13px; border-left:3px solid var(--gold-500); background:var(--paper-2);
  border-radius:0 9px 9px 0; font-size:13.5px; white-space:pre-wrap; margin-bottom:10px; }
.grade-item .gi-controls{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.score-input{ width:88px !important; text-align:center; font-family:var(--font-mono) !important; font-weight:600 !important; }
.verdict{ display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700; }
.verdict.ok{ color:var(--ok); } .verdict.no{ color:var(--danger); }

/* upload */
.dropzone{ border:2px dashed var(--line-2); border-radius:12px; padding:22px; text-align:center; color:var(--muted);
  cursor:pointer; transition:all var(--dur); background:var(--card); }
.dropzone:hover, .dropzone.over{ border-color:var(--gold-500); background:rgba(242,167,18,.05); color:var(--text); }
.dropzone svg{ width:30px; height:30px; color:var(--gold-600); margin-bottom:6px; }
.upbar{ height:9px; border-radius:99px; background:var(--line); overflow:hidden; margin-top:10px; }
.upbar > i{ display:block; height:100%; background:linear-gradient(90deg, var(--gold-600), var(--gold-400)); transition:width .2s; }

/* command palette */
.palette-backdrop{ border:none; padding:0; background:rgba(11,27,16,.5); }
.palette-backdrop::backdrop{ background:rgba(11,27,16,.5); backdrop-filter:blur(2px); }
.palette{ width:min(560px, calc(100vw - 30px)); margin:12vh auto 0; background:var(--card); border-radius:14px;
  border:1px solid var(--line-2); box-shadow:var(--shadow-pop); overflow:hidden; }
.palette input{ width:100%; padding:15px 18px; border:none; border-bottom:1px solid var(--line); font-size:15px;
  background:transparent; color:var(--text); outline:none; }
.palette .pal-list{ max-height:320px; overflow-y:auto; padding:6px; }
.pal-item{ display:flex; gap:11px; align-items:center; padding:10px 12px; border-radius:9px; cursor:pointer; font-size:13.5px; }
.pal-item:hover, .pal-item.hl{ background:var(--paper-2); }
.pal-item .pi-ico{ width:17px; height:17px; color:var(--gold-700); flex-shrink:0; }
.pal-item .pi-hint{ margin-left:auto; font-size:10.5px; color:var(--faint); font-family:var(--font-mono); }

/* backup console */
.bk-grid{ display:grid; grid-template-columns:minmax(280px, 380px) 1fr; gap:18px; align-items:start; }
@media (max-width:1000px){ .bk-grid{ grid-template-columns:1fr; } }
.seg{ display:flex; border:1.5px solid var(--line-2); border-radius:10px; overflow:hidden; }
.seg button{ flex:1; padding:8px 6px; border:none; background:var(--card); font-size:12px; font-weight:600;
  color:var(--muted); cursor:pointer; border-right:1px solid var(--line); transition:all var(--dur); }
.seg button:last-child{ border-right:none; }
.seg button.on{ background:var(--ink-800); color:var(--gold-400); }

/* misc */
.mono{ font-family:var(--font-mono); }
.muted{ color:var(--muted); } .faint{ color:var(--faint); }
.spacer{ flex:1; }
.row{ display:flex; align-items:center; gap:10px; } .row.wrap{ flex-wrap:wrap; }
.col{ display:flex; flex-direction:column; gap:10px; }
.mt-0{margin-top:0} .mt-1{margin-top:8px} .mt-2{margin-top:16px} .mt-3{margin-top:24px}
.mb-0{margin-bottom:0} .mb-1{margin-bottom:8px} .mb-2{margin-bottom:16px}
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:760px){ .grid-2{ grid-template-columns:1fr; } }
.list-note{ font-size:12.5px; color:var(--muted); padding:10px 0; }
.copy-pill{ display:inline-flex; align-items:center; gap:7px; font-family:var(--font-mono); font-size:12px;
  background:var(--paper-2); border:1px solid var(--line); padding:3px 9px; border-radius:7px; color:var(--muted); }

/* view transitions (progressive enhancement) */
@media (prefers-reduced-motion: no-preference){
  ::view-transition-old(root){ animation:vt-out .18s var(--ease) both; }
  ::view-transition-new(root){ animation:vt-in .26s var(--ease) both; }
  @keyframes vt-out{ to{ opacity:0; transform:translateY(-6px);} }
  @keyframes vt-in{ from{ opacity:0; transform:translateY(8px);} }
}

/* ════════════════ RESPONSIVE · MOBILE ════════════════
   Under 920px the left rail becomes an off-canvas drawer with a
   scrim, opened by the topbar hamburger and closed by the scrim,
   Escape, or any navigation. Grids collapse, the topbar compacts
   to icon-only controls, and tables scroll horizontally inside
   their wrappers instead of overlapping the viewport. */
.menu-btn{ display:none; }
.rail-scrim{ display:none; }

@media (max-width: 920px){
  /* topbar: keep it to one row of icon controls */
  .menu-btn{ display:inline-flex; }
  .crumbs{ display:none; }
  .topbar{ gap:6px; padding:0 8px; }
  .topbar .word-sub{ display:none; }
  .topbar .word-title{ font-size:12px; letter-spacing:.08em; }
  .topbar .wordmark img{ width:28px; height:28px; }
  .palette-btn{ display:none; }              /* no keyboard on phones */
  .userchip{ padding:3px; }
  .userchip .uname, .userchip .urole{ display:none; } /* avatar only */
  .icon-btn .kbd{ display:none; }

  /* rail → off-canvas drawer */
  .rail{
    position:fixed; left:0; top:var(--topbar-h); bottom:0; z-index:90;
    width:min(78vw, 300px); height:auto;
    transform:translateX(-105%);
    transition:transform .25s var(--ease);
    box-shadow:var(--shadow-pop);
  }
  .rail.open{ transform:translateX(0); }
  .rail-scrim{
    display:block; position:fixed; inset:var(--topbar-h) 0 0 0;
    background:rgba(11,27,16,.5); z-index:80;
    opacity:0; pointer-events:none; transition:opacity .2s;
  }
  .rail-scrim.show{ opacity:1; pointer-events:auto; }
  body.rail-open{ overflow:hidden; }

  .main{ padding:18px 14px 90px; min-width:0; }

  /* grids collapse */
  .stat-grid{ grid-template-columns:repeat(2, 1fr); gap:10px; }
  .course-grid{ grid-template-columns:1fr; }
  .bk-grid{ grid-template-columns:1fr; }
  .grid-2{ grid-template-columns:1fr; }

  /* page headers stack; actions wrap onto their own row */
  .page-head{ align-items:flex-start; }
  .page-head .head-actions{ margin-left:0; width:100%; flex-wrap:wrap; }

  /* tabs scroll horizontally instead of wrapping tall */
  .tabs{ flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch;
    scrollbar-width:none; }
  .tabs::-webkit-scrollbar{ display:none; }
  .tab{ white-space:nowrap; flex-shrink:0; }

  /* denser tables (wrapper scrolls) */
  .tbl th, .tbl td{ padding:8px; font-size:12.5px; }
  .table-wrap{ max-width:100%; }

  /* quiz runner */
  .runner-top{ flex-wrap:wrap; gap:8px; }
  .q-nav-dots{ margin-left:0; width:100%; }

  /* theater + modals fit the viewport */
  .theater-bar{ flex-wrap:wrap; row-gap:6px; }
  .modal-card{ width:calc(100vw - 20px); max-height:92vh; }
  .card-pad{ padding:16px 14px; }
  .chapter-head{ padding:10px 12px; row-gap:8px; }
  .done-check{ padding:5px 8px; font-size:11.5px; }
}

@media (max-width: 560px){
  :root{ --topbar-h:54px; }
  .stat .s-value{ font-size:26px; }
  .stat .s-ico{ width:24px; height:24px; top:10px; right:10px; }
  .main{ padding:14px 10px 90px; }
  .page-head h1{ font-size:20px; }
  .btn.lg{ width:100%; }
  .btn{ padding:9px 12px; font-size:12.5px; }

  /* gate: tighter role cards, full-width sign-in */
  .gate-right{ padding:20px 12px; }
  .role-cards{ gap:7px; }
  .role-card{ padding:12px 6px 10px; }
  .role-card .rc-ring{ width:36px; height:36px; font-size:14px; }
  .role-card .rc-name{ font-size:11.5px; }
  .role-card .rc-desc{ display:none; }
  .gate-motto{ font-size:26px; }

  .timer-pill{ font-size:14px; padding:6px 12px; gap:6px; }
  .ring{ --size:40px; } .ring.lg{ --size:54px; }
  .grade-item{ padding:12px 12px; }
  .opt-row{ padding:7px 8px; }
  .choice{ padding:10px 10px; }
  .modal-foot{ flex-wrap:wrap; }
  .modal-foot .btn{ flex:1; }
}

/* print: result breakdowns */
@media print{
  .topbar, .rail, .head-actions, .btn, .no-print{ display:none !important; }
  .main{ padding:0; } body{ background:#fff; }
}