:root{--bg:#0a0c11;--panel:#11141b;--panel2:#161a23;--line:#222836;--text:#e8eaf0;--muted:#8a92a6;--accent:#7c5cff;--accent2:#22d3a6;--warn:#f5a524;--err:#ef5350;--ok:#22d3a6;--r:12px}
*{box-sizing:border-box}html{color-scheme:dark}
body{margin:0;background:var(--bg);color:var(--text);font:14px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,sans-serif}
a{color:#a99cff;text-decoration:none}a:hover{text-decoration:underline}
h1{font-size:22px;margin:0 0 4px}h2{font-size:15px;margin:0 0 12px}h3{font-size:13px;margin:0 0 8px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.06em}
.layout{display:grid;grid-template-columns:216px 1fr;min-height:100vh}
.side{background:var(--panel);border-right:1px solid var(--line);padding:18px 12px;position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:2px}
.brand{font-weight:700;font-size:18px;padding:4px 10px 16px;display:flex;align-items:center;gap:8px}
.brand i{width:22px;height:22px;border-radius:7px;background:linear-gradient(135deg,var(--accent),var(--accent2));display:inline-block}
.side a.nav{color:var(--muted);padding:8px 10px;border-radius:8px;display:block}
.side a.nav:hover{background:var(--panel2);color:var(--text);text-decoration:none}
.side a.nav.on{background:#1d1a3a;color:#fff}
.side .grow{flex:1}
main{padding:22px 28px 60px;max-width:1280px;width:100%}
.head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:18px;flex-wrap:wrap}
.sub{color:var(--muted)}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:16px}
.grid{display:grid;gap:14px}.g2{grid-template-columns:1.5fr 1fr}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}.g7{grid-template-columns:repeat(7,1fr)}
.stat .v{font-size:26px;font-weight:700;margin-top:2px}.stat .n{color:var(--muted);font-size:12px}
.pipe a.step{display:block;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:12px;color:var(--text);position:relative}
.pipe a.step:hover{border-color:var(--accent);text-decoration:none}
.pipe .k{color:var(--muted);font-size:12px}.pipe .c{font-size:24px;font-weight:700}
.pipe a.step.hot{border-color:var(--accent);background:#17143a}
.btn,button{background:var(--panel2);color:var(--text);border:1px solid var(--line);border-radius:8px;padding:7px 12px;font:inherit;cursor:pointer}
.btn:hover,button:hover{border-color:#3a4260;text-decoration:none}
.btn.pri,button.pri{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.ok,button.ok{background:#12372f;border-color:#1b6b59;color:#8bf0d2}
.btn.bad,button.bad{background:#3a1717;border-color:#7a2b2b;color:#ffb4b0}
button:disabled,.btn.off{opacity:.45;cursor:not-allowed}
.btn.sm,button.sm{padding:3px 9px;font-size:12px}
input,select,textarea{background:#0d1017;color:var(--text);border:1px solid var(--line);border-radius:8px;padding:8px 10px;font:inherit;width:100%}
input[type=checkbox],input[type=radio]{width:auto}
textarea{min-height:90px;resize:vertical;font-family:inherit}
input:focus,select:focus,textarea:focus{outline:2px solid #4b3fb8;border-color:transparent}
label{display:block;color:var(--muted);font-size:12px;margin:10px 0 4px}
label.inline{display:flex;gap:8px;align-items:center;color:var(--text);font-size:13px;margin:8px 0}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.row>*{flex:0 0 auto}.row>.f{flex:1 1 160px}
.cols2{display:grid;grid-template-columns:1fr 1fr;gap:12px}.cols3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
table{width:100%;border-collapse:collapse}th{color:var(--muted);font-size:12px;text-align:left;font-weight:600;padding:6px 8px;border-bottom:1px solid var(--line)}
td{padding:9px 8px;border-bottom:1px solid #1a1f2b;vertical-align:top}tr:last-child td{border-bottom:0}
.badge{display:inline-block;padding:1px 8px;border-radius:99px;font-size:11.5px;background:#222836;color:#c3c9da;white-space:nowrap}
.b-ok{background:#12372f;color:#7ee8c8}.b-warn{background:#3d2d0a;color:#ffc766}.b-err{background:#3a1717;color:#ff9c97}.b-demo{background:#3a2a05;color:#ffd166;border:1px dashed #a87a12}.b-acc{background:#241d57;color:#c1b6ff}
.flash{padding:10px 14px;border-radius:10px;margin-bottom:12px;border:1px solid var(--line);background:var(--panel2)}
.flash.ok{border-color:#1b6b59}.flash.err{border-color:#7a2b2b;background:#2a1414}.flash.warn{border-color:#8a6416;background:#2a2008}
.banner{padding:9px 16px;text-align:center;font-weight:600}
.banner.pause{background:#5a1d1d;color:#ffd0cd}.banner.demo{background:#4a3606;color:#ffe29a}.banner.alert{background:#2a2008;color:#ffd58a;font-weight:400;text-align:left}
.muted{color:var(--muted)}.small{font-size:12px}.mono{font-family:ui-monospace,Menlo,monospace;font-size:12px}
.phone{aspect-ratio:9/16;background:#000;border:1px solid var(--line);border-radius:18px;overflow:hidden;max-height:72vh}
.phone video,.phone img{width:100%;height:100%;object-fit:contain;display:block}
.thumb{width:54px;aspect-ratio:9/16;border-radius:6px;background:#000;object-fit:cover;border:1px solid var(--line)}
.bar{height:8px;background:#1b2030;border-radius:99px;overflow:hidden;min-width:80px}.bar>i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent2))}
.insight{background:linear-gradient(180deg,#17143a,#11141b);border-color:#2e2870}
.insight li{margin:0 0 10px}
.tabs{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:16px;border-bottom:1px solid var(--line)}
.tabs a{padding:8px 12px;color:var(--muted);border-bottom:2px solid transparent}.tabs a.on{color:#fff;border-color:var(--accent)}
.center{display:grid;place-items:center;min-height:100vh}.center .card{width:min(420px,92vw)}
details summary{cursor:pointer;color:var(--muted)}
pre.log{background:#0d1017;border:1px solid var(--line);border-radius:8px;padding:10px;overflow:auto;max-height:420px;font-size:12px;white-space:pre-wrap}
.pill-on{color:var(--ok)}.pill-off{color:var(--muted)}
.scroll-x{overflow-x:auto}
@media(max-width:1000px){.layout{grid-template-columns:1fr}.side{position:static;height:auto;flex-direction:row;flex-wrap:wrap}.g2,.g3,.g4,.g7,.cols2,.cols3{grid-template-columns:1fr 1fr}main{padding:16px}}
@media(max-width:620px){.g2,.g3,.g4,.g7,.cols2,.cols3{grid-template-columns:1fr}}