/* =========================================================================
   Road Exam — shared stylesheet (V2, RTL / Persian)
   Direction: Active Paper — warm paper, terracotta action, typography-led.
   used_design_system: null  (own style; no brand given)
   craft: typography / color / anti-ai-slop / accessibility-baseline / rtl-and-bidi
   NOTE (RTL craft): no letter-spacing on Arabic runs; logical properties only;
   media controls + charts stay LTR.
   ========================================================================= */

@import url('v3.css?v=20261012');

:root{
  /* Color — "University Blue": cool paper, navy ink, one blue for action */
  --bg:#f5f8fd;
  --surface:#ffffff;
  --fg:#0f1b33;                 /* navy ink */
  --muted:#52607a;
  --border:#d9e2f1;
  --accent:#1d4ed8;             /* blue — primary action + links + focus */
  --accent-hover:color-mix(in oklch, var(--accent) 82%, #000);
  --accent-soft:color-mix(in oklch, var(--accent) 11%, transparent);
  --on-accent:#ffffff;          /* text on top of --accent */
  --fg-soft:color-mix(in oklch, var(--fg) 6%, transparent);
  --success:#15803d;
  --success-soft:color-mix(in oklch, var(--success) 12%, transparent);
  --danger:#b91c1c;
  --danger-soft:color-mix(in oklch, var(--danger) 11%, transparent);
  --warn:#92400e;
  --focus:#1d4ed8;

  /* Shadow system — cool, navy-tinted */
  --shadow-1:0 1px 2px rgba(15,27,51,.05), 0 2px 4px -2px rgba(15,27,51,.07);
  --shadow-2:0 2px 6px -2px rgba(15,27,51,.07), 0 8px 16px -8px rgba(15,27,51,.12);
  --shadow-3:0 4px 12px -4px rgba(15,27,51,.09), 0 16px 32px -16px rgba(15,27,51,.18);
  --shadow-modal:0 8px 32px -8px rgba(15,27,51,.22), 0 0 0 1px rgba(15,27,51,.07);

  /* Typography — Iran Yekan via local TTF files in assets/fonts/ */
  --font-body:'IRANYekan', 'Segoe UI', Tahoma, Arial, sans-serif;
  --font-display:'IRANYekan', 'Segoe UI', Tahoma, Arial, sans-serif;
  --font-mono:ui-monospace, 'Cascadia Mono', Consolas, 'Courier New', monospace;

  --fs-h1:clamp(32px,5vw,48px);
  --fs-h2:clamp(24px,3.2vw,32px);
  --fs-h3:20px;
  --fs-lead:18px;
  --fs-body:16px;
  --fs-sm:14px;
  --fs-meta:13px;

  --lh-tight:1.25;
  --lh-normal:1.6;
  --lh-relaxed:1.75;

  /* Spacing — rhythmic scale */
  --space-1:4px;  --space-2:8px;  --space-3:12px;
  --space-4:16px; --space-5:24px; --space-6:32px;
  --space-7:48px; --space-8:64px; --space-9:96px;

  /* Layout */
  --container:1200px;
  --gutter:24px;
  --header-h:64px;

  /* Radius */
  --radius-sm:8px;
  --radius:10px;
  --radius-lg:16px;
  --radius-full:999px;

  /* Transition */
  --fast:120ms;
  --base:180ms;
  --slow:240ms;
  --ease:cubic-bezier(.2,.6,.2,1);
}

/* Dark mode: follows the system, but the header toggle (data-theme) always wins */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0b1220; --surface:#121c31; --fg:#eaf0fb; --muted:#9fb0cc;
    --border:#24324f; --accent:#7ba4ff; --accent-hover:#a3bfff; --on-accent:#0b1220;
    --accent-soft:color-mix(in oklch, var(--accent) 18%, transparent);
    --fg-soft:color-mix(in oklch, var(--fg) 8%, transparent);
    --success:#4ade80; --danger:#f87171; --warn:#fbbf24; --focus:#a3bfff;
    --shadow-1:0 1px 2px rgba(0,0,0,.35); --shadow-2:0 6px 16px -6px rgba(0,0,0,.5); --shadow-3:0 16px 32px -12px rgba(0,0,0,.6);
    --shadow-modal:0 8px 32px -8px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.06);
  }
}
:root[data-theme="dark"]{
    --bg:#0b1220; --surface:#121c31; --fg:#eaf0fb; --muted:#9fb0cc;
    --border:#24324f; --accent:#7ba4ff; --accent-hover:#a3bfff; --on-accent:#0b1220;
    --accent-soft:color-mix(in oklch, var(--accent) 18%, transparent);
    --fg-soft:color-mix(in oklch, var(--fg) 8%, transparent);
    --success:#4ade80; --danger:#f87171; --warn:#fbbf24; --focus:#a3bfff;
    --shadow-1:0 1px 2px rgba(0,0,0,.35); --shadow-2:0 6px 16px -6px rgba(0,0,0,.5); --shadow-3:0 16px 32px -12px rgba(0,0,0,.6);
    --shadow-modal:0 8px 32px -8px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.06);
}
:root[data-theme="dark"]{color-scheme:dark}
:root[data-theme="light"]{color-scheme:light}

