/* WITRYNA WILKA — wspolne.css (szata Arclight, holograficzny HUD)
   Zero build-stepu, zero zależności. Jedna szata dla wszystkich 25 zakładek —
   zmiana tokenu niżej działa na całą witrynę naraz.
   Poprzednia szata leży w /static/stara-szata/ (ten sam plik, inna zawartość).
   Fonty lokalnie? Usuń @import poniżej i podłóż własne @font-face
   (Rajdhani → nagłówki/etykiety, Share Tech Mono → dane i logi). */
@import url("https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;500;600;700&family=Share+Tech+Mono&display=swap");

/* ==== tokens/fonty.css ==== */
:root {
  --font-tech: 'Rajdhani', 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'Share Tech Mono', 'JetBrains Mono', ui-monospace, monospace;
}


/* ==== tokens/kolory.css ==== */
:root {
  /* --- tło: 80% ekranu to ciemność --- */
  --tlo-0: #04070d;          /* najgłębszy granat, korpus strony */
  --tlo-1: #060b14;          /* środkowy stopień gradientu */
  --tlo-2: #0b1826;          /* rozjaśnienie w centrum */
  --tlo-gradient: radial-gradient(ellipse 70% 55% at 50% 45%, var(--tlo-2) 0%, var(--tlo-1) 45%, var(--tlo-0) 100%);

  /* --- szkło paneli --- */
  --szklo-1: rgba(255,255,255,.035);
  --szklo-2: rgba(255,255,255,.045);
  --szklo-3: rgba(255,255,255,.065);
  --szklo-blur: 8px;

  /* --- kolor główny: lodowy cyjan --- */
  --cyjan-900: #0a2b36;
  --cyjan-500: #3ee8ff;
  --cyjan-300: #9ff4ff;
  --cyjan-05: rgba(62,232,255,.05);
  --cyjan-08: rgba(62,232,255,.08);
  --cyjan-12: rgba(62,232,255,.12);
  --cyjan-25: rgba(62,232,255,.25);
  --cyjan-40: rgba(62,232,255,.40);
  --cyjan-70: rgba(62,232,255,.70);

  /* --- akcenty --- */
  --bursztyn: #ffb02e;       /* ostrzeżenie, degradacja, uwaga operatora */
  --bursztyn-15: rgba(255,176,46,.15);
  --czerwien: #ff4d5e;       /* błąd, strata, przekroczony próg */
  --czerwien-15: rgba(255,77,94,.15);
  --fiolet: #b98cff;         /* rzadko: dane AI/model, tylko w Analizie i AI */

  /* --- tekst ---
     Trzy najciemniejsze stopnie zostały rozjaśnione. Pierwotne #4c7488 i #40667a
     na tle #04070d dawały kontrast poniżej progu WCAG AA dla małego tekstu —
     ładnie wyglądało na makiecie, źle się czytało na monitorze. */
  --tekst-1: #eafcff;        /* liczby, nagłówki */
  --tekst-2: #b6dced;        /* treść, wiersze logu */
  --tekst-3: #a3cfdd;        /* etykiety */
  --tekst-4: #82a8ba;        /* metadane, podpisy */
  --tekst-5: #6f97a9;        /* najciemniejszy czytelny — jednostki, osie */

  /* --- linie i obwódki --- */
  --linia-1: rgba(62,232,255,.06);
  --linia-2: rgba(62,232,255,.10);
  --linia-3: rgba(62,232,255,.25);
  --klamra: var(--cyjan-500);

  /* --- semantyka rynkowa (zysk = cyjan, strata = czerwień; brak zieleni) --- */
  --wzrost: var(--cyjan-500);
  --spadek: var(--czerwien);
  --neutralnie: var(--tekst-4);

  /* --- stany systemowe --- */
  --stan-ok: var(--cyjan-500);
  --stan-uwaga: var(--bursztyn);
  --stan-blad: var(--czerwien);
  --stan-spi: var(--tekst-5);
}


/* ==== tokens/typografia.css ==== */
/* Skala podniesiona ~30% względem pierwotnego projektu. Powód: makieta była
   rysowana jako obrazek, a nie jako strona do czytania — 9 px w wąskim kroju
   (Rajdhani) na czarnym tle wymagało wpatrywania się. Rozstrzelenie też zjechało
   w dół, bo przy małych stopniach rozbija kształt wyrazu i to ono, bardziej niż
   sam rozmiar, robiło z etykiet szyfr. Zmiana jest w tokenach, więc dotyczy
   wszystkich 25 stron naraz — nie ruszamy ani jednego pliku strony. */
:root {
  /* etykiety i nagłówki — WERSALIKI, wąsko, z rozstrzeleniem */
  --etykieta-xs: 11px;
  --etykieta-s: 12px;
  --etykieta-m: 14px;
  --naglowek-s: 15px;
  --naglowek-m: 19px;
  --naglowek-l: 22px;
  --rozstrzelenie-etykieta: .11em;
  --rozstrzelenie-naglowek: .14em;
  --rozstrzelenie-dane: .03em;

  /* dane — monospace, duże liczby przy malutkich etykietach */
  --dane-xs: 11px;
  --dane-s: 13px;
  --dane-m: 15px;
  --dane-l: 19px;
  --dane-xl: 26px;
  --dane-xxl: 40px;
  --dane-hero: 62px;

  --waga-zwykla: 400;
  --waga-srednia: 500;
  --waga-mocna: 600;
  --waga-max: 700;

  --interlinia-ciasna: 1;
  --interlinia-dane: 1.35;
  --interlinia-tekst: 1.6;
}


