/* ===== S · 层次光影设计系统 =====
   设计原则：
   1) 中性优先——极浅灰页面底（L0）+ 纯白内容面（L1），文字走「近黑 / 中灰 / 浅灰」三级灰阶；
   2) 层级靠「明度 + 光影」共同表达：页面底(L0) → 内容卡(L1) → 吸顶栏(L2) → 浮层(L3)，
      每层差一档明度，并配一档投影（--shadow-1..4）。投影一律「近距细影定形 + 远距弥散影定层次」双层叠加；
   3) 单一强调色 = 蓝 #2f7cf6（比 v4 提亮一档，用户反馈"app 内蓝色太深"）：选中态、主按钮、已完成勾选、图标容器统一走蓝，不引入第二主色；
   4) 功能色仅保留两处：--danger（删除/错误）与 --mark（正文标记），其余全部灰度；
   5) 材质：吸顶栏 / 弹层用半透明 + backdrop 毛玻璃（--glass / --blur），浅面统一加顶部内高光（--inner-hi），
      凹面（输入框 / 槽）加内阴影（--inset-1）；
   6) 图标走 macOS / SF Symbols 语言：一律 24×24 网格、圆头圆角、currentColor，分两种分工——
      「容器图标」（底栏 tab / 分类 / 空态）用**实心剪影**，容器是唯一轮廓，细节用 --glyph-cut 挖空；
      「内联图标」（关闭 / 删除 / 展开 / 工具条）用**线性描边**。
      描边宽度恒等于 --icon-w 指定的**物理像素**，不随图标尺寸缩放（见下方「图标底层规则」）。 */
/* ===== 主题化架构（2026-09-28）=====
   两套**金属**主题，切换 html[data-theme] 即可，组件规则完全不感知主题：
     anodized · 阳极氧化蓝（浅色金属，默认；整片浅底带冷蓝调，品牌蓝做高光与强调）
     titanium · 深空钛（深色金属；强调色走**铂金**——见下方说明）
   金属感的三个来源（缺一不可）：
     ① --*-metal 里的**多段交替**线性渐变（亮—暗—亮—暗）——模拟金属对环境的多次反射，
        单层双色渐变只会得到"塑料感"，这是扁平与金属的根本分野；
     ② --brushed 细密横向拉丝（repeating-linear-gradient，周期 2px）；
     ③ --inner-hi 的**上缘高光 + 下缘暗线**双值——受光面与背光面同时存在才有立体感。
   ⚠️ 供 SVG stroke 当"颜色"用的 token（--panel / --tile-bg / --accent / --glyph-cut）
      **必须保持纯色**，绝不能改成渐变：.ico-cut 是靠"用容器底色画线"来挖空的，
      半透明或渐变会让挖空失效。所以渐变一律走独立的 --*-metal / --*-bg 变量。
   ⚠️ 填充色块上的前景（勾、加号、按钮字）一律走 --on-accent，**不要写死 #fff**：
      浅色主题的强调块是深蓝底、深空钛的强调块是亮铂金底，两者的前景必须是反的。
   新增主题 = 再写一个 html[data-theme="x"] 块，不需要动下面任何一条组件规则。 */
/* ══════════ anodized · 阳极氧化蓝（默认主题）══════════
   手机背板阳极氧化铝的观感：整片浅底带一层很淡的**冷蓝**，
   高光更亮、暗部更深（对比度比"银铝"大一档），强调色用品牌蓝做高光边。 */
