:root {
  --page:#020617;
  --card:#0f172a;
  --soft:#1e293b;
  --text:#f8fafc;
  --muted:#cbd5e1;
  --subtle:#94a3b8;
  --border:#334155;

  --primary-bg:#f8fafc;
  --primary-text:#020617;

  --secondary-bg:#1e293b;
  --secondary-text:#f8fafc;
  --secondary-hover:#334155;

  --green-bg:rgba(20,83,45,.45);
  --green-text:#bbf7d0;
  --green-border:#15803d;

  --red-bg:rgba(127,29,29,.5);
  --red-text:#fecaca;
  --red-border:#b91c1c;

  --yellow-bg:rgba(113,63,18,.55);
  --yellow-text:#fef3c7;
  --yellow-border:#a16207;

  --blue-bg:rgba(30,64,175,.35);
  --blue-text:#bfdbfe;
  --blue-border:#2563eb;

  --shadow:rgba(0,0,0,.25);
}

.q-text {
  font-weight: 400;
}

body.light {
  --page:#f8fafc;
  --card:#fff;
  --soft:#f8fafc;
  --text:#0f172a;
  --muted:#475569;
  --subtle:#64748b;
  --border:#e2e8f0;

  --primary-bg:#0f172a;
  --primary-text:#fff;

  --secondary-bg:#fff;
  --secondary-text:#0f172a;
  --secondary-hover:#f1f5f9;

  --green-bg:#f0fdf4;
  --green-text:#15803d;
  --green-border:#86efac;

  --red-bg:#fef2f2;
  --red-text:#b91c1c;
  --red-border:#fca5a5;

  --yellow-bg:#fefce8;
  --yellow-text:#854d0e;
  --yellow-border:#fde68a;

  --blue-bg:#eff6ff;
  --blue-text:#1d4ed8;
  --blue-border:#93c5fd;

  --shadow:rgba(15,23,42,.08);
}

* {
  box-sizing:border-box;
}

html {
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}

body {
  margin:0;
  min-height:100vh;
  background:var(--page);
  color:var(--text);
  font-family:Arial, Helvetica, sans-serif;
  transition:background 160ms ease, color 160ms ease;
  touch-action:manipulation;
}

button,
select {
  font:inherit;
  font-size:16px;
}

button {
  -webkit-tap-highlight-color:transparent;
}

.page {
  width:min(1120px, calc(100% - 32px));
  margin:0 auto;
  padding:24px 0;
}

.stack {
  display:grid;
  gap:20px;
}

.card {
  background:var(--card);
  border:1px solid var(--border);
  border-radius:28px;
  padding:20px;
  box-shadow:0 12px 32px var(--shadow);
}

.soft {
  background:var(--soft);
  border:1px solid var(--border);
  border-radius:20px;
  padding:16px;
}

.header {
  display:flex;
  justify-content:space-between;
  gap:24px;
  align-items:flex-start;
  flex-wrap:wrap;
}

h1,
h2,
h3,
p {
  margin:0;
}

h1 {
  font-size:clamp(28px, 5vw, 42px);
  line-height:1.05;
  letter-spacing:-.03em;
}

h2 {
  font-size:22px;
}

h3 {
  font-size:18px;
  line-height:1.35;
}

.muted {
  color:var(--muted);
}

.subtle {
  color:var(--subtle);
}

.small {
  font-size:13px;
  line-height:1.5;
}

.controls {
  width:min(100%, 380px);
  display:grid;
  gap:12px;
}

.btn {
  min-height:42px;
  border-radius:16px;
  border:1px solid var(--border);
  background:var(--secondary-bg);
  color:var(--secondary-text);
  padding:9px 13px;
  font-weight:800;
  cursor:pointer;
  transition:transform 120ms ease, background 120ms ease, color 120ms ease, border-color 120ms ease;
}

.btn:hover {
  background:var(--secondary-hover);
}

.btn:active {
  transform:scale(.98);
}

.btn.active,
.btn.primary {
  background:var(--primary-bg);
  color:var(--primary-text);
  border-color:var(--primary-bg);
}

.btn.danger {
  background:var(--red-bg);
  color:var(--red-text);
  border-color:var(--red-border);
}

.grid-2 {
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:8px;
}

.grid-3 {
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:12px;
}

.grid-4 {
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:8px;
}

.dashboard {
  display:grid;
  grid-template-columns:1.4fr .8fr;
  gap:16px;
}

.stat {
  border:1px solid var(--border);
  border-radius:20px;
  padding:18px;
  text-align:center;
  background:var(--soft);
}

.stat.green {
  background:var(--green-bg);
  color:var(--green-text);
  border-color:var(--green-border);
}

.stat.red {
  background:var(--red-bg);
  color:var(--red-text);
  border-color:var(--red-border);
}

.stat.blue {
  background:var(--blue-bg);
  color:var(--blue-text);
  border-color:var(--blue-border);
}

.num {
  font-size:30px;
  font-weight:900;
  line-height:1;
  margin-bottom:6px;
}

.select {
  width:100%;
  min-height:44px;
  border-radius:16px;
  border:1px solid var(--border);
  background:var(--secondary-bg);
  color:var(--secondary-text);
  padding:8px 12px;
  font-weight:800;
}

.question-card {
  border:1px solid var(--border);
  border-radius:24px;
  padding:18px;
  background:var(--card);
}

.question-card.correct {
  background:var(--green-bg);
  border-color:var(--green-border);
}

.question-card.wrong {
  background:var(--red-bg);
  border-color:var(--red-border);
}

.q-top {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:14px;
}

.q-title {
  display:flex;
  gap:12px;
  align-items:flex-start;
}

.q-num {
  width:42px;
  height:42px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background:#020617;
  color:white;
  font-weight:900;
  flex:0 0 auto;
}