/* =========================================================================
   Font: Iran Yekan — local files (TTF) in assets/fonts/
   Internal family name: 'IRANYekan' (Regular/Bold), 'IRANYekan Medium' (Medium)
   ========================================================================= */
@font-face {
  font-family: 'IRANYekan';
  src: url('fonts/iranyekanweb-regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IRANYekan';
  src: url('fonts/iranyekanweb-medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IRANYekan';
  src: url('fonts/iranyekanweb-bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--fg);
  font-family:var(--font-body);font-size:var(--fs-body);line-height:var(--lh-relaxed);
  text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
p{margin:0;text-wrap:pretty}
h1,h2,h3,h4{margin:0;text-wrap:balance;letter-spacing:normal} /* RTL: no tracking */
:focus-visible{
  outline:2px solid var(--focus);
  outline-offset:2px;
}
:focus:not(:focus-visible){outline:none}
[hidden]{display:none!important}

/* ---------- layout ---------- */
.container{max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--space-7)}
.section-tight{padding-block:var(--space-5)}
.section-sm{padding-block:var(--space-4)}
.stack{display:flex;flex-direction:column}
.stack>*+*{margin-top:var(--space-4)}
.stack-sm>*+*{margin-top:var(--space-2)}
.stack-lg>*+*{margin-top:var(--space-6)}
.row{display:flex;align-items:center;gap:var(--space-4)}
.row-sm{display:flex;align-items:center;gap:var(--space-2)}
.row-between{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);flex-wrap:wrap}
.wrap{flex-wrap:wrap}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-6)}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-6)}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-4)}
.grid-2-1{display:grid;grid-template-columns:2fr 1fr;gap:var(--space-8);align-items:start}
.grid-1-2{display:grid;grid-template-columns:1fr 2fr;gap:var(--space-8);align-items:start}
.grid-2>*,.grid-3>*,.grid-4>*,.grid-2-1>*,.grid-1-2>*{min-width:0}
.mt-sm{margin-top:var(--space-2)}
.mt-md{margin-top:var(--space-4)}
.mt-lg{margin-top:var(--space-6)}
.mt-xl{margin-top:var(--space-7)}
.center{text-align:center}
.hide{display:none!important}
.muted{color:var(--muted)}

