:root{--bg:#071522;--panel:#0b1d2a;--line:#1c3848;--line2:#153040;--text:#e0eef4;--sub:#839ba9;--muted:#55717f;--aqua:#5ee6e2;--gold:#edbe7c;--red:#ef9178;--mono:'Consolas','SFMono-Regular',monospace;--sans:Inter,'Segoe UI',Arial,sans-serif}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;color:var(--text);font-family:var(--sans);background:var(--bg)}body{overflow-x:hidden}button,input,select{font:inherit}button{cursor:pointer}.app{min-height:100vh;display:grid;grid-template-rows:68px minmax(0,1fr) 38px}.topbar{display:flex;align-items:center;gap:30px;border-bottom:1px solid var(--line);background:#091a28;padding:0 23px}.logo{display:flex;align-items:center;gap:12px;min-width:285px}.logo-mark{width:37px;height:37px;transform:rotate(45deg);border:2px solid #70e1df;position:relative;box-shadow:0 0 14px #3cbbb62c}.logo-core{position:absolute;inset:9px;background:#69d5d5;box-shadow:0 0 13px #5fd6d5}.brand strong{display:block;font-weight:850;font-size:17px;letter-spacing:2.0px}.brand em{font-style:normal;color:var(--aqua)}.brand span{font:10px var(--mono);letter-spacing:1.25px;color:#9db4bf}.brand .dim{color:var(--muted)}.breadcrumbs{flex:1;font:10px var(--mono);letter-spacing:1.35px;color:var(--muted);white-space:nowrap}.breadcrumbs b{padding:0 10px;color:#294253}.breadcrumbs span{color:#b2c8d3}.status{display:flex;align-items:center;gap:18px;font:10px var(--mono);letter-spacing:.8px;white-space:nowrap}.live{color:var(--aqua)}.live i{display:inline-block;width:7px;height:7px;margin-right:5px;border-radius:50%;background:var(--aqua);box-shadow:0 0 8px var(--aqua)}.build{color:var(--muted)}.subtle{border:1px solid #315263;background:#0d2a3a;color:#afcbd5;font-size:10px;padding:10px 13px;letter-spacing:.9px}.subtle:hover,.icon-btn:hover{border-color:var(--aqua)}.workspace{display:grid;grid-template-columns:270px minmax(540px,1fr) 284px;min-height:0}.sidebar{border-right:1px solid var(--line);background:#0a1925;display:flex;flex-direction:column;min-height:0}.side-scroll{overflow-y:auto;flex:1;padding:24px 14px 15px}.panel-eyebrow{display:flex;align-items:center;justify-content:space-between;font:10px var(--mono);font-weight:700;letter-spacing:1.35px;color:#8daebc;margin:4px 9px 14px}.panel-code{font-size:9px;color:var(--aqua);font-weight:400}.view-list{display:flex;flex-direction:column;gap:3px}.view-btn{width:100%;display:flex;align-items:center;gap:11px;border:1px solid transparent;background:transparent;text-align:left;color:#a7bbc6;padding:10px 9px;min-height:62px}.view-btn:hover{background:#112b3a}.view-btn.active{border-color:#2a626c;background:linear-gradient(100deg,#103c45,#0e2939);color:#e1fcfa}.view-btn .view-icon{font-size:21px;width:30px;text-align:center;color:#80c4ca}.view-btn strong{font-size:11px;letter-spacing:.18px;font-weight:650}.view-btn small{display:block;font:9px var(--mono);margin-top:5px;color:#73919c;white-space:nowrap}.view-btn.active small{color:#9cc5c9}.view-btn .arrow{margin-left:auto;font-size:15px;color:#527583}.side-divider,.metrics-separator{height:1px;background:var(--line);margin:22px 5px}.slider-stack{padding:0 9px}.control{display:block;padding:8px 0}.control>span{display:flex;justify-content:space-between;align-items:center;color:#99adbb;font-size:11px}.control b{font:11px var(--mono);color:var(--aqua)}input[type=range]{width:100%;appearance:none;-webkit-appearance:none;background:linear-gradient(90deg,#3ba9ac 0%,#1d4558 70%);height:3px;border:0;margin:13px 0 4px;outline:none}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;border:2px solid #d8fcf7;background:#2d9eac;border-radius:50%;width:12px;height:12px}input[type=range]::-moz-range-thumb{border:2px solid #d8fcf7;background:#2d9eac;border-radius:50%;width:10px;height:10px}.scenario-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:0 7px}.scenario-grid button{font:9px var(--mono);letter-spacing:.3px;background:#102b3a;color:#a3bcc7;border:1px solid #284251;padding:12px 4px}.scenario-grid button:hover{border-color:var(--aqua);color:white}.sidebar-footer{display:flex;gap:9px;align-items:center;padding:14px 21px;border-top:1px solid var(--line);color:#a3b9c5;font:9px var(--mono);letter-spacing:.5px}.sidebar-footer small{color:#708896;font-size:9px;display:block;margin-top:3px}.small-indicator{width:8px;height:8px;border-radius:50%;background:#55d7ae;box-shadow:0 0 14px #55d7ae}.main{background:#081724;min-width:0;padding:16px;display:flex;flex-direction:column;gap:12px}.scene-shell{border:1px solid var(--line);background:#0b1d2c}.scene-top{min-height:88px;display:flex;justify-content:space-between;align-items:center;padding:16px 20px;gap:20px}.eyebrow{color:#839fae;font:10px var(--mono);letter-spacing:1.3px}.eyebrow .accent{color:var(--aqua)}h1{font-size:20px;margin:6px 0 3px;letter-spacing:-.45px;font-weight:680}.scene-top p{color:#7895a4;font-size:11px;margin:0}.head-buttons{display:flex;gap:8px;align-items:center}.icon-btn,.play-btn{border:1px solid #30536a;background:#153247;color:#b6d1dc;padding:10px;font:11px var(--mono);white-space:nowrap}.icon-btn{font-size:20px;padding:5px 13px}.play-btn{background:#164a50;color:#b4efeb;border-color:#2a7b7b;min-width:92px}.canvas-wrap{position:relative;min-height:425px;height:min(46vw,535px);background:radial-gradient(ellipse at 48% 40%,#123448,#071722);overflow:hidden}#scene{display:block;width:100%;height:100%;touch-action:none;cursor:grab}#scene:active{cursor:grabbing}.grid-overlay{pointer-events:none;position:absolute;inset:0;background:linear-gradient(0deg,#04121b75 0%,transparent 15%,transparent 85%,#04121b50);box-shadow:inset 0 0 90px #04121b60}.viewport-top-left{position:absolute;top:15px;left:17px;display:flex;gap:7px;pointer-events:none}.view-tag{border:1px solid #367678;background:#0a2c368c;color:#80e4df;font:9px var(--mono);letter-spacing:.75px;padding:7px 10px}.dim-tag{color:#7faabd;border-color:#284657;background:#112736bd}.viewport-right{pointer-events:none;position:absolute;top:17px;right:18px;text-align:right;display:flex;flex-direction:column;gap:10px}.coordinate span{display:block;font:8px var(--mono);color:#4f7c90;letter-spacing:1px}.coordinate b{display:block;font:10px var(--mono);font-weight:400;color:#a4c9d5;margin-top:5px}.scene-notice{position:absolute;bottom:16px;left:18px;font:9px var(--mono);color:#87a7b6;letter-spacing:.55px;pointer-events:none}.scene-notice span{color:var(--aqua);padding:0 7px}.scale{position:absolute;right:20px;bottom:13px;display:flex;gap:8px;align-items:center;pointer-events:none;font:9px var(--mono);color:#95b1be}.scale-line{display:inline-block;height:6px;width:65px;border:1px solid #9fc2d1;border-top:0}.view-toolbar{padding:11px 16px;display:flex;align-items:center;justify-content:space-between;gap:10px;border-top:1px solid var(--line);min-height:56px}.detail-status{display:flex;gap:9px;align-items:center;min-width:0}.detail-status .pulse{width:7px;height:7px;background:#60e2bf;border-radius:50%;box-shadow:0 0 8px #60e2bf;flex:0 0 auto}.detail-status b{font:11px var(--mono);color:#c9e1e8;white-space:nowrap}.detail-status span:last-child{font-size:10px;color:var(--sub);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.chip-tools{display:flex;align-items:center;gap:9px}#inspectionControls{display:flex;gap:7px;align-items:center}#inspectionControls label{font:9px var(--mono);color:var(--muted)}#inspectionControls select{font:9px var(--mono);padding:8px 5px;background:#0f3040;border:1px solid #2b5363;color:var(--aqua);max-width:170px}.chip-tools button{padding:9px 10px;background:#123342;border:1px solid #2c5363;color:#a2c9d1;font:9px var(--mono);white-space:nowrap}.chip-tools button:hover{color:white;border-color:var(--aqua)}.hidden{display:none!important}.pipeline,.ops-panel{border:1px solid var(--line);background:#0b1d2b}.section-head{display:flex;justify-content:space-between;align-items:center;padding:12px 15px;font:10px var(--mono);font-weight:700;letter-spacing:1px;color:#b7d1db;border-bottom:1px solid #183445}.section-head .sub{font-size:9px;font-weight:400;letter-spacing:.5px;color:#63899a}.divider-dot{color:var(--aqua);padding:0 8px}.stages{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:1px;background:#1b3543}.stage{background:#0b1e2d;min-height:105px;padding:12px 8px 10px;text-align:left;display:flex;flex-direction:column;gap:8px;border:0;position:relative;color:var(--text);min-width:0}.stage:after{content:'→';position:absolute;right:-5px;top:40px;color:#58889a;z-index:2}.stage:last-child:after{display:none}.stage.active{background:#153645;box-shadow:inset 0 2px var(--aqua)}.stage:hover{background:#123042}.stage-top{display:flex;justify-content:space-between;color:#6c95a5;font:9px var(--mono)}.stage-dot{width:7px;height:7px;border-radius:50%;background:var(--aqua)}.stage strong{font-size:10px;line-height:1.4;min-height:27px;overflow-wrap:anywhere;font-weight:600}.stage-bottom{color:#7d9cab;font:9px var(--mono);display:flex;justify-content:space-between}.stage-progress{width:100%;height:3px;background:#294456;margin-top:auto}.stage-progress i{height:100%;display:block;background:var(--aqua);width:0;transition:width .3s}.bottom-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:12px}.chart-wrap{height:143px;position:relative;padding:13px 13px 19px}.chart-wrap canvas{width:100%;height:107px}.chart-legend{display:flex;justify-content:space-between;align-items:center;color:#7199a7;font:9px var(--mono)}.chart-legend i{display:inline-block;width:7px;height:7px;background:var(--aqua);margin-right:5px}.chart-legend strong{color:#b1e6dd;font-size:11px}.event-log{height:143px;overflow-y:auto;padding:6px 13px}.event-row{display:flex;gap:12px;border-bottom:1px solid #173040;padding:8px 0;font:9px var(--mono);color:#95b1bf}.event-row time{color:#528797;flex:0 0 48px}.event-row.warn{color:var(--red)}.metrics{border-left:1px solid var(--line);background:#0a1926;min-height:0}.metrics-inner{padding:24px 15px}.metrics .panel-eyebrow{margin-left:0;margin-right:0}.metric-block.primary{margin-top:14px;padding:19px 15px;border:1px solid #24545b;background:radial-gradient(ellipse at top right,#17505a,#0d2735 77%)}.metric-block>span{font:9px var(--mono);color:#8fbdc6;letter-spacing:1.0px}.primary>strong{display:block;font-size:42px;font-weight:700;letter-spacing:-2px;margin:8px 0 0;color:#a1f0dd}.primary>strong small{font-size:18px;letter-spacing:0}.metric-sub{font:9px var(--mono);color:#6f9b9d;margin-top:9px}.trend-mark{color:#70e7b6;margin-right:3px}.metric-columns{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:10px}.metric-block.mini{border:1px solid #284153;padding:11px 10px;background:#0d2532}.mini span{font-size:8px;color:#7695a5}.mini strong{display:block;font-size:21px;margin-top:8px;font-weight:650}.mini small{display:block;color:#648596;font:9px var(--mono);margin-top:2px}.readout{display:flex;align-items:center;justify-content:space-between;margin:15px 0;font-size:11px;color:#8ea7b5}.readout strong{color:#c7e4e9;font:11px var(--mono);font-weight:600}.bar{height:4px;background:#234155;margin-top:-8px}.bar i{display:block;width:0;height:4px;background:linear-gradient(90deg,#4bb4c9,#83e6c9);transition:width .4s}.machine-card{border:1px solid #294959;background:#0f2a39;padding:13px 11px;margin-top:14px}.machine-bar{display:flex;justify-content:space-between;align-items:center;font:9px var(--mono);color:#669caf}.machine-bar b{color:#72dab6;font-size:9px}.machine-card h3{font-size:13px;line-height:1.4;margin:10px 0 3px;font-weight:690;color:#ddf3f4}.machine-card p{font-size:10px;color:#799fae;margin:0 0 15px;min-height:30px}.machine-values{display:grid;grid-template-columns:repeat(3,1fr);gap:3px}.machine-values>span{font:8px var(--mono);color:#6c9aa8}.machine-values strong{display:block;font-size:13px;color:#d2e9ee;margin-top:7px}.inventory{display:grid;grid-template-columns:1fr 1fr;gap:14px 6px}.inventory div strong{display:block;color:#cdeaf0;font:19px var(--mono)}.inventory div span{display:block;color:#6b8e9e;font-size:9px;margin-top:4px}.footnote{border-top:1px solid var(--line);margin-top:24px;padding-top:14px;color:#587788;font-size:9px;line-height:1.6}.footer{border-top:1px solid var(--line);background:#081723;display:flex;justify-content:space-between;align-items:center;padding:0 22px;font:9px var(--mono);color:#7293a1;letter-spacing:.4px}.footer b{padding:0 10px;color:#315664}.footer-dot{width:7px;height:7px;border-radius:50%;background:#4fe0b4;display:inline-block;margin-right:6px}
@media(max-width:1440px){.workspace{grid-template-columns:238px minmax(465px,1fr) 255px}.sidebar .side-scroll{padding:18px 10px}.metrics-inner{padding:18px 11px}.breadcrumbs{display:none}.logo{min-width:0}.stage{padding:9px 6px}.stage strong{font-size:9px}.stage-bottom{font-size:8px}}
@media(max-width:1050px){.workspace{grid-template-columns:205px minmax(0,1fr)}.metrics{grid-column:1/-1;border-top:1px solid var(--line)}.metrics-inner{display:grid;grid-template-columns:1.3fr repeat(2,1fr);gap:0 18px}.metrics-inner>.panel-eyebrow,.metrics-separator,.footnote{grid-column:1/-1}.metric-block.primary{margin-top:0}.bottom-grid{grid-template-columns:1fr}.canvas-wrap{height:440px}.metrics .readout{margin:8px 0}.machine-card{margin:0}.inventory{grid-column:1/-1;display:flex;justify-content:space-between}}
@media(max-width:760px){.app{display:block}.topbar{height:62px;padding:0 12px;gap:8px}.status .build,.status .live{display:none}.workspace{display:flex;flex-direction:column}.sidebar{border-right:0}.side-scroll{padding:10px}.view-list{flex-direction:row;overflow-x:auto}.view-btn{min-width:170px}.slider-stack{display:grid;grid-template-columns:1fr 1fr;gap:0 13px}.scenario-grid{grid-template-columns:repeat(4,1fr)}.sidebar-footer{display:none}.main{padding:7px}.scene-top{padding:12px}.scene-top h1{font-size:16px}.canvas-wrap{height:360px;min-height:360px}.viewport-right{display:none}.scene-notice{font-size:8px;bottom:28px}.view-toolbar{flex-wrap:wrap}.stages{grid-template-columns:repeat(4,1fr)}.stage{min-height:83px}.bottom-grid{grid-template-columns:1fr}.metrics-inner{display:block}.footer{font-size:8px;flex-direction:column;gap:5px;padding:11px}.status{margin-left:auto}}

.tool-toggle{width:100%;margin-top:13px;border:1px solid #2e6871;background:#103c46;color:#91e1dd;font:9px var(--mono);padding:9px 6px;letter-spacing:.7px}.tool-toggle:hover:not(:disabled){border-color:var(--aqua);color:white}.tool-toggle:disabled{opacity:.4;cursor:not-allowed}.tool-toggle[data-state="maintenance"]{border-color:#9d7556;color:#edb781;background:#453022}