/* ═══════════════════════════════════════════════════════════════════════════════
   AWS SA Pro Quiz Trainer — Styles
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ─── Reset & Variables ─────────────────────────────────────────────────────── */

:root {
  --bg: #f8f9fb;
  --bg-card: #ffffff;
  --bg-primary: #ffffff;
  --bg-secondary: #f8f9fb;
  --bg-hover: #f0f2f5;
  --bg-active: #e8eaed;
  --text: #1a1d23;
  --text-primary: #1a1d23;
  --text-secondary: #5f6672;
  --text-muted: #8c919a;
  --border: #e2e5ea;
  --border-light: #eef0f3;
  --accent: #232f3e;
  --accent-light: #3b4f6b;
  --primary: #ff9900;
  --primary-hover: #ec7211;
  --primary-light: #fff4e0;
  --success: #1a8754;
  --success-light: #d4edda;
  --danger: #dc3545;
  --danger-light: #f8d7da;
  --warning: #ffc107;
  --warning-light: #fff3cd;
  --info: #0d6efd;
  --info-light: #cfe2ff;
  --radius: 12px;
  --radius-sm: 8px;
  --radius-xs: 4px;
  --shadow: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --shadow-md: 0 4px 12px rgba(0,0,0,.08);
  --shadow-lg: 0 8px 24px rgba(0,0,0,.12);
  --surface: #f5f5f5;
  --surface-hover: #eeeeee;
  --transition: 200ms ease;
  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'SF Mono', SFMono-Regular, ui-monospace, 'DejaVu Sans Mono', Menlo, Consolas, monospace;

  /* ─── Warm color accents (0147: mascot & study buddy) ──────────── */
  --warm-bg: #fff8f0;
  --warm-border: #ffe0b2;
  --warm-accent: #ff9800;
  --warm-accent-light: #fff3e0;
  --warm-celebrate: #ffb74d;
  --warm-encourage: #ffe082;
  --warm-amber: #F59E0B;
  --warm-coral: #F97316;
  --warm-gold: #EAB308;

  /* ─── AWS Category Colors (official architecture palette) ─────── */
  --aws-compute: #ED7100;
  --aws-storage: #7AA116;
  --aws-database: #01A88D;
  --aws-networking: #8C4FFF;
  --aws-security: #DD344C;
  --aws-ml: #C925D1;
  --aws-management: #E7157B;
  --aws-general: #879196;
}

/* ─── Mind Map Container ──────────────────────────────────────────────── */

.mindmap-container {
  width: 100%;
  height: calc(100vh - 120px);
  min-height: 400px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
  position: relative;
}

#screen-mindmap {
  padding: 0 12px;
  position: relative;
}

/* .mindmap-header removed in 0084 */

/* ─── Mind Map Node Styles (0048: AWS Theme) ──────────────────────────── */

.mm-node {
  padding: 4px 10px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text);
  background: var(--bg-card);
  border: 1px solid var(--border);
  transition: box-shadow var(--transition), transform var(--transition);
  cursor: default;
  line-height: 1.4;
  contain: layout style;
}

/* ─── Performance: CSS containment (0052, fixed 0091) ──────────────────── */
/* contain:layout removed — it caused coordinate-calculation bugs during zoom
   (getBoundingClientRect / offsetTop values become wrong inside a layout-
   containment boundary when the inner .map-canvas is CSS-transformed). */
.mindmap-container { contain: style; overflow: hidden; }

/* ─── Level-of-Detail (0052) ──────────────────────────────────────────── */
.mm-lod-minimal .mm-label,
.mm-lod-minimal .mm-icon,
.mm-lod-minimal .mm-badge,
.mm-lod-minimal .mm-play-badge { display: none !important; }
.mm-lod-minimal .mm-node { min-width: 12px; min-height: 12px; padding: 2px; border-radius: 50%; }

.mm-lod-medium .mm-icon,
.mm-lod-medium .mm-badge,
.mm-lod-medium .mm-play-badge { display: none !important; }
.mm-lod-medium .mm-label { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Viewport culling helper (0052) */
.mm-culled { visibility: hidden !important; }

.mm-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}

.mm-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 250px;
}

.mm-badge {
  font-size: 10px;
  background: var(--text-muted);
  color: var(--bg);
  border-radius: 8px;
  padding: 0 5px;
  margin-left: 4px;
  line-height: 1.6;
}

/* ── Node type sizing (AC-3: domain largest, detail smallest) ────────── */

.mm-domain {
  font-size: 16px;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 10px;
  border-width: 2px;
}

.mm-service {
  font-size: 14px;
  font-weight: 500;
  padding: 4px 10px;
}

.mm-feature {
  font-size: 12px;
  font-weight: 400;
  padding: 3px 8px;
}

.mm-detail {
  font-size: 11px;
  font-weight: 400;
  opacity: 0.85;
  padding: 2px 6px;
  border-radius: 12px;
}

/* ── Category colors — domain backgrounds (AC-1) ─────────────────────── */

.mm-domain.mm-cat-compute { background: var(--aws-compute); color: #fff; border-color: var(--aws-compute); }
.mm-domain.mm-cat-storage { background: var(--aws-storage); color: #fff; border-color: var(--aws-storage); }
.mm-domain.mm-cat-database { background: var(--aws-database); color: #fff; border-color: var(--aws-database); }
.mm-domain.mm-cat-networking { background: var(--aws-networking); color: #fff; border-color: var(--aws-networking); }
.mm-domain.mm-cat-security { background: var(--aws-security); color: #fff; border-color: var(--aws-security); }
.mm-domain.mm-cat-ml { background: var(--aws-ml); color: #fff; border-color: var(--aws-ml); }
.mm-domain.mm-cat-management { background: var(--aws-management); color: #fff; border-color: var(--aws-management); }
.mm-domain.mm-cat-general { background: var(--aws-general); color: #fff; border-color: var(--aws-general); }

/* ── Category colors — service borders (AC-1) ────────────────────────── */

.mm-service.mm-cat-compute { border-left: 3px solid var(--aws-compute); }
.mm-service.mm-cat-storage { border-left: 3px solid var(--aws-storage); }
.mm-service.mm-cat-database { border-left: 3px solid var(--aws-database); }
.mm-service.mm-cat-networking { border-left: 3px solid var(--aws-networking); }
.mm-service.mm-cat-security { border-left: 3px solid var(--aws-security); }
.mm-service.mm-cat-ml { border-left: 3px solid var(--aws-ml); }
.mm-service.mm-cat-management { border-left: 3px solid var(--aws-management); }
.mm-service.mm-cat-general { border-left: 3px solid var(--aws-general); }

/* ── Category colors — feature tint ───────────────────────────────────── */

.mm-feature.mm-cat-compute { border-left: 2px solid color-mix(in srgb, var(--aws-compute), transparent 60%); }
.mm-feature.mm-cat-storage { border-left: 2px solid color-mix(in srgb, var(--aws-storage), transparent 60%); }
.mm-feature.mm-cat-database { border-left: 2px solid color-mix(in srgb, var(--aws-database), transparent 60%); }
.mm-feature.mm-cat-networking { border-left: 2px solid color-mix(in srgb, var(--aws-networking), transparent 60%); }
.mm-feature.mm-cat-security { border-left: 2px solid color-mix(in srgb, var(--aws-security), transparent 60%); }
.mm-feature.mm-cat-ml { border-left: 2px solid color-mix(in srgb, var(--aws-ml), transparent 60%); }
.mm-feature.mm-cat-management { border-left: 2px solid color-mix(in srgb, var(--aws-management), transparent 60%); }

/* ── Weak area red glow (AC-4: score < 0.6) ──────────────────────────── */

.mm-weak {
  box-shadow: 0 0 8px var(--aws-security);
  border-color: var(--aws-security);
}

/* ── Exam weight scaling for domain nodes ─────────────────────────────── */

/* Node weight scale — use font-size/padding so SVG connectors stay aligned
   (CSS transform: scale() shifts the visual position but leaves offsetLeft /
   offsetTop unchanged, causing connector-line misalignment during zoom). */
.mm-scale-lg { font-size: 1.08em; padding: 5px 12px; }
.mm-scale-md { font-size: 1.04em; padding: 4px 11px; }

/* ── Play badge for clickable video nodes (0049) ─────────────────────── */

.mm-play-badge {
  font-size: 10px;
  margin-left: 4px;
  opacity: 0.6;
  transition: opacity var(--transition);
}

.mm-playable {
  cursor: pointer;
}

.mm-playable:hover {
  box-shadow: 0 0 6px var(--info);
}

.mm-playable:hover .mm-play-badge {
  opacity: 1;
}

/* ── Quiz Overlay — Mastery Encoding (0050) ───────────────────────────── */
.mm-mastery-high {
  border: 2.5px solid #27ae60 !important;
  opacity: 1;
}
.mm-mastery-medium {
  border: 2px solid #f1c40f !important;
  opacity: 0.92;
}
.mm-mastery-low {
  border: 2px solid #e74c3c !important;
  box-shadow: 0 0 6px rgba(231, 76, 60, 0.4);
}
.mm-mastery-none {
  border: 1.5px dashed var(--border) !important;
  opacity: 0.85;
}

/* ── Quiz Tooltip (0050) ──────────────────────────────────────────────── */
.mm-quiz-tooltip {
  position: fixed;
  z-index: 10000;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 8px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.18);
  padding: 12px 16px;
  min-width: 220px;
  max-width: 320px;
  font-size: 0.88rem;
  color: var(--text);
  pointer-events: auto;
  transform: translateX(-50%);
}
.mm-quiz-tooltip.hidden {
  display: none;
}
.mm-tip-title {
  margin: 0 0 4px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
}
.mm-tip-divider {
  height: 1px;
  background: var(--border);
  margin: 6px 0;
}
.mm-tip-stat {
  margin: 4px 0;
  line-height: 1.4;
}
.mm-tip-quiz-link {
  display: inline-block;
  margin-top: 8px;
  padding: 4px 12px;
  background: var(--accent);
  color: #fff;
  border-radius: var(--radius-sm, 4px);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.15s;
}
.mm-tip-quiz-link:hover {
  background: var(--info);
}

/* ── Search (now inside .mm-controls per 0084) ─────────────────────── */
.mm-search {
  display: flex;
  align-items: center;
  gap: 8px;
}
#mm-search-input {
  flex: 1;
  max-width: 400px;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 4px);
  background: var(--surface);
  color: var(--text);
  font-size: 0.9rem;
  outline: none;
}
#mm-search-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.15);
}
.mm-search-count {
  font-size: 0.82rem;
  color: var(--text-secondary, #888);
  white-space: nowrap;
}
/* ── Filters (now inside .mm-controls per 0080) ─────────────────────── */
.mm-filters {
  display: flex;
  gap: 6px;
  padding: 0;
  margin-left: auto;
  flex-wrap: wrap;
  flex-shrink: 0;
}
.mm-filter-btn {
  font-size: 0.82rem;
  padding: 4px 10px;
  border-radius: var(--radius-sm, 4px);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.mm-filter-btn:hover {
  background: var(--surface-hover, #eee);
}
.mm-filter-btn.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
/* Dimmed node class for search/filter results */
.mm-dimmed {
  opacity: 0.15 !important;
  transition: opacity 0.2s;
}
.mm-search-highlight {
  outline: 2px solid var(--accent) !important;
  outline-offset: 2px;
  opacity: 1 !important;
}

/* ── Legacy mindmap-node classes (backward compat) ────────────────────── */

.mindmap-node {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  color: var(--text);
}

.mindmap-node-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.mindmap-node[data-category="compute"] { border-left: 3px solid var(--aws-compute); }
.mindmap-node[data-category="storage"] { border-left: 3px solid var(--aws-storage); }
.mindmap-node[data-category="database"] { border-left: 3px solid var(--aws-database); }
.mindmap-node[data-category="networking"] { border-left: 3px solid var(--aws-networking); }
.mindmap-node[data-category="security"] { border-left: 3px solid var(--aws-security); }
.mindmap-node[data-category="ml"] { border-left: 3px solid var(--aws-ml); }
.mindmap-node[data-category="management"] { border-left: 3px solid var(--aws-management); }

[data-theme="dark"] {
  --bg: #0d1117;
  --bg-card: #161b22;
  --bg-primary: #0d1117;
  --bg-secondary: #161b22;
  --bg-hover: #1c2128;
  --bg-active: #262c34;
  --text: #e6edf3;
  --text-primary: #e6edf3;
  --text-secondary: #8b949e;
  --text-muted: #6e7681;
  --border: #30363d;
  --border-light: #21262d;
  --accent: #ff9900;
  --accent-light: #ffc46b;
  --primary: #ff9900;
  --primary-hover: #ffad33;
  --primary-light: #2d2208;
  --success: #3fb950;
  --success-light: #0d2818;
  --danger: #f85149;
  --danger-light: #2d1215;
  --warning: #d29922;
  --warning-light: #2d2208;
  --info: #58a6ff;
  --info-light: #0c2d6b;
  --shadow: 0 1px 3px rgba(0,0,0,.3);
  --shadow-md: 0 4px 12px rgba(0,0,0,.4);
  --shadow-lg: 0 8px 24px rgba(0,0,0,.5);
  --surface: #1c2128;
  --surface-hover: #262c34;

  /* 0147: warm tokens dark */
  --warm-bg: #2a1f0f;
  --warm-border: #5c3d1a;
  --warm-accent: #ffb74d;
  --warm-accent-light: #3a2a10;
  --warm-celebrate: #ff9800;
  --warm-encourage: #ffe082;
  --warm-amber: #FBBF24;
  --warm-coral: #FB923C;
  --warm-gold: #FACC15;
}

/* ── Dark theme mind map adjustments (AC-5) ──────────────────────────── */
[data-theme="dark"] .mm-node {
  background: var(--bg-card);
  color: var(--text);
  border-color: var(--border);
}
[data-theme="dark"] .mm-domain.mm-cat-compute,
[data-theme="dark"] .mm-domain.mm-cat-storage,
[data-theme="dark"] .mm-domain.mm-cat-database,
[data-theme="dark"] .mm-domain.mm-cat-networking,
[data-theme="dark"] .mm-domain.mm-cat-security,
[data-theme="dark"] .mm-domain.mm-cat-ml,
[data-theme="dark"] .mm-domain.mm-cat-management,
[data-theme="dark"] .mm-domain.mm-cat-general {
  color: #fff;
}
[data-theme="dark"] .mindmap-container {
  background: var(--bg);
  border-color: var(--border);
}

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

html { font-size: 16px; scroll-behavior: smooth; overscroll-behavior-y: none; }

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  min-height: 100vh;
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; }
a { color: var(--info); text-decoration: none; }
a:hover { text-decoration: underline; }

.hidden { display: none !important; }

/* ─── Screen Transitions ────────────────────────────────────────────────────── */

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.screen:not(.hidden) {
  animation: fadeIn 0.4s ease;
}

/* ─── Scrollbar ─────────────────────────────────────────────────────────────── */

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb {
  background: var(--text-muted);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover { background: var(--text-secondary); }

/* ─── Container ─────────────────────────────────────────────────────────────── */

.container {
  max-width: 860px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ─── Header ────────────────────────────────────────────────────────────────── */

.header {
  background: var(--accent);
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: var(--shadow-md);
}

.header-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: 1.1rem;
  /* 92.3 — Allow title flex area to shrink without overflowing */
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}

/* 92.1/92.2 — Title truncation so it never pushes other header elements */
.logo-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.logo:hover { text-decoration: none; }
.logo:active { opacity: 0.8; }
.logo:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 4px; }
.logo-icon { font-size: 1.4rem; }
.logo-sub { color: var(--primary); font-weight: 600; }

/* ─── Header Back Button (87.3) ─────────────────────────────────────────────── */

.header-back {
  color: rgba(255, 255, 255, 0.9);
  min-width: 48px;
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.header-back-label {
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
}

.header-actions { display: flex; gap: 8px; flex-shrink: 0; }  /* 92.3 — never shrink action buttons */

/* ─── Mobile header button labels (87.1) ────────────────────────────────────── */

.btn-label {
  display: none;
  font-size: 0.6rem;
  line-height: 1;
  color: rgba(255, 255, 255, 0.75);
  pointer-events: none;
}

.progress-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: var(--primary);
  color: #000;
  font-size: 0.65rem;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}

.progress-badge:empty { display: none; }

/* ─── Score Display ─────────────────────────────────────────────────────────── */

.score-display {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.82rem;
  font-weight: 600;
  color: rgba(255,255,255,.85);
  flex-shrink: 0;  /* 92.3 — keep scores fixed, let title shrink */
}

.score-display-item {
  font-variant-numeric: tabular-nums;
}

.score-display-streak {
  color: var(--success);
}

/* ─── Compact Header ───────────────────────────────────────────────────────── */

.header--compact .header-inner {
  height: 44px;
}

.header--compact .logo {
  font-size: 0.95rem;
}

.header--compact .logo-icon {
  font-size: 1.1rem;
}

/* ─── Buttons ───────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 20px;
  font-size: 0.9rem;
  font-weight: 600;
  font-family: var(--font);
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition);
  position: relative;
  white-space: nowrap;
}

.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-primary {
  background: var(--primary);
  color: #000;
}
.btn-primary:hover { background: var(--primary-hover); }

.btn-secondary {
  background: var(--bg-hover);
  color: var(--text);
  border: 1px solid var(--border);
}
.btn-secondary:hover { background: var(--bg-active); }

.btn-ghost {
  background: transparent;
  color: inherit;
}
.btn-ghost:hover { background: rgba(255,255,255,.1); }

.btn-sm { padding: 6px 12px; font-size: 0.8rem; }

.btn-danger { color: var(--danger); }
.btn-danger:hover { background: var(--danger-light); }

/* ─── Static USP Strip (0129) ───────────────────────────────────────────────── */

.usps-banner-collapsed {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 16px;
  padding: 8px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: 999px;
}

.usps-features-link {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--primary);
  text-decoration: none;
  white-space: nowrap;
  padding: 2px 10px;
  border: 1px solid var(--primary);
  border-radius: 999px;
  transition: background 0.2s, color 0.2s;
}

.usps-features-link:hover {
  background: var(--primary);
  color: #fff;
  text-decoration: none;
}

.usps-banner-collapsed-text {
  font-size: 0.85rem;
  color: var(--text-secondary);
  font-weight: 500;
  line-height: 1.45;
  text-align: center;
}

/* ─── Hero ──────────────────────────────────────────────────────────────────── */

.hero {
  text-align: center;
  padding: 48px 0 32px;
}

.hero h1 {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 12px;
  background: linear-gradient(135deg, var(--primary), var(--info));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.text-accent { color: var(--primary); }

.hero-sub {
  color: var(--text-secondary);
  font-size: 1.1rem;
}

/* ─── Quick Actions ─────────────────────────────────────────────────────────── */

.quick-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 40px;
}

.action-card {
  --action-accent: var(--primary);
  --action-bg: var(--bg-card);
  --action-border: var(--border);
  --action-icon-bg: var(--bg-hover);
  --action-icon-color: var(--text-secondary);
  --action-desc-color: color-mix(in srgb, var(--text) 70%, var(--text-secondary) 30%);
  background: var(--action-bg);
  border: 1px solid var(--action-border);
  border-radius: var(--radius);
  padding: 26px 18px;
  min-height: 156px;
  text-align: center;
  cursor: pointer;
  transition: all var(--transition);
  font-family: var(--font);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
}

.action-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--action-accent);
}

.action-card--primary {
  --action-accent: #ff9900;
  --action-bg: #ff9900;
  --action-border: #ec7211;
  --action-icon-bg: rgba(0, 0, 0, 0.14);
  --action-icon-color: #1f2933;
  --action-desc-color: #241400;
  color: #18110a;
}

.action-card--primary:hover { border-color: #c55f0f; }

.action-card--quick {
  --action-accent: #1a8754;
  --action-bg: color-mix(in srgb, #1a8754 12%, var(--bg-card));
  --action-border: color-mix(in srgb, #1a8754 28%, var(--border));
  --action-icon-bg: color-mix(in srgb, #1a8754 20%, transparent);
  --action-icon-color: #1a8754;
}

.action-card--weak {
  --action-accent: #dc3545;
  --action-bg: color-mix(in srgb, #dc3545 10%, var(--bg-card));
  --action-border: color-mix(in srgb, #dc3545 26%, var(--border));
  --action-icon-bg: color-mix(in srgb, #dc3545 18%, transparent);
  --action-icon-color: #c62839;
}

.action-card--mindmap {
  --action-accent: #0d6efd;
  --action-bg: color-mix(in srgb, #0d6efd 10%, var(--bg-card));
  --action-border: color-mix(in srgb, #0d6efd 25%, var(--border));
  --action-icon-bg: color-mix(in srgb, #0d6efd 18%, transparent);
  --action-icon-color: #0b5ed7;
}

.action-icon {
  font-size: 2rem;
  width: 46px;
  height: 46px;
  border-radius: 999px;
  margin: 0 auto 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--action-icon-bg);
  color: var(--action-icon-color);
}

.action-label {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 4px;
}

.action-desc {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--action-desc-color);
}

.action-card--primary .action-desc { color: var(--action-desc-color); }

/* ─── Section Title ─────────────────────────────────────────────────────────── */

.section-title {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 16px;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ─── Quiz Grid ─────────────────────────────────────────────────────────────── */

.quiz-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-bottom: 32px;
}

.quiz-row {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  cursor: pointer;
  transition: all var(--transition);
  box-shadow: var(--shadow);
}

.quiz-row:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow-md);
}

.quiz-row-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
  width: 40px;
  text-align: center;
}

.quiz-row-info { flex: 1; min-width: 0; }

.quiz-row-title {
  font-weight: 600;
  font-size: 0.95rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.quiz-row-meta {
  font-size: 0.78rem;
  color: var(--text-muted);
  display: flex;
  gap: 12px;
  margin-top: 2px;
}

.quiz-row-progress {
  flex-shrink: 0;
  width: 60px;
}

.mini-progress {
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
}

.mini-progress-fill {
  height: 100%;
  background: var(--success);
  border-radius: 2px;
  transition: width 0.3s ease;
}

.quiz-row-score {
  flex-shrink: 0;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-muted);
}

/* ─── Quiz Top Bar ──────────────────────────────────────────────────────────── */

.quiz-top-bar {
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  padding: 12px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  position: sticky;
  top: 56px;
  z-index: 90;
  box-shadow: var(--shadow);
}

.quiz-progress-info {
  display: flex;
  gap: 12px;
  align-items: center;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-secondary);
  flex: 1;
  justify-content: center;
}

.quiz-timer {
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  font-size: 0.8rem;
}
.quiz-timer.exam-timer {
  color: var(--text);
  font-weight: 600;
  font-size: 0.9rem;
}
.quiz-timer.exam-timer-warning {
  color: var(--danger);
  font-weight: 700;
  animation: pulse-warning 1s ease-in-out infinite;
}
@keyframes pulse-warning {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

.quiz-progress-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--border);
}

.quiz-progress-fill {
  height: 100%;
  background: var(--primary);
  transition: width 0.3s ease;
}

/* ─── Question Card ─────────────────────────────────────────────────────────── */

.quiz-container { padding-top: 24px; padding-bottom: 80px; }

.question-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: var(--shadow-md);
  margin-bottom: 20px;
}

.question-meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.badge {
  display: inline-block;
  padding: 2px 10px;
  font-size: 0.7rem;
  font-weight: 600;
  border-radius: 99px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.badge-category { background: var(--info-light); color: var(--info); }
.badge-section { background: var(--warning-light); color: #856404; }
.badge-type { background: var(--bg-hover); color: var(--text-muted); }

[data-theme="dark"] .badge-section { color: var(--warning); }

.question-text {
  font-size: 1.05rem;
  line-height: 1.7;
  margin-bottom: 24px;
}

.question-text p { margin-bottom: 12px; }
.question-text img { border-radius: var(--radius-sm); margin: 8px 0; }
.question-text code {
  background: var(--bg-hover);
  padding: 2px 6px;
  border-radius: var(--radius-xs);
  font-family: var(--font-mono);
  font-size: 0.9em;
}
.question-text pre {
  background: var(--bg-hover);
  padding: 12px;
  border-radius: var(--radius-sm);
  overflow-x: auto;
  margin: 8px 0;
}
.question-text ul, .question-text ol {
  margin: 8px 0 8px 24px;
}

/* ─── Answers ───────────────────────────────────────────────────────────────── */

.answers-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.answer-btn {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  background: var(--bg);
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition);
  text-align: left;
  font-family: var(--font);
  font-size: 0.95rem;
  line-height: 1.5;
  width: 100%;
  color: var(--text);
}

.answer-btn:hover:not(.answer-btn--disabled) {
  border-color: var(--primary);
  background: var(--primary-light);
}

.answer-btn--selected {
  border-color: var(--primary);
  background: var(--primary-light);
}

.answer-btn--correct {
  border-color: var(--success) !important;
  background: var(--success-light) !important;
}

.answer-btn--wrong {
  border-color: var(--danger) !important;
  background: var(--danger-light) !important;
}

.answer-btn--missed {
  border-color: #f28c28 !important;
  background: rgba(242, 140, 40, 0.10) !important;
}

.answer-btn--disabled {
  cursor: default;
  opacity: 0.88;
}

.answer-btn--disabled:not(.answer-btn--correct):not(.answer-btn--wrong):not(.answer-btn--missed):not(.answer-btn--selected) {
  opacity: 0.5;
}

.answer-letter {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--bg-hover);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-top: 1px;
}

.answer-btn--selected .answer-letter {
  background: var(--primary);
  color: #000;
}

.answer-btn--correct .answer-letter {
  background: var(--success);
  color: #fff;
}

.answer-btn--wrong .answer-letter {
  background: var(--danger);
  color: #fff;
}

.answer-btn--missed .answer-letter {
  background: #f28c28;
  color: #fff;
}

.answer-content { flex: 1; }
.answer-content p { margin-bottom: 4px; }
.answer-content p:last-child { margin-bottom: 0; }

/* diff highlights for differing words across answers */
.diff-hl {
  background: rgba(255, 193, 7, 0.25);
  color: inherit;
  border-radius: 3px;
  padding: 1px 2px;
  font-weight: 600;
}
.answer-btn--correct .diff-hl {
  background: rgba(40, 167, 69, 0.22);
}
.answer-btn--wrong .diff-hl {
  background: rgba(220, 53, 69, 0.22);
}
.answer-btn--missed .diff-hl {
  background: rgba(242, 140, 40, 0.22);
}
[data-theme="dark"] .diff-hl {
  background: rgba(255, 193, 7, 0.30);
}
[data-theme="dark"] .answer-btn--correct .diff-hl {
  background: rgba(40, 167, 69, 0.30);
}
[data-theme="dark"] .answer-btn--wrong .diff-hl {
  background: rgba(220, 53, 69, 0.30);
}
[data-theme="dark"] .answer-btn--missed .diff-hl {
  background: rgba(242, 140, 40, 0.30);
}

.answer-indicator {
  flex-shrink: 0;
  font-size: 1.1rem;
  margin-top: 2px;
}

/* ─── Confidence Row ────────────────────────────────────────────────────────── */

.confidence-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 10px 0;
}

.confidence-label {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-right: 4px;
}

.confidence-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid var(--border);
  background: var(--bg-card);
  color: var(--text-muted);
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.15s ease;
}

.confidence-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.confidence-btn--selected {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* ─── Explanation ───────────────────────────────────────────────────────────── */

.explanation {
  margin-top: 20px;
  padding: 20px;
  background: var(--info-light);
  border-radius: var(--radius-sm);
  border-left: 4px solid var(--info);
}

[data-theme="dark"] .explanation {
  background: var(--bg-hover);
}

.explanation-title {
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
  color: var(--info);
}

.explanation-text {
  font-size: 0.93rem;
  line-height: 1.7;
}

.explanation-text p { margin-bottom: 8px; }
.explanation-text p:last-child { margin-bottom: 0; }
.explanation-text a { word-break: break-all; }

.feedbacks {
  margin-top: 12px;
  font-size: 0.87rem;
}

.feedback-item {
  padding: 8px 0;
  border-top: 1px solid var(--border-light);
}

.feedback-item strong { color: var(--text); }

/* ─── Quiz Nav ──────────────────────────────────────────────────────────────── */

.quiz-nav {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-bottom: 24px;
}

.question-nav-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  padding: 16px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.nav-dot {
  width: 36px;
  height: 36px;
  border: 2px solid var(--border);
  border-radius: var(--radius-xs);
  background: var(--bg);
  cursor: pointer;
  font-size: 0.72rem;
  font-weight: 600;
  font-family: var(--font);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition);
  color: var(--text-muted);
}

.nav-dot:hover { border-color: var(--primary); }
.nav-dot--current { border-color: var(--primary); background: var(--primary-light); color: var(--text); font-weight: 800; }
.nav-dot--answered { background: var(--bg-active); color: var(--text); }
.nav-dot--correct { background: var(--success-light); border-color: var(--success); color: var(--success); }
.nav-dot--wrong { background: var(--danger-light); border-color: var(--danger); color: var(--danger); }

/* ─── Results ───────────────────────────────────────────────────────────────── */

#screen-results .container { padding-top: 40px; padding-bottom: 40px; }

.results-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 40px;
  text-align: center;
  box-shadow: var(--shadow-lg);
}

.results-icon { font-size: 3rem; margin-bottom: 8px; }

.results-title {
  font-size: 1.5rem;
  font-weight: 800;
  margin-bottom: 24px;
}

.results-score { margin-bottom: 24px; }

.score-circle {
  position: relative;
  width: 140px;
  height: 140px;
  margin: 0 auto;
}

.score-ring {
  transform: rotate(-90deg);
  width: 140px;
  height: 140px;
}

.score-ring-bg { stroke: var(--border); }

.score-ring-fg {
  stroke: var(--success);
  stroke-dasharray: 339.292;
  stroke-dashoffset: 339.292;
  stroke-linecap: round;
  transition: stroke-dashoffset 1s ease;
}

.score-value {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 2rem;
  font-weight: 800;
}

.results-stats {
  display: flex;
  justify-content: center;
  gap: 32px;
  margin-bottom: 20px;
}

.stat { text-align: center; }

.stat-num {
  display: block;
  font-size: 1.4rem;
  font-weight: 800;
}

.stat-label {
  font-size: 0.75rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.results-pass {
  font-size: 1rem;
  font-weight: 700;
  padding: 8px 20px;
  border-radius: var(--radius-sm);
  display: inline-block;
  margin-bottom: 24px;
}

.results-pass--pass { background: var(--success-light); color: var(--success); }
.results-pass--fail { background: var(--danger-light); color: var(--danger); }

.results-breakdown {
  text-align: left;
  margin: 24px 0;
}

.breakdown-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-light);
  font-size: 0.87rem;
}

.breakdown-label { flex: 1; }

.breakdown-bar {
  width: 120px;
  height: 6px;
  background: var(--border);
  border-radius: 3px;
  overflow: hidden;
}

.breakdown-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.5s ease;
}

