/* ================================================================
   FCTV2 — Base styles
   ================================================================ */

/* ── Theme: Dark (default) ───────────────────────────────────── */
:root,
[data-theme="dark"] {
  --bg-dark: #1c1917;
  --bg-darker: #121110;
  --bg-card: #272420;
  --bg-input: #353230;
  --text-primary: #e0ddd8;
  --text-secondary: #9a9590;
  --text-muted: #8a8580;
  --accent: #c0a040;
  --accent-hover: #d4b44e;
  --danger: #d9534f;
  --danger-hover: #c9302c;
  --success: #5cb85c;
  --warning: #f0ad4e;
  --border: #353230;
  --radius-sm: 3px;
  --radius: 6px;
  --radius-lg: 8px;
  --radius-pill: 10px;
  --shadow: 0 2px 8px rgba(0,0,0,0.4);

  /* Overlay / surface variants */
  --hover-overlay: rgba(255,255,255,0.05);
  --subtle-overlay: rgba(255,255,255,0.04);
  --faint-overlay: rgba(255,255,255,0.02);
  --badge-overlay: rgba(255,255,255,0.06);
  --active-row: rgba(192, 160, 64, 0.08);

  /* Easing */
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Contrast text — for text on solid accent/status backgrounds */
  --text-on-accent: #000;
  --text-on-status: #fff;

  /* Categorical accent colors (admin wayfinding, not theme-adaptive) */
  --accent-blue: #58a6ff;
  --accent-purple: #9b7ed8;

  /* Spacing scale */
  --sp-xs: 4px;
  --sp-sm: 8px;
  --sp-md: 12px;
  --sp-lg: 16px;
  --sp-xl: 20px;
  --sp-2xl: 24px;
  --sp-3xl: 32px;
  --sp-4xl: 48px;

  /* Type scale — ~1.2 minor-third ratio (1rem = 16px browser default) */
  --text-xs: 0.6875rem;   /* ~11px — micro labels, badges, table headers */
  --text-sm: 0.75rem;     /* ~12px — secondary UI, metadata, code cells */
  --text-base: 0.8125rem; /* ~13px — admin body, nav, inputs, table cells */
  --text-lg: 1rem;        /* ~16px — public body, large buttons */
  --text-xl: 1.125rem;    /* ~18px — logo, sub-display */
  --text-2xl: 1.25rem;    /* ~20px — page titles */
  --text-3xl: 1.75rem;    /* ~28px — stat numbers */
  --text-4xl: 2.25rem;    /* ~36px — display headings (responsive) */
  --text-display: 3rem;   /* ~48px — hero/error display */

  /* Line-heights */
  --leading-tight: 1.2;
  --leading-snug: 1.35;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;
}

/* ── Theme: Midnight ─────────────────────────────────────────── */
[data-theme="midnight"] {
  --bg-dark: #0d1117;
  --bg-darker: #010409;
  --bg-card: #161b22;
  --bg-input: #21262d;
  --text-primary: #c9d1d9;
  --text-secondary: #8b949e;
  --text-muted: #6e7681;
  --accent: #58a6ff;
  --accent-hover: #79b8ff;
  --danger: #f85149;
  --danger-hover: #da3633;
  --success: #3fb950;
  --warning: #d29922;
  --border: #30363d;
  --shadow: 0 2px 8px rgba(1,4,9,0.7);
  --hover-overlay: rgba(136,192,255,0.06);
  --subtle-overlay: rgba(136,192,255,0.04);
  --faint-overlay: rgba(136,192,255,0.02);
  --badge-overlay: rgba(136,192,255,0.07);
  --active-row: rgba(88, 166, 255, 0.08);
}

/* ── Theme: Crimson ──────────────────────────────────────────── */
[data-theme="crimson"] {
  --bg-dark: #1a1015;
  --bg-darker: #110a0e;
  --bg-card: #2a1520;
  --bg-input: #351a28;
  --text-primary: #e8d0d8;
  --text-secondary: #a0808a;
  --text-muted: #8a6878;
  --accent: #e04060;
  --accent-hover: #f05070;
  --danger: #e08040;
  --danger-hover: #cc6e30;
  --success: #50b878;
  --warning: #e0a840;
  --border: #402030;
  --shadow: 0 2px 8px rgba(17,10,14,0.7);
  --hover-overlay: rgba(224,64,96,0.06);
  --subtle-overlay: rgba(224,64,96,0.04);
  --faint-overlay: rgba(224,64,96,0.02);
  --badge-overlay: rgba(224,64,96,0.07);
  --active-row: rgba(224, 64, 96, 0.08);
}

/* ── Theme: Forest ───────────────────────────────────────────── */
[data-theme="forest"] {
  --bg-dark: #0f1a14;
  --bg-darker: #0a120e;
  --bg-card: #152a1e;
  --bg-input: #1a3525;
  --text-primary: #d0e8d8;
  --text-secondary: #80a890;
  --text-muted: #688870;
  --accent: #40c070;
  --accent-hover: #50d080;
  --danger: #d06050;
  --danger-hover: #b84840;
  --success: #80d8a0;
  --warning: #c8a840;
  --border: #203828;
  --shadow: 0 2px 8px rgba(10,18,14,0.7);
  --hover-overlay: rgba(64,192,112,0.06);
  --subtle-overlay: rgba(64,192,112,0.04);
  --faint-overlay: rgba(64,192,112,0.02);
  --badge-overlay: rgba(64,192,112,0.07);
  --active-row: rgba(64, 192, 112, 0.08);
}

/* ── Theme: Hacker ───────────────────────────────────────────── */
[data-theme="hacker"] {
  --bg-dark: #080a08;
  --bg-darker: #030503;
  --bg-card: #0c100c;
  --bg-input: #161a16;
  --text-primary: #33d17a;
  --text-secondary: #28a060;
  --text-muted: #1e7848;
  --accent: #33d17a;
  --accent-hover: #55e094;
  --danger: #d05040;
  --danger-hover: #b83830;
  --success: #33d17a;
  --warning: #c8a830;
  --border: #1a2a1a;
  --shadow: 0 2px 8px rgba(3,5,3,0.8);
  --hover-overlay: rgba(51,209,122,0.06);
  --subtle-overlay: rgba(51,209,122,0.04);
  --faint-overlay: rgba(51,209,122,0.02);
  --badge-overlay: rgba(51,209,122,0.07);
  --active-row: rgba(51, 209, 122, 0.1);
}

/* ── Theme: Vapor ────────────────────────────────────────────── */
[data-theme="vapor"] {
  --bg-dark: #1a0a2e;
  --bg-darker: #0f0520;
  --bg-card: #261040;
  --bg-input: #301850;
  --text-primary: #e0d0f0;
  --text-secondary: #a080c0;
  --text-muted: #8060a0;
  --accent: #ff71ce;
  --accent-hover: #ff99dd;
  --danger: #ff6060;
  --danger-hover: #e04848;
  --success: #60e0a0;
  --warning: #f0c060;
  --border: #3a2060;
  --shadow: 0 2px 8px rgba(15,5,32,0.7);
  --hover-overlay: rgba(255,113,206,0.06);
  --subtle-overlay: rgba(255,113,206,0.04);
  --faint-overlay: rgba(255,113,206,0.02);
  --badge-overlay: rgba(255,113,206,0.07);
  --active-row: rgba(255, 113, 206, 0.08);
}

/* ── Theme: Evangelion (NERV Command Center) ─────────────────── */
[data-theme="evangelion"] {
  --bg-dark: #1a0820;
  --bg-darker: #0d0412;
  --bg-card: #241030;
  --bg-input: #2e1840;
  --text-primary: #e0d8f0;
  --text-secondary: #9080a8;
  --text-muted: #6a5880;
  --accent: #ff6a00;
  --accent-hover: #ff8a30;
  --danger: #e03030;
  --danger-hover: #c02020;
  --success: #33d17a;
  --warning: #ff6a00;
  --border: #3a1850;
  --shadow: 0 2px 12px rgba(255,106,0,0.12), 0 2px 8px rgba(14,5,21,0.8);
  --hover-overlay: rgba(255,106,0,0.08);
  --subtle-overlay: rgba(255,106,0,0.04);
  --faint-overlay: rgba(255,106,0,0.02);
  --badge-overlay: rgba(255,106,0,0.07);
  --active-row: rgba(255, 106, 0, 0.1);
}

/* ── Theme: LCARS (Star Trek) ────────────────────────────────── */
[data-theme="lcars"] {
  --bg-dark: #000000;
  --bg-darker: #000000;
  --bg-card: #0c0810;
  --bg-input: #150f1e;
  --text-primary: #ff9900;
  --text-secondary: #cc99cc;
  --text-muted: #9977aa;
  --accent: #ff9900;
  --accent-hover: #ffbb44;
  --danger: #cc6666;
  --danger-hover: #b84848;
  --success: #99cc99;
  --warning: #ff9966;
  --border: #332244;
  --shadow: 0 2px 8px rgba(0,0,0,0.9);
  --hover-overlay: rgba(255,153,0,0.08);
  --subtle-overlay: rgba(255,153,0,0.04);
  --faint-overlay: rgba(255,153,0,0.02);
  --badge-overlay: rgba(204,153,204,0.12);
  --active-row: rgba(255, 153, 0, 0.1);
  /* LCARS palette tokens */
  --lcars-gold: #ff9900;
  --lcars-peach: #ff9966;
  --lcars-lavender: #cc99cc;
  --lcars-blue: #9999ff;
  --lcars-mauve: #cc6699;
  --lcars-tan: #ffcc99;
  --lcars-salmon: #cc6677;
  --lcars-bg: #000000;
}

/* ── Theme: Synthwave (80s Retrowave) ───────────────────────────── */
[data-theme="synthwave"] {
  --bg-dark: #0d0221;
  --bg-darker: #09011a;
  --bg-card: #150535;
  --bg-input: #1e0c42;
  --text-primary: #f0e0ff;
  --text-secondary: #b090d0;
  --text-muted: #8060a8;
  --accent: #b24dff;
  --accent-hover: #c77dff;
  --danger: #ff1744;
  --danger-hover: #d50000;
  --success: #39ff8e;
  --warning: #ffab40;
  --border: #301060;
  --shadow: 0 2px 12px rgba(178, 77, 255, 0.15);
  --hover-overlay: rgba(178, 77, 255, 0.08);
  --subtle-overlay: rgba(178, 77, 255, 0.04);
  --faint-overlay: rgba(178, 77, 255, 0.02);
  --badge-overlay: rgba(0, 229, 255, 0.1);
  --active-row: rgba(178, 77, 255, 0.1);
  /* Synthwave palette tokens */
  --sw-pink: #ff2975;
  --sw-cyan: #00fff5;
  --sw-blue: #4d8aff;
  --sw-purple: #b24dff;
  --sw-orange: #ff6b35;
  --sw-yellow: #ffd319;
  --sw-grid: rgba(0, 255, 245, 0.2);
  --sw-glow: 0 0 8px rgba(178, 77, 255, 0.5), 0 0 16px rgba(178, 77, 255, 0.2);
  --sw-cyan-glow: 0 0 8px rgba(0, 255, 245, 0.5), 0 0 16px rgba(0, 255, 245, 0.2);
}

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

html {
  height: 100%;
  font-size: 100%;
}

body {
  height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--text-primary);
  background: var(--bg-dark);
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
}

a {
  color: var(--accent);
  text-decoration: none;
}
a:hover {
  color: var(--accent-hover);
}

img {
  max-width: 100%;
  height: auto;
}

