/* ============================================================
   朝花夕拾 · 设计令牌
   方向：杂志编辑风 (Editorial) × 宣纸质感
   展示字 Noto Serif SC（宋，900）／正文 霞鹜文楷
   强调色只用一种：朱砂红 --seal，只留给关键动作
   ============================================================ */
:root {
  --paper: #f5f0e6;
  --paper-2: #ece4d4;
  --card: #fffdf8;
  --ink: #231e19;
  --ink-2: #5f5449;
  --ink-3: #736554;
  --line: #ded3c0;
  --line-2: #94836a;   /* 控件边线：纸 3.2:1 / 卡片 3.6:1（原 #cdc0a8 只有 1.8:1，低于 1.4.11 的 3:1） */
  --seal: #a63a2a;
  --seal-deep: #8a2b1d;
  --seal-soft: #f3ded2;
  --jade: #4a6b52;
  --gold: #8a6420;

  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;

  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px;
  --sp-4: 16px; --sp-5: 24px; --sp-6: 40px; --sp-7: 64px;

  --sh-1: 0 1px 2px rgba(74, 56, 36, .06);
  --sh-2: 0 8px 28px rgba(74, 56, 36, .10);
  --sh-3: 0 24px 64px rgba(60, 44, 28, .16);

  /* 主题相关：朱砂底上的文字色、卡片的半透明面、警示色、环境光晕、遮罩 */
  --on-seal: #fff8f2;                 /* 朱砂底上的字（浅色用纸白，暗色要用深墨才够对比） */
  --card-glass: rgba(255, 253, 248, .72);
  --card-glass-2: rgba(255, 253, 248, .6);
  --card-glass-3: rgba(255, 253, 248, .8);
  --danger-line: #c9a49b;
  --danger-soft: #fbeee9;
  --scrim: rgba(35, 30, 25, .62);     /* 浮层遮罩 */
  --scrim-2: rgba(35, 30, 25, .42);   /* 淡一档的遮罩（图片工具条等） */
  --on-scrim: #fff;
  --bar-glass: rgba(245, 240, 230, .72);   /* 顶栏毛玻璃底 */
  --rte-glass: rgba(236, 228, 212, .55);  /* 富文本工具条底 */
  --inverse-ink: #f7f1e7;                 /* 反色胶囊（ink 底）的文字 */
  --seal-tint: rgba(166, 58, 42, .16);    /* 朱砂淡底 */
  --hair: rgba(0, 0, 0, .14);             /* 叠放头像/小控件之间的发丝分隔 */
  --ghost: #94836a;                       /* 空态控件（评分星等）：纸 3.2:1，达 1.4.11 的 3:1 */
  --seal-focus: rgba(166, 58, 42, .12);   /* 焦点圈 */
  /* 缩略图视图进入选择模式时，蒙在已选海报上的那层半透明滤镜。
     浅色用纸白（海报"褪色"）、暗色用夜纸（海报"压暗"），
     两侧都能一眼看出"被蒙住了"，而不是以为图没加载出来。 */
  --veil: rgba(255, 253, 248, .62);
  --seal-focus-2: rgba(166, 58, 42, .18);
  --seal-focus-3: rgba(166, 58, 42, .4);
  --wash-seal: rgba(166, 58, 42, .16);   /* 背景三团环境光晕 */
  --wash-gold: rgba(138, 100, 32, .14);
  --wash-jade: rgba(74, 107, 82, .10);

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-1: 160ms;
  --dur-2: 320ms;
  --dur-3: 640ms;

  --font-display: "Noto Serif SC", "Songti SC", "STSong", "SimSun", serif;
  --font-body: "LXGW WenKai", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  /* 等宽：数字/编号对齐用（Noto Sans Mono 已在 index.html 里引入）。
     之前只在个别地方写了 var(--font-mono, monospace)，令牌本身没定义 —— 会静默退回系统等宽。 */
  --font-mono: "Noto Sans Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ---------- 基础 ---------- */
/* ============================ 夜晚主题（data-theme="dark"） ============================
   只覆盖颜色类令牌，尺寸/间距/动效不动 —— 换主题不应该引起任何布局位移。
   取值都按 WCAG 2.2 AA 核过对比度（写在各行注释里）：
     · 正文 ink/card 14.3:1、次文 ink-2/card 9.8:1、说明 ink-3/card 6.3:1
     · 朱砂 seal/card 4.6:1（13px 文字也够）、按钮字 on-seal/seal 底 5.0:1
     · 输入框边线 line-2/card 3.2:1（满足 1.4.11 非文本对比 3:1）
   注意：长图导出（canvas）有自己的一套配色，**不跟随页面主题**，这是有意的 —— 导出的卡片始终是"纸"。 */
[data-theme="dark"] {
  color-scheme: dark;                 /* 原生控件（日期选择器/滚动条/表单）跟着变深 */
  --paper: #191512;                   /* 夜纸：暖黑，不用纯灰黑，保住"墨"的调子 */
  --paper-2: #221c17;
  --card: #211b16;
  --ink: #f1eae0;
  --ink-2: #cec3b3;
  --ink-3: #a89c8e;
  --line: #453c31;                    /* 装饰性分隔线（无 AA 要求，够看见即可 1.6:1） */
  --line-2: #776957;                  /* 控件边线：3.2:1 */
  --seal: #d4614a;
  --seal-deep: #e8846c;               /* 暗色下"深"＝更醒目，用于标题第二行等大字号 */
  --seal-soft: #3a241e;
  --jade: #86b18d;
  --gold: #c9a45f;
  --on-seal: #1d0f0b;                 /* 朱砂底改用深墨字，比纸白字对比更高 */
  --card-glass: rgba(34, 28, 23, .8);
  --card-glass-2: rgba(34, 28, 23, .68);
  --card-glass-3: rgba(34, 28, 23, .88);
  --danger-line: #7d4c40;
  --danger-soft: #33211c;
  --scrim: rgba(0, 0, 0, .7);
  --scrim-2: rgba(0, 0, 0, .52);
  --bar-glass: rgba(25, 21, 18, .78);
  --rte-glass: rgba(45, 37, 30, .7);
  --inverse-ink: #191512;                 /* ink 在暗色是亮色 → 反色胶囊的文字要用夜纸色 */
  --seal-tint: rgba(212, 97, 74, .18);
  --hair: rgba(255, 255, 255, .16);       /* 暗色下改用亮发丝 */
  --ghost: #776957;                       /* 暗色空态控件：3.2:1，达标 */
  --seal-focus: rgba(212, 97, 74, .3);    /* 暗底上的焦点圈要更实，2.4.11 焦点可见 */
  --seal-focus-2: rgba(212, 97, 74, .4);
  --seal-focus-3: rgba(212, 97, 74, .55);
  --veil: rgba(26, 21, 17, .6);           /* 缩略图视图：已选海报上的半透明滤镜（暗色压暗） */
  --wash-seal: rgba(212, 97, 74, .13);
  --wash-gold: rgba(201, 164, 95, .10);
  --wash-jade: rgba(134, 177, 141, .08);
  --sh-1: 0 1px 2px rgba(0, 0, 0, .5);
  --sh-2: 0 8px 28px rgba(0, 0, 0, .55);
  --sh-3: 0 24px 64px rgba(0, 0, 0, .6);
}
/* 纸纹：浅色是"乘"（压暗），暗色要改成"滤色"（提亮）才像颗粒而不是脏点 */
[data-theme="dark"] .grain { mix-blend-mode: screen; opacity: .035; }
/* select 的下拉箭头是 data-URI 里写死的 ink-2，暗色下要换成亮色，否则看不见 */
[data-theme="dark"] select.fi {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23cec3b3' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  letter-spacing: .01em;
  min-height: 100vh;
  overflow-x: hidden;
}
button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
img { display: block; max-width: 100%; }
[hidden] { display: none !important; }

/* ---------- 氛围层 ---------- */
.atmosphere {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(52rem 34rem at 8% -12%, var(--wash-seal), transparent 62%),
    radial-gradient(46rem 34rem at 104% 4%, var(--wash-gold), transparent 58%),
    radial-gradient(40rem 30rem at 50% 108%, var(--wash-jade), transparent 60%);
}
.grain {
  position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: .05;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- 布局骨架 ---------- */
.view { position: relative; z-index: 2; min-height: 100vh; display: flex; flex-direction: column; }
.wrap {
  width: 100%; max-width: 1160px; margin: 0 auto;
  padding: 0 clamp(18px, 5vw, 48px) var(--sp-7);
  display: flex; flex-direction: column; flex: 1;
}

/* ---------- 顶栏 ---------- */
.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  padding: clamp(18px, 3vw, 30px) 0 var(--sp-5);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
/* 印章：图案本体是 index.html 里的 #sealArt（穗作「扌」的缪篆「拾」），
   红底与字色都画在图形里，这里只管尺寸、微倾与压印的厚度。
   box-shadow 会按元素方框投影、和圆角印章对不上，所以用 drop-shadow 跟着图形轮廓走。 */
.seal {
  display: block; flex: none;
  width: 38px; height: 38px;
  transform: rotate(-2deg);
  filter: drop-shadow(0 2px 0 var(--seal-deep));
}
.seal svg { display: block; width: 100%; height: 100%; }
.brand-name {
  font-family: var(--font-display); font-weight: 700; font-size: 20px;
  letter-spacing: .16em; white-space: nowrap;
}
.topbar-right { display: flex; align-items: center; gap: 10px; }

/* ---------- 按钮 ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 44px; padding: 0 20px;
  border: 1px solid var(--line-2); border-radius: var(--r-sm);
  background: var(--card); color: var(--ink);
  font-size: 15px; letter-spacing: .04em; cursor: pointer;
  transition: transform var(--dur-1) ease-out, background var(--dur-1) ease-out,
              border-color var(--dur-1) ease-out, box-shadow var(--dur-1) ease-out;
}
.btn:hover { border-color: var(--ink-3); transform: translateY(-1px); }
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.btn-seal { background: var(--seal); border-color: var(--seal); color: var(--on-seal); box-shadow: var(--sh-1); }
.btn-seal:hover { background: var(--seal-deep); border-color: var(--seal-deep); }
.btn-danger { background: transparent; border-color: var(--danger-line); color: var(--seal-deep); }
.btn-danger:hover { background: var(--danger-soft); border-color: var(--seal); }
.btn-line { background: transparent; }

/* ---------- 白天/夜晚切换键 ----------
   纯图标（图标＝"点了会变成什么"）：浅色显月亮、深色显太阳。
   状态同时用 aria-pressed 暴露，不靠颜色单独传达。 */
.theme-btn {
  width: 38px; height: 38px; flex: 0 0 auto; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-2); border-radius: var(--r-sm);
  background: var(--card-glass-2); color: var(--ink-2); cursor: pointer;
  transition: transform var(--dur-1) var(--ease), color var(--dur-1) ease-out,
              border-color var(--dur-1) ease-out, background var(--dur-1) ease-out;
}
.theme-btn svg { width: 19px; height: 19px; display: block; }
.theme-btn:hover { transform: scale(1.05); color: var(--seal); border-color: var(--seal); }
.theme-btn:active { transform: scale(.95); }
.theme-btn:focus-visible { outline: 2px solid var(--seal); outline-offset: 2px; }
.theme-btn .ico-sun { display: none; }
[data-theme="dark"] .theme-btn .ico-moon { display: none; }
[data-theme="dark"] .theme-btn .ico-sun { display: block; }
/* 动效克制：只动 transform/opacity，且尊重"减少动态效果"偏好 */
@media (prefers-reduced-motion: reduce) {
  .theme-btn, .theme-btn:hover, .theme-btn:active { transition: none; transform: none; }
}
.btn-block { width: 100%; }
.btn-sm { min-height: 38px; padding: 0 14px; font-size: 14px; }
.btn-xl { min-height: 58px; padding: 0 30px; font-size: 18px; font-family: var(--font-display); font-weight: 700; letter-spacing: .12em; }
.btn-code { flex: none; align-self: flex-end; margin-bottom: 2px; }
.btn-x {
  width: 44px; height: 44px; flex: none;
  display: grid; place-items: center;
  font-size: 28px; line-height: 1;
  background: transparent; border: 1px solid transparent; border-radius: var(--r-sm);
  color: var(--ink-2); cursor: pointer;
  transition: background var(--dur-1) ease-out, color var(--dur-1) ease-out;
}
.btn-x:hover { background: var(--paper-2); color: var(--seal); }
:focus-visible { outline: 2px solid var(--seal); outline-offset: 2px; }

/* ---------- 首页 ---------- */
.home-main {
  position: relative;                 /* 装饰层挂在它上面 */
  flex: 1;
  display: grid; grid-template-columns: 1fr; gap: var(--sp-6);
  padding-top: clamp(28px, 6vw, 64px);
}

/* ---------- 中层背景装饰：飘落的花瓣与麦穗 ----------
   整层 80% 透明；只铺在「两栏中间那块空背景」上（展区卡片右缘 →「朝花」左缘），
   所以用 left/width 的百分比而不是整页铺满。不接鼠标事件，两栏内容压在它上面。 */
.hero-deco {
  position: absolute; top: 0; bottom: 0; left: 46%; width: 38%;
  pointer-events: none; user-select: none;
  opacity: .2;                        /* 80% 透明 */
  z-index: 0;
  display: none;                      /* 单栏（手机/平板）时没有"中间"，不显示 */
}
.hero-deco svg { display: block; width: 100%; height: 100%; overflow: visible; }
@media (min-width: 1024px) {
  .hero-deco { display: block; }
  .hero, .home-side { position: relative; z-index: 1; }
}
.hero {
  position: relative;
  /* 刊头整块右对齐（2026-09-30 按要求镜像）：朝花贴右、夕拾往左收一点；
     规则线与 kicker 跟着右对齐，免得横线从左边甩出来。 */
  text-align: right;
}
.kicker {
  margin: 0 0 var(--sp-4);
  font-size: 12px; letter-spacing: .34em; text-transform: uppercase;
  color: var(--ink-3);
}
.title {
  margin: 0;
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(56px, 13vw, 118px); line-height: .96; letter-spacing: -.03em;
  color: var(--ink);
}
.title span { display: block; }
/* 破格：第二行往左收一点（原来是在左边、往右缩；现在方向反过来） */
.title-2 { margin-right: clamp(28px, 9vw, 96px); color: var(--seal-deep); }
/* 原来的「把读过的书…」导语与页脚「夕拾 · 一九二八」已按要求删掉 */
.hero-rule {
  margin-top: var(--sp-6); margin-left: auto;      /* 靠右：与朝花夕拾同一条右边缘 */
  height: 3px; width: min(340px, 70%);
  background: linear-gradient(90deg, rgba(166, 58, 42, 0), var(--seal));   /* 渐变方向镜像 */
}

.home-side { display: flex; flex-direction: column; gap: var(--sp-5); }

/* ---------- 首页统计展区（方案 C：三个图形键 + 三个关键数 + 带引线标注的饼图） ---------- */
.stat-card {
  position: relative;                 /* 子选项面板绝对定位挂在这上面 */
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--card-glass);
  box-shadow: var(--sh-1);
  padding: var(--sp-4) var(--sp-4) var(--sp-4);
}

