/* Account controls only; the existing screens keep their current layout. */
.header-account-area { display:flex; flex-wrap:wrap; justify-content:flex-end; align-items:center; gap:10px; }
.account-controls { display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:8px; max-width:440px; }
.account-controls [hidden] { display:none; }
.account-name { font-size:.78rem; color:var(--text); overflow-wrap:anywhere; }
.account-status { min-width:17ch; text-align:right; font-size:.73rem; color:var(--muted); transition:color 400ms ease; }
.account-controls[data-state="error"] .account-status { color:var(--warning); }
.account-controls[data-state="synced"] .account-status { color:var(--green); }
@media(max-width:600px) { .header-account-area { max-width:64%; } .account-controls { gap:5px; } .account-status { width:100%; text-align:right; } }

/* Confirmação ao sair: pergunta se o navegador deve esquecer as fichas. */
.account-dialog { width:min(540px, calc(100vw - 32px)); padding:22px 22px 18px; border:1px solid var(--border-strong); border-radius:14px; background:#15171a; color:var(--text); box-shadow:0 28px 90px rgba(0,0,0,.78); }
.account-dialog::backdrop { background:rgba(0,0,0,.62); }
.account-dialog h2 { margin:0 0 10px; font-size:1.15rem; letter-spacing:-.01em; }
.account-dialog p { margin:0 0 10px; font-size:.88rem; line-height:1.5; }
.account-dialog .account-dialog-hint { color:var(--muted); }
.account-dialog .account-dialog-note { padding:9px 11px; border:1px solid var(--warning); border-radius:9px; color:var(--warning); }
.account-dialog .account-dialog-note[hidden] { display:none; }
.account-dialog-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; margin-top:16px; }