/* Ported from app/src/main/java/.../ui/theme/Color.kt, QuizThemeColors.kt, and the
   actual component styles in LoginScreen.kt / QuizPreviewScreen.kt / ResultScreen.kt —
   keep these in sync if those change. */
:root {
  --primary: #5B4FE8;
  --primary-container: #E0E7FF;
  --background: #F7F8FA;
  --surface: #FFFFFF;
  --text-primary: #1C1B1F;
  --text-secondary: #6B6880;
  --icon-gray: #9CA3AF;
  --divider: #F0EFF8;
  --border-light: #E0E0F5;
  --success: #22C55E;
  --success-bg: #ECFDF5;
  --error: #EF4444;
  --error-bg: #FEF2F2;
  /* Manual marking: an answer nobody has judged yet is neither green nor red. */
  --pending: #B08900;
  --pending-bg: #FFF8E1;
  --timer-track: #E8E7F8;
  /* Per-quiz accent — set inline once a quiz loads, via QUIZ_THEME_COLORS. */
  --accent: var(--primary);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  /* Dotted paper background behind every screen (the shared page chrome). */
  background-color: #F4F5F9;
  background-image: radial-gradient(#D3D5E2 1.1px, transparent 1.1px);
  background-size: 22px 22px;
  color: var(--text-primary);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
button, input, textarea { font-family: inherit; }

/* ── Shared shell: header / main / footer on every screen ─────────────────
   One full-width column: the brand header pinned on top, the screen's content
   centered in the middle, the version/legal footer at the bottom. */
#app {
  /* 100vh on mobile Chrome/Safari is measured against the LARGEST possible viewport
     (toolbar collapsed) even on first paint, while the toolbar is still expanded — so
     the actual visible area starts shorter than #app claims, cutting the top of the
     landing card off until the page is scrolled and the browser recalculates. 100dvh
     tracks the real, current viewport instead; vh stays as the fallback for browsers
     that don't support dvh yet. */
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.site-header {
  height: 60px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 16px;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid #E6E7EF;
}
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.brand-tile {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(91, 79, 232, 0.28);
}
.brand-icon { width: 100%; height: 100%; object-fit: cover; }
.brand-name { font-size: 18px; font-weight: 800; letter-spacing: -0.3px; color: #1C1B2E; }

.status-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid #E6E7EF;
  background: #fff;
  font-size: 12px;
  font-weight: 600;
  color: #3F3D56;
  white-space: nowrap;
}
.status-chip.small { height: 24px; padding: 0 10px; font-size: 11px; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18); }

.site-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 24px 16px;
}

.site-footer {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  padding: 14px 16px;
  font-size: 12px;
  color: var(--text-secondary);
}
.footer-links { display: flex; gap: 14px; }
.footer-links a { color: var(--primary); text-decoration: none; font-weight: 500; }
.footer-links a:hover { text-decoration: underline; }

@media (min-width: 640px) {
  .site-header { padding: 0 32px; }
  .site-main { padding: 40px 24px; }
  .site-footer { padding: 16px 32px; }
}
@media (max-width: 380px) {
  .site-footer { flex-direction: column; justify-content: center; }
}

.screen {
  width: 100%;
  max-width: 480px;
  display: flex;
  flex-direction: column;
  padding: 0;
  gap: 18px;
}
.screen.centered { flex: 1; align-items: center; justify-content: center; text-align: center; }
/* Follows directly after the top bar/progress bar in the quiz flow — a little
   breathing room, not the full top padding (would double up on the bar above). */
.screen.no-pad-top { padding-top: 18px; }
/* A single card in the middle of the page (enter code / landing / confirm name). */
.screen.card-screen { max-width: 420px; align-items: center; gap: 16px; }

.card {
  position: relative;
  width: 100%;
  background: var(--surface);
  border-radius: 24px;
  padding: 30px 26px 26px;
  box-shadow: 0 18px 50px rgba(30, 30, 60, 0.10), 0 1px 3px rgba(30, 30, 60, 0.05);
  overflow: hidden;
  /* A plain <input>/<button> carries no default margin the way a <p> does, so without
     this, elements like the name field and its Confirm button on renderConfirmName sat
     flush against each other with zero gap. */
  display: flex;
  flex-direction: column;
  gap: 14px;
}
/* The gradient rule along the card's top edge. */
.card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 5px;
  background: linear-gradient(90deg, #5B4FE8 0%, #8B5CF6 100%);
}
.card.enter-code-card::before { background: linear-gradient(90deg, #5B4FE8 0%, #EC4899 100%); }
@media (max-width: 480px) {
  .card { padding: 26px 20px 22px; border-radius: 22px; }
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  border-radius: 100px;
  padding: 5px 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
}
.pill.dotted::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.pill.centered { align-self: center; }
.centered { text-align: center; }
.quiz-meta.centered, .quiz-title.centered { align-self: center; }

.quiz-title { font-size: 24px; font-weight: 800; margin: 2px 0 0; letter-spacing: -0.4px; line-height: 1.2; color: #1C1B2E; }
.quiz-title .title-count { color: inherit; }
.quiz-meta { font-size: 14px; color: var(--text-secondary); line-height: 1.55; margin: 0; }

/* Kicker + question-count chip on one line (signed-out landing card). */
.kicker-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.meta-chips { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.meta-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 26px;
  padding: 0 10px;
  border-radius: 8px;
  background: #F3F4F8;
  color: #4B5563;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.meta-chip.plain { border-radius: 999px; height: 28px; padding: 0 12px; }

/* Lavender "QUICK JOIN … Session Ready" strip at the top of the signed-in card. */
.session-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 8px 8px 14px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 8%, #fff);
}
.session-kicker { font-size: 11px; font-weight: 700; letter-spacing: 0.6px; color: var(--accent); }

/* Info box on the signed-out card ("Sign in with Google to take this quiz…"). */
.info-box {
  display: flex;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 14px;
  background: #F6F7FC;
  border: 1px solid #ECEDF5;
  color: #3F3D56;
  font-size: 13.5px;
  line-height: 1.5;
}
.info-box svg { flex-shrink: 0; margin-top: 1px; color: var(--accent); }

/* "Session: 6 Questions        v1.0 (build 64)" — the monospace card footer. */
.card-meta-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--divider);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  color: var(--text-secondary);
}

/* "SIGNED IN AS" account box. */
.signed-in-box {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  background: #F8F8FC;
  border: 1px solid #ECEDF5;
}
.avatar {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
}
.avatar-dot {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--success);
  border: 2px solid #fff;
}
.signed-in-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.overline { font-size: 10px; font-weight: 700; letter-spacing: 0.8px; color: var(--icon-gray); }
.signed-in-name { font-size: 15px; font-weight: 700; color: #1C1B2E; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Confirm-name card. */
.title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.title-badge {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  box-shadow: 0 6px 14px color-mix(in srgb, var(--accent) 30%, transparent);
}
.field-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 4px; }
.field-label { font-size: 11px; font-weight: 700; letter-spacing: 0.7px; color: #4B5563; }
.field-label.centered { align-self: center; }
.field-counter { font-size: 12px; color: var(--icon-gray); font-variant-numeric: tabular-nums; }
.name-field {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 54px;
  padding: 0 12px 0 14px;
  border-radius: 14px;
  border: 1.5px solid var(--border-light);
  background: #fff;
  color: var(--icon-gray);
}
.name-field:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent); }
/* Beats the generic input[type="text"] rule further down (attribute + element
   selector) — the frame is drawn by .name-field, the input itself stays bare. */
