/* =========================================================================
   שאלון התאמה — עיצוב RTL, מינימליסטי ומקצועי ("עסקי, מחמיר").
   פריסה דו-טורית לדסקטופ (פאנל הקשר כהה + אזור השאלה), עם התאמה למובייל.
   מצב בהיר/כהה: ברירת מחדל לפי המערכת, וכפתור להחלפה ידנית (data-theme).
   ========================================================================= */

:root {
  /* light palette */
  --bg: #eef1f7;
  --bg-grad-1: #e7ecf7;
  --bg-grad-2: #eceaf6;
  --surface: #ffffff;
  --surface-2: #f5f7fb;
  --border: #e3e8f0;
  --border-strong: #ccd5e4;
  --text: #14202f;
  --text-soft: #55647a;
  --text-faint: #8894a6;
  --accent: #2f6df6;
  --accent-strong: #1e57d6;
  --accent-soft: #e9f0ff;
  --accent-ring: rgba(47, 109, 246, 0.28);
  --good: #1f9d63;
  --good-soft: #e6f6ee;
  --danger: #d64545;
  --danger-soft: #fdeaea;

  /* dark context rail (constant brand panel; stays dark in both themes) */
  --rail-bg: #0f1729;
  --rail-bg-2: #131c31;
  --rail-text: #e9eefb;
  --rail-muted: #97a4bd;
  --rail-border: rgba(255, 255, 255, 0.10);
  --rail-accent: #6b9bff;

  --shadow-sm: 0 1px 2px rgba(19, 34, 63, 0.06);
  --shadow-md: 0 10px 34px rgba(19, 34, 63, 0.09);
  --shadow-lg: 0 24px 64px rgba(19, 34, 63, 0.14);
  --radius: 16px;
  --radius-sm: 11px;
  --maxw: 1140px;
  --font: "Assistant", "Heebo", -apple-system, BlinkMacSystemFont, "Segoe UI",
          "Arial Hebrew", Arial, sans-serif;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* dark tokens, shared by system-dark (unless user forced light) and forced dark */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0a0f1c;
    --bg-grad-1: #0d1424;
    --bg-grad-2: #100d1d;
    --surface: #141c2e;
    --surface-2: #1a2336;
    --border: #263149;
    --border-strong: #35425f;
    --text: #eaf0fb;
    --text-soft: #a6b3c9;
    --text-faint: #7a8aa3;
    --accent: #5b8cff;
    --accent-strong: #7aa2ff;
    --accent-soft: #1a2440;
    --accent-ring: rgba(91, 140, 255, 0.35);
    --good: #38c98a;
    --good-soft: #14311f;
    --danger: #ff6b6b;
    --danger-soft: #331717;
    --rail-bg: #0b1120;
    --rail-bg-2: #0f1728;
    --rail-text: #e9eefb;
    --rail-muted: #8b99b4;
    --rail-border: rgba(255, 255, 255, 0.09);
    --rail-accent: #6b9bff;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 12px 40px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 28px 76px rgba(0, 0, 0, 0.6);
  }
}
:root[data-theme="dark"] {
  --bg: #0a0f1c;
  --bg-grad-1: #0d1424;
  --bg-grad-2: #100d1d;
  --surface: #141c2e;
  --surface-2: #1a2336;
  --border: #263149;
  --border-strong: #35425f;
  --text: #eaf0fb;
  --text-soft: #a6b3c9;
  --text-faint: #7a8aa3;
  --accent: #5b8cff;
  --accent-strong: #7aa2ff;
  --accent-soft: #1a2440;
  --accent-ring: rgba(91, 140, 255, 0.35);
  --good: #38c98a;
  --good-soft: #14311f;
  --danger: #ff6b6b;
  --danger-soft: #331717;
  --rail-bg: #0b1120;
  --rail-bg-2: #0f1728;
  --rail-text: #e9eefb;
  --rail-muted: #8b99b4;
  --rail-border: rgba(255, 255, 255, 0.09);
  --rail-accent: #6b9bff;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 12px 40px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 28px 76px rgba(0, 0, 0, 0.6);
}

