/* ============================================
   ORBITASK — Space-Themed Kanban Dashboard
   ============================================ */

:root {
  /* Core palette */
  --void: #05060f;
  --deep-space: #0a0e1a;
  --nebula-dark: #0f1425;
  --nebula: #161b2e;
  --nebula-light: #1c2340;
  --asteroid: #252d4a;
  --comet: #2f3a5c;
  --stardust: #8892b0;
  --starlight: #ccd6f6;
  --supernova: #e6f1ff;

  /* Accent colors */
  --plasma-blue: #00d4ff;
  --plasma-blue-dim: #00a0cc;
  --plasma-blue-glow: rgba(0, 212, 255, 0.15);
  --ion-purple: #7b5ea7;
  --ion-purple-glow: rgba(123, 94, 167, 0.2);
  --solar-orange: #ff6b35;
  --solar-orange-glow: rgba(255, 107, 53, 0.15);
  --aurora-green: #00e89d;
  --aurora-green-glow: rgba(0, 232, 157, 0.15);
  --red-giant: #ff4757;
  --red-giant-glow: rgba(255, 71, 87, 0.15);
  --amber-star: #ffc048;

  /* Priority colors */
  --priority-low: var(--aurora-green);
  --priority-medium: var(--amber-star);
  --priority-high: var(--solar-orange);
  --priority-critical: var(--red-giant);

  /* Fonts */
  --font-heading: 'Orbitron', sans-serif;
  --font-body: 'Share Tech Mono', monospace;

  /* Sizing */
  --sidebar-width: 260px;
  --topbar-height: 56px;
  --column-width: 300px;
  --card-radius: 8px;
  --border-radius: 6px;

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-med: 250ms ease;
  --transition-slow: 400ms ease;

  /* Overlay backgrounds */
  --overlay-bg-strong: rgba(5, 6, 15, 0.82);
  --overlay-bg-soft: rgba(5, 6, 15, 0.62);

  /* Topbar */
  --topbar-bg: rgba(10, 14, 26, 0.82);
}

/* ============================================
   THEME: Stardust (Light Mode)
   ============================================ */
[data-theme="stardust"] {
  /* Core palette — pale periwinkle space */
  --void: #eef0fa;
  --deep-space: #f2f5ff;
  --nebula-dark: #e8ebf8;
  --nebula: #dde2f5;
  --nebula-light: #ccd3ec;
  --asteroid: #adb8da;
  --comet: #8a98c8;
  --stardust: #4e5a88;
  --starlight: #1a2254;
  --supernova: #08102e;

  /* Accents — darkened for light-bg contrast */
  --plasma-blue: #005fad;
  --plasma-blue-dim: #004a8f;
  --plasma-blue-glow: rgba(0, 95, 173, 0.15);
  --ion-purple: #5e28aa;
  --ion-purple-glow: rgba(94, 40, 170, 0.18);
  --solar-orange: #c44800;
  --solar-orange-glow: rgba(196, 72, 0, 0.15);
  --aurora-green: #006f50;
  --aurora-green-glow: rgba(0, 111, 80, 0.15);
  --red-giant: #bb1428;
  --red-giant-glow: rgba(187, 20, 40, 0.15);
  --amber-star: #9a6500;

  /* Priority (inherit from accents, already overridden) */
  --priority-low: var(--aurora-green);
  --priority-medium: var(--amber-star);
  --priority-high: var(--solar-orange);
  --priority-critical: var(--red-giant);

  /* Overlays — lighter for light bg */
  --overlay-bg-strong: rgba(10, 18, 70, 0.48);
  --overlay-bg-soft: rgba(10, 18, 70, 0.32);

  /* Topbar */
  --topbar-bg: rgba(232, 235, 248, 0.85);
}

/* Stardust: softer star field on light background */
[data-theme="stardust"] #stars-canvas {
  opacity: 0.18;
  mix-blend-mode: multiply;
}

/* Stardust: invert scrollbar for light backgrounds */
[data-theme="stardust"] ::-webkit-scrollbar-track { background: var(--nebula-light); }
[data-theme="stardust"] ::-webkit-scrollbar-thumb { background: var(--asteroid); }
[data-theme="stardust"] ::-webkit-scrollbar-thumb:hover { background: var(--comet); }

/* ============================================
   THEME: Nebula Rose
   Deep purple-black with hot pink/magenta —
   like drifting inside a stellar nursery
   ============================================ */
[data-theme="nebula-rose"] {
  --void: #0b0210;
  --deep-space: #100318;
  --nebula-dark: #180525;
  --nebula: #200832;
  --nebula-light: #2e1045;
  --asteroid: #4a2268;
  --comet: #6a3490;
  --stardust: #b06acc;
  --starlight: #f0b8ff;
  --supernova: #fde6ff;

  --plasma-blue: #ff3daa;
  --plasma-blue-dim: #d42888;
  --plasma-blue-glow: rgba(255, 61, 170, 0.18);
  --ion-purple: #cc44ee;
  --ion-purple-glow: rgba(204, 68, 238, 0.2);
  --solar-orange: #ff6eb0;
  --solar-orange-glow: rgba(255, 110, 176, 0.15);
  --aurora-green: #00d4aa;
  --aurora-green-glow: rgba(0, 212, 170, 0.15);
  --red-giant: #ff2255;
  --red-giant-glow: rgba(255, 34, 85, 0.18);
  --amber-star: #ffaaee;

  --priority-low: var(--aurora-green);
  --priority-medium: var(--amber-star);
  --priority-high: var(--solar-orange);
  --priority-critical: var(--red-giant);

  --overlay-bg-strong: rgba(6, 0, 10, 0.88);
  --overlay-bg-soft: rgba(6, 0, 10, 0.68);

  /* Topbar */
  --topbar-bg: rgba(16, 3, 24, 0.85);
}

[data-theme="nebula-rose"] #stars-canvas {
  opacity: 0.7;
}

/* ============================================
   THEME: Phosphor
   Monochrome green on near-black —
   like a 1970s NASA mission control terminal
   ============================================ */
[data-theme="phosphor"] {
  --void: #000800;
  --deep-space: #000d01;
  --nebula-dark: #001303;
  --nebula: #001a04;
  --nebula-light: #002508;
  --asteroid: #003d10;
  --comet: #005a18;
  --stardust: #00aa44;
  --starlight: #00ee55;
  --supernova: #00ff66;

  --plasma-blue: #00ff41;
  --plasma-blue-dim: #00cc33;
  --plasma-blue-glow: rgba(0, 255, 65, 0.18);
  --ion-purple: #00dd55;
  --ion-purple-glow: rgba(0, 221, 85, 0.2);
  --solar-orange: #ffaa00;
  --solar-orange-glow: rgba(255, 170, 0, 0.15);
  --aurora-green: #00ff88;
  --aurora-green-glow: rgba(0, 255, 136, 0.15);
  --red-giant: #ff3333;
  --red-giant-glow: rgba(255, 51, 51, 0.18);
  --amber-star: #aaff00;

  --priority-low: var(--aurora-green);
  --priority-medium: var(--amber-star);
  --priority-high: var(--solar-orange);
  --priority-critical: var(--red-giant);

  --overlay-bg-strong: rgba(0, 5, 0, 0.90);
  --overlay-bg-soft: rgba(0, 5, 0, 0.70);

  /* Topbar */
  --topbar-bg: rgba(0, 13, 1, 0.88);
}

/* Phosphor: scanline texture overlay using a pseudo-element on body */
[data-theme="phosphor"] body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 3px,
    rgba(0, 0, 0, 0.08) 3px,
    rgba(0, 0, 0, 0.08) 4px
  );
}

/* ============================================
   THEME: Red Planet (Mars)
   Rusty iron-oxide blacks, burnt orange,
   dusty sand — Martian night on the surface
   ============================================ */
[data-theme="mars"] {
  --void: #0f0400;
  --deep-space: #160700;
  --nebula-dark: #1f0d02;
  --nebula: #2c1404;
  --nebula-light: #3f1e08;
  --asteroid: #6e3518;
  --comet: #964c26;
  --stardust: #c87848;
  --starlight: #f2c898;
  --supernova: #fff4e0;

  --plasma-blue: #ff6020;
  --plasma-blue-dim: #cc4812;
  --plasma-blue-glow: rgba(255, 96, 32, 0.18);
  --ion-purple: #e04c10;
  --ion-purple-glow: rgba(224, 76, 16, 0.2);
  --solar-orange: #ff9844;
  --solar-orange-glow: rgba(255, 152, 68, 0.15);
  --aurora-green: #88cc44;
  --aurora-green-glow: rgba(136, 204, 68, 0.15);
  --red-giant: #ff2200;
  --red-giant-glow: rgba(255, 34, 0, 0.2);
  --amber-star: #ffbb44;

  --priority-low: var(--aurora-green);
  --priority-medium: var(--amber-star);
  --priority-high: var(--solar-orange);
  --priority-critical: var(--red-giant);

  --overlay-bg-strong: rgba(10, 3, 0, 0.88);
  --overlay-bg-soft: rgba(10, 3, 0, 0.68);
  --topbar-bg: rgba(22, 7, 0, 0.88);
}

[data-theme="mars"] #stars-canvas { opacity: 0.65; }

/* ============================================
   THEME: Gas Giant (Jupiter)
   Warm amber banding, cream cloud layers,
   and one Great Red Spot for danger
   ============================================ */
[data-theme="jupiter"] {
  --void: #0d0800;
  --deep-space: #160e02;
  --nebula-dark: #201504;
  --nebula: #2e1e08;
  --nebula-light: #422c10;
  --asteroid: #6e4c22;
  --comet: #966c38;
  --stardust: #c89a58;
  --starlight: #f2d898;
  --supernova: #fff8e8;

  --plasma-blue: #e08828;
  --plasma-blue-dim: #bc6c18;
  --plasma-blue-glow: rgba(224, 136, 40, 0.18);
  --ion-purple: #cc6c1c;
  --ion-purple-glow: rgba(204, 108, 28, 0.2);
  --solar-orange: #ff9c3c;
  --solar-orange-glow: rgba(255, 156, 60, 0.15);
  --aurora-green: #88c860;
  --aurora-green-glow: rgba(136, 200, 96, 0.15);
  --red-giant: #dd3322;
  --red-giant-glow: rgba(221, 51, 34, 0.2);
  --amber-star: #ffd050;

  --priority-low: var(--aurora-green);
  --priority-medium: var(--amber-star);
  --priority-high: var(--solar-orange);
  --priority-critical: var(--red-giant);

  --overlay-bg-strong: rgba(8, 5, 0, 0.88);
  --overlay-bg-soft: rgba(8, 5, 0, 0.68);
  --topbar-bg: rgba(22, 14, 2, 0.88);
}

[data-theme="jupiter"] #stars-canvas { opacity: 0.55; }

/* ============================================
   THEME: Frozen Frontier (Pluto)
   Ice-cold deep blue-slate, pale icy accents,
   hints of blush from Tombaugh Regio's heart
   ============================================ */
[data-theme="pluto"] {
  --void: #020810;
  --deep-space: #050e1a;
  --nebula-dark: #091524;
  --nebula: #0e1e30;
  --nebula-light: #152840;
  --asteroid: #285068;
  --comet: #3c6e8c;
  --stardust: #6898b8;
  --starlight: #b8d8f0;
  --supernova: #eaf5ff;

  --plasma-blue: #5cc8f0;
  --plasma-blue-dim: #3ca8d0;
  --plasma-blue-glow: rgba(92, 200, 240, 0.16);
  --ion-purple: #9080d8;
  --ion-purple-glow: rgba(144, 128, 216, 0.18);
  --solar-orange: #f0a060;
  --solar-orange-glow: rgba(240, 160, 96, 0.15);
  --aurora-green: #40c0a8;
  --aurora-green-glow: rgba(64, 192, 168, 0.15);
  --red-giant: #e84868;
  --red-giant-glow: rgba(232, 72, 104, 0.18);
  --amber-star: #f0c8a0;

  --priority-low: var(--aurora-green);
  --priority-medium: var(--amber-star);
  --priority-high: var(--solar-orange);
  --priority-critical: var(--red-giant);

  --overlay-bg-strong: rgba(2, 5, 12, 0.88);
  --overlay-bg-soft: rgba(2, 5, 12, 0.68);
  --topbar-bg: rgba(5, 14, 26, 0.90);
}

[data-theme="pluto"] #stars-canvas { opacity: 0.85; }

/* ============================================
   THEME: Apollo (Moon Landing)
   Greyscale like 1969 lunar footage,
   gold spacecraft foil accents, vignette lens
   ============================================ */
[data-theme="apollo"] {
  --void: #060606;
  --deep-space: #0e0e0e;
  --nebula-dark: #181818;
  --nebula: #202020;
  --nebula-light: #2e2e2e;
  --asteroid: #4a4a4a;
  --comet: #686868;
  --stardust: #9a9a9a;
  --starlight: #e0e0e0;
  --supernova: #ffffff;

  --plasma-blue: #d4a020;
  --plasma-blue-dim: #aa7e12;
  --plasma-blue-glow: rgba(212, 160, 32, 0.18);
  --ion-purple: #c09020;
  --ion-purple-glow: rgba(192, 144, 32, 0.18);
  --solar-orange: #e06820;
  --solar-orange-glow: rgba(224, 104, 32, 0.15);
  --aurora-green: #50b860;
  --aurora-green-glow: rgba(80, 184, 96, 0.15);
  --red-giant: #e03030;
  --red-giant-glow: rgba(224, 48, 48, 0.18);
  --amber-star: #f0d050;

  --priority-low: var(--aurora-green);
  --priority-medium: var(--amber-star);
  --priority-high: var(--solar-orange);
  --priority-critical: var(--red-giant);

  --overlay-bg-strong: rgba(0, 0, 0, 0.90);
  --overlay-bg-soft: rgba(0, 0, 0, 0.72);
  --topbar-bg: rgba(8, 8, 8, 0.92);
}

/* ============================================
   THEME: Event Horizon (Black Hole)
   Absolute black singularity with blazing
   accretion disk orange and a pulsing glow
   ============================================ */
[data-theme="event-horizon"] {
  --void: #000000;
  --deep-space: #040404;
  --nebula-dark: #0a0a0a;
  --nebula: #111111;
  --nebula-light: #1c1c1c;
  --asteroid: #302818;
  --comet: #4e4020;
  --stardust: #b08030;
  --starlight: #f0c050;
  --supernova: #fff8e0;

  --plasma-blue: #ff8c00;
  --plasma-blue-dim: #d06800;
  --plasma-blue-glow: rgba(255, 140, 0, 0.22);
  --ion-purple: #ff5c00;
  --ion-purple-glow: rgba(255, 92, 0, 0.20);
  --solar-orange: #ffaa20;
  --solar-orange-glow: rgba(255, 170, 32, 0.15);
  --aurora-green: #60c880;
  --aurora-green-glow: rgba(96, 200, 128, 0.15);
  --red-giant: #ff2800;
  --red-giant-glow: rgba(255, 40, 0, 0.22);
  --amber-star: #ffd040;

  --priority-low: var(--aurora-green);
  --priority-medium: var(--amber-star);
  --priority-high: var(--solar-orange);
  --priority-critical: var(--red-giant);

  --overlay-bg-strong: rgba(0, 0, 0, 0.95);
  --overlay-bg-soft: rgba(0, 0, 0, 0.80);
  --topbar-bg: rgba(4, 4, 4, 0.96);
}

/* Accretion disk pulsing glow — like heat radiating outward */
@keyframes accretion-pulse {
  0%, 100% { opacity: 0.4; }
  50%       { opacity: 1.0; }
}

[data-theme="event-horizon"] body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  background: radial-gradient(ellipse 70% 50% at 50% 50%,
    rgba(255, 110, 0, 0.05) 0%,
    rgba(255, 60, 0, 0.02) 40%,
    transparent 70%
  );
  animation: accretion-pulse 6s ease-in-out infinite;
}

[data-theme="event-horizon"] #stars-canvas { opacity: 0.4; }

/* ============================================
   THEME: Terra (Earth)
   Deep ocean navy, teal, and forest green —
   like watching Earth from low orbit at dusk
   ============================================ */
[data-theme="terra"] {
  --void: #010c16;
  --deep-space: #021420;
  --nebula-dark: #041e30;
  --nebula: #072840;
  --nebula-light: #0c3454;
  --asteroid: #1a5878;
  --comet: #2a7aa0;
  --stardust: #52aac8;
  --starlight: #b0ddf0;
  --supernova: #eaf8ff;

  --plasma-blue: #00b4d8;
  --plasma-blue-dim: #0090b4;
  --plasma-blue-glow: rgba(0, 180, 216, 0.16);
  --ion-purple: #0077b6;
  --ion-purple-glow: rgba(0, 119, 182, 0.18);
  --solar-orange: #f77f00;
  --solar-orange-glow: rgba(247, 127, 0, 0.15);
  --aurora-green: #2dc653;
  --aurora-green-glow: rgba(45, 198, 83, 0.15);
  --red-giant: #e63946;
  --red-giant-glow: rgba(230, 57, 70, 0.18);
  --amber-star: #f4d35e;

  --priority-low: var(--aurora-green);
  --priority-medium: var(--amber-star);
  --priority-high: var(--solar-orange);
  --priority-critical: var(--red-giant);

  --overlay-bg-strong: rgba(1, 8, 18, 0.88);
  --overlay-bg-soft: rgba(1, 8, 18, 0.68);
  --topbar-bg: rgba(2, 20, 32, 0.90);
}

