:root{
  --bg:#0f1216; --card:#181d24; --card2:#1f2630; --txt:#e8edf2; --muted:#8a97a6;
  --accent:#f5a623; --accent2:#2b8a3e; --danger:#e5484d; --line:#2a313b; --warn:#f0c040;
  --zero:#7c3aed;
  --radius:16px;
}
.stan-alarm{color:var(--danger); font-weight:700}
.stan-ostrzezenie{color:var(--warn); font-weight:700}
.stan-zero{color:#fff; background:var(--zero); font-weight:700; padding:1px 8px; border-radius:6px; display:inline-block}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--txt);
  font-family:-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased; padding-bottom:env(safe-area-inset-bottom);
}
.topbar{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px;
  padding:14px 16px; background:#0b0e12; position:sticky; top:0; z-index:10;
  border-bottom:1px solid var(--line);
}
.brand{font-weight:700; font-size:1.15rem; color:var(--txt); text-decoration:none}
.topbar nav a{color:var(--muted); text-decoration:none; margin-left:14px; font-size:.9rem}
.topbar nav a:hover{color:var(--txt)}
.wrap{max-width:760px; margin:0 auto; padding:16px}

.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:16px; margin-bottom:16px}
.card.center{text-align:center}
.muted{color:var(--muted)}
.tiny{font-size:.75rem}
.section{margin:22px 4px 10px; font-size:1.05rem}
h1{font-size:1.4rem; margin:.2em 0} h2{font-size:1.15rem} h3{font-size:1.02rem; margin:.4em 0}

/* Przyciski */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:var(--card2); color:var(--txt); border:1px solid var(--line);
  border-radius:12px; padding:12px 16px; font-size:1rem; text-decoration:none;
  cursor:pointer; font-weight:600}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--accent); border-color:var(--accent); color:#241300}
.btn.danger{background:var(--danger); border-color:var(--danger); color:#fff}
.btn.ghost{background:transparent}
.btn.big{width:100%; padding:16px; font-size:1.1rem; margin-top:10px}
.btn.small{padding:8px 12px; font-size:.85rem}
.btn.tiny{padding:4px 8px; font-size:.8rem}

/* Listy */
.list{list-style:none; padding:0; margin:0}
.list li{margin-bottom:8px}
.list li a{display:flex; align-items:center; gap:10px; background:var(--card);
  border:1px solid var(--line); border-radius:12px; padding:12px 14px;
  color:var(--txt); text-decoration:none}
.li-main{font-weight:600} .li-sub{margin-left:auto; color:var(--muted); font-size:.85rem; text-align:right}
.tag{font-size:.7rem; padding:3px 8px; border-radius:999px; font-weight:700}
.tag.przyjecie{background:#0b3d2e; color:#7be0b6}
.tag.zwrot{background:#0b3d2e; color:#7be0b6}
.tag.wydanie{background:#3a1416; color:#ffb3b5}
.tag.korekta{background:#2a1d10; color:#f0d9b5}

/* Tabele */
table.zw{width:100%; border-collapse:collapse; margin:8px 0}
table.zw th, table.zw td{text-align:left; padding:8px 6px; border-bottom:1px solid var(--line); font-size:.9rem}
table.zw th{color:var(--muted); font-weight:600; font-size:.78rem}

/* Formularze */
input,textarea,select{width:100%; background:var(--card2); border:1px solid var(--line);
  color:var(--txt); border-radius:10px; padding:12px; font-size:1rem; font-family:inherit}
input:focus,textarea:focus,select:focus{outline:none; border-color:var(--accent)}
label{display:block; margin:10px 0; color:var(--muted); font-size:.9rem}
label input,label textarea,label select{margin-top:6px}
.two-col{display:grid; grid-template-columns:1fr 1fr; gap:10px}

.row-between{display:flex; justify-content:space-between; align-items:center; gap:12px}
.kv{display:grid; grid-template-columns:auto 1fr; gap:6px 16px; margin:8px 0}
.kv dt{color:var(--muted)} .kv dd{margin:0; font-weight:600; text-align:right}

.flash{padding:12px 14px; border-radius:10px; margin-bottom:14px}
.flash.error{background:#3a1416; border:1px solid var(--danger); color:#ffb3b5}
.flash.ok{background:#0f2e1c; border:1px solid var(--accent2); color:#9be3b4}

.login-card{max-width:360px; margin:8vh auto; text-align:center}
.login-card form{margin-top:16px; display:flex; flex-direction:column; gap:12px}

.stat-grid{display:flex; gap:8px; background:var(--card2); border:1px solid var(--line);
  border-radius:var(--radius); padding:10px 6px; margin-bottom:16px; overflow-x:auto}
.stat-item{flex:1 0 auto; min-width:90px; text-align:center}
.stat-val{display:block; font-weight:700; font-size:1.1rem}
.stat-label{display:block; color:var(--muted); font-size:.7rem; margin-top:2px}