/* Panel Zorna Radar: "terminal finansowy". Ciemny domyslnie, jasny na zyczenie.
 *
 * Zasady niezmienne (warunki brzegowe od pierwszej wersji panelu):
 * - strona NIE przewija sie w poziomie. Szerokie tabele przewijaja sie
 *   wewnatrz wlasnego kontenera .przewijalne, uklad zawija sie flexem.
 * - bez frameworkow, bez CDN, bez zapytan na zewnatrz. Kroje pisma leza
 *   lokalnie w panel/static/fonts (Public Sans i Fira Code, SIL OFL); bez nich
 *   panel dziala na system-ui / ui-monospace.
 * - stan zly jest oznaczony KOLOREM I TEKSTEM. Zaden komunikat nie polega
 *   wylacznie na kolorze, bo kolor gubi sie na sloncu, w trybie oszczedzania
 *   energii i u osob nierozrozniajacych barw. Kazda klasa stanu (.zly, .uwaga)
 *   stoi obok slowa w tresci; CSS tylko powtarza to kolorem.
 * - liczby monospace i wyrownane do prawej (.l), zeby rzedy wielkosci dalo
 *   sie porownac wzrokiem. Czasy w UTC.
 * - ZERO atrybutow style= w szablonach: CSP style-src 'self' blokuje style
 *   inline. Wartosci zalezne od danych ida przez atrybuty prezentacyjne SVG
 *   (width, x, cx, fill="var(--s1)") albo przez klasy stanu (.dobry, .r3).
 *   Jedyny wyjatek to CSSOM w panel.js (el.style.left dla crosshaira), ktorego
 *   CSP nie blokuje.
 * - CSS NIE nadpisuje kolorow elementow SVG z panel/wykresy.py: tamte elementy
 *   niosa fill/stroke w atrybutach, a regula CSS z fill/stroke wygrywa z
 *   atrybutem prezentacyjnym i po cichu zmienilaby kolor (np. kreske progu
 *   --tekst na --zly). Dla wykresow CSS ustawia tylko uklad, pismo, stany
 *   hover / ukryty i to, czego wykresy.py nie ustawia (obrys tla paska).
 *
 * Co zmienil redesign "terminal finansowy" (handoff design_handoff_panel_redesign):
 * - jeden zestaw tokenow (--tlo --panel --wyp --linia --linia2 --tekst --cichy
 *   --slaby --akcent --dobry --zly --uwaga --s1..--s4 --suma --cien) z motywem
 *   ciemnym w :root i jasnym pod body[data-motyw="jasny"] oraz, bez JS, pod
 *   prefers-color-scheme: light.
 * - uklad na flex-wrap zamiast media query na uklad: nav.boczny flex:1 1 200px,
 *   main.strona flex:9999 1 640px, wiec ponizej ~860 px nawigacja sama
 *   przechodzi nad tresc. Tabele-karty (data-etykieta) zniknely: na waskim
 *   ekranie tabela przewija sie w .przewijalne, tak jak na makietach.
 * - ostre krawedzie: promien 0 na sekcjach, kafelkach, paskach; 1-2 px tylko
 *   na przyciskach i stemplach; 50 % tylko na kropkach wykresow. Cien tylko na
 *   tooltipie i karcie logowania.
 * - kolory serii sa stale per portfel na kazdym ekranie: ema_trend=--s1,
 *   donchian_breakout=--s2, momentum_1d=--s3, rsi_reversion=--s4, suma=--suma.
 * - wykresy to SVG z serwera (panel/wykresy.py) stylizowane tutaj po klasach
 *   (sekcja "wykresy"); interakcje (tooltip, chipy serii, pole szczegolu,
 *   przelacznik motywu) sa w panel.js i bez JS nic nie przestaje dzialac.
 */

/* --- slownik klas i makr (skrot dawnego SLOWNIK.md; makra w makra.html) -----
 *
 * Kazdy ekran: {% extends "baza.html" %}, {% import "makra.html" as m %},
 * bloki tytul / naglowek (m.naglowek_strony) / tresc, opcjonalnie stopka.
 * Kazda sekcja danych za {% if sekcja.ok %} ... {% else %}{{ m.brak(sekcja, 'co') }}.
 *
 * Makra: brak(sekcja, co) | kwota(v, miejsc, jednostka) | kafelek(etykieta,
 *   wartosc, pod, stan, slowo, drobne) | bez_dorobku(transakcje) |
 *   naglowek_strony(numer, tytul, stemple, kicker) | stempel(tekst, klasa) |
 *   pasek_komunikatu(klasa, etykieta, tresc) | sekcja_naglowek(tytul, opis, klasa) |
 *   segmenty(opcje, wybrana, parametr, klasa) | chip_serii(nazwa, etykieta, klasa,
 *   wynik) | probka(klasa) | pole_szczegolu(tekst, klasa) | legenda(pozycje, klasa) |
 *   nazwa_portfela(nazwa, klasa, interwal). Filtry: liczba, kwota, czas, wiek.
 *   Globalne: wykresy, KOLOR_PORTFELA, NUMERY_EKRANOW, ZAKRESY_KRZYWEJ,
 *   METRYKI_BACKTESTU, GRUPY_PSI, KONFIGURACJA_RADARA, teraz, zalogowany.
 *
 * Powloka (baza.html): .powloka, nav.boczny (.marka .dioda .zorna .radar
 *   .podmarka .stan; .menu a .numer .aktywna; .stopka-panelu .zegar .motyw
 *   button[data-motyw-przelacz] .wyloguj), main.strona, footer.stopka.
 * Naglowek strony: .naglowek-strony .kicker h1 .stemple; .stempel + klasy
 *   uwaga / neutralny / zly / dobry / akcent i modyfikatory goly / maly /
 *   wypelniony / duzy.
 * Kafelki: .kafelki (.ciasne / .szerokie) > .kafelek > .etykieta, .wartosc
 *   (.dobry/.zly/.uwaga/.akcent/.cichy, .drobne), .pod.
 * Sekcje: section.sekcja (w .rzad: .glowna 2/460, .boczna 1/300, .trzy-piate,
 *   .dwie-piate, .polowa-waska; .pionowa z .podsekcja), .sekcja-naglowek
 *   (.ciasny .luzny .bez-odstepu .srodek .gora) .sekcja-tytul .sekcja-opis,
 *   .przypis, .wyjasnienie, .opis, .legenda, .legenda-lista, .liczba-rzad
 *   .liczba-glowna (.srednia .ogromna) .jednostka .zmiana .liczba-podpis,
 *   pre.linie, ul.lista(.problemy).
 * Komunikaty: .pasek-komunikatu.zly/.uwaga/.dobry/.akcent (.maly) > .etykieta
 *   .tresc; .komunikaty; .rzad-komunikatow; details.zastrzezenie (.szeroka
 *   .ciasna; napis "rozwin" dorysowuje CSS).
 * Tabele: KAZDA <table> w div.przewijalne (.ograniczone = max 300 px);
 *   table.zwarta / .lista / .wskazywalna; td.l (mono, do prawej), .mono, .data,
 *   .mocny, th.szeroka, th.srednia, .pod-komorka, .interwal, tr.wskazany.
 * Przelaczniki: .segmenty a / .aktywny (.duze z .probka i .dodatek);
 *   .chipy .chip[data-seria] .wynik .ukryty; .pole-szczegolu (.plaskie .niskie).
 * Wykresy (panel/wykresy.py niesie kolory w atrybutach, CSS daje uklad, pismo,
 *   hover): .wykres-equity-uklad (svg.os-y, .wykres-plotno > svg.wykres-equity
 *   [data-punkty][data-wykres] + svg.znaczniki + .wykres-tooltip, .os-x),
 *   .wykres-obsuniecie-uklad > svg.wykres-obsuniecie, svg.iskra, svg.pasek
 *   (.pasek-zakresu, .oos; rect.tlo .wypelnienie line.prog .prog2), svg.udzialy
 *   (rect.czesc[data-szczegol]), svg.drabinka, .histogram-uklad > svg.histogram
 *   (rect.kosz), svg.slupki (rect.slupek), div.dumbbell > .wiersz,
 *   svg.kalibracja w .kalibracja-obudowa, table.mapa (td.komorka.r0..r7
 *   .uwaga .zly .brak), .os-sygnalow > .tor (circle.punkt[data-sygnal]),
 *   .uruchomienia > .tor (rect.kreska.ok/.blad, rect.przerwa), svg.os-log,
 *   svg.wykres-brak. Paski z etykieta: .paski > div > .pasek-etykieta (.lewo
 *   .prawo) + svg.pasek; .pasek-skala; .wiersz-paska (.psi .przerwa .is-oos).
 *   Reczne SVG w szablonach: svg.rozrzut, span.nie-zmierzono,
 *   svg.pasek-dwustronny, line.linia-siatki / .linia-zera / .linia-odniesienia.
 * Interakcje (panel.js): body[data-motyw], [data-motyw-przelacz],
 *   svg[data-punkty] (tooltip, crosshair, grupa data-wykres), .chip[data-seria],
 *   [data-szczegol] -> najblizsze [data-pole-szczegolu], data-szczegol-id /
 *   data-sygnal -> wspolne .wskazany.
 * Logowanie: .logowanie .logowanie-gora .logowanie-srodek form.logowanie-karta
 *   .stopka-karty footer.logowanie-stopka. Blad: .sekcja.blad-karta .kod.
 */

/* --- kroje pisma (lokalne, zmienne, z podzialem na zakresy znakow) -------- */

