/* ══════════════════════════════════════════
   Network+ AI Quiz — styles.css  v4.88.0
   ══════════════════════════════════════════ */

*, *::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: -100px; left: 50%; transform: translateX(-50%); background: var(--accent); color: #fff; padding: 10px 24px; border-radius: 0 0 8px 8px; font-size: 14px; font-weight: 700; z-index: 10000; transition: top .2s; text-decoration: none; }
.skip-link:focus { top: 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: all .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%; }
body { background: var(--bg); color: var(--text); font-family: 'Segoe UI',system-ui,-apple-system,sans-serif; min-height: 100vh; 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 .35s 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: all .15s; text-decoration: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.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; }
}
.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: all .15s; white-space: nowrap; -webkit-tap-highlight-color: transparent; touch-action: manipulation; min-height: 36px; }
.chip:hover { border-color: var(--accent-dim); color: var(--text); }
.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; }

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: 14px; 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: all .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: all .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: all .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: all .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, optGlowPulse .9s 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 .4s ease; }
.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 340ms 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: all .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: all .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 .4s ease; }
.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; }
.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: all .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: all .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: all .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: all .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: all .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: all .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: all .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: all .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: all .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: all .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: all .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: all .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: all .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); }

/* ── PORT DRILL REVIEW ── */
.port-missed-review { margin-top: 20px; text-align: left; }
.port-missed-review h3 { color: var(--red); margin-bottom: 10px; }
.port-review-row { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--border); font-size: 13px; }
.port-review-row:last-child { border-bottom: none; }
.port-review-proto { font-weight: 700; color: var(--text); flex: 1; }
.port-review-correct { font-weight: 700; color: var(--green); font-family: monospace; min-width: 70px; }
.port-review-yours { font-size: 12px; color: var(--text-dim); }
.port-review-wrong { color: var(--red); font-weight: 600; }
.port-review-perfect { text-align: center; font-size: 16px; font-weight: 700; color: var(--green); padding: 16px; }

/* ── 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: all .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: all .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: all .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: all .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 .5s 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 .4s 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 .4s 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); 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: all .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: all .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: all .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: all .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: all .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: all .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: all .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: all .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: all 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: all .2s ease; 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: all .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: all .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: all .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: all .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: all .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: all .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; }
}

/* ══════════════════════════════════════════
   TOPOLOGY BUILDER (v4.18 / #74)
══════════════════════════════════════════ */
/* Override default .page max-width so the builder gets real estate */
#page-topology-builder { max-width: 1500px; }
.tb-count-pill {
  display: inline-block;
  font-size: 11px; font-weight: 700; letter-spacing: .06em;
  color: var(--accent-light);
  background: rgba(124, 111, 247, .12);
  border: 1px solid rgba(124, 111, 247, .3);
  padding: 4px 12px; border-radius: 99px;
}
.tb-mobile-nudge {
  text-align: center; padding: 60px 24px;
  background: rgba(124, 111, 247, .06);
  border: 1px dashed rgba(124, 111, 247, .3);
  border-radius: 16px;
}
.tb-mobile-nudge-icon { font-size: 56px; margin-bottom: 12px; }
.tb-mobile-nudge h3 { margin: 0 0 8px; color: var(--text); }
.tb-mobile-nudge p { color: var(--text-mid); max-width: 420px; margin: 0 auto 20px; line-height: 1.6; }

.tb-main { display: flex; flex-direction: column; gap: 12px; }

/* Collapsible intro banner wrapper */
.tb-intro-details {
  border: 1px solid rgba(124, 111, 247, .25);
  border-left: 3px solid var(--accent);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(124, 111, 247, .1), rgba(124, 111, 247, .04));
}
.tb-intro-summary {
  padding: 10px 16px;
  font-size: 13px; font-weight: 700; color: var(--text-mid);
  cursor: pointer; list-style: none; user-select: none;
}
.tb-intro-summary::-webkit-details-marker { display: none; }
.tb-intro-summary::before { content: '\25B6'; margin-right: 8px; font-size: 10px; display: inline-block; transition: transform .15s; }
.tb-intro-details[open] > .tb-intro-summary::before { transform: rotate(90deg); }
.tb-intro-banner {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 4px 18px 14px;
  border: none; border-radius: 0;
}
.tb-intro-icon { font-size: 32px; line-height: 1; flex-shrink: 0; margin-top: 2px; }
.tb-intro-body { flex: 1; }
.tb-intro-title {
  font-size: 14px; font-weight: 700; color: var(--text);
  margin-bottom: 4px;
}
.tb-intro-text {
  font-size: 12px; line-height: 1.6; color: var(--text-mid);
}

/* Collapsible how-to strip wrapper */
.tb-howto-details {
  border: 1px solid rgba(124,111,247,.28);
  border-left: 4px solid var(--accent);
  border-radius: 10px;
  background: linear-gradient(90deg, rgba(124,111,247,.14), rgba(34,197,94,.10));
}
.tb-howto-summary {
  padding: 8px 12px;
  font-size: 12px; font-weight: 700; color: var(--text-mid);
  cursor: pointer; list-style: none; user-select: none;
}
.tb-howto-summary::-webkit-details-marker { display: none; }
.tb-howto-summary::before { content: '\25B6'; margin-right: 8px; font-size: 10px; display: inline-block; transition: transform .15s; }
.tb-howto-details[open] > .tb-howto-summary::before { transform: rotate(90deg); }

.tb-toolbar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 10px 12px;
  background: rgba(15, 23, 42, .4);
  border: 1px solid rgba(124, 111, 247, .18);
  border-radius: 12px;
}
.tb-tool-btn { padding: 8px 14px !important; font-size: 13px !important; }
.tb-toolbar-spacer { flex: 1; }
.tb-toolbar-divider {
  width: 1px; height: 22px;
  background: rgba(124, 111, 247, .3);
  flex-shrink: 0;
}
.tb-status {
  font-size: 12px; color: var(--text-mid);
  font-style: italic;
}
.tb-load-select {
  background: rgba(15, 23, 42, .6);
  color: var(--text);
  border: 1px solid rgba(124, 111, 247, .3);
  border-radius: 8px;
  padding: 8px 12px; font-size: 13px;
  cursor: pointer;
}

.tb-workspace {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 12px;
  min-height: 900px;
}
.tb-workspace:has(.tb-config-panel:not(.is-hidden)),
.tb-workspace.tb-config-open {
  grid-template-columns: 200px 1fr 360px;
}

/* Palette — height tracks the canvas (min-height 900 matches .tb-canvas-wrap)
   so the column doesn't dead-space below the scroll when canvas is taller. */
.tb-palette {
  background: rgba(15, 23, 42, .4);
  border: 1px solid rgba(124, 111, 247, .18);
  border-radius: 12px;
  padding: 12px;
  display: flex; flex-direction: column;
  min-height: 900px;
  max-height: 1200px;
  overflow-y: auto;
}
.tb-palette-head {
  font-size: 11px; font-weight: 700; letter-spacing: .08em;
  color: var(--text-dim); text-transform: uppercase;
  margin-bottom: 10px;
}
/* Palette category group headers */
.tb-palette-group-head {
  font-size: 10px; font-weight: 700; letter-spacing: .08em;
  color: var(--accent-light); text-transform: uppercase;
  margin: 10px 0 4px; padding: 0 2px;
  opacity: .75;
}
.tb-palette-group-head:first-child { margin-top: 0; }

.tb-palette-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; margin-bottom: 6px;
  background: rgba(15, 23, 42, .5);
  border: 1px solid var(--tb-device-color, rgba(124, 111, 247, .3));
  border-left: 3px solid var(--tb-device-color, rgba(124, 111, 247, .5));
  border-radius: 8px;
  cursor: grab;
  user-select: none;
  transition: transform .12s, background .12s;
}
.tb-palette-item:hover { background: rgba(15, 23, 42, .8); transform: translateX(2px); }
.tb-palette-item:active { cursor: grabbing; }
.tb-palette-item-dragging { opacity: .5; }
.tb-palette-icon { font-size: 20px; line-height: 1; }
.tb-palette-icon-svg { flex-shrink: 0; display: block; }

/* Cable type picker chips (palette "Cables" sub-section) */
.tb-palette-head-cables { margin-top: 14px; }
#tb-palette-cables {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 6px;
}
.tb-cable-chip {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px;
  background: rgba(15, 23, 42, .5);
  border: 1px solid rgba(124, 111, 247, .22);
  border-left: 3px solid var(--tb-cable-color, rgba(124,111,247,.5));
  border-radius: 8px;
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  transition: background .12s, transform .12s, border-color .12s;
}
.tb-cable-chip:hover { background: rgba(15, 23, 42, .85); transform: translateX(2px); }
.tb-cable-chip-active {
  background: rgba(124, 111, 247, .2);
  border-color: var(--tb-cable-color, var(--accent));
  box-shadow: 0 0 0 1px var(--tb-cable-color, var(--accent)) inset;
}
.tb-cable-chip-swatch { flex-shrink: 0; }
.tb-cable-chip-label { flex: 1; }
.tb-palette-label { font-size: 12px; font-weight: 600; color: var(--text); }
.tb-palette-hint {
  margin-top: 14px; padding-top: 12px;
  border-top: 1px solid rgba(124, 111, 247, .15);
  font-size: 10px; color: var(--text-dim); line-height: 1.7;
}

/* Canvas */
.tb-canvas-wrap {
  position: relative;
  background: rgba(11, 16, 32, .6);
  border: 1px solid rgba(124, 111, 247, .2);
  border-radius: 12px;
  overflow: hidden;
  min-height: 900px;
}
.tb-canvas {
  display: block; width: 100%; height: 100%;
  min-height: 900px;
  cursor: default;
}
.tb-canvas-wrap.tb-drop-active {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(124, 111, 247, .25);
}
.tb-empty-hint {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  color: var(--text-dim); font-size: 14px;
  pointer-events: none;
  text-align: center;
}

/* Device groups */
.tb-device { cursor: grab; }
.tb-device:active { cursor: grabbing; }
.tb-device .tb-device-bg { transition: fill-opacity .12s, stroke-width .12s; }
.tb-device:hover .tb-device-bg { fill-opacity: .3; }
.tb-device-selected .tb-device-bg {
  fill-opacity: .4;
  stroke-width: 3;
  filter: drop-shadow(0 0 6px rgba(124, 111, 247, .6));
}
.tb-device-pending .tb-device-bg {
  stroke-dasharray: 4 3;
  stroke-width: 3;
  filter: drop-shadow(0 0 8px rgba(34, 197, 94, .7));
}
.tb-device-lab-target .tb-device-bg {
  animation: tbLabTargetPulse 1.5s ease-in-out infinite;
}
@keyframes tbLabTargetPulse {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(251, 191, 36, .3)); stroke-width: 2; }
  50% { filter: drop-shadow(0 0 14px rgba(251, 191, 36, .8)); stroke-width: 3.5; fill-opacity: .35; }
}
.tb-device-label { font-weight: 600; pointer-events: none; }
.tb-device-icon { pointer-events: none; }

/* Cables */
/* Cables: realistic two-layer paths. Stroke color + width come from
   inline SVG attrs (per cable type), CSS only handles interaction state. */
