:root {
  --tlo: #f5f6f8; --karta: #ffffff; --tekst: #1c2024; --cichy: #6b7280; --linia: #e3e6ea;
  --akcent: #1f6feb; --akcent-tlo: #e8f0fe; --ok: #1a7f37; --ok-tlo: #e6f4ea;
  --uwaga: #b45309; --uwaga-tlo: #fff4e5; --blad: #b91c1c; --blad-tlo: #fdecec;
  --radius: 10px; --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root { --tlo: #0f1216; --karta: #171b21; --tekst: #e6e8eb; --cichy: #9aa3ad; --linia: #2a3038;
    --akcent: #4c8dff; --akcent-tlo: #1a2740; --ok: #3fb950; --ok-tlo: #12261a;
    --uwaga: #f0a234; --uwaga-tlo: #2d2210; --blad: #ff6b6b; --blad-tlo: #33191b; }
}
* { box-sizing: border-box; }
body { margin: 0; font: 15px/1.45 var(--font); background: var(--tlo); color: var(--tekst); }
a { color: var(--akcent); text-decoration: none; } a:hover { text-decoration: underline; }
button, .przycisk { font: inherit; border: 1px solid var(--linia); background: var(--karta); color: var(--tekst);
  border-radius: 8px; padding: 7px 12px; cursor: pointer; }
button:hover { border-color: var(--akcent); }
button.glowny { background: var(--akcent); border-color: var(--akcent); color: #fff; }
button.maly { padding: 3px 9px; font-size: 13px; }
button:disabled { opacity: .5; cursor: wait; }
input, select, textarea { font: inherit; color: var(--tekst); background: var(--karta); border: 1px solid var(--linia);
  border-radius: 8px; padding: 7px 10px; width: 100%; }
textarea { min-height: 120px; resize: vertical; line-height: 1.5; }
label { display: block; font-size: 13px; color: var(--cichy); margin: 10px 0 4px; }
.cichy { color: var(--cichy); } .maly-tekst { font-size: 13px; }
.blad { color: var(--blad); }

header.pasek { display: flex; align-items: center; gap: 14px; padding: 10px 18px; background: var(--karta);
  border-bottom: 1px solid var(--linia); position: sticky; top: 0; z-index: 5; flex-wrap: wrap; }
header .logo { font-weight: 700; font-size: 17px; }
nav.karty { display: flex; gap: 4px; flex-wrap: wrap; }
nav.karty a { padding: 6px 11px; border-radius: 8px; color: var(--tekst); }
nav.karty a.aktywna { background: var(--akcent-tlo); color: var(--akcent); font-weight: 600; }
header .prawo { margin-left: auto; display: flex; gap: 8px; align-items: center; }

.baner { padding: 10px 18px; font-weight: 600; }
.baner.blad { background: var(--blad-tlo); color: var(--blad); }
.baner.uwaga { background: var(--uwaga-tlo); color: var(--uwaga); }
.baner a { color: inherit; text-decoration: underline; }

main { padding: 18px; max-width: 1280px; margin: 0 auto; }
section.widok { display: none; } section.widok.aktywna { display: block; }
h2 { font-size: 20px; margin: 4px 0 14px; } h3 { font-size: 15px; margin: 0 0 8px; }
.siatka { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.siatka-2 { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; }
@media (max-width: 900px) { .siatka-2 { grid-template-columns: 1fr; } }
.karta { background: var(--karta); border: 1px solid var(--linia); border-radius: var(--radius); padding: 14px 16px; }
.karta.pelna { grid-column: 1 / -1; }
.kafel .naglowek { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--cichy); }
.kafel .wartosc { font-size: 22px; font-weight: 700; margin-top: 4px; }
.kafel .pod { font-size: 13px; color: var(--cichy); margin-top: 2px; }
.kropka { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.kropka.ok { background: var(--ok); } .kropka.blad { background: var(--blad); } .kropka.uwaga { background: var(--uwaga); }
.plakietka { display: inline-block; font-size: 12px; padding: 1px 8px; border-radius: 999px; background: var(--akcent-tlo); color: var(--akcent); margin-right: 4px; }
.plakietka.ok { background: var(--ok-tlo); color: var(--ok); }
.plakietka.uwaga { background: var(--uwaga-tlo); color: var(--uwaga); }
.plakietka.blad { background: var(--blad-tlo); color: var(--blad); }
.pasek-akcji { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 8px 0 14px; }
.lista { display: flex; flex-direction: column; gap: 10px; }

.temat { display: grid; grid-template-columns: 56px 1fr; gap: 12px; }
.temat .punkty { font-size: 26px; font-weight: 800; color: var(--akcent); text-align: center; line-height: 1; padding-top: 4px; }
.temat .punkty small { display: block; font-size: 11px; color: var(--cichy); font-weight: 500; margin-top: 2px; }
.temat .hak { font-size: 16px; font-weight: 700; margin-bottom: 4px; }
.temat .meta { font-size: 13px; color: var(--cichy); margin-bottom: 6px; }
.temat .szczegoly { font-size: 14px; }
.temat .szczegoly b { color: var(--cichy); font-weight: 600; }
.temat .akcje { margin-top: 8px; display: flex; gap: 6px; flex-wrap: wrap; }

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--linia); vertical-align: top; }
th { color: var(--cichy); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .03em; }
tr:hover td { background: var(--akcent-tlo); }
.tabela-zawijana { overflow-x: auto; }
.mono { font-family: ui-monospace, Consolas, monospace; font-size: 13px; }
pre.podglad { white-space: pre-wrap; word-break: break-word; font: 15px/1.5 var(--font); background: var(--tlo);
  border: 1px solid var(--linia); border-radius: 8px; padding: 12px; margin: 0; min-height: 200px; }
.wpis-lista .pozycja { padding: 8px 10px; border: 1px solid var(--linia); border-radius: 8px; cursor: pointer; }
.wpis-lista .pozycja.aktywna { border-color: var(--akcent); background: var(--akcent-tlo); }
.wpis-lista .pozycja .t { font-weight: 600; }
.uwagi li { font-size: 13px; margin: 2px 0; } .uwagi li.blad { color: var(--blad); }
.formularz-rzad { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.wagi { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px 16px; }
.wagi label { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 0; }
.wagi input { width: 80px; padding: 4px 8px; }
.komunikat { position: fixed; right: 16px; bottom: 16px; background: var(--tekst); color: var(--tlo); padding: 10px 14px;
  border-radius: 8px; box-shadow: 0 6px 24px rgba(0,0,0,.25); max-width: 420px; z-index: 9; display: none; }
.komunikat.widoczny { display: block; }
.dziennik .error { color: var(--blad); } .dziennik .warn { color: var(--uwaga); }
details summary { cursor: pointer; color: var(--akcent); }
body.logowanie { display: grid; place-items: center; min-height: 100vh; }
body.logowanie .karta { width: 340px; display: flex; flex-direction: column; gap: 10px; }
body.logowanie h1 { font-size: 20px; margin: 0; }
@media (max-width: 640px) { main { padding: 12px; } header.pasek { padding: 8px 12px; } .temat { grid-template-columns: 44px 1fr; } }