/* JAMB Quest x JAMB Quest look: cream paper, navy ink, amber blocks, hard offset shadows.
   Loaded AFTER each page's own <style>, so it only re-skins (no logic changes). */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=DM+Sans:wght@400;500;600;700&display=swap');

:root {
  --qn: #12263f;           /* navy */
  --qn2: #1c3558;
  --qa: #f5a62b;           /* amber */
  --qg: #3a8a5a;           /* green */
  --qr: #b03a52;           /* red */
  --qshadow: #dcd6c5;      /* hard grey offset shadow */
  --qb: #12263f;           /* border on paper */

  --navy-950: #0d1e33; --navy-900: #12263f; --navy-800: #12263f;
  --navy-700: #1c3558; --navy-600: #2a4a75;
  --gold-600: #a86a0a; --gold-500: #f5a62b; --gold-400: #f5a62b; --gold-300: #f8c56a;
  --paper-50: #f7f2e6; --paper-100: #fcf9f1;
  --ink-900: #12263f; --ink-700: #3d4c60; --ink-500: #6b7685; --ink-300: #a3a9b2;
  --line: #d9d2bf;
  --green-600: #3a8a5a; --green-100: #e2efe6;
  --red-600: #b03a52; --red-100: #f6e3e7;
  --amber-600: #a86a0a;
  --radius-sm: 0px; --radius-md: 0px; --radius-lg: 0px;
  --font-serif: 'Space Grotesk', 'DM Sans', system-ui, sans-serif;
  --font-sans: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
/* Locked to cream (like JAMB Quest): phone dark mode and the saved theme choice are ignored */
:root, :root:not([data-theme="light"]), :root[data-theme="dark"], :root[data-theme="light"] {
  color-scheme: light;
  --paper-50: #f7f2e6; --paper-100: #fcf9f1;
  --ink-900: #12263f; --ink-700: #3d4c60; --ink-500: #6b7685; --ink-300: #a3a9b2;
  --line: #d9d2bf; --green-100: #e2efe6; --red-100: #f6e3e7;
  --qshadow: #dcd6c5; --qb: #12263f;
}
[data-theme-btn] { display: none !important; }

/* ---- base ---- */
html, body { font-family: var(--font-sans); }
body {
  background-color: var(--paper-50);
  background-image: linear-gradient(rgba(18,38,63,.045) 1px, transparent 1px);
  background-size: 100% 34px;
}
h1, h2, h3, .stat-num { font-family: var(--font-serif); letter-spacing: -0.035em; font-weight: 800; }
h1 { line-height: 1.02; }
.section-label, .section-title {
  font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-500);
}

/* ---- buttons ---- */
.btn-primary {
  background: var(--qn); color: #f7f2e6; border: 0; border-radius: 0;
  border-right: 5px solid var(--qa); border-bottom: 5px solid var(--qa);
  font-weight: 700; letter-spacing: .01em;
}
.btn-primary:disabled { background: var(--ink-300); border-color: var(--line); }
.btn-secondary {
  background: var(--paper-100); color: var(--ink-900); border: 2px solid var(--qb); border-radius: 0;
  box-shadow: 4px 4px 0 var(--qshadow); font-weight: 700;
}
.btn-ghost { text-transform: uppercase; letter-spacing: .12em; font-size: 12px; }

/* ---- stat tiles (coloured top edge, hard shadow) ---- */
.stat-row { gap: 10px; background: none; border: 0; overflow: visible; }
.stat-cell {
  background: var(--paper-100); border-top: 5px solid var(--qg); text-align: left;
  box-shadow: 4px 4px 0 var(--qshadow); padding: 14px 12px;
}
.stat-cell:nth-child(2) { border-top-color: var(--qa); }
.stat-cell:nth-child(3) { border-top-color: var(--qg); }
.stat-num { font-size: 28px; color: var(--ink-900); }
.stat-label { text-transform: uppercase; letter-spacing: .12em; font-size: 10px; }

