/* ═══════════════════════════════════════════════
   DESIGN TOKENS — MODERN REVAMP
═══════════════════════════════════════════════ */
:root {
  /* Dark theme — Premium aesthetic */
  --bg: #0a0e1a;
  --surface: #0f1623;
  --surface2: #131c2e;
  --surface3: #1a2847;
  --border: #1e2f4a;
  --border2: #2d3f57;
  --border3: #cb7f19;
  --txt: #f5f7fa;
  --txt2: #c6cfda;
  --txt3: #6b7a8a;
  --azure: #2563eb;
  --azure2: #3b82f6;
  --sky: #38bdf8;
  --ok: #10b981;
  --ok2: #34d399;
  --err: #ef4444;
  --err2: #f87171;
  --warn: #f59e0b;
  --warn2: #fbbf24;
  --purple: #8b5cf6;
  --pink: #ec4899;
  --btnglass: rgba(255, 255, 255, .05);

  /* Question type accent colors */
  --t-mcq: #3b82f6;
  --t-multi: #8b5cf6;
  --t-fill: #f59e0b;
  --t-match: #10b981;
  --t-drag: #ec4899;

  --sidebar-w: 380px;
  --sidebar-w-mobile: 85vw;
  --r: 14px;
  --r2: 10px;
  --font-d: "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
  --font-b: "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  --font-m: "Cascadia Code", "SFMono-Regular", Consolas, monospace;
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --shadow-elevated: 0 20px 50px rgba(0,0,0,.22);
  --transition-fast: 150ms ease;
  --transition-normal: 250ms ease;
  --z-sidebar: 40;
  --z-nav: 50;
  --z-toast: 80;
}

[data-theme="light"] {
  --bg: #f0f4ff;
  --surface: #f6f8fe;
  --surface2: #edf2f6;
  --surface3: #e7ecfd;
  --border: #dde5f4;
  --border2: #c7d5ee;
  --border3: #e49c00;
  --txt: #0f172a;
  --txt2: #3b4756;
  --txt3: #4e5d72;
  --azure: #1d4ed8;
  --azure2: #2563eb;
  --sky: #0284c7;
  --btnglass: rgb(32 69 0 / 87%);
}

/* ═══════════════════════════════════════════════
   RESET & BASE
═══════════════════════════════════════════════ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
  overflow-x: hidden;
  /* Prevent horizontal scrolling */
  overflow-y: auto;
  /* Enable vertical scrolling */
  font-family: var(--font-b);
  background: var(--bg);
  color: var(--txt);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

button {
  cursor: pointer;
  font-family: inherit;
}

input {
  font-family: inherit;
}

/* ═══════════════════════════════════════════════
   APP SHELL — FULL VIEWPORT SPLIT
═══════════════════════════════════════════════ */
#app {
  display: flex;
  width: 100vw;
  overflow: hidden;
}

/* ═══════════════════════════════════════════════
   LEFT SIDEBAR
═══════════════════════════════════════════════ */
#sidebar {
  width: var(--sidebar-w);
  min-width: var(--sidebar-w);
  height: 100vh;
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  flex-shrink: 0;
  position: relative;
  z-index: 10;
  box-shadow: inset -1px 0 0 0 var(--border);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── SIDEBAR CLOSE BUTTON ──────────────────────── */
.sidebar-close-btn {
  display: none;
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--txt2);
  font-size: 18px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  z-index: 10;
  -webkit-tap-highlight-color: transparent;
  padding: 0;
  line-height: 1;
}

.sidebar-close-btn:hover {
  border-color: var(--border2);
  color: var(--txt);
  background: var(--surface3);
  transform: rotate(90deg);
}

.sidebar-close-btn:active {
  transform: scale(0.95);
}

.sidebar-header {
  padding: 24px 20px 20px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}

.brand-icon {
  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, #1d4ed8, #38bdf8);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}

.brand-name {
  font-family: var(--font-d);
  font-size: .88rem;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--txt);
}

.brand-sub {
  font-family: var(--font-m);
  font-size: .6rem;
  color: var(--txt3);
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-left: 42px;
}

/* ── RING AREA ─────────────────────────────── */
.ring-zone {
  padding: 24px 20px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.ring-wrap {
  position: relative;
  width: 140px;
  height: 140px;
  margin: 0 auto 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#progress-ring {
  transform: rotate(-90deg);
  overflow: visible;
  width: 100%;
  height: 100%;
}

.ring-track {
  fill: none;
  stroke: var(--surface3);
  stroke-width: 8;
}

.ring-fill {
  fill: none;
  stroke: var(--azure2);
  stroke-width: 8;
  stroke-linecap: round;
  transition: stroke-dashoffset .7s cubic-bezier(0.4, 0, 0.2, 1), stroke .3s;
  filter: drop-shadow(0 0 8px rgba(59, 130, 246, 0.6));
}

.ring-fill.pulse-ok {
  animation: ringPulseOk .5s ease;
}

.ring-fill.pulse-err {
  animation: ringPulseErr .5s ease;
}

@keyframes ringPulseOk {

  0%,
  100% {
    stroke: var(--azure2)
  }

  50% {
    stroke: var(--ok2);
    filter: drop-shadow(0 0 12px rgba(52, 211, 153, .8))
  }
}

@keyframes ringPulseErr {

  0%,
  100% {
    stroke: var(--azure2)
  }

  50% {
    stroke: var(--err2);
    filter: drop-shadow(0 0 12px rgba(248, 113, 113, .8))
  }
}

.ring-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.ring-num {
  font-family: var(--font-d);
  font-size: 2rem;
  font-weight: 800;
  color: var(--txt);
  line-height: 1;
  letter-spacing: -.04em;
}

.ring-denom {
  font-family: var(--font-m);
  font-size: .7rem;
  color: var(--txt3);
  margin-top: 2px;
}

.ring-label {
  font-size: .72rem;
  font-weight: 600;
  font-family: var(--font-d);
  color: var(--txt3);
  text-transform: uppercase;
  letter-spacing: .1em;
}

/* ── SCORE STRIP ───────────────────────────── */
.score-strip {
  display: none;
  /* display: grid;
  grid-template-columns: repeat(3, 1fr); */
  gap: 1px;
  background: var(--border);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.score-cell {
  background: var(--surface);
  padding: 11px 6px;
  text-align: center;
}

.score-val {
  font-family: var(--font-m);
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1;
  margin-bottom: 3px;
}

.score-cell.s-ok .score-val {
  color: var(--ok);
}

.score-cell.s-err .score-val {
  color: var(--err);
}

.score-cell.s-str .score-val {
  color: var(--warn);
}

.score-lbl {
  font-size: .6rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--txt3);
}

/* ── SIDEBAR SCROLLABLE BODY ───────────────── */
.sidebar-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  -webkit-overflow-scrolling: touch;
}

.sidebar-body::-webkit-scrollbar {
  width: 3px;
}

.sidebar-body::-webkit-scrollbar-thumb {
  background: var(--border2);
  border-radius: 2px;
}

