:root {
  --teal: #14B8A6;
  --teal-dark: #0D9488;
  --cream: #F0FDFA;
  --peach: #FB923C;
}
* { font-family: 'Vazirmatn', sans-serif; }
body {
  margin: 0;
  background:
    radial-gradient(circle at 10% 20%, rgba(251,146,60,.08), transparent 40%),
    radial-gradient(circle at 90% 80%, rgba(20,184,166,.10), transparent 45%),
    var(--cream);
}
.hero { background: linear-gradient(120deg, #2DD4BF, var(--teal-dark) 60%, #0F766E); border-radius: 0 0 2rem 2rem; }
.paws {
  position: absolute; inset: 0; opacity: .12; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Ctext x='10' y='40' font-size='26'%3E🐾%3C/text%3E%3Ctext x='55' y='85' font-size='18'%3E🐾%3C/text%3E%3C/svg%3E");
}
.card { background: #fff; border-radius: 1.25rem; box-shadow: 0 6px 24px -10px rgba(13,148,136,.25); border: 1px solid #CCFBF1; }
.chip { transition: all .18s ease; }
.chip-on { background: var(--teal-dark); color: #fff; border-color: var(--teal-dark); transform: scale(1.07); box-shadow: 0 4px 12px -4px rgba(13,148,136,.6); }
.note { background: #FEFCE8 !important; }
.btn-main { background: linear-gradient(135deg, var(--teal), var(--teal-dark)); box-shadow: 0 8px 20px -8px rgba(13,148,136,.7); transition: transform .15s, box-shadow .15s; }
.btn-main:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -8px rgba(13,148,136,.8); }
.wiggle { display: inline-block; animation: wiggle 2.4s ease-in-out infinite; }
@keyframes wiggle { 0%,100% { transform: rotate(0); } 20% { transform: rotate(-14deg); } 40% { transform: rotate(10deg); } 60% { transform: rotate(-4deg); } }
.fade-in { animation: fade .4s ease both; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.slide-in { animation: slide .45s cubic-bezier(.2,.8,.2,1) both; }
@keyframes slide { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.removing { animation: shrink .35s ease forwards; }
@keyframes shrink { to { opacity: 0; transform: scale(.85); } }
.pop { animation: pop .25s cubic-bezier(.2,1.4,.4,1) both; }
@keyframes pop { from { transform: scale(.85); opacity: 0; } to { transform: none; opacity: 1; } }
.toast { animation: toast .35s ease both; }
@keyframes toast { from { opacity: 0; transform: translate(-50%, 20px); } to { opacity: 1; transform: translate(-50%, 0); } }
.sleepy { animation: breathe 3s ease-in-out infinite; }
@keyframes breathe { 50% { transform: scale(1.06); } }