:root {
  --child-accent: #738b74;
  --child-accent-dark: #536c59;
  --child-accent-soft: #eef3e9;
  --child-warm: #d49b75;
  --child-paper: #fffdf8;
}

.child-tool-page {
  background: radial-gradient(circle at 74% 8%, rgba(199, 218, 189, .22), transparent 28%), linear-gradient(135deg, #fffdf7 0%, #f7f1e7 100%);
}

.child-tool-page.is-honor {
  --child-accent: #aa8350;
  --child-accent-dark: #7f6036;
  --child-accent-soft: #f8f0df;
  --child-warm: #c68b61;
  background: radial-gradient(circle at 76% 6%, rgba(232, 205, 145, .22), transparent 29%), linear-gradient(135deg, #fffdf7 0%, #f8f1e3 100%);
}

.child-tool-page.is-career {
  --child-accent: #6f8e91;
  --child-accent-dark: #4e6e75;
  --child-accent-soft: #eaf3f1;
  --child-warm: #cb9878;
  background: radial-gradient(circle at 75% 7%, rgba(175, 214, 210, .23), transparent 29%), linear-gradient(135deg, #fffdf8 0%, #eef5f1 100%);
}

.child-tool-header .old-photo-heading small { color: #877d6e; }
.child-tool-header .repair-step.is-active span,
.child-tool-settings-card .family-step-number { border-color: var(--child-accent); background: linear-gradient(135deg, color-mix(in srgb, var(--child-accent) 72%, white), var(--child-accent-dark)); }
.child-tool-header .header-action.is-accent { color: var(--child-accent-dark); border-color: color-mix(in srgb, var(--child-accent) 35%, #ddd4c7); }

.child-tool-workspace { grid-template-columns: 518px minmax(0, 1fr); }
.theme-tool-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0 0 14px; }
.theme-tool-tab { display: flex; align-items: center; justify-content: center; gap: 7px; min-width: 0; min-height: 48px; padding: 8px 10px; border: 1px solid #e6e0d6; border-radius: 14px; background: #ffffff; color: #57524b; font-size: 13px; font-weight: 700; line-height: 1.25; text-align: center; text-decoration: none; box-shadow: 0 1px 2px rgba(85,72,55,.04); transition: color .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.theme-tool-tab:hover { color: var(--child-accent-dark); background: color-mix(in srgb, var(--child-accent-soft) 60%, white); border-color: color-mix(in srgb, var(--child-accent) 55%, white); transform: translateY(-1px); }
.theme-tool-tab:focus-visible { outline: 2px solid color-mix(in srgb, var(--child-accent) 60%, white); outline-offset: 2px; }
.theme-tool-tab.is-active { color: var(--child-accent-dark); background: var(--child-accent-soft); border-color: color-mix(in srgb, var(--child-accent) 55%, white); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--child-accent) 18%, white); }
.theme-tool-tab svg { flex: 0 0 auto; width: 17px; height: 17px; }
.theme-tool-tab span { min-width: 0; }

/* ★2026-09-18 功能选择卡片的通用样式已统一到 old-photo.css（被全部工具页引用），
   避免四个页面各写一份。此处只保留本页各功能的主色（--theme-tab-accent）。 */
.child-tool-settings-card { min-height: 690px; padding-top: 24px; border: 1px solid #e7dfd3; border-radius: 22px; }
.child-tool-settings-card .portrait-step-section { margin-bottom: 18px; padding-bottom: 18px; }
.child-tool-settings-card .portrait-photo-grid { min-height: 116px; }
.child-photo-grid.is-single { grid-template-columns: 116px minmax(0, 1fr); }
.child-photo-grid.is-single .portrait-photo-card,
.child-photo-grid.is-single .portrait-photo-add { width: 116px; }
.child-photo-grid.is-single::after { content: attr(data-empty-note); display: grid; align-content: center; max-width: 270px; color: #938b80; font-size: 11px; line-height: 1.65; white-space: pre-line; }
.child-photo-grid:not(.is-single)::after { content: none; }

.child-template-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
.child-template-card { position: relative; display: grid; grid-template-columns: 42px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 11px; align-items: center; min-height: 84px; padding: 13px; border: 1px solid #e2d9cc; border-radius: 14px; outline: none; color: #554f47; background: linear-gradient(135deg, rgba(255,255,255,.98), rgba(248,245,237,.94)); text-align: left; cursor: pointer; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease; }
.child-template-card[hidden] { display: none; }
.child-template-card:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--child-accent) 48%, #d8d0c4); }
.child-template-card:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--child-accent) 22%, transparent); }
.child-template-card.is-selected { border-color: var(--child-accent); background: linear-gradient(135deg, #fffefa, var(--child-accent-soft)); box-shadow: 0 7px 16px rgba(83, 99, 77, .12), inset 0 0 0 1px color-mix(in srgb, var(--child-accent) 25%, white); }
.child-template-card.is-selected::after { content: "✓"; position: absolute; top: 8px; right: 9px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; color: #fff; background: var(--child-accent); font-size: 11px; font-weight: 800; }
.child-template-card .child-template-icon { grid-row: 1 / span 2; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; color: var(--child-accent-dark); background: var(--child-accent-soft); }
.child-template-card .child-template-icon svg { width: 21px; height: 21px; }
.child-template-card strong { align-self: end; padding-right: 18px; font-size: 13px; }
.child-template-card small { align-self: start; color: #91897e; font-size: 10px; line-height: 1.45; }
.child-tool-page.is-career .child-template-card { min-height: 80px; }
.child-career-select-control { gap: 8px; }
.child-career-age-mode { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 3px; }
.child-career-age-mode button { position: relative; display: grid; gap: 3px; min-height: 58px; padding: 9px 11px; border: 1px solid #ddd6ca; border-radius: 12px; color: #625d55; background: rgba(255,255,255,.82); text-align: left; cursor: pointer; transition: border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease; }
.child-career-age-mode button:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--child-accent) 48%, #d8d0c4); }
.child-career-age-mode button:focus-visible { outline: 3px solid color-mix(in srgb, var(--child-accent) 18%, transparent); outline-offset: 1px; }
.child-career-age-mode button.is-selected { color: var(--child-accent-dark); border-color: var(--child-accent); background: linear-gradient(135deg, #fffefa, var(--child-accent-soft)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--child-accent) 20%, white); }
.child-career-age-mode button.is-selected::after { content: "✓"; position: absolute; top: 7px; right: 9px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; color: #fff; background: var(--child-accent); font-size: 11px; font-weight: 800; }
.child-career-age-mode strong { font-size: 12px; }
.child-career-age-mode small { color: #928a80; font-size: 9px; line-height: 1.4; }
.child-career-age-mode button.is-selected small { color: color-mix(in srgb, var(--child-accent-dark) 72%, #80786e); }
.child-career-select-wrap select { color: var(--child-accent-dark); border-color: color-mix(in srgb, var(--child-accent) 30%, #d7d0c6); background: linear-gradient(120deg, #fffefa, var(--child-accent-soft)); }
.child-career-select-wrap select:focus,
.child-custom-career:focus { border-color: var(--child-accent); outline: 3px solid color-mix(in srgb, var(--child-accent) 16%, transparent); }
.child-career-select-wrap svg { color: var(--child-accent-dark); }
.child-custom-career { color: #4f6265; border-color: color-mix(in srgb, var(--child-accent) 30%, #d7d0c6); background: #fffefa; }

.child-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
.child-form-grid label { display: grid; gap: 6px; color: #6d665d; font-size: 11px; }
.child-form-grid label.is-wide { grid-column: 1 / -1; }
.child-form-grid input,
.child-form-grid textarea { box-sizing: border-box; width: 100%; border: 1px solid #dfd7ca; border-radius: 10px; outline: none; color: #4f4942; background: #fff; font: inherit; font-size: 12px; }
.child-form-grid input { height: 42px; padding: 0 12px; }
.child-form-grid textarea { min-height: 60px; padding: 10px 12px; resize: vertical; line-height: 1.5; }
.child-form-grid input:focus,
.child-form-grid textarea:focus { border-color: var(--child-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--child-accent) 15%, transparent); }

.child-suggestion-group { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.child-suggestion-group button { min-height: 30px; padding: 0 10px; border: 1px solid #e1d7c5; border-radius: 999px; color: #786345; background: #fffaf1; font-size: 10px; cursor: pointer; }
.child-suggestion-group button:hover { border-color: var(--child-accent); background: var(--child-accent-soft); }

.child-design-grid select { color: #5d5750; }
.child-director-note { color: var(--child-accent-dark); border-color: color-mix(in srgb, var(--child-accent) 28%, #e1d8ca); background: linear-gradient(120deg, #fffdf7, var(--child-accent-soft)); }
.child-director-note > svg { color: var(--child-accent); }
.child-tool-settings-card .start-repair-button { background: linear-gradient(105deg, var(--child-warm) 0%, color-mix(in srgb, var(--child-warm) 60%, var(--child-accent)) 52%, var(--child-accent-dark) 100%); box-shadow: 0 8px 17px color-mix(in srgb, var(--child-accent) 24%, transparent); }

.child-result-card { background: rgba(255,254,249,.9); }
.child-result-card .result-heading h2 { color: var(--child-accent-dark); }
.child-result-card .result-heading h2 svg { color: var(--child-accent); }
.child-result-stage { background: radial-gradient(circle at 50% 42%, rgba(244, 219, 193, .44), transparent 31%), linear-gradient(135deg, #f2ecdf, color-mix(in srgb, var(--child-accent-soft) 76%, #d8ddcf)); }
.child-next-step { border-color: color-mix(in srgb, var(--child-accent) 22%, #ded5c6); background: linear-gradient(90deg, var(--child-accent-soft), #fbf8f0); }
.child-next-step .next-step-visual { color: var(--child-accent-dark); }

.child-tool-page.is-artist .child-template-card:nth-child(1) .child-template-icon { background: #edf2ea; }
.child-tool-page.is-artist .child-template-card:nth-child(2) .child-template-icon { color: #996247; background: #f7e9df; }
.child-tool-page.is-artist .child-template-card:nth-child(3) .child-template-icon { color: #6d718f; background: #ececf5; }
.child-tool-page.is-artist .child-template-card:nth-child(4) .child-template-icon { color: #6f7d9a; background: #eaf0f6; }
.child-tool-page.is-artist .child-template-card:nth-child(5) .child-template-icon { color: #8a6c50; background: #f5eddf; }
.child-tool-page.is-honor .child-template-card:nth-child(1) .child-template-icon { color: #89734d; background: #f4ecda; }
.child-tool-page.is-honor .child-template-card:nth-child(2) .child-template-icon { color: #a86755; background: #f7e9e3; }
.child-tool-page.is-career .child-template-card .child-template-icon { color: #557579; background: #e8f1ef; }

@media (max-width: 1380px) {
  .child-tool-workspace { grid-template-columns: 470px minmax(0, 1fr); }
}

@media (max-width: 1120px) {
  .child-tool-workspace { grid-template-columns: 420px minmax(0, 1fr); }
}

@media (max-width: 860px) {
  .child-tool-workspace { grid-template-columns: 1fr; }
  .child-tool-settings-card { height: auto; }
}

@media (max-width: 560px) {
  .theme-tool-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .child-template-grid, .child-form-grid, .child-design-grid { grid-template-columns: 1fr; }
  .child-form-grid label.is-wide { grid-column: auto; }
  .child-photo-grid.is-single { grid-template-columns: 1fr; }
  .child-photo-grid.is-single::after { content: none; }
  .child-career-age-mode { grid-template-columns: 1fr; }
}

/* 儿童成长：顶部功能 tab 图标分色（未选中态保持特征色，选中时随主题高亮） */
/* 各功能主题色：选中态与勾选标记（上方 .theme-tool-picker）会自动跟随该变量 */
.theme-tool-tab[data-tool-nav="growth"] { --theme-tab-accent: #2e7d68; }
.theme-tool-tab[data-tool-nav="artist"] { --theme-tab-accent: #b45309; }
.theme-tool-tab[data-tool-nav="honor"] { --theme-tab-accent: #a16207; }
.theme-tool-tab[data-tool-nav="career"] { --theme-tab-accent: #4f46e5; }
.theme-tool-tab:not(.is-active)[data-tool-nav="growth"] svg,
.theme-tool-tab:not(.is-active)[data-tool-nav="artist"] svg,
.theme-tool-tab:not(.is-active)[data-tool-nav="honor"] svg,
.theme-tool-tab:not(.is-active)[data-tool-nav="career"] svg { color: var(--theme-tab-accent); }