.lingex-top-bar {
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 0.5rem 1rem;
    background: #e0ecff;
    color: #172033;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 0.95rem;
    line-height: 1.2;
}

.lingex-top-bar__brand {
    font-weight: 800;
    font-size: 1.05rem;
    color: #172033;
    text-decoration: none;
    white-space: nowrap;
}

.lingex-top-bar__account {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
    min-width: 0;
}

.lingex-top-bar__account code {
    font-family: inherit;
    background: transparent;
    padding: 0;
}

.lingex-top-bar__nav {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 1rem;
    white-space: nowrap;
}

.lingex-top-bar__nav a {
    color: #1d4ed8;
    font-weight: 600;
    text-decoration: none;
}

.lingex-top-bar__nav a:hover,
.lingex-top-bar__nav a:focus {
    text-decoration: underline;
}

@media (max-width: 700px) {
    .lingex-top-bar {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.4rem;
    }

    .lingex-top-bar__nav {
        margin-left: 0;
    }

    .lingex-top-bar__user-id {
        display: none;
    }
}


.lingex-top-bar__language,
.lingex-top-bar__source,
.lingex-top-bar__learning {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    white-space: nowrap;
}

.lingex-top-bar__language label,
.lingex-top-bar__source label,
.lingex-top-bar__learning label {
    font-weight: 600;
}

.lingex-top-bar__language select,
.lingex-top-bar__source select,
.lingex-top-bar__learning select {
    font: inherit;
    border: 1px solid rgba(23, 32, 51, 0.25);
    border-radius: 0.4rem;
    background: #ffffff;
    color: #172033;
    padding: 0.2rem 0.35rem;
}

/* Admin-only view-as control. */
.lingex-view-as-control {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-left: .5rem;
  font-size: .8125rem;
}

.lingex-view-as-label {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
}

