/* dailyrecord Web UI 样式（阶段 2 重设计）。
 * 设计基调：温暖纸感（参考 Day One / Journey 类日记应用），
 * 米色背景 + 纸白卡片 + 铜赭色强调，正文用衬线字体营造书写感。
 */

:root {
  /* ---- 语义色：浅色主题为基准值，暗色在文件末 [data-theme="dark"] 整体覆写 ---- */
  --bg: #f5f0e6;
  --bg-glow: #efe5d0;              /* body 顶部径向渐变的暖光晕 */
  --paper: #fffdf8;
  --paper-edge: #eae2d2;
  --card-line: rgba(0, 0, 0, .06); /* 卡片 1px 描边：比 paper-edge 更轻，暗色反转 */
  --card-hover-edge: #e0cfb8;      /* 卡片 hover 描边 */
  --input-bg: #fbf8f1;             /* 输入框 / 代码块 / 预览块的沉底面 */
  --fill-soft: #f4eee1;            /* chip / 表头 / 代码底 / 列表 hover 的浅填充 */
  --fill-sunken: #f0e9db;          /* 媒体占位底 */
  --zebra-bg: #fbf7ed;             /* 表格斑马纹 */
  --topic-item-bg: #fffefb;        /* 专题条目卡底（渐隐遮罩同色） */
  --quote-bg: #f8f3e8;             /* 引用块底 */
  --quote-bg-nested: #f3ecdd;      /* 嵌套引用底 */
  --mark-bg: #f7e8a4;              /* <mark> 高亮底 */
  --code-ink: #6b5f4b;             /* 行内代码字色 */
  --ink: #2e2a24;
  --ink-soft: #5f574a;
  --muted: #6e6555;                /* 提到 AA 4.5:1（原 #9a9080 对比不足） */
  --accent: #b5643a;
  --accent-strong: #9c4f28;
  --accent-soft: #f6e4d6;
  --on-accent: #fff;               /* 强调 / 危险 / 渐变实心上的字色 */
  --gold: #d9a441;
  --gold-ink: #8a6a1f;             /* 金色语义（未插入 chip）字色，AA */
  --green: #6f8f5a;
  --success-soft: #eaf0e4;         /* 成功徽章底 */
  --danger: #b0463c;
  --mood-neg: #4f7d9a;             /* 情绪折线负值冷蓝（§6.3） */
  --danger-strong: #8f3830;        /* 危险按钮 hover 底 */
  --danger-edge: #e5c3bf;          /* 危险块描边 */
  --danger-soft: #fbeeec;          /* 危险块淡底 */
  --notice-bg: #fdf6f4;            /* 并发提示条底 */
  --heat-2: #f0d5bf;               /* 日历写作热度 lvl2 */
  --heat-3: #e8c3a4;               /* 日历写作热度 lvl3 */
  /* ---- 圆角三档（M1 设计系统：8 / 12 / 999）；--radius 保留为旧卡片值 ---- */
  --radius: 14px;
  --radius-s: 8px;
  --radius-m: 12px;
  --radius-pill: 999px;
  /* ---- 阴影两档：--shadow-1 静态，--shadow-2 hover 抬升；--shadow 为 --shadow-1 别名 ---- */
  --shadow-1: 0 1px 2px rgba(70, 55, 35, .06), 0 6px 20px -8px rgba(70, 55, 35, .16);
  --shadow-2: 0 2px 4px rgba(70, 55, 35, .07), 0 14px 30px -10px rgba(70, 55, 35, .22);
  --shadow: var(--shadow-1);
  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --font-serif: "Songti SC", "Noto Serif SC", Georgia, "Times New Roman", serif;
  /* ---- 首页光带（Memory OS §2 品牌系统）：天际渐变 + 三层山脊 + 日晕，暗色在文件末覆写 ---- */
  --hero-sky1: #f3e7d3;
  --hero-sky2: #edd8ba;
  --hero-r1: #dcc09a;
  --hero-r2: #c9a87c;
  --hero-r3: #b08f63;
  --hero-sun: #f7e7c8;
}

* { box-sizing: border-box; }

/* hidden 属性全局兜底：下方多处 display:flex/grid 会覆盖 UA 的 [hidden]{display:none}，
 * 导致切换视图/弹窗字段时“隐藏了但仍可见”（topbar/timeline/类型行/工具条等）。 */
[hidden] { display: none !important; }

html, body { margin: 0; height: 100%; }

body {
  font-family: var(--font-ui);
  color: var(--ink);
  background:
    radial-gradient(1200px 500px at 85% -10%, var(--bg-glow) 0%, transparent 60%),
    var(--bg);
  font-size: 15px;
  line-height: 1.6;
}

button {
  font: inherit;
  color: inherit;
  background: var(--paper);
  border: 1px solid var(--paper-edge);
  border-radius: var(--radius-s);
  padding: 6px 14px;
  cursor: pointer;
  transition: all .15s ease;
  touch-action: manipulation;  /* 移动端禁用双击缩放等待，消除点击迟滞 */
}
button:hover { border-color: var(--accent); color: var(--accent-strong); }
button:disabled { opacity: .45; cursor: not-allowed; }

button[type="submit"], #btn-new {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}
button[type="submit"]:hover, #btn-new:hover {
  background: var(--accent-strong);
  border-color: var(--accent-strong);
  color: var(--on-accent);
}
button.ghost { background: transparent; border-style: dashed; color: var(--ink-soft); }
button.danger { color: var(--danger); border-color: var(--danger-edge); }
button.danger:hover { background: var(--danger-soft); border-color: var(--danger); }

input[type="text"], input[type="search"], textarea {
  font: inherit;
  color: var(--ink);
  background: var(--input-bg);
  border: 1px solid var(--paper-edge);
  border-radius: var(--radius-s);
  padding: 8px 12px;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
input:focus, textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(181, 100, 58, .12);
}

/* ---------- 登录页（/login.html） ---------- */

.login-body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 20px;
}

.login-card {
  width: min(360px, 100%);
  padding: 36px 32px;
  box-shadow: var(--shadow);
}

.login-brand { justify-content: center; margin-bottom: 24px; }

.login-card form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.login-card input[type="password"] {
  font: inherit;
  color: var(--ink);
  background: var(--input-bg);
  border: 1px solid var(--paper-edge);
  border-radius: var(--radius-s);
  padding: 8px 12px;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}

.login-error { color: var(--danger); font-size: 13px; }

.login-card button[type="submit"] { margin-top: 4px; padding: 9px 14px; }

/* 邀请码自助注册（入口由后端 registerEnabled 控制，见 login.html） */
#register-area { margin-top: 18px; text-align: center; }
.link-btn {
  background: none; border: none; padding: 0;
  color: var(--ink-soft); font-size: 13px; cursor: pointer; text-decoration: underline;
}
.link-btn:hover { color: var(--accent); }
#register-form { margin-top: 12px; text-align: left; }
textarea { resize: vertical; line-height: 1.75; }

.check { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-soft); cursor: pointer; white-space: nowrap; }
.check input { accent-color: var(--accent); }

.spacer { flex: 1; }

/* ---------- 布局 ---------- */

#app {
  display: grid;
  grid-template-columns: 296px minmax(0, 1fr);
  max-width: 1180px;
  margin: 0 auto;
  min-height: 100vh;
  gap: 28px;
  padding: 28px 24px 60px;
  transition: grid-template-columns .22s ease;   /* 收起/展开侧栏时列宽平滑过渡，不突兀 */
}

#sidebar { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 28px; align-self: start; }

.panel {
  background: var(--paper);
  border: 1px solid var(--paper-edge);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
}

/* ---------- 品牌区 ---------- */

.brand { display: flex; align-items: center; gap: 12px; padding: 2px 6px; }
.brand-mark {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  font-size: 20px; color: var(--on-accent);
  background: linear-gradient(135deg, var(--accent), var(--gold));
  border-radius: var(--radius-m);
  box-shadow: var(--shadow);
}
.brand h1 { margin: 0; font-size: 19px; letter-spacing: .5px; }
.brand p { margin: 0; font-size: 12px; color: var(--muted); }

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

.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.cal-head button { padding: 2px 10px; font-size: 16px; line-height: 1.3; }
#cal-title { font-weight: 600; font-size: 14px; }

.cal-week, .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal-week { margin-bottom: 4px; }
.cal-week span { text-align: center; font-size: 11px; color: var(--muted); padding: 2px 0; }
.cal-week .wk { color: var(--accent); opacity: .75; }

.cal-grid .day {
  position: relative;
  aspect-ratio: 1;
  display: grid; place-items: center;
  font-size: 12.5px;
  color: var(--ink-soft);
  border-radius: 8px;
  cursor: pointer;
  border: none; background: transparent; padding: 0;
  transition: background .12s;
}
.cal-grid .day:hover { background: var(--accent-soft); }
.cal-grid .day.blank { cursor: default; pointer-events: none; }
.cal-grid .day.weekend { color: var(--accent); opacity: .85; }
.cal-grid .day.today { box-shadow: inset 0 0 0 1.5px var(--accent); font-weight: 700; }

/* 写作热度：写了的日子有底色 + 小圆点，没写的保持空白 */
.cal-grid .day.wrote { background: var(--accent-soft); color: var(--accent-strong); font-weight: 600; }
.cal-grid .day.wrote::after {
  content: "";
  position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%);
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--accent);
}
.cal-grid .day.wrote.media::after { background: var(--green); box-shadow: 0 0 0 2px rgba(111, 143, 90, .25); }
.cal-grid .day.wrote.lvl2 { background: var(--heat-2); }
.cal-grid .day.wrote.lvl3 { background: var(--heat-3); }
.cal-grid .day.selected { background: var(--accent); color: var(--on-accent); }
.cal-grid .day.selected::after { background: var(--on-accent); box-shadow: none; }

.cal-filter {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 10px; padding: 6px 10px;
  background: var(--accent-soft); border-radius: 8px;
  font-size: 12.5px; color: var(--accent-strong);
}
.cal-filter button { padding: 1px 8px; font-size: 12px; }

/* ---------- 统计 ---------- */

.stats-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 8px; padding: 14px 16px; }
.stat { text-align: center; }
.stat b { display: block; font-size: 20px; color: var(--accent-strong); font-variant-numeric: tabular-nums; }
.stat span { font-size: 11.5px; color: var(--muted); }

/* ---------- 日志本 ---------- */

.journals-panel h2, .panel h2 { margin: 0 0 8px; font-size: 13px; color: var(--muted); font-weight: 600; letter-spacing: 1px; }
#journal-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
#journal-list li {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px; border-radius: var(--radius-s);
  cursor: pointer; font-size: 14px;
  transition: background .12s;
}
#journal-list li:hover { background: var(--fill-soft); }
#journal-list li.active { background: var(--accent-soft); color: var(--accent-strong); font-weight: 600; }
#journal-list .count { margin-left: auto; font-size: 12px; color: var(--muted); }
#journal-list .del {
  border: none; background: transparent; padding: 0 4px;
  color: var(--muted); font-size: 15px; line-height: 1;
  opacity: 0;
}
#journal-list li:hover .del { opacity: 1; }
#journal-list .del:hover { color: var(--danger); }
#journal-form { margin-top: 8px; }
#journal-name { width: 100%; font-size: 13px; padding: 6px 10px; }

.side-foot { display: flex; align-items: center; justify-content: space-between; padding: 0 6px; }
.side-foot button { font-size: 12.5px; padding: 4px 10px; }

/* ---------- 主区域 ---------- */

#main { display: flex; flex-direction: column; gap: 18px; min-width: 0; }

/* 顶栏命令栏 sticky：滚动时搜索/提问入口不离开视口（合同 §1.2，裁决②）。
 * 负 margin 把 sticky 头上移贴视口顶，自身背景遮住滚过的内容。 */
#topbar {
  display: flex; gap: 12px; align-items: center;
  position: sticky; top: 0; z-index: 40;
  background: var(--bg);
  padding: 10px 0 8px; margin: -10px 0 0;
}
.search-wrap {
  flex: 1; position: relative; display: flex; align-items: center;
  background: var(--paper); border: 1px solid var(--paper-edge);
  border-radius: 999px; box-shadow: var(--shadow);
  transition: border-color .15s, box-shadow .15s;
}
.search-wrap:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(181, 100, 58, .12); }
.search-ico { padding-left: 14px; color: var(--muted); font-size: 17px; }
.search-wrap input { flex: 1; border: none; background: transparent; box-shadow: none; }
.search-wrap input:focus { box-shadow: none; }
#btn-new { border-radius: 999px; padding: 8px 18px; font-weight: 600; }

/* 速记（写作面）：两行框在宽列里显得单薄、页面看着空洞 —— 改成 4 行地板 + 随内容自动增高（app.js
 * autoGrowCapture 写回 height，封顶 40vh，超了自己滚）。手动 resize 柄去掉（全局 textarea 那条是
 * resize: vertical，这里用 id 选择器盖掉）：拖出来的高度在窄列里只会把时间轴挤走，自动增高不用用户操心。
 * min-height 用 em 算（行高 1.75 来自全局 textarea 规则 + 上下 padding 2px）：JS 写回的 height 再小，
 * 也不会矮过 4 行 —— 地板在 CSS 而不是在 JS，清空复位时不必重算一遍。 */
#capture-form { display: flex; flex-direction: column; gap: 10px; }
#capture-text {
  border: none; background: transparent; padding: 2px;
  font-family: var(--font-serif); font-size: 16px;
  min-height: calc(4 * 1.75em + 4px); max-height: 40vh; overflow-y: auto; resize: none;
}
#capture-text:focus { box-shadow: none; }
/* 框下那行「今天已写 N 篇 · 共 M 字」：用户自己的数据，压住空日的空洞感（空日整行 hidden） */
.capture-today { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.capture-actions { display: flex; gap: 10px; align-items: center; }
.capture-actions input[type="text"] { flex: 1; font-size: 13px; padding: 6px 10px; }

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

#timeline { display: flex; flex-direction: column; gap: 22px; }
.empty { color: var(--muted); text-align: center; padding: 48px 0; }

/* 时间线（默认视图）：左轨日期标 + 起点圆点 + 连接竖线；右侧当日卡片两列等宽并排 */
.day-group {
  display: grid; grid-template-columns: 76px minmax(0, 1fr);
  gap: 0 18px; position: relative;
}
.day-rail { position: relative; display: flex; justify-content: flex-end; padding: 2px 14px 0 0; }
.day-rail::after {                 /* 连接竖线：left 15px 与视图切换器「时间轴」文字左缘对齐（seg 边 1 + 垫 2 + 钮 12）；bottom 负值桥接 #timeline 的 22px 组间距 */
  content: ""; position: absolute; top: 6px; bottom: -22px; left: 15px;
  width: 2px; border-radius: 1px; background: var(--paper-edge);
}
.day-group:last-child .day-rail::after { bottom: 0; }
.day-rail::before {                /* 当日起点圆点：与竖线同心（线中心 16 → 点 left 12）*/
  content: ""; position: absolute; top: 4px; left: 12px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}
.day-rail-date {
  text-align: right; font-size: 12px; line-height: 1.35; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.day-cards {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px; align-items: stretch;
}
/* 统一卡片尺寸（纠正设计稿高低不齐）：定高 + 内容层弹性截断 + 底部层沉底 */
.day-cards .entry-card { height: 318px; overflow: hidden; }
.day-cards .card-body { flex: 1 1 auto; min-height: 0; }
.day-cards .card-excerpt.clamped { -webkit-line-clamp: 4; }
.day-cards .card-expand { display: none; }   /* 定高卡不展开全文，点开读全文 */
.day-cards .card-foot { margin-top: auto; }
@media (max-width: 760px) {
  .day-group { gap: 0 12px; }   /* 轨宽保持桌面 76px：左缘竖线(15)与右对齐日期(止于 62)才互不重叠 */
  .day-cards { grid-template-columns: 1fr; }
  .day-cards .entry-card { height: auto; overflow: visible; }
  .day-cards .card-expand { display: inline; }
}
.day-header {
  display: flex; align-items: baseline; gap: 10px;
  padding-left: 4px;
  font-size: 13px; color: var(--muted);
}
.day-header .dow { color: var(--accent); }

.entry-card {
  background: var(--paper);
  border: 1px solid var(--paper-edge);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px 18px;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s;
  touch-action: manipulation;
}
.entry-card:hover {
  transform: translateY(-2px);
  border-color: var(--card-hover-edge);
  box-shadow: var(--shadow-2);
}
.entry-card .title { font-weight: 600; font-size: 15.5px; }
.entry-card .title .star { color: var(--gold); margin-left: 6px; }
.entry-card .preview {
  margin-top: 6px;
  font-family: var(--font-serif);
  color: var(--ink-soft);
  font-size: 15px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: pre-line;
}
.entry-card .badges { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.badge {
  font-size: 12px; color: var(--ink-soft);
  background: var(--fill-soft); border-radius: 999px; padding: 2px 10px;
}
.badge.time { color: var(--muted); background: transparent; padding-left: 0; }

/* 条目卡片上的分享按钮：徽章外观，点击弹分享弹窗（见 JS 入口） */
button.badge.share {
  font: inherit; font-size: 12px;
  cursor: pointer;
  border: 1px dashed var(--paper-edge);
  color: var(--ink-soft);
}
button.badge.share:hover {
  border-color: var(--accent);
  border-style: solid;
  color: var(--accent-strong);
}

/* ---------- 分享卡片弹窗 ---------- */

#share-dialog {
  border: none; border-radius: 18px;
  padding: 0;
  width: min(420px, 92vw);
  background: var(--paper);
  box-shadow: 0 30px 80px -20px rgba(50, 38, 22, .45);
}
#share-dialog::backdrop { background: rgba(24, 18, 10, .55); }
.share-head {
  padding: 16px 18px 0;
  font-weight: 600; color: var(--ink);
}
.share-preview {
  display: flex; justify-content: center; align-items: center;
  min-height: 140px;
  padding: 14px 18px;
}
.share-preview img {
  max-width: 100%; max-height: 58vh;
  border-radius: 10px;
  box-shadow: 0 16px 40px -16px rgba(50, 38, 22, .45);
}
.share-actions {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 8px;
  padding: 0 18px 16px;
}
.share-tip {
  padding: 0 18px 10px;
  font-size: 12px; color: var(--muted);
  text-align: center;
}

.media-strip { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.media-strip img {
  width: 68px; height: 68px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--paper-edge);
  background: var(--fill-sunken);
  cursor: zoom-in;
}
.media-strip .more {
  width: 68px; height: 68px;
  display: grid; place-items: center;
  border-radius: 10px;
  background: var(--fill-sunken); color: var(--ink-soft);
  font-size: 13px;
}

#pager { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 8px 0; }
#pager .info { color: var(--muted); font-size: 13px; }

/* ---------- 编辑器弹窗 ---------- */

#editor {
  border: none; border-radius: 18px;
  padding: 0;
  width: min(680px, 92vw);
  background: var(--paper);
  box-shadow: 0 30px 80px -20px rgba(50, 38, 22, .45);
}
#editor::backdrop { background: rgba(60, 48, 32, .4); backdrop-filter: blur(3px); }
#editor-form { display: flex; flex-direction: column; gap: 12px; padding: 22px 24px; }
.editor-head { display: flex; gap: 12px; align-items: center; }
#editor-title { flex: 1; border: none; background: transparent; font-size: 19px; font-weight: 600; padding: 2px; }
#editor-title:focus { box-shadow: none; border-bottom: 1px solid var(--paper-edge); border-radius: 0; }
#editor-text { font-family: var(--font-serif); font-size: 16px; min-height: 240px; }

.editor-media { display: flex; flex-direction: column; gap: 8px; }
.editor-media .media-strip img { width: 76px; height: 76px; cursor: zoom-in; }
.media-item { position: relative; }
.media-item .rm {
  position: absolute; top: -6px; right: -6px;
  width: 20px; height: 20px; padding: 0;
  border-radius: 50%; font-size: 12px; line-height: 1;
  background: var(--danger); color: var(--on-accent); border: 2px solid var(--paper);
  display: grid; place-items: center;
}
.media-item .rm:hover { background: var(--danger-strong); color: var(--on-accent); }
.media-actions { display: flex; align-items: center; gap: 10px; }
.hint { font-size: 12px; color: var(--muted); }

/* 定位行：当前位置文本 + 改名/地图选点/清除（重新定位在 .media-actions） */
.editor-loc-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.editor-loc-row .loc-text { font-size: 13px; color: var(--ink); margin-right: auto; }
.editor-loc-row .loc-text.muted { color: var(--muted); }
.editor-loc-row button[disabled] { opacity: .45; cursor: not-allowed; }

/* 地图选点弹层（高德 JS API）：叠在编辑弹窗之上，地图占满固定高度 */
#map-picker {
  border: none; border-radius: 18px; padding: 0;
  width: min(560px, 92vw);
  background: var(--paper);
  box-shadow: 0 30px 80px -20px rgba(50, 38, 22, .45);
}
#map-picker::backdrop { background: rgba(24, 18, 10, .55); }
.map-picker-body { display: flex; flex-direction: column; }
#map-container { width: 100%; height: min(60vh, 420px); border-radius: 18px 18px 0 0; }
.map-picker-actions { display: flex; align-items: center; gap: 10px; padding: 12px 16px; }
.map-picker-actions .spacer { flex: 1; }

