*{box-sizing:border-box}
:root{
  --bg:#020d25;--panel:#031a3b;--panel2:#06234b;--line:#0879dc;--line2:#0752a1;
  --text:#edf6ff;--muted:#91b5dc;--cyan:#13b8ff;--blue:#187ee8;--yellow:#ffd12a;
  --green:#75d34d;--orange:#ffb11b;--red:#ff4e4e;
  /* 视口流式单位，宽屏放大、窄屏缩小，整体不扭曲 */
  --u:clamp(.7rem, .78vw, .92rem);     /* 基准字号 ≈ 11~14.7px @ 900~1920+ */
}
html,body{margin:0;min-height:100%;background:#020b20;color:var(--text);font-family:"Microsoft YaHei","PingFang SC","Noto Sans CJK SC",Arial,sans-serif}
body{overflow-x:auto}
.dashboard{width:100%;min-height:100vh;padding:clamp(8px,.7vw,14px) clamp(8px,.9vw,16px) 10px;background:
 radial-gradient(circle at 50% -15%,rgba(16,93,184,.18),transparent 38%),
 linear-gradient(180deg,#010a20 0%,#021332 50%,#020d24 100%)}
.hero{height:clamp(42px,3.2vw,52px);position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden}
.hero h1{margin:0;position:relative;z-index:2;font-size:clamp(20px,2.1vw,32px);letter-spacing:clamp(2px,.3vw,4px);font-weight:800;color:#f3f8ff;text-shadow:0 0 12px rgba(40,159,255,.25)}
.hero-lines{position:absolute;top:3px;width:31%;height:42px;opacity:.9}
.hero-lines:before,.hero-lines:after{content:"";position:absolute;height:2px;background:#087fdf;box-shadow:0 0 8px #0b8df5}
.hero-lines.left{left:3%;background:linear-gradient(135deg,transparent 68%,#0a83e5 68%,#0a83e5 70%,transparent 70%),linear-gradient(180deg,transparent 30%,#0b7fdd 31%,transparent 33%)}
.hero-lines.left:before{left:0;right:42%;top:11px}.hero-lines.left:after{left:38%;right:5%;top:28px}
.hero-lines.right{right:3%;transform:scaleX(-1);background:linear-gradient(135deg,transparent 68%,#0a83e5 68%,#0a83e5 70%,transparent 70%),linear-gradient(180deg,transparent 30%,#0b7fdd 31%,transparent 33%)}
.hero-lines.right:before{left:0;right:42%;top:11px}.hero-lines.right:after{left:38%;right:5%;top:28px}

.kpi-row{display:grid;grid-template-columns:repeat(9,1fr);gap:clamp(5px,.5vw,8px);margin-bottom:10px}
.kpi-card{height:clamp(62px,4.4vw,80px);border:1px solid #0875d2;border-radius:5px;background:linear-gradient(180deg,rgba(5,38,80,.96),rgba(3,25,55,.96));box-shadow:inset 0 0 18px rgba(0,101,211,.18),0 0 10px rgba(0,84,175,.08);display:flex;align-items:center;padding:clamp(6px,.6vw,9px) clamp(8px,.8vw,12px);gap:clamp(8px,.8vw,12px);min-width:0}
.kpi-card.wide{grid-column:span 1.45}
.kpi-icon{width:clamp(26px,2.2vw,35px);height:clamp(26px,2.2vw,35px);flex:0 0 clamp(26px,2.2vw,35px);border-radius:50%;display:grid;place-items:center;color:#22a4ff;font-size:clamp(18px,1.6vw,24px);text-shadow:0 0 9px #1689f0}
.kpi-card small{display:block;color:#e5effb;font-size:clamp(11px,.85vw,14px);white-space:nowrap;margin-bottom:6px;overflow:hidden;text-overflow:ellipsis}
.kpi-card strong{display:block;font-size:clamp(15px,1.45vw,22px);line-height:1;color:#f4f8ff;white-space:nowrap}
.kpi-card strong.cyan{color:#ffd020}.kpi-card strong.yellow{color:#ffd020}.kpi-card i{font-style:normal;color:#90a8c6;font-size:clamp(11px,.9vw,14px);margin:0 7px}

.main-grid{display:grid;grid-template-columns:24.5% 52.3% 23.2%;gap:8px}
.left-col,.center-col,.right-col{display:flex;flex-direction:column;gap:8px;min-width:0}
.panel{border:1px solid #0872cc;border-radius:6px;background:linear-gradient(180deg,rgba(4,27,61,.96),rgba(2,18,44,.97));box-shadow:inset 0 0 24px rgba(4,93,181,.09);overflow:hidden}
.panel-title{height:clamp(34px,2.7vw,40px);display:flex;align-items:center;padding:0 clamp(10px,1vw,15px);font-size:clamp(13px,1.05vw,16px);font-weight:700;color:#eaf5ff;border-bottom:1px solid rgba(8,115,205,.55);background:linear-gradient(180deg,rgba(9,52,101,.44),rgba(3,28,60,.08))}
.panel-title span,.panel-title small{color:#d0e1f6;font-size:clamp(10px,.8vw,12px);font-weight:400}
table{border-collapse:collapse;width:100%}
.summary-table{font-size:clamp(11px,.92vw,14px)}
.summary-table th,.summary-table td{border:1px solid #164f86;text-align:center;height:clamp(28px,2.3vw,35px);padding:5px}
.summary-table th{background:#092b57;color:#d7e9fc;font-weight:700}.summary-table td{color:#e3effd}
.summary-table .total td{font-weight:700;background:#082b58;color:#fff}
.group-chart-panel{height:178px}.bar-chart{height:137px;position:relative;padding:8px 10px 0 41px}
.y-axis{position:absolute;left:7px;top:5px;bottom:26px;display:flex;flex-direction:column;justify-content:space-between;color:#a9c5e4;font-size:10px}
.bars{height:105px;border-bottom:1px solid #2c5b88;display:flex;align-items:flex-end;justify-content:space-around;position:relative;background:repeating-linear-gradient(to bottom,transparent 0,transparent 16px,rgba(67,111,159,.22) 17px)}
.bar-item{height:100%;width:14%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;position:relative}
.bar-item b{position:absolute;bottom:calc(var(--h,30%)+3px);font-size:clamp(10px,.8vw,12px);color:#e9f4ff;white-space:nowrap}
.bar{width:22px;min-height:6px;background:linear-gradient(180deg,#1ebbf5,#1689da);box-shadow:0 0 8px rgba(13,171,245,.3)}
.bar:nth-of-type(2){background:linear-gradient(180deg,#f34c4c,#d93243)}
.bar.purple{background:linear-gradient(180deg,#6f65d8,#5352bd)}
.bar-item label{font-size:10px;color:#c7dbf2;white-space:nowrap;margin-top:6px}
.donut-panel{height:166px}.donut-wrap{display:flex;align-items:center;height:127px;padding:7px 18px}
.donut{width:113px;height:113px;border-radius:50%;background:conic-gradient(#74c94a 0 11.76%,#1d82e7 11.76% 35.29%,#f4ae20 35.29% 64.7%,#f04b43 64.7% 100%);display:grid;place-items:center;position:relative;flex:0 0 113px}
.donut:after{content:"";position:absolute;width:68px;height:68px;border-radius:50%;background:#041938;border:1px solid #164d83}
.donut div{position:relative;z-index:1;text-align:center}.donut strong{display:block;font-size:clamp(14px,1.1vw,17px)}.donut small{display:block;font-size:11px;color:#a9c6e3;margin-top:3px}
.legend{list-style:none;margin:0 0 0 22px;padding:0;flex:1;min-width:0}.legend li{display:grid;grid-template-columns:14px 72px 1fr;gap:5px;align-items:center;font-size:11px;line-height:22px}.legend em{font-style:normal;color:#d5e5f8}.dot{width:11px;height:11px;display:inline-block}.green{background:#74c94a}.blue{background:#1d82e7}.orange{background:#f4ae20}.red{background:#f04b43}
.explanation{height:108px}.explain-grid{display:grid;grid-template-columns:78px 55px 1fr;font-size:10px;color:#c8dcf2}.explain-grid>div{border-right:1px solid #174f83;border-bottom:1px solid #174f83;padding:5px 4px}.tag{font-weight:700;text-align:center}.tag.green{color:#74c94a}.tag.blue{color:#4c9df1}.tag.orange{color:#f4ae20}.tag.red{color:#f04b43}

.table-panel{height:660px}.table-scroll{height:620px;overflow:auto}.detail-table{font-size:clamp(9px,.76vw,11px);table-layout:fixed;width:100%}.detail-table th,.detail-table td{border:1px solid #164d80;text-align:center;height:28px;padding:3px 2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.detail-table th{height:38px;background:#092c5a;color:#e4f1ff;line-height:14px}.detail-table td{color:#e1edf9;background:rgba(3,22,49,.56)}.detail-table tbody tr:nth-child(even) td{background:rgba(7,38,74,.42)}.detail-table tbody tr.group3 td:first-child,.detail-table tbody tr.group3 td:nth-child(2),.detail-table tbody tr.group3 td:nth-child(3){background:rgba(93,66,31,.62)}.detail-table tbody tr.group4 td:first-child,.detail-table tbody tr.group4 td:nth-child(2),.detail-table tbody tr.group4 td:nth-child(3){background:rgba(45,40,102,.65)}.detail-table .zero{color:#ff6464}.detail-table .ok{color:#66d6ff}.detail-table tfoot td{height:41px;background:#082f64;font-weight:800;font-size:clamp(11px,.95vw,14px);color:#fff}
.detail-table th:nth-child(1){width:4%}.detail-table th:nth-child(2){width:8%}.detail-table th:nth-child(3){width:10%}.detail-table th:nth-child(4){width:8%}.detail-table th:nth-child(5){width:7%}.detail-table th:nth-child(6){width:8%}.detail-table th:nth-child(7){width:8%}.detail-table th:nth-child(8){width:8%}.detail-table th:nth-child(9){width:7%}.detail-table th:nth-child(10){width:7%}.detail-table th:nth-child(11){width:9%}.detail-table th:nth-child(12){width:8%}.detail-table th:nth-child(13){width:7%}.detail-table th:nth-child(14){width:8%}

.funnel-panel{height:244px}.funnel{padding:4px 15px 8px;position:relative;text-align:center}.funnel-row{height:38px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:0 26px;font-size:13px;font-weight:700;clip-path:polygon(0 0,100% 0,94% 100%,6% 100%);box-shadow:0 0 12px rgba(0,127,255,.25)}.funnel-row b{font-size:15px}.r1{width:92%;background:linear-gradient(90deg,#1767c4,#1165d5)}.r2{width:79%;background:#0c9ccf}.r3{width:65%;background:#079b95}.r4{width:52%;background:#0ca89c}.r5{width:40%;background:#f3a016}.rate{height:20px;position:absolute;right:0;transform:translateY(-30px);font-size:11px;border:1px solid #2876b8;border-radius:12px;padding:3px 7px;background:#041d40;color:#dbeeff}.rate:nth-of-type(1){top:26px}.rate:nth-of-type(2){top:84px}.rate:nth-of-type(3){top:142px;color:#7dd24b;border-color:#67b34a}.rate:nth-of-type(4){top:200px;color:#f0df24;border-color:#8b8d35}.rate:nth-of-type(5){top:258px;color:#ffb11b;border-color:#9b6e1f}
.distribution-panel{height:202px;padding-bottom:9px}.dist-row{display:grid;grid-template-columns:76px 1fr 92px;align-items:center;gap:8px;height:34px;padding:0 12px;font-size:11px}.dist-row>span{white-space:nowrap}.dist-bar{height:10px;background:repeating-linear-gradient(90deg,#173e6b 0 6px,transparent 6px 9px);position:relative}.dist-bar i{display:block;height:100%;background:linear-gradient(90deg,#68a5f0,#2d78db)}.dist-row:nth-of-type(3) .dist-bar i{background:linear-gradient(90deg,#ffbd26,#f5a80c)}.dist-row:nth-of-type(4) .dist-bar i{background:linear-gradient(90deg,#f65b48,#ee3d35)}.dist-row b{font-weight:400;color:#e3effc}.scale{display:flex;justify-content:space-between;padding:0 13px 0 90px;color:#91add0;font-size:10px}
.ranking-panel{height:211px}.rank-row{height:39px;display:grid;grid-template-columns:40px 1fr 92px;align-items:center;border-bottom:1px solid #174c7e;padding:0 13px;font-size:14px}.rank-row strong{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;color:#f5b51a}.rank-row:nth-child(3) strong{color:#8fb5dd}.rank-row:nth-child(4) strong{color:#d78337}.rank-row b{font-size:14px}

.footer-grid{display:grid;grid-template-columns:1fr 1.08fr 1.1fr 1.05fr 1fr;gap:8px;margin-top:10px}.footer-panel{height:117px}.footer-panel .panel-title{height:34px;font-size:14px}.footer-panel ol,.footer-panel ul{margin:7px 12px 6px 27px;padding:0;font-size:11px;line-height:18px;color:#d9e9fa}.footer-panel li{padding-left:1px}.footer-panel ul{list-style:none;margin-left:16px}.footer-panel ul li:before{content:"›";color:#72aeea;margin-right:6px}.top-list{list-style:none!important;margin-left:12px!important}.top-list li{display:flex;justify-content:space-between;padding-right:10px}.top-list li:before{display:none}.top-list b{color:#fff}

/* 窄屏断点：≤1300 压缩内边距与图标 */
@media(max-width:1300px){
  .kpi-card{padding:7px 8px;gap:6px}.kpi-card small{font-size:11px}.kpi-card strong{font-size:16px}.kpi-icon{font-size:18px;width:26px;flex-basis:26px;height:26px}
  .panel-title{font-size:13px}.summary-table{font-size:11px}.detail-table{font-size:9px}
}
/* ≤1100 三栏改单栏纵向堆叠，KPI 改 3 列，footer 改 2 列 */
@media(max-width:1100px){
  .main-grid{grid-template-columns:1fr}
  .kpi-row{grid-template-columns:repeat(3,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr}
  .table-panel{height:auto}.table-scroll{height:auto;max-height:560px}
  .kpi-card.wide{grid-column:auto}
}
/* ≤680 KPI 改 2 列，footer 单列 */
@media(max-width:680px){
  .kpi-row{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr}
  .hero h1{font-size:18px;letter-spacing:1px}
}