/* ---------- type ---------- */
.h1,h1{font-family:var(--font-display);font-size:var(--fs-h1);font-weight:700;line-height:var(--lh-tight)}
.h2,h2{font-family:var(--font-display);font-size:var(--fs-h2);font-weight:700;line-height:1.3}
.h3,h3{font-size:var(--fs-h3);font-weight:600;line-height:1.45}
.lead{font-size:var(--fs-lead);line-height:var(--lh-relaxed);color:var(--muted);max-width:60ch}
.eyebrow{font-size:var(--fs-meta);font-weight:600;color:var(--accent);margin:0 0 var(--space-2);text-transform:uppercase;letter-spacing:.04em}
.meta{font-size:var(--fs-meta);color:var(--muted);line-height:var(--lh-normal)}
.num{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.tiny{font-size:12px;line-height:var(--lh-normal)}

/* ---------- topnav ---------- */
.topnav{
  position:sticky;top:0;z-index:50;
  height:var(--header-h);
  border-bottom:1px solid var(--border);
}
/* the blur lives on a pseudo-element: backdrop-filter on .topnav itself would make it the containing block of the
   fixed mobile menu and clip the menu inside the header bar */
.topnav::before{
  content:'';position:absolute;inset:0;z-index:-1;
  background:color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
}
.topnav-inner{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--space-4);height:100%;
}
.brand{
  display:flex;align-items:center;gap:var(--space-3);
  font-weight:700;font-size:var(--fs-h3);line-height:1;
  color:var(--fg);
}
.brand:hover{color:var(--fg)}
.brand .mark{
  width:36px;height:36px;border-radius:10px;
  background:var(--accent);color:var(--on-accent);
  display:grid;place-items:center;font-size:16px;font-weight:700;
  flex-shrink:0;
}
.topnav nav{
  display:flex;align-items:center;gap:var(--space-1);
}
.topnav nav a{
  display:block;padding:var(--space-2) var(--space-3);
  font-size:var(--fs-sm);font-weight:500;
  color:var(--muted);
  border-radius:var(--radius-sm);
  transition:color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.topnav nav a:hover{color:var(--fg);background:var(--fg-soft)}
.topnav nav a[aria-current="page"]{
  color:var(--fg);background:var(--accent-soft);
  font-weight:600;
}
.nav-actions{display:flex;align-items:center;gap:var(--space-2)}
.topnav nav a.nav-auth{display:none}
.nav-toggle{
  display:none;
  width:44px;height:44px;
  background:transparent;border:1px solid var(--border);
  border-radius:var(--radius-sm);
  place-items:center;
  color:var(--fg);
}
.nav-toggle:hover{background:var(--fg-soft)}

/* Mobile nav panel — slide from right */
@media (max-width:920px){
  .nav-toggle{display:grid}
  .topnav nav{
    position:fixed;inset-block:0;inset-inline-start:0;   /* opens from the right edge in RTL */
    width:min(320px,85vw);
    transform:translateX(100%);
    visibility:hidden;
    transition:transform var(--base) var(--ease), visibility var(--base) var(--ease);
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--surface);
    border-inline-end:1px solid var(--border);
    padding:var(--space-5) var(--space-4) var(--space-6);
    overflow-y:auto;
    z-index:40;
    display:flex; /* always flex, controlled by transform */
  }
  .topnav nav.open{transform:translateX(0);visibility:visible}
  .topnav nav a{
    padding:var(--space-3) var(--space-2);
    border-bottom:1px solid var(--border);
    font-size:var(--fs-body);
  }
  .topnav nav a:last-child{border-bottom:none}
  .nav-actions .btn-ghost{display:none}
  .topnav nav a.nav-auth{
    display:flex;align-items:center;
    color:var(--accent);font-weight:600;
    margin-top:var(--space-2);
    border-top:1px solid var(--border);
  }
  .topnav nav a.nav-auth[hidden]{display:none}
  /* Body scroll lock when menu open */
  body.nav-open{overflow:hidden}
  /* Overlay */
  .nav-overlay{
    position:fixed;inset:0;background:rgba(8,14,28,.5);
    opacity:0;visibility:hidden;z-index:35;
    transition:opacity var(--base) var(--ease), visibility var(--base) var(--ease);
  }
  .nav-overlay.visible{opacity:1;visibility:visible}
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  padding:var(--space-3) var(--space-5);
  border-radius:var(--radius);border:1px solid transparent;
  font-size:var(--fs-sm);font-weight:600;line-height:1.4;
  transition:
    transform var(--fast) var(--ease),
    background var(--fast) var(--ease),
    border-color var(--fast) var(--ease),
    color var(--fast) var(--ease),
    box-shadow var(--fast) var(--ease);
}
.btn:active{transform:translateY(1px) scale(.99)}
.btn:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}

