:root {
  --bg: #0b0d12;
  --fg: #f4f6fb;
  --muted: #aeb7c7;
  --card: #121623;
  --accent: #3a7afe;
  --good: #26a269;
}
* { box-sizing: border-box; }
html, body { margin:0; padding:0; font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
body { background: var(--bg); color: var(--fg); }
.container { max-width: 1100px; margin: 32px auto; padding: 0 16px; }
h1 { font-weight: 700; font-size: 28px; margin: 0 0 8px; }
.subtitle { color: var(--muted); margin-bottom: 24px; }
.grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.card { background: var(--card); border-radius: 14px; padding: 16px; box-shadow: 0 10px 20px rgba(0,0,0,0.22); }
.card h3 { margin: 0 0 6px; font-size: 14px; color: var(--muted); font-weight: 600; letter-spacing: .3px; }
.card .value { font-size: 24px; font-weight: 700; }
.card .chip { display:inline-block; font-size: 12px; padding: 4px 8px; border-radius: 999px; background: rgba(58,122,254,.1); color: #9bb8ff; margin-left: 8px; }
.controls { display:flex; gap:12px; align-items:center; margin-bottom:16px; flex-wrap: wrap; }
input[type="date"] { background: #0e1320; border: 1px solid #1c2335; color: var(--fg); padding: 8px 10px; border-radius: 10px; }
button, .btn { background: var(--accent); border: none; color: white; padding: 10px 14px; border-radius: 10px; cursor: pointer; font-weight: 600; }
.btn--secondary { background: #1b2236; color: var(--fg); }
.table-wrap { overflow: auto; margin-top: 16px; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 10px; border-bottom: 1px solid #222a40; }
th { color: var(--muted); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .5px; }
.kpi { display:flex; gap:16px; align-items:center; }
.badge { font-size: 12px; background: rgba(38,162,105,.12); color: #9de2bf; padding: 2px 8px; border-radius: 999px; }
footer { color: var(--muted); font-size: 12px; text-align:center; margin: 24px 0 40px; }
.chart { background: var(--card); border-radius: 14px; padding: 16px; margin-top: 16px; }
.toggle { margin-left:auto; }