:root{
  --bg:#070c16;
  --panel:#0e1727;
  --panel-2:#111d31;
  --line:rgba(148,163,184,.13);
  --line-soft:rgba(148,163,184,.07);
  --text:#e7eef8;
  --muted:#7e8da6;
  --dim:#5a6a83;
  --accent:#38bdf8;
  --ok:#34d399;
  --warn:#f5b942;
  --bad:#f87171;
  --violet:#a78bfa;
  --pink:#f472b6;
  --teal:#2dd4bf;
  --r:12px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:
    radial-gradient(1100px 520px at 78% -12%, rgba(56,189,248,.10), transparent 60%),
    radial-gradient(760px 420px at 8% 4%, rgba(167,139,250,.08), transparent 55%),
    var(--bg);
  color:var(--text);
  font:13px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:#1d2b42;border-radius:6px}
::-webkit-scrollbar-track{background:transparent}

/* ------------------------------------------------------------ 侧边栏 */
.side{
  position:fixed;inset:0 auto 0 0;width:212px;
  background:linear-gradient(180deg,#0b1424,#080f1c 60%);
  border-right:1px solid var(--line);
  display:flex;flex-direction:column;padding:16px 10px 12px;z-index:20;
}
.brand{display:flex;align-items:center;gap:9px;padding:2px 8px 14px}
.logo{
  width:32px;height:32px;border-radius:9px;display:grid;place-items:center;
  background:linear-gradient(135deg,#38bdf8,#6366f1);color:#04101f;font-weight:800;font-size:12px;
  box-shadow:0 6px 18px rgba(56,189,248,.28);
}
.b-name{font-size:12.5px;font-weight:700;letter-spacing:.4px}
.b-sub{font-size:10.5px;color:var(--dim);letter-spacing:.6px}
.nav{flex:1;overflow:auto;padding-right:2px}
.n-group{font-size:10px;color:#4a5a74;letter-spacing:1.4px;padding:12px 10px 5px;text-transform:uppercase}
.nav a{
  display:flex;align-items:center;gap:9px;padding:7px 10px;border-radius:8px;
  color:#93a3bb;font-size:12.5px;margin-bottom:1px;transition:.15s;
}
.nav a i{font-style:normal;font-size:11px;opacity:.75;width:12px;text-align:center}
.nav a:hover{background:rgba(148,163,184,.07);color:#cfe0f5}
.nav a.on{background:linear-gradient(90deg,rgba(56,189,248,.16),rgba(56,189,248,.04));color:#eaf7ff;box-shadow:inset 2px 0 0 var(--accent)}
.nav a .dot{margin-left:auto;font-style:normal;font-size:10px;background:rgba(248,113,113,.16);
  color:#fca5a5;border-radius:20px;padding:0 6px;line-height:16px}
.side-foot{padding:10px 10px 2px;border-top:1px solid var(--line-soft);display:flex;flex-direction:column;gap:5px}
.side-foot .link{font-size:11.5px;color:var(--accent);opacity:.85}
.side-foot span{font-size:10.5px;color:var(--dim)}

/* ------------------------------------------------------------ 主区 */
.main{margin-left:212px;padding:0 22px 18px;min-height:100vh}
.top{
  position:sticky;top:0;z-index:10;display:flex;align-items:flex-end;justify-content:space-between;
  gap:16px;padding:16px 0 12px;margin-bottom:14px;
  background:linear-gradient(180deg,rgba(7,12,22,.96),rgba(7,12,22,.72));
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line-soft);
}
.t-left h1{margin:0;font-size:19px;font-weight:600;letter-spacing:.2px}
.t-left p{margin:3px 0 0;font-size:11.5px;color:var(--muted)}
.t-right{display:flex;align-items:center;gap:9px}
.seg{display:flex;background:#0c1524;border:1px solid var(--line);border-radius:9px;padding:2px}
.seg button{
  border:0;background:transparent;color:var(--muted);font-size:11.5px;padding:5px 11px;
  border-radius:7px;cursor:pointer;font-family:inherit;transition:.15s;
}
.seg button:hover{color:#cfe0f5}
.seg button.on{background:rgba(56,189,248,.16);color:#dff3ff;box-shadow:0 0 0 1px rgba(56,189,248,.28) inset}
.chip{
  font-size:11px;color:#8fa3bd;background:#0c1524;border:1px solid var(--line);
  border-radius:8px;padding:5px 10px;white-space:nowrap;
}
.icon-btn{
  width:30px;height:30px;border-radius:8px;border:1px solid var(--line);background:#0c1524;
  color:#93a3bb;cursor:pointer;font-size:14px;line-height:1;transition:.15s
}
.icon-btn:hover{color:var(--accent);border-color:rgba(56,189,248,.4)}

.page{display:flex;flex-direction:column;gap:14px;min-height:60vh}
.foot{display:flex;justify-content:space-between;gap:12px;color:var(--dim);font-size:10.5px;
  padding:16px 2px 4px;border-top:1px solid var(--line-soft);margin-top:14px}

/* ------------------------------------------------------------ 卡与网格 */
.kpis{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
@media (max-width:1420px){.kpis{grid-template-columns:repeat(3,minmax(0,1fr))}}
.kpi{
  background:linear-gradient(180deg,#101b2d,#0d1524);border:1px solid var(--line);
  border-radius:var(--r);padding:13px 15px;position:relative;overflow:hidden;
}
.kpi::after{content:"";position:absolute;left:0;top:0;width:100%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(56,189,248,.28),transparent)}
.kpi .l{font-size:11.5px;color:var(--muted);display:flex;justify-content:space-between;align-items:center}
.kpi .v{font-size:24px;font-weight:600;letter-spacing:-.6px;margin-top:6px;font-variant-numeric:tabular-nums}
.kpi .v small{font-size:12px;font-weight:500;color:var(--muted);margin-left:3px;letter-spacing:0}
.kpi .d{font-size:11px;margin-top:4px;display:flex;gap:6px;align-items:center}
.kpi .d .up{color:#fb7185}
.kpi .d .down{color:var(--ok)}
.kpi .d .flat{color:var(--muted)}

.grid{display:grid;gap:12px}
.g2{grid-template-columns:1fr 1fr}
.g3{grid-template-columns:1.35fr 1fr 1fr}
.g-23{grid-template-columns:1.6fr 1fr}
.g-32{grid-template-columns:1fr 1.55fr}
@media (max-width:1240px){.g2,.g3,.g-23,.g-32{grid-template-columns:1fr}}

.card{
  background:linear-gradient(180deg,rgba(17,28,46,.92),rgba(12,20,33,.92));
  border:1px solid var(--line);border-radius:var(--r);padding:13px 15px 12px;min-width:0;
  display:flex;flex-direction:column;
}
.card-h{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:6px}
.card-h h3{margin:0;font-size:12.5px;font-weight:600;color:#dbe7f6}
.card-h .desc{margin:2px 0 0;font-size:11px;color:var(--dim)}
.card-h .extra{font-size:11px;color:var(--muted);white-space:nowrap}
.chart{height:232px;width:100%;flex:1 1 232px;min-height:232px}
.chart.tall{height:270px;flex-basis:270px;min-height:270px}
.chart.short{height:186px;flex-basis:186px;min-height:186px}

/* ------------------------------------------------------------ 表格 */
.tbl-wrap{overflow:auto;max-height:340px;margin:-2px -4px 0}
.tbl{width:100%;border-collapse:separate;border-spacing:0;font-size:11.8px}
.tbl th{
  position:sticky;top:0;z-index:1;background:#0f1a2b;color:#7d8ea8;font-weight:500;font-size:10.5px;
  letter-spacing:.4px;text-align:left;padding:7px 9px;border-bottom:1px solid var(--line);white-space:nowrap;
}
.tbl td{padding:7px 9px;border-bottom:1px solid var(--line-soft);color:#c7d5e8;white-space:nowrap}
.tbl tbody tr:hover td{background:rgba(56,189,248,.045)}
.tbl .num{text-align:right;font-variant-numeric:tabular-nums}
.tbl .strong{color:#eaf3ff;font-weight:500}
.tbl .sub{color:var(--dim);font-size:10.5px}
.tbl .ellip{max-width:230px;overflow:hidden;text-overflow:ellipsis}
.empty{padding:26px;text-align:center;color:var(--dim);font-size:12px}

/* ------------------------------------------------------------ 徽标 / 进度 */
.bd{display:inline-block;padding:1px 7px;border-radius:20px;font-size:10.5px;line-height:16px;white-space:nowrap}
.bd-ok{background:rgba(52,211,153,.13);color:#6ee7b7}
.bd-warn{background:rgba(245,185,66,.14);color:#fcd34d}
.bd-bad{background:rgba(248,113,113,.14);color:#fca5a5}
.bd-info{background:rgba(56,189,248,.13);color:#7dd3fc}
.bd-violet{background:rgba(167,139,250,.14);color:#c4b5fd}
.bd-mute{background:rgba(148,163,184,.12);color:#94a3b8}
.bar{height:4px;border-radius:3px;background:rgba(148,163,184,.14);overflow:hidden;min-width:44px}
.bar>i{display:block;height:100%;border-radius:3px;background:var(--accent)}
.bar.ok>i{background:var(--ok)} .bar.warn>i{background:var(--warn)} .bar.bad>i{background:var(--bad)}

/* ------------------------------------------------------------ 待办 */
.todo{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
@media (max-width:1180px){.todo{grid-template-columns:repeat(3,1fr)}}
.todo .t{
  background:#0d1728;border:1px solid var(--line);border-radius:10px;padding:10px 12px;
  display:flex;flex-direction:column;gap:2px;transition:.15s;cursor:default;
}
.todo .t:hover{border-color:rgba(56,189,248,.35);transform:translateY(-1px)}
.todo .t b{font-size:19px;font-weight:600;font-variant-numeric:tabular-nums}
.todo .t span{font-size:11px;color:var(--muted)}
.todo .t.hot b{color:#fb7185}

/* 维度切换 */
.dims{display:flex;gap:6px;flex-wrap:wrap}
.dims button{
  border:1px solid var(--line);background:#0c1524;color:var(--muted);font-size:11.5px;
  padding:4px 11px;border-radius:7px;cursor:pointer;font-family:inherit;transition:.15s
}
.dims button.on{background:rgba(56,189,248,.14);color:#dff3ff;border-color:rgba(56,189,248,.35)}

.loading{padding:60px;text-align:center;color:var(--dim);font-size:12px}
.skel{height:12px;border-radius:6px;background:linear-gradient(90deg,#101b2d,#16243a,#101b2d);
  background-size:200% 100%;animation:sh 1.2s infinite}
@keyframes sh{0%{background-position:0 0}100%{background-position:-200% 0}}