/* ==== tokens/odstepy.css ==== */
:root {
  --o-1: 2px;
  --o-2: 4px;
  --o-3: 6px;
  --o-4: 8px;
  --o-5: 10px;
  --o-6: 12px;
  --o-7: 14px;
  --o-8: 16px;
  --o-10: 20px;
  --o-12: 24px;
  --o-16: 32px;
  --o-20: 40px;

  --panel-padding: var(--o-8);
  --przerwa-siatki: var(--o-7);
  --klamra-dlugosc: 20px;
  --siatka-tlo: 40px;

  /* Brak zaokrągleń — to nie jest bootstrapowy dashboard. */
  --promien: 0px;
  --promien-wyjatek: 2px;  /* wyłącznie znaczniki na wykresach */

  --szer-max: 2200px;
  --pasek-gorny: 52px;
  --pasek-dolny: 46px;
}


/* ==== tokens/efekty.css ==== */
:root {
  /* świecenie — świeci tylko to, co ważne */
  --swiecenie-s: 0 0 6px rgba(62,232,255,.5);
  --swiecenie-m: 0 0 12px rgba(62,232,255,.6);
  --swiecenie-l: 0 0 22px rgba(62,232,255,.45);
  --swiecenie-bursztyn: 0 0 10px rgba(255,176,46,.55);
  --swiecenie-czerwien: 0 0 10px rgba(255,77,94,.55);
  --tekst-swiecenie: 0 0 12px rgba(62,232,255,.75);
  --winieta: inset 0 0 220px 60px rgba(0,0,0,.85);
  --uniesienie: 0 6px 20px rgba(62,232,255,.18);

  /* nakładki — klimat tak, ale nie kosztem czytania.
     Skanlinie z mix-blend-mode:multiply przyciemniały tekst paskami co 4 px;
     przy .5 to była realna strata kontrastu na każdej liczbie. */
  --siatka-opacity: .04;
  --skanlinie-opacity: .18;
  --szum-opacity: .018;

  /* ruch */
  --czas-szybko: 150ms;
  --czas-normalnie: 300ms;
  --czas-wolno: 900ms;
  --krzywa: cubic-bezier(.4, 0, .2, 1);
  --obrot-zewn: 60s;
  --obrot-sred: 40s;
  --obrot-wewn: 20s;
  --start-sekwencja: 2500ms;
}


/* ==== tokens/reset.css ==== */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--tlo-0);
}

body {
  font-family: var(--font-tech);
  color: var(--tekst-2);
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}

a { color: var(--cyjan-500); text-decoration: none; }
a:hover { color: var(--tekst-1); text-shadow: var(--tekst-swiecenie); }

h1, h2, h3, h4 {
  margin: 0;
  font-weight: var(--waga-mocna);
  letter-spacing: var(--rozstrzelenie-naglowek);
  text-transform: uppercase;
  color: var(--tekst-1);
}

button, input, select, textarea { font: inherit; color: inherit; }

::-webkit-scrollbar { width: 3px; height: 3px; }
::-webkit-scrollbar-thumb { background: rgba(62,232,255,.35); }
::-webkit-scrollbar-track { background: var(--cyjan-05); }

::selection { background: var(--cyjan-25); color: var(--tekst-1); }


/* ==== components/komponenty.css ==== */
/* KOMPONENTY WITRYNY WILKA.
   Zasada: zero zaokrągleń, zero pełnych ramek, świeci tylko to, co ważne. */