/* ── Flash messages ───────────────────────────────────────────── */
.flash {
  position: fixed;
  top: var(--sp-md);
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  padding: var(--sp-md) var(--sp-2xl);
  border-radius: var(--radius);
  font-weight: 600;
  cursor: pointer;
  animation: flashIn 0.3s var(--ease-out-quart);
  max-width: min(500px, calc(100vw - 20px));
  text-align: center;
}
.flash-success { background: var(--success); color: var(--text-on-status); border-left: 3px solid rgba(0,0,0,0.25); }
.flash-error { background: var(--danger); color: var(--text-on-status); border-left: 3px solid rgba(0,0,0,0.25); }
.flash-close {
  margin-left: var(--sp-md);
  font-size: var(--text-xl);
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  padding: 0 var(--sp-xs);
  line-height: 1;
  transition: opacity 0.15s var(--ease-out-quart), transform 0.15s var(--ease-out-quart);
}
.flash-close:hover {
  opacity: 0.7;
  transform: scale(1.15);
}
.flash-close:active {
  transform: scale(0.9);
}
@keyframes flashIn {
  from { opacity: 0; transform: translateX(-50%) translateY(-10px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
@keyframes flashOut {
  from { opacity: 1; transform: translateX(-50%) translateY(0); }
  to   { opacity: 0; transform: translateX(-50%) translateY(-10px); }
}

/* ── Buttons ──────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-xs);
  padding: var(--sp-sm) var(--sp-md);
  border: none;
  border-radius: var(--radius);
  font-size: var(--text-base);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s var(--ease-out-quart), color 0.2s, border-color 0.2s, transform 0.15s var(--ease-out-quart), box-shadow 0.2s;
  text-decoration: none;
}
.btn:active {
  transform: scale(0.97);
}
.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  pointer-events: none;
}
.btn-primary {
  background: var(--accent);
  color: var(--text-on-accent);
}
.btn-primary:hover {
  background: var(--accent-hover);
  color: var(--text-on-accent);
}
.btn-danger {
  background: var(--danger);
  color: var(--text-on-status);
}
.btn-danger:hover {
  background: var(--danger-hover);
}
.btn-success {
  background: var(--success);
  color: var(--text-on-status);
}
.btn-success:hover {
  filter: brightness(1.1);
}
.btn-ghost {
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border);
}
.btn-ghost:hover {
  color: var(--text-primary);
  border-color: var(--text-secondary);
}
.btn-sm { padding: var(--sp-xs) var(--sp-sm); font-size: var(--text-sm); }
.btn-lg { padding: var(--sp-md) var(--sp-2xl); font-size: var(--text-lg); }
.btn-block { display: flex; width: 100%; justify-content: center; }

.btn-icon {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-secondary);
  font-size: var(--text-lg);
  padding: var(--sp-xs);
  border-radius: var(--radius-sm);
  transition: color 0.2s var(--ease-out-quart), transform 0.15s var(--ease-out-quart), background 0.2s;
}
.btn-icon:hover {
  color: var(--text-primary);
  background: var(--hover-overlay);
}
.btn-icon:active {
  transform: scale(0.9);
}
.btn-icon.btn-danger { color: var(--danger); }
.btn-icon.btn-danger:hover { color: var(--danger-hover); }

/* ── Form elements ────────────────────────────────────────────── */
.form-group {
  margin-bottom: var(--sp-lg);
  flex: 1;
}
.form-group:last-child {
  margin-bottom: 0;
}
.form-group label {
  display: block;
  margin-bottom: var(--sp-xs);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
}
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: var(--sp-sm) var(--sp-md);
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-primary);
  font-size: var(--text-base);
  font-family: inherit;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 15%, transparent);
}
.form-group input:invalid:not(:focus):not(:placeholder-shown),
.form-group textarea:invalid:not(:focus):not(:placeholder-shown) {
  border-color: var(--danger);
  box-shadow: 0 0 0 2px rgba(217, 83, 79, 0.12);
}
.form-row {
  display: flex;
  gap: var(--sp-md);
  flex-wrap: wrap;
}

.inline-form {
  display: inline-flex;
  align-items: center;
}

.inline-select {
  padding: var(--sp-xs) var(--sp-sm);
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-primary);
  font-size: var(--text-sm);
}
.inline-select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 15%, transparent);
}

/* ── Public page ──────────────────────────────────────────────── */
.public-page {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
  background: #000;
}

.site-banner {
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--bg-darker);
  padding: var(--sp-sm) 0;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  animation: bannerSlideDown 0.5s var(--ease-out-expo);
  transition: max-height 0.45s var(--ease-out-expo),
              padding 0.45s var(--ease-out-expo),
              opacity 0.3s var(--ease-out-quart),
              border-bottom-width 0.45s var(--ease-out-expo);
  max-height: 140px;
  overflow: hidden;
}
.banner-img {
  height: 12.8vh;
  max-height: 102px;
  width: auto;
}

/* ── MOTD / Announcement Bar ─────────────────────────────────── */
.motd-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-sm);
  background: color-mix(in srgb, var(--accent) 12%, var(--bg-dark));
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  padding: var(--sp-xs) var(--sp-lg);
  font-size: var(--text-sm);
  color: var(--text-primary);
  animation: bannerSlideDown 0.4s var(--ease-out-expo);
  flex-shrink: 0;
  transition: max-height 0.4s var(--ease-out-expo),
              padding 0.4s var(--ease-out-expo),
              opacity 0.25s var(--ease-out-quart),
              border-bottom-width 0.4s var(--ease-out-expo);
  max-height: 60px;
  overflow: hidden;
}
.motd-text {
  flex: 1;
  text-align: center;
}
.motd-text i {
  color: var(--accent);
  margin-right: var(--sp-xs);
}
.motd-dismiss {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: var(--text-lg);
  cursor: pointer;
  padding: 0 var(--sp-xs);
  line-height: 1;
}
.motd-dismiss:hover {
  color: var(--text-primary);
}
.theater .motd-bar {
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  opacity: 0;
  border-bottom-width: 0;
  pointer-events: none;
}

.stream-layout {
  flex: 1;
  display: flex;
  overflow: hidden;
  min-height: 0;
  position: relative;
  animation: streamFadeIn 0.7s 0.2s var(--ease-out-expo) both;
}
.stream-layout.chat-left {
  flex-direction: row-reverse;
}
.stream-layout.chat-left .stream-chat {
  border-left: none;
  border-right: 1px solid var(--border);
}

.stream-player {
  flex: 1;
  background: #000;
  position: relative;
  min-width: 0;
  contain: layout style;
}
.stream-player iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

.stream-chat {
  width: 25%;
  flex-shrink: 0;
  border-left: 1px solid var(--border);
  background: var(--bg-darker);
  overflow: hidden;
  transition: width 0.35s var(--ease-out-expo),
              opacity 0.25s var(--ease-out-quart),
              border-width 0.35s var(--ease-out-expo);
  opacity: 1;
  contain: layout style;
}

/* Ambient offline canvas */
.no-stream-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  opacity: 1;
}
/* CRT scanline overlay */
.stream-player:has(.no-stream-bg)::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0,0,0,0.08) 2px,
    rgba(0,0,0,0.08) 4px
  );
  pointer-events: none;
  z-index: 1;
}
/* Reduced motion fallback — warm gradient instead of canvas */
@media (prefers-reduced-motion: reduce) {
  .no-stream-bg { display: none; }
  .stream-player:has(.no-stream)::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 40%, rgba(192,160,64,0.06) 0%, rgba(18,17,16,1) 70%);
    z-index: 0;
  }
}
.no-stream {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--text-muted);
  gap: var(--sp-md);
}
/* Staggered reveal */
.no-stream-reveal {
  opacity: 0;
  transform: translateY(12px);
  animation: noStreamReveal 0.7s var(--ease-out-expo) forwards;
}
.no-stream-reveal:nth-child(1) { animation-delay: 0.3s; }
.no-stream-reveal:nth-child(2) { animation-delay: 0.55s; }
.no-stream-reveal:nth-child(3) { animation-delay: 0.75s; }
.no-stream-reveal:nth-child(4) { animation-delay: 0.95s; }
@keyframes noStreamReveal {
  to { opacity: 1; transform: translateY(0); }
}
.no-stream i {
  font-size: var(--text-display);
  color: var(--accent);
  opacity: 0.25;
}
.no-stream-headline {
  font-size: var(--text-lg);
  color: var(--text-primary);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.no-stream-sub {
  font-size: var(--text-sm);
  color: var(--text-secondary);
}
.no-stream-links {
  display: flex;
  gap: var(--sp-sm);
  margin-top: var(--sp-sm);
}

.bottom-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-darker);
  border-top: 1px solid var(--border);
  padding: 0 var(--sp-lg);
  flex-shrink: 0;
  min-height: 44px;
  animation: bottomBarSlideUp 0.5s 0.35s var(--ease-out-expo) both;
}
.bottom-bar a,
.bottom-bar button {
  color: var(--text-secondary);
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--sp-xs) var(--sp-sm);
  font-size: var(--text-lg);
}
.bottom-bar a:hover,
.bottom-bar button:hover {
  color: var(--accent);
}
.bottom-left, .bottom-right {
  display: flex;
  align-items: center;
  gap: var(--sp-xs);
}
.now-playing {
  font-size: var(--text-base);
  color: var(--text-secondary);
  margin-left: var(--sp-sm);
  margin-right: var(--sp-sm);
  padding-left: var(--sp-md);
  padding-right: var(--sp-md);
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
  display: flex;
  align-items: center;
}

/* Theater mode — smooth banner collapse */
.theater .site-banner {
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  opacity: 0;
  border-bottom-width: 0;
  pointer-events: none;
}

/* Chat hidden — smooth slide */
.chat-hidden .stream-chat {
  width: 0;
  opacity: 0;
  border-left-width: 0;
  pointer-events: none;
}
.chat-hidden .stream-player { flex: 1; }

/* ── Custom page panel ────────────────────────────────────────── */
.stream-custom {
  width: 0;
  flex-shrink: 0;
  border-left: 0 solid var(--border);
  background: var(--bg-darker);
  overflow: hidden;
  transition: width 0.35s var(--ease-out-expo),
              opacity 0.25s var(--ease-out-quart),
              border-width 0.35s var(--ease-out-expo);
  opacity: 0;
  contain: layout style;
}
.stream-custom.active {
  opacity: 1;
  border-left-width: 1px;
}

/* ── Layout picker ────────────────────────────────────────────── */
.layout-picker {
  position: relative;
  display: inline-flex;
}
.layout-menu {
  display: none;
  position: absolute;
  bottom: 100%;
  left: 0;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  margin-bottom: var(--sp-sm);
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
  z-index: 100;
  min-width: 220px;
  padding: var(--sp-sm) var(--sp-md) var(--sp-md);
}
.layout-menu.open {
  display: block;
  animation: channelMenuIn 0.25s var(--ease-out-expo);
}
.layout-menu-header {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  padding-bottom: var(--sp-xs);
  margin-bottom: var(--sp-sm);
  border-bottom: 1px solid var(--border);
}

/* Preset buttons */
.layout-presets {
  display: flex;
  gap: var(--sp-xs);
  margin-bottom: var(--sp-sm);
}
.layout-preset {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-xs);
  padding: var(--sp-sm) var(--sp-xs);
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  color: var(--text-secondary);
  font-size: var(--text-xs);
  transition: all 0.15s;
}
.layout-preset:hover {
  border-color: var(--accent);
  color: var(--text-primary);
}
.layout-preset.active {
  border-color: var(--accent);
  background: rgba(192, 160, 64, 0.08);
  color: var(--accent);
}

/* Preset mini-icons */
.preset-icon {
  display: flex;
  gap: 2px;
  width: 40px;
  height: 24px;
}
.pi-stream {
  flex: 3;
  background: var(--accent);
  border-radius: 2px;
  opacity: 0.6;
}
.pi-stream.pi-full { flex: 1; }
.pi-chat {
  flex: 1;
  background: var(--text-muted);
  border-radius: 2px;
  opacity: 0.4;
}
.pi-chat.pi-sm { flex: 0.7; }
.pi-custom {
  flex: 1;
  background: var(--success, #5cb85c);
  border-radius: 2px;
  opacity: 0.4;
}
.preset-label {
  white-space: nowrap;
  line-height: 1;
}

/* Fine-tune sliders */
.layout-fine-tune {
  padding-top: var(--sp-xs);
}
.layout-slider-group {
  margin-bottom: var(--sp-sm);
}
.layout-slider-group label {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-xs);
  color: var(--text-secondary);
  margin-bottom: var(--sp-xs);
}
.layout-slider-group label span {
  color: var(--accent);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.layout-slider-group input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  border-radius: 2px;
  background: var(--bg-input);
  outline: none;
  cursor: pointer;
}
.layout-slider-group input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
  border: 2px solid var(--bg-card);
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.layout-slider-group input[type="range"]::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
  border: 2px solid var(--bg-card);
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

/* Custom URL section */
.layout-custom-url {
  margin-bottom: var(--sp-sm);
}
.layout-custom-url label {
  display: block;
  font-size: var(--text-xs);
  color: var(--text-secondary);
  margin-bottom: var(--sp-xs);
}
.layout-url-row {
  display: flex;
  gap: var(--sp-xs);
}
.layout-url-input {
  flex: 1;
  min-width: 0;
  padding: var(--sp-xs) var(--sp-sm);
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-primary);
  font-size: var(--text-xs);
  font-family: inherit;
}
.layout-url-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 15%, transparent);
}
.btn-accent {
  background: var(--accent);
  color: var(--text-on-accent);
  border: none;
  border-radius: var(--radius);
  padding: var(--sp-xs) var(--sp-sm);
  font-size: var(--text-xs);
  font-weight: 600;
  cursor: pointer;
}
.btn-accent:hover { opacity: 0.85; }
.layout-actions {
  display: flex;
  justify-content: flex-end;
  padding-top: var(--sp-xs);
  border-top: 1px solid var(--border);
  margin-top: var(--sp-xs);
}

