/* ============================================================================
   WEBSTER STUDIO // theme-cyberpunk.css
   KOMPLETNY motyw „NIGHT CITY” dla kokpitu i trzech paneli (habitat, audio,
   pobieranie). Ladowany jako OSTATNI arkusz — po webster-tokens.css,
   arkuszu panelu i webster-panels.css — dlatego wygrywa forme bez ruszania HTML.

   Zasada nadrzedna: motyw zmienia WYGLAD, nie uklad. Nie rusza paddingow,
   wysokosci, siatek ani rozmiarow czcionek (panel jest uzywany na telefonie
   412 px — kazda zmiana geometrii lamie przyklejone paski). Nowe sa wylacznie:
   kolory, obwodki, cienie, tla, ciecia narozne (clip-path), typografia naglowkow
   i animacje tla.

   Semantyka stanow zostaje sprzetowa (kontrakt z docs/PANEL_AUDIO_DESIGN.md):
     bursztyn/zloty = wlaczone, uzbrojone, wybrane,
     neonowa zielen = akcja dziala, material gra,
     czerwien       = stop, blad, awaria,
     stal           = spoczynek.
   Neonowy cyjan jest tu WYLACZNIE chromem: ramki, naglowki, siatka tla,
   obwodki fokusa i poswiata — nigdy nie znaczy stanu urzadzenia.

   Powrot do starego, „sprzetowego” wygladu (bez deployu):
     - w adresie dopisz #theme=classic (skrypt w <head> zapamietuje wybor),
     - albo w konsoli: localStorage.setItem('webster_theme','classic') i odswiez.
   Zdjecie motywu na stale = usuniecie <link ... theme-cyberpunk.css> z index.html
   danego panelu oraz wpisu w Caddyfile.

   Kolejnosc ladowania w kazdym index.html:
     webster-tokens.css -> css panelu -> webster-panels.css -> theme-cyberpunk.css
   ============================================================================ */

