body { font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Hiragino Kaku Gothic ProN', 'Meiryo', sans-serif; background: #fafafa; color: #222; }
.container { max-width: 1100px; margin: 24px auto; padding: 12px; background: white; border-radius: 6px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.controls { margin-bottom: 12px; }

/* Chart sizing: when width is `auto`, control height explicitly.
	Approach used here: wrap the canvas and set the wrapper's height.
	Chart.js option `maintainAspectRatio: false` lets CSS control canvas size. */
.chart-wrapper {
  width: auto;           /* width can flow to parent (or use max-width on .container) */
  max-width: 100%;
  height: 360px;         /* fixed height in px — adjust as needed */
  min-height: 200px;     /* avoid collapsing on small screens */
}

/* Make canvas fill the wrapper. Remove hardcoded width/height attributes on canvas
	if you want pure CSS control; otherwise Chart.js will respect CSS when
	`maintainAspectRatio: false`. */
#chart { width: 100% !important; height: 100% !important; display: block; }
.status { margin-top: 8px; color: #444; }