/* HARD CAPITAL HUB — identyfikacja: ciemny granat, zloto, akcent niebieski. */

:root {
  --granat-tlo: #060f1f;
  --granat: #0b1b33;
  --granat-jasny: #12294a;
  --granat-obrys: #1c3557;

  --zloto: #c9a227;
  --zloto-jasne: #e3c05a;
  --akcent: #457cfd;
  --akcent-ciemny: #2d5fd8;

  --tekst: #e8edf5;
  --tekst-przygaszony: #93a4be;
  --tekst-slaby: #63748f;

  --dobry: #3fb07a;
  --ostrzegawczy: #e0533d;

  --promien: 10px;
  --szerokosc-menu: 260px;
  --naglowek-wys: 64px;

  --czcionka: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  background: var(--granat-tlo);
  color: var(--tekst);
  font-family: var(--czcionka);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* ---------- NAGLOWEK ---------- */

.naglowek {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--naglowek-wys);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 20px;
  background: var(--granat);
  border-bottom: 1px solid var(--granat-obrys);
  z-index: 30;
}

.znak {
  display: flex;
  align-items: baseline;
  gap: 9px;
  min-width: 0;
}

.znak-hard {
  font-weight: 700;
  font-size: 19px;
  letter-spacing: 0.14em;
  color: var(--zloto);
  white-space: nowrap;
}

.znak-capital {
  font-weight: 300;
  font-size: 19px;
  letter-spacing: 0.14em;
  color: var(--tekst);
  white-space: nowrap;
}

.znak-hub {
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--tekst-slaby);
  text-transform: uppercase;
  padding-left: 4px;
}

/* Plakietka srodowiska. Ma byc widoczna od progu — praca na roboczej
   nie moze byc pomylona z oficjalna. */
.srodowisko {
  margin-left: auto;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
  white-space: nowrap;
}

.srodowisko-oficjalna {
  color: #2a1f00;
  background: var(--zloto);
}

.srodowisko-robocza {
  color: #ffffff;
  background: var(--akcent-ciemny);
}

/* Pasek na gorze strony, gdy pracujemy na roboczej. */
body.jest-robocza::before {
  content: "";
  position: fixed;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--akcent);
  z-index: 40;
}

/* ---------- PRZELACZNIK MENU (telefon) ---------- */

.przelacznik-menu {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--granat-obrys);
  border-radius: var(--promien);
  background: var(--granat-jasny);
  color: var(--tekst);
  cursor: pointer;
  font-size: 17px;
  line-height: 1;
}

.przelacznik-menu:hover {
  border-color: var(--akcent);
}

.przelacznik-menu:focus-visible {
  outline: 2px solid var(--akcent);
  outline-offset: 2px;
}

/* ---------- MENU BOCZNE ---------- */

.menu {
  position: fixed;
  top: var(--naglowek-wys);
  bottom: 0;
  left: 0;
  width: var(--szerokosc-menu);
  overflow-y: auto;
  padding: 18px 12px 28px;
  background: var(--granat);
  border-right: 1px solid var(--granat-obrys);
  z-index: 20;
}

.menu-tytul {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tekst-slaby);
  padding: 0 10px 10px;
  margin: 0;
}

.menu-lista {
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu-lista li {
  margin-bottom: 3px;
}

/* Pozycja klikalna. */
.menu-pozycja {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 10px;
  border: 1px solid transparent;
  border-radius: var(--promien);
  background: transparent;
  color: var(--tekst);
  font: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}

.menu-pozycja:hover {
  background: var(--granat-jasny);
  border-color: var(--granat-obrys);
}

.menu-pozycja:focus-visible {
  outline: 2px solid var(--akcent);
  outline-offset: 1px;
}

.menu-pozycja[aria-current="page"] {
  background: var(--granat-jasny);
  border-color: var(--akcent);
}

/* Pozycja nieaktywna — wyszarzona. NIE jest przyciskiem i nie udaje go:
   nie ma kursora wskazujacego ani stanu hover. */
.menu-pozycja-wkrotce {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 10px;
  border: 1px solid transparent;
  border-radius: var(--promien);
  font-size: 14px;
  color: var(--tekst-slaby);
  cursor: default;
  opacity: 0.62;
}

.inicjal {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: var(--granat-jasny);
  border: 1px solid var(--granat-obrys);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--zloto);
}

.menu-pozycja-wkrotce .inicjal {
  color: var(--tekst-slaby);
}

.menu-nazwa {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.znacznik-wkrotce {
  flex: 0 0 auto;
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tekst-slaby);
  border: 1px solid var(--granat-obrys);
  border-radius: 999px;
  padding: 2px 7px;
}

/* ---------- OBSZAR GLOWNY ---------- */

.obszar {
  margin: var(--naglowek-wys) 0 0 var(--szerokosc-menu);
  padding: 30px 28px 60px;
  max-width: 1080px;
}

.tytul-strony {
  margin: 0 0 6px;
  font-size: 26px;
  font-weight: 600;
}

.podtytul {
  margin: 0 0 28px;
  color: var(--tekst-przygaszony);
  font-size: 15px;
  max-width: 62ch;
}

/* ---------- KAFLE EKRANU STARTOWEGO ---------- */

.kafle {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  gap: 14px;
}

.kafel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px;
  border: 1px solid var(--granat-obrys);
  border-radius: var(--promien);
  background: var(--granat);
  text-align: left;
  color: var(--tekst);
  font: inherit;
}

/* Kafel dzialajacy JEST przyciskiem — i ma to po sobie widac. */
button.kafel {
  cursor: pointer;
}

button.kafel:hover {
  border-color: var(--akcent);
  background: var(--granat-jasny);
}

button.kafel:focus-visible {
  outline: 2px solid var(--akcent);
  outline-offset: 2px;
}

/* Kafel w budowie NIE jest przyciskiem — jest zwyklym blokiem tekstu. */
div.kafel {
  opacity: 0.62;
  cursor: default;
}

.kafel-gora {
  display: flex;
  align-items: center;
  gap: 11px;
}

.kafel-nazwa {
  font-size: 16px;
  font-weight: 600;
}

.kafel-opis {
  margin: 0;
  font-size: 13px;
  color: var(--tekst-przygaszony);
}

.plakietka {
  align-self: flex-start;
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--granat-obrys);
  color: var(--tekst-slaby);
}

.plakietka-dziala {
  color: var(--zloto-jasne);
  border-color: var(--zloto);
}

/* ---------- POLE STATUSU ---------- */

/* Ksztalt tego pola jest staly. Wypelnia je tresc przyslana z serwera,
   wiec podmiana zrodla statusu (dzis: odczyt ze strony panelu, docelowo:
   czas danych z bazy rdzenia) nie wymaga zmiany interfejsu. */
.status {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 17px 19px;
  border: 1px solid var(--granat-obrys);
  border-left: 3px solid var(--tekst-slaby);
  border-radius: var(--promien);
  background: var(--granat);
  margin-bottom: 22px;
}

.status-swieze {
  border-left-color: var(--dobry);
}

.status-nieswieze {
  border-left-color: var(--ostrzegawczy);
}

.status-nie-wiadomo,
.status-sprawdzanie {
  border-left-color: var(--tekst-slaby);
}

.status-nadpis {
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tekst-slaby);
}

.status-etykieta {
  font-size: 19px;
  font-weight: 600;
}