.sb-section-label {
  font-family: var(--font-m);
  font-size: .6rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--txt3);
  margin-bottom: 8px;
}

/* Bank chips */
.bank-chips {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.bank-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 13px;
  border-radius: var(--r2);
  border: 1.5px solid var(--border);
  background: transparent;
  color: var(--txt2);
  font-size: .78rem;
  font-weight: 500;
  font-family: var(--font-b);
  transition: all .2s cubic-bezier(0.4, 0, 0.2, 1);
  text-align: left;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  -webkit-tap-highlight-color: transparent;
}

.bank-chip:hover {
  border-color: var(--border2);
  color: var(--txt);
  background: var(--surface2);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
  transform: translateY(-1px);
}

.bank-chip.on {
  border-color: transparent;
  color: var(--txt2);
  font-weight: 600;
}

.bank-chip .chip-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.bank-chip .chip-ct {
  font-family: var(--font-m);
  font-size: .65rem;
  margin-left: auto;
  opacity: .6;
  background: rgba(0, 0, 0, .2);
  padding: 1px 6px;
  border-radius: 100px;
}

/* Type toggles */
.type-toggles {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.type-toggle {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 10px;
  border-radius: var(--r2);
  border: 1px solid transparent;
  background: transparent;
  color: var(--txt3);
  font-size: .76rem;
  font-weight: 500;
  font-family: var(--font-b);
  transition: all .15s;
  cursor: pointer;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
}

.type-toggle:hover {
  color: var(--txt2);
  background: var(--surface2);
}

.type-toggle.on {
  color: var(--txt);
  background: var(--surface3);
  border-color: var(--border);
}

.type-toggle.on::before {
  content: '';
  display: block;
  width: 3px;
  height: 16px;
  border-radius: 2px;
  flex-shrink: 0;
}

.type-toggle[data-t="mcq"].on::before {
  background: var(--t-mcq);
}

.type-toggle[data-t="multi"].on::before {
  background: var(--t-multi);
}

.type-toggle[data-t="fill"].on::before {
  background: var(--t-fill);
}

.type-toggle[data-t="match"].on::before {
  background: var(--t-match);
}

.type-toggle[data-t="drag"].on::before {
  background: var(--t-drag);
}

.type-toggle .t-check {
  margin-left: auto;
  font-size: .7rem;
  opacity: 0;
}

.type-toggle.on .t-check {
  opacity: 1;
  color: var(--ok);
}

/* Sidebar footer */
.sidebar-footer {
  padding: 14px 20px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: auto;
}

.theme-btn {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--txt2);
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .15s;
  flex-shrink: 0;
}

.theme-btn:hover {
  border-color: var(--border2);
  color: var(--txt);
}

.score-pct {
  font-family: var(--font-m);
  font-size: .82rem;
  font-weight: 600;
  color: var(--sky);
}

.score-pct-label {
  font-size: .65rem;
  color: var(--txt3);
  font-family: var(--font-m);
}

/* ═══════════════════════════════════════════════
   RIGHT PANEL — MAIN CONTENT
═══════════════════════════════════════════════ */
#main {
  flex: 1;
  min-height: 600px;
  max-height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  position: relative;
}

/* ── TOP BAR ──────────────────────────────── */
.topbar {
  height: 56px;
  min-height: 56px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 16px;
  gap: 8px;
  background: var(--surface);
  flex-shrink: 0;
}

.topbar-qtype {
  display: none !important;
  align-items: center;
  gap: 7px;
  padding: 5px 10px;
  border-radius: 100px;
  font-size: .7rem;
  font-weight: 600;
  font-family: var(--font-d);
  letter-spacing: .01em;
  white-space: nowrap;
  flex-shrink: 1;
  min-width: 0;
  overflow: hidden;
}

.topbar-bank {
  font-size: .65rem;
  color: var(--txt3);
  font-family: var(--font-m);
  padding: 4px 10px;
  border-radius: 100px;
  border: 1px solid var(--border);
  background: var(--surface2);
  white-space: nowrap;
  flex-shrink: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-left: auto;
}

.topbar-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.hint-pill {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  border-radius: 100px;
  border: 1px solid rgba(245, 158, 11, .3);
  background: var(--btnglass);
  color: var(--warn2);
  font-size: .65rem;
  font-weight: 600;
  font-family: var(--font-d);
  transition: all .15s;
  white-space: nowrap;
}

.hint-pill:hover {
  background: var(--btnglass);
}

/* ── CONTENT AREA ─────────────────────────── */
.content-area {
  flex: 1;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
}

/* ── SCREENS ───────────────────────────────── */
.screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}

.screen.active {
  opacity: 1;
  pointer-events: all;
}

/* ── START SCREEN ──────────────────────────── */
#screen-start {
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.start-hero {
  text-align: center;
  max-width: 600px;
  width: 100%;
  padding: 0 8px;
}

.az-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  border-radius: 100px;
  border: 1px solid rgba(56, 189, 248, .25);
  background: rgba(56, 189, 248, .06);
  color: var(--sky);
  font-family: var(--font-m);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  margin-bottom: 28px;
}

.start-title {
  font-family: var(--font-d);
  font-size: clamp(1.8rem, 5vw, 3.2rem);
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1.1;
  margin-bottom: 16px;
  color: var(--txt);
}

.start-title .hi {
  background: linear-gradient(135deg, var(--azure2), var(--sky));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.start-desc {
  font-size: .88rem;
  color: var(--txt2);
  line-height: 1.65;
  margin-bottom: 28px;
  max-width: 460px;
  margin-left: auto;
  margin-right: auto;
}

.qtype-showcase {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  margin-bottom: 32px;
}

.qtype-pill-show {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  border-radius: var(--r2);
  font-size: .7rem;
  font-weight: 600;
  font-family: var(--font-d);
  border: 1px solid;
  transition: all .15s;
}

.start-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 32px;
  border-radius: var(--r);
  border: none;
  background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 50%, #3b82f6 100%);
  color: #fff;
  font-family: var(--font-d);
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: -.01em;
  transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 8px 24px rgba(37, 99, 235, 0.35);
  width: 100%;
  max-width: 300px;
  justify-content: center;
}

.start-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 36px rgba(37, 99, 235, 0.45);
}

.start-cta:active {
  transform: translateY(0);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
}

/* ── QUESTION SCREEN ──────────────────────── */
#screen-quiz {
  overflow: hidden;
}

.q-stage {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 20px 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  -webkit-overflow-scrolling: touch;
}

topbar-qtype .q-stage::-webkit-scrollbar {
  width: 4px;
}

.q-stage::-webkit-scrollbar-thumb {
  background: var(--border2);
  border-radius: 2px;
}

/* Slide animation */
.q-panel {
  /* height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center; */
  animation: slideIn .3s cubic-bezier(.25, .46, .45, .94);
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(32px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Question text block */
.q-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}

.q-eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.q-type-stripe {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-d);
  font-size: .62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  padding: 3px 10px 3px 8px;
  border-radius: 100px;
}

