/* ============================================================
   好柚 V0.1 演示原型 · 样式表
   设计语言：纸感 / 暖墨 / 安静
   ============================================================ */

:root {
  --bg: #faf1dc;
  --paper: #fcf6e4;
  --ink: #2a2a2a;
  --ink-soft: #5b5550;
  --ink-mute: #9a938a;
  --accent: #d49b5a;
  --accent-soft: #f0dcb4;
  --warn: #c36f3c;
  --good: #6a8a5a;
  --line: #ebdfbe;
  --shadow: 0 1px 2px rgba(60,40,20,.04), 0 6px 24px rgba(80,60,30,.06);
  --radius: 14px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Noto Sans CJK SC", "Microsoft YaHei", sans-serif;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  padding: 32px;
  min-height: 100vh;
}

/* ============================================================ 演示面板 */
.demo-panel {
  width: 280px;
  padding: 20px;
  background: var(--paper);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  align-self: flex-start;
  position: sticky;
  top: 32px;
}
.demo-panel h3 { font-size: 13px; color: var(--ink-soft); margin: 16px 0 6px; text-transform: uppercase; letter-spacing: .5px; }
.demo-panel .hint { font-size: 12px; color: var(--ink-mute); margin-bottom: 12px; }

/* 折叠交互（details/summary）— 桌面 + 移动通用 */
.demo-panel details { margin-top: 8px; }
.demo-panel details summary {
  cursor: pointer;
  padding: 4px 0;
  list-style: none;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 6px;
}
.demo-panel details summary::-webkit-details-marker { display: none; }
.demo-panel details summary::before {
  content: "▸";
  color: var(--accent);
  font-size: 10px;
  transition: transform .15s ease;
  display: inline-block;
}
.demo-panel details[open] summary::before {
  transform: rotate(90deg);
}
.demo-panel details summary h3 { margin: 0; display: inline; }
.demo-panel details > *:not(summary) {
  margin-top: 6px;
}

/* Brand 头部：logo + 文字 横向排版 */
.brand-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.brand-mark {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  filter: drop-shadow(0 1px 2px rgba(212, 155, 90, 0.15));
}
.brand-text {
  flex: 1;
  min-width: 0;
}
.brand-text h2 {
  font-size: 20px;
  margin: 0 0 2px;
  letter-spacing: -.5px;
  font-weight: 700;
  color: var(--ink);
}
.brand-text h2 .brand-divider {
  color: var(--accent);
  margin: 0 2px;
  font-weight: 400;
}
.brand-text h2 .brand-en {
  font-weight: 500;
  letter-spacing: -.3px;
  color: var(--ink-soft);
}
.brand-text .brand-slogan {
  font-size: 12px;
  color: var(--ink-soft);
  line-height: 1.4;
  margin: 0;
}
.brand-text .brand-tagline {
  font-size: 11px;
  color: var(--accent);
  font-style: italic;
  letter-spacing: -.2px;
  margin: 1px 0 0;
}
.brand-domain {
  font-size: 11px;
  color: var(--ink-mute);
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px dashed var(--line);
}
.brand-domain a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
}
.brand-domain a:hover { text-decoration: underline; }

/* 周回顾故事卡 · 印章 */
.story-card { position: relative; }
.story-seal {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 28px;
  height: 28px;
  opacity: 0.7;
  pointer-events: none;
}

/* 首屏 empty-hint · 微章 */
.empty-hint {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.empty-seal {
  width: 22px;
  height: 22px;
  opacity: 0.55;
  margin-bottom: 2px;
}
.empty-sub {
  color: var(--ink-mute);
  font-size: 12px;
  font-style: italic;
  margin-top: -4px;
  text-align: center;
  line-height: 1.6;
}
.demo-panel .footnote { margin-top: 16px; font-size: 11px; line-height: 1.6; }
.demo-panel code { font-size: 10px; color: var(--accent); }

.demo-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.tab-btn {
  flex: 1 0 30%;
  font-size: 12px;
  padding: 6px 8px;
  border: 1px solid var(--line);
  background: transparent;
  border-radius: 999px;
  cursor: pointer;
  color: var(--ink-soft);
}
.tab-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }

.demo-flow {
  font-size: 12px;
  padding-left: 18px;
  color: var(--ink-soft);
}
.demo-flow li { margin: 4px 0; }
.demo-flow b { color: var(--accent); }

.kbd-list { font-size: 12px; list-style: none; color: var(--ink-soft); }
.kbd-list li { margin: 4px 0; }
kbd {
  font-family: monospace;
  background: var(--line);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 11px;
  color: var(--ink);
}

/* ============================================================ 手机外壳 */
.phone-frame {
  position: relative;
  width: 390px;
  height: 800px;
  background: #1d1612;
  border-radius: 48px;
  padding: 14px;
  box-shadow: 0 30px 70px rgba(30, 20, 10, .25), 0 4px 12px rgba(30,20,10,.15);
}

.phone-notch {
  position: absolute;
  top: 18px; left: 50%;
  transform: translateX(-50%);
  width: 110px; height: 28px;
  background: #1d1612;
  border-radius: 20px;
  z-index: 10;
}

