/* ══════════════════════════════════════════
   Network+ AI Quiz — styles.css  v7.1.1
   ══════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── UTILITY: hide/show toggle (replaces inline .style.display, see #17) ── */
.is-hidden { display: none !important; }
/* ── UTILITY: dimmed/disabled-look (replaces inline .style.opacity) ── */
.is-dimmed { opacity: 0.5; }

/* ── SKIP LINK ── */
.skip-link { position: absolute; top: 0; left: 50%; transform: translateX(-50%) translateY(-100%); background: var(--accent); color: #fff; padding: 10px 24px; border-radius: 0 0 8px 8px; font-size: 14px; font-weight: 700; z-index: 10000; transition: transform .2s; text-decoration: none; }
.skip-link:focus { transform: translateX(-50%) translateY(0); outline: none; }

/* ── FOCUS INDICATORS ── */
*:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
button:focus-visible, .chip:focus-visible, .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; box-shadow: 0 0 0 4px rgba(124,111,247,.2); }
.option:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
[data-theme="light"] *:focus-visible { outline-color: var(--accent); }
[data-theme="light"] button:focus-visible, [data-theme="light"] .chip:focus-visible, [data-theme="light"] .btn:focus-visible { box-shadow: 0 0 0 4px rgba(124,111,247,.15); }

/* ── ERROR TOAST ── */
.error-toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%) translateY(20px); background: #dc2626; color: #fff; padding: 12px 24px; border-radius: 10px; font-size: 13px; font-weight: 600; z-index: 9999; opacity: 0; transition: opacity .3s, transform .3s; pointer-events: none; box-shadow: 0 4px 20px rgba(220,38,38,.4); max-width: 90vw; text-align: center; }
.error-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── SUCCESS TOAST (v4.47.1) ── green-gradient confirmation for scenario loads, etc. */
.success-toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%) translateY(20px); background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%); color: #fff; padding: 12px 24px; border-radius: 10px; font-size: 13px; font-weight: 600; z-index: 9999; opacity: 0; transition: opacity .3s, transform .3s; pointer-events: none; box-shadow: 0 4px 20px rgba(34,197,94,.4); max-width: 92vw; text-align: center; }
.success-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── PRODUCTION MONITOR ── */
.monitor-actions { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.monitor-actions .btn-danger { background: rgba(220,38,38,.1); color: var(--red); border: 1px solid rgba(220,38,38,.25); font-weight: 600; cursor: pointer; border-radius: 6px; padding: 6px 14px; transition: background .15s, color .15s; }
.monitor-actions .btn-danger:hover { background: rgba(220,38,38,.2); }
.mon-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 16px; }
.mon-stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px 10px; text-align: center; }
.mon-stat-val { font-size: 24px; font-weight: 800; color: var(--text); }
.mon-stat-lbl { font-size: 11px; font-weight: 600; color: var(--text-dim); text-transform: uppercase; letter-spacing: .06em; margin-top: 4px; }
.mon-freq { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px; margin-bottom: 12px; }
.mon-freq h4 { font-size: 12px; color: var(--text-dim); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 10px; }
.mon-freq-row { display: flex; align-items: center; gap: 10px; padding: 4px 0; font-size: 12px; }
.mon-freq-count { font-weight: 800; color: var(--red); min-width: 32px; }
.mon-freq-msg { color: var(--text-mid); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mon-last { font-size: 11px; color: var(--text-dim); margin-bottom: 16px; }
.mon-empty { text-align: center; padding: 40px 20px; color: var(--text-dim); font-size: 14px; }
.mon-entry { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px; margin-bottom: 8px; transition: border-color .15s; }
.mon-entry:hover { border-color: var(--accent-dim); }
.mon-entry-header { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.mon-type { font-size: 10px; font-weight: 800; letter-spacing: .08em; padding: 2px 8px; border-radius: 4px; }
.mon-type-runtime { background: rgba(220,38,38,.15); color: var(--red); }
.mon-type-promise { background: rgba(var(--yellow-rgb),.15); color: var(--yellow); }
.mon-time { font-size: 11px; color: var(--text-dim); }
.mon-page { font-size: 11px; color: var(--accent-light); background: rgba(124,111,247,.08); padding: 1px 6px; border-radius: 3px; }
.mon-version { font-size: 10px; color: var(--text-dim); margin-left: auto; }
.mon-entry-msg { font-size: 13px; color: var(--text); font-weight: 600; line-height: 1.5; word-break: break-word; }
.mon-entry-loc { font-size: 11px; color: var(--text-dim); font-family: monospace; margin-top: 4px; }
.mon-stack-details { margin-top: 8px; }
.mon-stack-details summary { font-size: 11px; color: var(--accent-light); cursor: pointer; font-weight: 600; }
.mon-stack { font-size: 11px; line-height: 1.5; color: var(--text-dim); background: rgba(0,0,0,.2); padding: 10px; border-radius: 6px; margin-top: 6px; overflow-x: auto; white-space: pre-wrap; word-break: break-all; }
[data-theme="light"] .mon-stack { background: rgba(0,0,0,.04); }
.mon-github { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px; margin-bottom: 12px; }
.mon-github-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.mon-github-header h4 { font-size: 12px; color: var(--text-dim); text-transform: uppercase; letter-spacing: .06em; }
.mon-github-status { font-size: 12px; font-weight: 600; }
.mon-github-desc { font-size: 12px; color: var(--text-mid); margin-bottom: 10px; line-height: 1.5; }
.mon-github-input-row { display: flex; gap: 8px; margin-bottom: 8px; }
.mon-github-input { flex: 1; background: var(--surface2); border: 1px solid var(--border); border-radius: 6px; padding: 8px 12px; color: var(--text); font-size: 12px; font-family: monospace; outline: none; transition: border-color .2s; }
.mon-github-input:focus { border-color: var(--accent); }
.mon-github-hint { font-size: 11px; color: var(--text-dim); }
@media (max-width: 600px) { .mon-stats-grid { grid-template-columns: repeat(2, 1fr); } }

/* ── THEME VARIABLES ── */
:root {
  --bg: #0a0a12; --surface: rgba(19,19,30,.85); --surface2: rgba(26,26,40,.9); --surface3: #222235;
  --border: #2e2e48; --accent: #7c6ff7; --accent-light: #a99df9; --accent-dim: #3d3870;
  --text: #f0f0f8; --text-mid: #b0b0cc; --text-dim: #6b6b90;
  --green: #22c55e; --green-bg: #061a0e; --green-border: rgba(34,197,94,.35);
  --red: #f87171; --red-bg: #1c0505; --red-border: rgba(248,113,113,.35);
  --yellow: #fbbf24; --blue: #60a5fa; --orange: #fb923c;
  --accent-rgb: 124,111,247; --green-rgb: 34,197,94; --red-rgb: 248,113,113; --yellow-rgb: 251,191,36;
  --radius: 14px; --radius-sm: 10px;
  --correct-text: #bbf7d0; --correct-text2: #d1fae5; --correct-text3: #86efac;
  --wrong-text: #fecaca; --wrong-text2: #fee2e2;
}

[data-theme="light"] {
  --bg: #f4f4fa; --surface: rgba(255,255,255,.8); --surface2: rgba(240,240,246,.85); --surface3: #e4e4ee;
  --border: #d0d0e0; --accent: #6355e0; --accent-light: #7c6ff7; --accent-dim: #c5bffa;
  --text: #1a1a2e; --text-mid: #4a4a6a; --text-dim: #8888a8;
  --green: #16a34a; --green-bg: #f0fdf4; --green-border: rgba(22,163,74,.3);
  --red: #dc2626; --red-bg: #fef2f2; --red-border: rgba(220,38,38,.3);
  --yellow: #b45309; --blue: #2563eb; --orange: #ea580c;
  --accent-rgb: 99,85,224; --green-rgb: 22,163,74; --red-rgb: 220,38,38; --yellow-rgb: 180,83,9;
  --correct-text: #166534; --correct-text2: #15803d; --correct-text3: #166534;
  --wrong-text: #991b1b; --wrong-text2: #b91c1c;
}

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
/* v4.99.28 — added 100dvh fallback after 100vh. On iOS Safari, 100vh includes
   the address bar height even when the bar is collapsed, causing layout jump
   on scroll. 100dvh (dynamic viewport height) collapses with the chrome.
   Order matters: 100vh is the fallback for older browsers; 100dvh overrides
   on modern browsers (iOS 15.4+, Chrome 108+, Firefox 101+ — coverage > 95%). */
body { background: var(--bg); color: var(--text); font-family: 'Segoe UI',system-ui,-apple-system,sans-serif; min-height: 100vh; min-height: 100dvh; line-height: 1.6; padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); transition: background .3s, color .3s; }

.page { display: none; max-width: 800px; margin: 0 auto; padding: 24px 20px calc(60px + env(safe-area-inset-bottom)); }
/* v4.46.1: Analytics page gets a wider canvas than the default 800px — the
   hero card + activity calendar + domain bars all benefit from horizontal
   breathing room that the default (text-optimised) width cramps. */
#page-analytics { max-width: 1040px; }
.page.active { display: block; animation: pageFadeIn .25s ease-out both; }
.page.page-exit { animation: pageFadeOut .2s ease-in both; }
@keyframes pageFadeIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pageFadeOut { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-8px); } }

h1 { font-size: 26px; font-weight: 800; }
h2 { font-size: 21px; font-weight: 700; }
h3 { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--text-dim); }

.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; margin-bottom: 14px; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.card h3 { margin-bottom: 14px; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 22px; border-radius: var(--radius-sm); border: none; font-size: 15px; font-weight: 600; cursor: pointer; transition: background .15s, color .15s, box-shadow .15s, transform .15s; text-decoration: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
/* v4.99.28 — focus-visible partner for .btn. Pre-fix .btn had hover but no
   focus state; keyboard users had no visual feedback when tabbing. Phase 2
   mobile UX audit caught this — same accent-outline pattern as .option had. */
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn-primary { background: var(--accent); color: white; }
.btn-primary:hover { background: var(--accent-light); transform: translateY(-1px); box-shadow: 0 4px 20px rgba(124,111,247,.3); }
.btn-secondary { background: var(--surface2); color: var(--text-mid); border: 1px solid var(--border); }
.btn-secondary:hover { background: var(--surface3); color: var(--text); }
.btn-ghost { background: transparent; color: var(--text-dim); border: 1px solid var(--border); }
.btn-ghost:hover { background: var(--surface2); color: var(--text-mid); }
.btn-danger { background: var(--red-bg); color: var(--red); border: 1px solid var(--red-border); }
.btn-danger:hover { background: #2a0808; }
.btn-exam { background: linear-gradient(135deg,#1a1a2e,#16213e); color: var(--yellow); border: 1.5px solid rgba(251,191,36,.4); }
.btn-exam:hover { border-color: var(--yellow); box-shadow: 0 0 20px rgba(251,191,36,.2); }
.btn-full { width: 100%; margin-top: 6px; padding: 15px; font-size: 16px; }
[data-theme="light"] .btn-exam { background: linear-gradient(135deg,#f5f0ff,#eef0ff); }
[data-theme="light"] .btn-danger:hover { background: #fee2e2; }

.chip-group { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 520px) {
  .chip-group { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 4px; }
  .chip-group::-webkit-scrollbar { display: none; }
}
/* v4.99.28 — chip min-height bumped 36px → 44px per Apple HIG (44x44 minimum
   touch target). Phase 2 mobile UX audit. iOS auto-targets larger taps but
   < 44px chips were measurably flaky on smaller iPhones (SE-class).
   Also added :focus-visible partner for the existing :hover so keyboard
   users get the same affordance touch + mouse already had. */
.chip { padding: 8px 16px; border-radius: 99px; border: 1.5px solid var(--border); background: transparent; color: var(--text-mid); font-size: 13px; font-weight: 500; cursor: pointer; transition: border-color .15s, color .15s; white-space: nowrap; -webkit-tap-highlight-color: transparent; touch-action: manipulation; min-height: 44px; }
.chip:hover { border-color: var(--accent-dim); color: var(--text); }
.chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-color: var(--accent); }
.chip.on { border-color: var(--accent); background: rgba(124,111,247,.18); color: var(--accent); font-weight: 700; }
/* v4.11 — drillTopic lands on setup and flashes the chip so you see where you landed */
@keyframes chipFlash { 0%, 100% { box-shadow: 0 0 0 0 rgba(124,111,247,0); transform: scale(1); } 25% { box-shadow: 0 0 0 6px rgba(124,111,247,.35); transform: scale(1.05); } 60% { box-shadow: 0 0 0 3px rgba(124,111,247,.2); transform: scale(1.02); } }
.chip.chip-flash { animation: chipFlash 1.3s ease-out; }

/* v4.99.28 — bumped font-size 14px → 16px to prevent iOS Safari zoom-on-focus.
   iOS auto-zooms ANY input with font-size < 16px when focused; the zoom can't
   be disabled even with viewport user-scalable=no (deliberate Apple a11y design).
   16px is the floor; any larger is also fine. Phase 2 mobile UX audit. */
input[type="password"], input[type="text"] { width: 100%; background: var(--surface2); border: 1.5px solid var(--border); border-radius: var(--radius-sm); padding: 13px 16px; color: var(--text); font-size: 16px; font-family: monospace; outline: none; transition: border-color .2s; }
input:focus { border-color: var(--accent); }
input::placeholder { color: var(--text-dim); }

/* ── THEME TOGGLE ── */
.theme-toggle { position: absolute; top: 20px; right: 20px; background: var(--surface2); border: 1px solid var(--border); border-radius: 99px; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 18px; transition: background .2s, border-color .2s, transform .2s; z-index: 10; }
.theme-toggle:hover { background: var(--surface3); border-color: var(--accent-dim); transform: scale(1.1); }

/* ── SETUP ── */
.hero { text-align: center; padding: 40px 20px 32px; position: relative; }
.hero-icon { font-size: 52px; margin-bottom: 14px; display: block; }
.hero h1 { margin-bottom: 8px; }
.hero p { color: var(--text-mid); font-size: 16px; }

/* ── WEAK BANNER ── */
.weak-banner { background: rgba(251,191,36,.07); border: 1px solid rgba(251,191,36,.3); border-radius: var(--radius-sm); padding: 14px 18px; margin-bottom: 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.weak-banner .wb-text { font-size: 14px; color: var(--text); flex: 1; line-height: 1.5; }
.weak-banner .wb-text strong { color: var(--yellow); }
.weak-drill { font-size: 13px; font-weight: 700; color: var(--yellow); cursor: pointer; background: rgba(var(--yellow-rgb),.15); border: 1px solid rgba(251,191,36,.3); padding: 8px 14px; border-radius: var(--radius-sm); white-space: nowrap; }
.weak-drill:hover { background: rgba(251,191,36,.25); }

/* ── WRONG BANK BANNER ── */
.wrong-bank-row { display: flex; align-items: stretch; }
.wrong-bank-row .wrong-bank-btn { flex: 1; }
.wrong-bank-btn { background: rgba(248,113,113,.07); border: 1.5px solid rgba(248,113,113,.3); color: var(--red); }
.wrong-bank-btn:hover { background: rgba(248,113,113,.15); border-color: var(--red); }
.wrong-bank-clear { font-size: 13px !important; padding: 8px 12px !important; border-color: rgba(248,113,113,.25) !important; color: var(--text-dim) !important; white-space: nowrap; }
.wrong-bank-clear:hover { color: var(--red) !important; border-color: var(--red) !important; }
.wrong-count-badge { display: inline-flex; align-items: center; justify-content: center; background: var(--red); color: white; font-size: 11px; font-weight: 800; min-width: 20px; height: 20px; border-radius: 99px; padding: 0 6px; }

/* ── HISTORY (polished v4.50.1) ──
 * Domain-color dot + tier-coloured score (55/70/85 thresholds match
 * Domain Mastery card) + thicker gradient bar + separate score + %
 * column. Premium row hover, narrow-viewport collapse at 520px. */
.history-row {
  display: grid;
  grid-template-columns: 8px 1fr auto auto;
  align-items: center;
  gap: 12px;
  padding: 12px 4px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  transition: background .15s ease;
}
.history-row:hover { background: rgba(var(--accent-rgb), .03); }
.history-row:last-child { border-bottom: none; }
.h-domain-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .06);
}
.h-info { min-width: 0; }
.h-topic {
  color: var(--text);
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.h-mode-tag,
.mode-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 99px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .08em;
  background: rgba(251, 191, 36, .16);
  color: #fbbf24;
  vertical-align: middle;
}
.h-bar {
  height: 6px;
  background: var(--surface3);
  border-radius: 99px;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .04) inset;
}
.h-bar-fill {
  height: 100%;
  border-radius: 99px;
  transition: width .6s cubic-bezier(0.2, 0.8, 0.2, 1);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .06) inset;
}
.h-score-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  line-height: 1.1;
  min-width: 52px;
}
.h-score {
  font-weight: 800;
  font-size: 15px;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
}
.h-score-sep {
  font-weight: 500;
  color: var(--text-dim);
  margin: 0 1px;
}
.h-score-pct {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .02em;
  opacity: .85;
}
.h-date {
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  letter-spacing: .02em;
}
@media (max-width: 520px) {
  .history-row { grid-template-columns: 6px 1fr auto; gap: 10px; padding: 10px 2px; }
  .h-date { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .history-row { transition: none !important; }
  .h-bar-fill { transition: none !important; }
}

/* ── LOADING — SKELETON ── */
.skeleton-loader { padding: 0; }
.skel-topbar { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.skel-block { background: var(--surface2); border-radius: var(--radius-sm); position: relative; overflow: hidden; }
.skel-block::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.04), transparent); animation: skelShimmer 1.5s infinite; }
@keyframes skelShimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
.skel-back { width: 80px; height: 36px; }
.skel-pill { width: 70px; height: 32px; border-radius: 99px; margin-left: auto; }
.skel-pill:last-child { margin-left: 0; }
.skel-progress { margin-bottom: 22px; }
.skel-bar { width: 100%; height: 6px; border-radius: 99px; }
.skel-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px; }
.skel-badge-row { width: 120px; height: 22px; border-radius: 99px; margin-bottom: 16px; }
.skel-title { width: 90%; height: 22px; margin-bottom: 10px; }
.skel-title-short { width: 55%; height: 22px; margin-bottom: 26px; }
.skel-option { width: 100%; height: 56px; margin-bottom: 10px; border-radius: var(--radius-sm); }
.skel-option:last-child { margin-bottom: 0; }
.skel-status { text-align: center; color: var(--text-dim); font-size: 14px; margin-top: 20px; animation: skelPulse 2s ease-in-out infinite; }
@keyframes skelPulse { 0%,100% { opacity: .5; } 50% { opacity: 1; } }
[data-theme="light"] .skel-block::after { background: linear-gradient(90deg, transparent, rgba(0,0,0,.04), transparent); }
/* v4.82.1: smoother loading bar — taller (8px), cubic-bezier ease-out so the
   fill smoothly decelerates toward each milestone rather than snapping, and a
   shimmer overlay that always animates so the bar feels "alive" even when
   we're waiting on a stage. Pattern is the YouTube/Stripe-checkout/Chrome-
   pageload approach: real milestones (no fakery) but visually continuous. */
.load-progress { margin: 24px auto 0; max-width: 360px; }
.load-bar {
  height: 8px;
  background: var(--surface3);
  border-radius: 99px;
  overflow: hidden;
  position: relative;
  border: 1px solid rgba(var(--accent-rgb), .15);
}
.load-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-light));
  border-radius: 99px;
  position: relative;
  /* v4.82.1: smooth + slow eased transition. cubic-bezier(0.16, 1, 0.3, 1)
     is a standard ease-out that races forward then decelerates — feels
     responsive while being slow enough to bridge gaps between real events. */
  transition: width 1.6s cubic-bezier(0.16, 1, 0.3, 1);
}
/* v4.82.1: shimmer overlay — always animating, gives the bar a sense of
   liveness even when the fill width isn't currently transitioning. */
.load-bar-fill::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, .35) 50%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: loadBarShimmer 1.6s linear infinite;
  border-radius: 99px;
}
@keyframes loadBarShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .load-bar-fill { transition: width .3s linear; }
  .load-bar-fill::after { animation: none; opacity: 0; }
}
[data-theme="light"] .load-bar-fill::after {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, .55) 50%,
    transparent 100%
  );
  background-size: 200% 100%;
}

/* ── QUIZ PAGE ── */
.quiz-topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.back-btn { display: inline-flex; align-items: center; gap: 6px; background: var(--surface); border: 1px solid var(--border); color: var(--text-mid); padding: 8px 14px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 600; cursor: pointer; transition: background .15s, color .15s; }
.back-btn:hover { background: var(--surface2); color: var(--text); }
.quiz-stats { display: flex; align-items: center; gap: 8px; }
.stat-pill { background: var(--surface); border: 1px solid var(--border); border-radius: 99px; padding: 6px 14px; font-size: 13px; font-weight: 700; }
.stat-pill.score { color: var(--accent-light); }
.stat-pill.streak { color: var(--yellow); }

.flag-btn { padding: 6px 12px; border-radius: 99px; border: 1.5px solid var(--border); background: transparent; color: var(--text-dim); font-size: 12px; font-weight: 600; cursor: pointer; transition: border-color .15s, color .15s; }
.flag-btn:hover { border-color: var(--yellow); color: var(--yellow); }
.flag-btn.flagged { border-color: var(--yellow); background: rgba(251,191,36,.1); color: var(--yellow); }

.progress-wrap { margin-bottom: 22px; }
.progress-label { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-dim); margin-bottom: 8px; font-weight: 500; }
.progress-bar { height: 6px; background: var(--surface3); border-radius: 99px; overflow: hidden; }
/* v4.44.0 — smoother cubic-bezier for the question-to-question fill.
   Previous `.4s ease` felt abrupt at the start; this cubic-bezier eases in
   and out so the bar glides between states. */
.progress-fill { height: 100%; background: linear-gradient(90deg,var(--accent),var(--accent-light)); border-radius: 99px; transition: width .6s cubic-bezier(0.2, 0.8, 0.2, 1); }

.q-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.q-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.q-num { font-size: 12px; color: var(--text-dim); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.diff-badge { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: 3px 10px; border-radius: 99px; }
.diff-Foundational { background: rgba(96,165,250,.15); color: var(--blue); }
.diff-ExamLevel    { background: rgba(var(--yellow-rgb),.15); color: var(--yellow); }
.diff-Hard         { background: rgba(248,113,113,.15); color: var(--red); }

.q-text { font-size: 20px; font-weight: 700; line-height: 1.5; color: var(--text); margin-bottom: 26px; }

/* ── PBQ TYPE BADGE ── */
.pbq-badge { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; padding: 3px 10px; border-radius: 99px; background: rgba(124,111,247,.15); color: var(--accent-light); }

.options { display: flex; flex-direction: column; gap: 10px; }
.option { display: flex; align-items: flex-start; gap: 14px; padding: 16px 18px; border-radius: var(--radius-sm); border: 1.5px solid var(--border); background: var(--surface2); cursor: pointer; transition: border-color .15s, background .15s, transform .15s; text-align: left; width: 100%; -webkit-tap-highlight-color: transparent; touch-action: manipulation; min-height: 56px; }
.option:hover:not([disabled]) { border-color: var(--accent-dim); background: rgba(124,111,247,.07); }
.option[disabled] { cursor: default; }
.opt-letter { min-width: 30px; height: 30px; border-radius: 8px; background: var(--surface3); color: var(--text-mid); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; flex-shrink: 0; }
.opt-text { font-size: 15px; line-height: 1.55; color: var(--text); font-weight: 500; }

/* v4.44.0 — correct-answer feedback now layers an expanding green glow ripple
   on top of the existing bounce. Subtle celebratory burst, not cartoonish. */
.option.correct { border-color: var(--green); background: var(--green-bg); animation: optBounce .35s ease-in-out, optGlowPulse .5s cubic-bezier(0.2, 0.8, 0.2, 1) .25s; }
.option.correct .opt-letter { background: var(--green); color: white; }
.option.correct .opt-text { color: var(--correct-text); }
.option.wrong { border-color: var(--red); background: var(--red-bg); animation: optShake .3s ease-in-out; }
.option.wrong .opt-letter { background: var(--red); color: white; }
.option.wrong .opt-text { color: var(--wrong-text); }
@keyframes optBounce { 0% { transform: scale(1); } 30% { transform: scale(1.03); } 60% { transform: scale(.98); } 100% { transform: scale(1); } }
@keyframes optShake { 0%,100% { transform: translateX(0); } 15% { transform: translateX(-6px); } 30% { transform: translateX(5px); } 45% { transform: translateX(-4px); } 60% { transform: translateX(3px); } 75% { transform: translateX(-2px); } }
/* v4.44.0 — ripple/glow for correct answer. Runs AFTER optBounce so the
   element settles into the glow rather than fighting it. Goes to 0 opacity
   at the end so no lingering shadow once the explanation renders. */
@keyframes optGlowPulse { 0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.45); } 70% { box-shadow: 0 0 0 16px rgba(34, 197, 94, 0); } 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); } }
/* v4.44.0 — question reveal: gentle slide-up + fade on the question stem
   and a staggered version for the option buttons. Re-triggered on each
   new question by toggling the class off-then-on in render(). */
@keyframes qTextReveal { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes optionStaggerIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
#q-text.q-text-reveal { animation: qTextReveal 300ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.option.option-stagger-in { animation: optionStaggerIn 250ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.option.reveal-correct { border-color: rgba(34,197,94,.5); background: rgba(6,26,14,.5); }
.option.reveal-correct .opt-letter { background: rgba(34,197,94,.4); color: var(--correct-text); }
.option.reveal-correct .opt-text { color: var(--correct-text3); }
[data-theme="light"] .option.reveal-correct { background: rgba(240,253,244,.7); }
.option.dimmed { opacity: 0.45; }
.option.exam-selected { border-color: var(--accent); background: rgba(124,111,247,.1); }
.option.exam-selected .opt-letter { background: var(--accent); color: white; }

/* ── MULTI-SELECT ── */
.option.ms-selected { border-color: var(--accent); background: rgba(124,111,247,.1); }
.option.ms-selected .opt-letter { background: var(--accent); color: white; }
.ms-checkbox { min-width: 22px; height: 22px; border-radius: 5px; border: 2px solid var(--border); background: transparent; display: flex; align-items: center; justify-content: center; font-size: 13px; flex-shrink: 0; margin-top: 3px; transition: border-color .15s, background .15s; }
.option.ms-selected .ms-checkbox { background: var(--accent); border-color: var(--accent); color: white; }
.ms-submit-row { margin-top: 14px; display: flex; align-items: center; gap: 12px; }
.ms-hint { font-size: 12px; color: var(--text-dim); font-weight: 600; }

/* ── ORDERING QUESTIONS ── */
.order-items { display: flex; flex-direction: column; gap: 8px; }
.order-item { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-radius: var(--radius-sm); border: 1.5px solid var(--border); background: var(--surface2); cursor: pointer; transition: border-color .15s, background .15s; }
.order-item:hover { border-color: var(--accent-dim); background: rgba(124,111,247,.07); }
.order-item.placed { opacity: 0.3; pointer-events: none; }
.order-num { min-width: 26px; height: 26px; border-radius: 50%; background: var(--surface3); color: var(--text-dim); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; flex-shrink: 0; }
.order-item-text { font-size: 15px; font-weight: 500; color: var(--text); }
.order-sequence { margin-top: 16px; }
.order-sequence h4 { font-size: 12px; color: var(--text-dim); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 8px; font-weight: 700; }
.order-placed-list { display: flex; flex-direction: column; gap: 6px; min-height: 40px; }
.order-placed-item { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: var(--radius-sm); background: rgba(124,111,247,.08); border: 1px solid var(--accent-dim); font-size: 14px; color: var(--text); font-weight: 500; }
.order-placed-num { min-width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: white; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; flex-shrink: 0; }
.order-placed-item.order-correct { background: var(--green-bg); border-color: var(--green-border); }
.order-placed-item.order-wrong { background: var(--red-bg); border-color: var(--red-border); }
.order-placed-item.order-reveal { background: var(--green-bg); border-color: var(--green-border); animation: orderSlideIn .25s ease-out; }
.order-placed-item.order-highlight { border-color: var(--green); box-shadow: 0 0 8px rgba(34,197,94,.25); }
.order-correct-label { font-size: 13px; font-weight: 700; color: var(--green); margin-bottom: 4px; letter-spacing: .03em; }
@keyframes orderSlideIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
.order-controls { margin-top: 10px; display: flex; gap: 8px; }

/* v4.11 — explanation panel is forced white-bg + black-text for readability,
   with a colored left accent rail that preserves the correct/wrong signal. */
.explanation-box { margin-top: 18px; padding: 16px 20px; border-radius: var(--radius-sm); font-size: 14px; line-height: 1.7; display: none; background: #ffffff; color: #111111; border: 1px solid #d4d4d8; border-left-width: 5px; }
.explanation-box.show { display: block; animation: expReveal .2s ease-out both; }
@keyframes expReveal { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.explanation-box.correct { border-left-color: #16a34a; }
.explanation-box.wrong   { border-left-color: #dc2626; }
.explanation-box strong  { font-size: 13px; font-weight: 800; display: block; margin-bottom: 5px; letter-spacing: .02em; color: #111111; }
.explanation-box a { color: #6d28d9; }

.next-btn-row { margin-top: 22px; display: flex; justify-content: flex-end; }
.btn-next { padding: 13px 26px; border-radius: var(--radius-sm); background: var(--accent); color: white; border: none; font-size: 15px; font-weight: 700; cursor: pointer; transition: background .15s, transform .15s; display: none; }
.btn-next.show { display: inline-flex; align-items: center; gap: 8px; }
.btn-next:hover { background: var(--accent-light); }

.kb-hint { text-align: center; font-size: 11px; color: var(--text-dim); margin-top: 12px; }
.kb-key { display: inline-block; background: var(--surface2); border: 1px solid var(--border); border-radius: 4px; padding: 1px 6px; font-size: 10px; font-weight: 700; font-family: monospace; }

/* ── RESULTS ── */
.results-hero { text-align: center; padding: 32px 20px 24px; }
.grade-ring { width: 140px; height: 140px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; margin: 0 auto 20px; position: relative; border: none; background: transparent; }
.grade-svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.grade-track { fill: none; stroke: var(--surface3); stroke-width: 6; }
.grade-fill { fill: none; stroke: var(--accent); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 326.73; stroke-dashoffset: 326.73; transition: stroke-dashoffset 1.2s ease-out, stroke .3s; }
.grade-letter { font-size: 44px; font-weight: 900; line-height: 1; position: relative; z-index: 1; }
.grade-pct { font-size: 14px; color: var(--text-mid); font-weight: 600; margin-top: 2px; position: relative; z-index: 1; }
.results-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-bottom: 20px; }
.rstat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; text-align: center; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.rstat .val { font-size: 30px; font-weight: 800; margin-bottom: 4px; }
.rstat .lbl { font-size: 12px; color: var(--text-dim); text-transform: uppercase; letter-spacing: .06em; }
.val-green { color: var(--green); } .val-red { color: var(--red); } .val-acc { color: var(--accent-light); }
.results-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.results-actions .btn { flex: 1; min-width: 130px; }

/* ── REVIEW ── */
.review-item { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; margin-bottom: 14px; }
.review-item.missed  { border-left: 4px solid var(--red); }
.review-item.correct { border-left: 4px solid var(--green); }
.review-item.skipped { border-left: 4px solid var(--text-dim); }
.review-item.flagged-item { box-shadow: 0 0 0 1px rgba(251,191,36,.3); }
.review-q { font-size: 16px; font-weight: 600; color: var(--text); margin-bottom: 14px; line-height: 1.5; }
.review-options { display: flex; flex-direction: column; gap: 7px; margin-bottom: 14px; }
.review-opt { display: flex; gap: 10px; align-items: flex-start; padding: 10px 14px; border-radius: var(--radius-sm); font-size: 14px; color: var(--text-mid); }
.review-opt.is-correct { background: var(--green-bg); border: 1px solid var(--green-border); color: var(--correct-text2); }
.review-opt.was-chosen { background: var(--red-bg); border: 1px solid var(--red-border); color: var(--wrong-text2); }
.review-opt .r-letter { font-weight: 700; min-width: 20px; }
.review-exp { font-size: 13px; line-height: 1.6; color: var(--text-mid); padding: 12px 14px; background: var(--surface2); border-radius: var(--radius-sm); }
.review-flag-tag { display: inline-block; font-size: 11px; color: var(--yellow); background: rgba(251,191,36,.1); border: 1px solid rgba(251,191,36,.25); padding: 2px 8px; border-radius: 4px; font-weight: 700; margin-bottom: 8px; }

/* ═══════════════════════════════════════════════════════════════════
   v4.85.17 — Exam-review filter chips + per-question meta tags
   Sticky filter row at the top of #review-list lets the user filter
   90 questions by All / Correct / Incorrect / Flagged / Skipped.
   Tier-colored active states + counts visible at all times.
   Concept mockup: mockups/exam-review-filters-concept.html
   ═══════════════════════════════════════════════════════════════════ */
.review-filter-row {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 0;
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg) 65%, transparent 100%);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.review-filter-eyebrow {
  font-size: 10.5px;
  letter-spacing: .14em;
  color: var(--text-dim);
  text-transform: uppercase;
  font-weight: 700;
  margin-right: 4px;
}
.review-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 7px 13px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
  white-space: nowrap;
  font-family: inherit;
}
.review-filter-chip:hover { border-color: rgba(var(--accent-rgb), .4); transform: translateY(-1px); }
.review-filter-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.review-filter-chip .chip-count {
  color: var(--text-dim);
  font-weight: 700;
  font-size: 11.5px;
  background: var(--surface3);
  padding: 1px 7px;
  border-radius: 999px;
  min-width: 22px;
  text-align: center;
}
.review-filter-chip.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  transform: translateY(-1px);
}
.review-filter-chip.is-active .chip-count { background: rgba(255,255,255,.2); color: #fff; }
.review-filter-chip.is-correct.is-active   { background: var(--green);  border-color: var(--green); }
.review-filter-chip.is-incorrect.is-active { background: var(--red);    border-color: var(--red); color: #fff; }
.review-filter-chip.is-flagged.is-active   { background: var(--yellow); border-color: var(--yellow); color: #1a1431; }
.review-filter-chip.is-flagged.is-active .chip-count { color: #1a1431; background: rgba(0,0,0,.15); }
.review-filter-chip.is-skipped.is-active   { background: var(--text-dim); border-color: var(--text-dim); color: #fff; }
.review-filter-chip.is-disabled {
  opacity: .35;
  cursor: not-allowed;
  pointer-events: none;
}
.review-filter-meta {
  margin-left: auto;
  font-size: 12px;
  color: var(--text-dim);
  font-weight: 600;
  white-space: nowrap;
}
.review-filter-meta strong { color: var(--text); font-weight: 800; }

/* Per-question meta-tag row above the stem */
.review-q-meta-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.review-q-meta-row .q-num-pill {
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--text-dim);
  font-weight: 700;
  background: var(--surface3);
  padding: 3px 10px;
  border-radius: 999px;
}
.review-q-meta-row .q-tag {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  letter-spacing: .03em;
  border: 1px solid transparent;
}
.review-q-meta-row .q-tag.tag-correct   { background: rgba(var(--green-rgb), .12);  color: var(--green);  border-color: rgba(var(--green-rgb), .3); }
.review-q-meta-row .q-tag.tag-incorrect { background: rgba(var(--red-rgb), .12);    color: var(--red);    border-color: rgba(var(--red-rgb), .3); }
.review-q-meta-row .q-tag.tag-flagged   { background: rgba(var(--yellow-rgb), .12); color: var(--yellow); border-color: rgba(var(--yellow-rgb), .3); }
.review-q-meta-row .q-tag.tag-skipped   { background: rgba(107,107,144, .15);       color: var(--text-dim); border-color: rgba(107,107,144, .3); }
.review-q-meta-row .q-tag.tag-domain    { background: var(--surface3);              color: var(--text-mid); border-color: var(--border); }

/* Empty state when filter returns 0 results */
.review-filter-empty {
  text-align: center;
  padding: 60px 24px;
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: 12px;
  color: var(--text-dim);
}
.review-filter-empty-ico {
  font-size: 32px;
  display: block;
  margin-bottom: 12px;
}
.review-filter-empty-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
}
.review-filter-empty-body {
  font-size: 13px;
}
.review-filter-empty-cta {
  margin-top: 14px;
  color: var(--accent);
  background: none;
  border: 1px solid var(--accent);
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: background .15s ease;
}
.review-filter-empty-cta:hover { background: rgba(var(--accent-rgb), .12); }
.review-filter-empty-cta:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .review-filter-chip,
  .review-filter-empty-cta { transition: none; }
}
@media (max-width: 540px) {
  .review-filter-row { padding: 10px 0; gap: 6px; }
  .review-filter-eyebrow { display: none; }
  .review-filter-chip { padding: 6px 10px; font-size: 11.5px; }
  .review-filter-meta { margin-left: 0; flex-basis: 100%; padding-top: 4px; }
}

/* ── EXAM TOPBAR ── */
.exam-topbar { position: sticky; top: 0; z-index: 100; background: var(--bg); border-bottom: 1px solid var(--border); padding: 12px 20px; margin: -24px -20px 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.exam-timer-block { display: flex; flex-direction: column; align-items: center; }
.timer-label { font-size: 10px; color: var(--text-dim); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 2px; }
.exam-timer { font-size: 24px; font-weight: 900; font-variant-numeric: tabular-nums; letter-spacing: .02em; color: var(--text); }
.exam-timer.warning { color: var(--yellow); }
.exam-timer.danger  { color: var(--red); animation: pulse 1s infinite; }
@keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:.6; } }
.exam-center-info { text-align: center; }
.exam-q-counter { font-size: 15px; font-weight: 700; }
.exam-answered-lbl { font-size: 11px; color: var(--text-dim); }
.exam-topbar-actions { display: flex; gap: 8px; align-items: center; }

/* ── EXAM FLAG BTN ── */
.exam-flag-btn { padding: 8px 14px; border-radius: var(--radius-sm); border: 1.5px solid var(--border); background: transparent; color: var(--text-dim); font-size: 13px; font-weight: 600; cursor: pointer; transition: border-color .15s, color .15s; }
.exam-flag-btn:hover { border-color: var(--yellow); color: var(--yellow); }
.exam-flag-btn.flagged { border-color: var(--yellow); background: rgba(251,191,36,.12); color: var(--yellow); }

.end-exam-btn { padding: 8px 14px; border-radius: var(--radius-sm); background: var(--red-bg); color: var(--red); border: 1px solid var(--red-border); font-size: 13px; font-weight: 600; cursor: pointer; transition: background .15s; }
.end-exam-btn:hover { background: #2a0808; }

/* ── QUESTION NAVIGATOR ── */
.qnav-toggle { width: 100%; padding: 10px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-mid); font-size: 13px; font-weight: 600; cursor: pointer; text-align: left; margin-bottom: 8px; display: flex; align-items: center; justify-content: space-between; transition: background .15s, color .15s; }
.qnav-toggle:hover { background: var(--surface2); color: var(--text); }
.qnav-grid { display: none; grid-template-columns: repeat(10,1fr); gap: 4px; margin-bottom: 16px; padding: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.qnav-grid.open { display: grid; }
.qnav-sq { aspect-ratio:1; border-radius: 6px; border: 1.5px solid var(--border); background: var(--surface2); cursor: pointer; font-size: 9px; font-weight: 700; display: flex; align-items: center; justify-content: center; color: var(--text-dim); transition: border-color .1s, background .1s, color .1s; }
.qnav-sq:hover { border-color: var(--accent); }
.qnav-sq.current  { border-color: var(--accent); background: rgba(124,111,247,.25); color: var(--accent); }
.qnav-sq.answered { background: rgba(124,111,247,.12); border-color: var(--accent-dim); color: var(--accent-light); }
.qnav-sq.flagged  { background: rgba(var(--yellow-rgb),.15); border-color: var(--yellow); color: var(--yellow); }

/* ── EXAM NAV ROW ── */
.exam-nav-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 16px; }

/* ── MODAL ── */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.75); z-index: 300; display: flex; align-items: center; justify-content: center; padding: 20px; }
.modal-overlay.hidden { display: none; }
.modal-box { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px; max-width: 420px; width: 100%; }
.modal-box h2 { margin-bottom: 10px; }
.modal-stats { display: flex; gap: 16px; margin-bottom: 18px; }
.modal-stat { background: var(--surface2); border-radius: var(--radius-sm); padding: 12px 16px; flex: 1; text-align: center; }
.modal-stat .ms-val { font-size: 22px; font-weight: 800; }
.modal-stat .ms-lbl { font-size: 11px; color: var(--text-dim); text-transform: uppercase; letter-spacing: .06em; }
.modal-actions { display: flex; flex-direction: column; gap: 8px; }

/* ── EXAM RESULTS ── */
.exam-results-hero { text-align: center; padding: 36px 20px 24px; }
.scaled-score { font-size: 80px; font-weight: 900; line-height: 1; margin-bottom: 10px; }
.pass-badge { display: inline-block; padding: 6px 22px; border-radius: 99px; font-size: 15px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 10px; }
.badge-pass { background: rgba(34,197,94,.12); color: var(--green); border: 1.5px solid var(--green); }
.badge-fail { background: rgba(248,113,113,.12); color: var(--red); border: 1.5px solid var(--red); }
.pass-msg { color: var(--text-mid); font-size: 15px; margin-bottom: 6px; }
.pass-threshold { font-size: 12px; color: var(--text-dim); }

/* ── MISC ── */
.err-box { background: var(--red-bg); border: 1px solid var(--red-border); color: #fca5a5; border-radius: var(--radius-sm); padding: 14px 16px; font-size: 13px; line-height: 1.6; margin-top: 12px; }
[data-theme="light"] .err-box { color: var(--red); }
/* .divider removed — unused */
@keyframes popIn { 0% { transform:scale(0.5); opacity:0; } 70% { transform:scale(1.2); } 100% { transform:scale(1); opacity:1; } }
.streak-pop { animation: popIn .3s ease; }

@media (max-width: 520px) {
  .q-text { font-size: 17px; }
  .results-stats { grid-template-columns: 1fr 1fr; }
  h1 { font-size: 22px; }
  .exam-timer { font-size: 20px; }
  .scaled-score { font-size: 60px; }
  .qnav-grid { grid-template-columns: repeat(9,1fr); }
}

/* ── STREAK BADGE ── */
.streak-badge { display: none; align-items: center; gap: 6px; margin-top: 12px; font-size: 12px; font-weight: 700; color: var(--yellow); background: rgba(251,191,36,.1); border: 1px solid rgba(251,191,36,.25); padding: 4px 14px; border-radius: 99px; }
.streak-badge.show { display: inline-flex; }

/* ── SMART CHIP ── */
.chip-smart { border-color: rgba(167,139,250,.5); color: var(--accent-light); }
.chip-smart.on { border-color: var(--accent); background: rgba(124,111,247,.25); color: #fff; }

/* ── OFFLINE CACHE NOTICE ── */
.cache-notice { display: none; font-size: 11px; font-weight: 600; color: var(--text-dim); background: var(--surface2); border: 1px solid var(--border); padding: 3px 10px; border-radius: 99px; }
.cache-notice.show { display: inline-flex; align-items: center; gap: 4px; }

/* ── TOPIC PROGRESS PAGE ── */
.topic-grid { display: flex; flex-direction: column; gap: 8px; }
.topic-row { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; display: flex; align-items: center; gap: 12px; cursor: pointer; transition: background .15s; }
.topic-row:hover { background: var(--surface2); }
.topic-rag { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.rag-green { background: var(--green); } .rag-blue { background: var(--blue); } .rag-red { background: var(--red); } .rag-grey { background: var(--text-dim); }
.topic-info { flex: 1; min-width: 0; }
.topic-name { font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topic-meta { font-size: 11px; color: var(--text-dim); margin-top: 2px; }
.topic-mini-bar { height: 3px; border-radius: 99px; background: var(--surface3); margin-top: 5px; overflow: hidden; }
.topic-mini-fill { height: 100%; border-radius: 99px; transition: width .4s; }
.topic-pct-lbl { font-size: 15px; font-weight: 800; min-width: 44px; text-align: right; }
/* Topic Progress v2 (v4.11) */
/* ═══════════════════════════════════════════════════════════════════
   v4.51.0 — Topic Progress page: premium 2-card summary + domain
   accordions w/ 5-colour palette + polished toolbar + domain-tinted
   topic row badges. Matches v4.47.2 card aesthetic (radial + linear
   gradients, layered shadows, cubic-bezier transitions) and anchors
   to the 5-domain palette used elsewhere in the app.
   ═══════════════════════════════════════════════════════════════════ */

/* Header row — simpler than v4.50.x inline-styled flex; breathing room. */
.progress-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.progress-title {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--text);
}

/* Wrapper for the 2-card summary. Stack cards vertically; let the
   auto-fit grid inside each card decide its own tile density. */
.progress-summary {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 18px;
  background: none;
  border: none;
  padding: 0;
}

/* ── Premium summary cards (Topic Mastery + Lab Progress) ── */
.progress-card {
  position: relative;
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(var(--accent-rgb), .09), transparent 55%),
    linear-gradient(160deg, rgba(var(--accent-rgb), .05), rgba(var(--accent-rgb), .015));
  border: 1px solid rgba(var(--accent-rgb), .22);
  border-radius: 14px;
  padding: 18px 20px 16px;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, .04),
    0 8px 24px -12px rgba(var(--accent-rgb), .22);
  overflow: hidden;
}
.progress-card-head {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 12px;
  row-gap: 2px;
  align-items: center;
  margin-bottom: 14px;
}
.progress-card-ico {
  grid-row: 1 / span 2;
  font-size: 28px;
  line-height: 1;
  filter: drop-shadow(0 2px 6px rgba(var(--accent-rgb), .2));
}
.progress-card-title {
  font-size: 15px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.005em;
}
.progress-card-sub {
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.4;
}
.progress-card-sub strong {
  color: var(--accent-light);
  font-weight: 800;
}
.progress-card-legend {
  grid-column: 1 / -1;
  margin-top: 10px;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 10.5px;
  color: var(--text-dim);
  font-weight: 600;
  letter-spacing: .02em;
}
.pcl-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.pcl-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-dim);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .04);
}
.pcl-green .pcl-dot { background: var(--green); box-shadow: 0 0 0 3px rgba(34, 197, 94, .14); }
.pcl-blue  .pcl-dot { background: var(--blue);  box-shadow: 0 0 0 3px rgba(59, 130, 246, .14); }
.pcl-red   .pcl-dot { background: var(--red);   box-shadow: 0 0 0 3px rgba(239, 68, 68, .14); }

/* Coverage / progress bar (premium 8px, cubic-bezier fill) */
.ps2-cover-bar {
  height: 8px;
  background: rgba(var(--accent-rgb), .08);
  border-radius: 99px;
  overflow: hidden;
  position: relative;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .12);
  margin-bottom: 14px;
}
.ps2-cover-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-light));
  border-radius: 99px;
  transition: width 800ms cubic-bezier(0.2, 0.8, 0.2, 1);
  box-shadow: 0 0 8px rgba(var(--accent-rgb), .3);
}

/* Stat-tile grids — 4 for Mastery, up to 3 for Labs */
.ps2-grid {
  display: grid;
  gap: 8px;
}
.ps2-grid-mastery {
  grid-template-columns: repeat(4, 1fr);
}
.ps2-grid-labs {
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}
.ps2-stat {
  position: relative;
  background: rgba(var(--accent-rgb), .05);
  border: 1px solid rgba(var(--accent-rgb), .14);
  border-radius: 10px;
  padding: 12px 8px 10px;
  text-align: center;
  transition: transform .2s cubic-bezier(0.2, 0.8, 0.2, 1), border-color .2s ease, background .2s ease;
}
.ps2-stat:hover {
  transform: translateY(-2px);
  border-color: rgba(var(--accent-rgb), .32);
  background: rgba(var(--accent-rgb), .08);
}
.ps2-stat-ico {
  font-size: 16px;
  line-height: 1;
  margin-bottom: 4px;
  opacity: .92;
}
.ps2-stat-val {
  font-size: 22px;
  font-weight: 900;
  color: var(--text);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.ps2-stat-sub {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-dim);
  margin-left: 2px;
}
.ps2-stat-lbl {
  font-size: 10px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 700;
  margin-top: 4px;
}

/* Tier colours for mastery tiles — anchored to Domain Mastery palette */
.ps2-strong    { border-color: rgba(34, 197, 94, .26); background: rgba(34, 197, 94, .06); }
.ps2-strong    .ps2-stat-val { color: var(--green); }
.ps2-strong:hover { border-color: rgba(34, 197, 94, .48); background: rgba(34, 197, 94, .10); }

.ps2-solid     { border-color: rgba(59, 130, 246, .26); background: rgba(59, 130, 246, .06); }
.ps2-solid     .ps2-stat-val { color: var(--blue); }
.ps2-solid:hover { border-color: rgba(59, 130, 246, .48); background: rgba(59, 130, 246, .10); }

.ps2-weak      { border-color: rgba(239, 68, 68, .26); background: rgba(239, 68, 68, .06); }
.ps2-weak      .ps2-stat-val { color: var(--red); }
.ps2-weak:hover { border-color: rgba(239, 68, 68, .48); background: rgba(239, 68, 68, .10); }

.ps2-untouched .ps2-stat-val { color: var(--text-dim); }

/* Lab difficulty tiles — green/yellow/red progression */
.ps2-diff-beg  { border-color: rgba(34, 197, 94, .22); }
.ps2-diff-beg  .ps2-stat-val { color: var(--green); }
.ps2-diff-int  { border-color: rgba(245, 158, 11, .22); }
.ps2-diff-int  .ps2-stat-val { color: var(--yellow); }
.ps2-diff-adv  { border-color: rgba(239, 68, 68, .22); }
.ps2-diff-adv  .ps2-stat-val { color: var(--red); }

/* Labs card — swap to green accent (matches Mastery vs Labs pedagogy) */
.progress-card-labs {
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(34, 197, 94, .08), transparent 55%),
    linear-gradient(160deg, rgba(34, 197, 94, .04), rgba(34, 197, 94, .01));
  border-color: rgba(34, 197, 94, .20);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, .04),
    0 8px 24px -12px rgba(34, 197, 94, .20);
}
.progress-card-labs .progress-card-ico {
  filter: drop-shadow(0 2px 6px rgba(34, 197, 94, .25));
}
.progress-card-labs .ps2-cover-bar {
  background: rgba(34, 197, 94, .08);
}
.progress-card-labs .ps2-cover-fill {
  background: linear-gradient(90deg, var(--green), #4ade80);
  box-shadow: 0 0 8px rgba(34, 197, 94, .3);
}

/* ── Toolbar — cleaner pill chips + branded search ── */
.progress-toolbar {
  display: flex;
  gap: 10px;
  margin-bottom: 14px;
  flex-wrap: wrap;
  align-items: center;
}
.progress-search {
  flex: 1 1 220px;
  min-width: 0;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 13px;
  font-family: inherit;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.progress-search::placeholder { color: var(--text-dim); opacity: .8; }
.progress-search:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .18);
}
.progress-filters {
  display: inline-flex;
  gap: 3px;
  padding: 3px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.prog-filter-btn {
  background: transparent;
  border: none;
  color: var(--text-dim);
  font-size: 12px;
  font-weight: 700;
  padding: 7px 14px;
  border-radius: 7px;
  cursor: pointer;
  font-family: inherit;
  letter-spacing: .01em;
  transition: color .15s ease, background .15s ease;
}
.prog-filter-btn:hover { color: var(--text); }
.prog-filter-btn.prog-filter-active {
  background: linear-gradient(135deg, var(--accent), var(--accent-light));
  color: #fff;
  box-shadow: 0 2px 6px -2px rgba(var(--accent-rgb), .5);
}
.progress-sort { display: inline-flex; align-items: center; gap: 6px; }
.prog-sort-label { font-size: 11px; color: var(--text-dim); text-transform: uppercase; letter-spacing: .05em; font-weight: 700; }
.prog-sort-select { padding: 8px 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: 12px; font-family: inherit; cursor: pointer; }
.prog-sort-select:focus { outline: none; border-color: var(--accent); }
/* ── Domain accordions — 5-colour left-border + polished summary ── */
.progress-domain {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left-width: 3px;
  border-radius: var(--radius);
  margin-bottom: 10px;
  padding: 0;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.progress-domain[open] { padding-bottom: 10px; box-shadow: 0 2px 10px -6px rgba(0, 0, 0, .2); }
.progress-domain-head {
  cursor: pointer;
  padding: 13px 16px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  list-style: none;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 12px;
  border-radius: var(--radius);
  transition: background .15s ease;
}
.progress-domain-head::-webkit-details-marker { display: none; }
.progress-domain-head::before {
  content: '\25B8';
  display: inline-block;
  color: var(--accent);
  transition: transform .2s cubic-bezier(0.2, 0.8, 0.2, 1);
  font-size: 11px;
}
.progress-domain[open] .progress-domain-head::before { transform: rotate(90deg); }
.progress-domain-head:hover { background: rgba(124,111,247,.06); }

/* 5-colour left-border accent (purple/green/blue/amber/red) matching the
   palette used by Domain Mastery card + Custom Quiz accordions + Recent
   Performance dots. Single source of visual truth across the app. */
.progress-domain[data-domain-idx="1"] { border-left-color: #7c6ff7; }
.progress-domain[data-domain-idx="2"] { border-left-color: #22c55e; }
.progress-domain[data-domain-idx="3"] { border-left-color: #3b82f6; }
.progress-domain[data-domain-idx="4"] { border-left-color: #f59e0b; }
.progress-domain[data-domain-idx="5"] { border-left-color: #ef4444; }
.progress-domain[data-domain-idx="1"][open] .progress-domain-head::before { color: #7c6ff7; }
.progress-domain[data-domain-idx="2"][open] .progress-domain-head::before { color: #22c55e; }
.progress-domain[data-domain-idx="3"][open] .progress-domain-head::before { color: #3b82f6; }
.progress-domain[data-domain-idx="4"][open] .progress-domain-head::before { color: #f59e0b; }
.progress-domain[data-domain-idx="5"][open] .progress-domain-head::before { color: #ef4444; }

.pd-name { flex: 1; font-size: 13px; font-weight: 800; letter-spacing: -0.005em; }
.pd-weight { font-size: 10px; color: var(--text-dim); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.pd-avg { font-size: 15px; font-weight: 900; min-width: 42px; text-align: right; font-variant-numeric: tabular-nums; }
.pd-count {
  font-size: 10px;
  color: var(--text-dim);
  background: rgba(var(--accent-rgb), .08);
  border: 1px solid rgba(var(--accent-rgb), .18);
  border-radius: 10px;
  padding: 3px 8px;
  font-weight: 800;
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
}
.progress-domain-rows { display: flex; flex-direction: column; gap: 6px; padding: 4px 10px 0; }

/* ── Topic play button — premium hover/press feedback ── */
.topic-play-btn {
  background: rgba(var(--accent-rgb), .1);
  border: 1px solid rgba(var(--accent-rgb), .28);
  color: var(--accent-light);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform .2s cubic-bezier(0.2, 0.8, 0.2, 1);
  padding: 0 0 0 1px;
}
.topic-play-btn:hover {
  background: linear-gradient(135deg, var(--accent), var(--accent-light));
  color: #fff;
  border-color: var(--accent);
  transform: scale(1.1);
  box-shadow: 0 4px 12px -2px rgba(var(--accent-rgb), .45);
}
.topic-play-btn:active { transform: scale(1.03); }

.pd-bar { width: 60px; height: 4px; background: var(--surface3); border-radius: 99px; overflow: hidden; flex-shrink: 0; }
.pd-bar-fill { display: block; height: 100%; border-radius: 99px; transition: width 800ms cubic-bezier(0.2, 0.8, 0.2, 1); }
.topic-name-line { display: flex; align-items: center; gap: 7px; min-width: 0; }

/* ── Topic objective badge — domain-colour tinted (5-colour palette) ── */
.topic-obj-badge {
  background: var(--surface3);
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-size: 10px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 99px;
  flex-shrink: 0;
  font-family: monospace;
  letter-spacing: .02em;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.topic-obj-concepts {
  background: rgba(124, 111, 247, .12);
  border-color: rgba(124, 111, 247, .32);
  color: #a78bfa;
}
.topic-obj-implementation {
  background: rgba(34, 197, 94, .12);
  border-color: rgba(34, 197, 94, .32);
  color: var(--green);
}
.topic-obj-operations {
  background: rgba(59, 130, 246, .12);
  border-color: rgba(59, 130, 246, .32);
  color: #60a5fa;
}
.topic-obj-security {
  background: rgba(245, 158, 11, .14);
  border-color: rgba(245, 158, 11, .34);
  color: #fbbf24;
}
.topic-obj-troubleshooting {
  background: rgba(239, 68, 68, .12);
  border-color: rgba(239, 68, 68, .34);
  color: #f87171;
}

/* ── Responsive + reduced-motion ── */
@media (max-width: 600px) {
  .ps2-grid-mastery { grid-template-columns: repeat(2, 1fr); }
  .progress-card { padding: 16px 14px 14px; }
  .progress-card-ico { font-size: 22px; }
  .progress-card-title { font-size: 14px; }
  .progress-card-sub { font-size: 11px; }
  .progress-toolbar { flex-direction: column; align-items: stretch; }
  .progress-filters { overflow-x: auto; }
  .pd-weight { display: none; }
  .pd-bar { width: 48px; }
  .ps2-stat-val { font-size: 19px; }
  .progress-title { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .ps2-cover-fill,
  .ps2-stat,
  .pd-bar-fill,
  .topic-play-btn,
  .progress-domain,
  .progress-domain-head,
  .progress-domain-head::before,
  .topic-obj-badge,
  .progress-search,
  .prog-filter-btn {
    transition: none !important;
  }
  .ps2-stat:hover,
  .topic-play-btn:hover { transform: none !important; }
}

/* ── Light-theme overrides for v4.51.0 progress page ── */
[data-theme="light"] .progress-card {
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(99, 85, 224, .10), transparent 55%),
    linear-gradient(160deg, rgba(99, 85, 224, .06), rgba(99, 85, 224, .02));
  border-color: rgba(99, 85, 224, .22);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, .04),
    0 8px 24px -14px rgba(99, 85, 224, .25);
}
[data-theme="light"] .progress-card-labs {
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(22, 163, 74, .10), transparent 55%),
    linear-gradient(160deg, rgba(22, 163, 74, .05), rgba(22, 163, 74, .01));
  border-color: rgba(22, 163, 74, .22);
}
[data-theme="light"] .ps2-stat {
  background: rgba(99, 85, 224, .04);
  border-color: rgba(99, 85, 224, .16);
}
[data-theme="light"] .ps2-strong { background: rgba(22, 163, 74, .06); border-color: rgba(22, 163, 74, .28); }
[data-theme="light"] .ps2-solid  { background: rgba(37, 99, 235, .06); border-color: rgba(37, 99, 235, .28); }
[data-theme="light"] .ps2-weak   { background: rgba(220, 38, 38, .06); border-color: rgba(220, 38, 38, .28); }
[data-theme="light"] .pd-count {
  background: rgba(99, 85, 224, .08);
  border-color: rgba(99, 85, 224, .22);
}
[data-theme="light"] .topic-obj-concepts { color: #6d5ce0; background: rgba(99, 85, 224, .10); border-color: rgba(99, 85, 224, .30); }
[data-theme="light"] .topic-obj-implementation { color: #16a34a; background: rgba(22, 163, 74, .10); border-color: rgba(22, 163, 74, .30); }
[data-theme="light"] .topic-obj-operations { color: #2563eb; background: rgba(37, 99, 235, .10); border-color: rgba(37, 99, 235, .30); }
[data-theme="light"] .topic-obj-security { color: #d97706; background: rgba(217, 119, 6, .10); border-color: rgba(217, 119, 6, .32); }
[data-theme="light"] .topic-obj-troubleshooting { color: #dc2626; background: rgba(220, 38, 38, .10); border-color: rgba(220, 38, 38, .30); }
[data-theme="light"] .prog-filter-btn.prog-filter-active {
  background: linear-gradient(135deg, #6355e0, #8b7af5);
  box-shadow: 0 2px 6px -2px rgba(99, 85, 224, .5);
}

/* ── DIFFICULTY BREAKDOWN (RESULTS) ── */
.diff-breakdown { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.dstat { flex: 1; min-width: 70px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 8px; text-align: center; }
.dstat .dv { font-size: 15px; font-weight: 800; }
.dstat .dl { font-size: 10px; color: var(--text-dim); text-transform: uppercase; letter-spacing: .05em; margin-top: 2px; }

/* ── STUDY STATS CARD ── */
.stats-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 8px; margin-bottom: 14px; }
.sstat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 10px; text-align: center; }
.sstat .sv { font-size: 20px; font-weight: 800; color: var(--accent-light); }
.sstat .sl { font-size: 10px; color: var(--text-dim); text-transform: uppercase; letter-spacing: .05em; margin-top: 3px; }
@media (min-width: 480px) { .stats-grid { grid-template-columns: repeat(4,1fr); } }

/* Hero stats strip override */
.hero-stats-strip { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
.hero-stats-strip .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 6px; margin-bottom: 0; }
.hero-stats-strip .sstat { background: rgba(var(--accent-rgb), .06); border-color: rgba(var(--accent-rgb), .15); padding: 10px 8px; }
.hero-stats-strip .sstat .sv { font-size: 16px; }
.hero-stats-strip .sstat .sl { font-size: 9px; }
@media (min-width: 560px) { .hero-stats-strip .stats-grid { grid-template-columns: repeat(5, 1fr); } }

/* ── EXAM READINESS CARD ── */
.readiness-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; margin-bottom: 14px; }
.readiness-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.readiness-score-block { display: flex; align-items: baseline; gap: 4px; }
.readiness-num { font-size: 38px; font-weight: 900; line-height: 1; }
.readiness-denom { font-size: 14px; font-weight: 600; color: var(--text-dim); }
.readiness-badge { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; padding: 4px 12px; border-radius: 99px; }
.readiness-bar-wrap { height: 5px; background: var(--surface3); border-radius: 99px; overflow: hidden; margin-bottom: 10px; }
.readiness-bar-fill { height: 100%; border-radius: 99px; transition: width .6s ease; }
.readiness-action { font-size: 12px; color: var(--text-dim); line-height: 1.5; }
.readiness-action strong { color: var(--text); }

/* v4.81.23: legacy session-banner CSS retired. The Study Plan banner was
   consolidated into #today-plan in v4.81.18; the DOM element + CSS are
   now removed. .session-* classes are no longer in use anywhere. */

/* ── SESSION TRANSITION / COMPLETE ── */
.session-hero { text-align: center; padding: 36px 20px 24px; }
.session-emoji { font-size: 58px; margin-bottom: 14px; display: block; }
.session-result-row { display: flex; align-items: center; justify-content: space-between; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 18px; margin-bottom: 10px; }
.session-result-topic { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 4px; }
.session-result-bar { width: 100px; height: 3px; background: var(--surface3); border-radius: 99px; overflow: hidden; margin-top: 4px; }
.session-result-fill { height: 100%; border-radius: 99px; }
.session-result-pct { font-size: 18px; font-weight: 800; }

/* ── CLI SIMULATOR ── */
.cli-scenario { font-size: 14px; line-height: 1.6; color: var(--text-mid); margin-bottom: 16px; padding: 14px 16px; background: var(--surface2); border-radius: var(--radius-sm); border-left: 3px solid var(--accent); }
.cli-terminal { background: #0c0c0c; color: #cccccc; font-family: 'Cascadia Mono','Consolas','Courier New',monospace; font-size: 12px; line-height: 1.5; padding: 14px 16px; border-radius: var(--radius-sm); max-height: 320px; overflow-y: auto; margin-bottom: 12px; border: 1px solid #333; }
[data-theme="light"] .cli-terminal { background: #1e1e1e; }
.cli-prompt { color: #60a5fa; }
.cli-prompt-text { color: #60a5fa; }
.cli-cursor { animation: blink 1s step-end infinite; }
@keyframes blink { 50% { opacity: 0; } }
.cli-line { color: #e5e5e5; }
.cli-output { color: #cccccc; margin: 4px 0 12px; white-space: pre-wrap; word-break: break-word; font-size: 11px; }
.cli-cmd-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 16px; }
.cli-cmd-btn { padding: 6px 14px; border-radius: 6px; border: 1px solid var(--border); background: var(--surface2); color: var(--accent-light); font-size: 12px; font-weight: 600; font-family: monospace; cursor: pointer; transition: border-color .15s, background .15s; }
.cli-cmd-btn:hover { border-color: var(--accent); background: rgba(124,111,247,.1); }
.cli-cmd-btn.used { opacity: 0.4; border-color: var(--green-border); color: var(--text-dim); }
.cli-diagnosis { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); }
.cli-diag-label { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--accent-light); margin-bottom: 12px; }

/* ── TOPOLOGY BUILDER ── */
.topo-scenario { font-size: 14px; line-height: 1.6; color: var(--text-mid); margin-bottom: 16px; padding: 14px 16px; background: var(--surface2); border-radius: var(--radius-sm); border-left: 3px solid var(--yellow); }
.topo-palette { margin-bottom: 16px; }
.topo-palette-label { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--text-dim); margin-bottom: 8px; }
.topo-device { padding: 8px 16px; border-radius: var(--radius-sm); border: 1.5px solid var(--border); background: var(--surface2); color: var(--text); font-size: 13px; font-weight: 600; cursor: pointer; transition: border-color .15s, background .15s; margin: 0 6px 6px 0; display: inline-flex; align-items: center; gap: 6px; }
.topo-device:hover { border-color: var(--accent); background: rgba(124,111,247,.08); }
.topo-device.selected { border-color: var(--accent); background: rgba(124,111,247,.2); color: var(--accent-light); box-shadow: 0 0 0 2px rgba(124,111,247,.3); }
.topo-device.placed { opacity: 0.35; pointer-events: none; }
.topo-zones { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin-bottom: 12px; }
.topo-zone { border: 2px dashed var(--border); border-radius: var(--radius); padding: 14px; min-height: 100px; cursor: pointer; transition: border-color .2s, background .2s; background: var(--surface); }
.topo-zone:hover { border-color: var(--accent-dim); background: rgba(124,111,247,.04); }
.topo-zone-label { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--text-dim); margin-bottom: 10px; text-align: center; }
.topo-zone-devices { min-height: 40px; display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.topo-placed-device { display: inline-flex; align-items: center; padding: 6px 12px; border-radius: 6px; background: rgba(124,111,247,.12); border: 1px solid var(--accent-dim); color: var(--text); font-size: 12px; font-weight: 600; }
.topo-placed-device.topo-correct { background: var(--green-bg); border-color: var(--green-border); color: var(--correct-text); }
.topo-placed-device.topo-wrong { background: var(--red-bg); border-color: var(--red-border); color: var(--wrong-text); }
.topo-controls { display: flex; gap: 8px; margin-top: 4px; }

/* ── REPORT ISSUE ── */
.report-btn { display: inline-flex; align-items: center; gap: 4px; padding: 5px 12px; border-radius: 6px; border: 1px solid var(--border); background: transparent; color: var(--text-dim); font-size: 11px; font-weight: 600; cursor: pointer; transition: border-color .15s, color .15s, background .15s; margin-top: 10px; }
.report-btn:hover { border-color: var(--yellow); color: var(--yellow); background: rgba(251,191,36,.08); }
.report-btn.reported { opacity: 0.5; cursor: default; color: var(--text-dim); }

/* ── RESOURCE LINK ── */
.resource-link { margin-top: 10px; }
.resource-link a { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 6px; background: rgba(124,111,247,.08); border: 1px solid var(--accent-dim); color: var(--accent-light); font-size: 12px; font-weight: 600; text-decoration: none; transition: background .15s, border-color .15s; }
.resource-link a:hover { background: rgba(124,111,247,.18); border-color: var(--accent); }
[data-theme="light"] .resource-link a { color: var(--accent); }
.resource-dive-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 8px; background: linear-gradient(135deg, rgba(124,111,247,.12), rgba(124,111,247,.06)); border: 1px solid var(--accent-dim); color: var(--accent-light); font-size: 12px; font-weight: 700; cursor: pointer; transition: background .2s, border-color .2s, transform .2s, box-shadow .2s; letter-spacing: .02em; }
.resource-dive-btn:hover { background: linear-gradient(135deg, rgba(124,111,247,.22), rgba(124,111,247,.12)); border-color: var(--accent); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(124,111,247,.15); }
[data-theme="light"] .resource-dive-btn { color: var(--accent); }

/* ── EXPLAIN FURTHER ── */
.explain-btn { display: inline-flex; align-items: center; gap: 4px; padding: 6px 14px; border-radius: 6px; border: 1px solid var(--accent-dim); background: rgba(124,111,247,.08); color: var(--accent-light); font-size: 12px; font-weight: 600; cursor: pointer; transition: background .15s, border-color .15s; margin-top: 10px; margin-right: 8px; }
.explain-btn:hover { background: rgba(124,111,247,.18); border-color: var(--accent); }
.explain-btn.explained { opacity: 0.5; cursor: default; }
.explain-btn:disabled { opacity: 0.5; cursor: default; }
/* v4.11 — Deep Dive panel forced white-bg + black-text to match explanation */
.deep-explain { margin-top: 14px; padding: 16px 18px; border-radius: var(--radius-sm); background: #ffffff; border: 1px solid #d4d4d8; border-left: 5px solid #7c6ff7; display: none; color: #111111; }
.deep-explain.show { display: block; }
.deep-explain strong { font-size: 13px; color: #6d28d9; display: block; margin-bottom: 8px; }
.deep-explain-text { font-size: 13px; line-height: 1.7; color: #111111; }
.deep-explain-text a { color: #6d28d9; }
.deep-section-header { display: block; font-weight: 800; color: var(--accent-light); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; margin-top: 12px; margin-bottom: 2px; }
.deep-section-header:first-child { margin-top: 0; }
/* Both panels are already white/black, so light-theme overrides are no-ops */
[data-theme="light"] .deep-section-header { color: var(--accent); }

/* ── DRAG & DROP (TOPOLOGY) ── */
.topo-device[draggable="true"] { cursor: grab; }
.topo-device[draggable="true"]:active { cursor: grabbing; }
.topo-device.dragging { opacity: 0.4; transform: scale(0.95); box-shadow: 0 0 0 2px var(--accent); }
.topo-zone-dragover { border-color: var(--accent) !important; border-style: solid !important; background: rgba(124,111,247,.1) !important; box-shadow: inset 0 0 20px rgba(124,111,247,.1); }

/* ── TOOL BUTTONS ── */
.btn-tool { background: linear-gradient(135deg,rgba(124,111,247,.08),rgba(124,111,247,.03)); color: var(--accent-light); border: 1.5px solid rgba(124,111,247,.3); font-size: 13px !important; padding: 12px 8px !important; }
.btn-tool:hover { border-color: var(--accent); background: rgba(124,111,247,.15); transform: translateY(-1px); }
[data-theme="light"] .btn-tool { color: var(--accent); }

/* ── TOPIC BRIEF (loading page) ── */
.topic-brief { margin-top: 24px; max-width: 500px; margin-left: auto; margin-right: auto; background: rgba(124,111,247,.06); border: 1px solid var(--accent-dim); border-radius: var(--radius); padding: 20px; text-align: left; }
.topic-brief h3 { color: var(--accent-light); margin-bottom: 10px; }
.topic-brief-text { font-size: 13px; line-height: 1.7; color: var(--text-mid); }
[data-theme="light"] .topic-brief { background: rgba(124,111,247,.04); }

/* ── TOPIC DEEP DIVE ── */
.topic-dive-obj { font-size: 12px; font-weight: 700; color: var(--accent-light); letter-spacing: .08em; text-transform: uppercase; margin-bottom: 20px; padding: 4px 12px; background: rgba(124,111,247,.08); border-radius: 99px; display: inline-block; }
[data-theme="light"] .topic-dive-obj { color: var(--accent); }
.topic-dive-content { max-width: 700px; }
.topic-dive-loading { text-align: center; padding: 60px 20px; }
.topic-dive-error { text-align: center; padding: 40px 20px; color: var(--text-dim); font-size: 14px; }
.td-section { display: flex; gap: 14px; padding: 18px 20px; margin-bottom: 12px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); transition: border-color .2s; }
.td-section:hover { border-color: var(--accent-dim); }
.td-section-icon { font-size: 22px; flex-shrink: 0; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: rgba(124,111,247,.08); border-radius: 10px; }
.td-section-body { flex: 1; min-width: 0; }
.td-section-body h3 { font-size: 14px; font-weight: 800; color: var(--text); margin-bottom: 8px; letter-spacing: .02em; }
.td-section-body p { font-size: 13px; line-height: 1.75; color: var(--text-mid); }
.td-summary { background: linear-gradient(135deg, rgba(124,111,247,.06), rgba(34,197,94,.04)); border-color: rgba(124,111,247,.2); }
.td-concept-grid { display: flex; flex-direction: column; gap: 8px; }
.td-concept-card { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 8px; background: rgba(124,111,247,.04); border: 1px solid rgba(124,111,247,.08); }
.td-concept-card:hover { border-color: var(--accent-dim); background: rgba(124,111,247,.07); }
.td-concept-icon { font-size: 16px; flex-shrink: 0; margin-top: 1px; }
.td-concept-body { flex: 1; }
.td-concept-name { font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 2px; }
.td-concept-detail { font-size: 12px; line-height: 1.6; color: var(--text-dim); }
.td-scenario { background: linear-gradient(135deg, rgba(251,191,36,.04), rgba(251,191,36,.01)); border-color: rgba(var(--yellow-rgb),.15); }
.td-diagram-section pre.td-diagram { font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', 'Consolas', monospace; font-size: 12px; line-height: 1.5; color: var(--accent-light); background: rgba(0,0,0,.25); padding: 16px; border-radius: 8px; overflow-x: auto; white-space: pre; border: 1px solid rgba(124,111,247,.15); }
[data-theme="light"] .td-diagram-section pre.td-diagram { background: rgba(124,111,247,.04); color: var(--accent); }
.td-tips-list { list-style: none; padding: 0; margin: 0; }
.td-tips-list li { position: relative; padding: 6px 0 6px 20px; font-size: 13px; line-height: 1.6; color: var(--text-mid); }
.td-tips-list li::before { content: '⚡'; position: absolute; left: 0; top: 6px; font-size: 12px; }
.td-memory { background: linear-gradient(135deg, rgba(34,197,94,.05), rgba(34,197,94,.01)); border-color: rgba(34,197,94,.15); }
.td-memory-text { font-size: 14px !important; font-weight: 600; color: var(--text) !important; font-style: italic; }
@media (max-width: 600px) {
  .td-section { flex-direction: column; gap: 8px; padding: 14px 16px; }
  .td-section-icon { width: 28px; height: 28px; font-size: 18px; }
}

/* ── SUBNETTING TRAINER ── */
.subnet-score-bar { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; font-size: 15px; font-weight: 700; color: var(--text); }
.subnet-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px; margin-bottom: 20px; }
.subnet-q-num { font-size: 12px; color: var(--text-dim); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 10px; }
.subnet-question { font-size: 18px; font-weight: 700; color: var(--text); line-height: 1.5; margin-bottom: 20px; }
.subnet-input-row { display: flex; gap: 10px; }
.subnet-input { flex: 1; background: var(--surface2); border: 1.5px solid var(--border); border-radius: var(--radius-sm); padding: 13px 16px; color: var(--text); font-size: 16px; font-family: monospace; outline: none; transition: border-color .2s; }
.subnet-input:focus { border-color: var(--accent); }
.subnet-feedback { margin-top: 16px; padding: 14px 16px; border-radius: var(--radius-sm); font-size: 14px; line-height: 1.6; display: none; }
.subnet-feedback.subnet-correct { display: block; background: var(--green-bg); border: 1px solid var(--green-border); color: var(--correct-text2); }
.subnet-feedback.subnet-wrong { display: block; background: var(--red-bg); border: 1px solid var(--red-border); color: var(--wrong-text2); }
.subnet-feedback strong { font-weight: 700; }
.subnet-feedback em { font-size: 12px; opacity: .8; }
.subnet-ref { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; }
.subnet-ref h3 { margin-bottom: 12px; }
.subnet-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.subnet-table th { text-align: left; padding: 8px 10px; border-bottom: 2px solid var(--border); color: var(--text-dim); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
.subnet-table td { padding: 7px 10px; border-bottom: 1px solid var(--border); color: var(--text-mid); font-family: monospace; font-size: 13px; }
.subnet-table tr:last-child td { border-bottom: none; }

/* ── PORT NUMBER SPEED DRILL ── */
.port-stats-bar { display: flex; align-items: center; justify-content: center; gap: 24px; margin-bottom: 24px; }
.port-timer-block, .port-score-block, .port-best-block { text-align: center; }
.port-timer-label, .port-score-label, .port-best-label { display: block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--text-dim); margin-bottom: 2px; }
.port-timer { font-size: 36px; font-weight: 900; font-variant-numeric: tabular-nums; color: var(--text); transition: color .3s; }
.port-timer-warn { color: var(--yellow) !important; }
.port-timer-danger { color: var(--red) !important; animation: pulse 1s infinite; }
.port-score { font-size: 36px; font-weight: 900; color: var(--accent-light); }
.port-best { font-size: 22px; font-weight: 800; color: var(--yellow); }
.port-pregame { text-align: center; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 32px 24px; }
.port-focus-info { background: rgba(124, 111, 247, 0.1); border: 1px solid rgba(124, 111, 247, 0.3); border-radius: 10px; padding: 12px 16px; margin-bottom: 18px; font-size: 13px; color: var(--text); text-align: left; }
.port-focus-title { font-size: 13px; color: var(--accent-light); margin-bottom: 4px; }
.port-focus-title strong { font-weight: 700; }
.port-focus-stats { font-size: 12px; color: var(--text-dim); margin-bottom: 6px; }
.port-focus-weak-line { font-size: 12px; color: var(--text-dim); }
.port-focus-weak { color: var(--red); font-weight: 600; }
.port-reset-link { display: inline-block; background: none; border: none; color: var(--text-dim); font-size: 12px; text-decoration: underline; cursor: pointer; padding: 6px 10px; margin-top: 10px; }
.port-reset-link:hover { color: var(--text); }
.port-mode-toggle { display: inline-flex; gap: 6px; padding: 5px; background: var(--surface2); border: 1px solid var(--border); border-radius: 12px; margin: 0 auto 14px; }
.port-mode-btn { background: transparent; border: none; color: var(--text-dim); font-size: 13px; font-weight: 600; padding: 9px 16px; border-radius: 8px; cursor: pointer; transition: background .15s, color .15s; font-family: inherit; }
.port-mode-btn:hover { color: var(--text); }
.port-mode-btn.port-mode-active { background: var(--accent); color: #fff; box-shadow: 0 2px 8px rgba(124, 111, 247, 0.35); }
.port-mode-btn.port-mode-active:hover { color: #fff; }
/* Port Reference panel (v4.11) */
.port-ref { margin-top: 18px; text-align: left; background: var(--surface2); border: 1px solid var(--border); border-radius: 12px; padding: 0; }
.port-ref[open] { padding-bottom: 14px; }
.port-ref-summary { cursor: pointer; padding: 14px 18px; font-size: 14px; font-weight: 700; color: var(--text); list-style: none; user-select: none; border-radius: 12px; }
.port-ref-summary::-webkit-details-marker { display: none; }
.port-ref-summary::before { content: '▸'; display: inline-block; margin-right: 8px; color: var(--accent); transition: transform .15s; }
.port-ref[open] .port-ref-summary::before { transform: rotate(90deg); }
.port-ref-summary:hover { background: rgba(124,111,247,.08); }
.port-ref-controls { display: flex; flex-wrap: wrap; gap: 10px; padding: 0 18px 12px; align-items: center; }
.port-ref-search { flex: 1 1 180px; min-width: 0; padding: 9px 12px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg); color: var(--text); font-size: 13px; font-family: inherit; }
.port-ref-search:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px rgba(124,111,247,.25); }
.port-ref-sort { display: inline-flex; gap: 4px; padding: 3px; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; }
.port-ref-sort-btn { background: transparent; border: none; color: var(--text-dim); font-size: 12px; font-weight: 600; padding: 6px 10px; border-radius: 6px; cursor: pointer; font-family: inherit; }
.port-ref-sort-btn:hover { color: var(--text); }
.port-ref-sort-btn.port-ref-sort-active { background: var(--accent); color: #fff; }
.port-ref-list { padding: 0 18px; max-height: 440px; overflow-y: auto; }
.port-ref-group { margin-bottom: 14px; }
.port-ref-group-head { font-size: 11px; font-weight: 800; color: var(--text-dim); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 6px; display: flex; align-items: center; gap: 8px; }
.port-ref-group-count { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 1px 7px; font-size: 10px; color: var(--text-dim); letter-spacing: 0; }
.port-ref-group-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.port-ref-card { display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; transition: border-color .15s, transform .15s; }
.port-ref-card:hover { border-color: var(--accent); transform: translateY(-1px); }
.port-ref-num { font-family: monospace; font-size: 15px; font-weight: 800; color: var(--accent-light); min-width: 42px; }
.port-ref-meta { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.port-ref-proto { font-size: 12px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.port-ref-tp { font-size: 10px; color: var(--text-dim); font-family: monospace; }
@media (max-width: 520px) {
  .port-ref-group-cards { grid-template-columns: 1fr 1fr; }
  .port-ref-list { max-height: 360px; }
}
.port-game { text-align: center; }
.port-prompt { font-size: 22px; font-weight: 700; color: var(--text); margin-bottom: 20px; padding: 20px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); transition: background .2s; }
.port-prompt.port-flash-wrong { background: var(--red-bg); border-color: var(--red-border); }
.port-options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.port-opt { padding: 18px 16px; border-radius: var(--radius-sm); border: 1.5px solid var(--border); background: var(--surface2); color: var(--text); font-size: 16px; font-weight: 600; cursor: pointer; transition: border-color .12s, background .12s, transform .12s; font-family: monospace; }
.port-opt:hover { border-color: var(--accent); background: rgba(124,111,247,.1); transform: translateY(-1px); }
.port-opt:active { transform: scale(.97); }
/* Family multi-select question (#27) */
.port-opt-multi { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.port-opt-multi .port-opt-proto { font-size: 12px; font-weight: 500; color: var(--text-dim); font-family: inherit; }
.port-opt-multi.port-opt-selected { border-color: var(--accent); background: rgba(124,111,247,.18); box-shadow: inset 0 0 0 1px var(--accent); }
.port-opt-multi.port-opt-selected .port-opt-proto { color: var(--text); }
.port-submit-family { grid-column: 1 / -1; padding: 16px; margin-top: 6px; border-radius: var(--radius-sm); border: 1.5px solid var(--accent); background: var(--accent); color: #fff; font-size: 16px; font-weight: 700; cursor: pointer; transition: filter .12s, transform .12s; }
.port-submit-family:hover { filter: brightness(1.1); transform: translateY(-1px); }
.port-submit-family:active { transform: scale(.98); }
.port-results { text-align: center; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 32px 24px; }
.port-final-score { font-size: 60px; font-weight: 900; color: var(--accent-light); }

/* ── ANALYTICS DASHBOARD ── */
.ana-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; margin-bottom: 14px; opacity: 0; animation: anaCardIn .25s ease-out forwards; }
.ana-card:nth-child(1) { animation-delay: 0s; }
.ana-card:nth-child(2) { animation-delay: .1s; }
.ana-card:nth-child(3) { animation-delay: .2s; }
.ana-card:nth-child(4) { animation-delay: .3s; }
.ana-card:nth-child(5) { animation-delay: .4s; }
.ana-card:nth-child(6) { animation-delay: .5s; }
.ana-card:nth-child(7) { animation-delay: .6s; }
.ana-card:nth-child(8) { animation-delay: .7s; }
@keyframes anaCardIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
.ana-card h3 { margin-bottom: 4px; }
.ana-subtitle { font-size: 11px; color: var(--text-dim); margin-bottom: 14px; }
.ana-chart { position: relative; height: 140px; margin-bottom: 10px; padding-left: 36px; }
.ana-chart-line { position: absolute; left: 36px; right: 0; height: 1px; background: var(--border); }
.ana-chart-lbl { position: absolute; left: -36px; font-size: 10px; color: var(--text-dim); transform: translateY(-50%); }
.ana-chart-bars { display: flex; align-items: flex-end; gap: 3px; height: 100%; }
.ana-bar-wrap { flex: 1; height: 100%; display: flex; align-items: flex-end; }
.ana-bar { width: 100%; border-radius: 3px 3px 0 0; min-height: 3px; animation: anaBarGrow .8s ease-out both; transform-origin: bottom; transition: transform .2s, filter .2s, box-shadow .2s; position: relative; cursor: pointer; }
.ana-bar:hover { transform: scaleY(1) translateY(-4px); filter: brightness(1.2); box-shadow: 0 4px 12px rgba(0,0,0,.3); z-index: 2; }
.ana-bar-tip { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%) scale(0.8); background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px; pointer-events: none; opacity: 0; transition: opacity .2s, transform .2s; white-space: nowrap; text-align: center; z-index: 10; box-shadow: 0 4px 16px rgba(0,0,0,.4); }
.ana-bar-tip strong { display: block; font-size: 14px; font-weight: 800; color: var(--text); }
.ana-bar-tip span { font-size: 10px; color: var(--text-dim); }
.ana-bar:hover .ana-bar-tip { opacity: 1; transform: translateX(-50%) scale(1); }
@keyframes anaBarGrow { from { transform: scaleY(0); opacity: 0; } to { transform: scaleY(1); opacity: 1; } }
.ana-avg { font-size: 13px; color: var(--text-mid); text-align: center; }
.ana-avg strong { color: var(--text); }

.ana-diff-grid { display: flex; flex-direction: column; gap: 10px; }
.ana-diff-item { display: grid; grid-template-columns: 100px 1fr 50px; gap: 10px; align-items: center; }
.ana-diff-name { font-size: 13px; font-weight: 600; color: var(--text); }
.ana-diff-bar { height: 6px; background: var(--surface3); border-radius: 99px; overflow: hidden; }
.ana-diff-fill { height: 100%; border-radius: 99px; animation: anaFillSlide .9s ease-out both; transform-origin: left; }
@keyframes anaFillSlide { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.ana-diff-pct { font-size: 14px; font-weight: 800; text-align: right; }
.ana-diff-count { grid-column: 2/4; font-size: 11px; color: var(--text-dim); margin-top: -6px; }

.ana-topics { display: flex; flex-direction: column; gap: 6px; }
.ana-topic-row { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.ana-topic-row:last-child { border-bottom: none; }
/* v4.11 — clickable analytics rows: hover reveals the row is interactive */
.ana-row-clickable { cursor: pointer; border-radius: 8px; padding-left: 8px; padding-right: 8px; margin: 0 -8px; transition: background .15s; }
.ana-row-clickable:hover { background: rgba(124,111,247,.08); }
.ana-row-clickable:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.ana-topic-name { flex: 1; font-size: 13px; font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ana-topic-bar { width: 80px; height: 4px; background: var(--surface3); border-radius: 99px; overflow: hidden; flex-shrink: 0; }
.ana-topic-fill { height: 100%; border-radius: 99px; animation: anaFillSlide .9s ease-out both; transform-origin: left; }
.ana-topic-pct { font-size: 13px; font-weight: 800; min-width: 36px; text-align: right; }
.ana-topic-trend { font-size: 14px; font-weight: 700; min-width: 18px; text-align: center; }
.ana-topic-sessions { font-size: 11px; color: var(--text-dim); min-width: 24px; text-align: right; }

/* v4.46.1: calendar polish — bigger gap + corner radius to match the premium
   card language at the new wider canvas (Analytics page lifted to 1040px). */
.ana-calendar { display: grid; grid-template-columns: repeat(10, 1fr); gap: 5px; margin-bottom: 12px; }
.ana-cal-day { aspect-ratio: 1; border-radius: 6px; display: flex; align-items: center; justify-content: center; animation: anaCalPop .25s ease-out both; position: relative; transition: transform .2s, box-shadow .2s; cursor: default; flex-direction: column; }
.ana-cal-day:hover { transform: scale(1.15); z-index: 2; }
.ana-cal-day.cal-active { cursor: pointer; }
.ana-cal-day.cal-active:hover { box-shadow: 0 0 14px rgba(var(--accent-rgb),.5); }
.ana-cal-day.cal-hot { animation: anaCalPop .25s ease-out both, calGlow 2s ease-in-out infinite; }
@keyframes calGlow { 0%,100% { box-shadow: 0 0 4px rgba(var(--accent-rgb),.2); } 50% { box-shadow: 0 0 16px rgba(var(--accent-rgb),.6); } }
.cal-tip { position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%) scale(0.8); background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 4px 8px; font-size: 10px; font-weight: 700; color: var(--accent-light); white-space: nowrap; opacity: 0; transition: opacity .2s, transform .2s; pointer-events: none; z-index: 10; box-shadow: 0 4px 12px rgba(0,0,0,.4); }
.ana-cal-day:hover .cal-tip { opacity: 1; transform: translateX(-50%) scale(1); }
@keyframes anaCalPop { from { transform: scale(0.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.ana-cal-num { font-size: 9px; font-weight: 700; color: var(--text-dim); }
.ana-cal-legend { display: flex; align-items: center; justify-content: center; gap: 4px; font-size: 10px; color: var(--text-dim); }
.ana-cal-day-sm { width: 12px; height: 12px; border-radius: 2px; }

.ana-exams { display: flex; flex-direction: column; gap: 8px; }
.ana-exam-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.ana-exam-row:last-child { border-bottom: none; }
.ana-exam-score { font-size: 22px; font-weight: 900; min-width: 50px; }
.ana-exam-badge { font-size: 10px; font-weight: 800; padding: 2px 8px; border-radius: 4px; }
.ana-exam-details { flex: 1; font-size: 13px; color: var(--text-mid); }
.ana-exam-date { font-size: 11px; color: var(--text-dim); }

.ana-priority { border-color: rgba(var(--yellow-rgb),.3); background: rgba(var(--yellow-rgb),.03); }
.ana-priority h3 { color: var(--yellow); }
.ana-priority-list { display: flex; flex-direction: column; gap: 6px; }
.ana-priority-item { display: flex; align-items: center; gap: 10px; padding: 8px 0; }
.ana-priority-rank { width: 22px; height: 22px; border-radius: 50%; background: rgba(var(--yellow-rgb),.15); color: var(--yellow); font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.ana-priority-name { flex: 1; font-size: 13px; font-weight: 600; color: var(--text); }
.ana-priority-pct { font-size: 14px; font-weight: 800; }

.ana-weekly { display: flex; flex-direction: column; gap: 8px; }
.ana-week-row { display: flex; align-items: center; gap: 10px; }
.ana-week-label { font-size: 12px; color: var(--text-mid); min-width: 90px; }
.ana-week-bar { flex: 1; height: 8px; background: var(--surface3); border-radius: 99px; overflow: hidden; }
.ana-week-fill { height: 100%; background: var(--accent); border-radius: 99px; transition: width .4s; }
.ana-week-count { font-size: 13px; font-weight: 700; color: var(--text); min-width: 24px; text-align: right; }

.ana-alltime { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; }
.ana-stat { background: var(--surface2); border-radius: var(--radius-sm); padding: 16px; text-align: center; }
.ana-stat-val { font-size: 24px; font-weight: 900; color: var(--accent-light); }
.ana-stat-lbl { font-size: 10px; color: var(--text-dim); text-transform: uppercase; letter-spacing: .06em; margin-top: 3px; }
@media (min-width: 480px) { .ana-alltime { grid-template-columns: repeat(4,1fr); } }

/* Advanced collapsible section */
.advanced-section { padding: 0; }
.advanced-section > summary { list-style: none; cursor: pointer; padding: 14px 16px; display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--text); user-select: none; }
.advanced-section > summary::-webkit-details-marker { display: none; }
.advanced-section > summary::after { content: '\25BE'; margin-left: auto; color: var(--text-dim); transition: transform .2s; }
.advanced-section[open] > summary::after { transform: rotate(180deg); }
.advanced-section .adv-hint { font-size: 11px; color: var(--text-dim); font-weight: 500; }
.advanced-section .advanced-body { padding: 0 16px 16px; border-top: 1px solid var(--border); }

/* Topic domain groups (v4.6) */
.topic-group-v2 { display: flex; flex-direction: column; gap: 10px; }
.topic-quickpicks { display: flex; flex-wrap: wrap; gap: 6px; padding-bottom: 10px; border-bottom: 1px dashed var(--border); }
.topic-domain-group { background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.topic-domain-group[open] { border-color: rgba(var(--accent-rgb), .3); }
.topic-domain-group > summary { list-style: none; cursor: pointer; padding: 10px 14px; display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12px; font-weight: 800; letter-spacing: .04em; color: var(--text); text-transform: uppercase; user-select: none; transition: background .2s; }
.topic-domain-group > summary::-webkit-details-marker { display: none; }
.topic-domain-group > summary::before { content: '\25B8'; color: var(--text-dim); font-size: 10px; transition: transform .2s; display: inline-block; margin-right: 4px; }
.topic-domain-group[open] > summary::before { transform: rotate(90deg); }
.topic-domain-group > summary:hover { background: var(--surface3); }
.topic-domain-group .dom-name { flex: 1; }
.topic-domain-group .dom-weight { font-size: 10px; color: var(--accent-light); background: rgba(var(--accent-rgb), .12); padding: 2px 8px; border-radius: 99px; font-weight: 800; }
.topic-domain-group .chip-grid { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 12px 12px; border-top: 1px solid var(--border); }

/* ── v4.10 Front-page cards: streak defender, daily challenge, today's focus, quiz presets ── */
.streak-defender { display: flex; align-items: center; gap: 14px; background: linear-gradient(135deg, rgba(251, 146, 60, 0.15), rgba(251, 191, 36, 0.08)); border: 1px solid rgba(251, 146, 60, 0.5); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 14px; box-shadow: 0 4px 18px rgba(251, 146, 60, 0.1); animation: sd-pulse 2.2s ease-in-out infinite; }
@keyframes sd-pulse { 0%, 100% { box-shadow: 0 4px 18px rgba(251, 146, 60, 0.1); } 50% { box-shadow: 0 6px 24px rgba(251, 146, 60, 0.22); } }
.sd-icon { font-size: 28px; flex-shrink: 0; }
.sd-body { flex: 1; min-width: 0; }
.sd-title { font-size: 14px; font-weight: 800; color: var(--text); margin-bottom: 2px; }
.sd-sub { font-size: 12px; color: var(--text-mid); }
.sd-btn { background: var(--orange, #fb923c); border: none; color: #fff; font-weight: 700; font-size: 13px; padding: 9px 14px; border-radius: 10px; cursor: pointer; transition: transform .12s, box-shadow .12s; flex-shrink: 0; }
.sd-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(251, 146, 60, 0.4); }
.sd-btn:active { transform: scale(.97); }

.daily-challenge-card { display: flex; align-items: center; gap: 14px; background: linear-gradient(135deg, rgba(124, 111, 247, 0.12), rgba(147, 197, 253, 0.06)); border: 1px solid rgba(124, 111, 247, 0.35); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 14px; }
.daily-challenge-card.dc-done { background: linear-gradient(135deg, rgba(34, 197, 94, 0.12), rgba(34, 197, 94, 0.04)); border-color: rgba(34, 197, 94, 0.35); }
.dc-icon { font-size: 28px; flex-shrink: 0; }
.dc-body { flex: 1; min-width: 0; }
.dc-title { font-size: 10px; font-weight: 800; letter-spacing: .1em; color: var(--accent-light); text-transform: uppercase; margin-bottom: 4px; }
.daily-challenge-card.dc-done .dc-title { color: var(--green); }
.dc-sub { font-size: 13px; color: var(--text); }
.dc-btn { background: var(--accent); border: none; color: #fff; font-weight: 700; font-size: 13px; padding: 10px 16px; border-radius: 10px; cursor: pointer; transition: transform .12s, box-shadow .12s; flex-shrink: 0; }
.dc-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(124, 111, 247, 0.4); }
.dc-btn:active { transform: scale(.97); }
.dc-count { font-size: 11px; font-weight: 800; color: var(--green); background: rgba(34, 197, 94, 0.15); padding: 4px 10px; border-radius: 99px; flex-shrink: 0; }

/* v4.81.23: legacy .todays-focus + .tf-* classes retired. The Weak Spots
   chip row was consolidated into #today-plan in v4.81.18; the DOM element
   + CSS are now removed. */

/* ── v4.81.18: Consolidated Today's Plan card ──
   Replaces the 3 stacked surfaces (Weak Spots row + Rotation row +
   Study Plan banner) with one prescriptive card. Purple gradient matches
   the legacy session-banner so the visual weight stays familiar.
   Mockup: mockups/today-consolidation-concept.html */
.today-plan { position: relative; background: linear-gradient(135deg, #6c5ce7 0%, #5a4ed4 100%); border-radius: var(--radius); padding: 28px 28px 24px; color: #fff; overflow: hidden; margin-bottom: 14px; }
.today-plan::before { content: '\201C'; position: absolute; left: 16px; top: -10px; font-size: 90px; line-height: 1; color: rgba(255,255,255,.16); font-family: Georgia, serif; pointer-events: none; }
.tplan-eyebrow { font-size: 11px; font-weight: 800; letter-spacing: .14em; color: rgba(255,255,255,.78); text-transform: uppercase; margin-left: 36px; margin-bottom: 8px; }
.tplan-headline { font-size: 22px; font-weight: 800; line-height: 1.2; color: #fff; margin-left: 36px; margin-bottom: 6px; }
.tplan-headline em { font-style: normal; color: #fbbf24; }
.tplan-sub { font-size: 14px; line-height: 1.5; color: rgba(255,255,255,.88); margin-left: 36px; margin-bottom: 18px; max-width: 580px; }
.tplan-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px 36px; }
.tplan-chip { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.22); border-left-width: 3px; color: #fff; font-weight: 600; font-size: 13px; padding: 7px 13px; border-radius: 8px; cursor: pointer; font-family: inherit; transition: background .15s, transform .12s, border-color .15s; }
.tplan-chip:hover { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.4); transform: translateY(-1px); }
.tplan-chip:active { transform: scale(.97); }
.tplan-chip-icon { font-size: 13px; opacity: .9; }
.tplan-chip-name { line-height: 1.2; }
.tplan-chip-arrow { font-size: 11px; opacity: .6; margin-left: 2px; }
/* Signal-type left-border colours */
.tplan-chip[data-signal="weak"] { border-left-color: #fbbf24; }
.tplan-chip[data-signal="stale"] { border-left-color: #f59e0b; opacity: .94; }
.tplan-chip[data-signal="fallback"] { border-left-color: rgba(255,255,255,.5); }
/* v4.81.21: Subnet Trainer bridge buttons inside the Today's Plan card.
   Restored from v4.43.1 (retired in v4.81.18 consolidation). Surfaces
   a "Drill in Subnet Trainer →" alternative for subnet-heavy topics
   (Subnetting & IP Addressing / IPv6 / NAT & IP Services). Visually
   subordinate to the chips but more affordant than plain text. */
.tplan-bridges { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px 36px; }
.tplan-bridge-btn { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,.06); border: 1px dashed rgba(255,255,255,.32); color: rgba(255,255,255,.92); font-weight: 600; font-size: 12.5px; padding: 6px 12px; border-radius: 999px; cursor: pointer; font-family: inherit; transition: background .15s, border-color .15s, transform .12s; }
.tplan-bridge-btn:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.5); border-style: solid; transform: translateY(-1px); }
.tplan-bridge-btn:active { transform: scale(.97); }
.tplan-bridge-icon { font-size: 14px; }
.tplan-bridge-label { line-height: 1.2; }
.tplan-bridge-arrow { font-size: 11px; opacity: .65; }
@media (max-width: 540px) {
  .tplan-bridges { margin-left: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .tplan-bridge-btn { transition: background-color .2s, border-color .2s !important; }
  .tplan-bridge-btn:hover { transform: none !important; }
  .tplan-bridge-btn:active { transform: none !important; }
}
/* Footer: composition meta + primary CTA */
.tplan-foot { display: flex; align-items: center; gap: 16px; margin-left: 36px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.14); flex-wrap: wrap; }
.tplan-foot-meta { flex: 1; min-width: 160px; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; color: rgba(255,255,255,.7); text-transform: uppercase; }
.tplan-cta { background: #fff; color: #5a4ed4; border: none; padding: 11px 20px; border-radius: 10px; font-weight: 700; font-size: 14px; cursor: pointer; white-space: nowrap; transition: transform .12s, box-shadow .12s; font-family: inherit; }
.tplan-cta:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0,0,0,.22); }
.tplan-cta:active { transform: scale(.97); }
/* Mobile: stack the foot row, shrink the eyebrow indent */
@media (max-width: 540px) {
  .today-plan { padding: 22px 18px 20px; }
  .today-plan::before { left: 8px; font-size: 70px; }
  .tplan-eyebrow, .tplan-headline, .tplan-sub, .tplan-chips, .tplan-foot { margin-left: 24px; }
  .tplan-headline { font-size: 19px; }
  .tplan-foot { flex-direction: column; align-items: stretch; }
  .tplan-cta { width: 100%; }
}
/* Reduced-motion: neutralize hover lift + active scale */
@media (prefers-reduced-motion: reduce) {
  .tplan-chip { transition: background-color .2s, border-color .2s !important; }
  .tplan-chip:hover { transform: none !important; }
  .tplan-chip:active { transform: none !important; }
  .tplan-cta { transition: background-color .2s !important; }
  .tplan-cta:hover { transform: none !important; box-shadow: none !important; }
  .tplan-cta:active { transform: none !important; }
}
.today-section .today-plan { margin-bottom: 0; }

/* v4.81.23: legacy .rotation-row + .rot-* classes retired. The Due for
   Rotation chip row was consolidated into #today-plan in v4.81.18; the
   DOM element + CSS are now removed. */

/* ── Today section (v4.32) ── */
.today-section { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; margin-bottom: 14px; display: flex; flex-direction: column; gap: 12px; }
.today-section-title { font-size: 11px; font-weight: 800; letter-spacing: .1em; color: var(--text-dim); text-transform: uppercase; margin: 0; }
.today-section .daily-goal-card { border: none; padding: 0; background: transparent; }
.today-section .streak-defender { margin-bottom: 0; }
.today-section .daily-challenge-card { margin-bottom: 0; }
/* v4.81.23: .today-section .todays-focus / .session-card / #session-banner /
   .weak-banner descendant rules removed (target elements no longer exist). */

/* ── Setup nav bar (v4.38.1) ── */
.setup-nav-group { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.setup-nav { display: flex; flex-direction: column; gap: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 6px 8px 8px; }
.setup-nav-heading { font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim); padding: 2px 4px 4px; }
.setup-nav-row { display: flex; gap: 6px; }
.setup-nav-btn { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; background: transparent; border: 1.5px solid transparent; border-radius: var(--radius-sm); padding: 10px 4px; cursor: pointer; transition: background .15s, border-color .15s, color .15s, transform .15s; font-family: inherit; color: var(--text-mid); }
.setup-nav-btn:hover { background: rgba(var(--accent-rgb), .08); border-color: rgba(var(--accent-rgb), .25); color: var(--accent-light); transform: translateY(-1px); }
.setup-nav-btn:active { transform: scale(.96); }
.setup-nav-icon { font-size: 20px; line-height: 1; }
.setup-nav-label { font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
@media (max-width: 420px) {
  .setup-nav-row { flex-wrap: wrap; }
  .setup-nav-btn { flex: 0 0 calc(33.333% - 4px); }
}

/* ── Presets section (v4.32) ── */
.presets-section { margin-bottom: 14px; }
.presets-heading { font-size: 11px; font-weight: 800; letter-spacing: .08em; color: var(--text-dim); text-transform: uppercase; margin: 0 0 6px 2px; }

.quiz-presets { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin: 0 0 10px; }
.preset-tile { display: flex; flex-direction: column; align-items: center; gap: 4px; background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--radius); padding: 14px 10px; cursor: pointer; transition: border-color .15s, transform .15s, box-shadow .15s; font-family: inherit; text-align: center; }
.preset-tile:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 6px 18px rgba(var(--accent-rgb), 0.15); }
.preset-tile:active { transform: scale(.98); }
.preset-tile.preset-featured { background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.12), rgba(var(--accent-rgb), 0.04)); border-color: rgba(var(--accent-rgb), 0.5); }
.preset-tile.preset-wrong { background: linear-gradient(135deg, rgba(248,113,113,.08), rgba(248,113,113,.03)); border-color: rgba(248,113,113,.35); }
.preset-tile.preset-wrong:hover { border-color: var(--red); box-shadow: 0 6px 18px rgba(248,113,113,.15); }
.preset-icon { font-size: 22px; }
.preset-title { font-size: 13px; font-weight: 800; color: var(--text); }
.preset-sub { font-size: 10px; color: var(--text-dim); line-height: 1.3; }
@media (max-width: 520px) {
  .quiz-presets { grid-template-columns: 1fr; }
  .preset-tile { flex-direction: row; justify-content: flex-start; gap: 12px; text-align: left; }
}

/* ── Drills launcher page (v4.41.0) ── */
.drills-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.drills-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--radius); padding: 22px 20px; cursor: pointer; transition: border-color .15s, transform .15s, box-shadow .15s; font-family: inherit; text-align: left; color: var(--text); }
.drills-tile:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(var(--accent-rgb), 0.18); }
.drills-tile:active { transform: scale(.98); }
.drills-tile-icon { font-size: 32px; }
.drills-tile-title { font-size: 17px; font-weight: 800; color: var(--text); }
.drills-tile-sub { font-size: 12px; color: var(--text-dim); line-height: 1.4; }

/* ── Custom Quiz section (v4.32, revamped v4.50.0) ── */
.custom-quiz-section { padding: 0; margin-bottom: 14px; }
.custom-quiz-summary { list-style: none; cursor: pointer; padding: 14px 16px; display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--text); user-select: none; }
.custom-quiz-summary::-webkit-details-marker { display: none; }
.custom-quiz-summary::after { content: '\25BE'; margin-left: auto; color: var(--text-dim); transition: transform .2s; }
.custom-quiz-section[open] .custom-quiz-summary::after { transform: rotate(180deg); }
.custom-quiz-body { padding: 0 16px 16px; border-top: 1px solid var(--border); }
.custom-quiz-body h3 { margin: 0; }

/* v4.50.0: section headers with icon + accent underline */
.cq-section-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(var(--accent-rgb), .14);
}
.cq-section-ico {
  font-size: 15px;
  line-height: 1;
  filter: grayscale(.1);
}
.cq-section-title {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent-light);
  margin: 0;
}

/* v4.50.0: Smart/Mixed premium mode cards (replaces plain quick-pick chips) */
.topic-quickpicks {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  padding-bottom: 14px;
  margin-bottom: 10px;
  border-bottom: 1px solid rgba(var(--accent-rgb), .14);
}
.cq-mode-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
  width: 100%;
}
.cq-mode-card:hover {
  transform: translateY(-1px);
  border-color: rgba(var(--accent-rgb), .45);
  background: var(--surface2);
  box-shadow: 0 4px 12px -6px rgba(var(--accent-rgb), .25);
}
.cq-mode-card.on {
  background:
    radial-gradient(120% 160% at 0% 0%, rgba(var(--accent-rgb), .22), transparent 55%),
    linear-gradient(160deg, rgba(var(--accent-rgb), .16), rgba(var(--accent-rgb), .04));
  border-color: rgba(var(--accent-rgb), .55);
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb), .25) inset;
}
.cq-mode-ico {
  font-size: 26px;
  line-height: 1;
  flex-shrink: 0;
}
.cq-mode-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.cq-mode-title {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--text);
}
.cq-mode-sub {
  font-size: 11.5px;
  color: var(--text-dim);
  line-height: 1.35;
}
.cq-mode-card.on .cq-mode-title { color: var(--accent-light); }

/* v4.50.0: domain accordions — 5-color left-border accents matching the
   Domain Mastery palette so scanning "which domain is this" is instant. */
.topic-domain-group[data-domain-idx="1"] { border-left: 3px solid #7c6ff7; }
.topic-domain-group[data-domain-idx="2"] { border-left: 3px solid #22c55e; }
.topic-domain-group[data-domain-idx="3"] { border-left: 3px solid #3b82f6; }
.topic-domain-group[data-domain-idx="4"] { border-left: 3px solid #f59e0b; }
.topic-domain-group[data-domain-idx="5"] { border-left: 3px solid #ef4444; }
.topic-domain-group[data-domain-idx="1"][open] .dom-weight { background: rgba(124, 111, 247, .16); color: #a78bfa; }
.topic-domain-group[data-domain-idx="2"][open] .dom-weight { background: rgba(34, 197, 94, .16); color: #4ade80; }
.topic-domain-group[data-domain-idx="3"][open] .dom-weight { background: rgba(59, 130, 246, .16); color: #60a5fa; }
.topic-domain-group[data-domain-idx="4"][open] .dom-weight { background: rgba(245, 158, 11, .16); color: #fbbf24; }
.topic-domain-group[data-domain-idx="5"][open] .dom-weight { background: rgba(239, 68, 68, .16); color: #f87171; }

/* ── v4.81.17: Domain Drill — Mode Ladder secondary row + Custom Quiz pre-fill row ── */
/* Color-coded left borders match .topic-domain-group + .progress-domain so the
   visual language stays consistent across all 3 surfaces (Mode Ladder, Custom
   Quiz accordion, Progress page). */
.modes-domain-row { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px 4px; border-top: 1px dashed var(--border); margin-top: 6px; }
.modes-domain-label { font-size: 11px; font-weight: 800; letter-spacing: .08em; color: var(--text-dim); text-transform: uppercase; }
.modes-domain-label em { font-style: normal; color: var(--accent-light); }
.modes-domain-tiles { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.modes-domain-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; background: var(--surface2); border: 1px solid var(--border); border-left-width: 3px; border-radius: var(--radius-sm); padding: 10px 12px; cursor: pointer; font-family: inherit; text-align: left; transition: background .15s, border-color .15s, transform .15s; min-height: 76px; }
.modes-domain-tile:hover { background: var(--surface3); border-color: rgba(var(--accent-rgb), .35); transform: translateY(-1px); }
.modes-domain-tile:active { transform: scale(.97); }
.modes-domain-tile .mdt-num { font-size: 11px; font-weight: 800; letter-spacing: .04em; color: var(--text-dim); }
.modes-domain-tile .mdt-name { font-size: 13px; font-weight: 700; color: var(--text); line-height: 1.25; }
.modes-domain-tile .mdt-meta { font-size: 10.5px; font-weight: 600; color: var(--text-dim); margin-top: auto; }
.modes-domain-tile[data-domain-idx="1"] { border-left-color: #7c6ff7; }
.modes-domain-tile[data-domain-idx="2"] { border-left-color: #22c55e; }
.modes-domain-tile[data-domain-idx="3"] { border-left-color: #3b82f6; }
.modes-domain-tile[data-domain-idx="4"] { border-left-color: #f59e0b; }
.modes-domain-tile[data-domain-idx="5"] { border-left-color: #ef4444; }
.modes-domain-tile[data-domain-idx="1"] .mdt-num { color: #a78bfa; }
.modes-domain-tile[data-domain-idx="2"] .mdt-num { color: #4ade80; }
.modes-domain-tile[data-domain-idx="3"] .mdt-num { color: #60a5fa; }
.modes-domain-tile[data-domain-idx="4"] .mdt-num { color: #fbbf24; }
.modes-domain-tile[data-domain-idx="5"] .mdt-num { color: #f87171; }

/* Custom Quiz pre-fill pill row — sits above the topic accordion. Smaller,
   chip-shaped — secondary affordance vs. the Mode Ladder primary tiles. */
.topic-domain-prefill { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 6px 0 12px; border-bottom: 1px dashed var(--border); margin-bottom: 10px; }
.tdp-label { font-size: 11px; font-weight: 800; letter-spacing: .08em; color: var(--text-dim); text-transform: uppercase; white-space: nowrap; }
.tdp-pills { display: flex; gap: 6px; flex-wrap: wrap; flex: 1; }
.tdp-pill { background: var(--surface2); border: 1px solid var(--border); border-left-width: 3px; color: var(--text); font-weight: 700; font-size: 12px; padding: 6px 12px; border-radius: 8px; cursor: pointer; transition: background .15s, border-color .15s, transform .15s; font-family: inherit; }
.tdp-pill:hover { background: var(--surface3); border-color: rgba(var(--accent-rgb), .4); transform: translateY(-1px); }
.tdp-pill:active { transform: scale(.97); }
.tdp-pill[data-domain-idx="1"] { border-left-color: #7c6ff7; }
.tdp-pill[data-domain-idx="2"] { border-left-color: #22c55e; }
.tdp-pill[data-domain-idx="3"] { border-left-color: #3b82f6; }
.tdp-pill[data-domain-idx="4"] { border-left-color: #f59e0b; }
.tdp-pill[data-domain-idx="5"] { border-left-color: #ef4444; }

/* Mobile responsiveness — collapse the 5-column grid on narrow screens */
@media (max-width: 720px) {
  .modes-domain-tiles { grid-template-columns: repeat(2, 1fr); }
  .modes-domain-tile .mdt-name { font-size: 12px; }
}
@media (max-width: 420px) {
  .modes-domain-tiles { grid-template-columns: 1fr; }
}

/* Reduced-motion gate — neutralize the hover lift + active scale */
@media (prefers-reduced-motion: reduce) {
  .modes-domain-tile { transition: background-color .2s, border-color .2s !important; }
  .modes-domain-tile:hover { transform: none !important; }
  .modes-domain-tile:active { transform: none !important; }
  .tdp-pill { transition: background-color .2s, border-color .2s !important; }
  .tdp-pill:hover { transform: none !important; }
  .tdp-pill:active { transform: none !important; }
}

/* v4.50.0: Difficulty + Questions grid layout */
.cq-options-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 22px;
  margin-top: 6px;
}
@media (max-width: 560px) {
  .cq-options-grid { grid-template-columns: 1fr; gap: 6px; }
}

/* v4.50.0: Difficulty tier-colored pills */
.cq-diff-group {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.cq-diff-group .chip { justify-content: center; padding: 8px 10px; font-weight: 600; }
.chip-tier-found { border-color: rgba(34, 197, 94, .35) !important; }
.chip-tier-found.on { background: rgba(34, 197, 94, .18) !important; border-color: rgba(34, 197, 94, .6) !important; color: #4ade80 !important; }
.chip-tier-exam { border-color: rgba(var(--accent-rgb), .35) !important; }
.chip-tier-exam.on { background: rgba(var(--accent-rgb), .18) !important; border-color: rgba(var(--accent-rgb), .6) !important; color: var(--accent-light) !important; }
.chip-tier-hard { border-color: rgba(239, 68, 68, .35) !important; }
.chip-tier-hard.on { background: rgba(239, 68, 68, .18) !important; border-color: rgba(239, 68, 68, .6) !important; color: #f87171 !important; }
.chip-tier-mixed { border-color: rgba(245, 158, 11, .35) !important; }
.chip-tier-mixed.on { background: rgba(245, 158, 11, .18) !important; border-color: rgba(245, 158, 11, .6) !important; color: #fbbf24 !important; }

/* v4.50.0: Question count pills with time-estimate subtitle */
.cq-count-group {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.chip-count {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 10px 4px !important;
  border-radius: 10px !important;
  line-height: 1.1;
}
.chip-count-num {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--text);
}
.chip-count-sub {
  font-size: 10px;
  color: var(--text-dim);
  font-weight: 600;
}
.chip-count.on .chip-count-num { color: #fff; }
.chip-count.on .chip-count-sub { color: rgba(255, 255, 255, .85); }
.chip-count.on {
  background: linear-gradient(135deg, var(--accent), #6355e0) !important;
  border-color: transparent !important;
  box-shadow: 0 2px 8px rgba(var(--accent-rgb), .35);
}

/* v4.50.0: premium Generate button */
.cq-generate-btn {
  margin-top: 18px !important;
  padding: 14px 20px !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  letter-spacing: .01em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: linear-gradient(135deg, var(--accent), #6355e0) !important;
  border: none !important;
  box-shadow: 0 4px 14px -4px rgba(var(--accent-rgb), .45), 0 1px 3px rgba(0,0,0,.1);
  transition: background .2s ease, transform .2s ease !important;
}
.cq-generate-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px -4px rgba(var(--accent-rgb), .55), 0 2px 6px rgba(0,0,0,.12);
}
.cq-generate-ico {
  font-size: 18px;
  display: inline-block;
  animation: cqSparkle 2.6s ease-in-out infinite;
  transform-origin: center;
}
@keyframes cqSparkle {
  0%, 100% { transform: scale(1) rotate(0deg); filter: drop-shadow(0 0 0 rgba(255,255,255,.4)); }
  50%      { transform: scale(1.15) rotate(-8deg); filter: drop-shadow(0 0 6px rgba(255,255,255,.7)); }
}
.cq-generate-label { font-weight: 800; }

/* Light-theme overrides */
[data-theme="light"] .cq-mode-card { background: #fff; border-color: var(--border); }
[data-theme="light"] .cq-mode-card:hover { background: rgba(99,85,224,.04); }
[data-theme="light"] .cq-mode-card.on {
  background:
    radial-gradient(120% 160% at 0% 0%, rgba(99,85,224,.15), transparent 55%),
    linear-gradient(160deg, rgba(99,85,224,.10), rgba(99,85,224,.03));
  border-color: rgba(99,85,224,.5);
}
[data-theme="light"] .cq-section-title { color: #5b4bdc; }
[data-theme="light"] .cq-section-head { border-bottom-color: rgba(99,85,224,.18); }

/* Reduced-motion neutralisation */
@media (prefers-reduced-motion: reduce) {
  .cq-mode-card { transition: none !important; }
  .cq-mode-card:hover { transform: none; }
  .cq-generate-btn { transition: none !important; }
  .cq-generate-btn:hover { transform: none; }
  .cq-generate-ico { animation: none !important; transform: none; filter: none; }
}

/* ── Exam section (v4.32) ── */
.exam-section { margin-bottom: 14px; }
.exam-section .hardcore-toggle { margin-top: 8px; }

/* Daily goal ring card */
.daily-goal-card { display: flex; align-items: center; gap: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 14px; position: relative; }
.dg-ring-wrap { position: relative; width: 72px; height: 72px; flex-shrink: 0; }
.dg-ring { transform: rotate(-90deg); }
.dg-ring-track { fill: none; stroke: var(--surface3); stroke-width: 6; }
.dg-ring-fill { fill: none; stroke: var(--accent); stroke-width: 6; stroke-linecap: round; transition: stroke-dashoffset .8s ease, stroke .4s; }
.dg-ring-center { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 800; color: var(--accent-light); }
.dg-info { flex: 1; min-width: 0; }
.dg-title { font-size: 10px; font-weight: 800; letter-spacing: .1em; color: var(--text-dim); text-transform: uppercase; margin-bottom: 4px; }
.dg-progress { font-size: 14px; color: var(--text); }
.dg-progress strong { color: var(--accent-light); font-size: 18px; font-weight: 900; }
.dg-msg { font-size: 11px; color: var(--text-mid); margin-top: 3px; }
.dg-edit-btn { background: transparent; border: 1px solid var(--border); color: var(--text-dim); border-radius: var(--radius-sm); padding: 6px 10px; font-size: 14px; cursor: pointer; transition: background .2s, border-color .2s, color .2s; flex-shrink: 0; }
.dg-edit-btn:hover { color: var(--accent-light); border-color: var(--accent); }

/* Readiness card — exam date row (setup page hero)
   v4.46.1: simplified — wrapper only, chip built by _buildExamDateChipHtml
   matches Analytics hero. Old .readiness-exam-lbl / .readiness-exam-countdown
   rules retired with the 3-element HTML row. */
.readiness-exam-row { display: flex; align-items: center; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.readiness-exam-row .ana-ready-datechip { width: 100%; justify-content: center; }

/* v4.73.0: Pass-rate prediction line — shows score with confidence interval
 * + pass probability. Sits under the score block, before the bar. */
.readiness-prediction {
  font-family: var(--font-mono, monospace);
  font-size: 13px;
  color: var(--accent);
  margin: 4px 0 10px;
  padding: 7px 12px;
  background: rgba(124,111,247,0.08);
  border-left: 3px solid var(--accent);
  border-radius: 4px;
  letter-spacing: 0.3px;
}
.readiness-prediction strong { color: var(--accent); font-weight: 700; }
.readiness-prediction .ci { color: var(--text-dim); font-size: 12px; }
.readiness-prediction .sep { color: var(--text-dim); margin: 0 4px; }
.readiness-prediction .prob { font-weight: 700; }
.readiness-prediction .prob.high { color: var(--green); }
.readiness-prediction .prob.med { color: var(--yellow); }
.readiness-prediction .prob.low { color: var(--red); }

/* v4.73.0: What-if attribution — top 3 high-leverage topics as clickable chips. */
.readiness-whatif {
  margin-top: 14px;
  padding: 12px 14px;
  background: var(--surface3);
  border-radius: 8px;
  border-left: 3px solid var(--accent);
}
.readiness-whatif-label {
  font-size: 10px;
  color: var(--text-dim);
  letter-spacing: 1.4px;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 8px;
}
.readiness-whatif-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.readiness-whatif-chip {
  padding: 7px 11px;
  background: rgba(124,111,247,0.10);
  border: 1px solid rgba(124,111,247,0.32);
  border-radius: 8px;
  font-size: 12px;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
  color: var(--text);
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.readiness-whatif-chip:hover {
  background: rgba(124,111,247,0.20);
  border-color: var(--accent);
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(124,111,247,0.18);
}
.readiness-whatif-chip .pts {
  color: var(--green);
  font-weight: 700;
  font-family: var(--font-mono, monospace);
  font-size: 12px;
}
.readiness-whatif-chip .topic { font-weight: 600; }
.readiness-whatif-chip .delta {
  color: var(--text-dim);
  font-size: 11px;
  font-family: var(--font-mono, monospace);
}

/* v4.73.0: Trajectory line — countdown to exam + points-to-pass gap. */
.readiness-trajectory {
  margin-top: 10px;
  padding: 7px 12px;
  font-size: 12px;
  font-family: var(--font-mono, monospace);
  color: var(--text-dim);
  border-radius: 4px;
}
.readiness-trajectory strong { color: var(--text); }
.readiness-trajectory .hint { color: var(--text-dim); font-size: 11px; }
.readiness-trajectory.warn {
  color: var(--orange);
  background: rgba(251,146,60,0.08);
  border-left: 3px solid var(--orange);
}
.readiness-trajectory.warn strong { color: var(--orange); }
.readiness-trajectory.mid {
  color: var(--yellow);
  background: rgba(251,191,36,0.08);
  border-left: 3px solid var(--yellow);
}
.readiness-trajectory.mid strong { color: var(--yellow); }
.readiness-trajectory.good {
  color: var(--green);
  background: rgba(34,197,94,0.08);
  border-left: 3px solid var(--green);
}
.readiness-trajectory.good strong { color: var(--green); }

/* Reduced-motion gate */
@media (prefers-reduced-motion: reduce) {
  .readiness-whatif-chip { transition: none !important; }
  .readiness-whatif-chip:hover { transform: none !important; }
}

/* ── ANALYTICS v2 (v4.5) ── */
/* ── Exam Readiness hero card (v4.46.0 polish) ──
 * Layout: header row (title + merged date-chip) → hero row (score + bar
 * with PASS tick) → divider → domain breakdown → divider → stats strip. */
.ana-ready-hero {
  border-color: rgba(var(--accent-rgb),.35);
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(var(--accent-rgb),.12), transparent 55%),
    linear-gradient(160deg, rgba(var(--accent-rgb),.08), rgba(var(--accent-rgb),.02));
  box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px -12px rgba(var(--accent-rgb),.25);
  padding: 22px 22px 18px;
}

/* Header: title + merged date chip */
.ana-ready-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; margin-bottom: 18px; flex-wrap: wrap; }
.ana-ready-head-left { min-width: 0; }
.ana-ready-title { margin: 0 0 2px; font-size: 13px; font-weight: 800; letter-spacing: .1em; color: var(--text); text-transform: uppercase; }
.ana-ready-head .ana-subtitle { margin-bottom: 0; }

/* Merged date-chip (replaces the old countdown pill + date-row) */
.ana-ready-datechip {
  position: relative; display: inline-flex; align-items: center; gap: 8px;
  background: var(--surface); border: 1px solid var(--border);
  color: var(--text); padding: 7px 12px; padding-right: 10px; border-radius: 999px;
  font-size: 12.5px; font-family: inherit; font-weight: 600; cursor: pointer;
  transition: background .15s, color .15s; box-shadow: 0 1px 2px rgba(0,0,0,.04);
  min-width: 0;
}
.ana-ready-datechip:hover { border-color: var(--accent); background: var(--surface2); transform: translateY(-1px); box-shadow: 0 2px 8px rgba(var(--accent-rgb),.15); }
.ana-ready-datechip:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.ana-ready-datechip-icon { font-size: 14px; line-height: 1; }
.ana-ready-datechip-date { color: var(--text); }
.ana-ready-datechip-sep { color: var(--text-dim); margin: 0 1px; }
.ana-ready-datechip-days { color: var(--text-mid); }
.ana-ready-datechip-days strong { color: var(--accent-light); font-weight: 800; }
.ana-ready-datechip-placeholder { color: var(--text-mid); font-weight: 500; }
.ana-ready-datechip-urgent { border-color: rgba(var(--red-rgb),.4); background: rgba(var(--red-rgb),.06); }
.ana-ready-datechip-urgent .ana-ready-datechip-days strong { color: var(--red); }
.ana-ready-datechip-soon { border-color: rgba(251,191,36,.4); background: rgba(251,191,36,.06); }
.ana-ready-datechip-soon .ana-ready-datechip-days strong { color: var(--yellow); }
.ana-ready-datechip-past { opacity: .75; }
.ana-ready-datechip input[type="date"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; border: none; padding: 0; font: inherit; color: transparent; background: transparent; width: 100%; height: 100%; }
.ana-ready-datechip input[type="date"]::-webkit-calendar-picker-indicator { position: absolute; inset: 0; width: 100%; height: 100%; cursor: pointer; opacity: 0; }
.ana-ready-datechip-clear {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; margin-left: 2px; border-radius: 50%;
  background: var(--surface2); color: var(--text-dim); font-size: 13px; line-height: 1;
  cursor: pointer; transition: background .15s, color .15s; z-index: 2; user-select: none;
}
.ana-ready-datechip-clear:hover { background: rgba(var(--red-rgb),.15); color: var(--red); }

/* Hero row: score block + readiness bar side-by-side on wide viewports,
   stacked on narrow. */
.ana-ready-hero-row { display: grid; grid-template-columns: auto 1fr; gap: 24px; align-items: center; margin-bottom: 20px; }
.ana-ready-score-block { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.ana-ready-num-wrap { display: flex; align-items: baseline; gap: 6px; }
.ana-ready-num { font-size: 56px; font-weight: 900; line-height: 1; letter-spacing: -.03em; }
.ana-ready-denom { font-size: 16px; font-weight: 600; color: var(--text-dim); letter-spacing: -.01em; }
.ana-ready-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 800; letter-spacing: .08em; padding: 5px 11px; border-radius: 999px; text-transform: uppercase; margin: 0; box-shadow: 0 1px 2px rgba(0,0,0,.04); }

/* Bar with PASS tick */
.ana-ready-bar-wrap { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ana-ready-bar { position: relative; width: 100%; height: 14px; background: var(--surface3); border-radius: 99px; overflow: visible; }
.ana-ready-bar-fill { height: 100%; border-radius: 99px; transition: width .8s cubic-bezier(0.2, 0.8, 0.2, 1); box-shadow: 0 0 0 1px rgba(255,255,255,.06) inset; }
.ana-ready-bar-passtick {
  position: absolute; top: -4px; width: 2px; height: 22px;
  background: var(--text-mid); border-radius: 1px; transform: translateX(-50%);
  opacity: .55;
}
.ana-ready-bar-passlabel {
  position: absolute; top: 18px; transform: translateX(-50%);
  font-size: 9px; font-weight: 800; letter-spacing: .08em;
  color: var(--text-mid); white-space: nowrap;
}
.ana-ready-bar-scale { display: flex; justify-content: space-between; margin-top: 20px; font-size: 10px; color: var(--text-dim); font-weight: 600; letter-spacing: .04em; }

/* Domain breakdown inside hero */
.ana-domain-breakdown { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--border); }
.ana-domain-header { font-size: 10px; font-weight: 800; letter-spacing: .12em; color: var(--text-dim); text-transform: uppercase; margin-bottom: 14px; }
.ana-domain-row { display: grid; grid-template-columns: minmax(140px, 1.3fr) 2fr auto; gap: 14px; align-items: center; padding: 8px 0; font-size: 12px; border-bottom: 1px solid rgba(var(--accent-rgb),.05); }
.ana-domain-row:last-child { border-bottom: none; }
.ana-domain-info { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ana-domain-dot { flex-shrink: 0; width: 10px; height: 10px; border-radius: 50%; box-shadow: 0 0 0 3px rgba(var(--accent-rgb),.08); }
.ana-domain-meta { min-width: 0; }
.ana-domain-name { color: var(--text); font-weight: 600; font-size: 13px; line-height: 1.2; }
.ana-domain-weight { color: var(--text-dim); font-size: 10.5px; margin-top: 2px; font-weight: 500; }
.ana-domain-bar { position: relative; height: 8px; background: var(--surface3); border-radius: 99px; overflow: visible; }
.ana-domain-fill { height: 100%; border-radius: 99px; transition: width .7s cubic-bezier(0.2, 0.8, 0.2, 1); box-shadow: 0 0 0 1px rgba(255,255,255,.04) inset; }
.ana-domain-target {
  position: absolute; top: -2px; left: 80%; width: 2px; height: 12px;
  background: rgba(var(--accent-rgb),.35); border-radius: 1px;
}
.ana-domain-pct { font-size: 14px; font-weight: 800; text-align: right; min-width: 36px; font-variant-numeric: tabular-nums; }

/* v4.46.0: narrow viewport — stack hero row and drop bar scale labels */
@media (max-width: 560px) {
  .ana-ready-hero { padding: 18px 16px 14px; }
  .ana-ready-hero-row { grid-template-columns: 1fr; gap: 14px; }
  .ana-ready-num { font-size: 44px; }
  .ana-ready-bar-scale { display: none; }
  .ana-ready-bar-passlabel { font-size: 8px; }
  .ana-domain-row { grid-template-columns: minmax(110px, 1fr) 1.5fr auto; gap: 10px; }
  .ana-domain-name { font-size: 12px; }
  .ana-hero-stat-val { font-size: 18px; }
}

/* ── Streak (v4.46.1 polish) ──
 * Left tile: heat-tier gradient (cold/starting/warm/hot/blazing) with flame
 * pulse when active. Right column: message + 7-day dot row + meta stats
 * with icons. Card-level subtle gradient to match hero-premium feel. */
.ana-streak-card {
  background:
    radial-gradient(140% 160% at 100% 0%, rgba(var(--accent-rgb),.07), transparent 45%),
    var(--surface);
}
.ana-streak-card-blazing { box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px -12px rgba(var(--red-rgb),.3); }
.ana-streak-card-hot { box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 8px 20px -12px rgba(251,146,60,.3); }

.ana-streak-grid { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: stretch; }

/* Left tile — heat-tiered gradient + optional flame pulse */
.ana-streak-big {
  padding: 18px 22px; border-radius: var(--radius-sm); text-align: center;
  min-width: 118px; display: flex; flex-direction: column; align-items: center;
  justify-content: center; position: relative; overflow: hidden;
}
.ana-streak-big-cold { background: var(--surface2); }
.ana-streak-big-starting {
  background: linear-gradient(160deg, rgba(var(--accent-rgb),.18), rgba(var(--accent-rgb),.05));
  border: 1px solid rgba(var(--accent-rgb),.2);
}
.ana-streak-big-warm {
  background: linear-gradient(160deg, rgba(251,191,36,.20), rgba(251,191,36,.05));
  border: 1px solid rgba(251,191,36,.25);
}
.ana-streak-big-hot {
  background: linear-gradient(160deg, rgba(251,146,60,.25), rgba(251,146,60,.06));
  border: 1px solid rgba(251,146,60,.3);
}
.ana-streak-big-blazing {
  background:
    radial-gradient(80% 100% at 50% 0%, rgba(var(--red-rgb),.28), transparent 70%),
    linear-gradient(160deg, rgba(var(--red-rgb),.22), rgba(251,146,60,.08));
  border: 1px solid rgba(var(--red-rgb),.35);
}

/* Flame — gentle breathing pulse when active */
@keyframes streakFlamePulse {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(251,146,60,.4)); }
  50%      { transform: scale(1.1); filter: drop-shadow(0 0 8px rgba(251,146,60,.55)); }
}
.ana-streak-flame { font-size: 30px; margin-bottom: 4px; line-height: 1; transform-origin: center bottom; }
.ana-streak-big-warm .ana-streak-flame,
.ana-streak-big-hot .ana-streak-flame,
.ana-streak-big-blazing .ana-streak-flame { animation: streakFlamePulse 2.4s ease-in-out infinite; }
.ana-streak-big-blazing .ana-streak-flame { animation-duration: 1.6s; }

/* Streak number — color follows heat tier */
.ana-streak-num { font-size: 40px; font-weight: 900; line-height: 1; letter-spacing: -.03em; color: var(--text); font-variant-numeric: tabular-nums; }
.ana-streak-big-starting .ana-streak-num { color: var(--accent-light); }
.ana-streak-big-warm .ana-streak-num { color: var(--yellow); }
.ana-streak-big-hot .ana-streak-num { color: var(--orange); }
.ana-streak-big-blazing .ana-streak-num { color: var(--red); text-shadow: 0 0 12px rgba(var(--red-rgb),.3); }
.ana-streak-big-cold .ana-streak-num { color: var(--text-dim); }
.ana-streak-lbl { font-size: 9.5px; font-weight: 700; color: var(--text-dim); text-transform: uppercase; letter-spacing: .08em; margin-top: 6px; }

/* Right column */
.ana-streak-info { display: flex; flex-direction: column; gap: 10px; justify-content: center; }
.ana-streak-msg { font-size: 15px; color: var(--text); font-weight: 700; letter-spacing: -.01em; }

/* 7-day dot row */
.ana-streak-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; padding: 2px 0; }
.ana-streak-day { display: flex; flex-direction: column; align-items: center; gap: 4px; position: relative; }
.ana-streak-day-lbl { font-size: 9px; font-weight: 600; color: var(--text-dim); text-transform: uppercase; letter-spacing: .04em; }
.ana-streak-day-dot {
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--surface3);
  border: 1.5px solid var(--surface3);
  transition: background .2s, border-color .2s;
}
.ana-streak-day-on .ana-streak-day-dot {
  background: var(--accent-light);
  border-color: var(--accent-light);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb),.15);
}
.ana-streak-day-today .ana-streak-day-dot {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.ana-streak-day-today .ana-streak-day-lbl { color: var(--accent-light); font-weight: 800; }

/* Meta row (longest + last-study) */
.ana-streak-meta { display: flex; flex-direction: column; gap: 4px; margin-top: 2px; }
.ana-streak-stat { font-size: 12px; color: var(--text-mid); display: inline-flex; align-items: center; gap: 6px; }
.ana-streak-stat-ico { font-size: 12px; opacity: .85; }
.ana-streak-stat strong { color: var(--accent-light); font-weight: 800; font-variant-numeric: tabular-nums; }
.ana-streak-last { color: var(--text-dim); font-size: 11px; }
.ana-streak-card-blazing .ana-streak-stat strong { color: var(--red); }
.ana-streak-card-hot .ana-streak-stat strong { color: var(--orange); }

/* Weak spots */
.ana-weak-list { display: flex; flex-direction: column; gap: 8px; }
.ana-weak-row { display: grid; grid-template-columns: 110px 1fr 36px; gap: 10px; align-items: center; font-size: 12px; }
.ana-weak-kw { color: var(--text); font-weight: 700; text-transform: uppercase; font-size: 11px; letter-spacing: .04em; }
.ana-weak-bar { height: 8px; background: var(--surface3); border-radius: 99px; overflow: hidden; }
.ana-weak-fill { height: 100%; background: var(--red); border-radius: 99px; transition: width .5s; }
.ana-weak-count { font-size: 12px; font-weight: 800; color: var(--red); text-align: right; }

/* Heatmap */
/* v4.45.0 — Domain Mastery card (replaces the old .ana-heatmap cluster).
   Full-width above the 2-col grid. Each row is a domain with a progress
   bar toward the 80% mastery target, a tier badge, and a one-click drill
   button. Left-border accent per domain gives an at-a-glance signal. */
.ana-card-dm { grid-column: 1 / -1; }
.dm-list { display: flex; flex-direction: column; gap: 14px; }
.dm-row { padding: 14px 16px; border-radius: 10px; background: var(--surface2); border: 1px solid var(--border); border-left: 4px solid var(--dm-accent, var(--accent)); display: flex; flex-direction: column; gap: 10px; }
.dm-row-unstudied { opacity: 0.72; }
.dm-row-head { display: flex; align-items: flex-start; gap: 12px; justify-content: space-between; }
.dm-row-label { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dm-row-name { font-size: 13px; font-weight: 700; color: var(--text); }
.dm-row-weight { font-size: 10px; font-weight: 600; color: var(--text-dim); letter-spacing: .04em; text-transform: uppercase; }
.dm-row-badge { font-size: 10px; font-weight: 800; padding: 4px 10px; border-radius: 99px; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }
.dm-badge-novice      { background: rgba(239, 68, 68, 0.15);  color: #ef4444; }
.dm-badge-developing  { background: rgba(245, 158, 11, 0.15); color: #f59e0b; }
.dm-badge-proficient  { background: rgba(59, 130, 246, 0.15); color: #3b82f6; }
.dm-badge-mastered    { background: rgba(34, 197, 94, 0.15);  color: #22c55e; }
.dm-badge-unstudied   { background: var(--surface3); color: var(--text-dim); }
.dm-bar-wrap { display: flex; align-items: center; gap: 12px; }
.dm-bar-track { flex: 1; height: 10px; background: var(--surface3); border-radius: 99px; position: relative; overflow: hidden; }
.dm-bar-fill { height: 100%; background: linear-gradient(90deg, var(--dm-accent, var(--accent)), var(--accent-light)); border-radius: 99px; transition: width 800ms cubic-bezier(0.2, 0.8, 0.2, 1); }
.dm-bar-target { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--text); opacity: .55; border-radius: 1px; transform: translateX(-50%); pointer-events: none; }
.dm-bar-pct { font-size: 14px; font-weight: 800; color: var(--text); min-width: 44px; text-align: right; font-variant-numeric: tabular-nums; }
.dm-bar-pct-empty { color: var(--text-dim); font-weight: 600; }
.dm-row-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.dm-row-stats { font-size: 11px; color: var(--text-dim); }
.dm-drill-btn { background: transparent; border: 1px solid var(--dm-accent, var(--accent)); color: var(--dm-accent, var(--accent)); font-size: 11px; font-weight: 700; padding: 5px 12px; border-radius: 99px; cursor: pointer; transition: background 150ms, transform 150ms, color 150ms; white-space: nowrap; }
.dm-drill-btn:hover { background: var(--dm-accent, var(--accent)); color: white; transform: translateX(2px); }
.dm-footer { margin-top: 10px; font-size: 10px; color: var(--text-dim); text-align: center; letter-spacing: .04em; }

/* Type breakdown */
/* v4.45.2 — horizontal layout per user feedback. Auto-fit 2 columns on
   wide viewports, drops to 1 column under ~560px. Previous flex-column
   stacked everything vertically which wasted horizontal space. */
.wp-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; align-items: start; }
.wp-pattern { padding: 14px; border-radius: 10px; background: var(--surface2); border: 1px solid var(--border); border-left: 4px solid var(--wp-accent, var(--accent)); display: flex; flex-direction: column; gap: 8px; }
.wp-pattern-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.wp-pattern-rank { width: 22px; height: 22px; border-radius: 50%; background: var(--wp-accent, var(--accent)); color: white; font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.wp-pattern-icon { font-size: 16px; line-height: 1; }
.wp-pattern-title { font-size: 11px; font-weight: 800; color: var(--text); letter-spacing: .04em; flex: 1; min-width: 0; }
.wp-pattern-count { font-size: 11px; font-weight: 700; color: var(--wp-accent, var(--accent)); white-space: nowrap; font-variant-numeric: tabular-nums; }
.wp-pattern-desc { font-size: 12px; color: var(--text-mid); line-height: 1.55; }
.wp-drill-btn { align-self: flex-start; background: transparent; border: 1px solid var(--wp-accent, var(--accent)); color: var(--wp-accent, var(--accent)); font-size: 11px; font-weight: 700; padding: 5px 12px; border-radius: 99px; cursor: pointer; transition: background 150ms, color 150ms; }
.wp-drill-btn:hover { background: var(--wp-accent, var(--accent)); color: white; }
.wp-empty { text-align: center; padding: 24px 12px; color: var(--text-dim); }
.wp-empty-icon { font-size: 32px; margin-bottom: 8px; }
.wp-empty-title { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.wp-empty-body { font-size: 12px; line-height: 1.55; max-width: 400px; margin: 0 auto; }
[data-theme="light"] .dm-row,
[data-theme="light"] .wp-pattern { background: #ffffff; }

/* Mode compare */
.ana-mode-compare { display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: center; padding: 8px 0; }
.ana-mode-item { text-align: center; background: var(--surface2); padding: 14px 10px; border-radius: var(--radius-sm); }
.ana-mode-val { font-size: 28px; font-weight: 900; line-height: 1; }
.ana-mode-lbl { font-size: 11px; color: var(--text-mid); text-transform: uppercase; letter-spacing: .05em; margin-top: 4px; font-weight: 700; }
.ana-mode-n { font-size: 10px; color: var(--text-dim); margin-top: 2px; }
.ana-mode-divider { font-size: 12px; color: var(--text-dim); font-weight: 700; text-transform: uppercase; }
.ana-mode-insight { font-size: 12px; margin-top: 12px; padding: 10px; background: var(--surface2); border-radius: var(--radius-sm); line-height: 1.5; text-align: center; }

/* Drill grid */
.ana-drills-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 600px) { .ana-drills-grid { grid-template-columns: 1fr 1fr; } }
.ana-drill-card { background: var(--surface2); border-radius: var(--radius-sm); padding: 14px; }
.ana-drill-title { font-size: 13px; font-weight: 800; color: var(--text); margin-bottom: 10px; }
.ana-drill-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ana-drill-stat { background: var(--surface3); border-radius: 4px; padding: 8px; text-align: center; }
.ana-drill-val { font-size: 18px; font-weight: 900; color: var(--accent-light); line-height: 1; }
.ana-drill-lbl { font-size: 9px; color: var(--text-dim); text-transform: uppercase; letter-spacing: .05em; margin-top: 3px; }

/* Milestones */
.ana-milestones { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
@media (min-width: 600px) { .ana-milestones { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .ana-milestones { grid-template-columns: repeat(4, 1fr); } }

/* v4.45.2 — Milestones card rework. Header strip + recently-unlocked row
   + collapsible full grid. Dramatically cuts default card height while
   keeping all 49 milestones discoverable via the expand. */
.ana-card-ms { grid-column: 1 / -1; }
.ana-ms-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.ana-ms-head h3 { margin: 0; }
.ana-ms-progress { display: flex; align-items: center; gap: 10px; min-width: 240px; flex: 1; max-width: 400px; }
.ana-ms-count { font-size: 18px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }
.ana-ms-total { font-weight: 600; color: var(--text-dim); font-size: 14px; }
.ana-ms-bar-track { flex: 1; height: 8px; background: var(--surface3); border-radius: 99px; overflow: hidden; }
.ana-ms-bar-fill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-light)); border-radius: 99px; transition: width 800ms cubic-bezier(0.2, 0.8, 0.2, 1); }
.ana-ms-pct { font-size: 12px; font-weight: 700; color: var(--text-mid); font-variant-numeric: tabular-nums; min-width: 38px; text-align: right; }
.ana-ms-section-title { font-size: 10px; font-weight: 800; letter-spacing: .06em; color: var(--text-dim); text-transform: uppercase; margin: 14px 0 8px; }
.ana-ms-recent { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; margin-bottom: 4px; }
.ana-ms-empty { padding: 20px 12px; text-align: center; font-size: 13px; color: var(--text-dim); font-style: italic; background: var(--surface2); border-radius: 8px; margin-bottom: 12px; }
.ana-ms-details { margin-top: 14px; border-top: 1px solid var(--border); padding-top: 12px; }
.ana-ms-details-summary { cursor: pointer; font-size: 12px; font-weight: 700; color: var(--text-mid); padding: 6px 0; user-select: none; list-style: none; display: flex; align-items: center; gap: 8px; transition: color 150ms; }
.ana-ms-details-summary::-webkit-details-marker { display: none; }
.ana-ms-details-summary::before { content: '\25B6'; font-size: 9px; display: inline-block; transition: transform 200ms; }
.ana-ms-details[open] > .ana-ms-details-summary::before { transform: rotate(90deg); }
.ana-ms-details-summary:hover { color: var(--text); }
.ana-ms-full-grid { margin-top: 12px; }
.ana-milestone { background: var(--surface2); border-radius: var(--radius-sm); padding: 12px 10px; text-align: center; border: 1px solid var(--border); transition: transform .2s, border-color .2s; }
.ana-milestone-on { border-color: rgba(var(--green-rgb),.4); background: rgba(var(--green-rgb),.05); }
.ana-milestone-on:hover { transform: translateY(-2px); border-color: var(--green); }
.ana-milestone-off { opacity: .45; }
.ana-milestone-icon { font-size: 24px; margin-bottom: 4px; filter: grayscale(0); }
.ana-milestone-off .ana-milestone-icon { filter: grayscale(1); }
.ana-milestone-label { font-size: 11px; font-weight: 800; color: var(--text); margin-bottom: 2px; }
.ana-milestone-desc { font-size: 10px; color: var(--text-dim); line-height: 1.3; }

/* ── Analytics nav + grid (v4.32) ── */
.ana-nav { display: flex; gap: 6px; margin-bottom: 14px; overflow-x: auto; padding: 2px 0; position: sticky; top: 0; z-index: 10; background: var(--bg); border-bottom: 1px solid var(--border); padding-bottom: 10px; }
.ana-nav-pill { background: var(--surface); border: 1px solid var(--border); color: var(--text-mid); font-size: 11px; font-weight: 700; padding: 6px 14px; border-radius: 99px; cursor: pointer; white-space: nowrap; transition: background .15s, color .15s, border-color .15s; font-family: inherit; }
.ana-nav-pill:hover { background: rgba(var(--accent-rgb), .1); border-color: var(--accent); color: var(--accent-light); }
.ana-grid-2col { display: grid; grid-template-columns: 1fr; gap: 14px; margin-bottom: 14px; }
@media (min-width: 700px) { .ana-grid-2col { grid-template-columns: 1fr 1fr; } }
.ana-grid-2col .ana-card { margin-bottom: 0; }
/* v4.46.0: stats strip — icons above numbers, hairline dividers between tiles */
.ana-hero-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--border); }
.ana-hero-stat { text-align: center; padding: 6px 10px; position: relative; }
.ana-hero-stat + .ana-hero-stat::before {
  content: ''; position: absolute; left: 0; top: 20%; bottom: 20%; width: 1px;
  background: var(--border);
}
.ana-hero-stat-icon { font-size: 15px; line-height: 1; margin-bottom: 6px; opacity: .85; filter: grayscale(.15); }
.ana-hero-stat-val { font-size: 22px; font-weight: 900; color: var(--accent-light); line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ana-hero-stat-lbl { font-size: 9.5px; color: var(--text-dim); text-transform: uppercase; letter-spacing: .08em; margin-top: 6px; font-weight: 600; }
.ana-topic-alert { background: rgba(var(--yellow-rgb), .06); border: 1px solid rgba(var(--yellow-rgb), .25); border-radius: var(--radius-sm); padding: 12px; margin-bottom: 14px; }
.ana-topic-alert-head { font-size: 11px; font-weight: 800; color: var(--yellow); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 8px; }
.ana-topic-row-weak { background: rgba(var(--yellow-rgb), .04); border-radius: var(--radius-sm); padding: 6px 8px; margin: 0 -8px; }

/* ── CONFETTI CANVAS ── */
#confetti-canvas { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 9998; }

/* ── Hardcore exam mode (#48) ── */
.hardcore-toggle {
  display: flex; align-items: center; gap: 10px;
  margin-top: 10px; padding: 12px 14px;
  border: 1.5px solid rgba(239,68,68,.35);
  background: rgba(239,68,68,.06);
  border-radius: var(--radius-sm);
  cursor: pointer; user-select: none;
  font-size: 13px; font-weight: 700; color: var(--text);
  transition: background .15s, border-color .15s, color .15s;
}
.hardcore-toggle:hover { border-color: rgba(239,68,68,.55); background: rgba(239,68,68,.10); }
.hardcore-toggle input[type="checkbox"] { width: 18px; height: 18px; accent-color: #ef4444; cursor: pointer; }
.hardcore-sub { font-weight: 500; color: var(--text-dim); font-size: 11px; }
.hardcore-badge {
  display: inline-block; margin-left: 8px; padding: 4px 10px;
  font-size: 11px; font-weight: 800; letter-spacing: .08em;
  background: #ef4444; color: #fff; border-radius: 99px;
  vertical-align: middle;
}
/* Hide flag + navigator entirely when exam page is in hardcore mode */
#page-exam.hardcore-active #exam-flag-btn,
#page-exam.hardcore-active #qnav-toggle,
#page-exam.hardcore-active #qnav-grid { display: none !important; }
#page-exam.hardcore-active #exam-prev-btn { visibility: hidden; }

/* ══════════════════════════════════════════
   TRY IT IN TERMINAL + GUIDED LAB (v4.16 / #68, #69)
   ══════════════════════════════════════════ */

/* Reusable terminal-card component */
.terminal-card {
  background: #0b1020;
  border: 1px solid #1f2a44;
  border-radius: 10px;
  padding: 10px 12px;
  margin: 8px 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  color: #e6edf3;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 1px 2px rgba(0,0,0,.2);
}
.terminal-card-head {
  display: flex; align-items: center; gap: 8px;
  min-width: 0;
}
.terminal-card-prompt {
  color: #7ee787;
  font-weight: 800;
  flex-shrink: 0;
  user-select: none;
}
.terminal-card-cmd {
  flex: 1;
  min-width: 0;
  color: #e6edf3;
  font-size: 12.5px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  background: transparent;
}
.terminal-card-copy {
  flex-shrink: 0;
  background: transparent;
  border: 1px solid #2a3758;
  color: #9aa4b9;
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 13px;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.terminal-card-copy:hover { background: #1a2340; color: #e6edf3; border-color: #3a4a75; }
.terminal-card-copy:active { transform: scale(.94); }
.terminal-card-copy.terminal-card-copied { background: #1a4d2e; border-color: #2ea043; color: #7ee787; }
.terminal-card-note {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed #1f2a44;
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: 11.5px;
  color: #9aa4b9;
  line-height: 1.5;
}

/* Topic Deep Dive — terminal section */
.td-terminal { background: linear-gradient(135deg, rgba(56,139,253,.05), rgba(56,139,253,.01)); border-color: rgba(56,139,253,.18); }
.td-terminal-intro { font-size: 12px !important; color: var(--text-dim) !important; margin-bottom: 8px !important; }
.td-terminal-list { display: flex; flex-direction: column; gap: 4px; }

/* Topic Deep Dive — guided lab callout */
.td-lab-callout { background: linear-gradient(135deg, rgba(168,85,247,.06), rgba(168,85,247,.01)); border-color: rgba(168,85,247,.25); }
.td-lab-callout p { margin-bottom: 10px; }
.td-lab-btn { font-size: 13px; padding: 10px 18px; }

/* Port Reference card — stack vertically when command is present */
.port-ref-card-has-cmd { flex-direction: column !important; align-items: stretch !important; gap: 8px; }
.port-ref-card-top { display: flex; align-items: center; gap: 10px; }
.port-ref-cmd {
  display: flex; align-items: center; gap: 6px;
  background: #0b1020;
  border: 1px solid #1f2a44;
  border-radius: 6px;
  padding: 5px 7px;
  min-width: 0;
}
.port-ref-cmd-text {
  flex: 1;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 10.5px;
  color: #e6edf3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: transparent;
}
.port-ref-cmd-copy {
  flex-shrink: 0;
  background: transparent;
  border: 1px solid #2a3758;
  color: #9aa4b9;
  border-radius: 4px;
  padding: 2px 5px;
  font-size: 11px;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.port-ref-cmd-copy:hover { background: #1a2340; color: #e6edf3; }
.port-ref-cmd-copy:active { transform: scale(.9); }

/* Guided Lab page */
#page-guided-lab { max-width: 820px; margin: 0 auto; padding-bottom: 60px; }
.lab-meta {
  display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px;
}
.lab-meta-pill {
  font-size: 11px; font-weight: 700; letter-spacing: .04em;
  background: var(--surface); border: 1px solid var(--border);
  color: var(--text-mid);
  padding: 5px 11px; border-radius: 99px; text-transform: uppercase;
}
.lab-intro {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: 16px 20px;
  margin-bottom: 20px;
  font-size: 14px;
  color: var(--text-mid);
  line-height: 1.65;
}
.lab-steps { display: flex; flex-direction: column; gap: 16px; margin-bottom: 24px; }
.lab-step {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
  transition: border-color .2s;
}
.lab-step:hover { border-color: var(--accent-dim); }
.lab-step-head {
  display: flex; align-items: baseline; gap: 8px; margin-bottom: 10px;
}
.lab-step-num {
  font-size: 11px; font-weight: 800; letter-spacing: .06em;
  color: var(--accent-light); text-transform: uppercase;
}
.lab-step-count {
  font-size: 11px; color: var(--text-dim);
}
.lab-step-narration {
  font-size: 14px; line-height: 1.7; color: var(--text);
  margin-bottom: 10px;
}
.lab-step-expect {
  margin-top: 8px;
  padding: 10px 12px;
  background: rgba(34,197,94,.06);
  border-left: 2px solid rgba(34,197,94,.4);
  border-radius: 6px;
  font-size: 12.5px;
  color: var(--text-mid);
  line-height: 1.6;
}
.lab-step-expect strong { color: var(--text); font-weight: 700; }
.lab-wrap {
  background: linear-gradient(135deg, rgba(34,197,94,.1), rgba(34,197,94,.02));
  border: 1px solid rgba(34,197,94,.3);
  border-radius: var(--radius);
  padding: 18px 22px;
  font-size: 14px;
  color: var(--text);
  line-height: 1.7;
  font-weight: 600;
}

@media (max-width: 520px) {
  .lab-step { padding: 14px 16px; }
  .lab-intro { padding: 14px 16px; }
  .lab-step-narration { font-size: 13px; }
  .terminal-card-cmd { font-size: 11.5px; }
}

/* ── Port Drill: Try It In Terminal dedicated panel (v4.16.1) ── */
.port-terminal-intro {
  font-size: 12px; color: var(--text-dim);
  padding: 2px 18px 10px; margin: 0; line-height: 1.55;
}
.port-terminal-list {
  padding: 0 18px 14px;
  max-height: 480px; overflow-y: auto;
}
.port-term-group { margin-bottom: 16px; }
.port-term-group-head {
  font-size: 11px; font-weight: 800; color: var(--text-dim);
  text-transform: uppercase; letter-spacing: .08em;
  margin-bottom: 8px;
  display: flex; align-items: center; gap: 8px;
}
.port-term-group-count {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; padding: 1px 7px;
  font-size: 10px; color: var(--text-dim); letter-spacing: 0;
}
.port-term-row {
  margin-bottom: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
}
.port-term-row:hover { border-color: var(--accent-dim); }
.port-term-head {
  display: flex; align-items: baseline; gap: 10px;
  margin-bottom: 6px;
}
.port-term-num {
  font-family: monospace; font-size: 16px; font-weight: 800;
  color: var(--accent-light); min-width: 42px;
}
.port-term-proto {
  font-size: 13px; font-weight: 700; color: var(--text);
  flex: 1; min-width: 0;
}
.port-term-tp {
  font-size: 10px; font-family: monospace; color: var(--text-dim);
}
.port-term-row .terminal-card { margin: 4px 0 0; }

/* ── Port Drill: Guided Terminal Labs dedicated panel (v4.16.1) ── */
.port-labs-list {
  padding: 0 18px 14px;
  display: flex; flex-direction: column; gap: 12px;
}
.port-lab-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: 16px 18px;
  transition: border-color .2s, transform .15s;
}
.port-lab-card:hover { border-color: var(--accent-dim); }
.port-lab-title {
  font-size: 15px; font-weight: 800; color: var(--text);
  margin-bottom: 10px;
}
.port-lab-card .lab-meta-pill {
  font-size: 10px; padding: 4px 9px;
}
.port-lab-meta {
  display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px;
}
.port-lab-intro {
  font-size: 13px; line-height: 1.65; color: var(--text-mid);
  margin-bottom: 14px;
}
.port-lab-start {
  width: 100%; padding: 12px 16px; font-size: 14px; font-weight: 700;
}
@media (max-width: 520px) {
  .port-terminal-list { max-height: 380px; }
  .port-term-row { padding: 8px 10px; }
  .port-lab-card { padding: 14px 16px; }
}

/* ══════════════════════════════════════════
   AMBIENT PACKETS
══════════════════════════════════════════ */
.tb-ambient-dot { pointer-events: none; will-change: transform, opacity, cx, cy; }

/* ══════════════════════════════════════════
   FIX THIS NETWORK
══════════════════════════════════════════ */
.tb-tool-btn-fix { background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important; color: #fff !important; border: none !important; font-weight: 700; }
.tb-tool-btn-fix:hover { filter: brightness(1.12); }

/* Fix Picker */
.tb-fix-tabs { display: flex; gap: 6px; margin-bottom: 16px; }
.tb-fix-tab { padding: 6px 18px; border-radius: 20px; border: 1.5px solid var(--border); background: var(--surface); color: var(--text-mid); font-weight: 700; font-size: 13px; cursor: pointer; transition: border-color .15s, background .15s, color .15s; }
.tb-fix-tab:hover { border-color: var(--accent); }
.tb-fix-tab-active { background: var(--accent); color: #fff; border-color: var(--accent); }
.tb-fix-card { background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--radius-sm); padding: 16px; margin-bottom: 12px; transition: border-color .15s; }
.tb-fix-card:hover { border-color: var(--accent); }
.tb-fix-card-done { border-left: 4px solid #22c55e; }
.tb-fix-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.tb-fix-card-meta { font-size: 12px; color: var(--text-dim); margin-bottom: 8px; }
.tb-fix-card-desc { font-size: 13px; color: var(--text-mid); margin-bottom: 12px; line-height: 1.5; }
.tb-fix-diff { font-size: 11px; font-weight: 800; padding: 2px 10px; border-radius: 12px; text-transform: uppercase; letter-spacing: .04em; }
.tb-fix-diff-easy { background: rgba(34,197,94,.15); color: #22c55e; }
.tb-fix-diff-medium { background: rgba(245,158,11,.15); color: #f59e0b; }
.tb-fix-diff-hard { background: rgba(239,68,68,.15); color: #ef4444; }
.tb-fix-best { font-size: 11px; font-weight: 700; color: #22c55e; margin-left: 8px; }
.tb-fix-start-btn { width: 100%; background: linear-gradient(135deg, #ef4444, #dc2626); color: #fff; border: none; font-weight: 700; padding: 10px; border-radius: var(--radius-sm); cursor: pointer; font-size: 13px; transition: filter .15s; }
.tb-fix-start-btn:hover { filter: brightness(1.1); }

/* Fix HUD Panel */
.tb-fix-panel { position: absolute; top: 50px; right: 0; width: 340px; background: var(--surface); border-left: 2px solid #ef4444; border-bottom: 2px solid #ef4444; border-radius: 0 0 0 var(--radius-sm); z-index: 50; box-shadow: -4px 4px 20px rgba(0,0,0,.3); max-height: calc(100vh - 120px); overflow-y: auto; }
.tb-fix-panel-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: linear-gradient(135deg, #ef4444, #dc2626); color: #fff; font-weight: 700; font-size: 14px; }
.tb-fix-timer { margin-left: auto; font-family: monospace; font-size: 16px; font-weight: 800; background: rgba(0,0,0,.25); padding: 2px 10px; border-radius: 8px; }
.tb-fix-body { padding: 14px; }
.tb-fix-symptom { background: rgba(239,68,68,.08); border: 1px solid rgba(239,68,68,.2); border-radius: var(--radius-sm); padding: 12px; margin-bottom: 14px; font-size: 13px; line-height: 1.6; color: var(--text); }
.tb-fix-progress-wrap { margin-bottom: 14px; }
.tb-fix-progress-bar { height: 8px; background: var(--surface2); border-radius: 4px; overflow: hidden; margin-bottom: 4px; }
.tb-fix-progress-fill { height: 100%; background: linear-gradient(90deg, #22c55e, #16a34a); border-radius: 4px; transition: width .4s ease; }
.tb-fix-progress-text { font-size: 11px; color: var(--text-dim); font-weight: 700; }
.tb-fix-fault-row { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; margin-bottom: 8px; }
.tb-fix-fault-row-fixed { border-left: 3px solid #22c55e; opacity: .7; }
.tb-fix-fault-label { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 13px; color: var(--text); margin-bottom: 4px; }
.tb-fix-fault-domain { font-size: 10px; color: var(--text-dim); font-weight: 600; }
.tb-fix-hint-area { margin-top: 6px; }
.tb-fix-hint-btn { font-size: 11px; padding: 4px 12px; border-radius: 12px; border: 1px solid #f59e0b; background: rgba(245,158,11,.1); color: #f59e0b; cursor: pointer; font-weight: 700; transition: border-color .15s, background .15s, color .15s; }
.tb-fix-hint-btn:hover { background: rgba(245,158,11,.2); }
.tb-fix-hint-text { font-size: 12px; color: var(--text-mid); margin-top: 4px; padding: 6px 10px; background: rgba(245,158,11,.06); border-radius: 6px; line-height: 1.5; }
.tb-fix-tools { font-size: 12px; color: var(--text-dim); padding: 10px 12px; background: var(--surface2); border-radius: var(--radius-sm); margin-top: 8px; line-height: 1.6; }

/* Fix Toast */
.tb-fix-toast { position: fixed; bottom: -80px; left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, #22c55e, #16a34a); color: #fff; padding: 12px 24px; border-radius: 12px; font-weight: 700; font-size: 14px; z-index: 9999; display: flex; align-items: center; gap: 10px; box-shadow: 0 8px 32px rgba(34,197,94,.4); transition: bottom .4s cubic-bezier(.34,1.56,.64,1); }
.tb-fix-toast-show { bottom: 32px; }
.tb-fix-toast-icon { font-size: 20px; }
.tb-fix-toast-obj { font-size: 11px; background: rgba(255,255,255,.2); padding: 2px 8px; border-radius: 8px; }

/* Fix Complete Modal */
.tb-fix-complete-hero { text-align: center; margin-bottom: 20px; }
.tb-fix-complete-grade { width: 72px; height: 72px; border-radius: 50%; border: 4px solid; display: flex; align-items: center; justify-content: center; font-size: 32px; font-weight: 900; margin: 0 auto 12px; }
.tb-fix-complete-score { font-size: 20px; font-weight: 800; color: var(--text); margin-bottom: 4px; }
.tb-fix-complete-title { font-size: 14px; color: var(--text-mid); }
.tb-fix-complete-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 20px; }
.tb-fix-complete-stat { text-align: center; padding: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.tb-fix-complete-val { font-size: 18px; font-weight: 800; color: var(--text); display: block; }
.tb-fix-complete-label { font-size: 10px; font-weight: 700; color: var(--text-dim); text-transform: uppercase; letter-spacing: .06em; margin-top: 2px; }
.tb-fix-complete-faults { margin-bottom: 16px; }
.tb-fix-complete-fault { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--border); font-size: 13px; color: var(--text-mid); }
.tb-fix-complete-fault:last-child { border-bottom: none; }
.tb-fix-complete-objs { text-align: center; margin-bottom: 16px; font-size: 12px; color: var(--text-dim); }
.tb-fix-obj-badge { display: inline-block; background: rgba(124,111,247,.15); color: var(--accent); padding: 2px 8px; border-radius: 8px; font-weight: 700; font-size: 11px; margin: 0 2px; }
.tb-fix-complete-actions { display: flex; gap: 10px; justify-content: center; }

/* Cable health animation colors */
.tb-cable-blocked { stroke: #ef4444 !important; stroke-dasharray: 8 4; animation: tbCableBlocked 1s infinite; }
@keyframes tbCableBlocked { 0%,100% { opacity:.7; } 50% { opacity:.4; } }

/* Give Up & Reveal */
.tb-fix-giveup-btn { width: 100%; margin-top: 12px; padding: 12px; border: 2px dashed #f59e0b; background: rgba(245,158,11,.08); color: #f59e0b; font-weight: 800; font-size: 14px; border-radius: var(--radius-sm); cursor: pointer; transition: background .2s, border-color .2s; }
.tb-fix-giveup-btn:hover { background: rgba(245,158,11,.18); border-color: #d97706; }

/* Reveal Modal */
.tb-fix-reveal-hero { text-align: center; margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--border); }
.tb-fix-reveal-icon { font-size: 48px; margin-bottom: 8px; }
.tb-fix-reveal-title { font-size: 18px; font-weight: 800; color: var(--text); margin-bottom: 4px; }
.tb-fix-reveal-subtitle { font-size: 13px; color: var(--text-dim); }
.tb-fix-reveal-list { display: flex; flex-direction: column; gap: 14px; margin-bottom: 20px; }
.tb-fix-reveal-fault { background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--radius-sm); padding: 14px; border-left: 4px solid var(--accent); }
.tb-fix-reveal-fault-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.tb-fix-reveal-num { width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; flex-shrink: 0; }
.tb-fix-reveal-label { font-weight: 700; font-size: 14px; color: var(--text); flex: 1; }
.tb-fix-reveal-device { font-size: 12px; color: var(--text-mid); margin-bottom: 6px; font-weight: 600; }
.tb-fix-reveal-diagnosis { font-size: 13px; color: #ef4444; margin-bottom: 8px; padding: 8px 10px; background: rgba(239,68,68,.06); border-radius: 6px; line-height: 1.5; }
.tb-fix-reveal-fixes { margin-bottom: 6px; }
.tb-fix-reveal-fix { font-size: 13px; color: #22c55e; padding: 4px 0; line-height: 1.5; font-family: monospace; }
.tb-fix-reveal-hints { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--border); }
.tb-fix-reveal-tip { background: rgba(124,111,247,.08); border: 1px solid rgba(124,111,247,.2); border-radius: var(--radius-sm); padding: 12px; font-size: 13px; color: var(--text-mid); line-height: 1.6; margin-bottom: 16px; }

/* ══════════════════════════════════════════
   LIGHT MODE — comprehensive overrides
══════════════════════════════════════════ */

/* ── Buttons ── */
[data-theme="light"] .end-exam-btn:hover { background: #fef2f2; color: var(--red); }

/* ── Terminal cards (keep dark terminal aesthetic but soften) ── */
[data-theme="light"] .terminal-card { background: #1e293b; border-color: #334155; box-shadow: 0 2px 8px rgba(0,0,0,.1); }
[data-theme="light"] .terminal-card-copy { border-color: #475569; color: #94a3b8; }
[data-theme="light"] .terminal-card-copy:hover { background: #334155; color: #e2e8f0; border-color: #64748b; }
[data-theme="light"] .terminal-card-copy.terminal-card-copied { background: #166534; border-color: #22c55e; color: #86efac; }
[data-theme="light"] .terminal-card-note { border-top-color: #334155; color: #94a3b8; }

/* ── Port Reference terminal (keep dark) ── */
[data-theme="light"] .port-ref-cmd { background: #1e293b; border-color: #334155; }
[data-theme="light"] .port-ref-cmd-copy { border-color: #475569; color: #94a3b8; }
[data-theme="light"] .port-ref-cmd-copy:hover { background: #334155; color: #e2e8f0; }

/* ── CLI simulator ── */
[data-theme="light"] .cli-terminal { background: #1e293b; border-color: #334155; }
[data-theme="light"] .tb-cli-output { background: #1e293b; color: #7ee787; }

/* ── Subnet binary grid (keep dark terminal look) ── */
[data-theme="light"] .st-binary-grid { background: #1e293b; }
[data-theme="light"] .st-bin-label { color: #94a3b8; }
[data-theme="light"] .st-bin-dec { color: #94a3b8; }
[data-theme="light"] .st-bin-result { border-top-color: #475569; }

/* ── Topology Builder palette ── */
[data-theme="light"] .tb-palette-item { background: rgba(99,85,224,.06); border-color: rgba(99,85,224,.2); }
[data-theme="light"] .tb-palette-item:hover { background: rgba(99,85,224,.14); }
[data-theme="light"] .tb-cable-chip { background: rgba(99,85,224,.06); border-color: rgba(99,85,224,.2); }
[data-theme="light"] .tb-cable-chip:hover { background: rgba(99,85,224,.14); }
[data-theme="light"] .tb-cable-chip-active { background: rgba(99,85,224,.18); }
[data-theme="light"] .tb-load-select { background: rgba(99,85,224,.06); border-color: rgba(99,85,224,.2); }

/* ── TB Grade modal ── */
[data-theme="light"] .tb-grade-card { background: #ffffff; border-color: rgba(99,85,224,.25); box-shadow: 0 24px 64px rgba(0,0,0,.12), 0 0 0 1px rgba(99,85,224,.15); }
[data-theme="light"] .tb-grade-close { color: #64748b; }
[data-theme="light"] .tb-grade-close:hover { color: #1e293b; }
[data-theme="light"] .tb-grade-scenario { color: var(--text); }
[data-theme="light"] .tb-grade-section { background: transparent; }
[data-theme="light"] .tb-grade-section-title { color: var(--text); }
[data-theme="light"] .tb-grade-item { background: rgba(0,0,0,.03); }
[data-theme="light"] .tb-grade-item-label { color: var(--text); }
[data-theme="light"] .tb-grade-item-hint { color: var(--text-mid); }
[data-theme="light"] .tb-grade-item-pass { color: #166534; background: rgba(22,163,74,.08); }

/* ── TB Coach modal ── */
[data-theme="light"] .tb-coach-loading-text strong { color: var(--text); }
[data-theme="light"] .tb-coach-loading-sub { color: var(--text-dim); }
[data-theme="light"] .tb-coach-error-title { color: #dc2626; }
[data-theme="light"] .tb-coach-error-msg { color: #991b1b; }
[data-theme="light"] .tb-coach-scenario { color: #0369a1; }
[data-theme="light"] .tb-coach-cached { background: rgba(99,85,224,.1); color: #6355e0; border-color: rgba(99,85,224,.25); }
[data-theme="light"] .tb-coach-tour { color: var(--text); }
[data-theme="light"] .tb-coach-section { background: transparent; }
[data-theme="light"] .tb-coach-section-title { color: var(--text); }
[data-theme="light"] .tb-coach-list { color: var(--text-mid); }
[data-theme="light"] .tb-coach-tip { color: var(--text-mid); background: rgba(99,85,224,.06); border-color: rgba(99,85,224,.25); }

/* ── TB toolbar buttons ── */
[data-theme="light"] .tb-tool-btn-coach { background: linear-gradient(135deg, rgba(14,165,233,.12), rgba(14,165,233,.06)); border-color: rgba(14,165,233,.4); color: #0369a1; }
[data-theme="light"] .tb-tool-btn-coach:hover { background: linear-gradient(135deg, rgba(14,165,233,.22), rgba(14,165,233,.1)); }
[data-theme="light"] .tb-tool-btn-ai { background: linear-gradient(135deg, rgba(168,85,247,.12), rgba(168,85,247,.06)); border-color: rgba(168,85,247,.4); color: #7e22ce; }
[data-theme="light"] .tb-tool-btn-ai:hover { background: linear-gradient(135deg, rgba(168,85,247,.22), rgba(168,85,247,.1)); }
[data-theme="light"] .tb-explain-btn { color: #b45309; border-color: rgba(180,83,9,.3); }
[data-theme="light"] .tb-explain-btn:hover { background: rgba(180,83,9,.08); }

/* ── TB Packet Inspection panel ── */
[data-theme="light"] .tb-packet-inspect { background: #ffffff; border-color: rgba(14,165,233,.3); box-shadow: 0 8px 32px rgba(0,0,0,.08), 0 0 8px rgba(14,165,233,.08); color: var(--text); }
[data-theme="light"] .tb-packet-inspect span[style*="color:#94a3b8"] { color: var(--text-mid) !important; }
[data-theme="light"] .tb-packet-inspect button[style*="color:#94a3b8"] { color: var(--text-dim) !important; }

/* ── TB Config panel tabs ── */
[data-theme="light"] .tb-config-tab { color: var(--text-dim); }
[data-theme="light"] .tb-config-tab:hover { color: var(--text); }
[data-theme="light"] .tb-config-tab.active { color: var(--accent); border-bottom-color: var(--accent); }

/* ── Fix This Network ── */
[data-theme="light"] .tb-fix-panel { box-shadow: -4px 4px 20px rgba(0,0,0,.08); }
[data-theme="light"] .tb-fix-timer { background: rgba(0,0,0,.1); }
[data-theme="light"] .tb-fix-fault-row { background: var(--surface2); }
[data-theme="light"] .tb-fix-symptom { background: rgba(220,38,38,.06); border-color: rgba(220,38,38,.15); }
[data-theme="light"] .tb-fix-reveal-diagnosis { color: #dc2626; background: rgba(220,38,38,.05); }
[data-theme="light"] .tb-fix-reveal-fix { color: #166534; }
[data-theme="light"] .tb-fix-toast { box-shadow: 0 8px 32px rgba(22,163,74,.2); }

/* ── TB Toolbar ── */
[data-theme="light"] .tb-toolbar { background: rgba(99,85,224,.06); border-color: rgba(99,85,224,.15); }
[data-theme="light"] .tb-toolbar-divider { background: rgba(99,85,224,.18); }

/* ── TB Palette ── */
[data-theme="light"] .tb-palette { background: rgba(99,85,224,.04); border-color: rgba(99,85,224,.15); }
[data-theme="light"] .tb-palette-item { background: #ffffff; border-color: rgba(99,85,224,.18); border-left-color: var(--tb-device-color, rgba(99,85,224,.4)); }
[data-theme="light"] .tb-palette-item:hover { background: rgba(99,85,224,.08); }
[data-theme="light"] .tb-cable-chip { background: #ffffff; border-color: rgba(99,85,224,.18); }
[data-theme="light"] .tb-cable-chip:hover { background: rgba(99,85,224,.08); }
[data-theme="light"] .tb-cable-chip-active { background: rgba(99,85,224,.12); }
[data-theme="light"] .tb-load-select { background: #ffffff; border-color: rgba(99,85,224,.2); }
[data-theme="light"] .tb-palette-hint { border-top-color: rgba(99,85,224,.12); }

/* ── Canvas grid and background ── */
[data-theme="light"] .tb-canvas-wrap { background: #fbfbfe; border-color: rgba(99,85,224,.12); }
[data-theme="light"] #tb-grid path { stroke: rgba(99,85,224,.08); }

/* ── Intro & How-to banners ── */
[data-theme="light"] .tb-intro-details { background: rgba(99,85,224,.04); border-color: rgba(99,85,224,.15); }
[data-theme="light"] .tb-howto-details { background: rgba(99,85,224,.04); border-color: rgba(99,85,224,.15); }
/* v4.49.1: light-theme for the new step cards */
[data-theme="light"] .tb-howto-step {
  background:
    radial-gradient(140% 160% at 0% 0%, rgba(99,85,224,.06), transparent 55%),
    linear-gradient(160deg, rgba(99,85,224,.04), rgba(99,85,224,.01));
  border-color: rgba(99,85,224,.22);
}
[data-theme="light"] .tb-howto-step:hover {
  border-color: rgba(99,85,224,.4);
  box-shadow: 0 6px 16px -8px rgba(99,85,224,.25);
}
[data-theme="light"] .tb-howto-step-title { color: #5b4bdc; }
[data-theme="light"] .tb-howto-step-desc strong { color: #5b4bdc; }
[data-theme="light"] .tb-howto-step kbd { background: #ffffff; border-color: var(--border); color: var(--text); }

/* ── Sim toolbar & log ── */
[data-theme="light"] .tb-sim-status { color: var(--text-dim); }
[data-theme="light"] .tb-sim-log { border-color: rgba(99,85,224,.15); }
[data-theme="light"] .tb-sim-log-content { color: var(--text-mid); }
[data-theme="light"] .tb-sim-log-head { border-bottom-color: rgba(99,85,224,.12); }

/* ── Wire overlay ── */
[data-theme="light"] .tb-wire-overlay {
  background: linear-gradient(90deg, rgba(22,163,74,.16), rgba(124,111,247,.12));
  border-color: #16a34a;
  color: #14532d;  /* dark-green text — white text on light-theme mint was unreadable */
  box-shadow: 0 6px 22px rgba(22,163,74,.22), 0 0 0 1px rgba(22,163,74,.3);
}
[data-theme="light"] .tb-wire-overlay kbd {
  background: #ffffff;
  border-color: rgba(22,163,74,.4);
  color: #14532d;
}

/* ── Scenario panel ── */
[data-theme="light"] .tb-scenario-panel { background: rgba(99,85,224,.04); border-color: rgba(99,85,224,.15); }

/* ── Lab panel ── */
[data-theme="light"] .tb-lab-panel { background: var(--surface); border-color: var(--border); }
[data-theme="light"] .tb-lab-diff-beginner { background: rgba(22,163,74,.12); color: #166534; }
[data-theme="light"] .tb-lab-diff-intermediate { background: rgba(245,158,11,.12); color: #b45309; }
[data-theme="light"] .tb-lab-diff-advanced { background: rgba(239,68,68,.12); color: #dc2626; }

/* ── Fix difficulty badges ── */
[data-theme="light"] .tb-fix-diff-easy { background: rgba(22,163,74,.12); color: #166534; }
[data-theme="light"] .tb-fix-diff-medium { background: rgba(245,158,11,.12); color: #b45309; }
[data-theme="light"] .tb-fix-diff-hard { background: rgba(239,68,68,.12); color: #dc2626; }

/* ── Fix start button ── */
[data-theme="light"] .tb-fix-start-btn { background: linear-gradient(135deg, #dc2626, #b91c1c); }

/* ── Tab pills (used in Fix picker + Lab picker) ── */
[data-theme="light"] .tb-fix-tab { background: #ffffff; border-color: var(--border); color: var(--text-mid); }
[data-theme="light"] .tb-fix-tab:hover { border-color: var(--accent); }
[data-theme="light"] .tb-fix-tab-active { background: var(--accent); color: #ffffff; border-color: var(--accent); }

/* ── Lab cards (picker modal) ── */
[data-theme="light"] .tb-lab-card { background: #ffffff; border-color: var(--border); }
[data-theme="light"] .tb-lab-card:hover { background: rgba(99,85,224,.06); border-color: var(--accent); }
[data-theme="light"] .tb-lab-card-meta { color: var(--text-dim); }
[data-theme="light"] .tb-lab-card-desc { color: var(--text-mid); }
[data-theme="light"] .tb-lab-badge-auto { color: #b45309; background: rgba(180,83,9,.1); border-color: rgba(180,83,9,.25); }

/* ── Lab step panel (active lab) ── */
[data-theme="light"] .tb-lab-panel-head { color: #166534; background: rgba(22,163,74,.08); border-bottom-color: rgba(22,163,74,.15); }
[data-theme="light"] .tb-lab-step-title { color: var(--text); }
[data-theme="light"] .tb-lab-step-instr { color: var(--text-mid); }
[data-theme="light"] .tb-lab-step-instr code { background: rgba(99,85,224,.08); color: #6355e0; }
[data-theme="light"] .tb-lab-step-pending { color: var(--text-dim); }
[data-theme="light"] .tb-lab-step-feedback { color: #b45309; background: rgba(180,83,9,.06); border-color: rgba(180,83,9,.2); }
[data-theme="light"] .tb-lab-hint-toggle { color: #2563eb; background: rgba(37,99,235,.06); border-color: rgba(37,99,235,.2); }
[data-theme="light"] .tb-lab-hint-toggle:hover { background: rgba(37,99,235,.12); }
[data-theme="light"] .tb-lab-hint-body { color: #1d4ed8; background: rgba(37,99,235,.05); }
[data-theme="light"] .tb-lab-progress { color: var(--text-dim); }
[data-theme="light"] .tb-lab-nav { background: rgba(0,0,0,.03); border-top-color: var(--border); }
[data-theme="light"] .tb-lab-progress-bar { background: rgba(0,0,0,.06); }

/* ── Config panel ── */
[data-theme="light"] .tb-config-head { color: var(--text); background: rgba(99,85,224,.06); border-bottom-color: rgba(99,85,224,.15); }
[data-theme="light"] .tb-config-close { color: var(--text-dim) !important; }
[data-theme="light"] .tb-config-close:hover { color: var(--text) !important; }
[data-theme="light"] .tb-config-body label { color: var(--text-mid) !important; }
[data-theme="light"] .tb-config-body input[type="text"],
[data-theme="light"] .tb-config-body select { background: #ffffff !important; border-color: var(--border) !important; color: var(--text) !important; }
/* Override inline color:#94a3b8 and color:#e2e8f0 in config panel JS-generated HTML */
[data-theme="light"] .tb-config-body div[style*="color:#94a3b8"] { color: var(--text-dim) !important; }
[data-theme="light"] .tb-config-body div[style*="color:#e2e8f0"] { color: var(--text) !important; }
[data-theme="light"] .tb-sg-row-allow { background: rgba(22,163,74,.05); }
[data-theme="light"] .tb-nacl-row-deny { background: rgba(220,38,38,.05); }
[data-theme="light"] .tb-iface-table th { color: var(--text-dim); border-bottom-color: var(--border); }
[data-theme="light"] .tb-iface-table td { border-bottom-color: rgba(0,0,0,.06); }
[data-theme="light"] .tb-iface-table input { background: #ffffff; border-color: var(--border); color: var(--text); }
[data-theme="light"] .tb-iface-cable { color: var(--text-dim); }
[data-theme="light"] .tb-iface-trunk-detail { background: rgba(37,99,235,.04); }
[data-theme="light"] .tb-sg-table th { color: var(--text-dim); border-bottom-color: var(--border); }
[data-theme="light"] .tb-sg-table td { border-bottom-color: rgba(0,0,0,.06); }
[data-theme="light"] .tb-sg-table select,
[data-theme="light"] .tb-sg-table input { background: #ffffff; border-color: var(--border); }

/* ── Device Overview tab ── */
[data-theme="light"] .tb-ov-hostname { color: var(--text) !important; }
[data-theme="light"] .tb-ov-hostname:focus { background: rgba(99,85,224,.04) !important; border-color: var(--accent) !important; }
[data-theme="light"] .tb-ov-stat { background: rgba(0,0,0,.04); }
[data-theme="light"] .tb-ov-stat span { color: var(--text-dim); }
[data-theme="light"] .tb-ov-stat strong { color: var(--text); }
[data-theme="light"] .tb-ov-section-label { color: var(--text-dim); }
[data-theme="light"] .tb-ov-iface-card { background: rgba(0,0,0,.03); }
[data-theme="light"] .tb-ov-iface-mode { color: var(--text-dim); }
[data-theme="light"] .tb-ov-iface-detail { color: var(--text-mid); }
[data-theme="light"] .tb-ov-action { color: var(--text-mid) !important; border-color: var(--border) !important; }
[data-theme="light"] .tb-ov-action:hover { background: rgba(99,85,224,.08) !important; }

/* ── Simulation log ── */
[data-theme="light"] .tb-sim-log-content { color: var(--text-mid); }

/* ── Routing type badges ── */
[data-theme="light"] .tb-route-type-connected { background: rgba(22,163,74,.12); color: #166534; }
[data-theme="light"] .tb-route-type-static { background: rgba(37,99,235,.12); color: #1d4ed8; }

/* ── VLAN rows ── */
[data-theme="light"] .tb-vlan-row { background: rgba(0,0,0,.03); }

/* ── VXLAN rows ── */
[data-theme="light"] .tb-vxlan-row { background: rgba(139,92,246,.05); border-color: rgba(139,92,246,.15); }

/* ── Cloud cards ── */
[data-theme="light"] .tb-cloud-card { background: rgba(99,85,224,.02); border-color: rgba(99,85,224,.15); }

/* ── TB primary/grade buttons ── */
[data-theme="light"] .tb-tool-btn-primary { background: linear-gradient(135deg, rgba(99,85,224,.15), rgba(99,85,224,.08)); border-color: rgba(99,85,224,.4); color: #4338ca; }
[data-theme="light"] .tb-tool-btn-primary:hover { background: linear-gradient(135deg, rgba(99,85,224,.25), rgba(99,85,224,.12)); }
[data-theme="light"] .tb-grade-card { background: #ffffff; }
[data-theme="light"] .tb-grade-scenario { color: var(--text); }

/* ── Fix hint button ── */
[data-theme="light"] .tb-fix-hint-btn { color: #b45309; border-color: rgba(180,83,9,.3); background: rgba(180,83,9,.06); }
[data-theme="light"] .tb-fix-giveup-btn { color: #b45309; border-color: #b45309; background: rgba(180,83,9,.06); }
[data-theme="light"] .tb-fix-giveup-btn:hover { background: rgba(180,83,9,.14); }

/* ── Misc hardcoded text colors ── */
[data-theme="light"] .tb-grade-body { color: var(--text-mid); }
[data-theme="light"] .tb-grade-backdrop { background: rgba(0,0,0,.3); }

/* ════════════════════════════════════════════════════════════════════
   v4.42.0 — Animation pass: celebration toast, streak pulse, weak-spots
   FLIP transition, and a global prefers-reduced-motion gate.
   ══════════════════════════════════════════════════════════════════ */

/* Milestone celebration toast — slides up from the top, distinct palette
   from the red error toast (accent gradient, gold border) so users read it
   as "good thing". Narrower than error toast so mini confetti peeks around. */
.celebration-toast {
  position: fixed;
  top: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(-30px);
  background: linear-gradient(135deg, rgba(124,111,247,.96), rgba(99,85,224,.96));
  color: #fff;
  padding: 14px 28px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  z-index: 9999;
  opacity: 0;
  transition: opacity .35s ease, transform .35s cubic-bezier(0.2, 0.8, 0.2, 1);
  pointer-events: none;
  box-shadow: 0 8px 32px rgba(124,111,247,.45), 0 0 0 1px rgba(251,191,36,.55);
  max-width: 92vw;
  min-width: 240px;
  text-align: center;
}
.celebration-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.celebration-toast-title { font-size: 15px; font-weight: 700; line-height: 1.25; }
.celebration-toast-sub { font-size: 12px; opacity: 0.88; margin-top: 4px; font-weight: 500; }

/* Streak pulse — scale + accent glow keyframe fired when renderStreakBadge
   detects the _pendingStreakPulse flag set by finish()/submitExam(). */
@keyframes streakPulse {
  0%   { transform: scale(1);    box-shadow: 0 0 0 0 rgba(251,146,60,.6); }
  50%  { transform: scale(1.12); box-shadow: 0 0 0 10px rgba(251,146,60,0); }
  100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(251,146,60,0); }
}
.streak-pulse { animation: streakPulse 500ms ease-out 1; }

/* Weak Spots chip — give the chip a transform transition so the FLIP
   rerank animation has something to ride on. The actual play is driven by
   JS (transform set + cleared across frames), but the CSS transition is
   what smooths it. */
/* v4.81.23: .tf-chip FLIP-rerank transition retired with the Weak Spots
   chip row in v4.81.18 consolidation. */

/* Accessibility gate — reduce or suppress motion for users who request it.
   We keep *transitional* animations (short, functional) but kill long
   decorative ones: the celebration slide, streak pulse, FLIP transform,
   score count-up via animateCount (handled in JS by respecting the media
   query through window.matchMedia — see app.js). */
@media (prefers-reduced-motion: reduce) {
  .celebration-toast,
  .celebration-toast.show { transition: opacity .01ms linear !important; transform: translateX(-50%) translateY(0) !important; }
  .streak-pulse { animation: none !important; }
  /* v4.81.23: .tf-chip rule retired with the Weak Spots chip row. */
  /* Daily Goal + Grade ring transitions kept short but non-zero so the
     final state is still painted. */
  .dg-ring-fill, .grade-fill { transition: stroke-dashoffset .01ms linear, stroke .01ms linear !important; }
}

/* ─── v4.42.2 — Progress row trend arrow ─────────────────────────────── */
/* Small inline arrow next to the % label. Tiny on purpose — it's a glance
   signal, not a focal point. Color inherited from inline style set in JS. */
.topic-trend {
  display: inline-block;
  margin-left: 6px;
  font-size: 12px;
  font-weight: 700;
  vertical-align: baseline;
  line-height: 1;
}

/* ─── v4.42.2 — Analytics "open Progress page" CTA card ──────────────── */
/* Replaces the deleted Topic Mastery card. Small, clearly a pointer, not
   a dashboard in its own right — that's the whole design intent. */
.ana-topics-cta {
  text-align: center;
}
.ana-topics-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding: 10px 18px;
  background: linear-gradient(135deg, rgba(124,111,247,.18), rgba(99,85,224,.14));
  color: var(--accent-light);
  border: 1px solid rgba(124,111,247,.35);
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
}
.ana-topics-cta-btn:hover {
  background: linear-gradient(135deg, rgba(124,111,247,.28), rgba(99,85,224,.22));
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(124,111,247,.2);
}
.ana-topics-cta-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.ana-topics-cta-arrow {
  font-size: 16px;
  font-weight: 700;
  transition: transform .15s ease;
}
.ana-topics-cta-btn:hover .ana-topics-cta-arrow {
  transform: translateX(3px);
}

/* ─── v4.43.1 — AI Coach lab-aware header ────────────────────────────── */
.tb-coach-lab-badge {
  display: inline-block;
  padding: 4px 10px;
  background: linear-gradient(135deg, rgba(96,165,250,.2), rgba(59,130,246,.12));
  color: var(--blue, #60a5fa);
  border: 1px solid rgba(96,165,250,.3);
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 8px;
}
.tb-coach-cached-inline { margin-top: 4px; }

/* ─── v4.43.1 — Subnet Trainer dashboard callouts ────────────────────── */
.st-dash-callout {
  margin: 16px 0;
  padding: 14px 16px;
  border-radius: 10px;
  border: 1px solid var(--surface3);
  background: var(--surface2);
}
.st-dash-callout-weak {
  border-color: rgba(248,113,113,.35);
  background: linear-gradient(135deg, rgba(248,113,113,.05), rgba(248,113,113,.02));
}
.st-dash-callout-stale {
  border-color: rgba(251,146,60,.3);
  background: linear-gradient(135deg, rgba(251,146,60,.05), rgba(251,146,60,.02));
}
.st-dash-callout-types {
  border-color: rgba(124,111,247,.3);
  background: linear-gradient(135deg, rgba(124,111,247,.05), rgba(124,111,247,.02));
}
.st-dash-callout-title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-mid);
  margin-bottom: 10px;
}
.st-dash-callout-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.st-dash-callout-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--surface3);
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
  color: var(--text);
  font: inherit;
}
.st-dash-callout-row:hover {
  background: var(--surface2);
  border-color: rgba(124,111,247,.4);
  transform: translateX(2px);
}
.st-dash-callout-icon { font-size: 18px; }
.st-dash-callout-name { flex: 1; font-weight: 600; }
.st-dash-callout-pct {
  font-size: 13px;
  font-weight: 700;
  padding: 2px 8px;
  background: var(--surface3);
  border-radius: 99px;
  color: var(--text-dim);
}
.st-dash-callout-weak .st-dash-callout-pct { color: var(--red); background: rgba(248,113,113,.1); }
.st-dash-callout-stale .st-dash-callout-pct { color: var(--orange); background: rgba(251,146,60,.1); }
.st-dash-callout-action {
  font-size: 12px;
  font-weight: 600;
  color: var(--accent-light);
}
.st-dash-callout-type-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.st-dash-callout-type-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: var(--surface);
  border-radius: 6px;
  font-size: 13px;
}
.st-dash-callout-type-name { font-weight: 600; }
.st-dash-callout-type-pct { color: var(--text-dim); font-size: 12px; }

/* v4.81.23: legacy .tf-bridges + .tf-bridge-btn classes retired. The
   Subnet Trainer bridge was re-integrated into #today-plan as
   .tplan-bridges + .tplan-bridge-btn in v4.81.21. */

/* ─── v4.43.1 — Topology Builder UI polish ─────────────────────────── */
/* Compact hero (replaces wall-of-text intro banner) */
.tb-hero {
  margin: 0 0 14px;
  padding: 14px 18px;
  background: linear-gradient(135deg, rgba(124,111,247,.08), rgba(99,85,224,.04));
  border: 1px solid rgba(124,111,247,.18);
  border-radius: 10px;
}
.tb-hero-tagline {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 10px;
}
.tb-hero-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.tb-hero-pill {
  display: inline-block;
  padding: 3px 10px;
  font-size: 12px;
  color: var(--text-mid);
  background: var(--surface2);
  border: 1px solid var(--surface3);
  border-radius: 99px;
}

/* Toolbar v2 — polished grid layout (v4.43.3).
   Uses CSS Grid with auto-fit columns so all 6 groups wrap predictably instead of
   leaving orphan dividers or mismatched row heights. Dropped border-right dividers
   in favor of column-gap separation (dividers became ugly orphan strokes at wrap
   boundaries since `:last-of-type` can't target "last in row" with auto-fit). */
.tb-toolbar-v2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, max-content));
  column-gap: 24px;
  row-gap: 16px;
  align-items: start;
  padding: 12px 14px;
  background: var(--surface2);
  border: 1px solid var(--surface3);
  border-radius: 10px;
  margin-bottom: 6px;
}
.tb-tool-group {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
.tb-tool-group-primary .tb-tool-btn { height: 34px; font-weight: 600; }
.tb-tool-group-label {
  width: 100%;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-dim);
  padding: 0 2px;
  margin-bottom: 2px;
}

/* Status text gets its own strip below the toolbar — never crowded against a group */
.tb-toolbar-meta {
  display: flex;
  align-items: center;
  padding: 0 14px 10px;
  min-height: 20px;
}
.tb-toolbar-meta .tb-status {
  font-size: 12px;
  color: var(--text-dim);
  font-style: italic;
}

/* Empty-state with primary CTAs */
.tb-empty-hint-v2 {
  padding: 40px 24px;
  text-align: center;
  max-width: 700px;
  margin: 60px auto 0;
}
.tb-empty-icon { font-size: 64px; margin-bottom: 12px; }
.tb-empty-title {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 6px;
  color: var(--text);
}
.tb-empty-sub {
  font-size: 14px;
  color: var(--text-dim);
  margin-bottom: 28px;
}
.tb-empty-ctas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  max-width: 620px;
  margin: 0 auto;
}
.tb-empty-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 18px 14px;
  background: var(--surface2);
  border: 1px solid var(--surface3);
  border-radius: 10px;
  cursor: pointer;
  color: var(--text);
  font: inherit;
  transition: transform .15s ease, border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.tb-empty-cta:hover {
  transform: translateY(-2px);
  border-color: rgba(124,111,247,.4);
  background: var(--surface);
  box-shadow: 0 4px 12px rgba(124,111,247,.15);
}
.tb-empty-cta-primary {
  background: linear-gradient(135deg, rgba(124,111,247,.15), rgba(99,85,224,.08));
  border-color: rgba(124,111,247,.35);
}
.tb-empty-cta-primary:hover {
  background: linear-gradient(135deg, rgba(124,111,247,.25), rgba(99,85,224,.15));
}
.tb-empty-cta-icon { font-size: 32px; }
.tb-empty-cta-title { font-size: 14px; font-weight: 700; }
.tb-empty-cta-sub { font-size: 11px; color: var(--text-dim); }

/* v4.47.1: scenario tile — subtle accent treatment to flag "new/prominent" */
.tb-empty-cta-scenario {
  background: linear-gradient(135deg, rgba(34,197,94,.10), rgba(124,111,247,.06));
  border-color: rgba(34,197,94,.3);
}
.tb-empty-cta-scenario:hover {
  background: linear-gradient(135deg, rgba(34,197,94,.18), rgba(124,111,247,.12));
  border-color: rgba(34,197,94,.5);
  box-shadow: 0 4px 12px rgba(34,197,94,.15);
}

/* ── v4.47.2: in-canvas "scenario loaded" card ──
 * Replaces the 4-CTA quickstart when a scenario is active. Lives inside
 * #tb-empty-hint so it sits centered in the canvas area — exactly where
 * the user is looking. Primary visible feedback that scenario loads land. */
.tb-sc-loaded {
  width: 100%;
  max-width: 620px;
  padding: 24px 28px;
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(124,111,247,.14), transparent 55%),
    linear-gradient(160deg, rgba(124,111,247,.12), rgba(124,111,247,.03));
  border: 1px solid rgba(124,111,247,.35);
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 10px 30px -12px rgba(124,111,247,.35);
  animation: tbScLoadedIn .45s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
@keyframes tbScLoadedIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.tb-sc-loaded-head { text-align: center; margin-bottom: 18px; }
.tb-sc-loaded-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--accent-light, #a78bfa);
  padding: 4px 10px; border-radius: 99px;
  background: rgba(124,111,247,.14);
  border: 1px solid rgba(124,111,247,.3);
  margin-bottom: 12px;
}
.tb-sc-loaded-icon { font-size: 44px; line-height: 1; margin-bottom: 8px; }
.tb-sc-loaded-title {
  margin: 0 0 6px;
  font-size: 22px; font-weight: 800;
  letter-spacing: -.02em; color: var(--text, #e2e8f0);
}
.tb-sc-loaded-desc {
  margin: 0 auto; max-width: 520px;
  font-size: 13.5px; line-height: 1.55;
  color: var(--text-mid, #94a3b8);
}
.tb-sc-loaded-reqs {
  margin-bottom: 16px;
  padding: 12px 14px;
  background: rgba(15, 23, 42, .25);
  border-radius: 10px;
  border: 1px solid rgba(124,111,247,.15);
}
.tb-sc-loaded-reqs-label {
  font-size: 10.5px; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent-light, #a78bfa);
  margin-bottom: 8px; text-align: center;
}
.tb-sc-loaded-chips {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 6px;
}
.tb-sc-loaded-chip {
  font-size: 11.5px; font-weight: 600;
  padding: 4px 10px; border-radius: 99px;
  background: rgba(124,111,247,.12);
  color: var(--text, #e2e8f0);
  border: 1px solid rgba(124,111,247,.22);
  letter-spacing: .01em;
}
.tb-sc-loaded-ctas {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
  margin-bottom: 14px;
}
.tb-sc-loaded-cta {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 16px; border-radius: 10px;
  font-size: 13px; font-weight: 700; font-family: inherit;
  cursor: pointer; color: var(--text, #e2e8f0);
  background: var(--surface, #1a1a2e); border: 1px solid var(--surface3, #2d2d44);
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.tb-sc-loaded-cta:hover {
  transform: translateY(-1px);
  border-color: var(--accent, #7c6ff7);
  background: var(--surface2, #242438);
  box-shadow: 0 4px 12px rgba(124,111,247,.2);
}
.tb-sc-loaded-cta-primary {
  background: linear-gradient(135deg, var(--accent, #7c6ff7), #6355e0);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 2px 8px rgba(124,111,247,.3);
}
.tb-sc-loaded-cta-primary:hover {
  background: linear-gradient(135deg, #8879f8, #7266e5);
  box-shadow: 0 6px 16px rgba(124,111,247,.4);
  border-color: transparent;
}
.tb-sc-loaded-cta-ghost {
  background: transparent;
  color: var(--text-dim, #94a3b8);
  border-color: var(--border, rgba(255,255,255,.1));
}
.tb-sc-loaded-cta-ghost:hover {
  color: var(--text, #e2e8f0);
  background: transparent;
  border-color: var(--text-dim, #94a3b8);
  box-shadow: none;
}
.tb-sc-loaded-hint {
  text-align: center;
  font-size: 11.5px; color: var(--text-dim, #94a3b8);
  font-style: italic;
}
[data-theme="light"] .tb-sc-loaded {
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(99,85,224,.10), transparent 55%),
    linear-gradient(160deg, rgba(99,85,224,.08), rgba(99,85,224,.02));
  border-color: rgba(99,85,224,.3);
  box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 10px 30px -12px rgba(99,85,224,.25);
}
[data-theme="light"] .tb-sc-loaded-reqs {
  background: rgba(99,85,224,.04);
  border-color: rgba(99,85,224,.15);
}
[data-theme="light"] .tb-sc-loaded-chip {
  background: rgba(99,85,224,.08);
  border-color: rgba(99,85,224,.18);
  color: #334155;
}
[data-theme="light"] .tb-sc-loaded-cta-primary {
  background: linear-gradient(135deg, #6355e0, #5b4bdc);
}
@media (max-width: 560px) {
  .tb-sc-loaded { padding: 18px 20px; max-width: 95%; }
  .tb-sc-loaded-title { font-size: 18px; }
  .tb-sc-loaded-desc { font-size: 12.5px; }
  .tb-sc-loaded-icon { font-size: 36px; }
  .tb-sc-loaded-cta { padding: 8px 12px; font-size: 12px; }
}

/* ── v4.47.1: Scenario picker modal ──
 * Card-grid of all 16 scenarios, grouped by 3 categories. Matches the
 * lab-picker pattern in structure but uses its own richer card treatment
 * (icon + badge + chips for device / concept / exam-linked counts). */
.tb-scenario-picker-header { margin-bottom: 14px; }
.tb-scenario-picker-intro {
  font-size: 13px; line-height: 1.55; color: var(--text-mid);
  padding: 10px 14px;
  background: rgba(124,111,247,.06);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
}
.tb-scenario-picker-intro strong { color: var(--accent-light); }

.tb-scenario-picker-cat {
  margin-top: 14px;
  border: 1px solid rgba(124,111,247,.18);
  border-radius: 12px;
  overflow: hidden;
  background: rgba(15, 23, 42, .25);
}
.tb-scenario-picker-cat-head {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--accent-light);
  background: rgba(124,111,247,.08);
  transition: background .15s ease;
  user-select: none;
}
.tb-scenario-picker-cat-head::-webkit-details-marker { display: none; }
.tb-scenario-picker-cat-head::marker { content: ''; }
.tb-scenario-picker-cat-head:hover { background: rgba(124,111,247,.14); }
.tb-scenario-picker-cat-ico { font-size: 16px; line-height: 1; }
.tb-scenario-picker-cat-name { flex: 1; }
.tb-scenario-picker-cat-count {
  font-size: 11px; font-weight: 700; letter-spacing: .05em;
  padding: 3px 10px; border-radius: 99px;
  background: rgba(124,111,247,.18);
  color: var(--accent-light);
}
.tb-scenario-picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px;
  padding: 12px 14px 14px;
}

.tb-scenario-card {
  display: flex; flex-direction: column; gap: 8px; text-align: left;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--surface3);
  border-radius: 10px;
  cursor: pointer;
  color: var(--text);
  font: inherit;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease, background .15s ease;
  position: relative;
}
.tb-scenario-card:hover {
  transform: translateY(-2px);
  border-color: rgba(124,111,247,.5);
  background: var(--surface2);
  box-shadow: 0 6px 16px -8px rgba(124,111,247,.3);
}
.tb-scenario-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.tb-scenario-card-active {
  border-color: var(--accent);
  background: linear-gradient(135deg, rgba(124,111,247,.12), rgba(124,111,247,.04));
  box-shadow: 0 0 0 1px rgba(124,111,247,.2);
}
.tb-scenario-card-head {
  display: flex; align-items: center; gap: 8px;
}
.tb-scenario-card-icon { font-size: 20px; line-height: 1; flex-shrink: 0; }
.tb-scenario-card-title {
  font-size: 14px; font-weight: 800; line-height: 1.25;
  color: var(--text); flex: 1;
  letter-spacing: -.01em;
}
.tb-scenario-card-badge {
  font-size: 9px; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase;
  padding: 3px 8px; border-radius: 99px;
  background: var(--accent); color: white;
  flex-shrink: 0;
}
.tb-scenario-card-desc {
  font-size: 12px; line-height: 1.5; color: var(--text-dim);
}
.tb-scenario-card-meta {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px;
}
.tb-scenario-card-chip {
  font-size: 10.5px; font-weight: 600;
  padding: 3px 8px; border-radius: 99px;
  background: rgba(124,111,247,.1); color: var(--accent-light);
  letter-spacing: .02em;
}
.tb-scenario-card-chip-exam {
  background: rgba(251,191,36,.12); color: var(--yellow);
}

.tb-scenario-picker-reset {
  margin-top: 16px; text-align: center; padding-top: 12px;
  border-top: 1px solid var(--border);
}
.tb-scenario-reset-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-dim);
  padding: 8px 16px; border-radius: 8px;
  font-size: 12px; font-weight: 600; cursor: pointer;
  font-family: inherit;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.tb-scenario-reset-btn:hover {
  border-color: var(--accent);
  color: var(--accent-light);
  background: rgba(124,111,247,.05);
}

/* Light-theme overrides */
[data-theme="light"] .tb-scenario-picker-cat { background: rgba(99,85,224,.03); border-color: rgba(99,85,224,.14); }
[data-theme="light"] .tb-scenario-picker-cat-head { background: rgba(99,85,224,.06); color: #5b4bdc; }
[data-theme="light"] .tb-scenario-picker-cat-head:hover { background: rgba(99,85,224,.12); }
[data-theme="light"] .tb-scenario-picker-cat-count { background: rgba(99,85,224,.12); color: #5b4bdc; }
[data-theme="light"] .tb-scenario-picker-intro { background: rgba(99,85,224,.05); border-left-color: #6355e0; color: #475569; }
[data-theme="light"] .tb-scenario-card-chip { background: rgba(99,85,224,.08); color: #5b4bdc; }
[data-theme="light"] .tb-scenario-card-chip-exam { background: rgba(234,179,8,.1); color: #b45309; }

@media (max-width: 560px) {
  .tb-scenario-picker-grid { grid-template-columns: 1fr; padding: 10px 12px; }
  .tb-scenario-card { padding: 12px 14px; }
}

/* Lab picker — category groups */
.tb-lab-picker-header { margin-bottom: 14px; }
.tb-lab-picker-count {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 10px;
  color: var(--text);
}
.tb-lab-picker-count strong { color: var(--accent-light); }
.tb-lab-picker-count-sub {
  font-size: 12px;
  font-weight: 400;
  color: var(--text-dim);
  margin-left: 6px;
}
.tb-lab-category {
  margin-bottom: 14px;
  border: 1px solid var(--surface3);
  border-radius: 8px;
  background: var(--surface);
}
.tb-lab-category-head {
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.tb-lab-category-head:hover { background: var(--surface2); }
.tb-lab-category-count {
  font-size: 11px;
  font-weight: 400;
  color: var(--text-dim);
  text-transform: none;
  letter-spacing: 0;
}
.tb-lab-category-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px;
  padding: 8px 14px 14px;
}
.tb-lab-category-variants {
  border-style: dashed;
  background: var(--surface2);
}
.tb-lab-variant-groups {
  padding: 8px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.tb-lab-variant-group-head {
  font-size: 12px;
  color: var(--text);
  margin-bottom: 6px;
  padding-left: 2px;
}
.tb-lab-variant-group-parent {
  font-size: 11px;
  color: var(--text-dim);
  font-weight: 400;
  margin-left: 4px;
}

/* ─── v4.43.0 — exam-convention keyword highlighting ─────────────────
   Renders around CompTIA-exam trap words (NOT, EXCEPT, MOST, BEST, NEVER,
   ALWAYS, ONLY, FIRST, LAST, LEAST, WORST, PRIMARY, NEXT, CANNOT). Subtle
   chip styling so the keyword catches the eye without shouting. Original
   case preserved — no text-transform, because upper-casing plain prose
   occurrences would confuse users. */
/* v4.44.0 — simplified per user feedback: bold purple text only, no pill
   background or underline. Cleaner on dense stems where 2+ keywords appear. */
.exam-keyword {
  font-weight: 700;
  color: var(--accent-light);
}
[data-theme="light"] .exam-keyword {
  color: var(--accent);
}
@media (prefers-reduced-motion: reduce) {
  /* v4.44.0 — neutralise the new quiz + lesson animations. Elements jump
     to final state (no fade/slide/pop/glow) so motion-sensitive users
     still see all the content, just without motion. */
  #q-text.q-text-reveal,
  .option.option-stagger-in,
  .st-block-match.st-block-match-active,
  .option.correct {
    animation: none !important;
  }
  .st-block-match { opacity: 1; transform: none; }
  .progress-fill { transition: none; }
  /* v4.46.0 — Readiness hero animations neutralised */
  .ana-ready-bar-fill,
  .ana-domain-fill { transition: none !important; }
  .ana-ready-datechip { transition: none !important; }
  .ana-ready-datechip:hover { transform: none; }
  /* v4.46.1 — Streak flame pulse neutralised */
  .ana-streak-flame { animation: none !important; transform: none; filter: none; }
  .ana-streak-day-dot { transition: none !important; }
  /* v4.47.0 — Scenario Learn-more animations neutralised */
  .tb-scenario-learn-body { animation: none !important; }
  .tb-scenario-learn-chev { transition: none !important; }
  .tb-scenario-learn-summary { transition: none !important; }
  .tb-scenario-learn-summary:hover { transform: none; }
  /* v4.47.1 — Scenario picker card lift neutralised */
  .tb-scenario-card { transition: none !important; }
  .tb-scenario-card:hover { transform: none; }
  /* v4.47.2 — Scenario-loaded card fade-in neutralised */
  .tb-sc-loaded { animation: none !important; }
  .tb-sc-loaded-cta { transition: none !important; }
  .tb-sc-loaded-cta:hover { transform: none; }
  /* v4.49.1 — How-to step card hover-lift neutralised */
  .tb-howto-step { transition: none !important; }
  .tb-howto-step:hover { transform: none; }
}

/* ══════════════════════════════════════════
   v4.44.0 — Subnet block-match ✅ pop animation
   Wraps the ✅ in Lesson 4 Step 4 and Lesson 5 Step 4 so the "aha" moment
   of block-size method animates in when the card scrolls into view.
   IntersectionObserver (in stOpenLesson) adds .st-block-match-active to
   trigger the one-shot pop.
   ══════════════════════════════════════════ */
.st-block-match {
  display: inline-block;
  opacity: 0;
  transform: scale(0.3);
}
.st-block-match.st-block-match-active {
  animation: stBlockMatchPop 350ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes stBlockMatchPop {
  0% { opacity: 0; transform: scale(0.3); }
  60% { opacity: 1; transform: scale(1.3); }
  100% { opacity: 1; transform: scale(1); }
}

/* ══════════════════════════════════════════
   v4.43.5 — Exam shortfall banner
   Shown on the exam page when < 90 questions shipped because both the
   generation and the retry-to-fill dropped validated questions. Subtle,
   informational — not an error. User can dismiss.
   ══════════════════════════════════════════ */
.exam-shortfall-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  margin-bottom: 14px;
  background: rgba(251, 191, 36, 0.08);
  border: 1px solid rgba(251, 191, 36, 0.3);
  border-left: 4px solid #fbbf24;
  border-radius: 8px;
  font-size: 13px;
  color: var(--text);
  line-height: 1.5;
}
.exam-shortfall-icon { font-size: 16px; flex-shrink: 0; }
.exam-shortfall-text { flex: 1; }
.exam-shortfall-dismiss {
  background: transparent;
  border: 0;
  color: var(--text-dim);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
  flex-shrink: 0;
}
.exam-shortfall-dismiss:hover { color: var(--text); }
[data-theme="light"] .exam-shortfall-banner {
  background: rgba(202, 138, 4, 0.08);
  border-color: rgba(202, 138, 4, 0.3);
  border-left-color: #ca8a04;
}


/* ═══════════════════════════════════════════════════════════════════
   v4.53.0 — EDITORIAL REDESIGN: Persistent Sidebar + Setup Page Polish
   Shape-of-solution decisions blessed 2026-04-18:
    • Persistent left sidebar (Practice / Drills sections) — replaces
      the old in-page .setup-nav-group across all pages.
    • § 01-04 numbered editorial sections on setup page.
    • Focus banner pullquote with real data + Simi greeting.
    • Vertical-bar domain grid on setup page (clicks via drillDomain).
    • Pass-mark 720 tick on readiness card bar.
    • Both dark + light mode polished equally (matches brand palette).
   ═══════════════════════════════════════════════════════════════════ */

/* ── APP SHELL with persistent sidebar ── */
body.has-sidebar { padding-left: 240px; transition: padding-left .25s cubic-bezier(0.2, 0.8, 0.2, 1); }

.app-sidebar {
  position: fixed;
  top: 0; left: 0;
  width: 240px;
  height: 100vh;
  background: var(--surface2);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: 20px 14px;
  z-index: 100;
  overflow-y: auto;
  transition: transform .3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Brand mark */
.sb-brand {
  display: flex; align-items: center; gap: 10px;
  padding: 0 6px 18px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 14px;
}
/* v4.89.7: brand is now an <a> linking to certanvil.com (back-to-home).
   Override default link styles + add subtle hover affordance. */
.sb-brand-link {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  border-radius: 8px;
  margin: -4px -4px 14px -4px;
  padding: 4px 10px 22px;
  transition: background-color .15s ease;
}
.sb-brand-link:hover {
  background: rgba(var(--accent-rgb), .06);
}
.sb-brand-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.sb-brand-mark {
  width: 34px; height: 34px;
  background: linear-gradient(135deg, #1a1a2e, #0a0a12);
  color: #f0f0f8;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 17px;
  border-radius: 8px;
  letter-spacing: -0.02em;
  box-shadow: 0 4px 12px -3px rgba(0,0,0,.45);
  flex-shrink: 0;
  border: 1px solid var(--border);
  padding: 3px;
}
/* v4.87.4: CertAnvil M14 hammer-and-anvil SVG inside the brand mark.
   Fills the padded container; SVG paths use hardcoded brand colors so
   the mark renders identically across themes (sidebar bg is always dark). */
.sb-brand-mark svg { width: 100%; height: 100%; display: block; }
.sb-brand-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.sb-brand-name { font-size: 14px; font-weight: 800; color: var(--text); letter-spacing: -0.01em; line-height: 1.1; }
/* v4.87.3 — CertAnvil cert sub-line: shows active cert pack (e.g.
   "Network+ N10-009") below the brand name. Smaller + accent-colored. */
.sb-brand-cert { font-size: 11px; font-weight: 600; color: var(--accent-light); letter-spacing: .02em; line-height: 1.25; margin-top: 1px; }
.sb-brand-version { font-size: 10px; font-family: monospace; color: var(--text-dim); letter-spacing: .05em; line-height: 1.2; }

/* Nav sections */
.sb-section { margin-bottom: 18px; }
.sb-section-label {
  font-size: 10px; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-dim);
  padding: 0 10px 6px;
}
/* v4.90.3: sidebar drill placeholder for Security+ (Network+ drills not
   applicable to SY0-701; new SY0-701-specific drills queued). */
.sb-section-drills-coming-soon { opacity: 0.7; }
.sb-drills-placeholder {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px;
  margin: 0 6px;
  background: rgba(var(--accent-rgb), .04);
  border: 1px dashed var(--border);
  border-radius: 8px;
  font-size: 11px;
  color: var(--text-dim);
}
.sb-drills-placeholder-icon { font-size: 14px; flex-shrink: 0; opacity: 0.7; }
.sb-drills-placeholder-text { font-style: italic; }

/* v4.90.3: drills launcher page placeholder (when CURRENT_CERT === 'secplus'). */
/* v4.91.0: Security+ drills launcher tile grid (replaces v4.90.3 single
   placeholder card). Acronym Blitz is the only live tile today; the 4
   "coming soon" tiles are visible-but-disabled to set expectation. */
.secplus-drill-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
  margin-top: 16px;
}
.secplus-drill-tile {
  position: relative;
  display: block;
  padding: 22px 20px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  text-decoration: none;
  color: var(--text);
  transition: border-color .15s ease, transform .1s ease;
}
.secplus-drill-tile:not(.is-coming-soon):hover {
  border-color: var(--accent);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px -8px rgba(var(--accent-rgb), .35);
}
.secplus-drill-tile.is-coming-soon {
  opacity: 0.65;
  cursor: not-allowed;
  border-style: dashed;
}
.secplus-drill-tile-badge {
  position: absolute;
  top: 12px; right: 14px;
  padding: 2px 8px;
  border-radius: 99px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--accent);
  color: #fff;
}
.secplus-drill-tile-badge.is-soon {
  background: var(--surface-3);
  color: var(--text-dim);
  border: 1px solid var(--border-strong);
}
.secplus-drill-tile-icon {
  font-size: 28px;
  margin-bottom: 10px;
}
.secplus-drill-tile-title {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin-bottom: 4px;
  color: var(--text);
}
.secplus-drill-tile-sub {
  font-size: 12px;
  color: var(--text-mid);
  line-height: 1.5;
  margin-bottom: 10px;
}
.secplus-drill-tile-meta {
  font-size: 10px;
  font-family: 'SF Mono', monospace;
  color: var(--text-dim);
}
.sb-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 7px 10px;
  background: transparent;
  border: none;
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px; font-weight: 600;
  color: var(--text-mid);
  cursor: pointer;
  text-align: left;
  transition: background .15s ease, color .15s ease;
  margin-bottom: 1px;
  position: relative;
}
.sb-item:hover { background: rgba(var(--accent-rgb), .07); color: var(--text); }
/* v4.99.28 — focus-visible partner for .sb-item (sidebar nav items). Phase 2
   mobile UX audit. Keyboard users tabbing through the sidebar now see the
   active focus outline; touch + mouse keep their existing hover affordance. */
.sb-item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; background: rgba(var(--accent-rgb), .07); color: var(--text); }
.sb-item.sb-item-active {
  background: rgba(var(--accent-rgb), .14);
  color: var(--accent-light);
  font-weight: 700;
}
.sb-item.sb-item-active::before {
  content: '';
  position: absolute;
  left: 0; top: 6px; bottom: 6px;
  width: 3px;
  background: var(--accent);
  border-radius: 2px;
}
.sb-item-icon { font-size: 14px; line-height: 1; width: 18px; display: inline-flex; justify-content: center; flex-shrink: 0; }
.sb-item-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* v4.99.8 — Pro-only lock indicator on sidebar items. Hidden by default;
   becomes visible only when body.is-state-resolved AND not body.is-pro-tier.
   This means anonymous users + Free users see locks; Pro/admin users don't.
   No locks render during the brief state-hydration window so Pro users don't
   see a flash of locked-then-unlocked UI on initial load. */
.sb-item-lock {
  display: none;
  font-size: 10px;
  line-height: 1;
  opacity: .55;
  flex-shrink: 0;
  margin-left: 6px;
  filter: grayscale(.5);
  transition: opacity .15s ease;
}
body.is-state-resolved:not(.is-pro-tier) .sb-item.is-pro-only .sb-item-lock { display: inline-flex; }
.sb-item.is-pro-only:hover .sb-item-lock { opacity: .9; }
.sb-item-count {
  font-size: 10px; font-family: monospace;
  color: var(--text-dim);
  padding: 1px 6px;
  background: rgba(var(--accent-rgb), .08);
  border: 1px solid rgba(var(--accent-rgb), .16);
  border-radius: 99px;
  flex-shrink: 0;
}

/* Sidebar footer streak badge */
.sb-foot { margin-top: auto; padding: 12px 4px 2px; border-top: 1px solid var(--border); }
.sb-streak {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  background: linear-gradient(135deg, rgba(245, 158, 11, .14), rgba(245, 158, 11, .04));
  border: 1px solid rgba(245, 158, 11, .28);
  border-radius: 10px;
  transition: transform .2s ease, box-shadow .2s ease;
  cursor: default;
}
.sb-streak-active { cursor: pointer; }
.sb-streak-active:hover { transform: translateY(-1px); box-shadow: 0 4px 12px -4px rgba(245, 158, 11, .35); }
.sb-streak-flame { font-size: 22px; filter: drop-shadow(0 2px 4px rgba(245, 158, 11, .35)); }
.sb-streak-text { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }
.sb-streak-num { font-size: 17px; font-weight: 900; color: var(--text); font-variant-numeric: tabular-nums; }
.sb-streak-label { font-size: 10px; color: var(--text-dim); text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
.sb-streak-empty {
  display: block;
  font-size: 11px; color: var(--text-dim);
  text-align: center;
  padding: 10px 8px;
  background: rgba(var(--accent-rgb), .04);
  border: 1px dashed rgba(var(--accent-rgb), .18);
  border-radius: 10px;
  line-height: 1.4;
}

/* Mobile toggle button */
.sb-mobile-toggle {
  position: fixed;
  top: 12px; left: 12px;
  z-index: 101;
  width: 42px; height: 42px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: var(--text);
  box-shadow: 0 4px 12px -2px rgba(0, 0, 0, .15);
  font-family: inherit;
}
.sb-mobile-toggle:hover { background: rgba(var(--accent-rgb), .08); }

/* v4.99.47 Phase 7: lower the mobile-drawer breakpoint from 900 → 767 so
   iPad portrait (768px+) gets the pinned sidebar. Below 768 = phone =
   hamburger drawer. JS counterparts (app.js:18724 + 18741) match. */
@media (max-width: 767px) {
  body.has-sidebar { padding-left: 0; }
  .sb-mobile-toggle { display: flex; }
  .app-sidebar { transform: translateX(-100%); box-shadow: 0 12px 40px -8px rgba(0, 0, 0, .4); transition: transform .25s cubic-bezier(0.23, 1, 0.32, 1); }
  body.sidebar-open .app-sidebar { transform: translateX(0); }
  body.sidebar-open::after {
    content: '';
    position: fixed;
    top: 0; left: 240px; right: 0; bottom: 0;
    background: rgba(0, 0, 0, .5);
    z-index: 99;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
  }
}

/* v4.99.47 Phase 7: tablet portrait block moved to end of file. See
   "TABLET PORTRAIT — Phase 7" section at the bottom of this stylesheet.
   Moved out of this position so it overrides later-in-file rules like
   the second .drills-grid declaration at line ~12318. */

/* v4.81.23: legacy v4.53.0 .focus-banner CSS retired — the element was
   replaced by .focus-banner-v2 in v4.54.0, retired in v4.81.20, removed
   entirely in v4.81.23 cleanup pass. */

/* ── § 01-04 NUMBERED EDITORIAL SECTIONS ── */
.ed-section { margin-top: 26px; }
.ed-section:first-of-type { margin-top: 20px; }
.ed-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px dashed rgba(var(--accent-rgb), .22);
}
.ed-section-head-left { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ed-section-num {
  font-size: 11px;
  font-family: monospace;
  color: var(--accent-light);
  letter-spacing: .08em;
  font-weight: 700;
}
.ed-section-title {
  font-size: 20px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.015em;
  line-height: 1.1;
  margin: 0;
}
.ed-section-title em { font-style: normal; color: var(--accent-light); font-weight: 700; }
.ed-section-meta {
  font-size: 11px;
  color: var(--text-dim);
  letter-spacing: .02em;
  text-align: right;
  white-space: nowrap;
}

@media (max-width: 560px) {
  .ed-section-meta { display: none; }
}

/* ── READINESS PASS-MARK TICK ── */
.readiness-card { padding-top: 22px; padding-bottom: 26px; }
.readiness-bar-wrap {
  position: relative;
  overflow: visible;  /* let tick labels protrude */
  height: 8px;
}
.readiness-pass-tick {
  position: absolute;
  top: -3px; bottom: -3px;
  width: 2px;
  background: var(--text-dim);
  opacity: .55;
  border-radius: 1px;
  pointer-events: none;
}
.readiness-pass-tick::before {
  content: '720';
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 9px;
  font-family: monospace;
  color: var(--text-dim);
  font-weight: 700;
  letter-spacing: .04em;
  background: var(--surface);
  padding: 0 3px;
  border-radius: 3px;
  white-space: nowrap;
}
.readiness-pass-tick::after {
  content: 'PASS';
  position: absolute;
  bottom: -14px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 8px;
  font-family: monospace;
  color: var(--accent-light);
  font-weight: 800;
  letter-spacing: .08em;
  white-space: nowrap;
}

/* ── VERTICAL-BAR DOMAIN GRID (setup page § 03) ── */
.domain-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}
.domain-cell {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 12px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  transition: transform .2s cubic-bezier(0.2, 0.8, 0.2, 1), border-color .2s ease, box-shadow .2s ease;
  position: relative;
  overflow: hidden;
  min-height: 180px;
  font-family: inherit;
  color: inherit;
  text-align: left;
}
.domain-cell[data-domain-idx="1"] { border-top: 3px solid #7c6ff7; }
.domain-cell[data-domain-idx="2"] { border-top: 3px solid #22c55e; }
.domain-cell[data-domain-idx="3"] { border-top: 3px solid #3b82f6; }
.domain-cell[data-domain-idx="4"] { border-top: 3px solid #f59e0b; }
.domain-cell[data-domain-idx="5"] { border-top: 3px solid #ef4444; }
.domain-cell:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 22px -6px rgba(var(--accent-rgb), .22);
  border-color: rgba(var(--accent-rgb), .35);
}

.dg-bar-col {
  width: 100%;
  height: 64px;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  position: relative;
  margin-top: 2px;
}
.dg-bar {
  width: 22px;
  min-height: 4px;
  border-radius: 5px 5px 0 0;
  transition: height 800ms cubic-bezier(0.2, 0.8, 0.2, 1);
  box-shadow: 0 -4px 10px -2px currentColor;
  position: relative;
}
.domain-cell[data-domain-idx="1"] .dg-bar { background: linear-gradient(180deg, #a78bfa, #7c6ff7); color: rgba(124, 111, 247, .35); }
.domain-cell[data-domain-idx="2"] .dg-bar { background: linear-gradient(180deg, #4ade80, #22c55e); color: rgba(34, 197, 94, .35); }
.domain-cell[data-domain-idx="3"] .dg-bar { background: linear-gradient(180deg, #60a5fa, #3b82f6); color: rgba(59, 130, 246, .35); }
.domain-cell[data-domain-idx="4"] .dg-bar { background: linear-gradient(180deg, #fbbf24, #f59e0b); color: rgba(245, 158, 11, .35); }
.domain-cell[data-domain-idx="5"] .dg-bar { background: linear-gradient(180deg, #f87171, #ef4444); color: rgba(239, 68, 68, .35); }

.dg-weight {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 9px;
  font-family: monospace;
  color: var(--text-dim);
  letter-spacing: .06em;
  font-weight: 700;
  background: rgba(var(--accent-rgb), .08);
  border: 1px solid rgba(var(--accent-rgb), .18);
  padding: 2px 6px;
  border-radius: 99px;
}
.dg-num {
  font-size: 10.5px;
  font-family: monospace;
  font-weight: 700;
  color: var(--text-dim);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.dg-name {
  font-size: 12.5px;
  font-weight: 800;
  color: var(--text);
  line-height: 1.25;
  letter-spacing: -0.005em;
  margin-top: 2px;
}
.dg-pct-wrap {
  display: flex;
  align-items: baseline;
  gap: 3px;
  margin-top: auto;
}
.dg-pct {
  font-size: 24px;
  font-weight: 900;
  color: var(--text);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.dg-pct-sub { font-size: 11px; color: var(--text-dim); font-weight: 700; }
.dg-status {
  font-size: 9.5px;
  font-weight: 700;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-top: 2px;
}

@media (max-width: 900px) { .domain-grid { grid-template-columns: repeat(5, 1fr); gap: 8px; } .domain-cell { min-height: 160px; padding: 12px 10px; } }
@media (max-width: 680px) { .domain-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 420px) { .domain-grid { grid-template-columns: repeat(2, 1fr); } }

/* ── REDUCED MOTION ── */
@media (prefers-reduced-motion: reduce) {
  .app-sidebar, .sb-item, .sb-streak,
  .domain-cell, .dg-bar,
  body.has-sidebar {
    transition: none !important;
    animation: none !important;
  }
  .sb-streak:hover, .domain-cell:hover { transform: none !important; }
  /* v4.81.23: .focus-banner + .focus-cta retired (element removed) */
}

/* ── LIGHT-THEME OVERRIDES ── */
[data-theme="light"] .app-sidebar {
  background: #F5F4FB;
  border-right-color: rgba(99, 85, 224, .16);
}
[data-theme="light"] .sb-brand-mark {
  background: linear-gradient(135deg, #6355e0, #8b7af5);
  box-shadow: 0 4px 12px -3px rgba(99, 85, 224, .4);
}
[data-theme="light"] .sb-item:hover { background: rgba(99, 85, 224, .06); color: #1a1820; }
[data-theme="light"] .sb-item.sb-item-active { background: rgba(99, 85, 224, .14); color: #6355e0; }
[data-theme="light"] .sb-item.sb-item-active::before { background: #6355e0; }
[data-theme="light"] .sb-item-count {
  background: rgba(99, 85, 224, .08);
  border-color: rgba(99, 85, 224, .2);
}
[data-theme="light"] .sb-streak {
  background: linear-gradient(135deg, rgba(217, 119, 6, .12), rgba(217, 119, 6, .03));
  border-color: rgba(217, 119, 6, .28);
}
/* v4.81.23: light-theme .focus-banner + .focus-quote-mark + .focus-cta
   + .focus-text overrides retired (element removed in v4.81.23 cleanup). */
[data-theme="light"] .ed-section-head { border-bottom-color: rgba(99, 85, 224, .24); }
[data-theme="light"] .ed-section-num,
[data-theme="light"] .ed-section-title em,
[data-theme="light"] .readiness-pass-tick::after { color: #6355e0; }
[data-theme="light"] .dg-weight { background: rgba(99, 85, 224, .08); border-color: rgba(99, 85, 224, .2); }
[data-theme="light"] .sb-mobile-toggle {
  background: #fff;
  box-shadow: 0 4px 12px -2px rgba(0, 0, 0, .1);
}
[data-theme="light"] .sb-mobile-toggle:hover { background: rgba(99, 85, 224, .06); }

/* ═══════════════════════════════════════════════════════════════════
   v4.54.0 — Editorial hero + collapsible sidebar + top bar
   User saw a mockup screenshot and said "i want this exact layout".
   Spec:
    • Persistent top bar across all pages — breadcrumb + time + gear +
      theme + avatar + sidebar toggle.
    • Setup hero: giant 3-line display heading (left) + dark compact
      readiness card + 2 mini-cards (right aside).
    • Full-width purple-gradient focus banner with giant quote mark.
    • Sidebar collapsible via top-bar toggle, state persisted.
   ═══════════════════════════════════════════════════════════════════ */

/* ── TOP BAR ── */
.app-topbar {
  position: sticky;
  top: 0;
  z-index: 95;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 22px;
  background: var(--surface2);
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  min-height: 48px;
}
.topbar-left { display: flex; align-items: center; gap: 14px; min-width: 0; }
.topbar-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.topbar-toggle {
  width: 30px; height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 7px;
  cursor: pointer;
  font-size: 16px;
  color: var(--text-mid);
  transition: background .15s ease, border-color .15s ease, color .15s ease;
  font-family: inherit;
}
.topbar-toggle:hover { background: rgba(var(--accent-rgb), .08); color: var(--accent-light); border-color: rgba(var(--accent-rgb), .2); }
.topbar-crumb {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.topbar-time {
  font-family: monospace;
  font-size: 11.5px;
  color: var(--text-dim);
  letter-spacing: .08em;
  font-variant-numeric: tabular-nums;
}
/* v4.89.7: visible version pill in topbar — same accent-purple treatment
   as the landing footer .foot-version. Hidden on narrow screens where the
   sidebar's .sb-brand-version is enough. */
.topbar-version-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 99px;
  background: rgba(var(--accent-rgb), .10);
  border: 1px solid rgba(var(--accent-rgb), .28);
  color: var(--accent-light);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .04em;
  font-family: monospace;
  user-select: none;
  cursor: pointer;  /* triple-tap opens prod monitor (initMonitorGesture) */
}
@media (max-width: 720px) {
  .topbar-version-pill { display: none; }
}
.topbar-iconbtn {
  width: 30px; height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 7px;
  cursor: pointer;
  font-size: 15px;
  color: var(--text-mid);
  transition: background .15s ease, border-color .15s ease, color .15s ease;
  font-family: inherit;
}
.topbar-iconbtn:hover { background: rgba(var(--accent-rgb), .08); color: var(--accent-light); border-color: rgba(var(--accent-rgb), .2); }
.topbar-avatar {
  width: 30px; height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--accent), var(--accent-light));
  color: #fff;
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-size: 15px;
  font-weight: 500;
  border-radius: 50%;
  box-shadow: 0 3px 8px -2px rgba(var(--accent-rgb), .4);
  flex-shrink: 0;
  cursor: default;
  user-select: none;
}

/* ── SIDEBAR COLLAPSE ── */
body.sidebar-collapsed { padding-left: 0 !important; }
body.sidebar-collapsed .app-sidebar { transform: translateX(-100%); }
.app-sidebar { transition: transform .3s cubic-bezier(0.2, 0.8, 0.2, 1); }
/* Sidebar-top header: brand + internal collapse button */
.sb-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 2px 18px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 14px;
}
.sb-head .sb-brand { padding: 0; border-bottom: none; margin-bottom: 0; flex: 1; min-width: 0; }
.sb-collapse-btn {
  width: 28px; height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text-mid);
  transition: background .15s ease, border-color .15s ease, color .15s ease;
  font-family: inherit;
  flex-shrink: 0;
}
.sb-collapse-btn:hover { background: rgba(var(--accent-rgb), .08); color: var(--accent-light); border-color: rgba(var(--accent-rgb), .2); }

/* ── SETUP HERO v2 (display heading + aside) ── */
/* v4.85.27 — Pass-proof banner. First-time-visitor trust signal per
   cert_mode_launch_checklist.md Day 1 #3 post-pass action. Sits at the
   very top of #page-setup, above the hero. Subtle green-accent gradient
   pill — visible without dominating, scans in <1s. */
.pass-proof-banner {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 8px 4px 0;
  padding: 8px 16px;
  background: linear-gradient(135deg, rgba(34,197,94,.10) 0%, rgba(124,111,247,.06) 100%);
  border: 1px solid rgba(34,197,94,.32);
  border-radius: 99px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-mid);
  max-width: 100%;
}
.pass-proof-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  flex-shrink: 0;
  background: var(--green);
  color: #fff;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 800;
  box-shadow: 0 0 0 3px rgba(34,197,94,.18);
}
.pass-proof-text strong {
  color: var(--text);
  font-weight: 700;
}
.pass-proof-text em {
  font-style: normal;
  color: var(--accent-light);
  font-weight: 600;
}
@media (max-width: 540px) {
  .pass-proof-banner {
    display: flex;
    margin: 8px 0 0;
    font-size: 12px;
    padding: 8px 12px;
  }
  .pass-proof-icon { width: 20px; height: 20px; font-size: 11px; }
}
[data-theme="light"] .pass-proof-banner {
  background: linear-gradient(135deg, rgba(34,197,94,.08) 0%, rgba(124,111,247,.04) 100%);
  border-color: rgba(34,197,94,.36);
}

/* v4.87.0 — Security+ private-mode banner. Mirror of pass-proof-banner
   styling but with orange/amber palette (different vibe — "private dev
   tool" rather than "customer trust signal"). Visibility controlled by
   [data-cert] attribute on <html> (set in inline <head> detectCert script). */
.secplus-private-banner {
  display: none; /* hidden by default — only shown in Security+ mode */
  align-items: center;
  gap: 10px;
  margin: 8px 4px 0;
  padding: 8px 16px;
  background: linear-gradient(135deg, rgba(245,158,11,.10) 0%, rgba(124,111,247,.06) 100%);
  border: 1px solid rgba(245,158,11,.32);
  border-radius: 99px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-mid);
  max-width: 100%;
}
.secplus-private-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  flex-shrink: 0;
  background: var(--orange);
  color: #fff;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 800;
  box-shadow: 0 0 0 3px rgba(245,158,11,.18);
}
.secplus-private-text strong {
  color: var(--text);
  font-weight: 700;
}
.secplus-private-text em {
  font-style: normal;
  color: var(--orange);
  font-weight: 600;
}

/* Cert-mode visibility: show Security+ banner / hide Network+ pass-proof
   when [data-cert="secplus"] is set on <html>. Inline script in <head>
   sets the attribute synchronously so the right banner paints first. */
[data-cert="secplus"] .pass-proof-banner { display: none; }
[data-cert="secplus"] .secplus-private-banner { display: inline-flex; }

@media (max-width: 540px) {
  .secplus-private-banner {
    margin: 8px 0 0;
    font-size: 12px;
    padding: 8px 12px;
  }
  [data-cert="secplus"] .secplus-private-banner { display: flex; }
  .secplus-private-icon { width: 20px; height: 20px; font-size: 11px; }
}
[data-theme="light"] .secplus-private-banner {
  background: linear-gradient(135deg, rgba(245,158,11,.08) 0%, rgba(124,111,247,.04) 100%);
  border-color: rgba(245,158,11,.36);
}

.setup-hero-v2 {
  display: grid;
  grid-template-columns: 1.45fr 1fr;
  gap: 28px;
  align-items: start;
  padding: 28px 4px 8px;
  margin-bottom: 14px;
}
.hero-v2-main { min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.hero-v2-eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-family: monospace;
  color: var(--accent-light);
  letter-spacing: .15em;
  text-transform: uppercase;
  font-weight: 700;
}
.hero-v2-eyebrow::before {
  content: '';
  width: 18px;
  height: 1px;
  background: var(--accent);
  opacity: .6;
}
.hero-v2-display {
  font-size: 64px;
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.04em;
  color: var(--text);
  margin: 0;
  text-wrap: balance;
}
.hero-v2-display .name {
  color: var(--accent-light);
  font-weight: 800;
}
.hero-v2-lede {
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-mid);
  max-width: 480px;
  margin: 0;
}
.hero-v2-lede strong {
  color: var(--accent-light);
  font-weight: 700;
}

/* Aside grid: readiness card on top, 2 mini cards below */
.hero-v2-aside {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.readiness-card-v2 {
  position: relative;
  background: linear-gradient(160deg, #16131f, #0d0a15);
  border: 1px solid rgba(var(--accent-rgb), .2);
  border-radius: 14px;
  padding: 18px 20px 16px;
  color: #fafaff;
  overflow: hidden;
  box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .5);
}
.readiness-card-v2::before {
  content: '';
  position: absolute;
  top: -30%; right: -30%;
  width: 140%; height: 140%;
  background: radial-gradient(circle at 30% 30%, rgba(var(--accent-rgb), .18), transparent 55%);
  pointer-events: none;
}
.rc-v2-label {
  position: relative;
  font-size: 10px;
  font-family: monospace;
  color: rgba(250, 250, 255, .55);
  letter-spacing: .15em;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 6px;
}
.rc-v2-score {
  position: relative;
  font-size: 56px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: #fff;
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.rc-v2-score .of {
  font-size: 17px;
  color: rgba(250, 250, 255, .5);
  font-weight: 600;
  letter-spacing: 0;
}
.rc-v2-bar {
  position: relative;
  height: 6px;
  background: rgba(255, 255, 255, .08);
  border-radius: 99px;
  margin: 12px 0 10px;
  overflow: visible;
}
.rc-v2-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--citron, #f59e0b), #fbbf24);
  border-radius: 99px;
  transition: width .8s cubic-bezier(0.2, 0.8, 0.2, 1);
  box-shadow: 0 0 10px rgba(245, 158, 11, .5);
}
.rc-v2-pass-tick {
  position: absolute;
  top: -3px; bottom: -3px;
  left: 62.5%;
  width: 2px;
  background: rgba(255, 255, 255, .35);
  border-radius: 1px;
}
.rc-v2-foot {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  color: rgba(250, 250, 255, .65);
  font-family: monospace;
  letter-spacing: .03em;
}
.rc-v2-delta { color: var(--citron, #f59e0b); font-weight: 700; }

/* v4.73.0: prediction line inside the dark Hero V2 readiness card.
 * Sits between the score and the bar. Compact, monospace.
 */
.rc-v2-prediction {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: monospace;
  font-size: 11px;
  letter-spacing: 0.04em;
  margin: 6px 0 10px;
  padding: 6px 10px;
  background: rgba(255, 255, 255, 0.06);
  border-left: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 3px;
  gap: 8px;
}
.rc-v2-prediction .prob { font-weight: 700; }
.rc-v2-prediction .prob.high { color: #4ade80; }
.rc-v2-prediction .prob.med { color: #fbbf24; }
.rc-v2-prediction .prob.low { color: #f87171; }
.rc-v2-prediction .ci {
  color: rgba(250, 250, 255, 0.55);
  font-size: 10px;
  white-space: nowrap;
}

/* v4.73.0: what-if chips below the dark card. Lives in the hero aside,
 * styled to look like a connected continuation of the readiness card. */
.rc-v2-whatif {
  margin-top: 10px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
}
.rc-v2-whatif-label {
  font-family: var(--font-mono, monospace);
  font-size: 10px;
  color: var(--text-dim);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 8px;
}
.rc-v2-whatif-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.rc-v2-whatif-chip {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: rgba(124, 111, 247, 0.10);
  border: 1px solid rgba(124, 111, 247, 0.32);
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
  color: var(--text);
  font-family: inherit;
  text-align: left;
}
.rc-v2-whatif-chip:hover {
  background: rgba(124, 111, 247, 0.20);
  border-color: var(--accent);
  transform: translateX(2px);
}
.rc-v2-whatif-chip .pts {
  color: var(--green);
  font-weight: 700;
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  white-space: nowrap;
}
.rc-v2-whatif-chip .topic {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rc-v2-whatif-chip .delta {
  color: var(--text-dim);
  font-size: 10px;
  font-family: var(--font-mono, monospace);
  white-space: nowrap;
}

/* v4.73.0: trajectory line below the what-if chips */
.rc-v2-trajectory {
  margin-top: 8px;
  padding: 7px 12px;
  font-size: 11px;
  font-family: var(--font-mono, monospace);
  color: var(--text-dim);
  border-radius: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
}
.rc-v2-trajectory strong { color: var(--text); }
.rc-v2-trajectory.warn {
  color: var(--orange, #fb923c);
  background: rgba(251, 146, 60, 0.10);
  border-color: rgba(251, 146, 60, 0.32);
}
.rc-v2-trajectory.warn strong { color: var(--orange, #fb923c); }
.rc-v2-trajectory.mid {
  color: var(--yellow, #fbbf24);
  background: rgba(251, 191, 36, 0.10);
  border-color: rgba(251, 191, 36, 0.32);
}
.rc-v2-trajectory.mid strong { color: var(--yellow, #fbbf24); }
.rc-v2-trajectory.good {
  color: var(--green, #4ade80);
  background: rgba(34, 197, 94, 0.10);
  border-color: rgba(34, 197, 94, 0.32);
}
.rc-v2-trajectory.good strong { color: var(--green, #4ade80); }

@media (prefers-reduced-motion: reduce) {
  .rc-v2-whatif-chip { transition: none !important; }
  .rc-v2-whatif-chip:hover { transform: none !important; }
}
.rc-v2-empty {
  position: relative;
  font-size: 13px;
  color: rgba(250, 250, 255, .7);
  line-height: 1.5;
  margin-top: 6px;
}

/* Mini cards row (Today + Streak) */
.hero-v2-mini-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.mini-card-v2 {
  background: rgba(var(--accent-rgb), .04);
  border: 1px solid rgba(var(--accent-rgb), .14);
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mini-card-v2-label {
  font-size: 10px;
  font-family: monospace;
  color: var(--text-dim);
  letter-spacing: .15em;
  text-transform: uppercase;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
}
.mini-card-v2-val {
  font-size: 24px;
  font-weight: 800;
  color: var(--text);
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.mini-card-v2-val .mini-sub {
  font-size: 13px;
  color: var(--text-dim);
  font-weight: 600;
  margin-left: 4px;
}
.mini-card-v2-sub {
  font-size: 11px;
  color: var(--text-dim);
  letter-spacing: .02em;
  font-weight: 500;
  margin-top: 2px;
}

/* v4.81.23: legacy .focus-banner-v2 + .focus-banner + all .fb-* classes
   retired. The v4.54.0 focus banner was retired in v4.81.20 (function
   became compat shim) and the DOM element + CSS are now removed in v4.81.23.
   The consolidated #today-plan card replaces this surface entirely. */

/* Hide legacy hero elements when v2 hero is active */
body.hero-v2-active #page-setup .hero,
body.hero-v2-active #page-setup #readiness-card,
body.hero-v2-active #page-setup .today-section .daily-goal-card,
body.hero-v2-active #page-setup #streak-badge { display: none !important; }

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
  .setup-hero-v2 { grid-template-columns: 1fr; gap: 18px; }
  .hero-v2-display { font-size: 46px; }
  .app-topbar { padding: 10px 16px; }
}
@media (max-width: 680px) {
  .hero-v2-display { font-size: 38px; }
  .hero-v2-mini-row { grid-template-columns: 1fr; }
  /* v4.81.23: .focus-banner-v2 mobile rules retired (element removed). */
}
@media (max-width: 540px) {
  .topbar-time { display: none; }
  .hero-v2-display { font-size: 32px; }
}

/* ── REDUCED MOTION ── */
@media (prefers-reduced-motion: reduce) {
  .app-sidebar,
  .topbar-toggle, .topbar-iconbtn,
  .sb-collapse-btn,
  .rc-v2-bar-fill {
    transition: none !important;
  }
  /* v4.81.23: .focus-banner-v2 reduced-motion rules retired (element removed). */
}

/* ── LIGHT-THEME OVERRIDES ── */
[data-theme="light"] .app-topbar {
  background: #F5F4FB;
  border-bottom-color: rgba(99, 85, 224, .16);
}
[data-theme="light"] .topbar-toggle:hover,
[data-theme="light"] .topbar-iconbtn:hover {
  background: rgba(99, 85, 224, .08);
  color: #6355e0;
  border-color: rgba(99, 85, 224, .22);
}
[data-theme="light"] .sb-collapse-btn:hover {
  background: rgba(99, 85, 224, .08);
  color: #6355e0;
  border-color: rgba(99, 85, 224, .22);
}
[data-theme="light"] .topbar-avatar {
  background: linear-gradient(135deg, #6355e0, #8b7af5);
  box-shadow: 0 3px 8px -2px rgba(99, 85, 224, .4);
}
[data-theme="light"] .hero-v2-display { color: #1f1b2e; }
[data-theme="light"] .hero-v2-display .name { color: #6355e0; }
[data-theme="light"] .hero-v2-eyebrow { color: #6355e0; }
[data-theme="light"] .hero-v2-eyebrow::before { background: #6355e0; }
[data-theme="light"] .hero-v2-lede { color: #4b4560; }
[data-theme="light"] .hero-v2-lede strong { color: #6355e0; }
[data-theme="light"] .mini-card-v2 {
  background: rgba(99, 85, 224, .04);
  border-color: rgba(99, 85, 224, .14);
}
[data-theme="light"] .mini-card-v2-val { color: #1f1b2e; }
/* v4.81.23: light-theme .focus-banner-v2 + .fb-cta overrides retired
   (element removed in v4.81.23 cleanup). */
/* Readiness card stays dark in both modes — that's the design intent from the mockup */

/* ═══════════════════════════════════════════════════════════════════
   v4.54.1 — Settings page + Recent Performance moved to Analytics
   ═══════════════════════════════════════════════════════════════════ */

/* Settings page — 3 stacked cards with consistent section styling */
#page-settings { max-width: 720px; }
.settings-layout { display: flex; flex-direction: column; gap: 14px; }
.settings-section { padding: 20px 22px; }
.settings-section-title {
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-mid);
  margin: 0 0 12px;
}
.settings-section-hint {
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.5;
  margin-top: 8px;
}
#page-settings #api-key {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface2);
  color: var(--text);
  font-family: monospace;
  font-size: 13px;
}
#page-settings #api-key:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .18);
}

/* ═══════════════════════════════════════════════════════════════════
   v4.85.14 — "Why your score?" breakdown card (Analytics)
   Sits directly under the Exam Readiness card. 4 component bars + a
   plain-English diagnosis + 2 click-through action cards. Reuses the
   readiness formula data — no new state. Ported from the
   readiness-why-card-concept.html mockup approved 2026-05-01.
   ═══════════════════════════════════════════════════════════════════ */
.ana-card.ana-why-score {
  grid-column: 1 / -1;
  padding: 24px 28px;
}
.ana-why-score .why-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 20px;
}
.ana-why-score .why-eyebrow {
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--text-dim);
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 6px;
}
.ana-why-score .why-title {
  font-size: 22px;
  font-weight: 800;
  color: var(--text);
  margin: 0;
}
.ana-why-score .why-title em {
  font-style: normal;
  color: var(--accent);
}
.ana-why-score .why-sub {
  font-size: 13px;
  color: var(--text-dim);
  margin-top: 6px;
}
.ana-why-score .why-gap-pill {
  background: rgba(251, 146, 60, .14);
  border: 1px solid rgba(251, 146, 60, .35);
  color: var(--orange);
  font-weight: 700;
  font-size: 13px;
  padding: 8px 14px;
  border-radius: 999px;
  white-space: nowrap;
}
.ana-why-score .why-gap-pill::before { content: '⚠️ '; }
.ana-why-score .why-gap-pill.is-passing {
  background: rgba(34, 197, 94, .14);
  border-color: rgba(34, 197, 94, .35);
  color: var(--green);
}
.ana-why-score .why-gap-pill.is-passing::before { content: '✓ '; }
.ana-why-score .why-section-label {
  font-size: 11px;
  letter-spacing: .12em;
  color: var(--text-dim);
  text-transform: uppercase;
  font-weight: 700;
  margin: 22px 0 12px;
}
.ana-why-score .why-bars {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ana-why-score .why-bar-row {
  display: grid;
  grid-template-columns: 200px 1fr 70px;
  align-items: center;
  gap: 14px;
}
.ana-why-score .why-bar-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ana-why-score .why-bar-name {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text);
}
.ana-why-score .why-bar-meta {
  font-size: 10.5px;
  color: var(--text-dim);
  letter-spacing: .03em;
}
.ana-why-score .why-bar-track {
  position: relative;
  height: 12px;
  background: var(--surface3);
  border-radius: 999px;
  overflow: hidden;
}
.ana-why-score .why-bar-fill {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: 999px;
  transition: width .6s cubic-bezier(.2, .8, .2, 1);
}
.ana-why-score .why-bar-fill.tier-good     { background: var(--green); }
.ana-why-score .why-bar-fill.tier-ok       { background: var(--accent); }
.ana-why-score .why-bar-fill.tier-low      { background: var(--orange); }
.ana-why-score .why-bar-fill.tier-critical { background: var(--red, #f87171); }
.ana-why-score .why-bar-pct {
  text-align: right;
  font-weight: 800;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.ana-why-score .why-bar-pct.is-low      { color: var(--orange); }
.ana-why-score .why-bar-pct.is-critical { color: var(--red, #f87171); }
.ana-why-score .why-diagnosis {
  margin-top: 22px;
  padding: 14px 18px;
  background: rgba(251, 146, 60, .08);
  border-left: 3px solid var(--orange);
  border-radius: 8px;
}
.ana-why-score .why-diagnosis-head {
  font-size: 11px;
  letter-spacing: .12em;
  color: var(--orange);
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 6px;
}
.ana-why-score .why-diagnosis-body {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text);
}
.ana-why-score .why-diagnosis-body strong { color: var(--orange); }
.ana-why-score .why-actions { margin-top: 22px; }
.ana-why-score .why-action-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.ana-why-score .why-action-card {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 18px;
  cursor: pointer;
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
  font-family: inherit;
  color: inherit;
}
.ana-why-score .why-action-card:hover {
  transform: translateY(-2px);
  border-color: rgba(124, 111, 247, .35);
  background: var(--surface3);
}
.ana-why-score .why-action-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.ana-why-score .why-action-card.is-primary {
  border-color: rgba(251, 146, 60, .4);
  background: linear-gradient(135deg, rgba(251, 146, 60, .10), rgba(251, 146, 60, .02));
}
.ana-why-score .why-action-card.is-primary:hover {
  border-color: rgba(251, 146, 60, .65);
}
.ana-why-score .why-action-card.is-disabled {
  opacity: .55;
  cursor: default;
}
.ana-why-score .why-action-card.is-disabled:hover {
  transform: none;
  border-color: var(--border);
  background: var(--surface2);
}
.ana-why-score .why-action-eyebrow {
  font-size: 10px;
  letter-spacing: .14em;
  color: var(--text-dim);
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 4px;
}
.ana-why-score .why-action-card.is-primary .why-action-eyebrow { color: var(--orange); }
.ana-why-score .why-action-title {
  font-size: 15px;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 6px;
}
.ana-why-score .why-action-body {
  font-size: 12.5px;
  color: var(--text-mid);
  line-height: 1.45;
  margin-bottom: 10px;
}
.ana-why-score .why-action-cta {
  font-size: 12.5px;
  color: var(--accent);
  font-weight: 700;
}
.ana-why-score .why-action-card.is-primary .why-action-cta { color: var(--orange); }
.ana-why-score .why-foot {
  margin-top: 18px;
  font-size: 11.5px;
  color: var(--text-dim);
  font-style: italic;
  text-align: center;
}
@media (prefers-reduced-motion: reduce) {
  .ana-why-score .why-bar-fill,
  .ana-why-score .why-action-card { transition: none; }
}
@media (max-width: 720px) {
  .ana-card.ana-why-score { padding: 18px 16px; }
  .ana-why-score .why-head { flex-direction: column; align-items: flex-start; }
  .ana-why-score .why-bar-row { grid-template-columns: 130px 1fr 50px; gap: 10px; }
  .ana-why-score .why-bar-name { font-size: 12.5px; }
  .ana-why-score .why-bar-meta { font-size: 9.5px; }
  .ana-why-score .why-action-row { grid-template-columns: 1fr; }
  .ana-why-score .why-title { font-size: 19px; }
}

/* ═══════════════════════════════════════════════════════════════════
   v4.54.2 — Knowledge Constellation (Analytics)
   Topics as floating SVG nodes clustered by domain, sized by practice,
   inner core sized + colored by mastery. Ported from the Claude Design
   prototype with our 5-domain palette (purple / green / blue / amber /
   red) instead of the prototype's traffic-light tiers.
   ═══════════════════════════════════════════════════════════════════ */

.ana-constellation { padding: 22px 24px 20px; }
.ana-constellation .ana-card-head { margin-bottom: 14px; }
.ana-constellation h3 { font-size: 17px; font-weight: 800; letter-spacing: -0.005em; margin: 0 0 4px; }
.ana-constellation h3 em { font-style: normal; color: var(--accent-light); font-weight: 800; }
.ana-constellation .ana-card-sub { font-size: 11.5px; color: var(--text-dim); font-family: monospace; letter-spacing: .02em; }

/* SVG container with subtle starfield background */
.ana-const-map {
  position: relative;
  width: 100%;
  margin: 6px 0 10px;
  border-radius: 14px;
  padding: 16px 12px;
  background:
    radial-gradient(circle at 20% 30%, rgba(124, 111, 247, .04), transparent 50%),
    radial-gradient(circle at 70% 60%, rgba(59, 130, 246, .04), transparent 50%),
    radial-gradient(circle at 90% 25%, rgba(239, 68, 68, .04), transparent 50%),
    linear-gradient(160deg, rgba(var(--accent-rgb), .03), rgba(var(--accent-rgb), .01));
  border: 1px solid rgba(var(--accent-rgb), .16);
  overflow: hidden;
}
.ana-const-svg {
  width: 100%;
  height: auto;
  display: block;
  font-family: inherit;
}

/* Cluster header labels — editorial small-caps */
.ana-const-cluster-num {
  font-size: 9px;
  font-family: monospace;
  letter-spacing: .18em;
  fill: var(--text-dim);
  font-weight: 700;
  opacity: .7;
  text-transform: uppercase;
}
.ana-const-cluster-name {
  font-size: 12px;
  fill: var(--text);
  font-weight: 700;
  letter-spacing: -0.005em;
}

/* Tether lines — faint connector from cluster anchor to each node */
.ana-const-tether {
  stroke: var(--border);
  stroke-width: 0.5;
  opacity: .4;
  pointer-events: none;
}

/* Nodes: outer halo + inner core */
.ana-const-node { cursor: pointer; transition: transform .2s cubic-bezier(0.2, 0.8, 0.2, 1); transform-origin: center; transform-box: fill-box; }
.ana-const-node:hover,
.ana-const-node:focus { outline: none; }
.ana-const-node:hover .ana-const-halo,
.ana-const-node:focus .ana-const-halo {
  opacity: .55;
  filter: drop-shadow(0 0 8px currentColor);
}
.ana-const-node:hover .ana-const-core,
.ana-const-node:focus .ana-const-core {
  filter: drop-shadow(0 0 6px currentColor) brightness(1.2);
}

.ana-const-halo {
  opacity: .22;
  transition: opacity .2s ease, filter .2s ease;
}
.ana-const-core {
  transition: filter .2s ease;
}

/* Domain palette — halo + core share the tier color per cluster */
.ana-const-node[data-domain-idx="1"] { color: #7c6ff7; }
.ana-const-node[data-domain-idx="2"] { color: #22c55e; }
.ana-const-node[data-domain-idx="3"] { color: #3b82f6; }
.ana-const-node[data-domain-idx="4"] { color: #f59e0b; }
.ana-const-node[data-domain-idx="5"] { color: #ef4444; }

.ana-const-node .ana-const-halo { fill: currentColor; }
.ana-const-node .ana-const-core { fill: currentColor; }

/* Tier-based brightness — mastered = full brightness, novice = dimmed */
.ana-const-node.ana-const-tier-mastered .ana-const-core { filter: brightness(1.25) drop-shadow(0 0 4px currentColor); }
.ana-const-node.ana-const-tier-mastered .ana-const-halo { opacity: .4; }
.ana-const-node.ana-const-tier-proficient .ana-const-core { filter: brightness(1.1); }
.ana-const-node.ana-const-tier-proficient .ana-const-halo { opacity: .3; }
.ana-const-node.ana-const-tier-developing .ana-const-core { opacity: .85; }
.ana-const-node.ana-const-tier-developing .ana-const-halo { opacity: .22; }
.ana-const-node.ana-const-tier-novice .ana-const-core { opacity: .45; }
.ana-const-node.ana-const-tier-novice .ana-const-halo { opacity: .15; }

/* Legend: tier dots below the map */
.ana-const-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 8px;
  padding: 0 4px;
}
.ana-const-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  color: var(--text-dim);
  font-family: monospace;
  letter-spacing: .02em;
  font-weight: 600;
}
/* v4.85.10: legend dots now use a neutral base color and differentiate via
   opacity + glow only — matches the chart's actual encoding (color = domain,
   brightness = mastery). Pre-fix the legend used green/purple/yellow/gray
   which clashed with the domain colors (Domain 2 = green, Domain 1 = purple,
   Domain 4 = orange) and made the legend impossible to map onto the chart. */
.ana-const-legend-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--text);
  color: var(--text);
}
.ana-const-legend-dot.ana-const-tier-mastered { opacity: 1; box-shadow: 0 0 6px currentColor; }
.ana-const-legend-dot.ana-const-tier-proficient { opacity: .85; box-shadow: 0 0 3px currentColor; }
.ana-const-legend-dot.ana-const-tier-developing { opacity: .55; box-shadow: none; }
.ana-const-legend-dot.ana-const-tier-novice { opacity: .3; box-shadow: none; }

.ana-const-hint {
  font-size: 10.5px;
  color: var(--text-dim);
  font-style: italic;
  margin-top: 6px;
  padding: 0 4px;
}

/* v4.85.13: Custom hover tooltip for constellation nodes — fixed top-center
   position (no cursor-tracking). Replaces the cursor-following design from
   v4.85.11/12 after user feedback that it was unpredictable + flashed-and-
   disappeared on click. Now: tooltip ALWAYS appears in the same spot at the
   top-center of the constellation map; nodes themselves have NO onclick
   (drill action is the explicit button inside the tooltip). Pointer-events
   stay enabled so the Drill button is clickable. */
.ana-const-map { position: relative; }
.ana-const-tooltip {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: auto;
  z-index: 10;
  min-width: 280px;
  max-width: 420px;
  padding: 14px 18px;
  border-radius: 12px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-top: 3px solid var(--accent);
  box-shadow: 0 12px 28px rgba(0,0,0,.32), 0 2px 8px rgba(0,0,0,.18);
  font-size: 13px;
  line-height: 1.4;
  color: var(--text);
  opacity: 1;
  transition: opacity .15s ease;
  text-align: center;
}
.ana-const-tooltip.is-hidden {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}
.ana-const-tt-topic {
  font-weight: 800;
  font-size: 16px;
  color: var(--text);
  margin-bottom: 3px;
  line-height: 1.25;
}
.ana-const-tt-domain {
  font-size: 11px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 600;
  margin-bottom: 10px;
}
.ana-const-tt-stats {
  font-size: 12.5px;
  color: var(--text-mid);
  margin-bottom: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  justify-content: center;
}
.ana-const-tt-stats > div { white-space: nowrap; }
.ana-const-tt-btn {
  display: inline-block;
  background: var(--accent);
  color: white;
  font-size: 12.5px;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  transition: filter .15s ease, transform .15s ease;
}
.ana-const-tt-btn:hover { filter: brightness(1.1); transform: translateY(-1px); }
.ana-const-tt-btn:active { transform: translateY(0); }
.ana-const-tt-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Tier-colored top border + button echoes mastery state */
.ana-const-tooltip.ana-const-tt-tier-mastered { border-top-color: var(--green); }
.ana-const-tooltip.ana-const-tt-tier-mastered .ana-const-tt-btn { background: var(--green); }
.ana-const-tooltip.ana-const-tt-tier-proficient { border-top-color: var(--accent); }
.ana-const-tooltip.ana-const-tt-tier-developing { border-top-color: var(--yellow); }
.ana-const-tooltip.ana-const-tt-tier-developing .ana-const-tt-btn { background: var(--yellow); color: var(--surface); }
.ana-const-tooltip.ana-const-tt-tier-novice { border-top-color: var(--text-dim); }
.ana-const-tooltip.ana-const-tt-tier-novice .ana-const-tt-btn { background: var(--text-dim); }
@media (prefers-reduced-motion: reduce) {
  .ana-const-tooltip { transition: none; }
  .ana-const-tt-btn { transition: none; }
}
/* Mobile: ensure tooltip never overflows narrow screens */
@media (max-width: 540px) {
  .ana-const-tooltip {
    min-width: 0;
    max-width: calc(100% - 24px);
    left: 12px;
    right: 12px;
    transform: none;
    padding: 12px 14px;
  }
  .ana-const-tt-topic { font-size: 14px; }
}

/* Empty state */
.ana-const-empty {
  text-align: center;
  padding: 40px 20px 32px;
  background: rgba(var(--accent-rgb), .03);
  border: 1px dashed rgba(var(--accent-rgb), .2);
  border-radius: 14px;
}
.ana-const-empty-ico {
  display: block;
  font-size: 48px;
  margin-bottom: 10px;
  filter: drop-shadow(0 2px 8px rgba(var(--accent-rgb), .3));
}
.ana-const-empty p { margin: 4px 0; font-size: 14px; color: var(--text-mid); }
.ana-const-empty-sub { font-size: 12px !important; color: var(--text-dim) !important; }

/* Animation: nodes twinkle in on first render */
@keyframes anaConstTwinkle {
  0%   { opacity: 0; transform: scale(.2); }
  60%  { opacity: 1; transform: scale(1.15); }
  100% { opacity: 1; transform: scale(1); }
}
#ana-s-constellation .ana-const-node {
  animation: anaConstTwinkle .6s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}
/* Stagger by domain so they don't all pop at once */
#ana-s-constellation .ana-const-node[data-domain-idx="1"] { animation-delay: .05s; }
#ana-s-constellation .ana-const-node[data-domain-idx="2"] { animation-delay: .15s; }
#ana-s-constellation .ana-const-node[data-domain-idx="3"] { animation-delay: .25s; }
#ana-s-constellation .ana-const-node[data-domain-idx="4"] { animation-delay: .35s; }
#ana-s-constellation .ana-const-node[data-domain-idx="5"] { animation-delay: .45s; }

@media (max-width: 680px) {
  .ana-const-map { padding: 10px 6px; }
  .ana-const-cluster-num { font-size: 8px; }
  .ana-const-cluster-name { font-size: 10px; }
  .ana-const-legend { gap: 10px; }
  .ana-const-legend-item { font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  #ana-s-constellation .ana-const-node { animation: none !important; }
  .ana-const-node,
  .ana-const-halo,
  .ana-const-core { transition: none !important; }
}

/* Light theme overrides */
[data-theme="light"] .ana-const-map {
  background:
    radial-gradient(circle at 20% 30%, rgba(99, 85, 224, .05), transparent 50%),
    radial-gradient(circle at 70% 60%, rgba(37, 99, 235, .04), transparent 50%),
    radial-gradient(circle at 90% 25%, rgba(220, 38, 38, .04), transparent 50%),
    linear-gradient(160deg, rgba(99, 85, 224, .04), rgba(99, 85, 224, .01));
  border-color: rgba(99, 85, 224, .2);
}
[data-theme="light"] .ana-const-tether { stroke: rgba(99, 85, 224, .2); }
[data-theme="light"] .ana-const-node[data-domain-idx="1"] { color: #6355e0; }
[data-theme="light"] .ana-const-node[data-domain-idx="2"] { color: #16a34a; }
[data-theme="light"] .ana-const-node[data-domain-idx="3"] { color: #2563eb; }
[data-theme="light"] .ana-const-node[data-domain-idx="4"] { color: #d97706; }
[data-theme="light"] .ana-const-node[data-domain-idx="5"] { color: #dc2626; }
[data-theme="light"] .ana-const-cluster-name { fill: #1f1b2e; }
[data-theme="light"] .ana-const-empty {
  background: rgba(99, 85, 224, .04);
  border-color: rgba(99, 85, 224, .22);
}

/* ═══════════════════════════════════════════════════════════════════
   v4.54.3 — Results page editorial redesign
   Replaces the grade-ring + A-F letter with an editorial layout:
   eyebrow + display heading (italic em accent) + dark scaled-score
   hero (1-to-900 banner) + stats aside + retained difficulty breakdown
   + editorial CTA row. Matches the prototype's Results screen.
   ═══════════════════════════════════════════════════════════════════ */

.results-v2 {
  max-width: 820px;
  margin: 0 auto;
  padding: 8px 0;
}
.results-v2-eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-family: monospace;
  color: var(--accent-light);
  letter-spacing: .15em;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 14px;
}
.results-v2-eyebrow::before {
  content: '';
  width: 20px;
  height: 1px;
  background: var(--accent);
  opacity: .55;
}
.results-v2-display {
  font-size: 50px;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--text);
  margin: 0 0 8px;
  text-wrap: balance;
}
.results-v2-display em {
  font-style: normal;
  color: var(--accent-light);
  font-weight: 800;
}
.results-v2-lede {
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-mid);
  margin: 0 0 28px;
  max-width: 520px;
}

/* Dark scaled-score hero — mirrors readiness-card-v2 aesthetic */
.results-v2-hero {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 0;
  margin-bottom: 22px;
  background: linear-gradient(160deg, #16131f, #0d0a15);
  border: 1px solid rgba(var(--accent-rgb), .22);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 14px 36px -14px rgba(0, 0, 0, .55);
  position: relative;
}
.results-v2-hero::before {
  content: '';
  position: absolute;
  top: -30%; left: -20%;
  width: 120%; height: 140%;
  background: radial-gradient(circle at 30% 30%, rgba(var(--accent-rgb), .22), transparent 55%);
  pointer-events: none;
}
.results-v2-big {
  position: relative;
  padding: 28px 32px 26px;
  color: #fafaff;
  border-right: 1px solid rgba(255, 255, 255, .06);
}
.results-v2-big-label {
  font-size: 10.5px;
  font-family: monospace;
  letter-spacing: .15em;
  color: rgba(250, 250, 255, .55);
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 18px;
}
.results-v2-big-score {
  font-size: 68px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: #fff;
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-bottom: 14px;
}
.results-v2-big-score em {
  font-style: normal;
  font-size: 20px;
  font-weight: 600;
  color: rgba(250, 250, 255, .5);
  letter-spacing: 0;
}
.results-v2-verdict {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-family: monospace;
  letter-spacing: .04em;
  font-weight: 700;
  padding: 5px 11px;
  border-radius: 99px;
}
.results-v2-verdict-pass {
  background: rgba(34, 197, 94, .16);
  color: #4ade80;
  border: 1px solid rgba(34, 197, 94, .34);
}
.results-v2-verdict-fail {
  background: rgba(239, 68, 68, .16);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, .34);
}

/* Stats aside — 4 rows with hairline dividers */
.results-v2-side {
  position: relative;
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 0;
  color: rgba(250, 250, 255, .85);
}
.results-v2-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.results-v2-row:last-child { border-bottom: none; }
.results-v2-row .k {
  font-size: 11px;
  font-family: monospace;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(250, 250, 255, .55);
  font-weight: 700;
}
.results-v2-row .v {
  font-size: 22px;
  font-weight: 800;
  color: #fff;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

/* CTA row at bottom — editorial restraint */
.results-v2-cta-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px dashed rgba(var(--accent-rgb), .22);
  flex-wrap: wrap;
}
.results-v2-cta-right { display: flex; gap: 10px; flex-wrap: wrap; }
.results-v2-cta-back {
  font-size: 13px;
  color: var(--text-mid);
}

/* Responsive */
@media (max-width: 680px) {
  .results-v2-display { font-size: 38px; }
  .results-v2-hero { grid-template-columns: 1fr; }
  .results-v2-big { border-right: none; border-bottom: 1px solid rgba(255, 255, 255, .06); padding: 22px 22px 20px; }
  .results-v2-big-score { font-size: 56px; }
  .results-v2-side { padding: 18px 22px; }
  .results-v2-cta-row { flex-direction: column; align-items: stretch; }
  .results-v2-cta-right { justify-content: stretch; }
  .results-v2-cta-right .btn { flex: 1; }
}
@media (max-width: 440px) {
  .results-v2-display { font-size: 32px; }
  .results-v2-big-score { font-size: 48px; }
}

/* Reduced-motion: the animateCount still runs but CSS transitions are gentle anyway */
@media (prefers-reduced-motion: reduce) {
  .results-v2-hero { box-shadow: none; }
}

/* Light theme — dark hero stays dark (design intent from prototype + readiness-card-v2) */
[data-theme="light"] .results-v2-hero {
  background: linear-gradient(160deg, #1a1725, #0f0b1a);
  border-color: rgba(99, 85, 224, .35);
  box-shadow: 0 14px 36px -14px rgba(99, 85, 224, .4);
}
[data-theme="light"] .results-v2-hero::before {
  background: radial-gradient(circle at 30% 30%, rgba(139, 122, 245, .3), transparent 55%);
}
[data-theme="light"] .results-v2-eyebrow { color: #6355e0; }
[data-theme="light"] .results-v2-eyebrow::before { background: #6355e0; }
[data-theme="light"] .results-v2-display em { color: #6355e0; }

/* Retire old results styles — belt-and-braces so the legacy markup (if ever reintroduced) doesn't clash */
.results-hero { display: none !important; }
.results-stats { display: none !important; }
.results-actions { display: none !important; }

/* ═══════════════════════════════════════════════════════════════════
   v4.54.4 — Topology Builder editorial polish
   Keeps the full 4500-LOC TB engine intact; restyles only the chrome:
   editorial header (eyebrow + display + lede), canvas bottom stats
   strip, cleaner toolbar + palette headers to match the rest of the
   editorial language (Home + Analytics + Results).
   ═══════════════════════════════════════════════════════════════════ */

/* Retire the old pill-heavy hero */
.tb-hero { display: none !important; }

/* Editorial header — matches hero-v2 + results-v2 language */
.tb-v2-header { margin-bottom: 16px; padding: 8px 2px 0; }
.tb-v2-eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-family: monospace;
  color: var(--accent-light);
  letter-spacing: .15em;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 10px;
}
.tb-v2-eyebrow::before {
  content: '';
  width: 20px;
  height: 1px;
  background: var(--accent);
  opacity: .55;
}
.tb-v2-display {
  font-size: 42px;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--text);
  margin: 0 0 8px;
}
.tb-v2-display em { font-style: normal; color: var(--accent-light); font-weight: 800; }
.tb-v2-lede {
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-mid);
  margin: 0;
  max-width: 720px;
}
.tb-v2-lede strong { color: var(--text); font-weight: 700; }

/* Canvas bottom stats strip — matches prototype's .topo-stat-row */
.tb-v2-stats {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 14px;
  background: linear-gradient(180deg, rgba(var(--accent-rgb), .04), rgba(var(--accent-rgb), .08));
  border: 1px solid rgba(var(--accent-rgb), .18);
  border-radius: 10px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-size: 11.5px;
  font-family: monospace;
  color: var(--text-dim);
  letter-spacing: .04em;
  line-height: 1.5;
  z-index: 5;
  pointer-events: none;
}
.tb-v2-stats strong {
  color: var(--accent-light);
  font-weight: 700;
  font-family: monospace;
  font-variant-numeric: tabular-nums;
}
.tb-v2-stats em {
  font-style: normal;
  color: var(--text);
  font-weight: 600;
  letter-spacing: -0.005em;
  font-family: inherit;
}
.tb-v2-stat-sep { opacity: .4; }

/* Toolbar polish — less visual weight, editorial group labels */
.tb-toolbar.tb-toolbar-v2 {
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(var(--accent-rgb), .05), transparent 55%),
    linear-gradient(160deg, rgba(var(--accent-rgb), .025), rgba(var(--accent-rgb), .008));
  border-color: rgba(var(--accent-rgb), .2);
}
.tb-tool-group-label {
  font-family: monospace;
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-dim);
  font-weight: 700;
  opacity: .85;
}

/* Palette header — matches prototype's .device-group .label styling */
.tb-palette-head,
.tb-palette-head-cables {
  font-family: monospace !important;
  font-size: 10px !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  color: var(--text-dim) !important;
  padding: 12px 10px 8px !important;
  border-bottom: 1px dashed rgba(var(--accent-rgb), .15);
  margin-bottom: 6px;
}
.tb-palette-head-cables {
  margin-top: 10px;
  border-top: 1px dashed rgba(var(--accent-rgb), .15);
  padding-top: 12px !important;
}

/* Responsive: stats strip shrinks on small canvases */
@media (max-width: 900px) {
  .tb-v2-display { font-size: 32px; }
  .tb-v2-stats { font-size: 10.5px; padding: 7px 10px; gap: 6px; }
  .tb-v2-stat-sep { display: none; }
}

/* Reduced motion: backdrop-filter already static */

/* Light theme */
[data-theme="light"] .tb-v2-eyebrow,
[data-theme="light"] .tb-v2-display em { color: #6355e0; }
[data-theme="light"] .tb-v2-eyebrow::before { background: #6355e0; }
[data-theme="light"] .tb-v2-stats {
  background: linear-gradient(180deg, rgba(99, 85, 224, .05), rgba(99, 85, 224, .08));
  border-color: rgba(99, 85, 224, .2);
}
[data-theme="light"] .tb-v2-stats strong { color: #6355e0; }
[data-theme="light"] .tb-toolbar.tb-toolbar-v2 {
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(99, 85, 224, .05), transparent 55%),
    linear-gradient(160deg, rgba(99, 85, 224, .025), rgba(99, 85, 224, .008));
  border-color: rgba(99, 85, 224, .2);
}

/* ═══════════════════════════════════════════════════════════════════
   v4.54.5 — Topology Builder 3-column layout
   Palette (left) + canvas (center) + always-visible Scenarios +
   Inspector (right). Matches the prototype's 3-col TB screen.
   Zero engine changes — pure layout/chrome shell.
   ═══════════════════════════════════════════════════════════════════ */

/* Grid shell: palette / canvas / right pane.
   Widths mirror the prototype: ~200px / flexible / ~240px. */
.tb-workspace.tb-workspace-v3 {
  display: grid;
  grid-template-columns: 220px 1fr 260px;
  gap: 14px;
  align-items: stretch;
  min-height: 640px;
}

/* Left pane — editorial header at top, then existing palette */
.tb-palette.tb-palette-v3 {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 14px;
  overflow-y: auto;
  max-height: calc(100vh - 120px);
}

/* Right pane */
.tb-v3-right {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 14px;
  overflow-y: auto;
  max-height: calc(100vh - 120px);
  display: flex;
  flex-direction: column;
}

/* Pane head — editorial "Topology <em>Builder</em>" style */
.tb-pane-head {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text);
  line-height: 1.1;
  margin: 0 0 4px;
}
.tb-pane-head em {
  font-style: italic;
  color: var(--accent-light);
  font-weight: 700;
}
.tb-pane-sub {
  font-size: 11.5px;
  color: var(--text-dim);
  line-height: 1.5;
  margin: 0 0 18px;
  padding-bottom: 14px;
  border-bottom: 1px dashed rgba(var(--accent-rgb), .18);
}

/* Right-pane section separator between Scenarios and Inspector */
.tb-v3-section-sep {
  height: 1px;
  background: rgba(var(--accent-rgb), .14);
  margin: 18px 0;
}

/* Scenarios list in right pane */
.tb-v3-scenarios-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 10px 0 0;
}
.tb-v3-scn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 7px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
  width: 100%;
}
.tb-v3-scn:hover {
  background: rgba(var(--accent-rgb), .06);
  border-color: rgba(var(--accent-rgb), .14);
}
.tb-v3-scn-active {
  background: linear-gradient(135deg, rgba(var(--accent-rgb), .18), rgba(var(--accent-rgb), .08));
  border-color: var(--accent);
  color: var(--accent-light);
  box-shadow: 0 2px 8px -3px rgba(var(--accent-rgb), .3);
}
.tb-v3-scn-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tb-v3-scn-active .tb-v3-scn-title { color: var(--accent-light); font-weight: 700; }
.tb-v3-scn-tag {
  font-size: 10px;
  font-family: monospace;
  color: var(--text-dim);
  background: rgba(var(--accent-rgb), .08);
  border: 1px solid rgba(var(--accent-rgb), .14);
  padding: 2px 7px;
  border-radius: 99px;
  font-weight: 600;
  flex-shrink: 0;
  letter-spacing: .02em;
}
.tb-v3-scn-active .tb-v3-scn-tag {
  background: rgba(var(--accent-rgb), .2);
  color: var(--accent-light);
  border-color: rgba(var(--accent-rgb), .35);
}

/* Inspector pane */
.tb-v3-inspector {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 10px;
}
.tb-v3-inspector-empty {
  padding: 14px 4px;
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-dim);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tb-v3-inspector-empty-ico {
  font-size: 18px;
  color: var(--accent-light);
  opacity: .7;
}
.tb-v3-inspector-empty-text strong { color: var(--text); font-weight: 700; }
.tb-v3-inspector-empty-sub {
  font-size: 11px;
  color: var(--text-dim);
  opacity: .8;
  font-style: italic;
  margin-top: 2px;
}

/* Inspector content rows (read-only, prototype .inspector-row style) */
.tb-v3-inspect-id {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
  margin-bottom: 2px;
}
.tb-v3-inspect-sub {
  font-size: 11px;
  font-family: monospace;
  color: var(--text-dim);
  letter-spacing: .04em;
  text-transform: lowercase;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px dashed rgba(var(--accent-rgb), .14);
}
.tb-v3-inspect-section { margin-bottom: 14px; }
.tb-v3-inspect-title {
  font-size: 10px;
  font-family: monospace;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-dim);
  font-weight: 700;
  margin-bottom: 6px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.tb-v3-inspect-count {
  font-size: 9px;
  font-family: monospace;
  background: rgba(var(--accent-rgb), .1);
  border: 1px solid rgba(var(--accent-rgb), .22);
  color: var(--accent-light);
  padding: 1px 6px;
  border-radius: 99px;
}
.tb-v3-inspect-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 5px 0;
  border-bottom: 1px solid rgba(var(--accent-rgb), .08);
  font-size: 11.5px;
  gap: 10px;
}
.tb-v3-inspect-row:last-child { border-bottom: none; }
.tb-v3-inspect-row .k {
  font-family: monospace;
  color: var(--text-mid);
  letter-spacing: .02em;
  font-weight: 600;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tb-v3-inspect-row .v {
  font-family: monospace;
  color: var(--text);
  text-align: right;
  font-weight: 600;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
.tb-v3-inspect-row .v em { font-style: italic; color: var(--text-dim); font-weight: 500; }

.tb-v3-inspect-edit {
  margin-top: 12px;
  padding: 8px 12px;
  background: linear-gradient(135deg, rgba(var(--accent-rgb), .12), rgba(var(--accent-rgb), .04));
  border: 1px solid rgba(var(--accent-rgb), .3);
  color: var(--accent-light);
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .01em;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
  text-align: center;
}
.tb-v3-inspect-edit:hover {
  background: linear-gradient(135deg, rgba(var(--accent-rgb), .22), rgba(var(--accent-rgb), .1));
  transform: translateY(-1px);
}

/* ──────────────────────────────────────────────────────────────────────
   v4.60.0 — Live Protocol Inspector (issue #184)
   Replaces the legacy .tb-v3-inspect-* summary styling inside the
   floating #tb-inspector-pop popup. Editorial head + accordion sections
   for routing / ARP / MAC / DHCP tables. Row-flash animation fires when
   new rows are learned (ARP resolve, MAC learn).
   ────────────────────────────────────────────────────────────────────── */
.tb-insp-head-block {
  padding: 4px 0 14px;
  border-bottom: 1px dashed rgba(var(--accent-rgb), .22);
  margin-bottom: 12px;
  background: linear-gradient(135deg, rgba(var(--accent-rgb), .06) 0%, transparent 70%);
  padding: 10px 4px 14px;
  border-radius: 8px;
}
.tb-insp-eyebrow {
  font-family: 'SF Mono', 'Menlo', 'Consolas', monospace;
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent-light);
  font-weight: 600;
}
.tb-insp-title {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.1;
  margin: 4px 0 2px;
  letter-spacing: -.01em;
  color: var(--text);
}
.tb-insp-sub {
  font-family: 'SF Mono', 'Menlo', 'Consolas', monospace;
  font-size: 11px;
  color: var(--text-dim);
  letter-spacing: .04em;
}
.tb-insp-acc-section {
  border-bottom: 1px dashed rgba(var(--accent-rgb), .16);
}
.tb-insp-acc-section:last-of-type { border-bottom: none; }
.tb-insp-acc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 4px;
  border-radius: 6px;
}
.tb-insp-acc-label {
  font-family: 'SF Mono', 'Menlo', 'Consolas', monospace;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text);
  font-weight: 600;
}
.tb-insp-acc-count {
  font-family: 'SF Mono', 'Menlo', 'Consolas', monospace;
  font-size: 10px;
  background: rgba(var(--accent-rgb), .08);
  color: var(--text-dim);
  padding: 2px 8px;
  border-radius: 99px;
  letter-spacing: .04em;
}
.tb-insp-acc-count.active {
  background: rgba(var(--accent-rgb), .2);
  color: var(--accent-light);
  border: 1px solid rgba(var(--accent-rgb), .3);
}
.tb-insp-acc-body {
  padding: 0 4px 12px;
}
.tb-insp-tbl {
  width: 100%;
  font-family: 'SF Mono', 'Menlo', 'Consolas', monospace;
  font-size: 11px;
  border-collapse: collapse;
}
.tb-insp-tbl th {
  text-align: left;
  color: var(--text-dim);
  font-weight: 500;
  padding: 5px 4px 5px 0;
  border-bottom: 1px dotted rgba(var(--accent-rgb), .2);
  font-size: 9.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.tb-insp-tbl td {
  padding: 6px 4px 6px 0;
  color: var(--text);
  border-bottom: 1px dotted rgba(var(--accent-rgb), .12);
  vertical-align: top;
  word-break: break-all;
}
.tb-insp-tbl tbody tr:last-child td { border-bottom: none; }
.tb-insp-tbl tr.tb-insp-row-flash td {
  background: rgba(var(--accent-rgb), .18);
  box-shadow: inset 3px 0 0 var(--accent);
  animation: tbInspRowFlash 600ms ease-out;
}
@keyframes tbInspRowFlash {
  0%   { background: rgba(var(--accent-rgb), .42); }
  100% { background: rgba(var(--accent-rgb), .18); }
}
.tb-insp-cell-dim   { color: var(--text-mid); }
.tb-insp-cell-iface { color: var(--accent-light); }
.tb-insp-learned {
  display: inline-block;
  margin-left: 6px;
  font-family: 'SF Mono', 'Menlo', 'Consolas', monospace;
  font-size: 8.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent-light);
  font-weight: 600;
}
.tb-insp-tbl-kv td { font-size: 11px; }
.tb-insp-tbl-kv td:first-child { width: 38%; }
.tb-insp-empty {
  font-family: inherit;
  font-size: 12px;
  color: var(--text-dim);
  font-style: italic;
  padding: 4px 0;
  line-height: 1.5;
}
.tb-insp-empty::before { content: '💡 '; font-style: normal; }
.tb-insp-inapplicable {
  font-family: 'SF Mono', 'Menlo', 'Consolas', monospace;
  font-size: 10.5px;
  color: var(--text-dim);
  padding: 4px 0;
  letter-spacing: .03em;
  line-height: 1.55;
}
.tb-insp-inapplicable::before { content: '— '; color: var(--text-dim); }
.tb-insp-inapplicable strong { color: var(--accent-light); font-weight: 600; }
.tb-insp-note {
  font-family: 'SF Mono', 'Menlo', 'Consolas', monospace;
  font-size: 10px;
  color: var(--text-dim);
  font-style: italic;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dotted rgba(var(--accent-rgb), .14);
}
.tb-insp-footer {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed rgba(var(--accent-rgb), .22);
}

/* Responsive: hide right pane on narrow, fallback to modal-based scenarios */
@media (max-width: 1200px) {
  .tb-workspace.tb-workspace-v3 {
    grid-template-columns: 200px 1fr;
  }
  .tb-v3-right { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .tb-v3-scn, .tb-v3-inspect-edit { transition: none !important; }
  .tb-v3-inspect-edit:hover { transform: none !important; }
  /* v4.60.0: row-flash animation neutralised for reduced-motion users */
  .tb-insp-tbl tr.tb-insp-row-flash td { animation: none !important; }
}

/* v4.60.0: Live Protocol Inspector — light theme */
[data-theme="light"] .tb-insp-eyebrow { color: #6355e0; }
[data-theme="light"] .tb-insp-acc-count.active {
  background: rgba(99, 85, 224, .12);
  color: #6355e0;
  border-color: rgba(99, 85, 224, .3);
}
[data-theme="light"] .tb-insp-cell-iface { color: #6355e0; }
[data-theme="light"] .tb-insp-learned { color: #6355e0; }
[data-theme="light"] .tb-insp-tbl tr.tb-insp-row-flash td {
  background: rgba(99, 85, 224, .08);
  box-shadow: inset 3px 0 0 #6355e0;
}
[data-theme="light"] .tb-insp-inapplicable strong { color: #6355e0; }

/* Light-theme */
[data-theme="light"] .tb-pane-head em { color: #6355e0; }
[data-theme="light"] .tb-v3-scn-active {
  background: linear-gradient(135deg, rgba(99, 85, 224, .18), rgba(99, 85, 224, .08));
  border-color: #6355e0;
}
[data-theme="light"] .tb-v3-scn-active .tb-v3-scn-title { color: #6355e0; }
[data-theme="light"] .tb-v3-inspect-edit {
  background: linear-gradient(135deg, rgba(99, 85, 224, .12), rgba(99, 85, 224, .04));
  border-color: rgba(99, 85, 224, .3);
  color: #6355e0;
}

/* ════════════════════════════════════════════════════════════════════
   v4.54.6 \u2014 TB usability fixes
   - 2-col palette grid
   - Categorised scenarios w/ subheaders + full text wrap
   - Pill-tab toolbar inside canvas top
   - Zoom controls bottom-right of canvas
   - Draggable transparent floating inspector popup
   ════════════════════════════════════════════════════════════════════ */

/* (1) Palette \u2014 device tiles in a 2-column grid. The group head spans both
       columns. Tiles get tighter padding + centered icon so they read like
       cards rather than rows. */
.tb-palette.tb-palette-v3 #tb-palette-items {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  align-items: stretch;
}
.tb-palette.tb-palette-v3 #tb-palette-items .tb-palette-group-head {
  grid-column: 1 / -1;
  margin: 8px 0 2px;
  padding: 0 2px;
  font-size: 9.5px;
  letter-spacing: .12em;
}
.tb-palette.tb-palette-v3 #tb-palette-items .tb-palette-group-head:first-child { margin-top: 0; }
.tb-palette.tb-palette-v3 #tb-palette-items .tb-palette-item {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 4px;
  padding: 8px 4px;
  margin-bottom: 0;
  min-height: 70px;
  border-radius: 9px;
}
.tb-palette.tb-palette-v3 #tb-palette-items .tb-palette-item:hover {
  transform: translateY(-1px);
}
.tb-palette.tb-palette-v3 #tb-palette-items .tb-palette-label {
  font-size: 10.5px;
  line-height: 1.2;
  letter-spacing: -0.005em;
}
.tb-palette.tb-palette-v3 #tb-palette-items .tb-palette-icon-svg {
  width: 38px; height: 32px;
}

/* (2) Right-pane Scenarios \u2014 categorised sections with subheaders. Items
       wrap full text now (no ellipsis), subheaders are monospace small-caps
       matching the editorial system. */
.tb-pane-sub-tight {
  font-size: 11px;
  color: var(--text-dim);
  line-height: 1.4;
  margin: 0 0 12px;
  padding-bottom: 10px;
  border-bottom: 1px dashed rgba(var(--accent-rgb), .14);
}
.tb-v3-scn-cat { margin-bottom: 14px; }
.tb-v3-scn-cat:last-child { margin-bottom: 0; }
.tb-v3-scn-cat-head {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: monospace;
  font-size: 9.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent-light);
  font-weight: 700;
  opacity: .85;
  margin-bottom: 6px;
  padding: 0 2px;
}
.tb-v3-scn-cat-ico { font-size: 11px; opacity: .9; }
.tb-v3-scn-cat-name { flex: 1; min-width: 0; }
.tb-v3-scn-cat-count {
  font-size: 9px;
  background: rgba(var(--accent-rgb), .1);
  border: 1px solid rgba(var(--accent-rgb), .2);
  padding: 1px 6px;
  border-radius: 99px;
  letter-spacing: .04em;
  color: var(--accent-light);
}
.tb-v3-scn-cat-body {
  display: flex; flex-direction: column; gap: 3px;
}
/* Override the v4.54.5 scenario tile to wrap full text (no ellipsis) and
   sit comfortably with multi-line titles. */
.tb-v3-scn-cat-body .tb-v3-scn {
  align-items: flex-start;
  padding: 8px 10px;
}
.tb-v3-scn-cat-body .tb-v3-scn-title {
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
  font-size: 11.5px;
  line-height: 1.35;
}

/* (3) Pill-tab toolbar inside canvas top. Translucent dark bar pinned to
       top-left of the canvas; doesn't cover the full width so the canvas
       still feels open. */
.tb-canvas-wrap { position: relative; }
.tb-canvas-pills {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  background: rgba(11, 16, 32, .78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(124, 111, 247, .22);
  border-radius: 12px;
  box-shadow: 0 4px 16px -6px rgba(0, 0, 0, .4);
}
.tb-canvas-pills-modes,
.tb-canvas-pills-actions {
  display: flex; gap: 2px;
}
.tb-canvas-pills-sep {
  width: 1px;
  align-self: stretch;
  background: rgba(124, 111, 247, .22);
  margin: 4px 4px;
}
.tb-pill {
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--text-dim);
  background: transparent;
  border: 1px solid transparent;
  padding: 6px 11px;
  border-radius: 8px;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, transform .12s ease;
  white-space: nowrap;
}
.tb-pill:hover {
  background: rgba(124, 111, 247, .14);
  color: var(--text);
}
.tb-pill-active {
  background: linear-gradient(135deg, rgba(124, 111, 247, .26), rgba(124, 111, 247, .14));
  color: var(--accent-light);
  border-color: rgba(124, 111, 247, .42);
  box-shadow: 0 1px 4px -1px rgba(124, 111, 247, .35);
}
.tb-pill-action { color: var(--text); }
.tb-pill-grade {
  background: linear-gradient(135deg, rgba(34, 197, 94, .18), rgba(34, 197, 94, .08));
  border-color: rgba(34, 197, 94, .35);
  color: #86efac;
}
.tb-pill-grade:hover {
  background: linear-gradient(135deg, rgba(34, 197, 94, .28), rgba(34, 197, 94, .14));
  color: #bbf7d0;
}

/* (4) Zoom controls bottom-right of canvas */
.tb-zoom-ctrls {
  position: absolute;
  right: 14px;
  bottom: 56px; /* sit above the v4.54.4 stats strip */
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px;
  background: rgba(11, 16, 32, .78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(124, 111, 247, .22);
  border-radius: 10px;
  box-shadow: 0 4px 16px -6px rgba(0, 0, 0, .4);
}
.tb-zoom-btn {
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 7px;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.tb-zoom-btn:hover {
  background: rgba(124, 111, 247, .2);
  color: var(--accent-light);
}
.tb-zoom-fit { font-size: 13px; }

/* (5) Floating draggable inspector popup. Transparent dark glass aesthetic
       so the canvas underneath still shows through; matches the prototype
       brand language while staying on our purple accent palette. */
.tb-inspector-pop {
  position: absolute;
  top: 64px;
  right: 14px;
  z-index: 6;
  width: 280px;
  max-height: calc(100% - 90px);
  display: flex;
  flex-direction: column;
  background: rgba(13, 10, 21, .82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(124, 111, 247, .32);
  border-radius: 14px;
  box-shadow: 0 12px 40px -10px rgba(0, 0, 0, .55);
  overflow: hidden;
  animation: tbInspectorPopIn .25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes tbInspectorPopIn {
  from { opacity: 0; transform: translateY(-4px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.tb-inspector-pop[hidden] { display: none; }
.tb-inspector-pop-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 12px;
  background: linear-gradient(135deg, rgba(124, 111, 247, .22), rgba(124, 111, 247, .08));
  border-bottom: 1px solid rgba(124, 111, 247, .22);
  cursor: grab;
  user-select: none;
}
.tb-inspector-pop-head:active { cursor: grabbing; }
.tb-inspector-pop-title {
  font-family: monospace;
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent-light);
  font-weight: 700;
}
.tb-inspector-pop-close {
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--text-dim);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.tb-inspector-pop-close:hover {
  background: rgba(239, 68, 68, .2);
  color: #fca5a5;
  border-color: rgba(239, 68, 68, .3);
}
.tb-inspector-pop-body {
  padding: 12px 14px 14px;
  overflow-y: auto;
  max-height: calc(100vh - 240px);
}

/* Prevent the wheel-scroll from scrolling the page when zooming the canvas */
.tb-canvas-wrap { overscroll-behavior: contain; }

/* SVG cursor: grab on empty canvas indicates pannable */
.tb-canvas { cursor: grab; }
.tb-device { cursor: grab; }

/* ──────────────────────────────────────────────────────────────────────
   v4.61.0 — Per-Hop Packet Trace (issue #185)
   Floating left-anchored panel showing the hop timeline + playback
   controls. Canvas gets packet pill + inline badge + per-device states
   (visited/current/pending) applied via tbRenderTraceCanvasState.
   ────────────────────────────────────────────────────────────────────── */
.tb-trace-panel {
  position: absolute;
  top: 60px;
  left: 16px;
  width: 400px;
  max-height: calc(100vh - 260px);
  z-index: 8;
  background: rgba(21, 18, 31, 0.94);
  backdrop-filter: blur(14px);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: tbTracePanelIn .35s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.tb-trace-panel[hidden] { display: none !important; }
@keyframes tbTracePanelIn {
  0%   { opacity: 0; transform: translateY(10px) scale(.98); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.tb-trace-head {
  position: relative;
  padding: 16px 18px 14px;
  border-bottom: 1px dashed rgba(var(--accent-rgb), .25);
  background: linear-gradient(135deg, rgba(var(--accent-rgb), .08) 0%, transparent 70%);
  /* v4.62.1: head is the drag handle for the whole panel */
  cursor: grab;
  user-select: none;
}
.tb-trace-head:active { cursor: grabbing; }
.tb-trace-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 26px; height: 26px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-dim);
  border-radius: 6px;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s ease, color .15s ease;
}
.tb-trace-close:hover {
  background: rgba(var(--accent-rgb), .15);
  color: var(--accent-light);
  border-color: rgba(var(--accent-rgb), .4);
}
.tb-trace-eyebrow {
  font-family: 'SF Mono', 'Menlo', 'Consolas', monospace;
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent-light);
  font-weight: 600;
}
.tb-trace-title {
  font-size: 20px;
  font-weight: 700;
  margin: 4px 0 0;
  letter-spacing: -.01em;
  color: var(--text);
}
.tb-trace-title em { color: var(--accent-light); font-style: italic; }
.tb-trace-sub {
  font-family: 'SF Mono', 'Menlo', 'Consolas', monospace;
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 2px;
}

.tb-trace-hops {
  flex: 1;
  overflow-y: auto;
  padding: 10px 14px;
}
.tb-trace-hop {
  position: relative;
  padding: 10px 0 10px 26px;
  border-bottom: 1px dotted rgba(var(--accent-rgb), .14);
}
.tb-trace-hop:last-child { border-bottom: none; }
.tb-trace-hop::before {
  content: '';
  position: absolute;
  left: 8px; top: 14px;
  width: 2px; height: calc(100% + 2px);
  background: rgba(var(--accent-rgb), .18);
}
.tb-trace-hop:last-child::before { height: 10px; }
.tb-trace-hop-dot {
  position: absolute;
  left: 3px; top: 12px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 2px solid var(--text-dim);
  z-index: 1;
}
.tb-trace-hop-done .tb-trace-hop-dot {
  background: var(--green);
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(74, 222, 128, .18);
}
.tb-trace-hop-done .tb-trace-hop-dot::after {
  content: '\2713';
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 7px; color: #0a0815; font-weight: 900;
}
.tb-trace-hop-current .tb-trace-hop-dot {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .3);
  animation: tbTraceCurrentPulse 1.4s ease-in-out infinite;
}
@keyframes tbTraceCurrentPulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .3); }
  50%      { box-shadow: 0 0 0 7px rgba(var(--accent-rgb), .1); }
}
.tb-trace-hop-future { opacity: 0.4; }
.tb-trace-hop-failed .tb-trace-hop-dot {
  background: #f87171;
  border-color: #f87171;
  box-shadow: 0 0 0 3px rgba(248, 113, 113, .2);
}
.tb-trace-hop-failed .tb-trace-hop-dot::after {
  content: '\00d7';
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; color: #fff; font-weight: 700;
}
.tb-trace-hop-header {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}
.tb-trace-hop-device {
  font-family: 'SF Mono', 'Menlo', 'Consolas', monospace;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: .02em;
}
.tb-trace-hop-layer {
  font-family: 'SF Mono', 'Menlo', 'Consolas', monospace;
  font-size: 9px;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 3px;
}
.tb-trace-hop-layer-l2 { background: rgba(var(--accent-rgb), .15); color: var(--accent-light); }
.tb-trace-hop-layer-l3 { background: rgba(251, 191, 36, .15); color: #fbbf24; }
.tb-trace-hop-layer-arp { background: rgba(74, 222, 128, .12); color: #4ade80; }
.tb-trace-hop-layer-fail { background: rgba(248, 113, 113, .15); color: #f87171; }
.tb-trace-current-pill {
  margin-left: auto;
  font-family: 'SF Mono', 'Menlo', 'Consolas', monospace;
  font-size: 8.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent-light);
  font-weight: 700;
}
.tb-trace-hop-decision {
  font-size: 12px;
  color: var(--text);
  line-height: 1.5;
}
.tb-trace-hop-meta {
  font-family: 'SF Mono', 'Menlo', 'Consolas', monospace;
  font-size: 10px;
  color: var(--text-dim);
  margin-top: 5px;
  display: flex; flex-wrap: wrap; gap: 3px 10px;
}
.tb-trace-meta-k { color: var(--text-mid); }
.tb-trace-meta-v { color: var(--text); }

.tb-trace-playback {
  padding: 10px 14px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(13, 10, 21, .5);
}
.tb-trace-btn {
  width: 32px; height: 32px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
  font-family: inherit;
}
.tb-trace-btn:hover {
  background: rgba(var(--accent-rgb), .15);
  color: var(--accent-light);
  border-color: rgba(var(--accent-rgb), .4);
}
.tb-trace-btn-primary {
  background: linear-gradient(135deg, var(--accent, #6355e0) 0%, var(--accent-light, #8b7fff) 100%);
  color: white;
  border-color: transparent;
  font-weight: 600;
}
.tb-trace-btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(var(--accent-rgb), .35);
  color: white;
}
.tb-trace-progress {
  flex: 1;
  display: flex; flex-direction: column; gap: 4px;
  min-width: 0;
}
.tb-trace-progress-labels {
  display: flex; justify-content: space-between;
  font-family: 'SF Mono', 'Menlo', 'Consolas', monospace;
  font-size: 9.5px;
  color: var(--text-dim);
  letter-spacing: .06em;
}
.tb-trace-progress-track {
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
}
.tb-trace-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent-light, #8b7fff) 100%);
  border-radius: 2px;
  transition: width .35s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.tb-trace-speed {
  font-family: 'SF Mono', 'Menlo', 'Consolas', monospace;
  font-size: 10.5px;
  color: var(--text-mid);
  letter-spacing: .04em;
  border: 1px solid var(--border);
  padding: 6px 8px;
  border-radius: 6px;
  background: var(--surface-2);
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.tb-trace-speed:hover {
  border-color: rgba(var(--accent-rgb), .4);
  color: var(--accent-light);
}

/* ──── Canvas decorations applied via tbRenderTraceCanvasState ──── */

/* Device group states */
[data-tb-device].tb-trace-pending { opacity: 0.45; }
[data-tb-device].tb-trace-visited .tb-device-shape,
[data-tb-device].tb-trace-visited circle,
[data-tb-device].tb-trace-visited rect {
  stroke: #4ade80;
  stroke-width: 2;
  filter: drop-shadow(0 0 4px rgba(74, 222, 128, .35));
}
[data-tb-device].tb-trace-current .tb-device-shape,
[data-tb-device].tb-trace-current circle,
[data-tb-device].tb-trace-current rect {
  stroke: var(--accent);
  stroke-width: 2.5;
  filter: drop-shadow(0 0 10px rgba(var(--accent-rgb), .75));
  animation: tbTraceNodeCurrentPulse 1.4s ease-in-out infinite;
}
@keyframes tbTraceNodeCurrentPulse {
  0%, 100% { filter: drop-shadow(0 0 10px rgba(var(--accent-rgb), .75)); }
  50%      { filter: drop-shadow(0 0 16px rgba(var(--accent-rgb), .95)); }
}

/* Packet pill overlay */
.tb-trace-packet {
  fill: #fbbf24;
  filter: drop-shadow(0 0 8px rgba(251, 191, 36, .85));
  pointer-events: none;
  animation: tbTracePacketPulse 1.2s ease-in-out infinite;
}
@keyframes tbTracePacketPulse {
  0%, 100% { r: 8; }
  50%      { r: 11; }
}

/* In-flight badge overlay */
.tb-trace-badge-bg {
  fill: rgba(13, 10, 21, 0.94);
  stroke: var(--accent);
  stroke-width: 1.5;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.6));
  pointer-events: none;
}
.tb-trace-badge-bg-fail {
  stroke: #f87171;
}
.tb-trace-badge-arrow {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.5;
  pointer-events: none;
}
.tb-trace-badge-head {
  font-family: 'SF Mono', 'Menlo', 'Consolas', monospace;
  font-size: 9px;
  letter-spacing: .1em;
  fill: var(--accent-light);
  text-transform: uppercase;
  font-weight: 700;
  pointer-events: none;
}
.tb-trace-badge-bg-fail + .tb-trace-badge-arrow,
.tb-trace-badge-bg-fail ~ .tb-trace-badge-head {
  stroke: #f87171;
  fill: #f87171;
}
.tb-trace-badge-key {
  font-family: 'SF Mono', 'Menlo', 'Consolas', monospace;
  font-size: 8.5px;
  fill: var(--text-dim);
  letter-spacing: .04em;
  pointer-events: none;
}
.tb-trace-badge-val {
  font-family: 'SF Mono', 'Menlo', 'Consolas', monospace;
  font-size: 10px;
  fill: var(--text);
  font-weight: 500;
  pointer-events: none;
}
.tb-trace-badge-val-dim {
  font-family: 'SF Mono', 'Menlo', 'Consolas', monospace;
  font-size: 10px;
  fill: var(--text-mid);
  font-weight: 500;
  pointer-events: none;
}
.tb-trace-badge-ttl {
  font-family: 'SF Mono', 'Menlo', 'Consolas', monospace;
  font-size: 10px;
  fill: #4ade80;
  font-weight: 700;
  pointer-events: none;
}

/* Light-theme overrides */
[data-theme="light"] .tb-trace-panel {
  background: rgba(255, 255, 255, .96);
  border-color: rgba(99, 85, 224, .25);
}
[data-theme="light"] .tb-trace-eyebrow,
[data-theme="light"] .tb-trace-title em,
[data-theme="light"] .tb-trace-current-pill { color: #6355e0; }
[data-theme="light"] .tb-trace-hop-layer-l2,
[data-theme="light"] .tb-trace-hop-layer-arp { background: rgba(99, 85, 224, .1); color: #6355e0; }
[data-theme="light"] .tb-trace-badge-head { fill: #6355e0; }
[data-theme="light"] .tb-trace-badge-bg { stroke: #6355e0; }

/* Reduced motion: kill all trace animations */
@media (prefers-reduced-motion: reduce) {
  .tb-trace-panel,
  .tb-trace-hop-current .tb-trace-hop-dot,
  .tb-trace-packet,
  [data-tb-device].tb-trace-current circle,
  [data-tb-device].tb-trace-current rect,
  [data-tb-device].tb-trace-current .tb-device-shape { animation: none !important; }
  .tb-trace-progress-fill,
  .tb-trace-btn,
  .tb-trace-close,
  .tb-trace-speed { transition: none !important; }
}

/* Reduced motion: kill popup entrance animation + pill transform */
@media (prefers-reduced-motion: reduce) {
  .tb-inspector-pop { animation: none !important; }
  .tb-pill, .tb-zoom-btn { transition: none !important; }
}

/* ──────────────────────────────────────────────────────────────────────
   v4.62.0 — Spanning Tree Protocol Visualisation (issue #186)
   Auto-computed STP state decorates the canvas with: a floating crown
   over the root bridge; role-coloured port dots at each cable endpoint
   (gold root / green designated / red blocked); red dashed cable on
   blocked segments; a reconvergence pulse on switches whose role
   changed in the most recent recompute.
   ────────────────────────────────────────────────────────────────────── */

/* Port endpoint dots */
.tb-stp-port-dot {
  stroke: rgba(13, 10, 21, 0.88);
  stroke-width: 1.5;
  pointer-events: all;
  cursor: help;
}
.tb-stp-port-root {
  fill: #f5b73b;
  filter: drop-shadow(0 0 4px rgba(245, 183, 59, .75));
}
.tb-stp-port-designated {
  fill: #4ade80;
  filter: drop-shadow(0 0 3px rgba(74, 222, 128, .55));
}
.tb-stp-port-blocked {
  fill: #f87171;
  filter: drop-shadow(0 0 4px rgba(248, 113, 113, .65));
}

/* Blocked cable — red dashed override on the conductor */
.tb-cable.tb-cable-stp-blocked {
  stroke: #f87171 !important;
  stroke-dasharray: 8 6 !important;
  opacity: 0.72 !important;
  filter: drop-shadow(0 0 3px rgba(248, 113, 113, .35));
}

/* ✗ badge that sits above a blocked port dot */
.tb-stp-blocked-badge {
  pointer-events: none;
}
.tb-stp-blocked-badge-bg {
  fill: rgba(13, 10, 21, 0.94);
  stroke: #f87171;
  stroke-width: 1.5;
}
.tb-stp-blocked-badge-x {
  stroke: #f87171;
  stroke-width: 2.2;
  stroke-linecap: round;
  fill: none;
}

/* Root bridge crown marker */
.tb-stp-crown {
  pointer-events: all;
  cursor: help;
}
.tb-stp-crown-bg {
  fill: rgba(245, 183, 59, 0.18);
  stroke: rgba(245, 183, 59, 0.55);
  stroke-width: 1;
  filter: drop-shadow(0 2px 8px rgba(245, 183, 59, 0.2));
}
.tb-stp-crown-text {
  font-size: 14px;
  pointer-events: none;
}
.tb-stp-crown-label {
  font-family: 'SF Mono', 'Menlo', 'Consolas', monospace;
  font-size: 8.5px;
  letter-spacing: .14em;
  fill: #f5b73b;
  text-transform: uppercase;
  font-weight: 700;
  pointer-events: none;
}

/* Reconvergence pulse — fires on switches whose port-role changed in the
   most recent recompute; class is removed after 800ms via timeout. */
[data-tb-device].tb-stp-rethink circle,
[data-tb-device].tb-stp-rethink rect {
  animation: tbStpRethink 400ms ease-out;
}
@keyframes tbStpRethink {
  0%   { filter: drop-shadow(0 0 0 rgba(99, 85, 224, .0)); }
  40%  { filter: drop-shadow(0 0 14px rgba(99, 85, 224, .7)); }
  100% { filter: drop-shadow(0 0 0 rgba(99, 85, 224, .0)); }
}

/* Light theme overrides */
[data-theme="light"] .tb-stp-crown-bg {
  fill: rgba(245, 183, 59, 0.22);
  stroke: rgba(200, 143, 30, 0.6);
}
[data-theme="light"] .tb-stp-crown-label {
  fill: #c88f1e;
}
[data-theme="light"] .tb-stp-port-dot {
  stroke: rgba(255, 255, 255, 0.9);
}
[data-theme="light"] .tb-cable.tb-cable-stp-blocked {
  stroke: #e11d48 !important;
  opacity: 0.82 !important;
}

/* Reduced motion: no rethink pulse */
@media (prefers-reduced-motion: reduce) {
  [data-tb-device].tb-stp-rethink circle,
  [data-tb-device].tb-stp-rethink rect { animation: none !important; }
}

/* Light-theme overrides */
[data-theme="light"] .tb-canvas-pills {
  background: rgba(255, 255, 255, .92);
  border-color: rgba(99, 85, 224, .25);
}
[data-theme="light"] .tb-canvas-pills-sep { background: rgba(99, 85, 224, .2); }
[data-theme="light"] .tb-pill { color: #4b5563; }
[data-theme="light"] .tb-pill:hover { background: rgba(99, 85, 224, .12); color: #1f2937; }
[data-theme="light"] .tb-pill-active {
  background: linear-gradient(135deg, rgba(99, 85, 224, .22), rgba(99, 85, 224, .1));
  color: #4338ca;
  border-color: rgba(99, 85, 224, .42);
}
[data-theme="light"] .tb-pill-grade {
  background: linear-gradient(135deg, rgba(22, 163, 74, .18), rgba(22, 163, 74, .08));
  border-color: rgba(22, 163, 74, .35);
  color: #15803d;
}
[data-theme="light"] .tb-zoom-ctrls {
  background: rgba(255, 255, 255, .92);
  border-color: rgba(99, 85, 224, .25);
}
[data-theme="light"] .tb-zoom-btn { color: #1f2937; }
[data-theme="light"] .tb-zoom-btn:hover {
  background: rgba(99, 85, 224, .14);
  color: #4338ca;
}
[data-theme="light"] .tb-inspector-pop {
  background: rgba(255, 255, 255, .94);
  border-color: rgba(99, 85, 224, .25);
}
[data-theme="light"] .tb-inspector-pop-head {
  background: linear-gradient(135deg, rgba(99, 85, 224, .18), rgba(99, 85, 224, .08));
  border-bottom-color: rgba(99, 85, 224, .25);
}
[data-theme="light"] .tb-inspector-pop-title { color: #4338ca; }
[data-theme="light"] .tb-v3-scn-cat-head { color: #6355e0; }
[data-theme="light"] .tb-v3-scn-cat-count {
  background: rgba(99, 85, 224, .1);
  border-color: rgba(99, 85, 224, .22);
  color: #6355e0;
}

/* Narrow viewport tweaks */
@media (max-width: 760px) {
  .tb-canvas-pills {
    flex-wrap: wrap;
    gap: 3px;
    padding: 3px;
  }
  .tb-pill { font-size: 10.5px; padding: 5px 8px; }
  .tb-canvas-pills-sep { display: none; }
  .tb-inspector-pop { width: 240px; }
}

/* ════════════════════════════════════════════════════════════════════
   v4.54.7 — TB full-bleed + draggable config panel + collapsibles
   ════════════════════════════════════════════════════════════════════ */

/* (1) Full-bleed TB page: override default .page padding/max-width so the
       workspace uses all horizontal space between the app sidebar and the
       viewport right edge. Other pages (quiz/setup/exam) are unchanged. */
#page-topology-builder.page {
  max-width: none;
  padding-left: 16px;
  padding-right: 16px;
  margin-left: 0;
  margin-right: 0;
}
/* Widen the 3-col grid so the canvas dominates the viewport */
.tb-workspace.tb-workspace-v3 {
  grid-template-columns: 260px minmax(0, 1fr) 260px;
  min-height: calc(100vh - 220px);
}
.tb-canvas-wrap {
  min-height: calc(100vh - 240px);
  height: calc(100vh - 240px);
}
.tb-canvas { min-height: calc(100vh - 240px) !important; height: 100%; }
.tb-palette.tb-palette-v3,
.tb-v3-right {
  max-height: calc(100vh - 220px);
  position: relative; /* v4.60.1 anchor for collapse button + rail label */
}

/* ──────────────────────────────────────────────────────────────────────
   v4.60.1 — Collapsible side panes (left palette + right scenarios)
   Each pane has a small accent chevron toggle at its header that switches
   the workspace grid columns between full and collapsed widths. When
   collapsed, the pane shrinks to a 36px rail showing only a vertical
   label + re-expand chevron, giving the canvas the freed horizontal
   space. State persists per-pane via localStorage.
   ────────────────────────────────────────────────────────────────────── */
.tb-workspace.tb-workspace-v3 {
  transition: grid-template-columns 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.tb-workspace.tb-workspace-v3.tb-left-collapsed {
  grid-template-columns: 36px minmax(0, 1fr) 260px !important;
}
.tb-workspace.tb-workspace-v3.tb-right-collapsed {
  grid-template-columns: 260px minmax(0, 1fr) 36px !important;
}
.tb-workspace.tb-workspace-v3.tb-left-collapsed.tb-right-collapsed {
  grid-template-columns: 36px minmax(0, 1fr) 36px !important;
}

/* Collapse chevron buttons — small accent chip, always present at top corner */
.tb-pane-collapse-btn {
  position: absolute;
  top: 8px;
  width: 22px;
  height: 22px;
  background: rgba(var(--accent-rgb), .12);
  border: 1px solid rgba(var(--accent-rgb), .3);
  color: var(--accent-light);
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  transition: background .15s ease, transform .28s cubic-bezier(0.2, 0.8, 0.2, 1);
  font-family: inherit;
  padding: 0;
}
.tb-pane-collapse-btn:hover {
  background: rgba(var(--accent-rgb), .22);
}
.tb-pane-collapse-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.tb-pane-collapse-btn-left  { right: 8px; }
/* v4.62.5: right-pane chevron lives in the pane's outer-right corner
   (where close/collapse affordances conventionally sit) instead of
   crowding the "Scenarios" heading. */
.tb-pane-collapse-btn-right { right: 8px; }
.tb-left-collapsed  #tb-palette-collapse-btn { transform: rotate(180deg); }
.tb-right-collapsed #tb-right-collapse-btn   { transform: rotate(180deg); }

/* Rail label — vertical monospace text visible only when pane is collapsed.
   Clickable anywhere to re-expand, so users don't need to hunt for the
   tiny chevron. */
.tb-pane-rail-label {
  display: none;
  position: absolute;
  top: 44px;
  left: 50%;
  transform: translateX(-50%);
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-family: 'SF Mono', 'Menlo', 'Consolas', monospace;
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-mid);
  padding: 8px 0;
  user-select: none;
  cursor: pointer;
  transition: color .15s ease;
}
.tb-pane-rail-label:hover { color: var(--accent-light); }
.tb-left-collapsed  #tb-palette .tb-pane-rail-label,
.tb-right-collapsed #tb-v3-right .tb-pane-rail-label {
  display: block;
}

/* When collapsed, hide every direct child of the pane EXCEPT the collapse
   button and rail label. The pane becomes a thin rail with just those two. */
.tb-left-collapsed  #tb-palette > *:not(.tb-pane-collapse-btn):not(.tb-pane-rail-label),
.tb-right-collapsed #tb-v3-right > *:not(.tb-pane-collapse-btn):not(.tb-pane-rail-label) {
  display: none !important;
}

/* Light theme: flip accent to brand purple */
[data-theme="light"] .tb-pane-collapse-btn {
  background: rgba(99, 85, 224, .1);
  border-color: rgba(99, 85, 224, .3);
  color: #6355e0;
}
[data-theme="light"] .tb-pane-collapse-btn:hover {
  background: rgba(99, 85, 224, .22);
}
[data-theme="light"] .tb-pane-rail-label:hover { color: #6355e0; }

/* Reduced motion: kill the grid + button transitions */
@media (prefers-reduced-motion: reduce) {
  .tb-workspace.tb-workspace-v3,
  .tb-pane-collapse-btn { transition: none !important; }
}

/* When the config panel is open the v4.54.6 rule that reshaped the grid to
   200 / 1fr / 360 must be neutralised — the panel is now a floating popup,
   not a 4th column. */
.tb-workspace:has(.tb-config-panel:not(.is-hidden)),
.tb-workspace.tb-config-open {
  grid-template-columns: 260px minmax(0, 1fr) 260px;
}

/* (2) Collapsible legacy toolbar (v4.54.7). The in-canvas pill bar handles
       the primary actions now; this is the power-user drawer. Closed by
       default. */
.tb-toolbar-details {
  border: 1px solid rgba(124, 111, 247, .2);
  border-radius: 10px;
  background: rgba(124, 111, 247, .04);
}
.tb-toolbar-summary {
  list-style: none;
  cursor: pointer;
  padding: 9px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-dim);
  user-select: none;
  transition: color .15s ease, background .15s ease;
  border-radius: 10px;
}
.tb-toolbar-summary::-webkit-details-marker { display: none; }
.tb-toolbar-summary::before {
  content: '▸';
  font-family: system-ui;
  font-size: 10px;
  transition: transform .2s ease;
  color: var(--accent-light);
  letter-spacing: 0;
}
.tb-toolbar-details[open] > .tb-toolbar-summary::before {
  transform: rotate(90deg);
}
.tb-toolbar-summary:hover {
  background: rgba(124, 111, 247, .08);
  color: var(--text);
}
.tb-toolbar-summary-ico { font-size: 12px; }
.tb-toolbar-summary-hint {
  margin-left: auto;
  font-family: inherit;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-dim);
  opacity: .7;
}
.tb-toolbar-details[open] > .tb-toolbar-summary {
  border-bottom: 1px dashed rgba(124, 111, 247, .2);
  border-radius: 10px 10px 0 0;
}
.tb-toolbar-details .tb-toolbar,
.tb-toolbar-details .tb-toolbar-meta {
  margin: 0;
  border-radius: 0;
  border: none;
  background: transparent;
}
.tb-toolbar-details .tb-toolbar {
  padding: 10px 14px 6px;
}
.tb-toolbar-details .tb-toolbar-meta {
  padding: 0 14px 10px;
}

/* (3) Floating draggable config panel (v4.54.7). The panel used to be a
       grid column slide-out; now it's a position:fixed floating popup
       matching the inspector aesthetic. Open state is toggled by
       removing .is-hidden via tbOpenConfigPanel (unchanged). */
.tb-config-panel {
  position: fixed;
  top: 90px;
  right: 28px;
  z-index: 20;
  width: 440px;
  max-width: calc(100vw - 80px);
  max-height: calc(100vh - 130px);
  background: rgba(13, 10, 21, .88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(124, 111, 247, .35);
  border-left: 1px solid rgba(124, 111, 247, .35);
  border-radius: 14px;
  box-shadow: 0 16px 48px -12px rgba(0, 0, 0, .6);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: tbConfigPopIn .25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.tb-config-panel.is-hidden {
  display: none !important;
  animation: none;
}
@keyframes tbConfigPopIn {
  from { opacity: 0; transform: translateY(-6px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.tb-config-panel .tb-config-head {
  cursor: grab;
  user-select: none;
  background: linear-gradient(135deg, rgba(124, 111, 247, .26), rgba(124, 111, 247, .1));
  border-bottom: 1px solid rgba(124, 111, 247, .25);
  padding: 10px 14px;
}
.tb-config-panel .tb-config-head:active { cursor: grabbing; }
.tb-config-panel .tb-config-body {
  max-height: none;
  flex: 1;
  overflow-y: auto;
}

/* (4) Keep How-to-build + scenario requirements cards tighter. They're
       still collapsible via native <details>, but any nested expanded
       content sits inside a scrollable wrap so they never push the canvas
       far offscreen. */
.tb-howto-details[open] { max-height: 40vh; overflow-y: auto; }
.tb-scenario-panel:not(.is-hidden) { max-height: 32vh; overflow-y: auto; }

/* (5) Reduced-motion + light-theme overrides for v4.54.7 additions */
@media (prefers-reduced-motion: reduce) {
  .tb-config-panel { animation: none !important; }
  .tb-toolbar-summary::before,
  .tb-toolbar-details[open] > .tb-toolbar-summary::before { transition: none !important; }
}
[data-theme="light"] .tb-toolbar-details {
  background: rgba(99, 85, 224, .04);
  border-color: rgba(99, 85, 224, .2);
}
[data-theme="light"] .tb-toolbar-summary { color: #4b5563; }
[data-theme="light"] .tb-toolbar-summary::before { color: #6355e0; }
[data-theme="light"] .tb-toolbar-summary:hover {
  background: rgba(99, 85, 224, .08);
  color: #1f2937;
}
[data-theme="light"] .tb-config-panel {
  background: rgba(255, 255, 255, .94);
  border-color: rgba(99, 85, 224, .28);
  box-shadow: 0 16px 48px -12px rgba(99, 85, 224, .25);
}
[data-theme="light"] .tb-config-panel .tb-config-head {
  background: linear-gradient(135deg, rgba(99, 85, 224, .18), rgba(99, 85, 224, .08));
  border-bottom-color: rgba(99, 85, 224, .25);
}

/* (6) Responsive: on narrow viewports (<900px) stack the workspace and
       use auto height. Already handled elsewhere but re-forced here for
       the new full-bleed page. */
@media (max-width: 900px) {
  .tb-workspace.tb-workspace-v3 {
    min-height: auto;
  }
  .tb-canvas-wrap {
    min-height: 500px;
    height: 500px;
  }
  .tb-config-panel {
    top: 60px;
    right: 12px;
    width: calc(100vw - 24px);
    max-height: calc(100vh - 80px);
  }
}

/* ════════════════════════════════════════════════════════════════════
   v4.54.8 — Editorial prototype completion
   • Sidebar nav-count pills
   • Results: elapsed-time + Review answers list + Drill-mistakes CTA
   • Home: Marathon SIM badge + § section 80px accent strip + weak-topic chips
     + dark customizer prose-summary CTA bar + Quick Start color-cycling
   • Analytics: sparklines in stats strip + accuracy-over-time chart
   • Quiz: segmented progress dots + editorial kbd-hints + wrongExplain block
   ════════════════════════════════════════════════════════════════════ */

/* ── Sidebar nav-count pills ── */
.sb-item-count {
  margin-left: auto;
  font-family: monospace;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-dim);
  background: rgba(124, 111, 247, .08);
  border: 1px solid rgba(124, 111, 247, .16);
  padding: 1px 6px;
  border-radius: 99px;
  letter-spacing: .03em;
  opacity: .75;
  transition: opacity .15s ease, color .15s ease;
}
.sb-item:hover .sb-item-count { opacity: 1; color: var(--accent-light); }
.sb-item-active .sb-item-count {
  background: rgba(124, 111, 247, .2);
  color: var(--accent-light);
  border-color: rgba(124, 111, 247, .3);
  opacity: 1;
}
[data-theme="light"] .sb-item-count {
  background: rgba(99, 85, 224, .08);
  border-color: rgba(99, 85, 224, .18);
  color: #6b6785;
}
[data-theme="light"] .sb-item-active .sb-item-count {
  background: rgba(99, 85, 224, .16);
  color: #6355e0;
  border-color: rgba(99, 85, 224, .3);
}

/* ── Results: elapsed-time row already uses existing .results-v2-row styles ── */

/* ── Results: inline Review answers list ── */
.results-v2-review {
  margin-top: 48px;
  padding-top: 40px;
  border-top: 2px solid var(--border);
  position: relative;
}
.results-v2-review::before {
  content: '';
  position: absolute;
  top: -2px; left: 0;
  width: 80px; height: 2px;
  background: var(--accent);
}
.results-v2-review-head { margin-bottom: 20px; }
.results-v2-review-eyebrow {
  font-family: monospace;
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent-light);
  font-weight: 700;
  margin-bottom: 6px;
  padding-left: 14px;
  position: relative;
}
.results-v2-review-eyebrow::before {
  content: '—';
  position: absolute;
  left: 0; top: 0;
  color: var(--accent-light);
}
.results-v2-review-title {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--text);
}
.results-v2-review-title em {
  font-style: italic;
  color: var(--accent-light);
}
.results-v2-review-list {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}
.results-v2-review-row {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 14px 18px;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: background .15s ease, padding-left .15s ease;
  color: var(--text);
}
.results-v2-review-row:last-child { border-bottom: none; }
.results-v2-review-row:hover {
  padding-left: 22px;
  background: rgba(124, 111, 247, .06);
}
.results-v2-review-num {
  font-family: monospace;
  font-size: 11px;
  color: var(--text-dim);
  letter-spacing: .04em;
  font-weight: 600;
}
.results-v2-review-body { min-width: 0; }
.results-v2-review-q {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -0.01em;
  margin-bottom: 4px;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.results-v2-review-meta {
  font-family: monospace;
  font-size: 10px;
  color: var(--text-dim);
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .75;
}
.results-v2-review-mark {
  font-family: monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 4px;
  flex-shrink: 0;
}
.results-v2-review-mark-ok {
  background: rgba(34, 197, 94, .15);
  color: #86efac;
  border: 1px solid rgba(34, 197, 94, .3);
}
.results-v2-review-mark-bad {
  background: rgba(239, 68, 68, .15);
  color: #fca5a5;
  border: 1px solid rgba(239, 68, 68, .3);
}
.results-v2-review-empty {
  padding: 32px;
  text-align: center;
  color: var(--text-dim);
  font-size: 13px;
  font-style: italic;
}
[data-theme="light"] .results-v2-review::before { background: #6355e0; }
[data-theme="light"] .results-v2-review-eyebrow,
[data-theme="light"] .results-v2-review-title em { color: #6355e0; }
[data-theme="light"] .results-v2-review-eyebrow::before { color: #6355e0; }
[data-theme="light"] .results-v2-review-mark-ok {
  background: rgba(22, 163, 74, .12); color: #15803d;
  border-color: rgba(22, 163, 74, .28);
}
[data-theme="light"] .results-v2-review-mark-bad {
  background: rgba(220, 38, 38, .1); color: #b91c1c;
  border-color: rgba(220, 38, 38, .28);
}
[data-theme="light"] .results-v2-review-row:hover { background: rgba(99, 85, 224, .08); }

/* ── Home: Marathon SIM badge ── */
.preset-tile.preset-sim { position: relative; }
.preset-sim-badge {
  position: absolute;
  top: 12px;
  right: 14px;
  font-family: monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--yellow);
  background: rgba(251, 191, 36, .15);
  border: 1px solid rgba(251, 191, 36, .45);
  padding: 2px 6px;
  border-radius: 3px;
}
[data-theme="light"] .preset-sim-badge {
  color: #d97706;
  background: rgba(217, 119, 6, .12);
  border-color: rgba(217, 119, 6, .4);
}

/* ── Home: § section 80px accent strip (prototype pattern) ── */
.ed-section-head {
  position: relative;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--border);
}
.ed-section-head::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 80px;
  height: 2px;
  background: var(--accent);
}
[data-theme="light"] .ed-section-head { border-bottom-color: rgba(99, 85, 224, .2); }
[data-theme="light"] .ed-section-head::after { background: #6355e0; }

/* ── Home: weak-topic chips inside domain cells ── */
.dg-weak-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px dashed rgba(var(--accent-rgb), .15);
}
.dg-weak-chip {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .02em;
  padding: 2px 7px;
  border-radius: 3px;
  background: transparent;
  border: 1px solid rgba(var(--accent-rgb), .35);
  color: var(--accent-light);
  white-space: nowrap;
}
[data-theme="light"] .dg-weak-chip {
  border-color: rgba(99, 85, 224, .4);
  color: #6355e0;
}

/* ── Home: dark customizer prose-summary CTA bar ── */
.cq-summary-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 22px;
  padding: 18px 22px;
  background: linear-gradient(135deg, #16131f, #0d0a15);
  border-radius: 12px;
  border: 1px solid rgba(124, 111, 247, .25);
  box-shadow: 0 8px 24px -12px rgba(0, 0, 0, .4);
}
.cq-summary-prose {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(255, 255, 255, .88);
}
.cq-summary-prose strong {
  color: var(--yellow);
  font-weight: 700;
  font-family: inherit;
}
.cq-summary-prose em {
  font-style: italic;
  color: var(--accent-light);
}
.cq-summary-cta {
  flex-shrink: 0;
  padding: 12px 22px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, var(--accent), var(--accent-deep));
  border: 1px solid rgba(255, 255, 255, .15);
  box-shadow: 0 4px 16px -4px rgba(124, 111, 247, .5);
  transition: transform .15s ease, box-shadow .15s ease;
}
.cq-summary-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px -4px rgba(124, 111, 247, .65);
}
.cq-summary-cta:active { transform: translateY(0); }
[data-theme="light"] .cq-summary-bar {
  background: linear-gradient(135deg, #1e1b2e, #0f0d1c);
  border-color: rgba(99, 85, 224, .3);
}
[data-theme="light"] .cq-summary-prose strong { color: #fbbf24; }
[data-theme="light"] .cq-summary-cta {
  background: linear-gradient(135deg, #6355e0, #4F46E5);
}
@media (max-width: 560px) {
  .cq-summary-bar { flex-direction: column; align-items: stretch; }
  .cq-summary-cta { justify-content: center; width: 100%; }
}

/* ── Home: Quick Start card colour-cycling + hover accent-bar slide-in ── */
.quiz-presets .preset-tile {
  position: relative;
  overflow: hidden;
}
.quiz-presets .preset-tile::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .28s cubic-bezier(0.2, 0.8, 0.2, 1);
  background: var(--accent);
}
.quiz-presets .preset-tile:hover::after { transform: scaleX(1); }
.quiz-presets .preset-tile:nth-child(1)::after { background: var(--accent); }
.quiz-presets .preset-tile:nth-child(2)::after { background: var(--green); }
.quiz-presets .preset-tile:nth-child(3)::after { background: var(--yellow); }
.quiz-presets .preset-tile:nth-child(4)::after { background: var(--red); }

/* ── Analytics: inline sparklines under stats cells ── */
.ana-hero-stat-spark {
  display: block;
  width: 100%;
  height: 22px;
  margin-top: 6px;
  opacity: .7;
}
.ana-hero-stat:hover .ana-hero-stat-spark { opacity: 1; }

/* ── Analytics: Accuracy-over-time chart card ── */
.ana-accchart-card {
  padding: 22px 22px 18px;
}
.ana-accchart-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.ana-accchart-eyebrow {
  font-family: monospace;
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent-light);
  font-weight: 700;
  margin-bottom: 5px;
  padding-left: 14px;
  position: relative;
}
.ana-accchart-eyebrow::before {
  content: '—';
  position: absolute;
  left: 0; top: 0;
  color: var(--accent-light);
}
.ana-accchart-title {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--text);
}
.ana-accchart-title em {
  font-style: italic;
  color: var(--accent-light);
}
.ana-accchart-tabs {
  display: flex;
  gap: 4px;
  padding: 3px;
  background: rgba(var(--accent-rgb), .06);
  border: 1px solid rgba(var(--accent-rgb), .14);
  border-radius: 8px;
}
.ana-accchart-tab {
  padding: 5px 11px;
  font-family: monospace;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-dim);
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.ana-accchart-tab:hover { color: var(--text); background: rgba(var(--accent-rgb), .08); }
.ana-accchart-tab-active {
  background: linear-gradient(135deg, rgba(var(--accent-rgb), .2), rgba(var(--accent-rgb), .1));
  color: var(--accent-light);
}
.ana-accchart-wrap {
  width: 100%;
  aspect-ratio: 960 / 220;
  max-height: 280px;
}
.ana-accchart-svg { width: 100%; height: 100%; display: block; }
[data-theme="light"] .ana-accchart-eyebrow,
[data-theme="light"] .ana-accchart-title em { color: #6355e0; }
[data-theme="light"] .ana-accchart-tab-active {
  background: linear-gradient(135deg, rgba(99, 85, 224, .18), rgba(99, 85, 224, .08));
  color: #6355e0;
}
@media (max-width: 680px) {
  .ana-accchart-title { font-size: 18px; }
  .ana-accchart-head { align-items: flex-start; }
}

/* ── Quiz: segmented progress dots ── */
.quiz-prog-dots {
  display: flex;
  gap: 4px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed rgba(var(--accent-rgb), .12);
  overflow-x: auto;
  padding-bottom: 2px;
}
.qpd-cell {
  flex: 0 0 18px;
  width: 18px;
  height: 4px;
  border-radius: 99px;
  background: rgba(var(--accent-rgb), .12);
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.qpd-cell.qpd-done { background: var(--green); height: 6px; }
.qpd-cell.qpd-wrong { background: var(--red); height: 6px; }
.qpd-cell.qpd-now { background: var(--accent); height: 8px; box-shadow: 0 0 0 2px rgba(var(--accent-rgb), .18); }
[data-theme="light"] .qpd-cell { background: rgba(99, 85, 224, .14); }
[data-theme="light"] .qpd-cell.qpd-now { background: #6355e0; box-shadow: 0 0 0 2px rgba(99, 85, 224, .2); }
[data-theme="light"] .qpd-cell.qpd-done { background: #16a34a; }
[data-theme="light"] .qpd-cell.qpd-wrong { background: #dc2626; }

/* v4.82.0: Quiz-only — dots are clickable buttons with numbers, distinct
   from the thin exam-mode dots (exam has its own navigator UI). Scoped via
   #quiz-prog-dots parent so exam dots stay unchanged. */
#quiz-prog-dots .qpd-cell {
  flex: 0 0 22px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--surface3);
  border: 1px solid rgba(var(--accent-rgb), .25);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; color: var(--text-dim);
  cursor: pointer;
  padding: 0;
  user-select: none;
  font-family: inherit;
  transition: transform .12s ease, border-color .15s ease, color .15s ease, background-color .15s ease;
}
#quiz-prog-dots .qpd-cell:hover {
  transform: scale(1.15);
  border-color: var(--accent);
  z-index: 1;
}
#quiz-prog-dots .qpd-cell:focus-visible {
  outline: 2px solid var(--accent-light);
  outline-offset: 2px;
}
#quiz-prog-dots .qpd-cell.qpd-done {
  background: rgba(34, 197, 94, .18);
  border-color: var(--green);
  color: var(--green);
  height: 22px;
}
#quiz-prog-dots .qpd-cell.qpd-wrong {
  background: rgba(248, 113, 113, .15);
  border-color: var(--red);
  color: var(--red);
  height: 22px;
}
#quiz-prog-dots .qpd-cell.qpd-now {
  background: var(--accent);
  border-color: var(--accent-light);
  color: white;
  height: 22px;
  box-shadow: 0 0 0 2px rgba(var(--accent-rgb), .3);
}
#quiz-prog-dots .qpd-cell.qpd-now.qpd-done {
  /* Currently revisiting a previously-correct question — green tint with accent ring */
  background: var(--green);
  color: white;
  box-shadow: 0 0 0 2px rgba(34, 197, 94, .35);
}
#quiz-prog-dots .qpd-cell.qpd-now.qpd-wrong {
  /* Currently revisiting a previously-wrong question — red tint with accent ring */
  background: var(--red);
  color: white;
  box-shadow: 0 0 0 2px rgba(248, 113, 113, .35);
}
[data-theme="light"] #quiz-prog-dots .qpd-cell { background: #efeef9; border-color: rgba(99, 85, 224, .25); color: #6b6b90; }
[data-theme="light"] #quiz-prog-dots .qpd-cell.qpd-done { background: rgba(22, 163, 74, .15); border-color: #16a34a; color: #16a34a; }
[data-theme="light"] #quiz-prog-dots .qpd-cell.qpd-wrong { background: rgba(220, 38, 38, .12); border-color: #dc2626; color: #dc2626; }
[data-theme="light"] #quiz-prog-dots .qpd-cell.qpd-now { background: #6355e0; color: white; }

/* v4.82.0: Quiz nav arrows (prev/next) — sit inside .progress-label flanking the q-label. */
.progress-label .quiz-nav-arrow {
  background: var(--surface3);
  border: 1px solid var(--border);
  color: var(--text);
  cursor: pointer;
  width: 26px; height: 26px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 700; line-height: 1;
  padding: 0;
  margin: 0 6px;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
  font-family: inherit;
}
.progress-label .quiz-nav-arrow:hover:not(:disabled) {
  background: rgba(var(--accent-rgb), .18);
  border-color: var(--accent);
  color: var(--accent-light);
  transform: translateY(-1px);
}
.progress-label .quiz-nav-arrow:focus-visible {
  outline: 2px solid var(--accent-light);
  outline-offset: 2px;
}
.progress-label .quiz-nav-arrow:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
.progress-label {
  align-items: center;
}
[data-theme="light"] .progress-label .quiz-nav-arrow { background: white; border-color: rgba(99, 85, 224, .2); color: #2b2b40; }
[data-theme="light"] .progress-label .quiz-nav-arrow:hover:not(:disabled) { background: rgba(99, 85, 224, .08); border-color: #6355e0; color: #6355e0; }

/* v4.82.0: Revisit banner — yellow info pill that surfaces during revisit
   to set expectations: score updates on re-pick; streak doesn't move. */
.quiz-revisit-banner {
  display: flex; gap: 10px; align-items: center;
  margin-top: 14px; padding: 10px 14px;
  background: rgba(251, 191, 36, .08);
  border: 1px dashed rgba(251, 191, 36, .4);
  border-radius: 10px;
  font-size: 12px; color: var(--yellow); font-weight: 600;
}
.quiz-revisit-banner .revisit-banner-icon { font-size: 16px; flex-shrink: 0; }
.quiz-revisit-banner .revisit-banner-text { line-height: 1.5; }
[data-theme="light"] .quiz-revisit-banner { background: rgba(245, 158, 11, .08); border-color: rgba(245, 158, 11, .35); color: #b45309; }

/* v4.82.0: when revisiting, re-enable click affordance on already-graded options.
   The .correct/.wrong/.reveal-correct/.dimmed markers remain so the user still
   sees their previous outcome, but cursor + hover indicate the option is clickable. */
.options.is-revisiting .option,
.options.is-revisiting .ms-option {
  cursor: pointer;
}
.options.is-revisiting .option:hover,
.options.is-revisiting .ms-option:hover {
  filter: brightness(1.15);
}

/* v4.82.0: reduced-motion gate for the new transitions. */
@media (prefers-reduced-motion: reduce) {
  #quiz-prog-dots .qpd-cell,
  .progress-label .quiz-nav-arrow,
  .options.is-revisiting .option,
  .options.is-revisiting .ms-option {
    transition: none !important;
  }
  #quiz-prog-dots .qpd-cell:hover,
  .progress-label .quiz-nav-arrow:hover:not(:disabled) {
    transform: none !important;
  }
}

/* ══════════════════════════════════════════
   v4.83.0 — Hot-Area question type
   ══════════════════════════════════════════ */
/* Shared stage container for all 3 sub-shapes */
.hot-area-stage {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 24px;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 240px;
}
.hot-area-svg {
  max-width: 100%;
  height: auto;
}

/* Submit row (shared) */
.ha-submit-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  background: rgba(var(--accent-rgb), .05);
  border: 1px dashed rgba(var(--accent-rgb), .25);
  border-radius: 10px;
  font-size: 12px;
  color: var(--text-mid);
  gap: 12px;
}
.ha-submit-row.is-hidden { display: none; }
.ha-hint { flex: 1; }

/* ── Topology sub-shape — SVG region styling ── */
.hot-area-svg .hot-area-connector {
  stroke: var(--accent);
  stroke-width: 1.5;
  opacity: 0.55;
}
.hot-region {
  cursor: pointer;
  transition: filter .2s ease;
}
.hot-region rect,
.hot-region circle {
  fill: var(--surface3);
  stroke: var(--border);
  stroke-width: 1.5;
  transition: fill .2s ease, stroke .2s ease, stroke-width .2s ease;
}
.hot-region:hover rect,
.hot-region:hover circle {
  fill: rgba(var(--accent-rgb), .18);
  stroke: var(--accent);
  stroke-width: 2;
}
.hot-region:focus-visible {
  outline: none;
}
.hot-region:focus-visible rect,
.hot-region:focus-visible circle {
  stroke: var(--accent-light);
  stroke-width: 2.5;
}
.hot-region text {
  fill: var(--text);
  font-size: 13px;
  font-weight: 600;
  pointer-events: none;
  text-anchor: middle;
  dominant-baseline: middle;
}
.hot-region.is-picked rect,
.hot-region.is-picked circle {
  fill: rgba(var(--accent-rgb), .35);
  stroke: var(--accent-light);
  stroke-width: 2.5;
}
.hot-region.is-correct rect,
.hot-region.is-correct circle {
  fill: rgba(34,197,94,.35);
  stroke: var(--green);
  stroke-width: 2.5;
}
.hot-region.is-wrong rect,
.hot-region.is-wrong circle {
  fill: rgba(248,113,113,.30);
  stroke: var(--red);
  stroke-width: 2.5;
}
.hot-region.is-reveal-correct rect,
.hot-region.is-reveal-correct circle {
  fill: rgba(34,197,94,.18);
  stroke: var(--green);
  stroke-width: 2;
  stroke-dasharray: 4 3;
}
.hot-region.is-dimmed {
  opacity: 0.4;
}

/* ── OSI sub-shape — vertical layer stack ── */
.osi-stack {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 280px;
  width: 100%;
  max-width: 360px;
}
.osi-layer {
  padding: 12px 16px;
  border-radius: 10px;
  background: var(--surface3);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: var(--text);
}
.osi-layer:hover {
  background: rgba(var(--accent-rgb), .12);
  border-color: var(--accent);
}
.osi-layer:focus-visible {
  outline: 2px solid var(--accent-light);
  outline-offset: 2px;
}
.osi-layer.is-picked {
  background: rgba(var(--accent-rgb), .30);
  border-color: var(--accent-light);
}
.osi-layer.is-correct {
  background: rgba(34,197,94,.30);
  border-color: var(--green);
  color: var(--green);
  font-weight: 600;
}
.osi-layer.is-wrong {
  background: rgba(248,113,113,.25);
  border-color: var(--red);
}
.osi-layer.is-reveal-correct {
  background: rgba(34,197,94,.12);
  border: 2px dashed var(--green);
}
.osi-layer.is-dimmed {
  opacity: 0.4;
}
.osi-layer-num {
  font-weight: 700;
  color: var(--accent-light);
}
.osi-layer-name {
  font-weight: 600;
}

/* ── Cable-grid sub-shape — connector cards ── */
.cable-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  width: 100%;
  max-width: 480px;
}
@media (max-width: 540px) {
  .cable-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
.cable-card {
  padding: 12px 8px;
  border-radius: 10px;
  background: var(--surface3);
  border: 2px solid var(--border);
  cursor: pointer;
  text-align: center;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
  color: var(--text-mid);
}
.cable-card:hover {
  background: rgba(var(--accent-rgb), .10);
  border-color: var(--accent);
  color: var(--accent-light);
  transform: translateY(-2px);
}
.cable-card:focus-visible {
  outline: 2px solid var(--accent-light);
  outline-offset: 2px;
}
.cable-card.is-picked {
  border-color: var(--accent-light);
  background: rgba(var(--accent-rgb), .20);
  color: var(--accent-light);
}
.cable-card.is-correct {
  border-color: var(--green);
  background: rgba(34,197,94,.20);
  color: var(--green);
}
.cable-card.is-wrong {
  border-color: var(--red);
  background: rgba(248,113,113,.18);
  color: var(--red);
}
.cable-card.is-reveal-correct {
  border: 2px dashed var(--green);
  background: rgba(34,197,94,.10);
  color: var(--green);
}
.cable-card.is-dimmed {
  opacity: 0.4;
}
.cable-icon {
  display: block;
  margin: 0 auto 6px;
}
.cable-icon svg {
  display: block;
  margin: 0 auto;
}
.cable-name {
  font-size: 12px;
  font-weight: 600;
}

/* Reduced-motion gate for hot-area transitions */
@media (prefers-reduced-motion: reduce) {
  .hot-region,
  .hot-region rect,
  .hot-region circle,
  .osi-layer,
  .cable-card {
    transition: none !important;
  }
  .cable-card:hover {
    transform: none !important;
  }
}

[data-theme="light"] .hot-area-stage {
  background: #fbfbff;
  border-color: rgba(99, 85, 224, .14);
}
[data-theme="light"] .osi-layer {
  background: #efeef9;
  border-color: rgba(99, 85, 224, .14);
}
[data-theme="light"] .cable-card {
  background: #efeef9;
  border-color: rgba(99, 85, 224, .14);
}

/* ══════════════════════════════════════════
   v4.84.0 — Network Analysis Drill (Phase 1, issue #270)
   ══════════════════════════════════════════ */

/* Drill tile — NEW variant for the launcher entry */
.drills-tile-new {
  background: linear-gradient(135deg, rgba(6,182,212,.10), rgba(124,111,247,.08)) !important;
  border-color: #06b6d4 !important;
  position: relative;
}
.drills-tile-new:hover {
  background: linear-gradient(135deg, rgba(6,182,212,.16), rgba(124,111,247,.12)) !important;
  border-color: #06b6d4 !important;
}
.drills-tile-new-badge {
  display: inline-block;
  background: #06b6d4;
  color: white;
  font-size: 9px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: .08em;
  margin-left: 6px;
  vertical-align: middle;
}

/* Mode tabs */
.na-tabs {
  display: flex;
  gap: 4px;
  background: var(--surface3);
  border-radius: 10px;
  padding: 4px;
  margin-bottom: 20px;
  width: fit-content;
}
.na-tab {
  padding: 8px 18px;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  color: var(--text-mid);
  background: transparent;
  border: none;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
  font-family: inherit;
}
.na-tab.na-tab-active {
  background: var(--accent);
  color: white;
}
.na-tab:not(.na-tab-active):hover { color: var(--text); }
.na-tab-pane.is-hidden { display: none; }

/* Question card */
.na-question-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px 24px;
}
.na-q-meta {
  display: flex; gap: 8px; margin-bottom: 10px; flex-wrap: wrap;
  align-items: center;
}
.na-q-num {
  font-size: 11px; font-weight: 700; color: var(--text-mid); letter-spacing: .04em;
  margin-right: auto;
}
.na-cat-badge {
  background: rgba(6,182,212,.15); color: #06b6d4;
  font-size: 10px; font-weight: 700; padding: 3px 9px;
  border-radius: 99px; letter-spacing: .05em; text-transform: uppercase;
}
.na-diff-badge {
  font-size: 10px; font-weight: 700; padding: 3px 9px;
  border-radius: 99px; letter-spacing: .05em; text-transform: uppercase;
}
.na-diff-badge.na-diff-foundational {
  background: rgba(34,197,94,.15); color: var(--green);
}
.na-diff-badge.na-diff-examlevel {
  background: rgba(251,146,60,.15); color: var(--orange);
}
.na-q-stem {
  font-size: 16px; font-weight: 600; line-height: 1.5;
  margin: 8px 0 14px; color: var(--text);
}
.na-q-stem code {
  font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', monospace;
  font-size: 0.95em;
  background: rgba(124,111,247,.1);
  padding: 1px 5px;
  border-radius: 4px;
  color: var(--accent-light);
}

/* Output block (monospace tcpdump/Wireshark output) */
.na-output-block {
  background: #0a0a12;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  margin: 10px 0;
  font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', monospace;
  font-size: 12px;
  line-height: 1.55;
  color: #c8d8e8;
  overflow-x: auto;
  white-space: pre;
}
[data-theme="light"] .na-output-block {
  background: #1e1e2e;
  border-color: rgba(99, 85, 224, .25);
  color: #d8e8f0;
}
.na-out-time { color: var(--text-dim); }
.na-out-flag { color: var(--accent-light); font-weight: 600; }
.na-out-ip { color: var(--green); }
.na-out-port { color: var(--yellow); }
.na-out-comment { color: var(--text-dim); font-style: italic; }

/* Options */
.na-options {
  display: flex; flex-direction: column; gap: 8px; margin-top: 12px;
}
.na-option {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  cursor: pointer;
  text-align: left;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
  font-size: 13.5px;
  line-height: 1.45;
  display: flex; gap: 12px; align-items: flex-start;
  color: var(--text);
  font-family: inherit;
}
.na-option:hover:not([disabled]) {
  border-color: var(--accent);
  background: rgba(124,111,247,.06);
}
.na-option:focus-visible {
  outline: 2px solid var(--accent-light);
  outline-offset: 2px;
}
.na-option-letter {
  font-weight: 700; color: var(--accent-light); flex-shrink: 0; width: 22px;
}
.na-option-text { flex: 1; }
.na-option code {
  font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', monospace;
  font-size: 0.92em;
  background: rgba(124,111,247,.1);
  padding: 1px 4px;
  border-radius: 3px;
  color: var(--accent-light);
}
.na-option.is-correct {
  background: rgba(34,197,94,.12);
  border-color: var(--green);
}
.na-option.is-wrong {
  background: rgba(248,113,113,.12);
  border-color: var(--red);
}
.na-option.is-reveal-correct {
  background: rgba(34,197,94,.06);
  border-color: var(--green);
  border-style: dashed;
}
.na-option.is-dimmed { opacity: 0.5; }

/* Explanation */
.na-explanation {
  margin-top: 16px; padding: 14px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 10px;
  border-left-width: 4px;
}
.na-explanation.is-correct { border-left-color: var(--green); }
.na-explanation.is-wrong { border-left-color: var(--red); }
.na-exp-label { font-weight: 700; font-size: 13px; margin-bottom: 6px; }
.na-explanation.is-correct .na-exp-label { color: var(--green); }
.na-explanation.is-wrong .na-exp-label { color: var(--red); }
.na-exp-text { font-size: 13px; color: var(--text-mid); line-height: 1.6; }
.na-exp-text code {
  font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', monospace;
  font-size: 0.92em;
  background: rgba(124,111,247,.1);
  padding: 1px 4px;
  border-radius: 3px;
  color: var(--accent-light);
}
.na-next-row {
  display: flex; justify-content: flex-end; margin-top: 14px;
}

/* Dashboard */
.na-dash-callout {
  background: linear-gradient(135deg, rgba(124,111,247,.12), rgba(124,111,247,.04));
  border: 1px solid rgba(124,111,247,.3);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 16px;
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px;
}
.na-dash-eyebrow {
  font-size: 10px; font-weight: 800; letter-spacing: .14em;
  color: var(--accent-light); text-transform: uppercase;
}
.na-dash-headline { font-size: 16px; font-weight: 700; margin: 4px 0; }
.na-dash-sub { font-size: 12px; color: var(--text-mid); }

.na-cat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 14px;
}
@media (max-width: 540px) { .na-cat-grid { grid-template-columns: 1fr; } }
.na-cat-card {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.na-cat-card:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
}
.na-cat-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 8px;
}
.na-cat-name { font-size: 14px; font-weight: 700; color: var(--text); }
.na-cat-attempts { font-size: 11px; color: var(--text-dim); }
.na-cat-bar {
  height: 6px; background: var(--surface3);
  border-radius: 99px; overflow: hidden;
  margin-bottom: 6px;
}
.na-cat-bar-fill {
  height: 100%; border-radius: 99px;
  transition: width .8s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.na-cat-bar-fill.na-cat-high { background: linear-gradient(90deg, var(--green), #16a34a); }
.na-cat-bar-fill.na-cat-mid { background: linear-gradient(90deg, var(--yellow), var(--orange)); }
.na-cat-bar-fill.na-cat-low { background: linear-gradient(90deg, var(--red), #dc2626); }
.na-cat-bar-fill.na-cat-empty { background: var(--surface3); }
.na-cat-pct { font-size: 12px; font-weight: 600; }
.na-cat-pct.na-cat-high { color: var(--green); }
.na-cat-pct.na-cat-mid { color: var(--orange); }
.na-cat-pct.na-cat-low { color: var(--red); }
.na-cat-pct.na-cat-empty { color: var(--text-dim); }

/* Lessons index */
.na-lessons-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}
.na-lesson-tile {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
  text-align: left;
  font-family: inherit;
  color: var(--text);
}
.na-lesson-tile:hover {
  background: rgba(6,182,212,.06);
  border-color: #06b6d4;
  transform: translateY(-2px);
}
.na-lesson-tile-num {
  font-size: 10px; font-weight: 800; letter-spacing: .14em;
  color: #06b6d4; text-transform: uppercase;
}
.na-lesson-tile-title {
  font-size: 16px; font-weight: 700; margin: 4px 0;
}
.na-lesson-tile-sub {
  font-size: 12px; color: var(--text-mid); line-height: 1.5;
  margin-bottom: 8px;
}
.na-lesson-tile-progress {
  font-size: 11px; color: var(--text-dim); font-weight: 600;
}

/* Lesson card */
.na-lesson-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px 24px;
}
.na-back-btn {
  background: var(--surface3);
  border: 1px solid var(--border);
  color: var(--text-mid);
  padding: 6px 14px;
  border-radius: 99px;
  font-size: 12px;
  cursor: pointer;
  font-family: inherit;
  margin-bottom: 14px;
}
.na-back-btn:hover { color: var(--text); border-color: var(--accent); }
.na-lesson-eyebrow {
  font-size: 10px; font-weight: 800; letter-spacing: .14em;
  color: #06b6d4; text-transform: uppercase; margin-bottom: 4px;
}
.na-lesson-title { font-size: 22px; font-weight: 700; margin-bottom: 4px; }
.na-lesson-sub { color: var(--text-mid); font-size: 13px; margin-bottom: 18px; }

.na-step-progress {
  display: flex; gap: 4px; margin-bottom: 20px;
}
.na-step-pip {
  flex: 1; height: 4px; background: var(--surface3); border-radius: 99px;
  transition: background .3s ease, border-color .3s ease, color .3s ease;
}
.na-step-pip.done { background: #06b6d4; }
.na-step-pip.current { background: var(--accent); height: 6px; align-self: center; }

.na-step-card {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px 18px;
  margin-bottom: 12px;
}
.na-step-num {
  display: inline-block;
  background: var(--accent-dim);
  color: var(--accent-light);
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 99px;
  margin-bottom: 8px;
}
.na-step-h3 { font-size: 16px; font-weight: 700; margin-bottom: 8px; color: var(--text); }
.na-step-body { font-size: 13.5px; color: var(--text-mid); line-height: 1.6; }
.na-step-body code {
  font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', monospace;
  font-size: 0.92em;
  background: rgba(124,111,247,.1);
  padding: 1px 5px;
  border-radius: 4px;
  color: var(--accent-light);
}
.na-step-body strong { color: var(--text); }
.na-step-example {
  background: #0a0a12;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px 12px;
  margin-top: 10px;
  font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', monospace;
  font-size: 12px;
  line-height: 1.55;
  color: #c8d8e8;
  overflow-x: auto;
  white-space: pre;
}

/* Cheatsheet */
.na-cheat-table {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px;
  margin-top: 14px;
}
.na-cheat-head {
  font-size: 11px; font-weight: 700; color: var(--text-dim);
  letter-spacing: .1em; text-transform: uppercase; margin-bottom: 10px;
}
.na-cheat-row {
  display: grid; grid-template-columns: 1fr 2fr; gap: 14px;
  padding: 8px 0; border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.na-cheat-row:last-child { border-bottom: none; }
.na-cheat-pattern {
  font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', monospace;
  color: var(--accent-light);
  font-size: 12px;
}
.na-cheat-desc {
  color: var(--text-mid); font-size: 12.5px; line-height: 1.5;
}

.na-lesson-cta-row {
  display: flex; justify-content: space-between; margin-top: 20px;
}

/* Reduced-motion gate */
@media (prefers-reduced-motion: reduce) {
  .na-cat-card,
  .na-lesson-tile,
  .na-step-pip,
  .na-cat-bar-fill,
  .na-option {
    transition: none !important;
  }
  .na-cat-card:hover,
  .na-lesson-tile:hover { transform: none !important; }
}

[data-theme="light"] .na-cat-card,
[data-theme="light"] .na-step-card {
  background: #efeef9;
  border-color: rgba(99, 85, 224, .14);
}

/* ── Quiz: editorial kbd-hints footer ── */
.quiz-kbd-hints {
  display: flex;
  justify-content: center;
  gap: 28px;
  margin-top: 20px;
  padding: 14px 16px;
  font-size: 11.5px;
  color: var(--text-dim);
  flex-wrap: wrap;
}
.quiz-kbd-hints span { display: inline-flex; align-items: center; gap: 6px; }
.quiz-kbd-hints kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 22px;
  padding: 0 6px;
  font-family: monospace;
  font-size: 11px;
  font-weight: 700;
  color: var(--text);
  background: rgba(var(--accent-rgb), .08);
  border: 1px solid rgba(var(--accent-rgb), .25);
  border-bottom-width: 2px;
  border-radius: 4px;
  margin-right: 2px;
}
[data-theme="light"] .quiz-kbd-hints kbd {
  background: rgba(99, 85, 224, .08);
  border-color: rgba(99, 85, 224, .3);
  color: #1f2937;
}
/* Hide the legacy .kb-hint since the new editorial footer replaces it */
#page-quiz .kb-hint { display: none !important; }

/* ── Quiz: wrong-explain block (per-choice feedback) ── */
.exp-wrong-explain {
  margin-top: 14px;
  padding: 12px 14px;
  font-size: 13px;
  line-height: 1.6;
  font-style: italic;
  color: var(--text-mid);
  background: rgba(var(--accent-rgb), .04);
  border-left: 3px solid rgba(var(--accent-rgb), .4);
  border-radius: 0 8px 8px 0;
}
[data-theme="light"] .exp-wrong-explain {
  background: rgba(99, 85, 224, .05);
  border-left-color: rgba(99, 85, 224, .4);
}

/* Reduced-motion: neutralise the new transitions */
@media (prefers-reduced-motion: reduce) {
  .quiz-presets .preset-tile::after,
  .cq-summary-cta,
  .results-v2-review-row,
  .qpd-cell,
  .ana-accchart-tab { transition: none !important; }
}

/* ════════════════════════════════════════════════════════════════════
   v4.54.9 — Editorial sweep on remaining pages + global zoom-in
   • Reusable .ed-pagehead component (eyebrow + italic-accent display)
     applied to Progress / Review / Settings / Drills Launcher pages
   • Exam Results v2 (editorial parallel to Results v2)
   • Session Transition / Session Complete editorial hero
   • Exam progress dots + kbd-hints (parity with quiz)
   • Global ~6% zoom-in for readability
   • Remove sidebar drill nav-count pills (retired by user request)
   ════════════════════════════════════════════════════════════════════ */

/* ── (1) Global zoom-in — v4.54.9 was 1.06; v4.54.11 bumped to 1.10 per
        user request ("zoom in the app a bit more"). CSS `zoom` works on
        Chrome/Safari/Edge (Firefox Gecko v126+). Applied at root; cascades
        to all descendants including sidebar. ── */
html { zoom: 1.10; }

/* ── (2) Reusable editorial page header component ── */
.ed-pagehead {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 28px;
  padding-bottom: 18px;
  border-bottom: 2px solid var(--border);
  position: relative;
  flex-wrap: wrap;
}
.ed-pagehead::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 80px;
  height: 2px;
  background: var(--accent);
}
.ed-pagehead-back {
  padding: 10px 16px;
  flex-shrink: 0;
  margin-top: 2px;
}
.ed-pagehead-body { flex: 1; min-width: 0; }
.ed-pagehead-eyebrow {
  font-family: monospace;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent-light);
  font-weight: 700;
  margin-bottom: 6px;
  padding-left: 14px;
  position: relative;
}
.ed-pagehead-eyebrow::before {
  content: '—';
  position: absolute;
  left: 0; top: 0;
  color: var(--accent-light);
}
.ed-pagehead-display {
  font-size: 38px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin: 0 0 6px;
  color: var(--text);
}
.ed-pagehead-display em {
  font-style: italic;
  color: var(--accent-light);
}
.ed-pagehead-lede {
  font-size: 14px;
  color: var(--text-dim);
  margin: 0;
  line-height: 1.55;
  max-width: 640px;
}
[data-theme="light"] .ed-pagehead::after { background: #6355e0; }
[data-theme="light"] .ed-pagehead-eyebrow,
[data-theme="light"] .ed-pagehead-display em { color: #6355e0; }
[data-theme="light"] .ed-pagehead-eyebrow::before { color: #6355e0; }
@media (max-width: 680px) {
  .ed-pagehead-display { font-size: 30px; }
  .ed-pagehead { gap: 12px; }
}

/* ── (3) Exam Results v2 — parallels Results v2 aesthetic ── */
.exam-results-v2 {
  margin-bottom: 40px;
}
.exam-results-v2-display {
  font-size: 50px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.02;
  margin: 10px 0 24px;
  color: var(--text);
}
.exam-results-v2-display em {
  font-style: italic;
  color: var(--accent-light);
}
.exam-results-v2-hero {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 0;
  background: linear-gradient(160deg, #16131f, #0d0a15);
  border: 1px solid rgba(124, 111, 247, .25);
  border-radius: 16px;
  padding: 32px 36px;
  margin-bottom: 28px;
  position: relative;
  overflow: hidden;
}
.exam-results-v2-hero::before {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 50%; height: 100%;
  background: radial-gradient(circle at top right, rgba(124, 111, 247, .14), transparent 70%);
  pointer-events: none;
}
.exam-results-v2-big {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.exam-results-v2-big-label {
  font-family: monospace;
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .5);
  font-weight: 700;
  margin-bottom: 6px;
}
.exam-results-v2-big-score {
  font-size: 84px;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, .95);
  margin-bottom: 10px;
}
.exam-results-v2-verdict {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 10px;
}
.exam-results-v2-verdict .pass-badge {
  font-family: monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  padding: 5px 14px;
  border-radius: 4px;
}
.exam-results-v2-msg {
  font-size: 14px;
  color: rgba(255, 255, 255, .75);
  margin: 6px 0 4px;
  line-height: 1.55;
}
.exam-results-v2-threshold {
  font-family: monospace;
  font-size: 10.5px;
  color: rgba(255, 255, 255, .4);
  letter-spacing: .06em;
  text-transform: uppercase;
  margin: 0;
}
.exam-results-v2-side {
  position: relative;
  z-index: 1;
  border-left: 1px dashed rgba(255, 255, 255, .1);
  padding-left: 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
}
.exam-results-v2-side .results-v2-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.exam-results-v2-side .results-v2-row:last-child { border-bottom: none; }
.exam-results-v2-side .results-v2-row .k {
  font-family: monospace;
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .6);
  font-weight: 600;
}
.exam-results-v2-side .results-v2-row .v {
  font-family: monospace;
  font-size: 22px;
  font-weight: 700;
  color: rgba(255, 255, 255, .95);
  font-variant-numeric: tabular-nums;
}
@media (max-width: 680px) {
  .exam-results-v2-hero { grid-template-columns: 1fr; padding: 24px 22px; }
  .exam-results-v2-side { border-left: none; border-top: 1px dashed rgba(255, 255, 255, .1); padding-left: 0; padding-top: 22px; margin-top: 20px; }
  .exam-results-v2-display { font-size: 38px; }
  .exam-results-v2-big-score { font-size: 64px; }
}

/* Retire the legacy exam-results-hero card-style */
.exam-results-hero { display: none !important; }

/* ── (4) Session Transition + Complete editorial hero ── */
.session-hero-v2 {
  text-align: center;
  padding: 40px 24px 28px;
  margin-bottom: 24px;
}
.session-hero-v2 .session-emoji {
  display: block;
  font-size: 56px;
  margin-bottom: 16px;
}
.session-hero-eyebrow {
  font-family: monospace;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent-light);
  font-weight: 700;
  margin-bottom: 10px;
  display: inline-block;
  padding-left: 14px;
  position: relative;
}
.session-hero-eyebrow::before {
  content: '—';
  position: absolute;
  left: 0; top: 0;
  color: var(--accent-light);
}
.session-hero-display {
  font-size: 42px;
  font-weight: 800;
  letter-spacing: -0.03em;
  margin: 0 0 8px;
  color: var(--text);
  line-height: 1.05;
}
.session-hero-display em {
  font-style: italic;
  color: var(--accent-light);
}
[data-theme="light"] .session-hero-eyebrow,
[data-theme="light"] .session-hero-display em { color: #6355e0; }
[data-theme="light"] .session-hero-eyebrow::before { color: #6355e0; }
@media (max-width: 680px) {
  .session-hero-display { font-size: 32px; }
}

/* ── (5) Exam segmented progress dots — extend with "flagged" state ── */
#exam-prog-dots.quiz-prog-dots { margin-top: 8px; padding-top: 6px; }
.qpd-cell.qpd-flagged { background: var(--yellow); height: 6px; }
[data-theme="light"] .qpd-cell.qpd-flagged { background: #d97706; }

/* ── (6) Hide retired sidebar count pills ── */
.sb-item-count { display: none !important; }

/* ── (7) Retire the legacy .pass-threshold inside the new exam-results hero */
.exam-results-v2 .pass-threshold { display: none; }

/* ── (8) Drills launcher tiles — editorial polish to match prototype card aesthetic */
.drills-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin-top: 8px;
}
.drills-tile {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  cursor: pointer;
  text-align: left;
  position: relative;
  overflow: hidden;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
  color: var(--text);
}
.drills-tile::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .28s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.drills-tile:hover {
  transform: translateY(-2px);
  border-color: rgba(var(--accent-rgb), .4);
  box-shadow: 0 8px 24px -8px rgba(124, 111, 247, .25);
}
.drills-tile:hover::after { transform: scaleX(1); }
.drills-tile-icon {
  font-size: 28px;
  margin-bottom: 4px;
}
.drills-tile-title {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--text);
}
.drills-tile-sub {
  font-size: 12px;
  font-family: monospace;
  color: var(--text-dim);
  letter-spacing: .04em;
}
.drills-tile:nth-child(1)::after { background: var(--accent); }
.drills-tile:nth-child(2)::after { background: var(--green); }
.drills-tile:nth-child(3)::after { background: var(--blue, #3b82f6); }
.drills-tile:nth-child(4)::after { background: var(--yellow); }

/* ── (9) Reduced-motion neutralise for all new v4.54.9 transitions ── */
@media (prefers-reduced-motion: reduce) {
  .drills-tile,
  .drills-tile::after { transition: none !important; }
}

/* ════════════════════════════════════════════════════════════════════
   v4.54.10 — Streak card hero, vertical domain topics, heatmap,
              editable daily goal, constellation grid, Recent Perf retired
   ════════════════════════════════════════════════════════════════════ */

/* ── (1) Sidebar streak hero card restyle — dark glass rounded card
       matching prototype screenshot: flame left, 28px white "12" over
       "DAY STREAK" monospace small-caps. ── */
.sb-foot { padding: 14px 4px 6px; border-top: 1px solid var(--border); }
.sb-streak {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: linear-gradient(135deg, #1e1b2e, #0f0c1b);
  border: 1px solid rgba(124, 111, 247, .25);
  border-radius: 12px;
  box-shadow: 0 6px 18px -8px rgba(0, 0, 0, .5);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  cursor: default;
  width: 100%;
  text-align: left;
}
.sb-streak-active { cursor: pointer; }
.sb-streak-active:hover {
  transform: translateY(-1px);
  border-color: rgba(124, 111, 247, .45);
  box-shadow: 0 10px 28px -8px rgba(124, 111, 247, .35);
}
.sb-streak-flame {
  font-size: 26px;
  line-height: 1;
  filter: drop-shadow(0 2px 6px rgba(245, 158, 11, .55));
  flex-shrink: 0;
}
.sb-streak-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sb-streak-num {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #ffffff;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.sb-streak-label {
  font-size: 10.5px;
  color: rgba(255, 255, 255, .55);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-family: monospace;
  font-weight: 700;
}
[data-theme="light"] .sb-streak {
  /* Keep the dark-card aesthetic even in light theme \u2014 design intent */
  background: linear-gradient(135deg, #1e1b2e, #0f0c1b);
  border-color: rgba(99, 85, 224, .32);
}
[data-theme="light"] .sb-streak-active:hover {
  border-color: rgba(99, 85, 224, .5);
  box-shadow: 0 10px 28px -8px rgba(99, 85, 224, .35);
}

/* ── (2) Domain grid — vertical canonical topics list per cell ── */
.domain-cell .dg-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-width: 0;
}
.dg-topic-list {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
  border-top: 1px dashed rgba(var(--accent-rgb), .14);
  padding-top: 8px;
}
/* v4.85.18: 3 visual states for the domain-grid topic chips:
   • dg-topic-weak     — needs work (accent color, bold, glowing dot)
   • dg-topic-studied  — practised, no urgent action (normal text-mid color)
   • dg-topic-untouched— never studied (dim + italic + hollow dot)
   Pre-v4.85.18 default state used --text-dim which made studied-but-strong
   topics look identical to never-studied ones. User dogfood: "why are some
   of these still greyed out? ive already attempted all topics." */
.dg-topic {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-mid);
  line-height: 1.25;
  min-width: 0;
}
.dg-topic-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(var(--accent-rgb), .28);
  flex-shrink: 0;
}
.dg-topic-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
/* State 1 — weak: accent color + bold + glowing dot */
.dg-topic-weak { color: var(--accent-light); font-weight: 600; }
.dg-topic-weak .dg-topic-dot {
  background: var(--accent);
  box-shadow: 0 0 0 2px rgba(var(--accent-rgb), .18);
}
[data-theme="light"] .dg-topic-weak { color: #6355e0; }
[data-theme="light"] .dg-topic-weak .dg-topic-dot {
  background: #6355e0;
  box-shadow: 0 0 0 2px rgba(99, 85, 224, .2);
}
/* State 2 — studied (default-ish): readable text, no urgent treatment */
.dg-topic-studied {
  color: var(--text-mid);
  font-weight: 500;
}
.dg-topic-studied .dg-topic-dot {
  background: rgba(var(--accent-rgb), .35);
}
/* State 3 — untouched: dim + italic + hollow dot */
.dg-topic-untouched {
  color: var(--text-dim);
  font-style: italic;
  opacity: .7;
}
.dg-topic-untouched .dg-topic-dot {
  background: transparent;
  border: 1px solid var(--text-dim);
  width: 5px;
  height: 5px;
  box-sizing: border-box;
}
/* Retire the v4.54.8 wrap-chip styles */
.dg-weak-chips, .dg-weak-chip { display: none !important; }

/* ── (3) Settings — editable Daily Goal section ── */
.settings-daily-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.settings-daily-input {
  width: 90px;
  padding: 10px 12px;
  font-size: 18px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  text-align: center;
  font-family: monospace;
}
.settings-daily-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .15);
}
.settings-daily-unit {
  font-size: 13px;
  color: var(--text-dim);
  flex: 1;
}
.settings-daily-save {
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 700;
}
.settings-daily-presets {
  display: flex;
  gap: 6px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.settings-daily-chip {
  padding: 5px 14px;
  font-family: monospace;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-dim);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 99px;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.settings-daily-chip:hover {
  background: rgba(var(--accent-rgb), .08);
  color: var(--text);
  border-color: rgba(var(--accent-rgb), .3);
}
.settings-daily-chip.is-active {
  background: linear-gradient(135deg, rgba(var(--accent-rgb), .2), rgba(var(--accent-rgb), .1));
  color: var(--accent-light);
  border-color: var(--accent);
}
[data-theme="light"] .settings-daily-chip.is-active {
  background: linear-gradient(135deg, rgba(99, 85, 224, .18), rgba(99, 85, 224, .08));
  color: #6355e0;
  border-color: #6355e0;
}

/* ── (4) Knowledge Constellation grid overlay (prototype detail) ── */
.ana-const-map {
  position: relative;
}
.ana-const-map::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(var(--accent-rgb), .08) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(var(--accent-rgb), .08) 1px, transparent 1px);
  background-size: 40px 40px;
  opacity: .6;
  border-radius: inherit;
}
.ana-const-map > svg, .ana-const-map > * { position: relative; z-index: 1; }
[data-theme="light"] .ana-const-map::before {
  background-image:
    linear-gradient(to right, rgba(99, 85, 224, .07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(99, 85, 224, .07) 1px, transparent 1px);
}

/* ── (5) Analytics heatmap card (GitHub-style) ── */
.ana-heatmap-card { padding: 22px 22px 18px; }
.ana-heatmap-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.ana-heatmap-eyebrow {
  font-family: monospace;
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent-light);
  font-weight: 700;
  margin-bottom: 5px;
  padding-left: 14px;
  position: relative;
}
.ana-heatmap-eyebrow::before {
  content: '—';
  position: absolute;
  left: 0; top: 0;
  color: var(--accent-light);
}
.ana-heatmap-title {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--text);
}
.ana-heatmap-title em {
  font-style: italic;
  color: var(--accent-light);
}
.ana-heatmap-stats {
  display: flex;
  gap: 20px;
  align-items: flex-end;
}
.ana-heatmap-stat {
  text-align: center;
}
.hms-val {
  font-size: 22px;
  font-weight: 800;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  margin-bottom: 4px;
}
.hms-lbl {
  font-family: monospace;
  font-size: 9.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-dim);
  font-weight: 700;
}
.ana-heatmap-wrap {
  width: 100%;
  overflow-x: auto;
  padding: 4px 0;
}
.ana-heatmap-svg {
  width: 100%;
  min-width: 720px;
  height: auto;
  display: block;
}
.hm-cell {
  cursor: pointer;
  transition: transform .1s ease;
}
.hm-cell:hover {
  stroke: var(--accent-light);
  stroke-width: 1.5;
}
/* Intensity tiers */
.hm-cell-t0 { fill: rgba(var(--accent-rgb), .08); }
.hm-cell-t1 { fill: rgba(var(--accent-rgb), .28); }
.hm-cell-t2 { fill: rgba(var(--accent-rgb), .52); }
.hm-cell-t3 { fill: rgba(var(--accent-rgb), .78); }
.hm-cell-t4 { fill: var(--accent); }
.hm-cell-today { stroke: var(--yellow); stroke-width: 2; }
.hm-cell-exam { fill: var(--red) !important; stroke: #ffffff; stroke-width: 1.5; }
.hm-month, .hm-dow {
  font-family: monospace;
  font-size: 9.5px;
  fill: var(--text-dim);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.ana-heatmap-legend {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  font-family: monospace;
  font-size: 10.5px;
  color: var(--text-dim);
  letter-spacing: .06em;
  text-transform: uppercase;
  flex-wrap: wrap;
}
.hm-legend-lbl { font-weight: 600; }
.hm-legend-exam-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  padding: 3px 8px;
  border: 1px dashed var(--border);
  border-radius: 4px;
}
.hm-legend-exam-swatch {
  width: 11px; height: 11px;
  border-radius: 2px;
  background: var(--red);
  display: inline-block;
  border: 1px solid #ffffff;
}
[data-theme="light"] .hm-cell-t0 { fill: rgba(99, 85, 224, .08); }
[data-theme="light"] .hm-cell-t1 { fill: rgba(99, 85, 224, .28); }
[data-theme="light"] .hm-cell-t2 { fill: rgba(99, 85, 224, .52); }
[data-theme="light"] .hm-cell-t3 { fill: rgba(99, 85, 224, .78); }
[data-theme="light"] .hm-cell-t4 { fill: #6355e0; }
[data-theme="light"] .ana-heatmap-title em { color: #6355e0; }
[data-theme="light"] .ana-heatmap-eyebrow { color: #6355e0; }
[data-theme="light"] .ana-heatmap-eyebrow::before { color: #6355e0; }
@media (max-width: 680px) {
  .ana-heatmap-head { flex-direction: column; align-items: flex-start; }
  .ana-heatmap-stats { gap: 14px; }
  .hms-val { font-size: 18px; }
  .ana-heatmap-title { font-size: 18px; }
}

/* ── (6) Reduced-motion guard for the new transitions ── */
@media (prefers-reduced-motion: reduce) {
  .hm-cell { transition: none !important; }
  .settings-daily-chip { transition: none !important; }
}

/* ════════════════════════════════════════════════════════════════════
   v4.54.11 / v4.54.12 — Lift sidebar streak card WELL above the dock
   v4.54.11's 32px padding still got clipped. v4.54.12 caps the fixed-
   sidebar height to calc(100vh - 140px) so the column physically can't
   extend into the dock region + adds 24px padding + 16/8 footer breathing
   room. Total: streak card sits ~170px above the viewport bottom.
   ════════════════════════════════════════════════════════════════════ */
.app-sidebar {
  height: calc(100vh - 140px) !important;
  max-height: calc(100vh - 140px);
  padding-bottom: max(24px, env(safe-area-inset-bottom, 0px));
}
.sb-foot {
  padding-bottom: 16px;
  margin-bottom: 8px;
}

/* ════════════════════════════════════════════════════════════════════
   v4.54.14 — Reusable .ed-cardhead (Analytics secondary cards editorial)
   Brings Trend / Difficulty / Topics CTA / Activity / Exams / Streak /
   Wrong-Patterns / Exam-vs-Quiz / Milestones into line with the
   prototype's card-level header pattern used elsewhere.
   ════════════════════════════════════════════════════════════════════ */
.ed-cardhead {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px dashed rgba(var(--accent-rgb), .16);
}
.ed-cardhead-eyebrow {
  font-family: monospace;
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent-light);
  font-weight: 700;
  padding-left: 14px;
  position: relative;
  opacity: .85;
}
.ed-cardhead-eyebrow::before {
  content: '—';
  position: absolute;
  left: 0; top: 0;
  color: var(--accent-light);
}
.ed-cardhead-title {
  margin: 0;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text);
  line-height: 1.1;
}
.ed-cardhead-title em {
  font-style: italic;
  color: var(--accent-light);
}
/* Milestones card — .ana-ms-head was a flex row; keep the progress bar
   beside the cardhead on wide viewports */
.ana-ms-head { align-items: flex-start; gap: 16px; }
.ana-ms-head .ed-cardhead { flex: 1; min-width: 0; }
[data-theme="light"] .ed-cardhead-eyebrow,
[data-theme="light"] .ed-cardhead-eyebrow::before,
[data-theme="light"] .ed-cardhead-title em {
  color: #6355e0;
}
@media (max-width: 680px) {
  .ed-cardhead-title { font-size: 17px; }
  .ana-ms-head { flex-direction: column; }
}

/* ════════════════════════════════════════════════════════════════════
   v4.54.15 — Multi-select topic chips in Custom Quiz
   Domain chips (non-mode) now toggle independently. Visual distinction:
   active chips get the standard `.chip.on` treatment. When 2+ domain
   chips are active, the parent `#topic-group` adds a subtle outline so
   the user sees "multi-select engaged" at a glance. Handled purely by
   the existing chip styling + a small wrapper badge for the count.
   ════════════════════════════════════════════════════════════════════ */
#topic-group .chip:not(.cq-mode-card).on {
  /* Slightly stronger border so multi-selected chips feel distinct from
     the mode cards. Fill stays the standard .chip.on gradient. */
  outline: 2px solid rgba(var(--accent-rgb), .35);
  outline-offset: -1px;
}
[data-theme="light"] #topic-group .chip:not(.cq-mode-card).on {
  outline-color: rgba(99, 85, 224, .35);
}

/* ════════════════════════════════════════════════════════════════════
   v4.54.16 — Wider TB palette + Settings exam date + modal editorial head
   ════════════════════════════════════════════════════════════════════ */

/* (1) TB workspace palette column widened 220px → 260px (user asked).
        The grid rules themselves were updated in place above; this
        block just notes the intent. No extra declaration needed. */

/* (2) Settings — Exam Date row wrapper
       The inner chip is rendered by _buildExamDateChipHtml() which
       already carries full styling; we just need a container that
       pads nicely inside the settings card. */
.settings-exam-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.settings-exam-row .ana-exam-date-btn { flex: 0 0 auto; }

/* (3) Editorial modal head — matches .ed-cardhead but used inside
       .modal-box. Paired with the existing .modal-box padding; the
       `.ed-modalhead` replaces the old plain <h2>Title</h2> block. */
.ed-modalhead {
  margin: 0 0 18px;
  padding-bottom: 14px;
  border-bottom: 1px dashed rgba(var(--accent-rgb), .2);
}
.ed-modalhead-eyebrow {
  font-family: monospace;
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent-light);
  font-weight: 700;
  margin-bottom: 6px;
  padding-left: 14px;
  position: relative;
  opacity: .9;
}
.ed-modalhead-eyebrow::before {
  content: '—';
  position: absolute;
  left: 0; top: 0;
  color: var(--accent-light);
}
.ed-modalhead-title {
  margin: 0;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--text);
}
.ed-modalhead-title em {
  font-style: italic;
  color: var(--accent-light);
}
[data-theme="light"] .ed-modalhead-eyebrow,
[data-theme="light"] .ed-modalhead-eyebrow::before,
[data-theme="light"] .ed-modalhead-title em {
  color: #6355e0;
}

/* ════════════════════════════════════════════════════════════════════
   v4.54.17 — Topbar countdown + end-of-day recap + follow-up button
   All three match the editorial aesthetic (monospace eyebrow, italic-
   accent display, .ed-modalhead for the recap, dark-glass chip for
   the countdown).
   ════════════════════════════════════════════════════════════════════ */

/* (A) Topbar exam countdown chip */
.topbar-countdown {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  margin-right: 6px;
  font-family: monospace;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .05em;
  color: var(--text);
  background: rgba(var(--accent-rgb), .1);
  border: 1px solid rgba(var(--accent-rgb), .24);
  border-radius: 8px;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.topbar-countdown:hover {
  background: rgba(var(--accent-rgb), .18);
  border-color: rgba(var(--accent-rgb), .4);
  transform: translateY(-1px);
}
.topbar-countdown.is-hidden { display: none !important; }
.topbar-countdown-ico { font-size: 13px; line-height: 1; }
.topbar-countdown-val { font-variant-numeric: tabular-nums; }
/* Urgency tiers */
.topbar-countdown-ok { color: var(--text); background: rgba(var(--accent-rgb), .1); border-color: rgba(var(--accent-rgb), .24); }
.topbar-countdown-soon {
  color: var(--yellow);
  background: rgba(251, 191, 36, .1);
  border-color: rgba(251, 191, 36, .3);
}
.topbar-countdown-urgent {
  color: var(--red);
  background: rgba(239, 68, 68, .12);
  border-color: rgba(239, 68, 68, .35);
  animation: topbarCountdownPulse 2.4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.topbar-countdown-past {
  color: var(--green);
  background: rgba(34, 197, 94, .1);
  border-color: rgba(34, 197, 94, .28);
}
@keyframes topbarCountdownPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, .35); }
  50%      { box-shadow: 0 0 0 4px rgba(239, 68, 68, 0); }
}
[data-theme="light"] .topbar-countdown-soon   { color: #d97706; background: rgba(217, 119, 6, .1); border-color: rgba(217, 119, 6, .3); }
[data-theme="light"] .topbar-countdown-urgent { color: #dc2626; background: rgba(220, 38, 38, .1); border-color: rgba(220, 38, 38, .3); }
[data-theme="light"] .topbar-countdown-past   { color: #16a34a; background: rgba(22, 163, 74, .1); border-color: rgba(22, 163, 74, .28); }
@media (max-width: 540px) {
  .topbar-countdown { padding: 3px 8px; font-size: 10.5px; }
  .topbar-countdown-ico { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .topbar-countdown-urgent { animation: none !important; }
  .topbar-countdown { transition: none !important; }
}

/* (B) End-of-day recap modal */
.daily-recap-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0, 0, 0, .55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.daily-recap-modal[hidden] { display: none; }
.daily-recap-card {
  position: relative;
  width: 100%;
  max-width: 480px;
  background: linear-gradient(160deg, #16131f, #0d0a15);
  border: 1px solid rgba(124, 111, 247, .32);
  border-radius: 16px;
  box-shadow: 0 24px 64px -12px rgba(0, 0, 0, .6);
  padding: 28px 28px 22px;
  color: var(--text);
  animation: dailyRecapIn .32s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes dailyRecapIn {
  from { opacity: 0; transform: translateY(-12px) scale(.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.daily-recap-close {
  position: absolute;
  top: 12px; right: 14px;
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  color: rgba(255, 255, 255, .6);
  background: transparent;
  border: none;
  cursor: pointer;
  border-radius: 6px;
  transition: background .15s ease, color .15s ease;
}
.daily-recap-close:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.daily-recap-card .ed-modalhead-title { color: rgba(255, 255, 255, .95); }
.daily-recap-card .ed-modalhead-eyebrow { color: var(--accent-light); opacity: 1; }
.daily-recap-card .ed-modalhead { border-bottom-color: rgba(124, 111, 247, .28); }
.daily-recap-stats {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 4px 0 20px;
}
.dr-stat-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 10px 14px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .06);
  border-radius: 10px;
}
.dr-stat-k {
  font-family: monospace;
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
  font-weight: 700;
}
.dr-stat-v {
  font-size: 14px;
  color: rgba(255, 255, 255, .92);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.dr-stat-v strong { font-size: 16px; font-weight: 800; color: #fff; }
.dr-stat-delta {
  font-family: monospace;
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 99px;
}
.dr-stat-delta-up { background: rgba(34, 197, 94, .18); color: #86efac; border: 1px solid rgba(34, 197, 94, .35); }
.dr-stat-delta-down { background: rgba(239, 68, 68, .15); color: #fca5a5; border: 1px solid rgba(239, 68, 68, .3); }
.dr-stat-delta-neutral { background: rgba(255, 255, 255, .08); color: rgba(255, 255, 255, .6); border: 1px solid rgba(255, 255, 255, .15); }
.daily-recap-foot {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
[data-theme="light"] .daily-recap-card .ed-modalhead-eyebrow,
[data-theme="light"] .daily-recap-card .ed-modalhead-eyebrow::before,
[data-theme="light"] .daily-recap-card .ed-modalhead-title em {
  color: #a78bfa;
}
@media (prefers-reduced-motion: reduce) {
  .daily-recap-card { animation: none !important; }
}
@media (max-width: 540px) {
  .daily-recap-card { padding: 22px 20px 18px; }
}

/* (C) Follow-up drill button */
.explain-btn-followup {
  background: linear-gradient(135deg, rgba(var(--accent-rgb), .18), rgba(var(--accent-rgb), .06)) !important;
  border: 1px solid rgba(var(--accent-rgb), .32) !important;
  color: var(--accent-light) !important;
}
.explain-btn-followup:hover {
  background: linear-gradient(135deg, rgba(var(--accent-rgb), .28), rgba(var(--accent-rgb), .12)) !important;
  transform: translateY(-1px);
}
[data-theme="light"] .explain-btn-followup {
  color: #6355e0 !important;
  border-color: rgba(99, 85, 224, .3) !important;
}

/* ════════════════════════════════════════════════════════════════════
   v4.55.0 — ACL Fix-This + Packet Flow Visualisation (issue #179)
   Editorial dark-glass packet pills slide down the rule list, highlight
   each rule they inspect, and burst at the match. Matches the prototype
   aesthetic across accent-light, green, red, and dashed borders.
   ════════════════════════════════════════════════════════════════════ */

/* Replay button next to Test All */
.acl-test-replay {
  font-size: 12px;
  padding: 10px 14px;
  margin-left: 8px;
}

/* Fix-It scenario category chip in picker — use orange/warm tint so it's
   distinct from Fundamentals/Real-world/PBQ */
.acl-scenario-cat[data-cat="Fix It"] {
  border-left: 3px solid var(--orange, #fb923c);
}

/* Rule-list overlay container for floating packet pills */
#acl-rule-list { position: relative; }
.acl-packet-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
}

/* The floating packet pill */
.acl-packet-pill {
  position: absolute;
  top: 0;
  left: 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  background: linear-gradient(135deg, rgba(13, 10, 21, .92), rgba(30, 27, 46, .92));
  border: 1px solid rgba(124, 111, 247, .45);
  border-radius: 99px;
  font-family: monospace;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .02em;
  color: rgba(255, 255, 255, .92);
  box-shadow: 0 4px 12px -2px rgba(124, 111, 247, .45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: top .32s cubic-bezier(0.4, 0, 0.2, 1), transform .3s ease, opacity .4s ease;
  opacity: 0;
  transform: translateX(-4px);
  white-space: nowrap;
  max-width: calc(100% - 16px);
  overflow: hidden;
  text-overflow: ellipsis;
}
.acl-packet-pill-in {
  opacity: 1;
  transform: translateX(0);
}
.acl-packet-proto {
  text-transform: uppercase;
  font-size: 9.5px;
  opacity: .7;
  padding: 1px 5px;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 3px;
}
.acl-packet-arrow { opacity: .6; }
/* Per-packet accent tone so multiple in-flight pills are visually distinct */
.acl-packet-pill-0 { border-color: rgba(124, 111, 247, .55); box-shadow: 0 4px 14px -2px rgba(124, 111, 247, .5); }
.acl-packet-pill-1 { border-color: rgba(34, 197, 94, .55);   box-shadow: 0 4px 14px -2px rgba(34, 197, 94, .5); }
.acl-packet-pill-2 { border-color: rgba(59, 130, 246, .55);  box-shadow: 0 4px 14px -2px rgba(59, 130, 246, .5); }
.acl-packet-pill-3 { border-color: rgba(245, 158, 11, .55);  box-shadow: 0 4px 14px -2px rgba(245, 158, 11, .5); }

/* Burst states when the pill reaches its matching rule */
.acl-packet-burst-permit {
  background: linear-gradient(135deg, rgba(34, 197, 94, .9), rgba(22, 163, 74, .9)) !important;
  border-color: rgba(134, 239, 172, .9) !important;
  color: #ffffff !important;
  transform: scale(1.08);
  box-shadow: 0 0 0 4px rgba(34, 197, 94, .28), 0 8px 24px -4px rgba(34, 197, 94, .65) !important;
}
.acl-packet-burst-deny {
  background: linear-gradient(135deg, rgba(239, 68, 68, .92), rgba(220, 38, 38, .92)) !important;
  border-color: rgba(252, 165, 165, .9) !important;
  color: #ffffff !important;
  transform: scale(1.08);
  box-shadow: 0 0 0 4px rgba(239, 68, 68, .28), 0 8px 24px -4px rgba(239, 68, 68, .65) !important;
}
.acl-packet-fade {
  opacity: 0 !important;
  transform: translateY(-6px) scale(.92) !important;
}

/* Rule being inspected — accent pulse ring */
.acl-rule-row {
  transition: box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
.acl-rule-inspecting {
  box-shadow: 0 0 0 2px rgba(124, 111, 247, .55), 0 0 24px -4px rgba(124, 111, 247, .45);
  border-color: var(--accent-light) !important;
  z-index: 2;
}
.acl-rule-matched-permit {
  box-shadow: 0 0 0 2px rgba(34, 197, 94, .65), 0 0 20px -4px rgba(34, 197, 94, .5) !important;
  border-color: rgba(134, 239, 172, .8) !important;
  background: rgba(34, 197, 94, .08) !important;
  animation: aclRuleMatchPulse .6s cubic-bezier(0.34, 1.56, 0.64, 1) 1;
}
.acl-rule-matched-deny {
  box-shadow: 0 0 0 2px rgba(239, 68, 68, .65), 0 0 20px -4px rgba(239, 68, 68, .5) !important;
  border-color: rgba(252, 165, 165, .8) !important;
  background: rgba(239, 68, 68, .08) !important;
  animation: aclRuleMatchPulse .6s cubic-bezier(0.34, 1.56, 0.64, 1) 1;
}
@keyframes aclRuleMatchPulse {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.015); }
  100% { transform: scale(1); }
}

/* Implicit-deny row hit indicator — same treatment as a matched-deny row */
.acl-rule-implicit { transition: box-shadow .18s ease, background .18s ease; }
.acl-rule-implicit-matched {
  box-shadow: 0 0 0 2px rgba(239, 68, 68, .55), 0 0 20px -4px rgba(239, 68, 68, .4) !important;
  background: rgba(239, 68, 68, .08) !important;
  animation: aclRuleMatchPulse .6s cubic-bezier(0.34, 1.56, 0.64, 1) 1;
}

/* Light-theme overrides */
[data-theme="light"] .acl-packet-pill {
  background: linear-gradient(135deg, rgba(255, 255, 255, .95), rgba(245, 244, 251, .92));
  border-color: rgba(99, 85, 224, .45);
  color: #1f2937;
  box-shadow: 0 4px 12px -2px rgba(99, 85, 224, .35);
}
[data-theme="light"] .acl-packet-proto { border-color: rgba(99, 85, 224, .28); opacity: .8; }
[data-theme="light"] .acl-rule-inspecting {
  box-shadow: 0 0 0 2px rgba(99, 85, 224, .45), 0 0 20px -4px rgba(99, 85, 224, .35);
  border-color: #6355e0 !important;
}

/* Reduced-motion: no animation at all; rules + pills hidden cleanly */
@media (prefers-reduced-motion: reduce) {
  .acl-packet-pill,
  .acl-rule-matched-permit,
  .acl-rule-matched-deny,
  .acl-rule-implicit-matched {
    animation: none !important;
    transition: none !important;
  }
  .acl-packet-overlay { display: none !important; }
}

/* Narrow-viewport packet pill truncation */
@media (max-width: 680px) {
  .acl-packet-pill { font-size: 9.5px; padding: 4px 8px; gap: 4px; }
  .acl-packet-proto { display: none; }
}

/* ════════════════════════════════════════════════════════════════════
   v4.55.1 — ACL Stateful / Stateless mode badge + state-track styling
   ════════════════════════════════════════════════════════════════════ */
.acl-sc-mode {
  font-family: monospace;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 4px;
  border: 1px solid currentColor;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.acl-sc-mode-stateful {
  color: var(--accent-light);
  background: rgba(var(--accent-rgb), .1);
  border-color: rgba(var(--accent-rgb), .35);
}
.acl-sc-mode-stateless {
  color: var(--text-dim);
  background: rgba(148, 163, 184, .08);
  border-color: rgba(148, 163, 184, .25);
}
[data-theme="light"] .acl-sc-mode-stateful {
  color: #6355e0;
  background: rgba(99, 85, 224, .1);
  border-color: rgba(99, 85, 224, .35);
}

/* ════════════════════════════════════════════════════════════════════
   v4.55.2 — ACL Progressive Hints + Solution reveal
   Hint modal reuses .daily-recap-modal dark-glass shell + .ed-modalhead.
   Tier stack builds visually as user clicks Hint again.
   ════════════════════════════════════════════════════════════════════ */
.acl-hint-btn {
  background: linear-gradient(135deg, rgba(251, 191, 36, .14), rgba(251, 191, 36, .04));
  border: 1px solid rgba(251, 191, 36, .32);
  color: var(--yellow, #fbbf24);
}
.acl-hint-btn:hover {
  background: linear-gradient(135deg, rgba(251, 191, 36, .24), rgba(251, 191, 36, .08));
}
[data-theme="light"] .acl-hint-btn {
  color: #d97706;
  border-color: rgba(217, 119, 6, .3);
}

.acl-hint-card { max-width: 560px; }
.acl-hint-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 4px 0 14px;
}
.acl-hint-tiers {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.acl-hint-tier {
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, .08);
  background: rgba(255, 255, 255, .04);
}
.acl-hint-tier-current {
  border-color: rgba(var(--accent-rgb), .4);
  background: rgba(var(--accent-rgb), .1);
  box-shadow: 0 0 0 2px rgba(var(--accent-rgb), .12);
}
.acl-hint-tier-label {
  font-family: monospace;
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent-light);
  font-weight: 700;
  margin-bottom: 5px;
}
.acl-hint-tier-past .acl-hint-tier-label {
  color: rgba(255, 255, 255, .4);
}
.acl-hint-tier-text {
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255, 255, 255, .92);
}
.acl-hint-tier-past .acl-hint-tier-text { opacity: .65; }
.acl-hint-solution-btn {
  margin-top: 4px;
  padding: 10px 16px;
  background: linear-gradient(135deg, rgba(34, 197, 94, .2), rgba(34, 197, 94, .08));
  border: 1px solid rgba(34, 197, 94, .38);
  color: #86efac;
  border-radius: 8px;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.acl-hint-solution-btn:hover {
  background: linear-gradient(135deg, rgba(34, 197, 94, .3), rgba(34, 197, 94, .14));
}
.acl-hint-foot {
  font-family: monospace;
  font-size: 10px;
  letter-spacing: .06em;
  color: rgba(255, 255, 255, .45);
  text-align: center;
}
.acl-hint-eyebrow {
  font-family: monospace;
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #86efac;
  font-weight: 700;
  padding-left: 14px;
  position: relative;
}
.acl-hint-eyebrow::before { content: '\u2014'; position: absolute; left: 0; top: 0; color: #86efac; }

/* Solution rule list */
.acl-sol-rules {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 12px 0;
}
.acl-sol-rule {
  display: grid;
  grid-template-columns: 28px auto 60px 1fr 14px 1fr;
  gap: 8px;
  align-items: center;
  padding: 10px 12px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 8px;
  font-family: monospace;
  font-size: 11.5px;
}
.acl-sol-num {
  font-weight: 700;
  color: var(--accent-light);
  text-align: center;
}
.acl-sol-action {
  text-transform: uppercase;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: .08em;
  padding: 2px 7px;
  border-radius: 4px;
}
.acl-sol-action-permit {
  background: rgba(34, 197, 94, .2);
  color: #86efac;
  border: 1px solid rgba(34, 197, 94, .35);
}
.acl-sol-action-deny {
  background: rgba(239, 68, 68, .2);
  color: #fca5a5;
  border: 1px solid rgba(239, 68, 68, .35);
}
.acl-sol-proto {
  color: rgba(255, 255, 255, .6);
  font-size: 10px;
  text-transform: uppercase;
}
.acl-sol-addr { color: rgba(255, 255, 255, .88); }
.acl-sol-sep { color: rgba(255, 255, 255, .4); text-align: center; }
.acl-sol-comment {
  grid-column: 2 / -1;
  font-size: 10px;
  font-style: italic;
  color: rgba(255, 255, 255, .5);
  margin-top: 4px;
}
.acl-sol-apply {
  width: 100%;
  padding: 10px 14px;
  margin-top: 8px;
}

[data-theme="light"] .acl-hint-card {
  /* Stays dark \u2014 matches daily-recap-modal design intent */
}

/* ══════════════════════════════════════════════════════════════════════
   v4.56.0 \u2014 QUESTION SCENARIO CONTEXT BLOCK
   ══════════════════════════════════════════════════════════════════════
   Optional 1\u20133 sentence context block rendered between the question stem
   and the answer grid for MCQ / multi-select / order questions. Mirrors
   the prototype's editorial "exam-style scenario" aesthetic: left accent
   rule + muted small text + narrow max-width to prevent wall-of-text.
   Only renders when q.scenario is present; #q-scenario + #exam-q-scenario
   otherwise carry [hidden] and take no layout space.
   ═══════════════════════════════════════════════════════════════════ */
.q-scenario {
  display: flex;
  gap: 12px;
  align-items: stretch;
  margin: 0 0 18px;
  padding: 10px 14px 10px 12px;
  max-width: 680px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-mid);
  background: transparent;
  border-radius: 6px;
  animation: qScenarioFade 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.q-scenario[hidden] { display: none; }

.q-scenario .q-scenario-rule {
  flex: 0 0 3px;
  width: 3px;
  background: var(--accent);
  border-radius: 2px;
  opacity: 0.85;
}

.q-scenario .q-scenario-body {
  flex: 1 1 auto;
  font-weight: 400;
  letter-spacing: 0.005em;
}

@keyframes qScenarioFade {
  from { opacity: 0; transform: translateY(-3px); }
  to   { opacity: 1; transform: translateY(0); }
}

[data-theme="light"] .q-scenario {
  color: #4a4560;
}
[data-theme="light"] .q-scenario .q-scenario-rule {
  background: #6355e0;
}

@media (max-width: 640px) {
  .q-scenario {
    font-size: 13px;
    padding: 8px 12px 8px 10px;
    margin-bottom: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .q-scenario { animation: none; }
}

/* ═══════════════════════════════════════════════════════
   v4.63.0 — Network Builder 3D View Mode (issue #199 Phase 1)

   Read-only 3D explorer that swaps in-place with the 2D SVG canvas.
   Three.js scene hosted in #tb-3d-canvas, CSS2D labels in #tb-3d-labels.
   Chrome rail provides back-to-2D + camera presets. Loading overlay
   masks the Three.js bundle fetch on first entry. Mobile nudge intercepts
   small-viewport entry; all animations respect prefers-reduced-motion.
   ═══════════════════════════════════════════════════════ */

.tb-3d-host {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, #131a2e 0%, #0b0f1a 70%);
  display: flex;
  flex-direction: column;
  z-index: 4;
}
.tb-3d-host[hidden] { display: none !important; }

.tb-pill.tb-pill-3d {
  border-color: rgba(124, 111, 247, .4);
  color: var(--accent-light);
}
.tb-pill.tb-pill-3d:hover {
  background: rgba(124, 111, 247, .16);
}

.tb-3d-chrome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 16px;
  background: rgba(10, 14, 24, .92);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(8px);
  z-index: 6;
}
.tb-3d-chrome-left, .tb-3d-chrome-right {
  display: flex;
  align-items: center;
  gap: 12px;
}
.tb-3d-chrome-eyebrow {
  font-family: 'JetBrains Mono', 'SF Mono', Menlo, monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--accent-light);
  opacity: .75;
}
.tb-3d-back-btn {
  font-weight: 700;
}

.tb-3d-canvas, .tb-3d-labels {
  position: absolute;
  left: 0;
  right: 0;
  top: 52px;
  bottom: 0;
}
.tb-3d-labels { pointer-events: none; }
.tb-3d-canvas canvas { display: block; }

.tb-3d-node-label {
  color: var(--text, #e7ebf5);
  font-size: 11px;
  font-weight: 600;
  text-align: center;
  padding: 4px 9px;
  background: rgba(10, 14, 24, .88);
  backdrop-filter: blur(6px);
  border: 1px solid var(--border);
  border-radius: 7px;
  white-space: nowrap;
  user-select: none;
  transform: translateY(-8px);
  transition: background .2s ease, border-color .2s ease, color .2s ease;
  pointer-events: auto;
  cursor: pointer;
}
.tb-3d-node-label .ip {
  font-family: 'JetBrains Mono', 'SF Mono', Menlo, monospace;
  font-size: 10px;
  color: var(--text-dim);
  display: block;
  margin-top: 2px;
}
.tb-3d-node-label:hover { border-color: var(--accent); }
.tb-3d-node-label.is-selected {
  border-color: var(--accent);
  box-shadow: 0 0 16px rgba(124, 111, 247, .45);
}

.tb-3d-vlan-label {
  font-family: 'JetBrains Mono', 'SF Mono', Menlo, monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 5px 12px;
  background: rgba(10, 14, 24, .78);
  border: 1px solid var(--border);
  border-left-width: 3px;
  border-radius: 6px;
  white-space: nowrap;
  color: var(--text);
  pointer-events: none;
}
.tb-3d-vlan-label .subnet {
  font-size: 9px;
  color: var(--text-dim);
  margin-left: 8px;
  padding-left: 8px;
  border-left: 1px solid var(--border);
  font-weight: 500;
  text-transform: none;
  letter-spacing: .02em;
}

.tb-3d-compass {
  position: absolute;
  bottom: 20px;
  left: 20px;
  width: 64px;
  height: 64px;
  border-radius: 99px;
  background: rgba(10, 14, 24, .72);
  border: 1px solid var(--border);
  display: grid;
  place-items: center;
  font-family: 'JetBrains Mono', 'SF Mono', Menlo, monospace;
  font-size: 10px;
  font-weight: 700;
  color: var(--text-dim);
  backdrop-filter: blur(6px);
  pointer-events: none;
  z-index: 5;
}
.tb-3d-compass-ring {
  position: absolute;
  inset: 8px;
  border-radius: 99px;
  border: 1px dashed var(--border);
}
.tb-3d-compass-n { position: absolute; top: 6px; color: var(--accent-light); }
.tb-3d-compass-s { position: absolute; bottom: 6px; }
.tb-3d-compass-e { position: absolute; right: 6px; }
.tb-3d-compass-w { position: absolute; left: 6px; }
.tb-3d-compass-dot {
  width: 4px; height: 4px;
  border-radius: 99px;
  background: var(--accent);
  box-shadow: 0 0 6px var(--accent);
}

.tb-3d-loading {
  position: absolute;
  inset: 52px 0 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: rgba(11, 15, 26, .85);
  backdrop-filter: blur(4px);
  color: var(--text-dim);
  font-size: 13px;
  z-index: 7;
  pointer-events: none;
}
.tb-3d-host:not(.tb-3d-host-active) .tb-3d-loading { display: none; }
.tb-3d-loading-spinner {
  width: 36px;
  height: 36px;
  border-radius: 99px;
  border: 3px solid rgba(124, 111, 247, .25);
  border-top-color: var(--accent);
  animation: tb3dSpin 0.9s linear infinite;
}
@keyframes tb3dSpin {
  to { transform: rotate(360deg); }
}

.tb-3d-mobile-nudge {
  position: absolute;
  inset: 52px 0 0 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
  padding: 24px;
  background: rgba(11, 15, 26, .95);
  backdrop-filter: blur(8px);
  z-index: 8;
}
.tb-3d-mobile-nudge .tb-3d-mobile-icon {
  font-size: 42px;
  filter: drop-shadow(0 0 12px rgba(124, 111, 247, .4));
}
.tb-3d-mobile-nudge h3 {
  font-size: 17px;
  color: var(--text);
  margin: 0;
}
.tb-3d-mobile-nudge p {
  font-size: 13px;
  color: var(--text-dim);
  max-width: 320px;
  line-height: 1.5;
  margin: 0;
}

[data-theme="light"] .tb-3d-host {
  background: radial-gradient(ellipse at center, #f8f9fc 0%, #e9ebf4 70%);
}
[data-theme="light"] .tb-3d-chrome {
  background: rgba(255, 255, 255, .95);
}
[data-theme="light"] .tb-3d-node-label,
[data-theme="light"] .tb-3d-vlan-label {
  background: rgba(255, 255, 255, .95);
  color: #1a1f33;
}
[data-theme="light"] .tb-3d-compass {
  background: rgba(255, 255, 255, .88);
}
[data-theme="light"] .tb-3d-loading {
  background: rgba(248, 249, 252, .88);
}
[data-theme="light"] .tb-3d-mobile-nudge {
  background: rgba(248, 249, 252, .95);
}

@media (prefers-reduced-motion: reduce) {
  .tb-3d-loading-spinner { animation: none; border-top-color: transparent; }
  .tb-3d-node-label { transition: none; }
}

/* ═══════════════════════════════════════════════════════
   v4.64.0 — TB 3D View Phase 2 (issue #199 Phase 2)
   Packet trace animation + hop-card strip + playback + HUD
   ═══════════════════════════════════════════════════════ */

/* Trace HUD pill (top-right of chrome when trace active) */
.tb-3d-trace-hud {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  border-radius: 99px;
  background: rgba(124, 111, 247, .14);
  border: 1px solid rgba(124, 111, 247, .4);
  color: var(--accent-light, #a99cff);
  font-family: 'JetBrains Mono', 'SF Mono', Menlo, monospace;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  max-width: 360px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tb-3d-trace-hud[hidden] { display: none; }
.tb-3d-trace-hud-dot {
  width: 8px; height: 8px; border-radius: 99px;
  background: var(--accent, #7c6ff7);
  box-shadow: 0 0 10px var(--accent, #7c6ff7);
  animation: tb3dHudPulse 1.6s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes tb3dHudPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .55; transform: scale(1.25); }
}

/* Playback controls — tight row next to Trace button */
.tb-3d-playback-controls {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 6px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .08);
}
.tb-3d-playback-controls[hidden] { display: none; }
.tb-pill.tb-pill-playback {
  padding: 4px 8px;
  font-size: 11px;
  min-width: 28px;
  background: transparent;
  border: 1px solid transparent;
}
.tb-pill.tb-pill-playback:hover {
  background: rgba(124, 111, 247, .14);
  border-color: rgba(124, 111, 247, .3);
}
.tb-pill.tb-pill-playback.tb-3d-speed-btn {
  font-family: 'JetBrains Mono', 'SF Mono', Menlo, monospace;
  font-weight: 700;
}

/* Bottom hop-card strip — fixed 160px height below the canvas */
.tb-3d-hop-strip {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 160px;
  padding: 10px 16px;
  background: rgba(10, 14, 24, .92);
  border-top: 1px solid var(--border, #262c48);
  backdrop-filter: blur(8px);
  z-index: 6;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tb-3d-hop-strip[hidden] { display: none; }
/* When hop strip visible, shrink canvas to make room */
.tb-3d-host .tb-3d-canvas,
.tb-3d-host .tb-3d-labels {
  transition: bottom .25s ease;
}
.tb-3d-host:has(.tb-3d-hop-strip:not([hidden])) .tb-3d-canvas,
.tb-3d-host:has(.tb-3d-hop-strip:not([hidden])) .tb-3d-labels {
  bottom: 160px;
}

.tb-3d-hop-strip-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: 'JetBrains Mono', 'SF Mono', Menlo, monospace;
  font-size: 10px;
  letter-spacing: .1em;
  color: var(--text-dim, #8a93ae);
}
.tb-3d-hop-strip-title {
  font-weight: 700;
  text-transform: uppercase;
}
.tb-3d-hop-strip-legend {
  display: inline-flex;
  gap: 14px;
  font-size: 10px;
}
.tb-3d-hop-strip-legend .item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.tb-3d-hop-strip-legend .dot {
  width: 8px; height: 8px;
  border-radius: 99px;
}
.tb-3d-hop-legend-current {
  background: var(--accent, #7c6ff7);
  box-shadow: 0 0 8px var(--accent, #7c6ff7);
}

/* Hop cards */
.tb-3d-hop-strip-row {
  display: flex;
  gap: 10px;
  flex: 1;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 2px;
}
.tb-3d-hop-card {
  flex: 0 0 auto;
  min-width: 180px;
  max-width: 260px;
  background: var(--surface, #181d31);
  border: 1px solid var(--border, #262c48);
  border-radius: 10px;
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  position: relative;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease, background .3s ease;
}
.tb-3d-hop-card.tb-3d-hop-card-pending {
  opacity: .45;
}
.tb-3d-hop-card.tb-3d-hop-card-current {
  border-color: var(--accent, #7c6ff7);
  box-shadow: 0 0 0 2px rgba(124, 111, 247, .25), 0 6px 20px rgba(124, 111, 247, .2);
  transform: translateY(-3px);
}
.tb-3d-hop-card.tb-3d-hop-card-ok {
  border-color: rgba(63, 210, 139, .45);
  background: linear-gradient(180deg, rgba(63, 210, 139, .10), var(--surface, #181d31));
}
.tb-3d-hop-card.tb-3d-hop-card-blocked {
  border-color: rgba(239, 106, 122, .55);
  background: linear-gradient(180deg, rgba(239, 106, 122, .14), var(--surface, #181d31));
}
.tb-3d-hop-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.tb-3d-hop-card-num {
  display: inline-grid;
  place-items: center;
  width: 22px; height: 22px;
  border-radius: 99px;
  background: rgba(124, 111, 247, .18);
  color: var(--accent-light, #a99cff);
  font-family: 'JetBrains Mono', 'SF Mono', Menlo, monospace;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}
.tb-3d-hop-card.tb-3d-hop-card-ok .tb-3d-hop-card-num {
  background: rgba(63, 210, 139, .18);
  color: #3fd28b;
}
.tb-3d-hop-card.tb-3d-hop-card-blocked .tb-3d-hop-card-num {
  background: rgba(239, 106, 122, .22);
  color: #ef6a7a;
}
.tb-3d-hop-card-layer {
  display: inline-block;
  font-family: 'JetBrains Mono', 'SF Mono', Menlo, monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .08em;
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(124, 111, 247, .14);
  color: var(--accent-light, #a99cff);
}
.tb-3d-hop-card-layer.layer-ARP   { background: rgba(106, 169, 240, .15); color: #6aa9f0; }
.tb-3d-hop-card-layer.layer-L3    { background: rgba(124, 111, 247, .15); color: #a99cff; }
.tb-3d-hop-card-layer.layer-DELIVER { background: rgba(63, 210, 139, .15); color: #3fd28b; }
.tb-3d-hop-card-layer.layer-FAIL  { background: rgba(239, 106, 122, .18); color: #ef6a7a; }
.tb-3d-hop-card-devices {
  font-size: 12px;
  font-weight: 600;
  color: var(--text, #e7ebf5);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tb-3d-hop-card-detail {
  font-family: 'JetBrains Mono', 'SF Mono', Menlo, monospace;
  font-size: 10px;
  color: var(--text-dim, #8a93ae);
  line-height: 1.4;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.tb-3d-hop-card-status {
  align-self: flex-start;
  margin-top: auto;
  font-family: 'JetBrains Mono', 'SF Mono', Menlo, monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .05em;
  padding: 2px 8px;
  border-radius: 99px;
}
.tb-3d-hop-card-ok .tb-3d-hop-card-status {
  background: rgba(63, 210, 139, .18);
  color: #3fd28b;
}
.tb-3d-hop-card-blocked .tb-3d-hop-card-status {
  background: rgba(239, 106, 122, .22);
  color: #ef6a7a;
}
.tb-3d-hop-card + .tb-3d-hop-card::before {
  content: '';
  position: absolute;
  left: -10px;
  top: 50%;
  width: 10px;
  height: 1px;
  background: var(--border, #262c48);
}

/* In-flight frame badge next to the animated packet */
.tb-3d-frame-badge {
  font-family: 'JetBrains Mono', 'SF Mono', Menlo, monospace;
  font-size: 10px;
  padding: 6px 10px;
  background: rgba(10, 14, 24, .92);
  border: 1px solid rgba(124, 111, 247, .5);
  border-radius: 8px;
  color: var(--text, #e7ebf5);
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 0 14px rgba(124, 111, 247, .3);
}
.tb-3d-frame-badge .title {
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--accent-light, #a99cff);
  display: block;
  margin-bottom: 3px;
  font-size: 9px;
  text-transform: uppercase;
}
.tb-3d-frame-badge .row {
  display: flex;
  gap: 6px;
  color: var(--text-dim, #8a93ae);
  font-size: 9px;
}
.tb-3d-frame-badge .row strong {
  color: var(--text, #e7ebf5);
  font-weight: 600;
}
.tb-3d-frame-badge.fail {
  border-color: rgba(239, 106, 122, .7);
  box-shadow: 0 0 14px rgba(239, 106, 122, .35);
}
.tb-3d-frame-badge.fail .title {
  color: #ef6a7a;
}

/* Light theme overrides */
[data-theme="light"] .tb-3d-hop-strip {
  background: rgba(255, 255, 255, .96);
}
[data-theme="light"] .tb-3d-hop-card {
  background: #f5f6fb;
}
[data-theme="light"] .tb-3d-frame-badge {
  background: rgba(255, 255, 255, .96);
  color: #1a1f33;
}
[data-theme="light"] .tb-3d-trace-hud {
  background: rgba(99, 85, 224, .1);
  color: #6355e0;
  border-color: rgba(99, 85, 224, .3);
}

/* Device-label trace state rings */
.tb-3d-node-label.tb-3d-trace-visited {
  border-color: rgba(63, 210, 139, .7);
  box-shadow: 0 0 10px rgba(63, 210, 139, .4);
}
.tb-3d-node-label.tb-3d-trace-current {
  border-color: var(--accent, #7c6ff7);
  box-shadow: 0 0 18px rgba(124, 111, 247, .6);
  animation: tb3dCurrentPulse 1.2s ease-in-out infinite;
}
@keyframes tb3dCurrentPulse {
  0%, 100% { box-shadow: 0 0 18px rgba(124, 111, 247, .6); }
  50% { box-shadow: 0 0 28px rgba(124, 111, 247, .9); }
}
.tb-3d-node-label.tb-3d-trace-pending {
  opacity: .5;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .tb-3d-trace-hud-dot { animation: none; }
  .tb-3d-hop-card { transition: none; }
  .tb-3d-hop-card.tb-3d-hop-card-current { transform: none; }
  .tb-3d-node-label.tb-3d-trace-current { animation: none; }
}

/* ═══════════════════════════════════════════════════════
   v4.65.0 — TB 3D View Phase 3 (issue #199 Phase 3)
   OSI Layer Stack View
   ═══════════════════════════════════════════════════════ */

.tb-3d-osi-btn[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}
.tb-3d-osi-btn:not([disabled]):hover {
  background: rgba(124, 111, 247, .14);
  border-color: rgba(124, 111, 247, .4);
}
.tb-3d-osi-btn.tb-3d-osi-active {
  background: rgba(124, 111, 247, .22);
  border-color: var(--accent, #7c6ff7);
  color: var(--accent-light, #a99cff);
}
.tb-3d-osi-exit-btn {
  font-weight: 700;
  background: rgba(239, 106, 122, .14);
  border: 1px solid rgba(239, 106, 122, .4);
  color: #ef6a7a;
}
.tb-3d-osi-exit-btn:hover {
  background: rgba(239, 106, 122, .22);
}

.tb-3d-osi-label {
  font-family: 'JetBrains Mono', 'SF Mono', Menlo, monospace;
  background: rgba(10, 14, 24, .92);
  backdrop-filter: blur(6px);
  border: 1px solid var(--border, #262c48);
  border-left-width: 4px;
  border-radius: 7px;
  padding: 7px 12px;
  color: var(--text, #e7ebf5);
  white-space: nowrap;
  user-select: none;
  pointer-events: none;
  min-width: 230px;
}
.tb-3d-osi-label .layer-num {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .16em;
  color: var(--text-dim, #8a93ae);
  margin-bottom: 1px;
}
.tb-3d-osi-label .layer-name {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text, #e7ebf5);
  margin-bottom: 3px;
}
.tb-3d-osi-label .layer-pdu {
  font-size: 10px;
  color: var(--accent-light, #a99cff);
  margin-bottom: 3px;
}
.tb-3d-osi-label .layer-pdu::before {
  content: 'PDU: ';
  color: var(--text-dim, #8a93ae);
  font-weight: 600;
}
.tb-3d-osi-label .layer-protos {
  font-size: 10px;
  color: var(--text-dim, #8a93ae);
  font-weight: 500;
}
.tb-3d-osi-label.layer-1 { border-left-color: #ef6a7a; }
.tb-3d-osi-label.layer-2 { border-left-color: #f97316; }
.tb-3d-osi-label.layer-3 { border-left-color: #f4c664; }
.tb-3d-osi-label.layer-4 { border-left-color: #3fd28b; }
.tb-3d-osi-label.layer-5 { border-left-color: #2dd4bf; }
.tb-3d-osi-label.layer-6 { border-left-color: #6aa9f0; }
.tb-3d-osi-label.layer-7 { border-left-color: #a99cff; }

.tb-3d-host.tb-3d-osi-active .tb-3d-node-label:not(.tb-3d-osi-focus) {
  opacity: 0.2;
  transition: opacity .3s ease;
}
.tb-3d-host.tb-3d-osi-active .tb-3d-node-label.tb-3d-osi-focus {
  border-color: var(--accent, #7c6ff7);
  box-shadow: 0 0 18px rgba(124, 111, 247, .5);
}

.tb-3d-osi-title {
  position: absolute;
  top: 72px;
  left: 50%;
  transform: translateX(-50%);
  display: none;
  flex-direction: column;
  gap: 2px;
  align-items: center;
  padding: 8px 18px;
  background: rgba(10, 14, 24, .92);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(124, 111, 247, .4);
  border-radius: 10px;
  font-family: 'JetBrains Mono', 'SF Mono', Menlo, monospace;
  color: var(--text, #e7ebf5);
  z-index: 6;
  pointer-events: none;
  box-shadow: 0 4px 24px rgba(124, 111, 247, .2);
}
.tb-3d-host.tb-3d-osi-active .tb-3d-osi-title { display: flex; }
.tb-3d-osi-title .eyebrow {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .18em;
  color: var(--accent-light, #a99cff);
  text-transform: uppercase;
}
.tb-3d-osi-title .name {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.tb-3d-osi-title .sub {
  font-size: 10px;
  color: var(--text-dim, #8a93ae);
}

[data-theme="light"] .tb-3d-osi-label,
[data-theme="light"] .tb-3d-osi-title {
  background: rgba(255, 255, 255, .96);
  color: #1a1f33;
}

@media (prefers-reduced-motion: reduce) {
  .tb-3d-host.tb-3d-osi-active .tb-3d-node-label:not(.tb-3d-osi-focus) { transition: none; }
}

/* ═══════════════════════════════════════════════════════
   v4.66.0 — Phase 4 Scenario Tours
   ═══════════════════════════════════════════════════════ */
.tb-3d-tour-btn {
  background: rgba(63, 210, 139, .14);
  border: 1px solid rgba(63, 210, 139, .4);
  color: #3fd28b;
  font-weight: 600;
}
.tb-3d-tour-btn:hover { background: rgba(63, 210, 139, .22); }
.tb-3d-tour-controls {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 6px;
  border-radius: 10px;
  background: rgba(63, 210, 139, .08);
  border: 1px solid rgba(63, 210, 139, .28);
}
.tb-3d-tour-controls[hidden] { display: none; }
.tb-3d-tour-controls .tb-pill-playback:hover {
  background: rgba(63, 210, 139, .18);
  border-color: rgba(63, 210, 139, .4);
}
.tb-3d-tour-caption {
  position: absolute;
  left: 50%;
  bottom: 32px;
  transform: translateX(-50%);
  width: min(680px, calc(100% - 80px));
  padding: 16px 22px 14px;
  background: rgba(10, 14, 24, .94);
  border: 1px solid rgba(124, 111, 247, .35);
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .45), 0 0 0 1px rgba(124, 111, 247, .12);
  backdrop-filter: blur(10px);
  z-index: 7;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  animation: tb3dCaptionFadeIn .4s ease;
}
.tb-3d-tour-caption[hidden] { display: none; }
.tb-3d-tour-caption .tb-3d-tour-eyebrow {
  font-family: 'JetBrains Mono', 'SF Mono', Menlo, monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .18em;
  color: var(--accent-light, #a99cff);
  opacity: .8;
}
.tb-3d-tour-caption .tb-3d-tour-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text, #e7ebf5);
  line-height: 1.25;
}
.tb-3d-tour-caption .tb-3d-tour-body {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-dim, #8a93ae);
}
.tb-3d-tour-caption .tb-3d-tour-dots {
  display: flex; gap: 6px; margin-top: 6px;
}
.tb-3d-tour-dot {
  width: 8px; height: 8px; border-radius: 99px;
  background: rgba(138, 147, 174, .3);
  transition: background .3s ease, border-color .3s ease, color .3s ease;
}
.tb-3d-tour-dot.is-done {
  background: rgba(63, 210, 139, .55);
}
.tb-3d-tour-dot.is-current {
  background: var(--accent, #7c6ff7);
  box-shadow: 0 0 10px var(--accent, #7c6ff7);
  transform: scale(1.2);
}
@keyframes tb3dCaptionFadeIn {
  from { opacity: 0; transform: translate(-50%, 12px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
.tb-3d-node-label.tb-3d-tour-highlight {
  border-color: #3fd28b;
  box-shadow: 0 0 16px rgba(63, 210, 139, .55);
  animation: tb3dTourHighlightPulse 1.8s ease-in-out infinite;
}
@keyframes tb3dTourHighlightPulse {
  0%, 100% { box-shadow: 0 0 16px rgba(63, 210, 139, .45); }
  50%      { box-shadow: 0 0 24px rgba(63, 210, 139, .75); }
}
[data-theme="light"] .tb-3d-tour-caption {
  background: rgba(255, 255, 255, .96);
  color: #1a1f33;
}
@media (prefers-reduced-motion: reduce) {
  .tb-3d-tour-caption { animation: none; }
  .tb-3d-tour-dot { transition: none; }
  .tb-3d-node-label.tb-3d-tour-highlight { animation: none; }
}

/* ══════════════════════════════════════════
   v4.74.0 — SPACED REPETITION
   Homepage card + dedicated review page (#page-sr-review).
═══════════════════════════════════════════ */

.sr-review-card {
  background: linear-gradient(135deg, rgba(124,111,247,0.12), rgba(124,111,247,0.04));
  border: 1px solid rgba(124,111,247,0.4);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin-bottom: 14px;
  position: relative;
  overflow: hidden;
}
.sr-review-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top right, rgba(124,111,247,0.18), transparent 60%);
  pointer-events: none;
}
.sr-review-card-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 6px; position: relative;
}
.sr-review-card-eyebrow {
  font-family: var(--font-mono, monospace);
  font-size: 11px; letter-spacing: 1.3px;
  color: var(--accent); text-transform: uppercase; font-weight: 600;
}
.sr-review-card-stats {
  font-family: var(--font-mono, monospace);
  font-size: 11px; color: var(--text-dim);
}
.sr-review-card-headline {
  margin: 0 0 4px; font-size: 18px; font-weight: 700;
  color: var(--text); position: relative;
}
.sr-review-card-sub {
  margin: 0 0 14px; font-size: 13px; color: var(--text-dim);
  line-height: 1.5; position: relative;
}

.sr-progress-row {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 16px; padding: 0 4px;
}
.sr-progress-text {
  font-family: var(--font-mono, monospace);
  font-size: 12px; color: var(--text-dim); min-width: 64px;
}
.sr-progress-bar {
  flex: 1; height: 6px;
  background: var(--surface3); border-radius: 99px; overflow: hidden;
}
.sr-progress-fill {
  height: 100%; background: var(--accent); border-radius: 99px;
  transition: width 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.sr-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 22px 24px; margin-bottom: 18px;
}
.sr-card-meta {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-mono, monospace);
  font-size: 11px; color: var(--text-dim); margin-bottom: 14px;
  letter-spacing: 0.6px; flex-wrap: wrap;
}
.sr-card-meta .sr-meta-topic { color: var(--accent); font-weight: 700; }
.sr-card-meta .sr-meta-sep { opacity: 0.5; }
.sr-card-meta .sr-meta-streak { color: var(--green); font-weight: 600; }

.sr-question {
  font-size: 17px; line-height: 1.55; color: var(--text);
  margin-bottom: 18px; font-weight: 500;
}

.sr-options { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.sr-option {
  display: flex; align-items: flex-start; gap: 12px;
  width: 100%; text-align: left; padding: 14px 16px;
  background: var(--surface3); border: 1px solid var(--border);
  border-radius: 8px; cursor: pointer; transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
  color: var(--text); font-family: inherit; font-size: 14px; line-height: 1.45;
}
.sr-option:hover:not(:disabled) {
  background: rgba(124,111,247,0.08); border-color: var(--accent);
  transform: translateX(2px);
}
.sr-option:disabled { cursor: default; }

/* v4.81.27: read-only options + self-grade banner for cards that can't
   be auto-graded (multi-select, or legacy MCQs with corrupt null answer
   from the v4.81.27-fixed addToSrQueue bug). User reads the question +
   options, recalls the answer, and self-grades — same SM-2 outcomes,
   no auto-check. */
.sr-options-readonly .sr-option-readonly {
  cursor: default; opacity: 0.92;
  background: var(--surface2); border: 1px dashed var(--border);
}
.sr-options-readonly .sr-option-readonly:hover { transform: none; background: var(--surface2); border-color: var(--border); }
.sr-self-grade-banner {
  font-size: 12.5px; color: var(--text-mid);
  background: rgba(245, 158, 11, 0.08); border: 1px solid rgba(245, 158, 11, 0.28);
  border-radius: 8px; padding: 10px 14px; margin-bottom: 14px;
  font-style: italic;
}
.sr-option.is-picked {
  background: rgba(124,111,247,0.12); border-color: var(--accent);
}
.sr-option.is-correct {
  background: rgba(34,197,94,0.12); border-color: var(--green);
}
.sr-option.is-correct .sr-option-letter { background: var(--green); color: #fff; }
.sr-option.is-wrong {
  background: rgba(248,113,113,0.10); border-color: var(--red);
}
.sr-option.is-wrong .sr-option-letter { background: var(--red); color: #fff; }
/* v4.81.30: multi-select reveal — "correct but not picked" marker.
   Differentiates from .is-correct (you got it) and .is-wrong (you picked
   wrong). Amber/yellow tone reads as "you missed this one" without the
   alarm of red-wrong. */
.sr-option.is-missed {
  background: rgba(245,158,11,0.10); border-color: var(--yellow, #fbbf24);
  border-style: dashed;
}
.sr-option.is-missed .sr-option-letter { background: var(--yellow, #fbbf24); color: #1f1b2e; }
.sr-option.is-missed::after {
  content: '⚠ missed'; margin-left: auto; padding-left: 12px;
  font-size: 11px; font-weight: 600; color: #b45309;
  letter-spacing: .04em; text-transform: uppercase;
}

/* v4.81.30: multi-select submit row — Submit button enabled when user
   has picked at least 2 options. Hint shows expected vs picked count. */
.sr-multi-submit-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; margin-bottom: 14px;
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: 8px;
}
.sr-multi-hint {
  flex: 1; font-size: 12.5px; color: var(--text-mid);
  font-family: var(--font-mono, monospace);
}
.sr-multi-submit-btn {
  background: var(--accent); color: #fff; border: none;
  border-radius: 8px; padding: 8px 16px;
  font-family: inherit; font-size: 13px; font-weight: 700;
  cursor: pointer; transition: background .15s ease, transform .15s ease;
}
.sr-multi-submit-btn:hover:not(:disabled) {
  background: var(--accent-light); transform: translateY(-1px);
}
.sr-multi-submit-btn:disabled {
  background: var(--surface3); color: var(--text-dim);
  cursor: not-allowed; opacity: 0.6;
}

.sr-option-letter {
  flex: none; width: 24px; height: 24px; border-radius: 50%;
  background: var(--surface); display: inline-flex; align-items: center;
  justify-content: center; font-family: var(--font-mono, monospace);
  font-size: 12px; font-weight: 700; color: var(--text-dim);
  border: 1px solid var(--border);
}
.sr-option-text { flex: 1; }

.sr-explanation {
  margin-top: 8px; padding: 12px 14px;
  background: rgba(124,111,247,0.06); border-left: 3px solid var(--accent);
  border-radius: 4px; font-size: 13px; line-height: 1.6; color: var(--text);
}
.sr-explanation strong { color: var(--accent); }

.sr-confidence-row {
  display: flex; flex-direction: column; gap: 10px;
  margin-top: 16px; padding-top: 16px;
  border-top: 1px solid var(--border);
}
.sr-confidence-label {
  font-size: 13px; color: var(--text-dim); margin-bottom: 4px;
}
.sr-confidence-btn {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 12px 16px; border-radius: 8px; cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease; font-family: inherit; font-size: 14px;
  font-weight: 600; border: 1px solid var(--border);
  background: var(--surface3); color: var(--text);
}
.sr-confidence-btn:hover { transform: translateX(2px); }
.sr-confidence-confident {
  background: rgba(34,197,94,0.10); border-color: var(--green); color: var(--green);
}
.sr-confidence-confident:hover { background: rgba(34,197,94,0.18); }
.sr-confidence-uncertain {
  background: rgba(251,191,36,0.10); border-color: var(--yellow); color: var(--yellow);
}
.sr-confidence-uncertain:hover { background: rgba(251,191,36,0.18); }
.sr-confidence-wrong {
  background: rgba(248,113,113,0.08); border-color: var(--red); color: var(--red);
}
.sr-confidence-wrong:hover { background: rgba(248,113,113,0.16); }
.sr-confidence-hint { font-size: 11px; font-weight: 400; opacity: 0.75; }

.sr-empty {
  text-align: center; padding: 60px 20px 40px; color: var(--text-dim);
}
.sr-empty-icon { font-size: 64px; margin-bottom: 16px; }
.sr-empty h2 { color: var(--text); margin: 0 0 12px; font-size: 24px; font-weight: 700; }
.sr-empty p {
  margin: 0 0 24px; line-height: 1.6;
  max-width: 480px; margin-left: auto; margin-right: auto;
}

/* v4.85.1: session-cap "N remaining" row on completion screen */
.sr-remaining-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-top: 16px; padding: 12px 16px;
  border: 1px dashed rgba(255,255,255,0.18); border-radius: 10px;
  background: rgba(255,255,255,0.04);
}
.sr-remaining-text { font-size: 13px; color: var(--text-mid); }
.sr-continue-btn { white-space: nowrap; font-size: 13px; padding: 8px 16px; }
@media (max-width: 540px) {
  .sr-remaining-row { flex-direction: column; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .sr-progress-fill { transition: none !important; }
  .sr-option, .sr-confidence-btn { transition: none !important; }
  .sr-option:hover, .sr-confidence-btn:hover { transform: none !important; }
}

/* ══════════════════════════════════════════
   v4.75.0 — ACL ORDERING PBQ
═══════════════════════════════════════════ */

.drills-tile-pbq { position: relative; }
.drills-tile-pbq-badge {
  display: inline-block; font-size: 9px; font-weight: 700; letter-spacing: 1.2px;
  background: var(--accent); color: #fff; padding: 2px 6px; border-radius: 3px;
  margin-left: 6px; vertical-align: middle; text-transform: uppercase;
}

.acl-picker-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 600px) { .acl-picker-grid { grid-template-columns: 1fr 1fr; } }
.acl-picker-card {
  display: flex; flex-direction: column; gap: 8px; text-align: left;
  padding: 18px 20px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  font-family: inherit; color: var(--text);
}
.acl-picker-card:hover {
  background: rgba(124,111,247,0.06); border-color: var(--accent);
  transform: translateY(-2px); box-shadow: 0 4px 12px rgba(124,111,247,0.18);
}
.acl-picker-eyebrow {
  font-family: var(--font-mono, monospace); font-size: 11px; letter-spacing: 1px;
  color: var(--text-dim); text-transform: uppercase;
}
.acl-picker-title { font-size: 18px; font-weight: 700; color: var(--text); }
.acl-picker-rules {
  font-size: 12px; color: var(--text-dim); font-family: var(--font-mono, monospace);
}

.acl-pbq-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 22px 24px; margin-bottom: 18px;
}

.acl-goal {
  margin-bottom: 22px; padding-bottom: 18px; border-bottom: 1px solid var(--border);
}
.acl-goal-eyebrow {
  font-family: var(--font-mono, monospace); font-size: 11px; letter-spacing: 1.2px;
  color: var(--accent); text-transform: uppercase; margin-bottom: 8px; font-weight: 600;
}
.acl-goal-text { font-size: 15px; line-height: 1.55; color: var(--text); }
.acl-goal-hint {
  margin-top: 10px; padding: 8px 12px; background: rgba(251,191,36,0.10);
  border-left: 3px solid var(--yellow); border-radius: 4px;
  font-size: 12px; line-height: 1.5; color: var(--text-dim);
}

.acl-rules-section { margin-bottom: 22px; }
.acl-rules-label, .acl-traffic-label {
  font-family: var(--font-mono, monospace); font-size: 11px; color: var(--text-dim);
  letter-spacing: 1.2px; text-transform: uppercase; margin-bottom: 10px; font-weight: 600;
}

.acl-rules-list { display: flex; flex-direction: column; gap: 8px; }
.acl-rule-row {
  display: flex; align-items: stretch; gap: 0;
  background: var(--surface3); border: 1px solid var(--border);
  border-radius: 8px; overflow: hidden; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.acl-rule-row.is-allow { border-left: 4px solid var(--green); }
.acl-rule-row.is-deny { border-left: 4px solid var(--red); }
.acl-rule-row.acl-rule-implicit {
  border-left: 4px solid var(--text-dim); opacity: 0.55; font-style: italic;
}
.acl-rule-priority {
  flex: none; width: 40px; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono, monospace); font-size: 16px; font-weight: 700;
  color: var(--text-dim); background: rgba(0,0,0,0.15);
}
.acl-rule-body {
  flex: 1; padding: 10px 14px; display: flex; flex-direction: column; gap: 3px; min-width: 0;
}
.acl-rule-action {
  font-family: var(--font-mono, monospace); font-size: 11px; letter-spacing: 1.5px; font-weight: 700;
}
.acl-rule-row.is-allow .acl-rule-action { color: var(--green); }
.acl-rule-row.is-deny .acl-rule-action { color: var(--red); }
.acl-rule-desc { font-size: 13px; color: var(--text); font-weight: 500; }
.acl-rule-detail {
  font-family: var(--font-mono, monospace); font-size: 11px; color: var(--text-dim);
}
.acl-rule-detail code { font-family: inherit; background: transparent; padding: 0; }
.acl-rule-controls {
  flex: none; display: flex; flex-direction: column; gap: 2px; padding: 6px;
  border-left: 1px solid var(--border);
}
.acl-arrow-btn {
  width: 32px; height: 26px; border-radius: 4px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text); font-size: 11px;
  cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.acl-arrow-btn:hover:not(:disabled) {
  background: var(--accent); color: #fff; border-color: var(--accent);
}
.acl-arrow-btn:disabled { opacity: 0.3; cursor: not-allowed; }

.acl-traffic-section {
  margin-bottom: 22px; padding: 16px;
  background: rgba(124,111,247,0.04); border: 1px solid rgba(124,111,247,0.18); border-radius: 8px;
}
.acl-traffic-list { display: flex; flex-direction: column; gap: 10px; }
.acl-traffic-row {
  display: grid; grid-template-columns: 1.4fr 1.6fr 1fr; gap: 12px;
  padding: 10px 12px; background: var(--surface); border: 1px solid var(--border);
  border-radius: 6px; font-size: 12px; align-items: center;
}
@media (max-width: 600px) {
  .acl-traffic-row { grid-template-columns: 1fr; gap: 4px; }
}
.acl-traffic-label-cell { font-weight: 600; color: var(--text); }
.acl-traffic-detail {
  font-family: var(--font-mono, monospace); font-size: 11px; color: var(--text-dim);
}
.acl-traffic-detail code { font-family: inherit; background: transparent; padding: 0; }
.acl-traffic-expected { font-size: 11px; color: var(--text-dim); }
.acl-traffic-expected strong { color: var(--text); }
.acl-traffic-result {
  grid-column: 1 / -1; margin-top: 6px; padding: 6px 10px; border-radius: 4px;
  font-family: var(--font-mono, monospace); font-size: 11px; font-weight: 600;
}
.acl-traffic-correct { background: rgba(34,197,94,0.12); color: var(--green); }
.acl-traffic-wrong { background: rgba(248,113,113,0.12); color: var(--red); }

.acl-submit-btn { margin-top: 6px; }

.acl-result-card {
  margin-top: 14px; padding: 22px 24px; border-radius: var(--radius);
  border: 1px solid var(--border); background: var(--surface3); text-align: center;
}
.acl-result-card.good { border-color: var(--green); background: rgba(34,197,94,0.06); }
.acl-result-card.warn { border-color: var(--yellow); background: rgba(251,191,36,0.06); }
.acl-result-card.bad { border-color: var(--red); background: rgba(248,113,113,0.06); }
.acl-result-score {
  font-size: 56px; font-weight: 800; font-family: var(--font-mono, monospace); margin-bottom: 8px;
}
.acl-result-card.good .acl-result-score { color: var(--green); }
.acl-result-card.warn .acl-result-score { color: var(--yellow); }
.acl-result-card.bad .acl-result-score { color: var(--red); }
.acl-result-breakdown {
  display: flex; justify-content: center; gap: 24px;
  font-family: var(--font-mono, monospace); font-size: 12px;
  color: var(--text-dim); margin-bottom: 18px;
}
.acl-result-breakdown strong { color: var(--text); }
.acl-result-explanation {
  text-align: left; padding: 14px 16px;
  background: rgba(124,111,247,0.06); border-left: 3px solid var(--accent);
  border-radius: 4px; font-size: 13px; line-height: 1.6; color: var(--text);
  margin-bottom: 18px;
}
.acl-result-explanation strong { color: var(--accent); }
.acl-result-actions { display: flex; gap: 12px; justify-content: center; }

@media (prefers-reduced-motion: reduce) {
  .acl-picker-card { transition: none !important; }
  .acl-picker-card:hover { transform: none !important; }
  .acl-arrow-btn { transition: none !important; }
}

/* ══════════════════════════════════════════
   v4.76.0 — DECISION-CLARITY POLISH
   Codex review: not prettier — guided, premium, obvious.
   1. Next-Best-Move CTA card in the hero
   2. Mode ladder (Quick / Practice / Exam tiers)
   3. Actionable headline on Analytics page
═══════════════════════════════════════════ */

/* ── 1. Next-Best-Move CTA card ── */
.hero-v2-cta {
  margin-top: 18px;
  padding: 18px 22px;
  background: linear-gradient(135deg, var(--accent), #5b4ce0);
  border-radius: 14px;
  color: #fff;
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(124, 111, 247, 0.32);
  max-width: 560px;
}
.hero-v2-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top right, rgba(255, 255, 255, 0.18), transparent 65%);
  pointer-events: none;
}
.hero-v2-cta-eyebrow {
  /* v4.77.0: bumped visual prominence per Codex review — more authoritative
   * "the app is recommending this" voice. Inline pill with brighter text +
   * larger letter-spacing detaches it from regular hero copy. */
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  letter-spacing: 2px;
  color: rgba(255, 255, 255, 0.96);
  text-transform: uppercase;
  margin-bottom: 10px;
  font-weight: 700;
  padding: 4px 10px;
  background: rgba(255, 255, 255, 0.14);
  border-radius: 99px;
}
.hero-v2-cta-icon { font-size: 16px; line-height: 1; }
.hero-v2-cta-title {
  position: relative;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  color: #fff;
  margin-bottom: 4px;
}
.hero-v2-cta-sub {
  position: relative;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 14px;
}
.hero-v2-cta-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  background: #fff;
  color: #4338ca;
  border: none;
  border-radius: 8px;
  font-weight: 700;
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}
.hero-v2-cta-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.28);
  background: #f5f3ff;
}
.hero-v2-cta-reason {
  position: relative;
  display: block;
  margin-top: 10px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.7);
  font-style: italic;
}

/* ── 2. Mode Ladder ── */
.modes-ladder {
  /* Inherits .ed-section spacing. Body splits into 3 tiers. */
}
.modes-tier {
  margin-top: 18px;
  padding: 14px 16px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  position: relative;
}
.modes-tier-quick {
  border-left: 4px solid var(--green, #4ade80);
}
.modes-tier-practice {
  border-left: 4px solid var(--accent);
}
.modes-tier-exam {
  border-left: 4px solid var(--orange, #fb923c);
  background: linear-gradient(180deg, var(--surface), rgba(251, 146, 60, 0.04));
}
.modes-tier-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.modes-tier-icon {
  font-size: 22px;
  line-height: 1;
  flex: none;
}
.modes-tier-titles {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.modes-tier-eyebrow {
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  font-weight: 700;
}
.modes-tier-quick .modes-tier-eyebrow { color: var(--green, #4ade80); }
.modes-tier-practice .modes-tier-eyebrow { color: var(--accent); }
.modes-tier-exam .modes-tier-eyebrow { color: var(--orange, #fb923c); }
.modes-tier-sub {
  font-size: 12px;
  color: var(--text-dim);
}
.modes-tier-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
}
.modes-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
  text-align: left;
  padding: 14px 16px;
  background: var(--surface3);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
  font-family: inherit;
  color: var(--text);
  min-height: 84px;
}
.modes-card:hover {
  background: rgba(124, 111, 247, 0.08);
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(124, 111, 247, 0.15);
}
.modes-card-icon {
  font-size: 20px;
  line-height: 1;
  margin-bottom: 4px;
}
.modes-card-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}
.modes-card-sub {
  font-size: 11px;
  color: var(--text-dim);
  line-height: 1.4;
}
.modes-card-featured {
  background: linear-gradient(135deg, rgba(124, 111, 247, 0.14), rgba(124, 111, 247, 0.06));
  border-color: rgba(124, 111, 247, 0.42);
}
.modes-card-featured .modes-card-title { color: var(--accent); }
.modes-card-dc {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.10), rgba(34, 197, 94, 0.04));
  border-color: rgba(34, 197, 94, 0.32);
}
.modes-card-wrong {
  background: linear-gradient(135deg, rgba(248, 113, 113, 0.10), rgba(248, 113, 113, 0.04));
  border-color: rgba(248, 113, 113, 0.32);
}
.modes-card-marathon {
  /* default styling */
}
.modes-card-custom {
  border-style: dashed;
  background: transparent;
}
.modes-card-exam {
  background: linear-gradient(135deg, rgba(251, 146, 60, 0.10), rgba(251, 146, 60, 0.04));
  border-color: rgba(251, 146, 60, 0.40);
  min-height: 100px;
}
.modes-card-exam .modes-card-title { color: var(--orange, #fb923c); }
.modes-card-exam-full {
  background: linear-gradient(135deg, #1f1730, #2a1f4a);
  border-color: var(--orange, #fb923c);
  color: #fff;
  box-shadow: 0 4px 16px rgba(251, 146, 60, 0.18);
}
.modes-card-exam-full .modes-card-title { color: #ffe5d0; }
.modes-card-exam-full .modes-card-sub { color: rgba(255, 229, 208, 0.75); }
.modes-card-exam-full:hover {
  background: linear-gradient(135deg, #28203d, #36275c);
  border-color: var(--orange, #fb923c);
}

/* v4.79.0: Strict Mode toggle inside Exam tier (relocated from retired standalone exam-section) */
.modes-strict-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding: 10px 14px;
  background: rgba(251, 146, 60, 0.06);
  border: 1px dashed rgba(251, 146, 60, 0.40);
  border-radius: 8px;
  cursor: pointer;
  font-size: 12px;
  color: var(--text);
  transition: background 0.18s ease;
}
.modes-strict-toggle:hover { background: rgba(251, 146, 60, 0.10); }
.modes-strict-toggle input[type="checkbox"] {
  accent-color: var(--orange, #fb923c);
  width: 14px;
  height: 14px;
}
.modes-strict-toggle .modes-strict-text { color: var(--text-dim); }
.modes-strict-toggle .modes-strict-text strong { color: var(--orange, #fb923c); }

/* ── 3. Analytics Actionable Headline ── */
.ana-action-headline {
  margin-bottom: 18px;
  padding: 16px 20px;
  background: linear-gradient(135deg, var(--accent), #5b4ce0);
  border-radius: 12px;
  color: #fff;
  position: relative;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(124, 111, 247, 0.28);
}
.ana-action-headline::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top right, rgba(255, 255, 255, 0.18), transparent 65%);
  pointer-events: none;
}
.ana-action-eyebrow {
  position: relative;
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  letter-spacing: 1.6px;
  color: rgba(255, 255, 255, 0.82);
  text-transform: uppercase;
  margin-bottom: 8px;
  font-weight: 600;
}
.ana-action-body {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.ana-action-text {
  flex: 1;
  min-width: 200px;
}
.ana-action-topic {
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 4px;
}
.ana-action-meta {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.85);
}
.ana-action-meta strong { color: #fff; }
.ana-action-btn {
  padding: 10px 18px;
  background: #fff;
  color: #4338ca;
  border: none;
  border-radius: 8px;
  font-weight: 700;
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
  flex: none;
}
.ana-action-btn:hover {
  transform: translateY(-1px);
  background: #f5f3ff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.24);
}

@media (prefers-reduced-motion: reduce) {
  .hero-v2-cta-btn,
  .modes-card,
  .ana-action-btn { transition: none !important; }
  .hero-v2-cta-btn:hover,
  .modes-card:hover,
  .ana-action-btn:hover { transform: none !important; }
}

/* ══════════════════════════════════════════
   v4.78.0 — Per-page recommendation card (shared across Drills,
   Progress, Subnet Trainer, Topology Builder).
   Codex round-2: "every page should have one strong recommendation,
   one primary CTA, then supporting data underneath."
═══════════════════════════════════════════ */
.page-rec-card {
  margin-bottom: 18px;
  padding: 16px 20px;
  background: linear-gradient(135deg, var(--accent), #5b4ce0);
  border-radius: 12px;
  color: #fff;
  position: relative;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(124, 111, 247, 0.28);
}
.page-rec-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top right, rgba(255, 255, 255, 0.18), transparent 65%);
  pointer-events: none;
}
.page-rec-eyebrow {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.96);
  padding: 4px 10px;
  background: rgba(255, 255, 255, 0.14);
  border-radius: 99px;
  margin-bottom: 10px;
}
.page-rec-icon { font-size: 16px; line-height: 1; }
.page-rec-headline {
  position: relative;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  color: #fff;
  margin-bottom: 4px;
}
.page-rec-sub {
  position: relative;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.88);
  margin-bottom: 14px;
}
.page-rec-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  background: #fff;
  color: #4338ca;
  border: none;
  border-radius: 8px;
  font-weight: 700;
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}
.page-rec-btn:hover {
  transform: translateY(-1px);
  background: #f5f3ff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.24);
}
.page-rec-reason {
  position: relative;
  display: block;
  margin-top: 10px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.75);
  font-style: italic;
}
@media (prefers-reduced-motion: reduce) {
  .page-rec-btn { transition: none !important; }
  .page-rec-btn:hover { transform: none !important; }
}

/* ── v4.77.0 Analytics motivational empty state (Codex round-2 review) ── */
.ana-empty-card {
  text-align: center;
  padding: 56px 28px 48px;
  max-width: 560px;
  margin: 24px auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  position: relative;
  overflow: hidden;
}
.ana-empty-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top, rgba(124, 111, 247, 0.10), transparent 60%);
  pointer-events: none;
}
.ana-empty-icon {
  font-size: 56px;
  margin-bottom: 18px;
  position: relative;
}
.ana-empty-title {
  /* v4.79.0: bumped to H1-class size per Codex round-3 — when this is
   * the empty state, this IS the page heading. */
  margin: 0 0 14px;
  font-size: 36px;
  font-weight: 800;
  letter-spacing: -0.5px;
  line-height: 1.1;
  color: var(--text);
  position: relative;
}
.ana-empty-body {
  margin: 0 0 24px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-dim);
  position: relative;
}
.ana-empty-body strong { color: var(--text); }
.ana-empty-cta {
  position: relative;
  font-size: 15px;
  padding: 12px 28px;
}
.ana-empty-foot {
  margin: 12px 0 0;
  font-size: 12px;
  color: var(--text-dim);
  font-family: var(--font-mono, monospace);
  letter-spacing: 0.5px;
  position: relative;
}

/* v4.79.0: strong "Start Lesson 1" CTAs replacing vague "Select a lesson"
 * placeholders across all 5 drill landing pages (Subnet/Port/Acronym/OSI/Cable).
 * Per Codex round-3 review. */
.st-lesson-placeholder-v2 {
  text-align: center;
  padding: 56px 28px 48px;
  max-width: 480px;
  margin: 24px auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  position: relative;
  overflow: hidden;
}
.st-lesson-placeholder-v2::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top, rgba(124, 111, 247, 0.10), transparent 60%);
  pointer-events: none;
}
.st-lesson-placeholder-icon {
  font-size: 48px;
  margin-bottom: 14px;
  position: relative;
}
.st-lesson-placeholder-title {
  margin: 0 0 10px;
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  position: relative;
}
.st-lesson-placeholder-sub {
  margin: 0 0 22px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-dim);
  position: relative;
}
.st-lesson-placeholder-v2 .btn { position: relative; font-size: 14px; padding: 10px 22px; }

/* ── v4.81.0: Baseline Diagnostic + Pass Plan (Issue #243) ── */

/* Home-page diagnostic CTA card (above readiness widget on first launch) */
.diagnostic-cta-card {
  background: linear-gradient(135deg, rgba(124,111,247,.14), rgba(124,111,247,.04));
  border: 1px solid rgba(124,111,247,.4);
  border-radius: var(--radius);
  padding: 24px 22px;
  margin-bottom: 14px;
  position: relative;
  overflow: hidden;
}
.diagnostic-cta-card::before {
  content: '';
  position: absolute;
  top: -40%; right: -15%;
  width: 280px; height: 280px;
  background: radial-gradient(circle, rgba(124,111,247,.18) 0%, transparent 60%);
  pointer-events: none;
}
.diagnostic-cta-badge {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 12px;
  letter-spacing: .08em;
  margin-bottom: 10px;
  position: relative;
  z-index: 1;
}
.diagnostic-cta-title {
  font-size: 22px;
  font-weight: 800;
  color: var(--text);
  margin: 0 0 8px;
  position: relative;
  z-index: 1;
}
.diagnostic-cta-sub {
  color: var(--text-mid);
  font-size: 14px;
  margin: 0 0 16px;
  line-height: 1.55;
  position: relative;
  z-index: 1;
}
.diagnostic-cta-pitch {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 0 0 18px;
  position: relative;
  z-index: 1;
}
.diagnostic-cta-pitch-item {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 8px;
  text-align: center;
}
.diagnostic-cta-pitch-num { font-size: 20px; font-weight: 800; color: var(--accent-light); display: block; }
.diagnostic-cta-pitch-lbl { font-size: 10px; color: var(--text-dim); text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
.diagnostic-cta-card .btn-primary {
  position: relative;
  z-index: 1;
}
.diagnostic-cta-skip {
  display: block;
  margin-top: 10px;
  text-align: center;
  font-size: 12px;
  color: var(--text-dim);
  text-decoration: none;
  position: relative;
  z-index: 1;
}
.diagnostic-cta-skip:hover { color: var(--text-mid); }

/* Home-page Pass Plan tile (replaces CTA after diagnostic completes) */
.pass-plan-tile {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 18px;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.pass-plan-tile-icon {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(34,197,94,.15);
  color: var(--green);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  font-weight: 800;
  flex-shrink: 0;
}
.pass-plan-tile-text { flex: 1; min-width: 0; }
.pass-plan-tile-title { font-size: 14px; font-weight: 700; color: var(--text); }
.pass-plan-tile-sub { font-size: 12px; color: var(--text-dim); margin-top: 2px; }
.pass-plan-tile-actions { display: flex; gap: 12px; flex-shrink: 0; }
.pass-plan-tile-actions a {
  color: var(--accent-light);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
}
.pass-plan-tile-actions a.pass-plan-tile-cooldown {
  color: var(--text-dim);
  cursor: default;
}
.pass-plan-tile-retake { color: var(--text-dim); }
@media (max-width: 560px) {
  .pass-plan-tile { flex-direction: column; align-items: flex-start; gap: 10px; }
  .pass-plan-tile-actions { width: 100%; justify-content: space-between; }
}

/* Diagnostic quiz page — single-question flow */
#page-diagnostic-quiz { padding: 0; }
.diag-quiz-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  margin-bottom: 14px;
  position: sticky;
  top: 8px;
  z-index: 5;
  backdrop-filter: blur(8px);
}
.diag-quiz-progress { flex: 1; min-width: 0; }
.diag-quiz-progress-track {
  height: 6px;
  background: var(--surface3);
  border-radius: 3px;
  overflow: hidden;
}
.diag-quiz-progress-fill {
  height: 100%;
  width: 5%;
  background: linear-gradient(90deg, var(--accent), var(--accent-light));
  border-radius: 3px;
  transition: width .4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.diag-quiz-progress-lbl {
  font-size: 11px;
  color: var(--text-dim);
  font-weight: 600;
  margin-top: 5px;
}
.diag-quiz-timer {
  font-family: 'SF Mono', Monaco, monospace;
  font-size: 16px;
  font-weight: 700;
  color: var(--accent-light);
  background: rgba(124,111,247,.1);
  padding: 6px 12px;
  border-radius: 8px;
  flex-shrink: 0;
}
.diag-quiz-timer.overtime { color: var(--orange); background: rgba(251,146,60,.12); }
.diag-quiz-quit {
  background: transparent;
  color: var(--text-dim);
  border: 1px solid var(--border);
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
}
.diag-quiz-quit:hover { color: var(--text); border-color: var(--text-dim); }

.diag-quiz-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
}
.diag-quiz-meta { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.diag-quiz-pill {
  font-size: 10px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 10px;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.diag-quiz-pill.objective { background: rgba(124,111,247,.15); color: var(--accent-light); }
.diag-quiz-pill.difficulty { background: rgba(251,191,36,.15); color: var(--yellow); }
.diag-quiz-question {
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  margin-bottom: 20px;
}
.diag-quiz-options { display: flex; flex-direction: column; gap: 10px; }
.diag-quiz-option {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-size: 14px;
  color: var(--text);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  font-family: inherit;
  transition: border-color .15s, background .15s;
}
.diag-quiz-option:hover { border-color: var(--accent); }
.diag-quiz-option.selected { border-color: var(--accent); background: rgba(124,111,247,.08); }
.diag-quiz-option-letter {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--surface3);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800; color: var(--text-mid);
  flex-shrink: 0;
}
.diag-quiz-option.selected .diag-quiz-option-letter {
  background: var(--accent);
  color: #fff;
}
.diag-quiz-option-text { flex: 1; }
.diag-quiz-confidence {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.diag-quiz-confidence-lbl {
  font-size: 11px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 700;
  margin-bottom: 8px;
}
.diag-quiz-confidence-tiers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.diag-conf-tier {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px;
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-mid);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  transition: background .15s, border-color .15s, color .15s;
}
.diag-conf-tier:hover { border-color: var(--accent); }
.diag-conf-tier .diag-conf-icon { font-size: 18px; }
.diag-conf-tier .diag-conf-lbl { font-size: 11px; }
.diag-conf-tier.selected[data-tier="confident"] {
  border-color: var(--green);
  background: rgba(34,197,94,.1);
  color: var(--green);
}
.diag-conf-tier.selected[data-tier="uncertain"] {
  border-color: var(--yellow);
  background: rgba(251,191,36,.1);
  color: var(--yellow);
}
.diag-conf-tier.selected[data-tier="guessing"] {
  border-color: var(--red);
  background: rgba(248,113,113,.1);
  color: var(--red);
}
.diag-quiz-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
  gap: 12px;
}
.diag-quiz-hint {
  font-size: 12px;
  color: var(--text-dim);
  font-style: italic;
}

/* Pass Plan completion screen */
#page-diagnostic-result { padding: 0; }
.pass-plan-hero {
  background: linear-gradient(135deg, rgba(124,111,247,.18), rgba(124,111,247,.04));
  border: 1px solid rgba(124,111,247,.4);
  border-radius: var(--radius);
  padding: 32px 24px;
  text-align: center;
  margin-bottom: 16px;
  position: relative;
  overflow: hidden;
}
.pass-plan-hero::before {
  content: '';
  position: absolute;
  top: -30%; left: 50%;
  transform: translateX(-50%);
  width: 480px; height: 480px;
  background: radial-gradient(circle, rgba(124,111,247,.18) 0%, transparent 55%);
  pointer-events: none;
}
.pass-plan-complete-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(34,197,94,.15);
  color: var(--green);
  padding: 6px 14px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  margin-bottom: 14px;
  position: relative;
  z-index: 1;
}
.pass-plan-headline {
  font-size: 30px;
  font-weight: 800;
  margin: 0 0 4px;
  color: var(--text);
  position: relative;
  z-index: 1;
}
.pass-plan-sub {
  color: var(--text-mid);
  font-size: 14px;
  margin: 0 0 24px;
  position: relative;
  z-index: 1;
}
.pass-plan-prob-display {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  margin: 8px 0 18px;
}
.pass-plan-prob-ring {
  width: 160px; height: 160px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  position: relative;
  box-shadow: 0 0 40px rgba(124,111,247,.3);
}
.pass-plan-prob-ring::before {
  content: '';
  position: absolute;
  inset: 12px;
  border-radius: 50%;
  background: var(--bg);
}
.pass-plan-prob-inner {
  position: relative;
  text-align: center;
}
.pass-plan-prob-pct {
  font-size: 36px;
  font-weight: 800;
  color: var(--text);
  line-height: 1;
}
.pass-plan-prob-lbl {
  font-size: 10px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: 700;
  margin-top: 4px;
}
.pass-plan-ci-band {
  position: relative;
  z-index: 1;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 18px;
  margin: 0 auto;
  max-width: 380px;
  font-size: 13px;
}
.pass-plan-ci-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
  text-align: left;
}
.pass-plan-ci-row:last-of-type { margin-bottom: 8px; }
.pass-plan-ci-row > span:first-child { color: var(--text-dim); font-weight: 600; }
.pass-plan-ci-row > span:last-child { color: var(--text); font-weight: 700; }
.pass-plan-confidence-ladder {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin-top: 10px;
}
.pass-plan-ladder-tier {
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  border: 1px solid var(--border);
  color: var(--text-dim);
  background: var(--surface3);
}
.pass-plan-ladder-tier.active[data-tier="low"] {
  background: rgba(248,113,113,.15);
  border-color: rgba(248,113,113,.4);
  color: var(--red);
}
.pass-plan-ladder-tier.active[data-tier="medium"] {
  background: rgba(251,191,36,.15);
  border-color: rgba(251,191,36,.4);
  color: var(--yellow);
}
.pass-plan-ladder-tier.active[data-tier="high"] {
  background: rgba(34,197,94,.15);
  border-color: rgba(34,197,94,.4);
  color: var(--green);
}

.pass-plan-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 14px;
}
.pass-plan-section-h {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--text-mid);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 800;
  margin: 0 0 14px;
}
.pass-plan-section-h .icon { font-size: 18px; }
.pass-plan-section-h .count {
  margin-left: auto;
  font-size: 11px;
  background: var(--surface3);
  color: var(--text-dim);
  padding: 3px 10px;
  border-radius: 10px;
  letter-spacing: .04em;
}

.pass-plan-weak-row {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-bottom: 8px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
}
.pass-plan-weak-row:last-child { margin-bottom: 0; }
.pass-plan-weak-name { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.pass-plan-weak-stat { font-size: 12px; color: var(--text-dim); }
.pass-plan-weak-stat .pct { color: var(--red); font-weight: 700; }
.pass-plan-weak-btn {
  background: rgba(124,111,247,.15);
  border: 1px solid rgba(124,111,247,.35);
  color: var(--accent-light);
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
}
.pass-plan-weak-btn:hover { background: rgba(124,111,247,.25); }

.pass-plan-review-seeded {
  background: linear-gradient(135deg, rgba(34,197,94,.1), rgba(34,197,94,.02));
  border: 1px solid rgba(34,197,94,.35);
  border-radius: var(--radius-sm);
  padding: 16px;
  display: flex;
  gap: 14px;
  align-items: center;
}
.pass-plan-review-icon {
  width: 44px; height: 44px;
  background: rgba(34,197,94,.18);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}
.pass-plan-review-text { flex: 1; }
.pass-plan-review-num { font-size: 22px; font-weight: 800; color: var(--green); }
.pass-plan-review-lbl { font-size: 13px; color: var(--text); }
.pass-plan-review-sub { font-size: 12px; color: var(--text-dim); margin-top: 4px; }

.pass-plan-week-strip {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}
.pass-plan-day {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 6px;
  text-align: center;
}
.pass-plan-day.today {
  border-color: var(--accent);
  background: rgba(124,111,247,.12);
}
.pass-plan-day-name {
  font-size: 10px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 700;
  margin-bottom: 6px;
}
.pass-plan-day.today .pass-plan-day-name { color: var(--accent-light); }
.pass-plan-day-load {
  font-size: 14px;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 2px;
}
.pass-plan-day.today .pass-plan-day-load { color: var(--accent-light); }
.pass-plan-day-task {
  font-size: 10px;
  color: var(--text-mid);
  line-height: 1.3;
}
.pass-plan-day.today .pass-plan-day-task { color: var(--text); font-weight: 600; }
@media (max-width: 720px) {
  .pass-plan-week-strip { grid-template-columns: repeat(4, 1fr); }
  .pass-plan-week-strip .pass-plan-day:nth-child(n+8) { display: none; }
}

.pass-plan-pbq-rec {
  background: linear-gradient(135deg, rgba(124,111,247,.1), rgba(124,111,247,.02));
  border: 1px dashed rgba(124,111,247,.4);
  border-radius: var(--radius-sm);
  padding: 14px;
  display: flex;
  gap: 12px;
  align-items: center;
}
.pass-plan-pbq-icon { font-size: 26px; flex-shrink: 0; }
.pass-plan-pbq-text { flex: 1; min-width: 0; }
.pass-plan-pbq-title { font-size: 14px; font-weight: 700; color: var(--text); }
.pass-plan-pbq-sub { font-size: 12px; color: var(--text-dim); margin-top: 2px; }
.pass-plan-pbq-cta {
  color: var(--accent-light);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.pass-plan-final-cta {
  margin-top: 6px;
  padding: 16px;
  text-align: center;
}

/* Reduced-motion gate */
@media (prefers-reduced-motion: reduce) {
  .diag-quiz-progress-fill { transition: width .01ms linear !important; }
  .diag-conf-tier { transition: none !important; }
}

/* ── v4.81.2: Auto-backup safety net (Settings page list) ── */
.autobackup-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 320px;
  overflow-y: auto;
  padding-right: 2px;
}
.ab-empty {
  color: var(--text-dim);
  font-size: 13px;
  padding: 12px 0;
  text-align: center;
  font-style: italic;
}
.ab-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
}
.ab-row-info { flex: 1; min-width: 0; }
.ab-row-date {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  font-family: 'SF Mono', Monaco, monospace;
}
.ab-row-meta {
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 2px;
}
.ab-row-actions { display: flex; gap: 6px; flex-shrink: 0; }
.ab-row-actions .btn {
  padding: 6px 12px !important;
  font-size: 11px !important;
}
.btn-sm { padding: 6px 12px !important; font-size: 11px !important; }
@media (max-width: 540px) {
  .ab-row { flex-direction: column; align-items: stretch; }
  .ab-row-actions { width: 100%; }
  .ab-row-actions .btn { flex: 1; }
}

/* ── v4.81.3: Environment badge ("PROD" / "DEV" pill) ──
 * v4.81.6: relocated from top-right to bottom-LEFT — was overlapping the
 * topbar avatar circle (user report). Bottom-left is the standard
 * dev-tool placement (Vercel, Stripe) and avoids any topbar/sidebar
 * elements entirely. */
.env-badge {
  position: fixed;
  bottom: 12px;
  left: 12px;
  z-index: 9998;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .12em;
  padding: 4px 10px;
  border-radius: 99px;
  font-family: 'SF Mono', Monaco, monospace;
  pointer-events: auto;
  cursor: default;
  user-select: none;
  opacity: .55;
  transition: opacity .2s;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
.env-badge:hover { opacity: 1; }
.env-badge-prod {
  background: linear-gradient(135deg, #dc2626, #991b1b);
  color: #fff;
  border: 1px solid rgba(255,255,255,.2);
}
.env-badge-dev {
  background: linear-gradient(135deg, #16a34a, #15803d);
  color: #fff;
  border: 1px solid rgba(255,255,255,.2);
}
@media (max-width: 540px) {
  /* On phones keep visible but smaller; still bottom-left so it doesn't
   * crowd the mobile topbar / hamburger menu */
  .env-badge { bottom: 8px; left: 8px; font-size: 8px; padding: 3px 8px; }
}

/* ── v4.81.4: API key status pill ── */
.api-key-status {
  margin-top: 8px;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  font-family: 'SF Mono', Monaco, monospace;
  letter-spacing: .02em;
  display: inline-block;
}
.api-key-status-ok {
  background: rgba(34,197,94,.12);
  color: #22c55e;
  border: 1px solid rgba(34,197,94,.3);
}
.api-key-status-warn {
  background: rgba(251,191,36,.12);
  color: #fbbf24;
  border: 1px solid rgba(251,191,36,.3);
}
[data-theme="light"] .api-key-status-ok {
  background: rgba(22,163,74,.1);
  color: #15803d;
  border-color: rgba(22,163,74,.35);
}
[data-theme="light"] .api-key-status-warn {
  background: rgba(180,83,9,.1);
  color: #b45309;
  border-color: rgba(180,83,9,.35);
}

/* ── v4.81.9: ACL Builder — scenario-aware Add Rule defaults + chips (Codex r7 #1) ── */

/* Helper-strip above the grid: scenario-specific guidance */
.acl-rm-helper {
  background: rgba(124,111,247,.12);
  border: 1px solid rgba(124,111,247,.3);
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 14px;
  font-size: 12px;
  color: var(--accent-light);
  line-height: 1.5;
}
[data-theme="light"] .acl-rm-helper {
  background: rgba(99,85,224,.08);
  border-color: rgba(99,85,224,.3);
  color: var(--accent);
}

/* Chip rows under the IP / port inputs */
.acl-rm-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 6px;
}
.acl-rm-chip {
  background: var(--surface3);
  border: 1px solid var(--border);
  color: var(--text-mid);
  font-size: 10px;
  font-family: 'SF Mono', Monaco, monospace;
  font-weight: 600;
  padding: 4px 9px;
  border-radius: 4px;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.acl-rm-chip:hover {
  background: rgba(124,111,247,.15);
  border-color: rgba(124,111,247,.35);
  color: var(--accent-light);
}
.acl-rm-chip:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* Brief flash on the input when a chip fills it — confirmation cue */
.acl-rm-input-flash {
  animation: aclChipFillFlash .35s ease-out;
}
@keyframes aclChipFillFlash {
  0%   { background: rgba(124,111,247,.25); border-color: var(--accent); }
  100% { background: var(--surface2);       border-color: var(--border); }
}
@media (prefers-reduced-motion: reduce) {
  .acl-rm-input-flash { animation: none; }
}

/* ── v4.81.11: Settings Study Setup Health card (Codex r9 #5) ── */
.settings-health-card {
  background: linear-gradient(135deg, rgba(124,111,247,.08), rgba(124,111,247,.02));
  border: 1px solid rgba(124,111,247,.25);
}
.settings-health-eyebrow {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-dim);
  letter-spacing: .04em;
  margin-left: 8px;
  text-transform: none;
}
.settings-health-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  margin-top: 12px;
}
.settings-health-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
}
.settings-health-icon {
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
  flex-shrink: 0;
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
}
.settings-health-ok .settings-health-icon {
  background: rgba(34,197,94,.18);
  color: var(--green);
}
.settings-health-warn .settings-health-icon {
  background: rgba(251,191,36,.18);
  color: var(--yellow);
}
.settings-health-mid .settings-health-icon {
  background: rgba(251,146,60,.18);
  color: var(--orange);
}
.settings-health-text { flex: 1; min-width: 0; }
.settings-health-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: .08em;
}
.settings-health-value {
  font-size: 13px;
  color: var(--text);
  margin-top: 2px;
  font-weight: 600;
  word-break: break-word;
}
.settings-health-warn .settings-health-value { color: var(--text-mid); font-weight: 500; }
[data-theme="light"] .settings-health-card {
  background: linear-gradient(135deg, rgba(99,85,224,.06), rgba(99,85,224,.02));
  border-color: rgba(99,85,224,.25);
}

/* ── v4.81.12: Settings Control Centre — 4-section layout (Codex r9 #6 / Issue #266) ── */
.settings-group {
  margin-bottom: 32px;
}
.settings-group:last-child { margin-bottom: 8px; }
.settings-group-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.settings-group-num {
  font-family: 'SF Mono', Monaco, monospace;
  font-size: 11px;
  letter-spacing: .12em;
  color: var(--text-dim);
  font-weight: 700;
  flex-shrink: 0;
  padding-top: 8px;
  white-space: nowrap;
}
.settings-group-titles { flex: 1; min-width: 0; }
.settings-group-h {
  font-size: 22px;
  font-weight: 800;
  line-height: 1.2;
  margin: 0;
  color: var(--text);
}
.settings-group-h em {
  color: var(--accent-light);
  font-style: normal;
}
.settings-group-sub {
  font-size: 13px;
  color: var(--text-mid);
  margin: 4px 0 0;
  line-height: 1.5;
}
[data-theme="light"] .settings-group-h em {
  color: var(--accent);
}

/* Danger Zone visual treatment */
.settings-group-danger {
  background: rgba(248,113,113,.04);
  border: 1px solid rgba(248,113,113,.18);
  border-radius: 14px;
  padding: 16px 18px;
  margin-top: 32px;
}
.settings-group-head-danger {
  border-bottom-color: rgba(248,113,113,.25);
}
.settings-group-head-danger .settings-group-num,
.settings-group-head-danger .settings-group-h em {
  color: var(--red);
}
.settings-section-danger {
  border-color: rgba(248,113,113,.25) !important;
}
.settings-section-danger .settings-section-title {
  color: var(--red);
}
[data-theme="light"] .settings-group-danger {
  background: rgba(220,38,38,.04);
  border-color: rgba(220,38,38,.18);
}
[data-theme="light"] .settings-group-head-danger .settings-group-num,
[data-theme="light"] .settings-group-head-danger .settings-group-h em {
  color: #b91c1c;
}
[data-theme="light"] .settings-section-danger .settings-section-title {
  color: #b91c1c;
}

/* Mobile responsive */
@media (max-width: 540px) {
  .settings-group { margin-bottom: 24px; }
  .settings-group-h { font-size: 18px; }
  .settings-group-num { padding-top: 4px; font-size: 10px; }
  .settings-group-danger { padding: 12px 14px; }
}

/* ── v4.81.13: Exam-results per-domain breakdown card ── */
.exam-domain-breakdown {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 22px;
  margin: 20px 0;
}
.exam-domain-breakdown-head {
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.exam-domain-breakdown-title {
  font-size: 18px;
  font-weight: 800;
  margin: 0;
  color: var(--text);
}
.exam-domain-breakdown-title em {
  color: var(--accent-light);
  font-style: normal;
}
[data-theme="light"] .exam-domain-breakdown-title em { color: var(--accent); }
.exam-domain-breakdown-sub {
  font-size: 13px;
  color: var(--text-mid);
  margin: 4px 0 0;
}
.exam-domain-breakdown-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.exam-domain-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
}
.exam-domain-row-meta { flex: 1; min-width: 0; }
.exam-domain-row-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}
.exam-domain-row-detail {
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 2px;
}
.exam-domain-row-pct {
  font-size: 22px;
  font-weight: 800;
  font-family: 'SF Mono', Monaco, monospace;
  flex-shrink: 0;
}
/* Tier coloring — anchored to v4.45.1 thresholds (55/70/85) */
.exam-domain-mastered .exam-domain-row-pct,
.exam-domain-mastered .exam-domain-row-name { color: var(--green); }
.exam-domain-mastered { border-color: rgba(34,197,94,.35); background: rgba(34,197,94,.06); }
.exam-domain-proficient .exam-domain-row-pct,
.exam-domain-proficient .exam-domain-row-name { color: var(--accent-light); }
.exam-domain-proficient { border-color: rgba(124,111,247,.35); background: rgba(124,111,247,.06); }
.exam-domain-developing .exam-domain-row-pct,
.exam-domain-developing .exam-domain-row-name { color: var(--yellow); }
.exam-domain-developing { border-color: rgba(251,191,36,.35); background: rgba(251,191,36,.06); }
.exam-domain-novice .exam-domain-row-pct,
.exam-domain-novice .exam-domain-row-name { color: var(--red); }
.exam-domain-novice { border-color: rgba(248,113,113,.35); background: rgba(248,113,113,.06); }
.exam-domain-empty .exam-domain-row-pct { color: var(--text-dim); }
.exam-domain-empty .exam-domain-row-detail { font-style: italic; }
[data-theme="light"] .exam-domain-proficient .exam-domain-row-pct,
[data-theme="light"] .exam-domain-proficient .exam-domain-row-name { color: var(--accent); }
@media (max-width: 540px) {
  .exam-domain-breakdown { padding: 16px; }
  .exam-domain-row { padding: 10px 12px; }
  .exam-domain-row-pct { font-size: 18px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Phase C′ (cloud-first) — topbar account pill + dropdown
   Rendered by auth-state.js into #topbar-account-mount. Mirrors landing
   styles but adapted to cert-app theme tokens (--surface2 instead of
   --bg-elevated, --text-mid instead of landing's separate var).
   ══════════════════════════════════════════════════════════════════════════ */

/* Sign-in pill (anonymous state) */
.topbar-signin-pill {
  display: inline-flex; align-items: center;
  padding: 7px 14px;
  background: linear-gradient(135deg, var(--accent), var(--accent-light));
  color: #fff;
  font-size: 13px; font-weight: 600;
  border-radius: 99px;
  text-decoration: none;
  margin-left: 4px;
  transition: filter .15s ease, transform .1s ease;
  font-family: inherit;
}
.topbar-signin-pill:hover { filter: brightness(1.08); }
.topbar-signin-pill:active { transform: scale(0.97); }
.topbar-signin-pill:focus-visible {
  outline: 2px solid var(--accent-light);
  outline-offset: 2px;
}

/* Account pill (signed-in state) */
.topbar-account-pill {
  position: relative;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 12px 4px 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 99px;
  margin-left: 4px;
  cursor: pointer;
  font-family: inherit;
  transition: border-color .15s ease, background-color .15s ease;
}
.topbar-account-pill:hover,
.topbar-account-pill.is-open {
  border-color: var(--accent);
}
.topbar-account-pill:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.topbar-account-avatar {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-light));
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800;
  flex-shrink: 0;
}
.topbar-account-email {
  font-size: 12px; font-weight: 600;
  color: var(--text);
  max-width: 140px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.topbar-account-chevron {
  font-size: 10px;
  color: var(--text-dim);
  transition: transform .15s ease;
}
.topbar-account-pill.is-open .topbar-account-chevron { transform: rotate(180deg); }

/* Top-bar sync dot — color-coded by latest cloud-store status */
.topbar-sync-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--text-dim);
  flex-shrink: 0;
  transition: background-color .2s ease;
}
.topbar-sync-dot.is-synced  { background: var(--green); }
.topbar-sync-dot.is-syncing { background: var(--yellow, #fbbf24); animation: tsync-pulse 1s ease-in-out infinite; }
.topbar-sync-dot.is-pending { background: var(--yellow, #fbbf24); }
.topbar-sync-dot.is-error   { background: #ef4444; }
.topbar-sync-dot.is-offline { background: var(--text-dim); }
@keyframes tsync-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.45; } }
@media (prefers-reduced-motion: reduce) {
  .topbar-sync-dot.is-syncing { animation: none; }
}

@media (max-width: 540px) {
  .topbar-account-email { max-width: 80px; }
  .topbar-account-pill { padding: 3px 10px 3px 4px; }
  .topbar-account-avatar { width: 22px; height: 22px; font-size: 10px; }
}

/* Account dropdown */
.topbar-account-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  /* v4.98.7: opaque-blend bg + backdrop-filter for proper glass effect.
     Was: var(--surface2) only — translucent, so cards behind it bled through
     (visible against the dark exam-readiness card per user feedback). */
  background: var(--surface2);
  backdrop-filter: blur(24px) saturate(150%);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 8px;
  width: 264px;
  box-shadow: 0 24px 60px -12px rgba(0,0,0,.45);
  z-index: 1100;
  font-family: inherit;
}
/* Fallback for browsers without backdrop-filter — use a fully opaque bg so
   the dropdown is always readable. Modern Chrome/Safari/Firefox support
   backdrop-filter; this guards older browsers + Linux Firefox quirks. */
@supports not (backdrop-filter: blur(1px)) {
  .topbar-account-dropdown { background: var(--surface3); }
}
.topbar-account-dropdown[hidden] { display: none; }
@media (max-width: 720px) {
  .topbar-account-dropdown {
    right: 12px;
    width: calc(100vw - 32px);
    max-width: 300px;
  }
}
.tad-header {
  padding: 12px 12px 10px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}
.tad-email {
  font-size: 13px; font-weight: 700;
  color: var(--text);
  word-break: break-all;
}
.tad-tier {
  font-size: 11px;
  color: var(--green);
  margin-top: 2px;
  font-weight: 600;
}
.tad-sync-status {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  font-size: 11px;
  color: var(--text-mid);
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}
.tad-sync-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--text-dim);
  flex-shrink: 0;
}
.tad-sync-dot.is-synced  { background: var(--green); }
.tad-sync-dot.is-syncing { background: var(--yellow, #fbbf24); animation: tsync-pulse 1s ease-in-out infinite; }
.tad-sync-dot.is-pending { background: var(--yellow, #fbbf24); }
.tad-sync-dot.is-error   { background: #ef4444; }
.tad-sync-dot.is-offline { background: var(--text-dim); }
.tad-sync-text { flex: 1 1 auto; }
.tad-sync-now {
  font-size: 11px;
  color: var(--accent-light);
  text-decoration: none;
  font-weight: 600;
}
.tad-sync-now:hover { text-decoration: underline; }
.tad-link {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px;
  border-radius: 6px;
  color: var(--text-mid);
  font-size: 13px; font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease;
}
.tad-link:hover {
  background: rgba(var(--accent-rgb), .08);
  color: var(--text);
}
.tad-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.tad-icon { font-size: 14px; flex-shrink: 0; }
.tad-divider {
  height: 1px;
  background: var(--border);
  margin: 4px 0;
}
/* v4.89.4: cert switcher rows inside the account dropdown */
.tad-cert-section {
  padding: 6px 0 4px;
}
.tad-cert-section-label {
  padding: 4px 12px 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  text-transform: uppercase;
}
.tad-cert-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  border-radius: 6px;
  color: var(--text-mid);
  font-size: 13px; font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease;
}
.tad-cert-row:hover {
  background: rgba(var(--accent-rgb), .08);
  color: var(--text);
}
.tad-cert-row.is-active {
  color: var(--text);
  cursor: default;
}
.tad-cert-row.is-active:hover {
  background: rgba(var(--accent-rgb), .04);
}
.tad-cert-check {
  width: 14px; height: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px;
  color: var(--accent-light);
  flex-shrink: 0;
}
.tad-cert-check.tad-cert-check-empty {
  /* invisible placeholder so all rows align */
  visibility: hidden;
}
.tad-cert-name {
  flex: 1 1 auto;
  font-weight: 600;
}
.tad-cert-code {
  font-size: 10px;
  color: var(--text-dim);
  font-family: 'SF Mono', Menlo, monospace;
  letter-spacing: 0.04em;
}
.tad-link.is-admin { color: var(--accent-light); }
.tad-link.is-admin:hover {
  background: rgba(var(--accent-rgb), .12);
  color: var(--accent-light);
}
.tad-link.is-danger { color: #f87171; }
.tad-link.is-danger:hover {
  background: rgba(248,113,113,.08);
  color: #f87171;
}
[data-theme="light"] .tad-link.is-danger { color: #dc2626; }
[data-theme="light"] .tad-link.is-danger:hover {
  background: rgba(220,38,38,.06);
  color: #dc2626;
}

}

/* ══════════════════════════════════════════════════════════════════════════
   v4.99.2 Phase E.3 — Topbar AI quota chip + quota-exceeded modal
   ══════════════════════════════════════════════════════════════════════════ */

.topbar-quota-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  border-radius: 99px;
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
  background: rgba(34,197,94,0.10);
  border: 1px solid rgba(34,197,94,0.32);
  color: var(--green, #22c55e);
  white-space: nowrap;
}
.topbar-quota-chip.is-hidden { display: none; }

.topbar-quota-chip .quota-chip-icon {
  font-size: 13px;
  line-height: 1;
}
.topbar-quota-chip .quota-chip-label {
  font-variant-numeric: tabular-nums;
}
.topbar-quota-chip .quota-chip-bar {
  display: inline-block;
  width: 32px; height: 4px;
  border-radius: 2px;
  overflow: hidden;
  background: rgba(255,255,255,0.18);
}
.topbar-quota-chip .quota-chip-fill {
  display: block;
  height: 100%;
  border-radius: 2px;
  background: currentColor;
  transition: width 0.3s ease;
}

.topbar-quota-chip.is-low {
  background: rgba(34,197,94,0.10);
  border-color: rgba(34,197,94,0.32);
  color: var(--green, #22c55e);
}
.topbar-quota-chip.is-approaching {
  background: rgba(245,158,11,0.12);
  border-color: rgba(245,158,11,0.4);
  color: #f59e0b;
}
.topbar-quota-chip.is-exceeded {
  background: rgba(248,113,113,0.12);
  border-color: rgba(248,113,113,0.4);
  color: var(--red, #f87171);
}
.topbar-quota-chip.is-pro {
  background: rgba(124,111,247,0.12);
  border-color: rgba(124,111,247,0.4);
  color: var(--accent-light, #a99df9);
}
.topbar-quota-chip.is-pro .quota-chip-bar { display: none; }

/* Quota-exceeded modal — full-viewport overlay with centered hero card */
.quota-exceeded-modal {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(8,8,16,0.65);
  display: flex; align-items: center; justify-content: center;
  z-index: 9999;
  padding: 20px;
  animation: quotaExceededFadeIn 0.18s ease forwards;
}
@keyframes quotaExceededFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.quota-exceeded-card {
  background: var(--surface, #131320);
  border: 1px solid rgba(248,113,113,0.4);
  border-radius: 12px;
  padding: 28px;
  text-align: center;
  max-width: 460px;
  width: 100%;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.quota-exceeded-icon {
  width: 56px; height: 56px;
  margin: 0 auto 14px;
  border-radius: 14px;
  background: rgba(248,113,113,0.12);
  border: 1px solid rgba(248,113,113,0.4);
  color: var(--red, #f87171);
  display: grid; place-items: center;
  font-size: 26px;
}
.quota-exceeded-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text, #f0f0f8);
  margin-bottom: 8px;
}
.quota-exceeded-sub {
  font-size: 13px;
  color: var(--text-mid, #b0b0cc);
  margin-bottom: 20px;
  line-height: 1.55;
}
.quota-exceeded-sub strong {
  color: var(--text, #f0f0f8);
  font-variant-numeric: tabular-nums;
}
.quota-exceeded-actions {
  display: flex; gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}
.quota-exceeded-cta {
  background: linear-gradient(135deg, #5b4fdb, #7c6ff7);
  color: #fff !important;
  padding: 11px 22px;
  font-size: 13px;
  font-weight: 700;
  border-radius: 8px;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  transition: transform 0.15s ease;
}
.quota-exceeded-cta:hover { transform: translateY(-1px); }
.quota-exceeded-dismiss {
  background: transparent;
  color: var(--text-mid, #b0b0cc);
  border: 1px solid rgba(255,255,255,0.16);
  padding: 11px 20px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
}
.quota-exceeded-dismiss:hover {
  border-color: rgba(255,255,255,0.32);
}

@media (prefers-reduced-motion: reduce) {
  .quota-exceeded-modal { animation: none; }
  .topbar-quota-chip,
  .topbar-quota-chip .quota-chip-fill,
  .quota-exceeded-cta { transition: none !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   v4.99.6 Phase E.5 — Quota chip click tooltip
   ══════════════════════════════════════════════════════════════════════════ */
.quota-chip-tooltip {
  z-index: 9000;
  background: var(--surface, #131320);
  border: 1px solid var(--border, #2e2e48);
  border-radius: 10px;
  padding: 14px 16px;
  font-size: 12px;
  color: var(--text-mid, #b0b0cc);
  line-height: 1.55;
  min-width: 240px;
  max-width: 300px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.45);
  animation: quotaTooltipIn 0.12s ease forwards;
}
@keyframes quotaTooltipIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
.quota-chip-tooltip-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text, #f0f0f8);
  margin-bottom: 8px;
  display: flex; align-items: center; gap: 6px;
}
.quota-chip-tooltip-row {
  display: flex; justify-content: space-between;
  margin: 4px 0;
}
.quota-chip-tooltip-key { color: var(--text-dim, #6b6b90); }
.quota-chip-tooltip-value {
  color: var(--text, #f0f0f8);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.quota-chip-tooltip-foot {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border, #2e2e48);
  font-size: 11px;
  color: var(--text-mid, #b0b0cc);
  line-height: 1.5;
}
.quota-chip-tooltip-divider {
  margin: 8px 0;
  height: 1px;
  background: var(--border, #2e2e48);
}
.quota-chip-tooltip-cta {
  display: block;
  text-align: center;
  padding: 7px 0;
  background: var(--accent, #5b4fdb);
  color: #fff !important;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  text-decoration: none;
  margin-top: 4px;
  transition: background 0.15s ease;
}
.quota-chip-tooltip-cta:hover {
  background: var(--accent-hover, #6e60e8);
}
@media (prefers-reduced-motion: reduce) {
  .quota-chip-tooltip { animation: none; }
}

/* v4.99.17 — Playtest welcome toast. Fires once after a tester completes
   their first password sign-in (set by landing/auth.js, consumed by
   _maybeShowPlaytestWelcomeToast in app.js). Auto-dismisses at 8s; manual
   close via the × button. Reduced-motion gate at the bottom. */
.playtest-welcome-toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.18), rgba(16, 185, 129, 0.06));
  border: 1px solid rgba(16, 185, 129, 0.4);
  border-radius: 12px;
  padding: 14px 16px 14px 14px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(16, 185, 129, 0.15);
  max-width: 360px;
  color: #d1fae5;
  font-size: 13px;
  line-height: 1.45;
  animation: pwtSlideIn 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.playtest-welcome-toast.pwt-leaving {
  animation: pwtSlideOut 0.24s ease-in forwards;
}
.pwt-icon {
  font-size: 18px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(16, 185, 129, 0.25);
  color: #6ee7b7;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-weight: 700;
}
.pwt-body { display: flex; flex-direction: column; gap: 2px; }
.pwt-title { color: #f0fdf4; font-weight: 700; letter-spacing: -0.005em; }
.pwt-sub { color: #a7f3d0; font-size: 12px; }
.pwt-close {
  background: transparent;
  border: none;
  color: #6ee7b7;
  cursor: pointer;
  padding: 0;
  width: 22px;
  height: 22px;
  font-size: 16px;
  line-height: 1;
  border-radius: 4px;
  margin-left: 4px;
  flex-shrink: 0;
  opacity: 0.6;
  transition: opacity .15s ease;
}
.pwt-close:hover { opacity: 1; }
@keyframes pwtSlideIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes pwtSlideOut {
  to { opacity: 0; transform: translateY(8px); }
}
@media (prefers-reduced-motion: reduce) {
  .playtest-welcome-toast { animation: none; }
  .playtest-welcome-toast.pwt-leaving { animation: none; opacity: 0; }
}

/* v4.99.27 — Service worker update banner. Replaces the silent auto-reload
   from v4.89.2 with a visible "New version available — Refresh" prompt.
   Critical for iOS Safari where the auto-reload trigger (controllerchange
   event) fires inconsistently. Now: any time a new SW activates mid-session,
   this banner appears and the user keeps control of when to refresh. */
.sw-update-banner {
  position: fixed;
  bottom: 24px;
  left: 16px;
  right: 16px;
  max-width: 520px;
  margin: 0 auto;
  z-index: 10000;
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: white;
  padding: 14px 16px;
  border-radius: 12px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.08);
  font-size: 14px;
  animation: swBannerSlideIn 0.42s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.sw-banner-icon { font-size: 22px; flex-shrink: 0; }
.sw-banner-body {
  display: flex; flex-direction: column; gap: 2px;
  flex: 1; min-width: 0;
}
.sw-banner-title {
  color: white; font-weight: 700; font-size: 14px; letter-spacing: -0.005em;
}
.sw-banner-sub {
  color: rgba(255, 255, 255, 0.85); font-size: 12px;
}
.sw-banner-cta {
  background: white; color: var(--accent2, #5b4fdb);
  border: none; padding: 8px 16px; border-radius: 8px;
  font-weight: 700; font-size: 13px;
  cursor: pointer; flex-shrink: 0;
  transition: transform 0.1s ease;
  font-family: inherit;
}
.sw-banner-cta:hover { transform: translateY(-1px); }
.sw-banner-dismiss {
  background: transparent; border: none;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer; padding: 0;
  width: 28px; height: 28px;
  font-size: 18px; line-height: 1;
  border-radius: 6px; flex-shrink: 0;
  transition: color 0.15s ease, background 0.15s ease;
}
.sw-banner-dismiss:hover {
  color: white; background: rgba(255, 255, 255, 0.12);
}
@keyframes swBannerSlideIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 480px) {
  .sw-update-banner {
    bottom: 16px; left: 12px; right: 12px; padding: 12px 14px;
  }
  .sw-banner-cta { padding: 7px 12px; font-size: 12px; }
  .sw-banner-sub { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sw-update-banner { animation: none; }
  .sw-banner-cta:hover { transform: none; }
}

/* ══════════════════════════════════════════
   v4.99.31 (iOS Plan Phase 5 — PWA polish)

   Three pieces:
   1. .a2hs-banner — Add to Home Screen prompt (Android: install button;
      iOS: hint-only with share-sheet copy)
   2. body.is-standalone — JS-set when running in standalone display mode
   3. @media (display-mode: standalone) — CSS-only fallback if JS hasn't
      yet set body.is-standalone (rare, defensive)

   Banner sits at bottom + safe-area-inset-bottom so it never overlaps the
   iOS home-bar gesture area or the Android nav bar. Once-per-7-days
   cadence + permanent-dismiss controlled by app.js.
   ══════════════════════════════════════════ */
.a2hs-banner {
  position: fixed;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  left: 16px;
  right: 16px;
  max-width: 480px;
  margin: 0 auto;
  background: linear-gradient(135deg, #1a1a2e 0%, #2a2a4e 100%);
  border: 1px solid var(--accent-dim);
  border-radius: 14px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 12px 40px rgba(0,0,0,.45);
  z-index: 9998;
  animation: a2hsSlideUp .4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.a2hs-banner-icon { font-size: 28px; flex-shrink: 0; }
.a2hs-banner-body { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.a2hs-banner-title { font-size: 14px; font-weight: 700; color: var(--text); }
.a2hs-banner-sub { font-size: 12px; color: var(--text-mid); line-height: 1.4; }
.a2hs-banner-cta {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s, transform .15s;
  min-height: 44px;  /* Apple HIG touch target */
}
.a2hs-banner-cta:hover { background: var(--accent-light); }
.a2hs-banner-cta:active { transform: scale(.96); }
.a2hs-banner-dismiss {
  background: transparent;
  border: none;
  color: var(--text-dim);
  font-size: 22px;
  cursor: pointer;
  padding: 8px 12px;
  line-height: 1;
  transition: color .15s;
  min-width: 44px; min-height: 44px;  /* Apple HIG touch target */
}
.a2hs-banner-dismiss:hover { color: var(--text); }
.a2hs-share-icon { display: inline-block; padding: 0 2px; font-size: 14px; vertical-align: middle; }
@keyframes a2hsSlideUp {
  from { transform: translateY(100px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
@media (max-width: 480px) {
  .a2hs-banner { padding: 12px 14px; gap: 10px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); left: 12px; right: 12px; }
  .a2hs-banner-icon { font-size: 24px; }
  .a2hs-banner-title { font-size: 13px; }
  .a2hs-banner-sub { font-size: 11px; }
}
[data-theme="light"] .a2hs-banner {
  background: linear-gradient(135deg, #ffffff 0%, #f8f8fc 100%);
  border-color: var(--accent-dim);
  box-shadow: 0 12px 40px rgba(0,0,0,.12);
}
@media (prefers-reduced-motion: reduce) {
  .a2hs-banner { animation: none; }
  .a2hs-banner-cta:active { transform: none; }
}

/* Standalone mode polish — body.is-standalone is set by app.js when
   running as an installed PWA. We add safe-area padding to the body's
   top (status bar / Dynamic Island clearance) on iOS, and bottom for
   the home indicator. The @media (display-mode: standalone) fallback
   covers the rare race where CSS evaluates before JS sets the class.
   Both selectors apply the same rules — duplicated rather than combined
   because CSS doesn't support mixing media queries inside a selector list. */
body.is-standalone {
  padding-top: max(env(safe-area-inset-top, 0px), 4px);
}
@media (display-mode: standalone) {
  body { padding-top: max(env(safe-area-inset-top, 0px), 4px); }
}

/* ══════════════════════════════════════════════════════════════════════
   WEB VITALS ADMIN DASHBOARD — Phase 6c (v4.99.50, 2026-05-11)
   ══════════════════════════════════════════════════════════════════════
   Reads web_vitals table (Phase 6b collector). Admin-only. Renders 4-card
   p75 summary + per-cert + per-version + per-platform breakdowns + the
   last 20 raw sessions. Visual language matches the existing analytics
   pages but namespaced .wv-* to stay decoupled. */
.wv-summary, .wv-section { margin-bottom: 22px; }
.wv-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 8px;
}
.wv-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 14px;
  position: relative;
  overflow: hidden;
}
.wv-card.wv-good { border-color: rgba(34, 197, 94, .35); background: linear-gradient(135deg, rgba(34,197,94,.06), var(--surface)); }
.wv-card.wv-mid  { border-color: rgba(251, 191, 36, .35); background: linear-gradient(135deg, rgba(251,191,36,.06), var(--surface)); }
.wv-card.wv-bad  { border-color: rgba(239, 68, 68, .35); background: linear-gradient(135deg, rgba(239,68,68,.06), var(--surface)); }
.wv-card.wv-na   { opacity: .65; }
.wv-card-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.wv-card-value {
  font-size: 26px;
  font-weight: 800;
  color: var(--text);
  margin: 6px 0 4px;
  letter-spacing: -.01em;
}
.wv-card.wv-good .wv-card-value { color: #4ade80; }
.wv-card.wv-mid  .wv-card-value { color: #fbbf24; }
.wv-card.wv-bad  .wv-card-value { color: #f87171; }
.wv-card-sub { font-size: 10px; color: var(--text-dim); font-weight: 600; }
.wv-meta { font-size: 11px; color: var(--text-dim); text-align: right; margin-top: 8px; }
.wv-section-title {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-mid);
  margin: 0 0 10px;
}
.wv-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 14px;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 6px;
  font-size: 13px;
}
.wv-row-label { font-weight: 700; color: var(--text); }
.wv-row-meta { font-size: 11px; color: var(--text-dim); }
.wv-row-val { font-weight: 700; }
.wv-row-val.wv-good { color: #4ade80; }
.wv-row-val.wv-mid  { color: #fbbf24; }
.wv-row-val.wv-bad  { color: #f87171; }
.wv-row-val.wv-na   { color: var(--text-dim); font-weight: 600; }
.wv-table-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; }
.wv-table { width: 100%; border-collapse: collapse; font-size: 12px; min-width: 720px; }
.wv-table th {
  background: var(--surface2);
  color: var(--text-mid);
  text-align: left;
  padding: 10px 12px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 700;
  border-bottom: 1px solid var(--border);
}
.wv-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  color: var(--text-mid);
}
.wv-table tr:last-child td { border-bottom: none; }
.wv-table td:first-child { color: var(--text); font-weight: 600; }
.wv-loading, .wv-empty, .wv-error {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 32px 24px;
  color: var(--text-mid);
  font-size: 14px;
  text-align: center;
}
.wv-error { border-color: rgba(239,68,68,.3); color: #f87171; }
@media (max-width: 600px) {
  .wv-summary-grid { grid-template-columns: repeat(2, 1fr); }
  .wv-row { grid-template-columns: 1fr; gap: 4px; padding: 10px 14px; }
}

/* ══════════════════════════════════════════════════════════════════════
   CONNECTIVITY BANNER — Phase 10 (v4.99.49, 2026-05-11)
   ══════════════════════════════════════════════════════════════════════
   Sticky banner at top of viewport when the device goes offline. Slides
   in via translateY. Z-index 9970: below toasts (9999) and desktop-only
   nudge (9990) but above page content. */
.connectivity-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9970;
  padding: 11px 18px;
  padding-top: max(11px, env(safe-area-inset-top, 11px));
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  color: white;
  transform: translateY(-100%);
  transition: transform .25s cubic-bezier(0.2, 0.8, 0.2, 1);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
}
.connectivity-banner.is-shown { transform: translateY(0); }
.connectivity-banner.offline {
  background: linear-gradient(135deg, #fb923c, #f59e0b);
  color: #1a1a1f;
}
.connectivity-banner.online {
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: white;
}
@media (prefers-reduced-motion: reduce) {
  .connectivity-banner { transition: none; }
}

/* ══════════════════════════════════════════════════════════════════════
   DESKTOP-ONLY NUDGE — Phase 8 (v4.99.48, 2026-05-11)
   ══════════════════════════════════════════════════════════════════════
   Modal overlay that fires when a phone or iPad-portrait user tries to
   open a desktop-only feature (TB · ACL · IRW · PHT · Packet Trace).
   Replaces the prior 3-second toast pattern with a deliberate dismissable
   UI that offers Web Share or copy-link to continue on desktop. */
.donudge-overlay {
  position: fixed;
  inset: 0;
  background: rgba(5, 5, 8, .78);
  z-index: 9990;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  transition: opacity .2s ease;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.donudge-overlay.is-shown { opacity: 1; }
.donudge-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 32px 28px 24px;
  max-width: 440px;
  width: 100%;
  position: relative;
  text-align: center;
  box-shadow: 0 30px 80px rgba(124, 111, 247, .15), 0 6px 24px rgba(0, 0, 0, .5);
  transform: translateY(8px);
  transition: transform .25s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.donudge-overlay.is-shown .donudge-card { transform: translateY(0); }
.donudge-close {
  position: absolute;
  top: 10px;
  right: 14px;
  background: transparent;
  border: none;
  color: var(--text-dim);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 6px;
  transition: color .15s, background .15s;
  font-family: inherit;
}
.donudge-close:hover { color: var(--text); background: var(--surface2); }
.donudge-icon { font-size: 44px; margin-bottom: 10px; }
.donudge-title {
  font-size: 22px;
  font-weight: 800;
  color: var(--text);
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}
.donudge-sub {
  font-size: 14px;
  color: var(--text-mid);
  line-height: 1.55;
  margin: 0 0 20px;
}
.donudge-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}
.donudge-btn {
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  padding: 12px 18px;
  border-radius: 10px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .15s, background .15s, border-color .15s;
}
.donudge-btn-primary {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}
.donudge-btn-primary:hover { background: var(--accent-light); border-color: var(--accent-light); }
.donudge-btn-primary:active { transform: scale(.98); }
.donudge-btn-ghost {
  background: transparent;
  color: var(--text-mid);
  border-color: var(--border);
}
.donudge-btn-ghost:hover { background: var(--surface2); color: var(--text); }
.donudge-foot {
  font-size: 11px;
  color: var(--text-dim);
  margin: 0;
  line-height: 1.5;
  word-break: break-all;
}
@media (prefers-reduced-motion: reduce) {
  .donudge-overlay, .donudge-card { transition: none; }
}

/* ── M-4: Button/chip :active press feedback ── */
.btn:active,
.chip:active,
.option:active,
.setup-nav-btn:active,
.preset-tile:active,
.drills-tile:active {
  transform: scale(0.97);
  transition-duration: 100ms;
}

/* ── M-7: Chip selection feedback ── */
.chip.selected,
.chip[aria-pressed="true"] {
  animation: chipPulse .15s ease-out;
}
@keyframes chipPulse { 50% { transform: scale(1.03); } }

/* ── M-7: Connectivity/offline banner slide ── */
.connectivity-banner {
  transform: translateY(-100%);
  transition: transform .2s ease-out;
}
.connectivity-banner.show {
  transform: translateY(0);
}

/* ── M-7: Theme toggle icon morph ── */
.theme-toggle {
  overflow: hidden;
}
.theme-toggle-icon {
  transition: transform .25s ease-in-out;
}

/* ── M-4 + M-7 reduced-motion gate ── */
@media (prefers-reduced-motion: reduce) {
  .app-sidebar { transition: none !important; }
  .explanation-box.show { animation: none; }
  .chip.selected,
  .chip[aria-pressed="true"] { animation: none; }
  .connectivity-banner { transition: none; }
  .theme-toggle-icon { transition: none; }
}

/* ══════════════════════════════════════════════════════════════════════
   TABLET PORTRAIT — Phase 7 (v4.99.47, 2026-05-11)
   ══════════════════════════════════════════════════════════════════════
   iPad Mini / Air / regular in portrait (768-1023px). Sidebar pins (was
   hamburger drawer until v4.99.46 at this width — see the lowered breakpoint
   at line ~7195). Most grid layouts default to mobile-style stacking at
   this width because content area is constrained to ~548px (768 viewport
   minus 200px pinned sidebar minus minor padding). Overrides below pin
   important grids back to 2-3 columns explicitly.

   Placed at END of styles.css so it wins the cascade against later rules
   like the second .drills-grid declaration at line ~12318.

   iPad landscape (1024+) is NOT affected — falls back to the desktop
   layout naturally. */
@media (min-width: 768px) and (max-width: 1023px) {
  /* Sidebar: 200 vs default 240 → content gets 548px instead of 528. */
  .app-sidebar { width: 200px; }
  body.has-sidebar { padding-left: 200px; }

  /* Page cap bumped — desktop is 800, tablet portrait gets 900 (room for
     when sidebar isn't present, e.g. a page that opts out of has-sidebar). */
  .page { max-width: 900px; }

  /* Vertical-bar domain grid (Analytics page): 5-col is cramped → 3-col */
  .domain-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .domain-cell { min-height: 190px; padding: 14px 12px; }

  /* Setup-page "Drill by domain" tile row: 5-col default is unreadable
     at this width. Drop to 3-col so the domain names stay legible. */
  .modes-domain-tiles { grid-template-columns: repeat(3, 1fr); }
  .modes-domain-tile .mdt-name { font-size: 12.5px; }

  /* Drills launcher tiles: 2-col explicit. The auto-fit minmax(240px,1fr)
     base rule mis-picks 1-col at ~500px container width. Force 2 here. */
  .drills-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* Setup-page editorial preset rows + question-count chips: 2-col. */
  .quiz-presets { grid-template-columns: repeat(2, 1fr) !important; }

  /* Analytics milestones: desktop 4-col → 3-col on tablet portrait. */
  .ana-milestones { grid-template-columns: repeat(3, 1fr); }
}

/* ── Hover-transform gate (Rule 7): only fire on pointer-capable devices ── */
@media not (hover: hover) {
  .btn-primary:hover,
  .theme-toggle:hover,
  .review-filter-chip:hover,
  .resource-dive-btn:hover,
  .btn-tool:hover,
  .port-ref-card:hover,
  .port-opt:hover,
  .port-submit-family:hover,
  .ana-bar:hover,
  .ana-bar:hover .ana-bar-tip,
  .ana-cal-day:hover,
  .ana-cal-day:hover .cal-tip,
  .sd-btn:hover,
  .dc-btn:hover,
  .tplan-chip:hover,
  .tplan-bridge-btn:hover,
  .tplan-cta:hover,
  .setup-nav-btn:hover,
  .preset-tile:hover,
  .drills-tile:hover,
  .modes-domain-tile:hover,
  .tdp-pill:hover,
  .ana-ready-datechip:hover,
  .dm-drill-btn:hover,
  .ana-milestone-on:hover,
  .tb-palette-item:hover,
  .tb-cable-chip:hover,
  .sb-streak-active:hover,
  .ana-const-tt-btn:hover,
  .sr-confidence-btn:hover,
  .amm-dash-cta:hover,
  .cts-dash-cta:hover,
  .ptr-dash-cta:hover,
  .irw-scen-card:hover,
  .irw-action-card:hover,
  .pht-scen-card:hover,
  .quota-exceeded-cta:hover,
  .sw-banner-cta:hover {
    transform: none !important;
  }
}