.account-trigger { display:flex; align-items:center; gap:10px; width:100%; padding:12px; background:transparent; color:var(--text); border:0; border-top:1px solid var(--border); cursor:pointer; text-align:start; font:inherit; min-width:0; }
.account-trigger:hover,.account-row:hover { background:var(--surface-2); }
.account-avatar { width:40px; height:40px; flex:0 0 40px; border-radius:50%; background:#d9eee5; color:#235c46; display:grid; place-items:center; font-size:18px; font-weight:700; overflow:hidden; }
.account-avatar img { width:100%; height:100%; object-fit:cover; }
.account-avatar.large { width:72px; height:72px; flex-basis:72px; font-size:28px; }
.account-copy { display:grid; gap:4px; min-width:0; flex:1; }
.account-copy strong { font-size:14px; overflow-wrap:anywhere; }
.account-copy small { color:var(--text-muted); font-size:12px; overflow-wrap:anywhere; }
.account-trigger .account-copy small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.account-dialog { width:380px; max-width:calc(100vw - 24px); max-height:calc(100dvh - 32px); padding:0; border:1px solid var(--border); border-radius:8px; background:var(--surface); color:var(--text); box-shadow:0 12px 40px #0003; overflow:auto; }
.account-dialog::backdrop { background:#0004; }
.account-dialog-head { display:flex; align-items:center; justify-content:space-between; padding:14px 18px; border-bottom:1px solid var(--border); position:sticky; top:0; background:var(--surface); z-index:1; }
.account-dialog-head h2 { font-size:16px; margin:0; }
.account-close { border:0; background:transparent; color:var(--text); width:36px; height:36px; cursor:pointer; display:grid; place-items:center; }
.account-symbol { width:20px; height:20px; display:inline-block; background:currentColor; mask:var(--account-icon) center/contain no-repeat; -webkit-mask:var(--account-icon) center/contain no-repeat; flex-shrink:0; }
.account-identity { display:flex; align-items:center; gap:12px; padding:20px 18px; }
.account-section { border-top:1px solid var(--border); padding:8px 0; }
.account-section-label { margin:8px 18px; color:var(--text-muted); font-size:12px; }
.account-row { display:flex; align-items:center; gap:12px; width:100%; min-height:48px; padding:10px 18px; background:transparent; color:var(--text); border:0; font:inherit; font-size:14px; text-align:start; cursor:pointer; }
.account-row:disabled { cursor:default; }
.account-row.danger { color:var(--danger); }
.account-current { color:#287957; font-size:12px; white-space:nowrap; }
.account-editor { padding:0 18px 18px; }
.account-editor label { display:grid; gap:8px; margin:12px 0; font-size:13px; }
.account-editor input[type=text],.account-editor input:not([type]) { width:100%; box-sizing:border-box; min-height:42px; border:1px solid var(--border); border-radius:5px; padding:8px 10px; background:var(--bg); color:var(--text); font:inherit; }
.account-photo-actions,.account-form-actions { display:flex; flex-wrap:wrap; gap:8px; margin:12px 0; }
.account-feedback { font-size:13px; overflow-wrap:anywhere; min-height:20px; margin:12px 18px; color:var(--text-muted); }
.account-settings { padding:12px 0; border-bottom:1px solid var(--border); margin-bottom:16px; overflow-wrap:anywhere; }
.account-settings .account-identity { padding:8px 0; }
.account-tools { display:flex; flex-wrap:wrap; gap:8px; margin:12px 0; }
.mobile-header .account-trigger { width:40px; height:40px; padding:0; border:0; flex-shrink:0; }
.mobile-header .account-trigger .account-copy { display:none; }
.account-trigger:focus-visible,.account-row:focus-visible,.account-close:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }
.account-photo-editor { border-block:1px solid var(--border); padding-block:14px; }
.account-photo-editor h3 { margin:0 0 14px; font-size:14px; }
.account-photo-canvas { display:block; width:min(100%,256px); height:auto; aspect-ratio:1; margin:0 auto; border-radius:50%; background:repeating-conic-gradient(#e0e4e4 0% 25%,#fff 0% 50%) 0 0/16px 16px; cursor:grab; touch-action:none; }
.account-photo-canvas:active { cursor:grabbing; }
.account-photo-caption { display:flex; justify-content:space-between; align-items:center; }
.account-photo-caption output { min-width:48px; text-align:end; font-size:12px; color:var(--text-muted); }
.account-photo-controls input[type=range] { width:100%; min-height:32px; padding:0; accent-color:var(--accent); }
.account-photo-background { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.account-photo-background label { display:flex; align-items:center; gap:8px; }
.account-photo-background input[type=color] { width:36px; height:32px; padding:2px; border:1px solid var(--border); border-radius:4px; cursor:pointer; }
.account-photo-transparent input { width:18px; height:18px; min-height:0; padding:0; accent-color:var(--accent); }
.account-login-selected { display:flex; align-items:center; gap:10px; padding:12px 0; margin-bottom:10px; border-block:1px solid var(--border); }
.account-login-selected[hidden] { display:none; }
.account-login-list .account-row { border:1px solid var(--border); border-radius:6px; background:var(--surface); }
.account-login-list .account-row[aria-pressed=true] { border-color:var(--accent); background:var(--surface-2); }