/* ============================================================================
   UNITY TOYBOX STUDIO — COZY CLAYMORPHIC & NINTENDO-CRAFT UX DESIGN SYSTEM
   Aesthetic: Tactile Toy Blocks + Warm Craft Paper + Friendly Student Notebook
   ============================================================================ */

:root {
  /* Warm Daylight Craft Studio Surfaces */
  --bg-canvas: #faf6f0;
  --bg-canvas-secondary: #f3ede2;
  --surface-card: #ffffff;
  --surface-soft: #fdfbf7;
  --surface-tinted: #f0fdfa;
  --surface-notebook: #fffdf8;
  --surface-notebook-bar: #f5efe2;
  --surface-notebook-gutter: #f8f3e8;

  /* Tactile Borders & 3D Toy-Block Lips */
  --border-main: #dce3ec;
  --border-strong: #c4d0df;
  --card-lip: #d5deea;

  /* Friendly High-Contrast Ink Colors */
  --text-main: #1e293b;
  --text-secondary: #475569;
  --text-muted: #64748b;

  /* 2D Dimension Theme ("Sunny Mint & Sky Arcade") */
  --dim-primary: #0d9488;
  --dim-primary-hover: #0f766e;
  --dim-primary-lip: #0f766e;
  --dim-primary-soft: #ccfbf1;
  --dim-primary-tint: #f0fdfa;
  --dim-secondary: #0284c7;
  --dim-secondary-soft: #e0f2fe;
  --dim-warm: #f59e0b;
  --dim-warm-soft: #fef3c7;

  /* Semantic Accents (Encouraging & Gentle) */
  --accent-emerald: #10b981;
  --accent-emerald-lip: #059669;
  --accent-emerald-soft: #d1fae5;
  --accent-amber: #f59e0b;
  --accent-amber-lip: #d97706;
  --accent-amber-soft: #fef3c7;
  --accent-coral: #f43f5e;
  --accent-coral-lip: #e11d48;
  --accent-coral-soft: #ffe4e6;
  --accent-purple: #7c3aed;
  --accent-purple-lip: #5b21b6;
  --accent-purple-soft: #ede9fe;

  /* Typography */
  --font-ar: 'Readex Pro', 'IBM Plex Sans Arabic', system-ui, -apple-system, sans-serif;
  --font-display: 'Fredoka', 'Readex Pro', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* Radii & Tactile Shadows */
  --radius-xl: 24px;
  --radius-lg: 18px;
  --radius-md: 14px;
  --radius-sm: 10px;
  --shadow-toy-card: 0 5px 0 var(--card-lip), 0 12px 24px -8px rgba(30, 41, 59, 0.07);
  --shadow-toy-sm: 0 3px 0 var(--card-lip), 0 6px 12px -4px rgba(30, 41, 59, 0.05);
}

/* ============================================================================
   3D DIMENSION PALETTE ("Cozy Indigo & Coral Block-World")
   ============================================================================ */
html[data-dimension="3d"] {
  --bg-canvas: #f5f4fc;
  --bg-canvas-secondary: #eceaf9;
  --surface-tinted: #eef2ff;
  --border-main: #dcd9f0;
  --border-strong: #c7c2e8;
  --card-lip: #d0cbf0;

  --dim-primary: #6366f1;
  --dim-primary-hover: #4f46e5;
  --dim-primary-lip: #4338ca;
  --dim-primary-soft: #e0e7ff;
  --dim-primary-tint: #eef2ff;
  --dim-secondary: #f97316;
  --dim-secondary-soft: #ffedd5;
}

/* Visibility Helpers for 3D-only Controls */
html[data-dimension="2d"] .dim3d-only {
  display: none !important;
}

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

html, body {
  min-height: 100vh;
  background-color: var(--bg-canvas);
  color: var(--text-main);
  font-family: var(--font-ar);
  line-height: 1.65;
  overflow-x: hidden;
  transition: background-color 0.35s ease, color 0.25s ease;
}

/* Friendly Custom Scrollbar */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: var(--bg-canvas-secondary);
  border-radius: 99px;
}
::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 99px;
  border: 2px solid var(--bg-canvas-secondary);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--dim-primary);
}

/* ============================================================================
   COZY CRAFT-MAT DOT BACKDROP & PASTEL CLOUDS
   ============================================================================ */
.holo-backdrop {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.holo-grid-plane {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(var(--border-strong) 1.35px, transparent 1.35px);
  background-size: 26px 26px;
  opacity: 0.55;
}

.holo-glow-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(75px);
  opacity: 0.45;
  transition: background 0.5s ease;
}

.orb-a {
  width: 440px;
  height: 440px;
  top: -120px;
  right: -80px;
  background: var(--dim-primary-soft);
}

.orb-b {
  width: 400px;
  height: 400px;
  bottom: -120px;
  left: -80px;
  background: var(--dim-warm-soft);
}

/* ============================================================================
   TOP PLAYGROUND HEADER & TACTILE 2D / 3D WORLD SWITCHER
   ============================================================================ */
.command-bridge {
  position: sticky;
  top: 10px;
  z-index: 100;
  max-width: 1640px;
  margin: 10px auto 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 20px;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(12px);
  border: 2px solid var(--border-main);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-toy-card);
  flex-wrap: wrap;
}

.brand-cluster {
  display: flex;
  align-items: center;
  gap: 14px;
}

.holo-emblem {
  width: 56px;
  height: 56px;
  border-radius: 18px;
  background: var(--dim-primary-soft);
  border: 2px solid var(--dim-primary);
  box-shadow: 0 4px 0 var(--dim-primary-lip);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.holo-emblem:hover {
  transform: rotate(-5deg) scale(1.06);
}

.cube-svg {
  width: 44px;
  height: 44px;
}

.mascot-body {
  fill: var(--dim-primary);
}
.mascot-screen {
  fill: #ffffff;
}
.mascot-eye {
  fill: #1e293b;
}
.mascot-cheek {
  fill: #fb7185;
  opacity: 0.75;
}
.mascot-smile {
  stroke: var(--dim-primary);
}
.mascot-antenna {
  fill: var(--dim-warm);
}

.brand-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.brand-name {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text-main);
}

.engine-badge {
  font-family: var(--font-ar);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 99px;
  color: var(--dim-primary-hover);
  background: var(--dim-primary-soft);
  border: 1.5px solid var(--dim-primary);
}

.brand-sub {
  font-size: 0.82rem;
  color: var(--text-secondary);
  font-weight: 500;
  margin-top: 2px;
}

/* ============================================================================
   SMART DROPDOWN MENUS & HEADER SMART CONTROLS
   ============================================================================ */
.header-smart-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.smart-dropdown {
  position: relative;
  display: inline-block;
}

.smart-drop-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: 14px;
  border: 2px solid var(--border-main);
  background: #ffffff;
  color: var(--text-main);
  font-family: var(--font-ar);
  font-size: 0.83rem;
  cursor: pointer;
  box-shadow: 0 3px 0 var(--card-lip);
  transition: all 0.16s ease;
  text-align: right;
}

.smart-drop-trigger:hover {
  border-color: var(--dim-primary);
  transform: translateY(-1px);
}

.smart-dropdown.open > .smart-drop-trigger,
.smart-dropdown.open > .smart-menu-btn {
  border-color: var(--dim-primary);
  background: var(--dim-primary-tint);
  box-shadow: 0 2px 0 var(--dim-primary);
}

.drop-label-mini {
  font-size: 0.72rem;
  color: var(--text-muted);
  font-weight: 600;
}

.drop-chevron {
  font-size: 0.85rem;
  color: var(--dim-primary);
  transition: transform 0.2s ease;
}

.smart-dropdown.open .drop-chevron {
  transform: rotate(180deg);
}

.dim-trigger {
  background: var(--dim-primary-soft);
  border-color: var(--dim-primary);
  box-shadow: 0 3px 0 var(--dim-primary-lip);
}

.ws-trigger {
  background: #ffffff;
  border-color: var(--border-strong);
}

.smart-drop-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 250;
  min-width: 290px;
  background: #ffffff;
  border: 2.5px solid var(--dim-primary);
  border-radius: 18px;
  padding: 10px;
  box-shadow: 0 8px 0 var(--dim-primary-lip), 0 20px 38px rgba(15, 23, 42, 0.16);
  display: flex;
  flex-direction: column;
  gap: 6px;
  animation: popDownMenu 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.smart-drop-menu[hidden] {
  display: none !important;
}

@keyframes popDownMenu {
  from { opacity: 0; transform: translateY(-6px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.drop-menu-header {
  font-size: 0.73rem;
  font-weight: 700;
  color: var(--text-muted);
  padding: 4px 10px 6px;
  border-bottom: 1.5px dashed var(--border-main);
  margin-bottom: 2px;
}

.dim-drop-menu {
  min-width: 320px;
}

.dim-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 2px solid transparent;
  background: var(--surface-soft);
  color: var(--text-secondary);
  cursor: pointer;
  font-family: var(--font-ar);
  text-align: right;
  transition: all 0.15s ease;
}

.dim-btn:hover {
  background: var(--dim-primary-tint);
  border-color: var(--dim-primary-soft);
}

.dim-btn .dim-icon {
  font-size: 1.35rem;
}

.dim-btn .dim-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}

.dim-btn .dim-text strong {
  font-size: 0.85rem;
  color: var(--text-main);
}

.dim-btn .dim-text small {
  font-size: 0.72rem;
  color: var(--text-muted);
}

.menu-check {
  opacity: 0;
  font-weight: 800;
  color: var(--dim-primary);
}

.dim-btn.active {
  background: var(--dim-primary-soft);
  border-color: var(--dim-primary);
}
.dim-btn.active .menu-check {
  opacity: 1;
}

.ws-drop-menu {
  min-width: 340px;
}

.deck-tab {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 2px solid transparent;
  background: var(--surface-soft);
  color: var(--text-main);
  font-family: var(--font-ar);
  text-align: right;
  cursor: pointer;
  transition: all 0.15s ease;
}

.deck-tab:hover {
  background: var(--dim-primary-tint);
  border-color: var(--dim-primary-soft);
}

.deck-tab.active {
  background: var(--dim-primary-soft);
  border-color: var(--dim-primary);
}

.tab-ic {
  font-size: 1.3rem;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #ffffff;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.tab-info {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}

.tab-info strong {
  font-size: 0.85rem;
  color: var(--text-main);
}

.tab-info small {
  font-size: 0.72rem;
  color: var(--text-secondary);
}

.tab-pill {
  font-size: 0.65rem;
  padding: 1px 7px;
  border-radius: 99px;
  background: #fef3c7;
  color: #b45309;
  border: 1px solid #f59e0b;
  font-weight: 800;
}

/* Generic Menu Action Item (Used in Code Actions, Camera Presets, Builder Presets) */
.menu-action-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 12px;
  border-radius: 11px;
  border: 1.5px solid transparent;
  background: var(--surface-soft);
  color: var(--text-main);
  font-family: var(--font-ar);
  font-size: 0.82rem;
  font-weight: 600;
  text-align: right;
  cursor: pointer;
  transition: all 0.15s ease;
}

.menu-action-item:hover {
  background: var(--dim-primary-soft);
  border-color: var(--dim-primary);
  color: var(--dim-primary-hover);
}

.menu-action-item div {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}

.menu-action-item small {
  font-size: 0.71rem;
  color: var(--text-secondary);
  font-weight: 500;
}

.actions-drop-menu {
  left: 0;
  right: auto;
  min-width: 280px;
}

.mini-drop-menu {
  min-width: 220px;
}

.ai-key-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 15px;
  border-radius: 14px;
  border: 2px solid #c4b5fd;
  background: #f5f3ff;
  color: #6d28d9;
  font-family: var(--font-ar);
  font-weight: 700;
  font-size: 0.82rem;
  cursor: pointer;
  box-shadow: 0 3px 0 #a78bfa;
  transition: all 0.18s ease;
}

.ai-key-btn:hover {
  background: #ede9fe;
  transform: translateY(-1px);
}

.ai-key-btn:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 #a78bfa;
}

/* ============================================================================
   FRIENDLY DIMENSION WELCOME BANNER
   ============================================================================ */
.dimension-telemetry {
  position: relative;
  z-index: 10;
  max-width: 1640px;
  margin: 12px auto 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px;
  background: var(--surface-tinted);
  border: 2px solid var(--dim-primary-soft);
  border-radius: 16px;
  font-size: 0.84rem;
  flex-wrap: wrap;
  gap: 10px;
}

.tel-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.pulse-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--dim-primary);
  box-shadow: 0 0 0 4px var(--dim-primary-soft);
}

.tel-left strong {
  color: var(--dim-primary-hover);
  font-weight: 700;
}

.tel-sep {
  color: var(--border-strong);
}

#dimSubtitleAr {
  color: var(--text-secondary);
}

.tel-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.tel-chip {
  font-size: 0.76rem;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 99px;
  background: #ffffff;
  border: 1.5px solid var(--border-main);
  color: var(--text-secondary);
}

