/* ==========================================================================
   THE ENGINEER'S ARCHIPELAGO — DESIGN SYSTEM & STYLESHEET
   Curated palette, glassmorphism, floating quick-peek HUD, and live playgrounds.
   ========================================================================== */

:root {
  --bg-space: #070b13;
  --bg-surface: #0f172a;
  --bg-surface-elevated: #1e293b;
  --border-subtle: rgba(148, 163, 184, 0.16);
  --border-strong: rgba(148, 163, 184, 0.35);

  --accent-cyan: #38bdf8;
  --accent-amber: #f59e0b;
  --accent-purple: #a855f7;
  --accent-emerald: #10b981;
  --accent-magenta: #ec4899;
  --accent-red: #ef4444;

  --text-primary: #f8fafc;
  --text-secondary: #94a3b8;
  --text-muted: #64748b;

  --font-display: 'Archivo', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 18px;
  --radius-full: 9999px;
}

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

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: var(--bg-space);
  color: var(--text-primary);
  font-family: var(--font-display);
  -webkit-font-smoothing: antialiased;
  user-select: none;
}

/* ── 1. Fullscreen Canvas Viewport ─────────────────────────────────── */
#game-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 1;
}

/* ── 2. Top HUD Masthead ───────────────────────────────────────────── */
.hud-masthead {
  position: absolute;
  top: 14px;
  left: 18px;
  right: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  z-index: 20;
  pointer-events: none;
}

.hud-group {
  display: flex;
  align-items: center;
  gap: 10px;
  pointer-events: auto;
}

.hud-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(15, 23, 42, 0.88);
  backdrop-filter: blur(12px);
  border: 1px solid var(--border-subtle);
  padding: 8px 14px;
  border-radius: var(--radius-full);
  text-decoration: none;
  color: var(--text-primary);
  font-weight: 700;
  font-size: 14px;
}

.hud-brand-icon {
  color: var(--accent-cyan);
  display: flex;
  align-items: center;
}

.hud-codex-badge {
  background: rgba(15, 23, 42, 0.88);
  backdrop-filter: blur(12px);
  border: 1px solid var(--border-subtle);
  padding: 7px 14px;
  border-radius: var(--radius-full);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--accent-amber);
  display: flex;
  align-items: center;
  gap: 6px;
}

.hud-xp-badge {
  background: rgba(15, 23, 42, 0.88);
  backdrop-filter: blur(12px);
  border: 1px solid var(--border-subtle);
  padding: 5px 12px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
}

.hud-level-pill {
  background: var(--accent-cyan);
  color: #070b13;
  font-weight: 900;
  font-size: 10px;
  padding: 2px 7px;
  border-radius: var(--radius-full);
  letter-spacing: 0.5px;
}

.hud-xp-bar-wrap {
  width: 75px;
  height: 6px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  overflow: hidden;
}

.hud-xp-bar {
  height: 100%;
  background: linear-gradient(90deg, #06b6d4, #38bdf8);
  border-radius: 3px;
  transition: width 0.3s ease;
}

.hud-xp-text {
  font-size: 11px;
  color: var(--text-secondary);
}

.hud-select {
  background: rgba(15, 23, 42, 0.88);
  backdrop-filter: blur(12px);
  border: 1px solid var(--border-subtle);
  color: var(--text-primary);
  padding: 7px 12px;
  border-radius: var(--radius-full);
  font-size: 12px;
  font-family: var(--font-mono);
  outline: none;
  cursor: pointer;
}

/* ── Common Buttons ────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: rgba(15, 23, 42, 0.88);
  backdrop-filter: blur(12px);
  border: 1px solid var(--border-subtle);
  color: var(--text-primary);
  padding: 8px 14px;
  border-radius: var(--radius-full);
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font-display);
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn:hover {
  background: var(--bg-surface-elevated);
  border-color: var(--accent-cyan);
  transform: translateY(-1px);
}

.btn-accent {
  background: var(--accent-cyan);
  color: #070b13;
  border-color: var(--accent-cyan);
}

.btn-accent:hover {
  background: #7dd3fc;
  border-color: #7dd3fc;
}

.btn-apk {
  background: rgba(16, 185, 129, 0.2);
  color: #34d399;
  border-color: #10b981;
  font-weight: 700;
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.25);
}

.btn-apk:hover {
  background: #10b981;
  color: #020617;
  border-color: #34d399;
  box-shadow: 0 0 16px rgba(16, 185, 129, 0.45);
}

.btn-desktop {
  background: rgba(245, 158, 11, 0.2);
  color: #fbbf24;
  border-color: #f59e0b;
  font-weight: 700;
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.25);
}

.btn-desktop:hover {
  background: #f59e0b;
  color: #020617;
  border-color: #fbbf24;
  box-shadow: 0 0 16px rgba(245, 158, 11, 0.45);
}

.android-release-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.12), rgba(6, 78, 59, 0.24));
  border: 1px solid rgba(16, 185, 129, 0.45);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  margin-top: 14px;
  margin-bottom: 8px;
}

.android-release-card .release-info h5 {
  font-size: 13px;
  font-weight: 800;
  color: #34d399;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 3px;
}

.android-release-card .release-info p {
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.4;
  margin: 0;
}

.btn-sm {
  padding: 5px 10px;
  font-size: 11px;
}

/* ── 3. Floating Quick-Peek Proximity HUD (Docked Cleanly Bottom-Left) ── */
.hud-quick-peek {
  position: absolute;
  bottom: 74px;
  left: 20px;
  width: 380px;
  max-width: calc(100vw - 40px);
  z-index: 25;
  pointer-events: none;
  opacity: 0;
  transform: translateY(16px) scale(0.96);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.hud-quick-peek.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.qp-card {
  background: rgba(15, 23, 42, 0.96);
  backdrop-filter: blur(16px);
  border: 1px solid var(--accent-cyan);
  border-radius: var(--radius-lg);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.7);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.qp-thumb-wrap {
  width: 100%;
  height: 150px;
  position: relative;
  background: #070b13;
  overflow: hidden;
}

.qp-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.qp-thumb-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  color: var(--accent-cyan);
  font-weight: bold;
}

.qp-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  color: #070b13;
  font-weight: 800;
  font-size: 10px;
  padding: 3px 8px;
  border-radius: var(--radius-full);
  font-family: var(--font-mono);
  box-shadow: 0 4px 10px rgba(0,0,0,0.4);
}

