@import url("https://fonts.googleapis.com/css2?family=Prompt:wght@300;400;500;600;700&display=swap");

:where(html, body, button, input, select, textarea, table, dialog, .toast, .modal) {
  font-family: "Prompt", sans-serif;
}

html[data-i18n-page-title],
html[data-i18n-page-title] body,
html[data-i18n-page-title] button,
html[data-i18n-page-title] input,
html[data-i18n-page-title] select,
html[data-i18n-page-title] textarea,
html[data-i18n-page-title] table,
html[data-i18n-page-title] th,
html[data-i18n-page-title] td,
html[data-i18n-page-title] dialog,
html[data-i18n-page-title] fieldset,
html[data-i18n-page-title] legend,
html[data-i18n-page-title] label,
html[data-i18n-page-title] .toast,
html[data-i18n-page-title] .modal,
html[data-i18n-page-title] .timer,
html[data-i18n-page-title] .navigator,
html[data-i18n-page-title] .nav-dot,
html[data-i18n-page-title] .choice,
html[data-i18n-page-title] .exam-card,
html[data-i18n-page-title] .result-card,
html[data-i18n-page-title] .state-card,
html[data-i18n-page-title] .message {
  font-family: "Prompt", sans-serif;
}

.sbos-lang-switch {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 18px;
}

.sbos-lang-btn {
  width: 56px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(120, 210, 255, .28);
  background: rgba(255, 255, 255, .08);
  color: inherit;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  box-shadow: none;
}

.sbos-lang-btn[aria-pressed="true"] {
  background: linear-gradient(135deg, #1e6bff, #00d4ff);
}

.sbos-lang-btn:focus-visible {
  outline: 3px solid rgba(95, 220, 255, .45);
  outline-offset: 2px;
}