/* 附件大图查看器：页内 lightbox（可叠在编辑弹窗之上），点遮罩/Esc 关闭 */
#image-viewer {
  margin: auto; padding: 10px;
  border: none; border-radius: 14px; background: transparent;
  max-width: 94vw; max-height: 92vh;
}
#image-viewer::backdrop { background: rgba(24, 18, 10, .72); }
#image-viewer-img {
  display: block; margin: auto;
  max-width: 92vw; max-height: 86vh;
  border-radius: 10px;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .6);
  background: var(--paper);
  cursor: zoom-out;
}

/* ---------- 扫码绑定 / 发布弹窗（ADR-009 微信、ADR-013 小红书共用同一套视觉） ---------- */

#weixin-bind, #xhs-bind, #publish-dialog {
  border: none; border-radius: 18px;
  padding: 0;
  width: min(340px, 92vw);
  background: var(--paper);
  box-shadow: 0 30px 80px -20px rgba(50, 38, 22, .45);
}
/* 发布弹窗带表单字段，略宽些才好排 */
#publish-dialog { width: min(420px, 92vw); }
#weixin-bind::backdrop, #xhs-bind::backdrop, #publish-dialog::backdrop { background: rgba(24, 18, 10, .55); }
.weixin-bind-body { display: flex; flex-direction: column; gap: 10px; padding: 20px 22px; }
.weixin-bind-head { font-weight: 600; color: var(--ink); text-align: center; }
.weixin-qr {
  display: flex; justify-content: center; align-items: center;
  min-height: 208px;
}
/* 二维码固定见方、白底（深色主题下也留白边，扫码识别率才稳） */
.weixin-qr-img {
  width: 200px; height: 200px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid var(--paper-edge);
}
.weixin-bind-status { text-align: center; font-size: 14px; color: var(--ink-soft); min-height: 20px; }
.weixin-bind-tip { text-align: center; line-height: 1.5; }
.weixin-bind-actions { display: flex; justify-content: center; gap: 10px; margin-top: 2px; }

/* 发布弹窗的表单行：标签在上、控件在下（复用弹窗的 flex column gap 排布） */
.publish-field { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--ink-soft); }
.publish-field > span { font-weight: 600; }
.publish-field input, .publish-field select, .publish-field textarea {
  font: inherit; color: var(--ink);
  padding: 7px 9px; border-radius: 9px;
  border: 1px solid var(--paper-edge); background: var(--paper);
}
.publish-field textarea { resize: vertical; }

#editor-tags { font-size: 13px; }
#editor-form footer { display: flex; align-items: center; gap: 10px; }
#editor-meta { font-size: 12px; color: var(--muted); }

/* 并发提示条（L2/L3/L4）：它出现就意味着「你写的东西可能和别处不一致」，因此用告警色
   而不是普通信息色；但它又绝不能抢过正文，所以只用左边一道色条 + 淡底，不加大字号。 */
.editor-notice {
  border: 1px solid var(--danger-edge); border-left: 3px solid var(--danger);
  border-radius: 8px; background: var(--notice-bg);
  padding: 8px 12px; font-size: 13px; color: var(--ink-soft);
}
.editor-notice p { margin: 0 0 8px; }
/* 按钮换行而不是横向溢出：窄屏（手机）上三选 + 稍后决定共四个按钮，一行摆不下。
   溢出会撑破 dialog 宽度，而 dialog 一旦被撑出视口，UA 的 max-height 会直接裁掉底部按钮 ——
   那就成了「看得见选项但点不到」，比不显示更糟。 */
.notice-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.notice-actions button { font-size: 13px; padding: 4px 12px; }
/* 推荐的那一条出路（换到最新版 / 恢复草稿 / 另存为新条目）：用强调色而不是
   button[type=submit] 的选择器，因为它们是 type=button，且不能继承弹窗底部保存钮的权重。 */
.notice-actions button.notice-primary {
  background: var(--accent); border-color: var(--accent); color: var(--on-accent);
}
.notice-actions button.notice-primary:hover {
  background: var(--accent-strong); border-color: var(--accent-strong); color: var(--on-accent);
}

/* 离屏文件选择框：不用 display:none，避免部分浏览器拦截程序化点击 */
.offscreen {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* ---------- 提示 ---------- */

#toast {
  position: fixed; left: 50%; bottom: 32px; transform: translateX(-50%);
  background: #37302a; color: #f7f1e6;
  padding: 9px 20px; border-radius: 999px;
  font-size: 13.5px;
  box-shadow: 0 10px 30px -8px rgba(0, 0, 0, .4);
  z-index: 99;
  display: flex; align-items: center; gap: 14px;
}
/* 带「撤销」动作的 toast（软删后反悔窗口）：按钮继承 toast 文字色，下划线表可点 */
#toast .toast-undo {
  border: none; background: transparent; cursor: pointer; color: inherit;
  font: inherit; font-weight: 600; text-decoration: underline; padding: 0;
}

/* ---------- 日记聊天机器人 ---------- */

#chat-fab {
  position: fixed; right: 24px; bottom: 24px; z-index: 60;
  width: 56px; height: 56px; padding: 0;
  border-radius: 50%; border: none;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-strong) 100%);
  color: var(--paper);
  box-shadow: 0 10px 24px -8px rgba(156, 79, 40, .55);
  display: grid; place-items: center;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease;
}
#chat-fab:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 14px 30px -8px rgba(156, 79, 40, .65); }
#chat-fab svg { width: 32px; height: 32px; }
#chat-fab svg .face { fill: var(--paper); }

#chat-panel {
  position: fixed; right: 24px; bottom: 92px; z-index: 59;
  width: min(380px, calc(100vw - 48px));
  height: min(560px, calc(100vh - 130px));
  display: flex; flex-direction: column;
  background: var(--paper); border: 1px solid var(--paper-edge);
  border-radius: var(--radius); box-shadow: var(--shadow);
  opacity: 0; transform: translateY(14px) scale(.98);
  transition: opacity .2s ease, transform .2s ease;
}
/* display:flex 会覆盖 UA 的 [hidden]{display:none}：不关闭时面板透明但仍渲染，
 * 会拦截覆盖区域内所有点击（移动端几乎盖满屏，表现为"点不到元素"），必须显式隐藏 */
#chat-panel[hidden] { display: none; }
#chat-panel.open { opacity: 1; transform: none; }

.chat-head {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; border-bottom: 1px solid var(--paper-edge);
}
.chat-avatar {
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent-strong);
  font-size: 16px;
}
.chat-titles { flex: 1; line-height: 1.25; }
.chat-titles b { font-size: 14.5px; }
.chat-titles span { display: block; font-size: 11.5px; color: var(--muted); }
.chat-head button { padding: 3px 10px; font-size: 12.5px; }
#chat-close { width: 30px; height: 30px; padding: 0; border-radius: 50%; font-size: 17px; }

#chat-messages {
  flex: 1; overflow-y: auto;
  padding: 14px; display: flex; flex-direction: column; gap: 10px;
}
.msg { display: flex; }
.msg.mine { justify-content: flex-end; }
/* bot 行除气泡外还可能带附加信息（引用条 / trace）：改纵向叠放，
 * 否则两个子元素会左右并排，meta 被挤到气泡旁边（.msg 是 flex 容器） */
.msg.bot { flex-direction: column; align-items: flex-start; gap: 6px; }
.msg .bubble {
  max-width: 80%; padding: 8px 12px; border-radius: 12px;
  font-size: 13.5px; line-height: 1.55;
  white-space: pre-wrap; word-break: break-word;
}
.msg.mine .bubble {
  background: var(--accent); color: var(--on-accent);
  border-bottom-right-radius: 4px;
}
.msg.bot .bubble {
  background: var(--bg); color: var(--ink);
  border: 1px solid var(--paper-edge);
  border-bottom-left-radius: 4px;
}

/* 机器人思考中的三点动画 */
.typing .bubble { display: inline-flex; gap: 4px; align-items: center; padding: 12px; }
.typing .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--muted); animation: typing-bounce 1s infinite;
}
.typing .dot:nth-child(2) { animation-delay: .15s; }
.typing .dot:nth-child(3) { animation-delay: .3s; }
@keyframes typing-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: .5; }
  30% { transform: translateY(-4px); opacity: 1; }
}
/* 轮播文案（chat.js TYPING_STAGES）：与三点同排，颜色弱于正文 */
.typing .typing-text { margin-left: 6px; font-size: 12.5px; color: var(--muted); }

/* 引用条 chip（modules/agent.md §6.6）：日期 + 标题，点击打开条目编辑器 */
.chat-refs { display: flex; flex-wrap: wrap; gap: 6px; max-width: 100%; }
.chat-ref {
  display: inline-flex; align-items: baseline; gap: 6px;
  max-width: 100%; min-height: 26px; padding: 3px 10px;
  border: 1px solid var(--paper-edge); border-radius: 999px;
  background: var(--paper); color: var(--ink-soft);
  font-size: 12px; line-height: 1.5; text-align: left; cursor: pointer;
}
.chat-ref:hover { border-color: var(--accent); color: var(--accent); }
.chat-ref-date { flex: none; color: var(--muted); font-variant-numeric: tabular-nums; }
.chat-ref-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* uiHint 推荐的那一条（服务端恰好命中一条时下发）：不自动跳转，只让它更好认 */
.chat-ref.hint { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-strong); }

/* trace 折叠区（§6.5「小记做了什么」）：排查材料，默认收起；工具名等宽便于对齐扫读 */
.chat-trace { max-width: 100%; font-size: 11.5px; color: var(--muted); }
.chat-trace summary { cursor: pointer; user-select: none; list-style: none; }
.chat-trace summary::-webkit-details-marker { display: none; }
.chat-trace summary::before { content: "▸ "; }
.chat-trace[open] summary::before { content: "▾ "; }
.chat-trace ol { margin: 4px 0 0; padding-left: 18px; }
.chat-trace li { margin: 2px 0; line-height: 1.5; }
.chat-trace code {
  margin-right: 6px; color: var(--ink-soft);
  font-family: ui-monospace, Menlo, Consolas, monospace;
}
.chat-trace-label { margin-right: 6px; }
.chat-trace-ms { margin-left: 6px; font-variant-numeric: tabular-nums; }
/* 非 ok 的状态才上色（chat.js TRACE_STATUS）：一片灰字里要能一眼扫到被拦下的那步 */
.chat-trace-denied, .chat-trace-skipped, .chat-trace-pending {
  margin-right: 6px; color: var(--accent);
}
.chat-trace-error { margin-right: 6px; color: var(--danger); }

/* 动作卡（modules/agent.md §6.6）：写能力的唯一把关点，因此比气泡更「实」——
 * 纸白底 + 强调色左边框 + 阴影，在一列灰底气泡里要一眼看得出「这里要我点头」 */
.chat-action-card {
  max-width: 100%; padding: 10px 12px;
  background: var(--paper);
  border: 1px solid var(--paper-edge);
  border-left: 3px solid var(--accent);
  border-radius: 10px; box-shadow: var(--shadow);
  font-size: 13px; line-height: 1.55;
}
.chat-action-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.chat-action-badge {
  flex: none; padding: 1px 8px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent-strong);
  font-size: 11.5px; font-weight: 600;
}
/* 工具名等宽：与 trace 里的 code 同一副面孔，两处对得上号 */
.chat-action-tool {
  color: var(--muted); font-size: 11px;
  font-family: ui-monospace, Menlo, Consolas, monospace;
}
.chat-action-summary { color: var(--ink); font-weight: 600; }
.chat-action-detail { margin-top: 2px; color: var(--ink-soft); font-size: 12.5px; }
/* 预览块：待写内容与被覆盖的原文各一块（§4.3 改写卡要同时给两段） */
.chat-action-preview {
  margin-top: 6px; padding: 6px 8px;
  background: var(--input-bg); border-radius: 8px;
  color: var(--ink-soft); font-size: 12.5px;
  white-space: pre-wrap; word-break: break-word;
}
.chat-action-preview b {
  display: block; margin-bottom: 2px;
  color: var(--muted); font-size: 11px; font-weight: 600;
}
/* 「将被覆盖」上危险色左边框：这一段是要消失的，不能与「将写入」长得一样 */
.chat-action-preview.old { border-left: 2px solid var(--danger); }
.chat-action-note { margin-top: 6px; color: var(--muted); font-size: 12px; }
.chat-action-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
/* 倒计时单独占一行：它每秒都在变，夹在按钮中间会把按钮挤得左右跳 */
.chat-action-count {
  flex: 1; min-width: 100%;
  color: var(--muted); font-size: 11.5px; font-variant-numeric: tabular-nums;
}
.chat-action-foot button { padding: 5px 14px; font-size: 12.5px; }
/* 确认是这张卡上唯一的「前进」动作，用强调色实心。不复用 `button[type=submit]`
 * 那条规则：卡片不在 form 里，靠 type 上色的话日后被包进 form 就会连带触发提交 */
