:root {
  --bg: #0b1020;
  --card: #121a33;
  --text: #e8ecf8;
  --muted: #a8b0c7;
  --accent: #7aa2ff;
  --accent-2: #4ad6b8;
  --danger: #ff6b6b;
  --grid: #283357;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  background: radial-gradient(1200px 600px at 10% -10%, #14204a 0%, transparent 60%),
              radial-gradient(1000px 800px at 110% 0%, #0e1b3e 0%, transparent 60%),
              var(--bg);
  color: var(--text);
}

header, footer { text-align: center; }
header { padding: 2rem 1rem 1rem; }
header h1 { margin: 0 0 .25rem; font-weight: 700; }
header p { margin: 0; color: var(--muted); }

.auth { margin-top: .75rem; display: flex; gap: .5rem; justify-content: center; align-items: center; flex-wrap: wrap; }
.auth input[type="email"], .auth input[type="password"] { max-width: 200px; }
.auth #auth-status { color: var(--muted); }

main { max-width: 1000px; margin: 0 auto; padding: 1rem; display: grid; gap: 1rem; }
.card { background: color-mix(in oklab, var(--card) 92%, black 8%); border: 1px solid #1f2a4d; border-radius: 10px; padding: 1rem; box-shadow: 0 10px 30px rgba(0,0,0,.2); }

form .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .75rem; }
label { display: grid; gap: .25rem; font-size: .95rem; color: var(--muted); }
input[type="date"], input[type="number"], input[type="text"] {
  width: 100%;
  padding: .6rem .7rem;
  border-radius: 8px;
  border: 1px solid #243259;
  background: #0f1731;
  color: var(--text);
}
input::placeholder { color: #7c86a6; }

.actions { display: flex; gap: .5rem; margin-top: .75rem; }
button {
  appearance: none;
  border: none;
  border-radius: 8px;
  padding: .6rem .9rem;
  font-weight: 600;
  color: #081020;
  background: linear-gradient(180deg, var(--accent), #5a86ff);
  box-shadow: 0 6px 20px rgba(122,162,255,.35);
  cursor: pointer;
}
button.secondary { background: #22305b; color: var(--text); box-shadow: inset 0 0 0 1px #2d3c6d; }
button.danger { background: var(--danger); color: white; box-shadow: 0 6px 16px rgba(255,107,107,.3); }
button:disabled { opacity: .6; cursor: not-allowed; }

.error { color: var(--danger); margin: .25rem 0 0; }
.muted { color: var(--muted); margin: .25rem 0 0; }

.table-wrap { overflow: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: .5rem .6rem; border-bottom: 1px solid #1e2a50; }
thead th { position: sticky; top: 0; background: #0f1731; text-align: left; color: var(--muted); font-weight: 600; }
.num { text-align: right; }
tbody tr:hover { background: rgba(122,162,255,.06); }

.chart { width: 100%; height: 320px; position: relative; }
.legend { display: flex; align-items: center; gap: .4rem; color: var(--muted); margin-top: .5rem; }
.legend .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent-2); display: inline-block; }

footer { padding: 1rem; color: var(--muted); }

@media (prefers-reduced-motion: no-preference) {
  .chart svg .line { filter: drop-shadow(0 0 8px rgba(74,214,184,.25)); }
}