:root {
  --ink: #18231b;
  --muted: #697368;
  --paper: #fffef9;
  --green: #5ca638;
  --green-dark: #367426;
  --green-soft: #e8f3df;
  --memory: #b66243;
  --memory-soft: #f4e7de;
  --line: #dfe5d9;
  --shadow: 0 16px 46px rgba(39, 52, 38, .15);
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: #edeadf;
  font-family: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  color: var(--ink);
  display: flex; justify-content: center; align-items: flex-start;
  min-height: 100vh;
  padding: 16px;
}
button, input, textarea, select { font: inherit; }

.voice-input-wrap { position: relative; width: 100%; min-width: 0; }
.voice-input-wrap > input,
.voice-input-wrap > textarea { display: block; padding-right: 48px !important; }
.voice-input-wrap[data-voice-for="storySummary"] { margin-top: 9px; }
.voice-input-wrap[data-voice-for="storySummary"] > .story-summary { margin-top: 0; }
.voice-input-btn {
  position: absolute; z-index: 2; top: 6px; right: 6px; display: grid; place-items: center;
  width: 34px; height: 34px; padding: 0; border: 1px solid #cbd8c4; border-radius: 8px;
  background: #f5f8f3; color: var(--green-dark); cursor: pointer; line-height: 0;
}
.voice-input-btn:hover { border-color: #9ab38d; background: #edf4e8; }
.voice-input-btn:disabled { cursor: wait; opacity: .82; }
.voice-input-btn[data-voice-unavailable="true"] { cursor: not-allowed; opacity: .5; }
.voice-input-btn[data-voice-status="recording"] {
  border-color: #c87863; background: #fff2ee; color: #aa4f39;
  animation: voice-recording-pulse 1.15s ease-in-out infinite;
}
.voice-mic-icon {
  display: block; width: 18px; height: 18px; background: currentColor;
  -webkit-mask: url('../assets/mic.svg') center / contain no-repeat;
  mask: url('../assets/mic.svg') center / contain no-repeat;
}
.voice-input-btn[data-voice-status="recognizing"] .voice-mic-icon,
.voice-input-btn[data-voice-status="requesting"] .voice-mic-icon {
  width: 18px; height: 18px; box-sizing: border-box; background: transparent;
  border: 2px solid #b8c7b0; border-top-color: var(--green); border-radius: 50%;
  -webkit-mask: none; mask: none; animation: voice-recognizing-spin .75s linear infinite;
}
@keyframes voice-recording-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(170, 79, 57, 0); }
  50% { box-shadow: 0 0 0 4px rgba(170, 79, 57, .12); }
}
@keyframes voice-recognizing-spin { to { transform: rotate(360deg); } }
button { cursor: pointer; }

.phone {
  width: 100%; max-width: 430px;
  background: #fbfcf7;
  border-radius: 28px;
  box-shadow: var(--shadow);
  overflow: hidden;
  display: flex; flex-direction: column;
  min-height: 760px;
  position: relative;
}

/* 顶栏 */
.topbar {
  position: sticky; top: 0; z-index: 12;
  height: 58px; display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; align-items: center;
  padding: 0 8px; background: rgba(251,252,247,.95);
  border-bottom: 1px solid rgba(24,35,27,.07); backdrop-filter: blur(12px);
}
.topbar.user-mode { grid-template-columns: 46px minmax(0, 1fr) auto; }
.topbar-title { margin: 0; text-align: center; font-size: 18px; font-family: "Songti SC", "STSong", serif; }
.icon-btn { width: 42px; height: 42px; border: 0; border-radius: 999px; background: transparent; color: var(--ink); font-size: 24px; line-height: 1; }
.icon-btn:disabled { opacity: .25; }
.topbar-actions { display: flex; align-items: center; justify-content: flex-end; gap: 1px; }
.topbar-actions .icon-btn { width: 38px; height: 42px; font-size: 21px; }
.topbar-actions .quick-icon-btn { color: var(--green-dark); }
.topbar-actions .icon-btn:hover,
.topbar-actions .icon-btn:focus-visible { background: var(--green-soft); }

.modebar {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 16px; font-size: 12px; color: var(--muted);
  background: #f4f7ee; border-bottom: 1px solid var(--line);
}
.modebar[hidden] { display: none; }
.mode-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--memory); }
.mode-dot.real { background: var(--green); }