/* Atmosphere edge glow at the top of the screen */
[data-theme="terra"] body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  background: radial-gradient(ellipse 100% 30% at 50% -5%,
    rgba(0, 140, 220, 0.10) 0%,
    rgba(0, 80, 180, 0.04) 50%,
    transparent 100%
  );
}

[data-theme="terra"] #stars-canvas { opacity: 0.75; }

/* ============================================
   THEME: Sol (The Sun)
   Dark solar chromosphere warming to blinding
   gold — like totality's corona revealed
   ============================================ */
[data-theme="sol"] {
  --void: #0a0700;
  --deep-space: #130e00;
  --nebula-dark: #1e1600;
  --nebula: #2a1e00;
  --nebula-light: #3c2c00;
  --asteroid: #604400;
  --comet: #886000;
  --stardust: #d4a800;
  --starlight: #ffee60;
  --supernova: #ffffe8;

  --plasma-blue: #ffcc00;
  --plasma-blue-dim: #e0aa00;
  --plasma-blue-glow: rgba(255, 204, 0, 0.22);
  --ion-purple: #ff9900;
  --ion-purple-glow: rgba(255, 153, 0, 0.20);
  --solar-orange: #ff7700;
  --solar-orange-glow: rgba(255, 119, 0, 0.15);
  --aurora-green: #66dd44;
  --aurora-green-glow: rgba(102, 221, 68, 0.15);
  --red-giant: #ff2200;
  --red-giant-glow: rgba(255, 34, 0, 0.22);
  --amber-star: #ffffff;

  --priority-low: var(--aurora-green);
  --priority-medium: var(--amber-star);
  --priority-high: var(--solar-orange);
  --priority-critical: var(--red-giant);

  --overlay-bg-strong: rgba(8, 5, 0, 0.90);
  --overlay-bg-soft: rgba(8, 5, 0, 0.70);
  --topbar-bg: rgba(19, 14, 0, 0.90);
}

/* Solar corona bloom from above */
[data-theme="sol"] body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  background: radial-gradient(ellipse 80% 40% at 50% -10%,
    rgba(255, 200, 0, 0.08) 0%,
    rgba(255, 140, 0, 0.03) 50%,
    transparent 100%
  );
}

/* Solar corona text glow */
[data-theme="sol"] .logo-text,
[data-theme="sol"] .logo-subtitle {
  text-shadow: 0 0 12px rgba(255, 204, 0, 0.5);
}

[data-theme="sol"] #stars-canvas { opacity: 0.45; }

/* ============================================
   THEME: Aurora (Northern Lights)
   Deep arctic navy with animated flowing
   ribbons of teal, violet, and green
   ============================================ */
[data-theme="aurora"] {
  --void: #020810;
  --deep-space: #040d1a;
  --nebula-dark: #071522;
  --nebula: #0c1e30;
  --nebula-light: #122840;
  --asteroid: #1e4060;
  --comet: #2c5c80;
  --stardust: #48b8a0;
  --starlight: #c0f0e8;
  --supernova: #eefff8;

  --plasma-blue: #00e8c0;
  --plasma-blue-dim: #00b898;
  --plasma-blue-glow: rgba(0, 232, 192, 0.18);
  --ion-purple: #aa44ff;
  --ion-purple-glow: rgba(170, 68, 255, 0.22);
  --solar-orange: #ff8844;
  --solar-orange-glow: rgba(255, 136, 68, 0.15);
  --aurora-green: #00ff88;
  --aurora-green-glow: rgba(0, 255, 136, 0.15);
  --red-giant: #ff4466;
  --red-giant-glow: rgba(255, 68, 102, 0.18);
  --amber-star: #88ffdd;

  --priority-low: var(--aurora-green);
  --priority-medium: var(--amber-star);
  --priority-high: var(--solar-orange);
  --priority-critical: var(--red-giant);

  --overlay-bg-strong: rgba(2, 6, 14, 0.88);
  --overlay-bg-soft: rgba(2, 6, 14, 0.68);
  --topbar-bg: rgba(4, 13, 26, 0.90);
}

@keyframes aurora-flow {
  0%   { opacity: 0.55; transform: translateX(-4%) scaleY(1.0); }
  33%  { opacity: 0.80; transform: translateX(3%) scaleY(1.15); }
  66%  { opacity: 0.65; transform: translateX(-2%) scaleY(0.92); }
  100% { opacity: 0.55; transform: translateX(-4%) scaleY(1.0); }
}

[data-theme="aurora"] body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  background:
    radial-gradient(ellipse 130% 22% at 25% -2%, rgba(0, 255, 160, 0.10) 0%, transparent 70%),
    radial-gradient(ellipse 110% 18% at 75% -2%, rgba(140, 40, 255, 0.09) 0%, transparent 70%),
    radial-gradient(ellipse 90% 14% at 50% -1%, rgba(0, 200, 255, 0.07) 0%, transparent 70%);
  animation: aurora-flow 14s ease-in-out infinite;
}

[data-theme="aurora"] #stars-canvas { opacity: 0.80; }

/* ============================================
   THEME: James Webb (JWST Infrared)
   Deep purple-black with JWST's iconic warm
   gold nebulae and electric blue star clusters
   ============================================ */
[data-theme="james-webb"] {
  --void: #020108;
  --deep-space: #060412;
  --nebula-dark: #0c0820;
  --nebula: #140e30;
  --nebula-light: #1e1642;
  --asteroid: #362650;
  --comet: #4e3870;
  --stardust: #9060c0;
  --starlight: #eac080;
  --supernova: #fff8ec;

  --plasma-blue: #60a8ff;
  --plasma-blue-dim: #4080e0;
  --plasma-blue-glow: rgba(96, 168, 255, 0.18);
  --ion-purple: #c060f0;
  --ion-purple-glow: rgba(192, 96, 240, 0.20);
  --solar-orange: #ff9040;
  --solar-orange-glow: rgba(255, 144, 64, 0.15);
  --aurora-green: #40e080;
  --aurora-green-glow: rgba(64, 224, 128, 0.15);
  --red-giant: #ff4444;
  --red-giant-glow: rgba(255, 68, 68, 0.18);
  --amber-star: #ffc060;

  --priority-low: var(--aurora-green);
  --priority-medium: var(--amber-star);
  --priority-high: var(--solar-orange);
  --priority-critical: var(--red-giant);

  --overlay-bg-strong: rgba(2, 1, 8, 0.90);
  --overlay-bg-soft: rgba(2, 1, 8, 0.70);
  --topbar-bg: rgba(6, 4, 18, 0.90);
}

/* JWST nebula wisps — warm gold and electric blue corners */
[data-theme="james-webb"] body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  background:
    radial-gradient(ellipse 55% 45% at 15% 85%, rgba(255, 120, 40, 0.07) 0%, transparent 65%),
    radial-gradient(ellipse 50% 40% at 85% 15%, rgba(60, 120, 255, 0.07) 0%, transparent 65%),
    radial-gradient(ellipse 40% 35% at 65% 65%, rgba(180, 60, 220, 0.05) 0%, transparent 65%);
}

[data-theme="james-webb"] #stars-canvas { opacity: 0.90; }

/* ============================================
   THEME: Cosmic Horror (Eldritch)
   Sickly dark greens, bruised purples, a
   pulsing wrongness — something lives here
   ============================================ */
[data-theme="cosmic-horror"] {
  --void: #010502;
  --deep-space: #040c04;
  --nebula-dark: #081408;
  --nebula: #0e1e0c;
  --nebula-light: #162812;
  --asteroid: #223c1a;
  --comet: #305228;
  --stardust: #68984a;
  --starlight: #b8e060;
  --supernova: #f0f8d0;

  --plasma-blue: #44dd44;
  --plasma-blue-dim: #32aa32;
  --plasma-blue-glow: rgba(68, 221, 68, 0.18);
  --ion-purple: #8830cc;
  --ion-purple-glow: rgba(136, 48, 204, 0.24);
  --solar-orange: #cc8820;
  --solar-orange-glow: rgba(204, 136, 32, 0.15);
  --aurora-green: #22ee88;
  --aurora-green-glow: rgba(34, 238, 136, 0.15);
  --red-giant: #cc2244;
  --red-giant-glow: rgba(204, 34, 68, 0.22);
  --amber-star: #aadd22;

  --priority-low: var(--aurora-green);
  --priority-medium: var(--amber-star);
  --priority-high: var(--solar-orange);
  --priority-critical: var(--red-giant);

  --overlay-bg-strong: rgba(1, 5, 1, 0.92);
  --overlay-bg-soft: rgba(1, 5, 1, 0.72);
  --topbar-bg: rgba(4, 12, 4, 0.92);
}

@keyframes eldritch-pulse {
  0%, 100% { opacity: 0.28; }
  50%       { opacity: 0.65; }
}

[data-theme="cosmic-horror"] body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  background: radial-gradient(ellipse 90% 70% at 50% 50%,
    rgba(80, 20, 100, 0.07) 0%,
    rgba(20, 80, 10, 0.05) 50%,
    transparent 80%
  );
  animation: eldritch-pulse 9s ease-in-out infinite;
}

[data-theme="cosmic-horror"] .logo-text,
[data-theme="cosmic-horror"] .logo-subtitle {
  text-shadow: 0 0 10px rgba(68, 221, 68, 0.35);
}

[data-theme="cosmic-horror"] #stars-canvas { opacity: 0.55; }

/* ============================================
   THEME: White Dwarf — Accessibility Edition
   Maximum luminosity. Pure black + pure white.
   All accent colors meet WCAG AAA (7:1+).
   Enhanced borders and focus rings throughout.
   ============================================ */
[data-theme="white-dwarf"] {
  --void: #000000;
  --deep-space: #080808;
  --nebula-dark: #101010;
  --nebula: #1c1c1c;
  --nebula-light: #2c2c2c;
  --asteroid: #484848;
  --comet: #686868;
  --stardust: #b0b0b0;
  --starlight: #eeeeee;
  --supernova: #ffffff;

  /* All accents verified WCAG AAA (≥7:1) on #000 background */
  --plasma-blue: #00e8ff;        /* cyan   — 15.3:1 ✓ */
  --plasma-blue-dim: #00b8cc;
  --plasma-blue-glow: rgba(0, 232, 255, 0.22);
  --ion-purple: #cc88ff;         /* purple — 8.2:1  ✓ */
  --ion-purple-glow: rgba(204, 136, 255, 0.22);
  --solar-orange: #ffaa00;       /* amber  — 10.7:1 ✓ */
  --solar-orange-glow: rgba(255, 170, 0, 0.20);
  --aurora-green: #00ff88;       /* green  — 13.4:1 ✓ */
  --aurora-green-glow: rgba(0, 255, 136, 0.20);
  --red-giant: #ff6666;          /* red    — 7.1:1  ✓ */
  --red-giant-glow: rgba(255, 102, 102, 0.22);
  --amber-star: #ffee00;         /* yellow — 19.6:1 ✓ */

  --priority-low: var(--aurora-green);
  --priority-medium: var(--amber-star);
  --priority-high: var(--solar-orange);
  --priority-critical: var(--red-giant);

  --overlay-bg-strong: rgba(0, 0, 0, 0.94);
  --overlay-bg-soft: rgba(0, 0, 0, 0.80);
  --topbar-bg: rgba(8, 8, 8, 0.97);
}

/* Thicker borders everywhere for visual separation */
[data-theme="white-dwarf"] .card,
[data-theme="white-dwarf"] .kanban-column,
[data-theme="white-dwarf"] .dashboard-panel,
[data-theme="white-dwarf"] .modal-box,
[data-theme="white-dwarf"] .card-panel,
[data-theme="white-dwarf"] .account-section,
[data-theme="white-dwarf"] .sidebar {
  border-width: 2px;
}

/* High-visibility focus rings — critical for keyboard navigation */
[data-theme="white-dwarf"] *:focus-visible {
  outline: 3px solid #ffee00 !important;
  outline-offset: 3px !important;
}

/* Brighter hover states */
[data-theme="white-dwarf"] .card:hover {
  border-color: var(--plasma-blue) !important;
  box-shadow: 0 0 0 1px var(--plasma-blue), 0 4px 16px rgba(0, 232, 255, 0.2) !important;
}

/* Star field: pure white, high opacity */
[data-theme="white-dwarf"] #stars-canvas { opacity: 1.0; }

/* Apollo: cinematic lens vignette like old 16mm NASA footage */
[data-theme="apollo"] body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, 0.55) 100%);
}

/* Apollo: gold glow on headings */
[data-theme="apollo"] .logo-text,
[data-theme="apollo"] .logo-subtitle {
  text-shadow: 0 0 10px rgba(212, 160, 32, 0.4);
}

/* Phosphor: green glow on text elements */
[data-theme="phosphor"] .logo-text,
[data-theme="phosphor"] .logo-subtitle,
[data-theme="phosphor"] h1,
[data-theme="phosphor"] h2,
[data-theme="phosphor"] h3 {
  text-shadow: 0 0 8px rgba(0, 255, 65, 0.5);
}

[data-theme="phosphor"] #stars-canvas {
  opacity: 0.5;
}

/* ---- RESET & BASE ---- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
  overflow: hidden;
  background: var(--void);
  color: var(--starlight);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

#stars-canvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

#app {
  position: relative;
  z-index: 1;
  display: flex;
  height: 100vh;
  overflow: hidden;
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--comet);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--stardust);
}

/* ---- BUTTONS ---- */
button {
  font-family: var(--font-body);
  cursor: pointer;
  border: none;
  outline: none;
  background: none;
  color: var(--starlight);
  transition: all var(--transition-fast);
}

.btn-primary {
  background: linear-gradient(135deg, var(--plasma-blue), var(--plasma-blue-dim));
  color: var(--void);
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 8px 20px;
  border-radius: var(--border-radius);
  box-shadow: 0 0 20px var(--plasma-blue-glow);
}
.btn-primary:hover {
  box-shadow: 0 0 30px color-mix(in srgb, var(--plasma-blue) 30%, transparent);
  transform: translateY(-1px);
}

.btn-ghost {
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--plasma-blue);
  padding: 6px 14px;
  border: 1px solid var(--comet);
  border-radius: var(--border-radius);
}
.btn-ghost:hover {
  background: var(--plasma-blue-glow);
  border-color: var(--plasma-blue);
}

.btn-danger {
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--red-giant);
  padding: 6px 14px;
  border: 1px solid rgba(255, 71, 87, 0.3);
  border-radius: var(--border-radius);
}
.btn-danger:hover {
  background: var(--red-giant-glow);
  border-color: var(--red-giant);
}

.btn-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--border-radius);
  font-size: 17px;
  color: var(--stardust);
  flex-shrink: 0;
}
.btn-icon:hover {
  background: var(--nebula-light);
  color: var(--supernova);
}
.btn-icon-lg {
  width: 36px;
  height: 36px;
  font-size: 21px;
}

.archived-view-badge {
  font-family: var(--font-heading);
  font-size: 10px;
  letter-spacing: 0.12em;
  padding: 3px 10px;
  border-radius: 4px;
  border: 1px solid var(--amber-star);
  color: var(--amber-star);
  background: rgba(255,180,0,0.08);
  align-self: center;
  flex-shrink: 0;
  animation: demo-pulse 2.5s ease-in-out infinite;
}