.status-swieze .status-etykieta {
  color: var(--dobry);
}

.status-nieswieze .status-etykieta {
  color: var(--ostrzegawczy);
}

.status-nie-wiadomo .status-etykieta,
.status-sprawdzanie .status-etykieta {
  color: var(--tekst-przygaszony);
}

.status-notka {
  font-size: 13px;
  color: var(--tekst-przygaszony);
  margin: 0;
  max-width: 66ch;
}

.status-szczegoly {
  font-size: 12px;
  color: var(--tekst-slaby);
  margin: 0;
}

/* ---------- PRZYCISKI: trzy poziomy ---------- */

.przycisk {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: var(--promien);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  text-decoration: none;
}

.przycisk:focus-visible {
  outline: 2px solid var(--akcent);
  outline-offset: 2px;
}

.przycisk-glowny {
  background: var(--akcent);
  border-color: var(--akcent);
  color: #ffffff;
}

.przycisk-glowny:hover {
  background: var(--akcent-ciemny);
  border-color: var(--akcent-ciemny);
}

.przycisk-drugorzedny {
  background: transparent;
  border-color: var(--granat-obrys);
  color: var(--tekst);
}

.przycisk-drugorzedny:hover {
  border-color: var(--akcent);
  background: var(--granat-jasny);
}

.przycisk-odrzucajacy {
  background: transparent;
  border-color: var(--ostrzegawczy);
  color: var(--ostrzegawczy);
}

.przycisk-odrzucajacy:hover {
  background: var(--ostrzegawczy);
  color: #ffffff;
}

/* Przycisk nieczynny nie udaje czynnego. */
.przycisk[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}

.przycisk[disabled]:hover {
  background: transparent;
  border-color: var(--granat-obrys);
  color: var(--tekst);
}

.rzad-przyciskow {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 26px;
}

/* ---------- BLOKI TRESCI ---------- */

.blok {
  padding: 19px;
  border: 1px solid var(--granat-obrys);
  border-radius: var(--promien);
  background: var(--granat);
  margin-bottom: 16px;
}

.blok h2 {
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.03em;
}

.blok p {
  margin: 0 0 10px;
  color: var(--tekst-przygaszony);
  font-size: 14px;
  max-width: 66ch;
}

.blok p:last-child {
  margin-bottom: 0;
}

.blok-uwaga {
  border-color: var(--ostrzegawczy);
}

.blok-uwaga h2 {
  color: var(--ostrzegawczy);
}

.lista-prosta {
  margin: 0;
  padding-left: 20px;
  color: var(--tekst-przygaszony);
  font-size: 14px;
}

.lista-prosta li {
  margin-bottom: 5px;
}

/* ---------- ZASLONA (telefon) ---------- */

.zaslona {
  display: none;
  position: fixed;
  inset: var(--naglowek-wys) 0 0 0;
  background: rgba(3, 8, 17, 0.66);
  z-index: 15;
  border: 0;
  padding: 0;
  cursor: pointer;
}

/* ---------- TELEFON ---------- */

@media (max-width: 900px) {
  .przelacznik-menu {
    display: flex;
  }

  .menu {
    transform: translateX(-100%);
    transition: transform 0.18s ease-out;
    width: 84vw;
    max-width: 300px;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.5);
  }

  body.menu-otwarte .menu {
    transform: translateX(0);
  }

  body.menu-otwarte .zaslona {
    display: block;
  }

  .obszar {
    margin-left: 0;
    padding: 22px 16px 56px;
  }

  .tytul-strony {
    font-size: 22px;
  }

  .kafle {
    grid-template-columns: 1fr;
  }

  .rzad-przyciskow .przycisk {
    flex: 1 1 auto;
  }

  .znak-hub {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .menu {
    transition: none;
  }
}

/* ---------- STATUS: dostepnosc adresu ---------- */

.status-odpowiada {
  border-left-color: var(--dobry);
}

.status-odpowiada .status-etykieta {
  color: var(--dobry);
}

/* ---------- PASEK ZASTRZEZEN ---------- */

/* Trzy rzeczy, ktore musza byc widoczne od razu, a nie schowane w szczegolach:
   data odczytu, waluta i to, ze liczby dotycza wylacznie transakcji zamknietych. */
.pasek-zastrzezen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
  margin-bottom: 22px;
}

.zastrzezenie {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 14px 16px;
  border: 1px solid var(--granat-obrys);
  border-left: 3px solid var(--zloto);
  border-radius: var(--promien);
  background: var(--granat);
}

.zastrzezenie-mocne {
  border-left-color: var(--ostrzegawczy);
}

.zastrzezenie-nadpis {
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tekst-slaby);
}

.zastrzezenie-tresc {
  font-size: 17px;
  font-weight: 600;
  color: var(--tekst);
}

.zastrzezenie-mocne .zastrzezenie-tresc {
  color: var(--ostrzegawczy);
}

.zastrzezenie-opis {
  font-size: 12px;
  color: var(--tekst-przygaszony);
  line-height: 1.45;
}

/* ---------- TABELA WYNIKOW ---------- */

/* Szeroka tresc przewija sie WEWNATRZ swojego pudelka.
   Strona nigdy nie przewija sie w bok. */
.tabela-owijka {
  overflow-x: auto;
  border: 1px solid var(--granat-obrys);
  border-radius: var(--promien);
  background: var(--granat);
  margin-bottom: 14px;
}

.tabela-wynikow {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.tabela-wynikow th {
  text-align: left;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tekst-slaby);
  font-weight: 600;
  padding: 12px 14px;
  border-bottom: 1px solid var(--granat-obrys);
  white-space: nowrap;
}

.tabela-wynikow td {
  padding: 12px 14px;
  border-bottom: 1px solid rgba(28, 53, 87, 0.5);
  vertical-align: top;
}

.tabela-wynikow tbody tr:last-child td {
  border-bottom: 0;
}

.tabela-wynikow tbody tr:hover {
  background: var(--granat-jasny);
}

.kol-nazwa {
  display: table-cell;
  min-width: 190px;
}

.nazwa-strategii {
  display: block;
  font-weight: 600;
  color: var(--tekst);
}

.alias-konta {
  display: block;
  font-size: 11px;
  color: var(--tekst-slaby);
  margin-top: 2px;
}

.kol-instrument {
  color: var(--tekst-przygaszony);
  font-size: 13px;
  white-space: nowrap;
}