.breakdown-score {
  width: 48px;
  text-align: right;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ─── Bonus Tags ────────────────────────────────────────────────────────────── */

.bonus-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin: 16px 0;
}

.bonus-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 0.82rem;
  font-weight: 600;
  animation: slideInRight 0.4s ease both;
}

.bonus-tag--speed { background: #e3f2fd; color: #1565c0; }
.bonus-tag--streak { background: #e8f5e9; color: #2e7d32; }
.bonus-tag--pb { background: #f3e5f5; color: #7b1fa2; }

[data-theme="dark"] .bonus-tag--speed { background: #1a2740; color: #64b5f6; }
[data-theme="dark"] .bonus-tag--streak { background: #1a2e1a; color: #81c784; }
[data-theme="dark"] .bonus-tag--pb { background: #2a1a2e; color: #ce93d8; }

@keyframes slideInRight {
  from { opacity: 0; transform: translateX(20px); }
  to { opacity: 1; transform: translateX(0); }
}

.results-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ─── Progress Screen ───────────────────────────────────────────────────────── */

#screen-progress .container { padding-top: 32px; padding-bottom: 40px; }
#screen-progress .container > div,
#screen-progress .container > .sq-heatmap-section {
  margin-top: 24px;
}
#screen-progress .container > div:first-of-type,
#screen-progress .container > h2 + div {
  margin-top: 0;
}

.progress-overview {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  margin-bottom: 32px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  text-align: center;
}

.progress-stat-num {
  font-size: 1.6rem;
  font-weight: 800;
  display: block;
}

.progress-stat-label {
  font-size: 0.75rem;
  color: var(--text-muted);
  text-transform: uppercase;
}

/* 0126: Mastery Projection Card */
.projection-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  padding: 20px 24px;
  margin-bottom: 32px;
}

.projection-card h3 {
  margin: 0 0 12px;
  font-size: 1rem;
  font-weight: 700;
}

.projection-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px 16px;
}

.projection-grid dt {
  font-size: 0.72rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.projection-grid dd {
  margin: 2px 0 8px;
  font-size: 1.05rem;
  font-weight: 700;
}

.projection-placeholder {
  color: var(--text-muted);
  font-size: 0.9rem;
  font-style: italic;
}

.projection-complete {
  color: var(--success);
  font-weight: 700;
  font-size: 1rem;
}

.progress-categories {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 32px;
}

.progress-cat-row {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.progress-cat-name { flex: 1; font-weight: 600; font-size: 0.9rem; }

.progress-cat-bar {
  width: 100px;
  height: 6px;
  background: var(--border);
  border-radius: 3px;
  overflow: hidden;
}

.progress-cat-bar-fill {
  height: 100%;
  background: var(--success);
  border-radius: 3px;
}

.progress-cat-pct {
  width: 40px;
  text-align: right;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

.progress-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
}

/* ─── Action Dropdowns (0112, 0115) ─────────────────────────────────────────── */

.action-dropdown-wrap {
  position: relative;
}

.action-dropdown {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,.3);
  min-width: 200px;
  z-index: 100;
  padding: 4px 0;
  animation: action-dd-in .12s ease-out;
}
@keyframes action-dd-in {
  from { opacity: 0; transform: translateX(-50%) translateY(4px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.action-dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 16px;
  background: none;
  border: none;
  color: var(--text);
  font-size: 0.875rem;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s;
}
.action-dropdown-item:hover {
  background: var(--bg-hover);
}
.action-dropdown-item .icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* ─── Video Training Action Card (0098) ─────────────────────────────────────── */

.action-card--video {
  --action-accent: #7c3aed;
  --action-bg: color-mix(in srgb, #7c3aed 10%, var(--bg-card));
  --action-border: color-mix(in srgb, #7c3aed 26%, var(--border));
  --action-icon-bg: color-mix(in srgb, #7c3aed 18%, transparent);
  --action-icon-color: #6d28d9;
}

/* ─── Video Training Screen (0098) ──────────────────────────────────────────── */

.vt-header {
  text-align: center;
  margin-bottom: 24px;
  padding-top: 16px;
}

.vt-progress-info {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-bottom: 8px;
}

.vt-topic-counter {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.vt-phase-label {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  padding: 2px 10px;
  border-radius: 999px;
}

.vt-topic-name {
  font-size: 1.3rem;
  font-weight: 800;
  margin: 0;
}

/* Empty state */
.vt-empty {
  text-align: center;
  padding: 60px 20px;
}

.vt-empty-icon {
  font-size: 3rem;
  margin-bottom: 16px;
  color: var(--text-secondary);
}

.vt-empty p {
  color: var(--text-secondary);
  margin-bottom: 24px;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}

/* Video phase */
.vt-video-phase {
  max-width: 800px;
  margin: 0 auto;
}

.vt-video-info {
  margin-bottom: 12px;
}

.vt-lecture-name {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.vt-video-wrapper {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: #000;
  margin-bottom: 16px;
}

.vt-video-player {
  width: 100%;
  display: block;
  max-height: 480px;
}

.vt-video-playlist {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.vt-playlist-btn {
  font-size: 0.8rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 240px;
  background: var(--bg-hover);
  color: var(--text);
  border: 1px solid var(--border);
}
.vt-playlist-btn:hover {
  background: var(--bg-active);
}

.vt-playlist-btn--active {
  background: var(--primary);
  color: #000;
  border-color: var(--primary);
}

.vt-video-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  padding: 8px 0;
}

/* Quiz phase */
.vt-quiz-phase {
  max-width: 720px;
  margin: 0 auto;
}

.vt-quiz-progress {
  text-align: center;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 16px;
}

.vt-quiz-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 16px;
  flex-wrap: wrap;
}

/* Topic transition */
.vt-transition {
  text-align: center;
  padding: 60px 20px;
}

.vt-transition-icon {
  font-size: 3rem;
  margin-bottom: 16px;
  color: var(--success);
}

.vt-transition-title {
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 12px;
}

.vt-transition-score {
  font-size: 1.1rem;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

.vt-transition-next {
  font-size: 0.95rem;
  color: var(--text-muted);
  margin-bottom: 24px;
}

/* Session summary */
.vt-summary {
  text-align: center;
  padding: 40px 20px;
}

.vt-summary-icon {
  font-size: 3rem;
  margin-bottom: 16px;
  color: var(--warning);
}

.vt-summary-title {
  font-size: 1.5rem;
  font-weight: 800;
  margin-bottom: 24px;
}

.vt-summary-stats {
  display: flex;
  justify-content: center;
  gap: 32px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}

.vt-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.vt-stat-num {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--primary);
}

.vt-stat-label {
  font-size: 0.8rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.vt-summary-breakdown {
  max-width: 500px;
  margin: 0 auto 24px;
  text-align: left;
}

.vt-breakdown-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-secondary);
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.vt-breakdown-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem;
  padding: 10px 14px;
  border-radius: var(--radius);
  margin-bottom: 6px;
  background: var(--bg-card);
  border: 1px solid var(--border);
}

.vt-breakdown-name {
  font-weight: 600;
  font-size: 0.9rem;
  margin-right: auto;
}

.vt-breakdown-score {
  font-size: 0.85rem;
  font-weight: 600;
}

.vt-row--good .vt-breakdown-score { color: var(--success); }
.vt-row--ok .vt-breakdown-score { color: var(--warning); }
.vt-row--weak .vt-breakdown-score { color: var(--danger); }

/* ─── 0102: Service-Level Bayesian VT Enhancements ─────────────────────────── */

/* Domain header in VT screen */
.vt-domain-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0;
  margin-top: 0.25rem;
  font-size: 0.85rem;
  color: var(--text-muted);
}
.vt-domain-name {
  font-weight: 600;
  color: var(--text);
}
.vt-service-status {
  padding: 0.15rem 0.5rem;
  border-radius: 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
}
.vt-status--critical {
  background: color-mix(in srgb, var(--danger) 15%, transparent);
  color: var(--danger);
}
.vt-status--moderate {
  background: color-mix(in srgb, var(--warning) 15%, transparent);
  color: var(--warning);
}
.vt-status--mastered {
  background: color-mix(in srgb, var(--success) 15%, transparent);
  color: var(--success);
}

/* Tier source badges */
.vt-tier-badge {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.15rem 0.5rem;
  border-radius: 0.75rem;
  margin-left: 0.5rem;
}
.vt-badge-failed {
  background: color-mix(in srgb, var(--danger) 15%, transparent);
  color: var(--danger);
}
.vt-badge-related {
  background: color-mix(in srgb, var(--warning) 15%, transparent);
  color: var(--warning);
}
.vt-badge-explore {
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  color: var(--accent);
}
/* 0142: Pretest badge */
.vt-badge-pretest {
  background: color-mix(in srgb, var(--info, #17a2b8) 15%, transparent);
  color: var(--info, #17a2b8);
}
/* 0142: Pretest banner */
.vt-pretest-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  background: color-mix(in srgb, var(--info, #17a2b8) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--info, #17a2b8) 25%, transparent);
  margin-bottom: 0.75rem;
  font-size: 0.9rem;
}
.vt-pretest-banner-text {
  flex: 1;
}
/* 0142: Pretest improvement in transition */
.vt-pretest-improvement {
  margin-top: 0.5rem;
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* Transition Bayesian mastery */
.vt-transition-bayesian {
  margin: 0.75rem 0;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.vt-mastery-label {
  color: var(--text-muted);
  font-weight: 500;
}
.vt-mastery-before {
  color: var(--text-muted);
  text-decoration: line-through;
}
.vt-mastery-after {
  font-weight: 700;
  color: var(--text);
}
.vt-improvement--up { color: var(--success); font-weight: 700; }
.vt-improvement--down { color: var(--danger); font-weight: 700; }
.vt-status-badge {
  padding: 0.1rem 0.4rem;
  border-radius: 0.5rem;
  font-size: 0.7rem;
  font-weight: 600;
}

/* Summary: Tier breakdown grid */
.vt-summary-tier-breakdown {
  margin: 1rem 0;
}
.vt-tier-grid {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}
.vt-tier-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: 0.5rem 1rem;
  background: var(--card-bg);
  border-radius: 0.5rem;
  border: 1px solid var(--border);
  min-width: 80px;
}
.vt-tier-score {
  font-size: 0.85rem;
  font-weight: 600;
}

/* Summary: Domain group headers */
.vt-domain-group-header {
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--accent);
  padding: 0.5rem 0 0.25rem;
  margin-top: 0.5rem;
  border-bottom: 1px solid var(--border);
}

/* Summary: Bayesian delta in breakdown row */
.vt-breakdown-bayesian {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-left: auto;
  margin-right: 0.5rem;
}

/* Summary: Tier breakdown in row */
.vt-breakdown-tiers {
  font-size: 0.7rem;
  color: var(--text-muted);
  margin-left: 0.5rem;
}

/* ─── 0103: Smart Quiz ─────────────────────────────────────────────────────── */

/* Home — Smart Quiz action card */
.action-card--smart {
  --action-gradient-1: #6c5ce7;
  --action-gradient-2: #a29bfe;
  background: linear-gradient(135deg, var(--action-gradient-1) 0%, var(--action-gradient-2) 100%);
  color: #fff;
  border-color: var(--action-gradient-1);
}
.action-card--smart:hover { border-color: #5b4bd5; }
.action-card--smart .action-desc { color: rgba(255,255,255,0.85); }

/* Config Screen */
.sq-config-section {
  margin-bottom: 1.25rem;
}
.sq-config-label {
  font-weight: 600;
  font-size: 0.9rem;
  display: block;
  margin-bottom: 0.5rem;
}
.sq-strategy-group {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.sq-strategy-btn {
  padding: 0.5rem 1rem;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 500;
  transition: border-color 0.2s, background 0.2s;
}
.sq-strategy-btn:hover {
  border-color: var(--accent);
}
.sq-strategy-btn--active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  font-weight: 700;
}

/* Quiz Config Icon Colors (0107) */
.sq-btn-icon { vertical-align: -0.15em; margin-right: 0.25rem; flex-shrink: 0; }
.sq-icon--accent { color: var(--accent); }
.sq-icon--danger { color: var(--danger); }
.sq-icon--warning { color: var(--warning); }
.sq-icon--info { color: var(--info); }

.sq-count-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.sq-slider {
  flex: 1;
  accent-color: var(--accent);
}
.sq-toggles-row {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.sq-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  cursor: pointer;
}
.sq-preset-row {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.sq-preset-btn {
  padding: 0.4rem 0.8rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
  cursor: pointer;
  font-size: 0.8rem;
  transition: border-color 0.2s;
}
.sq-preset-btn:hover {
  border-color: var(--accent);
}

/* Domain/Service List */
.sq-domain-list {
  max-height: 400px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
}
.sq-domain-item {
  border-bottom: 1px solid var(--border);
}
.sq-domain-item:last-child { border-bottom: none; }
.sq-domain-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.75rem;
  cursor: pointer;
  user-select: none;
  font-weight: 600;
  font-size: 0.85rem;
}
.sq-domain-header:hover {
  background: var(--bg-hover);
}
.sq-domain-toggle {
  font-size: 0.75rem;
  transition: transform 0.2s;
}
.sq-domain-toggle.sq-expanded {
  transform: rotate(90deg);
}
.sq-domain-check {
  margin-right: 0.25rem;
}
.sq-domain-stats {
  margin-left: auto;
  font-size: 0.75rem;
  color: var(--text-muted);
  font-weight: 400;
}
.sq-domain-mean {
  font-weight: 600;
  margin-left: 0.5rem;
}
.sq-service-list {
  padding-left: 1.5rem;
  display: none;
}
.sq-service-list.sq-expanded { display: block; }
.sq-service-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.5rem;
  font-size: 0.8rem;
}
.sq-service-item:hover {
  background: var(--bg-hover);
}
.sq-svc-status {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.sq-svc-status--critical { background: var(--danger); }
.sq-svc-status--moderate { background: var(--warning); }
.sq-svc-status--mastered { background: var(--success); }
.sq-svc-status--unseen { background: var(--text-muted); opacity: 0.4; }
.sq-svc-attempts {
  margin-left: auto;
  font-size: 0.7rem;
  color: var(--text-muted);
}

/* Empty warning */
.sq-empty-warning {
  text-align: center;
  padding: 1.5rem;
  background: color-mix(in srgb, var(--warning) 8%, transparent);
  border: 1px solid var(--warning);
  border-radius: var(--radius);
  margin-bottom: 1rem;
}

/* Config actions */
.sq-config-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin-top: 1.5rem;
}
.btn-lg {
  padding: 0.75rem 2rem;
  font-size: 1.05rem;
}

/* In-quiz: domain colour strip */
.sq-domain-strip {
  height: 4px;
  border-radius: 2px;
  margin-bottom: 0.5rem;
  background: var(--accent);
}

/* In-quiz: service badge with mastery dot */
.sq-service-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: var(--bg-hover);
  color: var(--text);
  font-size: 0.75rem;
}
.sq-mastery-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.sq-mastery-dot--critical { background: var(--danger); }
.sq-mastery-dot--moderate { background: var(--warning); }
.sq-mastery-dot--mastered { background: var(--success); }
.sq-mastery-dot--unseen { background: var(--text-muted); opacity: 0.4; }

/* In-quiz: tier badge */
.sq-tier-badge {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.1rem 0.5rem;
  border-radius: 0.75rem;
}
.sq-tier--failed { background: color-mix(in srgb, var(--danger) 15%, transparent); color: var(--danger); }
.sq-tier--low-sample { background: color-mix(in srgb, var(--warning) 15%, transparent); color: var(--warning); }
.sq-tier--unseen { background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent); }

/* Adaptation indicator */
.sq-adapting {
  text-align: center;
  font-size: 0.8rem;
  color: var(--accent);
  padding: 0.25rem 0;
  animation: sq-pulse 1.5s ease-in-out;
}
@keyframes sq-pulse {
  0%, 100% { opacity: 0; }
  30%, 70% { opacity: 1; }
}

/* Results: Smart Quiz service breakdown */
.sq-results {
  text-align: left;
  max-width: 560px;
  margin: 1.5rem auto;
}
.sq-results-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}
.sq-summary-stat {
  padding: 0.5rem 1rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 0.85rem;
}
.sq-summary-stat strong {
  display: block;
  font-size: 1.1rem;
}
.sq-domain-group {
  margin-bottom: 1rem;
}
.sq-domain-group-title {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--accent);
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 0.5rem;
}
.sq-svc-result-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0.5rem 0.75rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 0.4rem;
  font-size: 0.82rem;
}
.sq-svc-result-name {
  font-weight: 600;
  min-width: 120px;
}
.sq-svc-result-before {
  color: var(--text-muted);
}
.sq-svc-result-after {
  font-weight: 700;
}
.sq-svc-result-delta {
  font-weight: 700;
  font-size: 0.8rem;
}
.sq-delta--up { color: var(--success); }
.sq-delta--down { color: var(--danger); }
.sq-svc-result-shift {
  font-size: 0.75rem;
  padding: 0.1rem 0.4rem;
  border-radius: 0.5rem;
  background: color-mix(in srgb, var(--success) 15%, transparent);
  color: var(--success);
  font-weight: 600;
}
.sq-svc-result-ci {
  font-size: 0.72rem;
  color: var(--text-muted);
}
.sq-svc-result-score {
  margin-left: auto;
  font-weight: 600;
}
.sq-results-recommendation {
  margin-top: 1rem;
  padding: 1rem;
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
}
.sq-rec-title {
  font-weight: 700;
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
}
.sq-rec-item {
  font-size: 0.85rem;
  margin-bottom: 0.25rem;
}

/* Progress: Service Mastery Heatmap */
.sq-heatmap-section {
  margin-top: 1.5rem;
}
.sq-heatmap {
  overflow-x: auto;
  margin-bottom: 1rem;
}
.sq-heatmap-grid {
  display: grid;
  gap: 2px;
  font-size: 0.65rem;
}
.sq-heatmap-domain {
  font-weight: 600;
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
  white-space: nowrap;
  display: flex;
  align-items: center;
  width: 220px;
  min-width: 220px;
  flex-shrink: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sq-heatmap-cell {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sq-heatmap-cell--critical { background: color-mix(in srgb, var(--danger) 60%, var(--bg-card)); }
.sq-heatmap-cell--moderate { background: color-mix(in srgb, var(--warning) 60%, var(--bg-card)); }
.sq-heatmap-cell--mastered { background: color-mix(in srgb, var(--success) 60%, var(--bg-card)); }
.sq-heatmap-cell--unseen { background: var(--bg-hover); }
.sq-heatmap-cell[title]:hover {
  outline: 2px solid var(--accent);
  z-index: 1;
}
.sq-heatmap-domain-row {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-bottom: 2px;
}

/* Heatmap Interactive (0116) */
.sq-heatmap-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
  font-size: 0.78rem;
  color: var(--text-secondary);
}
.sq-heatmap-legend-item {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}
.sq-heatmap-dot {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  flex-shrink: 0;
}
.sq-heatmap-dot--critical { background: color-mix(in srgb, var(--danger) 60%, var(--bg-card)); }
.sq-heatmap-dot--moderate { background: color-mix(in srgb, var(--warning) 60%, var(--bg-card)); }
.sq-heatmap-dot--mastered { background: color-mix(in srgb, var(--success) 60%, var(--bg-card)); }
.sq-heatmap-dot--unseen   { background: var(--bg-hover); }
.sq-heatmap-domain--click {
  cursor: pointer;
  border-radius: 6px;
  transition: background 0.15s, color 0.15s;
}
.sq-heatmap-domain--click:hover {
  background: var(--bg-hover);
  color: var(--accent);
}
.sq-heatmap-cell--active {
  outline: 2px solid var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 20%, transparent);
  z-index: 2;
}

/* Heatmap Detail Panel — 117: inline after the clicked row */
.sq-heatmap-detail {
  margin: 0.5rem 0;
  animation: sq-detail-in 0.25s ease-out;
}
.sq-heatmap-detail.hidden { display: none; }
@keyframes sq-detail-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.sq-detail-card {
  padding: 1rem 1.25rem;
  border-radius: 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 4px solid var(--text-tertiary);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.sq-detail--critical { border-left-color: var(--danger); }
.sq-detail--moderate { border-left-color: var(--warning); }
.sq-detail--mastered { border-left-color: var(--success); }
.sq-detail--unseen   { border-left-color: var(--text-tertiary); }
.sq-detail-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}
.sq-detail-title {
  font-weight: 700;
  font-size: 1rem;
  color: var(--text-primary);
  line-height: 1.3;
}
.sq-detail-subtitle {
  font-size: 0.78rem;
  color: var(--text-secondary);
  margin-top: 0.15rem;
}
.sq-detail-close {
  background: none;
  border: none;
  color: var(--text-tertiary);
  font-size: 1.4rem;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  flex-shrink: 0;
  transition: color 0.15s;
}
.sq-detail-close:hover { color: var(--text-primary); }
.sq-detail-score {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
}
.sq-detail-bar {
  flex: 1;
  height: 8px;
  background: var(--bg-hover);
  border-radius: 4px;
  overflow: hidden;
  max-width: 200px;
}
.sq-detail-bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.3s ease;
}
.sq-detail-bar--critical { background: var(--danger); }
.sq-detail-bar--moderate { background: var(--warning); }
.sq-detail-bar--mastered { background: var(--success); }
.sq-detail-bar--unseen   { background: var(--text-tertiary); }
.sq-detail-pct {
  font-weight: 700;
  font-size: 0.95rem;
  min-width: 38px;
  color: var(--text-primary);
}
.sq-detail-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.55rem;
  border-radius: 99px;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.sq-detail-badge--critical { background: color-mix(in srgb, var(--danger) 14%, var(--bg-card)); color: var(--danger); }
.sq-detail-badge--moderate { background: color-mix(in srgb, var(--warning) 14%, var(--bg-card)); color: color-mix(in srgb, var(--warning) 85%, #000); }
.sq-detail-badge--mastered { background: color-mix(in srgb, var(--success) 14%, var(--bg-card)); color: var(--success); }
.sq-detail-badge--unseen   { background: var(--bg-hover); color: var(--text-tertiary); }
.sq-detail-meta {
  font-size: 0.78rem;
  color: var(--text-secondary);
  margin-bottom: 0.75rem;
}
.sq-detail-breakdown {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.75rem;
}
.sq-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.sq-detail-actions .btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
@media (max-width: 600px) {
  .sq-detail-card { padding: 0.85rem 1rem; }
  .sq-detail-bar { max-width: 140px; }
}

/* 120 — Heatmap detail: video list (file:// only) */
.sq-detail-videos {
  margin-top: 0.75rem;
  border-top: 1px solid var(--border);
  padding-top: 0.6rem;
}
.sq-detail-videos-title {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-weight: 600;
  font-size: 0.82rem;
  color: var(--text-secondary);
  margin-bottom: 0.4rem;
}
.sq-detail-video-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 180px;
  overflow-y: auto;
}
.sq-detail-video-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.5rem;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.78rem;
  color: var(--text-primary);
  transition: background 0.15s;
}
.sq-detail-video-item:hover {
  background: var(--bg-hover);
}
.sq-detail-video-item .icon {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  color: var(--accent);
}
.sq-detail-video-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sq-detail-video-time {
  font-size: 0.72rem;
  color: var(--text-tertiary);
  flex-shrink: 0;
}

/* ─── 0105: Video Catalog ──────────────────────────────────────────────────── */

/* Home — Video Catalog action card */
.action-card--catalog {
  --action-accent: #0ea5e9;
  --action-bg: color-mix(in srgb, #0ea5e9 10%, var(--bg-card));
  --action-border: color-mix(in srgb, #0ea5e9 26%, var(--border));
  --action-icon-bg: color-mix(in srgb, #0ea5e9 18%, transparent);
  --action-icon-color: #0284c7;
}

/* 0125: Flashcard Training action card */
.action-card--flashcard {
  --action-accent: #8b5cf6;
  --action-bg: color-mix(in srgb, #8b5cf6 10%, var(--bg-card));
  --action-border: color-mix(in srgb, #8b5cf6 26%, var(--border));
  --action-icon-bg: color-mix(in srgb, #8b5cf6 18%, transparent);
  --action-icon-color: #7c3aed;
}

/* Overview */
.vc-overview {
  margin-bottom: 1.5rem;
}
.vc-stats {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
  font-size: 0.85rem;
  color: var(--text-muted);
}
.vc-stat-completed { color: var(--success); font-weight: 600; }
.vc-stat-partial { color: var(--warning); font-weight: 600; }

/* Stacked progress bar */
.vc-progress-bar {
  height: 10px;
  border-radius: 5px;
  background: var(--bg-hover);
  overflow: hidden;
  display: flex;
}
.vc-bar-completed { background: var(--success); }
.vc-bar-partial { background: var(--warning); }

/* Completion prediction */
.vc-prediction {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-top: 0.5rem;
}

/* Section accordions */
.vc-section {
  margin-bottom: 0.75rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-card);
}
.vc-section-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  cursor: pointer;
  user-select: none;
  font-weight: 600;
  font-size: 0.9rem;
  background: var(--bg-hover);
  border: none;
  width: 100%;
  text-align: left;
  color: var(--text-primary);
}
.vc-section-header:hover { background: color-mix(in srgb, var(--accent) 8%, var(--bg-hover)); }
.vc-section-chevron {
  transition: transform 0.2s;
  flex-shrink: 0;
}
.vc-section.vc-expanded .vc-section-chevron { transform: rotate(90deg); }
.vc-section-title { flex: 1; }
.vc-section-mastery {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
  flex-shrink: 0;
}
.vc-section-mastery--low {
  background: color-mix(in srgb, var(--danger) 16%, transparent);
  color: var(--danger);
}
.vc-section-mastery--mid {
  background: color-mix(in srgb, var(--warning) 16%, transparent);
  color: var(--warning);
}
.vc-section-mastery--high {
  background: color-mix(in srgb, var(--success) 16%, transparent);
  color: var(--success);
}
.vc-section-mastery--none {
  background: var(--bg-hover);
  color: var(--text-muted);
}
.vc-section-count {
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--text-muted);
  white-space: nowrap;
  min-width: 9em;
  text-align: right;
  flex-shrink: 0;
}
/* 0164: Mini progress bar per section header */
.vc-section-bar {
  display: flex;
  width: 80px;
  height: 6px;
  border-radius: 3px;
  background: var(--bg-hover);
  overflow: hidden;
  flex-shrink: 0;
}
.vc-sbar-completed { background: var(--success); }
.vc-sbar-partial { background: var(--warning); }
.vc-section-body {
  display: none;
  padding: 0;
}
.vc-section.vc-expanded .vc-section-body { display: block; }

/* Lecture rows */
.vc-lecture {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 1rem;
  border-top: 1px solid var(--border);
  font-size: 0.85rem;
}
.vc-lecture:hover { background: var(--bg-hover); }
.vc-lecture-num {
  width: 2rem;
  flex-shrink: 0;
  font-weight: 600;
  color: var(--text-muted);
  text-align: right;
}
.vc-lecture-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vc-lecture-badge {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  white-space: nowrap;
  flex-shrink: 0;
}
.vc-badge-completed { background: color-mix(in srgb, var(--success) 20%, var(--bg-card)); color: var(--success); }
.vc-badge-partial { background: color-mix(in srgb, var(--warning) 20%, var(--bg-card)); color: var(--warning); }
.vc-badge-unwatched { background: var(--bg-hover); color: var(--text-muted); }
.vc-lecture-play {
  flex-shrink: 0;
  background: none;
  border: 1px solid var(--border);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--accent);
  transition: background 0.15s;
}
.vc-lecture-play:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }

/* 0123: Duration labels */
.vc-lecture-duration {
  flex-shrink: 0;
  font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
  font-size: 0.78rem;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}
.vc-section-duration {
  font-weight: 500;
  font-size: 0.75rem;
  color: var(--text-muted);
  white-space: nowrap;
  font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
  min-width: 5.2em;
  text-align: right;
  flex-shrink: 0;
}
.vc-stat-duration {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-weight: 600;
  color: var(--accent);
  font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
}

/* 0124: Video Catalog Quiz buttons */
.vc-lecture-quiz {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: 6px;
  padding: 4px 8px;
  cursor: pointer;
  font-size: 0.72rem;
  font-weight: 600;
  font-family: var(--font);
  transition: background 0.2s, transform 0.15s, border-color 0.2s;
  margin-left: 2px;
}
.vc-lecture-quiz:hover {
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  border-color: var(--accent);
  transform: scale(1.05);
}
.vc-quiz-count {
  font-size: 0.68rem;
  background: var(--accent);
  color: var(--bg-card);
  border-radius: 50%;
  min-width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  line-height: 1;
}
.vc-section-quiz {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--accent);
  white-space: nowrap;
  min-width: 2.8em;
  flex-shrink: 0;
  background: none;
  border: 1px solid var(--accent);
  border-radius: 4px;
  padding: 0.15rem 0.45rem;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  line-height: 1;
}
.vc-section-quiz:hover {
  background: var(--accent);
  color: #fff;
}
.vc-section-quiz:active {
  opacity: 0.8;
}

.vc-search {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 12px 0;
}
.vc-search-input-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-card);
  color: var(--text-muted);
}
.vc-search-input-wrap:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--accent);
}
.vc-search input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
}
.vc-search input::placeholder {
  color: var(--text-muted);
}
.vc-search-count {
  flex: 0 0 auto;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
}