.tel-chip.code-chip {
  font-family: var(--font-mono);
  color: var(--dim-primary-hover);
  background: #ffffff;
  border-color: var(--dim-primary);
  font-weight: 700;
}

/* ============================================================================
   MAIN WORKSPACE CONTAINER
   ============================================================================ */
.deck-workspace {
  display: none;
  position: relative;
  z-index: 5;
  max-width: 1640px;
  margin: 0 auto;
  padding: 16px 16px 48px;
}

.deck-workspace.active {
  display: block;
  animation: fadeUpCozy 0.28s ease-out;
}

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

/* ============================================================================
   UNIFIED SMART CASCADING DROPDOWN BAR (WORKSPACE 1)
   ============================================================================ */
.smart-selector-bar {
  background: var(--surface-card);
  border: 2px solid var(--border-main);
  border-radius: var(--radius-xl);
  padding: 14px 18px;
  margin-bottom: 18px;
  box-shadow: var(--shadow-toy-card);
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.wiz-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.76rem;
  font-weight: 700;
  padding: 5px 13px;
  border-radius: 99px;
  background: var(--dim-warm-soft);
  color: #b45309;
  border: 1.5px solid #fcd34d;
}

.smart-script-picker {
  flex: 1;
  min-width: 280px;
}

.main-script-trigger {
  width: 100%;
  justify-content: space-between;
  padding: 10px 16px;
  background: var(--surface-tinted);
  border: 2px solid var(--dim-primary);
  box-shadow: 0 4px 0 var(--dim-primary-lip);
}

.script-trigger-content {
  display: flex;
  flex-direction: column;
  text-align: right;
  line-height: 1.25;
}

.script-trigger-content strong {
  font-size: 0.94rem;
  color: var(--text-main);
}

.script-trigger-badge {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 99px;
  background: #ffffff;
  color: var(--dim-primary-hover);
  border: 1.5px solid var(--dim-primary);
}

.script-mega-menu {
  width: 100%;
  min-width: 560px;
  max-width: 92vw;
  max-height: 520px;
  padding: 14px;
}

@media (max-width: 720px) {
  .script-mega-menu {
    min-width: 300px;
  }
}

.mega-search-bar {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 2px dashed var(--border-main);
  margin-bottom: 6px;
}

.mega-sub-label {
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--text-muted);
  display: block;
  margin-bottom: 4px;
}

.search-box {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.search-ic {
  position: absolute;
  right: 13px;
  font-size: 0.9rem;
  pointer-events: none;
}

.search-box input {
  width: 100%;
  padding: 10px 38px 10px 14px;
  border-radius: 14px;
  border: 2px solid var(--border-main);
  background: var(--bg-canvas);
  color: var(--text-main);
  font-family: var(--font-ar);
  font-size: 0.85rem;
  font-weight: 500;
  outline: none;
  transition: all 0.2s ease;
}

.search-box input:focus {
  background: #ffffff;
  border-color: var(--dim-primary);
  box-shadow: 0 0 0 4px var(--dim-primary-soft);
}

.level-pills {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.lvl-pill {
  width: 100%;
  text-align: right;
  padding: 8px 12px;
  border-radius: 11px;
  border: 2px solid transparent;
  background: var(--surface-soft);
  color: var(--text-secondary);
  font-family: var(--font-ar);
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
}

.lvl-pill:hover {
  background: var(--dim-primary-tint);
  color: var(--text-main);
}

.lvl-pill.active {
  background: var(--dim-primary-soft);
  color: var(--dim-primary-hover);
  border-color: var(--dim-primary);
}

.goal-chips-strip {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.goal-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  padding: 6px 12px;
  border-radius: 11px;
  border: 1.5px solid var(--border-main);
  background: var(--surface-soft);
  color: var(--text-main);
  font-family: var(--font-ar);
  font-size: 0.76rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.goal-chip:hover {
  border-color: var(--dim-primary);
  background: #ffffff;
}

.goal-chip.active {
  background: var(--dim-primary-soft);
  border-color: var(--dim-primary);
  color: var(--dim-primary-hover);
  font-weight: 700;
}

/* Quick Next/Prev Stepper */
.script-stepper {
  display: flex;
  gap: 6px;
}

.stepper-btn {
  padding: 9px 13px;
  border-radius: 13px;
  border: 2px solid var(--border-main);
  background: var(--surface-soft);
  color: var(--text-main);
  font-family: var(--font-ar);
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 3px 0 var(--card-lip);
  transition: all 0.15s ease;
}

.stepper-btn:hover {
  border-color: var(--dim-primary);
  background: #ffffff;
}

.stepper-btn:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 var(--card-lip);
}

/* ============================================================================
   SPACIOUS 2-COLUMN STUDIO GRID (NO CLUTTERED 3RD SIDEBAR!)
   ============================================================================ */
.studio-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) 460px;
  gap: 20px;
  align-items: start;
}

@media (max-width: 1180px) {
  .studio-grid {
    grid-template-columns: 1fr;
  }
}

.rack-categories {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cat-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 12px;
  border-radius: 12px;
  border: 2px solid transparent;
  background: var(--surface-soft);
  color: var(--text-secondary);
  font-family: var(--font-ar);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.16s ease;
}

.cat-btn:hover {
  background: var(--dim-primary-tint);
  color: var(--text-main);
}

.cat-btn.active {
  background: var(--dim-primary-soft);
  border-color: var(--dim-primary);
  color: var(--dim-primary-hover);
  font-weight: 700;
}

.cartridge-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 10px;
  overflow-y: auto;
  max-height: 340px;
  padding: 4px;
}

/* ============================================================================
   SMART COLLAPSIBLE ACCORDION MENUS (<details class="smart-accordion">)
   ============================================================================ */
.smart-accordion {
  border-radius: 18px;
  background: var(--surface-soft);
  border: 2px solid var(--border-main);
  box-shadow: 0 4px 0 var(--card-lip);
  overflow: hidden;
}

.smart-acc-summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 13px 18px;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-main);
  cursor: pointer;
  user-select: none;
  background: #ffffff;
  transition: background 0.15s ease;
}

.smart-acc-summary::-webkit-details-marker {
  display: none;
}

.smart-acc-summary:hover {
  background: var(--dim-primary-tint);
}

.acc-arrow {
  color: var(--dim-primary);
  font-size: 0.95rem;
  transition: transform 0.2s ease;
}

.smart-accordion[open] > .smart-acc-summary {
  border-bottom: 2px dashed var(--border-main);
}

.smart-accordion[open] > .smart-acc-summary .acc-arrow {
  transform: rotate(180deg);
}

.smart-acc-body {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.preset-drop-trigger {
  background: #fffbeb;
  border-color: #f59e0b;
  box-shadow: 0 3px 0 #d97706;
}

/* Tactile Game Boy / Switch Cartridge Card */
.cartridge-card {
  position: relative;
  padding: 13px 14px;
  border-radius: 16px;
  background: var(--surface-soft);
  border: 2px solid var(--border-main);
  box-shadow: 0 4px 0 var(--card-lip);
  cursor: pointer;
  transition: all 0.18s ease;
}

.cartridge-card:hover {
  transform: translateY(-2px);
  background: #ffffff;
  border-color: var(--dim-primary);
}

.cartridge-card.active {
  background: #ffffff;
  border-color: var(--dim-primary);
  box-shadow: 0 4px 0 var(--dim-primary), 0 8px 20px -6px rgba(13, 148, 136, 0.15);
}

.cartridge-card.active::before {
  content: '';
  position: absolute;
  right: -2px;
  top: 14px;
  bottom: 14px;
  width: 6px;
  border-radius: 99px 0 0 99px;
  background: var(--dim-primary);
}

.cart-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.cart-code {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--text-muted);
  background: var(--bg-canvas);
  padding: 2px 8px;
  border-radius: 6px;
}

.power-meter {
  display: flex;
  align-items: center;
  gap: 3px;
}

.power-bar {
  width: 6px;
  height: 11px;
  border-radius: 3px;
  background: var(--border-main);
}

.power-bar.lit {
  background: var(--bar-color, var(--dim-primary));
}

.cart-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 4px;
}

.cart-desc {
  font-size: 0.77rem;
  color: var(--text-secondary);
  margin-bottom: 8px;
  line-height: 1.45;
}

.cart-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.cart-chip {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 8px;
  background: #ffffff;
  color: var(--text-secondary);
  border: 1.5px solid var(--border-main);
}

/* ============================================================================
   COLUMN 2: COZY DEVELOPER'S NOTEBOOK & LINE-BY-LINE STORYTELLER
   ============================================================================ */
.code-xray-bay {
  background: var(--surface-card);
  border: 2px solid var(--border-main);
  border-radius: var(--radius-xl);
  padding: 22px;
  box-shadow: var(--shadow-toy-card);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.xray-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding-bottom: 14px;
  border-bottom: 2px dashed var(--border-main);
}

.xray-badges {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.mod-code-pill,
.diff-level-pill,
.dim-mode-pill {
  font-family: var(--font-ar);
  font-size: 0.73rem;
  font-weight: 700;
  padding: 3px 11px;
  border-radius: 99px;
}

.mod-code-pill {
  font-family: var(--font-mono);
  background: var(--bg-canvas);
  color: var(--text-secondary);
  border: 1.5px solid var(--border-main);
}

.diff-level-pill {
  background: #ffffff;
  border: 1.5px solid var(--dim-primary);
}

.dim-mode-pill {
  background: var(--dim-primary-soft);
  color: var(--dim-primary-hover);
  border: 1.5px solid var(--dim-primary);
}

.xray-title-wrap h1 {
  font-size: 1.32rem;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 4px;
}

.xray-title-wrap p {
  font-size: 0.88rem;
  color: var(--text-secondary);
}

.xray-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 13px;
  border-radius: 12px;
  border: 2px solid var(--border-main);
  background: #ffffff;
  color: var(--text-main);
  font-family: var(--font-ar);
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 3px 0 var(--card-lip);
  transition: all 0.16s ease;
}

.action-btn:hover {
  transform: translateY(-1px);
  border-color: var(--dim-primary);
  background: var(--dim-primary-tint);
}

.action-btn:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 var(--card-lip);
}

.action-btn.swap-dim-btn {
  background: var(--dim-warm-soft);
  border-color: #f59e0b;
  color: #92400e;
  box-shadow: 0 3px 0 #d97706;
}

.action-btn.split-diff-btn.active {
  background: var(--dim-primary);
  color: #ffffff;
  border-color: var(--dim-primary-lip);
}

.action-btn.copy-btn {
  background: var(--dim-primary-soft);
  border-color: var(--dim-primary);
  color: var(--dim-primary-hover);
  box-shadow: 0 3px 0 var(--dim-primary);
}

/* Friendly Real-Life Analogy Card */
.analogy-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 18px;
  border-radius: 18px;
  background: #fffbeb;
  border: 2px solid #fde68a;
  box-shadow: 0 4px 0 #fcd34d;
}

.analogy-icon {
  font-size: 1.55rem;
  background: #fef3c7;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.analogy-content strong {
  display: block;
  font-size: 0.85rem;
  color: #92400e;
  margin-bottom: 2px;
}

.analogy-content p {
  font-size: 0.86rem;
  color: #78350f;
}

/* 2D vs 3D Difference Callout */
.diff-spotlight {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 16px;
  background: var(--surface-tinted);
  border: 2px solid var(--dim-primary-soft);
  flex-wrap: wrap;
}

.diff-tag {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--dim-primary-hover);
  background: #ffffff;
  padding: 3px 10px;
  border-radius: 99px;
  border: 1.5px solid var(--dim-primary);
}

.diff-spotlight p {
  font-size: 0.84rem;
  color: var(--text-main);
  font-weight: 500;
}

/* Side-by-Side 2D vs 3D Code Comparison */
.split-diff-view {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.split-diff-view[hidden] {
  display: none !important;
}

@media (max-width: 860px) {
  .split-diff-view {
    grid-template-columns: 1fr;
  }
}

.split-col {
  border-radius: 16px;
  overflow: hidden;
  border: 2px solid var(--border-main);
  background: var(--surface-notebook);
}

.split-col-head {
  padding: 9px 14px;
  font-size: 0.8rem;
  font-weight: 700;
}

.split-2d .split-col-head {
  background: #ccfbf1;
  color: #0f766e;
  border-bottom: 2px solid #99f6e4;
}

.split-3d .split-col-head {
  background: #e0e7ff;
  color: #4338ca;
  border-bottom: 2px solid #c7d2fe;
}

.split-col pre {
  padding: 14px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  line-height: 1.65;
  overflow-x: auto;
  color: #1e293b;
}

/* ============================================================================
   COZY DEVELOPER'S NOTEBOOK CODE WINDOW (WARM LATTE PAPER — NOT SCARY!)
   ============================================================================ */
.code-window {
  border-radius: 20px;
  overflow: hidden;
  border: 2px solid #e2d9c5;
  background: var(--surface-notebook);
  box-shadow: 0 5px 0 #d6cbb5;
}

.code-window-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: var(--surface-notebook-bar);
  border-bottom: 2px solid #e2d9c5;
}

