:root {
  --tlo: #f4f6f8;
  --powierzchnia: #ffffff;
  --powierzchnia-2: #f8fafb;
  --ramka: #dde3e8;
  --tekst: #17212b;
  --tekst-2: #4a5866;
  --tekst-3: #6f7d8a;
  --akcent: #1f5f8b;
  --akcent-tekst: #ffffff;
  --akcent-jasny: #e6f0f7;
  --seria: #2a6f9e;
  --siatka: #e7ebef;
  --ostrzezenie: #8a5a00;
  --ostrzezenie-tlo: #fff4dc;
  --blad: #a12a2a;
  --blad-tlo: #fdeaea;
  --reczna: #7a3e9d;
  --reczna-tlo: #f3eaf8;
  --cien: 0 1px 2px rgba(16, 24, 32, .06), 0 4px 16px rgba(16, 24, 32, .05);
  --promien: 12px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --tlo: #0f1418;
    --powierzchnia: #171e24;
    --powierzchnia-2: #1c242b;
    --ramka: #2b353e;
    --tekst: #e6ebef;
    --tekst-2: #b0bcc6;
    --tekst-3: #8796a3;
    --akcent: #5aa3d6;
    --akcent-tekst: #0b1620;
    --akcent-jasny: #1b2d3b;
    --seria: #6bb2e3;
    --siatka: #26313a;
    --ostrzezenie: #f0c060;
    --ostrzezenie-tlo: #2e2614;
    --blad: #f08a8a;
    --blad-tlo: #3a1c1c;
    --reczna: #c9a0e6;
    --reczna-tlo: #2c2036;
    --cien: none;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--tlo);
  color: var(--tekst);
  font: 15px/1.5 "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  font-variant-numeric: tabular-nums;
}
.kontener { max-width: 1120px; margin: 0 auto; padding: 0 16px; }
.ukryte { display: none !important; }

.naglowek { background: var(--powierzchnia); border-bottom: 1px solid var(--ramka); padding: 20px 0 16px; }
.naglowek h1 { margin: 0; font-size: 24px; letter-spacing: -.01em; }
.podtytul { margin: 2px 0 0; color: var(--tekst-3); }

main { padding-top: 20px; padding-bottom: 32px; display: grid; gap: 16px; }
.panel { background: var(--powierzchnia); border: 1px solid var(--ramka); border-radius: var(--promien); padding: 18px 20px; box-shadow: var(--cien); min-width: 0; }
h2 { font-size: 17px; margin: 0 0 12px; }
h2 small, .tytul-z-akcja small { color: var(--tekst-3); font-weight: 400; font-size: 13px; }
h3 { font-size: 14px; margin: 20px 0 8px; color: var(--tekst-2); text-transform: uppercase; letter-spacing: .04em; }

/* sterowanie */
.sterowanie { display: grid; gap: 14px; }
.przelacznik { display: inline-flex; background: var(--powierzchnia-2); border: 1px solid var(--ramka); border-radius: 999px; padding: 3px; width: max-content; max-width: 100%; }
.przelacznik button { border: 0; background: transparent; color: var(--tekst-2); padding: 6px 16px; border-radius: 999px; font: inherit; cursor: pointer; }
.przelacznik button.aktywny { background: var(--akcent); color: var(--akcent-tekst); }
.pola { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: flex-start; }
.pola.male .pole { flex: 1 1 120px; }
.pole { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--tekst-2); min-width: 0; }
.pole small { color: var(--tekst-3); }
.opcjonalne { color: var(--tekst-3); }
input, select {
  font: inherit; color: var(--tekst); background: var(--powierzchnia);
  border: 1px solid var(--ramka); border-radius: 8px; padding: 7px 10px; min-height: 38px; max-width: 100%;
}
input:focus, select:focus, button:focus-visible { outline: 2px solid var(--akcent); outline-offset: 1px; }
.z-jednostka { display: flex; align-items: center; gap: 6px; }
.z-jednostka input { width: 110px; }
.przyciski { display: flex; flex-wrap: wrap; gap: 10px; }
button { font: inherit; cursor: pointer; border-radius: 8px; padding: 8px 16px; border: 1px solid var(--akcent); background: var(--akcent); color: var(--akcent-tekst); }
button.drugorzedny { background: transparent; color: var(--akcent); }
a.przycisk { display: inline-block; text-decoration: none; border-radius: 8px; padding: 8px 16px; border: 1px solid var(--akcent); background: var(--akcent); color: var(--akcent-tekst); }
.archiwum-tabela { margin-top: 12px; max-height: 420px; overflow-y: auto; }
.archiwum-tabela thead th { position: sticky; top: 0; background: var(--powierzchnia); }
button:disabled { opacity: .6; cursor: progress; }

.komunikat { border-radius: 10px; padding: 10px 14px; background: var(--ostrzezenie-tlo); color: var(--ostrzezenie); }
.komunikat.blad { background: var(--blad-tlo); color: var(--blad); }

