.pet-detail-container {
  display: flex;
  flex-direction: column;
  gap: 32px;
  margin-top: -50px;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.pet-main {
  flex: 2;
  background: #18181c;
  border-radius: 18px;
  padding: 24px;
  box-shadow: 0 4px 24px #0008;
}

.pet-header {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 18px;
}

.pet-img {
  width: 90px;
  height: 90px;
  border-radius: 12px;
  background: #23232b;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  border: 2px solid #23232b;
}

.pet-title { font-size: 1.4em; font-weight: bold; }
.pet-demand { font-size: 1em; font-weight: bold; color: #4b9cff; margin-left: 8px; }
.pet-table { width: 100%; margin-top: 12px; border-collapse: collapse; }
.pet-table th, .pet-table td { padding: 8px 10px; text-align: left; border-bottom: 1px solid #23232b; }
.pet-table th { color: #4b9cff; font-weight: 700; }
.pet-table td.value { font-weight: bold; color: #fff; }
.pet-meta { margin-top: 18px; font-size: 0.95em; color: #aaa; }
.back-btn {
  display: inline-block;
  margin-bottom: 18px;
  background: #1e90ff !important;
  color: #fff !important;
  border: none;
  border-radius: 10px;
  padding: 12px 22px;
  font-size: 1.05em;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 8px 30px rgba(30,144,255,0.18);
  transition: transform .12s, box-shadow .12s, background .12s;
}
.back-btn:hover { background: #1877d9 !important; transform: translateY(-2px); box-shadow: 0 12px 40px rgba(30,144,255,0.22); }

@media (max-width: 900px) {
  .pet-detail-container { gap: 18px; }
}