/* Overview visual language: luminous metrics, translucent scene overlays. */
:root{--ov-metrics:clamp(112px,13vh,138px)}
#scene,#labels,#mapPins{inset:var(--ov-top) 0 var(--ov-bottom);border:0;border-radius:0}
#scene:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,#03162640,transparent 24%,transparent 70%,#03162650)}
#metrics.overview-metrics{grid-template-columns:1.16fr 1.65fr 1.3fr 1.3fr var(--ov-right);gap:10px}
#metrics .metric-card{--metric-accent:#40c8f5;display:flex;flex-direction:column;padding:12px 14px 10px;border:0;border-top:1px solid #4381a16b;border-bottom:1px solid #3184a34d;border-radius:2px;background:radial-gradient(ellipse at 24% 105%,#0b98c32b,transparent 70%),linear-gradient(115deg,#0a2d44e8,#061d30e8 65%,#092c40bd);box-shadow:inset 0 1px #d7f6ff05}
#metrics .metric-card:before{display:block;content:"";position:absolute;top:0;left:0;width:36px;height:2px;background:var(--metric-accent);box-shadow:0 0 9px color-mix(in srgb,var(--metric-accent) 40%,transparent)}
#metrics .metric-card:after{content:"";position:absolute;right:0;top:0;width:9px;height:9px;border-top:1px solid var(--metric-accent);border-right:1px solid var(--metric-accent);opacity:.6;pointer-events:none}
#metrics h2{border:0;margin:0 0 7px;padding:0 0 0 9px;min-height:20px;font-size:clamp(12px,.94vw,18px);letter-spacing:1px;position:relative;color:#e2f5ff;gap:5px}
#metrics h2:before{content:"";position:absolute;left:0;top:4px;width:2px;height:12px;background:var(--metric-accent)}
#metrics h2 small{font:8px Arial;letter-spacing:1px;color:#80a9bc;margin-left:auto;opacity:.65}
#metrics strong,#metrics .metric-card:not(.alarm-metric) strong{font-family:Arial,sans-serif;font-weight:700;font-style:italic;font-variant-numeric:tabular-nums;letter-spacing:.4px;font-size:clamp(28px,2.35vw,43px);color:transparent;background:linear-gradient(180deg,#f4ffff 14%,#b3edff 47%,#44b8e8 100%);background-clip:text;-webkit-background-clip:text;text-shadow:none;filter:drop-shadow(0 2px 7px #19bcef1a);white-space:nowrap;overflow:visible}
#metrics strong em{display:inline-block;vertical-align:baseline;color:#9abecf;font-style:normal;font-weight:400;font-size:10px;margin-left:4px;letter-spacing:0}
#metrics button{cursor:pointer}
#metrics button:hover{background:#45c4e70a}
#metrics .metric-body{display:flex;align-items:center;justify-content:center;gap:8px;min-height:0;flex:1;width:100%;margin:0;text-align:left}
#metrics .metric-art{display:block;width:clamp(60px,5.8vw,108px);height:100%;max-height:96px;object-fit:contain;flex-shrink:0;filter:drop-shadow(0 4px 9px #11cce61a)}
#metrics .scale-metric .metric-art{width:clamp(54px,4.9vw,90px)}
#metrics .scale-metric .metric-values{gap:6px;text-align:left}
#metrics .scale-metric strong{font-size:clamp(26px,2.05vw,40px)}
#metrics .metric-values>button>span{font-size:clamp(10px,.75vw,14px);color:#a6c6d8;margin-top:7px}
.metric-baseline{font-size:9px;letter-spacing:1px;color:#6c99b2;border-top:1px solid #5d9cbb1f;padding-top:6px;margin-top:4px;display:flex;align-items:center;gap:5px}
.metric-baseline i{width:4px;height:4px;background:#40c8f5;box-shadow:0 0 5px #40c8f5}
#metrics .people-metric{--metric-accent:#53ddc8;background:radial-gradient(ellipse at 20% 100%,#15b79e29,transparent 70%),linear-gradient(115deg,#0a3040e8,#071e30ee)}
#metrics .people-metric strong{background-image:linear-gradient(180deg,#f2fffa 10%,#b4f5e5 48%,#41cfb8)}
#metrics .vehicle-metric{--metric-accent:#8bb8ff;background:radial-gradient(ellipse at 20% 100%,#4974d333,transparent 70%),linear-gradient(115deg,#0d2d47ef,#091f34ee)}
#metrics .vehicle-metric strong{background-image:linear-gradient(180deg,#f3faff 10%,#c5e3ff 48%,#79abed)}
.hero-value{display:block;min-width:0}
.hero-value>span{display:block;font-size:10px;letter-spacing:.5px;color:#8caebe;margin-top:6px}
.metric-breakdown{display:flex;justify-content:space-between;gap:3px;border-top:1px solid #6da9bc24;margin-top:5px;padding-top:7px;white-space:nowrap;font-size:clamp(8px,.65vw,12px);color:#8eb1c5}
.metric-breakdown b{font-family:Arial;color:#d3edf5;font-size:1.12em;font-weight:500}
#metrics .health-metric{--metric-accent:#6ceadd;background:radial-gradient(ellipse at 90% 55%,#16b9ba29,transparent 63%),linear-gradient(110deg,#082d42ed,#071e30ee)}
#metrics .health-body{display:flex;align-items:center;justify-content:space-between;gap:12px;flex:1;width:100%;padding:0 5px 0 8px;text-align:left;min-height:0}
.health-numbers{flex:1;min-width:0;display:flex;flex-direction:column;gap:10px}
.health-stat{display:flex;align-items:center;justify-content:space-between;gap:6px}
.health-label{font-size:clamp(10px,.75vw,14px);color:#a8c7d7;white-space:nowrap}
.health-label i{display:inline-block;width:4px;height:4px;background:#4dc9f2;margin-right:6px}
.health-stat:nth-child(2) .health-label i{background:#66e1c7}
#metrics .health-stat strong{font-size:clamp(22px,1.8vw,34px)}
.health-orb{position:relative;display:block;flex-shrink:0;width:clamp(86px,6.6vw,125px);aspect-ratio:1;filter:drop-shadow(0 0 10px #25d9d31a)}
.health-orb svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:2;fill:none}
.orb-guide{stroke:#55c9db55;stroke-width:.5;stroke-dasharray:1 3}
.orb-track{stroke:#214754;stroke-width:5}
.orb-progress{stroke:url(#healthRing);stroke-width:5;transform:rotate(-86deg);transform-origin:50px 50px;stroke-linecap:round}
.orb-glass{position:absolute;inset:13%;border-radius:50%;border:1px solid #72e8de40;background:radial-gradient(ellipse at 30% 18%,#b2fff529,transparent 45%),radial-gradient(ellipse at 50% 100%,#24c6b839,transparent 62%),linear-gradient(155deg,#163e5266,#031d33a8);box-shadow:inset 0 -5px 12px #38eee41a,inset 0 1px 4px #bdfff52b}
.orb-glass:after{content:"";position:absolute;inset:60% 4% 10%;border:1px solid #7aecdc38;border-top:0;border-radius:50%;transform:rotate(-14deg)}
.orb-copy{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:3;padding-top:2px}
#metrics .orb-copy strong{font-size:clamp(24px,1.95vw,35px);background-image:linear-gradient(#f0fff4,#b8fff2 45%,#50d5bb)}
#metrics .orb-copy strong em{font-size:10px;color:#86d6c9;margin-left:1px}
.orb-copy>span{font-size:clamp(8px,.6vw,11px);color:#9dcabc;margin-top:5px}
.orb-spark{position:absolute;right:22%;top:9%;width:4px;height:4px;background:#b4fff3;border-radius:50%;box-shadow:0 0 8px #59ffdb;z-index:3}
#metrics .alarm-metric{--metric-accent:#e6bb6b;background:radial-gradient(ellipse at 55% 100%,#593b3b2b,transparent 80%),linear-gradient(110deg,#102b40ed,#081e30f0)}
#metrics .alarm-metric .metric-values{flex:1;margin-top:4px}
#metrics .alarm-metric strong{font-size:clamp(30px,2.45vw,46px)}
#metrics .alarm-metric #alarmCount{color:transparent;background-image:linear-gradient(#fff9e5 10%,#ffe1a2 45%,#d6a351)}
#metrics .alarm-metric #pending{color:transparent;background-image:linear-gradient(#ffe8e9 5%,#ff9da7 45%,#f76178)}
#metrics .alarm-metric #processed{color:transparent;background-image:linear-gradient(#e5fff7 5%,#99f3da 45%,#31bfa8)}
.pending-dot{display:inline-block;width:4px;height:4px;background:#fd7c8b;border-radius:50%;margin-right:4px;vertical-align:middle}
#metrics .disposition-track{height:2px;margin-top:10px;background:#e5687d35;border-radius:2px}
#metrics .disposition-track i{height:2px;background:linear-gradient(90deg,#128d9d,#73dfc9);box-shadow:0 0 7px #42d9c533}
#metrics #alarmProgressLabel{display:block;text-align:right;font-size:8px;color:#79a8b7;letter-spacing:.6px;margin-top:5px}
.directory-panel.panel,.monitor-panel{border:0;border-radius:0;box-shadow:none;backdrop-filter:blur(3px);padding-top:14px}
.directory-panel.panel{background:linear-gradient(90deg,#041a2bf5 0%,#062033df 55%,#062037a6 86%,#06203770 100%);border-left:1px solid #519cbc4d}
.monitor-panel{background:linear-gradient(270deg,#041a2bf5 0%,#062033e8 55%,#062037bc 86%,#06203794 100%);border-right:1px solid #519cbc4d}
.directory-panel.panel:before,.monitor-panel:before{display:none}
.directory-panel .heading,.monitor-panel>.heading{background:linear-gradient(90deg,#16658b66,#1655821c 72%,transparent);border:0;border-left:3px solid #4cdef0;padding:7px 9px;min-height:32px;margin-bottom:14px;position:relative}
.directory-panel .heading:after,.monitor-panel>.heading:after{display:block;content:"";position:absolute;right:0;top:0;width:18px;height:2px;background:#40cde8}
.heading small{color:#80acc1;letter-spacing:.8px;font-size:8px}
.tree-search{background:#031a2bab;border-color:#5185a03d;border-radius:2px}
.tree-home{background:linear-gradient(90deg,#0d6b9180,#0b38553d);border-color:#36bce93b}
.tree-filters button{background:#09263b91;border-color:#38678259;border-radius:2px;color:#8db1c9}
.tree-filters button.active{background:linear-gradient(180deg,#12688980,#074562a8);border-color:#3bc4e680;color:#d8f7ff}
.tree-row.selected,.tree-point.selected{background:linear-gradient(90deg,#1784a449,transparent)}
.map-topbar{background:linear-gradient(90deg,#042239ac,#03203942,transparent);border:0;height:34px;padding-left:10px}
.map-topbar b{font-size:14px;border-right-color:#5491af66}
.analysis-section{border-bottom:1px solid #6284a32e;padding-bottom:10px}
.section-title h3{font-size:clamp(12px,.89vw,17px);font-weight:500;letter-spacing:.7px}
.section-title select{background:#06243b90;border:1px solid #44809f55;font-size:10px;color:#a4c8d9;padding:3px 8px}
#warningAnalysis{display:flex;align-items:center;gap:10px;min-height:150px}
.warning-donut{flex:0 0 45%;position:relative;max-width:180px;aspect-ratio:1}
.warning-donut svg{display:block;width:100%;height:100%;overflow:visible;fill:none}
.donut-outer{stroke:#55bad04d;stroke-width:.6;stroke-dasharray:90 14 30 14}
.donut-ticks{stroke:#8acade44;stroke-width:2;stroke-dasharray:1 5}
.donut-base{stroke:#1b4b64;stroke-width:9}
.donut-segment{stroke-width:9;cursor:pointer;transition:opacity .2s,stroke-width .2s;filter:drop-shadow(0 0 3px #56d7ef15)}
.donut-segment:hover{stroke-width:12}.donut-segment.muted{opacity:.25}
.donut-inner{stroke:#51c9d74d;stroke-width:.6;stroke-dasharray:165 118;transform:rotate(30deg);transform-origin:80px 80px}
.donut-copy{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none}
.donut-copy strong{font:600 clamp(28px,2.25vw,42px)/1.1 Arial;color:#e7fcff;text-shadow:0 0 16px #39bace22;font-variant-numeric:tabular-nums}
.donut-copy span{font-size:clamp(10px,.73vw,13px);color:#a7c7d8;margin-top:6px}
.donut-copy small{font-size:8px;letter-spacing:2px;color:#688eaa;margin-top:6px}
.analysis-legend{flex:1;min-width:0}
.analysis-legend .analysis-row{display:grid;grid-template-columns:5px 1fr 22px 36px;align-items:center;gap:7px;padding:9px 2px;font-size:clamp(10px,.75vw,13px);border-bottom:1px solid #729abb13;border-radius:0}
.analysis-row>i{width:4px;height:12px;background:var(--segment);border-radius:1px;box-shadow:0 0 5px color-mix(in srgb,var(--segment) 15%,transparent)}
.analysis-row>span{white-space:nowrap;color:#a9c5d6}
.analysis-row b{font:600 16px Arial;color:#e1f6ff;width:auto}
.analysis-row small{text-align:right;color:#6e9bb4;font:10px Arial}
.analysis-row.selected{outline:0;background:linear-gradient(90deg,#1685a644,#188aab0a)}
.analysis-row:hover{background:#267ba622}
.analysis-note{font-size:9px;color:#6f99af;letter-spacing:.3px;text-align:center;margin:4px 0 0}
.feed-section{padding-top:14px}
.feed-heading{margin-bottom:12px;gap:6px}
.feed-heading .text-link{font-size:10px;color:#91c8dd}
.feed-heading #feedScrollLabel{font-size:8px}
.feed-heading .icon-button{width:19px;height:19px;padding:3px;border-color:#4b7d9555}
.live-dot{width:5px;height:5px;background:#ff7f8d;box-shadow:0 0 6px #ff697033}
.alarm-tabs{display:flex;border-bottom:1px solid #407c9c55;background:#041e3066;flex-shrink:0;margin-bottom:3px}
.alarm-tabs button{flex:1;position:relative;background:none;border:0;border-radius:0;padding:9px 2px 10px;color:#799eb5;font-size:clamp(10px,.78vw,14px);white-space:nowrap}
.alarm-tabs b{display:inline-block;font:11px Arial;margin-left:3px;background:#47718a26;border-radius:3px;padding:2px 5px;color:#a5c5d7;min-width:20px}
.alarm-tabs button[aria-selected="true"]{color:#d9f7ff;background:linear-gradient(0deg,#208bad30,transparent)}
.alarm-tabs button[aria-selected="true"]:after{content:"";position:absolute;bottom:-1px;height:2px;background:#4fd3ed;left:22%;right:22%;box-shadow:0 0 6px #41bde977}
.alarm-tabs button[data-feed-status="未处理"] b{color:#ff9ca6;background:#e8627830}
.alarm-tabs button[data-feed-status="已处理"] b{color:#80d8c2;background:#42c4a822}
.alarm-filter-line{font-size:10px;padding:8px 2px;color:#80d1e7}
.alarm-item{padding:15px 5px;border-bottom:1px solid #6b94af24;background:linear-gradient(90deg,#051d3033,#06263a22);gap:9px}
.feed-main p{color:#84aabf;font-size:10px}
.feed-bottom{color:#89a8bd;font-size:9px}
.feed-title>button{font-weight:500;font-size:clamp(11px,.83vw,15px);color:#daebf6}
.feed-icon{border-radius:4px;background:linear-gradient(145deg,#21759022,#12405711);padding:5px;width:30px;min-width:30px;height:32px;border:1px solid #43b0d521}
.feed-icon.pending{background:linear-gradient(145deg,#ec7a7e15,#8e35420c);border-color:#e67e8b29}
.feed-icon .ui-icon{width:19px;height:19px}
.alarm-phase{border-radius:2px;font-size:9px;padding:3px 5px;border-color:#ff798438;background:#c94e6524;color:#ff9ba6}
.alarm-phase.done{background:#41bbaa15;border-color:#6acabc30;color:#86d9c6}
#feedSummary{border-top-color:#56839933;padding-top:9px}
.map-legend{background:linear-gradient(120deg,#052337ed,#041a2bd1);border-color:#3b9bb96b;box-shadow:0 6px 20px #00111c40;border-radius:4px}
.toolbar{background:#052336d9;border-color:#3b9bb96b;border-radius:4px}
@media(max-width:1500px){#metrics h2 small{display:none}#metrics .metric-card{padding:10px}#metrics .health-body{gap:7px;padding-left:0;padding-right:0}.health-label i{margin-right:4px}.health-stat{gap:3px}.health-numbers{gap:11px}#metrics .health-stat strong{font-size:23px}#metrics .health-stat strong em{font-size:8px;margin-left:2px}.health-orb{width:85px}.hero-value>span{font-size:9px}.metric-breakdown{font-size:8px;gap:2px}.analysis-legend .analysis-row{grid-template-columns:4px 1fr 18px 32px;gap:5px;font-size:10px;padding:8px 1px}.analysis-row small{font-size:9px}.analysis-row b{font-size:14px}#warningAnalysis{min-height:135px;gap:7px}.feed-heading{gap:4px}.feed-heading .text-link{font-size:9px}.alarm-item{padding:13px 2px}.feed-icon{width:24px;min-width:24px;height:27px;padding:4px}.feed-icon .ui-icon{width:15px;height:15px}.feed-bottom{font-size:8px}.alarm-phase{font-size:8px}}
@media(max-height:780px){:root{--ov-metrics:112px}.directory-panel.panel,.monitor-panel{padding-top:10px}.directory-panel .heading,.monitor-panel>.heading{min-height:30px;margin-bottom:10px}.feed-section{padding-top:10px}.feed-heading{margin-bottom:8px}#warningAnalysis{min-height:125px}.warning-donut{max-width:145px}.analysis-note{font-size:8px}.alarm-item{padding:12px 2px}.alarm-tabs button{padding-top:8px;padding-bottom:8px}}
body.compact-preview{--ov-metrics:112px}
.compact-preview #metrics .metric-art{width:62px;max-height:74px}.compact-preview #metrics .scale-metric .metric-art{width:50px}.compact-preview #metrics .metric-body{gap:4px}.compact-preview #metrics strong{font-size:30px}.compact-preview #metrics .scale-metric strong{font-size:26px}.compact-preview #metrics .health-stat strong{font-size:23px}.compact-preview #metrics .orb-copy strong{font-size:25px}.compact-preview .health-orb{width:82px}.compact-preview .metric-baseline{font-size:8px}.compact-preview .health-label{font-size:10px}.compact-preview #metrics h2{font-size:12px}

/* Compact metric strip: the primary total sits left of the supporting counts. */
#metrics .metric-card{padding-top:9px;padding-bottom:8px}
#metrics h2{margin-bottom:4px;min-height:18px}
#metrics .health-body{justify-content:flex-start;gap:16px;padding:0 4px}
.health-orb{width:clamp(70px,5.3vw,92px)}
.health-numbers{border-left:1px solid #659eaf30;padding-left:14px;gap:8px}
#metrics .health-stat strong{font-size:clamp(22px,1.65vw,31px)}
#metrics .orb-copy strong{font-size:clamp(22px,1.65vw,30px)}
.orb-copy>span{margin-top:3px;font-size:8px}
#metrics .metric-art{max-height:76px}
#metrics .scale-metric .metric-art{width:clamp(48px,4.2vw,74px)}
.summary-split{display:grid;grid-template-columns:.85fr 1.15fr;gap:12px;align-items:center;flex:1;min-height:0}
#metrics .summary-total{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;min-width:0;text-align:center}
#metrics .summary-total strong{font-size:clamp(30px,2.45vw,43px)}
.summary-total>span{display:flex;align-items:center;justify-content:center;gap:5px;color:#8eb2c6;font-size:clamp(9px,.7vw,12px);margin-top:7px;white-space:nowrap}
.total-symbol{width:12px;height:12px;filter:invert(83%) sepia(22%) saturate(800%) hue-rotate(130deg);opacity:.8}
.summary-types{display:flex;flex-direction:column;gap:8px;border-left:1px solid #719dae30;padding-left:12px;min-width:0}
.summary-types>div{display:flex;align-items:baseline;justify-content:space-between;gap:6px;font-size:clamp(9px,.73vw,13px);color:#9dbdce;white-space:nowrap}
.summary-types b{font:600 clamp(13px,.98vw,18px) Arial;color:#ccf4ec;font-variant-numeric:tabular-nums}
.vehicle-metric .summary-types b{color:#c5e5ff}
.summary-types small{font:8px 'Microsoft YaHei',sans-serif;color:#7096ab;margin-left:4px}
#metrics .alarm-metric strong{font-size:clamp(28px,2.15vw,39px)}
#metrics .alarm-metric .metric-values{margin-top:1px}
#metrics .alarm-metric .metric-values>button>span{margin-top:4px}
#metrics .disposition-track{margin-top:6px}
#metrics #alarmProgressLabel{margin-top:3px;font-size:8px}
@media(max-width:1500px){#metrics .health-body{gap:9px;padding:0}.health-numbers{padding-left:9px;gap:8px}.health-orb{width:70px}.summary-split{gap:8px;grid-template-columns:.85fr 1.15fr}.summary-types{padding-left:8px;gap:7px}.summary-types>div{font-size:9px;gap:3px}.summary-types b{font-size:13px}.summary-types small{font-size:7px;margin-left:2px}.summary-total>span{font-size:9px;gap:4px}.total-symbol{width:10px;height:10px}}
.compact-preview .health-orb{width:70px}.compact-preview #metrics .orb-copy strong{font-size:22px}.compact-preview #metrics .health-stat strong{font-size:23px}.compact-preview #metrics .summary-total strong{font-size:32px}.compact-preview #metrics .scale-metric .metric-art{width:48px;max-height:65px}
#metrics .summary-types small{display:inline;font-size:8px;color:#7096ab;margin-left:4px}#metrics .summary-types b{white-space:nowrap}