/* Custom Background Handling */
body {
  background-color: #050505;
  color: white;
}

.bg-image {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("https://i.ibb.co/1GJqGc07/2025-09-20-22-25-52.png") center/cover no-repeat;
  z-index: -2;
}

.bg-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at center, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.8) 100%);
  z-index: -1;
}

/* Glassmorphism Card */
.glass-card {
  background: rgba(20, 20, 30, 0.65);
  backdrop-filter: blur(12px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

/* Server Status Dot */
.status-dot {
  box-shadow: 0 0 10px #2ecc71;
}

/* Particle Animation */
.particles {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -1;
  overflow: hidden;
}
.particle {
  position: absolute;
  width: 4px;
  height: 4px;
  background: rgba(255,255,255,0.2);
  border-radius: 50%;
  animation: rise 10s infinite linear;
}
@keyframes rise {
  0% { transform: translateY(110vh) translateX(0); opacity: 0; }
  20% { opacity: 0.5; }
  80% { opacity: 0.5; }
  100% { transform: translateY(-10vh) translateX(20px); opacity: 0; }
}