.save-status {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--text-dim);
  opacity: 0;
  transition: opacity 0.3s ease;
  white-space: nowrap;
  align-self: center;
  flex-shrink: 0;
  pointer-events: none;
}
.save-status.visible { opacity: 1; }
.save-status.saving  { color: var(--text-dim); }
.save-status.saved   { color: #5ccc6f; }
.save-status.error   { color: #ff6b6b; }

.demo-mode-badge {
  font-family: var(--font-heading);
  font-size: 10px;
  letter-spacing: 0.12em;
  padding: 3px 8px;
  border-radius: 4px;
  border: 1px solid var(--amber-star);
  color: var(--amber-star);
  background: rgba(255, 180, 0, 0.08);
  align-self: center;
  flex-shrink: 0;
  animation: demo-pulse 2.5s ease-in-out infinite;
}

.btn-demo-register {
  font-family: var(--font-heading);
  font-size: 11px;
  letter-spacing: 0.08em;
  padding: 0 14px;
  height: 32px;
  border-radius: var(--border-radius);
  border: 1px solid var(--amber-star);
  background: transparent;
  color: var(--amber-star);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
  animation: demo-pulse 2.5s ease-in-out infinite;
}
.btn-demo-register:hover {
  background: var(--amber-star);
  color: var(--void-black);
  animation: none;
  box-shadow: 0 0 12px rgba(255, 180, 0, 0.4);
}
@keyframes demo-pulse {
  0%, 100% { box-shadow: 0 0 0px rgba(255, 180, 0, 0); }
  50%       { box-shadow: 0 0 10px rgba(255, 180, 0, 0.35); }
}

/* ---- SIDEBAR ---- */
.sidebar {
  width: var(--sidebar-width);
  min-width: var(--sidebar-width);
  height: 100vh;
  background: var(--deep-space);
  border-right: 1px solid var(--nebula-light);
  display: flex;
  flex-direction: column;
  transition: margin-left var(--transition-med), transform var(--transition-med);
  overflow: hidden;
}
.sidebar.collapsed {
  margin-left: calc(-1 * var(--sidebar-width));
}

.sidebar-header {
  padding: 20px 18px 16px;
  border-bottom: 1px solid var(--nebula-light);
}

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

.logo-icon {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  vertical-align: middle;
  color: var(--plasma-blue);
  filter: drop-shadow(0 0 8px var(--plasma-blue));
  animation: pulse-glow 3s ease-in-out infinite;
}

@keyframes pulse-glow {
  0%, 100% { filter: drop-shadow(0 0 8px var(--plasma-blue)); }
  50% { filter: drop-shadow(0 0 16px var(--plasma-blue)); }
}

.logo-text {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 4px;
  background: linear-gradient(135deg, var(--plasma-blue), var(--supernova));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.logo-subtitle {
  font-family: var(--font-heading);
  font-size: 9px;
  letter-spacing: 4px;
  color: var(--stardust);
  margin-top: 4px;
  text-transform: uppercase;
}

/* ---- SIDEBAR TABS ---- */
.sidebar-tabs {
  display: flex;
  flex-shrink: 0;
  border-bottom: 1px solid var(--nebula-light);
}

.sidebar-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 10px 4px 8px;
  min-height: 52px;
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  touch-action: manipulation;
  font-family: var(--font-heading);
  font-size: 8px;
  letter-spacing: 0.1em;
  color: var(--stardust);
  transition: color var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast);
}

.sidebar-tab:hover {
  color: var(--starlight);
  background: var(--nebula);
}

.sidebar-tab-icon {
  font-size: 15px;
  line-height: 1;
}

.sidebar-tab-label {
  font-size: 11px;
  letter-spacing: 0.08em;
}

/* Orbit tab — amber */
.sidebar-tab[data-tab="orbit"].active {
  color: var(--amber-star);
  border-bottom-color: var(--amber-star);
  background: rgba(255, 192, 72, 0.07);
}
.sidebar-tab[data-tab="orbit"]:not(.active):hover {
  color: var(--amber-star);
}

/* Missions tab — plasma blue */
.sidebar-tab[data-tab="missions"].active {
  color: var(--plasma-blue);
  border-bottom-color: var(--plasma-blue);
  background: color-mix(in srgb, var(--plasma-blue) 7%, transparent);
}
.sidebar-tab[data-tab="missions"]:not(.active):hover {
  color: var(--plasma-blue);
}

/* Shared tab — ion purple */
.sidebar-tab[data-tab="shared"].active {
  color: var(--ion-purple);
  border-bottom-color: var(--ion-purple);
  background: color-mix(in srgb, var(--ion-purple) 10%, transparent);
}
.sidebar-tab[data-tab="shared"]:not(.active):hover {
  color: var(--ion-purple);
}

/* Tab content — single scroll area */
.sidebar-tab-content {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

.sidebar-tab-panel {
  display: none;
}

.sidebar-tab-panel.active {
  display: block;
}

.sidebar-section {
  padding: 8px 0;
  flex-shrink: 0;
}

.sidebar-section-axis {
  flex-shrink: 0;
}

.sidebar-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 18px;
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 3px;
  color: var(--stardust);
  text-transform: uppercase;
}

.sidebar-section-header .btn-icon {
  width: 24px;
  height: 24px;
  font-size: 20px;
  color: var(--plasma-blue);
}

.mission-list {
  list-style: none;
  padding: 6px 8px;
}

.mission-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  margin-bottom: 2px;
  border-radius: var(--border-radius);
  cursor: pointer;
  touch-action: manipulation;
  transition: all var(--transition-fast);
  position: relative;
}
.mission-item:hover {
  background: var(--nebula);
}
.mission-item.active {
  background: var(--nebula-light);
  border-left: 2px solid var(--plasma-blue);
  box-shadow: inset 0 0 20px color-mix(in srgb, var(--plasma-blue) 5%, transparent);
}

/* ---- MISSION DRAG & DROP ---- */
.mission-drag-handle {
  font-size: 14px;
  color: var(--nebula-light);
  cursor: grab;
  flex-shrink: 0;
  transition: color var(--transition-fast);
  letter-spacing: -1px;
}
.mission-item:hover .mission-drag-handle {
  color: var(--stardust);
}

.mission-item.mission-dragging {
  opacity: 0.4;
  cursor: grabbing;
}

/* Show unfiled zone + highlight folders when dragging a mission */
.unfiled-drop-zone {
  display: none;
  align-items: center;
  justify-content: center;
  margin: 4px 8px;
  padding: 6px;
  border: 1px dashed var(--comet);
  border-radius: var(--border-radius);
  font-size: 11px;
  font-family: var(--font-heading);
  letter-spacing: 2px;
  color: var(--stardust);
  text-transform: uppercase;
  transition: all var(--transition-fast);
  cursor: default;
}
body.mission-drag-active .unfiled-drop-zone {
  display: flex;
}
.unfiled-drop-zone.drag-over {
  border-color: var(--plasma-blue);
  color: var(--plasma-blue);
  background: var(--plasma-blue-glow);
}

/* Highlight folder header when a mission is dragged over it */
.folder-header.drag-over {
  background: var(--nebula-light);
  border-radius: var(--border-radius);
  box-shadow: inset 0 0 0 1px var(--plasma-blue), 0 0 12px var(--plasma-blue-glow);
}
.folder-header.drag-over .folder-icon {
  filter: drop-shadow(0 0 6px var(--plasma-blue));
}

/* Pulse all folder items to indicate they're valid targets */
body.mission-drag-active .folder-header {
  border: 1px dashed var(--comet);
  border-radius: var(--border-radius);
  transition: all var(--transition-fast);
}

.mission-item-icon {
  font-size: 17px;
  flex-shrink: 0;
}

.mission-item-name {
  font-size: 14px;
  color: var(--starlight);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

.mission-item-count {
  font-size: 11px;
  color: var(--stardust);
  background: var(--nebula-dark);
  padding: 2px 6px;
  border-radius: 10px;
}

.mission-item-actions {
  display: none;
  gap: 2px;
}
.mission-item:hover .mission-item-actions {
  display: flex;
}
.mission-item-actions .btn-icon {
  width: 22px;
  height: 22px;
  font-size: 13px;
}

.mission-item.indented {
  padding-left: 28px;
}

/* ---- FOLDER ITEMS ---- */
.folder-item {
  list-style: none;
  margin-bottom: 2px;
}

.folder-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: var(--border-radius);
  cursor: pointer;
  touch-action: manipulation;
  transition: background var(--transition-fast);
  font-size: 13px;
  color: var(--stardust);
}
.folder-header:hover {
  background: var(--nebula);
}

.folder-toggle {
  font-size: 10px;
  width: 10px;
  text-align: center;
  color: var(--stardust);
  flex-shrink: 0;
  transition: transform var(--transition-fast);
}

.folder-icon {
  font-size: 15px;
  flex-shrink: 0;
}

.folder-name {
  flex: 1;
  font-size: 13px;
  color: var(--starlight);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: var(--font-heading);
  font-size: 11px;
  letter-spacing: 1px;
}

.folder-actions {
  display: none;
}
.folder-header:hover .folder-actions {
  display: flex;
}
.folder-actions .btn-icon {
  width: 22px;
  height: 22px;
  font-size: 15px;
}

.folder-missions {
  list-style: none;
  overflow: hidden;
  max-height: 1000px;
  transition: max-height var(--transition-med);
}
.folder-missions.collapsed {
  max-height: 0;
}

.sidebar-footer {
  padding: 14px 18px;
  border-top: 1px solid var(--nebula-light);
}

.system-status {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--stardust);
  text-transform: uppercase;
  font-family: var(--font-heading);
}

.status-dot {
  width: 6px;
  height: 6px;
  background: var(--aurora-green);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--aurora-green);
  animation: blink 2s infinite;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* Offline state */
#system-status.offline .status-dot {
  background: var(--amber-star);
  box-shadow: 0 0 8px var(--amber-star);
  animation: blink-amber 1.2s infinite;
}

#system-status.offline #system-status-text {
  color: var(--amber-star);
}

@keyframes blink-amber {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

.stats {
  margin-top: 8px;
  font-size: 12px;
  color: var(--stardust);
}

/* ---- MAIN ---- */
.main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  min-width: 0;
}

/* ---- TOPBAR ---- */
.topbar {
  height: var(--topbar-height);
  min-height: var(--topbar-height);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 20px;
  border-bottom: 1px solid var(--nebula-light);
  background: var(--topbar-bg);
  backdrop-filter: blur(12px);
}

.sidebar-toggle {
  font-size: 20px;
}

.topbar-mission-info {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.mission-title {
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--supernova);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mission-badge {
  font-family: var(--font-heading);
  font-size: 10px;
  letter-spacing: 1px;
  padding: 3px 10px;
  border-radius: 12px;
  text-transform: uppercase;
  display: none;
}
.mission-badge.active-badge {
  display: inline-block;
  background: var(--plasma-blue-glow);
  color: var(--plasma-blue);
  border: 1px solid color-mix(in srgb, var(--plasma-blue) 30%, transparent);
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ---- BOARD ---- */
/* ---- Board filter bar ---- */
.board-filter-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 8px 20px;
  background: rgba(255,255,255,0.03);
  border-bottom: 1px solid var(--nebula-light, rgba(255,255,255,0.07));
  flex-shrink: 0;
}
.filter-group {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.filter-label {
  font-family: var(--font-heading);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--text-dim);
  margin-right: 2px;
}
.filter-chip {
  font-family: var(--font-body);
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 12px;
  border: 1px solid var(--nebula-light, rgba(255,255,255,0.12));
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s ease;
}
.filter-chip:hover { background: rgba(255,255,255,0.06); }
.filter-chip.active {
  border-color: var(--plasma-blue);
  color: var(--plasma-blue);
  background: rgba(91,200,245,0.1);
}
.filter-priority-chip[data-priority="low"].active    { border-color: #5ccc6f; color: #5ccc6f; background: rgba(92,204,111,0.1); }
.filter-priority-chip[data-priority="medium"].active { border-color: var(--amber-star); color: var(--amber-star); background: rgba(255,180,0,0.1); }
.filter-priority-chip[data-priority="high"].active   { border-color: #f5a623; color: #f5a623; background: rgba(245,166,35,0.1); }
.filter-priority-chip[data-priority="critical"].active { border-color: #ff6b6b; color: #ff6b6b; background: rgba(255,107,107,0.1); }
.filter-tag-input {
  font-family: var(--font-body);
  font-size: 12px;
  background: transparent;
  border: 1px solid var(--nebula-light, rgba(255,255,255,0.12));
  border-radius: 12px;
  padding: 3px 10px;
  color: var(--text-primary);
  width: 120px;
}
.filter-tag-input:focus { outline: none; border-color: var(--plasma-blue); }
.filter-tag-chips { display: flex; gap: 4px; flex-wrap: wrap; }
.filter-tag-chips .filter-chip { cursor: pointer; }
.filter-clear-btn { font-size: 11px; margin-left: auto; opacity: 0.6; }
.filter-clear-btn:hover { opacity: 1; }
.filter-tag-mode-btn {
  font-family: var(--font-heading);
  font-size: 10px;
  letter-spacing: 0.05em;
  padding: 2px 7px;
  border: 1px solid var(--plasma-blue);
  color: var(--plasma-blue);
  background: transparent;
  border-radius: 4px;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.filter-tag-mode-btn:hover { background: var(--plasma-blue-glow); }
.filter-tag-mode-btn.tag-mode-or {
  border-color: var(--amber-star);
  color: var(--amber-star);
}
.filter-tag-mode-btn.tag-mode-or:hover { background: rgba(255,180,0,0.1); }

/* ---- Card template picker ---- */
.template-picker-list { max-height: 280px; overflow-y: auto; margin-bottom: 12px; }
.template-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s;
}
.template-row:hover { background: rgba(255,255,255,0.05); }
.template-row-name { font-family: var(--font-body); font-size: 13px; color: var(--text-primary); }
.template-row-meta { font-size: 11px; color: var(--text-dim); }
.template-row-delete { opacity: 0; font-size: 13px; color: var(--text-dim); background: none; border: none; cursor: pointer; padding: 2px 6px; }
.template-row:hover .template-row-delete { opacity: 1; }
.template-row-delete:hover { color: #ff6b6b; }
.template-empty { color: var(--text-dim); font-size: 13px; padding: 12px 0; text-align: center; }

.board {
  flex: 1;
  display: flex;
  gap: 16px;
  padding: 20px;
  overflow-x: auto;
  overflow-y: hidden;
  align-items: flex-start;
}

/* ---- EMPTY STATE ---- */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  text-align: center;
  color: var(--stardust);
}

.empty-state-icon {
  font-size: 68px;
  color: var(--plasma-blue);
  filter: drop-shadow(0 0 24px var(--plasma-blue));
  margin-bottom: 20px;
  animation: float 4s ease-in-out infinite;
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

.empty-state h2 {
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 3px;
  color: var(--supernova);
  margin-bottom: 8px;
}

.empty-state p {
  font-size: 14px;
  margin-bottom: 24px;
  max-width: 360px;
}

/* ---- COLUMN ---- */
.column {
  width: var(--column-width);
  min-width: var(--column-width);
  max-height: calc(100vh - var(--topbar-height) - 40px);
  background: var(--nebula-dark);
  border: 1px solid var(--nebula-light);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: box-shadow var(--transition-fast);
}
.column.drag-over {
  border-color: var(--plasma-blue);
  box-shadow: 0 0 24px var(--plasma-blue-glow), inset 0 0 24px var(--plasma-blue-glow);
}

.column-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 14px 10px;
  border-bottom: 1px solid var(--nebula-light);
}

.column-color-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.column-name {
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--supernova);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: none;
  border: none;
  outline: none;
  cursor: text;
  padding: 2px 4px;
  border-radius: 3px;
}
.column-name:focus {
  background: var(--nebula);
}

.column-count {
  font-size: 12px;
  color: var(--stardust);
  background: var(--nebula);
  padding: 1px 7px;
  border-radius: 10px;
}

.column-actions {
  display: flex;
  gap: 2px;
}
.column-actions .btn-icon {
  width: 24px;
  height: 24px;
  font-size: 15px;
  opacity: 1;
  color: var(--stardust);
  transition: color var(--transition-fast);
}
.column-header:hover .column-actions .btn-icon {
  color: var(--supernova);
}

.column-body {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 60px;
}

.column-footer {
  padding: 8px;
  border-top: 1px solid var(--nebula-light);
  display: flex;
  gap: 4px;
  align-items: center;
}

.btn-from-template {
  flex-shrink: 0;
  padding: 6px 8px;
  border-radius: var(--border-radius);
  font-size: 12px;
  color: var(--text-dim);
  opacity: 0.6;
  transition: opacity 0.15s;
}
.btn-from-template:hover { opacity: 1; background: var(--nebula); }

.btn-add-card {
  flex: 1;
  padding: 8px;
  border-radius: var(--border-radius);
  font-size: 13px;
  color: var(--stardust);
  text-align: left;
  display: flex;
  align-items: center;
  gap: 6px;
}
.btn-add-card:hover {
  background: var(--nebula);
  color: var(--starlight);
}

/* ---- CARD ---- */
.card {
  background: var(--nebula);
  border: 1px solid var(--nebula-light);
  border-radius: var(--card-radius);
  padding: 10px 12px;
  cursor: grab;
  touch-action: manipulation;
  transition: all var(--transition-fast);
  position: relative;
}
.card:hover {
  border-color: var(--comet);
  background: var(--nebula-light);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}
.card:active {
  cursor: grabbing;
}

.card.dragging {
  opacity: 0.4;
  transform: scale(0.98);
}

.card-drag-preview {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.92;
  transform: rotate(3deg);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5), 0 0 20px var(--plasma-blue-glow);
  border-color: var(--plasma-blue) !important;
}

.card-priority-bar {
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  border-radius: var(--card-radius) 0 0 var(--card-radius);
}

.card-title {
  font-size: 14px;
  font-weight: normal;
  color: var(--supernova);
  margin-bottom: 6px;
  padding-left: 6px;
}
.card--complete .card-title {
  text-decoration: line-through;
  opacity: 0.55;
}

.card:focus {
  outline: 2px solid var(--plasma-blue, #5bc8f5);
  outline-offset: 2px;
}
.card:focus-visible {
  outline: 2px solid var(--plasma-blue, #5bc8f5);
  outline-offset: 2px;
}

.card--archived {
  opacity: 0.5;
  border-style: dashed;
}
.card--archived .card-title::before {
  content: '⬟ ';
  font-size: 0.8em;
  opacity: 0.7;
}

.col-archived-badge {
  font-size: 10px;
  opacity: 0.5;
  margin-left: 4px;
  font-family: var(--font-body);
}

.btn-show-archived {
  font-size: 12px;
  opacity: 0.7;
}
.btn-show-archived.active {
  opacity: 1;
  color: var(--amber-star);
  border-color: var(--amber-star);
}

.card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding-left: 6px;
}

.card-tag {
  font-size: 11px;
  padding: 1px 7px;
  border-radius: 8px;
  background: var(--asteroid);
  color: var(--stardust);
  letter-spacing: 0.5px;
}

/* ---- BOARD EMPTY STATE (no columns) ---- */
.board-no-columns {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  padding: 80px 24px;
  text-align: center;
}
.board-no-columns-icon {
  font-size: 3rem;
  color: var(--nebula-light);
}
.board-no-columns-title {
  font-family: var(--font-heading);
  font-size: 1rem;
  color: var(--starlight);
  letter-spacing: 0.05em;
}
.board-no-columns-sub {
  font-size: 0.85rem;
  color: var(--stardust);
  max-width: 280px;
}
.board-no-columns-btn { margin-top: 8px; }

/* ---- ADD COLUMN PLACEHOLDER ---- */
.add-column-placeholder {
  width: var(--column-width);
  min-width: var(--column-width);
  min-height: 120px;
  border: 2px dashed var(--nebula-light);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-fast);
  color: var(--stardust);
  font-family: var(--font-heading);
  font-size: 12px;
  letter-spacing: 2px;
}
.add-column-placeholder:hover {
  border-color: var(--plasma-blue);
  color: var(--plasma-blue);
  background: var(--plasma-blue-glow);
}

/* ---- INLINE INPUT ---- */
.inline-input {
  width: 100%;
  padding: 8px 10px;
  background: var(--nebula);
  border: 1px solid var(--comet);
  border-radius: var(--border-radius);
  color: var(--supernova);
  font-family: var(--font-body);
  font-size: 14px;
  outline: none;
}
.inline-input:focus {
  border-color: var(--plasma-blue);
  box-shadow: 0 0 0 2px var(--plasma-blue-glow);
}

/* ---- MODALS ---- */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: var(--overlay-bg-strong);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn var(--transition-fast);
}
.modal-overlay.hidden {
  display: none;
}

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

.modal {
  background: var(--nebula-dark);
  border: 1px solid var(--nebula-light);
  border-radius: 12px;
  width: 420px;
  max-width: 90vw;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5);
  animation: slideUp var(--transition-med);
}

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

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid var(--nebula-light);
}