.chat-action-confirm { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.chat-action-confirm:hover {
  background: var(--accent-strong); border-color: var(--accent-strong); color: var(--on-accent);
}

/* 已决策的卡片整体降调：去掉强调色左边框与阴影，别在会话里继续抢注意力
 * （pending 之外都不再有可点的按钮，剩下的只是一条历史记录）。
 * 左边框改成按结果上色：绿=写成了，红=没写成/过期，灰=用户自己取消或撤销 */
.chat-action-card[data-status]:not([data-status="pending"]) {
  border-left-color: var(--paper-edge); box-shadow: none; opacity: .85;
}
.chat-action-card[data-status="executed"] {
  border-left-color: var(--green); box-shadow: var(--shadow); opacity: 1;
}
.chat-action-card[data-status="failed"],
.chat-action-card[data-status="expired"] { border-left-color: var(--danger); }
.chat-action-card[data-status="executed"] .chat-action-badge {
  background: var(--success-soft); color: var(--green);
}
.chat-action-card[data-status="failed"] .chat-action-badge,
.chat-action-card[data-status="expired"] .chat-action-badge {
  background: var(--danger-soft); color: var(--danger);
}
.chat-action-card[data-status="denied"] .chat-action-badge,
.chat-action-card[data-status="undone"] .chat-action-badge,
.chat-action-card[data-status="decided"] .chat-action-badge,
.chat-action-card[data-status="gone"] .chat-action-badge {
  background: var(--bg); color: var(--muted);
}

/* 待确认条（chat.js renderChatPending）：钉在面板顶部、会话之上——它是「还有哪些事等我点头」
 * 的唯一清单（包括微信那边提议的）。放进会话流里就会被滚走，而这一栏的价值恰恰是
 * 「不管聊到哪儿都还在」。无待确认时整条隐藏，不白占面板高度。 */
.chat-pending {
  flex: none; max-height: 42%; overflow-y: auto;
  display: flex; flex-direction: column; gap: 8px;
  padding: 8px 12px; background: var(--notice-bg);
  border-bottom: 1px solid var(--paper-edge);
}
.chat-pending-head { display: flex; align-items: baseline; gap: 8px; font-size: 12.5px; }
.chat-pending-head b { color: var(--accent-strong); }
.chat-pending-list { display: flex; flex-direction: column; gap: 8px; }
/* 行比气泡「实」（纸白底 + 强调色左边框）：与动作卡同一副面孔，两处看上去就是同一条动作 */
.chat-pending-row {
  display: flex; flex-direction: column; gap: 3px;
  padding: 8px 10px; background: var(--paper);
  border: 1px solid var(--paper-edge); border-left: 3px solid var(--accent);
  border-radius: 10px; font-size: 12.5px; line-height: 1.5;
}
/* 拉取失败那一行：只有文案 + 重试按钮，改成横排（竖排会把一个按钮挂在一句话下面） */
.chat-pending-row.error {
  flex-direction: row; align-items: center; gap: 8px;
  border-left-color: var(--danger);
}
.chat-pending-meta {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px;
  color: var(--muted); font-size: 11px;
}
/* 确认码等宽：与动作卡/trace 里的工具名同一副面孔；它取的是 id 尾部（随机段），
 * 因为 UUIDv7 的前缀是时间戳，同一分钟里提议的两个动作前缀完全一样 */
.chat-pending-code { color: var(--ink-soft); font-family: ui-monospace, Menlo, Consolas, monospace; }
.chat-pending-sum { color: var(--ink); font-weight: 600; overflow-wrap: anywhere; }
.chat-pending-detail { color: var(--ink-soft); overflow-wrap: anywhere; }
.chat-pending-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 4px; }
/* 倒计时占满剩下的宽度（同 .chat-action-count）：它每秒都在变，夹在按钮中间会把按钮挤得左右跳 */
.chat-pending-count {
  flex: 1; color: var(--muted); font-size: 11.5px; font-variant-numeric: tabular-nums;
}
.chat-pending-foot button { padding: 3px 12px; font-size: 12.5px; }
.chat-pending-confirm { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.chat-pending-confirm:hover {
  background: var(--accent-strong); border-color: var(--accent-strong); color: var(--on-accent);
}

#chat-form {
  display: flex; gap: 8px; align-items: flex-end;
  padding: 10px 12px; border-top: 1px solid var(--paper-edge);
}
#chat-input { flex: 1; resize: none; max-height: 96px; font-size: 13.5px; }
#chat-send { align-self: flex-end; }

/* ---------- Markdown 渲染（.md，由 markdown.js 生成；时间线正文与编辑器预览共用） ---------- */

.md { line-height: 1.75; word-break: break-word; white-space: normal; }
.md > :first-child { margin-top: 0; }
.md > :last-child { margin-bottom: 0; }
.md p { margin: 0 0 8px; }
/* 六级标题都得有样式：v2.0 起 `####`~`######` 也能渲染，只写到 h3 会让深层标题跟正文一样大 */
.md h1, .md h2, .md h3, .md h4, .md h5, .md h6 {
  margin: 12px 0 6px; line-height: 1.4; color: var(--ink);
}
.md h1 { font-size: 1.3em; }
.md h2 { font-size: 1.15em; }
.md h3 { font-size: 1.05em; }
.md h4 { font-size: 1em; }
.md h5 { font-size: .95em; color: var(--ink-soft); }
.md h6 { font-size: .9em; color: var(--muted); }

/* 嵌套列表（v2.0 的核心能力）：缩进逐级累加，marker 按层级换形状，深列表才看得出层级 */
.md ul, .md ol { margin: 4px 0 8px; padding-left: 1.5em; }
.md li { margin: 2px 0; }
.md li > ul, .md li > ol { margin: 2px 0; }   /* 子列表紧贴父项，不吃段落间距 */
.md ul ul, .md ol ul { list-style-type: circle; }
.md ul ul ul, .md ol ul ul { list-style-type: square; }
.md li > p { margin: 0 0 4px; }               /* 松散列表：项内段落间距比正文小 */
.md li > :last-child { margin-bottom: 0; }

/* 任务列表：勾选框绝对定位到项目符号的位置，于是文字与同级普通项对齐、子列表缩进也不受影响 */
.md li.md-task-item { list-style: none; position: relative; }
.md li.md-task-item > .md-task { position: absolute; left: -1.35em; }

.md blockquote {
  margin: 8px 0; padding: 4px 12px;
  border-left: 3px solid var(--paper-edge); border-radius: 0 8px 8px 0;
  background: var(--quote-bg); color: var(--ink-soft);
}
/* 引用里现在可以放列表/代码块/多段落（v2.0 递归解析），所以不能再把所有 p 的边距压成 0 */
.md blockquote p { margin: 0 0 4px; }
.md blockquote > :last-child { margin-bottom: 0; }
.md blockquote ul, .md blockquote ol { margin: 4px 0; }
.md blockquote blockquote { margin: 4px 0; background: var(--quote-bg-nested); }
.md pre {
  position: relative;                 /* 语言角标的定位上下文 */
  margin: 8px 0; padding: 10px 12px;
  background: var(--fill-soft); border-radius: 8px; overflow-x: auto;
}
.md pre code { background: none; padding: 0; }
/* 围栏的 info string 只标注不高亮（不引依赖），角标让它至少看得见；padding-top 给角标留位不压首行 */
.md pre[data-lang] { padding-top: 22px; }
.md pre[data-lang]::before {
  content: attr(data-lang);
  position: absolute; top: 4px; right: 10px;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 10.5px; letter-spacing: .04em; color: var(--muted);
  background: var(--fill-soft);                /* 与 pre 同底色：首行超长横向滚动时不会与角标糊在一起 */
  pointer-events: none;               /* 角标不该挡住选代码 */
}
.md code {
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .9em;
  background: var(--fill-soft); color: var(--code-ink); padding: 1px 5px; border-radius: 5px;
}
.md mark { background: var(--mark-bg); color: inherit; padding: 0 2px; border-radius: 3px; }
.md del { color: var(--muted); }
.md hr { border: none; border-top: 1px solid var(--paper-edge); margin: 12px 0; }
.md a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.md table {
  border-collapse: collapse; margin: 8px 0;
  display: block; max-width: 100%; overflow-x: auto; /* 宽表横向滚动不撑破卡片 */
  font-size: .95em;
}
/* 单元格对齐由 markdown.js 写进内联 style（优先级高于这里的 text-align:left），这里只管观感 */
.md th, .md td {
  border: 1px solid var(--paper-edge); padding: 4px 10px;
  text-align: left; vertical-align: top;
  min-width: 2.5em;   /* 维持自动列宽，只给单元格一个下限：空表 / 短表头不至于挤成一列窄条 */
}
.md th { background: var(--fill-soft); font-weight: 600; }
.md tbody tr:nth-child(even) { background: var(--zebra-bg); }   /* 斑马纹：宽表横向读不串行 */
.md .md-task { margin-right: 6px; color: var(--muted); }
.md .md-task.done { color: var(--green); }

/* Markdown 内嵌媒体：仅调用方传入 mediaCtx 时生成（专题混排，见 markdown.js mdMediaNode） */
.md-media { margin: 10px 0; }
.md-media figcaption { margin-top: 4px; font-size: 12px; color: var(--muted); }
.md-img {
  display: block; max-width: 100%; border-radius: 10px;
  border: 1px solid var(--paper-edge); cursor: zoom-in;
}
.md-inline-img {
  height: 1.8em; width: auto; vertical-align: -0.45em;
  border-radius: 5px; border: 1px solid var(--paper-edge);
}
.md-av { display: block; width: 100%; margin: 4px 0; border-radius: 10px; }
video.md-av { max-height: 360px; background: #000; }
audio.md-av { height: 40px; }
.md-inline-av { vertical-align: middle; max-width: 240px; }
.md-file-card {
  display: inline-block; font-size: 12px; color: var(--ink-soft); cursor: pointer;
  border: 1px solid var(--paper-edge); border-radius: 999px;
  padding: 3px 10px; background: var(--paper);
}
.md-file-card:hover { border-color: var(--accent); color: var(--accent); }
.md-media-missing {
  display: inline-block; font-size: 12px; color: var(--muted);
  border: 1px dashed var(--paper-edge); border-radius: 8px; padding: 2px 8px;
}
.md .loading { opacity: .5; } /* 鉴权 objectURL 异步填充中的过渡态 */

/* 时间线卡片预览：3 行截断内照常展示块级结构 */
.entry-card .preview .md p { margin-bottom: 4px; }
.entry-card .preview .md pre,
.entry-card .preview .md blockquote,
.entry-card .preview .md table { margin: 4px 0; }

/* ---------- 编辑器格式工具栏与预览（Markdown） ---------- */

.editor-tools { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
/* 工具栏右侧的插入/预览按钮组：不跟着 .md-toolbar 内部换行，窄屏时整组掉到下一行 */
.editor-tools-side { display: inline-flex; gap: 6px; align-items: center; flex: none; }
.md-toolbar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.md-toolbar button {
  font: inherit; font-size: 13px; line-height: 1.3;
  padding: 3px 9px; cursor: pointer;
  border: 1px solid var(--paper-edge); border-radius: 7px;
  background: var(--paper); color: var(--ink-soft);
}
.md-toolbar button:hover { border-color: var(--accent); color: var(--accent); }
/* 块视图里高亮光标所在块的当前类型（app.js updateDocToolbarActive 给按钮加 .active）：
   用 accent-soft 底 + accent-strong 字，与全站 active（日历 / 日记列表）同一套语言，
   暗示「这个块现在就是这个类型，再点一次取消」。 */
.md-toolbar button.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-strong); }
.md-toolbar .md-colors { display: inline-flex; gap: 2px; }
.md-toolbar .md-colors button { font-weight: 700; padding: 3px 6px; }
.md-toolbar .md-sep { width: 1px; height: 18px; background: var(--paper-edge); flex: none; }
.md-preview {
  min-height: 240px; max-height: 420px; overflow-y: auto;
  min-width: 0;                       /* 分栏子项默认 min-width:auto，宽表会把分栏撑破 */
  border: 1px dashed var(--paper-edge); border-radius: 8px;
  padding: 12px 14px; font-family: var(--font-serif); font-size: 16px;
}

/* 块视图（日记编辑器的默认形态，结构见 doceditor.js）：单栏，不再与源码并排。
   底色与边框跟 textarea 取同一组值：两个视图切换时不能「跳一下」，否则用户会以为
   自己换到了另一个地方。旧 .md-preview 用虚线是为了说「这只是预览」，而块视图就是
   文档本身，因此用实线。 */
.doc-view {
  min-height: 240px; max-height: 62vh; overflow-y: auto;
  min-width: 0;
  background: var(--input-bg);
  border: 1px solid var(--paper-edge); border-radius: var(--radius-s);
  padding: 8px 12px; font-family: var(--font-serif); font-size: 16px;
}
/* 块容器插在 .md 与真正的块元素之间，`.md > :first-child` 那两条边距归零因此落不到
   p/h1 上，这里补一层同口径的（不补的话首块会多出一截上边距，末块多出下边距）。 */
.doc-block > :first-child { margin-top: 0; }
.doc-block > :last-child { margin-bottom: 0; }
/* 空文档占位：淡字，看上去像「可以写」而不是「坏了」。 */
.doc-empty { margin: 0; color: var(--muted); }
/* 空块占位（M4）：空的 <p></p> 不产生行盒 → 高度 0，既看不见也放不进光标（Chrome 里承载
   不了输入，段末按 Enter 新起的空段因此「像没反应」）。min-height 撑起行盒让光标有处可落。
   只撑高度、不再画 ::before 淡字提示（「写点什么…」）—— 用户反馈它像残留的水印、每块空段都
   挂一句很吵；空文档整篇的占位仍由 .doc-empty 负责。生成内容本就不进 textContent，去掉它
   对 docVisibleText 提取的可见文本毫无影响（模型仍认为它是空段）。 */
.doc-block > :only-child:empty { min-height: 1em; }
/* 块编辑态不画浏览器默认的 focus 轮廓：每个 .doc-block 都是 contenteditable，聚焦时浏览器
   会描一圈轮廓，在暖色主题（--accent #b5643a）下呈橘色，用户觉得扎眼。文字光标（caret）
   已经指明「正在编辑哪一块」，块级边框纯属冗余干扰 —— 对齐飞书 / Notion 的干净观感。
   只去轮廓、不动内容，故 docVisibleText 与模型完全不受影响。 */
.doc-block:focus,
.doc-block[contenteditable="true"]:focus { outline: none; }
/* 表格单元格就地编辑（Bug2）：表格是原子块（容器 contenteditable=false），但每个 th/td 由
   doceditor.js 单独开成 contenteditable，用户能点进格里写字。聚焦的格子用 accent-soft 淡底
   高亮（与全站 active 同一套语言）+ 去掉默认轮廓：既明确「当前在哪一格」（类似电子表格），
   又不画用户不喜欢的橘色硬边框。只改观感、不动 DOM 文本，故 commitCellText 读回的 textContent 不受影响。 */
.doc-cell { cursor: text; }
.doc-cell:focus { background: var(--accent-soft); outline: none; }

/* 浮动格式条（M5-c）：选中文字时贴着选区弹出。position:fixed 用视口坐标（选区
   getBoundingClientRect 也是视口坐标，直接对齐）；纸白底 + 较重阴影，与固定工具栏区分、
   暗示「这是临时浮层」。颜色按钮的内联 color 在纸白底上正好可读。hidden 时上方全局
   [hidden]{display:none!important} 会压住这里的 display:flex。 */
.doc-floatbar {
  position: fixed; z-index: 50;
  display: flex; gap: 4px; align-items: center;
  padding: 4px 6px;
  background: var(--paper);
  border: 1px solid var(--paper-edge); border-radius: 10px;
  box-shadow: 0 6px 24px -6px rgba(70, 55, 35, .4);
}
.doc-floatbar button {
  font: inherit; font-size: 13px; line-height: 1.3;
  padding: 3px 8px; cursor: pointer;
  border: 0; border-radius: 6px;
  background: transparent; color: var(--ink-soft);
}
.doc-floatbar button:hover { background: var(--accent-soft); color: var(--accent-strong); }
.doc-floatbar .md-sep { width: 1px; height: 16px; background: var(--paper-edge); flex: none; }

/* 表格工具条：光标点进单元格时弹出，复用 .doc-floatbar 的浮层外观（同一套 position:fixed +
   纸白底 + 阴影），只补两处差异：① 按钮文案是「上方插行」这类四字词，比行内格式条挤，故
   收窄内边距并禁止折行（折行了浮层会突然长高、位置跟着跳）；② 禁用态画成灰字不可点 ——
   表头行不可删行、仅剩一列不可删列，置灰比「点了没反应」诚实。 */
.doc-tablebar button { padding: 3px 6px; white-space: nowrap; }
.doc-tablebar button:disabled,
.doc-tablebar button:disabled:hover {
  background: transparent; color: var(--muted); opacity: .45; cursor: default;
}

/* 斜杠命令菜单（M5-d）：块首打 "/" 弹出的块类型选择器。position:fixed 贴光标；竖向列表，
   每项一行，active（方向键高亮）与 hover 用 accent-soft 底。z-index 高于浮动条。 */
.doc-slashmenu {
  position: fixed; z-index: 51;
  min-width: 168px; max-height: 264px; overflow-y: auto;
  padding: 4px;
  background: var(--paper);
  border: 1px solid var(--paper-edge); border-radius: 10px;
  box-shadow: 0 8px 28px -6px rgba(70, 55, 35, .4);
}
.doc-slashmenu .slash-item {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px; border-radius: 7px; cursor: pointer;
  font-size: 14px; color: var(--ink); white-space: nowrap;
}
.doc-slashmenu .slash-item.active { background: var(--accent-soft); color: var(--accent-strong); }
.doc-slashmenu .slash-item .slash-kind { color: var(--muted); font-size: 12px; margin-left: auto; }
.doc-slashmenu .slash-empty { padding: 8px 10px; color: var(--muted); font-size: 13px; }

/* 正文区：窄屏纵向堆叠（输入与预览切换显示）；宽屏且开启并排时左右分栏，左源码右渲染。
   两张编辑面（日记 #editor-body、专题 #topic-editor-body）共用这一套布局。 */
