:root{--bg:#0f1115;--panel:#171b22;--card:#1d232e;--line:#2a3342;--txt:#e8edf3;--mut:#9aa6b8;--blue:#1877f2;--pink:#e1306c;--green:#22c55e;--amber:#f59e0b}
*{box-sizing:border-box}body{margin:0;font-family:Inter,Segoe UI,Arial,sans-serif;background:var(--bg);color:var(--txt)}
.sandbox-banner{background:var(--amber);color:#111;text-align:center;font-weight:700;font-size:13px;padding:8px 12px}
.app{display:flex;min-height:calc(100vh - 34px)}
.sidebar{width:280px;background:var(--panel);border-right:1px solid var(--line);padding:16px;display:flex;flex-direction:column;gap:14px;position:sticky;top:0;height:calc(100vh - 34px)}
.logo{display:flex;gap:10px;align-items:center}.logo-mark{width:42px;height:42px;border-radius:10px;background:linear-gradient(135deg,#1877f2,#e1306c);display:flex;align-items:center;justify-content:center;font-weight:900;font-size:22px}
.logo-title{font-weight:800}.logo-sub{font-size:11px;color:var(--mut)}
.nav{display:flex;flex-direction:column;gap:6px}.nav button{background:transparent;border:1px solid transparent;color:var(--txt);text-align:left;padding:10px 12px;border-radius:10px;cursor:pointer;font-size:14px}.nav button:hover{background:#222b38}.nav button.active{background:#243044;border-color:var(--line)}
.pill{background:#f59e0b;color:#111;font-size:10px;padding:2px 6px;border-radius:20px;font-weight:800}
.side-foot{margin-top:auto;display:flex;flex-direction:column;gap:8px}.env-row{display:flex;align-items:center;gap:8px;font-weight:800;font-size:12px}.dot{width:10px;height:10px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green)}
.main{flex:1;padding:20px;max-width:1250px}
.topbar{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:16px}.topbar h1{margin:0;font-size:26px}.muted{color:var(--mut)}.small{font-size:12px}
.top-actions{display:flex;gap:8px;align-items:center}.badge{padding:6px 10px;border-radius:20px;font-size:12px;font-weight:800}.badge.sandbox{background:#f59e0b;color:#111}.badge.cf{background:#222b38;border:1px solid var(--line)}
.btn{background:#2a3547;color:var(--txt);border:1px solid var(--line);padding:9px 14px;border-radius:10px;cursor:pointer}.btn:hover{filter:brightness(1.15)}.btn.primary{background:var(--blue);border-color:var(--blue);color:#fff}.btn.small{padding:6px 10px;font-size:13px}.btn.full{width:100%}.btn.ghost{background:transparent}.file-label{text-align:center}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px;margin-bottom:16px}.card h3,.card h4{margin:0 0 10px 0}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}.stat-num{font-size:30px;font-weight:900}.stat-label{color:var(--mut);font-size:13px}
.row{display:flex;align-items:center}.between{justify-content:space-between}.gap{gap:8px}
.plat-row{display:flex;align-items:center;gap:10px;margin:8px 0}.plat{font-size:11px;font-weight:900;padding:4px 8px;border-radius:8px;color:#fff}.plat.fb{background:#1877f2}.plat.ig{background:#e1306c}.plat.tt{background:#111;border:1px solid #333}.plat.yt{background:#ff0000}.bar{flex:1;background:#0f141b;height:10px;border-radius:10px;overflow:hidden}.bar i{display:block;height:100%}
.runs{display:flex;flex-direction:column;gap:8px}.run{background:#0f141b;border:1px solid var(--line);border-radius:10px;padding:10px;font-size:13px}
.map-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.map-grid div{background:#0f141b;border:1px solid var(--line);border-radius:10px;padding:10px;font-size:13px}
.flows{display:flex;flex-direction:column;gap:10px}.flow{background:#0f141b;border:1px solid var(--line);border-radius:12px;padding:12px;display:flex;justify-content:space-between;align-items:center;gap:10px}.flow .meta{font-size:12px;color:var(--mut)}.toggle{width:46px;height:24px;border-radius:20px;background:#333;border:1px solid var(--line);cursor:pointer;position:relative}.toggle.on{background:var(--green)}.toggle i{position:absolute;top:2px;left:2px;width:18px;height:18px;background:#fff;border-radius:50%;transition:.15s}.toggle.on i{left:24px}
.builder-layout{display:grid;grid-template-columns:1.6fr .9fr;gap:12px}.canvas{background:#0f141b;border:1px dashed #3a465a;border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:0;min-height:420px}.node{background:#1d2634;border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin:0 auto;width:min(560px,100%);cursor:pointer;position:relative}.node.sel{border-color:var(--blue);box-shadow:0 0 0 2px rgba(24,119,242,.4)}.node .k{font-size:11px;font-weight:800;letter-spacing:.06em}.node .t{font-weight:800}.node .d{font-size:12px;color:var(--mut)}.k.TRIGGER{background:#7c3aed;color:#fff;padding:2px 6px;border-radius:6px}.k.CODE{background:#0ea5e9;color:#fff;padding:2px 6px;border-radius:6px}.k.ROUTER{background:#f59e0b;color:#111;padding:2px 6px;border-radius:6px}.k.DELAY{background:#8b5cf6;color:#fff;padding:2px 6px;border-radius:6px}.k.TABLES{background:#22c55e;color:#111;padding:2px 6px;border-radius:6px}.k.REPLY{background:#e1306c;color:#fff;padding:2px 6px;border-radius:6px}
.wire{width:2px;height:18px;background:#3a465a;margin:0 auto}.branch{display:flex;gap:10px;justify-content:center}.branch .node{margin:0;width:100%}
.input{width:100%;background:#0f141b;border:1px solid var(--line);color:var(--txt);padding:10px 12px;border-radius:10px;margin:6px 0}.mono{font-family:Consolas,monospace}.lbl{font-size:12px;color:var(--mut);margin-top:8px;display:block}.pre{background:#0f141b;border:1px solid var(--line);border-radius:10px;padding:12px;white-space:pre-wrap;word-break:break-word;font-size:12px;max-height:320px;overflow:auto}.pre.big{font-size:14px}
.conn-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.conn{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px}.conn .hd{display:flex;justify-content:space-between;align-items:center}.tok-row{display:flex;gap:6px}.tok-row .input{flex:1}
.card.warn{background:#2a210f;border-color:#6b5303;color:#fde68a}
code{background:#0f141b;padding:2px 6px;border-radius:6px;border:1px solid var(--line)}
.view{display:none}.view.active{display:block}
table.qat{width:100%;border-collapse:collapse;font-size:13px}table.qat th,table.qat td{border-bottom:1px solid var(--line);padding:8px;text-align:left}table.qat input{background:transparent;border:1px solid transparent;color:var(--txt);width:100%;padding:6px}table.qat input:focus{border-color:var(--blue);background:#0f141b;border-radius:6px}
@media(max-width:1000px){.grid4{grid-template-columns:1fr 1fr}.grid2,.builder-layout,.conn-grid,.map-grid{grid-template-columns:1fr}.sidebar{display:none}.app{display:block}}