/* ================================================================
   SAT Math Pro — Authentic College Board Bluebook UI
   ================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,300;0,8..60,400;0,8..60,600;1,8..60,400&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600;9..40,700&display=swap');

/* ── Design Tokens ──────────────────────────────────────────── */
:root {
  --cb-navy:        #003865;
  --cb-navy-dark:   #00264a;
  --cb-navy-mid:    #004c85;
  --cb-blue:        #005a9c;
  --cb-blue-light:  #e8f1f9;
  --cb-teal:        #00818a;

  --ui-white:       #ffffff;
  --ui-bg:          #f5f5f5;
  --ui-surface:     #ffffff;
  --ui-border:      #d0d5dd;
  --ui-border-soft: #e4e7ec;
  --ui-text:        #101828;
  --ui-text-mid:    #344054;
  --ui-text-soft:   #667085;
  --ui-text-muted:  #98a2b3;

  --choice-bg:      #ffffff;
  --choice-border:  #d0d5dd;
  --choice-hover:   #e8f1f9;
  --choice-sel-bg:  #003865;
  --choice-sel-bd:  #003865;
  --choice-sel-txt: #ffffff;
  --choice-ok-bg:   #ecfdf3;
  --choice-ok-bd:   #12b76a;
  --choice-ok-txt:  #027a48;
  --choice-err-bg:  #fff1f3;
  --choice-err-bd:  #f97066;
  --choice-err-txt: #c01048;

  --green:          #12b76a;
  --green-bg:       #ecfdf3;
  --red:            #f04438;
  --red-bg:         #fff1f3;
  --amber:          #f79009;
  --amber-bg:       #fffaeb;

  --topbar-h:       56px;
  --bottombar-h:    60px;
  --font-sans:      'DM Sans', system-ui, sans-serif;
  --font-serif:     'Source Serif 4', Georgia, serif;
  --radius:         8px;
  --radius-lg:      12px;
  --radius-xl:      16px;
  --shadow-sm:      0 1px 3px rgba(16,24,40,.08), 0 1px 2px rgba(16,24,40,.06);
  --shadow-md:      0 4px 8px -2px rgba(16,24,40,.1), 0 2px 4px -2px rgba(16,24,40,.06);
  --shadow-lg:      0 12px 28px -4px rgba(16,24,40,.14), 0 4px 8px -4px rgba(16,24,40,.08);
  --transition:     all .15s ease;
}

/* ── Reset scoped to plugin ──────────────────────────────────── */
.smp-overlay *, .smp-launcher * { box-sizing: border-box; }

/* ── Hide util ───────────────────────────────────────────────── */
.smp-hidden { display: none !important; }

/* ── Launcher button ─────────────────────────────────────────── */
.smp-launcher { display: block; margin: 16px 0; }
.smp-launch-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 28px;
  background: var(--cb-navy);
  color: #fff;
  border: none;
  border-radius: 50px;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(0,56,101,.35);
  transition: var(--transition);
  letter-spacing: .01em;
}
.smp-launch-btn svg { width: 18px; height: 18px; }
.smp-launch-btn:hover { background: var(--cb-navy-dark); transform: translateY(-2px); box-shadow: 0 7px 28px rgba(0,56,101,.5); }

/* ── Full-screen overlay ─────────────────────────────────────── */
.smp-overlay {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: flex;
  flex-direction: column;
  background: var(--ui-bg);
  font-family: var(--font-sans);
  overflow: hidden;
}

/* ══ TOP BAR ═════════════════════════════════════════════════ */
.smp-topbar {
  height: var(--topbar-h);
  background: var(--cb-navy);
  display: flex;
  align-items: center;
  padding: 0 20px;
  gap: 16px;
  flex-shrink: 0;
  z-index: 10;
}

