:root {
  --font-sans: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;

  /* Vibrant dark theme */
  --bg: radial-gradient(1200px 800px at 20% 10%, #101a2e, #0b0f14 55%, #06080d 100%);
  --bg-soft: #0f1524;
  --card: #121c35;
  --text: #eef4ff;
  --muted: #a9b7d6;

  /* Accents */
  --accent: #7cc2ff;
  --accent-2: #7bffcf;
  --accent-3: #d07cff;
  --accent-4: #ffd36e;

  /* Status */
  --danger: #ff5c7c;
  --warning: #ffdb6e;
  --ok: #48e2a3;

  --border: #2a3b62;
  --radius: 14px;
  --ring: 0 0 0 3px rgba(124, 194, 255, .35);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); font-family: var(--font-sans); }
a { color: var(--accent); text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--accent-2); text-decoration: none; }
button {
  border-radius: 12px;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, #1a2747, #0e1730);
  color: var(--text); padding: .65rem .95rem; cursor: pointer;
  transition: transform .05s ease, box-shadow .2s ease, border-color .2s ease;
}
button:hover { box-shadow: 0 8px 18px rgba(124,194,255,.12); border-color: #38518b; }
button:active { transform: translateY(1px); }
button[disabled] { opacity: .6; cursor: not-allowed; }
input, select {
  background: #0d1426; color: var(--text); border: 1px solid var(--border);
  border-radius: 12px; padding: .6rem .75rem; transition: border-color .2s ease, box-shadow .2s ease;
}
input:focus, select:focus { outline: none; border-color: #3d5fa8; box-shadow: var(--ring); }

.card {
  background: radial-gradient(800px 400px at 0% -10%, rgba(124,194,255,.06), transparent 45%) , var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1rem; box-shadow: 0 12px 28px rgba(0,0,0,.25);
}
header, footer { background: var(--bg-soft); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.container { max-width: 1000px; margin: 0 auto; padding: 0 1rem; }
.flex { display: flex; gap: .75rem; }
.row { display: flex; flex-wrap: wrap; gap: 1rem; }
.col { flex: 1 1 300px; }
.hide { display: none !important; }

.tag {
  display: inline-block; padding: .25rem .6rem;
  background: linear-gradient(135deg, rgba(124,194,255,.15), rgba(208,124,255,.15));
  border: 1px solid var(--border); border-radius: 999px; font-size: .78rem; color: var(--muted);
}
.badge { padding: .2rem .55rem; border-radius: 999px; font-size: .75rem; border: 1px solid var(--border); }
.badge.ok { background: rgba(72,226,163,.15); color: var(--ok); }
.badge.warn { background: rgba(255,219,110,.15); color: var(--warning); }
.badge.danger { background: rgba(255,92,124,.15); color: var(--danger); }
hr { border: none; border-top: 1px solid var(--border); margin: 1rem 0; }

@media (max-width: 640px) {
  nav .left, nav .right { gap: .5rem; }
}