: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;

  /* Aqua Mint Text */
  --text: #9fffe0;
  --muted: #7acfb8;

  /* 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; }
}