:root {
  --banana: #FFE135;
  --banana-dark: #E6C700;
  --banana-glow: rgba(255, 225, 53, 0.3);
  --bg-deep: #0d0d1a;
  --bg-panel: #141428;
  --bg-card: #1a1a36;
  --bg-hover: #222244;
  --text-primary: #f0f0f5;
  --text-muted: #8888aa;
  --danger: #ff4466;
  --success: #44ff88;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Bricolage Grotesque', sans-serif;
  background: var(--bg-deep);
  color: var(--text-primary);
  min-height: 100vh;
  overflow-x: hidden;
}

body::before {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background:
    radial-gradient(ellipse 80% 60% at 20% 10%, rgba(255,225,53,0.04) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 80% 90%, rgba(255,225,53,0.03) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}

#root { position: relative; z-index: 1; }

.font-code { font-family: 'Fira Code', monospace; }

/* Banana wiggle */
@keyframes wiggle {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-12deg); }
  75% { transform: rotate(12deg); }
}
.banana-wiggle:hover { animation: wiggle 0.4s ease-in-out; display: inline-block; }

/* Pulsing generate button */
@keyframes pulse-banana {
  0%, 100% { box-shadow: 0 0 0 0 var(--banana-glow); }
  50% { box-shadow: 0 0 20px 8px var(--banana-glow); }
}
.btn-pulse { animation: pulse-banana 2.5s ease-in-out infinite; }
.btn-pulse:hover { animation: none; transform: scale(1.04); }

/* Spinning banana loader */
@keyframes spin-banana {
  0% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(180deg) scale(1.15); }
  100% { transform: rotate(360deg) scale(1); }
}
.spin-banana { animation: spin-banana 1s ease-in-out infinite; display: inline-block; }

/* Drop zone highlight */
.drop-active {
  border-color: var(--banana) !important;
  background: rgba(255,225,53,0.08) !important;
}

/* Peel reveal */
@keyframes peel-reveal {
  0% { clip-path: inset(100% 0 0 0); opacity: 0; }
  40% { clip-path: inset(50% 0 0 0); opacity: 0.6; }
  100% { clip-path: inset(0 0 0 0); opacity: 1; }
}
.peel-in { animation: peel-reveal 0.8s ease-out forwards; }

/* Fade in */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.fade-in { animation: fadeIn 0.4s ease-out; }

/* Toast slide */
@keyframes toast-slide {
  0% { transform: translateX(120%); opacity: 0; }
  10% { transform: translateX(0); opacity: 1; }
  90% { transform: translateX(0); opacity: 1; }
  100% { transform: translateX(120%); opacity: 0; }
}
.toast-anim { animation: toast-slide 3.5s ease-in-out forwards; }

/* Custom scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg-deep); }
::-webkit-scrollbar-thumb { background: var(--bg-hover); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--banana-dark); }

/* Range slider styling */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 8px;
  border-radius: 4px;
  background: linear-gradient(90deg, #4a7c3f, var(--banana), #8B4513);
  outline: none;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--banana);
  cursor: pointer;
  border: 3px solid var(--bg-deep);
  box-shadow: 0 0 8px var(--banana-glow);
}
input[type="range"]::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--banana);
  cursor: pointer;
  border: 3px solid var(--bg-deep);
}

/* Before/After slider */
.compare-container {
  position: relative;
  overflow: hidden;
  cursor: ew-resize;
}
.compare-container img {
  display: block;
  width: 100%;
  height: auto;
}

/* Chip hover */
.chip-btn {
  transition: all 0.2s ease;
}
.chip-btn:hover {
  background: var(--banana) !important;
  color: var(--bg-deep) !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px var(--banana-glow);
}

/* History strip */
.history-thumb {
  transition: all 0.2s ease;
  cursor: pointer;
}
.history-thumb:hover {
  transform: scale(1.1);
  border-color: var(--banana) !important;
  box-shadow: 0 0 12px var(--banana-glow);
}

/* Responsive */
@media (max-width: 768px) {
  .main-layout { flex-direction: column !important; }
  .panel { width: 100% !important; }
}