.q-type-stripe::before {
  content: '';
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.q-instruction {
  font-size: .7rem;
  color: var(--txt3);
  font-family: var(--font-m);
}

.q-text {
  font-family: var(--font-d);
  font-size: clamp(.95rem, 2vw, 1.18rem);
  font-weight: 600;
  line-height: 1.55;
  color: var(--txt);
  letter-spacing: -.01em;
}

/* hint box */
.hint-reveal {
  display: none;
  padding: 10px 14px;
  border-radius: var(--r2);
  border-left: 3px solid var(--warn);
  background: var(--btnglass);
  color: var(--warn2);
  font-size: .8rem;
  font-weight: 500;
  font-family: var(--font-b);
  line-height: 1.5;
  margin-bottom: 8px;
}

.hint-reveal.show {
  display: block;
  animation: fadeIn .2s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-4px)
  }

  to {
    opacity: 1;
    transform: translateY(0)
  }
}

/* ── MCQ ───────────────────────────────────── */
.opts-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.opt-btn {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 14px;
  border-radius: var(--r);
  border: 1.5px solid var(--border);
  background: var(--surface);
  color: var(--txt);
  font-size: .85rem;
  font-weight: 400;
  font-family: var(--font-b);
  line-height: 1.45;
  text-align: left;
  transition: all .2s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  -webkit-tap-highlight-color: transparent;
}

.opt-btn::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: transparent;
  transition: background .2s;
}

.opt-key {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  border: 1px solid var(--border2);
  background: var(--surface2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-m);
  font-size: .65rem;
  font-weight: 600;
  color: var(--txt3);
  transition: all .15s;
  margin-top: 1px;
}

.opt-btn:hover:not(:disabled) {
  border-color: var(--azure2);
  background: var(--surface2);
  box-shadow: 0 4px 16px rgba(59, 130, 246, 0.15);
  transform: translateY(-1px);
}

.opt-btn:hover:not(:disabled)::before {
  background: var(--azure2);
}

.opt-btn:hover:not(:disabled) .opt-key {
  border-color: var(--azure2);
  color: var(--azure2);
  background: rgba(59, 130, 246, .15);
}

.opt-btn.state-sel {
  border-color: var(--azure2);
  background: rgba(37, 99, 235, .07);
}

.opt-btn.state-sel::before {
  background: var(--azure2);
}

.opt-btn.state-sel .opt-key {
  border-color: var(--azure2);
  color: var(--azure2);
  background: rgba(59, 130, 246, .12);
}

.opt-btn.state-ok {
  border-color: var(--ok);
  background: rgba(16, 185, 129, .07);
}

.opt-btn.state-ok::before {
  background: var(--ok);
}

.opt-btn.state-ok .opt-key {
  border-color: var(--ok);
  color: var(--ok);
  background: rgba(16, 185, 129, .12);
}

.opt-btn.state-err {
  border-color: var(--err);
  background: rgba(239, 68, 68, .07);
}

.opt-btn.state-err::before {
  background: var(--err);
}

.opt-btn.state-err .opt-key {
  border-color: var(--err);
  color: var(--err);
  background: rgba(239, 68, 68, .12);
}

.opt-btn.state-miss {
  border-color: var(--ok);
  background: rgba(16, 185, 129, .04);
  opacity: .7;
}

.opt-btn.state-miss::before {
  background: var(--ok);
}

.opt-btn:disabled {
  cursor: default;
}

/* ── FILL ──────────────────────────────────── */
.fill-field {
  width: 100%;
  padding: 14px 16px;
  border-radius: var(--r);
  border: 1.5px solid var(--border2);
  background: var(--surface);
  color: var(--txt);
  font-size: .92rem;
  font-family: var(--font-d);
  font-weight: 500;
  outline: none;
  transition: all .2s cubic-bezier(0.4, 0, 0.2, 1);
  letter-spacing: -.01em;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  margin-bottom: 12px;
}

.fill-field:focus {
  border-color: var(--azure2);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
}

.fill-field.f-ok {
  border-color: var(--ok);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, .1);
  color: var(--ok);
}

.fill-field.f-err {
  border-color: var(--err);
  box-shadow: 0 0 0 3px rgba(239, 68, 68, .1);
}

.fill-field:disabled {
  cursor: not-allowed;
  opacity: .8;
}

[data-theme="light"] .fill-field {
  background: #fff;
}

/* ── MATCH ─────────────────────────────────── */
.match-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.match-col-head {
  font-family: var(--font-m);
  font-size: .58rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--txt3);
  margin-bottom: 8px;
}

.match-items {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* ── MATCH WITH COLOR CODING ─────────────────────────────────── */
.match-item {
  padding: 10px 12px;
  border-radius: var(--r2);
  border: 1.5px solid var(--border);
  background: var(--surface);
  font-size: .78rem;
  font-family: var(--font-b);
  font-weight: 500;
  line-height: 1.35;
  cursor: pointer;
  transition: all .2s cubic-bezier(0.4, 0, 0.2, 1);
  min-height: 44px;
  display: flex;
  align-items: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  -webkit-tap-highlight-color: transparent;
  position: relative;
  padding-left: 14px;
}

/* Color border indicator on left - inherited from inline style */
.match-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  border-radius: 0 2px 2px 0;
  transition: all .3s ease;
}

.match-item.term {
  color: var(--sky);
  font-weight: 600;
}

.match-item:hover:not(.locked) {
  border-color: var(--border2);
  background: var(--surface2);
  transform: translateX(2px);
}

.match-item.chosen {
  border-color: var(--azure2);
  background: rgba(37, 99, 235, .08);
  transform: translateX(4px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
}

.match-item.linked {
  cursor: default;
  transform: translateX(4px);
  border-radius: var(--r2);
}

.match-item.linked::before {
  opacity: 1;
}

.match-item.m-ok {
  border-color: var(--ok);
  background: rgba(16, 185, 129, .07);
  color: var(--ok2);
  cursor: default;
  transform: translateX(4px);
}

.match-item.m-ok::before {
  background: var(--ok) !important;
  opacity: 1;
}

.match-item.m-err {
  border-color: var(--err);
  background: rgba(239, 68, 68, .07);
  color: var(--err2);
  cursor: default;
  transform: translateX(4px);
}

.match-item.m-err::before {
  background: var(--err) !important;
  opacity: 1;
}

.match-item.locked {
  cursor: default;
}

/* Animation for matching */
.match-item.linked {
  animation: matchLink .3s ease;
}

@keyframes matchLink {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.02);
  }

  100% {
    transform: scale(1);
  }
}

/* Hover effect for unmatched items */
.match-item:not(.linked):not(.m-ok):not(.m-err):hover::before {
  opacity: 1;
}

.match-status-bar {
  font-size: .75rem;
  color: var(--txt3);
  font-family: var(--font-m);
  padding: 6px 2px;
  text-align: center;
  grid-column: 1 / -1;
  border-top: 1px solid var(--border);
  margin-top: 8px;
  padding-top: 10px;
}

/* ── MATCHING COLOR LEGEND ──────────────────────────────────── */
.match-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 12px;
  background: var(--surface2);
  border-radius: var(--r2);
  border: 1px solid var(--border);
  margin-bottom: 12px;
  grid-column: 1 / -1;
}