:root {
  /* —— 形状 / 字体（与主题无关）—— */
  --radius: 12px;
  --radius-sm: 9px;
  --radius-lg: 16px;
  --font: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", "Microsoft YaHei", sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "PingFang SC", monospace;
  --tile-sm: 24px; --tile-sm-r: 7px;
  --tile-md: 28px; --tile-md-r: 9px;
  --tile-lg: 64px; --tile-lg-r: 19px;
  --cut-w: 2.2;
  /* 知识库正文排版基准：正文 = --kb-fs-body；来源站的小字注抬到 --kb-fs-small。
     与下面 .kb-detail-content / .kb-detail-content h1–h4 的取值联动，改一处要一起看。 */
  --kb-fs-body: 18px;
  --kb-fs-small: 15px;

  /* —— 正文调色板（知识库正文「字体颜色」工具条）——
     取「浅色主题下直接可读」的原色；深空钛下换成同色系亮版本（见下个块）。
     ⚠️ 这 6 个值同时被工具条色块（index.html 内联 background）与
        正文里已落库的 <font color="#xxxxxx"> 归一规则引用，改色要三处同步。 */
  --kb-c-default: #5b6472;
  --kb-c-red: #e5484d;
  --kb-c-orange: #f59e0b;
  --kb-c-green: #16a34a;
  --kb-c-blue: #2563eb;
  --kb-c-purple: #7c3aed;

  color-scheme: light;

  /* 表面与灰阶：越靠上越亮，明度差即层级（整体带冷蓝调） */
  --bg: #e8eef8;
  --panel: #fbfdff;
  --panel-2: #eaf1fb;
  --panel-3: #dfe8f6;
  --text: #14171d;
  --text-2: #5b6b83;
  --text-3: #8492a8;
  --border: rgba(80,120,180,.26);
  --border-strong: rgba(80,120,180,.42);

  /* 强调色（单一主色，不引入第二主色） */
  --accent: #2f7cf6;
  --accent-hover: #1f6eea;
  --accent-soft: rgba(47,124,246,.10);
  --accent-text: #1f6eea;
  --on-accent: #ffffff;          /* 强调块上的前景（勾 / 加号 / 按钮字） */

  /* 底部导航 */
  --tab-inactive: #8492a8;
  --tab-active: #2f7cf6;

  /* 功能色：全站仅 --danger 与 --mark 两处非灰 */
  --danger: #d93a2b;
  --danger-soft: #fdeceb;
  --mark: #d93a2b;
  --mark-bg: #dbe4f1;
  --done: #9aa6b8;

  /* 光影：近距细影定「形」+ 远距弥散影定「层次」，两层叠加才有材质感 */
  --shadow-1: 0 1px 2px rgba(16,24,40,.08), 0 1px 1px rgba(16,24,40,.05);
  --shadow-2: 0 1px 2px rgba(16,24,40,.07), 0 4px 10px -2px rgba(16,24,40,.11);
  --shadow-3: 0 2px 6px rgba(16,24,40,.08), 0 12px 28px -8px rgba(16,24,40,.17);
  --shadow-4: 0 4px 12px rgba(16,24,40,.12), 0 28px 60px -18px rgba(16,24,40,.28);
  --shadow-accent: 0 1px 2px rgba(24,90,200,.32), 0 10px 24px -6px rgba(24,90,200,.46);
  --shadow-sm: var(--shadow-1);
  --shadow-md: var(--shadow-2);
  /* 金属面的受光/背光：上缘一条高光 + 下缘一条暗线（一凸一凹） */
  --inner-hi: inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(20,50,110,.06);
  --inner-hi-dark: inset 0 1px 0 rgba(255,255,255,.45), inset 0 -1px 0 rgba(0,0,0,.14);
  --inset-1: inset 0 1.5px 2.5px rgba(20,50,110,.13);

  /* 材质：吸顶栏 / 弹层的毛玻璃 */
  --glass: rgba(247,251,255,.74);
  --glass-strong: rgba(247,251,255,.90);
  --blur: saturate(180%) blur(20px);

  /* 图标容器（--tile-bg 同时是 .ico-cut 的挖空色 → 必须不透明） */
  --tile-bg: #e6efff;
  --tile-bg-hover: #d6e6fd;
  --tile-fg: #2f7cf6;
  --tile-border: rgba(47,124,246,.28);

  /* 聚焦环（曾硬编码为旧主题蓝，必须随主题走） */
  --focus-glow: rgba(47,124,246,.16);
  --focus-glow-2: rgba(47,124,246,.28);

  /* 杂项（原为硬编码浅色，暗色主题下会穿帮 → 一律 token 化） */
  --hover-tint: rgba(255,255,255,.85);
  --float-bg: rgba(252,254,255,.78);
  --scrim: rgba(14,20,32,.34);
  --toast-bg: #1e222b;
  --toast-fg: #ffffff;
  --scroll-track: rgba(20,50,110,.05);
  --sw-border: rgba(20,50,110,.14);

  /* ═══ 金属材质（背景专用）═══ */
  --brushed: repeating-linear-gradient(90deg,
      rgba(255,255,255,.30) 0 1px, rgba(90,120,165,.045) 1px 2px);
  --bg-grad: var(--brushed),
      linear-gradient(180deg, #eef4fd 0%, #e2eaf7 58%, #d3dff0 100%);
  --panel-metal: var(--brushed),
      linear-gradient(180deg, #ffffff 0%, #f0f6fe 32%, #fbfdff 52%, #e7effb 74%, #f4f9fe 100%);
  --panel-metal-3: linear-gradient(180deg, rgba(20,50,110,.06) 0%, rgba(255,255,255,.78) 100%);
  --tile-metal: linear-gradient(180deg,
      rgba(255,255,255,.92) 0%, rgba(255,255,255,0) 58%, rgba(20,50,110,.06) 100%);
  --accent-bg: linear-gradient(180deg, #63a3ff 0%, #2f7cf6 42%, #175fd6 100%);
  --accent-hover-bg: linear-gradient(180deg, #74aeff 0%, #3d88f8 42%, #1f6ae0 100%);
}

/* ══════════ titanium · 深空钛（深色金属）══════════
   只覆盖取值，不新增任何选择器；组件层完全复用。
   ⚠️ 强调色在深空钛下**不是蓝**，是铂金（中性亮金属）：
      整块界面已经是中性金属灰，蓝色会是全站唯一的彩色，读起来"不搭"。
      所以选中态 / 主按钮 / 勾选块改「亮金属块 + 深色前景」（--on-accent 翻转），
      功能性提示色仍保留（--danger / --mark 红）。 */
html[data-theme="titanium"] {
  color-scheme: dark;

  /* 深空钛下正文调色板换成同色系亮版本（原色压在深底上读不了） */
  --kb-c-default: #b6bfcd;
  --kb-c-red: #ff7b7b;
  --kb-c-orange: #ffc247;
  --kb-c-green: #4ade80;
  --kb-c-blue: #6aa9ff;
  --kb-c-purple: #b18cff;

  --bg: #23262b;
  --panel: #373c44;
  --panel-2: #41464f;
  --panel-3: #2a2e35;
  --text: #eef1f6;
  --text-2: #a7afbb;
  --text-3: #79818e;
  --border: rgba(168,180,196,.15);
  --border-strong: rgba(168,180,196,.30);

  --accent: #d8dee8;
  --accent-hover: #e9edf3;
  --accent-soft: rgba(216,222,232,.12);
  --accent-text: #cfd7e3;
  --on-accent: #1c1f25;

  --tab-inactive: #79818e;
  --tab-active: #e2e7ef;

  --danger: #e5484d;
  --danger-soft: rgba(229,72,77,.18);
  --mark: #e5484d;
  --mark-bg: rgba(206,216,230,.22);
  --done: #6b7280;

  --shadow-1: 0 1px 2px rgba(0,0,0,.36), 0 1px 1px rgba(0,0,0,.26);
  --shadow-2: 0 1px 2px rgba(0,0,0,.34), 0 4px 10px -2px rgba(0,0,0,.46);
  --shadow-3: 0 2px 6px rgba(0,0,0,.36), 0 12px 28px -8px rgba(0,0,0,.60);
  --shadow-4: 0 4px 12px rgba(0,0,0,.46), 0 28px 60px -18px rgba(0,0,0,.76);
  --shadow-accent: 0 1px 2px rgba(0,0,0,.42), 0 10px 24px -6px rgba(0,0,0,.55);
  --inner-hi: inset 0 1px 0 rgba(255,255,255,.075), inset 0 -1px 0 rgba(0,0,0,.34);
  /* 强调块是亮金属 → 它的内缘要"上亮下暗"（与浅色主题同一套方向） */
  --inner-hi-dark: inset 0 1px 0 rgba(255,255,255,.60), inset 0 -1px 0 rgba(0,0,0,.22);
  --inset-1: inset 0 1.5px 3px rgba(0,0,0,.46);

  --glass: rgba(50,55,64,.76);
  --glass-strong: rgba(50,55,64,.92);
  --blur: saturate(160%) blur(20px);

  /* 图标容器：原先带蓝调（#2f3a48 / #6ba6ff），在中性钛面上是唯一的蓝 → 去蓝改中性银灰 */
  --tile-bg: #3c4149;
  --tile-bg-hover: #484e57;
  --tile-fg: #c6cdd8;
  --tile-border: rgba(190,203,220,.20);

  --focus-glow: rgba(206,216,230,.16);
  --focus-glow-2: rgba(206,216,230,.28);

  --hover-tint: rgba(255,255,255,.07);
  --float-bg: rgba(56,61,71,.82);
  --scrim: rgba(6,7,9,.58);
  --toast-bg: #eef1f6;
  --toast-fg: #20232a;
  --scroll-track: rgba(255,255,255,.04);
  --sw-border: rgba(255,255,255,.26);

  --brushed: repeating-linear-gradient(90deg,
      rgba(255,255,255,.032) 0 1px, rgba(0,0,0,.05) 1px 2px);
  --bg-grad: var(--brushed),
      linear-gradient(180deg, #2e323a 0%, #20232a 100%);
  --panel-metal: var(--brushed),
      linear-gradient(180deg, #41464f 0%, #363b43 32%, #3d424b 52%, #32363e 74%, #3c4149 100%);
  --panel-metal-3: linear-gradient(180deg, rgba(0,0,0,.32) 0%, rgba(255,255,255,.05) 100%);
  --tile-metal: linear-gradient(180deg,
      rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 55%, rgba(0,0,0,.18) 100%);
  --accent-bg: linear-gradient(180deg, #f2f5f9 0%, #d5dbe5 44%, #b2bbc8 100%);
  --accent-hover-bg: linear-gradient(180deg, #ffffff 0%, #e3e8f0 44%, #c3cbd7 100%);
}

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

/* ===== 图标底层规则（全站图标的总闸，改图标先看这里）=====
   血坑：SVG 的 stroke-width 是 **viewBox 单位**，会随图标显示尺寸等比缩小。
   同一句 stroke-width="1.6" 在 30px 空态图标上是 2.0px，落到 14px 分类图标只剩 0.93px
   —— 2x 屏上不足半个物理像素，于是发虚、发灰，跟旁边 600 字重的标题完全不成比例。
   修法：给所有图形元素开 non-scaling-stroke，描边宽度恒等于 CSS px（与图标尺寸解耦），
   再由 --icon-w 按用途下发档位（1.7 内联 / 1.9 工具条 / 2.2 小号强调 / 2.8 勾）。
   ⚠️ 内联 stroke-width 属性的优先级低于任何 CSS 规则，所以这里能统一覆盖，不必逐处删属性。 */
svg path, svg circle, svg rect, svg ellipse, svg line, svg polyline, svg polygon {
  vector-effect: non-scaling-stroke;
}
svg { stroke-width: var(--icon-w, 1.7); }
/* 实心剪影里"挖空"出来的笔画：颜色必须等于所在容器的底色，由容器的 --glyph-cut 下发 */
.ico-cut {
  fill: none;
  stroke: var(--glyph-cut, #fff);
  stroke-width: var(--cut-w);
  stroke-linecap: round; stroke-linejoin: round;
}
/* 正文里可能嵌第三方 SVG（公众号文章），不能改它们的描边算法 */
.kb-detail-content svg, .kb-detail-content svg * { vector-effect: none; }

html, body {
  height: 100%;
  overflow: hidden; /* 整页滚动只发生在 .main 内，避免 iOS 上整体高度溢出屏幕 */
  font-family: var(--font);
  /* L0 页面底：微灰渐变固定铺底，内容面浮在其上 */
  background-color: var(--bg);
  background-image: var(--bg-grad);
  background-attachment: fixed;
  color: var(--text);
  font-size: 16px;
  line-height: 1.55;
  letter-spacing: -0.011em; /* 中文无感、西文收紧，观感更“现代” */
  -webkit-font-smoothing: antialiased;
}

.app { display: flex; height: 100vh; height: 100dvh; }

/* ===== 底部选项卡：待办 · 笔记 · 文库 · 设置 =====
   图标在上、文字在下；选中态仅变色（无背景块/方框）；整栏矮扁。
   四个按钮在同一 46px 内容带内各自垂直居中。
   Mac（桌面）端额外把四钮收进定宽网格居中——原先 flex:1 会让按钮横跨整个窗口，
   1120px 宽窗口下彼此相距数百像素，观感松散。iOS 保持整栏均分。 */
.bottom-bar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  /* 单一 panel 底色一路铺到屏幕底：home indicator 区并入整栏，不再用渐变
     在栏底留一截 bg 色“色块”。竖向居中交给 iOS 覆盖规则（栏高 = 内容 + 安全区）。 */
  /* L2 吸顶材质：半透明 + 毛玻璃，内容从下方透出（配合顶部 1px 高光边） */
  background: var(--glass-strong);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  border-top: 1px solid var(--border);
  box-shadow: var(--inner-hi), 0 -10px 26px -16px rgba(0,0,0,.30);
  padding: 0 10px;
}
/* 桌面端：四钮收进等宽网格并整体居中（原为 132/96/132 三栏，中央是 ＋） */
html:not(.ios-app) .bottom-bar {
  display: grid;
  grid-template-columns: repeat(4, 118px);
  justify-content: center;
  align-items: center;
  gap: 4px;
  padding: 12px 0 10px;
}
/* iOS：整栏高 = 46px 内容带 + 底部安全区（安全区计在栏内、不再另开色带）；
   待办 / ＋ / 知识库 在“内容带 + 安全区”的整块内垂直居中 */
html.ios-app .bottom-bar, .ios-app .bottom-bar {
  height: calc(46px + env(safe-area-inset-bottom));
  padding: 0 10px;
}
.bb-tab {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 3px;
  border: none; background: transparent; cursor: pointer;
  padding: 0; min-height: 46px; height: 46px;
  font-size: 11.5px; line-height: 1; font-family: inherit;
  color: var(--tab-inactive); font-weight: 500; letter-spacing: 0;
  -webkit-tap-highlight-color: transparent;
  transition: color .12s;
}
/* 图标容器（.bb-ico）：squircle 浅灰底 + 发丝边 + 顶部内高光——
   图标不再"裸奔"成一根线，而是落在一个有实体感的圆角方里，选中态整体转近黑实心。 */
.bb-tab svg { width: 22px; height: 22px; display: block; }
.bb-ico {
  width: var(--tile-md); height: var(--tile-md);
  border-radius: var(--tile-md-r);
  display: grid; place-items: center;
  background-color: var(--tile-bg); background-image: var(--tile-metal);
  border: 1px solid var(--tile-border);
  color: var(--tile-fg);
  --glyph-cut: var(--tile-bg);
  box-shadow: var(--inner-hi);
  transition: background .14s, color .14s, border-color .14s, box-shadow .14s;
}
.bb-tab:hover { color: var(--text-2); }
.bb-tab:hover .bb-ico { background: var(--tile-bg-hover); color: var(--accent); --glyph-cut: var(--tile-bg-hover); }
/* 选中态：容器近黑实心 + 白色图标，配内高光与微投影（实体感来自"实心块浮起"） */
.bb-tab.active { color: var(--tab-active); font-weight: 600; }
.bb-tab.active .bb-ico {
  background: var(--accent-bg); border-color: var(--accent); color: var(--on-accent);
  --glyph-cut: var(--accent);
  box-shadow: var(--shadow-1), var(--inner-hi-dark);
}
/* ===== 第四项「设置」：齿轮剪影，与其余三枚同一套语言 =====
   曾直接用品牌 logo（彩色金属 App 图标）当图标：它是"自带底色的圆角方图片"，
   贴进底部导航后与"单色剪影落在同一枚 .bb-ico 圆角方里"完全不是一套语言
   （尺寸感、轮廓、明暗、选中态全部对不上），故废弃该特例——现在第四项走标准 .bb-tab 路径，
   齿轮 SVG 用 currentColor + .ico-cut 轴孔，天然继承 hover / active 的变色与容器。
   品牌 logo 仅保留一个消费方：浏览器 favicon（见 app.js applyTheme）。
   ⇒ 下方 .bb-ico-brand / .bb-logo 的历史规则已随之删除。 */

/* ===== 页头主操作 ＋（三个视图统一：页头**左上角**） =====
   原先这个 ＋ 位于底部导航栏中央；导航改成四项后，它下放到各页头部，**只做本页的事**：
   待办页只新建待办、笔记页只新建笔记、文库页只手动归档，不再弹「待办 / 文库」二选一的弹窗。
   ⚠️ 位置必须三页一致：统一挂在 .todo-head-left（页头第一列、左对齐）里，42px 圆角方；
      文库页的 ＋ 曾经挂在搜索框右缘（靠 align-self:stretch 与搜索框等高），
      三页各在一边、无法互相参照，已改回左上角（搜索框顺次下移独占一行）。 */
.main-add {
  flex-shrink: 0; border: 1px solid var(--border); cursor: pointer;
  width: 42px; height: 42px; border-radius: var(--radius);
  display: grid; place-items: center;
  background-color: var(--panel); background-image: var(--panel-metal);
  color: var(--accent);
  box-shadow: var(--shadow-1), var(--inner-hi);
  transition: background .14s, color .14s, border-color .14s, box-shadow .14s, transform .1s;
  -webkit-tap-highlight-color: transparent;
}
.main-add .fab-plus { display: grid; place-items: center; }
.main-add .fab-plus svg { width: 22px; height: 22px; display: block; --icon-w: 2.4; }
.main-add:hover {
  background-color: var(--tile-bg-hover); border-color: var(--border-strong);
  box-shadow: var(--shadow-2), var(--inner-hi);
}
.main-add:active { transform: scale(.94); box-shadow: var(--shadow-1); }

/* ===== 主区域 ===== */
.main { flex: 1; overflow-y: auto; min-height: 0; padding: 26px 40px 96px; }
/* 桌面端（Mac 壳 / 浏览器）：窗口为 fullSizeContentView + 隐藏标题栏，网页顶部会顶到
   红绿灯按钮下方，需额外留出安全高度，避免品牌 logo 与红绿灯视觉打架 */
html:not(.ios-app) .main { padding-top: 38px; }
.view { display: none; max-width: 860px; margin: 0 auto; }
.view.active { display: block; animation: fade .18s ease; }
/* 桌面端（非 iOS）：待办/知识库各视图随窗口宽度伸展（不再封顶 860 居中）；
   iOS 注入 .ios-app 类仍按 860 规则（实际屏宽小于 860，效果等同全宽） */
html:not(.ios-app) .view { max-width: none; }
@keyframes fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* 品牌 logo 已从待办页头部迁出（现仅喂 favicon）。头部原位改由 ＋（.main-add）接管，
   尺寸同为 42px ⇒ 页头高度不变；笔记页与文库页的 ＋ 复用同一套 .todo-head-left 布局。 */
.view-head.todo-view-head { align-items: center; }
.todo-head-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.todo-head-left .view-date { margin-top: 0; font-size: 15px; white-space: nowrap; }

.view-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 20px; }
/* 知识库视图头部：＋ 与搜索框**同一行**。
   ＋ 仍留在页头左上角（与待办 / 笔记同一个左对齐槽，位置契约不变），
   搜索框则**缩短**并靠右——不再独占整行，右缘与下方文库卡片对齐。
   gap 取 10px：＝ 与搜索框之间不贴死。 */
#view-knowledge .view-head { margin-bottom: 16px; min-height: 0; }
.kb-view-head { flex-direction: row; align-items: center; gap: 10px; }
/* 搜索框靠右 + 缩短：margin-left:auto 保证贴右缘（与左侧 ＋ 的宽度无关）；
   宽度取 min(上限, 比例)，窄窗口下按比例收，永远不会把左边的 ＋ 挤掉。 */
.kb-view-head .kb-search-bar { margin-left: auto; width: min(420px, 56%); flex: 0 0 auto; }
.kb-search-bar {
  display: flex; align-items: center; gap: 8px;
  background-color: var(--panel);
  background-image: var(--panel-metal); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 0 12px;
  box-shadow: var(--shadow-1), var(--inner-hi);
  transition: border-color .14s, box-shadow .14s;
}
.kb-search-bar:focus-within {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-2), var(--inner-hi), 0 0 0 4px var(--focus-glow);
}
.kb-search-ico { width: 17px; height: 17px; color: var(--text-3); flex-shrink: 0; --icon-w: 1.9; }
.kb-search-input {
  flex: 1; border: none; outline: none; background: transparent;
  font-size: 15px; font-family: inherit; color: var(--text);
  padding: 10px 0;
}
.kb-search-input::placeholder { color: var(--text-3); }
.kb-search-input::-webkit-search-cancel-button { -webkit-appearance: none; }

/* ===== 知识库搜索匹配面板（iOS / Mac 统一：输入即弹，展示命中情况） ===== */
.kb-search-panel { padding: 2px 0 6px; }
.kb-search-summary { font-size: 13.5px; color: var(--text-2); padding: 2px 4px 10px; }
.kb-search-summary b { color: var(--text); font-weight: 700; }
.kb-search-results { display: flex; flex-direction: column; }
.ks-item { padding: 10px 6px; border-bottom: 1px solid var(--border); cursor: pointer; border-radius: var(--radius-sm); }
.ks-item:last-child { border-bottom: none; }
.ks-item:hover { background: var(--panel-2); box-shadow: var(--shadow-1); }
.ks-row1 { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.ks-title { font-size: 16px; font-weight: 600; color: var(--text); word-break: break-word; min-width: 0; }
/* 搜索结果里的分类标签：字形已改实心剪影，12px 会糊，放到 14px 并提高对比度 */
.ks-cat { display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0; font-size: 13px; color: var(--tile-fg); white-space: nowrap; --glyph-cut: var(--panel); }
.ks-cat svg { width: 14px; height: 14px; flex-shrink: 0; }
.ks-row2 { display: flex; align-items: center; gap: 8px; margin-top: 4px; flex-wrap: wrap; font-size: 13px; color: var(--text-3); }
.ks-chip { font-size: 11.5px; line-height: 1.6; padding: 0 6px; border-radius: 5px; background: var(--accent-soft); color: var(--text-2); font-weight: 600; }
.ks-chip-t { background: var(--bg); color: var(--text-2); }
.ks-chip-l { background: var(--accent-soft); color: var(--text-2); }
.ks-src { color: var(--text-2); }
.ks-snip { margin-top: 5px; font-size: 14px; color: var(--text-2); line-height: 1.55; word-break: break-word; }
mark { background: var(--mark-bg); color: var(--text); border-radius: 3px; padding: 0 2px; }
.ks-more { padding: 12px 6px; font-size: 13px; color: var(--text-3); text-align: center; }
.ks-none { padding: 22px 6px; font-size: 14px; color: var(--text-3); text-align: center; }
.view-head h1 { font-size: 25px; font-weight: 700; letter-spacing: -0.02em; }
.view-date { color: var(--text-2); font-size: 16px; font-weight: 600; margin-top: 2px; }

.head-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
/* 分段控件：凹面灰槽（内阴影）+ 选中项近黑实心（内高光 + 微投影）——一凹一凸形成实体感 */
.filter-pills {
  display: flex; gap: 2px;
  background-color: var(--panel-3); background-image: var(--panel-metal-3); border: 1px solid var(--border);
  border-radius: 11px; padding: 3px;
  box-shadow: var(--inset-1);
}
.pill {
  border: none; background: transparent; cursor: pointer;
  padding: 5px 14px; border-radius: 8px; font-size: 14px;
  color: var(--text-2); font-family: inherit; font-weight: 500;
  transition: background .14s, color .14s, box-shadow .14s;
}
.pill:hover { color: var(--text); background: var(--hover-tint); }
.pill.active { background: var(--accent-bg); color: var(--on-accent); box-shadow: var(--shadow-1), var(--inner-hi-dark); font-weight: 600; }
.pill.active:hover { color: var(--on-accent); background: var(--accent-bg); }

/* ===== 待办 ===== */

.todo-group { margin-bottom: 22px; }
.todo-group-title {
  font-size: 13px; font-weight: 600; color: var(--text-3);
  text-transform: uppercase; letter-spacing: 0.6px; padding: 0 4px 8px;
}
/* 待办 / 笔记列表整体 = 一张浮起的白色卡片（列表级材质面），行间只用发丝线分隔 */
#todo-list,
#notes-list {
  background-color: var(--panel);
  background-image: var(--panel-metal);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-2), var(--inner-hi);
  overflow: hidden;
}
#todo-list:empty,
#notes-list:empty { display: none; } /* 空列表时不残留一条空卡片边线 */
.todo-item {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 14px;
  border-bottom: 1px solid var(--border); cursor: pointer;
  transition: background .12s; position: relative;
}
.todo-item:last-child { border-bottom: none; }
/* iOS：todo 单列最后一条才隐分隔线；KB 按类别分组，每类最后一条方框仍需完整边框圆角。 */
.ios-app .swipe-cell:last-child > .todo-item { border-bottom: none; }
.ios-app #todo-list .swipe-cell:last-child > .todo-item { border-bottom: none; }
.todo-item:hover { background: var(--panel-2); }
.todo-check {
  flex-shrink: 0; width: 22px; height: 22px; margin-top: 1px;
  border-radius: 7px; border: 1.6px solid var(--border-strong); cursor: pointer;
  display: grid; place-items: center; color: var(--on-accent);
  background-color: var(--panel);
  background-image: var(--panel-metal); box-shadow: var(--inset-1);
  transition: background .14s, border-color .14s, box-shadow .14s, transform .1s;
}
.todo-check:active { transform: scale(.9); }
.todo-item.done .todo-check {
  background: var(--accent-bg); border-color: var(--accent);
  box-shadow: var(--shadow-1), var(--inner-hi-dark);
}
.todo-check svg { width: 13px; height: 13px; --icon-w: 2.8; opacity: 0; transform: scale(.5); transition: opacity .12s, transform .12s; }
.todo-item.done .todo-check svg { opacity: 1; transform: scale(1); }
.todo-main { flex: 1; min-width: 0; overflow: hidden; }
/* Mac（非 iOS）：✕ 删除钮仅在 hover 时浮现在条目右缘，平时不占空间——
   日期/来源徽章默认真正右对齐到条目右缘；hover 时正文最后一行才右让 40px 避让 ✕ */
html:not(.ios-app) .todo-main { transition: padding-right .12s ease; }
html:not(.ios-app) .todo-item:hover .todo-main { padding-right: 40px; }
.todo-text { white-space: pre-wrap; word-break: break-word; }
.todo-item.done .todo-text { color: var(--done); text-decoration: line-through; }

/* ===== 笔记首页：与待办首页同构 =====
   直接复用 .todo-list 白卡与 .todo-item 行，保证"两页首页风格一致"是结构层面的一致，
   而不是两套长得像的样式。差异只有两点：左侧是文档图标（非复选钮）、标题下多一行摘要。 */
/* 左侧图标槽：宽度与 .todo-check（22px）一致 ⇒ 标题左缘与待办列表严格对齐。
   图标走线性描边 + 中性灰（内联图标规范），不套色块容器，免得在列表里显得比待办"重"。 */
.note-ico {
  flex-shrink: 0; width: 22px; height: 22px; margin-top: 1px;
  display: grid; place-items: center; color: var(--text-3);
}
.note-ico svg { width: 15px; height: 15px; display: block; --icon-w: 1.8; }
.note-snip {
  display: block; margin-top: 4px;
  font-size: 13.5px; line-height: 1.45; color: var(--text-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.note-snip .note-date { color: var(--text-3); }
.note-snip .note-dim { color: var(--text-3); opacity: .8; }
.note-item.untitled .todo-text { color: var(--text-2); }

/* 笔记详情头部：插入图片按钮（线性图标，与关闭钮同风格） */
.kb-img-btn {
  flex-shrink: 0; width: 32px; height: 32px; border-radius: 9px;
  border: 1px solid var(--border); cursor: pointer;
  display: grid; place-items: center;
  background-color: var(--panel); background-image: var(--panel-metal);
  color: var(--text-2); box-shadow: var(--shadow-1), var(--inner-hi);
  transition: color .14s, border-color .14s, box-shadow .14s, transform .1s;
}
.kb-img-btn svg { width: 17px; height: 17px; display: block; --icon-w: 1.8; }
.kb-img-btn:hover { color: var(--accent); border-color: var(--border-strong); box-shadow: var(--shadow-2), var(--inner-hi); }
.kb-img-btn:active { transform: scale(.94); }
.kb-img-btn[disabled] { opacity: .5; cursor: default; }
/* 识别进行中的临时提示行（插在正文里，成功后由识别结果替换掉） */
.note-ocr-hint {
  display: inline-block; margin: 6px 0; padding: 6px 12px;
  font-size: 13.5px; color: var(--text-2);
  border: 1px dashed var(--border-strong); border-radius: var(--radius-sm);
}
/* 笔记正文默认左对齐（知识库正文是两端对齐，那是为长文排版；笔记是随时记，左对齐更好写） */
.note-content { text-align: left; text-justify: auto; }
/* 来源/日期 徽章：浮动到正文「最后一行」末尾右对齐（来源徽章在前、日期在后）。
   float 锚定在行尾 → 正文单行时与文字同行、多行时落在最后一行右端 */
.todo-meta {
  float: right; margin: 1px 0 0 10px;
  display: inline-flex; align-items: center; gap: 6px;
  white-space: nowrap; color: var(--text-2);
}
.badge {
  font-size: 12px; padding: 1px 7px; border-radius: 7px; font-weight: 500;
  display: inline-flex; align-items: center; gap: 4px;
  background-color: var(--panel-3); background-image: var(--panel-metal-3); border: 1px solid var(--border);
  box-shadow: var(--inner-hi);
}
.badge svg { width: 11px; height: 11px; flex-shrink: 0; --icon-w: 2.2; }
.badge-date { color: var(--text-2); cursor: pointer; transition: background .12s, color .12s; }
.badge-date:hover { color: var(--text); background: var(--panel-2); }
.todo-date-input {
  border: 1px solid var(--accent); border-radius: 6px;
  font-size: 12px; font-family: inherit; padding: 0 4px;
  color: var(--text); background-color: var(--panel);
  background-image: var(--panel-metal); outline: none;
  box-shadow: 0 0 0 2px var(--accent-soft);
}
.badge-src { color: var(--text-2); }
.todo-actions {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  display: flex; gap: 4px; opacity: 0; visibility: hidden;
  transition: opacity .12s, visibility .12s;
}
.todo-item:hover .todo-actions { opacity: 1; visibility: visible; }
.icon-btn {
  border: none; background: transparent; cursor: pointer;
  width: 28px; height: 28px; border-radius: 7px; color: var(--text-3);
  display: grid; place-items: center;
}
.icon-btn svg { width: 15px; height: 15px; display: block; --icon-w: 1.8; }
.icon-btn:hover { background-color: var(--panel-3); background-image: var(--panel-metal-3); color: var(--danger); box-shadow: var(--shadow-1); }

.todo-item.editing { background: var(--panel-2); box-shadow: inset 0 0 0 2px var(--accent); }
.todo-edit-input {
  display: block; width: 100%;
  border: none; outline: none; font-size: 16px; font-family: inherit;
  color: var(--text); background: transparent; resize: none;
}

/* ===== 知识库 ===== */
.btn-primary {
  border: none; background: var(--accent-bg); color: var(--on-accent); cursor: pointer;
  padding: 8px 18px; border-radius: var(--radius-sm); font-size: 15px;
  font-family: inherit; font-weight: 600;
  box-shadow: var(--shadow-1), var(--inner-hi-dark);
  transition: background .12s, box-shadow .12s, transform .1s;
}
.btn-primary:hover { background: var(--accent-hover-bg); box-shadow: var(--shadow-2), var(--inner-hi-dark); }
.btn-primary:active { transform: translateY(1px); box-shadow: var(--shadow-1); }
.btn-primary:disabled { opacity: .45; cursor: default; }

.kb-cat { margin-bottom: 26px; }
.kb-cat-head {
  display: flex; align-items: center; gap: 9px; margin-bottom: 12px;
}
/* 分类图标容器：与底栏同一套「squircle + 发丝边」图标语言。
   ⚠️ 底色与边线必须与 L0 页面底拉开"色相"差而不是只靠明度差：L0 提亮后，
   纯白容器在浅灰底上几乎读不出形状，改走浅蓝底 + 蓝发丝边才能浮起来。 */
.kb-cat-icon {
  color: var(--tile-fg); flex-shrink: 0;
  width: var(--tile-sm); height: var(--tile-sm);
  border-radius: var(--tile-sm-r);
  display: grid; place-items: center;
  background-color: var(--tile-bg); background-image: var(--tile-metal);
  border: 1px solid var(--tile-border);
  --glyph-cut: var(--tile-bg);
  box-shadow: var(--shadow-1);
}
/* 字形从 14px 提到 17px：整格 24px 的容器里，14px 的图形四周留白过多，视觉上"没填满" */
.kb-cat-icon svg { display: block; width: 17px; height: 17px; --icon-w: 2; }
.kb-cat-title { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; }
/* 分类折叠箭头（14px 内联线性）：默认 --icon-w 在这个尺寸下偏细 */
.kb-cat-caret { --icon-w: 2.1; }

.kb-items { display: flex; flex-direction: column; gap: 9px; }
.kb-card {
  background-color: var(--panel);
  background-image: var(--panel-metal); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 12px 14px;
  box-shadow: var(--shadow-1), var(--inner-hi);
  display: flex; align-items: center; gap: 12px; position: relative; cursor: pointer;
  transition: border-color .14s, box-shadow .16s, transform .12s, background .12s;
}
/* hover 抬升 1px + 阴影加深：用位移与光影同时表达"这张卡被拿起来了" */
.kb-card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-2), var(--inner-hi);
  transform: translateY(-1px);
}
.kb-card-title {
  /* 字号与正文一致（2026-09-28）：原先 15px 比 .todo-text / .ks-title 的 16px 小 1px，
     列表一多就整屏「看着比待办条目小一号」。条目级正文字号只有这一个来源，改这里即对齐。 */
  font-weight: 600; font-size: 16px; line-height: 1.4; color: var(--text);
  white-space: normal; overflow: visible; flex: 1; min-width: 0; word-break: break-word; /* 长标题自动换行 */
}
.kb-card-author {
  font-size: 12px; color: var(--text-2); background-color: var(--panel-3); background-image: var(--panel-metal-3);
  border: 1px solid var(--border);
  padding: 2px 8px; border-radius: 7px; flex-shrink: 0; white-space: nowrap;
  margin-left: auto; box-shadow: var(--inner-hi);
}
.kb-card-del {
  border: none; background: transparent; cursor: pointer;
  color: var(--text-3); width: 26px; height: 26px; border-radius: 8px;
  display: grid; place-items: center;
  opacity: 0; transition: opacity .12s, background .12s, color .12s; flex-shrink: 0;
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
}
.kb-card-del svg { width: 15px; height: 15px; display: block; --icon-w: 1.8; }
.kb-card:hover .kb-card-del { opacity: 1; }
.kb-card:hover .kb-card-author { margin-right: 28px; }
.kb-card-del:hover { background: var(--danger-soft); color: var(--danger); box-shadow: var(--shadow-1); }

/* ===== 空状态 ===== */
.empty-state { text-align: center; padding: 72px 20px; color: var(--text-3); display: none; }
.empty-state.show { display: block; }
/* 空态图标同样落在圆角容器里（最大号 tile），不再是"一根孤零零的线" */
.empty-icon {
  display: grid; place-items: center;
  width: var(--tile-lg); height: var(--tile-lg); margin: 0 auto 16px;
  border-radius: var(--tile-lg-r);
  background-color: var(--tile-bg); background-image: var(--tile-metal); border: 1px solid var(--tile-border);
  color: var(--tile-fg);
  box-shadow: var(--shadow-1), var(--inner-hi);
}
/* 空态用「线性描边」变体而非实心剪影：大尺寸下线性更透气，实心会变成一团灰 */
.empty-icon svg { width: 32px; height: 32px; display: block; --icon-w: 1.7; }
.empty-state p { font-size: 15px; color: var(--text-2); }
.empty-hint { font-size: 13px; margin-top: 6px; color: var(--text-3); }

/* ===== Toast ===== */
.toast {
  position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: var(--toast-bg); color: var(--toast-fg); padding: 10px 18px; border-radius: var(--radius);
  font-size: 14px; opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease; z-index: 4000;
  box-shadow: 0 6px 24px rgba(0,0,0,.18);
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ===== 响应式（窄屏 / iPhone 浏览器） ===== */
@media (max-width: 720px) {
  .main { padding: 26px 16px 100px; }
  .view-head { flex-direction: column; align-items: flex-start; gap: 12px; }
  .head-actions { width: 100%; }
}

/* ===== iOS App 专属布局（由 WKWebView 注入 .ios-app 标记） ===== */
/* 无独立顶部品牌条：内容自刘海/状态栏下方开始。
   整页禁滚 + 禁橡皮筋（iOS 上即使内容不超，scrollView 默认会回弹造成“整页晃动”） */
html.ios-app, .ios-app body { overflow: hidden; overscroll-behavior: none;
  /* iOS 全局竖滑由系统接管（最快滚动），横滑交给 JS（左边缘右划返回 / 微信式左滑） */
  touch-action: pan-y;
}
.ios-app .main { padding: calc(12px + env(safe-area-inset-top)) 16px 120px; overscroll-behavior: none; }
.ios-app .view { max-width: 720px; margin: 0 auto; }
/* iOS 抑制：tap 触发的 :hover 闪灰/闪框，避免误显示桌面端 hover UI */
.ios-app .todo-item:hover { background-color: var(--panel);
  background-image: var(--panel-metal); }
.ios-app .todo-item.done:hover { background-color: var(--panel);
  background-image: var(--panel-metal); }
/* ⚠️ `transform: none` 不可省（2026-09-27）：.kb-card:hover 声明了 translateY(-1px) 的「抬起」，
   而 iOS 轻触即触发 :hover → 卡片上浮 1px，.swipe-cell 的 overflow:hidden 虽裁掉了上沿，
   但**下沿**空出 1px，底下那层 .swipe-act（取消 #6a6b74 / 删除 #d93a2b）就在条目底部露出
   一条颜色。待办无此问题是因为 .todo-item:hover 只改 background、没有位移。
   凡是 .swipe-cell 里的内容面板，hover 一律不得带位移。 */
.ios-app .kb-card:hover { border-color: var(--border); background-color: var(--panel);
  background-image: var(--panel-metal); transform: none; }
/* iOS 无 hover：知识库卡上的「标记悬浮 tooltip」依赖 mouseenter/mouseleave 触发，
   触屏上 mouseenter 一旦触发 mouseleave 不会自然到达，会造成标记 chips 永久残留。
   直接在 iOS 上彻底关闭此 tooltip（标记的红色虚线下划线在正文里仍然可见）。 */
.ios-app .kb-mark-tip { display: none !important; }
/* 除待办外的视图头部纵向（笔记页等） */
.ios-app .view-head { flex-direction: column; align-items: flex-start; gap: 12px; }
/* 文库页头例外：＋ 与搜索框同行 —— ＋ 在左（同待办/笔记的槽），搜索框靠右并缩短。
   窄屏下按比例取宽（min 的第二个值兜底），保证永远给 ＋ 留出位置。 */
.ios-app #view-knowledge .view-head { flex-direction: row; align-items: center; gap: 10px; }
.ios-app #view-knowledge .kb-search-bar { width: min(240px, 62%); }
.ios-app .head-actions { width: 100%; }
/* 待办头部：logo+日期在左、筛选（全部/已完成/进行中）同行靠右 */
.ios-app #view-todo .view-head { flex-direction: row; align-items: center; gap: 0; }
.ios-app #view-todo .head-actions { width: auto; margin-left: auto; }
.ios-app #view-todo .todo-head-left { flex: 1; min-width: 0; }
.ios-app #view-todo .view-date { font-size: 14px; overflow: hidden; text-overflow: ellipsis; }

/* ===== iOS：微信式左滑（吸附停留 → 灰色「取消」+ 红色「删除」，由用户点选） =====
   结构：.swipe-cell（relative + overflow:hidden 容器）
     ├─ .swipe-act   操作钮层，absolute 固定于右缘（z0，不随内容平移）
     └─ .todo-item/.kb-card  内容面板（z1，带不透明背景；左滑仅平移此层露出按钮）
   旧实现把按钮嵌在条目内部，按钮随内容平移且被透明内容透出常显——已重构。 */
.ios-app .swipe-cell {
  position: relative; overflow: hidden;
  background-color: var(--panel);
  background-image: var(--panel-metal); /* 兜底：内容面板之下、按钮之上不透底 */
  /* 竖滑放行原生滚动（丝滑不卡），仅横向手势交给 JS（左滑露按钮 / 右滑返回）。
     注：不可用 none——none 会让纵向滚动也等 JS 放行，条目一多滚动明显卡顿。 */
  touch-action: pan-y;
}
.ios-app .todo-item, .ios-app .kb-card {
  position: relative; z-index: 1; background-color: var(--panel);
  background-image: var(--panel-metal);
  transition: transform .18s ease, border-color .12s;
}
.ios-app .todo-item.dragging, .ios-app .kb-card.dragging { transition: none; }
/* 面板滑开露出右缘固定按钮（按钮不动，内容走） */
.ios-app .todo-item.swiped, .ios-app .kb-card.swiped { transform: translateX(-132px); }
/* 触屏无 hover：Mac 的悬停 ✕ 在 iOS 隐藏，改走左滑双钮 */
.ios-app .todo-actions, .ios-app .kb-card-del { display: none; }
.ios-app .kb-card-author { margin-right: 0; }
.ios-app .kb-card:hover .kb-card-author { margin-right: 0; }
/* 桌面不出现左滑钮（保留 hover ✕ 删除）；iOS 才显示 */
.swipe-act { display: none; }
.ios-app .swipe-act {
  position: absolute; top: 0; right: 0; bottom: 0; z-index: 0;
  display: flex; width: 132px;
  /* 与内容面板同半径并裁切：卡片圆角处会露出下方的按钮层（红色删除块被切成
     四分之一圆“角标”），这是「内容面板用 border-radius 切白底、按钮铺满整块」的必然结果。
     按钮层圆角比卡片再放大 4px，让它的着色边界整体退到卡片白底之内，
     未滑动时连抗锯齿级的一丝丝红色都不会透出。 */
  border-radius: calc(var(--radius) + 4px);
  overflow: hidden;
}
.sa-btn {
  flex: 1; border: none; color: #fff; font-size: 15px; font-weight: 600;
  font-family: inherit; display: flex; align-items: center; justify-content: center;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
/* 黑白灰体系下：取消=中性深灰，删除=唯一红色（语义色保留） */
.sa-cancel { background: #6a6b74; box-shadow: inset 0 1px 0 rgba(255,255,255,.12); }
.sa-del { background: var(--danger); box-shadow: inset 0 1px 0 rgba(255,255,255,.18); }

/* iOS 侧滑与光影的配合：
   内容面板被 .swipe-cell 的 overflow:hidden 裁切 → 挂在 .kb-card 上的投影会被吃掉，
   因此 iOS 的知识库卡片把光影改挂到外层 .swipe-cell 上，滑块圆角也由它统一收边。
   待办整列是一张 #todo-list 白卡，行级不再各自投影，只靠首尾圆角让红色按钮层退到卡内。 */
.ios-app .kb-items > .swipe-cell {
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
}
.ios-app .kb-items > .swipe-cell > .kb-card { box-shadow: none; }
.ios-app #todo-list > .swipe-cell:first-child { border-radius: var(--radius) var(--radius) 0 0; }
.ios-app #todo-list > .swipe-cell:last-child { border-radius: 0 0 var(--radius) var(--radius); }
.ios-app #todo-list > .swipe-cell:first-child:last-child { border-radius: var(--radius); }

/* 全屏弹层（设置 / 文库详情 / 笔记详情）顶部留出刘海·灵动岛·状态栏，否则标题与关闭钮被遮挡。
   ⚠️ 三个全屏 overlay 必须**一个不落**都在这条名单里：漏一个（曾漏 #note-detail-modal），
      那一层就整块顶到屏幕上沿——标题、✕ 一起钻进刘海区，既被切掉又点不到。
      机制：overlay 是 position:fixed; inset:0，给 overlay 加上 padding-top 后，
      内层 .modal（滚动容器）的可用高度从刘海下方起算，
      其 position:sticky 的 .modal-head 也跟着贴到安全区下沿。
   ⚠️ **故意不加 .ios-app 前缀**：带前缀时这条规则同时依赖「WKWebView 已注入类」与
      「前端已更新」两个前提，任一不成立就整条静默失效——真机上就表现为
      「上次说修好了，这次还是被遮」。去掉前缀后，无论页面从哪来、类有没有加上都生效；
      桌面端 env(safe-area-inset-top) 恒为 0 ⇒ 零副作用。
      特异性：.modal-overlay#id（1 类 + 1 id）压过下方 .modal-overlay 的 padding: 0（1 类）。
   ⚠️ env() 必须带第二参 0px：不支持 env() 的旧 WebKit 会因解析失败**丢弃整条声明**。
   ⚠️ 改这段注释时**务必保证注释起止符只配一对**——曾多打一个提前闭合符号，
      后面几行注释文字沦为样式表里的非法 token，紧跟的这条规则就被整条丢弃
      （表现：桌面端看不出，真机上照旧被遮，且控制台只有一条难以察觉的解析错误）。 */
.modal-overlay#settings-modal,
.modal-overlay#kb-detail-modal,
.modal-overlay#note-detail-modal { padding-top: env(safe-area-inset-top, 0px); }
.ios-app .modal-head, .ios-app .modal-body { max-width: 100%; }

/* iOS：聚焦输入框自动放大页面的根治。
   WKWebView/Safari 对字号 <16px 的可编辑控件聚焦时会整体放大页面，失焦后常不回缩，
   表现为“编辑完退出界面变放大/晃动”。把可编辑控件字号提到 16px + 禁止文本缩放即可避免。
   （.add-ta 等特意放大的 17px 规则在其后覆盖，不受影响） */
.ios-app { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
.ios-app input:not([type="checkbox"]):not([type="date"]):not([type="color"]):not([type="range"]):not([type="password"]),
.ios-app textarea { font-size: 17px; }
.ios-app .kb-search-input { font-size: 17px; padding: 8px 0; }

/* iOS：＋ 新建弹窗键盘避让。软键盘弹出会遮住屏幕下部，
   居中的 add-sheet 其底部「添加」按钮可能落在键盘区后、点击落空（表现为“点添加没反应”）。
   改为内容自上方开始（居中感由 14vh 顶部留白近似），保证按钮永远在键盘上方可视。 */
.ios-app .add-overlay {
  align-items: flex-start;
  justify-content: flex-start;
  padding: calc(env(safe-area-inset-top) + 14vh) 18px 18px;
}
.ios-app .add-sheet { max-width: none; box-shadow: none; }
.ios-app .add-ta { min-height: 96px; font-size: 18px; }

/* iOS：正文阅读限宽，表格/代码块横向滚动而不撑破屏幕 */
.ios-app .kb-detail-content pre,
.ios-app .kb-detail-content table,
.ios-app .kb-detail-content iframe,
.ios-app .kb-detail-content img,
.ios-app .kb-detail-content video { max-width: 100%; }
.ios-app .kb-detail-content pre { white-space: pre-wrap; word-break: break-word; }
.ios-app .kb-detail-content table { display: block; overflow-x: auto; }
.ios-app .kb-detail-content blockquote,
.ios-app .kb-detail-content figure { max-width: 100%; overflow-x: auto; }

/* ===== 设置面板 Modal ===== */
.modal-overlay {
  position: fixed; inset: 0;
  background-color: var(--bg);
  background-image: var(--bg-grad);
  display: none; align-items: stretch; justify-content: center; z-index: 1000;
  padding: 0;
}
.modal-overlay.show { display: flex; }
.modal {
  background: transparent; border: none;
  border-radius: 0; box-shadow: none;
  width: 100%; height: 100%; max-width: none; max-height: none; overflow-y: auto;
}
.modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 24px; border-bottom: 1px solid var(--border);
  max-width: 1400px; margin: 0 auto;
  /* 吸顶：滚动时头部（含关闭按钮）固定在窗体顶部，随时可关闭，无需回滚。
     用毛玻璃而非纯色——滚过的内容在标题下方透出，层次不断层。 */
  position: sticky; top: 0; z-index: 5;
  background: var(--glass-strong);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
}
.modal-head h2 { font-size: 21px; font-weight: 700; letter-spacing: -0.02em; }
/* 知识库详情标题：本轮整体调大**不含**它（用户原话「除知识库正文标题外」）——
   它已经是弹层里最大的一行，再放大就压住正文了。 */
#kb-detail-title { font-size: 20px; }
/* 关闭钮改为 squircle（与图标容器同一语言），并带边 + 内高光实体感 */
.modal-close {
  width: 32px; height: 32px; border-radius: 10px; border: 1px solid var(--border);
  background-color: var(--panel);
  background-image: var(--panel-metal); color: var(--text-2); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-1), var(--inner-hi);
  transition: background .12s, color .12s, box-shadow .12s, transform .1s;
}
.modal-close svg { width: 16px; height: 16px; display: block; --icon-w: 1.9; }
.modal-close:hover { background: var(--panel-2); color: var(--text); box-shadow: var(--shadow-2), var(--inner-hi); }
.modal-close:active { transform: scale(.94); }
.modal-body { padding: 20px 24px 28px; max-width: 1400px; margin: 0 auto; }
.modal-lg { max-width: none; }
.kb-detail-meta { font-size: 13px; color: var(--text-3); margin-bottom: 8px; }
.kb-detail-content {
  font-size: var(--kb-fs-body); line-height: 1.85; color: var(--text);
  white-space: pre-wrap; word-break: break-word;
  background: transparent; border: none;
  border-radius: 0; padding: 4px 0;
}
/* 正文段落间距加大到约 1.5 倍：被全局 reset 清零的 <p> 补回段后留白，配合 1.85 倍行高整体更宽松 */
.kb-detail-content p { margin: 0 0 0.75em; }
.kb-detail-content p:last-child { margin-bottom: 0; }
/* 正文两端对齐（iOS / Mac 一致）：长段落左右齐平，避免参差右缘 */
.kb-detail-content { text-align: justify; text-justify: inter-ideograph; }
.kb-detail-content h1, .kb-detail-content h2, .kb-detail-content h3,
.kb-detail-content h4, .kb-detail-content blockquote,
.kb-detail-content pre, .kb-detail-content li {
  text-align: left; /* 标题/引用/代码/列表项仍左对齐，仅正文段落两端对齐 */
}
/* 正文各级标题（2026-10-05 二次收敛）：
   · 字号阶梯：H1 20 / H2 19 / H3 18（=正文，字重区分）——H1 必须小于笔记标题(21px)，
     弹层里笔记标题保持最大一行。
   · 段间距 = 正文段间距(0.75em)的 1.5 倍，前后对称，无其他段前段后要求；
     用 calc 跟 --kb-fs-body 基准联动，调正文基准字号时标题间距自动跟随。 */
.kb-detail-content h1 { font-size: 20px; }
.kb-detail-content h2 { font-size: 19px; }
.kb-detail-content h3 { font-size: 18px; }
.kb-detail-content h4 { font-size: 18px; }
.kb-detail-content h1, .kb-detail-content h2,
.kb-detail-content h3, .kb-detail-content h4 {
  margin: calc(var(--kb-fs-body) * 0.75 * 1.5) 0;
}
.kb-detail-content h1:first-child, .kb-detail-content h2:first-child,
.kb-detail-content h3:first-child, .kb-detail-content h4:first-child { margin-top: 0; }
.kb-detail-content img {
  max-width: 100%; height: auto; display: block;
  border-radius: 8px; margin: 12px 0; cursor: zoom-in;
}

/* 归档正文宽度兜底（2026-09-19）：
   公众号/秀米等来源的正文常残留**内联像素定宽**（典型：外层 `<section style="width:670px">`
   包着配图）。iPhone 窄屏下这层容器就有 670px，而 img 的 `max-width:100%` 是相对**这层定宽容器**
   算的 → 图片跟着撑出页面宽度。内联样式优先级高于普通样式表规则，必须用 !important 压过它。
   只收敛宽度，不动 color/font/text-align 等观感样式；表格有独立 overflow-x 滚动，不受影响。 */
.kb-detail-content img,
.kb-detail-content video,
.kb-detail-content svg,
.kb-detail-content canvas,
.kb-detail-content figure,
.kb-detail-content blockquote,
.kb-detail-content section,
.kb-detail-content div,
.kb-detail-content p {
  max-width: 100% !important;
}
.kb-detail-content img,
.kb-detail-content video,
.kb-detail-content svg { height: auto !important; }
/* 来源站残留的 translate3d 位移同样会把内容顶出右缘（如 text-align:right 的元素被推 10px） */
.kb-detail-content section[style*="translate3d"],
.kb-detail-content div[style*="translate3d"] { transform: none !important; }

/* ===== 正文来源样式归一（2026-09-28）=====
   归档进来的文章（公众号 / 秀米 / 各家 CMS）常自带 font-family / color / background-color
   内联样式，而这些样式**全是按浅色底写死的**：切到深空钛后就成了「深色字压深色底」
   「白底块里塞浅色字」，直接读不了。
   原则：正文的**字体与文字色归主题管**，不由来源站决定。
     ① 字体：两套主题下一律压回主题字体（来源站的字体不受主题控制，本身就是"跑版"）；
     ② 文字色 / 底色：只在**深色主题**下归一 —— 浅色主题下来源色本来就是照浅底配的、
        天然可读，不动它才能最大限度保住归档原文的样子；
     ③ 用户自选颜色（正文工具条的调色板）：按主题取色，见上方 --kb-c-* 的按主题定义。 */
.kb-detail-content, .kb-detail-content *:not(pre):not(code):not(kbd):not(samp) {
  font-family: var(--font) !important;
}
.kb-detail-content pre, .kb-detail-content code,
.kb-detail-content kbd, .kb-detail-content samp { font-family: var(--mono) !important; }

/* ② 深色主题：来源站写死的文字色一律归到主题文字色 */
html[data-theme="titanium"] .kb-detail-content [style*="color"],
html[data-theme="titanium"] .kb-detail-content font[color] { color: var(--text) !important; }
/* 只打击"自带内联底色"的元素——它们正是深色主题下变成白块、把浅色字顶没的元凶。
   ⚠️ 用属性选择器而不是 `*`：否则会把表头（样式表给的 --accent-soft 底）一起抹掉。 */
html[data-theme="titanium"] .kb-detail-content [style*="background"] {
  background-color: transparent !important;
  background-image: none !important;
}
/* ③ 用户自选颜色：两种落库形态都要认——
      `<font color="#xxxxxx">`（execCommand 默认 styleWithCSS=false 时产出）与行内 style 的 rgb()。
      ⚠️ 这几条**必须排在 ② 之后**：② 的 [style*="color"] 与下面第二条同权重，靠"后写者胜"生效。
      颜色值走 var(--kb-c-*)，所以浅色主题下等于原色（无感），深色主题下自动换亮版本。 */
html[data-theme] .kb-detail-content font[color="#5b6472"],
html[data-theme] .kb-detail-content [style*="rgb(91, 100, 114)"] { color: var(--kb-c-default) !important; }
html[data-theme] .kb-detail-content font[color="#e5484d"],
html[data-theme] .kb-detail-content [style*="rgb(229, 72, 77)"] { color: var(--kb-c-red) !important; }
html[data-theme] .kb-detail-content font[color="#f59e0b"],
html[data-theme] .kb-detail-content [style*="rgb(245, 158, 11)"] { color: var(--kb-c-orange) !important; }
html[data-theme] .kb-detail-content font[color="#16a34a"],
html[data-theme] .kb-detail-content [style*="rgb(22, 163, 74)"] { color: var(--kb-c-green) !important; }
html[data-theme] .kb-detail-content font[color="#2563eb"],
html[data-theme] .kb-detail-content [style*="rgb(37, 99, 235)"] { color: var(--kb-c-blue) !important; }
html[data-theme] .kb-detail-content font[color="#7c3aed"],
html[data-theme] .kb-detail-content [style*="rgb(124, 58, 237)"] { color: var(--kb-c-purple) !important; }

/* ④ 来源站写死的**字号**：按主题正文基准重排。
      公众号类正文实测只有 12/14/15/16/17/40 这几个档，其中
        15–17px = 正文量级 → 抬到 --kb-fs-body（与主题正文一致，"其余字体调大"落在正文上）
        12–14px = 小字注   → 抬到 --kb-fs-small
        ≥18px   = 章节装饰数字之类 → **一动不动**（不参与本轮整体调大）
      ⚠️ 每条都要把 `font-size:15px` 与 `font-size: 15px` 两种序列化都写上：
         入库的 HTML 两种都出现过（取决于来源站的压缩风格）。 */
.kb-detail-content :is([style*="font-size:15px"], [style*="font-size: 15px"],
                       [style*="font-size:16px"], [style*="font-size: 16px"],
                       [style*="font-size:17px"], [style*="font-size: 17px"]) {
  font-size: var(--kb-fs-body) !important;
}
.kb-detail-content :is([style*="font-size:12px"], [style*="font-size: 12px"],
                       [style*="font-size:13px"], [style*="font-size: 13px"],
                       [style*="font-size:14px"], [style*="font-size: 14px"]) {
  font-size: var(--kb-fs-small) !important;
}

/* 正文里的链接：两套主题下都走主题强调色，而不是浏览器默认的 #0000EE
   （默认蓝在深色底上过暗，且和本站的强调色不是同一个蓝）。 */
.kb-detail-content a { color: var(--accent-text) !important; }

/* 正文表格（归档保真：正文内表格为纯语义 table，无内联样式；表线/宽度统一由此处 CSS 提供。
   与笔记 app 同思路——HTML 只存结构、样式走 CSS；display:block + overflow-x 兜底超宽表格横向滚动） */
.kb-detail-content table {
  display: block; width: 100%; max-width: 100%; overflow-x: auto;
  border-collapse: collapse; margin: 10px 0;
  font-size: 16px; line-height: 1.6;
}
.kb-detail-content caption {
  caption-side: top; text-align: center; color: var(--text-3);
  padding: 4px 0 8px; font-size: 14px;
}
.kb-detail-content th, .kb-detail-content td {
  border: 1px solid var(--border-strong); padding: 6px 10px;
  text-align: left; vertical-align: top;
}
.kb-detail-content th { background: var(--accent-soft); font-weight: 700; }
/* 纵向合并单元格的标签垂直居中（贴合原表观感） */
.kb-detail-content td[rowspan] { vertical-align: middle; }
/* 表格内残留的段落/容器标签间距归零，避免单元格内产生多余空行 */
.kb-detail-content table p,
.kb-detail-content table div,
.kb-detail-content table section,
.kb-detail-content table ul { margin: 0; }

/* 详情配图点击放大（灯箱） */
.kb-lightbox {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(0,0,0,.86); display: none;
  align-items: center; justify-content: center; padding: 32px;
  cursor: zoom-out;
}
.kb-lightbox.show { display: flex; }
.kb-lightbox img {
  max-width: 100%; max-height: 100%; object-fit: contain;
  border-radius: 6px; box-shadow: 0 8px 40px rgba(0,0,0,.5);
}
.kb-lightbox-close {
  position: absolute; top: 18px; right: 22px;
  width: 38px; height: 38px; border-radius: 14px;
  border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.14); color: #fff;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background .12s;
}
.kb-lightbox-close svg { width: 18px; height: 18px; display: block; --icon-w: 2.0; }
.kb-lightbox-close:hover { background: rgba(255,255,255,.3); }

/* 剪贴板候选确认框（检测到含日期的剪贴板内容时，由用户决定是否新增待办） */
.confirm-overlay {
  position: fixed; inset: 0; z-index: 1500;
  background: var(--scrim);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  backdrop-filter: saturate(140%) blur(10px);
  display: none; align-items: center; justify-content: center; padding: 24px;
}
.confirm-overlay.show { display: flex; }
.confirm-card {
  width: 100%; max-width: 440px; background-color: var(--panel);
  background-image: var(--panel-metal);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 22px 22px 18px;
  box-shadow: var(--shadow-4), var(--inner-hi);
}
.confirm-title { font-size: 16px; font-weight: 700; margin-bottom: 12px; color: var(--text); }
.confirm-text {
  font-size: 15px; line-height: 1.6; color: var(--text);
  background: var(--panel-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 10px 12px; box-shadow: var(--inset-1);
  max-height: 200px; overflow-y: auto; white-space: pre-wrap; word-break: break-word;
}
.confirm-date { font-size: 13px; color: var(--text-3); margin: 10px 0 16px; }
.confirm-actions { display: flex; justify-content: flex-end; gap: 10px; }
.confirm-actions .btn-primary,
.confirm-actions .btn-ghost {
  border: 1px solid transparent; border-radius: var(--radius-sm);
  padding: 8px 18px; font-size: 15px; font-family: inherit; font-weight: 600; cursor: pointer;
}
.confirm-actions .btn-primary { background: var(--accent-bg); color: var(--on-accent); }
.confirm-actions .btn-primary:hover { background: var(--accent-hover-bg); }
.confirm-actions .btn-ghost { background: transparent; border-color: var(--border-strong); color: var(--text-2); }
.confirm-actions .btn-ghost:hover { color: var(--text); border-color: var(--text-3); }

/* 全局细滚动条 */
*::-webkit-scrollbar { width: 6px; height: 6px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 6px; }
*::-webkit-scrollbar-thumb:hover { background: var(--text-3); }

/* 弹窗：滚动条贴窗体右缘，默认隐藏，仅悬浮显现（隐藏式） */
.modal::-webkit-scrollbar { width: 11px; height: 11px; }
.modal::-webkit-scrollbar-track { background: var(--scroll-track); }
.modal::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 6px; border: 2px solid var(--scroll-track); }
.modal::-webkit-scrollbar-thumb:hover { background: var(--text-3); }

/* ===== 详情弹窗内联编辑（Notion 式） ===== */
.kb-head-right { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.kb-save-status { font-size: 13px; color: var(--text-3); min-width: 44px; text-align: right; }
/* 标题右侧分类下拉（扁平化：去边框、背景透出标题栏 --bg 融为一体；hover/聚焦仅淡填充反馈） */
.kb-cat-picker { position: relative; display: inline-flex; align-items: center; flex-shrink: 0; }
#kb-detail-cat {
  appearance: none; -webkit-appearance: none;
  border: 1px solid transparent; border-radius: 6px; background: transparent;
  color: var(--text-2); font-size: 14px; font-family: inherit; font-weight: 500;
  padding: 4px 24px 4px 8px; cursor: pointer; max-width: 150px; min-width: 96px;
  outline: none; transition: background .12s, color .12s;
}
#kb-detail-cat:hover { background: var(--accent-soft); color: var(--text); }
#kb-detail-cat:focus { background: var(--accent-soft); color: var(--text); }
.kb-cat-caret {
  position: absolute; right: 7px; top: 50%; margin-top: -7px;
  width: 14px; height: 14px; display: block;
  color: var(--text-3); pointer-events: none;
}
.kb-cat-new-input {
  width: 150px; border: 1px solid var(--text); border-radius: 7px;
  background-color: var(--panel);
  background-image: var(--panel-metal); color: var(--text); font-size: 14px; font-family: inherit;
  padding: 4px 10px; outline: none; box-shadow: 0 0 0 2px var(--accent-soft);
  flex-shrink: 0;
}
/* iOS：分类输入框字号提到 16px，避免聚焦时系统自动放大页面（<16px 输入框的经典坑） */
.ios-app .kb-cat-new-input { font-size: 17px; }
/* iOS 聚焦缩放防线：输入类元素 < 16px 时 WKWebView 会整页放大再回弹。
   .setting-row 里的输入（微信 Token 等）原先 14px，属于遗留漏洞，一并兜住。 */
.ios-app .setting-row input, .ios-app .setting-row select { font-size: 16px; }
/* iOS：详情关闭已由「屏幕左缘右划返回」接管，隐藏标题栏 ✕；分类下拉顺势置右，加大可点区 */
.ios-app #kb-detail-close { display: none; }
.ios-app #kb-detail-cat { font-size: 16px; padding: 7px 28px 7px 10px; }
.ios-app .kb-cat-caret { right: 9px; }
@media (max-width: 520px) {
  .modal-head { padding: 12px 14px; gap: 8px; }
  .kb-head-right { gap: 8px; }
  #kb-detail-cat { max-width: 118px; min-width: 84px; }
  .kb-cat-new-input { width: 118px; }
  .kb-save-status { min-width: 0; }
}
/* 弹层标题（文库详情 / 笔记详情共用一套）
   ⚠️ flex:1 + min-width:0 是**功能性的、不是修饰**（2026-10-03 修）：少了它，空标题的
      <h2> 宽度算出来是 0px（实测 getBoundingClientRect().width === 0，elementFromPoint
      在标题位置命中的是 .modal-head 容器）⇒ 用户点"标题那里"整个点空，
      焦点仍停在打开笔记时 box.focus() 落下的正文里，接着敲的字全进了正文
      （现象就是「打标题时光标跳到正文」）。撑满页头左侧后，标题区域整片可点。
   hover / focus 淡填充是同一件事的另一半：给出"这里可以点进去改"的可点性提示。 */
#kb-detail-title, #note-detail-title {
  flex: 1; min-width: 0; outline: none; cursor: text;
  font-family: var(--font); font-weight: 700; letter-spacing: -0.02em;
  word-break: break-word;
  border-radius: 6px; padding: 2px 8px; margin: -2px -8px;
  transition: background .12s, box-shadow .12s;
}
#kb-detail-title:hover, #note-detail-title:hover { background: var(--accent-soft); }
#kb-detail-title:focus, #note-detail-title:focus { background: var(--accent-soft); box-shadow: 0 0 0 2px var(--focus-glow-2); }
#kb-detail-title:empty::before, #note-detail-title:empty::before { content: attr(data-placeholder); color: var(--text-3); }

.kb-detail-content[contenteditable="true"] {
  cursor: text;
  outline: none;
}
.kb-detail-content[contenteditable="true"]:focus { outline: none; }
.kb-detail-content:empty::before { content: attr(data-placeholder); color: var(--text-3); }

/* Notion 风格浮动格式工具栏 */
.kb-edit-toolbar {
  position: fixed; z-index: 1200; display: none; align-items: center; gap: 2px;
  background: var(--glass-strong); border: 1px solid var(--border-strong); border-radius: 11px;
  padding: 4px 6px;
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  box-shadow: var(--shadow-3);
}
.kb-tb-btn {
  width: 30px; height: 30px; border: none; background: transparent; cursor: pointer;
  border-radius: 7px; color: var(--text-2); font-size: 14px;
  display: grid; place-items: center; transition: background .12s, color .12s;
}
.kb-tb-btn svg { width: 16px; height: 16px; display: block; --icon-w: 1.8; }
.kb-tb-btn:hover { background: var(--accent-soft); color: var(--text); }
.kb-tb-btn.active { background: var(--accent-bg); color: var(--on-accent); }
.kb-tb-sep { width: 1px; height: 18px; background: var(--border); margin: 0 4px; }

/* 字体颜色按钮 + 色板弹层 */
.kb-tb-btn { position: relative; }
.kb-tb-color-a { font-size: 15px; font-weight: 700; line-height: 1; }
.kb-tb-color-bar {
  position: absolute; left: 7px; right: 7px; bottom: 5px; height: 3px; border-radius: 2px;
  background: linear-gradient(90deg, #e5484d, #f59e0b, #16a34a, #2563eb, #7c3aed);
}
.kb-color-pop {
  position: absolute; top: calc(100% + 6px); left: 0; display: none;
  gap: 6px; padding: 8px; background-color: var(--panel);
  background-image: var(--panel-metal); border: 1px solid var(--border-strong); border-radius: 11px;
  box-shadow: var(--shadow-3); z-index: 10;
}
.kb-color-pop.show { display: flex; }
.kb-color-sw {
  width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--sw-border);
  cursor: pointer; padding: 0; transition: transform .1s;
}
.kb-color-sw:hover { transform: scale(1.14); }
.kb-color-clear {
  background-color: var(--panel-2);
  background-image: var(--panel-metal-3);
  color: var(--text-2); display: grid; place-items: center;
  border: 1px solid var(--border-strong);
}
.kb-color-clear svg { width: 13px; height: 13px; display: block; --icon-w: 2.1; }

/* 标记按钮（红色虚线下划线图标） */
.kb-tb-mark-ico { display: grid; place-items: center; color: var(--mark); --icon-w: 1.8; }

/* 正文标记：红色虚线下划线 */
.kb-mark {
  text-decoration: underline;
  text-decoration-style: dashed;
  text-decoration-color: var(--mark);
  text-underline-offset: 2px;
}

/* 标题刷按钮（H1/H2/H3，笔记编辑器专属） */
.kb-tb-hbtn { font-size: 12px; font-weight: 700; letter-spacing: .3px; }

/* ===== 笔记目录：吸顶头部右上角浮动按钮 + 下拉面板（锚在 .modal-head 内） ===== */
.note-toc-pop {
  position: absolute; top: calc(100% + 4px); right: 24px; z-index: 40;
  width: 264px; max-height: 56vh; overflow-y: auto; overscroll-behavior: contain;
  padding: 6px;
  background-color: var(--panel); background-image: var(--panel-metal);
  border: 1px solid var(--border-strong); border-radius: 12px;
  box-shadow: var(--shadow-3);
}
.note-toc-pop[hidden] { display: none; }
.note-toc-item {
  display: block; width: 100%; text-align: left;
  border: none; background: transparent; cursor: pointer;
  padding: 7px 10px; border-radius: 8px;
  font-size: 13px; line-height: 1.45; color: var(--text-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.note-toc-item:hover { background: var(--accent-soft); color: var(--text); }
.note-toc-item.lv2 { padding-left: 24px; }
.note-toc-item.lv3 { padding-left: 38px; font-size: 12.5px; }
.note-toc-item.lv4 { padding-left: 52px; font-size: 12px; color: var(--text-3); }
/* 跳转锚点距顶：别被吸顶头部盖住 */
.note-content h1, .note-content h2, .note-content h3,
.note-content h4, .note-content h5, .note-content h6 { scroll-margin-top: 70px; }
/* 跳转后的闪烁定位反馈 */
.toc-flash { animation: tocFlash 1.4s ease; border-radius: 6px; }
@keyframes tocFlash {
  0%, 55% { background: var(--accent-soft); box-shadow: 0 0 0 6px var(--accent-soft); }
  100% { background: transparent; box-shadow: none; }
}

/* 知识库列表项悬浮：显示该文章所有标记（无标记不显示） */
.kb-mark-tip {
  position: fixed; z-index: 1100; display: none; max-width: 320px;
  padding: 6px; border-radius: var(--radius-sm);
  background: transparent; color: var(--text);
  border: none;
  font-size: 13px; line-height: 1.5; pointer-events: none;
  box-shadow: none;
}
.kb-mark-tip.show { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.kb-mark-chip {
  display: inline-flex; align-items: center; padding: 3px 9px; border-radius: var(--radius-sm);
  background-color: var(--panel);
  background-image: var(--panel-metal); color: var(--text-2); border: 1px solid var(--mark); font-size: 15px;
  box-shadow: var(--shadow-1);
}
/* 每个设置分组 = 一张浮起白卡（原先裸挂在底色上，没有"容器"感） */
.setting-section {
  max-width: 760px; margin: 0 auto 16px;
  background-color: var(--panel);
  background-image: var(--panel-metal);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2), var(--inner-hi);
  padding: 20px 22px 18px;
}
.cb-pane { min-width: 0; }
/* 平台分流：整组隐藏（否则隐藏了 .cb-pane 后会残留一张空卡）。
   用显式 .is-mac-only 而非 :has()——第 2 组内部同时含 ios-only 与 mac-only 两个 pane，
   用 :has(.cb-pane.mac-only) 会把该组在 iOS 上一起误隐。 */
html.ios-app .setting-section.is-mac-only { display: none; }
/* 设置面板平台分流（微信接收）：iOS 显示完整配置控件；Mac 仅显示静态说明，不含任何 clawbot/relay 设置项 */
.ios-only { display: none; }
html.ios-app .ios-only { display: block; }
.mac-only { display: none; }
html:not(.ios-app) .mac-only { display: block; }
.setting-section h3 { font-size: 16px; font-weight: 700; margin-bottom: 8px; }
.setting-desc { font-size: 14px; color: var(--text-3); line-height: 1.5; margin-bottom: 14px; }
.setting-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-bottom: 12px; font-size: 15px;
}
.setting-row.stacked { flex-direction: column; align-items: stretch; gap: 6px; }
.setting-row.stacked span { font-size: 14px; color: var(--text-2); }
/* 输入框 = 凹面（内阴影），与凸起的卡片面形成一凹一凸 */
.setting-row input[type="text"],
.setting-row input[type="password"] {
  width: 100%; padding: 10px 12px; border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); background: var(--panel-2); color: var(--text);
  font-size: 15px; font-family: inherit;
  box-shadow: var(--inset-1);
  transition: border-color .14s, box-shadow .14s, background .14s;
}
.setting-row input[type="checkbox"] {
  width: 20px; height: 20px; accent-color: var(--accent);
}
/* 服务器连接：连接模式单选横排 */
.conn-mode-group { display: inline-flex; gap: 14px; }
.conn-mode-group label {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 15px; color: var(--text); cursor: pointer; user-select: none;
}
.conn-mode-group input[type="radio"] { width: 15px; height: 15px; accent-color: var(--accent); margin: 0; }
/* 输入框聚焦沿用扁平主题的柔和强调边 */
.setting-row input:focus {
  outline: none; border-color: var(--border-strong); background-color: var(--panel);
  background-image: var(--panel-metal);
  box-shadow: var(--shadow-1), 0 0 0 4px var(--focus-glow);
}
.setting-status {
  font-size: 13px; color: var(--text-3); margin: 10px 0 14px; min-height: 18px;
}
/* 设置状态提示：成功=中性深色，异常=功能红（不再用 ⚠️/✓ emoji） */
.setting-status.is-ok { color: var(--text-2); }
.setting-status.is-warn { color: var(--danger); }
/* ICP 备案号（合规展示，扁平弱化） */
.settings-footer {
  max-width: 760px; margin: 24px auto 0; padding-top: 14px;
  border-top: 1px solid var(--border);
  text-align: center; font-size: 13px;
}
.settings-footer a { color: var(--text-3); text-decoration: none; }
.settings-footer a:hover { color: var(--text-2); text-decoration: underline; }
.modal-body .btn-primary {
  width: 100%; padding: 10px; border-radius: var(--radius-sm);
  border: none; background: var(--accent-bg); color: var(--on-accent);
  font-size: 15px; font-weight: 600; cursor: pointer; font-family: inherit;
  box-shadow: var(--shadow-1), var(--inner-hi-dark);
  transition: background .12s, box-shadow .12s, transform .1s;
}
.modal-body .btn-primary:hover { background: var(--accent-hover-bg); box-shadow: var(--shadow-2), var(--inner-hi-dark); }
.modal-body .btn-primary:active { transform: translateY(1px); box-shadow: var(--shadow-1); }
.modal-body .btn-primary:disabled { opacity: .45; cursor: default; box-shadow: none; }
.modal-body .btn-ghost {
  width: 100%; padding: 10px; border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong); background-color: var(--panel);
  background-image: var(--panel-metal); color: var(--text-2);
  font-size: 14px; font-weight: 500; cursor: pointer; font-family: inherit;
  box-shadow: var(--shadow-1), var(--inner-hi);
  transition: color .12s, border-color .12s, box-shadow .12s;
}
.modal-body .btn-ghost:hover { color: var(--danger); border-color: var(--danger); box-shadow: var(--shadow-2), var(--inner-hi); }

/* ===== ＋ 新建弹窗（底部中央 ＋ 触发） ===== */
.add-overlay {
  align-items: center; justify-content: center; padding: 20px;
  /* 遮罩也走毛玻璃：底层内容被虚化压暗，弹层浮在最上层（L3） */
  background: var(--scrim);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  backdrop-filter: saturate(140%) blur(10px);
  z-index: 1050;
}
.add-sheet {
  width: 100%; max-width: 420px; background-color: var(--panel);
  background-image: var(--panel-metal);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 18px 20px 16px;
  box-shadow: var(--shadow-4), var(--inner-hi);
}
.add-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.add-head h2 { font-size: 19px; font-weight: 700; letter-spacing: -0.02em; }
.add-tabs {
  display: flex; gap: 2px;
  background-color: var(--panel-3); background-image: var(--panel-metal-3); border: 1px solid var(--border);
  border-radius: 11px; padding: 3px; margin-bottom: 12px;
  box-shadow: var(--inset-1);
}
.add-tab {
  flex: 1; border: none; background: transparent; cursor: pointer;
  padding: 7px 0; border-radius: 8px; font-size: 14px;
  color: var(--text-2); font-family: inherit; font-weight: 500;
  transition: background .14s, color .14s, box-shadow .14s;
}
.add-tab.active { background: var(--accent-bg); color: var(--on-accent); font-weight: 600; box-shadow: var(--shadow-1), var(--inner-hi-dark); }
.add-panel { display: none; }
.add-panel.active { display: block; }
.add-ta {
  width: 100%; min-height: 68px; resize: none;
  border: 1px solid var(--border-strong); border-radius: var(--radius);
  background: var(--panel-2); color: var(--text);
  font-size: 16px; line-height: 1.5; font-family: inherit;
  padding: 10px 12px; outline: none;
  box-shadow: var(--inset-1);
  transition: border-color .14s, box-shadow .14s, background .14s;
}
.add-ta:focus { border-color: var(--border-strong); background-color: var(--panel);
  background-image: var(--panel-metal); box-shadow: var(--shadow-1), 0 0 0 4px var(--focus-glow); }
.add-ta::placeholder { color: var(--text-3); }
.add-hint { font-size: 13px; color: var(--text-3); margin-top: 8px; }
.add-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 14px; }
.add-actions .btn-ghost {
  width: auto; padding: 8px 18px; border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong); background-color: var(--panel);
  background-image: var(--panel-metal); color: var(--text-2);
  font-size: 15px; font-weight: 500; cursor: pointer; font-family: inherit;
  box-shadow: var(--shadow-1), var(--inner-hi);
  transition: color .12s, border-color .12s, box-shadow .12s;
}
.add-actions .btn-ghost:hover { color: var(--danger); border-color: var(--danger); box-shadow: var(--shadow-2), var(--inner-hi); }
.add-actions .btn-primary {
  width: auto; padding: 8px 22px; border-radius: var(--radius-sm);
  border: none; background: var(--accent-bg); color: var(--on-accent);
  font-size: 15px; font-weight: 600; cursor: pointer; font-family: inherit;
  box-shadow: var(--shadow-1), var(--inner-hi-dark);
  transition: background .12s, box-shadow .12s, transform .1s;
}
.add-actions .btn-primary:hover { background: var(--accent-hover-bg); box-shadow: var(--shadow-2), var(--inner-hi-dark); }
.add-actions .btn-primary:active { transform: translateY(1px); box-shadow: var(--shadow-1); }
.add-actions .btn-primary:disabled { opacity: .45; cursor: default; }
.ios-app .add-sheet { max-width: none; }

/* 新建/编辑待办：日期 + 提醒复选框同行（扁平黑白灰主题） */
.add-todo-fields { margin-top: 12px; }
.add-todo-row { display: flex; align-items: center; gap: 14px; }
.add-todo-date {
  flex: 1; min-width: 0; padding: 8px 10px; border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); background: var(--panel-2); color: var(--text);
  font-size: 15px; font-family: inherit;
  box-shadow: var(--inset-1);
  transition: border-color .14s, box-shadow .14s, background .14s;
}
.add-todo-date:focus { outline: none; border-color: var(--border-strong); background-color: var(--panel);
  background-image: var(--panel-metal); box-shadow: var(--shadow-1), 0 0 0 4px var(--focus-glow); }
.remind-row {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  cursor: pointer; user-select: none; font-size: 15px; color: var(--text);
  white-space: nowrap;
}
.remind-row input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--accent); margin: 0; }