body.light .q-num {
  background:#0f172a;
}

.badge {
  border-radius:999px;
  padding:6px 12px;
  font-size:13px;
  font-weight:900;
  background:var(--soft);
  color:var(--muted);
}

.badge.correct {
  background:rgba(22,163,74,.18);
  color:var(--green-text);
}

.badge.wrong {
  background:rgba(220,38,38,.18);
  color:var(--red-text);
}

body.light .badge.correct {
  background:#dcfce7;
  color:#15803d;
}

body.light .badge.wrong {
  background:#fee2e2;
  color:#b91c1c;
}

.scenario,
.visual {
  border:1px solid var(--blue-border);
  background:var(--blue-bg);
  color:var(--blue-text);
  border-radius:16px;
  padding:12px;
  margin:12px 0;
  font-size:14px;
  line-height:1.5;
}

.visual {
  border-color:var(--yellow-border);
  background:var(--yellow-bg);
  color:var(--yellow-text);
}

.choices {
  display:grid;
  gap:10px;
  margin-top:14px;
}

.choice {
  display:flex;
  align-items:flex-start;
  gap:10px;
  width:100%;
  text-align:left;
  border:1px solid var(--border);
  border-radius:16px;
  background:var(--secondary-bg);
  color:var(--secondary-text);
  padding:12px;
  cursor:pointer;
  transition:background 120ms ease, transform 120ms ease, border-color 120ms ease;
}

.choice:hover {
  background:var(--secondary-hover);
}

.choice:active {
  transform:scale(.995);
}

.choice.selected {
  background:var(--primary-bg);
  color:var(--primary-text);
  border-color:var(--primary-bg);
}

.choice.correct-answer {
  outline:2px solid var(--green-border);
}

.choice.wrong-answer {
  outline:2px solid var(--red-border);
}

.choice:disabled {
  cursor:default;
}

.letter {
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  border-radius:999px;
  border:1px solid currentColor;
  font-weight:900;
}

.score-grid {
  display:grid;
  grid-template-columns:1fr 3fr;
  gap:16px;
}

.final {
  background:#020617;
  color:white;
  border-radius:20px;
  padding:20px;
}

body.light .final {
  background:#0f172a;
}

.final-num {
  font-size:44px;
  font-weight:900;
  margin-top:6px;
}

.review-list {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:12px;
}

.review-pill {
  border-radius:999px;
  padding:7px 12px;
  background:var(--red-bg);
  color:var(--red-text);
  border:1px solid var(--red-border);
  font-size:14px;
  font-weight:800;
  cursor:pointer;
}

.hidden {
  display:none !important;
}

.footer {
  text-align:center;
  color:var(--subtle);
  font-size:12px;
  padding-bottom:16px;
}

.mobile-bottom-actions {
  display:none;
}

.back-to-top {
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:50;
  min-height:44px;
  border-radius:999px;
  border:1px solid var(--border);
  background:var(--primary-bg);
  color:var(--primary-text);
  padding:10px 14px;
  font-weight:900;
  cursor:pointer;
  box-shadow:0 12px 32px var(--shadow);
  transition:transform 120ms ease, opacity 120ms ease;
}

.back-to-top:hover {
  transform:translateY(-2px);
}

.back-to-top:active {
  transform:scale(.96);
}

/* Mobile width guard */
.page,
.card,
.question-card,
.q-title,
.q-title > div,
.q-text,
.scenario,
.visual,
.choices,
.choice,
.choice span:last-child,
.soft,
.review-list {
  min-width:0;
  max-width:100%;
}

.q-text,
.scenario,
.visual,
.choice span:last-child,
.soft,
.review-pill {
  overflow-wrap:anywhere;
  word-break:break-word;
}

.choice {
  overflow:hidden;
}

pre,
code {
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  word-break:break-word;
  max-width:100%;
}

html,
body {
  max-width:100%;
  overflow-x:hidden;
}

@media(max-width:900px) {
  .dashboard,
  .score-grid {
    grid-template-columns:1fr;
  }

  .grid-3 {
    grid-template-columns:1fr;
  }

  .header {
    gap:16px;
  }

  .controls {
    width:100%;
  }
}

@media(max-width:580px) {
  .mobile-bottom-actions {
    display:block;
  }

  .question-card,
  .choice,
  .select {
    width:100%;
  }

  body {
    padding-bottom:0;
  }

  .page {
    width:min(100% - 20px, 1120px);
    padding:10px 0 calc(20px + env(safe-area-inset-bottom));
  }

  .card {
    padding:16px;
    border-radius:22px;
  }

  .controls {
    width:100%;
  }

  .grid-4 {
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .btn {
    min-height:48px;
    padding:10px 12px;
  }

  .select {
    min-height:48px;
    font-size:16px;
  }

  .choice {
    min-height:52px;
    padding:14px;
  }

  .action-card {
    position:static;
    padding:16px;
    border-radius:22px;
    box-shadow:0 12px 32px var(--shadow);
  }

  .action-buttons {
    grid-template-columns:1fr 1fr;
  }

  .final-num {
    font-size:38px;
  }

  .q-top {
    align-items:flex-start;
  }

  .q-title {
    width:100%;
  }

  .badge {
    margin-left:54px;
  }

  .question-card {
    padding:15px;
    border-radius:22px;
  }

  .back-to-top {
    right:14px;
    bottom:calc(14px + env(safe-area-inset-bottom));
    min-height:42px;
    padding:9px 12px;
    font-size:14px;
  }

  h1 {
    font-size:30px;
  }
}

.answer-review {
  margin-top:14px;
  border:1px solid var(--green-border);
  background:var(--green-bg);
  color:var(--green-text);
  border-radius:16px;
  padding:12px;
  line-height:1.5;
}