:root{--bg-base:#0B0E14;--bg-surface:#151A23;--bg-elevated:#1E2630;--line:#2A323D;--t-pri:#E6EAF0;--t-sec:#9AA4B2;--t-dis:#5B6470;--brand:#2B7FFF;--ok:#21D07A;--danger:#FF4D4F;--warn:#FFA726;--unknown:#8C9099;--geo:#7C5CFF;--radius:8px}*{box-sizing:border-box;margin:0;padding:0}html,body,#app{height:100%}body{background:var(--bg-base);color:var(--t-pri);font-family:PingFang SC,Microsoft YaHei,Source Han Sans CN,system-ui,sans-serif;font-size:14px;line-height:1.5}#app{display:flex;flex-direction:column;height:100vh;overflow:hidden}.tnum{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}.topbar{height:56px;flex:0 0 56px;display:flex;align-items:center;gap:24px;padding:0 20px;background:var(--bg-surface);border-bottom:1px solid var(--line)}.logo{display:flex;align-items:center;gap:8px;font-size:16px;font-weight:600}.logo .dot{width:9px;height:9px;border-radius:50%;background:var(--ok);box-shadow:0 0 8px var(--ok)}.nav{display:flex;gap:2px;flex:1}.nav a{padding:7px 14px;border-radius:var(--radius);color:var(--t-sec);cursor:pointer;font-size:14px;-webkit-user-select:none;user-select:none;text-decoration:none}.nav a:hover{color:var(--t-pri);background:var(--bg-elevated)}.nav a.active{color:#fff;background:var(--brand)}.topright{display:flex;align-items:center;gap:18px;color:var(--t-sec)}.bell{position:relative;cursor:pointer}.bell .badge{position:absolute;top:-6px;right:-8px;background:var(--danger);color:#fff;font-size:11px;border-radius:9px;padding:0 5px;line-height:16px}.user{display:flex;align-items:center;gap:7px}.avatar{width:26px;height:26px;border-radius:50%;background:var(--bg-elevated);display:flex;align-items:center;justify-content:center;font-size:12px}.main{flex:1;display:flex;min-height:0}.side{width:240px;flex:0 0 240px;background:var(--bg-surface);border-right:1px solid var(--line);overflow:auto;padding:14px 12px}.side h4{font-size:12px;color:var(--t-sec);font-weight:500;margin:14px 4px 8px;letter-spacing:.5px}.side h4:first-child{margin-top:0}.content{flex:1;overflow:auto;padding:12px 16px}.statusbar{height:26px;flex:0 0 26px;display:flex;align-items:center;gap:22px;padding:0 20px;background:var(--bg-surface);border-top:1px solid var(--line);font-size:12px;color:var(--t-sec)}.statusbar .ok{color:var(--ok)}.page-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.page-head h2{font-size:18px;font-weight:600}.page-head .sub{color:var(--t-sec);font-size:13px;margin-left:12px;font-weight:400}.card{background:var(--bg-surface);border:1px solid var(--line);border-radius:var(--radius);padding:12px}.card h3{font-size:14px;font-weight:600;margin-bottom:8px;display:flex;align-items:center;justify-content:space-between}.grid{display:grid;gap:14px}.btn{background:var(--bg-elevated);border:1px solid var(--line);color:var(--t-pri);padding:6px 12px;border-radius:6px;cursor:pointer;font-size:13px}.btn:hover{border-color:var(--brand)}.btn.primary{background:var(--brand);border-color:var(--brand);color:#fff}.pill{display:inline-flex;align-items:center;gap:5px;font-size:12px;padding:2px 9px;border-radius:11px;border:1px solid transparent}.pill.ok{color:var(--ok);background:#21d07a1f;border-color:#21d07a4d}.pill.danger{color:var(--danger);background:#ff4d4f1f;border-color:#ff4d4f4d}.pill.warn{color:var(--warn);background:#ffa7261f;border-color:#ffa7264d}.pill.unknown{color:var(--unknown);background:#8c909924;border-color:#8c90994d}.pill.dim{color:var(--t-sec);background:var(--bg-elevated);border-color:var(--line)}.pill.geo{color:var(--geo);background:#7c5cff24;border-color:#7c5cff59}.tree-item{padding:6px 8px;border-radius:6px;cursor:pointer;display:flex;align-items:center;gap:7px;color:var(--t-pri);font-size:13px}.tree-item:hover{background:var(--bg-elevated)}.tree-item.sub{padding-left:22px;color:var(--t-sec);font-size:12px}.tree-item.sub2{padding-left:36px;color:var(--t-sec);font-size:12px}.sdot{width:7px;height:7px;border-radius:50%}.sdot.on{background:var(--ok);box-shadow:0 0 6px var(--ok)}.sdot.off{background:var(--t-dis)}.sdot.work{background:var(--warn);box-shadow:0 0 6px var(--warn)}.ck{accent-color:var(--brand)}.kpis{grid-template-columns:repeat(6,1fr)}.kpi{background:var(--bg-surface);border:1px solid var(--line);border-radius:var(--radius);padding:10px 12px;cursor:pointer}.kpi .lab{font-size:12px;color:var(--t-sec);margin-bottom:3px}.kpi .val{font-size:24px;font-weight:700}.kpi.red .val{color:var(--danger)}.kpi.warn .val{color:var(--warn)}.kpi.gray .val{color:var(--unknown)}.feed-row{display:flex;align-items:center;gap:10px;padding:9px 4px;border-bottom:1px solid var(--line);font-size:13px}.feed-row:last-child{border-bottom:none}.feed-row .t{margin-left:auto;color:var(--t-sec);font-size:12px}.bars{display:flex;align-items:flex-end;gap:10px;height:120px;padding-top:8px}.bars .b{flex:1;background:linear-gradient(var(--brand),rgba(43,127,255,.25));border-radius:4px 4px 0 0;position:relative}.bars .b span{position:absolute;bottom:-18px;left:0;right:0;text-align:center;font-size:11px;color:var(--t-sec)}table{width:100%;border-collapse:collapse;font-size:13px}th,td{text-align:left;padding:10px;border-bottom:1px solid var(--line)}th{color:var(--t-sec);font-weight:500;font-size:12px}tbody tr{cursor:pointer}tbody tr:hover{background:var(--bg-elevated)}tbody tr.sel{background:#2b7fff24;box-shadow:inset 3px 0 0 var(--brand)}.wall{display:grid;grid-template-columns:1fr 1fr;gap:12px}.vcell{background:#000;border:1px solid var(--line);border-radius:var(--radius);aspect-ratio:16/9;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center}.vcell .ph{color:#3a4350;font-size:13px;display:flex;flex-direction:column;align-items:center;gap:6px}.vcell .osd{position:absolute;top:8px;left:10px;font-size:12px;color:#cfd6df;text-shadow:0 1px 2px #000}.vcell .live{position:absolute;top:8px;right:10px;display:flex;align-items:center;gap:5px;font-size:11px;color:#fff}.vcell .live .ld{width:7px;height:7px;border-radius:50%;background:var(--danger);animation:pulse 1.4s infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.3}}.vcell .rec{position:absolute;bottom:8px;right:10px;font-size:11px;background:#00000080;padding:3px 8px;border-radius:5px;color:#fff;cursor:pointer;border:1px solid #444}.vcell.active{outline:2px solid var(--ok)}.degraded{position:absolute;top:0;left:0;right:0;background:#ffa726eb;color:#1a1300;font-size:11px;text-align:center;padding:2px}.player{background:#000;border:1px solid var(--line);border-radius:var(--radius);aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;color:#3a4350}.pctrl{display:flex;gap:8px;align-items:center;margin-top:10px;color:var(--t-sec);font-size:13px}.lane{display:flex;align-items:center;gap:10px;margin:8px 0}.lane .name{width:46px;color:var(--t-sec);font-size:12px}.track{flex:1;height:18px;background:var(--bg-elevated);border-radius:4px;position:relative;overflow:hidden}.seg{position:absolute;top:0;bottom:0;background:#2b7fff80}.mark{position:absolute;top:0}.mark .m{position:absolute;top:-2px;left:-5px;width:10px;height:22px;border-radius:2px}.clip-row{display:flex;align-items:center;gap:8px;padding:8px 4px;border-bottom:1px solid var(--line);font-size:12px;cursor:pointer}.clip-row:hover{background:var(--bg-elevated)}.clip-row .star{color:var(--warn)}.prog{height:4px;background:var(--bg-elevated);border-radius:2px;flex:1;overflow:hidden}.prog i{display:block;height:100%;background:var(--brand)}.ports{display:flex;flex-wrap:wrap;gap:8px}.port{width:46px;height:46px;border-radius:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:12px;border:1px solid var(--line);cursor:pointer;position:relative}.port .n{font-size:11px;color:var(--t-sec)}.port .s{font-size:15px;font-weight:700;margin-top:2px}.port.closed{background:#21d07a1a;border-color:#21d07a66}.port.closed .s{color:var(--ok)}.port.open{background:#ff4d4f1f;border-color:#ff4d4f80;box-shadow:0 0 10px #ff4d4f4d}.port.open .s{color:var(--danger)}.port.unknown{background:#8c90991f;border-color:#8c909966}.port.unknown .s{color:var(--unknown)}.timeline{position:relative;padding-left:16px}.tl-row{position:relative;padding:6px 0 6px 18px;border-left:2px solid var(--line);font-size:13px;display:flex;align-items:center;gap:8px;cursor:pointer}.tl-row:before{content:"";position:absolute;left:-7px;top:12px;width:12px;height:12px;border-radius:50%;background:var(--bg-elevated);border:2px solid var(--brand)}.tl-row.alarm:before{background:var(--danger);border-color:var(--danger)}.tl-row .tm{color:var(--t-sec)}.tl-row.sel{background:#2b7fff24;border-radius:6px;box-shadow:inset 3px 0 0 var(--brand)}.kf-hero{flex:1;min-height:0;border-radius:8px;border:1px solid var(--line);background:#000;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden}.kf-hero.major{border-color:#ff4d4f8c;box-shadow:0 0 18px #ff4d4f38}.kf-hero .ph{color:#46505e;font-size:13px;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}.kf-hero .ph .ic{font-size:40px}.kf-hero .osd{position:absolute;top:10px;left:12px;font-size:12px;color:#cfd6df;text-shadow:0 1px 2px #000}.kf-hero .kf-badge{position:absolute;top:10px;right:12px;font-size:11px;background:var(--danger);color:#fff;padding:2px 8px;border-radius:5px}.kf-cap{flex:0 0 auto;margin-top:8px;font-size:13px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}.kf-strip{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}.kf-tile{aspect-ratio:16/9;border-radius:6px;border:1px solid var(--line);background:linear-gradient(135deg,#1c2531,#0e141c);position:relative;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:18px;color:#46505e}.kf-tile .cap{position:absolute;left:5px;bottom:4px;font-size:10px}.kf-tile.sel{outline:2px solid var(--brand);outline-offset:-2px}.kf-tile.major{border-color:#ff4d4f8c}.summary{background:linear-gradient(90deg,rgba(43,127,255,.12),transparent);border:1px solid rgba(43,127,255,.3);border-radius:var(--radius);padding:12px 14px;font-size:13px;display:flex;gap:10px;align-items:flex-start}.summary .ic{color:var(--brand);font-size:16px}.note{color:var(--t-sec);font-size:12px}.map-wrap{position:relative;background:#0e141c;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}.map-svg{display:block;width:100%;height:auto}.map-legend{position:absolute;left:10px;bottom:8px;display:flex;flex-wrap:wrap;gap:10px;font-size:11px;background:#0b0e14b3;padding:5px 9px;border-radius:6px}.map-legend i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:4px;vertical-align:-1px}.map-tools{position:absolute;right:10px;top:10px;display:flex;flex-direction:column;gap:6px}.map-tools .btn{padding:5px 9px;font-size:12px}.map-frozen{position:absolute;left:10px;top:10px;background:#8c9099eb;color:#111;font-size:11px;padding:2px 8px;border-radius:5px}.veh{animation:pulse 1.6s infinite}.syncbar{display:flex;align-items:center;gap:10px;margin-top:8px;font-size:12px;color:var(--t-sec)}.syncbar input[type=range]{flex:1;accent-color:var(--brand)}.ad-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 18px;margin:6px 0 12px}.ad-grid .k{color:var(--t-sec);font-size:12px}.ad-grid .v{font-size:14px;margin-top:2px}.ad-evi{width:100%;aspect-ratio:16/9;border-radius:8px;border:1px solid var(--line);background:linear-gradient(135deg,#1c2531,#0e141c);display:flex;align-items:center;justify-content:center;font-size:26px;color:#3a4350;position:relative}.ad-evi .cap{position:absolute;left:8px;bottom:7px;font-size:12px}.ad-flow{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--t-sec);margin-top:12px;flex-wrap:wrap}.ad-flow .step{padding:3px 9px;border-radius:11px;border:1px solid var(--line);background:var(--bg-elevated)}.ad-flow .step.on{color:#fff;background:var(--brand);border-color:var(--brand)}.page-overview{display:flex;flex-direction:column;height:calc(100vh - 106px);gap:12px}.hero-band{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;flex:0 0 auto}.hero{border:1px solid var(--line);border-radius:8px;padding:11px 14px;background:var(--bg-surface)}.hero .lab{font-size:12px;color:var(--t-sec)}.hero .val{font-size:30px;font-weight:800;line-height:1.05;margin-top:4px}.hero .sub{font-size:11px;color:var(--t-sec);margin-top:3px}.hero.danger{border-color:#ff4d4f66;background:linear-gradient(180deg,rgba(255,77,79,.1),var(--bg-surface))}.hero.danger .val{color:var(--danger)}.hero.ok .val{color:var(--ok)}.hero.brand .val{color:var(--brand)}.ov2-mid{display:grid;grid-template-columns:1.45fr 1fr;gap:12px;flex:1;min-height:0}.ov2-mid>.card{display:flex;flex-direction:column;min-height:0;overflow:hidden}.ov2-mid .card h3{flex:0 0 auto}.ov2-mid>.card>.geomap{min-height:200px}.ov2-mid .map-wrap{flex:1;min-height:0}.ov2-mid .map-wrap .map-svg{width:100%;height:100%}.ov2-right{display:grid;grid-template-rows:1fr 1fr;gap:12px;min-height:0}.ov2-right>.card{display:flex;flex-direction:column;min-height:0;overflow:auto}.ov2-bot{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;flex:0 0 auto}.ov2-bot .card{padding:10px 12px}.rank-row{display:flex;align-items:center;gap:8px;padding:5px 2px;font-size:13px}.bar-h{height:7px;border-radius:4px;background:var(--bg-elevated);overflow:hidden;flex:1}.bar-h i{display:block;height:100%;border-radius:4px}.gauge{display:flex;flex-direction:column;gap:7px;font-size:12px;margin-top:2px}.gauge .g{display:flex;align-items:center;gap:8px}.gauge .g .lab{width:58px;color:var(--t-sec);flex:0 0 auto}.page-live{display:flex;flex-direction:column}.live-grid{display:grid;grid-template-columns:1.55fr 1fr;gap:14px;align-items:stretch;flex:1;min-height:calc(100vh - 170px)}.live-wall{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(3,1fr);gap:12px;min-height:0}.live-wall .vcell{aspect-ratio:auto;min-height:0}.live-wall .link-card{overflow-y:auto;min-height:0}.live-grid .map-card{display:flex;flex-direction:column;min-height:0}.live-grid .map-card .geomap{flex:1 1 auto;min-height:0}.page-playback{display:flex;flex-direction:column;height:calc(100vh - 106px)}.pb-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:14px;align-items:stretch;flex:1;min-height:0}.pb-grid>.card{display:flex;flex-direction:column;min-height:0}.pb-grid .player{aspect-ratio:auto;flex:1;min-height:0}.pb-grid .map-card .map-wrap{flex:1;min-height:0}.pb-grid .map-card .map-wrap .map-svg{width:100%;height:100%}.pb-foot{flex:0 0 auto}.page-trip{display:flex;flex-direction:column;height:calc(100vh - 106px)}.trip-row1{flex:0 0 auto}.trip-mid{display:grid;grid-template-columns:.85fr 1.5fr 1fr;gap:14px;align-items:stretch;flex:1;min-height:0}.trip-mid>.card{display:flex;flex-direction:column;min-height:0}.trip-mid .card h3{flex:0 0 auto}.trip-mid .timeline{flex:1;min-height:0;overflow:auto}.trip-mid .map-card .map-wrap{flex:1;min-height:0}.trip-mid .map-card .map-wrap .map-svg{width:100%;height:100%}.trip-strip{flex:0 0 auto}.page-alarm{display:flex;flex-direction:column}.alarm-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:14px;align-items:stretch;flex:1;min-height:calc(100vh - 240px)}.alarm-left{display:flex;flex-direction:column;gap:14px;min-height:0}.alarm-left .alarm-detail{flex:1;min-height:0;overflow:auto}.alarm-grid .map-card{display:flex;flex-direction:column;min-height:0}.alarm-grid .map-card .map-wrap{flex:1;min-height:260px}.alarm-grid .map-card .map-wrap .map-svg{width:100%;height:100%}.page-fence{display:flex;flex-direction:column;height:100%}.fence-grid{display:grid;grid-template-columns:2.1fr 1fr;gap:14px;align-items:stretch;flex:1;min-height:0}.fence-grid .map-card{display:flex;flex-direction:column;min-height:0}.fence-grid .map-card .map-wrap{flex:1;min-height:calc(100vh - 250px)}.fence-grid .map-card .map-wrap .map-svg{width:100%;height:100%}.fence-grid .map-card .geomap{flex:1 1 auto;min-height:0}.fence-grid .list-card{overflow:auto}.uname[data-v-a00899a9]{white-space:nowrap}.major-toast[data-v-a00899a9]{display:flex;align-items:center;gap:6px;cursor:pointer;font-size:12px;color:var(--danger);background:#ff4d4f1f;border:1px solid rgba(255,77,79,.5);border-radius:var(--radius);padding:3px 10px;max-width:340px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;animation:toastpulse-a00899a9 1.6s infinite}@keyframes toastpulse-a00899a9{0%{box-shadow:0 0 #ff4d4f66}70%{box-shadow:0 0 0 8px #ff4d4f00}to{box-shadow:0 0 #ff4d4f00}}.bell.major[data-v-a00899a9]{animation:toastpulse-a00899a9 1.6s infinite;border-radius:50%}.flash-enter-active[data-v-a00899a9],.flash-leave-active[data-v-a00899a9]{transition:opacity .3s}.flash-enter-from[data-v-a00899a9],.flash-leave-to[data-v-a00899a9]{opacity:0}.statusbar .bad[data-v-a00899a9]{color:var(--danger)}.logout[data-v-a00899a9]{margin-left:8px;padding:2px 10px;font-size:12px;cursor:pointer;color:var(--t-sec);background:var(--bg-elevated);border:1px solid var(--line);border-radius:var(--radius)}.logout[data-v-a00899a9]:hover{color:var(--t-pri);border-color:var(--brand)}