/* ---- answer options ---- */
.option-btn {
  border: 2px solid var(--qb); background: var(--paper-100); border-radius: 0;
  box-shadow: 4px 4px 0 var(--qshadow); color: var(--ink-900);
}
.option-btn .opt-letter { border-radius: 0; border: 2px solid var(--qb); color: var(--ink-900); font-family: var(--font-serif); }
.option-btn.selected { background: var(--qn); color: #f7f2e6; border-color: var(--qn); box-shadow: 4px 4px 0 var(--qa); }
.option-btn.selected .opt-letter { background: var(--qa); border-color: var(--qa); color: #12263f; }
.timer { border-radius: 0; }
.progress-fill { background: var(--qa); }
.exam-header { background: var(--qn); border-bottom: 4px solid var(--qa); }

/* ---- generic cards / pills on inner pages ---- */
.brief-card, .card, .panel { border-radius: 0; border: 1.5px solid var(--qb); box-shadow: 5px 5px 0 var(--qshadow); background: var(--paper-100); }
.tab-btn { border-radius: 0; text-transform: uppercase; letter-spacing: .1em; font-size: 12px; font-weight: 700; }
.status-pip { border-radius: 0; text-transform: uppercase; letter-spacing: .1em; }

/* ---- bottom nav: boxed tabs, amber active ---- */
body { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
.bottom-nav {
  left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  padding: 0; gap: 0; background: var(--paper-100);
  border: 2px solid var(--qb); box-shadow: 5px 5px 0 var(--qshadow);
}
.bn-item {
  border-radius: 0; padding: 9px 4px 8px; border-right: 1px solid var(--line);
  text-transform: uppercase; letter-spacing: .1em; font-size: 10px; font-weight: 700; color: var(--ink-500);
}
.bn-item:last-child { border-right: 0; }
.bn-item.active { background: var(--qa); color: #12263f; }
.bn-item.active svg { color: #12263f; }

/* ---- HOME ---- */
.sd-home header {
  background: transparent; padding: 20px 20px 8px; overflow: visible;
}
.sd-home .orbit { display: none; }
.sd-home .brand img { border-radius: 0; box-shadow: 4px 4px 0 var(--qa); width: 40px; height: 40px; }
.sd-home .brand-name { color: var(--ink-900); font-family: var(--font-serif); font-size: 19px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; }
.sd-home .brand-name .accent { color: var(--ink-900); }
.sd-home .brand-name::after {
  content: "UTME PRACTICE SYSTEM"; display: block; font-family: var(--font-sans);
  font-size: 9.5px; font-weight: 600; letter-spacing: .18em; color: var(--ink-500); margin-top: 3px;
}
.sd-home .bell-btn { background: var(--paper-100); border: 1.5px solid var(--line); border-radius: 0; color: var(--ink-900); }
.sd-home .hero-copy { margin-top: 30px; }
.sd-home .hero-copy h1 { color: var(--ink-900); font-size: 44px; max-width: 11ch; }
.sd-home .hero-copy h1 mark { background: var(--qa); color: #12263f; padding: 0 8px; }
.sd-home .hero-copy p { color: var(--ink-700); font-size: 16px; max-width: 34ch; }
.sd-home .hist-link { color: var(--ink-900); border: 1.5px solid var(--qb); border-radius: 0; }

#quizList { counter-reset: q; }
.quiz-card {
  position: relative; counter-increment: q; border: 1px solid var(--line); border-radius: 0;
  background: var(--paper-100); box-shadow: 6px 6px 0 var(--qshadow); padding: 16px 44px 16px 16px; margin-bottom: 18px;
}
.quiz-card::before {
  content: counter(q, decimal-leading-zero) " / QUIZ"; display: block; font-size: 10.5px;
  font-weight: 600; letter-spacing: .16em; color: var(--ink-500); margin-bottom: 8px;
}
.quiz-card::after {
  content: "\2192"; position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
  font-size: 22px; color: var(--ink-900);
}
.quiz-card h3 { font-size: 22px; line-height: 1.1; margin-top: 0; color: var(--ink-900); }
.quiz-card .qc-tag { background: var(--qa); color: #12263f; border-radius: 0; letter-spacing: .08em; text-transform: uppercase; }
.quiz-card .qc-meta { color: var(--ink-500); }
.quiz-card:nth-child(3n+1) { background: var(--qn); border-color: var(--qn); box-shadow: 6px 0 0 var(--qa); }
.quiz-card:nth-child(3n+1)::before { color: #aab4c3; }
.quiz-card:nth-child(3n+1)::after, .quiz-card:nth-child(3n+1) h3 { color: #f7f2e6; }
.quiz-card:nth-child(3n+1) .qc-meta { color: #c3cbd7; }
.quiz-card:nth-child(3n) { background: var(--qa); border: 2px solid var(--qb); box-shadow: 6px 6px 0 var(--qn); }
.quiz-card:nth-child(3n)::before, .quiz-card:nth-child(3n) .qc-meta { color: #5b3d08; }
.quiz-card:nth-child(3n) .qc-tag { background: var(--qn); color: #f7f2e6; }
.empty-state { border: 2px dashed var(--line); border-radius: 0; background: var(--paper-100); }
footer { letter-spacing: .08em; text-transform: uppercase; font-size: 10.5px; }

/* PIN pad + splash */
.pin-card { border-radius: 0; border: 2px solid var(--qb); box-shadow: 6px 6px 0 var(--qa); }
.pin-dot { border-radius: 0; } .pin-key { border-radius: 0; border: 1.5px solid var(--qb); font-family: var(--font-serif); }
.pin-key:active { background: var(--qa); }
#splash { background: var(--qn) !important; }
#splash .mark-wrap { border-radius: 0; box-shadow: 10px 10px 0 var(--qa) !important; animation: markIn .9s cubic-bezier(.2,.8,.25,1) .15s forwards !important; }
#splash .splash-brand { font-family: var(--font-serif); font-size: 34px; letter-spacing: -0.035em; font-weight: 800; }
#splash .splash-progress { border-radius: 0; } #splash .skip-btn { border-radius: 0; }

/* ================================================================
   Home: skip the intro splash when it already played recently
   (the flag is set by a tiny script in <head> of index.html)
   ================================================================ */
html.sd-seen #splash { display: none !important; }

/* ================================================================
   ADMIN x Quest look  (only applies when <body class="sd-admin">)
   Same cream paper, navy ink, amber blocks, square corners, hard shadows.
   Prefix ":root body.sd-admin" beats the old dark-mode rules in admin/index.html.
   ================================================================ */
:root body.sd-admin { padding-bottom: env(safe-area-inset-bottom, 0px); }

/* PIN gate */
:root body.sd-admin #gate { background: var(--qn); background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px); background-size: 100% 34px; }
:root body.sd-admin .gate-card { border-radius: 0; background: var(--paper-100); border: 2px solid var(--qb); box-shadow: 8px 8px 0 var(--qa); }
:root body.sd-admin .gate-card h3 { font-size: 22px; }
:root body.sd-admin .gate-card p { text-transform: uppercase; letter-spacing: .14em; font-size: 10.5px; }
:root body.sd-admin .pin-dot { border: 2px solid var(--qb); }
:root body.sd-admin .pin-dot.filled { background: var(--qa); border-color: var(--qb); }
:root body.sd-admin .pin-error { color: var(--qr); }

/* header + tabs */
:root body.sd-admin header { background: var(--qn); border-bottom: 4px solid var(--qa); color: #f7f2e6; }
:root body.sd-admin header h1 { font-size: 15px; letter-spacing: -0.03em; line-height: 1.1; white-space: nowrap; }
:root body.sd-admin header h1 .accent { color: var(--qa); }
:root body.sd-admin header h1::after { content: "ADMIN CONSOLE"; display: block; font-family: var(--font-sans); font-size: 9.5px; font-weight: 600; letter-spacing: .18em; color: #aab4c3; margin-top: 3px; }
:root body.sd-admin .lock-btn { white-space: nowrap; color: #c3cbd7; text-transform: uppercase; letter-spacing: .12em; font-size: 11px; font-weight: 700; }
:root body.sd-admin nav.tabs { background: rgba(255,255,255,.07); border-radius: 0; padding: 3px; gap: 3px; }
:root body.sd-admin nav.tabs button { border-radius: 0; color: #c3cbd7; font-size: 11px; padding: 9px 12px; }
:root body.sd-admin nav.tabs button.active { background: var(--qa); color: #12263f; }
:root body.sd-admin .refresh-btn { border-radius: 0; background: transparent; color: #f7f2e6; border: 1.5px solid #5d7394; text-transform: uppercase; letter-spacing: .06em; font-size: 10px; padding: 7px 9px; white-space: nowrap; }
:root body.sd-admin header .h-row > div { gap: 8px !important; }
:root body.sd-admin main { padding-top: 22px; }

/* stat tiles (coloured top edge + hard shadow, like the Home stat tiles) */
:root body.sd-admin .stat-box { background: var(--paper-100); border: 0; border-top: 5px solid var(--qg); border-radius: 0; box-shadow: 4px 4px 0 var(--qshadow); padding: 14px 12px; }
:root body.sd-admin .stat-box:nth-child(3n+2) { border-top-color: var(--qa); }
:root body.sd-admin .stat-box:nth-child(3n) { border-top-color: var(--qn); }
:root body.sd-admin .stat-box .num { color: var(--ink-900); font-size: 28px; font-weight: 800; letter-spacing: -0.035em; }
:root body.sd-admin .stat-box .lbl { text-transform: uppercase; letter-spacing: .12em; font-size: 10px; font-weight: 600; }

/* cards and rows */
:root body.sd-admin .attempt-row,
:root body.sd-admin .quiz-admin-card,
:root body.sd-admin .v2-card,
:root body.sd-admin .upload-panel,
:root body.sd-admin .validation-box { border-radius: 0; background: var(--paper-100); border: 1.5px solid var(--qb); box-shadow: 4px 4px 0 var(--qshadow); }
:root body.sd-admin .upload-panel { border-style: dashed; box-shadow: none; }
:root body.sd-admin .validation-box { box-shadow: none; background: var(--paper-50); }
:root body.sd-admin .attempt-row { margin-bottom: 12px; }
:root body.sd-admin .attempt-row .ar-name,
:root body.sd-admin .quiz-admin-card h4 { font-family: var(--font-serif); letter-spacing: -0.02em; }
:root body.sd-admin .attempt-row .ar-flag { border-radius: 0; text-transform: uppercase; letter-spacing: .08em; background: var(--red-100); }
:root body.sd-admin .section-title { color: var(--ink-500); }

/* status pills, chips, tags */
:root body.sd-admin .status-pill,
:root body.sd-admin .v2-tag { border-radius: 0; text-transform: uppercase; letter-spacing: .1em; }
:root body.sd-admin .status-pill.published { background: var(--green-100); color: var(--qg); border: 1px solid var(--qg); }
:root body.sd-admin .status-pill.draft { background: var(--red-100); color: var(--qr); border: 1px solid var(--qr); }
:root body.sd-admin .status-pill.archived { background: var(--paper-50); color: var(--ink-500); border: 1px solid var(--line); }
:root body.sd-admin .v2-tag { background: var(--qa); color: #12263f; }
:root body.sd-admin .v2-warn { background: var(--red-100); color: var(--qr); }
:root body.sd-admin .v2-live { border-radius: 0; background: var(--green-100); }
:root body.sd-admin .filter-chip { border-radius: 0; border: 1.5px solid var(--qb); background: var(--paper-100); color: var(--ink-900); text-transform: uppercase; letter-spacing: .08em; font-size: 11px; }
:root body.sd-admin .filter-chip.active { background: var(--qn); color: #f7f2e6; border-color: var(--qn); box-shadow: 3px 3px 0 var(--qa); }

/* buttons */
:root body.sd-admin .btn-primary,
:root body.sd-admin .sd-feedback-item button,
:root body.sd-admin .sd-admin-action { background: var(--qn); color: #f7f2e6; border: 0; border-radius: 0; border-right: 5px solid var(--qa); border-bottom: 5px solid var(--qa); font-weight: 700; letter-spacing: .01em; padding: 11px 18px; }
:root body.sd-admin .btn-secondary { border-radius: 0; background: var(--paper-100); color: var(--ink-900); border: 2px solid var(--qb); box-shadow: 4px 4px 0 var(--qshadow); padding: 9px 16px; }
:root body.sd-admin .btn-primary:disabled,
:root body.sd-admin .sd-admin-action:disabled { background: var(--ink-300); border-color: var(--line); }

/* form fields */
:root body.sd-admin .field-group input[type=text],
:root body.sd-admin .field-group input[type=number],
:root body.sd-admin .field-group input[type=datetime-local],
:root body.sd-admin .field-group textarea,
:root body.sd-admin .field-group select,
:root body.sd-admin .admin-search-row input,
:root body.sd-admin .admin-search-row select,
:root body.sd-admin .v2-sheet input:not([type=checkbox]),
:root body.sd-admin .v2-sheet textarea,
:root body.sd-admin #tab-security input:not([type=checkbox]),
:root body.sd-admin #tab-security textarea,
:root body.sd-admin #tab-security select,
:root body.sd-admin .sd-feedback-controls input,
:root body.sd-admin .sd-feedback-controls select,
:root body.sd-admin .sd-feedback-item select,
:root body.sd-admin .sd-feedback-item textarea { border-radius: 0; border: 2px solid var(--qb); background: var(--paper-100); color: var(--ink-900); }
:root body.sd-admin .field-group input:focus,
:root body.sd-admin .field-group textarea:focus,
:root body.sd-admin .field-group select:focus,
:root body.sd-admin .admin-search-row input:focus,
:root body.sd-admin .v2-sheet input:focus,
:root body.sd-admin .v2-sheet textarea:focus { outline: 0; box-shadow: 3px 3px 0 var(--qa); }
:root body.sd-admin .field-group label,
:root body.sd-admin .v2-sheet label { text-transform: uppercase; letter-spacing: .1em; font-size: 10.5px; }
:root body.sd-admin .switch .slider { border-radius: 0; background: var(--line); border: 1.5px solid var(--qb); }
:root body.sd-admin .switch .slider:before { border-radius: 0; background: var(--qb); left: 2px; top: 2px; }
:root body.sd-admin .switch input:checked + .slider { background: var(--qa); }
:root body.sd-admin .toggle-row { border-bottom-color: var(--line); }

/* sheets, toast, avatars, chart bars */
:root body.sd-admin .v2-ov { background: rgba(18,38,63,.6); }
:root body.sd-admin .v2-sheet { border-radius: 0; background: var(--paper-50); border-top: 5px solid var(--qa); box-shadow: 0 -6px 0 var(--qn); }
:root body.sd-admin .v2-av { border-radius: 0; border: 2px solid var(--qb); box-shadow: 3px 3px 0 var(--qa); }
:root body.sd-admin .v2-av-i { background: var(--qn); color: #f7f2e6; }
:root body.sd-admin .v2-bars { border-bottom: 2px solid var(--qb); }
:root body.sd-admin .v2-bar i { background: var(--qa); border-radius: 0; border-top: 3px solid var(--qn); }
:root body.sd-admin .toast { border-radius: 0; background: var(--qn); border-left: 5px solid var(--qa); box-shadow: 4px 4px 0 var(--qshadow); }

/* older "sync / health / feedback" blocks were dark-only: bring them onto cream */
:root body.sd-admin .sd-admin-stat,
:root body.sd-admin .sd-admin-card { background: var(--paper-100); color: var(--ink-900); border: 1.5px solid var(--qb); border-radius: 0; box-shadow: 4px 4px 0 var(--qshadow); }
:root body.sd-admin .sd-admin-stat strong { color: var(--ink-900); font-family: var(--font-serif); font-weight: 800; letter-spacing: -0.035em; }
:root body.sd-admin .sd-admin-stat span,
:root body.sd-admin .sd-muted { color: var(--ink-500); }
:root body.sd-admin .sd-admin-table td,
:root body.sd-admin .sd-admin-table th { border-bottom: 1px solid var(--line); }
:root body.sd-admin .sd-admin-table th { text-transform: uppercase; letter-spacing: .1em; font-size: 10.5px; color: var(--ink-500); }
:root body.sd-admin .sd-admin-issue { border-left: 4px solid var(--qa); background: rgba(245,166,43,.14); }

/* =====================================================================
   SMOOTH + LIVE (20261009): a few calm, real-time effects. All switch off
   for people who turn on "reduce motion" in their phone.
   1 orbit ring with a travelling dot   2 quiz cards rise in one by one
   3 soft press feedback on buttons     4 sheets slide up smoothly
   5 badge pop-up with a pulsing glow ring
   ===================================================================== */

/* 1. Orbit rings are back on Home, softer, with a small dot flying round */
.sd-home .orbit { display: block; top: -50px; right: -52px; opacity: .55; }
/* Screen fit: the ring bleeds past the right edge on purpose; clip it inside the header so the page is never wider than the phone (was 52px too wide, which made phones zoom out). */
.sd-home header { overflow: hidden; overflow: clip; }
.orbit::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px;
  border-radius: 50%; background: var(--qa); box-shadow: 0 0 0 3px rgba(245,166,43,.22), 0 0 14px 3px rgba(245,166,43,.55);
  animation: sdOrbitDot 7s linear infinite;
}
@keyframes sdOrbitDot { from { transform: rotate(0deg) translateX(110px); } to { transform: rotate(360deg) translateX(110px); } }

/* 2. Quiz cards rise in, one after another */
@keyframes sdRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.quiz-card { animation: sdRise .5s cubic-bezier(.2,.8,.2,1) both; }
.quiz-card:nth-child(2) { animation-delay: .06s; } .quiz-card:nth-child(3) { animation-delay: .12s; }
.quiz-card:nth-child(4) { animation-delay: .18s; } .quiz-card:nth-child(5) { animation-delay: .24s; }
.quiz-card:nth-child(n+6) { animation-delay: .3s; }

/* 3. Buttons and cards feel soft to press */
button, .btn-primary, .btn-secondary, .quiz-card, .tab-btn, [data-tab] { transition: transform .14s ease, box-shadow .14s ease, background-color .18s ease, border-color .18s ease; }
.btn-primary:active, .btn-secondary:active, button:active:not(:disabled) { transform: translate(2px, 2px) scale(.985); }
.quiz-card:active { transform: translate(2px, 2px); }

/* 4. Sheets: backdrop fades, sheet glides up */
@keyframes sdFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes sdSheetUp { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.v2-ov { animation: sdFade .2s ease both; }
.v2-sheet { animation: sdSheetUp .28s cubic-bezier(.2,.9,.25,1) both; }
body.sd-admin .toast { transition: opacity .25s ease, transform .3s cubic-bezier(.2,.9,.25,1); }

/* 5. Badge pop-up */
@keyframes sdPop { 0% { opacity: 0; transform: scale(.9) translateY(14px); } 60% { transform: scale(1.02); } 100% { opacity: 1; transform: none; } }
@keyframes sdGlow { 0%, 100% { box-shadow: 0 0 0 0 rgba(217,185,104,.55); } 50% { box-shadow: 0 0 0 14px rgba(217,185,104,0); } }
.sd-ach-overlay { animation: sdFade .25s ease both; }
.sd-ach-modal { animation: sdPop .45s cubic-bezier(.2,.9,.25,1) both; }
.sd-ach-canvas { animation: sdGlow 2.4s ease-in-out infinite; }

/* Admin Edit quiz: images */
.eq-img { display: grid; gap: 10px; }
.eq-img-row { display: flex; gap: 12px; align-items: center; }
.eq-thumb { width: 112px; height: 76px; flex: none; border: 2px dashed var(--ink-300); background: var(--paper-100); display: flex; align-items: center; justify-content: center; overflow: hidden; font-size: 12px; color: var(--ink-500); text-align: center; }
.eq-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.eq-pop img { animation: sdPop .3s ease both; }
.eq-img-side { display: grid; gap: 8px; font-size: 13px; }
.eq-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.eq-pick, .eq-rm { text-transform: none !important; letter-spacing: 0 !important; display: inline-flex !important; align-items: center; justify-content: center; margin: 0 !important; flex: none !important; cursor: pointer; font: inherit; font-size: 13px !important; font-weight: 700; padding: 8px 12px; border: 2px solid var(--qb); background: var(--paper-100); color: var(--qb) !important; border-radius: 0; box-shadow: 3px 3px 0 var(--qshadow); }
.eq-rm { background: var(--red-100); color: var(--qr) !important; border-color: var(--qr); }
.eq-rm.eq-sure { background: var(--qr); color: #fff !important; }
.eq-qimgs { display: grid; gap: 8px; }
.eq-qrow { display: flex; gap: 10px; align-items: center; padding: 8px; background: var(--paper-100); border: 1px solid var(--line); transition: opacity .25s ease, transform .25s ease, max-height .25s ease; max-height: 120px; }
.eq-qrow img { width: 64px; height: 48px; object-fit: cover; flex: none; background: var(--line); }
.eq-qtxt { flex: 1; min-width: 0; font-size: 12.5px; color: var(--ink-700); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.eq-qtxt span { font-weight: 800; color: var(--ink-900); }
.eq-gone { opacity: 0; transform: translateX(24px); max-height: 0; padding-top: 0; padding-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
  .orbit::after, .quiz-card, .v2-ov, .v2-sheet, .sd-ach-overlay, .sd-ach-modal, .sd-ach-canvas, .eq-pop img { animation: none !important; }
  button, .btn-primary, .btn-secondary, .quiz-card { transition: none !important; }
}

/* =====================================================================
   ADMIN: FIT THE PHONE SCREEN (20261009b)
   Wide tables / long text used to stretch the whole page sideways, so the
   phone zoomed out. Now wide things scroll inside their own box and the
   page itself never gets wider than the screen. Sign out is a real button.
   ===================================================================== */
:root body.sd-admin { overflow-x: hidden; max-width: 100vw; }
:root body.sd-admin #app, :root body.sd-admin main, :root body.sd-admin .tab-panel { max-width: 100%; min-width: 0; }
:root body.sd-admin .sd-admin-card,
:root body.sd-admin .v2-card { max-width: 100%; overflow-x: auto; overflow-wrap: anywhere; -webkit-overflow-scrolling: touch; }
:root body.sd-admin table { max-width: 100%; }
:root body.sd-admin .sd-admin-table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
:root body.sd-admin .sd-admin-table td, :root body.sd-admin .sd-admin-table th { overflow-wrap: anywhere; word-break: break-word; min-width: 90px; }
:root body.sd-admin .sd-admin-table td:nth-child(4) { min-width: 160px; }
:root body.sd-admin .sd-feedback-item, :root body.sd-admin .sd-feedback-item * { min-width: 0; max-width: 100%; box-sizing: border-box; overflow-wrap: anywhere; }
:root body.sd-admin .sd-feedback-item textarea, :root body.sd-admin .sd-feedback-item select, :root body.sd-admin .sd-feedback-item input { width: 100%; }
:root body.sd-admin .sd-feedback-controls { display: grid; grid-template-columns: 1fr; gap: 8px; }
:root body.sd-admin .sd-feedback-controls > * { min-width: 0; width: 100%; box-sizing: border-box; }
:root body.sd-admin .sd-admin-row { flex-wrap: wrap; gap: 8px; }
:root body.sd-admin .sd-admin-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); }
:root body.sd-admin img, :root body.sd-admin canvas { max-width: 100%; }
:root body.sd-admin input, :root body.sd-admin select, :root body.sd-admin textarea { max-width: 100%; box-sizing: border-box; }

/* Sign out: a clear, easy-to-tap button */
:root body.sd-admin .lock-btn {
  min-height: 40px; padding: 8px 14px; border: 2px solid #f5a62b !important; background: transparent !important;
  color: #f5a62b !important; font-weight: 800; letter-spacing: .1em; border-radius: 0; cursor: pointer;
}
:root body.sd-admin .lock-btn:active { background: #f5a62b !important; color: #12263f !important; }
@media (max-width: 480px) {
  :root body.sd-admin .refresh-btn, :root body.sd-admin .lock-btn { min-height: 40px; }
}
:root body.sd-admin .h-row { flex-wrap: wrap; gap: 10px; }
:root body.sd-admin .h-row h1 { min-width: 0; flex: 1 1 180px; }
:root body.sd-admin .h-actions { flex: 0 0 auto; }
:root body.sd-admin .lock-btn, :root body.sd-admin .refresh-btn { padding: 8px 10px; font-size: 11px; white-space: nowrap; }

/* ================================================================
   PROFILE / CORRECTIONS (history/) - same Quest look: cream, navy, amber.
   The page uses its own names (--gold, --navy, .chip, .qcard, .corrnav ...), so they are mapped here.
   ================================================================ */
body.sd-history { --gold: var(--qa); --navy: var(--qn); --green: var(--qg); --red: var(--qr); --gold-600: #a86a0a; }
body.sd-history button, body.sd-history input, body.sd-history textarea { font-family: inherit; }
body.sd-history h1, body.sd-history h2, body.sd-history h3, body.sd-history .brand b { font-family: var(--font-serif); letter-spacing: -0.035em; font-weight: 800; }

/* header: flat navy with amber edge */
body.sd-history header { background: var(--qn); border-bottom: 4px solid var(--qa); color: #f7f2e6; padding-bottom: 20px; }
body.sd-history .brand img { border-radius: 0; border: 0; box-shadow: 4px 4px 0 var(--qa); }
body.sd-history .brand b { color: #f7f2e6; font-size: 19px; line-height: 1.05; }
body.sd-history .brand b span { color: var(--qa); }
body.sd-history .home-link { border-radius: 0; border: 1.5px solid #5d7394; color: #f7f2e6; text-transform: uppercase; letter-spacing: .1em; font-size: 11.5px; font-weight: 700; }
body.sd-history h1 { color: #f7f2e6; font-size: 34px; line-height: 1.02; }
body.sd-history header p { color: #c3cbd7; }

/* cards */
body.sd-history .row, body.sd-history .qcard, body.sd-history .stat, body.sd-history .pcard,
body.sd-history .profile-preferences, body.sd-history .profile-trend-card, body.sd-history .achievement-section,
body.sd-history .guest-profile-note, body.sd-history .profile-empty, body.sd-history .lbnote {
  border-radius: 0; border: 2px solid var(--qb); background: var(--paper-100); box-shadow: 4px 4px 0 var(--qshadow);
}
body.sd-history .stat { border: 0; border-top: 5px solid var(--qg); }
body.sd-history .stat:nth-child(2n) { border-top-color: var(--qa); }
body.sd-history .stat b { font-family: var(--font-serif); font-size: 26px; letter-spacing: -0.035em; }
body.sd-history .stat span { text-transform: uppercase; letter-spacing: .1em; font-size: 10px; font-weight: 600; }
body.sd-history .lbnote, body.sd-history .guest-profile-note, body.sd-history .profile-empty { box-shadow: none; border-width: 1.5px; }
body.sd-history .title { font-family: var(--font-serif); font-size: 17px; letter-spacing: -0.02em; font-weight: 800; }
body.sd-history .quiz-history-head h2, body.sd-history .profile-preferences h2, body.sd-history .profile-trend-card h2, body.sd-history .achievement-section h2 { font-size: 20px; }
body.sd-history .qhead { text-transform: uppercase; letter-spacing: .08em; font-size: 11px; font-weight: 600; }
body.sd-history .pill { text-transform: uppercase; letter-spacing: .1em; }
body.sd-history .qtext { font-size: 16.5px; line-height: 1.5; font-weight: 500; }
body.sd-history .qimg { border-radius: 0; border: 1.5px solid var(--qb); }

/* links that were gold text (low contrast on cream) become navy with an amber underline */
body.sd-history .again { color: var(--qn); text-decoration: underline; text-decoration-color: var(--qa); text-decoration-thickness: 3px; text-underline-offset: 4px; font-weight: 700; }

/* filter chips: square, navy outline, amber when selected */
body.sd-history .chip { border-radius: 0; border: 2px solid var(--qb); background: var(--paper-100); color: var(--ink-900); font-weight: 700; box-shadow: 3px 3px 0 var(--qshadow); }
body.sd-history .chip.on { background: var(--qa); color: var(--qn); border-color: var(--qb); box-shadow: 3px 3px 0 var(--qn); }

/* answer options */
body.sd-history .opt { border-radius: 0; border: 2px solid var(--qb); background: var(--paper-100); box-shadow: 3px 3px 0 var(--qshadow); }
body.sd-history .opt b { font-family: var(--font-serif); font-weight: 800; }
body.sd-history .opt.right { border-color: var(--qg); background: var(--green-100); box-shadow: 3px 3px 0 var(--qg); }
body.sd-history .opt.wrong { border-color: var(--qr); background: var(--red-100); box-shadow: 3px 3px 0 var(--qr); }
body.sd-history .opt small { text-transform: uppercase; letter-spacing: .08em; }
body.sd-history .why { border-top: 2px dashed var(--line); }

/* Previous / Next bar and back buttons */
body.sd-history .corrnav { background: var(--paper-50); border-top: 2px solid var(--qb); }
body.sd-history .corrnav button, body.sd-history .backbtn, body.sd-history .fbwrap button {
  border-radius: 0; border: 2px solid var(--qb); background: var(--paper-100); color: var(--qn); font-weight: 700; box-shadow: 4px 4px 0 var(--qshadow);
}
body.sd-history .corrnav button.next, body.sd-history .backbtn.gold, body.sd-history .btn, body.sd-history .pebtn.primary {
  background: var(--qa); color: var(--qn); border: 2px solid var(--qb); border-radius: 0; box-shadow: 4px 4px 0 var(--qn);
}
body.sd-history .corrnav button:active, body.sd-history .backbtn:active, body.sd-history .chip:active, body.sd-history .btn:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--qshadow); }
body.sd-history .corrnav button:disabled { opacity: .4; box-shadow: none; }
body.sd-history .corrnav span { color: var(--qn); font-weight: 800; }
body.sd-history .btn { text-transform: uppercase; letter-spacing: .06em; font-size: 13px; }

/* leaderboard rows */
body.sd-history .lbrow { border-bottom: 1.5px solid var(--line); }
body.sd-history .lbrow.me { background: var(--green-100); border-radius: 0; border-left: 5px solid var(--qg); }
body.sd-history .lbrow .rk.top { color: var(--qa); }

/* profile card + edit sheet */
body.sd-history .pav { border-radius: 0; border: 2px solid var(--qb); box-shadow: 4px 4px 0 var(--qa); background: var(--qn); }
body.sd-history .pedit { border-radius: 0; border: 2px solid var(--qb); background: var(--qa); color: var(--qn); text-transform: uppercase; letter-spacing: .08em; font-size: 11.5px; }
body.sd-history .pesheet, body.sd-history .fbcard { border-radius: 0; border: 2px solid var(--qb); background: var(--paper-50); }
body.sd-history .pesheet { border-bottom: 0; border-top: 5px solid var(--qa); }
body.sd-history .pebtn { border-radius: 0; border: 2px solid var(--qb); box-shadow: 3px 3px 0 var(--qshadow); }
body.sd-history .pebtn.danger { color: var(--qr); border-color: var(--qr); }
body.sd-history .pesheet textarea, body.sd-history .fbcard textarea { border-radius: 0; border: 2px solid var(--qb); }
body.sd-history .fbseg button { border-radius: 0; border: 2px solid var(--qb); }
body.sd-history .fbseg button.on { background: var(--qn); color: #f7f2e6; }
body.sd-history .fbact button { border-radius: 0; border: 2px solid var(--qb); }
body.sd-history .fbact .send { background: var(--qa); color: var(--qn); border: 2px solid var(--qb); }
body.sd-history .fbstars button.on { color: var(--qa); }
body.sd-history .achievement-count { border-radius: 0; border: 1.5px solid var(--qb); background: var(--qa); color: var(--qn); }

/* ---- DAILY CHALLENGE: three leaderboards (Overall / Subjects / one subject) ---- */
.lb-tabs { display: flex; gap: 8px; margin: 0 0 14px; }
.lb-tab { flex: 1; font: inherit; font-weight: 700; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; padding: 11px 8px; border: 2px solid var(--qb); border-radius: 0; background: var(--paper-100); color: var(--ink-900); cursor: pointer; }
.lb-tab.active { background: var(--qa); box-shadow: 3px 3px 0 var(--qb); }
.lb-subj-card { display: block; width: 100%; text-align: left; font: inherit; margin: 0 0 10px; padding: 12px 14px; border: 2px solid var(--qb); border-radius: 0; background: var(--paper-100); color: var(--ink-900); box-shadow: 3px 3px 0 var(--qshadow); cursor: pointer; }
.lb-subj-card:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--qshadow); }
.lb-subj-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.lb-subj-top b { font-family: var(--font-serif); font-size: 15px; }
.lb-subj-top span { font-size: 11.5px; color: var(--ink-500); font-weight: 600; white-space: nowrap; }
.lb-subj-lead { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 13px; font-weight: 600; }
.lb-subj-lead .sdc-av { margin-right: 0; }

/* ---- PROFILE GRAPHS in the Quest look (weekly trend bars) ---- */
/* History > Profile > Performance trend */
body.sd-history .profile-trend-bars { border-bottom: 2.5px solid var(--qb); gap: 10px; padding: 8px 4px 0; }
body.sd-history .profile-trend-pct { font-weight: 700; color: var(--ink-900); font-size: 10.5px; }
body.sd-history .profile-trend-label { text-transform: uppercase; letter-spacing: .02em; font-size: 8.5px; font-weight: 600; color: var(--ink-700); }
body.sd-history .profile-trend-track { width: min(100%, 30px); }
body.sd-history .profile-trend-bar { border-radius: 0; background: var(--qn); border: 2px solid var(--qb); box-shadow: 3px 0 0 var(--qshadow); }
body.sd-history .profile-trend-week:nth-child(2n) .profile-trend-bar { background: var(--qa); }
body.sd-history .profile-trend-week:last-child .profile-trend-bar:not(.empty) { background: var(--qg); }
body.sd-history .profile-trend-week .profile-trend-bar.empty, body.sd-history .profile-trend-week:nth-child(2n) .profile-trend-bar.empty { background: transparent; border: 0; border-top: 2px dashed var(--ink-300); box-shadow: none; }
body.sd-history .trend-delta { border-radius: 0; border: 1.5px solid var(--qb); background: var(--paper-50); text-transform: uppercase; letter-spacing: .08em; font-size: 10px; }
body.sd-history .trend-delta.up { color: var(--qg); }
body.sd-history .trend-delta.down { color: var(--qr); }

/* Quiz results > Profile tab (play/ and mock-week01/) */
.pf-card { border-radius: 0; border: 2px solid var(--qb); background: var(--paper-100); box-shadow: 4px 4px 0 var(--qshadow); }
.pf-card h4 { font-family: var(--font-serif); color: var(--ink-900); letter-spacing: .1em; font-weight: 800; }
.pf-trend { border-bottom: 2.5px solid var(--qb); padding-bottom: 0; gap: 10px; }
.pf-bar { border-radius: 0; background: var(--qn); border: 2px solid var(--qb); box-shadow: 3px 0 0 var(--qshadow); }
.pf-bar-col:nth-child(2n) .pf-bar { background: var(--qa); }
.pf-bar-col .pf-bar.last { background: var(--qg); }
.pf-bar-col .pf-bar.empty, .pf-bar-col:nth-child(2n) .pf-bar.empty { background: transparent; border: 0; border-top: 2px dashed var(--ink-300); box-shadow: none; }
.pf-bar-val { color: var(--ink-900); }
.pf-bar-lbl { text-transform: uppercase; letter-spacing: .02em; font-size: 8.5px; font-weight: 600; color: var(--ink-700); margin-top: 6px; }
.pf-delta .up { color: var(--qg); } .pf-delta .down { color: var(--qr); }

/* ---- v8: Analysis (accuracy / speed / weak spots), Bookmarks and the bookmark quiz ----
   New block only. Used by history/ (profile) and play/ (bookmark button). Nothing above is changed. */
.sdx-card { background: var(--paper-100); border: 2px solid var(--qb); border-radius: 0; box-shadow: 4px 4px 0 var(--qshadow); padding: 14px 14px 16px; margin: 0 0 18px; color: var(--ink-900); }
.sdx-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 10px; }
.sdx-head h2 { font-family: var(--font-serif); font-size: 17px; font-weight: 800; letter-spacing: -.01em; }
.sdx-head p { font-size: 12px; color: var(--ink-500); margin-top: 2px; }
.sdx-badge { min-width: 34px; text-align: center; font-weight: 800; font-size: 14px; padding: 5px 9px; border: 2px solid var(--qb); background: var(--qa); color: var(--qn); }
.sdx-tabs { display: flex; gap: 6px; margin: 0 0 12px; }
.sdx-tab { flex: 1; font: inherit; font-weight: 700; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; padding: 10px 4px; border: 2px solid var(--qb); border-radius: 0; background: var(--paper-100); color: var(--ink-900); cursor: pointer; }
.sdx-tab.on { background: var(--qa); box-shadow: 3px 3px 0 var(--qb); }
.sdx-note { text-align: center; color: var(--ink-700); font-size: 13.5px; line-height: 1.55; padding: 18px 8px; }
.sdx-ok { font-size: 13px; color: var(--qg); font-weight: 600; padding: 4px 0 10px; }
.sdx-h3 { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-500); font-weight: 700; margin: 14px 0 8px; }
.sdx-row { display: block; width: 100%; text-align: left; font: inherit; color: inherit; background: var(--paper-50); border: 2px solid var(--qb); border-radius: 0; padding: 10px 12px; margin: 0 0 8px; }
button.sdx-row { cursor: pointer; }
button.sdx-row:active { transform: translate(2px, 2px); }
.sdx-row-top { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; font-size: 14px; }
.sdx-row-top span { font-size: 12px; font-weight: 700; color: var(--ink-700); white-space: nowrap; }
.sdx-track { height: 9px; background: var(--paper-100); border: 1.5px solid var(--qb); margin-top: 7px; }
.sdx-fill { height: 100%; background: var(--qa); }
.sdx-row.low .sdx-fill { background: var(--qr); }
.sdx-row.mid .sdx-fill { background: var(--qa); }
.sdx-row.high .sdx-fill { background: var(--qg); }
.sdx-sub { font-size: 12px; color: var(--ink-500); margin-top: 6px; line-height: 1.45; }
.sdx-crumbs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 10px; font-size: 12px; color: var(--ink-500); }
.sdx-crumb { font: inherit; font-weight: 700; background: none; border: 0; padding: 2px 0; color: var(--qn); text-decoration: underline; cursor: pointer; }
.sdx-crumb.here { text-decoration: none; cursor: default; color: var(--ink-900); }
.sdx-legend { font-size: 11.5px; color: var(--ink-500); line-height: 1.5; margin-top: 10px; }
.sdx-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0 0 10px; }
.sdx-stat { text-align: center; padding: 10px 4px; border: 2px solid var(--qb); background: var(--paper-50); }
.sdx-stat b { display: block; font-family: var(--font-serif); font-size: 18px; }
.sdx-stat span { font-size: 10.5px; color: var(--ink-500); letter-spacing: .04em; }
.sdx-verdict { font-size: 13px; font-weight: 600; padding: 9px 11px; border: 2px solid var(--qb); margin-bottom: 4px; line-height: 1.45; }
.sdx-verdict.ok { background: var(--green-100); } .sdx-verdict.mid { background: #fbeccb; } .sdx-verdict.bad { background: var(--red-100); }
.sdx-bars { display: flex; align-items: flex-end; gap: 8px; height: 150px; border-bottom: 2.5px solid var(--qb); padding: 0 2px; }
.sdx-bcol { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; background: none; border: 0; padding: 0; font: inherit; cursor: pointer; color: var(--ink-900); }
.sdx-bval { font-size: 9.5px; font-weight: 700; margin-bottom: 3px; white-space: nowrap; }
.sdx-btrack { position: relative; width: min(100%, 30px); flex: 1; display: flex; align-items: flex-end; }
.sdx-bar { width: 100%; background: var(--qn); border: 2px solid var(--qb); box-shadow: 3px 0 0 var(--qshadow); }
.sdx-bar.slow { background: var(--qr); }
.sdx-tline { position: absolute; left: -3px; right: -3px; border-top: 2px dashed var(--qa); pointer-events: none; }
.sdx-blab { font-size: 8.5px; font-weight: 600; letter-spacing: .02em; color: var(--ink-700); margin-top: 6px; }
.sdx-caption { min-height: 18px; margin: 8px 0 0; font-size: 12px; color: var(--ink-500); }
.sdx-unlock { border: 2px dashed var(--qb); padding: 12px; margin: 0 0 12px; background: var(--paper-50); }
.sdx-unlock.ready { border-style: solid; background: var(--green-100); }
.sdx-unlock-text { font-size: 13px; font-weight: 600; color: var(--ink-700); }
.sdx-primary { font: inherit; font-weight: 700; font-size: 14px; width: 100%; padding: 12px 14px; border: 2px solid var(--qb); border-radius: 0; background: var(--qa); color: var(--qn); box-shadow: 3px 3px 0 var(--qb); cursor: pointer; }
.sdx-primary:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--qb); }
.sdx-primary:disabled { background: var(--ink-300); box-shadow: none; cursor: default; }
.sdx-ghost { font: inherit; font-weight: 700; font-size: 14px; padding: 12px 14px; border: 2px solid var(--qb); border-radius: 0; background: var(--paper-100); color: var(--ink-900); cursor: pointer; }
.sdx-ghost:disabled { opacity: .35; cursor: default; }
.sdx-link { font: inherit; font-size: 13px; font-weight: 700; background: none; border: 0; padding: 4px 0; color: var(--qn); text-decoration: underline; cursor: pointer; }
.sdx-link.danger { color: var(--qr); }
.sdx-acts { display: flex; gap: 18px; margin-top: 8px; }
.sdx-bm-item { background: var(--paper-50); border: 2px solid var(--qb); padding: 11px 12px; margin: 0 0 10px; }
.sdx-bm-meta { font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-500); font-weight: 700; margin-bottom: 5px; }
.sdx-bm-q { font-size: 14.5px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.sdx-bm-q.open { display: block; -webkit-line-clamp: unset; }
.sdx-corr { margin-top: 10px; }
.sdx-overlay { position: fixed; inset: 0; z-index: 1000; background: rgba(18, 38, 63, .55); display: flex; justify-content: center; align-items: stretch; }
.sdx-sheet { width: 100%; max-width: 640px; background: var(--paper-50); overflow-y: auto; padding: calc(14px + env(safe-area-inset-top, 0px)) 16px calc(24px + env(safe-area-inset-bottom, 0px)); border-left: 2px solid var(--qb); border-right: 2px solid var(--qb); }
.sdx-qtop { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; font-size: 14px; }
.sdx-meta2 { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-500); font-weight: 700; margin: 14px 0 6px; }
.sdx-opt { display: flex; gap: 12px; align-items: flex-start; width: 100%; text-align: left; font: inherit; font-size: 14.5px; line-height: 1.45; padding: 12px; margin: 0 0 8px; border: 2px solid var(--qb); border-radius: 0; background: var(--paper-100); color: var(--ink-900); box-shadow: 3px 3px 0 var(--qshadow); cursor: pointer; }
.sdx-opt b { min-width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; border: 2px solid var(--qb); font-family: var(--font-serif); }
.sdx-opt.sel { background: var(--qa); }
.sdx-qnav { display: flex; gap: 10px; margin-top: 14px; }
.sdx-qnav .sdx-primary { flex: 1; width: auto; }
.sdx-bigscore { text-align: center; border: 2px solid var(--qb); padding: 16px 10px; margin: 6px 0 12px; background: var(--paper-100); box-shadow: 4px 4px 0 var(--qshadow); }
.sdx-bigscore b { display: block; font-family: var(--font-serif); font-size: 36px; }
.sdx-bigscore span { font-size: 13px; color: var(--ink-700); font-weight: 600; }
.sdx-bigscore.low b { color: var(--qr); } .sdx-bigscore.high b { color: var(--qg); }
.sdx-bm-row { display: flex; align-items: center; gap: 10px; margin: 10px 0 0; }
.sdx-bm-row.corr { margin: 4px 0 10px; }
.sdx-bm-hint { font-size: 12px; color: var(--ink-500); }
.sdx-bm-btn { font: inherit; font-weight: 700; font-size: 13px; padding: 9px 14px; border: 2px solid var(--qb); border-radius: 0; background: var(--paper-100); color: var(--ink-900); cursor: pointer; box-shadow: 2px 2px 0 var(--qshadow); }
.sdx-bm-btn.on { background: var(--qa); color: var(--qn); }
.sdx-bm-btn:disabled { opacity: .6; cursor: default; }
.sdx-bm-btn.compact { padding: 6px 10px; font-size: 12px; }
.sdx-toast { position: fixed; left: 50%; bottom: calc(86px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 2000; max-width: min(90vw, 420px); padding: 11px 14px; background: var(--qn); color: #fff; border: 2px solid var(--qb); font-size: 13px; font-weight: 600; text-align: center; box-shadow: 3px 3px 0 var(--qshadow); }

/* v10 fit-to-screen safety net: nothing may push the page wider than the phone */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-x: clip; max-width: 100%; }
body { max-width: 100%; overflow-x: clip; }
img, svg, video, canvas { max-width: 100%; }