:root{
  --tlo:#0f172a; --tekst:#f8fafc; --karta:#1e293b; --obramowanie:#475569; --przygaszony:#cbd5e1;
  --akcent:#22c55e; --blad:#ef4444; --promien:0.5rem;
  --sans:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"Cascadia Code","Fira Code",monospace;
}
*{box-sizing:border-box}
body{margin:0;padding:1.5rem 1rem;min-height:100vh;display:flex;align-items:flex-start;justify-content:center;
  background:var(--tlo);color:var(--tekst);font:400 16px/1.6 var(--sans)}
main{width:100%;max-width:26rem;margin-top:min(8vh,4rem)}
body.panel main{max-width:56rem;margin-top:2rem}
h1{margin:0 0 .25rem;font-size:1.5rem;font-weight:600;letter-spacing:-.01em}
.podtytul{margin:0 0 1.5rem;color:var(--przygaszony);font-size:.9375rem}
.karta{background:var(--karta);border:1px solid var(--obramowanie);border-radius:var(--promien);padding:1.5rem}
.pole{margin-bottom:1rem}
label{display:block;margin-bottom:.25rem;font-size:.9375rem;font-weight:500}
input[type=text],input[type=password],input:not([type]){width:100%;padding:.625rem .75rem;font:inherit;
  color:var(--tekst);background:var(--tlo);border:1px solid var(--obramowanie);border-radius:var(--promien)}
input::placeholder{color:var(--przygaszony)}
button{min-height:2.75rem;padding:.625rem 1.25rem;font:inherit;font-weight:600;color:var(--tlo);
  background:var(--akcent);border:0;border-radius:var(--promien);cursor:pointer}
button:hover{filter:brightness(1.08)}
.karta button{width:100%}
:focus-visible{outline:2px solid var(--akcent);outline-offset:2px}
.blad{margin:0 0 1rem;padding:.75rem 1rem;background:rgba(239,68,68,.12);color:var(--tekst);
  border:1px solid var(--blad);border-left-width:4px;border-radius:var(--promien)}
.wskazowka{margin:.75rem 0 0;color:var(--przygaszony);font-size:.875rem}
code{font-family:var(--mono);font-size:1.125rem;word-break:break-all}
.haslo{display:inline-block;padding:.5rem .75rem;font-size:1.25rem;background:var(--tlo);
  border:1px solid var(--obramowanie);border-radius:var(--promien)}
a{color:var(--akcent)}
.przewin{overflow-x:auto;margin-top:1.5rem}
table{width:100%;border-collapse:collapse;font-size:.9375rem}
th,td{padding:.75rem;text-align:left;border-bottom:1px solid var(--obramowanie);white-space:nowrap}
thead th{color:var(--przygaszony);font-weight:500;font-size:.8125rem;text-transform:uppercase;letter-spacing:.04em}
tbody th{font-weight:600;font-family:var(--mono);font-size:.875rem}
td form{display:inline}
.panel table button{min-height:2.25rem;padding:.375rem .75rem;font-size:.875rem;font-weight:500}
button.cichy{color:var(--tekst);background:transparent;border:1px solid var(--obramowanie)}
.znacznik{padding:.125rem .5rem;border-radius:999px;font-size:.8125rem;
  background:rgba(34,197,94,.14);color:var(--akcent)}
.znacznik.stop{background:rgba(239,68,68,.14);color:var(--blad)}
.licznik{margin:1rem 0 0;color:var(--przygaszony);font-size:.875rem}
@media (max-width:26rem){body{padding:1rem .75rem}.karta{padding:1.25rem}}