/* ScholarsDome 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=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,700;12..96,800&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: 'Bricolage Grotesque', '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; }
.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; }
}