/* ── Theme picker ─────────────────────────────────────────────── */
.theme-picker {
  position: relative;
  display: inline-flex;
}
.theme-menu {
  display: none;
  position: absolute;
  bottom: 100%;
  left: 0;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--sp-xs);
  margin-bottom: var(--sp-sm);
  box-shadow: var(--shadow);
  z-index: 100;
  white-space: nowrap;
}
.theme-menu.open {
  display: flex;
  flex-direction: column;
  gap: 1px;
  animation: menuSlideUp 0.2s var(--ease-out-expo);
}
@keyframes menuSlideUp {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.theme-menu button {
  background: none;
  border: none;
  color: var(--text-secondary);
  padding: var(--sp-xs) var(--sp-md);
  font-size: var(--text-sm);
  cursor: pointer;
  text-align: left;
  border-radius: var(--radius-sm);
  transition: all 0.15s;
  display: flex;
  align-items: center;
  gap: var(--sp-xs);
}
.theme-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.theme-menu button:hover {
  background: rgba(255,255,255,0.08);
  color: var(--text-primary);
}
.theme-menu button.active {
  color: var(--accent);
  font-weight: 600;
}

/* ── Channel picker ───────────────────────────────────────────── */
.channel-picker {
  position: relative;
  display: inline-flex;
}
#btnChannels {
  position: relative;
}
.channel-count {
  position: absolute;
  top: -2px;
  right: -2px;
  background: var(--accent);
  color: var(--bg-darker);
  font-size: 0.5625rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  pointer-events: none;
}
.channel-menu {
  display: none;
  position: absolute;
  bottom: 100%;
  left: 0;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  margin-bottom: var(--sp-sm);
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
  z-index: 100;
  width: min(360px, 90vw);
  overflow: hidden;
}
.channel-menu.open {
  display: flex;
  flex-direction: column;
  animation: channelMenuIn 0.25s var(--ease-out-expo);
}
@keyframes channelMenuIn {
  from { opacity: 0; transform: translateY(8px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Channel tabs ─────────────────────────────────────────────── */
.channel-tabs {
  display: flex;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.channel-tab {
  flex: 1;
  padding: var(--sp-sm) var(--sp-md);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color 0.15s var(--ease-out-quart), border-color 0.15s var(--ease-out-quart);
  font-family: inherit;
}
.channel-tab:hover {
  color: var(--text-primary);
}
.channel-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.tab-count {
  font-size: 0.625rem;
  opacity: 0.6;
  margin-left: 2px;
}

/* ── Channel panels ───────────────────────────────────────────── */
.channel-panel {
  flex: 1;
  min-height: 0;
}
.channel-list {
  max-height: min(calc(100vh - 120px), 900px);
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
.channel-list::-webkit-scrollbar {
  width: 5px;
}
.channel-list::-webkit-scrollbar-track {
  background: transparent;
}
.channel-list::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 3px;
}
.channel-item {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  padding: var(--sp-xs) var(--sp-md);
  color: var(--text-secondary);
  text-decoration: none;
  font-size: var(--text-sm);
  transition: background 0.12s var(--ease-out-quart), color 0.12s var(--ease-out-quart);
  cursor: pointer;
  border: none;
  border-left: 2px solid transparent;
  background: none;
  width: 100%;
  text-align: left;
  font-family: inherit;
  min-height: 34px;
}
.channel-item.active {
  background: var(--active-row);
  color: var(--accent);
  font-weight: 600;
  border-left-color: var(--accent);
}
.channel-main-badge {
  font-size: 0.5625rem;
  color: var(--success);
  flex-shrink: 0;
  line-height: 1;
}
.channel-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--success);
  flex-shrink: 0;
  animation: livePulse 2s ease-in-out infinite;
  box-shadow: 0 0 4px rgba(92, 184, 92, 0.4);
}
.channel-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.channel-auto-badge {
  color: var(--accent);
  font-size: 0.5625rem;
  flex-shrink: 0;
  opacity: 0.8;
}
.channel-svc-badge {
  font-size: var(--text-xs);
  color: var(--text-muted);
  background: var(--bg-darker);
  padding: 2px var(--sp-sm);
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  white-space: nowrap;
}
/* Service-colored badges in channel list */
.channel-svc-badge[data-service] {
  --svc-color: var(--text-muted);
  color: var(--svc-color);
  border-left: 2px solid var(--svc-color);
}
.channel-svc-badge[data-service*="twitch"]  { --svc-color: #9146ff; }
.channel-svc-badge[data-service*="kick"]    { --svc-color: #53fc18; }
.channel-svc-badge[data-service*="youtube"] { --svc-color: #e04040; }
.channel-svc-badge[data-service*="rumble"]  { --svc-color: #85c742; }
.channel-svc-badge[data-service*="trovo"]   { --svc-color: #30d870; }
.channel-svc-badge[data-service*="custom"]  { --svc-color: var(--accent); }
.channel-viewers {
  font-size: var(--text-xs);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: var(--sp-xs);
  flex-shrink: 0;
}

/* ── Live pulse indicator ─────────────────────────────────────── */
.live-pulse {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--success);
  margin-right: var(--sp-xs);
  animation: livePulse 2s ease-in-out infinite;
  box-shadow: 0 0 6px rgba(92, 184, 92, 0.5),
              0 0 14px rgba(92, 184, 92, 0.25),
              0 0 24px rgba(92, 184, 92, 0.1);
  vertical-align: middle;
}
/* Channel list live dots get extra glow ring */
.channel-live-dot {
  box-shadow: 0 0 4px rgba(92, 184, 92, 0.6),
              0 0 10px rgba(92, 184, 92, 0.3);
  animation: livePulse 2s ease-in-out infinite, liveGlow 2s ease-in-out infinite;
}
.channel-item.active .channel-live-dot {
  background: var(--accent);
  box-shadow: 0 0 6px rgba(192, 160, 64, 0.8),
              0 0 16px rgba(192, 160, 64, 0.4);
  animation: livePulse 1.4s ease-in-out infinite, liveGlowAccent 1.4s ease-in-out infinite;
}
@keyframes livePulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.75); }
}
@keyframes liveGlow {
  0%, 100% { box-shadow: 0 0 4px rgba(92, 184, 92, 0.6), 0 0 10px rgba(92, 184, 92, 0.3); }
  50% { box-shadow: 0 0 6px rgba(92, 184, 92, 0.8), 0 0 16px rgba(92, 184, 92, 0.4); }
}
@keyframes liveGlowAccent {
  0%, 100% { box-shadow: 0 0 6px rgba(192, 160, 64, 0.8), 0 0 14px rgba(192, 160, 64, 0.4); }
  50% { box-shadow: 0 0 8px rgba(192, 160, 64, 1), 0 0 20px rgba(192, 160, 64, 0.5); }
}

/* ── Channel switch transition — Screen Tear Glitch ───────────── */
.stream-player { position: relative; }
.ch-switch-overlay {
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  opacity: 0;
  will-change: opacity;
}
.ch-switch-overlay.active {
  animation: chGlitchIn 0.5s var(--ease-out-expo) forwards;
}

/* Scanline overlay */
.ch-switch-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0,0,0,0.2) 2px,
    rgba(0,0,0,0.2) 4px
  );
  opacity: 0.7;
}

/* Sweeping scanline bar */
.ch-switch-overlay::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  box-shadow: 0 0 12px var(--accent), 0 0 30px rgba(192,160,64,0.3);
  animation: chScanSweep 0.5s linear;
}

/* Individual tear slice — created by JS */
.ch-tear-slice {
  position: absolute;
  left: 0; right: 0;
  background: var(--bg-darker);
  pointer-events: none;
  z-index: 10;
  opacity: 0;
  will-change: transform, opacity;
}
.ch-tear-slice.active {
  animation: tearSlice 0.5s var(--ease-out-expo) forwards;
}
/* Alternate slices shift left/right for tear effect */
.ch-tear-slice:nth-child(odd) {
  animation-name: tearSliceLeft;
}

@keyframes chGlitchIn {
  0%   { opacity: 0; }
  8%   { opacity: 0.9; }
  20%  { opacity: 0.7; }
  50%  { opacity: 0.3; }
  100% { opacity: 0; }
}
@keyframes chScanSweep {
  from { top: -4px; }
  to   { top: 100%; }
}
@keyframes tearSlice {
  0%   { opacity: 0.8; transform: translateX(8px) scaleY(1.2); }
  40%  { opacity: 0.5; transform: translateX(-3px) scaleY(1); }
  100% { opacity: 0; transform: translateX(0); }
}
@keyframes tearSliceLeft {
  0%   { opacity: 0.8; transform: translateX(-8px) scaleY(1.2); }
  40%  { opacity: 0.5; transform: translateX(3px) scaleY(1); }
  100% { opacity: 0; transform: translateX(0); }
}

/* Now Playing scramble effect */
.now-playing strong {
  display: inline-block;
  min-width: 2ch;
  max-width: 30ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}
.now-playing strong.scrambling {
  color: var(--accent);
  opacity: 0.8;
}

/* ── Channel flipper (up/down buttons) ─────────────────────────── */
.channel-flipper {
  display: flex;
  align-items: center;
  gap: 2px;
  background: var(--bg-dark);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 2px;
  margin-right: var(--sp-sm);
  position: relative;
}
.channel-flipper::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: var(--radius-pill);
  opacity: 0;
  background: linear-gradient(135deg, var(--accent), transparent 60%);
  transition: opacity 0.3s var(--ease-out-quart);
  z-index: -1;
}
.channel-flipper:hover::before {
  opacity: 0.15;
}
.channel-flipper button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 26px;
  padding: 0 !important;
  font-size: var(--text-sm) !important;
  line-height: 1;
  border-radius: var(--radius-sm);
  transition: background 0.15s var(--ease-out-quart),
              color 0.15s var(--ease-out-quart),
              transform 0.1s var(--ease-out-quart);
}
.channel-flipper button:hover {
  background: var(--hover-overlay);
  color: var(--accent) !important;
}
.channel-flipper button:active {
  transform: scale(0.88);
}
.channel-flipper .flip-divider {
  width: 1px;
  height: var(--sp-lg);
  background: var(--border);
  flex-shrink: 0;
}

/* ── TV static overlay ─────────────────────────────────────────── */
.tv-static-overlay {
  position: absolute;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  opacity: 0;
}
.tv-static-overlay.active {
  opacity: 1;
  animation: tvStaticFlash 0.45s steps(3) forwards;
}
.tv-static-overlay canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
}
/* CRT scanlines */
.tv-static-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      0deg,
      transparent 0px,
      transparent 2px,
      rgba(0,0,0,0.25) 2px,
      rgba(0,0,0,0.25) 4px
    );
  mix-blend-mode: multiply;
}
/* Vignette */
.tv-static-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,0.7) 100%);
  z-index: 1;
}
@keyframes tvStaticFlash {
  0%   { opacity: 1; filter: brightness(3) saturate(0); }
  15%  { opacity: 1; filter: brightness(2) saturate(0); }
  30%  { opacity: 0.9; filter: brightness(1.5) saturate(0.2); }
  50%  { opacity: 0.6; filter: brightness(1.2) saturate(0.5); }
  75%  { opacity: 0.3; filter: brightness(1) saturate(0.8); }
  100% { opacity: 0; filter: brightness(1) saturate(1); }
}
@media (prefers-reduced-motion: reduce) {
  .tv-static-overlay.active {
    animation: none;
    opacity: 0;
  }
}

/* ── Channel flip — directional slide ──────────────────────────── */
.flip-slide-up {
  animation: flipSlideUp 0.4s var(--ease-out-expo);
}
.flip-slide-down {
  animation: flipSlideDown 0.4s var(--ease-out-expo);
}
@keyframes flipSlideUp {
  0%   { opacity: 0.3; transform: translateY(6px); }
  100% { opacity: 1;   transform: translateY(0); }
}
@keyframes flipSlideDown {
  0%   { opacity: 0.3; transform: translateY(-6px); }
  100% { opacity: 1;   transform: translateY(0); }
}

/* Channel number flash — retro TV tuner readout */
.ch-number-flash {
  position: absolute;
  top: var(--sp-lg);
  right: var(--sp-lg);
  z-index: 25;
  font-family: 'Consolas', 'Monaco', monospace;
  font-size: var(--text-2xl);
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--text-primary);
  text-shadow: 0 0 8px var(--accent), 0 0 20px rgba(0,0,0,0.6);
  background: rgba(0,0,0,0.55);
  padding: var(--sp-xs) var(--sp-md);
  border-radius: var(--radius-sm);
  pointer-events: none;
  opacity: 0;
}
.ch-number-flash.active {
  animation: chNumberIn 1.2s var(--ease-out-expo) forwards;
}
@keyframes chNumberIn {
  0%   { opacity: 0; transform: scale(1.1); }
  8%   { opacity: 1; transform: scale(1); }
  70%  { opacity: 1; }
  100% { opacity: 0; }
}

/* Flipper button kick */
.flip-kick {
  animation: flipKick 0.25s var(--ease-out-expo) !important;
}
@keyframes flipKick {
  0%   { transform: scale(0.7); }
  50%  { transform: scale(1.15); }
  100% { transform: scale(1); }
}

