:root{--bg:#f1f5f9;--bg2:#e2e8f0;--panel:#ffffff;--panel2:#f8fafc;--text:#0b1220;--muted:#64748b;--linia:#e2e8f0;--linia2:#cbd5e1;--akcent:#0ea5e9;--akcent2:#0284c7;--akcent3:#0369a1;--akcent-jasny:#e0f2fe;--granat:#0f172a;--granat2:#1e293b;--ok:#059669;--ok-tlo:#d1fae5;--ostrz:#d97706;--ostrz-tlo:#fef3c7;--blad:#dc2626;--blad-tlo:#fee2e2;--info-tlo:#e0f2fe;--cien:0 1px 2px rgba(15,23,42,.04),0 2px 8px rgba(15,23,42,.06);--cien2:0 8px 24px rgba(15,23,42,.10);--cien3:0 0 0 3px var(--akcent-jasny);--r:12px;--r2:14px;--pasek:58px;}
*{box-sizing:border-box}html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-size:15px;line-height:1.5;font-family:"Segoe UI Variable Text","Segoe UI",Inter,Roboto,system-ui,Arial,sans-serif;-webkit-font-smoothing:antialiased;background-image:radial-gradient(1200px 400px at 50% -140px,var(--akcent-jasny),transparent)}

/* --- gorny pasek --- */
.topbar{background:var(--granat);color:#e2e8f0;position:sticky;top:0;z-index:50;box-shadow:var(--cien2)}
.topbar .in{max-width:1400px;margin:0 auto;padding:0 20px;display:flex;align-items:center;gap:22px;flex-wrap:wrap;min-height:var(--pasek)}
.marka{font-weight:700;white-space:nowrap;font-size:17px;letter-spacing:-.01em;color:#fff;display:flex;align-items:center;gap:9px}
.marka::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--akcent);box-shadow:0 0 0 4px rgba(14,165,233,.25)}
.nav{display:flex;gap:3px;flex-wrap:wrap;flex:1}
.nav a{color:#94a3b8;text-decoration:none;padding:8px 13px;border-radius:9px;font-weight:500;font-size:14px;transition:background .15s,color .15s}
.nav a:hover{color:#fff;background:var(--granat2);text-decoration:none}
.nav a.akt{color:#fff;background:var(--akcent2);font-weight:600;box-shadow:0 2px 8px rgba(2,132,199,.35)}
.uzyt{color:#94a3b8;font-size:13px;display:flex;align-items:center;gap:10px}
.uzyt a{color:#cbd5e1}

/* --- uklad strony --- */
.wrap{max-width:1400px;margin:0 auto;padding:20px}
.panel{background:var(--panel);border:1px solid var(--linia);border-radius:var(--r2);padding:22px;margin:16px 0;box-shadow:var(--cien)}
.panel.waski{max-width:430px;margin:70px auto}
h1{font-size:23px;margin:0 0 18px;letter-spacing:-.025em;font-weight:680;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
h2{font-size:12px;margin:24px 0 11px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.08em}
h2:first-child{margin-top:0}
a{color:var(--akcent2);text-decoration:none}a:hover{text-decoration:underline}
.mini{color:var(--muted);font-size:13px}

/* --- formularze --- */
label{display:block;font-size:12.5px;color:var(--muted);margin:12px 0 5px;font-weight:600}
input[type=text],input[type=password],input[type=search],select,textarea{width:100%;padding:10px 13px;border:1px solid var(--linia2);border-radius:10px;font-size:15px;font-family:inherit;background:#fff;color:var(--text);transition:border-color .15s,box-shadow .15s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--akcent);box-shadow:var(--cien3)}

/* --- przyciski --- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;background:linear-gradient(180deg,var(--akcent),var(--akcent2));color:#fff;border:1px solid transparent;border-radius:10px;padding:9px 17px;font-size:14px;font-weight:600;cursor:pointer;font-family:inherit;text-decoration:none;transition:transform .1s,box-shadow .15s,background .15s;white-space:nowrap;box-shadow:0 1px 3px rgba(2,132,199,.3)}
.btn:hover{background:linear-gradient(180deg,var(--akcent2),var(--akcent3));text-decoration:none;box-shadow:0 4px 12px rgba(2,132,199,.35)}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.5;cursor:default;box-shadow:none;transform:none}
.btn.sec{background:var(--panel);color:var(--text);border-color:var(--linia2);box-shadow:none}
.btn.sec:hover{background:var(--panel2);border-color:var(--akcent);color:var(--akcent3)}
.btn.mal{padding:6px 11px;font-size:13px}
.btn.duzy{padding:12px 22px;font-size:15px}
.btn.grozny{color:var(--blad);border-color:#fca5a5;background:var(--panel)}
.btn.grozny:hover{background:var(--blad-tlo);border-color:var(--blad);color:var(--blad)}
.akcje{display:flex;gap:9px;flex-wrap:wrap;margin:14px 0}

/* --- komunikaty --- */
.komunikat{padding:12px 15px;border-radius:10px;margin:12px 0;font-size:14px;display:none;border:1px solid transparent;font-weight:500}
.komunikat.blad{background:var(--blad-tlo);color:var(--blad);border-color:#fecaca;display:block}
.komunikat.ok{background:var(--ok-tlo);color:var(--ok);border-color:#a7f3d0;display:block}
.komunikat.info{background:var(--info-tlo);color:var(--akcent3);border-color:#bae6fd;display:block}

/* --- wskaznik pracy --- */
.laduje{display:inline-block;width:15px;height:15px;border:2px solid var(--linia2);border-top-color:var(--akcent);border-radius:50%;animation:obrot .7s linear infinite;vertical-align:-2px;margin-right:8px}
@keyframes obrot{to{transform:rotate(360deg)}}
@keyframes wejscie{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.wchodzi{animation:wejscie .22s ease}

/* --- tabele --- */
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{text-align:left;padding:11px 13px;border-bottom:1px solid var(--linia)}
th{color:var(--muted);font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.06em;background:var(--panel2);z-index:2;/* bez position:sticky - naglowek w kontenerze z przewijaniem poziomym
   przesuwal sie i zaslanial pierwszy wiersz wynikow */
box-shadow:inset 0 -1px 0 var(--linia2)}
tbody tr{transition:background .12s}
tbody tr:hover td{background:var(--akcent-jasny)}
tbody tr.klik{cursor:pointer}
tbody tr:last-child td{border-bottom:0}
.tabela-scroll{overflow-x:auto;border:1px solid var(--linia);border-radius:var(--r);background:var(--panel)}
/* odstep, zeby przyklejony naglowek tabeli nie zaslanial pierwszego wiersza */
#wyniki,#tresc,#szczegoly,#panel-szczegoly,.tabela-scroll{scroll-margin-top:calc(var(--pasek) + 72px)}

/* --- kafelki danych --- */
.pary{display:grid;grid-template-columns:repeat(auto-fit,minmax(235px,1fr));gap:11px}
.para{border:1px solid var(--linia);border-radius:11px;padding:12px 14px;background:var(--panel2);transition:border-color .15s}
.para:hover{border-color:var(--linia2)}
.para .et{font-size:10.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.07em;font-weight:700;margin-bottom:4px}
.para .wa{font-size:15px;word-break:break-word;font-weight:500}
.para.duzy .wa{font-size:28px;font-weight:750;line-height:1.15;letter-spacing:-.02em}
.para.uwaga{border-color:#fca5a5;background:var(--blad-tlo)}
.para.uwaga .wa{color:var(--blad)}
.para.dzis{border-color:#7dd3fc;background:var(--akcent-jasny)}
.para.dzis .wa{color:var(--akcent3)}
.para.dobry{border-color:#6ee7b7;background:var(--ok-tlo)}
.para.dobry .wa{color:var(--ok)}

/* --- etykiety stanu --- */
.plakietka{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:650;white-space:nowrap;border:1px solid transparent}
.plakietka::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.plakietka.ok{background:var(--ok-tlo);color:var(--ok);border-color:#6ee7b7}
.plakietka.blad{background:var(--blad-tlo);color:var(--blad);border-color:#fca5a5}
.plakietka.ostrz{background:var(--ostrz-tlo);color:var(--ostrz);border-color:#fcd34d}
.plakietka.info{background:var(--akcent-jasny);color:var(--akcent3);border-color:#7dd3fc}
.plakietka.szary{background:var(--panel2);color:var(--muted);border-color:var(--linia2)}
.stan-on{color:var(--ok);font-weight:650}.stan-off{color:var(--blad);font-weight:650}

/* --- zakladki --- */
.zakladki{display:flex;gap:3px;flex-wrap:wrap;margin:0 0 20px;border-bottom:1px solid var(--linia)}
.zakladki button{background:none;border:0;border-bottom:2px solid transparent;padding:10px 15px;cursor:pointer;font-size:14px;font-family:inherit;color:var(--muted);font-weight:600;border-radius:9px 9px 0 0;transition:color .15s,background .15s;margin-bottom:-1px}
.zakladki button:hover{color:var(--akcent3);background:var(--panel2)}
.zakladki button.akt{color:var(--akcent3);border-bottom-color:var(--akcent);background:var(--akcent-jasny)}

/* --- paginacja --- */
.strony{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:16px 0 4px;justify-content:space-between}
.strony .lewo{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.strony .info{color:var(--muted);font-size:13px;font-weight:500}

/* --- pasek filtrow --- */
.filtry{display:flex;gap:13px;flex-wrap:wrap;align-items:flex-end}
.filtry label{margin-top:0}
.filtry .rosnie{flex:1;min-width:230px}
.skrot-klaw{display:inline-block;padding:1px 6px;border:1px solid var(--linia2);border-bottom-width:2px;border-radius:5px;font-size:11px;color:var(--muted);font-family:Consolas,monospace;background:var(--panel2)}

pre{white-space:pre-wrap;margin:0;font-family:Consolas,"Cascadia Mono",monospace;font-size:13px;line-height:1.55}
.stopka{color:var(--muted);font-size:12px;text-align:center;padding:20px}

@media(max-width:820px){th{position:static}}
@media(max-width:620px){.wrap{padding:11px}.panel{padding:16px}.panel.waski{margin:24px auto}.topbar .in{padding:0 11px;gap:9px;min-height:52px}
.nav{gap:2px;font-size:14px;order:3;width:100%;padding-bottom:7px}
.nav a{padding:6px 11px}.strony{justify-content:center}}
@media(max-width:480px){h1{font-size:20px}body{font-size:14px}}