* { box-sizing: border-box; }
html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--text);
  background:
    radial-gradient(1200px 700px at 88% -12%, var(--bg-grad-1), transparent 60%),
    radial-gradient(1000px 600px at 5% 112%, var(--bg-grad-2), transparent 55%),
    var(--bg);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.55;
}

/* ambient animated background — subtle, calm, holds interest without noise */
body::before {
  content: ""; position: fixed; inset: -25%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(38% 38% at 18% 28%, rgba(99, 102, 241, 0.16), transparent 62%),
    radial-gradient(34% 34% at 85% 18%, rgba(45, 109, 246, 0.14), transparent 62%),
    radial-gradient(40% 40% at 78% 88%, rgba(124, 92, 240, 0.13), transparent 62%);
  filter: blur(16px);
  animation: aurora 24s ease-in-out infinite alternate;
}
@keyframes aurora {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(2%, -2%, 0) scale(1.06); }
  100% { transform: translate3d(-2%, 2%, 0) scale(1.04); }
}
@media (prefers-reduced-motion: reduce) { body::before { animation: none; } }

.skip-link { position: absolute; right: -9999px; top: 0; background: var(--accent); color: #fff; padding: 10px 16px; border-radius: 0 0 10px 0; z-index: 100; }
.skip-link:focus { right: 0; }
.noscript { max-width: 640px; margin: 40px auto; padding: 20px; background: var(--danger-soft); color: var(--danger); border-radius: var(--radius); text-align: center; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---- Theme toggle ----------------------------------------------------- */
.theme-toggle {
  position: fixed; top: 14px; left: 14px; z-index: 60;
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--surface); color: var(--text-soft);
  cursor: pointer; display: grid; place-items: center; box-shadow: var(--shadow-sm);
  transition: color 0.16s, transform 0.12s, background 0.16s;
}
.theme-toggle:hover { color: var(--text); transform: translateY(-1px); }
.theme-toggle:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--accent-ring); }
.ic-sun { display: none; }
.ic-moon { display: block; }
:root[data-theme="dark"] .ic-sun { display: block; }
:root[data-theme="dark"] .ic-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ic-sun { display: block; }
  :root:not([data-theme="light"]) .ic-moon { display: none; }
}

/* ---- App shell -------------------------------------------------------- */
.app { max-width: var(--maxw); margin: 0 auto; padding: clamp(16px, 3vw, 30px); min-height: 100%; display: flex; flex-direction: column; }

.screen { animation: fade-up 0.35s var(--ease) both; }
@keyframes fade-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.q-enter { animation: q-in 0.3s var(--ease) both; }
@keyframes q-in { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) { .screen, .q-enter { animation: none !important; } * { scroll-behavior: auto !important; } }

/* ---- Two-pane layout -------------------------------------------------- */
.layout { display: flex; gap: 22px; align-items: stretch; min-height: min(730px, calc(100vh - 60px)); }
.stage { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.stage > .card,
.stage > .q-nav,
.stage > .q-topbar,
.stage > .inline-hint { width: 100%; max-width: 640px; margin-inline: auto; }

.rail {
  flex: 0 0 330px;
  background: linear-gradient(180deg, var(--rail-bg-2), var(--rail-bg));
  color: var(--rail-text); border-radius: 20px; padding: 28px 24px;
  display: flex; flex-direction: column; gap: 24px; box-shadow: var(--shadow-md);
  border: 1px solid var(--rail-border);
}
.rail-brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.05rem; letter-spacing: -0.01em; }
.rail-brand .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--rail-accent); box-shadow: 0 0 0 4px rgba(107,155,255,0.18); }
.rail-title { font-size: 1.35rem; font-weight: 800; line-height: 1.25; margin: 2px 0 0; letter-spacing: -0.01em; }
.rail-sub { color: var(--rail-muted); font-size: 0.94rem; margin: 8px 0 0; }
.rail-foot { margin-top: auto; color: var(--rail-muted); font-size: 0.78rem; display: flex; flex-direction: column; gap: 7px; border-top: 1px solid var(--rail-border); padding-top: 16px; }
.rail-foot .rf { display: flex; align-items: center; gap: 8px; }
.rail-foot svg { width: 15px; height: 15px; flex: none; color: var(--rail-accent); }

