/* 宠物主题曲（/pet）：在 vent.css 的基础上加照片和性格标签 */
.pet-top { display: grid; grid-template-columns: 168px 1fr; gap: 20px; align-items: start; margin-bottom: 6px; }
.pet-photo { position: relative; display: flex; align-items: center; justify-content: center; width: 168px; height: 168px; border-radius: 20px; border: 1.5px dashed var(--line-2); background: var(--bg-2); cursor: pointer; overflow: hidden; transition: border-color .15s, background .15s; }
.pet-photo:hover, .pet-photo.drag { border-color: var(--accent); background: var(--accent-soft); }
.pet-photo.has { border-style: solid; border-color: var(--line); }
.pet-photo img { width: 100%; height: 100%; object-fit: cover; }
.pet-photo input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.pet-photo-ph { display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--text-2); font: 600 14px/1.2 var(--font-body); }
.pet-photo-ph b { font-size: 30px; font-weight: 400; }
.pet-top-fields .field:last-of-type { margin-bottom: 8px; }
.pet-photo-clear { font-size: 13px; }
.pet-traits { display: flex; flex-wrap: wrap; gap: 8px; }
.pet-trait { font-size: 13.5px; padding: 8px 13px; }
.pet-trait[aria-pressed=true] { background: var(--accent-soft); color: var(--accent-text); border-color: color-mix(in srgb, var(--accent) 55%, transparent); font-weight: 600; }
#petStory { font-size: 15px; min-height: 84px; }
.pet .vent-cover { width: 96px; height: 96px; border-radius: 18px; }
.pet-kind { max-width: 320px; }
@media (max-width: 640px) {
  .pet-top { grid-template-columns: 1fr; justify-items: center; }
  .pet-photo { width: 150px; height: 150px; }
  .pet-top-fields { width: 100%; }
  .pet-kind { max-width: none; }
}