:root {
  --bg: #030d20;
  --panel: rgba(9, 29, 62, 0.88);
  --panel-light: rgba(15, 43, 87, 0.76);
  --line: rgba(91, 148, 223, 0.22);
  --blue: #315cff;
  --cyan: #24d8ff;
  --green: #35e5b0;
  --text: #e9f2ff;
  --muted: #8197b7;
}

* { box-sizing: border-box; }
html { min-width: 1280px; background: var(--bg); }
body { margin: 0; color: var(--text); font-family: "Microsoft YaHei", "PingFang SC", system-ui, sans-serif; background: radial-gradient(circle at 50% 0, #102d60 0, #061630 32%, #030c1e 72%); }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
.dashboard-shell { position: relative; min-height: 100vh; overflow: hidden; }
.dashboard-shell::before { content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .2; background-image: linear-gradient(rgba(80, 135, 205, .1) 1px, transparent 1px), linear-gradient(90deg, rgba(80, 135, 205, .1) 1px, transparent 1px); background-size: 56px 56px; mask-image: linear-gradient(#000, transparent 90%); }
.dashboard-header { position: relative; z-index: 3; height: 86px; padding: 0 2.3vw; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; border-bottom: 1px solid var(--line); background: rgba(3, 13, 32, .72); backdrop-filter: blur(18px); }
.dashboard-header::after { content: ""; position: absolute; bottom: -1px; left: 50%; width: 420px; height: 2px; transform: translateX(-50%); background: linear-gradient(90deg, transparent, var(--cyan), transparent); }
.dashboard-brand { display: flex; align-items: center; gap: 12px; }
.brand-mark { position: relative; width: 38px; height: 38px; display: inline-block; transform: rotate(45deg); border-radius: 9px; background: linear-gradient(135deg, var(--cyan), var(--blue)); box-shadow: 0 0 24px rgba(36,216,255,.28); }
.brand-mark i { position: absolute; background: #071a3c; border-radius: 3px; }
.brand-mark i:first-child { width: 7px; height: 23px; left: 10px; top: 7px; }
.brand-mark i:last-child { height: 7px; width: 23px; left: 7px; top: 10px; }
.dashboard-brand > span:last-child { display: flex; flex-direction: column; }
.dashboard-brand strong { font-size: 17px; letter-spacing: 3px; }
.dashboard-brand small { margin-top: 3px; color: #7790b4; font-size: 9px; letter-spacing: 3px; }
.header-title { text-align: center; }
.header-title p { margin: 0 0 5px; color: #689bc4; font-size: 9px; letter-spacing: 4px; }
.header-title h1 { margin: 0; font-size: 26px; letter-spacing: 4px; text-shadow: 0 0 24px rgba(36,216,255,.35); }
.header-tools { display: flex; align-items: center; justify-content: flex-end; gap: 14px; font-size: 11px; }
.status { color: #9bb0ca; }
.status i, .map-head small i, .live-panel .panel-head small i { width: 6px; height: 6px; margin-right: 6px; display: inline-block; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px var(--green); }
.demo-label { padding: 6px 9px; color: #79eaff; border: 1px solid rgba(36,216,255,.3); background: rgba(36,216,255,.06); }
.clock { min-width: 92px; display: flex; flex-direction: column; text-align: right; }
.clock strong { font: 700 15px Arial; letter-spacing: 1px; }
.clock small { margin-top: 2px; color: #6f86a8; font-size: 9px; }
.header-tools > a { padding: 9px 12px; border: 1px solid var(--line); color: #aec2de; }
main { position: relative; z-index: 2; padding: 20px 2.3vw 18px; }
.section-bar { height: 36px; margin-bottom: 12px; display: flex; align-items: center; justify-content: space-between; }
.section-bar > div:first-child { display: flex; align-items: center; }
.section-bar span { color: var(--cyan); font: 700 10px Arial; }
.section-bar h2 { margin: 0 14px; font-size: 15px; letter-spacing: 1px; }
.section-bar em { padding-left: 14px; color: #60799f; border-left: 1px solid var(--line); font-size: 9px; font-style: normal; }
.section-bar em b { color: #8aa9ca; font-weight: 400; }
.period-tabs { display: flex; border: 1px solid var(--line); }
.period-tabs button { padding: 6px 14px; color: #7189aa; border: 0; border-right: 1px solid var(--line); background: transparent; cursor: pointer; font-size: 10px; }
.period-tabs button:last-child { border: 0; }
.period-tabs button.is-active { color: #fff; background: linear-gradient(120deg, #234ee1, #2474f1); }
.summary-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.summary-grid article { position: relative; min-height: 100px; padding: 15px 16px; display: flex; align-items: center; gap: 14px; overflow: hidden; border: 1px solid var(--line); background: linear-gradient(135deg, rgba(17,48,93,.9), rgba(7,27,61,.9)); box-shadow: inset 0 1px rgba(255,255,255,.03); }
.summary-grid article::after { content: ""; position: absolute; right: -40px; bottom: -60px; width: 120px; height: 120px; border: 1px solid rgba(52,106,255,.15); transform: rotate(45deg); }
.summary-grid img { width: 54px; height: 54px; flex: 0 0 auto; border-radius: 13px; box-shadow: 0 0 22px rgba(49,92,255,.18); }
.summary-grid p { margin: 0 0 7px; color: #8ea5c4; font-size: 10px; }
.summary-grid strong { font: 700 25px Arial; }
.summary-grid small { margin-left: 4px; color: #6c85aa; font-size: 9px; }
.summary-grid em { display: block; margin-top: 5px; color: #627c9f; font-size: 8px; font-style: normal; }
.summary-grid em b { margin-right: 4px; color: var(--green); }
.dashboard-grid { margin-top: 14px; display: grid; grid-template-columns: minmax(300px, 25%) minmax(550px, 46%) minmax(300px, 29%); gap: 12px; }
.column { min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.panel { position: relative; border: 1px solid var(--line); background: linear-gradient(145deg, rgba(9,29,62,.94), rgba(5,20,47,.9)); box-shadow: inset 0 1px rgba(255,255,255,.025), 0 15px 40px rgba(0,0,0,.12); }
.panel::before, .panel::after { content: ""; position: absolute; width: 12px; height: 12px; pointer-events: none; }
.panel::before { top: -1px; left: -1px; border-top: 1px solid var(--cyan); border-left: 1px solid var(--cyan); }
.panel::after { right: -1px; bottom: -1px; border-right: 1px solid #315cff; border-bottom: 1px solid #315cff; }
.panel-head { height: 42px; padding: 0 15px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.panel-head > div { display: flex; align-items: center; }
.panel-head > div > span { width: 3px; height: 13px; margin-right: 9px; background: linear-gradient(var(--cyan), var(--blue)); box-shadow: 0 0 8px var(--cyan); }
.panel-head h2 { margin: 0; font-size: 12px; letter-spacing: .5px; }
.panel-head small { color: #647d9f; font-size: 9px; }
.trend-panel { min-height: 288px; }
.trend-chart { position: relative; height: 204px; padding: 16px 20px 20px 35px; }
.trend-chart svg { width: 100%; height: 160px; overflow: visible; }
.grid-lines path { fill: none; stroke: rgba(91,148,223,.14); stroke-width: 1; }
.area { fill: url(#areaBlue); }
.main-line { fill: none; stroke: url(#lineCyan); stroke-width: 3; filter: drop-shadow(0 0 5px rgba(36,216,255,.45)); }
.points circle { fill: #0a2250; stroke: #37dbff; stroke-width: 2; }
.axis-labels { position: absolute; top: 13px; bottom: 27px; left: 11px; display: flex; flex-direction: column; justify-content: space-between; color: #465e7f; font: 8px Arial; }
.x-labels { display: flex; justify-content: space-between; color: #4e6688; font: 8px Arial; }
.chart-legend { padding: 0 16px 13px; display: flex; gap: 16px; color: #657e9f; font-size: 8px; }
.chart-legend i { width: 14px; height: 2px; margin-right: 5px; display: inline-block; vertical-align: middle; }
.chart-legend i.blue { background: #315cff; }.chart-legend i.cyan { background: #24d8ff; }
.chart-legend strong { margin-left: auto; color: #758cab; font-weight: 400; }.chart-legend strong b { color: var(--cyan); font-size: 12px; }
.capability-panel { min-height: 244px; }
.capability-content { padding: 15px 18px; display: grid; grid-template-columns: 145px 1fr; align-items: center; gap: 10px; }
.donut { width: 130px; height: 130px; display: grid; place-items: center; border-radius: 50%; background: conic-gradient(#2f6bff 0 26.8%, #25d9ff 26.8% 48.3%, #7a5cff 48.3% 65.9%, #25d2a5 65.9% 79.1%, #ff6ba8 79.1% 100%); box-shadow: 0 0 25px rgba(49,92,255,.18); }
.donut::before { content: ""; position: absolute; width: 88px; height: 88px; border-radius: 50%; background: #091c3c; }
.donut div { position: relative; z-index: 1; text-align: center; }.donut strong { display: block; font: 700 16px Arial; }.donut span { color: #6681a6; font-size: 8px; }
.capability-list { margin: 0; padding: 0; list-style: none; }
.capability-list li { padding: 5px 0; display: grid; grid-template-columns: 8px 1fr auto; align-items: center; gap: 7px; color: #7f96b6; font-size: 9px; }
.capability-list li i { width: 5px; height: 5px; border-radius: 50%; background: var(--color); box-shadow: 0 0 6px var(--color); }.capability-list li b { color: #b6c9e2; font: 400 9px Arial; }
.park-stage { min-height: 390px; }.map-head small { color: var(--green); }
.park-visual { position: relative; height: 346px; overflow: hidden; }
.park-visual > img, .map-shade { position: absolute; inset: 0; width: 100%; height: 100%; }.park-visual > img { object-fit: cover; opacity: .55; }.map-shade { background: radial-gradient(circle at center, rgba(25,93,200,.06), rgba(3,15,38,.72) 78%), linear-gradient(0deg, rgba(4,17,42,.95), transparent 58%); }
.central-node { position: absolute; z-index: 2; top: 50%; left: 50%; width: 126px; height: 126px; display: grid; place-items: center; transform: translate(-50%,-50%); border: 1px solid rgba(36,216,255,.65); border-radius: 50%; background: radial-gradient(circle, rgba(30,107,235,.7), rgba(10,35,76,.25) 64%, transparent 65%); box-shadow: 0 0 40px rgba(36,216,255,.22), inset 0 0 25px rgba(36,216,255,.16); text-align: center; }
.central-node::before, .central-node::after { content:""; position:absolute; border:1px solid rgba(80,136,255,.25); border-radius:50%; animation:pulse 3s infinite; }.central-node::before{inset:-18px}.central-node::after{inset:-35px;animation-delay:1.3s}.central-node strong { display:block; font-size:14px; }.central-node span { color:#79dcff; font-size:8px; }
@keyframes pulse { 0%,100%{opacity:.2;transform:scale(.96)}50%{opacity:.7;transform:scale(1.03)} }
.park-node { position: absolute; z-index: 3; min-width: 100px; padding: 8px 10px 8px 18px; color: #bdd0e8; border: 1px solid rgba(68,134,228,.3); background: rgba(4,25,58,.82); font-size: 8px; }.park-node i { position:absolute;left:8px;top:12px;width:4px;height:4px;border-radius:50%;background:var(--cyan);box-shadow:0 0 7px var(--cyan)}.park-node strong{display:block;font-size:9px}.park-node span{display:block;margin-top:3px;color:#54749c}.node-a{top:18%;left:9%}.node-b{top:16%;right:8%}.node-c{bottom:25%;left:7%}.node-d{right:7%;bottom:24%}
.orbit { position:absolute;z-index:1;top:50%;left:50%;border:1px dashed rgba(65,146,255,.28);border-radius:50%;transform:translate(-50%,-50%) rotate(-8deg) }.orbit-one{width:68%;height:45%}.orbit-two{width:86%;height:65%;transform:translate(-50%,-50%) rotate(11deg)}
.visual-stats { position:absolute;z-index:4;bottom:0;left:0;right:0;height:42px;display:grid;grid-template-columns:repeat(3,1fr);align-items:center;border-top:1px solid var(--line);background:rgba(4,17,42,.86);text-align:center;color:#6480a5;font-size:8px}.visual-stats span{border-right:1px solid var(--line)}.visual-stats span:last-child{border:0}.visual-stats b{margin-right:5px;color:#dceaff;font:700 13px Arial}
.live-panel { min-height: 172px; }.live-panel .panel-head small { color:var(--green) }.task-table{font-size:8px}.table-row{min-height:25px;padding:0 12px;display:grid;grid-template-columns:1.25fr .75fr 1.5fr .65fr .65fr;align-items:center;color:#738bae;border-bottom:1px solid rgba(91,148,223,.1)}.table-row:last-child{border:0}.table-row span:nth-child(1),.table-row span:nth-child(3){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.table-head{min-height:24px;color:#4f6d94;background:rgba(27,63,113,.22)}.table-row i{width:5px;height:5px;margin-right:5px;display:inline-block;border-radius:50%}.table-row i.running{background:#ffbf42;box-shadow:0 0 6px #ffbf42}.table-row i.success{background:var(--green);box-shadow:0 0 6px var(--green)}
.rank-panel { min-height: 240px; }.rank-list{margin:0;padding:9px 15px;list-style:none}.rank-list li{padding:9px 0;display:grid;grid-template-columns:24px 1fr 40px;align-items:center;gap:8px;border-bottom:1px solid rgba(91,148,223,.1)}.rank-list li:last-child{border:0}.rank-list em{width:20px;height:20px;display:grid;place-items:center;color:#6f89aa;border:1px solid var(--line);font:700 9px Arial;font-style:normal}.rank-list li:nth-child(-n+3) em{color:#fff;border-color:transparent;background:linear-gradient(135deg,#315cff,#24aaff)}.rank-list strong{display:block;margin-bottom:5px;color:#9fb4ce;font-size:9px;font-weight:400}.rank-list div span{height:3px;display:block;background:#112a51}.rank-list div i{height:100%;display:block;background:linear-gradient(90deg,#315cff,#24d8ff)}.rank-list li>b{color:#7f9bbc;font:400 9px Arial;text-align:right}
.resource-panel { min-height: 218px; }.resource-main{padding:13px 16px 8px;display:grid;grid-template-columns:110px 1fr;align-items:center;gap:14px}.gauge{position:relative;width:104px;height:104px;display:grid;place-items:center;border-radius:50%;background:conic-gradient(#24d8ff 0 30%,#315cff 30% 68.5%,#132b51 68.5%)}.gauge::before{content:"";position:absolute;inset:10px;border-radius:50%;background:#091d3e}.gauge div{position:relative;z-index:1;text-align:center}.gauge strong{display:block;font:700 17px Arial}.gauge span{color:#607fa7;font-size:7px}.resource-numbers p{margin:0;padding:5px 0;display:flex;justify-content:space-between;color:#637fa3;border-bottom:1px solid rgba(91,148,223,.1);font-size:8px}.resource-numbers b{color:#b9cee7;font:400 10px Arial}.resource-bars{padding:0 16px 12px}.resource-bars p{margin:6px 0}.resource-bars p>span{display:flex;justify-content:space-between;color:#607da2;font-size:7px}.resource-bars p>span b{color:#8da8c7;font-weight:400}.resource-bars p>i{height:3px;margin-top:4px;display:block;background:#10294f}.resource-bars em{height:100%;display:block;background:linear-gradient(90deg,#315cff,#24d8ff)}
.outcome-panel{min-height:122px}.outcome-mini-grid{display:grid;grid-template-columns:repeat(2,1fr)}.outcome-mini-grid div{padding:10px 13px;border-right:1px solid rgba(91,148,223,.1);border-bottom:1px solid rgba(91,148,223,.1)}.outcome-mini-grid div:nth-child(even){border-right:0}.outcome-mini-grid strong{display:block;color:#dceaff;font:700 14px Arial}.outcome-mini-grid span{color:#59779f;font-size:7px}
footer{position:relative;z-index:2;height:34px;padding:0 2.3vw;display:flex;align-items:center;justify-content:space-between;color:#4f698e;border-top:1px solid var(--line);background:rgba(3,13,32,.85);font-size:8px}footer p{margin:0}footer a{color:#7395bc}footer a b{margin-left:5px;color:var(--cyan)}
@media (max-width: 1500px) { .dashboard-grid{grid-template-columns:24% 48% 28%}.summary-grid article{padding:12px}.summary-grid img{width:46px;height:46px}.summary-grid strong{font-size:21px}.capability-content{grid-template-columns:125px 1fr}.donut{width:112px;height:112px}.donut::before{width:74px;height:74px}.header-tools{gap:8px}.status{display:none} }