/* ============================================================================
   WEBSTER STUDIO // webster-panels.css
   WSPOLNA warstwa wygladu kontrolek dla WSZYSTKICH paneli (kokpit, habitat, audio).
   Ladowana jako OSTATNI arkusz w kazdym panelu — dlatego wygrywa z arkuszem panelu
   i nie wymaga ruszania ani HTML, ani JS.

   Po co: te panele mialy wlasne, rozjechane kontrolki (cyjanowe przelaczniki,
   neonowe przyciski, zielone „ON", obwodki z niebieskim podtonem). Teraz obowiazuje
   jeden kontrakt (docs/PANEL_AUDIO_DESIGN.md):
     bursztyn  = wlaczone / uzbrojone / wybrane,
     zielen    = akcja dziala / material gra,
     czerwien  = stop, blad, awaria,
     stal      = spoczynek, nieaktywne.
   Rozmiary: przyciski 34 px (na dotykowym panelu habitat nie schodzimy ponizej 40 px).
   ============================================================================ */

/* ---------- 1. WSPOLNE ODCZENIE: obwodki i tla bez niebieskiego podtonu ------ */
:root {
  --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%);
}
body {
  --border-hover: rgba(255, 176, 32, 0.4);
  --border-subtle: rgba(255, 255, 255, 0.07);
}

/* ---------- 2. PRZELACZNIKI (kokpit: ha-toggle-*, habitat: touch-switch) ----- */
/* Wersja „wlaczona" jest bursztynowa, nie cyjanowa ani neonowo-zielona. */
.ha-toggle-switch input:checked + .ha-toggle-slider,
.touch-switch input:checked + .touch-slider {
  background-color: rgba(255, 176, 32, 0.22) !important;
  border-color: var(--hw-amber) !important;
  box-shadow: 0 0 13px rgba(255, 176, 32, 0.4) !important;
}
.ha-toggle-switch input:checked + .ha-toggle-slider::before,
.touch-switch input:checked + .touch-slider::before {
  background-color: var(--hw-amber) !important;
  box-shadow: 0 0 8px var(--hw-amber) !important;
}
.ha-toggle-slider, .touch-slider {
  background-color: #17171a !important;
  border: 1px solid #35353c !important;
  border-radius: 999px !important;
}
.ha-toggle-slider::before, .touch-slider::before { background-color: var(--hw-steel) !important; }
.ha-toggle-switch.is-busy { animation: w-puls 1s ease-in-out infinite; }
@keyframes w-puls { 0%, 100% { opacity: .6 } 50% { opacity: .35 } }