.tb-cable {
  cursor: pointer;
  transition: filter .12s, opacity .12s;
  opacity: 0.95;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.55));
}
.tb-cable:hover { opacity: 1; filter: drop-shadow(0 0 6px rgba(255,255,255,.4)); }
.tb-cable-sheath { pointer-events: none; }
.tb-cable-selected {
  filter: drop-shadow(0 0 8px rgba(251, 191, 36, .9));
}
.tb-cable-selected.tb-cable { stroke: #fbbf24 !important; }

/* How-to strip — persistent wiring/movement instructions */
/* ── v4.49.1: How-to strip UI revamp ──
 * Split the old 4-item cramped row into 5 focused step cards, each with
 * a numbered corner badge, distinct emoji icon, bold title, and
 * description. Premium card styling matching v4.47.2 aesthetic. */
.tb-howto-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin: 0;
  padding: 12px 14px 14px;
  color: var(--text);
}
.tb-howto-step {
  position: relative;
  padding: 14px 14px 12px;
  background:
    radial-gradient(140% 160% at 0% 0%, rgba(124,111,247,.10), transparent 55%),
    linear-gradient(160deg, rgba(124,111,247,.06), rgba(124,111,247,.02));
  border: 1px solid rgba(124,111,247,.25);
  border-radius: 12px;
  overflow: hidden;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.tb-howto-step:hover {
  transform: translateY(-2px);
  border-color: rgba(124,111,247,.45);
  box-shadow: 0 6px 16px -8px rgba(124,111,247,.3);
}
.tb-howto-step-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}
.tb-howto-step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent); color: #fff;
  font-size: 11px; font-weight: 800; letter-spacing: .02em;
  box-shadow: 0 1px 3px rgba(124,111,247,.35);
}
.tb-howto-step-icon {
  font-size: 22px; line-height: 1; opacity: .92;
}
.tb-howto-step-title {
  font-size: 15px; font-weight: 800; letter-spacing: -.01em;
  color: var(--accent-light, #a78bfa);
  margin-bottom: 4px;
}
.tb-howto-step-desc {
  font-size: 12.5px; line-height: 1.55;
  color: var(--text-mid, #94a3b8);
}
.tb-howto-step-desc em {
  font-style: normal; font-weight: 700; color: var(--text);
}
.tb-howto-step-desc strong {
  color: var(--accent-light, #a78bfa); font-weight: 700;
}
.tb-howto-step kbd {
  display: inline-block;
  background: rgba(15,23,42,.7);
  border: 1px solid rgba(124,111,247,.35);
  border-bottom-width: 2px;
  border-radius: 4px;
  padding: 1px 7px;
  font-size: 11px;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  color: var(--text);
  font-weight: 600;
  line-height: 1.4;
  vertical-align: baseline;
}
@media (max-width: 680px) {
  .tb-howto-strip { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; padding: 10px 12px 12px; }
  .tb-howto-step { padding: 12px 12px 10px; }
  .tb-howto-step-title { font-size: 14px; }
  .tb-howto-step-desc { font-size: 12px; }
}

/* Floating "Wiring..." overlay shown while pending cable is active */
.tb-wire-overlay {
  position: absolute;
  top: 12px; left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 18px;
  background: linear-gradient(90deg, rgba(34,197,94,.28), rgba(124,111,247,.28));
  border: 2px solid #22c55e;
  border-radius: 999px;
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 6px 22px rgba(34,197,94,.35), 0 0 0 1px rgba(34,197,94,.3);
  backdrop-filter: blur(4px);
  animation: tb-wire-pulse 1.8s ease-in-out infinite;
}
.tb-wire-overlay-icon { font-size: 18px; }
.tb-wire-overlay kbd {
  background: rgba(15,23,42,.7);
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 11px;
  font-family: ui-monospace, monospace;
  color: #fff;
}
@keyframes tb-wire-pulse {
  0%, 100% { box-shadow: 0 6px 22px rgba(34,197,94,.35), 0 0 0 1px rgba(34,197,94,.3); }
  50%      { box-shadow: 0 6px 30px rgba(34,197,94,.6),  0 0 0 3px rgba(34,197,94,.4); }
}

@media (max-width: 900px) {
  .tb-workspace { grid-template-columns: 1fr; }
  .tb-palette { flex-direction: row; flex-wrap: wrap; }
}

/* ══════════════════════════════════════════
   TOPOLOGY BUILDER TIER 2 — Grader + Scenarios + Export
   ══════════════════════════════════════════ */

.tb-tool-btn-primary {
  background: linear-gradient(135deg, rgba(124,111,247,.28), rgba(124,111,247,.16));
  border: 1px solid rgba(124,111,247,.55);
  color: #e9e5ff;
  font-weight: 700;
}
.tb-tool-btn-primary:hover {
  background: linear-gradient(135deg, rgba(124,111,247,.42), rgba(124,111,247,.24));
  box-shadow: 0 4px 14px rgba(124,111,247,.35);
}

.tb-scenario-select {
  min-width: 190px;
}

.tb-scenario-panel {
  margin: 10px 0 12px;
  padding: 14px 18px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(124,111,247,.1), rgba(34,197,94,.06));
  border: 1px solid rgba(124,111,247,.35);
  border-left: 4px solid var(--accent);
}
.tb-scenario-head { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.tb-scenario-title { font-size: 16px; font-weight: 800; color: var(--accent-light, #a78bfa); }
.tb-scenario-desc { font-size: 13px; color: var(--text-dim, #94a3b8); line-height: 1.5; }
.tb-scenario-reqs {
  margin: 4px 0 0 0;
  padding-left: 22px;
  font-size: 13px;
  color: var(--text, #e2e8f0);
  line-height: 1.6;
}
.tb-scenario-reqs li { margin-bottom: 2px; }

/* ── v4.47.0: Learn-more collapsible pane inside the scenario panel ──
 * Adds rich pedagogical content (overview / data flow / key devices /
 * concepts / exam ties) behind a <details>/<summary> toggle. Always
 * collapsed by default so it doesn't steal canvas space on load. */
.tb-scenario-learn {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(124,111,247,.18);
}
.tb-scenario-learn-summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(124,111,247,.08);
  border: 1px solid rgba(124,111,247,.25);
  font-size: 13px;
  font-weight: 700;
  color: var(--accent-light, #a78bfa);
  transition: all .2s ease;
  user-select: none;
}
.tb-scenario-learn-summary::-webkit-details-marker { display: none; }
.tb-scenario-learn-summary::marker { content: ''; }
.tb-scenario-learn-summary:hover {
  background: rgba(124,111,247,.14);
  border-color: rgba(124,111,247,.4);
  transform: translateY(-1px);
}
.tb-scenario-learn-icon { font-size: 15px; line-height: 1; }
.tb-scenario-learn-label { flex: 1; letter-spacing: -.01em; }
.tb-scenario-learn-chev {
  font-size: 18px;
  font-weight: 800;
  color: var(--accent-light, #a78bfa);
  transform: rotate(0deg);
  transition: transform .25s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.tb-scenario-learn[open] .tb-scenario-learn-chev { transform: rotate(90deg); }

.tb-scenario-learn-body {
  margin-top: 14px;
  padding: 16px 18px;
  background: rgba(15, 23, 42, .35);
  border-radius: 12px;
  border: 1px solid rgba(124,111,247,.15);
  display: flex;
  flex-direction: column;
  gap: 18px;
  animation: tbScenarioLearnFade .4s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
@keyframes tbScenarioLearnFade {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.tb-scenario-sec { display: flex; flex-direction: column; gap: 6px; }
.tb-scenario-sec-title {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent-light, #a78bfa);
}
.tb-scenario-sec-ico { font-size: 14px; line-height: 1; opacity: .9; }
.tb-scenario-sec-body {
  margin: 0;
  font-size: 13px;
  line-height: 1.62;
  color: var(--text, #e2e8f0);
}
.tb-scenario-keydevs,
.tb-scenario-concepts {
  margin: 0;
  padding-left: 20px;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text, #e2e8f0);
}
.tb-scenario-keydevs li,
.tb-scenario-concepts li {
  position: relative;
  padding-left: 0;
}
.tb-scenario-keydevs li::before,
.tb-scenario-concepts li::before {
  content: '';
  position: absolute;
  left: -14px;
  top: 9px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(124,111,247,.6);
}
.tb-scenario-keydevs strong,
.tb-scenario-concepts strong {
  color: var(--accent-light, #a78bfa);
  font-weight: 700;
}
.tb-scenario-concept-sep { color: var(--text-dim, #94a3b8); margin: 0 4px; }

/* Exam ties gets a subtle "study" highlight */
.tb-scenario-sec-exam {
  padding: 10px 14px;
  background: rgba(251,191,36,.06);
  border-left: 3px solid rgba(251,191,36,.5);
  border-radius: 8px;
}
.tb-scenario-sec-exam .tb-scenario-sec-title { color: var(--yellow, #fbbf24); }

/* Light-theme overrides */
[data-theme="light"] .tb-scenario-learn-summary { background: rgba(99,85,224,.06); border-color: rgba(99,85,224,.22); color: #5b4bdc; }
[data-theme="light"] .tb-scenario-learn-summary:hover { background: rgba(99,85,224,.12); border-color: rgba(99,85,224,.4); }
[data-theme="light"] .tb-scenario-learn-chev { color: #5b4bdc; }
[data-theme="light"] .tb-scenario-learn-body { background: rgba(99,85,224,.03); border-color: rgba(99,85,224,.14); }
[data-theme="light"] .tb-scenario-sec-title { color: #5b4bdc; }
[data-theme="light"] .tb-scenario-keydevs strong,
[data-theme="light"] .tb-scenario-concepts strong { color: #5b4bdc; }
[data-theme="light"] .tb-scenario-keydevs li::before,
[data-theme="light"] .tb-scenario-concepts li::before { background: rgba(99,85,224,.6); }
[data-theme="light"] .tb-scenario-sec-exam { background: rgba(234,179,8,.08); border-left-color: rgba(234,179,8,.5); }
[data-theme="light"] .tb-scenario-sec-exam .tb-scenario-sec-title { color: #b45309; }

/* Narrow viewport — tighten padding */
@media (max-width: 560px) {
  .tb-scenario-learn-body { padding: 12px 14px; gap: 14px; }
  .tb-scenario-sec-body { font-size: 12.5px; }
  .tb-scenario-keydevs,
  .tb-scenario-concepts { font-size: 12px; }
}

/* Grade modal */
.tb-grade-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.tb-grade-modal.is-hidden { display: none; }
.tb-grade-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5, 8, 16, .78);
  backdrop-filter: blur(4px);
}
.tb-grade-card {
  position: relative;
  z-index: 1;
  width: min(720px, 96vw);
  max-height: 88vh;
  overflow-y: auto;
  background: #0f172a;
  border: 1px solid rgba(124,111,247,.4);
  border-radius: 16px;
  box-shadow: 0 24px 64px rgba(0,0,0,.6), 0 0 0 1px rgba(124,111,247,.25);
  padding: 22px 26px 26px;
}
.tb-grade-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.tb-grade-close {
  background: transparent;
  border: none;
  color: #94a3b8;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  padding: 0 6px;
}
.tb-grade-close:hover { color: #e2e8f0; }

.tb-grade-hero {
  display: flex;
  gap: 22px;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(148,163,184,.2);
}
.tb-grade-circle {
  flex-shrink: 0;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  border: 5px solid #22c55e;
  color: #22c55e;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(34,197,94,.08);
}
.tb-grade-letter { font-size: 38px; font-weight: 900; line-height: 1; }
.tb-grade-score { font-size: 13px; font-weight: 700; margin-top: 4px; opacity: .9; }
.tb-grade-summary { flex: 1; min-width: 0; }
.tb-grade-scenario { font-size: 18px; font-weight: 800; color: #e2e8f0; margin-bottom: 10px; }
.tb-grade-counts { display: flex; flex-wrap: wrap; gap: 8px; }
.tb-grade-count {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  border: 1px solid;
}
.tb-grade-count-pass { color: #22c55e; border-color: rgba(34,197,94,.45); background: rgba(34,197,94,.1); }
.tb-grade-count-crit { color: #ef4444; border-color: rgba(239,68,68,.5);  background: rgba(239,68,68,.1); }
.tb-grade-count-warn { color: #eab308; border-color: rgba(234,179,8,.5);  background: rgba(234,179,8,.1); }
.tb-grade-count-info { color: #38bdf8; border-color: rgba(56,189,248,.5); background: rgba(56,189,248,.1); }

.tb-grade-section {
  margin-bottom: 16px;
  padding: 12px 14px;
  border-radius: 10px;
  border-left: 3px solid;
  background: rgba(15,23,42,.5);
}
.tb-grade-crit { border-color: #ef4444; background: rgba(239,68,68,.08); }
.tb-grade-warn { border-color: #eab308; background: rgba(234,179,8,.08); }
.tb-grade-info { border-color: #38bdf8; background: rgba(56,189,248,.08); }
.tb-grade-pass { border-color: #22c55e; background: rgba(34,197,94,.06); }
.tb-grade-section-title {
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .4px;
  margin-bottom: 8px;
  color: #e2e8f0;
}
.tb-grade-item {
  padding: 8px 10px;
  margin-bottom: 6px;
  border-radius: 6px;
  background: rgba(11,16,32,.6);
}
.tb-grade-item:last-child { margin-bottom: 0; }
.tb-grade-item-label { font-size: 13px; font-weight: 700; color: #e2e8f0; margin-bottom: 2px; }
.tb-grade-item-hint  { font-size: 12px; color: #94a3b8; line-height: 1.5; }
.tb-grade-item-pass {
  padding: 6px 10px;
  margin-bottom: 4px;
  font-size: 12px;
  color: #a7f3d0;
  background: rgba(34,197,94,.08);
  border-radius: 4px;
}

/* ══ Tier 3 — Coach modal ══ */
.tb-tool-btn-coach {
  background: linear-gradient(135deg, rgba(14,165,233,.28), rgba(14,165,233,.14));
  border: 1px solid rgba(14,165,233,.55);
  color: #dbeafe;
  font-weight: 700;
}
.tb-tool-btn-coach:hover {
  background: linear-gradient(135deg, rgba(14,165,233,.42), rgba(14,165,233,.22));
  box-shadow: 0 4px 14px rgba(14,165,233,.35);
}
.tb-tool-btn-ai {
  background: linear-gradient(135deg, rgba(168,85,247,.28), rgba(168,85,247,.14));
  border: 1px solid rgba(168,85,247,.55);
  color: #e9d5ff;
  font-weight: 700;
}
.tb-tool-btn-ai:hover {
  background: linear-gradient(135deg, rgba(168,85,247,.42), rgba(168,85,247,.22));
  box-shadow: 0 4px 14px rgba(168,85,247,.35);
}
.tb-explain-btn {
  font-size: 12px;
  padding: 2px 8px;
  margin-left: auto;
  margin-right: 8px;
  color: #fde68a;
  border: 1px solid rgba(253,224,71,.3);
  border-radius: 6px;
}
.tb-explain-btn:hover {
  background: rgba(253,224,71,.12);
}

.tb-coach-loading {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 28px 8px;
}
.tb-coach-spinner {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 4px solid rgba(14,165,233,.25);
  border-top-color: #0ea5e9;
  animation: tb-coach-spin 0.85s linear infinite;
  flex-shrink: 0;
}
@keyframes tb-coach-spin { to { transform: rotate(360deg); } }
.tb-coach-loading-text strong { color: #e2e8f0; font-size: 15px; }
.tb-coach-loading-sub { font-size: 12px; color: #94a3b8; margin-top: 4px; }

.tb-coach-error {
  padding: 18px;
  border-radius: 10px;
  background: rgba(239,68,68,.08);
  border: 1px solid rgba(239,68,68,.35);
}
.tb-coach-error-title { font-weight: 800; color: #fca5a5; margin-bottom: 6px; }
.tb-coach-error-msg   { font-size: 13px; color: #fecaca; line-height: 1.5; }

.tb-coach-head {
  padding: 14px 16px;
  margin-bottom: 16px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(14,165,233,.14), rgba(124,111,247,.08));
  border-left: 4px solid #0ea5e9;
}
.tb-coach-scenario {
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: #7dd3fc;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.tb-coach-cached {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  background: rgba(148,163,184,.2);
  color: #cbd5e1;
  border: 1px solid rgba(148,163,184,.35);
}
.tb-coach-tour {
  font-size: 14px;
  line-height: 1.65;
  color: #e2e8f0;
}

.tb-coach-section {
  margin-bottom: 14px;
  padding: 12px 14px;
  border-radius: 10px;
  border-left: 3px solid;
  background: rgba(15,23,42,.5);
}
.tb-coach-strengths  { border-color: #22c55e; background: rgba(34,197,94,.08);  }
.tb-coach-concerns   { border-color: #eab308; background: rgba(234,179,8,.08);  }
.tb-coach-upgrades   { border-color: #0ea5e9; background: rgba(14,165,233,.08); }
.tb-coach-objectives { border-color: #a78bfa; background: rgba(167,139,250,.08);}
.tb-coach-section-title {
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .4px;
  margin-bottom: 8px;
  color: #e2e8f0;
}
.tb-coach-list {
  margin: 0;
  padding-left: 22px;
  font-size: 13px;
  line-height: 1.6;
  color: #e2e8f0;
}
.tb-coach-list li { margin-bottom: 5px; }
.tb-coach-empty { font-size: 12px; color: #64748b; font-style: italic; }

.tb-coach-tip {
  margin-top: 16px;
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(124,111,247,.1);
  border: 1px dashed rgba(124,111,247,.45);
  font-size: 13px;
  line-height: 1.55;
  color: #e2e8f0;
}

/* ══════════════════════════════════════════
   TOPOLOGY BUILDER — Network Simulator UI
   ══════════════════════════════════════════ */

/* Config panel — slide-out right inside .tb-workspace */
.tb-config-panel {
  width: 360px;
  min-width: 320px;
  background: var(--surface);
  border-left: 2px solid rgba(124,111,247,.3);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  max-height: 720px;
  transition: width .2s;
}
.tb-config-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: rgba(124,111,247,.12);
  border-bottom: 1px solid rgba(124,111,247,.2);
  font-weight: 700;
  font-size: 14px;
  color: #e2e8f0;
}
.tb-config-close {
  background: none;
  border: none;
  color: #e2e8f0;
  font-size: 22px;
  cursor: pointer;
  line-height: 1;
}
.tb-config-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid rgba(124,111,247,.2);
  overflow-x: auto;
}
.tb-config-tab {
  flex: 0 0 auto;
  padding: 7px 6px;
  font-size: 11px;
  font-weight: 600;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: #94a3b8;
  cursor: pointer;
  white-space: nowrap;
  transition: color .15s, border-color .15s;
}
.tb-config-tab:hover { color: #e2e8f0; }
/* Thin vertical divider between tab groups (Core | Protocols | Security) */
.tb-tab-divider {
  width: 1px; height: 16px; margin: auto 2px;
  background: rgba(124, 111, 247, .25);
  flex-shrink: 0;
}
.tb-config-tab-active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.tb-config-body {
  padding: 10px 12px;
  overflow-y: auto;
  flex: 1;
  font-size: 12px;
}
.tb-config-body label {
  display: block;
  font-weight: 600;
  margin-bottom: 3px;
  color: #cbd5e1;
  font-size: 11px;
}
.tb-config-body input[type="text"],
.tb-config-body select {
  width: 100%;
  padding: 5px 7px;
  border-radius: 5px;
  border: 1px solid rgba(124,111,247,.25);
  background: rgba(0,0,0,.25);
  color: #e2e8f0;
  font-size: 12px;
  font-family: 'Fira Code', monospace;
  margin-bottom: 6px;
}

/* Interface table inside config panel */
.tb-iface-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
  margin-bottom: 10px;
}
.tb-iface-table th {
  text-align: left;
  padding: 4px 5px;
  border-bottom: 1px solid rgba(124,111,247,.2);
  color: #94a3b8;
  font-weight: 600;
  font-size: 10px;
  text-transform: uppercase;
}
.tb-iface-table td {
  padding: 3px 5px;
  border-bottom: 1px solid rgba(255,255,255,.05);
  vertical-align: middle;
}
.tb-iface-table input {
  width: 100%;
  padding: 3px 5px;
  border-radius: 4px;
  border: 1px solid rgba(124,111,247,.2);
  background: rgba(0,0,0,.2);
  color: #e2e8f0;
  font-size: 11px;
  font-family: 'Fira Code', monospace;
}
.tb-iface-table .tb-iface-name {
  color: var(--accent);
  font-weight: 600;
  font-family: 'Fira Code', monospace;
}
.tb-iface-table .tb-iface-cable {
  color: #94a3b8;
  font-size: 10px;
}
.tb-iface-status-up { color: #22c55e; }
.tb-iface-status-down { color: #ef4444; }

/* Routing table in config */
.tb-route-row {
  display: flex;
  gap: 4px;
  margin-bottom: 4px;
  align-items: center;
}
.tb-route-row input {
  flex: 1;
  min-width: 0;
}
.tb-route-type {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 3px;
  font-weight: 600;
}
.tb-route-type-connected { background: rgba(34,197,94,.2); color: #22c55e; }
.tb-route-type-static { background: rgba(59,130,246,.2); color: #3b82f6; }

/* VLAN database in config */
.tb-vlan-row {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-bottom: 4px;
  padding: 4px 6px;
  border-radius: 5px;
  background: rgba(0,0,0,.15);
}
.tb-vlan-id {
  font-weight: 700;
  color: var(--accent);
  font-family: 'Fira Code', monospace;
  min-width: 32px;
}

/* CLI tab in config */
.tb-cli-output {
  background: #0b1020;
  color: #7ee787;
  font-family: 'Fira Code', monospace;
  font-size: 11px;
  padding: 10px;
  border-radius: 6px;
  min-height: 140px;
  max-height: 300px;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-all;
  margin-bottom: 8px;
}
.tb-cli-input-row {
  display: flex;
  gap: 6px;
}
.tb-cli-input-row input {
  flex: 1;
  font-family: 'Fira Code', monospace;
}
.tb-cli-input-row button {
  padding: 5px 12px;
  font-size: 11px;
}

/* Simulation toolbar */
.tb-sim-toolbar {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 8px 12px;
  background: rgba(14, 165, 233, .08);
  border: 1px solid rgba(14, 165, 233, .2);
  border-radius: 8px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.tb-sim-status {
  font-size: 12px;
  color: #94a3b8;
  margin-left: auto;
}

/* Simulation log */
.tb-sim-log {
  margin-top: 10px;
  background: var(--surface);
  border: 1px solid rgba(124,111,247,.2);
  border-radius: 8px;
  max-height: 260px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.tb-sim-log-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  font-weight: 700;
  font-size: 13px;
  border-bottom: 1px solid rgba(124,111,247,.15);
}
.tb-sim-log-content {
  padding: 10px 12px;
  font-family: 'Fira Code', monospace;
  font-size: 11px;
  color: #e2e8f0;
  overflow-y: auto;
  flex: 1;
  margin: 0;
  line-height: 1.6;
}
.tb-sim-log-arp { color: #f59e0b; }
.tb-sim-log-icmp { color: #22c55e; }
.tb-sim-log-dhcp { color: #3b82f6; }
.tb-sim-log-err { color: #ef4444; }

/* Packet animation dot */
@keyframes tb-packet-move {
  0% { offset-distance: 0%; }
  100% { offset-distance: 100%; }
}
.tb-packet-dot {
  r: 6;
  filter: drop-shadow(0 0 6px currentColor);
}

/* ── Device Overview tab ── */
.tb-ov-hero {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 0 10px;
  border-bottom: 1px solid rgba(124,111,247,.15);
  margin-bottom: 10px;
}
.tb-ov-icon {
  width: 56px;
  height: 40px;
  flex-shrink: 0;
}
.tb-ov-icon svg { width: 56px; height: 40px; }
.tb-ov-hero-info { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.tb-ov-hostname {
  font-size: 15px !important;
  font-weight: 700 !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  padding: 2px 6px !important;
  color: #e2e8f0 !important;
  border-radius: 5px;
  margin-bottom: 0 !important;
}
.tb-ov-hostname:focus {
  border-color: var(--accent) !important;
  background: rgba(0,0,0,.2) !important;
}
.tb-ov-type-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 8px;
  border: 1px solid;
  border-radius: 99px;
  width: fit-content;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.tb-ov-leds-row {
  display: flex;
  align-items: center;
  gap: 3px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.tb-ov-led {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  box-shadow: 0 0 4px currentColor;
}
.tb-ov-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 6px;
  margin-bottom: 10px;
}
.tb-ov-stat {
  background: rgba(0,0,0,.18);
  border-radius: 6px;
  padding: 6px 8px;
  text-align: center;
}
.tb-ov-stat span { display: block; font-size: 10px; color: #94a3b8; text-transform: uppercase; }
.tb-ov-stat strong { font-size: 16px; color: #e2e8f0; }
.tb-ov-stat code { font-size: 10px; color: var(--accent); font-family: 'Fira Code', monospace; }
.tb-ov-section-label {
  font-size: 11px;
  font-weight: 700;
  color: #94a3b8;
  text-transform: uppercase;
  margin: 8px 0 4px;
  letter-spacing: .03em;
}
.tb-ov-iface-card {
  background: rgba(0,0,0,.15);
  border-radius: 6px;
  padding: 7px 9px;
  margin-bottom: 5px;
  border-left: 3px solid var(--accent);
}
.tb-ov-iface-head {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  margin-bottom: 3px;
}
.tb-ov-iface-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}
.tb-ov-iface-mode {
  font-size: 10px;
  color: #94a3b8;
  margin-left: auto;
  font-family: 'Fira Code', monospace;
}
.tb-ov-iface-detail {
  display: flex;
  flex-direction: column;
  gap: 1px;
  font-size: 10px;
  color: #cbd5e1;
}
.tb-ov-iface-detail code {
  color: var(--accent);
  font-family: 'Fira Code', monospace;
}
.tb-ov-action {
  font-size: 11px !important;
  padding: 4px 10px !important;
  border: 1px solid rgba(124,111,247,.3) !important;
  border-radius: 5px !important;
}
.tb-ov-action:hover {
  background: rgba(124,111,247,.12) !important;
}

/* ── Trunk detail row ── */
.tb-iface-trunk-detail {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
  padding: 2px 0 4px 20px;
  background: rgba(59,130,246,.06);
  border-radius: 4px;
}
.tb-iface-trunk-detail label { margin: 0 !important; white-space: nowrap; }
.tb-iface-trunk-detail input { width: auto !important; margin-bottom: 0 !important; }

/* ── Guided Labs ── */
.tb-lab-card {
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(124,111,247,.2);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.tb-lab-card:hover {
  border-color: var(--accent);
  background: rgba(124,111,247,.08);
}
.tb-lab-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
  font-size: 14px;
}
.tb-lab-diff {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 99px;
  text-transform: uppercase;
}
.tb-lab-diff-beginner { background: rgba(34,197,94,.15); color: #22c55e; }
.tb-lab-diff-intermediate { background: rgba(245,158,11,.15); color: #f59e0b; }
.tb-lab-diff-advanced { background: rgba(239,68,68,.15); color: #ef4444; }
.tb-lab-card-meta {
  font-size: 11px;
  color: #94a3b8;
  margin-bottom: 6px;
}
.tb-lab-card-desc {
  font-size: 12px;
  color: #cbd5e1;
  line-height: 1.4;
}

/* Lab step panel (floats below sim toolbar) */
.tb-lab-panel {
  margin-top: 10px;
  background: var(--surface);
  border: 2px solid rgba(34,197,94,.35);
  border-radius: 10px;
  overflow: hidden;
}
.tb-lab-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
  background: rgba(34,197,94,.1);
  border-bottom: 1px solid rgba(34,197,94,.2);
  font-weight: 700;
  font-size: 13px;
  color: #a7f3d0;
}
.tb-lab-step {
  padding: 12px 14px;
}
.tb-lab-step-title {
  font-size: 14px;
  font-weight: 700;
  color: #e2e8f0;
  margin-bottom: 6px;
}
.tb-lab-step-instr {
  font-size: 12px;
  color: #cbd5e1;
  line-height: 1.55;
  margin-bottom: 8px;
}
.tb-lab-step-instr code {
  background: rgba(0,0,0,.3);
  padding: 1px 5px;
  border-radius: 3px;
  font-family: 'Fira Code', monospace;
  color: var(--accent);
  font-size: 11px;
}
.tb-lab-step-check {
  font-size: 12px;
  font-weight: 700;
  color: #22c55e;
  padding: 4px 10px;
  background: rgba(34,197,94,.1);
  border-radius: 5px;
  display: inline-block;
}
.tb-lab-step-pending {
  font-size: 11px;
  color: #94a3b8;
  font-style: italic;
}
.tb-lab-step-feedback {
  font-size: 11px;
  color: #f59e0b;
  background: rgba(245,158,11,.1);
  border: 1px solid rgba(245,158,11,.25);
  border-radius: 5px;
  padding: 6px 10px;
  margin: 6px 0;
}
.tb-lab-hint { margin: 8px 0 4px; }
.tb-lab-hint-toggle {
  font-size: 11px;
  color: #60a5fa;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(96,165,250,.1);
  border: 1px solid rgba(96,165,250,.25);
}
.tb-lab-hint-toggle:hover { background: rgba(96,165,250,.2); }
.tb-lab-hint-body {
  font-size: 11px;
  color: #93c5fd;
  background: rgba(96,165,250,.08);
  border-radius: 4px;
  padding: 6px 10px;
  margin-top: 4px;
  line-height: 1.5;
}
.tb-lab-progress-bar {
  height: 4px;
  background: rgba(255,255,255,.1);
  border-radius: 2px;
  margin: 6px 0 10px;
  overflow: hidden;
}
.tb-lab-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #7c6ff7, #22c55e);
  border-radius: 2px;
  transition: width 0.4s ease;
}
/* Step just-completed celebration */
.tb-lab-step-just-completed {
  animation: tbLabCelebrate 0.6s ease;
}
@keyframes tbLabCelebrate {
  0% { transform: scale(1); }
  30% { transform: scale(1.08); background: rgba(34,197,94,.25); }
  100% { transform: scale(1); }
}
/* Next button pulse when step is ready */
.tb-lab-next-ready {
  animation: tbNextPulse 1.5s ease infinite;
  background: rgba(34,197,94,.2) !important;
  border-color: #22c55e !important;
  color: #22c55e !important;
}
@keyframes tbNextPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34,197,94,.4); }
  50% { box-shadow: 0 0 0 6px rgba(34,197,94,0); }
}
/* Cable status colors */
.tb-cable-healthy { stroke: #22c55e !important; opacity: 0.9; }
.tb-cable-partial { stroke: #f59e0b !important; opacity: 0.85; }
/* Device health badge pulse */
.tb-health-badge { transition: fill 0.3s ease; }
.tb-vxlan-row {
  background: rgba(139,92,246,.08);
  border: 1px solid rgba(139,92,246,.2);
  border-radius: 6px;
  padding: 8px;
  margin-bottom: 6px;
}
.tb-vxlan-row-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}
.tb-lab-badge-auto {
  font-size: 9px;
  font-weight: 700;
  color: #f59e0b;
  background: rgba(245,158,11,.15);
  border: 1px solid rgba(245,158,11,.3);
  padding: 1px 5px;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.tb-lab-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
  border-top: 1px solid rgba(124,111,247,.15);
  background: rgba(0,0,0,.08);
}
.tb-lab-progress {
  font-size: 12px;
  color: #94a3b8;
  font-weight: 600;
}

/* ── Cloud Networking ── */
.tb-config-tabs {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.tb-sg-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 10px;
  margin-top: 4px;
}
.tb-sg-table th {
  text-align: left;
  padding: 3px 4px;
  font-weight: 600;
  color: #94a3b8;
  border-bottom: 1px solid rgba(124,111,247,.15);
  font-size: 9px;
}
.tb-sg-table td {
  padding: 3px 4px;
  border-bottom: 1px solid rgba(124,111,247,.08);
}
.tb-sg-table select,
.tb-sg-table input {
  background: rgba(124,111,247,.06);
  border: 1px solid rgba(124,111,247,.15);
  border-radius: 3px;
  color: var(--text);
  padding: 2px 4px;
}
.tb-sg-row-allow {
  background: rgba(34,197,94,.06);
}
.tb-nacl-row-deny {
  background: rgba(239,68,68,.08);
}
.tb-cloud-card {
  border: 1px solid rgba(124,111,247,.2);
  border-radius: 8px;
  padding: 8px;
  margin-bottom: 8px;
  background: rgba(124,111,247,.03);
}
.tb-cloud-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.tb-cloud-badge {
  display: inline-block;
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 4px;
  background: rgba(124,111,247,.1);
  color: var(--accent-light);
  margin: 2px 4px 2px 0;
  font-weight: 600;
}

/* ── Packet Inspection Panel ── */
.tb-packet-inspect {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 300px;
  background: #0f172a;
  border: 1px solid rgba(56,189,248,.4);
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0,0,0,.6), 0 0 20px rgba(56,189,248,.15);
  z-index: 1000;
  overflow: hidden;
  animation: tbPacketSlideIn .3s ease-out;
}
@keyframes tbPacketSlideIn {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* ── STP Convergence Styles ── */
.tb-stp-root {
  filter: drop-shadow(0 0 12px rgba(56,189,248,.6));
}
.tb-stp-blocking {
  opacity: 0.5;
  stroke-dasharray: 8 4;
}

/* ── Attack Defense Styles ── */
.tb-attack-blocked {
  animation: tbAttackBlocked .6s ease;
}
@keyframes tbAttackBlocked {
  0%, 100% { filter: none; }
  50% { filter: drop-shadow(0 0 12px rgba(34,197,94,.8)); }
}

/* ══════════════════════════════════════════
   SUBNET MASTERY — .st-* classes
   ══════════════════════════════════════════ */

/* ── Level badge ── */
.st-level-badge { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 3px 10px; border-radius: 20px; background: var(--accent); color: #fff; vertical-align: middle; }

/* ── Tab bar ── */
.st-tab-bar { display: flex; gap: 0; border-bottom: 2px solid var(--border); margin-bottom: 20px; }
.st-tab-btn { flex: 1; background: none; border: none; padding: 12px 16px; font-size: 14px; font-weight: 700; color: var(--text-dim); cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -2px; transition: color .15s, border-color .15s; }
.st-tab-btn:hover { color: var(--text); }
.st-tab-active { color: var(--accent); border-bottom-color: var(--accent); }
.st-tab-panel { min-height: 200px; }

/* ── Learn tab layout ── */
.st-learn-layout { display: grid; grid-template-columns: 220px 1fr; gap: 20px; }
@media (max-width: 700px) { .st-learn-layout { grid-template-columns: 1fr; } }

/* ── Lesson sidebar ── */
.st-lesson-sidebar { display: flex; flex-direction: column; gap: 4px; }
.st-lesson-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--radius-sm); cursor: pointer; border: 1px solid transparent; font-size: 13px; color: var(--text-mid); transition: background .15s, border-color .15s; }
.st-lesson-item:hover { background: var(--surface); border-color: var(--border); }
.st-lesson-active { background: var(--surface); border-color: var(--accent-dim); color: var(--text); }
.st-lesson-locked { opacity: .45; cursor: not-allowed; }
.st-lesson-icon { font-size: 18px; flex-shrink: 0; }
.st-lesson-info { display: flex; flex-direction: column; gap: 2px; }
.st-lesson-num { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-dim); }
.st-lesson-title { font-size: 13px; font-weight: 600; }

/* ── Lesson main area ── */
.st-lesson-main { min-height: 300px; }
.st-lesson-placeholder { text-align: center; padding: 60px 20px; color: var(--text-dim); font-size: 15px; }
.st-lesson-header { margin-bottom: 20px; }
.st-lesson-header h3 { font-size: 20px; color: var(--text); margin-bottom: 6px; }
.st-lesson-header-icon { font-size: 28px; margin-right: 8px; }
.st-lesson-desc { font-size: 13px; color: var(--text-mid); margin-top: 6px; }

/* ── Theory blocks ── */
.st-lesson-theory { margin-bottom: 24px; }
.st-theory-block { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 16px 18px; margin-bottom: 10px; font-size: 14px; line-height: 1.7; color: var(--text-mid); }
.st-theory-block code { background: var(--surface2); padding: 2px 6px; border-radius: 3px; font-family: monospace; font-size: 13px; }

/* ── Practice gate ── */
.st-lesson-gate { background: var(--surface); border: 1px solid var(--accent-dim); border-radius: var(--radius); padding: 20px; margin-top: 24px; }
.st-lesson-gate h4 { font-size: 15px; color: var(--text); margin-bottom: 14px; }
.st-gate-q { margin-top: 12px; }
.st-gate-progress { font-size: 12px; font-weight: 700; color: var(--accent); margin-bottom: 10px; }
.st-gate-result { text-align: center; padding: 20px; font-size: 16px; font-weight: 700; }
.st-gate-pass { color: var(--green); }
.st-gate-fail { color: var(--red); }

/* ── Mode bar ── */
.st-mode-bar { display: flex; gap: 6px; margin-bottom: 16px; flex-wrap: wrap; }
.st-mode-btn { background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--radius-sm); padding: 8px 14px; font-size: 13px; font-weight: 600; color: var(--text-mid); cursor: pointer; transition: all .15s; }
.st-mode-btn:hover { border-color: var(--accent-dim); color: var(--text); }
.st-mode-active { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ── Stats strip ── */
.st-stats-strip { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; font-size: 13px; }
.st-stat { display: flex; align-items: center; gap: 6px; color: var(--text-mid); font-weight: 600; }
.st-stat-label { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-dim); font-weight: 700; }
.st-cat-badge { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 4px; background: rgba(124,111,247,.12); color: var(--accent-light); }
.st-diff-badge { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 4px; background: rgba(var(--yellow-rgb),.12); color: var(--yellow); }
.st-timer { font-family: monospace; font-size: 16px; font-weight: 800; color: var(--accent); }

/* ── Answer area ── */
.st-answer-area { margin-top: 12px; }

/* ── MCQ grid ── */
.st-mcq-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
.st-mcq-btn { background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--radius-sm); padding: 12px 16px; font-size: 14px; font-weight: 600; color: var(--text); cursor: pointer; transition: all .15s; }
.st-mcq-btn:hover:not(:disabled) { border-color: var(--accent); background: rgba(124,111,247,.08); }
.st-mcq-btn:disabled { opacity: .6; cursor: default; }

/* ── Feedback ── */
.st-feedback { margin-top: 16px; border-radius: var(--radius-sm); font-size: 14px; line-height: 1.6; overflow: hidden; transition: max-height .3s ease; }
.st-feedback:empty { margin-top: 0; }
.st-fb-correct { background: var(--green-bg); border: 1px solid var(--green-border); border-radius: var(--radius-sm); padding: 12px 16px; color: var(--correct-text2); }
.st-fb-wrong { background: var(--red-bg); border: 1px solid var(--red-border); border-radius: var(--radius-sm); padding: 12px 16px; color: var(--wrong-text2); }
.st-fb-correct-answer { margin-top: 8px; padding: 10px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 14px; color: var(--text-mid); }
.st-fb-answer { font-family: monospace; margin-left: 6px; }
.st-fb-streak { margin-top: 8px; font-size: 14px; font-weight: 700; color: var(--accent); }
.st-fb-time { float: right; font-size: 12px; color: var(--text-dim); font-weight: 400; }

/* ── Step-by-step solution ── */
.st-steps { margin-top: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 16px; }
.st-steps-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-dim); margin-bottom: 10px; }
.st-step { display: flex; align-items: flex-start; gap: 10px; padding: 6px 0; font-size: 13px; color: var(--text-mid); line-height: 1.5; animation: stStepFadeIn .3s ease both; }
@keyframes stStepFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.st-step-num { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 11px; font-weight: 800; flex-shrink: 0; }
.st-step-text { flex: 1; }

/* ── Binary breakdown ── */
.st-binary-details { margin-top: 12px; }
.st-binary-details summary { font-size: 13px; font-weight: 600; color: var(--accent-light); cursor: pointer; }
.st-binary-grid { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; padding: 14px; background: #0b1020; border-radius: var(--radius-sm); font-family: monospace; font-size: 13px; position: relative; overflow-x: auto; }
.st-bin-row { display: flex; align-items: center; gap: 12px; padding: 4px 0; }
.st-bin-label { width: 40px; font-size: 10px; font-weight: 800; text-transform: uppercase; color: #888; }
.st-bin-val { color: #7ee787; letter-spacing: .5px; }
.st-bin-dec { color: #8b949e; font-size: 12px; }
.st-bin-result { border-top: 1px dashed #333; padding-top: 8px; margin-top: 4px; }
.st-bin-result .st-bin-val { color: #58a6ff; }
.st-bin-boundary { position: absolute; top: 0; bottom: 0; width: 2px; background: rgba(251,191,36,.4); pointer-events: none; }
.st-bin-boundary-label { position: absolute; bottom: 2px; left: 4px; font-size: 9px; color: #fbbf24; white-space: nowrap; }

/* ── AI Coach panel ── */
.st-coach-panel { margin-top: 14px; }
.st-coach-btn { font-size: 12px; margin-top: 10px; }
.st-coach-msg { background: var(--surface); border: 1px solid var(--accent-dim); border-left: 3px solid var(--accent); border-radius: var(--radius-sm); padding: 14px 16px; font-size: 13px; line-height: 1.7; color: var(--text-mid); }
.st-coach-msg p { margin-bottom: 8px; }
.st-coach-msg p:last-child { margin-bottom: 0; }
.st-coach-loading { text-align: center; padding: 16px; color: var(--text-dim); font-size: 13px; }
.st-coach-error { border-left-color: var(--red); color: var(--red); }

/* ── Category heatmap ── */
.st-heatmap { margin-top: 20px; }
.st-heatmap-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-dim); margin-bottom: 10px; }
.st-heatmap-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 8px; }
.st-heat-cell { background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--radius-sm); padding: 12px 10px; text-align: center; transition: border-color .15s; }
.st-heat-icon { font-size: 20px; margin-bottom: 4px; }
.st-heat-pct { font-size: 18px; font-weight: 800; }
.st-heat-label { font-size: 10px; color: var(--text-dim); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; margin-top: 2px; }
.st-heat-box { font-size: 10px; color: var(--text-dim); margin-top: 4px; }

/* ── Focus picker ── */
.st-focus-picker { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.st-focus-chip { background: var(--surface); border: 1.5px solid var(--border); border-radius: 20px; padding: 6px 14px; font-size: 12px; font-weight: 600; color: var(--text-mid); cursor: pointer; transition: all .15s; }
.st-focus-chip:hover { border-color: var(--st-cat-color, var(--accent)); color: var(--text); }
.st-focus-chip-active { background: var(--st-cat-color, var(--accent)); border-color: var(--st-cat-color, var(--accent)); color: #fff; }

/* ── Dashboard ── */
.st-dash-hero { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; margin-bottom: 20px; }
.st-dash-level { margin-bottom: 16px; }
.st-dash-level-title { font-size: 22px; font-weight: 800; color: var(--text); margin-bottom: 8px; }
.st-dash-level-bar { height: 8px; background: var(--surface2); border-radius: 4px; overflow: hidden; margin-bottom: 6px; }
.st-dash-level-fill { height: 100%; background: var(--accent); border-radius: 4px; transition: width .4s ease; }
.st-dash-level-next { font-size: 11px; color: var(--text-dim); }
.st-dash-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.st-dash-stat { text-align: center; }
.st-dash-stat-val { font-size: 24px; font-weight: 800; color: var(--text); }
.st-dash-stat-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-dim); margin-top: 2px; }
.st-dash-heading { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 12px; margin-top: 4px; }
.st-dash-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; margin-bottom: 24px; }
.st-dash-cat-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px; }
.st-dash-cat-head { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 8px; }
.st-dash-cat-bar { height: 6px; background: var(--surface2); border-radius: 3px; overflow: hidden; margin-bottom: 8px; }
.st-dash-cat-stats { display: flex; gap: 12px; font-size: 11px; color: var(--text-dim); flex-wrap: wrap; }
.st-dash-lessons { margin-bottom: 16px; }
.st-dash-lesson-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: 13px; color: var(--text-mid); border-bottom: 1px solid var(--border); }
.st-dash-lesson-row:last-child { border-bottom: none; }

/* ══════════════════════════════════════════
   PORT MASTERY — .pt-* classes
   ══════════════════════════════════════════ */

/* ── Level badge ── */
.pt-level-badge { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 3px 10px; border-radius: 20px; background: #f59e0b; color: #fff; vertical-align: middle; }

/* ── Tab bar ── */
.pt-tab-bar { display: flex; gap: 0; border-bottom: 2px solid var(--border); margin-bottom: 20px; }
.pt-tab-btn { flex: 1; background: none; border: none; padding: 12px 16px; font-size: 14px; font-weight: 700; color: var(--text-dim); cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -2px; transition: color .15s, border-color .15s; }
.pt-tab-btn:hover { color: var(--text); }
.pt-tab-active { color: #f59e0b; border-bottom-color: #f59e0b; }
.pt-tab-panel { min-height: 200px; }

/* ── Learn tab layout ── */
.pt-learn-layout { display: grid; grid-template-columns: 220px 1fr; gap: 20px; }
@media (max-width: 700px) { .pt-learn-layout { grid-template-columns: 1fr; } }

/* ── Lesson sidebar ── */
.pt-lesson-sidebar { display: flex; flex-direction: column; gap: 4px; }
.pt-lesson-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--radius-sm); cursor: pointer; border: 1px solid transparent; font-size: 13px; color: var(--text-mid); transition: background .15s, border-color .15s; }
.pt-lesson-item:hover { background: var(--surface); border-color: var(--border); }
.pt-lesson-active { background: var(--surface); border-color: rgba(245,158,11,.4); color: var(--text); }
.pt-lesson-locked { opacity: .45; cursor: not-allowed; }
.pt-lesson-icon { font-size: 18px; flex-shrink: 0; }
.pt-lesson-info { display: flex; flex-direction: column; gap: 2px; }
.pt-lesson-num { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-dim); }
.pt-lesson-title { font-size: 13px; font-weight: 600; }

/* ── Lesson main area ── */
.pt-lesson-main { min-height: 300px; }
.pt-lesson-placeholder { text-align: center; padding: 60px 20px; color: var(--text-dim); font-size: 15px; }
.pt-lesson-header { margin-bottom: 20px; }
.pt-lesson-header h3 { font-size: 20px; color: var(--text); margin-bottom: 6px; }
.pt-lesson-header-icon { font-size: 28px; margin-right: 8px; }
.pt-lesson-desc { font-size: 13px; color: var(--text-mid); margin-top: 6px; }

/* ── Theory blocks ── */
.pt-lesson-theory { margin-bottom: 24px; }
.pt-theory-block { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 16px 18px; margin-bottom: 10px; font-size: 14px; line-height: 1.7; color: var(--text-mid); }
.pt-theory-block code { background: var(--surface2); padding: 2px 6px; border-radius: 3px; font-family: monospace; font-size: 13px; }

/* ── Practice gate ── */
.pt-lesson-gate { background: var(--surface); border: 1px solid rgba(245,158,11,.3); border-radius: var(--radius); padding: 20px; margin-top: 24px; }
.pt-lesson-gate h4 { font-size: 15px; color: var(--text); margin-bottom: 14px; }
.pt-gate-q { margin-top: 12px; }
.pt-gate-progress { font-size: 12px; font-weight: 700; color: #f59e0b; margin-bottom: 10px; }
.pt-gate-result { text-align: center; padding: 20px; font-size: 16px; font-weight: 700; }
.pt-gate-pass { color: var(--green); }
.pt-gate-fail { color: var(--red); }

/* ── Mode bar ── */
.pt-mode-bar { display: flex; gap: 6px; margin-bottom: 16px; flex-wrap: wrap; }
.pt-mode-btn { background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--radius-sm); padding: 8px 14px; font-size: 13px; font-weight: 600; color: var(--text-mid); cursor: pointer; transition: all .15s; }
.pt-mode-btn:hover { border-color: rgba(245,158,11,.4); color: var(--text); }
.pt-mode-active { background: #f59e0b; border-color: #f59e0b; color: #fff; }

/* ── Stats strip ── */
.pt-stats-strip { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; font-size: 13px; }
.pt-stat { display: flex; align-items: center; gap: 6px; color: var(--text-mid); font-weight: 600; }
.pt-stat-label { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-dim); font-weight: 700; }
.pt-cat-badge { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 4px; background: rgba(245,158,11,.12); color: #f59e0b; }
.pt-timer { font-family: monospace; font-size: 16px; font-weight: 800; color: #f59e0b; }
.pt-timer-warn { color: var(--yellow); }
.pt-timer-danger { color: var(--red); animation: ptTimerPulse .5s infinite; }
@keyframes ptTimerPulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }

/* ── Answer area ── */
.pt-answer-area { margin-top: 12px; }

/* ── MCQ grid ── */
.pt-mcq-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
.pt-mcq-btn { background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--radius-sm); padding: 12px 16px; font-size: 14px; font-weight: 600; color: var(--text); cursor: pointer; transition: all .15s; font-family: monospace; }
.pt-mcq-btn:hover:not(:disabled) { border-color: #f59e0b; background: rgba(245,158,11,.08); }
.pt-mcq-btn:disabled { opacity: .6; cursor: default; }
.pt-mcq-selected { border-color: #f59e0b; background: rgba(245,158,11,.18); box-shadow: inset 0 0 0 1px rgba(245,158,11,.3); }

/* ── Feedback ── */
.pt-feedback { margin-top: 16px; border-radius: var(--radius-sm); font-size: 14px; line-height: 1.6; overflow: hidden; }
.pt-feedback:empty { margin-top: 0; }
.pt-fb-correct { background: var(--green-bg); border: 1px solid var(--green-border); border-radius: var(--radius-sm); padding: 12px 16px; color: var(--correct-text2); }
.pt-fb-wrong { background: var(--red-bg); border: 1px solid var(--red-border); border-radius: var(--radius-sm); padding: 12px 16px; color: var(--wrong-text2); }
.pt-fb-correct-answer { margin-top: 8px; padding: 10px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 14px; color: var(--text-mid); }
.pt-fb-answer { font-family: monospace; margin-left: 6px; }
.pt-fb-streak { margin-top: 8px; font-size: 14px; font-weight: 700; color: #f59e0b; }
.pt-fb-time { float: right; font-size: 12px; color: var(--text-dim); font-weight: 400; }

/* ── Step-by-step solution ── */
.pt-steps { margin-top: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 16px; }
.pt-steps-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-dim); margin-bottom: 10px; }
.pt-step { display: flex; align-items: flex-start; gap: 10px; padding: 6px 0; font-size: 13px; color: var(--text-mid); line-height: 1.5; animation: ptStepFadeIn .3s ease both; }
@keyframes ptStepFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.pt-step-num { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: #f59e0b; color: #fff; font-size: 11px; font-weight: 800; flex-shrink: 0; }
.pt-step-text { flex: 1; }

/* ── AI Coach panel ── */
.pt-coach-panel { margin-top: 14px; }
.pt-coach-msg { background: var(--surface); border: 1px solid rgba(245,158,11,.3); border-left: 3px solid #f59e0b; border-radius: var(--radius-sm); padding: 14px 16px; font-size: 13px; line-height: 1.7; color: var(--text-mid); }
.pt-coach-msg p { margin-bottom: 8px; }
.pt-coach-msg p:last-child { margin-bottom: 0; }
.pt-coach-loading { text-align: center; padding: 16px; color: var(--text-dim); font-size: 13px; }
.pt-coach-error { border-left-color: var(--red); color: var(--red); }

/* ── Category heatmap ── */
.pt-heatmap { margin-top: 20px; }
.pt-heatmap-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-dim); margin-bottom: 10px; }
.pt-heatmap-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 8px; }
.pt-heat-cell { background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--radius-sm); padding: 12px 8px; text-align: center; transition: border-color .15s; }
.pt-heat-icon { font-size: 20px; margin-bottom: 4px; }
.pt-heat-pct { font-size: 18px; font-weight: 800; }
.pt-heat-label { font-size: 9px; color: var(--text-dim); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; margin-top: 2px; }
.pt-heat-box { font-size: 10px; color: var(--text-dim); margin-top: 4px; }

/* ── Focus picker ── */
.pt-focus-picker { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.pt-focus-chip { background: var(--surface); border: 1.5px solid var(--border); border-radius: 20px; padding: 6px 14px; font-size: 12px; font-weight: 600; color: var(--text-mid); cursor: pointer; transition: all .15s; }
.pt-focus-chip:hover { border-color: var(--pt-cat-color, #f59e0b); color: var(--text); }
.pt-focus-chip-active { background: var(--pt-cat-color, #f59e0b); border-color: var(--pt-cat-color, #f59e0b); color: #fff; }

/* ── Dashboard ── */
.pt-dash-hero { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; margin-bottom: 20px; }
.pt-dash-level { margin-bottom: 16px; }
.pt-dash-level-title { font-size: 22px; font-weight: 800; color: var(--text); margin-bottom: 8px; }
.pt-dash-level-bar { height: 8px; background: var(--surface2); border-radius: 4px; overflow: hidden; margin-bottom: 6px; }
.pt-dash-level-fill { height: 100%; background: #f59e0b; border-radius: 4px; transition: width .4s ease; }
.pt-dash-level-next { font-size: 11px; color: var(--text-dim); }
.pt-dash-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.pt-dash-stat { text-align: center; }
.pt-dash-stat-val { font-size: 24px; font-weight: 800; color: var(--text); }
.pt-dash-stat-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-dim); margin-top: 2px; }
.pt-dash-heading { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 12px; margin-top: 4px; }
.pt-dash-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin-bottom: 24px; }
.pt-dash-cat-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px; }
.pt-dash-cat-head { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 8px; }
.pt-dash-cat-bar { height: 6px; background: var(--surface2); border-radius: 3px; overflow: hidden; margin-bottom: 8px; }
.pt-dash-cat-stats { display: flex; gap: 12px; font-size: 11px; color: var(--text-dim); flex-wrap: wrap; }
.pt-dash-lessons { margin-bottom: 16px; }
.pt-dash-lesson-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: 13px; color: var(--text-mid); border-bottom: 1px solid var(--border); }
.pt-dash-lesson-row:last-child { border-bottom: none; }
.pt-dash-weak { margin-bottom: 24px; }
.pt-dash-weak-row { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-bottom: 1px solid var(--border); font-size: 13px; }
.pt-dash-weak-row:last-child { border-bottom: none; }
.pt-dash-weak-proto { flex: 1; font-weight: 600; color: var(--text); }
.pt-dash-weak-port { font-family: monospace; font-weight: 800; color: #f59e0b; min-width: 50px; }
.pt-dash-weak-acc { font-weight: 700; min-width: 40px; text-align: right; }
.pt-dash-weak-seen { color: var(--text-dim); font-size: 11px; }
.pt-dash-pairs { margin-bottom: 16px; }
.pt-dash-pair-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-size: 13px; color: var(--text-mid); border-bottom: 1px solid var(--border); }
.pt-dash-pair-row:last-child { border-bottom: none; }

/* ══════════════════════════════════════════
   ACRONYM BLITZ — .ab-* classes
   ══════════════════════════════════════════ */
.ab-level-badge { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 3px 10px; border-radius: 20px; background: #8b5cf6; color: #fff; vertical-align: middle; }
.ab-tab-bar { display: flex; gap: 0; border-bottom: 2px solid var(--border); margin-bottom: 20px; }
.ab-tab-btn { flex: 1; background: none; border: none; padding: 12px 16px; font-size: 14px; font-weight: 700; color: var(--text-dim); cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -2px; transition: color .15s, border-color .15s; }
.ab-tab-btn:hover { color: var(--text); }
.ab-tab-active { color: #8b5cf6; border-bottom-color: #8b5cf6; }
.ab-tab-panel { min-height: 200px; }
.ab-learn-layout { display: grid; grid-template-columns: 220px 1fr; gap: 20px; }
@media (max-width: 700px) { .ab-learn-layout { grid-template-columns: 1fr; } }
.ab-lesson-sidebar { display: flex; flex-direction: column; gap: 4px; }
.ab-lesson-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--radius-sm); cursor: pointer; border: 1px solid transparent; font-size: 13px; color: var(--text-mid); transition: background .15s, border-color .15s; }
.ab-lesson-item:hover { background: var(--surface); border-color: var(--border); }
.ab-lesson-active { background: var(--surface); border-color: rgba(139,92,246,.4); color: var(--text); }
.ab-lesson-locked { opacity: .45; cursor: not-allowed; }
.ab-lesson-icon { font-size: 18px; flex-shrink: 0; }
.ab-lesson-info { display: flex; flex-direction: column; gap: 2px; }
.ab-lesson-num { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-dim); }
.ab-lesson-title { font-size: 13px; font-weight: 600; }
.ab-lesson-main { min-height: 300px; }
.ab-lesson-placeholder { text-align: center; padding: 60px 20px; color: var(--text-dim); font-size: 15px; }
.ab-lesson-header { margin-bottom: 20px; }
.ab-lesson-header h3 { font-size: 20px; color: var(--text); margin-bottom: 6px; }
.ab-lesson-header-icon { font-size: 28px; margin-right: 8px; }
.ab-lesson-desc { font-size: 13px; color: var(--text-mid); margin-top: 6px; }
.ab-lesson-theory { margin-bottom: 24px; }
.ab-theory-block { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 16px 18px; margin-bottom: 10px; font-size: 14px; line-height: 1.7; color: var(--text-mid); }
.ab-theory-block code { background: var(--surface2); padding: 2px 6px; border-radius: 3px; font-family: monospace; font-size: 13px; }
.ab-lesson-gate { background: var(--surface); border: 1px solid rgba(139,92,246,.3); border-radius: var(--radius); padding: 20px; margin-top: 24px; }
.ab-lesson-gate h4 { font-size: 15px; color: var(--text); margin-bottom: 14px; }
.ab-gate-q { margin-top: 12px; }
.ab-gate-progress { font-size: 12px; font-weight: 700; color: #8b5cf6; margin-bottom: 10px; }
.ab-gate-result { text-align: center; padding: 20px; font-size: 16px; font-weight: 700; }
.ab-gate-pass { color: var(--green); }
.ab-gate-fail { color: var(--red); }
.ab-mode-bar { display: flex; gap: 6px; margin-bottom: 16px; flex-wrap: wrap; }
.ab-mode-btn { background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--radius-sm); padding: 8px 14px; font-size: 13px; font-weight: 600; color: var(--text-mid); cursor: pointer; transition: all .15s; }
.ab-mode-btn:hover { border-color: rgba(139,92,246,.4); color: var(--text); }
.ab-mode-active { background: #8b5cf6; border-color: #8b5cf6; color: #fff; }
[data-theme="light"] .ab-mode-active { background: #8b5cf6; border-color: #8b5cf6; color: #fff; }
.ab-stats-strip { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; font-size: 13px; }
.ab-stat { display: flex; align-items: center; gap: 6px; color: var(--text-mid); font-weight: 600; }
.ab-stat-label { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-dim); font-weight: 700; }
.ab-cat-badge { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 4px; background: rgba(139,92,246,.12); color: #8b5cf6; }
.ab-answer-area { margin-top: 12px; }
.ab-mcq-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px; }
.ab-mcq-btn { background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--radius-sm); padding: 12px 16px; font-size: 14px; font-weight: 600; color: var(--text); cursor: pointer; transition: all .15s; text-align: left; }
.ab-mcq-btn:hover:not(:disabled) { border-color: #8b5cf6; background: rgba(139,92,246,.08); }
.ab-mcq-btn:disabled { opacity: .6; cursor: default; }
.ab-feedback { margin-top: 16px; border-radius: var(--radius-sm); font-size: 14px; line-height: 1.6; overflow: hidden; }
.ab-feedback:empty { margin-top: 0; }
.ab-fb-correct { background: var(--green-bg); border: 1px solid var(--green-border); border-radius: var(--radius-sm); padding: 12px 16px; color: var(--correct-text2); }
.ab-fb-wrong { background: var(--red-bg); border: 1px solid var(--red-border); border-radius: var(--radius-sm); padding: 12px 16px; color: var(--wrong-text2); }
.ab-fb-correct-answer { margin-top: 8px; padding: 10px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 14px; color: var(--text-mid); }
.ab-fb-mnemonic { margin-top: 8px; padding: 10px 16px; background: rgba(139,92,246,.08); border: 1px solid rgba(139,92,246,.2); border-radius: var(--radius-sm); font-size: 13px; color: var(--text-mid); font-style: italic; }
.ab-fb-streak { margin-top: 8px; font-size: 14px; font-weight: 700; color: #8b5cf6; }
.ab-heatmap { margin-top: 20px; }
.ab-heatmap-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-dim); margin-bottom: 10px; }
.ab-heatmap-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 8px; }
.ab-heat-cell { background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--radius-sm); padding: 12px 8px; text-align: center; transition: border-color .15s; }
.ab-heat-icon { font-size: 20px; margin-bottom: 4px; }
.ab-heat-pct { font-size: 18px; font-weight: 800; }
.ab-heat-label { font-size: 9px; color: var(--text-dim); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; margin-top: 2px; }
.ab-heat-box { font-size: 10px; color: var(--text-dim); margin-top: 4px; }
.ab-focus-picker { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.ab-focus-chip { background: var(--surface); border: 1.5px solid var(--border); border-radius: 20px; padding: 6px 14px; font-size: 12px; font-weight: 600; color: var(--text-mid); cursor: pointer; transition: all .15s; }
.ab-focus-chip:hover { border-color: var(--ab-cat-color, #8b5cf6); color: var(--text); }
.ab-focus-chip-active { background: var(--ab-cat-color, #8b5cf6); border-color: var(--ab-cat-color, #8b5cf6); color: #fff; }
.ab-dash-hero { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; margin-bottom: 20px; }
.ab-dash-level { margin-bottom: 16px; }
.ab-dash-level-title { font-size: 22px; font-weight: 800; color: var(--text); margin-bottom: 8px; }
.ab-dash-level-bar { height: 8px; background: var(--surface2); border-radius: 4px; overflow: hidden; margin-bottom: 6px; }
.ab-dash-level-fill { height: 100%; background: #8b5cf6; border-radius: 4px; transition: width .4s ease; }
.ab-dash-level-next { font-size: 11px; color: var(--text-dim); }
.ab-dash-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.ab-dash-stat { text-align: center; }
.ab-dash-stat-val { font-size: 24px; font-weight: 800; color: var(--text); }
.ab-dash-stat-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-dim); margin-top: 2px; }
.ab-dash-heading { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 12px; margin-top: 4px; }
.ab-dash-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin-bottom: 24px; }
.ab-dash-cat-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px; }
.ab-dash-cat-head { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 8px; }
.ab-dash-cat-bar { height: 6px; background: var(--surface2); border-radius: 3px; overflow: hidden; margin-bottom: 8px; }
.ab-dash-cat-stats { display: flex; gap: 12px; font-size: 11px; color: var(--text-dim); flex-wrap: wrap; }

/* ══════════════════════════════════════════
   OSI LAYER SORTER — .os-* classes
   ══════════════════════════════════════════ */
.os-level-badge { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 3px 10px; border-radius: 20px; background: #06b6d4; color: #fff; vertical-align: middle; }
.os-tab-bar { display: flex; gap: 0; border-bottom: 2px solid var(--border); margin-bottom: 20px; }
.os-tab-btn { flex: 1; background: none; border: none; padding: 12px 16px; font-size: 14px; font-weight: 700; color: var(--text-dim); cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -2px; transition: color .15s, border-color .15s; }
.os-tab-btn:hover { color: var(--text); }
.os-tab-active { color: #06b6d4; border-bottom-color: #06b6d4; }
.os-tab-panel { min-height: 200px; }
.os-learn-layout { display: grid; grid-template-columns: 220px 1fr; gap: 20px; }
@media (max-width: 700px) { .os-learn-layout { grid-template-columns: 1fr; } }
.os-lesson-sidebar { display: flex; flex-direction: column; gap: 4px; }
.os-lesson-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--radius-sm); cursor: pointer; border: 1px solid transparent; font-size: 13px; color: var(--text-mid); transition: background .15s, border-color .15s; }
.os-lesson-item:hover { background: var(--surface); border-color: var(--border); }
.os-lesson-active { background: var(--surface); border-color: rgba(6,182,212,.4); color: var(--text); }
.os-lesson-locked { opacity: .45; cursor: not-allowed; }
.os-lesson-icon { font-size: 18px; flex-shrink: 0; }
.os-lesson-info { display: flex; flex-direction: column; gap: 2px; }
.os-lesson-num { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-dim); }
.os-lesson-title { font-size: 13px; font-weight: 600; }
.os-lesson-main { min-height: 300px; }
.os-lesson-placeholder { text-align: center; padding: 60px 20px; color: var(--text-dim); font-size: 15px; }
.os-lesson-header { margin-bottom: 20px; }
.os-lesson-header h3 { font-size: 20px; color: var(--text); margin-bottom: 6px; }
.os-lesson-theory { margin-bottom: 24px; }
.os-theory-block { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 16px 18px; margin-bottom: 10px; font-size: 14px; line-height: 1.7; color: var(--text-mid); }
.os-theory-block code { background: var(--surface2); padding: 2px 6px; border-radius: 3px; font-family: monospace; font-size: 13px; }
.os-lesson-gate { background: var(--surface); border: 1px solid rgba(6,182,212,.3); border-radius: var(--radius); padding: 20px; margin-top: 24px; }
.os-lesson-gate h4 { font-size: 15px; color: var(--text); margin-bottom: 14px; }
.os-gate-progress { font-size: 12px; font-weight: 700; color: #06b6d4; margin-bottom: 10px; }
.os-gate-result { text-align: center; padding: 20px; font-size: 16px; font-weight: 700; }
.os-gate-pass { color: var(--green); }
.os-gate-fail { color: var(--red); }
.os-mode-bar { display: flex; gap: 6px; margin-bottom: 16px; flex-wrap: wrap; }
.os-mode-btn { background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--radius-sm); padding: 8px 14px; font-size: 13px; font-weight: 600; color: var(--text-mid); cursor: pointer; transition: all .15s; }
.os-mode-btn:hover { border-color: rgba(6,182,212,.4); color: var(--text); }
.os-mode-active { background: #06b6d4; border-color: #06b6d4; color: #fff; }
[data-theme="light"] .os-mode-active { background: #06b6d4; border-color: #06b6d4; color: #fff; }
.os-diff-bar { display: flex; gap: 6px; margin-bottom: 16px; flex-wrap: wrap; }
.os-diff-btn { background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--radius-sm); padding: 6px 12px; font-size: 12px; font-weight: 600; color: var(--text-mid); cursor: pointer; transition: all .15s; }
.os-diff-btn:hover { border-color: rgba(6,182,212,.4); color: var(--text); }
.os-diff-active { background: rgba(6,182,212,.15); border-color: #06b6d4; color: #06b6d4; }
.os-stats-strip { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; font-size: 13px; }
.os-stat { display: flex; align-items: center; gap: 6px; color: var(--text-mid); font-weight: 600; }
.os-stat-label { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-dim); font-weight: 700; }
.os-practice-area { margin-bottom: 16px; }
.os-mcq-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px; }
.os-mcq-btn { background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--radius-sm); padding: 12px 16px; font-size: 14px; font-weight: 600; color: var(--text); cursor: pointer; transition: all .15s; }
.os-mcq-btn:hover:not(:disabled) { border-color: #06b6d4; background: rgba(6,182,212,.08); }
.os-mcq-btn:disabled { opacity: .6; cursor: default; }
.os-fb-correct { background: var(--green-bg); border: 1px solid var(--green-border); border-radius: var(--radius-sm); padding: 12px 16px; color: var(--correct-text2); }
.os-fb-wrong { background: var(--red-bg); border: 1px solid var(--red-border); border-radius: var(--radius-sm); padding: 12px 16px; color: var(--wrong-text2); }
.os-fb-correct-answer { margin-top: 8px; padding: 10px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 14px; color: var(--text-mid); }
/* Sort mode */
.os-sort-bank { display: flex; flex-wrap: wrap; gap: 8px; padding: 16px; background: var(--surface); border: 1.5px dashed var(--border); border-radius: var(--radius); margin-bottom: 16px; min-height: 50px; }
.os-sort-item { display: inline-flex; align-items: center; padding: 8px 14px; background: var(--surface2); border: 1.5px solid var(--border); border-radius: 20px; font-size: 13px; font-weight: 600; color: var(--text); cursor: grab; transition: all .15s; user-select: none; }
.os-sort-item:hover { border-color: #06b6d4; }
.os-sort-item[draggable="true"] { cursor: grab; }
.os-sort-item.os-sort-selected { border-color: #06b6d4; background: rgba(6,182,212,.15); box-shadow: 0 0 0 2px rgba(6,182,212,.3); }
.os-sort-item.os-sort-placed { opacity: .5; cursor: default; }
.os-lanes { display: flex; flex-direction: column; gap: 4px; }
.os-lane { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: var(--radius-sm); border: 1.5px solid var(--border); background: var(--surface); min-height: 48px; transition: all .15s; }
.os-lane-hover { border-color: #06b6d4; background: rgba(6,182,212,.06); }
.os-lane-num { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; font-size: 14px; font-weight: 800; color: #fff; flex-shrink: 0; }
.os-lane-name { font-size: 13px; font-weight: 700; color: var(--text-mid); min-width: 90px; }
.os-lane-items { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; min-height: 32px; padding: 4px; border-radius: var(--radius-sm); }
.os-lane-correct { border-color: var(--green); background: var(--green-bg); }
.os-lane-wrong { border-color: var(--red); background: var(--red-bg); }
.os-sort-check-btn { margin-top: 16px; width: 100%; padding: 12px; font-size: 15px; font-weight: 700; background: #06b6d4; color: #fff; border: none; border-radius: var(--radius-sm); cursor: pointer; transition: background .15s; }
.os-sort-check-btn:hover { background: #0891b2; }
.os-heatmap { margin-top: 20px; }
.os-heatmap-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-dim); margin-bottom: 10px; }
.os-heatmap-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 8px; }
.os-heat-cell { background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--radius-sm); padding: 12px 8px; text-align: center; transition: border-color .15s; }
.os-heat-pct { font-size: 18px; font-weight: 800; }
.os-heat-label { font-size: 9px; color: var(--text-dim); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; margin-top: 2px; }
.os-heat-box { font-size: 10px; color: var(--text-dim); margin-top: 4px; }
.os-dash-hero { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; margin-bottom: 20px; }
.os-dash-level { margin-bottom: 16px; }
.os-dash-level-title { font-size: 22px; font-weight: 800; color: var(--text); margin-bottom: 8px; }
.os-dash-level-bar { height: 8px; background: var(--surface2); border-radius: 4px; overflow: hidden; margin-bottom: 6px; }
.os-dash-level-fill { height: 100%; background: #06b6d4; border-radius: 4px; transition: width .4s ease; }
.os-dash-level-next { font-size: 11px; color: var(--text-dim); }
.os-dash-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.os-dash-stat { text-align: center; }
.os-dash-stat-val { font-size: 24px; font-weight: 800; color: var(--text); }
.os-dash-stat-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-dim); margin-top: 2px; }
.os-dash-heading { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 12px; margin-top: 4px; }
.os-dash-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; margin-bottom: 24px; }
.os-dash-cat-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px; }
.os-dash-cat-head { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 8px; }
.os-dash-cat-bar { height: 6px; background: var(--surface2); border-radius: 3px; overflow: hidden; margin-bottom: 8px; }
.os-dash-cat-stats { display: flex; gap: 12px; font-size: 11px; color: var(--text-dim); flex-wrap: wrap; }

/* ══════════════════════════════════════════
   CABLE & CONNECTOR ID — .cb-* classes
   ══════════════════════════════════════════ */
.cb-level-badge { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 3px 10px; border-radius: 20px; background: #22c55e; color: #fff; vertical-align: middle; }
.cb-tab-bar { display: flex; gap: 0; border-bottom: 2px solid var(--border); margin-bottom: 20px; }
.cb-tab-btn { flex: 1; background: none; border: none; padding: 12px 16px; font-size: 14px; font-weight: 700; color: var(--text-dim); cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -2px; transition: color .15s, border-color .15s; }
.cb-tab-btn:hover { color: var(--text); }
.cb-tab-active { color: #22c55e; border-bottom-color: #22c55e; }
.cb-tab-panel { min-height: 200px; }
.cb-learn-layout { display: grid; grid-template-columns: 220px 1fr; gap: 20px; }
@media (max-width: 700px) { .cb-learn-layout { grid-template-columns: 1fr; } }
.cb-lesson-sidebar { display: flex; flex-direction: column; gap: 4px; }
.cb-lesson-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--radius-sm); cursor: pointer; border: 1px solid transparent; font-size: 13px; color: var(--text-mid); transition: background .15s, border-color .15s; }
.cb-lesson-item:hover { background: var(--surface); border-color: var(--border); }
.cb-lesson-active { background: var(--surface); border-color: rgba(34,197,94,.4); color: var(--text); }
.cb-lesson-locked { opacity: .45; cursor: not-allowed; }
.cb-lesson-icon { font-size: 18px; flex-shrink: 0; }
.cb-lesson-info { display: flex; flex-direction: column; gap: 2px; }
.cb-lesson-num { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-dim); }
.cb-lesson-title { font-size: 13px; font-weight: 600; }
.cb-lesson-main { min-height: 300px; }
.cb-lesson-placeholder { text-align: center; padding: 60px 20px; color: var(--text-dim); font-size: 15px; }
.cb-lesson-header { margin-bottom: 20px; }
.cb-lesson-header h3 { font-size: 20px; color: var(--text); margin-bottom: 6px; }
.cb-lesson-theory { margin-bottom: 24px; }
.cb-theory-block { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 16px 18px; margin-bottom: 10px; font-size: 14px; line-height: 1.7; color: var(--text-mid); }
.cb-theory-block code { background: var(--surface2); padding: 2px 6px; border-radius: 3px; font-family: monospace; font-size: 13px; }
.cb-lesson-gate { background: var(--surface); border: 1px solid rgba(34,197,94,.3); border-radius: var(--radius); padding: 20px; margin-top: 24px; }
.cb-lesson-gate h4 { font-size: 15px; color: var(--text); margin-bottom: 14px; }
.cb-gate-progress { font-size: 12px; font-weight: 700; color: #22c55e; margin-bottom: 10px; }
.cb-gate-result { text-align: center; padding: 20px; font-size: 16px; font-weight: 700; }
.cb-gate-pass { color: var(--green); }
.cb-gate-fail { color: var(--red); }
.cb-mode-bar { display: flex; gap: 6px; margin-bottom: 16px; flex-wrap: wrap; }
.cb-mode-btn { background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--radius-sm); padding: 8px 14px; font-size: 13px; font-weight: 600; color: var(--text-mid); cursor: pointer; transition: all .15s; }
.cb-mode-btn:hover { border-color: rgba(34,197,94,.4); color: var(--text); }
.cb-mode-active { background: #22c55e; border-color: #22c55e; color: #fff; }
[data-theme="light"] .cb-mode-active { background: #22c55e; border-color: #22c55e; color: #fff; }
.cb-stats-strip { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; font-size: 13px; }
.cb-stat { display: flex; align-items: center; gap: 6px; color: var(--text-mid); font-weight: 600; }
.cb-stat-label { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-dim); font-weight: 700; }
.cb-cat-badge { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 4px; background: rgba(34,197,94,.12); color: #22c55e; }
.cb-answer-area { margin-top: 12px; }
.cb-mcq-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px; }
.cb-mcq-btn { background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--radius-sm); padding: 12px 16px; font-size: 14px; font-weight: 600; color: var(--text); cursor: pointer; transition: all .15s; text-align: left; }
.cb-mcq-btn:hover:not(:disabled) { border-color: #22c55e; background: rgba(34,197,94,.08); }
.cb-mcq-btn:disabled { opacity: .6; cursor: default; }
.cb-feedback { margin-top: 16px; border-radius: var(--radius-sm); font-size: 14px; line-height: 1.6; overflow: hidden; }
.cb-feedback:empty { margin-top: 0; }
.cb-fb-correct { background: var(--green-bg); border: 1px solid var(--green-border); border-radius: var(--radius-sm); padding: 12px 16px; color: var(--correct-text2); }
.cb-fb-wrong { background: var(--red-bg); border: 1px solid var(--red-border); border-radius: var(--radius-sm); padding: 12px 16px; color: var(--wrong-text2); }
.cb-fb-correct-answer { margin-top: 8px; padding: 10px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 14px; color: var(--text-mid); }
.cb-fb-tip { margin-top: 8px; padding: 10px 16px; background: rgba(34,197,94,.08); border: 1px solid rgba(34,197,94,.2); border-radius: var(--radius-sm); font-size: 13px; color: var(--text-mid); font-style: italic; }
.cb-fb-streak { margin-top: 8px; font-size: 14px; font-weight: 700; color: #22c55e; }
.cb-heatmap { margin-top: 20px; }
.cb-heatmap-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-dim); margin-bottom: 10px; }
.cb-heatmap-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
.cb-heat-cell { background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--radius-sm); padding: 12px 8px; text-align: center; transition: border-color .15s; }
.cb-heat-pct { font-size: 18px; font-weight: 800; }
.cb-heat-label { font-size: 9px; color: var(--text-dim); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; margin-top: 2px; }
.cb-heat-box { font-size: 10px; color: var(--text-dim); margin-top: 4px; }
.cb-dash-hero { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; margin-bottom: 20px; }
.cb-dash-level { margin-bottom: 16px; }
.cb-dash-level-title { font-size: 22px; font-weight: 800; color: var(--text); margin-bottom: 8px; }
.cb-dash-level-bar { height: 8px; background: var(--surface2); border-radius: 4px; overflow: hidden; margin-bottom: 6px; }
.cb-dash-level-fill { height: 100%; background: #22c55e; border-radius: 4px; transition: width .4s ease; }
.cb-dash-level-next { font-size: 11px; color: var(--text-dim); }
.cb-dash-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.cb-dash-stat { text-align: center; }
.cb-dash-stat-val { font-size: 24px; font-weight: 800; color: var(--text); }
.cb-dash-stat-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-dim); margin-top: 2px; }
.cb-dash-heading { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 12px; margin-top: 4px; }
.cb-dash-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; margin-bottom: 24px; }
.cb-dash-cat-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px; }
.cb-dash-cat-head { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 8px; }
.cb-dash-cat-bar { height: 6px; background: var(--surface2); border-radius: 3px; overflow: hidden; margin-bottom: 8px; }
.cb-dash-cat-stats { display: flex; gap: 12px; font-size: 11px; color: var(--text-dim); flex-wrap: wrap; }

/* ══════════════════════════════════════════
   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: all .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: all .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: all .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 900ms 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: all .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: all .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 600ms 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.52.0 — ACL / FIREWALL RULE BUILDER
   Premium Security-domain sandbox. Design principles:
    • Card aesthetic matches v4.47.2/4.51.0 (radial + linear gradient bg,
      layered shadow, cubic-bezier transitions).
    • Action pills: permit = green, deny = red (app-wide semantic).
    • Zone chips = domain palette tinting via --zone-color CSS var.
    • Animations: packet-flow reveal (stagger), FLIP rule reorder,
      grade count-up pop, hover-lifts everywhere.
    • Light theme + reduced-motion + responsive all covered below.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Canvas widening (match Analytics width) ── */
#page-acl { max-width: 1080px; }

/* ── Header ── */
.acl-page-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.acl-page-title {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--text);
}
.acl-header-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.acl-header-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  padding: 8px 14px;
  border-radius: 99px;
  background: rgba(var(--accent-rgb), .1);
  border: 1px solid rgba(var(--accent-rgb), .26);
  color: var(--accent-light);
  transition: all .2s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.acl-header-pill-free {
  background: rgba(var(--accent-rgb), .08);
  color: var(--accent-light);
}
.acl-header-pill-scenario {
  background: linear-gradient(135deg, rgba(var(--accent-rgb), .18), rgba(var(--accent-rgb), .08));
  box-shadow: 0 2px 8px -3px rgba(var(--accent-rgb), .3);
}

/* ── Layout ── */
.acl-layout {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 18px;
  align-items: start;
}
.acl-left,
.acl-main {
  min-width: 0;
}
.acl-main {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ── Scenario panel (left) ── */
.acl-scenario-panel { min-height: 200px; }
.acl-scenario-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 18px 16px;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, .04),
    0 8px 24px -12px rgba(var(--accent-rgb), .22);
  animation: aclCardFadeIn .4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes aclCardFadeIn {
  0%   { opacity: 0; transform: translateY(6px); }
  100% { opacity: 1; transform: translateY(0); }
}
.acl-scenario-card-beginner { border-color: rgba(34, 197, 94, .25); box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 8px 24px -12px rgba(34, 197, 94, .22); }
.acl-scenario-card-intermediate { border-color: rgba(59, 130, 246, .25); box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 8px 24px -12px rgba(59, 130, 246, .22); }
.acl-scenario-card-advanced { border-color: rgba(239, 68, 68, .25); box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 8px 24px -12px rgba(239, 68, 68, .22); }
.acl-sc-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.acl-sc-ico { font-size: 32px; line-height: 1; flex-shrink: 0; filter: drop-shadow(0 2px 6px rgba(var(--accent-rgb), .2)); }
.acl-sc-titlewrap { min-width: 0; flex: 1; }
.acl-sc-title { font-size: 16px; font-weight: 800; color: var(--text); letter-spacing: -0.01em; line-height: 1.3; }
.acl-sc-meta { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.acl-sc-diff {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: 2px 8px;
  border-radius: 99px;
}
.acl-sc-diff-beginner    { background: rgba(34, 197, 94, .12);  color: var(--green); border: 1px solid rgba(34, 197, 94, .28); }
.acl-sc-diff-intermediate{ background: rgba(59, 130, 246, .12); color: #60a5fa;       border: 1px solid rgba(59, 130, 246, .28); }
.acl-sc-diff-advanced    { background: rgba(239, 68, 68, .12);  color: #f87171;       border: 1px solid rgba(239, 68, 68, .28); }
.acl-sc-obj {
  font-size: 10px;
  font-weight: 700;
  color: var(--accent-light);
  background: rgba(var(--accent-rgb), .1);
  border: 1px solid rgba(var(--accent-rgb), .22);
  border-radius: 99px;
  padding: 2px 8px;
  font-family: monospace;
  letter-spacing: .02em;
}
.acl-sc-sub { font-size: 12.5px; color: var(--text-mid); line-height: 1.5; margin-top: 4px; }

/* Zones: coloured chips using per-zone --zone-color */
.acl-sc-zones {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 12px 0;
  padding: 10px;
  background: rgba(var(--accent-rgb), .04);
  border-radius: 10px;
  border: 1px dashed rgba(var(--accent-rgb), .18);
}
.acl-zone {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 10px;
  background: var(--surface);
  border: 1px solid rgba(var(--accent-rgb), .15);
  border-left: 3px solid var(--zone-color, var(--accent));
  border-radius: 8px;
  font-size: 12px;
  transition: transform .2s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow .2s ease;
}
.acl-zone:hover {
  transform: translateX(2px);
  box-shadow: 0 2px 8px -3px var(--zone-color, rgba(var(--accent-rgb), .3));
}
.acl-zone-name { font-weight: 700; color: var(--text); }
.acl-zone-cidr { font-family: monospace; font-size: 11px; color: var(--text-dim); }

/* Requirements list */
.acl-sc-reqs { margin-top: 10px; }
.acl-sc-reqs-head { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--accent-light); margin-bottom: 6px; }
.acl-sc-reqs-list { list-style: none; padding: 0; margin: 0; }
.acl-req { font-size: 12.5px; color: var(--text-mid); line-height: 1.5; padding: 3px 0; }
.acl-sc-hint { font-size: 12px; color: var(--text-dim); margin-top: 10px; padding: 8px 10px; background: rgba(var(--accent-rgb), .06); border-radius: 8px; line-height: 1.5; }

/* Learn-more collapsible */
.acl-learn { margin-top: 12px; border-top: 1px solid rgba(var(--accent-rgb), .14); padding-top: 10px; }
.acl-learn summary {
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  color: var(--accent-light);
  padding: 6px 0;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: color .15s ease;
}
.acl-learn summary::-webkit-details-marker { display: none; }
.acl-learn summary:hover { color: var(--accent); }
.acl-learn-chev { margin-left: auto; transition: transform .25s cubic-bezier(0.2, 0.8, 0.2, 1); }
.acl-learn[open] .acl-learn-chev { transform: rotate(90deg); }
.acl-learn-body {
  animation: aclLearnFade .4s cubic-bezier(0.2, 0.8, 0.2, 1);
  padding: 6px 0;
}
@keyframes aclLearnFade {
  0%   { opacity: 0; transform: translateY(-4px); }
  100% { opacity: 1; transform: translateY(0); }
}
.acl-learn-sec { margin-bottom: 10px; }
.acl-learn-sec h4 { font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--text); margin: 0 0 4px; }
.acl-learn-sec p { font-size: 12px; line-height: 1.55; color: var(--text-mid); margin: 0; }
.acl-learn-list { margin: 0; padding: 0; list-style: none; }
.acl-learn-list li { font-size: 12px; line-height: 1.55; color: var(--text-mid); padding: 3px 0 3px 12px; position: relative; }
.acl-learn-list li::before { content: '\25CF'; position: absolute; left: 0; top: 3px; color: var(--accent); font-size: 7px; }
.acl-learn-exam { background: rgba(245, 158, 11, .06); border-left: 3px solid rgba(245, 158, 11, .5); padding: 8px 10px; border-radius: 0 6px 6px 0; }
.acl-learn-exam p { color: var(--text); }

/* ── Panels (rule list / test / grade) ── */
.acl-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px 18px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}
.acl-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.acl-panel-title { font-size: 14px; font-weight: 800; color: var(--text); display: flex; align-items: center; gap: 8px; letter-spacing: -0.005em; }
.acl-panel-ico { font-size: 18px; }
.acl-panel-sub { font-size: 11px; font-weight: 600; color: var(--text-dim); text-transform: uppercase; letter-spacing: .04em; margin-left: 6px; }
.acl-panel-actions { display: flex; gap: 8px; align-items: center; }

/* ── Rule list ── */
.acl-rule-list { display: flex; flex-direction: column; gap: 6px; }
.acl-rule-empty {
  padding: 30px 20px;
  text-align: center;
  background: rgba(var(--accent-rgb), .04);
  border: 2px dashed rgba(var(--accent-rgb), .2);
  border-radius: 10px;
}
.acl-rule-empty-ico { font-size: 32px; color: var(--accent-light); margin-bottom: 8px; opacity: .7; }
.acl-rule-empty-title { font-size: 14px; font-weight: 800; color: var(--text); margin-bottom: 4px; }
.acl-rule-empty-sub { font-size: 12px; color: var(--text-dim); line-height: 1.5; }

.acl-rule-row {
  display: grid;
  grid-template-columns: 28px auto 56px minmax(0, 1fr) 18px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(var(--accent-rgb), .03);
  border: 1px solid rgba(var(--accent-rgb), .15);
  border-radius: 10px;
  font-size: 12.5px;
  transition: background .2s ease, border-color .2s ease, transform .2s cubic-bezier(0.2, 0.8, 0.2, 1);
  animation: aclRuleIn .35s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes aclRuleIn {
  0%   { opacity: 0; transform: translateX(-6px); }
  100% { opacity: 1; transform: translateX(0); }
}
.acl-rule-row:hover { background: rgba(var(--accent-rgb), .06); border-color: rgba(var(--accent-rgb), .28); }
.acl-rule-num {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  font-weight: 900;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 2px 6px -2px rgba(var(--accent-rgb), .5);
}
.acl-rule-cell { font-family: monospace; font-size: 12px; line-height: 1.3; }
.acl-rule-addr { color: var(--text); font-weight: 600; word-break: break-all; }
.acl-rule-port { color: var(--text-dim); font-size: 11px; }
.acl-act-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 99px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.acl-act-permit { background: rgba(34, 197, 94, .14); color: var(--green); border: 1px solid rgba(34, 197, 94, .32); }
.acl-act-deny   { background: rgba(239, 68, 68, .14);  color: #f87171;     border: 1px solid rgba(239, 68, 68, .32); }
.acl-rule-proto {
  text-transform: uppercase;
  font-weight: 700;
  font-size: 10.5px;
  color: var(--text-mid);
  letter-spacing: .06em;
}
.acl-rule-arrow { color: var(--text-dim); font-size: 14px; text-align: center; }
.acl-rule-ops { display: flex; gap: 3px; flex-shrink: 0; }
.acl-rule-op {
  width: 26px;
  height: 26px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-dim);
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .15s ease;
  padding: 0;
}
.acl-rule-op:hover:not(:disabled) { background: var(--accent); color: #fff; border-color: var(--accent); transform: scale(1.1); }
.acl-rule-op:disabled { opacity: .3; cursor: not-allowed; }
.acl-rule-op-del:hover:not(:disabled) { background: var(--red); color: #fff; border-color: var(--red); }

.acl-rule-implicit {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(239, 68, 68, .04);
  border: 1px dashed rgba(239, 68, 68, .3);
  border-radius: 10px;
  font-size: 12px;
  color: var(--text-dim);
  margin-top: 4px;
}
.acl-rule-num-implicit { background: var(--red); box-shadow: 0 2px 6px -2px rgba(239, 68, 68, .5); font-size: 14px; }

/* ── Test panel ── */
.acl-test-panel { display: flex; flex-direction: column; gap: 12px; }
.acl-tp-list { display: flex; flex-direction: column; gap: 6px; }
.acl-tp-empty {
  padding: 20px;
  text-align: center;
  font-size: 12px;
  color: var(--text-dim);
  background: rgba(var(--accent-rgb), .04);
  border-radius: 8px;
}
.acl-tp-row {
  display: grid;
  grid-template-columns: 1.3fr 2fr auto auto;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  background: rgba(var(--accent-rgb), .03);
  border: 1px solid rgba(var(--accent-rgb), .15);
  border-radius: 10px;
  font-size: 12px;
  transition: all .25s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.acl-tp-row.acl-tp-pass { background: rgba(34, 197, 94, .06); border-color: rgba(34, 197, 94, .3); }
.acl-tp-row.acl-tp-fail { background: rgba(239, 68, 68, .06); border-color: rgba(239, 68, 68, .3); }
.acl-tp-reveal { animation: aclTpReveal .4s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
@keyframes aclTpReveal {
  0%   { opacity: 0; transform: translateX(-10px); }
  60%  { transform: translateX(3px); }
  100% { opacity: 1; transform: translateX(0); }
}
.acl-tp-label { font-weight: 700; color: var(--text); font-size: 12px; }
.acl-tp-packet { font-family: monospace; font-size: 11.5px; color: var(--text-mid); word-break: break-all; }
.acl-tp-addr { color: var(--text); }
.acl-tp-port { color: var(--text-dim); }
.acl-tp-arrow { color: var(--accent-light); margin: 0 3px; }
.acl-tp-proto { color: var(--accent-light); text-transform: uppercase; font-size: 10px; margin-left: 4px; }
.acl-tp-expected { font-size: 11px; color: var(--text-dim); }
.acl-tp-exp-permit { color: var(--green); }
.acl-tp-exp-deny   { color: #f87171; }
.acl-tp-actual {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 99px;
  letter-spacing: .04em;
}
.acl-tp-actual-permit { background: rgba(34, 197, 94, .14); color: var(--green); border: 1px solid rgba(34, 197, 94, .32); }
.acl-tp-actual-deny   { background: rgba(239, 68, 68, .14); color: #f87171;      border: 1px solid rgba(239, 68, 68, .32); }
.acl-tp-state { font-size: 18px; margin-left: 4px; }
.acl-tp-row.acl-tp-pass .acl-tp-state { color: var(--green); }
.acl-tp-row.acl-tp-fail .acl-tp-state { color: #f87171; }
.acl-tp-result { display: flex; align-items: center; gap: 4px; }

.acl-test-run {
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 700;
}

/* Custom packet tester */
.acl-custom-packet { border-top: 1px solid var(--border); padding-top: 10px; }
.acl-custom-packet summary {
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--accent-light);
  padding: 6px 0;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: color .15s ease;
}
.acl-custom-packet summary::-webkit-details-marker { display: none; }
.acl-custom-packet summary:hover { color: var(--accent); }
.acl-custom-chev { margin-left: auto; transition: transform .25s cubic-bezier(0.2, 0.8, 0.2, 1); }
.acl-custom-packet[open] .acl-custom-chev { transform: rotate(90deg); }
.acl-custom-body { padding: 10px 0; animation: aclLearnFade .3s cubic-bezier(0.2, 0.8, 0.2, 1); }
.acl-custom-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}
.acl-custom-lbl { display: flex; flex-direction: column; gap: 3px; font-size: 11px; font-weight: 700; color: var(--text-dim); text-transform: uppercase; letter-spacing: .04em; }
.acl-custom-input {
  padding: 7px 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 12.5px;
  font-family: monospace;
  border-radius: 6px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.acl-custom-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .18); }
.acl-custom-run { padding: 8px 16px; font-size: 13px; font-weight: 700; margin-bottom: 10px; }
.acl-custom-result { margin-top: 6px; }
.acl-custom-ok {
  padding: 12px 14px;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  animation: aclTpReveal .4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.acl-custom-ok-permit { background: rgba(34, 197, 94, .08); border: 1px solid rgba(34, 197, 94, .3); }
.acl-custom-ok-deny   { background: rgba(239, 68, 68, .08); border: 1px solid rgba(239, 68, 68, .3); }
.acl-custom-action {
  font-size: 18px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.acl-custom-ok-permit .acl-custom-action { color: var(--green); }
.acl-custom-ok-deny   .acl-custom-action { color: #f87171; }
.acl-custom-match { font-size: 11px; color: var(--text-dim); font-weight: 600; }
.acl-custom-pkt { font-family: monospace; font-size: 11.5px; color: var(--text); }
.acl-custom-err {
  padding: 10px 12px;
  background: rgba(239, 68, 68, .08);
  border: 1px solid rgba(239, 68, 68, .3);
  border-radius: 8px;
  color: #f87171;
  font-size: 12px;
}

/* ── Grade panel ── */
.acl-grade-body { display: flex; flex-direction: column; gap: 10px; }
.acl-grade-summary {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  background: rgba(var(--accent-rgb), .05);
  border-radius: 10px;
  border: 1px solid rgba(var(--accent-rgb), .18);
}
.acl-grade-score {
  font-size: 28px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  color: var(--text-dim);
  letter-spacing: -0.02em;
  transition: color .2s ease;
}
.acl-grade-score-full    { color: var(--green); text-shadow: 0 0 12px rgba(34, 197, 94, .3); }
.acl-grade-score-partial { color: var(--accent-light); }
.acl-grade-score-low     { color: #f87171; }
.acl-grade-score-empty   { color: var(--text-dim); opacity: .6; }
.acl-grade-score-pop { animation: aclGradePop .55s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes aclGradePop {
  0%   { transform: scale(.6); opacity: 0; }
  60%  { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
.acl-grade-label { font-size: 13px; color: var(--text-mid); font-weight: 600; }
.acl-grade-info {
  padding: 16px;
  text-align: center;
  font-size: 13px;
  color: var(--text-dim);
  background: rgba(var(--accent-rgb), .05);
  border-radius: 10px;
  border: 1px dashed rgba(var(--accent-rgb), .22);
}
.acl-grade-details { display: flex; flex-direction: column; gap: 5px; }
.acl-grade-detail {
  display: grid;
  grid-template-columns: auto 1fr auto auto auto auto;
  gap: 8px;
  align-items: center;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 12px;
  animation: aclTpReveal .35s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.acl-gd-pass { background: rgba(34, 197, 94, .05); border-left: 3px solid var(--green); }
.acl-gd-fail { background: rgba(239, 68, 68, .05); border-left: 3px solid #f87171; }
.acl-gd-state { font-size: 14px; font-weight: 900; }
.acl-gd-pass .acl-gd-state { color: var(--green); }
.acl-gd-fail .acl-gd-state { color: #f87171; }
.acl-gd-label { font-weight: 700; color: var(--text); font-size: 12px; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.acl-gd-expected { font-size: 10.5px; color: var(--text-dim); text-transform: uppercase; letter-spacing: .04em; font-weight: 700; }
.acl-gd-vs { font-size: 10px; color: var(--text-dim); }
.acl-gd-actual { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; padding: 2px 7px; border-radius: 99px; }
.acl-gd-actual-permit { background: rgba(34, 197, 94, .14); color: var(--green); }
.acl-gd-actual-deny   { background: rgba(239, 68, 68, .14); color: #f87171; }
.acl-gd-tag {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 99px;
  font-family: monospace;
}
.acl-gd-tag-rule { background: rgba(var(--accent-rgb), .12); color: var(--accent-light); border: 1px solid rgba(var(--accent-rgb), .25); }
.acl-gd-tag-implicit { background: rgba(239, 68, 68, .1); color: #f87171; border: 1px solid rgba(239, 68, 68, .25); }

.acl-grade-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.acl-coach-btn { font-size: 12.5px; padding: 8px 14px; font-weight: 700; }
.acl-grade-btn { font-size: 12.5px; padding: 8px 16px; font-weight: 800; }

/* ── Modals ── */
.acl-modal {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  animation: aclModalFadeIn .25s ease;
}
.acl-modal.is-hidden { display: none; }
@keyframes aclModalFadeIn { from { opacity: 0; } to { opacity: 1; } }
.acl-modal-backdrop {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, .6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.acl-modal-card {
  position: relative;
  background: var(--surface);
  border: 1px solid rgba(var(--accent-rgb), .22);
  border-radius: 16px;
  max-width: 520px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .6), 0 8px 20px -8px rgba(var(--accent-rgb), .3);
  animation: aclModalScaleIn .3s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.acl-modal-card-wide { max-width: 780px; }
@keyframes aclModalScaleIn {
  0%   { opacity: 0; transform: scale(.95) translateY(8px); }
  100% { opacity: 1; transform: scale(1)  translateY(0); }
}
.acl-modal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(var(--accent-rgb), .08), transparent 60%),
    var(--surface);
  border-radius: 16px 16px 0 0;
}
.acl-modal-title { margin: 0; font-size: 17px; font-weight: 800; color: var(--text); letter-spacing: -0.01em; }
.acl-modal-close {
  background: transparent;
  border: none;
  color: var(--text-dim);
  font-size: 26px;
  cursor: pointer;
  padding: 0 6px;
  line-height: 1;
  border-radius: 6px;
  transition: all .15s ease;
}
.acl-modal-close:hover { color: var(--text); background: rgba(255, 255, 255, .06); }
.acl-modal-body { padding: 18px; }

/* Scenario-picker cards */
.acl-picker-cat { margin-bottom: 22px; }
.acl-picker-cat:last-child { margin-bottom: 0; }
.acl-picker-cat-title {
  font-size: 12px;
  font-weight: 800;
  color: var(--accent-light);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px dashed rgba(var(--accent-rgb), .22);
}
.acl-picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}
.acl-picker-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 14px;
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(var(--accent-rgb), .08), transparent 55%),
    linear-gradient(160deg, rgba(var(--accent-rgb), .04), rgba(var(--accent-rgb), .01));
  border: 1px solid rgba(var(--accent-rgb), .2);
  border-radius: 12px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  color: inherit;
  transition: transform .2s cubic-bezier(0.2, 0.8, 0.2, 1), border-color .2s ease, box-shadow .2s ease;
}
.acl-picker-card:hover {
  transform: translateY(-2px);
  border-color: rgba(var(--accent-rgb), .4);
  box-shadow: 0 6px 18px -8px rgba(var(--accent-rgb), .4);
}
.acl-picker-card-active {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(var(--accent-rgb), .25);
}
.acl-picker-card-beginner { border-color: rgba(34, 197, 94, .3); }
.acl-picker-card-intermediate { border-color: rgba(59, 130, 246, .3); }
.acl-picker-card-advanced { border-color: rgba(239, 68, 68, .3); }
.acl-picker-ico { font-size: 28px; line-height: 1; }
.acl-picker-title {
  font-size: 14px;
  font-weight: 800;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.acl-picker-current {
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: 2px 7px;
  border-radius: 99px;
  background: rgba(var(--accent-rgb), .18);
  color: var(--accent-light);
  border: 1px solid rgba(var(--accent-rgb), .35);
}
.acl-picker-desc { font-size: 11.5px; color: var(--text-mid); line-height: 1.5; }
.acl-picker-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.acl-picker-diff { font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; padding: 2px 7px; border-radius: 99px; }
.acl-picker-diff-beginner    { background: rgba(34, 197, 94, .14);  color: var(--green); border: 1px solid rgba(34, 197, 94, .3); }
.acl-picker-diff-intermediate{ background: rgba(59, 130, 246, .14); color: #60a5fa;      border: 1px solid rgba(59, 130, 246, .3); }
.acl-picker-diff-advanced    { background: rgba(239, 68, 68, .14);  color: #f87171;      border: 1px solid rgba(239, 68, 68, .3); }
.acl-picker-tests, .acl-picker-obj {
  font-size: 9.5px;
  font-weight: 700;
  color: var(--text-dim);
  font-family: monospace;
  padding: 2px 7px;
  background: rgba(var(--accent-rgb), .06);
  border: 1px solid rgba(var(--accent-rgb), .14);
  border-radius: 99px;
}

/* Add-Rule modal */
.acl-rm-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.acl-rm-lbl { display: flex; flex-direction: column; gap: 5px; font-size: 11px; font-weight: 800; color: var(--text-dim); text-transform: uppercase; letter-spacing: .05em; }
.acl-rm-input {
  padding: 9px 12px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 13px;
  font-family: monospace;
  border-radius: 8px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.acl-rm-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .18); }
.acl-rm-actions { display: flex; gap: 8px; justify-content: flex-end; }

/* ── Responsive ── */
@media (max-width: 900px) {
  .acl-layout { grid-template-columns: 1fr; }
  .acl-left { order: 2; }
  .acl-main { order: 1; }
}
@media (max-width: 600px) {
  #page-acl { max-width: 100%; }
  .acl-rule-row {
    grid-template-columns: 24px auto 1fr auto;
    grid-template-rows: auto auto;
    gap: 6px;
  }
  .acl-rule-proto, .acl-rule-arrow { display: none; }
  .acl-rule-src, .acl-rule-dst { grid-column: 2 / 4; }
  .acl-rule-ops { grid-column: 1 / 5; justify-content: flex-end; }
  .acl-tp-row { grid-template-columns: 1fr auto; grid-template-rows: auto auto; }
  .acl-tp-packet { grid-column: 1 / 3; }
  .acl-tp-expected { grid-column: 1; }
  .acl-tp-result { grid-column: 2; }
  .acl-picker-grid { grid-template-columns: 1fr; }
  .acl-grade-detail { grid-template-columns: auto 1fr; grid-template-rows: auto auto; }
  .acl-gd-expected, .acl-gd-vs, .acl-gd-actual, .acl-gd-tag { grid-column: 1 / 3; justify-self: end; }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .acl-scenario-card,
  .acl-rule-row,
  .acl-tp-row,
  .acl-tp-reveal,
  .acl-custom-ok,
  .acl-grade-detail,
  .acl-grade-score-pop,
  .acl-modal,
  .acl-modal-card,
  .acl-learn-body,
  .acl-custom-body { animation: none !important; }
  .acl-zone:hover,
  .acl-rule-op:hover,
  .acl-picker-card:hover { transform: none !important; }
  .acl-rule-row,
  .acl-tp-row,
  .acl-zone,
  .acl-picker-card,
  .acl-custom-input,
  .acl-rm-input,
  .acl-rule-op { transition: none !important; }
}

/* ── Light-theme overrides ── */
[data-theme="light"] .acl-header-pill-scenario {
  background: linear-gradient(135deg, rgba(99, 85, 224, .12), rgba(99, 85, 224, .04));
  box-shadow: 0 2px 8px -3px rgba(99, 85, 224, .25);
}
[data-theme="light"] .acl-scenario-card {
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(99, 85, 224, .08), transparent 55%),
    linear-gradient(160deg, rgba(99, 85, 224, .04), rgba(99, 85, 224, .01));
  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, .22);
}
[data-theme="light"] .acl-scenario-card-beginner    { border-color: rgba(22, 163, 74, .3); box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 8px 24px -14px rgba(22, 163, 74, .22); }
[data-theme="light"] .acl-scenario-card-intermediate{ border-color: rgba(37, 99, 235, .3); box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 8px 24px -14px rgba(37, 99, 235, .22); }
[data-theme="light"] .acl-scenario-card-advanced    { border-color: rgba(220, 38, 38, .3); box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 8px 24px -14px rgba(220, 38, 38, .22); }
[data-theme="light"] .acl-zone { background: #fff; border-color: rgba(99, 85, 224, .18); }
[data-theme="light"] .acl-sc-diff-beginner    { background: rgba(22, 163, 74, .10);  color: #16a34a; border-color: rgba(22, 163, 74, .3); }
[data-theme="light"] .acl-sc-diff-intermediate{ background: rgba(37, 99, 235, .10);  color: #2563eb; border-color: rgba(37, 99, 235, .3); }
[data-theme="light"] .acl-sc-diff-advanced    { background: rgba(220, 38, 38, .10);  color: #dc2626; border-color: rgba(220, 38, 38, .3); }
[data-theme="light"] .acl-act-permit { background: rgba(22, 163, 74, .12); color: #16a34a; border-color: rgba(22, 163, 74, .32); }
[data-theme="light"] .acl-act-deny   { background: rgba(220, 38, 38, .12); color: #dc2626; border-color: rgba(220, 38, 38, .32); }
[data-theme="light"] .acl-rule-row { background: rgba(99, 85, 224, .03); border-color: rgba(99, 85, 224, .15); }
[data-theme="light"] .acl-rule-row:hover { background: rgba(99, 85, 224, .06); border-color: rgba(99, 85, 224, .28); }
[data-theme="light"] .acl-rule-num { background: #6355e0; box-shadow: 0 2px 6px -2px rgba(99, 85, 224, .5); }
[data-theme="light"] .acl-tp-row.acl-tp-pass { background: rgba(22, 163, 74, .06); border-color: rgba(22, 163, 74, .3); }
[data-theme="light"] .acl-tp-row.acl-tp-fail { background: rgba(220, 38, 38, .06); border-color: rgba(220, 38, 38, .3); }
[data-theme="light"] .acl-tp-actual-permit { background: rgba(22, 163, 74, .12); color: #16a34a; }
[data-theme="light"] .acl-tp-actual-deny   { background: rgba(220, 38, 38, .12); color: #dc2626; }
[data-theme="light"] .acl-tp-row.acl-tp-pass .acl-tp-state { color: #16a34a; }
[data-theme="light"] .acl-tp-row.acl-tp-fail .acl-tp-state { color: #dc2626; }
[data-theme="light"] .acl-grade-score-full { color: #16a34a; text-shadow: 0 0 12px rgba(22, 163, 74, .25); }
[data-theme="light"] .acl-grade-score-low  { color: #dc2626; }
[data-theme="light"] .acl-gd-pass { background: rgba(22, 163, 74, .05); border-left-color: #16a34a; }
[data-theme="light"] .acl-gd-fail { background: rgba(220, 38, 38, .05); border-left-color: #dc2626; }
[data-theme="light"] .acl-gd-pass .acl-gd-state { color: #16a34a; }
[data-theme="light"] .acl-gd-fail .acl-gd-state { color: #dc2626; }
[data-theme="light"] .acl-gd-actual-permit { background: rgba(22, 163, 74, .12); color: #16a34a; }
[data-theme="light"] .acl-gd-actual-deny   { background: rgba(220, 38, 38, .12); color: #dc2626; }
[data-theme="light"] .acl-custom-ok-permit { background: rgba(22, 163, 74, .08); border-color: rgba(22, 163, 74, .3); }
[data-theme="light"] .acl-custom-ok-deny   { background: rgba(220, 38, 38, .08); border-color: rgba(220, 38, 38, .3); }
[data-theme="light"] .acl-custom-ok-permit .acl-custom-action { color: #16a34a; }
[data-theme="light"] .acl-custom-ok-deny   .acl-custom-action { color: #dc2626; }
[data-theme="light"] .acl-modal-backdrop { background: rgba(0, 0, 0, .4); }
[data-theme="light"] .acl-modal-close:hover { background: rgba(0, 0, 0, .05); }
[data-theme="light"] .acl-picker-card {
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(99, 85, 224, .06), transparent 55%),
    #fff;
  border-color: rgba(99, 85, 224, .2);
}
[data-theme="light"] .acl-picker-card-beginner    { border-color: rgba(22, 163, 74, .3); }
[data-theme="light"] .acl-picker-card-intermediate{ border-color: rgba(37, 99, 235, .3); }
[data-theme="light"] .acl-picker-card-advanced    { border-color: rgba(220, 38, 38, .3); }
[data-theme="light"] .acl-picker-card-active { border-color: #6355e0; box-shadow: 0 0 0 2px rgba(99, 85, 224, .2); }
[data-theme="light"] .acl-learn-exam { background: rgba(217, 119, 6, .06); border-left-color: rgba(217, 119, 6, .5); }
[data-theme="light"] .acl-rule-implicit { background: rgba(220, 38, 38, .04); border-color: rgba(220, 38, 38, .3); }
[data-theme="light"] .acl-rule-num-implicit { background: #dc2626; box-shadow: 0 2px 6px -2px rgba(220, 38, 38, .5); }

/* ═══════════════════════════════════════════════════════════════════
   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;
}
.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;
}
.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); }
.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; }
.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); }

@media (max-width: 900px) {
  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); }
  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.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: all .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;
}
.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: all .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: all .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: all 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: all .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: all .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 1800ms 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: all .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: all .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 800ms 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: all .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: all .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: all .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: all .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: all .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: all .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: all .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: all .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: all .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: all .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: all .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: all .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: all .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: all .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: all .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: all 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: all 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: all 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: all 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: all 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: all 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: all 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: all 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: all 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: all .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; }
}