.match-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .7rem;
  color: var(--txt3);
}

.match-legend-item .color-swatch {
  width: 16px;
  height: 4px;
  border-radius: 2px;
  flex-shrink: 0;
}

.match-legend-label {
  font-family: var(--font-m);
  font-size: .6rem;
  color: var(--txt3);
}

/* ── DRAG ──────────────────────────────────── */
.drag-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.drag-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border-radius: var(--r2);
  border: 1.5px solid var(--border);
  background: var(--surface);
  cursor: grab;
  transition: all .2s cubic-bezier(0.4, 0, 0.2, 1);
  user-select: none;
  position: relative;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  touch-action: none;
}

.drag-row:active {
  cursor: grabbing;
}

.drag-row.dragging {
  opacity: .4;
}

.drag-row.over-top {
  border-top: 2px solid var(--azure2);
}

.drag-row.over-bot {
  border-bottom: 2px solid var(--azure2);
}

.drag-row.d-ok {
  border-color: var(--ok);
  background: rgba(16, 185, 129, .06);
  cursor: default;
}

.drag-row.d-err {
  border-color: var(--err);
  background: rgba(239, 68, 68, .06);
  cursor: default;
}

.drag-row.drag-locked {
  cursor: default;
}

.drag-handle {
  color: var(--txt3);
  font-size: .9rem;
  letter-spacing: -3px;
  flex-shrink: 0;
  line-height: 1;
}

.drag-rank {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: var(--surface2);
  border: 1px solid var(--border2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-m);
  font-size: .6rem;
  font-weight: 600;
  color: var(--txt3);
  flex-shrink: 0;
}

.drag-text {
  font-size: .82rem;
  font-weight: 500;
  font-family: var(--font-b);
  color: var(--txt);
  flex: 1;
  line-height: 1.35;
  min-width: 0;
}

.drag-indicator {
  margin-left: auto;
  font-size: .85rem;
  flex-shrink: 0;
}

/* ── EXPLANATION ──────────────────────────── */
.expln-panel {
  display: none;
  border-radius: var(--r);
  border: 1px solid var(--border);
  background: var(--surface);
  overflow: hidden;
  margin-top: 12px;
}

.expln-panel.show {
  display: block;
  animation: fadeIn .25s ease;
}

.expln-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-d);
  font-size: .8rem;
  font-weight: 700;
}

.expln-header.ok {
  color: var(--ok2);
}

.expln-header.err {
  color: var(--err2);
}

.expln-body {
  padding: 12px 14px;
  font-size: .82rem;
  line-height: 1.65;
  color: var(--txt2);
}

.expln-body strong {
  color: var(--txt);
  font-weight: 600;
}

.analogy-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 14px;
  border-top: 1px solid var(--border);
  font-size: .77rem;
  color: var(--txt3);
  font-style: italic;
  line-height: 1.5;
  background: var(--surface2);
}

.analogy-icon {
  flex-shrink: 0;
  font-style: normal;
}

/* ── BOTTOM ACTION BAR ─────────────────────── */
.action-bar {
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: var(--surface);
  flex-shrink: 0;
  flex-wrap: wrap;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: auto;
  z-index: 12;
}

.action-bar-left {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.btn-skip {
  padding: 8px 14px;
  border-radius: var(--r2);
  border: 1px solid var(--border);
  background: transparent;
  color: var(--txt3);
  font-size: .78rem;
  font-weight: 500;
  font-family: var(--font-b);
  transition: all .15s;
  -webkit-tap-highlight-color: transparent;
}

.btn-skip:hover {
  color: var(--txt2);
  border-color: var(--border2);
}

.btn-submit-main {
  padding: 8px 16px;
  border-radius: var(--r2);
  border: none;
  background: var(--surface3);
  border: 1px solid var(--border2);
  color: var(--txt2);
  font-size: .8rem;
  font-weight: 600;
  font-family: var(--font-d);
  transition: all .15s;
  -webkit-tap-highlight-color: transparent;
}

.btn-submit-main:hover {
  background: var(--surface2);
  color: var(--txt);
}

.btn-submit-main:disabled {
  opacity: .35;
  cursor: not-allowed;
}

.btn-next {
  padding: 9px 18px;
  border-radius: var(--r2);
  border: none;
  background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 50%, #3b82f6 100%);
  color: #fff;
  font-size: .8rem;
  font-weight: 700;
  font-family: var(--font-d);
  letter-spacing: -.01em;
  transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 6px 20px rgba(37, 99, 235, 0.3);
  -webkit-tap-highlight-color: transparent;
}

.btn-next:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(37, 99, 235, 0.4);
}

.btn-next:disabled {
  opacity: .58;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
  background: var(--surface3);
  color: var(--txt3);
  border: 1px solid var(--border);
}

/* ── RESULTS ───────────────────────────────── */
#screen-results {
  overflow-y: auto;
  padding: 32px 20px;
  flex-direction: column;
  align-items: center;
  -webkit-overflow-scrolling: touch;
}

.results-wrap {
  width: 100%;
  max-width: 640px;
}

.res-top {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 28px;
}

.res-grade-ring {
  position: relative;
  width: 100px;
  height: 100px;
  flex-shrink: 0;
}

.res-grade-ring svg {
  transform: rotate(-90deg);
}

.res-grade-text {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.res-pct {
  font-family: var(--font-d);
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1;
}

.res-emoji {
  font-size: 1rem;
}

.res-titles {
  flex: 1;
  min-width: 0;
}

.res-title {
  font-family: var(--font-d);
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: -.03em;
  margin-bottom: 4px;
}

.res-sub {
  font-size: .82rem;
  color: var(--txt2);
  line-height: 1.5;
}

.res-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 24px;
}

.res-stat {
  padding: 12px 8px;
  border-radius: var(--r);
  border: 1px solid var(--border);
  background: var(--surface);
  text-align: center;
}

.res-stat-v {
  font-family: var(--font-m);
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1;
  margin-bottom: 4px;
}

.res-stat-l {
  font-size: .58rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--txt3);
}

.res-stat.rs-ok .res-stat-v {
  color: var(--ok);
}

.res-stat.rs-err .res-stat-v {
  color: var(--err);
}

.res-stat.rs-str .res-stat-v {
  color: var(--warn);
}

.res-stat.rs-skip .res-stat-v {
  color: var(--txt2);
}

.res-section-label {
  font-family: var(--font-m);
  font-size: .58rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--txt3);
  margin-bottom: 8px;
}

.perf-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
}

.perf-row:last-child {
  border-bottom: none;
}

