* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: #0c4a6e;
  color: #e0f2fe;
  min-height: 100vh;
}
.container { max-width: 700px; margin: 0 auto; padding: 2rem; }
header { margin-bottom: 2rem; }
header h1 { color: #fff; }
.subtitle { color: #7dd3fc; }

main { display: grid; gap: 1.5rem; }
section { background: rgba(255,255,255,0.05); border-radius: 12px; padding: 1.5rem; }
h2 { color: #fff; margin-bottom: 1rem; }
h3 { color: #bae6fd; margin-bottom: 0.5rem; font-size: 1rem; }

.controls { display: flex; gap: 1rem; }
button { padding: 0.75rem 1.5rem; background: #0ea5e9; color: #fff; border: none; border-radius: 8px; cursor: pointer; }
button:hover { background: #0284c7; }

.charts { display: grid; gap: 1rem; }
.chart-container { background: rgba(255,255,255,0.02); border-radius: 8px; padding: 1rem; }
canvas { width: 100%; }

.alert { text-align: center; }
#alertBox {
  padding: 1.5rem; font-size: 1.5rem; font-weight: bold;
  background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%);
  border-radius: 8px; color: #fbbf24;
}