/* ---------- animacje ---------- */
@keyframes wilk-spin      { to { transform: rotate(360deg); } }
@keyframes wilk-spin-rev  { to { transform: rotate(-360deg); } }
@keyframes wilk-puls      { 0%,100% { opacity:.55; transform:scale(.94); } 50% { opacity:1; transform:scale(1.06); } }
@keyframes wilk-puls-glow { 0%,100% { opacity:.25; } 50% { opacity:.6; } }
@keyframes wilk-kropka    { 0%,100% { opacity:.25; box-shadow:0 0 0 0 currentColor; } 50% { opacity:1; box-shadow:0 0 8px 1px currentColor; } }
@keyframes wilk-skan      { 0% { transform:translateY(-10vh); opacity:0; } 6% { opacity:.55; } 55% { opacity:.25; } 100% { transform:translateY(110vh); opacity:0; } }
@keyframes wilk-mrug      { 0%{opacity:0} 12%{opacity:.9} 18%{opacity:.05} 26%{opacity:.7} 34%{opacity:.1} 46%{opacity:1} 52%{opacity:.35} 100%{opacity:1} }
@keyframes wilk-rysuj-x   { from { transform:scaleX(0); } to { transform:scaleX(1); } }
@keyframes wilk-wjazd     { from { opacity:0; transform:translateY(-14px); background:var(--cyjan-12); } to { opacity:1; transform:none; background:transparent; } }
@keyframes wilk-wjazd-b   { from { opacity:0; transform:translateY(-14px); background:var(--cyjan-12); } to { opacity:1; transform:none; background:transparent; } }
@keyframes wilk-fade-up   { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
@keyframes wilk-kursor    { 0%,49% { opacity:1; } 50%,100% { opacity:0; } }
@keyframes wilk-krawedz   { from { stroke-dashoffset:2400; } to { stroke-dashoffset:0; } }
@keyframes wilk-holo-skan { 0% { top:0; opacity:0; } 10% { opacity:1; } 90% { opacity:1; } 100% { top:100%; opacity:0; } }
@keyframes wilk-holo-tresc{ 0%,55% { opacity:0; } 100% { opacity:1; } }
@keyframes wilk-siatka    { from { background-position:0 0; } to { background-position:0 var(--siatka-tlo); } }
@keyframes wilk-obrot     { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ---------- korpus strony + nakładki ---------- */
.wilk-korpus {
  position: relative;
  min-height: 100vh;
  background: var(--tlo-0);
  background-image: var(--tlo-gradient);
  overflow: hidden;
}

/* ŚWIADOMA DECYZJA: strona rośnie z treścią i przewija się normalnie.
   Była tu reguła height:100vh, która wtłaczała wszystko w jeden ekran. Efekt:
   panele chowały treść za wewnętrznym paskiem przewijania i realnie ubywało
   informacji (Wyniki pokazywały 42% tego, co stara wersja). Stara witryna była
   „prymitywna", ale pokazywała WSZYSTKO — i to jest właściwe zachowanie
   dla strony z danymi. Nawigacja jest position:sticky, więc mimo długiej strony
   menu zostaje pod ręką, a nakładki są position:fixed, więc się nie powielają. */
/* Nakładki są czysto dekoracyjne i mają NIE brać udziału w liczeniu wysokości
   strony. Przy position:absolute smuga „przelot" (animowana do translateY(110vh))
   wystawała poza <body> i dokładała ~180 px fantomowej wysokości — strona robiła
   się przewijalna, choć treść mieściła się w oknie. Fixed przykleja je do okna
   i wyjmuje z układu przewijania. */
.wilk-nakladka { position: fixed; inset: 0; pointer-events: none; }
.wilk-nakladka--siatka {
  z-index: 3;
  background-image:
    linear-gradient(rgba(62,232,255,.5) 1px, transparent 1px),
    linear-gradient(90deg, rgba(62,232,255,.5) 1px, transparent 1px);
  background-size: var(--siatka-tlo) var(--siatka-tlo);
  opacity: var(--siatka-opacity);
  animation: wilk-siatka 8s linear infinite;
}
.wilk-nakladka--skanlinie {
  z-index: 4;
  background: repeating-linear-gradient(to bottom,
    rgba(0,0,0,0) 0px, rgba(0,0,0,0) 2px, rgba(0,0,0,.28) 3px, rgba(0,0,0,0) 4px);
  opacity: var(--skanlinie-opacity);
  mix-blend-mode: multiply;
}
.wilk-nakladka--winieta { z-index: 6; box-shadow: var(--winieta); }
.wilk-nakladka--przelot {
  z-index: 5; inset: 0 0 auto 0; height: 120px;
  background: linear-gradient(to bottom, rgba(62,232,255,0) 0%, rgba(62,232,255,.06) 45%,
    rgba(62,232,255,.14) 50%, rgba(62,232,255,.06) 55%, rgba(62,232,255,0) 100%);
  animation: wilk-skan 7s var(--krzywa) infinite;
}

/* ---------- panel ---------- */
.wilk-panel {
  position: relative;
  background: var(--szklo-2);
  backdrop-filter: blur(var(--szklo-blur));
  padding: var(--panel-padding);
  border-radius: var(--promien);
}
.wilk-panel--cichy { background: var(--szklo-1); }
.wilk-panel--mocny { background: var(--szklo-3); }
.wilk-panel--start { animation: wilk-mrug 1100ms steps(1, end) both; }

/* klamry narożne — kluczowy detal stylu, nigdy pełna ramka */
.wilk-klamra { position: absolute; width: var(--klamra-dlugosc); height: var(--klamra-dlugosc); pointer-events: none; box-shadow: var(--swiecenie-s); }
.wilk-klamra--lg { top: -1px; left: -1px;  border-top: 1px solid var(--klamra); border-left: 1px solid var(--klamra); }
.wilk-klamra--pg { top: -1px; right: -1px; border-top: 1px solid var(--klamra); border-right: 1px solid var(--klamra); }
.wilk-klamra--ld { bottom: -1px; left: -1px;  border-bottom: 1px solid var(--klamra); border-left: 1px solid var(--klamra); }
.wilk-klamra--pd { bottom: -1px; right: -1px; border-bottom: 1px solid var(--klamra); border-right: 1px solid var(--klamra); }
.wilk-klamra--uwaga  { border-color: var(--bursztyn) !important; box-shadow: var(--swiecenie-bursztyn); }
.wilk-klamra--blad   { border-color: var(--czerwien) !important; box-shadow: var(--swiecenie-czerwien); }

/* ---------- nagłówek sekcji ---------- */
.wilk-naglowek { display: flex; align-items: center; justify-content: space-between; gap: var(--o-6); }
.wilk-naglowek__tytul {
  font-size: var(--etykieta-m); font-weight: var(--waga-mocna);
  letter-spacing: var(--rozstrzelenie-naglowek); text-transform: uppercase;
  color: var(--cyjan-500); text-shadow: 0 0 10px rgba(62,232,255,.5);
}
.wilk-naglowek__kod { font-family: var(--font-mono); font-size: var(--dane-xs); color: var(--tekst-4); letter-spacing: .1em; }
.wilk-linia { height: 1px; background: linear-gradient(90deg, var(--cyjan-500), rgba(62,232,255,0)); transform-origin: left; animation: wilk-rysuj-x 700ms var(--krzywa) both; }
.wilk-linia--cicha { background: linear-gradient(90deg, var(--linia-3), rgba(62,232,255,0)); }

/* ---------- akapit objaśniający ----------
   Stara witryna miała pod każdym nagłówkiem krótkie wyjaśnienie „co tu widzisz”
   i to ono decydowało o jej czytelności — bardziej niż kolory czy siatka.
   Wracamy do tego: nagłówek mówi CO, ten akapit mówi PO CO. */
.wilk-opis {
  margin: var(--o-4) 0 var(--o-8);
  padding-left: var(--o-6);
  border-left: 2px solid var(--linia-3);
  font-family: var(--font-tech);
  font-size: var(--etykieta-m);
  line-height: 1.65;
  color: var(--tekst-3);
  max-width: 74ch;
  white-space: normal;
}
.wilk-opis strong { color: var(--tekst-1); font-weight: var(--waga-mocna); }
.wilk-opis code {
  font-family: var(--font-mono); font-size: var(--dane-s);
  color: var(--cyjan-500); background: var(--cyjan-08); padding: 0 4px;
}

/* ---------- etykiety i dane ---------- */
.wilk-etykieta { font-size: var(--etykieta-s); letter-spacing: var(--rozstrzelenie-etykieta); text-transform: uppercase; color: var(--tekst-3); }
.wilk-etykieta--cicha { color: var(--tekst-4); font-size: var(--etykieta-xs); }
.wilk-dane { font-family: var(--font-mono); color: var(--tekst-1); font-variant-numeric: tabular-nums; }

/* ---------- wielka kwota ----------
   Kwota, która ma być widoczna z drugiego końca pokoju. Znak dolara celowo
   mniejszy i uniesiony: oko czyta najpierw liczbę, a dolar mówi „to pieniądze,
   nie punkty". Świecenie skalujemy zmienną --waga-kwoty (0…1), więc im większa
   kwota względem kapitału, tym mocniej świeci — bez zmiany koloru. */
.wilk-kwota {
  display: flex; align-items: baseline; justify-content: center;
  gap: var(--o-3); line-height: 1;
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  color: var(--kwota-kolor, var(--tekst-1));
}
.wilk-kwota__znak {
  font-size: .42em; align-self: flex-start; margin-top: .18em;
  opacity: .75; letter-spacing: 0;
}
.wilk-kwota__liczba {
  font-size: var(--dane-hero); letter-spacing: -.01em;
  text-shadow: 0 0 calc(10px + 26px * var(--waga-kwoty, .3)) var(--kwota-kolor, var(--cyjan-500));
  transition: color var(--czas-normalnie) var(--krzywa);
}
/* Strzałka w jednej linii ze środkiem liczby, nie przy jej stopie — przy .34em
   i wyrównaniu do linii pisma czytała się jak kropka na końcu kwoty. */
.wilk-kwota__strzalka { font-size: .40em; opacity: .95; align-self: center; margin-left: .06em; }
.wilk-kwota--zywa .wilk-kwota__liczba { animation: wilk-kwota-puls 2.6s ease-in-out infinite; }
@keyframes wilk-kwota-puls {
  0%, 100% { text-shadow: 0 0 calc(8px + 18px * var(--waga-kwoty, .3)) var(--kwota-kolor, var(--cyjan-500)); }
  50%      { text-shadow: 0 0 calc(16px + 40px * var(--waga-kwoty, .3)) var(--kwota-kolor, var(--cyjan-500)); }
}
/* Miganie przy zmianie wartości — krótkie, żeby zwracało uwagę raz, a nie ciągle. */
@keyframes wilk-kwota-skok { 0% { transform: scale(1); } 35% { transform: scale(1.045); } 100% { transform: scale(1); } }
.wilk-kwota--skok { animation: wilk-kwota-skok 520ms var(--krzywa); }

.wilk-kwota-tor { position: relative; height: 4px; background: var(--cyjan-08); overflow: hidden; }
.wilk-kwota-tor__wypelnienie {
  position: absolute; top: 0; bottom: 0; left: 50%; width: 0;
  background: var(--kwota-kolor, var(--cyjan-500));
  box-shadow: 0 0 12px var(--kwota-kolor, var(--cyjan-500));
  transition: width var(--czas-wolno) var(--krzywa), left var(--czas-wolno) var(--krzywa);
}
.wilk-kwota-tor__zero {
  position: absolute; top: -3px; bottom: -3px; left: 50%; width: 1px;
  background: var(--tekst-3); opacity: .55;
}

/* ---------- przycisk ---------- */
.wilk-przycisk {
  display: inline-flex; align-items: center; gap: var(--o-4);
  padding: var(--o-3) var(--o-6);
  background: var(--cyjan-08); color: var(--tekst-1);
  border: 0; border-left: 1px solid var(--linia-3);
  font-family: var(--font-tech); font-size: var(--etykieta-m);
  letter-spacing: var(--rozstrzelenie-etykieta); text-transform: uppercase;
  cursor: pointer; border-radius: var(--promien);
  transition: background var(--czas-szybko) var(--krzywa), transform var(--czas-szybko) var(--krzywa), box-shadow var(--czas-szybko) var(--krzywa), color var(--czas-szybko) var(--krzywa);
}
.wilk-przycisk:hover  { background: rgba(62,232,255,.18); transform: translateY(-2px); box-shadow: var(--uniesienie); }
.wilk-przycisk:active { transform: translateY(0); background: rgba(62,232,255,.26); }
.wilk-przycisk:focus-visible { outline: 1px solid var(--cyjan-500); outline-offset: 2px; }
.wilk-przycisk[disabled] { opacity: .35; cursor: not-allowed; transform: none; box-shadow: none; }
.wilk-przycisk--duch { background: transparent; color: var(--tekst-3); border-left-color: var(--linia-2); }
.wilk-przycisk--duch:hover { background: var(--cyjan-08); color: var(--tekst-1); }
.wilk-przycisk--uwaga { background: var(--bursztyn-15); border-left-color: var(--bursztyn); color: var(--bursztyn); }
.wilk-przycisk--uwaga:hover { background: rgba(255,176,46,.26); box-shadow: 0 6px 20px rgba(255,176,46,.18); color: var(--tekst-1); }
.wilk-przycisk--blad { background: var(--czerwien-15); border-left-color: var(--czerwien); color: var(--czerwien); }
.wilk-przycisk--blad:hover { background: rgba(255,77,94,.26); box-shadow: 0 6px 20px rgba(255,77,94,.18); color: var(--tekst-1); }
.wilk-przycisk--maly { padding: var(--o-1) var(--o-5); font-size: var(--etykieta-s); }
.wilk-przycisk--mono { font-family: var(--font-mono); text-transform: none; letter-spacing: .08em; }

/* ---------- pola ---------- */
.wilk-pole-obudowa { display: flex; flex-direction: column; gap: var(--o-3); }
.wilk-pole {
  width: 100%; padding: var(--o-4) var(--o-5);
  background: rgba(0,0,0,.35); color: var(--tekst-1);
  border: 0; border-bottom: 1px solid var(--linia-3);
  font-family: var(--font-mono); font-size: var(--dane-m); letter-spacing: var(--rozstrzelenie-dane);
  border-radius: var(--promien); outline: none;
  transition: border-color var(--czas-szybko) var(--krzywa), background var(--czas-szybko) var(--krzywa);
}
.wilk-pole::placeholder { color: var(--tekst-5); }
.wilk-pole:focus { border-bottom-color: var(--cyjan-500); background: rgba(62,232,255,.06); box-shadow: 0 1px 12px -6px var(--cyjan-500); }
.wilk-pole[aria-invalid="true"] { border-bottom-color: var(--czerwien); }

.wilk-wybor { appearance: none; padding-right: var(--o-12); cursor: pointer; }
.wilk-wybor-obudowa { position: relative; display: inline-block; }
.wilk-wybor-obudowa::after {
  content: ""; position: absolute; right: 10px; top: 50%; width: 6px; height: 6px;
  border-right: 1px solid var(--cyjan-500); border-bottom: 1px solid var(--cyjan-500);
  transform: translateY(-70%) rotate(45deg); pointer-events: none;
}
.wilk-wybor option { background: var(--tlo-1); color: var(--tekst-1); }

/* ---------- przełącznik ---------- */
.wilk-przelacznik { display: inline-flex; align-items: center; gap: var(--o-5); cursor: pointer; background: none; border: 0; padding: 0; }
.wilk-przelacznik__tor { position: relative; width: 38px; height: 14px; background: rgba(0,0,0,.5); border: 1px solid var(--linia-3); transition: border-color var(--czas-szybko), background var(--czas-szybko); }
.wilk-przelacznik__suwak { position: absolute; top: 1px; left: 1px; width: 16px; height: 10px; background: var(--tekst-5); transition: transform var(--czas-normalnie) var(--krzywa), background var(--czas-szybko), box-shadow var(--czas-szybko); }
.wilk-przelacznik[aria-checked="true"] .wilk-przelacznik__tor { background: rgba(62,232,255,.12); border-color: var(--cyjan-500); }
.wilk-przelacznik[aria-checked="true"] .wilk-przelacznik__suwak { transform: translateX(20px); background: var(--cyjan-500); box-shadow: var(--swiecenie-s); }
.wilk-przelacznik:focus-visible .wilk-przelacznik__tor { outline: 1px solid var(--cyjan-500); outline-offset: 2px; }

/* ---------- odznaki i kropki ---------- */
.wilk-odznaka {
  display: inline-flex; align-items: center; gap: var(--o-3);
  padding: var(--o-1) var(--o-4);
  font-family: var(--font-mono); font-size: var(--dane-xs); letter-spacing: .1em; text-transform: uppercase;
  color: var(--cyjan-500); background: var(--cyjan-08);
  border-left: 1px solid currentColor; border-radius: var(--promien);
}
.wilk-odznaka--uwaga { color: var(--bursztyn); background: var(--bursztyn-15); }
.wilk-odznaka--blad  { color: var(--czerwien); background: var(--czerwien-15); }
.wilk-odznaka--cicha { color: var(--tekst-4); background: rgba(255,255,255,.03); }
.wilk-odznaka--ai    { color: var(--fiolet); background: rgba(185,140,255,.12); }

.wilk-kropka { width: 6px; height: 6px; flex: none; background: currentColor; display: inline-block; }
.wilk-kropka--zywa { animation: wilk-kropka 2s ease-in-out infinite; }

/* ---------- paski i wskaźniki ---------- */
.wilk-pasek { position: relative; height: 5px; background: var(--cyjan-08); }
.wilk-pasek__wypelnienie { position: absolute; inset: 0 auto 0 0; background: var(--cyjan-500); box-shadow: 0 0 10px var(--cyjan-500); transition: width var(--czas-wolno) var(--krzywa); }
.wilk-pasek--gruby { height: 8px; }
.wilk-wskaznik__luk { transition: stroke-dashoffset var(--czas-wolno) var(--krzywa); }

/* ---------- kafelek ---------- */
.wilk-kafelek {
  position: relative; display: block; width: 100%; text-align: left; cursor: pointer;
  padding: var(--o-6) var(--o-6);
  background: var(--szklo-1); color: inherit;
  border: 0; border-top: 1px solid var(--cyjan-25);
  border-radius: var(--promien);
  transition: transform var(--czas-szybko) var(--krzywa), background var(--czas-szybko) var(--krzywa), box-shadow var(--czas-szybko) var(--krzywa);
}
.wilk-kafelek:hover { background: var(--cyjan-12); transform: translateY(-2px); box-shadow: var(--uniesienie); }
.wilk-kafelek:focus-visible { outline: 1px solid var(--cyjan-500); outline-offset: 2px; }
.wilk-kafelek[aria-pressed="true"] { background: var(--cyjan-12); border-top-color: var(--cyjan-500); }

/* ---------- tabela ---------- */
.wilk-tabela { width: 100%; border-collapse: collapse; font-family: var(--font-mono); font-size: var(--dane-s); }
.wilk-tabela th {
  position: sticky; top: 0; z-index: 1;
  padding: var(--o-3) var(--o-5); text-align: left;
  font-family: var(--font-tech); font-size: var(--etykieta-xs); font-weight: var(--waga-mocna);
  letter-spacing: var(--rozstrzelenie-etykieta); text-transform: uppercase; color: var(--tekst-4);
  background: rgba(6,11,20,.92); border-bottom: 1px solid var(--linia-3); white-space: nowrap;
}
.wilk-tabela th[data-sortowalna] { cursor: pointer; }
.wilk-tabela th[data-sortowalna]:hover { color: var(--cyjan-500); }
/* Wyższy wiersz = łatwiej wodzić okiem po kolumnie liczb.
   Tekst ZAWIJA się, liczby nie. Wcześniej `nowrap` obowiązywał wszystkie komórki
   i jedna kolumna z długą hipotezą rozciągała tabelę do 30 540 px — na telefonie
   przeglądarka pomniejszała wtedy całą stronę, żeby to zmieścić.
   max-width w znakach trzyma kolumny opisowe w ryzach, a krótkie wartości
   (daty, tickery) i tak zostają w jednej linii, bo się mieszczą. */
.wilk-tabela td {
  padding: var(--o-5) var(--o-6); border-bottom: 1px solid var(--linia-1);
  color: var(--tekst-2); white-space: normal; overflow-wrap: break-word; max-width: 46ch;
}
.wilk-tabela td[data-liczba] { white-space: nowrap; max-width: none; }
/* Pierwsza kolumna to w tych tabelach zawsze data albo ticker. Bez tego
   „2026-07-31" łamie się po myślniku — dla przeglądarki myślnik jest
   naturalnym miejscem podziału wiersza. */
.wilk-tabela td:first-child { white-space: nowrap; }
.wilk-tabela tbody tr { transition: background var(--czas-szybko) var(--krzywa); }
.wilk-tabela tbody tr:hover { background: var(--cyjan-05); }
.wilk-tabela td[data-liczba] { text-align: right; color: var(--tekst-1); font-variant-numeric: tabular-nums; }
.wilk-tabela td[data-kierunek="wzrost"] { color: var(--wzrost); }
.wilk-tabela td[data-kierunek="spadek"] { color: var(--spadek); }

/* ---------- log ---------- */
.wilk-log { display: flex; flex-direction: column; }
/* Kolumny poszerzone pod większy krój — przy 64/46 px „02:05:17" i „UWAGA" się łamały. */
.wilk-log__wiersz { display: grid; grid-template-columns: 80px 58px 1fr; gap: var(--o-4); align-items: start; padding: var(--o-3) var(--o-3) var(--o-3) 0; border-bottom: 1px solid var(--linia-1); }
.wilk-log__wiersz--nowy { animation: wilk-wjazd 420ms var(--krzywa) both; }
.wilk-log__wiersz--nowy-b { animation: wilk-wjazd-b 420ms var(--krzywa) both; }
.wilk-log__czas { font-family: var(--font-mono); font-size: var(--dane-s); color: var(--tekst-5); }
.wilk-log__poziom { font-family: var(--font-mono); font-size: var(--dane-xs); letter-spacing: .06em; }
.wilk-log__tresc { font-family: var(--font-mono); font-size: var(--dane-s); line-height: var(--interlinia-dane); color: var(--tekst-2); white-space: normal; }

/* ---------- nawigacja ---------- */
.wilk-nawigacja { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--o-6) var(--o-10); padding: var(--o-5) var(--o-8); background: var(--szklo-2); backdrop-filter: blur(var(--szklo-blur)); }
.wilk-nawigacja > * { min-width: 0; }
/* UWAGA: tu było `overflow-x: auto` (przewijanie przycisków w poziomie).
   To psuło całe menu: gdy jedna oś ma overflow inny niż visible, druga
   przestaje być visible — więc rozwijane podmenu, pozycjonowane absolutnie
   w środku, było obcinane do wysokości paska i klikanie nie dawało nic.
   Zamiast przewijania pasek po prostu zawija się na kolejny rząd. */
.wilk-nawigacja__grupy { display: flex; flex-wrap: wrap; align-items: stretch; gap: var(--o-2); min-width: 0; }
.wilk-nawigacja__przycisk { flex: none; }

/* Ciasno: pasek zawija się na dwa rzędy (marka + menu / status + zegar).
   Chcesz zamiast tego chować kropki? .wilk-nawigacja [data-kropki] { display: none !important; } */
.wilk-nawigacja__grupa { position: relative; }
.wilk-nawigacja__przycisk {
  display: flex; align-items: center; gap: var(--o-4); padding: var(--o-5) var(--o-8);
  background: transparent; border: 0; cursor: pointer;
  font-size: var(--etykieta-s); letter-spacing: var(--rozstrzelenie-etykieta); text-transform: uppercase; color: var(--tekst-3);
  border-bottom: 1px solid transparent;
  transition: color var(--czas-szybko), background var(--czas-szybko), border-color var(--czas-szybko);
}
.wilk-nawigacja__przycisk:hover { color: var(--tekst-1); background: var(--cyjan-08); }
.wilk-nawigacja__przycisk[aria-expanded="true"],
.wilk-nawigacja__przycisk[data-aktywna="true"] { color: var(--cyjan-500); border-bottom-color: var(--cyjan-500); background: var(--cyjan-08); }
.wilk-nawigacja__podmenu[hidden] { display: none; }
.wilk-nawigacja__podmenu {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 40; min-width: 250px;
  padding: var(--o-4); background: rgba(6,14,22,.96); backdrop-filter: blur(var(--szklo-blur));
  display: flex; flex-direction: column; animation: wilk-fade-up 160ms var(--krzywa) both;
}
.wilk-nawigacja__pozycja {
  display: flex; align-items: center; justify-content: space-between; gap: var(--o-6);
  padding: var(--o-5) var(--o-7); background: transparent; border: 0; cursor: pointer; text-align: left;
  font-family: var(--font-mono); font-size: var(--dane-s); color: var(--tekst-2);
  transition: background var(--czas-szybko), color var(--czas-szybko), padding-left var(--czas-szybko);
}
.wilk-nawigacja__pozycja:hover { background: var(--cyjan-08); color: var(--tekst-1); padding-left: var(--o-7); }
.wilk-nawigacja__pozycja[aria-current="page"] { color: var(--cyjan-500); background: var(--cyjan-05); }

/* ---------- zakładki ---------- */
.wilk-zakladki { display: flex; gap: var(--o-2); border-bottom: 1px solid var(--linia-2); }
.wilk-zakladka {
  padding: var(--o-4) var(--o-6); background: transparent; border: 0; cursor: pointer;
  font-size: var(--etykieta-s); letter-spacing: var(--rozstrzelenie-etykieta); text-transform: uppercase; color: var(--tekst-4);
  border-bottom: 1px solid transparent; margin-bottom: -1px;
  transition: color var(--czas-szybko), border-color var(--czas-szybko);
}
.wilk-zakladka:hover { color: var(--tekst-1); }
.wilk-zakladka[aria-selected="true"] { color: var(--cyjan-500); border-bottom-color: var(--cyjan-500); text-shadow: 0 0 10px rgba(62,232,255,.4); }

/* ---------- konsola komend ---------- */
.wilk-konsola { position: relative; display: flex; align-items: center; gap: var(--o-6); padding: var(--o-5) var(--o-8); background: var(--szklo-2); backdrop-filter: blur(var(--szklo-blur)); }
.wilk-konsola__znak { font-family: var(--font-mono); font-size: var(--dane-l); color: var(--cyjan-500); text-shadow: 0 0 10px rgba(62,232,255,.7); }
.wilk-konsola__kursor { width: 8px; height: 15px; flex: none; background: var(--cyjan-500); box-shadow: 0 0 10px rgba(62,232,255,.8); animation: wilk-kursor 1s steps(1, end) infinite; }
.wilk-konsola__pole { flex: 1; min-width: 0; background: transparent; border: 0; outline: none; font-family: var(--font-mono); font-size: var(--dane-m); letter-spacing: var(--rozstrzelenie-dane); color: var(--tekst-1); }
.wilk-konsola__pole::placeholder { color: var(--tekst-5); }
.wilk-konsola__podpowiedzi { display: flex; flex-wrap: wrap; gap: var(--o-3); }

/* ---------- SSE ---------- */
.wilk-sse { display: inline-flex; align-items: center; gap: var(--o-4); font-family: var(--font-mono); font-size: var(--dane-xs); letter-spacing: .08em; text-transform: uppercase; }
.wilk-sse[data-stan="polaczono"]  { color: var(--cyjan-500); }
.wilk-sse[data-stan="laczenie"]   { color: var(--bursztyn); }
.wilk-sse[data-stan="zerwane"]    { color: var(--czerwien); }
.wilk-sse[data-stan="spi"]        { color: var(--tekst-5); }
.wilk-sse__wiek { color: var(--tekst-4); }
.wilk-sse__wiek[data-nieswieze="true"] { color: var(--bursztyn); }

/* ---------- modal hologram ---------- */
.wilk-modal-tlo { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: var(--o-12); background: rgba(2,5,10,.72); backdrop-filter: blur(3px); }
.wilk-modal { position: relative; width: min(620px, 100%); max-height: 82vh; overflow: auto; padding: var(--o-12) var(--o-16); background: rgba(8,20,30,.85); }
.wilk-modal__ramka { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.wilk-modal__ramka rect { stroke: var(--cyjan-500); stroke-width: 1.5; fill: none; stroke-dasharray: 2400; animation: wilk-krawedz 700ms var(--krzywa) both; filter: drop-shadow(0 0 6px rgba(62,232,255,.7)); }
.wilk-modal__skan { position: absolute; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--cyjan-300), transparent); box-shadow: 0 0 16px rgba(62,232,255,.9); animation: wilk-holo-skan 900ms ease-in-out 650ms both; }
.wilk-modal__tresc { position: relative; animation: wilk-holo-tresc 1300ms var(--krzywa) 700ms both; }