.editor-body { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
@media (min-width: 900px) {
  /* 680px 分两栏每栏只剩 330px，中文正文读不下去，因此并排时把弹窗放宽 */
  #editor.wide, #topic-dialog.wide { width: min(1080px, 94vw); }
  .editor-body.split { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: stretch; }
  /* 两边各自滚动：不限高度的话长预览会把弹窗顶出视口（dialog 的 UA max-height 会直接裁掉）。
     正文框带 id 级基础样式（#topic-text-input 有 min-height:180px），因此这里必须也写到 id
     才压得住 —— 换成 `.split textarea` 会被 id 选择器反压。
     日记面已不再并排（单栏块视图），故这里只剩专题那个框。 */
  .editor-body.split #topic-text-input { min-height: 340px; max-height: 62vh; }
  .editor-body.split .md-preview { min-height: 340px; max-height: 62vh; }
}

/* ---------- 专题视图（三级：专题 → 章节 → 条目，逻辑见 topic.js） ---------- */

.topic-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.topic-head h2 { margin: 0; font-size: 20px; }

.topic-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.topic-card {
  background: var(--paper); border: 1px solid var(--paper-edge); border-radius: var(--radius);
  padding: 16px 18px; box-shadow: var(--shadow); cursor: pointer;
  transition: transform .15s ease, border-color .15s ease;
}
.topic-card:hover { transform: translateY(-2px); border-color: var(--accent); }
.topic-card h3 { margin: 0 0 6px; font-size: 17px; }
.topic-desc {
  margin: 0 0 10px; color: var(--ink-soft); font-size: 13px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.topic-meta { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--muted); }

.topic-detail-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.topic-detail-head .topic-desc { flex: 1; margin: 0; }
.topic-actions { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }
.topic-actions button { padding: 3px 9px; font-size: 12.5px; }
.topic-actions button.active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-strong); font-weight: 600; }
/* 目录：章节 → 条目两级锚点，点击定位并闪烁 */
.topic-toc {
  background: var(--paper); border: 1px dashed var(--paper-edge); border-radius: var(--radius);
  padding: 12px 16px; margin-bottom: 12px;
}
.topic-toc-head { font-size: 12.5px; font-weight: 600; color: var(--ink-soft); }
.topic-toc ol { margin: 8px 0 0; padding-left: 18px; }
.topic-toc ol ol { margin: 2px 0 0; padding-left: 16px; }
.topic-toc li { margin: 2px 0; }
.topic-toc a {
  color: var(--ink-soft); text-decoration: none; cursor: pointer;
  font-size: 13.5px; line-height: 1.7;
}
.topic-toc a:hover { color: var(--accent-strong); text-decoration: underline; }
.topic-toc .toc-section > a { font-weight: 600; color: var(--ink); }
.topic-toc .toc-type { font-size: 11px; color: var(--muted); margin-right: 5px; }

.topic-section {
  background: var(--paper); border: 1px solid var(--paper-edge); border-radius: var(--radius);
  padding: 14px 16px; margin-bottom: 12px; box-shadow: var(--shadow);
  transition: border-color .25s, box-shadow .25s; /* 目录跳转高亮渐隐 */
}
.topic-section-head { display: flex; align-items: center; gap: 10px; }
.topic-section-head h3 { margin: 0; font-size: 16px; flex-shrink: 0; }
.topic-section-head .topic-actions { margin-left: auto; }
.topic-items { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.topic-items:empty { display: none; }

.topic-item {
  border: 1px solid var(--paper-edge); border-radius: 10px;
  padding: 10px 12px; background: var(--topic-item-bg); cursor: pointer;
  transition: border-color .25s, box-shadow .25s; /* 含目录跳转高亮渐隐 */
}
.topic-item:hover { border-color: var(--accent); }
.topic-section.toc-flash,
.topic-item.toc-flash { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
/* 三态展示：收起时 body 直接 hidden（全局 [hidden] 兜底）；摘要限高，仅真溢出时（mode-fade）加底部渐隐；全文不限 */
.topic-item-body { min-width: 0; }
.topic-item-body.mode-compact { max-height: 220px; overflow: hidden; position: relative; }
.topic-item-body.mode-compact.mode-fade::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 56px;
  background: linear-gradient(rgba(255, 254, 251, 0), var(--topic-item-bg));
  pointer-events: none; /* 不挡缩略图点击看大图 */
}
/* 收起/摘要/全文 段控件 */
.topic-item-modes {
  display: inline-flex; flex-shrink: 0;
  border: 1px solid var(--paper-edge); border-radius: 8px; overflow: hidden;
}
.topic-item-modes button {
  border: none; border-radius: 0; padding: 2px 9px; font-size: 12px; line-height: 1.6;
  background: transparent; color: var(--muted);
}
.topic-item-modes button + button { border-left: 1px solid var(--paper-edge); }
.topic-item-modes button:hover { background: var(--accent-soft); color: var(--accent-strong); border-color: var(--paper-edge); }
.topic-item-modes button.active { background: var(--accent-soft); color: var(--accent-strong); font-weight: 600; }
.topic-item-head { display: flex; align-items: center; gap: 8px; }
.topic-item-head .spacer { flex: 1; }
.topic-type-badge {
  font-size: 11px; padding: 1px 8px; border-radius: 999px; flex-shrink: 0;
  background: var(--accent-soft); color: var(--accent-strong);
}
.topic-item-text { font-family: var(--font-serif); font-size: 15px; margin-top: 6px; }
.topic-item .media-strip { margin-top: 8px; }
.topic-item .media-strip img { width: 76px; height: 76px; cursor: zoom-in; }

.topic-link-card {
  display: flex; flex-direction: column; gap: 2px; margin-top: 6px;
  padding: 10px 12px; border: 1px dashed var(--paper-edge); border-radius: 10px;
  text-decoration: none; color: inherit; background: var(--paper);
}
.topic-link-card:hover { border-color: var(--accent); }
.topic-link-title { font-weight: 600; color: var(--accent-strong); }
.topic-link-url {
  font-size: 12px; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.topic-file-chip {
  display: inline-block; font-size: 12px; color: var(--ink-soft);
  border: 1px solid var(--paper-edge); border-radius: 999px;
  padding: 3px 10px; background: var(--paper);
}

/* 混排条目：未被正文引用的附件以 chip 提示，避免附件隐形丢失 */
.topic-media-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.topic-media-chip {
  font-size: 12px; padding: 2px 9px; border-radius: 999px;
  border: 1px dashed var(--paper-edge); color: var(--muted); background: var(--paper);
}
.topic-media-chip.chip-unused { border-color: var(--gold); color: var(--gold-ink); }

#topic-dialog {
  border: none; border-radius: 18px; padding: 0;
  width: min(680px, 92vw);
  background: var(--paper);
  box-shadow: 0 30px 80px -20px rgba(50, 38, 22, .45);
}
#topic-dialog::backdrop { background: rgba(60, 48, 32, .4); backdrop-filter: blur(3px); }
#topic-dialog-form { display: flex; flex-direction: column; gap: 12px; padding: 22px 24px; }
#topic-title-input { border: none; background: transparent; font-size: 19px; font-weight: 600; padding: 2px; flex: 1; }
#topic-title-input:focus { box-shadow: none; border-bottom: 1px solid var(--paper-edge); border-radius: 0; }
#topic-text-input { font-family: var(--font-serif); font-size: 16px; min-height: 180px; }
/* 专题工具栏比日记多一组插入按钮，680px 下换行是常态，因此允许整行折行并顶对齐 */
#topic-editor-tools { flex-wrap: wrap; align-items: flex-start; }
/* 类型不再可选：旧类型仅以只读徽章展示 */
.topic-type-row { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-soft); }
/* 素材区：条目全部附件 + 已插入/未插入状态 + 插入/删除 */
.topic-material { display: flex; flex-direction: column; gap: 6px; }
.topic-material-item {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 8px; border: 1px solid var(--paper-edge); border-radius: 10px;
  background: var(--paper);
}
.topic-material-item img {
  width: 44px; height: 44px; object-fit: cover; flex-shrink: 0;
  border-radius: 8px; border: 1px solid var(--paper-edge); cursor: zoom-in;
}
.topic-material-item .material-name {
  font-size: 12px; color: var(--ink-soft); max-width: 200px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.topic-material-item .material-state { flex: 1; font-size: 12px; color: var(--muted); }
.topic-material-item.chip-used .material-state { color: var(--green); }
.topic-material-item.chip-unused { border-style: dashed; }
.topic-material-item.chip-unused .material-state { color: var(--gold-ink); }
.topic-material-item button { font-size: 12px; padding: 3px 9px; }
#topic-dialog footer { display: flex; gap: 8px; align-items: center; }

/* ---------- 提醒页（DESIGN.md 4.19） ----------
 * 尽量复用既有类：面板是 .panel、标题行是 .period-head、待办清单直接用
 * .period-task-list / .task-box（与统计页同一套交互，见 reminder.js renderTodoBlock）。
 * 下面只补确实没有对应物的部分。 */

.reminder-panel { display: flex; flex-direction: column; gap: 14px; }
.reminder-block { display: flex; flex-direction: column; gap: 6px; }
.reminder-block-title { font-size: 13px; font-weight: 600; color: var(--ink-soft); }

/* 推送正文预览：沉底 + 保留换行，让它一眼看起来就是「要发出去的那串字」而不是页面文案。
 * pre-wrap 而不是 pre：微信正文靠 \n 换行，但长行在窄屏还得能折回来 */
.reminder-push {
  margin: 0; padding: 10px 12px;
  background: var(--input-bg); border: 1px solid var(--paper-edge);
  border-radius: var(--radius-s);
  font-family: var(--font-ui); font-size: 13px; line-height: 1.7;
  color: var(--ink-soft); white-space: pre-wrap; overflow-wrap: anywhere;
}

.reminder-lines { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.reminder-lines li { display: flex; align-items: baseline; gap: 10px; font-size: 13.5px; }
.reminder-time {
  flex: none; min-width: 40px; font-size: 12px;
  color: var(--muted); font-variant-numeric: tabular-nums;
}
.reminder-text { flex: 1; min-width: 0; color: var(--ink); overflow-wrap: anywhere; }
.reminder-note { flex: 0 1 auto; max-width: 40%; font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }

.reminder-day {
  display: flex; flex-direction: column; gap: 6px;
  padding: 8px 0; border-top: 1px dashed var(--paper-edge);
}
.reminder-day:first-child { border-top: none; padding-top: 2px; }
.reminder-day-head { display: flex; align-items: baseline; gap: 8px; font-size: 13px; }

/* 事件列表：一行一个事件，右侧启用开关 + 编辑 + 删除 */
.reminder-list { display: flex; flex-direction: column; gap: 8px; }
.reminder-event {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; background: var(--paper);
  border: 1px solid var(--paper-edge); border-radius: var(--radius-m);
  transition: border-color .15s, box-shadow .15s;
}
.reminder-event:hover { border-color: var(--card-hover-edge); box-shadow: var(--shadow-1); }
/* 停用的事件不隐藏（否则用户找不到开关重新启用），改用沉底 + 划掉表示「不会推了」 */
.reminder-event.off { background: var(--fill-soft); }
.reminder-event.off .reminder-event-title b,
.reminder-event.off .reminder-event-sub { color: var(--muted); text-decoration: line-through; }
.reminder-event-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.reminder-event-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 7px; }
.reminder-event-title b { font-size: 15px; }
.reminder-event-sub { font-size: 12.5px; color: var(--muted); }
.reminder-event-note { margin: 0; overflow-wrap: anywhere; }
.reminder-event-side { flex: none; display: flex; align-items: center; gap: 8px; }
.reminder-event-side button { padding: 3px 9px; font-size: 12.5px; }
.reminder-kind { font-size: 11.5px; color: var(--accent-strong); }
.reminder-badge {
  font-size: 10.5px; padding: 1px 7px; border-radius: var(--radius-pill);
  background: var(--accent-soft); color: var(--accent-strong);
}

/* 撤销删除条：只在本次会话删过事件时出现 */
.reminder-undo {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 12px; font-size: 12.5px; color: var(--ink-soft);
  background: var(--notice-bg); border: 1px solid var(--danger-edge);
  border-radius: var(--radius-s);
}
.reminder-undo button { flex: none; padding: 2px 10px; font-size: 12.5px; }

/* 年视图：未来 12 个月各一块，一屏看全年。用 auto-fill + minmax 让它自己决定一行几块
 * （宽屏 4 块、窄屏 1 块）而不写死列数：这一页的可用宽度随侧栏开合与窗口大小变，
 * 写死列数就会在某个宽度上出现「一行三块半」 */
.reminder-year {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}
.reminder-month {
  display: flex; flex-direction: column; gap: 6px; min-width: 0;
  padding: 8px 10px; background: var(--paper);
  border: 1px solid var(--paper-edge); border-radius: var(--radius-m);
}
/* min-width:0 不是装饰：grid 子项默认 min-width:auto，一个长标题就能把整列撑宽
 * （而不是自己折行），十二块会因此排成一行横向滚动 */
.reminder-month-head { display: flex; align-items: baseline; gap: 6px; font-size: 13px; }
.reminder-month-head b { font-size: 14px; }
.reminder-month-count { margin-left: auto; color: var(--muted); font-size: 11.5px; }
.reminder-month-days {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 4px;
}
.reminder-month-day {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; font-size: 12.5px;
}
.reminder-month-when { flex: none; color: var(--muted); font-variant-numeric: tabular-nums; }
.reminder-month-day.today .reminder-month-when { color: var(--accent-strong); font-weight: 600; }
/* 事件本身是个按钮（点开就是编辑弹窗），所以把全局 button 的框与底色全部去掉：
 * 一块里塞三张带边框的卡就看不出月份了，这里要的是「日期 + 一串可点的标题」 */
.reminder-month-event {
  padding: 0; border: none; border-bottom: 1px dashed transparent; border-radius: 0;
  background: none; cursor: pointer; text-align: left;
  color: var(--ink); font-size: 12.5px; overflow-wrap: anywhere;
}
.reminder-month-event:hover { color: var(--accent); border-bottom-color: var(--accent); }
/* 停用的事件不隐（同列表视图的口径：隐了就找不到开关重新启用），改用沉底 + 划掉 */
.reminder-month-event.off { color: var(--muted); text-decoration: line-through; }
.reminder-month-empty { margin: 0; }

/* 回收站的行：整体降调（它已经不是「会推的事」了），右侧只剩一个恢复按钮 */
.reminder-event.trash { background: var(--fill-soft); }
.reminder-event.trash .reminder-event-title b { color: var(--muted); }

/* 推送记录：状态徽章 + 计划时刻 + 实际时刻，失败原因单独一行（它可能很长） */
.reminder-logs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.reminder-log { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 12.5px; }
.reminder-log-status { flex: none; font-size: 10.5px; padding: 1px 7px; border-radius: var(--radius-pill); }
.reminder-log-status.sent { background: var(--success-soft); color: var(--green); }
.reminder-log-status.failed { background: var(--danger-soft); color: var(--danger); }
.reminder-log-status.skipped { background: var(--fill-soft); color: var(--muted); }
.reminder-log-plan { flex: none; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.reminder-log-what { color: var(--muted); }
.reminder-log-detail { flex: 1 1 100%; color: var(--danger); overflow-wrap: anywhere; }
.reminder-error { color: var(--danger); }

/* ---------- 事件弹窗 ---------- */

#reminder-dialog {
  border: none; border-radius: 18px; padding: 0;
  width: min(560px, 92vw);
  background: var(--paper);
  box-shadow: 0 30px 80px -20px rgba(50, 38, 22, .45);
}
#reminder-dialog::backdrop { background: rgba(60, 48, 32, .4); backdrop-filter: blur(3px); }
/* 表单自己滚而不是让 dialog 被撑高：字段多，一旦被撑出视口，UA 的 max-height
 * 会直接裁掉底部的保存按钮（与 #editor 在窄屏遇到的是同一个坑） */
#reminder-dialog-form {
  display: flex; flex-direction: column; gap: 11px;
  padding: 22px 24px; max-height: 88vh; overflow-y: auto;
}
#reminder-dialog footer { display: flex; gap: 8px; align-items: center; }
.reminder-field { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.reminder-field > span { font-size: 12.5px; color: var(--muted); }
.reminder-row { display: flex; gap: 12px; align-items: flex-end; }
.reminder-inline-check { flex: none; padding-bottom: 9px; }
.reminder-hint { margin: -4px 0 0; line-height: 1.5; }
#reminder-dialog-error { margin: 0; color: var(--danger); }

/* 弹窗里的输入控件：全局只给 input[type=text]/search/textarea 上了样式，
 * number/date/time/select 得在这里补齐，否则它们是浏览器默认的灰白控件，
 * 与旁边的文本框并排时明显不是一套 */
#reminder-dialog input[type="text"],
#reminder-dialog input[type="number"],
#reminder-dialog input[type="date"],
#reminder-dialog input[type="time"],
#reminder-dialog textarea,
#reminder-dialog select {
  width: 100%; font: inherit; color: var(--ink);
  background: var(--input-bg); border: 1px solid var(--paper-edge);
  border-radius: var(--radius-s); padding: 7px 10px; outline: none;
  transition: border-color .15s, box-shadow .15s;
}
#reminder-dialog select { cursor: pointer; }
#reminder-dialog textarea { font-family: var(--font-ui); line-height: 1.6; }

/* ---------- 响应式 ---------- */

