/* ============================================================================
 * styles.css — Never Far（暖纸色调 · 移动优先 · 无弹窗无分数）
 * 设计语言：一盏院灯。纸一样的底、墨一样的字、琥珀一样的灯。
 * ==========================================================================*/

:root {
  --bg: #faf8f3;
  --card: #fffdf8;
  --ink: #2b2925;
  --muted: #7d766a;
  --line: #e7e2d6;
  --accent: #b45309;
  --accent-soft: #f6ead8;
  --err: #a32d2d;
  --radius: 14px;
  /* 设计对齐（2026-10-27）：对外三页（落地页/接受页/状态卡）用的是衬线大标题，
     登录后的 App 却是纯 sans——同一个产品两张脸。衬线变量搬进来，
     让「一本书」的语言从首屏一直延续到写一笔的那个输入框。 */
  --serif: Georgia, "Iowan Old Style", "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.6;
  font-size: 16px;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

#app { flex: 1; width: 100%; max-width: 600px; margin: 0 auto; padding: 0 16px; }

.hidden { display: none !important; }

/* ------------------------------------------------------------- 欢迎页 */

.welcome {
  padding: 44px 8px 24px;
  text-align: center;
  /* 纸上浸下来的灯光：从顶部中央一片极淡的暖色，到中部融进纸色。
     不做「装饰」，做「屋里开着灯」——这是纸色产品唯一能借的氛围。 */
  background:
    radial-gradient(120% 46% at 50% -8%,
      rgba(240, 190, 110, 0.20) 0%,
      rgba(240, 190, 110, 0.09) 34%,
      rgba(250, 248, 243, 0) 68%);
}

/* 一盏院灯：光从纸的上方洇下来。灯本身不大，但它照亮的那片纸要大——
   NoDrift 用深色底+顶部光晕做出「氛围」，纸色产品没有深色可借，
   就用一片极淡的暖光渐变把同样的「一盏灯在屋里」的感觉做出来。 */
.lamp {
  width: 62px; height: 62px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 42%, #f7d27a 0%, #eda94a 42%, rgba(237, 169, 74, 0.14) 70%, transparent 74%);
  box-shadow: 0 0 96px 34px rgba(232, 163, 61, 0.16);
}

.welcome h1 { font: 600 46px/1.1 var(--serif); letter-spacing: -0.8px; }

.tagline { font-size: 17px; color: var(--accent); margin-top: 6px; font-style: italic; }

.welcome-sub { color: var(--muted); margin-top: 10px; }

.welcome-core {
  margin: 22px auto 26px;
  max-width: 420px;
  font-size: 15.5px;
}
/* 那句的强调用颜色不用斜体：斜体+破折号+窄屏自动断行 = 三个碎点叠在一起，
   读起来就「不高级」。现在断行只发生在句号边界，强调只靠一个琥珀色。 */
.welcome-core b { color: var(--accent); font-weight: 600; }

/* ---- 产品预览（登录页）----
   两张小样 + 一条连接线。不做成交互动画、不做轮播——静态、小、诚实。
   纸色产品的「质感」靠留白与衬线，不靠装饰。 */
.preview { margin: 24px auto 20px; max-width: 330px; text-align: left; }
.preview-item {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 15px 13px;
  box-shadow: 0 1px 2px rgba(43, 41, 37, 0.04);
}
.preview-item p { margin: 4px 0 0; font: 400 14.5px/1.55 var(--serif); color: var(--ink); }
.preview-when {
  font: 600 10.5px/1 var(--sans); letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted);
}
/* 「你写的那条」：日常笔记的样子 */
.preview-note { border-left: 3px solid var(--accent); }
/* 「守望人收到的那封」：换个边线颜色 + 斜体主题行，一眼看出是另一件事 */
.preview-letter { border-left: 3px solid #c9bfa8; background: #fffdf7; }
.preview-letter-sub {
  font-style: italic; color: var(--accent); font-size: 14px !important;
  margin-bottom: 2px !important;
}
.preview-gap {
  display: flex; align-items: center; gap: 8px;
  margin: 7px 2px; color: var(--muted);
}
.preview-gap::before, .preview-gap::after {
  content: ''; flex: 1 1 auto; height: 1px; background: var(--line);
}
.preview-gap span { font: 400 11.5px/1 var(--serif); font-style: italic; white-space: nowrap; }

.welcome-legal {
  margin: 26px auto 0;
  max-width: 460px;
  font-size: 12.5px;
  color: var(--muted);
  text-align: left;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 14px;
}
.welcome-legal b { color: var(--ink); }

.welcome-links { margin-top: 14px; font-size: 13px; }
.welcome-links a { color: var(--accent); }

/* ------------------------------------------------------------- 卡片与表单 */

.card {
  background: var(--card);
  border: 1px solid #efe9dc;
  border-radius: var(--radius);
  padding: 18px;
  margin: 16px 0;
  /* 纸的质感：一道极淡的影 + 暖白底，替代「灰边框白卡片」的后台感 */
  box-shadow: 0 1px 2px rgba(43, 41, 37, 0.03), 0 8px 24px -18px rgba(43, 41, 37, 0.12);
}

.field { display: block; margin-bottom: 12px; }
.field > span {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 5px;
  letter-spacing: 0.2px;
}

input[type="email"], input[type="password"], input[type="text"], textarea, select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 11px 12px;
  font-size: 16px;   /* ≥16px 防 iOS 聚焦放大 */
  font-family: inherit;
  background: #fffdf9;
  color: var(--ink);
}
input:focus, textarea:focus, select:focus {
  outline: 2px solid var(--accent-soft);
  border-color: var(--accent);
}
textarea { resize: vertical; }

.actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  flex-wrap: wrap;
}

button { font-family: inherit; }

.primary {
  background: var(--ink);
  color: #fdfcf9;
  border: none;
  border-radius: 10px;
  padding: 11px 22px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.primary:disabled { opacity: 0.5; cursor: default; }

.ghost {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 14px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 6px 2px;
}

.hint { font-size: 12.5px; color: var(--muted); line-height: 1.6; }

/* 计数行：一行「长河志」摘要，不是灰小字 */
.notes-count { font: 400 14px/1.6 var(--serif); color: var(--muted);
               margin: 10px 2px 0; letter-spacing: .01em; }
.hint.err { color: var(--err); }
.inline-msg { font-size: 13.5px; color: var(--muted); min-height: 20px; margin-top: 4px; }
.inline-msg.err { color: var(--err); }
.fineprint { font-size: 12px; color: var(--muted); margin-top: 12px; }

/* ------------------------------------------------------------- tab 栏（响应式）
   常驻（2026-10-29）：五个顶层分区 + 弱化的 Sign out。
   位置**分场景**——查证后的结论，不是一刀切：
   · 手机（≤640px，含手机浏览器）：**底部**。iOS HIG 的 tab bar 与 Android
     Material 的 bottom navigation 都在底部，3–5 个分区、拇指够得着；
     Twitter/Instagram/Reddit 的移动网页版同样在底部。移动网页跟随 App 惯例。
   · 桌面（>640px）：**顶部**。桌面网页产品用顶部导航或左侧栏（Notion/Slack/
     Gmail），底部固定在桌面上反而反常——这是用户点破的（「我以为web页应该
     放在顶部」），查证后确认桌面上他是对的。
   原来的设计是 tab 只在 Notes 页有、其他页用右上角「← Notes」返回：
   返回键按两家规范都该在**左上**，右上在 iOS 是动作位——那个位置是反约定的。 */
.tabbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 20;
  display: flex;
  justify-content: center;
  gap: 2px;
  padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px));
  background: rgba(255, 253, 248, 0.92);
  backdrop-filter: saturate(1.4) blur(12px);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  border-top: 1px solid var(--line);
}
/* 内容列与 tab 栏同宽：桌面上不会拉成一整条 */
.tabbar > .tab { flex: 0 1 auto; }
#app > .tabbar { max-width: 600px; margin: 0 auto; padding-left: 16px; padding-right: 16px; }

.tabbar .tab {
  flex: 1 1 0;
  min-width: 0;
  flex-direction: column;
  gap: 3px;
  padding: 7px 2px 6px;
  border-radius: 10px;
  font-size: 10.5px;
  letter-spacing: .01em;
  color: var(--muted);
}
.tabbar .tab svg { width: 20px; height: 20px; }
.tabbar .tab.active {
  background: none;
  color: var(--accent);
  font-weight: 600;
}
.tabbar .tab.active svg { opacity: 1; }
/* 当前所在分区：图标上方一个小点（比整块底色更安静，纸色产品不靠色块说话） */
.tabbar .tab.active::before {
  content: '';
  position: absolute;
  top: 2px;
  width: 14px; height: 2px;
  border-radius: 2px;
  background: var(--accent);
}
.tabbar .tab { position: relative; }
.tabbar .ghost-tab { text-decoration: none; opacity: .75; font-size: 10px; }

/* 内容不再被 tab 栏盖住：留出栏高 + 安全区 */
main { padding-bottom: 96px; }

/* ---- 桌面：tab 栏回到顶部（Web 惯例）---- */
@media (min-width: 641px) {
  /* #app 变纵向 flex，tab 栏用 order 提到最上——DOM 里它在所有视图之后，
     但不能为桌面改 DOM 顺序（手机端 fixed 定位与顺序无关）。
     注意：这里必须用 #app > .tabbar 同选择器——手机规则带 ID 优先级高，
     用 .tabbar 覆盖不动（max-width/margin 会留在手机上那套）。 */
  #app { display: flex; flex-direction: column; }
  #app > .tabbar {
    position: sticky;   /* 跟着页面滚：桌面网页导航不跑出视野 */
    top: 0;
    order: -1;
    z-index: 20;
    max-width: none;
    margin: 0 -16px 4px;
    padding: 8px 16px;
    justify-content: flex-start;
    background: rgba(250, 248, 243, 0.94);
    backdrop-filter: saturate(1.4) blur(10px);
    -webkit-backdrop-filter: saturate(1.4) blur(10px);
    border-top: none;
    border-bottom: 1px solid var(--line);
  }
  #app > .tabbar .tab {
    flex: 0 0 auto;
    flex-direction: row;
    gap: 6px;
    padding: 7px 11px;
    font-size: 13px;
    border-radius: 8px;
  }
  #app > .tabbar .tab svg { width: 17px; height: 17px; }
  #app > .tabbar .tab.active { background: var(--accent-soft); }
  /* 小圆点是手机底部栏的指示器；桌面用整块浅底（和网页 tab 的读法一致） */
  #app > .tabbar .tab.active::before { display: none; }
  #app > .tabbar .ghost-tab { font-size: 13px; margin-left: auto; }
  main { padding-bottom: 40px; }
}