.phone-screen {
  position: relative;
  width: 100%; height: 100%;
  background: var(--bg);
  border-radius: 36px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* ============================================================ 状态栏 */
.status-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 24px 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  height: 38px;
  flex-shrink: 0;
}
.sb-right { display: flex; gap: 10px; align-items: center; }
.sb-bell { cursor: pointer; font-size: 14px; transition: transform .2s; }
.sb-bell:hover { transform: scale(1.15); }
.sb-signal { font-size: 10px; letter-spacing: 1px; color: var(--ink-soft); }

/* ============================================================ 屏幕 */
.screen {
  display: none;
  flex: 1;
  flex-direction: column;
  overflow: hidden;
}
.screen.active { display: flex; }

.screen-header {
  padding: 8px 22px 16px;
  flex-shrink: 0;
}
.screen-header h1 {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -.5px;
}
.screen-header .date,
.screen-header .sub {
  color: var(--ink-mute);
  font-size: 13px;
  margin-top: 2px;
}

.screen-body {
  flex: 1;
  overflow-y: auto;
  padding: 0 22px 80px;
}
.screen-body::-webkit-scrollbar { width: 0; }

/* ============================================================ 卡片基础 */
.card {
  background: var(--paper);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 12px;
  box-shadow: var(--shadow);
}

.record-meta {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--ink-mute);
  margin-bottom: 8px;
  align-items: center;
}
.event-tag {
  background: var(--accent-soft);
  color: var(--accent);
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 500;
}

.record-text, .record p {
  color: var(--ink);
  font-size: 15px;
  line-height: 1.6;
}

.record-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
.micro-btn {
  font-size: 12px;
  padding: 4px 10px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-soft);
  cursor: pointer;
  font-family: inherit;
}
.micro-btn:hover { background: var(--accent-soft); color: var(--accent); }
.micro-btn.ghost { border-color: transparent; }

.ai-followup {
  background: linear-gradient(140deg, #fff6dc 0%, var(--paper) 100%);
  border-left: 3px solid var(--accent);
}
.followup-source {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--line);
  font-size: 11px;
  color: var(--ink-mute);
  font-style: italic;
}
.ai-tag {
  display: inline-block;
  font-size: 10px;
  padding: 2px 8px;
  background: var(--accent);
  color: #fff;
  border-radius: 999px;
  margin-bottom: 6px;
}

.ai-highlight {
  border-left: 3px solid var(--accent);
}

.record.image .thumb {
  height: 100px;
  background: linear-gradient(135deg, #e8c896, #c36f3c);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 14px;
  margin: 6px 0 10px;
}

.empty-hint {
  background: transparent;
  box-shadow: none;
  text-align: center;
  padding: 24px 8px;
}
.empty {
  color: var(--ink-mute);
  font-size: 13px;
  font-style: italic;
}

/* ============================================================ 时间线 */
.seg-control {
  display: inline-flex;
  background: var(--line);
  border-radius: 999px;
  padding: 3px;
  margin-top: 8px;
}
.seg {
  font-size: 12px;
  padding: 4px 14px;
  border: none;
  background: transparent;
  border-radius: 999px;
  cursor: pointer;
  color: var(--ink-soft);
  font-family: inherit;
}
.seg.active { background: var(--paper); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.06); }

.day-group { margin-bottom: 16px; }
.day-label {
  font-size: 12px;
  color: var(--ink-mute);
  margin: 8px 4px;
  font-weight: 500;
}

/* ============================================================ 事件 */
.card.event { padding: 14px; }
.event-cover {
  height: 90px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--accent-soft), #f0dcb4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  margin-bottom: 10px;
  color: var(--accent);
  font-weight: 600;
}
.card.event h3 { font-size: 16px; margin-bottom: 4px; }
.event-meta { font-size: 11px; color: var(--ink-mute); margin-bottom: 6px; }
.event-summary { font-size: 13px; color: var(--ink-soft); line-height: 1.55; }

/* ============================================================ AI */
.card.preset { cursor: pointer; transition: transform .15s; }
.card.preset:hover { transform: translateY(-1px); }
.card.preset h4 { font-size: 15px; margin-bottom: 4px; }
.preset-hint { font-size: 12px; color: var(--ink-mute); }

.prompt-input {
  width: 100%;
  padding: 12px 14px;
  margin-top: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  font-family: inherit;
  font-size: 14px;
  color: var(--ink);
}
.prompt-input:focus { outline: none; border-color: var(--accent); }

