.account-utilities {
  --account-control-ink: var(--ink, #071754);
  --account-control-blue: var(--console-action, var(--lime, #071754));
  --account-control-action-fg: var(--console-action-fg, #fff);
  --account-control-line: var(--line-2, rgba(7, 23, 84, .28));
  --account-control-surface: color-mix(in srgb, var(--paper, #fff) 86%, transparent);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--account-control-ink);
  font-family: "Sora", Arial, sans-serif;
}

.account-utilities-floating {
  position: fixed;
  z-index: 1200;
  top: 18px;
  right: 20px;
}

.account-language {
  position: relative;
}

.account-language-trigger,
.account-theme-toggle {
  min-width: 48px;
  height: 44px;
  border: 1px solid var(--account-control-line);
  border-radius: 14px 4px 14px 4px;
  background: var(--account-control-surface);
  color: inherit;
  backdrop-filter: blur(18px) saturate(1.25);
  -webkit-backdrop-filter: blur(18px) saturate(1.25);
  font: 650 .78rem/1 "Bricolage Grotesque Variable", Arial, sans-serif;
  cursor: pointer;
  transition: color .18s ease, border-color .18s ease, background-color .18s ease, transform .18s ease;
}

.account-language-trigger:hover,
.account-language-trigger[aria-expanded="true"],
.account-theme-toggle:hover {
  color: var(--account-control-action-fg);
  border-color: var(--account-control-blue);
  background: var(--account-control-blue);
  transform: translateY(-1px);
}

.account-theme-toggle {
  width: 44px;
  min-width: 44px;
  font-size: 1.05rem;
}

.account-language-menu {
  position: absolute;
  z-index: 1250;
  top: calc(100% + 8px);
  right: 0;
  width: 210px;
  padding: 8px;
  border: 1px solid var(--account-control-line);
  border-radius: 16px 4px 16px 4px;
  background: color-mix(in srgb, var(--paper, #fff) 94%, transparent);
  box-shadow: 0 22px 60px rgba(7, 23, 84, .16);
  backdrop-filter: blur(24px) saturate(1.25);
  -webkit-backdrop-filter: blur(24px) saturate(1.25);
}

.account-language-menu[hidden] {
  display: none !important;
}

.account-language-menu button {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 44px;
  padding: 0 14px;
  border: 0;
  border-radius: 10px 3px 10px 3px;
  background: transparent;
  color: inherit;
  font: 600 .9rem/1.2 "Bricolage Grotesque Variable", Arial, sans-serif;
  text-align: left;
  cursor: pointer;
}

.account-language-menu button:hover,
.account-language-menu button:focus-visible {
  background: color-mix(in srgb, var(--account-control-blue) 10%, transparent);
}

.account-language-menu button[aria-checked="true"] {
  color: var(--account-control-action-fg);
  background: var(--account-control-blue);
}

html:not([data-theme="light"]) .account-utilities {
  --account-control-ink: #f5f7ff;
  --account-control-action-fg: var(--console-action-fg, #071754);
  --account-control-line: rgba(255, 255, 255, .28);
  --account-control-surface: rgba(9, 20, 62, .78);
}

html:not([data-theme="light"]) .account-language-menu {
  background: rgba(5, 11, 36, .96);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .42);
}

.header-actions > .account-utilities,
.billing-top-actions > .account-utilities,
.admin-header nav > .account-utilities {
  flex: 0 0 auto;
}

/* Translated display copy needs more breathing room than the terse English
   lockup. Keep the same loud cadence without letting longer words cross the
   blue/paper seam. */
html:not([lang="en"]) .auth-box h1 {
  max-width: 100%;
  font-size: clamp(2.8rem, 4.55vw, 5.2rem) !important;
  font-variation-settings: "wght" 780, "wdth" 72 !important;
  overflow-wrap: anywhere;
}

html:not([lang="en"]) .aside-content blockquote {
  font-size: clamp(2.1rem, 3.25vw, 4.2rem) !important;
  font-variation-settings: "wght" 720, "wdth" 88 !important;
  line-height: .95 !important;
}

@media (max-width: 760px) {
  .account-utilities-floating {
    top: 12px;
    right: 14px;
  }

  .account-language-trigger,
  .account-theme-toggle {
    height: 42px;
  }

  .account-language-trigger {
    min-width: 46px;
  }

  .account-theme-toggle {
    width: 42px;
    min-width: 42px;
  }

  .onboarding-top > .account-utilities {
    order: 4;
    margin-left: auto;
  }

  .billing-top-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
  }
}

@media (max-width: 560px) {
  .account-utilities-inline .account-theme-toggle {
    display: none;
  }

  .account-language-menu {
    position: fixed;
    top: 64px;
    right: 14px;
    left: 14px;
    width: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .account-language-trigger,
  .account-theme-toggle {
    transition: none;
  }
}