.perf-lbl {
  font-size: .76rem;
  color: var(--txt2);
  flex: 1.2;
  font-weight: 500;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.perf-track {
  flex: 2;
  height: 4px;
  background: var(--surface3);
  border-radius: 100px;
  overflow: hidden;
  min-width: 40px;
}

.perf-bar {
  height: 100%;
  border-radius: 100px;
  transition: width .6s ease;
}

.perf-ct {
  font-family: var(--font-m);
  font-size: .65rem;
  color: var(--txt3);
  min-width: 32px;
  text-align: right;
}

.divider {
  height: 1px;
  background: var(--border);
  margin: 18px 0;
}

.rev-toggle-btn {
  background: none;
  border: none;
  color: var(--azure2);
  font-size: .78rem;
  font-weight: 600;
  font-family: var(--font-d);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  display: block;
  margin-bottom: 10px;
  padding: 4px 0;
  -webkit-tap-highlight-color: transparent;
}

.answer-review {
  display: none;
  margin-bottom: 14px;
}

.answer-review.show {
  display: block;
}

.rev-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 10px;
  border-radius: var(--r2);
  margin-bottom: 4px;
  font-size: .75rem;
  line-height: 1.45;
}

.rev-item.ri-ok {
  background: rgba(16, 185, 129, .07);
  border: 1px solid rgba(16, 185, 129, .2);
}

.rev-item.ri-err {
  background: rgba(239, 68, 68, .07);
  border: 1px solid rgba(239, 68, 68, .18);
}

.rev-icon {
  flex-shrink: 0;
  font-size: .85rem;
  margin-top: 1px;
}

.rev-q {
  color: var(--txt2);
  flex: 1;
  min-width: 0;
}

.rev-q strong {
  color: var(--txt);
  display: block;
  margin-bottom: 1px;
  font-weight: 600;
  font-size: .78rem;
}

.rev-type-tag {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 100px;
  font-family: var(--font-m);
  font-size: .55rem;
  background: var(--surface3);
  color: var(--txt3);
  margin-left: 4px;
  vertical-align: middle;
}

.res-actions {
  display: flex;
  gap: 12px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.res-actions .btn-skip,
.res-actions .btn-next {
  flex: 1;
  min-width: 120px;
  justify-content: center;
  text-align: center;
}

/* ── SHARED SUBMIT BTN ─────────────────────── */
.inline-submit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  border-radius: var(--r2);
  border: 1.5px solid var(--border2);
  background: var(--surface2);
  color: var(--txt2);
  font-size: .8rem;
  font-weight: 600;
  font-family: var(--font-d);
  cursor: pointer;
  transition: all .2s cubic-bezier(0.4, 0, 0.2, 1);
  margin-top: 12px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  -webkit-tap-highlight-color: transparent;
}

.inline-submit:hover {
  background: var(--surface3);
  color: var(--txt);
  border-color: var(--azure2);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
  transform: translateY(-1px);
}

.inline-submit:disabled {
  opacity: .4;
  cursor: not-allowed;
}

/* ── MOBILE ────────────────────────────────── */
.menu-btn {
  display: none;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--txt2);
  font-size: 20px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 0;
  line-height: 1;
}

.menu-btn:hover {
  border-color: var(--border2);
  color: var(--txt);
  background: var(--surface3);
}

.menu-btn:active {
  transform: scale(0.95);
}

.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 99;
  opacity: 0;
  transition: opacity 0.3s ease;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.sidebar-overlay.show {
  display: block;
  opacity: 1;
}

/* No questions error */
.no-banks-msg {
  text-align: center;
  padding: 40px 20px;
  color: var(--txt3);
  font-family: var(--font-d);
}

.no-banks-msg .nb-icon {
  font-size: 2.5rem;
  margin-bottom: 12px;
}

.no-banks-msg p {
  font-size: .85rem;
  line-height: 1.6;
}

/* ── REVIEW LINKS (wrong answer suggestions) ──────── */
.review-links {
  border-top: 1px solid var(--border);
  padding: 12px 14px;
  background: rgba(37, 99, 235, .04);
}

[data-theme="light"] .review-links {
  background: rgba(29, 78, 216, .04);
}

.review-links-head {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-d);
  font-size: .7rem;
  font-weight: 700;
  color: var(--txt3);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 8px;
}

.review-links-head .rl-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--azure2);
  flex-shrink: 0;
}

.review-link-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.review-link-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: var(--r2);
  border: 1px solid var(--border);
  background: var(--surface);
  text-decoration: none;
  color: var(--txt);
  font-size: .78rem;
  font-weight: 500;
  font-family: var(--font-b);
  transition: all .15s;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.review-link-item:hover {
  border-color: var(--azure2);
  background: var(--surface2);
  color: var(--azure2);
}

.review-link-item:hover .rli-arrow {
  transform: translateX(3px);
  color: var(--azure2);
}

.rli-icon {
  font-size: .9rem;
  flex-shrink: 0;
}

.rli-text {
  flex: 1;
  line-height: 1.3;
  min-width: 0;
}

.rli-source {
  display: block;
  font-size: .6rem;
  font-family: var(--font-m);
  color: var(--txt3);
  margin-top: 1px;
}

.rli-arrow {
  font-size: .7rem;
  color: var(--txt3);
  flex-shrink: 0;
  transition: transform .15s, color .15s;
}

/* ==========================
   Footer
========================== */

.creator {
  margin-top: 10px;
  font-size: .7rem;
  color: var(--txt3);
  line-height: 1.5;
}

.creator a {
  color: var(--azure2);
  text-decoration: none;
}

.creator a:hover {
  text-decoration: underline;
}

/* ═══════════════════════════════════════════════
   RESPONSIVE BREAKPOINTS
═══════════════════════════════════════════════ */

/* Tablets and smaller desktops */
@media (max-width: 1024px) {
  :root {
    --sidebar-w: 340px;
  }
}

