:root{
  --accent:#fff;
  --accent-dark:#d63031;
  --bg-gradient:linear-gradient(135deg,#2c3e50,#4ca1af);
  --text-light:#ecf0f1;
  --muted:#b2bec3;
  --card-bg:#2d3436;
  --card-shadow:0 8px 40px rgba(0,0,0,0.4);
}
*{
	box-sizing:border-box;
	margin:0;
	padding:0
}
body{
  font-family: 'Poppins', sans-serif;
  background:var(--bg-gradient);
  min-height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
  padding:20px;
  color:var(--text-light);
}
.card{
  width:100%;
  max-width:1000px;
  background:var(--card-bg);
  border-radius:24px;
  box-shadow:var(--card-shadow);
  display:grid;
  grid-template-columns:1fr 1fr;
  overflow:hidden;
}
.left{
  background:linear-gradient(135deg,#485563,#29323c);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:40px;
  text-align:center;
}
.photo{
  width:240px;
  height:240px;
  border-radius:50%;
  overflow:hidden;
  border:6px solid var(--accent);
  box-shadow:0 6px 20px rgba(0,0,0,0.6);
  margin-bottom:20px;
}
.photo img{
	width:100%;
	height:100%;
	object-fit:cover
}
.dog-name{
  font-size:28px;
  font-weight:700;
  margin-bottom:10px;
  color:var(--accent);
}
.dog-breed{
  font-size:16px;
  font-weight:500;
  color:var(--muted);
}

.right{
  padding:40px;
  display:flex;
  flex-direction:column;
  gap:16px;
}
h2{
  font-size:20px;
  margin-bottom:10px;
  color:var(--accent-dark);
}
.field{display:flex;flex-direction:column}
.label{font-size:12px;text-transform:uppercase;color:var(--muted);margin-bottom:4px;letter-spacing:1px}
.value{font-size:16px;font-weight:600;color:var(--text-light)}

.controls{
  display:flex;
  gap:12px;
  margin-top:20px;
}
.btn{
  flex:1;
  padding:14px;
  border-radius:12px;
  border:none;
  font-weight:600;
  cursor:pointer;
  transition:.2s;
  font-size:15px;
}
.btn.call{background:var(--accent);color:white}
.btn.call:hover{background:var(--accent-dark)}
.btn.report{background:#636e72;color:white}
.btn.report:hover{background:#444}

.mapwrap{
  margin-top:20px;
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 4px 20px rgba(0,0,0,0.3);
  flex:1;
}
#map{width:100%;height:260px}

@media (max-width:900px){
  .card{grid-template-columns:1fr}
  .left{padding:20px}
  .right{padding:20px}
}