[hidden] { display:none !important; }
:root { --bg:#f6f7f9; --fg:#1d2330; --muted:#667085; --line:#e3e6ec; --card:#fff; --accent:#2457d6;
        --ok:#147a3b; --warn:#9a6700; --bad:#b42318; --info:#3e4c66; font-family: system-ui, sans-serif; }
@media (prefers-color-scheme: dark) { :root { --bg:#12151b; --fg:#e7eaf0; --muted:#98a2b3; --line:#2a303b; --card:#1a1f27; --accent:#7aa2ff; } }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--fg); font-size:14px; }
header { display:flex; gap:20px; align-items:center; padding:10px 20px; background:var(--card); border-bottom:1px solid var(--line); flex-wrap:wrap; }
.brand { font-weight:700; color:var(--fg); text-decoration:none; }
nav { display:flex; gap:14px; flex-wrap:wrap; } nav a { color:var(--muted); text-decoration:none; } nav a.active, nav a:hover { color:var(--accent); }
#who { margin-left:auto; color:var(--muted); }
main { max-width:1200px; margin:0 auto; padding:20px 16px 60px; }
h1 { font-size:20px; margin:0 0 14px; } h2 { font-size:16px; margin:22px 0 10px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:8px; padding:14px 16px; margin-bottom:14px; }
.tiles { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:12px; margin-bottom:16px; }
.tile .n { font-size:26px; font-weight:700; } .tile .l { color:var(--muted); }
table { width:100%; border-collapse:collapse; background:var(--card); border:1px solid var(--line); border-radius:8px; overflow:hidden; }
th, td { text-align:left; padding:7px 10px; border-bottom:1px solid var(--line); vertical-align:top; }
th { color:var(--muted); font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:.03em; }
tr.click { cursor:pointer; } tr.click:hover td { background:color-mix(in srgb, var(--accent) 7%, transparent); }
.table-wrap { overflow-x:auto; }
.badge { display:inline-block; padding:1px 8px; border-radius:10px; font-size:12px; font-weight:600; background:var(--line); color:var(--info); white-space:nowrap; }
.badge.ok { background:color-mix(in srgb, var(--ok) 15%, transparent); color:var(--ok); }
.badge.warn { background:color-mix(in srgb, var(--warn) 18%, transparent); color:var(--warn); }
.badge.bad { background:color-mix(in srgb, var(--bad) 15%, transparent); color:var(--bad); }
.muted { color:var(--muted); } .mono { font-family:ui-monospace, monospace; font-size:12px; word-break:break-all; }
form.inline, .row { display:flex; gap:8px; flex-wrap:wrap; align-items:end; }
label { display:flex; flex-direction:column; gap:3px; font-size:12px; color:var(--muted); }
input, select, textarea { font:inherit; padding:6px 8px; border:1px solid var(--line); border-radius:6px; background:var(--bg); color:var(--fg); min-width:150px; }
textarea { min-width:320px; min-height:80px; }
button { font:inherit; padding:6px 12px; border-radius:6px; border:1px solid var(--accent); background:var(--accent); color:#fff; cursor:pointer; }
button.secondary { background:transparent; color:var(--accent); } button.danger { background:var(--bad); border-color:var(--bad); }
button:disabled { opacity:.5; cursor:default; }
.bar { height:8px; background:var(--line); border-radius:4px; overflow:hidden; min-width:120px; } .bar > i { display:block; height:100%; background:var(--accent); }
.bar.warn > i { background:var(--warn); } .bar.bad > i { background:var(--bad); }
.kv { display:grid; grid-template-columns:max-content 1fr; gap:4px 16px; }
.kv dt { color:var(--muted); } .kv dd { margin:0; }
ul.attention { margin:0; padding-left:18px; } ul.attention li { margin:4px 0; }
#toasts { position:fixed; right:16px; bottom:16px; display:flex; flex-direction:column; gap:8px; z-index:10; }
.toast { background:var(--card); border:1px solid var(--line); border-left:4px solid var(--ok); padding:10px 14px; border-radius:6px; max-width:420px; box-shadow:0 2px 10px rgba(0,0,0,.12); }
.toast.error { border-left-color:var(--bad); }
.login { max-width:340px; margin:60px auto; }
.login form { display:flex; flex-direction:column; gap:10px; }
.stages { display:flex; gap:6px; flex-wrap:wrap; } .stage { flex:1; min-width:110px; }
.stage.current .card { border-color:var(--accent); }
.card > h2:first-child, .card > h1:first-child { margin-top: 0; }
.table-wrap { margin-bottom: 18px; }
a { color: var(--accent); }
.card .row { margin-top: 10px; }
.spark polyline { fill:none; stroke:var(--accent); stroke-width:1.5; }
.plan-row { border-bottom:1px dashed var(--line); padding-bottom:6px; margin-bottom:6px; } h3 { font-size:15px; margin:4px 0 8px; } h4 { font-size:13px; margin:12px 0 6px; }