.custom-color-picker {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

#colorSwatch {
  width: 48px;
  height: 48px;
  display: inline-block;
  background: var(--sw, #ff0000);
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12), 0 0 0 8px rgba(0, 0, 0, 0.03);
  transition: transform 0.18s ease, box-shadow 0.25s ease, background 0.12s linear;
  position: relative;
  overflow: visible;
}

/* Subtle breathing glow using a pseudo-element and CSS variable set from JS */
#colorSwatch::after {
  content: "";
  position: absolute;
  inset: -12px;
  border-radius: 50%;
  pointer-events: none;
  box-shadow: 0 0 28px 8px rgba(0, 0, 0, 0); /* default */
  transition: box-shadow 0.3s ease;
  z-index: -1;
}

/* hover/active gestures */
#colorButton:hover #colorSwatch {
  transform: scale(1.06);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.14);
}

#colorButton:active #colorSwatch {
  transform: scale(0.98);
}

/* gentle breathing animation */
@keyframes breathe {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.02);
  }
  100% {
    transform: scale(1);
  }
}
#colorSwatch {
  animation: breathe 4s ease-in-out infinite;
}

/* Responsive tweak */
@media (max-width: 420px) {
  #colorSwatch {
    width: 40px;
    height: 40px;
  }
}
.power-toggle-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

#powerButton {
  border-radius: 50%;
  width: 84px;
  height: 84px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

#bulbIcon {
  transition: color 0.25s ease, transform 0.25s ease, text-shadow 0.25s ease;
  font-size: 2.25rem;
  color: var(--bs-secondary);
}

.bulb-on #bulbIcon {
  color: var(--bs-warning);
  filter: drop-shadow(0 0 8px rgba(255, 200, 60, 0.7));
  transform: scale(1.06) rotate(-6deg);
  text-shadow: 0 0 8px rgba(255, 200, 60, 0.6);
}

.bulb-on #powerButton {
  box-shadow: 0 6px 18px rgba(255, 170, 0, 0.18);
  transform: translateY(-3px);
}

@keyframes pulseGlow {
  0% {
    text-shadow: 0 0 6px rgba(255, 200, 60, 0.6);
  }
  50% {
    text-shadow: 0 0 14px rgb(255, 200, 60);
  }
  100% {
    text-shadow: 0 0 6px rgba(255, 200, 60, 0.6);
  }
}
.bulb-on.pulsing #bulbIcon {
  animation: pulseGlow 1.6s infinite ease-in-out;
}

/* quick click animation */
.click-animate {
  animation: clickAnim 220ms ease;
}

@keyframes clickAnim {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.85);
  }
  100% {
    transform: scale(1);
  }
}/*# sourceMappingURL=form.css.map */