/* 待办编辑弹窗正文区 */
.todo-edit-body { display: flex; flex-direction: column; gap: 12px; margin: 4px 0 16px; }
.todo-edit-del { color: var(--danger); border-color: var(--border-strong); margin-right: auto; }
.todo-edit-del:hover { background: var(--danger); color: #fff; border-color: var(--danger); }

/* ===== 外观：主题选择器（设置面板内）=====
   两个选项各自渲染一次该主题的**金属材质**（拉丝 + 交替反射）当缩略图，所见即所得。
   选中态用 accent 描边 + 聚焦环，与全站其它"凹槽里选一个"的控件语言一致。 */
.theme-picker { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.theme-opt {
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 12px 14px; border-radius: var(--radius);
  border: 1px solid var(--border);
  background-color: var(--panel-2);
  background-image: var(--panel-metal-3);
  box-shadow: var(--inset-1);
  color: var(--text-3); font-family: inherit; text-align: left; cursor: pointer;
  transition: border-color .14s, box-shadow .14s, color .14s;
}
.theme-opt:hover { border-color: var(--border-strong); color: var(--text-2); }
.theme-opt.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--focus-glow), var(--shadow-1), var(--inner-hi);
}
.theme-sw {
  width: 100%; height: 36px; border-radius: 9px; margin-bottom: 9px;
  border: 1px solid rgba(0,0,0,.16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 -1px 0 rgba(0,0,0,.20);
}
.theme-sw-anodized {
  background-color: #e8eef8;
  background-image:
    repeating-linear-gradient(90deg, rgba(255,255,255,.42) 0 1px, rgba(90,120,165,.055) 1px 2px),
    linear-gradient(180deg, #ffffff 0%, #dfeafb 46%, #b9cdea 100%);
}
.theme-sw-titanium {
  background-color: #23262b;
  background-image:
    repeating-linear-gradient(90deg, rgba(255,255,255,.032) 0 1px, rgba(0,0,0,.05) 1px 2px),
    linear-gradient(135deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 42%),
    linear-gradient(180deg, #41464f 0%, #2b2f36 46%, #1d2025 100%);
}
.theme-name { font-size: 15px; font-weight: 600; color: var(--text); }
.theme-sub { font-size: 13px; }