.btn-primary{
  background:var(--accent);color:var(--on-accent);border-color:var(--accent);
  box-shadow:var(--shadow-1);
}
.btn-primary:hover{background:var(--accent-hover);border-color:var(--accent-hover);box-shadow:var(--shadow-2)}
.btn-primary:focus-visible{box-shadow:var(--shadow-1), 0 0 0 3px var(--accent-soft)}

.btn-secondary{
  background:transparent;color:var(--fg);border-color:var(--border);
}
.btn-secondary:hover{background:var(--fg-soft);border-color:var(--fg)}
.btn-secondary:focus-visible{box-shadow:0 0 0 3px var(--fg-soft)}

.btn-ghost{
  background:transparent;color:var(--fg);border-color:transparent;
  padding-inline:var(--space-3);
}
.btn-ghost:hover{color:var(--accent);background:var(--accent-soft)}
.btn-ghost:focus-visible{box-shadow:0 0 0 3px var(--accent-soft)}

.btn-danger{
  background:var(--danger);color:#fff;border-color:var(--danger);
}
.btn-danger:hover{background:color-mix(in oklch, var(--danger) 82%, #000);border-color:inherit}

.btn-sm{padding:var(--space-2) var(--space-4);font-size:13px;border-radius:var(--radius-sm)}
.btn-lg{padding:var(--space-4) var(--space-6);font-size:var(--fs-body)}
.btn-block{width:100%}

.btn-arrow::after{content:'←';transition:transform var(--fast) var(--ease);margin-inline-start:var(--space-1)} /* RTL: forward = left */
.btn-arrow:hover::after{transform:translateX(-4px)}

/* ---------- surfaces ---------- */
.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:var(--space-5);
  box-shadow:var(--shadow-1);
  transition:border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.card:hover{border-color:color-mix(in oklch, var(--fg) 18%, var(--border));box-shadow:var(--shadow-2)}
.card-flat{background:transparent;border:0;padding:0;box-shadow:none}
.card-flat:hover{box-shadow:none}
.card-link{display:block;text-decoration:none}
.card-link:hover .card{border-color:color-mix(in oklch, var(--fg) 18%, var(--border));box-shadow:var(--shadow-2)}
.rule{border:0;border-top:1px solid var(--border);margin:0}

/* Elevated card for modals/panels */
.card-elevated{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:var(--space-5);
  box-shadow:var(--shadow-3);
}

/* ---------- chips / badges ---------- */
.chip{
  display:inline-flex;align-items:center;gap:var(--space-1);
  padding:var(--space-1) var(--space-3);
  border-radius:var(--radius-full);
  font-size:12px;font-weight:500;line-height:1.4;
  white-space:nowrap;
}
.chip-accent{background:var(--accent-soft);color:var(--accent);font-weight:600}
.chip-success{background:var(--success-soft);color:var(--success);font-weight:600}
.chip-danger{background:var(--danger-soft);color:var(--danger);font-weight:600}
.chip-muted{background:var(--fg-soft);color:var(--muted)}
.chip-outline{border:1px solid var(--border);background:transparent;color:var(--muted)}

.tag{
  display:inline-flex;align-items:center;gap:var(--space-1);
  padding:var(--space-1) var(--space-2);
  border:1px solid var(--border);
  border-radius:var(--radius-full);
  font-size:12px;color:var(--muted);
}

/* ---------- image / media placeholders ---------- */
.ph{
  background:
    linear-gradient(135deg, var(--accent-soft), var(--fg-soft)),
    var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  display:grid;place-items:center;
  color:var(--muted);
  font-size:var(--fs-meta);
  aspect-ratio:16/10;
  text-align:center;
  padding:var(--space-4);
}
.ph.wide{aspect-ratio:16/9}
.ph.square{aspect-ratio:1/1}
.ph.tall{aspect-ratio:3/4}
.ph.cover{aspect-ratio:16/9;border-radius:var(--radius)}
.ph.cover.has-img{aspect-ratio:3/2;padding:0;overflow:hidden;border:0}
.ph.cover img{display:block;width:100%;height:100%;object-fit:cover}
.cover-hero{margin-top:var(--space-4);border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--border);aspect-ratio:3/2;max-width:640px;background:var(--fg-soft)}
.cover-hero img{display:block;width:100%;height:100%;object-fit:cover}
.ph.dark{background:#17161a;border-color:#2a2830;color:#9b97a3}

/* ---------- product card ---------- */
.product{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  overflow:hidden;
  display:flex;flex-direction:column;
  box-shadow:var(--shadow-1);
  transition:border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.product:hover{
  border-color:color-mix(in oklch, var(--fg) 18%, var(--border));
  box-shadow:var(--shadow-2);
}
.product .ph{
  border-radius:0;
  border:0;
  border-bottom:1px solid var(--border);
}
.product-body{
  padding:var(--space-4) var(--space-4) var(--space-5);
  display:flex;flex-direction:column;gap:var(--space-3);
  flex:1;
}
.product-body h3{font-size:var(--fs-h3);font-weight:600;line-height:1.4}
.price{display:flex;align-items:baseline;gap:var(--space-2);flex-wrap:wrap}
.price .now{font-weight:700;font-size:var(--fs-h3)}
.price .was{color:var(--muted);text-decoration:line-through;font-size:var(--fs-sm)}
.price .off{font-size:var(--fs-meta);color:var(--success);font-weight:600;background:var(--success-soft);padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm)}

/* ---------- forms ---------- */
.field{display:flex;flex-direction:column;gap:var(--space-1)}
.field label{font-size:var(--fs-sm);font-weight:500;color:var(--muted)}
.input,
select.input,
textarea.input{
  width:100%;
  padding:var(--space-3) var(--space-4);
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:var(--surface);
  color:var(--fg);
  font-size:var(--fs-body);
  line-height:var(--lh-normal);
  transition:border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease), background var(--fast) var(--ease);
}
.input:focus,
select.input:focus,
textarea.input:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft);
}
.input::placeholder{color:var(--muted)}
.hint{font-size:var(--fs-meta);color:var(--muted);margin-top:var(--space-1)}
.err{font-size:var(--fs-meta);color:var(--danger);margin-top:var(--space-1)}
.input[aria-invalid="true"]{border-color:var(--danger)}
.input[aria-invalid="true"]:focus{box-shadow:0 0 0 3px var(--danger-soft)}