/* Liczby wyrownane, cyfry o stalej szerokosci — inaczej kolumna "skacze". */
.kol-liczba {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.kol-dni,
.kol-data {
  white-space: nowrap;
  color: var(--tekst-przygaszony);
  font-variant-numeric: tabular-nums;
}

.dodatnia {
  color: var(--dobry);
}

.ujemna {
  color: var(--ostrzegawczy);
}

.kol-otwarte {
  white-space: nowrap;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.kol-otwarte.pusto {
  color: var(--tekst-slaby);
}

.otwarte-wynik {
  display: block;
  font-size: 12px;
  margin-top: 2px;
}

/* ---------- TABELA NA TELEFONIE ---------- */

/* Przy 390 px tabela 7-kolumnowa jest nieczytelna, wiec kazdy wiersz
   zamienia sie w kafel, a kazda wartosc dostaje swoj podpis. */
@media (max-width: 700px) {
  .tabela-owijka {
    border: 0;
    background: transparent;
    overflow-x: visible;
  }

  .tabela-wynikow,
  .tabela-wynikow tbody,
  .tabela-wynikow tr,
  .tabela-wynikow td {
    display: block;
    width: 100%;
  }

  .tabela-wynikow thead {
    display: none;
  }

  .tabela-wynikow tr {
    border: 1px solid var(--granat-obrys);
    border-radius: var(--promien);
    background: var(--granat);
    margin-bottom: 12px;
    padding: 6px 4px;
  }

  .tabela-wynikow tbody tr:hover {
    background: var(--granat);
  }

  .tabela-wynikow td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 14px;
    padding: 8px 14px;
    border-bottom: 1px solid rgba(28, 53, 87, 0.4);
    text-align: right;
  }

  .tabela-wynikow td:last-child {
    border-bottom: 0;
  }

  /* Podpis wartosci, brany z atrybutu data-etykieta. */
  .tabela-wynikow td::before {
    content: attr(data-etykieta);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--tekst-slaby);
    text-align: left;
    flex: 0 0 auto;
  }

  .kol-nazwa {
    display: block;
    text-align: left;
    padding-bottom: 10px;
  }

  .kol-nazwa::before {
    display: none;
  }

  .nazwa-strategii {
    font-size: 16px;
  }
}

/* ---------- PRZYCISK OTWIERAJACY KARTE STRATEGII ---------- */

/* Nazwa strategii JEST przyciskiem i ma to po sobie widac.
   Reszta wiersza nie udaje klikalnej. */
.przycisk-strategii {
  display: block;
  width: 100%;
  padding: 4px 8px 5px;
  margin: -4px -8px -5px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.przycisk-strategii:hover {
  background: var(--granat-jasny);
  border-color: var(--akcent);
}

.przycisk-strategii:focus-visible {
  outline: 2px solid var(--akcent);
  outline-offset: 1px;
}

.przycisk-strategii .nazwa-strategii::after {
  content: " →";
  color: var(--akcent);
  font-weight: 400;
}

/* ---------- LISTA STATYSTYK NA KARCIE ---------- */

.statystyki {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 16px;
}

.statystyka {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.statystyka-etykieta {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tekst-slaby);
}

.statystyka-wartosc {
  font-size: 19px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.statystyka-opis {
  font-size: 12px;
  color: var(--tekst-przygaszony);
  line-height: 1.45;
}

/* ---------- BLOK KAPITALU ---------- */

.blok-kapital {
  border-color: var(--zloto);
}

.blok-kapital h2 {
  color: var(--zloto-jasne);
}

.blok-metoda {
  border-color: var(--granat-obrys);
}

/* Zastrzezenie idzie RAZEM z liczba, nie do osobnej zakladki. */
.kapital-zastrzezenie {
  font-size: 13px;
  color: var(--tekst-przygaszony);
  border-left: 3px solid var(--ostrzegawczy);
  padding-left: 12px;
  margin: 0 0 18px;
  max-width: 74ch;
}

.kapital-pary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}

.kapital-pozycja {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 15px 17px;
  border: 1px solid var(--granat-obrys);
  border-radius: var(--promien);
  background: var(--granat-tlo);
}

.kapital-pozycja-glowna {
  border-color: var(--zloto);
}

.kapital-liczba {
  font-size: 25px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--tekst);
}

.kapital-pozycja-glowna .kapital-liczba {
  color: var(--zloto-jasne);
}

/* Gdy danych za malo — mowimy to wprost, nie wypelniamy przyblizeniem. */
.kapital-brak {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 15px 17px;
  border: 1px dashed var(--tekst-slaby);
  border-radius: var(--promien);
  background: var(--granat-tlo);
  margin-bottom: 20px;
}

.kapital-brak-tresc {
  font-size: 23px;
  font-weight: 700;
  color: var(--tekst-przygaszony);
}

.kapital-brak p {
  margin: 0;
  max-width: 74ch;
}

.zalozenia {
  border-top: 1px solid var(--granat-obrys);
  padding-top: 15px;
}

.zalozenia h3 {
  margin: 0 0 9px;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tekst-slaby);
  font-weight: 600;
}

.zalozenia .lista-prosta li {
  margin-bottom: 7px;
  line-height: 1.5;
}

/* ---------- ZESTAWIENIE KAPITALU ---------- */

.kol-wyroznik {
  color: var(--zloto-jasne);
  font-size: 15px;
}

.wiersz-bez-wyliczenia {
  opacity: 0.72;
}

.kol-brak {
  color: var(--tekst-slaby);
}

.brak-tresc {
  display: block;
  font-weight: 600;
  font-style: italic;
  color: var(--tekst-przygaszony);
}

.brak-powod {
  display: block;
  font-size: 11px;
  font-weight: 400;
  color: var(--tekst-slaby);
  margin-top: 2px;
}

.kol-uwaga {
  color: var(--zloto-jasne);
}

/* ---------- TELEFON ---------- */

@media (max-width: 700px) {
  .statystyki {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .kapital-pary {
    grid-template-columns: 1fr;
  }

  .kapital-liczba {
    font-size: 22px;
  }

  /* W ukladzie kaflowym komorka nazwy jest blokiem, wiec przycisk
     dostaje wlasne marginesy zamiast ujemnych. */
  .przycisk-strategii {
    margin: 0;
    padding: 8px 10px;
    border-color: var(--granat-obrys);
  }
}

/* ---------- STATUS: swiadomie nie sprawdzamy ---------- */

.status-nie-sprawdzamy {
  border-left-color: var(--zloto);
}

.status-nie-sprawdzamy .status-etykieta {
  color: var(--zloto-jasne);
}

/* ---------- ROZKLAD JAZDY ---------- */

.plan-czas {
  font-size: 12px;
  color: var(--tekst-slaby);
  margin: 0 0 18px;
}

/* --- szesc liczb --- */

.plan-liczby {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin-bottom: 20px;
}

.plan-liczba {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 16px;
  border: 1px solid var(--granat-obrys);
  border-left: 3px solid var(--tekst-slaby);
  border-radius: var(--promien);
  background: var(--granat);
  font: inherit;
  color: var(--tekst);
  text-align: left;
  cursor: pointer;
}

.plan-liczba:hover {
  background: var(--granat-jasny);
  border-color: var(--akcent);
}

.plan-liczba:focus-visible {
  outline: 2px solid var(--akcent);
  outline-offset: 2px;
}

.plan-liczba[aria-pressed="true"] {
  border-color: var(--akcent);
}

.plan-liczba-ile {
  font-size: 26px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.plan-liczba-nazwa {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tekst-slaby);
}

/* Kolory statusow. "Czeka na Ciebie" ma byc widoczne z drugiego konca pokoju. */
.plan-liczba.st-zamkniete     { border-left-color: var(--dobry); }
.plan-liczba.st-w-toku        { border-left-color: var(--akcent); }
.plan-liczba.st-czeka         { border-left-color: var(--zloto); background: rgba(201, 162, 39, 0.1); }
.plan-liczba.st-zablokowane   { border-left-color: var(--ostrzegawczy); }
.plan-liczba.st-do-zrobienia  { border-left-color: var(--tekst-slaby); }
.plan-liczba.st-odlozone      { border-left-color: var(--granat-obrys); }

.plan-liczba.st-czeka .plan-liczba-ile   { color: var(--zloto-jasne); }
.plan-liczba.st-czeka .plan-liczba-nazwa { color: var(--zloto); }

/* --- wolanie o decyzje --- */

.plan-wolanie {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 17px 19px;
  border: 1px solid var(--zloto);
  border-left: 3px solid var(--zloto);
  border-radius: var(--promien);
  background: rgba(201, 162, 39, 0.08);
  margin-bottom: 20px;
}

.plan-wolanie strong {
  font-size: 17px;
  color: var(--zloto-jasne);
}

.plan-wolanie span {
  font-size: 13px;
  color: var(--tekst-przygaszony);
  max-width: 70ch;
}

/* --- filtr --- */

.plan-filtr {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}

.plan-filtr-etykieta {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tekst-slaby);
  margin-right: 2px;
}

