:root { --bg:#f7f6f3; --card:#fff; --text:#1f1e1c; --muted:#6b6a65; --border:#e3e1da; --accent:#2f5d50;
  --up:#1d7a4f; --down:#b3402a; --warn:#a86b00; --crit:#b3261e; --radius:8px; }
* { box-sizing:border-box; }
body { margin:0; font:14px/1.5 -apple-system, "Segoe UI", Roboto, sans-serif; background:var(--bg); color:var(--text); }
header { background:var(--card); border-bottom:1px solid var(--border); padding:0 24px; display:flex; align-items:center; gap:24px; height:56px; }
header .brand { font-weight:600; letter-spacing:.02em; }
header nav { display:flex; gap:4px; flex:1; flex-wrap:wrap; }
header nav a { color:var(--muted); text-decoration:none; padding:6px 10px; border-radius:var(--radius); }
header nav a.active, header nav a:hover { background:var(--bg); color:var(--text); }
.badge { display:inline-block; padding:1px 8px; border-radius:99px; font-size:12px; background:#eceae4; color:var(--muted); }
.badge.a { background:#e3efe9; color:var(--accent); } .badge.b { background:#eef0f7; color:#3b4a7a; }
.badge.crit { background:#fbe9e7; color:var(--crit); } .badge.warn { background:#fdf3e1; color:var(--warn); }
.badge.mode { background:#fdf3e1; color:var(--warn); }
main { padding:24px; max-width:1400px; margin:0 auto; }
h1 { font-size:20px; font-weight:600; margin:0 0 16px; } h2 { font-size:16px; font-weight:600; margin:24px 0 8px; }
.card { background:var(--card); border:1px solid var(--border); border-radius:12px; padding:16px; margin-bottom:16px; }
.kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:12px; margin-bottom:16px; }
.kpi { background:var(--card); border:1px solid var(--border); border-radius:12px; padding:14px; }
.kpi .v { font-size:24px; font-weight:600; } .kpi .l { color:var(--muted); font-size:12px; }
.kpi a { color:inherit; text-decoration:none; }
table { width:100%; border-collapse:collapse; background:var(--card); }
th, td { text-align:left; padding:7px 10px; border-bottom:1px solid var(--border); vertical-align:top; }
th { font-size:12px; color:var(--muted); font-weight:500; background:#fbfaf8; position:sticky; top:0; }
td.num, th.num { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
tr:hover td { background:#fbfaf8; }
.up { color:var(--up); } .down { color:var(--down); } .muted { color:var(--muted); font-size:12px; }
a { color:var(--accent); }
.filters { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:12px; }
input, select, button, textarea { font:inherit; padding:6px 10px; border:1px solid var(--border); border-radius:var(--radius); background:#fff; }
button { cursor:pointer; } button.primary { background:var(--accent); color:#fff; border-color:var(--accent); }
button.danger { color:var(--down); } button.link { border:none; background:none; color:var(--muted); padding:0; }
.actions { display:flex; gap:8px; align-items:center; margin:8px 0; flex-wrap:wrap; }
.flash { background:#e3efe9; border:1px solid #c7ddd3; padding:10px 14px; border-radius:var(--radius); margin-bottom:16px; }
.notice { background:#fdf3e1; border:1px solid #f1dcb0; padding:10px 14px; border-radius:var(--radius); margin-bottom:16px; }
.grid2 { display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:16px; }
.form-row { display:grid; grid-template-columns:280px 120px 1fr; gap:12px; align-items:center; padding:6px 0; border-bottom:1px solid var(--border); }
.login { max-width:340px; margin:12vh auto; }
.login input { width:100%; margin-bottom:10px; }
.reason { max-width:420px; }