/* ---------- 3. PRZYCISKI: jedna forma, jedna paleta ------------------------- */
.action-btn, .scene-btn, .filter-btn, .timer-btn, .np-btn, .terminal-btn,
.ws-session-btn, .preset-chip, .metric-chip, .kat-btn, .src-tab {
  border-radius: 8px !important;
  font-family: var(--font-mono, 'JetBrains Mono', monospace) !important;
  letter-spacing: .08em !important;
  background: var(--hw-tlo) !important;
  border: 1px solid var(--hw-edge) !important;
  color: var(--hw-ink) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), inset 0 -2px 4px rgba(0,0,0,.7), 0 2px 5px rgba(0,0,0,.45) !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 {
  border-color: rgba(255, 176, 32, 0.55) !important;
  color: var(--hw-amber-jasny) !important;
}
.action-btn:disabled, .scene-btn:disabled, .np-btn:disabled, .ws-session-btn:disabled,
.filter-btn:disabled, .timer-btn:disabled { opacity: .45 !important; cursor: not-allowed !important; }
/* warianty kolorystyczne maja znaczyc funkcje, nie dekoracje */
.action-btn.cyan, .action-btn.accent, .filter-btn.active, .preset-chip.active, .src-tab.active, .kat-btn.active, .zone-tab.active {
  color: var(--hw-amber-jasny) !important;
  border-color: rgba(255, 176, 32, 0.62) !important;
  background: linear-gradient(180deg, rgba(255,176,32,.22) 0%, rgba(255,176,32,.07) 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 0 12px rgba(255,176,32,.28) !important;
}
.filter-btn.active { color: #14100a !important; font-weight: 700 !important;
  background: linear-gradient(180deg, #ffc451 0%, #ffb020 100%) !important; }
.action-btn.crimson, .ws-session-btn.btn-logout {
  color: var(--hw-red) !important; border-color: rgba(229,72,77,.5) !important;
  background: linear-gradient(180deg, rgba(229,72,77,.16) 0%, rgba(229,72,77,.05) 100%) !important;
}
.ws-session-btn.btn-login {
  color: #14100a !important; background: linear-gradient(180deg, #ffc451 0%, #ffb020 100%) !important;
  border-color: rgba(255,176,32,.7) !important; box-shadow: 0 0 14px rgba(255,176,32,.32) !important;
}
.terminal-btn { color: var(--hw-amber) !important; border-color: rgba(255,176,32,.4) !important;
  background: linear-gradient(180deg, rgba(255,176,32,.16) 0%, rgba(255,176,32,.04) 100%) !important; }
.terminal-btn:hover, .terminal-btn.is-open { box-shadow: 0 0 12px rgba(255,176,32,.4) !important; }

/* ---------- 4. OZNACZENIA STANU: ON= bursztyn, OFF = stal, awaria = czerwien -- */
.ha-state-badge.on, .state-pill.on, .cockpit-badge.online {
  background: rgba(255, 176, 32, 0.16) !important; color: var(--hw-amber) !important;
  border: 1px solid rgba(255, 176, 32, 0.45) !important;
}
.ha-state-badge.off, .state-pill.off { background: rgba(255,255,255,.05) !important;
  color: var(--hw-steel) !important; border: 1px solid rgba(255,255,255,.12) !important; }
.state-pill.unavail, .cockpit-badge.offline {
  background: rgba(229,72,77,.13) !important; color: var(--hw-red) !important;
  border: 1px solid rgba(229,72,77,.4) !important;
}
.cockpit-badge { border-radius: 5px !important; font-family: var(--font-mono, monospace) !important; }

/* ---------- 5. SUWAKI: ten sam tor i ten sam uchwyt ------------------------- */
.volume-slider, input[type=range].touch-slider, .touch-range {
  background: #1c1c22 !important; border: 1px solid #35353c !important;
  height: 6px !important; border-radius: 999px !important;
}
.volume-slider::-webkit-slider-thumb, input[type=range]::-webkit-slider-thumb {
  background: var(--hw-amber) !important; box-shadow: 0 0 8px rgba(255,176,32,.6) !important;
  width: 15px; height: 15px; border-radius: 50%;
}
.volume-slider::-moz-range-thumb, input[type=range]::-moz-range-thumb {
  background: var(--hw-amber) !important; border: none; box-shadow: 0 0 8px rgba(255,176,32,.6) !important; }

/* ---------- 6. PANEL DOTYKOWY (habitat): duze pola, bez drobiazgow ---------- */
@media (pointer: coarse) {
  .touch-switch { width: 62px !important; height: 34px !important; }
  .touch-slider::before { height: 26px !important; width: 26px !important; }
  .touch-switch input:checked + .touch-slider::before { transform: translateX(28px) !important; }
  .action-btn, .scene-btn { min-height: 46px !important; }
  .preset-chip, .filter-btn { min-height: 40px !important; }
}

/* ---------- 7. ZADNYCH RESZTEK STAREJ PALETY W KONTROLKACH ------------------ */
.action-btn.cyan, .terminal-btn, .filter-btn.active { text-shadow: none !important; }

/* ---------- 8. PRZELACZNIK JEZYKA (PL | EN) -------------------------------- */
.w-lang { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--hw-edge, #2f2f36);
  border-radius: 8px; background: rgba(0,0,0,.35); }
.w-lang-btn { font: 700 10px/1 var(--font-mono, 'JetBrains Mono', monospace) !important;
  letter-spacing: .1em !important; padding: 5px 8px !important; border: 0 !important;
  border-radius: 6px !important; background: transparent !important; color: var(--hw-steel, #8b939c) !important;
  cursor: pointer; box-shadow: none !important; }
.w-lang-btn:hover { color: var(--hw-amber-jasny, #ffc451) !important; }
.w-lang-btn.aktywny { background: linear-gradient(180deg, #ffc451 0%, #ffb020 100%) !important;
  color: #14100a !important; box-shadow: 0 0 10px rgba(255,176,32,.35) !important; }

/* ============================================================================
   CZĘŚĆ 2 (2026-10-29, po uwagach Grega: „reszta paneli dużo odbiega od
   downloadera”). Część 1 wyrównała tylko KOLOR. Tu wyrównuję FORMĘ: gęstość,
   promienie, typografię, cień/poświatę i układ kart — wartości wzięte pomiarem
   z panelu downloadera (wzorzec):
     nagłówek 73 px, promień 14, tytuł Syne 19/800 rozstaw 3.8,
     etykieta sekcji mono 10/700 rozstaw 2.4, zakładka 35 px promień 8 mono 11/700,
     przycisk 34 px promień 7 Inter 10/700 wersaliki, chip 22 px pill 10 px.
   Panele (kokpit, habitat, audio) były przestronne i „miękkie”: promienie 18–22 px,
   karty 110–130 px wysokości, iOS-owe przełączniki, mieszanka serif + sans + mono,
   kolorowe ikony i neonowe poświaty. To je odróżniało od downloadera.
   ============================================================================ */

/* ---------- 2.1 NAGŁÓWEK PANELU: jedna geometria we wszystkich ------------- */
.portal-frame, .portal-container { border-radius: 14px !important; }
.portal-header, .ha-deck-header-bar {
  border-radius: 14px 14px 10px 10px !important;
  padding: 12px 16px !important;
  border: 1px solid rgba(255, 176, 32, 0.22) !important;
  background: linear-gradient(180deg, rgba(35, 35, 40, 0.92) 0%, rgba(13, 13, 17, 0.95) 100%) !important;
  box-shadow: none !important;
}
.portal-heading, .portal-title-box h1, .portal-title-box h2,
.habitat-header h1, .habitat-title, header h1.habitat-title {
  font-family: var(--font-display, 'Syne', sans-serif) !important;
  font-size: 19px !important; font-weight: 800 !important;
  letter-spacing: 3.8px !important; text-transform: uppercase !important;
  color: #eaeaed !important; text-shadow: none !important;
}
.portal-title-box p, .portal-header small, .habitat-header p {
  font-family: var(--font-mono, monospace) !important;
  font-size: 10px !important; letter-spacing: 1.8px !important;
  color: var(--hw-steel, #8b939c) !important;
}

/* ---------- 2.2 NAWIGACJA (KOKPIT / SMART HOME / AUDIO, strefy) ----------- */
.portal-nav-btn, .zone-tab, .src-tab, .habitat-nav button {
  height: 35px !important; min-height: 35px !important;
  padding: 0 14px !important; border-radius: 8px !important;
  font-family: var(--font-mono, monospace) !important;
  font-size: 11px !important; font-weight: 700 !important;
  letter-spacing: 1.76px !important; text-transform: uppercase !important;
  background: linear-gradient(180deg, #232326 0%, #17171a 46%, #101013 100%) !important;
  border: 1px solid rgba(255, 176, 32, 0.28) !important;
  color: var(--hw-steel-jasny, #b3b7bd) !important;
  box-shadow: none !important;
}
.portal-nav-btn.active, .portal-nav-btn.is-active, .zone-tab.active,
.src-tab.active, .habitat-nav button.active {
  background: linear-gradient(180deg, #ffc451 0%, #ffb020 100%) !important;
  border-color: rgba(255, 176, 32, 0.75) !important;
  color: #14100a !important;
  box-shadow: 0 0 10px rgba(255, 176, 32, 0.3) !important;
}

/* ---------- 2.3 TYTUŁY SEKCJI: techniczna etykieta, nie „hero” ------------ */
.ha-deck-header-bar span, .zone-header .zone-title, .cheatsheet-section-title,
.panel-section .section-title, .section-head .section-title {
  font-family: var(--font-mono, monospace) !important;
  font-size: 10px !important; font-weight: 700 !important;
  letter-spacing: 2.4px !important; text-transform: uppercase !important;
  color: #ffd479 !important; text-shadow: none !important;
}
.section-hint, .zone-header .zone-tag, .chip-desc, .panel-section .section-hint {
  font-family: var(--font-mono, monospace) !important;
  font-size: 9px !important; letter-spacing: 1.2px !important;
  color: var(--hw-steel, #8b939c) !important;
}

/* ---------- 2.4 KARTY: ciasne, ostre, bez poświaty ------------------------ */
.cockpit-status-card, .adv-card, .terminal-dock-card, .cheatsheet-section-card,
.metric-chip, .adv-entity, .habitat-zone > .adv-card, .panel-section {
  border-radius: 10px !important;
  padding: 10px 12px !important;
  background: linear-gradient(180deg, rgba(26, 26, 31, 0.95) 0%, rgba(13, 13, 17, 0.95) 100%) !important;
  border: 1px solid #2f2f36 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
  gap: 8px !important;
}
.cockpit-status-card { min-height: 0 !important; }
.cockpit-status-title, .adv-title, .terminal-title-tag, .cheatsheet-section-title {
  font-size: 12px !important; font-weight: 600 !important; letter-spacing: 0.4px !important;
}
.cockpit-status-sub, .adv-entity, .cockpit-status-labels, .card-desc {
  font-family: var(--font-mono, monospace) !important;
  font-size: 10px !important; letter-spacing: 0.8px !important;
  color: var(--hw-steel, #8b939c) !important;
}
.cockpit-status-card, .adv-card { gap: 6px !important; }
.cockpit-telemetry-grid, .cheatsheet-cards-grid, .habitat-zone .adv-grid {
  gap: 8px !important;
}

/* ---------- 2.5 IKONY: mniejsze, jednolite, bez kolorowej „zabawki” ------- */
.adv-icon, .scene-icon, .cockpit-lamp-housing {
  width: 34px !important; height: 34px !important; min-width: 34px !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid #2f2f36 !important;
  box-shadow: none !important;
  font-size: 15px !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
}
.cockpit-lamp-core { box-shadow: none !important; }

/* ---------- 2.6 BADGE / PIGUŁKI: techniczne, czytelne, mono --------------- */
.cockpit-badge, .ha-state-badge, .state-pill, .adv-badges span, .metric-chip,
.dl-znacznik, .cheatsheet-chip {
  height: 22px !important; padding: 0 9px !important;
  display: inline-flex !important; align-items: center !important;
  border-radius: 999px !important;
  font-family: var(--font-mono, monospace) !important;
  font-size: 10px !important; font-weight: 700 !important;
  letter-spacing: 1.2px !important; text-transform: uppercase !important;
  box-shadow: none !important;
}
.cockpit-badge.online, .ha-state-badge.on, .state-pill.on, .adv-badges .green {
  background: rgba(255, 176, 32, 0.14) !important; color: #ffb020 !important;
  border: 1px solid rgba(255, 176, 32, 0.45) !important;
}
.cockpit-badge.offline, .state-pill.unavail {
  background: rgba(229, 72, 77, 0.13) !important; color: #e5484d !important;
  border: 1px solid rgba(229, 72, 77, 0.4) !important;
}
.ha-power-pill, .metric-chip, .metric-val { color: #ffc451 !important; }
.metric-chip { border-color: rgba(255, 176, 32, 0.35) !important; background: rgba(255, 176, 32, 0.06) !important; }

/* ---------- 2.7 PRZEŁĄCZNIKI: jedna wielkość i jeden kolor --------------- */
.ha-toggle-switch, .touch-switch { width: 46px !important; height: 24px !important; }
.ha-toggle-slider::before, .touch-slider::before { height: 16px !important; width: 16px !important; left: 3px !important; bottom: 3px !important; }
.ha-toggle-switch input:checked + .ha-toggle-slider::before,
.touch-switch input:checked + .touch-slider::before { transform: translateX(22px) !important; }
.ha-toggle-switch.small, .touch-switch.small { width: 40px !important; height: 22px !important; }

/* ---------- 2.8 KONIEC Z MIĘKKIM NEONEM: żadnych dużych poświat ---------- */
.portal-nav-btn, .cockpit-status-card, .adv-card, .scene-btn, .zone-tab,
.metric-chip, .ha-refresh-btn, .terminal-dock-card { filter: none !important; }
.portal-container, .portal-frame, .habitat-zone, .terminal-dock-card {
  box-shadow: none !important; text-shadow: none !important;
}

/* ---------- 2.9 DOCISNIECIE GESTOSCI (ocena po wdrozeniu: karty mialy jeszcze
   zapas pionowy, a nazwy urzadzen byly ucinane w jednej linii) ------------- */
.cockpit-status-card, .adv-card, .terminal-dock-card, .cheatsheet-section-card,
.metric-chip, .habitat-zone, .panel-section { padding: 9px 10px !important; gap: 6px !important; }
.adv-card > * + *, .cockpit-status-card > * + * { margin-top: 4px !important; }
.scene-btn, .action-btn { padding: 9px 11px !important; }
.scene-btn strong { font-size: 0.74rem !important; letter-spacing: 0.5px !important; }
.scene-btn small { font-size: 0.6rem !important; }
/* nazwy urzadzen: dwie linie zamiast ucinania w polowie slowa (jak w downloaderze) */
.tile-name {
  font-size: 12.5px !important; font-weight: 600 !important; line-height: 1.3 !important;
  white-space: normal !important; overflow: hidden !important; text-overflow: clip !important;
  display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important;
}
.tile-meta-row { gap: 5px !important; }
.adv-title, .cockpit-status-title { line-height: 1.3 !important; }
.zone-header { padding: 6px 2px !important; }
.adv-badges { gap: 4px !important; }

/* ---------- 2.10 BLOK KONTROLEK W KAFELKU (habitat): 123 px to bylo najwieksze
   zrodlo wysokosci karty — bo mieści suwak jasnosci i presety. Sciskamy je,
   zeby kafelek zblizyl sie do gestosci downloadera, nie tracac funkcji. -------- */
.adv-controls { padding-top: 8px !important; margin-top: 4px !important; gap: 5px !important; }
.slider-row { min-height: 22px !important; padding: 0 !important; }
.slider-row input[type=range], .slider-row .touch-range { height: 5px !important; }
.slider-row label, .slider-row .p-label { font-size: 9px !important; letter-spacing: 1px !important; }
.preset-chip { min-height: 28px !important; padding: 4px 8px !important; font-size: 9px !important; }
.adv-badges { margin-top: 3px !important; }
.adv-card-top { gap: 8px !important; }

/* ---------- 9. PŁYWAJĄCY PRZEŁĄCZNIK JĘZYKA (gdy panel nie ma własnego) ------ */
#w-lang-plywajacy { position: fixed; right: 10px; bottom: 10px; z-index: 9999; }
#w-lang-plywajacy .w-lang { background: rgba(5, 5, 7, 0.92); -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.6); }
@media (pointer: coarse) { #w-lang-plywajacy { bottom: 14px; right: 12px; } }