:root {
  --tlo: #f4f2ee; --karta: #ffffff; --tekst: #1d1d1b; --szary: #6b6a66; --linia: #dedbd4;
  --akcent: #1f3a34; --akcent-jasny: #e3ebe8; --ostrz: #9a5b00; --ostrz-tlo: #fbf0dc;
  --stop: #a32222; --stop-tlo: #f8e3e1; --ok: #2d6a3e;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --tlo: #161816; --karta: #202320; --tekst: #ecebe7; --szary: #a3a29c; --linia: #343833;
    --akcent: #8fc2b2; --akcent-jasny: #24322e; --ostrz: #e2a94a; --ostrz-tlo: #3a2f1c;
    --stop: #ef7d73; --stop-tlo: #3d2120; --ok: #7cc48f; color-scheme: dark;
  }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--tlo); color: var(--tekst); font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.gora { display: flex; gap: 12px; align-items: center; padding: 12px 16px; background: var(--karta); border-bottom: 1px solid var(--linia); position: sticky; top: 0; z-index: 5; }
.marka { font-weight: 650; letter-spacing: .01em; }
.ja { margin-left: auto; color: var(--szary); font-size: 13px; }
.ja-wyloguj { color: var(--szary); font-size: 13px; }
.agent-karta { display: flex; gap: 14px; align-items: center; }
.agent-karta img { border-radius: 50%; object-fit: cover; flex: none; }
.agent-imie { font-size: 18px; font-weight: 600; }
code { font-family: var(--mono); font-size: 12px; }
select, input, textarea, button { font: inherit; color: inherit; }
select, input, textarea { background: var(--karta); border: 1px solid var(--linia); border-radius: 6px; padding: 6px 8px; }
textarea { width: 100%; min-height: 120px; font-family: var(--mono); font-size: 13px; }
.zakladki { display: flex; gap: 2px; overflow-x: auto; padding: 0 12px; background: var(--karta); border-bottom: 1px solid var(--linia); }
.zakladki button { border: 0; background: none; padding: 10px 12px; color: var(--szary); border-bottom: 2px solid transparent; white-space: nowrap; cursor: pointer; }
.zakladki button.aktywna { color: var(--tekst); border-bottom-color: var(--akcent); }
.znacznik { background: var(--stop); color: #fff; border-radius: 9px; padding: 0 6px; font-size: 12px; }
main { max-width: 980px; margin: 0 auto; padding: 16px; }
h2 { font-size: 17px; margin: 20px 0 8px; }
h2:first-child { margin-top: 0; }
.karta { background: var(--karta); border: 1px solid var(--linia); border-radius: 8px; padding: 14px; margin-bottom: 10px; }
.siatka { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.liczba { font-size: 24px; font-weight: 600; font-variant-numeric: tabular-nums; }
.podpis { color: var(--szary); font-size: 13px; }
.przycisk { border: 1px solid var(--linia); background: var(--karta); border-radius: 6px; padding: 6px 12px; cursor: pointer; }
.przycisk.glowny { background: var(--akcent); border-color: var(--akcent); color: var(--karta); }
.przycisk.stop { background: var(--stop); border-color: var(--stop); color: #fff; }
.przycisk:disabled { opacity: .5; cursor: default; }
.rzad { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.pasek { border-radius: 8px; padding: 12px 14px; margin-bottom: 12px; border: 1px solid; }
.pasek.ostrz { background: var(--ostrz-tlo); border-color: var(--ostrz); }
.pasek.stop { background: var(--stop-tlo); border-color: var(--stop); }
.pasek.ok { background: var(--akcent-jasny); border-color: var(--akcent); }
.status { display: inline-block; font-size: 12px; padding: 1px 7px; border-radius: 4px; background: var(--akcent-jasny); }
.status.czeka_na_konrada, .status.czeka { background: var(--ostrz-tlo); color: var(--ostrz); }
.status.blad, .status.odrzucony { background: var(--stop-tlo); color: var(--stop); }
.status.wykonane, .status.wyslany, .status.zatwierdzony { color: var(--ok); }
pre.mail { white-space: pre-wrap; font: 14px/1.5 -apple-system, sans-serif; margin: 8px 0; padding: 10px; background: var(--tlo); border-radius: 6px; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
td, th { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--linia); vertical-align: top; }
th { color: var(--szary); font-weight: 500; font-size: 13px; }
td.kiedy { white-space: nowrap; color: var(--szary); font-variant-numeric: tabular-nums; }
.ustawienie { display: grid; gap: 6px; }
.ustawienie label { font-weight: 600; }
.komunikat { position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); background: var(--tekst); color: var(--tlo); padding: 8px 16px; border-radius: 6px; max-width: calc(100% - 32px); }
.pusto { color: var(--szary); padding: 20px 0; }
.dwie { display: grid; grid-template-columns: 240px 1fr; gap: 12px; }
.lista-plikow button { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 5px 8px; border-radius: 4px; cursor: pointer; font-family: var(--mono); font-size: 13px; }
.lista-plikow button.aktywna { background: var(--akcent-jasny); }
details summary { cursor: pointer; color: var(--szary); font-size: 13px; }
@media (max-width: 640px) {
  .dwie { grid-template-columns: 1fr; }
  .ja { display: none; }
  td.kiedy { white-space: normal; }
}