:root{--bg:#0f1317;--panel:#171c22;--panel2:#1d242c;--line:#2a323b;--fg:#e6e9ec;--muted:#8d98a5;--accent:#4fa3ff;--up:#4cd48a;--down:#ff6b6b;--warn:#f0b64a;--call:#3fb27f;--put:#e0605e}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font:14px/1.5 system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}
header{display:flex;align-items:center;gap:24px;padding:12px 24px;background:var(--panel);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5;flex-wrap:wrap}
.brand{font-weight:700;font-size:16px;letter-spacing:.3px}.brand span{color:var(--accent)}
nav{display:flex;gap:4px;flex:1;flex-wrap:wrap}
nav a{color:var(--muted);padding:6px 12px;border-radius:6px}nav a.on,nav a:hover{background:var(--panel2);color:var(--fg);text-decoration:none}
.right{display:flex;gap:12px;align-items:center;color:var(--muted);font-size:13px}
select{background:var(--panel2);color:var(--fg);border:1px solid var(--line);border-radius:6px;padding:5px 8px}
main{max-width:1280px;margin:0 auto;padding:24px}
h1{font-size:22px;margin:0 0 4px}h2{font-size:16px;margin:28px 0 10px}h3{font-size:14px;margin:0 0 8px}
.sub{color:var(--muted);margin:0 0 20px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:16px 18px;margin-bottom:16px}
.grid{display:grid;gap:16px}.g2{grid-template-columns:2fr 1fr}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.g2,.g3,.g4{grid-template-columns:1fr 1fr}}@media(max-width:600px){.g2,.g3,.g4{grid-template-columns:1fr}main{padding:14px}}
.kpi .v{font-size:24px;font-weight:700}.kpi .l{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.5px}
.comment p{margin:0 0 10px}
.warn{border-left:3px solid var(--warn);background:#2a2415;padding:10px 14px;border-radius:0 8px 8px 0;margin:8px 0;color:#f3dfae}
.info{border-left:3px solid var(--accent);background:#14202e;padding:10px 14px;border-radius:0 8px 8px 0;margin:8px 0}
.tag{display:inline-block;padding:1px 8px;border-radius:10px;font-size:11px;font-weight:600;background:var(--panel2);border:1px solid var(--line);color:var(--muted)}
.tag.S1{color:var(--up);border-color:#2d6b4c}.tag.S2{color:var(--warn);border-color:#6b5a2d}.tag.xl{color:var(--accent);border-color:#2d4f6b}
table{border-collapse:collapse;width:100%}th{color:var(--muted);font-weight:600;text-align:left;font-size:12px;text-transform:uppercase;letter-spacing:.4px;padding:8px;border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:7px 8px;border-bottom:1px solid var(--line);vertical-align:top}tr:hover td{background:#1a2027}
.num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}.up{color:var(--up)}.down{color:var(--down)}.mut{color:var(--muted)}
.wrap{overflow-x:auto}
.bars{font-size:12px}.bar-row{display:grid;grid-template-columns:1fr 70px 1fr;gap:6px;align-items:center;height:18px}
.bar-row .p{display:flex;justify-content:flex-end}.bar-row .p i{background:var(--put);height:12px;display:block;border-radius:2px 0 0 2px}
.bar-row .c i{background:var(--call);height:12px;display:block;border-radius:0 2px 2px 0}
.bar-row .k{text-align:center;font-variant-numeric:tabular-nums}.bar-row.near .k{color:var(--accent);font-weight:700}
.legend{display:flex;justify-content:space-between;color:var(--muted);font-size:12px;margin-bottom:6px}
.login{max-width:360px;margin:12vh auto;padding:0 16px}.login input{width:100%;padding:10px;margin:4px 0 14px;background:var(--panel2);color:var(--fg);border:1px solid var(--line);border-radius:6px;font-size:15px}
.login button{width:100%;padding:11px;background:var(--accent);color:#04121f;border:0;border-radius:6px;font-weight:700;font-size:15px;cursor:pointer}
.err{color:var(--down);margin-bottom:10px}label{color:var(--muted);font-size:12px}
.phase{display:grid;grid-template-columns:70px 1fr;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}.phase:last-child{border:0}
.phase .n{font-weight:700;color:var(--accent)}.phase.done .n{color:var(--up)}
svg.spark{width:100%;height:60px}
footer{color:var(--muted);text-align:center;font-size:12px;padding:30px}
pre.flow{background:#0f1317;border:1px solid var(--line);border-radius:8px;padding:14px;overflow-x:auto;font:12px/1.45 ui-monospace,Menlo,Consolas,monospace;color:#cfd6dd}
code{background:var(--panel2);padding:0 4px;border-radius:4px;font-size:12px}pre code{background:none;padding:0}
.card td code{white-space:normal}