@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700&family=Noto+Sans+SC:wght@400;500;700;900&display=swap');
:root{--bg:#06131e;--panel:#0b202c;--panel2:#0e2936;--line:#1c4650;--line-bright:#286c74;--text:#dcebf0;--muted:#7696a0;--cyan:#23d1d1;--mint:#31e8b2;--amber:#f4bf5d;--red:#f26369;--blue:#5ca8ff;--sans:'Noto Sans SC',sans-serif;--condensed:'Barlow Condensed',sans-serif}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text);font-family:var(--sans);font-size:14px}body{overflow-x:hidden}.dashboard-shell{position:relative;min-height:100dvh;padding:24px 30px 16px;max-width:1920px;margin:0 auto;overflow:hidden;background:radial-gradient(circle at 50% 44%,rgba(12,70,77,.2),transparent 34%),linear-gradient(135deg,#06141f 0%,#071923 58%,#06121b 100%)}.ambient-grid{position:absolute;inset:0;opacity:.21;pointer-events:none;background-image:linear-gradient(rgba(35,209,209,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(35,209,209,.06) 1px,transparent 1px);background-size:80px 80px;mask-image:linear-gradient(to bottom,transparent,black 14%,black 82%,transparent)}.topbar,.kpi-strip,.main-grid,.footer-bar{position:relative;z-index:1}.topbar{height:72px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(35,209,209,.2);padding:0 2px 18px}.brand-block{display:flex;align-items:center;gap:14px}.brand-mark{display:flex;align-items:flex-end;gap:4px;height:26px}.brand-mark span{display:block;width:5px;background:var(--cyan);box-shadow:0 0 14px rgba(35,209,209,.55)}.brand-mark span:nth-child(1){height:13px}.brand-mark span:nth-child(2){height:21px;background:var(--mint)}.brand-mark span:nth-child(3){height:17px}.eyebrow,.panel-kicker{margin:0;color:#5d9da7;letter-spacing:.13em;font-size:10px;font-family:var(--condensed)}h1{font-size:24px;line-height:1;margin:5px 0 0;font-weight:700;letter-spacing:.08em}h2{font-size:16px;letter-spacing:.07em;margin:5px 0 0;font-weight:700}.top-meta{display:flex;align-items:center;gap:20px}.status-chip{display:flex;align-items:center;gap:8px;color:var(--mint);font-size:12px}.pulse-dot,.footer-mode i{width:7px;height:7px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 4px rgba(49,232,178,.1),0 0 14px rgba(49,232,178,.8);animation:pulse 2s infinite}.top-date{display:flex;align-items:baseline;gap:11px;color:var(--muted);font-family:var(--condensed);font-size:12px}.top-date strong{font-size:22px;color:var(--text);letter-spacing:.05em}.icon-button{width:32px;height:32px;border:1px solid var(--line);background:rgba(12,40,49,.7);color:var(--cyan);font-size:21px;cursor:pointer;transition:.2s}.icon-button:hover{border-color:var(--cyan);background:rgba(35,209,209,.13)}.kpi-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:16px 0}.kpi-card{min-height:112px;padding:15px 18px 13px;background:linear-gradient(120deg,rgba(13,40,50,.96),rgba(8,27,38,.72));border:1px solid var(--line);position:relative;overflow:hidden}.kpi-card:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--cyan);box-shadow:0 0 16px var(--cyan)}.kpi-card.accent-mint:before{background:var(--mint);box-shadow:0 0 16px var(--mint)}.kpi-card.accent-amber:before{background:var(--amber);box-shadow:0 0 16px var(--amber)}.kpi-card.accent-red:before{background:var(--red);box-shadow:0 0 16px var(--red)}.kpi-label{color:#86aab1;font-size:12px;display:flex;align-items:center;gap:8px}.kpi-icon{color:var(--cyan);font-size:16px}.accent-mint .kpi-icon{color:var(--mint)}.accent-amber .kpi-icon{color:var(--amber)}.accent-red .kpi-icon{color:var(--red)}.kpi-value{margin-top:6px;font-family:var(--condensed);font-size:39px;line-height:1;color:#eaf9fa;letter-spacing:.025em}.kpi-value em{font-style:normal;font-family:var(--sans);font-size:12px;color:var(--muted);margin-left:4px}.kpi-foot{display:flex;gap:8px;align-items:center;color:#557984;font-size:11px;margin-top:9px}.trend-up{color:var(--mint)}.trend-down{color:var(--amber)}.trend-down.red{color:var(--red)}.sparkline{margin-left:auto;height:19px;display:flex;align-items:flex-end;gap:3px}.sparkline i{display:block;width:4px;background:var(--cyan);opacity:.72}.sparkline i:nth-child(1){height:6px}.sparkline i:nth-child(2){height:12px}.sparkline i:nth-child(3){height:8px}.sparkline i:nth-child(4){height:16px}.sparkline i:nth-child(5){height:11px}.sparkline i:nth-child(6){height:18px}.sparkline i:nth-child(7){height:15px}.sparkline.amber i{background:var(--amber)}.progress-mini{margin-left:auto;width:74px;height:3px;background:#18343e}.progress-mini span{height:100%;display:block;background:var(--mint);box-shadow:0 0 8px var(--mint)}.alert-bars{margin-left:auto;display:flex;align-items:flex-end;gap:4px;height:18px}.alert-bars i{width:5px;background:var(--red);display:block}.alert-bars i:nth-child(1){height:7px}.alert-bars i:nth-child(2){height:11px}.alert-bars i:nth-child(3){height:15px}.alert-bars i:nth-child(4){height:10px}.alert-bars i:nth-child(5){height:17px}.main-grid{display:grid;grid-template-columns:1fr 1.8fr 1fr;gap:12px;min-height:calc(100dvh - 280px)}.column{display:grid;gap:12px;min-width:0}.left-column{grid-template-rows:1fr 1fr}.right-column{grid-template-rows:1fr 1.18fr .73fr}.panel{position:relative;background:linear-gradient(145deg,rgba(11,32,44,.94),rgba(7,24,34,.76));border:1px solid var(--line);overflow:hidden;padding:16px}.panel:after{content:"";position:absolute;width:22px;height:5px;right:0;top:0;border-top:2px solid var(--cyan);border-right:2px solid var(--cyan);opacity:.7}.panel-heading{display:flex;align-items:flex-start;justify-content:space-between}.live-label{font-family:var(--condensed);font-size:11px;letter-spacing:.16em;color:var(--mint);padding:4px 7px;border:1px solid rgba(49,232,178,.35);background:rgba(49,232,178,.08)}.range-label{font-size:10px;color:#638991;padding-top:5px}.bar-chart{height:calc(100% - 85px);min-height:120px;display:flex;align-items:flex-end;gap:10px;padding:20px 10px 0;border-bottom:1px solid #244751;background:repeating-linear-gradient(to bottom,transparent 0,transparent calc(25% - 1px),rgba(48,98,107,.22) calc(25% - 1px),rgba(48,98,107,.22) 25%)}.bar{flex:1;min-width:12px;background:linear-gradient(to top,#17a4b8,#27d1c8);position:relative;animation:barIn .8s ease both;box-shadow:0 0 11px rgba(35,209,209,.2)}.bar:before{content:attr(data-value);position:absolute;left:50%;transform:translateX(-50%);top:-18px;color:#86b8bc;font:11px var(--condensed)}.chart-axis,.axis-labels{display:flex;justify-content:space-between;color:#5c8189;font:11px var(--condensed);padding:6px 7px 0}.chart-note{color:#6c9099;font-size:11px;margin-top:8px;display:flex;align-items:center;gap:6px}.chart-note strong{color:var(--cyan);font:16px var(--condensed)}.legend-dot{width:7px;height:7px;display:inline-block;background:var(--cyan);border-radius:50%;box-shadow:0 0 8px currentColor}.legend-dot.amber{background:var(--amber);color:var(--amber)}.legend-dot.red{background:var(--red);color:var(--red)}.line-chart-wrap{height:calc(100% - 66px);margin-top:14px;min-height:125px}.line-chart{width:100%;height:100%;overflow:visible}.grid-lines{stroke:#1b424c;stroke-width:1;stroke-dasharray:3 4}.trend-line{fill:none;stroke:var(--mint);stroke-width:2;filter:drop-shadow(0 0 4px rgba(49,232,178,.6));stroke-dasharray:450;stroke-dashoffset:450;animation:drawLine 2.2s ease forwards}.trend-area{fill:url(#areaFill)}#trendPoint{fill:var(--mint);stroke:#b6fff0;stroke-width:2;filter:drop-shadow(0 0 6px var(--mint));animation:pointPulse 1.8s infinite}.axis-labels{padding-top:4px}.center-stage{min-width:0;display:flex;flex-direction:column;padding:3px 8px 0}.map-header{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:10px}.map-legend{display:flex;gap:15px;color:#72959d;font-size:11px}.map-legend span{display:flex;align-items:center;gap:6px}.map-wrap{position:relative;flex:1;min-height:390px;border:1px solid rgba(34,95,103,.55);background:radial-gradient(circle at 50% 48%,rgba(18,97,101,.3),transparent 42%),repeating-linear-gradient(0deg,transparent 0,transparent 39px,rgba(37,110,115,.13) 40px),repeating-linear-gradient(90deg,transparent 0,transparent 39px,rgba(37,110,115,.13) 40px);overflow:hidden}.map-wrap:before{content:"";position:absolute;inset:0;background-image:linear-gradient(30deg,transparent 48%,rgba(38,126,127,.17) 49%,transparent 50%),linear-gradient(145deg,transparent 49%,rgba(38,126,127,.12) 50%,transparent 51%);background-size:130px 100px;opacity:.7}.map-radar{position:absolute;border:1px solid rgba(35,209,209,.3);border-radius:50%;left:50%;top:50%;transform:translate(-50%,-50%);aspect-ratio:1}.radar-a{width:38%;animation:radarPulse 4s infinite}.radar-b{width:66%;opacity:.45;animation:radarPulse 4s 1s infinite}.city-map{position:absolute;left:50%;top:50%;width:min(76%,430px);aspect-ratio:1.05;transform:translate(-50%,-48%);filter:drop-shadow(0 0 16px rgba(35,209,209,.16));clip-path:polygon(22% 2%,39% 7%,53% 0,67% 10%,79% 13%,88% 25%,96% 38%,89% 48%,98% 59%,88% 68%,84% 81%,68% 83%,57% 96%,40% 90%,31% 97%,19% 85%,15% 71%,5% 63%,11% 48%,3% 35%,14% 25%);background:rgba(15,127,137,.17)}.district{position:absolute;border:1px solid rgba(78,218,210,.43);background:rgba(27,163,166,.5);transform:rotate(14deg);transition:background .35s}.district:hover{background:rgba(58,215,180,.85)}.d1{left:23%;top:8%;width:22%;height:26%;clip-path:polygon(22% 0,100% 12%,82% 100%,0 77%)}.d2{left:42%;top:7%;width:28%;height:22%;clip-path:polygon(0 20%,74% 0,100% 72%,44% 100%)}.d3{left:66%;top:19%;width:23%;height:23%;clip-path:polygon(12% 0,100% 28%,78% 100%,0 82%)}.d4{left:13%;top:26%;width:27%;height:27%;clip-path:polygon(0 19%,78% 0,100% 70%,35% 100%)}.d5{left:38%;top:28%;width:28%;height:23%;clip-path:polygon(18% 0,100% 22%,78% 100%,0 75%)}.d6{left:63%;top:34%;width:26%;height:23%;clip-path:polygon(0 22%,73% 0,100% 78%,40% 100%)}.d7{left:22%;top:48%;width:25%;height:24%;clip-path:polygon(18% 0,100% 25%,83% 100%,0 76%)}.d8{left:45%;top:48%;width:24%;height:27%;clip-path:polygon(0 10%,82% 0,100% 74%,35% 100%)}.d9{left:68%;top:52%;width:20%;height:28%;clip-path:polygon(12% 0,100% 24%,77% 100%,0 83%)}.d10{left:12%;top:59%;width:25%;height:22%;clip-path:polygon(0 20%,74% 0,100% 72%,34% 100%)}.d11{left:34%;top:70%;width:24%;height:23%;clip-path:polygon(24% 0,100% 16%,78% 100%,0 72%)}.d12{left:56%;top:71%;width:27%;height:20%;clip-path:polygon(0 22%,70% 0,100% 68%,35% 100%)}.d13{left:27%;top:34%;width:20%;height:20%;background:rgba(44,199,161,.65);clip-path:polygon(10% 0,100% 16%,74% 100%,0 70%)}.d14{left:48%;top:37%;width:16%;height:18%;background:rgba(244,191,93,.72);clip-path:polygon(20% 0,100% 23%,73% 100%,0 75%)}.d15{left:53%;top:53%;width:19%;height:21%;background:rgba(244,191,93,.72);clip-path:polygon(0 20%,74% 0,100% 70%,34% 100%)}.d16{left:39%;top:56%;width:17%;height:16%;background:rgba(44,199,161,.7);clip-path:polygon(20% 0,100% 24%,76% 100%,0 70%)}.map-ring{position:absolute;border:1px solid rgba(248,194,90,.8);border-radius:50%;width:28px;height:28px;left:51%;top:42%;transform:translate(-50%,-50%);animation:ring 2.5s infinite}.ring-2{left:65%;top:57%;width:18px;height:18px;border-color:rgba(242,99,105,.85);animation-delay:.8s}.map-pin{position:absolute;border:0;background:transparent;color:#cbe5e8;font:10px var(--sans);cursor:pointer;z-index:2;display:flex;flex-direction:column;align-items:center;gap:2px}.map-pin span{display:block;width:12px;height:12px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:var(--red);box-shadow:0 0 0 4px rgba(242,99,105,.13),0 0 15px rgba(242,99,105,.8);animation:pinPulse 2s infinite}.map-pin b{font-weight:500;background:rgba(5,26,34,.8);padding:2px 5px}.pin-1{left:50%;top:39%}.pin-2{left:67%;top:50%}.pin-2 span,.pin-3 span{background:var(--amber);box-shadow:0 0 0 4px rgba(244,191,93,.13),0 0 15px rgba(244,191,93,.7)}.pin-3{left:43%;top:49%}.pin-4{left:57%;top:68%}.pin-4 span{background:var(--mint);box-shadow:0 0 0 4px rgba(49,232,178,.13),0 0 15px rgba(49,232,178,.7)}.map-label{position:absolute;color:#7fa9af;font-size:11px;z-index:1}.map-label span{display:block;font:11px var(--condensed);color:#43747c;margin-top:3px}.label-north{top:9%;left:48%}.label-east{top:47%;right:7%}.label-west{top:48%;left:5%}.label-south{bottom:12%;left:45%}.map-corner{position:absolute;width:25px;height:25px;opacity:.7}.corner-tl{left:10px;top:10px;border-left:1px solid var(--cyan);border-top:1px solid var(--cyan)}.corner-tr{right:10px;top:10px;border-right:1px solid var(--cyan);border-top:1px solid var(--cyan)}.corner-bl{left:10px;bottom:10px;border-left:1px solid var(--cyan);border-bottom:1px solid var(--cyan)}.corner-br{right:10px;bottom:10px;border-right:1px solid var(--cyan);border-bottom:1px solid var(--cyan)}.map-scale{position:absolute;right:17px;bottom:15px;color:#5c838b;font:10px var(--condensed);display:flex;flex-direction:column;align-items:flex-end;gap:4px}.scale-line{display:block;width:60px;height:4px;border:1px solid #609ba0;border-top:0}.map-footer{display:grid;grid-template-columns:repeat(4,1fr);padding:13px 4px 0;gap:10px}.map-footer div{border-left:2px solid rgba(35,209,209,.35);padding-left:10px}.map-footer span{display:block;color:#638c94;font-size:11px}.map-footer strong{font:24px var(--condensed);color:#e4f2f2;line-height:1.1}.map-footer small{font-size:11px;color:#73969c;margin-left:4px}.personnel-grid{display:grid;grid-template-columns:42% 58%;align-items:center;height:calc(100% - 52px);gap:10px}.donut{width:min(145px,100%);aspect-ratio:1;border-radius:50%;margin:0 auto;background:conic-gradient(var(--mint) 0 52%,var(--cyan) 52% 77%,var(--amber) 77% 88%,#1c5f69 88% 100%);position:relative;transform:rotate(-21deg)}.donut:before{content:"";position:absolute;inset:13%;border-radius:50%;background:var(--panel)}.donut-hole{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;transform:rotate(21deg)}.donut-hole strong{font:31px var(--condensed);color:#eafafa}.donut-hole span{color:#70939c;font-size:10px}.personnel-list{display:flex;flex-direction:column;gap:12px}.personnel-list div{display:grid;grid-template-columns:1fr auto;gap:3px 8px;align-items:center;color:#90adb2;font-size:11px}.personnel-list strong{font:16px var(--condensed);color:var(--text)}.personnel-list i{grid-column:1/-1;height:3px;background:#173943}.personnel-list i b{display:block;height:100%;background:var(--mint);box-shadow:0 0 7px rgba(49,232,178,.5)}.text-button{border:0;background:none;color:var(--cyan);font:11px var(--sans);cursor:pointer;padding:4px 0}.alert-list{display:flex;flex-direction:column;gap:7px;margin-top:14px;overflow:auto;max-height:calc(100% - 55px);scrollbar-width:thin;scrollbar-color:var(--line-bright) transparent}.alert-item{display:grid;grid-template-columns:20px 1fr auto;align-items:center;gap:8px;padding:9px 8px;border-left:2px solid var(--amber);background:rgba(19,50,58,.54);transition:.25s}.alert-item.critical{border-left-color:var(--red)}.alert-item.resolved{opacity:.42}.alert-type{width:17px;height:17px;border:1px solid rgba(244,191,93,.55);border-radius:50%;display:grid;place-items:center;color:var(--amber);font:11px var(--condensed)}.critical .alert-type{border-color:rgba(242,99,105,.65);color:var(--red)}.alert-copy{min-width:0}.alert-copy strong{display:block;color:#c6dde0;font-size:11px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.alert-copy span{display:block;color:#638991;font-size:10px;margin-top:3px}.alert-time{color:#6b8d94;font:11px var(--condensed)}.uptime-list{margin-top:13px;display:flex;flex-direction:column;gap:10px}.uptime-list div{display:grid;grid-template-columns:10px 1fr auto auto;gap:7px;align-items:center;color:#98b4b8;font-size:11px}.service-status{width:7px;height:7px;border-radius:50%;background:var(--mint);box-shadow:0 0 8px var(--mint)}.service-status.amber{background:var(--amber);box-shadow:0 0 8px var(--amber)}.uptime-list strong{font-weight:500;color:var(--mint)}.uptime-list strong.amber-text{color:var(--amber)}.uptime-list em{font:11px var(--condensed);color:#5f8790;font-style:normal}.footer-bar{display:flex;justify-content:space-between;align-items:center;color:#5f838a;font-size:10px;padding:12px 2px 0}.footer-bar strong{font:14px var(--condensed);color:#91b7bc}.footer-mode{display:flex;gap:8px;align-items:center;color:#5e9b91}.footer-mode i{width:5px;height:5px}.toast{position:fixed;left:50%;bottom:22px;transform:translate(-50%,12px);padding:9px 14px;background:#12353e;color:#bfe7e5;border:1px solid var(--line-bright);font-size:12px;opacity:0;pointer-events:none;transition:.25s;z-index:4}.toast.show{opacity:1;transform:translate(-50%,0)}@keyframes pulse{0%,100%{opacity:1}50%{opacity:.45}}@keyframes barIn{from{height:0;opacity:0}to{opacity:1}}@keyframes drawLine{to{stroke-dashoffset:0}}@keyframes pointPulse{0%,100%{r:4;opacity:1}50%{r:6;opacity:.75}}@keyframes radarPulse{0%{opacity:.05;transform:translate(-50%,-50%) scale(.84)}50%{opacity:.5}100%{opacity:.05;transform:translate(-50%,-50%) scale(1.12)}}@keyframes ring{0%,100%{opacity:.75;transform:translate(-50%,-50%) scale(.9)}50%{opacity:0;transform:translate(-50%,-50%) scale(1.7)}}@keyframes pinPulse{0%,100%{transform:rotate(-45deg) scale(1)}50%{transform:rotate(-45deg) scale(1.2)}}@media (max-width:1100px){.dashboard-shell{padding:16px}.main-grid{grid-template-columns:1fr 1.55fr 1fr}.kpi-value{font-size:32px}.top-date{display:none}.map-label{display:none}}@media (max-width:780px){.dashboard-shell{padding:12px;overflow:auto}.topbar{height:auto;padding-bottom:13px}.top-meta{gap:9px}.status-chip{font-size:10px}.top-meta .icon-button{display:none}h1{font-size:18px}.kpi-strip{grid-template-columns:repeat(2,1fr);gap:8px}.kpi-card{min-height:98px;padding:11px}.kpi-value{font-size:29px}.main-grid{grid-template-columns:1fr;min-height:auto}.center-stage{order:-1;padding:0}.map-wrap{min-height:390px}.left-column,.right-column{grid-template-rows:auto}.panel{min-height:240px}.right-column .uptime-panel{min-height:165px}.footer-bar{flex-wrap:wrap;gap:5px}.footer-bar span:nth-child(2){display:none}.map-footer strong{font-size:20px}}
/* High-contrast map treatment for wall displays. */
.city-map{width:min(100%,650px);aspect-ratio:1.3;background:rgba(15,127,137,.22);filter:drop-shadow(0 0 22px rgba(35,209,209,.3));z-index:1}
.district{border-color:rgba(98,235,224,.62);background:rgba(27,163,166,.72);box-shadow:inset 0 0 12px rgba(91,242,221,.12)}

/* Match the reference composition: two balanced panels on each side of the map. */
.right-column{grid-template-rows:1fr 1fr}
.right-column .uptime-panel{display:none}
.right-column .panel{min-height:0}
.map-footer{align-items:start}
.map-footer div{min-height:42px}

/* Reference-inspired geographic base layer under the live markers. */
.city-map{clip-path:polygon(22% 2%,39% 7%,53% 0,67% 10%,79% 13%,88% 25%,96% 38%,89% 48%,98% 59%,88% 68%,84% 81%,68% 83%,57% 96%,40% 90%,31% 97%,19% 85%,15% 71%,5% 63%,11% 48%,3% 35%,14% 25%);background-color:transparent;background-image:url('./china-map-clean2.png');background-repeat:no-repeat;background-position:center;background-size:cover}
.city-map .district{display:none}
.city-map{overflow:visible;clip-path:none;background-image:none}
.vector-map{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 0 12px rgba(35,209,209,.55)) saturate(1.18);animation:mapBreath 5s ease-in-out infinite;z-index:0}
.city-map:after{content:"";position:absolute;left:7%;right:7%;height:2px;top:8%;background:linear-gradient(90deg,transparent,var(--cyan),transparent);box-shadow:0 0 12px var(--cyan);opacity:.65;z-index:1;animation:scanMap 4.2s linear infinite}
.map-pin,.map-ring{z-index:3}
.map-pin[hidden]{display:none}
.trend-line{filter:drop-shadow(0 0 7px rgba(49,232,178,.95))}
.line-chart{filter:drop-shadow(0 0 2px rgba(35,209,209,.3))}
@keyframes mapBreath{0%,100%{filter:drop-shadow(0 0 10px rgba(35,209,209,.42)) saturate(1.08)}50%{filter:drop-shadow(0 0 23px rgba(35,209,209,.78)) saturate(1.3)}}
@keyframes scanMap{0%{top:8%;opacity:0}12%{opacity:.75}88%{opacity:.75}100%{top:88%;opacity:0}}

