:root { --fg:#111; --muted:#555; --bg:#fff; --card:#f7f7f9; }
*{box-sizing:border-box} html,body{margin:0;padding:0;font-family:system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--fg)}
header{padding:20px 16px;border-bottom:1px solid #eee}
header h1{margin:0 0 6px 0;font-size:22px}
.controls{display:flex;flex-wrap:wrap;gap:12px;padding:14px 16px;background:var(--card);border-bottom:1px solid #eee}
.controls label{background:#fff;border:1px solid #e5e5e8;border-radius:10px;padding:8px 10px;display:flex;align-items:center;gap:10px}
.controls input[type=number]{width:90px}
.controls input[type=range]{width:160px}
.controls button{padding:8px 14px;border:0;border-radius:10px;background:#0e7afe;color:#fff;font-weight:600;cursor:pointer}
.stats{display:flex;gap:16px;padding:12px 16px}
.stats > div{flex:1;background:var(--card);border:1px solid #eee;border-radius:12px;padding:12px;min-height:64px}
.charts{padding:8px 16px}
.chart{background:#fff;border:1px solid #eee;border-radius:12px;padding:12px;margin:10px 0}
.chart h3{margin:0 0 8px 8px;font-size:15px;color:var(--muted)}
footer{padding:18px 16px;border-top:1px solid #eee;color:var(--muted)}