/* 三个图形键：只有图案、没有文字（可访问性靠 aria-label） */
.hero-ctrl { display: flex; align-items: center; gap: 8px; justify-content: center; }
.hero-ic {
  position: relative; width: 44px; height: 44px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: 10px; background: var(--card);
  color: var(--ink-2); cursor: pointer; box-shadow: var(--sh-1);
  transition: transform var(--dur-1) ease-out, background var(--dur-1) ease-out,
              border-color var(--dur-1) ease-out, color var(--dur-1) ease-out;
}
.hero-ic svg { width: 22px; height: 22px; display: block; }
.hero-ic:hover { transform: translateY(-1px); border-color: var(--line-2); color: var(--ink); }
.hero-ic:active { transform: translateY(0) scale(.97); }
.hero-ic[aria-expanded="true"] { background: var(--seal); border-color: var(--seal-deep); color: var(--card); }
/* 偏离默认值时右上角点一枚小朱砂点 */
.hero-ic[data-dirty="1"]::after {
  content: ""; position: absolute; top: 5px; right: 5px; width: 5px; height: 5px;
  border-radius: 50%; background: var(--seal);
}
.hero-ic[aria-expanded="true"][data-dirty="1"]::after { background: var(--card); }

/* 当前筛选的值：时段 · 类型色点 · 指标 */
.hero-val {
  display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap;
  margin: var(--sp-3) 0 var(--sp-2); font-family: var(--font-mono); font-size: 12px;
  color: var(--ink-2); letter-spacing: .03em;
}
.hero-val .sep { color: var(--line-2); }
.hero-val .dotline { display: inline-flex; gap: 3px; align-items: center; }
.hero-val .d { width: 7px; height: 7px; border-radius: 2px; display: inline-block; }

/* 三个关键数：压成一行、整行居中 */
.hero-top { display: flex; gap: var(--sp-5); align-items: baseline; justify-content: center;
  padding: 4px 0 8px; flex-wrap: wrap; }
.hero-top .kv { display: flex; align-items: baseline; gap: 5px; }
.hero-top .kv .n { font-family: var(--font-display); font-weight: 900; font-size: 19px;
  line-height: 1.2; font-variant-numeric: tabular-nums; }
.hero-top .kv .n small { font-family: var(--font-body); font-weight: 400; font-size: 11px;
  color: var(--ink-3); margin-left: 2px; }
.hero-top .kv .l { font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: .1em; color: var(--ink-3); }

.hero-hair { height: 1px; background: var(--line); }

/* 饼图：说明落在饼外的空白处，引线从弧中点连过去 */
.hero-fig { padding: 8px 0 6px; }   /* 下缘留一点，配合 SVG 内的 padB */
.hero-fig svg { display: block; width: 100%; }
.hero-fig .pw { transition: opacity var(--dur-1) ease-out; }
.hero-fig .pw:hover { opacity: .86; }
.hero-fig .lead { stroke: var(--line-2); stroke-width: 1; fill: none; }
.hero-fig text { dominant-baseline: middle; }
.hero-fig .lb-name { fill: var(--ink); font-family: var(--font-display); font-weight: 700; }
.hero-fig .lb-val { fill: var(--ink-2); font-family: var(--font-mono); }
.hero-fig .lb-sub { fill: var(--ink-3); font-family: var(--font-mono); }
/* 时段图注：写在饼旁最空的角，当图注读，比说明更淡、加一点字距 */
.hero-fig .cap-time { fill: var(--ink-3); font-family: var(--font-display);
  font-weight: 700; letter-spacing: .06em; }

