:root {
  --bg1: #6d28d9;
  --bg2: #0d9488;
}

* { -webkit-tap-highlight-color: transparent; }

body {
  margin: 0;
  background: #0f172a;
}

.app-bg {
  background:
    radial-gradient(circle at 15% 0%, rgba(244, 114, 182, 0.35), transparent 45%),
    radial-gradient(circle at 85% 10%, rgba(251, 191, 36, 0.35), transparent 45%),
    linear-gradient(160deg, #7c3aed 0%, #6d28d9 35%, #0d9488 100%);
  background-attachment: fixed;
}

/* range slider tweaks for RTL clarity */
input[type="range"] {
  cursor: pointer;
}

/* pop-in animation for cards */
@keyframes pop {
  0% { opacity: 0; transform: translateY(12px) scale(0.97); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.animate-pop {
  animation: pop 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

/* confetti */
.confetti-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.confetti-bit {
  position: absolute;
  top: -10px;
  width: 8px;
  height: 14px;
  border-radius: 2px;
  opacity: 0.9;
  animation-name: fall;
  animation-timing-function: ease-in;
  animation-iteration-count: infinite;
}
@keyframes fall {
  0% { transform: translateY(-20px) rotate(0deg); opacity: 1; }
  100% { transform: translateY(360px) rotate(540deg); opacity: 0; }
}

/* smooth scroll & selection color */
::selection {
  background: rgba(244, 114, 182, 0.4);
}

/* nicer scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.3); border-radius: 4px; }