.modal-header h2 {
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--supernova);
}

.modal-body {
  padding: 20px;
}

/* Demo welcome modal */
.demo-welcome {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.demo-welcome-hero {
  font-size: 48px;
  text-align: center;
  line-height: 1;
}
.demo-welcome-lead {
  text-align: center;
  font-size: 15px;
  color: var(--starlight);
  margin: 0;
}
.demo-welcome-features {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: rgba(255,255,255,0.04);
  border-radius: 8px;
  padding: 12px 16px;
}
.demo-welcome-feature {
  font-size: 13px;
  color: var(--plasma-blue);
}
.demo-welcome-limits {
  font-size: 12px;
  color: var(--stardust);
  background: rgba(255,180,0,0.07);
  border: 1px solid rgba(255,180,0,0.2);
  border-radius: 8px;
  padding: 10px 14px;
  line-height: 1.5;
}
.demo-welcome-limits strong {
  color: var(--amber-star);
}
.demo-welcome-sub {
  font-size: 13px;
  color: var(--starlight);
  line-height: 1.6;
  margin: 0;
  text-align: center;
}
.demo-welcome-sub strong {
  color: var(--amber-star);
}
.demo-welcome-cta p {
  font-size: 13px;
  color: var(--starlight);
  margin: 0 0 14px;
  line-height: 1.5;
  text-align: center;
}
.demo-welcome-cta strong {
  color: var(--supernova);
}
.demo-welcome-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.modal-field {
  margin-bottom: 16px;
}

.modal-field label {
  display: block;
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 2px;
  color: var(--stardust);
  text-transform: uppercase;
  margin-bottom: 6px;
}

.modal-field input,
.modal-field select {
  width: 100%;
  padding: 9px 12px;
  background: var(--nebula);
  border: 1px solid var(--comet);
  border-radius: var(--border-radius);
  color: var(--supernova);
  font-family: var(--font-body);
  font-size: 14px;
  outline: none;
}
.modal-field input:focus,
.modal-field select:focus {
  border-color: var(--plasma-blue);
  box-shadow: 0 0 0 2px var(--plasma-blue-glow);
}

.modal-field select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%238892b0'%3E%3Cpath d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}

.modal-field select option {
  background: var(--nebula-dark);
  color: var(--starlight);
}

.icon-picker {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.icon-option {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  border: 2px solid var(--nebula-light);
  border-radius: 8px;
  cursor: pointer;
  transition: all var(--transition-fast);
}
.icon-option:hover {
  border-color: var(--comet);
  background: var(--nebula);
}
.icon-option.selected {
  border-color: var(--plasma-blue);
  background: var(--plasma-blue-glow);
  box-shadow: 0 0 12px var(--plasma-blue-glow);
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 20px;
}

.confirm-overlay {
  z-index: 1100;
}
.confirm-modal {
  width: 360px;
}
.confirm-modal .modal-body p {
  color: var(--starlight);
  font-size: 13px;
  line-height: 1.6;
  margin: 0;
}
.confirm-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 16px 20px;
  border-top: 1px solid var(--nebula-light);
}

/* ---- CARD PANEL ---- */
.card-panel-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: var(--overlay-bg-soft);
  backdrop-filter: blur(4px);
  display: flex;
  justify-content: flex-end;
  animation: fadeIn var(--transition-fast);
}
.card-panel-overlay.hidden {
  display: none;
}

.card-panel {
  width: 520px;
  max-width: 95vw;
  height: 100vh;
  background: var(--nebula-dark);
  border-left: 1px solid var(--nebula-light);
  display: flex;
  flex-direction: column;
  animation: slideLeft var(--transition-med);
  box-shadow: -12px 0 48px rgba(0, 0, 0, 0.4);
}

@keyframes slideLeft {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

.card-panel-header {
  padding: 20px;
  border-bottom: 1px solid var(--nebula-light);
}

.card-panel-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.card-panel-title-input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  font-family: var(--font-heading);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--supernova);
  padding: 4px 0;
  border-bottom: 2px solid transparent;
}
.card-panel-title-input:focus {
  border-bottom-color: var(--plasma-blue);
}

.card-panel-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}

.card-meta-badge {
  font-family: var(--font-heading);
  font-size: 10px;
  letter-spacing: 1px;
  padding: 3px 10px;
  border-radius: 12px;
  text-transform: uppercase;
  background: var(--nebula);
  border: 1px solid var(--nebula-light);
  color: var(--stardust);
}

.card-meta-date {
  font-size: 12px;
  color: var(--stardust);
  margin-left: auto;
}

.card-panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}

.card-panel-field {
  margin-bottom: 16px;
}

.card-panel-field label {
  display: block;
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 2px;
  color: var(--stardust);
  text-transform: uppercase;
  margin-bottom: 6px;
}

.card-panel-field select,
.card-panel-field input:not(.checklist-item-check):not(.checklist-item-text):not(.tag-chip-input) {
  width: 100%;
  padding: 8px 12px;
  background: var(--nebula);
  border: 1px solid var(--comet);
  border-radius: var(--border-radius);
  color: var(--supernova);
  font-family: var(--font-body);
  font-size: 14px;
  outline: none;
}
.card-panel-field select:focus,
.card-panel-field input:not(.checklist-item-check):not(.checklist-item-text):not(.tag-chip-input):focus {
  border-color: var(--plasma-blue);
  box-shadow: 0 0 0 2px var(--plasma-blue-glow);
}

/* ---- TAG CHIP INPUT ---- */
.tag-chip-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: var(--nebula);
  border: 1px solid var(--comet);
  border-radius: 6px;
  cursor: text;
  min-height: 38px;
  transition: border-color 150ms, box-shadow 150ms;
}
.tag-chip-wrap:focus-within {
  border-color: var(--plasma-blue);
  box-shadow: 0 0 0 2px var(--plasma-blue-glow);
}
.tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: color-mix(in srgb, var(--plasma-blue) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--plasma-blue) 25%, transparent);
  color: var(--plasma-blue);
  font-family: var(--font-heading);
  font-size: 10px;
  letter-spacing: 0.08em;
  padding: 2px 8px 2px 9px;
  border-radius: 20px;
  white-space: nowrap;
}
.tag-chip-remove {
  background: none;
  border: none;
  color: var(--plasma-blue);
  opacity: 0.6;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  font-size: 13px;
  display: flex;
  align-items: center;
  transition: opacity 150ms;
}
.tag-chip-remove:hover { opacity: 1; }
.tag-chip-input {
  flex: 1;
  min-width: 120px;
  background: transparent;
  border: none;
  outline: none;
  box-shadow: none;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--supernova);
  padding: 2px 0;
}
.tag-chip-input::placeholder { color: var(--stardust); opacity: 0.5; }

.card-panel-field select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%238892b0'%3E%3Cpath d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}

.card-panel-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--nebula-light);
  margin-bottom: 12px;
}

.tab-btn {
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--stardust);
  padding: 8px 16px;
  border-bottom: 2px solid transparent;
  transition: all var(--transition-fast);
}
.tab-btn:hover {
  color: var(--starlight);
}
.tab-btn.active {
  color: var(--plasma-blue);
  border-bottom-color: var(--plasma-blue);
}

.card-panel-tab-content.hidden {
  display: none;
}

.card-panel-textarea {
  width: 100%;
  min-height: 250px;
  resize: vertical;
  background: var(--nebula);
  border: 1px solid var(--comet);
  border-radius: var(--border-radius);
  color: var(--starlight);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.6;
  padding: 12px;
  outline: none;
}
.card-panel-textarea:focus {
  border-color: var(--plasma-blue);
  box-shadow: 0 0 0 2px var(--plasma-blue-glow);
}
.markdown-hint {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--stardust);
  line-height: 1.5;
}
.markdown-hint strong {
  color: var(--plasma-blue);
  font-weight: 600;
}

.card-panel-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 20px;
  border-top: 1px solid var(--nebula-light);
}
.card-panel-footer #card-panel-save { margin-left: auto; }

/* ---- MARKDOWN BODY ---- */
.markdown-body {
  color: var(--starlight);
  font-size: 14px;
  line-height: 1.7;
  padding: 12px;
  background: var(--nebula);
  border-radius: var(--border-radius);
  min-height: 100px;
}

.markdown-body h1, .markdown-body h2, .markdown-body h3 {
  font-family: var(--font-heading);
  color: var(--supernova);
  margin: 16px 0 8px;
  letter-spacing: 1px;
}
.markdown-body h1 { font-size: 22px; }
.markdown-body h2 { font-size: 17px; }
.markdown-body h3 { font-size: 15px; }

.markdown-body p {
  margin-bottom: 10px;
}

.markdown-body code {
  background: var(--asteroid);
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 13px;
  color: var(--plasma-blue);
}

.markdown-body pre {
  background: var(--void);
  border: 1px solid var(--nebula-light);
  border-radius: var(--border-radius);
  padding: 12px;
  overflow-x: auto;
  margin: 10px 0;
}
.markdown-body pre code {
  background: none;
  padding: 0;
  color: var(--starlight);
}

.markdown-body ul, .markdown-body ol {
  padding-left: 20px;
  margin-bottom: 10px;
}

.markdown-body blockquote {
  border-left: 3px solid var(--plasma-blue);
  padding-left: 12px;
  color: var(--stardust);
  margin: 10px 0;
}

.markdown-body strong {
  color: var(--supernova);
}

.markdown-body a {
  color: var(--plasma-blue);
  text-decoration: none;
}

.markdown-body hr {
  border: none;
  border-top: 1px solid var(--nebula-light);
  margin: 16px 0;
}

/* ---- CONTEXT MENU ---- */
.toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 5000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}
.toast {
  font-family: var(--font-body);
  font-size: 13px;
  padding: 10px 16px;
  border-radius: 6px;
  border-left: 3px solid transparent;
  background: var(--nebula-dark, #1a1f2e);
  box-shadow: 0 4px 16px rgba(0,0,0,0.5);
  color: var(--text-primary, #e0e6f0);
  max-width: 320px;
  pointer-events: auto;
  animation: toast-in 0.25s ease;
  transition: opacity 0.3s ease;
}
.toast.error   { border-color: #ff6b6b; }
.toast.success { border-color: #5ccc6f; }
.toast.info    { border-color: var(--plasma-blue, #5bc8f5); }
.toast.fading  { opacity: 0; }
@keyframes toast-in {
  from { transform: translateY(12px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

.context-menu {
  position: fixed;
  z-index: 2000;
  background: var(--nebula-dark);
  border: 1px solid var(--nebula-light);
  border-radius: 8px;
  padding: 4px;
  min-width: 160px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}
.context-menu.hidden {
  display: none;
}

.context-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 13px;
  color: var(--starlight);
  cursor: pointer;
  transition: background var(--transition-fast);
}
.context-menu-item:hover {
  background: var(--nebula-light);
}
.context-menu-item.danger {
  color: var(--red-giant);
}
.context-menu-item.danger:hover {
  background: var(--red-giant-glow);
}

.context-menu-sep {
  height: 1px;
  background: var(--nebula-light);
  margin: 4px 8px;
}

/* ---- COLUMN COLORS ---- */
.col-color-blue { background: var(--plasma-blue); box-shadow: 0 0 6px var(--plasma-blue); }
.col-color-purple { background: var(--ion-purple); box-shadow: 0 0 6px var(--ion-purple); }
.col-color-green { background: var(--aurora-green); box-shadow: 0 0 6px var(--aurora-green); }
.col-color-orange { background: var(--solar-orange); box-shadow: 0 0 6px var(--solar-orange); }
.col-color-red { background: var(--red-giant); box-shadow: 0 0 6px var(--red-giant); }
.col-color-amber { background: var(--amber-star); box-shadow: 0 0 6px var(--amber-star); }

/* ---- PRIORITY BAR COLORS ---- */
.priority-bar-low { background: var(--priority-low); }
.priority-bar-medium { background: var(--priority-medium); }
.priority-bar-high { background: var(--priority-high); }
.priority-bar-critical { background: var(--priority-critical); animation: critical-pulse 1.5s ease-in-out infinite; }

@keyframes critical-pulse {
  0%, 100% { box-shadow: 0 0 4px var(--red-giant); }
  50% { box-shadow: 0 0 12px var(--red-giant); }
}

/* ---- SIDEBAR DIVIDER ---- */
.sidebar-divider {
  height: 1px;
  background: var(--nebula-light);
  margin: 4px 0;
  flex-shrink: 0;
}

/* ---- ORBIT SECTION ---- */

.axis-header span {
  color: var(--amber-star);
}

.axis-add-btn {
  color: var(--amber-star) !important;
}

.axis-list {
  list-style: none;
  padding: 4px 8px;
}

/* ---- AXIS ITEM ---- */
.axis-item {
  margin-bottom: 4px;
}

.axis-item-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: var(--border-radius);
  cursor: pointer;
  touch-action: manipulation;
  transition: background var(--transition-fast);
  border: 1px solid transparent;
}
.axis-item-header:hover {
  background: var(--nebula);
  border-color: rgba(255, 192, 72, 0.15);
}

.axis-toggle {
  font-size: 10px;
  width: 10px;
  color: var(--stardust);
  flex-shrink: 0;
}

.axis-orb {
  font-size: 15px;
  color: var(--amber-star);
  filter: drop-shadow(0 0 4px var(--amber-star));
  flex-shrink: 0;
  animation: axis-pulse 4s ease-in-out infinite;
}

@keyframes axis-pulse {
  0%, 100% { filter: drop-shadow(0 0 4px var(--amber-star)); }
  50% { filter: drop-shadow(0 0 10px var(--amber-star)); }
}

.axis-name {
  flex: 1;
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--amber-star);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.axis-actions {
  display: none;
}
.axis-item-header:hover .axis-actions {
  display: flex;
}
.axis-actions .btn-icon {
  width: 22px;
  height: 22px;
  font-size: 13px;
}

/* ---- AXIS SEASON LIST ---- */
.axis-season-list {
  list-style: none;
  overflow: hidden;
  max-height: 500px;
  transition: max-height var(--transition-med);
  padding-left: 4px;
}
.axis-season-list.collapsed {
  max-height: 0;
}

.axis-season-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px 7px 24px;
  border-radius: var(--border-radius);
  cursor: pointer;
  touch-action: manipulation;
  transition: all var(--transition-fast);
  position: relative;
}
.axis-season-item::before {
  content: '';
  position: absolute;
  left: 14px;
  top: 50%;
  width: 6px;
  height: 1px;
  background: var(--comet);
}
.axis-season-item:hover {
  background: var(--nebula);
}
.axis-season-item.active {
  background: var(--nebula-light);
}

.season-icon {
  font-size: 16px;
  flex-shrink: 0;
}

.season-name {
  font-size: 13px;
  color: var(--starlight);
  flex: 1;
}

/* Per-season left accent on active */
.axis-season-item.season-spring.active { border-left: 2px solid var(--aurora-green); }
.axis-season-item.season-summer.active { border-left: 2px solid var(--amber-star); }
.axis-season-item.season-fall.active   { border-left: 2px solid var(--solar-orange); }
.axis-season-item.season-winter.active { border-left: 2px solid var(--plasma-blue); }

/* Season-colored glow on hover */
.axis-season-item.season-spring:hover { box-shadow: inset 0 0 20px rgba(0, 232, 157, 0.05); }
.axis-season-item.season-summer:hover { box-shadow: inset 0 0 20px rgba(255, 192, 72, 0.05); }
.axis-season-item.season-fall:hover   { box-shadow: inset 0 0 20px rgba(255, 107, 53, 0.05); }
.axis-season-item.season-winter:hover { box-shadow: inset 0 0 20px rgba(0, 212, 255, 0.05); }

/* ---- SEARCH ---- */
#btn-search {
  font-size: 22px;
  color: var(--stardust);
}
#btn-search:hover {
  color: var(--plasma-blue);
}

.search-overlay {
  position: absolute;
  top: var(--topbar-height);
  left: 0;
  right: 0;
  z-index: 500;
  background: color-mix(in srgb, var(--deep-space) 97%, transparent);
  border-bottom: 1px solid var(--nebula-light);
  backdrop-filter: blur(16px);
  animation: slideDown var(--transition-med);
}
.search-overlay.hidden {
  display: none;
}

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

.search-box {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--nebula-light);
}

.search-icon {
  font-size: 22px;
  color: var(--plasma-blue);
  flex-shrink: 0;
}

.search-input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  font-family: var(--font-body);
  font-size: 17px;
  color: var(--supernova);
  caret-color: var(--plasma-blue);
}
.search-input::placeholder {
  color: var(--stardust);
}

.search-esc-hint {
  font-family: var(--font-heading);
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--stardust);
  background: var(--nebula);
  border: 1px solid var(--comet);
  border-radius: 3px;
  padding: 3px 7px;
  flex-shrink: 0;
}

.search-results {
  max-height: 420px;
  overflow-y: auto;
  padding: 8px 0;
}

.search-empty {
  padding: 24px;
  text-align: center;
  color: var(--stardust);
  font-size: 14px;
}

.search-section-label {
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 3px;
  color: var(--stardust);
  text-transform: uppercase;
  padding: 8px 20px 4px;
}

.search-result-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 20px;
  min-height: 44px;
  cursor: pointer;
  transition: background var(--transition-fast);
}
.search-result-item:hover,
.search-result-item.focused {
  background: var(--nebula);
}