/* 0169: Sort bar and priority badges */
.vc-sort-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0;
}
.vc-sort-label {
  font-size: 0.82rem;
  color: var(--text-secondary);
  font-weight: 600;
}
.vc-sort-btn {
  font-size: 0.8rem;
  padding: 4px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text);
  cursor: pointer;
  transition: all 0.15s;
}
.vc-sort-btn:hover { background: var(--bg-hover); }
.vc-sort-btn--active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.vc-priority-badge {
  font-size: 0.7rem;
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 600;
  margin-left: 8px;
  flex-shrink: 0;
}
.vc-priority--critical { background: color-mix(in srgb, var(--danger) 15%, transparent); color: var(--danger); }
.vc-priority--review { background: color-mix(in srgb, var(--warning) 15%, transparent); color: var(--warning); }
.vc-priority--ok { background: color-mix(in srgb, var(--success) 15%, transparent); color: var(--success); }

/* ─── Responsive ────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  /* 87.1 — Show labels below header action icons on mobile */
  .btn-label { display: block; }

  .header-actions .btn {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    min-height: 48px;
    gap: 2px;
  }

  /* 87.3 — Hide back label text on mobile (arrow only) */
  .header-back-label { display: none; }

  /* 97.2 — Extend header background above the fold to prevent gap on mobile */
  .header::before {
    content: '';
    position: absolute;
    top: -100px;
    left: 0;
    right: 0;
    height: 100px;
    background: inherit;
    z-index: -1;
  }

  /* 92.1 — Reduce title font-size on mobile so it fits comfortably */
  .logo { font-size: 0.9rem; gap: 6px; }
  .logo-icon { font-size: 1.1rem; }

}

