:root {
  --accent: #ff69b4;
  --accent-strong: #ff4aa3;
  --accent-soft: #ff9bd2;
  --accent-rgb: 255, 105, 180;
}

:root.theme-red {
  --accent: #ff3b30;
  --accent-strong: #ff1f1f;
  --accent-soft: #ff6b6b;
  --accent-rgb: 255, 59, 48;
}

.theme-toggle {
  position: fixed;
  top: 84px;
  left: 24px;
  z-index: 90;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #fff;
  height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(var(--accent-rgb), 0.35);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.theme-toggle:hover {
  background: var(--accent-strong);
  border-color: var(--accent-strong);
}

@media (max-width: 700px) {
  .theme-toggle {
    top: 76px;
    left: 16px;
  }
}

body.filter-panel-open .theme-toggle {
  z-index: 10;
  pointer-events: none;
}