.smp-topbar-left { display: flex; align-items: center; gap: 12px; flex: 1; }
.smp-cb-logo { color: #fff; opacity: .9; }
.smp-cb-logo svg { width: 28px; height: 28px; display: block; }
.smp-section-info { display: flex; align-items: center; gap: 8px; }
.smp-section-label { color: #fff; font-size: 15px; font-weight: 600; letter-spacing: .01em; }
.smp-module-badge {
  background: rgba(255,255,255,.18);
  color: rgba(255,255,255,.9);
  font-size: 12px;
  font-weight: 500;
  padding: 3px 10px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.25);
  white-space: nowrap;
}

.smp-topbar-center { display: flex; align-items: center; justify-content: center; }
.smp-timer {
  display: flex;
  align-items: center;
  gap: 7px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 24px;
  padding: 6px 14px;
  color: #fff;
}
.smp-timer svg { width: 16px; height: 16px; flex-shrink: 0; }
.smp-time { font-size: 16px; font-weight: 700; letter-spacing: .04em; font-variant-numeric: tabular-nums; min-width: 46px; }
.smp-timer-toggle {
  background: none; border: none; cursor: pointer; color: rgba(255,255,255,.65);
  padding: 2px; display: flex; align-items: center;
  transition: color .15s;
}
.smp-timer-toggle:hover { color: #fff; }
.smp-eye-icon { width: 15px; height: 15px; }
.smp-time.smp-time-hidden { letter-spacing: .15em; opacity: .6; }

.smp-topbar-right { display: flex; align-items: center; gap: 8px; flex: 1; justify-content: flex-end; }

.smp-tool-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 6px;
  color: #fff;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
}
.smp-tool-btn svg { width: 15px; height: 15px; flex-shrink: 0; }
.smp-tool-btn:hover { background: rgba(255,255,255,.25); border-color: rgba(255,255,255,.45); }
.smp-tool-btn.active { background: rgba(255,255,255,.28); border-color: rgba(255,255,255,.6); }
.smp-calc-toggle.active { background: rgba(255,255,255,.9); color: var(--cb-navy); border-color: transparent; }

.smp-exit-btn {
  width: 36px; height: 36px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 6px;
  color: rgba(255,255,255,.8);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: var(--transition);
}
.smp-exit-btn svg { width: 16px; height: 16px; }
.smp-exit-btn:hover { background: rgba(240,68,56,.7); border-color: transparent; color: #fff; }

/* ══ MAIN ══════════════════════════════════════════════════════ */
.smp-main {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
}

/* Loading screen */
.smp-loading-screen {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--ui-bg);
  z-index: 5;
  flex-direction: column;
  gap: 16px;
}
.smp-loading-screen:not(.smp-hidden) { display: flex; }
.smp-loading-spinner {
  width: 40px; height: 40px;
  border: 3px solid var(--ui-border);
  border-top-color: var(--cb-navy);
  border-radius: 50%;
  animation: smp-spin .75s linear infinite;
}
@keyframes smp-spin { to { transform: rotate(360deg); } }
.smp-loading-text { color: var(--ui-text-soft); font-size: 14px; }

/* ── Start screen ────────────────────────────────────────────── */
.smp-start-screen {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  overflow-y: auto;
}
.smp-start-screen:not(.smp-hidden) { display: flex; }

.smp-start-card {
  background: var(--ui-surface);
  border: 1px solid var(--ui-border-soft);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  padding: 40px 48px;
  max-width: 680px;
  width: 100%;
  text-align: center;
}

.smp-start-logo { margin-bottom: 20px; }
.smp-start-logo svg { width: 56px; height: 56px; display: inline-block; }

.smp-start-title {
  font-family: var(--font-sans);
  font-size: 26px;
  font-weight: 700;
  color: var(--ui-text);
  margin: 0 0 8px;
  letter-spacing: -.01em;
}
.smp-start-sub {
  color: var(--ui-text-soft);
  font-size: 14px;
  margin: 0 0 32px;
  line-height: 1.6;
}

.smp-start-controls { display: flex; flex-direction: column; gap: 20px; margin-bottom: 24px; text-align: left; }
.smp-control-group { display: flex; flex-direction: column; gap: 8px; }
.smp-ctrl-label { font-size: 12px; font-weight: 600; color: var(--ui-text-mid); text-transform: uppercase; letter-spacing: .06em; }

.smp-segmented {
  display: flex;
  border: 1px solid var(--ui-border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--ui-bg);
}
.smp-seg-btn {
  flex: 1;
  padding: 9px 12px;
  background: none;
  border: none;
  border-right: 1px solid var(--ui-border);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--ui-text-soft);
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
}
.smp-seg-btn:last-child { border-right: none; }
.smp-seg-btn:hover { background: var(--cb-blue-light); color: var(--cb-navy); }
.smp-seg-btn.active { background: var(--cb-navy); color: #fff; font-weight: 600; }

.smp-start-topic-row { text-align: left; margin-bottom: 28px; }
.smp-topic-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.smp-pill {
  padding: 5px 13px;
  border: 1.5px solid var(--ui-border);
  border-radius: 20px;
  background: #fff;
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ui-text-mid);
  cursor: pointer;
  transition: var(--transition);
}
.smp-pill:hover { border-color: var(--cb-navy); color: var(--cb-navy); }
.smp-pill.active { background: var(--cb-navy); border-color: var(--cb-navy); color: #fff; }

.smp-start-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 36px;
  background: var(--cb-navy);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0,56,101,.3);
  transition: var(--transition);
  letter-spacing: .01em;
}
.smp-start-btn svg { width: 18px; height: 18px; }
.smp-start-btn:hover { background: var(--cb-navy-dark); transform: translateY(-1px); box-shadow: 0 6px 22px rgba(0,56,101,.4); }

