/* Operator console ------------------------------------------------------------ */
body.console{--amb-a:rgba(91,59,255,.30);--amb-b:rgba(44,227,255,.16)}
.user-chip{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 10px 0 4px;border-radius:99px;border:1px solid var(--line2);font:600 12.5px/1 var(--mono);color:var(--ink2)}
.user-chip .av{width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,var(--nest),var(--cyan));box-shadow:inset 0 0 0 2px rgba(5,8,15,.6)}
.user-menu{position:fixed;z-index:80;top:58px;right:14px;width:300px;padding:14px;border-radius:16px;background:var(--glass-sheen),rgba(12,19,35,.7);border:1px solid rgba(255,255,255,.14);box-shadow:var(--glass-hi),var(--glass-drop);backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%)}
.um-h{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:8px}
.um-jwt{font-size:10.5px;line-height:1.5;word-break:break-all;color:var(--ink3);max-height:110px;overflow:hidden;padding:8px;border-radius:8px;background:rgba(255,255,255,.03);border:1px solid var(--line)}
.um-jwt b{color:#ff9ad5;font-weight:500} .um-jwt i{font-style:normal;color:#8ec5ff} .um-jwt u{text-decoration:none;color:#9fe6a0}
.user-menu button{margin-top:10px;width:100%;height:36px;border-radius:9px;border:1px solid var(--line2);font-weight:600}
.user-menu button:hover{background:rgba(255,255,255,.05)}

/* ---- login ------------------------------------------------------------------ */
.login{position:fixed;inset:60px 0 0;z-index:40;display:grid;grid-template-columns:1.15fr 1fr;background:var(--bg)}
.login.out{animation:lout .5s var(--ease) forwards}
@keyframes lout{to{opacity:0;transform:scale(1.02);visibility:hidden}}
.login-art{position:relative;overflow:hidden;background:#041019}
.login-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.2s ease,transform 6s linear;transform:scale(1.06)}
.login-art img.on{opacity:1;transform:scale(1)}
.login-art::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,8,15,0) 55%,var(--bg)),linear-gradient(0deg,rgba(5,8,15,.9),transparent 45%)}
.login-art-cap{position:absolute;z-index:2;left:40px;bottom:40px;max-width:460px}
.login-art-cap p{margin:12px 0 0;font-size:22px;line-height:1.45;font-weight:700;color:var(--ink);text-wrap:balance}
.login-side{display:grid;place-items:center;padding:24px}
.login-card{width:min(400px,100%);padding:30px 28px 22px}
.login-logo{height:44px;width:auto;margin-bottom:18px}
.login-card h1{margin:0;font-size:24px;letter-spacing:-.01em}
.login-card>p{margin:6px 0 20px;font-size:13.5px}
.fld{display:block;margin-bottom:14px}
.fld span{display:block;margin-bottom:6px;font-size:12px;color:var(--ink3);font-weight:600}
.fld input{width:100%;height:46px;padding:0 14px;border-radius:10px;border:1px solid var(--line2);background:rgba(255,255,255,.03);font-size:15px;transition:border-color .2s}
.fld input:focus{outline:none;border-color:var(--nest2);box-shadow:0 0 0 3px rgba(91,59,255,.2)}
.login-card .btn{width:100%;margin-top:6px}
.login-err{min-height:18px;margin:8px 0 0;font-size:12.5px;color:var(--err)}
.login-trace{list-style:none;margin:4px 0 12px;padding:0;font-size:11.5px;color:var(--ink2)}
.login-trace li{display:flex;gap:8px;padding:3px 0;animation:tin .25s var(--ease)}
.login-trace li::before{content:"›";color:var(--cyan)}
.login-trace li.ok::before{content:"✓";color:var(--ok)}
.login-trace b{color:var(--ok);font-weight:600}

