/* ===== 数据大屏（指挥中心暗色） ===== */
.dashbody{background:#060d1c;color:#d6e4fb;overflow:hidden;height:100vh;font-family:"PingFang SC","Microsoft YaHei",-apple-system,"Segoe UI",Arial,sans-serif}
.dtop{height:54px;display:flex;align-items:center;gap:16px;padding:0 18px;background:linear-gradient(90deg,#0a1c3a,#123058);border-bottom:1px solid rgba(120,160,220,.2)}
.dtitle{font-size:18px;font-weight:800;letter-spacing:.5px;color:#fff;display:flex;align-items:center;gap:8px;text-shadow:0 0 16px rgba(58,160,255,.5);min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.dlive{display:flex;align-items:center;gap:7px;font-size:13px;color:#7fe0b0;font-weight:700}
.dlive .dot{width:9px;height:9px;border-radius:50%;background:#2ee59d;box-shadow:0 0 10px #2ee59d;animation:blink 1.3s infinite}
@keyframes blink{50%{opacity:.3}}
#clock{color:#9fb6d8;font-weight:600;font-variant-numeric:tabular-nums}
.dtop .spacer{flex:1}
.dlang{display:flex;background:rgba(255,255,255,.1);border-radius:999px;padding:3px;gap:2px}
.dlang button{border:0;background:transparent;color:#cfe0ff;opacity:.8;padding:5px 11px;border-radius:999px;font-size:12.5px;font-weight:700;cursor:pointer}
.dlang button.on{background:#3a6bb5;color:#fff;opacity:1}
.dback{color:#cfe0ff;font-size:13px;font-weight:700;border:1px solid rgba(120,160,220,.35);padding:6px 13px;border-radius:9px;text-decoration:none}
.dback:hover{background:rgba(255,255,255,.08)}

.dash{height:calc(100vh - 54px);display:grid;grid-template-columns:332px 1fr 350px;grid-template-rows:auto 1fr;gap:12px;padding:12px}
.kstrip{grid-column:1/4;grid-row:1;display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.dleft{grid-column:1;grid-row:2;display:flex;flex-direction:column;gap:12px;min-height:0;overflow:auto}
.dcenter{grid-column:2;grid-row:2;min-height:0}
.dright{grid-column:3;grid-row:2;display:flex;flex-direction:column;gap:12px;min-height:0;overflow:auto}

.kcard{background:linear-gradient(160deg,#102a52,#0b1c39);border:1px solid rgba(120,170,255,.18);border-radius:12px;padding:11px 14px;position:relative;overflow:hidden}
.kcard:before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(#3aa0ff,#2ee59d)}
.kcard .kv{font-size:25px;font-weight:900;color:#fff;font-variant-numeric:tabular-nums;text-shadow:0 0 14px rgba(58,160,255,.4)}
.kcard .kl{font-size:11.5px;color:#9fb6d8;margin-top:2px}
.kcard .ku{font-size:13px;color:#7fe0b0;font-weight:700}

.panel{background:linear-gradient(160deg,#0e1f3c,#0a1730);border:1px solid rgba(120,160,220,.16);border-radius:12px;padding:9px 12px;display:flex;flex-direction:column;min-height:0}
.panel .ph{font-size:13.5px;font-weight:800;color:#cfe0ff;margin-bottom:7px;display:flex;align-items:center;justify-content:space-between;gap:8px}
.panel .ph:before{content:"";display:inline-block;width:4px;height:13px;background:linear-gradient(#e0a800,#bf8f00);border-radius:3px;margin-right:7px}
.panel .ph>span:first-child{flex:1}
.pc{flex:1;min-height:0}
.c-chart{width:100%;height:158px}
.dleft .panel{flex:1}
.mappanel{grid-column:2;height:100%}
.mapbox{flex:1;min-height:0;position:relative;border-radius:8px;overflow:hidden;background:radial-gradient(900px 500px at 60% 30%,#0c2140,#060f22)}
.mapbox svg{width:100%;height:100%;display:block}

.legend{display:flex;gap:10px;flex-wrap:wrap;font-size:11px;font-weight:600;color:#9fb6d8}
.legend i{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:4px;vertical-align:middle}

/* map svg labels */
.mapbox .nlab{font:600 11px "PingFang SC",Arial;fill:#bcd0ee}
.mapbox .hlab{font:800 13px "PingFang SC",Arial;fill:#ffe9a8}
.mapbox .rlab{font:700 11.5px "PingFang SC",Arial;fill:#ffffff}
.veh{cursor:pointer}
.mapbox .flow{stroke-linecap:round;animation:dashflow 1.1s linear infinite}
@keyframes dashflow{to{stroke-dashoffset:-30}}
.mapbox .pnode{animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.55}50%{opacity:1}}
.mapbox .veh circle{filter:drop-shadow(0 0 4px currentColor)}

/* right panels */
.ordbox{position:relative;overflow:hidden;flex:1;min-height:120px}
.ordlist{position:absolute;left:0;right:0;animation:scrollup 18s linear infinite}
.ordbox:hover .ordlist{animation-play-state:paused}
@keyframes scrollup{from{top:0}to{top:-50%}}
.ordrow{display:flex;align-items:center;gap:8px;padding:6px 4px;border-bottom:1px solid rgba(120,160,220,.12);font-size:12px}
.ordrow .no{color:#cfe0ff;font-weight:700;font-size:11.5px}
.ordrow .rt{color:#9fb6d8;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dpill{font-size:10px;font-weight:800;padding:2px 7px;border-radius:999px;white-space:nowrap}
.dpill.t1{background:rgba(46,229,157,.16);color:#43e6a0}.dpill.t2{background:rgba(224,168,0,.18);color:#ffce5a}.dpill.t3{background:rgba(58,160,255,.16);color:#6fb5ff}

.pbar{display:flex;align-items:center;gap:8px;margin:7px 0}
.pbar .nm{width:78px;font-size:12px;font-weight:700;color:#cfe0ff}
.pbar .ba{flex:1;height:9px;background:rgba(120,160,220,.14);border-radius:6px;overflow:hidden}.pbar .ba i{display:block;height:100%}
.pbar .pc2{width:36px;text-align:right;font-size:11px;font-weight:800;color:#9fb6d8}
.pbar .stt{font-size:10px;font-weight:800;padding:2px 7px;border-radius:999px}

.alert{display:flex;align-items:center;gap:9px;padding:7px 4px;border-bottom:1px solid rgba(120,160,220,.12);font-size:12.5px}
.alert .ai{width:8px;height:8px;border-radius:50%;flex:0 0 8px}
.alert .at{flex:1;color:#dbe7fb}
.alert.high .ai{background:#ff5a5a;box-shadow:0 0 8px #ff5a5a}
.alert.mid .ai{background:#ffb44a;box-shadow:0 0 8px #ffb44a}
.alert.low .ai{background:#6fb5ff}

.vtip{position:fixed;z-index:90;background:#0b1c39;border:1px solid rgba(120,170,255,.4);border-radius:10px;padding:10px 12px;font-size:12px;color:#dbe7fb;box-shadow:0 10px 30px rgba(0,0,0,.5);max-width:240px}
.vtip b{color:#fff}
.vtip .vrow{display:flex;justify-content:space-between;gap:14px;margin:2px 0}
.vtip .vk{color:#9fb6d8}

/* responsive / phone */
@media(max-width:1100px){ .dash{grid-template-columns:1fr;grid-template-rows:auto auto 360px auto;overflow:auto;height:auto}
  .kstrip{grid-column:1;grid-template-columns:repeat(3,1fr)} .dleft,.dcenter,.dright{grid-column:1;overflow:visible}
  .dashbody{overflow:auto;height:auto} .mappanel{height:360px} }
body.mphone .dash{grid-template-columns:1fr;grid-template-rows:auto auto 320px auto;height:auto;overflow:auto}
body.mphone .kstrip{grid-template-columns:1fr 1fr}
body.mphone .dashbody{overflow:auto;height:auto} body.mphone .mappanel{height:320px}
body.mphone .dtitle{font-size:13px}
@media(max-width:560px){ .kstrip{grid-template-columns:1fr 1fr} }