/* ---- 滚动条防跳动 ----
   切 tab 时，内容长的页面出现滚动条会吃掉约 15px 宽度，居中的内容列
   随之左右跳一下。scrollbar-gutter: stable 始终给滚动条留位，
   有无滚动条布局都不动（Chrome 94+/Firefox 97+/Safari 18.2+；
   老浏览器不中招也只是回到原样，不会更坏）。 */
html { scrollbar-gutter: stable; }

/* ------------------------------------------------------------- 顶栏与 tab */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 0 10px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--line);
  margin-bottom: 6px;
}
.brand { font: 600 17px/1 var(--serif); letter-spacing: .01em; }
.brand-sub { display: block; font-size: 11.5px; color: var(--muted); font-weight: 400; font-style: italic; }

/* 品牌标识（2026-10-29）：每个 tab 页头部右侧——用户提的「不知道还在不在这个产品里」。
   一个角括号 + 品牌名，小而安静：不抢分区名的戏，但眼睛随时找得到锚点。
   首页不加：那页左侧就是品牌名本身。 */
.brand-mark {
  font: italic 400 13px/1 var(--serif);
  color: var(--muted);
  letter-spacing: .02em;
  white-space: nowrap;
  opacity: .85;
}

.tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.tab svg {
  width: 17px; height: 17px; flex: 0 0 auto;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
  opacity: .85;
}
.tab { display: inline-flex; align-items: center; gap: 5px; }
.tab {
  border: none;
  background: none;
  padding: 7px 10px;
  border-radius: 8px;
  font-size: 13.5px;
  color: var(--muted);
  cursor: pointer;
  white-space: nowrap;
}
.tab.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.ghost-tab { text-decoration: underline; text-underline-offset: 3px; }

/* ------------------------------------------------------------- 写一笔 */

.composer textarea { background: #fffdf9;
  font: 400 17px/1.75 var(--serif); min-height: 108px; padding: 16px 16px 14px; }