@font-face {
  font-family: 'Fira Code';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(fonts/fira-code-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Fira Code';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(fonts/fira-code-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/public-sans-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/public-sans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- tokeny: motyw ciemny (domyslny) --------------------------------------
 * Semantyka koloru: akcent (magenta) = "tu jestes", interakcja, ocena AI;
 * mieta = dobry / zysk / OK; koral = zly / strata / problem; zolty =
 * zastrzezenie / blisko limitu / pominiety. Trojka semantyczna jest
 * oddzielona od akcentu celowo: akcent nigdy nie znaczy "tak trzymac". */

:root {
  --tlo: #0F1210;
  --panel: #151916;
  --wyp: #1C211D;
  --linia: #272D29;
  --linia2: #374039;
  --tekst: #EEF1EE;
  --cichy: #9AA39C;
  --slaby: #6B736D;
  --akcent: #E640A0;
  --akcent-tlo: rgba(230, 64, 160, .14);
  --dobry: #3CDCAA;
  --dobry-tlo: rgba(60, 220, 170, .14);
  --zly: #FF826E;
  --zly-tlo: rgba(255, 130, 110, .14);
  --uwaga: #F2C94C;
  --uwaga-tlo: rgba(242, 201, 76, .14);
  --s1: #5FC8F0;
  --s2: #B48CF0;
  --s3: #C6E06B;
  --s4: #8A948C;
  --suma: #EEF1EE;
  --cien: rgba(0, 0, 0, .55);

  --pismo: 'Public Sans', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --pismo-mono: 'Fira Code', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* Motyw jasny: przelacznik w panel.js ustawia body[data-motyw]. Bez JS (albo
 * bez zapisanego wyboru) honorujemy ustawienie systemu. Obie reguly musza byc
 * identyczne, dlatego stoja obok siebie. */
body[data-motyw="jasny"] {
  color-scheme: light;
  --tlo: #EEF2EF;
  --panel: #FBFCFB;
  --wyp: #F1F4F1;
  --linia: #D7DDD8;
  --linia2: #B9C1BB;
  --tekst: #141815;
  --cichy: #5C665F;
  --slaby: #8A948C;
  --akcent: #C41D7F;
  --akcent-tlo: rgba(196, 29, 127, .12);
  --dobry: #0B8F68;
  --dobry-tlo: rgba(11, 143, 104, .12);
  --zly: #C8452D;
  --zly-tlo: rgba(200, 69, 45, .12);
  --uwaga: #A97A0A;
  --uwaga-tlo: rgba(169, 122, 10, .12);
  --s1: #0E86B8;
  --s2: #7A4BD6;
  --s3: #5F8A0C;
  --s4: #7C867E;
  --suma: #141815;
  --cien: rgba(20, 24, 21, .18);
}

@media (prefers-color-scheme: light) {
  body:not([data-motyw="ciemny"]) {
    color-scheme: light;
    --tlo: #EEF2EF;
    --panel: #FBFCFB;
    --wyp: #F1F4F1;
    --linia: #D7DDD8;
    --linia2: #B9C1BB;
    --tekst: #141815;
    --cichy: #5C665F;
    --slaby: #8A948C;
    --akcent: #C41D7F;
    --akcent-tlo: rgba(196, 29, 127, .12);
    --dobry: #0B8F68;
    --dobry-tlo: rgba(11, 143, 104, .12);
    --zly: #C8452D;
    --zly-tlo: rgba(200, 69, 45, .12);
    --uwaga: #A97A0A;
    --uwaga-tlo: rgba(169, 122, 10, .12);
    --s1: #0E86B8;
    --s2: #7A4BD6;
    --s3: #5F8A0C;
    --s4: #7C867E;
    --suma: #141815;
    --cien: rgba(20, 24, 21, .18);
  }
}

/* --- podstawa ------------------------------------------------------------- */

* { box-sizing: border-box; }

html {
  background: var(--tlo);
  /* Zapora na poziome przewijanie calej strony. Cokolwiek szerokiego wjedzie
   * w tresc, ma sie przewijac we wlasnym kontenerze. */
  overflow-x: hidden;
}

body {
  margin: 0;
  background: var(--tlo);
  color: var(--tekst);
  font-family: var(--pismo);
  font-size: 13px;
  line-height: 1.5;
  color-scheme: dark;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--akcent); }
a:hover { color: var(--tekst); }
::selection { background: var(--akcent-tlo); }
:focus-visible { outline: 2px solid var(--akcent); outline-offset: 2px; }

code, kbd, pre { font-family: var(--pismo-mono); }
strong, b { font-weight: 600; }
summary { list-style: none; }
summary::-webkit-details-marker { display: none; }
button { font-family: inherit; }

/* Pomocnicze klasy pisma i stanow. Klasa stanu tylko powtarza kolorem slowo,
 * ktore stoi w tresci. */
.mono { font-family: var(--pismo-mono); font-variant-numeric: tabular-nums; }
.dobry { color: var(--dobry); }
.zly { color: var(--zly); }
.uwaga { color: var(--uwaga); }
.akcent { color: var(--akcent); }
.cichy { color: var(--cichy); }
.slaby { color: var(--slaby); }
.tekst { color: var(--tekst); }
.mocny { font-weight: 600; }

/* Kolory serii: stale per portfel. Elementy SVG dostaja je przez
 * fill="var(--s1)"; elementy HTML (probki, chipy, nazwy) przez te klasy. */
.s1 { color: var(--s1); }
.s2 { color: var(--s2); }
.s3 { color: var(--s3); }
.s4 { color: var(--s4); }
.suma { color: var(--suma); }

/* Probka koloru: kwadrat 8 px w kolorze currentColor, wiec .probka.s1 albo
 * .probka.dobry wystarcza (.kwadrat to ta sama rzecz emitowana przez
 * wykresy.py). Warianty: .kolko (10 px, okragla), .pusta (sama ramka),
 * .duza (10 px), .kreska (3x12, jak kreska uruchomienia), .przerwa (ramka
 * dashed jak przerwa miedzy krokami). */
.probka, .kwadrat {
  display: inline-block;
  width: 8px;
  height: 8px;
  background: currentColor;
  flex: none;
  vertical-align: middle;
}
.probka.duza { width: 10px; height: 10px; }
.probka.kolko { width: 10px; height: 10px; border-radius: 50%; }
.probka.pusta { background: transparent; border: 2px solid currentColor; }
.probka.obwodka { outline: 2px solid var(--akcent); outline-offset: 1px; }
.probka.obwodka.zla { outline-style: dashed; outline-color: var(--zly); }
.probka.kreska { width: 3px; height: 12px; }
.probka.przerwa { width: 14px; height: 6px; background: transparent; border: 1px dashed var(--uwaga); }
.probka.tlo-dobry { background: var(--dobry-tlo); }
.probka.tlo-uwaga { background: var(--uwaga-tlo); }
.probka.tlo-zly { background: var(--zly-tlo); }
.probka.linia2 { background: var(--linia2); }

/* --- powloka: nawigacja plus tresc ----------------------------------------
 * Bez media query na uklad: flex-wrap robi robote. Nawigacja ma minimum
 * 200 px i wage 1, tresc minimum 640 px i wage 9999, wiec dopoki obie sie
 * mieszcza, nawigacja zostaje waska po lewej; ponizej ~860 px tresc spada do
 * nowego wiersza i nawigacja rozciaga sie nad nia. */

.powloka {
  display: flex;
  flex-wrap: wrap;
  min-height: 100vh;
  background: var(--tlo);
}

nav.boczny {
  flex: 1 1 200px;
  min-width: 0;
  position: sticky;
  top: 0;
  align-self: flex-start;
  max-height: 100vh;
  overflow: auto;
  background: var(--tlo);
  border-bottom: 1px solid var(--linia);
  padding: 18px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Marka: dioda powtarza stan kontroli zdrowia. Powtarza, nie zastepuje: obok
 * stoi slowo (OK / PROBLEM), a pelny opis jest na Przegladzie i w Zdrowiu. */
a.marka {
  display: block;
  padding: 0 8px;
  text-decoration: none;
  color: var(--tekst);
  min-width: 0;
}
.marka .wiersz {
  display: flex;
  align-items: center;
  gap: 9px;
  white-space: nowrap;
}
.dioda {
  width: 9px;
  height: 9px;
  background: var(--dobry);
  box-shadow: 0 0 10px var(--dobry);
  flex: none;
}
.dioda.zly { background: var(--zly); box-shadow: 0 0 10px var(--zly); }
.dioda.neutralna { background: var(--slaby); box-shadow: none; }
.dioda.akcent { background: var(--akcent); box-shadow: 0 0 10px var(--akcent); }
.marka .zorna { font-size: 14px; font-weight: 700; letter-spacing: .12em; }
.marka .radar { font-size: 14px; font-weight: 400; letter-spacing: .12em; color: var(--cichy); }
.podmarka {
  display: block;
  margin-top: 4px;
  font-family: var(--pismo-mono);
  font-size: 9.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--slaby);
}
.podmarka .stan { color: var(--dobry); }
.podmarka .stan.zly { color: var(--zly); }
.podmarka .stan.neutralna { color: var(--cichy); }

.menu {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
}
.menu a {
  flex: 1 1 140px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-left: 2px solid transparent;
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  color: var(--cichy);
  white-space: nowrap;
}
.menu a:hover { color: var(--tekst); background: var(--wyp); }
.menu a.aktywna {
  border-left-color: var(--akcent);
  background: var(--wyp);
  color: var(--tekst);
  font-weight: 600;
}
.menu .numer {
  font-family: var(--pismo-mono);
  font-size: 10.5px;
  color: var(--slaby);
}

.stopka-panelu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 12px 8px 0;
  border-top: 1px solid var(--linia);
}
.zegar {
  flex: 1 1 120px;
  font-family: var(--pismo-mono);
  font-size: 10.5px;
  color: var(--slaby);
  line-height: 1.5;
  text-transform: uppercase;
}
.zegar b { display: block; font-weight: 400; color: var(--cichy); text-transform: none; }

/* Przelacznik motywu: dwa przyciski w jednej ramce. Ktory jest aktywny, mowi
 * CSS na podstawie body[data-motyw] (albo ustawienia systemu, gdy atrybutu
 * nie ma), wiec bez JS przelacznik i tak pokazuje prawde. */
.motyw {
  flex: 0 0 auto;
  display: flex;
  gap: 2px;
  border: 1px solid var(--linia2);
  padding: 2px;
  border-radius: 2px;
}
.motyw button {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  border: 0;
  border-radius: 1px;
  background: transparent;
  color: var(--cichy);
  font: 600 10.5px/1.4 var(--pismo-mono);
  letter-spacing: .08em;
  cursor: pointer;
}
.motyw button:hover { color: var(--tekst); }
.motyw button[data-motyw-przelacz="ciemny"],
body[data-motyw="jasny"] .motyw button[data-motyw-przelacz="jasny"] {
  background: var(--tekst);
  color: var(--tlo);
}
body[data-motyw="jasny"] .motyw button[data-motyw-przelacz="ciemny"] {
  background: transparent;
  color: var(--cichy);
}
@media (prefers-color-scheme: light) {
  body:not([data-motyw]) .motyw button[data-motyw-przelacz="ciemny"] {
    background: transparent;
    color: var(--cichy);
  }
  body:not([data-motyw]) .motyw button[data-motyw-przelacz="jasny"] {
    background: var(--tekst);
    color: var(--tlo);
  }
}

.wyloguj { margin: 0; flex: 0 0 auto; }
.wyloguj button,
.przycisk-cichy {
  padding: 6px 10px;
  border: 1px solid var(--linia2);
  border-radius: 2px;
  background: transparent;
  color: var(--cichy);
  font: 500 10.5px/1.4 var(--pismo-mono);
  letter-spacing: .08em;
  text-decoration: none;
  cursor: pointer;
}
.wyloguj button:hover,
.przycisk-cichy:hover { color: var(--tekst); border-color: var(--tekst); }

/* --- tresc ---------------------------------------------------------------- */

main.strona {
  flex: 9999 1 640px;
  min-width: 0;
  border-left: 1px solid var(--linia);
  padding: 22px 28px 40px;
  max-width: 1320px;
}

.naglowek-strony {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
/* Blok tytulu moze sie kurczyc, a kicker zawijac: dlugi kicker (Backtest ma
 * w nim trzy daty) spychal inaczej stemple pod tytul, mimo ze na szerokim
 * ekranie bylo dla nich miejsce. */
.naglowek-strony > div:first-child { flex: 1 1 320px; min-width: 0; }
.naglowek-strony > .stemple { flex: 0 1 auto; }
.kicker-czlon { white-space: nowrap; }
.kicker {
  font-family: var(--pismo-mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  color: var(--slaby);
  text-transform: uppercase;
}
.naglowek-strony h1 {
  margin: 2px 0 0;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.1;
}
.stemple {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}

/* Stempel: krotka etykieta mono w ramce. Kolor ramki = klasa stanu; .goly
 * to sam tekst bez ramki (np. "20/20 SWIEZE" w naglowku sekcji), .maly to
 * wersja do komorki tabeli, .wypelniony dodaje tlo (naglowek Zdrowia). */
.stempel {
  display: inline-block;
  font-family: var(--pismo-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .08em;
  padding: 4px 8px;
  border: 1px solid var(--linia2);
  color: var(--cichy);
  border-radius: 2px;
  white-space: nowrap;
  line-height: 1.4;
}
.stempel.neutralny { border-color: var(--linia2); color: var(--cichy); }
.stempel.uwaga { border-color: var(--uwaga); color: var(--uwaga); }
.stempel.zly { border-color: var(--zly); color: var(--zly); }
.stempel.dobry { border-color: var(--dobry); color: var(--dobry); }
.stempel.akcent { border-color: var(--akcent); color: var(--akcent); }
.stempel.wypelniony.zly { background: var(--zly-tlo); }
.stempel.wypelniony.uwaga { background: var(--uwaga-tlo); }
.stempel.wypelniony.dobry { background: var(--dobry-tlo); }
.stempel.wypelniony.akcent { background: var(--akcent-tlo); }
.stempel.duzy { font-size: 12px; padding: 6px 10px; }
.stempel.maly { padding: 2px 6px; letter-spacing: .04em; }
.stempel.goly { border: 0; padding: 0; letter-spacing: .06em; border-radius: 0; }

/* --- kafelki liczbowe ----------------------------------------------------- */

.kafelki {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  background: var(--linia);
  border: 1px solid var(--linia);
  margin-bottom: 14px;
}
.kafelek {
  flex: 1 1 150px;
  min-width: 0;
  background: var(--panel);
  padding: 12px 14px;
}
.kafelki.ciasne .kafelek { flex-basis: 130px; }
.kafelki.szerokie .kafelek { flex-basis: 160px; }
.kafelek .etykieta {
  display: block;
  font-family: var(--pismo-mono);
  font-size: 10px;
  letter-spacing: .1em;
  color: var(--slaby);
  text-transform: uppercase;
}
.kafelek .wartosc {
  display: block;
  font-family: var(--pismo-mono);
  font-size: 24px;
  font-weight: 600;
  margin-top: 4px;
  letter-spacing: -.01em;
  line-height: 1.2;
  /* break-word, a NIE break-all: znacznik czasu ma sie lamac na spacji, nie
   * w srodku liczby. */
  overflow-wrap: break-word;
}
.kafelki.ciasne .kafelek .wartosc { font-size: 22px; }
.kafelek .wartosc .drobne { font-size: 14px; color: var(--cichy); font-weight: 600; }
/* Kolor wartosci tylko wtedy, gdy podpis niesie slowo ("w normie", "nie bije",
 * "PROBLEMY: 1"). Makro kafelek doklada to slowo automatycznie. */
.kafelek .wartosc.dobry { color: var(--dobry); }
.kafelek .wartosc.zly { color: var(--zly); }
.kafelek .wartosc.uwaga { color: var(--uwaga); }
.kafelek .wartosc.akcent { color: var(--akcent); }
.kafelek .wartosc.cichy { color: var(--cichy); }
.kafelek .pod {
  display: block;
  font-size: 11px;
  color: var(--cichy);
  margin-top: 2px;
}

/* --- sekcje --------------------------------------------------------------- */

.sekcja {
  background: var(--panel);
  border: 1px solid var(--linia);
  padding: 16px 18px;
  margin-bottom: 14px;
  min-width: 0;
}
.sekcja-naglowek {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.sekcja-naglowek.srodek { align-items: center; }
.sekcja-naglowek.ciasny { margin-bottom: 4px; }
.sekcja-naglowek.luzny { margin-bottom: 10px; }
.sekcja-naglowek.bez-odstepu { margin-bottom: 0; }
.sekcja-tytul {
  font-family: var(--pismo-mono);
  font-size: 10px;
  letter-spacing: .1em;
  color: var(--slaby);
  text-transform: uppercase;
  margin: 0;
  font-weight: 400;
}
.sekcja-opis {
  font-family: var(--pismo-mono);
  font-size: 10.5px;
  color: var(--cichy);
}
.sekcja-opis a { text-decoration: none; letter-spacing: .06em; }

/* Podsekcja: kolejny blok w tej samej sekcji, oddzielony linia. */
.podsekcja {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--linia);
}
.podsekcja > .sekcja-tytul { margin-bottom: 8px; }

/* Rzad sekcji obok siebie. Kazda sekcja ma flex z minimum, wiec na waskim
 * ekranie same ukladaja sie w pion. Warianty szerokosci wg makiet. */
.rzad {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 14px;
  align-items: stretch;
}
.rzad > .sekcja { flex: 1 1 380px; margin-bottom: 0; }
.rzad > .sekcja.glowna { flex: 2 1 460px; }
.rzad > .sekcja.boczna { flex: 1 1 300px; }
.rzad > .sekcja.trzy-piate { flex: 3 1 420px; }
.rzad > .sekcja.dwie-piate { flex: 2 1 300px; }
.rzad > .sekcja.polowa-waska { flex: 1 1 340px; }
.sekcja.pionowa { display: flex; flex-direction: column; gap: 18px; }
.sekcja.pionowa > .podsekcja { margin-top: 0; padding-top: 14px; }

/* Teksty pomocnicze pod wykresami i tabelami. */
.przypis {
  font-size: 11px;
  color: var(--slaby);
  margin-top: 8px;
  line-height: 1.5;
}
.przypis strong { color: var(--cichy); }
.przypis strong.uwaga { color: var(--uwaga); }
.wyjasnienie {
  font-size: 11.5px;
  color: var(--cichy);
  margin-top: 12px;
  line-height: 1.55;
}
.wyjasnienie.szerokie { font-size: 12px; max-width: 60ch; }
p.opis, .opis { font-size: 12.5px; color: var(--cichy); margin: 8px 0 0; line-height: 1.55; }

/* Legenda: rzad pozycji "probka + slowo". */
.legenda {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  font-family: var(--pismo-mono);
  font-size: 10.5px;
  color: var(--cichy);
}
.legenda > span,
.legenda-poz {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.legenda.gora { margin-top: 10px; }

/* Lista legendy z licznikami (statusy silnika, ocena AI). */
.legenda-lista { display: flex; flex-direction: column; gap: 4px; }
.legenda-lista > div {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--pismo-mono);
  font-size: 11px;
}
.legenda-lista .nazwa { flex: 1; }
.legenda-lista .znaczenie { color: var(--cichy); }
.legenda-lista .ile { font-weight: 600; min-width: 2ch; text-align: right; }

/* --- komunikaty: sedno tego panelu ---------------------------------------- */

/* Pasek komunikatu: etykieta mono po lewej, zdanie po prawej, kolor ramki =
 * waga. Czerwony = problem, zolty = zastrzezenie, zielony = w normie. */
.pasek-komunikatu {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 10px 14px;
  border: 1px solid var(--linia2);
  border-left: 3px solid var(--linia2);
  background: var(--wyp);
  margin-bottom: 14px;
  font-size: 12.5px;
  line-height: 1.5;
  min-width: 0;
}
.pasek-komunikatu > .etykieta {
  font-family: var(--pismo-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .08em;
  white-space: nowrap;
  padding-top: 2px;
  color: var(--cichy);
  flex: none;
}
.pasek-komunikatu > .tresc { min-width: 0; overflow-wrap: break-word; }
/* Komenda do przepisania (np. "python narzedzia/kolejnosc_par.py") nie ma
 * spacji, w ktorej moglaby sie zlamac; na telefonie wystawala poza pasek i
 * przewijala cala strone w poziomie. */
.pasek-komunikatu code { overflow-wrap: anywhere; }
.pasek-komunikatu.zly { border-color: var(--zly); background: var(--zly-tlo); }
.pasek-komunikatu.zly > .etykieta { color: var(--zly); }
.pasek-komunikatu.uwaga { border-color: var(--uwaga); background: var(--uwaga-tlo); }
.pasek-komunikatu.uwaga > .etykieta { color: var(--uwaga); }
.pasek-komunikatu.dobry { border-color: var(--dobry); background: var(--dobry-tlo); }
.pasek-komunikatu.dobry > .etykieta { color: var(--dobry); }
.pasek-komunikatu.akcent { border-color: var(--akcent); background: var(--akcent-tlo); }
.pasek-komunikatu.akcent > .etykieta { color: var(--akcent); }
.pasek-komunikatu.maly { padding: 8px 12px; font-size: 12px; }
.pasek-komunikatu strong { color: var(--tekst); }

/* Kilka komunikatow razem: w pionie (lista zastrzezen pod tabela) albo obok
 * siebie (dwa czerwone paski Backtestu). */
.komunikaty { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.komunikaty > .pasek-komunikatu { margin-bottom: 0; }
.rzad-komunikatow { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.rzad-komunikatow > .pasek-komunikatu { flex: 1 1 300px; margin-bottom: 0; }

/* Zastrzezenie skladane: stoi na KAZDEJ podstronie, wiec stale rozwiniete
 * przestawaloby byc czytane. Zdanie kluczowe widac zawsze, chowa sie tylko
 * uzasadnienie. */
details.zastrzezenie {
  border: 1px solid var(--linia);
  margin-bottom: 14px;
  font-size: 12.5px;
}
details.zastrzezenie > summary {
  cursor: pointer;
  padding: 9px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  color: var(--uwaga);
  font-family: var(--pismo-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
}
details.zastrzezenie > summary::after {
  content: "rozwi\0144 \25BE";
  font-weight: 400;
  color: var(--slaby);
  margin-left: auto;
  letter-spacing: 0;
}
details.zastrzezenie[open] > summary::after { content: "zwi\0144 \25B4"; }
details.zastrzezenie > div {
  padding: 0 14px 12px;
  color: var(--cichy);
  line-height: 1.55;
  max-width: 72ch;
}
details.zastrzezenie > div strong { color: var(--tekst); }
details.zastrzezenie.szeroka > div { max-width: 80ch; }
details.zastrzezenie.ciasna { margin-bottom: 10px; }

/* --- tabele --------------------------------------------------------------- */

/* Kontener przewijany: na waskim ekranie tabela przesuwa sie w poziomie
 * wewnatrz sekcji, strona nie. overflow-y hidden, zeby pasek przewijania
 * nie pojawial sie w pionie przez zaokraglenia wysokosci. */
.przewijalne {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 2px;
}
.przewijalne.ograniczone { max-height: 300px; overflow-y: auto; }

table {
  border-collapse: collapse;
  width: 100%;
  font-size: 12.5px;
  white-space: nowrap;
}
th {
  text-align: left;
  padding: 6px 10px;
  border-bottom: 1px solid var(--linia2);
  font-family: var(--pismo-mono);
  font-size: 10px;
  letter-spacing: .08em;
  color: var(--slaby);
  font-weight: 500;
  text-transform: uppercase;
}
td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--linia);
  vertical-align: middle;
}
th:first-child, td:first-child { padding-left: 0; }
th:last-child, td:last-child { padding-right: 0; }
tbody td:first-child { font-weight: 600; }
td.l, th.l {
  text-align: right;
  font-family: var(--pismo-mono);
  font-variant-numeric: tabular-nums;
}
td.mono, th.mono { font-family: var(--pismo-mono); }
td.data { font-family: var(--pismo-mono); font-size: 11.5px; color: var(--cichy); }
td.mocny, .mocny { font-weight: 600; }
th.szeroka, td.szeroka { min-width: 220px; }
th.srednia, td.srednia { min-width: 120px; }
table.zwarta { font-size: 12px; }
table.zwarta th { padding: 5px 8px; }
table.zwarta td { padding: 7px 8px; }
table.zwarta th:first-child, table.zwarta td:first-child { padding-left: 0; }
table.zwarta th:last-child, table.zwarta td:last-child { padding-right: 0; }
table.lista td { padding: 5px 8px; }
table.lista td:first-child { padding-left: 0; }
table.lista td:last-child { padding-right: 0; }
/* Wiersz wskazywany (Sygnaly: lista synchronizuje sie z osia czasu). */
table.wskazywalna tbody tr:hover,
table.wskazywalna tbody tr.wskazany { background: var(--wyp); outline: none; }

/* Nazwa portfela w komorce: probka koloru + nazwa + interwal. */
.nazwa-portfela {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.interwal {
  font-family: var(--pismo-mono);
  font-size: 10.5px;
  color: var(--slaby);
  font-weight: 400;
}
.pod-komorka {
  display: block;
  font-family: var(--pismo-mono);
  font-size: 10.5px;
  font-weight: 400;
  color: var(--slaby);
}
td .pod-komorka.tekst { color: inherit; }

/* --- segmentowane przelaczniki (linki z parametrem URL) ------------------- */

.segmenty {
  display: inline-flex;
  gap: 2px;
  border: 1px solid var(--linia2);
  padding: 2px;
  border-radius: 2px;
  flex-wrap: wrap;
  align-self: flex-start;
}
.segmenty a,
.segmenty button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  border: 0;
  border-radius: 1px;
  background: transparent;
  color: var(--cichy);
  font: 600 10.5px/1.4 var(--pismo-mono);
  letter-spacing: .06em;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}
.segmenty a:hover,
.segmenty button:hover { color: var(--tekst); }
.segmenty .aktywny,
.segmenty .aktywny:hover { background: var(--tekst); color: var(--tlo); }
.segmenty.duze a,
.segmenty.duze button { padding: 6px 12px; font-size: 11px; letter-spacing: .04em; }
.segmenty .dodatek { font-weight: 400; opacity: .7; }

/* --- chipy serii (ukryj / pokaz serie na wykresie equity) ----------------- */

.chipy {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 14px 0 10px;
  align-items: center;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 10px 4px 8px;
  border: 1px solid var(--linia2);
  border-radius: 2px;
  background: transparent;
  color: var(--tekst);
  font: 500 11px/1.4 var(--pismo-mono);
  cursor: pointer;
}
.chip:hover { border-color: var(--tekst); }
.chip .wynik { color: var(--cichy); }
.chip.ukryty { opacity: .45; border-style: dashed; }
.chipy .jednostka {
  margin-left: auto;
  align-self: center;
  font-family: var(--pismo-mono);
  font-size: 10.5px;
  color: var(--slaby);
}

/* --- duze liczby (equity, ryzyko, filtr AI, zamkniete transakcje) --------- */

.liczba-rzad {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 2px;
}
.liczba-glowna {
  font-family: var(--pismo-mono);
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.1;
}
.liczba-glowna.srednia { font-size: 26px; }
.liczba-glowna.ogromna { font-size: 44px; line-height: 1; margin: 10px 0 6px; }
.liczba-rzad .jednostka { font-family: var(--pismo-mono); font-size: 13px; color: var(--cichy); }
.liczba-rzad .zmiana { font-family: var(--pismo-mono); font-size: 14px; font-weight: 600; }
.liczba-rzad .podpis-mono { font-family: var(--pismo-mono); font-size: 12px; color: var(--cichy); }
.liczba-podpis { font-size: 11.5px; color: var(--cichy); margin-top: 4px; }

/* --- pole szczegolu (zdanie pod wykresem po najechaniu) ------------------- */

.pole-szczegolu {
  margin-top: 12px;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--linia);
  background: var(--tlo);
  font-family: var(--pismo-mono);
  font-size: 11px;
  line-height: 1.6;
  color: var(--cichy);
}
.pole-szczegolu.plaskie {
  border: 0;
  padding: 0;
  background: transparent;
  min-height: 20px;
  margin-top: 10px;
}
.pole-szczegolu.niskie { min-height: 16px; margin-top: 6px; }

/* Elementy wskazywane (punkt osi, kreska, komorka, kosz) po najechaniu albo
 * po synchronizacji z JS dostaja obrys. */
.wskazany { outline: 1px solid var(--tekst); }

/* --- pre z liniami ryzyka (te same zdania ida na Telegram) ---------------- */

pre.linie {
  margin: 0;
  padding: 12px 14px;
  background: var(--tlo);
  border: 1px solid var(--linia);
  font-family: var(--pismo-mono);
  font-size: 11.5px;
  line-height: 1.65;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--cichy);
}

ul.lista { margin: 8px 0 0; padding-left: 18px; font-size: 12.5px; }
ul.lista li { margin: 4px 0; }
ul.lista.problemy li { color: var(--zly); }

/* --- stopka strony -------------------------------------------------------- */

footer.stopka {
  padding-top: 12px;
  border-top: 1px solid var(--linia);
  font-size: 11px;
  color: var(--slaby);
  line-height: 1.6;
  max-width: 90ch;
}

/* --- wykresy: uklad wspolny -------------------------------------------------
 * wykresy.equity / equity_portfela emituja:
 *   div.wykres.wykres-equity-uklad > svg.os.os-y + div.wykres-plotno + div.os.os-x
 * a w plotnie svg.wykres-equity (viewBox, rozciagany), svg.znaczniki (bez
 * viewBox, nad plotnem) i div.wykres-tooltip[hidden]. obsuniecie_sumy nie ma
 * osi Y (kolumna zostaje pusta, zeby crosshair lezal pod wykresem equity),
 * histogram_svg ma jedna kolumne. Reczny uklad ekranu moze uzyc tych samych
 * klas (.wykres, .wykres-os-y, .wykres-rysunek, .wykres-os-x). */

.wykres {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 0 8px;
}
.wykres.os-64 { grid-template-columns: 64px minmax(0, 1fr); }
.wykres.os-34 { grid-template-columns: 34px minmax(0, 1fr); }
.wykres.os-30 { grid-template-columns: 30px minmax(0, 1fr); }
.wykres > .os-x, .wykres > .wykres-os-x { grid-column: 2; }
.wykres.wykres-obsuniecie-uklad > .wykres-plotno { grid-column: 2; }
.wykres.histogram-uklad { grid-template-columns: minmax(0, 1fr); }
.wykres.histogram-uklad > .os-x { grid-column: 1; }
.wykres.bez-osi { grid-template-columns: minmax(0, 1fr); }
.wykres.bez-osi > .os-x, .wykres.bez-osi > .wykres-os-x { grid-column: 1; }

.wykres-plotno, .wykres-rysunek {
  position: relative;
  min-width: 0;
  cursor: crosshair;
}
.wykres-plotno > svg, .wykres-rysunek > svg {
  display: block;
  width: 100%;
  overflow: visible;
}
/* Znaczniki wejsc: osobny SVG bez viewBox nad plotnem; tylko etykiety lapia
 * wskaznik (data-szczegol), linie przepuszczaja ruch myszy do crosshaira. */
.wykres-plotno > svg.znaczniki {
  position: absolute;
  inset: 0;
  height: 100%;
  pointer-events: none;
}
.wykres-plotno > svg.znaczniki text { pointer-events: auto; cursor: default; }

svg.os-y { display: block; overflow: visible; }
svg.os-y text.podzialka { fill: var(--slaby); }
.os-x, .wykres-os-x {
  display: flex;
  justify-content: space-between;
  font-family: var(--pismo-mono);
  font-size: 10px;
  color: var(--slaby);
  padding-top: 6px;
}
.os-x.male, .wykres-os-x.male { font-size: 9.5px; }
.os-x.rozlozona, .wykres-os-x.rozlozona { padding: 6px 6% 0; gap: 10%; }
.os-x.rozlozona > span, .wykres-os-x.rozlozona > span { flex: 1; text-align: center; }

/* Reczna kolumna osi Y (uklad ekranu): etykiety o stalych pozycjach
 * (0.8 / 0.5 / 0.2) jako span.gora/.srodek/.dol. */
.wykres-os-y {
  position: relative;
  font-family: var(--pismo-mono);
  font-size: 10px;
  color: var(--slaby);
}
.wykres-os-y .gora, .wykres-os-y .srodek, .wykres-os-y .dol {
  position: absolute;
  right: 0;
  transform: translateY(-50%);
  white-space: nowrap;
}
.wykres-os-y .gora { top: 0; }
.wykres-os-y .srodek { top: 50%; }
.wykres-os-y .dol { top: 100%; }
.wykres-os-y .gora.wysoko { top: 4px; }
.wykres-os-y .dol.nisko { top: calc(100% - 4px); }
.wykres-ramka { border-left: 1px solid var(--linia2); border-bottom: 1px solid var(--linia2); }
.wykres-tytul-osi {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--linia);
  font-family: var(--pismo-mono);
  font-size: 10px;
  letter-spacing: .1em;
  color: var(--slaby);
  text-transform: uppercase;
}
.wykres-tytul-osi + .wykres { margin-top: 8px; }

/* Tekst w SVG: kroj z CSS, kolor i rozmiar z atrybutow wykresy.py (fill,
 * font-size). Wyjatki nizej to teksty, ktorym wykresy.py nie daje fill. */
svg text { font-family: var(--pismo-mono); }
svg.wykres-brak { display: block; width: 100%; }
svg.wykres-brak text, svg text.brak {
  fill: var(--slaby);
  font-size: 11px;
  letter-spacing: .06em;
}
div.wykres-brak {
  font-family: var(--pismo-mono);
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--slaby);
  padding: 20px 0;
  text-align: center;
  border: 1px dashed var(--linia);
}
.wys-240 { height: 240px; }
.wys-220 { height: 220px; }
.wys-170 { height: 170px; }
.wys-150 { height: 150px; }
.wys-120 { height: 120px; }
.wys-90 { height: 90px; }
.wys-26 { height: 26px; }
.wys-22 { height: 22px; }
.wys-18 { height: 18px; }
.wys-16 { height: 16px; }
.wys-14 { height: 14px; }
.wys-12 { height: 12px; }
.wys-10 { height: 10px; }
.wys-8 { height: 8px; }
.wys-6 { height: 6px; }

/* Linie odniesienia do RECZNYCH SVG w szablonach (wykresy.py niesie kolory w
 * atrybutach, wiec tych klas nie potrzebuje). Selektory po elemencie line,
 * zeby stroke nie dziedziczyl sie na tekst z kontenera o tej samej klasie. */
line.linia-siatki { stroke: var(--linia); stroke-width: 1; stroke-dasharray: 2 4; vector-effect: non-scaling-stroke; }
line.linia-zera, line.linia-startu { stroke: var(--linia2); stroke-width: 1; vector-effect: non-scaling-stroke; }
line.linia-odniesienia { stroke: var(--tekst); stroke-width: 1; opacity: .6; vector-effect: non-scaling-stroke; }
line.linia-odniesienia.slaba { opacity: .5; }
line.linia-dnia, line.linia-doby { stroke: var(--linia); stroke-width: 1; }
line.linia-bazy { stroke: var(--uwaga); stroke-width: 1; stroke-dasharray: 3 2; }

/* Serie equity: kolor i grubosc z atrybutow; tu tylko zakonczenia i stan
 * ukrycia (chip). */
.seria { stroke-linecap: round; }
.seria.ukryty, .obszar.ukryty { display: none; }
svg.iskra { width: 72px; height: 22px; display: block; overflow: visible; }

/* Crosshair, kropki i tooltip: elementy HTML dokladane przez panel.js do
 * .wykres-plotno / .wykres-rysunek. Pozycja (left/top w %) idzie przez CSSOM. */
.crosshair {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--linia2);
  pointer-events: none;
}
.kropka {
  position: absolute;
  width: 9px;
  height: 9px;
  margin: -5px 0 0 -5px;
  background: currentColor;
  border: 2px solid var(--panel);
  border-radius: 50%;
  pointer-events: none;
}
.wykres-tooltip {
  position: absolute;
  top: 8px;
  left: 0;
  transform: translateX(12px);
  background: var(--tlo);
  border: 1px solid var(--linia2);
  padding: 8px 10px;
  box-shadow: 0 8px 24px var(--cien);
  pointer-events: none;
  min-width: 250px;
  white-space: nowrap;
  z-index: 2;
  font-family: var(--pismo-mono);
  font-size: 11px;
  line-height: 1.7;
}
.wykres-tooltip.lewo { transform: translateX(calc(-100% - 12px)); }
.wykres-tooltip.waski { min-width: 0; top: 24px; }
.wykres-tooltip[hidden] { display: none; }
.wykres-tooltip .czas { font-size: 10.5px; color: var(--cichy); margin-bottom: 6px; }
.wykres-tooltip .wiersz { display: flex; align-items: center; gap: 8px; }
.wykres-tooltip .wiersz .nazwa { color: var(--cichy); flex: 1; padding-right: 10px; }
.wykres-tooltip .wiersz .usdt { color: var(--slaby); }
.wykres-tooltip .wiersz .mocny { font-weight: 600; }
.wykres-tooltip .stopka {
  font-size: 10.5px;
  color: var(--zly);
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--linia);
}
.wykres-tooltip.waski .stopka { margin-top: 0; padding-top: 0; border-top: 0; }

