:root { color-scheme: light; font-family: Inter, ui-sans-serif, system-ui, sans-serif; background: #edf2f0; color: #0c1718; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 80% 0%, #b8e0d8, transparent 38%), #edf2f0; }
.page { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.card { width: min(100%, 430px); padding: 30px; border: 1px solid #bfd1cd; border-radius: 26px; background: rgba(255,255,255,.88); box-shadow: 0 20px 60px #1233; }
.eyebrow { margin: 0 0 12px; letter-spacing: .13em; font-size: .72rem; font-weight: 800; color: #087788; }
h1,h2 { margin: 0; line-height: 1.06; font-weight: 900; letter-spacing: -.04em; }
h1 { font-size: clamp(1.55rem, 6.2vw, 2.2rem); white-space: nowrap; } h2 { font-size: 2rem; }
.intro, .notice { color: #536564; line-height: 1.5; }
.form { display: grid; gap: 14px; margin-top: 24px; }
label { display: grid; gap: 7px; font-weight: 750; font-size: .9rem; }
input { border: 1px solid #a7bab6; border-radius: 12px; padding: 14px; font: inherit; color: inherit; background: #fff; }
input:focus { outline: 3px solid #a9ded5; border-color: #087788; }
button { border: 0; border-radius: 13px; padding: 15px; background: #087788; color: white; font: inherit; font-weight: 850; cursor: pointer; }
button:disabled { background: #859391; cursor: not-allowed; }
.message { min-height: 1.3em; margin: 18px 0 0; color: #9b2929; font-weight: 650; }
.hidden { display: none; }
.profile-topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #087788; font-size: .7rem; font-weight: 900; letter-spacing: .08em; }
.logout { padding: 7px 0; background: transparent; color: #087788; font-size: .75rem; letter-spacing: .06em; }
.player-avatar { display: block; width: 224px; height: 224px; max-width: min(100%, 224px); max-height: min(62vw, 224px); margin: 18px auto 18px; border: 5px solid #d7eeea; border-radius: 50%; object-fit: cover; background: #e5efed; box-shadow: 0 10px 25px #0b292633; }
.club-name { margin: 20px 0 0; color: #087788; text-align: center; font-size: clamp(1.2rem, 5vw, 1.6rem); font-weight: 900; letter-spacing: .025em; text-transform: uppercase; }
.profile-view .card { position: relative; padding-top: 22px; }
.profile-view .profile-topbar { position: absolute; top: 28px; left: 30px; right: 30px; }
.profile-view #portal-header { display: block; padding-top: 70px; }
.profile-view #portal-header .eyebrow, .profile-view #portal-header .intro { display: none; }
.profile-view #portal-header h1 { font-size: clamp(1.65rem, 7vw, 2.1rem); }
.profile-view #player-name { margin: 0; text-align: center; }
.profile-view .intro { text-align: center; }