:root{color-scheme:dark;--bg:#06111d;--panel:#0b1b29;--panel2:#0e2231;--border:#233c4b;--line:rgba(129,179,195,.13);--text:#deedf2;--muted:#7d99a9;--mint:#44e2c6;--cyan:#5dbedc;--red:#ff766e;--orange:#e7ad67;--font:Inter,ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif}
*{box-sizing:border-box}html,body{height:100%;margin:0}body{background:var(--bg);color:var(--text);font:12px var(--font);overflow:hidden}button,select,input{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--mint);outline-offset:2px}.app{height:100dvh;min-height:590px;display:flex;flex-direction:column}
.topbar{height:70px;min-height:70px;display:flex;align-items:center;border-bottom:1px solid var(--border);padding:0 20px 0 18px;gap:28px;background:#0a1927;z-index:10}.brand{display:flex;align-items:center;gap:11px;min-width:280px}.brand-mark{width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:#102c38;color:var(--mint);font-size:35px;border:1px solid #286978;border-radius:11px;box-shadow:inset 0 0 15px #123b44}.brand-title{font-weight:820;letter-spacing:2px;font-size:16px;white-space:nowrap}.brand-title small{font-size:13px;color:var(--mint);letter-spacing:1px;font-weight:500}.brand-kicker{font-size:8px;letter-spacing:1.7px;color:#779ead;margin-top:5px}.top-meta{display:flex;gap:8px;align-items:center;flex:1;flex-wrap:wrap}.meta-pill{border:1px solid #2b5a55;background:#11302f;border-radius:5px;padding:8px 9px;font-size:9px;letter-spacing:1px;color:#a5e9d7;white-space:nowrap}.meta-pill.muted{background:#101f2b;border-color:#2b3e4a;color:#7c9aa9}.meta-pill.cyan{background:#102734;border-color:#25546b;color:#73cde0}.live-dot,.scope-dot,.footer-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--mint);margin-right:6px;box-shadow:0 0 10px #26ffd8}.top-right{display:flex;align-items:center;gap:8px}.digital-clock{font:500 13px ui-monospace,SFMono-Regular,Consolas,monospace;color:#a8c5d0;min-width:70px}.icon-btn{border:1px solid #2b4453;background:#132a39;color:#b7d0db;border-radius:5px;height:30px;min-width:30px;font-size:15px}.icon-btn:hover{background:#1f4453;color:white}
.layout{display:grid;grid-template-columns:294px minmax(0,1fr) 332px;flex:1;min-height:0}.panel{background:linear-gradient(180deg,#0e2231,#0a1a27);min-height:0;overflow:auto;scrollbar-width:thin;scrollbar-color:#345364 transparent}.control-panel{border-right:1px solid var(--border);padding:20px 18px}.telemetry-panel{border-left:1px solid var(--border);padding:20px 16px}.section-title{font-size:11px;font-weight:800;letter-spacing:1.45px;display:flex;justify-content:space-between;align-items:center;padding-bottom:17px;border-bottom:1px solid var(--line);white-space:nowrap}.section-title>span{font-size:9px;font-weight:500;letter-spacing:.5px;color:#658c9f}.section-title .health{font-size:10px;font-weight:650}.micro-label{font-size:9px;letter-spacing:1.2px;color:#7593a4;font-weight:800;margin:21px 0 15px}.tiny-right{float:right;font-size:9px;letter-spacing:.2px;color:#6b909e;font-weight:500}.input-group{margin:15px 0 24px}.input-label{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}.input-label label{color:#a1b6c4;font-size:11px}.input-label strong{font:600 12px ui-monospace,Consolas,monospace;color:#80e5d6}input[type=range]{width:100%;height:4px;appearance:none;background:linear-gradient(90deg,#348c9c,#294350);border-radius:6px;display:block;margin:0;accent-color:var(--mint)}input[type=range]::-webkit-slider-thumb{appearance:none;background:#a7f3e7;border:3px solid #174e55;width:15px;height:15px;border-radius:50%;box-shadow:0 0 0 1px #4b9b9b}input[type=range]::-moz-range-thumb{background:#a7f3e7;border:3px solid #174e55;width:12px;height:12px;border-radius:50%}.rail-separator{height:1px;background:var(--line);margin:21px 0}.rail-separator.tight{margin:16px 0}.toggle-line{display:flex;align-items:center;justify-content:space-between;gap:9px;margin:0 0 19px}.toggle-line strong{display:block;color:#d4e5ed;font-size:11px;font-weight:620}.toggle-line span:not(.slider-track){font-size:10px;color:#7194a5;display:block;margin-top:5px}.switch{position:relative;width:35px;height:20px;flex:none}.switch input{opacity:0;position:absolute}.slider-track{display:block;height:20px;background:#32404c;border:1px solid #506677;border-radius:30px;transition:.2s}.slider-track:before{content:'';position:absolute;width:12px;height:12px;left:4px;top:4px;border-radius:50%;background:#95a8b4;transition:.2s}.switch input:checked+.slider-track{background:#245f61;border-color:#368d83}.switch input:checked+.slider-track:before{transform:translateX(15px);background:#74edcd}.scenario-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.scenario-btn{text-align:left;border:1px solid #294655;border-radius:6px;background:#122a37;color:#d5e7ee;padding:11px 10px;min-height:75px;display:flex;align-items:flex-start;flex-direction:column;gap:2px;transition:.15s}.scenario-btn:hover{background:#1b3542;border-color:#4a7585}.scenario-btn span{color:#74bed0;font-size:18px;line-height:22px}.scenario-btn.danger span{color:#fa997d}.scenario-btn strong{font-size:10px;font-weight:700}.scenario-btn small{color:#7a9aab;font-size:9px}.wide-btn{margin-top:14px;width:100%;border:1px solid #27716b;border-radius:5px;padding:11px;background:#163c3e;color:#7ff5d5;font-weight:700;font-size:10px;letter-spacing:.4px}.wide-btn:hover{background:#245d56}.speed-row{display:flex;gap:6px}.speed-btn{flex:1;border:1px solid #314957;background:#142a37;border-radius:4px;color:#8da8b6;padding:10px 4px;font-size:10px;font-weight:700}.speed-btn.active{color:#60eed4;background:#153f3f;border-color:#317f75}.speed-btn.pause{flex:.65}.text-btn{border:none;background:transparent;color:#7598aa;font-size:10px;padding:16px 0 8px;text-align:left}.text-btn:hover{color:#fff}.panel-footer{color:#557b89;border-top:1px solid var(--line);padding-top:17px;margin-top:25px;font-size:8px;letter-spacing:.65px;display:flex;gap:8px;justify-content:space-between}.panel-footer span{color:#7aa5ac}
.stage{position:relative;background:#081723;min-height:0;overflow:hidden}.stage canvas#campusCanvas{position:absolute;width:100%;height:100%;top:0;left:0;display:block;cursor:grab}.stage canvas#campusCanvas:active{cursor:grabbing}.viewport-vignette{pointer-events:none;position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,17,24,.45),transparent 21%,transparent 75%,rgba(3,15,23,.72));z-index:1}.viewport-header{position:absolute;z-index:2;left:22px;right:22px;top:22px;display:flex;justify-content:space-between;align-items:start;pointer-events:none}.location-name{display:flex;align-items:center;background:rgba(7,23,32,.77);border:1px solid rgba(102,154,164,.25);border-radius:5px;padding:12px 15px;gap:10px;backdrop-filter:blur(8px)}.scope-dot{width:9px;height:9px}.location-name small{font-size:8px;color:#81a7b2;display:block;letter-spacing:1px}.location-name b{display:block;font-size:13px;letter-spacing:1.2px;margin-top:4px}.view-status{font-size:9px;letter-spacing:1.4px;color:#73939d;padding:11px 0;text-align:right}.view-picker{position:absolute;z-index:3;left:50%;transform:translateX(-50%);bottom:66px;display:flex;gap:4px;padding:5px;border:1px solid #315263;border-radius:8px;background:#0c2130e8;box-shadow:0 5px 26px #0005;max-width:calc(100% - 24px);overflow:auto}.view-btn{border:none;background:transparent;color:#98b5c1;padding:10px 11px;display:flex;gap:6px;align-items:center;font-size:11px;white-space:nowrap;border-radius:5px}.view-btn.active,.view-btn:hover{color:#b7f4e6;background:#1a4850}.stage-bottom{position:absolute;z-index:2;bottom:19px;left:21px;right:21px;display:flex;justify-content:space-between;align-items:center;font:500 9px ui-monospace,monospace;letter-spacing:.3px;color:#7f9ca8;pointer-events:none}.coordinate-chip{background:#0a2334c9;padding:8px 11px;border:1px solid #32506488;border-radius:4px}.grid-small{color:var(--mint)}.performance{display:flex;gap:10px;align-items:center;background:#0a2334c9;padding:8px 11px;border:1px solid #32506488;border-radius:4px}.perf-divider{height:10px;width:1px;background:#45606f}.floor-controls{position:absolute;z-index:3;right:18px;top:88px;display:flex;flex-direction:column;gap:7px}.floor-controls button{border:1px solid #355c6a;background:#102a3aca;color:#9fc7d2;padding:10px;text-align:left;border-radius:5px;letter-spacing:.6px;font-size:9px}.floor-controls button.on{background:#1e5050;color:#97f5d9}.loading-overlay{position:absolute;z-index:7;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px;background:#071725;transition:opacity .55s}.loading-overlay.hidden{opacity:0;pointer-events:none}.loading-overlay strong{font-size:12px;letter-spacing:2px}.loading-overlay span{font-size:11px;color:#8ba9b8}.loading-ring{height:56px;width:56px;border:3px solid #284755;border-top-color:#79e9d5;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.toast{pointer-events:none;position:absolute;z-index:9;left:50%;top:114px;transform:translateX(-50%) translateY(-5px);opacity:0;transition:.22s;background:#152c38;border:1px solid #4e8d8a;box-shadow:0 6px 30px #0008;border-radius:4px;padding:12px 18px;color:#c2f6ee;max-width:95%;text-align:center}.toast.visible{opacity:1;transform:translateX(-50%) translateY(0)}
.health.ok{color:#49dcb9!important}.health.warn{color:#efa967!important}.health.critical{color:#ff756b!important}.kpi-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:19px}.kpi{background:linear-gradient(160deg,#122c3b,#0b202d);border:1px solid #294755;border-radius:6px;padding:14px 11px 12px;min-width:0}.kpi label{font-size:8px;letter-spacing:.8px;color:#91aebc;font-weight:700;display:block;min-height:24px}.kpi label span{color:#688e9f}.kpi strong{display:block;color:#eff8f9;font:650 28px ui-monospace,'SFMono-Regular',Consolas,monospace;letter-spacing:-2px;margin:4px 0}.kpi small{display:block;color:#6e92a3;font-size:9px;white-space:nowrap}.kpi-meter{height:3px;background:#23404d;border-radius:8px;margin-top:12px;overflow:hidden}.kpi-meter i{display:block;height:100%;background:linear-gradient(90deg,#287a95,#6debd1);transition:width .3s}.kpi-meter.amber i{background:linear-gradient(90deg,#a07d36,#e6b970)}.chart-wrap{height:106px;position:relative}.chart-wrap canvas{width:100%;height:100%}.system-list{display:flex;flex-direction:column;gap:13px}.system-item{display:flex;align-items:center;gap:9px}.sys-icon{height:33px;width:33px;border:1px solid #284a59;border-radius:5px;background:#143040;display:flex;align-items:center;justify-content:center;font-size:18px;color:#65c2d6;flex:none}.sys-info{flex:1;min-width:0}.sys-info b{font-size:9px;letter-spacing:.55px;display:block}.sys-info small{display:block;font-size:9px;color:#7295a6;margin-top:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sys-state{font-size:9px;font-weight:750;letter-spacing:.3px}.sys-state.healthy{color:#6be4c1}.sys-state.warning{color:#eeb76e}.sys-state.critical{color:#ff867a}.rack-select{display:flex;gap:6px;align-items:center}.rack-select>label{font-size:9px;color:#7d9fae}select{padding:7px;background:#142e3d;color:#bed4df;border:1px solid #355563;border-radius:4px;min-width:0}.rack-select select{flex:1}.small-action{background:#163d43;color:#9af1dc;border:1px solid #2f726f;border-radius:4px;padding:8px 9px;font-size:9px;font-weight:700}.small-action:hover{background:#245e63}.inspector{margin-top:10px;border:1px solid #294656;border-radius:5px;padding:12px 10px;background:#0b2230}.inspector-head{display:flex;align-items:center;justify-content:space-between}.inspector-head>span:first-child{font:600 11px ui-monospace,Consolas,monospace;color:#c5e5ef}.tag{padding:4px 6px;font-size:9px;border-radius:3px}.tag.good{background:#174840;color:#82e8b9}.tag.bad{background:#542b2c;color:#ff9891}.rack-stats{display:flex;justify-content:space-between;gap:5px;margin-top:14px}.rack-stats span{font-size:8px;color:#7095a6;display:flex;flex-direction:column;gap:5px}.rack-stats b{font-size:11px;font-weight:650;color:#cfe5e9}.module-line{margin-top:14px}.module-line label{font-size:9px;color:#82a1ae;display:block;margin-bottom:7px}.module-controls{display:flex;gap:6px}.module-controls select{flex:1}.module-controls button{min-width:75px}.event-log{max-height:190px;min-height:74px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#31515d transparent}.event-entry{border-left:2px solid #45626a;padding:7px 9px;background:#102937;margin:0 0 5px;font-size:9px;line-height:1.5;color:#a6c1cc}.event-entry.info{border-color:#3ca9b0}.event-entry.warning{border-color:#e4a85b}.event-entry.critical{border-color:#fa6764}.event-entry time{font-family:ui-monospace,Consolas,monospace;color:#688d9b;margin-right:5px}.statusbar{height:31px;min-height:31px;background:#091924;border-top:1px solid var(--border);display:flex;gap:20px;align-items:center;justify-content:space-between;padding:0 17px;font:500 9px ui-monospace,Consolas,monospace;color:#668d9c;white-space:nowrap}.statusbar .footer-dot{width:5px;height:5px}#worldTime{color:#7de5d0}
dialog{width:min(600px,calc(100% - 30px));border:1px solid #447181;border-radius:10px;background:#112636;color:#c9e0eb;box-shadow:0 30px 100px #000a;padding:25px;font-size:13px;line-height:1.65}dialog::backdrop{background:#000a;backdrop-filter:blur(5px)}.dialog-header{display:flex;justify-content:space-between;align-items:start;gap:12px}.dialog-header h2{margin:0;font-size:18px}dialog code{background:#061620;padding:2px 4px;color:#95f4d5}
@media(max-width:1350px){.layout{grid-template-columns:258px minmax(0,1fr) 296px}.control-panel{padding:16px 13px}.telemetry-panel{padding:16px 12px}.topbar{gap:12px}.brand{min-width:255px}.top-meta .muted:nth-child(3){display:none}.view-btn{padding:9px 8px;font-size:10px}.kpi strong{font-size:25px}}
@media(max-width:1020px){body{overflow:auto}.app{height:auto;min-height:100dvh}.layout{grid-template-columns:minmax(0,1fr) 298px;grid-template-rows:650px auto}.control-panel{grid-row:2;grid-column:1/3;border-right:0;border-top:1px solid var(--border)}.stage{grid-row:1;grid-column:1}.telemetry-panel{grid-row:1;grid-column:2}.control-panel .scenario-grid{grid-template-columns:repeat(6,1fr)}.scenario-btn{min-width:0}.top-meta{display:none}.topbar{justify-content:space-between}.statusbar span:nth-child(2){display:none}}
@media(max-width:680px){.topbar{height:60px;min-height:60px;padding:0 12px}.brand{min-width:0}.brand-title{font-size:12px}.brand-title small{font-size:10px}.brand-kicker{font-size:6px}.brand-mark{width:32px;height:32px;font-size:26px}.digital-clock{display:none}.layout{display:flex;flex-direction:column}.stage{height:60svh;min-height:400px;order:0}.telemetry-panel{order:1;max-height:unset;overflow:visible}.control-panel{order:2;max-height:unset;overflow:visible}.control-panel .scenario-grid{grid-template-columns:repeat(3,1fr)}.view-picker{left:10px;right:10px;transform:none;bottom:57px}.view-btn span{display:none}.viewport-header{left:10px;top:11px}.location-name{padding:8px}.view-status{display:none}.floor-controls{top:66px;right:9px}.floor-controls button{font-size:8px;padding:7px}.stage-bottom{bottom:10px;left:10px;right:10px}.performance{gap:4px;font-size:8px}.statusbar{justify-content:center;font-size:8px}.statusbar #worldTime{display:none}.kpi strong{font-size:29px}}