/* ================================================================
   ExamVault — Design tokens
   Identity: "Premium Navy" — a white-dominant canvas with a deep navy
   (#1C2B4A) + classic blue (#3B5998) duotone, a dark hero band that
   frames a bright white product-preview card, a real icon system, and
   a fully mobile-first responsive structure (hamburger nav, scrollable
   tables, fluid type) tested down to small-phone widths.
   ================================================================ */
:root{
  --bg:         #FFFFFF;
  --bg-alt:     #F6F7FA;
  --surface:    #FFFFFF;
  --line:       #E2E5EC;
  --blue:       #3B5998;
  --blue-dark:  #1C2B4A;
  --blue-bright:#4C6FB5;
  --blue-soft:  #EBEFF7;
  --green:      #2E9E4F;
  --green-dark: #1F7A3B;
  --green-soft: #E4F5E8;
  --amber:      #E4A11B;
  --amber-soft: #FCF1DA;
  --danger:     #D8434B;
  --danger-soft:#FBE7E8;
  --text-1:     #12192B;
  --text-2:     #5B6472;
  --text-3:     #8D95A3;

  --font-display: 'Plus Jakarta Sans', -apple-system, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --shadow-1: 0 1px 2px rgba(18,25,43,.06), 0 1px 3px rgba(18,25,43,.05);
  --shadow-2: 0 12px 32px rgba(18,25,43,.14), 0 3px 8px rgba(18,25,43,.06);
  --header-h: 68px;
}

[data-theme="dark"]{
  --bg:      #0E1420;
  --bg-alt:  #131A29;
  --surface: #17202F;
  --line:    #2A3446;
  --text-1:  #EDF0F5;
  --text-2:  #A6ADBB;
  --text-3:  #737C8C;
  --blue:    #6E90D6;
  --blue-bright:#89A6E0;
  --blue-soft: rgba(110,144,214,.16);
  --green-soft: rgba(46,158,79,.16);
  --amber-soft: rgba(228,161,27,.16);
  --danger-soft: rgba(216,67,75,.16);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--text-1);
  font-family:var(--font-body);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:800; margin:0 0 .5em; letter-spacing:-.02em; }
p{ margin:0 0 1em; color:var(--text-2); }
.mono{ font-family:var(--font-mono); }
* { min-width:0; } /* prevents flex/grid children from forcing horizontal overflow */

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}

:focus-visible{ outline:2px solid var(--blue); outline-offset:2px; border-radius:4px; }

.container{ max-width:1180px; margin:0 auto; padding:0 24px; }
.container-narrow{ max-width:860px; margin:0 auto; padding:0 24px; }
@media(max-width:600px){ .container, .container-narrow{ padding:0 18px; } }

