.language-toggle {
  position: relative;
  isolation: isolate;
  min-width: 96px;
  height: 36px;
  padding: 0 14px;
  border: 1px solid #363832;
  border-radius: 999px;
  background: linear-gradient(145deg, #20221f, #111311);
  color: #f6f3ea;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  direction: ltr;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 5px 15px rgba(17,19,17,.08);
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}

.language-toggle::before {
  content: '';
  width: 4px;
  height: 4px;
  flex: 0 0 4px;
  border-radius: 50%;
  background: #b99a5d;
  box-shadow: 0 0 0 3px rgba(185,154,93,.1);
}

.language-toggle-code {
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .12em;
}

.language-toggle-divider {
  width: 1px;
  height: 13px;
  background: rgba(255,255,255,.18);
}

.language-toggle-label {
  font-family: 'Noto Kufi Arabic', 'Manrope', sans-serif;
  font-size: 9px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
}

.language-toggle:hover {
  border-color: #9c824f;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 7px 18px rgba(17,19,17,.13);
  transform: translateY(-1px);
}

.language-toggle:active { transform: translateY(0) scale(.97); }
.language-toggle:focus-visible { outline: 2px solid #b99a5d; outline-offset: 3px; }

@media (max-width: 600px) {
  .language-toggle {
    min-width: 43px;
    width: 43px;
    height: 31px;
    padding: 0;
    gap: 6px;
    border-color: #46473f;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 3px 10px rgba(17,19,17,.1);
  }

  .language-toggle::before {
    width: 3px;
    height: 3px;
    flex-basis: 3px;
    box-shadow: none;
  }

  .language-toggle-code { font-size: 9px; letter-spacing: .08em; }
  .language-toggle-divider,
  .language-toggle-label { display: none; }

  .header-actions { gap: 11px !important; }

  html[dir='rtl'] .topbar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    direction: ltr;
    height: 58px !important;
    padding: 0 14px !important;
  }

  html[dir='rtl'] .topbar > .wordmark {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    direction: ltr;
    margin: 0;
    line-height: .82;
  }

  html[dir='rtl'] .topbar > .wordmark em {
    margin-left: 17px;
    margin-right: 0;
  }

  html[dir='rtl'] .topbar > .header-actions {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    direction: ltr;
    display: flex;
    align-items: center;
    gap: 8px !important;
    margin: 0;
  }

  html[dir='rtl'] .header-actions .language-toggle {
    order: 3;
    width: 43px;
    height: 32px;
  }

  html[dir='rtl'] .header-actions .icon-button {
    order: 2;
    width: 32px;
    height: 32px;
    padding: 0;
    display: grid;
    place-items: center;
    font-size: 23px;
    line-height: 1;
  }

  html[dir='rtl'] .header-actions .avatar {
    order: 1;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    display: grid;
    place-items: center;
    padding: 0;
    line-height: 1;
  }
}