.qp-body {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.qp-title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.qp-title-row h4 {
  font-size: 16px;
  font-weight: 800;
}

.qp-tagline {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.4;
}

.qp-actions {
  display: flex;
  gap: 6px;
  margin-top: 4px;
  flex-wrap: wrap;
}

/* ── Floating Fast Travel Warp Notification Banner ─────────────────── */
.hud-district-banner {
  position: absolute;
  top: 74px;
  left: 50%;
  transform: translateX(-50%) translateY(-20px);
  background: rgba(15, 23, 42, 0.94);
  border: 1px solid var(--accent-cyan);
  color: var(--accent-cyan);
  padding: 8px 24px;
  border-radius: var(--radius-full);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.8px;
  box-shadow: 0 0 24px rgba(56, 189, 248, 0.4);
  backdrop-filter: blur(12px);
  z-index: 40;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.hud-district-banner.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ── 4. Bottom Controls Helper & Minimap ────────────────────────────── */
.hud-bottom-bar {
  position: absolute;
  bottom: 18px;
  left: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 20;
  pointer-events: none;
}

.hud-instructions-card {
  background: rgba(15, 23, 42, 0.88);
  backdrop-filter: blur(12px);
  border: 1px solid var(--border-subtle);
  padding: 8px 14px;
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-secondary);
  pointer-events: auto;
}

.hud-instructions-card kbd {
  background: #1e293b;
  border: 1px solid var(--border-strong);
  padding: 2px 6px;
  border-radius: 4px;
  color: var(--accent-cyan);
  font-weight: bold;
}

.hud-minimap-card {
  position: absolute;
  bottom: 18px;
  right: 18px;
  background: rgba(15, 23, 42, 0.88);
  backdrop-filter: blur(12px);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 10px;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.minimap-title {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

#minimap-canvas {
  width: 140px;
  height: 140px;
  background: #070b13;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  cursor: crosshair;
}

/* ── 5. Terminal Project Cockpit Modal ──────────────────────────────── */
.terminal-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(7, 11, 19, 0.8);
  backdrop-filter: blur(16px);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.terminal-modal-overlay.is-active {
  opacity: 1;
  pointer-events: auto;
}

.terminal-window {
  width: 100%;
  max-width: 960px;
  max-height: 90vh;
  background: #0f172a;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow: 0 25px 60px -12px rgba(0, 0, 0, 0.85);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  user-select: text;
}

.terminal-header {
  padding: 16px 24px;
  background: #1e293b;
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

.terminal-title-area h3 {
  font-size: 20px;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 10px;
}

.crown-tag {
  background: rgba(245, 158, 11, 0.2);
  border: 1px solid var(--accent-amber);
  color: var(--accent-amber);
  font-size: 10px;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-family: var(--font-mono);
}

.terminal-sub {
  font-size: 12px;
  color: var(--accent-cyan);
  font-family: var(--font-mono);
  margin-top: 4px;
}

.terminal-tagline {
  font-size: 13px;
  color: var(--text-secondary);
  margin-top: 4px;
}

.terminal-nav {
  display: flex;
  gap: 6px;
  padding: 10px 24px;
  background: #0f172a;
  border-bottom: 1px solid var(--border-subtle);
}

.cockpit-tab-btn {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.15s ease;
}

.cockpit-tab-btn:hover {
  color: var(--text-primary);
  background: #1e293b;
}

.cockpit-tab-btn.is-active {
  background: var(--accent-cyan);
  color: #070b13;
  font-weight: bold;
}

.terminal-body {
  padding: 24px;
  overflow-y: auto;
  flex: 1;
}

/* ── Hero Screenshot Preview Inside Cockpit ────────────────────────── */
.cockpit-hero-screenshot-wrap {
  width: 100%;
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: 20px;
  border: 1px solid var(--border-strong);
  background: #070b13;
  position: relative;
  transition: all 0.25s ease;
}

.cockpit-hero-screenshot-wrap.clickable-zoom {
  cursor: zoom-in;
}

.cockpit-hero-screenshot-wrap.clickable-zoom:hover {
  border-color: #00f0ff;
  box-shadow: 0 0 25px rgba(0, 240, 255, 0.25);
  transform: translateY(-2px);
}

.cockpit-hero-screenshot {
  width: 100%;
  max-height: 420px;
  object-fit: contain;
  background: #020617;
  display: block;
  transition: transform 0.3s ease;
}

.cockpit-hero-screenshot-wrap.clickable-zoom:hover .cockpit-hero-screenshot {
  transform: scale(1.02);
}

.screenshot-zoom-badge {
  position: absolute;
  top: 10px;
  right: 12px;
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid #00f0ff;
  color: #00f0ff;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: bold;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  transition: all 0.2s ease;
  pointer-events: none;
}

.cockpit-hero-screenshot-wrap:hover .screenshot-zoom-badge {
  background: #00f0ff;
  color: #020617;
  box-shadow: 0 0 15px rgba(0, 240, 255, 0.6);
}

.screenshot-caption {
  position: absolute;
  bottom: 8px;
  right: 12px;
  background: rgba(7, 11, 19, 0.85);
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
}

/* ── Fullscreen High-Resolution Lightbox Modal ─────────────────────── */
.image-lightbox-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(2, 6, 23, 0.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  z-index: 10000;
  display: none;
  flex-direction: column;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.image-lightbox-overlay.is-active {
  display: flex;
  opacity: 1;
}

.lightbox-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  background: rgba(15, 23, 42, 0.9);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  z-index: 10;
}

.lightbox-title-area {
  display: flex;
  align-items: center;
  gap: 12px;
}

.lightbox-title {
  margin: 0;
  font-size: 16px;
  font-weight: bold;
  color: #f8fafc;
  font-family: var(--font-heading);
}

.lightbox-subtitle {
  font-size: 12px;
  color: #94a3b8;
  font-family: var(--font-mono);
}

.lightbox-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.lightbox-stage {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  cursor: grab;
  user-select: none;
}

.lightbox-stage:active {
  cursor: grabbing;
}

.lightbox-img {
  max-width: 90vw;
  max-height: 82vh;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.8), 0 0 1px rgba(255, 255, 255, 0.2);
  transition: transform 0.1s ease-out;
  transform-origin: center center;
}

.lightbox-zoom-hud {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 24px;
  padding: 6px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: #cbd5e1;
  font-family: var(--font-mono);
  font-size: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
  z-index: 10;
}

.claim-box {
  background: rgba(56, 189, 248, 0.08);
  border-left: 3px solid var(--accent-cyan);
  padding: 14px 18px;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  margin-bottom: 20px;
}

.claim-label {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--accent-cyan);
  letter-spacing: 1px;
}

.claim-text {
  font-size: 14px;
  color: var(--text-primary);
  line-height: 1.5;
  margin-top: 4px;
  font-style: italic;
}

.summary-section, .highlights-section {
  margin-bottom: 20px;
}

.summary-section h4, .highlights-section h4 {
  font-size: 13px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

.summary-section p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-secondary);
}

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

.highlights-list li {
  font-size: 13px;
  color: var(--text-primary);
  background: #1e293b;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
}