@media (max-width: 860px) {
  #app { grid-template-columns: 1fr; padding: 16px 14px 48px; }
  #sidebar { position: static; }
  .topic-section-head { flex-wrap: wrap; }
  .topic-detail-head { flex-direction: column; }
  .topic-item-head { flex-wrap: wrap; }
  /* 提醒页：事件行的右侧按钮组换到下一行（三个控件挤在窄屏会把标题压没），
     弹窗里的两列字段也改成单列；按钮触摸目标 ≥44px（§6.6 移动端规范） */
  .reminder-event { flex-direction: column; align-items: stretch; gap: 8px; }
  .reminder-event-side { justify-content: flex-end; }
  .reminder-event-side button { min-height: 44px; padding: 8px 14px; }
  .reminder-row { flex-wrap: wrap; }
  .reminder-field { flex: 1 1 140px; }
  /* 备注换到正文下一行。flex-wrap 是这条的前提：note 的基准宽是 100%，
     若 li 不换行，它会和 flex:1 1 0% 的正文抢同一行并把正文挤到 0 宽（一字一行） */
  .reminder-lines li { flex-wrap: wrap; }
  .reminder-note { flex: 1 1 100%; max-width: none; }
  /* 动作卡是聊天里唯一要点按钮的地方：触摸目标 ≥44px（§6.6 移动端规范） */
  .chat-action-foot button { min-height: 44px; padding: 8px 16px; }
}

/* ==========================================================================
 * M1 设计系统基座：暗色主题 / 字号 / 内容宽度 / A11y
 * 只覆写 :root 变量层，不逐组件写暗色规则 —— 组件全部走上方的语义变量。
 * data-theme / data-fontsize / data-width 挂在 <html>，由 app.js 设置面板写 localStorage。
 * ========================================================================== */

/* 内容区居中：默认宽松 1200，紧凑 900（设置弹层「内容宽度」） */
#app { max-width: 1200px; }
html[data-width="compact"] #app { max-width: 900px; }

/* 字号档位：只调 body 基准，其余尺寸多为 em/相对值随之缩放 */
html[data-fontsize="s"] body { font-size: 14px; }
html[data-fontsize="m"] body { font-size: 15px; }
html[data-fontsize="l"] body { font-size: 16.5px; }

/* ---------- 暗色主题：整体覆写语义变量（暖调深棕，延续纸感） ---------- */
[data-theme="dark"] {
  --bg: #1b1815;
  --bg-glow: #2a231b;
  --paper: #262119;
  --paper-edge: #3a3227;
  --card-line: rgba(255, 255, 255, .08);
  --card-hover-edge: #4d4133;
  --input-bg: #211d17;
  --fill-soft: #322b21;
  --fill-sunken: #2b251d;
  --zebra-bg: #2a241c;
  --topic-item-bg: #221e17;
  --quote-bg: #2c271f;
  --quote-bg-nested: #342e24;
  --mark-bg: #7a6420;
  --code-ink: #dccba6;
  --ink: #ece4d6;
  --ink-soft: #c6bba6;
  --muted: #a79c85;
  --accent: #d98a5c;
  --accent-strong: #e79f70;
  --accent-soft: #3d2e21;
  --on-accent: #1a1610;
  --gold: #e0b45f;
  --gold-ink: #dcb469;
  --green: #93b47a;
  --success-soft: #2b3a22;
  --danger: #e0796c;
  --mood-neg: #7fb0cc;
  --danger-strong: #c85a4e;
  --danger-edge: #5a3a34;
  --danger-soft: #3a2621;
  --notice-bg: #33241e;
  --heat-2: #5a3d28;
  --heat-3: #7d5030;
  --hero-sky1: #241f18;
  --hero-sky2: #2e2820;
  --hero-r1: #3a3227;
  --hero-r2: #453b2d;
  --hero-r3: #504433;
  --hero-sun: #6b543a;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .4), 0 6px 20px -8px rgba(0, 0, 0, .6);
  --shadow-2: 0 2px 4px rgba(0, 0, 0, .45), 0 14px 30px -10px rgba(0, 0, 0, .7);
  --shadow: var(--shadow-1);
  color-scheme: dark;
}
/* 暗色下 toast 反相（原本就是深底浅字，暗色里改成浅底深字避免「黑上加黑」看不见） */
[data-theme="dark"] #toast { background: #ece4d6; color: #26211a; }

/* ---------- A11y：键盘焦点环（全站统一，2px 主色外描边） ---------- */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-s);
}
/* 块编辑态不画焦点环：caret 已指明所在块，橘框反而干扰（沿用既有 .doc-block:focus 口径） */
.doc-block:focus-visible,
.doc-cell:focus-visible { outline: none; }

/* 纯图标按钮热区：桌面 ≥32×32，触摸设备 ≥44×44（WCAG 2.5.5） */
.icon-btn {
  display: inline-grid; place-items: center;
  min-width: 32px; min-height: 32px;
  padding: 0; line-height: 1;
}
@media (pointer: coarse) {
  .icon-btn { min-width: 44px; min-height: 44px; }
}

/* 尊重「减少动态效果」系统偏好：关掉位移/缩放/渐变动画，避免前庭不适 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
 * M1 信息架构组件样式
 * ========================================================================== */

/* ---------- 上下文筛选条 ---------- */
#context-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  min-height: 28px; font-size: 13px; color: var(--muted);
}
#context-bar .ctx-summary { font-weight: 600; color: var(--ink); font-size: 14px; }
#context-bar .ctx-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ctx-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 6px 2px 10px; border-radius: var(--radius-pill);
  background: var(--fill-soft); color: var(--ink-soft); font-size: 12px;
  border: 1px solid var(--card-line);
}
.ctx-chip button {
  border: none; background: transparent; padding: 0 2px; cursor: pointer;
  color: var(--muted); font-size: 13px; line-height: 1; border-radius: var(--radius-pill);
}
.ctx-chip button:hover { color: var(--danger); }
.ctx-clear {
  border: none; background: transparent; cursor: pointer; padding: 2px 6px;
  color: var(--accent); font-size: 12px; text-decoration: underline;
}

/* ---------- 分段控件（视图切换 / 设置弹层选项共用） ---------- */
.seg {
  display: inline-flex; padding: 2px; gap: 2px;
  background: var(--fill-soft); border: 1px solid var(--card-line);
  border-radius: var(--radius-pill);
}
.seg button {
  border: none; background: transparent; cursor: pointer;
  padding: 4px 12px; border-radius: var(--radius-pill);
  font-size: 13px; color: var(--ink-soft); line-height: 1.4;
  transition: background .12s, color .12s;
}
.seg button:hover { color: var(--accent-strong); }
.seg button.active {
  background: var(--paper); color: var(--accent-strong);
  font-weight: 600; box-shadow: var(--shadow-1);
}
/* 日记页二级 sticky 列表头：贴在顶栏命令栏（sticky top:0，实测高约 58px）下方，
 * 滚过长列表时视图切换不离开视口（合同 §1.2，裁决②） */
#page-diary #view-switch {
  position: sticky; top: 58px; z-index: 30;
  align-self: flex-start;
  background: var(--fill-soft);
}

/* ---------- 侧栏功能导航菜单（点哪项切主区域哪页，路由见 app.js setSideView） ---------- */
#sidebar { gap: 20px; }
#side-menu { display: flex; flex-direction: column; gap: 6px; }
#side-menu button {
  display: flex; align-items: center; gap: 12px; width: 100%;
  border: none; background: transparent; cursor: pointer;
  padding: 10px 14px; border-radius: var(--radius-m);
  font-size: 14.5px; color: var(--ink-soft); text-align: left;
}
#side-menu button:hover { background: var(--fill-soft); color: var(--ink); }
#side-menu button.active { background: var(--accent-soft); color: var(--accent-strong); font-weight: 600; }
.side-ico { font-size: 17px; line-height: 1; }
.side-label { flex: 1; }

/* sprite 图标（index.html <symbol>，currentcolor 描边）：三档尺寸 */
.si { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; display: block; }
.si.s14 { width: 14px; height: 14px; }
.si.s16 { width: 16px; height: 16px; }
.si.s20 { width: 20px; height: 20px; }

/* 侧栏分组微标签与底诗（Quiet AI 规范：品牌句子只在侧栏底出现一次） */
.nav-grp {
  font-size: 11px; color: var(--muted); letter-spacing: .12em;
  padding: 8px 14px 2px; user-select: none;
}
.side-poem {
  font-family: var(--font-serif); font-size: 12.5px; line-height: 1.9;
  color: var(--muted); padding: 0 8px; display: flex; align-items: flex-end; gap: 6px;
}
.side-poem .si { color: var(--accent); opacity: .7; margin-bottom: 2px; }

/* 侧栏底部用户行（目标稿 v1.6）：整行按钮进设置页，登出收在设置页账户卡 */
.side-foot { border-top: 1px solid var(--paper-edge); padding-top: 10px; }
.side-user-btn {
  display: flex; align-items: center; gap: 10px; width: 100%; min-width: 0;
  padding: 8px 10px; border: none; border-radius: var(--radius-m);
  background: transparent; cursor: pointer; text-align: left;
}
.side-user-btn:hover { background: var(--fill-soft); }
.side-avatar {
  width: 28px; height: 28px; flex: none; border-radius: 50%;
  display: grid; place-items: center; font-size: 13px;
  background: var(--accent); color: var(--on-accent);
}
.side-username {
  flex: 1; min-width: 0;
  font-size: 13px; font-weight: 600; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.side-chev { flex: none; color: var(--muted); }

/* 侧栏收起：整栏隐藏、主区域占满全宽；顶栏 ☰ 只在收起态出现（app.js setSideHidden） */
#btn-side-collapse {
  margin-left: auto; align-self: center;
  border: none; background: transparent;
  color: var(--muted); font-size: 18px;
}
#btn-side-collapse:hover { color: var(--ink); }
#btn-side-open {
  display: none; flex: none;
  border: 1px solid var(--paper-edge); border-radius: var(--radius-m);
  background: var(--paper); color: var(--ink-soft); font-size: 16px;
}
#btn-side-open:hover { color: var(--ink); border-color: var(--accent); }
/* 收起态 = icon rail：侧栏缩成窄轨只留图标（不整栏消失，切换不突兀）。
 * 标题/文字标签/用户名/登出隐藏，菜单图标居中且保留 active 高亮，hover 靠 title 提示；
 * brand logo 与顶栏 ☰ 都可展开（接线见 app.js setSideHidden）。 */
#app[data-side="collapsed"] { grid-template-columns: 72px minmax(0, 1fr); gap: 16px; }
#app[data-side="collapsed"] #sidebar { gap: 14px; }
#app[data-side="collapsed"] .brand { justify-content: center; padding: 2px 0; margin-top: 3.2em; }  /* logo 下移跳过顶栏搜索行，与主区「全部」标题齐平 */
#app[data-side="collapsed"] .brand > div,
#app[data-side="collapsed"] #btn-side-collapse { display: none; }
#app[data-side="collapsed"] .brand-mark { cursor: pointer; }
#app[data-side="collapsed"] #side-menu button { justify-content: center; gap: 0; padding: 10px 0; }
#app[data-side="collapsed"] #side-menu .side-label { display: none; }
#app[data-side="collapsed"] .nav-grp,
#app[data-side="collapsed"] .side-poem { display: none; }
#app[data-side="collapsed"] .side-foot { justify-content: center; padding: 0; }
#app[data-side="collapsed"] .side-user-btn { width: auto; padding: 8px; }
#app[data-side="collapsed"] .side-username,
#app[data-side="collapsed"] .side-chev { display: none; }
#app[data-side="collapsed"] #btn-side-open { display: inline-grid; }

/* 窄屏不收 icon rail（横向空间宝贵）：collapsed 仍整栏隐藏、主区单列。 */
@media (max-width: 860px) {
  #app[data-side="collapsed"] { grid-template-columns: 1fr; gap: 28px; }
  #app[data-side="collapsed"] #sidebar { display: none; }
}

/* ---------- 主区域页面容器：同一时刻仅一个 .main-page.active ---------- */
.main-page { display: none; }
.main-page.active { display: flex; flex-direction: column; gap: 18px; }
.page-sub { margin: 0 0 12px; font-size: 15px; font-weight: 600; color: var(--ink); }

/* 日历视图 / 统计概览：从原侧栏小面板放大为主区域页 */
.cal-lg { padding: 18px 20px; }
.cal-lg .cal-grid { gap: 6px; }
.cal-lg .cal-week { font-size: 13px; }
.stats-lg { padding: 20px 22px; gap: 18px; }
.stats-lg .stat-inline b { font-size: 22px; }
.stats-lg .heat-cell { width: 14px; height: 14px; }
.settings-page { padding: 18px 20px; }
.settings-page .settings-row { padding: 6px 0; }

/* ---------- 日历：今天按钮 / 年月选择器 ---------- */
.cal-head .cal-today { font-size: 12.5px; padding: 2px 10px; }
#cal-title {
  cursor: pointer; background: transparent; border: none; padding: 2px 6px;
  font-weight: 600; font-size: 14px; color: var(--ink); border-radius: var(--radius-s);
}
#cal-title:hover { color: var(--accent-strong); background: var(--fill-soft); }
.cal-ym {
  margin-top: 8px; padding: 10px;
  background: var(--paper); border: 1px solid var(--paper-edge);
  border-radius: var(--radius-m); box-shadow: var(--shadow-2);
}
.cal-ym-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.cal-ym-head b { font-size: 14px; font-variant-numeric: tabular-nums; }
.cal-ym-head button { padding: 2px 10px; font-size: 15px; line-height: 1.3; }
.cal-ym-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.cal-ym-grid button {
  padding: 6px 0; font-size: 13px; border-radius: var(--radius-s);
  border: 1px solid transparent; background: var(--fill-soft); color: var(--ink-soft);
}
.cal-ym-grid button:hover { border-color: var(--accent); color: var(--accent-strong); }
.cal-ym-grid button.active { background: var(--accent); color: var(--on-accent); font-weight: 600; }

/* ---------- 统计：三指标行 + 年度热力格 ---------- */
.stats-panel { display: flex; flex-direction: column; gap: 12px; padding: 14px 16px; }
.stat-line { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; }
.stat-inline { font-size: 12.5px; color: var(--muted); }
.stat-inline b { font-size: 16px; color: var(--accent-strong); font-variant-numeric: tabular-nums; }
.heat-wrap { display: flex; flex-direction: column; gap: 6px; }
.heat-scroll { overflow-x: auto; padding-bottom: 2px; }
.heat-grid {
  display: grid; grid-auto-flow: column; grid-template-rows: repeat(7, 1fr);
  gap: 2px; width: max-content;
}
.heat-cell {
  width: 10px; height: 10px; border-radius: 2px;
  background: var(--fill-soft); border: 1px solid var(--card-line);
}
.heat-cell[data-lvl="1"] { background: var(--accent-soft); }
.heat-cell[data-lvl="2"] { background: var(--heat-2); }
.heat-cell[data-lvl="3"] { background: var(--heat-3); }
.heat-cell[data-lvl="4"] { background: var(--accent); }
.heat-legend { display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--muted); }
.heat-legend .heat-cell { cursor: default; }

/* ---------- 周期总结（统计页：本周/本月未完成 + 事件趋势 + 可选 AI 复盘） ----------
 * 复用 .panel/.seg/.icon-btn/.spacer/.page-sub/.hint/button.ghost；下面只补周期专有类。
 * 全部走语义色变量，暗色主题由文件末 [data-theme="dark"] 自动覆写。 */
.period-panel { display: flex; flex-direction: column; gap: 14px; padding: 16px 18px; }
.period-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.period-head .page-sub { margin: 0; }
.period-range { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.period-body { display: flex; flex-direction: column; gap: 16px; }
.period-line { margin: 0; font-size: 12.5px; color: var(--ink-soft); }
.period-block { display: flex; flex-direction: column; gap: 8px; }
.period-h { margin: 0; font-size: 13px; font-weight: 600; color: var(--ink); display: flex; align-items: baseline; gap: 6px; }

/* 产出柱已并入「趋势双层图」.trend-plot/.trend-bars（见下），旧 .period-bars 移除。 */

/* 未完成 / 本期完成清单：方框勾选态 + 往期遗留徽章 + 跳源日记 */
.period-task-head { display: flex; align-items: baseline; gap: 8px; }
.period-task-head .period-h { flex: 1; }
.task-expand { flex: none; font-size: 11.5px; padding: 2px 10px; }
/* 固定高度框：默认收起约 6 行超出滚动，展开按钮切 .expanded 全高；展开态存 state 跨重渲染保留 */
.period-task-scroll { max-height: 208px; overflow-y: auto; padding-right: 4px; }
.period-task-scroll.expanded { max-height: none; overflow-y: visible; }
.period-task-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.period-task-list li { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.task-box { flex: none; width: 15px; height: 15px; border-radius: 4px; border: 1.5px solid var(--card-hover-edge); background: var(--paper); display: inline-grid; place-items: center; font-size: 11px; line-height: 1; color: var(--on-accent); }
/* 复选框可点击切换（回写源日记正文）：button 重置 + hover 反馈 */
button.task-box { cursor: pointer; padding: 0; }
button.task-box:hover { border-color: var(--accent-strong); box-shadow: 0 0 0 2px var(--accent-soft); }
.task-box.done { background: var(--green); border-color: var(--green); }
.task-text { flex: 1; min-width: 0; color: var(--ink-soft); overflow-wrap: anywhere; }
.task-box.done + .task-text { color: var(--muted); text-decoration: line-through; }
.task-badge { flex: none; font-size: 10.5px; padding: 1px 7px; border-radius: var(--radius-pill); background: var(--accent-soft); color: var(--accent-strong); }
.task-go { flex: none; border: none; background: transparent; cursor: pointer; font-size: 11.5px; color: var(--muted); padding: 2px 4px; border-radius: var(--radius-s); }
.task-go:hover { color: var(--accent-strong); text-decoration: underline; }

/* AI 复盘（叙事层）：点按钮才拉；未配置/预算耗尽/无数据时降级为提示，不当错误弹 */
.period-narrative { border-top: 1px dashed var(--card-line); padding-top: 14px; }
.period-narr-block { display: flex; flex-direction: column; gap: 4px; }
.period-narr-lab { font-size: 11.5px; font-weight: 600; color: var(--muted); letter-spacing: .02em; }
.period-narr-block ul { margin: 0; padding-left: 18px; font-size: 13px; color: var(--ink-soft); }
.period-narr-block li { margin: 2px 0; }
.period-event { background: var(--fill-soft); border: 1px solid var(--card-line); border-radius: var(--radius-s); padding: 8px 10px; margin-top: 4px; }
.period-event b { font-size: 13px; color: var(--ink); }
.period-event-trend { margin: 3px 0 0; font-size: 12.5px; color: var(--ink-soft); }
.period-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.period-tags .chip { font-size: 10.5px; padding: 1px 8px; border-radius: var(--radius-pill); background: var(--paper); border: 1px solid var(--card-line); color: var(--muted); }
.period-cached { font-size: 11px; font-weight: 400; color: var(--muted); }
.period-gen { align-self: flex-start; margin-top: 4px; }
.period-error { color: var(--danger); }

/* ---------- 周期复盘 v2（scorecard 数字条 / 洞察条 / 趋势双层图 / 明细 tabs / 主线 / 维度） ----------
 * 复用 .period-block/.period-h/.hint；语义色全走变量，暗色自动覆写。 */
.period-details { border-top: 1px dashed var(--card-line); padding-top: 12px; }
.period-details > summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--ink); list-style: none; user-select: none; padding: 2px 0; }
.period-details > summary::-webkit-details-marker { display: none; }
.period-details > summary::before { content: "▸ "; color: var(--muted); }
.period-details[open] > summary::before { content: "▾ "; }
.period-details > summary:hover { color: var(--accent-strong); }

