/* ═══════════════════════════════════════════════════════════════════════════
   Starry's Theme — Retro 16-bit Cosmic Space
   Palette from exact video frames (8s loop, 3 phases):
     Phase 1 · Navy/Cobalt  — bg #0d1b3e, galaxy cobalt+gold arms, STARRY ice-blue
     Phase 2 · Crimson      — bg #35080e, galaxy maroon+orange, STARRY salmon→orange
     Phase 3 · Supernova    — bg #280800, galaxy fiery gold, STARRY bright gold
   ════════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&display=swap');

/* ── Site-wide theme variables ───────────────────────────────────────── */
html[data-theme="starry"] { background-color: #0d1b3e; }

/* Dark mode (default) */
body[data-theme="starry"] {
  --bg:            #0d1b3e;
  --bg-deep:       #07101e;
  --bg-elev:       #152058;
  --bg-elev-2:     #1c2d72;
  --panel:         #101c50;
  --panel-strong:  #182870;
  --border:        #254fa0;
  --border-strong: #4a8fe8;
  --text:          #e8f0ff;
  --text-muted:    #8ab0e0;
  --text-dim:      #4a6a9a;
  --accent:        #f5c842;
  --accent-strong: #ffd700;
  --accent-soft:   rgba(245,200,66,0.18);
  --accent-2:      #4a8fe8;
  --accent-2-soft: rgba(74,143,232,0.18);
  --danger:        #ff4d6d;
  --success:       #66ffb2;
  --link:          #f5c842;
  /* Override the cream/light fallbacks from styles.css :root so any
     component that reads these (pickers, tab buttons, chip pickers,
     elevated tabs, placeholder chips, etc.) renders dark.            */
  --muted:               #8ab0e0;
  --surface:             #101c50;
  --surface-soft:        rgba(20, 32, 88, 0.78);
  --surface-soft-strong: rgba(20, 32, 88, 0.92);
  --input-bg:            #080f2b;
  --input-bg-strong:     #0a1432;
  --surface-color:       rgba(8, 15, 43, 0.7);
  --border-color:        #254fa0;
  --text-color:          #e8f0ff;
  --card-1:              #101c50;
  --card-2:              #152058;
  --shadow:              0 8px 24px rgba(0,0,0,0.45);
  font-family: 'VT323', ui-monospace, 'Courier New', monospace;
  font-size: 18px;
  letter-spacing: 0.02em;
  color: var(--text);
  background: #0d1b3e !important;
  image-rendering: pixelated;
}

/* Light mode variant */
body[data-theme="starry"][data-starry-mode="light"] {
  --bg:            #dde8ff;
  --bg-deep:       #c4d5f8;
  --bg-elev:       #eaf0ff;
  --bg-elev-2:     #f5f8ff;
  --panel:         #e4ecff;
  --panel-strong:  #ccdaff;
  --border:        #6090d8;
  --border-strong: #2a5ab8;
  --text:          #0a1540;
  --text-muted:    #2a4a80;
  --text-dim:      #5070a0;
  --accent:        #c87800;
  --accent-strong: #a86000;
  --accent-soft:   rgba(200,120,0,0.14);
  --accent-2:      #2a5ab8;
  --accent-2-soft: rgba(42,90,184,0.12);
  --link:          #c87800;
  --muted:               #2a4a80;
  --surface:             #e4ecff;
  --surface-soft:        rgba(228, 236, 255, 0.85);
  --surface-soft-strong: rgba(204, 218, 255, 0.95);
  --input-bg:            #f5f8ff;
  --input-bg-strong:     #ffffff;
  --surface-color:       rgba(228, 236, 255, 0.85);
  --border-color:        #6090d8;
  --text-color:          #0a1540;
  --card-1:              #e4ecff;
  --card-2:              #ccdaff;
  background: #dde8ff !important;
}
html[data-theme="starry"][data-starry-mode="light"] { background-color: #dde8ff; }

/* ── Kill existing decorative layers ─────────────────────────────────── */
body[data-theme="starry"] .matrix-rain,
body[data-theme="starry"] .emera-glow-layer { display: none !important; }
body[data-theme="starry"] .page-shell { position: relative; z-index: 1; }

/* ── Animated pixel star-field on the main page ──────────────────────── */
body[data-theme="starry"]::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none; z-index: 0;
  background-image:
    radial-gradient(2px 2px at 8%  12%, #fff  50%, transparent 51%),
    radial-gradient(2px 2px at 22% 34%, #f5c842 50%, transparent 51%),
    radial-gradient(2px 2px at 38% 7%,  #fff  50%, transparent 51%),
    radial-gradient(2px 2px at 55% 58%, #4a8fe8 50%, transparent 51%),
    radial-gradient(2px 2px at 72% 23%, #fff  50%, transparent 51%),
    radial-gradient(2px 2px at 84% 70%, #f5c842 50%, transparent 51%),
    radial-gradient(2px 2px at 15% 80%, #fff  50%, transparent 51%),
    radial-gradient(2px 2px at 93% 15%, #4a8fe8 50%, transparent 51%),
    radial-gradient(1px 1px at 48% 90%, #fff  50%, transparent 51%),
    radial-gradient(1px 1px at 66% 44%, #fff  50%, transparent 51%);
  animation: starry-twinkle 3.5s steps(8) infinite;
  opacity: 0.8;
}
@keyframes starry-twinkle {
  0%, 100% { opacity: 0.8; }
  50%      { opacity: 0.35; }
}

/* ── Subtle site-wide cosmic galaxy backdrop (matches intro aesthetic) ── */
body[data-theme="starry"]::after {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none; z-index: 0;
  background:
    radial-gradient(ellipse at 22% 18%, rgba(74,143,232,0.18) 0%, transparent 38%),
    radial-gradient(ellipse at 78% 82%, rgba(245,200,66,0.12) 0%, transparent 42%),
    radial-gradient(ellipse at 65% 32%, rgba(140,80,200,0.10) 0%, transparent 50%);
  animation: starry-bg-drift 60s ease-in-out infinite;
  mix-blend-mode: screen;
}
body[data-theme="starry"][data-starry-mode="light"]::after {
  background:
    radial-gradient(ellipse at 22% 18%, rgba(42,90,184,0.10) 0%, transparent 38%),
    radial-gradient(ellipse at 78% 82%, rgba(200,120,0,0.10) 0%, transparent 42%);
  mix-blend-mode: multiply;
}
@keyframes starry-bg-drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(-20px, 14px) scale(1.06); }
}
body[data-theme="starry"] .page-shell { position: relative; z-index: 1; }

/* ── Typography ──────────────────────────────────────────────────────── */
body[data-theme="starry"] h1,
body[data-theme="starry"] h2,
body[data-theme="starry"] h3,
body[data-theme="starry"] .eyebrow,
body[data-theme="starry"] .brand strong,
body[data-theme="starry"] .primary-button,
body[data-theme="starry"] .ghost-button {
  font-family: 'Press Start 2P', ui-monospace, monospace;
  letter-spacing: 0.05em; text-transform: uppercase;
}
body[data-theme="starry"] h1 {
  font-size: 22px; line-height: 1.5; color: var(--accent);
  text-shadow: 0 0 10px rgba(245,200,66,0.5), 3px 3px 0 #080f2b, -1px -1px 0 #4a8fe8;
}
body[data-theme="starry"] h2 { font-size: 15px; color: var(--accent-2); text-shadow: 2px 2px 0 #080f2b; }
body[data-theme="starry"] h3 { font-size: 12px; color: var(--accent); text-shadow: 1px 1px 0 #080f2b; }
body[data-theme="starry"] .brand strong {
  color: var(--accent); font-size: 13px;
  text-shadow: 0 0 8px rgba(245,200,66,0.6), 2px 2px 0 #080f2b;
}

/* ── Pixel-bordered panels ───────────────────────────────────────────── */
body[data-theme="starry"] .panel-card,
body[data-theme="starry"] .form-section,
body[data-theme="starry"] .hero-panel,
body[data-theme="starry"] .feature-list,
body[data-theme="starry"] .save-banner,
body[data-theme="starry"] .user-pop-menu,
body[data-theme="starry"] .theme-menu,
body[data-theme="starry"] .pill {
  background: var(--panel) !important;
  border: 0 !important; border-radius: 0 !important;
  color: var(--text);
  box-shadow:
    0 -4px 0 0 var(--border-strong), 0 4px 0 0 var(--border-strong),
    -4px 0 0 0 var(--border-strong), 4px 0 0 0 var(--border-strong),
    -4px -4px 0 0 #080f2b, 4px -4px 0 0 #080f2b,
    -4px 4px 0 0 #080f2b, 4px 4px 0 0 #080f2b,
    0 0 0 8px #080f2b;
}
/* Cosmic glow — panel borders pulse through the 3-phase palette */
body[data-theme="starry"] .panel-card,
body[data-theme="starry"] .form-section {
  animation: starry-panel-glow 16s ease-in-out infinite;
}
@keyframes starry-panel-glow {
  0%,100% {
    box-shadow:
      0 -4px 0 0 #4a8fe8, 0 4px 0 0 #4a8fe8, -4px 0 0 0 #4a8fe8, 4px 0 0 0 #4a8fe8,
      -4px -4px 0 0 #080f2b, 4px -4px 0 0 #080f2b, -4px 4px 0 0 #080f2b, 4px 4px 0 0 #080f2b,
      0 0 0 8px #080f2b, 0 0 18px rgba(74,143,232,0.12);
  }
  33% {
    box-shadow:
      0 -4px 0 0 #c0304a, 0 4px 0 0 #c0304a, -4px 0 0 0 #c0304a, 4px 0 0 0 #c0304a,
      -4px -4px 0 0 #080f2b, 4px -4px 0 0 #080f2b, -4px 4px 0 0 #080f2b, 4px 4px 0 0 #080f2b,
      0 0 0 8px #080f2b, 0 0 18px rgba(192,48,74,0.12);
  }
  62%, 75% {
    box-shadow:
      0 -4px 0 0 #c88000, 0 4px 0 0 #c88000, -4px 0 0 0 #c88000, 4px 0 0 0 #c88000,
      -4px -4px 0 0 #080f2b, 4px -4px 0 0 #080f2b, -4px 4px 0 0 #080f2b, 4px 4px 0 0 #080f2b,
      0 0 0 8px #080f2b, 0 0 22px rgba(200,128,0,0.18);
  }
}
body[data-theme="starry"] .topbar {
  background: linear-gradient(180deg, #1e2f7a 0%, #111d55 100%) !important;
  border: 0 !important; border-radius: 0 !important;
  box-shadow: 0 4px 0 0 #4a8fe8, 0 8px 0 0 #080f2b, 0 8px 24px rgba(74,143,232,0.15);
}

/* ── Brand mark → animated cosmic star ───────────────────────────────── */
body[data-theme="starry"] .brand-mark-emerald svg { display: none !important; }
body[data-theme="starry"] .brand-mark-emerald,
body[data-theme="starry"] .brand-mark-default {
  width: 28px; height: 28px;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  display: inline-flex !important; align-items: center; justify-content: center;
  color: transparent !important;        /* hide the raw "★" glyph; ::before paints it */
  text-shadow: none !important;
}
body[data-theme="starry"] .brand-mark-emerald::before,
body[data-theme="starry"] .brand-mark-default::before {
  content: "✦";
  font-size: 24px; line-height: 1;
  color: #f5c842;
  text-shadow: 0 0 8px rgba(245,200,66,0.9), 0 0 18px rgba(255,200,40,0.55);
  animation: starry-brand-star 4.8s steps(1, end) infinite;
}
/* Arcade "PRESS START" feel: snap between palette colours with sharp
   blink frames at 8% / 28% / 58% / 88% — chunky steps, not smooth easing. */
@keyframes starry-brand-star {
  0%, 7%   { color: #f5c842; transform: scale(1) rotate(0deg);
             text-shadow: 0 0 8px rgba(245,200,66,0.9), 0 0 18px rgba(255,200,40,0.55); }
  8%, 11%  { color: #ffffff; transform: scale(1.25) rotate(0deg);
             text-shadow: 0 0 14px #ffffff, 0 0 26px rgba(245,200,66,1); }
  12%, 27% { color: #aaccff; transform: scale(1.05) rotate(72deg);
             text-shadow: 0 0 10px rgba(140,190,255,0.95), 0 0 22px rgba(74,143,232,0.6); }
  28%, 31% { color: #ffffff; transform: scale(1.25) rotate(72deg);
             text-shadow: 0 0 14px #ffffff, 0 0 26px rgba(140,190,255,1); }
  32%, 57% { color: #e85065; transform: scale(1.1) rotate(144deg);
             text-shadow: 0 0 10px rgba(232,80,100,0.95), 0 0 22px rgba(200,20,40,0.55); }
  58%, 61% { color: #ffffff; transform: scale(1.3) rotate(144deg);
             text-shadow: 0 0 14px #ffffff, 0 0 26px rgba(232,80,100,1); }
  62%, 87% { color: #f5a800; transform: scale(1.15) rotate(216deg);
             text-shadow: 0 0 12px rgba(255,168,0,1.0), 0 0 26px rgba(255,120,0,0.65); }
  88%, 91% { color: #ffffff; transform: scale(1.3) rotate(216deg);
             text-shadow: 0 0 14px #ffffff, 0 0 26px rgba(255,168,0,1); }
  92%, 100%{ color: #f5c842; transform: scale(1) rotate(360deg);
             text-shadow: 0 0 8px rgba(245,200,66,0.9), 0 0 18px rgba(255,200,40,0.55); }
}

/* ── Topbar nav links ─────────────────────────────────────────────────── */
body[data-theme="starry"] .topbar-navlink {
  font-family: 'Press Start 2P', monospace !important;
  font-size: 9px !important; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-muted) !important; padding: 8px 10px !important;
  border-radius: 0 !important; background: transparent !important;
  transition: color 80ms, box-shadow 80ms;
}
body[data-theme="starry"] .topbar-navlink:hover {
  color: var(--accent) !important; background: transparent !important;
  text-shadow: 0 0 8px rgba(245,200,66,0.6);
  box-shadow: inset 0 -3px 0 0 var(--accent);
}

/* ── Buttons ─────────────────────────────────────────────────────────── */
body[data-theme="starry"] .primary-button,
body[data-theme="starry"] .ghost-button,
body[data-theme="starry"] button.theme-option,
body[data-theme="starry"] .user-chip-button {
  background: var(--bg-elev) !important;
  color: var(--accent) !important;
  border: 0 !important; border-radius: 0 !important;
  font-family: 'Press Start 2P', monospace !important;
  font-size: 11px !important; padding: 12px 18px !important;
  letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer;
  box-shadow:
    0 -3px 0 0 var(--accent), 0 3px 0 0 var(--accent),
    -3px 0 0 0 var(--accent), 3px 0 0 0 var(--accent),
    inset 0 -3px 0 0 rgba(0,0,0,0.4);
  transition: transform 80ms steps(2), box-shadow 80ms steps(2), filter 120ms;
  text-shadow: 1px 1px 0 #080f2b;
}
body[data-theme="starry"] .primary-button:hover,
body[data-theme="starry"] .ghost-button:hover,
body[data-theme="starry"] button.theme-option:hover,
body[data-theme="starry"] .user-chip-button:hover {
  filter: brightness(1.15); transform: translateY(-2px);
  box-shadow: 0 -3px 0 0 var(--accent), 0 3px 0 0 var(--accent),
    -3px 0 0 0 var(--accent), 3px 0 0 0 var(--accent),
    0 8px 20px rgba(245,200,66,0.45);
}
body[data-theme="starry"] .primary-button:active { transform: translateY(1px); filter: brightness(0.9); }
body[data-theme="starry"] .ghost-button {
  color: var(--accent-2) !important;
  box-shadow: 0 -3px 0 0 var(--accent-2), 0 3px 0 0 var(--accent-2),
    -3px 0 0 0 var(--accent-2), 3px 0 0 0 var(--accent-2),
    inset 0 -3px 0 0 rgba(0,0,0,0.4);
}
/* Danger button */
body[data-theme="starry"] .danger-button {
  background: var(--bg-elev) !important;
  color: var(--danger) !important;
  border: 0 !important; border-radius: 0 !important;
  font-family: 'Press Start 2P', monospace !important;
  font-size: 11px !important; padding: 12px 18px !important;
  cursor: pointer;
  box-shadow:
    0 -3px 0 0 var(--danger), 0 3px 0 0 var(--danger),
    -3px 0 0 0 var(--danger), 3px 0 0 0 var(--danger),
    inset 0 -3px 0 0 rgba(0,0,0,0.4);
  transition: transform 80ms steps(2), filter 120ms;
  text-shadow: 1px 1px 0 #080f2b;
}
/* Webhook tab buttons and any other bare buttons inside server panels */
body[data-theme="starry"] .webhook-tab-btn {
  background: var(--bg-deep) !important;
  color: var(--text-muted) !important;
  border: 0 !important; border-radius: 0 !important;
  font-family: 'VT323', monospace !important;
  font-size: 17px !important; padding: 8px 14px !important;
  cursor: pointer; letter-spacing: 0.04em;
  box-shadow: inset 0 -2px 0 0 transparent;
  transition: color 80ms, box-shadow 80ms, background 80ms;
}
body[data-theme="starry"] .webhook-tab-btn.active {
  color: var(--accent) !important;
  background: var(--bg-elev) !important;
  box-shadow: inset 0 -3px 0 0 var(--accent) !important;
}
body[data-theme="starry"] .webhook-tab-btn:hover:not(.active) {
  color: var(--accent-2) !important;
  background: var(--bg-elev) !important;
  box-shadow: inset 0 -3px 0 0 var(--accent-2) !important;
}

/* Generic tab buttons (Welcome / Goodbye / Auto-Roles, etc.) */
body[data-theme="starry"] .tab-btn {
  background: var(--bg-deep) !important;
  color: var(--text-muted) !important;
  border: 0 !important; border-radius: 0 !important;
  font-family: 'Press Start 2P', monospace !important;
  font-size: 9px !important; padding: 10px 16px !important;
  letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer;
  box-shadow: inset 0 -3px 0 0 transparent;
  transition: color 80ms, box-shadow 80ms, background 80ms;
}
body[data-theme="starry"] .tab-btn.active {
  color: var(--accent) !important;
  background: var(--bg-elev) !important;
  box-shadow: inset 0 -3px 0 0 var(--accent) !important;
}
body[data-theme="starry"] .tab-btn:hover:not(.active) {
  color: var(--accent-2) !important;
  background: var(--bg-elev) !important;
  box-shadow: inset 0 -3px 0 0 var(--accent-2) !important;
}

/* Elevated permissions tabs */
body[data-theme="starry"] .elevated-tab {
  background: var(--bg-deep) !important;
  color: var(--text-muted) !important;
  border: 2px solid var(--border) !important; border-radius: 0 !important;
  font-family: 'Press Start 2P', monospace !important;
  font-size: 9px !important; padding: 10px 16px !important;
  text-transform: uppercase; letter-spacing: 0.06em;
  transition: color 80ms, border-color 80ms, background 80ms;
}
body[data-theme="starry"] .elevated-tab:hover { border-color: var(--accent-2) !important; color: var(--accent-2) !important; }
body[data-theme="starry"] .elevated-tab.active {
  background: var(--accent-soft) !important;
  color: var(--accent) !important;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 2px #080f2b, 0 0 12px rgba(245,200,66,0.35);
}
body[data-theme="starry"] .elevated-card {
  background: var(--panel) !important;
  border: 0 !important; border-radius: 0 !important;
  box-shadow: 0 0 0 2px var(--border-strong), 0 0 0 6px #080f2b;
}

/* Placeholder picker (right-side reference card) */
body[data-theme="starry"] .placeholder-picker {
  background: var(--bg-deep) !important;
  border: 0 !important; border-radius: 0 !important;
  box-shadow: 0 0 0 2px var(--border-strong), 0 0 0 6px #080f2b;
  color: var(--text);
}
body[data-theme="starry"] .placeholder-picker-title,
body[data-theme="starry"] .placeholder-group-label,
body[data-theme="starry"] .placeholder-focus-hint {
  color: var(--text-muted) !important;
  font-family: 'Press Start 2P', monospace !important;
  font-size: 9px !important;
}
body[data-theme="starry"] .placeholder-chip {
  background: var(--bg-elev) !important;
  border: 2px solid var(--border) !important;
  border-radius: 0 !important;
  color: var(--accent) !important;
  font-family: 'VT323', monospace !important;
  font-size: 16px !important;
  text-shadow: 1px 1px 0 #080f2b;
}
body[data-theme="starry"] .placeholder-chip:hover {
  background: var(--accent-soft) !important;
  border-color: var(--accent) !important;
  color: var(--accent-strong) !important;
  box-shadow: 0 0 10px rgba(245,200,66,0.4);
}

/* Chip / token / channel & role pickers */
body[data-theme="starry"] .chip-picker {
  background: var(--input-bg) !important;
  border: 0 !important; border-radius: 0 !important;
  box-shadow: inset 0 0 0 2px var(--accent-2), 0 0 0 2px #080f2b;
  color: var(--text);
}
body[data-theme="starry"] .chip-picker .chip {
  background: var(--accent-2-soft) !important;
  border: 1px solid var(--accent-2) !important;
  color: var(--text) !important;
  border-radius: 0 !important;
  font-family: 'VT323', monospace !important;
  font-size: 14px !important;
}
body[data-theme="starry"] .chip-picker .chip-input,
body[data-theme="starry"] .chip-picker .chip-input::placeholder {
  color: var(--accent) !important;
  background: transparent !important;
  font-family: 'VT323', monospace !important;
}
body[data-theme="starry"] select.member-select {
  background: var(--input-bg) !important;
  color: var(--accent) !important;
  border: 0 !important; border-radius: 0 !important;
  box-shadow: inset 0 0 0 2px var(--accent-2), 0 0 0 2px #080f2b;
  font-family: 'VT323', monospace !important;
  font-size: 16px !important;
}

/* Placeholder text everywhere */
body[data-theme="starry"] input::placeholder,
body[data-theme="starry"] textarea::placeholder,
body[data-theme="starry"] .chip-input::placeholder {
  color: var(--text-dim) !important;
  opacity: 1;
  font-family: 'VT323', monospace !important;
}

/* Generic field rows / hint text */
body[data-theme="starry"] .muted,
body[data-theme="starry"] .muted-text,
body[data-theme="starry"] .field-hint,
body[data-theme="starry"] .save-status {
  color: var(--text-muted) !important;
}

/* ── Toggle switches ─────────────────────────────────────────────────── */
body[data-theme="starry"] .toggle-track {
  background: #0a1432 !important;
  border-radius: 0 !important;
  box-shadow: inset 0 0 0 2px var(--accent-2), 0 0 0 2px #080f2b;
}
body[data-theme="starry"] .toggle input:checked + .toggle-track {
  background: #0d2060 !important;
  box-shadow: inset 0 0 0 2px var(--accent), 0 0 0 2px #080f2b, 0 0 8px rgba(245,200,66,0.3) !important;
}
body[data-theme="starry"] .toggle-thumb {
  background: var(--accent-2) !important;
  border-radius: 0 !important;
  box-shadow: 0 0 6px rgba(74,143,232,0.7);
}
body[data-theme="starry"] .toggle input:checked + .toggle-track .toggle-thumb {
  background: var(--accent) !important;
  box-shadow: 0 0 10px rgba(245,200,66,0.9) !important;
}

/* ── Inputs ──────────────────────────────────────────────────────────── */
body[data-theme="starry"] input[type="text"],
body[data-theme="starry"] input[type="number"],
body[data-theme="starry"] input[type="url"],
body[data-theme="starry"] input[type="search"],
body[data-theme="starry"] input[type="email"],
body[data-theme="starry"] textarea,
body[data-theme="starry"] select {
  background: #080f2b !important; color: var(--accent) !important;
  border: 0 !important; border-radius: 0 !important;
  font-family: 'VT323', monospace !important; font-size: 18px !important;
  padding: 10px 12px !important;
  box-shadow: inset 0 0 0 2px var(--accent-2), 0 0 0 2px #080f2b, 0 0 0 4px var(--accent-2);
  caret-color: var(--accent);
}
body[data-theme="starry"] input:focus,
body[data-theme="starry"] textarea:focus,
body[data-theme="starry"] select:focus {
  outline: none !important;
  box-shadow: inset 0 0 0 2px var(--accent), 0 0 0 2px #080f2b, 0 0 0 4px var(--accent), 0 0 14px rgba(245,200,66,0.5);
}

/* ── Links / Sidebar ─────────────────────────────────────────────────── */
body[data-theme="starry"] a { color: var(--link); text-decoration: none; }
body[data-theme="starry"] a:hover { color: var(--accent-strong); text-shadow: 0 0 6px rgba(245,200,66,0.6); }
body[data-theme="starry"] .sidebar, body[data-theme="starry"] .section-nav {
  background: var(--bg-elev) !important;
  box-shadow: 0 0 0 4px var(--border-strong), 0 0 0 8px #080f2b;
}
body[data-theme="starry"] .sidebar-link, body[data-theme="starry"] .nav-item {
  font-family: 'Press Start 2P', monospace !important; font-size: 9px !important;
  color: var(--text-muted); padding: 10px 12px !important;
  border-radius: 0 !important; text-transform: uppercase;
}
body[data-theme="starry"] .sidebar-link:hover, body[data-theme="starry"] .nav-item:hover {
  color: var(--accent); background: var(--accent-soft) !important;
  box-shadow: inset 4px 0 0 0 var(--accent);
}
body[data-theme="starry"] .sidebar-link.is-active,
body[data-theme="starry"] .sidebar-link.active {
  color: var(--accent); background: var(--accent-soft) !important;
  box-shadow: inset 4px 0 0 0 var(--accent), inset -4px 0 0 0 var(--accent-2);
}

/* ── Theme picker entry — animates through all 4 palette phases ───────── */
.theme-option-starry {
  font-family: 'Press Start 2P', monospace !important;
  font-size: 9px !important; letter-spacing: 0.06em;
  background-size: 300% 300% !important;
  background-image: linear-gradient(135deg,
    #0d1b3e 0%, #35080e 33%, #280800 66%, #0d1b3e 100%) !important;
  animation: starry-picker-cycle 8s ease infinite !important;
  color: #f5c842 !important; text-shadow: 1px 1px 0 #080f2b;
}
.theme-option-starry:hover { filter: brightness(1.3) !important; color: #fff !important; }
@keyframes starry-picker-cycle {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ── Starry light/dark mode dots (mirrors emera-variant-dot pattern) ── */
.theme-row-starry {
  display: flex; flex-direction: column; gap: 4px;
}
.starry-mode-dots {
  display: flex; gap: 6px; padding: 4px 12px 8px;
}
.starry-mode-dot {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid transparent; cursor: pointer;
  transition: transform 100ms, box-shadow 100ms;
  position: relative;
}
.starry-mode-dot.is-dark  { background: #0d1b3e; box-shadow: inset 0 0 0 1px #4a8fe8; }
.starry-mode-dot.is-light { background: #dde8ff; box-shadow: inset 0 0 0 1px #2a5ab8; }
.starry-mode-dot.is-active,
.starry-mode-dot:hover { transform: scale(1.25); box-shadow: 0 0 0 2px #f5c842; }
.starry-mode-dot::after {
  content: attr(title);
  position: absolute; left: 50%; bottom: calc(100% + 6px);
  transform: translateX(-50%);
  background: #07101e; color: #f5c842;
  font-family: 'Press Start 2P', monospace; font-size: 7px;
  padding: 3px 6px; white-space: nowrap; pointer-events: none;
  opacity: 0; transition: opacity 120ms;
}
.starry-mode-dot:hover::after { opacity: 1; }

/* ═══════════════════════════════════════════════════════════════════════════
   INTRO OVERLAY — cycles Navy → Purple → Crimson → Supernova (16s loop)
   matching the exact color palette transitions seen in the video frames.
   ════════════════════════════════════════════════════════════════════════ */

.starry-intro {
  position: fixed; inset: 0; z-index: 100000;
  display: none; align-items: center; justify-content: center;
  flex-direction: column;
  overflow: hidden; user-select: none; -webkit-user-select: none;
  cursor: pointer;
  animation: starry-bg-cycle 16s ease-in-out infinite;
}
body[data-theme="starry"].starry-intro-active .starry-intro { display: flex; }
body[data-theme="starry"].starry-intro-active { overflow: hidden; }

/* ── 3-phase background colour cycle (matches video exactly) ────────── */
@keyframes starry-bg-cycle {
  /* Navy/Cobalt — frames 1-2, 8 */
  0%   { background: radial-gradient(ellipse at 62% 48%, #1e3a8a 0%, #0d1b3e 52%, #07101e 100%); }
  /* Crimson — frames 3-4 */
  33%  { background: radial-gradient(ellipse at 62% 48%, #6b1020 0%, #35080e 52%, #130308 100%); }
  /* Supernova — frames 5-7 */
  62%  { background: radial-gradient(ellipse at 62% 48%, #7a2800 0%, #280800 52%, #0f0200 100%); }
  75%  { background: radial-gradient(ellipse at 62% 48%, #7a2800 0%, #280800 52%, #0f0200 100%); }
  100% { background: radial-gradient(ellipse at 62% 48%, #1e3a8a 0%, #0d1b3e 52%, #07101e 100%); }
}

/* ── Star layers ─────────────────────────────────────────────────────── */
.starry-intro__stars-far {
  position: absolute; inset: -5%; pointer-events: none;
  background-image:
    radial-gradient(1px 1px at 4%  11%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 14% 44%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 27% 8%,  #f5c842 50%, transparent 51%),
    radial-gradient(1px 1px at 39% 72%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 51% 28%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 63% 61%, #4a8fe8 50%, transparent 51%),
    radial-gradient(1px 1px at 76% 19%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 88% 84%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 21% 91%, #f5c842 50%, transparent 51%),
    radial-gradient(1px 1px at 94% 37%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 46% 54%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 71% 3%,  #4a8fe8 50%, transparent 51%);
  animation: starry-drift-far 100s linear infinite, starry-twinkle-intro 4s steps(7) infinite;
  opacity: 0.75;
}
.starry-intro__stars-near {
  position: absolute; inset: -5%; pointer-events: none;
  background-image:
    radial-gradient(2px 2px at 10% 22%, #fff  50%, transparent 51%),
    radial-gradient(2px 2px at 35% 67%, #f5c842 50%, transparent 51%),
    radial-gradient(2px 2px at 60% 15%, #fff  50%, transparent 51%),
    radial-gradient(3px 3px at 18% 85%, #4a8fe8 50%, transparent 51%),
    radial-gradient(3px 3px at 82% 72%, #fff  50%, transparent 51%),
    radial-gradient(2px 2px at 54% 4%,  #f5c842 50%, transparent 51%),
    radial-gradient(2px 2px at 92% 42%, #fff  50%, transparent 51%),
    radial-gradient(3px 3px at 6%  50%, #f5c842 50%, transparent 51%);
  animation: starry-drift-near 55s linear infinite, starry-twinkle-intro 2.8s steps(5) infinite;
  opacity: 0.9;
}

/* Sparkle cross-stars like the video's 4-pointed stars */
.starry-intro__sparkles {
  position: absolute; inset: 0; pointer-events: none;
}
.starry-intro__sparkles::before,
.starry-intro__sparkles::after {
  content: "✦";
  position: absolute; color: #fff; font-size: 24px;
  text-shadow: 0 0 10px #f5c842;
  animation: starry-sparkle-pulse 2.4s ease-in-out infinite;
}
.starry-intro__sparkles::before { top: 7%; right: 6%; animation-delay: 0s; }
.starry-intro__sparkles::after  { bottom: 28%; left: 5%; font-size: 16px; animation-delay: 1.2s; }
@keyframes starry-sparkle-pulse {
  0%, 100% { opacity: 1; transform: scale(1) rotate(0deg); }
  50%       { opacity: 0.2; transform: scale(0.5) rotate(45deg); }
}

@keyframes starry-twinkle-intro {
  0%, 100% { opacity: 0.9; }
  50%       { opacity: 0.25; }
}
@keyframes starry-drift-far  { from { transform: translate(0,0); } to { transform: translate(-20px,-50px); } }
@keyframes starry-drift-near { from { transform: translate(0,0); } to { transform: translate(30px,-90px); } }

/* ── Spinning, colour-cycling galaxy ─────────────────────────────────── */
.starry-intro__galaxy {
  position: absolute;
  width: min(145vw, 1700px); height: min(145vw, 1700px);
  left: 50%; top: 50%;
  border-radius: 50%; pointer-events: none;
  animation: starry-galaxy-spin 22s linear infinite, starry-galaxy-color 16s ease-in-out infinite;
}
@keyframes starry-galaxy-spin {
  from { transform: translate(-50%,-50%) rotate(0deg) scaleX(1.65); }
  to   { transform: translate(-50%,-50%) rotate(360deg) scaleX(1.65); }
}
@keyframes starry-galaxy-color {
  /* Phase 1 — Navy: cobalt blue spiral arms + gold inner bands (frames 1,2,8) */
  0%   { background: conic-gradient(from 0deg,
      transparent 0deg, rgba(30,58,138,0.65) 25deg, rgba(200,120,0,0.7) 75deg,
      rgba(245,200,66,0.85) 110deg, rgba(30,58,138,0.45) 145deg,
      transparent 180deg, rgba(26,50,130,0.55) 215deg,
      rgba(220,130,0,0.65) 260deg, rgba(245,190,50,0.8) 295deg,
      rgba(26,50,130,0.35) 330deg, transparent 360deg);
    filter: blur(26px) brightness(0.9); }
  /* Phase 2 — Crimson: dark maroon spiral + orange inner bands (frames 3,4) */
  33%  { background: conic-gradient(from 0deg,
      transparent 0deg, rgba(107,16,32,0.65) 25deg, rgba(200,48,0,0.75) 75deg,
      rgba(255,180,0,0.8) 110deg, rgba(107,16,32,0.5) 145deg,
      transparent 180deg, rgba(90,12,24,0.55) 215deg,
      rgba(200,50,10,0.7) 260deg, rgba(255,155,0,0.75) 295deg,
      rgba(90,12,24,0.35) 330deg, transparent 360deg);
    filter: blur(20px) brightness(1.2); }
  /* Phase 3 — Supernova: golden-orange spiral, white-hot center (frames 5,6,7) */
  62%  { background: conic-gradient(from 0deg,
      transparent 0deg, rgba(200,80,0,0.6) 25deg, rgba(255,140,0,0.85) 75deg,
      rgba(255,240,120,0.95) 110deg, rgba(180,60,0,0.55) 145deg,
      transparent 180deg, rgba(200,80,0,0.65) 215deg,
      rgba(255,140,0,0.85) 260deg, rgba(255,220,80,0.9) 295deg,
      rgba(160,50,0,0.45) 330deg, transparent 360deg);
    filter: blur(14px) brightness(1.75); }
  75%  { background: conic-gradient(from 0deg,
      transparent 0deg, rgba(200,80,0,0.6) 25deg, rgba(255,140,0,0.85) 75deg,
      rgba(255,240,120,0.95) 110deg, rgba(180,60,0,0.55) 145deg,
      transparent 180deg, rgba(200,80,0,0.65) 215deg,
      rgba(255,140,0,0.85) 260deg, rgba(255,220,80,0.9) 295deg,
      rgba(160,50,0,0.45) 330deg, transparent 360deg);
    filter: blur(14px) brightness(1.75); }
  100% { background: conic-gradient(from 0deg,
      transparent 0deg, rgba(30,58,138,0.65) 25deg, rgba(200,120,0,0.7) 75deg,
      rgba(245,200,66,0.85) 110deg, rgba(30,58,138,0.45) 145deg,
      transparent 180deg, rgba(26,50,130,0.55) 215deg,
      rgba(220,130,0,0.65) 260deg, rgba(245,190,50,0.8) 295deg,
      rgba(26,50,130,0.35) 330deg, transparent 360deg);
    filter: blur(26px) brightness(0.9); }
}

/* ── Shooting star — top-right like the video ────────────────────────── */
.starry-intro__shooting-star {
  position: absolute; top: 9%; right: 14%;
  width: 3px; height: 3px;
  background: #f5c842; border-radius: 50%;
  box-shadow: 0 0 6px 2px #f5c842;
  animation: starry-shoot 6s ease-in-out infinite;
}
.starry-intro__shooting-star::after {
  content: "";
  position: absolute; top: 0; right: 2px;
  width: 90px; height: 1px;
  background: linear-gradient(to left, rgba(245,200,66,0.95), transparent);
  transform-origin: right center;
  transform: rotate(-38deg);
}
@keyframes starry-shoot {
  0%, 58%, 100% { opacity: 0; transform: translate(0,0); }
  60%            { opacity: 1; transform: translate(0,0); }
  78%            { opacity: 0.85; transform: translate(-70px, 42px); }
  80%            { opacity: 0; transform: translate(-75px, 46px); }
}

/* ── Saturn-like planet — bottom-left ────────────────────────────────── */
.starry-intro__planet {
  position: absolute; bottom: 13%; left: 7%;
  width: 54px; height: 54px;
  background: radial-gradient(circle at 38% 36%, #f5c842 0%, #d4920a 60%, #7a4d00 100%);
  border-radius: 50%;
  box-shadow: 0 0 14px rgba(245,200,66,0.45);
  animation: starry-planet-float 5.5s ease-in-out infinite;
}
.starry-intro__planet::before {
  content: "";
  position: absolute; left: -24px; top: 50%; margin-top: -9px;
  width: 102px; height: 18px; border-radius: 50%;
  border: 3px solid rgba(74,143,232,0.75);
  box-shadow: 0 0 8px rgba(74,143,232,0.4);
  transform: rotateX(68deg);
}
@keyframes starry-planet-float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-9px); }
}

/* ── Vignette + CRT scanlines ────────────────────────────────────────── */
.starry-intro__vignette {
  position: absolute; inset: 0; pointer-events: none; z-index: 3;
  background: radial-gradient(ellipse at center, transparent 42%, rgba(0,0,0,0.78) 100%);
}
.starry-intro__scanlines {
  position: absolute; inset: 0; pointer-events: none; z-index: 4;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0.0) 0px, rgba(0,0,0,0.0) 2px,
    rgba(0,0,0,0.14) 3px, rgba(0,0,0,0.0) 4px
  );
  mix-blend-mode: multiply; opacity: 0.6;
}

/* ── Phase 1: Title ──────────────────────────────────────────────────── */
.starry-intro__title-phase {
  position: relative; z-index: 5;
  display: flex; flex-direction: column;
  align-items: center; gap: 36px;
  text-align: center; padding: 24px;
  transition: opacity 500ms ease, transform 500ms ease;
}
.starry-intro__title {
  margin: 0; line-height: 1.4;
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(38px, 9vw, 88px);
  letter-spacing: 0.12em;
  /* Chunky pixel shadow exactly like the video's "STARRY" logo */
  animation: starry-title-color 16s ease-in-out infinite;
}
/* Title text + shadow cycles in sync with the background */
@keyframes starry-title-color {
  /* Phase 1 — Navy: ice-blue/white text with cyan glow (matches video frames 1,2) */
  0%   { color: #aaccff; text-shadow: 5px 5px 0 #07101e, -2px -2px 0 rgba(100,160,255,0.5), 0 0 30px rgba(140,190,255,0.55); }
  /* Phase 2 — Crimson: salmon-pink text with dark-red shadow (matches frames 3,4) */
  33%  { color: #e85065; text-shadow: 5px 5px 0 #350000, -2px -2px 0 rgba(200,20,40,0.6),   0 0 24px rgba(232,80,100,0.5); }
  /* Phase 3 — Supernova: bright gold with orange shadow (matches frames 5,6,7) */
  62%  { color: #f5a800; text-shadow: 5px 5px 0 #501800, -2px -2px 0 rgba(200,60,0,0.65),   0 0 40px rgba(255,180,0,0.7); }
  75%  { color: #f5a800; text-shadow: 5px 5px 0 #501800, -2px -2px 0 rgba(200,60,0,0.65),   0 0 40px rgba(255,180,0,0.7); }
  100% { color: #aaccff; text-shadow: 5px 5px 0 #07101e, -2px -2px 0 rgba(100,160,255,0.5), 0 0 30px rgba(140,190,255,0.55); }
}
.starry-intro__subtitle {
  font-family: 'VT323', monospace; font-size: clamp(16px, 2vw, 22px);
  color: #99b8e8; letter-spacing: 0.3em; margin: -20px 0 0 0; opacity: 0.85;
  animation: starry-subtitle-color 16s ease-in-out infinite;
}
@keyframes starry-subtitle-color {
  0%,100% { color: #7aa4d8; }  /* navy phase: muted cobalt */
  33%     { color: #c07080; }  /* crimson phase: dusty rose */
  62%     { color: #d08030; }  /* supernova: warm amber */
  75%     { color: #d08030; }
}

.starry-intro__press-start {
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(13px, 2vw, 20px);
  color: #f5c842;
  background: rgba(8, 15, 43, 0.88);
  padding: 20px 40px;
  border: 0; cursor: pointer;
  letter-spacing: 0.14em;
  text-shadow: 0 0 8px rgba(245,200,66,0.7), 2px 2px 0 #080f2b;
  box-shadow:
    0 -4px 0 0 #f5c842, 0 4px 0 0 #f5c842,
    -4px 0 0 0 #f5c842, 4px 0 0 0 #f5c842,
    0 0 0 8px #080f2b, 0 0 36px rgba(245,200,66,0.35);
  animation: starry-press-pulse 1.3s ease-in-out infinite;
  transition: transform 80ms steps(2);
}
.starry-intro__press-start:hover { transform: scale(1.04); }
.starry-intro__press-start:active { transform: scale(0.96); }
@keyframes starry-press-pulse {
  0%,100% { opacity: 1;    box-shadow: 0 -4px 0 0 #f5c842, 0 4px 0 0 #f5c842, -4px 0 0 0 #f5c842, 4px 0 0 0 #f5c842, 0 0 0 8px #080f2b, 0 0 36px rgba(245,200,66,0.35); }
  50%     { opacity: 0.4;  box-shadow: 0 -4px 0 0 #f5c842, 0 4px 0 0 #f5c842, -4px 0 0 0 #f5c842, 4px 0 0 0 #f5c842, 0 0 0 8px #080f2b, 0 0 10px rgba(245,200,66,0.08); }
}

.starry-intro__hint {
  font-family: 'VT323', monospace; font-size: 18px;
  color: #5a7ab8; letter-spacing: 0.1em; margin: 0;
}

/* ── Phase 2: Selection ──────────────────────────────────────────────── */
.starry-intro__select-phase {
  position: relative; z-index: 5;
  display: none; flex-direction: column;
  align-items: center; gap: 30px; padding: 24px;
  width: min(980px, 92vw);
  opacity: 0; transform: translateY(24px);
  transition: opacity 600ms ease, transform 600ms ease;
}
body[data-theme="starry"].starry-intro-phase-select .starry-intro__title-phase {
  opacity: 0; transform: translateY(-24px); pointer-events: none;
}
body[data-theme="starry"].starry-intro-phase-select .starry-intro__select-phase {
  display: flex; opacity: 1; transform: translateY(0);
}
.starry-intro__select-heading {
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(10px, 1.5vw, 15px);
  color: #4a8fe8; letter-spacing: 0.2em; margin: 0;
  text-shadow: 2px 2px 0 #080f2b;
}

.starry-intro__panels { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; width: 100%; }
@media (max-width: 700px) { .starry-intro__panels { grid-template-columns: 1fr; } }

.starry-panel {
  position: relative;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 16px;
  padding: 40px 28px;
  background: rgba(8, 15, 43, 0.92);
  color: #f5c842;
  font-family: 'Press Start 2P', monospace;
  font-size: 13px; letter-spacing: 0.1em;
  text-decoration: none; text-align: center;
  cursor: pointer; text-transform: uppercase;
  box-shadow:
    0 -6px 0 0 #4a8fe8, 0 6px 0 0 #4a8fe8,
    -6px 0 0 0 #4a8fe8, 6px 0 0 0 #4a8fe8,
    -6px -6px 0 0 #080f2b, 6px -6px 0 0 #080f2b,
    -6px 6px 0 0 #080f2b, 6px 6px 0 0 #080f2b,
    0 0 0 12px #080f2b, inset 0 -6px 0 0 rgba(0,0,0,0.45);
  transition: transform 120ms steps(3), box-shadow 120ms;
}
.starry-panel__icon { font-size: 44px; line-height: 1; filter: drop-shadow(2px 2px 0 #080f2b); }
.starry-panel__label {
  position: relative; display: inline-flex; align-items: center; gap: 12px;
  text-shadow: 2px 2px 0 #080f2b;
}
.starry-panel__sub {
  font-family: 'VT323', monospace; font-size: 17px;
  color: #99b8e8; letter-spacing: 0.06em; text-transform: none; margin: 0;
}
.starry-panel__arrow {
  display: inline-block; width: 0; opacity: 0; color: #f5c842; font-size: 18px;
  transition: opacity 100ms steps(2), width 140ms steps(3), transform 140ms steps(3);
  text-shadow: 2px 2px 0 #080f2b;
}
.starry-panel__arrow--left  { transform: translateX(10px); }
.starry-panel__arrow--right { transform: translateX(-10px); }
.starry-panel:hover {
  transform: translateY(-5px);
  box-shadow:
    0 -6px 0 0 #f5c842, 0 6px 0 0 #f5c842,
    -6px 0 0 0 #f5c842, 6px 0 0 0 #f5c842,
    -6px -6px 0 0 #080f2b, 6px -6px 0 0 #080f2b,
    -6px 6px 0 0 #080f2b, 6px 6px 0 0 #080f2b,
    0 0 0 12px #080f2b, 0 16px 44px rgba(245,200,66,0.6),
    inset 0 -6px 0 0 rgba(0,0,0,0.45);
}
.starry-panel:hover .starry-panel__arrow { opacity: 1; width: 1.2em; transform: translateX(0); }
.starry-panel:hover .starry-panel__icon { animation: starry-icon-bounce 0.35s steps(2) infinite alternate; }
@keyframes starry-icon-bounce {
  from { transform: translateY(0); }
  to   { transform: translateY(-4px); }
}
.starry-panel:focus-visible {
  outline: none;
  box-shadow: 0 -6px 0 0 #f5c842, 0 6px 0 0 #f5c842,
    -6px 0 0 0 #f5c842, 6px 0 0 0 #f5c842,
    0 0 0 12px #080f2b, 0 0 0 18px #f5c842;
}

/* ── Controls ────────────────────────────────────────────────────────── */
.starry-intro__controls {
  position: absolute; top: 16px; right: 16px;
  display: flex; gap: 8px; z-index: 6;
}
.starry-intro__btn {
  background: rgba(8, 15, 43, 0.88); color: #5a7ab8; border: 0;
  font-family: 'Press Start 2P', monospace; font-size: 8px;
  letter-spacing: 0.1em; padding: 10px 13px; cursor: pointer; text-transform: uppercase;
  box-shadow: 0 -2px 0 0 #2a5ab8, 0 2px 0 0 #2a5ab8, -2px 0 0 0 #2a5ab8, 2px 0 0 0 #2a5ab8;
  transition: color 120ms, box-shadow 120ms;
}
.starry-intro__btn:hover {
  color: #f5c842;
  box-shadow: 0 -2px 0 0 #f5c842, 0 2px 0 0 #f5c842, -2px 0 0 0 #f5c842, 2px 0 0 0 #f5c842;
}

/* ── Reduced motion ───────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  body[data-theme="starry"]::before,
  .starry-intro, .starry-intro__galaxy,
  .starry-intro__stars-far, .starry-intro__stars-near,
  .starry-intro__sparkles::before, .starry-intro__sparkles::after,
  .starry-intro__shooting-star, .starry-intro__planet,
  .starry-intro__press-start, .starry-intro__title,
  .starry-intro__subtitle { animation: none !important; }
}

/* ── Topbar theme-toggle: match nav-link visual weight ───────────────────
   The generic .ghost-button rule above paints a chunky pixel-bordered
   button background. Inside the topbar we want the Theme button to
   blend with Home/Servers/Docs (transparent until hover). */
body[data-theme="starry"] .topbar-nav #theme-toggle,
body[data-theme="starry"] .topbar-theme-wrap #theme-toggle {
  background: transparent !important;
  box-shadow: none !important;
  font-family: 'Press Start 2P', monospace !important;
  font-size: 9px !important;
  padding: 8px 10px !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted) !important;
  border: 0 !important; border-radius: 0 !important;
  transform: none !important;
  text-shadow: none !important;
}
body[data-theme="starry"] .topbar-nav #theme-toggle:hover,
body[data-theme="starry"] .topbar-theme-wrap #theme-toggle:hover {
  background: transparent !important;
  color: var(--accent) !important;
  box-shadow: inset 0 -3px 0 0 var(--accent) !important;
  text-shadow: 0 0 8px rgba(245,200,66,0.6) !important;
  transform: none !important;
  filter: none !important;
}

/* ── <input type="color"> — kill the default ugly outline ────────────── */
body[data-theme="starry"] input[type="color"] {
  appearance: none;
  -webkit-appearance: none;
  background: #080f2b !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 4px !important;
  width: 48px;
  height: 32px;
  outline: 0 !important;
  cursor: pointer;
  box-shadow:
    0 -2px 0 0 var(--accent-2), 0 2px 0 0 var(--accent-2),
    -2px 0 0 0 var(--accent-2), 2px 0 0 0 var(--accent-2),
    inset 0 0 0 2px #080f2b !important;
}
body[data-theme="starry"] input[type="color"]:focus,
body[data-theme="starry"] input[type="color"]:hover {
  outline: 0 !important;
  box-shadow:
    0 -2px 0 0 var(--accent), 0 2px 0 0 var(--accent),
    -2px 0 0 0 var(--accent), 2px 0 0 0 var(--accent),
    inset 0 0 0 2px #080f2b !important;
}
body[data-theme="starry"] input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; border: 0; }
body[data-theme="starry"] input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 0; }
body[data-theme="starry"] input[type="color"]::-moz-color-swatch       { border: 0; border-radius: 0; }

/* ── Embed color frame — animated arcade gradient halo around the
   <input type="color"> swatch on the starry theme. Same star-blink
   palette as the brand mark. */
body[data-theme="starry"] .embed-color-frame {
  padding: 3px !important;
  border-radius: 0 !important;
  background: linear-gradient(135deg,
      var(--accent),
      var(--accent-2),
      #ff5e7e,
      #ffd166,
      var(--accent)) !important;
  background-size: 220% 220% !important;
  animation: starry-embed-color-shimmer 6s linear infinite;
  box-shadow:
      0 0 0 2px var(--accent-2),
      0 0 12px rgba(126, 165, 255, 0.45) !important;
}
body[data-theme="starry"] .embed-color-frame > input[type="color"] {
  /* Keep the picker's own pixel-bordered look readable inside the frame. */
  width: 56px !important;
  height: 36px !important;
}
@keyframes starry-embed-color-shimmer {
  0%   { background-position:   0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position:   0% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  body[data-theme="starry"] .embed-color-frame { animation: none; }
}

/* ── Popover containers (role + user pickers) — force dark surface ──── */
body[data-theme="starry"] .role-pop,
body[data-theme="starry"] .user-pop,
body[data-theme="starry"] .user-pop-menu,
body[data-theme="starry"] .channel-pick-pop,
body[data-theme="starry"] .channel-multi-pop,
body[data-theme="starry"] .placeholder-picker,
body[data-theme="starry"] .modlog-user-pop,
body[data-theme="starry"] .channel-multi-inline-list {
  background: #050a1f !important;
  color: var(--text) !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow:
      inset 0 0 0 2px var(--accent-2),
      0 14px 28px rgba(0, 0, 0, 0.55) !important;
}

/* Role picker rows / search field — dark coverage */
body[data-theme="starry"] .role-pop-search,
body[data-theme="starry"] input[type="search"],
body[data-theme="starry"] input[type="date"] {
  background: #080f2b !important;
  color: var(--text) !important;
  border: 0 !important; border-radius: 0 !important;
  box-shadow: inset 0 0 0 2px var(--accent-2) !important;
  font-family: 'VT323', monospace !important; font-size: 14px !important;
  padding: 8px 10px !important;
  color-scheme: dark;
}
body[data-theme="starry"] .role-pop-search::placeholder,
body[data-theme="starry"] input[type="search"]::placeholder { color: var(--text-dim) !important; }
body[data-theme="starry"] .role-pop-list,
body[data-theme="starry"] .role-pop-item,
body[data-theme="starry"] .role-pop-empty {
  background: transparent !important;
  color: var(--text) !important;
  border-radius: 0 !important;
}
body[data-theme="starry"] .role-pop-item:hover {
  background: rgba(245, 200, 66, 0.12) !important;
  color: var(--accent) !important;
  box-shadow: inset 0 0 0 2px var(--accent-2) !important;
}
body[data-theme="starry"] .role-pop-item.active {
  background: rgba(126, 165, 255, 0.18) !important;
}

/* Channel multi-picker rows — dark coverage */
body[data-theme="starry"] .channel-multi-inline-row,
body[data-theme="starry"] .channel-multi-inline-cat,
body[data-theme="starry"] .channel-multi-inline-empty,
body[data-theme="starry"] .channel-multi-name,
body[data-theme="starry"] .channel-multi-cat-name,
body[data-theme="starry"] .channel-multi-cat-count {
  background: transparent !important;
  color: var(--text) !important;
  border-radius: 0 !important;
}
body[data-theme="starry"] .channel-multi-inline-row:hover {
  background: rgba(245, 200, 66, 0.10) !important;
}
body[data-theme="starry"] .channel-multi-inline-row.selected {
  background: rgba(126, 165, 255, 0.18) !important;
}

/* ── User search popover — make every inner element dark in starry ──── */
body[data-theme="starry"] .user-pop-search {
  background: #080f2b !important;
  color: var(--text) !important;
  border: 0 !important; border-radius: 0 !important;
  box-shadow: inset 0 0 0 2px var(--accent-2) !important;
  font-family: 'VT323', monospace !important; font-size: 14px !important;
  padding: 8px 10px !important;
}
body[data-theme="starry"] .user-pop-search::placeholder { color: var(--text-dim) !important; }
body[data-theme="starry"] .user-pop-list,
body[data-theme="starry"] .user-pop-empty,
body[data-theme="starry"] .user-pop-meta,
body[data-theme="starry"] .user-pop-name,
body[data-theme="starry"] .user-pop-sub { color: var(--text) !important; background: transparent !important; }
body[data-theme="starry"] .user-pop-sub,
body[data-theme="starry"] .user-pop-empty { color: var(--text-muted) !important; }
body[data-theme="starry"] .user-pop-item {
  background: transparent !important;
  color: var(--text) !important;
  border-radius: 0 !important;
}
body[data-theme="starry"] .user-pop-item:hover {
  background: rgba(245, 200, 66, 0.12) !important;
  color: var(--accent) !important;
  box-shadow: inset 0 0 0 2px var(--accent-2) !important;
}
body[data-theme="starry"] .modlog-filter-chip {
  background: #080f2b !important;
  color: var(--text) !important;
  border: 0 !important; border-radius: 0 !important;
  box-shadow: inset 0 0 0 2px var(--accent-2) !important;
}
body[data-theme="starry"] .modlog-filter-name { color: var(--text) !important; }
body[data-theme="starry"] .modlog-filter-id   { color: var(--text-muted) !important; }
body[data-theme="starry"] .modlog-filter-clear {
  background: transparent !important; color: var(--accent) !important;
  border: 0 !important;
}

/* ── Reaction-role logs deleted-channel/role chip in starry ──────────── */
body[data-theme="starry"] .dm-mention {
  background: rgba(245, 200, 66, 0.16) !important;
  color: var(--accent) !important;
  border-radius: 0 !important;
  padding: 0 4px !important;
}
body[data-theme="starry"] .dm-mention.is-deleted {
  background: rgba(232, 80, 100, 0.18) !important;
  color: #ff8090 !important;
  text-decoration: line-through;
  text-decoration-color: rgba(255, 128, 144, 0.7);
}