/* ---------- modal ---------- */
dialog.modal{
  border:0;padding:0;background:transparent;
  width:min(560px,calc(100vw - var(--space-6)));
  max-width:none;
  margin:auto;
  color:var(--fg);
}
dialog.modal::backdrop{background:rgba(30,28,26,.45)}
.modal-box{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-modal);
  padding:var(--space-6);
  max-height:calc(100vh - var(--space-7));
  max-height:calc(100dvh - var(--space-7));
  overflow-y:auto;
  overscroll-behavior:contain;
}
.modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-4)}
@media (max-width:560px){
  .modal-box{padding:var(--space-5);border-radius:var(--radius)}
}

/* Select styling */
select.input{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236e6a64' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:inline-start var(--space-3);
  background-size:16px;
  padding-inline-start:var(--space-8);
}

/* ---------- table ---------- */
.table-wrap{
  overflow-x:auto;
  max-width:100%;
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  background:var(--surface);
}
table.ds{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
.ds th,.ds td{padding:var(--space-3) var(--space-4);text-align:start;border-bottom:1px solid var(--border);white-space:nowrap}
.ds th{color:var(--muted);font-weight:600;font-size:var(--fs-meta);background:var(--fg-soft)}
.ds tbody tr:last-child td{border-bottom:0}
.ds tbody tr:hover{background:var(--fg-soft)}
.ds .num-col{font-family:var(--font-mono);font-variant-numeric:tabular-nums;text-align:end}

/* ---------- stat ---------- */
.stat .n{font-family:var(--font-display);font-weight:700;font-size:36px;line-height:1.1}
.stat .n.accent{color:var(--accent)}
.stat .l{color:var(--muted);font-size:var(--fs-sm);margin-top:var(--space-1)}

/* ---------- progress ---------- */
.progress{height:8px;border-radius:var(--radius-full);background:var(--fg-soft);overflow:hidden}
.progress-fill{height:100%;background:var(--accent);border-radius:var(--radius-full);transition:width var(--base) var(--ease)}
.progress-fill.success{background:var(--success)}

/* ---------- kpi ---------- */
.kpi{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-4) var(--space-5)}
.kpi .n{font-family:var(--font-display);font-weight:700;font-size:28px;line-height:1.2}
.kpi .l{color:var(--muted);font-size:var(--fs-sm);margin-top:var(--space-1)}