.search-result-priority {
  width: 3px;
  min-width: 3px;
  height: 32px;
  border-radius: 2px;
  flex-shrink: 0;
}

.search-result-body {
  flex: 1;
  min-width: 0;
}

.search-result-title {
  font-size: 14px;
  color: var(--supernova);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.search-result-title mark {
  background: none;
  color: var(--plasma-blue);
  font-weight: bold;
}

.search-result-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 3px;
  flex-wrap: wrap;
}

.search-result-mission {
  font-size: 11px;
  color: var(--stardust);
}

.search-result-col {
  font-size: 11px;
  color: var(--comet);
}
.search-result-col::before {
  content: '›';
  margin-right: 4px;
}

.search-result-tag {
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 8px;
  background: var(--asteroid);
  color: var(--stardust);
}
.search-result-tag mark {
  background: none;
  color: var(--plasma-blue);
}

/* ---- SIDEBAR HOME BUTTON ---- */
.sidebar-home {
  padding: 10px 8px 6px;
}
.sidebar-home-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  border-radius: var(--border-radius);
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--stardust);
  text-transform: uppercase;
  transition: all var(--transition-fast);
  cursor: pointer;
  touch-action: manipulation;
}
.sidebar-home-btn:hover {
  background: var(--nebula);
  color: var(--starlight);
}
.sidebar-home-btn.active {
  background: var(--nebula-light);
  color: var(--plasma-blue);
  border-left: 2px solid var(--plasma-blue);
}
.sidebar-home-icon {
  font-size: 20px;
}

/* ---- CARD DUE DATE BADGE ---- */
.card-due {
  font-size: 11px;
  padding: 1px 7px;
  border-radius: 8px;
  background: var(--asteroid);
  color: var(--stardust);
}
.card-due.today {
  background: rgba(255, 192, 72, 0.15);
  color: var(--amber-star);
  border: 1px solid rgba(255, 192, 72, 0.3);
}
.card-due.overdue {
  background: var(--red-giant-glow);
  color: var(--red-giant);
  border: 1px solid rgba(255, 71, 87, 0.3);
}

/* ---- DASHBOARD ---- */
.dashboard {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
}
.dashboard.hidden {
  display: none;
}

.dashboard-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.dashboard-greeting {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 3px;
  background: linear-gradient(135deg, var(--plasma-blue), var(--supernova));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.dashboard-date {
  font-size: 13px;
  color: var(--stardust);
  margin-top: 4px;
  letter-spacing: 1px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.dash-season-badge {
  font-family: var(--font-heading);
  font-size: 9px;
  letter-spacing: 0.12em;
  padding: 3px 10px;
  border-radius: 20px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  vertical-align: middle;
  white-space: nowrap;
}
.dash-season-spring { background: rgba(80,200,120,0.12); color: var(--aurora-green); border: 1px solid rgba(80,200,120,0.25); }
.dash-season-summer { background: rgba(255,192,72,0.12);  color: var(--amber-star);   border: 1px solid rgba(255,192,72,0.25); }
.dash-season-fall   { background: rgba(224,123,57,0.12);  color: #e07b39;             border: 1px solid rgba(224,123,57,0.25); }
.dash-season-winter { background: rgba(0,212,255,0.10);   color: var(--plasma-blue);  border: 1px solid rgba(0,212,255,0.25); }

.dashboard-stats-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.dash-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--nebula-dark);
  border: 1px solid var(--nebula-light);
  border-radius: 8px;
  padding: 12px 20px;
  min-width: 80px;
}

.dash-stat-val {
  font-family: var(--font-heading);
  font-size: 26px;
  font-weight: 800;
  color: var(--supernova);
}

.dash-stat-label {
  font-size: 10px;
  font-family: var(--font-heading);
  letter-spacing: 1px;
  color: var(--stardust);
  text-transform: uppercase;
  margin-top: 4px;
}

.dashboard-panels {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}
@media (max-width: 900px) {
  .dashboard-panels { grid-template-columns: minmax(0, 1fr); }
}

.dash-col {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-height: 80px;
  min-width: 0;
  border-radius: 10px;
  transition: outline 120ms ease, background 120ms ease;
}
.dash-col.drag-col-active {
  outline: 2px dashed color-mix(in srgb, var(--plasma-blue) 30%, transparent);
  outline-offset: 6px;
  background: color-mix(in srgb, var(--plasma-blue) 3%, transparent);
}

.dashboard-panel {
  background: var(--nebula-dark);
  border: 1px solid var(--nebula-light);
  border-radius: 10px;
  overflow: hidden;
  min-width: 0;
}

.dashboard-panel-title {
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--stardust);
  padding: 12px 16px;
  border-bottom: 1px solid var(--nebula-light);
  display: flex;
  align-items: center;
  gap: 8px;
}

.dashboard-panel-icon {
  color: var(--plasma-blue);
}

.dash-drag-handle {
  cursor: grab;
  color: var(--stardust);
  opacity: 0.3;
  font-size: 14px;
  line-height: 1;
  padding-right: 4px;
  user-select: none;
  flex-shrink: 0;
  transition: opacity 150ms;
}
.dash-drag-handle:hover { opacity: 0.75; }
.dashboard-panel[draggable="true"]:active .dash-drag-handle { cursor: grabbing; }
.dashboard-panel.dragging {
  opacity: 0.35;
  border-style: dashed;
}
.dashboard-panel.drag-over-before {
  border-top: 2px solid var(--plasma-blue);
  box-shadow: 0 -3px 0 color-mix(in srgb, var(--plasma-blue) 25%, transparent);
}
.dashboard-panel.drag-over-after {
  border-bottom: 2px solid var(--plasma-blue);
  box-shadow: 0 3px 0 color-mix(in srgb, var(--plasma-blue) 25%, transparent);
}

.dashboard-in-progress {
  display: flex;
  flex-direction: column;
  gap: 1px;
  max-height: 520px;
  overflow-y: auto;
}

.dash-empty {
  padding: 32px;
  text-align: center;
  color: var(--stardust);
  font-size: 14px;
}

.dash-card {
  position: relative;
  padding: 12px 16px;
  cursor: pointer;
  transition: background var(--transition-fast);
  border-bottom: 1px solid var(--nebula-light);
}
.dash-card:last-child { border-bottom: none; }
.dash-card:hover { background: var(--nebula); }

.dash-card-bar {
  position: absolute;
  left: 0;
  top: 0;
  width: 3px;
  height: 100%;
}

.dash-card-title {
  font-size: 14px;
  color: var(--supernova);
  margin-bottom: 5px;
  padding-left: 6px;
}

.dash-card-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-left: 6px;
  flex-wrap: wrap;
}

.dash-card-mission {
  font-size: 12px;
  color: var(--stardust);
}

.dash-card-due {
  font-size: 11px;
  color: var(--stardust);
}
.dash-card-due.today { color: var(--amber-star); }
.dash-card-due.overdue { color: var(--red-giant); }

.dash-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding-left: 6px;
  margin-top: 4px;
}

.dash-card-blocking-info {
  font-size: 11px;
  color: var(--red-giant);
  padding-left: 6px;
  margin-top: 5px;
  opacity: 0.9;
}

/* ---- CALENDAR ---- */
.dashboard-calendar-wrap {
  padding: 16px;
}

.cal-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.cal-title {
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--supernova);
}

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
}

.cal-day-name {
  font-family: var(--font-heading);
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--stardust);
  text-align: center;
  padding: 4px 0;
}

.cal-cell {
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  font-size: 13px;
  color: var(--stardust);
  position: relative;
  transition: background var(--transition-fast);
}
.cal-cell.empty { background: none; pointer-events: none; }
.cal-cell:not(.empty) { cursor: pointer; }
.cal-cell:not(.empty):not(.selected):hover { background: var(--nebula); }
.cal-cell.has-cards { color: var(--starlight); }
.cal-cell.today {
  background: var(--plasma-blue-glow);
  color: var(--plasma-blue);
  border: 1px solid color-mix(in srgb, var(--plasma-blue) 30%, transparent);
}
.cal-cell.selected {
  background: var(--nebula-light);
  border: 1px solid var(--plasma-blue);
  color: var(--supernova);
}
.cal-cell.overdue {
  color: var(--red-giant);
}

.cal-day-num {
  font-size: 13px;
  line-height: 1;
}

.cal-dots {
  display: flex;
  gap: 2px;
  margin-top: 2px;
  min-height: 5px;
}

.cal-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
}
.cal-dot-ics {
  opacity: 0.75;
  width: 4px;
  height: 4px;
  border-radius: 2px; /* square-ish to distinguish from card dots */
}

/* Calendar settings gear button */
.cal-settings-btn {
  margin-left: auto;
  font-size: 13px;
  flex-shrink: 0;
  color: var(--stardust);
  background: var(--nebula);
  border: 1px solid var(--nebula-light);
  border-radius: 6px;
  padding: 3px 7px;
  transition: background 150ms, border-color 150ms, color 150ms;
}
.cal-settings-btn:hover {
  background: var(--nebula-light);
  border-color: var(--plasma-blue);
  color: var(--plasma-blue);
}

/* Calendar day detail */
.cal-detail {
  margin-top: 14px;
  border-top: 1px solid var(--nebula-light);
  padding-top: 12px;
}

.cal-detail-title {
  font-family: var(--font-heading);
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--plasma-blue);
  text-transform: uppercase;
  margin-bottom: 8px;
}

.cal-detail-card {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  border-radius: var(--border-radius);
  cursor: pointer;
  transition: background var(--transition-fast);
  border: 1px solid var(--nebula-light);
  margin-bottom: 4px;
}
.cal-detail-card:hover { background: var(--nebula); }

.cal-detail-empty {
  font-size: 13px;
  color: var(--stardust);
  padding: 8px 2px;
}

.cal-detail-mission {
  font-size: 11px;
  color: var(--stardust);
  flex-shrink: 0;
}

.cal-detail-arrow {
  color: var(--comet);
  font-size: 13px;
}

.cal-detail-card-title {
  font-size: 13px;
  color: var(--starlight);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cal-detail-ics-event {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  border-radius: var(--border-radius);
  border: 1px solid var(--nebula-light);
  margin-bottom: 4px;
  opacity: 0.85;
}
.cal-detail-ics-dot {
  width: 7px;
  height: 7px;
  border-radius: 2px;
  flex-shrink: 0;
}
.cal-detail-ics-feed {
  font-size: 11px;
  color: var(--stardust);
  flex-shrink: 0;
}
.cal-detail-ics-title {
  font-size: 13px;
  color: var(--starlight);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ICS settings modal */
.ics-settings { display: flex; flex-direction: column; gap: 12px; }
.ics-hint {
  font-size: 13px;
  color: var(--stardust);
  line-height: 1.6;
}
.ics-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ics-section-title {
  font-family: var(--font-heading);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--plasma-blue);
  text-transform: uppercase;
}
.ics-auto-refresh-note {
  font-size: 11px;
  color: var(--stardust);
  margin-top: 3px;
}
.ics-refresh-btn {
  font-size: 11px;
  padding: 3px 8px;
  white-space: nowrap;
}
.ics-refresh-msg {
  font-size: 12px;
  color: var(--aurora-green);
  min-height: 16px;
}
.ics-no-feeds {
  font-size: 13px;
  color: var(--stardust);
  padding: 4px 0;
}
.ics-feed-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: var(--nebula);
  border-radius: 8px;
  border: 1px solid var(--nebula-light);
  margin-bottom: 6px;
}
.ics-feed-dot {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex-shrink: 0;
}
.ics-feed-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.ics-feed-name {
  font-size: 13px;
  color: var(--starlight);
}
.ics-feed-url {
  font-size: 11px;
  color: var(--stardust);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ics-delete-btn { flex-shrink: 0; }
.ics-help {
  background: var(--nebula);
  border-radius: 8px;
  padding: 12px 14px;
  border: 1px solid var(--nebula-light);
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
}
.ics-help-title {
  font-family: var(--font-heading);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--stardust);
  margin-bottom: 4px;
}
.ics-help-row {
  font-size: 12px;
  color: var(--stardust);
  line-height: 1.5;
}
.ics-help-row strong { color: var(--starlight); }
.modal-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* card-panel due date input */
#card-panel-due-date {
  color-scheme: dark;
}

/* ---- AXIS EDIT MODAL ---- */
.axis-edit-seasons {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.axis-edit-season {
  display: flex;
  align-items: center;
  gap: 10px;
}

.axis-edit-season-icon {
  font-size: 20px;
  width: 24px;
  text-align: center;
  flex-shrink: 0;
}

.axis-season-name-input {
  flex: 1;
  padding: 7px 10px;
  background: var(--nebula);
  border: 1px solid var(--comet);
  border-radius: var(--border-radius);
  color: var(--supernova);
  font-family: var(--font-body);
  font-size: 14px;
  outline: none;
}
.axis-season-name-input:focus {
  border-color: var(--amber-star);
  box-shadow: 0 0 0 2px rgba(255, 192, 72, 0.15);
}

/* ---- AUTH SCREEN ---- */
.auth-screen {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--void-black);
}
.auth-screen.hidden { display: none; }
.auth-container {
  width: 360px;
  max-width: 90vw;
  background: var(--deep-space);
  border: 1px solid var(--nebula-light);
  border-radius: 12px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.auth-logo {
  text-align: center;
}
.auth-logo .logo-icon {
  width: 30px;
  height: 30px;
  color: var(--plasma-blue);
}
.auth-logo .logo-text {
  font-family: var(--font-display);
  font-size: 24px;
  letter-spacing: 4px;
  color: var(--star-white);
  margin-left: 8px;
}
.auth-logo .logo-subtitle {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 3px;
  color: var(--stardust);
  margin-top: 4px;
}
.auth-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.auth-form.hidden { display: none; }
.auth-form h2 {
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: 2px;
  color: var(--plasma-blue);
  margin: 0 0 4px;
}
.auth-form input {
  background: var(--nebula-dark);
  border: 1px solid var(--nebula-light);
  border-radius: 6px;
  padding: 10px 12px;
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--star-white);
  outline: none;
  transition: border-color var(--transition-fast);
}
.auth-form input:focus {
  border-color: var(--plasma-blue);
}
.auth-form input::placeholder {
  color: var(--stardust);
}
.auth-btn {
  width: 100%;
  padding: 10px;
  font-size: 14px;
  margin-top: 4px;
}
.auth-switch {
  font-size: 13px;
  color: var(--stardust);
  text-align: center;
  margin: 0;
}
.auth-switch a {
  color: var(--plasma-blue);
  text-decoration: none;
}
.auth-switch a:hover {
  text-decoration: underline;
}
.auth-demo-link {
  font-size: 13px;
  color: var(--stardust);
  text-align: center;
  margin: 2px 0 0;
}
.auth-demo-link a {
  color: var(--amber-star);
  text-decoration: none;
}
.auth-demo-link a:hover {
  text-decoration: underline;
}
.auth-error {
  font-size: 13px;
  color: var(--red-giant);
  text-align: center;
  margin: 0;
  min-height: 16px;
}

