/* Player account: the same clear blue and white system as the club dashboard. */
#portal{background:#f4f7fb;scroll-margin-top:24px}
#portal>.section-heading{align-items:flex-start;gap:24px;margin-bottom:30px}
#portal>.section-heading h2{font-size:clamp(28px,3.4vw,42px);line-height:1.25;max-width:650px;letter-spacing:-1px;margin-top:12px}
#portal>.section-heading>p{font-size:16px;line-height:1.7;max-width:360px;margin:0}
#portal .eyebrow{font-size:11px;line-height:1.6;letter-spacing:1.3px}
#portal :is(button,a){touch-action:manipulation}
#portal :is(input,select,textarea){font-size:16px;min-height:48px;min-width:0;width:100%;max-width:100%;border-radius:8px;border-color:#cdd9e6}
#portal :is(button,.button,.text-link){min-height:44px;line-height:1.5;font-size:14px}
#portal .button{border-radius:8px;white-space:normal;text-align:center;padding:12px 18px}
#portal .login-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0;background:white;border:1px solid #dce5ef;border-radius:14px;overflow:hidden;box-shadow:0 4px 16px #17314e05}
#portal .login-intro{padding:36px;background:#102b43;color:white;border:0}
#portal .login-intro h3{font-size:27px;letter-spacing:-.5px;line-height:1.3;color:white}
#portal .login-intro p{font-size:15px;line-height:1.8;color:#d1deec;max-width:50ch}
#portal .portal-features{gap:12px;margin-top:28px;display:grid}
#portal .portal-features span{display:block;font-size:14px;color:#e7f0fb;border-top:1px solid #31506c;padding-top:12px}
#portal .login-form{padding:36px;display:flex;flex-direction:column;gap:14px;background:white;min-width:0}
#portal .login-form label{font-size:14px;font-weight:600;color:#233c55}
#portal .login-form small{font-size:13px;line-height:1.7;color:#52677e}
#portal .login-form #code-field label{display:block;margin-bottom:10px}
#portal .login-form .text-link{text-align:left;align-self:flex-start;margin:0;padding:4px 0}
#portal .form-status{font-size:13px;line-height:1.7;color:#52677e;margin:0;padding:0;overflow-wrap:anywhere}
#member-panel{border:1px solid #dce5ef;border-radius:14px;overflow:hidden;background:white;box-shadow:0 4px 16px #17314e05}
#portal .member-heading{background:#102b43;padding:28px 30px;gap:20px;display:flex;align-items:center;justify-content:space-between}
#portal .member-heading .eyebrow{color:#b5cbe3}
#portal .member-heading h3{font-size:28px;line-height:1.35;letter-spacing:-.6px;color:white;margin:10px 0 4px}
#portal .member-heading small{font-size:14px;color:#cfdeee}
#portal .member-heading .button{flex-shrink:0}
.member-workspace{display:grid;grid-template-columns:220px minmax(0,1fr);min-height:360px}
#portal .member-tabs{display:flex;flex-direction:column;gap:6px;align-items:stretch;border:0;border-right:1px solid #dce5ef;margin:0;background:#f7f9fc;padding:24px 16px;overflow:visible}
#portal .member-tabs button{display:flex;align-items:center;justify-content:flex-start;min-height:46px;text-align:left;padding:12px 14px;border:0;border-radius:8px;color:#4c627a;background:transparent;font-size:14px;white-space:normal}
#portal .member-tabs button.active{background:#e7effd;color:#154ea7;font-weight:700}
#portal .member-tabs button:hover{background:#eaf0f8}
.member-content{min-width:0;padding:26px 30px}
#portal .member-content>#member-status{font-size:12px;border-bottom:1px solid #e6edf4;padding:0 0 16px;margin:0 0 24px;color:#516d83}
#portal .member-view{padding:0;border:0;outline-offset:6px}
#portal .member-view h3{font-size:23px;line-height:1.4;letter-spacing:-.4px;color:var(--ink);margin:0 0 8px}
#portal .member-view h4{font-size:16px;font-weight:700;margin:28px 0 14px;line-height:1.5}
#portal .member-view>p{font-size:15px;line-height:1.8;margin:12px 0 24px}
.member-section-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:24px}
.member-section-heading>div{min-width:0}
#portal .member-section-heading p{font-size:15px;color:#53697e;line-height:1.7;margin:6px 0 0}
.member-section-heading>a{flex-shrink:0}
#portal .enrollment-row{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:20px;border:1px solid #dce5ef;border-radius:10px;background:#fafcff;margin-bottom:14px}
#portal .enrollment-row>div{min-width:0}
#portal .enrollment-row h4{font-size:17px;line-height:1.5;margin:0 0 7px;overflow-wrap:anywhere}
#portal .enrollment-row p{font-size:14px;line-height:1.7;margin:5px 0;color:#53697e}
#portal .enrollment-row small{font-size:13px;line-height:1.7;color:#53697e}
#portal .enrollment-row button{flex-shrink:0}
#portal .member-empty{font-size:15px;line-height:1.8;padding:24px;border:1px dashed #ccd9e8;background:#f8fafd;border-radius:10px;color:#516980;margin:0 0 18px}
#portal .section-note{font-size:13px;line-height:1.8;padding-top:12px;color:#53697e;margin:12px 0 0}
#portal .profile-form{max-width:620px;gap:14px;margin:24px 0;display:flex;flex-direction:column;min-width:0}
#portal .profile-form>label:not(.checkbox){font-size:14px;font-weight:600;line-height:1.6;margin:4px 0 -6px;color:#273f57}
#portal .profile-form>button{align-self:flex-start;min-width:190px;margin-top:6px}
#portal .profile-form small{font-size:13px;line-height:1.8;color:#53697e}
#portal .checkbox{display:flex;gap:12px;align-items:flex-start;font-size:14px;line-height:1.8;margin:6px 0;color:#324e66}
#portal .checkbox input{flex-shrink:0;width:18px;min-height:18px;height:18px;margin:4px 0 0;accent-color:#155bc4}
#portal .notice{background:#eff5fd;border:1px solid #dbe7f5;border-radius:8px;padding:16px 18px;font-size:14px;line-height:1.8;color:#415e7a}
#portal .message-history{height:auto;min-height:180px;max-height:480px;background:#f7f9fc;border:1px solid #e0e7f0;border-radius:10px;padding:20px;display:flex;flex-direction:column;gap:16px}
#portal .message-bubble{max-width:88%;border-radius:12px;background:white;border:1px solid #dce5ef;padding:16px 18px;align-self:flex-start}
#portal .message-bubble.customer{background:#e9f1fc;border-color:#cbdcf4;align-self:flex-end}
#portal .message-bubble p{font-size:16px;line-height:1.7;color:#203c58;white-space:pre-wrap;overflow-wrap:anywhere;margin:8px 0}
#portal .message-bubble small{font-size:12px;line-height:1.6;color:#546c83}
#portal .message-form{margin:20px 0 0;gap:12px;display:flex;flex-direction:column}
#portal .message-form label{font-size:14px;font-weight:600;color:#273f57}
#portal .message-form textarea{min-height:112px;resize:vertical}
#portal .message-form button{align-self:flex-end;min-width:160px}
.benefit-actions{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-top:24px}
#cancel-dialog{width:480px;max-width:calc(100vw - 32px);padding:28px;border:1px solid #dce5ef;border-radius:14px;color:#17314c;background:white;box-shadow:0 24px 80px #102b4333}
#cancel-dialog::backdrop{background:#102b4377}
#cancel-dialog h3{font-size:24px;line-height:1.4;margin:0}
#cancel-dialog p{font-size:15px;line-height:1.8;margin:16px 0 24px;color:#52677e}
.dialog-actions{display:flex;gap:12px;justify-content:flex-end;flex-wrap:wrap}
.dialog-actions button{min-height:44px;font-size:14px;border-radius:8px}
#toast{font-size:14px;line-height:1.6;max-width:calc(100vw - 32px);overflow-wrap:anywhere}
.club-dark #portal{background:#0c2032}
.club-dark #portal :is(.login-form,#member-panel,.member-content){background:#172f45}
.club-dark #portal :is(.member-tabs,.enrollment-row,.member-empty,.message-history){background:#12293d;border-color:#3a5269}
.club-dark #portal :is(.member-view h3,.member-view h4,.login-form label,.profile-form>label,.message-form label){color:#edf3fc}
.club-dark #portal :is(.member-view p,.member-view small,.section-note,.checkbox,.form-status,.login-form small,.member-section-heading p){color:#bfcede}
.club-dark #portal .member-tabs button{color:#c3d3e4}
.club-dark #portal .member-tabs button.active{background:#24476b;color:white}
.club-dark #portal .message-bubble{background:#213e58;border-color:#46617a}
.club-dark #portal .message-bubble.customer{background:#244c76}
.club-dark #portal .message-bubble :is(p,small){color:#edf3fc}
.club-dark #portal .notice{background:#213e58;border-color:#46617a}
@media(max-width:900px){#portal>.section-heading{flex-direction:column}#portal>.section-heading>p{max-width:55ch}#portal .login-form,#portal .login-intro{padding:28px}.member-workspace{grid-template-columns:190px minmax(0,1fr)}.member-content{padding:24px}}
@media(max-width:760px){
 #portal .login-grid{grid-template-columns:1fr}.member-workspace{display:block}
 #portal .member-tabs{flex-direction:row;overflow-x:auto;max-width:100%;padding:12px;border-right:0;border-bottom:1px solid #dce5ef;gap:6px;overscroll-behavior-x:contain}
 #portal .member-tabs button{flex:0 0 auto;white-space:nowrap;padding:10px 16px;text-align:center;justify-content:center}
 #portal .member-heading{padding:24px;align-items:flex-start}#portal .member-heading h3{font-size:25px}.member-content{padding:24px}
 #portal .enrollment-row{flex-wrap:wrap;align-items:flex-start}#portal .enrollment-row>div{flex-basis:100%}#portal .enrollment-row button{flex:0 1 auto}
 .member-section-heading{flex-direction:column;gap:14px}.member-section-heading>a{align-self:flex-start}
}
@media(max-width:480px){
 #portal>.section-heading{gap:18px}#portal>.section-heading h2{font-size:28px}#portal .login-form,#portal .login-intro{padding:24px 20px}
 #portal .member-heading{flex-wrap:wrap;padding:24px 20px;gap:16px}#portal .member-heading h3{font-size:24px}.member-content{padding:22px 18px}
 #portal .member-view h3{font-size:21px}#portal .enrollment-row{padding:18px}#portal .message-history{padding:14px;max-height:420px}#portal .message-bubble{max-width:95%;padding:14px}
 #portal .profile-form>button,#portal .message-form button{width:100%;align-self:stretch}#portal .member-empty{padding:20px}
 .benefit-actions{flex-direction:column;align-items:stretch}.benefit-actions>a{align-self:flex-start}
 #cancel-dialog{padding:24px 20px}.dialog-actions button{flex:1 1 150px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}