.pet-body { background: linear-gradient(180deg, #fff8f0 0, #fff 38%, #f7fff9 72%, #fff8f3 100%); }
.pet-person-link { padding: 10px 16px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink); background: #fff; text-decoration: none; font-weight: 800; }
.pet-hero { min-height: 600px; padding: 68px 0 72px; display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: 54px; }
.pet-hero-copy h1 { margin: 0; font-size: clamp(48px, 6.5vw, 78px); line-height: 1; letter-spacing: -.065em; }
.pet-hero-copy h1 em { color: var(--peach); font-style: normal; }
.pet-hero-copy > p:not(.eyebrow) { max-width: 560px; margin: 24px 0 30px; color: var(--muted); line-height: 1.8; }
.pet-hero-pair { min-height: 500px; position: relative; }
.pet-hero-pair figure { position: absolute; width: 58%; margin: 0; padding: 16px; border: 1px solid #fff; border-radius: 34px; background: #ffe5d8; box-shadow: 0 28px 65px #5d39261f; transform: rotate(-5deg); }
.pet-hero-pair figure:last-child { right: 0; top: 120px; background: #e2f3e9; transform: rotate(6deg); }
.pet-hero-pair img { display: block; width: 100%; aspect-ratio: 1; object-fit: contain; }
.pet-hero-pair figcaption { padding: 9px 4px 2px; text-align: center; font-weight: 900; }
.pet-promise { border-block: 1px solid var(--line); background: #ffffffc9; }
.pet-promise-grid { min-height: 72px; display: grid; grid-template-columns: repeat(4, 1fr); align-items: center; gap: 14px; color: var(--muted); text-align: center; font-size: 14px; }
.pet-builder { padding: 90px 0 70px; }
.pet-type-tabs { margin: 34px auto 26px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.pet-type { min-height: 130px; padding: 20px; display: grid; justify-items: start; align-content: center; gap: 5px; border: 1px solid var(--line); border-radius: 26px; background: #fff; cursor: pointer; text-align: left; transition: .18s; }
.pet-type b { font-size: 30px; }.pet-type span { font-size: 21px; font-weight: 950; }.pet-type small { color: var(--muted); }
.pet-type.selected { border: 2px solid var(--ink); box-shadow: 0 15px 34px #35251d17; transform: translateY(-3px); }
.pet-tier { max-width: 850px; margin: 22px auto 6px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.pet-tier button { min-height: 92px; padding: 15px; display: grid; gap: 4px; border: 1px solid var(--line); border-radius: 20px; background: #fff; cursor: pointer; }
.pet-tier span { font-weight: 900; }.pet-tier strong { color: var(--peach-dark); font-size: 23px; }.pet-tier small { color: var(--muted); }
.pet-tier button.selected { border: 2px solid var(--peach); background: #fff4ee; }
.other-tier { grid-template-columns: repeat(2, 1fr); max-width: 600px; }
.selection-counter { text-align: center; color: var(--muted); font-size: 14px; }
.custom-note { max-width: 760px; margin: 15px auto 0; padding: 15px 18px; border-radius: 16px; background: #fff4d8; color: #70572f; line-height: 1.7; font-size: 13px; }
.pet-groups { margin-top: 28px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.pet-group-card { position: relative; overflow: hidden; display: grid; grid-template-columns: 180px 1fr; gap: 20px; padding: 18px; border: 1px solid var(--line); border-radius: 28px; background: #fff; text-align: left; transition: .18s; }
.pet-group-card.selected { border: 2px solid var(--peach); box-shadow: 0 16px 35px #56312016; transform: translateY(-3px); }
.pet-group-card.selected::after { content: "✓ 已选择"; position: absolute; top: 12px; right: 12px; padding: 6px 10px; border-radius: 999px; background: var(--peach); color: #fff; font-size: 12px; font-weight: 900; }
.pet-group-card img { display: block; width: 180px; height: 180px; object-fit: contain; border-radius: 20px; background-image: linear-gradient(45deg,#eee 25%,transparent 25%),linear-gradient(-45deg,#eee 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#eee 75%),linear-gradient(-45deg,transparent 75%,#eee 75%); background-size: 22px 22px; background-position: 0 0,0 11px,11px -11px,-11px 0; }
.pet-preview-wrap small { display: block; margin-top: 7px; color: var(--muted); text-align: center; font-size: 11px; }
.pet-group-summary { width: 100%; padding: 0; border: 0; background: transparent; color: inherit; cursor: pointer; text-align: left; }
.pet-group-card h3 { margin: 5px 0 4px; font-size: 22px; }.pet-group-card p { margin: 0 0 10px; color: var(--muted); font-size: 13px; line-height: 1.6; }
.pet-action-list { margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; list-style: none; }
.pet-action-list li { margin: 0; padding: 0; }
.pet-action { padding: 5px 8px; border: 1px solid transparent; border-radius: 999px; background: #f7f2ef; color: var(--ink); cursor: pointer; font: inherit; font-size: 11px; white-space: nowrap; transition: .15s; }
.pet-action:hover,.pet-action:focus-visible { border-color: #ffae9e; background: #fff4ee; outline: none; }.pet-action.active { border-color: var(--peach); background: var(--peach); color: #fff; }
.other-actions { grid-column: 1 / -1; cursor: default; }
.other-actions-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; }
.other-action { min-height: 48px; display: flex; align-items: center; gap: 6px; padding: 8px; border: 1px solid var(--line); border-radius: 14px; background: #fff; cursor: pointer; font-size: 11px; white-space: nowrap; }
.other-action input { width: 16px; height: 16px; flex: 0 0 auto; margin: 0; }.other-action span { white-space: nowrap; }
.other-action input { accent-color: var(--peach); }.other-action.selected { border-color: var(--peach); background: #fff4ee; }
.pet-intake { margin-top: 72px; padding: 34px; border: 1px solid var(--line); border-radius: 32px; background: #fffaf7; }
.pet-intake .compact h2 { font-size: clamp(30px, 4vw, 44px); }
.pet-fields { margin-top: 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pet-fields label { display: grid; gap: 7px; color: var(--muted); font-size: 13px; font-weight: 800; }.pet-fields .wide { grid-column: 1 / -1; }
.pet-fields input,.pet-fields textarea,.pet-fields select { width: 100%; min-width: 0; padding: 13px 14px; border: 1px solid var(--line); border-radius: 14px; background: #fff; color: var(--ink); font: inherit; }
.pet-fields textarea { min-height: 88px; resize: vertical; }.owner-fields { margin-top: 20px; padding: 20px; border-radius: 22px; background: #fff0e8; }
.owner-character-lookup { padding: 16px; border: 1px solid #f0d7ce; border-radius: 18px; background: #fff; }
.owner-character-lookup > p { margin: 6px 0 12px; color: var(--muted); font-size: 12px; font-weight: 400; }
.owner-character-search { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.owner-character-search button { min-width: 84px; padding: 0 17px; border: 0; border-radius: 13px; background: var(--ink); color: #fff; cursor: pointer; font-weight: 900; }
.saved-character-list { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 11px; }
.saved-character-list:empty { display: none; }
.saved-character-list button { padding: 7px 12px; border: 1px solid var(--line); border-radius: 999px; background: #fff7f3; color: var(--ink); cursor: pointer; font-size: 12px; }
.saved-character-list button.selected { border-color: var(--peach); background: var(--peach); color: #fff; }
.owner-character-status { min-height: 1.5em; margin: 10px 0 0 !important; font-size: 12px !important; }.owner-character-status.found { color: #18794e !important; font-weight: 800 !important; }.owner-character-status.not-found { color: #a14b2d !important; }
.pet-error { min-height: 1.5em; color: #b42318; text-align: center; font-size: 13px; }.pet-pay { margin-top: 8px; }
.pet-aftercare { padding: 0 0 80px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.pet-aftercare article { padding: 25px; border: 1px solid var(--line); border-radius: 24px; background: #fff; }.pet-aftercare b { color: var(--peach); }.pet-aftercare h3 { margin: 28px 0 7px; }.pet-aftercare p { margin: 0; color: var(--muted); line-height: 1.7; font-size: 14px; }
.pet-order-dialog { width: min(500px, calc(100% - 28px)); max-height: calc(100dvh - 30px); overflow-y: auto; padding: 34px; border: 0; border-radius: 28px; text-align: center; color: var(--ink); }.pet-order-dialog::backdrop { background: #21171399; backdrop-filter: blur(8px); }
.pet-order-dialog h2 { margin: 10px 0; }.pet-secondary { margin: 10px 0 0; padding: 11px 15px; border: 1px solid var(--line); border-radius: 13px; background: #fff; cursor: pointer; }
.pet-contact { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }.pet-contact img { display: block; width: 190px; max-width: 100%; margin: 18px auto 5px; border-radius: 13px; }
.pet-production{margin-top:18px;padding:18px;border-radius:20px;background:#fff}.pet-production h3{margin:0 0 8px}.pet-production-track{height:10px;background:#eee8e4;border-radius:999px;overflow:hidden}.pet-production-track span{display:block;width:0;height:100%;background:linear-gradient(90deg,#ff7864,#ffad75);transition:width .25s}.pet-production-results{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:14px 0}.pet-production-results a{padding:9px;border-radius:10px;background:#fff4ee;color:#3c302b;text-decoration:none;font-size:13px;overflow-wrap:anywhere}
@media (max-width: 800px) {
  .pet-hero { grid-template-columns: 1fr; gap: 20px; padding-top: 36px; }.pet-hero-pair { min-height: 430px; }.pet-promise-grid { grid-template-columns: repeat(2,1fr); padding: 17px 0; }.pet-groups { grid-template-columns: 1fr; }.other-actions { grid-column: auto; }.other-actions-grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 560px) {
  .pet-hero-copy h1 { font-size: 46px; }.pet-hero-pair { min-height: 330px; }.pet-hero-pair figure { width: 62%; padding: 9px; border-radius: 24px; }.pet-hero-pair figure:last-child { top: 88px; }.pet-type-tabs,.pet-tier,.other-tier,.pet-fields,.pet-aftercare { grid-template-columns: 1fr; }.pet-type { min-height: 94px; }.pet-tier button { min-height: 78px; }.pet-group-card { grid-template-columns: 112px 1fr; padding: 13px; gap: 13px; }.pet-group-card img { width: 112px; height: 112px; }.pet-group-card h3 { padding-right: 70px; font-size: 18px; }.pet-action-list { grid-column: 1/-1; }.pet-intake { padding: 24px 16px; }.pet-fields .wide { grid-column: auto; }.other-actions-grid { grid-template-columns: 1fr 1fr; }.pet-promise-grid { font-size: 12px; }
}
@media (max-width: 380px) { .owner-character-search { grid-template-columns: 1fr; }.owner-character-search button { min-height: 44px; } }