/* ============================================================
   大屏基础：1920×1080 设计稿，由 app.js 计算 transform 缩放适配
   夜间红光模式通过 .night 类切换 CSS 变量实现
   ============================================================ */

:root {
  --bg:        #060d16;
  --bg-panel:  #0b1826;
  --bg-card:   #10202f;
  --bg-hover:  #16293a;
  --line:      #1d3448;
  --line-hi:   #2c5875;
  --txt:       #d7e6f2;
  --txt-dim:   #7e99ae;
  --txt-mute:  #54708a;
  --accent:    #25d0ff;
  --accent2:   #1a8fd0;
  --ok:        #00B050;
  --bad:       #FF3B30;
  --stale:     #FFA500;
  --warn:      #ffd166;
  --glow:      rgba(37, 208, 255, .45);
  --road:      #1b2c3d;
  --road-hi:   #26405a;
  --water:     #0d2b45;
  --block:     #0e1c29;
}

.screen.night {
  --bg:        #12040a;
  --bg-panel:  #1c0710;
  --bg-card:   #250b14;
  --bg-hover:  #33101c;
  --line:      #4a1626;
  --line-hi:   #7a2438;
  --txt:       #ffb3b3;
  --txt-dim:   #d4737a;
  --txt-mute:  #9c4d55;
  --accent:    #ff4d4d;
  --accent2:   #c22b3a;
  --ok:        #ff6b6b;
  --bad:       #ff1f1f;
  --stale:     #ff9c5c;
  --warn:      #ffc36b;
  --glow:      rgba(255, 60, 60, .40);
  --road:      #33121c;
  --road-hi:   #4d1b28;
  --water:     #2a0d18;
  --block:     #210a12;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  width: 100%; height: 100%;
  background: #000;
  overflow: hidden;
  font-family: "Microsoft YaHei", "PingFang SC", "Source Han Sans CN", "Noto Sans CJK SC", sans-serif;
  -webkit-font-smoothing: antialiased;
}

#scaler {
  position: absolute; top: 50%; left: 50%;
  width: 1920px; height: 1080px;
  transform-origin: center center;
}

.screen {
  width: 1920px; height: 1080px;
  display: flex; flex-direction: column;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(37,208,255,.07), transparent 60%),
    var(--bg);
  color: var(--txt);
  overflow: hidden;
}

/* ─────────────── 顶栏 ─────────────── */
.topbar {
  height: 76px; flex: 0 0 76px;
  display: flex; align-items: center; gap: 20px;
  padding: 0 18px;
  background: linear-gradient(180deg, var(--bg-panel), transparent);
  border-bottom: 1px solid var(--line);
}

