:root{
  --navy:#1F3864; --blue:#2E5496; --lblue:#D6E0F0; --green:#548235; --lgreen:#E2EFDA;
  --orange:#C55A11; --lorange:#FCE4D6; --grey:#808080; --gold:#BF9000; --bg:#F4F6FB;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:"微软雅黑",system-ui,sans-serif;background:var(--bg);color:#222}
.topbar{display:flex;justify-content:space-between;align-items:center;
  background:linear-gradient(90deg,var(--navy),var(--blue));color:#fff;padding:12px 24px}
.brand{display:flex;align-items:center;gap:12px}
.brand .logo{font-size:26px;color:#7FB2FF}
.brand h1{font-size:19px;font-weight:600}
.brand p{font-size:11px;opacity:.85}
.right{display:flex;align-items:center;gap:20px}
.tabs{display:flex;gap:6px}
.tab{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.25);
  border:none;padding:8px 14px;border-radius:6px;cursor:pointer;font-size:13px}
.tab.active{background:#fff;color:var(--navy);font-weight:600}
.user{display:flex;align-items:center;gap:8px;font-size:13px}
.avatar{width:28px;height:28px;border-radius:50%;background:#7FB2FF;display:inline-block;background-size:cover}
.avatar.on{border:2px solid #fff}
main{max-width:1400px;margin:0 auto;padding:18px}
.kpi-row{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-bottom:18px}
.kpi{background:#fff;border-radius:8px;padding:14px;box-shadow:0 1px 3px rgba(0,0,0,.06)}
.kpi:nth-child(1){border-top:3px solid var(--navy)}
.kpi:nth-child(2){border-top:3px solid var(--blue)}
.kpi:nth-child(3){border-top:3px solid var(--green)}
.kpi:nth-child(4){border-top:3px solid var(--orange)}
.kpi:nth-child(5){border-top:3px solid var(--gold)}
.kpi-label{font-size:12px;color:var(--grey)}
.kpi-value{font-size:22px;font-weight:700;margin:4px 0;color:var(--navy)}
.kpi-unit{font-size:11px;color:var(--grey)}
.charts{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:18px}
.chart-card{background:#fff;border-radius:8px;padding:12px;box-shadow:0 1px 3px rgba(0,0,0,.06)}
.chart-card h3{font-size:14px;color:var(--navy);margin-bottom:8px;font-weight:600}
.chart{width:100%}
.progress-wrap{background:#fff;border-radius:8px;padding:16px;box-shadow:0 1px3px rgba(0,0,0,.06)}
.progress-wrap h2{font-size:15px;color:var(--navy);margin-bottom:10px}
.table-scroll{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:13px}
th,td{padding:9px 12px;border:1px solid #E5E5E5;text-align:center;white-space:nowrap}
th{background:var(--blue);color:#fff;font-weight:600}
tbody tr:nth-child(even){background:#F7F9FC}
td.ok{color:var(--green);font-weight:600}
td.no{color:var(--orange);font-weight:600}
td.tier-1{background:var(--lgreen);color:var(--green);font-weight:700}
td.tier-2{background:var(--lblue);color:var(--blue);font-weight:700}
td.tier-3{background:var(--lorange);color:var(--orange);font-weight:700}
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);
  background:rgba(31,56,100,.95);color:#fff;padding:10px 20px;border-radius:6px;font-size:13px;
  opacity:0;pointer-events:none;transition:.3s;z-index:99}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
@media(max-width:900px){.kpi-row{grid-template-columns:repeat(2,1fr)}.charts{grid-template-columns:1fr}}