/* --- paski (wykresy.pasek / pasek_zakresu / paski_udzialu) ----------------
 * Kolory z atrybutow. CSS dodaje obrys tla (makieta: border 1px --linia),
 * przygaszenie OOS, kursor. Rozne wysokosci daje atrybut height. */
svg.pasek, svg.udzialy { display: block; width: 100%; overflow: visible; }
.pasek .tlo { stroke: var(--linia); stroke-width: 1; }
.pasek.bez-ramki .tlo { stroke: none; }
.pasek.oos .wypelnienie { opacity: .45; }
.pasek.brak .wypelnienie { display: none; }
.udzialy .czesc { cursor: default; }
.udzialy .czesc:hover, .udzialy .czesc.wskazany { stroke: var(--tekst); stroke-width: 1; outline: none; }

/* Pasek z etykieta nad nim (ryzyko per portfel, terminy, wylacznik, Brier). */
.paski { display: flex; flex-direction: column; gap: 10px; }
.paski.luzne { gap: 12px; }
.paski.ciasne { gap: 6px; }
.paski.bardzo-ciasne { gap: 3px; }
.paski.gora { margin-top: 14px; }
.pasek-etykieta {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: baseline;
  font-family: var(--pismo-mono);
  font-size: 11px;
  margin-bottom: 4px;
}
.pasek-etykieta.tekstowa { font-family: var(--pismo); font-size: 13px; }
.pasek-etykieta .lewo { display: inline-flex; align-items: center; gap: 7px; }
.pasek-etykieta .prawo { text-align: right; }
.pasek-etykieta b { font-weight: 600; }
.pasek-etykieta .kiedy { font-family: var(--pismo-mono); font-size: 10.5px; color: var(--slaby); font-weight: 400; margin-left: 8px; }
/* Skala pod paskami: 0 % ... prog. */
.pasek-skala {
  display: flex;
  justify-content: space-between;
  font-family: var(--pismo-mono);
  font-size: 9.5px;
  color: var(--slaby);
  margin-top: 6px;
}
.pasek-skala.wcieta { padding-left: 160px; }
.pasek-skala .nad { color: var(--tekst); padding-right: 5px; }