.brand { display: flex; align-items: center; gap: 11px; flex: 0 0 auto; }
.brand-badge {
  width: 42px; height: 42px; border-radius: 9px;
  background: linear-gradient(145deg, var(--bad), #a51d16);
  color: #fff; font-size: 23px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 16px rgba(255,59,48,.45);
}
.brand-title { font-size: 19px; font-weight: 700; letter-spacing: .5px; }
.brand-sub { font-size: 9px; color: var(--txt-mute); letter-spacing: 1.6px; margin-top: 2px; }

.alarm-brief {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center; gap: 14px;
  padding: 8px 16px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-left: 4px solid var(--bad);
  border-radius: 5px;
}
.ab-main { min-width: 0; }
.ab-title {
  font-size: 19px; font-weight: 700; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ab-tags { display: flex; gap: 7px; margin-top: 5px; }
.ab-tag {
  font-size: 11px; padding: 2px 8px; border-radius: 3px;
  background: rgba(37,208,255,.12); color: var(--accent);
  border: 1px solid rgba(37,208,255,.28);
}
.ab-tag.red { background: rgba(255,59,48,.14); color: var(--bad); border-color: rgba(255,59,48,.35); }
.ab-tag.amb { background: rgba(255,165,0,.14); color: var(--stale); border-color: rgba(255,165,0,.35); }
.ab-elapsed { flex: 0 0 auto; text-align: right; }
.ab-elapsed .v { font-size: 25px; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; }
.ab-elapsed .k { font-size: 10px; color: var(--txt-mute); }

.topmeta { flex: 0 0 auto; text-align: right; }
.clock { font-size: 30px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: 1px; }
.date { font-size: 11px; color: var(--txt-dim); margin-top: 1px; }

.tools { flex: 0 0 auto; display: flex; align-items: center; gap: 9px; }
.speedgroup {
  display: flex; align-items: center; gap: 3px;
  background: var(--bg-card); border: 1px solid var(--line);
  border-radius: 5px; padding: 3px 5px;
}
.toollabel { font-size: 10px; color: var(--txt-mute); padding: 0 5px 0 2px; }
.speedgroup button, .toolbtn {
  font-family: inherit; font-size: 12px; color: var(--txt-dim);
  background: transparent; border: 1px solid transparent;
  border-radius: 4px; padding: 5px 9px; cursor: pointer;
  transition: all .15s;
}
.speedgroup button:hover, .toolbtn:hover { color: var(--txt); background: var(--bg-hover); }
.speedgroup button.on { color: #04121c; background: var(--accent); font-weight: 700; }
.toolbtn { border-color: var(--line); }
.toolbtn.on { color: var(--accent); border-color: var(--accent); background: rgba(37,208,255,.10); }
.toolbtn.danger:hover { color: var(--bad); border-color: var(--bad); background: rgba(255,59,48,.10); }

/* ─────────────── 主体三栏 ─────────────── */
.body { flex: 1 1 auto; display: flex; gap: 12px; padding: 12px; min-height: 0; }
.col { display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.col.left  { flex: 0 0 352px; }
.col.center{ flex: 1 1 auto; min-width: 0; }
.col.right { flex: 0 0 430px; }

.panel {
  display: flex; flex-direction: column; min-height: 0;
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}
.panel.grow { flex: 1 1 auto; }
.panel-head {
  flex: 0 0 38px; height: 38px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 12px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(37,208,255,.06), transparent);
}
.ph-title { font-size: 14px; font-weight: 700; letter-spacing: .5px; }
.ph-title::before {
  content: ''; display: inline-block; width: 3px; height: 13px;
  background: var(--accent); margin-right: 8px; vertical-align: -1px;
  box-shadow: 0 0 8px var(--glow);
}
.ph-tag { font-size: 11px; color: var(--txt-dim); font-variant-numeric: tabular-nums; }
.ph-sort { display: flex; gap: 3px; }
.ph-sort button {
  font-family: inherit; font-size: 11px; color: var(--txt-mute);
  background: transparent; border: 1px solid var(--line);
  border-radius: 3px; padding: 3px 8px; cursor: pointer;
}
.ph-sort button.on { color: var(--accent); border-color: var(--accent); }

.panel-scroll { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; padding: 9px; min-height: 0; }
.panel-scroll.short { max-height: 268px; }
.panel-scroll::-webkit-scrollbar { width: 5px; }
.panel-scroll::-webkit-scrollbar-thumb { background: var(--line-hi); border-radius: 3px; }
.panel-scroll::-webkit-scrollbar-track { background: transparent; }

/* ─────────────── 队站确认卡片 ─────────────── */
.st-card {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-left: 3px solid var(--txt-mute);
  border-radius: 5px;
  padding: 9px 11px; margin-bottom: 8px;
  transition: border-color .2s, background .2s;
}
.st-card.s-ack      { border-left-color: var(--ok); }
.st-card.s-enroute  { border-left-color: var(--accent); }
.st-card.s-arrived  { border-left-color: var(--ok); }
.st-card.s-pending  { border-left-color: var(--stale); }
.st-card.s-rejected { border-left-color: var(--txt-mute); opacity: .72; }
.st-card.lv-warn    { border-left-color: var(--warn); background: rgba(255,209,102,.06); }
.st-card.lv-danger  { border-left-color: var(--bad); background: rgba(255,59,48,.08); animation: dangerPulse 1.1s ease-in-out infinite; }

@keyframes dangerPulse {
  0%, 100% { box-shadow: 0 0 0 rgba(255,59,48,0); }
  50%      { box-shadow: 0 0 15px rgba(255,59,48,.42); }
}

.st-top { display: flex; align-items: center; gap: 7px; }
.st-name { font-size: 14px; font-weight: 700; flex: 1 1 auto; }
.st-badge {
  font-size: 10px; padding: 2px 7px; border-radius: 3px;
  background: var(--bg-hover); color: var(--txt-dim); white-space: nowrap;
}
.st-badge.ok   { background: rgba(0,176,80,.16);  color: var(--ok); }
.st-badge.run  { background: rgba(37,208,255,.16); color: var(--accent); }
.st-badge.warn { background: rgba(255,209,102,.16); color: var(--warn); }
.st-badge.bad  { background: rgba(255,59,48,.18);  color: var(--bad); }
.st-badge.dim  { background: var(--bg-hover); color: var(--txt-mute); }

.st-meta { display: flex; gap: 12px; margin-top: 6px; font-size: 11px; color: var(--txt-dim); }
.st-meta b { color: var(--txt); font-weight: 600; font-variant-numeric: tabular-nums; }

.st-veh { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 4px; }
.vchip {
  font-size: 10px; padding: 2px 6px; border-radius: 3px;
  background: var(--bg-hover); color: var(--txt-dim);
  border: 1px solid var(--line);
}
.vchip.on  { color: var(--accent); border-color: rgba(37,208,255,.35); }
.vchip.off { color: var(--txt-mute); text-decoration: line-through; opacity: .6; }

.st-esc {
  margin-top: 7px; padding: 6px 8px; border-radius: 4px;
  background: rgba(255,59,48,.10); border: 1px solid rgba(255,59,48,.28);
  font-size: 11px; color: var(--txt);
}
.st-esc .esc-hd { display: flex; justify-content: space-between; align-items: center; margin-bottom: 3px; }
.st-esc .esc-lv { font-weight: 700; color: var(--bad); }
.st-esc .esc-cd { font-variant-numeric: tabular-nums; color: var(--warn); }
.st-esc .esc-act { color: var(--txt-dim); line-height: 1.45; }
.st-esc ul { margin: 3px 0 0 15px; color: var(--txt-mute); font-size: 10px; line-height: 1.5; }

.st-actions { margin-top: 8px; display: flex; gap: 6px; }
.btn {
  font-family: inherit; font-size: 11px; padding: 5px 10px; border-radius: 4px;
  border: 1px solid var(--line-hi); background: var(--bg-hover); color: var(--txt);
  cursor: pointer; transition: all .15s;
}
.btn:hover { border-color: var(--accent); color: var(--accent); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #04121c; font-weight: 700; }
.btn.primary:hover { filter: brightness(1.12); color: #04121c; }
.btn.ghost { background: transparent; }

/* ─────────────── ETA 排序卡片 ─────────────── */
.eta-list { position: relative; }
.eta-card {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 9px 11px; margin-bottom: 8px;
  will-change: transform;
}
.eta-card.rank-1 { border-color: rgba(37,208,255,.45); background: linear-gradient(180deg, rgba(37,208,255,.09), var(--bg-card)); }
.eta-card.lost   { opacity: .5; border-style: dashed; }
.eta-card.jammed { border-color: rgba(255,209,102,.45); }

.et-hd { display: flex; align-items: center; gap: 8px; }
.et-rank {
  flex: 0 0 24px; height: 24px; border-radius: 5px;
  background: var(--bg-hover); color: var(--txt-dim);
  font-size: 13px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  font-variant-numeric: tabular-nums;
}
.rank-1 .et-rank { background: var(--accent); color: #04121c; }
.et-plate { font-size: 14px; font-weight: 700; letter-spacing: .3px; }
.et-type { font-size: 11px; color: var(--txt-dim); }
.et-state { margin-left: auto; }

.et-core { display: flex; align-items: baseline; gap: 14px; margin-top: 7px; }
.et-eta { font-size: 31px; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; line-height: 1; }
.rank-1 .et-eta { color: #fff; text-shadow: 0 0 14px var(--glow); }
.et-dist { font-size: 14px; color: var(--txt); font-variant-numeric: tabular-nums; }
.et-arrive { margin-left: auto; text-align: right; }
.et-arrive .v { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.et-arrive .k { font-size: 10px; color: var(--txt-mute); }

.et-brk { display: flex; gap: 5px; margin-top: 7px; }
.et-brk span {
  font-size: 10px; padding: 2px 6px; border-radius: 3px;
  background: var(--bg-hover); color: var(--txt-mute);
  border: 1px solid var(--line); font-variant-numeric: tabular-nums;
}
.et-brk span.hot { color: var(--warn); border-color: rgba(255,209,102,.3); }

.et-bar { height: 5px; border-radius: 3px; background: var(--bg-hover); margin-top: 7px; overflow: hidden; display: flex; }
.et-bar i { display: block; height: 100%; }
.et-bar i.prep { background: #4a6a85; }
.et-bar i.norm { background: var(--accent2); }
.et-bar i.jam  { background: var(--bad); }
.et-bar i.last { background: #6b8fa8; }
.et-bar i.done { background: var(--ok); }

.et-route { margin-top: 6px; font-size: 11px; color: var(--txt-dim); line-height: 1.5; }
.et-route .rd { color: var(--txt); }
.et-avoid { margin-top: 4px; font-size: 10px; color: var(--stale); }

.et-alert {
  margin-top: 7px; padding: 6px 8px; border-radius: 4px;
  font-size: 11px; line-height: 1.45;
  display: flex; align-items: center; gap: 7px;
}
.et-alert.jam   { background: rgba(255,209,102,.10); border: 1px solid rgba(255,209,102,.3); color: var(--warn); }
.et-alert.lost  { background: rgba(255,59,48,.10);  border: 1px solid rgba(255,59,48,.3);  color: var(--bad); }
.et-alert.batt  { background: rgba(255,165,0,.10);   border: 1px solid rgba(255,165,0,.3);  color: var(--stale); }
.et-alert.info  { background: rgba(37,208,255,.08);  border: 1px solid rgba(37,208,255,.25); color: var(--accent); }
.et-alert .sp { margin-left: auto; flex: 0 0 auto; }

.et-ft {
  margin-top: 7px; padding-top: 6px; border-top: 1px dashed var(--line);
  display: flex; gap: 10px; font-size: 10px; color: var(--txt-mute);
  font-variant-numeric: tabular-nums;
}
.et-ft .g { color: var(--ok); }
.et-ft .a { color: var(--stale); }
.et-ft .r { color: var(--bad); }

/* 已到场卡片 */
.ar-card {
  background: var(--bg-card); border: 1px solid var(--line);
  border-left: 3px solid var(--ok); border-radius: 5px;
  padding: 8px 10px; margin-bottom: 7px;
}
.ar-hd { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; }
.ar-hd .dt { margin-left: auto; font-size: 11px; color: var(--txt-dim); font-weight: 400; font-variant-numeric: tabular-nums; }
.ar-meta { font-size: 11px; color: var(--txt-dim); margin-top: 4px; }
.ar-steps { display: flex; gap: 5px; margin-top: 7px; }
.ar-steps .btn { font-size: 10px; padding: 4px 8px; }
.ar-steps .btn.done { background: rgba(0,176,80,.18); border-color: var(--ok); color: var(--ok); }

/* ─────────────── 水源卡片 ─────────────── */
.wt-card {
  background: var(--bg-card); border: 1px solid var(--line);
  border-radius: 5px; padding: 8px 10px; margin-bottom: 7px;
}
.wt-hd { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; }
.wt-rank {
  flex: 0 0 19px; height: 19px; border-radius: 4px;
  background: rgba(255,59,48,.18); color: var(--bad);
  font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.wt-rank.intake { background: rgba(37,208,255,.18); color: var(--accent); }
.wt-tags { margin-left: auto; display: flex; gap: 4px; }
.wt-tag { font-size: 9px; padding: 1px 5px; border-radius: 2px; border: 1px solid; }
.wt-tag.vs { color: var(--accent); border-color: rgba(37,208,255,.35); }
.wt-tag.rs { color: var(--warn);   border-color: rgba(255,209,102,.35); }
.wt-tag.ov { color: var(--stale);  border-color: rgba(255,165,0,.4); }
.wt-dist { display: flex; gap: 14px; margin-top: 6px; }
.wt-dist div { flex: 1; }
.wt-dist .k { font-size: 9px; color: var(--txt-mute); }
.wt-dist .v { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.wt-dist .v.walk { color: var(--ok); }
.wt-dist .v.drive { color: var(--accent); }
.wt-sub { margin-top: 5px; font-size: 10px; color: var(--txt-dim); line-height: 1.5; }
.wt-hose { color: var(--warn); }
.wt-ft { margin-top: 5px; font-size: 10px; color: var(--txt-mute); display: flex; gap: 8px; }
.wt-more { text-align: center; }

/* ─────────────── 地图 ─────────────── */
.mapwrap {
  flex: 1 1 auto; position: relative; min-height: 0;
  background: var(--bg-panel);
  border: 1px solid var(--line); border-radius: 6px;
  overflow: hidden;
}
#map { width: 100%; height: 100%; display: block; }

.maplegend {
  position: absolute; left: 12px; bottom: 12px;
  background: rgba(6,13,22,.86); border: 1px solid var(--line);
  border-radius: 5px; padding: 8px 11px;
  font-size: 11px; color: var(--txt-dim); line-height: 1.85;
  backdrop-filter: blur(4px);
}
.maplegend i {
  display: inline-block; width: 9px; height: 9px; border-radius: 2px;
  margin-right: 6px; vertical-align: 0;
}
.maplegend .row { white-space: nowrap; }
.maplegend .grp { display: flex; gap: 16px; }

.mapscale {
  position: absolute; right: 12px; bottom: 12px;
  background: rgba(6,13,22,.86); border: 1px solid var(--line);
  border-radius: 5px; padding: 6px 10px;
  font-size: 10px; color: var(--txt-mute);
  font-variant-numeric: tabular-nums;
}

/* SVG 地图元素样式 */
.rd { stroke-linecap: round; fill: none; }
.rd-casing { stroke: var(--line); }
.rd-name { fill: var(--txt-mute); font-size: 15px; font-family: inherit; }
.river { fill: var(--water); }
.pond  { fill: var(--water); stroke: var(--line-hi); stroke-width: 2; }
.block { fill: var(--block); stroke: var(--line); stroke-width: 1.5; }
.blk-name { fill: var(--txt-mute); font-weight: 600; letter-spacing: 2px; }
.footpath { stroke: #2b4a3a; stroke-width: 5; fill: none; stroke-dasharray: 12 9; stroke-linecap: round; }
.screen.night .footpath { stroke: #5c2431; }

.buffer { fill: none; stroke: var(--stale); stroke-width: 2; stroke-dasharray: 14 10; opacity: .5; }
.buffer-txt { fill: var(--stale); font-size: 15px; opacity: .8; }

.geofence { fill: rgba(0,176,80,.07); stroke: var(--ok); stroke-width: 2.5; stroke-dasharray: 10 8; }

.alarm-core { fill: var(--bad); }
.alarm-ring { fill: none; stroke: var(--bad); stroke-width: 3; transform-origin: center; animation: ping 1.8s cubic-bezier(0,0,.2,1) infinite; }
@keyframes ping { 0% { opacity: .85; transform: scale(.35); } 100% { opacity: 0; transform: scale(1); } }
.alarm-txt { fill: #fff; font-size: 17px; font-weight: 700; }
.alarm-halo { fill: rgba(255,59,48,.14); }

.hydrant-dot { fill: var(--bad); stroke: #2a0a08; stroke-width: 2; }
.hydrant-dot.stale { fill: var(--stale); }
.hydrant-dot.bad { fill: #6b3030; }
.hydrant-rank { fill: #fff; font-size: 14px; font-weight: 700; text-anchor: middle; }
.hydrant-lbl { fill: var(--txt-dim); font-size: 13px; }
.intake-dot { fill: var(--accent); stroke: #06222e; stroke-width: 2; }
.intake-over { stroke: var(--stale); stroke-width: 3; fill: none; }
.intake-lbl { fill: var(--accent); font-size: 13px; font-weight: 600; }

.station-dot { fill: var(--bg-card); stroke: var(--accent); stroke-width: 3; }
.station-lbl { fill: var(--txt); font-size: 15px; font-weight: 600; }
.station-badge { font-size: 12px; font-weight: 700; text-anchor: middle; }

.veh-route { fill: none; stroke-width: 5; stroke-linecap: round; stroke-dasharray: 18 12; opacity: .75; }
.veh-route.dim { opacity: .22; stroke-width: 3; }
.veh-body { stroke: #06121c; stroke-width: 2; }
.veh-txt { fill: #04121c; font-size: 15px; font-weight: 700; text-anchor: middle; }
.veh-lbl { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.veh-lblbg { fill: rgba(6,13,22,.85); stroke: var(--line); stroke-width: 1; rx: 3; }
.veh-lost { stroke: var(--bad); stroke-width: 2.5; fill: none; stroke-dasharray: 5 5; }
.jam-mark { stroke: var(--bad); stroke-width: 9; fill: none; opacity: .55; stroke-linecap: round; }
.limit-mark { fill: var(--stale); font-size: 15px; font-weight: 700; text-anchor: middle; }

/* ─────────────── 时间轴 ─────────────── */
.timeline {
  flex: 0 0 128px; height: 128px;
  background: var(--bg-panel); border: 1px solid var(--line);
  border-radius: 6px; padding: 11px 16px 9px;
  display: flex; flex-direction: column;
}
.tl-head { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.tl-title { font-size: 13px; font-weight: 700; }
.tl-title::before {
  content: ''; display: inline-block; width: 3px; height: 12px;
  background: var(--accent); margin-right: 7px; vertical-align: -1px;
}
.tl-note { font-size: 11px; color: var(--txt-mute); margin-left: auto; }
.tl-track { flex: 1 1 auto; position: relative; margin-top: 12px; }
.tl-line { position: absolute; left: 0; right: 0; top: 15px; height: 2px; background: var(--line); }
.tl-line-fill { position: absolute; left: 0; top: 15px; height: 2px; background: var(--accent); box-shadow: 0 0 9px var(--glow); transition: width .5s; }
.tl-nodes { position: absolute; left: 0; right: 0; top: 0; display: flex; }
.tl-node { flex: 1 1 0; text-align: center; position: relative; min-width: 0; }
.tl-dot {
  width: 13px; height: 13px; border-radius: 50%; margin: 9px auto 0;
  background: var(--bg-panel); border: 2px solid var(--line-hi);
  position: relative; z-index: 2;
}
.tl-node.done .tl-dot { background: var(--ok); border-color: var(--ok); box-shadow: 0 0 9px rgba(0,176,80,.6); }
.tl-node.late .tl-dot { background: var(--bad); border-color: var(--bad); box-shadow: 0 0 9px rgba(255,59,48,.6); }
.tl-node.cur  .tl-dot { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 12px var(--glow); animation: curPulse 1.3s infinite; }
@keyframes curPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.35); } }
.tl-k { font-size: 11px; color: var(--txt-mute); margin-top: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-node.done .tl-k, .tl-node.cur .tl-k { color: var(--txt); }
.tl-v { font-size: 12px; font-weight: 700; color: var(--txt-dim); margin-top: 1px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tl-node.done .tl-v { color: var(--accent); }
.tl-node.late .tl-v { color: var(--bad); }

/* ─────────────── 底栏 ─────────────── */
.statusbar {
  flex: 0 0 42px; height: 42px;
  display: flex; align-items: center; gap: 18px;
  padding: 0 18px; border-top: 1px solid var(--line);
  background: var(--bg-panel);
}
.sb-stats { display: flex; gap: 20px; flex: 0 0 auto; }
.sb-stat { font-size: 11px; color: var(--txt-mute); }
.sb-stat b { font-size: 16px; color: var(--accent); margin-left: 5px; font-variant-numeric: tabular-nums; }
.sb-stat b.r { color: var(--bad); }
.sb-stat b.g { color: var(--ok); }
.sb-stat b.a { color: var(--stale); }
.sb-log {
  flex: 1 1 auto; min-width: 0; height: 100%;
  display: flex; align-items: center; justify-content: flex-end;
  font-size: 11px; color: var(--txt-dim);
  font-variant-numeric: tabular-nums;
}
.sb-log .t { color: var(--txt-mute); margin-right: 7px; }
.sb-log .m { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 720px; }
.sb-log .m.bad { color: var(--bad); }
.sb-log .m.ok  { color: var(--ok); }
.sb-log .m.warn{ color: var(--warn); }

/* ─────────────── 弹窗 ─────────────── */
#modalLayer { position: fixed; inset: 0; pointer-events: none; z-index: 999; }
.modal {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 520px; background: var(--bg-panel);
  border: 1px solid var(--accent); border-radius: 8px;
  box-shadow: 0 0 60px rgba(0,0,0,.75), 0 0 26px var(--glow);
  pointer-events: auto; overflow: hidden;
}
.modal.geofence { border-color: var(--ok); box-shadow: 0 0 60px rgba(0,0,0,.75), 0 0 26px rgba(0,176,80,.4); }
.modal-hd { padding: 14px 18px; font-size: 17px; font-weight: 700; border-bottom: 1px solid var(--line); }
.modal-bd { padding: 16px 18px; font-size: 13px; line-height: 1.85; color: var(--txt-dim); }
.modal-bd b { color: var(--txt); }
.modal-ft { padding: 12px 18px; display: flex; gap: 9px; justify-content: flex-end; border-top: 1px solid var(--line); }
.modal-ft .btn { font-size: 13px; padding: 8px 18px; }

.toast {
  position: absolute; top: 92px; left: 50%; transform: translateX(-50%);
  background: rgba(6,13,22,.94); border: 1px solid var(--line-hi);
  border-left: 4px solid var(--accent);
  border-radius: 5px; padding: 10px 18px;
  font-size: 13px; color: var(--txt);
  pointer-events: auto; box-shadow: 0 6px 26px rgba(0,0,0,.6);
  animation: toastIn .25s ease-out;
  max-width: 900px;
}
.toast.bad  { border-left-color: var(--bad); }
.toast.ok   { border-left-color: var(--ok); }
.toast.warn { border-left-color: var(--warn); }
@keyframes toastIn { from { opacity: 0; transform: translate(-50%,-14px); } to { opacity: 1; transform: translate(-50%,0); } }

.empty { padding: 22px 10px; text-align: center; color: var(--txt-mute); font-size: 12px; line-height: 1.7; }