/* circular progress ring */
.ring { position: relative; width: 128px; height: 128px; margin: 2px auto 0; }
.ring svg { transform: rotate(-90deg); display: block; }
.ring .track { stroke: var(--rail-border); }
.ring .bar { stroke: var(--accent); stroke-linecap: round; transition: stroke-dashoffset 0.6s var(--ease); }
.ring-label { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; }
.ring-label .pct { font-size: 1.75rem; font-weight: 800; color: #fff; line-height: 1; font-variant-numeric: tabular-nums; }
.ring-label .pct span { font-size: 0.95rem; }
.rail-count { text-align: center; color: var(--rail-muted); font-weight: 600; font-size: 0.92rem; }
.rail-count b { color: var(--rail-text); }

/* domain stepper */
.domain-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.dstep { display: flex; align-items: center; gap: 11px; padding: 8px 10px; border-radius: 10px; color: var(--rail-muted); font-size: 0.9rem; transition: background 0.16s, color 0.16s; }
.dstep .dot { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--rail-border); display: grid; place-items: center; flex: none; }
.dstep .dot svg { width: 12px; height: 12px; }
.dstep .dname { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dstep .dcount { font-size: 0.72rem; color: var(--rail-muted); font-variant-numeric: tabular-nums; }
.dstep.done { color: var(--rail-text); }
.dstep.done .dot { background: var(--good); border-color: var(--good); color: #05130c; }
.dstep.current { background: rgba(255, 255, 255, 0.08); color: #fff; }
.dstep.current .dot { border-color: var(--accent); color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }

/* intro rail list */
.rail-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.rail-list li { display: flex; gap: 12px; align-items: flex-start; }
.rail-list svg { width: 20px; height: 20px; color: var(--rail-accent); flex: none; margin-top: 2px; }
.rail-list b { display: block; color: #fff; font-weight: 700; font-size: 0.96rem; }
.rail-list span { color: var(--rail-muted); font-size: 0.86rem; }

/* ---- Cards ------------------------------------------------------------ */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-md); padding: clamp(22px, 3.4vw, 38px); }
.stage-title { font-size: clamp(1.45rem, 3.2vw, 1.95rem); line-height: 1.2; margin: 0 0 12px; letter-spacing: -0.01em; }
.lead { color: var(--text-soft); font-size: 1.04rem; margin: 0 0 22px; }

/* Resume banner */
.resume { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; background: var(--accent-soft); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: 16px 18px; margin-bottom: 22px; }
.resume p { margin: 0; flex: 1 1 200px; color: var(--text); font-weight: 600; }
.resume small { display: block; font-weight: 400; color: var(--text-soft); margin-top: 3px; }

/* ---- Forms ------------------------------------------------------------ */
.field { margin-bottom: 18px; }
.field label { display: block; font-weight: 600; margin-bottom: 7px; font-size: 0.95rem; }
.field .req { color: var(--danger); margin-inline-start: 3px; }
.input, textarea.input { width: 100%; font: inherit; color: var(--text); background: var(--surface-2); border: 1.5px solid var(--border-strong); border-radius: var(--radius-sm); padding: 13px 15px; transition: border-color 0.18s, box-shadow 0.18s, background 0.18s; }
.input::placeholder { color: var(--text-faint); }
.input:focus, textarea.input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-ring); background: var(--surface); }
.input[aria-invalid="true"] { border-color: var(--danger); }
.field .err { color: var(--danger); font-size: 0.85rem; margin-top: 6px; min-height: 1em; }
.field-hint { color: var(--text-faint); font-size: 0.83rem; margin-top: 6px; }