.hero-empty { padding: var(--sp-5) var(--sp-4); text-align: center; color: var(--ink-3);
  font-size: 13.5px; border: 1px dashed var(--line-2); border-radius: var(--r-sm);
  background: var(--card-glass-2); }
.hero-empty b { display: block; font-family: var(--font-display); font-size: 16px;
  color: var(--ink-2); margin-bottom: 4px; }

/* 子选项面板 */
.hero-panel {
  position: absolute; z-index: 20; top: 60px; min-width: 240px; padding: var(--sp-3);
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--card);
  box-shadow: var(--sh-2); animation: heroPop var(--dur-2) var(--ease);
}
@keyframes heroPop { from { opacity: 0; transform: translateY(-6px) scale(.985); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .hero-panel { animation: none; } }
.hero-panel h5 { margin: 0 0 var(--sp-2); font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: .2em; color: var(--ink-3); text-transform: uppercase; }
.hero-panel .p-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.hero-panel .p-grid.one { grid-template-columns: 1fr; }
.hero-panel .chip { display: flex; align-items: center; gap: 7px; padding: 7px 9px;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--card);
  font-size: 13px; color: var(--ink-2); text-align: left; cursor: pointer; }
.hero-panel .chip:hover { border-color: var(--line-2); }
.hero-panel .chip[aria-pressed="true"] { border-color: var(--seal-soft); background: var(--seal-soft); color: var(--seal-deep); }
.hero-panel .chip .d { width: 9px; height: 9px; border-radius: 2px; flex: 0 0 auto; }
.hero-panel .chip .s { margin-left: auto; font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); }
.hero-panel .chip[aria-pressed="true"] .s { color: var(--seal-deep); }
.hero-panel .p-sep { height: 1px; margin: var(--sp-3) 0; background: var(--line); }
.hero-panel .p-foot { display: flex; gap: 6px; }
.hero-panel .p-foot .btn { flex: 1; }
.hero-panel .p-tip { margin: 0; font-size: 11.5px; line-height: 1.65; color: var(--ink-3); }
.hero-panel .mrow { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.hero-panel .mrow label { font-size: 11.5px; color: var(--ink-3); font-family: var(--font-mono); width: 24px; }
.hero-panel input[type=month] { flex: 1; min-width: 0; padding: 6px 8px;
  font-family: var(--font-mono); font-size: 12px; border: 1px solid var(--line);
  border-radius: var(--r-sm); background: var(--card); color: var(--ink); }

/* 「＋ 新建」跟着刊头走（在 .hero 里、横线下面，桌面端下缘与展区卡片齐平）：
   和上面那条规则线之间留出间距，别贴着横线 */
.home-actions {
  display: flex; flex-direction: column; gap: var(--sp-3);
  align-items: flex-end;                 /* 按钮右对齐，与「朝花」右边缘齐平 */
  margin-top: var(--sp-5);
}

/* ---------- 首页：记录区 ---------- */
.records { margin-top: var(--sp-6); }
.rec-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--sp-4); flex-wrap: wrap;
  padding-bottom: var(--sp-3); border-bottom: 1px solid var(--line);
}
.rec-title {
  margin: 0; font-family: var(--font-display); font-weight: 700;
  font-size: clamp(20px, 3.6vw, 26px); letter-spacing: .06em; color: var(--ink);
}
.rec-count { margin-left: 8px; font-family: var(--font-body); font-weight: 400; font-size: 13px; color: var(--ink-3); letter-spacing: .04em; }
.rec-tools { display: flex; align-items: center; gap: 10px; }
.rec-views { display: inline-flex; padding: 3px; border: 1px solid var(--line-2); border-radius: 99px; background: var(--card-glass-2); }

/* ---------- 登录面板：方式切换（验证码 / 密码）与密码行 ---------- */
/* 沿用「列表 / 缩略图」那对胶囊按钮的观感，这里让它撑满、两半等宽 */
.auth-tabs { display: flex; width: 100%; margin: 2px 0 2px; }
.auth-tabs .rv { flex: 1 1 0; min-height: 34px; text-align: center; }
/* 密码框 + 「显示 / 隐藏」按钮同一行 */
.pwd-row { display: flex; align-items: stretch; gap: 8px; }
.pwd-row .fi { flex: 1 1 auto; min-width: 0; }
.btn-eye { flex: none; min-height: 40px; padding: 0 12px; font-size: 13px; }