.przycisk-filtr {
  padding: 6px 12px;
  border: 1px solid var(--granat-obrys);
  border-radius: 999px;
  background: transparent;
  color: var(--tekst-przygaszony);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

.przycisk-filtr:hover {
  border-color: var(--akcent);
  color: var(--tekst);
}

.przycisk-filtr:focus-visible {
  outline: 2px solid var(--akcent);
  outline-offset: 2px;
}

.przycisk-filtr[aria-pressed="true"] {
  background: var(--akcent);
  border-color: var(--akcent);
  color: #ffffff;
  font-weight: 600;
}

/* --- grupy obszarow --- */

.plan-grupa {
  border: 1px solid var(--granat-obrys);
  border-radius: var(--promien);
  background: var(--granat);
  margin-bottom: 10px;
}

.plan-grupa-czeka {
  border-color: var(--zloto);
}

.plan-grupa-naglowek {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 17px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.plan-grupa-naglowek::-webkit-details-marker {
  display: none;
}

.plan-grupa-naglowek::before {
  content: "▸";
  color: var(--tekst-slaby);
  font-size: 12px;
  flex: 0 0 auto;
}

.plan-grupa[open] > .plan-grupa-naglowek::before {
  content: "▾";
}

.plan-grupa-naglowek:hover {
  background: var(--granat-jasny);
}

.plan-grupa-naglowek:focus-visible {
  outline: 2px solid var(--akcent);
  outline-offset: -2px;
}

.plan-grupa-nazwa {
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.04em;
  flex: 1 1 auto;
}

.plan-grupa-ile {
  font-size: 12px;
  color: var(--tekst-slaby);
  white-space: nowrap;
}

.plan-grupa-czeka-znacznik {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #2a1f00;
  background: var(--zloto);
  border-radius: 999px;
  padding: 3px 9px;
  white-space: nowrap;
}

/* --- pojedyncze kroki --- */

.plan-lista {
  list-style: none;
  margin: 0;
  padding: 0 10px 10px;
}

.plan-krok {
  padding: 11px 12px;
  border-top: 1px solid rgba(28, 53, 87, 0.5);
  border-left: 3px solid transparent;
}

.plan-krok.st-czeka {
  border-left-color: var(--zloto);
  background: rgba(201, 162, 39, 0.06);
}

.plan-krok.st-zablokowane {
  border-left-color: var(--ostrzegawczy);
}

.plan-krok-gora {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.plan-krok-numer {
  flex: 0 0 auto;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--tekst-slaby);
  min-width: 2.2em;
}

.plan-krok-tresc {
  flex: 1 1 auto;
  font-size: 14px;
}

.plan-znacznik {
  flex: 0 0 auto;
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--granat-obrys);
  color: var(--tekst-slaby);
  white-space: nowrap;
}

.plan-znacznik.st-zamkniete    { color: var(--dobry); border-color: var(--dobry); }
.plan-znacznik.st-w-toku       { color: var(--akcent); border-color: var(--akcent); }
.plan-znacznik.st-czeka        { color: #2a1f00; background: var(--zloto); border-color: var(--zloto); font-weight: 700; }
.plan-znacznik.st-zablokowane  { color: var(--ostrzegawczy); border-color: var(--ostrzegawczy); }

.plan-krok-dol {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin: 5px 0 0 calc(2.2em + 10px);
  font-size: 12px;
  color: var(--tekst-slaby);
}

.plan-kto::before  { content: "kto: "; color: var(--tekst-slaby); opacity: 0.7; }
.plan-data::before { content: "data: "; color: var(--tekst-slaby); opacity: 0.7; }
.plan-uwagi {
  color: var(--tekst-przygaszony);
  flex-basis: 100%;
}

/* ---------- TELEFON ---------- */

@media (max-width: 700px) {
  .plan-liczby {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .plan-liczba {
    padding: 11px 12px;
  }

  .plan-liczba-ile {
    font-size: 22px;
  }

  .plan-krok-gora {
    flex-wrap: wrap;
  }

  .plan-znacznik {
    margin-left: calc(2.2em + 10px);
  }

  .plan-krok-dol {
    margin-left: 0;
  }

  .plan-wolanie .przycisk {
    width: 100%;
  }
}

/* ---------- ATRYBUCJA ---------- */

.atr-naglowek {
  margin: 26px 0 12px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

/* --- formularz wydania linku --- */

.blok-formularz {
  border-color: var(--akcent);
}

.blok-formularz h2 {
  color: var(--akcent);
}

.formularz-wzor {
  font-size: 12px;
  color: var(--tekst-slaby);
  font-family: ui-monospace, "Cascadia Mono", "Consolas", monospace;
  margin: 0 0 14px;
}

.formularz-rzad {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 14px;
}

.formularz-pole {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1 1 190px;
  min-width: 0;
}

.formularz-pole-szerokie {
  flex: 3 1 300px;
}

.formularz-etykieta {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tekst-slaby);
}

.formularz-wpis,
.formularz-wybor {
  padding: 9px 11px;
  border: 1px solid var(--granat-obrys);
  border-radius: var(--promien);
  background: var(--granat-tlo);
  color: var(--tekst);
  font: inherit;
  font-size: 14px;
  width: 100%;
  min-width: 0;
}

.formularz-wpis:focus,
.formularz-wybor:focus {
  outline: 2px solid var(--akcent);
  outline-offset: 1px;
  border-color: var(--akcent);
}

.formularz-wpis::placeholder {
  color: var(--tekst-slaby);
}

.formularz-blad {
  border-left: 3px solid var(--ostrzegawczy);
  padding: 10px 14px;
  margin-top: 12px;
  font-size: 13px;
  color: var(--ostrzegawczy);
  background: rgba(224, 83, 61, 0.08);
  border-radius: var(--promien);
}

.formularz-blad p {
  margin: 0 0 5px;
  color: var(--ostrzegawczy);
}

.formularz-blad p:last-child {
  margin-bottom: 0;
}

.formularz-sukces {
  display: flex;
  flex-direction: column;
  gap: 9px;
  border: 1px solid var(--dobry);
  border-left: 3px solid var(--dobry);
  padding: 14px 16px;
  margin-top: 14px;
  border-radius: var(--promien);
  background: rgba(63, 176, 122, 0.08);
}

.formularz-sukces-nadpis {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dobry);
  font-weight: 600;
}

.formularz-partner {
  border-top: 1px solid var(--granat-obrys);
  margin-top: 18px;
  padding-top: 16px;
}

.formularz-partner h3 {
  margin: 0 0 12px;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tekst-slaby);
  font-weight: 600;
}

/* --- partner --- */

.partner {
  border: 1px solid var(--granat-obrys);
  border-radius: var(--promien);
  background: var(--granat);
  padding: 16px 18px;
  margin-bottom: 12px;
}

.partner-gora {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
}

.partner-numer {
  font-family: ui-monospace, "Cascadia Mono", "Consolas", monospace;
  font-size: 12px;
  color: var(--zloto);
  background: var(--granat-tlo);
  border: 1px solid var(--granat-obrys);
  border-radius: 6px;
  padding: 2px 7px;
}

.partner-nazwa {
  font-size: 16px;
  font-weight: 600;
  flex: 1 1 auto;
}

.partner-rodzaj {
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--granat-obrys);
  color: var(--tekst-slaby);
  white-space: nowrap;
}