/* 数字条：桌面 5 列等宽，移动端横滑 */
.period-scorecard { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.sc-card { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; background: var(--fill-soft); border: 1px solid var(--card-line); border-radius: var(--radius-m); }
.sc-num { display: flex; align-items: baseline; gap: 2px; font-size: 22px; font-weight: 700; color: var(--ink); line-height: 1.1; font-variant-numeric: tabular-nums; }
.sc-unit { font-size: 12px; font-weight: 500; color: var(--muted); }
.sc-lab { font-size: 12px; font-weight: 600; color: var(--ink-soft); }
.sc-delta { font-size: 11.5px; font-variant-numeric: tabular-nums; }
.sc-delta.good { color: var(--green); }
.sc-delta.bad { color: var(--danger); }
.sc-delta.flat { color: var(--muted); }
.sc-sub { font-size: 10.5px; color: var(--muted); overflow-wrap: anywhere; }

/* 洞察条：≤3 卡，可点为按钮（下钻 tag），不可点为灰显 div */
.period-insights { display: flex; flex-wrap: wrap; gap: 8px; }
.insight-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 6px 12px; font: inherit; font-size: 12.5px; text-align: left; color: var(--ink-soft); background: var(--accent-soft); border: 1px solid transparent; border-radius: var(--radius-pill); cursor: pointer; }
.insight-chip:hover { border-color: var(--accent); color: var(--accent-strong); }
.insight-chip.flat { background: var(--fill-soft); color: var(--muted); cursor: default; border-color: var(--card-line); }
.insight-ico { flex: none; }
.insight-txt { min-width: 0; overflow-wrap: anywhere; }

/* 趋势双层图（§6.4）：产出柱（底，柱高=桶内字数）+ 情绪折线 0-10（叠加铺满），节点与柱同列对齐。
 * 情绪层 SVG 用 preserveAspectRatio=none 铺满（修复旧 letterbox 缩窄），线宽靠 vector-effect 均匀；
 * 圆点/分值标签/柱顶字数标签为 HTML 绝对定位，避免非等比缩放变形。 */