/* baner ceny */
.cena-baner {
  display: grid; grid-template-columns: minmax(220px, auto) 1fr; gap: 16px 32px; align-items: center;
  background: var(--akcent-jasny); border: 1px solid var(--ramka); border-radius: var(--promien); padding: 18px 22px;
}
.cena-baner.reczna { background: var(--reczna-tlo); }
.cena-glowna { display: flex; flex-direction: column; }
.cena-glowna .etykieta { color: var(--tekst-2); font-size: 13px; }
.cena-glowna .wartosc { font-size: 40px; font-weight: 650; letter-spacing: -.02em; line-height: 1.1; }
.znacznik { align-self: flex-start; margin-top: 6px; font-size: 11px; font-weight: 700; letter-spacing: .06em; color: var(--reczna); border: 1px solid currentColor; border-radius: 999px; padding: 1px 8px; }
.cena-szczegoly { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px 20px; }
.cena-szczegoly dt { font-size: 12px; color: var(--tekst-3); }
.cena-szczegoly dd { margin: 0; font-weight: 600; }

/* karty wyników */
.siatka { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }
.wzor { margin: 0 0 12px; color: var(--tekst-2); font-size: 14px; }
.wzor b { color: var(--tekst); }
.kafle { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.kafel { background: var(--powierzchnia-2); border: 1px solid var(--ramka); border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; }
.kafel span { font-size: 13px; color: var(--tekst-2); }
.kafel strong { font-size: 28px; line-height: 1.2; }
.kafel em { font-style: normal; font-size: 12px; color: var(--tekst-3); }
.przypis { color: var(--tekst-3); font-size: 13px; margin: 10px 0 0; }
.kwota { margin: 12px 0 0; font-size: 15px; color: var(--tekst-2); }
.kwota strong { font-size: 20px; color: var(--tekst); }

/* tabele */
.przewijana { overflow-x: auto; }
.tabela { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabela th { text-align: left; font-weight: 600; color: var(--tekst-3); font-size: 12px; border-bottom: 1px solid var(--ramka); padding: 6px 8px; }
.tabela td { padding: 6px 8px; border-bottom: 1px solid var(--siatka); }
.tabela .l, .tabela td.l { text-align: right; }
.tabela tr.wyroznij td { background: var(--akcent-jasny); font-weight: 600; }
.tabela tfoot td { font-weight: 700; border-top: 2px solid var(--ramka); }
.tabela td.brak { color: var(--blad); }
.tabela.edycja input { width: 100%; min-height: 32px; padding: 4px 8px; }
.tabela.edycja td { border: 0; padding: 3px 4px; }

/* wykres */
.tytul-z-akcja { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.wykres { width: 100%; min-height: 220px; position: relative; }
.wykres svg { display: block; width: 100%; height: auto; }
.wykres .os text { fill: var(--tekst-3); font-size: 11px; }
.wykres .os line { stroke: var(--siatka); }
.wykres .linia { fill: none; stroke: var(--seria); stroke-width: 2; stroke-linejoin: round; }
.wykres .srednia { stroke: var(--tekst-2); stroke-width: 1; stroke-dasharray: 4 4; }
.wykres .srednia-tekst { fill: var(--tekst-2); font-size: 11px; }
.wykres .krzyz { stroke: var(--tekst-3); stroke-width: 1; }
.wykres .punkt { fill: var(--seria); stroke: var(--powierzchnia); stroke-width: 2; }
.dymek { position: fixed; pointer-events: none; z-index: 10; background: var(--powierzchnia); color: var(--tekst); border: 1px solid var(--ramka); border-radius: 8px; padding: 6px 10px; font-size: 13px; box-shadow: var(--cien); }
.dymek b { display: block; }
.dymek span { color: var(--tekst-3); font-size: 12px; }

details.zalacznik { margin-top: 12px; }
details summary { cursor: pointer; color: var(--akcent); }
#panelParametrow > summary { list-style: none; display: flex; align-items: baseline; gap: 10px; color: var(--tekst); }
#panelParametrow > summary h2 { display: inline; margin: 0; }
#panelParametrow > summary::before { content: "▸"; color: var(--akcent); }
#panelParametrow[open] > summary::before { content: "▾"; }
#panelParametrow > summary small { color: var(--tekst-3); }
.parametry { display: grid; gap: 14px; margin-top: 12px; }
.parametry fieldset { border: 1px solid var(--ramka); border-radius: 10px; display: flex; flex-wrap: wrap; gap: 10px 14px; padding: 12px 14px; margin: 0; min-width: 0; }
.parametry legend { color: var(--tekst-2); font-weight: 600; padding: 0 6px; }
.parametry .pole { flex: 1 1 150px; }
.parametry .pelna { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 10px 14px; }
.parametry .pelna .pole { flex: 1 1 200px; }

.stopka { border-top: 1px solid var(--ramka); background: var(--powierzchnia); color: var(--tekst-3); font-size: 13px; padding: 14px 0; }
.stopka .kontener { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.stopka span:first-child { color: var(--tekst-2); font-weight: 600; }
.stopka a { color: var(--akcent); }

@media (max-width: 640px) {
  .cena-baner { grid-template-columns: 1fr; }
  .cena-glowna .wartosc { font-size: 32px; }
  .kafle { grid-template-columns: 1fr; }
  .siatka { grid-template-columns: 1fr; }
  .panel { padding: 14px; }
}

@media print {
  body { background: #fff; color: #000; font-size: 11pt; }
  .sterowanie, .przyciski, button, #panelParametrow, #archiwum, .komunikat, .naglowek .podtytul, .wykres { display: none !important; }
  .panel, .cena-baner { box-shadow: none; border: 1px solid #bbb; break-inside: avoid; }
  details.zalacznik > *:not(summary) { display: block !important; }
  details.zalacznik summary { display: none; }
  .stopka { border: 0; }
}