body { font-family: Arial, Helvetica, sans-serif; background:#f6f6f6; margin:0; padding:0; }
header { background:#2b5876; color:#fff; padding:12px; text-align:center;}
main { max-width:1100px; margin:18px auto; padding:10px; }
.controls { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:12px; background:#fff;padding:10px;border-radius:6px; box-shadow:0 1px 3px rgba(0,0,0,0.06);}
.controls label{font-weight:600;}
.controls select, .controls input, .controls button { padding:6px 8px; border-radius:6px; border:1px solid #ddd; }
.chart-wrap { background:#fff; padding:10px; border-radius:6px; box-shadow:0 1px 3px rgba(0,0,0,0.06); height:480px; }
canvas { width:100%; height:100%; display:block; }
@media(max-width:700px) {
  .controls { flex-direction:column; align-items:stretch; }
  .controls select { height:160px; }
}