:root {
  --paper: #fffdfb;
  --ink: #241d19;
  --muted: #77706b;
  --line: #ebe4de;
  --soft-line: #f0e7df;
  --accent: #9d4819;
  --accent-dark: #74320f;
  --accent-mid: #b7652b;
  --accent-soft: #fff4e9;
  --shadow: 0 8px 24px rgba(92, 61, 40, .06);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { min-width: 320px; background: var(--paper); }
body { min-width: 320px; min-height: 100vh; margin: 0; color: var(--ink); background: linear-gradient(135deg, #fffefd 0%, #fffaf6 100%); font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif; -webkit-font-smoothing: antialiased; }
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
button { color: inherit; }

.old-photo-toast { position: fixed; z-index: 50; top: 82px; left: 50%; max-width: min(520px, calc(100% - 32px)); padding: 10px 18px; border: 1px solid #ead8ca; border-radius: 10px; color: #6d3216; background: rgba(255, 250, 246, .98); box-shadow: 0 8px 24px rgba(77, 45, 26, .14); opacity: 0; pointer-events: none; transform: translate(-50%, -8px); transition: opacity .2s ease, transform .2s ease; }
.old-photo-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
.old-photo-toast.is-error { color: #9b2d25; border-color: #efc8c2; background: #fff6f4; }

.old-photo-header { display: grid; grid-template-columns: 360px minmax(620px, 1fr) auto; align-items: center; gap: 18px; height: 94px; padding: 20px 24px; }
.old-photo-heading { display: flex; align-items: center; gap: 22px; }
.old-photo-heading h1 { margin: 0; font-size: 28px; line-height: 1; font-weight: 700; letter-spacing: .04em; }
.back-button { display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 52px; border: 1px solid #e6dfda; border-radius: 13px; background: rgba(255,255,255,.75); }
.back-button:hover { color: var(--accent); border-color: #d9bba5; }
.back-button svg { width: 25px; height: 25px; }

.repair-steps { display: flex; align-items: center; justify-content: center; gap: 14px; min-width: 0; margin: 0; padding: 0; list-style: none; }
.repair-step { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; color: #39332f; }
.repair-step span { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid #e8ddd5; border-radius: 50%; background: #fff; font-size: 19px; }
.repair-step strong { font-size: 18px; font-weight: 500; }
.repair-step.is-active span { color: #fff; border-color: var(--accent); background: linear-gradient(135deg, #a45221, #78310f); }
.repair-step.is-active strong { font-weight: 700; }
.repair-step.is-complete span { border-color: #e4d4c7; }
.repair-arrow { color: #6c6762; font-size: 21px; }
.old-photo-header-actions { display: flex; align-items: center; gap: 22px; }
.header-action { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 52px; padding: 0 20px; border: 1px solid #e8e1db; border-radius: 13px; background: rgba(255,255,255,.78); font-size: 16px; font-weight: 600; white-space: nowrap; cursor: pointer; }
.header-action.is-accent { color: var(--accent-dark); border-color: #e7cdbb; }
.header-action:hover { border-color: #d5a985; background: #fffaf6; }
.header-action svg { width: 22px; height: 22px; }

.old-photo-workspace { display: grid; grid-template-columns: 518px minmax(0, 1fr); gap: 18px; min-height: calc(100vh - 112px); padding: 0 24px 18px; }
.repair-sidebar { min-width: 0; }
/* 老照片：左栏跟随右栏拉伸（与其他 6 个工具页同款模式），两栏底边始终齐平 */
.old-photo-workspace .repair-sidebar { display: flex; flex-direction: column; min-height: 0; }
.repair-mode-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.repair-mode { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 16px; border: 1px solid var(--soft-line); border-radius: 16px; background: #ffffff; color: var(--ink); font-size: 16px; font-weight: 500; cursor: pointer; transition: border-color .18s ease, background-color .18s ease, color .18s ease; }
.repair-mode svg { width: 20px; height: 20px; }
.repair-mode:hover { border-color: var(--accent); background: #faf7f4; }
.repair-mode[data-mode="restore"] svg { color: #a4642b; }
.repair-mode[data-mode="colorize"] svg { color: #3b7d8a; }
.repair-mode[data-mode="family"] svg { color: #c2410c; }
.repair-mode.is-active svg { color: var(--accent-dark); }
.repair-mode.is-active { color: var(--accent-dark); background: #fff0e1; border-color: var(--accent); font-weight: 700; }
.repair-mode.is-coming { color: #56514d; }

/* ★2026-09-18 功能选择卡片：把「一排 tab」变成「一眼可见的可选项」。
   统一定义在此（old-photo.css 被全部工具页引用），child-tools.css 不再重复定义。
   三条设计约束：
   1) 容器只负责「表达这是一组可选项」（标题 + 数量），tab 本体的样式各自保留；
   2) 不为 repair-mode / growth-topic-tab 覆盖选中态配色 —— 创意写真会随所选风格换肤
      （古风棕金 / 现代蓝 / 平行人生紫），覆盖会毁掉既定设计。这里只为「勾选标记」
      定义 --theme-tab-accent，让「当前选中哪个」一目了然；
   3) 勾选标记必须绝对定位：用 flex 占位会挤窄文字，使较长名称折成两行。 */
.theme-tool-picker {
  display: grid; gap: 10px;
  margin: 0 0 14px; padding: 12px 13px 13px;
  border: 1px solid #e6e0d6; border-radius: 16px; background: #fffdfa;
}
.theme-tool-picker-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.theme-tool-picker-head strong { color: #59534d; font-size: 13px; }
.theme-tool-picker-head small { color: #9a938b; font-size: 10px; }
.theme-tool-picker .theme-tool-tabs,
.theme-tool-picker .repair-mode-tabs,
.theme-tool-picker .growth-topic-tabs { margin: 0; }
.theme-tool-picker .theme-tool-tab,
.theme-tool-picker .repair-mode,
.theme-tool-picker .growth-topic-tab { position: relative; }

/* 各工具主色：仅用于勾选标记，不参与选中态配色 */
.repair-mode[data-mode="restore"] { --theme-tab-accent: #a4642b; }
.repair-mode[data-mode="colorize"] { --theme-tab-accent: #3b7d8a; }
.repair-mode[data-mode="family"] { --theme-tab-accent: #c2410c; }
.repair-mode[data-mode="ancient"] { --theme-tab-accent: #a16207; }
.repair-mode[data-mode="republic"] { --theme-tab-accent: #9a6a3a; }
.repair-mode[data-mode="modern"] { --theme-tab-accent: #315c70; }
.repair-mode[data-mode="parallel"] { --theme-tab-accent: #744f6e; }
.growth-topic-tab[data-tab-key="growth"] { --theme-tab-accent: #2e7d68; }
.growth-topic-tab[data-tab-key="artist"] { --theme-tab-accent: #b45309; }
.growth-topic-tab[data-tab-key="honor"] { --theme-tab-accent: #a16207; }
.growth-topic-tab[data-tab-key="career"] { --theme-tab-accent: #4f46e5; }

/* 四个工具页（儿童成长 / 宠物时光 / 旅行相册 / 爱情纪念）的选中态跟随各自主色 */
.theme-tool-picker .theme-tool-tab.is-active {
  color: var(--theme-tab-accent, #64756a);
  background: color-mix(in srgb, var(--theme-tab-accent, #64756a) 8%, white);
  border-color: color-mix(in srgb, var(--theme-tab-accent, #64756a) 42%, white);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--theme-tab-accent, #64756a) 14%, white);
}
.theme-tool-picker .theme-tool-tab.is-active::after,
.theme-tool-picker .repair-mode.is-active::after,
.theme-tool-picker .growth-topic-tab.is-active::after {
  content: "✓";
  position: absolute; top: 4px; right: 4px;
  width: 15px; height: 15px;
  border-radius: 50%;
  color: #fff; background: var(--theme-tab-accent, #64756a);
  font-size: 9px; font-weight: 700; line-height: 15px; text-align: center;
}

.repair-settings-card { height: calc(100vh - 178px); min-height: 620px; overflow-y: auto; padding: 26px 28px 20px; border: 1px solid var(--line); border-radius: 22px; background: rgba(255,255,255,.82); box-shadow: var(--shadow); scrollbar-width: thin; scrollbar-color: #dcc8ba transparent; }
/* 老照片：设置卡片改为跟随右栏拉伸（覆盖上方基础规则的固定高度） */
.old-photo-workspace .repair-settings-card { flex: 1 1 auto; height: auto; min-height: 0; overflow-y: auto; }
/*
 * 五个主题工作台在桌面端沿用老照片右侧结果区的尺寸。
 * 左栏不再参与 Grid 行高计算；超出的设置只在左侧卡片内部滚动。
 */
@media (min-width: 1121px) {
  .old-photo-workspace.portrait-workspace { align-items: stretch; }
  .old-photo-workspace.portrait-workspace .repair-sidebar {
    min-height: 0;
    overflow: hidden;
    contain: size;
  }
  .old-photo-workspace.portrait-workspace .repair-settings-card {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}
.hair-design-workspace .repair-settings-card,
.id-photo-workspace .repair-settings-card,
.outfit-design-workspace .repair-settings-card,
.background-replace-workspace .repair-settings-card,
.portrait-retouch-workspace .repair-settings-card,
.makeup-design-workspace .repair-settings-card { height: auto; min-height: 0; flex: 1 1 auto; }
.hair-design-workspace .repair-sidebar,
.id-photo-workspace .repair-sidebar,
.outfit-design-workspace .repair-sidebar,
.background-replace-workspace .repair-sidebar,
.portrait-retouch-workspace .repair-sidebar,
.makeup-design-workspace .repair-sidebar { display: flex; min-height: 0; overflow: hidden; contain: size; }
.hair-design-workspace,
.id-photo-workspace,
.outfit-design-workspace,
.background-replace-workspace,
.portrait-retouch-workspace,
.makeup-design-workspace { align-items: stretch; }
.settings-section { margin-bottom: 22px; }
.settings-section h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: 17px; line-height: 1.2; }
.settings-section h2 > span { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-mid); }
.settings-section h2 em { font-size: 14px; font-style: normal; font-weight: 500; }
.settings-section h2 small { margin-left: 13px; color: #9b9691; font-size: 13px; font-weight: 400; }
.settings-section h2 svg { width: 15px; height: 15px; color: #92908d; }

.upload-row { display: grid; grid-template-columns: 200px minmax(0, 1fr); align-items: start; gap: 24px; padding-left: 9px; }
.photo-preview { position: relative; display: flex; align-items: center; justify-content: center; width: 200px; height: 158px; overflow: hidden; padding: 0; border: 1px solid #e4d9d0; border-radius: 12px; background: #f8f3ef; box-shadow: 0 5px 11px rgba(67, 49, 39, .1); cursor: pointer; }
.photo-preview img { display: none; width: 100%; height: 100%; object-fit: cover; }
.photo-preview.has-photo img { display: block; }
.photo-preview.has-photo .photo-empty-state { display: none; }
.photo-preview.is-dragging { border-color: #bb7343; box-shadow: 0 0 0 4px rgba(181, 98, 42, .12); }
.photo-empty-state { display: grid; justify-items: center; gap: 8px; color: #a59589; }
.photo-empty-state svg { width: 35px; height: 35px; }
.photo-empty-state small { font-size: 13px; }
.upload-meta { display: grid; align-content: start; gap: 12px; padding-top: 8px; min-width: 0; color: var(--muted); }
.change-photo-button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; width: 150px; height: 48px; border: 1px solid #e7cdb9; border-radius: 13px; color: var(--accent-dark); background: #fffaf5; font-size: 15px; font-weight: 600; cursor: pointer; }
.change-photo-button:hover { background: #fff2e7; }
.change-photo-button svg { width: 21px; height: 21px; }
.upload-meta strong { overflow: hidden; font-size: 15px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.upload-meta span { font-size: 14px; line-height: 1.45; }

.select-control { position: relative; display: block; }
.select-control select { width: 100%; height: 48px; padding: 0 46px 0 20px; border: 1px solid #e4ded9; border-radius: 12px; outline: none; color: #25211e; background: #fff; font-size: 16px; appearance: none; }
.select-control select:focus { border-color: #c98d63; box-shadow: 0 0 0 3px rgba(181, 98, 42, .1); }
.select-control svg { position: absolute; top: 50%; right: 17px; width: 20px; height: 20px; pointer-events: none; transform: translateY(-50%); }
.prompt-control { position: relative; display: block; }
.prompt-control textarea { display: block; width: 100%; min-height: 108px; padding: 13px 18px 30px; resize: vertical; border: 1px solid #e4ded9; border-radius: 12px; outline: none; color: #39332e; background: #fff; font-size: 14px; line-height: 1.55; }
.prompt-control textarea:focus { border-color: #c98d63; box-shadow: 0 0 0 3px rgba(181, 98, 42, .1); }
.prompt-control textarea::placeholder { color: #b2ada9; }
.prompt-control span { position: absolute; right: 13px; bottom: 9px; color: #aaa5a1; font-size: 12px; }

.family-settings { display: grid; gap: 0; }
.family-step-section { margin-bottom: 18px; padding-bottom: 18px; border-bottom: 1px solid #eee5de; }
.family-step-section:last-child { margin-bottom: 12px; padding-bottom: 0; border-bottom: 0; }
.family-step-section h2 { gap: 9px; margin-bottom: 11px; }
.family-step-section h2 em { color: #8f8882; font-size: 12px; }
.family-step-section h2 small { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; padding: 4px 8px; border-radius: 999px; color: #6d655f; background: #f7f3ef; font-size: 11px; }
.family-step-section h2 small svg { width: 13px; height: 13px; color: #a15a2e; }
.family-step-number { display: inline-flex; align-items: center; justify-content: center; width: 25px; height: 25px; border-radius: 50%; color: #fff; background: linear-gradient(135deg, #a95625, #71300f); font-family: Georgia, "Times New Roman", serif; font-size: 14px; font-weight: 600; }
.family-base-upload-row { padding-left: 9px; }
.family-base-preview { position: relative; width: 200px; height: 158px; }
.family-base-preview > img { display: none; width: 100%; height: 100%; object-fit: cover; }
.family-base-preview.has-photo > img { display: block; }
.family-base-preview.has-photo .family-base-empty { display: none; }
.family-base-empty { color: #a59589; }
.family-base-empty svg { width: 35px; height: 35px; color: #b69a86; }
.family-base-empty small { font-size: 13px; }
.family-base-upload-meta { padding-top: 8px; }
.family-people-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
.family-person-card, .family-person-add { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 5; min-width: 0; overflow: hidden; padding: 0; border: 1px solid #e5d9d0; border-radius: 11px; background: #f8f2ed; }
.family-person-card img { display: block; width: 100%; height: 100%; object-fit: cover; }
.family-person-card button { position: absolute; top: 5px; right: 5px; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border: 1px solid rgba(222, 208, 197, .92); border-radius: 50%; color: #5d4b40; background: rgba(255,255,255,.94); cursor: pointer; }
.family-person-card button svg { width: 14px; height: 14px; }
.family-person-card small { position: absolute; right: 5px; bottom: 5px; left: 5px; overflow: hidden; padding: 4px 5px; border-radius: 6px; color: #fff; background: rgba(49, 34, 24, .55); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.family-person-add { flex-direction: column; gap: 5px; border-style: dashed; color: #8b6a54; cursor: pointer; }
.family-person-add:hover { border-color: #bb7648; background: #fff7ef; }
.family-person-add svg { width: 25px; height: 25px; }
.family-person-add strong { font-size: 11px; }
.family-person-add small { color: #a59b94; font-size: 9px; }
.family-field-note { margin: 8px 0 0; color: #918984; font-size: 11px; line-height: 1.45; }
.family-output-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.family-output-grid > label { display: grid; gap: 6px; min-width: 0; color: #716760; font-size: 11px; }
.family-compact-select { position: relative; display: block; }
.family-compact-select select { width: 100%; height: 43px; padding: 0 34px 0 12px; overflow: hidden; border: 1px solid #e2d9d2; border-radius: 10px; outline: none; color: #352b25; background: #fff; font-size: 12px; text-overflow: ellipsis; appearance: none; }
.family-compact-select select:focus { border-color: #c98d63; box-shadow: 0 0 0 3px rgba(181, 98, 42, .1); }
.family-compact-select svg { position: absolute; top: 50%; right: 10px; width: 16px; height: 16px; pointer-events: none; transform: translateY(-50%); }
.family-prompt-control textarea { min-height: 88px; resize: none; }

.quality-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.quality-option { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; height: 72px; padding: 0 8px; border: 1px solid #e8e1dc; border-radius: 12px; background: #fff; cursor: pointer; }
.quality-option strong { font-size: 18px; line-height: 1; font-weight: 600; }
.quality-option small { color: #9a928d; font-size: 11px; line-height: 1; }
.quality-option.is-selected { border: 2px solid #a95422; background: #fffdfb; box-shadow: 0 3px 8px rgba(130, 62, 23, .08); }
.quality-option.is-selected small { color: #8b4a29; }
.default-badge { position: absolute; top: -2px; right: -2px; padding: 3px 7px; border-radius: 0 10px 0 8px; color: #fff; background: #ad5b2d; font-size: 10px; }

.repair-submit-area { position: sticky; z-index: 4; bottom: -20px; margin: 0 -4px -20px; padding: 8px 4px 18px; background: linear-gradient(180deg, rgba(255,253,251,0), #fffdfb 15%, #fffdfb 100%); }
.start-repair-button { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; height: 58px; margin-top: 4px; border: 0; border-radius: 13px; color: #fff; background: linear-gradient(105deg, #bd6a31 0%, #8b3a13 100%); box-shadow: 0 8px 16px rgba(136, 59, 19, .18); font-size: 21px; font-weight: 600; cursor: pointer; }
.start-repair-button:hover { filter: brightness(1.04); }
.start-repair-button:disabled { opacity: .58; cursor: not-allowed; }
.start-repair-button svg { width: 26px; height: 26px; }
.repair-save-note { margin: 12px 0 0; color: #88827d; font-size: 13px; line-height: 1.45; text-align: center; }

.repair-result-card { display: flex; flex-direction: column; min-width: 0; min-height: calc(100vh - 112px); padding: 28px 32px 10px; border: 1px solid var(--line); border-radius: 22px; background: rgba(255,255,255,.82); box-shadow: var(--shadow); }
.result-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 18px; }
.result-title-row { display: flex; align-items: center; gap: 12px; min-width: 0; flex-wrap: wrap; }
.result-heading h2 { display: flex; align-items: center; gap: 10px; margin: 0; color: #613017; font-size: 22px; }
.result-heading h2 svg { width: 25px; height: 25px; color: var(--accent); }
.result-heading p { margin: 8px 0 0; color: #87817d; font-size: 15px; }
.result-heading-actions { display: flex; align-items: center; gap: 10px; }
.compare-button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: 46px; padding: 0 19px; border: 1px solid #e5ddd7; border-radius: 12px; background: #fff; font-size: 15px; cursor: pointer; white-space: nowrap; flex-shrink: 0; }
.compare-button:disabled { opacity: .45; cursor: not-allowed; }
.compare-button svg { width: 21px; height: 21px; }

.result-stage { position: relative; display: flex; align-items: center; justify-content: center; flex: 1 1 auto; min-height: 430px; overflow: hidden; border-radius: 14px; background: linear-gradient(135deg, #f5eee8, #e9ddd1); box-shadow: 0 6px 14px rgba(70, 48, 34, .12); }
.result-empty, .result-progress { display: grid; justify-items: center; gap: 10px; color: #8c8178; text-align: center; }
.result-empty svg { width: 56px; height: 56px; color: #b9a99c; }
.result-empty strong, .result-progress strong { color: #554941; font-size: 17px; }
.result-empty small, .result-progress small { max-width: 420px; font-size: 13px; line-height: 1.6; }
.repair-spinner { width: 44px; height: 44px; border: 4px solid rgba(157,72,25,.16); border-top-color: var(--accent); border-radius: 50%; animation: repair-spin .9s linear infinite; }
@keyframes repair-spin { to { transform: rotate(360deg); } }
.result-figure { position: absolute; inset: 0; margin: 0; }
.result-figure img { display: block; width: 100%; height: 100%; object-fit: contain; background: #e9ded3; }
.result-figure figcaption { position: absolute; right: 14px; bottom: 12px; padding: 5px 10px; border-radius: 8px; color: #fff; background: rgba(52,36,26,.62); font-size: 12px; }
.result-comparison { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 10px; background: #e5d8cc; }
.comparison-panel { display: grid; grid-template-rows: minmax(0, 1fr) auto; min-width: 0; min-height: 0; margin: 0; overflow: hidden; border: 1px solid rgba(117, 82, 57, .2); border-radius: 10px; background: #f8f1eb; box-shadow: 0 3px 10px rgba(70, 48, 34, .08); }
.comparison-panel img { display: block; width: 100%; height: 100%; min-height: 0; object-fit: contain; background: #e9ded3; }
.comparison-panel figcaption { padding: 9px 12px; color: #5c4332; background: rgba(255, 253, 251, .94); font-size: 13px; font-weight: 600; text-align: center; }

.result-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; width: min(980px, 96%); margin: 20px auto 0; }
.result-action { display: inline-flex; align-items: center; justify-content: center; gap: 11px; height: 60px; padding: 0 20px; border: 1px solid #e6cbb8; border-radius: 13px; color: #673116; background: #fff; font: inherit; font-size: 19px; font-weight: 600; text-decoration: none; appearance: none; cursor: pointer; }
.result-action.is-primary { color: #fff; border-color: #914013; background: linear-gradient(105deg, #b66027, #7c310e); }
.result-action:disabled, .result-action.is-disabled { opacity: .45; pointer-events: none; cursor: not-allowed; }
.result-action svg { width: 25px; height: 25px; }
.result-credit-note { margin: 10px 0 0; }
.result-hint { margin: 10px 0 12px; color: #827a74; font-size: 14px; text-align: center; }

.next-step-banner { display: grid; grid-template-columns: 220px minmax(0, 1fr); align-items: center; gap: 22px; min-height: 96px; padding: 10px 24px; border: 1px solid #efd7c0; border-radius: 16px; background: linear-gradient(90deg, #fff7ee, #fffaf5); }
.next-step-visual { display: flex; align-items: center; justify-content: center; gap: 20px; color: var(--accent); font-size: 31px; }
.next-step-visual > span:not(:nth-child(2)) { display: inline-flex; align-items: center; justify-content: center; width: 72px; height: 62px; border: 1px solid #e6d2c2; border-radius: 10px; background: #fff; transform: rotate(-5deg); }
.next-step-visual .album-stack { transform: rotate(3deg); }
.next-step-visual svg { width: 40px; height: 40px; }
.next-step-content { min-width: 0; }
.next-step-banner p { margin: 0; max-width: 760px; color: #776f69; font-size: 14px; line-height: 1.6; }

.old-photo-history { position: fixed; inset: 0; z-index: 40; }
.old-photo-history-backdrop { position: absolute; inset: 0; background: rgba(47, 31, 20, .42); backdrop-filter: blur(2px); }
.old-photo-history-dialog { position: relative; display: flex; flex-direction: column; width: min(760px, calc(100vw - 36px)); max-height: min(720px, calc(100vh - 40px)); margin: 20px auto; overflow: hidden; border: 1px solid #eaded4; border-radius: 20px; background: #fffdfb; box-shadow: 0 24px 60px rgba(65, 40, 23, .22); }
.old-photo-history-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 22px 24px 18px; border-bottom: 1px solid #efe5de; }
.old-photo-history-header h2 { margin: 0; color: #5d2e16; font-size: 21px; }
.old-photo-history-header p { margin: 7px 0 0; color: #8b817a; font-size: 13px; }
.old-photo-history-close { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid #e8ddd5; border-radius: 9px; color: #6e625a; background: #fff; font-size: 23px; line-height: 1; cursor: pointer; }
.old-photo-history-close:hover { color: var(--accent-dark); border-color: #d5b094; background: #fff8f2; }
.old-photo-history-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; gap: 14px; min-height: 170px; padding: 20px 24px 24px; overflow: auto; }
.old-photo-history-empty { display: grid; grid-column: 1 / -1; justify-items: center; gap: 8px; padding: 58px 20px; color: #958981; text-align: center; }
.old-photo-history-empty strong { color: #5c4c42; font-size: 16px; }
.old-photo-history-empty small { font-size: 13px; }
.old-photo-history-card { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 12px; min-width: 0; padding: 10px; border: 1px solid #eadfd6; border-radius: 13px; background: #fff; }
.old-photo-history-card:hover { border-color: #d4a37f; box-shadow: 0 4px 12px rgba(122, 69, 31, .08); }
.old-photo-history-thumb { width: 88px; height: 88px; overflow: hidden; border-radius: 9px; background: #f1e8e0; }
.old-photo-history-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.old-photo-history-card-body { display: grid; align-content: center; gap: 6px; min-width: 0; }
.old-photo-history-card-body strong { overflow: hidden; color: #3b2c23; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.old-photo-history-card-body span { overflow: hidden; color: #8a7e75; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.old-photo-history-card-body button { justify-self: start; height: 30px; padding: 0 11px; border: 1px solid #e3c8b4; border-radius: 8px; color: #713514; background: #fff9f4; font-size: 12px; cursor: pointer; }
.old-photo-history-card-body button:hover { background: #fff0e4; }

.is-modal-open { overflow: hidden; }
.old-photo-help { position: fixed; inset: 0; z-index: 45; }
.old-photo-help-backdrop { position: absolute; inset: 0; background: rgba(47, 31, 20, .42); backdrop-filter: blur(2px); }
.old-photo-help-dialog { position: relative; display: flex; flex-direction: column; width: min(680px, calc(100vw - 36px)); max-height: min(720px, calc(100vh - 40px)); margin: 20px auto; overflow: hidden; border: 1px solid #eaded4; border-radius: 20px; background: #fffdfb; box-shadow: 0 24px 60px rgba(65, 40, 23, .22); }
.old-photo-help-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 22px 24px 18px; border-bottom: 1px solid #efe5de; }
.old-photo-help-header h2 { margin: 0; color: #5d2e16; font-size: 21px; }
.old-photo-help-header p { margin: 7px 0 0; color: #8b817a; font-size: 13px; }
.old-photo-help-content { display: grid; gap: 12px; padding: 20px 24px 24px; overflow: auto; }
.old-photo-help-step { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 12px; padding: 14px 15px; border: 1px solid #eadfd6; border-radius: 12px; background: #fff; }
.old-photo-help-step--paper { border-color: #efd7c0; background: linear-gradient(90deg, #fff8f1, #fffdfb); }
.old-photo-help-number { display: inline-flex; align-items: center; justify-content: center; width: 29px; height: 29px; border-radius: 50%; color: #fff; background: linear-gradient(135deg, #ad5b2d, #7c3512); font-family: Georgia, "Times New Roman", serif; font-size: 16px; }
.old-photo-help-step h3 { margin: 1px 0 5px; color: #4e2d1e; font-size: 15px; }
.old-photo-help-step p { margin: 0; color: #776f69; font-size: 13px; line-height: 1.65; }

@media (max-width: 1380px) {
  .old-photo-header { grid-template-columns: 300px minmax(560px, 1fr) auto; }
  .repair-steps { gap: 9px; }
  .repair-step strong { font-size: 16px; }
  .old-photo-workspace { grid-template-columns: 470px minmax(0, 1fr); }
  .upload-row { grid-template-columns: 180px minmax(0, 1fr); gap: 18px; }
  .photo-preview { width: 180px; }
  .next-step-banner { grid-template-columns: 190px minmax(0, 1fr); }
}
@media (max-width: 1180px) {
  /* Below this width the three-column header collides (step pill 4 overlaps
     the help button). Switch to a two-row layout: heading + actions on row 1,
     steps on row 2. Applies to all pages that share .old-photo-header. */
  .old-photo-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    align-items: center;
    height: auto;
    min-height: 110px;
    row-gap: 12px;
  }
  .old-photo-header-actions { grid-column: 2; grid-row: 1; }
  .repair-steps { grid-column: 1 / -1; grid-row: 2; }
}

@media (max-width: 1120px) {
  .old-photo-header { grid-template-columns: 1fr auto; height: auto; min-height: 110px; }
  .repair-steps { grid-column: 1 / -1; grid-row: 2; order: 3; justify-content: flex-start; overflow-x: auto; padding: 5px 0; }
  .old-photo-workspace { grid-template-columns: 420px minmax(0, 1fr); }
  .repair-settings-card { padding-inline: 20px; }
  .upload-row { grid-template-columns: 1fr; }
  .photo-preview { width: 100%; }
  .upload-meta { grid-template-columns: auto minmax(0, 1fr); align-items: center; }
  .upload-meta span { grid-column: 1 / -1; }
  .family-base-upload-row { grid-template-columns: 180px minmax(0, 1fr); gap: 18px; }
  .family-base-upload-row .family-base-preview { width: 180px; }
  .family-base-upload-row .family-base-upload-meta { grid-template-columns: 1fr; align-items: start; }
  .family-base-upload-row .family-base-upload-meta span { grid-column: auto; }
  .result-actions { width: 100%; gap: 10px; }
  .next-step-banner { grid-template-columns: 1fr; }
  .next-step-visual { display: none; }
}

@media (max-width: 860px) {
  .old-photo-header { padding-inline: 16px; }
  .old-photo-heading h1 { font-size: 23px; }
  .old-photo-header-actions { gap: 8px; }
  .header-action { width: 48px; padding: 0; font-size: 0; }
  .old-photo-workspace { grid-template-columns: 1fr; padding-inline: 14px; }
  .repair-settings-card { height: auto; min-height: 0; overflow: visible; }
  .old-photo-workspace .repair-sidebar { display: block; min-height: 0; }
  .old-photo-workspace .repair-settings-card { flex: none; height: auto; min-height: 0; overflow: visible; }
  .hair-design-workspace .repair-settings-card,
  .id-photo-workspace .repair-settings-card,
  .outfit-design-workspace .repair-settings-card,
  .background-replace-workspace .repair-settings-card,
  .portrait-retouch-workspace .repair-settings-card,
  .makeup-design-workspace .repair-settings-card { height: auto; min-height: 0; flex: none; }
  .hair-design-workspace .repair-sidebar,
  .id-photo-workspace .repair-sidebar,
  .outfit-design-workspace .repair-sidebar,
  .background-replace-workspace .repair-sidebar,
  .portrait-retouch-workspace .repair-sidebar,
  .makeup-design-workspace .repair-sidebar { display: block; min-height: 0; overflow: visible; contain: none; }
  .repair-submit-area { bottom: 0; margin-bottom: 0; }
  .repair-result-card { min-height: 720px; }
}

@media (max-width: 700px) {
  .result-actions { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .old-photo-header { grid-template-columns: 1fr auto; gap: 10px; padding-top: 12px; }
  .old-photo-heading { gap: 12px; }
  .back-button { width: 44px; height: 44px; }
  .old-photo-heading h1 { font-size: 20px; }
  .repair-step strong { font-size: 14px; }
  .repair-step span { width: 31px; height: 31px; font-size: 16px; }
  .repair-mode-tabs { gap: 8px; }
  .repair-mode { gap: 6px; padding: 10px 8px; font-size: 13px; }
  .repair-mode svg { width: 16px; height: 16px; }
  .repair-settings-card, .repair-result-card { padding-inline: 16px; }
  .result-heading { align-items: stretch; flex-direction: column; }
  .result-heading-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .upload-meta { display: grid; grid-template-columns: 1fr; }
  .family-base-upload-row { grid-template-columns: 1fr; padding-left: 0; }
  .family-base-upload-row .family-base-preview { width: 100%; }
  .quality-options { gap: 8px; }
  .family-people-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .family-output-grid { grid-template-columns: 1fr; }
  .result-stage { min-height: 310px; }
  .result-comparison { grid-template-columns: 1fr; grid-template-rows: repeat(2, minmax(0, 1fr)); overflow: auto; }
  .result-actions { grid-template-columns: 1fr; }
  .next-step-banner { grid-template-columns: 1fr; padding: 14px 16px; }
  .old-photo-history-dialog { width: calc(100vw - 20px); max-height: calc(100vh - 20px); margin: 10px auto; border-radius: 15px; }
  .old-photo-history-header { padding: 17px 16px 14px; }
  .old-photo-history-list { grid-template-columns: 1fr; padding: 14px 16px 18px; }
  .old-photo-help-dialog { width: calc(100vw - 20px); max-height: calc(100vh - 20px); margin: 10px auto; border-radius: 15px; }
  .old-photo-help-header { padding: 17px 16px 14px; }
  .old-photo-help-content { padding: 14px 16px 18px; }
}

/* 老照片：4 步流程条（位于底部制作提示区） */
.result-steps {
  display: flex; align-items: center;
  min-width: 0; margin: 0 0 7px; padding: 0;
  color: #8c7e74; white-space: nowrap;
}
.result-steps .repair-steps {
  display: flex; align-items: center; gap: 6px;
  margin: 0; padding: 0; list-style: none;
}
.result-steps .repair-step { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; color: #8c7e74; }
.result-steps .repair-step span {
  width: 23px; height: 23px; font-size: 12px;
  border: 1px solid #d9cec5; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; background: #fff;
}
.result-steps .repair-step strong { font-size: 13px; font-weight: 500; }
.result-steps .repair-step.is-active span { color: #fff; border-color: var(--accent); background: linear-gradient(135deg, #a45221, #78310f); }
.result-steps .repair-step.is-active strong { font-weight: 700; color: var(--accent-dark); }
.result-steps .repair-step.is-complete span { border-color: #e4d4c7; }
.result-steps .repair-arrow { color: #b0a6a0; font-size: 14px; }
.result-status-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

@media (min-width: 1121px) {
  .old-photo-primary-workspace .repair-result-card { padding-top: 0; }
  .old-photo-primary-workspace .result-heading { align-items: center; min-height: 51px; }
  .old-photo-primary-workspace .next-step-banner { min-height: 132px; }
  .old-photo-primary-workspace .result-stage {
    flex: 0 0 max(430px, calc(100vh - 468px));
    min-height: 430px;
  }
}

@media (min-width: 861px) {
  .old-photo-primary-workspace .repair-sidebar {
    min-height: 0;
    overflow: hidden;
    contain: size;
  }
  .old-photo-primary-workspace .repair-settings-card {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .old-photo-primary-workspace .upload-row {
    grid-template-columns: 170px minmax(0, 1fr);
    gap: 18px;
  }
  .old-photo-primary-workspace .photo-preview {
    width: 170px;
    height: 112px;
  }
  .old-photo-primary-workspace .upload-meta {
    gap: 8px;
    padding-top: 2px;
  }
  .old-photo-primary-workspace .change-photo-button {
    width: 140px;
    height: 40px;
    font-size: 14px;
  }
  .old-photo-primary-workspace .quality-option {
    gap: 3px;
    height: 54px;
  }
  .old-photo-primary-workspace .repair-result-card { align-self: start; width: 100%; }
}

@media (max-width: 620px) {
  .result-steps { overflow-x: auto; padding-bottom: 2px; }
  .result-steps .repair-steps { gap: 4px; }
  .result-steps .repair-step { gap: 3px; }
  .result-steps .repair-step strong { font-size: 11px; }
  .result-steps .repair-step span { width: 20px; height: 20px; font-size: 11px; }
}

/* 儿童成长：右侧沿用老照片结果区布局，原有功能与文案保持不变。 */
.child-reference-next-content { min-width: 0; }
.child-reference-layout .child-reference-status {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media (min-width: 1121px) {
  .child-reference-layout .repair-result-card {
    padding-top: 0;
  }
  .child-reference-layout .result-heading {
    align-items: center;
    min-height: 51px;
  }
  .child-reference-layout .next-step-banner {
    min-height: 132px;
  }
  .child-reference-layout .result-stage {
    flex: 0 0 max(430px, calc(100vh - 468px));
    min-height: 430px;
  }
}

@media (min-width: 861px) {
  .child-reference-layout .repair-sidebar {
    min-height: 0;
    overflow: hidden;
    contain: size;
  }
  .child-reference-layout .repair-settings-card {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .child-reference-layout .repair-result-card {
    align-self: start;
    width: 100%;
  }
}

body.mode-growth .child-reference-result-steps .repair-step.is-active span {
  border-color: #79927a;
  background: linear-gradient(135deg, #a7b99b, #667f6b);
}
body.mode-growth .child-reference-result-steps .repair-step.is-active strong { color: #5c725d; }
body.child-tool-page .child-reference-result-steps .repair-step.is-active span {
  border-color: var(--child-accent);
  background: linear-gradient(135deg, color-mix(in srgb, var(--child-accent) 72%, white), var(--child-accent-dark));
}
body.child-tool-page .child-reference-result-steps .repair-step.is-active strong { color: var(--child-accent-dark); }
body:not(.mode-growth):not(.child-tool-page) .child-reference-result-steps .repair-step.is-active span {
  border-color: #4c5b50;
  background: linear-gradient(135deg, #69766b, #354238);
}
body:not(.mode-growth):not(.child-tool-page) .child-reference-result-steps .repair-step.is-active strong { color: #36453b; }