:root { --bg:#f6f7f9; --card:#fff; --text:#1d2330; --muted:#6b7280; --line:#e5e7eb; --accent:#2457d6;
  --ok:#137a3a; --warn:#a15c00; --bad:#b42318; --hot:#c2410c; }
* { box-sizing: border-box; }
body { margin:0; font:15px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; background:var(--bg); color:var(--text); }
a { color:var(--accent); text-decoration:none; } a:hover { text-decoration:underline; }
header { background:#111827; color:#fff; padding:.6rem 1rem; display:flex; flex-wrap:wrap; gap:.4rem 1rem; align-items:center; }
header .brand { font-weight:700; margin-right:.5rem; }
header nav { display:flex; flex-wrap:wrap; gap:.2rem .8rem; }
header nav a { color:#d1d5db; } header nav a.active, header nav a:hover { color:#fff; }
header form { margin-left:auto; }
main { max-width:1200px; margin:0 auto; padding:1rem; }
h1 { font-size:1.35rem; margin:.2rem 0 1rem; } h2 { font-size:1.1rem; margin:1.4rem 0 .6rem; }
.card { background:var(--card); border:1px solid var(--line); border-radius:8px; padding:1rem; margin-bottom:1rem; }
.grid { display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.table-wrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; background:var(--card); }
th, td { text-align:left; padding:.45rem .5rem; border-bottom:1px solid var(--line); vertical-align:top; }
th { font-size:.8rem; text-transform:uppercase; color:var(--muted); font-weight:600; }
.muted { color:var(--muted); } .small { font-size:.85rem; }
.badge { display:inline-block; padding:.05rem .45rem; border-radius:999px; font-size:.78rem; background:#eef2ff; color:#3730a3; white-space:nowrap; }
.b-ok { background:#e7f6ec; color:var(--ok); } .b-warn { background:#fff4e5; color:var(--warn); }
.b-bad { background:#fdecea; color:var(--bad); } .b-hot { background:#fff1e6; color:var(--hot); } .b-muted { background:#f3f4f6; color:var(--muted); }
.flash { background:#eef6ff; border:1px solid #bfdbfe; padding:.6rem .8rem; border-radius:6px; margin-bottom:1rem; }
.error { background:#fdecea; border-color:#f5c2bd; }
.stop { background:#b42318; color:#fff; padding:.8rem 1rem; border-radius:8px; margin-bottom:1rem; font-weight:600; }
form.inline { display:inline; }
input, select, textarea { font:inherit; padding:.35rem .5rem; border:1px solid #cbd5e1; border-radius:6px; background:#fff; max-width:100%; }
label { display:block; margin:.35rem 0; } label.check { display:flex; align-items:center; gap:.4rem; }
button, .btn { font:inherit; padding:.35rem .75rem; border-radius:6px; border:1px solid #cbd5e1; background:#fff; cursor:pointer; }
button.primary { background:var(--accent); border-color:var(--accent); color:#fff; }
button.danger { background:var(--bad); border-color:var(--bad); color:#fff; }
.row { display:flex; flex-wrap:wrap; gap:.5rem; align-items:flex-end; }
.heat td { text-align:center; padding:.2rem; font-size:.75rem; min-width:1.6rem; }
@media (max-width:640px) { main { padding:.6rem; } th, td { padding:.35rem; } header form { margin-left:0; } }