/* The account control is nested inside <details>. Older topbar selectors
   targeted a direct child and missed its surface and interaction states. */
html[data-theme] .super-shell.is-authenticated .topbar .account-menu {
  --account-surface: #0c2942;
  --account-hover: #163b59;
  --account-text: #f5f9ff;
  --account-muted: #b5c9dc;
  --account-border: #66859f;
  --account-focus: #8cc8ff;
  --account-avatar: #174f89;
  --account-avatar-text: #f2f7ff;
}
html[data-theme="light"] .super-shell.is-authenticated .topbar .account-menu {
  --account-surface: #ffffff;
  --account-hover: #edf3fc;
  --account-text: #0b1f33;
  --account-muted: #40536a;
  --account-border: #78899c;
  --account-focus: #1459bd;
  --account-avatar: #1459bd;
  --account-avatar-text: #ffffff;
}
html[data-theme] body .super-shell.is-authenticated .topbar .topbar-actions > .account-menu > .account-pill,
html[data-theme] body .super-shell.is-authenticated .topbar .account-menu > .account-menu-panel {
  background: var(--account-surface) !important;
  color: var(--account-text) !important;
  border: 1px solid var(--account-border) !important;
}
html[data-theme] body .super-shell.is-authenticated .topbar .topbar-actions > .account-menu > .account-pill {
  box-shadow: none !important;
}
html[data-theme] body .super-shell.is-authenticated .topbar .account-menu > .account-pill:is(:hover, :focus-visible),
html[data-theme] body .super-shell.is-authenticated .topbar .account-menu[open] > .account-pill {
  background: var(--account-hover) !important;
}
html[data-theme] body .super-shell.is-authenticated .topbar .account-menu > .account-pill > strong,
html[data-theme] body .super-shell.is-authenticated .topbar .account-menu .account-menu-heading strong {
  color: var(--account-text) !important;
}
html[data-theme] body .super-shell.is-authenticated .topbar .account-menu small {
  color: var(--account-muted) !important;
}
html[data-theme] body .super-shell.is-authenticated .topbar .topbar-actions > .account-menu > .account-pill > span {
  background: var(--account-avatar) !important;
  color: var(--account-avatar-text) !important;
  box-shadow: none !important;
}
html[data-theme] body .super-shell.is-authenticated .topbar .account-menu :is(.menu-row, .menu-row-label, .account-menu-close) {
  color: var(--account-text) !important;
  background: transparent !important;
}
html[data-theme] body .super-shell.is-authenticated .topbar .account-menu :is(.menu-row, .account-menu-close):hover {
  background: var(--account-hover) !important;
}
html[data-theme] body .super-shell.is-authenticated .topbar .account-menu :is(summary, a, button):focus-visible {
  outline: 2px solid var(--account-focus) !important;
  outline-offset: 3px;
}