:root{--ink:#dceaf2;--dim:#829cad;--muted:#587386;--line:#203749;--bg:#06121e;--panel:#0a1b2a;--card:#0d2333;--cyan:#42dedc;--gold:#e9b76b;--red:#ef7380;font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color-scheme:dark}
*{box-sizing:border-box}html,body{margin:0;padding:0;height:100%;min-width:1020px;background:var(--bg);color:var(--ink);font-size:12px}button,input{font:inherit}button{cursor:pointer}#app{min-height:100vh;display:flex;flex-direction:column;background:radial-gradient(ellipse at 52% 10%,#0c2737,#06111d 66%)}
.topbar{height:72px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0;border-bottom:1px solid #224256;background:#081825;padding:0 25px;gap:16px}.brand{display:flex;align-items:center;gap:12px;min-width:320px}.brand-mark{width:36px;height:36px;color:var(--cyan)}.brand-mark svg{width:100%;height:100%}.brand-name{font-size:17px;letter-spacing:2.0px;font-weight:760}.brand-name span{font-weight:300;color:#b5cad5}.brand-sub{font-size:9px;color:#7d9bac;letter-spacing:1.45px;margin-top:4px}.top-center{font-size:10px;color:#8da9b9;display:flex;align-items:center;gap:12px;letter-spacing:1px;white-space:nowrap}.top-center b{color:#97e5c7;font-size:10px;font-weight:600}.live-dot,.hud-dot,.sys-dot{height:7px;width:7px;border-radius:50%;background:#52ebbd;display:inline-block;box-shadow:0 0 8px #3cbf91}.sep{height:14px;border-left:1px solid #355367}.muted{color:#667f8d}.top-actions{display:flex;gap:9px}.btn{border-radius:5px;padding:10px 13px;border:1px solid #355064;color:#bdd2db;background:#102b3b;font-size:11px;letter-spacing:.5px}.btn:hover,.small-btn:hover{border-color:var(--cyan);color:white}.btn.primary{color:#042832;background:#51dcd9;border-color:#51dcd9;font-weight:800}.btn.primary:hover{background:#8df4e6}
.workspace{display:grid;grid-template-columns:258px minmax(400px,1fr) 340px;flex:1;min-height:0;max-height:calc(100vh - 100px)}.sidebar{overflow:auto;background:#071723;scrollbar-width:thin;scrollbar-color:#254758 transparent}.leftbar{padding:25px 19px;border-right:1px solid #1c3546}.rightbar{padding:25px 21px;border-left:1px solid #1c3546}.section-kicker{color:#8baebe;font-size:9px;font-weight:750;letter-spacing:1.6px;display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}.section-kicker span:not(.pill-live){color:#507284;font-size:9px}.pill-live{border:1px solid #27634f;color:#57dba6;background:#123e39;padding:3px 6px;font-size:8px;border-radius:2px}.mode-nav{display:flex;flex-direction:column;gap:4px}.nav-item{display:flex;align-items:center;gap:12px;border:1px solid transparent;border-radius:6px;color:#96afbd;background:transparent;text-align:left;padding:12px 9px;width:100%;font-weight:660;font-size:11.5px}.nav-item.active{background:#103c49;border-color:#1c6870;color:#e1f9f8}.nav-item:hover{background:#102d3b}.nav-item small{display:block;margin-top:4px;font-size:9px;color:#7294a5;font-weight:400}.nav-icon{width:24px;text-align:center;font-size:22px;color:#56cdd4}.nav-arrow{margin-left:auto;font-size:20px;color:#749aa7}.rule{height:1px;background:var(--line);margin:24px 0}.control-group{margin:20px 0}.control-group label{display:flex;justify-content:space-between;gap:10px;color:#a3bdcb;font-size:11px}.control-group strong{color:#d6f7f8;font-weight:700}.control-group input[type=range]{width:100%;margin:15px 0 7px;accent-color:#3acccc;height:3px;cursor:pointer}.range-label{display:flex;justify-content:space-between;font-size:9px;color:#607e91}.switch-row{display:flex;align-items:center;justify-content:space-between;gap:9px;margin:16px 0;color:#acc2ce;font-size:10.5px}.switch-row small{display:block;color:#668597;margin-top:4px;font-size:9px}.switch-row input{position:absolute;opacity:0}.switch-row i{flex:none;width:34px;height:19px;background:#244256;border-radius:15px;position:relative;transition:.2s}.switch-row i:before{content:'';position:absolute;top:3px;left:3px;width:13px;height:13px;border-radius:50%;background:#779ba9;transition:.2s}.switch-row input:checked+i{background:#1b7e87}.switch-row input:checked+i:before{background:#9ffff5;transform:translateX(15px)}.section-footer{font-size:8px;line-height:1.7;letter-spacing:.5px;color:#527181;margin-top:30px}.tiny-square{width:5px;height:5px;display:inline-block;background:#55d5a5;margin-right:5px}
.view-area{padding:22px 24px;overflow-y:auto;min-width:0;scrollbar-color:#23475b transparent;scrollbar-width:thin}.view-top{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:17px}.eyebrow,.panel-kicker{font-size:9px;font-weight:750;letter-spacing:1.4px;color:#60b9c6}.view-title h1{font-size:22px;font-weight:650;margin:8px 0 0;letter-spacing:-.65px}.view-title h1 em{font-weight:350;color:#9ab1bc;font-style:normal}.view-tools{display:flex;gap:8px}.small-btn{border:1px solid #33566a;border-radius:4px;background:#102a3b;padding:10px 11px;color:#a1c1c7;font-size:10px}.small-btn b{color:#8ce9df;font-size:10px}
.canvas-frame{position:relative;height:clamp(340px,50vh,740px);background:#0a1b28;border:1px solid #2c4e61;border-radius:7px;overflow:hidden;box-shadow:inset 0 0 0 1px #0d2230,0 22px 70px #0003}#scene{display:block;height:100%;width:100%;cursor:grab;touch-action:none}#scene:active{cursor:grabbing}.hud-left{position:absolute;left:18px;top:18px;pointer-events:none}.coordinate{display:flex;align-items:center;gap:9px;background:#081d2de0;padding:9px 11px;border:1px solid #345266;font-size:9px;color:#a8c5d3;letter-spacing:1px}.hud-label{margin-top:10px;background:#071b2ce0;padding:7px 10px;color:#5eced8;display:inline-block;font-size:9px;letter-spacing:1px}.hud-right{position:absolute;right:18px;top:18px;pointer-events:none}.viewport-legend{background:#071b2bdd;padding:10px;border:1px solid #28465a;display:flex;gap:10px;font-size:8px;color:#9cbac6;letter-spacing:.4px}.viewport-legend div{display:flex;gap:5px;align-items:center}.legend-swatch{display:inline-block;width:6px;height:6px;border-radius:50%}.canvas-footer{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(transparent,#041623dd 20%);padding:24px 16px 10px;display:flex;gap:23px;color:#7a9cac;font-size:8px;letter-spacing:1.0px;pointer-events:none}.overview-strip{margin:14px 0 21px;display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:#213c50;border:1px solid #254254;border-radius:5px;overflow:hidden}.strip-stat{padding:16px;background:#0a2131;min-width:0}.strip-stat>span,.kpi>span{font-size:8px;letter-spacing:1.15px;color:#7f9fac;font-weight:700}.strip-stat b{display:block;font-size:20px;margin:8px 0 4px;color:#ebf7f5;font-weight:600;white-space:nowrap}.strip-stat i{font-size:12px;font-style:normal;color:#83a6b6}.strip-stat small{font-size:9px;color:#69899c}.below-grid{display:grid;grid-template-columns:1.55fr 1fr;gap:14px;padding-bottom:25px}.panel{background:#091d2b;border:1px solid #244354;border-radius:5px;padding:17px;min-width:0}.panel-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:17px}.panel h2{font-size:14px;font-weight:600;margin:6px 0}.panel-tag{font-size:8px;color:#80aab4;border:1px solid #305566;padding:6px 8px;border-radius:3px}.flow-track{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.flow-step{background:#102b3b;border:1px solid #244456;border-left:2px solid #37d7d1;padding:11px 9px;min-width:0}.flow-step .flow-name{font-size:9px;color:#b4cfda;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.flow-step .flow-num{font-size:8px;color:#648596;margin-bottom:5px}.flow-step b{display:block;font-size:15px;margin:6px 0 8px;font-weight:650}.bar{height:4px;border-radius:3px;background:#234153;overflow:hidden}.bar i{display:block;height:100%;background:#41d5ce;border-radius:3px;transition:width .25s}.event-row{display:flex;gap:9px;padding:11px 0;border-bottom:1px solid #183348;line-height:1.4;font-size:10px;color:#a2bac6}.event-row:last-child{border:0}.event-time{font-family:ui-monospace,monospace;color:#58c7cd;white-space:nowrap}.event-icon{color:#57cda8} .event-icon.warn{color:#e3a668}
.kpi-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}.kpi{padding:14px 12px;background:#10283a;border:1px solid #254457;border-radius:5px;min-width:0}.kpi>b{font-size:26px;letter-spacing:-1.1px;font-weight:720;display:block;margin:13px 0 11px;white-space:nowrap}.kpi>b.kpi-cyan{color:#46e3d6}.kpi>b small{font-size:11px;color:#9dbbc8;letter-spacing:0;margin-left:3px;font-weight:450}.kpi-extra{display:flex;align-items:center;justify-content:space-between;gap:5px;color:#678899;font-size:7px;letter-spacing:.5px}.kpi-extra .delta{color:#42c79f}.chart-heading{display:flex;align-items:end;justify-content:space-between;margin-bottom:12px}.chart-heading h3{font-size:13px;margin:5px 0 0}.chart-heading>span{color:#7094a7;font-size:8px}.chart-wrap canvas{width:100%;height:145px;display:block}.chart-legend{display:flex;justify-content:center;gap:17px;color:#90a9b7;font-size:9px;margin-top:8px}.chart-legend i{display:inline-block;width:13px;height:2px;vertical-align:middle;margin-right:5px}.utilization{display:flex;flex-direction:column;gap:8px}.util-line{display:grid;grid-template-columns:83px 1fr 30px;align-items:center;gap:8px;font-size:9px;color:#95b4c1}.util-line .bar{height:5px}.util-line b{color:#b2d2dd;font-size:9px;text-align:right}.inspect-head{display:flex;justify-content:space-between;align-items:center}.mini-ghost{background:transparent;border:0;color:#7092a2}.inspector{min-height:132px}.inspector-empty{height:132px;border:1px dashed #2c5061;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:10px;color:#8daab7}.inspector-empty b{margin:8px 0}.inspector-empty small{font-size:9px;line-height:1.5;color:#688a99}.inspect-symbol{color:#46cfcb;font-size:23px}.inspect-detail{background:#0d2a3a;border:1px solid #2c5867;padding:12px;border-radius:4px}.inspect-detail h4{font-size:14px;margin:0 0 8px}.inspect-detail p{color:#9ab9c4;font-size:10px;margin:0 0 12px}.inspect-row{display:flex;justify-content:space-between;padding:8px 0;border-top:1px solid #244a59;font-size:10px}.inspect-row b{color:#dceff1}.inspect-detail button{background:#1f6070;border:1px solid #397f8e;color:white;width:100%;padding:9px;border-radius:3px;margin-top:9px}.danger{display:flex;gap:8px;margin-top:17px}.danger-button{flex:1;border:1px solid #923a51;background:#462333;color:#ffacb3;padding:10px 6px;font-size:10px;letter-spacing:.8px;font-weight:700;border-radius:3px}.danger-button.active{background:#d54754;color:#fff}.reset-button{border:1px solid #3b5b6a;color:#a5bfca;background:#173141;border-radius:3px;padding:10px 14px;font-size:10px}
.statusbar{flex-shrink:0;height:28px;display:flex;align-items:center;justify-content:space-between;padding:0 19px;background:#04111b;border-top:1px solid #1a374a;color:#628395;font-size:8px;letter-spacing:.85px}.sys-dot{width:5px;height:5px;margin-right:4px}.loading-screen{position:absolute;inset:0;background:#071c2dec;display:flex;justify-content:center;align-items:center;flex-direction:column;z-index:3;transition:opacity .6s}.loading-screen.hidden{opacity:0;pointer-events:none}.loading-sign{font-size:70px;color:#5be6d9;line-height:1.2}.loading-label{letter-spacing:2px;font-size:10px;font-weight:750;margin:10px 0 19px}.loading-progress{width:245px;height:3px;background:#214257;overflow:hidden}.loading-progress span{display:block;background:#50e4d7;width:90%;height:3px;animation:load 2s infinite alternate}@keyframes load{from{width:15%}to{width:100%}}.loading-sub{color:#86a8b8;font-size:10px;margin-top:15px}#toast{position:absolute;bottom:54px;left:50%;transform:translateX(-50%);background:#103849;border:1px solid #36838d;color:#d8f5f3;padding:11px 17px;max-width:90%;border-radius:5px;opacity:0;pointer-events:none;transition:.25s;white-space:nowrap;z-index:5}#toast.show{opacity:1}
@media(max-width:1480px){.workspace{grid-template-columns:222px minmax(400px,1fr) 305px}.leftbar,.rightbar{padding:20px 14px}.view-area{padding:20px 17px}.top-center{display:none}.canvas-footer{gap:10px}.strip-stat{padding:12px}.strip-stat b{font-size:17px}}
@media(max-width:1120px){.workspace{grid-template-columns:200px minmax(390px,1fr)}.rightbar{grid-column:1/3;display:block;max-height:none;border-top:1px solid #264254}.workspace{max-height:none}.rightbar .kpi-grid{grid-template-columns:repeat(4,1fr)}.view-area{overflow:visible}.leftbar{overflow:visible}.below-grid{grid-template-columns:1fr}.topbar{height:66px}.statusbar{display:none}}

@media(max-width:760px){.workspace{grid-template-columns:minmax(0,1fr)}.rightbar{grid-column:1}.view-area,.leftbar,.rightbar{min-width:0;max-width:100
@media(max-width:760px){.workspace{grid-template-columns:minmax(0,1fr)}.rightbar{grid-column:1}.view-area,.leftbar,.rightbar{min-width:0;max-width:100%}.rightbar .kpi-grid{grid-template-columns:repeat(2,1fr)}}