.rodzaj-siec {
  color: var(--akcent);
  border-color: var(--akcent);
}

.rodzaj-bezposredni {
  color: var(--tekst-przygaszony);
}

.partner-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-top: 6px;
  font-size: 12px;
  color: var(--tekst-slaby);
}

.partner-notatka {
  flex-basis: 100%;
  color: var(--tekst-przygaszony);
}

.partner-podpowiedz {
  margin: 10px 0 0;
  font-size: 12px;
  color: var(--tekst-przygaszony);
  border-left: 2px solid var(--granat-obrys);
  padding-left: 10px;
}

/* --- linki partnera --- */

.link-lista {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.link-wiersz {
  border: 1px solid var(--granat-obrys);
  border-radius: var(--promien);
  background: var(--granat-tlo);
  padding: 12px 14px;
}

.link-nieaktywny {
  opacity: 0.55;
}

.link-gora {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 9px;
}

.link-znacznik {
  font-family: ui-monospace, "Cascadia Mono", "Consolas", monospace;
  font-size: 13px;
  font-weight: 700;
  color: var(--zloto-jasne);
}

.link-znacznik-nieaktywny {
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ostrzegawczy);
  border: 1px solid var(--ostrzegawczy);
  border-radius: 999px;
  padding: 2px 7px;
}

.link-opis {
  font-size: 13px;
  color: var(--tekst-przygaszony);
  flex: 1 1 auto;
}

.link-adres-rzad {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  min-width: 0;
}

.link-adres {
  flex: 1 1 auto;
  font-family: ui-monospace, "Cascadia Mono", "Consolas", monospace;
  font-size: 12px;
  color: var(--tekst);
  background: var(--granat);
  border: 1px solid var(--granat-obrys);
  border-radius: 6px;
  padding: 7px 10px;
  overflow-x: auto;
  white-space: nowrap;
}

.przycisk-kopiuj {
  flex: 0 0 auto;
  padding: 7px 13px;
  border: 1px solid var(--granat-obrys);
  border-radius: 6px;
  background: var(--granat-jasny);
  color: var(--tekst);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
}

.przycisk-kopiuj:hover {
  border-color: var(--akcent);
}

.przycisk-kopiuj:focus-visible {
  outline: 2px solid var(--akcent);
  outline-offset: 2px;
}

.przycisk-kopiuj.skopiowane {
  color: var(--dobry);
  border-color: var(--dobry);
}

/* --- liczby, ktorych jeszcze nie mierzymy --- */

.link-liczby {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid rgba(28, 53, 87, 0.6);
}

.link-liczba {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.link-liczba-nazwa {
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tekst-slaby);
}

.link-liczba-wartosc {
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

/* "brak danych" ma wygladac inaczej niz liczba — to nie jest wynik pomiaru. */
.link-liczba-brak .link-liczba-wartosc {
  font-size: 12px;
  font-style: italic;
  font-weight: 400;
  color: var(--tekst-slaby);
}

/* ---------- TELEFON ---------- */

@media (max-width: 700px) {
  .formularz-rzad {
    flex-direction: column;
    gap: 10px;
  }

  .formularz-pole,
  .formularz-pole-szerokie {
    flex: 1 1 auto;
  }

  .blok-formularz .rzad-przyciskow .przycisk {
    flex: 1 1 100%;
  }

  .link-adres-rzad {
    flex-direction: column;
    align-items: stretch;
  }

  .przycisk-kopiuj {
    width: 100%;
  }

  .link-liczby {
    gap: 14px;
  }
}

/* ---------- PSV: kratkownica i braki ---------- */

.blok-psv {
  border-color: var(--zloto);
}

.blok-psv h2 {
  color: var(--zloto-jasne);
}

.psv-ostrzezenie {
  font-size: 13px;
  color: var(--tekst-przygaszony);
  border-left: 3px solid var(--ostrzegawczy);
  padding-left: 12px;
  margin: 0 0 12px;
  max-width: 78ch;
}

.psv-jedno-zrodlo,
.psv-jednorazowo {
  font-size: 12px;
  color: var(--tekst-slaby);
  border-left: 3px solid var(--akcent);
  padding-left: 12px;
  margin: 0 0 12px;
  max-width: 78ch;
}

.psv-liczby {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.psv-liczba {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 11px 13px;
  border: 1px solid var(--granat-obrys);
  border-radius: var(--promien);
  background: var(--granat-tlo);
}

.psv-liczba-nazwa {
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tekst-slaby);
}

.psv-liczba-wartosc {
  font-size: 19px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* --- tabela kratkownicy --- */

.psv-tabela {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.psv-tabela th {
  padding: 10px 12px;
  border-bottom: 1px solid var(--granat-obrys);
  text-align: center;
  vertical-align: bottom;
}

.psv-rog {
  text-align: left !important;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tekst-slaby);
  min-width: 190px;
}

.psv-partner-kol {
  min-width: 96px;
}

.psv-partner-znacznik {
  display: block;
  font-family: ui-monospace, "Cascadia Mono", "Consolas", monospace;
  font-size: 12px;
  color: var(--zloto);
}

.psv-partner-nazwa {
  display: block;
  font-size: 10px;
  font-weight: 400;
  color: var(--tekst-slaby);
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 0 auto;
}

.psv-tabela td {
  padding: 9px 12px;
  border-bottom: 1px solid rgba(28, 53, 87, 0.5);
}

.psv-tabela tbody tr:last-child td {
  border-bottom: 0;
}

.psv-strategia {
  min-width: 190px;
}

.psv-strategia-nazwa {
  display: block;
  font-weight: 600;
}

.psv-strategia-alias {
  display: block;
  font-size: 11px;
  color: var(--tekst-slaby);
  margin-top: 1px;
}

.psv-kratka {
  text-align: center;
  font-size: 16px;
}

.psv-jest .psv-znak {
  color: var(--dobry);
  font-weight: 700;
}

/* Pusta kratka ma rzucac sie w oczy: kazda to strategia niewidoczna
   dla klientow tego partnera. */
.psv-pusta {
  background: rgba(224, 83, 61, 0.13);
}

.psv-pusta .psv-znak {
  color: var(--ostrzegawczy);
  font-weight: 700;
}

/* --- braki --- */

.psv-braki {
  margin: 0;
  padding-left: 20px;
  font-size: 13px;
  color: var(--tekst-przygaszony);
  max-height: 260px;
  overflow-y: auto;
}

.psv-braki li {
  margin-bottom: 5px;
}

/* --- wklejanie --- */

.psv-wklejka {
  font-family: ui-monospace, "Cascadia Mono", "Consolas", monospace;
  font-size: 12px;
  line-height: 1.5;
  resize: vertical;
}

.psv-raport {
  margin-top: 14px;
  border: 1px solid var(--granat-obrys);
  border-radius: var(--promien);
  padding: 14px 16px;
  background: var(--granat-tlo);
}

.psv-raport-nadpis {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dobry);
  font-weight: 600;
  margin: 0 0 8px;
}

.psv-lista-przyjete {
  margin: 0 0 12px;
  padding-left: 20px;
  font-size: 13px;
}

.psv-lista-przyjete li {
  margin-bottom: 3px;
}

.psv-alias {
  color: var(--tekst-slaby);
  font-size: 12px;
}

.psv-obcy {
  color: var(--zloto-jasne);
  font-size: 12px;
}

.psv-kolizje,
.psv-nierozpoznane {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--granat-obrys);
}

