:root { --bg:#f5f6fb; --panel:#fff; --text:#1e2235; --muted:#6b7280; --border:#e4e7f2; --accent:#5b5bd6; --accent-text:#fff;
  --ok:#15803d; --ok-bg:#dcfce7; --warn:#b45309; --warn-bg:#fef3c7; --bad:#b91c1c; --bad-bg:#fee2e2; --side:#0f1226; --side-text:#c7cbe6; --radius:12px; }
@media (prefers-color-scheme: dark) { :root { --bg:#0c0e1d; --panel:#161a30; --text:#e8eaf6; --muted:#9aa1c0; --border:#262b4a; --side:#080a16;
  --ok-bg:#12351f; --warn-bg:#3b2a0b; --bad-bg:#3b1313; } }
* { box-sizing: border-box; }
body { margin:0; font:14px/1.45 system-ui,Segoe UI,sans-serif; background:var(--bg); color:var(--text); display:flex; min-height:100vh; }
aside { width:220px; background:var(--side); color:var(--side-text); padding:1.2rem .8rem; flex-shrink:0; }
aside .brand { color:#fff; font-weight:700; font-size:1.05rem; margin:0 .5rem 1.2rem; }
aside .brand small { display:block; font-weight:400; color:var(--side-text); font-size:.75rem; }
aside a { display:block; color:var(--side-text); text-decoration:none; padding:.5rem .7rem; border-radius:8px; margin-bottom:.15rem; }
aside a.active, aside a:hover { background:#232850; color:#fff; }
main { flex:1; padding:1.4rem 2rem; min-width:0; }
h1 { margin:.2rem 0 1rem; font-size:1.35rem; } h2 { font-size:1rem; margin:0 0 .6rem; }
.top { display:flex; justify-content:space-between; align-items:center; margin-bottom:.4rem; color:var(--muted); font-size:.8rem; }
.card { background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:1rem 1.2rem; margin-bottom:1rem; }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:1rem; margin-bottom:1rem; }
.kpi .n { font-size:1.9rem; font-weight:700; } .kpi .l { color:var(--muted); }
table { width:100%; border-collapse:collapse; } th,td { text-align:left; padding:.5rem .6rem; border-bottom:1px solid var(--border); vertical-align:top; }
th { color:var(--muted); font-weight:600; font-size:.75rem; text-transform:uppercase; letter-spacing:.03em; }
code { background:var(--bg); padding:.1rem .35rem; border-radius:6px; font-size:.85em; }
.pill { display:inline-block; padding:.1rem .55rem; border-radius:99px; font-size:.75rem; font-weight:600; background:var(--bg); color:var(--muted); }
.pill.ok { background:var(--ok-bg); color:var(--ok); } .pill.warn { background:var(--warn-bg); color:var(--warn); } .pill.bad { background:var(--bad-bg); color:var(--bad); }
button, .btn { font:inherit; padding:.4rem .8rem; border-radius:8px; border:1px solid var(--border); background:var(--panel); color:var(--text); cursor:pointer; text-decoration:none; }
button.primary { background:var(--accent); color:var(--accent-text); border-color:var(--accent); }
button.danger { color:var(--bad); }
form.inline { display:inline; margin:0; }
form.row { display:flex; gap:.6rem; flex-wrap:wrap; align-items:end; }
label { display:flex; flex-direction:column; gap:.2rem; font-size:.75rem; color:var(--muted); }
input, select { font:inherit; padding:.4rem .55rem; border:1px solid var(--border); border-radius:8px; background:var(--panel); color:var(--text); }
.msg { background:var(--ok-bg); color:var(--ok); padding:.6rem .9rem; border-radius:8px; margin-bottom:1rem; }
.empty { color:var(--muted); padding:.6rem 0; }
@media (max-width: 800px) { body { flex-direction:column; } aside { width:auto; } main { padding:1rem; } }