.window-dots {
  display: flex;
  gap: 7px;
}

.window-dots span {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1.5px solid rgba(0, 0, 0, 0.12);
}
.dot-r { background: #fb7185; }
.dot-y { background: #fbbf24; }
.dot-g { background: #34d399; }

.window-filename {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 700;
  color: #475569;
  background: #ffffff;
  padding: 3px 12px;
  border-radius: 99px;
  border: 1.5px solid #e2d9c5;
}

.live-exec-indicator {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--dim-primary-hover);
  background: #ffffff;
  padding: 3px 11px;
  border-radius: 99px;
  border: 1.5px solid var(--dim-primary);
}

.exec-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--dim-primary);
}

.code-hint-banner {
  padding: 8px 16px;
  background: #fef9c3;
  border-bottom: 1.5px dashed #fde047;
  color: #854d0e;
  font-size: 0.8rem;
  text-align: center;
}

.code-lines-container {
  padding: 10px 0;
  font-family: var(--font-mono);
  font-size: 0.84rem;
  overflow-x: auto;
}

.code-line-row {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  padding: 4px 14px 4px 0;
  cursor: pointer;
  border-left: 4px solid transparent;
  transition: background 0.14s ease;
}

.code-line-row:hover {
  background: #f5efe2;
}

.code-line-row.has-explanation .line-num {
  color: var(--dim-primary);
  font-weight: 700;
}

.code-line-row.selected-line {
  background: #fef3c7;
  border-left-color: #f59e0b;
}

.code-line-row.pulse-exec {
  background: #ccfbf1;
}

.line-num {
  text-align: center;
  font-size: 0.75rem;
  color: #94a3b8;
  user-select: none;
  border-right: 2px dashed rgba(244, 63, 94, 0.25);
  margin-right: 12px;
  padding-right: 6px;
}

.line-code-text {
  white-space: pre;
  color: #1e293b;
  font-weight: 500;
}

.line-explain-pill {
  font-family: var(--font-ar);
  font-size: 0.7rem;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 99px;
  background: #ffffff;
  color: var(--dim-primary-hover);
  border: 1.5px solid var(--dim-primary-soft);
  opacity: 0.85;
}

.code-line-row:hover .line-explain-pill,
.code-line-row.selected-line .line-explain-pill {
  opacity: 1;
  background: var(--dim-primary);
  color: #ffffff;
  border-color: var(--dim-primary);
}

/* Friendly C# Syntax Highlighting on Cream Notebook */
.tok-kw { color: #4f46e5; font-weight: 700; }
.tok-type { color: #0d9488; font-weight: 700; }
.tok-unity { color: #0284c7; font-weight: 700; }
.tok-str { color: #d97706; font-weight: 600; }
.tok-comment { color: #15803d; font-style: italic; }

/* Selected Line Explanation Card */
.line-xray-card {
  padding: 16px 20px;
  border-radius: 18px;
  background: var(--surface-tinted);
  border: 2px solid var(--dim-primary);
  box-shadow: 0 4px 0 var(--dim-primary-lip);
}

.line-xray-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.xray-line-badge {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  font-weight: 700;
  padding: 3px 11px;
  border-radius: 99px;
  background: var(--dim-primary);
  color: #ffffff;
}

.line-xray-head h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-main);
}

.xray-line-detail {
  font-size: 0.88rem;
  color: var(--text-secondary);
  margin-bottom: 12px;
}

.what-if-box {
  padding: 10px 14px;
  border-radius: 12px;
  background: #ffffff;
  border: 1.5px dashed #f59e0b;
}

.what-if-badge {
  display: inline-block;
  font-size: 0.76rem;
  font-weight: 700;
  color: #b45309;
  margin-bottom: 3px;
}

.what-if-box p {
  font-size: 0.83rem;
  color: var(--text-main);
}

/* Visual Flowchart Storyboard */
.flowchart-panel {
  padding: 18px;
  border-radius: 18px;
  background: var(--surface-soft);
  border: 2px solid var(--border-main);
}

.panel-sec-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  flex-wrap: wrap;
  gap: 8px;
}

.panel-sec-head h3 {
  font-size: 0.96rem;
  font-weight: 700;
  color: var(--text-main);
}

.panel-sec-head span {
  font-size: 0.76rem;
  color: var(--text-muted);
  font-weight: 600;
}

.flowchart-rail {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
}

.flow-node {
  padding: 13px;
  border-radius: 14px;
  background: #ffffff;
  border: 2px solid var(--border-main);
  box-shadow: 0 3px 0 var(--card-lip);
}

.flow-node[data-color="cyan"] { border-top: 4px solid #0d9488; }
.flow-node[data-color="blue"] { border-top: 4px solid #0284c7; }
.flow-node[data-color="emerald"] { border-top: 4px solid #10b981; }
.flow-node[data-color="amber"] { border-top: 4px solid #f59e0b; }
.flow-node[data-color="purple"] { border-top: 4px solid #7c3aed; }
.flow-node[data-color="rose"] { border-top: 4px solid #f43f5e; }

.flow-step {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 99px;
  background: var(--bg-canvas);
  color: var(--text-secondary);
  margin-bottom: 6px;
}

.flow-title {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 4px;
}

.flow-desc {
  font-size: 0.77rem;
  color: var(--text-secondary);
  line-height: 1.45;
}

/* ============================================================================
   COLUMN 3: HANDHELD TOY CONSOLE SIMULATOR, INSPECTOR & SETUP STEPS
   ============================================================================ */
.simulator-dock {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sim-monitor {
  background: var(--surface-card);
  border: 3px solid var(--dim-primary);
  border-radius: 24px;
  padding: 16px;
  box-shadow: 0 6px 0 var(--dim-primary-lip), 0 14px 28px -8px rgba(15, 23, 42, 0.1);
}

.sim-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  gap: 8px;
  flex-wrap: wrap;
}

.sim-status {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--text-main);
}

.sim-live-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 0 3px #d1fae5;
}

.sim-btns {
  display: flex;
  gap: 6px;
}

.sim-ctrl-btn {
  padding: 5px 10px;
  border-radius: 10px;
  border: 1.5px solid var(--border-main);
  background: var(--bg-canvas);
  color: var(--text-main);
  font-family: var(--font-ar);
  font-size: 0.74rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 2px 0 var(--card-lip);
}

.sim-ctrl-btn:hover {
  background: var(--dim-primary-soft);
  border-color: var(--dim-primary);
}

.cam-presets-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
  padding: 6px 10px;
  border-radius: 12px;
  background: var(--surface-tinted);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--dim-primary-hover);
  flex-wrap: wrap;
}

.cam-preset-btn {
  padding: 3px 9px;
  border-radius: 8px;
  border: 1.5px solid var(--dim-primary);
  background: #ffffff;
  color: var(--dim-primary-hover);
  font-family: var(--font-ar);
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
}

.cam-preset-btn:hover {
  background: var(--dim-primary);
  color: #ffffff;
}

.canvas-wrap {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  border: 2.5px solid var(--border-strong);
  background: #e0f2fe;
}

#unitySimCanvas {
  display: block;
  width: 100%;
  height: auto;
  cursor: pointer;
}

.canvas-hud-top {
  position: absolute;
  top: 10px;
  right: 10px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--text-main);
  border: 1.5px solid var(--border-main);
}

/* Tactile Joy-Con / Arcade Gamepad Buttons */
.sim-gamepad {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.gamepad-dpad,
.gamepad-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.pad-btn,
.pad-action-btn {
  padding: 8px 13px;
  border-radius: 12px;
  border: 2px solid var(--border-strong);
  background: #ffffff;
  color: var(--text-main);
  font-family: var(--font-ar);
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  user-select: none;
  box-shadow: 0 4px 0 var(--card-lip);
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.pad-btn:hover,
.pad-action-btn:hover {
  border-color: var(--dim-primary);
}

.pad-btn:active,
.pad-action-btn:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 var(--card-lip);
}

.pad-action-btn.jump-act {
  background: var(--dim-primary);
  color: #ffffff;
  border-color: var(--dim-primary-lip);
  box-shadow: 0 4px 0 var(--dim-primary-lip);
}

.pad-action-btn.dash-act {
  background: #fef3c7;
  color: #92400e;
  border-color: #f59e0b;
  box-shadow: 0 4px 0 #d97706;
}

.pad-action-btn.dmg-act {
  background: #ffe4e6;
  color: #be123c;
  border-color: #f43f5e;
  box-shadow: 0 4px 0 #e11d48;
}

.pad-action-btn.heal-act {
  background: #d1fae5;
  color: #065f46;
  border-color: #10b981;
  box-shadow: 0 4px 0 #059669;
}

/* Friendly Mini Unity Console */
.unity-console-mini {
  margin-top: 12px;
  border-radius: 14px;
  background: var(--bg-canvas);
  border: 2px solid var(--border-main);
  overflow: hidden;
}

.console-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 12px;
  background: var(--bg-canvas-secondary);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-secondary);
}

.console-sub {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--dim-primary-hover);
}

.console-body {
  padding: 8px 12px;
  max-height: 92px;
  overflow-y: auto;
  font-family: var(--font-ar);
  font-size: 0.76rem;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.log-entry {
  color: var(--text-main);
  padding: 3px 8px;
  border-radius: 8px;
  background: #ffffff;
  border: 1px solid var(--border-main);
}

/* Inspector & Setup Panels */
.inspector-panel,
.setup-checklist-panel {
  background: var(--surface-card);
  border: 2px solid var(--border-main);
  border-radius: 22px;
  padding: 16px 18px;
  box-shadow: var(--shadow-toy-card);
}

.inspector-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.insp-icon {
  font-size: 1.35rem;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: var(--dim-primary-soft);
  display: grid;
  place-items: center;
}

.inspector-head h3 {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text-main);
}

.inspector-head small {
  font-size: 0.74rem;
  color: var(--text-muted);
}

.unity-transform-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 12px;
  font-family: var(--font-mono);
  font-size: 0.76rem;
}

.tf-axis {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 10px;
  border-radius: 10px;
  background: var(--bg-canvas);
  border: 1.5px solid var(--border-main);
  font-weight: 700;
}

.tf-axis.ax-x b { color: #e11d48; }
.tf-axis.ax-y b { color: #16a34a; }
.tf-axis.ax-z b { color: #0284c7; }

.inspector-fields {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.insp-field {
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--surface-soft);
  border: 1.5px solid var(--border-main);
}

.insp-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.8rem;
  font-weight: 700;
  margin-bottom: 6px;
}

.insp-val-badge {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  padding: 2px 8px;
  border-radius: 8px;
  background: var(--dim-primary-soft);
  color: var(--dim-primary-hover);
}

.insp-field input[type="range"] {
  width: 100%;
  accent-color: var(--dim-primary);
  cursor: pointer;
}

.setup-steps-list {
  padding-right: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 0.82rem;
  color: var(--text-secondary);
}

.setup-steps-list li::marker {
  color: var(--dim-primary);
  font-weight: 700;
}

/* ============================================================================
   WORKSPACE 2 & 3: SCRIPT COMBINER & FRIENDLY CODE DOCTOR
   ============================================================================ */
.doctor-hero {
  background: var(--surface-card);
  border: 2px solid var(--border-main);
  border-radius: var(--radius-xl);
  padding: 22px 26px;
  margin-bottom: 18px;
  box-shadow: var(--shadow-toy-card);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.doctor-hero h2 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-main);
  margin: 8px 0 6px;
}

.doctor-hero p {
  font-size: 0.88rem;
  color: var(--text-secondary);
  max-width: 780px;
}

.doctor-hero code {
  font-family: var(--font-mono);
  background: var(--bg-canvas);
  padding: 2px 6px;
  border-radius: 6px;
  color: var(--dim-primary-hover);
  font-weight: 700;
}

.broken-presets-box {
  background: #fffbeb;
  border: 2px solid #fde68a;
  border-radius: 18px;
  padding: 14px 18px;
  box-shadow: 0 4px 0 #fcd34d;
}

.preset-label {
  display: block;
  font-size: 0.8rem;
  font-weight: 700;
  color: #92400e;
  margin-bottom: 8px;
}

.preset-buttons {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.smart-accordion.flowchart-panel,
.smart-accordion.inspector-panel,
.smart-accordion.setup-checklist-panel,
.smart-accordion.unity-console-mini,
.smart-accordion.anatomy-section,
.smart-accordion.storyteller-section {
  padding: 0;
  margin-top: 0;
}

.preset-btn {
  padding: 7px 12px;
  border-radius: 11px;
  border: 1.5px solid #f59e0b;
  background: #ffffff;
  color: #92400e;
  font-family: var(--font-ar);
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 2px 0 #d97706;
}

.preset-btn:hover {
  background: #fef3c7;
}

.doctor-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 18px;
  align-items: start;
}

@media (max-width: 1100px) {
  .doctor-grid {
    grid-template-columns: 1fr;
  }
}

.doctor-editor-panel,
.doctor-results-panel {
  background: var(--surface-card);
  border: 2px solid var(--border-main);
  border-radius: var(--radius-xl);
  padding: 20px;
  box-shadow: var(--shadow-toy-card);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Custom Builder Checkboxes */
.builder-checkbox-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.builder-check-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 16px;
  background: var(--surface-soft);
  border: 2px solid var(--border-main);
  box-shadow: 0 3px 0 var(--card-lip);
  cursor: pointer;
  transition: all 0.16s ease;
}

.builder-check-card:hover {
  border-color: var(--dim-primary);
  background: #ffffff;
}

.builder-check-card input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin-top: 3px;
  accent-color: var(--dim-primary);
  cursor: pointer;
}

