:root {
  --accent: #72452f;
  --accent-dark: #3e493e;
  --accent-mid: #9b6b43;
  --accent-soft: #f4efe5;
}

body { background: radial-gradient(circle at 73% 8%, rgba(165, 133, 83, .1), transparent 28%), linear-gradient(135deg, #fffdf8 0%, #f8f3e9 100%); }
.portrait-header .old-photo-heading > div { display: grid; gap: 7px; }
.portrait-header .old-photo-heading h1 { line-height: 1; }
.portrait-header .old-photo-heading small { color: #8c7c6c; font-family: Georgia, "Songti SC", serif; font-size: 12px; letter-spacing: .14em; }
.portrait-header .repair-step.is-active span, .portrait-step-section .family-step-number { border-color: #3e493e; background: linear-gradient(135deg, #657263, #303a32); }
.portrait-header .header-action.is-accent { color: #3e493e; border-color: #cfc4ae; }

.portrait-workspace { grid-template-columns: 518px minmax(0, 1fr); }
.portrait-mode-tabs { grid-template-columns: repeat(4, 1fr); }
.portrait-mode-tabs .repair-mode { gap: 7px; padding-inline: 7px; font-size: 14px; }
.portrait-mode-tabs .repair-mode.is-active { color: #334038; background: #ecefe8; }
.growth-topic-tabs { display: none; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0 0 14px; }
.growth-topic-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; }
.growth-topic-tab:hover { color: #536c59; background: #eef3e9; border-color: rgba(115,139,116,.55); transform: translateY(-1px); }
.growth-topic-tab.is-active { color: #536c59; background: #eef3e9; border-color: rgba(115,139,116,.55); box-shadow: inset 0 0 0 1px rgba(115,139,116,.18); }
.growth-topic-tab svg { flex: 0 0 auto; width: 17px; height: 17px; }
.growth-topic-tab:not(.is-active)[data-tab-key="growth"] svg { color: #2e7d68; }
.growth-topic-tab:not(.is-active)[data-tab-key="artist"] svg { color: #b45309; }
.growth-topic-tab:not(.is-active)[data-tab-key="honor"] svg { color: #a16207; }
.growth-topic-tab:not(.is-active)[data-tab-key="career"] svg { color: #4f46e5; }

.portrait-settings-card { min-height: 690px; padding-top: 22px; }
.portrait-step-section { margin-bottom: 19px; padding-bottom: 19px; border-bottom: 1px solid #eee6db; }
.portrait-step-section h2 { gap: 9px; }
.portrait-step-section h2 .portrait-section-heading { flex: 0 1 auto; min-width: 0; width: auto; height: auto; color: inherit; background: none; font: inherit; font-weight: 700; white-space: nowrap; }
.portrait-step-section h2 em { color: #8f8882; font-size: 12px; }
.portrait-step-section h2 small { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 4px; margin-left: auto; padding: 4px 8px; border-radius: 999px; color: #5f655c; background: #f0f2ec; font-size: 11px; white-space: nowrap; }
.portrait-step-section h2 small svg { width: 13px; height: 13px; color: #6a786b; }

.portrait-photo-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; min-height: 116px; }
.portrait-photo-card, .portrait-photo-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 #ded7cc; border-radius: 11px; background: #f3efe7; }
.portrait-photo-card img { display: block; width: 100%; height: 100%; object-fit: cover; }
.portrait-photo-card > span { position: absolute; left: 5px; bottom: 5px; max-width: calc(100% - 10px); overflow: hidden; padding: 4px 6px; border-radius: 6px; color: #fff; background: rgba(38, 45, 38, .68); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.portrait-photo-card > b { position: absolute; top: 5px; left: 5px; padding: 3px 5px; border-radius: 5px; color: #fff; background: rgba(112, 76, 47, .84); font-size: 8px; font-weight: 600; }
.portrait-photo-card button { position: absolute; top: 5px; right: 5px; display: inline-flex; align-items: center; justify-content: center; width: 25px; height: 25px; padding: 0; border: 1px solid rgba(226, 219, 208, .9); border-radius: 50%; color: #4f4a43; background: rgba(255,255,255,.94); cursor: pointer; }
.portrait-photo-card button svg { width: 14px; height: 14px; }
.portrait-photo-add { flex-direction: column; gap: 6px; border-style: dashed; color: #746b61; cursor: pointer; }
.portrait-photo-add:hover { border-color: #879080; background: #f5f7f2; }
.portrait-photo-add svg { width: 29px; height: 29px; color: #6c796c; }
.portrait-photo-add strong { font-size: 11px; }
.portrait-photo-add small { color: #999188; font-size: 9px; }
.portrait-upload-summary { display: grid; grid-template-columns: 150px minmax(0, 1fr); align-items: center; gap: 14px; margin-top: 11px; }
.portrait-upload-summary .change-photo-button { width: 150px; height: 43px; color: #3f4b42; border-color: #cfd4ca; background: #f8faf6; }
.portrait-upload-summary > div { display: grid; gap: 4px; min-width: 0; }
.portrait-upload-summary strong { color: #4b4540; font-size: 12px; }
.portrait-upload-summary small { color: #938b83; font-size: 10px; line-height: 1.45; }

.portrait-choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; padding: 3px; }
.portrait-choice-grid[hidden] { display: none; }
.portrait-choice { position: relative; display: grid; align-content: end; gap: 5px; min-height: 102px; overflow: hidden; padding: 13px 14px; border: 1px solid #dfd7ca; border-radius: 12px; color: #fff; background: #5b5a50; text-align: left; cursor: pointer; isolation: isolate; transition: transform .18s ease, opacity .18s ease, filter .18s ease, box-shadow .18s ease; }
.portrait-choice::before { content: ""; position: absolute; inset: 0; z-index: -2; background-color: var(--scene-fallback, #e7dfd1); background-image: var(--scene-image, url("./assets/portrait/scene-atlas-display-v1.webp")); background-repeat: no-repeat; background-size: 200% 400%; background-position: var(--scene-position); transform: scale(1.01); }
.portrait-choice::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(53, 45, 35, .46) 0%, rgba(63, 54, 42, .2) 58%, rgba(255, 255, 255, .02) 100%), linear-gradient(180deg, rgba(255, 253, 247, .01), rgba(45, 39, 31, .28)); }
.portrait-choice:not(.is-selected) { opacity: .97; }
.portrait-choice:hover { opacity: 1; filter: none; transform: translateY(-1px); }
.portrait-choice.is-selected { border: 2px solid #fff7dd; padding: 12px 13px; outline: 3px solid #a96f2d; outline-offset: 1px; box-shadow: 0 7px 18px rgba(54, 45, 34, .22), inset 0 0 0 1px rgba(255, 255, 255, .74); transform: translateY(-1px); }
.portrait-choice.is-selected::after { background: linear-gradient(90deg, rgba(65, 48, 29, .42) 0%, rgba(77, 60, 38, .16) 56%, transparent 100%), linear-gradient(180deg, rgba(255, 250, 233, .01), rgba(67, 49, 29, .24)); }
.portrait-choice strong { display: flex; align-items: center; gap: 7px; font-family: Georgia, "Songti SC", serif; font-size: 14px; letter-spacing: .05em; }
.portrait-choice.is-selected strong::before { content: "✓"; display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; color: #624017; background: #fff1c6; box-shadow: 0 2px 7px rgba(26, 24, 18, .28); font-family: Arial, sans-serif; font-size: 12px; font-weight: 800; letter-spacing: 0; }
.portrait-choice strong, .portrait-choice small { text-shadow: 0 1px 4px rgba(35, 29, 22, .66); }
.portrait-choice small { color: rgba(255,255,255,.84); font-size: 10px; }
.portrait-scene-select-control { display: grid; gap: 7px; }
.portrait-scene-select-control[hidden] { display: none; }
.portrait-scene-select-wrap { display: block; position: relative; }
.portrait-scene-select-wrap select { width: 100%; height: 48px; padding: 0 42px 0 14px; border: 1px solid #d7ced5; border-radius: 11px; color: #5f4960; background: linear-gradient(120deg, #fffaf7, #f6eef5); font-size: 13px; font-weight: 600; cursor: pointer; appearance: none; }
.portrait-scene-select-wrap select:focus { border-color: #a66c82; outline: 3px solid rgba(166, 108, 130, .15); }
.portrait-scene-select-wrap svg { position: absolute; top: 50%; right: 14px; width: 18px; height: 18px; color: #8e657e; pointer-events: none; transform: translateY(-50%); }
.mode-growth .portrait-scene-select-wrap select { color: #506552; border-color: #c9d4c5; background: linear-gradient(120deg, #fffdf8, #f0f4ed); }
.mode-growth .portrait-scene-select-wrap select:focus { border-color: #829b82; outline-color: rgba(130, 155, 130, .17); }
.mode-growth .portrait-scene-select-wrap svg { color: #6f876f; }
.portrait-custom-identity { box-sizing: border-box; width: 100%; height: 46px; padding: 0 14px; border: 1px solid #d7ced5; border-radius: 11px; color: #5f4960; background: #fffdfb; font: inherit; font-size: 13px; }
.portrait-custom-identity:focus { border-color: #a66c82; outline: 3px solid rgba(166, 108, 130, .15); }
.portrait-custom-identity[hidden] { display: none; }

/* 场景图片图集：两列四行，按每格中心裁切为横向按钮背景。 */
.scene-studio { --scene-position: 0% 0%; --scene-fallback: #d8cfb5; }
.scene-shikumen { --scene-position: 100% 0%; --scene-fallback: #b8b0a5; }
.scene-study { --scene-position: 0% 33.333%; --scene-fallback: #d7b88e; }
.scene-ballroom { --scene-position: 100% 33.333%; --scene-fallback: #e9dfca; }
.scene-palace { --scene-position: 0% 66.667%; --scene-fallback: #c95b40; }
.scene-waterside { --scene-position: 100% 66.667%; --scene-fallback: #b8d6d0; }
.scene-academy { --scene-position: 0% 100%; --scene-fallback: #d9c5a4; }
.scene-bamboo { --scene-position: 100% 100%; --scene-fallback: #8eba77; }
.scene-modern-gallery { --scene-image: url("./assets/portrait/scene-atlas-contemporary-display-v1.webp"); --scene-position: 0% 0%; --scene-fallback: #e8e3d8; }
.scene-modern-rooftop { --scene-image: url("./assets/portrait/scene-atlas-contemporary-display-v1.webp"); --scene-position: 100% 0%; --scene-fallback: #d5c7ad; }
.scene-modern-apartment { --scene-image: url("./assets/portrait/scene-atlas-contemporary-display-v1.webp"); --scene-position: 0% 33.333%; --scene-fallback: #d5b996; }
.scene-modern-greenhouse { --scene-image: url("./assets/portrait/scene-atlas-contemporary-display-v1.webp"); --scene-position: 100% 33.333%; --scene-fallback: #9dbe8c; }
.scene-parallel-director { --scene-image: url("./assets/portrait/scene-atlas-contemporary-display-v1.webp"); --scene-position: 0% 66.667%; --scene-fallback: #c3b49d; }
.scene-parallel-artist { --scene-image: url("./assets/portrait/scene-atlas-contemporary-display-v1.webp"); --scene-position: 100% 66.667%; --scene-fallback: #d9a58d; }
.scene-parallel-scientist { --scene-image: url("./assets/portrait/scene-atlas-contemporary-display-v1.webp"); --scene-position: 0% 100%; --scene-fallback: #b6dbe0; }
.scene-parallel-explorer { --scene-image: url("./assets/portrait/scene-atlas-contemporary-display-v1.webp"); --scene-position: 100% 100%; --scene-fallback: #9db786; }
.scene-growth-natural { --scene-image: url("./assets/start/theme-childhood.png"); --scene-fallback: #d9cdb9; }
.scene-growth-forest { --scene-image: url("./assets/album/cute-cartoon-forest-friends-v1.webp"); --scene-fallback: #b8ceb3; }
.scene-growth-birthday { --scene-image: url("./assets/album/baby-rainbow-toys-v1.webp"); --scene-fallback: #ead2c2; }
.scene-growth-japanese { --scene-image: url("./assets/album/fresh-mint-leaves-v1.webp"); --scene-fallback: #d9e3d3; }
.scene-growth-retro { --scene-image: url("./assets/album/baby-sunny-playroom-v1.webp"); --scene-fallback: #d8bd9b; }
.scene-growth-dream { --scene-image: url("./assets/album/baby-purple-dreamland-v1.webp"); --scene-fallback: #d8cde2; }
.portrait-choice[class*="scene-growth-"]::before { background-size: cover; background-position: center; }
.mode-ancient .portrait-mode-tabs .repair-mode.is-active { color: #684320; background: #f7edda; }
.mode-ancient .portrait-step-section .family-step-number, .mode-ancient .repair-step.is-active span { border-color: #8a622e; background: linear-gradient(135deg, #b98a43, #735020); }
.mode-ancient .portrait-settings-card .start-repair-button { background: linear-gradient(105deg, #b3813b 0%, #74451f 57%, #4f3221 100%); box-shadow: 0 8px 16px rgba(105, 69, 31, .22); }
.mode-ancient .portrait-director-note { color: #6b4b26; border-color: #dfd0ae; background: linear-gradient(120deg, #fff9e9, #f2e6cb); }
.mode-ancient .portrait-director-note > svg { color: #a37738; }
.mode-ancient .portrait-result-card .result-heading h2 { color: #6c451f; }
.mode-ancient .portrait-result-stage { background: radial-gradient(circle at 50% 42%, rgba(229,210,165,.42), transparent 32%), linear-gradient(135deg, #ece5d3, #cfc1a5); }
.mode-ancient .portrait-choice.is-selected { outline-color: #b37a31; box-shadow: 0 7px 18px rgba(91, 57, 25, .24), inset 0 0 0 1px rgba(255, 255, 255, .76); }
.mode-modern .portrait-mode-tabs .repair-mode.is-active { color: #315c70; background: #e9f4f7; }
.mode-modern .portrait-step-section .family-step-number, .mode-modern .repair-step.is-active span { border-color: #477d8b; background: linear-gradient(135deg, #72a9b1, #396575); }
.mode-modern .portrait-settings-card .start-repair-button { background: linear-gradient(105deg, #6ea6ad 0%, #3b7184 55%, #31566f 100%); box-shadow: 0 8px 16px rgba(52, 103, 124, .2); }
.mode-modern .portrait-director-note { color: #3b6270; border-color: #c9dfe3; background: linear-gradient(120deg, #f5fbfb, #e5f1f3); }
.mode-modern .portrait-director-note > svg { color: #5f939f; }
.mode-modern .portrait-result-card .result-heading h2 { color: #37677a; }
.mode-modern .portrait-result-stage { background: radial-gradient(circle at 50% 42%, rgba(184, 220, 226, .46), transparent 32%), linear-gradient(135deg, #e8f1f2, #cadce0); }
.mode-modern .portrait-choice.is-selected { outline-color: #4d91a3; box-shadow: 0 7px 18px rgba(56, 111, 128, .2), inset 0 0 0 1px rgba(255, 255, 255, .78); }
.mode-parallel .portrait-mode-tabs .repair-mode.is-active { color: #744f6e; background: #f5ebf3; }
.mode-parallel .portrait-step-section .family-step-number, .mode-parallel .repair-step.is-active span { border-color: #8e657e; background: linear-gradient(135deg, #be7a71, #765b85); }
.mode-parallel .portrait-settings-card .start-repair-button { background: linear-gradient(105deg, #bd786c 0%, #8b5d76 54%, #5c587e 100%); box-shadow: 0 8px 16px rgba(117, 77, 105, .2); }
.mode-parallel .portrait-director-note { color: #704f68; border-color: #e1cedb; background: linear-gradient(120deg, #fff7f2, #f1e8f1); }
.mode-parallel .portrait-director-note > svg { color: #a66b7e; }
.mode-parallel .portrait-result-card .result-heading h2 { color: #77546f; }
.mode-parallel .portrait-result-stage { background: radial-gradient(circle at 50% 42%, rgba(226, 190, 199, .38), transparent 32%), linear-gradient(135deg, #f2e8ea, #d9cedd); }
.mode-parallel .portrait-choice.is-selected { outline-color: #a76576; box-shadow: 0 7px 18px rgba(130, 78, 102, .2), inset 0 0 0 1px rgba(255, 255, 255, .78); }
.mode-growth { background: radial-gradient(circle at 74% 8%, rgba(202, 218, 190, .22), transparent 28%), linear-gradient(135deg, #fffdf7 0%, #f7f1e6 100%); }
.mode-growth .portrait-mode-tabs { display: none; }
.mode-growth .growth-topic-tabs { display: grid; }
/* 2026-09-18 功能选择卡片：显隐改由外层容器控制（否则隐藏 nav 后卡片标题会空留在界面上）。
   儿童成长选择器默认隐藏，进入 growth 模式才显示；此时隐藏写真风格选择器。 */
.growth-picker { display: none; }
.mode-growth .portrait-picker { display: none; }
.mode-growth .growth-picker { display: grid; }
.mode-growth .portrait-settings-card { border-top: 1px solid #e7dfd1; border-radius: 22px; }
.mode-growth .portrait-step-section .family-step-number, .mode-growth .repair-step.is-active span { border-color: #79927a; background: linear-gradient(135deg, #a7b99b, #667f6b); }
.mode-growth .portrait-settings-card .start-repair-button { background: linear-gradient(105deg, #d79d78 0%, #a77669 52%, #687d6c 100%); box-shadow: 0 8px 16px rgba(128, 92, 74, .2); }
.mode-growth .portrait-director-note { color: #596a58; border-color: #d8dfcd; background: linear-gradient(120deg, #fbfaf0, #edf2e6); }
.mode-growth .portrait-director-note > svg { color: #789078; }
.mode-growth .portrait-result-card .result-heading h2 { color: #5c725d; }
.mode-growth .portrait-result-stage { background: radial-gradient(circle at 50% 42%, rgba(244, 218, 192, .48), transparent 31%), linear-gradient(135deg, #f3ecdf, #d8e0ce); }
.mode-growth .portrait-choice.is-selected { outline-color: #8aa083; box-shadow: 0 7px 18px rgba(93, 119, 91, .2), inset 0 0 0 1px rgba(255, 255, 255, .82); }

.portrait-chip-group { display: flex; flex-wrap: wrap; gap: 8px; }
.portrait-chip { position: relative; min-height: 39px; padding: 0 22px 0 13px; border: 1px solid #ded7cc; border-radius: 10px; color: #625c55; background: #fff; font-size: 12px; cursor: pointer; }
.portrait-chip:hover { border-color: #aaa996; background: #f9f8f3; }
.portrait-chip.is-selected { color: #fff; border-color: #4c5b50; background: linear-gradient(135deg, #69766b, #354238); box-shadow: 0 4px 9px rgba(48, 66, 53, .13); }
.mode-modern .portrait-chip.is-selected { border-color: #477d8b; background: linear-gradient(135deg, #70a8b0, #3d6f80); }
.mode-parallel .portrait-chip.is-selected { border-color: #8d6178; background: linear-gradient(135deg, #b87972, #745a81); }
.mode-growth .portrait-chip.is-selected { border-color: #718b72; background: linear-gradient(135deg, #9fb292, #607964); }
/* ★2026-09-18 单选 chip 的选中态打勾，与上方「功能选择卡片」保持一致。
   这 4 处 chip（爱情纪念/宠物时光/旅行相册的上传方式、创意写真的造型）都是 role=radiogroup 单选组。
   注意：选中态底色随风格换肤（默认深绿 / 现代蓝 / 平行人生紫 / 成长绿），一律是深底白字，
   故勾标记用「中性白圆 + 深色勾」，在四种底色上都协调，不去取底色做配对。
   .portrait-chip 的右侧 padding 对所有 chip 统一预留（含未选中），保证选中切换时宽度不跳。 */
.portrait-chip.is-selected::after {
  content: "✓";
  position: absolute; top: 3px; right: 3px;
  width: 13px; height: 13px;
  border-radius: 50%;
  color: #3d4a41; background: rgba(255, 255, 255, .92);
  font-size: 8px; font-weight: 700; line-height: 13px; text-align: center;
}

.portrait-design-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
.portrait-design-grid > label { display: grid; align-content: start; gap: 6px; color: #6e675f; font-size: 11px; }
.portrait-design-grid .family-compact-select select { height: 45px; font-size: 12px; }
.portrait-mood-field > small { color: #91877d; font-size: 10px; line-height: 1.45; }
.portrait-prompt-section { border-bottom: 0; }
.portrait-director-note { display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: center; gap: 11px; margin: -3px 0 17px; padding: 11px 13px; border: 1px solid #d7d8cc; border-radius: 11px; color: #455046; background: linear-gradient(120deg, #f5f6f0, #eeeadd); }
.portrait-director-note > svg { width: 28px; height: 28px; color: #687569; }
.portrait-director-note > div { display: grid; gap: 3px; }
.portrait-director-note strong { font-family: Georgia, "Songti SC", serif; font-size: 12px; }
.portrait-director-note small { color: #7c7c72; font-size: 10px; line-height: 1.45; }
.portrait-settings-card .start-repair-button { background: linear-gradient(105deg, #667469 0%, #354339 62%, #714b34 100%); box-shadow: 0 8px 16px rgba(49, 65, 53, .2); }

.portrait-result-card { background: rgba(255, 254, 249, .86); }
.portrait-result-card .result-heading h2 { color: #36453b; }
.portrait-result-card .result-heading h2 svg { color: #806344; }
.portrait-result-stage { background: radial-gradient(circle at 50% 42%, rgba(212,197,164,.35), transparent 31%), linear-gradient(135deg, #e6e1d5, #c7c0b0); }
.portrait-next-step { border-color: #d9d2c1; background: linear-gradient(90deg, #f3f4ed, #faf7ef); }
.portrait-next-step .next-step-visual { color: #56665a; }

@media (max-width: 1380px) {
  .portrait-workspace { grid-template-columns: 470px minmax(0, 1fr); }
  .portrait-photo-grid { grid-template-columns: repeat(4, minmax(80px, 1fr)); }
}

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

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

@media (max-width: 560px) {
  .portrait-header .old-photo-heading small { display: none; }
  .growth-topic-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .portrait-mode-tabs .repair-mode { font-size: 12px; }
  .portrait-photo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .portrait-upload-summary { grid-template-columns: 1fr; }
  .portrait-choice-grid, .portrait-design-grid { grid-template-columns: 1fr; }
}

/* ─── 工具页统一抬头：左侧工具标题 + 右侧全局导航（home 风格） ─── */
.tool-site-header {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 14px 31px;
  background: var(--paper, #fffdfb);
  border-bottom: 1px solid var(--line, #d8d4cf);
  min-height: 78px;
}
.tool-site-header-left { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.tool-site-header-back {
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 10px;
  border: 1px solid var(--soft-line, #e7e1d9);
  background: var(--paper, #fffdfb);
  color: var(--muted, #615b55);
}
.tool-site-header-back:hover { color: var(--accent, #a4642b); border-color: var(--accent, #a4642b); }
.tool-site-header-title { display: grid; gap: 2px; }
.tool-site-header-title h1 { margin: 0; font-size: 19px; letter-spacing: .08em; color: var(--ink, #28231f); font-weight: 700; }
.tool-site-header-title small { font-size: 12px; color: var(--muted, #615b55); }
.tool-site-header-nav {
  display: flex; gap: 22px;
  margin-left: auto; align-items: center;
}
.tool-site-header-nav a {
  position: relative;
  padding: 6px 0;
  font-size: 14px;
  color: var(--muted, #615b55);
  text-decoration: none;
}
.tool-site-header-nav a:hover { color: var(--ink, #28231f); }
.tool-site-header-nav a.is-active { color: var(--accent, #a4642b); font-weight: 600; }
.tool-site-header-nav a.is-active::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: -4px;
  height: 2px; background: var(--accent, #a4642b); border-radius: 1px;
}
.tool-site-header-help {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--soft-line, #e7e1d9);
  background: var(--paper, #fffdfb);
  color: var(--ink, #28231f);
  cursor: pointer;
  font-size: 14px;
}
.tool-site-header-help:hover { border-color: var(--accent, #a4642b); color: var(--accent, #a4642b); }
@media (max-width: 880px) {
  .tool-site-header { flex-wrap: wrap; padding: 12px 18px; }
  .tool-site-header-nav { order: 3; width: 100%; margin: 0; padding-top: 10px; overflow-x: auto; }
}

/* AI创意写真：风格卡片图标分色（未选中态特征色，选中随主题高亮） */
.portrait-mode-tabs .repair-mode:not(.is-active)[data-mode="republic"] svg { color: #9a6a3a; }
.portrait-mode-tabs .repair-mode:not(.is-active)[data-mode="ancient"] svg { color: #a16207; }
.portrait-mode-tabs .repair-mode:not(.is-active)[data-mode="modern"] svg { color: #315c70; }
.portrait-mode-tabs .repair-mode:not(.is-active)[data-mode="parallel"] svg { color: #744f6e; }

#portraitWardrobeGroup[hidden], #portraitWardrobeSelectField[hidden] { display: none; }