.primary-btn {
  display: inline-block;
  width: 100%;
  margin-top: 10px;
  padding: 12px 18px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
}
.primary-btn:hover { background: #c36f3c; }
.primary-btn.small { width: auto; margin: 0; padding: 8px 16px; font-size: 13px; }
.primary-btn.full { width: 100%; }

.ghost-btn {
  width: 100%;
  margin-top: 8px;
  padding: 10px 18px;
  background: transparent;
  color: var(--ink-soft);
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
}
.ghost-btn.full { width: 100%; }

.ai-response {
  margin-top: 18px;
  padding: 16px;
  background: var(--paper);
  border-radius: var(--radius);
  border-left: 3px solid var(--accent);
}
.ai-response h4 { font-size: 13px; color: var(--accent); margin-bottom: 8px; }
.ai-response h5 { font-size: 13px; margin-top: 10px; margin-bottom: 4px; color: var(--ink); }
.ai-response p { font-size: 13px; color: var(--ink-soft); }
.ai-response ul { list-style: none; }
.ai-response li { font-size: 12px; padding: 4px 0; border-bottom: 1px dashed var(--line); }
.ai-response a { color: var(--accent); text-decoration: none; }
.disclaim {
  margin-top: 10px;
  font-size: 11px;
  color: var(--ink-mute);
  font-style: italic;
}
.link { color: var(--accent); text-decoration: underline; }

/* ============================================================ 我 */
.card.profile {
  display: flex;
  align-items: center;
  gap: 14px;
}
.avatar {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 600;
}
.username { font-size: 16px; font-weight: 600; }
.tier { font-size: 12px; color: var(--ink-mute); }

.card-list { background: var(--paper); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.list-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  color: var(--ink);
  text-decoration: none;
  font-size: 14px;
}
.list-item:last-child { border-bottom: none; }
.list-item:hover { background: rgba(212,155,90,.05); }
.chevron { color: var(--ink-mute); font-size: 13px; }

.vow {
  text-align: center;
  font-size: 12px;
  color: var(--ink-mute);
  margin-top: 24px;
  font-style: italic;
  line-height: 1.7;
}

/* ============================================================ Tab Bar */
.tab-bar {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: rgba(252, 246, 228, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  display: flex;
  justify-content: space-around;
  padding: 8px 0 24px;
  border-top: 1px solid var(--line);
}
.tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-size: 10px;
  color: var(--ink-mute);
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: inherit;
  padding: 4px 0;
}
.tab span { font-size: 18px; }
.tab.active { color: var(--accent); }

.fab-tab { position: relative; }
.fab {
  display: inline-block;
  width: 44px;
  height: 44px;
  background: var(--accent);
  color: #fff;
  font-size: 26px !important;
  line-height: 44px;
  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(212,155,90,.4);
  text-align: center;
}

/* ============================================================ 弹层通用 */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 14, 8, .35);
  z-index: 100;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  animation: fadeIn .2s ease;
}
.overlay[hidden] { display: none !important; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { transform: translateY(40px); } to { transform: translateY(0); } }

.sheet {
  width: 100%;
  max-width: 390px;
  margin: 0 auto;
  background: var(--paper);
  border-radius: 24px 24px 0 0;
  padding: 20px;
  max-height: 75vh;
  overflow-y: auto;
  animation: slideUp .25s ease;
  position: relative;
}
.sheet.tall { max-height: 88vh; }
.sheet-handle {
  width: 36px; height: 4px;
  background: var(--line);
  border-radius: 999px;
  margin: 0 auto 12px;
}
.sheet h2, .sheet h3 { margin-bottom: 6px; }
.sheet .sub { color: var(--ink-mute); font-size: 13px; margin-bottom: 14px; }

.sheet-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: var(--ink-mute);
  margin-bottom: 10px;
}
.privacy-toggle { cursor: pointer; color: var(--accent); font-weight: 500; }

#newText {
  width: 100%;
  min-height: 160px;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 16px;
  color: var(--ink);
  resize: none;
  outline: none;
}
.input-tools {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 12px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}
.input-tools .tool-btn {
  font-size: 18px;
  background: transparent;
  border: none;
  cursor: pointer;
  width: 36px; height: 36px;
}
.input-tools .primary-btn { margin-left: auto; }