/* ---- Buttons ---------------------------------------------------------- */
.btn { font: inherit; font-weight: 700; cursor: pointer; border: 1.5px solid transparent; border-radius: var(--radius-sm); padding: 13px 22px; transition: transform 0.12s var(--ease), background 0.18s, box-shadow 0.18s, border-color 0.18s, color 0.18s; display: inline-flex; align-items: center; justify-content: center; gap: 9px; }
.btn:active { transform: translateY(1px) scale(0.995); }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--accent-ring); }
.btn-primary { background: var(--accent); color: #fff; box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--accent-strong); }
.btn-primary:disabled { background: var(--border-strong); color: var(--surface); cursor: not-allowed; box-shadow: none; }
.btn-ghost { background: transparent; color: var(--text-soft); border-color: var(--border-strong); }
.btn-ghost:hover { background: var(--surface-2); color: var(--text); }
.btn-ghost:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-block { width: 100%; }
.btn-lg { padding: 15px 26px; font-size: 1.05rem; }
.btn .arrow { font-size: 1.1em; line-height: 1; }

/* ---- Quiz: mobile top progress (desktop uses the rail) ---------------- */
.q-topbar.mobile-only { display: none; margin-bottom: 14px; }
.q-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.q-count { font-weight: 700; font-size: 1rem; }
.q-count b { color: var(--accent); }
.q-percent { color: var(--text-soft); font-size: 0.9rem; font-variant-numeric: tabular-nums; direction: ltr; }
.progress { height: 9px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; overflow: hidden; }
.progress-bar { height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), var(--accent-strong)); border-radius: 999px; transition: width 0.5s var(--ease); }

/* ---- Question body ---------------------------------------------------- */
.q-domain { display: inline-flex; align-items: center; gap: 7px; font-size: 0.8rem; font-weight: 700; color: var(--accent-strong); background: var(--accent-soft); padding: 5px 11px; border-radius: 999px; margin-bottom: 16px; transition: color 0.3s, background 0.3s; }
.q-domain .sec { opacity: 0.7; }
.q-domain.pulse { animation: chip-pulse 0.55s var(--ease) both; }
@keyframes chip-pulse { 0% { transform: scale(1); } 30% { transform: scale(1.07); } 100% { transform: scale(1); } }
.q-text { font-size: clamp(1.2rem, 2.6vw, 1.5rem); line-height: 1.4; margin: 0 0 22px; letter-spacing: -0.01em; }

/* staggered reveal of answer controls */
@keyframes reveal { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.reveal { animation: reveal 0.42s var(--ease) both; }
@media (prefers-reduced-motion: reduce) { .reveal { animation: none; } .q-domain.pulse { animation: none; } }

/* Choice */
.options { display: grid; gap: 11px; }
.option { display: flex; align-items: center; gap: 14px; width: 100%; text-align: start; background: var(--surface-2); border: 1.5px solid var(--border); border-radius: var(--radius-sm); padding: 15px 17px; cursor: pointer; transition: border-color 0.16s, background 0.16s, box-shadow 0.16s; font: inherit; color: var(--text); }
.option:hover { border-color: var(--border-strong); background: var(--surface); }
.option:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--accent-ring); border-color: var(--accent); }
.option .key { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-weight: 800; background: var(--surface); border: 1.5px solid var(--border-strong); color: var(--text-soft); transition: all 0.16s; }
.option .opt-text { flex: 1; }
.option .check { flex: none; width: 22px; height: 22px; opacity: 0; transition: opacity 0.16s; color: var(--accent); }
.option[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 1px var(--accent) inset; }
.option[aria-pressed="true"] .key { background: var(--accent); border-color: var(--accent); color: #fff; }
.option[aria-pressed="true"] .check { opacity: 1; }

/* Scale */
.scale-labels { display: flex; justify-content: space-between; color: var(--text-soft); font-size: 0.88rem; margin-bottom: 10px; gap: 12px; }
.scale-labels span { max-width: 45%; }
.scale-labels .hi { text-align: start; }
.scale-labels .lo { text-align: end; }
.scale { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.scale-btn { aspect-ratio: 1 / 1; border-radius: var(--radius-sm); font-size: 1.25rem; font-weight: 800; background: var(--surface-2); border: 1.5px solid var(--border); color: var(--text-soft); cursor: pointer; transition: all 0.16s var(--ease); display: grid; place-items: center; }
.scale-btn:hover { border-color: var(--border-strong); color: var(--text); transform: translateY(-2px); }
.scale-btn:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--accent-ring); }
.scale-btn[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; transform: translateY(-2px); box-shadow: var(--shadow-md); }
.scale-hint { text-align: center; color: var(--text-faint); font-size: 0.82rem; margin-top: 10px; }