/* Wiersz siatkowy: etykieta | pasek | wartosc. Szerokosci kolumn to custom
 * properties, zeby jeden uklad obsluzyl PSI (170/64), przerwy (150/52),
 * rozrzut (150/60), IS-OOS (28/70). */
.wiersz-paska {
  display: grid;
  grid-template-columns: var(--kol-etykieta, 150px) minmax(0, 1fr) var(--kol-wartosc, 60px);
  gap: 10px;
  align-items: center;
  font-family: var(--pismo-mono);
  font-size: 11px;
  min-width: 0;
}
.wiersz-paska.bez-wartosci { grid-template-columns: var(--kol-etykieta, 150px) minmax(0, 1fr); }
.wiersz-paska.psi { --kol-etykieta: 170px; --kol-wartosc: 64px; }
.wiersz-paska.przerwa { --kol-wartosc: 52px; }
.wiersz-paska.is-oos { --kol-etykieta: 28px; --kol-wartosc: 70px; gap: 8px; font-size: 10.5px; }
.wiersz-paska.szeroki { gap: 0 14px; }
.wiersz-paska > .etykieta { color: var(--cichy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.wiersz-paska > .etykieta .grupa { color: var(--slaby); }
.wiersz-paska > .etykieta.mocna { color: var(--tekst); font-weight: 600; display: inline-flex; align-items: center; gap: 7px; }
.wiersz-paska > .wartosc { text-align: right; font-weight: 600; }
.wiersz-paska > .wartosc.zwykla { font-weight: 400; }
.wiersz-paska > .wartosc .slaby { font-weight: 400; }
/* Strategia w porownaniu IS/OOS: nazwa + linia pod nia (interwal, liczba tr). */
.porownanie { display: flex; flex-direction: column; gap: 14px; }
.porownanie > .wiersz-paska { --kol-etykieta: 150px; gap: 0 14px; }
.porownanie .strategia { font-family: var(--pismo-mono); font-size: 11.5px; }
.porownanie .strategia .nazwa { display: flex; align-items: center; gap: 7px; font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.porownanie .strategia .pod { color: var(--slaby); font-size: 10px; padding-left: 15px; white-space: nowrap; display: block; }
.porownanie .dwa-paski { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.porownanie-skala {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 0 14px;
  margin-top: 8px;
}
.porownanie-skala .pasek-skala { margin-top: 0; }
.porownanie-skala .wciecie { display: grid; grid-template-columns: 28px minmax(0, 1fr) 70px; gap: 8px; }

/* Obudowa paska udzialow z kreska progu i etykieta nad nia (filtr AI). */
.udzialy-obudowa { position: relative; margin: 10px 0 8px; }
.udzialy-obudowa.z-progiem { margin-top: 24px; }
.udzialy-obudowa .prog-etykieta {
  position: absolute;
  right: 0;
  top: -20px;
  font-family: var(--pismo-mono);
  font-size: 9.5px;
  color: var(--tekst);
}
.wynik-wiersz {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-family: var(--pismo-mono);
  font-size: 11px;
  margin-bottom: 3px;
}
.wynik-wiersz .lewo { display: inline-flex; align-items: center; gap: 7px; }
.wynik-wiersz .prawo { color: var(--cichy); }
.wynik-stopka {
  display: flex;
  justify-content: space-between;
  font-family: var(--pismo-mono);
  font-size: 10px;
  margin-top: 3px;
  color: var(--cichy);
}

/* --- drabinka ceny (wykresy.drabinka: svg 220x44, tekst R nad szyna, "do
 * stopa" pod nia; kolory z atrybutow) ------------------------------------- */
svg.drabinka { display: block; overflow: visible; }
td svg.drabinka { min-width: 220px; }

/* --- histogram (wykresy.histogram_svg) ------------------------------------ */
svg.histogram { display: block; width: 100%; }
.histogram .kosz { cursor: default; }
.histogram:hover .kosz { opacity: .45; }
.histogram .kosz:hover, .histogram .kosz.wskazany { opacity: 1; outline: none; }
.histogram-os {
  display: flex;
  justify-content: space-between;
  font-family: var(--pismo-mono);
  font-size: 9.5px;
  color: var(--slaby);
  margin-top: 4px;
}

/* --- slupki (wykresy.slupki: AUC per okno, precyzja vs pokrycie) ---------- */
svg.slupki { display: block; width: 100%; overflow: visible; }
.slupki .slupek { cursor: default; }
.slupki:hover .slupek { opacity: .4; }
.slupki .slupek:hover, .slupki .slupek.wskazany { opacity: 1; outline: none; }
.slupki-etykiety {
  display: flex;
  gap: 6px;
  font-family: var(--pismo-mono);
  font-size: 9.5px;
  color: var(--slaby);
  margin-top: 3px;
}
.slupki-etykiety > span { flex: 1; text-align: center; }

/* --- dumbbell (wykresy.dumbbell: HTML div.dumbbell > div.wiersz) ---------- */
.dumbbell { display: flex; flex-direction: column; gap: 9px; }
.dumbbell .wiersz {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) 92px;
  gap: 10px;
  align-items: center;
  font-family: var(--pismo-mono);
  font-size: 11px;
  cursor: default;
}
.dumbbell .wiersz:hover, .dumbbell .wiersz.wskazany { background: var(--wyp); outline: none; }
.dumbbell .wiersz > .etykieta { color: var(--cichy); }
.dumbbell .wiersz > .liczby { text-align: right; }
.dumbbell .wiersz > .liczby .dobry, .dumbbell .wiersz > .liczby .zly { font-weight: 600; }
.dumbbell svg.tor { display: block; width: 100%; height: 16px; overflow: visible; }
.dumbbell-skala { padding: 0 102px 0 64px; }

/* --- krzywa kalibracji (wykresy.kalibracja: svg 100x100 rozciagany) ------- */
svg.kalibracja { display: block; width: 100%; }
.kalibracja-obudowa {
  position: relative;
  border-left: 1px solid var(--linia2);
  border-bottom: 1px solid var(--linia2);
}
.kalibracja-obudowa .etykieta-idealna {
  position: absolute;
  right: 4px;
  top: 4px;
  font-family: var(--pismo-mono);
  font-size: 9.5px;
  color: var(--slaby);
}
.kalibracja-obudowa .etykieta-stalej {
  position: absolute;
  left: 4px;
  bottom: 4px;
  font-family: var(--pismo-mono);
  font-size: 9.5px;
  color: var(--uwaga);
}

/* --- rozrzut po kolejnosci par i pasek dwustronny (RECZNE SVG ekranow
 * Backtest / Model; wykresy.py nie ma tych funkcji, wiec tu sa kolory) ----- */
svg.rozrzut { display: block; width: 100%; height: 26px; overflow: visible; }
.rozrzut line.os { stroke: var(--linia); stroke-width: 1; }
.rozrzut .zakres { fill: currentColor; opacity: .35; }
.rozrzut .mediana { fill: var(--tekst); }
.rozrzut .romb { fill: var(--tekst); }
.rozrzut .romb.uwaga { fill: var(--uwaga); }
.rozrzut text { font-size: 9.5px; fill: var(--slaby); }
.rozrzut text.min { text-anchor: end; }
.nie-zmierzono {
  font-family: var(--pismo-mono);
  font-size: 10.5px;
  color: var(--uwaga);
  /* Zdanie zawija sie: z nowrap wystawalo poza siatke i na telefonie
   * przewijalo cala strone w poziomie. */
  min-width: 0;
  overflow-wrap: break-word;
}
svg.pasek-dwustronny { width: 100px; height: 6px; display: inline-block; vertical-align: middle; overflow: visible; }
.pasek-dwustronny .tlo { fill: var(--wyp); }
.pasek-dwustronny line.zero { stroke: var(--linia2); stroke-width: 1; }
.pasek-dwustronny .wypelnienie { fill: currentColor; }
.pasek-dwustronny-obudowa { display: inline-flex; align-items: center; gap: 8px; }

/* --- mapa cieplna swiezosci swiec (wykresy.mapa_cieplna: table.mapa) ------
 * th.para w naglowku, th.interwal w wierszach, td.komorka.r0..r7. Kolor
 * komorki z klasy stopnia: r0..r5 = wiek/limit 0..0.75 w szesciu stopniach,
 * r6 = .uwaga (0.75..1), r7 = .zly (>= 1, albo brak swiecy). Liczba w komorce
 * niesie te sama informacje co kolor. Tabele opakowac w div.przewijalne. */
table.mapa {
  border-collapse: separate;
  border-spacing: 2px;
  width: 100%;
  table-layout: fixed;
  margin-top: 10px;
  font-family: var(--pismo-mono);
  font-size: 9.5px;
  white-space: nowrap;
}
table.mapa.duza { font-size: 10px; margin-top: 12px; }
table.mapa th, table.mapa td {
  border: 0;
  padding: 0;
  letter-spacing: 0;
  text-transform: none;
}
table.mapa th.para {
  font-weight: 400;
  color: var(--slaby);
  text-align: center;
  overflow: hidden;
  text-overflow: clip;
}
table.mapa th.interwal {
  width: 28px;
  font-weight: 400;
  color: var(--slaby);
  text-align: left;
  padding-right: 6px;
}
table.mapa td.komorka {
  height: 26px;
  text-align: center;
  color: var(--tekst);
  background: var(--wyp);
  cursor: default;
  font-weight: 400;
}
table.mapa.duza td.komorka { height: 34px; }
table.mapa td.komorka.pusta { background: transparent; }
table.mapa td.komorka.r0 { background: color-mix(in srgb, var(--dobry) 23%, var(--wyp)); }
table.mapa td.komorka.r1 { background: color-mix(in srgb, var(--dobry) 37%, var(--wyp)); }
table.mapa td.komorka.r2 { background: color-mix(in srgb, var(--dobry) 52%, var(--wyp)); }
table.mapa td.komorka.r3 { background: color-mix(in srgb, var(--dobry) 66%, var(--wyp)); }
table.mapa td.komorka.r4 { background: color-mix(in srgb, var(--dobry) 81%, var(--wyp)); }
table.mapa td.komorka.r5 { background: color-mix(in srgb, var(--dobry) 96%, var(--wyp)); }
table.mapa td.komorka.r6, table.mapa td.komorka.uwaga { background: var(--uwaga); }
table.mapa td.komorka.r7, table.mapa td.komorka.zly { background: var(--zly); }
table.mapa td.komorka.brak { color: var(--tekst); }
table.mapa td.komorka:hover, table.mapa td.komorka.wskazany { outline: 1px solid var(--tekst); outline-offset: 0; }
.mapa-legenda {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 8px;
  font-family: var(--pismo-mono);
  font-size: 10.5px;
  color: var(--cichy);
  min-height: 18px;
  flex-wrap: wrap;
}
.mapa-legenda .pole-szczegolu { margin: 0; min-height: 0; padding: 0; border: 0; background: transparent; }
.mapa-skala { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }

/* --- os czasu sygnalow i uruchomienia 72 h (wykresy.os_czasu_sygnalow /
 * uruchomienia_72h): div.os-sygnalow | div.uruchomienia > div.tor
 * (div.tor-etykieta + svg.tor-os), ostatni div.tor.tor-dni z svg.os-dni.
 * Kolory punktow i kresek z atrybutow; CSS daje uklad, hover, focus. ------ */
.os-sygnalow .tor, .uruchomienia .tor {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 0 10px;
  border-top: 1px solid var(--linia);
  min-width: 0;
}
/* 118 px, nie 86: "pending-signals" z licznikiem nie miescilo sie i licznik
 * wypadal poza etykiete (widac bylo "pending-signa" bez liczby). */
.uruchomienia .tor { grid-template-columns: 118px minmax(0, 1fr); }
.os-sygnalow .tor-etykieta, .uruchomienia .tor-etykieta {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 54px;
  font-family: var(--pismo-mono);
  font-size: 11px;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
}
.uruchomienia .tor-etykieta { height: 34px; color: var(--cichy); text-overflow: ellipsis; }
.uruchomienia .tor-etykieta > .slaby { margin-left: auto; }
.os-sygnalow svg.tor-os, .uruchomienia svg.tor-os { display: block; width: 100%; overflow: visible; }
.os-sygnalow .tor.tor-dni, .uruchomienia .tor.tor-dni { border-top: 1px solid var(--linia2); }
.os-sygnalow .tor-dni .tor-etykieta, .uruchomienia .tor-dni .tor-etykieta { height: auto; }
svg.os-dni { display: block; width: 100%; height: 14px; margin-top: 4px; overflow: visible; }
.os-sygnalow .punkt { cursor: default; }
.os-sygnalow .punkt:hover, .os-sygnalow .punkt.wskazany, .os-sygnalow .punkt:focus { stroke: var(--tekst); outline: none; }
.uruchomienia .kreska { cursor: default; }
.uruchomienia .kreska:hover, .uruchomienia .kreska.wskazany, .uruchomienia .kreska:focus { stroke: var(--tekst); stroke-width: 1; outline: none; }
.uruchomienia .przerwa { pointer-events: stroke; }

/* --- logowanie ------------------------------------------------------------ */

.logowanie {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--tlo);
  color: var(--tekst);
}
.logowanie-gora {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 16px 22px;
  border-bottom: 1px solid var(--linia);
  flex-wrap: wrap;
}
.logowanie-gora .marka { padding: 0; }
.logowanie-gora .prawa {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.logowanie-gora .opis-gory {
  font-family: var(--pismo-mono);
  font-size: 10px;
  letter-spacing: .1em;
  color: var(--slaby);
  text-transform: uppercase;
}
.logowanie-srodek {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  gap: 14px;
}
.logowanie-karta {
  width: 100%;
  max-width: 380px;
  background: var(--panel);
  border: 1px solid var(--linia);
  padding: 26px 26px 22px;
  box-shadow: 0 24px 60px var(--cien);
  margin: 0;
}
.logowanie-karta h1 {
  margin: 4px 0 18px;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.1;
}
.logowanie-karta .pasek-komunikatu { margin-bottom: 14px; }
.logowanie-karta label {
  display: block;
  font-family: var(--pismo-mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--slaby);
  margin-bottom: 6px;
}
.logowanie-karta input {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--linia2);
  border-radius: 2px;
  background: var(--tlo);
  color: var(--tekst);
  font: 500 15px/1.4 var(--pismo-mono);
  letter-spacing: .08em;
  outline: none;
}
.logowanie-karta input::placeholder { color: var(--slaby); }
.logowanie-karta input:focus { border-color: var(--akcent); }
.logowanie-karta button[type="submit"] {
  display: block;
  width: 100%;
  margin-top: 12px;
  text-align: center;
  padding: 11px 12px;
  border: 0;
  border-radius: 2px;
  background: var(--akcent);
  color: #fff;
  font: 700 12px/1.4 var(--pismo-mono);
  letter-spacing: .12em;
  cursor: pointer;
}
.logowanie-karta button[type="submit"]:hover { filter: brightness(1.1); }
.logowanie-karta .opis { color: var(--cichy); font-size: 12px; margin: 18px 0 0; line-height: 1.55; }
.logowanie-karta .stopka-karty {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--linia);
  font-family: var(--pismo-mono);
  font-size: 10px;
  letter-spacing: .06em;
  color: var(--slaby);
  flex-wrap: wrap;
}
.logowanie-srodek > .pasek-komunikatu { width: 100%; max-width: 380px; margin-bottom: 0; }
footer.logowanie-stopka {
  padding: 14px 22px;
  border-top: 1px solid var(--linia);
  font-size: 11px;
  color: var(--slaby);
  line-height: 1.6;
}

/* --- strona bledu --------------------------------------------------------- */

.blad-karta { max-width: 60ch; }
.blad-karta .kod {
  font-family: var(--pismo-mono);
  font-size: 44px;
  font-weight: 600;
  line-height: 1;
  color: var(--cichy);
  margin: 10px 0 8px;
}
.blad-karta a { font-family: var(--pismo-mono); font-size: 10.5px; letter-spacing: .06em; text-decoration: none; }

/* --- najwezszy realny telefon (320 px) ------------------------------------
 * Jedyna media query poza motywem: przy 320 px odstepy 28 px po bokach
 * zjadaja jedna piata ekranu, wiec sie kurcza. Uklad zostaje ten sam. */

@media (max-width: 400px) {
  main.strona { padding: 16px 12px 28px; }
  .sekcja { padding: 12px; }
  .kafelek .wartosc, .kafelki.ciasne .kafelek .wartosc { font-size: 18px; }
  .naglowek-strony h1 { font-size: 22px; }
  .liczba-glowna { font-size: 26px; }
  .liczba-glowna.ogromna { font-size: 36px; }
  th, td { padding: 6px 8px; font-size: 12px; }
  .wiersz-paska, .porownanie > .wiersz-paska { --kol-etykieta: 96px; }
  .wiersz-paska.psi { --kol-etykieta: 110px; }
  .os-sygnalow .tor { grid-template-columns: 96px minmax(0, 1fr); }
  .pasek-skala.wcieta { padding-left: 106px; }
  .porownanie-skala { grid-template-columns: 96px minmax(0, 1fr); }
  .wykres-tooltip { min-width: 0; }
}

/* ==========================================================================
 * Reguly per ekran. Zasada jak wyzej: zero fill/stroke dla klas z
 * panel/wykresy.py, kolory tylko przez tokeny. Kolejnosc = numery ekranow.
 * ========================================================================== */

/* --- ekran 01 / Przeglad ----------------------------------------------- */

.sekcja-naglowek.gora { align-items: flex-start; }

/* Stempel w komorce tabeli (BLOKUJE przy obsunieciu) stoi obok liczby, wiec
 * nie moze podnosic wysokosci wiersza. */
td .stempel.maly { vertical-align: baseline; line-height: 1.2; margin-left: 6px; }

/* --- ekran 03 / Sygnaly ------------------------------------------------ */

/* Kolumna "Ocena / prog" w liscie: pasek 6 px (wykresy.pasek_zakresu) obok
 * liczby. Pasek rosnie z komorka, liczba ma stala szerokosc, zeby kolumna
 * nie skakala miedzy wierszami z ocena i bez. */
.ocena-prog {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 120px;
}
.ocena-prog svg.pasek { flex: 1 1 70px; min-width: 70px; }
.ocena-prog .ocena {
  font-family: var(--pismo-mono);
  font-size: 11px;
  min-width: 2ch;
  text-align: right;
}

/* Lista sygnalow: pierwsza komorka to czas (cichy), pogrubiony jest symbol,
 * jak w makiecie. Wiersz z data-szczegol reaguje na hover i focus (panel.js),
 * wiec kursor domyslny, a nie tekstowy. */
.lista-sygnalow tbody td:first-child { font-weight: 400; }
.lista-sygnalow td.symbol { font-weight: 600; }
.lista-sygnalow td.symbol .interwal { margin-left: 6px; }
.lista-sygnalow td.ai-status { font-size: 11px; }
.lista-sygnalow td.etykieta-sygnalu { font-size: 11px; color: var(--slaby); }
.lista-sygnalow tbody tr[data-szczegol] { cursor: default; }
.lista-sygnalow tbody tr[data-szczegol]:focus { outline: none; background: var(--wyp); }

/* Pasek udzialow w sekcjach statusow: odstep jak w makiecie (10 px nad,
 * 8 px pod), bez kreski progu. */
.polowa-waska .udzialy-obudowa { margin: 10px 0 8px; }

/* --- ekran 04 / Zdrowie ------------------------------------------------ */

/* Mapa cieplna z komorkami 34 px (makieta Zdrowia). wykresy.mapa_cieplna nie
 * przyjmuje klasy, wiec wysokosc ustawia opakowanie div.przewijalne.mapa-duza;
 * to ta sama regula co table.mapa.duza w panel.css. */
.przewijalne.mapa-duza table.mapa { font-size: 10px; margin-top: 12px; }
.przewijalne.mapa-duza table.mapa td.komorka { height: 34px; }

/* Kreska progu nad paskiem udzialow filtra AI: osobny SVG polozony na
 * obudowie, wystajacy 5 px nad i pod pasek (jak w makiecie), z etykieta
 * "prog N %" w tym samym SVG. Kolor niesie atrybut stroke/fill w szablonie. */
.udzialy-obudowa > svg.prog-kreska {
  position: absolute;
  left: 0;
  top: -5px;
  width: 100%;
  height: calc(100% + 10px);
  pointer-events: none;
  overflow: visible;
}

/* Terminy: etykieta paska ma nazwe w kroju tekstowym (13 px, 600) i date w
 * mono po lewej, a po prawej mono 11 px z wiekiem, limitem i slowem stanu. */
.terminy .pasek-etykieta.tekstowa .prawo {
  display: inline-flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  font-family: var(--pismo-mono);
  font-size: 11px;
}
.terminy .pasek-etykieta.tekstowa .prawo .stempel.goly { font-size: 9.5px; }

/* Wylacznik: stempel BLOKUJE NOWE WEJSCIA w etykiecie paska. */
.wylacznik .pasek-etykieta .lewo .stempel { margin-left: 4px; }

/* Regularnosc: podtytul nad paskami przerw i szersza kolumna wartosci, zeby
 * obok liczby zmiescilo sie slowo PONAD LIMIT. */
.regularnosc .podtytul { margin: 6px 0 8px; }
.regularnosc .wiersz-paska.przerwa { --kol-wartosc: 130px; }
.regularnosc .wiersz-paska.przerwa > .wartosc .zly { font-size: 9.5px; letter-spacing: .06em; }

/* Aktywnosc: blok luk pod tabela, oddzielony linia (jak BEZ LUK w makiecie). */
.aktywnosc .luki {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--linia);
}
.aktywnosc .luki-ok { display: flex; gap: 10px; align-items: baseline; }
.aktywnosc .luki-ok .opis { margin: 0; font-size: 12px; }
.aktywnosc .luki .pasek-komunikatu { margin-bottom: 10px; }
.aktywnosc .przypis strong.zly { color: var(--zly); }
.aktywnosc .przypis span.zly { font-size: 9.5px; letter-spacing: .06em; font-family: var(--pismo-mono); }

