.account-dialog { width:min(440px,calc(100vw - 16px)); max-height:calc(100dvh - 16px); overflow:auto; margin:auto; padding:20px; border:0; border-radius:14px; background:var(--light,var(--sand,#d6c2a8)); color:var(--dark,#3f3630); font:16px/1.4 Arial,sans-serif; box-sizing:border-box; }
.account-dialog::backdrop { background:#0005; }
.account-dialog .account-close { display:block; margin-left:auto; width:36px; height:36px; padding:0; border:0; border-radius:50%; background:var(--dark,#3f3630); color:var(--light,var(--sand,#d6c2a8)); font:26px Arial; cursor:pointer; }
.account-dialog h2 { font-size:22px; margin:4px 0 18px; }
.account-info-list, .account-memberships { display:grid; gap:10px; }
.account-memberships:empty { display:none; }
.account-info-row { display:flex; align-items:center; gap:14px; padding:16px; min-width:0; border-radius:12px; background:var(--page,#f3eee4); }
.account-info-text { flex:1; min-width:0; }
.account-info-label { display:block; margin-bottom:4px; font-size:12px; font-weight:700; opacity:.72; }
.account-info-value { display:block; font-size:19px; line-height:1.3; overflow-wrap:anywhere; }
.account-icon { display:inline-flex; width:32px; height:32px; flex:0 0 auto; }
.account-icon svg { width:100%; height:100%; }
.account-action .account-icon { width:22px; height:22px; }
.account-leave-button { display:flex; align-items:center; justify-content:center; gap:6px; flex:0 0 auto; padding:10px; border:0; border-radius:9px; background:var(--dark,#3f3630); color:var(--light,var(--sand,#d6c2a8)); font:700 13px Arial; white-space:nowrap; cursor:pointer; }
.account-leave-button .account-icon { width:20px; height:20px; }
.account-dialog.account-leave-dialog { text-align:center; }
.account-leave-dialog > .account-icon { width:44px; height:44px; margin:4px auto 12px; }
.account-leave-dialog .account-confirm-question { font-weight:700; font-size:17px; }
.account-confirm-actions { display:flex; gap:12px; margin-top:20px; }
.account-dialog .account-confirm-actions .account-action { flex:1; width:auto; margin:0; }
.account-dialog .account-action.account-secondary { background:transparent; color:var(--dark,#3f3630); border:1px solid var(--dark,#3f3630); }
.account-dialog button:disabled { opacity:.6; cursor:default; }
@media (max-width:380px) { .account-dialog { padding:14px; } .account-info-row { padding:12px; gap:9px; } .account-info-value { font-size:17px; } .account-info-row > .account-icon { width:25px; height:25px; } .account-leave-button { padding:9px 7px; font-size:12px; gap:4px; } }
.account-dialog p { margin:8px 0; overflow-wrap:anywhere; }
.account-dialog .account-action { display:flex; align-items:center; justify-content:center; gap:10px; width:100%; margin-top:16px; padding:12px; border:0; border-radius:10px; background:var(--dark,#3f3630); color:var(--light,var(--sand,#d6c2a8)); font:700 16px Arial; cursor:pointer; }
.account-dialog .account-action:hover { transform:scale(1.02); }
.account-dialog label { display:block; margin-top:12px; }
.account-dialog input { display:block; width:100%; margin-top:5px; padding:10px; border:1px solid var(--dark,#3f3630); border-radius:8px; background:var(--page,#faf7f2); color:var(--dark,#3f3630); font:16px Arial; box-sizing:border-box; }
.account-dialog [hidden] { display:none!important; }
.account-dialog .account-status:empty { display:none; }
[data-account-button] { cursor:pointer; }
.account-dialog.account-password-view[open] { display:flex; flex-direction:column; overflow:hidden; }
.account-password-view .account-close { flex-shrink:0; }
.account-password-form { flex:1; min-height:0; display:grid; grid-template-rows:repeat(3,minmax(0,1fr)) minmax(0,.7fr); gap:clamp(3px,1vh,10px); overflow:hidden; padding-top:clamp(3px,1vh,10px); }
.account-dialog .account-password-form label { margin:0; min-height:0; display:flex; flex-direction:column; justify-content:center; gap:clamp(2px,.6vh,5px); font-size:clamp(12px,2vh,16px); line-height:1.15; }
.account-dialog .account-password-form input { flex:1; min-height:0; height:100%; max-height:44px; margin:0; padding:0 10px; }
.account-dialog .account-password-form .account-action { height:100%; max-height:44px; min-height:0; padding:0 10px; margin:0; align-self:center; }