:root {
  --blush: #ffd8e4;
  --cream: #fff5ec;
  --lav: #e9def7;
  --mint: #d6f2e4;
  --rose: #e8577d;
  --rose-deep: #c73a63;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Fredoka', sans-serif;
  color: #6d3b4c;
  background:
    radial-gradient(circle at 15% 15%, var(--blush) 0%, transparent 45%),
    radial-gradient(circle at 85% 20%, var(--lav) 0%, transparent 45%),
    radial-gradient(circle at 50% 90%, var(--mint) 0%, transparent 50%),
    var(--cream);
  background-attachment: fixed;
  min-height: 100vh;
}

.plush-title {
  font-family: 'Baloo 2', cursive;
  font-weight: 800;
  color: var(--rose-deep);
  text-shadow: 2px 3px 0 rgba(255,255,255,0.7);
  letter-spacing: -0.5px;
}
.tagline { color: #b06079; font-weight: 500; }

.panel {
  background: rgba(255,255,255,0.72);
  backdrop-filter: blur(6px);
  border: 2px solid rgba(255,255,255,0.9);
  border-radius: 2rem;
  padding: 1.5rem;
  box-shadow: 0 14px 40px -12px rgba(199,58,99,0.28);
}

/* dropzone */
.dropzone {
  border: 3px dashed #f4a8bf;
  border-radius: 1.75rem;
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: rgba(255,246,250,0.6);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s;
  overflow: hidden;
}
.dropzone:hover { transform: scale(1.015); box-shadow: 0 0 0 4px rgba(244,168,191,0.3); }
.dropzone-active { border-color: var(--rose); background: rgba(255,216,228,0.7); box-shadow: 0 0 24px rgba(232,87,125,0.35); }
.preview-img { max-height: 260px; max-width: 100%; border-radius: 1.25rem; object-fit: contain; }
.bounce-icon { animation: bounce 2s infinite ease-in-out; }
@keyframes bounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }

/* controls */
.ctl-label { font-weight: 600; color: var(--rose-deep); margin-bottom: .5rem; font-size: .95rem; }
.chip {
  border-radius: 999px;
  padding: .4rem .9rem;
  font-size: .85rem;
  font-weight: 500;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all .15s ease;
}
.chip-off { background: #fff; color: #b06079; border-color: #ffe0ea; }
.chip-off:hover { border-color: #f4a8bf; transform: translateY(-1px); }
.chip-on { background: var(--rose); color: #fff; box-shadow: 0 5px 14px -4px rgba(232,87,125,0.6); }

.fluff-slider { accent-color: var(--rose); height: 8px; cursor: pointer; }

/* buttons */
.plushify-btn {
  font-family: 'Baloo 2', cursive;
  font-weight: 800;
  font-size: 1.15rem;
  color: #fff;
  background: linear-gradient(135deg, #ff7fa5, var(--rose-deep));
  border: none;
  border-radius: 1.25rem;
  padding: .85rem 1rem;
  cursor: pointer;
  box-shadow: 0 10px 24px -8px rgba(199,58,99,0.7);
  transition: transform .15s ease;
}
.plushify-btn:hover:not(:disabled) { transform: translateY(-2px) rotate(-1deg); }
.plushify-btn:active { transform: translateY(1px) scale(.98); }
.plushify-btn:disabled { opacity: .7; cursor: wait; }

.surprise-btn {
  font-size: 1.5rem;
  background: #fff;
  border: 2px solid #ffe0ea;
  border-radius: 1.25rem;
  padding: 0 1rem;
  cursor: pointer;
  transition: transform .15s ease;
}
.surprise-btn:hover { transform: rotate(15deg) scale(1.08); border-color: #f4a8bf; }

/* loader */
.yarn { animation: spinwob 1.4s infinite ease-in-out; }
@keyframes spinwob { 0%{transform:rotate(0) scale(1)} 50%{transform:rotate(180deg) scale(1.15)} 100%{transform:rotate(360deg) scale(1)} }

/* result */
.result-card { width: 100%; text-align: center; }
.result-img {
  width: 100%;
  max-height: 400px;
  object-fit: contain;
  border-radius: 1.5rem;
  box-shadow: 0 12px 30px -10px rgba(199,58,99,0.4);
  cursor: zoom-in;
  background: #fff;
}
.cmp-cap { font-size: .8rem; color: #b06079; margin-top: .3rem; font-weight: 600; }

.act-btn {
  font-family: 'Fredoka', sans-serif;
  font-weight: 600;
  background: #fff;
  color: var(--rose-deep);
  border: 2px solid #ffe0ea;
  border-radius: 999px;
  padding: .5rem 1.1rem;
  cursor: pointer;
  transition: all .15s ease;
  font-size: .9rem;
}
.act-btn:hover { border-color: #f4a8bf; transform: translateY(-1px); }
.act-primary { background: var(--rose); color: #fff; border-color: var(--rose); }

/* error */
.error-box {
  margin-top: 1rem;
  background: #fff0f3;
  border: 2px solid #ffc2d2;
  color: var(--rose-deep);
  border-radius: 1rem;
  padding: .8rem 1.2rem;
  text-align: center;
  font-weight: 500;
}

/* gallery */
.gallery-title {
  font-family: 'Baloo 2', cursive;
  font-weight: 800;
  color: var(--rose-deep);
  font-size: 1.6rem;
  text-align: center;
  margin-bottom: 1.2rem;
}
.plush-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 1rem;
}
.plush-card {
  position: relative;
  aspect-ratio: 1;
  border-radius: 1.25rem;
  overflow: hidden;
  cursor: pointer;
  border: 3px solid #fff;
  box-shadow: 0 8px 20px -8px rgba(199,58,99,0.35);
  transition: transform .18s ease;
  background: #fff;
}
.plush-card:hover { transform: translateY(-4px) scale(1.03); }
.card-tag {
  position: absolute;
  bottom: 6px; left: 6px;
  background: rgba(199,58,99,0.85);
  color: #fff;
  font-size: .65rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
}
.empty-state {
  text-align: center;
  color: #b06079;
  font-weight: 500;
  padding: 2.5rem;
  background: rgba(255,255,255,0.5);
  border: 2px dashed #f4a8bf;
  border-radius: 1.5rem;
}

/* footer */
.footer {
  text-align: center;
  padding: 2rem 1rem 2.5rem;
  color: #b06079;
  font-weight: 500;
}
.remix-link {
  display: inline-block;
  margin-top: .4rem;
  color: var(--rose-deep);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 2px dotted var(--rose);
}
.remix-link:hover { color: var(--rose); }

/* toast */
.toast {
  position: fixed;
  bottom: 24px; left: 50%;
  transform: translateX(-50%);
  background: var(--rose-deep);
  color: #fff;
  padding: .8rem 1.6rem;
  border-radius: 999px;
  font-weight: 600;
  box-shadow: 0 10px 30px -6px rgba(199,58,99,0.6);
  z-index: 60;
  animation: pop .3s ease;
}
@keyframes pop { from{transform:translateX(-50%) translateY(20px); opacity:0} to{transform:translateX(-50%) translateY(0); opacity:1} }

/* lightbox */
.lightbox {
  position: fixed; inset: 0;
  background: rgba(93,32,52,0.75);
  backdrop-filter: blur(6px);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  z-index: 80; padding: 1rem;
  animation: fade .2s ease;
}
@keyframes fade { from{opacity:0} to{opacity:1} }
.lightbox-img {
  max-width: 90vw; max-height: 78vh;
  border-radius: 1.5rem;
  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
  background: #fff;
}

.hidden { display: none; }