.reg-pledge {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: rgba(0, 200, 120, 0.07);
  border: 1px solid rgba(0, 200, 120, 0.25);
  border-radius: 8px;
  padding: 10px 13px;
  font-size: 12px;
  color: var(--starlight);
  line-height: 1.5;
}
.reg-pledge-icon {
  font-size: 18px;
  flex-shrink: 0;
  margin-top: 1px;
}
.reg-pledge strong {
  color: #5de8a0;
}

.reg-tos-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--stardust);
  cursor: pointer;
}
.reg-tos-label input[type="checkbox"] {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  accent-color: var(--plasma-blue);
  cursor: pointer;
}
.reg-tos-label a {
  color: var(--plasma-blue);
  text-decoration: underline;
}
.reg-tos-label a:hover {
  color: var(--supernova);
}

/* ToS modal */
.tos-modal-body {
  font-size: 12px;
  color: var(--starlight);
  line-height: 1.6;
  max-height: 60vh;
  overflow-y: auto;
  padding-right: 4px;
}
.tos-effective {
  color: var(--stardust);
  font-size: 11px;
  margin: 0 0 14px;
}
.tos-modal-body h3 {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--supernova);
  margin: 16px 0 6px;
  text-transform: uppercase;
}
.tos-modal-body p,
.tos-modal-body ul {
  margin: 0 0 8px;
}
.tos-modal-body ul {
  padding-left: 18px;
}
.tos-modal-body a {
  color: var(--plasma-blue);
}

/* Migration banner */
/* MOTD Banner */
.motd-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  background: color-mix(in srgb, var(--amber-star) 12%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--amber-star) 30%, transparent);
  font-size: 13px;
  color: var(--amber-star);
  flex-shrink: 0;
}
.motd-icon { font-size: 15px; flex-shrink: 0; }
.motd-text { flex: 1; line-height: 1.5; }
.motd-dismiss {
  background: none;
  border: none;
  color: var(--amber-star);
  opacity: 0.6;
  cursor: pointer;
  font-size: 14px;
  padding: 2px 4px;
  flex-shrink: 0;
  transition: opacity 0.15s;
}
.motd-dismiss:hover { opacity: 1; }

.migration-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: var(--nebula-dark);
  border-bottom: 1px solid var(--nebula-light);
  font-size: 13px;
  color: var(--star-white);
}
.migration-banner span { flex: 1; }

/* Sidebar user/logout */
.sidebar-user {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0 0;
  gap: 8px;
}
.sidebar-user-email {
  font-size: 12px;
  color: var(--stardust);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.btn-logout {
  font-size: 12px;
  flex-shrink: 0;
  color: var(--stardust);
  padding: 2px 8px;
}
.btn-logout:hover {
  color: var(--red-giant);
}

/* ---- ACCOUNT PAGE ---- */
.account-page {
  flex-direction: column;
  padding: 40px 48px;
  overflow-y: auto;
  gap: 0;
  align-items: flex-start;
}
.account-header {
  margin-bottom: 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--nebula-light);
  width: 100%;
  max-width: 780px;
}
.account-title {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--plasma-blue);
  letter-spacing: 2px;
  margin: 0 0 6px;
}
.account-subtitle {
  font-size: 14px;
  color: var(--stardust);
  margin: 0;
}
.account-body {
  width: 100%;
  max-width: 780px;
}
.account-section {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 0 48px;
  padding: 32px 0;
  border-bottom: 1px solid var(--nebula-light);
  background: none;
  border-radius: 0;
}
.account-section:last-child { border-bottom: none; }

.account-section-left {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 2px;
}
.account-section-right {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Full-width sections (e.g. Appearance) */
.account-section-full {
  display: flex;
  flex-direction: column;
  gap: 20px;
  grid-template-columns: unset;
}
.account-section-full-header {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.account-section-title {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--plasma-blue);
  margin: 0;
  text-transform: uppercase;
}
.account-section-desc {
  font-size: 12px;
  color: var(--stardust);
  line-height: 1.7;
  margin: 0;
}
.account-section-desc strong { color: var(--red-giant); }
.account-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.account-field label {
  font-size: 12px;
  letter-spacing: 1px;
  color: var(--stardust);
  text-transform: uppercase;
}
.account-field input[type="text"],
.account-field input[type="password"] {
  background: var(--nebula-medium);
  border: 1px solid var(--nebula-light);
  border-radius: 6px;
  padding: 9px 12px;
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--star-white);
  outline: none;
  transition: border-color var(--transition-fast);
}
.account-field input:focus {
  border-color: var(--plasma-blue);
}
.account-field input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.account-field input[type="file"] {
  font-size: 13px;
  color: var(--stardust);
  font-family: var(--font-mono);
}
.account-field-hint {
  font-size: 12px;
  color: var(--stardust);
  margin: 0;
}
.account-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
.account-msg {
  font-size: 13px;
}
.account-msg.success { color: var(--go-green); }
.account-msg.error   { color: var(--red-giant); }

.account-section-danger {
  border-bottom: none;
  border-top: 1px solid rgba(255, 80, 80, 0.35);
  margin-top: 8px;
}
.danger-title {
  color: var(--red-giant);
}