/* ── 6. NoMorePwn UI Styles ────────────────────────────────────────── */
.pwn-dashboard {
  background: #070b13;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.pwn-header-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.pwn-title {
  display: flex;
  align-items: center;
  gap: 12px;
}

.pwn-shield-icon {
  font-size: 28px;
}

.pwn-sub {
  font-size: 12px;
  color: var(--accent-cyan);
  font-family: var(--font-mono);
}

.pwn-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 12px;
}

.pwn-stat-card {
  background: #0f172a;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.score-card {
  border-color: var(--accent-cyan);
}

.score-ring {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.score-num {
  font-size: 28px;
  font-weight: 900;
  color: var(--accent-cyan);
}

.score-lbl {
  font-size: 9px;
  font-family: var(--font-mono);
  color: var(--text-muted);
}

.pwn-card-num {
  font-size: 22px;
  font-weight: 800;
}

.pwn-card-num.is-amber { color: var(--accent-amber); }
.pwn-card-num.is-red { color: var(--accent-red); }
.pwn-card-num.is-green { color: var(--accent-emerald); }

.pwn-card-label {
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 4px;
}

.pwn-items-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}

.pwn-item-row {
  background: #0f172a;
  border: 1px solid var(--border-subtle);
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  gap: 14px;
}

.pwn-item-badge {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 12px;
  color: #fff;
}

.pwn-item-badge.amber { background: #b45309; }
.pwn-item-badge.red { background: #b91c1c; }

.pwn-item-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  font-size: 13px;
}

.pwn-item-info span {
  font-size: 11px;
  color: var(--text-muted);
}

.pwn-status-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 4px;
}

.pwn-status-tag.amber { background: rgba(245, 158, 11, 0.15); color: var(--accent-amber); }
.pwn-status-tag.red { background: rgba(239, 68, 68, 0.15); color: var(--accent-red); }
.pwn-status-tag.is-green { background: rgba(16, 185, 129, 0.15); color: var(--accent-emerald); }

/* ── Visual Interactive Playground & TL;DR Component Framework ── */
.demo-tldr-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.tldr-card {
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tldr-label {
  font-size: 10px;
  font-family: var(--font-mono);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.tldr-value {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary);
}

.sim-stage {
  background: #090e17;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sim-scenario-bar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.sim-btn-preset {
  background: rgba(30, 41, 59, 0.8);
  border: 1px solid #334155;
  color: var(--text-secondary);
  font-size: 12px;
  padding: 6px 12px;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: all 0.2s ease;
}

.sim-btn-preset:hover, .sim-btn-preset.is-active {
  background: rgba(56, 189, 248, 0.15);
  border-color: var(--accent-cyan);
  color: #fff;
  font-weight: bold;
}

.sim-pipeline-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 8px;
}

.sim-step-card {
  background: rgba(15, 23, 42, 0.95);
  border: 1px solid #334155;
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 11px;
  font-family: var(--font-mono);
  display: flex;
  flex-direction: column;
  gap: 2px;
  transition: all 0.3s ease;
}

.sim-step-card.is-active {
  border-color: var(--accent-cyan);
  background: rgba(6, 182, 212, 0.12);
  color: #fff;
}

.sim-step-card.is-passed {
  border-color: var(--accent-emerald);
  background: rgba(16, 185, 129, 0.12);
  color: #34d399;
}

