:root { --ink:#132220; --muted:#63716f; --line:#dce4e1; --paper:#fbfcfa; --mint:#dff1e9; --green:#14705b; --cream:#f4efe5; }
* { box-sizing:border-box; } body { margin:0; font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif; background:#f1f4f1; color:var(--ink); }
.shell { width:min(1180px,calc(100% - 36px)); margin:0 auto; padding:56px 0 72px; }
.hero { display:flex; justify-content:space-between; align-items:flex-end; gap:24px; padding:0 4px 34px; } .eyebrow,.label { margin:0 0 8px; color:var(--green); font-size:12px; font-weight:800; letter-spacing:.13em; } h1 { margin:0; font-family:Georgia,"Songti SC",serif; font-size:46px; letter-spacing:-.04em; } .sub { margin:12px 0 0; color:var(--muted); font-size:16px; }.updated { padding:14px 16px; min-width:150px; background:var(--mint); border-radius:14px; } .updated span { display:block; color:var(--green); font-size:12px; font-weight:700; }.updated strong { display:block; margin-top:4px; font-size:18px; }
.metrics { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:18px; }.metric { min-height:164px; padding:22px; background:var(--paper); border:1px solid var(--line); border-radius:18px; display:flex; flex-direction:column; justify-content:space-between; }.metric.accent { background:var(--ink); color:white; border-color:var(--ink); }.metric .name { font-size:13px; line-height:1.35; color:var(--muted); }.metric.accent .name { color:#b9d2ca; }.metric .value { font-size:35px; font-weight:760; letter-spacing:-.05em; }.metric .detail { color:var(--muted); font-size:12px; }.metric.accent .detail { color:#b9d2ca; }
.card { background:var(--paper); border:1px solid var(--line); border-radius:20px; padding:26px; margin-top:18px; }.section-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }.section-head h2 { margin:0; font-size:23px; letter-spacing:-.03em; }.metric-picker { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:6px; }.metric-picker button { border:1px solid var(--line); background:transparent; border-radius:999px; padding:7px 10px; font-size:12px; cursor:pointer; color:var(--muted); }.metric-picker button[aria-selected="true"] { background:var(--ink); border-color:var(--ink); color:white; }.chart-wrap { height:290px; margin-top:18px; }.chart-wrap svg { width:100%; height:100%; overflow:visible; }.gridline { stroke:#e6ece9; stroke-width:1; }.axis-label { fill:#83908d; font-size:11px; }.series-line { fill:none; stroke:#14705b; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }.point { fill:#14705b; stroke:white; stroke-width:2; }.no-data { fill:#83908d; font-size:14px; }.chart-foot { display:flex; justify-content:space-between; color:var(--muted); font-size:13px; border-top:1px solid var(--line); padding-top:14px; }.table-card { padding-bottom:10px; }.count { background:var(--cream); padding:7px 10px; border-radius:999px; font-size:12px; color:#675b45; }.table-scroll { overflow:auto; margin:18px -26px 0; } table { width:100%; border-collapse:collapse; min-width:820px; } th,td { padding:15px 26px; text-align:left; white-space:nowrap; border-top:1px solid var(--line); font-size:13px; } th { background:#f7f9f7; color:var(--muted); font-weight:650; } td { font-variant-numeric:tabular-nums; }.source-note { margin:18px 4px 0; padding:16px 18px; border-left:3px solid var(--green); color:var(--muted); font-size:13px; line-height:1.7; }.source-note p { margin:0; }
.copy-card { background:linear-gradient(135deg,#fbfcfa 0%,#f1f8f4 100%); }.copy-button { border:0; border-radius:10px; padding:10px 15px; background:var(--green); color:#fff; font:inherit; font-size:13px; font-weight:700; cursor:pointer; white-space:nowrap; }.copy-button:hover { background:#0d5e4b; }.copy-text { white-space:pre-wrap; margin:22px 0 0; padding:20px; border-radius:13px; background:#fff; border:1px solid #dce8e1; color:#243532; font-family:inherit; font-size:14px; line-height:1.75; }.copy-status { min-height:19px; color:var(--green); font-size:12px; margin:10px 0 0; }
@media (max-width:780px) { .shell { width:min(100% - 24px,1180px); padding-top:30px; }.hero { align-items:flex-start; flex-direction:column; }.metrics { grid-template-columns:repeat(2,1fr); }.metric { min-height:140px; padding:17px; }.metric .value { font-size:28px; } h1 { font-size:38px; }.card { padding:19px; }.table-scroll { margin-left:-19px;margin-right:-19px; } th,td { padding-left:19px;padding-right:19px; }.metric-picker { justify-content:flex-start; }.section-head { flex-direction:column; }.chart-wrap { height:240px; } }