/* ---- THEME PICKER ---- */
.theme-picker {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.theme-card {
  background: var(--nebula-dark);
  border: 2px solid var(--nebula-light);
  border-radius: 10px;
  padding: 12px 12px 10px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  transition: border-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
  font-family: var(--font-body);
}

.theme-card:hover {
  border-color: var(--comet);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

.theme-card.active {
  border-color: var(--plasma-blue);
  box-shadow: 0 0 0 1px var(--plasma-blue), 0 6px 20px rgba(0, 0, 0, 0.25);
}

.theme-preview {
  width: 120px;
  height: 75px;
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  border: 1px solid rgba(0,0,0,0.12);
}

.theme-preview-sidebar {
  width: 28px;
  height: 100%;
  flex-shrink: 0;
}

.theme-preview-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 5px;
}

.theme-preview-bar {
  height: 10px;
  border-radius: 3px;
  opacity: 0.85;
}

.theme-preview-panels {
  display: flex;
  gap: 4px;
  flex: 1;
}

.theme-preview-panel {
  flex: 1;
  border-radius: 3px;
  opacity: 0.7;
}

/* Deep Space preview */
.theme-preview-dark { background: #0a0e1a; }
.theme-preview-dark .theme-preview-sidebar { background: #0f1425; }
.theme-preview-dark .theme-preview-bar { background: #1c2340; }
.theme-preview-dark .theme-preview-panel { background: #161b2e; }
.theme-preview-dark .theme-preview-panel:first-child { background: #00d4ff22; }

/* Stardust preview */
.theme-preview-stardust { background: #f2f5ff; }
.theme-preview-stardust .theme-preview-sidebar { background: #e8ebf8; }
.theme-preview-stardust .theme-preview-bar { background: #ccd3ec; }
.theme-preview-stardust .theme-preview-panel { background: #dde2f5; }
.theme-preview-stardust .theme-preview-panel:first-child { background: #005fad22; }

/* Nebula Rose preview */
.theme-preview-nebula-rose { background: #100318; }
.theme-preview-nebula-rose .theme-preview-sidebar { background: #180525; }
.theme-preview-nebula-rose .theme-preview-bar { background: #2e1045; }
.theme-preview-nebula-rose .theme-preview-panel { background: #200832; }
.theme-preview-nebula-rose .theme-preview-panel:first-child { background: #ff3daa33; }

/* Phosphor preview */
.theme-preview-phosphor { background: #000d01; }
.theme-preview-phosphor .theme-preview-sidebar { background: #001303; }
.theme-preview-phosphor .theme-preview-bar { background: #002508; }
.theme-preview-phosphor .theme-preview-panel { background: #001a04; }
.theme-preview-phosphor .theme-preview-panel:first-child { background: #00ff4133; }

/* Mars preview */
.theme-preview-mars { background: #160700; }
.theme-preview-mars .theme-preview-sidebar { background: #1f0d02; }
.theme-preview-mars .theme-preview-bar { background: #3f1e08; }
.theme-preview-mars .theme-preview-panel { background: #2c1404; }
.theme-preview-mars .theme-preview-panel:first-child { background: #ff602033; }

/* Jupiter preview */
.theme-preview-jupiter { background: #160e02; }
.theme-preview-jupiter .theme-preview-sidebar { background: #201504; }
.theme-preview-jupiter .theme-preview-bar { background: #422c10; }
.theme-preview-jupiter .theme-preview-panel { background: #2e1e08; }
.theme-preview-jupiter .theme-preview-panel:first-child { background: #e0882833; }

/* Pluto preview */
.theme-preview-pluto { background: #050e1a; }
.theme-preview-pluto .theme-preview-sidebar { background: #091524; }
.theme-preview-pluto .theme-preview-bar { background: #152840; }
.theme-preview-pluto .theme-preview-panel { background: #0e1e30; }
.theme-preview-pluto .theme-preview-panel:first-child { background: #5cc8f033; }

/* White Dwarf preview */
.theme-preview-white-dwarf { background: #080808; border: 2px solid #444 !important; }
.theme-preview-white-dwarf .theme-preview-sidebar { background: #101010; border-right: 2px solid #555; }
.theme-preview-white-dwarf .theme-preview-bar { background: #2c2c2c; }
.theme-preview-white-dwarf .theme-preview-panel { background: #1c1c1c; border: 2px solid #444; }
.theme-preview-white-dwarf .theme-preview-panel:first-child { background: #00e8ff22; border-color: #00e8ff66; }

/* Aurora preview */
.theme-preview-aurora { background: #040d1a; }
.theme-preview-aurora .theme-preview-sidebar { background: #071522; }
.theme-preview-aurora .theme-preview-bar { background: #122840; }
.theme-preview-aurora .theme-preview-panel { background: #0c1e30; }
.theme-preview-aurora .theme-preview-panel:first-child { background: #00e8c033; }

/* James Webb preview */
.theme-preview-james-webb { background: #060412; }
.theme-preview-james-webb .theme-preview-sidebar { background: #0c0820; }
.theme-preview-james-webb .theme-preview-bar { background: #1e1642; }
.theme-preview-james-webb .theme-preview-panel { background: #140e30; }
.theme-preview-james-webb .theme-preview-panel:first-child { background: #ffc06033; }

/* Cosmic Horror preview */
.theme-preview-cosmic-horror { background: #040c04; }
.theme-preview-cosmic-horror .theme-preview-sidebar { background: #081408; }
.theme-preview-cosmic-horror .theme-preview-bar { background: #162812; }
.theme-preview-cosmic-horror .theme-preview-panel { background: #0e1e0c; }
.theme-preview-cosmic-horror .theme-preview-panel:first-child { background: #44dd4433; }

/* Event Horizon preview */
.theme-preview-event-horizon { background: #040404; }
.theme-preview-event-horizon .theme-preview-sidebar { background: #0a0a0a; }
.theme-preview-event-horizon .theme-preview-bar { background: #1c1c1c; }
.theme-preview-event-horizon .theme-preview-panel { background: #111111; }
.theme-preview-event-horizon .theme-preview-panel:first-child { background: #ff8c0033; }

/* Terra preview */
.theme-preview-terra { background: #021420; }
.theme-preview-terra .theme-preview-sidebar { background: #041e30; }
.theme-preview-terra .theme-preview-bar { background: #0c3454; }
.theme-preview-terra .theme-preview-panel { background: #072840; }
.theme-preview-terra .theme-preview-panel:first-child { background: #00b4d833; }

/* Sol preview */
.theme-preview-sol { background: #130e00; }
.theme-preview-sol .theme-preview-sidebar { background: #1e1600; }
.theme-preview-sol .theme-preview-bar { background: #3c2c00; }
.theme-preview-sol .theme-preview-panel { background: #2a1e00; }
.theme-preview-sol .theme-preview-panel:first-child { background: #ffcc0033; }

/* Apollo preview */
.theme-preview-apollo { background: #0e0e0e; }
.theme-preview-apollo .theme-preview-sidebar { background: #181818; }
.theme-preview-apollo .theme-preview-bar { background: #2e2e2e; }
.theme-preview-apollo .theme-preview-panel { background: #202020; }
.theme-preview-apollo .theme-preview-panel:first-child { background: #d4a02033; }

.theme-card-label {
  font-size: 11px;
  color: var(--starlight);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
}

.theme-card-sub {
  font-size: 10px;
  color: var(--stardust);
  margin-top: -5px;
}

.theme-card-a11y {
  border-color: var(--asteroid);
  position: relative;
}

.theme-card-a11y.active,
.theme-card-a11y:hover {
  border-color: #ffee00;
  box-shadow: 0 0 0 1px #ffee00, 0 6px 20px rgba(255, 238, 0, 0.2);
}

.theme-card-a11y-badge {
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #000;
  background: #ffee00;
  border-radius: 3px;
  padding: 2px 5px;
  margin-top: -3px;
}
.btn-danger {
  background: transparent;
  border: 1px solid var(--red-giant);
  color: var(--red-giant);
  padding: 8px 18px;
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.btn-danger:hover {
  background: var(--red-giant);
  color: #fff;
}

/* ---- HOW TO PAGE ---- */
.howto-page {
  flex-direction: column;
  padding: 0;
  overflow-y: auto;
  gap: 0;
}

/* ---- HOW TO — SYSTEM GUIDE (.ht-*) ---- */
.ht-inner {
  max-width: 860px;
  margin: 0 auto;
  padding: 40px 32px 64px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 48px;
}
.ht-eyebrow {
  font-family: var(--font-heading);
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--plasma-blue);
  margin-bottom: 10px;
}
.ht-title {
  font-family: var(--font-heading);
  font-size: 22px;
  color: var(--supernova);
  letter-spacing: 2px;
  margin: 0 0 10px;
}
.ht-subtitle {
  font-size: 14px;
  color: var(--stardust);
  line-height: 1.75;
  max-width: 580px;
}
.ht-section-label {
  font-family: var(--font-heading);
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--plasma-blue);
  margin-bottom: 12px;
}
.ht-section-title {
  font-family: var(--font-heading);
  font-size: clamp(18px, 3vw, 26px);
  font-weight: 700;
  margin-bottom: 12px;
  line-height: 1.2;
}
.ht-section-sub {
  font-size: 14px;
  color: var(--stardust);
  line-height: 1.75;
  margin-bottom: 32px;
  max-width: 580px;
}

/* Hierarchy diagram */
.ht-hierarchy-diagram {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 560px;
}
.ht-hierarchy-node {
  width: 100%;
  background: var(--nebula);
  border-radius: 14px;
  padding: 22px 26px;
  transition: transform 150ms ease;
}
.ht-hierarchy-node:hover { transform: translateY(-2px); }
.ht-node-moonshot { border: 1px solid rgba(255,192,72,0.35); }
.ht-node-orbit    { border: 1px solid color-mix(in srgb, var(--plasma-blue) 35%, transparent); }
.ht-node-mission  { border: 1px solid color-mix(in srgb, var(--ion-purple) 35%, transparent); }
.ht-node-tag {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 9px;
  letter-spacing: 0.14em;
  padding: 3px 9px;
  border-radius: 20px;
  margin-bottom: 10px;
}
.ht-node-moonshot .ht-node-tag { background: rgba(255,192,72,0.12);  color: var(--amber-star); }
.ht-node-orbit    .ht-node-tag { background: color-mix(in srgb, var(--plasma-blue) 10%, transparent);  color: var(--plasma-blue); }
.ht-node-mission  .ht-node-tag { background: color-mix(in srgb, var(--ion-purple) 12%, transparent); color: var(--ion-purple); }
.ht-node-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.ht-node-icon { font-size: 24px; line-height: 1; }
.ht-node-title {
  font-family: var(--font-heading);
  font-size: 15px;
  letter-spacing: 0.06em;
}
.ht-node-moonshot .ht-node-title { color: var(--amber-star); }
.ht-node-orbit    .ht-node-title { color: var(--plasma-blue); }
.ht-node-mission  .ht-node-title { color: var(--ion-purple); }
.ht-node-desc { font-size: 13px; color: var(--stardust); line-height: 1.65; }
.ht-orbit-seasons {
  display: flex;
  gap: 6px;
  margin-top: 14px;
  flex-wrap: wrap;
}
.ht-season-pill {
  font-family: var(--font-heading);
  font-size: 10px;
  letter-spacing: 0.08em;
  padding: 4px 10px;
  border-radius: 20px;
  border: 1px solid var(--nebula-light);
  color: var(--stardust);
  display: flex;
  align-items: center;
  gap: 4px;
}
.ht-connector {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 4px 0;
}
.ht-connector-line {
  width: 1px;
  height: 24px;
  background: var(--nebula-light);
  opacity: 0.5;
}
.ht-connector-arrow { font-size: 13px; color: var(--stardust); opacity: 0.45; line-height: 1; }
.ht-connector-label {
  font-family: var(--font-heading);
  font-size: 9px;
  letter-spacing: 0.14em;
  color: var(--stardust);
  opacity: 0.4;
  margin-top: 3px;
}

/* Deep dive */
.ht-deep-dive {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}
.ht-deep-dive.ht-reverse { direction: rtl; }
.ht-deep-dive.ht-reverse > * { direction: ltr; }
.ht-dd-eyebrow {
  font-family: var(--font-heading);
  font-size: 10px;
  letter-spacing: 0.2em;
  margin-bottom: 10px;
}
.ht-eyebrow-amber  { color: var(--amber-star); }
.ht-eyebrow-plasma { color: var(--plasma-blue); }
.ht-eyebrow-purple { color: var(--ion-purple); }
.ht-dd-heading {
  font-family: var(--font-heading);
  font-size: clamp(18px, 2.5vw, 26px);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 16px;
}
.ht-dd-body { font-size: 13px; color: var(--stardust); line-height: 1.8; margin-bottom: 16px; }
.ht-dd-insight {
  border-left: 2px solid;
  padding: 10px 14px;
  border-radius: 0 8px 8px 0;
  font-size: 13px;
  line-height: 1.65;
  color: var(--stardust);
  margin-top: 8px;
}
.ht-dd-insight strong { color: var(--supernova); }
.ht-insight-amber  { border-color: var(--amber-star);  background: rgba(255,192,72,0.05); }
.ht-insight-plasma { border-color: var(--plasma-blue); background: color-mix(in srgb, var(--plasma-blue) 5%, transparent); }
.ht-insight-purple { border-color: var(--ion-purple);  background: color-mix(in srgb, var(--ion-purple) 5%, transparent); }
.ht-dd-visual {
  background: var(--nebula);
  border-radius: 14px;
  padding: 26px 22px;
  position: sticky;
  top: 72px;
}
.ht-amber-border  { border: 1px solid rgba(255,192,72,0.25); }
.ht-plasma-border { border: 1px solid color-mix(in srgb, var(--plasma-blue) 25%, transparent); }
.ht-purple-border { border: 1px solid color-mix(in srgb, var(--ion-purple) 25%, transparent); }
.ht-visual-icon { font-size: 40px; display: block; margin-bottom: 16px; }
.ht-visual-label {
  font-family: var(--font-heading);
  font-size: 9px;
  letter-spacing: 0.18em;
  color: var(--stardust);
  margin-bottom: 12px;
}
.ht-timescale { display: flex; align-items: center; gap: 8px; }
.ht-timescale-bar { flex: 1; height: 3px; border-radius: 2px; }
.ht-timescale-amber  { background: linear-gradient(90deg, var(--amber-star),  rgba(255,192,72,0.2)); }
.ht-timescale-plasma { background: linear-gradient(90deg, var(--plasma-blue), color-mix(in srgb, var(--plasma-blue) 20%, transparent)); }
.ht-timescale-purple { background: linear-gradient(90deg, var(--ion-purple),  color-mix(in srgb, var(--ion-purple) 20%, transparent)); }
.ht-timescale-label { font-size: 10px; color: var(--stardust); white-space: nowrap; }
.ht-visual-divider { height: 1px; background: var(--nebula-light); margin: 16px 0; }
.ht-examples { display: flex; flex-direction: column; gap: 7px; }
.ht-example-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12px;
  color: var(--stardust);
  line-height: 1.5;
}
.ht-example-item::before {
  content: '→';
  font-family: var(--font-heading);
  font-size: 10px;
  opacity: 0.45;
  flex-shrink: 0;
  margin-top: 1px;
}
.ht-season-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 6px; }
.ht-season-card {
  background: var(--nebula-dark);
  border-radius: 7px;
  padding: 10px 12px;
  border: 1px solid var(--nebula-light);
}
.ht-season-card-header {
  font-family: var(--font-heading);
  font-size: 10px;
  letter-spacing: 0.06em;
  margin-bottom: 3px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.ht-season-card-desc { font-size: 11px; color: var(--stardust); line-height: 1.5; }
.ht-mission-preview { display: flex; gap: 5px; margin-top: 6px; }
.ht-mission-col {
  flex: 1;
  background: var(--nebula-dark);
  border-radius: 5px;
  padding: 7px;
  border: 1px solid var(--nebula-light);
}
.ht-mission-col-title {
  font-family: var(--font-heading);
  font-size: 8px;
  letter-spacing: 0.1em;
  color: var(--stardust);
  margin-bottom: 5px;
}
.ht-card-mock {
  background: var(--nebula);
  border-radius: 3px;
  padding: 4px 6px;
  font-size: 10px;
  color: var(--stardust);
  margin-bottom: 3px;
  border: 1px solid var(--nebula-light);
  line-height: 1.4;
}
.ht-dot { display: inline-block; width: 5px; height: 5px; border-radius: 50%; margin-right: 3px; vertical-align: middle; }
.ht-dot-high { background: var(--red-giant); }
.ht-dot-med  { background: var(--amber-star); }
.ht-dot-low  { background: var(--aurora-green); }

/* Keyboard shortcuts section */
.ht-shortcuts-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 20px;
}
.ht-shortcuts-group {
  background: var(--nebula);
  border: 1px solid var(--nebula-light);
  border-radius: 8px;
  padding: 16px;
}
.ht-shortcuts-group-title {
  font-family: var(--font-heading);
  font-size: 0.65rem;
  color: var(--amber-star);
  letter-spacing: 0.1em;
  margin-bottom: 12px;
}
.ht-shortcut-row {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 14px;
  margin-bottom: 10px;
  font-size: 0.8rem;
}
.ht-shortcut-keys {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 3px;
}
.ht-shortcut-row > span { color: var(--starlight); }
.ht-key-or {
  font-size: 0.68rem;
  color: var(--stardust);
  padding: 0 3px;
  font-style: italic;
}
.ht-key-plus {
  font-size: 0.7rem;
  color: var(--stardust);
  padding: 0 1px;
  line-height: 1;
}
.ht-key-sep {
  font-size: 0.72rem;
  color: var(--nebula-light);
  padding: 0 4px;
  opacity: 0.7;
}
kbd {
  display: inline-block;
  background: var(--deep-space);
  border: 1px solid var(--nebula-light);
  border-radius: 4px;
  padding: 2px 6px;
  font-family: var(--font-body);
  font-size: 0.72rem;
  color: var(--plasma-blue);
  white-space: nowrap;
}
.kbd-shortcuts-modal {
  width: 680px;
  max-width: 92vw;
}

@media (max-width: 768px) {
  #btn-keyboard-shortcuts { display: none !important; }
}

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

@media (max-width: 768px) {
  .account-page { padding: 24px 20px; }
  .account-section { grid-template-columns: 1fr; gap: 16px; padding: 24px 0; }
  .account-body { max-width: 100%; }
  .account-header { max-width: 100%; }

  .ht-deep-dive { grid-template-columns: 1fr; gap: 24px; }
  .ht-deep-dive.ht-reverse { direction: ltr; }
  .ht-dd-visual { position: static; }
  .ht-mission-preview { display: none; }
  .ht-inner { padding: 28px 20px 48px; gap: 36px; }
}
.howto-header {
  margin-bottom: 4px;
}
.howto-title {
  font-family: var(--font-heading);
  font-size: 24px;
  color: var(--plasma-blue);
  letter-spacing: 2px;
  margin: 0 0 6px;
}
.howto-subtitle {
  font-size: 14px;
  color: var(--stardust);
  margin: 0;
}
.howto-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
.howto-card {
  background: var(--nebula-dark);
  border: 1px solid var(--nebula-light);
  border-radius: 10px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.howto-card:hover {
  border-color: var(--plasma-blue);
  box-shadow: 0 0 0 1px var(--plasma-blue-glow);
}
.howto-card-icon {
  font-size: 22px;
  color: var(--plasma-blue);
  margin-bottom: 2px;
}
.howto-card h3 {
  font-family: var(--font-heading);
  font-size: 13px;
  letter-spacing: 1.5px;
  color: var(--supernova);
  margin: 0;
}
.howto-card p {
  font-size: 13px;
  color: var(--stardust);
  line-height: 1.7;
  margin: 0;
}
.howto-card strong {
  color: var(--supernova);
}
.howto-card em {
  color: var(--plasma-blue);
  font-style: normal;
}
.howto-card kbd {
  background: var(--nebula-light);
  border: 1px solid var(--comet);
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 12px;
  color: var(--supernova);
  font-family: var(--font-body);
}

/* ---- TODAY'S FOCUS ---- */
#dashboard-today-focus {
  padding: 14px 16px 16px;
}
.tf-list {
  display: flex;
  flex-direction: column;
  margin-bottom: 4px;
}
.tf-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border-radius: 6px;
  transition: background var(--transition-fast);
}
.tf-item:hover { background: var(--nebula-light); }
.tf-item:hover .tf-delete { opacity: 1; }
.tf-text {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  box-shadow: none;
  color: var(--starlight);
  font-family: var(--font-body);
  font-size: 13px;
  padding: 0;
  min-width: 0;
}
.tf-text:focus { border-color: transparent; box-shadow: none; }
.tf-done .tf-text {
  color: var(--stardust);
  text-decoration: line-through;
}
.tf-delete {
  opacity: 0;
  font-size: 13px;
  color: var(--stardust);
  flex-shrink: 0;
  transition: opacity var(--transition-fast), color var(--transition-fast);
}
.tf-delete:hover { color: var(--red-giant); }
.tf-progress-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 8px 4px;
}
.tf-bar-wrap {
  flex: 1;
  margin-bottom: 0;
}
.tf-add-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 10px;
  border-top: 1px solid var(--nebula-light);
  padding-top: 12px;
}
.tf-new-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--starlight);
  padding: 4px 0;
  min-width: 0;
}
.tf-new-input::placeholder { color: var(--stardust); opacity: 0.5; }
.tf-add-btn {
  font-size: 11px;
  padding: 4px 8px;
  flex-shrink: 0;
}

/* ---- MOONSHOT PROGRESS ---- */
.moonshot-progress-row {
  padding: 12px 16px;
  border-bottom: 1px solid var(--nebula-light);
}
.moonshot-progress-row:last-child { border-bottom: none; }
.moonshot-progress-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.moonshot-progress-title {
  font-size: 13px;
  color: var(--starlight);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}
.moonshot-progress-pct {
  font-family: var(--font-heading);
  font-size: 12px;
  flex-shrink: 0;
}
.moonshot-progress-track {
  height: 4px;
  background: var(--nebula-light);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 6px;
}
.moonshot-progress-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 500ms ease;
}
.moonshot-progress-meta {
  font-size: 11px;
  color: var(--stardust);
}

/* ---- WEEKLY ACTIVITY ---- */
.weekly-summary-wrap {
  padding: 12px 16px 14px;
}
.weekly-total {
  font-family: var(--font-heading);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--stardust);
  margin-bottom: 12px;
  text-transform: uppercase;
}
.weekly-bars {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 72px;
}
.weekly-bar-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  height: 100%;
}
.weekly-bar-count {
  font-size: 9px;
  color: var(--stardust);
  height: 12px;
  line-height: 12px;
}
.weekly-bar-track {
  flex: 1;
  width: 100%;
  background: var(--nebula);
  border-radius: 3px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  border: 1px solid var(--nebula-light);
}
.weekly-bar-fill {
  width: 100%;
  background: var(--plasma-blue);
  opacity: 0.45;
  border-radius: 2px;
  transition: height 500ms ease;
}
.weekly-bar-fill.today {
  background: var(--plasma-blue);
  opacity: 1;
}
.weekly-bar-label {
  font-family: var(--font-heading);
  font-size: 9px;
  letter-spacing: 0.08em;
  color: var(--stardust);
}
.weekly-bar-col.is-today .weekly-bar-label {
  color: var(--plasma-blue);
}

/* ---- ACTIVITY FEED ---- */
.dashboard-activity {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 320px;
  overflow-y: auto;
}
.activity-entry {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 6px;
  transition: background var(--transition-fast);
}
.activity-entry:hover {
  background: var(--nebula-light);
}
.activity-icon {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
}
.act-created  { background: rgba(0,255,136,0.15); color: var(--go-green); }
.act-updated  { background: var(--plasma-blue-glow); color: var(--plasma-blue); }
.act-deleted  { background: rgba(255,59,92,0.15);  color: var(--red-giant); }
.act-moved    { background: color-mix(in srgb, var(--plasma-blue) 10%, transparent); color: var(--plasma-blue); }
.act-mission  { background: rgba(156,39,176,0.15); color: #ce93d8; }

.activity-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.activity-text {
  font-size: 13px;
  color: var(--star-white);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.activity-mission {
  font-size: 12px;
  color: var(--stardust);
}
.activity-time {
  font-size: 12px;
  color: var(--stardust);
  white-space: nowrap;
  flex-shrink: 0;
}

/* ---- RESPONSIVE ---- */

/* Tablet & mobile: sidebar overlays the main area */
@media (max-width: 768px) {
  .sidebar {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 200;
    height: 100vh;
  }
  .sidebar.collapsed {
    margin-left: calc(-1 * var(--sidebar-width));
    pointer-events: none;
  }
  .main {
    width: 100%;
  }

  /* Prevent iOS auto-zoom on input focus (requires font-size ≥ 16px) */
  input, select, textarea {
    font-size: 16px !important;
  }

  /* Dashboard: reduce outer padding */
  .dashboard {
    padding: 16px;
  }
  .dashboard-header {
    flex-direction: column;
    gap: 12px;
  }
  .dashboard-stats-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }
  .dash-stat {
    min-width: 0;
    padding: 10px 8px;
  }
  .dash-stat-val {
    font-size: 20px;
  }
  .dash-stat-label {
    font-size: 9px;
    letter-spacing: 0.5px;
  }

  /* Reduce topbar padding on mobile */
  .topbar {
    padding: 0 10px;
    gap: 8px;
  }

  /* Hide save status text on mobile — frees space for mission title */
  .save-status {
    display: none !important;
  }

  /* Collapse text-only labels on topbar action buttons — show icon only */
  .topbar-btn-label {
    display: none;
  }

  /* Make the now-icon-only ghost buttons compact and square */
  #btn-add-column,
  #btn-show-archived {
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    border-radius: var(--border-radius);
  }

  /* Context menu: never clip off the right edge */
  .context-menu {
    max-width: calc(100vw - 24px);
  }

  /* Search: cap results height so keyboard doesn't hide them */
  .search-results {
    max-height: 280px;
  }
  .search-overlay {
    padding: 0 12px;
  }
  .search-box {
    position: sticky;
    top: 0;
    z-index: 1;
  }
}

/* Mobile sidebar backdrop */
.sidebar-backdrop {
  display: none;
}
@media (max-width: 768px) {
  .sidebar-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 199;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-med);
  }
  .sidebar-backdrop.visible {
    opacity: 1;
    pointer-events: all;
  }
}

/* Small phones: card panel becomes a full-screen bottom sheet */
@keyframes slideUpSheet {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

@media (max-width: 600px) {
  /* Card panel: full-width bottom sheet */
  .card-panel-overlay {
    align-items: flex-end;
    justify-content: stretch;
  }
  .card-panel {
    width: 100vw;
    max-width: 100vw;
    height: 92dvh;
    border-left: none;
    border-top: 1px solid var(--nebula-light);
    border-radius: 16px 16px 0 0;
    animation: slideUpSheet var(--transition-med);
  }
  /* Footer: two rows on mobile — Delete + icons row 1, Save full-width row 2 */
  .card-panel-footer {
    flex-wrap: wrap;
    gap: 6px;
    padding: 10px 14px;
  }
  .card-panel-footer #card-panel-archive,
  .card-panel-footer #card-panel-save-template,
  .card-panel-footer #card-panel-mark-complete {
    flex: 1;
    min-width: 0;
    padding: 7px 6px;
  }
  .card-panel-footer .btn-label {
    display: none;
  }
  .card-panel-footer #card-panel-save {
    flex: 0 0 100%;
    margin-left: 0;
  }

  /* Modal: almost full width */
  .modal {
    width: calc(100vw - 24px);
    max-width: calc(100vw - 24px);
    border-radius: 14px;
    max-height: 92dvh;
    overflow-y: auto;
  }

  /* Shrink kanban column slightly so the edge of the next column peeks */
  :root { --column-width: 260px; }

  /* Dashboard: single column, tighter padding */
  .dashboard { padding: 12px; }
  .dashboard-grid { gap: 12px; }
  .dashboard-activity-panel { margin-top: 0; }

  /* Sidebar moonshots item: bigger touch target */
  .sidebar-moonshots-item { min-height: 44px; }

  /* Sharing modal: full-width fields */
  .sharing-invite-row { flex-direction: column; }
  .sharing-invite-row input { width: 100%; }
  .sharing-invite-row button { width: 100%; }

  /* Topbar title: truncate on small screens */
  .mission-title { font-size: 13px; }

  /* Public board: full-width columns on small phones */
  .public-board { padding: 12px; gap: 12px; }
  .public-column { min-width: 260px; max-width: 260px; }
}

/* ---- MOONSHOTS ---- */
.sidebar-moonshots-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  margin: 4px 8px;
  border-radius: var(--border-radius);
  cursor: pointer;
  touch-action: manipulation;
  transition: background var(--transition-fast);
  color: var(--stardust);
  border: 1px solid transparent;
  user-select: none;
}
.sidebar-moonshots-item:hover {
  background: var(--nebula-light);
  color: var(--starlight);
}
.sidebar-moonshots-item.active {
  background: var(--ion-purple-glow);
  border-color: var(--ion-purple);
  color: var(--starlight);
}
.sidebar-moonshots-icon {
  font-size: 15px;
  line-height: 1;
}
.sidebar-moonshots-label {
  flex: 1;
  font-size: 14px;
  font-family: var(--font-heading);
  letter-spacing: 0.03em;
}
.sidebar-moonshots-count {
  font-size: 12px;
  background: var(--asteroid);
  color: var(--stardust);
  padding: 1px 7px;
  border-radius: 10px;
  min-width: 22px;
  text-align: center;
}
.sidebar-moonshots-item.active .sidebar-moonshots-count {
  background: var(--ion-purple);
  color: #fff;
}

.moonshots-board {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: 24px 28px;
  gap: 20px;
}

.moonshots-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  gap: 12px;
  color: var(--stardust);
  padding: 60px 20px;
}
.moonshots-empty-icon {
  font-size: 48px;
  opacity: 0.5;
}
.moonshots-empty-text {
  font-size: 16px;
  color: var(--stardust);
  text-align: center;
}
.moonshots-empty-sub {
  font-size: 13px;
  color: var(--comet);
  text-align: center;
}

.moonshots-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
  align-content: start;
}

.moonshot-card {
  background: var(--nebula);
  border: 1px solid var(--nebula-light);
  border-radius: var(--card-radius);
  padding: 0;
  cursor: pointer;
  transition: border-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
}
.moonshot-card:hover {
  border-color: var(--ion-purple);
  transform: translateY(-2px);
  box-shadow: 0 4px 20px var(--ion-purple-glow);
}
.moonshot-card-bar {
  height: 3px;
  width: 100%;
  flex-shrink: 0;
}
.moonshot-card-bar.priority-low    { background: var(--priority-low); }
.moonshot-card-bar.priority-medium { background: var(--priority-medium); }
.moonshot-card-bar.priority-high   { background: var(--priority-high); }
.moonshot-card-bar.priority-critical { background: var(--priority-critical); }

.moonshot-card-body {
  padding: 14px 14px 10px;
  flex: 1;
}
.moonshot-card-title {
  font-size: 14px;
  color: var(--starlight);
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: 6px;
}
.moonshot-card-preview {
  font-size: 12px;
  color: var(--stardust);
  line-height: 1.4;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.moonshot-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 6px;
}
.moonshot-card-footer {
  padding: 8px 14px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.moonshot-card-due {
  font-size: 12px;
  color: var(--stardust);
}
.moonshot-card-due.overdue { color: var(--red-giant); }
.moonshot-card-due.today   { color: var(--amber-star); }

.moonshot-card-links {
  border-top: 1px solid var(--nebula-light);
  padding: 8px 14px 10px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.moonshot-card-links-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--stardust);
  margin-bottom: 2px;
}
.moonshot-card-link-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 4px 6px;
  border-radius: 4px;
  cursor: pointer;
  transition: background var(--transition-fast);
}
.moonshot-card-link-row:hover {
  background: var(--plasma-blue-glow);
}
.moonshot-link-icon {
  font-size: 12px;
  flex-shrink: 0;
}
.moonshot-link-title {
  font-size: 12px;
  color: var(--starlight);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 160px;
  flex-shrink: 1;
}
.moonshot-link-meta {
  font-size: 11px;
  color: var(--stardust);
  white-space: nowrap;
  flex-shrink: 0;
}

/* ---- CARD PANEL: CHECKLIST ---- */
.checklist-field-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.checklist-progress-label {
  font-size: 12px;
  color: var(--stardust);
  font-family: var(--font-body);
}
.checklist-progress-bar-wrap {
  height: 4px;
  background: var(--asteroid);
  border-radius: 2px;
  margin-bottom: 10px;
  overflow: hidden;
}
.checklist-progress-bar {
  height: 100%;
  background: var(--plasma-blue);
  border-radius: 2px;
  transition: width 0.2s ease, background 0.2s ease;
}
.checklist-progress-bar.complete {
  background: var(--aurora-green);
}
.checklist-items {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 8px;
}
.checklist-item-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  min-height: 40px;
  border-radius: 4px;
  transition: background var(--transition-fast);
}
.checklist-item-row:hover {
  background: var(--nebula-light);
}
.checklist-item-check {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  accent-color: var(--plasma-blue);
  cursor: pointer;
}
.card-panel-field .checklist-item-text {
  flex: 1;
  background: transparent;
  border: none;
  box-shadow: none;
  outline: none;
  color: var(--starlight);
  font-family: var(--font-body);
  font-size: 13px;
  padding: 0;
  width: auto;
  min-width: 0;
}
.card-panel-field .checklist-item-text:focus {
  border-color: transparent;
  box-shadow: none;
}
.card-panel-field .checklist-item-text::placeholder { color: var(--stardust); }
.card-panel-field .checklist-done .checklist-item-text {
  color: var(--stardust);
  text-decoration: line-through;
}
.checklist-item-delete {
  opacity: 0;
  color: var(--stardust);
  font-size: 16px;
  line-height: 1;
  transition: opacity var(--transition-fast), color var(--transition-fast);
  flex-shrink: 0;
}
.checklist-item-row:hover .checklist-item-delete {
  opacity: 1;
}
.checklist-item-delete:hover {
  color: var(--red-giant);
}
.checklist-add-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.checklist-new-input {
  flex: 1;
  background: var(--nebula-dark);
  border: 1px solid var(--comet);
  border-radius: var(--border-radius);
  color: var(--starlight);
  font-family: var(--font-body);
  font-size: 13px;
  padding: 5px 10px;
  outline: none;
  transition: border-color var(--transition-fast);
}
.checklist-new-input:focus { border-color: var(--plasma-blue); }
.checklist-new-input::placeholder { color: var(--stardust); }

/* ---- CARD FACE: CHECKLIST PROGRESS ---- */
.card-checklist {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0 2px;
}
.card-checklist-bar-wrap {
  flex: 1;
  height: 3px;
  background: var(--asteroid);
  border-radius: 2px;
  overflow: hidden;
}
.card-checklist-bar {
  height: 100%;
  background: var(--plasma-blue);
  border-radius: 2px;
  transition: width 0.2s ease;
}
.card-checklist-bar.complete { background: var(--aurora-green); }
.card-checklist-count {
  font-size: 11px;
  color: var(--stardust);
  flex-shrink: 0;
  white-space: nowrap;
}
.card-checklist-count.complete { color: var(--aurora-green); }

/* ---- CARD PANEL: MOONSHOTS PICKER ---- */
.cp-moonshots-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-height: 160px;
  overflow-y: auto;
  padding: 2px 0;
}
.cp-moonshot-chip {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border-radius: 20px;
  border: 1px solid var(--comet);
  background: var(--nebula-dark);
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast);
  font-size: 12px;
  color: var(--stardust);
  user-select: none;
  min-width: 0;
  max-width: calc(50% - 4px);
}
.cp-moonshot-chip:hover {
  border-color: var(--ion-purple);
  color: var(--starlight);
}
.cp-moonshot-chip.selected {
  border-color: var(--ion-purple);
  background: var(--ion-purple-glow);
  color: var(--starlight);
}
.cp-chip-moon {
  font-size: 13px;
  line-height: 1;
}
.cp-chip-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cp-chip-check {
  font-size: 11px;
  color: var(--ion-purple);
  opacity: 0;
  transition: opacity var(--transition-fast);
}
.cp-moonshot-chip.selected .cp-chip-check {
  opacity: 1;
}
.cp-empty-hint {
  font-size: 12px;
  color: var(--stardust);
  font-style: italic;
}

/* ---- CARD PANEL: DEPS SEARCH PICKER ---- */
.cp-deps-search-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
}
.deps-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.deps-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(255, 100, 80, 0.1);
  border: 1px solid rgba(255, 100, 80, 0.4);
  border-radius: 20px;
  font-size: 11px;
  color: var(--starlight);
  padding: 3px 8px 3px 10px;
}
.deps-chip-remove {
  background: none;
  border: none;
  color: var(--stardust);
  cursor: pointer;
  font-size: 10px;
  padding: 0;
  line-height: 1;
}
.deps-chip-remove:hover { color: var(--red-giant); }
.deps-search-input {
  font-family: var(--font-body);
  font-size: 12px;
  background: var(--nebula);
  border: 1px solid var(--nebula-light);
  border-radius: 6px;
  color: var(--starlight);
  padding: 6px 10px;
  width: 100%;
  box-sizing: border-box;
}
.deps-search-input:focus { outline: none; border-color: var(--red-giant); }
.deps-search-input::placeholder { color: var(--stardust); }
.deps-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--nebula);
  border: 1px solid var(--nebula-light);
  border-radius: 6px;
  z-index: 100;
  max-height: 180px;
  overflow-y: auto;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}
.deps-dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 12px;
}
.deps-dropdown-item:hover { background: var(--nebula-light); }
.deps-dropdown-title { color: var(--starlight); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.deps-dropdown-col { color: var(--stardust); font-size: 10px; white-space: nowrap; }

/* ---- BOARD CARD: BLOCKED BADGE ---- */
.card--blocked { border-color: rgba(255, 100, 80, 0.4); }
.card-blocked-badge {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 9px;
  letter-spacing: 0.08em;
  color: var(--red-giant);
  background: rgba(255, 100, 80, 0.12);
  border: 1px solid rgba(255, 100, 80, 0.3);
  border-radius: 3px;
  padding: 2px 5px;
  margin-bottom: 4px;
}

/* ---- CARD PANEL: LINKED CARDS ---- */
.cp-linked-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 180px;
  overflow-y: auto;
}
.cp-linked-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--border-radius);
  border: 1px solid var(--nebula-light);
  background: var(--nebula-dark);
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.cp-linked-item:hover {
  border-color: var(--plasma-blue-dim);
  background: var(--plasma-blue-glow);
}
.cp-linked-icon {
  font-size: 16px;
  line-height: 1;
  flex-shrink: 0;
}
.cp-linked-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.cp-linked-title {
  font-size: 13px;
  color: var(--starlight);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cp-linked-meta {
  font-size: 11px;
  color: var(--stardust);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cp-linked-arrow {
  font-size: 13px;
  color: var(--plasma-blue-dim);
  flex-shrink: 0;
  opacity: 0;
  transition: opacity var(--transition-fast);
}
.cp-linked-item:hover .cp-linked-arrow {
  opacity: 1;
}

/* ---- CARD PANEL: COMMENTS ---- */
.card-panel-comments {
  border-top: 1px solid var(--nebula-light);
  padding: 14px 0 0;
  margin-top: 4px;
}
.comments-section-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;
  color: var(--stardust);
  text-transform: uppercase;
  margin-bottom: 10px;
}
.comments-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 220px;
  overflow-y: auto;
  margin-bottom: 12px;
}
.comments-empty {
  font-size: 12px;
  color: var(--stardust);
  font-style: italic;
}
.comment-item {
  background: var(--nebula-dark);
  border: 1px solid var(--nebula-light);
  border-radius: var(--border-radius);
  padding: 8px 10px;
}
.comment-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 5px;
}
.comment-author {
  font-size: 12px;
  color: var(--plasma-blue);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.comment-time {
  font-size: 11px;
  color: var(--stardust);
  white-space: nowrap;
  flex-shrink: 0;
}
.comment-text {
  font-size: 13px;
  color: var(--starlight);
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.5;
}
.comments-input-area {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.comment-input {
  width: 100%;
  background: var(--nebula);
  border: 1px solid var(--comet);
  border-radius: var(--border-radius);
  color: var(--supernova);
  font-family: var(--font-body);
  font-size: 13px;
  padding: 8px 10px;
  outline: none;
  resize: vertical;
  min-height: 58px;
  transition: border-color var(--transition-fast);
}
.comment-input:focus { border-color: var(--plasma-blue); }
.comment-input::placeholder { color: var(--stardust); }
.comment-submit-btn {
  align-self: flex-end;
  padding: 6px 16px;
  font-size: 12px;
}
.comment-submit-btn::after {
  content: '  (Ctrl+↵)';
  font-size: 10px;
  opacity: 0.6;
}


/* ============================================
   SHARING
   ============================================ */

.sharing-modal {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.sharing-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sharing-section-title {
  font-family: var(--font-heading);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--plasma-blue);
  text-transform: uppercase;
  margin-bottom: 2px;
}

.sharing-section-desc {
  font-size: 12px;
  color: var(--stardust);
  margin: 0 0 4px;
  line-height: 1.5;
}

.sharing-invite-row {
  display: flex;
  gap: 8px;
}

.sharing-invite-row input[type="email"] {
  flex: 1;
  background: var(--nebula);
  border: 1px solid var(--comet);
  border-radius: var(--border-radius);
  color: var(--supernova);
  font-family: var(--font-body);
  font-size: 13px;
  padding: 7px 10px;
  outline: none;
  transition: border-color var(--transition-fast);
}
.sharing-invite-row input[type="email"]:focus { border-color: var(--plasma-blue); }
.sharing-invite-row input[type="email"]::placeholder { color: var(--stardust); }

.sharing-collabs-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
}

.sharing-collab-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--nebula);
  border: 1px solid var(--comet);
  border-radius: var(--border-radius);
  padding: 7px 12px;
  gap: 8px;
}

.sharing-collab-email {
  font-size: 13px;
  color: var(--starlight);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sharing-empty {
  font-size: 12px;
  color: var(--stardust);
  font-style: italic;
  padding: 4px 0;
}

.sharing-toggle-row {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 13px;
  color: var(--starlight);
  user-select: none;
}

.sharing-toggle-row input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--plasma-blue);
  cursor: pointer;
}

.sharing-link-row {
  display: flex;
  gap: 8px;
  margin-top: 6px;
}

.sharing-link-input {
  flex: 1;
  background: var(--nebula-dark);
  border: 1px solid var(--comet);
  border-radius: var(--border-radius);
  color: var(--starlight);
  -webkit-text-fill-color: var(--starlight);
  opacity: 1;
  font-family: var(--font-body);
  font-size: 11px;
  padding: 7px 10px;
  outline: none;
  cursor: text;
  user-select: all;
}

/* Shared-with-me empty hint */
.shared-empty-hint {
  font-size: 11px;
  color: var(--stardust);
  padding: 4px 12px;
  list-style: none;
  font-style: italic;
  opacity: 0.7;
}

/* Shared-with-me badge on mission items */
.shared-owner-badge {
  font-size: 13px;
  opacity: 0.75;
  margin-left: 2px;
  flex-shrink: 0;
}

/* Public board viewer (public.html) */
.public-board-wrap {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--deep-space);
  font-family: var(--font-body);
  color: var(--starlight);
}

.public-topbar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 24px;
  height: var(--topbar-height);
  background: var(--nebula-dark);
  border-bottom: 1px solid var(--asteroid);
  flex-shrink: 0;
}

.public-logo {
  font-family: var(--font-heading);
  font-size: 14px;
  letter-spacing: 0.1em;
  color: var(--plasma-blue);
}

.public-mission-name {
  font-family: var(--font-heading);
  font-size: 14px;
  color: var(--supernova);
}

.public-readonly-badge {
  font-size: 10px;
  color: var(--stardust);
  border: 1px solid var(--comet);
  border-radius: 4px;
  padding: 2px 7px;
  letter-spacing: 0.05em;
}

.public-board {
  display: flex;
  gap: 16px;
  padding: 24px;
  overflow-x: auto;
  flex: 1;
}

.public-column {
  min-width: var(--column-width);
  max-width: var(--column-width);
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-shrink: 0;
}

.public-col-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  font-family: var(--font-heading);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--stardust);
  text-transform: uppercase;
}

.public-col-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.public-card {
  background: var(--nebula);
  border: 1px solid var(--asteroid);
  border-radius: var(--card-radius);
  padding: 12px 14px;
  font-size: 13px;
  color: var(--starlight);
  position: relative;
  overflow: hidden;
}

.public-card-title {
  font-size: 13px;
  color: var(--supernova);
  line-height: 1.4;
}

.public-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 8px;
}

.public-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 60vh;
  gap: 12px;
  color: var(--stardust);
  font-size: 14px;
}

.public-error-icon {
  font-size: 48px;
  opacity: 0.4;
}