/* ── Question area (split layout) ────────────────────────────── */
.smp-question-area {
  flex: 1;
  display: flex;
  overflow: hidden;
  gap: 0;
}
.smp-question-area:not(.smp-hidden) { display: flex; }

/* Left pane */
.smp-left-pane {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--ui-surface);
  border-right: 1px solid var(--ui-border-soft);
}

.smp-q-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px 12px;
  border-bottom: 1px solid var(--ui-border-soft);
  flex-shrink: 0;
  background: var(--ui-surface);
}
.smp-q-num { font-size: 13px; font-weight: 600; color: var(--ui-text-soft); white-space: nowrap; }
.smp-q-badges { display: flex; gap: 6px; flex: 1; }
.smp-badge {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .02em;
  white-space: nowrap;
}
.smp-badge-domain { background: #eff8ff; color: var(--cb-navy); border: 1px solid #b2ddff; }
.smp-badge-diff { }
.smp-badge-diff.easy   { background: #ecfdf3; color: #027a48; border: 1px solid #a6f4c5; }
.smp-badge-diff.medium { background: #fffaeb; color: #92400e; border: 1px solid #fde68a; }
.smp-badge-diff.hard   { background: #fff1f3; color: #c01048; border: 1px solid #fecdd6; }

.smp-mark-btn {
  display: inline-flex; align-items: center; gap: 5px;
  background: none; border: 1.5px solid var(--ui-border);
  border-radius: 6px; padding: 5px 12px;
  font-family: var(--font-sans); font-size: 12px; font-weight: 500;
  color: var(--ui-text-soft); cursor: pointer; white-space: nowrap;
  transition: var(--transition);
}
.smp-mark-btn svg { width: 13px; height: 13px; flex-shrink: 0; }
.smp-mark-btn:hover { border-color: var(--amber); color: var(--amber); }
.smp-mark-btn.marked { background: var(--amber-bg); border-color: var(--amber); color: #92400e; }
.smp-mark-btn.marked svg { fill: var(--amber); stroke: var(--amber); }
.smp-mark-text { }

.smp-q-body {
  flex: 1;
  overflow-y: auto;
  padding: 28px 28px 24px;
  scrollbar-width: thin;
  scrollbar-color: var(--ui-border) transparent;
}
.smp-q-body::-webkit-scrollbar { width: 5px; }
.smp-q-body::-webkit-scrollbar-thumb { background: var(--ui-border); border-radius: 5px; }

.smp-question-text {
  font-family: var(--font-serif);
  font-size: 17px;
  line-height: 1.85;
  color: var(--ui-text);
  margin-bottom: 28px;
  white-space: pre-wrap;
}

/* Inline Desmos graph */
.smp-desmos-inline { margin-bottom: 24px; }
.smp-desmos-inline:not(.smp-hidden) { display: block; }
.smp-desmos-inline-wrap {
  border: 1px solid var(--ui-border);
  border-radius: var(--radius);
  overflow: hidden;
  background: #fafafa;
}
.smp-desmos-inline-calc { height: 240px; width: 100%; }

/* Answer choices — Bluebook style */
.smp-choices { display: flex; flex-direction: column; gap: 10px; margin-bottom: 24px; }

.smp-choice {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 16px;
  border: 1.5px solid var(--choice-border);
  border-radius: var(--radius);
  background: var(--choice-bg);
  cursor: pointer;
  text-align: left;
  font-family: var(--font-sans);
  width: 100%;
  transition: border-color .12s, background .12s, box-shadow .12s;
}
.smp-choice:hover:not(:disabled) {
  border-color: var(--cb-navy);
  background: var(--choice-hover);
  box-shadow: 0 0 0 3px rgba(0,56,101,.08);
}
.smp-choice:disabled { cursor: default; }

.smp-choice-letter {
  width: 32px; height: 32px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1.5px solid var(--choice-border);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700;
  color: var(--ui-text-mid);
  background: var(--ui-surface);
  transition: all .12s;
  margin-top: 1px;
}
.smp-choice-text {
  flex: 1;
  font-family: var(--font-serif);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ui-text);
}

/* Selected */
.smp-choice.selected { border-color: var(--choice-sel-bd); background: var(--choice-sel-bg); }
.smp-choice.selected .smp-choice-letter { background: #fff; border-color: #fff; color: var(--cb-navy); }
.smp-choice.selected .smp-choice-text { color: #fff; }

/* Correct */
.smp-choice.correct { border-color: var(--choice-ok-bd); background: var(--choice-ok-bg); }
.smp-choice.correct .smp-choice-letter { background: var(--green); border-color: var(--green); color: #fff; }
.smp-choice.correct .smp-choice-text { color: var(--choice-ok-txt); }

/* Incorrect */
.smp-choice.incorrect { border-color: var(--choice-err-bd); background: var(--choice-err-bg); }
.smp-choice.incorrect .smp-choice-letter { background: var(--red); border-color: var(--red); color: #fff; }
.smp-choice.incorrect .smp-choice-text { color: var(--choice-err-txt); }

/* Hint */
.smp-hint-row { margin-bottom: 8px; }
.smp-hint-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: none; padding: 4px 0;
  font-family: var(--font-sans); font-size: 13px; font-weight: 500;
  color: var(--cb-blue); cursor: pointer; text-decoration: underline;
  text-underline-offset: 3px; transition: color .12s;
}
.smp-hint-btn svg { width: 14px; height: 14px; flex-shrink: 0; }
.smp-hint-btn:hover { color: var(--cb-navy); }

.smp-hint-box {
  background: #fffaeb;
  border-left: 3px solid var(--amber);
  border-radius: 0 6px 6px 0;
  padding: 11px 14px;
  font-size: 14px;
  line-height: 1.65;
  color: #7a4f00;
  margin-bottom: 16px;
}
.smp-hint-box:not(.smp-hidden) { display: block; }

/* Result */
.smp-result:not(.smp-hidden) { display: block; animation: smp-fadein .2s ease; }
.smp-result {
  border-radius: var(--radius);
  padding: 18px 20px;
  margin-top: 8px;
}
.smp-result.correct-result  { background: var(--green-bg); border: 1.5px solid #a6f4c5; }
.smp-result.incorrect-result { background: var(--red-bg);  border: 1.5px solid #fecdd6; }
.smp-result-header { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.smp-result-icon { font-size: 22px; }
.smp-result-label { font-size: 17px; font-weight: 700; }
.correct-result  .smp-result-label { color: #027a48; }
.incorrect-result .smp-result-label { color: #c01048; }
.smp-result-body {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.8;
  color: var(--ui-text);
  white-space: pre-wrap;
}
@keyframes smp-fadein { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:translateY(0); } }

/* Right pane — Desmos calculator */
.smp-right-pane {
  width: 420px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: var(--ui-surface);
  border-left: 1px solid var(--ui-border-soft);
  transition: width .25s ease, opacity .25s ease;
  overflow: hidden;
}
.smp-right-pane.smp-calc-hidden {
  width: 0;
  opacity: 0;
  border-left: none;
}

.smp-calc-header {
  padding: 12px 18px 10px;
  border-bottom: 1px solid var(--ui-border-soft);
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-shrink: 0;
  background: var(--ui-bg);
}
.smp-calc-title { font-size: 13px; font-weight: 600; color: var(--ui-text-mid); }
.smp-calc-sub { font-size: 11px; color: var(--ui-text-muted); }

.smp-desmos-wrap { flex: 1; min-height: 0; }
.smp-desmos-wrap > div,
#smp-desmos-main > div { width: 100%; height: 100%; }

/* ══ BOTTOM BAR ═══════════════════════════════════════════════ */
.smp-bottombar {
  height: var(--bottombar-h);
  background: var(--ui-surface);
  border-top: 1px solid var(--ui-border-soft);
  display: flex;
  align-items: center;
  padding: 0 24px;
  gap: 16px;
  flex-shrink: 0;
}

.smp-bottombar-left { display: flex; align-items: center; gap: 16px; min-width: 120px; }
.smp-score-display { display: flex; flex-direction: column; gap: 0; }
.smp-score-label { font-size: 10px; font-weight: 600; color: var(--ui-text-muted); text-transform: uppercase; letter-spacing: .06em; }
.smp-score-val { font-size: 16px; font-weight: 700; color: var(--ui-text); font-variant-numeric: tabular-nums; }
.smp-streak-display { display: flex; align-items: center; gap: 4px; }
.smp-streak-display:not(.smp-hidden) { display: flex; }
.smp-streak-fire { font-size: 16px; }
.smp-streak-val { font-size: 15px; font-weight: 700; color: #c05600; }

.smp-bottombar-center { flex: 1; display: flex; align-items: center; gap: 10px; justify-content: center; }
.smp-progress-wrap { display: flex; align-items: center; gap: 10px; width: 100%; max-width: 320px; }
.smp-progress-bar {
  flex: 1; height: 5px;
  background: var(--ui-border-soft);
  border-radius: 10px;
  overflow: hidden;
}
.smp-progress-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--cb-navy), var(--cb-teal));
  border-radius: 10px;
  transition: width .4s ease;
}
.smp-progress-label { font-size: 12px; color: var(--ui-text-muted); white-space: nowrap; }

.smp-bottombar-right { min-width: 120px; display: flex; justify-content: flex-end; }

.smp-next-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 24px;
  background: var(--cb-navy);
  color: #fff; border: none;
  border-radius: var(--radius);
  font-family: var(--font-sans); font-size: 14px; font-weight: 600;
  cursor: pointer; transition: var(--transition);
  letter-spacing: .01em;
}
.smp-next-btn svg { width: 16px; height: 16px; }
.smp-next-btn:hover:not(:disabled) { background: var(--cb-navy-dark); }
.smp-next-btn:disabled { opacity: .38; cursor: default; }
.smp-next-btn.ready { background: var(--green); box-shadow: 0 3px 12px rgba(18,183,106,.3); }
.smp-next-btn.ready:hover:not(:disabled) { background: #0e9256; }

/* ══ REFERENCE MODAL ══════════════════════════════════════════ */
.smp-ref-modal {
  position: fixed; inset: 0; z-index: 9999999;
  background: rgba(16,24,40,.55);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  animation: smp-fadein .18s ease;
}
.smp-ref-modal:not(.smp-hidden) { display: flex; }
.smp-ref-modal-inner {
  background: var(--ui-surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  width: 100%; max-width: 640px;
  max-height: 80vh;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.smp-ref-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--ui-border-soft);
  flex-shrink: 0;
}
.smp-ref-header h2 { margin: 0; font-size: 17px; font-weight: 700; color: var(--ui-text); }
.smp-ref-close {
  width: 32px; height: 32px; border: none; background: var(--ui-bg);
  border-radius: 6px; cursor: pointer; display: flex;
  align-items: center; justify-content: center; color: var(--ui-text-soft);
  transition: var(--transition);
}
.smp-ref-close svg { width: 15px; height: 15px; }
.smp-ref-close:hover { background: var(--ui-border); color: var(--ui-text); }
.smp-ref-content { overflow-y: auto; padding: 20px 24px; }
.smp-ref-section { margin-bottom: 24px; }
.smp-ref-section h3 { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--ui-text-soft); margin: 0 0 12px; }
.smp-ref-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px,1fr)); gap: 8px; }
.smp-ref-item {
  display: flex; flex-direction: column; gap: 3px;
  background: var(--ui-bg); border-radius: 6px; padding: 10px 12px;
  border: 1px solid var(--ui-border-soft);
}
.smp-ref-name { font-size: 12px; color: var(--ui-text-soft); font-weight: 500; }
.smp-ref-formula { font-size: 15px; font-weight: 700; color: var(--ui-text); font-family: var(--font-serif); }

/* ── Timer warning states ─────────────────────────────────────── */
.smp-time.smp-warn { color: var(--amber); }
.smp-time.smp-danger { color: #f97066; animation: smp-blink 1s step-end infinite; }
@keyframes smp-blink { 0%,100%{opacity:1} 50%{opacity:.4} }

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 900px) {
  .smp-right-pane:not(.smp-calc-hidden) { width: 320px; }
  .smp-question-text { font-size: 15px; }
  .smp-choice-text { font-size: 15px; }
  .smp-q-body { padding: 20px 18px; }
}
@media (max-width: 680px) {
  .smp-question-area { flex-direction: column; }
  .smp-right-pane:not(.smp-calc-hidden) { width: 100%; height: 320px; border-left: none; border-top: 1px solid var(--ui-border-soft); }
  .smp-left-pane { min-height: 0; flex: 1; }
  .smp-q-header { padding: 10px 16px; }
  .smp-q-body { padding: 16px; }
  .smp-tool-btn span { display: none; }
  .smp-tool-btn { padding: 7px 10px; }
  .smp-start-card { padding: 28px 20px; }
  .smp-topbar { padding: 0 12px; gap: 8px; }
}