.composer-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.chip-btn {
  border: 1px solid var(--line);
  background: #fffdf9;
  border-radius: 999px;
  padding: 7px 13px;
  font-size: 13px;
  color: var(--ink);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.chip-btn:disabled { opacity: 0.5; }
/* 激活态：模式切换（Letter/Card）与其它 chip 共用。
   没有这条规则时，setLetterMode 加了 .active 也看不见——用户分不清当前在哪个模式。 */
.chip-btn.active { background: var(--accent-soft); border-color: var(--accent);
  color: var(--accent); font-weight: 600; }

.rec-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.chip-btn.recording .rec-dot { background: var(--err); animation: pulse 1s infinite; }
@keyframes pulse { 50% { opacity: 0.25; } }

.chip-btn.tiny { padding: 4px 10px; font-size: 12px; }

/* 投递链接卡（W5-6）：门牌号 + #钥匙，写本人设备上才能拼出来 */
.link-card { border-color: var(--accent); background: #fffdf8; }
.link-card h2 { font-size: 17px; }
.link-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.link-row input[readonly] {
  flex: 1 1 260px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg);
  color: var(--muted);
  font-size: 12.5px;
  padding: 9px 11px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.link-row .hint { margin-right: auto; }

/* 待保存媒体 chip（可移除、语音可转写） */
.pending-chips { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.pchip {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  border: 1px dashed var(--line);
  border-radius: 10px;
  padding: 8px 10px;
  background: #fffdf9;
}
.pchip-label { font-size: 13px; }
.pchip-done { font-size: 12px; color: var(--accent); }
.pchip-del {
  margin-left: auto;
  border: none;
  background: none;
  color: var(--muted);
  font-size: 15px;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 6px;
}
.pchip-del:hover { color: var(--err); background: var(--accent-soft); }

/* 转写文本引用块（待保存 chip 内与时间线卡片内共用） */
.transcript {
  flex-basis: 100%;
  margin: 2px 0 0;
  padding: 6px 10px;
  border-left: 2px solid var(--accent);
  background: var(--accent-soft);
  border-radius: 0 8px 8px 0;
  font-size: 13px;
  font-style: italic;
  color: var(--ink);
}

.capsules { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.capsule {
  border: 1px solid var(--line);
  background: #fffdf9;
  border-radius: 999px;
  padding: 7px 13px;
  font-size: 13px;
  color: var(--muted);
  cursor: pointer;
  white-space: nowrap;
}
.capsule.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); font-weight: 600; }

.composer-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; flex-wrap: wrap; }

/* ------------------------------------------------------------- 时间线 */

main { padding-bottom: 40px; }

/* 设计对齐：小节标题从「灰色小字」升级为「章节名」——衬线、墨色、有分量 */
main h2 { font: 600 22px/1.25 var(--serif); color: var(--ink); letter-spacing: -0.01em;
           margin: 30px 0 8px; }

.notes { display: flex; flex-direction: column; gap: 10px; }

.note { padding: 13px 15px; }
.note-head { display: flex; align-items: baseline; gap: 10px; }
.note-when { font-size: 13px; font-weight: 650; color: var(--ink); }
.note-marks { font-size: 11.5px; color: var(--accent); }
.note-del {
  margin-left: auto;
  border: none;
  background: none;
  color: var(--muted);
  font-size: 15px;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 6px;
}
.note-del.armed { color: var(--err); font-size: 12px; font-weight: 700; }
/* 笔记正文用衬线：这是「本子」不是「表格」——正文是整屏里最重要的字 */
.note-text { margin-top: 6px; font: 400 15.5px/1.7 var(--serif); white-space: pre-wrap; word-break: break-word; }
.note-media { margin-top: 10px; }
.note-media audio { width: 100%; }
.note-media img { max-width: 100%; border-radius: 10px; display: block; }
.note-media .transcript { margin-top: 8px; }

/* 卡片底部：事后补标（小胶囊，无弹窗） */
.flag-row {
  display: flex;
  gap: 6px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed var(--line);
}
.flag-toggle {
  border: 1px solid var(--line);
  background: #fffdf9;
  border-radius: 999px;
  width: 34px;
  height: 30px;
  font-size: 13px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0.55;
}
.flag-toggle.on { opacity: 1; background: var(--accent-soft); border-color: var(--accent); }

/* 设计对齐：空状态不再是「刚好没报错」——衬线、居中、一句话说到位 */
.empty { color: var(--muted); font: 400 15.5px/1.7 var(--serif); text-align: center;
         padding: 34px 18px; }

/* ------------------------------------------------------------- 检索与筛选 */

.filter-bar { margin: 16px 0 4px; }
.filter-bar input[type="search"] {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fffdf9;
  padding: 9px 12px;
  font-size: 14px;
  color: var(--ink);
  font-family: inherit;
}
.filter-chips { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.fchip {
  border: 1px solid var(--line);
  background: #fffdf9;
  border-radius: 999px;
  padding: 5px 11px;
  font-size: 12.5px;
  color: var(--muted);
  cursor: pointer;
  white-space: nowrap;
}
.fchip.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); font-weight: 600; }
#notes-count { margin-top: 6px; }

/* ------------------------------------------------------------- 写信情境 */

.mood-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.mood-chip {
  border: 1px solid var(--line);
  background: #fffdf9;
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 13px;
  color: var(--muted);
  cursor: pointer;
}
.mood-chip.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); font-weight: 600; }
.letter-context { margin-top: 6px; font-size: 12.5px; color: var(--accent); font-style: italic; }

/* ------------------------------------------------------------- 日历 */

.quick-picks { display: flex; gap: 6px; margin-bottom: 10px; flex-wrap: wrap; }

/* 时刻行（W13-14）：时 / 分 / 时区三件并排，窄屏会换行 */
.time-row { display: flex; gap: 8px; flex-wrap: wrap; }
.time-row select {
  flex: 1 1 90px; min-width: 84px;
  border: 1px solid var(--line); border-radius: 10px; background: #fff;
  font: 400 15px/1.4 var(--sans); color: var(--ink); padding: 10px 8px;
}
.time-row select:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