.psv-kolizje .psv-raport-nadpis {
  color: var(--ostrzegawczy);
}

.psv-nierozpoznane .psv-raport-nadpis {
  color: var(--zloto-jasne);
}

.psv-kolizje ul,
.psv-nierozpoznane ul {
  margin: 0 0 10px;
  padding-left: 20px;
  font-size: 12px;
  color: var(--tekst-przygaszony);
}

.psv-kolizje li,
.psv-nierozpoznane li {
  margin-bottom: 5px;
}

.psv-nierozpoznane code {
  font-size: 11px;
  color: var(--tekst);
  word-break: break-all;
}

.psv-powod {
  color: var(--tekst-slaby);
}

/* ---------- TELEFON ---------- */

@media (max-width: 700px) {
  .psv-liczby {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Kratkownica przewija sie POZIOMO wewnatrz swojego pudelka —
     strona nigdy nie przewija sie w bok. */
  .psv-tabela {
    min-width: 520px;
  }

  .psv-rog,
  .psv-strategia {
    min-width: 150px;
  }

  .psv-partner-kol {
    min-width: 72px;
  }

  .psv-partner-nazwa {
    max-width: 68px;
  }
}

/* ---------- ARKUSZ ZAMOWIENIA ---------- */

.blok-arkusz {
  border-color: var(--dobry);
}

.blok-arkusz h2 {
  color: var(--dobry);
}

.arkusz-legenda {
  font-size: 12px;
  color: var(--tekst-slaby);
  border-left: 3px solid var(--dobry);
  padding-left: 12px;
  margin: 0 0 14px;
  max-width: 78ch;
}

/* ---------- POPRAWKA: kratkownica PSV przewija sie WEWNATRZ pudelka ---------- */

/* Regula mobilna napisana dla tabeli wynikow wylacza przewijanie w pudelku,
   bo tam wiersze zamieniaja sie w kafle. Kratkownica PSV zostaje tabela
   i musi zachowac wlasne przewijanie — inaczej w bok przewija sie cala strona. */
@media (max-width: 700px) {
  .tabela-owijka.owijka-przewijana {
    overflow-x: auto;
    border: 1px solid var(--granat-obrys);
    background: var(--granat);
    border-radius: var(--promien);
  }
}

/* ---------- ATRYBUCJA: trzy stany pomiaru ----------
   Liczba, zero i brak lacznosci MUSZA wygladac inaczej. Gdyby "brak
   lacznosci" wygladalo jak liczba, awaria czytalaby sie jak wynik; gdyby
   zero wygladalo jak awaria, dzialajacy pomiar czytalby sie jak usterka. */

.link-liczba-dopisek {
  font-size: 10px;
  line-height: 1.3;
  color: var(--tekst-slaby);
}

/* Jest wynik: liczba wyrozniona, bo po to sie tu patrzy. */
.link-liczba-jest .link-liczba-wartosc {
  font-size: 20px;
  font-weight: 700;
  color: var(--zloto-jasne);
}

/* Zero: to PELNOPRAWNY wynik pomiaru, a nie brak. Ton przygaszony,
   ale ksztalt ten sam co liczby — bo to jest liczba. */
.link-liczba-zero .link-liczba-wartosc {
  font-size: 20px;
  font-weight: 700;
  color: var(--tekst-przygaszony);
}

/* Brak lacznosci: celowo NIE jest cyfra i nie da sie go pomylic z zerem. */
.link-liczba-awaria .link-liczba-wartosc {
  font-size: 12px;
  font-style: italic;
  font-weight: 600;
  color: var(--ostrzegawczy);
}

.link-liczba-awaria .link-liczba-dopisek {
  max-width: 34ch;
  color: var(--ostrzegawczy);
  opacity: 0.85;
}

/* ---------- ATRYBUCJA: podsumowanie u gory ---------- */

.blok-podsumowanie {
  border-color: var(--zloto);
}

.blok-podsumowanie h2 {
  color: var(--zloto-jasne);
}

.podsum-kafelki {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 14px 0 12px;
}

.podsum-kafelek {
  display: flex;
  flex: 1 1 150px;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px;
  border: 1px solid var(--granat-obrys);
  border-radius: var(--promien);
  background: var(--granat);
}

.podsum-nazwa {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tekst-slaby);
}

.podsum-wartosc {
  font-size: 30px;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  color: var(--zloto-jasne);
}

.podsum-dopisek {
  font-size: 11px;
  color: var(--tekst-przygaszony);
}

/* Suma niepelna nigdy nie ma prawa wygladac na pewnik. */
.podsum-niepelne {
  margin: 0;
  padding: 9px 11px;
  border: 1px solid var(--ostrzegawczy);
  border-radius: var(--promien);
  color: var(--ostrzegawczy);
  font-size: 13px;
  line-height: 1.45;
}

@media (max-width: 700px) {
  .podsum-kafelek {
    flex: 1 1 100%;
  }
}

/* ---------- Kwota odniesienia przy procencie ----------
   "+98,46% (od 100 startowych)". Mniejsza i przygaszona, bo to przypis
   do liczby, a nie druga liczba. Wlasny wiersz, zeby przy waskiej kolumnie
   nie rozpychala tabeli. */

.kol-odniesienie {
  display: block;
  margin-top: 1px;
  color: var(--tekst-slaby);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0;
  white-space: nowrap;
}

/* Wewnatrz duzej liczby na karcie strategii ton ma byc ten sam,
   tylko odstep wiekszy — tam wartosc jest znacznie wyzsza. */
.statystyka-wartosc .kol-odniesienie {
  margin-top: 3px;
  font-size: 12px;
}

/* ---------- Import PSV: pominiete swiadomie ----------
   Wyglad ma odrozniac "zalatwione" od "do zalatwienia". Nierozpoznane wiersze
   prosza o decyzje; te nie prosza o nic — decyzja juz zapadla i ma sie nie
   odnawiac przy kazdym wczytaniu arkusza. Stad ton spokojny (zielen "dobry"),
   a nie ostrzegawczy. */

.psv-pominiete {
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid var(--granat-obrys);
  border-left: 3px solid var(--dobry);
  border-radius: var(--promien);
  background: rgba(63, 176, 122, 0.06);
}

.psv-pominiete .psv-raport-nadpis {
  color: var(--dobry);
}

.psv-pominiete ul {
  margin: 6px 0 0;
  padding-left: 18px;
  color: var(--tekst-przygaszony);
  font-size: 13px;
}

.psv-pominiete-stopka {
  margin: 8px 0 0;
  color: var(--tekst-slaby);
  font-size: 12px;
}

