/* ═══════════════════════════════════════════════════════════════════
   NICE SPACESHIP — Shared Stylesheet
   All 7 theme tokens + every component used across all pages.
   Designed for easy extraction into Next.js CSS Modules / Tailwind.
═══════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────
   MODULE: THEME TOKENS
───────────────────────────────────────────────────────────────── */

/* Nice Spaceship — monochrome Swiss grid */
:root, [data-theme="spaceship"] {
  --bg:           #080808;
  --bg2:          #101010;
  --surface:      #161616;
  --surface2:     #1e1e1e;
  --border:       #2a2a2a;
  --border-hi:    #555;
  --accent:       #ffffff;
  --accent2:      #888;
  --text:         #f0f0f0;
  --fg:           #f0f0f0;
  --text-muted:   #666;
  --text-dim:     #2e2e2e;
  --glow:         none;
  --glow-hi:      none;
  --font-d:       'Orbitron', sans-serif;
  --font-b:       'Inter', sans-serif;
  --font-m:       'Fira Code', monospace;
  --radius:       0px;
  --scan:         0;
  --border-width: 1px;
  --nav-bg:       rgba(8,8,8,0.97);
  --panel-bg:     rgba(16,16,16,0.97);
  --hero-grad:    radial-gradient(ellipse 100% 60% at 50% 0%, rgba(255,255,255,0.04) 0%, transparent 70%);
  --bg-pattern:   none;
}

/* Robotech — light day mode, exact inversion of spaceship */
[data-theme="robotech"] {
  --bg:           #f8f8f8;
  --bg2:          #efefef;
  --surface:      #e4e4e4;
  --surface2:     #d8d8d8;
  --border:       #c8c8c8;
  --border-hi:    #888888;
  --accent:       #080808;
  --accent2:      #444444;
  --text:         #0f0f0f;
  --fg:           #0f0f0f;
  --text-muted:   #666666;
  --text-dim:     #bbbbbb;
  --glow:         none;
  --glow-hi:      none;
  --font-d:       'Orbitron', sans-serif;
  --font-b:       'Inter', sans-serif;
  --font-m:       'Fira Code', monospace;
  --radius:       0px;
  --scan:         0;
  --border-width: 1px;
  --nav-bg:       rgba(248,248,248,0.97);
  --panel-bg:     rgba(239,239,239,0.97);
  --hero-grad:    radial-gradient(ellipse 100% 60% at 50% 0%, rgba(0,0,0,0.04) 0%, transparent 70%);
  --bg-pattern:   none;
}

/* Navigator — cyan HUD */
[data-theme="navigator"] {
  --bg:           #02090f;
  --bg2:          #041220;
  --surface:      rgba(0,200,240,0.05);
  --surface2:     rgba(0,200,240,0.09);
  --border:       rgba(0,229,255,0.25);
  --border-hi:    rgba(0,229,255,0.6);
  --accent:       #00e5ff;
  --accent2:      #0099bb;
  --text:         #cce8f0;
  --fg:           #cce8f0;
  --text-muted:   rgba(0,229,255,0.55);
  --text-dim:     rgba(0,229,255,0.18);
  --glow:         0 0 16px rgba(0,229,255,0.22);
  --glow-hi:      0 0 32px rgba(0,229,255,0.5), 0 0 64px rgba(0,229,255,0.18);
  --font-d:       'Orbitron', sans-serif;
  --font-b:       'Inter', sans-serif;
  --font-m:       'Fira Code', monospace;
  --radius:       2px;
  --scan:         0.055;
  --border-width: 1px;
  --nav-bg:       rgba(2,9,15,0.97);
  --panel-bg:     rgba(2,9,15,0.95);
  --hero-grad:    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(0,229,255,0.1) 0%, transparent 70%);
  --bg-pattern:   none;
}

/* Solar Flare — orange / gold */
[data-theme="solar"] {
  --bg:           #080200;
  --bg2:          #120500;
  --surface:      rgba(255,110,0,0.05);
  --surface2:     rgba(255,140,0,0.09);
  --border:       rgba(255,110,0,0.28);
  --border-hi:    rgba(255,180,0,0.6);
  --accent:       #ff8c00;
  --accent2:      #ffd700;
  --text:         #ffe8cc;
  --fg:           #ffe8cc;
  --text-muted:   rgba(255,180,100,0.6);
  --text-dim:     rgba(255,110,0,0.22);
  --glow:         0 0 18px rgba(255,110,0,0.28);
  --glow-hi:      0 0 40px rgba(255,140,0,0.55), 0 0 80px rgba(255,60,0,0.2);
  --font-d:       'Orbitron', sans-serif;
  --font-b:       'Inter', sans-serif;
  --font-m:       'Fira Code', monospace;
  --radius:       0px;
  --scan:         0;
  --border-width: 1px;
  --nav-bg:       rgba(8,2,0,0.98);
  --panel-bg:     rgba(10,4,0,0.96);
  --hero-grad:    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(255,100,0,0.14) 0%, transparent 70%);
  --bg-pattern:   none;
}

/* The Matrix — terminal green */
[data-theme="matrix"] {
  --bg:           #000800;
  --bg2:          #000c00;
  --surface:      rgba(0,255,65,0.04);
  --surface2:     rgba(0,255,65,0.08);
  --border:       rgba(0,255,65,0.2);
  --border-hi:    rgba(0,255,65,0.5);
  --accent:       #00ff41;
  --accent2:      #00aa2a;
  --text:         #00ff41;
  --fg:           #00ff41;
  --text-muted:   rgba(0,255,65,0.5);
  --text-dim:     rgba(0,255,65,0.18);
  --glow:         0 0 12px rgba(0,255,65,0.3);
  --glow-hi:      0 0 24px rgba(0,255,65,0.6), 0 0 48px rgba(0,255,65,0.18);
  --font-d:       'Fira Code', monospace;
  --font-b:       'Fira Code', monospace;
  --font-m:       'Fira Code', monospace;
  --radius:       0px;
  --scan:         0.08;
  --border-width: 1px;
  --nav-bg:       rgba(0,5,0,0.98);
  --panel-bg:     rgba(0,6,0,0.97);
  --hero-grad:    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(0,255,65,0.07) 0%, transparent 70%);
  --bg-pattern:   none;
}

/* Retro Abstract — 70s */
[data-theme="retro"] {
  --bg:           #1a0f08;
  --bg2:          #221408;
  --surface:      rgba(0,180,150,0.06);
  --surface2:     rgba(230,100,50,0.07);
  --border:       rgba(0,195,155,0.28);
  --border-hi:    rgba(230,110,60,0.5);
  --accent:       #00c8a0;
  --accent2:      #e86c3a;
  --text:         #f2e8d8;
  --fg:           #f2e8d8;
  --text-muted:   rgba(242,232,216,0.55);
  --text-dim:     rgba(242,232,216,0.22);
  --glow:         0 0 18px rgba(0,195,155,0.2);
  --glow-hi:      0 0 30px rgba(230,100,50,0.4);
  --font-d:       'Orbitron', sans-serif;
  --font-b:       'Inter', sans-serif;
  --font-m:       'Fira Code', monospace;
  --radius:       4px;
  --scan:         0;
  --border-width: 1px;
  --nav-bg:       rgba(20,10,4,0.98);
  --panel-bg:     rgba(26,15,8,0.97);
  --hero-grad:    radial-gradient(ellipse 100% 60% at 50% 0%, rgba(0,160,120,0.1) 0%, rgba(220,80,30,0.05) 60%, transparent 100%);
  --bg-pattern:   radial-gradient(circle at 2px 2px, rgba(242,232,216,0.04) 1px, transparent 0);
}

/* LCARS — Star Trek */
[data-theme="lcars"] {
  --bg:           #000012;
  --bg2:          #080020;
  --surface:      rgba(200,120,80,0.07);
  --surface2:     rgba(180,140,255,0.07);
  --border:       #cc7744;
  --border-hi:    #ff9966;
  --accent:       #ff9966;
  --accent2:      #bb88ff;
  --text:         #ffeecc;
  --fg:           #ffeecc;
  --text-muted:   rgba(255,220,180,0.55);
  --text-dim:     rgba(255,180,120,0.22);
  --glow:         0 0 14px rgba(255,120,80,0.22);
  --glow-hi:      0 0 28px rgba(200,140,255,0.4);
  --font-d:       'Orbitron', sans-serif;
  --font-b:       'Inter', sans-serif;
  --font-m:       'Fira Code', monospace;
  --radius:       20px;
  --scan:         0;
  --border-width: 1px;
  --nav-bg:       rgba(0,0,18,0.98);
  --panel-bg:     rgba(0,0,18,0.97);
  --hero-grad:    radial-gradient(ellipse 80% 60% at 20% 50%, rgba(200,100,60,0.1) 0%, transparent 70%);
  --bg-pattern:   none;
}

/* 16-Bit Pixel */
[data-theme="pixel"] {
  --bg:           #0f0f23;
  --bg2:          #1a1a3e;
  --surface:      #1a1a3e;
  --surface2:     #22224e;
  --border:       #5555aa;
  --border-hi:    #ffff00;
  --accent:       #ffff00;
  --accent2:      #ff4444;
  --text:         #ffffff;
  --fg:           #ffffff;
  --text-muted:   #aaaacc;
  --text-dim:     #44446a;
  --glow:         none;
  --glow-hi:      none;
  --font-d:       'Press Start 2P', monospace;
  --font-b:       'Press Start 2P', monospace;
  --font-m:       'Press Start 2P', monospace;
  --radius:       0px;
  --scan:         0;
  --border-width: 4px;
  --nav-bg:       #0f0f23;
  --panel-bg:     #1a1a3e;
  --hero-grad:    none;
  --bg-pattern:   none;
}

/* ─────────────────────────────────────────────────────────────────
   MODULE: BASE
───────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background-color: var(--bg);
  background-image: var(--bg-pattern, none);
  background-size: 40px 40px;
  color: var(--text);
  font-family: var(--font-b);
  overflow-x: hidden;
  min-height: 100vh;
  transition: background-color 0.4s, color 0.4s;
}

/* ─────────────────────────────────────────────────────────────────
   MODULE: BACKGROUND LAYERS
───────────────────────────────────────────────────────────────── */
.bg-grid {
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 52px 52px;
  opacity: 0.35;
  transition: opacity 0.4s;
}
[data-theme="retro"] .bg-grid,
[data-theme="lcars"] .bg-grid,
[data-theme="pixel"] .bg-grid { opacity: 0; }

.bg-hero-glow {
  position: fixed; top: 0; left: 0; right: 0; height: 65vh;
  pointer-events: none; z-index: 0;
  background: var(--hero-grad);
  transition: background 0.4s;
}
.bg-scanlines {
  position: fixed; inset: 0; pointer-events: none; z-index: 1;
  background: repeating-linear-gradient(
    0deg, transparent, transparent 2px,
    rgba(0,0,0,var(--scan)) 2px, rgba(0,0,0,var(--scan)) 4px
  );
}
.bg-retro-wave {
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  opacity: 0; transition: opacity 0.5s;
  background-image:
    repeating-linear-gradient(0deg, transparent, transparent 19px, rgba(0,195,155,0.04) 20px),
    repeating-linear-gradient(90deg, transparent, transparent 39px, rgba(230,100,50,0.03) 40px);
}
[data-theme="retro"] .bg-retro-wave { opacity: 1; }

#matrix-canvas {
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  opacity: 0; transition: opacity 0.6s;
}
[data-theme="matrix"] #matrix-canvas { opacity: 0.18; }

/* ─────────────────────────────────────────────────────────────────
   MODULE: TELEMETRY BAR (fixed top scrolling ticker)
───────────────────────────────────────────────────────────────── */
.tel-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  height: 26px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
  display: flex; align-items: center;
  transition: background 0.4s, border-color 0.4s;
}
.tel-track {
  display: flex; align-items: center;
  white-space: nowrap;
  animation: tel-scroll 50s linear infinite;
  font-family: var(--font-m);
  font-size: 9px;
  color: var(--text-muted);
  letter-spacing: 0.08em;
  transition: color 0.4s, font-family 0.01s;
}
.tel-item {
  padding: 0 20px;
  border-right: 1px solid var(--border);
  display: flex; align-items: center; gap: 6px;
}
.tel-dot {
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--accent);
  box-shadow: var(--glow);
  animation: blink 2s ease-in-out infinite;
  flex-shrink: 0;
}
.tel-val { color: var(--accent); }

@keyframes tel-scroll { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0.3} }

/* ─────────────────────────────────────────────────────────────────
   MODULE: NAV
───────────────────────────────────────────────────────────────── */
nav {
  position: fixed; top: 26px; left: 0; right: 0; z-index: 100;
  height: 62px;
  background: var(--nav-bg);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(18px);
  box-shadow: var(--glow);
  transition: background 0.4s, border-color 0.4s, box-shadow 0.4s;
}
[data-theme="lcars"] nav { border-bottom: 3px solid var(--accent); }
[data-theme="pixel"] nav { border-bottom: 4px solid var(--accent); }
.nav-inner {
  max-width: 1280px; margin: 0 auto; padding: 0 24px;
  height: 100%; display: flex; align-items: center; justify-content: space-between;
}
.nav-logo { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.nav-logo-svg {
  width: 30px; height: 30px; flex-shrink: 0;
  color: var(--accent);
  transition: color 0.4s, filter 0.4s;
}
[data-theme="navigator"] .nav-logo-svg,
[data-theme="solar"]     .nav-logo-svg,
[data-theme="matrix"]    .nav-logo-svg { filter: drop-shadow(0 0 5px var(--accent)); }
.nav-brand {
  font-family: var(--font-d); font-size: 13px; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--accent);
  transition: color 0.4s, font-family 0.01s;
}
[data-theme="pixel"] .nav-brand { font-size: 8px; letter-spacing: 0.05em; }
[data-theme="retro"] .nav-brand { font-style: italic; }
.nav-tagline {
  display: block; font-family: var(--font-m); font-size: 8px;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--text-muted); margin-top: 2px;
  transition: color 0.4s;
  text-align: justify; text-align-last: justify;
}
.ft-brand + span { text-align: justify !important; text-align-last: justify !important; }
[data-theme="pixel"] .nav-tagline { display: none; }
.nav-links { display: flex; align-items: center; gap: 28px; list-style: none; }
.nav-links a {
  font-family: var(--font-b); font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-muted); text-decoration: none;
  transition: color 0.2s;
}
.nav-links a:hover,
.nav-links a.active { color: var(--accent); }
[data-theme="pixel"] .nav-links a { font-size: 7px; letter-spacing: 0.05em; }
.nav-icon-link { display: flex; align-items: center; padding: 4px 6px; }
.nav-icon-link svg { transition: color .2s; }
.nav-icon-link:hover svg { color: var(--accent); }
.nav-profile-btn { width:32px; height:32px; display:flex; align-items:center; justify-content:center; border:1px solid var(--border); background:var(--panel-bg); cursor:pointer; transition:border-color .2s, box-shadow .2s; text-decoration:none; color:var(--text-muted); flex-shrink:0; }
.nav-profile-btn:hover { border-color:var(--border-hi); box-shadow:var(--glow); color:var(--accent); }
/* ── NAV USER ──────────────────────────────────────────────────────── */
.nav-user { display:flex; align-items:center; gap:8px; margin-right:4px; }
.nav-username { font-size:0.75rem; font-family:var(--font-m); color:var(--text-muted); letter-spacing:.05em; }
.nav-user-badge { font-size:0.55rem; font-family:var(--font-m); letter-spacing:.15em; padding:2px 8px; border:1px solid var(--accent); color:var(--accent); background:color-mix(in srgb,var(--accent) 8%,transparent); white-space:nowrap; }
@media(max-width:768px){ .nav-user { display:none; } }

/* ── TCG BLUEPRINT CARDS ───────────────────────────────────────────── */
@keyframes tcg-shimmer {
  0%,100% { box-shadow:0 0 12px color-mix(in srgb,var(--accent) 45%,transparent),0 0 28px color-mix(in srgb,var(--accent) 20%,transparent); }
  50%     { box-shadow:0 0 22px color-mix(in srgb,var(--accent) 70%,transparent),0 0 50px color-mix(in srgb,var(--accent) 35%,transparent); }
}
.tcg-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:20px; }
.tcg-card { position:relative; display:flex; flex-direction:column; border:2px solid var(--border); background:var(--panel-bg); transition:transform .2s ease, box-shadow .3s ease; cursor:pointer; overflow:hidden; }
.tcg-card:hover { transform:translateY(-6px) scale(1.015); z-index:5; }
.tcg-card[data-rarity="rare"]      { border-color:var(--accent); box-shadow:var(--glow); }
.tcg-card[data-rarity="epic"]      { border-color:var(--border-hi); box-shadow:var(--glow-hi); }
.tcg-card[data-rarity="legendary"] { border-color:var(--accent); animation:tcg-shimmer 2.8s ease-in-out infinite; }
/* Name bar */
.tcg-name-bar { padding:9px 12px; display:flex; align-items:center; justify-content:space-between; background:var(--surface); border-bottom:1px solid var(--border); gap:6px; }
.tcg-name  { font-family:var(--font-h); font-size:.8rem; font-weight:700; letter-spacing:.06em; color:var(--text); line-height:1.2; flex:1; }
.tcg-rarity{ font-size:0.56rem; font-family:var(--font-m); color:var(--accent); letter-spacing:.12em; white-space:nowrap; flex-shrink:0; }
/* Art zone */
.tcg-art { flex:0 0 38%; background:var(--bg); border-bottom:1px solid var(--border); overflow:hidden; display:flex; align-items:center; justify-content:center; position:relative; }
.tcg-art svg { width:100%; height:100%; display:block; }
/* Type line */
.tcg-type-line { padding:5px 12px; font-size:0.56rem; font-family:var(--font-m); letter-spacing:.1em; color:var(--text-muted); border-bottom:1px solid var(--border); background:var(--surface); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* Text box */
.tcg-text-box { flex:1; padding:10px 12px; display:flex; flex-direction:column; gap:5px; overflow:hidden; min-height:0; }
.tcg-flavor { font-size:0.65rem; font-style:italic; color:var(--text-muted); border-left:2px solid var(--accent); padding-left:6px; margin-bottom:2px; line-height:1.5; }
.tcg-cap { font-size:0.63rem; color:var(--text-muted); display:flex; align-items:flex-start; gap:5px; line-height:1.5; }
.tcg-cap::before { content:"◆"; color:var(--accent); font-size:.45rem; flex-shrink:0; margin-top:3px; }
/* Stats bar */
.tcg-stats { padding:8px 12px; display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--border); background:var(--surface); }
.tcg-stat { text-align:center; }
.tcg-stat-val { font-family:var(--font-h); font-size:.82rem; color:var(--accent); display:block; line-height:1.2; }
.tcg-stat-lbl { font-family:var(--font-m); font-size:.44rem; color:var(--text-muted); letter-spacing:.07em; }
/* Footer */
.tcg-footer { padding:5px 12px; display:flex; align-items:center; justify-content:space-between; border-top:1px solid var(--border); font-family:var(--font-m); font-size:.44rem; color:var(--text-muted); background:var(--surface); }
/* Actions (shown below card on hover or always) */
.tcg-actions { padding:8px 12px; display:flex; gap:6px; border-top:1px solid var(--border); background:var(--surface); }
.tcg-actions .c-btn { font-size:0.62rem; padding:5px 10px; flex:1; justify-content:center; }
/* Pixel theme adjustments */
[data-theme="pixel"] .tcg-card { border-width:3px; }
[data-theme="pixel"] .tcg-name { font-size:.62rem; }