/* Mobile styles */
@media (max-width: 1024px) {
  .sidebar-close-btn {
    display: flex;
  }

  #app {
    position: relative;
  }

  #sidebar {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    transform: translateX(-100%);
    width: 85vw;
    max-width: 340px;
    min-width: unset;
    box-shadow: 4px 0 30px rgba(0, 0, 0, 0.5);
    border-right: none;
    border-radius: 0 16px 16px 0;
    z-index: 100;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    height: 100vh;
    flex-shrink: 0;
  }

  #sidebar.open {
    transform: translateX(0);
  }

  .menu-btn {
    display: flex;
  }

  #main {
    width: 100vw;
    flex: 1;
  }

  .topbar {
    padding: 0 12px;
    gap: 6px;
  }

  .topbar-qtype {
    font-size: 0.6rem;
    padding: 4px 8px;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .topbar-bank {
    display: none;
    /* max-width: 120px; */
  }

  .hint-pill {
    font-size: 0.58rem;
    padding: 4px 8px;
  }

  .q-stage {
    padding: 16px 12px 10px;
    gap: 12px;
  }

  .action-bar {
    padding: 10px 12px;
    gap: 6px;
  }

  #screen-start {
    padding: 24px 16px;
  }

  .start-title {
    font-size: 1.6rem;
  }

  .start-desc {
    font-size: 0.82rem;
  }

  .qtype-pill-show {
    font-size: 0.6rem;
    padding: 4px 8px;
  }

  .start-cta {
    padding: 12px 24px;
    font-size: 0.85rem;
    max-width: 100%;
  }

  #screen-results {
    padding: 24px 16px;
  }

  .res-top {
    gap: 14px;
    flex-wrap: wrap;
  }

  .res-grade-ring {
    width: 100px;
    height: 100px;
  }

  .res-pct {
    font-size: 1.1rem;
  }

  .res-title {
    font-size: 1.1rem;
  }

  .res-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
  }

  .res-stat {
    padding: 10px 6px;
  }

  .res-stat-v {
    font-size: 1rem;
  }

  .match-layout {
    grid-template-columns: 1fr;
  }

  .opt-btn {
    padding: 12px 12px;
    font-size: 0.8rem;
  }

  .match-item {
    padding: 8px 10px;
    font-size: 0.74rem;
    min-height: 38px;
  }

  .drag-row {
    padding: 9px 10px;
    gap: 8px;
  }

  .drag-text {
    font-size: 0.76rem;
  }

  .inline-submit {
    padding: 8px 14px;
    font-size: 0.76rem;
    width: 100%;
    justify-content: center;
  }

  .res-actions {
    flex-direction: column;
  }

  .res-actions .btn-skip,
  .res-actions .btn-next {
    width: 100%;
    min-width: unset;
    justify-content: center;
  }

  .sidebar-body {
    padding: 12px 14px;
    max-height: 420px;
    overflow-y: auto;
    height: 100%;
  }

  .ring-zone {
    padding: 16px 14px 12px;
  }

  .ring-wrap {
    width: 100px;
    height: 100px;
  }

  .ring-num {
    font-size: 1.4rem;
  }

  .ring-denom {
    font-size: 0.6rem;
  }

  .ring-label {
    font-size: 0.6rem;
  }

  .score-strip .score-val {
    font-size: 0.95rem;
  }

  .score-strip .score-lbl {
    font-size: 0.55rem;
  }

  .sidebar-header {
    padding: 8px 12px;
  }

  .brand-name {
    font-size: 0.8rem;
  }

  .brand-sub {
    font-size: 0.55rem;
    margin-left: 34px;
  }

  .brand-icon {
    width: 28px;
    height: 28px;
    font-size: 14px;
  }

  .sidebar-footer {
    /* padding: 10px 14px;
    margin-top: auto;
    position: fixed;
    bottom: 0;
    width: 100%;
    background: var(--border); */
  }

  .score-pct {
    font-size: 0.7rem;
  }

  .bank-chip {
    padding: 8px 10px;
    font-size: 0.72rem;
  }

  .type-toggle {
    padding: 5px 8px;
    font-size: 0.7rem;
  }

  .expln-header {
    padding: 10px 12px;
    font-size: 0.76rem;
  }

  .expln-body {
    padding: 10px 12px;
    font-size: 0.78rem;
  }

  .analogy-row {
    padding: 8px 12px;
    font-size: 0.74rem;
  }

  .review-link-item {
    padding: 7px 10px;
    font-size: 0.74rem;
  }

  /* Improved readability on mobile */
  .q-text {
    font-size: 0.8rem;
    line-height: 1.6;
  }

  .q-instruction {
    font-size: 0.7rem;
  }

  .q-type-stripe {
    font-size: 0.48rem;
  }
}

@media (max-width: 640px) {
  /* .sidebar-body {
    flex: none;
    height: 250px;
  } */

  .bank-chip,
  .creator,
  .score-pct-label {
    font-size: 0.55rem;
  }

  .opts-grid span {
    font-size: 0.65rem;
  }

}

/* Very small phones */
@media (max-width: 420px) {
  .sidebar-close-btn {
    width: 32px;
    height: 32px;
    font-size: 16px;
    top: 10px;
    right: 10px;
  }

  #sidebar {
    width: 88vw;
    max-width: 320px;
  }

  .topbar-qtype {
    font-size: 0.6rem;
    padding: 3px 6px;
    max-width: 70px;
  }

  .results-wrap #streak-display {
    gap: 6px !important;
    padding: 2px 6px !important;
  }

  .sidebar-footer {
    /* padding: 4px 12px;
    margin-top: auto;
    position: fixed;
    bottom: 0;
    width: 100%;
    background: var(--border); */
  }

  .hint-pill {
    font-size: 0.5rem;
    padding: 3px 6px;
  }

  .q-text {
    font-size: 0.72rem;
  }

  .q-stage {
    padding: 12px 10px 8px;
  }

  .opt-btn {
    padding: 10px 10px;
    font-size: 0.76rem;
    gap: 8px;
  }

  .opt-key {
    width: 20px;
    height: 20px;
    font-size: 0.55rem;
  }

  .btn-skip {
    padding: 6px 10px;
    font-size: 0.7rem;
  }

  .btn-next {
    padding: 7px 14px;
    font-size: 0.72rem;
  }

  .res-stats {
    grid-template-columns: 1fr 1fr;
    gap: 4px;
  }

  .res-stat {
    padding: 8px 4px;
  }

  .res-stat-v {
    font-size: 0.9rem;
  }

  .res-stat-l {
    font-size: 0.5rem;
  }

  .q-type-stripe {
    font-size: 0.5rem;
    padding: 2px 6px 2px 5px;
  }

  .ring-wrap {
    width: 80px;
    height: 80px;
  }

  .ring-num {
    font-size: 1.1rem;
  }

  .ring-denom {
    font-size: 0.55rem;
  }

  .start-title {
    font-size: 1.5rem;
  }

  .start-desc {
    font-size: 0.8rem;
  }

  .match-item {
    font-size: 0.7rem;
    padding: 7px 8px;
    min-height: 34px;
  }

  .drag-text {
    font-size: 0.7rem;
  }

  .drag-row {
    padding: 7px 8px;
    gap: 6px;
  }

  .drag-rank {
    width: 18px;
    height: 18px;
    font-size: 0.5rem;
  }

  .drag-handle {
    font-size: 0.7rem;
  }
}