/* ---------- 筛选与排序：二级下拉菜单 ---------- */
.menu-wrap { position: relative; }
/* 面板做小：缩掉内边距与最小宽度，宽度交给内容（气泡/字段行）自己撑，最多 236px */
.drop-menu {
  position: absolute; z-index: 40; top: calc(100% + 6px); left: 0;
  min-width: 184px; max-width: 236px; max-height: 70vh; overflow-y: auto;
  padding: 5px; background: var(--card);
  border: 1px solid var(--line-2); border-radius: var(--r-md);
  box-shadow: var(--sh-2);
}
.drop-menu[hidden] { display: none; }
#filterFieldList > button {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; padding: 7px 10px; border: 0; border-radius: var(--r-sm);
  background: transparent; color: var(--ink); font-size: 13.5px; line-height: 1.3;
  text-align: left; cursor: pointer;
}
#filterFieldList > button:hover { background: var(--paper-2); }
#filterFieldList > button.on { color: var(--seal-deep); font-weight: 700; }
#filterFieldList > button .dir { font-size: 12px; color: var(--seal); }
#filterFieldList > button .cnt {
  display: inline-block; min-width: 17px; margin-left: 6px; padding: 0 5px;
  border-radius: 99px; background: var(--seal); color: var(--on-seal);
  font-size: 11px; line-height: 17px; text-align: center; font-weight: 700;
}
#filterFieldList > button.danger { color: var(--seal); }
.fm-sep { height: 1px; margin: 5px 6px; background: var(--line); }
/* 第二级顶部一行：左边「‹ 字段名」返回，右边「全选 / 清空」 */
.fm-top { display: flex; align-items: center; justify-content: space-between; gap: 5px; }
.fm-back {
  flex: 1 1 auto; min-width: 0; padding: 6px 6px; border: 0; border-radius: var(--r-sm);
  background: transparent; color: var(--ink-2); font-size: 13px; line-height: 1.3;
  text-align: left; cursor: pointer;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fm-back:hover { background: var(--paper-2); color: var(--ink); }
.fv-tools { display: flex; gap: 2px; flex: none; }
.fv-tool {
  padding: 4px 7px; border: 0; border-radius: var(--r-sm); background: transparent;
  color: var(--ink-3); font-size: 12px; line-height: 1.3; cursor: pointer;
}
.fv-tool:hover { background: var(--paper-2); color: var(--seal); }
/* 候选值：气泡换行铺开（点一下切换选中），比一行一个复选框矮一半 */
.fv-chips {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 7px 8px 1px; max-height: 188px; overflow-y: auto; align-content: flex-start;
}
.fv-chip {
  max-width: 100%; padding: 4px 11px; border: 1px solid var(--line-2); border-radius: 99px;
  background: transparent; color: var(--ink-2); font-size: 12.5px; line-height: 1.4;
  overflow-wrap: anywhere; cursor: pointer;
  transition: border-color var(--dur-1) ease-out, background var(--dur-1) ease-out, color var(--dur-1) ease-out;
}
.fv-chip:hover { border-color: var(--ink-3); color: var(--ink); }
.fv-chip.on { background: var(--seal); border-color: var(--seal); color: var(--on-seal); font-weight: 700; }
.ck-empty { padding: 14px 10px; color: var(--ink-3); font-size: 13px; text-align: center; }
#btnFilterSortDir { margin: 7px 3px 2px; width: calc(100% - 6px); }
#btnFilterSortDir.on { border-color: var(--seal); color: var(--seal); }
.ck-foot {
  display: flex; gap: 6px; justify-content: flex-end;
  padding: 7px 3px 2px; margin-top: 3px; border-top: 1px solid var(--line);
}

/* 已应用的筛选胶囊 */
.chip-row { display: flex; flex-wrap: wrap; gap: 7px; }
.chip-row:not(:empty) { margin-top: 10px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 6px 4px 12px; border-radius: 99px;
  background: var(--seal-soft); color: var(--seal-deep);
  font-size: 12.5px; letter-spacing: .02em;
}
.chip-x {
  width: 18px; height: 18px; padding: 0; border: 0; border-radius: 50%;
  background: var(--seal-tint); color: var(--seal-deep);
  font-size: 11px; line-height: 1; cursor: pointer;
}
.chip-x:hover { background: var(--seal); color: var(--on-seal); }
.chip-clear-all {
  padding: 4px 12px; border: 1px solid var(--line-2); border-radius: 99px;
  background: transparent; color: var(--ink-2); font-size: 12.5px; cursor: pointer;
}
.chip-clear-all:hover { border-color: var(--seal); color: var(--seal); }
.rv {
  min-height: 30px; padding: 0 14px; border: 0; border-radius: 99px;
  background: transparent; color: var(--ink-3); font-size: 13px; letter-spacing: .06em; cursor: pointer;
  transition: color var(--dur-1) ease-out, background var(--dur-1) ease-out;
}
.rv:hover { color: var(--ink); }
.rv.on { background: var(--ink); color: var(--paper); }

.rec-body { padding-top: var(--sp-4); }

/* 空态 */
.rec-empty { padding: var(--sp-6) 0; text-align: center; }
.rec-empty-t { margin: 0 0 6px; font-family: var(--font-display); font-size: 19px; color: var(--ink-2); letter-spacing: .08em; }
.rec-empty-s { margin: 0; font-size: 13px; color: var(--ink-3); }

/* 缩略图（两种视图共用） */
.rec-thumb, .rec-cover {
  position: relative; display: block; overflow: hidden; flex: none;
  background: var(--paper-2);                                    /* 老浏览器兜底 */
  background: color-mix(in srgb, var(--tc) 12%, var(--card));
  border: 1px solid var(--line); border-radius: var(--r-sm);
}
.rec-thumb { width: 46px; height: 64px; }
.rec-cover { width: 100%; aspect-ratio: 3 / 4; border-radius: var(--r-md); }
.rec-thumb img, .rec-cover img { width: 100%; height: 100%; object-fit: cover; }
.thumb-ph {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; color: var(--tc);
}
.rec-thumb .thumb-ph { font-size: 20px; }
.rec-cover .thumb-ph { font-size: 34px; }

/* 视图一：列表 */
.view-list { display: flex; flex-direction: column; }
.rec-row {
  display: grid; grid-template-columns: 46px 1fr auto auto; align-items: center;
  gap: var(--sp-4);
  width: 100%; padding: var(--sp-3) 4px;
  border: 0; border-bottom: 1px solid var(--line);
  background: transparent; text-align: left; cursor: pointer;
  transition: background var(--dur-1) ease-out, transform var(--dur-1) var(--ease);
}
.rec-row:hover { background: var(--card-glass-3); transform: translateX(3px); }
.rec-row:focus-visible { outline: 2px solid var(--seal); outline-offset: 2px; border-radius: var(--r-sm); }
.rec-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.rec-titlerow { display: flex; align-items: center; gap: 8px; min-width: 0; }

/* 小印：初（初次）/ 完（有完成日期）。跟顶栏那枚印章同一族的圆角方印，
   字占七成、光学居中（字形重心略高，所以往下压一丝）。
   刻意不做成"1st"那种文字胶囊 —— 它是印记，不是词。
   两枚用颜色分开：初＝朱砂（红），完＝墨（深灰），一眼能认出是两件事。 */
.badge-first, .badge-done {
  flex: none; font-style: normal;
  width: 19px; height: 19px; border-radius: 5px;
  display: inline-grid; place-items: center;
  font-family: var(--font-display); font-weight: 900;
  font-size: 13px; line-height: 1; letter-spacing: 0;
  padding-top: 1px;                      /* 视觉居中 */
  box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .18);
}
.badge-first { background: var(--seal); color: var(--on-seal); }
.badge-done { background: var(--ink-2); color: var(--card); }
.rec-cover .badge-first, .rec-cover .badge-done {
  position: absolute; top: 8px; z-index: 2;
  width: 24px; height: 24px; border-radius: 6px; font-size: 16px;
  box-shadow: var(--sh-1);
}
.rec-cover .badge-first { left: 8px; }
.rec-cover .badge-done { left: 38px; }
.rec-name {
  font-family: var(--font-display); font-weight: 700; font-size: 17px; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rec-meta { font-size: 12.5px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 副标题最前面的「类型」：按类型配色 + 加粗、略大一点，
   跟后面几项（创作者 / 来源 / 日期）明确分开。 */
.rec-type {
  font-family: var(--font-display); font-weight: 700;
  font-size: 13px; letter-spacing: .02em;
}
.rec-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 2px; }
.rec-tag {
  padding: 1px 8px; border-radius: 99px; font-size: 11px; letter-spacing: .04em;
  color: var(--tag); border: 1px solid var(--line-2);
  border-color: color-mix(in srgb, var(--tag) 34%, transparent);
  background: transparent;
  background: color-mix(in srgb, var(--tag) 9%, transparent);
}
.rec-score { display: inline-flex; align-items: baseline; gap: 1px; color: var(--seal-deep); }
.rec-score b { font-family: var(--font-display); font-weight: 700; font-size: 20px; line-height: 1; }
.rec-score i { font-style: normal; font-size: 11px; color: var(--ink-3); }
.rec-go { color: var(--line-2); font-size: 20px; line-height: 1; }

/* 视图二：缩略图 + 名称 */
.view-grid {
  display: grid; gap: var(--sp-4) var(--sp-3);
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
}
.rec-card {
  display: flex; flex-direction: column; gap: 6px;
  padding: 0; border: 0; background: transparent; cursor: pointer; text-align: center;
  /* ★ grid item 默认 min-width:auto：超长名称（尤其是不含空格的英文）会把它撑宽，
     于是同一屏里的海报大小就不一样了。归零才能保证每张封面等宽等高。 */
  min-width: 0;
  transition: transform var(--dur-1) var(--ease);
}
.rec-card:hover { transform: translateY(-3px); }
.rec-card:focus-visible { outline: 2px solid var(--seal); outline-offset: 3px; border-radius: var(--r-md); }
.rec-card:hover .rec-cover { box-shadow: var(--sh-2); }
.rec-cover { transition: box-shadow var(--dur-1) ease-out; flex: none; }
/* 名称：居中、最多 3 行、超出以「…」结尾。
   截断与"末行太短就少一行"的调优**由 JS 做**（fitCardName），所以这里不用 -webkit-line-clamp
   —— 那个没法配合「：」分段，也做不了字距调节。 */
.rec-cname {
  font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--ink);
  line-height: 1.35; text-align: center; width: 100%;
  overflow-wrap: anywhere;      /* 超长英文/无空格串也能断，不撑破卡片 */
  overflow: hidden;
  /* 「最多 3 行」的**硬底线**（`line-height: 1.35` × 3 + 2px 余量，保证第 3 行的
     下伸部不被切）。字体是从 CDN **按需分包**加载的：新字形到达时会重新折行，
     那一刻 JS 未必刚好重量过 —— 没有这条上限，卡片会当场变成 4 行、整屏高低不齐。
     有它兜底，最坏也只是暂时少一个「…」，不会多出一行。 */
  max-height: calc(3 * 1.35em + 2px);
}
.rec-cname .n-seg { display: block; }        /* 「：」后半截另起一行 */
/* 类型 · 日期：整行居中（圆点也跟着居中） */
.rec-cmeta {
  display: flex; align-items: center; justify-content: center;
  gap: 5px; font-size: 11.5px; color: var(--ink-3); text-align: center;
}
.rec-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--tc); flex: none; }

.acct-chip {
  display: flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 12px 0 6px;
  background: var(--card); border: 1px solid var(--line-2); border-radius: 999px;
  cursor: pointer; max-width: 180px;
  transition: transform var(--dur-1) ease-out, border-color var(--dur-1) ease-out;
}
.acct-chip:hover { transform: translateY(-1px); border-color: var(--ink-3); }
.acct-chip img { width: 30px; height: 30px; border-radius: 999px; object-fit: cover; background: var(--paper-2); }
.acct-chip span { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- 编辑页 ---------- */
.editor-grid {
  display: grid; grid-template-columns: 1fr; gap: var(--sp-3);
  padding-top: var(--sp-2);
}
.poster-col { display: flex; flex-direction: column; gap: var(--sp-2); }
.poster-frame {
  position: relative; width: 100%; aspect-ratio: 3 / 4;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--card); box-shadow: var(--sh-1); overflow: hidden;
}
.poster-frame img { width: 100%; height: 100%; object-fit: cover; }
.poster-empty {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 6px;
  color: var(--ink-3); font-size: 14px; letter-spacing: .18em;
  background:
    repeating-linear-gradient(45deg, rgba(222, 211, 192, .35) 0 10px, transparent 10px 20px);
}
.poster-plus { font-size: 34px; line-height: 1; color: var(--line-2); }
.poster-clear {
  position: absolute; top: 8px; right: 8px;
  width: 34px; height: 34px; border-radius: 999px;
  border: none; background: var(--scrim); color: var(--on-scrim);
  font-size: 20px; line-height: 1; cursor: pointer;
}
.poster-hint {
  margin: 6px 0 0; font-size: 11.5px; line-height: 1.6;
  color: var(--ink-3); letter-spacing: .02em;
}
.poster-tip { margin: 0; font-size: 12px; color: var(--ink-3); }
.file-btn { cursor: pointer; }

.field-col { display: flex; flex-direction: column; gap: var(--sp-4); }
.field { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fl {
  font-family: var(--font-display); font-weight: 700;
  font-size: 12px; letter-spacing: .16em; color: var(--ink-2);
  /* 行高收紧：字段标签本来是单行小字，按正文行高排会白占 ~6px。
     只压行高、不动字号 —— 编辑页字段多，整体能省下近 200px（见 dev/measure-editor.js）。 */
  line-height: 1.25;
}
.fl .req { color: var(--seal); }
/* 字段里的说明文字同样收紧行高（只作用于编辑区，不影响别处的 .hint） */
.field .hint { line-height: 1.45; }
.fi, .ft {
  width: 100%; min-height: 40px; padding: 7px 12px;
  background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r-sm);
  color: var(--ink); font-size: 15px; line-height: 1.5;
  transition: border-color var(--dur-1) ease-out, box-shadow var(--dur-1) ease-out;
}
.fi:focus, .ft:focus { outline: none; border-color: var(--seal); box-shadow: 0 0 0 3px var(--seal-focus); }
.ft { resize: vertical; min-height: 88px; }
select.fi {
  appearance: none; cursor: pointer; padding-right: 30px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%235f5449' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
}
/* 自适应宽度输入框：内容短则框短，随输入变长，最长不超过格子 */
.fi-auto { width: auto; max-width: 100%; }
.hint { margin: 0; font-size: 12px; color: var(--ink-3); }