/* ── 7. Rewind Party UI Styles ─────────────────────────────────────── */
.rewind-app-frame {
  background: #1e1b4b;
  border: 1px solid #4338ca;
  border-radius: var(--radius-md);
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.rewind-top-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.rewind-logo {
  display: flex;
  align-items: center;
  gap: 8px;
}

.rewind-logo h2 {
  font-weight: 900;
  letter-spacing: 1px;
  background: linear-gradient(135deg, #ec4899, #8b5cf6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.rewind-chips .chip {
  background: #312e81;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 11px;
}

.rewind-chips .chip.active {
  background: #ec4899;
  color: #fff;
  font-weight: bold;
}

.rewind-character-box {
  background: #2e1065;
  border: 1px solid #6b21a8;
  padding: 16px;
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.cassette-avatar {
  font-size: 48px;
}

.avatar-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 14px;
}

.rewind-gameplay-area {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.rewind-song-card {
  background: #312e81;
  padding: 14px 20px;
  border-radius: var(--radius-md);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.rewind-timeline-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

.timeline-slot {
  background: #0f172a;
  border: 1px solid #4338ca;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.t-year {
  font-weight: 900;
  color: #ec4899;
  font-size: 16px;
}

.t-title {
  font-size: 11px;
  color: var(--text-secondary);
}

.btn-insert-timeline {
  background: #ec4899;
  border: none;
  color: #fff;
  padding: 8px 12px;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: bold;
  cursor: pointer;
}

.rewind-success-banner {
  background: rgba(16, 185, 129, 0.2);
  border: 1px solid var(--accent-emerald);
  color: var(--accent-emerald);
  padding: 8px 14px;
  border-radius: var(--radius-md);
  font-size: 13px;
  font-weight: bold;
}

/* ── 8. Yapp Party UI Styles ───────────────────────────────────────── */
.yapp-app-frame {
  background: #0f172a;
  border: 1px solid #f59e0b;
  border-radius: var(--radius-md);
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.yapp-header {
  display: flex;
  justify-content: space-between;
  width: 100%;
  align-items: center;
}

.yapp-title {
  font-weight: 900;
  font-size: 18px;
  color: #f59e0b;
}

.yapp-timer {
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: bold;
  color: #ef4444;
}

.yapp-word-card {
  background: #1e293b;
  border: 2px solid #f59e0b;
  padding: 24px;
  border-radius: var(--radius-lg);
  text-align: center;
  min-width: 260px;
}

.yapp-secret-word {
  font-size: 24px;
  font-weight: 900;
  color: #38bdf8;
  margin-bottom: 12px;
}

.yapp-forbidden-header {
  font-size: 11px;
  font-family: var(--font-mono);
  color: #ef4444;
  margin-bottom: 8px;
}

.yapp-forbidden-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
}

.yapp-controls {
  display: flex;
  gap: 8px;
}

/* ── 9. SwipeDelete UI Styles ──────────────────────────────────────── */
.swipe-app-frame {
  background: #070b13;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.swipe-header {
  display: flex;
  justify-content: space-between;
  width: 100%;
  align-items: center;
}

.swipe-card {
  background: #1e293b;
  border: 2px solid var(--accent-cyan);
  border-radius: var(--radius-lg);
  padding: 24px;
  width: 280px;
  height: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
}

.swipe-card-art {
  font-size: 48px;
}

.btn-swipe {
  padding: 10px 18px;
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: bold;
}

.btn-swipe.trash { background: #b91c1c; color: #fff; border: none; }
.btn-swipe.keep { background: #15803d; color: #fff; border: none; }

/* ── 10. Recruiter Ledger Overlay ──────────────────────────────────── */
.recruiter-ledger-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(7, 11, 19, 0.96);
  backdrop-filter: blur(16px);
  z-index: 120;
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  user-select: text;
}

.recruiter-ledger-overlay.is-active {
  opacity: 1;
  pointer-events: auto;
}

.ledger-container {
  width: 100%;
  max-width: 1040px;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ledger-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-subtle);
}

.ledger-top h2 {
  font-size: 22px;
  font-weight: 800;
}

.ledger-search-input {
  width: 100%;
  background: #0f172a;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  padding: 12px 18px;
  color: var(--text-primary);
  font-size: 14px;
  font-family: var(--font-mono);
  outline: none;
}

.ledger-search-input:focus {
  border-color: var(--accent-cyan);
  box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.2);
}

.filter-chips-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.filter-chip {
  background: #1e293b;
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 5px 12px;
  border-radius: var(--radius-full);
  cursor: pointer;
}

.filter-chip.is-active {
  background: var(--accent-cyan);
  color: #070b13;
  border-color: var(--accent-cyan);
  font-weight: bold;
}

.filter-chip.chip-live {
  border-color: rgba(16, 185, 129, 0.4);
  color: #34d399;
}

.filter-chip.chip-live.is-active {
  background: #10b981;
  color: #070b13;
  border-color: #10b981;
}

.filter-chip.chip-local {
  border-color: rgba(168, 85, 247, 0.4);
  color: #c084fc;
}

.filter-chip.chip-local.is-active {
  background: #a855f7;
  color: #ffffff;
  border-color: #a855f7;
}

.ledger-scroll-area {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-right: 6px;
}

.ledger-empty {
  padding: 36px 20px;
  text-align: center;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 13px;
  background: #0f172a;
  border: 1px dashed var(--border-subtle);
  border-radius: var(--radius-md);
}

.ledger-row {
  background: #0f172a;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: all 0.2s ease;
}

.ledger-row.is-live-row {
  border-left: 3px solid #10b981;
}

.ledger-row.is-live-row:hover {
  border-color: #10b981;
  box-shadow: 0 4px 20px rgba(16, 185, 129, 0.12);
}

.ledger-row.is-local-row {
  border-left: 3px solid #a855f7;
}

.ledger-row.is-local-row:hover {
  border-color: #a855f7;
  box-shadow: 0 4px 20px rgba(168, 85, 247, 0.12);
}

.ledger-row-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.ledger-row-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 16px;
}

.ledger-name-badges {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.online-status-badge {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  letter-spacing: 0.5px;
}

.online-status-badge.is-live {
  background: rgba(16, 185, 129, 0.18);
  border: 1px solid #10b981;
  color: #34d399;
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.3);
}

.online-status-badge.is-local {
  background: rgba(168, 85, 247, 0.16);
  border: 1px solid #a855f7;
  color: #d8b4fe;
}

.btn-live-online {
  background: #10b981;
  color: #070b13;
  border: 1px solid #10b981;
  font-weight: 800;
}

.btn-live-online:hover {
  background: #34d399;
  border-color: #34d399;
  color: #070b13;
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.4);
}

.ledger-thumb {
  width: 54px;
  height: 38px;
  border-radius: 4px;
  object-fit: cover;
  border: 1px solid var(--border-strong);
}

.ledger-district-badge {
  font-size: 11px;
  color: var(--text-muted);
  font-family: var(--font-mono);
}

.ledger-tagline {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.4;
}

.ledger-tech-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

.tech-chip {
  background: #1e293b;
  border: 1px solid var(--border-subtle);
  font-size: 11px;
  font-family: var(--font-mono);
  color: var(--accent-cyan);
  padding: 3px 8px;
  border-radius: 4px;
}

/* ── 11. Mobile Touch Controls ─────────────────────────────────────── */
.mobile-touch-controls {
  position: absolute;
  bottom: 24px;
  left: 0;
  right: 0;
  display: none;
  justify-content: space-between;
  padding: 0 24px;
  z-index: 50;
  pointer-events: none;
}

@media (pointer: coarse), (max-width: 900px) {
  .mobile-touch-controls {
    display: flex;
  }
}

.virtual-joystick-base {
  width: 110px;
  height: 110px;
  background: rgba(15, 23, 42, 0.6);
  border: 2px solid rgba(56, 189, 248, 0.4);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  touch-action: none;
}

.virtual-joystick-stick {
  width: 44px;
  height: 44px;
  background: var(--accent-cyan);
  border-radius: 50%;
  box-shadow: 0 0 14px var(--accent-cyan);
}

.mobile-action-button {
  width: 72px;
  height: 72px;
  background: rgba(245, 158, 11, 0.85);
  border: 2px solid var(--accent-amber);
  border-radius: 50%;
  color: #070b13;
  font-weight: 800;
  font-family: var(--font-mono);
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  cursor: pointer;
  align-self: flex-end;
  box-shadow: 0 0 16px rgba(245, 158, 11, 0.4);
}

/* ── 12. Ultra-High Fidelity Demo Layouts & Hero Visual Frames ──────── */
.demo-container {
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: 100%;
}

.demo-hero-visual-wrap {
  position: relative;
  width: 100%;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid rgba(56, 189, 248, 0.3);
  background: radial-gradient(circle at center, #0f172a 0%, #070b13 100%);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 14px;
}

.demo-hero-visual {
  width: 100%;
  max-height: 280px;
  object-fit: contain;
  border-radius: var(--radius-sm);
  display: block;
}

.demo-hero-tag {
  position: absolute;
  bottom: 10px;
  right: 14px;
  background: rgba(7, 11, 19, 0.92);
  border: 1px solid var(--accent-cyan);
  color: var(--accent-cyan);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 800;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  letter-spacing: 0.8px;
  backdrop-filter: blur(8px);
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.25);
}

/* ── OmniPose Fit Calisthenics UI ──────────────────────────────────── */
.omni-app-frame {
  background: #0b1120;
  border: 1px solid rgba(56, 189, 248, 0.25);
  border-radius: var(--radius-md);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.omni-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.omni-header h4 {
  font-size: 16px;
  font-weight: 800;
  color: #f8fafc;
}

.omni-sub {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 2px;
}

.omni-tree-grid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.omni-skill-card {
  flex: 1;
  min-width: 130px;
  background: #0f172a;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.omni-skill-card h5 {
  font-size: 13px;
  font-weight: 700;
  color: #f8fafc;
}

.omni-skill-card p {
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.3;
}

.omni-skill-card.unlocked {
  border-color: #10b981;
  box-shadow: 0 0 14px rgba(16, 185, 129, 0.15);
}

.omni-skill-card.goal-card {
  border-color: #f59e0b;
  box-shadow: 0 0 16px rgba(245, 158, 11, 0.25);
  background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 100%);
}

.omni-badge {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 800;
  color: #10b981;
  letter-spacing: 0.5px;
}

.omni-badge.crown {
  color: #f59e0b;
}

.omni-arrow {
  color: var(--accent-cyan);
  font-size: 16px;
  font-weight: 900;
}

.omni-feedback-box {
  background: #070b13;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 12px;
  font-family: var(--font-mono);
  font-size: 12px;
}

/* ── Generic Interactive Frames (Rummi, Argus, Cloud, BB, etc.) ──── */
.rummi-frame, .argus-frame, .cloud-frame, .bb-frame, .piko-frame,
.wraith-frame, .blaze-frame, .nexus-frame, .finops-box, .p2a-interactive,
.agentgate-box, .cr-box, .sp-box, .maestro-box {
  background: #0b1120;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.rummi-header, .blaze-header, .bb-header, .piko-header, .argus-header, .cloud-header, .nexus-header, .wraith-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.rummi-actions, .blaze-actions, .bb-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.rummi-board-preview {
  display: flex;
  gap: 12px;
  background: #070b13;
  padding: 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-strong);
  overflow-x: auto;
}