/* ===================================
   Accessibility and App Shell Polish
=================================== */
body { min-height: 100dvh; }
.sr-only { position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }
.skip-link { position:fixed;left:1rem;top:-5rem;z-index:100;padding:.75rem 1rem;border-radius:.5rem;background:var(--azure);color:#fff; }
.skip-link:focus { top:1rem; }
:where(button,a,input,[tabindex]):focus-visible { outline:3px solid var(--sky);outline-offset:3px; }
.continue-card { width:min(100%,620px);margin:1.25rem auto;padding:1rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;text-align:left;border:1px solid var(--border2);border-radius:var(--r);background:var(--surface2);box-shadow:var(--shadow-elevated); }
.continue-card[hidden],.update-prompt[hidden] { display:none; }
.continue-card p { color:var(--txt2);margin-top:.25rem;font-size:.85rem; }
.mobile-nav { display:none; }
.toast { position:fixed;z-index:var(--z-toast);left:50%;bottom:1.25rem;max-width:min(90vw,520px);padding:.75rem 1rem;border:1px solid var(--border2);border-radius:999px;background:var(--surface);color:var(--txt);box-shadow:var(--shadow-elevated);opacity:0;transform:translate(-50%,1rem);pointer-events:none;transition:opacity var(--transition-normal),transform var(--transition-normal); }
.toast.show { opacity:1;transform:translate(-50%,0); }
.update-prompt { position:fixed;z-index:var(--z-toast);right:1rem;bottom:1rem;display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem;border:1px solid var(--border2);border-radius:var(--r2);background:var(--surface);box-shadow:var(--shadow-elevated); }
.update-prompt button,.drag-move button { min-width:44px;min-height:44px;border:1px solid var(--border2);border-radius:8px;background:var(--surface2);color:var(--txt); }
.drag-move { display:flex;gap:.35rem;margin-left:auto; }

@media (max-width:768px) {
  body { padding-bottom:calc(68px + env(safe-area-inset-bottom)); }
  #app { min-height:calc(100dvh - 68px); }
  .content-area { padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right)); }
  .topbar { padding-top:env(safe-area-inset-top); }
  .action-bar { 
    bottom: 0;
    padding-bottom:.75rem;
  }
  #screen-quiz .q-stage {
    padding-bottom:calc(116px + env(safe-area-inset-bottom));
  }
  .mobile-nav { position:fixed;z-index:var(--z-nav);inset:auto 0 0;display:grid;grid-template-columns:repeat(3,1fr);min-height:calc(64px + env(safe-area-inset-bottom));padding:5px max(8px,env(safe-area-inset-right)) env(safe-area-inset-bottom) max(8px,env(safe-area-inset-left));border-top:1px solid var(--border);background:var(--surface); }
  .mobile-nav button { min-height:54px;border:0;background:transparent;color:var(--txt2);display:grid;place-content:center;gap:2px; }
  .mobile-nav button span { font-size:1.15rem; }
  .continue-card { flex-direction:column;align-items:stretch; }
  .toast { bottom:calc(78px + env(safe-area-inset-bottom)); }
  .update-prompt { left:.75rem;right:.75rem;bottom:calc(76px + env(safe-area-inset-bottom)); }
}
@media (max-width:420px) {
  .action-bar button { min-width:44px;min-height:44px;padding-inline:.7rem; }
  .drag-row { flex-wrap:wrap; }
  .drag-move { width:100%;justify-content:flex-end; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important; } }
