:root{
  --bg:#f4f6f8;--card:#fff;--border:#e2e6ea;--text:#1f2933;--muted:#616e7c;
  --accent:#1f6feb;--accent-soft:#e8f0fe;--good:#0f8a4b;--bad:#c9372c;
  --shadow:0 1px 3px rgba(16,24,40,.08),0 1px 2px rgba(16,24,40,.06);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--bg);color:var(--text);font-family:"Microsoft YaHei","PingFang SC",system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased}
.header{position:sticky;top:0;background:var(--card);border-bottom:1px solid var(--border);z-index:10}
.header-inner{max-width:1200px;margin:0 auto;padding:16px 20px;display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.header-inner h1{font-size:20px;font-weight:700;letter-spacing:.5px}
.meta{color:var(--muted);font-size:12px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.dot{opacity:.4}
.main{max-width:1200px;margin:16px auto 32px;padding:0 20px;display:flex;flex-direction:column;gap:14px}
.card{background:var(--card);border:1px solid var(--border);border-radius:10px;box-shadow:var(--shadow);padding:16px}
/* controls */
.control-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.date-group{display:flex;align-items:center;gap:6px}
.date-group label{font-size:12px;color:var(--muted)}
.date-group input[type=date]{padding:5px 8px;border:1px solid var(--border);border-radius:6px;font-size:13px;background:#fff;color:var(--text)}
.quick-group,.gran-group{display:flex;align-items:center;gap:4px}
.gran-label{font-size:12px;color:var(--muted);margin-right:2px}
.btn{padding:5px 12px;border:1px solid var(--border);background:#fff;border-radius:6px;font-size:13px;cursor:pointer;color:var(--text);transition:all .15s}
.btn:hover{background:var(--accent-soft);border-color:var(--accent)}
.btn.active{background:var(--accent);border-color:var(--accent);color:#fff}
.notice{margin-top:10px;padding:8px 12px;border-radius:6px;background:#fff8e1;border:1px solid #f0d584;font-size:12px;color:#7a5c00}
/* KPIs */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.kpi{display:flex;flex-direction:column;gap:4px;min-height:110px}
.kpi-label{font-size:12px;color:var(--muted)}
.kpi-value{font-size:30px;font-weight:700;line-height:1.1}
.kpi-value.small{font-size:24px}
.kpi-sub{font-size:12px;color:var(--muted)}
.kpi-delta{font-size:13px;font-weight:600;margin-top:auto}
.kpi-delta.up{color:var(--good)}
.kpi-delta.down{color:var(--bad)}
.kpi-delta.muted{color:var(--muted);font-weight:400}
/* charts */
.chart-card{display:flex;flex-direction:column}
.chart-head{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.chart-head h2{font-size:15px;font-weight:700}
.chart-note{font-size:12px;color:var(--muted)}
.chart-box{width:100%;overflow-x:auto}
.chart-box svg{display:block}
.chart-foot{font-size:11px;color:var(--muted);margin-top:6px}
.footer{max-width:1200px;margin:0 auto 24px;padding:0 20px;font-size:12px;color:var(--muted)}
/* SVG tooltip */
.tip{position:fixed;pointer-events:none;background:#1f2933;color:#fff;padding:8px 12px;border-radius:6px;font-size:12px;line-height:1.5;box-shadow:0 4px 12px rgba(0,0,0,.15);z-index:100;max-width:280px;display:none}
.tip-row{display:flex;justify-content:space-between;gap:14px}
.tip-label{color:#cbd2d9}
.axis text{font-size:10px;fill:var(--muted)}
.grid line{stroke:var(--border);stroke-dasharray:3,3}
.legend{display:flex;gap:12px;flex-wrap:wrap;font-size:11px;color:var(--muted);margin-top:6px}
.legend-item{display:flex;align-items:center;gap:4px}
.legend-chip{width:10px;height:10px;border-radius:2px;display:inline-block}
@media(max-width:760px){
  .kpis{grid-template-columns:repeat(2,1fr)}
  .header-inner{gap:6px}
  .header-inner h1{font-size:17px}
  .control-row{gap:10px}
  .date-group{width:100%;flex-wrap:wrap}
  .kpi-value{font-size:24px}
}