body[data-pan-theme] {
  --pan-primary: #1f5ea8;
  --pan-secondary: #1a9ac4;
  --pan-accent: #f06d2f;
  --pan-surface: #ffffff;
  --pan-background: #eef4f8;
  --pan-text: #122039;
  --pan-muted: #5f6f84;
}

.pan-theme-switcher {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 110;
  width: 208px;
  border: 1px solid color-mix(in srgb, var(--pan-primary) 25%, #ffffff 75%);
  border-radius: 10px;
  background: color-mix(in srgb, var(--pan-surface) 92%, var(--pan-background) 8%);
  box-shadow: 0 16px 38px rgba(18, 32, 57, 0.16);
  backdrop-filter: blur(10px);
}

.pan-theme-switcher-toggle {
  width: 100%;
  border: 0;
  border-radius: 10px 10px 0 0;
  background: var(--pan-primary);
  color: #ffffff;
  font-family: "Archivo-SemiBold", "Segoe UI", sans-serif;
  font-size: 13px;
  letter-spacing: 0;
  padding: 9px 12px;
  cursor: pointer;
}

.pan-theme-switcher-options {
  display: none;
  padding: 8px;
}

.pan-theme-switcher.is-open .pan-theme-switcher-options {
  display: grid;
  gap: 6px;
}

.pan-theme-option {
  border: 1px solid color-mix(in srgb, var(--pan-primary) 20%, #ffffff 80%);
  border-radius: 8px;
  background: #ffffff;
  color: var(--pan-text);
  padding: 7px 9px;
  text-align: left;
  cursor: pointer;
  font-family: "Archivo-Medium", "Segoe UI", sans-serif;
  font-size: 12px;
  display: grid;
  grid-template-columns: 24px 1fr;
  align-items: center;
  gap: 8px;
}

.pan-theme-option.is-active {
  border-color: var(--pan-primary);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--pan-primary) 20%, transparent 80%);
}

.pan-theme-swatch {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--pan-theme-dot-primary) 25%, #ffffff 75%);
  background: linear-gradient(140deg, var(--pan-theme-dot-primary), var(--pan-theme-dot-accent));
}

@media (max-width: 991px) {
  .pan-theme-switcher {
    width: 186px;
    right: 10px;
    bottom: 84px;
  }
}