.builder-check-card strong {
  display: block;
  font-size: 0.9rem;
  color: var(--text-main);
}

.builder-check-card small {
  font-size: 0.78rem;
  color: var(--text-secondary);
}

.builder-actions-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.built-code-pre {
  padding: 16px;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  line-height: 1.65;
  overflow-x: auto;
  color: #1e293b;
}

/* Code Doctor Editor */
.editor-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.editor-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 0.9rem;
}

.detected-dim-badge {
  font-size: 0.74rem;
  padding: 3px 10px;
  border-radius: 99px;
  background: var(--dim-primary-soft);
  color: var(--dim-primary-hover);
  border: 1.5px solid var(--dim-primary);
}

.editor-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.scan-btn {
  padding: 9px 16px;
  border-radius: 13px;
  border: 2px solid var(--dim-primary-lip);
  background: var(--dim-primary);
  color: #ffffff;
  font-family: var(--font-ar);
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 0 var(--dim-primary-lip);
  transition: all 0.16s ease;
}

.scan-btn:hover {
  background: var(--dim-primary-hover);
  transform: translateY(-1px);
}

.scan-btn:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 var(--dim-primary-lip);
}

.fix-all-btn {
  padding: 9px 16px;
  border-radius: 13px;
  border: 2px solid #059669;
  background: #10b981;
  color: #ffffff;
  font-family: var(--font-ar);
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 0 #059669;
}

.ghost-sm-btn {
  padding: 8px 12px;
  border-radius: 12px;
  border: 2px solid var(--border-main);
  background: var(--bg-canvas);
  color: var(--text-secondary);
  font-family: var(--font-ar);
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
}

.editor-body-wrap {
  display: grid;
  grid-template-columns: 44px 1fr;
  border-radius: 18px;
  overflow: hidden;
  border: 2px solid #e2d9c5;
  background: var(--surface-notebook);
  min-height: 420px;
}

.editor-line-nums {
  padding: 14px 6px;
  background: var(--surface-notebook-gutter);
  border-right: 2px dashed rgba(244, 63, 94, 0.25);
  color: #94a3b8;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  line-height: 1.65;
  text-align: center;
  user-select: none;
  white-space: pre;
}

#studentCodeInput {
  width: 100%;
  min-height: 420px;
  padding: 14px;
  border: none;
  outline: none;
  resize: vertical;
  background: transparent;
  color: #1e293b;
  font-family: var(--font-mono);
  font-size: 0.84rem;
  line-height: 1.65;
}

/* Friendly Diagnostic Report Cards */
.diag-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border-radius: 18px;
  border: 2px solid var(--border-main);
  background: var(--surface-soft);
  margin-bottom: 14px;
}

.diag-header.status-clean {
  background: #ecfdf5;
  border-color: #6ee7b7;
  box-shadow: 0 4px 0 #34d399;
}

.diag-header.status-errors {
  background: #fffbeb;
  border-color: #fde68a;
  box-shadow: 0 4px 0 #fbbf24;
}

.diag-status-ic {
  font-size: 1.8rem;
}

.diag-header h3 {
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--text-main);
}

.diag-header p {
  font-size: 0.82rem;
  color: var(--text-secondary);
}

.diag-cards-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.diag-card {
  padding: 16px;
  border-radius: 18px;
  background: #ffffff;
  border: 2px solid #fde68a;
  box-shadow: 0 4px 0 #fcd34d;
}

.diag-card.sev-error {
  background: #fff1f2;
  border-color: #fecdd3;
  box-shadow: 0 4px 0 #fda4af;
}

.diag-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.diag-badge {
  font-size: 0.74rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 99px;
  background: #ffffff;
  color: #be123c;
  border: 1.5px solid #fda4af;
}

.diag-line-tag {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-secondary);
}

.diag-card h4 {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 6px;
}

.diag-why {
  font-size: 0.84rem;
  color: var(--text-secondary);
  margin-bottom: 10px;
}

.diag-diff-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 10px;
}

@media (max-width: 680px) {
  .diag-diff-grid {
    grid-template-columns: 1fr;
  }
}

.diff-box {
  padding: 10px 12px;
  border-radius: 12px;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  white-space: pre-wrap;
  direction: ltr;
  text-align: left;
}

.diff-wrong {
  background: #ffffff;
  border: 1.5px solid #fda4af;
  color: #9f1239;
}

.diff-right {
  background: #ecfdf5;
  border: 1.5px solid #6ee7b7;
  color: #065f46;
}

.single-fix-btn {
  padding: 7px 14px;
  border-radius: 11px;
  border: 2px solid #059669;
  background: #10b981;
  color: #ffffff;
  font-family: var(--font-ar);
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 3px 0 #059669;
}

/* Visual Code Anatomy & Storyteller */
.anatomy-section,
.storyteller-section {
  padding: 16px;
  border-radius: 18px;
  background: var(--surface-soft);
  border: 2px solid var(--border-main);
}

.anatomy-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

@media (max-width: 680px) {
  .anatomy-grid {
    grid-template-columns: 1fr;
  }
}

.anat-box {
  padding: 12px 14px;
  border-radius: 14px;
  background: #ffffff;
  border: 1.5px solid var(--border-main);
}

.anat-box h4 {
  font-size: 0.84rem;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--text-main);
}

.anat-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 0;
  border-bottom: 1px dashed var(--border-main);
  font-size: 0.78rem;
}

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

.story-row {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 14px;
  background: #ffffff;
  border: 1.5px solid var(--border-main);
}

@media (max-width: 640px) {
  .story-row {
    grid-template-columns: 1fr;
  }
}

.story-meta {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.story-lnum {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--dim-primary-hover);
}

.story-cat {
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--text-secondary);
}

.story-content code {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  background: var(--surface-notebook);
  padding: 2px 8px;
  border-radius: 6px;
  border: 1px solid #e2d9c5;
  color: #1e293b;
  margin-bottom: 4px;
  direction: ltr;
}

.story-content p {
  font-size: 0.82rem;
  color: var(--text-secondary);
}

/* ============================================================================
   WORKSPACE 4: BUG-HUNT QUIZ, 2D vs 3D MATRIX & CONCEPTS
   ============================================================================ */
.quiz-section,
.matrix-section,
.concepts-section {
  background: var(--surface-card);
  border: 2px solid var(--border-main);
  border-radius: var(--radius-xl);
  padding: 22px 26px;
  margin-bottom: 20px;
  box-shadow: var(--shadow-toy-card);
}

.quiz-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 12px;
}

.quiz-score-pill {
  font-size: 0.85rem;
  font-weight: 700;
  padding: 7px 16px;
  border-radius: 99px;
  background: #fef3c7;
  color: #92400e;
  border: 2px solid #f59e0b;
  box-shadow: 0 3px 0 #d97706;
}

.quiz-card {
  padding: 18px;
  border-radius: 18px;
  background: var(--surface-soft);
  border: 2px solid var(--border-main);
}

.quiz-q-title {
  font-size: 1.02rem;
  font-weight: 700;
  margin-bottom: 10px;
  color: var(--text-main);
}

.quiz-code-snippet {
  padding: 14px;
  border-radius: 14px;
  background: var(--surface-notebook);
  border: 2px solid #e2d9c5;
  font-family: var(--font-mono);
  font-size: 0.84rem;
  color: #1e293b;
  margin-bottom: 14px;
  overflow-x: auto;
}

.quiz-options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

@media (max-width: 760px) {
  .quiz-options {
    grid-template-columns: 1fr;
  }
}

.quiz-opt-btn {
  padding: 12px 16px;
  border-radius: 14px;
  border: 2px solid var(--border-main);
  background: #ffffff;
  color: var(--text-main);
  font-family: var(--font-ar);
  font-size: 0.85rem;
  font-weight: 600;
  text-align: right;
  cursor: pointer;
  box-shadow: 0 3px 0 var(--card-lip);
  transition: all 0.16s ease;
}

.quiz-opt-btn:hover {
  border-color: var(--dim-primary);
  background: var(--dim-primary-tint);
}

.quiz-opt-btn.correct {
  background: #d1fae5;
  border-color: #10b981;
  color: #065f46;
  font-weight: 700;
}

.quiz-opt-btn.wrong {
  background: #ffe4e6;
  border-color: #f43f5e;
  color: #9f1239;
}

.quiz-feedback {
  margin-top: 14px;
  padding: 12px 16px;
  border-radius: 14px;
  background: #ffffff;
  border: 2px solid var(--dim-primary);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 0.86rem;
  font-weight: 600;
}

/* 2D vs 3D Comparison Table */
.matrix-head {
  margin-bottom: 16px;
}

.matrix-head h2 {
  font-size: 1.18rem;
  margin: 6px 0 4px;
}

.matrix-head p {
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.comparison-table-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.matrix-row {
  display: grid;
  grid-template-columns: 220px 1fr 1fr;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 16px;
  background: var(--surface-soft);
  border: 2px solid var(--border-main);
  align-items: center;
}

@media (max-width: 860px) {
  .matrix-row {
    grid-template-columns: 1fr;
  }
}

.matrix-feat {
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--text-main);
}

.matrix-2d-cell {
  padding: 10px 14px;
  border-radius: 12px;
  background: #f0fdfa;
  border: 1.5px solid #99f6e4;
  color: #0f766e;
  font-size: 0.82rem;
  font-weight: 600;
}

.matrix-3d-cell {
  padding: 10px 14px;
  border-radius: 12px;
  background: #eef2ff;
  border: 1.5px solid #c7d2fe;
  color: #4338ca;
  font-size: 0.82rem;
  font-weight: 600;
}

/* Concept Flashcards */
.concepts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
}

.concept-card {
  padding: 18px;
  border-radius: 18px;
  background: var(--surface-soft);
  border: 2px solid var(--border-main);
  box-shadow: 0 4px 0 var(--card-lip);
}

.concept-top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.concept-ic {
  font-size: 1.6rem;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: #ffffff;
  border: 1.5px solid var(--border-main);
  display: grid;
  place-items: center;
}

.concept-top h3 {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  color: var(--text-main);
}

.concept-simple {
  font-size: 0.84rem;
  color: var(--text-secondary);
  margin-bottom: 10px;
}

.concept-mistake {
  padding: 8px 12px;
  border-radius: 12px;
  background: #fffbeb;
  border: 1.5px solid #fde68a;
  color: #92400e;
  font-size: 0.78rem;
  font-weight: 600;
}

/* ============================================================================
   MODAL BACKDROP (OPTIONAL GEMINI AI HELPER)
   ============================================================================ */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(15, 23, 42, 0.35);
  backdrop-filter: blur(6px);
  display: grid;
  place-items: center;
  padding: 20px;
}
.modal-backdrop[hidden] {
  display: none !important;
}

.ai-modal {
  width: 100%;
  max-width: 620px;
  background: #ffffff;
  border: 3px solid var(--border-main);
  border-radius: 24px;
  padding: 24px;
  box-shadow: 0 8px 0 var(--card-lip), 0 20px 40px rgba(15, 23, 42, 0.15);
}

.modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.close-modal-btn {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  border: 2px solid var(--border-main);
  background: var(--bg-canvas);
  cursor: pointer;
  font-weight: 700;
}

.modal-note {
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--surface-tinted);
  border: 1.5px solid var(--dim-primary-soft);
  font-size: 0.82rem;
  margin-bottom: 14px;
}

.api-key-row,
.ai-prompt-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
  font-size: 0.84rem;
  font-weight: 600;
}

.api-key-row input,
.ai-prompt-row textarea {
  padding: 10px 14px;
  border-radius: 12px;
  border: 2px solid var(--border-main);
  background: var(--bg-canvas);
  font-family: var(--font-ar);
  font-size: 0.85rem;
}

.ai-response-box {
  margin-top: 14px;
  padding: 14px;
  border-radius: 14px;
  background: var(--surface-notebook);
  border: 2px solid #e2d9c5;
  max-height: 260px;
  overflow-y: auto;
  white-space: pre-wrap;
  font-size: 0.84rem;
}

