*{margin:0;padding:0;box-sizing:border-box;}
:root{--blue:#1E88E5;--blue-light:#42A5F5;--green:#4CAF50;--green-light:#66BB6A;--bg:#0a1628;--bg-card:rgba(14,30,56,0.85);--bg-card-h:rgba(20,40,70,0.95);--border:rgba(30,136,229,0.3);--border-a:rgba(30,136,229,0.7);--text:#e0e8f0;--dim:#7a8fa6;--bright:#fff;--red:#ef5350;--orange:#ff9800;--yellow:#fdd835;--purple:#ab47bc;--cyan:#00bcd4;}
html,body{width:100%;height:100%;overflow:hidden;background:var(--bg);color:var(--text);font-family:'Microsoft YaHei','PingFang SC',sans-serif;}
body{display:flex;flex-direction:column;}
.header{height:60px;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,rgba(14,30,56,0.95),rgba(10,22,40,0.8));border-bottom:1px solid var(--border);position:relative;flex-shrink:0;}
.header::after{content:'';position:absolute;bottom:0;left:10%;right:10%;height:1px;background:linear-gradient(90deg,transparent,var(--blue),transparent);}
.header h1{font-size:26px;font-weight:700;letter-spacing:6px;background:linear-gradient(90deg,var(--blue-light),#fff,var(--blue-light));-webkit-background-clip:text;-webkit-text-fill-color:transparent;}
.header .time{position:absolute;right:24px;font-size:13px;color:var(--dim);}
.header .source{position:absolute;left:24px;font-size:11px;color:var(--dim);}
.nav{height:40px;display:flex;align-items:center;justify-content:center;gap:3px;background:rgba(10,22,40,0.9);border-bottom:1px solid var(--border);flex-shrink:0;}
.nav-item{padding:5px 16px;font-size:12px;cursor:pointer;border-radius:4px;transition:all .3s;color:var(--dim);border:1px solid transparent;white-space:nowrap;}
.nav-item:hover{color:var(--text);background:rgba(30,136,229,0.1);}
.nav-item.active{color:var(--bright);background:linear-gradient(135deg,rgba(30,136,229,0.3),rgba(30,136,229,0.1));border-color:var(--border-a);}
.main{flex:1;overflow:hidden;position:relative;}
.page{display:none;width:100%;height:100%;padding:10px;gap:10px;overflow-y:auto;overflow-x:hidden;}
.page.active{display:grid;}
.page::-webkit-scrollbar{width:4px;}
.page::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px;}
.card{background:var(--bg-card);border:1px solid var(--border);border-radius:8px;padding:12px;position:relative;overflow:hidden;transition:all .3s;}
.card:hover{border-color:var(--border-a);background:var(--bg-card-h);}
.card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--blue),transparent);opacity:0.6;}
.card-title{font-size:13px;font-weight:600;color:var(--blue-light);margin-bottom:8px;display:flex;align-items:center;gap:6px;}
.card-title::before{content:'';width:3px;height:13px;background:var(--blue);border-radius:2px;}
.chart-box{width:100%;height:calc(100% - 28px);}
.kpi-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:6px;}
.kpi{flex:1;min-width:100px;background:linear-gradient(135deg,rgba(30,136,229,0.12),rgba(30,136,229,0.04));border:1px solid var(--border);border-radius:6px;padding:8px 6px;text-align:center;transition:all .3s;}
.kpi:hover{border-color:var(--border-a);transform:translateY(-2px);}
.kpi .label{font-size:10px;color:var(--dim);margin-bottom:3px;}
.kpi .value{font-size:18px;font-weight:700;color:var(--bright);}
.kpi .value .unit{font-size:10px;font-weight:400;color:var(--dim);margin-left:1px;}
.kpi .change{font-size:9px;margin-top:2px;}
.kpi .change.up{color:var(--red);}
.kpi .change.down{color:var(--green);}
.kpi.green{background:linear-gradient(135deg,rgba(76,175,80,0.12),rgba(76,175,80,0.04));border-color:rgba(76,175,80,0.3);}
.kpi.green .value{color:var(--green-light);}
.kpi.orange{background:linear-gradient(135deg,rgba(255,152,0,0.12),rgba(255,152,0,0.04));border-color:rgba(255,152,0,0.3);}
.kpi.orange .value{color:var(--orange);}
.kpi.purple{background:linear-gradient(135deg,rgba(171,71,188,0.12),rgba(171,71,188,0.04));border-color:rgba(171,71,188,0.3);}
.kpi.purple .value{color:var(--purple);}
.kpi.cyan{background:linear-gradient(135deg,rgba(0,188,212,0.12),rgba(0,188,212,0.04));border-color:rgba(0,188,212,0.3);}
.kpi.cyan .value{color:var(--cyan);}
.anomaly{color:var(--red)!important;font-weight:700;}
.anomaly::after{content:' ⚠异动';font-size:8px;font-weight:400;}
.fade-in{animation:fadeIn .5s ease;}
@keyframes fadeIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}
.page-1{grid-template-columns:1fr 1fr 1fr;grid-template-rows:auto 1fr 1fr;}
.page-2{grid-template-columns:1fr 1fr;grid-template-rows:auto 1fr 1fr;}
.page-3{grid-template-columns:1fr 1fr;grid-template-rows:auto 1fr 1fr;}
.page-4{grid-template-columns:1fr 1fr;grid-template-rows:auto 1fr 1fr;}
.page-5{grid-template-columns:1fr 1fr 1fr;grid-template-rows:auto 1fr 1fr;}
.page-6{grid-template-columns:1fr 1fr 1fr;grid-template-rows:auto 1fr 1fr;}
.page-7{grid-template-columns:1fr 1fr 1fr;grid-template-rows:auto 1fr 1fr;}
.page-8{grid-template-columns:1fr 1fr;grid-template-rows:auto 1fr 1fr;}
.span-2{grid-column:span 2;}
.span-full{grid-column:1/-1;}
.row-kpi{grid-column:1/-1;}