:root{
  --bg1: #fffaf6;
  --bg2: #f0fcff;
  --card: #ffffff;
  --accent: #6cc3a1;
  --accent2: #ffd36b;
  --muted: #4b5563;
  --radius: 12px;
  --shadow: 0 12px 28px rgba(20,30,60,0.06);
}
body { font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; background: linear-gradient(135deg,var(--bg1),var(--bg2)); margin:0; padding:18px; }
.puppy-root{max-width:820px;margin:12px auto;padding:16px}
.puppy-title{font-size:22px;text-align:center;margin:6px 0 12px; background: linear-gradient(90deg,var(--accent),var(--accent2)); -webkit-background-clip:text; color:transparent}
.puppy-card{background:var(--card);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow);border:1px solid rgba(100,140,160,0.06)}
.puppy-intro{color:var(--muted);margin-bottom:12px}
.puppy-form label{display:block;margin:10px 0;font-weight:600;color:#333}
.puppy-form input[type="date"], .puppy-form input[type="number"], .puppy-form select{width:100%;padding:12px;border-radius:10px;border:1px solid rgba(110,140,160,0.08);box-sizing:border-box;font-size:14px}
.puppy-actions{display:flex;gap:10px;margin-top:12px}
.puppy-btn{flex:1;padding:12px;border-radius:10px;border:none;background:linear-gradient(90deg,var(--accent),var(--accent2));color:#fff;font-weight:700;cursor:pointer}
.puppy-btn-ghost{background:transparent;border:1px solid rgba(100,140,160,0.12);color:var(--accent)}
.puppy-result{margin-top:14px;padding:14px;border-radius:10px;background:linear-gradient(180deg,rgba(108,195,161,0.03),rgba(255,211,107,0.02));border:1px solid rgba(108,195,161,0.06)}
.puppy-est{font-size:18px;color:#2a6f5a;font-weight:700;margin:6px 0}
.puppy-note{margin-top:10px;color:var(--muted);font-weight:600}
.puppy-disclaimer{margin-top:12px;font-size:13px;color:#666}

@media(max-width:640px){
  .puppy-actions{flex-direction:column}
  .puppy-root{padding:10px}
}