/* =========================================================================
   App shell (panels: student / teacher / admin)
   ========================================================================= */
.app{display:grid;grid-template-columns:260px 1fr;gap:var(--space-6);align-items:start;padding-block:var(--space-6)}
.app>*{min-width:0}
.side{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-3);position:sticky;top:calc(var(--header-h) + var(--space-4))}
.side-nav{display:flex;flex-direction:column;gap:var(--space-1)}
.side-nav a,.side-nav button{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-2) var(--space-3);border-radius:var(--radius-sm);font-size:var(--fs-sm);font-weight:500;color:var(--muted);transition:background var(--fast) var(--ease), color var(--fast) var(--ease)}
.side-nav button{width:100%;background:transparent;border:0;text-align:start;cursor:pointer;font-family:inherit;font-weight:500}
.side-nav a:hover,.side-nav button:hover{background:var(--fg-soft);color:var(--fg)}
.side-nav a[aria-current="page"],.side-nav button[aria-pressed="true"]{background:var(--accent-soft);color:var(--accent);font-weight:600}
.side-title{font-size:var(--fs-meta);color:var(--muted);padding:var(--space-2) var(--space-3) var(--space-1);font-weight:600;text-transform:uppercase;letter-spacing:.04em}
@media (max-width:920px){
  .app{grid-template-columns:minmax(0,1fr)}
  .side{
    position:static;
    padding:var(--space-3) var(--space-3) var(--space-2);
  }
  .side-title{display:none}
  .side-nav{
    flex-direction:row;
    gap:var(--space-2);
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    padding-bottom:var(--space-1);
  }
  .side-nav a,.side-nav button{
    flex:0 0 auto;
    white-space:nowrap;
    padding:var(--space-2) var(--space-3);
  }
}

/* ---------- session / lesson list ---------- */
.lesson{display:flex;align-items:center;gap:14px;padding:14px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface)}
.lesson:hover{border-color:color-mix(in oklch,var(--fg) 22%,var(--border))}
.lesson .idx{width:32px;height:32px;border-radius:8px;display:grid;place-items:center;font-family:var(--font-mono);font-size:13px;background:var(--fg-soft);color:var(--muted);flex:0 0 auto}
.lesson.done .idx{background:var(--success-soft);color:var(--success)}

/* =========================================================================
   Video page
   ========================================================================= */