/* ---------- Pola dla klienta: wpisywanie ---------- */

.blok-pola {
  border-color: var(--granat-obrys);
  margin-top: 18px;
}

.pola-strategia {
  margin-top: 8px;
  border: 1px solid var(--granat-obrys);
  border-radius: var(--promien);
  background: var(--granat);
}

.pola-naglowek {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 9px 12px;
  cursor: pointer;
  list-style: none;
}

.pola-naglowek::-webkit-details-marker { display: none; }

.pola-nazwa { font-weight: 600; }

.pola-alias {
  color: var(--tekst-slaby);
  font-size: 12px;
}

/* Stan uzupelnienia widoczny bez rozwijania — inaczej trzeba by otwierac
   szesnascie sekcji, zeby sprawdzic, gdzie czegos brakuje. */
.pola-stan {
  margin-left: auto;
  color: var(--tekst-przygaszony);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.pola-formularz {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 4px 12px 14px;
  border-top: 1px solid var(--granat-obrys);
}

.formularz-podpowiedz {
  color: var(--tekst-slaby);
  font-size: 11px;
  line-height: 1.35;
}

.pola-komunikat {
  align-self: center;
  font-size: 13px;
  color: var(--tekst-przygaszony);
}

.pola-komunikat-ok { color: var(--dobry); }
.pola-komunikat-blad { color: var(--ostrzegawczy); }

/* ---------- Wartosc wpisana hurtem ----------
   Ma byc widoczna OBOK liczby, nie w przypisie. Liczba wpisana hurtem
   wyglada dokladnie tak samo jak ustalona — i to jest caly problem. */

.znacznik-domyslna,
.pole-tymczasowe-napis {
  display: inline-block;
  padding: 2px 7px;
  border: 1px solid var(--zloto);
  border-radius: 999px;
  background: rgba(201, 162, 39, 0.12);
  color: var(--zloto-jasne);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  vertical-align: middle;
}

.statystyka-wartosc .znacznik-domyslna {
  display: block;
  margin-top: 6px;
}

.pole-tymczasowe {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 5px;
}

.pole-tymczasowe-przycisk {
  padding: 2px 9px;
  border: 1px solid var(--granat-obrys);
  border-radius: 999px;
  background: transparent;
  color: var(--tekst-przygaszony);
  font-family: inherit;
  font-size: 11px;
  cursor: pointer;
}

.pole-tymczasowe-przycisk:hover {
  border-color: var(--akcent);
  color: var(--tekst);
}

/* ---------- Zgloszenia kandydatow ---------- */

.blok-zgloszenia { border-color: var(--akcent); }
.blok-zgloszenia h2 { color: var(--akcent); }

.zgloszenie {
  margin-top: 8px;
  border: 1px solid var(--granat-obrys);
  border-radius: var(--promien);
  background: var(--granat);
}

.zgloszenie-nowe { border-color: var(--akcent); }

.zgloszenie-naglowek {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 12px;
  cursor: pointer;
  list-style: none;
}

.zgloszenie-naglowek::-webkit-details-marker { display: none; }

.zgloszenie-plakietka {
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--akcent);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
}

.zgloszenie-kto { font-weight: 600; }
.zgloszenie-kiedy { color: var(--tekst-slaby); font-size: 12px; }

.zgloszenie-stan {
  padding: 1px 8px;
  border: 1px solid var(--granat-obrys);
  border-radius: 999px;
  color: var(--tekst-przygaszony);
  font-size: 11px;
}

.stan-gotowy { border-color: var(--dobry); color: var(--dobry); }
.stan-odrzucony { border-color: var(--ostrzegawczy); color: var(--ostrzegawczy); }

/* Plakietka "na kim stoi sprawa" — przy dluzszej liscie to jedyna kolumna,
   ktora sie liczy, wiec stoi na koncu wiersza i jest najmocniejsza. */
.zgloszenie-stoi {
  margin-left: auto;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.stoi-wlascicielka { background: rgba(201, 162, 39, 0.18); color: var(--zloto-jasne); }
.stoi-kandydat     { background: rgba(69, 124, 253, 0.16); color: var(--akcent); }
.stoi-broker       { background: rgba(147, 164, 190, 0.14); color: var(--tekst-przygaszony); }
.stoi-nikt         { background: transparent; color: var(--tekst-slaby); }

.zgloszenie-wnetrze {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 4px 12px 14px;
  border-top: 1px solid var(--granat-obrys);
}

.zgloszenie-dane {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.zgloszenie-pole { display: flex; flex-direction: column; gap: 1px; }

.zgloszenie-etykieta {
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tekst-slaby);
}

.zgloszenie-wartosc { font-size: 13px; }

.zgloszenie-notatka {
  margin: 0;
  padding: 9px 11px;
  border-left: 3px solid var(--granat-obrys);
  background: var(--granat-tlo);
  font-size: 13px;
  line-height: 1.5;
}

.zgloszenie-co-dalej { margin: 0; color: var(--tekst-przygaszony); font-size: 13px; }

.zgloszenie-przeszkoda {
  margin: 0;
  color: var(--ostrzegawczy);
  font-size: 12px;
}

.zgloszenie-komunikat { margin: 0; font-size: 13px; color: var(--tekst-przygaszony); }

.zgloszenie-dziennik { font-size: 13px; color: var(--tekst-przygaszony); }
.zgloszenie-dziennik summary { cursor: pointer; }

.przycisk-drugi {
  background: transparent;
  border: 1px solid var(--granat-obrys);
  color: var(--tekst-przygaszony);
}

.przycisk-drugi:hover { border-color: var(--akcent); color: var(--tekst); }

/* Licznik nowych zgloszen w menu — widoczny z kazdej zakladki. */
.menu-licznik {
  margin-left: auto;
  min-width: 20px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--akcent);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  text-align: center;
}

/* ---------- Panel kandydata ---------- */

.etapy {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
  counter-reset: etap;
}

.etap {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 1 1 150px;
  padding: 8px 10px;
  border: 1px solid var(--granat-obrys);
  border-radius: var(--promien);
  color: var(--tekst-slaby);
  font-size: 12px;
}

.etap-numer {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 11px;
}

.etap-za-nami { border-color: var(--dobry); color: var(--dobry); }
.etap-teraz {
  border-color: var(--zloto);
  background: rgba(201, 162, 39, 0.1);
  color: var(--zloto-jasne);
  font-weight: 600;
}

.kandydat-co-dalej { font-size: 16px; line-height: 1.55; }

.kandydat-linki-brak {
  margin: 0;
  padding: 11px 13px;
  border: 1px dashed var(--granat-obrys);
  border-radius: var(--promien);
  color: var(--tekst-przygaszony);
  font-size: 13px;
  line-height: 1.5;
}

.blok-gotowe { border-color: var(--dobry); }
.blok-gotowe h2 { color: var(--dobry); }

.formularz-zgoda {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 14px;
  line-height: 1.45;
  cursor: pointer;
}

.formularz-zgoda input { margin-top: 3px; flex: 0 0 auto; }

@media (max-width: 700px) {
  .zgloszenie-stoi { margin-left: 0; }
  .zgloszenie-dane { gap: 12px; }
  .etap { flex: 1 1 100%; }
}

/* ---------- Dziennik ---------- */

.zadanie {
  margin-top: 8px;
  padding: 10px 12px;
  border: 1px solid var(--granat-obrys);
  border-radius: var(--promien);
  background: var(--granat);
}