.name-field input[type="text"] {
  flex: 1;
  min-width: 0;
  width: auto;
  height: 100%;
  border: none;
  border-radius: 0;
  outline: none;
  background: transparent;
  font-size: 15px;
  font-weight: 600;
  color: #1C1B2E;
  padding: 0;
}
.name-field input[type="text"]:focus { border: none; }
.code-boxes input[type="text"].code-box { width: 48px; padding: 0; }
@media (max-width: 400px) { .code-boxes input[type="text"].code-box { width: 42px; } }
.field-clear {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--icon-gray);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.field-clear:hover { background: #F3F4F8; color: var(--text-primary); }
.field-helper { display: flex; align-items: center; gap: 6px; font-size: 12px; margin: -6px 0 0; color: var(--text-secondary); }
.field-helper.synced { color: #16A34A; }
.field-hint { font-size: 12px; color: var(--icon-gray); margin: -4px 0 0; line-height: 1.5; }
.field-error { font-size: 13px; color: var(--error); margin: -6px 0 0; text-align: center; }

/* Enter-code card: six one-character boxes. */
.code-boxes { display: flex; justify-content: center; gap: 10px; }
.code-box {
  width: 48px;
  height: 56px;
  border-radius: 12px;
  border: 1.5px solid var(--border-light);
  background: #F7F8FB;
  text-align: center;
  font-size: 22px;
  font-weight: 800;
  color: #1C1B2E;
  outline: none;
  padding: 0;
  caret-color: var(--accent);
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.code-box::placeholder { color: #C7C9D9; font-weight: 700; }
.code-box.filled { background: #F0F1F7; }
.code-box:focus { border-color: var(--accent); background: #fff; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent); }
@media (max-width: 400px) {
  .code-boxes { gap: 8px; }
  .code-box { width: 42px; height: 52px; font-size: 20px; }
}
.paste-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  align-self: center;
  height: 40px;
  padding: 0 18px;
  border-radius: 10px;
  border: 1px solid var(--border-light);
  background: #fff;
  color: #3F3D56;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.paste-btn:hover { background: #F7F8FB; }
.card-footnote {
  margin: 10px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--divider);
  font-size: 12px;
  color: var(--icon-gray);
  text-align: center;
}

/* ── Buttons ──────────────────────────────────────────────────────────── */

button { font-family: inherit; }

button.primary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 14px;
  min-height: 54px;
  padding: 14px 20px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  width: 100%;
  margin-top: 4px;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--accent) 28%, transparent);
}
button.primary:disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; }
button.primary:active:not(:disabled) { transform: scale(0.98); }
button.primary .btn-chevron { flex-shrink: 0; }

/* Paired with .primary when a landing card offers two actions (e.g. "See Result" /
   "Retake Exam") — same shape, outlined instead of filled so it reads as secondary. */
button.secondary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: transparent;
  color: var(--accent);
  border: 1.5px solid var(--accent);
  border-radius: 14px;
  min-height: 52px;
  padding: 12.5px 20px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  width: 100%;
  margin-top: 0;
}
button.secondary:disabled { opacity: 0.5; cursor: not-allowed; }
button.secondary:active:not(:disabled) { transform: scale(0.98); }

/* Real-app treatment (LoginScreen.kt's GoogleSignInButton): white surface, soft
   border+shadow, official 4-color "G" glyph — not a plain grey text button. */
button.google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: #fff;
  color: #1C1B2E;
  border: 1.5px solid var(--border-light);
  border-radius: 16px;
  min-height: 56px;
  padding: 15px 20px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  width: 100%;
  box-shadow: 0 1px 6px rgba(17, 24, 39, 0.06);
}
button.google:hover { background: #FAFAFD; }
button.google:active { transform: scale(0.98); }
button.google svg { width: 20px; height: 20px; flex-shrink: 0; }

button.text-link {
  background: none;
  border: none;
  color: var(--text-secondary);
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
  padding: 8px;
  align-self: center;
}
button.text-link:hover { color: var(--text-primary); }

/* ── In-quiz top chrome ───────────────────────────────────────────────── */

.quiz-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
}
.icon-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--text-primary);
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.quiz-topbar .title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
}

.timer-chip {
  display: flex;
  align-items: center;
  gap: 4px;
  border-radius: 20px;
  padding: 6px 10px;
  font-size: 13px;
  font-weight: 600;
  background: var(--primary-container);
  color: var(--accent);
  transition: background 0.4s ease, color 0.4s ease;
}
.timer-chip.urgent { background: #FDE2E1; color: #DC2626; }

.progress-track {
  height: 4px;
  background: #D9D7F5;
}
.progress-fill {
  height: 100%;
  background: var(--accent);
  /* Matches the 1s tick interval this is mutated on (updateTimerDisplay, in-place — not
     a full re-render, so this transition actually fires). `linear`, not `ease`: an eased
     curve replayed every single tick decelerates-then-reaccelerates each second, which
     reads as jerky/stepped instead of one continuous drain — linear across the same 1s
     window as the tick makes each step pick up exactly where the last one left off. */
  transition: width 1s linear;
}

/* One segment per question (Stories-style), used for the top question-progress
   bar only — the timer bar above the bottom bar stays a single continuous
   .progress-track > .progress-fill, untouched. */
.progress-track.segmented {
  display: flex;
  gap: 4px;
  height: 4px;
  background: none;
  padding: 0 16px;
  margin-top: 2px;
}
.progress-segment {
  flex: 1;
  height: 100%;
  border-radius: 2px;
  background: #D9D7F5;
  overflow: hidden;
}
.progress-segment-fill {
  height: 100%;
  background: var(--accent);
  /* Only actually animates for the current TIMED question's segment (id=current-progress-
     fill), which updateTimerDisplay mutates in place every tick — same reasoning as
     .progress-fill above (1s linear, matching the tick interval exactly). For every other
     segment this is inert: they're either static (already-passed, always 100%) or handled
     by the one-shot .filling keyframe below instead (untimed "just arrived" case, where a
     fresh element every render has nothing to transition FROM). */
  transition: width 1s linear;
}
.progress-segment-fill.filling {
  animation: progressSegmentFill 0.35s ease forwards;
}
@keyframes progressSegmentFill {
  from { width: 0%; }
  to { width: 100%; }
}

/* ── Question + options ──────────────────────────────────────────────── */

/* Mirrors QuizPreviewScreen.kt's QuestionLabel — "QUESTION X OF N" + the MULTIPLE_CORRECT
   "Select all that apply" pill, shown above the question card when showQuestionNumbers
   is on. */
.question-number-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.question-number-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.8px;
  color: var(--accent);
}
.select-all-badge {
  font-size: 11px;
  color: var(--accent);
  background: var(--primary-container);
  border-radius: 20px;
  padding: 3px 8px;
}

.question-text {
  font-size: 19px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--text-primary);
}

