:root{
  --bg:#0f1115; --card:#171a21; --text:#e6e6e6; --muted:#aab3c2; --accent:#7cc4ff;
  --radius:18px; --shadow:0 8px 24px rgba(0,0,0,.28);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial}
a{color:var(--accent);text-decoration:none}
.wrap{max-width:1100px;margin:0 auto;padding:24px}
header{padding:36px 0 8px;border-bottom:1px solid #212634;background:linear-gradient(180deg,rgba(124,196,255,.12),transparent)}
header h1{margin:0 0 6px;font-size:38px}
.subtitle{margin:0;color:var(--muted)}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:18px;margin-top:20px}
.card{grid-column:span 12;background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;display:grid;grid-template-columns:360px 1fr}
.card img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;background:#222}
.card-body{padding:18px 20px}
.card h2{margin:0 0 10px}
.breed{margin:.2rem 0 1rem;color:var(--accent)}
.footer{color:var(--muted);text-align:center;margin-top:24px;border-top:1px solid #212634;padding:18px 0}
@media (max-width:980px){ .card{grid-template-columns:1fr} }