/* Pozostale problemy (powyzej trzech) w skladanym details: lista czerwona,
 * summary w kolorze problemu, nie zastrzezenia. */
details.zastrzezenie.problemy-reszta { border-color: var(--zly); }
details.zastrzezenie.problemy-reszta > summary { color: var(--zly); }
details.zastrzezenie.problemy-reszta > div { max-width: none; }
details.zastrzezenie.problemy-reszta ul.lista { margin-top: 0; }

/* --- ekran 05 / Model -------------------------------------------------- */

/* Os Y slupkow AUC: wykresy.slupki zostawia 14 px marginesu u gory (tekst
 * wartosci) i 16 px u dolu (etykiety okien), wiec etykiety 0.8 / 0.2 leza na
 * tych granicach, a nie na krawedziach kontenera. Srodek (0.5) zostaje na 50 %,
 * bo margines gorny i dolny roznia sie o 2 px, czyli o mniej niz pol etykiety. */
.wykres-os-y.os-slupkow .gora { top: 14px; }
.wykres-os-y.os-slupkow .dol { top: calc(100% - 16px); }

/* Rysunek slupkow z ramka osi: wykresy.slupki nie rysuje osi, ramke daje
 * .wykres-ramka z panel.css; tu tylko dolny margines na etykiety. */
