.account-menu-shell { position: relative; margin-left: auto; display: flex; justify-content: flex-end; }
.account-menu-button { -webkit-appearance: none; appearance: none; width: 56px; height: 56px; padding: 0; border: 1px solid rgba(83, 217, 255, 0.24); border-radius: 999px; background: linear-gradient(145deg, rgba(11, 20, 29, 0.98), rgba(8, 14, 20, 0.94)); box-shadow: 0 10px 26px rgba(0, 0, 0, 0.24); cursor: pointer; overflow: visible; }
.account-menu-avatar-frame,
.account-menu-avatar-fallback,
.account-menu-avatar-image { width: 100%; height: 100%; border-radius: inherit; }
.account-menu-avatar-frame { position: relative; display: grid; place-items: center; overflow: hidden; isolation: isolate; }
.account-menu-avatar-image { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center center; background: linear-gradient(145deg, rgba(10, 24, 32, 0.98), rgba(8, 14, 20, 0.94)); transform: translateZ(0); }
.account-menu-avatar-fallback { display: grid; place-items: center; background: radial-gradient(circle at top left, rgba(83, 217, 255, 0.16), transparent 36%), linear-gradient(145deg, rgba(10, 24, 32, 0.98), rgba(8, 14, 20, 0.94)); }
.account-menu-avatar-fallback[data-avatar-choice="initial"] { background: radial-gradient(circle at top left, rgba(127, 232, 255, 0.2), transparent 38%), linear-gradient(145deg, rgba(15, 72, 98, 0.98), rgba(10, 30, 44, 0.94)); }
.account-menu-avatar-text { font-size: 20px; font-weight: 700; letter-spacing: 0.02em; color: var(--white); }
.account-menu-avatar-icon { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; color: rgba(238, 251, 255, 0.92); }
.account-menu-avatar-icon svg { width: 100%; height: 100%; }
.account-menu-shell.is-login-pending .account-menu-button { border-color: rgba(83, 217, 255, 0.9); box-shadow: 0 0 0 4px rgba(83, 217, 255, 0.14), 0 16px 34px rgba(0, 0, 0, 0.3); cursor: progress; }
.account-menu-shell.is-login-pending .account-menu-avatar-frame { overflow: visible; }
.account-menu-shell.is-login-pending .account-menu-avatar-frame::before { content: ""; position: absolute; inset: -5px; border-radius: inherit; background: conic-gradient(from 0deg, rgba(83, 217, 255, 0), rgba(83, 217, 255, 0.98), rgba(127, 232, 255, 0.24), rgba(83, 217, 255, 0)); filter: drop-shadow(0 0 10px rgba(83, 217, 255, 0.42)); animation: account-login-ring-spin 0.85s linear infinite; z-index: -1; }
@keyframes account-login-ring-spin { to { transform: rotate(360deg); } }
.account-menu-panel { position: absolute; top: calc(100% + 12px); right: 0; width: min(218px, calc(100vw - 24px)); max-width: 218px; border: 1px solid rgba(83, 217, 255, 0.18); border-radius: 20px; background: radial-gradient(circle at top left, rgba(83, 217, 255, 0.12), transparent 36%), linear-gradient(180deg, rgba(12, 20, 31, 0.98), rgba(8, 14, 20, 0.98)); box-shadow: 0 20px 48px rgba(0, 0, 0, 0.34); overflow: visible; z-index: 35; }
.account-menu-header { display: grid; gap: 3px; padding: 16px 16px 14px; }
.account-menu-header.is-hidden { display: none; }
.account-guest-badge { position: absolute; right: 50%; bottom: -7px; transform: translateX(50%); min-width: max-content; max-width: 96px; padding: 2px 7px; border: 1px solid rgba(83, 217, 255, 0.28); border-radius: 999px; background: rgba(8, 14, 20, 0.96); color: var(--white); font-size: 10px; font-weight: 800; line-height: 1.3; letter-spacing: 0.02em; white-space: nowrap; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22); z-index: 2; }
.account-menu-header strong { font-size: 15px; line-height: 1.25; letter-spacing: 0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-menu-header span { color: var(--muted); font-size: 12px; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#accountMenuTier { color: rgba(216, 247, 255, 0.82); opacity: 1; font-size: 11px; letter-spacing: 0.03em; text-transform: none; }
.account-menu-actions { display: grid; border-top: 1px solid rgba(83, 217, 255, 0.12); }
.account-menu-submenu { position: relative; }
.account-menu-item { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 14px 16px; border: 0; border-top: 1px solid rgba(83, 217, 255, 0.1); background: transparent; color: var(--text); font: inherit; font-size: 14px; text-decoration: none; cursor: pointer; text-align: left; }
.account-menu-actions > :first-child { border-top: 0; }
.account-menu-item-label { justify-self: start; text-align: left; }
.account-menu-item-icon { display: inline-flex; width: 24px; height: 24px; align-items: center; justify-content: center; color: var(--white); }
.account-menu-item-icon svg { width: 100%; height: 100%; }
.account-menu-item-chevron { color: var(--muted); font-size: 20px; line-height: 1; }
.account-submenu-panel { position: absolute; top: -6px; right: calc(100% - 4px); display: grid; gap: 8px; width: 152px; min-width: 152px; padding: 10px; border: 1px solid rgba(83, 217, 255, 0.18); border-radius: 16px; background: radial-gradient(circle at top left, rgba(83, 217, 255, 0.1), transparent 40%), linear-gradient(180deg, rgba(12, 20, 31, 0.98), rgba(8, 14, 20, 0.98)); box-shadow: 0 18px 34px rgba(0, 0, 0, 0.28); z-index: 4; }
.account-menu-submenu.is-open .account-submenu-panel,
.account-menu-submenu:hover .account-submenu-panel,
.account-menu-submenu:focus-within .account-submenu-panel { display: grid; }
.account-language-panel .lang-btn,
.account-theme-panel .theme-btn { min-width: 0; width: 100%; justify-content: center; padding: 10px 12px; }
.account-modal { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 24px; }
.account-modal-backdrop { position: absolute; inset: 0; background: rgba(3, 8, 12, 0.72); backdrop-filter: blur(8px); }
.account-modal-card { position: relative; width: min(720px, calc(100vw - 32px)); max-height: min(80vh, 720px); overflow: auto; }
.account-modal-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.account-menu-shell.is-guest .account-menu-avatar-frame { background: radial-gradient(circle at 50% 35%, rgba(216, 247, 255, 0.18), transparent 24%), #07121b; }
.account-menu-shell.is-guest #accountMenuButton:hover .account-menu-avatar-frame,
.account-menu-shell.is-guest #accountMenuButton:focus-visible .account-menu-avatar-frame { border-color: rgba(83, 217, 255, 0.72); box-shadow: 0 0 0 4px rgba(83, 217, 255, 0.12), 0 16px 34px rgba(0, 0, 0, 0.28); }

html[data-theme="light"] .account-menu-item { background: rgba(255, 255, 255, 0.92); color: var(--text); border-color: var(--border); }
html[data-theme="light"] .account-menu-panel,
html[data-theme="light"] .account-submenu-panel,
html[data-theme="light"] .account-menu-button,
html[data-theme="light"] .account-modal-card { background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(241, 247, 252, 0.98)); border-color: rgba(108, 146, 173, 0.22); box-shadow: 0 16px 38px rgba(101, 131, 154, 0.16); }
html[data-theme="light"] .account-menu-button { background: linear-gradient(145deg, #ffffff, #eef5fb); border-color: rgba(108, 146, 173, 0.3); box-shadow: 0 10px 24px rgba(101, 131, 154, 0.16); }
html[data-theme="light"] .account-menu-avatar-image { background: linear-gradient(145deg, #ffffff, #eef5fb); }
html[data-theme="light"] .account-menu-avatar-fallback { background: radial-gradient(circle at top left, rgba(15, 127, 168, 0.12), transparent 36%), linear-gradient(145deg, #ffffff, #eef5fb); }
html[data-theme="light"] .account-menu-avatar-fallback[data-avatar-choice="initial"] { background: radial-gradient(circle at top left, rgba(15, 127, 168, 0.16), transparent 38%), linear-gradient(145deg, #ffffff, #e7f0f8); }
html[data-theme="light"] .account-menu-avatar-icon { color: #163244; }
html[data-theme="light"] .account-guest-badge { background: rgba(255, 255, 255, 0.98); border-color: rgba(108, 146, 173, 0.3); color: #163244; box-shadow: 0 8px 18px rgba(101, 131, 154, 0.16); }
html[data-theme="light"] .account-menu-shell.is-login-pending .account-menu-button { border-color: rgba(15, 127, 168, 0.74); box-shadow: 0 0 0 4px rgba(15, 127, 168, 0.12), 0 14px 28px rgba(101, 131, 154, 0.18); }
html[data-theme="light"] .account-menu-shell.is-login-pending .account-menu-avatar-frame::before { background: conic-gradient(from 0deg, rgba(15, 127, 168, 0), rgba(15, 127, 168, 0.92), rgba(83, 217, 255, 0.22), rgba(15, 127, 168, 0)); filter: drop-shadow(0 0 8px rgba(15, 127, 168, 0.28)); }
html[data-theme="light"] .account-menu-avatar-text,
html[data-theme="light"] .account-menu-item-icon,
html[data-theme="light"] #accountMenuTier { color: var(--text); }
html[data-theme="light"] .account-menu-shell.is-guest .account-menu-avatar-frame { background: radial-gradient(circle at 50% 35%, rgba(15, 127, 168, 0.12), transparent 24%), #ffffff; color: #163244; }
html[data-theme="light"] .account-menu-shell.is-guest #accountMenuButton:hover .account-menu-avatar-frame,
html[data-theme="light"] .account-menu-shell.is-guest #accountMenuButton:focus-visible .account-menu-avatar-frame { border-color: rgba(15, 127, 168, 0.58); box-shadow: 0 0 0 4px rgba(15, 127, 168, 0.1), 0 14px 28px rgba(101, 131, 154, 0.18); }

@media (prefers-reduced-motion: reduce) {
  .account-menu-shell.is-login-pending .account-menu-avatar-frame::before { animation: none; }
}

@media (max-width: 760px) {
  .account-menu-shell { margin-left: 0; align-self: flex-end; }
  .account-menu-panel { right: 0; width: min(198px, calc(100vw - 18px)); max-width: 198px; border-radius: 18px; }
  .account-menu-header { padding: 14px 14px 12px; }
  .account-menu-header strong { font-size: 14px; }
  .account-menu-header span { font-size: 11px; }
  .account-menu-item { padding: 13px 14px; font-size: 13px; }
  .account-menu-submenu { position: static; }
  .account-submenu-panel { position: static; right: auto; top: auto; min-width: 0; margin: 0 14px 14px; box-shadow: none; }
  .account-language-panel .lang-btn,
  .account-theme-panel .theme-btn { min-width: 0; }
}