* { box-sizing: border-box; margin: 0; padding: 0; }
body { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: #0b0e1a; font-family: system-ui, -apple-system, sans-serif; }

#particles-js {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 0;
}

.login-wrapper { position: relative; z-index: 1; width: 100%; padding: 1rem; }

.login-card {
    max-width: 480px; margin: 0 auto;
    background: rgba(255,255,255,0.05); backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 1.5rem;
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5);
}

.login-card .card-body { padding: 2.5rem 2rem; }

.login-card h1 {
    font-size: 1.75rem; font-weight: 700; color: #fff; text-align: center; margin-bottom: 0.25rem;
}
.login-card .subtitle { text-align: center; color: rgba(255,255,255,0.5); font-size: 0.875rem; margin-bottom: 2rem; }

.form-label { color: rgba(255,255,255,0.7); font-size: 0.85rem; font-weight: 500; }
.form-control, .form-control:focus {
    background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12);
    color: #fff; box-shadow: none;
}
.form-control::placeholder { color: rgba(255,255,255,0.25); }
.form-control:focus { border-color: rgba(99,102,241,0.6); }

.avatar-preview-wrapper {
    display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.5rem;
}
.avatar-preview-wrapper img, .avatar-placeholder {
    width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
}
.avatar-placeholder {
    background: rgba(255,255,255,0.08); display: flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,0.3); font-size: 1.25rem; border: 1px solid rgba(255,255,255,0.1);
}

.btn-connect {
    width: 100%; padding: 0.75rem; font-size: 1rem; font-weight: 600; border-radius: 50rem;
    background: linear-gradient(135deg, #6366f1, #8b5cf6); border: none; color: #fff;
    transition: all 0.2s ease;
}
.btn-connect:hover { transform: translateY(-1px); box-shadow: 0 8px 25px rgba(99,102,241,0.4); }
.btn-connect:disabled { opacity: 0.5; transform: none; box-shadow: none; }