/* Accounts use the studio's blue, charcoal and white palette. */
header .account-button{border-color:#475b77;background:#1a2c43;color:#d9edff;white-space:nowrap;gap:7px}
.account-button svg{width:17px;height:17px}
#accountDialog{width:min(440px,calc(100vw - 24px));max-width:440px;padding:28px;border:1px solid #34435a;border-radius:24px;background:#111924;color:#edf5ff;box-shadow:0 24px 90px #0009;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}
#accountDialog::backdrop{background:#02050bb3;backdrop-filter:blur(5px)}
#accountDialog [hidden]{display:none!important}
.account-dialog-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 24px}
.account-dialog-brand{font-size:21px;font-weight:650;letter-spacing:-.8px;color:#b9dbff}
#accountClose{color:#b6c9e2;min-width:44px;height:44px;font-size:25px;border-radius:50%}
#accountDialog h2{font-size:25px;line-height:1.2;letter-spacing:-.6px;margin:0 0 10px;font-weight:650}
#accountDialog p{font-size:13px;line-height:1.65;color:#afc1d8;margin:0 0 20px}
.account-mode{display:grid;grid-template-columns:1fr 1fr;gap:4px;background:#080e17;border:1px solid #2c3a4e;border-radius:14px;padding:4px;margin:20px 0}
.account-mode button{min-height:44px;font-size:12px;border-radius:10px;background:transparent;color:#b1c6df}
.account-mode button[aria-pressed=true]{background:#253e5d;color:#f3f8ff}
#accountDialog label{display:block;font-size:12px;font-weight:600;margin:0 0 9px;color:#e7f2ff}
#accountDialog input{width:100%;min-height:54px;padding:12px 16px;border-radius:14px;border:1px solid #3a4c64;background:#1c293b;color:#f2f7ff;box-shadow:none;font-size:16px}
#accountDialog input::placeholder{color:#92a9c4}
#accountDialog input:focus{border-color:#9bcfff;outline:2px solid #9bcfff44;outline-offset:2px}
#accountDialog #accountCode{font-size:25px;letter-spacing:6px;text-align:center;font-variant-numeric:tabular-nums}
#accountDialog .account-primary{width:100%;min-height:50px;margin-top:14px;border-radius:999px;background:#2385ed;color:white;border:1px solid #2385ed;justify-content:center}
#accountDialog .account-primary:hover{background:#349aff}
#accountDialog button:disabled{opacity:.45;cursor:default}
.account-secondary-row{display:flex;flex-wrap:wrap;gap:8px;justify-content:space-between;margin:10px 0 0}
#accountDialog .textbutton{min-height:44px;font-size:11px;color:#add5ff;padding:6px 0;background:none}
#accountCaptcha{margin:16px 0 8px;min-height:0;max-width:100%}
#accountDialog .account-privacy{font-size:11px;line-height:1.6;margin:18px 0 0}
.account-privacy a{color:#b8dcff;text-decoration:underline;text-underline-offset:3px}
#accountDialog .account-status{font-size:12px;margin:14px 0;color:#badcff;overflow-wrap:anywhere}
#accountDialog .account-status:empty{display:none}
#accountDialog .account-status.is-error{color:#ffbeb4}
.account-unavailable{background:#1b2b40;border:1px solid #3b5475;border-radius:16px;padding:18px;margin:20px 0}
#accountDialog .account-unavailable strong{display:block;font-size:14px;margin:0 0 6px}
#accountDialog .account-unavailable p{margin:0;font-size:12px}
.account-identity{display:flex;align-items:center;gap:12px;border-radius:16px;padding:16px;background:#1c2d44;margin:20px 0}
.account-identity>span{font-size:24px;color:#a8d5ff}
.account-identity>div{min-width:0}.account-identity strong{display:block;font-size:12px;color:#c6ddf8}
.account-identity p{margin:4px 0 0!important;overflow-wrap:anywhere;color:#f4f8ff!important}
#accountDialog .account-local-note{font-size:11px;padding:14px 0 0;border-top:1px solid #2b3c52;margin:18px 0 0}
#accountGuest{display:block;min-height:44px;width:100%;color:#aec5df;background:transparent;font-size:12px;margin-top:10px}
#accountDialog #accountBusy{font-size:11px;margin:12px 0;color:#b1d6ff}
@media(max-width:760px){header .account-button{padding:8px 10px;font-size:11px}.account-button svg{display:none}header .header-help{display:none}header .save-state{display:none}.topright{gap:5px}}
@media(max-width:440px){header{padding-left:12px;padding-right:12px}.wordmark{font-size:21px;gap:0}.wordmark span{display:none}header .button.small{padding:8px}.topright{gap:4px}header #openBtn{font-size:0;gap:0;padding:8px}header #openBtn svg{width:17px;height:17px}#accountDialog{padding:22px}}

@media(max-width:600px){header .account-button{position:relative;width:38px;min-width:38px;height:38px;padding:8px;flex:none}header .account-button svg{display:block}#accountButtonText{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}header .topright{min-width:0;gap:4px}}
@media(max-width:360px){header #shareBtn{font-size:0;gap:0;padding:8px}header #shareBtn small{display:none}header #shareBtn svg{display:block;width:17px;height:17px}}

.account-providers{display:grid;gap:10px;margin:23px 0 16px}
#accountDialog .account-provider{position:relative;display:flex;align-items:center;justify-content:center;gap:12px;min-height:52px;width:100%;padding:12px 18px;border-radius:14px;font-size:13px;font-weight:600;line-height:1.4;transition:background .15s,border-color .15s}
.account-provider svg{width:20px;height:20px;min-width:20px;stroke:none}
#accountDialog .account-google{background:#fff;color:#253047;border:1px solid #c7d1df}
#accountDialog .account-google:hover:not(:disabled){background:#edf5ff;border-color:#9bcfff}
#accountDialog .account-apple{background:#05070a;color:#fff;border:1px solid #61738b}
#accountDialog .account-apple:hover:not(:disabled){background:#1d2939;border-color:#9bcfff}
#accountDialog .account-provider:disabled{opacity:.65}
.account-divider{display:flex;align-items:center;gap:12px;margin:20px 0;color:#9fb4ce;font-size:11px}
.account-divider::before,.account-divider::after{content:'';height:1px;flex:1;background:#34445a}
footer .footer-links{display:flex;align-items:center;gap:16px}
footer #studioPrivacy{font-size:11px;color:#afcbe8;text-underline-offset:3px}
@media(max-width:440px){footer .footer-links{gap:10px}footer>span i{display:none}}