.lingex-view-as-label-text {
  color: var(--lx-muted-text, #5f6b7a);
  white-space: nowrap;
}

.lingex-view-as-select {
  max-width: 11rem;
  border: 1px solid var(--lx-border, #d9deea);
  border-radius: .5rem;
  background: var(--lx-surface, #fff);
  color: var(--lx-text, #172033);
  font: inherit;
  padding: .2rem .4rem;
}

.lingex-view-as-active {
  border: 1px solid var(--lx-border, #d9deea);
  border-radius: 999px;
  background: var(--lx-surface-soft, #f6f7fb);
  color: var(--lx-text, #172033);
  padding: .15rem .45rem;
  white-space: nowrap;
}

@media (max-width: 760px) {
  .lingex-view-as-control {
    width: 100%;
    justify-content: flex-start;
    margin-left: 0;
  }

  .lingex-view-as-active {
    display: none;
  }
}


/* Compact theme preference control. */
.lingex-theme-control {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin-left: .5rem;
  font-size: .8125rem;
}

.lingex-theme-control__label {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
}

.lingex-theme-control__label-text {
  color: var(--lx-muted-text, #5f6b7a);
  white-space: nowrap;
}

.lingex-theme-control__select {
  max-width: 9rem;
  border: 1px solid var(--lx-border, #d9deea);
  border-radius: .5rem;
  background: var(--lx-surface, #fff);
  color: var(--lx-text, #172033);
  font: inherit;
  padding: .2rem .4rem;
}

@media (max-width: 760px) {
  .lingex-theme-control {
    width: 100%;
    margin-left: 0;
  }
}

body[data-lx-theme="arcade-dark"] .lingex-top-bar,
body[data-lx-theme="arcade-dark"] .lingex-top-bar label,
body[data-lx-theme="arcade-dark"] .lingex-top-bar span,
body[data-lx-theme="arcade-dark"] .lingex-top-bar strong,
body[data-lx-theme="arcade-dark"] .lingex-top-bar small,
body[data-lx-theme="arcade-dark"] .lingex-top-bar .lingex-account-summary,
body[data-lx-theme="arcade-dark"] .lingex-top-bar .lingex-account-summary *,
body[data-lx-theme="arcade-dark"] .lingex-top-bar .lingex-language-label,
body[data-lx-theme="arcade-dark"] .lingex-top-bar .lingex-theme-label,
body[data-lx-theme="arcade-dark"] .lingex-top-bar .lingex-view-as-label {
  color: rgba(226, 232, 240, 0.94);
}

body[data-lx-theme="arcade-dark"] .lingex-top-bar a {
  color: rgba(241, 245, 249, 0.96);
}

body[data-lx-theme="arcade-dark"] .lingex-top-bar a:hover,
body[data-lx-theme="arcade-dark"] .lingex-top-bar a:focus {
  color: #ffffff;
}

body[data-lx-theme="arcade-dark"] .lingex-top-bar select,
body[data-lx-theme="arcade-dark"] .lingex-top-bar option {
  color: rgba(241, 245, 249, 0.96);
  background: #111827;
}

.lingex-user-menu {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-left: .5rem;
}

.lingex-user-menu__summary {
  width: 2.35rem;
  height: 2.35rem;
  border: 1px solid rgba(148, 163, 184, .45);
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  cursor: pointer;
  background: rgba(15, 23, 42, .72);
  color: rgba(241, 245, 249, .96);
  list-style: none;
}

.lingex-user-menu__summary::-webkit-details-marker {
  display: none;
}

.lingex-user-menu__summary:hover,
.lingex-user-menu__summary:focus {
  border-color: rgba(226, 232, 240, .78);
  background: rgba(30, 41, 59, .9);
  outline: none;
}

.lingex-user-menu__icon,
.lingex-user-menu__icon svg {
  width: 1.25rem;
  height: 1.25rem;
  display: block;
  fill: currentColor;
}

.lingex-user-menu__panel {
  position: absolute;
  top: calc(100% + .65rem);
  right: 0;
  z-index: 1000;
  min-width: 18rem;
  max-width: min(22rem, calc(100vw - 2rem));
  padding: .85rem;
  border: 1px solid rgba(148, 163, 184, .32);
  border-radius: 1rem;
  background: rgba(15, 23, 42, .98);
  box-shadow: 0 1.2rem 3rem rgba(0, 0, 0, .38);
  color: rgba(241, 245, 249, .96);
}

.lingex-user-menu__identity {
  display: grid;
  gap: .2rem;
}

.lingex-user-menu__name {
  font-size: .98rem;
  color: rgba(248, 250, 252, .98);
}

.lingex-user-menu__status,
.lingex-user-menu__id {
  font-size: .86rem;
  color: rgba(203, 213, 225, .94);
}

.lingex-user-menu__link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 2.4rem;
  padding: .55rem .8rem;
  border: 1px solid transparent;
  border-radius: .65rem;
  font-weight: 650;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
}

.lingex-user-menu__link:hover,
.lingex-user-menu__link:focus {
  background: var(--lx-surface-strong, rgba(148, 163, 184, .16));
  text-decoration: none;
  outline: none;
}

.lingex-user-menu__link--primary {
  background: var(--lx-accent, #1d4ed8);
  color: #ffffff !important;
}

.lingex-user-menu__link--primary:hover,
.lingex-user-menu__link--primary:focus {
  background: var(--lx-chrome-link, #1e40af);
  color: #ffffff !important;
}

.lingex-user-menu__section {
  margin-top: .85rem;
  padding-top: .85rem;
  border-top: 1px solid rgba(148, 163, 184, .24);
}

.lingex-user-menu__view-as .lingex-view-as-control,
.lingex-user-menu__view-as form,
.lingex-user-menu__view-as label {
  width: 100%;
}

.lingex-user-menu__view-as select {
  width: 100%;
}

body[data-lx-theme="arcade-dark"] .lingex-top-bar,
body[data-lx-theme="arcade-dark"] .lingex-top-bar label,
body[data-lx-theme="arcade-dark"] .lingex-top-bar span,
body[data-lx-theme="arcade-dark"] .lingex-top-bar strong,
body[data-lx-theme="arcade-dark"] .lingex-top-bar small {
  color: rgba(226, 232, 240, .95);
}

body[data-lx-theme="arcade-dark"] .lingex-top-bar a {
  color: rgba(241, 245, 249, .97);
}


/* Theme-aware shared chrome. These late rules intentionally override the
   historical hard-coded light/dark component colours above. */
.lingex-top-bar {
  background: var(--lx-chrome-bg, #ffffff);
  color: var(--lx-chrome-text, #172033);
  border-bottom: 1px solid var(--lx-chrome-border, rgba(17, 24, 39, .10));
}

.lingex-top-bar__brand,
.lingex-top-bar label,
.lingex-top-bar span,
.lingex-top-bar strong,
.lingex-top-bar small {
  color: var(--lx-chrome-text, #172033);
}

.lingex-top-bar__nav a,
.lingex-top-bar a {
  color: var(--lx-chrome-link, #1d4ed8);
}

.lingex-top-bar__language select,
.lingex-top-bar__source select,
.lingex-top-bar__learning select,
.lingex-view-as-select,
.lingex-theme-control__select {
  background: var(--lx-chrome-control-bg, #ffffff);
  color: var(--lx-chrome-control-text, #172033);
  border-color: var(--lx-chrome-control-border, rgba(23, 32, 51, .25));
}

.lingex-top-bar select option {
  background: var(--lx-chrome-control-bg, #ffffff);
  color: var(--lx-chrome-control-text, #172033);
}

.lingex-user-menu__summary {
  background: var(--lx-chrome-control-bg, #ffffff);
  color: var(--lx-chrome-control-text, #172033);
  border-color: var(--lx-chrome-control-border, rgba(23, 32, 51, .25));
}

.lingex-user-menu__summary:hover,
.lingex-user-menu__summary:focus {
  background: var(--lx-surface-strong, var(--lx-chrome-control-bg, #ffffff));
  border-color: var(--lx-chrome-text, #172033);
}

.lingex-user-menu__panel {
  background: var(--lx-menu-bg, #ffffff);
  color: var(--lx-menu-text, #172033);
  border-color: var(--lx-menu-border, #d7dde8);
  box-shadow: var(--lx-menu-shadow, 0 1.2rem 3rem rgba(15, 23, 42, .16));
}

.lingex-user-menu__name,
.lingex-user-menu__panel a,
.lingex-user-menu__panel label,
.lingex-user-menu__panel span,
.lingex-user-menu__panel strong {
  color: var(--lx-menu-text, #172033);
}

.lingex-user-menu__status,
.lingex-user-menu__id,
.lingex-user-menu__panel small,
.lingex-user-menu__panel .lingex-view-as-label-text {
  color: var(--lx-menu-muted, #526070);
}

.lingex-user-menu__section {
  border-top-color: var(--lx-menu-border, #d7dde8);
}

.lingex-user-menu__panel .lingex-view-as-select {
  background: var(--lx-chrome-control-bg, #ffffff);
  color: var(--lx-chrome-control-text, #172033);
  border-color: var(--lx-menu-border, #d7dde8);
}


/* Account menu belongs to the active chrome, not to the page canvas.
   This keeps corporate chrome light and game/admin chrome dark. */
.lingex-user-menu__summary {
  background: var(--lx-chrome-bg, #ffffff);
  color: var(--lx-chrome-text, #172033);
  border-color: var(--lx-chrome-control-border, var(--lx-chrome-border, #cbd5e1));
}

.lingex-user-menu__summary:hover,
.lingex-user-menu__summary:focus {
  background: var(--lx-surface-strong, var(--lx-chrome-bg, #ffffff));
  color: var(--lx-chrome-text, #172033);
  border-color: var(--lx-chrome-text, #172033);
}

.lingex-user-menu__panel {
  background: var(--lx-chrome-bg, #ffffff);
  color: var(--lx-chrome-text, #172033);
  border-color: var(--lx-chrome-border, #cbd5e1);
  box-shadow: var(--lx-menu-shadow, 0 1.2rem 3rem rgba(15, 23, 42, .18));
}

.lingex-user-menu__name,
.lingex-user-menu__panel a,
.lingex-user-menu__panel label,
.lingex-user-menu__panel strong,
.lingex-user-menu__panel span {
  color: var(--lx-chrome-text, #172033);
}

.lingex-user-menu__status,
.lingex-user-menu__id,
.lingex-user-menu__panel .lingex-view-as-label-text {
  color: var(--lx-chrome-muted, #526070);
}

.lingex-user-menu__section {
  border-top-color: var(--lx-chrome-border, #cbd5e1);
}

.lingex-user-menu__panel .lingex-view-as-select,
.lingex-user-menu__panel select {
  background: var(--lx-chrome-control-bg, #ffffff);
  color: var(--lx-chrome-control-text, #172033);
  border-color: var(--lx-chrome-control-border, #cbd5e1);
}