#hamburger {
  display: none; flex-direction: column; gap: 5px;
  background: none; border: none; cursor: pointer; padding: 4px;
}
#hamburger span { display: block; width: 22px; height: 2px; background: var(--accent); }
[data-theme="pixel"] #hamburger span { height: 3px; }
#mobile-menu {
  display: none; flex-direction: column; gap: 14px;
  padding: 16px 24px 22px;
  background: var(--nav-bg);
  border-bottom: 1px solid var(--border);
}
#mobile-menu.open { display: flex; }
#mobile-menu a {
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-muted); text-decoration: none; font-family: var(--font-b);
}

/* ─────────────────────────────────────────────────────────────────
   MODULE: LAYOUT
───────────────────────────────────────────────────────────────── */
.page { position: relative; z-index: 10; padding-top: 88px; }
.sec  { padding: 96px 24px; }
.inner { max-width: 1280px; margin: 0 auto; }

.sec-label {
  font-family: var(--font-m); font-size: 9px;
  letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--text-muted);
  border-left: 2px solid var(--accent); padding-left: 10px;
  display: inline-block; margin-bottom: 12px;
  transition: color 0.4s, border-color 0.4s;
}
[data-theme="lcars"] .sec-label { border-left: none; border-bottom: 2px solid var(--accent2); padding-left: 0; padding-bottom: 4px; }
[data-theme="pixel"] .sec-label { font-size: 7px; border-left: 3px solid var(--accent); }

.sec-title {
  font-family: var(--font-d);
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 900; line-height: 1.1;
  color: var(--text);
  transition: font-family 0.01s, color 0.4s;
}
[data-theme="pixel"] .sec-title { font-size: clamp(0.9rem, 3vw, 1.5rem); line-height: 1.7; }
[data-theme="retro"] .sec-title { font-style: italic; }
.hl { color: var(--accent); transition: color 0.4s; }

/* Sub-page header (compact, not full-height hero) */
.page-header {
  padding: 120px 24px 64px;
  border-bottom: 1px solid var(--border);
  background: var(--bg2);
  transition: background 0.4s, border-color 0.4s;
}
.page-header .inner { text-align: center; }

/* ─────────────────────────────────────────────────────────────────
   MODULE: PANEL / GLASS
───────────────────────────────────────────────────────────────── */
.panel, .glass {
  background: var(--surface);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius);
  position: relative;
  transition: background 0.4s, border-color 0.4s, box-shadow 0.25s, transform 0.25s;
}
.panel:hover, .glass:hover {
  box-shadow: var(--glow-hi);
  transform: translateY(-3px);
}
[data-theme="spaceship"] .panel:hover,
[data-theme="spaceship"] .glass:hover { border-color: #fff; }

/* HUD corner marks */
.hud::before, .hud::after {
  content: ''; position: absolute;
  width: 10px; height: 10px;
  border-color: var(--accent); border-style: solid; opacity: 0.7;
  transition: border-color 0.4s;
}
.hud::before { top: -1px; left: -1px; border-width: 2px 0 0 2px; }
.hud::after  { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; }
[data-theme="lcars"] .hud::before,
[data-theme="lcars"] .hud::after { display: none; }
[data-theme="lcars"] .panel,
[data-theme="lcars"] .glass { border-radius: 0 20px 20px 0; border-left: 5px solid var(--accent); }
[data-theme="pixel"] .panel,
[data-theme="pixel"] .glass { border: 4px solid var(--border); box-shadow: 4px 4px 0 var(--text-dim); }
[data-theme="pixel"] .panel:hover,
[data-theme="pixel"] .glass:hover { box-shadow: 6px 6px 0 var(--accent); transform: translate(-2px,-2px); }

/* ─────────────────────────────────────────────────────────────────
   MODULE: BUTTONS
───────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 28px;
  font-family: var(--font-b); font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase;
  text-decoration: none; border: 1px solid var(--accent);
  color: var(--accent); background: transparent; cursor: pointer;
  border-radius: var(--radius);
  clip-path: polygon(8px 0%,100% 0%,calc(100% - 8px) 100%,0% 100%);
  transition: background 0.2s, box-shadow 0.2s, color 0.2s;
}
[data-theme="lcars"] .btn { clip-path: none; border-radius: 20px; }
[data-theme="pixel"] .btn  { clip-path: none; font-size: 8px; padding: 10px 18px; border: 3px solid var(--accent); letter-spacing: 0.05em; }
.btn:hover { background: rgba(255,255,255,0.07); box-shadow: var(--glow-hi); }
[data-theme="spaceship"] .btn:hover { background: var(--accent); color: var(--bg); box-shadow: none; }
[data-theme="pixel"]     .btn:hover { background: var(--accent); color: var(--bg); }
.btn-solid { background: rgba(255,255,255,0.07); box-shadow: var(--glow); }
[data-theme="spaceship"] .btn-solid { background: #fff; color: #000; }
[data-theme="spaceship"] .btn-solid:hover { background: #ccc; color: #000; }

/* ─────────────────────────────────────────────────────────────────
   MODULE: HERO (full-height homepage)
───────────────────────────────────────────────────────────────── */
.hero {
  min-height: 100vh; display: flex; align-items: center;
  padding: 120px 24px 80px;
}
.hero-2col {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 64px; align-items: center; width: 100%;
}
@media (max-width: 960px) {
  .hero-2col { grid-template-columns: 1fr; text-align: center; }
  .hero-2col .hero-btns { justify-content: center; }
  .hero-2col .hero-stats { margin-left: auto; margin-right: auto; }
}
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 16px;
  border: 1px solid var(--border); background: var(--surface);
  border-radius: var(--radius);
  font-family: var(--font-m); font-size: 9px;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--text-muted); margin-bottom: 28px;
  transition: background 0.4s, border-color 0.4s;
}
.pulse {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent); box-shadow: var(--glow);
  animation: blink 1.6s ease-in-out infinite;
}
.pulse-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--accent); box-shadow: var(--glow);
  animation: blink 1.5s ease-in-out infinite;
  flex-shrink: 0;
}
.hero-title {
  font-family: var(--font-d);
  font-size: clamp(2.8rem, 7vw, 5.5rem);
  font-weight: 900; line-height: 1.05; letter-spacing: -0.02em;
  margin-bottom: 24px;
  transition: font-family 0.01s;
}
[data-theme="pixel"] .hero-title { font-size: clamp(1rem,5vw,2rem); line-height: 1.8; letter-spacing: 0; }
[data-theme="retro"] .hero-title { font-style: italic; }
[data-theme="lcars"] .hero-title { letter-spacing: 0.06em; }
.hero-title .l1 { display: block; color: var(--accent); }
.hero-title .l2 { display: block; color: var(--text); }
.hero-sub {
  font-size: clamp(0.85rem,2vw,1.05rem); line-height: 1.75;
  color: var(--text-muted); margin-bottom: 32px;
  transition: color 0.4s;
}
[data-theme="pixel"] .hero-sub { font-size: 7px; line-height: 2.2; }
.hero-btns { display: flex; gap: 14px; flex-wrap: wrap; }
.atm-badge {
  display: inline-block; margin-top: 28px;
  font-family: var(--font-d); font-size: clamp(0.55rem,1.5vw,0.7rem);
  letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--accent); border: 1px solid var(--border-hi);
  padding: 5px 14px; border-radius: var(--radius); opacity: 0.85;
  transition: color 0.4s, border-color 0.4s;
}
[data-theme="pixel"] .atm-badge { font-size: 6px; border: 2px solid var(--accent); }
.hero-stats {
  display: grid; grid-template-columns: repeat(3,1fr);
  gap: 12px; max-width: 360px; margin-top: 32px;
}
.hero-stat { padding: 14px; text-align: center; }
.stat-val {
  display: block; font-family: var(--font-d);
  font-size: 1.5rem; font-weight: 700; color: var(--accent);
  transition: color 0.4s, font-family 0.01s;
}
[data-theme="pixel"] .stat-val { font-size: 0.7rem; }
.stat-label {
  display: block; font-family: var(--font-m); font-size: 8px;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-muted); margin-top: 4px;
}

/* Solar breathing */
@keyframes breathe {
  0%,100% { box-shadow: 0 0 18px rgba(255,110,0,0.28); }
  50%      { box-shadow: 0 0 48px rgba(255,150,0,0.55), 0 0 110px rgba(255,60,0,0.28); }
}
[data-theme="solar"] .hero-stat { animation: breathe 4s ease-in-out infinite; }
[data-theme="solar"] .hero-stat:nth-child(2) { animation-delay: 1.3s; }
[data-theme="solar"] .hero-stat:nth-child(3) { animation-delay: 2.6s; }

/* Flicker */
@keyframes flicker { 0%,19%,21%,23%,25%,54%,56%,100%{opacity:1} 20%,24%,55%{opacity:0.45} }
[data-theme="navigator"] .hl,
[data-theme="matrix"]    .hl { animation: flicker 9s linear infinite; }

/* Typewriter cursor */
.tw-cursor { color: var(--accent); animation: blink 1s step-end infinite; display: none; }
[data-theme="matrix"] .tw-cursor { display: inline; }

/* ─────────────────────────────────────────────────────────────────
   MODULE: MISSION CONTROL HUD PANEL
───────────────────────────────────────────────────────────────── */
.mc-panel { padding: 24px; }
.mc-header {
  display: flex; justify-content: space-between; align-items: center;
  border-bottom: 1px solid var(--border); padding-bottom: 14px; margin-bottom: 20px;
  transition: border-color 0.4s;
}
.mc-title {
  font-family: var(--font-m); font-size: 9px; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-muted);
}
.mc-clock {
  font-family: var(--font-m); font-size: 10px; color: var(--accent);
  letter-spacing: 0.08em; transition: color 0.4s;
}
.mc-grid {
  display: grid; grid-template-columns: 5fr 7fr; gap: 20px; margin-bottom: 20px;
}
@media (max-width: 520px) { .mc-grid { grid-template-columns: 1fr; } }

/* Spinning dial */
.dial-wrap { display: flex; justify-content: center; margin-bottom: 16px; }
.dial-container { width: 110px; height: 110px; position: relative; display: flex; align-items: center; justify-content: center; }
.dial-ring {
  position: absolute; inset: 0;
  border: 8px solid var(--surface2);
  border-top: 8px solid var(--accent);
  border-radius: 50%;
  animation: spin-cw 4s linear infinite;
  transition: border-color 0.4s;
}
.dial-inner { position: absolute; text-align: center; }
.dial-val { font-family: var(--font-d); font-size: 1.4rem; font-weight: 700; color: var(--accent); display: block; transition: color 0.4s; }
[data-theme="pixel"] .dial-val { font-size: 0.65rem; }
.dial-lbl { font-family: var(--font-m); font-size: 7px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--text-muted); }

/* Position vector */
.pos-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; }
.pos-cell {
  background: var(--surface2); border: 1px solid var(--border);
  padding: 6px 4px; text-align: center;
  font-family: var(--font-m); font-size: 9px; color: var(--text-muted);
  border-radius: var(--radius);
  transition: background 0.4s, border-color 0.4s;
}
.pos-cell span { color: var(--accent); font-weight: 600; }

/* Command keypad */
.keypad { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; margin-bottom: 16px; }
.key-btn {
  aspect-ratio: 1; border: var(--border-width) solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-m); font-weight: 700; font-size: 8px;
  letter-spacing: 0.1em;
  cursor: pointer; transition: background 0.15s, color 0.15s;
  background: transparent; color: var(--text-muted);
  border-radius: var(--radius);
  text-transform: uppercase;
}
.key-btn:hover { background: var(--accent); color: var(--bg); }
.key-btn:active { transform: scale(0.95); }
.key-btn.key-active { background: var(--accent); color: var(--bg); }
[data-theme="pixel"] .key-btn { border: 3px solid var(--border); font-size: 6px; }

/* Toggle switches */
.toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.toggle-label { font-family: var(--font-m); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }
.toggle-wrap { display: flex; align-items: center; cursor: pointer; }
.toggle-switch {
  width: 44px; height: 22px;
  background: var(--surface2);
  border: var(--border-width) solid var(--border);
  border-radius: 999px; position: relative;
  transition: background 0.3s, border-color 0.4s;
}
.toggle-switch::after {
  content: ''; position: absolute;
  top: 2px; left: 2px;
  width: 16px; height: 16px;
  background: var(--text-muted); border-radius: 50%;
  transition: left 0.3s, background 0.3s;
}
.toggle-on .toggle-switch { background: var(--accent); border-color: var(--accent); }
.toggle-on .toggle-switch::after { left: 24px; background: var(--bg); }
[data-theme="pixel"] .toggle-switch { border-radius: 0; border: 3px solid var(--border); }
[data-theme="pixel"] .toggle-switch::after { border-radius: 0; }

/* Timeline */
.timeline-wrap { margin-bottom: 16px; }
.timeline-label {
  display: flex; justify-content: space-between;
  font-family: var(--font-m); font-size: 8px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--text-muted); margin-bottom: 6px;
  opacity: 0.6;
}
.timeline-track {
  position: relative; height: 24px;
  border: var(--border-width) solid var(--border);
  background: var(--surface); overflow: hidden;
  border-radius: var(--radius);
  transition: background 0.4s, border-color 0.4s;
}
.timeline-marker {
  position: absolute; top: 0; bottom: 0; width: 3px;
  background: var(--accent); box-shadow: var(--glow);
  animation: drift 12s linear infinite;
  transition: background 0.4s;
}
@keyframes drift { 0%{left:0} 100%{left:100%} }

/* Console log */
.console-wrap { margin-bottom: 0; }
.console-log {
  font-family: 'Fira Code', monospace; font-size: 9px;
  height: 80px; overflow: hidden; line-height: 1.5;
  color: var(--text-muted); padding: 10px 12px;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: background 0.4s, border-color 0.4s, color 0.4s;
}
[data-theme="matrix"] .console-log { color: var(--accent); }

/* ─────────────────────────────────────────────────────────────────
   MODULE: ATM ORBITAL VISUAL
───────────────────────────────────────────────────────────────── */
.atm-sec { background: var(--bg2); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); transition: background 0.4s, border-color 0.4s; }
.atm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
@media (max-width: 768px) { .atm-grid { grid-template-columns: 1fr; gap: 40px; } }

.atm-visual { position: relative; aspect-ratio: 1; width: 100%; max-width: 340px; margin: 0 auto; }
@keyframes spin-cw  { from{transform:rotate(0)}   to{transform:rotate(360deg)} }
@keyframes spin-ccw { from{transform:rotate(0)}   to{transform:rotate(-360deg)} }
.ring {
  position: absolute; border-radius: 50%;
  border: 1px solid var(--border); transition: border-color 0.4s;
}
.ring-1 { inset: 0;   animation: spin-cw  22s linear infinite; }
.ring-2 { inset: 13%; animation: spin-ccw 16s linear infinite; border-color: var(--border-hi); }
.ring-3 { inset: 28%; animation: spin-cw  10s linear infinite; }
.atm-core {
  position: absolute; inset: 36%;
  background: var(--surface2); border-radius: 50%;
  border: 2px solid var(--accent);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--glow-hi);
  transition: background 0.4s, border-color 0.4s, box-shadow 0.4s;
}
.atm-core-txt {
  font-family: var(--font-d); font-size: clamp(0.5rem,1.8vw,0.75rem);
  font-weight: 700; color: var(--accent); text-align: center; letter-spacing: 0.1em;
  transition: color 0.4s, font-family 0.01s;
}
.orb {
  position: absolute; width: 10px; height: 10px;
  background: var(--accent); border-radius: 50%;
  box-shadow: var(--glow); animation: blink 2s ease-in-out infinite;
  transition: background 0.4s, box-shadow 0.4s;
}

/* Radar (Navigator only) */
.radar { width: 160px; height: 160px; position: relative; margin: 20px auto 0; display: none; }
[data-theme="navigator"] .radar { display: block; }
.radar-c { position: absolute; border-radius: 50%; border: 1px solid var(--border); }
.radar-c:nth-child(1){inset:0} .radar-c:nth-child(2){inset:25%} .radar-c:nth-child(3){inset:50%}
.radar-sweep {
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(rgba(0,229,255,0.45) 0deg, transparent 65deg, transparent 360deg);
  animation: spin-cw 3.5s linear infinite;
}
.radar-blip {
  position: absolute; width: 5px; height: 5px;
  background: var(--accent); border-radius: 50%;
  box-shadow: 0 0 6px var(--accent); animation: blink 3s ease-in-out infinite;
}

/* ─────────────────────────────────────────────────────────────────
   MODULE: PILLARS / SOLUTIONS
───────────────────────────────────────────────────────────────── */
.pillars-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(210px,1fr));
  gap: 18px; margin-top: 48px;
}
.pillar { padding: 26px; }
.p-icon {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-hi); color: var(--accent);
  margin-bottom: 16px; border-radius: var(--radius);
  box-shadow: var(--glow);
  transition: border-color 0.4s, color 0.4s, box-shadow 0.4s;
}
[data-theme="pixel"] .p-icon { border: 3px solid var(--accent); }
.p-num   { font-family: var(--font-m); font-size: 9px; letter-spacing: 0.2em; color: var(--text-dim); margin-bottom: 8px; }
.p-title { font-family: var(--font-d); font-size: 1rem; font-weight: 700; color: var(--text); margin-bottom: 10px; transition: font-family 0.01s; }
[data-theme="pixel"] .p-title { font-size: 0.6rem; line-height: 1.9; }
.p-desc  { font-size: 0.82rem; line-height: 1.65; color: var(--text-muted); }
[data-theme="pixel"] .p-desc  { font-size: 0.52rem; line-height: 2.1; }

/* LCARS section bar */
.lcars-bar {
  border-left: 5px solid var(--accent); padding-left: 18px;
  margin-bottom: 12px;
  transition: border-color 0.4s;
}
[data-theme="lcars"] .lcars-bar {
  border-left: 40px solid var(--accent); border-radius: 40px 0 0 40px; padding-left: 20px;
}
.lcars-bar h2, .lcars-bar h3 { font-family: var(--font-d); text-transform: uppercase; letter-spacing: 0.1em; transition: font-family 0.01s; }

/* In-page progress / meter bar */
.meter-bar { height: 6px; background: var(--surface2); border-radius: 999px; overflow: hidden; transition: background 0.4s; }
.meter-fill { height: 100%; background: var(--accent); box-shadow: var(--glow); transition: width 0.8s ease, background 0.4s, box-shadow 0.4s; }
[data-theme="pixel"] .meter-bar { border-radius: 0; height: 8px; border: 2px solid var(--border); background: var(--bg); }