/* Finish pass: restrained depth and broadcast-display contrast. */
.dashboard-shell{background:radial-gradient(ellipse at 50% 38%,rgba(20,104,111,.18),transparent 42%),linear-gradient(135deg,#06131e 0%,#071c27 58%,#06121b 100%)}
.topbar{box-shadow:0 12px 28px rgba(0,0,0,.18)}
h1{color:#efffff;text-shadow:0 0 18px rgba(35,209,209,.22)}
h2{color:#e2f4f5;text-shadow:0 0 10px rgba(35,209,209,.13)}
.panel{box-shadow:inset 0 1px 0 rgba(109,218,216,.08),0 12px 28px rgba(0,0,0,.13)}
.panel:before{content:"";position:absolute;left:0;top:0;width:28px;height:5px;border-top:2px solid rgba(35,209,209,.85);border-left:2px solid rgba(35,209,209,.85);opacity:.6}
.kpi-card{box-shadow:inset 0 1px 0 rgba(120,236,229,.1),0 8px 22px rgba(0,0,0,.16)}
.kpi-value{ text-shadow:0 0 13px rgba(218,255,255,.12)}
.map-wrap{box-shadow:inset 0 0 36px rgba(14,86,95,.14),0 10px 30px rgba(0,0,0,.13)}
.map-legend span{transition:color .25s}.map-legend span:hover{color:#d9ffff}
.footer-bar{border-top:1px solid rgba(35,209,209,.14)}
.view-flash{position:absolute;left:18px;top:17px;display:flex;align-items:center;gap:9px;color:#77a8ad;font:11px var(--sans);letter-spacing:.04em;z-index:4;pointer-events:none}.view-flash strong{font:18px var(--condensed);color:var(--cyan);letter-spacing:.12em}.view-flash span{padding-left:9px;border-left:1px solid rgba(35,209,209,.35)}
.map-carousel-controls{height:30px;display:flex;align-items:center;justify-content:center;gap:9px;position:relative}.map-carousel-controls button{border:1px solid rgba(35,209,209,.38);background:rgba(9,34,44,.7);color:var(--cyan);width:24px;height:22px;line-height:16px;font:21px var(--condensed);cursor:pointer;transition:.2s}.map-carousel-controls button:hover{background:rgba(35,209,209,.16);border-color:var(--cyan)}#viewDots{display:flex;gap:6px;align-items:center}.view-dot{width:18px!important;height:3px!important;padding:0;background:#1e4d56!important;border:0!important}.view-dot.active{background:var(--cyan)!important;box-shadow:0 0 8px var(--cyan)}.carousel-hint{position:absolute;right:6px;color:#4d747d;font:10px var(--condensed);letter-spacing:.08em}
.city-map.view-beijing,.city-map.view-baoding,.city-map.view-siping,.city-map.view-xushui{transform:translate(-50%,-48%) scale(1)}
.city-map.view-beijing .vector-map{filter:drop-shadow(0 0 18px rgba(242,99,105,.58)) saturate(1.22)}
.city-map.view-baoding .vector-map{filter:drop-shadow(0 0 18px rgba(244,191,93,.58)) saturate(1.18)}
.city-map.view-siping .vector-map{filter:drop-shadow(0 0 22px rgba(49,232,178,.7)) saturate(1.25)}
.city-map.view-xushui .vector-map{filter:drop-shadow(0 0 18px rgba(92,168,255,.6)) saturate(1.16)}
.asia-map-layer{display:none;position:absolute;inset:7% 7% 10%;z-index:1;filter:drop-shadow(0 0 16px rgba(35,209,209,.22))}
.city-map.view-national .vector-map{display:none}
.city-map.view-national .asia-map-layer{display:block}
.asia-vector-map{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:.88;filter:invert(.82) sepia(.62) saturate(2.4) hue-rotate(142deg) brightness(.72) contrast(1.22) drop-shadow(0 0 18px rgba(35,209,209,.42));animation:mapBreath 5s ease-in-out infinite}
.city-map.view-national .asia-region{display:none}
.city-map.view-national .map-pin,.city-map.view-national .map-ring{display:none}
.map-wrap:has(.city-map.view-national) > .map-label{display:none}
.province-coverage{display:none;position:absolute;inset:0;z-index:2;pointer-events:none}
.city-map.view-beijing .province-coverage,.city-map.view-baoding .province-coverage,.city-map.view-siping .province-coverage,.city-map.view-xushui .province-coverage{display:block}
.province-coverage .pr{position:absolute;width:5px;height:5px;border-radius:50%;background:#4be6c3;box-shadow:0 0 0 3px rgba(75,230,195,.12),0 0 9px rgba(75,230,195,.9);animation:provincePulse 3.2s ease-in-out infinite}
.province-coverage .pr:nth-child(3n){background:#5bd8e6;box-shadow:0 0 0 3px rgba(91,216,230,.12),0 0 9px rgba(91,216,230,.9);animation-delay:.8s}
.province-coverage .pr:nth-child(5n){background:#f3bd68;box-shadow:0 0 0 3px rgba(243,189,104,.12),0 0 9px rgba(243,189,104,.85);animation-delay:1.4s}
.p01{left:48%;top:39%}.p02{left:53%;top:41%}.p03{left:57%;top:44%}.p04{left:62%;top:45%}.p05{left:66%;top:48%}.p06{left:70%;top:52%}.p07{left:61%;top:51%}.p08{left:56%;top:50%}.p09{left:52%;top:48%}.p10{left:47%;top:47%}.p11{left:43%;top:46%}.p12{left:39%;top:44%}.p13{left:35%;top:42%}.p14{left:31%;top:40%}.p15{left:27%;top:39%}.p16{left:23%;top:43%}.p17{left:20%;top:47%}.p18{left:26%;top:51%}.p19{left:32%;top:53%}.p20{left:38%;top:55%}.p21{left:44%;top:56%}.p22{left:50%;top:57%}.p23{left:55%;top:58%}.p24{left:60%;top:58%}.p25{left:64%;top:55%}.p26{left:68%;top:57%}.p27{left:72%;top:59%}.p28{left:58%;top:62%}.p29{left:51%;top:63%}.p30{left:45%;top:62%}.p31{left:40%;top:60%}
@keyframes provincePulse{0%,100%{opacity:.72;transform:scale(calc(var(--point-scale,1) * .82))}50%{opacity:1;transform:scale(calc(var(--point-scale,1) * 1.15))}}
.asia-region{position:absolute;display:block;border:1px solid rgba(98,235,224,.62);background:linear-gradient(145deg,rgba(27,163,166,.78),rgba(22,87,111,.62));box-shadow:inset 0 0 18px rgba(91,242,221,.12),0 0 14px rgba(35,209,209,.12);transform:rotate(-13deg)}
.asia-west{left:3%;top:30%;width:42%;height:35%;clip-path:polygon(0 38%,16% 18%,37% 22%,48% 0,69% 13%,92% 28%,100% 57%,83% 75%,54% 71%,36% 100%,12% 83%)}
.asia-south{left:25%;top:55%;width:34%;height:27%;clip-path:polygon(0 14%,33% 0,71% 12%,100% 48%,78% 100%,38% 85%,14% 100%)}
.asia-east{left:47%;top:24%;width:39%;height:39%;clip-path:polygon(0 27%,21% 7%,45% 19%,61% 0,86% 21%,100% 56%,81% 83%,51% 76%,26% 100%,8% 71%)}
.asia-sea{left:61%;top:60%;width:25%;height:18%;clip-path:polygon(0 22%,24% 0,56% 19%,100% 10%,83% 72%,54% 100%,19% 78%)}
.asia-north{left:20%;top:4%;width:57%;height:26%;clip-path:polygon(7% 35%,29% 0,58% 13%,79% 4%,100% 35%,83% 79%,52% 100%,25% 77%,0 86%)}
.asia-node{position:absolute;z-index:2;padding:4px 7px;border:1px solid rgba(91,216,230,.4);background:rgba(4,26,36,.88);color:#d9f2f2;font:10px var(--sans);white-space:nowrap}
.asia-node:before{content:"";display:inline-block;width:6px;height:6px;margin-right:5px;border-radius:50%;background:var(--amber);box-shadow:0 0 9px var(--amber)}
.asia-node strong{margin-left:5px;color:var(--cyan);font:11px var(--condensed)}
.node-japan{left:72%;top:35%}.node-korea{left:66%;top:44%}.node-india{left:43%;top:62%}.node-sea{left:63%;top:73%}.node-west{left:11%;top:37%}
.city-map.view-beijing .map-label,.city-map.view-baoding .map-label,.city-map.view-siping .map-label,.city-map.view-xushui .map-label{opacity:.78}
.alert-empty{padding:24px 8px;color:#6b969d;text-align:center;font-size:12px;border:1px dashed rgba(35,209,209,.2);background:rgba(15,55,63,.2)}

/* Homepage hero polish: a restrained command-center HUD layer. */
.ambient-grid{animation:gridDrift 22s linear infinite}
.dashboard-shell:before{content:"";position:absolute;left:4%;right:4%;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(35,209,209,.9),transparent);box-shadow:0 0 18px rgba(35,209,209,.8);opacity:.5;animation:topSweep 7s ease-in-out infinite}
.topbar:after{content:"";position:absolute;left:0;right:0;bottom:8px;height:1px;background:linear-gradient(90deg,transparent 4%,rgba(35,209,209,.2) 18%,rgba(35,209,209,.75) 50%,rgba(35,209,209,.2) 82%,transparent 96%);transform-origin:left;animation:headerSweep 5s ease-in-out infinite}
.brand-mark span{animation:markPulse 2.8s ease-in-out infinite}
.brand-mark span:nth-child(2){animation-delay:.35s}.brand-mark span:nth-child(3){animation-delay:.7s}
.kpi-card{isolation:isolate}
.kpi-card:after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 25%,rgba(160,255,245,.08) 48%,transparent 64%);transform:translateX(-120%);animation:cardSheen 8s ease-in-out infinite;pointer-events:none;z-index:-1}
.kpi-card:nth-child(2):after{animation-delay:1.5s}.kpi-card:nth-child(3):after{animation-delay:3s}.kpi-card:nth-child(4):after{animation-delay:4.5s}
.panel:after{animation:cornerBlink 3.6s ease-in-out infinite}
.panel-kicker{position:relative}.panel-kicker:after{content:"";display:inline-block;width:18px;height:1px;margin-left:8px;vertical-align:middle;background:var(--cyan);box-shadow:0 0 8px var(--cyan);animation:kickerPulse 2.4s ease-in-out infinite}
.map-corner{animation:cornerGlow 2.8s ease-in-out infinite}
.corner-tr{animation-delay:.3s}.corner-br{animation-delay:.6s}.corner-bl{animation-delay:.9s}
@keyframes gridDrift{from{background-position:0 0,0 0}to{background-position:80px 80px,-80px 80px}}
@keyframes topSweep{0%,100%{opacity:.15;transform:scaleX(.45)}50%{opacity:.75;transform:scaleX(1)}}
@keyframes headerSweep{0%,100%{opacity:.15;transform:scaleX(.35)}50%{opacity:.8;transform:scaleX(1)}}
@keyframes markPulse{0%,100%{filter:brightness(.8);transform:scaleY(.94)}50%{filter:brightness(1.5);transform:scaleY(1.04)}}
@keyframes cardSheen{0%,45%{transform:translateX(-120%)}68%,100%{transform:translateX(120%)}}
@keyframes cornerBlink{0%,100%{opacity:.5}50%{opacity:1;box-shadow:0 0 10px rgba(35,209,209,.35)}}
@keyframes kickerPulse{0%,100%{opacity:.35;transform:scaleX(.7)}50%{opacity:1;transform:scaleX(1)}}
@keyframes cornerGlow{0%,100%{opacity:.55}50%{opacity:1;filter:drop-shadow(0 0 5px var(--cyan))}}
@media (prefers-reduced-motion:reduce){.ambient-grid,.dashboard-shell:before,.topbar:after,.brand-mark span,.kpi-card:after,.panel:after,.panel-kicker:after,.map-corner,.vector-map,.city-map:after{animation:none!important}}

/* Keep the command board inside short TV/browser viewports instead of forcing page scroll. */
@media (min-width:1101px) and (max-height:760px){
  .dashboard-shell{height:100dvh;min-height:0;padding:12px 24px 8px}
  .topbar{height:56px;padding-bottom:10px}
  .kpi-strip{margin:10px 0}
  .kpi-card{min-height:88px;padding:10px 14px}
  .main-grid{height:calc(100dvh - 210px);min-height:0}
  .left-column,.right-column{min-height:0;grid-template-rows:minmax(0,1fr) minmax(0,1fr)}
  .panel{min-height:0;padding:12px}
  .chart-panel .bar-chart,.trend-panel .line-chart-wrap{min-height:0}
  .map-wrap{min-height:0}
  .city-map{width:100%;height:100%;aspect-ratio:auto}
  .map-carousel-controls{height:24px}
  .map-footer{padding-top:8px}
  .footer-bar{padding-top:6px}
}

/* Trend panel redesign: larger reading area and a stronger broadcast chart. */
.trend-panel{padding:20px 18px 14px;background:linear-gradient(155deg,rgba(12,38,49,.97),rgba(6,25,36,.9))}
.trend-panel .panel-heading{padding:0 10px}
.trend-panel .panel-kicker{font-size:12px;letter-spacing:.16em}
.trend-panel h2{font-size:23px;letter-spacing:.05em;margin-top:8px}
.trend-panel .range-label{font-size:14px;padding-top:10px;color:#82aeb4}
.trend-panel .line-chart-wrap{height:calc(100% - 120px);margin:18px 10px 0;min-height:150px}
.trend-panel .line-chart{overflow:visible}
.trend-panel .grid-lines{stroke:#1c5962;stroke-width:1.5;stroke-dasharray:2 8;opacity:.9}
.trend-panel .trend-area{fill:url(#areaFill);opacity:.86}
.trend-panel .trend-line{stroke:#35edbe;stroke-width:3.3;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 6px rgba(53,237,190,.92));stroke-dasharray:450;stroke-dashoffset:450;animation:drawLine 2.2s ease forwards}
.trend-panel #trendPoint{r:6;stroke:#c8fff4;stroke-width:3;filter:drop-shadow(0 0 8px #35edbe)}
.trend-panel .axis-labels{font-size:14px;padding:7px 10px 0;color:#709ca4}

/* Geographic marker positions projected onto the 73E-135E / 18N-54N map view. */
.pin-1{left:70%;top:40.4%}
.pin-2{left:70.5%;top:40.9%}
.pin-3{left:68.5%;top:42.8%}
.pin-4{left:82.8%;top:32.1%}
.pin-1 b{transform:translate(-20px,-8px)}
.pin-2 b{transform:translate(18px,10px)}
.pin-3 b{transform:translate(-22px,17px)}
.pin-4 b{transform:translate(10px,-6px)}

/* Keep animated bars visible after their measured height is applied inline. */
.bar{animation:barFade .8s ease both}
@keyframes barFade{from{opacity:0;transform:scaleY(.08);transform-origin:bottom}to{opacity:1;transform:scaleY(1);transform-origin:bottom}}

/* Keep the central map proportional to the viewport instead of stretching the whole board. */
@media (min-width:781px){
  .main-grid{min-height:0;align-items:start}
  .center-stage{height:auto;max-height:none;align-self:start}
  .map-wrap{height:clamp(320px,43dvh,430px);min-height:0;flex:none}
  .map-carousel-controls{height:24px}
  .map-footer{padding-top:8px}
}
@media (min-width:781px) and (max-height:760px){
  .center-stage{height:calc(100dvh - 255px)}
  .map-wrap{height:clamp(280px,43dvh,390px)}
}

.center-insight{display:flex;flex:none;min-height:0;flex-direction:column;margin-top:18px;padding:14px 2px 4px;border-top:1px solid rgba(35,209,209,.16)}
.insight-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.insight-heading h3{margin:5px 0 0;color:#dceff0;font-size:15px;letter-spacing:.04em}
.insight-heading>span{color:#6ea0a6;font:11px var(--condensed);padding-bottom:2px}
.insight-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:16px}
.insight-grid>div{min-width:0}
.insight-grid span{display:block;color:#73979e;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.insight-grid strong{display:block;margin-top:5px;color:#e2f5f5;font:22px var(--condensed)}
.insight-grid small{font:10px var(--sans);color:#73979e}
.insight-grid i{display:block;height:3px;margin-top:7px;background:#173943}
.insight-grid i b{display:block;height:100%;background:linear-gradient(90deg,var(--cyan),var(--mint));box-shadow:0 0 8px rgba(35,209,209,.35)}
.insight-note{margin:15px 0 0;color:#567d85;font-size:10px;line-height:1.6}
.province-index{display:flex;flex:none;min-height:0;flex-direction:column;margin-top:16px;padding:12px 14px;border:1px solid rgba(35,209,209,.13);background:linear-gradient(120deg,rgba(12,49,59,.34),rgba(5,28,38,.22))}
.province-index-title{display:flex;justify-content:space-between;align-items:center;color:#82aeb4;font-size:11px}.province-index-title strong{color:var(--mint);font:18px var(--condensed)}
.region-summary{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;margin-top:12px;padding:8px 10px;border-top:1px solid rgba(35,209,209,.12);border-bottom:1px solid rgba(35,209,209,.12)}
.region-summary span{color:#7fa9af;font-size:10px;white-space:nowrap}.region-summary b{display:block;margin-top:3px;color:#dcf7f2;font:16px var(--condensed)}
.province-index-list{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:7px 10px;align-content:start;margin-top:12px}
.province-index-list span{position:relative;padding-left:10px;color:#a9c6ca;font-size:10px;white-space:nowrap}.province-index-list span:before{content:"";position:absolute;left:0;top:50%;width:5px;height:5px;border-radius:50%;background:var(--mint);box-shadow:0 0 7px var(--mint);transform:translateY(-50%)}.province-index-list span b{margin-left:3px;color:#d7f3ef;font:11px var(--condensed)}
@media (max-width:780px){.center-insight{margin-top:14px}.insight-grid{gap:10px}.insight-grid strong{font-size:19px}.insight-note{margin-top:12px}.region-summary{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.province-index-list{grid-template-columns:repeat(4,minmax(0,1fr));gap:7px 8px}}

/* Keep the left rail content-led instead of stretching charts to viewport height. */
@media (min-width:781px){
  .left-column{grid-template-rows:auto auto;align-content:start}
  .left-column>.chart-panel{min-height:0}
  .left-column>.chart-panel:first-child .bar-chart{height:220px;min-height:0}
  .left-column>.chart-panel:first-child{padding-bottom:14px}
  .trend-panel{height:auto;min-height:300px;padding-bottom:15px}
}
.trend-panel .panel-heading{margin-bottom:14px}
.asia-country-index{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px 18px;padding:4px 2px 0}
.country-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 8px;align-items:center;min-width:0;color:#9ab9bd;font-size:11px}
.country-row span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.country-row strong{color:#dff7f3;font:16px var(--condensed);font-weight:600}
.country-row i{grid-column:1/-1;height:3px;background:#173943;overflow:hidden}
.country-row i b{display:block;height:100%;background:linear-gradient(90deg,var(--cyan),var(--mint));box-shadow:0 0 7px rgba(49,232,178,.45)}
.country-index-total{display:flex;align-items:center;gap:7px;margin-top:15px;padding-top:11px;border-top:1px solid rgba(35,209,209,.16);color:#6d959b;font-size:11px}
.country-index-total .legend-dot.mint{background:var(--mint);color:var(--mint)}
.country-index-total strong{margin-left:auto;color:var(--cyan);font:20px var(--condensed)}
.country-index-total small{color:#6d959b}
@media (max-width:780px){
  .left-column>.chart-panel:first-child .bar-chart{height:190px}
  .trend-panel{min-height:0}
  .asia-country-index{gap:8px 12px}
}

/* Audit fixes: fit the command board on common desktop displays without hiding data. */
@media (min-width:1101px){
  .asia-country-index{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px 12px}
  .country-row{font-size:10px}
  .country-row strong{font-size:14px}
  .country-index-total{margin-top:10px;padding-top:8px}
  .center-insight{margin-top:12px;max-height:285px;overflow:auto}
  .province-index{margin-top:10px;padding:9px 11px}
  .region-summary{margin-top:8px;padding:6px 8px}
  .province-index-list{margin-top:8px;gap:5px 8px}
  .insight-grid{margin-top:10px;gap:12px}
}

/* Mobile controls remain easy to tap while their visual marks stay compact. */
.map-carousel-controls button{width:32px;height:32px;line-height:26px}
.map-carousel-controls{height:34px}
.carousel-hint{pointer-events:none}
.view-dot{position:relative;width:26px!important;height:32px!important;background:transparent!important;box-shadow:none!important}
.view-dot.active{background:transparent!important;box-shadow:none!important}
.view-dot:before{content:"";position:absolute;left:5px;right:5px;top:50%;height:3px;background:#1e4d56;transform:translateY(-50%)}
.view-dot.active:before{background:var(--cyan);box-shadow:0 0 8px var(--cyan)}
@media (max-width:780px){
  .map-header{align-items:flex-start;gap:10px;flex-direction:column}
  .map-header h2{max-width:100%;line-height:1.3}
  .map-legend{width:100%;justify-content:flex-start;gap:12px;flex-wrap:wrap}
  .map-carousel-controls{height:64px;gap:8px;padding-bottom:16px}
  .map-carousel-controls button{width:44px!important;height:44px!important}
  .carousel-hint{right:0;bottom:0}
  .text-button{min-height:44px;padding:8px 0}
}
@media (prefers-reduced-motion:reduce){
  .map-carousel-controls button{transition:none}
}

@media (min-width:1101px) and (max-height:1000px){
  .dashboard-shell{padding:14px 24px 10px}
  .topbar{height:58px;padding-bottom:10px}
  .kpi-strip{margin:10px 0}
  .kpi-card{min-height:92px;padding:11px 15px 9px}
  .kpi-value{font-size:33px}
  .kpi-foot{margin-top:6px}
  .left-column,.right-column{height:calc(100dvh - 237px);min-height:0;grid-template-rows:repeat(2,minmax(0,1fr))}
  .left-column>.panel,.right-column>.panel{min-height:0}
  .trend-panel{min-height:0;overflow:auto}
  .alerts-panel .alert-list{max-height:calc(100% - 52px)}
  .map-wrap{height:295px}
  .center-insight{max-height:140px;margin-top:8px;padding-top:8px}
  .insight-heading h3{font-size:13px}
  .insight-grid{margin-top:7px}
  .insight-grid strong{font-size:18px}
  .province-index{margin-top:7px}
  .footer-bar{padding-top:7px}
}