@media (max-width: 375px) {
  /* 92.2 — On very narrow screens hide 'Quiz Trainer' sub-text */
  .logo-sub { display: none; }
}

@media (max-width: 640px) {
  .hero h1 { font-size: 1.4rem; }
  .hero { padding: 32px 0 24px; }

  .quick-actions {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .action-card {
    padding: 20px 16px;
    min-height: 140px;
  }

  .quiz-row-title {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }

  .quiz-row-meta {
    flex-wrap: wrap;
    row-gap: 2px;
  }

  .vc-search {
    align-items: stretch;
    flex-direction: column;
  }

  .vc-search-count {
    white-space: normal;
  }

  .question-card { padding: 20px 16px; }

  .quiz-nav { flex-direction: column; }
  .quiz-nav .btn { width: 100%; }

  .results-stats { gap: 16px; }
  .results-card { padding: 24px 16px; }

  .progress-overview {
    grid-template-columns: repeat(2, 1fr);
  }

  .projection-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .quiz-row { padding: 12px 16px; gap: 10px; }

  .nav-dot { width: 30px; height: 30px; font-size: 0.65rem; }

  /* 0098 — Video training responsive */
  .vt-video-actions { flex-direction: column; }
  .vt-quiz-actions { flex-direction: column; }
  .vt-summary-stats { gap: 16px; }
  .vt-video-player { max-height: 280px; }
  .vt-playlist-btn { max-width: 100%; }
}

/* ─── Lecture Reference ─────────────────────────────────────────────────── */
.lecture-ref {
  margin-top: 20px;
  border-top: 1px solid var(--border);
  padding-top: 16px;
}

.lecture-ref-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.lecture-ref-icon { font-size: 1.1rem; flex-shrink: 0; }

.lecture-ref-title {
  flex: 1;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text);
}

.lecture-ref-watch {
  flex-shrink: 0;
  font-size: 0.8rem;
  padding: 4px 12px;
  border-radius: 6px;
  background: var(--accent);
  color: #fff !important;
  border: none;
  cursor: pointer;
  transition: opacity 0.15s;
}
.lecture-ref-watch:hover { opacity: 0.85; }

.lecture-ref-excerpt {
  margin: 0;
  padding: 10px 14px;
  border-left: 3px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 6%, var(--card-bg));
  border-radius: 0 8px 8px 0;
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--text-muted);
  font-style: italic;
  max-height: 120px;
  overflow: hidden;
  position: relative;
}

.lecture-ref-excerpt::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 32px;
  background: linear-gradient(transparent, color-mix(in srgb, var(--accent) 6%, var(--card-bg)));
  pointer-events: none;
}

/* ─── Video Player Modal ─────────────────────────────────────────────────── */
.video-modal {
  max-width: 860px;
  width: 92%;
  padding: 0;
  overflow: hidden;
  text-align: left;
}

.video-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  gap: 12px;
}

.video-modal-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.video-player {
  display: block;
  width: 100%;
  max-height: 60vh;
  background: #000;
}

/* ─── Modal ────────────────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: modalFadeIn 0.18s ease;
}

.modal-overlay.hidden { display: none; }

@keyframes modalFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.modal {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 32px;
  max-width: 420px;
  width: 90%;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  animation: modalSlideIn 0.2s ease;
}

@keyframes modalSlideIn {
  from { opacity: 0; transform: scale(0.95) translateY(-10px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.modal-icon {
  font-size: 2.5rem;
  margin-bottom: 12px;
}

.modal-message {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text);
  margin-bottom: 24px;
}

.modal-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.modal-actions .btn {
  min-width: 100px;
}

/* ─── SVG Icon System (outline/stroke-based) ─────────────────────────────── */
.icon {
  width: 1em;
  height: 1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -0.125em;
  display: inline-block;
  flex-shrink: 0;
}
.icon-sm { width: 0.75em; height: 0.75em; }
.icon-lg { width: 1.5em; height: 1.5em; }
.icon-xl { width: 2em; height: 2em; }
.icon-action { width: 1.25em; height: 1.25em; }
/* Semantic color overrides */
.icon-green { color: var(--success); }
.icon-yellow { color: var(--warning); }
.icon-red { color: var(--danger); }
.icon-muted { color: var(--text-muted); }
.icon-accent { color: var(--accent); }
.icon-woop { color: #e74c3c; }
.icon-teach { color: #3498db; }
.icon-modal-title { width: 1.25em; height: 1.25em; vertical-align: -0.2em; }

/* ─── Review Mode Banner ─────────────────────────────────────────────────── */
.review-banner {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px;
  background: #f59e0b;
  color: #1a1a1a;
  font-weight: 600;
  font-size: 0.9rem;
}
.review-banner.hidden { display: none !important; }
[data-theme="dark"] .review-banner { background: #d97706; color: #fff; }

/* ═══ Mindmap Loader ══════════════════════════════════════════════════ */
.mm-loader {
  position: absolute;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: var(--bg);
}
.mm-loader.hidden { display: none; }
.mm-loader-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: mm-spin 0.8s linear infinite;
}
@keyframes mm-spin { to { transform: rotate(360deg); } }
.mm-loader-text {
  font-size: 0.95rem;
  color: var(--text-muted);
}

/* ═══ Progressive Disclosure & Navigation (0058, 0084) ══════════════════ */
.mm-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 12px;
  flex-wrap: wrap;
}
.mm-controls-left {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.mm-controls-center {
  display: flex;
  align-items: center;
  flex: 1;
  justify-content: center;
  min-width: 0;
}
.mm-controls-center .mm-search {
  flex: 1;
  max-width: 400px;
  min-width: 120px;
}
.mm-controls-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  flex-wrap: wrap;
}
/* ── Sticky Compact Header (0077) ─────────────────────────────────────── */
/* ─── Unified Bottom Toolbar (0088) ──────────────────────────────────────── */

.mm-bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 12px;
  flex-wrap: wrap;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--border);
}

.mm-bottom-bar.hidden { display: none; }

[data-theme="dark"] .mm-bottom-bar {
  background: rgba(30, 30, 46, 0.9);
  border-top-color: #444;
}

.mm-bar-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  gap: 2px;
  padding: 4px 8px;
  font-size: 0.62rem;
  font-weight: 600;
  font-family: var(--font);
  color: var(--text);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--transition), opacity var(--transition);
  white-space: nowrap;
}

.mm-bar-btn:hover { background: var(--hover-bg, rgba(0,0,0,0.06)); }
.mm-bar-btn:active { opacity: 0.75; }
.mm-bar-btn:disabled { opacity: 0.35; cursor: not-allowed; }

.mm-bar-btn .icon { width: 18px; height: 18px; stroke: currentColor; fill: none; }

.mm-bar-filter.active {
  background: rgba(var(--primary-rgb, 74,144,217), 0.15);
  color: var(--primary);
  border-color: currentColor;
}

