@import url('data:text/css,');
:root{--panel:#06121ae8;--edge:#2c4b5988;--dim:#83a6b2;--ink:#e7f5ff;--cyan:#79dff3;--amber:#febf79;--warn:#fb777d;--bg:#071018;--mono:ui-monospace,SFMono-Regular,Consolas,'Liberation Mono',monospace;font-family:Inter,Segoe UI,Arial,sans-serif;color:var(--ink)}*{box-sizing:border-box}html,body{height:100%;margin:0;overflow:hidden;background:#02080d}button,input,select{font:inherit}button{cursor:pointer;color:inherit}#view{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none;background:#071426}#loading{position:fixed;inset:0;z-index:99;background:#020b13;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:8px;letter-spacing:4px;color:#b4eaf7;font-family:var(--mono);font-size:11px;transition:opacity .65s}#loading h1{font:800 42px Inter,Arial;letter-spacing:16px;color:#e2f9ff;margin:0}#loading .load-icon{font-size:62px;color:#7ae5fa}.load-track{margin-top:22px;width:200px;height:3px;background:#18313d;overflow:hidden}.load-track span{display:block;background:#76dbef;height:100%;width:70%;animation:load 1.5s ease-in-out infinite}@keyframes load{0%{transform:translateX(-130%)}100%{transform:translateX(230%)}}
.topbar{height:74px;position:absolute;top:0;left:0;right:0;z-index:4;padding:0 30px;display:flex;align-items:center;justify-content:space-between;background:linear-gradient(180deg,#06131be8,#071722c9);border-bottom:1px solid #294452c0;backdrop-filter:blur(14px)}.brand{display:flex;align-items:center;gap:12px}.symbol{font-size:36px;color:var(--cyan);font-weight:300}.brand strong{font-size:20px;letter-spacing:5px;font-weight:800;display:block}.brand small{display:block;font:9px var(--mono);letter-spacing:2px;color:#99aebd;margin-top:4px}.top-stat{font:10px var(--mono);color:#b0cfd8;letter-spacing:1px;display:flex;align-items:center;gap:13px}.top-stat i{width:1px;height:15px;background:#36505c}.live-dot{height:8px;width:8px;background:#73ebbf;box-shadow:0 0 10px #5ffad1;display:inline-block;border-radius:50%}.iconbtn{width:36px;height:36px;border:1px solid var(--edge);background:#112633;clip-path:polygon(0 0,100% 0,100% 74%,78% 100%,0 100%);font-weight:700;font-size:17px}
.side{position:absolute;z-index:3;top:89px;bottom:53px;width:304px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#30505c transparent;border:1px solid #254452ad;background:linear-gradient(140deg,#06121ae9,#0b202ae1);backdrop-filter:blur(15px);padding:20px;box-shadow:0 22px 70px #01070b55}.left{left:21px}.right{right:21px;width:320px}.side-head{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #37546091;padding-bottom:17px;font:10px var(--mono);letter-spacing:1.3px;color:var(--cyan)}.side-head small{font:9px var(--mono);color:#6e9ba8}.side h2{font:10px var(--mono);letter-spacing:1.6px;color:#b2cdd4;margin:22px 0 11px}.zones{display:flex;flex-direction:column;gap:5px}.zones button{text-align:left;border:1px solid transparent;background:#0e253033;color:#aec3ca;display:flex;align-items:center;gap:10px;height:43px;font-size:11px;padding:0 9px}.zones button:hover{background:#163241a9}.zones button.active{background:#154052a6;border-color:#5094a7;color:#e3faff}.zones button em{font:10px var(--mono);font-style:normal;color:var(--cyan)}.zones button span{font:9px var(--mono);margin-left:auto;color:#6695a4}.section-label,.chart-head,.log-head{border-top:1px solid #36516191;padding-top:20px;margin-top:19px;margin-bottom:14px;font:10px var(--mono);letter-spacing:1.3px;color:#bbd5dc}.range-label{display:flex;justify-content:space-between;align-items:center;font:10px var(--mono);color:#8fa6b1;margin:17px 0 9px;gap:10px}.range-label output{color:#b7eeff;font-weight:700;white-space:nowrap}input[type=range]{width:100%;height:3px;appearance:none;background:#355668;outline:none;display:block;margin:14px 0 23px;accent-color:#79dff3}input[type=range]::-webkit-slider-thumb{appearance:none;width:13px;height:13px;background:var(--cyan);border:2px solid #082633;border-radius:0;box-shadow:0 0 9px #5ed7ff66}.button-pair{display:flex;gap:7px;margin-top:13px}.button-pair button,.full,dialog button{height:36px;padding:0 12px;background:#17313f;border:1px solid #375c6d;font:10px var(--mono);letter-spacing:.4px;flex:1}.button-pair button:hover,.full:hover{background:#265061}.button-pair .primary,dialog .primary{background:#64c8dd;color:#06212c;border-color:#85e0f0;font-weight:800}.button-pair .primary:hover{background:#99ecf6}.button-pair .danger{flex:0 0 82px;border-color:#a34a50;color:#ffa5a8;background:#3d1d2a}.button-pair .danger:hover{background:#6a2631}.speeds{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}.speeds button{background:#132c38;border:1px solid #29434f;font:11px var(--mono);padding:9px 0;color:#8da5af}.speeds button.active{background:#236279;color:#e3fbff;border-color:var(--cyan)}.switch-row{display:flex;align-items:center;justify-content:space-between;margin:12px 0;font:10px var(--mono);color:#a8bfc8}.switch{position:relative;display:inline-block;width:32px;height:18px}.switch input{opacity:0;width:0;height:0}.switch span{position:absolute;inset:0;background:#324a55;border-radius:10px;transition:background .2s}.switch span:before{content:'';position:absolute;left:3px;top:3px;width:12px;height:12px;border-radius:50%;background:#8fa9b1;transition:transform .2s}.switch input:checked+span{background:#245d6c}.switch input:checked+span:before{transform:translateX(14px);background:#82eaff}
.metric-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:7px;margin-top:13px}.metric{border:1px solid #3153638c;background:#0b283482;padding:13px 10px;min-height:90px;display:flex;flex-direction:column;gap:8px}.metric>span{font:9px var(--mono);color:#90b5bd;letter-spacing:.5px}.metric strong{font:600 21px var(--mono);color:#e9f9fa}.metric strong em{font:10px var(--mono);color:var(--cyan);font-style:normal}.metric small{font:8px var(--mono);color:#6992a2}.chart-head{display:flex;justify-content:space-between}.chart-head span{color:#6e95a3;font-size:9px;letter-spacing:0}#history{display:block;width:100%;height:105px;border-bottom:1px solid #26424e;background:repeating-linear-gradient(0deg,transparent,transparent 26px,#16343b60 27px)}.chart-legend{display:flex;gap:18px;font:9px var(--mono);margin:10px 0}.chart-legend span{display:flex;align-items:center;gap:7px}.chart-legend i{display:inline-block;width:14px;height:2px}.fleet{max-height:162px;overflow-y:auto}.empty{padding:16px 4px;color:#7196a4;font:10px/1.7 var(--mono)}.fleet-item{padding:10px;border:1px solid #31516184;margin:5px 0;background:#0d2b3980;font:10px var(--mono)}.fleet-item>div:first-child{display:flex;justify-content:space-between}.fleet-item strong{color:#afeaf5}.fleet-item small{color:#9eb9c1}.progress{height:4px;background:#17343e;margin-top:9px}.progress i{display:block;height:100%;background:#73dff2;width:0%}select{width:100%;height:36px;background:#112b38;border:1px solid #456271;color:#bddde8;padding:0 8px;font:11px var(--mono)}.full{width:100%;margin-top:7px}.log-head{margin-top:22px}.events{max-height:150px;overflow-y:auto;font:10px/1.6 var(--mono);color:#a6c0c9}.event{border-bottom:1px solid #25495762;padding:6px 0}.event span{color:#6fc8d7;margin-right:6px}
#hud{position:absolute;left:355px;bottom:76px;max-width:560px;pointer-events:none;text-shadow:0 2px 15px #000}.eyebrow{font:11px var(--mono);color:var(--cyan);letter-spacing:2px}#hud h1{font-size:clamp(20px,2.7vw,33px);line-height:1.14;letter-spacing:2px;font-weight:800;margin:10px 0}#hud p{font-size:12px;color:#d0dee4;line-height:1.4;margin:0}.hud-meta{display:flex;gap:22px;font:9px var(--mono);letter-spacing:1px;color:#98b6bf;margin-top:23px}.bottom{position:absolute;left:0;bottom:0;right:0;height:38px;border-top:1px solid #244655bd;background:#05151de6;display:flex;align-items:center;justify-content:space-between;padding:0 27px;color:#85afbb;font:9px var(--mono);letter-spacing:1px}.bottom span:first-child{color:var(--cyan)}#reticle{position:absolute;left:50%;top:50%;width:22px;height:22px;border:1px solid #d0edf938;border-radius:50%;pointer-events:none;transform:translate(-50%,-50%)}#reticle:after{position:absolute;content:'';height:3px;width:3px;background:#d4ffff8e;left:9px;top:9px;border-radius:50%}#toast{position:absolute;left:50%;top:93px;transform:translateX(-50%);pointer-events:none;font:11px var(--mono);color:#c5f7ff;background:#0b2634e8;padding:11px 18px;border:1px solid #55909b;opacity:0;transition:opacity .3s}#toast.visible{opacity:1}dialog{color:#dceff7;border:1px solid #5b96a5;max-width:510px;background:#081b25f5;box-shadow:0 0 120px #0009;padding:30px;line-height:1.6}dialog h2{letter-spacing:2px}dialog p{color:#a7c8d3;font-size:13px}dialog::backdrop{background:#020d15ac}dialog button{padding:0 25px;flex:auto}
@media(max-width:1180px){.side{width:255px;padding:13px;top:84px}.right{width:260px}.left{left:10px}.right{right:10px}#hud{left:290px;bottom:71px;max-width:360px}.top-stat{display:none}}@media(max-width:760px){.topbar{padding:0 14px;height:61px}.brand strong{font-size:15px}.brand small{font-size:7px}.side{top:71px;bottom:auto;height:min(36vh,320px);width:calc(50% - 14px);padding:9px}.left{left:8px}.right{right:8px}.metric-grid{grid-template-columns:1fr 1fr}.metric{min-height:65px;padding:7px}.metric strong{font-size:15px}.side-head{padding-bottom:8px;font-size:8px}.side h2{margin:12px 0 8px}.zones button{height:30px;font-size:9px}.zones button span{display:none}.section-label{padding-top:10px;margin-top:10px}#hud{left:14px;right:14px;bottom:52px;max-width:none}#hud h1{font-size:19px}#hud p{font-size:10px}.hud-meta span:last-child{display:none}.bottom{font-size:7px;padding:0 8px}.bottom span:nth-child(2){display:none}}
