* {
            font-family: 'Inter', sans-serif;
        }
        
        .hero-gradient {
            background: linear-gradient(135deg, #1e40af 0%, #1e3a8a 100%);
        }
        
        .card-hover {
            transition: all 0.3s ease;
        }
        
        .card-hover:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
        }
        
        .text-gradient {
            background: linear-gradient(135deg, #1e40af 0%, #1e3a8a 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        
        .server-card {
            transition: all 0.3s ease;
            border: 2px solid transparent;
        }
        
        .server-card:hover {
            border-color: #1e40af;
            transform: translateY(-3px);
        }
        
        .server-online {
            background: linear-gradient(45deg, #10b981, #34d399);
        }
        
        .server-offline {
            background: linear-gradient(45deg, #ef4444, #f87171);
        }
        
        .nav-link {
            position: relative;
            transition: color 0.3s ease;
        }
        
        .nav-link::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 0;
            height: 2px;
            background: linear-gradient(135deg, #1e40af 0%, #1e3a8a 100%);
            transition: width 0.3s ease;
        }
        
        .nav-link:hover::after {
            width: 100%;
        }
        
        /* Mobile drawer – controlled via JS classes now */
        
        .password-display {
            font-family: 'Courier New', monospace;
            letter-spacing: 2px;
        }
        
        .copy-button {
            transition: all 0.2s ease;
        }
        
        .copy-button:active {
            transform: scale(0.95);
        }
        
        .copy-button.copied {
            background: #10b981;
            color: white;
        }
        
        @keyframes float {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-20px); }
        }
        
        .float-animation {
            animation: float 6s ease-in-out infinite;
        }
        
        .scroll-smooth {
            scroll-behavior: smooth;
        }/* Base Settings */
body {
  background-color: #f8fafc; /* Slate 50 to match Tailwind default */
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 
   Mesh Gradient Background 
   Used for hero sections or creative backgrounds 
*/
.mesh-gradient {
  background-color: hsla(0, 100%, 50%, 1);
  background-image: 
    radial-gradient(at 40% 20%, hsla(28,100%,74%,1) 0px, transparent 50%),
    radial-gradient(at 80% 0%, hsla(189,100%,56%,1) 0px, transparent 50%),
    radial-gradient(at 0% 50%, hsla(340,100%,76%,1) 0px, transparent 50%),
    radial-gradient(at 80% 50%, hsla(340,100%,76%,1) 0px, transparent 50%),
    radial-gradient(at 0% 100%, hsla(22,100%,77%,1) 0px, transparent 50%),
    radial-gradient(at 80% 100%, hsla(242,100%,70%,1) 0px, transparent 50%),
    radial-gradient(at 0% 0%, hsla(343,100%,76%,1) 0px, transparent 50%);
}

/* 
   Soft Gradient 
   A subtle alternative to plain white backgrounds
*/
.soft-gradient-bg {
  background: linear-gradient(135deg, #fdfbfb 0%, #ebedee 100%);
}

/* 
   Glassmorphism Card 
   Creates the frosted glass effect used in floating widgets
*/
.glass-card {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.5);
}

/* 
   3D Perspective Container 
   Used for the Hero graphic to give depth to floating elements 
*/
.perspective-1000 {
  perspective: 1000px;
}

/* 
   Utility: Hide scrollbar but keep functionality 
   Useful for horizontal scrolling containers
*/
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}