.rummi-set {
  display: flex;
  gap: 4px;
  background: #1e293b;
  padding: 6px;
  border-radius: 6px;
}

.r-tile {
  width: 28px;
  height: 38px;
  background: #fff;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 15px;
  font-family: var(--font-mono);
  box-shadow: 0 2px 4px rgba(0,0,0,0.4);
}

.r-tile.blue { color: #2563eb; }
.r-tile.red { color: #dc2626; }
.r-tile.yellow { color: #d97706; }
.r-tile.black { color: #0f172a; }

.fret-string {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--accent-cyan);
  background: #070b13;
  padding: 4px 10px;
  border-radius: 4px;
  letter-spacing: 2px;
}

.piko-fretboard-preview {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cite-green { color: #10b981; font-weight: bold; }
.cite-red { color: #ef4444; font-weight: bold; }

/* ── Metropolis AST & Autodev Grids ────────────────────────────────── */
.metro-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

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

.metro-code-box, .metro-results-box {
  background: #0b1120;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.code-editor {
  width: 100%;
  background: #070b13;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  color: #38bdf8;
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 10px;
  resize: vertical;
}

.metro-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.metro-issue {
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 12px;
}

.metro-issue.is-danger {
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid #ef4444;
  color: #fca5a5;
}

.metro-issue.is-warning {
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid #f59e0b;
  color: #fde68a;
}

/* ── HookGraph & MoneyPrinter Styles ───────────────────────────────── */
.hg-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
}

.hg-card {
  background: #070b13;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.hg-card.tiktok { border-color: #06b6d4; }
.hg-card.shorts { border-color: #ef4444; }

.hg-badge {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 800;
}

.mp-scripts-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 10px;
}

.mp-script-row {
  background: #070b13;
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  padding: 10px 14px;
  font-size: 13px;
  color: var(--text-secondary);
}

.mp-script-row.is-active {
  border-color: var(--accent-cyan);
  color: var(--text-primary);
}

.text-input {
  width: 100%;
  background: #070b13;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 13px;
}

.num-input {
  background: #070b13;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 13px;
}

.dipwatch-inputs {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
  background: #0b1120;
  padding: 16px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
}

.dipwatch-output {
  margin-top: 10px;
}

.dw-card {
  background: #070b13;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 14px;
}

.apex-sim-grid {
  background: #070b13;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 14px;
}

.ticker-header {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 800;
  color: var(--accent-cyan);
  margin-bottom: 8px;
}

.orderbook-row {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 13px;
  padding: 4px 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}


/* ==========================================================================
   WORKBENCH KIT — shared chrome for the 26 interactive playgrounds
   ========================================================================== */

.wb {
  display: flex;
  flex-direction: column;
  gap: 14px;
  user-select: text;
}

.wb__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  flex-wrap: wrap;
}
.wb__title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}
.wb__sub {
  margin-top: 3px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-secondary);
  max-width: 68ch;
}
.wb__tools { display: flex; gap: 6px; flex-wrap: wrap; }

.wb__engine {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  align-self: flex-start;
  padding: 4px 11px;
  border: 1px solid rgba(56, 189, 248, 0.28);
  background: rgba(56, 189, 248, 0.07);
  border-radius: var(--radius-full);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: #7dd3fc;
}
.wb__engine-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent-emerald);
  box-shadow: 0 0 8px var(--accent-emerald);
  animation: wbPulse 2.4s ease-in-out infinite;
}
@keyframes wbPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }

