:root {
  --lang-bg: rgba(10, 12, 20, 0.7);
  --lang-border: rgba(255, 255, 255, 0.12);
  --lang-text: #e6e6e6;
  --lang-active: #2dd46f;
}

.lang-selector {
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 2000;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--lang-bg);
  border: 1px solid var(--lang-border);
  backdrop-filter: blur(6px);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.lang-selector--inline {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2500;
}

.lang-option {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--lang-text);
  font-weight: 600;
  font-size: 12px;
  padding: 0;
  cursor: pointer;
  transition: color 0.15s ease;
}

.lang-option.is-active {
  color: var(--lang-active);
}

.lang-option:hover {
  color: #ffffff;
}

.lang-sep {
  color: rgba(255, 255, 255, 0.35);
  font-weight: 600;
}

.lang-selector--landing {
  position: static;
  background: transparent;
  border: none;
  backdrop-filter: none;
  padding: 0;
  gap: 8px;
  white-space: nowrap;
}

.landing-page .lang-selector--landing .lang-option {
  color: var(--ink);
}

.landing-page .lang-selector--landing .lang-option.is-active {
  color: var(--teal);
}

.landing-page .lang-selector--landing .lang-option:hover {
  color: var(--ink);
}

.landing-page .lang-selector--landing .lang-sep {
  color: var(--ink-muted);
}

.policy-page .lang-selector--landing .lang-option {
  color: var(--ink, #0d1a2b);
}

.policy-page .lang-selector--landing .lang-option.is-active {
  color: var(--accent, #2f7dff);
}

.policy-page .lang-selector--landing .lang-option:hover {
  color: var(--ink, #0d1a2b);
}

.policy-page .lang-selector--landing .lang-sep {
  color: var(--ink-muted, #4c5b6b);
}

@media (max-width: 768px) {
  .lang-selector {
    top: 10px;
    right: 10px;
  }
}