:root { --club-blue: #11b8e8; --club-dark: #102337; }
* { box-sizing: border-box; }
body { min-height: 100vh; margin: 0; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; background: #eef7fb; color: var(--club-dark); }
.login-page { min-height: 100vh; display: grid; place-items: center; padding: 2rem 1rem; }
.login-card { width: min(960px, 100%); overflow: hidden; border-radius: 1.5rem; background: #fff; box-shadow: 0 1.5rem 4rem rgba(16, 35, 55, .13); }
.login-brand { min-height: 560px; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 3rem; background: linear-gradient(145deg, #102337, #0b4764); color: white; text-align: center; }
.club-logo { width: 190px; height: 190px; object-fit: contain; margin-bottom: 2rem; filter: drop-shadow(0 12px 16px rgba(0,0,0,.2)); }
.eyebrow { text-transform: uppercase; letter-spacing: .16em; font-size: .72rem; font-weight: 700; margin-bottom: .7rem; }
.login-brand h1 { font-weight: 750; }
.brand-copy { max-width: 280px; color: rgba(255,255,255,.72); }
.login-form { display: flex; align-items: center; padding: 3rem; }
.form-content { width: min(390px, 100%); margin: auto; }
.form-content h2 { font-weight: 750; font-size: 2rem; }
.form-label { font-weight: 600; font-size: .9rem; }
.input-group-text { background: #f8fafb; color: #8393a1; border-right: 0; }
.input-group .form-control { border-left: 0; }
.input-group .form-control:focus { border-color: #86dff6; box-shadow: none; }
.password-toggle { border-left: 0; background: white; }
.btn-primary { --bs-btn-bg: #087fad; --bs-btn-border-color: #087fad; --bs-btn-hover-bg: #066b91; --bs-btn-hover-border-color: #066b91; }
.copyright { color: #78909c; font-size: .8rem; margin: 1rem 0 0; }
@media (max-width: 991.98px) { .login-brand { min-height: auto; padding: 2.5rem 2rem; } .club-logo { width: 120px; height: 120px; margin-bottom: 1rem; } .login-form { padding: 2.5rem 2rem; } }