:root {
  --color-background: #03060d;
  --color-background-muted: #060a14;
  --color-card: #0b1220;
  --color-card-muted: #0e1628;
  --color-text: #e6fbff;
  --color-text-muted: #7fa6b8;

  --color-primary: #00eaff;
  --color-secondary: #00ffcc;
  --color-accent: #ff3df2;

  --glow-cyan: rgba(0, 234, 255, 0.45);
  --glow-teal: rgba(0, 255, 204, 0.35);
  --glow-pink: rgba(255, 61, 242, 0.35);

  --card-border: rgba(0, 234, 255, 0.18);
  --card-border-hover: rgba(255, 61, 242, 0.5);
}

/* 🌌 Background — darker + colorful glow layers */
body {
  background:
    radial-gradient(circle at 10% 10%, rgba(0, 234, 255, 0.12), transparent 30%),
    radial-gradient(circle at 90% 10%, rgba(0, 255, 204, 0.10), transparent 30%),
    radial-gradient(circle at 50% 90%, rgba(255, 61, 242, 0.12), transparent 30%),
    radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.9), #03060d 80%);
  color: var(--color-text);
}

/* 🧱 Cards */
.card,
.service,
.bookmark,
.widget {
  background: linear-gradient(180deg, #0b1220 0%, #070c16 100%);
  border: 1px solid var(--card-border);
  border-radius: 18px;
  box-shadow:
    0 0 12px rgba(0, 234, 255, 0.06),
    inset 0 0 12px rgba(0, 234, 255, 0.02);
}

/* ✨ Hover = neon pop */
.card:hover,
.service:hover,
.bookmark:hover {
  border-color: var(--card-border-hover);
  box-shadow:
    0 0 20px var(--glow-pink),
    0 0 30px rgba(255, 61, 242, 0.2);
  transform: translateY(-2px) scale(1.01);
  transition: all 0.18s ease;
}

/* 🔗 Links */
a {
  color: var(--color-primary);
  text-shadow: 0 0 6px rgba(0, 234, 255, 0.3);
}

a:hover {
  color: var(--color-accent);
  text-shadow: 0 0 10px var(--glow-pink);
}

/* 🧠 Titles */
h1, h2, h3, h4,
.title,
.group-title,
.section-title {
  color: #eaffff;
  text-shadow:
    0 0 10px rgba(0, 234, 255, 0.2),
    0 0 20px rgba(0, 255, 204, 0.1);
}

/* 📝 Text */
.description,
.subtitle,
.small,
.text-muted {
  color: var(--color-text-muted);
}

/* 🔳 Icons glow */
svg,
.icon {
  filter: drop-shadow(0 0 6px rgba(0, 234, 255, 0.35));
}

/* 🔍 Search bar neon */
input,
.search input {
  background: #060d1a !important;
  border: 1px solid rgba(0, 234, 255, 0.25) !important;
  color: var(--color-text) !important;
  box-shadow: 0 0 10px rgba(0, 234, 255, 0.08);
}

input:focus,
.search input:focus {
  border-color: rgba(255, 61, 242, 0.5) !important;
  box-shadow:
    0 0 0 1px rgba(255, 61, 242, 0.3),
    0 0 14px rgba(255, 61, 242, 0.2);
}

/* 📊 Status indicators */
.status .up {
  color: #00ffcc;
  text-shadow: 0 0 8px var(--glow-teal);
}

.status .down {
  color: #ff3df2;
  text-shadow: 0 0 8px var(--glow-pink);
}

/* 🔹 Widget headers */
.widget-header,
.card-header {
  border-bottom: 1px solid rgba(0, 234, 255, 0.12);
}

/* ✨ Subtle animated glow pulse (very light) */
@keyframes glowPulse {
  0% { box-shadow: 0 0 10px rgba(0, 234, 255, 0.05); }
  50% { box-shadow: 0 0 20px rgba(0, 234, 255, 0.12); }
  100% { box-shadow: 0 0 10px rgba(0, 234, 255, 0.05); }
}

.card,
.service {
  animation: glowPulse 6s infinite ease-in-out;
}