/* ============================================================ 周回顾故事卡 */
.story-card {
  width: 100%; max-width: 360px;
  background: linear-gradient(160deg, #faf1dc, #fcf6e4);
  border-radius: 20px;
  margin: auto;
  padding: 32px 28px;
  box-shadow: 0 20px 60px rgba(60,40,20,.18);
  animation: slideUp .25s ease;
  align-self: center;
}
.story-page h2 { font-size: 22px; margin-bottom: 8px; }
.story-stat { color: var(--ink-mute); font-size: 13px; margin-bottom: 16px; }
.story-page p { font-size: 14px; margin-bottom: 10px; line-height: 1.7; color: var(--ink-soft); }
.story-list { list-style: none; padding-left: 0; }
.story-list li {
  padding: 8px 0;
  border-bottom: 1px dashed var(--line);
  font-size: 13px;
  color: var(--ink);
}
.story-next {
  display: block;
  margin: 20px 0 0 auto;
  padding: 8px 18px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
}

/* ============================================================ 共享 */
.form-label {
  display: block;
  font-size: 12px;
  color: var(--ink-mute);
  margin: 10px 0 6px;
}
.form-input {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 14px;
  background: var(--bg);
  color: var(--ink);
}
.radio-row {
  display: flex;
  gap: 6px;
}
.radio {
  flex: 1;
  padding: 8px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
  color: var(--ink-soft);
}
.radio.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.share-preview {
  margin-top: 14px;
  padding: 12px 14px;
  background: var(--accent-soft);
  border-radius: var(--radius);
  font-size: 13px;
  color: var(--ink-soft);
  font-style: italic;
}
.sheet-footer {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}
.sheet-footer .ghost-btn,
.sheet-footer .primary-btn {
  flex: 1;
  margin-top: 0;
}

/* ============================================================ 订阅 */
.paywall-title { text-align: center; }
.plan-compare {
  display: flex;
  gap: 8px;
  margin: 18px 0;
}
.plan {
  flex: 1;
  background: var(--bg);
  border-radius: var(--radius);
  padding: 14px 10px;
  text-align: center;
  position: relative;
  border: 1px solid var(--line);
}
.plan.featured {
  background: var(--paper);
  border: 2px solid var(--accent);
  box-shadow: 0 4px 16px rgba(212,155,90,.2);
}
.plan-tag {
  position: absolute;
  top: -10px; left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  padding: 2px 10px;
  background: var(--accent);
  color: #fff;
  border-radius: 999px;
}
.plan-name { font-size: 13px; color: var(--ink-soft); }
.plan-price { font-size: 22px; font-weight: 700; margin: 6px 0 10px; }
.plan-price span { font-size: 12px; color: var(--ink-mute); font-weight: 400; }
.plan ul { list-style: none; font-size: 11px; color: var(--ink-soft); }
.plan li { padding: 3px 0; border-bottom: 1px dashed var(--line); }
.plan li:last-child { border-bottom: none; }

/* ============================================================ 演进开关 */
.evo-item {
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.evo-item:last-of-type { border-bottom: none; }
.evo-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  font-weight: 500;
}
.evo-desc { font-size: 12px; color: var(--ink-mute); margin-top: 4px; }
.evo-item.disabled .evo-head { opacity: .5; }
.evo-item.locked .evo-head { color: var(--accent); }

.switch { position: relative; display: inline-block; width: 38px; height: 22px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider {
  position: absolute;
  inset: 0;
  background: var(--line);
  border-radius: 22px;
  transition: .2s;
  cursor: pointer;
}
.slider::before {
  content: "";
  position: absolute;
  width: 18px; height: 18px;
  left: 2px; top: 2px;
  background: #fff;
  border-radius: 50%;
  transition: .2s;
}
.switch input:checked + .slider { background: var(--accent); }
.switch input:checked + .slider::before { transform: translateX(16px); }
.switch input:disabled + .slider { opacity: .6; cursor: not-allowed; }

/* ============================================================ 图谱（人事物）通用 */
.atlas-tabs {
  display: flex;
  gap: 4px;
  margin-top: 14px;
  border-bottom: 1px solid var(--line);
}
.atlas-tab {
  flex: 1;
  padding: 8px 4px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  color: var(--ink-mute);
  border-bottom: 2px solid transparent;
  font-weight: 500;
}
.atlas-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.atlas-view { display: none; }
.atlas-view.active { display: block; }

.ring-hint {
  font-size: 12px;
  color: var(--ink-mute);
  margin: 10px 0 14px;
  text-align: center;
  font-style: italic;
}
.hint-line {
  margin-top: 20px;
  font-size: 12px;
  color: var(--ink-mute);
  text-align: center;
  font-style: italic;
}

/* ============================================================ 人 · 关系圈 */
.ring-section { margin-bottom: 22px; }
.ring-label {
  font-size: 12px;
  color: var(--ink-soft);
  margin-bottom: 10px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}
.ring-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; }

.person-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 14px;
  background: var(--paper);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: transform .15s, box-shadow .2s;
  min-width: 64px;
}
.person-chip:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(60,40,20,.1);
}
.person-chip.core .chip-avatar {
  background: var(--accent);
  color: #fff;
}
.chip-avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 14px;
}
.chip-name { font-size: 12px; margin-top: 5px; color: var(--ink); font-weight: 500; }
.chip-meta { font-size: 10px; color: var(--ink-mute); margin-top: 2px; }
.person-chip.small { min-width: 0; padding: 6px; box-shadow: none; background: transparent; }
.person-chip.small .chip-avatar { width: 30px; height: 30px; font-size: 12px; }

