:root{--gap:clamp(12px,2vw,20px);--radius:16px;--brand:#144e93;}
*{box-sizing:border-box} body{margin:0;font:16px/1.5 system-ui,Segoe UI,Roboto,Arial}
a{color:var(--brand);text-decoration:none}
.container{max-width:1200px;margin:0 auto;padding:var(--gap)}
.header,.footer{background:#0f2450;color:#fff}
.header a{color:#fff}
.nav{display:flex;gap:16px;align-items:center}
.grid{display:grid;gap:var(--gap);grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.card{background:#fff;border-radius:var(--radius);box-shadow:0 6px 20px rgba(0,0,0,.06);overflow:hidden}
.card .body{padding:var(--gap)}
.badges{display:flex;gap:8px;flex-wrap:wrap}
.badge{font-size:.8rem;background:#eef;padding:6px 10px;border-radius:999px}
.btn{display:inline-block;padding:12px 16px;border-radius:10px;border:1px solid var(--brand)}
.btn.primary{background:var(--brand);color:#fff;border:none}
.input{width:100%;padding:12px;border:1px solid #cbd5e1;border-radius:10px}
.form-row{display:grid;gap:10px;grid-template-columns:1fr 1fr}
@media(max-width:640px){.form-row{grid-template-columns:1fr}}
.pet-cover{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.alert{background:#fff3cd;border:1px solid #ffe69c;padding:12px;border-radius:10px;margin-bottom:12px}