/* ============================================================================
   CLASSROOM MULTIPLAYER GAME ARENA, QR SHARE & LIVE LEADERBOARD
   ============================================================================ */
.arena-launch-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 15px;
  border-radius: 14px;
  border: 2px solid #f59e0b;
  background: #fef3c7;
  color: #92400e;
  font-family: var(--font-ar);
  font-size: 0.82rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 3px 0 #d97706;
  transition: all 0.16s ease;
}

.arena-launch-btn:hover {
  background: #fde68a;
  transform: translateY(-1px);
}

.arena-launch-btn:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 #d97706;
}

.arena-hero-card {
  background: var(--surface-card);
  border: 2px solid var(--border-main);
  border-radius: var(--radius-xl);
  padding: 22px 26px;
  margin-bottom: 16px;
  box-shadow: var(--shadow-toy-card);
  display: grid;
  grid-template-columns: 1fr 220px;
  gap: 24px;
  align-items: center;
}

@media (max-width: 960px) {
  .arena-hero-card {
    grid-template-columns: 1fr;
  }
}

.arena-badges-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.room-live-pill {
  font-size: 0.78rem;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 99px;
  background: #ecfdf5;
  color: #065f46;
  border: 1.5px solid #6ee7b7;
}

.arena-hero-main h2 {
  font-size: 1.24rem;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 6px;
}

.arena-hero-main p {
  font-size: 0.86rem;
  color: var(--text-secondary);
  margin-bottom: 14px;
}

.arena-smart-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.arena-share-strip {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 14px;
  border-radius: 16px;
  background: var(--surface-soft);
  border: 2px solid var(--border-main);
}

.room-code-field {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  font-weight: 700;
}

.room-code-field input {
  width: 115px;
  padding: 7px 10px;
  border-radius: 10px;
  border: 2px solid var(--dim-primary);
  background: #ffffff;
  font-family: var(--font-mono);
  font-size: 0.84rem;
  font-weight: 700;
  text-align: center;
  color: var(--dim-primary-hover);
}

.share-url-field {
  flex: 1;
  min-width: 260px;
  display: flex;
  gap: 8px;
}

.share-url-field input {
  flex: 1;
  padding: 8px 12px;
  border-radius: 11px;
  border: 1.5px solid var(--border-strong);
  background: #ffffff;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text-secondary);
}

/* QR Code Card */
.arena-qr-card {
  background: var(--surface-tinted);
  border: 2.5px solid var(--dim-primary);
  border-radius: 20px;
  padding: 14px;
  text-align: center;
  box-shadow: 0 5px 0 var(--dim-primary-lip);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.qr-card-top {
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--dim-primary-hover);
}

.qr-svg-box {
  width: 156px;
  height: 156px;
  background: #ffffff;
  padding: 6px;
  border-radius: 14px;
  border: 2px solid var(--border-main);
}

.qr-svg-box svg {
  width: 100%;
  height: 100%;
  display: block;
}

.qr-sub-note {
  font-size: 0.7rem;
  color: var(--text-secondary);
  font-weight: 600;
}

/* Student Registration & Live Stats Bar */
.student-registration-bar {
  background: var(--surface-card);
  border: 2px solid var(--border-main);
  border-radius: 20px;
  padding: 14px 20px;
  margin-bottom: 14px;
  box-shadow: var(--shadow-toy-sm);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.stu-profile-inputs {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.stu-label {
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--text-main);
}

#arenaStudentNameInput {
  width: 240px;
  padding: 8px 14px;
  border-radius: 12px;
  border: 2px solid var(--border-strong);
  background: var(--bg-canvas);
  font-family: var(--font-ar);
  font-size: 0.84rem;
  font-weight: 600;
}

.avatar-picker {
  display: flex;
  gap: 5px;
}

.avatar-pick-btn {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 2px solid var(--border-main);
  background: #ffffff;
  font-size: 1.1rem;
  cursor: pointer;
  transition: all 0.14s ease;
}

.avatar-pick-btn.active {
  background: var(--dim-primary-soft);
  border-color: var(--dim-primary);
  transform: scale(1.08);
}

.stu-live-stats {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.stu-stat-pill {
  font-size: 0.8rem;
  font-weight: 800;
  padding: 6px 13px;
  border-radius: 99px;
}

.xp-pill {
  background: #fef3c7;
  color: #92400e;
  border: 2px solid #f59e0b;
}

.streak-pill {
  background: #ffe4e6;
  color: #be123c;
  border: 2px solid #fda4af;
}

.rank-pill {
  background: var(--dim-primary-soft);
  color: var(--dim-primary-hover);
  border: 2px solid var(--dim-primary);
}

/* Progressive 4-Stage Roadmap Stepper */
.stage-roadmap-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 18px;
}

@media (max-width: 780px) {
  .stage-roadmap-bar {
    grid-template-columns: repeat(2, 1fr);
  }
}

.stage-step-pill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 16px;
  border-radius: 16px;
  border: 2px solid var(--border-main);
  background: #ffffff;
  font-family: var(--font-ar);
  cursor: pointer;
  box-shadow: 0 3px 0 var(--card-lip);
  transition: all 0.16s ease;
}

.stage-step-pill .st-badge {
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--text-main);
}

.stage-step-pill small {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-muted);
}

.stage-step-pill.has-progress {
  border-color: #6ee7b7;
  background: #f0fdf4;
}

.stage-step-pill.active {
  background: var(--dim-primary-soft);
  border-color: var(--dim-primary);
  box-shadow: 0 4px 0 var(--dim-primary-lip);
}

/* Main 2-Column Arena Gameplay + Leaderboard Grid */
.arena-main-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) 450px;
  gap: 20px;
  align-items: start;
}

@media (max-width: 1180px) {
  .arena-main-grid {
    grid-template-columns: 1fr;
  }
}

.arena-play-panel,
.arena-leaderboard-panel {
  background: var(--surface-card);
  border: 2px solid var(--border-main);
  border-radius: var(--radius-xl);
  padding: 22px;
  box-shadow: var(--shadow-toy-card);
}

.mission-top-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
  padding-bottom: 12px;
  border-bottom: 2px dashed var(--border-main);
}

.mission-badges,
.mission-nav-btns {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.mission-counter {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-muted);
}

.mission-title {
  font-size: 1.22rem;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 4px;
}

.mission-story {
  font-size: 0.88rem;
  color: var(--text-secondary);
  margin-bottom: 12px;
}

.mission-hint-row {
  margin-bottom: 14px;
}

.mission-hint-bubble {
  margin-top: 8px;
  padding: 10px 14px;
  border-radius: 12px;
  background: #fffbeb;
  border: 1.5px solid #fde68a;
  color: #92400e;
  font-size: 0.82rem;
}

/* Mode 1: Code Puzzle Blocks */
.puzzle-arena-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}

@media (max-width: 820px) {
  .puzzle-arena-grid {
    grid-template-columns: 1fr;
  }
}

.puzzle-source-col,
.puzzle-target-col {
  padding: 14px;
  border-radius: 16px;
  background: var(--surface-soft);
  border: 2px solid var(--border-main);
}

.puzzle-col-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 10px;
}

.puzzle-blocks-list,
.puzzle-dropzone {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 220px;
}

.code-toy-block {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 2px solid #cbd5e1;
  background: #ffffff;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: #1e293b;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 3px 0 #cbd5e1;
  transition: all 0.14s ease;
}

.code-toy-block:hover {
  border-color: var(--dim-primary);
  transform: translateY(-1px);
}

.placed-block {
  background: var(--surface-notebook);
  border-color: var(--dim-primary);
  box-shadow: 0 3px 0 var(--dim-primary-lip);
}

.placed-num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--dim-primary);
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 700;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.remove-blk {
  margin-left: auto;
  color: #e11d48;
  font-weight: 700;
}

.puzzle-empty-msg {
  padding: 24px 14px;
  text-align: center;
  font-family: var(--font-ar);
  font-size: 0.82rem;
  color: var(--text-muted);
  border: 2px dashed var(--border-main);
  border-radius: 12px;
}

/* Mode 2: Fill-in-the-Blanks Code Forge */
.fill-code-board {
  padding: 18px;
  border-radius: 16px;
  background: var(--surface-notebook);
  border: 2px solid #e2d9c5;
  font-family: var(--font-mono);
  font-size: 0.88rem;
  line-height: 2.1;
  color: #1e293b;
  overflow-x: auto;
  margin-bottom: 14px;
}

.code-blank-slot {
  display: inline-flex;
  align-items: center;
  padding: 2px 12px;
  margin: 0 4px;
  border-radius: 9px;
  border: 2px dashed #f59e0b;
  background: #fef3c7;
  color: #92400e;
  font-family: var(--font-mono);
  font-size: 0.84rem;
  font-weight: 700;
  cursor: pointer;
}

.code-blank-slot.active-slot {
  border-style: solid;
  border-color: var(--dim-primary);
  background: var(--dim-primary-soft);
  color: var(--dim-primary-hover);
  box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.2);
}

.code-blank-slot.filled {
  border-style: solid;
  border-color: #10b981;
  background: #d1fae5;
  color: #065f46;
}

.word-bank-box {
  padding: 14px;
  border-radius: 16px;
  background: var(--surface-soft);
  border: 2px solid var(--border-main);
  margin-bottom: 14px;
}

.wb-label {
  display: block;
  font-size: 0.8rem;
  font-weight: 700;
  margin-bottom: 8px;
}

.word-bank-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.wb-chip {
  padding: 7px 14px;
  border-radius: 11px;
  border: 2px solid var(--border-strong);
  background: #ffffff;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-main);
  cursor: pointer;
  box-shadow: 0 3px 0 var(--card-lip);
}

.wb-chip:hover {
  border-color: var(--dim-primary);
  background: var(--dim-primary-tint);
}

/* Mode 4: Live Code Crafter */
.craft-arena-grid {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 14px;
}

@media (max-width: 820px) {
  .craft-arena-grid {
    grid-template-columns: 1fr;
  }
}

.craft-textarea {
  width: 100%;
  min-height: 240px;
  padding: 14px;
  border-radius: 14px;
  border: 2px solid #e2d9c5;
  background: var(--surface-notebook);
  font-family: var(--font-mono);
  font-size: 0.83rem;
  line-height: 1.65;
  color: #1e293b;
}

.craft-req-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.craft-req-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #ffffff;
  border: 1.5px solid var(--border-main);
  font-size: 0.82rem;
  font-weight: 600;
}

.craft-req-item.req-done {
  background: #ecfdf5;
  border-color: #6ee7b7;
  color: #065f46;
}

.arena-action-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.arena-feedback-banner {
  margin-top: 14px;
  padding: 14px 18px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  font-weight: 700;
  font-size: 0.88rem;
}

.arena-feedback-banner.fb-success {
  background: #ecfdf5;
  border: 2px solid #10b981;
  color: #065f46;
  box-shadow: 0 4px 0 #059669;
}

.arena-feedback-banner.fb-warn {
  background: #fffbeb;
  border: 2px solid #f59e0b;
  color: #92400e;
  box-shadow: 0 4px 0 #d97706;
}

/* Live Leaderboard & Top-3 Podium */
.lb-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 2px dashed var(--border-main);
}

.podium-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}

.podium-card {
  padding: 12px 8px;
  border-radius: 16px;
  text-align: center;
  background: var(--surface-soft);
  border: 2px solid var(--border-main);
  box-shadow: 0 4px 0 var(--card-lip);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.podium-1st {
  background: #fffbeb;
  border-color: #f59e0b;
  box-shadow: 0 4px 0 #d97706;
}

.podium-2nd {
  background: #f0fdfa;
  border-color: #0d9488;
  box-shadow: 0 4px 0 #0f766e;
}

.podium-3rd {
  background: #eef2ff;
  border-color: #6366f1;
  box-shadow: 0 4px 0 #4338ca;
}

.podium-medal {
  font-size: 0.72rem;
  font-weight: 800;
}

.podium-avatar {
  font-size: 1.75rem;
}

.podium-name {
  font-size: 0.82rem;
  color: var(--text-main);
}

.podium-stage-pill {
  font-size: 0.68rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 99px;
  background: #ffffff;
  border: 1px solid var(--border-main);
}

.podium-xp {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--dim-primary-hover);
}

.lb-list-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 360px;
  overflow-y: auto;
}

.lb-row {
  display: grid;
  grid-template-columns: 36px 1fr auto auto auto;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-radius: 12px;
  background: var(--surface-soft);
  border: 1.5px solid var(--border-main);
  font-size: 0.8rem;
}

.lb-row-me {
  background: var(--dim-primary-soft);
  border-color: var(--dim-primary);
}

.lb-rank {
  font-family: var(--font-mono);
  font-weight: 800;
  color: var(--text-secondary);
}

.lb-player {
  display: flex;
  align-items: center;
  gap: 6px;
}

.lb-stage {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 99px;
  background: #ffffff;
}

.lb-stats {
  font-size: 0.72rem;
  color: var(--text-secondary);
}

