.account-panel{--account-bg:#142231;--account-inset:#0e1b29;--account-line:#365069;--account-text:#e8eff8;--account-muted:#adc0d4;--account-accent:#e4bb60;box-sizing:border-box;width:min(640px,calc(100% - 32px));max-width:none;max-height:calc(100dvh - 32px);padding:32px;border:1px solid var(--account-line);border-radius:20px;background:var(--account-bg);color:var(--account-text);box-shadow:0 24px 80px #0009;overflow:auto;scrollbar-gutter:stable}
html:has(.account-panel[open]){overflow:hidden}
.account-panel::backdrop{background:#07111bd9;backdrop-filter:blur(4px)}
.account-panel [hidden]{display:none!important}
.account-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;margin-bottom:24px}
.account-head h2{margin:0;font-size:28px;line-height:1.2;letter-spacing:-.6px}.account-head .panel-kicker{margin:0 0 8px}
.account-head #account-close{min-height:44px;flex-shrink:0;background:transparent}
.account-panel p{color:var(--account-muted);line-height:1.6}.account-panel form{display:grid;gap:20px;margin:24px 0 0}
.account-panel label{display:grid;gap:8px;font-size:14px;color:#dce6f3;font-weight:600}
.account-panel input{width:100%;min-height:48px;box-sizing:border-box;padding:12px 16px;border:1px solid #46627b;border-radius:12px;background:var(--account-inset);color:#f0f5fb;font:inherit;font-size:16px;transition:border-color .15s}
.account-panel input:hover{border-color:#6f8aa2}
.account-panel button{font:inherit;cursor:pointer}.account-panel .primary,.account-panel .copy-btn{min-height:44px;justify-content:center;font-size:13px}
.account-panel .primary{font-weight:600}
.account-modes{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;border:1px solid var(--account-line);border-radius:12px;background:var(--account-inset)}
.account-modes button{min-height:44px;border:1px solid transparent;border-radius:8px;background:transparent;color:var(--account-muted);padding:12px;font-size:14px;font-weight:600}
.account-modes button[aria-pressed=true]{color:var(--account-accent);border-color:#a0874c;background:#d8ad5010}
.account-auth-intro{margin:24px 0 0;font-size:14px;max-width:48ch}
#account-submit{width:100%;min-height:48px;font-size:15px;margin-top:4px}
.account-help{display:flex;flex-wrap:wrap;gap:4px 24px;margin-top:24px;padding:12px 0 20px;border-top:1px solid var(--account-line)}
.account-help button,.account-back,.account-signout{min-height:44px;padding:8px 0;border:0;background:transparent;color:var(--account-muted);font-size:13px;text-align:left}
.account-help button{text-decoration:underline;text-underline-offset:4px;text-decoration-color:#adc3df60}
.account-help button:hover,.account-help button[aria-pressed=true],.account-back:hover{color:var(--account-accent)}
.account-panel .account-hint{font-size:13px;line-height:1.65;margin:0}
.account-panel button:disabled{opacity:.55;cursor:wait}
.account-profile{display:flex;align-items:center;gap:16px;padding:20px;background:var(--account-inset);border:1px solid var(--account-line);border-radius:16px}
.account-avatar{display:grid;place-items:center;flex:none;width:48px;height:48px;border:1px solid #a0874c77;border-radius:12px;background:#d8ad5010;color:var(--account-accent);font-size:24px;font-weight:600}
.account-profile-copy{min-width:0}.account-profile-copy>strong{display:block;margin:4px 0 12px;font-size:20px;line-height:1.35;letter-spacing:-.3px;overflow-wrap:anywhere}
.account-eyebrow{font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--account-muted)}
.account-profile-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.account-badge{padding:4px 8px;border:1px solid #a0874c66;border-radius:6px;color:var(--account-accent);font-size:11px;line-height:1.3}
.account-verified{color:var(--account-muted);font-size:12px}
.account-summary{display:grid;grid-template-columns:1fr 1.5fr;gap:20px;padding:24px 4px 16px;align-items:start}
.account-summary>div{display:grid;gap:8px;min-width:0}.account-summary>div+div{padding-left:20px;border-left:1px solid var(--account-line)}
.account-stat{font-size:24px;font-weight:600;line-height:1.2;font-variant-numeric:tabular-nums}
.account-sync{color:var(--account-accent);font-size:14px;line-height:1.4;font-weight:600;padding-top:4px}.account-sync.is-pending{color:var(--account-text)}
.account-stat-label{color:var(--account-muted);font-size:12px;line-height:1.5}
.account-panel .account-privacy{font-size:13px;margin:0 0 24px}
.account-settings{border-top:1px solid var(--account-line)}
.account-setting{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;box-sizing:border-box;min-height:76px;padding:16px 4px;border:0;border-bottom:1px solid var(--account-line);background:transparent;text-align:left;color:var(--account-text);transition:background .15s,color .15s}
.account-setting>span:first-child{display:grid;gap:6px;min-width:0}.account-setting strong{font-size:15px;font-weight:600}.account-setting>span>span{font-size:12px;color:var(--account-muted);line-height:1.4}
.account-arrow{color:var(--account-muted);font-size:20px;flex:none;transition:transform .15s}
.account-setting:hover{background:#e8eff805;color:var(--account-accent)}.account-setting:hover .account-arrow{color:var(--account-accent);transform:translateX(4px)}
.account-footer{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-top:24px}.account-footer .account-hint{max-width:30ch;font-size:12px}
.account-signout{color:#c4d2e3;white-space:nowrap}.account-signout:hover{color:#ffbcb1}
.account-back{display:block;margin:-12px 0 16px;color:var(--account-accent);font-size:13px}
.account-subview{margin:0;padding:0;border:0}.account-panel .account-view-intro{font-size:14px;margin:0;max-width:52ch}
.account-panel .account-current-email{font-size:13px;margin:20px 0 0;padding:12px 16px;border-left:2px solid var(--account-accent);background:var(--account-inset);overflow-wrap:anywhere}
.account-form-actions{display:flex;justify-content:flex-end;gap:12px;padding-top:8px}.account-form-actions .primary{padding:12px 20px}.account-form-actions .copy-btn{background:transparent}
.account-backup-action{padding:24px 0;border-bottom:1px solid var(--account-line)}.account-backup-action:last-child{border-bottom:0;padding-bottom:0}.account-panel h3{font-size:16px;margin:0 0 8px}.account-backup-action button{margin-top:16px}
.account-users{list-style:none;padding:0;margin:20px 0}.account-users li{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 0;border-bottom:1px solid var(--account-line)}.account-users li strong{font-size:14px;overflow-wrap:anywhere}.account-users li span{color:var(--account-muted);font-size:12px;white-space:nowrap}
.account-retry{margin-top:16px}
.account-status{font-size:13px;margin:16px 0 0;padding:12px 16px;border-left:2px solid var(--account-accent);background:var(--account-inset);overflow-wrap:anywhere}.account-status:empty{display:none}.account-status.is-error{color:#ffbcb1;border-color:#ffbcb1}
.account-panel :focus-visible{outline:2px solid #e0b458;outline-offset:3px}
.topnav #account-open{position:relative;margin-left:10px}.topnav #account-open::before{content:"";position:absolute;left:-8px;top:7px;bottom:7px;width:1px;background:var(--line,#365069);pointer-events:none}
@media(max-width:650px){.account-panel{padding:24px 20px}.account-head h2{font-size:25px}.account-head{gap:12px}.account-profile{padding:16px;gap:12px}.account-profile-copy>strong{font-size:18px}.account-footer{align-items:flex-start;gap:16px}.account-summary{gap:16px}.account-summary>div+div{padding-left:16px}.account-setting{min-height:72px;padding:16px 0}}
@media(max-width:520px){.topnav{flex-wrap:wrap}.topnav #account-open{flex:1 0 100%;margin-left:0;margin-top:6px}.topnav #account-open::before{left:6px;right:6px;top:-4px;bottom:auto;width:auto;height:1px}.account-form-actions{display:grid;grid-template-columns:1fr}.account-form-actions .primary{grid-row:1}.account-footer{display:grid;gap:8px}.account-footer .account-hint{max-width:none}.account-avatar{width:40px;height:40px;font-size:20px}.account-profile{align-items:flex-start}.account-summary{grid-template-columns:1fr 1.3fr}.account-users li{align-items:flex-start}.account-users li span{white-space:normal;text-align:right}}
@media(max-width:360px){.account-panel{width:calc(100% - 20px);padding:20px 16px;scrollbar-gutter:auto}.account-modes button{font-size:13px}.account-head h2{font-size:23px}.account-profile{padding:12px}.account-profile-copy>strong{font-size:16px}.account-summary{gap:12px}.account-summary>div+div{padding-left:12px}.account-head{gap:8px}}
@media(prefers-reduced-motion:reduce){.account-panel *{transition:none!important}.account-setting:hover .account-arrow{transform:none}}