/* ---------------- Icons ---------------- */
.icon{ flex-shrink:0; }
.icon-circle{
  width:44px; height:44px; border-radius:12px; background:var(--blue-soft); color:var(--blue-dark);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.icon-circle.green{ background:var(--green-soft); color:var(--green-dark); }
.icon-circle.amber{ background:var(--amber-soft); color:#8A6410; }

/* ---------------- Buttons ---------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:13px 24px; border-radius:var(--radius-sm); border:1.5px solid transparent;
  font-family:var(--font-body); font-weight:700; font-size:15px; cursor:pointer;
  transition:background .15s ease, box-shadow .15s ease, border-color .15s ease, color .15s ease, transform .1s ease;
  -webkit-tap-highlight-color:transparent;
}
.btn:active{ transform:scale(.98); }
.btn-primary{ background:var(--blue-dark); color:#fff; box-shadow:var(--shadow-1); }
.btn-primary:hover{ background:var(--blue); box-shadow:0 6px 18px rgba(28,43,74,.28); }
.btn-ghost{ background:var(--surface); color:var(--text-1); border-color:var(--line); }
.btn-ghost:hover{ border-color:var(--blue); color:var(--blue); }
.btn-amber{ background:var(--green-dark); color:#fff; }
.btn-amber:hover{ background:var(--green); }
.btn-block{ width:100%; }
.btn-sm{ padding:9px 16px; font-size:13px; border-radius:8px; }
.btn-danger{ background:var(--danger); color:#fff; }

/* ---------------- Nav (mobile-first: hamburger below 900px) ---------------- */
.nav{
  position:sticky; top:0; z-index:100;
  background:color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
  height:var(--header-h);
}
.nav-inner{ display:flex; align-items:center; justify-content:space-between; padding:0 24px; height:100%; max-width:1180px; margin:0 auto; }
@media(max-width:600px){ .nav-inner{ padding:0 16px; } }
.brand{ display:flex; align-items:center; gap:11px; font-family:var(--font-display); font-weight:800; font-size:19px; color:var(--blue-dark); }
.nav-links{ display:flex; align-items:center; gap:26px; font-size:14.5px; font-weight:600; }
.nav-links a{ color:var(--text-2); white-space:nowrap; }
.nav-links a:hover{ color:var(--blue-dark); }
.nav-actions{ display:flex; align-items:center; gap:10px; }
.pill-toggle{
  display:flex; align-items:center; gap:6px; border:1px solid var(--line);
  border-radius:999px; padding:7px 14px; font-size:13px; cursor:pointer; background:var(--surface);
  color:var(--text-2);
}
.pill-toggle:hover{ border-color:var(--blue); color:var(--blue); }

.menu-toggle{
  display:none; align-items:center; justify-content:center; width:38px; height:38px;
  border-radius:8px; border:1px solid var(--line); background:var(--surface); cursor:pointer; color:var(--text-1);
}

@media(max-width:900px){
  .nav-links-desktop{ display:none; }
  .menu-toggle{ display:inline-flex; }
  .mobile-menu{
    display:none; position:fixed; top:var(--header-h); left:0; right:0; bottom:0; z-index:99;
    background:var(--bg); overflow-y:auto; padding:20px;
  }
  .mobile-menu.open{ display:block; }
  .mobile-menu a{
    display:flex; align-items:center; gap:10px; padding:15px 6px; font-size:16px; font-weight:600;
    color:var(--text-1); border-bottom:1px solid var(--line);
  }
  .mobile-menu .mobile-menu-actions{ margin-top:20px; display:flex; flex-direction:column; gap:10px; }
  body.menu-open{ overflow:hidden; }
}
@media(min-width:901px){ .mobile-menu{ display:none !important; } }

/* ---------------- Hero: dark navy band framing a white preview card ---------------- */
.hero{
  padding:56px 0 88px;
  background:linear-gradient(150deg, var(--blue-dark) 0%, #263A63 55%, var(--blue) 130%);
  color:#fff; position:relative; overflow:hidden;
}
.hero::after{
  content:''; position:absolute; inset:0; opacity:.5; pointer-events:none;
  background:radial-gradient(circle at 85% 15%, rgba(255,255,255,.10), transparent 45%);
}
.hero .container{ position:relative; z-index:1; }
.hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:52px; align-items:center; }
@media(max-width:980px){ .hero-grid{ grid-template-columns:1fr; gap:44px; } }
.hero-eyebrow{
  display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:700;
  color:#fff; background:rgba(255,255,255,.14); padding:7px 16px; border-radius:999px; margin-bottom:22px;
  border:1px solid rgba(255,255,255,.18);
}
.hero h1{ font-size:clamp(30px, 5.4vw, 50px); line-height:1.15; font-weight:800; color:#fff; }
.hero h1 em{ font-style:normal; color:#9DC0FF; }
.hero-sub{ font-size:clamp(15px, 2vw, 17.5px); max-width:520px; margin-top:16px; line-height:1.65; color:rgba(255,255,255,.78); }
.hero-actions{ display:flex; gap:14px; margin-top:30px; flex-wrap:wrap; }
.hero .btn-primary{ background:#fff; color:var(--blue-dark); }
.hero .btn-primary:hover{ background:#EAF0FF; }
.hero .btn-ghost{ background:rgba(255,255,255,.08); color:#fff; border-color:rgba(255,255,255,.3); }
.hero .btn-ghost:hover{ border-color:#fff; background:rgba(255,255,255,.16); }
.hero-stats{ display:flex; gap:28px; margin-top:40px; flex-wrap:wrap; }
.hero-stat{ display:flex; align-items:center; gap:10px; }
.hero-stat b{ display:block; font-family:var(--font-display); font-size:21px; font-weight:800; color:#fff; }
.hero-stat span{ font-size:12px; color:rgba(255,255,255,.65); }

.preview-card{
  background:var(--surface); border-radius:var(--radius-lg); box-shadow:0 24px 60px rgba(0,0,0,.35);
  padding:26px; position:relative; max-width:420px; margin:0 auto;
}
.preview-card-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; flex-wrap:wrap; gap:8px; }
.preview-card-top .pc-tag{ font-size:11.5px; font-weight:700; color:var(--blue-dark); background:var(--blue-soft); padding:4px 10px; border-radius:999px; }
.preview-card-top .pc-timer{ font-family:var(--font-mono); font-size:13px; color:var(--text-2); display:flex; align-items:center; gap:6px; }
.preview-progress{ height:6px; background:var(--bg-alt); border-radius:999px; overflow:hidden; margin-bottom:22px; }
.preview-progress-fill{ height:100%; width:62%; background:var(--blue); border-radius:999px; }
.preview-q{ font-size:15.5px; font-weight:700; margin-bottom:16px; line-height:1.5; color:var(--text-1); }
.preview-opt{ display:flex; align-items:center; gap:10px; padding:11px 14px; border:1.5px solid var(--line); border-radius:10px; margin-bottom:9px; font-size:13.5px; color:var(--text-2); }
.preview-opt.correct{ border-color:var(--green); background:var(--green-soft); color:var(--green-dark); font-weight:700; }
.preview-opt-letter{ width:22px; height:22px; border-radius:6px; background:var(--bg-alt); display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; flex-shrink:0; }
.preview-opt.correct .preview-opt-letter{ background:var(--green); color:#fff; }
.preview-float{
  position:absolute; background:var(--surface); border-radius:12px; box-shadow:var(--shadow-2);
  padding:12px 16px; display:flex; align-items:center; gap:10px; font-size:13px; font-weight:700; border:1px solid var(--line);
  color:var(--text-1);
}
.preview-float-1{ top:-16px; right:-14px; color:var(--green-dark); }
.preview-float-2{ bottom:-14px; left:-16px; color:var(--blue-dark); }
@media(max-width:640px){ .preview-float{ display:none; } .preview-card{ max-width:100%; } }

/* ---------------- Sections ---------------- */
.section{ padding:72px 0; }
@media(max-width:640px){ .section{ padding:52px 0; } }
.section-alt{ background:var(--bg-alt); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.section-head{ max-width:640px; margin-bottom:44px; }
.section-eyebrow{ font-size:13px; font-weight:700; color:var(--blue-dark); text-transform:uppercase; letter-spacing:.06em; margin-bottom:10px; }
.section h2{ font-size:clamp(24px, 4.2vw, 36px); font-weight:800; }

.grid{ display:grid; gap:20px; }
.grid-3{ grid-template-columns:repeat(3, 1fr); }
.grid-4{ grid-template-columns:repeat(4, 1fr); }
.grid-2{ grid-template-columns:repeat(2, 1fr); }
@media(max-width:900px){ .grid-3,.grid-4{ grid-template-columns:1fr 1fr; } }
@media(max-width:600px){ .grid-3,.grid-4,.grid-2{ grid-template-columns:1fr; } }

.card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md);
  padding:24px; box-shadow:var(--shadow-1); transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.card:hover{ transform:translateY(-2px); box-shadow:var(--shadow-2); border-color:var(--blue); }
.card h3{ font-size:18px; font-weight:800; }
.card p{ font-size:14px; margin-bottom:0; }
.card-icon{
  width:44px; height:44px; border-radius:12px; background:var(--blue-soft); color:var(--blue-dark);
  display:flex; align-items:center; justify-content:center; margin-bottom:16px;
}

.subject-card{ display:flex; flex-direction:column; gap:8px; }
.subject-card .tag-row{ display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; }

.tag{
  font-size:11.5px; font-weight:700; padding:4px 11px; border-radius:999px;
  background:var(--bg-alt); color:var(--text-2); border:1px solid var(--line);
  white-space:nowrap;
}
.tag-free{ background:var(--green-soft); color:var(--green-dark); border-color:transparent; }
.tag-premium{ background:var(--amber-soft); color:#8A6410; border-color:transparent; }
.tag-easy{ background:var(--green-soft); color:var(--green-dark); }
.tag-medium{ background:var(--amber-soft); color:#8A6410; }
.tag-hard{ background:#FCE6D6; color:#B4551E; }
.tag-very_hard{ background:var(--danger-soft); color:var(--danger); }
.tag-expert{ background:#EAE0FB; color:#6836C4; }

/* how it works */
.steps{ display:flex; flex-direction:column; gap:0; }
.step{ display:flex; gap:20px; padding:24px 0; border-top:1px solid var(--line); align-items:flex-start; }
.step:last-child{ border-bottom:1px solid var(--line); }
.step-icon{
  width:46px; height:46px; border-radius:12px; background:var(--blue-soft); color:var(--blue-dark);
  display:flex; align-items:center; justify-content:center; flex-shrink:0; position:relative;
}
.step-icon .step-num{ position:absolute; bottom:-6px; right:-6px; width:20px; height:20px; border-radius:50%; background:var(--blue-dark); color:#fff; font-family:var(--font-mono); font-size:10px; display:flex; align-items:center; justify-content:center; font-weight:700; }
.step h4{ margin:0 0 6px; font-size:16.5px; font-family:var(--font-display); font-weight:800; }
.step p{ margin:0; font-size:14px; }

/* pricing / CTA band */
.cta-band{
  background:linear-gradient(135deg, var(--blue-dark) 0%, var(--blue) 100%);
  color:#fff; border-radius:var(--radius-lg); padding:56px 32px; text-align:center; position:relative; overflow:hidden;
}
.cta-band h2{ color:#fff; }
.cta-band p{ color:rgba(255,255,255,.82); max-width:520px; margin:0 auto 26px; }
.cta-band .btn-primary{ background:#fff; color:var(--blue-dark); }
.cta-band .btn-primary:hover{ background:#EAF0FF; }
@media(max-width:640px){ .cta-band{ padding:40px 22px; } }

/* footer */
.site-footer{ border-top:1px solid var(--line); padding:44px 0; }
.footer-inner{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:20px; align-items:center; }
.footer-links{ display:flex; gap:22px; font-size:13.5px; color:var(--text-2); flex-wrap:wrap; }
.footer-links a:hover{ color:var(--blue); }

/* ---------------- Auth ---------------- */
.auth-shell{ min-height:calc(100vh - var(--header-h)); display:flex; align-items:center; justify-content:center; padding:32px 16px; }
.auth-card{ width:100%; max-width:420px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:36px; box-shadow:var(--shadow-2); }
@media(max-width:480px){ .auth-card{ padding:26px 22px; } }
.auth-card h1{ font-size:24px; margin-bottom:6px; font-weight:800; }
.field{ margin-bottom:18px; }
.field label{ display:block; font-size:13px; font-weight:700; margin-bottom:6px; color:var(--text-2); }
.field input, .field select, .field textarea{
  width:100%; padding:12px 14px; border-radius:var(--radius-sm); border:1.5px solid var(--line);
  background:var(--surface); color:var(--text-1); font-family:var(--font-body); font-size:16px;
}
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-soft); }
.alert{ padding:12px 16px; border-radius:var(--radius-sm); font-size:14px; margin-bottom:18px; display:flex; align-items:center; gap:10px; }
.alert-error{ background:var(--danger-soft); color:var(--danger); }
.alert-success{ background:var(--green-soft); color:var(--green-dark); }
.auth-foot{ text-align:center; margin-top:20px; font-size:14px; color:var(--text-2); }

/* ---------------- Dashboard ---------------- */
.page-head{ padding:36px 0 8px; }
.page-head h1{ font-size:clamp(24px,4vw,30px); font-weight:800; }
.stat-strip{ display:grid; grid-template-columns:repeat(5,1fr); gap:14px; margin:28px 0; }
@media(max-width:900px){ .stat-strip{ grid-template-columns:repeat(3,1fr);} }
@media(max-width:560px){ .stat-strip{ grid-template-columns:repeat(2,1fr);} }
.stat-box{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md); padding:16px; box-shadow:var(--shadow-1); }
.stat-box b{ display:block; font-family:var(--font-display); font-size:22px; font-weight:800; }
.stat-box span{ font-size:11.5px; color:var(--text-3); }

.dash-grid{ display:grid; grid-template-columns:2fr 1fr; gap:20px; }
@media(max-width:900px){ .dash-grid{ grid-template-columns:1fr; } }
.panel{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md); padding:22px; box-shadow:var(--shadow-1); }
@media(max-width:480px){ .panel{ padding:18px; } }
.panel h3{ font-size:16px; margin-bottom:16px; font-weight:800; font-family:var(--font-display); }

.bar-row{ display:flex; align-items:center; gap:12px; margin-bottom:14px; font-size:13.5px; }
.bar-row .label{ width:110px; color:var(--text-2); flex-shrink:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bar-track{ flex:1; height:8px; background:var(--bg-alt); border-radius:99px; overflow:hidden; }
.bar-fill{ height:100%; background:var(--blue); border-radius:99px; }
.bar-pct{ width:38px; text-align:right; font-family:var(--font-mono); color:var(--text-2); font-size:12.5px; }

.list-row{ display:flex; justify-content:space-between; align-items:center; padding:12px 0; border-bottom:1px solid var(--line); font-size:14px; gap:10px; flex-wrap:wrap; }
.list-row:last-child{ border-bottom:none; }

/* ---------------- Exam runner ---------------- */
.exam-shell{ display:grid; grid-template-columns:1fr 300px; gap:0; min-height:100vh; }
@media(max-width:900px){ .exam-shell{ grid-template-columns:1fr; } }
.exam-main{ padding:28px 48px 120px; max-width:820px; }
@media(max-width:640px){ .exam-main{ padding:18px 16px 140px; } }
.exam-topbar{
  display:flex; align-items:center; justify-content:space-between; padding:14px 48px; gap:10px;
  border-bottom:1px solid var(--line); background:var(--surface); position:sticky; top:0; z-index:20;
}
@media(max-width:640px){ .exam-topbar{ padding:12px 16px; } .exam-topbar > div:nth-child(2){ display:none; } }
.exam-timer{
  font-family:var(--font-mono); font-size:18px; font-weight:700; padding:8px 14px;
  background:var(--bg-alt); border-radius:var(--radius-sm); display:flex; align-items:center; gap:8px;
}
.exam-timer.low{ color:var(--danger); background:var(--danger-soft); }

.q-meta{ display:flex; align-items:center; gap:10px; margin-bottom:16px; flex-wrap:wrap; }
.q-num{ font-family:var(--font-mono); color:var(--text-3); font-size:13.5px; }
.q-stem{ font-size:clamp(17px,2.6vw,20px); line-height:1.5; margin-bottom:26px; font-weight:700; font-family:var(--font-display); }
.case-context{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md); padding:18px; margin-bottom:22px; font-size:14px; box-shadow:var(--shadow-1); }
.case-context dt{ font-weight:700; color:var(--blue-dark); font-size:11.5px; text-transform:uppercase; letter-spacing:.04em; margin-top:12px; }
.case-context dt:first-child{ margin-top:0; }
.case-context dd{ margin:2px 0 0; color:var(--text-2); }

.option{
  display:flex; align-items:flex-start; gap:14px; padding:15px 16px; border:1.5px solid var(--line);
  border-radius:var(--radius-md); margin-bottom:11px; cursor:pointer; transition:border-color .15s, background .15s;
}
.option:hover{ border-color:var(--blue); }
.option input{ margin-top:3px; accent-color:var(--blue); flex-shrink:0; }
.option.selected{ border-color:var(--blue); background:var(--blue-soft); }
.option-letter{
  width:25px; height:25px; border-radius:8px; background:var(--bg-alt); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; flex-shrink:0;
}

.exam-nav-btns{ display:flex; gap:10px; margin-top:28px; flex-wrap:wrap; }
.exam-nav-btns .btn{ flex:1 1 auto; min-width:120px; }

.exam-sidebar{ background:var(--surface); border-left:1px solid var(--line); padding:22px; position:sticky; top:0; height:100vh; overflow-y:auto; }
@media(max-width:900px){ .exam-sidebar{ position:static; height:auto; border-left:none; border-top:1px solid var(--line); } }
.palette-grid{ display:grid; grid-template-columns:repeat(5, 1fr); gap:7px; margin:16px 0 22px; }
.palette-cell{
  aspect-ratio:1; border-radius:8px; border:1px solid var(--line); background:var(--bg-alt);
  display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-size:12px;
  cursor:pointer; color:var(--text-2);
}
.palette-cell.current{ outline:2px solid var(--blue); outline-offset:1px; }
.palette-cell.answered{ background:var(--blue-dark); color:#fff; border-color:var(--blue-dark); }
.palette-cell.review{ background:var(--amber); color:#3D2E00; border-color:var(--amber); }
.legend{ display:flex; flex-direction:column; gap:8px; font-size:12.5px; color:var(--text-2); margin-bottom:22px; }
.legend-dot{ width:10px; height:10px; border-radius:3px; display:inline-block; margin-right:8px; }

/* ---------------- Results ---------------- */
.score-hero{ text-align:center; padding:48px 0 28px; }
.score-ring{ width:clamp(140px,40vw,180px); height:clamp(140px,40vw,180px); margin:0 auto 22px; position:relative; }
.score-ring svg{ transform:rotate(-90deg); width:100%; height:100%; }
.score-ring .bg{ stroke:var(--line); }
.score-ring .fg{ stroke:var(--blue-dark); stroke-linecap:round; transition:stroke-dashoffset 1s ease; }
.score-ring .value{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; flex-direction:column; }
.score-ring .value b{ font-family:var(--font-display); font-size:clamp(28px,7vw,38px); font-weight:800; }
.score-ring .value span{ font-size:12px; color:var(--text-3); }

.review-item{ border:1px solid var(--line); border-radius:var(--radius-md); padding:20px; margin-bottom:14px; background:var(--surface); box-shadow:var(--shadow-1); }
@media(max-width:480px){ .review-item{ padding:16px; } }
.review-item.correct{ border-left:4px solid var(--green); }
.review-item.incorrect{ border-left:4px solid var(--danger); }
.review-item.skipped{ border-left:4px solid var(--text-3); }
.review-answer{ font-size:14px; padding:6px 0; }
.review-answer.wrong{ color:var(--danger); }
.review-answer.right{ color:var(--green-dark); }
.explanation-box{ background:var(--bg-alt); border-radius:var(--radius-sm); padding:14px 16px; margin-top:12px; font-size:14px; color:var(--text-2); }

/* ---------------- Admin ---------------- */
.admin-shell{ display:grid; grid-template-columns:230px 1fr; min-height:100vh; }
@media(max-width:860px){ .admin-shell{ grid-template-columns:1fr; } }
.admin-sidebar{ background:var(--surface); color:var(--text-1); padding:20px 16px; border-right:1px solid var(--line); }
@media(max-width:860px){
  .admin-sidebar{ border-right:none; border-bottom:1px solid var(--line); padding:14px 16px; position:sticky; top:0; z-index:30; }
  .admin-sidebar .brand{ margin-bottom:12px; }
  .admin-nav{ display:flex; overflow-x:auto; gap:4px; padding-bottom:4px; -webkit-overflow-scrolling:touch; }
  .admin-nav a{ white-space:nowrap; flex-shrink:0; }
}
.admin-sidebar .brand{ color:var(--blue-dark); margin-bottom:28px; }
.admin-nav{ display:flex; flex-direction:column; }
.admin-nav a{ display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:8px; font-size:14px; color:var(--text-2); margin-bottom:2px; font-weight:600; }
.admin-nav a:hover, .admin-nav a.active{ background:var(--blue-soft); color:var(--blue-dark); }
.admin-main{ padding:28px 24px; max-width:100%; overflow-x:hidden; }
@media(min-width:861px){ .admin-main{ padding:32px 40px; } }
.admin-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:24px; flex-wrap:wrap; gap:12px; }
.admin-head h1{ font-weight:800; font-size:clamp(22px,4vw,28px); }

.table-scroll{ width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:var(--radius-md); }
table.data-table{ width:100%; min-width:640px; border-collapse:collapse; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md); overflow:hidden; box-shadow:var(--shadow-1); }
table.data-table th{ text-align:left; font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:var(--text-3); padding:12px 16px; border-bottom:1px solid var(--line); background:var(--bg-alt); white-space:nowrap; }
table.data-table td{ padding:13px 16px; border-bottom:1px solid var(--line); font-size:14px; vertical-align:middle; }
table.data-table tr:last-child td{ border-bottom:none; }

.editor-toolbar{ display:flex; gap:6px; flex-wrap:wrap; padding:10px; border:1px solid var(--line); border-bottom:none; border-radius:var(--radius-sm) var(--radius-sm) 0 0; background:var(--bg-alt); }
.editor-toolbar button{ padding:7px 11px; border-radius:6px; border:1px solid var(--line); background:var(--surface); cursor:pointer; font-size:13px; }
.editor-toolbar button:hover{ border-color:var(--blue); color:var(--blue); }
.editor-body{ border:1px solid var(--line); border-radius:0 0 var(--radius-sm) var(--radius-sm); min-height:160px; padding:14px; font-size:15px; }
.editor-body:focus{ outline:none; border-color:var(--blue); }
.preview-pane{ border:1px dashed var(--line); border-radius:var(--radius-sm); padding:18px; margin-top:10px; background:var(--bg-alt); font-size:16px; }

.badge{ display:inline-block; padding:3px 10px; border-radius:999px; font-size:11.5px; font-weight:700; white-space:nowrap; }
.badge-active{ background:var(--green-soft); color:var(--green-dark); }
.badge-draft{ background:var(--line); color:var(--text-2); }
.badge-disabled{ background:var(--danger-soft); color:var(--danger); }

.opt-row{ display:flex; gap:10px; align-items:center; margin-bottom:8px; flex-wrap:wrap; }
.opt-row input[type=text]{ flex:1; min-width:140px; }