.cal { border: 1px solid var(--line); border-radius: 12px; padding: 10px; background: #fffdf9; }
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.cal-head span { font-size: 14px; font-weight: 650; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.cal-dow { font-size: 10.5px; color: var(--muted); text-align: center; padding: 3px 0; }
.cal-day {
  border: none;
  background: none;
  border-radius: 8px;
  padding: 7px 0;
  font-size: 13.5px;
  color: var(--ink);
  cursor: pointer;
}
.cal-day:disabled { color: #c9c3b6; cursor: default; }
.cal-day.sel { background: var(--accent); color: #fff; font-weight: 700; }

/* ------------------------------------------------------------- 法务卡片 */

.disclaimer-card { border-color: #ecd9b8; background: #fdf8ee; }
.disclaimer-card h2 { margin-top: 0; }
.disclaimer-card p { font-size: 14px; margin-bottom: 8px; }

.plain-list { padding-left: 18px; font-size: 14.5px; }
.plain-list li { margin-bottom: 8px; }

/* ------------------------------------------------------------- Guard 付费卡（W7）
 * 两个档位并排、卡片按钮而非弹窗（拒绝弹窗打断）；数字不小——价格是承诺的一部分，
 * 藏起来反而像陷阱。 */

.guard-card { border-color: #e3ddcd; background: linear-gradient(#fffdf8, #fbf7ee); }
.guard-card h2 { margin-top: 0; }

.guard-plans { display: flex; gap: 10px; margin: 14px 0 4px; flex-wrap: wrap; }

.guard-plan {
  flex: 1 1 120px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 12px 14px;
  border: 1px solid var(--line); border-radius: 12px;
  background: #fff; cursor: pointer; text-align: left;
  font: inherit; color: inherit;
  transition: border-color .15s, transform .1s;
}
.guard-plan:hover { border-color: var(--accent); }
.guard-plan:active { transform: translateY(1px); }
.guard-plan:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.guard-plan-price { font-size: 22px; font-weight: 700; line-height: 1.1; }
.guard-plan-name { font-size: 12px; color: var(--muted); }

.guard-on { font-size: 15px; font-weight: 600; margin-bottom: 4px; }

@media (max-width: 380px) {
  .guard-plans { flex-direction: column; }
}

/* ------------------------------------------------------------- 静默守望卡（W8）
 * 低压力的三种要求：① 一条细线不显示百分比数字；② 未到期是暖色，
 * 临近才是强调色；③ 卡上没有任何按钮——「重置」的动作就是上面那支笔。 */

.watch-card {
  border: 1px solid var(--line); border-radius: 14px;
  background: linear-gradient(#fffdf8, #fbf7ee);
  padding: 12px 14px 10px; margin-bottom: 14px;
}
.watch-line { display: flex; flex-direction: column; gap: 2px; }
.watch-head { font: 600 21px/1.3 var(--serif); color: var(--ink);
                  letter-spacing: -0.01em; }
.watch-detail { font-size: 12.5px; color: var(--muted); line-height: 1.5; }

.watch-bar {
  margin-top: 9px; height: 3px; border-radius: 2px;
  background: #ece6d8; overflow: hidden;
}
.watch-bar span {
  display: block; height: 100%; width: 0;
  background: var(--accent); border-radius: 2px;
  transition: width .4s ease;
}
/* 到期才换色——不到那天不催 */
.watch-card.tone-due .watch-bar span { background: #a32d2d; }
.watch-card.tone-near .watch-bar span { background: #c2740c; }

/* 邀请链接行：只读输入框 + 复制。给的是链接不是一串码——
   收到的人点开就能看清「会收到什么」，不必先注册。 */
.invite-row { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
.invite-link {
  flex: 1 1 auto; min-width: 0;
  border: 1px solid var(--line); border-radius: 10px; background: #fdfcf8;
  font: 400 12.5px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--muted); padding: 9px 10px;
}
.invite-row .chip-btn { flex: 0 0 auto; }
.status-msg { min-height: 18px; font-size: 12.5px; color: var(--muted); margin-top: 6px; }
.status-msg.err { color: var(--err); }

/* --------------------------------------------------------- 凡人小传（W13-14） */

/* 手选清单：一行一条，勾选框在左、日期在中、首行在右——像挑照片那样挑句子 */
.book-pick { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; }
.book-row {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 9px 4px; border-bottom: 1px solid var(--line);
  font-size: 14px; cursor: pointer;
}
.book-row:last-child { border-bottom: 0; }
/* 传承包的选材行（W20）：和 book-row 同一形状，但它是另一件事——
   book-row 是「放进册子」，pick-row 是「交到他手里」，所以别共用类名，
   免得哪天改一个把另一个带坏。 */
.pick-row {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 9px 4px; border-bottom: 1px solid var(--line);
  font-size: 14px; cursor: pointer;
}
.pick-row:last-child { border-bottom: 0; }
.pick-row input { margin-top: 3px; width: 17px; height: 17px; accent-color: var(--accent); flex: 0 0 auto; }
.book-row input { margin-top: 3px; flex: 0 0 auto; width: 17px; height: 17px; accent-color: var(--accent); }
.book-row .d { flex: 0 0 96px; color: var(--muted); font-size: 12px; padding-top: 2px; }
.book-row .t { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis;
               display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.book-row .lock { flex: 0 0 auto; font-size: 12px; color: var(--muted); }

/* 长河：年份大、月份小，条目只给日期 + 首行（预览不喧宾夺主） */
.chapter-year { margin: 22px 0 6px; font: 600 20px/1.2 var(--serif); color: var(--accent); }
.chapter-month { margin: 12px 0 4px; font-size: 11px; letter-spacing: .16em;
               text-transform: uppercase; color: var(--muted); }
.chapter-entry { padding: 7px 0 7px 12px; border-left: 2px solid var(--line);
               margin-bottom: 6px; font-size: 14.5px; }
.chapter-entry .when { font-size: 11.5px; letter-spacing: .05em; text-transform: uppercase;
                     color: var(--muted); }
.chapter-entry .what { white-space: pre-wrap; overflow-wrap: anywhere; }

/* --------------------------------------------------------- 贺卡（W17） */

/* 模板廊：两列小格，每格 = 图标 + 场合名 + 模板色边 */
.card-templates { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tpl-btn {
  display: flex; align-items: center; gap: 9px;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--card); padding: 10px 11px; cursor: pointer;
  font: 400 13.5px/1.3 var(--sans); color: var(--ink); text-align: left;
  transition: border-color .15s, background .15s;
}
.tpl-btn .t-ico { font-size: 19px; flex: 0 0 auto; }
.tpl-btn .t-name { min-width: 0; }
.tpl-btn .t-sub { display: block; font-size: 11px; color: var(--muted); margin-top: 1px; }
.tpl-btn.on { border-color: var(--accent); background: var(--accent-soft); font-weight: 600; }

/* 实时预览：缩小版的收件人页卡片 */
.card-preview {
  border: 1px solid var(--line); border-radius: 16px;
  padding: 24px 18px 20px; text-align: center; position: relative; overflow: hidden;
  box-shadow: 0 1px 2px rgba(43,41,37,.04), 0 14px 30px -26px rgba(43,41,37,.25);
}
.card-preview::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; }
.cp-icon { font-size: 34px; line-height: 1; margin-bottom: 10px; }
.cp-kicker { font: 600 10px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 8px; }
.cp-title { font: 600 22px/1.2 var(--serif); margin-bottom: 14px; }
.cp-msg { font: 400 14.5px/1.7 var(--serif); text-align: left; max-width: 40ch; margin: 0 auto;
  white-space: pre-wrap; word-break: break-word; min-height: 2.4em; color: var(--ink); }
.cp-msg:empty::before { content: 'Your words will show here.'; color: var(--muted); font-style: italic; }
.cp-from { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line);
  font: italic 400 13px/1.4 var(--serif); color: var(--muted); }

/* 每年重复：一行勾选 */
.check-row { display: flex; align-items: flex-start; gap: 10px; margin-top: 16px; cursor: pointer; }
.check-row input { margin-top: 3px; width: 17px; height: 17px; accent-color: var(--accent); flex: 0 0 auto; }
.check-row span { font-size: 14px; }
.check-row .hint { display: block; }

/* 采集点的边界说明：和隐私页同一句话，不藏着 */
.card-disclose { margin-top: 14px; padding: 11px 13px; background: #fdf8ee;
  border: 1px solid #ecd9b8; border-radius: 10px; font-size: 12.5px; line-height: 1.6; }

/* 贺卡历史条目 */
.card-item .badge { font-size: 11px; padding: 2px 8px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.card-item .badge.sent { background: #eef0e6; color: #5c6b4a; }
.card-item .badge.cancelled { background: #f3ece4; color: var(--muted); }
.card-item .card-mini { margin-top: 8px; font: italic 400 13.5px/1.5 var(--serif);
  color: var(--muted); }

/* ------------------------------------------- 回忆侧（W19，2026-10-29） */

/* On This Day：首页顶上那张「去年今天」。暖色、无按钮感——
   它是一次回望，不是任务。 */
.otd {
  margin: 0 0 18px; padding: 16px 18px;
  background: linear-gradient(180deg, #fdf7ec 0%, #fbf3e4 100%);
  border: 1px solid #ecdcc0; border-radius: 16px;
}
.otd-kicker { font: 600 10.5px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase;
  color: #9a7a45; margin-bottom: 8px; }
.otd-text { font: 400 15.5px/1.7 var(--serif); color: var(--ink); margin-bottom: 10px;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.otd-more { background: none; border: 0; padding: 0; cursor: pointer;
  font: 600 13px/1.2 var(--sans); color: #8a6430; text-decoration: underline;
  text-underline-offset: 3px; }

/* Moments 页头：两个看法 + 一行事实 */
.moments-head { margin-bottom: 14px; }
.seg { display: inline-flex; gap: 4px; padding: 3px; border-radius: 999px;
  background: var(--bg-soft, #f1ece4); margin-bottom: 8px; }
.seg button { border: 0; background: transparent; cursor: pointer; border-radius: 999px;
  padding: 7px 15px; font: 600 13px/1 var(--sans); color: var(--muted); }
.seg button.on { background: var(--surface, #fff); color: var(--ink);
  box-shadow: 0 1px 2px rgba(43,41,37,.08); }

/* 时间线：月份一行、日月一列、正文一列 */
.m-month { font: 600 12px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); margin: 22px 0 10px; padding-bottom: 8px;
  border-bottom: 1px solid var(--line); }
.m-month:first-child { margin-top: 4px; }
.m-entry { display: grid; grid-template-columns: 52px 1fr; gap: 12px; padding: 10px 0;
  border-bottom: 1px solid rgba(0,0,0,.05); }
.m-entry:last-child { border-bottom: 0; }
.m-when { font: 600 12.5px/1.5 var(--sans); color: var(--muted); padding-top: 2px; }
/* 同一天的第二条起：不印日期，只留一个极淡的点，让「还在同一天」看得出来 */
.m-when.cont::after { content: '·'; color: #d9d2c4; }
.m-text { font: 400 14.5px/1.65 var(--serif); color: var(--ink); white-space: pre-wrap;
  word-break: break-word; }
.m-strip { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.m-thumb { width: 74px; height: 74px; border-radius: 10px; overflow: hidden;
  background: var(--bg-soft, #f1ece4); }
.m-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.m-thumb.missing { display: grid; place-items: center; color: var(--muted); font-size: 20px; }
.m-voice { font: 400 12.5px/1.4 var(--sans); color: var(--muted); margin-top: 6px; }

/* 照片墙：三列方格，点一下放大成两格（不跳页，回来还是原位置） */
.photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.photo-cell { position: relative; aspect-ratio: 1; border-radius: 8px; overflow: hidden;
  background: var(--bg-soft, #f1ece4); cursor: pointer; transition: grid-column .15s; }
.photo-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-cell.missing { display: grid; place-items: center; color: var(--muted); }
.photo-cell.zoom { grid-column: span 3; aspect-ratio: auto; }
.photo-cell.zoom img { height: auto; }

/* ------------------------------------------------------------- 页脚 */
/* ------------------------------------------------------------- 页脚 */

.site-footer {
  border-top: 1px solid var(--line);
  padding: 18px 16px 30px;
  max-width: 600px;
  margin: 0 auto;
  font-size: 12px;
  color: var(--muted);
}
.site-footer a { color: var(--accent); }

/* 法务页正文 */
.legal-doc { padding: 32px 4px 20px; }
.legal-doc h1 { font-size: 24px; margin-bottom: 6px; }
.legal-doc h2 { font-size: 16px; margin: 26px 0 8px; color: var(--accent); }
.legal-doc p, .legal-doc li { font-size: 14.5px; margin-bottom: 10px; }
.legal-doc ul { padding-left: 20px; }
.legal-doc .back { display: inline-block; margin-bottom: 18px; color: var(--accent); font-size: 14px; }

@media (min-width: 640px) {
  .welcome { padding-top: 72px; }
}

/* ============================================================================
 * 纸与墨（2026-10-30）：给「暖纸 · 一盏院灯」补一层手艺，不添新风格
 *
 * 起因：用户说界面「太朴素，像填空作业」，并且贴了 Namecheap 与 Supabase 作参照。
 * 判断（写在这里，免得以后又跑偏）：
 *   · Namecheap 那张是**没做设计**（2012 年的后台模板），不能当标准；
 *   · Supabase 那张是**高度克制的好设计**——它的功夫全在对齐、留白、层级，
 *     不在装饰。所以这一层不做插画、不做渐变虹彩、不做玻璃拟态。
 *
 * 只治三处真毛病：
 *   ① 所有卡片长得一样 → 分成「纸页」与「平坦行」两种，一眼有主次
 *   ② 纸没有材料感     → 极淡纤维纹理 + 内圈一道高光（纸压在桌上的那种边）
 *   ③ 按钮/输入是扁的   → 按下会陷、聚焦有环、主按钮有一点点厚度
 * ==========================================================================*/

:root {
  /* 尺子：以后新增组件从这里取，不许再随手写 13px / 17px */
  --r-s: 10px;
  --r-m: 14px;
  --r-l: 18px;
  --sh-1: 0 1px 2px rgba(43, 41, 37, .04);
  --sh-2: 0 1px 2px rgba(43, 41, 37, .05), 0 10px 26px -20px rgba(43, 41, 37, .28);
  --sh-3: 0 1px 2px rgba(43, 41, 37, .06), 0 18px 44px -28px rgba(43, 41, 37, .38);
  --hair: #ece6d8;          /* 纸页的边，比 --line 更轻 */
  --ink-2: #55504a;         /* 次级正文，比 --muted 深，比 --ink 轻 */
}

/* ---------------------------------------------------------------- 纸的纤维 */
/* 这一层只加在背景上，不盖内容（pointer-events:none），透明度低到读不出来，
   但少了它整页就是「一块色值」，有了它才是「一张纸」。 */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .045;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E");
}
/* 内容抬到纹理之上（纹理是 z-index:0 的 fixed 层） */
#app, .tabbar, .site-footer { position: relative; z-index: 1; }

/* ------------------------------------------------------ 纸页（可读的容器） */
.card {
  border-color: var(--hair);
  border-radius: var(--r-l);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .9),   /* 纸边的一道光：不是描边，是厚度 */
    var(--sh-2);
}
@media (hover: hover) {
  /* 只有真的能 hover 的设备才抬起——手机上「抬一下」叫抖 */
  .card:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), var(--sh-3); }
  .card { transition: box-shadow .18s ease; }
}

/* 列表里的每一条：**不是纸页，是行**。同一种卡片重复十次就是一面墙，
   所以重复项去掉投影与圆角，只留一条发丝线——眼睛才认得出「这是目录」。 */
.note.card, .card-item.card {
  border-radius: var(--r-m);
  border-color: #efeadd;
  box-shadow: none;
  background: #fffefa;
}
.note.card:hover, .card-item.card:hover { box-shadow: var(--sh-1); }

/* 凹进去的块（选材清单、链接框）：比纸页深一点，暗示「这是可以点选的东西」 */
.book-pick, #handover-pick, .link-row input, .quick-picks .chip-btn {
  background: #fbf8f1;
}

/* ------------------------------------------------------------ 字的三层 */
h1 { font-family: var(--serif); letter-spacing: -.012em; }
.card > h2, main > h2 {
  font-family: var(--serif);
  font-weight: 600;
  letter-spacing: -.006em;
  color: var(--ink);
  /* 标题前一道 2px 的灯芯：全站唯一的「装饰」，只在标题上出现一次 */
  position: relative;
  padding-left: 12px;
}
.card > h2::before, main > h2::before {
  content: '';
  position: absolute;
  left: 0; top: .38em;
  width: 2px; height: 1.02em;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--accent), rgba(180, 83, 9, .35));
}
.hint { color: var(--muted); }

/* --------------------------------------------------------- 按下去要有反应 */
.primary {
  border-radius: var(--r-s);
  background: linear-gradient(180deg, #3a352e 0%, var(--ink) 100%);
  border: 1px solid #201d19;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 1px 2px rgba(43, 41, 37, .18);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.primary:hover:not(:disabled) { filter: brightness(1.06); }
.primary:active:not(:disabled) {
  transform: translateY(1px);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, .28);
}
.primary:disabled { box-shadow: none; }

input, textarea, select { transition: border-color .15s ease, box-shadow .15s ease; }
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: #d8c9a8;
  box-shadow: 0 0 0 3px rgba(240, 196, 116, .28);
}
:focus-visible { outline: 2px solid #c9a063; outline-offset: 2px; }

/* -------------------------------------------------------------- 空状态 */
.empty, .empty-state {
  font-family: var(--serif);
  font-style: italic;
  color: var(--ink-2);
  line-height: 1.8;
}

/* -------------------------------------------------- 自动填充不许改纸的颜色 */
/* 2026-10-30 用户对比截图抓到的：Chrome 自动填充会把输入框刷成淡蓝底
   （-webkit-autofill 的默认背景），在暖纸页面上像一块贴上去的塑料。
   我们的样式从来没有管过它——线上真实用户只要用密码管理器，看到的就不是设计稿。
   修法：用 inset 阴影把整块填成纸色（背景色本身被 WebKit 锁了，改不动），
   再把文字填充色与光标色拉回墨色。 */
:root { color-scheme: light; }

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-text-fill-color: var(--ink);
  -webkit-box-shadow: 0 0 0 1000px #fbf2e1 inset;
  box-shadow: 0 0 0 1000px #fbf2e1 inset;
  border-color: #e6d5b4 !important;
  caret-color: var(--ink);
  /* 让浏览器的「变回原样」动画慢到看不见，避免填充瞬间闪一下蓝 */
  transition: background-color 9999s ease-out 0s;
}
input:-webkit-autofill:focus,
textarea:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #fbf2e1 inset, 0 0 0 3px rgba(240, 196, 116, .28);
  box-shadow: 0 0 0 1000px #fbf2e1 inset, 0 0 0 3px rgba(240, 196, 116, .28);
}

/* 2026-10-30 第二版：全盖成纸色在视觉上统一，但**抹掉了「这格是自动填的」这个信号**。
   所以填充态改成一个更暖、略深的纸色 + 暖描边：一眼看得出「这个已经填好了」，
   又不会像默认蓝那样在米色页面上跳出第三种颜色语言。 */

/* ------------------------------------------------ 账户页与版本号（W22） */

/* 页脚那行小字：版本号要能被找到，但不能抢戏——它是给报 bug 的人用的 */
.foot-version {
  font: 400 11.5px/1.6 var(--sans);
  color: #9c968c;
  letter-spacing: .04em;
  margin-top: 2px;
}

/* 注销那个按钮：必须看得见，但**不能**长得像主要动作。
   灰边框、红字、无填充——想找的人找得到，手滑的人点不到。 */
.danger-quiet {
  color: #9e4c36;
  border-color: #e2cfc4;
  background: #fdf6f2;
}
.danger-quiet:hover:not(:disabled) { border-color: #cfa898; }
.danger-quiet:disabled { opacity: .5; }

/* 账户页里的链接一律低调，不要变成一排蓝色下划线 */
#view-settings a { color: var(--accent); text-decoration: none;
  border-bottom: 1px solid rgba(180, 83, 9, .3); }
#view-settings a:hover { border-bottom-color: var(--accent); }

/* 注销确认区：纸上的一个凹槽，不弹窗（这个产品不用弹窗打断人） */
#delete-face {
  margin-top: 12px;
  padding: 14px 14px 6px;
  border: 1px solid #e8d9d0;
  border-radius: 12px;
  background: #fdf7f4;
}

/* 计划卡片里的两个价位块已有样式；这里只保证在设置页也一样宽 */
#plan-body .guard-plans { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 12px 0; }

/* 恢复码：和卡片页/守护人页那个一次性展示同一形状（等宽、虚线框） */
.code {
  font: 600 16px/1.45 ui-monospace, Menlo, Consolas, monospace;
  letter-spacing: .07em;
  background: #fffdf6;
  border: 1px dashed #d9c9a8;
  border-radius: 10px;
  padding: 12px;
  text-align: center;
  margin: 8px 0;
  word-break: break-all;
}