:root {
  --bg: #0b0f14;
  --card: #121826;
  --text: #e5eef7;
  --muted: #9fb3c8;
  --accent: #55c2ff;
  --accent2: #7cffcb;
  --red: #ff6b6b;
}
* { box-sizing: border-box; }
html, body { margin:0; padding:0; background: var(--bg); color: var(--text); font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
.container { max-width: 980px; margin: 40px auto; padding: 0 16px; }
.card { background: var(--card); border-radius: 14px; padding: 16px; box-shadow: 0 8px 24px rgba(0,0,0,.35); margin-bottom: 16px;}
h1,h2,h3 { margin: 0 0 12px 0;}
label { display: block; font-size: 14px; color: var(--muted); margin-bottom: 6px;}
input, select, textarea { width: 100%; padding: 10px 12px; background: #0e1525; border: 1px solid #1c2a47; border-radius: 8px; color: var(--text);}
button, .btn { background: linear-gradient(135deg, var(--accent), var(--accent2)); border: 0; padding: 10px 14px; color: #001019; font-weight: 700; border-radius: 8px; cursor: pointer;}
.btn.secondary { background: #1f2b43; color: var(--text); border: 1px solid #2a3d69; }
form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.table { width: 100%; border-collapse: collapse; }
.table th, .table td { padding: 8px 10px; border-bottom: 1px solid #1c2a47; }
.kpi { display:grid; grid-template-columns: repeat(4,1fr); gap:12px;}
.kpi .card { text-align: center; }
.flash { padding: 10px 12px; background: #0e1a2e; border: 1px solid #21355e; border-radius: 8px; margin-bottom: 12px;}
.error { color: var(--red); }
.nav { display:flex; gap:16px; margin-bottom: 16px;}
.nav a { padding:8px 10px; background:#0e1525; border:1px solid #1c2a47; border-radius:8px; }
.nav a.active { border-color: var(--accent); color: var(--accent2); }