/* 名称/书名：多行输入（回车换行），高度跟着内容长 */
.fi-multiline {
  width: 100%; max-width: 100%; min-height: 40px;
  resize: none; overflow: hidden; line-height: 1.5;
  font-family: inherit;
}

/* 段式字段：一个标题下并排几段（电视剧的「集数 / 单集片长」） */
.seg-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.seg { display: flex; align-items: center; gap: 6px; min-width: 0; }
.seg-lab { flex: none; font-size: 12px; color: var(--ink-3); letter-spacing: .04em; }

/* 书籍的副书名：书名的第二段，缩进一格挂在主书名下面 */
.sub-row {
  display: flex; align-items: center; gap: 8px;
  margin-top: 6px; padding-left: 10px;
  border-left: 2px solid var(--line-2);
}
.sub-lab {
  flex: none; font-size: 12px; color: var(--ink-3); letter-spacing: .06em;
}
.link-add {
  margin-top: 6px; padding: 2px 0; border: 0; background: none;
  color: var(--seal); font-size: 12.5px; letter-spacing: .04em; cursor: pointer;
  text-decoration: underline dotted;
}
/* 「忘记密码」：登录界面里的一行小字（两种登录方式下都露出）。
   它是**次要动作**，所以做小、做淡、不加边框；但要保住 44px 的点击高度，
   手指按不准的话就成了"点了没反应"。 */
.auth-forgot {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 44px; margin: 6px 0 2px;
  font-size: 12.5px;
}
.auth-forgot[hidden] { display: none; }
.auth-forgot .link-add { margin-top: 0; font-size: 12.5px; min-height: 44px; }
.auth-forgot .link-add:focus-visible { outline: 2px solid var(--seal); outline-offset: 2px; border-radius: 4px; }

/* 来源：下拉多选面板（比一排 chip 紧凑；别用原生 <select multiple>，它表达不了两级结构）
   触发按钮沿用 .fi 的 40px 触控高度与边框语言；面板沿用 .drop-menu 的浮层观感。 */
.src-dd { position: relative; width: 100%; max-width: 420px; }
.src-dd-trigger {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; min-height: 40px; padding: 7px 12px;
  background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r-sm);
  color: var(--ink); font-size: 15px; text-align: left; cursor: pointer;
  transition: border-color var(--dur-1) ease-out, box-shadow var(--dur-1) ease-out;
}
.src-dd-trigger:hover { border-color: var(--ink-3); }
.src-dd-trigger[aria-expanded="true"] { border-color: var(--seal); box-shadow: 0 0 0 3px var(--seal-focus); }
.src-dd-value {
  flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.src-dd-value.empty { color: var(--ink-3); }
.src-dd-caret {
  flex: none; width: 0; height: 0;
  border-left: 5px solid transparent; border-right: 5px solid transparent;
  border-top: 6px solid var(--ink-3);
  transition: transform var(--dur-1) ease-out;
}
.src-dd-trigger[aria-expanded="true"] .src-dd-caret { transform: rotate(180deg); }
.src-dd-panel {
  position: absolute; z-index: 45; top: calc(100% + 6px); left: 0; right: 0;
  max-height: min(50vh, 300px); overflow-y: auto;
  display: flex; flex-direction: column; gap: 0;
  padding: 4px; background: var(--card);
  border: 1px solid var(--line-2); border-radius: var(--r-md);
  box-shadow: var(--sh-2);
}
.src-dd-panel[hidden] { display: none; }

/* 面板里的每一行选项：整行可点，左侧一个方块勾选标记。
   行高刻意做紧凑（比表单一行的 40px 小）—— 面板里选项多时不要占掉半屏。 */
.src-chip {
  display: flex; align-items: center; gap: 8px;
  width: 100%; min-height: 32px; padding: 4px 8px;
  background: transparent; border: 0; border-radius: var(--r-sm);
  color: var(--ink-2); font-size: 14px; letter-spacing: .02em; text-align: left; cursor: pointer;
  transition: background var(--dur-1) ease-out, color var(--dur-1) ease-out;
}
.src-chip:hover { background: var(--paper-2); color: var(--ink); }
.src-chip::before {
  content: ''; flex: none; width: 15px; height: 15px;
  border: 1px solid var(--line-2); border-radius: 4px;
  background: var(--card);
  transition: border-color var(--dur-1) ease-out, background var(--dur-1) ease-out;
}
.src-chip[aria-pressed="true"] { color: var(--seal-deep); font-weight: 700; }
.src-chip[aria-pressed="true"]::before {
  border-color: var(--seal); background: var(--seal);
  box-shadow: inset 0 0 0 2px var(--card);
}
/* 子选项缩进挂在主选项下面，用发丝竖线表明层级 */
.src-chip-sub { min-height: 30px; padding: 3px 8px; font-size: 13px; }
.src-chip-sub::before { width: 13px; height: 13px; }
.src-subs {
  display: flex; flex-direction: column; gap: 0;
  margin: 0 0 1px 10px; padding-left: 8px;
  border-left: 2px solid var(--line-2);
}
/* 填写行：不带文字的复选框 + 输入框同行 —— 复选框只表示"用不用这一项" */
.src-bare-row { display: flex; align-items: center; gap: 2px; width: 100%; }
.src-chip-bare {
  flex: none; width: auto; min-width: 30px; min-height: 32px; padding: 4px;
  justify-content: center; background: transparent;
}
.src-chip-bare:hover { background: transparent; }
.src-chip-bare::before { width: 15px; height: 15px; }
.src-free { padding: 0 8px 6px; min-width: 0; }
.src-bare-row .src-free { flex: 1 1 auto; padding: 0 4px 0 0; }
.src-free-only { width: 100%; }
/* 面板底部的「编辑来源选项」 */
.src-dd-foot { border-top: 1px solid var(--line-2); margin-top: 4px; padding: 2px 4px 0; }
.src-dd-foot .link-add { margin-top: 0; font-size: 12px; }
.src-dd-foot[hidden] { display: none; }

/* 类型那一格：一个下拉面板（触发按钮与面板复用来源那套 .src-dd-* 类名，
   所以只有"宽度"和"单选标记"需要单独写）。
   原生 <select> 还在 DOM 里当状态源，只是不参与渲染。 */
.type-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.type-native { display: none; }
.type-dd { position: relative; width: 100%; max-width: 260px; }
/* 单选：把 .src-chip 左侧的方形勾选标记改成圆点，跟来源的多选区分开 */
.type-opt::before { border-radius: 50%; }

/* ---------- 选项管理（类型 / 来源） ---------- */
.opt-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.opt-row { display: flex; align-items: center; gap: 8px; }
.opt-row .fi { flex: 1 1 auto; min-width: 0; }
.opt-row .btn { flex: none; }
.opt-row .opt-tag {
  flex: none; min-width: 46px; font-size: 11.5px; color: var(--ink-3);
  letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.opt-row.off .fi { opacity: .5; text-decoration: line-through; }
.opt-row.add .opt-tag { color: var(--seal); }
.opt-add { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.opt-add .fi { flex: 1 1 auto; min-width: 0; }
.opt-add .btn { flex: none; }

/* ---------- 通用确认框 ---------- */
.sheet-narrow { max-width: 420px; }
.confirm-msg { margin: 4px 0 18px; font-size: 14.5px; line-height: 1.7; color: var(--ink-2); }
.confirm-actions { display: flex; gap: 10px; }
.confirm-actions .btn { flex: 1 1 0; }

/* ---------- 首页：批量选择 ---------- */
.sel-bar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 0 0 var(--sp-3); padding: 8px 10px;
  background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r-sm);
}
.sel-bar[hidden] { display: none; }
.sel-count { margin-right: auto; font-size: 13.5px; color: var(--ink-2); letter-spacing: .04em; }
.sel-bar .btn[disabled] { opacity: .45; pointer-events: none; }
/* 勾选标记：**只有列表视图用**，占在行的第一格、紧挨海报左边。
   缩略图视图不用它（那里改成给选中的海报蒙一层滤镜，见下）。 */
.sel-box {
  flex: none; width: 18px; height: 18px; border-radius: 5px;
  border: 1px solid var(--line-2); background: var(--card);
  display: inline-block; position: relative;
}
/* 选择模式下列表行多一格：☐ | 海报 | 主栏 | 评分 | ›
   ⚠️ 列模板必须跟着加一列 —— 否则第 5 个格子（那个 › 箭头）会掉到**下一行**，
   看起来就是行末多出一行「›」。 */
.rec-row.has-sel { grid-template-columns: auto 46px 1fr auto auto; column-gap: var(--sp-3); }
.rec-row.sel .sel-box {
  border-color: var(--seal); background: var(--seal);
  box-shadow: inset 0 0 0 2px var(--card);
}
/* 缩略图视图的选中态：海报整体蒙一层半透明滤镜（不加复选框）。
   再补一圈朱砂内描边，明确是"选中了"，而不是"这张图坏了"。 */
.rec-card { position: relative; }
.rec-card.sel .rec-cover::after {
  content: ''; position: absolute; inset: 0;
  background: var(--veil);
  box-shadow: inset 0 0 0 2px var(--seal);
}
body.sel-mode .rec-row, body.sel-mode .rec-card { cursor: pointer; }

/* ---------- 海报墙（纯享模式） ----------
   只有海报：没有小印、没有文字、没有间隙，一张挨一张拼成一整面。
   纯享 = 把工具栏与筛选也收起来，只留一条操作条（张数 / 导出 / 退出）。 */
body.wall-mode .rec-tools { display: none; }
body.wall-mode #filterChips { display: none; }
.wall-bar[hidden] { display: none; }
.wall-bar { margin: 0 0 var(--sp-3); }
/* 紧密拼合：去掉网格间隙与每张的圆角/描边；文字与小印一并隐藏。
   列宽仍由 auto-fill 决定（间隙省下来的宽度会还给列），所以海报只会更宽、不会被压小。 */
.view-grid.wall { gap: 0; }
.view-grid.wall .rec-card { gap: 0; }
.view-grid.wall .rec-cover { border-radius: 0; border: 0; }
.view-grid.wall .rec-cname,
.view-grid.wall .rec-cmeta,
.view-grid.wall .badge-first,
.view-grid.wall .badge-done { display: none; }
.view-grid.wall .rec-card:hover { transform: none; }
.view-grid.wall .rec-card:hover .rec-cover { box-shadow: none; }

/* 标记按钮：里面就是那枚「初」小印 —— 未点亮是空框，点亮就实心。
   .field 是 flex 列容器、子项默认拉伸，所以 align-self 回 start 才能保持按钮大小。 */
.first-mark {
  display: inline-grid; place-items: center;
  width: 22px; height: 22px; border-radius: 6px;
  border: 1.5px solid var(--line-2); background: transparent; color: var(--ink-3);
  font-family: var(--font-display); font-weight: 900; font-size: 15px; line-height: 1;
  padding-top: 1px;
  transition: background var(--dur-1) ease-out, border-color var(--dur-1) ease-out,
              color var(--dur-1) ease-out;
}
.first-btn.on .first-mark {
  background: var(--seal); border-color: var(--seal); color: var(--on-seal);
  box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .18);
}
.first-btn {
  align-self: flex-start;
  min-height: 40px; padding: 0 8px;
  border: 1px solid var(--line-2); border-radius: 99px;
  background: var(--card); color: var(--ink-3);
  font-family: var(--font-mono); font-size: 15px; font-weight: 700;
  letter-spacing: .06em; cursor: pointer;
  transition: color var(--dur-1) ease-out, background var(--dur-1) ease-out,
              border-color var(--dur-1) ease-out, transform var(--dur-1) var(--ease);
}
.first-btn:hover { border-color: var(--seal); color: var(--seal); }
.first-btn.on {
  background: var(--seal); border-color: var(--seal); color: var(--on-seal);
  box-shadow: 0 2px 0 var(--seal-deep);
}

