.thera-switcher {
  position: fixed;
  right: 14px;
  top: 14px;
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.thera-switcher button,
.thera-switcher a {
  display: inline-grid;
  min-width: 42px;
  min-height: 40px;
  place-items: center;
  border: 1px solid rgba(31, 43, 40, 0.16);
  border-radius: 8px;
  background: rgba(251, 250, 244, 0.88);
  color: #294d3f;
  box-shadow: 0 12px 32px rgba(21, 41, 34, 0.14);
  cursor: pointer;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 900;
  text-decoration: none;
  backdrop-filter: blur(14px);
}

.thera-switcher .is-active {
  background: #426f5b;
  color: #fff;
}

.thera-menu {
  position: fixed;
  right: 14px;
  top: 62px;
  z-index: 1000;
  display: none;
  width: min(360px, calc(100vw - 28px));
  max-height: min(620px, calc(100vh - 84px));
  overflow: auto;
  border: 1px solid rgba(31, 43, 40, 0.14);
  border-radius: 8px;
  padding: 10px;
  background: rgba(251, 250, 244, 0.94);
  box-shadow: 0 24px 70px rgba(21, 41, 34, 0.2);
  backdrop-filter: blur(18px);
}

.thera-menu.is-open {
  display: grid;
  gap: 8px;
}

.thera-menu a {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  border-radius: 8px;
  padding: 10px;
  color: #1f2b28;
  text-decoration: none;
}

.thera-menu a:hover {
  background: rgba(66, 111, 91, 0.1);
}

.thera-menu strong,
.thera-menu span {
  display: block;
}

.thera-menu span {
  color: #65736d;
  font-size: 0.82rem;
  line-height: 1.35;
}

.thera-menu .mark {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 8px;
  background: var(--thera-accent, #426f5b);
  color: #fff;
  font-weight: 950;
}

@media (max-width: 640px) {
  .thera-switcher {
    right: 10px;
    top: 10px;
  }

  .thera-menu {
    right: 10px;
    top: 58px;
  }
}