@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600;700&family=Poppins:wght@400;500;600;700&display=swap');

:root {
  --cream: #FFF6EC;
  --card: #FFFFFF;
  --pink: #EC5990;
  --pink-soft: #FDE4EE;
  --plum: #5B2333;
  --gold: #E8A33D;
  --gold-soft: #FBEBD1;
  --line: #F1DFCF;
  --shadow: 0 10px 24px -12px rgba(91, 35, 51, 0.25);
  --radius: 20px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--cream);
  color: var(--plum);
  font-family: 'Poppins', sans-serif;
  -webkit-tap-highlight-color: transparent;
}

h1, h2, h3, .display {
  font-family: 'Fredoka', sans-serif;
  margin: 0;
}

button {
  font-family: 'Poppins', sans-serif;
  cursor: pointer;
  border: none;
}

/* ---------- Drip signature (melting-topping edge) ---------- */
.drip {
  position: relative;
  overflow: visible;
}
.drip::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -14px;
  height: 22px;
  background:
    radial-gradient(circle at 6% 0, transparent 10px, var(--pink) 11px) 0 -10px / 28px 22px repeat-x,
    radial-gradient(circle at 55% 0, transparent 9px, var(--pink) 10px) 0 -10px / 28px 22px repeat-x;
  -webkit-mask: none;
  clip-path: none;
}

/* Simpler, reliable wave drip using SVG-esque border trick */
.drip-edge {
  display: block;
  width: 100%;
  height: 18px;
  fill: var(--pink);
}

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb { background: var(--pink); border-radius: 10px; }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
}
.pill.new { background: var(--pink-soft); color: var(--pink); }
.pill.prep { background: var(--gold-soft); color: #9a6a10; }
.pill.done { background: #E1F3E6; color: #1f7a3d; }