.theme-switcher {
  position: relative;
  display: none;
  align-items: center;
  gap: 10px;
  min-width: 0;
  --theme-switcher-label-color: rgba(255, 255, 255, 0.72);
  --theme-select-border: rgba(255, 255, 255, 0.14);
  --theme-select-bg: rgba(255, 255, 255, 0.05);
  --theme-select-color: var(--white);
  --theme-menu-border: rgba(31, 43, 73, 0.12);
  --theme-menu-bg: rgba(13, 20, 34, 0.96);
  --theme-menu-shadow: 0 18px 40px rgba(8, 12, 21, 0.22);
  --theme-option-color: var(--white);
  --theme-option-hover-border: rgba(255, 255, 255, 0.12);
  --theme-option-hover-bg: rgba(255, 255, 255, 0.06);
  --theme-option-active-bg: rgba(255, 177, 38, 0.12);
  --theme-option-active-color: #ffcf72;
  --theme-focus-ring: rgba(255, 177, 38, 0.12);
  --theme-focus-border: rgba(255, 177, 38, 0.65);
}

.theme-switcher-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--theme-switcher-label-color);
}

.site-header.is-scrolled .theme-switcher-label,
.mobile-nav .theme-switcher-label {
  --theme-switcher-label-color: var(--muted);
}

.theme-select {
  min-width: 132px;
  height: 40px;
  padding: 0 36px 0 12px;
  border: 1px solid var(--theme-select-border);
  border-radius: 12px;
  background:
    linear-gradient(45deg, transparent 50%, currentColor 50%) calc(100% - 18px) calc(50% - 2px) / 6px 6px no-repeat,
    linear-gradient(135deg, currentColor 50%, transparent 50%) calc(100% - 14px) calc(50% - 2px) / 6px 6px no-repeat,
    var(--theme-select-bg);
  color: var(--theme-select-color);
  font-size: 14px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  text-align: left;
  cursor: pointer;
  outline: none;
  min-width: 0;
}

.theme-select span {
  pointer-events: none;
}

.theme-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 80;
  min-width: 176px;
  max-width: min(280px, calc(100vw - 24px));
  display: grid;
  gap: 6px;
  padding: 8px;
  border: 1px solid var(--theme-menu-border);
  border-radius: 14px;
  background: var(--theme-menu-bg);
  box-shadow: var(--theme-menu-shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 160ms ease, transform 160ms ease, visibility 160ms ease;
}

.theme-switcher.is-open .theme-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.theme-option {
  width: 100%;
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--theme-option-color);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.theme-option:hover,
.theme-option:focus-visible {
  border-color: var(--theme-option-hover-border);
  background: var(--theme-option-hover-bg);
  outline: none;
}

.theme-option.is-active {
  background: var(--theme-option-active-bg);
  color: var(--theme-option-active-color);
}

.site-header.is-scrolled .theme-select,
.mobile-nav .theme-select {
  --theme-select-border: rgba(31, 43, 73, 0.12);
  --theme-select-bg: #ffffff;
  --theme-select-color: var(--text);
}

.site-header.is-scrolled .theme-menu,
.mobile-nav .theme-menu {
  --theme-menu-border: rgba(31, 43, 73, 0.12);
  --theme-menu-bg: #ffffff;
  --theme-menu-shadow: 0 18px 40px rgba(17, 24, 39, 0.12);
}

.site-header.is-scrolled .theme-option,
.mobile-nav .theme-option {
  --theme-option-color: var(--text);
}

.site-header.is-scrolled .theme-option:hover,
.site-header.is-scrolled .theme-option:focus-visible,
.mobile-nav .theme-option:hover,
.mobile-nav .theme-option:focus-visible {
  --theme-option-hover-border: rgba(31, 43, 73, 0.12);
  --theme-option-hover-bg: rgba(31, 43, 73, 0.04);
}

.site-header.is-scrolled .theme-option.is-active,
.mobile-nav .theme-option.is-active {
  --theme-option-active-bg: rgba(255, 177, 38, 0.12);
  --theme-option-active-color: #9b6200;
}

.theme-select:focus {
  border-color: var(--theme-focus-border);
  box-shadow: 0 0 0 4px var(--theme-focus-ring);
}