/* Zadanie, ktore nie odpalilo, ma sie roznic od tla, a nie zlewac z lista. */
.zadanie-uwaga {
  border-color: var(--ostrzegawczy);
  background: rgba(224, 83, 61, 0.07);
}

.zadanie-gora {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.zadanie-nazwa { font-weight: 600; }

.zadanie-stan {
  margin-left: auto;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.stan-w-porzadku      { background: rgba(63, 176, 122, 0.14); color: var(--dobry); }
.stan-jeszcze-nie-pora{ background: rgba(147, 164, 190, 0.12); color: var(--tekst-przygaszony); }
.stan-wylaczone       { background: transparent; color: var(--tekst-slaby); }
.stan-zalegle,
.stan-nigdy-nie-odpalilo,
.stan-nigdy-sie-nie-udalo { background: rgba(224, 83, 61, 0.18); color: var(--ostrzegawczy); }

.zadanie-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 5px;
  color: var(--tekst-przygaszony);
  font-size: 12px;
}

.zadanie-opis { margin: 6px 0 0; color: var(--tekst-slaby); font-size: 12px; }

/* Pusty dziennik nie ma prawa wygladac uspokajajaco. */
.dziennik-pusto {
  margin: 0;
  padding: 12px 14px;
  border: 1px dashed var(--ostrzegawczy);
  border-radius: var(--promien);
  color: var(--ostrzegawczy);
  font-size: 13px;
  line-height: 1.5;
}

.tabela-dziennika .zdarzenie-szczegoly {
  display: block;
  margin-top: 2px;
  color: var(--tekst-slaby);
  font-size: 11px;
  line-height: 1.35;
}

.wiersz-nieudany { background: rgba(224, 83, 61, 0.07); }
.wynik-nieudane  { color: var(--ostrzegawczy); font-weight: 700; }
.wynik-udane     { color: var(--dobry); }
.wynik-pominiete { color: var(--tekst-slaby); }

@media (max-width: 700px) {
  .zadanie-stan { margin-left: 0; }
}

/* Pominiete: zadanie dziala, ale nic nie robi. Nie czerwien awarii, ale tez
   nie zielen sukcesu — bo efektu nie ma. */
.stan-pominiete { background: rgba(201, 162, 39, 0.16); color: var(--zloto-jasne); }

/* ---------- Rachunki: sprzecznosci ---------- */

.sprzecznosc {
  margin-top: 8px;
  padding: 10px 12px;
  border: 1px solid var(--granat-obrys);
  border-radius: var(--promien);
  background: var(--granat);
}

/* Rozstrzygnieta nadal JEST sprzecznoscia — widac ja, ale spokojnym tonem. */
.sprzecznosc-rozstrzygnieta { border-left: 3px solid var(--dobry); }

.sprzecznosc-blokuje {
  border-color: var(--ostrzegawczy);
  background: rgba(224, 83, 61, 0.07);
}

.sprzecznosc-gora { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sprzecznosc-numer { font-size: 14px; font-weight: 600; color: var(--zloto-jasne); }

.sprzecznosc-plakietka {
  margin-left: auto;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.sprzecznosc-rozstrzygnieta .sprzecznosc-plakietka {
  background: rgba(63, 176, 122, 0.14);
  color: var(--dobry);
}

.sprzecznosc-blokuje .sprzecznosc-plakietka {
  background: rgba(224, 83, 61, 0.18);
  color: var(--ostrzegawczy);
}

.sprzecznosc-rdzen { margin: 6px 0 0; font-size: 12px; color: var(--tekst-przygaszony); }
.sprzecznosc-powod { margin: 6px 0 0; font-size: 12px; color: var(--tekst-slaby); line-height: 1.45; }

@media (max-width: 700px) {
  .sprzecznosc-plakietka { margin-left: 0; }
}

/* Strefa przy godzinie. Na tej maszynie jedne zadania sa planowane w UTC,
   a inne w czasie polskim — i to musi byc widac przy wpisie. */
.zdarzenie-strefa {
  display: block;
  margin-top: 2px;
  color: var(--tekst-slaby);
  font-size: 10px;
  white-space: nowrap;
}

.zadanie-pora {
  padding: 1px 7px;
  border: 1px solid var(--granat-obrys);
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
}

.zadanie-cudze {
  padding: 1px 8px;
  border-radius: 999px;
  background: rgba(147, 164, 190, 0.14);
  color: var(--tekst-przygaszony);
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ---------- Poczta ---------- */

.zgloszenie-poczty {
  margin-top: 8px;
  padding: 2px 12px 10px;
  border: 1px solid var(--granat-obrys);
  border-radius: var(--promien);
  background: var(--granat);
}

.poczta-dni {
  margin-left: auto;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  background: rgba(63, 176, 122, 0.14);
  color: var(--dobry);
}

/* Mniej niz 7 dni ma kluc w oczy, a po terminie — jeszcze bardziej. */
.pilnosc-mniej-niz-7-dni { border-color: var(--zloto); }
.pilnosc-mniej-niz-7-dni .poczta-dni {
  background: rgba(201, 162, 39, 0.2);
  color: var(--zloto-jasne);
}

.pilnosc-po-terminie {
  border-color: var(--ostrzegawczy);
  background: rgba(224, 83, 61, 0.08);
}
.pilnosc-po-terminie .poczta-dni {
  background: rgba(224, 83, 61, 0.2);
  color: var(--ostrzegawczy);
}

.pilnosc-zalatwione { opacity: 0.7; }
.pilnosc-zalatwione .poczta-dni {
  background: transparent;
  color: var(--tekst-slaby);
}

/* ---------- Rejestr danych ---------- */

.pozycja-rejestru { margin-top: 10px; }

.rejestr-rodzaj {
  padding: 1px 8px;
  border: 1px solid var(--granat-obrys);
  border-radius: 999px;
  color: var(--tekst-przygaszony);
  font-size: 11px;
}

.rejestr-status {
  margin-left: auto;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.status-niezbedny { background: rgba(63,176,122,0.14); color: var(--dobry); }
.status-wymaga_zgody { background: rgba(201,162,39,0.18); color: var(--zloto-jasne); }
/* Nierozstrzygniety to WARTOSC, nie brak — i ma byc widoczny do czasu decyzji. */
.status-nierozstrzygniety { background: rgba(69,124,253,0.18); color: var(--akcent); }

.rejestr-akapit { margin: 8px 0 0; font-size: 13px; line-height: 1.55; }
.rejestr-uwagi {
  margin: 10px 0 0;
  padding: 9px 11px;
  border-left: 3px solid var(--zloto);
  background: var(--granat-tlo);
  font-size: 12px;
  color: var(--tekst-przygaszony);
}

@media (max-width: 700px) {
  .poczta-dni, .rejestr-status { margin-left: 0; }
}

/* Godzina przeliczona ma wygladac inaczej niz zadeklarowana — inaczej
   czytaloby sie je jako dwie rownorzedne godziny zadania. */
.zadanie-pora-przeliczona {
  padding: 1px 7px;
  border: 1px dashed var(--granat-obrys);
  border-radius: 999px;
  color: var(--tekst-slaby);
  font-variant-numeric: tabular-nums;
}

.zadanie-bez-strefy {
  color: var(--tekst-slaby);
  font-style: italic;
}