.screen { flex: 1; overflow-y: auto; }
.pad { min-height: 100%; padding: 18px 18px calc(94px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; }
.eyebrow { margin: 0 0 8px; color: var(--green-dark); font-size: 12px; font-weight: 750; letter-spacing: 0; }
.hero-title { margin: 0; font-family: "Songti SC", "STSong", serif; font-size: 27px; line-height: 1.22; letter-spacing: 0; }
.hero-copy { margin: 10px 0 0; color: var(--muted); font-size: 14px; line-height: 1.7; }
.hint { margin: 8px 0 0; color: var(--muted); font-size: 12px; line-height: 1.6; }

/* 上传 */
.uploader {
  margin-top: 16px; border: 2px dashed #c9d4c3; border-radius: 20px;
  background: #fff; min-height: 220px; display: grid; place-items: center; overflow: hidden;
  position: relative; cursor: pointer;
}
.uploader.empty-drag { border-color: var(--green); background: var(--green-soft); }
.uploader-empty { text-align: center; color: var(--muted); font-size: 14px; }
.uploader-icon { font-size: 40px; color: var(--green); line-height: 1; margin-bottom: 6px; }
.uploader-img { width: 100%; max-height: 340px; object-fit: contain; display: block; }
.uploader-img[hidden] { display: none; }
.text-btn { min-height: 36px; padding: 0 7px; border: 0; background: transparent; color: var(--green-dark); font-weight: 720; font-size: 13px; }

.creation-picker { min-width: 0; margin: 16px 0 0; padding: 0; border: 0; }
.creation-picker legend { margin-bottom: 9px; color: var(--ink); font-size: 14px; font-weight: 800; }
.creation-options { display: grid; gap: 8px; }
.creation-option {
  position: relative; min-width: 0; min-height: 66px; display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 22px; align-items: center; gap: 10px;
  padding: 8px 11px; border: 1px solid var(--line); border-radius: 8px; background: #fff; cursor: pointer;
}
.creation-option input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.creation-option.active { border-color: var(--green); box-shadow: inset 0 0 0 1px var(--green); background: #f8fcf5; }
.creation-option:focus-within { outline: 2px solid rgba(92,166,56,.25); outline-offset: 2px; }
.creation-option-preview {
  width: 48px; height: 48px; display: grid; place-items: center; border-radius: 7px;
  color: #fff; font-size: 12px; font-weight: 800;
}
.creation-preview-warm { background: #658b54; }
.creation-preview-video { background: #3f6d78; font-size: 18px; }
.creation-option-copy { min-width: 0; }
.creation-option-copy b, .creation-option-copy small { display: block; }
.creation-option-copy b { overflow-wrap: anywhere; font-size: 14px; }
.creation-option-copy small { margin-top: 4px; color: var(--muted); font-size: 11px; }
.creation-option > i {
  width: 20px; height: 20px; display: none; place-items: center; border-radius: 50%;
  background: var(--green); color: #fff; font-size: 12px; font-style: normal; font-weight: 800;
}
.creation-option.active > i { display: grid; }

.video-result-pad { gap: 0; }
.video-result-stage { margin-top: 18px; }
.video-source-preview, #videoResultPlayer {
  width: 100%; max-height: 54vh; display: block; object-fit: contain; border-radius: 8px;
  background: #e9e8e1; border: 1px solid var(--line);
}
#videoResultPlayer[hidden], .video-source-preview[hidden] { display: none; }
.video-progress-card {
  min-height: 74px; margin-top: 10px; padding: 12px; display: grid;
  grid-template-columns: 30px minmax(0, 1fr); align-items: center; gap: 10px;
  border: 1px solid #d7e3cf; border-radius: 8px; background: #f7faf4;
}
.video-progress-card[hidden] { display: none; }
.video-progress-card b, .video-progress-card small { display: block; }
.video-progress-card b { color: var(--green-dark); font-size: 14px; }
.video-progress-card small { margin-top: 4px; color: var(--muted); font-size: 11px; line-height: 1.5; }
.video-progress-spinner {
  width: 26px; height: 26px; border: 3px solid #d5e3cc; border-top-color: var(--green);
  border-radius: 50%; animation: spin .8s linear infinite;
}
.video-progress-card.error { border-color: #e6cabc; background: #fff7f2; }
.video-progress-card.error .video-progress-spinner { display: none; }
.video-progress-card.error { grid-template-columns: 1fr; }
.video-progress-card.error b { color: var(--memory); }
.video-retry-btn { width: 100%; min-height: 44px; margin-top: 10px; border-radius: 8px; }
.video-download-btn {
  min-height: 48px; display: grid; place-items: center; margin: 0; border-radius: 8px;
  background: var(--memory); color: #fff; text-decoration: none; font-weight: 800;
}
.video-download-btn[hidden] { display: none; }

.flow-steps {
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 7px 10px;
  margin: 0 0 16px; color: var(--green-dark);
}
.flow-count {
  display: inline-grid; place-items: center; min-width: 38px; height: 25px; padding: 0 8px;
  border-radius: 8px; background: var(--green-soft); font-size: 12px; font-weight: 800;
}
.flow-steps b { font-size: 14px; line-height: 1.4; }
.flow-track { grid-column: 1 / -1; height: 3px; overflow: hidden; border-radius: 999px; background: #dfe5d9; }
.flow-track i { display: block; height: 100%; border-radius: inherit; background: var(--green); }
.flow-title { margin-top: 0; font-size: 24px; }

.photo-analysis {
  margin-top: 12px; padding: 13px; border: 1px solid var(--line); border-radius: 16px; background: #f8faf5;
}
.photo-analysis-head { display: flex; align-items: center; gap: 8px; min-height: 30px; }
.photo-analysis-head strong { color: var(--green-dark); font-size: 13px; }
.photo-analysis-head span { flex: 1; color: var(--muted); font-size: 12px; line-height: 1.45; }
.photo-analysis-head span.analyzing::before {
  content: ''; display: inline-block; width: 10px; height: 10px; margin-right: 6px;
  border: 2px solid #cad9bf; border-top-color: var(--green); border-radius: 50%;
  vertical-align: -1px; animation: spin .8s linear infinite;
}
.photo-analysis-head span.done { color: var(--green-dark); font-weight: 700; }
.photo-analysis-head span.error { color: #a85d3d; }
.photo-analysis-help { margin: 7px 0 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
.photo-analysis-actions { display: flex; gap: 8px; margin-top: 10px; }
.photo-analysis-actions .secondary-btn,
.photo-analysis-actions .text-btn { flex: 1 1 0; width: 100%; min-height: 42px; margin: 0; border-radius: 12px; font-size: 13px; }
.photo-analysis-redraw-btn { color: var(--green-dark); background: var(--green-soft); border-color: #cfe2bf; }
.photo-analysis-redraw-btn:disabled { opacity: .58; }
.photo-analysis-result { margin-top: 10px; }
.photo-analysis-overlay {
  display: block; width: auto; max-width: 100%; height: auto; max-height: 300px; object-fit: contain;
  border-radius: 10px; background: #e8e8e2;
}
.photo-analysis-result .ref-overlay-wrap { width: fit-content; max-width: 100%; margin: 10px auto; }
.photo-analysis-result .ref-inline-people { margin: 0; }
.photo-person-hitbox {
  position: absolute; z-index: 3; min-width: 26px; min-height: 26px; padding: 0;
  border: 3px dashed var(--person-color, var(--green));
  background: transparent; border-radius: 5px;
  filter: drop-shadow(0 0 1px rgba(255,255,255,.96));
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.photo-person-hitbox:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.photo-person-marker {
  position: absolute; left: 50%; top: 0; width: 22px; height: 22px;
  border: 1px solid rgba(255,255,255,.94); border-radius: 999px;
  background: var(--person-color, var(--green)); color: #fff; box-shadow: 0 2px 7px rgba(24,35,27,.3);
  display: none; place-items: center; width: max-content; min-width: 22px; max-width: min(150px, 42vw);
  padding: 0 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 11px; font-weight: 850;
  transform: translate(-50%, -112%);
  pointer-events: none;
}
.photo-person-hitbox.marker-below .photo-person-marker { top: 100%; transform: translate(-50%, 12%); }
.photo-person-hitbox.marker-left .photo-person-marker { left: 0; top: 50%; transform: translate(-112%, -50%); }
.photo-person-hitbox.marker-right .photo-person-marker { left: 100%; top: 50%; transform: translate(12%, -50%); }
.photo-person-hitbox.active { z-index: 5; }
.photo-person-hitbox.active {
  border-width: 4px;
  border-style: dashed;
  border-color: var(--person-color, var(--memory));
  box-shadow: 0 0 0 2px rgba(255,255,255,.72);
}
.photo-person-hitbox.active .photo-person-marker {
  display: grid; z-index: 5; background: var(--person-color, var(--memory));
  box-shadow: 0 0 0 2px rgba(255,255,255,.8), 0 4px 10px rgba(24,35,27,.35);
}
.photo-analysis-editor { margin: 8px 0; }
.photo-person-popover {
  width: 100%; min-height: 76px;
  padding: 9px; border: 1px solid #d7c7b8; border-radius: 10px;
  background: #fffdf9; box-shadow: 0 7px 18px rgba(24,35,27,.13);
  display: grid; grid-template-columns: 40px minmax(0,1fr); gap: 8px;
}
.photo-person-popover > img {
  width: 40px; height: 46px; border-radius: 7px; object-fit: cover; background: #e7e4dc;
}
.photo-person-popover-main { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .7fr); gap: 8px; }
.photo-person-popover-field { min-width: 0; }
.photo-person-popover-main label {
  display: block; margin-bottom: 4px; color: var(--muted); font-size: 10px; font-weight: 700;
}
.photo-person-popover-main input {
  width: 100%; min-width: 0; height: 32px; padding: 5px 7px;
  border: 1px solid #cbd6c4; border-radius: 7px; background: #fff; outline: none;
}
.photo-person-popover-main input:focus {
  border-color: var(--green); box-shadow: 0 0 0 2px rgba(92,166,56,.13);
}
.photo-person-popover-actions {
  grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 6px;
}
.photo-person-popover-actions .mini-btn { min-height: 28px; }
.photo-person-popover-actions .photo-person-delete {
  margin-right: auto; border-color: #dfb8a7; background: #fff8f4; color: #9a4f35;
}
.photo-person-popover-actions .photo-person-delete:active { background: #fcece5; }
.photo-analysis-result .ref-inline-person.active {
  border-color: var(--green); background: var(--green-soft);
  box-shadow: inset 0 0 0 1px var(--green);
}

.field-label { display: block; font-size: 13px; font-weight: 700; color: var(--green-dark); margin-bottom: 8px; }
.memory-form {
  margin-top: 16px; padding: 16px; border: 1px solid var(--line); background: #fff; border-radius: 18px;
}
.memory-form-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin-bottom: 14px; color: var(--green-dark); font-size: 15px; font-weight: 800;
}
.memory-form-head small { color: var(--muted); font-size: 11px; font-weight: 650; }
.memory-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.memory-story-field { margin-top: 14px; }
.memory-story-field textarea { min-height: 156px; font-size: 15px; line-height: 1.75; }
.memory-story-field .memory-beat-hint { margin-left: 0; }
.memory-question-note { margin: -2px 0 12px; color: var(--muted); font-size: 11px; line-height: 1.6; }
.memory-question-list { display: grid; gap: 12px; }
.memory-question-list .memory-field { margin-top: 0; }
.memory-question { padding: 12px; border: 1px solid #e0e4dd; border-radius: 8px; background: #fafbf9; }
.memory-question > span { align-items: flex-start; font-size: 13px; line-height: 1.5; }
.memory-question > span b { display: inline-grid; place-items: center; flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%; background: var(--green-soft); color: var(--green-dark); font-size: 11px; }
.memory-question .memory-beat-hint { margin: -1px 0 8px 29px; }
.memory-question textarea { min-height: 76px; background: #fff; }
.memory-more { margin-top: 14px; border-top: 1px solid var(--line); }
.memory-more > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 50px; color: var(--green-dark); font-size: 14px; font-weight: 760; cursor: pointer;
}
.memory-more > summary span { color: var(--muted); font-size: 11px; font-weight: 650; }
.memory-more-body { padding: 0 0 4px; }
.memory-more-body > .memory-field { margin-top: 12px; }
.memory-more-body .style-picker { margin-top: 14px; }
.memory-clues {
  margin-top: 12px; padding: 13px; border: 1px solid #d8e2d1; border-radius: 14px;
  background: linear-gradient(145deg, #fbfdf8, #f5f9f0);
}
.memory-clues-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.memory-clues-head strong { display: block; color: var(--green-dark); font-size: 13px; }
.memory-clues-head small { display: block; margin-top: 3px; color: var(--muted); font-size: 10px; line-height: 1.4; }
.memory-clues-search {
  flex: 0 0 auto; min-height: 34px; padding: 0 13px; border: 1px solid #b8cba9; border-radius: 999px;
  background: #fff; color: var(--green-dark); font-size: 12px; font-weight: 760;
}
.memory-clues-search:disabled { opacity: .55; }
.memory-clues-note { margin: 9px 0 0; color: #6d7669; font-size: 10px; line-height: 1.55; }
.memory-clues-list { display: grid; gap: 9px; margin-top: 11px; }
.memory-clue-card { padding: 11px; border: 1px solid #dce4d6; border-radius: 12px; background: #fff; }
.memory-clue-card.stale { opacity: .62; background: #f7f8f5; }
.memory-clue-card.stale button,
.memory-clue-card.stale input { cursor: not-allowed; }
.memory-clue-main { display: grid; grid-template-columns: 54px 1fr; gap: 10px; }
.memory-clue-thumb-button {
  width: 54px; height: 54px; padding: 0; border: 0; border-radius: 9px;
  background: transparent; cursor: zoom-in; overflow: hidden;
}
.memory-clue-thumb-button:focus-visible { outline: 3px solid rgba(95, 139, 70, .35); outline-offset: 2px; }
.memory-clue-thumb { width: 54px; height: 54px; border-radius: 9px; object-fit: cover; background: #edf1e8; }
.memory-clue-thumb-button:hover .memory-clue-thumb { transform: scale(1.06); }
.memory-clue-thumb-button .memory-clue-thumb { transition: transform .18s ease; }
.memory-clue-thumb.placeholder { display: grid; place-items: center; color: #7c8777; font-size: 9px; font-weight: 750; }
.memory-image-viewer {
  position: fixed; inset: 0; z-index: 1200; display: grid; place-items: center;
  padding: 28px 18px; background: rgba(24, 31, 22, .82); backdrop-filter: blur(4px);
}
.memory-image-viewer[hidden] { display: none; }
.memory-image-viewer figure { width: min(92vw, 760px); margin: 0; text-align: center; }
.memory-image-viewer img {
  display: block; width: 100%; max-height: 78vh; object-fit: contain; border-radius: 14px;
  background: #f2f4ef; box-shadow: 0 22px 60px rgba(0,0,0,.34);
}
.memory-image-viewer figcaption { margin-top: 12px; color: #fff; font-size: 13px; line-height: 1.5; }
.memory-image-viewer-close {
  position: fixed; top: 18px; right: 18px; width: 42px; height: 42px; border: 1px solid rgba(255,255,255,.5);
  border-radius: 50%; background: rgba(22,28,20,.55); color: #fff; font-size: 18px; cursor: pointer;
}
body.memory-image-viewer-open { overflow: hidden; }
.memory-clue-type { color: #7c8a74; font-size: 10px; font-weight: 700; }
.memory-clue-title { margin-top: 2px; color: #344132; font-size: 13px; font-weight: 800; }
.memory-clue-evidence, .memory-clue-summary, .memory-clue-question {
  margin: 5px 0 0; color: #687164; font-size: 11px; line-height: 1.55;
}
.memory-clue-question { color: #374536; font-weight: 700; }
.memory-clue-source { color: var(--green-dark); font-size: 10px; }
.memory-clue-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 9px; }
.memory-clue-action {
  min-height: 33px; padding: 4px; border: 1px solid #d3ddd0; border-radius: 9px;
  background: #fafcf8; color: #53604e; font-size: 11px; font-weight: 700;
}
.memory-clue-action.active { border-color: var(--green); background: var(--green-soft); color: var(--green-dark); }
.memory-clue-confirm { margin-top: 9px; padding: 9px; border-radius: 10px; background: #f4f8ef; }
.memory-clue-confirm label { display: block; color: #596454; font-size: 10px; font-weight: 700; }
  .memory-clue-confirm input {
    width: 100%; min-height: 38px; margin-top: 5px; padding: 8px 9px; border: 1px solid #cbd8c4;
    border-radius: 9px; background: #fff; color: var(--ink); font-size: 12px;
  }
  .memory-clue-reference-note {
    margin: 9px 0 0; padding-top: 9px; border-top: 1px dashed #cbd8c4;
    color: #687164; font-size: 10px; line-height: 1.55;
  }
.confirmed-clues {
  margin-top: 12px; padding: 13px; border: 1px solid #cbd8c4; border-radius: 14px; background: #f7faf4;
}
.confirmed-clues > strong { color: var(--green-dark); font-size: 13px; }
.confirmed-clue-row { margin-top: 7px; color: #465143; font-size: 12px; line-height: 1.55; }
.memory-field { display: block; margin-top: 12px; }
.memory-field:first-child, .memory-grid .memory-field { margin-top: 0; }
.memory-field > span {
  display: flex; align-items: center; gap: 7px; margin-bottom: 6px;
  color: #374536; font-size: 12px; font-weight: 750;
}
.memory-field em { color: #8a8f86; font-size: 10px; font-style: normal; font-weight: 600; }
.memory-field em.required { color: #a85d3d; }
.memory-field input, .memory-field textarea {
  width: 100%; border: 1px solid #d9dfd3; border-radius: 11px; padding: 10px 11px;
  background: #fffdf9; color: var(--ink); outline: none; font-size: 14px; line-height: 1.55;
}
.memory-field input { min-height: 43px; }
.memory-field textarea { resize: vertical; min-height: 68px; }
.memory-field-main textarea { min-height: 126px; font-size: 15px; line-height: 1.7; }
.memory-timeline {
  min-width: 0; margin: 16px 0 0; padding: 14px; border: 1px solid #d9dfd3; border-radius: 14px;
  background: #f8faf5;
}
.memory-timeline legend { padding: 0 7px; color: var(--green-dark); font-size: 14px; font-weight: 800; }
.memory-timeline > p { margin: 0 0 10px; color: var(--muted); font-size: 11px; line-height: 1.6; }
.memory-beat > span b {
  display: inline-grid; place-items: center; flex: 0 0 22px; width: 22px; height: 22px;
  border-radius: 50%; background: var(--green-soft); color: var(--green-dark); font-size: 11px;
}
.memory-beat-hint {
  display: block; margin: -1px 0 7px 29px; color: var(--muted); font-size: 10px; line-height: 1.5;
}
.memory-beat textarea { min-height: 76px; background: #fff; }
.memory-field input:focus, .memory-field textarea:focus {
  border-color: var(--green); box-shadow: 0 0 0 3px rgba(111, 163, 74, .12);
}
.char-count { display: block; text-align: right; color: var(--muted); font-size: 11px; margin-top: 5px; }
@media (max-width: 380px) {
  .memory-grid { grid-template-columns: 1fr; }
  .memory-grid .memory-field + .memory-field { margin-top: 10px; }
  .photo-person-popover-main,
  .person-edit-fields { grid-template-columns: 1fr; }
  .memory-clues-head { align-items: flex-start; }
  .memory-clue-main { grid-template-columns: 44px 1fr; }
  .memory-clue-thumb, .memory-clue-thumb-button { width: 44px; height: 44px; }
}

.primary-btn {
  width: 100%; min-height: 48px; margin-top: 14px; border: 0; border-radius: 12px;
  background: var(--green); color: white; font-size: 16px; font-weight: 780;
  box-shadow: 0 7px 18px rgba(92,166,56,.22);
}
.primary-btn:disabled { opacity: .6; box-shadow: none; }
.secondary-btn {
  width: 100%; min-height: 42px; margin-top: 9px; border: 1px solid #cbd6c4;
  border-radius: 10px; background: white; color: var(--green-dark); font-size: 14px; font-weight: 730;
}
button:focus-visible, summary:focus-visible { outline: 3px solid rgba(92, 166, 56, .25); outline-offset: 2px; }

/* 故事卡 */
.story-card { margin-top: 14px; padding: 14px; border-radius: 8px; background: #f8faf5; border: 1px solid #d8e0d3; }
.story-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.story-card-head strong { color: var(--green-dark); font-size: 14px; }
.story-card-head small { color: var(--green-dark); font-size: 11px; font-weight: 700; }
.story-title-input {
  width: 100%; min-height: 44px; padding: 8px 10px; border: 1px solid #cbd6c4; border-radius: 8px;
  outline: none; font-family: "Songti SC", "STSong", serif; font-size: 20px; font-weight: 700;
  background: #fff; color: var(--ink); cursor: text;
}
.story-summary {
  width: 100%; margin-top: 9px; padding: 10px 11px; border: 1px solid #cbd6c4; border-radius: 8px;
  outline: none; font-size: 15px; line-height: 1.8; color: #3f493f; background: #fff;
  resize: vertical; min-height: 200px; cursor: text;
}
.story-optimize-actions.inline {
  position: static; width: 100%; transform: none; padding: 10px 0 4px;
  border-top: 0; background: transparent;
}
.story-result-head {
  margin-top: 18px; padding-top: 17px; border-top: 1px solid var(--line);
}
.story-result-head h3 { margin: 0; color: var(--green-dark); font-size: 18px; }
.story-result-head p { margin: 6px 0 0; color: var(--muted); font-size: 13px; line-height: 1.65; }
.story-title-input:hover, .story-summary:hover { border-color: #9eb393; }
.story-title-input:focus, .story-summary:focus {
  border-color: var(--green); box-shadow: 0 0 0 3px rgba(92,166,56,.12);
}
.fact-row { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.fact { padding: 7px 10px; border-radius: 999px; background: var(--green-soft); color: var(--green-dark); font-size: 12px; font-weight: 720; }
.people-name-conflict {
  margin-top: 14px; padding: 14px; border: 1px solid #d7b7a7; border-radius: 14px;
  background: #fff8f3; color: #6f3e2b;
}
.people-name-conflict > strong { display: block; font-size: 15px; }
.people-name-conflict ul { margin: 9px 0 0; padding-left: 20px; }
.people-name-conflict li { margin-top: 5px; font-size: 13px; line-height: 1.55; }
.people-name-conflict p { margin: 9px 0 0; color: #79594c; font-size: 12px; line-height: 1.6; }
.people-name-conflict-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 11px; }
.people-name-conflict-actions .secondary-btn,
.people-name-conflict-actions .text-btn { width: 100%; min-height: 42px; margin: 0; }
.people-name-conflict-actions .secondary-btn {
  border-color: #c9957f; color: #8e4d32; background: #fffdfb; font-size: 13px;
}
.people-name-conflict-actions .text-btn { color: #8e4d32; }

.section-title { margin: 22px 0 10px; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.section-title h3 { margin: 0; font-family: "Songti SC", "STSong", serif; font-size: 19px; }
.section-title small { color: var(--muted); font-size: 11px; }

.panel-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.panel-item {
  position: relative; min-width: 0; min-height: 122px; padding: 11px; border: 1px solid #cfd9ca;
  border-radius: 8px; background: #fff; color: var(--ink); text-align: left;
}
.panel-item::after { content: '修改'; position: absolute; right: 10px; top: 14px; color: var(--green-dark); font-size: 10px; font-weight: 700; }
.panel-item:hover, .panel-item:focus-visible { border-color: #8daf80; background: #fbfdf9; }
.panel-no { width: 25px; height: 25px; display: grid; place-items: center; margin-bottom: 9px; border-radius: 50%; background: #f0eadf; color: #7d5c47; font-family: Georgia, serif; font-size: 12px; font-weight: 700; }
.panel-copy { min-width: 0; }
.panel-copy b { display: block; padding-right: 32px; font-size: 14px; line-height: 1.4; }
.panel-copy p {
  display: -webkit-box; margin: 5px 0 0; overflow: hidden; color: var(--muted); font-size: 12px; line-height: 1.55;
  -webkit-box-orient: vertical; -webkit-line-clamp: 2;
}
.panel-edit-title,
.panel-edit-text { width: 100%; min-width: 0; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--ink); outline: none; }
.panel-edit-title { padding: 5px 7px; font-size: 14px; font-weight: 750; }
.panel-edit-text { min-height: 66px; padding: 7px; resize: vertical; font: inherit; font-size: 13px; line-height: 1.55; color: #566052; }
.panel-edit-title:hover,
.panel-edit-text:hover { border-color: #dfe5d9; background: #fbfcf9; }
.panel-edit-title:focus,
.panel-edit-text:focus { border-color: var(--green); background: #fff; box-shadow: 0 0 0 3px rgba(92,166,56,.12); }
.panel-item small { font-size: 12px; line-height: 1.45; color: var(--muted); font-weight: 500; }
.panel-item small.panel-outline { color: var(--muted); }
.panel-item small.panel-source { color: var(--muted); }
.panel-evidence { margin-top: 2px; font-weight: 500; }
.panel-evidence summary { width: fit-content; color: var(--green-dark); font-size: 11px; line-height: 1.5; cursor: pointer; }
.panel-evidence .panel-source { display: block; margin-top: 3px; }

/* 结果 inspect */
.result-head { display: flex; align-items: center; gap: 10px; }
.badge { padding: 4px 10px; border-radius: 999px; background: var(--memory-soft); color: var(--memory); font-size: 11px; font-weight: 750; white-space: nowrap; }
.result-photo-actions {
  width: 100%; min-height: 72px; margin-top: 12px; display: grid; grid-template-columns: 1fr 1fr;
  overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: #fff;
}
.orig-photo,
.result-video-action {
  width: 100%; min-width: 0; min-height: 72px; margin: 0; padding: 8px; display: grid;
  grid-template-columns: 54px minmax(0, 1fr); align-items: center; gap: 9px;
  border: 0; background: #fff; color: var(--ink); text-align: left;
}
.result-video-action { border-left: 1px solid var(--line); }
.orig-photo:active,
.result-video-action:active { background: #f6f8f3; }
.orig-photo img { width: 54px; height: 54px; object-fit: cover; display: block; border-radius: 6px; background: #e8e1d4; }
.result-video-icon {
  width: 42px; height: 42px; display: grid; place-items: center; justify-self: center;
  border-radius: 50%; background: var(--green-soft); color: var(--green-dark); font-size: 15px;
}
.result-video-action.running .result-video-icon {
  border: 2px solid #cbdac3; border-top-color: var(--green); background: transparent; color: transparent;
  animation: spin .8s linear infinite;
}
.result-video-action.completed .result-video-icon { background: var(--green); color: #fff; }
.orig-photo-copy b, .orig-photo-copy small { display: block; }
.orig-photo-copy { min-width: 0; }
.orig-photo-copy b { overflow-wrap: anywhere; font-size: 13px; line-height: 1.35; }
.orig-photo-copy small { margin-top: 3px; color: var(--muted); font-size: 11px; }

.block { margin-top: 18px; }
.block-title { font-size: 13px; font-weight: 750; color: var(--green-dark); margin-bottom: 8px; }
.narration-show, .story-show { margin: 0; font-size: 15px; line-height: 1.8; color: #3f493f; background: white; border: 1px solid var(--line); border-radius: 14px; padding: 13px; }
.complete-story { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); }
.complete-story-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.complete-story-head .block-title { margin: 0; }
.story-only-action {
  min-height: 34px; padding: 0 10px; border: 1px solid #bfd0b8; border-radius: 7px;
  background: #f7fbf5; color: var(--green-dark); font-size: 12px; font-weight: 760;
}
.story-only-action:active { background: #edf5ea; }
.complete-story > p { margin: 0; color: #3f493f; font-size: 16px; line-height: 1.9; white-space: pre-wrap; }
.complete-story > .secondary-btn { width: auto; min-height: 38px; margin-top: 12px; padding: 0 13px; font-size: 13px; }
.story-polish-panel { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
.story-polish-panel[hidden] { display: none; }
.story-polish-field { display: block; margin-top: 16px; }
.story-polish-field:first-child { margin-top: 0; }
.story-polish-field > span {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin-bottom: 7px; color: #374536; font-size: 13px; font-weight: 760;
}
.story-polish-field > span small { color: var(--muted); font-size: 11px; font-weight: 600; }
.story-polish-field textarea {
  width: 100%; min-height: 220px; padding: 13px; resize: vertical;
  border: 1px solid #cbd6c4; border-radius: 8px; background: #fff;
  color: var(--ink); font-size: 15px; line-height: 1.85; outline: none;
}
.story-polish-field textarea:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(92,166,56,.12); }
.story-version-actions { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.story-version-actions .secondary-btn { min-height: 40px; margin-top: 9px; font-size: 13px; }
.story-version-actions .text-btn { margin-top: 10px; }
.story-image-sync-note {
  margin: 12px 0 0; padding: 10px 11px; border-left: 3px solid var(--memory);
  background: #fff8f3; color: #725344; font-size: 12px; line-height: 1.65;
}
.story-fold { border: 1px solid var(--line); border-radius: 14px; background: #fffdf8; padding: 0; overflow: hidden; }
.story-fold summary { list-style: none; cursor: pointer; margin: 0; padding: 13px; display: flex; align-items: center; justify-content: space-between; }
.story-fold summary::-webkit-details-marker { display: none; }
.story-fold summary::after { content: '展开'; color: var(--muted); font-size: 11px; font-weight: 700; }
.story-fold[open] summary::after { content: '收起'; }
.story-fold .story-show { margin: 0 13px 12px; border-radius: 12px; }
.story-fold .fact-row { margin: 0 13px 13px; }

#inspectPanels,
#sequelPanels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; width: 100%; }
.inspect-panel { position: relative; min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.comic-tile-story { height: 98px; padding: 9px 10px 8px; overflow: hidden; background: #fff; border-bottom: 1px solid var(--line); }
.comic-tile-story b { display: block; overflow: hidden; color: var(--ink); font-size: 13px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.comic-tile-story p { display: -webkit-box; height: 52px; margin: 4px 0 0; overflow: hidden; color: var(--muted); font-size: 12px; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
#inspectPanels .comic-tile-story {
  position: relative; width: 100%; border: 0; border-bottom: 1px solid var(--line);
  appearance: none; color: inherit; text-align: left; cursor: pointer;
}
#inspectPanels .comic-tile-story b { padding-right: 34px; }
#inspectPanels .comic-tile-story::after {
  content: '补充'; position: absolute; top: 9px; right: 9px; color: var(--memory);
  font-size: 10px; font-weight: 760;
}
#inspectPanels .comic-tile-story[data-regenerating="true"]::after { content: '重画中'; }
#inspectPanels .comic-tile-story:disabled { cursor: wait; opacity: .72; }
#inspectPanels .comic-tile-story:active { background: #fff7f2; }
#inspectPanels .comic-tile-story:focus-visible { outline: 2px solid var(--memory); outline-offset: -2px; }
.comic-tile-no { display: inline-grid; place-items: center; width: 18px; height: 18px; margin-right: 5px; border-radius: 5px; background: var(--green-soft); color: var(--green-dark); font-size: 10px; vertical-align: -2px; }
.comic-tile-open { position: relative; width: 100%; padding: 0; display: block; overflow: hidden; border: 0; background: #ece7dd; color: #fff; text-align: left; aspect-ratio: 1; }
.inspect-panel img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; background: #e7e0d1; }
.comic-tile-caption {
  position: absolute; top: 9px; left: 9px; max-width: calc(100% - 18px); padding: 5px 8px 5px 5px;
  border-radius: 6px; background: rgba(24, 35, 27, .68); color: #fff; font-size: 12px; font-weight: 760;
  line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.comic-tile-caption b { display: inline-grid; place-items: center; width: 18px; height: 18px; margin-right: 5px; border-radius: 50%; background: rgba(255,255,255,.92); color: #485342; font-size: 10px; }
.comic-tile-retry { width: 100%; min-height: 36px; border: 0; border-top: 1px solid #e5d6cb; background: #fff8f3; color: var(--memory); font-size: 12px; font-weight: 760; }
.src-tag { display: inline-block; font-size: 10px; padding: 2px 7px; border-radius: 999px; background: #f0eadf; color: #7d5c47; margin-left: 6px; }
.regen-btn { border: 1px solid #d8c7ba; background: #fff9f3; color: var(--memory); border-radius: 12px; min-height: 38px; padding: 0 12px; font-weight: 720; font-size: 13px; }

.panel-regen-editor {
  position: fixed; inset: 0; z-index: 1250; display: grid; align-items: end;
  padding: 18px; background: rgba(24, 31, 22, .58); backdrop-filter: blur(3px);
}
.panel-regen-editor[hidden] { display: none; }
.panel-regen-sheet {
  width: min(100%, 620px); max-height: min(82vh, 680px); margin: 0 auto; padding: 18px;
  overflow-y: auto; border-radius: 18px 18px 10px 10px; background: #fffdf9;
  box-shadow: 0 22px 60px rgba(18, 27, 18, .28);
}
.panel-regen-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.panel-regen-head h2 { margin: 0; font-family: "Songti SC", "STSong", serif; font-size: 21px; }
.panel-regen-field { display: block; margin-top: 15px; }
.panel-regen-field span { display: block; margin-bottom: 7px; color: var(--green-dark); font-size: 13px; font-weight: 760; }
.panel-regen-field input,
.panel-regen-field textarea {
  width: 100%; border: 1px solid #cbd6c4; border-radius: 8px; padding: 11px 12px;
  background: #fff; color: var(--ink); font-size: 14px; line-height: 1.65; outline: none;
}
.panel-regen-field textarea { min-height: 132px; resize: vertical; }
.panel-regen-field input:focus,
.panel-regen-field textarea:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(111, 163, 74, .12); }
.panel-regen-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 17px; }
.panel-story-save,
.panel-regen-confirm { min-height: 46px; padding: 5px 9px; border-radius: 9px; font-size: 13px; font-weight: 760; line-height: 1.35; }
.panel-story-save { border: 1px solid #b9cdb2; background: #f5faf2; color: var(--green-dark); }
.panel-regen-confirm { border: 0; background: var(--memory); color: #fff; }
.panel-story-save:disabled,
.panel-regen-confirm:disabled { opacity: .58; }
body.panel-regen-editor-open { overflow: hidden; }

.scene-editor, .comic-viewer {
  position: fixed; inset: 0; z-index: 1250; display: grid; align-items: end;
  padding: 18px; background: rgba(24, 31, 22, .62); backdrop-filter: blur(3px);
}
.scene-editor[hidden], .comic-viewer[hidden] { display: none; }
.scene-editor-sheet, .comic-viewer-sheet {
  width: min(100%, 620px); max-height: min(88vh, 720px); margin: 0 auto; padding: 18px;
  overflow-y: auto; border-radius: 18px 18px 10px 10px; background: #fffdf9;
  box-shadow: 0 22px 60px rgba(18, 27, 18, .28);
}
.scene-editor-head, .comic-viewer-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.scene-editor-head h2 { margin: 0; font-family: "Songti SC", "STSong", serif; font-size: 21px; }
.scene-editor-sheet > .primary-btn { margin-top: 16px; }
.comic-viewer { align-items: center; }
.comic-viewer-sheet { border-radius: 10px; }
.comic-viewer-head { min-height: 32px; margin-bottom: 10px; color: var(--muted); font-size: 12px; font-weight: 700; }
.comic-viewer-sheet > img { width: 100%; max-height: 52vh; display: block; object-fit: contain; border-radius: 8px; background: #e7e0d1; }
.comic-viewer-sheet h2 { margin: 13px 0 0; font-family: "Songti SC", "STSong", serif; font-size: 20px; }
.comic-viewer-sheet > p { margin: 6px 0 0; color: var(--muted); font-size: 13px; line-height: 1.65; }
.comic-viewer-actions { display: flex; justify-content: space-between; gap: 8px; margin-top: 14px; }
.icon-action { width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 9px; background: #fff; color: var(--ink); font-size: 25px; }
.icon-action:disabled { opacity: .3; }
body.scene-editor-open, body.comic-viewer-open { overflow: hidden; }

.style-row { display: flex; gap: 10px; align-items: center; }
.style-row select { flex: 1; min-height: 46px; border: 1px solid var(--line); border-radius: 14px; padding: 0 12px; background: white; color: var(--ink); }
@media (max-width: 380px) {
  .style-row { flex-direction: column; align-items: stretch; }
  .style-row .secondary-btn { width: 100%; margin-top: 0; }
}
.comic-style-picker { padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: #f8faf5; }
.comic-style-picker .block-title { display: block; margin-bottom: 8px; }
.comic-style-picker select { width: 100%; min-height: 48px; border: 1px solid var(--line); border-radius: 12px; padding: 0 12px; background: white; color: var(--ink); }
.comic-style-picker .hint { margin: 7px 0 0; }

.people-teaser { margin-top: 22px; padding: 14px 15px; border-radius: 17px; background: #f1f6ec; border: 1px solid #d9e6cf; }
.people-teaser strong { display: block; font-size: 14px; }
.people-teaser span { display: block; margin-top: 4px; color: var(--muted); font-size: 12px; line-height: 1.45; }

.ref-debug { display: grid; gap: 12px; }
.ref-step { background: white; border: 1px solid var(--line); border-radius: 16px; padding: 10px; overflow: hidden; }
.ref-step-title { font-size: 12px; font-weight: 780; color: var(--green-dark); margin-bottom: 8px; }
.ref-overlay-img, .ref-card-img { width: 100%; display: block; border-radius: 12px; background: #ede5d5; border: 1px solid #e8dfcf; }
.ref-card-img { max-height: 320px; object-fit: contain; }
.ref-people-grid { display: grid; grid-template-columns: 1fr; gap: 9px; }
.ref-person { display: grid; grid-template-columns: 86px 1fr; gap: 10px; align-items: center; padding: 8px; border-radius: 13px; background: #fbfaf4; border: 1px solid #eee6d8; }
.ref-person img { width: 86px; height: 98px; object-fit: cover; border-radius: 12px; background: #e7e0d1; }
.ref-person-meta { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ref-person-meta b { font-size: 13px; color: var(--ink); }
.ref-person-meta span { font-size: 11px; color: #7d5c47; font-weight: 700; }
.ref-person-meta small { font-size: 11px; color: var(--muted); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ref-person-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ref-person-head b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ref-name-edit { display: grid; grid-template-columns: 1fr auto auto; gap: 6px; align-items: center; }
.ref-name-input { min-width: 0; height: 30px; padding: 0 8px; border-radius: 9px; border: 1px solid #d8c8b7; background: #fff; font-size: 12px; font-weight: 800; color: var(--ink); outline: none; }
.ref-name-input:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(111, 163, 74, .14); }
.mini-btn { height: 28px; padding: 0 8px; border-radius: 999px; border: 1px solid #d8c8b7; background: #fffaf4; color: #8b5e42; font-size: 11px; font-weight: 850; cursor: pointer; }
.mini-btn.primary { border-color: var(--green); background: #edf6e8; color: var(--green-dark); }

.people-list { display: grid; gap: 10px; margin-top: 14px; }
.person-edit { display: grid; grid-template-columns: 54px 1fr; gap: 11px; align-items: center; min-height: 70px; padding: 8px 10px; background: white; border: 1px solid var(--line); border-radius: 8px; }
.person-face { display: block; width: 54px; height: 54px; border-radius: 16px; object-fit: cover; object-position: center 35%; background: #e7e4dc; border: 2px solid #f5f1e8; }
.person-face-empty { display: grid; place-items: center; color: #7b8177; font-size: 20px; font-weight: 800; }
.person-edit-main { min-width: 0; }
.person-edit-fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(88px, .55fr); gap: 8px; }
.person-edit-field { min-width: 0; }
.person-edit-field label { display: block; margin-bottom: 4px; color: var(--muted); font-size: 10px; font-weight: 700; }
.person-edit input {
  width: 100%; min-width: 0; min-height: 40px; border: 1px solid #cbd6c4; border-radius: 8px;
  outline: none; padding: 7px 9px; font-size: 14px; font-weight: 700; background: #fffdf9;
}
.person-edit input:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(92,166,56,.12); }
.person-photo-status { display: block; margin-top: 5px; color: #8a8f86; font-size: 11px; }

.toast {
  position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%);
  min-width: 200px; padding: 12px 16px; border-radius: 13px;
  background: rgba(24,35,27,.93); color: white; text-align: center; font-size: 13px;
  box-shadow: 0 10px 30px rgba(0,0,0,.22); z-index: 50;
}
.toast.error { background: rgba(126, 55, 38, .97); cursor: pointer; }

.spinner { display: inline-block; width: 16px; height: 16px; border: 2px solid rgba(255,255,255,.5); border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite; vertical-align: -3px; margin-right: 8px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- 提示词调试台 ---------- */
.console-mask { position: absolute; inset: 0; background: rgba(20,28,22,.42); z-index: 40; }
/* 调试台显式声明了 display，会盖过 UA 的 [hidden]{display:none}，需补回 */
.console[hidden], .console-mask[hidden] { display: none; }
.console {
  position: absolute; top: 0; right: 0; height: 100%; width: 100%; max-width: 360px;
  background: #fbfcf7; z-index: 45; box-shadow: -18px 0 50px rgba(20,30,22,.28);
  display: flex; flex-direction: column; animation: slideIn .22s ease;
}
@keyframes slideIn { from { transform: translateX(40px); opacity: .4; } to { transform: none; opacity: 1; } }
.console-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 14px 10px; border-bottom: 1px solid var(--line); }
.console-title { font-size: 16px; font-weight: 800; letter-spacing: .02em; }
.icon-btn.small { width: 34px; height: 34px; font-size: 18px; }
.console-tabs { display: flex; gap: 6px; padding: 10px 12px 0; }
.ctab { flex: 1; border: 1px solid var(--line); background: #fff; color: var(--muted); border-radius: 12px; min-height: 40px; font-weight: 720; font-size: 13px; }
.ctab.active { background: var(--green-soft); color: var(--green-dark); border-color: #cfe2bf; }
.ctab-body { flex: 1; overflow-y: auto; padding: 14px 14px 6px; }
.field { margin-bottom: 16px; }
.field > label { display: block; font-size: 13px; font-weight: 720; margin-bottom: 6px; color: var(--ink); }
.field input[type=text], .field textarea, .field select {
  width: 100%; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px;
  font-size: 13px; line-height: 1.55; color: var(--ink); background: #fff; outline: none;
}
.field input[type=text]:focus, .field textarea:focus, .field select:focus { border-color: var(--green); }
.field textarea { resize: vertical; min-height: 44px; font-family: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif; }
.field input[type=range] { width: 100%; accent-color: var(--green); }
.field-hint { margin: 6px 0 0; font-size: 11px; color: var(--muted); line-height: 1.5; }
.mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; color: var(--green-dark); }
.console-foot { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--line); background: #f4f7ee; }
.console-foot .text-btn { font-size: 12px; padding: 8px 4px; }
.console-foot .secondary-btn { margin-left: auto; }

/* 结果页：逐格生成状态条 / 占位 / 失败 */
.gen-status { margin: 4px 0 2px; padding: 9px 13px; border-radius: 12px; background: var(--green-soft); color: var(--green-dark); font-size: 13px; font-weight: 700; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.gen-status .resume-btn { margin-left: auto; padding: 6px 14px; border: none; border-radius: 8px; background: var(--green); color: #fff; font-size: 12px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.gen-status .resume-btn:hover { filter: brightness(1.05); }
.panel-loading { min-height: 200px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: var(--muted); font-size: 13px; background: #f4f6f0; }
#inspectPanels .panel-loading { position: absolute; inset: 0; min-height: 100%; gap: 8px; font-size: 12px; }
#sequelPanels .panel-loading { position: absolute; inset: 0; min-height: 100%; gap: 8px; font-size: 12px; }
.panel-loading .spinner { border-color: rgba(92,166,56,.35); border-top-color: var(--green); }
.panel-failed { position: absolute; inset: 0; min-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; color: var(--memory); background: var(--memory-soft); text-align: center; padding: 10px; }
.panel-failed .pf-title { font-weight: 760; font-size: 14px; }
.panel-failed .pf-msg { font-size: 11px; opacity: .8; max-width: 260px; word-break: break-all; }

#sequelPanels .inspect-panel { aspect-ratio: auto; }
#sequelPanels .comic-tile-media { position: relative; aspect-ratio: 1; overflow: hidden; background: #e7e0d1; }
#sequelPanels .inspect-panel img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; background: #e7e0d1; }
#sequelPanels .comic-tile-media .panel-loading { position: absolute; inset: 0; min-height: 100%; }
#sequelPanels .inspect-body { display: none; }

/* 下载拼接按钮 */
.download-btn {
  background: var(--memory) !important;
  box-shadow: 0 8px 20px rgba(182,98,67,.28) !important;
}
.download-btn:hover { filter: brightness(1.06); }

.result-more { margin-top: 20px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.result-more > summary { min-height: 42px; display: flex; align-items: center; justify-content: space-between; list-style: none; color: var(--green-dark); font-size: 13px; font-weight: 760; cursor: pointer; }
.result-more > summary::-webkit-details-marker { display: none; }
.result-more > summary::after { content: '⌄'; color: var(--muted); font-size: 20px; }
.result-more[open] > summary::after { content: '⌃'; }
.result-more-body { padding: 0 0 14px; }
.result-more-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.result-more-actions .secondary-btn { min-height: 40px; margin: 0; border-radius: 9px; font-size: 12px; }
.result-more .style-row { display: grid; grid-template-columns: 1fr; gap: 8px; }
.result-more .style-row .secondary-btn { min-height: 40px; margin: 0; border-radius: 9px; font-size: 12px; }
.download-hint { margin: 14px 0 0; color: var(--muted); text-align: center; font-size: 11px; }
.fixed-primary {
  position: fixed; z-index: 20; left: 50%; bottom: 0; width: min(100%, 430px);
  transform: translateX(-50%); padding: 10px 18px calc(10px + env(safe-area-inset-bottom));
  background: #fff; border-top: 1px solid var(--line);
}
.fixed-primary .primary-btn { margin-top: 0; }

@media (max-width: 600px) {
  body { height: 100dvh; min-height: 0; padding: 0; overflow: hidden; }
  .phone { height: 100dvh; min-height: 0; border-radius: 0; box-shadow: none; }
  .screen { min-height: 0; overscroll-behavior: contain; }
}

/* v2 版本标识 */
.version-tag { display:inline-block; padding:1px 7px; margin-left:6px; border-radius:999px; background:var(--memory); color:#fff; font-size:11px; font-weight:800; letter-spacing:.04em; vertical-align:2px; }
.style-picker { margin: 16px 0 14px; }
.style-picker select, .sequel-style-select {
  width: 100%; min-height: 48px; border: 1px solid var(--line); border-radius: 12px;
  padding: 0 12px; background: #fff; color: var(--ink); font: inherit; font-size: 16px;
}
.style-picker select option { font: inherit; font-size: 16px; }
.center-btn { display: block; margin: 6px auto 0; }

.ref-fold { padding: 0; }
.ref-fold summary { list-style: none; cursor: pointer; padding: 12px 13px; display: flex; justify-content: space-between; }
.ref-fold summary::-webkit-details-marker { display: none; }
.ref-fold summary::after { content: '展开'; color: var(--muted); font-size: 11px; }
.ref-fold[open] summary::after { content: '收起'; }
.ref-overlay-wrap { position: relative; margin: 0 10px 10px; }
.ref-overlay-wrap .ref-overlay-img { margin: 0; }
.ref-overlay-marker {
  position: absolute; z-index: 2; max-width: min(210px, 70%); border: 2px dashed rgba(57,115,49,.9);
  border-radius: 5px;
  filter: drop-shadow(0 0 1px rgba(255,255,255,.96));
}
.ref-overlay-marker.active { z-index: 4; border-width: 3px; border-color: var(--memory); box-shadow: 0 0 0 2px rgba(255,255,255,.72); }
.ref-overlay-marker .ref-marker-name { display: none; }
.ref-marker-name {
  min-height: 28px; padding: 4px 9px 4px 5px; border: 1px solid rgba(255,255,255,.82);
  border-radius: 999px; background: rgba(32,41,34,.82); color: #fff; display: inline-flex;
  align-items: center; gap: 5px; font-size: 12px; font-weight: 800; cursor: pointer;
}
.ref-marker-name span { width: 18px; height: 18px; border-radius: 50%; background: var(--green); display: grid; place-items: center; }
.ref-marker-edit { display: grid; grid-template-columns: minmax(96px,1fr) auto auto; gap: 5px; padding: 6px; background: #fffaf4; border-radius: 10px; }
.ref-inline-people { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; margin: 0 10px 10px; }
.ref-inline-person { min-width: 0; padding: 6px; border: 1px solid #eee6d8; border-radius: 10px; background: #fbfaf4; display: flex; align-items: center; gap: 6px; font-weight: 800; text-align: left; }
.ref-inline-person.active { border-color: var(--memory); background: #fff7ed; box-shadow: 0 0 0 2px rgba(185,117,63,.12); }
.ref-inline-person img { width: 34px; height: 40px; border-radius: 7px; object-fit: cover; }
.ref-inline-person-index { flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--green); color: #fff; font-size: 11px; }
.ref-inline-person span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 420px) {
  .ref-inline-people { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

.sequel-main-btn { background: var(--green-dark) !important; }
.teaser-btns { display: flex; gap: 4px; margin-top: 8px; }
.teaser-btns .text-btn { flex: 1; }
.sequel-entry { color: var(--memory) !important; }
.sequel-panel, .drafts-panel { max-width: 380px; }
.sequel-body, .drafts-body { flex: 1; min-height: 0; overflow-y: auto; padding: 14px; }
.console-primary { flex: 0 0 auto; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: rgba(251,252,247,.98); }
.console-primary .primary-btn { margin: 0; }
.sequel-sec-title { font-size: 13px; font-weight: 800; margin: 8px 0; }
.sequel-toolbar { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; }
.sequel-count { margin-left: auto; color: var(--muted); font-size: 12px; }
.sequel-people-grid { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.sequel-person-card { width: 76px; padding: 8px 4px; border: 2px solid var(--line); border-radius: 12px; background: #fff; display: flex; flex-direction: column; align-items: center; gap: 5px; position: relative; }
.sequel-person-card.selected { border-color: var(--green); background: var(--green-soft); }
.sequel-person-card.selected::after { content: '✓'; position: absolute; top: -7px; right: -7px; width: 20px; height: 20px; border-radius: 50%; background: var(--green); color: #fff; display: grid; place-items: center; }
.sp-face { width: 48px; height: 48px; border-radius: 50%; overflow: hidden; background: #e7e4dc; display: grid; place-items: center; }
.sp-face img { width: 100%; height: 100%; object-fit: cover; }
.sp-name { max-width: 100%; font-size: 12px; font-weight: 750; overflow: hidden; text-overflow: ellipsis; }
.tpl-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 8px; }
.tpl-chip { padding: 7px 11px; border: 1px solid #d8c8b7; border-radius: 999px; background: #fffaf4; color: #8b5e42; font-weight: 700; }
.sequel-textarea { width: 100%; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; font: inherit; line-height: 1.65; resize: vertical; }
.sequel-go { width: 100%; }
.sequel-cast-row { display: flex; flex-wrap: wrap; gap: 7px; margin: 10px 0; }
.sequel-actions { display: flex; flex-direction: column; gap: 6px; margin-top: 18px; }
.draft-empty { text-align: center; color: var(--muted); padding: 40px 0; }
.draft-card { display: grid; grid-template-columns: 72px 1fr 30px; gap: 11px; align-items: center; padding: 10px; margin-bottom: 10px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.draft-cover { width: 72px; height: 72px; overflow: hidden; border-radius: 10px; background: #e7e0d1; }
.draft-cover img { width: 100%; height: 100%; object-fit: cover; }
.draft-meta { min-width: 0; }
.draft-title, .draft-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.draft-title { font-weight: 800; }
.draft-sub, .draft-time { color: var(--muted); font-size: 11px; margin-top: 3px; }
.draft-del { width: 28px; height: 28px; border: 0; background: transparent; color: var(--muted); }

/* 小程序式扁平视觉：保留故事气质，减少装饰性容器与阴影。 */
:root {
  --ink: #1f2a21;
  --muted: #788178;
  --paper: #fff;
  --green: #4f9844;
  --green-dark: #397331;
  --green-soft: #edf5ea;
  --memory: #a85f43;
  --memory-soft: #f7ece7;
  --line: #e4e8e2;
  --shadow: none;
}

body { padding: 0; background: #f1f3ef; }
.phone {
  min-height: 100dvh; border-radius: 0; background: #f7f8f5;
  box-shadow: none;
}
.topbar {
  height: 54px; padding: 0 8px; background: #fff;
  border-bottom-color: var(--line); backdrop-filter: none;
}
.topbar-title {
  overflow: hidden; font-family: inherit; font-size: 17px; font-weight: 650;
  text-overflow: ellipsis; white-space: nowrap;
}
.topbar-actions .icon-btn:hover,
.topbar-actions .icon-btn:focus-visible { background: #f0f3ef; }
.screen { background: #f7f8f5; }
.pad { padding: 16px 16px calc(92px + env(safe-area-inset-bottom)); }

.hero-title { font-family: inherit; font-size: 24px; font-weight: 700; line-height: 1.35; }
#resultTitle,
#sequelTitle { font-family: "Songti SC", "STSong", serif; font-weight: 700; }
.hero-copy { margin-top: 6px; font-size: 13px; line-height: 1.65; }
.flow-steps { margin-bottom: 14px; }
.flow-count { height: 24px; border-radius: 6px; }
.flow-track,
.flow-track i { border-radius: 0; }

.uploader {
  min-height: 200px; margin-top: 14px; border-width: 1px; border-radius: 8px;
  background: #fff;
}
.uploader-icon { font-size: 36px; }
.photo-analysis,
.memory-form,
.memory-clues,
.confirmed-clues,
.story-card,
.people-name-conflict,
.comic-style-picker,
.people-teaser,
.ref-step {
  border-radius: 8px; box-shadow: none;
}
.photo-analysis { padding: 12px; background: #f4f6f2; }
.memory-form { margin-top: 14px; padding: 14px; background: #fff; }
.story-input-form { margin-top: 14px; }
.memory-form-head { margin-bottom: 12px; }
.memory-clues { padding: 12px; background: #f5f8f3; }
.memory-clue-card,
.confirmed-clues { border-radius: 8px; background: #fff; }
.memory-clue-confirm { border-radius: 6px; background: #f4f7f2; }
.memory-clues-search { border-radius: 7px; }

.memory-field input,
.memory-field textarea,
.story-title-input,
.story-summary,
.story-polish-field textarea,
.panel-regen-field input,
.panel-regen-field textarea,
.person-edit input,
.sequel-textarea,
.style-picker select,
.sequel-style-select,
.style-row select,
.comic-style-picker select {
  border-color: #d8ddd6; border-radius: 8px; background: #fff;
}
.memory-field input:focus,
.memory-field textarea:focus,
.story-title-input:focus,
.story-summary:focus,
.story-polish-field textarea:focus,
.panel-regen-field input:focus,
.panel-regen-field textarea:focus,
.person-edit input:focus,
.sequel-textarea:focus {
  border-color: var(--green); box-shadow: 0 0 0 2px rgba(79, 152, 68, .12);
}

.primary-btn {
  min-height: 48px; border-radius: 8px; background: var(--green);
  box-shadow: none; font-size: 16px; font-weight: 700;
}
.secondary-btn,
.regen-btn,
.panel-story-save,
.panel-regen-confirm,
.icon-action { border-radius: 8px; box-shadow: none; }
.download-btn { box-shadow: none !important; }

.story-card { padding: 13px; background: #fff; border-color: var(--line); }
.story-card-head small { color: var(--muted); font-weight: 600; }
.story-title-input { font-size: 19px; }
.story-summary { min-height: 190px; }
.panel-item,
.inspect-panel,
.orig-photo,
.person-edit,
.draft-card { border-radius: 8px; background: #fff; box-shadow: none; }
.panel-item { border-color: #dce1da; }
.panel-no { border-radius: 6px; }
.fact { padding: 5px 8px; font-size: 11px; }

.narration-show,
.story-show,
.story-fold { border-radius: 8px; background: #fff; }
.complete-story { margin-top: 20px; padding-top: 16px; }
.result-more { margin-top: 18px; }
.gen-status { border-radius: 6px; background: var(--green-soft); font-weight: 650; }
.comic-tile-caption { border-radius: 4px; }

.style-picker { margin: 14px 0 10px; }
.style-picker select,
.sequel-style-select,
.comic-style-picker select { min-height: 44px; font-size: 14px; }
.people-teaser { background: #f3f6f1; }
.sequel-person-card,
.tpl-chip,
.draft-cover,
.ref-inline-person,
.ref-person,
.ref-person img { border-radius: 8px; }
.tpl-chip { background: #fff; }

.fixed-primary { padding-inline: 16px; }