/* ── Cinematic page boot sequence ──────────────────────────────── */
@keyframes bannerSlideDown {
  0%   { opacity: 0; transform: translateY(-30px) scaleY(0.8); }
  60%  { opacity: 1; transform: translateY(3px) scaleY(1.02); }
  100% { opacity: 1; transform: translateY(0) scaleY(1); }
}
@keyframes bottomBarSlideUp {
  0%   { opacity: 0; transform: translateY(30px); }
  60%  { opacity: 1; transform: translateY(-2px); }
  80%  { transform: translateY(1px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes streamFadeIn {
  0%   { opacity: 0; clip-path: inset(0 0 100% 0); }
  30%  { opacity: 0.4; clip-path: inset(0 0 60% 0); }
  100% { opacity: 1; clip-path: inset(0 0 0% 0); }
}

/* Scanline wipe that overlays the stream during boot */
.stream-layout::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 10%, var(--accent) 50%, transparent 90%);
  box-shadow: 0 0 10px var(--accent), 0 0 20px rgba(192,160,64,0.3);
  z-index: 5;
  pointer-events: none;
  animation: bootScanline 0.8s 0.1s var(--ease-out-expo) both;
}
@keyframes bootScanline {
  0%   { top: 0; opacity: 1; }
  80%  { opacity: 0.6; }
  100% { top: 100%; opacity: 0; }
}

/* ── Bottom bar hover — Spring physics ─────────────────────── */
.bottom-bar a,
.bottom-bar button {
  transition: color 0.2s, transform 0.4s var(--ease-out-expo);
}
.bottom-bar a:hover,
.bottom-bar button:hover {
  transform: translateY(-2px) scale(1.05);
  color: var(--accent);
}
.bottom-bar a:active,
.bottom-bar button:active {
  transform: translateY(1px) scale(0.9);
  transition-duration: 0.1s;
}
/* Exclude channel items & tabs from bottom bar spring physics */
.channel-item,
.channel-item:hover,
.channel-item:active,
.channel-tab,
.channel-tab:hover,
.channel-tab:active {
  transform: none !important;
}
/* Bounce feedback on toggle state changes (applied via JS) */
.bar-bounce {
  animation: barSpringBounce 0.4s var(--ease-out-expo);
}
@keyframes barSpringBounce {
  0%   { transform: scale(0.85); }
  100% { transform: scale(1) translateY(0); }
}

/* Now-playing accent */
.now-playing strong {
  color: var(--accent);
}


/* Compact text labels for bottom bar icons — desktop only */
.bar-label {
  display: none;
  font-size: var(--text-xs);
  margin-left: var(--sp-xs);
  vertical-align: middle;
}
@media (min-width: 1024px) {
  .bar-label { display: inline; }
}

/* ── Login page ───────────────────────────────────────────────── */
.login-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: var(--bg-darker);
}
.login-wrapper {
  width: 100%;
  max-width: 380px;
  padding: var(--sp-lg);
}
.login-banner {
  text-align: center;
  margin-bottom: var(--sp-xl);
}
.login-banner img {
  height: 56px;
}
.login-box {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--sp-2xl);
  animation: loginIn 0.4s var(--ease-out-expo);
}
@keyframes loginIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.login-box h2 {
  text-align: center;
  margin-bottom: var(--sp-xl);
  color: var(--accent);
  font-size: var(--text-2xl);
  font-weight: 700;
  line-height: var(--leading-tight);
  letter-spacing: -0.01em;
}
.login-notice {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  padding: var(--sp-sm) var(--sp-md);
  margin-bottom: var(--sp-lg);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.5;
}
.login-notice i {
  color: var(--accent);
  margin-right: var(--sp-xs);
}
.login-alt {
  text-align: center;
  margin-top: var(--sp-lg);
  font-size: var(--text-sm);
  color: var(--text-muted);
}
.login-alt a {
  color: var(--accent);
  text-decoration: none;
}
.login-alt a:hover {
  text-decoration: underline;
}

/* ── Error page ───────────────────────────────────────────────── */
.error-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: var(--bg-darker);
}
.error-box {
  text-align: center;
  padding: var(--sp-4xl);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  animation: loginIn 0.4s var(--ease-out-expo);
  max-width: 560px;
}
.error-box h1 {
  font-size: var(--text-display);
  line-height: var(--leading-tight);
  color: var(--accent);
  font-weight: 800;
  letter-spacing: -0.02em;
}
.error-message {
  margin-top: var(--sp-md);
  color: var(--text-primary);
  max-width: 90vw;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.error-actions {
  margin-top: var(--sp-xl);
  display: flex;
  gap: var(--sp-sm);
  justify-content: center;
  flex-wrap: wrap;
}

/* ── Utility ──────────────────────────────────────────────────── */
.text-green { color: var(--success); }
.text-red { color: var(--danger); }
.text-muted { color: var(--text-muted); }

/* Text overflow helpers */
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.wrap { overflow-wrap: break-word; word-break: break-word; }

/* Visually hidden — accessible to screen readers */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* Skip-to-content link */
.skip-link {
  position: absolute;
  top: -100%;
  left: 0;
  z-index: 10000;
  padding: var(--sp-sm) var(--sp-lg);
  background: var(--accent);
  color: var(--text-on-accent);
  font-weight: 700;
  border-radius: 0 0 var(--radius) 0;
  transition: top 0.2s;
}
.skip-link:focus {
  top: 0;
}

/* Form hint text */
.form-hint {
  display: block;
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-top: var(--sp-xs);
}

/* ── Modal ────────────────────────────────────────────────────── */
.modal {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9000;
  animation: modalBgIn 0.2s var(--ease-out-quart);
}
.modal-content {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-2xl);
  width: 100%;
  max-width: 560px;
  box-shadow: var(--shadow);
  animation: modalIn 0.3s var(--ease-out-expo);
}
@keyframes modalBgIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes modalIn {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.modal-content h3 {
  margin-bottom: var(--sp-lg);
  color: var(--accent);
}
.form-actions {
  display: flex;
  gap: var(--sp-sm);
  margin-top: var(--sp-lg);
}

/* ── Responsive ───────────────────────────────────────────────── */

/* Tablet (768–1023px) */
@media (max-width: 1023px) and (min-width: 769px) {
  .stream-chat {
    width: 280px;
  }
  .form-row {
    flex-wrap: wrap;
  }
  .form-row .form-group {
    min-width: 200px;
  }
}

/* Mobile (<= 768px) */
@media (max-width: 768px) {
  .stream-layout {
    flex-direction: column;
  }
  .stream-player {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    flex: none;
  }
  .stream-chat {
    flex: 1;
    width: 100%;
    min-height: 200px;
    border-left: none;
    border-top: 1px solid var(--border);
    transition: min-height 0.35s var(--ease-out-expo),
                flex 0.35s var(--ease-out-expo),
                opacity 0.25s var(--ease-out-quart),
                border-top-width 0.35s var(--ease-out-expo);
  }
  .chat-hidden .stream-chat {
    width: 0;
    min-height: 0;
    flex: 0;
    opacity: 0;
    border-top-width: 0;
    pointer-events: none;
  }
  .chat-hidden .stream-player {
    flex: 1;
    padding-bottom: 0;
    height: auto;
  }
  .banner-img {
    height: 32px;
  }
  .site-banner {
    padding: var(--sp-xs) 0;
  }
  /* Hide EVA banner on mobile — saves vertical space */
  .eva-banner {
    display: none !important;
  }
  /* Bottom-right: icon-only on mobile */
  .bottom-right a {
    font-size: 0;
  }
  .bottom-right a i {
    font-size: var(--text-lg);
  }
  .channel-menu {
    left: auto;
    right: 0;
    width: min(320px, 90vw);
  }
  .bottom-bar {
    height: auto;
    min-height: 44px;
    flex-wrap: wrap;
    padding: var(--sp-xs) var(--sp-sm);
    gap: var(--sp-xs);
  }
  .bottom-bar a,
  .bottom-bar button {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .now-playing {
    display: none;
  }
  .theme-menu {
    left: auto;
    right: 0;
  }
  .form-row {
    flex-direction: column;
  }
  .form-row .form-group {
    min-width: 0;
  }
  .modal-content {
    margin: var(--sp-lg);
    max-width: calc(100vw - var(--sp-3xl));
  }
  .login-wrapper {
    padding: var(--sp-md);
  }
  .login-box {
    padding: var(--sp-lg);
  }
  .btn-lg {
    width: 100%;
    justify-content: center;
  }
  .error-box h1 {
    font-size: var(--text-4xl);
  }
  .error-box {
    padding: var(--sp-xl);
  }
}

/* Mobile landscape */
@media (max-width: 812px) and (orientation: landscape) {
  .stream-layout {
    flex-direction: row;
  }
  .stream-player {
    padding-bottom: 0;
    height: auto;
    flex: 1;
  }
  .stream-chat {
    width: 260px;
    min-height: 0;
    border-left: 1px solid var(--border);
    border-top: none;
  }
  .site-banner {
    padding: 2px 0;
  }
  .banner-img {
    height: 26px;
  }
  .bottom-bar {
    height: auto;
    min-height: 44px;
  }
  .bottom-bar a,
  .bottom-bar button {
    min-width: 44px;
    min-height: 44px;
  }
}

/* Extra small screens (320px) */
@media (max-width: 380px) {
  .login-wrapper {
    padding: var(--sp-sm);
  }
  .login-box {
    padding: var(--sp-md);
  }
  .login-box h2 {
    font-size: var(--text-xl);
  }
  .modal-content {
    margin: var(--sp-sm);
    max-width: calc(100vw - var(--sp-lg));
    padding: var(--sp-lg);
  }
  .bottom-left, .bottom-right {
    gap: 0;
  }
}

/* ── Reduced motion ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  /* Hide purely decorative motion elements */
  .stream-layout::after { display: none; }
  .ch-tear-slice { display: none; }
}

/* ── Focus-visible ring ──────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ── Forced colors / high contrast ───────────────────────────── */
@media (forced-colors: active) {
  .btn, .btn-primary, .btn-danger, .btn-ghost {
    border: 1px solid ButtonText;
  }
  .flash { border: 2px solid CanvasText; }
  .role-badge { border: 1px solid CanvasText; }
}

/* ═══════════════════════════════════════════════════════════════
   EVANGELION THEME — NERV Command Center Overrides
   ═══════════════════════════════════════════════════════════════ */

/* ── EVA Banner ────────────────────────────────────────────────── */
.eva-banner {
  display: none;
}

[data-theme="evangelion"] .banner-img {
  display: none !important;
}

[data-theme="evangelion"] .site-banner {
  background: transparent;
  border-bottom: none;
  padding: 0;
  overflow: visible;
}

/* Mobile: kill EVA banner, restore regular banner */
@media (max-width: 768px) {
  [data-theme="evangelion"] .banner-img {
    display: block !important;
  }
  [data-theme="evangelion"] .site-banner {
    background: var(--bg-darker);
    border-bottom: 1px solid var(--border);
    padding: var(--sp-xs) 0;
    overflow: hidden;
  }
}

[data-theme="evangelion"] .eva-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 100%;
  height: 12.8vh;
  max-height: 102px;
  min-height: 52px;
  overflow: hidden;
  background: linear-gradient(135deg, #0d0412 0%, #1a0820 30%, #160618 70%, #0d0412 100%);
  animation: bannerSlideDown 0.6s var(--ease-out-expo) both;
}

/* Purple vignette overlay */
[data-theme="evangelion"] .eva-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 30%, rgba(13,4,18,0.7) 100%);
  z-index: 1;
  pointer-events: none;
}

/* Warning stripe bottom edge */
[data-theme="evangelion"] .eva-banner::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  z-index: 5;
  background: repeating-linear-gradient(
    -45deg,
    #ff6a00,
    #ff6a00 4px,
    #1a0820 4px,
    #1a0820 8px
  );
}

/* Hex grid canvas */
.eva-hex-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.6;
}

/* NERV wordmark */
.eva-nerv-text {
  font-family: 'Consolas', 'Monaco', monospace;
  font-size: clamp(1.5rem, 4vh, 2.5rem);
  font-weight: 900;
  letter-spacing: 0.5em;
  text-indent: 0.5em;
  text-transform: uppercase;
  color: #ff6a00;
  text-shadow:
    0 0 10px rgba(255,106,0,0.8),
    0 0 30px rgba(255,106,0,0.4),
    0 0 60px rgba(255,106,0,0.2);
  z-index: 2;
  animation: nervGlow 3s ease-in-out infinite;
  position: relative;
  user-select: none;
}

/* Tagline */
.eva-tagline {
  position: absolute;
  bottom: 8px;
  font-family: 'Consolas', 'Monaco', monospace;
  font-size: 0.5rem;
  letter-spacing: 0.2em;
  color: rgba(123,47,190,0.5);
  text-transform: uppercase;
  z-index: 2;
  user-select: none;
}