.option-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 17px;
  border-radius: 16px;
  border: 1.5px solid var(--divider);
  background: var(--surface);
  cursor: pointer;
  font-size: 15px;
  box-shadow: 0 1px 3px rgba(17, 24, 39, 0.04);
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.option-row.selected { box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 20%, transparent); }
.option-row.selected { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
/* `transition` never actually plays here — render() tears down and rebuilds the whole
   DOM on every state change (see app.js), so these classes always land on a brand-new
   element rather than an existing one changing state, which is what `transition` needs
   to animate at all. `animation` runs on mount instead, which is what actually gives
   Instant Correctness its "halka sa" color fade-in on web, matching the animateColorAsState
   the Android app uses for the same feedback (see QuizPreviewScreen.kt's OptionCard). */
.option-row.correct { border-color: var(--success); background: var(--success-bg); animation: optionCorrectIn 0.25s ease-out; }
.option-row.wrong { border-color: var(--error); background: var(--error-bg); animation: optionWrongIn 0.25s ease-out; }
@keyframes optionCorrectIn {
  from { border-color: var(--divider); background: var(--surface); }
  to   { border-color: var(--success); background: var(--success-bg); }
}
@keyframes optionWrongIn {
  from { border-color: var(--divider); background: var(--surface); }
  to   { border-color: var(--error); background: var(--error-bg); }
}
/* What they picked, on a question nobody has marked yet — neutral amber, since neither
   green nor red would be true. */
.option-row.pending { border-color: var(--pending); background: var(--pending-bg); }

.option-marker {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--icon-gray);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.option-row.selected .option-marker,
.option-row.correct .option-marker { border-color: var(--accent); background: var(--accent); }
.option-row.correct .option-marker { border-color: var(--success); background: var(--success); }
.option-row.wrong .option-marker { border-color: var(--error); background: var(--error); }
.option-row.pending .option-marker { border-color: var(--pending); background: var(--pending); }
.option-marker.square { border-radius: 6px; }
.option-marker svg { width: 13px; height: 13px; }

/* "YOUR ANSWER" tag on a reviewed option — independent of the row's correctness color
   (which always highlights the right answer, picked or not; see the call site's comment). */
.option-your-answer-tag { font-size: 11px; font-weight: 700; color: var(--text-secondary); }
.option-row.correct .option-your-answer-tag { color: var(--success); }
.option-row.wrong .option-your-answer-tag { color: var(--error); }
.option-row.pending .option-your-answer-tag { color: var(--pending); }

textarea, input[type="text"], input[type="email"] {
  width: 100%;
  border: 1.5px solid var(--border-light);
  border-radius: 14px;
  padding: 14px;
  font-size: 15px;
  font-family: inherit;
  background: var(--surface);
  color: var(--text-primary);
}
textarea:focus, input:focus { outline: none; border-color: var(--accent); }

/* ── Fill in the Blank — inline sentence (mirrors the Android app's
   InlineBlankField exactly: the blank is a real input embedded directly in the
   flowing sentence, growing with what's typed, capped so a long answer can
   never blow out the layout — past the cap it scrolls internally like any
   bounded single-line field, same as everywhere else in this app.) ────────── */

.fb-sentence {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 6px;
  font-size: 17px;
  line-height: 1.7;
  color: var(--text-primary);
}
.fb-word { white-space: pre; }

.fb-blank-wrap { position: relative; display: inline-flex; vertical-align: middle; }
/* Invisible twin of the input's text — measured to grow the real input to fit
   its content (plain <input> has no native "size to content" in every browser
   we need to support, so this is the standard cross-browser trick). */
.fb-blank-mirror {
  position: absolute;
  top: 0; left: 0;
  visibility: hidden;
  white-space: pre;
  font: inherit;
  font-weight: 700;
  padding: 0 10px;
}

.fb-blank-input,
.fb-blank-chip {
  min-width: 92px;
  max-width: 220px;
  border-radius: 10px;
  border: 1.5px solid var(--border-light);
  background: var(--surface);
  padding: 6px 10px;
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  text-align: center;
  box-sizing: border-box;
  transition: width 0.12s ease, border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
/* input[type="text"] earlier in this file sets width:100% and — because it
   combines an attribute selector with the element type — is actually MORE
   specific than a bare .fb-blank-input class rule, so it was silently
   winning and stretching every empty blank to the full sentence width
   (forcing each onto its own line). This selector's specificity beats that
   rule outright rather than relying on source order. */
input[type="text"].fb-blank-input { width: 92px; } /* JS grows this inline as the mirror's width changes */
.fb-blank-input::placeholder { color: #AAAAAA; font-weight: 400; }
.fb-blank-input:focus { outline: none; border-color: var(--accent); }
.fb-blank-input.filled {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  color: var(--accent);
}
.fb-blank-chip.correct { border-color: var(--success); background: var(--success-bg); color: #16A34A; }
.fb-blank-chip.wrong { border-color: var(--error); background: var(--error-bg); color: #DC2626; }

.fb-answer-reveal { font-size: 13px; color: #16A34A; font-weight: 600; }

/* ── Poll — voting + results (mirrors PollComponents.kt's PollVotingBody /
   PollDistributionBody: same option-row shell as every other question type,
   plus a percent bar per option once closed, an "Other"/"Why?" field, and a
   consensus banner.) ─────────────────────────────────────────────────────── */

.poll-note { font-size: 12px; color: var(--text-secondary); }
.poll-voted-check { font-weight: 600; color: var(--success); font-size: 14px; }
.poll-change-vote { font-size: 13px; font-weight: 600; color: var(--accent); cursor: pointer; width: fit-content; }

.poll-consensus {
  border-radius: 14px;
  padding: 12px 14px;
  font-size: 13px;
  font-weight: 600;
  background: var(--primary-container);
  color: var(--accent);
}

.poll-result-row {
  border-radius: 14px;
  border: 1.5px solid var(--divider);
  background: var(--surface);
  padding: 12px 14px;
}
.poll-result-row.mine { border-color: var(--accent); }
.poll-result-row .top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 6px;
}
.poll-result-row .label { font-size: 14px; color: var(--text-primary); font-weight: 500; }
.poll-result-row .pct { font-size: 14px; font-weight: 700; color: var(--accent); }
.poll-result-bar {
  height: 8px;
  border-radius: 4px;
  background: var(--primary-container);
  overflow: hidden;
}
.poll-result-bar-fill {
  height: 100%;
  border-radius: 4px;
  background: var(--accent);
  transition: width 0.5s ease;
}
.poll-result-count { font-size: 12px; color: var(--text-secondary); margin-top: 4px; }
.written-eval-detail {
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--surface-variant, rgba(0,0,0,0.03));
}
.written-eval-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.written-eval-status { font-size: 13px; font-weight: 700; }
.written-eval-points { font-size: 12px; color: var(--text-secondary); }
.written-eval-words {
  margin-top: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.written-eval-word {
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 999px;
}
.written-eval-word.matched { background: rgba(34,197,94,0.15); color: #22C55E; }
.written-eval-word.unmatched { background: rgba(239,68,68,0.15); color: #EF4444; }

.poll-other-entries, .poll-reasons {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.poll-other-entries li, .poll-reasons li {
  font-size: 12px;
  color: var(--text-secondary);
}

.feedback-banner {
  border-radius: 14px;
  padding: 14px 16px;
  font-weight: 700;
  text-align: center;
  /* Same fadeIn + slideInVertically entrance InstantFeedbackBanner uses on Android —
     an `animation` (not `transition`) because this element is freshly created on every
     render, not an existing one changing state; see the .option-row.correct/.wrong
     comment above for why that distinction matters here. */
  animation: feedbackBannerIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.feedback-banner.correct { background: var(--success-bg); color: #16A34A; border: 1.5px solid #A7F3D0; }
.feedback-banner.wrong { background: var(--error-bg); color: #DC2626; border: 1.5px solid #FECACA; }
@keyframes feedbackBannerIn {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Bottom action bar (pinned, same shape as PreviewBottomBar) ──────── */

.quiz-bottombar {
  background: var(--surface);
  box-shadow: 0 -4px 16px rgba(17, 24, 39, 0.06);
}
.quiz-bottombar .bar-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 22px calc(16px + env(safe-area-inset-bottom, 0px));
}
.skip-link { color: var(--text-secondary); font-weight: 500; font-size: 15px; background: none; border: none; cursor: pointer; padding: 8px; }
.next-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 100px;
  padding: 14px 30px;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 35%, transparent);
}
.next-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.hint-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  background: none;
  border: none;
  color: var(--accent);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  padding: 8px;
  width: 56px;
}
.hint-btn:disabled { opacity: 0.35; cursor: not-allowed; }

.hint-box {
  border-radius: 14px;
  padding: 12px 14px;
  margin-bottom: 14px;
  background: #FFFBEB;
  border: 1.5px solid #FDE68A;
}
.hint-box-header { display: flex; align-items: center; justify-content: space-between; }
.hint-box-title { font-size: 13px; font-weight: 700; color: #D97706; }
.hint-box-header .skip-link { padding: 0; font-size: 13px; color: #D97706; text-decoration: underline; }
.hint-box-text { margin: 6px 0 0; font-size: 14px; color: var(--text-primary); }

/* ── Result screen ────────────────────────────────────────────────────── */

.result-screen { gap: 14px; align-items: center; padding-bottom: 8px; }
.result-screen .quiz-title { font-size: 24px; margin: 4px 0 0; }
.candidate-line { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-secondary); }
.candidate-line svg { color: var(--accent); }
.candidate-line strong { color: #1C1B2E; font-weight: 700; }
/* The score hero — mirrors ResultScreen.kt's ScoreHero: one solid block of the quiz's
   color, the number carrying the card. No gradient, disc, badge or shadow. The .animate
   variant plays once per result (state.resultAnimated): the card rises in, the bar fills
   in step with the JS count-up (same 200ms delay, 1100ms, ease-out), then the footer. */
.score-hero {
  width: 100%;
  border-radius: 20px;
  padding: 22px 24px;
  background: var(--accent);
  color: #fff;
  text-align: left;
}
.score-hero .hero-label { font-size: 13px; font-weight: 500; color: rgba(255,255,255,0.78); }
.score-hero .hero-numbers { display: flex; align-items: flex-end; margin-top: 6px; }
.score-hero .hero-score { font-size: 64px; line-height: 1; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -1px; }
.score-hero .hero-total { font-size: 24px; font-weight: 600; color: rgba(255,255,255,0.7); padding-bottom: 7px; }
.score-hero .hero-bar-row { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.score-hero .hero-bar { flex: 1; height: 8px; border-radius: 999px; background: rgba(255,255,255,0.22); overflow: hidden; }
.score-hero .hero-bar-fill { height: 100%; width: var(--pct); border-radius: 999px; background: #fff; }
.score-hero .hero-percent { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; min-width: 40px; text-align: right; }
.score-hero .hero-footer { margin-top: 14px; }
.score-hero .hero-sentence { font-size: 14px; font-weight: 500; }
.score-hero .hero-marks { font-size: 13px; color: rgba(255,255,255,0.78); margin-top: 4px; }
.score-hero.info .hero-label { font-size: 12px; font-weight: 700; letter-spacing: 0.8px; }
.score-hero.info .hero-info-message { font-size: 16px; font-weight: 600; margin-top: 6px; line-height: 1.4; }

.score-hero.animate { animation: heroIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) both; }
.score-hero.animate .hero-bar-fill { animation: heroBarFill 1.1s cubic-bezier(0.33, 1, 0.68, 1) 0.2s both; }
.score-hero.animate .hero-footer { animation: heroFooterIn 0.36s ease-out 1.3s both; }
@keyframes heroIn { from { opacity: 0; transform: translateY(12px); } }
@keyframes heroBarFill { from { width: 0; } }
@keyframes heroFooterIn { from { opacity: 0; transform: translateY(8px); } }

/* Detail expanders under the hero — plain rows: title, a muted line, a chevron. */
.result-expander { width: 100%; }
.result-expander .expander-head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--q-border, #E5E7EB);
  border-radius: 14px;
  background: #fff;
  color: #1C1B2E;
  text-align: left;
  cursor: pointer;
}
.result-expander .expander-text { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.result-expander .expander-title { font-size: 15px; font-weight: 600; }
.result-expander .expander-sub { font-size: 13px; color: var(--text-secondary); }
.result-expander .expander-chevron { color: var(--text-secondary); transition: transform 0.22s ease; flex-shrink: 0; }
.result-expander.open .expander-chevron { transform: rotate(180deg); }
.result-expander .expander-body { display: none; padding-top: 12px; flex-direction: column; gap: 12px; }
.result-expander.open .expander-body { display: flex; }
.result-expander .expander-body.opening { animation: expanderOpen 0.28s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes expanderOpen { from { opacity: 0; transform: translateY(-6px); } }

@media (prefers-reduced-motion: reduce) {
  .score-hero.animate, .score-hero.animate .hero-bar-fill, .score-hero.animate .hero-footer,
  .result-expander .expander-body.opening { animation: none; }
}

/* Correct / Incorrect / Total Time / Hints Used tiles. */
.stat-grid { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.stat-tile {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid #ECEDF5;
  box-shadow: 0 1px 4px rgba(17, 24, 39, 0.04);
}
.stat-icon {
  width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.stat-icon.correct { background: var(--success-bg); color: #16A34A; }
.stat-icon.wrong { background: var(--error-bg); color: #DC2626; }
.stat-icon.time { background: #F3F4F8; color: #4B5563; }
.stat-icon.hint { background: #FFFBEB; color: #D97706; }
.stat-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.stat-label { font-size: 12px; color: var(--text-secondary); }
.stat-value { font-size: 16px; font-weight: 800; color: #1C1B2E; }

/* Marks / Correctness breakdown cards (shown while something is still pending). */
.score-section-card {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--surface);
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 1px 4px rgba(17, 24, 39, 0.06);
}
.score-section-title { font-size: 14px; font-weight: 700; color: var(--text-primary); }
.score-section-subtitle { font-size: 12px; color: var(--text-secondary); margin-top: 3px; }
.score-section-right { text-align: right; flex-shrink: 0; }
.score-section-value { font-size: 20px; font-weight: 800; color: var(--accent); }
.score-section-percent { font-size: 11px; color: var(--text-secondary); }

/* "Waiting to be marked" — same solid shell as .score-hero, in amber. */
.pending-card {
  width: 100%;
  border-radius: 20px;
  padding: 20px;
  background: #E39B06;
  color: #fff;
}
.pending-card .pending-title { font-size: 18px; font-weight: 700; }
.pending-card .pending-body { font-size: 13px; margin-top: 8px; color: rgba(255,255,255,0.92); }

/* Review header + filter tabs. */
.review-head { width: 100%; margin-top: 6px; }
.review-head-title { font-size: 12px; font-weight: 800; letter-spacing: 1px; color: #1C1B2E; }
.review-head-sub { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
.filter-tabs {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border-radius: 12px;
  background: #ECEDF5;
  align-self: flex-start;
  max-width: 100%;
  overflow-x: auto;
}
.filter-tab {
  border: none;
  background: transparent;
  border-radius: 9px;
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary);
  cursor: pointer;
  white-space: nowrap;
}
.filter-tab.incorrect { color: #DC2626; }
.filter-tab.correct { color: #16A34A; }
.filter-tab.poll { color: var(--accent); }
.filter-tab.active { background: #fff; color: #1C1B2E; box-shadow: 0 1px 3px rgba(17, 24, 39, 0.08); }
.filter-tab.active.incorrect { color: #DC2626; }
.filter-tab.active.correct { color: #16A34A; }
.filter-tab.active.poll { color: var(--accent); }

.review-list { width: 100%; display: flex; flex-direction: column; gap: 12px; }
.review-card {
  background: var(--surface);
  border-radius: 16px;
  border: 1px solid #ECEDF5;
  box-shadow: 0 2px 8px rgba(17, 24, 39, 0.05);
  overflow: hidden;
}
.review-card.poll { border-color: color-mix(in srgb, var(--accent) 30%, #fff); }
.review-header {
  display: flex;
  align-items: stretch;
  gap: 12px;
  padding: 14px 14px 14px 0;
  cursor: pointer;
}
.review-accent { width: 4px; border-radius: 0 3px 3px 0; flex-shrink: 0; align-self: stretch; }
.review-accent.correct { background: var(--success); }
.review-accent.wrong { background: var(--error); }
.review-accent.pending { background: var(--pending); }
.review-accent.poll { background: var(--accent); }
.review-main { flex: 1; min-width: 0; }
.review-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }
.review-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; }
.q-pill { font-size: 12px; font-weight: 800; }
.q-pill.correct { color: #16A34A; }
.q-pill.wrong { color: #DC2626; }
.q-pill.pending { color: var(--pending); }
.q-pill.poll { color: var(--accent); }
.type-badge { font-size: 11px; font-weight: 600; border-radius: 6px; padding: 3px 8px; background: #F3F4F8; color: #4B5563; }
.type-badge.correct { background: var(--success-bg); color: #15803D; }
.type-badge.wrong { background: var(--error-bg); color: #B91C1C; }
.type-badge.pending { background: var(--pending-bg); color: var(--pending); }
.type-badge.poll { background: color-mix(in srgb, var(--accent) 12%, #fff); color: var(--accent); }
.review-time { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--icon-gray); }
.pending-tag {
  font-size: 11px; font-weight: 500; border-radius: 6px; padding: 3px 7px;
  background: var(--pending-bg); color: var(--pending);
}
.marks-badge { font-size: 12px; font-weight: 700; border-radius: 8px; padding: 4px 9px; border: 1px solid; }
.marks-badge.correct { background: var(--success-bg); color: #16A34A; border-color: #A7F3D0; }
.marks-badge.wrong { background: var(--error-bg); color: #DC2626; border-color: #FECACA; }
.marks-badge.pending { background: var(--pending-bg); color: var(--pending); border-color: #FDE68A; }
.hint-used-tag {
  font-size: 11px; font-weight: 500; border-radius: 6px; padding: 3px 7px;
  background: #FFFBEB; color: #D97706;
}
.review-question { font-size: 15px; font-weight: 700; color: #1C1B2E; line-height: 1.35; }
.review-body { padding: 0 14px 14px 16px; display: flex; flex-direction: column; gap: 10px; }

/* Written response. */
.written-review { display: flex; flex-direction: column; gap: 8px; }
.answer-box { border-radius: 12px; padding: 12px 14px; border: 1px solid; }
.answer-box.wrong { background: var(--error-bg); border-color: #FECACA; }
.answer-box.correct { background: var(--success-bg); border-color: #A7F3D0; }
.answer-box.pending { background: var(--pending-bg); border-color: #FDE68A; }
.answer-box-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.answer-box-label { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.answer-box.wrong .answer-box-label { color: #DC2626; }
.answer-box.correct .answer-box-label { color: #16A34A; }
.answer-box.pending .answer-box-label { color: var(--pending); }
.answer-chip { font-size: 11px; font-weight: 600; border-radius: 6px; padding: 3px 8px; background: #fff; }
.answer-chip.wrong { color: #DC2626; }
.answer-chip.correct { color: #16A34A; }
.answer-chip.pending { color: var(--pending); }
.answer-box-text { font-size: 14px; color: #1C1B2E; word-break: break-word; }
.answer-box-text.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.answer-box-text.strong { font-weight: 700; }
.answer-box .written-eval-detail { margin-top: 8px; padding: 0; background: transparent; }
.answer-box .written-eval-top { justify-content: flex-end; }
.answer-box .written-eval-status { display: none; } /* already the chip in the box header */

.reason-box {
  border-radius: 12px;
  padding: 12px 14px;
  background: #F6F7FC;
  border: 1px solid #ECEDF5;
  font-size: 13px;
  line-height: 1.5;
  color: #3F3D56;
}
.reason-box strong { color: #1C1B2E; }

/* Fill in the blanks — the sentence with the taker's words as chips. */
.fb-review-sentence {
  border-radius: 12px;
  padding: 12px 14px;
  background: #F8F9FB;
  border: 1px solid #ECEDF5;
  font-size: 14px;
  line-height: 2;
  color: #1C1B2E;
}
.fb-review-chip {
  display: inline-block;
  padding: 1px 8px;
  margin: 0 3px;
  border-radius: 6px;
  font-weight: 700;
  line-height: 1.6;
  vertical-align: baseline;
}
.fb-review-chip.correct { background: var(--success-bg); color: #16A34A; }
.fb-review-chip.wrong { background: var(--error-bg); color: #DC2626; text-decoration: line-through; }
.fb-review-chip.pending { background: var(--pending-bg); color: var(--pending); }
.fb-review-chip.answer { text-decoration: none; }

/* True / False tiles. */
.tf-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tf-tile {
  border-radius: 12px;
  padding: 14px 10px;
  text-align: center;
  border: 1.5px solid #ECEDF5;
  background: #F8F9FB;
  color: var(--icon-gray);
}
.tf-tile-label { font-size: 13px; font-weight: 800; letter-spacing: 0.6px; }
.tf-tile-sub { font-size: 11px; margin-top: 4px; }
.tf-tile.correct { border-color: #16A34A; background: var(--success-bg); color: #16A34A; }
.tf-tile.wrong { border-color: #DC2626; background: var(--error-bg); color: #DC2626; }
.tf-tile.pending { border-color: var(--pending); background: var(--pending-bg); color: var(--pending); }
.tf-tile.answer { border-color: #A7F3D0; background: var(--success-bg); color: #16A34A; }

/* Single / multiple choice rows. */
.choice-rows { display: flex; flex-direction: column; gap: 6px; }
.choice-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid #ECEDF5;
  background: #F8F9FB;
  font-size: 14px;
  color: var(--icon-gray);
}
.choice-marker {
  width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0;
  border: 1.5px solid #D1D5DB; background: #fff;
  display: flex; align-items: center; justify-content: center; color: #fff;
}
.choice-marker.square { border-radius: 5px; }
.choice-text { flex: 1; min-width: 0; }
.choice-tag { font-size: 11px; font-weight: 600; white-space: nowrap; }
.choice-row.correct { background: var(--success-bg); border-color: #A7F3D0; color: #1C1B2E; font-weight: 600; }
.choice-row.correct .choice-marker { background: #16A34A; border-color: #16A34A; }
.choice-row.correct .choice-tag { color: #16A34A; }
.choice-row.wrong { background: var(--error-bg); border-color: #FECACA; color: #1C1B2E; font-weight: 600; }
.choice-row.wrong .choice-marker { background: #DC2626; border-color: #DC2626; }
.choice-row.wrong .choice-tag { color: #DC2626; }
.choice-row.pending { background: var(--pending-bg); border-color: #FDE68A; color: #1C1B2E; font-weight: 600; }
.choice-row.pending .choice-marker { background: var(--pending); border-color: var(--pending); }
.choice-row.pending .choice-tag { color: var(--pending); }
.choice-row.answer { border-color: #A7F3D0; color: #1C1B2E; }
.choice-row.answer .choice-marker { border-color: #16A34A; }
.choice-row.answer .choice-tag { color: #16A34A; }

/* Poll review body. */
.result-screen .poll-result-row { border: none; padding: 4px 0; background: transparent; }
.result-screen .poll-result-row.mine { border: none; }
.result-screen .poll-result-row .top { align-items: center; }
.result-screen .label-wrap { display: inline-flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap; }
.result-screen .poll-result-row .label { font-size: 14px; font-weight: 500; color: #3F3D56; }
.result-screen .poll-result-row.mine .label { font-weight: 700; color: var(--accent); }
.your-vote-tag { font-size: 11px; font-weight: 600; border-radius: 6px; padding: 2px 8px; background: color-mix(in srgb, var(--accent) 12%, #fff); color: var(--accent); }
.result-screen .poll-result-row .pct { font-size: 13px; font-weight: 700; color: var(--accent); white-space: nowrap; }
.result-screen .poll-result-row:not(.mine) .pct { color: var(--text-secondary); }
.result-screen .poll-result-bar { background: #ECEDF5; }
.result-screen .poll-result-row:not(.mine) .poll-result-bar-fill { background: #9CA3AF; }
.poll-footer {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 4px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #F6F7FC;
  border: 1px solid #ECEDF5;
  font-size: 12px;
  color: var(--text-secondary);
}
.poll-unscored { color: var(--accent); font-weight: 600; }

/* Bottom actions. */
.result-actions { width: 100%; display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.outline-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 48px;
  border-radius: 14px;
  border: 1.5px solid var(--border-light);
  background: #fff;
  color: #1C1B2E;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.outline-btn:hover { background: #FAFAFD; }
.outline-btn svg { color: var(--accent); }

@media (max-width: 400px) {
  .stat-tile { padding: 12px 10px; gap: 10px; }
  .stat-value { font-size: 15px; }
  .review-right { flex-direction: column; align-items: flex-end; gap: 4px; }
}

/* Print → Save as PDF: white page, everything expanded, no chrome. */
@media print {
  body { background: #fff !important; }
  .site-header, .site-footer, .filter-tabs, .result-actions, .review-right svg { display: none !important; }
  .site-main { padding: 0 !important; }
  .screen.result-screen { max-width: none; }
  .review-card, .stat-tile, .score-hero { box-shadow: none !important; break-inside: avoid; }
  .score-hero { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .result-expander .expander-body { display: flex !important; }
  .result-expander .expander-chevron { display: none; }
  .review-header { cursor: default; }
}

.spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--divider);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.error-text { color: var(--error); font-size: 13px; }
.muted { color: var(--text-secondary); font-size: 13px; }
.sign-out-row { margin-top: 4px; padding-top: 4px; text-align: center; font-size: 13px; color: var(--text-secondary); }
.sign-out-row .sign-out-link { font-size: 13px; font-weight: 700; color: #1C1B2E; padding: 0; }
.sign-out-row .sign-out-link:hover { text-decoration: underline; }

/* Quiz-taking and result screens sit in the same centered column as the cards. */
.site-main > .quiz-screen { width: 100%; max-width: 480px; border-radius: 24px; overflow: hidden; box-shadow: 0 18px 50px rgba(30, 30, 60, 0.10); }
.result-screen { padding-bottom: 8px; }
@media (max-width: 480px) {
  .site-main:has(> .quiz-screen) { padding: 0; }
  .site-main > .quiz-screen { border-radius: 0; box-shadow: none; }
}

/* ── Quiz-taking screen (redesign) ─────────────────────────────────────────
   Mirrors the Android quiz screen (ui/preview/components/QuizScreenComponents.kt).
   Brand shades are mixed from the quiz's own --accent, the same way QuizDesign.kt
   derives them from the quiz theme color; the neutrals/semantic values are the same
   ui/theme/Color.kt tokens Android uses (named alongside each). Scoped to .quiz-screen
   so the landing and result screens keep their existing look. ─────────────────── */

.quiz-screen {
  --q-primary: var(--accent);
  --q-primary-dark: color-mix(in srgb, var(--accent) 84%, #000);
  --q-primary-alt: color-mix(in srgb, var(--accent) 88%, #fff);
  --q-primary-text: color-mix(in srgb, var(--accent) 84%, #000);
  --q-soft: color-mix(in srgb, var(--accent) 8%, #fff);
  --q-soft-border: color-mix(in srgb, var(--accent) 16%, #fff);
  --q-ring: color-mix(in srgb, var(--accent) 45%, #fff);
  --q-selected-bg: color-mix(in srgb, var(--accent) 6%, #fff);
  --q-selected-bg-poll: color-mix(in srgb, var(--accent) 3.5%, #fff);
  --q-blank-bg: color-mix(in srgb, var(--accent) 4%, #fff);
  --q-select-all-bg: color-mix(in srgb, var(--accent) 7%, #fff);
  --q-disabled-face: color-mix(in srgb, var(--accent) 30%, #fff);
  --q-disabled-edge: color-mix(in srgb, var(--accent) 48%, #fff);
  --q-text-strong: #111827;    /* TextPrimary */
  --q-text-body: #374151;      /* DialogNeutralBtnText */
  --q-text-letter: #4B5563;    /* ChipText */
  --q-text-muted: #6B7280;     /* TextSecondary */
  --q-text-hint: #9CA3AF;      /* IconGray */
  --q-border: #E2E3E9;         /* OptionOutline */
  --q-border-strong: #D1D5DB;  /* md_theme_light_outline */
  --q-divider: #F1F2F4;        /* Divider */
  --q-subtle: #F8F9FB;         /* DialogInfoBoxBg */
  --q-false-icon-bg: #F3F4F6;  /* ChipBg */
  --q-reason-bg: #FAFAFC;      /* PreviewBg */
  --q-hint-icon: #F59E0B;      /* DialogWarnBadgeDot */
  --q-hint-text: #D97706;      /* CardCountdownIcon */
  --q-hint-bg: #FFFBEB;        /* PendingBg */
  --q-danger-bg: #FEF2F2;      /* DialogDangerBtnBg */
  --q-danger-border: #FECACA;  /* DialogDangerBadgeBorder */
  --q-danger: #DC2626;         /* md_theme_light_error */
  --q-success-bg: #ECFDF5;     /* SuccessBg */
  --q-success-border: #A7F3D0; /* SuccessBorder */
  --q-success-icon: #16A34A;   /* CardFooterDoneInk */
  --q-success-text: #047857;   /* SuccessText */
  --q-poll-bg: #F3E8FF;        /* DialogLockBadgeBg */
  --q-poll-border: #E9D5FF;    /* DialogLockBadgeBorder */
  --q-card-shadow: 0 4px 12px rgba(17, 24, 39, 0.06), 0 1px 2px rgba(17, 24, 39, 0.04);

  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  background: #fff;
  color: var(--q-text-strong);
  font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}
.quiz-screen button,
.quiz-screen textarea,
.quiz-screen input { font-family: inherit; }

/* Top bar */
.quiz-screen .quiz-topbar {
  height: 52px;
  padding: 0 16px;
  justify-content: flex-start;
  border-bottom: 1px solid var(--q-divider);
}
.quiz-screen .icon-btn { width: 40px; height: 40px; flex-shrink: 0; color: var(--q-text-muted); }
.quiz-screen .icon-btn svg { width: 22px; height: 22px; }
.quiz-screen .quiz-topbar .title {
  flex: 1;
  min-width: 0;
  padding: 0 8px;
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  color: var(--q-text-strong);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.quiz-screen .title-count { color: var(--q-text-hint); font-weight: 500; }
.quiz-screen .topbar-spacer { width: 40px; flex-shrink: 0; }
.quiz-screen .timer-chip {
  flex-shrink: 0;
  height: 28px;
  padding: 0 10px;
  gap: 4px;
  border-radius: 999px;
  border: 1px solid var(--q-soft-border);
  background: var(--q-soft);
  color: var(--q-primary);
  font-size: 13px;
  font-weight: 700;
  transition: background 0.5s ease, border-color 0.5s ease, color 0.5s ease;
}
.quiz-screen .timer-chip svg { width: 14px; height: 14px; }
.quiz-screen .timer-chip.poll-chip { background: var(--q-poll-bg); border-color: var(--q-poll-border); font-weight: 600; }
.quiz-screen .timer-chip.urgent { background: var(--q-danger-bg); border-color: var(--q-danger-border); color: var(--q-danger); }

/* Segmented question progress — same fill/transition rules as above, new shape. The
   ring is a box-shadow, so it never changes the row's height. */
.quiz-screen .progress-track.segmented { height: 6px; gap: 6px; padding: 0 20px; margin: 12px 0 4px; }
.quiz-screen .progress-segment { border-radius: 999px; background: var(--q-border); }
.quiz-screen .progress-segment.current { box-shadow: 0 0 0 1.5px #fff, 0 0 0 3px var(--q-ring); }
.quiz-screen .progress-segment-fill { border-radius: 999px; background: var(--q-primary); }

/* Body */
.quiz-screen .quiz-body { flex: 1; display: flex; flex-direction: column; padding: 16px 20px 24px; }

.quiz-screen .badge-row { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.quiz-screen .badge-row-end { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.quiz-screen .q-badge {
  height: 24px;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  border-radius: 8px;
  border: 1px solid var(--q-soft-border);
  background: var(--q-soft);
  color: var(--q-primary-text);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.5px;
}
.quiz-screen .hint-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 6px;
  border: none;
  border-radius: 8px;
  background: none;
  color: var(--q-hint-text);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.quiz-screen .hint-link svg { color: var(--q-hint-icon); }
.quiz-screen .hint-link:hover:not(:disabled) { background: var(--q-hint-bg); }
.quiz-screen .hint-link:disabled { opacity: 0.35; cursor: not-allowed; }
.quiz-screen .anon-chip {
  height: 24px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 8px;
  border-radius: 6px;
  border: 1px solid var(--q-border);
  background: var(--q-subtle);
  color: var(--q-text-hint);
  font-size: 12px;
  font-weight: 500;
}
.quiz-screen .hint-box { margin: 0 0 20px; }

/* Question card */
.quiz-screen .q-card {
  display: flex;
  margin-bottom: 20px;
  border-radius: 16px;
  border: 1px solid var(--q-border);
  background: #fff;
  box-shadow: var(--q-card-shadow);
  overflow: hidden;
}
.quiz-screen .q-card-accent { width: 6px; flex-shrink: 0; background: var(--q-primary); }
.quiz-screen .q-card-body {
  flex: 1;
  min-width: 0;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.quiz-screen .q-overline {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--q-primary-alt);
}
.quiz-screen .q-title { font-size: 16px; font-weight: 700; line-height: 24px; color: var(--q-text-strong); overflow-wrap: anywhere; }
.quiz-screen .q-title.statement { font-size: 15px; font-weight: 600; line-height: 22px; }
.quiz-screen .q-title > * { margin: 0; }
.quiz-screen .q-helper {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  line-height: 18px;
  color: var(--q-text-hint);
}
.quiz-screen .q-helper svg { flex-shrink: 0; }
.quiz-screen .q-helper.dot { font-size: 12px; font-weight: 500; letter-spacing: 0.5px; text-transform: uppercase; }
.quiz-screen .q-helper-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--q-primary); flex-shrink: 0; }
.quiz-screen .select-all-chip {
  margin-top: 2px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 8px;
  border-radius: 8px;
  border: 1px solid var(--q-soft-border);
  background: var(--q-select-all-bg);
  color: var(--q-primary-text);
  font-size: 12px;
  font-weight: 500;
}

/* Choice cards (single / multiple / poll) */
.quiz-screen .choice-wrap { display: flex; flex-direction: column; }
.quiz-screen .choice-list { display: flex; flex-direction: column; gap: 12px; }
.quiz-screen .choice-list.tight { gap: 10px; }
.quiz-screen .choice-card {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 62px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid var(--q-border);
  background: #fff;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.quiz-screen .choice-list.tight .choice-card { min-height: 60px; }
.quiz-screen .choice-card:hover:not(.inert):not(.selected) { border-color: var(--q-ring); }
/* 2px border on the picked card — padding drops by 1px so the content doesn't shift. */
.quiz-screen .choice-card.selected {
  padding: 13px;
  border: 2px solid var(--q-primary);
  background: var(--q-selected-bg);
  box-shadow: 0 8px 20px color-mix(in srgb, var(--accent) 18%, transparent);
}
.quiz-screen .choice-card.poll { min-height: 66px; }
.quiz-screen .choice-card.poll.selected { min-height: 76px; background: var(--q-selected-bg-poll); }
.quiz-screen .choice-card.inert { cursor: default; }
.quiz-screen .choice-card.locked { opacity: 0.6; }
.quiz-screen .choice-card.correct {
  padding: 13px;
  border: 2px solid var(--q-success-icon);
  background: var(--q-success-bg);
  animation: qCardCorrectIn 0.25s ease-out;
}
.quiz-screen .choice-card.wrong {
  padding: 13px;
  border: 2px solid var(--q-danger);
  background: var(--q-danger-bg);
  animation: qCardWrongIn 0.25s ease-out;
}
/* `animation`, not `transition`: render() rebuilds the DOM, so these classes always land
   on a fresh element (see the .option-row.correct note above). */
@keyframes qCardCorrectIn { from { background: #fff; border-color: var(--q-border); } }
@keyframes qCardWrongIn { from { background: #fff; border-color: var(--q-border); } }

/* Question preview (read first) — mirrors QuestionReveal.kt. The stage is the question
   alone: number pill top-left, big text, a fill bar; no card, helper, choices or bottom
   bar. Keyframes, not transitions: render() rebuilds the DOM. Entrance animations only
   run on the stage's first paint (.entering). */
.quiz-screen .reveal-stage {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 16px 24px 32px;
}
.quiz-screen .reveal-center {
  flex: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 24px 0 12vh;
}
.quiz-screen .reveal-question {
  color: var(--q-text-strong);
  font-weight: 700;
  overflow-wrap: anywhere;
}
.quiz-screen .reveal-question.lg { font-size: 28px; line-height: 37px; letter-spacing: -0.3px; }
.quiz-screen .reveal-question.md { font-size: 24px; line-height: 32px; letter-spacing: -0.2px; }
.quiz-screen .reveal-question.sm { font-size: 20px; line-height: 28px; }
/* Fill-blank sentence under its heading — word by word like the answer card, so it wraps
   and orders the same (dir on .reveal-center flips the rows for Urdu/Arabic). */
.quiz-screen .reveal-sentence { display: flex; flex-direction: column; gap: 12px; margin-top: 20px; }
.quiz-screen .reveal-sentence.large { margin-top: 0; }
.quiz-screen .reveal-sentence-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 8px;
  font-size: 20px;
  line-height: 30px;
  font-weight: 500;
  color: var(--q-text-body, #374151);
}
.quiz-screen .reveal-sentence.large .reveal-sentence-line {
  font-size: 24px;
  line-height: 32px;
  font-weight: 700;
  color: var(--q-text-strong);
}
.quiz-screen .reveal-gap {
  display: inline-block;
  width: 76px;
  height: 34px;
  border-radius: 8px;
  background: var(--q-soft) linear-gradient(var(--q-primary), var(--q-primary)) no-repeat;
  background-size: calc(100% - 16px) 2px;
  background-position: 50% calc(100% - 2px);
}
.quiz-screen .reveal-stage.entering .reveal-sentence { animation: revealRise 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.26s both; }

.quiz-screen .reveal-bar {
  width: 42%;
  height: 5px;
  margin-top: 28px;
  border-radius: 999px;
  background: var(--q-soft);
  overflow: hidden;
}
.quiz-screen .reveal-bar-fill {
  height: 100%;
  width: 100%;
  border-radius: 999px;
  background: var(--q-primary);
  transform-origin: left center;
  animation-name: revealBarFill;
  animation-timing-function: linear;
  animation-fill-mode: both;
}
@keyframes revealBarFill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.quiz-screen .reveal-stage.entering .reveal-pill { animation: revealRise 0.45s cubic-bezier(0.22, 1, 0.36, 1) both; }
.quiz-screen .reveal-stage.entering .reveal-question {
  transform-origin: left center;
  animation: revealQuestionIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.12s both;
}
.quiz-screen .reveal-stage.entering .reveal-bar { animation: revealRise 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.42s both; }
@keyframes revealQuestionIn {
  from { opacity: 0; transform: translateY(26px) scale(0.94); }
  to   { opacity: 1; transform: none; }
}
@keyframes revealRise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

/* The answer screen crossfades in once the preview ends; choices stagger, the bottom bar
   slides up. */
.quiz-screen .quiz-body.answers-in > .badge-row,
.quiz-screen .quiz-body.answers-in > .q-card { animation: revealAnswerIn 0.38s cubic-bezier(0.22, 1, 0.36, 1) both; }
.quiz-screen .quiz-body.answers-in .choice-card,
.quiz-screen .quiz-body.answers-in .answer-card,
.quiz-screen .quiz-body.answers-in .q-card ~ div:not(.choice-wrap) {
  animation: revealAnswerIn 0.34s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: 0.12s;
}
.quiz-screen .quiz-body.answers-in .choice-card:nth-child(2) { animation-delay: 0.19s; }
.quiz-screen .quiz-body.answers-in .choice-card:nth-child(3) { animation-delay: 0.26s; }
.quiz-screen .quiz-body.answers-in .choice-card:nth-child(n+4) { animation-delay: 0.33s; }
@keyframes revealAnswerIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
.quiz-screen .quiz-bottombar.bar-in { animation: revealBarUp 0.38s cubic-bezier(0.4, 0, 0.2, 1) 0.14s both; }
@keyframes revealBarUp {
  from { opacity: 0; transform: translateY(100%); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .quiz-screen .reveal-stage.entering .reveal-pill,
  .quiz-screen .reveal-stage.entering .reveal-question,
  .quiz-screen .reveal-stage.entering .reveal-bar,
  .quiz-screen .reveal-stage.entering .reveal-sentence,
  .quiz-screen .quiz-body.answers-in > .badge-row,
  .quiz-screen .quiz-body.answers-in > .q-card,
  .quiz-screen .quiz-body.answers-in .choice-card,
  .quiz-screen .quiz-body.answers-in .answer-card,
  .quiz-screen .quiz-body.answers-in .q-card ~ div:not(.choice-wrap),
  .quiz-screen .quiz-bottombar.bar-in { animation: none; }
}

.quiz-screen .letter-box {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  border: 1px solid var(--q-border);
  background: var(--q-subtle);
  color: var(--q-text-letter);
  font-size: 13px;
  font-weight: 700;
}
.quiz-screen .choice-card.selected .letter-box { background: var(--q-primary); border-color: var(--q-primary); color: #fff; }
.quiz-screen .choice-card.correct .letter-box { background: var(--q-success-icon); border-color: var(--q-success-icon); color: #fff; }
.quiz-screen .choice-card.wrong .letter-box { background: var(--q-danger); border-color: var(--q-danger); color: #fff; }

.quiz-screen .choice-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.quiz-screen .choice-label { font-size: 17px; font-weight: 500; line-height: 22px; color: var(--q-text-body); overflow-wrap: anywhere; }
.quiz-screen .choice-list.tight .choice-card:not(.selected) .choice-label { font-weight: 400; }
.quiz-screen .choice-card.selected .choice-label { font-weight: 600; color: var(--q-primary-text); }
.quiz-screen .choice-card.poll.selected .choice-label { color: var(--q-text-strong); }
.quiz-screen .choice-card.correct .choice-label { font-weight: 600; color: var(--q-success-text); }
.quiz-screen .choice-card.wrong .choice-label { font-weight: 600; color: var(--q-danger); }
.quiz-screen .choice-sub { font-size: 12px; font-weight: 500; color: var(--q-primary-alt); }

.quiz-screen .ind-radio,
.quiz-screen .ind-check,
.quiz-screen .fb-badge { flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.quiz-screen .ind-radio { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--q-border-strong); }
.quiz-screen .choice-card.selected .ind-radio { border: none; background: var(--q-primary); }
.quiz-screen .ind-radio svg { width: 14px; height: 14px; }
.quiz-screen .ind-check { width: 24px; height: 24px; border-radius: 7px; border: 2px solid var(--q-border-strong); background: #fff; }
.quiz-screen .choice-card.selected .ind-check { border-color: var(--q-soft-border); background: var(--q-primary); }
.quiz-screen .ind-check svg { width: 16px; height: 16px; }
.quiz-screen .fb-badge { width: 22px; height: 22px; border-radius: 50%; color: #fff; }
.quiz-screen .fb-badge.correct { background: var(--q-success-icon); }
.quiz-screen .fb-badge.wrong { background: var(--q-danger); }
.quiz-screen .fb-badge svg { width: 14px; height: 14px; }

/* True / False */
.quiz-screen .tf-card { min-height: 84px; padding: 14px 16px; gap: 14px; }
.quiz-screen .tf-card.selected,
.quiz-screen .tf-card.correct,
.quiz-screen .tf-card.wrong { padding: 13px 15px; }
.quiz-screen .tf-icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  border: 1px solid var(--q-border);
  background: var(--q-false-icon-bg);
  color: var(--q-text-letter);
}
.quiz-screen .tf-card.selected .tf-icon { background: var(--q-primary); border-color: var(--q-primary); color: #fff; }
.quiz-screen .tf-card.correct .tf-icon { background: var(--q-success-icon); border-color: var(--q-success-icon); color: #fff; }
.quiz-screen .tf-card.wrong .tf-icon { background: var(--q-danger); border-color: var(--q-danger); color: #fff; }
.quiz-screen .tf-title { font-size: 18px; font-weight: 700; color: var(--q-text-body); }
.quiz-screen .tf-card.selected .tf-title { color: var(--q-text-strong); }
.quiz-screen .tf-card.correct .tf-title { color: var(--q-success-text); }
.quiz-screen .tf-card.wrong .tf-title { color: var(--q-danger); }
.quiz-screen .tf-sub { font-size: 12px; font-weight: 500; color: var(--q-text-hint); }
.quiz-screen .tf-card.selected .tf-sub { color: var(--q-primary-alt); }

.quiz-screen .selected-count-row { display: flex; justify-content: center; margin-top: 12px; }
.quiz-screen .selected-count-chip {
  height: 26px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--q-success-border);
  background: var(--q-success-bg);
  color: var(--q-success-text);
  font-size: 13px;
  font-weight: 600;
}
.quiz-screen .selected-count-chip svg { color: var(--q-success-icon); }

/* Written answer */
.quiz-screen .answer-card {
  display: flex;
  flex-direction: column;
  min-height: 248px;
  padding: 16px;
  border-radius: 16px;
  border: 1px solid var(--q-border);
  background: #fff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.quiz-screen .answer-card:focus-within {
  padding: 15px;
  border: 2px solid var(--q-primary-alt);
  box-shadow: 0 0 0 4px var(--q-soft-border);
}
.quiz-screen .answer-card.correct { padding: 15px; border: 2px solid var(--q-success-icon); background: var(--q-success-bg); }
.quiz-screen .answer-card.wrong { padding: 15px; border: 2px solid var(--q-danger); background: var(--q-danger-bg); }
.quiz-screen .answer-head { display: flex; align-items: center; gap: 6px; }
.quiz-screen .answer-label {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--q-primary);
}
.quiz-screen .answer-label::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.quiz-screen .char-chip {
  height: 22px;
  display: inline-flex;
  align-items: center;
  padding: 0 8px;
  border-radius: 6px;
  border: 1px solid var(--q-divider);
  background: var(--q-subtle);
  color: var(--q-text-hint);
  font-size: 12px;
  font-weight: 500;
}
.quiz-screen .char-chip b { font-weight: 700; color: var(--q-text-body); }
.quiz-screen .answer-divider { height: 1px; margin: 12px 0; background: var(--q-divider); }
.quiz-screen .answer-card textarea {
  flex: 1;
  min-height: 120px;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  resize: none;
  font-size: 16px;
  line-height: 26px;
  color: var(--q-text-strong);
}
.quiz-screen .answer-card textarea:focus { outline: none; border: none; }
.quiz-screen .answer-card textarea::placeholder { color: var(--q-text-hint); }
.quiz-screen .answer-foot { display: flex; justify-content: flex-end; margin-top: -2px; }
.quiz-screen .answer-clear {
  padding: 2px 4px;
  border: none;
  border-radius: 6px;
  background: none;
  color: var(--q-text-hint);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}
.quiz-screen .answer-clear:hover:not(:disabled) { color: var(--q-text-muted); }
.quiz-screen .answer-clear:disabled { opacity: 0.5; cursor: default; }

/* Fill in the blanks — width is still grown inline by buildFillBlankInput. */
.quiz-screen .sentence-card {
  padding: 24px 20px;
  border-radius: 16px;
  border: 1px solid var(--q-border);
  background: #fff;
  box-shadow: var(--q-card-shadow);
}
.quiz-screen .fb-sentence { gap: 10px 8px; font-size: 18px; line-height: 24px; color: var(--q-text-body); }
.quiz-screen input[type="text"].fb-blank-input {
  height: 44px;
  min-width: 64px;
  padding: 0 12px;
  border-radius: 10px;
  border: 2px solid var(--q-primary);
  background: var(--q-blank-bg);
  box-shadow: 0 0 0 3px var(--q-soft-border);
  color: var(--q-text-strong);
  font-size: 17px;
  font-weight: 600;
  text-align: left;
}
.quiz-screen input[type="text"].fb-blank-input:not(.filled):not(:focus) {
  height: 30px;
  min-width: 116px;
  border: 1px dashed var(--q-border-strong);
  border-radius: 8px;
  background: var(--q-subtle);
  box-shadow: none;
  font-size: 14px;
  font-weight: 400;
}
.quiz-screen .fb-blank-input::placeholder { color: var(--q-text-hint); font-size: 14px; font-weight: 400; }
.quiz-screen .fb-blank-chip {
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 12px;
  border-width: 2px;
  font-size: 17px;
  font-weight: 600;
}
.quiz-screen .fb-blank-chip.correct { border-color: var(--q-success-icon); background: var(--q-success-bg); color: var(--q-success-text); }
.quiz-screen .fb-blank-chip.wrong { border-color: var(--q-danger); background: var(--q-danger-bg); color: var(--q-danger); }
.quiz-screen .fb-answer-reveal { margin: 8px 0 0; color: var(--q-success-text); }

/* Poll reason */
.quiz-screen .reason-box {
  margin-top: 4px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-radius: 16px;
  border: 1px dashed var(--q-border);
  background: var(--q-reason-bg);
}
.quiz-screen .reason-head { display: flex; align-items: center; gap: 6px; color: var(--q-text-letter); }
.quiz-screen .reason-label { flex: 1; font-size: 13px; font-weight: 600; }
.quiz-screen .reason-count { font-size: 12px; font-weight: 500; color: var(--q-text-hint); }
.quiz-screen .reason-box textarea {
  min-height: 54px;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid var(--q-border);
  background: #fff;
  font-size: 14px;
  resize: vertical;
}
.quiz-screen .reason-box textarea::placeholder { color: var(--q-text-hint); }

.quiz-screen .feedback-banner { margin-top: 16px; border-radius: 16px; }

/* Bottom bar: timer bar pinned on top, Skip + the tactile button */
.quiz-screen .quiz-bottombar {
  position: sticky;
  bottom: 0;
  z-index: 2;
  background: #fff;
  box-shadow: none;
  border-top: 1px solid var(--q-divider);
}
.quiz-screen .quiz-bottombar:has(.timer-track) { border-top: none; }
.quiz-screen .timer-track { height: 4px; background: var(--q-divider); }
.quiz-screen .timer-track .progress-fill {
  border-radius: 0 2px 2px 0;
  background: var(--q-primary);
  transition: width 1s linear, background-color 0.5s ease;
}
.quiz-screen .timer-track .progress-fill.urgent { background: var(--q-danger); }
.quiz-screen .quiz-bottombar .bar-row {
  justify-content: flex-start;
  padding: 12px 20px calc(12px + env(safe-area-inset-bottom, 0px));
}
.quiz-screen .quiz-skip {
  padding: 12px 20px;
  border: none;
  border-radius: 12px;
  background: none;
  color: var(--q-text-muted);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
.quiz-screen .quiz-skip:hover:not(:disabled) { background: var(--q-subtle); }
.quiz-screen .quiz-skip:disabled { opacity: 0.35; cursor: not-allowed; }
/* 48px face + a 4px darker edge (the box-shadow) = 52px; the face drops 3px when pressed. */
.quiz-screen .tactile-btn {
  margin: 0 0 4px auto;
  width: 200px;
  max-width: 100%;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: none;
  border-radius: 16px;
  background: var(--q-primary);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 0 var(--q-primary-dark), 0 10px 22px color-mix(in srgb, var(--accent) 32%, transparent);
  transition: transform 80ms ease, box-shadow 80ms ease;
}
.quiz-screen .tactile-btn svg { width: 18px; height: 18px; }
.quiz-screen .tactile-btn:active:not(:disabled) {
  transform: translateY(3px);
  box-shadow: 0 1px 0 var(--q-primary-dark), 0 4px 10px color-mix(in srgb, var(--accent) 25%, transparent);
}
.quiz-screen .tactile-btn:disabled {
  background: var(--q-disabled-face);
  box-shadow: 0 4px 0 var(--q-disabled-edge);
  cursor: not-allowed;
}
.quiz-screen .tactile-btn.wide { width: auto; flex: 1; margin-left: 24px; }