/* ─────────────────────────────────────────────────────────────────
   MODULE: ACADEMY / FLIGHT SIMULATOR
───────────────────────────────────────────────────────────────── */
.academy-sec { background: var(--bg2); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); transition: background 0.4s, border-color 0.4s; }
.academy-hdr { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 20px; margin-bottom: 48px; }
.hud-stats { display: flex; gap: 28px; flex-wrap: wrap; }
.hud-stat-val { display: block; font-family: var(--font-m); font-size: 1.25rem; color: var(--accent); font-weight: 600; transition: color 0.4s; }
.hud-stat-lbl { display: block; font-size: 8px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-muted); }
.modules-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(275px,1fr)); gap: 22px; }
.mod { padding: 30px; }
.mod-hdr { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.mod-badge { font-family: var(--font-m); font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; padding: 3px 10px; border: 1px solid var(--accent); color: var(--accent); border-radius: var(--radius); }
[data-theme="lcars"] .mod-badge { border-radius: 12px; }
.mod-status { font-family: var(--font-m); font-size: 8px; letter-spacing: 0.15em; color: var(--text-dim); }
.mod-title { font-family: var(--font-d); font-size: 1.2rem; font-weight: 700; color: var(--text); margin-bottom: 12px; transition: font-family 0.01s; }
[data-theme="pixel"] .mod-title { font-size: 0.65rem; line-height: 1.9; }
.mod-desc { font-size: 0.82rem; line-height: 1.65; color: var(--text-muted); margin-bottom: 20px; }
[data-theme="pixel"] .mod-desc { font-size: 0.52rem; line-height: 2.1; }
.lessons { display: flex; flex-direction: column; gap: 6px; }
.lesson {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.76rem; color: var(--text-muted);
  padding: 8px 10px;
  border: 1px solid var(--border); background: var(--surface); border-radius: var(--radius);
  font-family: var(--font-m); transition: background 0.4s, border-color 0.4s;
}
[data-theme="pixel"] .lesson { font-size: 0.5rem; line-height: 1.8; border: 2px solid var(--border); }
.lesson-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); flex-shrink: 0; transition: background 0.4s; }
.prog-track { height: 2px; background: var(--surface2); margin-top: 18px; transition: background 0.4s; }
[data-theme="pixel"] .prog-track { height: 8px; border: 2px solid var(--border); background: var(--bg); }
.prog-fill { height: 100%; background: var(--accent); box-shadow: var(--glow); transition: background 0.4s, box-shadow 0.4s; }


/* ─────────────────────────────────────────────────────────────────
   MODULE: CONTACT FORM
───────────────────────────────────────────────────────────────── */
.contact-box { max-width: 680px; margin: 0 auto; }
.contact-form { display: flex; flex-direction: column; gap: 16px; margin-top: 28px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 600px) { .form-row { grid-template-columns: 1fr; } }
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-label {
  font-family: var(--font-m); font-size: 9px;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-muted);
  transition: color 0.4s;
}
.contact-input, .contact-textarea {
  background: transparent;
  border: 1px solid var(--border); color: var(--text);
  padding: 12px 16px; font-family: var(--font-b); font-size: 13px;
  outline: none; border-radius: var(--radius);
  width: 100%;
  transition: border-color 0.2s, box-shadow 0.2s, color 0.4s, background 0.4s;
}
.contact-textarea { resize: vertical; min-height: 140px; }
.contact-input:focus,
.contact-textarea:focus { border-color: var(--accent); box-shadow: var(--glow); }
.contact-input::placeholder,
.contact-textarea::placeholder { color: var(--text-dim); }
[data-theme="pixel"] .contact-input,
[data-theme="pixel"] .contact-textarea { border: 3px solid var(--border); font-size: 8px; }

/* ─────────────────────────────────────────────────────────────────
   MODULE: FOOTER
───────────────────────────────────────────────────────────────── */
footer {
  border-top: 1px solid var(--border); background: var(--bg);
  padding: 64px 24px 40px;
  position: relative; z-index: 10;
  transition: background 0.4s, border-color 0.4s;
}
[data-theme="lcars"] footer { border-top: 3px solid var(--accent2); }
[data-theme="pixel"] footer { border-top: 4px solid var(--border); }
.footer-inner { max-width: 1280px; margin: 0 auto; }
.ft-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; }
@media (max-width: 900px) { .ft-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .ft-grid { grid-template-columns: 1fr; } }
.ft-logo { display: flex; align-items: center; gap: 12px; text-decoration: none; margin-bottom: 16px; }
.ft-logo-svg { width: 26px; height: 26px; color: var(--accent); flex-shrink: 0; transition: color 0.4s; }
.ft-brand { font-family: var(--font-d); font-size: 12px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); transition: color 0.4s, font-family 0.01s; }
.ft-desc { font-size: 0.78rem; line-height: 1.7; color: var(--text-muted); }
[data-theme="pixel"] .ft-desc { font-size: 6px; line-height: 2.2; }
.ft-heading { font-family: var(--font-m); font-size: 9px; letter-spacing: 0.25em; text-transform: uppercase; color: var(--accent); margin-bottom: 16px; transition: color 0.4s; }
.ft-links { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.ft-links a { font-size: 0.78rem; color: var(--text-muted); text-decoration: none; transition: color 0.2s; }
.ft-links a:hover { color: var(--accent); }
[data-theme="pixel"] .ft-links a { font-size: 6px; line-height: 2.2; }
.ft-bottom { margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; font-size: 8px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--text-dim); font-family: var(--font-m); }