/* ---------- reaktor ---------- */
.wilk-reaktor { position: relative; aspect-ratio: 1; }
.wilk-reaktor__poswiata { position: absolute; inset: -18%; background: radial-gradient(circle, rgba(62,232,255,.28) 0%, rgba(62,232,255,.06) 45%, transparent 70%); animation: wilk-puls-glow 3.4s ease-in-out infinite; }
.wilk-reaktor__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 8px rgba(62,232,255,.55)); }
.wilk-reaktor__pierscien { transform-origin: 100px 100px; }
.wilk-reaktor__pierscien--zewn { animation: wilk-spin var(--obrot-zewn) linear infinite; }
.wilk-reaktor__pierscien--sred { animation: wilk-spin-rev var(--obrot-sred) linear infinite; }
.wilk-reaktor__pierscien--wewn { animation: wilk-spin var(--obrot-wewn) linear infinite; }
.wilk-reaktor__pierscien--rdzen { animation: wilk-spin-rev 12s linear infinite; }
.wilk-reaktor__rdzen { transform-origin: 100px 100px; animation: wilk-puls 2.6s ease-in-out infinite; }
.wilk-reaktor__rdzen--jadro { animation-duration: 1.6s; }

/* ---------- siatki układu ---------- */
.wilk-uklad { display: grid; gap: var(--przerwa-siatki); }
.wilk-uklad--3 { grid-template-columns: minmax(250px, .9fr) minmax(400px, 1.7fr) minmax(280px, 1.05fr); }
.wilk-uklad--2 { grid-template-columns: minmax(320px, 2fr) minmax(280px, 1fr); }
.wilk-uklad--kafelki { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }

/* min-width:0 zostaje — bez tego długi ciąg bez spacji (np. ticker w tabeli)
   rozpycha kolumnę siatki w bok. min-height celowo NIE zerujemy: kolumny mają
   rosnąć do wysokości swojej treści, a nie ciąć jej. */
.wilk-uklad > * { min-width: 0; }

/* Kolumny w jednym wierszu wyrównują się do najwyższej — panele nie „pływają”. */
.wilk-uklad--3 > *, .wilk-uklad--2 > * { align-self: start; }

@media (max-width: 1100px) { .wilk-uklad--3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 900px)  { .wilk-uklad--3, .wilk-uklad--2 { grid-template-columns: 1fr; } }

/* ---------- telefon ----------
   Na 390 px pasek nawigacji zajmował 286 px, czyli jedną trzecią ekranu:
   marka, podtytuł, pięć grup menu, trzy kropki stanu i duży zegar zawijały się
   na cztery rzędy. Na telefonie liczy się treść, nie ozdoby — zostaje marka,
   menu i godzina. Kropki stanu i podtytuł chowamy: to samo mówi zakładka
   Monitoring, a tutaj kradły pół ekranu. */
@media (max-width: 700px) {
  body.wilk-korpus { padding: 8px; gap: 10px; }

  /* Pasek na telefonie układa się w dwa piętra: marka + zegar u góry,
     menu pod spodem. Zegar wychodzi z układu do prawego górnego rogu, więc
     dzieli rząd z marką zamiast zajmować własny — to oszczędza jeden wiersz.
     Wskaźnik strumienia, kropki stanu i podtytuł znikają: to samo mówi
     zakładka Monitoring, a tutaj kradły pół ekranu i nachodziły na menu. */
  .wilk-nawigacja { gap: var(--o-4); padding: var(--o-5); position: relative; padding-right: 84px; }
  .wilk-nawigacja [data-lewa] { display: block !important; width: 100%; }
  .wilk-nawigacja [data-marka] { margin-bottom: var(--o-5); }
  .wilk-nawigacja [data-prawa] { position: absolute; top: var(--o-5); right: var(--o-5); gap: var(--o-4) !important; }
  .wilk-nawigacja [data-kropki],
  .wilk-nawigacja [data-podtytul],
  .wilk-nawigacja .wilk-sse { display: none !important; }
  .wilk-nawigacja__grupy { flex-wrap: wrap; gap: var(--o-2); }
  .wilk-nawigacja__przycisk { padding: var(--o-3) var(--o-5); font-size: var(--etykieta-xs); }
  .wilk-nawigacja__podmenu { min-width: 190px; }
  /* Zegar schodzi z 26 px na rozmiar, który nie konkuruje z danymi. */
  .wilk-nawigacja .wilk-dane[style*="--dane-xl"] { font-size: var(--dane-m) !important; }

  .wilk-panel { padding: var(--o-6); }
  .wilk-uklad { gap: var(--o-6); }
  .wilk-opis { max-width: none; font-size: var(--etykieta-s); padding-left: var(--o-5); }

  /* Wielkie liczby zjeżdżają o stopień, żeby nie łamały się w pół. */
  :root { --dane-hero: 46px; --dane-xxl: 32px; --dane-xl: 22px; }

  /* Klucze alarmów i ścieżki plików to jeden długi wyraz bez spacji —
     bez tego rozpychają stronę na szerokość, choć wyglądają na zwykły tekst. */
  pre, .wilk-dane, .wilk-etykieta, .wilk-opis, .wilk-log__tresc { overflow-wrap: anywhere; }

  .wilk-konsola { padding: var(--o-4) var(--o-5); gap: var(--o-4); }
  .wilk-konsola__podpowiedzi { padding: 0 var(--o-5) var(--o-4) !important; }
  .wilk-modal { padding: var(--o-8) var(--o-6); }
  .wilk-tabela th, .wilk-tabela td { padding: var(--o-4) var(--o-5); }
}