:root { color-scheme: light; font-family: "Segoe UI", "Microsoft YaHei", sans-serif; background:#f4efe8; color:#231f1b; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; background:radial-gradient(circle at 85% 0,#ffe6cf 0,transparent 36%),#f4efe8; }
.shell { width:min(1180px,calc(100% - 40px)); margin:auto; padding:42px 0 30px; }
header { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-bottom:28px; }
.eyebrow { margin:0 0 5px; color:#e56512; letter-spacing:.16em; font-weight:800; font-size:12px; }
h1 { margin:0; font-size:42px; letter-spacing:-.04em; }
.subtitle { margin:7px 0 0; color:#746b63; }
.health { display:flex; align-items:center; gap:10px; padding:12px 16px; border:1px solid #d9cfc5; border-radius:999px; background:#fffaf5; }
.health span { width:10px; height:10px; border-radius:50%; background:#d39c45; box-shadow:0 0 0 5px #f5e8cf; }
.health.live span { background:#289a68; box-shadow:0 0 0 5px #d8f0e6; }.health.stale span{background:#d04c3f;box-shadow:0 0 0 5px #f6dedb}
.cards { display:grid; grid-template-columns:2fr repeat(2,1fr); gap:16px; }
.card,.chart-card { background:rgba(255,255,255,.88); border:1px solid #e5dbd0; border-radius:20px; box-shadow:0 15px 35px rgba(75,48,25,.07); }
.card { min-height:168px; padding:23px; display:flex; flex-direction:column; justify-content:space-between; }
.card p,.chart-head p { margin:0; color:#786e65; font-weight:650; }
.card strong { font-size:42px; line-height:1; }.hero strong{font-size:74px;letter-spacing:-.06em}.hero div span{font-size:18px;margin-left:10px;color:#756c64}
.card small { color:#8b8178; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.chart-card { margin-top:16px; padding:25px 28px 20px; }
.chart-head { display:flex; justify-content:space-between; align-items:end; }.chart-head h2{margin:3px 0 0;font-size:23px}.chart-head span{font-weight:700;color:#e56512}
#chart { width:100%; height:260px; overflow:visible; }.grid{fill:none;stroke:#ece4dc;stroke-width:1}.grid path{vector-effect:non-scaling-stroke}#line{fill:none;stroke:#f1711d;stroke-width:5;stroke-linejoin:round;stroke-linecap:round}
footer { padding:20px 4px 0; color:#887e75; font-size:13px; }
@media(max-width:820px){.cards{grid-template-columns:1fr 1fr}.hero{grid-column:1/-1}header{align-items:flex-start;flex-direction:column}.shell{width:min(100% - 24px,1180px);padding-top:24px}}