.lb-xp {
  font-family: var(--font-mono);
  font-weight: 800;
  color: var(--dim-primary-hover);
}

.empty-leaderboard-card {
  padding: 22px;
  border-radius: 16px;
  background: var(--surface-soft);
  border: 2px dashed var(--border-strong);
  text-align: center;
  font-size: 0.84rem;
  color: var(--text-secondary);
}

.empty-leaderboard-card span {
  font-size: 2rem;
  display: block;
  margin-bottom: 6px;
}

/* ============================================================================
   ZERO-KNOWLEDGE BEGINNER FOUNDATIONS, VOCABULARY & SENTENCE TRANSLATOR
   ============================================================================ */
.zero-knowledge-banner {
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
  border: 2.5px solid #f59e0b !important;
  border-radius: 22px;
  margin-bottom: 16px;
  box-shadow: 0 5px 0 #d97706;
  overflow: hidden;
}

.zero-acc-summary {
  background: rgba(255, 255, 255, 0.72) !important;
  padding: 13px 18px !important;
}

.zero-sum-title {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.zero-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.75rem;
  font-weight: 800;
  padding: 4px 11px;
  border-radius: 99px;
  background: #fef3c7;
  color: #b45309;
  border: 1.5px solid #f59e0b;
}

.zero-intro-note {
  font-size: 0.88rem;
  color: #78350f;
  margin-bottom: 12px;
}

.zero-foundations-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 12px;
}

.zero-found-card {
  background: #ffffff;
  border: 2px solid #fde68a;
  border-radius: 18px;
  padding: 14px;
  box-shadow: 0 4px 0 #fcd34d;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.zero-found-top {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
  color: var(--text-main);
}

.zero-step-num {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #f59e0b;
  color: #ffffff;
  font-weight: 800;
  font-size: 0.76rem;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.zero-found-ic {
  font-size: 1.25rem;
}

.zero-metaphor {
  font-size: 0.8rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

.zero-code-sample {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  padding: 7px 10px;
  border-radius: 10px;
  background: var(--surface-notebook);
  border: 1.5px solid #e2d9c5;
  color: #0f766e;
  font-weight: 700;
}

.zero-rule-tip {
  font-size: 0.76rem;
  font-weight: 700;
  color: #92400e;
  background: #fffbeb;
  padding: 6px 9px;
  border-radius: 10px;
  border: 1px dashed #f59e0b;
}

/* Lesson Word-by-Word Vocabulary Flashcards */
.vocab-sub-note {
  font-size: 0.82rem;
  color: var(--text-secondary);
  margin-bottom: 10px;
}

.lesson-vocab-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px;
}

.vocab-flashcard {
  background: #ffffff;
  border: 2px solid var(--border-main);
  border-radius: 15px;
  padding: 11px 13px;
  box-shadow: 0 3px 0 var(--card-lip);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.vocab-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.vocab-ic {
  font-size: 1.15rem;
}

.vocab-word {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--dim-primary-hover);
  background: var(--dim-primary-soft);
  padding: 2px 8px;
  border-radius: 8px;
}

.vocab-cat-tag {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--text-muted);
  background: var(--bg-canvas);
  padding: 2px 7px;
  border-radius: 99px;
}

.vocab-meaning {
  font-size: 0.8rem;
  color: var(--text-main);
  line-height: 1.45;
}

.vocab-analogy {
  font-size: 0.75rem;
  color: #0369a1;
  background: #f0f9ff;
  padding: 5px 8px;
  border-radius: 9px;
  border: 1px solid #bae6fd;
}

/* Interactive Comprehension & Self-Check Card in Explorer */
.comprehension-check-card {
  background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%);
  border: 2.5px solid #10b981;
  border-radius: 20px;
  padding: 16px 18px;
  box-shadow: 0 4px 0 #059669;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.comp-head h4 {
  font-size: 0.96rem;
  font-weight: 800;
  color: #064e3b;
  margin-top: 5px;
}

.comp-question {
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--text-main);
}

.comp-code-line {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  padding: 9px 12px;
  border-radius: 12px;
  background: #ffffff;
  border: 1.5px solid #6ee7b7;
  overflow-x: auto;
}

.comp-options-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 8px;
}

.comp-opt-btn {
  text-align: right;
  padding: 10px 12px;
  border-radius: 13px;
  border: 2px solid #a7f3d0;
  background: #ffffff;
  color: var(--text-main);
  font-family: var(--font-ar);
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 3px 0 #6ee7b7;
  transition: all 0.15s ease;
}

.comp-opt-btn:hover {
  border-color: #10b981;
  transform: translateY(-1px);
}

.comp-opt-btn.correct {
  background: #d1fae5;
  border-color: #059669;
  color: #065f46;
}

.comp-opt-btn.wrong {
  background: #ffe4e6;
  border-color: #f43f5e;
  color: #9f1239;
}

.comp-feedback-msg {
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 0.83rem;
  line-height: 1.5;
}

.comp-feedback-msg.is-ok {
  background: #ffffff;
  border: 2px solid #10b981;
  color: #065f46;
}

.comp-feedback-msg.is-hint {
  background: #fffbeb;
  border: 2px solid #f59e0b;
  color: #92400e;
}

/* Human-to-C# Sentence Translator in Workspace 2 */
.sentence-translator-card {
  background: var(--surface-card);
  border: 2.5px solid var(--dim-primary);
  border-radius: 24px;
  padding: 20px 24px;
  margin-bottom: 18px;
  box-shadow: 0 6px 0 var(--dim-primary-lip);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.trans-header h3 {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--text-main);
  margin-top: 6px;
}

.trans-dropdowns-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

@media (max-width: 960px) {
  .trans-dropdowns-grid {
    grid-template-columns: 1fr;
  }
}

.trans-step-col {
  padding: 12px 14px;
  border-radius: 16px;
  border: 2px solid var(--border-main);
  background: var(--surface-soft);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.trans-step-col label {
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--text-main);
}

.smart-native-select {
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 2px solid var(--border-strong);
  background: #ffffff;
  color: var(--text-main);
  font-family: var(--font-ar);
  font-size: 0.84rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 3px 0 var(--card-lip);
}

