:root { font-family:'Microsoft JhengHei','PingFang TC',system-ui,sans-serif; color:#344c37; background:#e8efdf; }
* { box-sizing:border-box; }
body { margin:0; }
main { max-width:900px; margin:auto; padding:22px 20px 36px; }
header,.title-row { display:flex; align-items:center; justify-content:space-between; gap:12px; }
header { font-size:12px; color:#748368; }
a { color:#3b7745; text-underline-offset:3px; }
.back { font-weight:800; white-space:nowrap; }
.title-row { margin:24px 0 16px; }
h1 { font-size:32px; margin:3px 0 0; }
.eyebrow { font-size:10px; letter-spacing:3px; margin:0; color:#748368; }
button { font:inherit; color:#426643; border:1px solid #a0b18c; background:#fff9e9; padding:10px 14px; border-radius:10px; min-height:44px; cursor:pointer; font-size:12px; }
button:disabled { opacity:.5; cursor:default; }
button:focus-visible,a:focus-visible { outline:3px solid #2172ad; outline-offset:3px; }
[hidden] { display:none !important; }
.status { background:#d8e8c8; border-radius:9px; padding:10px 12px; font-size:12px; line-height:1.6; }
.status.error { background:#f2e0cc; color:#8e5a34; }
.hero { background:#315f3b; color:#f6f7dc; padding:24px; border-radius:18px; margin-top:20px; }
.hero > span { font-size:14px; }
.hero > strong { display:block; font-size:60px; line-height:1.2; letter-spacing:-2px; margin:7px 0; overflow-wrap:anywhere; }
.hero p { font-size:12px; line-height:1.6; color:#c8d9bd; margin:8px 0 0; }
.metrics { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:12px 0 24px; }
.metric { background:#fffbee; border:1px solid #d2ddbf; border-radius:12px; padding:15px 12px; }
.metric strong { display:block; font-size:25px; color:#3c7545; overflow-wrap:anywhere; }
.metric span { display:block; font-size:11px; color:#6c7b60; margin-top:6px; }
.panel { background:#fffbee; border:1px solid #d2ddbf; border-radius:16px; padding:22px; margin-top:16px; }
h2 { font-size:17px; margin:0 0 18px; }
h2 small { font-size:11px; font-weight:400; margin-left:8px; color:#7e8b6d; }
.note,.panel p { font-size:12px; line-height:1.8; color:#748067; }
.table-wrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; font-size:12px; font-variant-numeric:tabular-nums; }
th,td { text-align:right; padding:12px 7px; white-space:nowrap; border-bottom:1px solid #e5e9d6; }
th { font-size:11px; color:#778568; background:#f1f3e3; }
th:first-child,td:first-child { text-align:left; }
tr.today { background:#edf3d6; font-weight:800; }
.trend { display:grid; grid-template-columns:repeat(14,minmax(0,1fr)); gap:8px; align-items:end; height:96px; border-bottom:1px solid #bacba4; margin-bottom:20px; padding:0 6px; }
.trend span { display:block; background:#8bb772; border-radius:4px 4px 0 0; min-height:1px; }
.inline-metrics { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:12px 0 18px; }
.inline-metrics .metric { background:#eff3df; border:0; }
.inline-metrics strong { font-size:23px; }
.archive { border:1px dashed #b5a270; background:#fff5d9; }
.archive .inline-metrics { grid-template-columns:repeat(3,minmax(0,1fr)); }
footer { padding:24px 0 0; color:#7a866b; font-size:11px; line-height:1.8; }
footer p { margin:12px 0 0; }
@media (max-width:600px) { main { padding:18px 14px 30px; } .metrics { grid-template-columns:repeat(2,minmax(0,1fr)); } .panel { padding:17px 12px; } .inline-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); } .hero { padding:22px; } }
@media (max-width:360px) { main { padding-inline:10px; } header > span { font-size:10px; } h1 { font-size:28px; } th,td { padding:10px 4px; font-size:10px; } .metric strong { font-size:23px; } .archive .inline-metrics { gap:5px; } .archive .metric { padding:12px 7px; } .archive .metric strong { font-size:19px; } }