/* C「温暖手帐」适老展示层。独立于 memoir.js；不改变数据、路由、草稿与权限。
 * 参考用户选定 C 原图：奶油纸面、珊瑚强调、暖棕文字、书册与照片框。
 * 不复刻小手写字/贴纸；正文、辅助字与控件一起放大。印刷继续沿用原规则。
 */
@media screen {
  .mm-app, .mm-app.mm-light, .mm-modal, #main-app.theme-memoir[data-group="memoir"] {
    --mm-page: var(--vg-bg); --mm-surface: var(--vg-paper); --mm-soft: var(--vg-soft);
    --mm-text: var(--vg-ink); --mm-secondary: var(--vg-ink2);
    --mm-accent: var(--vg-seal); --mm-accent-hover: var(--vg-seal-dk); --mm-accent-soft: var(--vg-seal-soft);
    --mm-border: var(--vg-line-strong); --mm-line: var(--vg-soft); --mm-focus: var(--vg-info);
    --mm-radius: 16px; --mm-gutter: 24px;
    --mm-font: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
    --amber: var(--mm-accent); --amber-hi: var(--mm-accent-hover);
    font-family: var(--mm-font); color: var(--mm-text); color-scheme: light;
  }
  .mm-app, .mm-app.mm-standalone, .mm-app.mm-light, #view-memoir.mm-light-host {
    background: var(--mm-page, var(--vg-bg)); color: var(--mm-text, var(--vg-ink));
  }
  .mm-app, .mm-modal { font-size: 20px; line-height: 1.8; }
  /* 字号档位(标准/大/特大):memoir.js 设置 --mm-zoom,整体放大;原生弹窗见各自样式文件 */
  .mm-app { zoom: var(--mm-zoom, 1); }
  .mm-app * { scroll-margin-block: 32px; }
  .mm-app .mm-wrap { max-width: 840px; padding: 40px var(--mm-gutter) 96px; }
  .mm-app .mm-wrap.wide { max-width: 1160px; }
  .mm-app .mm-muted, .mm-modal .mm-muted { color: var(--mm-secondary); font-size: 18px; line-height: 1.8; }
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  .mm-app .mm-card, .mm-modal .mm-card { padding: 24px; background: var(--mm-surface); border: 1px solid var(--mm-line); border-radius: var(--mm-radius); color: var(--mm-text); box-shadow: 0 3px 10px #57331b05; }
  .mm-app .mm-card + .mm-card { margin-top: 24px; }
  .mm-app .mm-card.clickable { border-left: 4px solid var(--vg-seal); }
  .mm-app .mm-card.clickable:hover { background: var(--vg-paper); border-color: var(--vg-line-strong); }
  .mm-app .mm-h2 { color: var(--mm-text); font-family: var(--mm-font); font-size: 24px; line-height: 1.6; margin: 40px 0 16px; gap: 16px; }
  .mm-app .mm-h2 small { color: var(--mm-secondary); font-size: 18px; }
  .mm-app .mm-story-title { font-family: var(--mm-font); font-size: 24px; line-height: 1.6; font-weight: 600; margin-bottom: 12px; }
  /* 原渲染器的提问字号为内联 16/20px；只在展示层统一为易读尺寸。 */
  .mm-app [data-prompt] > .mm-story-title { font-size: 20px !important; }
  .mm-app .mm-story-open { display: block; padding: 0; border: 0; background: transparent; color: inherit; text-align: left; cursor: pointer; }
  .mm-app .mm-excerpt { color: var(--mm-secondary); font-size: 20px; line-height: 1.9; margin-top: 16px; -webkit-line-clamp: 3; }
  .mm-app .mm-cover-img { padding: 8px; border: 1px solid var(--mm-line); background: var(--vg-paper); border-radius: 4px; max-height: 320px; }
  .mm-app .mm-col-side { background: var(--vg-soft); border: 1px solid var(--vg-line); padding: 24px; border-radius: 16px; }
  .mm-app .mm-col-main > .mm-row > div:first-child > b { font-family: var(--mm-font); font-size: 24px; font-weight: 600; }
  .mm-app .mm-body { max-width: 34em; }
  .mm-app .mm-body p, .mm-app.mm-elder .mm-body p { font-size: 20px; line-height: 1.95; margin-bottom: 1.5em; color: var(--mm-text); }
  .mm-app .mm-badge { font-size: 16px; border-radius: 6px; color: var(--vg-ink2); border-color: var(--vg-line-strong); background: var(--vg-soft); padding: 4px 12px; white-space: normal; }
  .mm-app .mm-badge.ok, .mm-app .mm-rv-banner.ok { color: var(--vg-ok); border-color: var(--vg-ok); background: var(--vg-ok-soft); }
  .mm-app .mm-badge.warn, .mm-app .mm-rv-banner.warn { color: var(--vg-wait); border-color: var(--vg-line-strong); background: var(--vg-wait-soft); }
  .mm-app .mm-badge.info, .mm-app .mm-chip.on { color: var(--vg-seal); border-color: var(--vg-line-strong); background: var(--vg-seal-soft); }
  .mm-app .mm-btn, .mm-app.mm-light .mm-btn, .mm-modal .mm-btn { min-height: 52px; padding: 12px 24px; border: 1px solid var(--vg-line-strong); border-radius: 12px; color: var(--vg-ink); background: var(--vg-paper); font-size: 20px; line-height: 1.5; font-weight: 550; }
  .mm-app .mm-row > *, .mm-app :is(.mm-btn, .mm-iconbtn), .mm-modal .mm-btn { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
  .mm-app .mm-btn-sm, .mm-modal .mm-btn-sm { font-size: 18px; min-height: 48px; padding: 12px 16px; }
  .mm-app .mm-btn-primary, .mm-app.mm-light .mm-btn-primary, .mm-modal .mm-btn-primary { background: var(--mm-accent); color: var(--vg-on-seal); border-color: var(--mm-accent); border-radius: 24px; }
  .mm-app .mm-btn:hover, .mm-modal .mm-btn:hover { background: var(--vg-soft); border-color: var(--vg-line-strong); }
  .mm-app .mm-btn-primary:hover, .mm-modal .mm-btn-primary:hover { background: var(--mm-accent-hover); color: var(--vg-on-seal); border-color: var(--mm-accent-hover); }
  .mm-app .mm-btn-danger, .mm-modal .mm-btn-danger { color: var(--vg-danger); border-color: #b27369; }
  .mm-app :is(.mm-btn, .mm-iconbtn):disabled, .mm-modal .mm-btn:disabled { color: var(--vg-ink2); background: var(--vg-soft); border-color: var(--vg-line-strong); opacity: 1; cursor: not-allowed; }
  .mm-app .mm-btn.busy { opacity: .65; }
  .mm-app .mm-iconbtn, .mm-app.mm-light .mm-iconbtn, .mm-modal .mm-iconbtn { color: var(--vg-ink2); border-radius: 12px; font-size: 18px; gap: 8px; }
  /* 老渲染器为排序/删图按钮指定内联 24/30px，保证视觉按钮也有 48px 触控区。 */
  .mm-app .mm-iconbtn, .mm-modal .mm-iconbtn { min-width: 48px !important; min-height: 48px !important; height: auto !important; }
  .mm-app .mm-iconbtn:hover, .mm-app.mm-light .mm-iconbtn:hover, .mm-modal .mm-iconbtn:hover { color: var(--vg-seal-dk); background: var(--vg-soft); }
  .mm-control-label { font-family: var(--mm-font); font-size: 18px; line-height: 1.5; }
  .mm-app .mm-iconbtn:has(.mm-control-label), .mm-modal .mm-iconbtn:has(.mm-control-label) { padding: 12px 12px; flex-wrap: wrap; }
  .mm-app :is(.mm-input, .mm-textarea, .mm-select), .mm-app.mm-light :is(.mm-input, .mm-textarea, .mm-select), .mm-modal :is(.mm-input, .mm-textarea, .mm-select) {
    font-family: var(--mm-font); font-size: 20px; color: var(--mm-text); background: var(--vg-paper); border: 1px solid var(--vg-line-strong); border-radius: 12px; padding: 16px 16px; line-height: 1.9;
  }
  .mm-app :is(.mm-input, .mm-textarea)::placeholder, .mm-modal :is(.mm-input, .mm-textarea)::placeholder { color: var(--vg-ink2); opacity: 1; }
  .mm-app .mm-select option, .mm-modal .mm-select option { background: var(--vg-paper); color: var(--vg-ink); }
  .mm-app .mm-label, .mm-modal .mm-label { color: var(--mm-secondary); font-size: 18px; margin: 24px 0 12px; }
  .mm-app #mm-editor { border-top: 3px solid var(--vg-seal); padding: 32px; }
  .mm-app #mm-edit-body { background: var(--vg-paper); }
  .mm-app .mm-ver { border-left-color: var(--vg-line-strong); }
  .mm-app .mm-ver.cur { border-left-color: var(--vg-ok); }
  .mm-app .mm-ver.pending { border-left-color: var(--vg-wait); }
  .mm-app .mm-answer-choices legend { color: var(--mm-secondary); font-size: 18px; }
  .mm-app .mm-answer-option span { min-height: 60px; background: var(--vg-paper); color: var(--vg-ink); border: 1px solid var(--vg-line-strong); font-size: 20px; line-height: 1.7; padding: 16px; }
  .mm-app .mm-answer-option input:checked + span { background: var(--vg-seal-soft); border-color: var(--vg-seal); box-shadow: inset 4px 0 var(--vg-seal); }
  .mm-app .mm-answer-note summary { color: var(--vg-seal); font-size: 20px; padding-block: 12px; }
  .mm-app :is(.mm-observed, .mm-notice) { background: var(--vg-soft); color: var(--vg-ink); border-color: var(--vg-line-strong); font-size: 18px; }
  .mm-app .mm-observed :is(b, > i) { color: var(--vg-seal-dk); }
  .mm-app .mm-observed small { color: var(--vg-ink2); font-size: 16px; }
  .mm-app .mm-answer-saved > i { color: var(--vg-ok); }
  .mm-app .mm-answer-saved p { color: var(--mm-text); font-size: 20px; line-height: 1.9; }
  .mm-app .mm-guide-progress { color: var(--vg-seal); font-size: 20px; }
  .mm-app .mm-answer-option input:focus-visible + span { outline: 3px solid var(--vg-info); outline-offset: 3px; }
  .mm-app .mm-rv-err { color: var(--vg-danger); font-size: 18px; line-height: 1.7; }
  /* 以下原模板使用内联深底/浅字，仅定向修正这些组件。 */
  .mm-app .mm-wrap:has(#mm-share-pw) p { color: var(--vg-seal) !important; font-size: 20px !important; }
  .mm-app .mm-noprint a { color: var(--vg-seal) !important; font-size: 20px !important; text-decoration: underline !important; text-underline-offset: 4px; }
  .mm-app .mm-media .mm-badge.ok { color: var(--vg-paper); top: 4px; bottom: auto !important; }
  .mm-app .mm-validation-hint { color: var(--vg-danger); font-size: 18px; }
  .mm-app .mm-input[aria-invalid="true"] { border-color: var(--vg-danger); outline: 1px solid var(--vg-danger); }
  .mm-app .mm-chip { min-height: 48px; color: var(--vg-ink2); border-color: var(--vg-line-strong); font-size: 18px; }
  
  
  
  
  .mm-modal { background: var(--mm-page); border-color: var(--mm-border); border-radius: 24px; padding: 32px; max-width: 640px; }
  .mm-modal h3 { font-size: 24px; line-height: 1.6; }
  .mm-modal-back { background: #34251dcc; padding: 12px; }
  .mm-app .mm-top, .mm-app.mm-light .mm-top { background: #faf5edf5; color: var(--mm-text); border-color: var(--mm-line); padding-block: 16px; gap: 12px; flex-wrap: wrap; }
  .mm-app .mm-top h1 { font-size: 20px; font-weight: 600; line-height: 1.5; }
  /* 阅读页保留真实章节与故事顺序，只改变纸张、排版与图片相框。 */
  .mm-app .mm-book { max-width: 860px; padding: 32px 24px 96px; font-family: var(--mm-font); color: var(--mm-text); }
  .mm-app .mm-cover { margin-bottom: 40px; padding: 64px 0; border-bottom: 1px solid var(--vg-line-strong); }
  .mm-app .mm-cover h1 { font-family: var(--mm-font); font-size: 30px; font-weight: 650; line-height: 1.65; letter-spacing: .025em; }
  .mm-app .mm-cover p { color: var(--mm-secondary); font-size: 18px; }
  .mm-app .mm-cover img { border: 8px solid var(--vg-paper); box-shadow: 0 4px 14px #57331b16; }
  .mm-app .mm-toc li { padding: 16px 0; font-size: 20px; line-height: 1.8; border-color: var(--vg-line-strong); }
  .mm-app .mm-toc li > span:last-child { color: var(--mm-secondary); }
  .mm-app .mm-chapter { margin-top: 48px; }
  .mm-app .mm-chapter h2 { font-family: var(--mm-font); font-size: 24px; line-height: 1.7; font-weight: 650; letter-spacing: .025em; }
  .mm-app .mm-chapter .period { font-size: 18px; color: var(--mm-secondary); margin-bottom: 32px; }
  .mm-app .mm-story { margin-bottom: 48px; }
  .mm-app .mm-story h3 { font-size: 24px; line-height: 1.65; font-weight: 600; }
  .mm-app .mm-story :is(.meta, .photos figcaption) { color: var(--mm-secondary); font-size: 18px; }
  .mm-app .mm-story p { color: var(--mm-text); font-size: 20px; line-height: 1.95; text-indent: 0; margin-bottom: 1.5em; }
  .mm-app .mm-story .photos { margin: 32px 0; gap: 24px; }
  .mm-app .mm-story .photos img { border: 8px solid var(--vg-paper); outline: 1px solid var(--vg-soft); border-radius: 2px; box-shadow: 0 4px 12px #57331b12; }
  .mm-app :is(button, input, textarea, select, summary, [role="button"]):focus-visible,
  .mm-app.mm-light :is(button, input, textarea, select, summary):focus-visible,
  .mm-modal :is(button, input, textarea, select, summary):focus-visible,
  #main-app.theme-memoir[data-group="memoir"] :is(#shell-title, #shell-actions, #sidebar, #tabbar, #notif-bell-btn) :focus-visible,
  #main-app.theme-memoir[data-group="memoir"] #notif-bell-btn:focus-visible {
    outline: 3px solid var(--mm-focus); outline-offset: 3px;
  }
  #main-app:not([data-group="memoir"]) .mm-notif-label { display: none; }
  
  /* 主壳仅回忆录分区换色；照片/我的沿用原主题与行为。 */
  #main-app.theme-memoir[data-group="memoir"] { background: var(--mm-page); }
  #main-app.theme-memoir[data-group="memoir"] #sidebar { background: var(--vg-soft); color: var(--mm-text); border-right-color: var(--vg-line); }
  
  #main-app.theme-memoir[data-group="memoir"] #sidebar :is(.text-gray-300, .text-gray-400, .text-gray-500, .text-white) { color: var(--vg-ink2); }
  
  #main-app.theme-memoir[data-group="memoir"] #sidebar h3 { font-size: 18px; letter-spacing: 0; }
  
  
  
  
  
  
  
  #main-app.theme-memoir[data-group="memoir"] .shell-h1 { font-family: var(--mm-font); font-size: 20px; line-height: 1.6; font-weight: 600; letter-spacing: 0; color: var(--mm-text); white-space: normal; overflow-wrap: anywhere; }
  #main-app.theme-memoir[data-group="memoir"] #shell-actions { flex-wrap: wrap; gap: 8px; }
  #main-app.theme-memoir[data-group="memoir"] :is(#shell-title, #shell-actions) :is(.mm-btn, .mm-iconbtn) { min-height: 48px; min-width: 48px; height: auto; padding: 12px 16px; color: var(--vg-ink2); background: var(--vg-paper); border: 1px solid var(--vg-line-strong); border-radius: 12px; font-size: 18px; line-height: 1.5; }
  #main-app.theme-memoir[data-group="memoir"] #shell-actions .mm-btn-primary { color: var(--vg-on-seal); background: var(--vg-seal); border-color: var(--vg-seal); border-radius: 24px; }
  #main-app.theme-memoir[data-group="memoir"] #notif-bell-btn { width: auto; height: auto; min-height: 48px; min-width: 48px; padding: 12px; gap: 8px; color: var(--vg-ink2); background: var(--vg-paper); border: 1px solid var(--vg-line-strong); border-radius: 12px; }
  #main-app.theme-memoir[data-group="memoir"] #notif-panel { background: var(--vg-paper); color: var(--mm-text); border-color: var(--vg-line-strong); max-width: calc(100vw - 32px); }
  #main-app.theme-memoir[data-group="memoir"] #notif-panel :is(.text-xs, .text-sm, [class~="text-[11px]"]) { font-size: 18px; }
  #main-app.theme-memoir[data-group="memoir"] #notif-panel :is(.text-gray-400, .text-gray-500, .text-white) { color: var(--vg-ink2); }
  #main-app.theme-memoir[data-group="memoir"] #notif-panel button { min-height: 48px; }
  #main-app.theme-memoir[data-group="memoir"] #tabbar { background: #fffcf7f5; border-color: var(--vg-line); }
  #main-app.theme-memoir[data-group="memoir"] #tabbar button { color: var(--vg-ink2); min-height: 76px; font-size: 16px; gap: 4px; }
  #main-app.theme-memoir[data-group="memoir"] #tabbar button.is-active { color: var(--vg-seal); font-weight: 650; }
  @media (min-width: 1024px) {
    .mm-app .mm-book-cols { grid-template-columns: minmax(0, 1fr) minmax(340px, .8fr); gap: 40px; }
    .mm-app .mm-col-side { position: static; }
  }
  @media (max-width: 767px) {
    .mm-app .mm-wrap { padding-top: 24px; }
    
    
    
    
    
    
    
    
    
    
    
    .mm-app .mm-col-side, .mm-app .mm-card { padding: 24px; }
    .mm-app .mm-col-main > .mm-row { align-items: flex-start; }
    .mm-app .mm-col-main > .mm-row > .mm-row { flex-wrap: wrap; }
    .mm-app .mm-card.clickable > .mm-row { flex-wrap: wrap !important; }
    .mm-app .mm-card.clickable > .mm-row > .mm-row { flex-basis: 100%; justify-content: flex-end; }
    .mm-app #mm-editor { padding: 24px; }
    
    .mm-app .mm-body p, .mm-app .mm-story p { font-size: 20px; }
    .mm-app .mm-cover { padding-block: 40px; }
    .mm-app .mm-chapter h2 { font-size: 24px; }
    .mm-app .mm-book { padding-inline: 24px; }
    .mm-app .mm-toc li { font-size: 20px; gap: 12px; }
    
    
    
    
    
    #main-app.theme-memoir[data-group="memoir"] #shell-title { flex-wrap: wrap; }
    #main-app.theme-memoir[data-group="memoir"] .shell-h1 { flex: 1 1 6em; }
    #main-app.theme-memoir[data-group="memoir"] #shell-title .mm-iconbtn { flex-shrink: 0; }
    #main-app.theme-memoir[data-group="memoir"] #shell-actions { grid-column: 1 / -1; grid-row: 2; justify-content: flex-end; }
    
    #main-app.theme-memoir[data-group="memoir"] #notif-bell-btn { position: static; }
    #main-app.theme-memoir[data-group="memoir"] #view-memoir { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
  }
  
  /* 选项小药丸:回答时"亲眼见/听说"三选一,和新建故事的"想记哪方面" */
  .mm-app :is(.mm-witness, .mm-picks) { margin: 12px 0 8px; padding: 0; border: 0; display: flex; flex-wrap: wrap; gap: 8px; }
  .mm-app :is(.mm-witness, .mm-picks) legend { width: 100%; }
  .mm-app :is(.mm-witness, .mm-picks) legend { padding: 0; margin-bottom: 8px; font-size: 18px; color: var(--mm-secondary); }
  .mm-app :is(.mm-witness-opt, .mm-pick) { display: inline-flex; align-items: center; gap: 8px; min-height: 52px; padding: 0 12px; border: 2px solid var(--mm-line); border-radius: 9999px; font-size: 18px; cursor: pointer; background: var(--mm-surface); }
  .mm-app :is(.mm-witness-opt, .mm-pick):has(input:checked) { border-color: var(--mm-accent); background: var(--mm-accent-soft); font-weight: 650; }
  .mm-app :is(.mm-witness-opt, .mm-pick) input { width: 20px; height: 20px; margin: 0; accent-color: var(--mm-accent); }
  .mm-app :is(.mm-witness-opt, .mm-pick):focus-within { outline: 3px solid var(--mm-focus); outline-offset: 2px; }
  /* 故事页"帮我检查一下":问题清单与改后预览 */
  .mm-app #mm-review h3 { margin: 0 0 12px; font-size: 24px; color: var(--mm-text); }
  .mm-app #mm-review ol { margin: 0 0 12px; padding-left: 1.4em; }
  .mm-app #mm-review li { margin-bottom: 16px; font-size: 20px; line-height: 1.7; }
  .mm-app #mm-review blockquote { margin: 0 0 8px; padding: 8px 16px; border-left: 4px solid var(--mm-accent); background: var(--mm-accent-soft); border-radius: 0 12px 12px 0; font-size: 20px; }
  .mm-app #mm-review p { font-size: 20px; line-height: 1.7; margin: 0 0 12px; }
  .mm-app #mm-review details { margin: 8px 0 12px; }
  .mm-app #mm-review summary { min-height: 44px; display: flex; align-items: center; font-size: 18px; cursor: pointer; color: var(--mm-secondary); }
  @media (prefers-reduced-motion: reduce) {
    .mm-app *, .mm-modal * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
    
  }
}

/* 流式字号改成两档字阶：小屏取下限，≥64rem 取上限 */
@media (min-width: 64rem) {
  .mm-app .mm-cover h1 { font-size: 36px; }
}

/* 流式留白改成两档间距：小屏取下限，≥64rem 取上限 */
@media (min-width: 64rem) {
  .mm-app, .mm-app.mm-light, .mm-modal, #main-app.theme-memoir[data-group="memoir"] { --mm-gutter: 48px; }
  .mm-app .mm-book { padding: 32px 64px 96px; }
}