.account-page{max-width:480px;margin:70px auto;padding:0 24px 64px;color:#dce4ef}.account-page h1{font-size:34px;margin:0 0 12px}.account-intro{color:#b9c7da;margin-bottom:30px}.account-button{width:100%;padding:15px 20px;border:0;border-radius:8px;background:#a3c0ed;color:#253b59;font-size:16px;font-weight:600;cursor:pointer;margin:10px 0}.account-button.google{background:#f1f4f9;color:#313944}.account-button.secondary{background:#313844;color:#dce4ef;border:1px solid #596477}.account-button:disabled{opacity:.55;cursor:default}.account-page input[type=email]{display:block;width:100%;box-sizing:border-box;background:#2d323d;color:#edf3fc;border:1px solid #5b6476;border-radius:8px;font:inherit;padding:14px;margin:8px 0 4px}.account-page a{color:#b7cef3;text-decoration:underline;text-underline-offset:3px}.login-divider{display:flex;align-items:center;gap:14px;margin:16px 0;color:#9aa6b9;font-size:13px}.login-divider:before,.login-divider:after{content:"";height:1px;background:#434957;flex:1}.account-hint{font-size:13px;color:#aab8cd;line-height:1.6}.account-text-button{display:block;background:none;border:0;color:#b8cbed;padding:12px 0;font:inherit;cursor:pointer}.account-plan{margin:24px 0;padding:20px 0;border-top:1px solid #444c5b;border-bottom:1px solid #444c5b}.account-plan strong{font-size:22px}.account-plan p{color:#b9c7da;font-size:14px;line-height:1.6}#account-message{font-size:14px;line-height:1.7;color:#e9b28f;min-height:24px}.sandbox-label{color:#a8cfbf;font-size:13px;line-height:1.6;margin-bottom:24px}.account-support{margin-top:28px;font-size:14px}.account-page [hidden]{display:none!important}@media(max-width:600px){.account-page{margin-top:40px}header>a:not(.brand){font-size:14px}}

/* Reuse the main site theme and keep account text readable. */
.account-header>a:not(.brand){margin-left:auto;color:#c5d6f1;font-size:15px;text-decoration:none;line-height:1.5;min-height:44px;display:inline-flex;align-items:center}
.account-header>a:not(.brand):hover{text-decoration:underline}
.account-page{font-size:15px;min-height:0}
.account-page p{max-width:none}
.account-page h1{color:#f4f6fb;font-weight:600;line-height:1.3}
#member-email{color:#b9c7da;font-size:15px}
.account-page .account-button{height:auto;min-height:48px;line-height:1.5}


.account-page .account-button:hover:not(:disabled){background:#b0cbf3;color:#253b59}
.account-page .account-button.google:hover:not(:disabled){background:#fff;color:#313944}
.account-page .account-button.secondary:hover:not(:disabled){background:#3a4351;color:#edf3fc}
.account-page :is(button,input,a):focus-visible{outline:2px solid #b8cff2;outline-offset:3px}

#cancel-dialog{box-sizing:border-box;width:min(440px,calc(100% - 32px));padding:28px;border:1px solid #596477;border-radius:12px;background:#292e38;color:#dce4ef;box-shadow:0 16px 60px #0007}
#cancel-dialog::backdrop{background:#0009}
#cancel-dialog h2{margin:0 0 18px;font-size:23px;line-height:1.4;color:#f4f6fb}
#cancel-dialog p{line-height:1.7;font-size:15px}
#cancel-dialog .account-hint{font-size:13px;color:#aab8cd}
#cancel-error{color:#e9b28f;font-size:14px!important;min-height:0}
.cancel-actions{display:flex;gap:12px;margin-top:24px}.cancel-actions .account-button{margin:0;min-width:0}
#cancel-dialog [hidden]{display:none!important}

#cancel-description{white-space:pre-line;word-break:keep-all}

.selected-plan{border:1px solid #6c86ad;border-radius:8px;padding:12px 14px;background:#2d3748;font-size:14px;line-height:1.6;margin:0 0 22px;color:#dce9ff}
.account-text-button:disabled{opacity:.55;cursor:default}
#account-message[data-kind="info"]{color:#b9c7da}#account-message[data-kind="success"]{color:#a8cfbf}#account-message[data-kind="error"]{color:#e9b28f}
#member-reset{color:#aab8cd;font-size:13px}#member-period{word-break:keep-all}

/* Keep the account summary compact and separate purchase from account tools. */
.account-plan{margin:22px 0;padding:18px 0}
.account-plan p{margin:8px 0 0;word-break:keep-all;overflow-wrap:anywhere}
#member-email{overflow-wrap:anywhere}
.checkout-guidance{margin:12px 0 0;word-break:keep-all;overflow-wrap:anywhere}
.account-actions{margin-top:24px;padding-top:16px;border-top:1px solid #444c5b}
.account-actions .account-text-button{min-height:44px;padding:10px 0;line-height:1.6}
.account-actions #logout{margin-top:8px;color:#aab8cd}
#account-message:empty{display:none}
.account-support{margin-top:28px}
@media(max-width:600px){.account-page{margin-top:32px}.account-page input[type=email]{font-size:16px}}

/* A focused sign-in form, using the same theme as the account page. */
#login-panel{max-width:400px;margin:0 auto}
#login-panel h1{text-align:center;font-size:30px;letter-spacing:-.02em}
#login-panel .account-intro{text-align:center;font-size:14px;line-height:1.6;margin:10px 0 32px;color:#aab8cd;word-break:keep-all}
#login-panel .account-button{margin:0;min-height:52px;padding:14px 20px;box-sizing:border-box}
#login-panel .google{display:flex;justify-content:center;align-items:center;gap:12px;background:#f2f2f2;color:#1f1f1f;font-size:15px;font-weight:500}
#login-panel .google img{display:block;object-fit:contain;flex:none}
#login-panel .login-divider{margin:24px 0;color:#9da9bb}
#email-login label{display:block;font-size:14px;color:#cad4e4;margin:0 0 8px}
#email-login input{margin:0 0 12px;min-height:52px;padding:14px 16px;font-size:15px}
#email-login input::placeholder{color:#9ba7ba;opacity:1}
#login-panel .account-hint{text-align:center;font-size:13px;margin:12px 0 0;word-break:keep-all}
.login-policy{text-align:center;font-size:12px;line-height:1.9;color:#aab8cd;margin:28px 0 0;word-break:keep-all}
.login-policy a{color:#bac9dd}
.account-page:has(#login-panel:not([hidden])) .account-support{text-align:center;font-size:13px;margin-top:28px}
@media(max-width:600px){#login-panel h1{font-size:28px}#login-panel .account-intro{margin-bottom:28px}#email-login input{font-size:16px}}

#login-panel .apple{display:flex;justify-content:center;align-items:center;gap:0;padding:5px 20px;background:#fff;color:#000;font-size:15px;font-weight:500;margin-top:12px;border:1px solid #fff}
#login-panel .apple img{display:block;flex:none}
#login-panel .apple:hover:not(:disabled){background:#f2f2f2;color:#000}

/* One readable purchase section, with a single checkout action. */
.account-page:has(#member-panel:not([hidden])){max-width:440px;margin-top:48px;font-size:16px;padding-bottom:40px}
#member-panel h1{font-size:30px;margin-bottom:12px}
#member-email{font-size:15px;color:#c4cfdf;margin:0}
#member-panel .account-plan{margin:24px 0;padding:18px 0;border-top:1px solid #434b59;border-bottom:1px solid #434b59}
#member-panel .account-plan strong{font-size:21px;color:#f0f4fa}
#member-panel .account-plan p{font-size:15px;line-height:1.65;color:#c4cfdf;margin-top:6px}
/* Only an explicitly chosen plan needs a checkout continuation. */
.checkout-continuation{padding:18px;border:1px solid #596477;border-radius:8px;background:#2c313b}
#member-selection{font-size:16px;font-weight:600;line-height:1.6;color:#edf2fa;margin:0 0 14px}
#member-upgrade>.account-button{margin:0;min-height:50px;font-size:16px}
.change-plan{display:block;width:fit-content;font-size:13px;margin:14px auto 0;line-height:1.7}
#member-panel .account-actions{display:flex;align-items:center;flex-wrap:wrap;gap:4px 24px;margin-top:0;padding-top:0;border-top:0}
#member-panel:has(#member-upgrade:not([hidden])) .account-actions{margin-top:24px;padding-top:12px;border-top:1px solid #444c5b}
#member-panel .account-actions .account-text-button{font-size:14px;padding:10px 0;min-height:44px;margin:0;color:#c0cfe5}
.account-page:has(#member-panel:not([hidden])) .account-support{margin:12px 0 0;font-size:14px}
@media(max-width:600px){.account-page:has(#member-panel:not([hidden])){margin-top:32px;padding-left:24px;padding-right:24px}#member-panel h1{font-size:28px}}

.account-page #member-panel .account-actions .account-pricing-link{color:var(--accent,#9bbbf0);text-decoration:none;white-space:nowrap}
.account-page #member-panel .account-actions .account-pricing-link:hover{text-decoration:underline}