:root { --bg:#111417; --panel:#1a1f24; --text:#e8eaed; --muted:#9aa0a6; --line:#2c3238;
        --ok:#2e7d32; --bad:#b3261e; --accent:#4dabf7; --warn:#f9a825; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--text);
       font:15px/1.5 -apple-system, "Segoe UI", Roboto, sans-serif; }
header { display:flex; align-items:center; gap:1.5rem; padding:.7rem 1.2rem;
         background:var(--panel); border-bottom:1px solid var(--line); flex-wrap:wrap; }
.brand { font-weight:700; }
nav { display:flex; gap:1rem; flex:1; flex-wrap:wrap; }
nav a { color:var(--muted); text-decoration:none; padding:.2rem 0; }
nav a.on, nav a:hover { color:var(--text); border-bottom:2px solid var(--accent); }
main { max-width:960px; margin:0 auto; padding:1.5rem 1rem 4rem; }
h1 { font-size:1.4rem; } h2 { font-size:1.1rem; margin-top:2rem; }
.muted { color:var(--muted); font-size:.9em; }
.empty { color:var(--muted); padding:2rem 0; }
.error { color:#ff8a80; }
.warn-text { color:var(--warn); font-weight:600; }
.cards { display:flex; gap:1rem; flex-wrap:wrap; }
.card { background:var(--panel); border:1px solid var(--line); border-radius:10px;
        padding:1rem 1.3rem; color:var(--text); text-decoration:none; min-width:150px; }
.card .num { display:block; font-size:1.8rem; font-weight:700; color:var(--accent); }
.item { background:var(--panel); border:1px solid var(--line); border-radius:10px;
        padding:1rem 1.2rem; margin-bottom:1rem; }
.item .head { display:flex; gap:.6rem; align-items:baseline; flex-wrap:wrap; }
.chip { background:#26313a; color:var(--accent); border-radius:99px; padding:.05rem .6rem; font-size:.8em; }
.chip.warn { background:#3a3226; color:var(--warn); }
.actions { display:flex; gap:.6rem; margin-top:.8rem; flex-wrap:wrap; align-items:center; }
.actions form { display:flex; gap:.4rem; }
button { border:0; border-radius:8px; padding:.45rem 1rem; cursor:pointer;
         background:var(--accent); color:#08131c; font-weight:600; }
button.ok { background:var(--ok); color:#eaf5ea; }
button.bad { background:var(--bad); color:#fdeceb; }
button.ghost { background:transparent; color:var(--muted); border:1px solid var(--line); }
input[type=text], input[type=password] { background:#0d1114; color:var(--text);
  border:1px solid var(--line); border-radius:8px; padding:.45rem .6rem; }
table { border-collapse:collapse; width:100%; background:var(--panel);
        border:1px solid var(--line); border-radius:10px; overflow:hidden; }
th, td { text-align:left; padding:.5rem .8rem; border-bottom:1px solid var(--line); }
th { color:var(--muted); font-weight:600; font-size:.85em; }
.login-box { max-width:340px; margin:12vh auto; background:var(--panel);
             border:1px solid var(--line); border-radius:12px; padding:1.5rem; }
.login-box label { display:block; margin-bottom:1rem; }
.login-box input { width:100%; margin-top:.3rem; }
.login-box button { width:100%; }
form.inline { display:inline; }
a { color: var(--accent); }