.group-title {
  font-family: var(--font-display); font-weight: 700; font-size: 12px;
  letter-spacing: .22em; color: var(--ink-3);
  padding-bottom: 6px; border-bottom: 1px solid var(--line); margin: 0;
}

/* 字段网格：手机 1 列 / 平板 2 列 / 桌面 3 列（span 类控制占列）。
   行距比列距小 —— 竖排的字段多了会很占高度，横向留白则不影响版面观感。 */
.field-grid { display: grid; grid-template-columns: 1fr; gap: 9px 14px; }
.field-grid .span-2, .field-grid .span-3 { grid-column: 1 / -1; }

/* 名称搜索 */
.name-wrap { position: relative; }

/* 播客：名称栏拆成「期数 | 本期节目名称」两截。
   两个框顶端对齐，名称框内换行只会与名称框自己的左边缘对齐。 */
.name-wrap.name-split { display: flex; align-items: flex-start; gap: 8px; }
.name-wrap.name-split .fi-episode { flex: none; width: 104px; }
.name-wrap.name-split #fName { flex: 1 1 auto; min-width: 0; }
.suggest {
  position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; right: 0;
  /* 图书 + 影视混排后条目变多：给足高度、内部滚动，不裁条数 */
  max-height: min(56vh, 460px); overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r-md);
  box-shadow: var(--sh-2); padding: 6px;
}
.suggest-item {
  display: flex; gap: 12px; align-items: center; width: 100%;
  padding: 8px; border: none; background: transparent; border-radius: var(--r-sm);
  text-align: left; cursor: pointer;
  transition: background var(--dur-1) ease-out;
}
.suggest-item:hover, .suggest-item.active { background: var(--paper-2); }
.suggest-thumb {
  width: 40px; height: 56px; flex: none; object-fit: cover;
  border-radius: 3px; background: var(--paper-2);
}
.suggest-meta { min-width: 0; }
.suggest-title { font-family: var(--font-display); font-weight: 700; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.suggest-sub { font-size: 12px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.suggest-empty { padding: 14px 10px; font-size: 13px; color: var(--ink-3); }
.suggest-loading { padding: 14px 10px; font-size: 13px; color: var(--ink-3); }

.kind-badge {
  display: inline-block; margin-left: 6px; padding: 1px 6px;
  font-size: 11px; letter-spacing: .06em; border-radius: 999px;
  background: var(--seal-soft); color: var(--seal-deep);
}

/* 标签气泡 */
/* 标签：一行里「胶囊在前 + 输入框在后」。
   胶囊是插在输入框前面的，所以每加一个标签，输入框就被挤短一截（flex 自动让位）；
   挤到放不下时整行换行（胶囊留在上一行，输入框落到下一行）。 */
.tag-field { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; width: 100%; }
.tag-ip { flex: 1 1 130px; min-width: 96px; }
.tag-add { flex: none; min-height: 40px; padding: 0 12px; border: 1px dashed var(--line-2); border-radius: var(--r-sm); background: transparent; cursor: pointer; color: var(--ink-2); white-space: nowrap; }
.tag-add:hover { border-color: var(--seal); color: var(--seal); }
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: 999px;
  font-size: 13px; line-height: 1.4; border: 1px solid transparent;
}
.pill button {
  border: none; background: transparent; cursor: pointer;
  font-size: 15px; line-height: 1; padding: 0; opacity: .65;
}
.pill button:hover { opacity: 1; }

/* 评分 */
.stars { display: flex; align-items: center; gap: 2px; }
.star {
  width: 36px; height: 36px; border: none; background: transparent; cursor: pointer;
  font-size: 23px; line-height: 1; color: var(--ghost); padding: 0;
  transition: transform var(--dur-1) ease-out, color var(--dur-1) ease-out;
}
.star:hover { transform: scale(1.12); }
.star.on { color: var(--seal); }
.rating-num { margin-left: 10px; font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--seal-deep); }
.star-clear { border: none; background: transparent; color: var(--ink-3); font-size: 13px; cursor: pointer; margin-left: 6px; text-decoration: underline; }

/* ---------- 弹层 ---------- */
.overlay {
  position: fixed; inset: 0; z-index: 60;
  background: var(--scrim-2);
  backdrop-filter: blur(3px);
  display: flex; align-items: flex-end; justify-content: center;
  padding: 0;
  animation: fade var(--dur-2) var(--ease);
}
.sheet {
  position: relative;
  width: 100%; max-width: 520px; max-height: 92vh; overflow-y: auto;
  background: var(--card); color: var(--ink);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  padding: clamp(22px, 4vw, 34px);
  box-shadow: var(--sh-3);
  animation: rise var(--dur-3) var(--ease);
}
.sheet-narrow { max-width: 420px; }
.sheet-wide { max-width: 640px; }
.sheet-x { position: absolute; top: 10px; right: 10px; }
.sheet-title { margin: 0 0 4px; font-family: var(--font-display); font-weight: 900; font-size: 26px; letter-spacing: .04em; }
.sheet-sub { margin: 0 0 var(--sp-5); font-size: 13px; color: var(--ink-3); }
.row-2 { display: flex; gap: var(--sp-3); align-items: flex-end; }
.grow { flex: 1; min-width: 0; }
.alert { margin: var(--sp-3) 0 0; min-height: 20px; font-size: 13px; color: var(--seal-deep); }
.alert.ok { color: var(--jade); }
.divider {
  display: flex; align-items: center; gap: 12px;
  margin: var(--sp-5) 0 var(--sp-3);
  font-size: 12px; letter-spacing: .24em; color: var(--ink-3);
}
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.acct-head { display: flex; gap: var(--sp-4); align-items: center; }
.avatar-big {
  width: 74px; height: 74px; flex: none; border-radius: 999px;
  background: var(--paper-2); border: 1px solid var(--line);
  display: grid; place-items: center; overflow: hidden;
  font-family: var(--font-display); font-weight: 900; font-size: 30px; color: var(--seal);
}
.avatar-big img { width: 100%; height: 100%; object-fit: cover; }
.acct-head-right { flex: 1; min-width: 0; }
.acct-mail { margin: var(--sp-3) 0 0; font-size: 13px; color: var(--ink-3); word-break: break-all; }
.sync-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.sync-count { font-family: var(--font-display); font-weight: 700; font-size: 16px; }
.batch-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }

.share-box {
  margin: var(--sp-4) 0; max-height: 60vh; overflow-y: auto;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--paper-2);
  padding: 8px;
}
.share-box canvas, .share-box img { width: 100%; height: auto; border-radius: 4px; }
.share-actions { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }

/* 分享主题选择 */
.theme-chips {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
  margin-top: var(--sp-4);
}
.theme-chip {
  display: flex; align-items: center; gap: 8px;
  min-height: 40px; padding: 4px 10px;
  background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r-sm);
  cursor: pointer; font-size: 14px; letter-spacing: .08em;
  transition: border-color var(--dur-1) ease-out, box-shadow var(--dur-1) ease-out, transform var(--dur-1) ease-out;
}
.theme-chip:hover { transform: translateY(-1px); border-color: var(--ink-3); }
.theme-chip.on { border-color: var(--seal); box-shadow: 0 0 0 2px var(--seal-focus-2); }
.chip-sw { display: inline-flex; flex: none; }
.chip-sw i {
  width: 14px; height: 14px; border-radius: 999px;
  border: 1px solid var(--hair); margin-left: -5px;
}
.chip-sw i:first-child { margin-left: 0; }
.chip-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 分享面板：名称字号滑杆 */
.share-tools {
  display: flex; align-items: center; gap: 12px;
  margin: 4px 0 var(--sp-4);
  padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--card-glass-2);
}
.share-tools + .share-tools { margin-top: -10px; }
.st-lab { flex: none; font-size: 12px; letter-spacing: .08em; color: var(--ink-2); }
.st-val {
  flex: none; min-width: 46px; text-align: right;
  font-size: 12.5px; color: var(--seal-deep); font-variant-numeric: tabular-nums;
}
.share-tools input[type="range"] {
  flex: 1 1 auto; min-width: 0; height: 26px;
  appearance: none; background: transparent; cursor: pointer;
}
.share-tools input[type="range"]::-webkit-slider-runnable-track {
  height: 4px; border-radius: 99px; background: var(--paper-2);
}
.share-tools input[type="range"]::-webkit-slider-thumb {
  appearance: none; width: 18px; height: 18px; margin-top: -7px;
  border-radius: 50%; background: var(--seal); border: 2px solid var(--card);
  box-shadow: 0 1px 3px rgba(74, 56, 36, .28);
}
.share-tools input[type="range"]::-moz-range-track {
  height: 4px; border-radius: 99px; background: var(--paper-2);
}
.share-tools input[type="range"]::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 50%; background: var(--seal);
  border: 2px solid var(--card);
}

/* ---------- 反馈 ---------- */
.toast {
  position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 20px);
  z-index: 90; max-width: 90vw;
  padding: 12px 22px; border-radius: 999px;
  background: var(--ink); color: var(--inverse-ink); font-size: 14px; letter-spacing: .04em;
  box-shadow: var(--sh-2); opacity: 0; pointer-events: none;
  transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.busy {
  position: fixed; inset: 0; z-index: 95;
  background: var(--bar-glass); backdrop-filter: blur(2px);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  font-size: 14px; color: var(--ink-2); letter-spacing: .08em;
}
.spinner {
  width: 34px; height: 34px; border-radius: 999px;
  border: 3px solid var(--line-2); border-top-color: var(--seal);
  animation: spin .8s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes fade { from { opacity: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(28px); } }

/* ---------- 入场序列 ---------- */
.reveal { opacity: 0; transform: translateY(18px); }
.reveal.in { opacity: 1; transform: none; transition: opacity var(--dur-3) var(--ease), transform var(--dur-3) var(--ease); }
.reveal:nth-child(1) { transition-delay: 60ms; }
.reveal:nth-child(2) { transition-delay: 140ms; }
.reveal:nth-child(3) { transition-delay: 220ms; }
.reveal:nth-child(4) { transition-delay: 300ms; }

/* ---------- 响应式：平板 ---------- */
@media (min-width: 700px) {
  .overlay { align-items: center; padding: var(--sp-5); }
  .sheet { border-radius: var(--r-lg); max-height: 88vh; }
  .field-grid { grid-template-columns: repeat(2, 1fr); gap: 10px 16px; }
}

/* ---------- 响应式：桌面 ---------- */
@media (min-width: 1024px) {
  /* 右栏加宽（原 1.15fr / .85fr）：展区要放下放大后的饼图与两侧说明，
     左栏只是一行大标题，本来就吃不满宽度。 */
  /* 两栏对调：展区在左（给宽的那一栏）、刊头 + 按钮在右。
     用 order 换位而不是改 DOM —— 手机上单栏时仍是「标题 → 按钮 → 展区」的阅读顺序。 */
  .home-main {
    grid-template-columns: 1.12fr .88fr;
    gap: var(--sp-7);
    align-items: stretch;      /* 两栏等高：按钮才能贴着栏底 */
  }
  .home-side { order: 1; }
  .hero { order: 2; }
  /* 左栏竖排 + 按钮 margin-top:auto → 按钮被推到该栏底部，
     下缘与右侧展区卡片的下缘齐平（原来 align-items:start 时按钮紧跟着横线）。 */
  .hero { display: flex; flex-direction: column; }
  .home-actions { margin-top: auto; padding-top: var(--sp-5); }
  /* 右栏**不再下沉**：原来那句 .home-side{margin-top:84px}（为破格交错）已按要求去掉，
     现在展区顶部与左边「ZHAOHUA · XISHI」那一行齐平。 */
  .editor-grid { grid-template-columns: 260px 1fr; gap: var(--sp-6) var(--sp-7); align-items: start; }
  .poster-col { position: sticky; top: 24px; }
  .field-grid { grid-template-columns: repeat(3, 1fr); gap: 11px 18px; }
  .field-grid .span-2 { grid-column: span 2; }
  .field-grid .span-3 { grid-column: 1 / -1; }
  .sync-row { max-width: none; }
}

@media (max-width: 480px) {
  .btn-xl { width: 100%; }
  .batch-grid { grid-template-columns: 1fr; }
  .theme-chips { grid-template-columns: repeat(2, 1fr); }
  .topbar { flex-wrap: wrap; }
}

/* ---------- 富文本编辑器（感想 / 笔记） ---------- */
.rte {
  position: relative;
  border: 1px solid var(--line-2); border-radius: var(--r-sm);
  background: var(--card);
  transition: border-color var(--dur-1) ease-out, box-shadow var(--dur-1) ease-out;
}
.rte:focus-within { border-color: var(--seal); box-shadow: 0 0 0 3px var(--seal-focus); }
.rte-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  padding: 6px 8px;
  background: var(--rte-glass);
  border-bottom: 1px solid var(--line);
  border-radius: var(--r-sm) var(--r-sm) 0 0;
}
.rt-btn {
  min-width: 30px; height: 30px; padding: 0 8px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-2); border-radius: 6px;
  background: var(--card); color: var(--ink-2);
  font-size: 14px; line-height: 1; cursor: pointer;
  transition: color var(--dur-1) ease-out, border-color var(--dur-1) ease-out;
}
.rt-btn:hover { border-color: var(--ink-3); color: var(--ink); }
.rt-btn.on { border-color: var(--seal); color: var(--seal); }
.rt-b { font-family: var(--font-display); font-weight: 900; }
.rt-i { font-style: italic; font-family: var(--font-display); }
.rt-u { text-decoration: underline; }
.rt-s { text-decoration: line-through; }
.rt-txt { font-size: 12px; letter-spacing: .06em; }
.rt-color { border-bottom: 2px solid var(--seal); }
.rt-sel {
  height: 30px; padding: 0 22px 0 8px;
  border: 1px solid var(--line-2); border-radius: 6px; background-color: var(--card);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%235f5449' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 7px center;
  appearance: none; font-size: 13px; color: var(--ink); cursor: pointer;
}
.rt-info { margin-left: auto; font-size: 11px; letter-spacing: .06em; color: var(--ink-3); }
.rt-info.full { color: var(--seal); }

/* 网络图片地址输入条 */
.rt-urlrow {
  display: flex; gap: 6px; align-items: center;
  padding: 8px 10px 2px;
}
.rt-urlrow[hidden] { display: none; }
.rt-urlin {
  flex: 1 1 auto; min-width: 0; height: 30px; padding: 0 10px;
  border: 1px solid var(--line-2); border-radius: 6px;
  background: var(--card); color: var(--ink); font-size: 13px;
  font-family: inherit;
}
.rt-urlin:focus { outline: none; border-color: var(--seal); }
.rt-urlgo { color: var(--seal); border-color: var(--seal); }
.rt-swatches {
  position: absolute; z-index: 40; top: 40px; left: 8px;
  display: none; grid-template-columns: repeat(6, 1fr); gap: 6px;
  padding: 8px; background: var(--card);
  border: 1px solid var(--line-2); border-radius: var(--r-md); box-shadow: var(--sh-2);
}
.rt-swatches.show { display: grid; }
.rt-sw {
  width: 22px; height: 22px; padding: 0; border-radius: 999px;
  border: 1px solid var(--hair); cursor: pointer;
  transition: transform var(--dur-1) ease-out;
}
.rt-sw:hover { transform: scale(1.15); }