/* Terminal readout bar */
.eva-terminal-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 18px;
  background: rgba(0,0,0,0.6);
  border-bottom: 1px solid rgba(123,47,190,0.3);
  overflow: hidden;
  z-index: 3;
}

.eva-terminal-text {
  display: inline-block;
  white-space: nowrap;
  font-family: 'Consolas', 'Monaco', monospace;
  font-size: 0.625rem;
  color: #33ff66;
  line-height: 18px;
  animation: evaTerminalScroll 35s linear infinite;
  text-shadow: 0 0 4px rgba(51,255,102,0.4);
}

/* Status lights (MAGI indicators) */
.eva-status-lights {
  position: absolute;
  bottom: 8px;
  right: 12px;
  display: flex;
  gap: 6px;
  z-index: 4;
  align-items: center;
}

.eva-light {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.eva-light-label {
  font-family: 'Consolas', 'Monaco', monospace;
  font-size: 0.5rem;
  color: rgba(123,47,190,0.4);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.eva-light.green {
  background: #33ff66;
  box-shadow: 0 0 4px #33ff66, 0 0 8px rgba(51,255,102,0.3);
}

.eva-light.orange {
  background: #ff6a00;
  box-shadow: 0 0 4px #ff6a00, 0 0 8px rgba(255,106,0,0.3);
  animation: evaLightBlink 2s ease-in-out infinite;
}

.eva-light.red {
  background: #e03030;
  box-shadow: 0 0 4px #e03030, 0 0 8px rgba(224,48,48,0.3);
  animation: evaLightBlink 0.8s ease-in-out infinite;
}

/* Banner underglow */
[data-theme="evangelion"] .site-banner {
  box-shadow: 0 4px 30px rgba(255,106,0,0.1), 0 2px 10px rgba(123,47,190,0.15);
}

/* EVA Pilot silhouette */
.eva-pilot {
  display: none;
}

[data-theme="evangelion"] .eva-pilot {
  display: block;
  position: absolute;
  right: 8%;
  bottom: 0;
  width: clamp(40px, 8vh, 80px);
  height: clamp(48px, 10vh, 96px);
  z-index: 2;
  opacity: 0.25;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 120'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23ff6a00' stop-opacity='0.9'/%3E%3Cstop offset='1' stop-color='%237b2fbe' stop-opacity='0.6'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='url(%23g)' d='M40 2c-3 0-6 2-8 5l-3 6c-1 2-2 4-1 6l1 4-2 2c-3 2-5 5-6 9l-2 8v6l-3 4-4 6c-1 3-2 6-1 9l2 6 1 5v12c0 4 0 7 1 10l1 8v10l-3 7h56l-3-7v-10l1-8c1-3 1-6 1-10V82l1-5 2-6c1-3 0-6-1-9l-4-6-3-4v-6l-2-8c-1-4-3-7-6-9l-2-2 1-4c1-2 0-4-1-6l-3-6c-2-3-5-5-8-5z'/%3E%3Cpath fill='%23ff6a00' opacity='0.5' d='M35 10c0-1 2-3 5-3s5 2 5 3l-1 5c0 1-2 2-4 2s-4-1-4-2l-1-5z'/%3E%3Ccircle cx='35' cy='22' r='2' fill='%2333ff66' opacity='0.8'/%3E%3Ccircle cx='45' cy='22' r='2' fill='%2333ff66' opacity='0.8'/%3E%3Cpath fill='none' stroke='%23ff6a00' stroke-width='0.5' opacity='0.4' d='M30 45h20M28 55h24M30 65h20M32 75h16M34 85h12'/%3E%3C/svg%3E") no-repeat center bottom / contain;
  pointer-events: none;
  animation: evaPilotFade 4s ease-in-out infinite alternate;
}

@keyframes evaPilotFade {
  0% { opacity: 0.18; filter: drop-shadow(0 0 4px rgba(255,106,0,0.2)); }
  100% { opacity: 0.35; filter: drop-shadow(0 0 8px rgba(123,47,190,0.4)); }
}

@media (max-width: 768px) {
  [data-theme="evangelion"] .eva-pilot {
    right: 4%;
    width: 30px;
    height: 40px;
  }
}

/* ── Page-wide CRT scanline overlay ────────────────────────────── */
body[data-theme="evangelion"]::after {
  content: '';
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0,0,0,0.03) 2px,
    rgba(0,0,0,0.03) 4px
  );
  pointer-events: none;
  z-index: 50;
}

/* ── EVA hex grid background texture on page ───────────────────── */
[data-theme="evangelion"] .public-page {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z' fill='%237b2fbe' fill-opacity='0.04'/%3E%3C/svg%3E");
  background-color: var(--bg-darker);
}

/* ── EVA interactive element overrides ─────────────────────────── */

/* Orange glow on bottom bar buttons */
[data-theme="evangelion"] .bottom-bar a:hover,
[data-theme="evangelion"] .bottom-bar button:hover {
  text-shadow: 0 0 8px rgba(255,106,0,0.5);
}

/* Channel item hover with purple glow */
[data-theme="evangelion"] .channel-item:hover {
  background: rgba(123,47,190,0.1);
}

/* Active channel — orange bevel with inset glow */
[data-theme="evangelion"] .channel-item.active {
  box-shadow: inset 3px 0 12px rgba(255,106,0,0.12);
}

/* Service badge with NERV purple treatment */
[data-theme="evangelion"] .channel-svc-badge {
  background: rgba(123,47,190,0.15);
  border: 1px solid rgba(123,47,190,0.25);
  color: rgba(123,47,190,0.7);
}

/* Channel menu border glow */
[data-theme="evangelion"] .channel-menu {
  border-color: rgba(123,47,190,0.3);
  box-shadow: 0 8px 40px rgba(255,106,0,0.1), 0 0 1px rgba(123,47,190,0.5);
}

/* Theme menu border glow */
[data-theme="evangelion"] .theme-menu {
  border-color: rgba(123,47,190,0.3);
  box-shadow: 0 4px 20px rgba(255,106,0,0.1);
}

/* Custom scrollbar — orange on purple */
[data-theme="evangelion"] .channel-list {
  scrollbar-color: rgba(255,106,0,0.35) rgba(123,47,190,0.1);
}
[data-theme="evangelion"] .channel-list::-webkit-scrollbar-thumb {
  background: rgba(255,106,0,0.35);
}
[data-theme="evangelion"] .channel-list::-webkit-scrollbar-track {
  background: rgba(123,47,190,0.1);
}

/* Channel tabs get purple underline treatment */
[data-theme="evangelion"] .channel-tab {
  border-bottom-color: transparent;
}
[data-theme="evangelion"] .channel-tab.active {
  border-bottom-color: #ff6a00;
  text-shadow: 0 0 8px rgba(255,106,0,0.3);
}

/* Channel flipper — NERV glow */
[data-theme="evangelion"] .channel-flipper {
  border-color: rgba(123,47,190,0.3);
  background: rgba(13,4,18,0.8);
}
[data-theme="evangelion"] .channel-flipper::before {
  background: linear-gradient(135deg, rgba(255,106,0,0.3), rgba(123,47,190,0.2) 60%);
}
[data-theme="evangelion"] .channel-flipper button:hover {
  text-shadow: 0 0 6px rgba(255,106,0,0.5);
}

/* Bottom bar — deeper purple */
[data-theme="evangelion"] .bottom-bar {
  background: rgba(13,4,18,0.95);
  border-top-color: rgba(123,47,190,0.2);
}