.wykres-rysunek.slupki-rysunek { padding-bottom: 0; }

/* Skala pod paskami Brier: trzy podpisy, srodkowy o kresce. */
.pasek-skala .srodkowy { text-align: center; }

/* Os logarytmiczna PSI (wykresy_model.os_log): jeden wiersz tekstu w SVG,
 * wciety jak paski (kolumna etykiet 170 px, kolumna wartosci 64 px). */
svg.os-log { display: block; width: 100%; height: 14px; overflow: visible; }
.skala-psi { display: grid; grid-template-columns: 170px minmax(0, 1fr) 64px; gap: 10px; margin-top: 6px; }
.skala-psi > .pasek-skala { margin-top: 0; }
@media (max-width: 400px) { .skala-psi { grid-template-columns: 110px minmax(0, 1fr) 64px; } }

/* Kolumna "Roznica" w tabeli rozjazdu progow ma miec miejsce na pasek
 * dwustronny (100 px) i liczbe obok; naglowek do lewej jak w makiecie. */
th.roznica, td.roznica { min-width: 160px; text-align: left; }

/* Lista cech bez PSI pod paskami. */
.przypis code { font-family: var(--pismo-mono); }

/* --- ekran 06 / Backtest ----------------------------------------------- */

/* Romb kolejnosci wysylkowej to zagniezdzony <svg x="61%"> z obroconym
 * prostokatem: wspolrzedna w procentach nie da sie obrocic wokol srodka,
 * a zagniezdzony svg mozna przesunac procentem. Musi byc widoczny poza
 * swoim pudelkiem, bo prostokat lezy wokol jego poczatku. */
.rozrzut svg { overflow: visible; }

/* Wiersz rozrzutu (150 / 1fr / 60): etykieta z probka, os, percentyl. */
.rozrzut-wiersze { display: flex; flex-direction: column; gap: 14px; }
.rozrzut-skala { margin-top: 6px; }
.rozrzut-skala .pasek-skala { margin-top: 0; }
.rozrzut-skala > .wartosc { text-align: right; font-family: var(--pismo-mono); font-size: 9.5px; color: var(--slaby); font-weight: 400; }

/* Paski IS / OOS od kreski zera: svg.pasek z panel.css (tlo z obrysem, .oos
 * przygasza wypelnienie); tu tylko odstep pod dwoma paskami strategii. */
.porownanie .dwa-paski svg.pasek { display: block; }

/* Pelne wyniki: kazda strategia to podsekcja z tabela i zastrzezeniami. */
.wyniki-strategii .podsekcja:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.wyniki-strategii .sekcja-tytul .interwal { margin-left: 6px; }