.trend-plot { position: relative; height: 168px; border-bottom: 1px solid var(--card-line); }
.trend-bars { position: absolute; inset: 0; display: flex; align-items: flex-end; gap: 4px; }
.tb-col { flex: 1; min-width: 0; height: 100%; display: flex; align-items: flex-end; justify-content: center; }
.tb-bar { width: 100%; max-width: 26px; min-height: 2px; box-sizing: border-box; background: var(--fill-sunken); border-radius: 3px 3px 0 0; opacity: .5; transition: height .2s ease; }
.tb-bar.on { background: linear-gradient(180deg, var(--accent), var(--accent-strong)); opacity: .55; }
.trend-mood { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.tm-ref { stroke: var(--card-line); stroke-width: 1; stroke-dasharray: 3 4; opacity: .7; }
.tm-line { fill: none; stroke: var(--accent-strong); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.trend-overlay { position: absolute; inset: 0; pointer-events: none; }
.tm-dot { position: absolute; width: 9px; height: 9px; box-sizing: border-box; border-radius: 50%; border: 2px solid var(--paper); transform: translate(-50%, -50%); pointer-events: auto; }
.tm-dot.low { background: var(--mood-neg, var(--danger)); }
.tm-dot.calm { background: var(--muted); }
.tm-dot.pos { background: var(--accent); }
.tm-dot.high { background: var(--green, var(--accent-strong)); }
.tm-lab { position: absolute; transform: translate(-50%, -150%); font-size: 11px; font-weight: 600; color: var(--ink-soft); font-variant-numeric: tabular-nums; white-space: nowrap; pointer-events: none; }
/* 柱顶字数标签：bottom 由 JS 设为 calc(柱高% + 4px)，贴柱顶上方给出具体字数 */
.tb-val { position: absolute; transform: translateX(-50%); font-size: 10px; font-weight: 600; color: var(--ink-soft); font-variant-numeric: tabular-nums; white-space: nowrap; pointer-events: none; }
.trend-xlab { display: flex; gap: 4px; margin-top: 4px; }
.trend-xlab span { flex: 1; min-width: 0; text-align: center; font-size: 10px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 明细 tabs */
.tab-bar { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.tab-btn { font: inherit; font-size: 12.5px; padding: 4px 12px; color: var(--muted); background: var(--fill-soft); border: 1px solid var(--card-line); border-radius: var(--radius-pill); cursor: pointer; }
.tab-btn:hover { color: var(--accent-strong); border-color: var(--accent); }
.tab-btn.active { color: var(--on-accent); background: var(--accent); border-color: var(--accent); font-weight: 600; }
.tab-pane { display: flex; flex-direction: column; gap: 12px; }

/* 主线列表：状态徽章 + 名 + 元信息 + 环比；dormant 灰显 */
.thread-list { display: flex; flex-direction: column; gap: 6px; }
.thread-row { display: flex; align-items: center; gap: 8px; width: 100%; font: inherit; font-size: 13px; text-align: left; padding: 6px 10px; background: var(--paper); border: 1px solid var(--card-line); border-radius: var(--radius-s); cursor: pointer; }
.thread-row:hover { border-color: var(--accent); background: var(--fill-soft); }
.thread-row.dormant { opacity: .62; }
.thread-badge { flex: none; font-size: 10.5px; font-weight: 600; padding: 1px 8px; border-radius: var(--radius-pill); }
.thread-badge.ongoing { background: var(--success-soft); color: var(--green); }
.thread-badge.new { background: var(--accent-soft); color: var(--accent-strong); }
.thread-badge.dormant { background: var(--fill-sunken); color: var(--muted); }
.thread-name { flex: none; max-width: 40%; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thread-meta { flex: 1; min-width: 0; font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thread-delta { flex: none; font-size: 11.5px; font-variant-numeric: tabular-nums; }

/* 语义主线结构图（v3）：两层树（左引导线成树）+ 跨周关联徽章 + 条目 chip + 散点 details */
.threadmap { display: flex; flex-direction: column; gap: 10px; }
.threadmap-node { padding: 8px 10px; background: var(--paper); border: 1px solid var(--card-line); border-radius: var(--radius-s); }
.threadmap-node.dormant { opacity: .62; }
.tmn-head { display: flex; align-items: center; gap: 8px; }
.tmn-name { flex: none; max-width: 46%; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tmn-meta { flex: 1; min-width: 0; font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tmn-summary { margin: 4px 0 0; font-size: 12px; color: var(--muted); }
/* merged 用金色系（--mark-bg/--gold-ink）：与 new 的 accent 陶土色拉开，四态徽章互异
   （ongoing 绿 / new 陶土 / merged 金 / dormant 灰）；mergeNote 行同色，绑定「合并」视觉语言 */
.tmn-merge { margin: 4px 0 0; font-size: 11.5px; color: var(--gold-ink); }
.thread-badge.merged { background: var(--mark-bg); color: var(--gold-ink); }
.tmn-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.tmn-chip { font-size: 10.5px; padding: 1px 8px; border-radius: var(--radius-pill); background: var(--fill-soft); border: 1px solid var(--card-line); color: var(--muted); cursor: pointer; }
.tmn-chip:hover { border-color: var(--accent); color: var(--accent-strong); }
.tmn-kids { margin: 6px 0 0 10px; padding-left: 12px; border-left: 2px solid var(--card-line); display: flex; flex-direction: column; gap: 6px; }
.tmn-kid { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tmn-kid-name { font-size: 12px; font-weight: 600; color: var(--ink); }
.tmn-kid-summary { font-size: 11.5px; color: var(--muted); }
.threadmap-unlinked summary { cursor: pointer; font-size: 12px; color: var(--muted); }
.thread-delta.good { color: var(--green); }
.thread-delta.bad { color: var(--danger); }
.thread-delta.flat { color: var(--muted); }

/* 维度水平条 */
.dim-list { display: flex; flex-direction: column; gap: 6px; }
.dim-row { display: grid; grid-template-columns: minmax(60px, 5fr) minmax(80px, 6fr) auto auto; align-items: center; gap: 8px; padding: 4px 8px; border-radius: var(--radius-s); cursor: pointer; font-size: 12.5px; }
.dim-row:hover { background: var(--fill-soft); }
.dim-tag { font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dim-track { height: 8px; background: var(--fill-sunken); border-radius: var(--radius-pill); overflow: hidden; }
.dim-fill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-strong)); border-radius: var(--radius-pill); }
.dim-num { color: var(--ink-soft); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dim-extra { color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* 移动端（§5.4）：数字条横滑、维度行收紧 */
@media (max-width: 640px) {
  .period-scorecard { display: flex; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
  .sc-card { flex: 0 0 auto; min-width: 116px; }
  .dim-row { grid-template-columns: minmax(48px, 4fr) minmax(60px, 5fr) auto; }
  .dim-extra { display: none; }
}

/* ---------- 标签组 / 标签 chip ---------- */
.tag-list { display: flex; flex-wrap: wrap; gap: 6px; }
.tag-pill {
  display: inline-flex; align-items: baseline; gap: 4px; cursor: pointer;
  padding: 2px 10px; border-radius: var(--radius-pill);
  background: var(--fill-soft); color: var(--ink-soft); font-size: 12.5px;
  border: 1px solid var(--card-line);
}
.tag-pill:hover { border-color: var(--accent); color: var(--accent-strong); }
.tag-pill.active { background: var(--accent-soft); color: var(--accent-strong); border-color: var(--accent); font-weight: 600; }
.tag-pill b { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.tag-pill.active b { color: var(--accent-strong); }
.tag-more { border: none; background: transparent; color: var(--accent); font-size: 12px; cursor: pointer; text-decoration: underline; padding: 2px 4px; }
.tag-empty { font-size: 12.5px; color: var(--muted); padding: 2px 4px; }

/* ---------- 搜索：⌘K 徽标 / 漏斗 / 下拉 / 筛选弹层 ---------- */
.search-area { flex: 1; position: relative; display: flex; align-items: center; gap: 6px; min-width: 0; }
.search-wrap .search-kbd {
  position: absolute; right: 12px; pointer-events: none;
  font-size: 11px; color: var(--muted); border: 1px solid var(--paper-edge);
  border-radius: 5px; padding: 1px 6px; background: var(--fill-soft);
  font-family: var(--font-ui);
}
.search-wrap:focus-within .search-kbd { opacity: 0; }
/* 命令栏双模胶囊（搜索/提问）：嵌在搜索框右端；有它在时 ⌘K 徽标让位、输入右留白 */
.cmd-mode { flex: none; margin-right: 8px; }
.cmd-mode button { padding: 3px 10px; font-size: 12px; }
.search-wrap:has(.cmd-mode) .search-kbd { right: 128px; }
.search-wrap:has(.cmd-mode) input { padding-right: 122px; }
.settings-wrap { position: relative; flex: none; }
#btn-settings { font-size: 18px; color: var(--ink-soft); border: 1px solid var(--paper-edge); background: var(--paper); border-radius: var(--radius-pill); width: 36px; height: 36px; }
#btn-settings:hover { color: var(--accent-strong); border-color: var(--accent); }
.pop {
  position: absolute; z-index: 40; top: calc(100% + 6px); left: 0; right: 0;
  background: var(--paper); border: 1px solid var(--paper-edge);
  border-radius: var(--radius-m); box-shadow: var(--shadow-2);
  padding: 10px 12px; max-height: 60vh; overflow-y: auto;
}
.pop h4 { margin: 6px 0 6px; font-size: 11px; letter-spacing: 1px; color: var(--muted); font-weight: 600; }
.pop h4:first-child { margin-top: 0; }
.pop-item {
  display: block; width: 100%; text-align: left; cursor: pointer;
  border: none; background: transparent; padding: 6px 8px; border-radius: var(--radius-s);
  font-size: 13px; color: var(--ink-soft);
}
.pop-item:hover { background: var(--fill-soft); color: var(--ink); }
.settings-pop { left: auto; right: 0; width: min(300px, 90vw); }
.settings-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.settings-row > span { font-size: 13px; color: var(--ink-soft); }

/* ---------- 视图容器：时间轴 / 月历格 ---------- */
.month-view { display: flex; flex-direction: column; gap: 10px; }
.month-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.month-cell {
  min-height: 92px; padding: 6px; cursor: pointer;
  background: var(--paper); border: 1px solid var(--paper-edge);
  border-radius: var(--radius-s); display: flex; flex-direction: column; gap: 4px;
  transition: border-color .12s, box-shadow .12s;
  position: relative; overflow: hidden;      /* 首图背景层的定位上下文 + 圆角裁切 */
}
.month-cell:hover { border-color: var(--accent); box-shadow: var(--shadow-1); }
.month-cell.blank { background: transparent; border-style: dashed; cursor: default; pointer-events: none; }
.month-cell.today { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.month-cell.selected { background: var(--accent-soft); border-color: var(--accent); }
.month-day { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.month-cell.has .month-day { color: var(--accent-strong); font-weight: 600; }
.month-count { font-size: 11px; color: var(--muted); }
.month-titles { display: flex; flex-direction: column; gap: 2px; overflow: hidden; }
.month-title-chip {
  font-size: 11px; color: var(--ink-soft); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}

/* 月历格·当日首图背景（app.js renderMonthView 注 .month-photo 层，无图的日不加、保持素格）：
 * 图铺满格 + 渐变 scrim 压暗，文字改白色压在 scrim 上（否则浅色图上的灰字根本读不出）。
 * 背景层是 absolute，会把 inset 阴影盖掉，所以 today/selected 在照片格上改用 outline 画框。 */
.month-photo { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.month-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.month-photo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(30, 22, 16, .34) 0%, rgba(30, 22, 16, .6) 55%, rgba(30, 22, 16, .78) 100%);
}
.month-cell.photo > *:not(.month-photo) { position: relative; z-index: 1; }
.month-cell.photo .month-day,
.month-cell.photo.has .month-day,
.month-cell.photo .month-count,
.month-cell.photo .month-title-chip { color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .55); }
.month-cell.photo .month-title-chip { opacity: .94; }
.month-cell.photo.today { box-shadow: none; outline: 1px solid var(--accent); outline-offset: -1px; }
.month-cell.photo.selected { background: transparent; outline: 2px solid var(--accent); outline-offset: -2px; }

/* 月历格·悬停浮卡：全局单例 fixed，位置由 app.js placeMonthPop 写回（格上方居中、贴边翻转/钳位）。
 * pointer-events:none —— 浮卡不吃鼠标：鼠标移到卡上不算「离开格子」，否则一移就闪没。
 * hidden 由开头那条全局 [hidden]{display:none!important} 压住下面的 display:flex。 */
#month-pop {
  position: fixed; z-index: 60; width: 268px; max-width: 84vw;
  display: flex; flex-direction: column; gap: 6px;
  padding: 10px 12px; pointer-events: none;
  background: var(--paper); border: 1px solid var(--paper-edge);
  border-radius: var(--radius-m); box-shadow: var(--shadow-2);
}
#month-pop .mp-head { font-size: 12px; font-weight: 600; color: var(--ink); }
#month-pop .mp-row { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
#month-pop .mp-row b {
  font-size: 12.5px; font-weight: 600; color: var(--ink-soft);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#month-pop .mp-row span { font-size: 11.5px; color: var(--muted); line-height: 1.5; }
#month-pop .mp-thumbs { display: flex; gap: 4px; }
#month-pop .mp-thumbs img {
  width: 52px; height: 52px; object-fit: cover;
  border-radius: var(--radius-s); background: var(--fill-soft);
}
#month-pop .mp-more { font-size: 11px; color: var(--muted); }

/* ---------- 骨架屏 ---------- */
.skel-card {
  background: var(--paper); border: 1px solid var(--paper-edge);
  border-radius: var(--radius); box-shadow: var(--shadow-1);
  padding: 16px 18px; display: flex; flex-direction: column; gap: 10px;
}
.skel-line {
  height: 12px; border-radius: var(--radius-s);
  background: linear-gradient(90deg, var(--fill-soft) 25%, var(--fill-sunken) 37%, var(--fill-soft) 63%);
  background-size: 400% 100%; animation: shimmer 1.4s ease infinite;
}
.skel-line.w60 { width: 60%; } .skel-line.w80 { width: 80%; } .skel-line.w40 { width: 40%; }
@keyframes shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
#timeline.loading { opacity: .45; transition: opacity .15s; }

/* ---------- 空状态 ---------- */
.empty-state {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  text-align: center; padding: 56px 20px; color: var(--muted);
}
.empty-state svg { width: 96px; height: 96px; opacity: .8; }
.empty-state .empty-title { font-size: 15px; color: var(--ink-soft); font-weight: 600; }
.empty-state .empty-desc { font-size: 13px; max-width: 320px; }
.empty-state button { margin-top: 4px; }

/* ---------- 回到顶部 ---------- */
#back-top {
  position: fixed; right: 24px; bottom: 92px; z-index: 58;
  width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
  background: var(--paper); border: 1px solid var(--paper-edge);
  box-shadow: var(--shadow-2); color: var(--ink-soft); font-size: 18px;
  display: grid; place-items: center;
  opacity: 0; pointer-events: none; transition: opacity .18s, transform .18s;
}
#back-top.show { opacity: 1; pointer-events: auto; }
#back-top:hover { color: var(--accent-strong); transform: translateY(-2px); }
#scroll-sentinel { height: 1px; width: 100%; }
#scroll-status { text-align: center; color: var(--muted); font-size: 12.5px; padding: 8px 0; }

/* ---------- 卡片四层重排（标题 / 元信息 / 内容 / 底部） ---------- */
.entry-card { display: flex; flex-direction: column; gap: 6px; }
/* 0. 日期层（对齐设计稿）：日期+星期 左，天气角标 右 */
.card-daterow {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-size: 12.5px; color: var(--muted);
}
.card-date { font-variant-numeric: tabular-nums; }
.card-weather { font-size: 15px; line-height: 1; opacity: .85; }
/* 1. 标题层：16px/600 单行省略 + 右侧 ··· 菜单（hover/focus-within 渐显） */
.card-head { display: flex; align-items: flex-start; gap: 8px; }
.card-title {
  flex: 1; min-width: 0; font-size: 16px; font-weight: 600; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.card-title .star { color: var(--gold); margin-left: 6px; }
.card-subtitle {
  font-size: 12.5px; color: var(--muted); font-weight: 400;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 1px;
}
.card-menu-wrap { position: relative; flex: none; }
.card-menu-btn {
  border: none; background: transparent; cursor: pointer; color: var(--muted);
  font-size: 18px; line-height: 1; padding: 0; border-radius: var(--radius-s);
  opacity: 0; transition: opacity .12s;
}
.entry-card:hover .card-menu-btn,
.card-menu-wrap:focus-within .card-menu-btn { opacity: 1; }
.card-menu-btn:hover { color: var(--accent-strong); background: var(--fill-soft); }
.card-menu {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 30;
  min-width: 128px; padding: 4px;
  background: var(--paper); border: 1px solid var(--paper-edge);
  border-radius: var(--radius-m); box-shadow: var(--shadow-2);
}
.card-menu button {
  display: block; width: 100%; text-align: left; cursor: pointer;
  border: none; background: transparent; padding: 7px 10px; border-radius: var(--radius-s);
  font-size: 13px; color: var(--ink-soft);
}
.card-menu button:hover { background: var(--fill-soft); color: var(--ink); }
.card-menu button.danger:hover { background: var(--danger-soft); color: var(--danger); }
/* 2. 元信息层：12px、AA 对比度 */
.card-meta { font-size: 12px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.card-meta .sep { opacity: .5; }
/* 3. 内容层：纯文本摘要 3 行 + 渐隐，超出展开全文 */
.card-body { position: relative; }
.card-excerpt {
  font-family: var(--font-serif); font-size: 15px; line-height: 1.6; color: var(--ink-soft);
  white-space: pre-line; word-break: break-word;
}
.card-excerpt.clamped {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.card-body.masked::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 32px;
  background: linear-gradient(transparent, var(--paper)); pointer-events: none;
}
.card-excerpt mark { background: var(--mark-bg); color: inherit; padding: 0 2px; border-radius: 3px; }
.card-expand {
  border: none; background: transparent; cursor: pointer; padding: 2px 0;
  color: var(--accent); font-size: 12.5px; text-decoration: underline;
}
.card-media { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 4px; }
.card-media figure { position: relative; margin: 0; }
.card-media img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--radius-s); border: 1px solid var(--paper-edge);
  background: var(--fill-sunken); display: block; cursor: zoom-in;
}
.card-media .more-tag {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: rgba(0, 0, 0, .45); color: #fff; font-size: 15px; font-weight: 600;
  border-radius: var(--radius-s);
}
/* 4. 底部层：标签 chip + 待办进度 */
.card-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; }
.card-foot:empty { display: none; }
.tag-chip {
  cursor: pointer; border: 1px solid var(--card-line); background: var(--fill-soft);
  color: var(--ink-soft); font-size: 12px; padding: 1px 9px; border-radius: var(--radius-pill);
}
.tag-chip:hover { border-color: var(--accent); color: var(--accent-strong); }
/* 底部常驻分享按钮（对齐设计稿卡片脚）：margin-left:auto 推到最右 */
.card-share {
  margin-left: auto; border: none; cursor: pointer;
  padding: 3px 14px; border-radius: var(--radius-pill);
  background: var(--accent-soft); color: var(--accent-strong);
  font-size: 12px; font-weight: 600;
}
.card-share:hover { background: var(--accent); color: var(--on-accent); }
.tag-chip.active { background: var(--accent-soft); color: var(--accent-strong); border-color: var(--accent); }
.todo-progress { display: flex; align-items: center; gap: 6px; }
.todo-progress .todo-count { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.todo-bar { width: 48px; height: 2px; background: var(--fill-soft); border-radius: var(--radius-pill); overflow: hidden; }
.todo-bar > i { display: block; height: 100%; background: var(--green); }
.period-think-live { max-height: 220px; overflow: auto; white-space: pre-wrap; word-break: break-word; font-size: 12px; line-height: 1.6; color: var(--muted); background: var(--fill-soft); border-radius: 8px; padding: 8px 10px; }

/* ---------- 首页（个人生活控制台，Memory OS §4.1，目标稿 v1.6 版式） ---------- */

/* 首页双栏骨架：叠类抬特异性压过 .main-page.active 的 flex（不用 !important，
   全库 display:!important 只允许 [hidden] 兜底那一条）；非 active 必须回 none，
   否则切到别的页首页内容还会留在屏幕上（v1.7 修） */
.main-page.home-layout { display: none; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; align-items: start; }
.main-page.home-layout.active { display: grid; }
.home-main { display: flex; flex-direction: column; gap: 18px; min-width: 0; }

/* 日落 hero：整幅 SVG 场景（令牌山脊随主题，不用照片资产），文案与动作卡压在场景上 */
.home-hero {
  position: relative; overflow: hidden;
  min-height: 300px; border-radius: var(--radius);
  display: flex; flex-direction: column; justify-content: flex-end;
  box-shadow: var(--shadow-1);
}
.home-scene { position: absolute; inset: 0; width: 100%; height: 100%; }
.home-quote-hand {
  position: absolute; top: 20px; right: 26px; margin: 0;
  transform: rotate(-3deg);
  font-family: var(--font-serif); font-style: italic;
  font-size: 14.5px; line-height: 1.9; color: var(--ink-soft);
  text-align: right; opacity: .85; pointer-events: none;
}
.home-hero-ov { position: relative; padding: 30px 28px 10px; }
.home-hero-ov h2 {
  margin: 0; font-family: var(--font-serif);
  font-size: 32px; font-weight: 700; letter-spacing: .04em; color: var(--ink);
}
.home-hero-ov p { margin: 8px 0 0; font-size: 14px; color: var(--ink-soft); }

/* 动作卡三张：半透纸面压在场景底缘（backdrop 磨砂，入口层级高于面板） */
.home-acts {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
  padding: 0 24px 22px;
}
.home-acts button {
  display: flex; align-items: center; gap: 12px; text-align: left;
  padding: 13px 15px; border-radius: var(--radius-m);
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border: 1px solid var(--card-line);
  box-shadow: var(--shadow-2);
}
.home-acts button:hover { border-color: var(--card-hover-edge); transform: translateY(-1px); }
.act-ico {
  flex: none; width: 40px; height: 40px; border-radius: var(--radius-m);
  display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent-strong);
}
.act-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.act-txt b { font-size: 14.5px; color: var(--ink); }
.act-txt span { font-size: 12px; color: var(--muted); }

/* 今日区页头：衬线标题 + 日期/星期/tag + 天气 chip（relative 给手选弹层定位） */
.today-head { position: relative; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.today-head h2 { margin: 0; font-family: var(--font-serif); font-size: 22px; }
.weather-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 12px; font-size: 12.5px;
  border: 1px solid var(--paper-edge); border-radius: var(--radius-pill);
  background: var(--paper); color: var(--ink-soft); cursor: default;
}
.weather-chip.manual { border-style: dashed; cursor: pointer; }
.weather-chip.manual:hover { border-color: var(--accent); color: var(--accent-strong); }
.weather-pop {
  position: absolute; right: 0; top: calc(100% + 6px);
  display: flex; flex-direction: column; gap: 4px;
  padding: 8px; min-width: 150px; z-index: 40;
}
.weather-pop button { text-align: left; padding: 6px 10px; border-radius: var(--radius-s); font-size: 13px; }

/* 今日大卡 + AI 今日回顾双列 */
.today-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 14px; align-items: start; }
.today-card { padding: 14px; }
.tf-wrap { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 16px; cursor: pointer; }
.tf-media img {
  display: block; width: 100%; height: 260px;
  object-fit: cover; border-radius: var(--radius-m); background: var(--fill-soft);
}
.tf-body { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.tf-meta { display: flex; align-items: center; gap: 8px; }
.tf-tagsline { flex: 1; min-width: 0; font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tf-star { font-size: 15px; color: var(--gold); }
.tf-title {
  margin: 0; font-family: var(--font-serif); font-size: 22px; line-height: 1.35; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tf-wrap:hover .tf-title { color: var(--accent-strong); }
.tf-time { margin: 0; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.tf-ex {
  margin: 0; font-size: 13.5px; line-height: 1.7; color: var(--ink-soft);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.tf-thumbs { display: flex; gap: 6px; align-items: center; }
.tf-thumbs img {
  width: 64px; height: 64px; object-fit: cover;
  border-radius: var(--radius-s); background: var(--fill-soft);
}
.tf-more {
  width: 64px; height: 64px; flex: none; border-radius: var(--radius-s);
  display: grid; place-items: center;
  background: var(--fill-soft); color: var(--muted); font-size: 13px;
}
.today-empty { padding: 10px 4px; }
.today-more { margin: 8px 0 0; padding: 0 4px; }

/* AI 今日回顾面板：暖底卡，关键词 + 引号计数句 + 实心去按钮 */
.review-panel { background: linear-gradient(165deg, var(--accent-soft), var(--paper)); }
.review-desc { margin: 0 0 8px; font-size: 12.5px; color: var(--muted); }
.review-keys {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  padding: 10px 12px; border-radius: var(--radius-m);
  background: color-mix(in srgb, var(--paper) 72%, transparent);
}
.review-keys b { font-size: 12.5px; color: var(--ink-soft); font-weight: 600; }
.review-quote {
  margin: 0; padding: 10px 12px; border-radius: var(--radius-m);
  background: color-mix(in srgb, var(--paper) 72%, transparent);
  font-family: var(--font-serif); font-size: 13.5px; line-height: 1.75; color: var(--ink-soft);
}
.review-go {
  align-self: flex-start; margin-top: 2px;
  padding: 7px 16px; font-size: 13px; font-weight: 600;
  border: none; border-radius: var(--radius-pill);
  background: var(--accent-strong); color: var(--on-accent); cursor: pointer;
}
.review-go:hover { filter: brightness(1.06); }

/* 最近记录：四列图卡（封面/日期/标题/摘要/心情） */
.recent-head { display: flex; align-items: baseline; gap: 10px; }
.recent-head h2 { margin: 0; font-family: var(--font-serif); font-size: 22px; }
#home-more { font-size: 12.5px; padding: 3px 12px; }
.recent-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.recent-card {
  display: flex; flex-direction: column; gap: 8px;
  padding: 0 0 10px; overflow: hidden; cursor: pointer;
}
.recent-card:hover { border-color: var(--card-hover-edge); transform: translateY(-1px); }
.rc-cover { position: relative; background: var(--fill-soft); }
.rc-cover img { display: block; width: 100%; height: 120px; object-fit: cover; }
.rc-cover.noimg { display: grid; place-items: center; height: 120px; background: var(--accent-soft); }
.rc-cover.noimg b { position: relative; font-family: var(--font-serif); font-size: 28px; color: var(--accent-strong); }
.rc-art { position: absolute; inset: 0; width: 100%; height: 100%; }
.rc-body { display: flex; flex-direction: column; gap: 4px; padding: 0 12px; min-width: 0; }
.rc-date { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.rc-title {
  margin: 0; font-family: var(--font-serif); font-size: 15px; line-height: 1.4; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.recent-card:hover .rc-title { color: var(--accent-strong); }
.rc-ex {
  margin: 0; font-size: 12.5px; line-height: 1.6; color: var(--ink-soft);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.rc-mood { font-size: 12px; color: var(--muted); }

/* 右栏：今日心情五档 + 本月概览 + AI 记忆助手 */
.home-rail { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.mood-picks { display: flex; gap: 8px; }
.mood-pick {
  flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 10px 2px; border: 1px solid var(--paper-edge); border-radius: var(--radius-m);
  background: var(--paper); font-size: 12px; color: var(--ink-soft); cursor: pointer;
}
.mood-pick:hover { border-color: var(--accent); }
.mood-pick.active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-strong); font-weight: 600; box-shadow: 0 0 0 1px var(--accent); }
.mood-emo { font-size: 20px; line-height: 1; }
.month-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.month-stat { display: flex; flex-direction: column; gap: 2px; align-items: center; text-align: center; }
.month-stat b { font-family: var(--font-serif); font-size: 20px; color: var(--accent-strong); font-variant-numeric: tabular-nums; }
.month-stat span { font-size: 11.5px; color: var(--muted); }
.month-sub-head {
  display: flex; align-items: center; gap: 8px;
  margin-top: 12px; font-size: 12.5px; color: var(--muted);
}
.month-sub-head::after { content: ""; flex: 1; height: 1px; background: var(--paper-edge); }
.mood-axis { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); }
/* 本月关键词彩 chip：六色轮换，仅视觉不分语义（暗色主题下用 color-mix 压暗） */
.kc0 { background: #fde8d7; color: #9c4f28; border-color: transparent; }
.kc1 { background: #e3f0dd; color: #4c7038; border-color: transparent; }
.kc2 { background: #dcebf5; color: #37628a; border-color: transparent; }
.kc3 { background: #f6e3ec; color: #8a3760; border-color: transparent; }
.kc4 { background: #f5eeda; color: #8a6a1f; border-color: transparent; }
.kc5 { background: #e7e3f5; color: #5a4c8a; border-color: transparent; }
[data-theme="dark"] .kc0, [data-theme="dark"] .kc1, [data-theme="dark"] .kc2,
[data-theme="dark"] .kc3, [data-theme="dark"] .kc4, [data-theme="dark"] .kc5 {
  background: color-mix(in srgb, var(--fill-soft) 82%, transparent);
  color: var(--ink-soft); border-color: var(--paper-edge);
}

/* AI 记忆助手卡：暖渐变底 + 山影 + 引号建议句 + 圆形进入钮 */
.ai-assist {
  position: relative; overflow: hidden;
  padding: 16px 18px 64px;
  background: linear-gradient(160deg, var(--accent-soft), #f3d9c4);
}
.ai-assist-head { display: flex; align-items: center; gap: 8px; color: var(--accent-strong); }
.ai-assist-head b { font-size: 15px; }
.ai-assist-sub { margin: 6px 0 10px; font-size: 12.5px; color: var(--ink-soft); }
.ai-assist-box {
  position: relative; z-index: 1;
  padding: 10px 12px; border-radius: var(--radius-m);
  background: color-mix(in srgb, var(--paper) 72%, transparent);
  font-size: 12.5px; line-height: 1.7; color: var(--ink-soft);
}
.ai-assist-box p { margin: 4px 0 0; font-family: var(--font-serif); }
.ai-assist-go {
  position: absolute; right: 14px; bottom: 40px; z-index: 2;
  width: 38px; height: 38px; border: none; border-radius: 50%;
  background: var(--accent-strong); color: var(--on-accent);
  font-size: 16px; cursor: pointer; box-shadow: var(--shadow-2);
}
.ai-assist-go:hover { filter: brightness(1.08); }
.ai-assist-mtn { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 60px; }

/* 顶栏右簇（目标稿 v1.6）：AI 助手胶囊 + 铃铛（.icon-btn 已有）+ 圆形头像 */
.ai-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; border: none; border-radius: var(--radius-pill);
  background: var(--accent-soft); color: var(--accent-strong);
  font-size: 13px; font-weight: 600; cursor: pointer;
}
.ai-pill:hover { filter: brightness(.97); }
.avatar-btn {
  width: 34px; height: 34px; flex: none; padding: 0;
  border: none; border-radius: 50%;
  background: var(--accent-strong); color: var(--on-accent);
  font-size: 14px; font-weight: 600; cursor: pointer;
}
.avatar-btn:hover { filter: brightness(1.08); }

/* 首页/回忆页共用的条目行：日期 + 标题 + 星 + 箭头，整行可点 */
.home-entry {
  display: flex; align-items: center; gap: 10px; width: 100%;
  border: none; background: transparent; cursor: pointer;
  padding: 9px 8px; border-radius: var(--radius-s); text-align: left;
}
.home-entry:hover { background: var(--fill-soft); }
.he-date { flex: none; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.he-title {
  flex: 1; min-width: 0; font-size: 14px; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.home-entry:hover .he-title { color: var(--accent-strong); }
.he-star { flex: none; color: var(--gold); font-size: 13px; }
.he-chev { flex: none; color: var(--muted); font-size: 16px; line-height: 1; }
.home-empty { padding: 8px; }

/* 右栏 Quiet AI 块：计数句 + 依据行，右上角 × 可关（dr.aiblock）；标识用 4px 主色圆点，禁✨ */
.rail-panel { padding: 16px 18px; }
.rail-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.rail-head .page-sub { margin: 0; flex: 1; display: flex; align-items: center; gap: 7px; }
.ai-dot { flex: none; width: 4px; height: 4px; border-radius: 50%; background: var(--accent); }
.rail-close { font-size: 14px; color: var(--muted); opacity: 0; transition: opacity .12s; }
.rail-panel:hover .rail-close, .rail-close:focus-visible { opacity: 1; }
.rail-body { display: flex; flex-direction: column; gap: 8px; }
.rail-say { margin: 0; font-size: 13.5px; line-height: 1.7; color: var(--ink-soft); }
.rail-quote {
  margin: 0; padding: 8px 12px; border-left: 2px solid var(--accent);
  background: var(--quote-bg); border-radius: 0 var(--radius-s) var(--radius-s) 0;
  font-family: var(--font-serif); font-size: 13.5px; line-height: 1.7; color: var(--ink-soft);
}
.rail-basis { margin: 0; font-size: 11.5px; color: var(--muted); }
.rail-goto { align-self: flex-start; font-size: 12px; padding: 2px 10px; }

/* 回忆页：那年今天，每年一卡 */
.mem-card { display: flex; flex-direction: column; gap: 2px; }
.mem-head { display: flex; align-items: baseline; gap: 10px; padding: 2px 8px 6px; }
.mem-head b { font-family: var(--font-serif); font-size: 16px; color: var(--accent-strong); }
.mem-empty { padding: 12px 8px; }

/* 窄屏：双列骨架塌落单列、动作卡两列；日记筛选右栏塌到主栏下方 */
@media (max-width: 980px) {
  .main-page.home-layout { grid-template-columns: minmax(0, 1fr); }
  .today-grid { grid-template-columns: minmax(0, 1fr); }
  .home-acts { grid-template-columns: repeat(2, 1fr); }
  .diary-layout { grid-template-columns: minmax(0, 1fr); }
  .diary-rail { position: static; max-height: none; }
}
@media (max-width: 560px) {
  .home-acts { grid-template-columns: 1fr; padding: 0 12px 16px; }
  .home-hero-ov { padding: 24px 20px 8px; }
  .reader-article { padding: 16px 18px 22px; }
  .reader-gallery { grid-template-columns: 1fr; }
  .home-hero-ov h2 { font-size: 24px; }
  .home-quote-hand { display: none; }
  .tf-wrap { grid-template-columns: minmax(0, 1fr); }
  .tf-media img { height: 180px; }
}

/* ---------- P0.5：逐页差异补齐（合同 §9） ---------- */

/* 日记页头：标题 + 共 N 篇 + 常驻快捷筛选 chips */
.page-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.page-head h2 { margin: 0; font-family: var(--font-serif); font-size: 22px; }
.fchips { display: flex; gap: 6px; flex-wrap: wrap; }
.fchip {
  padding: 4px 12px; font-size: 12.5px; line-height: 1.5;
  border: 1px solid var(--paper-edge); border-radius: 999px;
  background: var(--paper); color: var(--ink-soft); cursor: pointer;
}
.fchip:hover { border-color: var(--accent); color: var(--accent-strong); }
.fchip.active { background: var(--accent-soft); border-color: transparent; color: var(--accent-strong); font-weight: 600; }

/* 时间轴月分组头（v1.7：折叠钮 + 月标 + 本月「今日」chip） */
.tl-month {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-serif); font-size: 13.5px; color: var(--muted);
  padding: 14px 2px 2px; letter-spacing: .04em;
}
.tl-month .fold {
  border: 0; background: none; color: var(--muted); cursor: pointer;
  padding: 0 2px; font-size: 12px; line-height: 1; transition: transform .15s;
}
.tl-month .fold[aria-expanded="false"] { transform: rotate(-90deg); }
.tl-monthwrap.folded .day-group { display: none; }
.tl-today {
  border: 0; background: var(--accent-soft); color: var(--accent-strong);
  font-size: 11.5px; border-radius: 999px; padding: 2px 10px; cursor: pointer;
}
.tl-today:hover { filter: brightness(.97); }

/* ---------- 日记页 v1.7：主栏 + 筛选右栏（目标稿日记页） ---------- */
.diary-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; align-items: start; width: 100%; }
.diary-main { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.diary-rail { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow-y: auto; }
.diary-sub { color: var(--muted); font-size: 13px; }
.write-btn {
  margin-left: auto; border: 0; background: var(--accent-strong); color: var(--paper);
  border-radius: 999px; padding: 8px 18px; font-size: 13.5px; cursor: pointer;
}
.write-btn:hover { filter: brightness(1.06); }
.diary-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.diary-toolbar .spacer { flex: 1; }
.diary-toolbar select {
  font: inherit; font-size: 12.5px; padding: 5px 8px; color: var(--ink-soft);
  background: var(--paper); border: 1px solid var(--paper-edge); border-radius: var(--radius-s);
}
.fchip b { margin-left: 5px; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.fchip.active b { color: var(--accent-strong); }
.rail-card { background: var(--paper); border: 1px solid var(--paper-edge); border-radius: var(--radius); padding: 14px 16px; }
.rail-card > header { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.rail-card h3 { margin: 0; font-size: 13.5px; font-weight: 700; }
.rail-card .link { margin-left: auto; border: 0; background: none; color: var(--muted); font-size: 12px; cursor: pointer; padding: 2px 4px; }
.rail-card .link + .link { margin-left: 0; }
.rail-card .link:hover { color: var(--accent-strong); }
.fg { margin-bottom: 12px; }
.fg:last-child { margin-bottom: 0; }
.fg-head { font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.fg-row { display: flex; flex-wrap: wrap; gap: 6px; }
.fg-hint { margin: 6px 0 0; font-size: 11px; color: var(--muted); }
.fg-dates { display: flex; gap: 6px; margin-top: 6px; }
.fg-dates input {
  flex: 1; min-width: 0; font: inherit; font-size: 12px; padding: 4px 6px; color: var(--ink);
  background: var(--input-bg); border: 1px solid var(--paper-edge); border-radius: var(--radius-s);
}
.ftile {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  min-width: 52px; padding: 7px 8px; font-size: 11.5px;
  border: 1px solid var(--paper-edge); border-radius: 10px;
  background: var(--paper); color: var(--ink-soft); cursor: pointer;
}
.ftile:hover { border-color: var(--accent); color: var(--accent-strong); }
.ftile.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-strong); font-weight: 600; }
.ftile-emo { font-size: 16px; line-height: 1; }
.fg select {
  width: 100%; font: inherit; font-size: 12.5px; padding: 6px 8px; color: var(--ink);
  background: var(--input-bg); border: 1px solid var(--paper-edge); border-radius: var(--radius-s);
}
.hot-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.hot-tags .tag-chip b { margin-left: 5px; font-size: 11px; opacity: .75; font-variant-numeric: tabular-nums; }

/* 行内缩略图（回忆页条目行用；首页最近已换 .recent-grid 图卡） */
.he-thumb {
  width: 44px; height: 33px; flex: 0 0 auto;
  object-fit: cover; border-radius: var(--radius-s); background: var(--fill-soft);
}
.rail-tags { display: flex; flex-wrap: wrap; gap: 6px; }

/* 阅读视图：只读 dialog，媒体封面 + 衬线正文 + 底部常驻动作条 */
/* 阅读 v2（1.45.0）：单列沉浸图文文章——封面进滚动流（上滑随正文消失，不再钉顶）；
   正文内联图原位渲染；未引用附件 = 封面 + 画廊。dialog 开时才 flex，避免盖掉 UA 的
   :not([open]) display:none */
#reader { width: min(760px, 92vw); max-height: 88vh; padding: 0; border-radius: var(--radius); overflow: hidden; }
#reader[open] { display: flex; flex-direction: column; }
.reader-scroll { flex: 1; min-height: 0; overflow-y: auto; }
.reader-cover { background: var(--fill-soft); }
.reader-cover img { display: block; width: 100%; height: min(46vh, 380px); object-fit: cover; cursor: zoom-in; }
.reader-article { padding: 22px 32px 26px; }
.reader-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 18px; }
.reader-gallery.single { grid-template-columns: 1fr; }
.reader-gallery figure { margin: 0; }
.reader-gallery img {
  display: block; width: 100%; height: 200px; object-fit: cover;
  border-radius: var(--radius-s); cursor: zoom-in; background: var(--fill-soft);
}
.reader-gallery.single img { height: auto; max-height: 56vh; object-fit: contain; }
.gal-file {
  grid-column: 1 / -1; text-align: left; cursor: pointer;
  border: 1px dashed var(--paper-edge); background: var(--paper);
  border-radius: var(--radius-s); padding: 8px 12px; font-size: 12.5px; color: var(--ink-soft);
}
.gal-file:hover { border-color: var(--accent); color: var(--accent-strong); }
/* 正文内联图：文章感通栏，竖图限高不裁切（markdown.js 出 .md-img） */
.reader-content .md-img { width: 100%; max-height: 60vh; object-fit: contain; background: var(--fill-soft); }
.reader-meta { font-size: 12px; color: var(--muted); margin-bottom: 6px; }
#reader-title { margin: 0 0 8px; font-family: var(--font-serif); font-size: 24px; line-height: 1.35; }
.reader-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.reader-content { font-family: var(--font-serif); font-size: 15.5px; line-height: 1.85; }
.reader-rel { margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--paper-edge); }
.reader-foot {
  position: sticky; bottom: 0; display: flex; align-items: center; gap: 10px;
  padding: 12px 28px; background: var(--paper); border-top: 1px solid var(--paper-edge);
}

/* 我的 AI 整页：浮动面板升格为页内宿主（chat.js 零改动，只换定位） */
#chat-panel.chat-inpage {
  position: static; right: auto; bottom: auto; z-index: auto;
  width: auto; height: min(640px, 72vh);
  box-shadow: none; opacity: 1; transform: none;
}
.ai-host { min-height: 420px; display: flex; flex-direction: column; }
.ai-sugs { display: flex; gap: 8px; flex-wrap: wrap; }
.ai-sug {
  padding: 5px 13px; font-size: 12.5px;
  border: 1px solid var(--paper-edge); border-radius: 999px;
  background: var(--paper); color: var(--ink-soft); cursor: pointer;
}
.ai-sug:hover { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-strong); }

/* 日历右栏：本月概览 / 情绪线与分布环 / 关键词 */
.cal-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; align-items: start; }
.cal-rail { display: flex; flex-direction: column; gap: 14px; }
.cal-stat { display: flex; align-items: baseline; gap: 5px; }
.cal-stat b { font-family: var(--font-serif); font-size: 18px; color: var(--accent-strong); }
.mood-line { width: 100%; height: 44px; }
.mood-line polyline { fill: none; stroke: var(--accent); stroke-width: 1.6; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.mood-ring {
  width: 84px; height: 84px; border-radius: 50%; align-self: center;
  -webkit-mask: radial-gradient(circle, transparent 55%, #000 56%);
  mask: radial-gradient(circle, transparent 55%, #000 56%);
}
.mood-legend { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 12px; color: var(--muted); }
.mood-legend span { display: inline-flex; align-items: center; gap: 4px; }
.mood-legend i { width: 8px; height: 8px; border-radius: 50%; }

/* 回忆页 hero：1 年前的今天（有图做背景，无图纯色） */
.mem-hero { position: relative; overflow: hidden; min-height: 150px; display: flex; align-items: flex-end; }
.mem-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mem-hero-ov {
  position: relative; width: 100%; padding: 40px 20px 18px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .55) 100%);
  color: #fff; display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
}
.mem-hero-ov b { font-family: var(--font-serif); font-size: 17px; }
.mem-hero-ov p { margin: 0; font-size: 13.5px; opacity: .92; }
.mem-hero-ov .ghost { margin-top: 6px; background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .5); color: #fff; }

/* 设置页三卡：账户 / 外观 / 隐私 */
.settings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; padding: 16px; align-items: start; }
.set-card { display: flex; flex-direction: column; gap: 6px; }
.set-note { font-size: 12.5px; line-height: 1.7; color: var(--muted); }

@media (max-width: 980px) {
  .cal-wrap { grid-template-columns: minmax(0, 1fr); }
  .recent-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- 相册时间流（album.js；DESIGN.md 4.25 / modules/insight-day-summary-album.md） ----------
 * 纵向日卡：左轨衬线日号（与日记流 .day-rail-date 同一书写感），右侧一句 AI 总结 + 照片马赛克。
 * 全部走语义色变量，暗色由 [data-theme="dark"] 自动覆写；复用 .panel/.hint/.empty/button.ghost。 */
.album-flow { display: flex; flex-direction: column; gap: 14px; }
#page-album .topic-head { flex-wrap: wrap; }

/* 月头 sticky：压在顶栏（#topbar sticky top:0，实测高约 61px）之下，滚过时仍知道在哪个月。
   z-index 30 < 顶栏的 40：月头必须钻到顶栏底下，否则滚上去会盖住搜索框。 */
.al-month {
  position: sticky; top: 64px; z-index: 30; align-self: flex-start;
  padding: 3px 14px; margin: 8px 0 -6px;
  font-family: var(--font-serif); font-size: 14px; letter-spacing: .04em; color: var(--ink-soft);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(4px);
  border: 1px solid var(--paper-edge); border-radius: var(--radius-pill);
  box-shadow: var(--shadow-1);
}

.al-day { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 0 18px; padding: 16px 18px; }
.al-dayhead {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  padding: 0; border: none; background: none; text-align: left; cursor: pointer;
}
.al-num {
  font-family: var(--font-serif); font-size: 34px; line-height: 1.05; color: var(--ink);
  font-variant-numeric: tabular-nums; transition: color .15s ease;
}
.al-dayhead:hover .al-num { color: var(--accent-strong); }
.al-wd { font-size: 12.5px; color: var(--accent); }
.al-count { font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }

.al-body { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
/* 一句 AI 总结：无总结时也占一行高（min-height），日卡不因有没有文案而高低不齐；
   左边框是「AI 说的话」的视觉记号，留白时降到纸边色，不抢照片。 */
.al-sum {
  margin: 0; min-height: 1.6em; padding-left: 10px;
  font-family: var(--font-serif); font-size: 15px; line-height: 1.6; color: var(--ink-soft);
  border-left: 2px solid var(--accent-soft);
}
.al-sum.empty { border-left-color: var(--paper-edge); }

/* 马赛克：4 列方格，首图跨 2×2 做视觉锚点（album.js albumMosaicVariant / albumIsLead 同口径）；
   1 张铺满走 16:9、2 张对半走 4:3，避免孤图被拉成小方块。 */
.al-mosaic { display: grid; gap: 8px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.al-mosaic.single { grid-template-columns: minmax(0, 1fr); }
.al-mosaic.pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.al-cell {
  position: relative; margin: 0; overflow: hidden; aspect-ratio: 1 / 1;
  border-radius: var(--radius-s); background: var(--fill-sunken);
}
.al-mosaic.single .al-cell { aspect-ratio: 16 / 9; }
.al-mosaic.pair .al-cell { aspect-ratio: 4 / 3; }
.al-cell.lead { grid-column: span 2; grid-row: span 2; }
.al-cell img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  cursor: zoom-in; transition: transform .2s ease;
}
.al-cell:hover img { transform: scale(1.03); }
/* 取不到图（已删/网络）：留一格占位而不是整格消失，否则马赛克会错位、张数对不上 */
.al-cell.noimg img { display: none; }
.al-cell.noimg::after {
  content: "读取失败"; position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 12px; color: var(--muted);
}
.al-more {
  display: grid; place-items: center; cursor: pointer;
  border: 1px dashed var(--paper-edge); border-radius: var(--radius-s);
  background: var(--fill-soft); color: var(--ink-soft);
  font-family: var(--font-serif); font-size: 16px;
}
.al-more:hover { border-color: var(--accent); color: var(--accent-strong); }

#album-status { text-align: center; padding: 4px 0 2px; }
#album-sentinel { height: 1px; }

@media (max-width: 760px) {
  .al-day { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .al-dayhead { flex-direction: row; align-items: baseline; gap: 8px; }
  .al-num { font-size: 24px; }
  .al-mosaic { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .al-month { top: 60px; }
}