.pet-tool-page {
  --child-accent: #718479;
  --child-accent-dark: #4d6358;
  --child-accent-soft: #edf3ef;
  --child-warm: #cb9475;
  background: radial-gradient(circle at 75% 7%, rgba(184, 209, 193, .26), transparent 28%), linear-gradient(135deg, #fffdf8 0%, #f5f1e9 52%, #eef4f0 100%);
}

.pet-tool-page.is-pet-together {
  --child-accent: #9a7c7d;
  --child-accent-dark: #71585d;
  --child-accent-soft: #f5eaeb;
  --child-warm: #d09a78;
  background: radial-gradient(circle at 76% 7%, rgba(230, 192, 190, .25), transparent 29%), linear-gradient(135deg, #fffdf8 0%, #f8eeee 100%);
}

.pet-tool-page.is-pet-humanize {
  --child-accent: #80738e;
  --child-accent-dark: #5f536d;
  --child-accent-soft: #efebf4;
  --child-warm: #c68e79;
  background: radial-gradient(circle at 75% 7%, rgba(201, 187, 218, .25), transparent 29%), linear-gradient(135deg, #fffdf8 0%, #f1edf5 100%);
}

.pet-tool-page.is-pet-cartoon {
  --child-accent: #6f8c87;
  --child-accent-dark: #506d68;
  --child-accent-soft: #e8f2ef;
  --child-warm: #d09b73;
  background: radial-gradient(circle at 75% 7%, rgba(181, 219, 208, .25), transparent 29%), linear-gradient(135deg, #fffdf8 0%, #edf5f1 100%);
}

.pet-tool-settings-card { padding-top: 23px; }
.pet-upload-section h2 { margin-bottom: 10px; }
.pet-template-hint { margin: -3px 0 11px; color: #8f877e; font-size: 10px; line-height: 1.55; }
.pet-input-mode { margin: 0 0 12px; }
.pet-input-mode .portrait-chip { min-height: 34px; font-size: 11px; }
.pet-upload-block { padding: 11px; border: 1px solid #e6ddd2; border-radius: 14px; background: rgba(255,255,255,.58); }
.pet-upload-block + .pet-upload-block { margin-top: 11px; }
.pet-upload-label { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 9px; }
.pet-upload-label strong { color: #59534d; font-size: 12px; }
.pet-upload-label small { color: #968d84; font-size: 10px; }
.pet-photo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); min-height: 90px; gap: 8px; }
.pet-photo-grid .portrait-photo-card,
.pet-photo-grid .portrait-photo-add { min-height: 88px; aspect-ratio: 4 / 3; }
.pet-upload-summary { grid-template-columns: 145px minmax(0, 1fr); gap: 11px; margin-top: 9px; }
.pet-upload-summary .change-photo-button { width: 145px; height: 39px; font-size: 12px; }
.pet-upload-summary strong { font-size: 11px; }
.pet-upload-summary small { font-size: 9px; }

.pet-tool-page:not(.is-pet-together) .pet-upload-block { padding: 0; border: 0; background: transparent; }
.pet-tool-page:not(.is-pet-together) .pet-upload-label { display: none; }
.pet-tool-page:not(.is-pet-together) .pet-photo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); min-height: 116px; }
.pet-tool-page.is-pet-portrait .pet-photo-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pet-tool-page:not(.is-pet-together) .pet-photo-grid .portrait-photo-card,
.pet-tool-page:not(.is-pet-together) .pet-photo-grid .portrait-photo-add { min-height: 0; aspect-ratio: 4 / 5; }
.portrait-photo-card .pet-photo-replace { top: auto; right: 5px; bottom: 5px; color: #fff; border-color: rgba(255,255,255,.38); background: rgba(52,61,55,.72); }
.pet-portrait-upload-tips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 10px; }
.pet-portrait-upload-tips span { display: flex; align-items: center; justify-content: center; gap: 4px; min-width: 0; padding: 7px 4px; border: 1px solid #e7dfd3; border-radius: 9px; color: #7f766d; background: #faf8f3; font-size: 9px; white-space: nowrap; }
.pet-portrait-upload-tips svg { width: 12px; height: 12px; color: var(--child-accent-dark); }

.pet-template-grid .child-template-icon { color: var(--child-accent-dark); background: var(--child-accent-soft); }
.pet-tool-page.is-pet-portrait .pet-template-grid { gap: 9px; }
.pet-portrait-theme-card.child-template-card { grid-template-columns: 58px minmax(0, 1fr); min-height: 78px; padding: 9px; column-gap: 10px; border-color: #e4dbcf; overflow: hidden; }
.pet-portrait-theme-card .pet-theme-preview { position: relative; grid-row: 1 / span 2; display: grid; place-items: center; width: 58px; height: 58px; overflow: hidden; border-radius: 12px; color: rgba(255,255,255,.95); box-shadow: inset 0 0 0 1px rgba(255,255,255,.34); }
.pet-portrait-theme-card .pet-theme-preview::before,
.pet-portrait-theme-card .pet-theme-preview::after { content: ""; position: absolute; border-radius: 50%; background: rgba(255,255,255,.22); }
.pet-portrait-theme-card .pet-theme-preview::before { width: 44px; height: 44px; right: -18px; top: -14px; }
.pet-portrait-theme-card .pet-theme-preview::after { width: 28px; height: 28px; left: -12px; bottom: -10px; }
.pet-portrait-theme-card .pet-theme-preview svg { position: relative; z-index: 1; width: 23px; height: 23px; filter: drop-shadow(0 2px 4px rgba(44,46,42,.16)); }
.pet-portrait-theme-card strong { font-size: 12px; }
.pet-portrait-theme-card small { color: #91887d; font-size: 9px; line-height: 1.35; }
.pet-portrait-theme-card[data-template="studio_classic"] .pet-theme-preview { background: linear-gradient(145deg, #343d4b, #b1a18f); }
.pet-portrait-theme-card[data-template="forest_outdoor"] .pet-theme-preview { background: linear-gradient(145deg, #47705b, #9eb68b); }
.pet-portrait-theme-card[data-template="home_lifestyle"] .pet-theme-preview { background: linear-gradient(145deg, #b17f62, #e3c9aa); }
.pet-portrait-theme-card[data-template="birthday_memory"] .pet-theme-preview { background: linear-gradient(145deg, #b96f72, #edb6a5); }
.pet-portrait-theme-card[data-template="garden_picnic"] .pet-theme-preview { background: linear-gradient(145deg, #77906e, #e3bd93); }
.pet-portrait-theme-card[data-template="city_street"] .pet-theme-preview { background: linear-gradient(145deg, #46576a, #a58d7c); }
.pet-portrait-theme-card[data-template="seaside_vacation"] .pet-theme-preview { background: linear-gradient(145deg, #4f91a8, #e7b58a); }
.pet-portrait-theme-card[data-template="festival_memory"] .pet-theme-preview { background: linear-gradient(145deg, #a9453e, #d8a95c); }
.pet-portrait-theme-card.is-selected .pet-theme-preview { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--child-accent); }
.pet-tool-page.is-pet-cartoon .pet-template-grid { display: block; }
.pet-style-category + .pet-style-category { margin-top: 14px; }
.pet-style-category > h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; color: #6a756f; font-size: 11px; font-weight: 700; letter-spacing: .04em; }
.pet-style-category > h3::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(111,140,135,.25), transparent); }
.pet-style-category-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.pet-style-card.child-template-card { grid-template-columns: 64px minmax(0, 1fr); grid-template-rows: 1fr; min-height: 96px; padding: 8px; column-gap: 10px; overflow: hidden; }
.pet-style-preview { position: relative; display: block; width: 64px; height: 80px; overflow: hidden; border-radius: 10px; background: #eef2ef; box-shadow: inset 0 0 0 1px rgba(60,80,73,.08); }
.pet-style-preview img { position: absolute; top: calc(var(--pet-preview-row) * -100%); left: calc(var(--pet-preview-col) * -100%); display: block; width: 700%; max-width: none; height: 200%; object-fit: fill; }
.pet-style-copy { display: grid; align-content: center; gap: 5px; min-width: 0; }
.pet-style-card.child-template-card .pet-style-copy strong { align-self: auto; padding-right: 16px; font-size: 12px; line-height: 1.3; }
.pet-style-card.child-template-card .pet-style-copy small { align-self: auto; color: #8a8f89; font-size: 9px; line-height: 1.45; }
.pet-style-card.child-template-card.is-selected { box-shadow: 0 8px 18px rgba(73, 104, 96, .14), inset 0 0 0 1px rgba(111,140,135,.24); }
.pet-style-card.child-template-card.is-selected .pet-style-preview { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--child-accent); }
.pet-humanize-select-control { gap: 8px; }
.pet-humanize-select-control .family-compact-select select { height: 48px; border-color: color-mix(in srgb, var(--child-accent) 32%, #e2d9d2); color: var(--child-accent-dark); background: linear-gradient(120deg, #fffdf9, var(--child-accent-soft)); font-weight: 600; }
.pet-humanize-select-control .family-compact-select select:focus { border-color: var(--child-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--child-accent) 16%, transparent); }
.pet-humanize-select-control .family-compact-select svg { color: var(--child-accent-dark); }
.pet-custom-humanize-role { border-color: color-mix(in srgb, var(--child-accent) 32%, #e2d9d2); color: var(--child-accent-dark); }
.pet-custom-humanize-role:focus { border-color: var(--child-accent); outline-color: color-mix(in srgb, var(--child-accent) 16%, transparent); }
.pet-director-note { color: var(--child-accent-dark); border-color: color-mix(in srgb, var(--child-accent) 28%, #e2d9cf); background: linear-gradient(120deg, #fffdf8, var(--child-accent-soft)); }
.pet-result-stage { background: radial-gradient(circle at 50% 42%, rgba(235, 209, 190, .39), transparent 31%), linear-gradient(135deg, #f0ebe2, color-mix(in srgb, var(--child-accent-soft) 78%, #d8ddd9)); }
.pet-next-step { border-color: color-mix(in srgb, var(--child-accent) 23%, #ded6ca); background: linear-gradient(90deg, var(--child-accent-soft), #fbf8f1); }

@media (max-width: 560px) {
  .pet-photo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pet-tool-page.is-pet-portrait .pet-photo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pet-upload-summary { grid-template-columns: 1fr; }
  .pet-style-category-grid { grid-template-columns: 1fr; }
  .pet-portrait-upload-tips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pet-tool-page.is-pet-portrait .pet-template-grid { grid-template-columns: 1fr; }
}

/* 宠物时光：各功能主题色（选中态与勾选标记由 child-tools.css 的 .theme-tool-picker 自动跟随） */
.theme-tool-tab[data-tool-nav="portrait"] { --theme-tab-accent: #b45309; }
.theme-tool-tab[data-tool-nav="together"] { --theme-tab-accent: #3f7a5d; }
.theme-tool-tab[data-tool-nav="humanize"] { --theme-tab-accent: #7c5aa2; }
.theme-tool-tab[data-tool-nav="cartoon"] { --theme-tab-accent: #b56a8b; }
.theme-tool-tab:not(.is-active)[data-tool-nav="portrait"] svg,
.theme-tool-tab:not(.is-active)[data-tool-nav="together"] svg,
.theme-tool-tab:not(.is-active)[data-tool-nav="humanize"] svg,
.theme-tool-tab:not(.is-active)[data-tool-nav="cartoon"] svg { color: var(--theme-tab-accent); }