:root{--bg:#fff8fd;--card:#fff;--ink:#4b3a4b;--muted:#7d6b7d;--accent:#c95ba7;--accent2:#f5cde8;--line:#efddea}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:linear-gradient(#fff8fd,#fff);color:var(--ink)}
.hero{display:flex;justify-content:space-between;gap:20px;align-items:center;padding:44px max(20px,6vw);background:linear-gradient(135deg,#f7d3ea,#e9dcff)}
.hero h1{font-size:clamp(2.2rem,6vw,4rem);margin:.2rem 0}.eyebrow{letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:#8b4c7d}
.nav{position:sticky;top:0;z-index:5;display:flex;gap:18px;justify-content:center;flex-wrap:wrap;padding:12px;background:#ffffffdd;backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav a{color:var(--ink);text-decoration:none;font-weight:700}
main{max-width:1100px;margin:auto;padding:20px}.section{margin:34px 0}.section-head{display:flex;align-items:center;justify-content:space-between;gap:14px}
.grid{display:grid;gap:18px}.grid.two{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}.grid.three{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.pet-card,.card{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:18px;box-shadow:0 8px 24px #8f628515}
.pet-card{text-align:center}.emoji{font-size:3rem}.card img{width:100%;height:210px;object-fit:cover;border-radius:16px;background:#f4edf4}
.card h3{margin-bottom:6px}.meta,.muted{color:var(--muted)}.price{font-size:1.35rem;font-weight:800;color:var(--accent)}
button,.file-label{border:0;border-radius:999px;padding:11px 18px;font-weight:800;cursor:pointer;display:inline-block}
.primary{background:var(--accent);color:white}.secondary{background:white;color:var(--ink);border:1px solid var(--line)}
.edit-only{display:none}body.editing .edit-only{display:inline-block}
.delete-btn{margin-top:12px;background:#fff0f3;color:#a4294b;border:1px solid #f5cad5}
.empty{padding:20px;border:2px dashed var(--line);border-radius:16px;color:var(--muted)}
dialog{border:0;border-radius:22px;padding:0;max-width:520px;width:calc(100% - 30px)}dialog::backdrop{background:#2c163066}
.form{padding:24px;display:grid;gap:14px}.form input,.form select,.form textarea{width:100%;padding:13px;border:1px solid var(--line);border-radius:12px;font:inherit}.form textarea{min-height:120px;resize:vertical}.actions{display:flex;justify-content:flex-end;gap:10px}
footer{text-align:center;padding:35px;border-top:1px solid var(--line)}
@media(max-width:640px){.hero{align-items:flex-start;flex-direction:column}.section-head{align-items:flex-start;flex-direction:column}.nav{justify-content:flex-start;overflow-x:auto;flex-wrap:nowrap}}