/* ─────────────────────────────────────────────────────────────────
   MODULE: THEME DOCK
───────────────────────────────────────────────────────────────── */
.dock {
  position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%);
  z-index: 300;
  background: var(--panel-bg); border: 1px solid var(--border);
  backdrop-filter: blur(20px); box-shadow: var(--glow-hi);
  display: flex; align-items: center; gap: 6px; padding: 8px 14px;
  border-radius: 40px;
  transition: background 0.4s, border-color 0.4s, box-shadow 0.4s;
}
[data-theme="pixel"] .dock { border-radius: 0; border: 3px solid var(--border); }
.dock-lbl {
  font-family: var(--font-m); font-size: 8px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--text-muted); padding-right: 8px; border-right: 1px solid var(--border);
  margin-right: 4px; white-space: nowrap; transition: color 0.4s, border-color 0.4s;
}
[data-theme="pixel"] .dock-lbl { font-size: 6px; letter-spacing: 0; }
.db {
  width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid transparent; cursor: pointer;
  transition: transform 0.15s, border-color 0.15s; position: relative; flex-shrink: 0;
}
[data-theme="pixel"] .db { border-radius: 0; width: 18px; height: 18px; }
.db:hover { transform: scale(1.3); }
.db.active { border-color: rgba(255,255,255,0.85); transform: scale(1.15); }
.db::after {
  content: attr(data-tip);
  position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  background: var(--panel-bg); border: 1px solid var(--border);
  color: var(--text); font-family: var(--font-m); font-size: 8px;
  letter-spacing: 0.1em; padding: 4px 8px; white-space: nowrap;
  border-radius: 4px; pointer-events: none; opacity: 0; transition: opacity 0.15s;
}
.db:hover::after { opacity: 1; }
.d-sp { background: #0a0a0a url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1240.37 1240.21' fill='white'><path d='M962.08,762.91c-3.6,3.81-23,22.39-23.4,25.12s1.65,9.46,1.81,12.8c6.2,134.27-22.47,251.36-96.57,363.41-10.14,15.32-44.07,64.4-57.7,72.3-10.64,6.16-17.08,4.1-26.74-2.68l-205.91-206.08-2.61-1.47c-13.79,3.14-27.33,7.97-41.2,10.78-12.14,2.46-39.23,7.32-50.52,5.02-5.43-1.11-8.8-8.83-13.02-7.63-56.83,48.42-130.21,76.33-203.49,88.59-23.32,3.9-79.67,11.72-100.43,4.99-28.92-9.37-32.15-31.74-31.74-58.17,1.36-87.99,28.47-185.28,80.14-256.85,2.24-3.1,15.39-18.18,15.71-19.38.7-2.69-7.89-8.08-8.8-14.88-1.33-9.98,3.07-34.86,5.18-45.64,2.91-14.86,7.64-29.47,11.6-44.06L6.97,481.35c-6.58-10.16-9.77-14.46-3.86-25.92,4.89-9.48,28.96-27.24,38.49-34.51,113.03-86.2,243.65-127.64,386.44-121.64,5.01.21,23.34,2.94,26.44,1.52,117.49-117.68,260.78-215.29,420.81-265.18,95.99-29.93,217.05-45.19,316.54-29.13,13.03,2.1,32.43,2.67,37.16,16.84,5.97,17.89,9.64,56.02,10.55,75.45,12,255.12-107.2,483.74-277.46,664.12ZM842.3,261.63c-101.28,8.13-152.88,125.4-90.22,205.62,56.08,71.8,169.37,61.28,211.94-18.9,46.73-88.01-22.45-194.69-121.72-186.72ZM276.84,862.98c-1.02-.92-3.11-5.35-5.37-4.22-.87.43-8.43,11.31-9.79,13.25-32.97,47.21-49,105.67-56.19,162.31,1.77,1.77,42.17-6.13,48.04-7.46,31.2-7.03,64.74-18.77,92.63-34.37,4.52-2.53,34.5-21.3,35.27-23.8.34-1.12-.09-2.12-.89-2.92-35.52-32.96-67.86-70.35-103.71-102.79Z'/></svg>") center/72% no-repeat; }
.d-iv { background: #f8f8f8; }
.d-nv { background: #00e5ff; box-shadow: 0 0 8px #00e5ff; }
.d-sl { background: #ff8c00; box-shadow: 0 0 8px #ff8c00; }
.d-mx { background: #00ff41; box-shadow: 0 0 8px #00ff41; }
.d-rt { background: linear-gradient(135deg,#00c8a0,#e86c3a); }
.d-lc { background: linear-gradient(135deg,#ff9966,#bb88ff); }
.d-px { background: #ffff00; box-shadow: 0 0 4px #ffff00; }
[data-theme="pixel"] .d-px { border-radius: 0 !important; }

/* ─────────────────────────────────────────────────────────────────
   MODULE: RESPONSIVE
───────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .nav-links, .nav-cta-d { display: none; }
  #hamburger { display: flex; }
  .hero-title { font-size: clamp(2rem,11vw,4rem); }
  .sec { padding: 64px 20px; }
  .hero-stats { max-width: 100%; }
  .dock { bottom: 14px; }
  .dock-lbl { display: none; }
}
@media (max-width: 480px) {
  .hero-stats { grid-template-columns: 1fr 1fr; }
  .hero-stats > :last-child { grid-column: span 2; }
}

/* ─────────────────────────────────────────────────────────────────
   MODULE: UTILITIES
───────────────────────────────────────────────────────────────── */
.hr { border: none; border-top: 1px solid var(--border); transition: border-color 0.4s; }
[data-theme="pixel"] .hr { border-top: 3px solid var(--border); }

.text-accent  { color: var(--accent); }
.text-muted   { color: var(--text-muted); }
.font-mono    { font-family: var(--font-m); }
.font-display { font-family: var(--font-d); }
.label-sm     { font-family: var(--font-m); font-size: 8px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-muted); }
.status-dot   { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: blink 2s infinite; display: inline-block; }

/* ── Colored dot design system ────────────────────────────────────── */
.dot        { display: inline-block; width: 7px; height: 7px; border-radius: 50%; vertical-align: middle; flex-shrink: 0; }
.dot-sm     { width: 5px; height: 5px; }
.dot-lg     { width: 10px; height: 10px; }
.dot-green  { background: #22c55e; }
.dot-blue   { background: #60a5fa; }
.dot-cyan   { background: #22d3ee; }
.dot-amber  { background: #f59e0b; }
.dot-purple { background: #c084fc; }
.dot-red    { background: #f87171; }
.dot-gold   { background: #fbbf24; }
.dot-accent { background: var(--accent); }
.dot-blink  { animation: dot-blink 1.4s ease-in-out infinite; }
.dot-pulse  { animation: dot-pulse 2s ease-in-out infinite; }
.dot-slow   { animation-duration: 2.8s; }
@keyframes dot-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.1; }
}
@keyframes dot-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%       { transform: scale(1.6); opacity: 0.5; }
}

/* NS Certified badge ─────────────────────────────────────────────── */
.ns-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px 3px 7px; border: 1px solid var(--border-hi); border-radius: 3px; font-family: var(--font-m); font-size: 9px; letter-spacing: 0.12em; color: var(--text); background: var(--panel-bg); vertical-align: middle; }
.ns-badge-i   { border-color: #60a5fa55; }
.ns-badge-ii  { border-color: #c084fc55; }
.ns-badge-iii { border-color: #fbbf2466; box-shadow: 0 0 10px #fbbf2420; }
.ns-badge-a1  { border-color: #f8717166; color: #f87171; }
.ns-badge-a2  { border-color: #fb923c66; color: #fb923c; }
.ns-badge-a3  { border-color: #e2e8f066; color: #e2e8f0; box-shadow: 0 0 10px #e2e8f015; }

/* cert level cards ───────────────────────────────────────────────── */
.cert-levels { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; margin-top: 36px; text-align: left; }
@media (max-width:640px) { .cert-levels { grid-template-columns: 1fr; } }
.cert-level-card { padding: 24px 22px; border: 1px solid var(--border); background: var(--panel-bg); }
.cert-level-card.lvl-i   { border-color: #60a5fa33; }
.cert-level-card.lvl-ii  { border-color: #c084fc33; }
.cert-level-card.lvl-iii { border-color: #fbbf2444; box-shadow: 0 0 20px #fbbf2410; }
.cert-pip-row { display: flex; gap: 5px; margin-bottom: 14px; align-items: center; }
.cert-track-req { font-family: var(--font-m); font-size: 8px; letter-spacing: 0.15em; color: var(--text-muted); margin-top: 8px; }
.cert-adv-divider { display: flex; align-items: center; gap: 10px; margin: 36px 0 16px; }
.cert-adv-divider::before, .cert-adv-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.cert-adv-cards .cert-adv-card { border-style: dashed; }
.cert-adv-card { border-color: var(--border) !important; }
.adv-milestone-list { display: flex; flex-direction: column; gap: 6px; border-top: 1px solid var(--border); padding-top: 12px; margin-top: 4px; }
.adv-milestone { display: flex; align-items: center; gap: 7px; font-family: var(--font-m); font-size: 0.7rem; color: var(--text-muted); }

/* ── NS STUDIO — No-Code GUI ─────────────────────────────────────── */
.ns-studio           { border: 1px solid var(--border-hi); background: var(--panel-bg); overflow: hidden; }
.ns-studio.studio-open  { animation: studioReveal 1s cubic-bezier(.16,1,.3,1) forwards; }
.ns-studio.studio-close { animation: studioClose .55s ease-in forwards; }
@keyframes studioReveal {
  0%   { clip-path: circle(2px at 50% 14px); animation-timing-function: ease-in; }
  32%  { clip-path: inset(0 0 calc(100% - 2px) 0); animation-timing-function: cubic-bezier(.22,1,.36,1); }
  100% { clip-path: inset(0 0 0% 0); }
}
@keyframes studioClose {
  0%   { clip-path: inset(0 0 0% 0); animation-timing-function: ease-in; }
  65%  { clip-path: inset(0 0 calc(100% - 2px) 0); animation-timing-function: ease-out; }
  100% { clip-path: circle(2px at 50% 14px); }
}
.nss-chrome          { display: flex; align-items: center; gap: 10px; padding: 9px 14px; background: var(--bg); border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.nss-title           { font-family: var(--font-m); font-size: 9px; letter-spacing: 0.2em; color: var(--text-muted); }
.nss-mode-toggle     { display: flex; gap: 1px; background: var(--border); padding: 1px; }
.nss-mode-btn        { background: var(--bg); border: none; padding: 4px 11px; font-family: var(--font-m); font-size: 8px; letter-spacing: 0.12em; color: var(--text-muted); cursor: pointer; transition: all 0.1s; white-space: nowrap; }
.nss-mode-btn.active { background: var(--accent); color: var(--bg); }
.nss-body            { display: grid; grid-template-columns: 1fr 1fr; }
@media (max-width: 700px) { .nss-body { grid-template-columns: 1fr; } }
.nss-panel           { padding: 20px 22px; }
.nss-panel + .nss-panel { border-top: 1px solid var(--border); }
@media (min-width: 700px) { .nss-panel + .nss-panel { border-top: none; border-left: 1px solid var(--border); } }
.nss-panel-hdr       { display: flex; align-items: center; gap: 7px; font-family: var(--font-m); font-size: 9px; letter-spacing: 0.2em; color: var(--text-muted); padding-bottom: 12px; margin-bottom: 16px; border-bottom: 1px solid var(--border); }
.nss-row             { margin-bottom: 16px; }
.nss-lbl             { font-family: var(--font-m); font-size: 8px; letter-spacing: 0.15em; color: var(--text-muted); margin-bottom: 6px; }
.nss-val             { font-family: var(--font-m); font-size: 0.8rem; color: var(--accent); border: 1px solid var(--border); padding: 4px 9px; display: inline-block; }
.nss-pills           { display: flex; gap: 5px; flex-wrap: wrap; }
.nss-pill            { background: none; border: 1px solid var(--border); padding: 3px 10px; font-family: var(--font-m); font-size: 0.68rem; letter-spacing: 0.04em; color: var(--text-muted); cursor: pointer; transition: all 0.12s; }
.nss-pill:hover      { border-color: var(--border-hi); color: var(--text); }
.nss-pill.on         { border-color: var(--accent); color: var(--accent); background: var(--bg); }
.nss-tools           { display: flex; flex-direction: column; gap: 8px; }
.nss-tool-row        { display: flex; align-items: center; gap: 8px; }
.nss-tog-btn         { display: flex; gap: 3px; padding: 4px 6px; border: 1px solid var(--border); background: none; cursor: pointer; transition: border-color 0.12s; align-items: center; }
.nss-tog-btn.on      { border-color: var(--accent); }
.nss-pip             { width: 10px; height: 10px; background: var(--border); transition: background 0.12s; flex-shrink: 0; }
.nss-pip.on          { background: var(--accent); }
.nss-tool-name       { font-family: var(--font-m); font-size: 0.72rem; color: var(--text); flex: 1; }
.nss-tool-state      { font-family: var(--font-m); font-size: 8px; letter-spacing: 0.1em; color: var(--text-muted); }
.nss-tool-state.on   { color: var(--accent); }
.nss-bar-row         { display: flex; align-items: center; gap: 9px; }
.nss-bar             { flex: 1; height: 5px; background: var(--bg); border: 1px solid var(--border); overflow: hidden; }
.nss-bar-fill        { height: 100%; background: var(--accent); }
.nss-bar-num         { font-family: var(--font-m); font-size: 0.7rem; color: var(--text-muted); min-width: 46px; text-align: right; }
.nss-temp-row        { display: flex; align-items: center; gap: 9px; }
.nss-temp-pips       { display: flex; gap: 3px; align-items: flex-end; }
.nss-tpip            { width: 7px; background: var(--border); transition: background 0.12s; }
.nss-tpip.on         { background: var(--accent); }
.nss-radios          { display: flex; flex-direction: column; gap: 8px; }
.nss-radio-row       { display: flex; align-items: center; gap: 8px; cursor: pointer; font-family: var(--font-m); font-size: 0.72rem; color: var(--text-muted); transition: color 0.12s; }
.nss-radio-row.on    { color: var(--text); }
.nss-agents          { display: flex; flex-direction: column; gap: 9px; }
.nss-agent-row       { display: flex; align-items: center; gap: 8px; }
.nss-agent-nm        { font-family: var(--font-m); font-size: 0.7rem; color: var(--text); min-width: 100px; }
.nss-pip-row         { display: flex; gap: 3px; }
.nss-rep-ct          { font-family: var(--font-m); font-size: 0.68rem; color: var(--text-muted); }
.nss-tog-big         { border: 1px solid var(--border); background: none; font-family: var(--font-m); font-size: 0.68rem; letter-spacing: 0.12em; padding: 4px 14px; cursor: pointer; color: var(--text-muted); transition: all 0.12s; }
.nss-tog-big.on      { border-color: var(--accent); color: var(--accent); background: var(--bg); }
.nss-metrics         { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--border); }
@media (max-width: 600px) { .nss-metrics { grid-template-columns: repeat(2, 1fr); } }
.nss-metric          { padding: 14px 16px; border-right: 1px solid var(--border); }
.nss-metric:last-child { border-right: none; }
.nss-metric-lbl      { display: flex; align-items: center; gap: 5px; font-family: var(--font-m); font-size: 8px; letter-spacing: 0.15em; color: var(--text-muted); margin-bottom: 6px; }
.nss-metric-val      { font-family: var(--font-h); font-size: 1.3rem; color: var(--text); margin-bottom: 8px; line-height: 1; }
.nss-metric-val span { font-size: 0.6em; color: var(--text-muted); }
.nss-deploy          { display: flex; align-items: center; gap: 12px; padding: 14px 22px; background: var(--bg); border-top: 1px solid var(--border); flex-wrap: wrap; }
.nss-btn-validate    { background: none; border: 1px solid var(--border-hi); padding: 7px 16px; font-family: var(--font-m); font-size: 0.72rem; letter-spacing: 0.1em; color: var(--text); cursor: pointer; transition: all 0.12s; flex-shrink: 0; }
.nss-btn-validate:hover { border-color: var(--accent); color: var(--accent); }
.nss-status-items    { display: flex; gap: 12px; flex-wrap: wrap; }
.nss-si              { display: flex; align-items: center; gap: 5px; font-family: var(--font-m); font-size: 0.7rem; color: var(--text-muted); }
.nss-btn-deploy      { background: var(--accent); color: var(--bg); border: none; padding: 8px 18px; font-family: var(--font-m); font-size: 0.72rem; letter-spacing: 0.1em; cursor: pointer; display: flex; align-items: center; gap: 7px; transition: opacity 0.15s; flex-shrink: 0; }
.nss-btn-deploy:hover { opacity: 0.82; }
.nss-prog-wrap       { width: 100%; display: flex; align-items: center; gap: 8px; }
.nss-prog-bar        { flex: 1; height: 5px; background: var(--panel-bg); border: 1px solid var(--border); overflow: hidden; }
.nss-prog-fill       { height: 100%; background: var(--accent); width: 0%; transition: width 0.08s linear; }
.nss-prog-pct        { font-family: var(--font-m); font-size: 0.7rem; color: var(--text-muted); min-width: 60px; }
/* ── Terminal view ── */
.nss-term-view       { border-top: 1px solid var(--border); }
.nss-tv-tabs         { display: flex; background: var(--bg); border-bottom: 1px solid var(--border); }
.nss-tv-tab          { flex: 1; background: none; border: none; border-right: 1px solid var(--border); padding: 10px 14px; font-family: var(--font-m); font-size: 8px; letter-spacing: 0.14em; color: var(--text-muted); cursor: pointer; text-align: center; transition: all 0.1s; }
.nss-tv-tab:last-child { border-right: none; }
.nss-tv-tab.active   { color: var(--accent); background: var(--panel-bg); }
.nss-tv-body         { padding: 18px 22px; min-height: 300px; }
.nss-tv-prompt       { font-family: var(--font-m); font-size: 0.72rem; margin-bottom: 18px; padding-bottom: 12px; border-bottom: 1px solid var(--border); color: var(--text-muted); }
.nss-tv-prompt .tv-host { color: var(--accent); }
.nss-cursor          { display: inline-block; width: 7px; height: 0.8em; background: var(--accent); animation: dotBlink 0.8s step-end infinite; vertical-align: baseline; margin-left: 2px; }
.nss-tv-rows         { display: flex; flex-direction: column; gap: 14px; }
.nss-tv-row          { display: flex; align-items: flex-start; gap: 0; flex-wrap: wrap; }
.nss-tv-key          { font-family: var(--font-m); font-size: 0.68rem; letter-spacing: 0.12em; color: var(--text-muted); min-width: 130px; padding-top: 3px; flex-shrink: 0; }
@media (max-width: 480px) { .nss-tv-key { min-width: 100px; } }

/* ── CODE WINDOW — Blueprint Studio ──────────────────────────────── */
.code-window         { border: 1px solid var(--border-hi); background: var(--panel-bg); overflow: hidden; }
.cw-chrome           { display: flex; align-items: center; gap: 12px; padding: 9px 14px; background: var(--bg); border-bottom: 1px solid var(--border); }
.cw-traffic          { display: flex; gap: 5px; align-items: center; flex-shrink: 0; }
.cw-tabs             { display: flex; flex: 1; gap: 2px; overflow-x: auto; }
.cw-tab              { background: none; border: none; border-bottom: 2px solid transparent; padding: 4px 14px 3px; font-family: var(--font-m); font-size: 0.72rem; letter-spacing: 0.05em; color: var(--text-muted); cursor: pointer; white-space: nowrap; transition: color 0.15s, border-color 0.15s; }
.cw-tab:hover        { color: var(--text); }
.cw-tab.is-active    { color: var(--text); border-bottom-color: var(--accent); }
.cw-run              { flex-shrink: 0; background: var(--accent); color: var(--bg); border: none; padding: 4px 13px; font-family: var(--font-m); font-size: 0.7rem; letter-spacing: 0.08em; cursor: pointer; transition: opacity 0.15s; }
.cw-run:hover        { opacity: 0.8; }
.cw-editor           { display: flex; min-height: 300px; max-height: 380px; overflow-y: auto; }
.cw-gutter           { padding: 14px 10px 14px 12px; text-align: right; font-family: var(--font-m); font-size: 0.74rem; color: var(--text-muted); opacity: 0.35; user-select: none; min-width: 38px; border-right: 1px solid var(--border); line-height: 1.75; flex-shrink: 0; }
.cw-gutter div       { min-height: 1.75em; }
.cw-code             { padding: 14px 18px; flex: 1; font-family: var(--font-m); font-size: 0.78rem; line-height: 1.75; color: var(--text); overflow-x: auto; }
.cw-line             { display: block; min-height: 1.75em; white-space: pre; opacity: 0; transition: opacity 0.08s ease; }
.cw-line.shown       { opacity: 1; }
.cw-terminal-wrap    { border-top: 1px solid var(--border); background: var(--bg); }
.cw-term-bar         { display: flex; align-items: center; gap: 7px; padding: 6px 14px 5px; border-bottom: 1px solid var(--border); }
.cw-term-label       { font-family: var(--font-m); font-size: 9px; letter-spacing: 0.15em; color: var(--text-muted); }
.cw-term-cwd         { font-family: var(--font-m); font-size: 9px; color: var(--text-muted); opacity: 0.4; margin-left: auto; }
.cw-term-body        { padding: 10px 14px 14px; font-family: var(--font-m); font-size: 0.75rem; line-height: 1.85; min-height: 76px; }
.cw-tl               { display: block; opacity: 0; transition: opacity 0.15s; }
.cw-tl.shown         { opacity: 1; }
.syn-kw  { color: var(--accent); }
.syn-str { color: #f59e0b; }
.syn-cmt { color: var(--text-muted); opacity: 0.55; font-style: italic; }
.syn-cls { color: #22d3ee; }
.syn-num { color: #c084fc; }
.syn-op  { color: var(--text-muted); }
.syn-ok  { color: #22c55e; }
@media (max-width: 600px) { .cw-tab { padding: 4px 10px 3px; font-size: 0.68rem; } .cw-term-cwd { display: none; } }

/* ─────────────────────────────────────────────────────────────────
   MODULE: SYSTEM DIAGNOSTICS PANEL
───────────────────────────────────────────────────────────────── */
.diag-panel { margin-top: 14px; }
.diag-grid  { display: flex; flex-direction: column; gap: 8px; }
.diag-item  { display: flex; align-items: center; gap: 10px; }
.diag-label { font-family: var(--font-m); font-size: 8px; letter-spacing: 0.15em; color: var(--text-muted); min-width: 72px; text-transform: uppercase; }
.diag-bar   { flex: 1; height: 6px; background: var(--surface2); border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); }
.diag-fill  { height: 100%; background: var(--accent); transition: width 0.6s ease; box-shadow: var(--glow); }
.diag-pct   { font-family: var(--font-m); font-size: 9px; color: var(--accent); min-width: 32px; text-align: right; }

/* ─────────────────────────────────────────────────────────────────
   MODULE: COORDINATE VECTOR GRID
───────────────────────────────────────────────────────────────── */
.coord-panel { margin-top: 14px; }
.coord-grid  { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.coord-cell  { display: flex; align-items: center; justify-content: space-between; padding: 6px 10px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.coord-lbl   { font-family: var(--font-m); font-size: 8px; letter-spacing: 0.15em; color: var(--text-muted); }
.coord-val   { font-family: var(--font-m); font-size: 11px; color: var(--accent); }
@media (max-width: 480px) { .coord-grid { grid-template-columns: repeat(2, 1fr); } }

/* ─────────────────────────────────────────────────────────────────
   MODULE: AUTH MODALS
───────────────────────────────────────────────────────────────── */
.auth-overlay { position:fixed;inset:0;background:rgba(0,0,0,0.8);backdrop-filter:blur(8px);z-index:9999;display:flex;align-items:center;justify-content:center;padding:20px; }
.auth-modal { max-width:380px;width:100%;padding:36px;position:relative; }
.auth-close { position:absolute;top:12px;right:16px;background:none;border:none;color:var(--text-muted);font-size:1.4rem;cursor:pointer;font-family:var(--font-m); }
.auth-close:hover { color:var(--accent); }

/* ─────────────────────────────────────────────────────────────────
   MODULE: FLEET DASHBOARD
───────────────────────────────────────────────────────────────── */
.fleet-header { display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;margin-bottom:32px; }
.fleet-header h1 { font-family:var(--font-d);font-size:clamp(1.2rem,3vw,1.6rem);margin:0; }
.fleet-stats { display:flex;gap:24px;flex-wrap:wrap;margin-bottom:32px; }
.fleet-stat { padding:16px 24px; }
.fleet-stat .stat-val { font-family:var(--font-d);font-size:1.4rem;display:block;margin-bottom:4px; }
.fleet-stat .stat-label { font-family:var(--font-m);font-size:9px;letter-spacing:0.15em;text-transform:uppercase;color:var(--text-muted); }
.fleet-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:20px; }
.fleet-card { padding:24px;position:relative; }
.fleet-card-header { display:flex;align-items:center;justify-content:space-between;margin-bottom:16px; }
.fleet-card-name { font-family:var(--font-d);font-size:0.95rem;background:none;border:none;color:var(--text);padding:0;outline:none;cursor:text;max-width:200px; }
.fleet-card-name:focus { border-bottom:1px solid var(--accent); }
.fleet-card-chassis { font-family:var(--font-m);font-size:10px;letter-spacing:0.12em;text-transform:uppercase;color:var(--accent);padding:3px 8px;border:1px solid var(--border);border-radius:var(--radius); }
.fleet-card-stats { display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:20px; }
.fleet-card-stat { text-align:center;padding:10px 8px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius); }
.fleet-card-stat span:first-child { font-family:var(--font-d);font-size:1.1rem;display:block;color:var(--accent); }
.fleet-card-stat span:last-child { font-family:var(--font-m);font-size:8px;letter-spacing:0.1em;text-transform:uppercase;color:var(--text-muted);display:block;margin-top:4px; }
.fleet-card-actions { display:flex;gap:8px; }
.fleet-card-actions .btn { flex:1;justify-content:center;font-size:9px;padding:8px 12px; }
.fleet-empty { text-align:center;padding:60px 20px; }
.fleet-empty p { color:var(--text-muted);font-size:0.9rem;margin-bottom:20px; }

/* ═══════════════════════════════════════════════════════════════════
   MODULE: ATM™ APP SHELL — fleet.html
═══════════════════════════════════════════════════════════════════ */

/* App Header */
.atm-hdr { position:fixed;top:0;left:0;right:0;height:52px;background:var(--nav-bg);border-bottom:var(--border-width) solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 20px;z-index:200;gap:12px; }
.atm-hdr-l,.atm-hdr-r { display:flex;align-items:center;gap:12px; }
.atm-brand { font-family:var(--font-d);font-size:.85rem;font-weight:700;color:var(--accent);letter-spacing:.12em; }
.atm-sep { width:1px;height:18px;background:var(--border);flex-shrink:0; }
.atm-chip { font-family:var(--font-m);font-size:.55rem;letter-spacing:.14em;color:var(--text-muted);text-transform:uppercase; }
.atm-proj { font-family:var(--font-d);font-size:.78rem;color:var(--text); }
.atm-ind { display:flex;align-items:center;gap:6px;font-family:var(--font-m);font-size:.68rem;color:var(--text-muted); }
.btn-sm { font-size:.62rem;padding:5px 12px; }

/* Toolbar */
.atm-tb { position:fixed;top:52px;left:0;right:0;height:40px;background:var(--bg2);border-bottom:var(--border-width) solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 20px;z-index:199;gap:12px; }
.atm-tb-l,.atm-tb-r { display:flex;align-items:center;gap:4px; }
.tbtn { background:none;border:none;border-bottom:2px solid transparent;color:var(--text-muted);font-family:var(--font-m);font-size:.65rem;letter-spacing:.08em;padding:0 12px;height:40px;cursor:pointer;transition:color .2s,border-color .2s;text-transform:uppercase; }
.tbtn.active,.tbtn:hover { color:var(--accent);border-color:var(--accent); }

/* App Body */
.atm-body { margin-top:92px;display:grid;grid-template-columns:260px 1fr;height:calc(100vh - 92px);overflow:hidden; }
.atm-sidebar { border-right:var(--border-width) solid var(--border);overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:12px; }
.atm-main { overflow-y:auto;padding:20px; }

/* Status Dots */
.dot { display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--text-dim);flex-shrink:0; }
.dot-g { background:#22c55e; }
.dot-r { background:#ef4444; }
.dot-a { background:#f59e0b; }
.dot-pulse { animation:dpulse 2s ease-in-out infinite; }
@keyframes dpulse { 0%,100%{opacity:1} 50%{opacity:.3} }

/* Sidebar panels */
.side-panel { padding:14px;border:var(--border-width) solid var(--border);border-radius:var(--radius); }
.side-lbl { font-family:var(--font-m);font-size:.56rem;letter-spacing:.14em;color:var(--text-muted);text-transform:uppercase;margin-bottom:10px;display:flex;align-items:center;gap:6px; }
.live-badge { background:var(--accent);color:var(--bg);font-size:.46rem;padding:1px 4px;letter-spacing:.1em;animation:blink 1.4s step-end infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }

/* Mission Ring */
.m-ring-wrap { position:relative;width:108px;height:108px;margin:0 auto 12px; }
.m-ring-svg { width:100%;height:100%;transform:rotate(-90deg); }
.m-ring-bg { fill:none;stroke:var(--border);stroke-width:8; }
.m-ring-fill { fill:none;stroke:var(--accent);stroke-width:8;stroke-linecap:round;stroke-dasharray:263.9;stroke-dashoffset:263.9;transition:stroke-dashoffset 1.2s cubic-bezier(.4,0,.2,1); }
.m-ring-center { position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;pointer-events:none; }
.m-ring-pct { font-family:var(--font-d);font-size:1.1rem;font-weight:700;color:var(--text);line-height:1; }
.m-ring-lbl { font-family:var(--font-m);font-size:.48rem;letter-spacing:.1em;color:var(--text-muted); }
.m-stats { display:flex;justify-content:space-around;border-top:var(--border-width) solid var(--border);padding-top:10px; }
.mst { display:flex;flex-direction:column;align-items:center;gap:3px; }
.mst-n { font-family:var(--font-d);font-size:1.05rem;color:var(--text); }
.mst-k { font-family:var(--font-m);font-size:.5rem;letter-spacing:.1em;color:var(--text-muted); }

/* Velocity Graph */
.vel-graph { width:100%;display:block; }

/* Mission Log */
.atm-log { max-height:180px;overflow-y:auto;display:flex;flex-direction:column;gap:3px; }
.log-row { display:flex;gap:8px;font-family:var(--font-m);font-size:.58rem;padding:2px 0;border-bottom:1px solid var(--border); }
.log-ts { color:var(--text-dim);flex-shrink:0; }
.log-src { color:var(--accent2);flex-shrink:0; }
.log-msg { flex:1;color:var(--text-muted); }

/* Empty State */
.atm-empty { display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:64px 24px;gap:14px; }
.atm-empty-svg { width:72px;height:72px;opacity:.2;color:var(--accent); }
.atm-empty h2 { font-family:var(--font-d);font-size:1.25rem;color:var(--text);margin:0; }
.atm-empty p { color:var(--text-muted);font-size:.88rem;margin:0;max-width:300px;line-height:1.65; }
.atm-empty-acts { display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:4px; }

/* Agent Grid */
.agent-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px; }

/* Agent Card */
.ac { background:var(--panel-bg);border:var(--border-width) solid var(--border);border-radius:var(--radius);padding:18px;display:flex;flex-direction:column;gap:14px;transition:border-color .2s; }
.ac:hover { border-color:var(--border-hi); }
.ac-hd { display:flex;align-items:flex-start;justify-content:space-between; }
.ac-id { display:flex;align-items:center;gap:8px; }
.ac-name { font-family:var(--font-d);font-size:.8rem;font-weight:700;color:var(--text);letter-spacing:.04em; }
.ac-role { font-family:var(--font-m);font-size:.56rem;color:var(--text-muted);letter-spacing:.1em;margin-top:2px;text-transform:uppercase; }
.ac-acts { display:flex;gap:4px;opacity:0;transition:opacity .2s; }
.ac:hover .ac-acts { opacity:1; }
.c-btn { background:none;border:var(--border-width) solid var(--border);color:var(--text-muted);font-family:var(--font-m);font-size:.56rem;padding:3px 7px;border-radius:var(--radius);cursor:pointer;transition:color .2s,border-color .2s; }
.c-btn:hover { color:var(--accent);border-color:var(--accent); }
.c-btn-del:hover { color:#ef4444;border-color:#ef4444; }

/* Agent Ring + Stats */
.ac-body { display:flex;gap:14px;align-items:center; }
.ac-ring-wrap { position:relative;width:60px;height:60px;flex-shrink:0; }
.ac-ring-svg { width:60px;height:60px;transform:rotate(-90deg); }
.ac-ring-bg { fill:none;stroke:var(--border);stroke-width:7; }
.ac-ring-fill { fill:none;stroke:var(--accent);stroke-width:7;stroke-linecap:round;stroke-dasharray:138.23;stroke-dashoffset:138.23;transition:stroke-dashoffset 1s ease; }
.ac-ring-center { position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-family:var(--font-d);font-size:.62rem;font-weight:700;color:var(--text);pointer-events:none; }
.ac-stats { flex:1;display:grid;grid-template-columns:repeat(3,1fr);gap:6px; }
.ac-stat { display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 4px;background:var(--surface);border:var(--border-width) solid var(--border);border-radius:var(--radius); }
.ac-stat-n { font-family:var(--font-d);font-size:.88rem;color:var(--accent); }
.ac-stat-k { font-family:var(--font-m);font-size:.48rem;letter-spacing:.08em;color:var(--text-muted); }

/* Task List */
.ac-tasks { border-top:var(--border-width) solid var(--border);padding-top:12px;display:flex;flex-direction:column;gap:5px; }
.task-row { display:flex;align-items:center;gap:7px;font-family:var(--font-b);font-size:.7rem;color:var(--text-muted); }
.task-row.t-active { color:var(--text); }
.task-row.t-done { opacity:.38;text-decoration:line-through; }
.task-d { width:6px;height:6px;border-radius:50%;background:var(--border);flex-shrink:0; }
.task-row.t-active .task-d { background:#22c55e; }
.task-row.t-done .task-d { background:var(--text-dim); }
.task-row.t-error .task-d { background:#ef4444; }
.task-more { font-family:var(--font-m);font-size:.56rem;color:var(--text-dim);padding-left:13px; }
.ac-desc { font-family:var(--font-b);font-size:.66rem;color:var(--text-dim);font-style:italic;margin-top:2px; }
.add-task-btn { background:none;border:var(--border-width) dashed var(--border);color:var(--text-dim);font-family:var(--font-m);font-size:.56rem;padding:4px 8px;border-radius:var(--radius);cursor:pointer;transition:all .2s;letter-spacing:.08em;margin-top:4px;display:inline-block; }
.add-task-btn:hover { border-style:solid;border-color:var(--accent);color:var(--accent); }

/* Modals */
.m-ov { display:none;position:fixed;inset:0;background:rgba(0,0,0,.78);z-index:9000;align-items:center;justify-content:center;padding:20px; }
.m-ov.open { display:flex; }
.m-box { background:var(--bg2);border:var(--border-width) solid var(--border-hi);border-radius:var(--radius);width:100%;max-width:440px;max-height:88vh;overflow-y:auto; }
.m-box-wide { max-width:680px; }
.m-hd { display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:var(--border-width) solid var(--border);font-family:var(--font-d);font-size:.72rem;letter-spacing:.1em;color:var(--text); }
.m-x { background:none;border:none;color:var(--text-muted);font-size:1.05rem;cursor:pointer;padding:0;line-height:1; }
.m-x:hover { color:var(--text); }
.m-bd { padding:18px; }
.m-ft { display:flex;justify-content:flex-end;gap:10px;padding:12px 18px;border-top:var(--border-width) solid var(--border); }
.m-hint { color:var(--text-muted);font-size:.78rem;margin-bottom:14px;line-height:1.6; }
.m-tabs { display:flex;border-bottom:var(--border-width) solid var(--border);padding:0 18px; }
.mtab { background:none;border:none;border-bottom:2px solid transparent;color:var(--text-muted);font-family:var(--font-m);font-size:.65rem;letter-spacing:.08em;padding:10px 14px;cursor:pointer;transition:color .2s,border-color .2s;margin-bottom:-1px; }
.mtab.active,.mtab:hover { color:var(--accent);border-color:var(--accent); }
.m-tab-pane { display:none; }
.m-tab-pane.active { display:block; }

/* Forms */
.fgrp { margin-bottom:14px; }
.fgrp label { display:block;font-family:var(--font-m);font-size:.6rem;letter-spacing:.1em;color:var(--text-muted);margin-bottom:5px;text-transform:uppercase; }
.fhint { font-size:.54rem;color:var(--text-dim);font-family:var(--font-m);margin-left:6px;text-transform:none;letter-spacing:0; }
textarea.contact-input { resize:vertical;min-height:72px; }
select.contact-input { appearance:none;cursor:pointer; }

/* LLM Grid */
.llm-grid { display:grid;grid-template-columns:repeat(2,1fr);gap:10px; }
.llm-opt { background:var(--surface);border:var(--border-width) solid var(--border);border-radius:var(--radius);padding:14px;cursor:pointer;text-align:left;display:flex;flex-direction:column;gap:3px;transition:border-color .2s,background .2s; }
.llm-opt:hover,.llm-opt.sel { border-color:var(--accent);background:var(--panel-bg); }
.llm-abbr { font-family:var(--font-d);font-size:.76rem;color:var(--accent);letter-spacing:.06em; }
.llm-nm { font-family:var(--font-b);font-size:.8rem;color:var(--text);font-weight:500; }
.llm-pv { font-family:var(--font-m);font-size:.56rem;color:var(--text-muted); }
.llm-ok { display:flex;align-items:center;gap:6px;color:#22c55e;font-family:var(--font-m);font-size:.7rem;padding:6px 0; }

/* Blueprint Grid */
.bp-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(175px,1fr));gap:10px;margin-top:10px; }
.bp-card { background:var(--surface);border:var(--border-width) solid var(--border);border-radius:var(--radius);padding:14px;display:flex;flex-direction:column;gap:6px;transition:border-color .2s; }
.bp-card:hover { border-color:var(--accent); }
.bp-ico { font-size:1.25rem;display:block; }
.bp-name { font-family:var(--font-d);font-size:.7rem;color:var(--text); }
.bp-desc { font-family:var(--font-b);font-size:.68rem;color:var(--text-muted);line-height:1.5; }
.bp-tags { display:flex;flex-wrap:wrap;gap:4px;margin-top:2px; }
.bp-tag { font-family:var(--font-m);font-size:.5rem;color:var(--text-dim);border:var(--border-width) solid var(--border);border-radius:2px;padding:1px 5px; }
.bp-deploy { width:100%;margin-top:8px;font-size:.6rem;padding:6px; }

/* Responsive */
@media (max-width:768px) {
  .atm-body { grid-template-columns:1fr; }
  .atm-sidebar { display:none; }
  .atm-tb-l { overflow-x:auto;gap:0; }
  .atm-tb-r .btn:not(.btn-solid) { display:none; }
  .llm-grid { grid-template-columns:1fr; }
  .bp-grid { grid-template-columns:repeat(2,1fr); }
  .agent-grid { grid-template-columns:1fr; }
}

/* ═══════════════════════════════════════════════════════════════
   DEMO CTA STRIP
════════════════════════════════════════════════════════════════ */
.demo-strip { padding:64px 0; background:var(--bg-alt); border-top:var(--border-width) solid var(--border); border-bottom:var(--border-width) solid var(--border); }
.demo-strip-inner { display:flex; align-items:center; gap:52px; }
.demo-strip-viz { flex-shrink:0; width:160px; height:160px; position:relative; }
.dcs-svg { width:100%; height:100%; overflow:visible; }
.dcs-outer-g { transform-origin:80px 80px; animation:dcs-cw 9s linear infinite; }
.dcs-inner-g { transform-origin:80px 80px; animation:dcs-ccw 6s linear infinite; }
@keyframes dcs-cw { to { transform:rotate(360deg); } }
@keyframes dcs-ccw { to { transform:rotate(-360deg); } }
.demo-strip-copy { flex:1; }
.dcs-eyebrow { font-family:var(--font-m); font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); margin-bottom:10px; }
.dcs-title { font-family:var(--font-d); font-size:clamp(1.15rem,2.5vw,1.65rem); font-weight:700; color:var(--text); line-height:1.25; margin-bottom:12px; }
.dcs-desc { font-size:.86rem; line-height:1.7; color:var(--text-muted); margin-bottom:20px; max-width:480px; }
.dcs-btns { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:16px; }
.dcs-tags { display:flex; gap:8px; flex-wrap:wrap; }
.dcs-tag { font-family:var(--font-m); font-size:8px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-dim); border:var(--border-width) solid var(--border); padding:3px 10px; border-radius:20px; }

/* ═══════════════════════════════════════════════════════════════
   HOW IT WORKS
════════════════════════════════════════════════════════════════ */
.hiw-flow { display:grid; grid-template-columns:1fr 64px 1fr 64px 1fr; align-items:start; gap:0; margin-top:48px; }
.hiw-step { display:flex; flex-direction:column; align-items:center; text-align:center; gap:12px; padding:0 8px; }
.hiw-icon-wrap { position:relative; width:72px; height:72px; display:flex; align-items:center; justify-content:center; }
.hiw-icon-bg { position:absolute; inset:0; background:var(--surface); border:var(--border-width) solid var(--border); border-radius:50%; }
.hiw-ring { position:absolute; inset:-8px; border-radius:50%; border:1px dashed var(--accent); opacity:.35; animation:hiw-spin-cw 7s linear infinite; }
.hiw-ring-2 { position:absolute; inset:-16px; border-radius:50%; border:1px dashed var(--border-hi); opacity:.18; animation:hiw-spin-ccw 12s linear infinite; }
@keyframes hiw-spin-cw { to { transform:rotate(360deg); } }
@keyframes hiw-spin-ccw { to { transform:rotate(-360deg); } }
.hiw-icon-inner { position:relative; z-index:1; color:var(--accent); }
.hiw-num { font-family:var(--font-m); font-size:8px; letter-spacing:.14em; color:var(--accent); text-transform:uppercase; }
.hiw-step-title { font-family:var(--font-d); font-size:.88rem; font-weight:700; color:var(--text); }
.hiw-step-desc { font-size:.76rem; line-height:1.65; color:var(--text-muted); }
.hiw-arrow { display:flex; align-items:center; justify-content:center; padding-top:28px; }
.hiw-arr-svg { width:48px; height:14px; overflow:visible; }
.hiw-arr-line { stroke-dasharray:5 4; stroke-dashoffset:0; animation:hiw-dash 1s linear infinite; }
@keyframes hiw-dash { to { stroke-dashoffset:-9; } }

/* ═══════════════════════════════════════════════════════════════
   INDUSTRY GRID
════════════════════════════════════════════════════════════════ */
.industry-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(195px,1fr)); gap:12px; margin-top:36px; }
/* Blueprint stat pills */
.bp-stat-pill { display:inline-flex; align-items:center; gap:10px; border:1px solid var(--border); padding:8px 8px 8px 18px; font-family:var(--font-m); font-size:0.78rem; letter-spacing:.06em; color:var(--text-muted); }
.bp-stat-count { background:var(--accent); color:var(--bg); padding:3px 11px; border-radius:20px; font-family:var(--font-h); font-size:0.75rem; font-weight:700; min-width:28px; text-align:center; line-height:1.5; }

.ic { background:var(--panel-bg); border:var(--border-width) solid var(--border); border-radius:var(--radius); padding:22px 18px; display:flex; flex-direction:column; gap:8px; transition:border-color .2s,box-shadow .2s,transform .18s; color:inherit; text-decoration:none; }
.ic:hover { border-color:var(--accent); box-shadow:var(--glow); transform:translateY(-2px); }
.ic-icon { width:38px; height:38px; background:var(--surface); border:var(--border-width) solid var(--border); border-radius:var(--radius); display:flex; align-items:center; justify-content:center; color:var(--accent); }
.ic-name { font-family:var(--font-d); font-size:.8rem; font-weight:700; color:var(--text); }
.ic-agents { font-family:var(--font-m); font-size:8px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-dim); }
.ic-desc { font-size:.72rem; line-height:1.55; color:var(--text-muted); }

/* ═══════════════════════════════════════════════════════════════
   PROOF NUMBERS
════════════════════════════════════════════════════════════════ */
.proof-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--border); border:var(--border-width) solid var(--border); border-radius:var(--radius); overflow:hidden; margin-top:48px; }
.proof-item { background:var(--panel-bg); padding:32px 20px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:6px; }
.proof-num { font-family:var(--font-d); font-size:clamp(1.8rem,4vw,2.7rem); font-weight:900; color:var(--accent); line-height:1; }
.proof-suf { font-size:.55em; vertical-align:super; }
.proof-label { font-family:var(--font-m); font-size:9px; letter-spacing:.12em; text-transform:uppercase; color:var(--text-muted); margin-top:2px; }

/* ═══════════════════════════════════════════════════════════════
   DEMO PREVIEW PANEL
════════════════════════════════════════════════════════════════ */
.dp-wrap { display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.dp-copy { display:flex; flex-direction:column; gap:18px; }
.dp-features { display:flex; flex-direction:column; gap:12px; }
.dp-feature { display:flex; align-items:flex-start; gap:12px; }
.dp-feature-icon { width:32px; height:32px; flex-shrink:0; background:var(--surface); border:var(--border-width) solid var(--border); border-radius:var(--radius); display:flex; align-items:center; justify-content:center; color:var(--accent); margin-top:2px; }
.dp-feature-text h4 { font-family:var(--font-d); font-size:.82rem; font-weight:700; color:var(--text); margin-bottom:3px; }
.dp-feature-text p { font-size:.74rem; line-height:1.55; color:var(--text-muted); }
.demo-screen-wrap { position:relative; }
.demo-screen-link { display:block; text-decoration:none; }
.demo-screen { background:var(--bg2,var(--bg)); border:var(--border-width) solid var(--border-hi); border-radius:calc(var(--radius) + 2px); overflow:hidden; box-shadow:var(--glow-hi); transition:box-shadow .25s; }
.demo-screen-link:hover .demo-screen { box-shadow:var(--glow-hi),0 0 48px rgba(255,255,255,.04); }
.demo-chrome { background:var(--surface); border-bottom:1px solid var(--border); padding:8px 12px; display:flex; align-items:center; gap:8px; }
.demo-chrome-dots { display:flex; gap:4px; }
.demo-chrome-dots span { width:7px; height:7px; border-radius:50%; background:var(--border); }
.demo-chrome-dots span:nth-child(1) { background:#ef4444; }
.demo-chrome-dots span:nth-child(2) { background:#f59e0b; }
.demo-chrome-dots span:nth-child(3) { background:#22c55e; }
.demo-url { flex:1; font-family:var(--font-m); font-size:0.62rem; color:var(--text-muted); letter-spacing:.03em; }
.demo-body { padding:10px 12px; display:flex; flex-direction:column; gap:4px; }
.demo-hdr { display:flex; align-items:center; justify-content:space-between; padding:2px 0 8px; border-bottom:1px solid var(--border); margin-bottom:4px; }
.demo-agents { display:flex; flex-direction:column; gap:0; }
.demo-agent { display:flex; align-items:center; gap:8px; padding:5px 0; border-bottom:1px solid var(--border); font-family:var(--font-m); font-size:0.65rem; color:var(--text-muted); }
.demo-agent:last-child { border-bottom:none; }
.demo-ring { width:26px; height:26px; flex-shrink:0; }
.demo-ring svg { width:100%; height:100%; display:block; }
.demo-pct { font-size:0.6rem; color:var(--text-muted); margin-left:auto; }
.demo-scanline { position:absolute; left:0; right:0; height:2px; background:linear-gradient(90deg,transparent,var(--accent),transparent); opacity:.2; animation:ds-scan 3.5s ease-in-out infinite; pointer-events:none; top:30px; }

/* ── MOBILE DEVICE MOCKUP ── */
.mob-wrap { display:flex; align-items:center; justify-content:center; gap:0; position:relative; }
.mob-side-l, .mob-side-r { display:flex; flex-direction:column; gap:8px; padding:20px 0; }
.mob-side-l { margin-right:-1px; }
.mob-side-r { margin-left:-1px; }
.mob-btn { width:3px; height:24px; background:var(--border-hi); border-radius:2px 0 0 2px; }
.mob-btn-lg { height:38px; border-radius:0 2px 2px 0; background:var(--border-hi); }
.mob-frame { width:220px; background:var(--panel-bg); border:2px solid var(--border-hi); border-radius:36px; position:relative; box-shadow:var(--glow-hi), 0 24px 64px rgba(0,0,0,.55); overflow:hidden; }
.mob-di { width:72px; height:22px; background:var(--panel-bg); border-bottom:1.5px solid var(--border); border-radius:0 0 14px 14px; margin:0 auto; position:relative; z-index:2; display:flex; align-items:center; justify-content:center; }
.mob-di::after { content:''; width:10px; height:10px; border-radius:50%; border:1.5px solid var(--border); }
.mob-screen { background:var(--bg); display:flex; flex-direction:column; min-height:460px; }
.mob-status-bar { display:flex; justify-content:space-between; align-items:center; padding:6px 16px 3px; font-family:var(--font-m); font-size:0.5rem; color:var(--text-muted); }
.mob-status-icons { display:flex; align-items:center; gap:5px; color:var(--text-muted); }
.mob-app-hdr { display:flex; justify-content:space-between; align-items:center; padding:8px 14px; border-bottom:1px solid var(--border); }
.mob-app-title { font-family:var(--font-h); font-size:0.82rem; color:var(--text); letter-spacing:.04em; }
.mob-live-badge { display:flex; align-items:center; gap:5px; font-family:var(--font-m); font-size:0.42rem; letter-spacing:.15em; color:#22c55e; border:1px solid rgba(34,197,94,.35); padding:2px 8px; }
.mob-live-dot { width:5px; height:5px; border-radius:50%; background:#22c55e; animation:mob-pulse 1.8s ease-in-out infinite; }
@keyframes mob-pulse { 0%,100%{opacity:1;} 50%{opacity:.3;} }
.mob-section-lbl { padding:8px 14px 3px; font-family:var(--font-m); font-size:0.45rem; letter-spacing:.1em; color:var(--text-muted); }
.mob-agents { padding:0 14px; }
.mob-agent-row { display:flex; align-items:center; gap:8px; padding:7px 0; border-bottom:1px solid var(--border); }
.mob-agent-row:last-child { border-bottom:none; }
.mob-agent-dot { width:6px; height:6px; border-radius:50%; flex-shrink:0; }
.mob-dot-active { background:var(--accent); box-shadow:0 0 6px var(--accent); }
.mob-dot-idle   { background:var(--accent); opacity:.5; }
.mob-dot-dim    { background:var(--text-muted); opacity:.35; }
.mob-agent-info { flex:1; display:flex; flex-direction:column; gap:4px; min-width:0; }
.mob-agent-name { font-family:var(--font-m); font-size:0.52rem; letter-spacing:.08em; color:var(--text); }
.mob-agent-bar { height:3px; background:var(--border); border-radius:2px; overflow:hidden; }
.mob-agent-fill { height:100%; background:var(--accent); border-radius:2px; }
.mob-agent-pct { font-family:var(--font-m); font-size:0.47rem; color:var(--text-muted); flex-shrink:0; min-width:22px; text-align:right; }
.mob-metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--border); margin:10px 14px; border:1px solid var(--border); }
.mob-metric { background:var(--panel-bg); padding:8px 4px; text-align:center; display:flex; flex-direction:column; gap:2px; }
.mob-metric-val { font-family:var(--font-h); font-size:0.65rem; color:var(--accent); line-height:1; }
.mob-metric-lbl { font-family:var(--font-m); font-size:0.38rem; letter-spacing:.08em; color:var(--text-muted); }
.mob-tab-bar { display:flex; border-top:1px solid var(--border); margin-top:auto; }
.mob-tab { flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; padding:8px 2px 6px; color:var(--text-muted); font-family:var(--font-m); font-size:0.38rem; letter-spacing:.06em; }
.mob-tab-active { color:var(--accent); border-top:1.5px solid var(--accent); margin-top:-1px; }
.mob-home-ind { width:56px; height:3px; background:var(--border-hi); border-radius:2px; margin:6px auto 10px; opacity:.6; }
.mob-scanline { position:absolute; left:0; right:0; height:2px; background:linear-gradient(90deg,transparent,var(--accent),transparent); opacity:.15; animation:ds-scan 4s ease-in-out infinite; pointer-events:none; top:40px; }

.ds-chrome { background:var(--surface); border-bottom:var(--border-width) solid var(--border); padding:9px 14px; display:flex; align-items:center; gap:7px; }
.ds-dot { width:8px; height:8px; border-radius:50%; }
.ds-url { flex:1; background:var(--bg); border:var(--border-width) solid var(--border); border-radius:4px; padding:3px 10px; font-family:var(--font-m); font-size:8px; color:var(--text-dim); letter-spacing:.04em; }
.ds-body { padding:12px; display:flex; flex-direction:column; gap:5px; }
.ds-hdr { display:flex; align-items:center; justify-content:space-between; padding:4px 0 10px; border-bottom:var(--border-width) solid var(--border); margin-bottom:4px; }
.ds-hdr-title { font-family:var(--font-d); font-size:.6rem; color:var(--text); }
.ds-hdr-badge { font-family:var(--font-m); font-size:7px; letter-spacing:.1em; color:#22c55e; border:1px solid rgba(34,197,94,.3); padding:2px 7px; border-radius:20px; }
.ds-row { display:grid; grid-template-columns:26px 1fr 58px 26px; align-items:center; gap:8px; padding:5px 4px; border-radius:4px; }
.ds-row-ring { width:22px; height:22px; }
.ds-row-info { display:flex; flex-direction:column; gap:1px; }
.ds-row-name { font-family:var(--font-d); font-size:.58rem; color:var(--text); }
.ds-row-chip { font-family:var(--font-m); font-size:7px; letter-spacing:.07em; color:var(--text-dim); }
.ds-row-bar { height:4px; background:var(--surface); border-radius:2px; overflow:hidden; }
.ds-row-fill { height:100%; border-radius:2px; }
.ds-row-pct { font-family:var(--font-m); font-size:8px; color:var(--text-muted); text-align:right; }
.ds-scan-line { position:absolute; left:0; right:0; height:2px; background:linear-gradient(90deg,transparent,var(--accent),transparent); opacity:.2; animation:ds-scan 3.5s ease-in-out infinite; pointer-events:none; top:30px; }
@keyframes ds-scan { 0%,100% { top:28px; opacity:.08; } 50% { top:calc(100% - 28px); opacity:.28; } }

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE — NEW SECTIONS
════════════════════════════════════════════════════════════════ */
@media (max-width:900px) {
  .demo-strip-inner { flex-direction:column; text-align:center; }
  .dcs-desc { margin-left:auto; margin-right:auto; }
  .dcs-btns { justify-content:center; }
  .dcs-tags { justify-content:center; }
  .hiw-flow { grid-template-columns:1fr; gap:20px; }
  .hiw-arrow { transform:rotate(90deg); padding-top:0; }
  .dp-wrap { grid-template-columns:1fr; }
  .proof-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:600px) {
  .industry-grid { grid-template-columns:repeat(2,1fr); }
  .proof-grid { grid-template-columns:1fr; }
}

/* ═══════════════════════════════════════════════════════════════
   HERO NETWORK SVG
════════════════════════════════════════════════════════════════ */
.hero-net { position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; opacity:.55; }
.hero-net svg { width:100%; height:100%; }

/* ═══════════════════════════════════════════════════════════════
   PROOF ARC RINGS
════════════════════════════════════════════════════════════════ */
.proof-item { position:relative; }
.proof-arc-svg { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; overflow:visible; }
.proof-arc-1 { animation:proof-arc-spin 10s linear infinite; transform-origin:50% 50%; }
.proof-arc-2 { animation:proof-arc-spin 16s linear infinite reverse; transform-origin:50% 50%; }
@keyframes proof-arc-spin { to { transform:rotate(360deg); } }

/* ═══════════════════════════════════════════════════════════════
   DEMO TAB PANELS — AGENTS / TASKS / LOGS
════════════════════════════════════════════════════════════════ */
.ag-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(195px,1fr)); gap:12px; }
.ag-card { background:var(--panel-bg); border:var(--border-width) solid var(--border); border-radius:var(--radius); padding:18px; display:flex; flex-direction:column; gap:10px; transition:border-color .2s; }
.ag-card:hover { border-color:var(--border-hi); }
.ag-card-hd { display:flex; align-items:center; gap:10px; }
.ag-avatar { width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:var(--font-d); font-size:.7rem; font-weight:700; flex-shrink:0; }
.ag-info-name { font-family:var(--font-d); font-size:.85rem; font-weight:700; color:var(--text); }
.ag-info-role { font-family:var(--font-m); font-size:7px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-dim); margin-top:1px; }
.ag-uptime-bar { height:2px; background:var(--surface); border-radius:99px; }
.ag-uptime-fill { height:100%; border-radius:99px; }
.ag-meta { display:flex; justify-content:space-between; }
.ag-meta-item { display:flex; flex-direction:column; gap:2px; }
.ag-meta-k { font-family:var(--font-m); font-size:7px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-dim); }
.ag-meta-v { font-family:var(--font-d); font-size:.75rem; color:var(--text-muted); }
/* Task table */
.task-tbl { width:100%; border-collapse:collapse; }
.task-tbl th { font-family:var(--font-m); font-size:8px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-dim); padding:8px 12px; text-align:left; border-bottom:var(--border-width) solid var(--border); white-space:nowrap; }
.task-tbl td { padding:10px 12px; border-bottom:var(--border-width) solid var(--border); color:var(--text-muted); font-size:.74rem; vertical-align:middle; }
.task-tbl tr:last-child td { border-bottom:none; }
.task-tbl tr:hover td { background:var(--surface); }
.tbl-badge { display:inline-flex; align-items:center; gap:4px; padding:2px 8px; border-radius:20px; font-family:var(--font-m); font-size:7px; letter-spacing:.1em; text-transform:uppercase; white-space:nowrap; }
.tbl-badge-run   { background:rgba(34,197,94,.12); color:#22c55e; border:1px solid rgba(34,197,94,.25); }
.tbl-badge-queue { background:rgba(234,179,8,.12); color:#eab308; border:1px solid rgba(234,179,8,.25); }
.tbl-badge-done  { background:rgba(148,163,184,.1); color:var(--text-dim); border:1px solid var(--border); }
.tbl-prio { font-family:var(--font-m); font-size:8px; letter-spacing:.08em; text-transform:uppercase; }
.tbl-prio-hi { color:#ef4444; }
.tbl-prio-md { color:#f59e0b; }
.tbl-prio-lo { color:var(--text-dim); }
.tbl-bar-wrap { display:inline-block; width:64px; }
/* Logs view */
.log-view { padding:14px; }
.log-toolbar { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:12px; padding-bottom:10px; border-bottom:var(--border-width) solid var(--border); }
.log-filter-btn { background:none; border:var(--border-width) solid var(--border); color:var(--text-muted); font-family:var(--font-m); font-size:8px; letter-spacing:.08em; text-transform:uppercase; padding:4px 10px; border-radius:var(--radius); cursor:pointer; transition:all .18s; }
.log-filter-btn.act,.log-filter-btn:hover { border-color:var(--accent); color:var(--accent); }
.log-entry-full { display:grid; grid-template-columns:68px 56px 1fr; gap:10px; padding:8px 4px; border-bottom:var(--border-width) solid var(--border); align-items:baseline; }
.log-entry-full:last-child { border-bottom:none; }
.log-ts-f { font-family:var(--font-m); font-size:.58rem; color:var(--text-dim); letter-spacing:.04em; white-space:nowrap; }
.log-tag { font-family:var(--font-m); font-size:7px; letter-spacing:.08em; text-transform:uppercase; padding:2px 6px; border-radius:2px; display:inline-block; white-space:nowrap; }
.log-msg-f { font-family:var(--font-b); font-size:.72rem; color:var(--text-muted); line-height:1.45; }

/* ─────────────────────────────────────────────────────────────────
   MODULE: PAGE HERO BACKGROUNDS
───────────────────────────────────────────────────────────────── */

/* Shared container for all page hero SVG animations */
.page-hero-bg {
  position: absolute; inset: 0;
  pointer-events: none; z-index: 0; overflow: hidden;
  opacity: 0.45;
}
.page-hero-bg svg { width: 100%; height: 100%; }

/* ── SOLUTIONS: Building a Solution ── */
@keyframes sol-node-in  { from { opacity:0; transform:scale(0); } to { opacity:1; transform:scale(1); } }
@keyframes sol-edge-draw { to { stroke-dashoffset: 0; } }
@keyframes sol-pulse { 0%,100% { opacity:.4; } 50% { opacity:1; } }
@keyframes sol-bar { to { width: var(--tw); } }
.sol-node { transform-origin: center; animation: sol-node-in 0.5s ease forwards; opacity: 0; }
.sol-edge { stroke-dashoffset: var(--el); animation: sol-edge-draw 0.8s ease forwards; stroke-dasharray: var(--el); }
.sol-bar-fill { width: 0; animation: sol-bar 1.2s ease forwards; height: 100%; border-radius: 0; background: var(--accent); }
.sol-label { font-family: var(--font-m); font-size: 8px; letter-spacing: 0.12em; text-transform: uppercase; fill: var(--accent); opacity: 0.6; }
.sol-glow  { animation: sol-pulse 2.4s ease-in-out infinite; }

/* ── ATM: Agent Working ── */
@keyframes atm-bar-fill { to { width: var(--tw); } }
@keyframes atm-spark    { to { stroke-dashoffset: 0; } }
@keyframes atm-blink    { 0%,100% { opacity:.25; } 50% { opacity:.9; } }
@keyframes atm-count-up { from { opacity:.3; } to { opacity:.85; } }
.atm-bg-bar  { width: 0; animation: atm-bar-fill 1.4s ease forwards; height: 100%; background: var(--accent); }
.atm-bg-line { stroke-dashoffset: var(--el); stroke-dasharray: var(--el); animation: atm-spark 2s ease forwards; }
.atm-bg-cell { animation: atm-blink var(--dur,2s) var(--del,0s) ease-in-out infinite; opacity: .25; }
.atm-bg-lbl  { font-family: var(--font-m); font-size: 7px; letter-spacing: .1em; text-transform: uppercase; fill: var(--accent); opacity: .5; }

/* ── ACADEMY: Library & Learning ── */
@keyframes acad-book-in { from { opacity:0; transform:scaleY(0); } to { opacity:var(--op,.4); transform:scaleY(1); } }
@keyframes acad-scan    { 0% { transform:translateY(0); opacity:.7; } 90% { opacity:.7; } 100% { transform:translateY(240px); opacity:0; } }
@keyframes acad-arc     { to { stroke-dashoffset: 0; } }
@keyframes acad-pulse   { 0%,100% { opacity:.2; } 50% { opacity:.85; } }
.acad-book { transform-origin: bottom center; animation: acad-book-in 0.4s ease forwards; opacity: 0; }
.acad-scan-line { animation: acad-scan 4s linear infinite; }
.acad-arc  { stroke-dashoffset: var(--el); stroke-dasharray: var(--el); animation: acad-arc 1.5s ease forwards; }
.acad-active { animation: acad-pulse var(--dur,2s) var(--del,0s) ease-in-out infinite; }
.acad-lbl  { font-family: var(--font-m); font-size: 7px; letter-spacing: .1em; text-transform: uppercase; fill: var(--accent); opacity: .5; }

/* ── COMMUNICATIONS: High-Tech Comms ── */
@keyframes coms-ring-expand { 0% { r:20; opacity:.6; } 100% { r:260; opacity:0; } }
@keyframes coms-wave  { to { stroke-dashoffset: -600; } }
@keyframes coms-pulse { 0%,100% { opacity:.2; r:4; } 50% { opacity:.9; r:7; } }
@keyframes coms-tx    { 0%,100% { opacity:.3; } 50% { opacity:.9; } }
.coms-ring { animation: coms-ring-expand var(--dur,3s) var(--del,0s) ease-out infinite; }
.coms-wave { stroke-dasharray: 8 6; animation: coms-wave 3s linear infinite; }
.coms-node { animation: coms-pulse var(--dur,2s) var(--del,0s) ease-in-out infinite; }
.coms-lbl  { font-family: var(--font-m); font-size: 7px; letter-spacing: .12em; text-transform: uppercase; fill: var(--accent); }
.coms-tx   { animation: coms-tx 1.6s ease-in-out infinite; }

/* ═══════════════════════════════════════════════════════
   GLOBAL SVG ICON SYSTEM
═══════════════════════════════════════════════════════ */
.icon { display:inline-block; width:1em; height:1em; fill:none; stroke:currentColor; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; vertical-align:middle; flex-shrink:0; overflow:visible; }
.icon-sm  { width:.85em;  height:.85em;  }
.icon-lg  { width:1.25em; height:1.25em; }
.icon-xl  { width:2em;    height:2em;    }
.sec-icon { display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; min-width:34px; border:1px solid var(--border); background:var(--surface); border-radius:var(--radius); color:var(--accent); flex-shrink:0; }
.h-icon   { display:inline-flex; align-items:center; gap:12px; flex-wrap:wrap; }

/* ── BG Grid hidden on matrix + robotech ── */
[data-theme="matrix"]   .bg-grid,
[data-theme="robotech"] .bg-grid { opacity: 0 !important; }

/* ═══════════════════════════════════════════════════════
   SOLUTIONS: ATM→FLEET WORKFLOW DIAGRAM
═══════════════════════════════════════════════════════ */
.wf-diagram { display:grid; grid-template-columns:1fr auto 1fr auto 1fr; gap:0; align-items:stretch; margin:40px 0 36px; }
@media (max-width:768px) { .wf-diagram { grid-template-columns:1fr; } .wf-arrow { transform:rotate(90deg); margin:8px auto; } }
.wf-panel { border:1px solid var(--border); background:var(--panel-bg); padding:28px 24px; display:flex; flex-direction:column; gap:8px; }
.wf-panel-hd { display:flex; align-items:center; gap:10px; font-family:var(--font-h); font-size:0.88rem; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); margin-bottom:4px; font-weight:700; }
.wf-output-active { border-color:var(--border-hi); box-shadow:var(--glow); }
.wf-arrow  { display:flex; align-items:center; justify-content:center; padding:0 12px; color:var(--border-hi); }
.wf-arrow svg { width:32px; height:32px; }
.wf-steps  { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:0; }
.wf-step   { padding:9px 0; font-size:0.82rem; color:var(--text-muted); display:flex; align-items:center; gap:10px; border-bottom:1px solid var(--border); }
.wf-step:last-child { border-bottom:none; }
.wf-step::before { content:''; width:6px; height:6px; border-radius:50%; background:var(--border); flex-shrink:0; }
.wf-step.wf-active { color:var(--accent); }
.wf-step.wf-active::before { background:var(--accent); box-shadow:0 0 8px var(--accent); }
.bp-cta-strip { display:flex; align-items:center; justify-content:space-between; gap:24px; border:1px solid var(--border-hi); background:var(--panel-bg); padding:28px 32px; margin-top:4px; flex-wrap:wrap; }
.bp-cta-strip p { font-size:0.88rem; color:var(--text-muted); margin:4px 0 0; }
.bp-cta-label { font-family:var(--font-h); font-size:0.75rem; letter-spacing:.18em; text-transform:uppercase; color:var(--accent); margin-bottom:4px; }

/* ═══════════════════════════════════════════════════════
   BLUEPRINT LIBRARY PAGE
═══════════════════════════════════════════════════════ */
.bp-lib-tabs  { display:flex; gap:0; }
.bp-lib-tab   { display:flex; align-items:center; gap:7px; padding:12px 20px; border:1px solid var(--border); background:var(--surface); cursor:pointer; font-size:0.82rem; color:var(--text-muted); transition:all .15s; }
.bp-lib-tab + .bp-lib-tab { border-left:none; }
.bp-lib-tab.active { border-color:var(--accent); color:var(--accent); background:var(--panel-bg); z-index:1; }
.bp-lib-search { border:none; background:transparent; color:var(--text); font-size:0.85rem; outline:none; width:100%; }
.bp-lib-grid  { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:16px; }
.bp-lib-card  { border:1px solid var(--border); background:var(--panel-bg); padding:24px; display:flex; flex-direction:column; gap:14px; transition:border-color .2s, box-shadow .2s; }
.bp-lib-card:hover { border-color:var(--border-hi); box-shadow:var(--glow); }
.bp-lib-hd    { display:flex; align-items:flex-start; gap:12px; }
.bp-lib-meta  { flex:1; min-width:0; }
.bp-lib-name  { font-family:var(--font-h); font-size:0.9rem; letter-spacing:.05em; color:var(--text); font-weight:700; }
.bp-lib-role  { color:var(--text-muted); margin-top:3px; }
.bp-lib-desc  { font-size:0.84rem; line-height:1.65; color:var(--text-muted); flex:1; }
.bp-lib-tags  { display:flex; gap:6px; flex-wrap:wrap; }
.bp-lib-actions { display:flex; gap:6px; flex-wrap:wrap; margin-top:auto; padding-top:4px; }
.bp-fav-btn   { background:none; border:1px solid var(--border); padding:5px 8px; cursor:pointer; color:var(--text-muted); transition:all .15s; border-radius:var(--radius); margin-left:auto; }
.bp-fav-btn:hover, .bp-fav-btn.active { color:var(--accent); border-color:var(--accent); }
.bp-build-btn { background:var(--accent); color:var(--bg); border-color:var(--accent); }
.bp-build-btn:hover { opacity:.85; }
.bp-filter-btn        { font-size:0.75rem; padding:5px 12px; }
.bp-filter-btn.active { border-color:var(--accent); color:var(--accent); }

/* ═══════════════════════════════════════════════════════
   ATM DEMO: EXPANSION STYLES
═══════════════════════════════════════════════════════ */
/* System health bars */
.sys-metric { display:flex; align-items:center; gap:8px; font-size:0.75rem; margin-bottom:10px; }
.sys-lbl    { width:30px; color:var(--text-muted); flex-shrink:0; font-family:var(--font-m); letter-spacing:.05em; }
.sys-bar    { flex:1; height:5px; background:var(--surface2,#1a1a1a); border-radius:2px; overflow:hidden; }
.sys-bar-fill { height:100%; background:var(--accent); border-radius:2px; transition:width 1.2s ease; }
.sys-val    { width:34px; text-align:right; color:var(--text-muted); font-family:var(--font-m); font-size:0.72rem; flex-shrink:0; }
/* Recommendations strip */
.atm-recs   { display:flex; align-items:center; gap:12px; padding:5px 14px; border-bottom:1px solid var(--border); font-size:0.75rem; overflow:hidden; min-height:32px; }
.rec-lbl    { color:var(--text-muted); letter-spacing:.15em; flex-shrink:0; font-size:0.65rem; font-family:var(--font-m); text-transform:uppercase; border:1px solid var(--border); padding:2px 7px; }
.rec-track  { display:flex; gap:8px; overflow:hidden; flex:1; }
.rec-chip   { border:1px solid var(--border); padding:2px 10px; white-space:nowrap; color:var(--text-muted); font-size:0.73rem; font-family:var(--font-m); flex-shrink:0; }
/* Command bar */
.atm-cmd    { display:flex; align-items:center; gap:8px; padding:8px 14px; border-top:1px solid var(--border); background:var(--bg); flex-shrink:0; }
.atm-cmd-input { flex:1; background:transparent; border:none; color:var(--text); font-size:0.82rem; font-family:var(--font-m); outline:none; }
.atm-cmd-input::placeholder { color:var(--text-muted); opacity:.6; }
/* Status bar */
.atm-status-bar { display:flex; align-items:center; gap:10px; padding:4px 14px; border-top:1px solid var(--border); font-size:0.7rem; color:var(--text-muted); letter-spacing:.08em; background:var(--bg); flex-shrink:0; font-family:var(--font-m); }
.sb-brand   { color:var(--accent); font-weight:700; letter-spacing:.12em; }
/* Analytics panel */
.ana-grid   { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:20px; }
@media (max-width:640px) { .ana-grid { grid-template-columns:1fr; } }
.ana-card   { padding:16px 20px; }
.ana-metrics { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
@media (max-width:640px) { .ana-metrics { grid-template-columns:repeat(2,1fr); } }
.am-chip    { border:1px solid var(--border); padding:16px 12px; text-align:center; }
.am-val     { font-size:1.5rem; font-family:var(--font-h); color:var(--accent); font-weight:700; }
.am-lbl     { font-size:0.68rem; color:var(--text-muted); letter-spacing:.1em; text-transform:uppercase; margin-top:4px; font-family:var(--font-m); }
.ldr-row    { display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid var(--border); font-size:0.82rem; }
.ldr-rank   { width:20px; color:var(--text-muted); font-family:var(--font-m); font-size:0.72rem; flex-shrink:0; }
.ldr-name   { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ldr-score  { color:var(--accent); font-family:var(--font-m); font-size:0.82rem; flex-shrink:0; }
/* Settings panel */
.settings-group { margin-bottom:24px; display:flex; flex-direction:column; gap:8px; }
.tab-pane   { padding:20px 0; flex:1; overflow-y:auto; }
.w100       { width:100%; margin-bottom:6px; }
/* Quick actions */
.quick-btn  { display:flex; align-items:center; gap:8px; width:100%; margin-bottom:6px; }

/* ═══════════════════════════════════════════════════════
   ACADEMY: INTERACTIVE EXERCISES
═══════════════════════════════════════════════════════ */
.exercise-panel  { border:1px solid var(--border-hi); background:var(--panel-bg); padding:28px; margin-top:20px; animation:fadeIn .3s ease; }
@keyframes fadeIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }
.ex-hd           { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; flex-wrap:wrap; gap:8px; }
.ex-tabs         { display:flex; gap:4px; margin-bottom:20px; flex-wrap:wrap; }
.ex-tab          { padding:6px 14px; border:1px solid var(--border); background:var(--surface); font-size:0.8rem; cursor:pointer; color:var(--text-muted); transition:all .15s; }
.ex-tab.active   { border-color:var(--accent); color:var(--accent); background:var(--panel-bg); }
/* Prompt Lab */
.prompt-template { background:var(--surface); padding:20px 24px; margin-bottom:16px; font-size:0.9rem; line-height:2.2; border:1px solid var(--border); }
.pt-blank        { background:transparent; border:none; border-bottom:1px solid var(--accent); min-width:100px; font-size:0.88rem; color:var(--accent); font-family:var(--font-m); padding:2px 4px; outline:none; }
.pt-score        { font-size:0.78rem; color:var(--text-muted); margin-top:12px; font-family:var(--font-m); }
.pt-response     { margin-top:16px; padding:20px; font-size:0.88rem; line-height:1.75; font-style:italic; }
/* Workflow Builder */
.wfb-toolbar { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:12px; align-items:center; }
.wfb-canvas  { min-height:160px; border:1px solid var(--border); background:var(--surface); padding:16px; display:flex; flex-wrap:wrap; gap:10px; align-items:flex-start; content:""; position:relative; }
.wfb-hint    { color:var(--text-muted); font-size:0.82rem; font-style:italic; align-self:center; }
.wfb-node    { border:1px solid var(--border-hi); padding:8px 14px; font-size:0.78rem; cursor:pointer; display:inline-flex; align-items:center; gap:6px; background:var(--panel-bg); transition:all .15s; font-family:var(--font-m); }
.wfb-node:hover { border-color:var(--accent); color:var(--accent); }
.wfb-node-input    { border-color:#22c55e; color:#22c55e; }
.wfb-node-output   { border-color:var(--accent); color:var(--accent); }
.wfb-node-agent    { border-color:#60a5fa; color:#60a5fa; }
.wfb-node-decision { border-color:#f59e0b; color:#f59e0b; }
.wfb-node-tool     { border-color:#a78bfa; color:#a78bfa; }
.wfb-node-loop     { border-color:#fb923c; color:#fb923c; }
.wfb-status { margin-top:10px; font-size:0.82rem; font-family:var(--font-m); padding:8px 12px; }
.wfb-ok     { color:#22c55e; border:1px solid #22c55e; }
.wfb-err    { color:#ef4444; border:1px solid #ef4444; }
/* Deployment Checklist */
.deploy-progress { height:4px; background:var(--surface2,#1a1a1a); margin-bottom:20px; border-radius:2px; overflow:hidden; }
.deploy-bar      { height:100%; background:var(--accent); border-radius:2px; transition:width .4s ease; }
.deploy-steps    { display:flex; flex-direction:column; }
.deploy-step     { display:flex; align-items:flex-start; gap:12px; padding:12px 0; border-bottom:1px solid var(--border); font-size:0.85rem; cursor:pointer; transition:background .15s; }
.deploy-step:last-child { border-bottom:none; }
.deploy-step input[type=checkbox] { margin-top:2px; accent-color:var(--accent); cursor:pointer; width:15px; height:15px; flex-shrink:0; }
.deploy-step-lbl  { flex:1; }
.deploy-step-name { font-size:0.85rem; }
.deploy-step-desc { font-size:0.76rem; color:var(--text-muted); margin-top:3px; }
.dep-log { padding:16px; font-family:var(--font-m); font-size:0.76rem; max-height:200px; overflow-y:auto; line-height:1.7; color:var(--text-muted); }
.dep-log-line { margin-bottom:2px; }
.dep-log-line.ok { color:#22c55e; }

/* ═══════════════════════════════════════════════════════
   COMMUNICATIONS: TABBED HUB
═══════════════════════════════════════════════════════ */
.comms-tabs-bar  { border-bottom:1px solid var(--border); background:var(--nav-bg,var(--panel-bg)); position:sticky; top:60px; z-index:90; }
.comms-tab-btns  { display:flex; gap:0; overflow-x:auto; -webkit-overflow-scrolling:touch; padding:0 max(20px, calc((100vw - 1200px)/2)); }
.comms-tb        { padding:13px 22px; border:none; border-bottom:2px solid transparent; background:transparent; color:var(--text-muted); cursor:pointer; font-size:0.82rem; display:flex; align-items:center; gap:6px; white-space:nowrap; transition:color .15s, border-color .15s; font-family:var(--font-b); }
.comms-tb.active { color:var(--accent); border-bottom-color:var(--accent); }
.comms-tb:hover  { color:var(--text); }
.comms-tab-pane  { display:none; }
.comms-tab-pane.active { display:block; }
/* Profile */
.profile-avatar  { width:64px; height:64px; border-radius:50%; background:var(--accent); color:var(--bg); display:flex; align-items:center; justify-content:center; font-size:1.8rem; font-family:var(--font-h); margin-bottom:24px; font-weight:700; }
.profile-field   { display:flex; justify-content:space-between; align-items:center; padding:14px 0; border-bottom:1px solid var(--border); font-size:0.88rem; }
.profile-field:last-child { border-bottom:none; }
/* Settings */
.settings-toggle-row  { display:flex; justify-content:space-between; align-items:center; padding:14px 0; border-bottom:1px solid var(--border); font-size:0.88rem; }
.settings-toggle-row:last-child { border-bottom:none; }
.toggle-switch   { position:relative; width:40px; height:22px; cursor:pointer; }
.toggle-switch input { opacity:0; width:0; height:0; }
.toggle-slider   { position:absolute; inset:0; background:var(--border); border-radius:11px; transition:.3s; }
.toggle-slider::before { content:''; position:absolute; height:16px; width:16px; left:3px; bottom:3px; background:var(--text-muted); border-radius:50%; transition:.3s; }
input:checked + .toggle-slider { background:var(--accent); }
input:checked + .toggle-slider::before { transform:translateX(18px); background:var(--bg); }
.theme-swatch-grid { display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }
.theme-swatch    { width:32px; height:32px; border:2px solid var(--border); cursor:pointer; border-radius:var(--radius); transition:border-color .15s; }
.theme-swatch.active { border-color:var(--accent); }
/* Integrations */
.int-grid        { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:16px; }
.int-card        { border:1px solid var(--border); background:var(--panel-bg); padding:24px; display:flex; flex-direction:column; gap:12px; transition:border-color .2s; }
.int-card:hover  { border-color:var(--border-hi); }
.int-card-hd     { display:flex; align-items:center; gap:10px; }
.int-card-name   { font-family:var(--font-h); font-size:0.88rem; font-weight:700; letter-spacing:.06em; }
.int-card-status { font-size:0.72rem; font-family:var(--font-m); letter-spacing:.1em; padding:2px 8px; border:1px solid var(--border); color:var(--text-muted); margin-left:auto; }
.int-card-status.connected { border-color:#22c55e; color:#22c55e; }
.int-card-coming { opacity:.45; pointer-events:none; }
.int-card-desc   { font-size:0.82rem; color:var(--text-muted); line-height:1.6; }

/* ═══════════════════════════════════════════════════════════════
   PRICING PAGE
═══════════════════════════════════════════════════════════════ */
.pricing-toggle-wrap { display:flex; align-items:center; justify-content:center; gap:14px; margin-bottom:48px; font-size:0.82rem; }
.billing-lbl { color:var(--text-muted); transition:color .2s; }
.billing-lbl.active { color:var(--accent); font-weight:600; }
.billing-save { background:var(--accent); color:var(--bg); font-size:0.65rem; font-family:var(--font-m); padding:2px 8px; letter-spacing:.08em; }
.pricing-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
@media(max-width:780px) { .pricing-grid { grid-template-columns:1fr; } }
.pricing-card { border:1px solid var(--border); background:var(--panel-bg); padding:36px 28px; display:flex; flex-direction:column; gap:10px; position:relative; }
.pricing-card.featured { border-color:var(--border-hi); box-shadow:var(--glow-hi); }
.pricing-badge { position:absolute; top:-13px; left:50%; transform:translateX(-50%); background:var(--accent); color:var(--bg); padding:4px 18px; font-size:0.66rem; font-family:var(--font-m); letter-spacing:.12em; white-space:nowrap; }
.pricing-tier { font-size:0.68rem; font-family:var(--font-m); letter-spacing:.14em; color:var(--text-muted); margin-bottom:4px; }
.pricing-name { font-family:var(--font-h); font-size:1.5rem; font-weight:700; }
.pricing-tagline { font-size:0.8rem; color:var(--text-muted); min-height:36px; }
.pricing-divider { height:1px; background:var(--border); margin:8px 0; }
.pricing-price-row { display:flex; align-items:baseline; gap:4px; margin:4px 0; }
.pricing-price { font-size:2.6rem; font-family:var(--font-h); font-weight:700; color:var(--accent); line-height:1; }
.pricing-per { font-size:0.75rem; color:var(--text-muted); }
.pricing-feats { display:flex; flex-direction:column; gap:9px; margin:16px 0; flex:1; }
.pricing-feat { display:flex; align-items:flex-start; gap:9px; font-size:0.82rem; line-height:1.4; }
.pricing-feat-ck { color:var(--accent); flex-shrink:0; margin-top:1px; }
.pricing-feat-xx { color:var(--text-muted); opacity:.35; flex-shrink:0; margin-top:1px; }
.pricing-feat.dim { color:var(--text-muted); }
/* Compare table */
.compare-wrap { overflow-x:auto; margin-top:60px; }
.compare-table { width:100%; border-collapse:collapse; font-size:0.82rem; }
.compare-table th, .compare-table td { padding:13px 16px; border-bottom:1px solid var(--border); text-align:center; }
.compare-table th:first-child, .compare-table td:first-child { text-align:left; min-width:200px; }
.compare-table th { font-family:var(--font-m); font-size:0.7rem; letter-spacing:.1em; color:var(--text-muted); }
.compare-table td:not(:first-child) { font-family:var(--font-m); }
.ct-ck { color:var(--accent); font-size:1rem; }
.ct-xx { color:var(--text-muted); opacity:.3; }
/* Pricing FAQ */
.pricing-faq { display:flex; flex-direction:column; gap:12px; margin-top:16px; }
.pfaq-item { border:1px solid var(--border); background:var(--panel-bg); padding:20px 24px; cursor:pointer; }
.pfaq-q { font-size:0.88rem; font-weight:600; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.pfaq-a { font-size:0.83rem; color:var(--text-muted); line-height:1.7; margin-top:12px; display:none; }
.pfaq-item.open .pfaq-a { display:block; }
.pfaq-arrow { font-size:0.9rem; transition:transform .2s; flex-shrink:0; }
.pfaq-item.open .pfaq-arrow { transform:rotate(180deg); }

/* ═══════════════════════════════════════════════════════════════
   ROI CALCULATOR
═══════════════════════════════════════════════════════════════ */
.roi-progress { display:flex; gap:4px; margin-bottom:40px; }
.roi-prog-step { flex:1; height:3px; background:var(--surface2,#1a1a1a); border-radius:2px; transition:background .4s; }
.roi-prog-step.done { background:var(--accent); }
.roi-step { display:none; animation:fadeIn .3s ease; }
.roi-step.active { display:block; }
.roi-industry-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:24px 0; }
@media(max-width:600px) { .roi-industry-grid { grid-template-columns:repeat(2,1fr); } }
.roi-ind-card { border:1px solid var(--border); background:var(--panel-bg); padding:20px 14px; text-align:center; cursor:pointer; transition:border-color .15s, box-shadow .15s; }
.roi-ind-card:hover { border-color:var(--border-hi); box-shadow:var(--glow); }
.roi-ind-card.selected { border-color:var(--border-hi); box-shadow:var(--glow); background:color-mix(in srgb, var(--accent) 8%, var(--panel-bg)); }
.roi-ind-icon { font-size:1.6rem; display:block; margin-bottom:8px; }
.roi-ind-name { font-size:0.82rem; font-weight:600; }
.roi-slider-wrap { margin:24px 0; }
.roi-slider { width:100%; accent-color:var(--accent); cursor:pointer; }
.roi-slider-labels { display:flex; justify-content:space-between; font-size:0.72rem; color:var(--text-muted); margin-top:4px; font-family:var(--font-m); }
.roi-workflow-grid { display:flex; flex-direction:column; gap:10px; margin:20px 0; }
.roi-wf-item { display:flex; align-items:center; gap:12px; border:1px solid var(--border); padding:14px 18px; cursor:pointer; transition:border-color .15s; }
.roi-wf-item:hover { border-color:var(--border-hi); }
.roi-wf-item.selected { border-color:var(--border-hi); background:color-mix(in srgb, var(--accent) 6%, var(--panel-bg)); }
.roi-wf-cb { width:16px; height:16px; accent-color:var(--accent); flex-shrink:0; }
.roi-wf-label { font-size:0.85rem; }
.roi-result-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin:28px 0; }
.roi-result-card { border:1px solid var(--border); background:var(--panel-bg); padding:24px; }
.roi-result-val { font-size:2.4rem; font-family:var(--font-h); font-weight:700; color:var(--accent); line-height:1; }
.roi-result-lbl { font-size:0.72rem; color:var(--text-muted); font-family:var(--font-m); margin-top:6px; letter-spacing:.06em; }
.roi-nav { display:flex; justify-content:space-between; align-items:center; margin-top:32px; gap:12px; }

/* ═══════════════════════════════════════════════════════════════
   MISSION LOGS
═══════════════════════════════════════════════════════════════ */
.logs-filter-bar { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:32px; }
.log-filter-btn { padding:6px 16px; border:1px solid var(--border); background:transparent; color:var(--text-muted); cursor:pointer; font-size:0.75rem; font-family:var(--font-m); letter-spacing:.06em; transition:color .15s, border-color .15s; }
.log-filter-btn:hover { color:var(--text); border-color:var(--border-hi); }
.log-filter-btn.active { border-color:var(--accent); color:var(--accent); }
.logs-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:24px; }
.log-card { border:1px solid var(--border); background:var(--panel-bg); display:flex; flex-direction:column; overflow:hidden; transition:border-color .2s, box-shadow .2s; }
.log-card:hover { border-color:var(--border-hi); box-shadow:var(--glow); }
.log-card-header { border-bottom:1px solid var(--border); padding:24px 24px 16px; }
.log-card-header svg { width:100%; height:auto; color:var(--accent); opacity:0.6; }
.log-card-body { padding:20px 24px 24px; display:flex; flex-direction:column; gap:10px; flex:1; }
.log-cat { font-size:0.66rem; font-family:var(--font-m); letter-spacing:.14em; color:var(--accent); }
.log-title { font-family:var(--font-h); font-size:1rem; line-height:1.45; }
.log-excerpt { font-size:0.82rem; line-height:1.7; color:var(--text-muted); flex:1; }
.log-meta { display:flex; align-items:center; gap:12px; font-size:0.7rem; color:var(--text-muted); font-family:var(--font-m); margin-top:4px; }
/* Log article */
.log-article-wrap { max-width:720px; margin:0 auto; }
.log-article-meta { display:flex; align-items:center; gap:14px; margin-bottom:36px; flex-wrap:wrap; }
.log-article-body h2 { font-size:1.12rem; margin:36px 0 14px; color:var(--text); font-family:var(--font-h); }
.log-article-body h3 { font-size:0.95rem; margin:24px 0 10px; color:var(--accent); font-family:var(--font-m); letter-spacing:.06em; }
.log-article-body p { font-size:0.9rem; line-height:1.9; color:var(--text-muted); margin-bottom:20px; }
.log-article-body ul { margin:0 0 20px 20px; }
.log-article-body li { font-size:0.88rem; line-height:1.8; color:var(--text-muted); }
.log-article-body code { font-family:var(--font-m); background:var(--surface); padding:2px 6px; font-size:0.82em; border:1px solid var(--border); }
.log-article-body pre { background:var(--surface); padding:20px; font-family:var(--font-m); font-size:0.82rem; line-height:1.7; overflow-x:auto; margin:24px 0; border:1px solid var(--border); }
.log-related { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:40px; }
.log-related-card { border:1px solid var(--border); background:var(--panel-bg); padding:20px; }

/* ═══════════════════════════════════════════════════════════════
   ONBOARDING WIZARD
═══════════════════════════════════════════════════════════════ */
.wiz-shell { max-width:700px; margin:0 auto; }
.wiz-progress { display:flex; gap:4px; margin-bottom:12px; }
.wiz-prog-seg { flex:1; height:3px; background:var(--surface2,#1a1a1a); border-radius:2px; transition:background .35s; }
.wiz-prog-seg.done { background:var(--accent); }
.wiz-step-label { font-size:0.7rem; font-family:var(--font-m); color:var(--text-muted); letter-spacing:.1em; margin-bottom:32px; }
.wiz-step { display:none; animation:fadeIn .3s ease; }
.wiz-step.active { display:block; }
.wiz-choices { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:20px 0; }
@media(max-width:560px) { .wiz-choices { grid-template-columns:repeat(2,1fr); } }
.wz-choice { border:1px solid var(--border); background:var(--panel-bg); padding:22px 14px; text-align:center; cursor:pointer; transition:border-color .15s, box-shadow .15s; display:flex; flex-direction:column; align-items:center; gap:8px; }
.wz-choice:hover { border-color:var(--border-hi); box-shadow:var(--glow); }
.wz-choice.selected { border-color:var(--border-hi); box-shadow:var(--glow); background:color-mix(in srgb, var(--accent) 8%, var(--panel-bg)); }
.wz-choice-icon { font-size:1.5rem; }
.wz-choice-lbl { font-size:0.82rem; font-weight:600; }
.wz-choice-desc { font-size:0.72rem; color:var(--text-muted); line-height:1.4; }
.wiz-task-list { display:flex; flex-direction:column; gap:10px; margin:20px 0; }
.wiz-task-item { display:flex; align-items:center; gap:12px; border:1px solid var(--border); padding:14px 18px; cursor:pointer; transition:border-color .15s; }
.wiz-task-item:hover { border-color:var(--border-hi); }
.wiz-task-item.selected { border-color:var(--border-hi); background:color-mix(in srgb, var(--accent) 6%, var(--panel-bg)); }
.wiz-task-cb { width:16px; height:16px; accent-color:var(--accent); pointer-events:none; }
.wiz-nav { display:flex; justify-content:space-between; align-items:center; margin-top:28px; gap:12px; }
.wiz-reveal { border:1px solid var(--border-hi); background:var(--panel-bg); padding:40px 36px; box-shadow:var(--glow-hi); text-align:center; animation:fadeIn .7s ease; }
.wiz-agent-card { border:1px solid var(--border); background:var(--surface); padding:24px; margin:24px 0; text-align:left; }
.wiz-agent-name { font-family:var(--font-h); font-size:1.3rem; color:var(--accent); margin-bottom:8px; }
.wiz-agent-tasks { display:flex; flex-direction:column; gap:6px; margin-top:14px; }
.wiz-agent-task { display:flex; align-items:center; gap:8px; font-size:0.82rem; color:var(--text-muted); }

/* ═══════════════════════════════════════════════════════════════
   COMMUNITY BLUEPRINTS EXTENSION
═══════════════════════════════════════════════════════════════ */
.bp-comm-meta { display:flex; align-items:center; gap:12px; font-size:0.75rem; color:var(--text-muted); flex-wrap:wrap; }
.bp-stars { color:var(--accent); font-size:0.82rem; letter-spacing:-1px; }
.bp-author-badge { font-size:0.66rem; font-family:var(--font-m); letter-spacing:.08em; background:var(--surface); padding:2px 8px; border:1px solid var(--border); color:var(--text-muted); white-space:nowrap; }
.bp-votes-btn { display:inline-flex; align-items:center; gap:5px; padding:4px 12px; border:1px solid var(--border); background:transparent; cursor:pointer; font-size:0.75rem; color:var(--text-muted); font-family:var(--font-b); transition:color .15s, border-color .15s; line-height:1; }
.bp-votes-btn:hover, .bp-votes-btn.voted { color:var(--accent); border-color:var(--accent); }
.bp-submit-strip { border:1px dashed var(--border-hi); background:var(--panel-bg); padding:36px; text-align:center; margin-top:32px; }

/* ═══════════════════════════════════════════════════════
   ATM MOBILE APP PAGE
═══════════════════════════════════════════════════════ */
.atm-app-split { display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
@media (max-width:860px) { .atm-app-split { grid-template-columns:1fr; } }
.atm-app-copy { display:flex; flex-direction:column; gap:0; }
.atm-phone-wrap { display:flex; justify-content:center; align-items:center; }
.atm-phone-svg { width:100%; max-width:300px; filter:drop-shadow(0 24px 48px color-mix(in srgb,var(--accent) 18%,transparent)); }
.platform-badges { display:flex; gap:8px; flex-wrap:wrap; margin:20px 0 28px; }
.platform-badge { font-size:0.65rem; font-family:var(--font-m); letter-spacing:.14em; padding:4px 12px; border:1px solid var(--border); color:var(--text-muted); background:var(--panel-bg); }
.app-dl-btns { display:flex; gap:12px; flex-wrap:wrap; }
.app-dl-btn { display:flex; align-items:center; gap:11px; padding:12px 20px; border:1px solid var(--border); background:var(--panel-bg); text-decoration:none; color:var(--text); transition:border-color .2s, box-shadow .2s; min-width:160px; }
.app-dl-btn:hover { border-color:var(--border-hi); box-shadow:var(--glow); color:var(--text); }
.app-dl-btn svg { flex-shrink:0; color:var(--accent); }
.app-dl-btn-label { display:flex; flex-direction:column; gap:1px; }
.app-dl-btn-sub { font-size:0.6rem; font-family:var(--font-m); letter-spacing:.08em; color:var(--text-muted); text-transform:uppercase; }
.app-dl-btn-name { font-size:0.88rem; font-family:var(--font-h); font-weight:700; line-height:1.2; }
.app-feat-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:14px; margin-top:36px; }
.app-feat-card { border:1px solid var(--border); background:var(--panel-bg); padding:22px 20px; display:flex; flex-direction:column; gap:10px; transition:border-color .2s,box-shadow .2s; }
.app-feat-card:hover { border-color:var(--border-hi); box-shadow:var(--glow); }
.app-feat-icon { color:var(--accent); display:flex; }
.app-feat-num { font-size:0.62rem; font-family:var(--font-m); letter-spacing:.14em; color:var(--text-muted); }
.app-feat-title { font-family:var(--font-h); font-size:0.88rem; font-weight:700; line-height:1.3; }
.app-feat-desc { font-size:0.78rem; line-height:1.65; color:var(--text-muted); }
.platform-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:40px; }
@media (max-width:640px) { .platform-grid { grid-template-columns:1fr; } }
.platform-card { border:1px solid var(--border); background:var(--panel-bg); padding:32px 24px; display:flex; flex-direction:column; gap:14px; align-items:center; text-align:center; }
.platform-card.featured { border-color:var(--border-hi); box-shadow:var(--glow); }
.platform-card-icon { width:48px; height:48px; display:flex; align-items:center; justify-content:center; border:1px solid var(--border); color:var(--accent); }
.platform-card-name { font-family:var(--font-h); font-size:1rem; font-weight:700; }
.platform-card-sub { font-size:0.78rem; color:var(--text-muted); line-height:1.6; }

/* ─────────────────────────────────────────────────────────────────
   NAV HUD DROPDOWN
───────────────────────────────────────────────────────────────── */
.nav-hud-btn {
  width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); background: var(--panel-bg); cursor: pointer;
  color: var(--text-muted); font-family: var(--font-m); font-size: 0.5rem; letter-spacing: .1em;
  flex-shrink: 0; transition: border-color .2s, color .2s; margin-right: 8px;
}
.nav-hud-btn:hover, .nav-hud-btn.active { border-color: var(--border-hi); color: var(--accent); }
.nav-hud-panel {
  position: absolute; top: 100%; right: 0;
  background: var(--nav-bg); border: 1px solid var(--border); border-top: none;
  backdrop-filter: blur(18px); padding: 10px 14px;
  display: flex; flex-direction: column; align-items: stretch; gap: 8px; z-index: -1;
  transform: translateY(-100%); opacity: 0; pointer-events: none;
  transition: transform 0.25s ease, opacity 0.2s ease;
}
.nav-hud-panel.open { transform: translateY(0); opacity: 1; pointer-events: auto; }
.hud-row { display: flex; align-items: center; gap: 5px; }
.hud-row-sep { height: 1px; background: var(--border); margin: 0; }
.nav-hud-panel .dock-lbl { font-size: 0.55rem; margin-right: 2px; padding-right: 6px; }
.nav-hud-panel .db { width: 18px; height: 18px; }
.nav-hud-panel .fb { width: 18px; height: 18px; font-size: 9px; }

/* ── Font switcher buttons ─────────────────────────── */
.fb {
  width: 22px; height: 22px;
  border: 1px solid var(--border); background: transparent;
  color: var(--text-muted); cursor: pointer; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  transition: border-color 0.15s, color 0.15s; position: relative;
}
.fb:hover { border-color: var(--border-hi); color: var(--text); }
.fb.active { border-color: var(--accent); color: var(--accent); }
.fb::after {
  content: attr(data-tip);
  position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  background: var(--panel-bg); border: 1px solid var(--border);
  color: var(--text); font-size: 0.65rem; font-family: var(--font-m);
  letter-spacing: .06em; white-space: nowrap; padding: 3px 8px;
  pointer-events: none; opacity: 0; transition: opacity 0.15s;
}
.fb:hover::after { opacity: 1; }
.fb-auto   { font-family: var(--font-m); font-size: 10px; }
.fb-clean  { font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 600; }
.fb-space  { font-family: 'Orbitron', sans-serif; font-size: 7px; font-weight: 700; }
.fb-tac    { font-family: 'Rajdhani', sans-serif; font-size: 12px; font-weight: 700; }
.fb-code   { font-family: 'Fira Code', monospace; font-size: 9px; }
.fb-serif  { font-family: 'Playfair Display', serif; font-size: 11px; font-style: italic; }
.fb-mono   { font-family: 'Share Tech Mono', monospace; font-size: 10px; }
.fb-pixel  { font-family: 'Press Start 2P', monospace; font-size: 5px; }

/* ── Font override layer (comes after theme vars — same specificity, wins by order) ── */
[data-font="clean"]  { --font-h: 'Inter', sans-serif;           --font-b: 'Inter', sans-serif;           --font-m: 'Fira Code', monospace; }
[data-font="space"]  { --font-h: 'Orbitron', sans-serif;        --font-b: 'Inter', sans-serif;           --font-m: 'Fira Code', monospace; }
[data-font="tac"]    { --font-h: 'Rajdhani', sans-serif;        --font-b: 'Rajdhani', sans-serif;        --font-m: 'Fira Code', monospace; }
[data-font="code"]   { --font-h: 'Fira Code', monospace;        --font-b: 'Fira Code', monospace;        --font-m: 'Fira Code', monospace; }
[data-font="serif"]  { --font-h: 'Playfair Display', serif;     --font-b: 'Playfair Display', serif;     --font-m: 'Share Tech Mono', monospace; }
[data-font="mono"]   { --font-h: 'Share Tech Mono', monospace;  --font-b: 'Share Tech Mono', monospace;  --font-m: 'Share Tech Mono', monospace; }
[data-font="pixel"]  { --font-h: 'Press Start 2P', monospace;   --font-b: 'Press Start 2P', monospace;   --font-m: 'Press Start 2P', monospace; }

/* ─────────────────────────────────────────────────────────────────
   TCG CARD — TRADING CARD ASPECT RATIO (5:7 ≈ 2.5 × 3.5 in)
───────────────────────────────────────────────────────────────── */
/* Override the existing .tcg-card to enforce trading-card proportions */
.tcg-card { aspect-ratio: 5 / 7; }
/* Featured grids on index: tighter responsive columns */
.tcg-grid-featured { display:grid; gap:16px; grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)); }
@media (max-width: 640px) {
  .tcg-grid-featured { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .tcg-grid           { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .tcg-card           { min-width: 0; }
}

/* ─────────────────────────────────────────────────────────────────
   AUTH PAGE (account.html)
───────────────────────────────────────────────────────────────── */
.auth-card { width:100%; max-width:440px; border:1px solid var(--border); background:var(--panel-bg); padding:36px 40px; display:flex; flex-direction:column; gap:0; }
@media (max-width:480px) { .auth-card { padding:28px 22px; } }

.auth-tabs { display:flex; border-bottom:1px solid var(--border); margin-bottom:28px; }
.auth-tab { flex:1; padding:10px 0; background:none; border:none; font-family:var(--font-m); font-size:0.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--text-muted); cursor:pointer; transition:color .2s; border-bottom:2px solid transparent; margin-bottom:-1px; }
.auth-tab.active { color:var(--accent); border-bottom-color:var(--accent); }
.auth-tab:hover { color:var(--text); }

.auth-form { display:flex; flex-direction:column; gap:18px; }
.auth-field { display:flex; flex-direction:column; gap:6px; }
.auth-label { font-size:0.72rem; font-family:var(--font-m); letter-spacing:.1em; text-transform:uppercase; color:var(--text-muted); display:flex; align-items:center; justify-content:space-between; }
.auth-forgot { background:none; border:none; color:var(--text-muted); font-size:0.68rem; font-family:var(--font-b); cursor:pointer; padding:0; text-decoration:underline; text-underline-offset:3px; }
.auth-forgot:hover { color:var(--accent); }

.auth-input-wrap { position:relative; display:flex; align-items:center; }
.auth-input-icon { position:absolute; left:12px; width:15px; height:15px; color:var(--text-muted); flex-shrink:0; stroke:currentColor; stroke-width:2; fill:none; }
.auth-input { width:100%; padding:10px 38px 10px 36px; border:1px solid var(--border); background:var(--surface); color:var(--text); font-family:var(--font-b); font-size:0.88rem; outline:none; transition:border-color .2s; -webkit-appearance:none; }
.auth-input:focus { border-color:var(--border-hi); box-shadow:var(--glow); }
.auth-input::placeholder { color:var(--text-muted); }
.auth-eye { position:absolute; right:10px; background:none; border:none; cursor:pointer; color:var(--text-muted); padding:4px; display:flex; align-items:center; }
.auth-eye:hover { color:var(--accent); }

.auth-submit { width:100%; margin-top:4px; display:flex; align-items:center; justify-content:center; }
.auth-legal { font-size:0.7rem; color:var(--text-muted); text-align:center; line-height:1.7; margin-top:6px; }

.auth-divider { display:flex; align-items:center; gap:12px; margin:20px 0; color:var(--text-muted); font-size:0.72rem; font-family:var(--font-m); letter-spacing:.08em; }
.auth-divider::before, .auth-divider::after { content:''; flex:1; height:1px; background:var(--border); }

.auth-google-btn { display:flex; align-items:center; justify-content:center; gap:10px; padding:11px 20px; border:1px solid var(--border); background:var(--surface); color:var(--text); font-family:var(--font-b); font-size:0.85rem; cursor:pointer; transition:border-color .2s, box-shadow .2s; width:100%; }
.auth-google-btn:hover { border-color:var(--border-hi); box-shadow:var(--glow); }

.auth-msg { padding:12px 16px; font-size:0.82rem; margin-bottom:16px; }
.auth-msg-error { background:color-mix(in srgb,#e74c3c 10%,var(--surface)); border:1px solid #e74c3c; color:#e74c3c; }
.auth-msg-success { background:color-mix(in srgb,#27ae60 10%,var(--surface)); border:1px solid #27ae60; color:#27ae60; }

/* ─────────────────────────────────────────────────────────────────
   DASHBOARD (dashboard.html)
───────────────────────────────────────────────────────────────── */
.dash-header { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:20px; padding-bottom:32px; border-bottom:1px solid var(--border); }
.dash-welcome { display:flex; align-items:center; gap:18px; }
.dash-avatar { width:52px; height:52px; border:2px solid var(--accent); background:var(--surface2); display:flex; align-items:center; justify-content:center; font-family:var(--font-h); font-size:1.3rem; font-weight:700; color:var(--accent); flex-shrink:0; }
.dash-greeting { font-family:var(--font-h); font-size:clamp(1.2rem,3vw,1.6rem); font-weight:700; margin:0; }
.dash-header-actions { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }

.dash-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
@media (max-width:860px) { .dash-stats { grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px) { .dash-stats { grid-template-columns:1fr 1fr; } }
.dash-stat { padding:24px 22px; text-align:center; }
.dash-stat-num { font-family:var(--font-h); font-size:2rem; font-weight:700; color:var(--accent); line-height:1; }
.dash-stat-label { font-size:0.72rem; font-family:var(--font-m); letter-spacing:.1em; text-transform:uppercase; color:var(--text-muted); margin-top:8px; }
.dash-stat-sub { font-size:0.68rem; color:var(--text-muted); margin-top:6px; }

.dash-grid { display:grid; grid-template-columns:1fr 340px; gap:20px; align-items:start; }
@media (max-width:1024px) { .dash-grid { grid-template-columns:1fr; } }
.dash-col-main { display:flex; flex-direction:column; gap:0; }
.dash-col-side { display:flex; flex-direction:column; gap:0; }

/* Onboarding checklist */
.dash-checklist { display:flex; flex-direction:column; gap:10px; }
.dash-check-item { display:flex; align-items:flex-start; gap:14px; padding:14px 16px; border:1px solid var(--border); background:var(--surface); cursor:pointer; transition:border-color .15s, box-shadow .15s; }
.dash-check-item:hover { border-color:var(--border-hi); box-shadow:var(--glow); }
.dash-check-item.dash-check-done { opacity:.6; cursor:default; }
.dash-check-item.dash-check-done:hover { border-color:var(--border); box-shadow:none; }
.dash-check-icon { width:28px; height:28px; border:1px solid var(--border); display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:0.72rem; font-family:var(--font-m); color:var(--text-muted); }
.dash-check-item.dash-check-done .dash-check-icon { background:var(--accent); border-color:var(--accent); color:var(--bg); }
.dash-check-num { color:var(--text-muted); }
.dash-check-body { flex:1; }
.dash-check-title { font-size:0.88rem; font-weight:600; margin-bottom:3px; }
.dash-check-desc { font-size:0.78rem; color:var(--text-muted); line-height:1.5; }

/* Agent list */
.dash-empty-state { display:flex; flex-direction:column; align-items:center; padding:40px 20px; text-align:center; }
.dash-agent-item { display:flex; align-items:center; gap:14px; padding:14px 16px; border:1px solid var(--border); background:var(--surface); margin-bottom:8px; }
.dash-agent-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.dash-agent-dot.running { background:#27ae60; box-shadow:0 0 8px #27ae60; }
.dash-agent-dot.pending { background:#f39c12; }
.dash-agent-dot.stopped { background:var(--text-muted); }
.dash-agent-name { font-size:0.88rem; font-weight:600; flex:1; }
.dash-agent-status { font-size:0.68rem; font-family:var(--font-m); letter-spacing:.1em; color:var(--text-muted); }

/* Quick actions */
.dash-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.dash-action-btn { display:flex; flex-direction:column; align-items:center; gap:8px; padding:18px 12px; border:1px solid var(--border); background:var(--surface); text-decoration:none; color:var(--text); font-size:0.72rem; font-family:var(--font-m); letter-spacing:.08em; text-transform:uppercase; transition:border-color .15s, box-shadow .15s; }
.dash-action-btn:hover { border-color:var(--border-hi); box-shadow:var(--glow); color:var(--accent); }
.dash-action-btn .icon { width:20px; height:20px; }

/* Activity feed */
.dash-activity { display:flex; flex-direction:column; gap:8px; max-height:300px; overflow-y:auto; }
.dash-activity-item { display:flex; gap:10px; font-size:0.78rem; align-items:flex-start; }
.dash-activity-dot { width:6px; height:6px; border-radius:50%; background:var(--accent); margin-top:5px; flex-shrink:0; }
.dash-activity-text { flex:1; color:var(--text-muted); line-height:1.5; }
.dash-activity-time { font-family:var(--font-m); font-size:0.65rem; color:var(--text-muted); white-space:nowrap; }