.account-trigger { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 40px; padding: 6px 12px 6px 7px; border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border)); border-radius: 999px; background: color-mix(in srgb, var(--accent) 9%, var(--background)); color: var(--text-primary); font: 600 12px/1.4 var(--font-body); cursor: pointer; transition: background .2s, border-color .2s, box-shadow .2s; }
.account-trigger:hover, .account-trigger[aria-expanded="true"], .account-link[aria-expanded="true"] { background: color-mix(in srgb, var(--accent) 19%, var(--background)); border-color: color-mix(in srgb, var(--accent) 65%, var(--border)); }
.account-trigger :is(img, .account-fallback) { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; }
.account-trigger .account-fallback { display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-hover); }
.account-trigger [hidden], .account-popover[hidden] { display: none; }
.account-trigger .account-name { max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-arrow { font-size: 10px; color: var(--accent-hover); transition: transform .2s; }
[aria-expanded="true"] > .account-arrow { transform: rotate(180deg); }
.account-popover { position: fixed; z-index: 90; box-sizing: border-box; width: min(232px, calc(100vw - 24px)); overflow-y: auto; overscroll-behavior: contain; padding: 8px; background: var(--background-secondary); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 16px 48px #0008; color: var(--text-primary); font-family: var(--font-body); animation: account-enter .18s ease both; }
.account-popover header { display: grid; gap: 4px; padding: 12px; margin-bottom: 5px; border-bottom: 1px solid var(--border); overflow-wrap: anywhere; }
.account-popover header strong { font-size: 13px; font-weight: 600; }
.account-popover header small { font-size: 11px; color: var(--text-muted); }
.account-popover [role="menu"] { display: grid; gap: 4px; }
.account-popover [role="menuitem"] { display: flex; gap: 12px; align-items: center; min-height: 42px; padding: 10px 12px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--text-secondary); text-decoration: none; text-align: left; font: 500 12px/1.5 var(--font-body); cursor: pointer; transition: color .18s, background .18s, border-color .18s; }
.account-popover [role="menuitem"] > i { width: 16px; color: var(--text-muted); text-align: center; }
.account-popover [role="menuitem"]:hover, .account-popover [role="menuitem"]:focus-visible { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 25%, transparent); color: var(--accent-hover); outline: none; }
.account-popover [aria-current="page"] { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 25%, transparent); color: var(--accent-hover); }
.account-popover [aria-current="page"] > i { color: var(--accent-hover); }
.account-popover .account-signout { margin-top: 5px; border-top-color: var(--border); color: var(--error); }
.account-popover .account-signout > i { color: var(--error); }
.account-popover .account-signout:hover { background: color-mix(in srgb, var(--error) 8%, var(--background)); border-color: color-mix(in srgb, var(--error) 25%, transparent); color: var(--error); }
.account-popover [role="alert"] { margin: 8px 12px; font-size: 11px; line-height: 1.6; color: var(--error); }
.account-trigger:focus-visible { outline: 2px solid var(--accent-hover); outline-offset: 3px; }
.account-trigger, .account-popover [role="menuitem"] { touch-action: manipulation; }
@keyframes account-enter { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } }
/* Keep flag controls consistent across the public site, login and dashboard. */
html[lang] :is(.language-toggle, .language-button, .login-language-button, .directory-language) { border-color: transparent; background: transparent; box-shadow: none; transition: border-color .18s, background-color .18s; }
html[lang] :is(.language-toggle, .language-button, .login-language-button, .directory-language):is(:hover, :focus-visible) { border-color: var(--border-hover); background: color-mix(in srgb, var(--background-secondary) 95%, #fff); }
html[lang] :is(.language-toggle, .language-button, .login-language-button, .directory-language) img { transition: transform .18s, filter .18s; }
html[lang] :is(.language-toggle, .language-button, .login-language-button, .directory-language):hover img { transform: translateY(-1px) scale(1.06); filter: brightness(1.12); }
html[lang] :is(.language-toggle, .language-button, .login-language-button, .directory-language):focus-visible { outline: 2px solid var(--accent-hover); outline-offset: 3px; }
@media (max-width:620px) { .dashboard-account { width: 34px; min-width: 34px; height: 34px; min-height: 34px; padding: 3px; } .dashboard-account :is(.account-name, .account-arrow) { display: none; } }
@media (prefers-reduced-motion:reduce) { .account-popover { animation: none; } .account-trigger, .account-arrow, html[lang] :is(.language-toggle, .language-button, .login-language-button, .directory-language), html[lang] :is(.language-toggle, .language-button, .login-language-button, .directory-language) img { transition: none; } html[lang] :is(.language-toggle, .language-button, .login-language-button, .directory-language):hover img { transform: none; } }