:root { font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #17202a; background: #f6f7f9; }
* { box-sizing: border-box; }
body { margin: 0; }
nav { background: #fff; border-bottom: 1px solid #dfe3e8; }
.topbar { max-width: 1180px; margin: 0 auto; padding: .8rem 1.25rem; display: flex; align-items: center; gap: 1rem; }
.brand { margin-right: auto; }
nav a { color: #17202a; text-decoration: none; font-weight: 650; }
main { max-width: 1180px; margin: 0 auto; padding: 1.25rem; }
h1, h2, h3 { margin-top: 0; }
.grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.card { background: white; border: 1px solid #e1e5ea; border-radius: 10px; padding: 1rem; margin-bottom: 1rem; }
.metric { font-size: 1.6rem; font-weight: 700; }
.muted { color: #68717d; }
.chart { width: 100%; height: 430px; }
.heatmap { height: 520px; }
table { width: 100%; border-collapse: collapse; font-size: .92rem; }
th, td { text-align: left; border-bottom: 1px solid #e8ebef; padding: .55rem .45rem; vertical-align: top; }
th { color: #4f5965; }
form.filters { display: flex; flex-wrap: wrap; gap: .75rem; align-items: end; }
label { display: grid; gap: .25rem; font-size: .9rem; }
select, button { font: inherit; padding: .45rem .6rem; border: 1px solid #c9cfd6; border-radius: 6px; background: white; }
button { cursor: pointer; font-weight: 650; }
.notice { padding: .75rem; border: 1px dashed #b9c0c8; border-radius: 8px; color: #59636f; }
@media (max-width: 640px) { .topbar, main { padding: .75rem; } .chart { height: 350px; } table { font-size: .82rem; } }