/* ============================================================ 事 */
.weave-btn {
  width: 100%;
  padding: 14px;
  background: var(--accent-soft);
  border: 1px dashed var(--accent);
  border-radius: var(--radius);
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  margin-bottom: 14px;
  color: var(--accent);
  font-weight: 500;
  font-size: 14px;
}
.weave-btn:hover { background: #f0dcb4; }
.weave-btn .weave-hint {
  display: block;
  font-size: 11px;
  color: var(--ink-mute);
  font-weight: 400;
  margin-top: 2px;
}
.event-status {
  font-size: 11px;
  color: var(--ink-mute);
  padding: 12px 4px 6px;
  font-weight: 500;
  letter-spacing: .5px;
}
.event-people {
  margin-top: 8px;
  font-size: 11px;
  color: var(--ink-mute);
  padding-top: 8px;
  border-top: 1px dashed var(--line);
}

/* ============================================================ 物 */
.thing-cat { margin-bottom: 16px; }
.thing-cat h3 {
  font-size: 13px;
  color: var(--ink-soft);
  margin-bottom: 8px;
  font-weight: 500;
}
.thing-row { display: flex; flex-wrap: wrap; gap: 6px; }
.thing-chip {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 13px;
  cursor: pointer;
  color: var(--ink);
  display: flex;
  gap: 6px;
  align-items: center;
  transition: all .15s;
}
.thing-chip:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.chip-count {
  font-size: 10px;
  color: var(--ink-mute);
  background: var(--bg);
  padding: 1px 6px;
  border-radius: 999px;
}

/* ============================================================ 全景图谱 */
.graph-svg {
  width: 100%;
  height: 360px;
  display: block;
  margin: 8px 0;
}
.graph-svg .edge {
  stroke: var(--line);
  stroke-width: 1.2;
}
.graph-svg .edge.strong {
  stroke: var(--accent-soft);
  stroke-width: 2.2;
}
.graph-svg .node { cursor: pointer; }
.graph-svg .node circle { transition: opacity .2s, transform .2s; transform-origin: center; transform-box: fill-box; }
.graph-svg .node:hover circle { opacity: .85; }
.graph-svg .node-self circle { fill: var(--ink); }
.graph-svg .node-person circle { fill: var(--accent); }
.graph-svg .node-event circle { fill: var(--good); }
.graph-svg .node-thing circle { fill: var(--ink-mute); }
.graph-svg .node-text {
  fill: #fff;
  font-size: 11px;
  text-anchor: middle;
  pointer-events: none;
  font-family: inherit;
  font-weight: 500;
}
.graph-legend {
  display: flex;
  gap: 14px;
  justify-content: center;
  font-size: 11px;
  color: var(--ink-soft);
  margin: 4px 0;
}
.legend-item { display: flex; align-items: center; gap: 4px; }
.dot {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 50%;
}
.dot-self { background: var(--ink); }
.dot-person { background: var(--accent); }
.dot-event { background: var(--good); }
.dot-thing { background: var(--ink-mute); }
.graph-stats {
  text-align: center;
  font-size: 11px;
  color: var(--ink-mute);
  margin-top: 6px;
  font-style: italic;
}

/* ============================================================ 人物详情 */
.person-head {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-bottom: 14px;
}
.person-avatar-lg {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 600;
  flex-shrink: 0;
}
.section-h {
  font-size: 13px;
  color: var(--ink-soft);
  margin: 16px 0 8px;
  font-weight: 600;
}
.arc-chart {
  background: var(--bg);
  border-radius: var(--radius);
  padding: 12px;
}
.arc-svg { width: 100%; height: 70px; }
.arc-svg polyline {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
}
.arc-svg .arc-pt { fill: var(--accent); }
.arc-svg .arc-now { fill: var(--accent); stroke: #fff; stroke-width: 2; }
.arc-caption {
  font-size: 11px;
  color: var(--ink-mute);
  text-align: center;
  margin-top: 4px;
}

.key-moment {
  display: flex;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px dashed var(--line);
  font-size: 13px;
  color: var(--ink);
  line-height: 1.55;
}
.key-moment:last-of-type { border-bottom: none; }
.km-date {
  color: var(--accent);
  font-weight: 500;
  min-width: 60px;
  font-size: 12px;
}

.link-row { display: flex; flex-wrap: wrap; gap: 6px; }
.link-chip {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 12px;
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  color: var(--ink-soft);
}
.link-chip:hover { border-color: var(--accent); color: var(--accent); }

.ai-insight {
  margin-top: 16px;
  padding: 12px 14px;
  background: linear-gradient(140deg, #fff6dc, var(--paper));
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.65;
}
.ai-insight strong { color: var(--accent); }
.disclaim-inline {
  font-size: 11px;
  font-style: italic;
  color: var(--ink-mute);
  display: block;
  margin-top: 6px;
}

/* ============================================================ 多事件穿插 */
.weave-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
}
.weave-chip {
  padding: 6px 12px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  color: var(--ink-soft);
}
.weave-chip.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.weave-timeline {
  background: var(--bg);
  border-radius: var(--radius);
  padding: 16px 12px 70px;
  position: relative;
  overflow: hidden;
}
.weave-axis {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: var(--ink-mute);
  margin-bottom: 12px;
  padding: 0 8px;
}
.weave-track {
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
  margin: 20px 0;
}
.track-label {
  font-size: 11px;
  color: var(--ink-soft);
  width: 36px;
  font-weight: 500;
  flex-shrink: 0;
}
.track-line {
  height: 4px;
  flex: 1;
  border-radius: 2px;
  position: relative;
}
.track-mom { background: linear-gradient(to right, var(--accent-soft) 0%, var(--accent) 25%, var(--accent) 100%); }
.track-work { background: linear-gradient(to right, transparent 0%, transparent 45%, var(--good) 45%, var(--good) 78%, var(--good) 78%, transparent 80%); }
.track-read { background: linear-gradient(to right, transparent 0%, transparent 42%, var(--ink-soft) 42%, var(--ink-soft) 100%); }
.track-dot {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ink);
  top: 50%;
  transform: translate(0, -50%);
  cursor: pointer;
  z-index: 2;
  box-shadow: 0 0 0 2px var(--bg);
}
.track-dot.active {
  width: 14px;
  height: 14px;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(212,155,90,.25);
}
.weave-cross {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  background: var(--paper);
  border-radius: var(--radius);
  padding: 8px 12px;
  box-shadow: var(--shadow);
  text-align: center;
}
.cross-day {
  font-size: 12px;
  color: var(--accent);
  font-weight: 600;
}
.cross-text {
  font-size: 11px;
  margin-top: 4px;
  color: var(--ink-soft);
  line-height: 1.5;
}

/* ============================================================ 记录详情 */
.record.clickable {
  cursor: pointer;
  transition: transform .15s, box-shadow .2s;
}
.record.clickable:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(60,40,20,.08);
}
.record-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed var(--line);
}
.record-tag {
  font-size: 10px;
  padding: 2px 8px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-soft);
}