.sentence-translation-board {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.trans-arabic-sentence {
  padding: 12px 16px;
  border-radius: 16px;
  background: #fffbeb;
  border: 2px solid #fde68a;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.trans-badge {
  font-size: 0.78rem;
  font-weight: 800;
  color: #92400e;
}

.ar-part {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 9px;
  font-weight: 700;
  font-size: 0.84rem;
  margin: 2px;
}

.part-when { background: #e0f2fe; color: #0369a1; border: 1px solid #7dd3fc; }
.part-cond { background: #fef3c7; color: #b45309; border: 1px solid #fcd34d; }
.part-act  { background: #dcfce7; color: #15803d; border: 1px solid #86efac; }

.trans-visual-mapping {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

@media (max-width: 960px) {
  .trans-visual-mapping {
    grid-template-columns: 1fr;
  }
}

.map-piece {
  padding: 13px 15px;
  border-radius: 16px;
  background: #ffffff;
  border: 2px solid var(--border-main);
  box-shadow: 0 3px 0 var(--card-lip);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.map-piece.piece-when { border-color: #7dd3fc; background: #f0f9ff; }
.map-piece.piece-cond { border-color: #fcd34d; background: #fffbeb; }
.map-piece.piece-act  { border-color: #86efac; background: #f0fdf4; }

.piece-top {
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--text-main);
}

.map-piece code {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  padding: 7px 10px;
  border-radius: 10px;
  background: #ffffff;
  border: 1.5px solid var(--border-main);
  color: #0f172a;
}

.map-piece p {
  font-size: 0.78rem;
  color: var(--text-secondary);
  line-height: 1.45;
}

.trans-final-code-box {
  border-radius: 18px;
  overflow: hidden;
  border: 2px solid #e2d9c5;
  background: var(--surface-notebook);
}

.trans-code-head {
  padding: 9px 14px;
  background: var(--surface-notebook-gutter);
  border-bottom: 1.5px solid #e2d9c5;
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--text-main);
}

.trans-final-code-box pre {
  padding: 14px 16px;
  font-family: var(--font-mono);
  font-size: 0.84rem;
  line-height: 1.65;
  overflow-x: auto;
}

/* Guided Self-Discovery Coach in Workspace 3 */
.coach-self-fix-guide {
  padding: 10px 12px;
  border-radius: 12px;
  background: #f0f9ff;
  border: 1.5px solid #7dd3fc;
  color: #0c4a6e;
  font-size: 0.82rem;
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.coach-reveal-details {
  margin-top: 10px;
  border-radius: 12px;
  background: #ffffff;
  border: 1.5px dashed #10b981;
  padding: 8px 12px;
}

.coach-reveal-details summary {
  font-size: 0.8rem;
  font-weight: 800;
  color: #047857;
  cursor: pointer;
}

.coach-reveal-body {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Learn-First Mini Lesson Card in Classroom Game Arena */
.arena-learn-first-card {
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
  border: 2px solid #38bdf8;
  border-radius: 18px;
  padding: 13px 16px;
  margin: 10px 0 12px;
  box-shadow: 0 3px 0 #0284c7;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.learn-first-rule {
  font-size: 0.84rem;
  color: #0c4a6e;
  line-height: 1.5;
}

.learn-first-words {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.lf-word-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 10px;
  background: #ffffff;
  border: 1.5px solid #bae6fd;
  font-size: 0.78rem;
  color: var(--text-main);
}

.lf-word-chip code {
  font-family: var(--font-mono);
  font-weight: 800;
  color: #0369a1;
}

/* ============================================================================
   MAX-LEVEL UX UPGRADE SUITE: JOURNEY BAR, GOAL WIZARD, INLINE TOOLTIP,
   AUTO-TOUR, CODE ZOOM, LINE HIGHLIGHTER, TOASTS & COZY NIGHT MODE
   ============================================================================ */
:root {
  --code-font-size: 0.84rem;
}

.line-code-text,
.built-code-pre,
#studentCodeInput,
.editor-line-nums {
  font-size: var(--code-font-size) !important;
}

/* Cozy Night Comfort Reading Theme */
html[data-theme="night"] {
  --bg-canvas: #0f172a;
  --bg-canvas-secondary: #1e293b;
  --surface-card: #1e293b;
  --surface-soft: #0f172a;
  --surface-tinted: #172554;
  --surface-notebook: #0f172a;
  --surface-notebook-gutter: #1e293b;
  --text-main: #f8fafc;
  --text-secondary: #cbd5e1;
  --text-muted: #94a3b8;
  --border-main: #334155;
  --border-strong: #475569;
  --card-lip: #020617;
}

html[data-theme="night"] .command-bridge,
html[data-theme="night"] .learning-journey-bar,
html[data-theme="night"] .zero-found-card,
html[data-theme="night"] .vocab-flashcard,
html[data-theme="night"] .map-piece,
html[data-theme="night"] .diag-card,
html[data-theme="night"] .vgw-pill-btn,
html[data-theme="night"] .smart-drop-trigger,
html[data-theme="night"] .smart-drop-menu {
  background: #1e293b !important;
  color: #f8fafc !important;
  border-color: #475569 !important;
}

html[data-theme="night"] .code-line-row:hover,
html[data-theme="night"] .code-line-row.selected-line {
  background: rgba(20, 184, 166, 0.16) !important;
}

html[data-theme="night"] #studentCodeInput,
html[data-theme="night"] .built-code-pre,
html[data-theme="night"] .line-code-text {
  color: #e2e8f0 !important;
}

/* 1. 4-Step Learning Journey Bar & Mastery Tracker */
.learning-journey-bar {
  max-width: 1480px;
  margin: 10px auto 6px;
  padding: 12px 18px;
  border-radius: 22px;
  background: var(--surface-card);
  border: 2px solid var(--border-main);
  box-shadow: var(--shadow-toy-card);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.journey-steps-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.journey-arrow {
  color: var(--text-muted);
  font-weight: 800;
  font-size: 0.9rem;
}

.journey-step-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-radius: 16px;
  border: 2px solid var(--border-main);
  background: var(--surface-soft);
  color: var(--text-main);
  font-family: var(--font-ar);
  cursor: pointer;
  box-shadow: 0 3px 0 var(--card-lip);
  transition: all 0.16s ease;
  text-align: right;
}

.journey-step-pill:hover {
  border-color: var(--dim-primary);
  transform: translateY(-1px);
}

.journey-step-pill.active {
  background: var(--dim-primary-soft);
  border-color: var(--dim-primary);
  box-shadow: 0 3px 0 var(--dim-primary-lip);
}

.j-num {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--dim-primary);
  color: #ffffff;
  font-weight: 800;
  font-size: 0.8rem;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.j-txt strong {
  display: block;
  font-size: 0.82rem;
  color: var(--text-main);
}

.j-txt small {
  display: block;
  font-size: 0.7rem;
  color: var(--text-secondary);
}

.mastery-progress-cluster {
  min-width: 250px;
  padding: 8px 14px;
  border-radius: 14px;
  background: var(--surface-soft);
  border: 1.5px solid var(--border-main);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mastery-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.76rem;
}

.mastery-label {
  font-weight: 700;
  color: var(--text-secondary);
}

.mastery-pct {
  font-family: var(--font-mono);
  color: var(--dim-primary-hover);
  font-weight: 800;
}

.mastery-track {
  width: 100%;
  height: 9px;
  border-radius: 99px;
  background: #e2e8f0;
  overflow: hidden;
}

.mastery-fill {
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, #10b981, var(--dim-primary));
  transition: width 0.35s ease;
}

/* 2. Visible 1-Click Goal Wizard Strip */
.visible-goal-wizard {
  background: var(--surface-card);
  border: 2px solid var(--border-main);
  border-radius: 20px;
  padding: 12px 16px;
  margin-bottom: 14px;
  box-shadow: var(--shadow-toy-card);
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.vgw-label {
  display: flex;
  flex-direction: column;
  min-width: 195px;
}

.vgw-label span {
  font-size: 0.86rem;
  font-weight: 800;
  color: var(--text-main);
}

.vgw-label small {
  font-size: 0.73rem;
  color: var(--text-secondary);
}

.vgw-pills-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  flex: 1;
}

.vgw-pill-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 13px;
  border: 2px solid var(--border-main);
  background: #ffffff;
  color: var(--text-main);
  font-family: var(--font-ar);
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 3px 0 var(--card-lip);
  transition: all 0.14s ease;
}

.vgw-pill-btn:hover {
  border-color: var(--dim-primary);
  transform: translateY(-1px);
}

.vgw-pill-btn.active {
  background: var(--dim-primary);
  color: #ffffff;
  border-color: var(--dim-primary-lip);
  box-shadow: 0 3px 0 var(--dim-primary-lip);
}

.vgw-pill-btn.is-mastered .vgw-done {
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: #10b981;
  color: #ffffff;
  font-size: 0.68rem;
  display: inline-grid;
  place-items: center;
}

/* 3. Code Notebook UX Toolbar: Auto-Tour & Zoom */
.code-ux-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.code-tour-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 99px;
  border: 1.5px solid #f59e0b;
  background: #fffbeb;
  color: #b45309;
  font-family: var(--font-ar);
  font-size: 0.75rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 2px 0 #d97706;
  transition: all 0.15s ease;
}

.code-tour-btn:hover {
  background: #fef3c7;
}

.code-tour-btn.active-tour {
  background: #ef4444;
  color: #ffffff;
  border-color: #b91c1c;
  box-shadow: 0 2px 0 #991b1b;
}

.code-zoom-group {
  display: inline-flex;
  border-radius: 10px;
  overflow: hidden;
  border: 1.5px solid var(--border-strong);
  background: #ffffff;
}

.zoom-btn {
  padding: 4px 9px;
  border: none;
  background: transparent;
  color: var(--text-main);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 800;
  cursor: pointer;
}

.zoom-btn:hover {
  background: var(--dim-primary-soft);
  color: var(--dim-primary-hover);
}

/* 4. Interactive Inline Word Dictionary Tooltip */
.tok-interactive {
  cursor: help;
  border-bottom: 1.5px dotted rgba(13, 148, 136, 0.55);
  border-radius: 3px;
  transition: background 0.12s ease;
}

.tok-interactive:hover {
  background: rgba(251, 191, 36, 0.28);
}

.inline-word-tooltip {
  position: fixed;
  z-index: 9999;
  max-width: 280px;
  background: #ffffff;
  border: 2.5px solid var(--dim-primary);
  border-radius: 16px;
  padding: 11px 14px;
  box-shadow: 0 6px 0 var(--dim-primary-lip), 0 14px 28px rgba(15, 23, 42, 0.18);
  pointer-events: none;
  direction: rtl;
  text-align: right;
}

.iwt-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 5px;
}

.iwt-head code {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--dim-primary-hover);
  background: var(--dim-primary-soft);
  padding: 2px 8px;
  border-radius: 7px;
}

.iwt-meaning {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-main);
  line-height: 1.45;
}

.iwt-analogy {
  margin-top: 5px;
  font-size: 0.74rem;
  color: #0369a1;
  background: #f0f9ff;
  padding: 4px 8px;
  border-radius: 8px;
}

/* 5. Jump-to-Line Button in Guided Coach & Try Sentence Button */
.jump-line-btn {
  padding: 5px 11px;
  border-radius: 99px;
  border: 1.5px solid #0284c7;
  background: #e0f2fe;
  color: #0369a1;
  font-family: var(--font-ar);
  font-size: 0.75rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 2px 0 #0284c7;
  transition: all 0.14s ease;
}

.jump-line-btn:hover {
  background: #0284c7;
  color: #ffffff;
}

.trans-code-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.trans-try-btn {
  font-size: 0.76rem !important;
  padding: 6px 12px !important;
}

/* 6. Global UX Toast Notifications */
.ux-toast-container {
  position: fixed;
  bottom: 22px;
  left: 22px;
  z-index: 9998;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}

.ux-toast-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 18px;
  background: #ffffff;
  border: 2.5px solid var(--dim-primary);
  box-shadow: 0 5px 0 var(--dim-primary-lip), 0 12px 24px rgba(15, 23, 42, 0.14);
  min-width: 260px;
  max-width: 360px;
  animation: toastSlideIn 0.24s cubic-bezier(0.16, 1, 0.3, 1);
}

.ux-toast-card.toast-out {
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.25s ease;
}

.ux-toast-ic {
  font-size: 1.45rem;
}

.ux-toast-txt strong {
  display: block;
  font-size: 0.84rem;
  color: var(--text-main);
}

.ux-toast-txt small {
  display: block;
  font-size: 0.75rem;
  color: var(--text-secondary);
}

@keyframes toastSlideIn {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ========================================================================== */
/* 7. GAME-CHANGERS & STUDIO ART STAGE ENHANCEMENTS                           */
/* ========================================================================== */
.mastery-actions-inline {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cert-export-btn {
  padding: 4px 10px;
  border-radius: 99px;
  border: 1.5px solid #f59e0b;
  background: #fef3c7;
  color: #92400e;
  font-family: var(--font-ar);
  font-size: 0.72rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 2px 0 #d97706;
  transition: all 0.14s ease;
}

.cert-export-btn:hover {
  background: #f59e0b;
  color: #ffffff;
  transform: translateY(-1px);
}

.sim-ctrl-btn.active-gizmo {
  background: #dcfce7;
  border-color: #16a34a;
  color: #15803d;
}

/* Arena Visual SVG Game Stage */
.arena-visual-art-banner {
  margin-bottom: 12px;
  border-radius: 16px;
  overflow: hidden;
  border: 2px solid var(--border-main);
  background: #ffffff;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
}

.arena-visual-art-banner.mission-solved-anim {
  border-color: #10b981;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
}

.arena-svg-stage-wrap {
  position: relative;
}

.arena-svg-badge {
  position: absolute;
  top: 8px;
  right: 10px;
  z-index: 2;
  padding: 4px 10px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.92);
  border: 1.5px solid var(--dim-primary);
  color: var(--text-main);
  font-size: 0.72rem;
  font-weight: 800;
}

.arena-scene-svg {
  display: block;
  width: 100%;
  height: 112px;
}

.arena-svg-hero {
  transition: transform 0.65s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.arena-svg-coin {
  animation: coinFloatPulse 2.2s ease-in-out infinite;
}

@keyframes coinFloatPulse {
  0%, 100% {
    transform: translate(375px, 58px);
  }
  50% {
    transform: translate(375px, 51px);
  }
}

/* ========================================================================== */
/* 8. DECLUTTERED & ORGANIZED SUB-TABS ARCHITECTURE                           */
/* ========================================================================== */

/* Airy, balanced spacing for top navigation & main workspace */
.command-bridge {
  margin-bottom: 10px;
}

.journey-progress-ribbon {
  margin-bottom: 14px;
  padding: 10px 18px;
}

.zero-knowledge-banner {
  margin-bottom: 14px;
}

/* Keep Explorer 2-column grid well-aligned and uncluttered */
.explorer-grid {
  align-items: start;
  gap: 20px;
}

.code-xray-bay {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.holo-stage-bay {
  position: sticky;
  top: 16px;
}

/* Organized Sub-Tabs Card (Explorer, Builder, Doctor) */
.organized-subtabs-card {
  background: var(--surface-card);
  border: 2px solid var(--border-main);
  border-radius: 22px;
  padding: 14px;
  box-shadow: var(--shadow-toy-sm);
}

.subtabs-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 6px;
  background: var(--bg-canvas);
  border: 1.5px solid var(--border-main);
  border-radius: 16px;
  margin-bottom: 14px;
}

.builder-mode-subtabs {
  max-width: 680px;
  margin: 0 auto 18px auto;
  background: var(--surface-card);
  padding: 8px;
  box-shadow: var(--shadow-toy-sm);
}

.subtab-btn {
  flex: 1 1 auto;
  min-width: 120px;
  padding: 9px 14px;
  border-radius: 12px;
  border: 1.5px solid transparent;
  background: transparent;
  color: var(--text-secondary);
  font-family: var(--font-ar);
  font-size: 0.82rem;
  font-weight: 800;
  cursor: pointer;
  text-align: center;
  transition: all 0.16s ease;
}

.subtab-btn:hover {
  background: var(--surface-tinted);
  color: var(--text-main);
}

.subtab-btn.active {
  background: var(--dim-primary);
  color: #ffffff;
  border-color: var(--dim-primary-hover);
  box-shadow: 0 3px 0 var(--dim-primary-lip);
  transform: translateY(-1px);
}

.subtab-pane {
  animation: fadeSubTab 0.18s ease-out;
}

.subtab-pane[hidden] {
  display: none !important;
}

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

/* Clean child cards inside sub-tab panes so there are no double borders */
.organized-subtabs-card .analogy-card,
.organized-subtabs-card .lesson-vocab-card,
.organized-subtabs-card .comprehension-challenge-box,
.organized-subtabs-card .flowchart-box {
  margin: 0;
  box-shadow: none;
  border-width: 1.5px;
}

/* Teacher QR & Room Drawer in Arena */
.arena-teacher-drawer {
  margin-bottom: 14px;
  border: 2px dashed var(--dim-primary);
  background: var(--surface-card);
  border-radius: 18px;
}

.arena-teacher-drawer > .accordion-summary {
  padding: 12px 18px;
}

.arena-teacher-drawer .arena-hero-banner {
  margin: 0;
  border: none;
  box-shadow: none;
  padding-top: 8px;
}

/* ========================================================================== */
/* 9. DRAG & DROP STUDIO, MEMORY SIMULATOR & TRAINER LIVE TOOLKIT             */
/* ========================================================================== */

/* Trainer Live Teaching Studio Bar */
.trainer-toolkit-btn.active {
  background: var(--dim-primary);
  color: #ffffff;
  border-color: var(--dim-primary-hover);
}

.trainer-studio-bar {
  background: linear-gradient(135deg, #fffbeb 0%, #f0fdfa 100%);
  border: 2px solid var(--dim-primary);
  border-radius: 20px;
  padding: 12px 18px;
  margin-bottom: 14px;
  box-shadow: var(--shadow-toy-sm);
}

.trainer-bar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.trainer-pill {
  background: var(--dim-primary);
  color: #ffffff;
  padding: 4px 12px;
  border-radius: 99px;
  font-size: 0.78rem;
  font-weight: 800;
}

.trainer-tools-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.trainer-tool-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 13px;
  border-radius: 12px;
  border: 1.5px solid var(--border-strong);
  background: #ffffff;
  color: var(--text-main);
  font-family: var(--font-ar);
  font-size: 0.8rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 2px 0 var(--border-strong);
  transition: all 0.15s ease;
}

.trainer-tool-btn:hover {
  border-color: var(--dim-primary);
  transform: translateY(-1px);
}

.trainer-tool-btn.active {
  background: #fef3c7;
  border-color: #d97706;
  color: #92400e;
  box-shadow: 0 2px 0 #d97706;
}

.trainer-wb-palette {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: #ffffff;
  border-radius: 99px;
  border: 1.5px solid var(--border-main);
}

.wb-color-dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid #ffffff;
  box-shadow: 0 0 0 1.5px #cbd5e1;
  cursor: pointer;
}

.wb-color-dot.active {
  transform: scale(1.22);
  box-shadow: 0 0 0 2px #0f172a;
}

.trainer-annotation-canvas {
  position: fixed;
  inset: 0;
  z-index: 950;
  cursor: crosshair;
}

.trainer-laser-dot {
  position: fixed;
  top: 0;
  left: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffffff 15%, #ef4444 55%, rgba(239, 68, 68, 0) 100%);
  box-shadow: 0 0 16px 6px rgba(239, 68, 68, 0.75);
  pointer-events: none;
  z-index: 999;
}

body.trainer-projector-mode {
  --code-font-size: 1.06rem;
}

/* Trainer Classroom Radar inside Arena Drawer */
.trainer-class-radar {
  margin-top: 12px;
  padding: 10px 14px;
  border-radius: 14px;
  background: var(--bg-canvas);
  border: 1.5px solid var(--border-main);
}

.radar-metrics-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 6px;
}

.radar-chip {
  padding: 4px 10px;
  border-radius: 99px;
  background: #ffffff;
  border: 1px solid var(--border-main);
  font-size: 0.76rem;
}

.radar-coach-tip {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--dim-primary-hover);
}

/* Drag & Drop Studio Game Mode */
.dd-studio-wrap {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.dd-source-tray {
  background: var(--bg-canvas);
  border: 2px solid var(--border-main);
  border-radius: 16px;
  padding: 12px;
}

.dd-cards-pool {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  margin-top: 8px;
}

.dd-magnet-card {
  background: #ffffff;
  border: 2px solid var(--border-strong);
  border-radius: 14px;
  padding: 10px 12px;
  cursor: grab;
  box-shadow: 0 3px 0 var(--border-strong);
  transition: all 0.15s ease;
}

.dd-magnet-card:hover {
  border-color: var(--dim-primary);
  transform: translateY(-2px);
}

.dd-magnet-card.dd-card-selected {
  border-color: #f59e0b;
  background: #fffbeb;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.28);
}

.dd-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--dim-primary-hover);
}

.dd-magnet-card code {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: #0f172a;
  background: #f8fafc;
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
}

.dd-zones-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(235px, 1fr));
  gap: 12px;
}