/* ---- fleet layout --------------------------------------------------------- */
#app{min-height:calc(100vh - 60px)}
.fleet{display:grid;grid-template-columns:318px minmax(0,1fr) 312px;gap:14px;padding:14px;height:calc(100vh - 60px);min-height:600px}
.col-list{display:flex;flex-direction:column;min-height:0;overflow:hidden}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border-bottom:1px solid var(--line);border-radius:var(--r) var(--r) 0 0;overflow:hidden}
.kpi{background:var(--panel-solid);padding:12px 8px 10px;text-align:center}
.kpi b{display:block;font:800 22px/1 var(--mono);color:var(--ink)}
.kpi span{display:block;margin-top:5px;font-size:11px;color:var(--ink3);font-weight:600}
.kpi.ok b{color:var(--ok)} .kpi.warn b{color:var(--warn)} .kpi.off b{color:#8e9ab3}
.filters{display:flex;flex-wrap:wrap;gap:6px;padding:12px 12px 0}
.filters .chip{height:30px;padding:0 9px;font-size:12px}
.search{padding:10px 12px}
.search input{width:100%;height:36px;padding:0 12px;border-radius:9px;border:1px solid var(--line);background:rgba(255,255,255,.03);font-size:13px}
.search input:focus{outline:none;border-color:var(--line3)}
.dlist{list-style:none;margin:0;padding:0 8px 10px;flex:1;min-height:0}
.dgroup{padding:10px 8px 4px;font:700 10.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink4)}
.drow{display:flex;align-items:center;gap:10px;width:100%;padding:9px 8px;border-radius:10px;text-align:left;transition:background .15s;border:1px solid transparent}
.drow:hover,.drow.hl{background:rgba(255,255,255,.04)}
.drow.sel{background:rgba(91,59,255,.14);border-color:rgba(142,124,255,.35)}
.drow .nm{flex:1;min-width:0}
.drow .nm b{display:block;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.drow .nm small{display:block;margin-top:2px;font:500 11px/1.2 var(--mono);color:var(--ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.drow .rt{display:flex;flex-direction:column;align-items:flex-end;gap:5px}
.drow .dot{width:8px;height:8px;border-radius:50%;background:var(--off)}
.drow .dot.ONLINE{background:var(--ok);box-shadow:0 0 8px var(--ok)} .drow .dot.WARNING{background:var(--warn);box-shadow:0 0 8px var(--warn);animation:blink 1s steps(2) infinite}

.col-map{display:flex;flex-direction:column;min-height:0;overflow:hidden}
.col-map .ph{padding-bottom:10px}
.legend{display:flex;flex-wrap:wrap;gap:12px;padding:0 16px 10px;font-size:11.5px;color:var(--ink3)}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend i{width:9px;height:9px;border-radius:50%}
.map-host{position:relative;flex:1;min-height:0;margin:0 10px 10px;border-radius:10px;overflow:hidden;border:1px solid var(--line);background:#060d1a}
.tip-bar{position:absolute;z-index:3;left:12px;top:12px;right:12px;display:flex;align-items:center;gap:10px;justify-content:space-between;padding:9px 12px;border-radius:10px;
  background:var(--glass-sheen),rgba(12,19,35,.55);border:1px solid rgba(255,210,31,.35);font-size:12.5px;color:var(--ink2);box-shadow:var(--glass-hi);backdrop-filter:blur(16px) saturate(170%);-webkit-backdrop-filter:blur(16px) saturate(170%)}
.tip-bar b{color:var(--spark)}
.tip-bar button{width:24px;height:24px;border-radius:6px;font-size:16px;color:var(--ink3)}
.hover-card{position:absolute;z-index:4;width:250px;padding:10px;border-radius:14px;background:var(--glass-sheen),rgba(10,16,30,.62);border:1px solid rgba(255,255,255,.14);box-shadow:var(--glass-hi),var(--glass-drop);backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);pointer-events:none}
.hover-card img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:8px;margin-bottom:8px;background:#000}
.hover-card b{font-size:13.5px}
.hover-card .hc-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px;font:600 11px/1.2 var(--mono);color:var(--ink2)}
.hover-card .hc-go{margin-top:8px;font-size:11.5px;color:var(--spark)}

.cards{flex:1;display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px;padding:0 12px 12px;align-content:start}
.dcard{display:flex;flex-direction:column;text-align:left;border-radius:12px;overflow:hidden;border:1px solid var(--line);background:rgba(10,16,30,.8);transition:transform .2s var(--ease),border-color .2s}
.dcard:hover{transform:translateY(-2px);border-color:var(--line3)}
.dcard .ci{position:relative;aspect-ratio:16/9;background:#041019;overflow:hidden}
.dcard .ci img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease),opacity .3s}
.dcard:hover .ci img{transform:scale(1.05)}
.dcard .ci .st{position:absolute;left:8px;top:8px;backdrop-filter:blur(6px)}
.dcard .cb{padding:10px 12px 12px}
.dcard .cb b{display:block;font-size:14px}
.dcard .cb small{display:flex;justify-content:space-between;align-items:center;margin-top:6px;font:500 11px/1 var(--mono);color:var(--ink3)}
.dcard.OFFLINE .ci img{filter:grayscale(1) brightness(.6)}

.col-side{display:flex;flex-direction:column;gap:14px;min-height:0}
.side-events{flex:1;display:flex;flex-direction:column;min-height:0}
.events{list-style:none;margin:0;padding:8px 10px 10px;flex:1;min-height:0}
.ev{display:grid;grid-template-columns:auto 1fr;gap:4px 10px;padding:9px 8px;border-radius:9px;font-size:12.5px;animation:tin .3s var(--ease)}
.ev+.ev{border-top:1px solid rgba(122,162,255,.07)}
.ev i{grid-row:span 2;width:8px;height:8px;margin-top:5px;border-radius:50%;background:var(--cyan)}
.ev.warn i{background:var(--warn);box-shadow:0 0 8px var(--warn)} .ev.err i{background:var(--err);box-shadow:0 0 8px var(--err)} .ev.ok i{background:var(--ok)}
.ev b{font-weight:600;color:var(--ink)}
.ev small{font:500 10.5px/1.3 var(--mono);color:var(--ink3)}
.ev button{justify-self:start;color:var(--spark);font-size:11.5px;font-weight:700}
.link-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 12px;padding-bottom:6px}
.link-grid span{display:block;font-size:11px;color:var(--ink3)}
.link-grid b{font-size:17px}
.spark{width:calc(100% - 32px);margin:0 16px 14px;height:44px}
.lnk{color:var(--cyan)!important}