.detail-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
  margin-top: -4px;
}
.icon-btn {
  width: 32px; height: 32px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 50%;
  cursor: pointer;
  font-size: 16px;
  font-family: inherit;
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  justify-content: center;
}
.icon-btn:hover { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
.detail-id {
  font-size: 11px;
  color: var(--ink-mute);
  font-style: italic;
}

.detail-meta {
  margin-bottom: 14px;
}
.detail-time {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 4px;
}
.detail-context {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.ctx-item {
  font-size: 11px;
  padding: 3px 8px;
  background: var(--bg);
  border-radius: 999px;
  color: var(--ink-soft);
}

.detail-content {
  font-size: 16px;
  line-height: 1.75;
  color: var(--ink);
  padding: 16px;
  background: linear-gradient(140deg, #fff6dc, var(--paper));
  border-radius: var(--radius);
  border-left: 3px solid var(--accent-soft);
  margin-bottom: 14px;
}

.detail-privacy-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  background: var(--bg);
  border-radius: var(--radius);
}
.privacy-tag {
  font-size: 12px;
  color: var(--accent);
  font-weight: 500;
}

.pet-person {
  background: var(--accent-soft) !important;
  color: var(--accent) !important;
  border-color: var(--accent) !important;
}
.pet-thing {
  background: var(--bg);
}

.event-mini {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  cursor: pointer;
}
.mini-cover {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--accent-soft), #f0dcb4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
  overflow: hidden;
  white-space: nowrap;
  line-height: 1;
}
.mini-body { flex: 1; min-width: 0; }
.mini-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mini-meta {
  font-size: 11px;
  color: var(--ink-mute);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mini-chevron { color: var(--ink-mute); font-size: 18px; flex-shrink: 0; }

.detail-ai { margin-bottom: 0; }

.related-list {
  background: var(--paper);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.related-item {
  display: flex;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  text-decoration: none;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.5;
}
.related-item:last-child { border-bottom: none; }
.related-item:hover { background: rgba(212,155,90,.05); }
.rel-date {
  color: var(--accent);
  font-weight: 500;
  font-size: 11px;
  min-width: 72px;
  flex-shrink: 0;
}
.rel-text { color: var(--ink-soft); }

.detail-actions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.action-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 4px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
  font-family: inherit;
  font-size: 11px;
  color: var(--ink-soft);
  transition: all .15s;
}
.action-btn:hover { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
.action-btn span { font-size: 18px; }
.action-btn.danger:hover { background: #fbe4dc; color: var(--warn); border-color: var(--warn); }

/* ============================================================ 首屏新增（V2.1 R17-R19） */

.header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.streak-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 12px;
  background: linear-gradient(135deg, #fff3d9, #f0dcb4);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  box-shadow: 0 1px 3px rgba(212,155,90,.2);
}
.streak-fire { font-size: 14px; }
.streak-num { font-size: 16px; font-weight: 700; }
.streak-label { font-size: 11px; color: var(--ink-soft); font-weight: 500; }

.daily-q {
  background: linear-gradient(135deg, #fff8e5, #fcf6e4);
  border-left: 3px solid var(--accent);
  cursor: pointer;
  transition: transform .15s;
}
.daily-q:hover { transform: translateY(-1px); }
.dq-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.dq-label {
  font-size: 11px;
  color: var(--accent);
  font-weight: 600;
  letter-spacing: .3px;
}
.dq-skip {
  font-size: 11px;
  color: var(--ink-mute);
  text-decoration: underline;
  cursor: pointer;
}
.dq-text {
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.55;
  margin-bottom: 8px;
}
.dq-hint {
  font-size: 11px;
  color: var(--ink-mute);
  font-style: italic;
}

.today-history {
  background: var(--bg);
  border: 1px dashed var(--line);
  cursor: pointer;
  transition: border-color .15s;
}
.today-history:hover { border-color: var(--accent); }
.th-label {
  font-size: 11px;
  color: var(--accent);
  font-weight: 500;
  margin-bottom: 4px;
}
.th-text {
  font-size: 14px;
  color: var(--ink-soft);
  font-style: italic;
  line-height: 1.55;
  margin-bottom: 4px;
}
.th-meta {
  font-size: 10px;
  color: var(--ink-mute);
}

.yuu-stat {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: var(--accent-soft);
  border-radius: 999px;
  font-size: 12px;
  color: var(--accent);
  font-weight: 500;
}

/* ============================================================ 我屏 · 里程碑 + 故事书 */
.milestone {
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  background: linear-gradient(135deg, #fff8e5, var(--paper));
  border: 1px solid var(--accent-soft);
}
.ms-num {
  font-size: 32px;
  font-weight: 700;
  color: var(--accent);
  font-family: 'Times New Roman', serif;
  flex-shrink: 0;
  width: 50px;
  text-align: center;
}
.ms-body { flex: 1; min-width: 0; }
.ms-title { font-size: 15px; font-weight: 600; color: var(--ink); }
.ms-sub { font-size: 11px; color: var(--ink-mute); margin-top: 2px; }
.ms-chevron { color: var(--accent); font-size: 18px; }

.storybook {
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  background: linear-gradient(135deg, #f4e8c8, #fff8e5);
  border: 2px solid var(--accent);
  transition: transform .15s;
}
.storybook:hover { transform: translateY(-2px); }
.sb-cover {
  width: 56px;
  height: 70px;
  background: linear-gradient(135deg, var(--accent), var(--warn));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  border-radius: 6px;
  flex-shrink: 0;
  box-shadow: 2px 2px 0 rgba(195,111,60,.3);
}
.sb-body { flex: 1; min-width: 0; }
.sb-title { font-size: 15px; font-weight: 600; color: var(--ink); }
.sb-sub { font-size: 11px; color: var(--ink-soft); margin-top: 2px; }
.sb-cta { font-size: 12px; color: var(--accent); font-weight: 500; margin-top: 4px; }

/* ============================================================ 协作链事件卡 */
.chain-event {
  border: 2px solid var(--accent);
  background: linear-gradient(160deg, #fff8e5, var(--paper));
  position: relative;
}
.chain-badge {
  display: inline-block;
  font-size: 10px;
  padding: 2px 8px;
  background: var(--accent);
  color: #fff;
  border-radius: 999px;
  margin-bottom: 6px;
  font-weight: 500;
}
.chain-cta {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--accent-soft);
  color: var(--accent);
  font-size: 12px;
  font-weight: 500;
}
.open-chain-btn {
  margin-top: 10px;
  padding: 6px 12px;
  background: transparent;
  border: 1px dashed var(--accent);
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  color: var(--accent);
  width: 100%;
}
.open-chain-btn:hover { background: var(--accent-soft); }

/* ============================================================ 协作链 Overlay (D3) */
.chain-header { margin-bottom: 14px; }
.chain-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}
.chain-title-row h2 { margin: 0; }
.chain-status-tag {
  font-size: 11px;
  padding: 2px 8px;
  background: var(--good);
  color: #fff;
  border-radius: 999px;
}

.chain-members {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.cm-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 12px;
  color: var(--ink);
}
.cm-chip.cm-owner {
  background: var(--accent-soft);
  border-color: var(--accent);
  font-weight: 500;
}
.cm-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.cm-add {
  padding: 4px 10px;
  background: transparent;
  border: 1px dashed var(--ink-mute);
  border-radius: 999px;
  font-family: inherit;
  font-size: 12px;
  color: var(--ink-soft);
  cursor: pointer;
}
.cm-add:hover { border-color: var(--accent); color: var(--accent); }

.chain-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 14px;
}
.chain-tab {
  flex: 1;
  padding: 8px 4px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  color: var(--ink-mute);
  border-bottom: 2px solid transparent;
  font-weight: 500;
}
.chain-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.chain-view { display: block; }
.chain-view[hidden] { display: none; }

.chain-day { margin-bottom: 18px; }
.cd-date {
  font-size: 12px;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 8px;
  padding-bottom: 4px;
  border-bottom: 1px dashed var(--line);
}

.contribution {
  padding: 10px 12px;
  margin-bottom: 8px;
  border-radius: var(--radius);
  border-left: 3px solid var(--line);
}
.contribution.by-you { border-left-color: #d49b5a; background: rgba(212,155,90,.08); }
.contribution.by-mom { border-left-color: #6a8a5a; background: rgba(106,138,90,.07); }
.contribution.by-sister { border-left-color: #9a938a; background: rgba(154,147,138,.08); }
.contribution.highlight { box-shadow: 0 0 0 2px var(--accent-soft); }

.ctr-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
  font-size: 10px;
}
.pov-tag {
  background: var(--good);
  color: #fff;
  padding: 2px 6px;
  border-radius: 999px;
  font-weight: 500;
}
.pov-tag.pov-you { background: var(--accent); }
.pov-tag.pov-sister { background: var(--ink-mute); }
.ctr-time { color: var(--ink-mute); }
.contribution p { font-size: 14px; color: var(--ink); line-height: 1.6; margin: 0; }

.chain-cross-note {
  margin-top: 14px;
  padding: 12px 14px;
  background: linear-gradient(140deg, #fff6dc, var(--paper));
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.6;
}

.pov-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--paper);
  border-radius: var(--radius);
  margin-bottom: 10px;
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: transform .15s;
}
.pov-card:hover { transform: translateY(-1px); }
.pov-avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 600; color: #fff;
  flex-shrink: 0;
}
.pov-name { font-size: 14px; font-weight: 600; color: var(--ink); }
.pov-stat { font-size: 11px; color: var(--ink-mute); margin-top: 2px; }
.pov-summary { font-size: 12px; color: var(--ink-soft); margin-top: 4px; font-style: italic; }

.consensus-block {
  padding: 12px 14px;
  border-radius: var(--radius);
  margin-bottom: 10px;
}
.consensus-block.agreed { background: rgba(106,138,90,.08); border-left: 3px solid var(--good); }
.consensus-block.disputed { background: rgba(195,111,60,.06); border-left: 3px solid var(--warn); }
.cb-tag { font-size: 11px; font-weight: 600; margin-bottom: 6px; }
.agreed-tag { color: var(--good); }
.disputed-tag { color: var(--warn); }
.cb-fact { font-size: 14px; color: var(--ink); font-weight: 500; margin-bottom: 4px; }
.cb-by { font-size: 11px; color: var(--ink-mute); }
.cb-versions { list-style: none; padding-left: 0; margin: 8px 0; }
.cb-versions li {
  padding: 4px 0;
  border-bottom: 1px dashed var(--line);
  font-size: 13px;
  color: var(--ink-soft);
}
.cb-versions li:last-child { border: none; }
.cb-versions b { color: var(--ink); }
.cb-insight {
  margin-top: 8px;
  font-size: 12px;
  color: var(--ink-soft);
  font-style: italic;
  padding-top: 8px;
  border-top: 1px dashed var(--line);
}

.chain-footer {
  display: flex;
  gap: 8px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.chain-footer .ghost-btn,
.chain-footer .primary-btn { flex: 1; margin: 0; }

/* ============================================================ 每日一题 Modal */
.dq-modal-head { margin-bottom: 10px; }
.dq-tag {
  display: inline-block;
  font-size: 11px;
  padding: 3px 10px;
  background: var(--accent);
  color: #fff;
  border-radius: 999px;
}
.dq-modal-q {
  font-size: 22px;
  line-height: 1.5;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 8px;
}
.dq-input {
  width: 100%;
  padding: 14px;
  margin-top: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 14px;
  background: var(--bg);
  resize: none;
  outline: none;
  line-height: 1.6;
}
.dq-input:focus { border-color: var(--accent); }
.dq-foot {
  margin-top: 10px;
  font-size: 11px;
  color: var(--ink-mute);
  font-style: italic;
}

/* ============================================================ 情绪温度 Modal */
.mood-row {
  display: flex;
  gap: 8px;
  margin: 18px 0 14px;
}
.mood-btn {
  flex: 1;
  padding: 14px 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
  font-family: inherit;
  font-size: 11px;
  color: var(--ink-soft);
  transition: all .15s;
}
.mood-btn:hover { border-color: var(--accent); }
.mood-btn.active {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 600;
  transform: scale(1.05);
}
.mood-btn span:first-child { font-size: 22px; }

/* ============================================================ 故事书预览 */
.sb-preview {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 14px 0;
  margin: 14px 0;
  scroll-snap-type: x mandatory;
}
.sb-preview::-webkit-scrollbar { display: none; }
.sb-page {
  flex-shrink: 0;
  width: 200px;
  min-height: 280px;
  background: var(--paper);
  border-radius: 8px;
  padding: 18px 16px;
  box-shadow: 2px 4px 12px rgba(60,40,20,.12);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
}
.sb-cover-page {
  background: linear-gradient(135deg, var(--accent), var(--warn));
  color: #fff;
  text-align: center;
  justify-content: center;
  align-items: center;
}
.sb-cover-emoji { font-size: 48px; margin-bottom: 16px; }
.sb-cover-title { font-size: 22px; font-weight: 700; line-height: 1.4; margin-bottom: 16px; }
.sb-cover-by { font-size: 12px; opacity: .85; font-style: italic; }

.sb-month-tag {
  font-size: 11px;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 10px;
}
.sb-headline {
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.4;
  margin-bottom: 10px;
}
.sb-excerpt {
  font-size: 12px;
  color: var(--ink-soft);
  line-height: 1.6;
}
.sb-page-curr {
  border: 2px solid var(--accent);
  background: linear-gradient(160deg, #fff8e5, var(--paper));
}

.sb-pricing {
  background: var(--bg);
  border-radius: var(--radius);
  padding: 16px;
  margin-top: 8px;
}
.sb-price-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}
.sb-price-label { font-size: 14px; font-weight: 500; color: var(--ink); }
.sb-price-small { font-size: 11px; color: var(--ink-mute); margin-top: 2px; }
.sb-price-num { font-size: 28px; font-weight: 700; color: var(--accent); font-family: 'Times New Roman', serif; }

/* ============================================================ 响应式 */
@media (max-width: 900px) {
  body {
    flex-direction: column;
    padding: 12px;
    gap: 16px;
    align-items: center;
    justify-content: flex-start;  /* 防止内容溢出时被居中截顶 */
    min-height: auto;              /* 让 body 自然高度，不强制视口高 */
  }

  /* 手机框先显示（产品主角），演示面板放下面 */
  .phone-frame {
    order: 1;
    transform: none;
    width: min(390px, calc(100vw - 24px));
    height: min(800px, calc(100vw * 800 / 390 - 24px));
    max-height: 800px;
  }

  /* 演示面板：折叠为紧凑卡片，可点击展开 */
  .demo-panel {
    order: 2;
    position: static;
    width: 100%;
    max-width: 390px;
    padding: 14px 16px;
  }

  /* 紧凑化文字与折叠 */
  .demo-panel details summary h3 { margin: 0; display: inline; }

  /* 紧凑化文字 */
  .demo-panel h2 { font-size: 18px; }
  .demo-panel .brand-mark { width: 40px; height: 40px; }
  .brand-text h2 { font-size: 16px; }
  .demo-flow li { font-size: 11px; margin: 2px 0; }
  .kbd-list li { font-size: 11px; }
}

/* 更小屏（< 480px）单独优化 */
@media (max-width: 480px) {
  body { padding: 8px; gap: 12px; }
  .phone-frame {
    width: calc(100vw - 16px);
    height: calc((100vw - 16px) * 800 / 390);
    padding: 10px;
    border-radius: 36px;
  }
  .phone-screen { border-radius: 26px; }
  .phone-notch { width: 90px; height: 24px; top: 14px; }
  .demo-panel { padding: 12px 14px; }
  .demo-panel h2 { font-size: 16px; }
  .brand-text h2 { font-size: 15px; }
}