.dd-target-zone {
  background: #ffffff;
  border: 2px dashed var(--border-strong);
  border-radius: 16px;
  padding: 12px;
  min-height: 132px;
  transition: all 0.16s ease;
}

.dd-target-zone.dd-zone-ready {
  border-color: #f59e0b;
  background: #fffdf5;
  cursor: pointer;
}

.dd-target-zone.dd-zone-dragover,
.puzzle-dropzone.dd-zone-dragover,
.code-blank-slot.dd-zone-dragover {
  border-color: var(--dim-primary) !important;
  background: var(--dim-primary-soft) !important;
  transform: scale(1.01);
}

.dd-zone-head {
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border-main);
}

.dd-zone-head strong {
  display: block;
  font-size: 0.84rem;
  color: var(--text-main);
}

.dd-zone-head small {
  font-size: 0.73rem;
  color: var(--text-secondary);
}

.dd-zone-placeholder {
  padding: 14px;
  text-align: center;
  font-size: 0.76rem;
  color: var(--text-muted);
  font-weight: 700;
}

.dd-placed-chip {
  background: var(--surface-tinted);
  border: 1.5px solid var(--dim-primary);
  border-radius: 12px;
  padding: 8px 10px;
  margin-bottom: 8px;
}

.dd-placed-chip.dd-chip-correct {
  background: #dcfce7;
  border-color: #16a34a;
}

.dd-chip-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.dd-chip-row code {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  font-weight: 700;
}

.dd-remove-btn {
  border: none;
  background: #fee2e2;
  color: #b91c1c;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 800;
}

.dd-chip-explain {
  display: block;
  margin-top: 4px;
  font-size: 0.72rem;
  color: var(--text-secondary);
}

/* Enhanced Puzzle Line Explanations & Up/Down Reorder Controls */
.placed-code-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.placed-line-meaning {
  font-family: var(--font-ar);
  font-size: 0.71rem;
  color: var(--dim-primary-hover);
  font-weight: 700;
}

.placed-ctrl-btns {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.mini-order-btn {
  padding: 2px 6px;
  border-radius: 6px;
  border: 1px solid var(--border-strong);
  background: #ffffff;
  font-size: 0.7rem;
  cursor: pointer;
}

.mini-order-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.fb-why-pedagogy {
  margin-top: 6px;
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.75);
  font-size: 0.8rem;
  color: #0f172a;
}

.fb-actions-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

/* Code Coach Memory & Frame Simulator (#docPane_memory) */
.mem-sim-header h4 {
  font-size: 0.94rem;
  margin-bottom: 4px;
}

.mem-sim-header p {
  font-size: 0.78rem;
  color: var(--text-secondary);
  margin-bottom: 12px;
}

.mem-frame-stepper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(135px, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

.mem-step-btn {
  padding: 8px 10px;
  border-radius: 12px;
  border: 1.5px solid var(--border-strong);
  background: var(--bg-canvas);
  font-family: var(--font-ar);
  font-size: 0.78rem;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.14s ease;
}

.mem-step-btn.active {
  background: var(--dim-primary);
  color: #ffffff;
  border-color: var(--dim-primary-hover);
  box-shadow: 0 3px 0 var(--dim-primary-lip);
}

.mem-stage-banner {
  padding: 10px 14px;
  border-radius: 14px;
  background: var(--surface-tinted);
  border: 1.5px solid var(--dim-primary);
  margin-bottom: 10px;
}

.mem-stage-banner strong {
  display: block;
  font-size: 0.85rem;
  margin-bottom: 2px;
}

.mem-stage-banner p {
  font-size: 0.77rem;
  color: var(--text-secondary);
}

.mem-vars-table {
  border: 1.5px solid var(--border-main);
  border-radius: 14px;
  overflow: hidden;
  background: #ffffff;
}

.mem-table-head,
.mem-table-row {
  display: grid;
  grid-template-columns: 1.2fr 0.9fr 1.1fr 1.5fr;
  gap: 8px;
  padding: 9px 12px;
  align-items: center;
  font-size: 0.76rem;
}

.mem-table-head {
  background: var(--bg-canvas);
  font-weight: 800;
  border-bottom: 1.5px solid var(--border-main);
}

.mem-table-row {
  border-bottom: 1px solid var(--border-main);
}

.mem-table-row:last-child {
  border-bottom: none;
}

.mem-type-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 99px;
  background: #f1f5f9;
  font-size: 0.7rem;
  font-weight: 700;
}

.mem-val-cell {
  color: var(--dim-primary-hover);
  font-family: var(--font-mono);
}

/* ========================================================================== */
/* 10. CALM, BREATHABLE & UNCROWDED INFORMATION PRESENTATION                  */
/* ========================================================================== */

/* 1. Generous outer breathing room & relaxed vertical rhythm */
body {
  padding-bottom: 56px;
}

.command-bridge {
  padding: 12px 22px;
  margin-bottom: 12px;
  border-width: 1.5px;
  box-shadow: 0 6px 20px -6px rgba(15, 23, 42, 0.05);
}

.brand-sub {
  display: none;
}

/* 2. Sleek, single-line Learning Journey Bar without multi-line text clutter */
.learning-journey-bar {
  padding: 10px 18px;
  margin-bottom: 16px;
  border-width: 1.5px;
  box-shadow: 0 6px 20px -6px rgba(15, 23, 42, 0.04);
  gap: 14px;
}

.journey-step-pill {
  padding: 8px 16px;
  border-radius: 14px;
  border-width: 1.5px;
}

.journey-step-pill .j-txt small,
.journey-arrow {
  display: none;
}

.journey-steps-group {
  gap: 8px;
}

.mastery-progress-cluster {
  min-width: 220px;
  padding: 6px 12px;
  border-radius: 14px;
  background: var(--bg-canvas);
}

/* 3. Clean, lightweight Script Selector Toolbar */
.smart-selector-bar {
  padding: 10px 16px;
  margin-bottom: 18px;
  border-width: 1.5px;
  box-shadow: 0 6px 18px -6px rgba(15, 23, 42, 0.04);
  gap: 12px;
}

/* 4. Spacious 2-Column Grids & Relaxed Card Padding */
.studio-grid,
.doctor-grid,
.arena-main-grid {
  gap: 24px;
  align-items: start;
}

.code-xray-bay,
.simulator-dock,
.arena-play-panel,
.arena-leaderboard-panel,
.doctor-editor-panel {
  padding: 20px 22px;
  border-width: 1.5px;
  border-radius: 24px;
  box-shadow: 0 10px 28px -8px rgba(15, 23, 42, 0.05);
}

/* 5. Declutter Script Header & Hide Secondary Badges */
#activeModCode,
.code-hint-banner,
.mission-hint-row {
  display: none !important;
}

.xray-header {
  padding-bottom: 12px;
  margin-bottom: 4px;
}

.xray-title-wrap h1 {
  font-size: 1.24rem;
  margin-bottom: 4px;
}

.xray-title-wrap p {
  font-size: 0.84rem;
  line-height: 1.55;
  color: var(--text-secondary);
}

/* 6. Compact, Calm Line X-Ray Card with Collapsible "What-If" Drawer */
.line-xray-card {
  padding: 14px 18px;
  border-width: 1.5px;
  border-radius: 18px;
  box-shadow: none;
}

.what-if-collapsible {
  margin-top: 8px;
  padding: 8px 12px;
  border-radius: 12px;
  border-width: 1px;
  cursor: pointer;
}

.what-if-collapsible > summary {
  list-style: none;
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 800;
  margin: 0;
}

.what-if-collapsible > summary::-webkit-details-marker {
  display: none;
}

.what-if-collapsible p {
  margin-top: 6px;
}

/* 7. Simulator Dock Unified 3-Tab Card */
.sim-dock-subtabs-card {
  margin-top: 14px;
  padding: 14px;
  border-radius: 20px;
  border-width: 1.5px;
  box-shadow: none;
}

.sim-dock-subtabs-card .unity-transform-strip {
  margin-bottom: 10px;
}

/* 8. Calm Hero Banners in Workspace 2 & Workspace 3 */
.doctor-hero {
  padding: 16px 22px;
  margin-bottom: 18px;
  border-width: 1.5px;
  border-radius: 22px;
  box-shadow: 0 8px 22px -8px rgba(15, 23, 42, 0.04);
}

.doctor-hero-text h2 {
  font-size: 1.15rem;
  margin-bottom: 4px;
}

.doctor-hero-text p {
  font-size: 0.83rem;
  line-height: 1.55;
}

/* 9. Arena Mini-Lesson Collapsible Drawer (Keeps Game Board Uncrowded!) */
.arena-learn-first-card {
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  margin-bottom: 14px;
}

.arena-mini-lesson-drawer {
  background: var(--bg-canvas);
  border: 1.5px solid var(--border-main);
  border-radius: 14px;
  padding: 10px 14px;
  margin-top: 10px;
}

.mini-lesson-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--dim-primary-hover);
  list-style: none;
}

.mini-lesson-summary::-webkit-details-marker {
  display: none;
}

.mini-lesson-body {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border-main);
}

/* ========================================================================== */
/* 11. ZERO-FEAR STUDENT SANCTUARY MODE (MINIMAL, CALM & NON-INTIMIDATING)    */
/* ========================================================================== */

/* Center the entire experience in a calm, breathable max-width container */
.command-bridge,
.trainer-studio-bar,
.learning-journey-bar,
.deck-workspace {
  max-width: 1140px;
  margin-left: auto;
  margin-right: auto;
}

/* Hide intimidating technical chrome & secondary boxes from default view */
#topDimensionBadge,
#openAiModalBtn,
.mastery-progress-cluster,
#zeroKnowledgeAccordion,
.xray-badges,
#codeActionsDropdown,
.window-dots,
.code-zoom-group,
#liveExecIndicator,
#camPresetDropdown,
#simGizmoToggleBtn,
#simPlayPauseBtn,
#canvasHudStats,
.unity-transform-strip,
.wiz-badge,
.doctor-hero-text p,
#doctorDetectedDim,
#clearEditorBtn,
#arenaStageStepper,
.mission-badges,
.matrix-section,
.concepts-section {
  display: none !important;
}

/* Center the 4 friendly learning steps in a clean, minimal pill bar */
.learning-journey-bar {
  justify-content: center;
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 4px 0 12px 0;
  margin-bottom: 12px;
}

.journey-steps-group {
  background: var(--surface-card);
  padding: 6px;
  border-radius: 18px;
  border: 1.5px solid var(--border-main);
  box-shadow: 0 4px 16px -4px rgba(15, 23, 42, 0.05);
}

/* Minimal, gentle Script Selector Bar */
.smart-selector-bar {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  margin-bottom: 18px;
}

/* Gentle Collapsible "More" Drawers for Extra Learning & Sliders */
.gentle-more-drawer {
  margin-top: 12px;
  background: var(--bg-canvas);
  border: 1.5px solid var(--border-main);
  border-radius: 18px;
  overflow: hidden;
  transition: all 0.2s ease;
}

.gentle-drawer-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 18px;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--dim-primary-hover);
  list-style: none;
  user-select: none;
}

.gentle-drawer-summary::-webkit-details-marker {
  display: none;
}

.gentle-more-drawer:hover {
  border-color: var(--dim-primary);
}

.gentle-more-drawer > .organized-subtabs-card {
  border: none;
  border-top: 1px solid var(--border-main);
  border-radius: 0;
  box-shadow: none;
  margin: 0;
}