:root {
  --lang-bg: var(--surface, #ffffff);
  --lang-text: var(--muted, #5f738d);
  --lang-line: var(--line, #d7e1ec);
}

.topbar {
  align-items: center;
  gap: 0.9rem;
}

.topnav,
.top-actions {
  width: min(100%, 950px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
  gap: 0.65rem;
  padding: 0.38rem;
  border: 1px solid var(--lang-line);
  border-radius: 0.9rem;
  background: linear-gradient(180deg, var(--surface-soft), var(--surface));
  box-shadow: 0 8px 20px rgba(8, 24, 48, 0.08);
}

:root[data-theme="dark"] .topnav,
:root[data-theme="dark"] .top-actions {
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.24);
}

.nav-tools,
.nav-prefs {
  display: flex;
  align-items: center;
  gap: 0.36rem;
  flex-wrap: nowrap;
}

.nav-tools {
  flex: 1 1 auto;
  min-width: 0;
}

.nav-prefs {
  flex: 1 1 auto;
  justify-content: flex-end;
  padding-left: 0.5rem;
  border-left: 1px solid var(--lang-line);
  flex-wrap: wrap;
}

.nav-chip,
.pill,
.health-pill {
  border-radius: 0.68rem;
  border: 1px solid transparent;
  background: transparent;
  color: var(--lang-text);
  padding: 0.46rem 0.68rem;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: 140ms ease;
}

.nav-chip:hover,
.pill:hover,
.health-pill:hover {
  border-color: var(--lang-line);
  background: var(--surface-soft);
  color: var(--text);
}

[data-theme-toggle] {
  min-width: 7.5rem;
  text-align: center;
}

#healthStatus {
  border-style: dashed;
}

.nav-menu {
  position: relative;
}

.nav-menu__trigger {
  appearance: none;
  border: 1px solid transparent;
  background: transparent;
  color: var(--lang-text);
  border-radius: 0.68rem;
  padding: 0.46rem 0.74rem;
  font-size: 0.82rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: 140ms ease;
}

.nav-menu__trigger:hover,
.nav-menu.is-open .nav-menu__trigger {
  border-color: var(--lang-line);
  background: var(--surface-soft);
  color: var(--text);
}

.nav-menu__panel {
  position: absolute;
  top: calc(100% + 0.46rem);
  left: 0;
  min-width: min(90vw, 340px);
  display: grid;
  gap: 0.3rem;
  padding: 0.38rem;
  border: 1px solid var(--lang-line);
  border-radius: 0.78rem;
  background: var(--surface);
  box-shadow: 0 14px 26px rgba(12, 24, 42, 0.18);
  z-index: 70;
}

:root[data-theme="dark"] .nav-menu__panel {
  box-shadow: 0 14px 26px rgba(0, 0, 0, 0.34);
}

.nav-menu__panel[hidden] {
  display: none;
}

.nav-menu__item {
  width: 100%;
  justify-content: flex-start;
  border-radius: 0.58rem;
  border: 1px solid var(--lang-line);
  background: var(--surface-soft);
  color: var(--text);
}

.nav-menu__item:hover {
  border-color: var(--accent, #123f70);
}

.lang-selector {
  display: inline-flex;
  align-items: center;
}

.lang-selector__select {
  appearance: none;
  border: 1px solid var(--lang-line);
  background: var(--lang-bg);
  color: var(--lang-text);
  border-radius: 0.68rem;
  padding: 0.44rem 0.58rem;
  font-size: 0.79rem;
  font-weight: 700;
  font-family: inherit;
  min-width: 3.6rem;
  cursor: pointer;
  transition: 140ms ease;
}

.lang-selector__select:hover {
  border-color: var(--accent, #123f70);
}

.lang-selector__select:focus {
  outline: none;
  border-color: var(--accent, #123f70);
}

.lang-selector--floating {
  position: fixed;
  top: 0.85rem;
  right: 0.85rem;
  z-index: 40;
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--lang-line);
  border-radius: 0.72rem;
  background: var(--lang-bg);
}

@media (max-width: 920px) {
  .topnav,
  .top-actions {
    width: 100%;
    padding: 0.44rem;
    border-radius: 0.82rem;
    gap: 0.5rem;
  }

  .nav-tools {
    flex: 1 1 100%;
    width: 100%;
  }

  .nav-menu {
    width: 100%;
  }

  .nav-menu__trigger {
    width: 100%;
  }

  .nav-menu__panel {
    position: static;
    margin-top: 0.38rem;
    min-width: 100%;
    box-shadow: none;
  }

  .nav-prefs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: 0.36rem;
    border-left: none;
    padding-left: 0;
    justify-content: stretch;
    flex: 1 1 100%;
    width: 100%;
    grid-auto-flow: dense;
  }

  .nav-prefs > :only-child {
    grid-column: 1 / -1;
  }

  .nav-prefs > * {
    min-width: 0;
  }

  .nav-prefs .nav-chip:not(.account-chip--avatar),
  .nav-prefs .pill:not(.account-chip--avatar),
  .nav-prefs .health-pill:not(.account-chip--avatar),
  .nav-prefs .lang-selector,
  .nav-prefs .lang-selector__select {
    width: 100%;
  }

  .nav-prefs .nav-chip:not(.account-chip--avatar),
  .nav-prefs .pill:not(.account-chip--avatar),
  .nav-prefs .health-pill:not(.account-chip--avatar) {
    justify-content: center;
    text-align: center;
  }

  .nav-prefs [data-theme-toggle] {
    min-width: 0;
  }

  .nav-prefs [data-account-chip].account-chip--avatar {
    justify-self: center;
  }
}

@media (max-width: 620px) {
  .topnav,
  .top-actions {
    padding: 0.4rem;
  }

  .nav-prefs {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .nav-prefs [data-account-chip]:not(.account-chip--avatar) {
    grid-column: 1 / -1;
  }

  .nav-prefs #healthStatus {
    grid-column: 1 / -1;
  }

  [data-theme-toggle] {
    min-width: 6.5rem;
  }

  .nav-chip,
  .pill,
  .health-pill {
    padding: 0.42rem 0.6rem;
    font-size: 0.78rem;
  }
}

@media (max-width: 420px) {
  .topnav,
  .top-actions {
    padding: 0.34rem;
    gap: 0.34rem;
  }

  .nav-menu__trigger {
    padding: 0.44rem 0.6rem;
  }

  .nav-menu__panel {
    max-height: 62vh;
    overflow: auto;
  }

  .nav-prefs {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .nav-prefs [data-account-chip]:not(.account-chip--avatar) {
    grid-column: auto;
  }

  .nav-prefs [data-account-chip].account-chip--avatar {
    justify-self: start;
  }
}