/* ---- device detail -------------------------------------------------------- */
.detail{padding:14px;max-width:1680px;margin:0 auto}
.dhead{display:flex;align-items:center;gap:14px;margin-bottom:12px}
.dhead .dg{width:44px;height:44px;border-radius:12px}
.dhead .dg svg{width:26px;height:26px}
.dtitle h1{margin:0;display:flex;align-items:center;gap:10px;font-size:21px;letter-spacing:-.01em;flex-wrap:wrap}
.dtitle p{margin:3px 0 0;font-size:12px}
.dquick{display:flex;gap:8px}
.estop{min-width:110px}
.alert-strip{display:flex;align-items:center;gap:12px;margin-bottom:12px;padding:10px 14px;border-radius:12px;border:1px solid rgba(255,194,61,.4);background:rgba(255,194,61,.08);color:var(--warn);font-size:13px;font-weight:600}
.alert-strip.err{border-color:rgba(255,77,94,.45);background:rgba(255,77,94,.08);color:#ff8a95}
.alert-strip svg{width:18px;height:18px;flex:none}
.alert-strip .grow{flex:1}
.dgrid{display:grid;gap:14px;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(360px,.95fr);
  grid-template-areas:"video video ctrl" "tele tele ctrl" "chart mini log"}
.a-video{grid-area:video}.a-ctrl{grid-area:ctrl;display:flex;flex-direction:column}.a-tele{grid-area:tele}.a-chart{grid-area:chart}.a-mini{grid-area:mini}.a-log{grid-area:log;display:flex;flex-direction:column}

/* video */
.vwrap{display:grid;gap:8px;grid-template-columns:1fr}
.vwrap.both{grid-template-columns:1fr 1fr}
.cam{position:relative;aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:#000;isolation:isolate}
.cam video,.cam canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cam .hud{position:absolute;inset:0;pointer-events:none;font:700 11px/1 var(--mono);color:#e9f7ff;text-shadow:0 1px 2px rgba(0,0,0,.8)}
.cam .hud .c{position:absolute;width:18px;height:18px;border-color:rgba(233,247,255,.75)}
.cam .hud .c1{left:10px;top:10px;border-left:2px solid;border-top:2px solid}.cam .hud .c2{right:10px;top:10px;border-right:2px solid;border-top:2px solid}
.cam .hud .c3{left:10px;bottom:10px;border-left:2px solid;border-bottom:2px solid}.cam .hud .c4{right:10px;bottom:10px;border-right:2px solid;border-bottom:2px solid}
.cam .hud .tl{position:absolute;left:18px;top:18px;display:flex;align-items:center;gap:8px}
.cam .hud .rec{width:8px;height:8px;border-radius:50%;background:#ff4d5e;animation:blink 1.2s steps(2) infinite}
.cam .hud .tag1{padding:3px 6px;border-radius:4px;background:rgba(91,59,255,.85)}
.cam .hud .tag2{padding:3px 6px;border-radius:4px;background:rgba(255,184,0,.9);color:#1a1300;text-shadow:none}
.cam .hud .tr{position:absolute;right:18px;top:20px}
.cam .hud .bl{position:absolute;left:18px;bottom:18px;display:flex;gap:14px}
.cam .hud .bl span{opacity:.92}
.cam .hud .br{position:absolute;right:18px;bottom:18px;opacity:.85}
.cam .hud .xh{position:absolute;left:50%;top:50%;width:46px;height:46px;margin:-23px 0 0 -23px;opacity:.55}
.cam .hud .xh::before,.cam .hud .xh::after{content:"";position:absolute;background:#e9f7ff}
.cam .hud .xh::before{left:50%;top:0;bottom:0;width:1px;box-shadow:0 0 0 0}
.cam .hud .xh::after{top:50%;left:0;right:0;height:1px}
.cam .hud .sim{position:absolute;left:50%;top:18px;transform:translateX(-50%);padding:3px 8px;border-radius:4px;background:rgba(0,0,0,.55);color:#ffcf5c;font-size:10.5px}
.cam::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0 1px,transparent 1px 3px);mix-blend-mode:overlay}
.cam .fs{position:absolute;right:12px;top:40px;z-index:2;width:30px;height:30px;border-radius:7px;background:rgba(0,0,0,.55);display:grid;place-items:center;pointer-events:auto;opacity:0;transition:opacity .2s}
.cam:hover .fs{opacity:1}
.cam .fs svg{width:15px;height:15px}
.cam-state{position:absolute;inset:0;display:grid;place-items:center;align-content:center;gap:12px;text-align:center;color:var(--ink2);font-size:13px;
  background:radial-gradient(circle at 50% 40%,rgba(91,59,255,.12),transparent 55%),repeating-linear-gradient(0deg,rgba(44,227,255,.04) 0 1px,transparent 1px 24px),repeating-linear-gradient(90deg,rgba(44,227,255,.04) 0 1px,transparent 1px 24px),#050912}
.cam-state svg{width:40px;height:40px;opacity:.5;margin:0 auto}
.spin{width:34px;height:34px;margin:0 auto;border-radius:50%;border:3px solid rgba(255,255,255,.1);border-top-color:var(--cyan);animation:spin 0.9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* control */
.ctl-body{flex:1;display:flex;flex-direction:column;gap:14px;padding:14px 16px 16px}
.acts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.act{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;height:66px;border-radius:11px;border:1px solid var(--line);background:rgba(255,255,255,.025);font-size:12px;font-weight:700;color:var(--ink2);transition:all .15s}
.act svg{width:20px;height:20px}
.act:hover:not(:disabled){border-color:var(--line3);color:var(--ink);background:rgba(255,255,255,.05)}
.act.pri{background:linear-gradient(135deg,rgba(91,59,255,.9),rgba(67,24,255,.85));border-color:transparent;color:#fff;box-shadow:0 10px 24px -12px rgba(91,59,255,.9)}
.act.busy{position:relative;color:transparent!important}
.act.busy::after{content:"";position:absolute;width:18px;height:18px;border-radius:50%;border:2px solid rgba(255,255,255,.25);border-top-color:#fff;animation:spin .8s linear infinite}
.act:disabled{opacity:.38}
.estop-big{height:48px;border-radius:12px;font-size:14.5px;letter-spacing:.04em}
.sticks{display:flex;justify-content:space-around;align-items:center;gap:12px;padding:14px 8px;border-radius:14px;background:rgba(255,255,255,.02);border:1px solid var(--line)}
.stick{display:flex;flex-direction:column;align-items:center;gap:8px;font-size:11.5px;color:var(--ink3);font-weight:600}
.stick-base{position:relative;width:132px;height:132px;border-radius:50%;touch-action:none;
  background:radial-gradient(circle,rgba(44,227,255,.07),rgba(44,227,255,.015) 60%,transparent 61%),rgba(255,255,255,.02);border:1px solid var(--line2)}
.stick-base::before,.stick-base::after{content:"";position:absolute;background:var(--line)}
.stick-base::before{left:50%;top:10px;bottom:10px;width:1px}
.stick-base::after{top:50%;left:10px;right:10px;height:1px}
.stick-base .ax{position:absolute;font:700 9.5px/1 var(--mono);color:var(--ink4)}
.stick-base .ax.n{top:6px;left:50%;transform:translateX(-50%)}.stick-base .ax.s{bottom:6px;left:50%;transform:translateX(-50%)}
.stick-base .ax.w{left:6px;top:50%;transform:translateY(-50%)}.stick-base .ax.e{right:6px;top:50%;transform:translateY(-50%)}
.knob{position:absolute;left:50%;top:50%;width:54px;height:54px;margin:-27px 0 0 -27px;border-radius:50%;z-index:2;cursor:grab;
  background:radial-gradient(circle at 35% 30%,#7f6bff,#4318ff 70%);box-shadow:0 8px 20px -6px rgba(67,24,255,.9),inset 0 1px 0 rgba(255,255,255,.3);transition:transform .18s var(--ease)}
.knob.drag{cursor:grabbing;transition:none}
.stick-base.dis{opacity:.35;pointer-events:none}
.kb-hint{display:flex;flex-wrap:wrap;gap:6px 12px;justify-content:center;font-size:11.5px;color:var(--ink3)}
.kb-hint span{display:inline-flex;align-items:center;gap:4px}
.dpad{display:grid;grid-template-columns:repeat(3,62px);grid-template-rows:repeat(3,62px);gap:8px;justify-content:center}
.dpad button{border-radius:12px;border:1px solid var(--line2);background:rgba(255,255,255,.03);display:grid;place-items:center;touch-action:none;user-select:none;-webkit-user-select:none;transition:background .12s,border-color .12s,transform .1s}
.dpad button svg{width:22px;height:22px}
.dpad button:active,.dpad button.hold{background:rgba(91,59,255,.35);border-color:var(--nest2);transform:scale(.96)}
.dpad button.mid{background:linear-gradient(135deg,#ff4d5e,#d61f33);border-color:transparent}
.dpad button:disabled{opacity:.35}
.dpad .up{grid-area:1/2}.dpad .lf{grid-area:2/1}.dpad .mid{grid-area:2/2}.dpad .rt{grid-area:2/3}.dpad .dn{grid-area:3/2}
.ble-box{padding:12px;border-radius:12px;border:1px dashed rgba(142,124,255,.45);background:rgba(91,59,255,.06)}
.ble-box .row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ble-box .row .grow{flex:1}
.ble-box b{font-size:13px}
.ble-steps{list-style:none;margin:10px 0 0;padding:0;font:11px/1.6 var(--mono);color:var(--ink3)}
.ble-steps li.ok{color:var(--ink2)} .ble-steps li.ok::before{content:"✓ ";color:var(--ok)} .ble-steps li.now::before{content:"… ";color:var(--cyan)}
.ble-steps li.fail{color:var(--err)} .ble-steps li.fail::before{content:"✗ "}
.ble-box.real{border-style:solid;border-color:rgba(34,211,122,.55)}
.ble-box .ltag{display:inline-block;margin-left:8px;padding:0 7px;border-radius:6px;font:700 10px/17px var(--mono);letter-spacing:.08em;color:var(--ink3);border:1px solid var(--line2);vertical-align:1px}
.ble-box .ltag.real{color:var(--ok);border-color:rgba(34,211,122,.5);background:rgba(34,211,122,.1)}
.ble-mode{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:10px;font-size:11.5px;color:var(--ink3)}
.ble-mode .seg button:disabled{opacity:.45;cursor:not-allowed}
.ble-note{margin:10px 0 0;font-size:11.5px;line-height:1.55;color:var(--ink2)}
.tabs2 button:disabled{opacity:.4;cursor:not-allowed}
.ble-state{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.ble-state div{padding:8px 10px;border-radius:9px;background:rgba(255,255,255,.03);border:1px solid var(--line)}
.ble-state span{display:block;font-size:10.5px;color:var(--ink3)}
.ble-state b{display:block;margin-top:2px;font-size:13px}
.hexline{font:11px/1.5 var(--mono);color:var(--ink3);word-break:break-all;padding:8px 10px;border-radius:9px;background:rgba(0,0,0,.25);border:1px solid var(--line);min-height:52px}
.hexline b{color:var(--nest2);font-weight:600} .hexline i{font-style:normal;color:var(--teal)}
.tabs2{display:flex;gap:4px;padding:12px 16px 0}
.tabs2 button{flex:1;height:34px;border-radius:9px;font-size:12.5px;font-weight:700;color:var(--ink3);border:1px solid var(--line)}
.tabs2 button.on{color:var(--ink);background:rgba(91,59,255,.2);border-color:rgba(142,124,255,.5)}
.ctl-off{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;background:rgba(93,107,134,.12);color:var(--ink2);font-size:12.5px}
.ctl-off svg{width:16px;height:16px;flex:none}

/* telemetry */
.tele{display:grid;grid-template-columns:repeat(8,minmax(0,1fr))}
.tl{padding:14px 16px;border-right:1px solid var(--line);min-width:0}
.tl:last-child{border-right:0}
.tl span{display:block;font-size:11px;color:var(--ink3);font-weight:600;white-space:nowrap}
.tl b{display:block;margin-top:5px;font:800 20px/1.1 var(--mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tl b small{font-size:11px;color:var(--ink3);font-weight:600;margin-left:2px}
.tl .sub{display:block;margin-top:4px;font:500 10.5px/1.2 var(--mono);color:var(--ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tl.bat-t .meter{height:5px;margin-top:8px;border-radius:5px;background:rgba(255,255,255,.07);overflow:hidden}
.tl.bat-t .meter i{display:block;height:100%;border-radius:5px;background:linear-gradient(90deg,var(--ok),#7df0b4);transition:width .6s}
.tl .rose{position:relative;float:right;width:38px;height:38px;margin-top:-4px}
.tl .rose svg{width:38px;height:38px;transition:transform .8s var(--ease)}

/* chart + mini + log */
#chart{width:100%;height:190px}
.lg{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--ink3);margin-left:10px}
.lg i{width:14px;height:3px;border-radius:2px}
.lg i.c1{background:#ff8a5b}.lg i.c2{background:var(--cyan)}
.mini-host{position:relative;height:190px;border-radius:10px;overflow:hidden;border:1px solid var(--line);background:#060d1a}
.mini-host canvas{position:absolute;inset:0;width:100%;height:100%}
.clog{list-style:none;margin:0;padding:8px 10px 12px;flex:1;min-height:150px;max-height:260px}
.cl{display:grid;grid-template-columns:62px 1fr auto;gap:8px;align-items:center;padding:7px 6px;border-radius:8px;font-size:12.5px;animation:tin .25s var(--ease)}
.cl+.cl{border-top:1px solid rgba(122,162,255,.06)}
.cl time{font:500 10.5px/1 var(--mono);color:var(--ink3)}
.cl .cm{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cl .cm code{font:600 11px/1 var(--mono);color:var(--ink3);margin-left:6px}
.cl .ch{margin-right:6px}
.cl .rs{font:700 11px/1 var(--mono);white-space:nowrap}
.cl .rs.ok{color:var(--ok)} .cl .rs.fail{color:var(--err)} .cl .rs.pend{color:var(--ink3)}
.cl .rs button{margin-left:6px;color:var(--spark);font-weight:700}
.empty{padding:22px 10px;text-align:center;color:var(--ink4);font-size:12.5px}

/* ---- responsive ------------------------------------------------------------------ */
@media (max-width:1380px){
  .dgrid{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(340px,.9fr)}
  .tele{grid-template-columns:repeat(4,minmax(0,1fr))}
  .tl:nth-child(4n){border-right:0}
  .tl:nth-child(-n+4){border-bottom:1px solid var(--line)}
}
@media (max-width:1180px){
  .fleet{grid-template-columns:290px minmax(0,1fr);height:auto}
  .col-map{min-height:560px}
  .col-side{grid-column:1 / -1;flex-direction:row}
  .col-side>*{flex:1}
  .events{max-height:300px}
  .dgrid{grid-template-columns:1fr 1fr;grid-template-areas:"video video" "ctrl tele" "ctrl tele" "chart mini" "log log"}
  .tele{grid-template-columns:1fr 1fr}
  .tl{border-bottom:1px solid var(--line)}
  .tl:nth-child(2n){border-right:0}
}
@media (max-width:820px){
  .login{grid-template-columns:1fr;overflow:auto}
  .login-art{display:none}
  .fleet{display:flex;flex-direction:column;padding:10px;gap:10px}
  .col-list{order:2;max-height:none}
  .dlist{max-height:420px}
  .col-map{order:1;min-height:0}
  .map-host{flex:none;aspect-ratio:8/5.6}
  .col-side{order:3;flex-direction:column}
  .cards{grid-template-columns:1fr 1fr;max-height:640px}
  .detail{padding:10px}
  .dhead{flex-wrap:wrap;gap:10px}
  .dtitle h1{font-size:18px}
  .dquick{width:100%}
  .dquick .btn{flex:1}
  .dgrid{grid-template-columns:minmax(0,1fr);grid-template-areas:"video" "ctrl" "tele" "chart" "mini" "log";gap:10px}
  .vwrap.both{grid-template-columns:1fr}
  .tele{grid-template-columns:1fr 1fr}
  .tl b{font-size:18px}
  .user-chip #user-name{display:none}
  .user-chip{padding:0 4px}
  .legend{display:none}
  .tip-bar{font-size:12px}
}
@media (max-width:420px){
  .kpi b{font-size:19px}
  .stick-base{width:118px;height:118px}
  .sticks{padding:10px 4px}
  .acts{grid-template-columns:repeat(3,1fr)}
  .dpad{grid-template-columns:repeat(3,56px);grid-template-rows:repeat(3,56px)}
}

/* glass, console-specific */
.kpis{background:rgba(255,255,255,.06)}
.kpi{background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.01)),rgba(10,16,32,.35)}
.act,.dpad button,.ble-state div,.hexline,.search input,.fld input,.tabs2 button{background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.018));border-color:rgba(255,255,255,.11);box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.act.pri{background:linear-gradient(180deg,#8067ff,#5b3bff 55%,#4a2cf0);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 10px 24px -12px rgba(91,59,255,.95)}
.dpad button.mid{background:linear-gradient(180deg,#ff6b78,#e0283c);box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}
.dpad button:active,.dpad button.hold{background:linear-gradient(180deg,rgba(142,124,255,.55),rgba(91,59,255,.35));border-color:var(--nest2)}
.tabs2 button.on{background:linear-gradient(180deg,rgba(142,124,255,.4),rgba(91,59,255,.18));border-color:rgba(170,155,255,.5)}
.sticks{flex:1;background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.01));border-color:rgba(255,255,255,.09);box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.stick-base{background:radial-gradient(circle at 50% 35%,rgba(255,255,255,.1),rgba(255,255,255,.02) 62%),rgba(8,14,28,.45);border-color:rgba(255,255,255,.14);box-shadow:inset 0 2px 10px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.1)}
.knob{background:radial-gradient(circle at 35% 28%,#a898ff,#5b3bff 58%,#3d1fe0);box-shadow:0 10px 24px -6px rgba(67,24,255,.9),inset 0 1px 1px rgba(255,255,255,.55),inset 0 -3px 6px rgba(0,0,0,.25)}
.ble-box{background:linear-gradient(180deg,rgba(142,124,255,.12),rgba(91,59,255,.04));border-color:rgba(170,155,255,.35)}
.ble-box .row>svg{width:26px;height:26px;flex:none;color:var(--nest2)}
.drow.sel{background:linear-gradient(180deg,rgba(142,124,255,.24),rgba(91,59,255,.1))}
.dcard{background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.015)),rgba(10,16,32,.4);border-color:rgba(255,255,255,.1)}
.tl #t-pos{font-size:12px!important}
.cam .hud .tag1{background:rgba(91,59,255,.72)}

/* live video wall under the fleet map */
.map-host{min-height:260px}
.vwall{flex:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:0 10px 10px;height:clamp(104px,19vh,184px)}
.vt{position:relative;border-radius:10px;overflow:hidden;border:1px solid rgba(255,255,255,.1);background:#000;cursor:pointer;transition:border-color .2s,transform .2s var(--ease)}
.vt:hover{border-color:rgba(44,227,255,.55);transform:translateY(-1px)}
.vt video,.vt canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vt::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.65),transparent 45%);pointer-events:none}
.vt .vl{position:absolute;z-index:2;left:8px;right:8px;bottom:7px;display:flex;align-items:center;gap:6px;font:700 11px/1 var(--sans);color:#fff;text-shadow:0 1px 3px #000}
.vt .vl i{flex:none;width:6px;height:6px;border-radius:50%;background:#ff4d5e;animation:blink 1.2s steps(2) infinite}
.vt .vl span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vt .vl em{margin-left:auto;font:600 9.5px/1 var(--mono);font-style:normal;opacity:.75}
@media (max-width:820px){ .vwall{grid-template-columns:1fr 1fr;height:auto} .vt{aspect-ratio:16/9} }

/* product pictures */
.dcard .ci img.bp.dim{opacity:.45}
.dcard .ci .cp{position:absolute;left:10%;top:10%;width:80%;height:80%;object-fit:contain;filter:drop-shadow(0 12px 12px rgba(0,0,0,.6));transition:transform .4s var(--ease),opacity .3s}
.dcard:hover .ci .cp{transform:translateY(-4px) scale(1.04)}
.dcard .ci .po{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .35s}
.dcard:hover .ci .po{opacity:1}
.dcard:hover .ci .cp{opacity:0}
.dcard .ci .st{z-index:2}
.dcard.OFFLINE .ci .cp{filter:grayscale(1) brightness(.7)}
.dhead .dg.prod{width:84px;height:52px;padding:2px;background:radial-gradient(60% 70% at 50% 60%,rgba(255,210,31,.16),transparent 75%);border-color:rgba(255,255,255,.1)}
.dhead .dg.prod img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 6px 6px rgba(0,0,0,.6))}
.dhead .dg.prod.OFFLINE img{filter:grayscale(1) brightness(.7)}
@media (max-width:820px){ .dquick{flex-wrap:wrap} }

/* the site render is 16:9: lock the map to it and give the rest of the column to the wall */
.col-map .map-host{flex:0 1 auto;aspect-ratio:16/9;min-height:220px}
.col-map .vwall{flex:1 1 140px;height:auto;min-height:120px;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:minmax(0,1fr)}
@media (max-width:820px){ .col-map .map-host{aspect-ratio:16/9} .col-map .vwall{grid-auto-rows:auto} }
@media (max-width:820px){ .col-map .vwall{flex:none;height:auto;min-height:0} .col-map .vt{aspect-ratio:16/9} }