* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', sans-serif; }
body { background: #0b0b0d; color: #fff; overflow-x: hidden; }

.overlay { position: fixed; inset: 0; background: radial-gradient(circle at 50% -20%, #1a103d 0%, #0b0b0d 100%); z-index: -1; }

nav { display: flex; justify-content: space-between; padding: 15px 10%; align-items: center; background: rgba(11,11,13,0.8); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(255,255,255,0.05); position: sticky; top: 0; z-index: 1000; }
.logo { font-size: 1.2rem; font-weight: 800; letter-spacing: 2px; }
.logo span { color: #8b5cf6; }

.btn-panel { background: #8b5cf6; border: none; color: #fff; padding: 8px 20px; border-radius: 6px; cursor: pointer; font-weight: 600; font-size: 0.85rem; }

header { text-align: center; padding: 80px 20px 40px; }
header h1 { font-size: 3.5rem; font-weight: 800; letter-spacing: -2px; }
header h1 span { color: #8b5cf6; }

.pricing-table { 
    display: grid; 
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); 
    gap: 20px; 
    padding: 40px 5%; 
    max-width: 1400px; 
    margin: 0 auto; 
}

.card { background: #111114; border: 1px solid #1f1f23; padding: 30px 20px; border-radius: 12px; transition: 0.3s; display: flex; flex-direction: column; cursor: pointer; position: relative; }
.card:hover { border-color: #8b5cf6; transform: translateY(-5px); box-shadow: 0 10px 40px -10px rgba(139, 92, 246, 0.3); }

.badge { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); background: #8b5cf6; color: white; font-size: 0.6rem; padding: 4px 12px; border-radius: 20px; font-weight: 800; }

.price { font-size: 2rem; font-weight: 800; margin-bottom: 20px; }
.price span { font-size: 0.8rem; color: #4b5563; }

ul { list-style: none; margin-bottom: 25px; flex-grow: 1; }
ul li { padding: 8px 0; color: #d1d5db; font-size: 0.85rem; border-bottom: 1px solid rgba(255,255,255,0.03); }

.btn-action { width: 100%; padding: 12px; border-radius: 6px; background: #1f1f23; border: 1px solid #374151; color: #fff; font-weight: 600; cursor: pointer; }
.btn-action.primary { background: #8b5cf6; border: none; }

.auth-container { position: fixed; inset: 0; background: rgba(0,0,0,0.85); backdrop-filter: blur(10px); display: none; justify-content: center; align-items: center; z-index: 2000; }
.auth-card { background: #111114; border: 1px solid #1f1f23; padding: 40px; border-radius: 12px; width: 350px; text-align: center; }
.auth-card input { width: 100%; padding: 12px; margin: 8px 0; background: #0b0b0d; border: 1px solid #1f1f23; color: #fff; border-radius: 6px; }

/* DASHBOARD */
.info-row { background: #000; padding: 15px; border-radius: 8px; margin-top: 10px; display: flex; flex-direction: column; }
.status-box { color: #00ff88; font-weight: 800; margin-bottom: 15px; display: flex; align-items: center; gap: 10px; }
.dot { width: 8px; height: 8px; background: #00ff88; border-radius: 50%; box-shadow: 0 0 10px #00ff88; }
.ip-display { color: #8b5cf6; margin: 10px 0; }

.ultimate-card { border: 2px solid #ff4444 !important; animation: glow 2s infinite alternate; }
@keyframes glow { from { box-shadow: 0 0 10px rgba(255, 68, 68, 0.2); } to { box-shadow: 0 0 30px rgba(255, 68, 68, 0.5); } }