.player{position:relative;background:#17161a;border-radius:var(--radius-lg);aspect-ratio:16/9;border:1px solid #2a2830;display:grid;place-items:center;color:#8d8996}
.player .center-mark{display:grid;place-items:center;gap:10px;text-align:center}
.player .play{width:64px;height:64px;border-radius:50%;background:#fff;color:#17161a;display:grid;place-items:center;border:0;transition:transform var(--fast) var(--ease), background var(--fast) var(--ease)}
.player .play:hover{transform:scale(1.05);background:#f5f3f0}
.player-controls{direction:ltr;display:flex;align-items:center;gap:var(--space-3);border:1px solid var(--border);border-top:0;border-radius:0 0 var(--radius-lg) var(--radius-lg);padding:var(--space-3) var(--space-4);background:var(--surface)}
.player-controls .scrub{flex:1;height:6px;border-radius:var(--radius-full);background:var(--fg-soft);overflow:hidden}
.player-controls .scrub i{display:block;height:100%;width:0;background:var(--accent);border-radius:var(--radius-full);transition:width var(--fast) linear}
.player-controls button{background:transparent;border:0;color:var(--fg);padding:var(--space-1);border-radius:var(--radius-sm);transition:background var(--fast) var(--ease), color var(--fast) var(--ease)}
.player-controls button:hover{background:var(--fg-soft);color:var(--accent)}
.player-controls .rate{font-family:var(--font-mono);font-size:var(--fs-meta);border:1px solid var(--border);border-radius:var(--radius-sm);padding:var(--space-1) var(--space-2);background:transparent;color:var(--muted)}

/* =========================================================================
   Exam page
   ========================================================================= */
.exam-head{
  position:sticky;top:var(--header-h);z-index:20;
  background:color-mix(in oklch, var(--bg) 94%, transparent);
  backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border);
  padding-block:var(--space-3);
}
.timer{
  font-family:var(--font-mono);font-variant-numeric:tabular-nums;
  font-size:var(--fs-h3);font-weight:700;
  padding:var(--space-2) var(--space-4);
  border:1px solid var(--border);border-radius:var(--radius-sm);
  background:var(--surface);
  box-shadow:var(--shadow-1);
}
.timer.low{color:var(--danger);border-color:var(--danger);background:var(--danger-soft)}
.mode-switch{display:inline-flex;border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden;background:var(--surface)}
.mode-switch button{
  background:transparent;border:0;padding:var(--space-2) var(--space-4);
  font-size:var(--fs-sm);font-weight:500;color:var(--muted);
  transition:background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.mode-switch button[aria-pressed="true"]{background:var(--accent-soft);color:var(--accent);font-weight:600}
.q{border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface);padding:var(--space-5);box-shadow:var(--shadow-1)}
.q .qnum{font-family:var(--font-mono);font-size:var(--fs-meta);color:var(--accent);font-weight:600}
.q h3{font-size:var(--fs-h3);font-weight:600;line-height:1.6;margin-top:var(--space-3)}
.opt{display:flex;align-items:flex-start;gap:var(--space-3);padding:var(--space-3) var(--space-4);border:1px solid var(--border);border-radius:var(--radius);margin-top:var(--space-3);cursor:pointer;background:var(--surface);transition:border-color var(--fast) var(--ease), background var(--fast) var(--ease)}
.opt:hover{border-color:color-mix(in oklch, var(--fg) 18%, var(--border))}
.opt input{margin-top:3px;accent-color:var(--accent);width:18px;height:18px}
.opt.sel{border-color:var(--accent);background:var(--accent-soft)}
.opt .k{font-family:var(--font-mono);font-size:var(--fs-sm);color:var(--muted);flex:0 0 auto;width:24px;text-align:center}
.qnav{display:flex;gap:var(--space-2);flex-wrap:wrap}
.qnav button{
  width:38px;height:38px;border-radius:var(--radius-sm);
  border:1px solid var(--border);background:var(--surface);
  font-family:var(--font-mono);font-size:var(--fs-sm);font-weight:500;
  color:var(--muted);
  transition:border-color var(--fast) var(--ease), background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.qnav button:hover{border-color:var(--accent);color:var(--accent)}
.qnav button.answered{background:var(--fg-soft);color:var(--fg);border-color:var(--border)}
.qnav button.current{border-color:var(--accent);color:var(--accent);font-weight:700;background:var(--accent-soft)}
.exam-bar{
  position:sticky;bottom:0;z-index:10;
  background:color-mix(in oklch, var(--bg) 94%, transparent);
  backdrop-filter:blur(16px);
  border-top:1px solid var(--border);
  padding-block:var(--space-3);
}

/* =========================================================================
   Result / report
   ========================================================================= */
.chart{direction:ltr;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-4);overflow:hidden}
.chart svg{width:100%;height:auto;display:block}
.chart .cap{direction:rtl;color:var(--muted);font-size:var(--fs-meta);margin-top:var(--space-3);text-align:start}
.legend{display:flex;gap:var(--space-4);flex-wrap:wrap;direction:rtl}
.legend span{display:inline-flex;align-items:center;gap:var(--space-1);font-size:var(--fs-meta);color:var(--muted)}
.legend i{width:10px;height:10px;border-radius:var(--radius-sm);display:inline-block}

/* ---------- notice / banner ---------- */
.notice{
  display:flex;gap:var(--space-3);align-items:flex-start;
  border:1px solid var(--border);background:var(--accent-soft);
  border-radius:var(--radius);padding:var(--space-3) var(--space-4);
  font-size:var(--fs-sm);line-height:var(--lh-normal);
}
.notice .dot{width:8px;height:8px;border-radius:50%;background:var(--accent);margin-top:6px;flex:0 0 auto}
.notice-error{background:var(--danger-soft);border-color:var(--danger)}
.notice-error .dot{background:var(--danger)}
.notice-success{background:var(--success-soft);border-color:var(--success)}
.notice-success .dot{background:var(--success)}
.notice-warning{background:color-mix(in oklch, var(--warn) 15%, transparent);border-color:var(--warn)}
.notice-warning .dot{background:var(--warn)}

/* ---------- footer ---------- */
.foot{
  border-top:1px solid var(--border);
  padding-block:var(--space-8);
  margin-top:var(--space-9);
  background:var(--surface);
}
.foot-grid{
  display:grid;
  grid-template-columns:1.8fr 1fr 1fr 1fr;
  gap:var(--space-7);
}
.foot-brand{display:flex;flex-direction:column;gap:var(--space-3)}
.foot .brand{font-size:var(--fs-h2);font-weight:700}
.foot .brand .mark{width:32px;height:32px;border-radius:9px;font-size:14px}
.foot-desc{color:var(--muted);font-size:var(--fs-sm);line-height:var(--lh-relaxed);max-width:34ch}
.foot h4{font-size:var(--fs-sm);font-weight:600;color:var(--fg);margin-bottom:var(--space-3);text-transform:uppercase;letter-spacing:.04em}
.foot a{display:block;color:var(--muted);font-size:var(--fs-sm);padding:var(--space-1) 0;transition:color var(--fast) var(--ease)}
.foot a:hover{color:var(--accent)}
.foot-bottom{
  display:flex;justify-content:space-between;gap:var(--space-4);
  flex-wrap:wrap;margin-top:var(--space-6);
  padding-top:var(--space-5);border-top:1px solid var(--border);
  color:var(--muted);font-size:var(--fs-meta);line-height:var(--lh-normal);
}
.foot-bottom .num{font-family:var(--font-mono)}
@media (max-width:820px){.foot-grid{grid-template-columns:1fr 1fr;gap:var(--space-6)}}
@media (max-width:560px){.foot-grid{grid-template-columns:1fr;gap:var(--space-5)}}

/* Responsive grids */
@media (max-width:920px){
  .grid-2,.grid-3,.grid-4,.grid-2-1,.grid-1-2{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .grid-2{grid-template-columns:1fr}
  .btn-block{width:100%}
}


/* ---------- theme toggle (header) ---------- */
.theme-toggle{display:grid;place-items:center;width:44px;height:44px;background:transparent;border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--fg);cursor:pointer;font-size:18px;line-height:1}
.theme-toggle:hover{background:var(--fg-soft)}
.theme-toggle:focus-visible{outline:3px solid var(--focus);outline-offset:2px}

/* skip link (rendered by header.js on every page) */
.skip-link{position:absolute;inset-inline-start:var(--space-4);top:-48px;z-index:100;background:var(--fg);color:var(--bg);padding:var(--space-2) var(--space-4);border-radius:var(--radius-sm);transition:top var(--fast) var(--ease)}
.skip-link:focus{top:var(--space-2)}