/* Open text */
textarea.answer { min-height: 130px; resize: none; overflow: hidden; line-height: 1.6; font-size: 1.02rem; }
.char-count { direction: ltr; text-align: left; color: var(--text-faint); font-size: 0.8rem; margin-top: 6px; font-variant-numeric: tabular-nums; }
.char-count.warn { color: var(--danger); }

/* Voice */
.voice { display: grid; gap: 16px; }
.voice-rec { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; background: var(--surface-2); border: 1.5px solid var(--border); border-radius: var(--radius-sm); padding: 16px; }
.rec-btn { border: none; cursor: pointer; width: 56px; height: 56px; border-radius: 50%; flex: none; background: var(--accent); color: #fff; display: grid; place-items: center; box-shadow: var(--shadow-md); transition: transform 0.12s, background 0.16s; }
.rec-btn:hover { transform: scale(1.05); }
.rec-btn.recording { background: var(--danger); animation: pulse 1.4s infinite; }
@keyframes pulse { 0%,100% { box-shadow: 0 0 0 0 var(--danger-soft); } 50% { box-shadow: 0 0 0 12px transparent; } }
.rec-info { flex: 1 1 160px; }
.rec-time { font-weight: 800; font-variant-numeric: tabular-nums; font-size: 1.15rem; direction: ltr; }
.rec-status { color: var(--text-soft); font-size: 0.86rem; }
.voice audio { width: 100%; }
.voice .divider { text-align: center; color: var(--text-faint); font-size: 0.85rem; }

/* ---- Nav footer ------------------------------------------------------- */
.q-nav { display: flex; gap: 12px; margin-top: 22px; }
.q-nav .btn { flex: 1; }
.q-nav .btn-primary { flex: 1.4; }
.inline-hint { text-align: center; color: var(--text-faint); font-size: 0.85rem; margin-top: 12px; min-height: 1.1em; }
.inline-hint.show-warn { color: var(--danger); }
.leave-note { display: flex; align-items: center; justify-content: center; gap: 7px; text-align: center; color: var(--text-faint); font-size: 0.8rem; margin-top: 14px; }
.leave-note svg { width: 15px; height: 15px; flex: none; color: #c58a1a; }
.intro-note.warn { background: rgba(217, 138, 22, 0.12); border-color: rgba(217, 138, 22, 0.35); }
.intro-note.warn svg { color: #c58a1a; }

/* ---- Final / sending -------------------------------------------------- */
.center-screen { margin: auto; max-width: 560px; text-align: center; }
.badge-icon { width: 84px; height: 84px; border-radius: 50%; margin: 0 auto 22px; display: grid; place-items: center; background: var(--good-soft); color: var(--good); }
.badge-icon svg { width: 44px; height: 44px; }
.center-screen h1 { font-size: clamp(1.5rem, 4vw, 2rem); margin: 0 0 12px; }
.center-screen p { color: var(--text-soft); font-size: 1.05rem; margin: 0 auto 8px; max-width: 46ch; }
.spinner { width: 46px; height: 46px; border-radius: 50%; border: 4px solid var(--accent-soft); border-top-color: var(--accent); animation: spin 0.9s linear infinite; margin: 0 auto; }
@keyframes spin { to { transform: rotate(360deg); } }
.retry-box { margin-top: 22px; }
.summary-line { color: var(--text-faint); font-size: 0.9rem; margin-top: 20px; }

/* ---- Toasts ----------------------------------------------------------- */
.toast-region { position: fixed; inset-block-end: 20px; inset-inline: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; pointer-events: none; z-index: 50; padding: 0 14px; }
.toast { background: var(--text); color: var(--surface); padding: 12px 20px; border-radius: 999px; box-shadow: var(--shadow-lg); font-weight: 600; font-size: 0.95rem; animation: toast-in 0.3s var(--ease) both; max-width: 92vw; text-align: center; }
.toast.good { background: var(--good); color: #fff; }
.toast.section { background: #16203a; color: #eaf0fb; border: 1px solid rgba(255, 255, 255, 0.14); display: inline-flex; align-items: center; gap: 9px; }
.toast.section::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--rail-accent); flex: none; }
.toast.danger { background: var(--danger); color: #fff; }
@keyframes toast-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
.toast.out { animation: toast-out 0.3s var(--ease) both; }
@keyframes toast-out { to { opacity: 0; transform: translateY(10px); } }

/* ---- Single-column focus layout (no side panel) ----------------------- */
.center-col { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: min(720px, calc(100vh - 60px)); }
.q-wrap { width: 100%; max-width: 680px; margin: 0 auto; }
.intro-card { width: 100%; max-width: 540px; margin: 0 auto; }
.brand-row { display: inline-flex; align-items: center; gap: 9px; font-weight: 800; color: var(--text-soft); font-size: 0.95rem; margin-bottom: 14px; }
.brand-row .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.intro-note { display: flex; gap: 11px; align-items: flex-start; background: var(--accent-soft); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px 16px; margin: 0 0 20px; color: var(--text); font-size: 0.92rem; line-height: 1.5; }
.intro-note svg { width: 20px; height: 20px; color: var(--accent); flex: none; margin-top: 1px; }

/* question header: count + timer + slim progress + percent */
.q-head { margin-bottom: 16px; }
.q-head-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 9px; }
.q-head .q-count { font-weight: 700; font-size: 1rem; }
.q-head .q-count b { color: var(--accent); }
.q-timer { font-weight: 800; font-variant-numeric: tabular-nums; font-size: 0.95rem; color: var(--text-soft); background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 5px 12px; direction: ltr; transition: color 0.2s, background 0.2s, border-color 0.2s; white-space: nowrap; }
.q-timer.warn { color: #9a6100; background: rgba(217, 138, 22, 0.14); border-color: rgba(217, 138, 22, 0.45); }
.q-timer.danger { color: #fff; background: var(--danger); border-color: var(--danger); animation: timer-pulse 1s ease-in-out infinite; }
@keyframes timer-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
.q-head .q-percent { color: var(--text-faint); font-size: 0.82rem; text-align: start; font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { .q-timer.danger { animation: none; } }

/* ---- Responsive ------------------------------------------------------- */
@media (max-width: 980px) {
  .app { max-width: 720px; }
  .layout { display: block; min-height: 0; }
  .rail { display: none; }
  .stage { display: block; }
  .stage > .card, .stage > .q-nav, .stage > .q-topbar, .stage > .inline-hint { max-width: none; }
  .q-topbar.mobile-only { display: block; }
}
/* Keep the header's timer clear of the fixed theme-toggle when the content
   column reaches the left edge on narrower screens. */
@media (max-width: 820px) {
  .q-head-row { padding-left: 46px; }
}
@media (max-width: 480px) {
  .card { padding: 20px 17px; }
  .scale { gap: 7px; }
  .theme-toggle { top: 10px; left: 10px; width: 38px; height: 38px; }
  .q-head-row { padding-left: 42px; }
}