.ui-mode-switcher {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border: 1px solid rgba(148, 163, 184, .28);
  border-radius: 999px;
  background: rgba(255, 255, 255, .05);
  backdrop-filter: blur(14px);
  white-space: nowrap;
}

.ui-mode-switcher__label {
  padding: 0 7px 0 9px;
  color: #8f93a3;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.ui-mode-switcher__option {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 11px;
  border-radius: 999px;
  color: #aeb1bd !important;
  text-decoration: none;
  font-size: .78rem;
  font-weight: 800;
  transition: color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease;
}

.ui-mode-switcher__option:hover,
.ui-mode-switcher__option:focus-visible {
  color: #fff !important;
  background: rgba(255, 255, 255, .08);
}

.ui-mode-switcher__option.is-active {
  color: #09090d !important;
  background: linear-gradient(135deg, #f5f1ff, #c9bcff 55%, #9ed9ff);
  box-shadow: 0 8px 22px rgba(104, 82, 255, .2);
}

.ui-classic .ui-mode-switcher {
  border-color: #d8e0ea;
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 8px 24px rgba(15, 23, 42, .08);
}

.ui-classic .ui-mode-switcher__label { color: #64748b; }
.ui-classic .ui-mode-switcher__option { color: #526075 !important; }
.ui-classic .ui-mode-switcher__option:hover,
.ui-classic .ui-mode-switcher__option:focus-visible {
  color: #172033 !important;
  background: #eef3f8;
}
.ui-classic .ui-mode-switcher__option.is-active {
  color: #fff !important;
  background: linear-gradient(135deg, #172033, #2f4770);
  box-shadow: 0 8px 20px rgba(23, 32, 51, .16);
}

.ui-mode-switcher.is-compact .ui-mode-switcher__label { display: none; }
.ui-mode-switcher.is-compact .ui-mode-switcher__option { padding-inline: 9px; }

@media (max-width: 1180px) {
  .ui-mode-switcher__label { display: none; }
  .ui-mode-switcher__option span:last-child { display: none; }
  .ui-mode-switcher__option { width: 34px; padding: 0; }
}

@media (max-width: 760px) {
  /* Full-width selector is only for menu/content placement, never compact headers. */
  .ui-mode-switcher:not(.is-compact) {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-radius: 14px;
  }
  .ui-mode-switcher:not(.is-compact) .ui-mode-switcher__option {
    width: 100%;
  }
  .ui-mode-switcher:not(.is-compact) .ui-mode-switcher__option span:last-child {
    display: inline;
  }

  .ui-mode-switcher.is-compact {
    width: auto;
    display: inline-flex;
    flex: 0 0 auto;
  }
  .ui-mode-switcher.is-compact .ui-mode-switcher__option {
    width: 34px;
    padding: 0;
  }
}