/* Mobile search overlay (0088) */
.mm-search-mobile {
  position: fixed;
  top: 56px;
  left: 0;
  right: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: var(--card-bg, #fff);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.mm-search-mobile.hidden { display: none; }

.mm-search-mobile input {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
}

[data-theme="dark"] .mm-search-mobile {
  background: #1e1e2e;
  border-bottom-color: #444;
}
[data-theme="dark"] .mm-search-mobile input {
  background: #2a2a3e;
  color: #e0e0e0;
  border-color: #444;
}

/* Breadcrumb */
.mm-breadcrumb {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 16px;
  font-size: 0.82rem;
  color: var(--text-secondary, #8b8fa3);
  min-height: 24px;
  flex-wrap: wrap;
}
.mm-breadcrumb:empty { display: none; }
.mm-breadcrumb-item {
  cursor: pointer;
  color: var(--accent-primary, #6c5ce7);
  text-decoration: none;
  white-space: nowrap;
}
.mm-breadcrumb-item:hover { text-decoration: underline; }
.mm-breadcrumb-sep { color: var(--text-tertiary, #aaa); margin: 0 2px; }
.mm-breadcrumb-current { color: var(--text-primary, #1a1a2e); font-weight: 600; }

/* Mini-map */
.mm-minimap {
  position: absolute;
  bottom: 80px;
  right: 12px;
  width: 180px;
  height: 120px;
  border: 1px solid var(--border-color, #dcdfe6);
  border-radius: 8px;
  background: var(--bg-primary, #fff);
  overflow: hidden;
  z-index: 20;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  cursor: pointer;
}
.mm-minimap canvas {
  width: 100%;
  height: 100%;
  display: block;
}
.mm-minimap-viewport {
  position: absolute;
  border: 2px solid var(--accent-primary, #6c5ce7);
  background: rgba(108, 92, 231, 0.08);
  border-radius: 3px;
  pointer-events: auto;   /* allow drag-to-pan (0066 redo) */
  cursor: grab;
  transition: left 0.05s ease, top 0.05s ease, width 0.15s ease, height 0.15s ease;
}
.mm-minimap-viewport:active { cursor: grabbing; }
[data-theme="dark"] .mm-minimap {
  background: #1e1e2e;
  border-color: #444;
}

/* ─── Mobile Touch Support (0060) ─────────────────────────────────────── */

/* Touch-action on mindmap container */
.mindmap-container { touch-action: none; }

/* Mobile breadcrumb compact */
.mm-breadcrumb-compact {
  display: none;
  font-size: 0.75rem;
  padding: 4px 8px;
  background: var(--card-bg, #fff);
  border-bottom: 1px solid var(--border-color, #ddd);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 768px) {
  /* Full-screen mind map — leave room for bottom bar (~62px) */
  #screen-mindmap { padding: 0 !important; }
  #mindmap-container { height: calc(100vh - 56px - 62px) !important; min-height: 0 !important; }

  /* Hide desktop top controls, minimap button, and minimap on mobile */
  .mm-toolbar, #mm-controls, .mm-minimap, #mm-bar-minimap, #mm-minimap { display: none !important; }

  .mm-search input { width: 100%; }

  /* Compact breadcrumb */
  .mm-breadcrumb { display: none !important; }
  .mm-breadcrumb-compact { display: block; }

  /* Controls wrap on mobile (0084) */
  .mm-controls { flex-wrap: wrap; gap: 6px; }
  .mm-controls-center { flex-basis: 100%; order: 3; }
  .mm-controls-center .mm-search { max-width: 100%; }
  .mm-controls-right { flex-wrap: wrap; }

  /* Bottom bar responsive */
  .mm-bottom-bar { gap: 4px; padding: 6px 8px; }
  .mm-bar-btn { min-width: 44px; min-height: 44px; padding: 3px 6px; font-size: 0.58rem; }
}

[data-theme="dark"] .mm-breadcrumb-compact { background: #1e1e2e; border-color: #444; color: #ddd; }

/* ─── Node Inspector Panel (0062) ─────────────────────────────────────── */

.mm-node-panel {
  position: absolute;
  top: 0;
  right: 0;
  width: 320px;
  height: 100%;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  border-left: 1px solid var(--border-color, #ddd);
  box-shadow: -4px 0 16px rgba(0,0,0,0.1);
  z-index: 1000;
  transform: translateX(100%);
  transition: transform 0.3s ease-out;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.mm-node-panel.open { transform: translateX(0); }
.mm-node-panel.hidden { display: none; }

.mm-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-color, #ddd);
  flex-shrink: 0;
}
#mm-panel-close {
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #555;
  border-radius: 6px;
  transition: background 0.15s, color 0.15s;
}
#mm-panel-close:hover {
  background: rgba(0,0,0,0.08);
  color: #d32f2f;
}
[data-theme="dark"] #mm-panel-close {
  color: #aaa;
}
[data-theme="dark"] #mm-panel-close:hover {
  background: rgba(255,255,255,0.1);
  color: #ff6b6b;
}
.mm-panel-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}

.mm-panel-body {
  padding: 16px;
  flex: 1;
  overflow-y: auto;
}

/* Mastery ring */
.mm-panel-mastery {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}
.mm-mastery-ring { flex-shrink: 0; }
.mm-mastery-label { font-size: 1.1rem; font-weight: 600; }

/* Stats grid */
.mm-panel-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 16px;
}
.mm-stat-item {
  background: var(--hover-bg, #f5f5f5);
  border-radius: 8px;
  padding: 10px;
  text-align: center;
}
.mm-stat-value {
  display: block;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--primary, #4a90d9);
}
.mm-stat-label {
  display: block;
  font-size: 0.75rem;
  color: var(--text-secondary, #777);
  margin-top: 2px;
}

/* Children breakdown */
.mm-panel-children h4,
.mm-panel-questions h4 {
  font-size: 0.85rem;
  margin: 12px 0 8px;
  color: var(--text-secondary, #666);
}
.mm-panel-children ul,
.mm-panel-questions ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.mm-panel-children li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 4px;
  cursor: pointer;
  border-radius: 4px;
}
.mm-panel-children li:hover { background: var(--hover-bg, #f0f0f0); }
.mm-child-name { flex: 1; font-size: 0.85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mm-child-bar {
  width: 60px;
  height: 6px;
  background: #e0e0e0;
  border-radius: 3px;
  overflow: hidden;
}
.mm-child-bar-fill { height: 100%; border-radius: 3px; }
.mm-child-pct { font-size: 0.75rem; color: var(--text-secondary, #777); width: 36px; text-align: right; }

/* Question list */
.mm-question-list li {
  padding: 4px 0;
  font-size: 0.82rem;
  color: var(--text-secondary, #555);
}

/* Panel actions */
.mm-panel-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 16px;
}
.mm-panel-actions .btn { width: 100%; justify-content: center; }

/* Google Search fallback button (0076) */
.btn-google-search {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  padding: 6px 14px;
  border-radius: var(--radius-sm, 6px);
  background: var(--surface, #f5f5f5);
  color: var(--text);
  border: 1px solid var(--border);
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s;
  margin-top: 10px;
  justify-content: center;
}
.btn-google-search:hover {
  background: var(--primary, #ff9900);
  color: #fff;
  border-color: var(--primary, #ff9900);
}
.mm-panel-actions .btn-google-search { width: 100%; margin-top: 0; }

/* Video button in panel (0067) */
#mm-panel-video {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff;
  border: none;
  display: flex;
  align-items: center;
  gap: 6px;
}
#mm-panel-video:hover {
  background: linear-gradient(135deg, #4f46e5, #7c3aed);
}

/* Dark mode */
[data-theme="dark"] .mm-node-panel {
  background: rgba(30, 30, 46, 0.95);
  border-left-color: #444;
  box-shadow: -4px 0 16px rgba(0,0,0,0.4);
}
[data-theme="dark"] .mm-panel-header { border-bottom-color: #444; }
[data-theme="dark"] .mm-stat-item { background: #2a2a3e; }
[data-theme="dark"] .mm-stat-value { color: #7db9e8; }
[data-theme="dark"] .mm-child-bar { background: #444; }

/* Mobile: bottom sheet */
@media (max-width: 768px) {
  .mm-node-panel {
    position: fixed;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 60vh;
    border-left: none;
    border-top: 1px solid var(--border-color, #ddd);
    border-radius: 16px 16px 0 0;
    transform: translateY(100%);
    box-shadow: 0 -4px 16px rgba(0,0,0,0.2);
  }
  .mm-node-panel.open { transform: translateY(0); }
}

/* ── Knowledge Map Overlay (0134) ────────────────────────────────────── */

.mm-knowledge-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--bg, #fff);
  z-index: 1100;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.mm-knowledge-overlay.hidden { display: none; }

.mm-knowledge-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-color, #ddd);
  flex-shrink: 0;
  background: var(--bg, #fff);
}
.mm-knowledge-header h2 {
  flex: 1;
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#mm-knowledge-map {
  flex: 1;
  width: 100%;
  overflow: hidden;
  position: relative;
}

/* Knowledge Map button in panel */
.btn-knowledge {
  background: linear-gradient(135deg, #10b981, #059669);
  color: #fff;
  border: none;
  display: flex;
  align-items: center;
  gap: 6px;
}
.btn-knowledge:hover {
  background: linear-gradient(135deg, #059669, #047857);
}

/* Dark theme */
[data-theme="dark"] .mm-knowledge-overlay {
  background: var(--bg, #1e1e2e);
}
[data-theme="dark"] .mm-knowledge-header {
  background: var(--bg, #1e1e2e);
  border-bottom-color: #444;
}

/* Knowledge Map Minimap */
.km-minimap {
  position: absolute;
  bottom: 12px;
  right: 12px;
  width: 160px;
  height: 100px;
  border: 1px solid var(--border-color, #dcdfe6);
  border-radius: 8px;
  background: var(--bg-primary, #fff);
  overflow: hidden;
  z-index: 1200;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  cursor: pointer;
}
.km-minimap canvas {
  width: 100%;
  height: 100%;
  display: block;
}
.km-minimap-viewport {
  position: absolute;
  border: 2px solid var(--accent-primary, #6c5ce7);
  background: rgba(108, 92, 231, 0.08);
  border-radius: 3px;
  pointer-events: auto;
  cursor: grab;
}
.km-minimap-viewport:active { cursor: grabbing; }
[data-theme="dark"] .km-minimap {
  background: #1e1e2e;
  border-color: #444;
}

/* Knowledge Map Node Panel (0136) */
.km-node-panel {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  max-height: 260px;
  background: #fff;
  border-top: 3px solid var(--accent-primary, #6c5ce7);
  box-shadow: 0 -4px 20px rgba(0,0,0,0.15);
  z-index: 1300;
  transform: translateY(100%);
  transition: transform 0.3s ease-out;
  overflow-y: auto;
  color: #1a1a2e;
}
.km-node-panel.open { transform: translateY(0); }
.km-node-panel.hidden { display: none; }
.km-npanel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  border-bottom: 1px solid #e0e0e0;
  background: #f8f8fa;
}
.km-npanel-header h3 {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  color: #1a1a2e;
}
.km-npanel-header .btn-ghost {
  min-width: 36px;
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  color: #555;
  transition: background 0.15s, color 0.15s;
}
.km-npanel-header .btn-ghost:hover {
  background: rgba(0,0,0,0.08);
  color: #d32f2f;
}
.km-npanel-body {
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.km-npanel-body .mm-panel-mastery {
  margin-bottom: 0;
}
.km-npanel-body .mm-panel-stats {
  flex: 1;
  min-width: 180px;
}
.km-npanel-body .mm-stat-value {
  color: #1a1a2e;
}
.km-npanel-body .mm-stat-label {
  color: #666;
}
.km-panel-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
[data-theme="dark"] .km-node-panel {
  background: #1e1e2e;
  border-top-color: #a78bfa;
  color: #e0e0e0;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.4);
}
[data-theme="dark"] .km-npanel-header {
  background: #252538;
  border-bottom-color: #3a3a50;
}
[data-theme="dark"] .km-npanel-header h3 {
  color: #e8e8f0;
}
[data-theme="dark"] .km-npanel-header .btn-ghost {
  color: #aaa;
}
[data-theme="dark"] .km-npanel-header .btn-ghost:hover {
  background: rgba(255,255,255,0.1);
  color: #ff6b6b;
}
[data-theme="dark"] .km-npanel-body .mm-stat-value {
  color: #e8e8f0;
}
[data-theme="dark"] .km-npanel-body .mm-stat-label {
  color: #999;
}

/* ── Weak Area Highlight (0069) ──────────────────────────────────────── */

.mm-weak-highlight {
  outline: 2.5px solid #e74c3c !important;
  outline-offset: 3px;
  opacity: 1 !important;
  animation: mm-weak-pulse 2s ease-in-out infinite;
  position: relative;
  z-index: 5;
}

.mm-weak-critical {
  outline-color: #c0392b !important;
  box-shadow: 0 0 12px rgba(192, 57, 43, 0.5) !important;
  animation: mm-weak-pulse-critical 1.5s ease-in-out infinite;
}

.mm-weak-warning {
  outline-color: #e67e22 !important;
  box-shadow: 0 0 8px rgba(230, 126, 34, 0.35) !important;
}

.mm-weak-parent {
  opacity: 0.8 !important;
  border-left: 3px solid #e74c3c !important;
}

@keyframes mm-weak-pulse {
  0%, 100% { box-shadow: 0 0 6px rgba(231, 76, 60, 0.3); }
  50% { box-shadow: 0 0 16px rgba(231, 76, 60, 0.6); }
}

@keyframes mm-weak-pulse-critical {
  0%, 100% { box-shadow: 0 0 8px rgba(192, 57, 43, 0.4); }
  50% { box-shadow: 0 0 20px rgba(192, 57, 43, 0.8); }
}

[data-theme="dark"] .mm-weak-highlight {
  outline-color: #ff6b6b !important;
}

[data-theme="dark"] .mm-weak-critical {
  box-shadow: 0 0 14px rgba(255, 107, 107, 0.5) !important;
}

.mm-panel-weak-detail h4 {
  font-size: 0.95rem;
  margin: 0.5rem 0 0.25rem;
  color: #e74c3c;
}

.mm-weak-tip {
  font-size: 0.8rem;
  color: #888;
  margin: 0 0 0.5rem;
}

[data-theme="dark"] .mm-panel-weak-detail h4 {
  color: #ff6b6b;
}

/* ── Flashcard Training Home Section (0070) ────────────────────────── */

.flashcard-section {
  margin: 2rem 0 2rem;
  padding: 1.5rem 0 0;
  border-top: 2px solid var(--border);
  text-align: center;
}

.btn-cards-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 2rem;
  background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 1.05rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3);
}

.btn-cards-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(139, 92, 246, 0.4);
}

.btn-cards-icon {
  font-size: 1.5rem;
}

.btn-cards-text {
  display: block;
  font-size: 1.1rem;
}

.btn-cards-sub {
  display: block;
  font-size: 0.8rem;
  opacity: 0.9;
}

[data-theme="dark"] .btn-cards-primary {
  background: linear-gradient(135deg, #a78bfa 0%, #818cf8 100%);
  box-shadow: 0 4px 15px rgba(167, 139, 250, 0.2);
}

[data-theme="dark"] .btn-cards-primary:hover {
  box-shadow: 0 6px 20px rgba(167, 139, 250, 0.3);
}

/* ── Flashcard Training Screen (0070) ────────────────────────────────── */



.card-empty-state,
.card-complete-state {
  text-align: center;
  padding: 3rem 1.5rem;
  font-size: 1.1rem;
  color: var(--text-muted, #888);
}

.card-empty-state p,
.card-complete-state p {
  margin-bottom: 1.5rem;
}

.card-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem 1rem;
  perspective: 1200px;
}

.card-flip {
  width: 100%;
  max-width: 640px;
  min-height: 300px;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.5s ease;
}

.card-flip.flipped {
  transform: rotateY(180deg);
}

.card-flip.flipped .card-front {
  visibility: hidden;
  min-height: 0;
  height: 0;
  padding: 0;
  overflow: hidden;
}

.card-flip.flipped .card-back {
  position: relative;
}

.card-front,
.card-back {
  backface-visibility: hidden;
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
  background: var(--card-bg, #fff);
  min-height: 300px;
  overflow-y: auto;
}

.card-front {
  position: relative;
}

.card-back {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  transform: rotateY(180deg);
}

.card-front .card-question {
  margin: 0 0 1rem;
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--text, #333);
}

.card-front .card-question p {
  margin: 0 0 0.5rem;
}

.card-front .card-question img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
}

.card-front .card-options {
  list-style: none;
  padding: 0;
  margin: 1rem 0 0;
}

.card-front .card-options li {
  padding: 0.5rem 0.75rem;
  margin: 0.25rem 0;
  background: var(--bg-alt, #f5f5f5);
  border-radius: 6px;
  font-size: 0.95rem;
}

.card-front .card-options li p {
  margin: 0;
  display: inline;
}

.card-back h4 {
  margin: 0 0 0.5rem;
  color: var(--accent, #2563eb);
}

.card-back .card-answer {
  font-weight: 600;
  color: var(--success, #16a34a);
  margin-bottom: 1rem;
}

.card-back .card-answer p {
  display: inline;
  margin: 0;
}

.card-back .card-explanation {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--text-muted, #666);
  max-height: 400px;
  overflow-y: auto;
}

.card-back .card-explanation img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
  margin: 0.5rem 0;
}

.card-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem;
}

.btn-show-answer {
  padding: 0.75rem 2rem;
  font-size: 1rem;
  background: var(--accent, #2563eb);
  color: #fff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s;
}

.btn-show-answer:hover {
  background: var(--accent-hover, #1d4ed8);
}

.card-rating-btns {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: center;
}

.card-rate {
  padding: 0.6rem 1.2rem;
  font-size: 0.9rem;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  color: #fff;
  font-weight: 600;
  transition: transform 0.15s, box-shadow 0.15s;
}

.card-rate:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.card-rate-again { background: #ef4444; }
.card-rate-hard  { background: #f59e0b; }
.card-rate-good  { background: #22c55e; }
.card-rate-easy  { background: #3b82f6; }

.card-rate .card-rate-interval {
  display: block;
  font-size: 0.7rem;
  font-weight: 400;
  opacity: 0.85;
  margin-top: 2px;
}

[data-theme="dark"] .card-front,
[data-theme="dark"] .card-back {
  background: var(--card-bg, #1e293b);
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}

[data-theme="dark"] .card-front .card-options li {
  background: var(--bg-alt, #334155);
}

@media (max-width: 768px) {
  .card-container {
    padding: 1rem 0.5rem;
  }
  .card-flip {
    max-width: 100%;
    min-height: 250px;
  }
  .card-front,
  .card-back {
    padding: 1.25rem;
    min-height: 250px;
  }
  .card-rate {
    padding: 0.75rem 1rem;
    font-size: 1rem;
  }
  .btn-show-answer {
    width: 100%;
    padding: 1rem;
  }
}

/* ─── Flashcard Analytics Dashboard (0072, 0175 redesign) ────────────────── */
.cards-summary { padding: 12px; max-width: 480px; margin: 0 auto; }

/* 0175: Card-based layout */
.ds-card {
  border-radius: 12px;
  background: var(--card-bg, #fff);
  border: 1px solid var(--border, #e0e0e0);
  padding: 16px;
  margin-bottom: 12px;
}
.ds-card-hero {
  background: var(--accent-bg, rgba(74, 144, 217, 0.06));
  border-color: var(--accent, #4a90d9);
}
.ds-card-hero .deck-stat-due {
  background: none;
  border: none;
  padding: 8px 0;
}
.ds-card-hero .deck-stat-count { font-size: 2.8rem; }
.ds-card-hero .deck-stat-label { font-size: 0.85rem; }
.ds-hero-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.ds-card-title {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted, #888);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 12px;
}
.ds-card-subtitle { font-weight: 400; text-transform: none; letter-spacing: 0; }
.ds-card-settings { background: transparent; border: none; padding: 8px 4px; }

.ds-deck-progress { margin-bottom: 12px; }
.ds-progress-text {
  font-size: 0.8rem;
  color: var(--text-muted, #888);
  margin-bottom: 6px;
}
.ds-progress-track {
  height: 6px;
  border-radius: 3px;
  background: var(--border, #e0e0e0);
  overflow: hidden;
}
.ds-progress-fill {
  height: 100%;
  border-radius: 3px;
  background: var(--accent, #4a90d9);
  transition: width 0.3s;
}

.deck-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.deck-stat {
  text-align: center;
  padding: 10px 4px;
  border-radius: 8px;
  background: var(--bg-secondary, #f5f5f5);
  border: none;
}
.deck-stat-count {
  display: block;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.2;
}
.deck-stat-label {
  display: block;
  font-size: 0.7rem;
  color: var(--text-muted, #888);
  margin-top: 2px;
}
.deck-stat-due .deck-stat-count { color: var(--accent, #4a90d9); }
.deck-stat-new .deck-stat-count { color: #4a90d9; }
.deck-stat-learning .deck-stat-count { color: #e6a23c; }
.deck-stat-mature .deck-stat-count { color: #67c23a; }
.deck-stat-lapsed .deck-stat-count { color: #f56c6c; }
.deck-stats-grid { justify-items: center; }
.deck-stats-grid .deck-stat { width: 100%; }

.deck-retention { margin-bottom: 0; }
.deck-retention-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 8px;
}
.retention-trend { font-size: 1rem; }
.deck-retention-stats {
  display: flex;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--text-muted, #888);
}
.retention-divider { opacity: 0.4; }

.deck-chart-bar {
  display: flex;
  height: 18px;
  border-radius: 9px;
  overflow: hidden;
  background: var(--border, #e0e0e0);
}
.chart-seg { height: 100%; transition: width 0.3s; min-width: 0; }
.chart-seg-again { background: #f56c6c; }
.chart-seg-hard { background: #e6a23c; }
.chart-seg-good { background: #67c23a; }
.chart-seg-easy { background: #4a90d9; }

.deck-streak {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.95rem;
}
.streak-icon { font-size: 1.2rem; }
.streak-count { font-weight: 700; font-size: 1.1rem; }
.streak-label { color: var(--text-muted, #888); font-size: 0.85rem; }
.btn-start-review { width: 100%; padding: 14px; font-size: 1rem; margin-top: 12px; }

/* Session progress bar */
.session-progress { padding: 8px 16px; max-width: 480px; margin: 0 auto 8px; }
.session-progress-bar {
  height: 6px;
  border-radius: 3px;
  background: var(--border, #e0e0e0);
  overflow: hidden;
  margin-bottom: 6px;
}
.session-progress-fill {
  height: 100%;
  border-radius: 3px;
  background: var(--accent, #4a90d9);
  transition: width 0.3s;
  width: 0%;
}
.session-progress-info {
  font-size: 0.8rem;
  color: var(--text-muted, #888);
  display: flex;
  gap: 6px;
  align-items: center;
}
.sp-stat { display: flex; gap: 3px; align-items: baseline; }
.sp-stat strong { color: var(--text, #fff); font-weight: 600; }
.sp-done strong { color: var(--accent, #67c23a); }
.sp-added strong { color: #e6a23c; }
.sp-sep { opacity: 0.4; }
.session-time-est { margin-left: auto; }
.session-rating-dist {
  display: flex;
  gap: 10px;
  margin-top: 4px;
  font-size: 0.75rem;
}
.session-dist {
  display: flex;
  align-items: center;
  gap: 3px;
}
.session-dist::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.session-dist-again::before { background: #f56c6c; }
.session-dist-hard::before { background: #e6a23c; }
.session-dist-good::before { background: #67c23a; }
.session-dist-easy::before { background: #4a90d9; }

/* ─── 0138: Successive Relearning ─────────────────────────────────────────── */
.card-criterion {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.card-criterion-dots {
  display: flex;
  gap: 4px;
}
.criterion-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 2px solid var(--accent);
}
.criterion-dot.filled {
  background: var(--accent);
}
.card-criterion-label {
  font-size: 0.85rem;
  color: var(--text-secondary);
}
.card-criterion-done {
  color: var(--accent);
  font-weight: 600;
}
.card-hint-label {
  font-size: 0.75rem;
  background: var(--accent);
  color: #fff;
  border-radius: 4px;
  padding: 1px 6px;
  margin-left: 4px;
}
.card-hint-mode {
  margin-top: 12px;
}
.card-hint-mode .card-hint-text {
  opacity: 0.5;
  font-size: 0.9em;
  border-left: 3px solid var(--accent);
  padding-left: 12px;
  margin-top: 12px;
}
.ds-session-stats {
  display: flex;
  justify-content: center;
  gap: 24px;
}
.session-stat {
  text-align: center;
  font-size: 0.9rem;
}
.session-stat span:first-child {
  display: block;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--accent);
}
.session-stat-label {
  color: var(--text-secondary);
  font-size: 0.8rem;
}

/* 0139: FSRS retention target slider */
.retention-target {
  padding: 0;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.retention-target-label {
  font-size: 0.875rem;
  color: var(--text-primary);
  white-space: nowrap;
}
.retention-slider {
  flex: 1;
  min-width: 120px;
  accent-color: var(--accent);
  cursor: pointer;
}

/* 0140: Mixed Retrieval Formats */
.typed-answer-container { margin-top: 1rem; }
.typed-answer-label { display: block; font-weight: 600; margin-bottom: 0.5rem; color: var(--text-primary); }
.typed-answer-input {
  width: 100%; padding: 0.75rem; border: 2px solid var(--border);
  border-radius: 0.5rem; background: var(--bg-primary); color: var(--text-primary);
  font-size: 1rem; font-family: inherit; resize: vertical;
}
.typed-answer-input:focus { border-color: var(--accent); outline: none; }
.typed-answer-feedback { margin-top: 0.75rem; }
.typed-answer-your-text { padding: 0.5rem; border-radius: 0.375rem; margin-bottom: 0.5rem; }
.ta-match-correct { background: var(--success-bg, rgba(34,197,94,0.12)); border-left: 3px solid var(--success); }
.ta-match-wrong { background: var(--danger-bg, rgba(239,68,68,0.12)); border-left: 3px solid var(--danger); }
.typed-answer-correct-text { padding: 0.5rem; background: var(--bg-secondary); border-radius: 0.375rem; color: var(--text-secondary); }

.explain-given { margin-top: 1rem; padding: 1rem; background: var(--bg-secondary); border-radius: 0.5rem; border-left: 3px solid var(--success); }
.explain-correct-label { font-weight: 600; color: var(--text-secondary); font-size: 0.85rem; margin-bottom: 0.25rem; }
.explain-correct-text { color: var(--text-primary); }
.explain-prompt { margin-top: 1rem; }
.explain-label { display: block; font-weight: 600; margin-bottom: 0.5rem; color: var(--text-primary); }
.explain-input {
  width: 100%; padding: 0.75rem; border: 2px solid var(--border);
  border-radius: 0.5rem; background: var(--bg-primary); color: var(--text-primary);
  font-size: 1rem; font-family: inherit; resize: vertical;
}
.explain-input:focus { border-color: var(--accent); outline: none; }
.explain-rating { margin-top: 1rem; text-align: center; }
.explain-rating p { margin-bottom: 0.75rem; color: var(--text-secondary); font-weight: 600; }
.explain-rate { margin: 0 0.25rem; }
.explain-rating-done { margin-top: 0.75rem; text-align: center; font-weight: 600; }

.format-analytics { margin-top: 1.5rem; }
.format-analytics-title { font-size: 1.1rem; margin-bottom: 0.75rem; }
.format-bar-row { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; }
.format-bar-label { min-width: 120px; font-size: 0.875rem; color: var(--text-primary); }
.format-bar { flex: 1; height: 0.625rem; background: var(--bg-secondary); border-radius: 0.375rem; overflow: hidden; }
.format-bar-fill { height: 100%; border-radius: 0.375rem; transition: width 0.3s; }
.format-bar-pct { min-width: 3rem; text-align: right; font-size: 0.85rem; font-weight: 600; color: var(--text-primary); }
.format-bar-nodata { font-size: 0.85rem; color: var(--text-muted); font-style: italic; }

/* 0141: Confusion Clusters */
.section-hint { font-size: 0.85rem; color: var(--text-secondary); margin: -0.25rem 0 0.75rem; line-height: 1.4; }
.section-hint strong { color: var(--text-primary); font-weight: 600; }
.section-hint-link { color: var(--accent); text-decoration: none; font-weight: 500; white-space: nowrap; }
.section-hint-link:hover { text-decoration: underline; }
.confusion-cluster { padding: 12px; border-radius: 8px; margin-bottom: 12px; background: var(--bg-secondary); border: 1px solid var(--border); }
.confusion-cluster-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.625rem; }
.confusion-cluster-label { font-weight: 600; font-size: 0.95rem; color: var(--text-primary); }
.confusion-mode-badge { font-size: 0.75rem; padding: 2px 8px; border-radius: 12px; font-weight: 600; }
.confusion-mode-blocked { background: var(--bg-tertiary, var(--border)); color: var(--text-muted); }
.confusion-mode-interleaved { background: var(--success); color: #fff; }
.confusion-cluster-services { display: flex; flex-direction: column; gap: 0.375rem; }
.confusion-svc-row { display: flex; align-items: center; gap: 0.5rem; }
.confusion-svc-name { width: 140px; flex-shrink: 0; font-size: 0.8rem; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.confusion-svc-bar { flex: 1; height: 0.5rem; background: var(--bg-primary); border-radius: 0.25rem; overflow: hidden; }
.confusion-svc-bar-fill { height: 100%; border-radius: 0.25rem; transition: width 0.3s; }
.confusion-svc-pct { min-width: 2.5rem; text-align: right; font-size: 0.8rem; font-weight: 600; color: var(--text-primary); }
.confusion-svc-nodata { font-size: 0.8rem; color: var(--text-muted); font-style: italic; }
.confusion-pair-highlight { margin-top: 0.5rem; padding: 4px 8px; font-size: 0.8rem; color: var(--danger); background: var(--bg-primary); border-radius: 4px; }

/* ═══ 0143: WOOP Goal Planning ═══ */
.action-card--woop { --card-accent: #e67e22; }
.action-card--woop .action-icon { color: var(--card-accent); }

.woop-overlay { position: fixed; inset: 0; z-index: 1000; background: rgba(0,0,0,0.5); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; padding: 1rem; }
.woop-modal { background: var(--bg-secondary); border-radius: 1rem; padding: 1.5rem; width: 100%; max-width: 480px; max-height: 90vh; overflow-y: auto; position: relative; box-shadow: 0 8px 32px rgba(0,0,0,0.2); }
.woop-modal h2 { margin: 0 0 1rem; font-size: 1.25rem; color: var(--text-primary); }
.woop-close { position: absolute; top: 0.75rem; right: 0.75rem; background: none; border: none; font-size: 1.5rem; cursor: pointer; color: var(--text-muted); line-height: 1; padding: 0.25rem; }
.woop-close:hover { color: var(--text-primary); }
.woop-step { margin-bottom: 1rem; }
.woop-step label { display: block; font-weight: 600; font-size: 0.9rem; margin-bottom: 0.25rem; color: var(--text-primary); }
.woop-step small { display: block; font-size: 0.8rem; color: var(--text-muted); margin-bottom: 0.375rem; }
.woop-step input, .woop-step textarea { width: 100%; padding: 0.5rem; font-size: 0.9rem; border: 1px solid var(--border); border-radius: 0.5rem; background: var(--bg-primary); color: var(--text-primary); font-family: inherit; box-sizing: border-box; }
.woop-step textarea { min-height: 3rem; resize: vertical; }
.woop-error { color: var(--danger); font-size: 0.8rem; margin-top: 0.25rem; }
.woop-target-section { margin-bottom: 1rem; }
.woop-target-section label { font-weight: 600; font-size: 0.9rem; color: var(--text-primary); margin-bottom: 0.375rem; display: block; }
.woop-target-btns { display: flex; gap: 0.5rem; }
.woop-target-btn { padding: 0.375rem 1rem; border: 1px solid var(--border); border-radius: 0.5rem; background: var(--bg-primary); color: var(--text-primary); cursor: pointer; font-size: 0.9rem; font-weight: 600; transition: all 0.15s; }
.woop-target-btn:hover { border-color: var(--accent); }
.woop-target-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.woop-modal .btn-primary { width: 100%; margin-top: 0.5rem; }

.woop-summary { background: var(--bg-secondary); border-radius: 0.75rem; padding: 1rem 1.25rem; margin-bottom: 1.25rem; border-left: 4px solid #e67e22; }
.woop-summary-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; }
.woop-summary-header strong { font-size: 0.95rem; color: var(--text-primary); }
.woop-summary-wish { font-size: 1rem; font-weight: 600; color: var(--text-primary); margin-bottom: 0.25rem; }
.woop-summary-plan { font-size: 0.85rem; color: var(--text-secondary); margin-bottom: 0.5rem; }
.woop-summary-plan em { font-style: italic; color: var(--text-muted); }
.woop-summary-progress { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; color: var(--text-secondary); }
.woop-dots { letter-spacing: 2px; font-size: 1rem; color: #e67e22; }

/* ═══ 0144: Peer Teaching ═══ */
.teaching-prompt { display: flex; align-items: center; gap: 0.75rem; padding: 1rem; background: var(--bg-secondary); border-radius: 0.75rem; border-left: 4px solid var(--accent); margin-bottom: 1rem; flex-wrap: wrap; }
.teaching-prompt-icon { font-size: 1.5rem; flex-shrink: 0; }
.teaching-prompt-text { flex: 1; min-width: 180px; }
.teaching-prompt-text strong { display: block; font-size: 0.95rem; color: var(--text-primary); margin-bottom: 0.125rem; }
.teaching-prompt-text p { font-size: 0.85rem; color: var(--text-secondary); margin: 0; }

.teaching-modal h2 { text-align: center; }
.teaching-question-preview { padding: 0.75rem; background: var(--bg-primary); border-radius: 0.5rem; font-size: 0.9rem; color: var(--text-primary); margin-bottom: 0.75rem; border: 1px solid var(--border); line-height: 1.4; }
.teaching-official { margin-bottom: 0.75rem; }
.teaching-official summary { cursor: pointer; font-size: 0.85rem; color: var(--accent); font-weight: 600; padding: 0.375rem 0; }
.teaching-official p { font-size: 0.85rem; color: var(--text-secondary); margin: 0.5rem 0 0; line-height: 1.5; }
.teaching-textarea { width: 100%; padding: 0.75rem; border: 2px solid var(--border); border-radius: 0.5rem; background: var(--bg-primary); color: var(--text-primary); font-size: 0.9rem; font-family: inherit; resize: vertical; box-sizing: border-box; margin-top: 0.25rem; }
.teaching-textarea:focus { border-color: var(--accent); outline: none; }
.teaching-char-count { text-align: right; font-size: 0.8rem; color: var(--text-muted); margin-top: 0.25rem; }
.teaching-error { color: var(--danger); font-size: 0.8rem; margin-top: 0.25rem; }
.woop-actions { display: flex; gap: 0.5rem; margin-top: 0.75rem; }
.woop-actions .btn { flex: 1; justify-content: center; }

.mm-panel-btn--teach { background: var(--accent); color: #fff; border: none; padding: 0.5rem 1rem; border-radius: 0.5rem; cursor: pointer; font-size: 0.85rem; font-weight: 600; width: 100%; text-align: center; }
.mm-panel-btn--teach:hover { opacity: 0.9; }
.mm-panel-teach-count { font-size: 0.8rem; color: var(--text-secondary); text-align: center; margin-top: 0.25rem; }

.btn-tutor {
  background: var(--warm-bg);
  color: var(--text);
  border: 1px solid var(--warm-border);
  display: flex;
  align-items: center;
  gap: 6px;
}
.btn-tutor:hover {
  background: var(--warm-amber);
  color: #000;
  border-color: var(--warm-amber);
}



/* ─── 0147: Mascot / Study Buddy ────────────────────────────────────────── */
.mascot-feedback {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  margin-bottom: 12px;
  border-radius: var(--radius-sm);
  background: var(--warm-bg);
  border: 1px solid var(--warm-border);
  animation: mascotFadeIn 0.3s ease;
}
.mascot-svg { width: 48px; height: 48px; flex-shrink: 0; }
.mascot-message { font-size: 0.95rem; color: var(--text); font-weight: 500; }
.mascot-results-svg { width: 80px; height: 80px; }

/* Owl part colors */
.mascot-body { fill: var(--warm-amber); stroke: var(--warm-coral); stroke-width: 1.5; }
.mascot-ear { fill: var(--warm-coral); stroke: none; }
.mascot-eye-bg { fill: #FFFFFF; stroke: #333333; stroke-width: 1; }
.mascot-pupil { fill: #222222; transition: transform 0.3s ease; transform-box: fill-box; transform-origin: center; }
.mascot-beak { fill: var(--warm-coral); stroke: none; }
.mascot-wing { fill: var(--warm-gold); stroke: var(--warm-coral); stroke-width: 1; transition: transform 0.3s ease; transform-box: fill-box; transform-origin: center; }
.mascot-mouth { stroke: #333333; stroke-width: 1.5; stroke-linecap: round; fill: none; }
.mascot-mouth-encourage { fill: #333333; stroke: none; display: none; }
.mascot-mouth-happy { display: block; }

/* Expression states */
.mascot--encourage .mascot-mouth-happy { display: none; }
.mascot--encourage .mascot-mouth-encourage { display: block; }
.mascot--encourage .mascot-pupil { transform: translateY(2px); }
.mascot--encourage .mascot-svg { animation: mascotNod 0.4s ease; }

.mascot--celebrate .mascot-wing-l { animation: mascotWingFlapL 0.4s ease 3; }
.mascot--celebrate .mascot-wing-r { animation: mascotWingFlapR 0.4s ease 3; }
.mascot--celebrate .mascot-pupil { transform: scale(0.7); }
.mascot--celebrate .mascot-svg { animation: mascotBounce 0.5s ease; }

.mascot--think .mascot-pupil { transform: translateX(3px) translateY(-2px); }
.mascot--think .mascot-mouth-happy { d: path("M34,55 Q40,55 46,55"); }

.mascot--happy .mascot-pupil { transform: translateY(1px); }

.tutor-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.mascot-switch {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  flex-shrink: 0;
}
.mascot-switch input { display: none; }
.mascot-switch-slider {
  position: relative;
  width: 36px;
  height: 20px;
  background: var(--border);
  border-radius: 10px;
  transition: background 0.2s;
}
.mascot-switch-slider::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s;
}
.mascot-switch input:checked + .mascot-switch-slider {
  background: var(--success);
}
.mascot-switch input:checked + .mascot-switch-slider::after {
  transform: translateX(16px);
}
.mascot-switch-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-secondary);
}
@keyframes mascotFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes mascotBounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes mascotNod { 0%,100% { transform: rotate(0); } 50% { transform: rotate(5deg); } }
@keyframes mascotWingFlapL { 0%,100% { transform: rotate(0); } 50% { transform: rotate(-20deg) translateX(-3px); } }
@keyframes mascotWingFlapR { 0%,100% { transform: rotate(0); } 50% { transform: rotate(20deg) translateX(3px); } }

/* ─── 0154: Structured mascot feedback ─────────────────────────────────── */
.mascot-msg-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
}
.mascot-emotional {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text);
}
.mascot-joke {
  font-style: italic;
  font-size: 0.85rem;
  color: var(--text-secondary);
  opacity: 0.85;
}
.mascot-educational {
  font-size: 0.88rem;
  color: var(--text-secondary);
}
.mascot-chips {
  display: flex;
  gap: 8px;
  margin-top: 6px;
  flex-wrap: wrap;
}
.mascot-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  font-size: 0.8rem;
  font-weight: 500;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: var(--radius-xs);
  cursor: pointer;
  transition: background 0.15s ease;
}
.mascot-chip:hover { background: var(--primary-hover); }
.mascot-chip--label {
  background: var(--bg-secondary);
  color: var(--text-secondary);
  cursor: default;
  border: 1px solid var(--border-light);
}

/* 0154: Mascot explainer in progress sections */
.mascot-explainer {
  font-size: 0.85rem;
  color: var(--text-secondary);
  font-style: italic;
  margin: 4px 0 12px 0;
  padding: 0;
  line-height: 1.4;
}

/* 0154: Results coaching block */
.results-mascot-coaching {
  text-align: center;
  margin: 8px 0 16px 0;
}
.results-mascot-coaching .mascot-joke {
  margin-bottom: 8px;
}
.results-mascot-coaching .mascot-chips {
  justify-content: center;
}

/* 0154: Service overview in mindmap node panels */
.mm-mascot-overview {
  padding: 6px 0;
  margin-bottom: 4px;
}
.mm-overview-text {
  font-size: 0.85rem;
  color: var(--text-secondary);
  font-style: italic;
  line-height: 1.4;
  margin: 0;
}

/* 0154: Guide mode in tutor panel */
.tutor-message--guide .tutor-msg-label {
  font-weight: 600;
  font-size: 0.95rem;
}
.tutor-btn--guide-cta {
  background: var(--primary);
  color: #fff;
}
.tutor-btn--guide-cta:hover {
  background: var(--primary-hover);
}

/* ─── Strategy description ────────────────────────────────────────────── */
.sq-strategy-desc {
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.45;
  margin-top: 8px;
  padding: 8px 12px;
  background: var(--bg-secondary);
  border-radius: var(--radius-xs);
  border-left: 3px solid var(--primary);
}
.sq-strategy-desc p { margin: 0; }
.sq-irt-details { margin-top: 8px; }
.sq-irt-details summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--primary);
  font-size: 0.82rem;
}
.sq-irt-details ul {
  margin: 6px 0 0;
  padding-left: 18px;
  font-size: 0.82rem;
  line-height: 1.5;
}
.sq-irt-details li { margin-bottom: 4px; }
.sq-irt-theory p { margin: 6px 0 4px; font-size: 0.82rem; line-height: 1.5; }
.sq-irt-theory em { color: var(--primary); font-style: italic; }

/* ── 0148: IRT Adaptive — Gap Attribution ───────────────────────────── */
.gap-attribution {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 8px 12px;
  background: var(--bg-surface, #f9f9f9);
  border-radius: 8px;
  border-left: 3px solid var(--warning, #f59e0b);
  font-size: 0.85rem;
}
[data-theme="dark"] .gap-attribution { background: var(--bg-card, #1e293b); }
.gap-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 12px;
  font-weight: 600;
  font-size: 0.8rem;
  white-space: nowrap;
}
.gap-badge--confusion { background: #fef3c7; color: #92400e; }
.gap-badge--prerequisite { background: #dbeafe; color: #1e40af; }
.gap-badge--direct { background: #fee2e2; color: #991b1b; }
[data-theme="dark"] .gap-badge--confusion { background: #78350f; color: #fde68a; }
[data-theme="dark"] .gap-badge--prerequisite { background: #1e3a5f; color: #93c5fd; }
[data-theme="dark"] .gap-badge--direct { background: #7f1d1d; color: #fca5a5; }
.gap-services { color: var(--text-muted); font-size: 0.8rem; }

/* ── 0148: Knowledge Gaps Panel (Results) ───────────────────────────── */
.sq-gaps-panel {
  margin-top: 16px;
  padding: 16px;
  background: var(--bg-surface, #f9f9f9);
  border-radius: 10px;
  border: 1px solid var(--border-light, #e5e7eb);
}
[data-theme="dark"] .sq-gaps-panel { background: var(--bg-card, #1e293b); border-color: var(--border-light, #334155); }
.sq-gaps-panel h3 {
  margin: 0 0 12px 0;
  font-size: 1rem;
  color: var(--text-primary);
}
.gap-group { margin-bottom: 12px; }
.gap-group:last-child { margin-bottom: 0; }
.gap-group h4 {
  margin: 0 0 6px 0;
  font-size: 0.85rem;
  font-weight: 600;
}
.gap-group--confusion h4 { color: #d97706; }
.gap-group--prerequisite h4 { color: #2563eb; }
.gap-group--direct h4 { color: #dc2626; }
[data-theme="dark"] .gap-group--confusion h4 { color: #fbbf24; }
[data-theme="dark"] .gap-group--prerequisite h4 { color: #60a5fa; }
[data-theme="dark"] .gap-group--direct h4 { color: #f87171; }
.gap-item {
  padding: 4px 0 4px 12px;
  font-size: 0.82rem;
  color: var(--text-secondary);
  border-left: 2px solid var(--border-light);
}

/* ── 0148: Difficulty Alignment Bar ─────────────────────────────────── */
.svc-difficulty-align {
  margin: 10px 0;
  padding: 8px 0;
}
.svc-da-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  display: block;
  margin-bottom: 6px;
}
.svc-da-bar {
  position: relative;
  height: 20px;
  background: var(--bg-surface, #f3f4f6);
  border-radius: 10px;
  overflow: visible;
}
[data-theme="dark"] .svc-da-bar { background: #1e293b; }
.svc-da-zone {
  position: absolute;
  top: 0;
  height: 100%;
  background: rgba(34, 197, 94, 0.15);
  border-radius: 10px;
}
.svc-da-proficiency, .svc-da-difficulty {
  position: absolute;
  top: -2px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
  transform: translateX(-50%);
  z-index: 1;
}
.svc-da-proficiency {
  background: var(--accent, #3b82f6);
  color: #fff;
}
.svc-da-difficulty {
  background: var(--warning, #f59e0b);
  color: #fff;
}
.svc-da-verdict {
  display: block;
  margin-top: 6px;
  font-size: 0.8rem;
  font-weight: 500;
}
.svc-da-verdict--ready { color: #16a34a; }
.svc-da-verdict--match { color: #2563eb; }
.svc-da-verdict--study { color: #dc2626; }
[data-theme="dark"] .svc-da-verdict--ready { color: #4ade80; }
[data-theme="dark"] .svc-da-verdict--match { color: #60a5fa; }
[data-theme="dark"] .svc-da-verdict--study { color: #f87171; }

/* ─── 0149: Socratic AI Tutor ──────────────────────────────────── */

/* Tutor panel — fullscreen overlay */
.tutor-panel {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: var(--bg-card);
  box-shadow: 0 0 40px rgba(0,0,0,0.15);
  z-index: 2000;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  padding: env(safe-area-inset-top, 0) env(safe-area-inset-right, 0) env(safe-area-inset-bottom, 0) env(safe-area-inset-left, 0);
}
.tutor-panel.open {
  opacity: 1;
  transform: translateY(0);
}

/* Tutor hint FAB — floating button with mascot */
.tutor-hint-fab {
  display: flex;
  align-items: center;
  gap: 8px;
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 1500;
  background: linear-gradient(135deg, #f0f9ff, #e0f2fe);
  border: 2px solid var(--primary);
  border-radius: 28px;
  padding: 10px 18px 10px 10px;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
  animation: tutor-hint-bounce 0.5s ease-out;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.tutor-hint-fab:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 20px rgba(0,0,0,0.2);
}
.tutor-hint-fab:active {
  transform: scale(0.97);
}
.tutor-hint-fab .tutor-hint-mascot {
  width: 36px;
  height: 36px;
}
.tutor-hint-label {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--primary);
  white-space: nowrap;
}
@keyframes tutor-hint-bounce {
  0% { opacity: 0; transform: translateY(20px) scale(0.9); }
  60% { opacity: 1; transform: translateY(-4px) scale(1.03); }
  100% { transform: translateY(0) scale(1); }
}
[data-theme="dark"] .tutor-hint-fab {
  background: linear-gradient(135deg, #1e293b, #0f172a);
  border-color: var(--primary);
}
@media (max-width: 600px) {
  .tutor-hint-fab {
    bottom: 16px;
    right: 16px;
    padding: 8px 14px 8px 8px;
  }
  .tutor-hint-fab .tutor-hint-mascot {
    width: 30px;
    height: 30px;
  }
  .tutor-hint-label { font-size: 0.82rem; }
}

.tutor-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.tutor-avatar {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  line-height: 0;
}
.tutor-avatar svg {
  width: 36px;
  height: 36px;
}
.tutor-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  flex: 1;
}
.tutor-close {
  background: none;
  border: none;
  padding: 8px;
  cursor: pointer;
  color: var(--text-primary);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
}
.tutor-close:hover {
  background: var(--bg-hover);
  color: var(--danger, #d32f2f);
}

.tutor-conversation {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 720px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}

.tutor-message {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  animation: tutor-msg-in 0.3s ease;
}
@keyframes tutor-msg-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.tutor-msg-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 0.85rem;
}
.tutor-msg-body {
  flex: 1;
  padding: 12px 16px;
  border-radius: 12px;
  background: var(--bg-hover);
  font-size: 0.95rem;
  line-height: 1.55;
}
.tutor-message--nudge .tutor-msg-icon { background: #dbeafe; color: #2563eb; }
.tutor-message--narrow .tutor-msg-icon { background: #fef3c7; color: #d97706; }
.tutor-message--subproblem .tutor-msg-icon { background: #ede9fe; color: #7c3aed; }
.tutor-message--debrief .tutor-msg-icon { background: #dcfce7; color: #16a34a; }
[data-theme="dark"] .tutor-message--nudge .tutor-msg-icon { background: #1e3a5f; }
[data-theme="dark"] .tutor-message--narrow .tutor-msg-icon { background: #422006; }
[data-theme="dark"] .tutor-message--subproblem .tutor-msg-icon { background: #2e1065; }
[data-theme="dark"] .tutor-message--debrief .tutor-msg-icon { background: #052e16; }

.tutor-actions {
  padding: 14px 16px;
  padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--border);
  display: flex;
  gap: 10px;
  flex-shrink: 0;
  max-width: 720px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
  justify-content: center;
}
.tutor-btn {
  padding: 12px 20px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  cursor: pointer;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background 0.15s;
  min-height: 44px;
  min-width: 44px;
}
.tutor-btn:hover {
  background: var(--bg-hover);
}
.tutor-btn--primary {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}
.tutor-btn--primary:hover {
  opacity: 0.9;
}
.tutor-btn--done {
  background: var(--success, #16a34a);
  color: #fff;
  border-color: var(--success, #16a34a);
}

/* ─── 0193: Study Tutor Memory Cards ─────────────────────────── */

.tutor-message--memory-opening .tutor-msg-icon {
  background: #e0f2fe;
  color: #0284c7;
}
[data-theme="dark"] .tutor-message--memory-opening .tutor-msg-icon {
  background: #0c4a6e;
  color: #7dd3fc;
}

.tutor-message--memory-recap .tutor-msg-icon {
  background: #dcfce7;
  color: #16a34a;
}
[data-theme="dark"] .tutor-message--memory-recap .tutor-msg-icon {
  background: #052e16;
  color: #4ade80;
}

.tutor-memory-card {
  background: var(--bg-card, #fff);
  border: 1px solid var(--border-light, #e5e7eb);
  border-radius: 12px;
  padding: 16px;
  margin: 8px 0;
  animation: tutor-msg-in 0.3s ease;
  overflow-wrap: break-word;
  word-break: break-word;
}

.tutor-memory-card-header {
  font-weight: 700;
  font-size: 0.95rem;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-light, #e5e7eb);
  line-height: 1.4;
}

.tutor-memory-answer-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--success, #16a34a);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 800;
  margin-right: 6px;
  vertical-align: middle;
}

.tutor-memory-section {
  margin-bottom: 10px;
}

.tutor-memory-section-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted, #6b7280);
  margin-bottom: 4px;
}

.tutor-memory-section-text {
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--text, #1f2937);
}

.tutor-memory-mnemonic {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  border-radius: 8px;
  padding: 10px 12px;
  margin: 8px 0;
}
[data-theme="dark"] .tutor-memory-mnemonic {
  background: linear-gradient(135deg, #422006 0%, #78350f 100%);
}

.tutor-memory-mnemonic-text {
  font-size: 1.05rem;
  font-weight: 800;
  color: #92400e;
  letter-spacing: 0.3px;
}
[data-theme="dark"] .tutor-memory-mnemonic-text {
  color: #fbbf24;
}

.tutor-memory-examline {
  background: var(--bg, #f9fafb);
  border-left: 3px solid var(--primary, #2563eb);
  border-radius: 0 8px 8px 0;
  padding: 8px 12px;
}
[data-theme="dark"] .tutor-memory-examline {
  background: var(--bg-card, #1f2937);
}

/* Tutor stats on progress screen */
#progress-tutor-stats,
#progress-teaching-stats {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  margin-bottom: 32px;
}

#progress-tutor-stats:empty,
#progress-teaching-stats:empty {
  display: none;
}

#progress-tutor-stats .section-title,
#progress-teaching-stats .section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 16px;
}

#progress-tutor-stats .mascot-svg {
  width: 36px;
  height: 36px;
}

.tutor-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  text-align: center;
}

.tutor-stats .stat-card {
  padding: 12px 8px;
  background: var(--bg);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
}

.tutor-stats .stat-value {
  display: block;
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--text);
}

.tutor-stats .stat-label {
  font-size: 0.75rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

@media (max-width: 600px) {
  .tutor-stats { grid-template-columns: 1fr; }
}

/* Mobile: tutor panel refinements */
@media (max-width: 640px) {
  .tutor-header {
    padding: 12px 12px;
  }
  .tutor-conversation {
    padding: 14px 12px;
    gap: 12px;
  }
  .tutor-actions {
    padding: 12px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  }
  .tutor-msg-body {
    font-size: 0.92rem;
  }
  .tutor-memory-card {
    padding: 14px 12px;
  }
  .tutor-memory-section-text {
    font-size: 0.86rem;
  }
}

/* ── 0150: Knowledge Tracing & Prerequisite Graph ── */

/* Heatmap blocked cells */
.hm-blocked {
  background: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 3px,
    rgba(0,0,0,0.08) 3px,
    rgba(0,0,0,0.08) 6px
  ) !important;
  opacity: 0.6;
}
.hm-lock {
  position: absolute;
  top: 1px;
  right: 1px;
  opacity: 0.7;
  pointer-events: none;
}
.hm-lock-icon { width: 10px; height: 10px; }
.sq-heatmap-dot--blocked {
  display: inline-block;
  width: 12px; height: 12px;
  border-radius: 2px;
  background: repeating-linear-gradient(
    45deg,
    var(--text-secondary),
    var(--text-secondary) 2px,
    transparent 2px,
    transparent 4px
  );
  vertical-align: middle;
  margin-right: 4px;
}

/* Service detail prerequisite chain */
.svc-prereqs { margin-bottom: 16px; }
.svc-prereqs h4 { margin: 0 0 8px; font-size: 0.9rem; color: var(--text-secondary); }
.prereq-chain {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 8px;
}
.prereq-node {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 500;
  background: var(--surface);
  border: 1px solid var(--border);
}
.prereq-node--mastered { border-color: var(--success); color: var(--success); }
.prereq-node--weak { border-color: var(--danger); color: var(--danger); }
.prereq-node--current {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}
.prereq-arrow {
  color: var(--text-secondary);
  font-size: 0.9rem;
  margin: 0 2px;
}
.prereq-message {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-top: 4px;
}
.prereq-message--blocked { color: var(--danger); }

/* Mind map prereq blocked nodes */
.mm-prereq-blocked {
  border: 2px dashed var(--text-secondary) !important;
  opacity: 0.55;
  transition: opacity 0.2s;
}
.mm-prereq-blocked:hover { opacity: 1; }

/* Mind map node panel prerequisites */
.mm-prereq-section { margin-top: 12px; border-top: 1px solid var(--border); padding-top: 8px; }
.mm-prereq-section h4 { margin: 0 0 6px; font-size: 0.85rem; color: var(--text-secondary); }
.mm-prereq-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 0;
  font-size: 0.8rem;
}
.mm-prereq-item--mastered span:first-child { color: var(--success); }
.mm-prereq-item--weak span:first-child { color: var(--danger); }

/* Smart Quiz prerequisite panel */
.sq-prereq-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  margin-top: 16px;
}
.sq-prereq-panel h3 { margin: 0 0 12px; font-size: 1rem; }
.prereq-list { list-style: none; margin: 0; padding: 0; }
.prereq-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.prereq-item:last-child { border-bottom: none; }
.prereq-item--mastered .prereq-name { color: var(--success); }
.prereq-item--weak .prereq-name { color: var(--danger); }
.prereq-name { font-size: 0.9rem; font-weight: 500; }
.prereq-status {
  font-size: 0.75rem;
  padding: 2px 8px;
  border-radius: 10px;
  background: var(--surface-alt, var(--border));
}

/* Learning path panel (progress screen) */
.learning-path-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
}
.learning-path-panel h3 { margin: 0 0 16px; font-size: 1.1rem; }
.lp-steps { display: flex; flex-direction: column; gap: 12px; }
.lp-step {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  background: var(--bg);
  border-radius: 8px;
  border: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.15s, box-shadow 0.15s;
}
.lp-step:hover { background: var(--bg-hover, var(--bg-card)); box-shadow: 0 2px 6px rgba(0,0,0,.08); }
.lp-step:active { transform: scale(0.99); }
.lp-step--foundation { border-left: 3px solid var(--primary); }
.lp-step--weak { border-left: 3px solid var(--warning); }
.lp-step-num {
  flex-shrink: 0;
  width: 28px; height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 600;
}
.lp-step-body { flex: 1; min-width: 0; }
.lp-step-service { font-weight: 600; font-size: 0.95rem; margin-bottom: 2px; }
.lp-step-message { font-size: 0.8rem; color: var(--text-secondary); }
.lp-step-action { flex-shrink: 0; display: flex; align-items: center; color: var(--primary); opacity: 0.5; transition: opacity 0.15s; }
.lp-step:hover .lp-step-action { opacity: 1; }
.lp-step-action .icon { width: 18px; height: 18px; }

/* Next Step card (home screen) */
.next-step-card {
  background: var(--surface);
  border: 1px solid var(--primary);
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 20px;
  text-align: center;
}
.next-step-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
  margin-bottom: 4px;
}
.next-step-service {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 4px;
}
.next-step-reason {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-bottom: 10px;
}

/* ═══ 0161: Architecture Diagrams (Mermaid) ═════════════════════════════════ */

/* Mermaid container */
.mermaid-container {
  margin: 16px 0;
  padding: 16px;
  background: var(--bg-card);
  border-radius: 8px;
  border: 1px solid var(--border-color);
  overflow-x: auto;
  text-align: center;
}
.mermaid-container svg { max-width: 100%; height: auto; }
.mermaid-fallback {
  text-align: left;
  white-space: pre-wrap;
  font-size: 0.85em;
  color: var(--text-secondary);
}

/* Diagram in explanation panel */
.explanation-diagram-details {
  margin-top: 12px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  overflow: hidden;
}
.explanation-diagram-details summary {
  padding: 8px 12px;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--accent);
  background: var(--card-bg);
}
.explanation-diagram-details summary:hover { background: var(--hover-bg); }
.explanation-diagram {
  padding: 12px;
  background: var(--card-bg);
}

/* Diagram flashcard styles */
.card-diagram-container {
  padding: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.card-diagram-prompt {
  font-size: 0.95rem;
  color: var(--text-secondary);
  margin-bottom: 8px;
  text-align: center;
}
.card-diagram-description {
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin-top: 8px;
  text-align: center;
  line-height: 1.4;
}

/* Knowledge map diagram tab */
.km-tab--diagram { display: inline-flex; align-items: center; gap: 4px; }
.km-diagram-view { padding: 12px; }
.km-diagram-desc {
  font-size: 0.9rem;
  color: var(--text-secondary);
  text-align: center;
  margin-top: 8px;
  line-height: 1.4;
}

/* Service detail diagram button */
.svc-diagram-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 6px;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  color: var(--accent);
  font-size: 0.82rem;
  cursor: pointer;
  margin-top: 8px;
}
.svc-diagram-btn:hover { background: var(--hover-bg); }

/* Connection builder overlay */
.conn-builder-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.conn-builder-content {
  background: var(--bg-card);
  border-radius: 12px;
  padding: 20px;
  max-width: 700px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0 8px 32px rgba(0,0,0,.3);
}
.conn-builder-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.conn-builder-head h3 { margin: 0; font-size: 1.1rem; }
.conn-builder-close {
  background: none; border: none; font-size: 1.5rem; cursor: pointer;
  color: var(--text-secondary); line-height: 1;
}
.conn-builder-body { min-height: 200px; }
.conn-builder-progress {
  font-size: 0.85rem;
  color: var(--text-secondary);
}

/* ─── 0152: Readiness Dashboard ──────────────────────────────────────────── */

.readiness-dashboard {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}
.rd-subtitle {
  color: var(--text-secondary);
  font-size: 0.88rem;
  margin: 0 0 0.75rem;
  line-height: 1.4;
}
.rd-toggle-wrap {
  margin: 0.5rem 0 1rem;
}
.rd-toggle-btn {
  font-size: 0.82rem;
  padding: 0.25rem 0.5rem;
}
.rd-toggle-btn .icon-xs { transition: transform 0.2s; }
.rd-toggle-btn .rd-toggle-open { transform: rotate(90deg); }

/* Overall pass probability */
.rd-overall {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.25rem;
  border-radius: var(--radius);
  background: var(--bg-card);
  margin-bottom: 1.25rem;
  border: 1px solid var(--border);
}
.rd-prob-ring { flex-shrink: 0; }
.rd-ring { width: 80px; height: 80px; }
.rd-ring-bg {
  fill: none;
  stroke: var(--border);
  stroke-width: 5;
}
.rd-ring-fill {
  fill: none;
  stroke: var(--primary);
  stroke-width: 5;
  stroke-linecap: round;
  transition: stroke-dashoffset .5s ease;
}
.rd-ring-text {
  font-size: 16px;
  font-weight: 700;
  fill: var(--text-primary);
  text-anchor: middle;
  dominant-baseline: middle;
}
.rd-ring-label {
  font-size: 7px;
  fill: var(--text-secondary);
  text-anchor: middle;
  dominant-baseline: middle;
}
.rd-confidence {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.rd-ci {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text-primary);
}
.rd-ci-range {
  font-size: 0.82rem;
  color: var(--text-secondary);
}
.rd-caveat {
  font-size: 0.75rem;
  color: var(--text-secondary);
  font-style: italic;
  max-width: 280px;
  line-height: 1.4;
}

/* Domain readiness grid */
.rd-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 0.75rem;
}
.rd-cell {
  padding: 0.875rem;
  border-radius: var(--radius);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 4px solid var(--border);
  cursor: pointer;
  transition: box-shadow .2s;
}
.rd-cell:hover { box-shadow: 0 2px 8px rgba(0,0,0,.1); }
.rd-cell--ready   { border-left-color: var(--success); }
.rd-cell--almost  { border-left-color: var(--warning); }
.rd-cell--developing { border-left-color: var(--clr-near-miss, #e67e22); }
.rd-cell--beginning  { border-left-color: var(--danger); }

.rd-cell-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.4rem;
}
.rd-cell-title {
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--text-primary);
}
.rd-cell-pct {
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--text-secondary);
}
.rd-cell-meter {
  height: 6px;
  border-radius: 3px;
  background: var(--border);
  margin-bottom: 0.4rem;
  overflow: hidden;
}
.rd-cell-fill {
  height: 100%;
  border-radius: 3px;
  background: var(--primary);
  transition: width .4s ease;
}
.rd-cell--ready .rd-cell-fill   { background: var(--success); }
.rd-cell--almost .rd-cell-fill  { background: var(--warning); }
.rd-cell--developing .rd-cell-fill { background: var(--clr-near-miss, #e67e22); }
.rd-cell--beginning .rd-cell-fill  { background: var(--danger); }

.rd-cell-signals {
  display: flex;
  gap: 0.75rem;
  font-size: 0.75rem;
  color: var(--text-secondary);
  margin-bottom: 0.3rem;
}
.rd-signal {
  display: flex;
  align-items: center;
  gap: 2px;
}
/* Expanded domain detail panel */
.rd-detail {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border);
}
.rd-detail.hidden { display: none; }

/* Signal breakdown bars */
.rd-signal-breakdown { margin-bottom: 0.75rem; }
.rd-sig-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.3rem;
}
.rd-sig-label {
  font-size: 0.75rem;
  color: var(--text-secondary);
  width: 80px;
  flex-shrink: 0;
}
.rd-sig-bar {
  flex: 1;
  height: 6px;
  border-radius: 3px;
  background: var(--border);
  overflow: hidden;
}
.rd-sig-fill {
  height: 100%;
  border-radius: 3px;
  background: var(--primary);
}
.rd-sig-val {
  font-size: 0.75rem;
  color: var(--text-secondary);
  width: 35px;
  text-align: right;
  flex-shrink: 0;
}

/* Difficulty alignment chart */
.rd-difficulty-chart { margin-bottom: 0.75rem; }
.rd-dc-header {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}
.rd-dc-bar { position: relative; margin-bottom: 0.5rem; }
.rd-dc-scale {
  display: flex;
  justify-content: space-between;
  font-size: 0.65rem;
  color: var(--text-secondary);
  margin-bottom: 0;
  position: relative;
  height: 1rem;
}
.rd-dc-mark { position: absolute; transform: translateX(-50%); }
.rd-dc-mark:first-child { transform: none; }
.rd-dc-mark:last-child { transform: translateX(-100%); }
.rd-dc-track {
  position: relative;
  height: 8px;
  border-radius: 4px;
  background: var(--border);
  margin-top: 0.5rem;
  margin-bottom: 1.5rem;
}
.rd-dc-gap {
  position: absolute;
  top: 0;
  height: 100%;
  background: rgba(var(--clr-warning-rgb, 255, 193, 7), 0.3);
  border-radius: 4px;
}
.rd-dc-indicator {
  position: absolute;
  top: 50%;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  border: 2px solid var(--bg-card);
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.rd-dc-indicator span {
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.65rem;
  font-weight: 600;
  white-space: nowrap;
  color: var(--text-primary);
}
.rd-dc-indicator--below span {
  bottom: auto;
  top: calc(100% + 4px);
}
.rd-dc-indicator--practice { background: var(--primary); }
.rd-dc-indicator--exam { background: var(--danger); }
.rd-dc-message {
  font-size: 0.78rem;
  color: var(--text-secondary);
  font-style: italic;
  margin-top: 0.25rem;
}

/* Recommendation cards */
.rd-recommendation {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 0;
  border-top: 1px solid var(--border);
}
.rd-rec-body { flex: 1; }
.rd-rec-text {
  font-size: 0.82rem;
  color: var(--text-primary);
}
.rd-rec-time {
  font-size: 0.72rem;
  color: var(--text-secondary);
}
.rd-rec-go { flex-shrink: 0; }

/* Home readiness badge */
.home-readiness {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 1rem;
  border-radius: var(--radius);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 3px solid var(--primary);
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
}
.home-readiness.hidden { display: none; }
.home-rd-ring { flex-shrink: 0; }
.home-rd-svg { width: 44px; height: 44px; }
.home-rd-pct {
  font-size: 11px;
  font-weight: 700;
  fill: var(--text-primary);
  text-anchor: middle;
  dominant-baseline: middle;
}
.home-rd-info { flex: 1; min-width: 0; }
.home-rd-label {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text-primary);
  margin-bottom: 0.15rem;
}
.home-rd-action {
  font-size: 0.8rem;
  color: var(--text-secondary);
  line-height: 1.3;
}
.home-rd-more {
  flex-shrink: 0;
  font-weight: 500;
}

/* Responsive: stack grid on mobile */
@media (max-width: 600px) {
  .rd-grid { grid-template-columns: 1fr; }
  .rd-overall { flex-direction: column; text-align: center; }
  .home-readiness { flex-wrap: wrap; gap: 0.75rem; }
  .home-rd-action { white-space: normal; }
}

/* ─── 0167: Diagram Quiz ─────────────────────────────────────────── */

.dq-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}
.dq-progress {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-secondary);
}
.dq-diagram-area {
  max-width: 100%;
  overflow-x: auto;
  margin-bottom: 1.25rem;
  padding: 1rem;
  background: var(--card-bg);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  text-align: center;
}
.dq-diagram-area svg {
  max-width: 100%;
  height: auto;
}
/* 0185: Service icon styling in diagrams */
.dq-service-icon {
  pointer-events: none;
  opacity: 0.9;
}
/* 0185: Ensure node label text stays readable over colored backgrounds */
.dq-diagram-area .node .nodeLabel,
.mermaid-container .node .nodeLabel {
  font-weight: 600;
}
.dq-prompt {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--accent);
  margin-bottom: 1rem;
  padding: 0.75rem 1rem;
  background: var(--card-bg);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
}
.dq-hint {
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin-bottom: 0.75rem;
  padding: 0.5rem 0.75rem;
  background: var(--surface);
  border-radius: var(--radius);
  font-style: italic;
}
.dq-input-area {
  margin-bottom: 1rem;
}
.dq-text-input {
  width: 100%;
  padding: 0.65rem 0.85rem;
  font-size: 1rem;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  background: var(--card-bg);
  color: var(--text-primary);
  transition: border-color 0.2s;
}
.dq-text-input:focus {
  border-color: var(--accent);
  outline: none;
}
.dq-choices {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.dq-choice {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.85rem;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.dq-choice:hover {
  border-color: var(--accent);
  background: var(--surface);
}
.dq-choice input[type="radio"] {
  accent-color: var(--accent);
}
.dq-actions {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.dq-feedback {
  margin-bottom: 1rem;
  padding: 0.85rem 1rem;
  border-radius: var(--radius);
  border-left: 4px solid var(--border);
}
.dq-feedback-correct {
  color: var(--success, #22c55e);
  font-weight: 600;
  margin-bottom: 0.5rem;
}
.dq-feedback-wrong {
  color: var(--danger);
  font-weight: 600;
  margin-bottom: 0.5rem;
}
.dq-exam-tip {
  font-size: 0.88rem;
  color: var(--text-secondary);
  padding: 0.5rem 0.75rem;
  background: var(--surface);
  border-radius: var(--radius);
  margin-top: 0.5rem;
}
.dq-next {
  text-align: center;
  margin-bottom: 1rem;
}

/* SVG label states */
.dq-masked-label {
  fill: var(--accent) !important;
  font-weight: 700 !important;
  font-size: 1.1em !important;
}
.dq-challenge-correct {
  fill: var(--success, #22c55e) !important;
  font-weight: 700 !important;
}
.dq-challenge-wrong {
  fill: var(--danger) !important;
  font-weight: 700 !important;
}

/* Results */
.dq-results-card {
  background: var(--card-bg);
  border-radius: var(--radius);
  padding: 1.5rem;
  border: 1px solid var(--border);
}
.dq-results-card h3 {
  margin-bottom: 0.75rem;
  font-size: 1.25rem;
}
.dq-score {
  font-size: 1.1rem;
  margin-bottom: 1.25rem;
  padding: 0.75rem;
  background: var(--surface);
  border-radius: var(--radius);
  text-align: center;
}
.dq-rotation {
  font-size: 0.85rem;
  color: var(--text-muted);
  text-align: center;
  margin-bottom: 1rem;
}
.dq-breakdown {
  margin-bottom: 1.25rem;
}
.dq-breakdown h4,
.dq-challenge-list h4 {
  font-size: 0.95rem;
  color: var(--text-secondary);
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.dq-breakdown-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--border);
}
.dq-breakdown-row.dq-weak {
  color: var(--danger);
}
.dq-review-tag {
  font-size: 0.75rem;
  background: var(--danger);
  color: #fff;
  padding: 0.1rem 0.4rem;
  border-radius: var(--radius);
  margin-left: 0.5rem;
}
.dq-challenge-list {
  margin-bottom: 1.25rem;
}
.dq-challenge-item {
  padding: 0.35rem 0;
  font-size: 0.9rem;
  border-bottom: 1px solid var(--border);
}
.dq-icon-correct { color: var(--success, #22c55e); }
.dq-icon-wrong { color: var(--danger); }
.dq-results-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 1rem;
}

/* Action card — diagram variant */
.action-card--diagram { --card-accent: #7c3aed; }
.action-card--diagram .action-icon { color: #7c3aed; }
[data-theme="dark"] .action-card--diagram { --card-accent: #a78bfa; }
[data-theme="dark"] .action-card--diagram .action-icon { color: #a78bfa; }

@media (max-width: 600px) {
  .dq-actions { flex-direction: column; }
  .dq-results-actions { flex-direction: column; }
  .dq-prompt { font-size: 1rem; }
}

/* ── 0168: Learning Features Catalog ─────────────────────────────────────── */
.action-card--features { --card-accent: #0ea5e9; }
.action-card--features .action-icon { color: #0ea5e9; }
[data-theme="dark"] .action-card--features { --card-accent: #38bdf8; }
[data-theme="dark"] .action-card--features .action-icon { color: #38bdf8; }

#screen-features .container {
  margin: 36px auto;
}

.features-intro {
  color: var(--text-muted);
  margin-bottom: 1.5rem;
  line-height: 1.6;
}

.features-group {
  margin-bottom: 2.5rem;
}

.features-group-title {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted);
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border);
}

.feature-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  margin-bottom: 0.625rem;
  overflow: hidden;
  transition: box-shadow 0.2s, border-color 0.2s;
}

.feature-card:hover {
  box-shadow: var(--shadow-md);
}

.feature-card--expanded {
  border-color: var(--primary);
}

.feature-card-header {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  padding: 1.125rem 1.25rem;
  cursor: pointer;
}

.feature-card-icon {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
}

.feature-card-info {
  flex: 1;
  min-width: 0;
}

.feature-card-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 0.2rem;
}

.feature-card-summary {
  font-size: 0.84rem;
  color: var(--text-muted);
  line-height: 1.5;
}

.feature-card-chevron {
  flex-shrink: 0;
  color: var(--text-muted);
  transition: transform 0.2s;
  margin-top: 4px;
}

.feature-card--expanded .feature-card-chevron {
  color: var(--primary);
  transform: rotate(180deg);
}

.feature-card-details {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  padding: 0 1.25rem;
}

.feature-card--expanded .feature-card-details {
  max-height: 2000px;
  padding: 0 1.25rem 1.25rem;
}

.feature-detail-section {
  margin-bottom: 0.5rem;
  padding: 0.875rem 1rem;
  background: color-mix(in srgb, var(--primary) 6%, var(--bg));
  border-radius: 8px;
  border-left: 3px solid var(--primary);
}

.feature-detail-section strong {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: var(--primary);
  margin-bottom: 0.375rem;
}

.feature-detail-section p {
  font-size: 0.875rem;
  color: var(--text);
  line-height: 1.65;
  margin: 0;
}

.feature-card-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 1rem;
  flex-wrap: wrap;
  align-items: center;
}

.feature-badge {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
}

@media (max-width: 600px) {
  .feature-card-header { padding: 0.875rem 1rem; }
  .feature-card--expanded .feature-card-details { padding: 0 1rem 1rem; }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   Video-Mindmap Sync (0174)
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ─── Sync highlight states ──────────────────────────────────────────────── */
.vmsync-active {
  outline: 2px solid var(--primary) !important;
  outline-offset: 2px;
  border-radius: var(--radius-xs);
  animation: vmsync-pulse 1.5s ease-in-out infinite;
  z-index: 2;
}
.vmsync-active .vmsync-text,
.vmsync-active .vmsync-feature,
.vmsync-active .vmsync-root { font-weight: 600; }

.vmsync-visited {
  opacity: 1;
}
.vmsync-visited .vmsync-text::after {
  content: ' \2713';
  color: var(--success);
  font-size: 0.75em;
  margin-left: 4px;
}

.vmsync-future {
  opacity: 0.85;
}

/* Timestamp badge inline */
.vmsync-time {
  font-size: 0.7em;
  color: var(--text-muted);
  background: var(--surface);
  padding: 1px 5px;
  border-radius: 4px;
  margin-right: 6px;
  font-family: var(--font-mono);
  vertical-align: middle;
}

.vmsync-root {
  font-weight: 700;
  font-size: 1.05em;
}

.vmsync-feature {
  font-weight: 500;
}

.vmsync-empty {
  text-align: center;
  color: var(--text-muted);
  padding: 2rem;
  font-style: italic;
}

@keyframes vmsync-pulse {
  0%, 100% { outline-color: var(--primary); box-shadow: 0 0 0 0 rgba(255,153,0,0.3); }
  50% { outline-color: var(--primary-hover); box-shadow: 0 0 8px 2px rgba(255,153,0,0.25); }
}

/* Progressive reveal animation */
.vmsync-reveal {
  animation: vmsync-fadein 0.4s ease-out;
}
@keyframes vmsync-fadein {
  from { opacity: 0; transform: translateX(-10px); }
  to { opacity: 1; transform: translateX(0); }
}

/* ─── Video Training mindmap container ──────────────────────────────────── */
.vt-mindmap-wrap {
  margin-top: 0.75rem;
}

.vt-mindmap-header-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.vt-mindmap-toggle {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.85rem;
  cursor: pointer;
  color: var(--text-secondary);
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  transition: background var(--transition), color var(--transition);
}
.vt-mindmap-toggle:hover {
  background: var(--bg-hover);
  color: var(--text);
}
.vt-mindmap-toggle .icon { width: 16px; height: 16px; }

.vt-mindmap-container {
  min-height: 300px;
  max-height: 50vh;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-card);
  margin-top: 0.5rem;
  position: relative;
}

/* ─── Video Player Screen (lecture player) ──────────────────────────────── */
.vp-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.vp-header .btn-back {
  flex-shrink: 0;
}
.vp-header-info {
  flex: 1;
  min-width: 0;
}
.vp-header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}
.vp-screenshot-btn {
  white-space: nowrap;
}
.vp-section-name {
  font-size: 0.8rem;
  color: var(--text-muted);
  display: block;
  margin-bottom: 0.15rem;
}
.vp-lecture-title {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--text);
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vp-layout {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.vp-video-section {
  width: 100%;
  position: relative;
}
.vp-video-section video {
  width: 100%;
  border-radius: var(--radius);
  background: #000;
  max-height: 70vh;
}

/* Fullscreen screenshot button — overlays video */
.vp-fs-screenshot-btn {
  display: none;
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2147483647;
  background: rgba(0,0,0,0.55);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 6px;
  padding: 6px 8px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s;
}
.vp-video-section:fullscreen .vp-fs-screenshot-btn,
.vp-video-section:-webkit-full-screen .vp-fs-screenshot-btn {
  display: block;
}
.vp-video-section:fullscreen:hover .vp-fs-screenshot-btn,
.vp-video-section:-webkit-full-screen:hover .vp-fs-screenshot-btn {
  opacity: 1;
}
.vp-fs-screenshot-btn:hover {
  background: rgba(0,0,0,0.8);
  border-color: rgba(255,255,255,0.6);
}
.vp-video-section:fullscreen video,
.vp-video-section:-webkit-full-screen video {
  width: 100%;
  height: 100%;
  max-height: none;
  border-radius: 0;
}

.vp-mindmap-section {
  width: 100%;
  padding-bottom: 60px;
}
.vp-mindmap-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.vp-mindmap-header-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.vp-mindmap-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.vp-mindmap-label .icon { width: 16px; height: 16px; }
.vp-mindmap-label,
.vp-screenshot-btn {
  flex-shrink: 0;
}

.vp-mindmap-container {
  height: 27vh;
  min-height: 180px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-card);
  position: relative;
}
.vp-mindmap-container.collapsed {
  display: none;
}

@media (max-width: 720px) {
  .vp-header {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .vp-header-info {
    flex-basis: 100%;
    order: 3;
  }

  .vp-header-actions {
    margin-left: auto;
  }

  .vp-lecture-title {
    white-space: normal;
  }
}

/* Auto-follow toggle */
.vmsync-follow-btn {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.78rem;
  cursor: pointer;
  padding: 0.25rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  color: var(--text-muted);
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.vmsync-follow-btn .icon { width: 14px; height: 14px; }
.vmsync-follow-btn:hover {
  background: var(--bg-hover);
  color: var(--text);
}
.vmsync-follow-btn.active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}
.vmsync-follow-btn.active:hover {
  opacity: 0.9;
}

/* Dark theme overrides */
[data-theme="dark"] .vmsync-time {
  background: var(--bg-secondary);
  color: var(--text-muted);
}
[data-theme="dark"] .vmsync-active {
  outline-color: var(--primary);
}
[data-theme="dark"] .vt-mindmap-container,
[data-theme="dark"] .vp-mindmap-container {
  background: var(--bg-secondary);
  border-color: var(--border);
}