/* Stream boot scanline — orange instead of accent */
[data-theme="evangelion"] .stream-layout::after {
  background: linear-gradient(90deg, transparent 10%, #ff6a00 50%, transparent 90%);
  box-shadow: 0 0 10px #ff6a00, 0 0 20px rgba(255,106,0,0.3);
}

/* MOTD bar — NERV style */
[data-theme="evangelion"] .motd-bar {
  background: rgba(123,47,190,0.1);
  border-bottom-color: rgba(123,47,190,0.25);
}

/* Layout menu */
[data-theme="evangelion"] .layout-menu {
  border-color: rgba(123,47,190,0.3);
  box-shadow: 0 8px 30px rgba(255,106,0,0.08);
}

/* Live pulse — change to orange for EVA */
[data-theme="evangelion"] .channel-live-dot {
  background: #33ff66;
  box-shadow: 0 0 4px rgba(51,255,102,0.6), 0 0 10px rgba(51,255,102,0.3);
  animation: livePulse 2s ease-in-out infinite, evaLiveGlow 2s ease-in-out infinite;
}
[data-theme="evangelion"] .channel-item.active .channel-live-dot {
  background: #ff6a00;
  box-shadow: 0 0 6px rgba(255,106,0,0.8), 0 0 16px rgba(255,106,0,0.4);
  animation: livePulse 1.4s ease-in-out infinite, evaLiveGlowActive 1.4s ease-in-out infinite;
}
[data-theme="evangelion"] .live-pulse {
  background: #33ff66;
  box-shadow: 0 0 6px rgba(51,255,102,0.5), 0 0 14px rgba(51,255,102,0.25);
}

/* ── EVA Animations ────────────────────────────────────────────── */
@keyframes nervGlow {
  0%, 100% {
    text-shadow:
      0 0 10px rgba(255,106,0,0.8),
      0 0 30px rgba(255,106,0,0.4),
      0 0 60px rgba(255,106,0,0.2);
  }
  50% {
    text-shadow:
      0 0 15px rgba(255,106,0,1),
      0 0 40px rgba(255,106,0,0.6),
      0 0 80px rgba(255,106,0,0.3),
      0 0 120px rgba(255,106,0,0.1);
  }
}

@keyframes evaTerminalScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@keyframes evaLightBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

@keyframes evaLiveGlow {
  0%, 100% { box-shadow: 0 0 4px rgba(51,255,102,0.6), 0 0 10px rgba(51,255,102,0.3); }
  50% { box-shadow: 0 0 8px rgba(51,255,102,0.8), 0 0 20px rgba(51,255,102,0.4); }
}

@keyframes evaLiveGlowActive {
  0%, 100% { box-shadow: 0 0 6px rgba(255,106,0,0.8), 0 0 14px rgba(255,106,0,0.4); }
  50% { box-shadow: 0 0 8px rgba(255,106,0,1), 0 0 20px rgba(255,106,0,0.5); }
}

/* ── EVA reduced motion overrides ──────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .eva-nerv-text { animation: none !important; }
  .eva-terminal-text { animation: none !important; }
  .eva-light { animation: none !important; }
  .eva-hex-canvas { display: none; }
  body[data-theme="evangelion"]::after { display: none; }
}

/* ================================================================
   LCARS Theme — Star Trek Library Computer
   ================================================================ */

/* ── LCARS Banner ──────────────────────────────────────────────── */
.lcars-banner { display: none; }

[data-theme="lcars"] .banner-img { display: none !important; }

[data-theme="lcars"] .site-banner {
  background: #000;
  border-bottom: none;
  padding: 0;
  overflow: visible;
}

[data-theme="lcars"] .lcars-banner {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: #000;
  animation: bannerSlideDown 0.5s var(--ease-out-expo) both;
}

/* ── Row 1: Elbow + colored data bar ───────────────────────────── */
.lcars-row-top {
  display: flex;
  align-items: stretch;
  min-height: 48px;
}

.lcars-elbow {
  display: flex;
  flex-direction: column;
  width: 120px;
  flex-shrink: 0;
}
.lcars-elbow-top {
  height: 48px;
  background: var(--lcars-lavender, #cc99cc);
  border-radius: 24px 0 0 0;
}
.lcars-elbow-bottom {
  flex: 1;
  width: 36px;
  min-height: 4px;
  background: var(--lcars-lavender, #cc99cc);
}

.lcars-top-bar {
  display: flex;
  align-items: stretch;
  gap: 4px;
  flex: 1;
  height: 48px;
  padding-left: 4px;
}

.lcars-block {
  display: block;
  flex: 0 0 auto;
  min-width: 30px;
  border-radius: 0;
}
.lcars-block-lavender { background: var(--lcars-lavender, #cc99cc); width: 70px; }
.lcars-block-blue { background: var(--lcars-blue, #9999ff); width: 90px; }
.lcars-block-peach { background: var(--lcars-peach, #ff9966); width: 55px; }
.lcars-block-salmon { background: var(--lcars-salmon, #cc6677); width: 45px; }
.lcars-block-mauve { background: var(--lcars-mauve, #cc6699); width: 65px; }
.lcars-block-tan { background: var(--lcars-tan, #ffcc99); flex: 0 0 80px; border-radius: 0 0 24px 0; }

.lcars-title {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  font-family: 'Consolas', 'Monaco', monospace;
  font-size: clamp(0.875rem, 2.5vw, 1.5rem);
  font-weight: 700;
  letter-spacing: 0.35em;
  text-indent: 0.35em;
  text-transform: uppercase;
  color: var(--lcars-gold, #ff9900);
  white-space: nowrap;
  padding: 0 var(--sp-md);
  min-width: 0;
}

/* Data blocks — labeled rectangles like LCARS panels */
.lcars-data-block {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  border-radius: 12px;
  min-width: 80px;
}
.lcars-data-block span {
  font-family: 'Consolas', 'Monaco', monospace;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #000;
}
.lcars-data-gold { background: var(--lcars-gold, #ff9900); }
.lcars-data-peach { background: var(--lcars-peach, #ff9966); }
.lcars-data-blue { background: var(--lcars-blue, #9999ff); }
.lcars-data-lavender { background: var(--lcars-lavender, #cc99cc); }

/* ── Row 2: Stem + scrolling readout ───────────────────────────── */
.lcars-row-bottom {
  display: flex;
  align-items: stretch;
  height: 22px;
  gap: 4px;
}

.lcars-stem {
  width: 36px;
  flex-shrink: 0;
  background: linear-gradient(to bottom, var(--lcars-lavender, #cc99cc), var(--lcars-salmon, #cc6677));
  border-radius: 0 0 18px 0;
}

.lcars-readout {
  flex: 1;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding-left: 8px;
}

.lcars-readout-text {
  display: inline-block;
  white-space: nowrap;
  font-family: 'Consolas', 'Monaco', monospace;
  font-size: 0.5625rem;
  color: var(--lcars-gold, #ff9900);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  animation: lcarsScroll 30s linear infinite;
  opacity: 0.5;
}

@keyframes lcarsScroll {
  0% { transform: translateX(60%); }
  100% { transform: translateX(-100%); }
}

/* Mobile: kill LCARS banner, restore regular */
@media (max-width: 768px) {
  [data-theme="lcars"] .banner-img { display: block !important; }
  [data-theme="lcars"] .site-banner {
    background: var(--bg-darker);
    border-bottom: 1px solid var(--border);
    padding: var(--sp-xs) 0;
    overflow: hidden;
  }
  [data-theme="lcars"] .lcars-banner { display: none; }
}

/* ── LCARS Background ─────────────────────────────────────────── */
[data-theme="lcars"] .public-page {
  background: #000;
}

/* LCARS structural corner accent — bottom-left elbow */
body[data-theme="lcars"]::after {
  content: '';
  position: fixed;
  bottom: 44px; /* sit above bottom bar */
  left: 0;
  width: 24px;
  height: 80px;
  background: var(--lcars-lavender);
  border-radius: 0 12px 0 0;
  opacity: 0.35;
  pointer-events: none;
  z-index: 2;
}
/* Second structural accent — top-right corner block */
body[data-theme="lcars"]::before {
  content: '';
  position: fixed;
  top: 0;
  right: 0;
  width: 60px;
  height: 6px;
  background: linear-gradient(90deg, var(--lcars-peach) 40%, var(--lcars-gold) 100%);
  opacity: 0.3;
  pointer-events: none;
  z-index: 2;
}

/* ── LCARS Bottom Bar ──────────────────────────────────────────── */
[data-theme="lcars"] .bottom-bar {
  background: #000;
  border-top: 3px solid var(--lcars-lavender);
  border-radius: 0;
  box-shadow: 0 -1px 0 var(--lcars-mauve);
  position: relative;
}
/* Colored block segments along the top of the bottom bar */
[data-theme="lcars"] .bottom-bar::before {
  content: '';
  position: absolute;
  top: -3px;
  right: 0;
  width: 120px;
  height: 3px;
  background: linear-gradient(90deg, var(--lcars-salmon) 30%, var(--lcars-peach) 70%, var(--lcars-gold) 100%);
}

[data-theme="lcars"] .bottom-bar a,
[data-theme="lcars"] .bottom-bar button {
  font-family: 'Consolas', 'Monaco', monospace;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

[data-theme="lcars"] .bottom-bar a:hover,
[data-theme="lcars"] .bottom-bar button:hover {
  color: var(--lcars-gold);
  text-shadow: 0 0 6px rgba(255,153,0,0.4);
}

/* ── LCARS Channel Menu ───────────────────────────────────────── */
[data-theme="lcars"] .channel-menu {
  background: #000;
  border: 2px solid var(--lcars-lavender);
  border-radius: 0 0 0 20px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.8), inset 0 0 20px rgba(204,153,204,0.03);
  overflow: hidden;
}
/* Structural colored header bar at top of channel menu */
[data-theme="lcars"] .channel-menu::before {
  content: '';
  display: block;
  height: 5px;
  background: linear-gradient(90deg, var(--lcars-lavender) 20%, var(--lcars-blue) 20% 45%, var(--lcars-peach) 45% 65%, var(--lcars-gold) 65%);
}

[data-theme="lcars"] .channel-tab {
  font-family: 'Consolas', 'Monaco', monospace;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: var(--text-xs);
  border-bottom-color: transparent;
  color: var(--lcars-lavender);
  transition: color 0.2s, border-color 0.2s;
}

[data-theme="lcars"] .channel-tab:hover {
  color: var(--lcars-tan);
}

[data-theme="lcars"] .channel-tab.active {
  border-bottom: 2px solid var(--lcars-gold);
  color: var(--lcars-gold);
  text-shadow: 0 0 8px rgba(255,153,0,0.3);
}

/* Tab count badges */
[data-theme="lcars"] .tab-count {
  background: rgba(204,153,204,0.15);
  color: var(--lcars-tan);
}

[data-theme="lcars"] .channel-item {
  font-family: 'Consolas', 'Monaco', monospace;
  border-radius: 0;
  border-left: 3px solid transparent;
  transition: border-color 0.15s, background 0.15s;
}

[data-theme="lcars"] .channel-item:hover {
  background: rgba(153,153,255,0.06);
  border-left-color: var(--lcars-blue);
}

[data-theme="lcars"] .channel-item.active {
  background: rgba(255,153,0,0.06);
  border-left-color: var(--lcars-gold);
  box-shadow: inset 3px 0 12px rgba(255,153,0,0.06);
}

/* Service badges — solid LCARS blocks */
[data-theme="lcars"] .channel-svc-badge {
  font-family: 'Consolas', 'Monaco', monospace;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: 0;
  font-weight: 700;
  font-size: 0.5625rem;
}

/* Per-service badge coloring — bolder LCARS-style blocks */
[data-theme="lcars"] .channel-svc-badge[data-service="twitch"] {
  background: rgba(153,153,255,0.22);
  border: 1px solid rgba(153,153,255,0.45);
  color: var(--lcars-blue);
}
[data-theme="lcars"] .channel-svc-badge[data-service="kick"] {
  background: rgba(153,204,153,0.18);
  border: 1px solid rgba(153,204,153,0.35);
  color: #99cc99;
}
[data-theme="lcars"] .channel-svc-badge[data-service="custom"],
[data-theme="lcars"] .channel-svc-badge[data-service="customembed"] {
  background: rgba(255,153,102,0.18);
  border: 1px solid rgba(255,153,102,0.4);
  color: var(--lcars-peach);
}
[data-theme="lcars"] .channel-svc-badge[data-service="youtube"],
[data-theme="lcars"] .channel-svc-badge[data-service="youtube_video"] {
  background: rgba(204,102,119,0.18);
  border: 1px solid rgba(204,102,119,0.4);
  color: var(--lcars-salmon);
}
[data-theme="lcars"] .channel-svc-badge[data-service="rumble"] {
  background: rgba(255,204,153,0.15);
  border: 1px solid rgba(255,204,153,0.35);
  color: var(--lcars-tan);
}
[data-theme="lcars"] .channel-svc-badge[data-service="ok.ru"] {
  background: rgba(204,153,204,0.15);
  border: 1px solid rgba(204,153,204,0.3);
  color: var(--lcars-lavender);
}

[data-theme="lcars"] .channel-live-dot {
  background: var(--lcars-peach);
  box-shadow: 0 0 4px rgba(255,153,102,0.6), 0 0 10px rgba(255,153,102,0.3);
}

[data-theme="lcars"] .channel-item.active .channel-live-dot {
  background: var(--lcars-gold);
  box-shadow: 0 0 6px rgba(255,153,0,0.8), 0 0 14px rgba(255,153,0,0.3);
}

/* ── LCARS Channel Flipper ─────────────────────────────────────── */
[data-theme="lcars"] .channel-flipper {
  border: 2px solid var(--lcars-peach);
  border-radius: 0;
  background: #000;
}

[data-theme="lcars"] .channel-flipper::before { display: none; }

[data-theme="lcars"] .channel-flipper button {
  color: var(--lcars-tan);
  transition: color 0.15s, text-shadow 0.15s;
}

[data-theme="lcars"] .channel-flipper button:hover {
  color: var(--lcars-gold);
  text-shadow: 0 0 6px rgba(255,153,0,0.4);
}

[data-theme="lcars"] .flip-divider {
  background: var(--lcars-peach);
}

/* ── LCARS Theme & Layout Menus ────────────────────────────────── */
[data-theme="lcars"] .theme-menu {
  background: #000;
  border: 2px solid var(--lcars-peach);
  border-radius: 0;
  box-shadow: 0 4px 20px rgba(0,0,0,0.8);
  overflow: hidden;
}
/* Colored header strip on theme menu */
[data-theme="lcars"] .theme-menu::before {
  content: '';
  display: block;
  height: 4px;
  background: linear-gradient(90deg, var(--lcars-peach) 35%, var(--lcars-gold) 35% 70%, var(--lcars-tan) 70%);
}

[data-theme="lcars"] .layout-menu {
  background: #000;
  border: 2px solid var(--lcars-blue);
  border-radius: 0;
  box-shadow: 0 8px 30px rgba(0,0,0,0.8);
  overflow: hidden;
}
/* Colored header strip on layout menu */
[data-theme="lcars"] .layout-menu::before {
  content: '';
  display: block;
  height: 4px;
  background: linear-gradient(90deg, var(--lcars-blue) 40%, var(--lcars-lavender) 40% 70%, var(--lcars-mauve) 70%);
}

/* Layout menu header label */
[data-theme="lcars"] .layout-menu-header {
  font-family: 'Consolas', 'Monaco', monospace;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--lcars-blue);
}

/* Layout preset labels */
[data-theme="lcars"] .layout-preset {
  border-color: var(--border);
}
[data-theme="lcars"] .layout-preset.active {
  border-color: var(--lcars-blue);
  background: rgba(153,153,255,0.08);
}

/* Theme picker buttons */
[data-theme="lcars"] .theme-btn {
  border-radius: 0;
  font-family: 'Consolas', 'Monaco', monospace;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: var(--text-xs);
}

/* ── LCARS Scrollbar ───────────────────────────────────────────── */
[data-theme="lcars"] .channel-list {
  scrollbar-color: rgba(204,153,204,0.4) rgba(153,153,255,0.06);
}
[data-theme="lcars"] .channel-list::-webkit-scrollbar-thumb {
  background: rgba(204,153,204,0.4);
  border-radius: 0;
}
[data-theme="lcars"] .channel-list::-webkit-scrollbar-thumb:hover {
  background: rgba(204,153,204,0.6);
}
[data-theme="lcars"] .channel-list::-webkit-scrollbar-track {
  background: rgba(153,153,255,0.06);
}

/* ── LCARS Live Pulse ──────────────────────────────────────────── */
[data-theme="lcars"] .live-pulse {
  background: var(--lcars-peach);
  box-shadow: 0 0 6px rgba(255,153,102,0.5);
}

/* ── LCARS Now Playing ─────────────────────────────────────────── */
[data-theme="lcars"] .now-playing {
  font-family: 'Consolas', 'Monaco', monospace;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--lcars-lavender);
  border-left-color: var(--lcars-mauve);
  border-right-color: var(--lcars-mauve);
}
[data-theme="lcars"] .now-playing strong {
  color: var(--lcars-gold);
  text-shadow: 0 0 6px rgba(255,153,0,0.25);
}

/* ── LCARS MOTD ────────────────────────────────────────────────── */
[data-theme="lcars"] .motd-bar {
  background: rgba(204,102,153,0.08);
  border-bottom: 2px solid var(--lcars-mauve);
  font-family: 'Consolas', 'Monaco', monospace;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  position: relative;
}
/* LCARS structural left block on MOTD */
[data-theme="lcars"] .motd-bar::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 6px;
  height: 100%;
  background: var(--lcars-salmon);
}
[data-theme="lcars"] .motd-bar .motd-text {
  color: var(--lcars-tan);
  padding-left: var(--sp-md);
}

/* ── LCARS Stream Border ───────────────────────────────────────── */
[data-theme="lcars"] .stream-layout::after {
  background: linear-gradient(180deg, transparent 5%, var(--lcars-lavender) 15%, var(--lcars-gold) 50%, var(--lcars-lavender) 85%, transparent 95%);
  box-shadow: 0 0 8px rgba(204,153,204,0.3), 0 0 16px rgba(255,153,0,0.2);
  width: 3px;
}

/* ── LCARS Feedback Modal ──────────────────────────────────────── */
[data-theme="lcars"] .feedback-modal {
  background: #000;
  border: 2px solid var(--lcars-lavender);
  border-radius: 0;
  box-shadow: 0 0 30px rgba(204,153,204,0.1);
  overflow: hidden;
}
/* Colored header bar strip */
[data-theme="lcars"] .feedback-modal::before {
  content: '';
  display: block;
  height: 5px;
  background: linear-gradient(90deg, var(--lcars-gold) 25%, var(--lcars-peach) 25% 50%, var(--lcars-lavender) 50% 75%, var(--lcars-blue) 75%);
}
[data-theme="lcars"] .feedback-modal .feedback-header {
  border-bottom-color: var(--lcars-lavender);
}
[data-theme="lcars"] .feedback-modal h2 {
  font-family: 'Consolas', 'Monaco', monospace;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--lcars-gold);
}
/* Feedback form elements */
[data-theme="lcars"] .feedback-modal textarea,
[data-theme="lcars"] .feedback-modal select {
  border-radius: 0;
  border-color: var(--lcars-blue);
  font-family: 'Consolas', 'Monaco', monospace;
  background: #0a0a14;
}
[data-theme="lcars"] .feedback-modal textarea:focus,
[data-theme="lcars"] .feedback-modal select:focus {
  border-color: var(--lcars-gold);
  box-shadow: 0 0 0 2px rgba(255,153,0,0.15);
}
/* Submit button */
[data-theme="lcars"] .feedback-modal .btn-accent {
  border-radius: 0;
  font-family: 'Consolas', 'Monaco', monospace;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
/* Shortcuts & More menus */
[data-theme="lcars"] .shortcuts-modal {
  background: #000;
  border: 2px solid var(--lcars-lavender);
  border-radius: 0;
  overflow: hidden;
}
[data-theme="lcars"] .shortcuts-modal::before {
  content: '';
  display: block;
  height: 5px;
  background: linear-gradient(90deg, var(--lcars-gold) 25%, var(--lcars-peach) 25% 50%, var(--lcars-lavender) 50% 75%, var(--lcars-blue) 75%);
}
[data-theme="lcars"] .shortcuts-header {
  border-bottom-color: var(--lcars-lavender);
}
[data-theme="lcars"] .shortcuts-header h2 {
  font-family: 'Consolas', 'Monaco', monospace;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--lcars-gold);
}
[data-theme="lcars"] .shortcuts-group h3 {
  color: var(--lcars-peach);
}
[data-theme="lcars"] kbd {
  border-radius: 0;
  border-color: var(--lcars-blue);
  font-family: 'Consolas', 'Monaco', monospace;
}
[data-theme="lcars"] .more-menu-popup {
  background: #000;
  border: 2px solid var(--lcars-lavender);
  border-radius: 0;
}
[data-theme="lcars"] .more-menu-item:hover {
  background: rgba(255, 153, 0, 0.1);
}

/* ── LCARS Login Page ──────────────────────────────────────────── */
[data-theme="lcars"] .login-box {
  border: 2px solid var(--lcars-lavender);
  border-radius: 0;
  background: #000;
  overflow: hidden;
  position: relative;
}
/* Colored header strip on login box */
[data-theme="lcars"] .login-box::before {
  content: '';
  display: block;
  height: 5px;
  background: linear-gradient(90deg, var(--lcars-lavender) 30%, var(--lcars-blue) 30% 55%, var(--lcars-peach) 55% 80%, var(--lcars-gold) 80%);
}
[data-theme="lcars"] .login-box input {
  border-radius: 0;
  border-color: var(--lcars-blue);
  font-family: 'Consolas', 'Monaco', monospace;
  background: #0a0a14;
}
[data-theme="lcars"] .login-box input:focus {
  border-color: var(--lcars-gold);
  box-shadow: 0 0 0 2px rgba(255,153,0,0.2);
}
[data-theme="lcars"] .login-box .btn-accent {
  border-radius: 0;
  font-family: 'Consolas', 'Monaco', monospace;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
[data-theme="lcars"] .login-box h1,
[data-theme="lcars"] .login-box h2 {
  font-family: 'Consolas', 'Monaco', monospace;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--lcars-gold);
}

/* ── LCARS Reduced Motion ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .lcars-readout-text { animation: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   SYNTHWAVE THEME — 80s Retrowave
   ═══════════════════════════════════════════════════════════════════ */

/* ── Synthwave Banner — hide default ───────────────────────────── */
[data-theme="synthwave"] .banner-img { display: none !important; }
[data-theme="synthwave"] .eva-banner { display: none !important; }
[data-theme="synthwave"] .lcars-banner { display: none !important; }

/* ── Synthwave Banner — sun + grid ─────────────────────────────── */
.sw-banner {
  display: none;
  position: relative;
  width: 100%;
  height: 110px;
  overflow: hidden;
  background: linear-gradient(180deg, #05010f 0%, #0d0221 20%, #1a0533 45%, #2d1b69 65%, #6b2fa0 78%, #ff2975 90%, #ff6b35 96%, #ffd319 100%);
}
[data-theme="synthwave"] .sw-banner { display: block; }

/* Star field */
.sw-stars {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1px 1px at 10% 15%, rgba(255,255,255,0.7), transparent),
    radial-gradient(1px 1px at 25% 8%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1.5px 1.5px at 40% 22%, rgba(255,255,255,0.8), transparent),
    radial-gradient(1px 1px at 55% 5%, rgba(255,255,255,0.4), transparent),
    radial-gradient(1px 1px at 70% 18%, rgba(255,255,255,0.6), transparent),
    radial-gradient(1.5px 1.5px at 85% 12%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 15% 30%, rgba(255,255,255,0.3), transparent),
    radial-gradient(1px 1px at 60% 28%, rgba(255,255,255,0.4), transparent),
    radial-gradient(1px 1px at 90% 25%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 35% 35%, rgba(255,255,255,0.3), transparent),
    radial-gradient(1px 1px at 78% 32%, rgba(255,255,255,0.4), transparent),
    radial-gradient(1px 1px at 5% 20%, rgba(255,255,255,0.6), transparent),
    radial-gradient(1px 1px at 48% 10%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1.5px 1.5px at 95% 8%, rgba(255,255,255,0.7), transparent);
  pointer-events: none;
}

/* Sun — larger, more dramatic */
.sw-sun {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 60px;
  border-radius: 120px 120px 0 0;
  background: linear-gradient(180deg, #ffd319 0%, #ffaa22 30%, #ff6b35 55%, #ff2975 100%);
  box-shadow:
    0 0 40px rgba(255, 211, 25, 0.4),
    0 0 80px rgba(255, 107, 53, 0.3),
    0 0 120px rgba(255, 41, 117, 0.2);
  /* Horizontal slice lines through the sun */
  -webkit-mask-image: repeating-linear-gradient(
    0deg,
    #000 0px, #000 5px,
    transparent 5px, transparent 8px
  );
  mask-image: repeating-linear-gradient(
    0deg,
    #000 0px, #000 5px,
    transparent 5px, transparent 8px
  );
}

/* Horizon glow line */
.sw-horizon-glow {
  position: absolute;
  bottom: 36px;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent 5%, rgba(255,41,117,0.3) 20%, rgba(255,107,53,0.5) 40%, rgba(255,211,25,0.6) 50%, rgba(255,107,53,0.5) 60%, rgba(255,41,117,0.3) 80%, transparent 95%);
  box-shadow: 0 0 12px rgba(255, 107, 53, 0.4);
  z-index: 1;
}

/* Perspective grid floor — taller */
.sw-grid-floor {
  position: absolute;
  bottom: 0;
  left: -20%;
  width: 140%;
  height: 36px;
  background:
    repeating-linear-gradient(
      90deg,
      var(--sw-grid) 0px,
      var(--sw-grid) 1px,
      transparent 1px,
      transparent 40px
    ),
    repeating-linear-gradient(
      0deg,
      var(--sw-grid) 0px,
      var(--sw-grid) 1px,
      transparent 1px,
      transparent 12px
    );
  transform: perspective(150px) rotateX(45deg);
  transform-origin: center top;
  animation: sw-grid-scroll 4s linear infinite;
}

@keyframes sw-grid-scroll {
  from { background-position: 0 0, 0 0; }
  to   { background-position: 0 0, 0 12px; }
}

/* Title overlay */
.sw-title-wrap {
  position: absolute;
  top: 38%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 2;
}
.sw-title {
  display: block;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  color: #fff;
  text-shadow:
    0 0 10px rgba(178, 77, 255, 0.6),
    0 0 25px rgba(178, 77, 255, 0.4),
    0 0 50px rgba(255, 41, 117, 0.3);
}
.sw-subtitle {
  display: block;
  font-size: 0.5625rem;
  font-weight: 400;
  letter-spacing: 0.4em;
  color: var(--sw-cyan);
  text-shadow: 0 0 8px var(--sw-cyan);
  margin-top: 4px;
}

/* ── Synthwave Background ──────────────────────────────────────── */
[data-theme="synthwave"] .public-page {
  background:
    radial-gradient(ellipse at 50% 100%, rgba(178, 77, 255, 0.04) 0%, transparent 60%),
    var(--bg-darker);
}

/* Subtle page-wide neon scanlines */
body[data-theme="synthwave"]::after {
  content: '';
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 3px,
    rgba(178, 77, 255, 0.015) 3px,
    rgba(178, 77, 255, 0.015) 6px
  );
  pointer-events: none;
  z-index: 50;
}

/* ── Synthwave Bottom Bar ──────────────────────────────────────── */
[data-theme="synthwave"] .bottom-bar {
  background: linear-gradient(180deg, rgba(13,2,33,0.95) 0%, rgba(21,5,53,0.98) 100%);
  border-top: 1px solid var(--sw-purple);
  box-shadow: 0 -2px 12px rgba(178, 77, 255, 0.12), 0 -1px 0 rgba(0, 255, 245, 0.06);
}
[data-theme="synthwave"] .bottom-bar a,
[data-theme="synthwave"] .bottom-bar button {
  color: var(--sw-cyan);
  text-shadow: 0 0 6px rgba(0, 255, 245, 0.2);
  transition: color 0.2s, text-shadow 0.2s;
}
[data-theme="synthwave"] .bottom-bar a:hover,
[data-theme="synthwave"] .bottom-bar button:hover {
  color: var(--sw-yellow);
  text-shadow: 0 0 8px rgba(255, 211, 25, 0.4);
}

/* ── Synthwave Channel Menu ────────────────────────────────────── */
[data-theme="synthwave"] .channel-menu {
  background: rgba(13, 2, 33, 0.96);
  border: 1px solid var(--sw-purple);
  box-shadow: 0 4px 24px rgba(178, 77, 255, 0.12), 0 0 1px rgba(0, 255, 245, 0.15), inset 0 0 30px rgba(178, 77, 255, 0.03);
}

[data-theme="synthwave"] .channel-tab {
  transition: color 0.2s, border-color 0.2s, text-shadow 0.2s;
}
[data-theme="synthwave"] .channel-tab:hover {
  color: var(--sw-cyan);
}
[data-theme="synthwave"] .channel-tab.active {
  color: var(--sw-cyan);
  border-bottom-color: var(--sw-cyan);
  text-shadow: 0 0 6px rgba(0, 255, 245, 0.4);
}

[data-theme="synthwave"] .channel-item {
  border-left: 2px solid transparent;
  transition: background 0.2s, border-color 0.2s;
}
[data-theme="synthwave"] .channel-item:hover {
  background: rgba(178, 77, 255, 0.06);
  border-left-color: rgba(0, 255, 245, 0.3);
}
[data-theme="synthwave"] .channel-item.active {
  background: rgba(178, 77, 255, 0.08);
  border-left-color: var(--sw-cyan);
  box-shadow: inset 3px 0 12px rgba(0, 255, 245, 0.06);
}

/* Service badges — neon colors per platform */
[data-theme="synthwave"] .channel-svc-badge {
  border-radius: var(--radius-sm);
  letter-spacing: 0.03em;
}
[data-theme="synthwave"] .channel-svc-badge[data-service="twitch"] {
  background: rgba(178, 77, 255, 0.15);
  border: 1px solid rgba(178, 77, 255, 0.3);
  color: var(--sw-purple);
}
[data-theme="synthwave"] .channel-svc-badge[data-service="kick"] {
  background: rgba(57, 255, 142, 0.1);
  border: 1px solid rgba(57, 255, 142, 0.2);
  color: var(--success);
}
[data-theme="synthwave"] .channel-svc-badge[data-service="custom"],
[data-theme="synthwave"] .channel-svc-badge[data-service="customembed"] {
  background: rgba(255, 107, 53, 0.12);
  border: 1px solid rgba(255, 107, 53, 0.25);
  color: var(--sw-orange);
}

/* Live dot — cyan neon default, pink on active */
[data-theme="synthwave"] .channel-live-dot {
  background: var(--sw-cyan);
  box-shadow: 0 0 4px rgba(0, 255, 245, 0.6), 0 0 10px rgba(0, 255, 245, 0.3);
}
[data-theme="synthwave"] .channel-item.active .channel-live-dot {
  background: var(--sw-pink);
  box-shadow: 0 0 6px rgba(255, 41, 117, 0.8), 0 0 14px rgba(255, 41, 117, 0.3);
}

/* ── Synthwave Theme Picker ────────────────────────────────────── */
[data-theme="synthwave"] .theme-menu {
  background: rgba(13, 2, 33, 0.96);
  border: 1px solid var(--sw-purple);
  box-shadow: 0 4px 24px rgba(178, 77, 255, 0.12);
}

[data-theme="synthwave"] .layout-menu {
  background: rgba(13, 2, 33, 0.96);
  border: 1px solid var(--sw-purple);
  box-shadow: 0 8px 30px rgba(178, 77, 255, 0.1);
}

/* ── Synthwave Channel Flipper ─────────────────────────────────── */
[data-theme="synthwave"] .channel-flipper {
  border-color: rgba(178, 77, 255, 0.3);
  background: rgba(13, 2, 33, 0.9);
}
[data-theme="synthwave"] .channel-flipper::before {
  background: linear-gradient(135deg, rgba(178, 77, 255, 0.1), rgba(0, 255, 245, 0.06) 60%);
}
[data-theme="synthwave"] .channel-flipper button {
  color: var(--sw-cyan);
  text-shadow: 0 0 6px rgba(0, 255, 245, 0.25);
}
[data-theme="synthwave"] .channel-flipper button:hover {
  color: var(--sw-yellow);
  text-shadow: 0 0 8px rgba(255, 211, 25, 0.4);
  background: rgba(255, 211, 25, 0.06);
}

/* ── Synthwave Scrollbar ───────────────────────────────────────── */
[data-theme="synthwave"] .channel-list {
  scrollbar-color: rgba(178, 77, 255, 0.35) rgba(178, 77, 255, 0.06);
}
[data-theme="synthwave"] .channel-list::-webkit-scrollbar-thumb {
  background: rgba(178, 77, 255, 0.35);
}
[data-theme="synthwave"] .channel-list::-webkit-scrollbar-thumb:hover {
  background: rgba(178, 77, 255, 0.5);
}
[data-theme="synthwave"] .channel-list::-webkit-scrollbar-track {
  background: rgba(178, 77, 255, 0.06);
}

/* ── Synthwave Stream Border ───────────────────────────────────── */
[data-theme="synthwave"] .stream-layout::after {
  background: linear-gradient(180deg, transparent 10%, var(--sw-purple) 25%, var(--sw-cyan) 50%, var(--sw-purple) 75%, transparent 90%);
  box-shadow: 0 0 8px rgba(0, 255, 245, 0.3), 0 0 16px rgba(178, 77, 255, 0.2);
}

/* ── Synthwave MOTD ────────────────────────────────────────────── */
[data-theme="synthwave"] .motd-bar {
  background: rgba(178, 77, 255, 0.05);
  border-bottom: 1px solid rgba(178, 77, 255, 0.25);
}
[data-theme="synthwave"] .motd-bar .motd-text {
  color: var(--sw-cyan);
  text-shadow: 0 0 6px rgba(0, 255, 245, 0.2);
}

/* ── Synthwave Now Playing ─────────────────────────────────────── */
[data-theme="synthwave"] .now-playing {
  color: var(--text-secondary);
  border-left-color: rgba(178, 77, 255, 0.3);
  border-right-color: rgba(178, 77, 255, 0.3);
}
[data-theme="synthwave"] .now-playing strong {
  color: var(--sw-cyan);
  text-shadow: 0 0 6px rgba(0, 255, 245, 0.3);
}

/* ── Synthwave Live Pulse ──────────────────────────────────────── */
[data-theme="synthwave"] .live-pulse {
  background: var(--sw-cyan);
  box-shadow: 0 0 6px rgba(0, 255, 245, 0.6), 0 0 14px rgba(0, 255, 245, 0.25);
}

/* ── Synthwave Feedback Modal ──────────────────────────────────── */
[data-theme="synthwave"] .feedback-modal {
  background: #150535;
  border: 1px solid var(--sw-purple);
  box-shadow: 0 0 20px rgba(178, 77, 255, 0.15), 0 0 40px rgba(0, 255, 245, 0.04);
}
[data-theme="synthwave"] .feedback-modal .feedback-header {
  border-bottom-color: rgba(178, 77, 255, 0.3);
}
[data-theme="synthwave"] .feedback-modal h2 {
  color: var(--sw-cyan);
  text-shadow: 0 0 8px rgba(0, 255, 245, 0.3);
}
/* Shortcuts & More menus */
[data-theme="synthwave"] .shortcuts-modal {
  background: #150535;
  border: 1px solid var(--sw-purple);
  box-shadow: 0 0 20px rgba(178, 77, 255, 0.15), 0 0 40px rgba(0, 255, 245, 0.04);
}
[data-theme="synthwave"] .shortcuts-header {
  border-bottom-color: rgba(178, 77, 255, 0.3);
}
[data-theme="synthwave"] .shortcuts-header h2 {
  color: var(--sw-cyan);
  text-shadow: 0 0 8px rgba(0, 255, 245, 0.3);
}
[data-theme="synthwave"] .shortcuts-group h3 {
  color: var(--sw-pink);
}
[data-theme="synthwave"] .more-menu-popup {
  background: #150535;
  border: 1px solid var(--sw-purple);
  box-shadow: 0 0 20px rgba(178, 77, 255, 0.15);
}

/* ── Synthwave Login Page ──────────────────────────────────────── */
[data-theme="synthwave"] .login-box {
  border: 1px solid var(--sw-purple);
  background: rgba(21, 5, 53, 0.95);
  box-shadow: 0 0 30px rgba(178, 77, 255, 0.1), 0 0 60px rgba(178, 77, 255, 0.05);
}
[data-theme="synthwave"] .login-box input:focus {
  border-color: var(--sw-cyan);
  box-shadow: 0 0 0 2px rgba(0, 255, 245, 0.15), 0 0 8px rgba(0, 255, 245, 0.1);
}

/* ── Synthwave Reduced Motion ──────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .sw-grid-floor { animation: none !important; }
  body[data-theme="synthwave"]::after { display: none; }
}

/* ── Overlay Performance ───────────────────────────────────────── */
/* Pause heavy theme animations and hide scanlines while modals are open
   to prevent backdrop-filter compositing lag */
body.overlay-open[data-theme="synthwave"] .sw-grid-floor {
  animation-play-state: paused;
}
body.overlay-open[data-theme="synthwave"]::after {
  display: none;
}
body.overlay-open[data-theme="synthwave"] .sw-sun {
  box-shadow: none;
}
body.overlay-open .feedback-overlay,
body.overlay-open .shortcuts-overlay {
  backdrop-filter: none;
}

/* ── Synthwave Mobile ──────────────────────────────────────────── */
@media (max-width: 768px) {
  .sw-banner { height: 72px; }
  .sw-sun { width: 70px; height: 35px; bottom: 12px; }
  .sw-title { font-size: 1rem; letter-spacing: 0.15em; }
  .sw-subtitle { font-size: 0.4rem; }
  .sw-grid-floor { height: 22px; }
  .sw-horizon-glow { bottom: 24px; }
}

/* ── Feedback Modal ────────────────────────────────────────────── */
.feedback-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s var(--ease-out-quart), visibility 0.25s;
}
.feedback-overlay.open {
  opacity: 1;
  visibility: visible;
}
.feedback-modal {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  width: 90%;
  max-width: 440px;
  transform: translateY(12px) scale(0.97);
  transition: transform 0.25s var(--ease-out-quart);
}
.feedback-overlay.open .feedback-modal {
  transform: translateY(0) scale(1);
}
.feedback-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-md) var(--sp-lg);
  border-bottom: 1px solid var(--border);
}
.feedback-header h2 {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}
.feedback-close {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: var(--text-lg);
  cursor: pointer;
  padding: var(--sp-xs);
  border-radius: var(--radius-sm);
  transition: color 0.15s;
}
.feedback-close:hover { color: var(--text-primary); }
.feedback-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

#feedbackForm {
  padding: var(--sp-lg);
}
.feedback-type-row {
  display: flex;
  gap: var(--sp-sm);
  margin-bottom: var(--sp-md);
}
.feedback-type-btn {
  flex: 1;
  cursor: pointer;
}
.feedback-type-btn input { position: absolute; opacity: 0; pointer-events: none; }
.feedback-type-btn span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-xs);
  padding: var(--sp-sm) var(--sp-md);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg-input);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: 500;
  transition: all 0.15s var(--ease-out-quart);
}
.feedback-type-btn input:checked + span {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(var(--accent-rgb, 192, 160, 64), 0.08);
}
.feedback-type-btn input:focus-visible + span {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

#feedbackMessage {
  width: 100%;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-primary);
  font-family: inherit;
  font-size: var(--text-base);
  padding: var(--sp-sm) var(--sp-md);
  resize: vertical;
  min-height: 80px;
  transition: border-color 0.15s;
}
#feedbackMessage:focus {
  outline: none;
  border-color: var(--accent);
}
#feedbackMessage::placeholder { color: var(--text-muted); }

.feedback-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--sp-md);
}
.feedback-char-count {
  font-size: var(--text-xs);
  color: var(--text-muted);
}
.feedback-status {
  margin-top: var(--sp-sm);
  font-size: var(--text-sm);
  min-height: 1.2em;
}
.feedback-status.success { color: var(--success); }
.feedback-status.error { color: var(--danger); }

@media (prefers-reduced-motion: reduce) {
  .feedback-overlay { transition: none; }
  .feedback-modal { transition: none; }
}
@media (forced-colors: active) {
  .feedback-type-btn input:checked + span { border: 2px solid ButtonText; }
  .feedback-modal { border: 2px solid CanvasText; }
}
/* ── More Menu (bottom bar links popover) ─────────────────────── */
.more-menu {
  position: relative;
}
.more-menu-popup {
  position: absolute;
  bottom: calc(100% + var(--sp-sm));
  right: 0;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  min-width: 180px;
  padding: var(--sp-xs) 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.2s var(--ease-out-quart), transform 0.2s var(--ease-out-quart), visibility 0.2s;
  z-index: 800;
}
.more-menu-popup.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.more-menu-item {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  padding: var(--sp-sm) var(--sp-lg);
  color: var(--text-secondary);
  font-size: var(--text-base);
  font-weight: 500;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
  text-decoration: none;
}
.more-menu-item:hover {
  background: var(--bg-input);
  color: var(--accent);
  transform: none;
}
.more-menu-item i {
  width: 1.2em;
  text-align: center;
  font-size: var(--text-lg);
}

/* ── Shortcuts Modal ──────────────────────────────────────────── */
.shortcuts-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s var(--ease-out-quart), visibility 0.25s;
}
.shortcuts-overlay.open {
  opacity: 1;
  visibility: visible;
}
.shortcuts-modal {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  width: 90%;
  max-width: 400px;
  transform: translateY(12px) scale(0.97);
  transition: transform 0.25s var(--ease-out-quart);
}
.shortcuts-overlay.open .shortcuts-modal {
  transform: translateY(0) scale(1);
}
.shortcuts-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-md) var(--sp-lg);
  border-bottom: 1px solid var(--border);
}
.shortcuts-header h2 {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}
.shortcuts-body {
  padding: var(--sp-lg);
}
.shortcuts-group {
  margin-bottom: var(--sp-lg);
}
.shortcuts-group:last-child {
  margin-bottom: 0;
}
.shortcuts-group h3 {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: var(--sp-sm);
}
.shortcut-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--sp-xs) 0;
  font-size: var(--text-sm);
  color: var(--text-secondary);
}
.shortcut-keys {
  display: flex;
  gap: var(--sp-xs);
}
kbd {
  display: inline-block;
  padding: 2px var(--sp-sm);
  font-family: 'Consolas', 'Monaco', monospace;
  font-size: var(--text-xs);
  color: var(--text-primary);
  background: var(--bg-darker);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  min-width: 1.6em;
  text-align: center;
  line-height: 1.5;
}

@media (prefers-reduced-motion: reduce) {
  .more-menu-popup { transition: none; }
  .shortcuts-overlay { transition: none; }
  .shortcuts-modal { transition: none; }
}
@media (forced-colors: active) {
  .shortcuts-modal { border: 2px solid CanvasText; }
  .more-menu-popup { border: 2px solid CanvasText; }
  kbd { border: 1px solid CanvasText; }
}
@media (max-width: 768px) {
  .more-menu-popup {
    right: calc(-1 * var(--sp-sm));
    min-width: 160px;
  }
}