/* ---------- 1. TOKENY: gleboka pustka + neonowy chrom -------------------- */
:root {
  /* tla i powierzchnie: granatowa czern zamiast neutralnej */
  --bg-void: #04060d;
  --bg-surface: #080d17;
  --bg-card: rgba(9, 15, 26, 0.9);
  --bg-card-active: rgba(14, 24, 38, 0.94);
  --border-subtle: rgba(0, 234, 255, 0.14);
  --border-hover: rgba(0, 234, 255, 0.55);

  /* tekst */
  --text-main: #dceaf7;
  --text-muted: #8ba3bb;
  --text-dim: #566a80;

  /* chrom motywu (ramki, naglowki, fokus) */
  --cy-cyan: #00eaff;
  --cy-cyan-jasny: #7ff6ff;
  --cy-cyan-ciemny: #0a97b8;
  --cy-magenta: #ff2a6d;
  --cy-violet: #a05cff;
  --cy-violet-ciemny: #6c33c9;
  --cy-void: #04060d;
  --cy-void-2: #070c16;
  --cy-surface: #0a1120;
  --cy-ink: #dceaf7;
  --cy-steel: #7f93a8;
  --cy-linia: rgba(0, 234, 255, 0.22);
  --cy-linia-miekka: rgba(120, 200, 255, 0.12);
  --cy-glow: 0 0 14px rgba(0, 234, 255, 0.35);
  --cy-glow-mocny: 0 0 26px rgba(0, 234, 255, 0.45);
  --cy-ciecie: 12px;

  /* stany sprzetowe — rozjasnione pod ciemne tlo */
  --hw-amber: #ffc233;
  --hw-amber-jasny: #ffd977;
  --hw-green: #22ff9c;
  --hw-red: #ff4d6d;
  --hw-steel: #8b9bad;
  --hw-steel-jasny: #c3d2e0;
  --hw-ink: #dceaf7;
  --hw-edge: #16233a;
  --hw-tlo: linear-gradient(180deg, #101b2e 0%, #0a1120 48%, #060a13 100%);

  /* aliasy czytane przez stare reguly paneli */
  --color-neon-green: var(--hw-green);
  --color-neon-amber: var(--hw-amber-jasny);
  --color-neon-crimson: var(--hw-red);
  --neon-green: var(--hw-green);
  --neon-amber: var(--hw-amber);
  --neon-crimson: var(--hw-red);
  --border-glow-cyan: rgba(0, 234, 255, 0.5);
  --glow-1-color: #0a2f4a;
  --glow-2-color: #2a0b3d;

  /* typografia: Orbitron na naglowki i odczyty, JetBrains Mono na etykiety */
  --font-display: 'Orbitron', 'Syne', -apple-system, sans-serif;
  --font-ui: 'Rajdhani', 'Syne', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
}

/* Powrot do starego wygladu: bez nakladek, z pierwotna paleta sprzetowa. */
html[data-theme="classic"] {
  --bg-void: #050507;
  --bg-surface: #0d0d11;
  --bg-card: rgba(13, 13, 17, 0.88);
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-hover: rgba(255, 176, 32, 0.35);
  --text-main: #f5f7fa;
  --text-muted: #9aa2ab;
  --text-dim: #5a5a60;
  --hw-amber: #ffb020;
  --hw-amber-jasny: #ffc451;
  --hw-green: #3ee07a;
  --hw-red: #e5484d;
  --hw-steel: #8b939c;
  --hw-steel-jasny: #b3b7bd;
  --hw-ink: #dbe4ee;
  --hw-edge: #2f2f36;
  --hw-tlo: linear-gradient(180deg, #232326 0%, #17171a 46%, #101013 100%);
  --font-display: 'Syne', -apple-system, sans-serif;
}
html[data-theme="classic"] body::before,
html[data-theme="classic"] body::after,
html[data-theme="classic"] .cy-hud::before,
html[data-theme="classic"] .cy-hud::after { display: none !important; }

/* ---------- 2. PLAN: siatka, poswiata i skan CRT -------------------------
   Nakladki przypinamy do body tylko tam, gdzie nie ma publicznej fasady
   (fasada zostaje czysta — kokpit dzieli z nia dokument), oraz w trybie
   privileged (vault/dialog), gdzie fasada jest i tak ukryta.               */
body:not(:has(#public-facade)),
body.shadow-mode {
  background-color: var(--cy-void) !important;
  background-image:
    radial-gradient(1200px 700px at 12% -10%, rgba(0, 234, 255, 0.11), transparent 62%),
    radial-gradient(900px 620px at 88% 108%, rgba(255, 42, 109, 0.10), transparent 60%),
    radial-gradient(1400px 900px at 50% 45%, rgba(160, 92, 255, 0.06), transparent 70%),
    linear-gradient(180deg, #05070f 0%, #04060d 55%, #02040a 100%) !important;
  background-attachment: fixed, fixed, fixed, fixed;
}

/* ruchoma siatka perspektywiczna (czysty CSS, zero JS) */
body:not(:has(#public-facade))::before,
body.shadow-mode::before {
  content: '';
  position: fixed;
  inset: -20% -10% -40% -10%;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(0, 234, 255, 0.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 234, 255, 0.10) 1px, transparent 1px);
  background-size: 64px 64px, 64px 64px;
  transform: perspective(520px) rotateX(56deg) translateZ(-60px);
  transform-origin: 50% 0%;
  mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.5) 22%, #000 60%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.5) 22%, #000 60%, transparent 100%);
  opacity: 0.58;
  animation: cy-siatka 22s linear infinite;
}
@keyframes cy-siatka {
  from { transform: perspective(520px) rotateX(56deg) translate3d(0, 0, -60px); }
  to   { transform: perspective(520px) rotateX(56deg) translate3d(0, 56px, -60px); }
}

/* skan CRT + winieta — nad trescia, ale pod modalem */
body:not(:has(#public-facade))::after,
body.shadow-mode::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 8990;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.42) 0 1px, transparent 1px 3px),
    radial-gradient(120% 100% at 50% 50%, transparent 55%, rgba(0, 0, 0, 0.55) 100%);
  opacity: 0.32;
}

::selection { background: rgba(0, 234, 255, 0.3); color: #eafcff; }
:focus-visible { outline: 2px solid var(--cy-cyan) !important; outline-offset: 2px; }

/* ---------- 3. TYPOGRAFIA: naglowki jak HUD ----------------------------- */
.portal-heading, .portal-title-box h1, .portal-title-box h2,
.habitat-header h1, .habitat-title, header h1.habitat-title {
  font-family: 'Orbitron', 'Syne', sans-serif !important;
  color: #eafcff !important;
  text-shadow:
    0 0 12px rgba(0, 234, 255, 0.55),
    0 0 32px rgba(0, 234, 255, 0.25) !important;
}
.ha-deck-header-bar span, .zone-header .zone-title, .cheatsheet-section-title,
.panel-section .section-title, .section-head .section-title {
  color: var(--cy-cyan-jasny) !important;
  text-shadow: 0 0 10px rgba(0, 234, 255, 0.35) !important;
}
.portal-title-box p, .portal-header small, .habitat-header p,
.section-hint, .zone-header .zone-tag, .chip-desc, .panel-section .section-hint {
  color: var(--cy-steel) !important;
}
/* odczyty liczbowe (moc, energia, temperatury) — Orbitron z poswiata */
.metric-val, .ha-power-pill, .np-czas, .np-zegar, .dl-czas, .cockpit-badge,
.tile-meta-row span, .power-val, .temp-val, .val {
  font-family: 'Orbitron', 'JetBrains Mono', monospace !important;
  letter-spacing: 0.06em !important;
  text-shadow: 0 0 8px rgba(0, 234, 255, 0.3) !important;
}

/* ---------- 4. RAMKI I NAGLOWKI PANELI: ciecie + swiatlo ----------------- */
.portal-frame, .portal-container, .habitat-zone, .terminal-dock-card {
  border-radius: 4px !important;
  clip-path: polygon(
    var(--cy-ciecie) 0, calc(100% - var(--cy-ciecie)) 0, 100% var(--cy-ciecie),
    100% calc(100% - var(--cy-ciecie)), calc(100% - var(--cy-ciecie)) 100%,
    var(--cy-ciecie) 100%, 0 calc(100% - var(--cy-ciecie)), 0 var(--cy-ciecie)) !important;
  background: linear-gradient(180deg, rgba(10, 17, 32, 0.94) 0%, rgba(5, 8, 15, 0.96) 100%) !important;
  border: 1px solid var(--cy-linia) !important;
  box-shadow:
    0 0 0 1px rgba(0, 234, 255, 0.06),
    0 0 34px rgba(0, 234, 255, 0.10),
    inset 0 0 46px rgba(0, 234, 255, 0.045) !important;
}
.portal-header, .ha-deck-header-bar {
  border-radius: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--cy-linia) !important;
  background:
    linear-gradient(90deg, rgba(0, 234, 255, 0.16) 0%, rgba(0, 234, 255, 0.02) 45%, rgba(160, 92, 255, 0.14) 100%),
    linear-gradient(180deg, rgba(12, 22, 40, 0.96) 0%, rgba(5, 9, 17, 0.96) 100%) !important;
  box-shadow: 0 1px 0 rgba(0, 234, 255, 0.18) !important;
  position: relative !important;
  overflow: hidden !important;
}
/* przesuwajacy sie blysk po naglowku */
.portal-header::after, .ha-deck-header-bar::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: -30%;
  width: 30%;
  background: linear-gradient(90deg, transparent, rgba(0, 234, 255, 0.22), transparent);
  pointer-events: none;
  animation: cy-sweep 7s ease-in-out infinite;
}
@keyframes cy-sweep {
  0%, 100% { left: -30%; opacity: 0; }
  45% { opacity: 1; }
  60% { left: 105%; opacity: 0; }
}

/* ---------- 5. PRZYCISKI: ostre ciecie, chrom, poswiata ------------------ */
.action-btn, .scene-btn, .filter-btn, .timer-btn, .np-btn, .terminal-btn,
.ws-session-btn, .preset-chip, .metric-chip, .kat-btn, .src-tab, .dl-btn,
.dl-btn-ghost, .dl-view-btn, .dl-pl-btn, .zone-tab, .portal-nav-btn, .habitat-nav button {
  border-radius: 3px !important;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px) !important;
  background: linear-gradient(180deg, #101c30 0%, #0a1120 45%, #060b16 100%) !important;
  border: 1px solid rgba(0, 234, 255, 0.26) !important;
  color: var(--cy-ink) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -2px 5px rgba(0, 0, 0, 0.75),
    0 1px 6px rgba(0, 0, 0, 0.5) !important;
  transition: color .18s var(--ease), border-color .18s var(--ease),
              box-shadow .18s var(--ease), transform .12s var(--ease) !important;
}
.action-btn:hover, .scene-btn:hover, .filter-btn:hover, .timer-btn:hover,
.np-btn:hover, .terminal-btn:hover, .ws-session-btn:hover:not(:disabled),
.preset-chip:hover, .metric-chip:hover, .kat-btn:hover, .src-tab:hover,
.dl-btn:hover, .dl-btn-ghost:hover, .dl-view-btn:hover, .dl-pl-btn:hover,
.zone-tab:hover, .portal-nav-btn:hover {
  border-color: var(--cy-cyan) !important;
  color: var(--cy-cyan-jasny) !important;
  box-shadow: var(--cy-glow), inset 0 1px 0 rgba(255, 255, 255, 0.16) !important;
}
.action-btn:active, .scene-btn:active, .dl-btn:active, .np-btn:active {
  transform: translateY(1px) !important;
}
.action-btn:disabled, .scene-btn:disabled, .np-btn:disabled, .ws-session-btn:disabled,
.filter-btn:disabled, .timer-btn:disabled, .dl-btn:disabled {
  opacity: .4 !important;
  cursor: not-allowed !important;
  filter: saturate(.4) !important;
}

/* wybrane / uzbrojone: zloty sprzetowy z poswiata (stan, nie dekoracja) */
.action-btn.cyan, .action-btn.accent, .filter-btn.active, .preset-chip.active,
.src-tab.active, .kat-btn.active, .zone-tab.active, .portal-nav-btn.active,
.portal-nav-btn.is-active, .habitat-nav button.active, .dl-view-btn.active {
  color: #0d0a02 !important;
  border-color: var(--hw-amber-jasny) !important;
  background: linear-gradient(180deg, #ffe1a0 0%, #ffc233 55%, #f0a916 100%) !important;
  box-shadow: 0 0 18px rgba(255, 194, 51, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
  text-shadow: none !important;
}
.filter-btn.active { color: #0d0a02 !important; font-weight: 700 !important; }

.action-btn.crimson, .ws-session-btn.btn-logout, .dl-stop, .dl-hw-del {
  color: #ffd9e1 !important;
  border-color: rgba(255, 77, 109, 0.65) !important;
  background: linear-gradient(180deg, rgba(255, 77, 109, 0.24) 0%, rgba(120, 12, 40, 0.28) 100%) !important;
  box-shadow: 0 0 14px rgba(255, 77, 109, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}
.action-btn.crimson:hover, .dl-stop:hover, .dl-hw-del:hover {
  border-color: var(--hw-red) !important;
  box-shadow: 0 0 22px rgba(255, 77, 109, 0.5) !important;
}
.ws-session-btn.btn-login, .dl-hw-play, .dl-hw-dl {
  color: #02150d !important;
  border-color: rgba(34, 255, 156, 0.6) !important;
  background: linear-gradient(180deg, #7dffc4 0%, #22ff9c 55%, #12c476 100%) !important;
  box-shadow: 0 0 18px rgba(34, 255, 156, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.45) !important;
}
.terminal-btn {
  color: var(--cy-cyan) !important;
  border-color: rgba(0, 234, 255, 0.45) !important;
  background: linear-gradient(180deg, rgba(0, 234, 255, 0.1) 0%, rgba(0, 234, 255, 0.02) 100%) !important;
}
.terminal-btn:hover, .terminal-btn.is-open {
  box-shadow: 0 0 18px rgba(0, 234, 255, 0.45) !important;
}

/* ---------- 6. PRZELACZNIKI: chromowany bezel + neon --------------------- */
.ha-toggle-slider, .touch-slider {
  background: linear-gradient(180deg, #0a1120 0%, #05080f 100%) !important;
  border: 1px solid rgba(0, 234, 255, 0.3) !important;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.9) !important;
  border-radius: 6px !important;
}
.ha-toggle-switch input:checked + .ha-toggle-slider,
.touch-switch input:checked + .touch-slider {
  background: linear-gradient(180deg, rgba(255, 194, 51, 0.34) 0%, rgba(255, 150, 20, 0.18) 100%) !important;
  border-color: var(--hw-amber) !important;
  box-shadow: 0 0 16px rgba(255, 194, 51, 0.45), inset 0 1px 2px rgba(0, 0, 0, 0.6) !important;
}
.ha-toggle-slider::before, .touch-slider::before {
  background: linear-gradient(180deg, #e8f4ff 0%, #92a6ba 100%) !important;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.35) !important;
}
.ha-toggle-switch input:checked + .ha-toggle-slider::before,
.touch-switch input:checked + .touch-slider::before {
  background: linear-gradient(180deg, #fff4d6 0%, #ffc233 100%) !important;
  box-shadow: 0 0 12px var(--hw-amber) !important;
}
.ha-toggle-switch.is-busy { animation: cy-puls 1s ease-in-out infinite !important; }
@keyframes cy-puls { 0%, 100% { opacity: .75 } 50% { opacity: .3 } }

/* ---------- 7. SUWAKI: neonowy tor + swiecacy uchwyt -------------------- */
.volume-slider, input[type=range].touch-slider, .touch-range, .np-suwak {
  background: linear-gradient(90deg, rgba(0, 234, 255, 0.45) 0%, rgba(0, 234, 255, 0.14) 100%) !important;
  border: 1px solid rgba(0, 234, 255, 0.28) !important;
  height: 5px !important;
  border-radius: 2px !important;
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.8) !important;
}
.volume-slider::-webkit-slider-thumb, input[type=range]::-webkit-slider-thumb {
  background: linear-gradient(180deg, #fff2cf 0%, #ffc233 100%) !important;
  box-shadow: 0 0 12px rgba(255, 194, 51, 0.8), 0 0 3px rgba(0, 0, 0, 0.9) !important;
  border-radius: 3px !important;
}
.volume-slider::-moz-range-thumb, input[type=range]::-moz-range-thumb {
  background: linear-gradient(180deg, #fff2cf 0%, #ffc233 100%) !important;
  border: none !important;
  box-shadow: 0 0 12px rgba(255, 194, 51, 0.8) !important;
  border-radius: 3px !important;
}

/* ---------- 8. KARTY I KAFELKI: holo-szklo z nacieciem ------------------ */
.cockpit-status-card, .adv-card, .cheatsheet-section-card,
.metric-chip, .adv-entity, .habitat-zone > .adv-card, .panel-section,
.dl-str, .dl-hw-queue, .dl-strefa-box, .np-card {
  border-radius: 4px !important;
  background:
    linear-gradient(180deg, rgba(14, 24, 42, 0.92) 0%, rgba(6, 10, 19, 0.94) 100%) !important;
  border: 1px solid var(--cy-linia-miekka) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    inset 0 0 24px rgba(0, 234, 255, 0.03) !important;
  position: relative;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease) !important;
}
.cockpit-status-card:hover, .adv-card:hover, .dl-str:hover, .np-card:hover {
  border-color: var(--cy-linia) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 20px rgba(0, 234, 255, 0.14) !important;
}
/* lewy pasek stanu (HUD) na kartach */
.adv-card::before, .cockpit-status-card::before {
  content: '';
  position: absolute;
  left: 0; top: 8px; bottom: 8px;
  width: 2px;
  background: linear-gradient(180deg, var(--cy-cyan) 0%, rgba(0, 234, 255, 0.1) 100%);
  box-shadow: 0 0 10px rgba(0, 234, 255, 0.55);
  pointer-events: none;
}
.adv-card:hover::before, .cockpit-status-card:hover::before {
  background: linear-gradient(180deg, var(--cy-cyan-jasny) 0%, rgba(0, 234, 255, 0.2) 100%);
}
.adv-icon, .scene-icon, .cockpit-lamp-housing {
  border-radius: 3px !important;
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px) !important;
  background: linear-gradient(180deg, rgba(0, 234, 255, 0.12) 0%, rgba(0, 234, 255, 0.03) 100%) !important;
  border: 1px solid rgba(0, 234, 255, 0.28) !important;
  color: var(--cy-cyan) !important;
}
.cockpit-lamp-core { box-shadow: 0 0 12px currentColor !important; }

/* ---------- 9. OZNACZENIA STANU: ON / OFF / awaria ---------------------- */
.cockpit-badge, .ha-state-badge, .state-pill, .adv-badges span, .metric-chip,
.dl-znacznik, .cheatsheet-chip, .dl-chip, .dl-led {
  border-radius: 3px !important;
  font-family: var(--font-mono, monospace) !important;
  letter-spacing: 1.1px !important;
}
.ha-state-badge.on, .state-pill.on, .cockpit-badge.online, .adv-badges .green {
  background: rgba(255, 194, 51, 0.14) !important;
  color: var(--hw-amber-jasny) !important;
  border: 1px solid rgba(255, 194, 51, 0.5) !important;
  box-shadow: 0 0 12px rgba(255, 194, 51, 0.22) !important;
}
.ha-state-badge.off, .state-pill.off {
  background: rgba(255, 255, 255, 0.04) !important;
  color: var(--cy-steel) !important;
  border: 1px solid rgba(120, 200, 255, 0.18) !important;
}
.state-pill.unavail, .cockpit-badge.offline {
  background: rgba(255, 77, 109, 0.14) !important;
  color: #ff8fa3 !important;
  border: 1px solid rgba(255, 77, 109, 0.45) !important;
}
/* dioda LED: ON = zloty puls, OFF = ciemna stal */
.dl-led { box-shadow: 0 0 10px currentColor !important; }
.gra, .dl-stan.gra, .is-on, .active.play { color: var(--hw-green) !important; }

/* ---------- 10. NAWIGACJA I ZAKLADKI: kat + podswietlenie ---------------- */
.portal-nav-btn, .zone-tab, .src-tab, .habitat-nav button, .dl-view-btn {
  border-radius: 3px !important;
  clip-path: polygon(7px 0, calc(100% - 7px) 0, 100% 100%, 0 100%) !important;
}
.portal-nav-btn.active, .portal-nav-btn.is-active, .zone-tab.active,
.src-tab.active, .habitat-nav button.active { border-bottom-color: var(--cy-cyan) !important; }

/* ---------- 11. WIERSZE LIST (kolejka, wyniki, pliki) ------------------- */
.dl-str, .dl-hw-queue {
  border-left: 2px solid transparent !important;
}
.dl-str:hover, .dl-hw-queue:hover { border-left-color: var(--cy-cyan) !important; }
.dl-str .dl-nazwa, .dl-str strong { color: var(--cy-ink) !important; }
a, .dl-link { color: var(--cy-cyan) !important; }
a:hover, .dl-link:hover { color: var(--cy-cyan-jasny) !important; }

/* ---------- 12. BELKA ODTWARZACZA / PASKI PRZYKLEJONE ------------------- */
.dl-belka, #dl-belka, .now-playing, .np-card {
  backdrop-filter: blur(8px) saturate(1.15) !important;
  -webkit-backdrop-filter: blur(8px) saturate(1.15) !important;
}

/* ---------- 13. DIALOGI I MODALE: ramka HUD ---------------------------- */
#vault-dialog, .vault-modal-card, dialog, .modal, .modal-card {
  border-radius: 4px !important;
  background: linear-gradient(180deg, rgba(9, 15, 27, 0.98) 0%, rgba(4, 7, 13, 0.99) 100%) !important;
  border: 1px solid rgba(0, 234, 255, 0.42) !important;
  box-shadow:
    0 0 0 1px rgba(0, 234, 255, 0.1),
    0 0 60px rgba(0, 234, 255, 0.22),
    inset 0 0 60px rgba(0, 234, 255, 0.05) !important;
}
#vault-dialog::before, .vault-modal-card::before, dialog::backdrop {
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}
dialog::backdrop { background: rgba(2, 4, 10, 0.72) !important; }
input, textarea, select, .vault-input, #vault-key-input {
  border-radius: 3px !important;
  background: linear-gradient(180deg, #070c16 0%, #0a1120 100%) !important;
  border: 1px solid rgba(0, 234, 255, 0.24) !important;
  color: var(--cy-ink) !important;
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.7) !important;
}
input:focus, textarea:focus, select:focus, #vault-key-input:focus {
  border-color: var(--cy-cyan) !important;
  box-shadow: var(--cy-glow), inset 0 1px 4px rgba(0, 0, 0, 0.7) !important;
}

/* ---------- 14. PASEK PRZEWIJANIA -------------------------------------- */
* { scrollbar-color: rgba(0, 234, 255, 0.5) rgba(4, 7, 13, 0.9); scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: rgba(4, 7, 13, 0.9); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(0, 234, 255, 0.6) 0%, rgba(0, 120, 160, 0.6) 100%);
  border: 1px solid rgba(0, 234, 255, 0.35);
}
::-webkit-scrollbar-thumb:hover { background: var(--cy-cyan); }

/* ---------- 15. ANIMACJE: powolne, nie rozpraszajace ------------------- */
@media (prefers-reduced-motion: reduce) {
  body::before, .portal-header::after, .ha-deck-header-bar::after { animation: none !important; }
}

/* ---------- 16. TELEFON: mniej swiatla, wiecej czytelnosci ------------- */
@media (max-width: 560px) {
  :root { --cy-ciecie: 9px; }
  body:not(:has(#public-facade))::before { opacity: 0.5; }
  body:not(:has(#public-facade))::after { opacity: 0.26; }
  .portal-frame, .portal-container, .habitat-zone { box-shadow: 0 0 18px rgba(0, 234, 255, 0.08) !important; }
}

/* ============================================================================
   CZESC 2 (po pierwszej ocenie wizualnej): plansza ma byc WIDOCZNA, ciecia
   spojne na wszystkich kartach, a czarne logo kokpitu ma czytac sie jako neon.
   ============================================================================ */

/* ---------- 17. SIATKA: mocniejsza, z akcentem magenta co 4 pola --------- */
body:not(:has(#public-facade))::before,
body.shadow-mode::before {
  background-image:
    linear-gradient(rgba(255, 42, 109, 0.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 234, 255, 0.20) 1px, transparent 1px),
    linear-gradient(rgba(0, 234, 255, 0.20) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 234, 255, 0.14) 1px, transparent 1px);
  background-size: 224px 224px, 224px 224px, 56px 56px, 56px 56px;
  opacity: 0.9;
}
/* ---------- 18. CIECIA NAROZNE: jeden system dla kart, ramek i dialogow -- */
.adv-card, .cockpit-status-card, .cheatsheet-section-card, .panel-section,
.dl-str, .dl-hw-queue, .dl-strefa-box, .np-card, .metric-chip, .adv-entity,
.habitat-zone > .adv-card, .terminal-dock-card, .dl-player, .dl-hw, .dl-pasek-stref {
  border-radius: 0 !important;
  clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px) !important;
  border-top: 1px solid rgba(0, 234, 255, 0.34) !important;
}
/* poswiata TYLKO na hover — filtr drop-shadow na kazdym wierszu listy zjadal
   klatki (zmierzone: zrzut ekranu przestawal wracac po 60 s) */
.adv-card:hover, .cockpit-status-card:hover, .np-card:hover {
  filter: drop-shadow(0 0 12px rgba(0, 234, 255, 0.26));
}
/* naglowki sekcji i paski: ten sam kat po prawej stronie */
.dl-belka, .ha-deck-header-bar, .portal-header, .zone-header {
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
}
/* dialogi: ramka HUD z mocniejszym cieciem */
dialog, .modal, .modal-card, #vault-dialog, .vault-modal-card {
  border-radius: 0 !important;
  clip-path: polygon(
    16px 0, calc(100% - 16px) 0, 100% 16px, 100% calc(100% - 16px),
    calc(100% - 16px) 100%, 16px 100%, 0 calc(100% - 16px), 0 16px) !important;
}

/* ---------- 19. LOGO KOKPITU: czarny sylwetka czyta sie jako neon --------- */
body.shadow-mode .logo-black {
  filter:
    drop-shadow(0 0 2px rgba(0, 234, 255, 0.95))
    drop-shadow(0 0 14px rgba(0, 234, 255, 0.55))
    drop-shadow(0 0 34px rgba(255, 42, 109, 0.45)) !important;
}
body.shadow-mode .logo-ambient-aura {
  background: radial-gradient(circle at 50% 50%, rgba(0, 234, 255, 0.22), rgba(255, 42, 109, 0.12) 45%, transparent 72%) !important;
}
body.shadow-mode .logo-laser-sweep {
  box-shadow: 0 0 18px var(--cy-cyan), 0 0 40px var(--cy-magenta) !important;
}

/* ---------- 20. CZYTELNOSC: drobne etykiety i odczyty stanu ------------- */
:root {
  --text-muted: #9db4cc;
  --text-dim: #64798e;
}
.tile-meta-row, .cockpit-status-sub, .adv-entity, .cockpit-status-labels,
.card-desc, .section-hint, .zone-header .zone-tag, .chip-desc, .dl-legenda {
  color: #9fb2c6 !important;
}
/* stan „gra/działa” ma swiecic, nie tylko zmieniac barwe */
.gra, .dl-stan.gra, .cockpit-badge.online, .ha-state-badge.on {
  text-shadow: 0 0 10px currentColor !important;
}


/* ---------- 21. TYTULY KART: jasniejsze od etykiet (ocena wizualna) ------ */
.adv-title, .cockpit-status-title, .dl-hw-tytul, .np-tytul, .zone-title {
  color: #e4f1ff !important;
}