/* ====== your provided styles (slightly scoped) ====== */
        *{margin:0;padding:0;box-sizing:border-box}
        body{font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;background:linear-gradient(135deg,#cc00ff 0%,#0059ff 100%);min-height:100vh;overflow-x:hidden}
        .bg-particles{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0}
        .particle{position:absolute;background:rgba(0, 0, 0, 0.1);border-radius:50%;animation:float 6s ease-in-out infinite}
        .particle:nth-child(1){width:4px;height:4px;left:10%;animation-delay:0s}
        .particle:nth-child(2){width:6px;height:6px;left:20%;animation-delay:1s}
        .particle:nth-child(3){width:3px;height:3px;left:30%;animation-delay:2s}
        .particle:nth-child(4){width:5px;height:5px;left:40%;animation-delay:3s}
        .particle:nth-child(5){width:4px;height:4px;left:50%;animation-delay:4s}
        .particle:nth-child(6){width:7px;height:7px;left:60%;animation-delay:5s}
        .particle:nth-child(7){width:3px;height:3px;left:70%;animation-delay:6s}
        .particle:nth-child(8){width:5px;height:5px;left:80%;animation-delay:7s}
        .particle:nth-child(9){width:4px;height:4px;left:90%;animation-delay:8s}
        @keyframes float{0%,100%{transform:translateY(100vh) rotate(0);opacity:0}10%{opacity:1}90%{opacity:1}100%{transform:translateY(-100px) rotate(360deg);opacity:0}}
        .container{position:relative;z-index:1;max-width:1400px;margin:0 auto;padding:20px}

        /* header */
        .header{background:rgba(0, 140, 255, 0.5);backdrop-filter:blur(20px);border:1px solid rgba(170, 170, 170, 0.2);border-radius:20px;padding:20px 30px;margin-bottom:30px;display:flex;justify-content:space-between;align-items:center;animation:slideInDown .8s ease-out}
        .logo{display:flex;align-items:center;gap:15px}
        .logo-icon{width:50px;height:50px;background:linear-gradient(45deg,#5865F2,#3B82F6);border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:24px;animation:pulse 2s infinite;color:#fff}
        .logo h1{color:#ffffff;font-size:28px;font-weight:700;background:linear-gradient(45deg,#fff,#e0e7ff);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
        .header-stats{display:flex;align-items:center;gap:30px;color:#fff}
        .header-stat{text-align:center}
        .header-stat-value{font-size:20px;font-weight:700;display:block}
        .header-stat-label{font-size:12px;opacity:.8;text-transform:uppercase}
        .user-info{display:flex;align-items:center;gap:15px;color:#ffffff}
        .user-avatar{width:45px;height:45px;background:linear-gradient(45deg,#f50be2,#EF4444);border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:18px}
        .user-email{font-size:12px;opacity:.9}
        .logout-btn{background:rgba(0, 140, 255,.1);border:1px solid rgba(255,255,255,.3);padding:8px 12px;border-radius:8px;color:#fff;cursor:pointer}

        /* nav */
        .nav{background:rgba(0, 140, 255, 0.5);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.2);border-radius:20px;padding:15px;margin-bottom:30px;animation:slideInLeft .8s ease-out}
        .nav-items{display:flex;gap:10px;flex-wrap:wrap}
        .nav-item{padding:12px 24px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);border-radius:12px;color:#fff;text-decoration:none;transition:.3s;font-weight:500;cursor:pointer}
        .nav-item:hover,.nav-item.active{background:rgba(255,255,255,.2);transform:translateY(-2px);box-shadow:0 8px 25px rgba(0,0,0,.2)}

        /* content */
        .page{display:none;animation:fadeInUp .8s ease-out}
        .page.active{display:block}
        .card{background:rgba(0, 140, 255, 0.5);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.2);border-radius:20px;padding:30px;margin-bottom:30px;transition:.3s; color: #000000;}
        .card:hover{transform:translateY(-5px);box-shadow:0 20px 40px rgba(255, 255, 255, 0.2)}
        .card-title{color:#fff;font-size:24px;font-weight:700;margin-bottom:20px;display:flex;align-items:center;gap:12px}
        .card-icon{width:40px;height:40px;background:linear-gradient(45deg,#10B981,#059669);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:20px;color:#fff}

        /* overview */
        .overview-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:30px}
        .stats-overview{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;margin-bottom:20px}
        .stat-card{background:rgba(255,255,255,.05);border:1px solid rgba(255, 255, 255, 0.1);border-radius:15px;padding:20px;text-align:center;transition:.3s}
        .stat-card:hover{transform:translateY(-3px);background:rgba(255,255,255,.1)}
        .stat-card-value{color:#fff;font-size:32px;font-weight:700;display:block;margin-bottom:8px}
        .stat-card-label{color:rgba(255,255,255,.8);font-size:14px;font-weight:500}

        /* lists */
        .guild-list,.activity-feed,.command-list{max-height:400px;overflow-y:auto}
        .guild-item{display:flex;align-items:center;gap:15px;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.1)}
        .guild-avatar{width:50px;height:50px;border-radius:12px;background:linear-gradient(45deg,#8B5CF6,#A855F7);display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff}
        .guild-info{flex:1}
        .guild-name{color:#ffffff;font-weight:600;margin-bottom:4px}
        .guild-members{color:rgba(255,255,255,.6);font-size:14px}
        .guild-status{padding:4px 8px;border-radius:12px;font-size:12px;font-weight:600}
        .guild-active{background:rgba(16,185,129,.2);color:#10B981}
        .guild-inactive{background:rgba(107,114,128,.2);color:#9CA3AF}

        /* status */
        .status-grid{display:grid;gap:20px}
        .cluster{background:rgba(255,255,255,.05);border:1px solid rgba(255, 255, 255, 0.1);border-radius:15px;padding:20px;transition:.3s}
        .cluster:hover{background:rgba(255,255,255,.1);transform:scale(1.02)}
        .cluster-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}
        .cluster-name{color:#fff;font-size:18px;font-weight:600}
        .status-indicator{display:flex;align-items:center;gap:8px;padding:6px 12px;border-radius:20px;font-size:12px;font-weight:700;text-transform:uppercase}
        .status-dot{width:8px;height:8px;border-radius:50%;animation:pulse 2s infinite}
        .status-online{background:rgba(16,185,129,.2);color:#10B981;border:1px solid rgba(16,185,129,.3)}
        .status-online .status-dot{background:#10B981}
        .status-warning{background:rgba(245,158,11,.2);color:#F59E0B;border:1px solid rgba(245,158,11,.3)}
        .status-warning .status-dot{background:#F59E0B}
        .status-offline{background:rgba(239,68,68,.2);color:#EF4444;border:1px solid rgba(239,68,68,.3)}
        .status-offline .status-dot{background:#EF4444}
        .status-crashed{background:rgba(128,0,128,.2);color:#800080;border:1px solid rgba(128,0,128,.3)}
        .status-crashed .status-dot{background:#800080}
        .cluster-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(100px,1fr));gap:15px;margin-top:15px}
        .stat{text-align:center}
        .stat-value{color:#fff;font-size:24px;font-weight:700;display:block}
        .stat-label{color:rgba(255, 255, 255, 0.7);font-size:12px;text-transform:uppercase;margin-top:4px}

        /* controls */
        .control-panel{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;margin-bottom:30px}
        .control-button{background:rgba(255,255,255,.1);border:1px solid rgba(0, 0, 0, 0.2);border-radius:12px;padding:15px;color:#000000;text-align:center;cursor:pointer;transition:.3s;display:flex;flex-direction:column;align-items:center;gap:10px}
        .control-button:hover{background:rgba(0, 0, 0, 0.2);transform:translateY(-3px)}
        .control-button i{font-size:24px}
        .control-button.restart{color:#F59E0B}
        .control-button.update{color:#3B82F6}
        .control-button.maintenance{color:#EF4444}
        .control-button.cluster{color:#10B981}
        .cluster-controls{display:none;margin-top:15px;background:rgba(0,0,0,.1);padding:15px;border-radius:10px}
        .cluster-controls.active{display:block}

        /* forms/buttons */
        .form-input{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);border-radius:8px;padding:10px 12px;color:#000000}
        .btn{background:linear-gradient(45deg,#3B82F6,#6366F1);color:#fff;border:none;border-radius:8px;padding:10px 16px;font-size:14px;font-weight:700;cursor:pointer;transition:.3s}
        .btn:hover{transform:translateY(-2px);box-shadow:0 5px 15px rgba(0,0,0,.2)}
        .btn-secondary{background:rgba(255,255,255,.1)}

        /* auth modal */
        .auth-overlay{position:fixed;inset:0;background:rgba(0,0,0,.7);display:flex;align-items:center;justify-content:center;z-index:1000}
        .auth-card{width:100%;max-width:420px;background:rgba(255,255,255,.08);backdrop-filter:blur(18px);border:1px solid rgba(255,255,255,.2);border-radius:16px;padding:24px}
        .auth-title{color:#000000;font-weight:800;font-size:22px;margin-bottom:10px}
        .auth-sub{color:#000000;opacity:.8;margin-bottom:18px}
        .auth-grid{display:grid;gap:10px}
        .auth-actions{display:flex;gap:10px;margin-top:10px}

        /* misc */
        .loading-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.7);display:flex;align-items:center;justify-content:center;z-index:1000;opacity:0;pointer-events:none;transition:.3s}
        .loading-overlay.active{opacity:1;pointer-events:all}
        .loading-spinner{width:50px;height:50px;border:4px solid rgba(255,255,255,.1);border-radius:50%;border-top-color:#3B82F6;animation:spin 1s linear infinite}
        @keyframes slideInDown{from{transform:translateY(-100px);opacity:0}to{transform:translateY(0);opacity:1}}
        @keyframes slideInLeft{from{transform:translateX(-100px);opacity:0}to{transform:translateX(0);opacity:1}}
        @keyframes fadeInUp{from{transform:translateY(50px);opacity:0}to{transform:translateY(0);opacity:1}}
        @keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}
        @keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}
        @media(max-width:768px){
          .overview-grid{grid-template-columns:1fr}
          .header{flex-direction:column;gap:20px;text-align:center}
          .header-stats{gap:15px}
          .nav-items{justify-content:center}
          .cluster-stats{grid-template-columns:repeat(2,1fr)}
          .control-panel{grid-template-columns:1fr 1fr}
        }

        /* Homepage specific styles */
        .hero {
            text-align: center;
            padding: 80px 20px;
            color: rgb(255, 255, 255);
        }
        
        .hero h1 {
            font-size: 3.5rem;
            font-weight: 800;
            margin-bottom: 20px;
            background: linear-gradient(45deg, #ff0000, #003cff);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        
        .hero p {
            font-size: 1.2rem;
            max-width: 700px;
            margin: 0 auto 40px;
            opacity: 0.9;
            line-height: 1.6;
        }
        
        .cta-buttons {
            display: flex;
            gap: 15px;
            justify-content: center;
            margin-bottom: 60px;
        }
        
        .btn-primary {
            background: linear-gradient(45deg, #f25858, #a200ff);
            padding: 15px 30px;
            font-size: 1.1rem;
            border-radius: 12px;
            font-weight: 600;
            border: 3px solid rgb(111, 0, 255);
        }
        
        .btn-secondary {
            background: rgba(0, 0, 0, 1);
            padding: 15px 30px;
            font-size: 1.1rem;
            border-radius: 12px;
            font-weight: 600;
            border: 3px solid rgba(114, 114, 114, 0.5);
        }
        
        .features {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
            margin: 60px 0;
        }
        
        .feature-card {
            background: rgba(0, 0, 0, 0.5);
            border: 1px solid rgba(0, 0, 0, 0.1);
            border-radius: 16px;
            padding: 30px;
            transition: all 0.3s ease;
        }
        
        .feature-card:hover {
            transform: translateY(-5px);
            background: rgba(0, 0, 0, 0.5);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.5);
        }
        
        .feature-icon {
            width: 60px;
            height: 60px;
            border-radius: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            margin-bottom: 20px;
            color: rgb(0, 0, 0);
        }
        
        .feature-card h3 {
            font-size: 1.5rem;
            margin-bottom: 15px;
            color: rgb(0, 0, 0);
        }
        
        .feature-card p {
            opacity: 0.8;
            line-height: 1.6;
        }
        
        .stats {
            background: rgba(0, 0, 0, 0.5);
            border-radius: 16px;
            padding: 40px;
            margin: 60px 0;
            text-align: center;
        }
        
        .stats h2 {
            font-size: 2rem;
            margin-bottom: 40px;
            color: rgb(0, 0, 0);
        }
        
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 30px;
        }
        
        .stat-item h3 {
            font-size: 2.5rem;
            margin-bottom: 10px;
            color: rgb(0, 0, 0);
            font-weight: 700;
        }
        
        .stat-item p {
            opacity: 0.8;
            font-size: 1rem;
        }