*{box-sizing:border-box}
:root{--bg:#031126;--panel:#041c39;--line:#0d84d0;--line-deep:#0a5c9a;--cyan:#4fddff;--blue:#1494ff;--text:#e8f7ff;--muted:#8ab6d7;--green:#3ee8b2;--red:#ff646f;--orange:#ffb14a;--purple:#8b6bff}
html,body{width:100%;height:100%;margin:0;background:#010916;color:var(--text);font-family:"Microsoft YaHei","PingFang SC","Noto Sans CJK SC",Arial,sans-serif;overflow:hidden}
body{display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at 50% 36%,#0c2b55 0,#041225 52%,#01050d 100%)}
body.modal-open{overflow:hidden}
.dashboard{position:relative;width:min(100vw,177.7778vh);height:min(100vh,56.25vw);aspect-ratio:16/9;padding:.52%;display:grid;grid-template-rows:6.5% 9.8% minmax(0,1fr) 17.2%;gap:.54%;background:linear-gradient(145deg,rgba(3,22,49,.985),rgba(1,11,28,.995));border:1px solid #0e6fb2;box-shadow:0 0 38px rgba(0,135,255,.24),inset 0 0 40px rgba(0,115,220,.11);overflow:hidden}
.dashboard:before,.dashboard:after{content:"";position:absolute;pointer-events:none}
.dashboard:before{inset:3px;border:1px solid rgba(48,162,255,.13)}
.dashboard:after{left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,transparent,#1eb9ff,#7ae8ff,#1eb9ff,transparent);box-shadow:0 0 14px #07a9ff}
.topbar{display:grid;grid-template-columns:18% 1fr 27% 12.5%;align-items:center;gap:.55%;padding:.15% .35%;border-bottom:1px solid rgba(20,136,214,.28);background:linear-gradient(180deg,rgba(2,22,47,.96),rgba(2,18,39,.66));position:relative}
.topbar:before,.topbar:after{content:"";position:absolute;top:50%;width:8%;height:1px;background:linear-gradient(90deg,transparent,#1794df);opacity:.6}
.topbar:before{left:18.5%}.topbar:after{right:40.5%;transform:scaleX(-1)}
.nav{display:flex;align-items:center;gap:4px;min-width:0}.nav-right{justify-content:flex-end}
.nav-item{appearance:none;border:0;background:transparent;color:#a2c8e8;padding:.52em .78em;font-size:clamp(7px,.63vw,13px);white-space:nowrap;cursor:pointer;position:relative;transition:.2s}
.nav-item:after{content:"";position:absolute;left:12%;right:12%;bottom:-2px;height:2px;background:transparent;transition:.2s}
.nav-item:hover,.nav-item.active{color:#fff;text-shadow:0 0 10px rgba(75,211,255,.85)}
.nav-item.active{background:linear-gradient(180deg,rgba(15,139,220,.28),rgba(2,50,88,.02));clip-path:polygon(0 0,92% 0,100% 50%,92% 100%,0 100%,8% 50%)}
.nav-item.active:after{background:#2fd4ff;box-shadow:0 0 10px #24caff}
.brand{text-align:center;min-width:0}
.brand-title{font-weight:800;letter-spacing:.12em;font-size:clamp(18px,1.9vw,37px);line-height:1.05;text-shadow:0 0 14px rgba(51,190,255,.4)}
.brand-sub{font-size:clamp(5px,.42vw,8px);letter-spacing:.17em;color:#68b9eb;margin-top:2px;white-space:nowrap}
.top-actions{display:flex;align-items:flex-start;justify-content:flex-end;gap:.4em;white-space:nowrap}
.demo-tag{font-size:clamp(6px,.45vw,9px);padding:.28em .56em;color:#ffca6f;border:1px solid rgba(255,182,71,.54);border-radius:3px;background:rgba(96,61,9,.2);margin-top:.1em}
.clock-box{text-align:right;font-size:clamp(5px,.44vw,8px);line-height:1.15;color:#cce7f9}
#clockTime{font-size:clamp(7px,.55vw,11px);font-weight:700;color:#eaf8ff}
#clockWeek{color:#9ec2dc}
.fullscreen{border:1px solid #176ca9;background:rgba(0,113,196,.18);color:#9bdfff;border-radius:3px;font-size:clamp(10px,.8vw,15px);cursor:pointer;width:2.05em;height:2.05em;margin-top:-1px}
.kpi-row{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:.42%;min-height:0}
.kpi-card{display:flex;align-items:center;gap:7%;min-width:0;padding:4.4% 5%;border:1px solid #0d7dc3;border-radius:5px;background:linear-gradient(145deg,rgba(7,45,86,.92),rgba(2,20,43,.97));box-shadow:inset 0 0 16px rgba(0,147,255,.11),0 0 9px rgba(0,107,208,.07);position:relative;overflow:hidden}
.kpi-card:before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,#72ebff,transparent)}
.kpi-icon{width:22%;aspect-ratio:1;border:1px solid rgba(75,206,255,.36);border-radius:8px;position:relative;background:radial-gradient(circle at 45% 32%,rgba(99,220,255,.2),rgba(3,38,70,.38) 58%,rgba(3,27,49,.68) 100%);box-shadow:inset 0 0 12px rgba(0,163,255,.12),0 0 12px rgba(0,131,255,.08)}
.kpi-icon:before,.kpi-icon:after{content:"";position:absolute;border-color:#6ce4ff;box-sizing:border-box}
.kpi-icon.doc:before{left:28%;top:18%;width:42%;height:62%;border:2px solid #6ce4ff;border-radius:2px}
.kpi-icon.doc:after{left:34%;top:34%;width:30%;height:0;border-top:2px solid #6ce4ff;box-shadow:0 8px 0 #6ce4ff,0 16px 0 #6ce4ff}
.kpi-icon.ship:before{left:22%;bottom:24%;width:56%;height:16%;background:#6ce4ff;clip-path:polygon(8% 0,100% 0,84% 100%,0 100%)}
.kpi-icon.ship:after{left:35%;top:18%;width:28%;height:28%;border-left:2px solid #6ce4ff;border-bottom:2px solid #6ce4ff;border-right:2px solid #6ce4ff;border-top:none;border-radius:2px 2px 0 0;box-shadow:-9px 25px 0 -7px #6ce4ff,0 25px 0 -7px #6ce4ff,9px 25px 0 -7px #6ce4ff}
.kpi-icon.plane:before{left:18%;top:47%;width:62%;height:2px;background:#6ce4ff;transform:rotate(-22deg)}
.kpi-icon.plane:after{left:40%;top:24%;width:20%;height:36%;border-left:2px solid #6ce4ff;border-right:2px solid transparent;border-top:2px solid transparent;border-bottom:2px solid transparent;transform:rotate(-22deg)}
.kpi-icon.train:before{left:26%;top:22%;width:48%;height:42%;border:2px solid #6ce4ff;border-radius:6px 6px 10px 10px}
.kpi-icon.train:after{left:30%;top:31%;width:40%;height:10%;background:#6ce4ff;box-shadow:0 18px 0 -2px rgba(108,228,255,.4),-12px 34px 0 -3px #6ce4ff,18px 34px 0 -3px #6ce4ff}
.kpi-icon.truck:before{left:22%;top:34%;width:34%;height:22%;border:2px solid #6ce4ff}
.kpi-icon.truck:after{left:54%;top:39%;width:18%;height:17%;border:2px solid #6ce4ff;border-left:none;box-shadow:-26px 24px 0 -4px #6ce4ff,2px 24px 0 -4px #6ce4ff}
.kpi-icon.warehouse:before{left:26%;top:23%;width:48%;height:48%;border:2px solid #6ce4ff;border-top:none}
.kpi-icon.warehouse:after{left:24%;top:16%;width:52%;height:24%;border-top:2px solid #6ce4ff;border-left:2px solid #6ce4ff;border-right:2px solid #6ce4ff;transform:skewY(-24deg)}
.kpi-icon.finance:before{left:28%;top:20%;width:44%;height:44%;border:2px solid #6ce4ff;border-radius:50%}
.kpi-icon.finance:after{left:34%;top:30%;width:28%;height:14%;border-top:2px solid #6ce4ff;border-bottom:2px solid #6ce4ff;box-shadow:0 12px 0 rgba(108,228,255,.6)}
.kpi-icon.clock:before{left:26%;top:20%;width:48%;height:48%;border:2px solid #6ce4ff;border-radius:50%}
.kpi-icon.clock:after{left:48%;top:28%;width:2px;height:22%;background:#6ce4ff;box-shadow:8px 10px 0 -1px #6ce4ff;transform-origin:bottom center;transform:rotate(0deg)}
.kpi-label{font-size:clamp(7px,.58vw,11px);color:#a8d6f5;white-space:nowrap}
.kpi-value{font-size:clamp(13px,1.15vw,23px);font-weight:800;white-space:nowrap;margin-top:1px;text-shadow:0 0 8px rgba(56,174,255,.35)}
.kpi-value small{font-size:.48em;color:#b7dbf6;font-weight:500}
.kpi-trend{font-size:clamp(6px,.48vw,9px);margin-top:2px}.up{color:#ff7474}.down{color:#40e2b2}
.main-grid{display:grid;grid-template-columns:26.4% minmax(0,1fr) 26.4%;gap:.52%;min-height:0}
.left-column,.right-column,.center-column{display:grid;gap:.9%;min-height:0}.left-column{grid-template-rows:36.5% 30.3% 33.2%}.center-column{grid-template-rows:minmax(0,1fr)}.right-column{grid-template-rows:27% 24% 20% 29%}
.panel{position:relative;min-height:0;overflow:hidden;border:1px solid #0c75bc;border-radius:5px;background:linear-gradient(145deg,rgba(5,30,62,.97),rgba(2,15,38,.99));box-shadow:inset 0 0 18px rgba(0,117,220,.1),0 0 9px rgba(0,110,210,.06)}
.panel:before{content:"";position:absolute;inset:0;border:1px solid rgba(91,187,255,.05);pointer-events:none}
.panel-title{height:17%;display:flex;align-items:center;justify-content:space-between;padding:0 3.2%;font-size:clamp(9px,.72vw,14px);font-weight:700;color:#e5f6ff;border-bottom:1px solid rgba(16,126,197,.22);white-space:nowrap;background:linear-gradient(180deg,rgba(4,47,84,.22),rgba(2,20,43,0))}
.unit,.more,.live-dot{font-size:clamp(6px,.45vw,9px);font-weight:400;color:#76b4df}
.live-dot:before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:#3be5b1;box-shadow:0 0 8px #3be5b1;margin-right:4px}
.metric-line{display:flex;align-items:baseline;gap:3%;padding:1% 3.5% 0}.metric-line strong{font-size:clamp(23px,2.15vw,42px);font-weight:800}.positive{font-size:clamp(10px,.84vw,16px);color:#ff666c;font-weight:700}
.chart-wrap{height:66%;padding:0 2% 1%}.line-chart{width:100%;height:100%}.grid-lines path{stroke:rgba(73,147,198,.21);stroke-width:.7;fill:none;stroke-dasharray:2 3}.axis-labels{fill:#7caed3;font-size:9px}.chart-area{fill:url(#chartFill)}.chart-line{fill:none;stroke:#55cfff;stroke-width:2.2;filter:drop-shadow(0 0 4px #159fff)}.chart-dot{fill:#dffaff;stroke:#31baff;stroke-width:2;filter:drop-shadow(0 0 5px #00aaff)}
.bar-list{padding:3.4% 3.5% 0;display:grid;gap:9%;height:71%}.bar-row{display:grid;grid-template-columns:40% 1fr 14%;gap:2%;align-items:center;font-size:clamp(6px,.54vw,10px);white-space:nowrap}.bar-row>span{overflow:hidden;text-overflow:ellipsis;color:#d5eaff}.bar-row>b{text-align:right;font-size:clamp(7px,.58vw,11px);font-weight:600}.bar-track{height:clamp(8px,.82vw,14px);background:#071a36;border-radius:2px;overflow:hidden;border:1px solid rgba(42,123,187,.18)}.bar-track i{display:block;height:100%;background:linear-gradient(90deg,#1379dc,#42caff);box-shadow:0 0 8px rgba(28,167,255,.5);border-radius:2px}.bar-track i.teal{background:linear-gradient(90deg,#11a5b6,#50e1d2)}.bar-track i.orange{background:linear-gradient(90deg,#e17b29,#ffc35e)}.bar-track i.purple{background:linear-gradient(90deg,#7754ce,#b08cff)}.bar-axis{display:flex;justify-content:space-between;padding:0 3% 0 40%;font-size:clamp(5px,.4vw,8px);color:#6d9bc2}
.data-table{width:95%;margin:2% auto 0;border-collapse:collapse;font-size:clamp(6px,.53vw,10px);text-align:center;white-space:nowrap}.data-table th{font-weight:500;color:#72b6e7;background:rgba(9,63,105,.35);padding:1.7% .5%}.data-table td{padding:2% .5%;border-bottom:1px solid rgba(46,112,160,.16);color:#d5eaff}.data-table tbody tr:nth-child(even){background:rgba(12,57,92,.18)}.status{font-style:normal;font-weight:700}.normal{color:#36e2aa}.warning,.danger{color:#ff626d!important}
.map-panel{display:grid;grid-template-rows:7% minmax(0,1fr)}
.map-topline{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:1%;padding:0 1.2%;font-size:clamp(6px,.48vw,9px);color:#8fc6eb;border-bottom:1px solid rgba(16,126,197,.18)}
.map-chip{padding:2px 7px;border:1px solid rgba(29,155,235,.38);border-radius:3px;background:rgba(0,94,160,.18);color:#a9e4ff;justify-self:start}.map-chip.muted{color:#739fbd;border-color:rgba(29,111,170,.22);justify-self:end}
.map-tools{display:flex;align-items:center;justify-content:center;gap:5px}.map-action{border:1px solid rgba(38,158,226,.55);border-radius:3px;padding:3px 8px;background:rgba(3,37,72,.82);color:#aee8ff;font:inherit;font-size:clamp(6px,.47vw,9px);white-space:nowrap;cursor:pointer;transition:all .18s}.map-action.risk{border-color:rgba(255,99,112,.5);color:#ffb2b8}.map-action.policy{border-color:rgba(54,174,255,.5)}.map-action.customs{border-color:rgba(255,176,75,.5);color:#ffd08a}.map-action:hover,.map-action:focus-visible{outline:none;color:#fff;border-color:#55d9ff;background:rgba(0,116,190,.42);box-shadow:0 0 10px rgba(42,193,255,.25)}
.map-image-wrap{position:relative;min-height:0;overflow:hidden;background:#03152b}.map-image-wrap>img{width:100%;height:100%;object-fit:cover;object-position:center 52%;display:block;filter:saturate(1.14) contrast(1.03)}.map-image-wrap:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,15,35,.04),transparent 25%,transparent 75%,rgba(0,10,25,.07));pointer-events:none}
.map-flow{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none}.flow{fill:none;stroke-width:2.4;stroke-dasharray:8 7;animation:routeMove 10s linear infinite;filter:drop-shadow(0 0 4px currentColor)}.flow-blue{stroke:#43d5ff}.flow-orange{stroke:#ffb452;animation-duration:11s}.flow-green{stroke:#48e4b4;animation-duration:13s}.flow-yellow{stroke:#f7dd66;animation-duration:14s}
@keyframes routeMove{to{stroke-dashoffset:-120}}
.map-pulse{position:absolute;width:12px;height:12px;border-radius:50%;z-index:3;background:#d8faff;border:2px solid #25bfff;box-shadow:0 0 0 5px rgba(32,181,255,.16),0 0 18px #1dbdff;animation:pulse 2.3s ease-out infinite}.pulse-a{left:79%;top:27%}.pulse-b{left:42%;top:63%;animation-delay:.7s}.pulse-c{left:23%;top:42%;animation-delay:1.2s}@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(32,181,255,.55),0 0 14px #1dbdff}100%{box-shadow:0 0 0 18px rgba(32,181,255,0),0 0 14px #1dbdff}}
.map-marker{position:absolute;z-index:5;width:34px;height:34px;border:0;border-radius:50%;background:transparent;cursor:pointer;transform:translate(-50%,-50%)}.map-marker:before{content:"!";position:absolute;inset:8px;border-radius:50%;display:grid;place-items:center;background:rgba(255,67,78,.94);border:1px solid #ffd8dc;color:#fff;font-size:12px;font-weight:800;box-shadow:0 0 10px rgba(255,56,73,.85)}.map-marker:after{content:"";position:absolute;inset:2px;border:1px solid rgba(255,95,105,.9);border-radius:50%;animation:markerRipple 1.8s ease-out infinite}.map-marker:hover:before,.map-marker:focus-visible:before{background:#ff283f;box-shadow:0 0 18px #ff394f}.map-marker:focus-visible{outline:2px solid #fff;outline-offset:2px}.marker-west{left:24%;top:43%}.marker-north{left:35%;top:16%}.marker-east{left:48%;top:57%}@keyframes markerRipple{0%{transform:scale(.65);opacity:.95}100%{transform:scale(1.45);opacity:0}}
.map-legend{position:absolute;right:2.2%;bottom:2.2%;z-index:4;padding:6px 10px;border:1px solid rgba(39,161,234,.5);border-radius:4px;background:rgba(2,20,44,.88);display:grid;gap:6px;font-size:clamp(6px,.48vw,9px);color:#e2f5ff}.map-legend>div{display:flex;align-items:center;gap:6px;white-space:nowrap}.legend-line{width:22px;height:0;border-top:2px dashed #42d4ff}.legend-line.air{border-color:#ffb34e}.legend-line.rail{border-color:#3ee2a8}.legend-line.road{border-color:#f2d04f}
.weather-content{display:grid;grid-template-columns:53% 47%;height:82%;padding:1.5% 2.5%;gap:2%}.weather-content>img{width:100%;height:100%;object-fit:cover;border-radius:3px;border:1px solid rgba(28,125,191,.35)}.risk-counts{display:grid;align-content:space-around;min-width:0}.risk-counts>div{display:grid;grid-template-columns:17px 1fr 13px;align-items:center;gap:4px;font-size:clamp(6px,.5vw,9px);white-space:nowrap;color:#cce6f8;padding:2px 3px;border-radius:3px}.risk-counts b{color:#ffbd55;font-size:clamp(7px,.6vw,11px);text-align:right}.risk-icon{font-style:normal;font-size:10px;text-align:center;color:#6edaff}.politics{color:#ff6c66}.customs{color:#ffb04e}.port{color:#4acaff}.route{color:#e4d15d}.risk-trigger{cursor:pointer;transition:background .18s}.risk-trigger:hover,.risk-trigger:focus-visible{outline:none;background:rgba(19,116,178,.24)}
.tiny-tabs{font-size:clamp(6px,.44vw,8px);display:flex;gap:4px;color:#83b5d7}.tiny-tabs>*{padding:2px 5px;border:1px solid #1b6091;border-radius:3px}.tiny-tabs b{background:#075a9c;color:#e4f7ff}
.event-list{list-style:none;padding:1% 3% 0;margin:0;display:grid;gap:0;height:80%}.event-list li{display:grid;grid-template-columns:8px 1fr auto;align-items:center;gap:6px;min-width:0;border-bottom:1px solid rgba(54,112,155,.15);font-size:clamp(6px,.49vw,9px);color:#d0e6f6;white-space:nowrap;padding:.6% 0}.event-list li span{overflow:hidden;text-overflow:ellipsis}.event-list time{font-size:clamp(6px,.45vw,8px);color:#7da8c9}.event-trigger{cursor:pointer;transition:background .18s}.event-trigger:hover,.event-trigger:focus-visible{outline:none;background:rgba(18,111,175,.22);box-shadow:inset 2px 0 #45d4ff}.event-dot{width:7px;height:7px;border-radius:50%;box-shadow:0 0 7px currentColor}.event-dot.red{background:#ff626d;color:#ff626d}.event-dot.orange{background:#ffae45;color:#ffae45}.event-dot.cyan{background:#48d9ff;color:#48d9ff}.event-dot.yellow{background:#f1d05b;color:#f1d05b}
.warehouse-content{height:82%;display:grid;grid-template-columns:22% 35% 43%;align-items:center;padding:0 3.5%}.warehouse-total small{display:block;color:#8db9d9;font-size:clamp(6px,.48vw,9px)}.warehouse-total strong{font-size:clamp(18px,1.72vw,33px);line-height:1.1}.warehouse-total strong span{font-size:.38em;font-weight:400;margin-left:2px}.donut{width:min(7.3vw,112px);aspect-ratio:1;border-radius:50%;background:conic-gradient(#168cff 0 28.6%,#44dcae 28.6% 52.4%,#ffad4c 52.4% 71.4%,#9670ec 71.4% 88.1%,#5fc9f5 88.1% 100%);display:grid;place-items:center;filter:drop-shadow(0 0 8px rgba(0,138,255,.2))}.donut-hole{width:59%;height:59%;border-radius:50%;background:#061b38;display:flex;flex-direction:column;align-items:center;justify-content:center;border:1px solid rgba(65,180,255,.35)}.donut-hole b{font-size:clamp(11px,1.1vw,21px)}.donut-hole small{font-size:clamp(5px,.4vw,7px);color:#7eb8de}.warehouse-legend{display:grid;gap:5%;font-size:clamp(6px,.5vw,9px);color:#c9e3f5}.warehouse-legend div{display:grid;grid-template-columns:8px 1fr auto;align-items:center;gap:5px}.warehouse-legend i{width:7px;height:7px;border-radius:50%}.warehouse-legend b{font-weight:500}.c1{background:#168cff}.c2{background:#44dcae}.c3{background:#ffad4c}.c4{background:#9670ec}.c5{background:#5fc9f5}
.quote-panel{display:grid;grid-template-rows:17% 15% repeat(4,1fr)}.quote-head,.quote-row{display:grid;grid-template-columns:37% 16% 16% 1fr;align-items:center;gap:1.5%;padding:0 3%;white-space:nowrap}.quote-head{font-size:clamp(5px,.43vw,8px);color:#75b3dc;border-bottom:1px solid rgba(45,118,164,.2)}.quote-row{font-size:clamp(6px,.48vw,9px);color:#d3e8f8;border-bottom:1px solid rgba(32,91,134,.12)}.quote-row b{font-size:clamp(6px,.52vw,10px);font-weight:600}.quote-row svg{width:100%;height:20px;overflow:visible}.quote-row svg path{fill:none;stroke:#42caff;stroke-width:1.8;filter:drop-shadow(0 0 2px #1aaaff)}.quote-row:nth-of-type(4) svg path{stroke:#ff9b59}.quote-row:nth-of-type(5) svg path{stroke:#40dcae}
.bottom-grid{display:grid;grid-template-columns:49.2% minmax(0,1fr);gap:.52%;min-height:0}.tracking-panel,.transport-panel{display:grid;grid-template-rows:22% minmax(0,1fr)}.tracking-steps{display:grid;grid-template-columns:repeat(8,1fr);align-items:center;padding:1% 2% 2%;position:relative}.tracking-steps:before{content:"";position:absolute;left:8%;right:8%;top:34%;height:2px;background:linear-gradient(90deg,#2ecfff 0 48%,#245c85 48% 100%);box-shadow:0 0 7px #16aaff}.step{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0;text-align:center}.step i{font-style:normal;width:clamp(19px,1.6vw,30px);height:clamp(19px,1.6vw,30px);border:1px solid #168ac9;border-radius:50%;background:#06264a;color:#7cddff;display:grid;place-items:center;font-size:clamp(8px,.76vw,14px);font-weight:700;box-shadow:0 0 9px rgba(0,160,255,.28)}.step b{font-size:clamp(5px,.46vw,8.5px);font-weight:500;white-space:nowrap;color:#d4ebfb}.step small{font-size:clamp(5px,.42vw,8px);color:#789fbe}.step.done i{border-color:#2de4b0;color:#4be8bb}.step.done small{color:#45e1b0}.step.active i{border-color:#23caff;color:#fff;box-shadow:0 0 12px #009fff}.step.active small{color:#54d9ff}
.transport-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2%;padding:1% 2% 2%;min-height:0}.transport-card{position:relative;min-width:0;overflow:hidden;border:1px solid rgba(43,137,195,.6);border-radius:4px;background:#061b36;display:grid;grid-template-rows:1fr auto auto}.transport-card img{width:100%;height:100%;min-height:0;object-fit:cover;opacity:.92}.transport-card>span{position:absolute;top:4px;left:5px;padding:2px 6px;background:rgba(0,70,127,.85);border-radius:2px;font-size:clamp(6px,.5vw,9px);font-weight:700}.transport-card small{padding:2px 5px 4px;color:#8fc5e8;font-size:clamp(5px,.42vw,8px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rail-card,.road-card{background:radial-gradient(circle at 50% 35%,#174e76,#061a35 70%);align-items:center;justify-items:center}.transport-emoji{font-size:clamp(26px,3vw,56px);align-self:center;filter:drop-shadow(0 0 9px #1caaff)}.live-indicator{display:inline-block;width:6px;height:6px;border-radius:50%;background:#36e5aa;box-shadow:0 0 8px #36e5aa;margin:0 4px 1px 2px;vertical-align:middle}
.toast{position:fixed;left:50%;bottom:18px;transform:translate(-50%,20px);padding:9px 15px;background:rgba(4,37,72,.96);border:1px solid #168ed1;border-radius:4px;color:#dff7ff;font-size:13px;opacity:0;pointer-events:none;transition:.25s;z-index:99}.toast.show{opacity:1;transform:translate(-50%,0)}.kpi-card.pulse-card{box-shadow:inset 0 0 20px rgba(0,180,255,.28),0 0 15px rgba(0,170,255,.25);border-color:#41cfff}
.detail-modal{display:none;position:fixed;inset:0;z-index:1000;align-items:center;justify-content:center;padding:22px}.detail-modal.is-open{display:flex}.modal-backdrop{position:absolute;inset:0;background:rgba(0,7,20,.76);backdrop-filter:blur(5px)}.modal-dialog{position:relative;z-index:1;width:min(650px,calc(100vw - 36px));max-height:min(86vh,720px);overflow:auto;padding:clamp(18px,2.1vw,30px);border:1px solid #168bcb;border-radius:9px;background:linear-gradient(145deg,rgba(5,39,76,.99),rgba(2,15,37,.99) 68%);box-shadow:0 22px 80px rgba(0,0,0,.58),0 0 32px rgba(0,143,255,.2),inset 0 0 25px rgba(0,142,255,.1);animation:modalIn .2s ease-out}.modal-dialog:before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,transparent,#48d9ff,#178aff,transparent)}@keyframes modalIn{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}.modal-topline{display:flex;align-items:center;justify-content:space-between;gap:12px}.modal-kicker{display:flex;align-items:center;gap:9px;color:#8fdcff;font-size:12px;font-weight:700;letter-spacing:.08em}.modal-kicker-icon{width:27px;height:27px;display:grid;place-items:center;border-radius:6px;background:rgba(19,133,205,.2);border:1px solid rgba(65,190,255,.4);font-size:16px}.modal-tag{padding:3px 8px;border:1px solid rgba(66,183,244,.32);border-radius:99px;color:#8fc9e9;font-size:10px;letter-spacing:0}.modal-close{width:30px;height:30px;border:1px solid rgba(122,183,221,.3);border-radius:5px;background:rgba(3,22,45,.8);color:#b9def5;font-size:22px;line-height:1;cursor:pointer}.modal-close:hover{color:#fff;border-color:#61d7ff;background:rgba(0,110,180,.35)}.modal-dialog h2{margin:15px 0 7px;color:#f1faff;font-size:clamp(19px,1.45vw,25px);letter-spacing:.04em}.modal-dialog h3{margin:0 0 10px;color:#fff;font-size:clamp(16px,1.2vw,21px)}.modal-description{margin:0;color:#b8d5e9;font-size:13px;line-height:1.9}.modal-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin:20px 0}.modal-metric{padding:12px 13px;border:1px solid rgba(48,131,183,.34);border-radius:5px;background:rgba(2,25,53,.78);min-width:0}.modal-metric span{display:block;color:#7daecc;font-size:10px;margin-bottom:6px}.modal-metric b{display:block;color:#eaf8ff;font-size:14px;overflow-wrap:anywhere}.modal-advice{padding:13px 15px;border-left:3px solid #27b9f2;border-radius:3px;background:rgba(8,70,112,.24)}.modal-advice-title{color:#7fdcff;font-size:12px;font-weight:700;margin-bottom:5px}.modal-advice p{margin:0;color:#c8e1f2;font-size:12px;line-height:1.8}.modal-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:19px;padding-top:13px;border-top:1px solid rgba(59,132,180,.2)}.modal-footer span{font-size:10px;color:#6e9abb}.modal-footer button{border:1px solid #1789c7;border-radius:4px;padding:7px 15px;background:linear-gradient(180deg,#0d70ad,#084675);color:#eafaff;font-size:11px;cursor:pointer}.detail-modal[data-tone="risk"] .modal-dialog{border-color:#b84a62}.detail-modal[data-tone="risk"] .modal-dialog:before{background:linear-gradient(90deg,transparent,#ff6674,#b72c50,transparent)}.detail-modal[data-tone="risk"] .modal-kicker{color:#ff9da5}.detail-modal[data-tone="risk"] .modal-kicker-icon{background:rgba(153,32,52,.22);border-color:rgba(255,102,116,.45)}.detail-modal[data-tone="risk"] .modal-advice{border-left-color:#ff6878;background:rgba(104,25,43,.24)}.detail-modal[data-tone="risk"] .modal-advice-title{color:#ff9da5}.detail-modal[data-tone="customs"] .modal-dialog{border-color:#c18035}.detail-modal[data-tone="customs"] .modal-dialog:before{background:linear-gradient(90deg,transparent,#ffc15c,#d47d28,transparent)}.detail-modal[data-tone="customs"] .modal-kicker{color:#ffd18b}.detail-modal[data-tone="customs"] .modal-kicker-icon{background:rgba(128,76,17,.22);border-color:rgba(255,185,77,.45)}.detail-modal[data-tone="customs"] .modal-advice{border-left-color:#ffb34d;background:rgba(104,65,20,.22)}.detail-modal[data-tone="customs"] .modal-advice-title{color:#ffd18b}
@media(max-width:900px){html,body{overflow:auto}.dashboard{width:100%;height:auto;min-height:100vh;aspect-ratio:auto;display:block;overflow:visible;padding:10px}.topbar{min-height:72px;grid-template-columns:1fr;gap:5px;padding:8px}.brand{grid-row:1}.nav-right{justify-content:flex-start}.nav-left,.nav-right,.top-actions{justify-content:center}.kpi-row{grid-template-columns:repeat(2,1fr);margin:10px 0}.kpi-card{min-height:62px}.main-grid,.bottom-grid{display:flex;flex-direction:column}.left-column,.right-column,.center-column{display:flex;flex-direction:column}.panel{min-height:190px}.map-panel{min-height:350px}.transport-cards{min-height:130px}.detail-modal{padding:12px}.modal-dialog{width:min(560px,calc(100vw - 24px));padding:17px}.modal-metrics{grid-template-columns:1fr}.modal-footer{align-items:flex-start;flex-direction:column}.map-tools{gap:3px}.map-action{font-size:8px;padding:4px 5px}.clock-box{text-align:center}}


/* ===== 图标稳定修正版：使用 SVG 替代 CSS 伪元素图标，避免变形和错位 ===== */
.kpi-card{align-items:center}
.kpi-icon{
  width:clamp(34px,3.6vw,66px) !important;
  height:clamp(34px,3.6vw,66px) !important;
  min-width:clamp(34px,3.6vw,66px) !important;
  flex:0 0 auto;
  display:grid !important;
  place-items:center !important;
  border:1px solid rgba(75,206,255,.40);
  border-radius:8px;
  position:relative;
  background:radial-gradient(circle at 45% 32%,rgba(99,220,255,.18),rgba(3,38,70,.36) 58%,rgba(3,27,49,.66) 100%);
  box-shadow:inset 0 0 12px rgba(0,163,255,.12),0 0 12px rgba(0,131,255,.08);
  overflow:hidden;
}
.kpi-icon:before,.kpi-icon:after{display:none !important;content:none !important}
.kpi-icon svg{
  width:74%;
  height:74%;
  display:block;
  color:#73e2ff;
  stroke:currentColor;
  stroke-width:2.3;
  stroke-linecap:round;
  stroke-linejoin:round;
  fill:none;
  filter:drop-shadow(0 0 4px rgba(0,170,255,.35));
}
.kpi-icon svg circle{fill:none}
.transport-emoji{display:grid;place-items:center;width:100%;line-height:1}
.modal-kicker-icon{display:grid;place-items:center;line-height:1}


/* ===== Reference-faithful icon pass (primary reference: 2048x775 screenshot) ===== */
.kpi-card{align-items:center;gap:6.2%;padding-left:4.2%;padding-right:3.5%}
.kpi-icon{
  width:clamp(30px,1.95vw,42px)!important;
  height:clamp(30px,1.95vw,42px)!important;
  min-width:clamp(30px,1.95vw,42px)!important;
  flex:0 0 clamp(30px,1.95vw,42px)!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  border:0!important;border-radius:0!important;background:transparent!important;
  box-shadow:none!important;overflow:visible!important;padding:0!important;
}
.kpi-icon:before,.kpi-icon:after{display:none!important;content:none!important}
.kpi-icon img{display:block;width:100%;height:100%;object-fit:contain;object-position:center;filter:none}
.risk-counts{grid-template-columns:1fr!important;align-content:space-around!important}
.risk-counts>div{grid-template-columns:18px minmax(0,1fr)!important;gap:6px!important;padding:2px 3px!important}
.risk-icon-img{display:block;width:15px;height:15px;object-fit:contain;object-position:center;justify-self:center}
.risk-trigger span{overflow:hidden;text-overflow:ellipsis}
.map-image-wrap>img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.map-hotspot{position:absolute;z-index:6;width:34px;height:34px;transform:translate(-50%,-50%);border:0;border-radius:50%;background:transparent;cursor:pointer}
.map-hotspot:hover,.map-hotspot:focus-visible{outline:2px solid rgba(94,224,255,.75);outline-offset:1px;background:rgba(34,181,255,.08)}
.hotspot-north{left:33.8%;top:9.3%}.hotspot-west{left:21.9%;top:31.5%}
.map-image-wrap:after{pointer-events:none}
.fullscreen{display:grid;place-items:center;padding:0}
.fullscreen svg{width:70%;height:70%;fill:none;stroke:#9bdfff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;display:block}
.modal-kicker-icon svg{width:18px;height:18px;display:block;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.detail-modal[data-tone="risk"] .modal-kicker-icon{color:#ff7c87}
.detail-modal[data-tone="policy"] .modal-kicker-icon{color:#62d8ff}
.detail-modal[data-tone="customs"] .modal-kicker-icon{color:#ffc15c}
/* The route legend is baked into the map artwork; do not draw a second legend over it. */
.map-legend,.map-marker,.map-pulse{display:none!important}
/* Bottom-only areas are supplemented from the complete reference image. */
.bottom-grid{width:72.5%;grid-template-columns:64.2% 35.1%;justify-content:start;gap:.7%;overflow:hidden}
.reference-image-panel{display:block!important;min-width:0;min-height:0;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;overflow:hidden!important}
.reference-image-panel:before{display:none!important}
.reference-panel-image{display:block;width:100%;height:100%;object-fit:fill;object-position:center}
@media(max-width:900px){.bottom-grid{width:100%;grid-template-columns:1fr;display:grid}.reference-image-panel{min-height:150px}.kpi-icon{width:36px!important;height:36px!important;min-width:36px!important;flex-basis:36px!important}}


/* ===== V6：恢复中非运输线路动态光效（沿原图底图航线叠加，不重画静态航线） ===== */
.map-image-wrap{isolation:isolate}
.map-image-wrap>img{position:relative;z-index:1}
.map-motion-overlay{
  position:absolute;inset:0;width:100%;height:100%;
  z-index:4;pointer-events:none;overflow:visible;
}
.route-base{fill:none;stroke:transparent;stroke-width:1;pointer-events:none}
.route-flow{
  fill:none;stroke-width:3.1;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:17 31;stroke-dashoffset:0;opacity:.98;
  filter:url(#routeGlow);
  animation:mapRouteFlow 2.25s linear infinite;
  vector-effect:non-scaling-stroke;
  mix-blend-mode:screen;
}
.route-flow.slow{animation-duration:3.35s;animation-delay:-1.1s;opacity:.92}
.route-sea{stroke:#37caff}
.route-air{stroke:#ffad4d}
.route-rail{stroke:#43e4b1}
.route-road{stroke:#f4d45e}
@keyframes mapRouteFlow{to{stroke-dashoffset:-144}}
.route-particles circle{stroke:none}
.particle-sea{fill:#d8f8ff}
.particle-air{fill:#fff0c6}
.particle-rail{fill:#d6ffef}
.particle-road{fill:#fff8c5}
.hub-ring{
  fill:rgba(223,250,255,.08);stroke:#fff2b9;stroke-width:1.7;
  transform-box:fill-box;transform-origin:center;
  animation:hubPulse 2.1s ease-out infinite;
  filter:url(#particleGlow);
}
.hub-east{stroke:#55ddff;animation-delay:.65s}
.hub-south{stroke:#ffbd61;animation-delay:1.2s}
.hub-west{stroke:#ff7d80;animation-delay:1.55s}
@keyframes hubPulse{
  0%{r:4;opacity:.95;stroke-width:2.2}
  75%,100%{r:12;opacity:0;stroke-width:.7}
}
/* 运价指数折线首次绘制及端点呼吸光效 */
.chart-line{
  stroke-dasharray:620;stroke-dashoffset:620;
  animation:chartLineReveal 2.1s cubic-bezier(.2,.7,.2,1) .25s forwards;
}
@keyframes chartLineReveal{to{stroke-dashoffset:0}}
.chart-dot{animation:chartDotPulse 1.8s ease-in-out 2.35s infinite}
@keyframes chartDotPulse{
  0%,100%{r:3.5;opacity:.85}
  50%{r:5.2;opacity:1}
}
@media(prefers-reduced-motion:reduce){
  .route-flow,.hub-ring,.chart-line,.chart-dot{animation:none!important}
  .route-flow{stroke-dashoffset:0}
  .chart-line{stroke-dashoffset:0}
}


/* ===== V7：标题居中 + 真实可拖动地图 ===== */
.topbar{position:relative;grid-template-columns:22% 1fr 22% 17.5%}
.brand{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:31%;
  z-index:3;
  pointer-events:none;
}
.nav-left{padding-right:3%}
.nav-right{padding-left:3%}
.top-actions{position:relative;z-index:4}

.real-map-wrap{
  position:relative;
  background:
    radial-gradient(circle at 48% 50%, rgba(33,115,206,.18), rgba(0,0,0,0) 44%),
    linear-gradient(180deg, rgba(3,26,50,.92), rgba(2,15,36,.98));
}
.real-map{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:1;
}
.real-map-wrap::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(0,10,28,.12), rgba(0,0,0,0) 16%, rgba(0,0,0,0) 82%, rgba(0,10,28,.14)),
    radial-gradient(circle at 50% 55%, rgba(23,122,236,.09), rgba(0,0,0,0) 52%);
  z-index:2;
}

#africaMap .leaflet-control-zoom{
  border:1px solid rgba(47,171,255,.42);
  box-shadow:0 0 14px rgba(17,148,230,.22);
}
#africaMap .leaflet-control-zoom a{
  background:rgba(3,25,47,.92);
  color:#d9f3ff;
  border-bottom:1px solid rgba(47,171,255,.24);
}
#africaMap.leaflet-container{
  background:#06182d;
  font-family:"Microsoft YaHei","PingFang SC","Noto Sans CJK SC",Arial,sans-serif;
}
.leaflet-tile{filter:brightness(.94) saturate(.92) contrast(1.04)}
.leaflet-overlay-pane path.route-line{
  fill:none;
  stroke-linecap:round;
  stroke-linejoin:round;
  animation:leafletDash 3.2s linear infinite;
}
.leaflet-overlay-pane path.route-sea-line{
  stroke:#2fd2ff;
  stroke-width:4;
  stroke-dasharray:14 10;
  filter:drop-shadow(0 0 4px rgba(61,212,255,.75));
}
.leaflet-overlay-pane path.route-air-line{
  stroke:#ffb24c;
  stroke-width:4;
  stroke-dasharray:16 12;
  filter:drop-shadow(0 0 5px rgba(255,180,76,.7));
}
.leaflet-overlay-pane path.route-rail-line{
  stroke:#46e7b6;
  stroke-width:4;
  stroke-dasharray:10 10;
  filter:drop-shadow(0 0 5px rgba(70,231,182,.68));
}
.leaflet-overlay-pane path.route-road-line{
  stroke:#f8de5f;
  stroke-width:4;
  stroke-dasharray:12 12;
  filter:drop-shadow(0 0 5px rgba(248,222,95,.72));
}
@keyframes leafletDash{to{stroke-dashoffset:-104}}
.transport-div-icon,
.hub-div-icon,
.alert-div-icon,
.city-label-icon{
  background:transparent;
  border:none;
}
.transport-icon{
  width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(3,26,48,.88);
  border:1px solid rgba(84,208,255,.34);
  box-shadow:0 0 18px rgba(25,161,255,.26), inset 0 0 10px rgba(71,193,255,.14);
  backdrop-filter:blur(4px);
}
.transport-icon svg{
  width:21px;height:21px;
  stroke:#dff7ff;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;
}
.transport-icon.sea svg{stroke:#49d8ff}
.transport-icon.air svg{stroke:#ffbf65}
.transport-icon.rail svg{stroke:#50e7b9}
.transport-icon.road svg{stroke:#ffe26f}
.hub-marker{
  width:16px;height:16px;border-radius:50%;
  background:#d7fbff;border:2px solid #25bfff;
  box-shadow:0 0 0 4px rgba(37,191,255,.18),0 0 16px rgba(37,191,255,.92);
}
.hub-marker.orange{
  border-color:#ffb45a; box-shadow:0 0 0 4px rgba(255,180,90,.18),0 0 16px rgba(255,180,90,.92);
}
.alert-marker{
  width:28px;height:28px;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(255,60,78,.95);
  color:#fff;font-weight:800;font-size:18px;
  border:2px solid rgba(255,226,231,.8);
  box-shadow:0 0 14px rgba(255,66,83,.9);
}
.city-label{
  padding:2px 8px;
  white-space:nowrap;
  color:#f3fbff;
  font-size:12px;
  font-weight:700;
  letter-spacing:.02em;
  text-shadow:0 0 6px rgba(0,0,0,.8), 0 0 12px rgba(0,89,168,.5);
}
.real-map-legend{
  position:absolute;
  right:2.2%;
  bottom:2.2%;
  z-index:4;
  width:142px;
  padding:10px 12px;
  border:1px solid rgba(39,161,234,.52);
  border-radius:8px;
  background:rgba(2,20,44,.84);
  box-shadow:0 0 18px rgba(0,110,210,.18), inset 0 0 16px rgba(0,123,214,.08);
  backdrop-filter:blur(8px);
}
.real-map-legend .legend-row{
  display:grid;
  grid-template-columns:18px 1fr 44px;
  align-items:center;
  gap:6px;
  color:#e2f5ff;
  font-size:clamp(6px,.5vw,9px);
}
.real-map-legend .legend-row + .legend-row{margin-top:7px}
.real-map-legend .legend-icon svg{
  width:16px;height:16px;display:block;
  stroke:#a9eaff;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
}
.real-map-legend .legend-line{
  width:42px;height:0;border-top-width:3px;border-top-style:dashed;display:block;
  filter:drop-shadow(0 0 3px currentColor);
}
.real-map-legend .legend-line.sea{border-color:#2fd2ff;color:#2fd2ff}
.real-map-legend .legend-line.air{border-color:#ffb24c;color:#ffb24c}
.real-map-legend .legend-line.rail{border-color:#46e7b6;color:#46e7b6}
.real-map-legend .legend-line.road{border-color:#f8de5f;color:#f8de5f}


@media(max-width:900px){
  .brand{position:static; transform:none; width:auto; pointer-events:auto}
  .topbar{grid-template-columns:1fr}
  .real-map-legend{width:138px; right:10px; bottom:10px}
  .map-floating-label{display:none}
}


/* ===== V8：真实地图底图修复 ===== */
.real-map{z-index:3}
.real-map-wrap::after{z-index:2;mix-blend-mode:multiply;background:
  linear-gradient(180deg,rgba(0,10,28,.08),rgba(0,0,0,0) 18%,rgba(0,0,0,0) 82%,rgba(0,10,28,.12)),
  rgba(4,22,46,.12)}
#africaMap.leaflet-container{
  background:#06182d!important;
  color:#e8f7ff;
  font-family:"Microsoft YaHei","PingFang SC","Noto Sans CJK SC",Arial,sans-serif;
}
#africaMap .leaflet-tile-pane{background:#06182d}
#africaMap .leaflet-tile{
  filter:brightness(.70) saturate(.72) contrast(1.17);
}
#africaMap .leaflet-control-attribution{
  display:block!important;
  margin:0 6px 5px 0;
  padding:2px 5px;
  border:1px solid rgba(65,161,220,.25);
  border-radius:3px;
  color:#b9d8ea;
  background:rgba(2,16,35,.78);
  font-size:9px;
  line-height:1.4;
}
#africaMap .leaflet-control-attribution a{color:#7fdcff}
#africaMap .leaflet-control-zoom{margin:12px}
.map-load-status{
  position:absolute;
  z-index:1000;
  left:50%;top:50%;
  transform:translate(-50%,-50%);
  display:flex;align-items:center;gap:10px;
  max-width:82%;
  padding:10px 14px;
  border:1px solid rgba(61,183,255,.5);
  border-radius:6px;
  color:#d8f2ff;
  background:rgba(2,20,42,.9);
  box-shadow:0 0 18px rgba(0,137,255,.18);
  font-size:12px;
  pointer-events:auto;
}
.map-load-status[hidden]{display:none!important}
.map-load-status button{
  border:1px solid rgba(71,195,255,.6);
  border-radius:4px;
  padding:4px 9px;
  color:#c9f2ff;
  background:rgba(0,105,170,.35);
  cursor:pointer;
  white-space:nowrap;
}
.map-load-status button:hover{background:rgba(0,145,215,.55)}
.map-load-spinner{
  width:13px;height:13px;border:2px solid rgba(120,206,255,.25);
  border-top-color:#65dcff;border-radius:50%;
  animation:mapSpin .8s linear infinite;flex:none;
}
@keyframes mapSpin{to{transform:rotate(360deg)}}


/* ===== V9 MapTiler 深蓝在线地图：API Key 设置与加载失败处理 ===== */
#africaMap.leaflet-container{
  background:#061326!important;
  color:#e8f7ff;
}
#africaMap .leaflet-tile{
  filter:brightness(.94) saturate(.92) contrast(1.04);
}
#africaMap .leaflet-control-attribution{
  display:block!important;
  margin:0 6px 5px 0;
  padding:2px 5px;
  border:1px solid rgba(65,161,220,.25);
  border-radius:3px;
  color:#b9d8ea;
  background:rgba(2,16,35,.82);
  font-size:9px;
  line-height:1.4;
}
#africaMap .leaflet-control-attribution a{color:#7fdcff}
.map-load-status{
  position:absolute;
  z-index:1200;
  left:50%;top:50%;
  transform:translate(-50%,-50%);
  display:flex;flex-direction:column;align-items:stretch;gap:9px;
  width:min(390px,calc(100% - 34px));
  max-width:calc(100% - 34px);
  padding:15px 16px;
  border:1px solid rgba(61,183,255,.58);
  border-radius:9px;
  color:#d8f2ff;
  background:linear-gradient(145deg,rgba(4,34,65,.97),rgba(2,17,39,.97));
  box-shadow:0 0 26px rgba(0,137,255,.23),inset 0 0 18px rgba(0,116,210,.08);
  font-size:12px;
  pointer-events:auto;
  backdrop-filter:blur(9px);
}
.map-load-status[hidden]{display:none!important}
.map-status-title{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:800;color:#e9f8ff}
.map-status-title .status-dot{width:8px;height:8px;border-radius:50%;background:#45d7ff;box-shadow:0 0 10px #45d7ff;flex:none}
.map-status-message{color:#a9cbe0;line-height:1.65}
.map-key-row{display:flex;gap:7px;align-items:center}
.map-key-row input{
  flex:1;min-width:0;height:34px;padding:0 10px;
  color:#e8f7ff;background:rgba(1,13,30,.85);
  border:1px solid rgba(64,170,235,.48);border-radius:5px;
  outline:none;font:inherit;
}
.map-key-row input:focus{border-color:#48d7ff;box-shadow:0 0 0 2px rgba(72,215,255,.12)}
.map-key-row button,.map-retry-button{
  min-height:34px;padding:0 12px;
  color:#e7f8ff;background:linear-gradient(180deg,#087bb7,#07517f);
  border:1px solid rgba(79,201,255,.72);border-radius:5px;
  cursor:pointer;font:inherit;font-weight:700;white-space:nowrap;
}
.map-key-row button:hover,.map-retry-button:hover{filter:brightness(1.18)}
.map-status-links{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.map-status-links a{color:#65d9ff;text-decoration:none}
.map-status-links a:hover{text-decoration:underline}
.map-status-hint{font-size:10px;color:#779bb6;line-height:1.5}
.map-status-actions{display:flex;justify-content:flex-end;gap:8px}
.map-load-spinner{
  width:13px;height:13px;border:2px solid rgba(120,206,255,.25);
  border-top-color:#65dcff;border-radius:50%;
  animation:mapSpin .8s linear infinite;flex:none;
}
@keyframes mapSpin{to{transform:rotate(360deg)}}


/* ===== V9.2：底部三栏完整填充 + 顶部标题与导航防重叠 ===== */

/* Header: absolute, symmetric zones keep the platform title centered on the whole screen. */
.topbar{
  display:block!important;
  position:relative!important;
  min-width:0;
}
.topbar .nav-left{
  position:absolute;
  left:.8%;
  top:50%;
  transform:translateY(-50%);
  width:22%;
  justify-content:flex-start;
  gap:2px;
  z-index:4;
}
.topbar .brand{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:34%;
  max-width:34%;
  min-width:0;
  text-align:center;
  z-index:3;
  pointer-events:none;
}
.topbar .brand-title{
  display:block;
  width:100%;
  white-space:nowrap;
  font-size:clamp(18px,1.9vw,37px);
  letter-spacing:.12em;
  line-height:1.04;
}
.topbar .brand-sub{
  display:block;
  width:100%;
  max-width:100%;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:clip;
  font-size:clamp(5px,.32vw,7px);
  letter-spacing:.10em;
  line-height:1.2;
  margin-top:2px;
}
.topbar .nav-right{
  position:absolute;
  left:68%;
  top:50%;
  transform:translateY(-50%);
  width:18%;
  justify-content:center;
  gap:1px;
  z-index:4;
}
.topbar .nav-right .nav-item{
  padding:.48em .55em;
  font-size:clamp(6px,.58vw,12px);
}
.topbar .top-actions{
  position:absolute;
  left:87%;
  right:.8%;
  top:50%;
  transform:translateY(-50%);
  width:auto;
  justify-content:flex-end;
  align-items:center;
  gap:.38em;
  z-index:5;
}
.topbar .demo-tag{font-size:clamp(6px,.43vw,9px)}
.topbar .clock-box{font-size:clamp(5px,.42vw,8px)}
.topbar .fullscreen{flex:none}

/* Footer: preserve the two reference panels' intended proportions and use the
   remaining right-hand space for an actual live-transport status panel. */
.bottom-grid{
  width:100%!important;
  min-width:0;
  display:grid!important;
  grid-template-columns:46.5% 25.5% minmax(0,1fr)!important;
  gap:.52%!important;
  justify-content:stretch!important;
  overflow:hidden;
  align-items:stretch;
}
.bottom-grid > *{min-width:0;min-height:0}
.bottom-live-panel{
  display:grid;
  grid-template-rows:17% 25% minmax(0,1fr);
  min-width:0;
  min-height:0;
  overflow:hidden;
  border:1px solid #0c75bc;
  border-radius:5px;
  background:linear-gradient(145deg,rgba(5,30,62,.97),rgba(2,15,38,.99));
  box-shadow:inset 0 0 18px rgba(0,117,220,.1),0 0 9px rgba(0,110,210,.06);
}
.bottom-live-panel:before{
  content:"";
  position:absolute;
  inset:0;
  border:1px solid rgba(91,187,255,.05);
  pointer-events:none;
}
.bottom-live-panel .panel-title{
  height:auto;
  min-height:0;
  padding:0 3.2%;
  font-size:clamp(8px,.68vw,13px);
}
.bottom-live-summary{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  align-items:center;
  gap:3px;
  padding:2px 3.2%;
  border-bottom:1px solid rgba(30,130,196,.18);
  background:linear-gradient(90deg,rgba(8,53,91,.36),rgba(2,22,45,.12));
}
.bottom-live-summary>div{
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap:5px;
  min-width:0;
  white-space:nowrap;
}
.bottom-live-summary small{
  color:#81b9dc;
  font-size:clamp(6px,.43vw,8px);
}
.bottom-live-summary b{
  color:#e8f8ff;
  font-size:clamp(10px,.9vw,17px);
  line-height:1;
  text-shadow:0 0 8px rgba(51,190,255,.22);
}
.bottom-live-summary b span{
  margin-left:2px;
  font-size:.55em;
  font-weight:400;
  color:#9bc8e4;
}
.bottom-live-summary .warning-value{color:#ffb35d}
.bottom-live-list{
  display:grid;
  grid-template-rows:repeat(4,minmax(0,1fr));
  min-height:0;
  padding:1px 2.5%;
}
.bottom-live-row{
  display:grid;
  grid-template-columns:clamp(17px,1.25vw,24px) minmax(0,1.05fr) minmax(48px,.9fr) auto;
  align-items:center;
  gap:5px;
  min-width:0;
  border-bottom:1px solid rgba(31,113,168,.16);
}
.bottom-live-row:last-child{border-bottom:0}
.bottom-live-row>img{
  width:clamp(15px,1.05vw,21px);
  height:clamp(15px,1.05vw,21px);
  object-fit:contain;
  filter:drop-shadow(0 0 4px rgba(40,178,255,.28));
}
.bottom-live-route{
  display:flex;
  flex-direction:column;
  min-width:0;
  gap:1px;
  overflow:hidden;
}
.bottom-live-route b{
  color:#dcefff;
  font-size:clamp(6px,.48vw,9px);
  font-weight:600;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.bottom-live-route small{
  color:#6fa3c5;
  font-size:clamp(5px,.39vw,7.5px);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.bottom-live-progress{
  display:flex;
  align-items:center;
  gap:4px;
  min-width:0;
}
.bottom-live-progress>div{
  flex:1;
  min-width:18px;
  height:4px;
  overflow:hidden;
  border-radius:4px;
  background:rgba(26,75,111,.72);
}
.bottom-live-progress i{
  display:block;
  height:100%;
  border-radius:4px;
  background:linear-gradient(90deg,#0b91d7,#4ee1ff);
  box-shadow:0 0 6px rgba(46,201,255,.5);
}
.bottom-live-progress small{
  width:22px;
  color:#a9d9f3;
  font-size:clamp(5px,.39vw,7.5px);
  text-align:right;
}
.bottom-live-status{
  padding:2px 5px;
  border:1px solid rgba(37,194,255,.25);
  border-radius:3px;
  color:#55d7ff;
  background:rgba(0,117,181,.12);
  font-size:clamp(5px,.38vw,7px);
  white-space:nowrap;
}
.bottom-live-status.warning{
  color:#ffbf67;
  border-color:rgba(255,174,74,.3);
  background:rgba(117,69,8,.12);
}

/* Responsive fallback: stack panels only on narrow screens. */
@media(max-width:900px){
  .topbar{
    display:grid!important;
    grid-template-columns:1fr!important;
    min-height:72px;
  }
  .topbar .brand,.topbar .nav-left,.topbar .nav-right,.topbar .top-actions{
    position:static;
    width:auto;
    max-width:100%;
    transform:none;
    justify-content:center;
    pointer-events:auto;
  }
  .bottom-grid{
    width:100%!important;
    grid-template-columns:1fr!important;
  }
  .bottom-live-panel{min-height:190px}
}


/* ===== V9.3：底部两个图片区改为原生文字图标组件，三栏严格对齐 ===== */
.bottom-grid{
  width:100%!important;
  min-width:0!important;
  display:grid!important;
  grid-template-columns:46.5% 25.5% minmax(0,1fr)!important;
  grid-auto-flow:row;
  gap:.52%!important;
  justify-content:stretch!important;
  align-items:stretch!important;
  overflow:hidden!important;
  box-sizing:border-box!important;
}
.bottom-grid > .panel{
  position:relative!important;
  top:auto!important;
  margin:0!important;
  width:100%!important;
  height:100%!important;
  min-width:0!important;
  min-height:0!important;
  align-self:stretch!important;
  justify-self:stretch!important;
  box-sizing:border-box!important;
  overflow:hidden!important;
  border:1px solid #0c75bc!important;
  border-radius:5px!important;
  background:linear-gradient(145deg,rgba(5,30,62,.97),rgba(2,15,38,.99))!important;
  box-shadow:inset 0 0 18px rgba(0,117,220,.1),0 0 9px rgba(0,110,210,.06)!important;
}
.bottom-grid > .panel:before{
  content:"";
  position:absolute;
  inset:0;
  border:1px solid rgba(91,187,255,.06);
  pointer-events:none;
}
.bottom-panel-title{
  position:relative;
  z-index:2;
  height:18%!important;
  min-height:26px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 2.2%!important;
  border-bottom:1px solid rgba(22,139,210,.32);
  background:linear-gradient(180deg,rgba(5,49,89,.52),rgba(2,22,45,.2));
  font-size:clamp(9px,.72vw,14px)!important;
  line-height:1;
  color:#e8f7ff;
}
.bottom-title-text{
  display:flex;
  align-items:center;
  gap:7px;
  min-width:0;
  font-weight:700;
  white-space:nowrap;
}
.bottom-title-accent{
  display:inline-block;
  width:3px;
  height:1.15em;
  border-radius:2px;
  background:#22cfff;
  box-shadow:0 0 9px #12bfff;
}
.bottom-grid .more{
  color:#8bc8ec;
  font-size:clamp(6px,.48vw,9px);
  white-space:nowrap;
}

/* Tracking: 8 editable HTML/SVG nodes with status labels and live route connector. */
.tracking-panel-native{
  display:grid!important;
  grid-template-rows:18% minmax(0,1fr)!important;
}
.tracking-flow{
  position:relative;
  display:grid;
  grid-template-columns:repeat(8,minmax(0,1fr));
  align-items:start;
  min-width:0;
  min-height:0;
  padding:clamp(7px,.75vw,14px) 1.2% 3px;
  isolation:isolate;
}
.tracking-flow:before{
  content:"";
  position:absolute;
  z-index:0;
  left:6.1%;
  right:6.1%;
  top:clamp(23px,2.1vw,40px);
  height:2px;
  background:linear-gradient(90deg,rgba(38,197,255,.9),rgba(20,113,196,.55),rgba(38,197,255,.85));
  box-shadow:0 0 7px rgba(24,180,255,.5);
}
.tracking-flow:after{
  content:"";
  position:absolute;
  z-index:1;
  left:6%;
  top:clamp(20px,1.95vw,37px);
  width:7px;
  height:7px;
  border-radius:50%;
  background:#e8fcff;
  box-shadow:0 0 6px 2px #1ccaff,0 0 13px #1ccaff;
  animation:trackingSignal 4.8s linear infinite;
}
@keyframes trackingSignal{
  0%{left:6%}
  100%{left:93%}
}
.track-step{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:clamp(3px,.38vw,7px);
  min-width:0;
  text-align:center;
}
.track-node{
  width:clamp(26px,2.1vw,41px);
  height:clamp(26px,2.1vw,41px);
  display:grid;
  place-items:center;
  border:1px solid rgba(43,190,255,.9);
  border-radius:50%;
  background:radial-gradient(circle at 50% 38%,rgba(15,116,190,.88),rgba(2,28,59,.98) 72%);
  box-shadow:0 0 8px rgba(0,158,255,.5),inset 0 0 9px rgba(39,196,255,.22);
}
.track-node svg{
  width:54%;
  height:54%;
  fill:none;
  stroke:#9beaff;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
  filter:drop-shadow(0 0 3px rgba(37,205,255,.5));
}
.track-step.done .track-node{
  border-color:#27cfff;
  box-shadow:0 0 10px rgba(0,177,255,.62),inset 0 0 10px rgba(39,196,255,.24);
}
.track-step.active .track-node{
  border-color:#4be5ff;
  box-shadow:0 0 12px rgba(0,210,255,.72),inset 0 0 11px rgba(39,196,255,.34);
  animation:trackNodePulse 2.2s ease-in-out infinite;
}
.track-step.pending .track-node{
  border-color:rgba(57,155,212,.72);
  background:radial-gradient(circle at 50% 38%,rgba(8,65,111,.85),rgba(2,24,48,.98) 72%);
}
.track-step.idle .track-node{
  border-color:#829bb4;
  background:radial-gradient(circle at 50% 38%,rgba(65,91,118,.65),rgba(2,24,48,.98) 72%);
  box-shadow:0 0 7px rgba(126,164,197,.24);
}
.track-step b{
  display:block;
  max-width:100%;
  color:#dff4ff;
  font-size:clamp(6px,.53vw,10px);
  line-height:1.15;
  font-weight:600;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.track-status{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  padding:2px 5px;
  border:1px solid rgba(48,151,199,.25);
  border-radius:10px;
  background:rgba(4,37,66,.68);
  color:#8eb9d3;
  font-size:clamp(5px,.43vw,8px);
  line-height:1.1;
  white-space:nowrap;
}
.track-status i,.transport-live i{
  width:5px;
  height:5px;
  flex:0 0 5px;
  border-radius:50%;
  background:#5c91b2;
}
.track-status.done{color:#45e6ae;border-color:rgba(46,222,167,.25)}
.track-status.done i{background:#32e2a4;box-shadow:0 0 6px #32e2a4}
.track-status.active{color:#43dfff;border-color:rgba(45,200,255,.28)}
.track-status.active i{background:#25d5ff;box-shadow:0 0 6px #25d5ff}
.track-status.pending{color:#e5c27a}
.track-status.pending i{background:#f2ba52;box-shadow:0 0 5px #f2ba52}
.track-status.idle{color:#8da7bd}
.track-arrow{
  position:absolute;
  right:-5px;
  top:clamp(6px,.58vw,11px);
  z-index:3;
  color:#36caff;
  font-size:clamp(15px,1.35vw,25px);
  line-height:1;
  font-weight:300;
  text-shadow:0 0 8px #0bbcff;
}
@keyframes trackNodePulse{
  0%,100%{filter:brightness(1);transform:scale(1)}
  50%{filter:brightness(1.25);transform:scale(1.04)}
}

/* Transport modes: three native cards, no raster screenshots. */
.transport-panel-native{
  display:grid!important;
  grid-template-rows:18% minmax(0,1fr)!important;
}
.transport-mode-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(4px,.5vw,9px);
  min-width:0;
  min-height:0;
  padding:clamp(5px,.55vw,10px);
}
.transport-mode-card{
  position:relative;
  display:grid;
  grid-template-rows:auto minmax(35px,1fr) auto auto;
  align-items:center;
  justify-items:center;
  gap:clamp(2px,.25vw,5px);
  min-width:0;
  min-height:0;
  padding:clamp(4px,.45vw,8px) 3px;
  overflow:hidden;
  border:1px solid rgba(38,150,215,.48);
  border-radius:5px;
  background:linear-gradient(155deg,rgba(8,55,96,.82),rgba(2,23,48,.96));
  box-shadow:inset 0 0 13px rgba(17,144,222,.12),0 0 8px rgba(0,134,220,.08);
}
.transport-mode-card:after{
  content:"";
  position:absolute;
  left:12%;
  right:12%;
  bottom:0;
  height:1px;
  background:linear-gradient(90deg,transparent,#3bd7ff,transparent);
  opacity:.8;
}
.transport-mode-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:3px;
  width:100%;
  min-width:0;
}
.transport-mode-tag{
  padding:2px 6px;
  border-radius:3px;
  background:rgba(0,117,210,.34);
  border:1px solid rgba(47,177,255,.42);
  color:#c9efff;
  font-size:clamp(6px,.48vw,9px);
  font-weight:700;
}
.transport-live{
  display:inline-flex;
  align-items:center;
  gap:3px;
  color:#63ddb6;
  font-size:clamp(5px,.37vw,7px);
  white-space:nowrap;
}
.transport-live i{background:#31e1ae;box-shadow:0 0 5px #31e1ae}
.transport-mode-visual{
  position:relative;
  display:grid;
  place-items:center;
  width:100%;
  min-height:0;
  overflow:hidden;
  background:radial-gradient(ellipse at center,rgba(0,145,221,.17),transparent 70%);
}
.transport-mode-visual svg{
  position:relative;
  z-index:2;
  width:clamp(31px,3.2vw,60px);
  height:clamp(26px,2.5vw,46px);
  fill:rgba(15,151,218,.16);
  stroke:#77e4ff;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
  filter:drop-shadow(0 0 5px rgba(27,188,255,.65));
}
.transport-mode-card.air .transport-mode-visual svg{stroke:#a6e7ff}
.transport-mode-card.rail .transport-mode-visual svg{stroke:#55e7c0}
.transport-orbit{
  position:absolute;
  left:18%;
  right:18%;
  bottom:15%;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(44,194,255,.8),transparent);
}
.transport-route{
  display:block;
  max-width:100%;
  color:#dcefff;
  font-size:clamp(6px,.48vw,9px);
  font-weight:600;
  line-height:1.2;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.transport-mode-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:4px;
  width:100%;
  padding-top:3px;
  border-top:1px solid rgba(44,134,184,.22);
  color:#7daecb;
  font-size:clamp(5px,.4vw,7.5px);
  white-space:nowrap;
}
.transport-mode-meta strong{
  color:#a9e7ff;
  font-size:clamp(6px,.48vw,9px);
}

/* Third column: same exact top edge, bottom edge and box model as the other two panels. */
.bottom-grid > .bottom-live-panel{
  display:grid!important;
  grid-template-rows:18% 25% minmax(0,1fr)!important;
  align-items:stretch;
}
.bottom-live-panel .panel-title{height:100%!important;min-height:0}
.bottom-live-summary,.bottom-live-list{min-width:0;min-height:0}
.bottom-live-row{min-height:0}
.bottom-live-row > img{object-fit:contain}

/* Ensure all footer columns share the same top/bottom baseline at desktop dashboard sizes. */
@media(min-width:901px){
  .bottom-grid{height:100%!important}
  .bottom-grid > .panel{height:100%!important}
}
@media(max-width:900px){
  .bottom-grid{grid-template-columns:1fr!important;grid-auto-rows:minmax(170px,auto)}
  .tracking-panel-native{min-height:180px!important}
  .transport-panel-native{min-height:170px!important}
  .tracking-flow{padding:12px 1.2% 6px}
  .track-node{width:30px;height:30px}
  .track-arrow{display:none}
  .bottom-grid > .panel{height:auto!important}
}


/* ===== V9.4：主内容列高度修正，避免右侧报价面板压入底部 ===== */
.main-grid{
  min-height:0!important;
  overflow:hidden!important;
}
.left-column{
  min-height:0!important;
  overflow:hidden!important;
  grid-template-rows:
    minmax(0,36.5fr)
    minmax(0,30.3fr)
    minmax(0,33.2fr)!important;
}
.right-column{
  min-height:0!important;
  overflow:hidden!important;
  grid-template-rows:
    minmax(0,27fr)
    minmax(0,24fr)
    minmax(0,20fr)
    minmax(0,29fr)!important;
}
.left-column>.panel,
.right-column>.panel{
  min-height:0!important;
  height:100%!important;
  align-self:stretch!important;
  position:relative!important;
  z-index:0;
}
.quote-panel{
  min-height:0!important;
  overflow:hidden!important;
  grid-template-rows:minmax(0,17fr) minmax(0,15fr) repeat(4,minmax(0,17fr))!important;
}

/* ===== V9.4：右下运输动态面板样式隔离，取消全局 panel-title 继承 ===== */
.bottom-live-panel{
  isolation:isolate;
  contain:layout paint;
  display:grid!important;
  grid-template-rows:18% 25% minmax(0,1fr)!important;
  gap:0!important;
  padding:0!important;
  min-width:0!important;
  min-height:0!important;
  overflow:hidden!important;
  border:1px solid #0c75bc!important;
  border-radius:5px!important;
  background:linear-gradient(145deg,rgba(5,30,62,.97),rgba(2,15,38,.99))!important;
  box-shadow:inset 0 0 18px rgba(0,117,220,.1),0 0 9px rgba(0,110,210,.06)!important;
}
.bottom-live-panel:before{display:none!important}
.bottom-live-header{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  height:100%;
  min-width:0;
  margin:0;
  padding:0 3.2%;
  box-sizing:border-box;
  border:0;
  border-bottom:1px solid rgba(16,126,197,.3);
  border-radius:0;
  background:linear-gradient(180deg,rgba(4,47,84,.42),rgba(2,20,43,.12));
  color:#e5f6ff;
  font-size:clamp(8px,.68vw,13px);
  font-weight:700;
  line-height:1;
  white-space:nowrap;
}
.bottom-live-header .live-dot{
  display:inline-flex;
  align-items:center;
  gap:5px;
  color:#79c6eb;
  font-size:clamp(6px,.45vw,9px);
  font-weight:400;
}
.bottom-live-summary{
  position:relative;
  z-index:1;
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr));
  align-items:center;
  gap:3px;
  width:100%;
  min-width:0;
  min-height:0;
  margin:0;
  padding:2px 3.2%;
  box-sizing:border-box;
  border:0;
  border-bottom:1px solid rgba(30,130,196,.18);
  border-radius:0;
  background:linear-gradient(90deg,rgba(8,53,91,.36),rgba(2,22,45,.12));
}
.bottom-live-list{
  position:relative;
  z-index:1;
  display:grid!important;
  grid-template-rows:repeat(4,minmax(0,1fr));
  width:100%;
  min-width:0;
  min-height:0;
  margin:0;
  padding:1px 2.5%;
  box-sizing:border-box;
  border:0;
  border-radius:0;
  background:transparent;
}
.bottom-live-row{
  display:grid;
  grid-template-columns:clamp(17px,1.25vw,24px) minmax(0,1.05fr) minmax(48px,.9fr) auto;
  align-items:center;
  gap:5px;
  width:100%;
  min-width:0;
  min-height:0;
  margin:0;
  padding:0;
  box-sizing:border-box;
  border:0;
  border-bottom:1px solid rgba(31,113,168,.16);
  border-radius:0;
  background:transparent;
}
.bottom-live-row:last-child{border-bottom:0}

/* ===== V9.4：全屏数字累加与图形动效 ===== */
.counter-value{
  display:inline-block;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
  will-change:contents;
}
.kpi-card{
  isolation:isolate;
}
.kpi-card>*{
  position:relative;
  z-index:1;
}
.kpi-card:after{
  content:"";
  position:absolute;
  z-index:0;
  top:-120%;
  bottom:-120%;
  left:-42%;
  width:25%;
  pointer-events:none;
  transform:skewX(-20deg);
  background:linear-gradient(90deg,transparent,rgba(106,224,255,.11),transparent);
  animation:kpiLightSweep 8s ease-in-out infinite;
}
.kpi-card:nth-child(2):after{animation-delay:1.1s}
.kpi-card:nth-child(3):after{animation-delay:2.2s}
.kpi-card:nth-child(4):after{animation-delay:3.3s}
.kpi-card:nth-child(5):after{animation-delay:4.4s}
.kpi-card:nth-child(6):after{animation-delay:5.5s}
.kpi-card:nth-child(7):after{animation-delay:6.6s}
.kpi-card:nth-child(8):after{animation-delay:7.2s}
@keyframes kpiLightSweep{
  0%,68%{left:-42%;opacity:0}
  74%{opacity:1}
  100%{left:125%;opacity:0}
}
.kpi-icon img{
  animation:kpiIconFloat 3.6s ease-in-out infinite;
  transform-origin:50% 55%;
}
.kpi-card:nth-child(2) .kpi-icon img{animation-delay:.35s}
.kpi-card:nth-child(3) .kpi-icon img{animation-delay:.7s}
.kpi-card:nth-child(4) .kpi-icon img{animation-delay:1.05s}
.kpi-card:nth-child(5) .kpi-icon img{animation-delay:1.4s}
@keyframes kpiIconFloat{
  0%,100%{transform:translateY(0) scale(1);filter:drop-shadow(0 0 3px rgba(38,190,255,.3))}
  50%{transform:translateY(-2px) scale(1.045);filter:drop-shadow(0 0 7px rgba(38,210,255,.65))}
}

/* Charts and bars reveal progressively. */
.chart-area{
  opacity:0;
  transform-box:fill-box;
  transform-origin:center bottom;
  animation:chartAreaReveal 1.35s ease-out .15s forwards;
}
@keyframes chartAreaReveal{
  from{opacity:0;transform:scaleY(.12)}
  to{opacity:1;transform:scaleY(1)}
}
.bar-track i{
  transform:scaleX(0);
  transform-origin:left center;
  animation:barGrowIn 1.35s cubic-bezier(.2,.75,.25,1) .25s both;
}
.bar-row:nth-child(2) .bar-track i{animation-delay:.38s}
.bar-row:nth-child(3) .bar-track i{animation-delay:.51s}
.bar-row:nth-child(4) .bar-track i{animation-delay:.64s}
@keyframes barGrowIn{
  from{transform:scaleX(0);filter:brightness(1.7)}
  to{transform:scaleX(1);filter:brightness(1)}
}
.donut{
  transform-origin:center;
  animation:donutEnter 1.25s cubic-bezier(.16,.78,.28,1) both,donutBreath 5s ease-in-out 1.25s infinite;
}
@keyframes donutEnter{
  from{transform:rotate(-75deg) scale(.72);opacity:.25}
  to{transform:rotate(0) scale(1);opacity:1}
}
@keyframes donutBreath{
  0%,100%{filter:drop-shadow(0 0 7px rgba(0,138,255,.2))}
  50%{filter:drop-shadow(0 0 13px rgba(0,177,255,.42))}
}
.quote-row svg path{
  stroke-dasharray:180;
  stroke-dashoffset:180;
  animation:quoteSparkDraw 1.6s ease-out both;
}
.quote-row:nth-of-type(3) svg path{animation-delay:.12s}
.quote-row:nth-of-type(4) svg path{animation-delay:.24s}
.quote-row:nth-of-type(5) svg path{animation-delay:.36s}
@keyframes quoteSparkDraw{to{stroke-dashoffset:0}}
.event-dot{
  animation:eventPulse 2s ease-in-out infinite;
}
.event-list li:nth-child(2) .event-dot{animation-delay:.25s}
.event-list li:nth-child(3) .event-dot{animation-delay:.5s}
.event-list li:nth-child(4) .event-dot{animation-delay:.75s}
.event-list li:nth-child(5) .event-dot{animation-delay:1s}
@keyframes eventPulse{
  0%,100%{opacity:.8;transform:scale(.88);filter:brightness(1)}
  50%{opacity:1;transform:scale(1.22);filter:brightness(1.5)}
}
.warehouse-legend i{
  animation:legendDotGlow 2.8s ease-in-out infinite;
}
.warehouse-legend div:nth-child(2) i{animation-delay:.3s}
.warehouse-legend div:nth-child(3) i{animation-delay:.6s}
.warehouse-legend div:nth-child(4) i{animation-delay:.9s}
.warehouse-legend div:nth-child(5) i{animation-delay:1.2s}
@keyframes legendDotGlow{
  0%,100%{filter:brightness(.95);box-shadow:0 0 2px currentColor}
  50%{filter:brightness(1.5);box-shadow:0 0 8px currentColor}
}
.bottom-live-progress i{
  transform:scaleX(0);
  transform-origin:left center;
  animation:liveProgressIn 1.6s cubic-bezier(.2,.75,.25,1) .45s both;
}
@keyframes liveProgressIn{
  to{transform:scaleX(1)}
}
.bottom-live-panel{
  animation:livePanelGlow 5.5s ease-in-out infinite;
}
@keyframes livePanelGlow{
  0%,100%{box-shadow:inset 0 0 14px rgba(0,117,220,.08),0 0 5px rgba(0,110,210,.04)}
  50%{box-shadow:inset 0 0 22px rgba(0,150,255,.14),0 0 12px rgba(0,150,255,.12)}
}
.transport-mode-card{
  transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;
}
.transport-mode-card:hover{
  transform:translateY(-2px);
  border-color:rgba(63,211,255,.85);
  box-shadow:inset 0 0 18px rgba(17,144,222,.2),0 0 13px rgba(0,170,255,.18);
}
.transport-mode-visual svg{
  animation:transportIconFloat 3.2s ease-in-out infinite;
}
.transport-mode-card:nth-child(2) .transport-mode-visual svg{animation-delay:.45s}
.transport-mode-card:nth-child(3) .transport-mode-visual svg{animation-delay:.9s}
@keyframes transportIconFloat{
  0%,100%{transform:translateY(1px)}
  50%{transform:translateY(-3px)}
}
.tracking-flow:after{
  filter:drop-shadow(0 0 5px #20d7ff);
}
.map-panel,.real-map-wrap{
  background-color:#04172d;
}
@media(prefers-reduced-motion:reduce){
  .kpi-card:after,.kpi-icon img,.chart-area,.bar-track i,.donut,.quote-row svg path,
  .event-dot,.warehouse-legend i,.bottom-live-progress i,.bottom-live-panel,
  .transport-mode-visual svg{
    animation:none!important;
  }
  .chart-area{opacity:1;transform:none}
  .bar-track i,.bottom-live-progress i{transform:none}
  .quote-row svg path{stroke-dashoffset:0}
}


/* =========================================================
   V9.5 全屏动态视觉增强
   原则：低透明度、慢速运动、避让文字与交互，不影响原有布局
   ========================================================= */
.dashboard{
  isolation:isolate;
  background:
    radial-gradient(ellipse at 50% 38%,rgba(9,68,122,.14),transparent 47%),
    linear-gradient(145deg,rgba(3,22,49,.985),rgba(1,11,28,.995));
}
.dashboard > .topbar,
.dashboard > .kpi-row,
.dashboard > .main-grid,
.dashboard > .bottom-grid{
  position:relative;
  z-index:1;
}
.dashboard-fx-canvas{
  position:absolute;
  inset:0;
  z-index:4;
  width:100%;
  height:100%;
  pointer-events:none;
  opacity:.62;
  mix-blend-mode:screen;
}
.screen-scanline{
  position:absolute;
  inset:0;
  z-index:5;
  overflow:hidden;
  pointer-events:none;
  opacity:.42;
  background:repeating-linear-gradient(
    to bottom,
    rgba(107,205,255,.022) 0,
    rgba(107,205,255,.022) 1px,
    transparent 1px,
    transparent 5px
  );
}
.screen-scanline:after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:-24%;
  height:19%;
  background:linear-gradient(
    180deg,
    transparent,
    rgba(36,181,255,.018) 24%,
    rgba(70,209,255,.075) 50%,
    rgba(36,181,255,.018) 76%,
    transparent
  );
  box-shadow:0 0 28px rgba(25,158,255,.08);
  animation:screenScanSweep 13s linear infinite;
}
@keyframes screenScanSweep{
  from{transform:translateY(0)}
  to{transform:translateY(690%)}
}

/* Header: moving light on brand and nav, kept within the header area. */
.brand-title{
  background:linear-gradient(90deg,#dff7ff 0%,#fff 36%,#8de8ff 52%,#eafaff 70%,#dff7ff 100%);
  background-size:220% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  animation:brandLightTravel 8s ease-in-out infinite;
  filter:drop-shadow(0 0 8px rgba(54,184,255,.28));
}
@keyframes brandLightTravel{
  0%,100%{background-position:0% 50%}
  50%{background-position:100% 50%}
}
.topbar{
  overflow:hidden;
}
.topbar:before,.topbar:after{
  animation:headerSignal 4.5s ease-in-out infinite;
}
@keyframes headerSignal{
  0%,100%{opacity:.25;filter:drop-shadow(0 0 0 transparent)}
  50%{opacity:.95;filter:drop-shadow(0 0 6px #22baff)}
}
.nav-item.active{
  animation:navActiveGlow 3.8s ease-in-out infinite;
}
@keyframes navActiveGlow{
  0%,100%{text-shadow:0 0 5px rgba(75,211,255,.4)}
  50%{text-shadow:0 0 12px rgba(75,211,255,.95)}
}
.demo-tag{
  animation:demoTagPulse 3s ease-in-out infinite;
}
@keyframes demoTagPulse{
  0%,100%{box-shadow:0 0 0 rgba(255,182,71,0)}
  50%{box-shadow:0 0 10px rgba(255,182,71,.18)}
}
#clockTime{
  text-shadow:0 0 8px rgba(88,209,255,.35);
}

/* Panels: soft border breathing and corner HUD markers. */
.left-column>.panel,
.right-column>.panel,
.bottom-grid>.panel{
  animation:panelEdgePulse 8.5s ease-in-out infinite;
}
.left-column>.panel:nth-child(2),
.right-column>.panel:nth-child(2),
.bottom-grid>.panel:nth-child(2){animation-delay:1.1s}
.left-column>.panel:nth-child(3),
.right-column>.panel:nth-child(3),
.bottom-grid>.panel:nth-child(3){animation-delay:2.2s}
@keyframes panelEdgePulse{
  0%,100%{
    border-color:rgba(12,117,188,.86);
    box-shadow:inset 0 0 13px rgba(0,117,220,.075),0 0 5px rgba(0,110,210,.035);
  }
  50%{
    border-color:rgba(36,174,239,.95);
    box-shadow:inset 0 0 19px rgba(0,145,230,.12),0 0 10px rgba(0,145,230,.12);
  }
}
.left-column>.panel:after,
.right-column>.panel:after,
.bottom-grid>.panel:after{
  content:"";
  position:absolute;
  z-index:6;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  opacity:.48;
  background:
    linear-gradient(#54dfff,#54dfff) left top/18px 1px no-repeat,
    linear-gradient(#54dfff,#54dfff) left top/1px 18px no-repeat,
    linear-gradient(#54dfff,#54dfff) right top/18px 1px no-repeat,
    linear-gradient(#54dfff,#54dfff) right top/1px 18px no-repeat,
    linear-gradient(#54dfff,#54dfff) left bottom/18px 1px no-repeat,
    linear-gradient(#54dfff,#54dfff) left bottom/1px 18px no-repeat,
    linear-gradient(#54dfff,#54dfff) right bottom/18px 1px no-repeat,
    linear-gradient(#54dfff,#54dfff) right bottom/1px 18px no-repeat;
  animation:panelCornerGlow 5.5s ease-in-out infinite;
}
@keyframes panelCornerGlow{
  0%,100%{opacity:.28}
  50%{opacity:.72}
}
.left-column>.panel:hover,
.right-column>.panel:hover,
.bottom-grid>.panel:hover{
  border-color:rgba(67,203,255,.95);
  box-shadow:inset 0 0 20px rgba(0,144,235,.13),0 0 14px rgba(0,144,235,.13);
}

/* Map: radar sweep, grid pulse and animated hub/alert markers. */
.real-map-wrap{
  overflow:hidden;
  isolation:isolate;
}
.real-map-wrap:before{
  content:"";
  position:absolute;
  inset:-18%;
  z-index:4;
  pointer-events:none;
  opacity:.26;
  mix-blend-mode:screen;
  background:
    radial-gradient(circle at 50% 50%,transparent 0 22%,rgba(57,192,255,.11) 22.15% 22.35%,transparent 22.5% 43%,rgba(57,192,255,.08) 43.15% 43.3%,transparent 43.5%),
    conic-gradient(from 0deg at 50% 50%,transparent 0deg 300deg,rgba(35,183,255,.02) 310deg,rgba(52,204,255,.22) 344deg,transparent 360deg);
  animation:mapRadarSweep 18s linear infinite;
}
@keyframes mapRadarSweep{
  from{transform:rotate(0deg)}
  to{transform:rotate(360deg)}
}
.real-map-legend{z-index:7}
.hub-marker{
  position:relative;
  animation:hubMarkerPulse 3.2s ease-in-out infinite;
}
.hub-marker:before{
  content:"";
  position:absolute;
  inset:-5px;
  border:1px solid rgba(68,207,255,.72);
  border-radius:50%;
  animation:hubPing 2.8s ease-out infinite;
}
.hub-marker.orange:before{border-color:rgba(255,184,91,.78)}
@keyframes hubMarkerPulse{
  0%,100%{filter:brightness(.95);transform:scale(.96)}
  50%{filter:brightness(1.35);transform:scale(1.08)}
}
@keyframes hubPing{
  0%{transform:scale(.55);opacity:.9}
  100%{transform:scale(2.25);opacity:0}
}
.alert-marker{
  position:relative;
  animation:alertBeacon 1.8s ease-in-out infinite;
}
.alert-marker:before{
  content:"";
  position:absolute;
  inset:-5px;
  border:1px solid rgba(255,87,104,.9);
  border-radius:50%;
  animation:alertPing 1.8s ease-out infinite;
}
@keyframes alertBeacon{
  0%,100%{box-shadow:0 0 8px rgba(255,66,83,.55);filter:brightness(.92)}
  50%{box-shadow:0 0 21px rgba(255,66,83,1);filter:brightness(1.22)}
}
@keyframes alertPing{
  0%{transform:scale(.7);opacity:.85}
  100%{transform:scale(2.1);opacity:0}
}
.leaflet-overlay-pane path.route-line{
  animation:leafletDash 3.2s linear infinite,routeGlowPulse 4s ease-in-out infinite;
}
@keyframes routeGlowPulse{
  0%,100%{opacity:.76}
  50%{opacity:1}
}
.transport-icon{
  position:relative;
  animation:transportMarkerBreath 3.8s ease-in-out infinite;
}
.transport-icon:after{
  content:"";
  position:absolute;
  inset:-4px;
  border:1px solid rgba(73,211,255,.34);
  border-radius:50%;
  animation:transportMarkerRing 3.2s ease-out infinite;
}
@keyframes transportMarkerBreath{
  0%,100%{box-shadow:0 0 11px rgba(25,161,255,.2),inset 0 0 8px rgba(71,193,255,.1)}
  50%{box-shadow:0 0 22px rgba(25,190,255,.42),inset 0 0 12px rgba(71,193,255,.2)}
}
@keyframes transportMarkerRing{
  0%{transform:scale(.82);opacity:.55}
  100%{transform:scale(1.55);opacity:0}
}

/* Weather / risk: gentle image scan and highlighted risk rows. */
.weather-content>img{
  animation:weatherMapBreath 7s ease-in-out infinite;
}
@keyframes weatherMapBreath{
  0%,100%{filter:saturate(.94) brightness(.96)}
  50%{filter:saturate(1.12) brightness(1.06)}
}
.risk-counts>div{
  position:relative;
  transition:background .25s ease,transform .25s ease;
}
.risk-counts>div:hover{
  background:rgba(14,115,180,.24);
  transform:translateX(2px);
}
.event-list li{
  transition:background .22s ease,padding-left .22s ease;
}
.event-list li:hover{
  padding-left:7px;
  background:rgba(12,96,155,.18);
}

/* Transport cards and logistics stages: moving light and active-node beacon. */
.transport-card{
  isolation:isolate;
}
.transport-card>*{
  position:relative;
  z-index:1;
}
.transport-card:after{
  content:"";
  position:absolute;
  z-index:2;
  top:-25%;
  bottom:-25%;
  left:-60%;
  width:36%;
  pointer-events:none;
  transform:skewX(-18deg);
  background:linear-gradient(90deg,transparent,rgba(117,224,255,.16),transparent);
  animation:transportCardSweep 6.8s ease-in-out infinite;
}
.transport-card:nth-child(2):after{animation-delay:1.4s}
.transport-card:nth-child(3):after{animation-delay:2.8s}
.transport-card:nth-child(4):after{animation-delay:4.2s}
@keyframes transportCardSweep{
  0%,65%{left:-60%;opacity:0}
  72%{opacity:1}
  100%{left:130%;opacity:0}
}
.track-step.active .track-node{
  animation:trackNodeBeacon 2.1s ease-in-out infinite;
}
.track-step.done .track-node{
  box-shadow:0 0 9px rgba(49,205,255,.3),inset 0 0 12px rgba(22,155,225,.18);
}
.track-step.active .track-status i{
  animation:statusDotBeat 1.2s ease-in-out infinite;
}
@keyframes trackNodeBeacon{
  0%,100%{box-shadow:0 0 8px rgba(35,192,255,.32),inset 0 0 12px rgba(22,155,225,.16)}
  50%{box-shadow:0 0 20px rgba(35,210,255,.72),inset 0 0 18px rgba(22,155,225,.3)}
}
@keyframes statusDotBeat{
  0%,100%{opacity:.55;transform:scale(.82)}
  50%{opacity:1;transform:scale(1.25)}
}
.track-arrow{
  animation:trackArrowGlow 2.8s ease-in-out infinite;
}
@keyframes trackArrowGlow{
  0%,100%{opacity:.55;text-shadow:0 0 2px #1aaaff}
  50%{opacity:1;text-shadow:0 0 9px #1aaaff}
}

/* Bottom transport task bars get a moving highlight in addition to their count-up. */
.bottom-live-progress>div{
  position:relative;
  isolation:isolate;
}
.bottom-live-progress>div:after{
  content:"";
  position:absolute;
  z-index:2;
  inset:0;
  width:28%;
  background:linear-gradient(90deg,transparent,rgba(222,250,255,.48),transparent);
  transform:translateX(-130%);
  animation:progressShine 3.6s ease-in-out infinite;
}
.bottom-live-row:nth-child(2) .bottom-live-progress>div:after{animation-delay:.8s}
.bottom-live-row:nth-child(3) .bottom-live-progress>div:after{animation-delay:1.6s}
.bottom-live-row:nth-child(4) .bottom-live-progress>div:after{animation-delay:2.4s}
@keyframes progressShine{
  0%,35%{transform:translateX(-130%);opacity:0}
  45%{opacity:1}
  100%{transform:translateX(430%);opacity:0}
}
.bottom-live-status{
  animation:statusOutlinePulse 4.2s ease-in-out infinite;
}
.bottom-live-row:nth-child(2) .bottom-live-status{animation-delay:.6s}
.bottom-live-row:nth-child(3) .bottom-live-status{animation-delay:1.2s}
.bottom-live-row:nth-child(4) .bottom-live-status{animation-delay:1.8s}
@keyframes statusOutlinePulse{
  0%,100%{box-shadow:0 0 0 rgba(44,188,255,0)}
  50%{box-shadow:0 0 8px rgba(44,188,255,.16)}
}

/* Reduced-motion accessibility: keep the dashboard legible and static. */
@media(prefers-reduced-motion:reduce){
  .dashboard-fx-canvas{display:none}
  .screen-scanline{display:none}
  .brand-title,.topbar:before,.topbar:after,.nav-item.active,.demo-tag,
  .left-column>.panel,.right-column>.panel,.bottom-grid>.panel,
  .left-column>.panel:after,.right-column>.panel:after,.bottom-grid>.panel:after,
  .real-map-wrap:before,.hub-marker,.hub-marker:before,.alert-marker,.alert-marker:before,
  .leaflet-overlay-pane path.route-line,.transport-icon,.transport-icon:after,
  .weather-content>img,.transport-card:after,.track-step.active .track-node,
  .track-step.active .track-status i,.track-arrow,.bottom-live-progress>div:after,
  .bottom-live-status{
    animation:none!important;
  }
}


/* ===== V9.6 数字动态变化：平滑计数 + 变化瞬间高亮 ===== */
.counter-value{
  display:inline-block;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
  will-change:contents,transform,filter;
  transform-origin:50% 55%;
}
.counter-value.number-changing{
  animation:numberValueFlash .82s cubic-bezier(.2,.72,.24,1);
}
.counter-value.number-changing.number-up{
  --number-flash:rgba(62,224,255,.95);
}
.counter-value.number-changing.number-down{
  --number-flash:rgba(255,190,92,.92);
}
@keyframes numberValueFlash{
  0%{transform:translateY(3px) scale(.94);filter:brightness(1.85);text-shadow:0 0 13px var(--number-flash,rgba(62,224,255,.9))}
  36%{transform:translateY(-1px) scale(1.035);filter:brightness(1.45);text-shadow:0 0 10px var(--number-flash,rgba(62,224,255,.8))}
  100%{transform:translateY(0) scale(1);filter:brightness(1);text-shadow:0 0 0 transparent}
}
.kpi-value .counter-value,.metric-line .counter-value,.warehouse-total .counter-value,.donut-hole .counter-value{
  text-shadow:0 0 8px rgba(49,190,255,.16);
}
.quote-row .counter-value,.bottom-live-summary .counter-value,.transport-mode-meta .counter-value{color:inherit}
@media(prefers-reduced-motion:reduce){.counter-value.number-changing{animation:none!important}}


/* ==========================================================
   V9.7 炫酷视觉增强
   目标：在不改变原有布局与业务内容的前提下，提高动效可见度
   ========================================================== */

:root{
  --fx-cyan:#63eaff;
  --fx-blue:#168cff;
  --fx-mint:#50f0cb;
  --fx-orange:#ffbd62;
  --fx-red:#ff5e79;
}

/* 全屏外框：更明确的电能边缘与呼吸光 */
.dashboard{
  border-color:rgba(50,190,255,.96)!important;
  box-shadow:
    0 0 16px rgba(0,171,255,.48),
    0 0 46px rgba(0,132,255,.30),
    0 0 110px rgba(0,93,255,.13),
    inset 0 0 48px rgba(0,145,255,.15)!important;
  animation:dashboardPowerPulse 4.8s ease-in-out infinite;
}
@keyframes dashboardPowerPulse{
  0%,100%{
    box-shadow:0 0 14px rgba(0,171,255,.36),0 0 42px rgba(0,132,255,.22),0 0 95px rgba(0,93,255,.10),inset 0 0 38px rgba(0,145,255,.11);
  }
  50%{
    box-shadow:0 0 24px rgba(50,211,255,.62),0 0 68px rgba(0,132,255,.36),0 0 125px rgba(0,93,255,.18),inset 0 0 58px rgba(0,166,255,.19);
  }
}
.dashboard:after{
  height:3px!important;
  background:linear-gradient(90deg,transparent,#28aaff 12%,#d5fbff 27%,#26caff 44%,#8dfff0 57%,#1aa8ff 76%,transparent)!important;
  background-size:220% 100%!important;
  animation:topEnergyRail 3.8s linear infinite!important;
  box-shadow:0 0 10px #27caff,0 0 25px rgba(34,180,255,.75)!important;
}
@keyframes topEnergyRail{
  from{background-position:100% 0}
  to{background-position:-120% 0}
}

/* 粒子网络和全屏扫描线：从装饰性弱光提升为可见的空间氛围 */
.dashboard-fx-canvas{
  opacity:.92!important;
  filter:drop-shadow(0 0 5px rgba(38,185,255,.24));
}
.screen-scanline{
  opacity:.72!important;
  background:repeating-linear-gradient(
    to bottom,
    rgba(107,215,255,.038) 0,
    rgba(107,215,255,.038) 1px,
    transparent 1px,
    transparent 4px
  )!important;
}
.screen-scanline:after{
  top:-18%!important;
  height:14%!important;
  background:linear-gradient(
    180deg,
    transparent,
    rgba(36,181,255,.035) 18%,
    rgba(70,209,255,.19) 48%,
    rgba(36,181,255,.055) 78%,
    transparent
  )!important;
  box-shadow:0 0 34px rgba(25,158,255,.28),0 0 70px rgba(25,158,255,.13)!important;
  animation:screenScanSweep 7.5s linear infinite!important;
}
@keyframes screenScanSweep{
  from{transform:translateY(0)}
  to{transform:translateY(820%)}
}

/* 标题：更亮的金属蓝白光 */
.brand-title{
  filter:drop-shadow(0 0 8px rgba(54,184,255,.55)) drop-shadow(0 0 20px rgba(40,177,255,.22))!important;
  animation:brandLightTravel 5.2s ease-in-out infinite!important;
}
.brand-sub{
  text-shadow:0 0 8px rgba(57,195,255,.5);
}

/* KPI：每张卡片都有呼吸光和更强的扫光 */
.kpi-card{
  border-color:rgba(28,163,239,.88)!important;
  background:
    linear-gradient(145deg,rgba(7,55,103,.94),rgba(2,18,42,.98))!important;
  box-shadow:
    inset 0 0 22px rgba(0,155,255,.17),
    0 0 12px rgba(0,142,255,.18),
    0 0 25px rgba(0,142,255,.08)!important;
  animation:kpiCardPower 4.2s ease-in-out infinite;
  transition:transform .28s ease,filter .28s ease,box-shadow .28s ease;
}
.kpi-card:nth-child(2){animation-delay:.35s}
.kpi-card:nth-child(3){animation-delay:.7s}
.kpi-card:nth-child(4){animation-delay:1.05s}
.kpi-card:nth-child(5){animation-delay:1.4s}
.kpi-card:nth-child(6){animation-delay:1.75s}
.kpi-card:nth-child(7){animation-delay:2.1s}
.kpi-card:nth-child(8){animation-delay:2.45s}
@keyframes kpiCardPower{
  0%,100%{border-color:rgba(24,143,220,.78);box-shadow:inset 0 0 16px rgba(0,145,255,.12),0 0 8px rgba(0,142,255,.10)}
  50%{border-color:rgba(75,218,255,.98);box-shadow:inset 0 0 26px rgba(0,170,255,.23),0 0 18px rgba(0,175,255,.30),0 0 30px rgba(0,175,255,.12)}
}
.kpi-card:after{
  width:34%!important;
  background:linear-gradient(90deg,transparent,rgba(124,239,255,.34),rgba(255,255,255,.12),rgba(106,224,255,.32),transparent)!important;
  animation:kpiLightSweep 5.1s ease-in-out infinite!important;
}
@keyframes kpiLightSweep{
  0%,38%{left:-48%;opacity:0}
  45%{opacity:1}
  76%,100%{left:135%;opacity:0}
}
.kpi-icon{
  box-shadow:inset 0 0 18px rgba(0,163,255,.2),0 0 18px rgba(0,151,255,.24)!important;
}
.kpi-icon img{
  filter:drop-shadow(0 0 6px rgba(58,211,255,.8));
}
.kpi-value{
  color:#f1fbff!important;
  text-shadow:0 0 8px rgba(56,174,255,.65),0 0 20px rgba(56,174,255,.25)!important;
}
.kpi-value .counter-value.number-changing{
  animation:numberValueFlash .82s cubic-bezier(.2,.72,.24,1),numberHalo 1.2s ease-out!important;
}
@keyframes numberHalo{
  0%,100%{text-shadow:0 0 0 transparent}
  35%{text-shadow:0 0 14px #71eaff,0 0 28px rgba(30,174,255,.9)}
}

/* 所有信息面板：更鲜明的边缘呼吸，标题底部增加移动能量线 */
.left-column>.panel,
.right-column>.panel,
.bottom-grid>.panel{
  animation:panelNeonBreathe 4.8s ease-in-out infinite!important;
}
.left-column>.panel:nth-child(2),
.right-column>.panel:nth-child(2),
.bottom-grid>.panel:nth-child(2){animation-delay:.75s!important}
.left-column>.panel:nth-child(3),
.right-column>.panel:nth-child(3),
.bottom-grid>.panel:nth-child(3){animation-delay:1.5s!important}
@keyframes panelNeonBreathe{
  0%,100%{
    border-color:rgba(14,126,196,.82);
    box-shadow:inset 0 0 16px rgba(0,117,220,.09),0 0 6px rgba(0,110,210,.06);
  }
  50%{
    border-color:rgba(55,202,255,.98);
    box-shadow:inset 0 0 24px rgba(0,145,230,.18),0 0 17px rgba(0,160,255,.24),0 0 30px rgba(0,145,255,.09);
  }
}
.panel-title{
  position:relative;
  overflow:hidden;
  background:linear-gradient(90deg,rgba(5,58,100,.42),rgba(2,20,43,.04),rgba(5,58,100,.30))!important;
}
.panel-title:after{
  content:"";
  position:absolute;
  left:-35%;
  bottom:0;
  width:35%;
  height:2px;
  pointer-events:none;
  background:linear-gradient(90deg,transparent,#37cfff,#e3fdff,#37cfff,transparent);
  box-shadow:0 0 9px #29caff,0 0 18px rgba(41,202,255,.6);
  animation:titleEnergyRail 4.2s linear infinite;
}
@keyframes titleEnergyRail{
  0%{left:-38%;opacity:0}
  12%{opacity:1}
  100%{left:110%;opacity:.15}
}
.panel:after{
  opacity:.85!important;
  animation:panelCornerGlow 3.3s ease-in-out infinite!important;
}
@keyframes panelCornerGlow{
  0%,100%{opacity:.42}
  50%{opacity:1}
}

/* 中央地图：更强雷达扫描、网格和扫过地图的能量束 */
.real-map-wrap:before{
  opacity:.52!important;
  inset:-22%!important;
  background:
    radial-gradient(circle at 50% 50%,transparent 0 18%,rgba(57,192,255,.20) 18.12% 18.35%,transparent 18.55% 36%,rgba(57,192,255,.15) 36.12% 36.34%,transparent 36.55% 54%,rgba(57,192,255,.10) 54.12% 54.28%,transparent 54.5%),
    conic-gradient(from 0deg at 50% 50%,transparent 0deg 286deg,rgba(35,183,255,.015) 300deg,rgba(52,204,255,.32) 338deg,rgba(102,235,255,.10) 350deg,transparent 360deg)!important;
  animation:mapRadarSweep 11s linear infinite!important;
}
.real-map-wrap:after{
  z-index:5!important;
  pointer-events:none!important;
  mix-blend-mode:screen;
  background:
    repeating-linear-gradient(90deg,transparent 0 54px,rgba(67,194,255,.055) 55px,transparent 56px),
    repeating-linear-gradient(0deg,transparent 0 42px,rgba(67,194,255,.045) 43px,transparent 44px),
    linear-gradient(112deg,transparent 0 40%,rgba(60,211,255,.02) 45%,rgba(97,232,255,.24) 49%,rgba(60,211,255,.035) 53%,transparent 60% 100%)!important;
  background-size:auto,auto,240% 100%!important;
  background-position:0 0,0 0,-150% 0!important;
  animation:mapEnergySweep 6.2s linear infinite!important;
}
@keyframes mapEnergySweep{
  0%{background-position:0 0,0 0,-150% 0}
  100%{background-position:0 0,0 0,150% 0}
}
.leaflet-overlay-pane path.route-line{
  stroke-width:5!important;
  animation:leafletDash 1.8s linear infinite!important;
}
.leaflet-overlay-pane path.route-sea-line{filter:drop-shadow(0 0 5px #31d7ff) drop-shadow(0 0 11px rgba(49,215,255,.7))!important}
.leaflet-overlay-pane path.route-air-line{filter:drop-shadow(0 0 6px #ffb24c) drop-shadow(0 0 12px rgba(255,180,76,.65))!important}
.leaflet-overlay-pane path.route-rail-line{filter:drop-shadow(0 0 6px #46e7b6) drop-shadow(0 0 12px rgba(70,231,182,.62))!important}
.leaflet-overlay-pane path.route-road-line{filter:drop-shadow(0 0 6px #f8de5f) drop-shadow(0 0 12px rgba(248,222,95,.65))!important}
.transport-icon{
  width:40px!important;
  height:40px!important;
  border-color:rgba(109,228,255,.78)!important;
  box-shadow:0 0 18px rgba(25,161,255,.55),0 0 34px rgba(25,161,255,.26),inset 0 0 16px rgba(71,193,255,.25)!important;
  animation:transportBeacon 2.1s ease-in-out infinite;
}
.transport-icon svg{
  filter:drop-shadow(0 0 5px currentColor);
}
@keyframes transportBeacon{
  0%,100%{transform:scale(.94);filter:brightness(.95)}
  50%{transform:scale(1.13);filter:brightness(1.45)}
}
.hub-marker{
  box-shadow:0 0 0 5px rgba(37,191,255,.23),0 0 18px rgba(37,191,255,1),0 0 32px rgba(37,191,255,.42)!important;
}
.hub-marker:before{
  inset:-8px!important;
  border-width:2px!important;
  animation:hubPing 1.8s ease-out infinite!important;
}
.alert-marker{
  box-shadow:0 0 18px rgba(255,66,83,1),0 0 38px rgba(255,66,83,.5)!important;
  animation:alertBeacon 1.25s ease-in-out infinite!important;
}
.real-map-legend{
  border-color:rgba(82,207,255,.86)!important;
  box-shadow:0 0 22px rgba(0,150,255,.34),0 0 40px rgba(0,150,255,.13),inset 0 0 18px rgba(0,123,214,.14)!important;
}
.real-map-legend .legend-line{
  height:3px!important;
  border:0!important;
  background:repeating-linear-gradient(90deg,currentColor 0 8px,transparent 8px 12px);
  animation:legendEnergy 1.1s linear infinite;
}
@keyframes legendEnergy{to{background-position:24px 0}}

/* 图表：曲线流动、节点呼吸、柱状能量纹理 */
.chart-line{
  stroke-width:2.8!important;
  stroke-dasharray:12 5;
  animation:chartSignalFlow 2.3s linear infinite;
  filter:drop-shadow(0 0 5px #159fff) drop-shadow(0 0 11px rgba(21,159,255,.55))!important;
}
@keyframes chartSignalFlow{to{stroke-dashoffset:-68}}
.chart-dot{
  animation:chartDotPower 1.35s ease-in-out infinite!important;
}
@keyframes chartDotPower{
  0%,100%{r:3;filter:drop-shadow(0 0 4px #00aaff)}
  50%{r:5;filter:drop-shadow(0 0 10px #6beaff)}
}
.bar-track{
  box-shadow:inset 0 0 9px rgba(0,126,255,.24),0 0 7px rgba(0,126,255,.1);
}
.bar-track i{
  background-size:220% 100%!important;
  transform:scaleX(1)!important;
  animation:barGrowIn 1.35s cubic-bezier(.2,.75,.25,1) .25s both,barEnergyFlow 2s linear 1.6s infinite!important;
  box-shadow:0 0 10px rgba(28,167,255,.78),0 0 18px rgba(28,167,255,.26)!important;
}
@keyframes barEnergyFlow{
  from{background-position:100% 0}
  to{background-position:-120% 0}
}
.donut{
  animation:donutPowerPulse 2.8s ease-in-out infinite;
}
@keyframes donutPowerPulse{
  0%,100%{filter:drop-shadow(0 0 8px rgba(0,138,255,.25)) brightness(1)}
  50%{filter:drop-shadow(0 0 20px rgba(0,166,255,.62)) brightness(1.16)}
}

/* 运价火花线：让走势线更亮且持续流动 */
.quote-row svg path{
  stroke-width:2.3!important;
  stroke-dasharray:9 5;
  animation:quoteSignal 2.4s linear infinite;
  filter:drop-shadow(0 0 4px currentColor) drop-shadow(0 0 9px rgba(42,194,255,.42))!important;
}
@keyframes quoteSignal{to{stroke-dashoffset:-56}}
.quote-row:nth-of-type(3) svg path{filter:drop-shadow(0 0 5px #ff9b59)!important}
.quote-row:nth-of-type(4) svg path{filter:drop-shadow(0 0 5px #40dcae)!important}

/* 风险事件与状态点：更清楚的警示节奏 */
.event-dot,.live-dot:before,.transport-live i{
  box-shadow:0 0 8px currentColor,0 0 16px currentColor!important;
  animation:eventBeacon 1.35s ease-in-out infinite;
}
@keyframes eventBeacon{
  0%,100%{transform:scale(.88);filter:brightness(.95)}
  50%{transform:scale(1.35);filter:brightness(1.65)}
}
.event-trigger{
  transition:background .2s ease,transform .2s ease;
}
.event-trigger:hover{
  background:rgba(17,118,183,.26)!important;
  transform:translateX(3px);
}

/* 底部货物链路：节点灯更亮，运行中的节点轮流强化 */
.track-node{
  box-shadow:0 0 10px rgba(20,173,255,.46),inset 0 0 12px rgba(20,173,255,.2)!important;
}
.track-step.active .track-node,
.track-step.done .track-node{
  animation:trackNodePower 1.9s ease-in-out infinite!important;
}
.track-step:nth-child(2) .track-node{animation-delay:.22s!important}
.track-step:nth-child(3) .track-node{animation-delay:.44s!important}
.track-step:nth-child(4) .track-node{animation-delay:.66s!important}
.track-step:nth-child(5) .track-node{animation-delay:.88s!important}
@keyframes trackNodePower{
  0%,100%{box-shadow:0 0 8px rgba(20,173,255,.3),inset 0 0 8px rgba(20,173,255,.12);filter:brightness(.95)}
  50%{box-shadow:0 0 18px rgba(44,207,255,.9),0 0 30px rgba(20,173,255,.42),inset 0 0 14px rgba(20,173,255,.3);filter:brightness(1.35)}
}
.tracking-flow:after{
  width:10px!important;
  height:10px!important;
  box-shadow:0 0 8px 3px #1ccaff,0 0 22px #1ccaff,0 0 38px rgba(28,202,255,.65)!important;
  animation:trackingSignal 3.2s linear infinite!important;
}
.bottom-live-panel{
  box-shadow:inset 0 0 24px rgba(0,117,220,.16),0 0 18px rgba(0,150,255,.2)!important;
  animation:livePanelGlow 3.2s ease-in-out infinite!important;
}
@keyframes livePanelGlow{
  0%,100%{box-shadow:inset 0 0 15px rgba(0,117,220,.1),0 0 8px rgba(0,110,210,.08)}
  50%{box-shadow:inset 0 0 28px rgba(0,150,255,.22),0 0 22px rgba(0,150,255,.30),0 0 36px rgba(0,150,255,.12)}
}
.bottom-live-progress>div{
  position:relative;
  height:6px!important;
  box-shadow:0 0 8px rgba(46,201,255,.25);
}
.bottom-live-progress i{
  background:linear-gradient(90deg,#087ed0,#25c5ff,#b7f7ff,#25c5ff)!important;
  background-size:220% 100%!important;
  animation:progressEnergy 1.7s linear infinite!important;
  box-shadow:0 0 8px rgba(46,201,255,.82),0 0 18px rgba(46,201,255,.4)!important;
}
@keyframes progressEnergy{
  from{background-position:100% 0}
  to{background-position:-120% 0}
}
.bottom-live-summary b{
  text-shadow:0 0 8px rgba(61,198,255,.55),0 0 18px rgba(61,198,255,.24)!important;
}
.transport-mode-card{
  box-shadow:inset 0 0 18px rgba(17,144,222,.2),0 0 12px rgba(0,134,220,.18)!important;
}
.transport-mode-card:before{
  content:"";
  position:absolute;
  z-index:0;
  top:-70%;
  bottom:-70%;
  left:-55%;
  width:28%;
  pointer-events:none;
  transform:skewX(-22deg);
  background:linear-gradient(90deg,transparent,rgba(92,230,255,.32),rgba(255,255,255,.12),transparent);
  animation:transportEnergySweep 4.8s ease-in-out infinite;
}
.transport-mode-card:nth-child(2):before{animation-delay:1.2s}
.transport-mode-card:nth-child(3):before{animation-delay:2.4s}
@keyframes transportEnergySweep{
  0%,28%{left:-55%;opacity:0}
  38%{opacity:1}
  78%,100%{left:135%;opacity:0}
}

/* 尊重系统减少动态效果的设置 */
@media(prefers-reduced-motion:reduce){
  .dashboard,.dashboard:after,.screen-scanline:after,.kpi-card,.kpi-card:after,
  .left-column>.panel,.right-column>.panel,.bottom-grid>.panel,
  .real-map-wrap:before,.real-map-wrap:after,.chart-line,.chart-dot,
  .bar-track i,.donut,.quote-row svg path,.event-dot,.live-dot:before,
  .transport-live i,.track-node,.tracking-flow:after,.bottom-live-panel,
  .bottom-live-progress i,.transport-mode-card:before{
    animation:none!important;
  }
}