@import url('');
:root{--bg:#080f19;--dark:#09131f;--panel:#0d1825;--stroke:#253243;--mid:#233344;--main:#d9e9ef;--muted:#8298aa;--teal:#3be6ca;--teald:#173e43;--blue:#6da7e9;--orange:#ffbb63}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Arial,sans-serif;color:var(--main);background:var(--bg)}button,input{font:inherit}button{cursor:pointer}#app{display:flex;width:100%;height:100%;min-height:580px}.rail{width:62px;flex:0 0 62px;background:#09131f;border-right:1px solid #1e2c3a;display:flex;align-items:center;flex-direction:column;gap:13px;padding-top:15px;z-index:10}.mark{height:57px;color:var(--teal);font-size:36px;line-height:41px;font-weight:300}.mark-lines{display:block;filter:drop-shadow(0 0 8px #27f6cc66)}.rail-icon{background:transparent;color:#667b8c;font-size:22px;border:0;border-left:2px solid transparent;width:48px;height:46px;transition:.2s;display:grid;place-items:center}.rail-icon:hover,.rail-icon.active{background:#172b36;color:#46e9d0;border-left-color:var(--teal)}.rail-bottom{margin-top:auto;margin-bottom:20px;display:flex;align-items:center;gap:15px;flex-direction:column}.rail-vertical{writing-mode:vertical-rl;transform:rotate(180deg);font-size:9px;letter-spacing:2px;color:#637988}.dot.live{background:#40ebbb;width:7px;height:7px;border-radius:10px;box-shadow:0 0 12px #39ffc0}.workspace{min-width:0;display:flex;flex:1;flex-direction:column}.topbar{height:73px;min-height:73px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--stroke);padding:0 24px;gap:15px}.eyebrow{font-size:9px;letter-spacing:1.9px;font-weight:800;color:#67889a}.brand-line{font-size:18px;letter-spacing:3.2px;font-weight:800;margin-top:7px;white-space:nowrap}.brand-line>span{color:var(--teal);font-weight:300}.brand-line small{font-size:9px;color:#7892a4;letter-spacing:1.3px;font-weight:600;margin-left:14px}.header-center{display:flex;gap:12px;align-items:center;color:#89a0af;font-size:10px;font-weight:700;letter-spacing:1.2px}.header-center i{height:16px;width:1px;background:#344658;margin:0 5px}.status-pulse{width:7px;height:7px;background:var(--teal);border-radius:50%;box-shadow:0 0 0 4px #3be6ca22}.header-right{display:flex;gap:9px;align-items:center}.chip{border:1px solid #2b3a4a;padding:8px 11px;font-size:10px;color:#9eb4c2;letter-spacing:1px}.icon-button{width:30px;height:30px;color:#9eb4c2;background:#162431;border:1px solid #34495b;border-radius:50%}.content{display:flex;flex:1;min-height:0}.viewport-zone{display:flex;flex-direction:column;flex:1;min-width:0;padding:20px 18px 16px 23px;gap:17px}.viewport-header{height:48px;display:flex;align-items:center;justify-content:space-between}.viewport-header h1{font-size:22px;letter-spacing:2.1px;margin:7px 0 0;font-weight:700}.viewport-header h1 small{font-size:10px;color:#688096;margin-left:12px;letter-spacing:1px}.view-switch{display:flex;gap:4px;background:#101d2b;border:1px solid #253849;padding:4px}.view-switch button{font-size:10px;letter-spacing:.9px;padding:10px 12px;background:none;border:0;color:#8299aa;font-weight:800}.view-switch button:hover{color:#bde6e2}.view-switch button.selected{background:#21434b;color:#62f6d8}.canvas-frame{position:relative;min-height:280px;flex:1;background:radial-gradient(ellipse at 50% 30%,#142c40,#09121d 70%);overflow:hidden;border:1px solid #314251}#world{display:block;width:100%;height:100%;touch-action:none;cursor:grab;outline:none}#world:active{cursor:grabbing}.view-grid{pointer-events:none;position:absolute;inset:0;background-image:linear-gradient(#b9eaff05 1px,transparent 1px),linear-gradient(90deg,#b9eaff05 1px,transparent 1px);background-size:90px 90px;mask-image:linear-gradient(to bottom,black,transparent 80%)}.canvas-top-left,.canvas-top-right,.canvas-bottom-left,.canvas-bottom-right{position:absolute;pointer-events:none;display:flex}.canvas-top-left{left:17px;top:16px;gap:8px}.minor-tag{padding:7px 9px;background:#0b1820b9;border:1px solid #37505d;font-weight:700;color:#9db9c4;font-size:9px;letter-spacing:1.2px}.minor-tag b{color:var(--teal);margin-right:6px}.canvas-top-right{right:19px;top:16px}.compass{width:53px;height:53px;border:1px solid #3b5863;border-radius:50%;background:#081a25a3;display:flex;justify-content:center;align-items:center;flex-direction:column;color:#b4d4d9;font-size:10px;gap:0}.compass-arrow{font-size:23px;color:var(--teal);line-height:24px}.canvas-bottom-left{left:17px;bottom:18px;flex-direction:column;gap:13px}.legend{display:flex;gap:14px}.legend span{font-size:9px;color:#acbfcd;letter-spacing:.8px;font-weight:700;display:flex;align-items:center;gap:6px}.legend i{width:6px;height:6px;border-radius:50%;display:inline-block}.legend-cyan{background:#27d4cc}.legend-yellow{background:#f1b05f}.legend-red{background:#f47b73}#viewport-hint{color:#7b98ab;font-size:9px;letter-spacing:1.2px;font-weight:700;text-shadow:0 1px #071323}.canvas-bottom-right{right:17px;bottom:17px;align-items:flex-end;gap:10px;flex-direction:column}.worldcoords{font-size:10px;color:#8bb4c4;font-family:ui-monospace,Consolas,monospace}.zoom-controls{pointer-events:all;display:flex;border:1px solid #3d5360;background:#081b25bd}.zoom-controls button{background:transparent;border:0;border-right:1px solid #314a5a;color:#b5e9e7;font-size:20px;width:34px;height:31px}.zoom-controls button:last-child{border-right:0}.zoom-controls button:hover{background:#17404b}.reticle{position:absolute;pointer-events:none;width:20px;height:20px;left:calc(50% - 10px);top:calc(50% - 10px);opacity:.22;border:1px solid #75c9d6;border-radius:50%}.reticle:after,.reticle:before{content:"";position:absolute;background:#75c9d6}.reticle:before{width:1px;height:34px;left:9px;top:-8px}.reticle:after{height:1px;width:34px;top:9px;left:-8px}.scale-label{position:absolute;top:82px;left:17px;pointer-events:none;color:#80c1b8;font-weight:800;letter-spacing:1.5px;font-size:9px}.micro-overlay{display:none;position:absolute;pointer-events:none;top:43%;left:15px;right:15px;justify-content:space-between;color:#aff1e4;font-family:ui-monospace,monospace;font-size:10px;letter-spacing:1px;text-shadow:0 1px 3px #000}.micro-overlay b{font-size:15px}.micro-overlay.visible{display:flex}#toast{position:absolute;top:85px;right:17px;background:#0f2a32ed;border:1px solid #3ac5bd;color:#d3fff4;padding:10px 15px;transform:translateX(140%);transition:.28s;font-size:11px;max-width:260px;pointer-events:none}#toast.visible{transform:translateX(0)}.flow-strip{background:#101d2a;border:1px solid #2a3a47;padding:12px 18px 14px;min-height:99px}.flow-head{display:flex;justify-content:space-between;font-size:9px;color:#b2cbd8;font-weight:800;letter-spacing:1.6px}.flow-head span:last-child{color:#72919d;font-family:ui-monospace,monospace}.flow-line{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));align-items:center;margin-top:15px;gap:7px}.flow-step{min-width:0;position:relative}.flow-step:after{content:'›';position:absolute;right:-7px;top:9px;color:#478c91;font-size:18px}.flow-step:last-child:after{display:none}.step-top{display:flex;gap:6px;align-items:center}.step-num{border:1px solid #4b827e;color:#5fecdc;background:#153537;font-size:9px;width:20px;height:20px;border-radius:3px;display:grid;place-items:center;flex:0 0 20px}.step-name{font-size:9px;font-weight:800;color:#acbfcd;letter-spacing:.65px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.step-bar{height:3px;background:#243c44;margin-top:9px;overflow:hidden}.step-fill{background:#41d9c5;height:100%;width:50%;transition:width .6s}.sidepanel{width:330px;flex:0 0 330px;background:#0d1723;border-left:1px solid #2b3948;display:flex;flex-direction:column;min-height:0}.panel-header{padding:20px 20px 18px;border-bottom:1px solid #263543;display:flex;align-items:flex-end;justify-content:space-between}.panel-header h2{margin:6px 0 0;font-size:17px;letter-spacing:.2px;font-weight:650}.live-tag{font-size:9px;color:#41e1b8;font-weight:900;letter-spacing:1px}.live-tag span{display:inline-block;width:6px;height:6px;background:#41e1b8;border-radius:50%;margin-right:5px}.scroll-panels{overflow-y:auto;padding:17px 19px 26px;scrollbar-width:thin;scrollbar-color:#345065 #0d1723}.section-head{display:flex;justify-content:space-between;color:#8fa9b8;font-size:9px;letter-spacing:1.5px;font-weight:900;margin-bottom:15px;margin-top:9px}.section-head:not(:first-child){margin-top:25px}.section-head span{color:#617b90}.metrics-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}.metric{min-width:0;background:#13212d;border:1px solid #293948;padding:13px 12px 11px}.metric label{display:block;font-size:8px;color:#b5c6d1;letter-spacing:1.1px;font-weight:850;white-space:nowrap}.metric label span{font-size:8px;color:#718b9d;margin-left:3px}.metric strong{display:block;margin:8px 0 5px;font-family:ui-monospace,Consolas,monospace;font-size:24px;letter-spacing:-1.4px;color:#e4f5f5}.metric small{color:#7c9eab;font-size:8px;letter-spacing:.5px}.metric small.up{color:#40d5b9}.chart-wrap{background:#111e2b;border:1px solid #293948;margin-top:11px;padding:13px 12px 7px}.row-between{display:flex;justify-content:space-between}.section-tiny{font-size:9px;font-weight:800;color:#acc0c9;letter-spacing:.9px}.unit{font-size:8px;color:#78939d}.chart-wrap canvas{margin-top:8px;width:100%;height:83px}.chart-times{display:flex;justify-content:space-between;color:#677e8d;font-size:8px;letter-spacing:.8px}.setting{margin-top:18px}.setting-head{display:flex;justify-content:space-between;align-items:center}.setting-head label{font-size:9px;color:#b0c3ce;font-weight:750;letter-spacing:1px}.setting-head strong{color:#6aead3;font-size:11px;font-family:ui-monospace,Consolas,monospace}.setting input{width:100%;height:5px;accent-color:#3be6ca;margin:12px 0 0;cursor:pointer}.setting-min{display:flex;justify-content:space-between;color:#688498;font-size:9px;margin-top:1px}.segmented{display:flex;border:1px solid #304251;margin-top:11px}.segmented button{width:33.3%;padding:10px 0;background:#13232e;color:#748b9b;border:0;border-right:1px solid #304251;font-size:9px;font-weight:800}.segmented button:last-child{border-right:0}.segmented button.active{color:#38ead0;background:#1b4649}.selected-equip{border:1px solid #304451;background:linear-gradient(145deg,#142937,#11202c);padding:15px}.equip-label{display:flex;justify-content:space-between;align-items:center}.equip-id{font-family:ui-monospace,monospace;font-size:10px;color:#53e5d3;letter-spacing:1.1px;font-weight:800}.equip-state{font-size:8px;font-weight:900;color:#4af0c2;background:#153f3f;padding:5px 7px}.selected-equip>strong{display:block;font-size:15px;margin-top:10px}.equip-desc{color:#92acb8;font-size:11px;line-height:1.5;margin:6px 0 13px}.equip-rows{display:grid;grid-template-columns:1fr auto;gap:9px;color:#7993a3;font-size:10px}.equip-rows b{color:#d0e2e9;font-family:ui-monospace,monospace;font-weight:600}.outline-button{background:transparent;border:1px solid #387869;color:#7ae9d6;width:100%;padding:10px 11px;text-align:left;font-size:10px;letter-spacing:1.4px;font-weight:850;margin-top:14px}.outline-button span{float:right}.outline-button:hover{background:#1a4344}.event-log{max-height:198px;overflow:hidden}.event-row{display:flex;gap:10px;align-items:flex-start;border-bottom:1px solid #1d2e3c;padding:9px 0}.event-row time{color:#657f8e;font-size:9px;font-family:ui-monospace,monospace;white-space:nowrap}.event-row span{font-size:10px;color:#a4bac7;line-height:1.35}.event-row .warning{color:#eaba80}.panel-actions{display:flex;gap:7px;padding:12px 18px 15px;border-top:1px solid #2b3948;background:#0d1723}.primary-action{background:#2dd2b7;border:1px solid #43e7c9;color:#072b31;font-size:10px;font-weight:900;letter-spacing:1.25px;flex:1;padding:13px 2px}.primary-action:hover{background:#6cf5dd}.secondary-action{background:#162533;border:1px solid #304352;color:#a9c2cd;min-width:38px;font-size:18px}.secondary-action:hover{color:#4ce9ce}footer{height:29px;flex:0 0 29px;border-top:1px solid #233341;display:flex;align-items:center;justify-content:space-between;padding:0 24px;color:#758b9a;font-size:8px;font-weight:700;letter-spacing:1px}footer .footer-block{width:6px;height:6px;background:var(--teal);display:inline-block;margin-right:8px}footer .footer-dim{padding:0 6px;color:#445d6d}.modal-backdrop{position:fixed;inset:0;background:#030910c9;display:none;justify-content:center;align-items:center;z-index:50;padding:18px}.modal-backdrop.visible{display:flex}.modal{max-width:530px;background:#111f2c;border:1px solid #477b82;padding:34px 38px;position:relative;box-shadow:0 24px 90px #000b}.modal h2{font-size:23px}.modal p{font-size:13px;color:#aec6d1;line-height:1.75}.modal-close{position:absolute;right:16px;top:10px;background:none;color:#c5e0e6;font-size:28px;border:0}.modal-keys{display:flex;flex-wrap:wrap;gap:8px;margin-top:25px}.modal-keys span{padding:8px;border:1px solid #344f5b;color:#5be3cf;font-size:10px}.modal-keys b{color:#b6ccd2;margin-left:8px}@media(max-width:1280px){.header-center{display:none}.sidepanel{width:295px;flex-basis:295px}.viewport-header h1{font-size:18px}.viewport-zone{padding:14px;gap:12px}.flow-line{gap:3px}.step-name{font-size:8px}}@media(max-width:920px){.rail{width:48px;flex-basis:48px}.brand-line small{display:none}.sidepanel{width:260px;flex-basis:260px}.sidepanel .scroll-panels{padding:13px}.view-switch button{font-size:8px;padding:9px}.step-num{display:none}.flow-strip{padding:11px}.legend{gap:6px}}@media(max-width:720px){html,body{overflow:auto;height:auto}#app{height:auto;min-height:100vh}.content{flex-direction:column}.viewport-zone{height:620px}.sidepanel{width:100%;flex:1;max-height:none}.scroll-panels{overflow:visible}.topbar{padding:10px}.rail{min-height:100vh;position:sticky;top:0;height:100vh}.viewport-header{align-items:flex-start;flex-direction:column;height:84px;gap:7px}.view-switch{align-self:flex-start}.header-right .chip{display:none}footer{display:none}.canvas-frame{min-height:360px}}