/* metric readouts — values always come from a computation */
.wb__metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
}
.wb__metric {
  background: #0b111f;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 8px 11px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.wb__metric-k {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}
.wb__metric-v {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  color: var(--accent-cyan);
  overflow-wrap: anywhere;
}
.wb__metric-h { font-size: 10px; color: var(--text-muted); font-family: var(--font-mono); }

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

.wb__label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.wb__canvas {
  background: #05080f;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.wb__say, .wb__hint {
  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: 1.75;
  color: var(--text-secondary);
}
.wb__say b, .wb__hint b { color: var(--accent-emerald); }
.wb__hint.is-bad { color: #fca5a5; }
.wb__hint.is-bad b { color: #f43f5e; }
.wb__hint.is-good { color: #86efac; }

.wb__log {
  background: #02040a;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  overflow-y: auto;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.7;
}
.wb__log-line { display: flex; gap: 10px; color: #94a3b8; }
.wb__log-t { color: #334155; flex-shrink: 0; }
.wb__log-line.is-good { color: #6ee7b7; }
.wb__log-line.is-warn { color: #fcd34d; }
.wb__log-line.is-bad  { color: #fca5a5; }

.wb__foot {
  font-size: 11px;
  line-height: 1.75;
  color: var(--text-muted);
  border-top: 1px dashed var(--border-subtle);
  padding-top: 10px;
}
.wb__foot code {
  font-family: var(--font-mono);
  background: rgba(56, 189, 248, 0.08);
  color: #7dd3fc;
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 10.5px;
}
.wb__foot.is-bad { color: #fca5a5; }

.wb__error {
  padding: 16px;
  border: 1px solid rgba(244, 63, 94, 0.4);
  background: rgba(244, 63, 94, 0.07);
  border-radius: var(--radius-md);
  font-size: 12px;
  line-height: 1.7;
  color: #fca5a5;
}
.wb__error code { display: block; margin: 8px 0; font-family: var(--font-mono); color: #f43f5e; }

.wb__cmd {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #02040a;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  flex-wrap: wrap;
}
.wb__cmd-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); }
.wb__cmd-code { flex: 1; font-family: var(--font-mono); font-size: 11px; color: #7dd3fc; overflow-x: auto; white-space: nowrap; }

.wb__controls {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px 14px;
  padding: 10px 12px;
  background: #0b111f;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
}
.wb__ctl { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.wb__ctl-k {
  display: flex; justify-content: space-between; gap: 8px;
  font-size: 10.5px; color: var(--text-secondary);
  font-family: var(--font-mono);
}
.wb__ctl-k b { color: var(--accent-cyan); }
.wb__ctl input[type="range"] { width: 100%; accent-color: var(--accent-cyan); }
.wb__ctl input[type="text"], .wb__ctl input[type="number"], .wb__ctl select {
  background: #02040a;
  border: 1px solid var(--border-subtle);
  border-radius: 4px;
  padding: 5px 8px;
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 11px;
  width: 100%;
}
.wb__ctl--toggle { flex-direction: row; align-items: center; gap: 8px; }

/* ── Block Blast workbench ────────────────────────────────────────── */
.bb2 { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 14px; }
@media (max-width: 780px) { .bb2 { grid-template-columns: 1fr; } }
.bb2__right { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.bb2__tray { display: flex; gap: 10px; flex-wrap: wrap; }
.bb2__piece {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 8px 10px;
  background: #0b111f;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
}
.bb2__piece.is-used { opacity: 0.32; }
.bb2__piece span { font-family: var(--font-mono); font-size: 9.5px; color: var(--text-muted); }
.bb2__piece-grid { display: grid; gap: 2px; }
.bb2__piece-grid i { width: 9px; height: 9px; border-radius: 2px; background: transparent; }
.bb2__piece-grid i.on { background: var(--accent-emerald); }

/* ── Rummikub workbench ──────────────────────────────────────────── */
.rk__board { display: flex; flex-direction: column; gap: 7px; }
.rk__set {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 7px 10px;
  background: #0b111f;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  flex-wrap: wrap;
}
.rk__set.is-target { border-color: var(--accent-emerald); background: rgba(16, 185, 129, 0.08); }
.rk__set.is-bad { border-color: rgba(244, 63, 94, 0.4); }
.rk__set-tiles { display: flex; gap: 4px; flex-wrap: wrap; }
.rk__set-kind { font-family: var(--font-mono); font-size: 10px; color: var(--text-muted); }
.rk__rack { display: flex; gap: 5px; flex-wrap: wrap; }
.rk__tile {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 34px;
  background: #f8fafc;
  color: var(--tc, #0f172a);
  border-radius: 4px;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 13px;
  border: 1px solid rgba(0,0,0,0.25);
}
.rk__tile.is-joker { background: #1e1b4b; color: #c4b5fd; }
.rk__pick { cursor: pointer; transition: transform 0.12s, box-shadow 0.12s; }
.rk__pick:hover { transform: translateY(-3px); }
.rk__pick.is-sel { box-shadow: 0 0 0 2px var(--accent-cyan); transform: translateY(-4px); }
.rk__why { margin: 6px 0 0 16px; font-family: var(--font-mono); font-size: 11px; color: var(--text-secondary); line-height: 1.8; }

/* ── code editor (Blaze, Metropolis, AutoDev) ─────────────────────── */
.wb__code {
  width: 100%;
  min-height: 165px;
  padding: 10px 12px;
  background: #02040a;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  color: #e2e8f0;
  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: 1.75;
  resize: vertical;
  tab-size: 2;
  outline: none;
}
.wb__code:focus { border-color: var(--accent-cyan); }

/* ── Wraith workbench ─────────────────────────────────────────────── */
.wr2__rows { display: flex; flex-direction: column; gap: 6px; }
.wr2__row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 14px;
  padding: 9px 12px;
  background: #0b111f;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 11.5px;
  transition: border-color 0.3s ease, background 0.3s ease;
}
.wr2__row.is-bad { border-color: rgba(244, 63, 94, 0.55); background: rgba(244, 63, 94, 0.06); }
.wr2__id { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; min-width: 0; }
.wr2__name { color: var(--text-primary); font-weight: 700; }
.wr2__pid, .wr2__n { color: var(--text-muted); font-size: 10.5px; }
.wr2__lamps { display: flex; gap: 5px; align-items: center; flex-wrap: wrap; }
.wr2__lamp {
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 9.5px;
  letter-spacing: 0.06em;
  border: 1px solid rgba(16, 185, 129, 0.35);
  color: #34d399;
  background: rgba(16, 185, 129, 0.08);
}
.wr2__lamp.is-off { border-color: rgba(244, 63, 94, 0.5); color: #f43f5e; background: rgba(244, 63, 94, 0.1); }
.wr2__verdict { padding: 2px 8px; border-radius: 3px; font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em; }
.wr2__verdict.is-ok { color: #34d399; background: rgba(16,185,129,0.12); }
.wr2__verdict.is-bad { color: #f43f5e; background: rgba(244,63,94,0.16); }
.wr2__detail {
  grid-column: 1 / -1;
  padding-top: 6px;
  border-top: 1px dashed rgba(244, 63, 94, 0.28);
  color: #fca5a5;
  font-size: 10.5px;
  line-height: 1.7;
  overflow-wrap: anywhere;
}
.wr2__detail b { color: #f43f5e; }

/* ── NoMorePwn workbench ──────────────────────────────────────────── */
.np__meter {
  position: relative;
  height: 30px;
  background: #02040a;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  overflow: hidden;
  display: flex;
  align-items: center;
}
.np__meter-fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0;
  opacity: 0.22;
  transition: width 0.25s ease, background 0.25s ease;
}
.np__meter-label {
  position: relative;
  padding: 0 10px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-secondary);
}
.np__block {
  background: #0b111f;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
}
.np__block h5 {
  font-size: 12px;
  color: var(--accent-cyan);
  margin-bottom: 10px;
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
}
.np__kv {
  display: grid;
  grid-template-columns: minmax(120px, 190px) 1fr;
  gap: 12px;
  padding: 5px 0;
  border-top: 1px solid rgba(148,163,184,0.08);
  align-items: baseline;
}
.np__kv:first-of-type { border-top: 0; }
.np__kv span { font-size: 10.5px; color: var(--text-muted); font-family: var(--font-mono); }
.np__kv code {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: #7dd3fc;
  overflow-wrap: anywhere;
  line-height: 1.6;
}
.np__kv code.is-ok { color: #34d399; }
.np__kv code.is-bad { color: #f87171; }
@media (max-width: 620px) { .np__kv { grid-template-columns: 1fr; gap: 2px; } }

/* ── Metropolis workbench ─────────────────────────────────────────── */
.mp2__findings { display: flex; flex-direction: column; gap: 6px; }
.mp2__find {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  padding: 9px 12px;
  background: #0b111f;
  border-left: 2px solid var(--accent-red);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-family: var(--font-mono);
  font-size: 11.5px;
}
.mp2__find.is-may { border-left-color: var(--accent-amber); }
.mp2__ln { color: var(--text-muted); font-size: 10.5px; padding-top: 1px; }
.mp2__what { color: var(--text-primary); line-height: 1.6; min-width: 0; }
.mp2__src {
  display: block; margin: 5px 0;
  padding: 4px 8px;
  background: #02040a;
  border-radius: 3px;
  color: #7dd3fc;
  font-size: 10.5px;
  overflow-x: auto;
  white-space: pre;
}
.mp2__why { display: block; color: var(--text-secondary); font-size: 10.5px; line-height: 1.65; }
.mp2__rule { display: inline-block; margin-top: 4px; color: var(--text-muted); font-size: 9.5px; letter-spacing: 0.04em; }
.mp2__ok {
  padding: 12px 14px;
  background: rgba(16,185,129,0.08);
  border: 1px solid rgba(16,185,129,0.3);
  border-radius: var(--radius-sm);
  color: #6ee7b7;
  font-family: var(--font-mono);
  font-size: 11.5px;
}
.mp2__tree {
  max-height: 300px;
  overflow: auto;
  padding: 10px 12px;
  background: #02040a;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 10.5px;
  line-height: 1.55;
  color: #94a3b8;
  white-space: pre;
}

/* ── Agent Gate workbench ─────────────────────────────────────────── */
.ag__gate { display: flex; flex-direction: column; gap: 6px; }
.ag__head {
  padding: 9px 13px;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
}
.ag__head.is-block { background: rgba(244,63,94,0.12); color: #f43f5e; border: 1px solid rgba(244,63,94,0.4); }
.ag__head.is-warn { background: rgba(245,158,11,0.12); color: #fbbf24; border: 1px solid rgba(245,158,11,0.4); }
.ag__head.is-pass { background: rgba(16,185,129,0.1); color: #34d399; border: 1px solid rgba(16,185,129,0.35); }
.ag__find {
  padding: 8px 12px;
  background: #0b111f;
  border-left: 2px solid var(--accent-red);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.ag__find.is-warn { border-left-color: var(--accent-amber); }
.ag__find-top { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 5px; }
.ag__find-top code { font-family: var(--font-mono); font-size: 10.5px; color: #7dd3fc; }
.ag__rule { font-family: var(--font-mono); font-size: 9.5px; color: var(--text-muted); }
.ag__line {
  display: block;
  padding: 4px 8px;
  background: rgba(244,63,94,0.08);
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: #fca5a5;
  overflow-x: auto;
  white-space: pre;
}
.ag__why { display: block; margin-top: 5px; font-size: 10.5px; color: var(--text-secondary); line-height: 1.6; }
.ag__board { display: flex; flex-direction: column; gap: 8px; }
.ag__agent { display: grid; grid-template-columns: 100px 1fr auto; gap: 12px; align-items: center; }
.ag__agent-n { font-family: var(--font-mono); font-size: 11px; color: var(--text-primary); }
.ag__agent-v { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-secondary); white-space: nowrap; }
.ag__agent-v em { color: var(--text-muted); font-style: normal; }
.ag__bar { position: relative; height: 16px; background: #02040a; border: 1px solid var(--border-subtle); border-radius: 8px; }
.ag__ci { position: absolute; top: 3px; bottom: 3px; background: rgba(56,189,248,0.28); border-radius: 5px; }
.ag__pt { position: absolute; top: 1px; bottom: 1px; width: 2px; background: var(--accent-cyan); }
@media (max-width: 620px) { .ag__agent { grid-template-columns: 1fr; gap: 4px; } }

/* ── AegisCloud workbench ─────────────────────────────────────────── */
.ac__derived { display: flex; flex-direction: column; gap: 5px; }
.ac__ctl {
  padding: 7px 11px;
  background: #0b111f;
  border-left: 2px solid var(--accent-emerald);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.ac__ctl.is-bad { border-left-color: var(--accent-red); }
.ac__ctl-t { display: block; font-family: var(--font-mono); font-size: 11px; color: var(--text-primary); line-height: 1.55; }
.ac__ctl-r { display: block; margin-top: 2px; font-size: 10.5px; color: var(--text-muted); line-height: 1.5; }
.ac__verdict {
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  font-size: 11.5px;
  line-height: 1.7;
}
.ac__verdict.is-ok { background: rgba(16,185,129,0.09); border: 1px solid rgba(16,185,129,0.35); color: #86efac; }
.ac__verdict.is-bad { background: rgba(244,63,94,0.09); border: 1px solid rgba(244,63,94,0.4); color: #fca5a5; }
.ac__verdict code { font-family: var(--font-mono); font-size: 10.5px; }
.ac__path { margin: 7px 0 0 18px; font-size: 11px; line-height: 1.85; }
.ac__aside { display: inline-block; margin-top: 6px; font-family: var(--font-mono); font-size: 10.5px; color: var(--text-muted); }

/* ── DipWatch workbench ───────────────────────────────────────────── */
.dw2__scrub { width: 100%; accent-color: var(--accent-cyan); }
.dw2__ladder { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 6px; }
.dw2__rung {
  padding: 8px 11px;
  background: #0b111f;
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  opacity: 0.5;
  transition: opacity 0.2s, border-color 0.2s;
}
.dw2__rung.is-on { opacity: 1; border-left-color: var(--rc); }
.dw2__rung-l { display: block; font-family: var(--font-mono); font-size: 11px; font-weight: 700; color: var(--rc); }
.dw2__rung-a, .dw2__rung-t { display: block; font-family: var(--font-mono); font-size: 10px; color: var(--text-muted); }

/* ── FinOps workbench ─────────────────────────────────────────────── */
.fo__table { display: flex; flex-direction: column; gap: 6px; }
.fo__row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  padding: 10px 13px;
  background: #0b111f;
  border-left: 3px solid var(--accent-emerald);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.fo__row.is-low { border-left-color: var(--accent-amber); }
.fo__row.is-commit { border-left-color: var(--accent-purple); }
.fo__row-main { min-width: 0; }
.fo__t { display: block; font-size: 12px; color: var(--text-primary); font-weight: 600; }
.fo__d { display: block; margin-top: 3px; font-family: var(--font-mono); font-size: 10.5px; color: var(--text-muted); }
.fo__a { display: block; margin-top: 3px; font-family: var(--font-mono); font-size: 10.5px; color: #7dd3fc; }
.fo__row-num { text-align: right; white-space: nowrap; }
.fo__s { display: block; font-family: var(--font-mono); font-size: 15px; font-weight: 700; color: #34d399; }
.fo__s em { font-style: normal; font-size: 10px; color: var(--text-muted); }
.fo__y { display: block; font-family: var(--font-mono); font-size: 10.5px; color: var(--text-secondary); }
.fo__r { display: block; margin-top: 2px; font-family: var(--font-mono); font-size: 9.5px; color: var(--text-muted); }
@media (max-width: 620px) { .fo__row { grid-template-columns: 1fr; } .fo__row-num { text-align: left; } }

/* ── Plan2Aerial workbench ────────────────────────────────────────── */
.p2a__gates { display: flex; flex-direction: column; gap: 4px; }
.p2a__gate {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 7px 11px;
  background: #0b111f;
  border-left: 3px solid var(--accent-emerald);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.p2a__gate.is-bad { border-left-color: var(--accent-red); background: rgba(244,63,94,0.06); }
.p2a__gid { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-muted); }
.p2a__gn { font-size: 11.5px; color: var(--text-primary); line-height: 1.5; }
.p2a__gn em { display: block; font-style: normal; font-family: var(--font-mono); font-size: 10px; color: var(--text-muted); }
.p2a__gv { font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; color: #34d399; }
.p2a__gate.is-bad .p2a__gv { color: #f43f5e; }

/* ── OmniPose workbench ───────────────────────────────────────────── */
.op__form { display: flex; flex-direction: column; gap: 5px; }
.op__check {
  display: grid; grid-template-columns: minmax(140px, 200px) 1fr; gap: 12px;
  padding: 7px 11px; background: #0b111f;
  border-left: 3px solid var(--accent-emerald);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.op__check.is-bad { border-left-color: var(--accent-red); background: rgba(244,63,94,0.06); }
.op__check.is-phase { border-left-color: var(--accent-cyan); opacity: 0.75; }
.op__check-n { font-size: 11.5px; color: var(--text-primary); }
.op__check-d { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-muted); }
.op__phase {
  margin-top: 4px; padding: 8px 11px;
  background: rgba(56,189,248,0.06);
  border: 1px solid rgba(56,189,248,0.22);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono); font-size: 10.5px; line-height: 1.7; color: var(--text-secondary);
}
.op__phase b { color: var(--accent-cyan); }
@media (max-width: 620px) { .op__check { grid-template-columns: 1fr; gap: 2px; } }

/* ── SwipeDelete workbench ────────────────────────────────────────── */
.sd__deck { position: relative; min-height: 150px; display: flex; align-items: flex-start; justify-content: center; }
.sd__card {
  position: absolute; top: 0;
  width: min(300px, 88%);
  padding: 16px 18px;
  background: linear-gradient(150deg, hsl(var(--h) 60% 22%), hsl(var(--h) 55% 12%));
  border: 1px solid hsl(var(--h) 70% 45% / 0.5);
  border-radius: var(--radius-md);
  box-shadow: 0 10px 26px rgba(0,0,0,0.5);
}
.sd__card-k { display: block; font-size: 13px; font-weight: 700; color: #f8fafc; }
.sd__card-s { display: block; margin-top: 3px; font-family: var(--font-mono); font-size: 11px; color: rgba(248,250,252,0.7); }
.sd__card-acts { display: flex; gap: 8px; margin-top: 14px; }
.sd__no { background: rgba(244,63,94,0.2); border-color: #f43f5e; color: #fca5a5; }
.sd__yes { background: rgba(16,185,129,0.2); border-color: #10b981; color: #6ee7b7; }
.sd__done {
  padding: 16px; text-align: center;
  background: rgba(16,185,129,0.08); border: 1px solid rgba(16,185,129,0.3);
  border-radius: var(--radius-md); font-size: 12px; line-height: 1.7; color: #86efac;
}
.sd__audit { display: flex; flex-direction: column; gap: 4px; }
.sd__perm {
  display: grid; grid-template-columns: 74px minmax(0, 250px) 1fr; gap: 10px; align-items: baseline;
  padding: 6px 10px; background: #0b111f;
  border-left: 3px solid var(--accent-emerald); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.sd__perm.is-declared { border-left-color: var(--accent-amber); }
.sd__perm-v { font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; color: #34d399; letter-spacing: 0.05em; }
.sd__perm.is-declared .sd__perm-v { color: #fbbf24; }
.sd__perm code { font-family: var(--font-mono); font-size: 10.5px; color: #7dd3fc; overflow-wrap: anywhere; }
.sd__perm-n { font-size: 10.5px; color: var(--text-muted); line-height: 1.5; }
@media (max-width: 720px) { .sd__perm { grid-template-columns: 1fr; gap: 2px; } }

/* ── Classroom workbench ──────────────────────────────────────────── */
.cl__tree { display: flex; flex-direction: column; gap: 3px; }
.cl__row {
  display: flex; justify-content: space-between; gap: 14px;
  padding: 6px 11px; background: #0b111f; border-radius: var(--radius-sm);
  font-family: var(--font-mono); font-size: 11px; color: var(--text-secondary);
}
.cl__row.is-sub { margin-left: 18px; background: #090e1a; }
.cl__row.is-total { border: 1px solid rgba(56,189,248,0.3); color: var(--accent-cyan); }
.cl__row b { color: var(--text-primary); white-space: nowrap; }

/* ── 5. Coin Counter HUD Pill ───────────────────────────────────────── */
.hud-coin-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.35);
  border-radius: var(--radius-full);
  padding: 4px 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: #fbbf24;
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.2);
}

.btn-radial {
  background: rgba(56, 189, 248, 0.15);
  border-color: rgba(56, 189, 248, 0.4);
  color: #38bdf8;
}

.btn-radial:hover {
  background: rgba(56, 189, 248, 0.28);
  border-color: #38bdf8;
}

/* ── 6. Radial Fast-Travel Compass Modal ────────────────────────────── */
.radial-wheel-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.radial-wheel-modal.hidden {
  display: none;
}

.radial-wheel-overlay {
  position: absolute;
  inset: 0;
  background: rgba(7, 11, 19, 0.85);
  backdrop-filter: blur(8px);
}

.radial-wheel-container {
  position: relative;
  width: min(640px, 92vw);
  background: #0f172a;
  border: 1px solid rgba(56, 189, 248, 0.4);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8), 0 0 30px rgba(56, 189, 248, 0.2);
  text-align: center;
}

.radial-wheel-header h3 {
  font-family: var(--font-mono);
  font-size: 18px;
  color: #38bdf8;
  letter-spacing: 0.05em;
  margin-bottom: 6px;
}

.radial-wheel-header p {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 20px;
}

.radial-wheel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

.radial-district-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 10px;
  background: #0b111f;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.2s ease;
}

.radial-district-btn:hover {
  transform: translateY(-3px);
  border-color: var(--accent-cyan);
  background: rgba(56, 189, 248, 0.12);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}

.radial-district-icon {
  font-size: 24px;
}

.radial-district-name {
  font-size: 12px;
  font-weight: 700;
}

.radial-district-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--accent-cyan);
  background: rgba(56, 189, 248, 0.15);
  padding: 2px 6px;
  border-radius: var(--radius-full);
}

.btn-close-radial {
  margin-top: 10px;
}