:root{
  --bg:#f7fafc;
  --card:#ffffff;
  --accent:#0f62fe;
  --muted:#6b7280;
  --radius:10px;
}
*{box-sizing:border-box}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;line-height:1.4;margin:0;background:var(--bg);color:#111}
.site-header{padding:1.25rem;max-width:1100px;margin:0 auto}
.site-header h1{margin:.25rem 0}
.lead{color:var(--muted);margin-top:0}
main{max-width:1100px;margin:1rem auto;padding:0 1rem}
.controls{display:flex;gap:1rem;flex-wrap:wrap;align-items:end;padding:1rem;background:var(--card);border-radius:var(--radius);box-shadow:0 1px 2px rgba(0,0,0,.04)}
.control-row{display:flex;gap:.5rem;align-items:center}
.control-row label{font-size:.9rem;color:var(--muted)}
input[type="date"],input[list],input{padding:.5rem;border-radius:6px;border:1px solid #e6e9ef}
.buttons button{background:var(--accent);color:#fff;border:0;padding:.55rem .9rem;border-radius:8px;cursor:pointer}
.buttons button#resetBtn{background:#64748b}
.buttons button#exportBtn{background:#10b981}
.status{color:var(--muted);margin-top:.5rem}
.charts{display:grid;grid-template-columns:1fr;gap:1rem;margin-top:1rem}
.chart-card{background:var(--card);padding:1rem;border-radius:var(--radius);box-shadow:0 1px 2px rgba(0,0,0,.04)}
.canvas-wrap{height:260px}
canvas{width:100%!important;height:100%!important}
.table-section{margin-top:1rem}
.table-wrap{background:var(--card);border-radius:var(--radius);padding:1rem}
table{width:100%;border-collapse:collapse}
th,td{padding:.5rem;text-align:left;border-bottom:1px solid #f1f5f9}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

@media(min-width:800px){
  .charts{grid-template-columns:repeat(3,1fr)}
}