/* ---------- 字号面板（作用于「选中的那一段」） ---------- */
.rt-size { font-size: 12px; letter-spacing: .04em; }
.rt-size.has { border-color: var(--seal); color: var(--seal); }
.rt-sizes {
  position: absolute; z-index: 41; top: 40px; left: 8px;
  display: none; width: 272px; padding: 10px 10px 8px;
  background: var(--card); border: 1px solid var(--line-2);
  border-radius: var(--r-md); box-shadow: var(--sh-2);
}
.rt-sizes.show { display: block; }
.rt-sz-top { display: flex; align-items: center; gap: 8px; }
.rt-sz-range {
  flex: 1 1 auto; min-width: 0; height: 24px;
  appearance: none; background: transparent; cursor: pointer;
}
.rt-sz-range::-webkit-slider-runnable-track { height: 4px; border-radius: 99px; background: var(--paper-2); }
.rt-sz-range::-webkit-slider-thumb {
  appearance: none; width: 16px; height: 16px; margin-top: -6px;
  border-radius: 50%; background: var(--seal); border: 2px solid var(--card);
}
.rt-sz-range::-moz-range-track { height: 4px; border-radius: 99px; background: var(--paper-2); }
.rt-sz-range::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--seal); border: 2px solid var(--card); }
.rt-sz-range:focus-visible { outline: 2px solid var(--seal); outline-offset: 2px; }
.rt-sz-range:disabled { opacity: .5; cursor: default; }
.rt-sz-val {
  flex: none; min-width: 46px; text-align: right;
  font-size: 12.5px; color: var(--seal-deep); font-variant-numeric: tabular-nums;
}
.rt-sz-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.rt-sz-chip {
  min-width: 34px; height: 24px; padding: 0 6px;
  border: 1px solid var(--line-2); border-radius: 6px;
  background: var(--card); color: var(--ink-2); font-size: 12px;
  font-variant-numeric: tabular-nums; cursor: pointer;
  transition: color var(--dur-1) ease-out, border-color var(--dur-1) ease-out;
}
.rt-sz-chip:hover:not(:disabled) { border-color: var(--seal); color: var(--seal); }
.rt-sz-chip:focus-visible { outline: 2px solid var(--seal); outline-offset: 2px; }
.rt-sz-chip:disabled { opacity: .45; cursor: default; }
.rt-sz-foot {
  display: flex; align-items: center; gap: 8px;
  margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line);
}
.rt-sz-reset {
  height: 24px; padding: 0 8px;
  border: 1px solid var(--line-2); border-radius: 6px;
  background: transparent; color: var(--seal-deep); font-size: 12px; cursor: pointer;
}
.rt-sz-reset:hover:not(:disabled) { border-color: var(--seal); }
.rt-sz-reset:focus-visible { outline: 2px solid var(--seal); outline-offset: 2px; }
.rt-sz-reset:disabled { opacity: .45; cursor: default; color: var(--ink-3); border-style: dashed; }
.rt-sz-hint { font-size: 11.5px; color: var(--ink-3); }

/* 正文排版：无缩进、两端对齐、段后 6px、单倍行距 */
.rte-body {
  position: relative;
  min-height: 150px; padding: 12px 14px;
  /* 由字号条按比例设 --rte-px（见 app.js 的 applyRichPreview）：编辑区始终保持可编辑，
     真正输出的字号在长图里按记录存的值来 */
  font-size: var(--rte-px, 15px); line-height: 1; outline: none;
  text-align: justify; text-indent: 0;
  word-break: break-word; overflow-x: hidden;
}
.rte-body.is-empty::before {
  content: attr(data-ph);
  position: absolute; left: 14px; top: 12px;
  color: var(--ink-3); opacity: .65; pointer-events: none;
}
.rte-body h1, .rte-body h2, .rte-body h3, .rte-body h4 {
  font-family: var(--font-display); font-weight: 700; line-height: 1.35; margin: .5em 0 .3em;
}
.rte-body h1 { font-size: 1.5em; }
.rte-body h2 { font-size: 1.3em; }
.rte-body h3 { font-size: 1.16em; }
.rte-body h4 { font-size: 1.05em; }
.rte-body p, .rte-body div { margin: 0 0 6px; text-indent: 0; }
.rte-body hr { border: 0; border-top: 1px solid var(--line-2); margin: 14px 0; }
.rte-body figure.rt-fig { margin: 14px 0; }
/* 与长图保持一致：只缩不放，小图居中不拉伸 */
.rte-body img.rt-img {
  display: block; max-width: 100%; height: auto; border-radius: 6px;
  margin-left: auto; margin-right: auto;
  border: 1px solid var(--line); cursor: pointer;
  transition: box-shadow var(--dur-1) ease-out;
}
.rte-body img.rt-img:hover { box-shadow: 0 0 0 2px var(--seal-focus-3); }
/* 网络图片正在取回 / 取回失败 */
.rte-body img.rt-loading { min-height: 46px; opacity: .35; background: var(--paper-2); }
.rte-body img[data-failed] { box-shadow: inset 0 0 0 1px #c25f26; }
/* 图片说明：不是正文 —— 更小、更淡、加字距、居中 */
.rte-body figcaption.rt-cap {
  margin-top: 5px; text-align: center; outline: none;
  font-size: 12px; line-height: 1.5; letter-spacing: .05em;
  color: var(--ink-3); opacity: .78;
}
.rte-body figcaption.rt-cap:empty::before { content: attr(data-ph); opacity: .7; }

/* 长图渲染用的离屏容器（样式与编辑区保持一致） */
.rt-host { position: fixed; left: -9999px; top: 0; }
/* 单倍行距时西文下伸部会略微超出盒子，留 6px 内边距免得进 canvas 被裁（透明边最后会被 trim 掉） */
.rt-render { font-size: 26px; line-height: 1; text-align: justify; text-indent: 0; padding: 6px 0; }
.rt-render p, .rt-render div { margin: 0 0 6px; text-indent: 0; }
.rt-render h1, .rt-render h2, .rt-render h3, .rt-render h4 { font-weight: 700; line-height: 1.3; margin: .4em 0 .2em; }
.rt-render h1 { font-size: 1.5em; }
.rt-render h2 { font-size: 1.3em; }
.rt-render h3 { font-size: 1.16em; }
.rt-render h4 { font-size: 1.05em; }
.rt-render hr { border: 0; border-top: 2px solid currentColor; opacity: .35; margin: 16px 0; }
.rt-render figure { margin: 18px 0; }
/* 原尺寸显示（只缩不放），窄图居中，细节不丢 */
.rt-render img { display: block; max-width: 100%; height: auto; border-radius: 8px; margin-left: auto; margin-right: auto; }
/* 图片说明同样区别于正文：.58em（正文 1em）+ 弱化 + 字距 */
.rt-render figcaption {
  text-align: center; font-size: .58em; line-height: 1.5;
  letter-spacing: .06em; opacity: .62; margin-top: 7px;
}

/* 右键菜单 */
.rt-menu {
  position: fixed; z-index: 120; min-width: 132px; padding: 6px;
  background: var(--card); border: 1px solid var(--line-2);
  border-radius: var(--r-sm); box-shadow: var(--sh-2);
}
.rt-menu-item {
  display: block; width: 100%; padding: 8px 12px;
  border: none; background: transparent; border-radius: 6px;
  text-align: left; font-size: 14px; color: var(--ink); cursor: pointer;
}
.rt-menu-item:hover { background: var(--paper-2); }
.rt-menu-item.danger { color: var(--seal-deep); }

/* ---------- 图片编辑器 ---------- */
.sheet-img { max-width: 780px; }
.ie-stage {
  display: flex; align-items: center; justify-content: center;
  padding: 12px; overflow: hidden; max-height: 54vh;
  background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r-md);
}
.ie-wrap { position: relative; display: inline-block; line-height: 0; touch-action: none; }
.ie-wrap img {
  display: block; width: auto; height: auto;
  max-width: 100%; max-height: 44vh; user-select: none; -webkit-user-drag: none;
}
.ie-crop {
  position: absolute; border: 1px solid #fffdf8;
  box-shadow: 0 0 0 9999px rgba(24, 20, 16, .45);
  cursor: move;
}
.ie-h {
  position: absolute; width: 14px; height: 14px;
  background: var(--card); border: 2px solid var(--seal); border-radius: 3px;
}
.ie-h[data-k="nw"] { left: -8px; top: -8px; cursor: nwse-resize; }
.ie-h[data-k="ne"] { right: -8px; top: -8px; cursor: nesw-resize; }
.ie-h[data-k="sw"] { left: -8px; bottom: -8px; cursor: nesw-resize; }
.ie-h[data-k="se"] { right: -8px; bottom: -8px; cursor: nwse-resize; }
.ie-grid { display: flex; flex-direction: column; gap: 10px; margin: var(--sp-4) 0; }
.ie-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ie-lab {
  width: 56px; flex: none;
  font-family: var(--font-display); font-weight: 700; font-size: 12px;
  letter-spacing: .16em; color: var(--ink-2);
}
.ie-row input[type="range"] { flex: 1; min-width: 120px; accent-color: var(--seal); }
.ie-row .fi { flex: 1; min-width: 160px; }
.ie-val { width: 48px; flex: none; text-align: right; font-size: 13px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.ie-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.grow-1 { flex: 1; }
.ie-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- 降级动效 ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}