.theme-switcher-mobile {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.mobile-nav .theme-switcher {
  position: relative;
  isolation: isolate;
}

.mobile-nav .theme-menu {
  top: calc(100% + 6px);
  right: 0;
  bottom: auto;
  left: 0;
  z-index: 120;
}

.theme-switcher-mobile .theme-select,
.theme-switcher-mobile .theme-menu {
  width: 100%;
}

body.theme-editorial .theme-switcher-label,
body[data-theme="editorial"] .theme-switcher-label {
  --theme-switcher-label-color: var(--muted);
}

body.theme-editorial .theme-select,
body[data-theme="editorial"] .theme-select {
  --theme-select-border: rgba(184, 155, 112, 0.12);
  --theme-select-bg: #111111;
  --theme-select-color: var(--text);
}

body.theme-editorial .theme-menu,
body[data-theme="editorial"] .theme-menu {
  --theme-menu-border: rgba(184, 155, 112, 0.12);
  --theme-menu-bg: #111111;
  --theme-menu-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
}

body.theme-editorial .theme-option,
body[data-theme="editorial"] .theme-option {
  --theme-option-color: var(--text);
}

body.theme-editorial .theme-option:hover,
body.theme-editorial .theme-option:focus-visible,
body[data-theme="editorial"] .theme-option:hover,
body[data-theme="editorial"] .theme-option:focus-visible {
  --theme-option-hover-border: rgba(184, 155, 112, 0.14);
  --theme-option-hover-bg: rgba(184, 155, 112, 0.06);
}

body.theme-editorial .theme-option.is-active,
body[data-theme="editorial"] .theme-option.is-active {
  --theme-option-active-bg: rgba(184, 155, 112, 0.1);
  --theme-option-active-color: #e5d0ae;
}

body.theme-editorial .site-header.is-scrolled .theme-select,
body.theme-editorial .mobile-nav .theme-select,
body[data-theme="editorial"] .site-header.is-scrolled .theme-select,
body[data-theme="editorial"] .mobile-nav .theme-select {
  --theme-select-border: rgba(184, 155, 112, 0.12);
  --theme-select-bg: #111111;
  --theme-select-color: var(--text);
}

body.theme-editorial .site-header.is-scrolled .theme-menu,
body.theme-editorial .mobile-nav .theme-menu,
body[data-theme="editorial"] .site-header.is-scrolled .theme-menu,
body[data-theme="editorial"] .mobile-nav .theme-menu {
  --theme-menu-border: rgba(184, 155, 112, 0.12);
  --theme-menu-bg: #111111;
  --theme-menu-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
}

body.theme-editorial .site-header.is-scrolled .theme-option,
body.theme-editorial .mobile-nav .theme-option,
body[data-theme="editorial"] .site-header.is-scrolled .theme-option,
body[data-theme="editorial"] .mobile-nav .theme-option {
  --theme-option-color: var(--text);
}

body.theme-editorial .site-header.is-scrolled .theme-option:hover,
body.theme-editorial .site-header.is-scrolled .theme-option:focus-visible,
body.theme-editorial .mobile-nav .theme-option:hover,
body.theme-editorial .mobile-nav .theme-option:focus-visible,
body[data-theme="editorial"] .site-header.is-scrolled .theme-option:hover,
body[data-theme="editorial"] .site-header.is-scrolled .theme-option:focus-visible,
body[data-theme="editorial"] .mobile-nav .theme-option:hover,
body[data-theme="editorial"] .mobile-nav .theme-option:focus-visible {
  --theme-option-hover-border: rgba(184, 155, 112, 0.14);
  --theme-option-hover-bg: rgba(184, 155, 112, 0.06);
}

body.theme-editorial .site-header.is-scrolled .theme-option.is-active,
body.theme-editorial .mobile-nav .theme-option.is-active,
body[data-theme="editorial"] .site-header.is-scrolled .theme-option.is-active,
body[data-theme="editorial"] .mobile-nav .theme-option.is-active {
  --theme-option-active-bg: rgba(184, 155, 112, 0.1);
  --theme-option-active-color: #e5d0ae;
}

body.theme-editorial .theme-select:focus,
body[data-theme="editorial"] .theme-select:focus {
  --theme-focus-border: rgba(184, 155, 112, 0.28);
  --theme-focus-ring: rgba(184, 155, 112, 0.08);
}

@media (max-width: 719px) {
  .theme-switcher-mobile {
    width: 100%;
  }

  .theme-switcher-label {
    font-size: 11px;
  }

  .theme-switcher-mobile .theme-select,
  .theme-switcher-mobile .theme-menu {
    width: 100%;
    min-width: 0;
  }

  .theme-switcher-mobile .theme-select {
    height: 44px;
    padding-inline: 12px 34px;
    font-size: 14px;
  }

  .theme-option {
    min-height: 44px;
  }
}

@media (max-width: 430px) {
  .theme-switcher {
    gap: 8px;
  }

  .theme-switcher-label {
    font-size: 10px;
    letter-spacing: 0.06em;
  }

  .theme-select {
    min-width: 118px;
    height: 38px;
    padding: 0 32px 0 11px;
    font-size: 13px;
    background:
      linear-gradient(45deg, transparent 50%, currentColor 50%) calc(100% - 17px) calc(50% - 2px) / 5px 5px no-repeat,
      linear-gradient(135deg, currentColor 50%, transparent 50%) calc(100% - 13px) calc(50% - 2px) / 5px 5px no-repeat,
      var(--theme-select-bg);
  }

  .theme-menu {
    top: calc(100% + 8px);
    width: min(100%, 220px);
    padding: 7px;
  }

  .mobile-nav .theme-menu {
    top: calc(100% + 6px);
    bottom: auto;
    width: 100%;
  }

  .theme-option {
    min-height: 40px;
    padding-inline: 11px;
    font-size: 13px;
  }
}

@media (max-width: 359px) {
  .theme-select {
    min-width: 110px;
    font-size: 12px;
  }

  .theme-menu {
    width: min(100%, 204px);
  }

  .mobile-nav .theme-menu {
    width: 100%;
  }
}

@media (min-width: 980px) {
  .theme-switcher-desktop {
    display: inline-flex;
  }

  .theme-switcher-mobile {
    display: none;
  }
}