@media (prefers-contrast:more) { :root { --border:#74849a;--border2:#9aa8ba; } }

/* ===================================
   Premium 24px Icon System
=================================== */
.svg-sprite { position:absolute;width:0;height:0;overflow:hidden; }
svg:not(#progress-ring):not(.res-grade-ring svg) { width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round; }
.icon-btn { display:inline-grid;place-items:center; }
.icon-btn svg { pointer-events:none; }
.brand-icon svg { width:20px;height:20px;stroke-width:2; }
.hint-pill svg { width:18px!important;height:18px!important; }
.mobile-nav svg { width:22px!important;height:22px!important;margin:auto; }
.ci { display:inline-block;width:20px;height:20px;flex:0 0 auto;background:currentColor;mask:var(--ci) center/contain no-repeat;-webkit-mask:var(--ci) center/contain no-repeat; }
.ci-cloud{--ci:url('../icons/coolicons/cloud.png')}.ci-menu{--ci:url('../icons/coolicons/menu.png')}.ci-close{--ci:url('../icons/coolicons/close.png')}.ci-moon{--ci:url('../icons/coolicons/moon.png')}.ci-sun{--ci:url('../icons/coolicons/sun.png')}.ci-bulb{--ci:url('../icons/coolicons/bulb.png')}.ci-home{--ci:url('../icons/coolicons/home.png')}.ci-practice{--ci:url('../icons/coolicons/practice.png')}.ci-settings{--ci:url('../icons/coolicons/settings.png')}.ci-check{--ci:url('../icons/coolicons/check.png')}.ci-mcq{--ci:url('../icons/coolicons/check.png')}.ci-multi{--ci:url('../icons/coolicons/multi.png')}.ci-fill{--ci:url('../icons/coolicons/fill.png')}.ci-match{--ci:url('../icons/coolicons/match.png')}.ci-drag{--ci:url('../icons/coolicons/drag.png')}.ci-exit{--ci:url('../icons/coolicons/exit.png')}.ci-next{--ci:url('../icons/coolicons/next.png')}
.brand-icon .ci { width:21px;height:21px;color:#fff; }
.type-toggle .ci { width:16px;height:16px;color:var(--type-color,var(--azure2)); }
.type-toggle[data-t="mcq"]{--type-color:var(--t-mcq)}.type-toggle[data-t="multi"]{--type-color:var(--t-multi)}.type-toggle[data-t="fill"]{--type-color:var(--t-fill)}.type-toggle[data-t="match"]{--type-color:var(--t-match)}.type-toggle[data-t="drag"]{--type-color:var(--t-drag)}
.q-type-stripe .ci { width:15px;height:15px; }
.hint-pill .ci { width:17px;height:17px; }
.mobile-nav .ci { width:22px;height:22px;margin:auto; }

/* ===================================
   Modern Fluent Surface Refresh
=================================== */
:root {
  --bg:#0d1114;
  --surface:#151a1e;
  --surface2:#1a2024;
  --surface3:#20272c;
  --border:#293137;
  --border2:#374149;
  --txt:#f7f8f8;
  --txt2:#b5bdc2;
  --txt3:#7e8990;
  --azure:#168eea;
  --azure2:#42a5f5;
  --sky:#74c6ff;
  --sidebar-w:320px;
  --r:18px;
  --r2:12px;
  --shadow-elevated:0 24px 70px rgba(0,0,0,.32);
}
[data-theme="light"] { --bg:#f2f5f7;--surface:#fff;--surface2:#f7f9fa;--surface3:#edf1f3;--border:#dce2e6;--border2:#c8d0d5;--txt:#11171b;--txt2:#465159;--txt3:#68747c; }
body { background:radial-gradient(circle at 75% 5%,rgba(22,142,234,.08),transparent 34%),var(--bg); }
#sidebar { background:linear-gradient(180deg,color-mix(in srgb,var(--surface) 96%,var(--azure) 4%),var(--surface));border-color:var(--border);box-shadow:12px 0 45px rgba(0,0,0,.14); }
.brand-icon { background:linear-gradient(145deg,var(--azure2),#1264d6);border:1px solid rgba(255,255,255,.16);box-shadow:0 8px 24px rgba(22,142,234,.24); }
.topbar { background:color-mix(in srgb,var(--surface) 88%,transparent);border-color:var(--border);backdrop-filter:blur(18px); }
.menu-btn,.theme-btn,.sidebar-close-btn { border:1px solid var(--border);background:linear-gradient(145deg,var(--surface3),var(--surface2));color:var(--txt2);box-shadow:inset 0 1px rgba(255,255,255,.04),0 6px 18px rgba(0,0,0,.12);transition:color var(--transition-fast),border-color var(--transition-fast),transform var(--transition-fast),background var(--transition-fast); }
.menu-btn:hover,.theme-btn:hover,.sidebar-close-btn:hover { color:var(--txt);border-color:var(--azure2);background:color-mix(in srgb,var(--surface3) 88%,var(--azure) 12%);transform:translateY(-1px); }
.q-panel,.results-wrap { border:1px solid var(--border);border-radius:24px;background:linear-gradient(145deg,color-mix(in srgb,var(--surface) 97%,white 3%),var(--surface));box-shadow:inset 0 1px rgba(255,255,255,.035),var(--shadow-elevated); }
.q-stage,.results-wrap { width:min(100%,1120px);margin-inline:auto; padding: 14px 18px;}
.q-panel { padding:clamp(22px,3vw,40px); }
.q-text { font-size:clamp(1.2rem,1.7vw,1.65rem);line-height:1.4;letter-spacing:-.025em; }
.opts-grid { gap:12px; }
.opt-btn { min-height:64px;padding:15px 18px;font-size:.96rem; }
.q-eyebrow { margin-bottom:18px; }
.q-type-stripe { gap:7px;letter-spacing:.06em; }
.content-area { background:radial-gradient(circle at 50% 0,rgba(22,142,234,.055),transparent 32%); }
.sidebar-header { padding:22px 18px 18px; }
.ring-zone { padding:20px 16px 14px; }
.ring-wrap { width:122px;height:122px; }
.sidebar-body { padding:18px 14px; }
.bank-chip,.type-toggle { min-height:42px;padding:9px 11px; }
.sidebar-footer { padding:14px 16px; }
.opt-btn,.match-item,.drag-row,.type-toggle,.bank-chip { border-color:var(--border);background:linear-gradient(145deg,var(--surface2),color-mix(in srgb,var(--surface2) 94%,black 6%));box-shadow:inset 0 1px rgba(255,255,255,.025);transition:transform var(--transition-fast),border-color var(--transition-fast),background var(--transition-fast),box-shadow var(--transition-fast); }
.opt-btn:hover,.match-item:hover,.drag-row:hover,.type-toggle:hover,.bank-chip:hover { transform:translateY(-1px);border-color:var(--border2);box-shadow:inset 0 1px rgba(255,255,255,.05),0 10px 25px rgba(0,0,0,.12); }
.start-cta,.btn-next,.inline-submit { border:1px solid rgba(255,255,255,.14);background:linear-gradient(135deg,#249ef5,#1267db);box-shadow:0 10px 28px rgba(22,142,234,.25),inset 0 1px rgba(255,255,255,.22); }
.start-cta:hover,.btn-next:hover,.inline-submit:hover { transform:translateY(-2px);box-shadow:0 14px 34px rgba(22,142,234,.32),inset 0 1px rgba(255,255,255,.24); }
.hint-pill { gap:7px;border:1px solid var(--border);background:var(--surface2);color:var(--txt2); }
.score-cell,.session-streak-bar { background:transparent!important; }
.mobile-nav button { border-radius:12px;transition:color var(--transition-fast),background var(--transition-fast); }
.mobile-nav button:hover,.mobile-nav button:focus-visible { color:var(--azure2);background:rgba(22,142,234,.1); }
@media (max-width:768px) { .mobile-nav { background:color-mix(in srgb,var(--surface) 94%,transparent);backdrop-filter:blur(20px);box-shadow:0 -12px 35px rgba(0,0,0,.18); } .q-panel,.results-wrap { border-radius:18px; } }
@media (min-width:1440px) { :root{--sidebar-w:336px}.content-area{padding-inline:clamp(28px,5vw,84px)} }

/* ===================================
   Sidebar Toggle and Legacy Mobile
=================================== */
@media (min-width:1025px) {
  .sidebar-close-btn { display:flex; }
  .menu-btn { display:none; }
  body.sidebar-collapsed .menu-btn { display:grid; }
  #sidebar,#main { transition:margin-left var(--transition-normal),width var(--transition-normal),transform var(--transition-normal); }
  body.sidebar-collapsed #sidebar { margin-left:calc(-1 * var(--sidebar-w));transform:translateX(-100%);visibility:hidden; }
  body.sidebar-collapsed #main { width:100vw; }
}
.btn-end { display:inline-flex;align-items:center;gap:7px; }
.btn-end .ci,.btn-next .ci { width:17px;height:17px; }

/* Fallbacks are declared before newer viewport and safe-area enhancements. */
@media (max-width:768px) {
  body { padding-bottom:68px; }
  #app { min-height:calc(100vh - 68px); }
  #sidebar { height:100vh; }
  .action-bar { bottom:68px; }
  #screen-quiz .q-stage { padding-bottom:116px; }
  .mobile-nav { min-height:64px;padding-bottom:0; }
  @supports (height:100dvh) { #app { min-height:calc(100dvh - 68px); } #sidebar { height:100dvh; } }
  @supports (padding-bottom:env(safe-area-inset-bottom)) {
    body { padding-bottom:calc(68px + env(safe-area-inset-bottom)); }
    .action-bar { 
      bottom: 0;
     }
    #screen-quiz .q-stage { padding-bottom:calc(116px + env(safe-area-inset-bottom)); }
    .mobile-nav { min-height:calc(64px + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom); }
  }
}
@media (max-width:360px) {
  .topbar { min-height:52px;height:52px;padding-inline:8px; }
  .hint-pill span:last-child { display:none; }
  .q-stage { padding:10px 8px 90px; }
  .q-panel { padding:16px 12px; }
  .q-text { font-size:1.05rem; }
  .opt-btn { min-height:52px;padding:11px 10px;font-size:.86rem; }
  .action-bar { padding:8px;flex-wrap:nowrap; }
  .action-bar-left { flex-wrap:nowrap; }
  .btn-end span:last-child { font-size:0; }
  .btn-end span:last-child::after { content:'End';font-size:.78rem; }
  .btn-skip,.btn-next { min-height:44px;padding-inline:10px; }
}

/* ===================================
   Results Summary UX
=================================== */
.res-emoji { display:none; }
.res-stats { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:20px 0; }
.res-stat { min-height:78px;border:1px solid var(--border);border-radius:14px;background:var(--surface2);display:flex;flex-direction:column;align-items:center;justify-content:center; }
.study-summary { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0 0 24px; }
.study-summary div { display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:72px;border:1px solid var(--border);border-radius:14px;background:color-mix(in srgb,var(--surface2) 94%,var(--azure) 6%);text-align:center; }
.study-summary strong { color:var(--txt);font-size:1.25rem;line-height:1; }
.study-summary span { margin-top:7px;color:var(--txt3);font-size:.65rem;text-transform:uppercase;letter-spacing:.07em; }
.btn-skip:disabled { opacity:.42;cursor:not-allowed; }
.res-actions { position:sticky;bottom:-1px;padding-top:14px;background:linear-gradient(transparent,var(--surface) 28%); }
@media (max-width:640px) {
  .res-stats { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .study-summary { grid-template-columns:repeat(3,minmax(0,1fr));gap:6px; }
  .study-summary div { min-height:66px;padding:6px 3px; }
  .study-summary span { font-size:.56rem; }
  .res-actions { grid-template-columns:1fr;display:grid; }
  .res-actions button { width:100%;justify-content:center; }
}