:root {
  --tlo: #f6f7f9; --karta: #ffffff; --tekst: #1c2430; --przygaszony: #5b6676; --linia: #d9dee6;
  --akcent: #1f5fbf; --akcent-tlo: #e8f0fc; --ok: #1d7a46; --ok-tlo: #e6f4ec; --uwaga: #8a5a00; --uwaga-tlo: #fff3d6;
  --blad: #b3261e; --blad-tlo: #fde8e7; --promien: 10px;
}
@media (prefers-color-scheme: dark) {
  :root { --tlo: #12161c; --karta: #1b212a; --tekst: #e6eaf0; --przygaszony: #a3adbb; --linia: #2e3743;
          --akcent: #7fb0ff; --akcent-tlo: #1d2a40; --ok: #7fd3a3; --ok-tlo: #17301f; --uwaga: #f0c26b; --uwaga-tlo: #3a2e12;
          --blad: #ff8f86; --blad-tlo: #3d1a18; }
}
* { box-sizing: border-box; }
body { margin: 0; font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background: var(--tlo); color: var(--tekst); }
a { color: var(--akcent); }
:focus-visible { outline: 3px solid var(--akcent); outline-offset: 2px; }
.pomin { position: absolute; left: -9999px; } .pomin:focus { left: 1rem; top: .5rem; background: var(--karta); padding: .5rem; z-index: 9; }
.naglowek { display: flex; gap: 1rem; align-items: center; padding: .75rem 1rem; background: var(--karta); border-bottom: 1px solid var(--linia); position: sticky; top: 0; }
.marka { font-weight: 700; font-size: 1.1rem; text-decoration: none; color: var(--tekst); margin-right: auto; }
.uzytkownik { color: var(--przygaszony); font-size: .9rem; }
main { max-width: 960px; margin: 0 auto; padding: 1rem; }
h1 { font-size: 1.5rem; margin: .5rem 0 1rem; } h2 { font-size: 1.15rem; margin: 1.5rem 0 .5rem; }
.karta { background: var(--karta); border: 1px solid var(--linia); border-radius: var(--promien); padding: 1rem; margin-bottom: .75rem; }
.formularz { display: grid; gap: .5rem; max-width: 380px; }
input, select { font: inherit; padding: .6rem .7rem; border: 1px solid var(--linia); border-radius: 8px; background: var(--karta); color: var(--tekst); min-height: 44px; }
.przycisk { font: inherit; font-weight: 600; padding: .6rem 1rem; min-height: 44px; border-radius: 8px; border: 1px solid var(--akcent); background: var(--akcent); color: #fff; cursor: pointer; }
.przycisk.drugorzedny { background: transparent; color: var(--akcent); }
.szukaj { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1rem; } .szukaj input { flex: 1 1 220px; } .szukaj select { flex: 0 1 220px; }
.lista { list-style: none; padding: 0; margin: 0; }
.lista a.karta { display: block; text-decoration: none; color: inherit; }
.lista a.karta:hover { border-color: var(--akcent); }
.meta { color: var(--przygaszony); font-size: .9rem; display: flex; gap: .4rem 1rem; flex-wrap: wrap; }
.znacznik { display: inline-block; font-size: .8rem; font-weight: 600; padding: .1rem .5rem; border-radius: 999px; background: var(--akcent-tlo); color: var(--akcent); }
.znacznik.ok { background: var(--ok-tlo); color: var(--ok); } .znacznik.uwaga { background: var(--uwaga-tlo); color: var(--uwaga); }
.znacznik.blad { background: var(--blad-tlo); color: var(--blad); } .znacznik.brak { background: var(--linia); color: var(--przygaszony); }
.komunikat { padding: .75rem 1rem; border-radius: var(--promien); margin: .5rem 0; }
.komunikat.blad { background: var(--blad-tlo); color: var(--blad); } .komunikat.uwaga { background: var(--uwaga-tlo); color: var(--uwaga); }
.komunikat.info { background: var(--akcent-tlo); color: var(--tekst); }
.wynik { white-space: pre-wrap; overflow-wrap: anywhere; }
.wynik table { border-collapse: collapse; }
.siatka { display: grid; grid-template-columns: max-content 1fr; gap: .25rem 1rem; } .siatka dt { color: var(--przygaszony); } .siatka dd { margin: 0; overflow-wrap: anywhere; }
.okruszki { font-size: .9rem; margin-bottom: .5rem; }
.stopka { max-width: 960px; margin: 1rem auto 2rem; padding: 0 1rem; color: var(--przygaszony); font-size: .85rem; }
code { font-size: .85em; overflow-wrap: anywhere; }
@media (max-width: 560px) { .siatka { grid-template-columns: 1fr; } .siatka dt { margin-top: .4rem; } h1 { font-size: 1.3rem; } }