.modal:has(#detailLeaveTitle) { width: min(440px, calc(100vw - 32px)); max-width: 440px; }
    .modal:has(#detailLeaveTitle) .row { display: flex; gap: 8px; margin-top: 20px; }
    .modal:has(#detailLeaveTitle) [data-leave="save"] { margin-left: auto; }
    @media (max-width: 420px) { .modal:has(#detailLeaveTitle) .row { display: grid; grid-template-columns: 1fr; } .modal:has(#detailLeaveTitle) [data-leave="save"] { margin-left: 0; } }
    #visBtn[hidden] { display: none !important; }
    .composer-audience { display: flex; align-items: center; margin-left: auto; flex-shrink: 0; }
    .vis-select-wrap {
      position: relative;
      display: inline-flex;
      align-items: center;
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: 20px;
      padding: 0 8px 0 10px;
      height: 28px;
      box-sizing: border-box;
      transition: all .15s ease;
    }
    @media (hover: hover) { .vis-select-wrap:hover { background: var(--hover); border-color: var(--fg3); } }
    /* 可见范围图标（lock / users / globe）：只显示与 data-vis 对应的一枚；私有为中性 --fg2，
       非私有（登录用户 / 公开）图标与描边用 --info（与卡片「公开」徽标同色），提醒这条他人可见 */
    .vis-select-wrap .vis-icon { display: none; width: 14px; height: 14px; flex-shrink: 0; color: var(--fg2); }
    .vis-select-wrap[data-vis="PRIVATE"] [data-vis-icon="PRIVATE"],
    .vis-select-wrap[data-vis="PROTECTED"] [data-vis-icon="PROTECTED"],
    .vis-select-wrap[data-vis="PUBLIC"] [data-vis-icon="PUBLIC"] { display: block; }
    .vis-select-wrap:not([data-vis="PRIVATE"]) { border-color: var(--info); }
    .vis-select-wrap:not([data-vis="PRIVATE"]) .vis-icon { color: var(--info); }
    .vis-select-wrap:focus-within { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-bg); }
    .vis-select-wrap select {
      appearance: none; -webkit-appearance: none;
      border: none; background: transparent;
      padding: 0 14px 0 6px; font-size: 12px; font-weight: 500;
      color: var(--fg); font-family: inherit; cursor: pointer; outline: none; line-height: 26px;
    }
    .vis-select-wrap .vis-chevron {
      position: absolute; right: 7px; width: 12px; height: 12px;
      color: var(--fg3); pointer-events: none;
    }
    .att-lib [data-library-status], .att-lib [data-availability] { color: var(--fg); margin-top: 8px; }
    .att-lib [data-library-status] { margin-bottom: 8px; }
    /* 顶栏同步状态胶囊（#btnSyncStatus）：图标 + 短文案，尺寸与圆角对齐 .icon-btn。
       data-state 由 ui/notify.js 写入：never（尚未同步；首帧无属性时同此）/ idle / offline / pending / syncing / error。
       正常态安静（透明底、--fg2），离线用实心底提示，待同步用主色，受阻与未完成用 --danger。
       不参与收缩：顶栏变窄时让标题省略，状态文案不被截断。 */
    .sync-status-btn {
      flex: none; box-sizing: border-box; min-width: 32px; max-width: 220px; height: 32px; padding: 0 10px 0 8px;
      display: inline-flex; align-items: center; justify-content: center; gap: 6px;
      border-radius: 8px; font-size: 12px; font-weight: 500; line-height: 1; white-space: nowrap;
      color: var(--fg2); background: transparent; transition: background .15s, color .15s;
    }
    .sync-status-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
    .sync-status-btn svg { display: none; flex: none; width: 16px; height: 16px; }
    .sync-status-btn:not([data-state]) [data-sync-icon="never"],
    .sync-status-btn[data-state="never"] [data-sync-icon="never"],
    .sync-status-btn[data-state="idle"] [data-sync-icon="idle"],
    .sync-status-btn[data-state="offline"] [data-sync-icon="offline"],
    .sync-status-btn[data-state="pending"] [data-sync-icon="pending"],
    .sync-status-btn[data-state="syncing"] [data-sync-icon="syncing"],
    .sync-status-btn[data-state="error"] [data-sync-icon="error"] { display: block; }
    .sync-status-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
    /* 首帧（脚本尚未写入状态）只有图标，不留空文案占位 */
    .sync-status-btn:not([data-state]) { padding: 0; }
    .sync-status-btn:not([data-state]) .sync-status-text { display: none; }
    .sync-status-btn[data-state="offline"] { color: var(--fg); background: var(--muted); }
    .sync-status-btn[data-state="pending"] { color: var(--primary-deep); }
    .sync-status-btn[data-state="error"] { color: var(--danger); font-weight: 600; }
    .sync-status-btn[data-state="syncing"] svg { animation: spin .8s linear infinite; }
    @media (prefers-reduced-motion: reduce) { .sync-status-btn[data-state="syncing"] svg { animation: none; } }
    @media (hover: hover) {
      .sync-status-btn:hover { background: var(--hover); color: var(--fg); }
      .sync-status-btn[data-state="offline"]:hover { background: var(--muted-hover); }
      .sync-status-btn[data-state="pending"]:hover { color: var(--primary-deep); }
      .sync-status-btn[data-state="error"]:hover { color: var(--danger); }
    }
    /* 手机顶栏空间有限：正常与过渡状态（已同步 / 尚未同步 / 待同步 / 同步中）只留图标，状态由 aria-label 说明，
       待同步条数看旁边刷新按钮的角标；离线与受阻保留短文字，离线时的条数同样省略。
       同步中是一闪而过的状态，不切换文字以免胶囊忽宽忽窄；图标用不带箭头的 loader-circle，不与刷新按钮的箭头混淆 */
    @media (max-width: 768px) {
      .sync-status-btn[data-state="never"], .sync-status-btn[data-state="idle"],
      .sync-status-btn[data-state="pending"], .sync-status-btn[data-state="syncing"] { padding: 0; }
      .sync-status-btn[data-state="never"] .sync-status-text, .sync-status-btn[data-state="idle"] .sync-status-text,
      .sync-status-btn[data-state="pending"] .sync-status-text, .sync-status-btn[data-state="syncing"] .sync-status-text,
      .sync-status-extra { display: none; }
      .sync-status-btn[data-state="never"] svg, .sync-status-btn[data-state="idle"] svg,
      .sync-status-btn[data-state="pending"] svg, .sync-status-btn[data-state="syncing"] svg,
      .sync-status-btn:not([data-state]) svg { width: 18px; height: 18px; }
    }
    .sync-modal { width: min(440px, calc(100vw - 24px)); }
    .sync-modal h2 { margin: 0; font-size: 17px; flex: 1; }
    .sync-body { padding: 20px; color: var(--fg); }
    .sync-body p { margin: 8px 0 20px; }
    .sync-body dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin: 0; font-size: 13px; }
    .sync-body dd { margin: 0; text-align: right; overflow-wrap: anywhere; }
    .sync-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; padding: 12px 20px 20px; }
    /* ============================================================
       喵墨 Meowmo · UI v2（Flomo 布局 × dsh-mobile 交互）
       设计规范：间距 4/8/12/16/24 · 字号 11/12/14/17
       图标：Lucide 线性 SVG（stroke 1.8）· 禁 emoji
       触控目标 ≥44px（窄屏）· safe-area 适配 · 深浅色跟系统
       ============================================================ */
    :root {
      --danger: #D93025; --radius: 10px; --shadow: 0 1px 2px rgba(0,0,0,.05);
      --nav-w: 260px; --on-primary: #FFFFFF; --bg2: var(--muted);
    }
    @media (prefers-color-scheme: dark) {
      :root { --shadow: 0 1px 2px rgba(0,0,0,.3); --on-primary: #12131A; }
    }
    /* THEMES:BEGIN 主题色（html[data-theme]，theme-boot.js 首帧前设置；列表与名称见 theme.js）。
       无 data-theme 或取值未知时回落 :root = 默认墨蓝。深色块必须写在浅色块之后，且选择器特异性一致。
       约束（test/theme.test.mjs 校验）：--primary 对 --card、--on-primary 对 --primary 对比度 ≥ 4.5。
       --fg2（计数、说明等承载信息的小字）对 --card 与 --bg 均 ≥ 4.5，且 --fg 对比度至少为它的 1.6 倍以保留层级；
       --fg3 仅用于图标、装饰与禁用态，暂无下限。浅色 --fg2 统一取 OKLCH 明度 0.526，保留各主题色相与彩度。
       --info：“公开/登录可见”标记；--accent：反向链接。两者须与本主题主色区分。 */
    :root, :root[data-theme="ink"] {
      --bg: #F7F6F2; --card: #FFFFFF; --fg: #3A3A42; --fg2: #6B6973; --fg3: #C3C1C8;
      --border: #EAE8E2; --primary: #3E5BB8; --primary-deep: #334C9C; --primary-bg: #ECEFF9;
      --muted: #F0EFEA; --muted-hover: #E7E5DF; --hover: #F3F2EE;
      --info: #0F7F86; --accent: #C77F00;
    }
    :root[data-theme="amber"] {
      --bg: #FAF7F0; --card: #FFFFFF; --fg: #3F3A33; --fg2: #71695E; --fg3: #C9C1B4;
      --border: #EDE7DB; --primary: #9A5F06; --primary-deep: #82500A; --primary-bg: #FBF1DE;
      --muted: #F3EEE4; --muted-hover: #EAE3D6; --hover: #F6F2EA;
      --info: #3E5BB8; --accent: #7A4FB0;
    }
    :root[data-theme="green"] {
      --bg: #FAFAFA; --card: #FFFFFF; --fg: #454545; --fg2: #6A6A6A; --fg3: #C3C3C3;
      --border: #EBEBEB; --primary: #178048; --primary-deep: #126B3C; --primary-bg: #E6F5EC;
      --muted: #F2F2F2; --muted-hover: #E9E9E9; --hover: #F5F5F5;
      --info: #4F6EF2; --accent: #C77F00;
    }
    :root[data-theme="plum"] {
      --bg: #F8F7FA; --card: #FFFFFF; --fg: #3D3A42; --fg2: #6C6873; --fg3: #C5C2CA;
      --border: #ECE9F0; --primary: #7A4FB0; --primary-deep: #663F99; --primary-bg: #F1EBF9;
      --muted: #F1EFF4; --muted-hover: #E8E5EC; --hover: #F4F2F6;
      --info: #0F7F86; --accent: #C77F00;
    }
    @media (prefers-color-scheme: dark) {
      :root, :root[data-theme="ink"] {
        --bg: #151519; --card: #1D1D22; --fg: #E8E7EC; --fg2: #9C9AA6; --fg3: #696773;
        --border: #2A2A31; --primary: #93A3F2; --primary-deep: #7F91E8; --primary-bg: #23273D;
        --muted: #25252B; --muted-hover: #2E2E35; --hover: #222228;
        --info: #5CC8CF; --accent: #F5B544;
      }
      :root[data-theme="amber"] {
        --bg: #171512; --card: #1F1D1A; --fg: #ECE7DF; --fg2: #A39B8E; --fg3: #6E675C;
        --border: #2E2A24; --primary: #F2B84B; --primary-deep: #E4A836; --primary-bg: #2E2617;
        --muted: #28251F; --muted-hover: #322E27; --hover: #24211C;
        --info: #93A3F2; --accent: #C3A6F2;
      }
      :root[data-theme="green"] {
        --bg: #161616; --card: #1E1E1E; --fg: #E9E9E9; --fg2: #9A9A9A; --fg3: #6B6B6B;
        --border: #2B2B2B; --primary: #34D985; --primary-deep: #2BC473; --primary-bg: #1B2D23;
        --muted: #262626; --muted-hover: #303030; --hover: #242424;
        --info: #8EA2FF; --accent: #F5B544;
      }
      :root[data-theme="plum"] {
        --bg: #161519; --card: #1E1C22; --fg: #E9E6EE; --fg2: #9E99A8; --fg3: #6B6774;
        --border: #2C2932; --primary: #C3A6F2; --primary-deep: #B293EA; --primary-bg: #2A2338;
        --muted: #26232B; --muted-hover: #302C36; --hover: #232027;
        --info: #5CC8CF; --accent: #F5B544;
      }
    }
    /* THEMES:END */
    *, *::before, *::after {
      box-sizing: border-box;
      -webkit-tap-highlight-color: transparent;
      scrollbar-width: none !important;
      -ms-overflow-style: none !important;
    }
    *::-webkit-scrollbar {
      display: none !important;
      width: 0 !important;
      height: 0 !important;
    }
    html, body { height: 100%; }
    html {
      background: var(--bg); /* iOS 状态栏底色判定读 html 背景——必须纯色 */
      overscroll-behavior: none; /* 视口级禁令：根滚动器不许越界回弹/被链式拖动（v0.9.82——body 上的那条管不到根滚动器，侧栏页死区纵拖曾把整页拖出界露空白） */
      height: 100%; height: 100dvh; /* 根元素与内容严格等高：文档零可滚动量（dvh 不支持时回退 100%） */
    }
    body {
      margin: 0; background: var(--bg); color: var(--fg);
      font: 14px/1.65 -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Segoe UI", Roboto, sans-serif;
      overscroll-behavior: none;
      overflow: hidden; /* 经标准传导规则作用到视口：根滚动器在任何 iOS 版本都无法平移/回弹（v0.9.83——html 的 overscroll 禁令 iOS<16 不认，侧栏页死区纵拖仍把整页拖出界） */
    }
    button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; padding: 0; }
    input, textarea, select { font: inherit; color: inherit; }
    [hidden] { display: none !important; }
    /* iOS 触屏：按钮/图标/芯片长按不弹系统菜单、不误选文字；正文与输入框保持可选中复制 */
    button, .icon-btn, .tool, .nav-item, .tag-pill, .filter-chip, .menu-item, .fab, svg {
      -webkit-touch-callout: none; -webkit-user-select: none; user-select: none;
    }
    button, .icon-btn, .tool, .nav-item, .tag-pill, .filter-chip, .menu-item, .fab, .side-search-chip {
      touch-action: manipulation;
    }
    /* 卡片内缩略图：长按不弹「存储图片/拷贝」，点击走应用内预览 */
    .att-cell img, .memo .md-img, .composer-att img { -webkit-touch-callout: none; }
    /* 横向滚动内容（代码块/公式/表格/附件条/热力图）到边不把手势链给翻页器拉出侧栏 */
    pre, .katex-display, .katex, .md-table, .composer-attachments, .heatmap, .settings-nav-tabs {
      overscroll-behavior-x: contain;
    }

    /* ---------- 布局：桌面两栏 / 手机横向翻页 ---------- */
    .scroll-wrap { display: flex; height: 100dvh; }
    /* 横屏刘海/灵动岛：左右安全区（竖屏 inset 为 0，无影响）。侧栏吃左、主区吃右，
       宽屏横屏（>768px）走桌面两栏时同样生效。 */
    .page.side { padding-left: env(safe-area-inset-left, 0px); }
    .page.main { padding-right: env(safe-area-inset-right, 0px); }
    .detail-page { padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); }
    .fab { margin-right: env(safe-area-inset-right, 0px); }
    .page { overflow-y: hidden; } /* -webkit-overflow-scrolling 已移除：与 overflow:hidden 组合是 iOS 老怪癖面（hidden 容器仍可被触摸平移）；iOS 13+ 惯性滚动本就默认开启 */
    .page.side {
      flex: 0 0 var(--nav-w); background: var(--card);
      border-right: 1px solid var(--border);
      transition: margin-left .22s ease;
      /* 侧栏不整体滚动——让 .side-inner 撑满高度，只有 nav 内部滚动（标题区固定，下面可滚动） */
      overflow-y: hidden;
    }
    /* 主区：整体滚动；topbar 用 fixed 物理固定在视口顶部（iOS 最稳，不依赖 sticky/flex 嵌套计算） */
    .page.main {
      flex: 1; min-width: 0; padding-bottom: env(safe-area-inset-bottom, 0px);
      overflow-y: auto; -webkit-overflow-scrolling: touch;
      overflow-anchor: auto;
    }
    .main-scroll {
      /* 保留元素（不再滚动，滚动回到 .page.main），避免 flex 嵌套宽度计算问题 */
      min-width: 0;
    }
    /* 下拉刷新指示器：卡片流顶部元素（正常流，跟随主区滚动；非 fixed 悬浮块——侧栏打开时不遮挡）。
       高度由 JS 逐帧直写（rAF 节流）实现跟手；.dragging 时关掉 transition 避免跟手滞后，
       松手回弹/刷新态再开 transition 做顺滑动画 */
    .ptr-zone { position: relative; }
    .ptr {
      position: absolute; left: 0; right: 0; top: 0; height: 48px;
      display: flex; align-items: center; justify-content: center; gap: 7px;
      color: var(--fg3); font-size: 13px;
      opacity: 0; transition: opacity .18s ease; pointer-events: none;
    }
    .ptr.visible { opacity: 1; }
    /* 内容层自身铺底遮住指示器；只动 transform（合成器线程），避免每帧重排整张列表 */
    .ptr-content { position: relative; background: var(--bg); transition: transform .22s ease; }
    .ptr-content.dragging { transition: none; will-change: transform; }
    .ptr .ptr-spin { width: 16px; height: 16px; flex-shrink: 0; transition: transform .18s ease; }
    .ptr.ready .ptr-spin { transform: rotate(180deg); }
    .ptr.refreshing .ptr-spin { animation: ptrSpin .8s linear infinite; }
    @keyframes ptrSpin { to { transform: rotate(360deg); } }
    /* 侧栏折叠由 @media (min-width: 769px) 桌面规则统一驱动平滑收合与居中 */
    

    /* ---------- 侧边栏 ---------- */
    .side-inner { display: flex; flex-direction: column; height: 100%; padding:
      calc(env(safe-area-inset-top,0px) + 12px) 10px 12px; }
    .brand { display: flex; align-items: center; gap: 8px; padding: 2px 8px 12px; }
    .brand-logo {
      width: 28px; height: 28px; border-radius: 8px; overflow: hidden; flex-shrink: 0;
      box-shadow: 0 0 0 1px var(--border);
    }
    .brand-logo img { display: block; width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; -webkit-touch-callout: none; user-select: none; }
    .brand-name { font-size: 15px; font-weight: 700; letter-spacing: .2px; }
    .sync-row {
      display: flex; align-items: center; gap: 8px; margin: 0 2px 12px; padding: 7px 10px;
      background: var(--bg); border-radius: 8px; font-size: 12px; color: var(--fg2);
    }
    .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--primary); flex-shrink: 0; }
    .dot.off { background: var(--fg3); }
    nav {
      flex: 1; min-height: 0; overflow-y: auto; margin: 0 -2px;
      scrollbar-width: none;
      -ms-overflow-style: none;
    }
    nav::-webkit-scrollbar { display: none; }
    .nav-label { font-size: 11px; color: var(--fg3); padding: 10px 10px 5px; letter-spacing: .4px; }
    /* 侧栏标签分区头部与工具栏 */
    .side-tag-section { margin-bottom: 6px; }
    .side-tag-section[hidden] { display: none !important; }
    .side-sec-header {
      display: flex; align-items: center; justify-content: space-between;
      padding: 6px 4px 4px 6px; user-select: none;
    }
    .side-sec-title {
      display: inline-flex; align-items: center; gap: 5px;
      font-size: 11px; color: var(--fg2); letter-spacing: .4px;
      cursor: pointer; border-radius: 6px; padding: 2px 4px;
      transition: color .15s, background .15s;
    }
    @media (hover: hover) { .side-sec-title:hover { color: var(--fg); background: var(--bg); } }
    .side-sec-title:active { transform: scale(.98); }
    .side-sec-chev {
      width: 12px; height: 12px; color: var(--fg3);
      transition: transform .18s ease; flex-shrink: 0;
    }
    .side-sec-header.collapsed .side-sec-chev {
      transform: rotate(-90deg);
    }
    .side-sec-actions {
      display: flex; align-items: center; gap: 2px;
    }
    .side-sec-btn {
      display: inline-flex; align-items: center; justify-content: center;
      width: 24px; height: 24px; border-radius: 4px;
      color: var(--fg3); background: transparent; cursor: pointer;
      transition: color .15s, background .15s, border-color .15s;
    }
    .side-sec-btn svg { width: 14px; height: 14px; }
    .side-sec-btn.open { color: var(--fg); background: var(--bg); }
    @media (hover: hover) { .side-sec-btn:hover { color: var(--fg); background: var(--bg); } }
    .side-sec-btn.on { color: var(--primary-deep); background: var(--primary-bg); font-weight: 600; }
    .tag-settings-wrap { position: relative; }
    .tag-settings-pop {
      position: absolute; right: 0; top: calc(100% + 4px); z-index: 100;
      background: var(--card); border: 1px solid var(--border); border-radius: 8px;
      box-shadow: 0 6px 22px rgba(0,0,0,.15);
      width: 170px; padding: 4px;
      transform-origin: top right;
      transition: opacity .14s ease, transform .16s cubic-bezier(.4, 0, .2, 1);
      opacity: 0; transform: scale(.94) translateY(-4px);
      pointer-events: none;
    }
    .tag-settings-pop.open { opacity: 1; transform: scale(1) translateY(0); pointer-events: auto; }
    .tag-settings-group-title {
      font-size: 11px; color: var(--fg2); padding: 4px 8px 2px; user-select: none;
    }
    .tag-settings-pop .menu-item {
      display: flex; align-items: center; gap: 7px; width: 100%;
      padding: 6px 8px; font-size: 13px; border-radius: 6px; color: var(--fg);
      cursor: pointer; text-align: left; border: none; background: none;
    }
    @media (hover: hover) { .tag-settings-pop .menu-item:hover { background: var(--bg); } }
    .tag-settings-pop .menu-item svg { width: 14px; height: 14px; color: var(--fg3); flex-shrink: 0; }
    .tag-settings-pop .menu-item .icon-check {
      margin-left: auto; width: 13px; height: 13px; color: var(--primary);
      display: none;
    }
    .tag-settings-pop .menu-item.on .icon-check { display: block; }
    /* 标签搜索过滤输入框 */
    .tag-search-wrap { padding: 2px 6px 6px 6px; }
    .tag-search-wrap[hidden] { display: none !important; }
    .tag-search-inner {
      display: flex; align-items: center; gap: 6px;
      background: var(--bg); border: 1px solid var(--border);
      border-radius: 6px; padding: 3px 8px;
      transition: border-color .15s, box-shadow .15s;
    }
    .tag-search-inner:focus-within {
      border-color: var(--primary);
      box-shadow: 0 0 0 2px var(--primary-bg);
    }
    .tag-search-icon { width: 13px; height: 13px; color: var(--fg3); flex-shrink: 0; }
    .tag-search-input {
      border: none; background: transparent; outline: none;
      font-size: 12px; color: var(--fg); width: 100%; min-width: 0; padding: 0;
    }
    /* 自带清除按钮的搜索框不再叠加浏览器原生清除钮（type="search" 有值时 Chromium/Safari 会画一个，变成两个叉） */
    .tag-search-input::-webkit-search-cancel-button,
    .searchbox input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none; }
    .tag-search-clear {
      display: inline-flex; align-items: center; justify-content: center;
      width: 16px; height: 16px; border-radius: 3px;
      color: var(--fg3); cursor: pointer; background: transparent;
    }
    @media (hover: hover) { .tag-search-clear:hover { color: var(--fg); background: var(--card); } }
    .tag-search-clear svg { width: 11px; height: 11px; }
    /* 树模式标签行（对标 flomo 质感：40px 行高、纯粹呼吸感、细线 chevron、行末 ···） */
    .nav-item {
      display: flex; align-items: center; gap: 7px; width: 100%;
      padding: 6px 10px; border-radius: 8px; font-size: 14px; color: var(--fg);
      min-height: 38px; position: relative;
      transition: background .12s ease, color .12s ease;
      cursor: pointer; user-select: none; box-sizing: border-box; text-align: left;
    }
    .nav-item svg { width: 15px; height: 15px; color: var(--fg3); flex-shrink: 0; }
    @media (hover: hover) { .nav-item:hover { background: var(--bg); } }
    .nav-item:active { transform: scale(.99); }
    .nav-item.on { background: var(--primary-bg); color: var(--primary-deep); font-weight: 600; }
    .nav-item.on svg { color: var(--primary-deep); }
    .nav-item.in { color: var(--primary-deep); }
    .nav-item .tname {
      flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left;
    }
    .nav-item .cnt {
      font-size: 12px; color: var(--fg2); font-variant-numeric: tabular-nums;
      font-weight: normal; margin-left: 2px;
    }
    /* 计数是纯数字，紧跟名称（「全部笔记 11」）。靠右成列在宽侧栏里离名称太远，又停在 ··· 让出的列上，
       悬空在行中间（MEMO-009 用户反馈）。标签行有计数时名称只占自身宽度，计数把箭头和 ··· 推到行末 */
    .nav-item > .cnt { flex-shrink: 0; }
    .tag-nav-item:has(> .cnt) > .tname { flex: 0 1 auto; }
    .tag-nav-item > .cnt { margin-right: auto; }
    .nav-item.on .cnt { color: var(--primary-deep); opacity: 0.85; }
    .nav-item .chev-wrap {
      display: inline-flex; align-items: center; justify-content: center;
      width: 24px; height: 24px; border-radius: 4px;
      margin-left: 2px; flex-shrink: 0; cursor: pointer;
      color: var(--fg3); transition: background .15s, color .15s, transform .12s;
    }
    @media (hover: hover) { .nav-item .chev-wrap:hover {
      background: var(--bg);
      color: var(--fg);
    } }
    .nav-item .chev-wrap:active {
      transform: scale(0.92);
    }
    .nav-item .chev { width: 12px; height: 12px; transition: transform .18s ease; }
    .nav-item .chev.open { transform: rotate(90deg); }
    /* 桌面指针（≥769px 且能悬停）：展开箭头与前导图标（# / 置顶针 / 自定义图标）共用一个位置，
       平时显示图标，悬停有子标签的行时换成箭头，行末不再单独占一列（MEMO-010）。手机与触屏平板保持行末常显箭头 */
    @media (min-width: 769px) and (hover: hover) and (pointer: fine) {
      .tag-nav-item { --tag-lead-x: 10px; }
      .tag-children .tag-nav-item { --tag-lead-x: 8px; }
      .tag-nav-item > .chev-wrap {
        position: absolute; top: 50%; left: calc(var(--tag-lead-x) - 4px); z-index: 1;
        width: 22px; height: 22px; margin: -11px 0 0;
        opacity: 0; transition: opacity .12s ease, background .15s, color .15s, transform .12s;
      }
      .tag-nav-item > .chev-wrap:hover { background: var(--muted-hover); }
      .tag-nav-item > :is(.hash, .icon-pinned-lead, .tag-emoji-icon) { transition: opacity .12s ease, transform .15s ease; }
      .tag-nav-item:hover > .chev-wrap { opacity: 1; }
      .tag-nav-item:has(> .chev-wrap):hover > :is(.hash, .icon-pinned-lead, .tag-emoji-icon) { opacity: 0; }
    }
    .nav-item .hash { width: 14px; height: 14px; color: var(--fg3); }
    .nav-item .tag-emoji-icon {
      width: 16px; height: 16px; display: inline-flex; align-items: center; justify-content: center;
      font-size: 14px; line-height: 1; flex-shrink: 0; transition: transform .15s ease; cursor: pointer;
    }
    @media (hover: hover) { .nav-item .tag-emoji-icon:hover { transform: scale(1.22); } }
    .tag-inline-emoji { font-size: 13px; margin-right: 3px; line-height: 1; vertical-align: -1px; }
    
    /* 行末 ··· 更多操作及弹层 */
    .tag-more-wrap {
      position: relative; display: inline-flex; align-items: center; justify-content: center;
      margin-left: 2px; flex-shrink: 0;
    }
    .btn-tag-more {
      display: inline-flex; align-items: center; justify-content: center;
      width: 26px; height: 26px; border-radius: 4px;
      color: var(--fg3); cursor: pointer; opacity: 0.5;
      transition: opacity .15s, background .15s, color .15s;
    }
    .btn-tag-more.open {
      opacity: 1; color: var(--fg); background: var(--bg);
    }
    @media (hover: hover) { .nav-item:hover .btn-tag-more, .btn-tag-more:hover {
      opacity: 1; color: var(--fg); background: var(--bg);
    } }
    .btn-tag-more svg { width: 14px; height: 14px; }
    /* 桌面指针设备：··· 平时隐藏，悬停行或键盘聚焦时出现；触屏保持常显 */
    @media (hover: hover) and (pointer: fine) {
      .btn-tag-more { opacity: 0; }
      .nav-item:focus-visible .btn-tag-more, .btn-tag-more:focus-visible { opacity: 1; }
    }
    @media (hover: none), (any-pointer: coarse) {
      .btn-tag-more { opacity: 0.85; }
    }
    @media (hover: hover) and (pointer: fine) {
      .nav-item:focus-within .btn-tag-more { opacity: 1; }
    }
    /* 展开操作弹层时将宿主行提升至最顶层，彻底解决移动端触控命中相邻下方标签的层级穿透问题 */
    .nav-item.pop-open,
    .nav-item:has(.tag-item-pop.open) {
      z-index: 100 !important;
    }
    /* 按下弹层里的菜单项时宿主行不缩放：transform 会让 fixed 弹层改以该行为定位基准而跳位 */
    .nav-item.pop-open:active,
    .nav-item:has(.tag-item-pop.open):active { transform: none; }
    .tag-more-wrap.open,
    .tag-more-wrap:has(.tag-item-pop.open) {
      z-index: 101 !important;
    }
    /* 外观沿用通用 .menu-pop（它定义在后、同优先级，原先这里的外观声明从未生效）；这里只改定位：
       按视口固定，坐标与上下方向由 app.js placeTagPop 按实际高度计算。absolute 时会被 nav 的滚动区裁掉，
       中段标签的菜单下半截看起来被底部账户行挡住（MEMO-010）。三个类的优先级压过 .menu-pop / .menu-pop.drop-up 的 top/right/bottom */
    .tag-more-wrap > .menu-pop.tag-item-pop {
      position: fixed; top: 0; left: 0; right: auto; bottom: auto;
      max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); overflow: hidden auto; box-sizing: border-box;
    }
    .tag-item-pop.open {
      opacity: 1; transform: scale(1) translateY(0); pointer-events: auto;
    }
    .tag-item-pop.drop-up {
      transform-origin: bottom right;
      transform: scale(.94) translateY(3px);
    }
    .tag-item-pop.drop-up.open {
      transform: scale(1) translateY(0);
    }
    .tag-item-pop .menu-item {
      display: flex; align-items: center; gap: 8px; width: 100%;
      min-height: 38px; padding: 7px 10px; font-size: 13.5px; border-radius: 6px; color: var(--fg);
      cursor: pointer; white-space: nowrap; border: none; background: none; box-sizing: border-box; text-align: left;
      touch-action: manipulation; -webkit-tap-highlight-color: transparent;
    }
    @media (pointer: coarse), (max-width: 768px) {
      .tag-item-pop .menu-item {
        min-height: 42px;
        padding: 9px 12px;
        font-size: 14px;
      }
    }
    @media (hover: hover) { .tag-item-pop .menu-item:hover { background: var(--bg); } }
    .tag-item-pop .menu-item svg { width: 14px; height: 14px; color: var(--fg3); flex-shrink: 0; }
    .tag-item-pop .menu-item.btn-pin-tag.pinned { color: var(--primary-deep); }
    .tag-item-pop .menu-item.btn-pin-tag.pinned svg { color: var(--primary); fill: currentColor; }
    .tag-item-pop .menu-item.btn-unpin { color: var(--danger); }
    .tag-item-pop .menu-item.btn-unpin svg { color: var(--danger); }
    /* 胶囊平铺模式样式（紧凑轻盈） */
    .tag-pills-wrap {
      display: flex; flex-wrap: wrap; gap: 5px;
      padding: 4px 6px 8px 6px;
    }
    .tag-pill {
      display: inline-flex; align-items: center; gap: 3px;
      padding: 2.5px 8px; border-radius: 999px;
      background: var(--bg); border: 1px solid var(--border);
      font-size: 12px; color: var(--fg); cursor: pointer;
      transition: background .15s, border-color .15s, color .15s, transform .12s;
      max-width: 100%;
    }
    @media (hover: hover) { .tag-pill:hover {
      background: var(--card);
      border-color: var(--fg3);
      color: var(--fg);
    } }
    .tag-pill:active {
      transform: scale(0.96);
    }
    .tag-pill.on {
      background: var(--primary-bg);
      border-color: var(--primary);
      color: var(--primary-deep);
      font-weight: 600;
    }
    .tag-pill.in {
      color: var(--primary-deep);
      border-color: var(--primary);
    }
    .tag-pill-prefix {
      color: var(--fg3); font-weight: 600; font-size: 11px;
    }
    .tag-pill-emoji {
      font-size: 13px; line-height: 1; margin-right: 2px; display: inline-block; vertical-align: middle;
    }
    .tag-pill.on .tag-pill-prefix {
      color: var(--primary-deep);
    }
    .tag-pill-name {
      max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .tag-pill-cnt {
      font-size: 11px; color: var(--fg2); font-variant-numeric: tabular-nums;
      font-weight: normal; margin-left: 4px;
    }
    .tag-pill.on .tag-pill-cnt {
      color: var(--primary-deep); opacity: 0.85;
    }
    /* 标签区空态：与导航文字起点（10 + 图标 15 + 间距 7 = 32px）左对齐 */
    .nav-empty-hint {
      font-size: 12px; color: var(--fg2); padding: 8px 10px 8px 32px; text-align: left;
    }
    .tag-empty-guide {
      display: flex; align-items: center; gap: 7px; width: 100%; box-sizing: border-box;
      min-height: 34px; padding: 6px 10px; border-radius: 8px;
      font-size: 13px; color: var(--fg2); text-align: left;
      transition: background .12s ease, color .12s ease;
    }
    .tag-empty-guide svg { width: 15px; height: 15px; color: var(--fg3); flex-shrink: 0; }
    @media (hover: hover) {
      .tag-empty-guide:hover { background: var(--bg); color: var(--fg); }
      .tag-empty-guide:hover svg { color: var(--primary); }
    }
    /* 置顶标签快捷区 */
    .pinned-tag-list { display: flex; flex-direction: column; gap: 2px; }
    .pinned-tag-list .nav-item .icon-pinned-lead {
      width: 14px; height: 14px; color: var(--primary); flex-shrink: 0; fill: currentColor;
    }
    /* 树形子节点多级垂直导引线（Tree Guide Lines，精准对标 flomo） */
    .tag-children {
      position: relative;
      display: flex; flex-direction: column; gap: 2px;
      margin-left: 17px;
      padding-left: 6px;
      border-left: 1px solid var(--border);
    }
    .tag-children .nav-item {
      min-height: 36px;
      padding: 4px 10px 4px 8px; /* 右侧与父级行一致，计数与 ··· 保持同列 */
      font-size: 13.5px;
    }
    .tag-children .hash { width: 13px; height: 13px; opacity: .8; }
    /* 侧栏底部：左侧当前账户（头像 + 名称 + 服务器），右侧「…」更多操作；底部让出 iOS 主屏指示条 */
    .side-foot {
      display: flex; align-items: center; gap: 4px;
      padding-top: 8px; padding-bottom: env(safe-area-inset-bottom, 0px);
      border-top: 1px solid var(--border); position: relative;
    }
    .side-account {
      flex: 1 1 auto; min-width: 0; min-height: 40px;
      display: flex; align-items: center; gap: 9px;
      padding: 5px 8px; border-radius: 8px; text-align: left; color: var(--fg);
      transition: background .15s;
    }
    @media (hover: hover) { .side-account:hover { background: var(--bg); } }
    .side-avatar {
      width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
      display: inline-flex; align-items: center; justify-content: center;
      background: var(--primary-bg); color: var(--primary-deep);
      font-size: 13px; font-weight: 600; line-height: 1;
    }
    .side-avatar svg { width: 15px; height: 15px; }
    .side-avatar-initial { display: none; }
    .side-avatar.has-initial svg { display: none; }
    .side-avatar.has-initial .side-avatar-initial { display: inline; }
    .side-avatar.is-anon { background: var(--muted); color: var(--fg2); }
    .side-account-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
    .side-account-name, .side-account-host { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .side-account-name { font-size: 13px; font-weight: 600; line-height: 1.3; }
    .side-account-host { font-size: 11px; line-height: 1.3; color: var(--fg2); }
    .side-foot-more-wrap { position: relative; flex-shrink: 0; margin-right: 4px; }
    .side-more-btn {
      position: relative;
      width: 28px; height: 28px; border-radius: 6px; color: var(--fg2);
      display: flex; align-items: center; justify-content: center; cursor: pointer;
    }
    .side-more-btn.open { background: var(--bg); color: var(--fg); }
    @media (hover: hover) { .side-more-btn:hover { background: var(--bg); color: var(--fg); } }
    .side-more-btn svg { width: 16px; height: 16px; }
    /* 有新版本：「…」图标框右上角 6px 主色点（描一圈卡片底色，与图标分开）。
       按按钮中心定位：桌面 32px 按钮为 3px，窄屏 44px 触控按钮为 9px，点与 18px 图标的相对位置不变 */
    .side-more-btn .updated-dot {
      display: none; position: absolute; top: calc(50% - 13px); right: calc(50% - 13px);
      width: 6px; height: 6px; border-radius: 50%;
      background: var(--primary); box-shadow: 0 0 0 2px var(--card);
    }
    .side-more-btn.has-update .updated-dot { display: block; }
    @media (max-width: 768px) {
      /* 窄屏触控目标 ≥44px */
      .side-account { min-height: 44px; }
      .side-foot .side-more-btn { width: 44px; height: 44px; }
    }
    .side-more-pop {
      position: absolute; right: 0; bottom: calc(100% + 6px); z-index: 100;
      background: var(--card); border: 1px solid var(--border); border-radius: 8px;
      box-shadow: 0 6px 24px rgba(0,0,0,.14);
      min-width: 140px; padding: 4px;
      transform-origin: bottom right;
      transition: opacity .14s ease, transform .16s cubic-bezier(.4, 0, .2, 1);
      opacity: 0; transform: scale(.94) translateY(4px);
      pointer-events: none;
    }
    .side-more-pop.open { opacity: 1; transform: scale(1) translateY(0); pointer-events: auto; }
    .side-more-pop .menu-item { font-size: 13.5px; padding: 6px 10px; }
    .side-more-pop .cnt { margin-left: auto; font-size: 11px; color: var(--fg2); }
    /* 版本菜单项：低频信息用 --fg2（需压过 .menu-item 的正文色）。有新版本时亮主色、「· 有更新」和行尾主色点 */
    .side-more-pop .ver-chip { color: var(--fg2); font-variant-numeric: tabular-nums; }
    .ver-chip .updated-dot {
      display: none; width: 6px; height: 6px; border-radius: 50%;
      background: var(--primary); flex-shrink: 0; margin-left: auto;
    }
    .ver-chip .ver-update-label { display: none; }
    .side-more-pop .ver-chip.has-update { color: var(--primary-deep); font-weight: 600; }
    .ver-chip.has-update svg { color: var(--primary); }
    .ver-chip.has-update .updated-dot { display: inline-block; }
    .ver-chip.has-update .ver-update-label { display: inline; }

    /* ---------- 版本弹层 ---------- */
    .ver-modal {
      display: none; position: fixed; inset: 0; z-index: 350;
      align-items: flex-end; justify-content: center;
    }
    .ver-modal.show { display: flex; }
    .ver-modal::before { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.4); }
    .ver-sheet {
      position: relative; width: min(480px, 100%);
      background: var(--card); border-radius: 16px 16px 0 0;
      padding: 16px 18px calc(16px + env(safe-area-inset-bottom, 0px));
      max-height: 72vh; display: flex; flex-direction: column;
      box-shadow: 0 -10px 40px rgba(0,0,0,.18);
    }
    .ver-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
    .ver-title { font-size: 16px; font-weight: 700; font-family: ui-monospace, "SF Mono", Menlo, monospace; }
    .ver-list { overflow-y: auto; flex: 1; }
    .ver-item { padding: 10px 0; border-bottom: 1px solid var(--border); }
    .ver-item:last-child { border-bottom: none; }
    .ver-item .v-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 5px; }
    .ver-item .v-num { font-weight: 700; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 16px; color: var(--primary-deep); }
    .ver-item .v-num.current { color: var(--fg); }
    .ver-item .v-num.current::after { content: "（当前）"; font-size: 11px; color: var(--fg3); font-weight: 400; }
    .ver-item .v-date { font-size: 11px; color: var(--fg3); }
    .ver-item ul { margin: 0; padding-left: 16px; }
    .ver-item li { font-size: 16px; color: var(--fg2); line-height: 1.7; }
    .ver-reload {
      margin-top: 10px; width: 100%; justify-content: center;
      background: var(--primary); color: var(--on-primary); border: 0; border-radius: 10px;
      padding: 11px; font-size: 16px; font-weight: 600; cursor: pointer;
    }

    /* ---------- 顶栏（主区） ---------- */
    .topbar {
      /* 桌面：sticky 吸顶（main 滚动容器内）；手机端被 media query 覆盖为 fixed */
      position: sticky; top: 0; z-index: 20;
      display: flex; align-items: center; gap: 4px;
      padding: calc(env(safe-area-inset-top,0px) + 6px) 12px 6px;
      /* 纯色背景，不做毛玻璃——半透明+blur 滚动时卡片透出像阴影/渐变（子霆 2026-08-31 去掉） */
      background: var(--bg);
    }
    /* 状态栏（刘海/safe-area）区域铺纯色，避免 iOS 状态栏底色判定为深色（毛玻璃会误导） */
    .topbar::before {
      content: ""; position: absolute; left: 0; right: 0; top: 0;
      height: env(safe-area-inset-top, 0px);
      background: var(--bg);
      z-index: 0;
    }
    .topbar > * { position: relative; z-index: 1; }
    /* 标题单行：同步胶囊不收缩，长标签标题在桌面与平板同手机一样省略（全名见 title 属性），不换行撑出顶栏 */
    .topbar h1 { font-size: 16px; font-weight: 700; margin: 0; flex: 1; letter-spacing: .2px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .icon-btn {
      width: 32px; height: 32px; border-radius: 8px; color: var(--fg2);
      display: flex; align-items: center; justify-content: center;
      position: relative;
    }
    @media (hover: hover) { .icon-btn:hover { background: var(--bg); color: var(--fg); } }
    .icon-btn svg { width: 18px; height: 18px; }
    #btnSearch { display: none; } /* 桌面常规下用侧栏搜索框，顶栏隐藏搜索按钮 */
    body.collapsed .topbar #btnSearch { display: inline-flex; } /* 侧栏折叠时在顶栏露出搜索按钮 */

    /* 顶栏刷新/同步按钮与待同步角标 */
    #btnRefresh {
      position: relative;
      display: inline-flex;
    }
    #btnRefresh svg {
      transition: transform .2s ease;
    }
    #btnRefresh.has-pending {
      color: var(--primary-deep);
    }
    #btnRefresh.is-spinning {
      pointer-events: none;
      opacity: .85;
    }
    #btnRefresh.is-spinning svg {
      animation: spin .8s linear infinite;
    }
    .sync-badge {
      position: absolute;
      top: -2px;
      right: -3px;
      min-width: 15px;
      height: 15px;
      padding: 0 3.5px;
      border-radius: 999px;
      background: var(--primary);
      color: var(--on-primary);
      font-size: 10px;
      font-weight: 700;
      line-height: 15px;
      text-align: center;
      box-shadow: 0 1px 3px rgba(0,0,0,0.18);
      pointer-events: none;
      box-sizing: border-box;
      transform: scale(0.92);
      transition: transform .15s ease, opacity .15s ease;
    }
    .sync-badge[hidden] {
      display: none !important;
    }

    /* ---------- 编辑器（桌面常驻 / 手机浮出面板） ---------- */
    .editor { max-width: 640px; margin: 0 auto; padding: 8px 14px 2px; }
    .editor-top { display: flex; align-items: flex-start; gap: 8px; }
    /* 图片预览条：选图后显示缩略图 + 上传进度/失败重试 */
    .composer-preview {
      display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 2px;
    }
    .composer-preview[hidden] { display: none; }
    .cp-item {
      position: relative; width: 72px; height: 72px; border-radius: 10px;
      overflow: hidden; background: var(--bg); border: 1px solid var(--border);
      flex-shrink: 0;
    }
    .cp-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .cp-item .cp-mask {
      position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
      background: rgba(17,17,17,.45); color: #fff; font-size: 11px;
    }
    .cp-item .cp-mask.done { background: color-mix(in srgb, var(--primary) 25%, transparent); }
    .cp-item .cp-mask.err { background: rgba(220,53,69,.55); }
    .cp-item .cp-retry, .cp-item .cp-del {
      position: absolute; border: 0; cursor: pointer; color: #fff;
      background: rgba(17,17,17,.5); border-radius: 6px;
      width: 22px; height: 22px; display: flex; align-items: center; justify-content: center;
    }
    .cp-item .cp-retry { right: 4px; top: 4px; }
    .cp-item .cp-del { left: 4px; top: 4px; }
    .editor textarea {
      flex: 1; width: 100%; min-height: 40px; max-height: 200px; resize: none;
      border: 1px solid var(--border); border-radius: 10px;
      background: var(--card); padding: 10px 12px; font-size: 14px; line-height: 1.8;
      outline: none; box-shadow: var(--shadow);
      transition: border-color .15s;
    }
    .editor textarea:focus { border-color: var(--primary); }
    .editor textarea::placeholder { color: var(--fg2); opacity: 1; } /* 占位提示承载信息：用 --fg2 保证对比度 */
    /* ---- CM6 编辑器（装饰源 Markdown：标记弱化、样式领先） ---- */
    /* 所有 CM6 实例（主输入框、卡片就地编辑、AI 指令）光标跟随正文色：基础主题写死黑色光标，深色下几乎不可见。
       CM6 的样式表插在 head 最前，同特异性由本文件覆盖 */
    .cm-editor .cm-content { caret-color: var(--fg); }
    #editorHost { flex: 1; min-width: 0; }
    #editorHost .cm-editor {
      background: var(--card); border: 1px solid var(--border); border-radius: 10px;
      font-size: 14px; max-height: 50vh; box-shadow: var(--shadow);
      transition: border-color .15s;
    }
    #editorHost .cm-editor.cm-focused { outline: none; border-color: var(--primary); }
    #editorHost .cm-content { font-family: inherit; padding: 10px 12px; font-size: 14px; line-height: 1.8; }
    #editorHost .cm-line { padding-inline: 0; }
    #editorHost .cm-scroller { font-family: inherit; line-height: 1.8; overflow: auto; }
    #editorHost .cm-placeholder { color: var(--fg2); } /* 占位提示承载信息：用 --fg2 保证对比度 */
    #editorHost .cm-content::selection, #editorHost .cm-content ::selection { background: var(--primary-bg); }
    /* Markdown 标记弱化；样式文本领先（对齐官方 editor.css） */
    #editorHost .cm-md-strong { font-weight: 700; }
    #editorHost .cm-md-emphasis { font-style: italic; }
    #editorHost .cm-md-strike { text-decoration: line-through; }
    #editorHost .cm-md-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--fg); background: var(--muted); border-radius: 4px; padding: 0 3px; }
    #editorHost .cm-md-link { color: var(--primary-deep); text-decoration: underline; }
    #editorHost .cm-md-url { color: var(--fg3); }
    #editorHost .cm-md-quote { color: var(--fg2); font-style: italic; }
    #editorHost .cm-md-mark { color: var(--fg3); }
    /* 标题行（# 后须有空白） */
    #editorHost .cm-md-h1 { font-size: 1.5em; font-weight: 600; line-height: 1.3; }
    #editorHost .cm-md-h2 { font-size: 1.3em; font-weight: 600; }
    #editorHost .cm-md-h3 { font-size: 1.15em; font-weight: 600; }
    #editorHost .cm-md-h4, #editorHost .cm-md-h5, #editorHost .cm-md-h6 { font-weight: 600; }
    /* #tag 补全弹层（对齐官方 autocomplete popover） */
    .cm-tooltip.cm-tooltip-autocomplete,
    #editorHost .cm-tooltip.cm-tooltip-autocomplete {
      background: var(--card); color: var(--fg); border: 1px solid var(--border);
      border-radius: 10px; box-shadow: 0 6px 24px rgba(0,0,0,.18); overflow: hidden;
      font-family: inherit; font-size: 14px; padding: 4px; z-index: 100;
      max-width: min(92vw, 440px);
    }
    .cm-tooltip-autocomplete > ul,
    #editorHost .cm-tooltip-autocomplete > ul { font-family: inherit; padding: 0; margin: 0; list-style: none; max-height: 280px; overflow-y: auto; }
    .cm-tooltip-autocomplete > ul > li,
    #editorHost .cm-tooltip-autocomplete > ul > li {
      padding: 7px 11px; border-radius: 6px; margin: 2px 0; transition: background .12s ease;
      cursor: pointer; line-height: 1.45;
      display: flex; flex-direction: column; align-items: flex-start;
    }
    .cm-tooltip-autocomplete > ul > li[aria-selected],
    #editorHost .cm-tooltip-autocomplete > ul > li[aria-selected] {
      background: var(--primary-bg) !important; color: var(--primary-deep) !important; font-weight: 600;
    }
    #editorHost .cm-completionMatchedText { text-decoration: none; font-weight: 600; color: inherit; }
    .cm-tooltip-autocomplete .cm-completionLabel,
    #editorHost .cm-tooltip-autocomplete .cm-completionLabel {
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: normal;
      word-break: break-word;
      font-size: 13px;
      line-height: 1.45;
      max-height: 2.9em;
      color: var(--fg);
    }
    .cm-tooltip-autocomplete > ul > li[aria-selected] .cm-completionLabel,
    #editorHost .cm-tooltip-autocomplete > ul > li[aria-selected] .cm-completionLabel {
      color: var(--primary-deep) !important;
    }
    .cm-tooltip-autocomplete .cm-completionDetail,
    #editorHost .cm-tooltip-autocomplete .cm-completionDetail {
      font-size: 11px; color: var(--fg3); margin-top: 3px; margin-left: 0; font-style: normal;
      align-self: flex-end;
    }
    .editor .row { display: flex; align-items: center; gap: 8px; margin-top: 7px; }
    /* ---- 格式工具栏（MEMO-012，ui/editor-toolbar.js）----
       基础规则即桌面：分组平铺的 30px 按钮，组间细分隔线；放不下时横滑（滚轮转横向）并在边缘渐隐。
       选中态（光标处的格式）与展开态共用主色浅底。手机覆盖见 max-width:768px 区块。 */
    .editor .composer-tools, .inline-editor-tools, .detail-editor-tools { position: relative; }
    .fmt-bar { position: relative; display: flex; flex: 1 1 auto; min-width: 0; }
    .fmt-bar .tools-scroll {
      display: flex; align-items: center; flex: 1 1 auto; min-width: 0;
      overflow-x: auto; overscroll-behavior-x: contain;
    }
    /* 边缘渐隐画在不滚动的工具条外框上（MEMO-013）：滚动容器自身带 mask-image 时，
       iOS WebKit 可能不把它当作可触摸横滑的容器，手势会落到外层翻页器上 */
    .fmt-bar { --fmt-bar-bg: var(--card); --fmt-fade: 28px; overflow: hidden; }
    .fmt-bar::before, .fmt-bar::after {
      content: ""; position: absolute; top: 0; bottom: 0; z-index: 1; width: var(--fmt-fade);
      pointer-events: none; opacity: 0; transition: opacity .15s;
    }
    .fmt-bar::before { left: 0; background: linear-gradient(to right, var(--fmt-bar-bg), transparent); }
    .fmt-bar::after { right: 0; background: linear-gradient(to left, var(--fmt-bar-bg), transparent); }
    .fmt-bar.fade-start::before, .fmt-bar.fade-end::after { opacity: 1; }
    .fmt-bar .tool-group { display: flex; align-items: center; gap: 2px; flex: none; }
    .fmt-bar .tool-group + .tool-group::before {
      content: ""; flex: none; width: 1px; height: 16px; margin: 0 6px; background: var(--border);
    }
    .fmt-bar .tg-indent { display: none; } /* 桌面用 Tab / Shift-Tab，按钮只给手机 */
    .fmt-bar .tool {
      position: relative; flex: none;
      display: inline-flex; align-items: center; justify-content: center;
      min-width: 30px; height: 30px; padding: 0; border-radius: 7px;
      color: var(--fg2); transition: background .12s, color .12s;
      touch-action: manipulation; /* 防 iOS 双击缩放 */
      user-select: none; -webkit-user-select: none;
    }
    .fmt-bar .tool svg { width: 16px; height: 16px; flex: none; }
    @media (hover: hover) { .fmt-bar .tool:hover { background: var(--hover); color: var(--fg); } }
    .fmt-bar .tool:active { background: var(--muted-hover); }
    .fmt-bar .tool:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
    .fmt-bar .tool[aria-pressed="true"], .fmt-bar .tool.is-active, .fmt-bar .tool[aria-expanded="true"] {
      background: var(--primary-bg); color: var(--primary-deep);
    }
    .fmt-bar .tool[aria-disabled="true"] { opacity: .35; cursor: default; }
    /* 标题按钮：H 图标 + 小箭头；光标在标题行时换成级别文字 H1–H6 */
    .fmt-bar .tool-heading { gap: 1px; padding: 0 3px 0 6px; }
    .fmt-bar .tool-heading .tool-chevron { width: 10px; height: 10px; opacity: .7; }
    .fmt-bar .tool-heading-level { font-size: 12.5px; font-weight: 700; letter-spacing: .2px; line-height: 1; min-width: 16px; }
    .fmt-bar .tool-heading-level:empty { display: none; }
    .fmt-bar .tool-heading.is-active .tool-heading-icon { display: none; }
    /* 旧可见性循环按钮 #visBtn（常驻 hidden，仅保留接线）：圆点图标；输入框可见范围用 .vis-select-wrap 的线性图标 */
    .editor .tool.vis-btn .vis-dot {
      width: 10px; height: 10px; border-radius: 50%;
      background: var(--fg3); display: inline-block;
    }
    .editor .tool.vis-btn .vis-dot.prot { background: var(--info); }
    .editor .tool.vis-btn .vis-dot.pub { background: var(--primary); }
    .composer-close { display: none; flex-shrink: 0; }
    /* 全屏头部条仅移动端（>768px 桌面常驻卡片无头部条） */
    .composer-head { display: none; }

    /* 桌面浮层：以工具行为锚点，left 由 JS 对齐按钮并夹在视口内；默认向下，下方放不下时 .drop-up */
    .heading-pop, .link-pop {
      position: absolute; top: calc(100% + 6px); left: 0; z-index: 96;
      background: var(--card); border: 1px solid var(--border); border-radius: 12px;
      box-shadow: 0 12px 32px rgba(17,17,17,.14), 0 2px 6px rgba(17,17,17,.06);
      box-sizing: border-box; max-width: calc(100vw - 16px);
      transform-origin: top left; animation: tb-pop-down .14s cubic-bezier(.2, .8, .2, 1);
    }
    .heading-pop.drop-up, .link-pop.drop-up {
      top: auto; bottom: calc(100% + 6px); transform-origin: bottom left; animation-name: tb-pop-up;
    }
    @keyframes tb-pop-down { from { opacity: 0; transform: translateY(-4px) scale(.98); } }
    @keyframes tb-pop-up { from { opacity: 0; transform: translateY(4px) scale(.98); } }
    .heading-pop { display: flex; flex-direction: column; gap: 1px; padding: 5px; min-width: 208px; }
    .heading-pop .tool-item {
      display: flex; align-items: center; gap: 10px; width: 100%;
      min-height: 32px; padding: 4px 10px 4px 6px; border-radius: 8px;
      font-size: 13px; color: var(--fg); text-align: left; white-space: nowrap;
    }
    @media (hover: hover) { .heading-pop .tool-item:hover { background: var(--hover); } }
    .heading-pop .tool-item:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
    .heading-pop .tool-item[aria-checked="true"] { background: var(--primary-bg); color: var(--primary-deep); }
    .heading-pop .h-badge {
      flex: none; width: 24px; text-align: center;
      font-size: 11.5px; font-weight: 700; color: var(--fg2);
    }
    .heading-pop .h-badge svg { display: block; width: 15px; height: 15px; margin: 0 auto; }
    .heading-pop [aria-checked="true"] .h-badge { color: inherit; }
    .heading-pop .h-name { flex: 1; }
    /* 菜单里的级别字号递减，选之前就看得出层级 */
    .heading-pop [data-cmd^="heading"] .h-name { font-weight: 600; }
    .heading-pop [data-cmd="heading1"] .h-name { font-size: 16px; }
    .heading-pop [data-cmd="heading2"] .h-name { font-size: 15px; }
    .heading-pop [data-cmd="heading3"] .h-name { font-size: 14px; }
    .heading-pop .menu-kbd {
      flex: none; margin-left: 12px; font: inherit; font-size: 11.5px; letter-spacing: .5px;
      color: var(--fg2); background: none; border: 0; padding: 0;
    }
    .link-pop { display: grid; gap: 6px; padding: 8px; width: 300px; }
    .link-field {
      display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 10px;
      border: 1px solid var(--border); border-radius: 8px; background: var(--bg);
      transition: border-color .12s, box-shadow .12s, background .12s;
    }
    .link-field:focus-within { border-color: var(--primary); background: var(--card); box-shadow: 0 0 0 3px var(--primary-bg); }
    .link-field:has(input[aria-invalid="true"]) { border-color: var(--danger); }
    .link-field svg { flex: none; width: 14px; height: 14px; color: var(--fg2); }
    .link-field input {
      flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: 0;
      background: transparent; color: var(--fg); font-size: 13px;
    }
    .link-field input::placeholder { color: var(--fg2); opacity: 1; }
    .link-submit {
      justify-self: end; display: inline-flex; align-items: center; gap: 4px;
      height: 30px; padding: 0 12px; border-radius: 8px;
      background: var(--primary); color: var(--on-primary); font-size: 13px; font-weight: 600;
    }
    .link-submit svg { width: 14px; height: 14px; }
    /* 快捷键提示（挂在 body，fixed）：反色气泡，深浅色主题自动跟随 */
    .tb-tip {
      position: fixed; z-index: 1000; pointer-events: none;
      display: flex; align-items: center; gap: 8px;
      padding: 5px 8px; border-radius: 7px;
      background: var(--fg); color: var(--card);
      font-size: 12px; line-height: 1.25; white-space: nowrap;
      box-shadow: 0 4px 14px rgba(0,0,0,.18);
      animation: tb-tip-in .12s ease;
    }
    @keyframes tb-tip-in { from { opacity: 0; transform: translateY(2px); } }
    .tb-tip kbd {
      padding: 1px 5px; border-radius: 4px; letter-spacing: .5px;
      font: inherit; font-size: 11px; background: color-mix(in srgb, var(--card) 20%, transparent);
    }
    @media (prefers-reduced-motion: reduce) {
      .heading-pop, .link-pop, .tb-tip { animation: none; }
    }
    .send-btn {
      margin-left: auto; flex: none; white-space: nowrap;
      display: inline-flex; align-items: center; justify-content: center; gap: 6px;
      min-height: 34px; padding: 0 14px; border-radius: 9px;
      background: var(--primary); color: var(--on-primary); font-size: 16px; font-weight: 600;
      transition: background .15s, color .15s;
    }
    .send-btn svg { width: 15px; height: 15px; }
    .send-btn.editing { background: var(--primary-deep); }
    /* 禁用态用中性色而非半透明主色：可发送时才变主色，「灰变亮」即可发信号（须在 .editing 之后覆盖其底色） */
    .send-btn:disabled { background: var(--muted); color: var(--fg3); opacity: 1; box-shadow: none; cursor: default; }

    /* 浮动记录按钮（仅手机显示） */
    .fab {
      display: none; position: fixed; right: 18px;
      bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 50;
      width: 54px; height: 54px; border-radius: 50%;
      background: var(--primary); color: var(--on-primary);
      align-items: center; justify-content: center;
      box-shadow: 0 4px 16px color-mix(in srgb, var(--primary) 45%, transparent);
      transition: transform .15s ease, background .15s;
    }
    .fab:active { transform: scale(.94); }
    .fab svg { width: 22px; height: 22px; }

    /* ---------- 同步横幅（已由顶栏状态感知刷新/同步按钮取代，彻底消除主区 CLS 抖动） ---------- */
    .banner { display: none !important; }
    .install-hint {
      display: flex; align-items: flex-start; gap: 8px;
      max-width: 616px; margin: 8px auto 4px; padding: 10px 8px 10px 12px;
      border: 1px solid var(--border); border-radius: 10px; background: var(--card);
      color: var(--fg2); font-size: 13px; line-height: 1.55;
    }
    .install-hint[hidden] { display: none; }
    .install-hint > svg { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--primary-deep); }
    .install-hint span { flex: 1; min-width: 0; }
    .install-hint .icon-btn { flex: none; width: 28px; height: 28px; padding: 6px; margin: -4px 0; }
    .install-hint .icon-btn svg { width: 16px; height: 16px; }
    @media (max-width: 768px) { .install-hint { margin: 8px 12px 4px; } }

    /* ---------- 列表（紧凑卡片流） ---------- */
    #list { max-width: 640px; margin: 0 auto; padding: 0 12px 6px; }
    /* 视图切换/操作反馈后的列表淡入（消除整表重绘的跳变感） */
    #list.fade-in { animation: listFade .18s ease; }
    @keyframes listFade { from { opacity: 0; transform: translateY(4px); } }
    .sect {
      font-size: 11px; color: var(--fg3); letter-spacing: .3px;
      padding: 4px 4px 6px;
    }
    .memo { transition: opacity .18s ease, transform .18s ease; }
    .memo.removing { opacity: 0; transform: translateX(18px) scale(.98); }
    .memo.inserting {
      box-sizing: border-box;
      overflow: hidden;
      opacity: 0;
      transform: translateY(-8px);
      transition: height .22s cubic-bezier(.4, 0, .2, 1), margin .22s ease, padding .22s ease, opacity .18s ease, transform .22s ease;
    }
    .memo {
      background: var(--card); border: 1px solid var(--border);
      border-radius: 10px; padding: 12px 16px; margin-bottom: 8px;
      box-shadow: 0 1px 2px rgba(0,0,0,.04);
      display: flex; flex-direction: column; gap: 4px;
    }
    .memo-header { display: flex; align-items: center; gap: 6px; margin-bottom: 0; }
    .memo-time { font-size: 13px; color: var(--fg2); text-decoration: none; }
    @media (hover: hover) { a.memo-time:hover { color: var(--fg); } }
    .memo-badges { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
    .badge {
      display: inline-flex; align-items: center; justify-content: center;
      gap: 3px; font-size: 11px; height: 18px; line-height: 1;
      padding: 0 6px; border-radius: 9px; box-sizing: border-box;
      background: var(--primary-bg); color: var(--primary-deep); white-space: nowrap;
      vertical-align: middle;
    }
    .badge.pub { background: color-mix(in srgb, var(--info) 12%, var(--card)); color: var(--info); }
    .badge.pin { background: var(--primary-bg); color: var(--primary-deep); font-weight: 500; }
    .badge.pin svg, .icon-pin-badge {
      width: 11px; height: 11px; display: block; flex-shrink: 0;
      transform: translateY(0.5px);
    }
    .memo-header .spacer { flex: 1; }
    .menu-wrap { position: relative; flex-shrink: 0; }
    .menu-btn {
      display: inline-flex; align-items: center; justify-content: center;
      width: 26px; height: 26px; border: 0; background: none; border-radius: 6px;
      color: var(--fg3); cursor: pointer; padding: 0;
    }
    .menu-btn.open { background: var(--bg); color: var(--fg); }
    @media (hover: hover) { .menu-btn:hover { background: var(--bg); color: var(--fg); } }
    .memo-ai-btn.open { background: var(--primary-bg); color: var(--primary-deep); }
    @media (hover: hover) { .memo-ai-btn:hover { background: var(--primary-bg); color: var(--primary-deep); } }
    .menu-btn svg { width: 16px; height: 16px; }
    .menu-pop {
      position: absolute; right: 0; top: 30px; z-index: 60;
      background: var(--card); border: 1px solid var(--border); border-radius: 8px;
      box-shadow: 0 6px 24px rgba(0,0,0,.12);
      /* 宽度贴合最长菜单项内容（图标+文字+padding），不再固定 132px */
      width: max-content; min-width: 118px; max-width: 220px; padding: 3px;
      transform-origin: top right;
      transition: opacity .14s ease, transform .16s cubic-bezier(.4, 0, .2, 1);
      opacity: 0; transform: scale(.94) translateY(-4px);
      pointer-events: none;
    }
    .menu-pop.open { opacity: 1; transform: scale(1) translateY(0); pointer-events: auto; }
    .menu-pop.drop-up {
      top: auto; bottom: calc(100% + 4px);
      transform-origin: bottom right;
      transform: scale(.94) translateY(4px);
    }
    .menu-pop.drop-up.open {
      transform: scale(1) translateY(0);
    }
    .menu-item {
      display: flex; align-items: center; gap: 7px; width: 100%;
      padding: 5px 8px; border: 0; background: none; border-radius: 6px;
      font-size: 13.5px; color: var(--fg); cursor: pointer; text-align: left;
      white-space: nowrap;
    }
    @media (hover: hover) { .menu-item:hover { background: var(--bg); } }
    .menu-item:active { background: var(--bg); transform: scale(.98); }
    .menu-item svg { width: 14px; height: 14px; color: var(--fg3); flex-shrink: 0; }
    .menu-item.danger { color: var(--danger); }
    .menu-item.danger svg { color: var(--danger); }
    .menu-sep { height: 1px; background: var(--border); margin: 4px 6px; }
    /* 卡片三点菜单二级子菜单（复制） */
    .menu-item-with-sub {
      position: relative;
    }
    .menu-item-with-sub .icon-sub-arrow {
      margin-left: auto; width: 12px; height: 12px; color: var(--fg3);
      transition: transform .14s ease;
    }
    .submenu-pop {
      position: absolute; right: calc(100% + 4px); top: -3px; z-index: 70;
      background: var(--card); border: 1px solid var(--border); border-radius: 8px;
      box-shadow: 0 6px 24px rgba(0,0,0,.14);
      width: max-content; min-width: 130px; max-width: 220px; padding: 3px;
      transform-origin: top right;
      transition: opacity .14s ease, transform .16s cubic-bezier(.4, 0, .2, 1);
      opacity: 0; transform: scale(.94) translateX(4px);
      pointer-events: none;
      display: none;
    }
    .submenu-pop.drop-up {
      top: auto; bottom: -3px; transform-origin: bottom right;
    }
    .menu-item-with-sub.open > .submenu-pop {
      opacity: 1; transform: scale(1) translateX(0); pointer-events: auto; display: block;
    }
    .submenu-pop[hidden] {
      display: none !important; opacity: 0 !important; pointer-events: none !important;
    }
    .menu-item-with-sub.open .icon-sub-arrow {
      transform: rotate(90deg);
    }
    @media (max-width: 480px) {
      .submenu-pop {
        right: 0; top: calc(100% + 2px);
        transform-origin: top right;
        box-shadow: 0 8px 24px rgba(0,0,0,.2);
      }
      .submenu-pop.drop-up {
        top: auto; bottom: calc(100% + 2px);
        transform-origin: bottom right;
      }
    }
    .memo .content { font-size: 14px; line-height: 1.8; word-break: break-word; }
    /* 卡片正文折叠截断与展开收起（固定高度 180px 截断 + 柔和渐变淡出遮罩） */
    .memo:not(.expanded).is-collapsible .content {
      max-height: 180px;
      overflow: hidden;
      position: relative;
      -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 48px), transparent 100%);
      mask-image: linear-gradient(to bottom, #000 calc(100% - 48px), transparent 100%);
    }
    .memo.expanded .content {
      max-height: none;
      -webkit-mask-image: none;
      mask-image: none;
    }
    .memo.animating .content {
      will-change: max-height;
    }
    .memo-reading-actions { display: flex; align-items: center; gap: 16px; margin-top: 4px; }
    .memo-reading-actions:empty { display: none; }
    .memo-expand-btn {
      display: none;
      align-items: center;
      gap: 4px;
      border: 0;
      background: transparent;
      color: var(--primary-deep);
      font-size: 13.5px;
      font-weight: 500;
      padding: 4px 0 2px;
      margin-top: 4px;
      cursor: pointer;
      user-select: none;
      transition: opacity .15s ease, color .15s ease, transform .15s ease;
      text-decoration: none;
    }
    .memo-expand-btn:active {
      transform: scale(0.97);
    }
    @media (hover: hover) { .memo-expand-btn:hover {
      color: var(--primary);
      opacity: .85;
      text-decoration: none;
    } }
    .memo.is-collapsible .memo-expand-btn {
      display: inline-flex;
    }
    .memo .content > p, .content > p { margin: 2px 0; font-family: inherit; font-size: inherit; line-height: inherit; }
    .memo .content img {
      max-width: 100%; border-radius: 8px; margin: 4px 0; display: block;
      border: 1px solid var(--border); box-sizing: border-box;
    }
    .memo .content a, .content a {
      color: var(--primary-deep);
      text-decoration: none;
      cursor: pointer;
      font-family: inherit;
      font-size: inherit;
    }
    @media (hover: hover) { .memo .content a:hover, .content a:hover {
      text-decoration: underline;
    } }
    .memo .content b, .memo .content strong,
    .memo .content i, .memo .content em,
    .memo .content del, .content b, .content strong,
    .content i, .content em, .content del {
      font-family: inherit;
      font-size: inherit;
    }
    .memo .content code, .content code {
      background: var(--bg); border-radius: 4px; padding: 1.5px 5px; font-size: 0.92em;
      font-family: ui-monospace, "SF Mono", Menlo, monospace;
    }
    .code-block {
      position: relative;
      margin: 4px 0;
    }
    .code-block pre, .memo .content pre, .detail-comment-body pre {
      background: var(--bg); border-radius: 8px; padding: 9px; overflow-x: auto;
      position: relative; margin: 0;
      font-family: ui-monospace, "SF Mono", Menlo, monospace;
      font-size: 13px; line-height: 1.6;
    }
    .code-block pre code, .memo .content pre code, .detail-comment-body pre code {
      font-family: inherit;
      font-size: inherit;
      line-height: inherit;
      padding: 0;
      background: transparent;
      border-radius: 0;
    }
    .code-block pre {
      padding-right: 42px;
    }
    .copy-code-btn {
      position: absolute; top: 6px; right: 6px;
      width: 28px; height: 28px; border-radius: 6px;
      border: 1px solid var(--border); background: var(--card);
      color: var(--fg2); display: inline-flex; align-items: center; justify-content: center;
      cursor: pointer; opacity: 0.85; transition: opacity .15s, background .15s, color .15s, border-color .15s;
      z-index: 20; padding: 0; pointer-events: auto;
    }
    @media (hover: hover) { .code-block:hover .copy-code-btn, .memo .content pre:hover .copy-code-btn, .detail-comment-body pre:hover .copy-code-btn { opacity: 1; } }
    @media (hover: none) { .copy-code-btn { opacity: 0.9; } }
    @media (hover: hover) { .copy-code-btn:hover { background: var(--card); color: var(--fg); border-color: var(--fg3); opacity: 1; } }
    .copy-code-btn svg { width: 14px; height: 14px; }
    .copy-code-btn .check-icon { display: none; }
    .copy-code-btn.copied { opacity: 1; border-color: var(--primary); color: var(--primary); }
    .copy-code-btn.copied .copy-icon { display: none; }
    .copy-code-btn.copied .check-icon { display: block; }
    /* Mermaid 图：整块点按放大（ui/viewer.js），右上角按钮给键盘与读屏；在代码块里让出复制按钮的位置 */
    .mermaid-box { position: relative; cursor: zoom-in; }
    .mermaid-zoom-btn {
      position: absolute; top: 6px; right: 6px; z-index: 20;
      width: 28px; height: 28px; padding: 0; border-radius: 6px;
      border: 1px solid var(--border); background: var(--card); color: var(--fg2);
      display: inline-flex; align-items: center; justify-content: center;
      cursor: pointer; opacity: 0.85; transition: opacity .15s, color .15s, border-color .15s;
    }
    .code-block .mermaid-zoom-btn { right: 40px; }
    @media (hover: hover) { .mermaid-zoom-btn:hover { color: var(--fg); border-color: var(--fg3); opacity: 1; } }
    .mermaid-zoom-btn svg { width: 14px; height: 14px; }
    .memo .content blockquote, .content blockquote {
      margin: 3px 0; padding-left: 9px; border-left: 3px solid var(--border);
      color: var(--fg2); font-family: inherit; font-size: inherit; line-height: inherit;
    }
    /* 标签胶囊（对齐官方 tagStyles：rounded-full + border-primary + text-primary + bg-primary/15） */
    .memo .content .tag, .content .tag {
      display: inline-flex; align-items: center; vertical-align: baseline;
      padding: 1.5px 6px; font-family: inherit; font-size: 0.9em; line-height: 1;
      border-radius: 9999px; border: 1px solid var(--primary);
      color: var(--primary-deep);
      background: color-mix(in srgb, var(--primary) 15%, transparent);
      cursor: pointer;
    }
    @media (hover: hover) { .memo .content .tag:hover, .content .tag:hover {
      text-decoration: none;
      background: color-mix(in srgb, var(--primary) 22%, transparent);
    } }
    /* 编辑器内部标签高亮（胶囊样式，契合卡片流） */
    .cm-memo-tag {
      color: var(--primary-deep);
      background: color-mix(in srgb, var(--primary) 15%, transparent);
      border-radius: 4px;
      padding: 1px 4px;
      font-weight: 500;
    }
    .queue-item { border-style: dashed; background: var(--primary-bg); }
    .pending {
      display: inline-flex; align-items: center; justify-content: center;
      gap: 3px; font-size: 11px; height: 18px; line-height: 1;
      color: var(--primary-deep); white-space: nowrap; box-sizing: border-box;
      vertical-align: middle;
    }
    .pending svg { width: 11px; height: 11px; display: block; flex-shrink: 0; }
    .empty { text-align: center; color: var(--fg3); font-size: 16px; padding: 60px 20px; line-height: 2; }
    /* 列表空态：图标 + 主文案 + 次文案 + 按钮行（refreshEmptyListState 只替换这棵子树） */
    #list > .empty { color: var(--fg2); font-size: 15px; line-height: 1.6; padding: 56px 20px; }
    .empty[data-list-empty] { display: flex; flex-direction: column; align-items: center; }
    .empty[data-list-empty] .empty-icon { width: 32px; height: 32px; color: var(--fg3); margin-bottom: 12px; flex-shrink: 0; }
    .empty-title { font-size: 15px; font-weight: 500; color: var(--fg); }
    .empty-hint { font-size: 13px; color: var(--fg2); margin-top: 2px; }
    /* 标题里可能有用户的搜索词（如整段网址）：在列内断行，不按内容宽度溢出两侧 */
    .empty-title, .empty-hint { max-width: 100%; overflow-wrap: anywhere; }
    .empty-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
    .empty-actions:empty { display: none; }
    .empty-actions .btn { min-height: 34px; padding: 0 14px; border-radius: 8px; font-size: 13px; }
    .empty-actions .btn-primary { margin-left: 0; }
    @media (hover: hover) { .empty-actions .btn:not(.btn-primary):hover { background: var(--hover); } }

    /* ---------- 侧边栏搜索框 ---------- */
    .side-search {
      padding: 0 4px 10px;
      position: relative;
    }
    .searchbox {
      display: flex; align-items: center; gap: 6px;
      width: 100%; max-width: none; margin: 0;
      background: var(--bg); border: 1px solid var(--border);
      border-radius: 8px; padding: 0 8px; height: 32px;
      transition: border-color .15s, box-shadow .15s, background .15s;
    }
    .searchbox:focus-within {
      border-color: var(--primary);
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent);
      background: var(--card);
    }
    .searchbox > svg { width: 14px; height: 14px; color: var(--fg3); flex-shrink: 0; }
    /* 占位说明搜索范围，放不下时以省略号结尾（动词在前，丢的是范围尾部；完整文字见 title） */
    .searchbox input {
      flex: 1; min-width: 0; border: 0; outline: 0; background: none;
      font-size: 13.5px; color: var(--fg); height: 100%; text-overflow: ellipsis;
    }
    .searchbox input::placeholder {
      color: var(--fg2); font-size: 13px;
    }
    .searchbox .search-clear {
      width: 20px; height: 20px; border-radius: 4px; flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
      color: var(--fg3); cursor: pointer;
    }
    @media (hover: hover) { .searchbox .search-clear:hover {
      color: var(--fg); background: var(--border);
    } }
    .searchbox .search-clear svg { width: 12px; height: 12px; }
    .search-kbd {
      font-family: inherit; font-size: 10.5px; font-weight: 600;
      color: var(--fg2); background: var(--card);
      border: 1px solid var(--border); border-radius: 4px;
      padding: 1px 4px; line-height: 1.3; flex-shrink: 0;
      pointer-events: none; user-select: none;
    }
    .searchbox.has-val .search-kbd { display: none; }

    /* ---------- 侧边栏搜索下拉面板 ---------- */
    .side-search-pop {
      position: absolute; top: calc(100% - 4px); left: 4px; right: 4px; z-index: 50;
      background: var(--card); border: 1px solid var(--border); border-radius: 10px;
      box-shadow: 0 8px 24px rgba(0,0,0,0.12), 0 2px 6px rgba(0,0,0,0.06);
      padding: 8px; backdrop-filter: blur(12px);
      display: flex; flex-direction: column; gap: 8px;
    }
    .side-search-pop[hidden] { display: none; }
    .side-search-section { display: flex; flex-direction: column; gap: 4px; }
    .side-search-label { font-size: 11px; font-weight: 600; color: var(--fg2); padding: 1px 4px; }
    .side-search-header { display: flex; align-items: center; justify-content: space-between; }
    .side-search-clear-btn {
      font-size: 11px; color: var(--fg3); background: none; border: none; cursor: pointer; padding: 1px 4px;
      border-radius: 3px;
    }
    @media (hover: hover) { .side-search-clear-btn:hover { color: var(--danger); } }
    .side-search-chips { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
    .side-search-chip {
      display: flex; align-items: center; gap: 5px; padding: 5px 8px;
      border: 1px solid var(--border); border-radius: 6px; background: var(--bg);
      font-size: 12px; color: var(--fg); cursor: pointer; text-align: left;
      transition: all .12s ease;
    }
    .side-search-chip svg { width: 13px; height: 13px; color: var(--fg3); flex-shrink: 0; }
    @media (hover: hover) { .side-search-chip:hover { border-color: var(--primary); color: var(--primary-deep); background: var(--card); } }
    .side-search-chip.on {
      border-color: var(--primary); background: var(--primary-bg); color: var(--primary-deep); font-weight: 500;
    }
    .side-search-chip.on svg { color: var(--primary-deep); }
    .side-search-history { display: flex; flex-wrap: wrap; gap: 6px; max-height: 150px; overflow-y: auto; padding: 2px 0; }
    .side-search-history-chip,
    .side-search-history-item {
      display: inline-flex; align-items: center; gap: 4px;
      padding: 4px 8px; border-radius: 14px; font-size: 12px; color: var(--fg);
      cursor: pointer; background: var(--bg); border: 1px solid var(--border);
      text-align: left; transition: all .12s ease; max-width: 100%;
    }
    @media (hover: hover) { .side-search-history-chip:hover, .side-search-history-item:hover {
      background: var(--card); border-color: var(--primary); color: var(--primary-deep);
    } }
    .side-search-history-chip .hist-icon,
    .side-search-history-item .hist-icon { width: 12px; height: 12px; color: var(--fg3); flex-shrink: 0; }
    .side-search-history-chip .hist-text,
    .side-search-history-item .hist-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 160px; line-height: 1.2; }
    .side-search-history-chip .hist-del,
    .side-search-history-item .hist-del {
      background: none; border: none; padding: 0; margin-left: 2px; cursor: pointer;
      color: var(--fg3); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
      width: 15px; height: 15px; flex-shrink: 0; opacity: 0.6; transition: opacity .12s, color .12s, background .12s;
    }
    @media (hover: hover) { .side-search-history-chip .hist-del:hover, .side-search-history-item .hist-del:hover { opacity: 1; color: var(--danger, #ef4444); background: rgba(239, 68, 68, 0.12); } }
    .side-search-history-chip .hist-del svg,
    .side-search-history-item .hist-del svg { width: 10px; height: 10px; stroke-width: 2.5; }

    /* 实时联想推荐与即刻直达（桌面与移动端通用） */
    .side-search-suggest-sec { display: flex; flex-direction: column; gap: 6px; }
    .side-search-suggest-sec[hidden] { display: none; }
    .side-search-suggest-tags[hidden], .side-search-suggest-memos[hidden] { display: none; }
    .suggest-tag-chip {
      display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px;
      border: 1px dashed var(--border); border-radius: 6px; background: var(--bg);
      font-size: 12px; color: var(--primary-deep); cursor: pointer; text-align: left;
      transition: all .12s ease;
    }
    .suggest-tag-chip svg { width: 12px; height: 12px; color: var(--primary); flex-shrink: 0; }
    .suggest-tag-chip.is-active {
      border-color: var(--primary); background: var(--primary-bg);
    }
    @media (hover: hover) { .suggest-tag-chip:hover {
      border-color: var(--primary); background: var(--primary-bg);
    } }
    .quick-jump-list { display: flex; flex-direction: column; gap: 4px; max-height: 220px; overflow-y: auto; }
    .quick-jump-item {
      display: flex; flex-direction: column; gap: 2px;
      padding: 6px 8px; border-radius: 6px; font-size: 12px; color: var(--fg);
      cursor: pointer; background: var(--bg); border: 1px solid transparent; width: 100%; text-align: left;
      transition: all .12s ease;
    }
    .quick-jump-item.is-active {
      background: var(--card); border-color: var(--primary); color: var(--fg);
      box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    }
    @media (hover: hover) { .quick-jump-item:hover {
      background: var(--card); border-color: var(--primary); color: var(--fg);
      box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    } }
    .quick-jump-header {
      display: flex; align-items: center; justify-content: space-between; gap: 4px;
      font-size: 10.5px; color: var(--fg3);
    }
    .quick-jump-header .qj-vis { display: inline-flex; align-items: center; gap: 3px; }
    .quick-jump-header .qj-vis svg { width: 10px; height: 10px; }
    .quick-jump-snippet {
      font-size: 11.5px; line-height: 1.4; color: var(--fg2);
      overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
      word-break: break-word;
    }
    .quick-jump-item.is-active .quick-jump-snippet {
      color: var(--fg);
    }
    @media (hover: hover) { .quick-jump-item:hover .quick-jump-snippet {
      color: var(--fg);
    } }
    .quick-jump-snippet mark.search-hl {
      background: #fef08a; color: #713f12; border-radius: 2px; padding: 0 2px; font-weight: 500;
    }
    [data-theme="dark"] .quick-jump-snippet mark.search-hl {
      background: rgba(234, 179, 8, 0.35); color: #fef08a;
    }

    /* 移动端搜索推荐面板与默认内容区 */
    .search-layer-suggest, .search-layer-content {
      margin-top: 8px; background: var(--card); border: 1px solid var(--border);
      border-radius: 12px; padding: 10px 12px; max-height: calc(85dvh - 70px); overflow-y: auto;
      box-shadow: 0 12px 40px rgba(0,0,0,.15);
      display: flex; flex-direction: column; gap: 10px;
    }
    .search-layer-suggest[hidden], .search-layer-content[hidden] { display: none; }
    /* ============================================================
       侧边栏活动日历与日期选择器
       ============================================================ */
    /* 位于搜索框下方、主导航上方：下沿一条分隔线与主导航分开 */
    .side-cal-section {
      padding: 4px 6px 12px;
      margin-bottom: 6px;
      border-bottom: 1px solid var(--border);
      user-select: none;
      /* 今天的数字与「今天」按钮用的强调色：浅色下 --primary-deep 更深，深色下 --primary 更亮，各取对比度更高者 */
      --cal-accent: var(--primary-deep);
    }
    @media (prefers-color-scheme: dark) {
      .side-cal-section { --cal-accent: var(--primary); }
    }
    .cal-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 8px;
      padding: 0 4px;
    }
    .cal-month-label {
      font-size: 13.5px;
      font-weight: 600;
      color: var(--fg);
      letter-spacing: -0.01em;
    }
    .cal-nav-btns {
      display: flex;
      align-items: center;
      gap: 2px;
    }
    .cal-nav-btn {
      width: 24px;
      height: 24px;
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--fg2);
      transition: background .12s, color .12s;
    }
    @media (hover: hover) { .cal-nav-btn:not(:disabled):hover {
      background: var(--muted);
      color: var(--fg);
    } }
    .cal-nav-btn svg {
      width: 14px;
      height: 14px;
    }
    /* 键盘焦点：正文色外环（与选中的主色内嵌环在位置和颜色上都不同）；外沿 3px 正好等于格间距，不压到相邻格子 */
    .cal-nav-btn:focus-visible,
    .cal-cell:focus-visible {
      outline: 2px solid var(--fg);
      outline-offset: 1px;
    }
    .cal-cell:focus-visible { z-index: 3; }
    /* 折叠按钮与翻页按钮之间留一点距离，避免误点 */
    .cal-nav-btn.cal-collapse-btn { margin-left: 4px; }
    /* 「今天」文字按钮：只在显示的不是本月时可用；本月时禁用并调淡（宽度不变，左右箭头不移位） */
    .cal-nav-btn.cal-today-btn {
      width: auto;
      padding: 0 6px;
      font-size: 12px;
      font-weight: 500;
      color: var(--cal-accent);
    }
    .cal-nav-btn.cal-today-btn:disabled {
      color: var(--fg3);
      cursor: default;
    }
    /* 星期表头是网格的第一行（role="columnheader"），列距与日期行一致才能上下对齐 */
    .cal-weekdays {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      column-gap: 3px;
      margin-bottom: 1px;
      text-align: center;
    }
    .cal-wk {
      font-size: 11px;
      font-weight: 500;
      color: var(--fg2);
      height: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    /* 固定 6 行（calendar.js 总是输出 42 格）：行高 28px（窄屏 34px）、行距与列距都是 3px（焦点外环刚好放得下），翻月时高度不跳。
       折叠时只留锚点所在的一行，其余行带 hidden。 */
    .cal-grid {
      display: flex;
      flex-direction: column;
      gap: 3px;
    }
    .cal-row {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      column-gap: 3px;
    }
    .cal-row[hidden] { display: none; }
    .cal-gc { display: flex; min-width: 0; }
    .cal-cell {
      height: 28px;
      width: 100%;
      border-radius: 6px;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 11.5px;
      font-variant-numeric: tabular-nums;
      font-weight: 400;
      color: var(--fg);
      transition: background-color .15s ease-out, color .15s ease-out, box-shadow .15s ease-out;
      background: transparent;
      cursor: pointer;
      padding: 0;
      border: none;
    }
    /* 窄屏触控：格子保持原先约 35px 的点按高度 */
    @media (max-width: 768px) { .cal-cell { height: 34px; } }
    .cal-cell.is-other {
      color: var(--fg3);
      opacity: 0.35;
      cursor: default;
    }
    @media (hover: hover) { .cal-cell:not(.is-other):hover {
      filter: brightness(0.96);
    } }
    .cal-cell-txt {
      position: relative;
      z-index: 1;
      line-height: 1;
    }
    /* 三种状态各占一个视觉通道：
       有笔记 = 低饱和主色底（四级封顶 44%，文字始终 --fg，四套主题深浅色下对比度均 ≥ 4.5，见 test/calendar.test.mjs）；
       选中 = 贴边主色环 + 卡片色内缝，落在任何热力底上都能看清；
       今天 = 强调色加粗数字 + 底部同色小点。 */
    @media (hover: hover) { .cal-cell.cal-heat-0:not(.is-other):hover {
      background: var(--muted);
    } }
    .cal-cell.cal-heat-1 { background: color-mix(in srgb, var(--primary) 14%, transparent); }
    .cal-cell.cal-heat-2 { background: color-mix(in srgb, var(--primary) 22%, transparent); }
    .cal-cell.cal-heat-3 { background: color-mix(in srgb, var(--primary) 32%, transparent); }
    .cal-cell.cal-heat-4 { background: color-mix(in srgb, var(--primary) 44%, transparent); }
    /* 折叠后那一周里的前后月日期：可点，数字用次级色提示不属于标题月份 */
    .cal-cell.is-adjacent { color: var(--fg2); }
    .cal-cell.is-today {
      color: var(--cal-accent);
      font-weight: 600;
    }
    /* 强调色在较深的两级热力底上对比度不足 4.5，改回正文色，靠字重与小点标记今天 */
    .cal-cell.is-today.cal-heat-3,
    .cal-cell.is-today.cal-heat-4 {
      color: var(--fg);
    }
    /* 今天小圆点：跟随数字颜色，因此在任何热力底上都与数字同样清楚 */
    .cal-today-dot {
      position: absolute;
      bottom: 4px;
      left: 50%;
      transform: translateX(-50%);
      width: 3px;
      height: 3px;
      border-radius: 50%;
      background: currentColor;
      pointer-events: none;
      z-index: 2;
    }
    /* 选中态：外圈 2px 主色环（两侧都是卡片色，对比度与主色文字相同），内侧 2px 卡片色缝把环与热力底隔开。
       全部内嵌，不会盖到只隔 3px 的相邻格子 */
    .cal-cell.selected {
      box-shadow: inset 0 0 0 2px var(--primary), inset 0 0 0 4px var(--card);
      font-weight: 600;
      z-index: 2;
    }
    .cal-cell.selected .cal-today-dot { bottom: 5px; }
    /* 今天落在较深的两级热力上时数字已是正文色：小点加宽成短横，仍不依赖颜色就能认出今天 */
    .cal-cell.is-today.cal-heat-3 .cal-today-dot,
    .cal-cell.is-today.cal-heat-4 .cal-today-dot { width: 10px; height: 2px; border-radius: 1px; }

    /* ---------- 活跃过滤器胶囊栏 ---------- */
    .filter-bar {
      max-width: 640px; margin: 4px auto 8px; padding: 0 12px;
      display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px;
    }
    .filter-bar[hidden] { display: none; }
    .filter-chips { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; flex: 1; min-width: 0; }
    .filter-chip {
      display: inline-flex; align-items: center; gap: 4px;
      padding: 2px 8px; border-radius: 12px;
      font-size: 12px; font-weight: 500;
      background: var(--primary-bg); color: var(--primary-deep);
      border: 1px solid color-mix(in srgb, var(--primary) 28%, transparent);
    }
    .filter-chip svg { width: 12px; height: 12px; flex-shrink: 0; }
    /* 很长的关键词（如整段网址）在胶囊内省略，不撑出筛选条、不压住右侧计数；完整内容在空态标题里 */
    .filter-chip { max-width: 100%; min-width: 0; }
    .filter-chip > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .filter-chip .chip-del {
      position: relative;
      display: inline-flex; align-items: center; justify-content: center;
      width: 14px; height: 14px; border-radius: 50%; border: none; background: none;
      color: var(--primary-deep); cursor: pointer; padding: 0; margin-left: 2px;
      transition: background .12s;
    }
    /* 视觉 14px 不变，点击区扩到 24px（粗指针 34px，不越过相邻胶囊） */
    .filter-chip .chip-del::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; }
    @media (pointer: coarse) { .filter-chip .chip-del::after { inset: -10px; } }
    @media (hover: hover) { .filter-chip .chip-del:hover { background: color-mix(in srgb, var(--primary) 20%, transparent); } }
    .filter-chip .chip-del:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
    /* 「含下级」是开关不是筛选：始终透明底 + 复选框图标，与可移除胶囊区分 */
    .filter-chip-toggle {
      cursor: pointer; background: transparent; color: var(--fg2);
      border: 1px solid var(--border);
    }
    .filter-chip-toggle.on { color: var(--fg); }
    .filter-chip-toggle.on svg { color: var(--primary); }
    .filter-chip-toggle:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
    /* 日期胶囊与两侧「上一天 / 下一天」：作为一组换行；箭头无底色，与可移除胶囊区分 */
    .filter-date { display: inline-flex; align-items: center; gap: 2px; max-width: 100%; min-width: 0; }
    .filter-date-step {
      position: relative; flex-shrink: 0;
      display: inline-flex; align-items: center; justify-content: center;
      width: 22px; height: 22px; border-radius: 50%; color: var(--fg2);
      transition: color .12s, background .12s;
    }
    .filter-date-step svg { width: 14px; height: 14px; }
    @media (hover: hover) { .filter-date-step:hover { color: var(--fg); background: var(--hover); } }
    .filter-date-step:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
    /* 粗指针：箭头与胶囊稍拉开，点击区扩到宽 28px、高 34px（不压住胶囊的移除按钮） */
    @media (pointer: coarse) {
      .filter-date { gap: 4px; }
      .filter-date-step::after { content: ""; position: absolute; inset: -6px -3px; }
    }
    /* 右侧：纯文本计数 +（两个及以上筛选时）「清除筛选」 */
    .filter-meta { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; flex-shrink: 0; align-self: flex-start; min-height: 26px; }
    .filter-count { font-size: 12px; color: var(--fg2); line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums; }
    .filter-clear-all {
      position: relative; font-size: 12px; color: var(--fg2); background: none; border: none; cursor: pointer;
      min-height: 28px; padding: 0 8px; border-radius: 6px; display: inline-flex; align-items: center; gap: 4px;
      line-height: 1; white-space: nowrap; transition: color .12s, background .12s; flex-shrink: 0;
    }
    .filter-clear-all svg { width: 13px; height: 13px; flex-shrink: 0; }
    @media (hover: hover) { .filter-clear-all:hover { color: var(--fg); background: var(--hover); } }
    .filter-clear-all:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
    @media (pointer: coarse) { .filter-clear-all::after { content: ""; position: absolute; inset: -8px 0; } }
    /* 手机：「清除筛选」只留图标（名称由 aria-label 提供），让胶囊占满一行，不被右侧整列挤得过早换行 */
    @media (max-width: 768px) {
      .filter-clear-all { padding: 0 6px; }
      .filter-clear-all span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    }

    /* ---------- 搜索关键词荧光高亮 ---------- */
    mark.search-hl {
      background: color-mix(in srgb, var(--primary) 25%, transparent);
      color: inherit; border-radius: 3px; padding: 0 2px; font-weight: 500;
    }
    #btnMenu .icon-desktop { display: block; }
    #btnMenu .icon-mobile { display: none; }

    /* ---------- 置顶 ---------- */
    .memo.pinned {
      border-color: color-mix(in srgb, var(--primary) 35%, var(--border));
      background: var(--card);
      box-shadow: 0 1px 3px color-mix(in srgb, var(--primary) 8%, transparent), 0 1px 2px rgba(0,0,0,.04);
    }
    .pin-divider { display: none; }

    /* ---------- 任务清单 ---------- */
    .tasklist { display: flex; flex-direction: column; gap: 2px; margin: 3px 0; }
    .task {
      display: flex; align-items: flex-start; gap: 8px;
      padding: 3px 6px; margin: 0 -6px; border-radius: 7px;
      cursor: pointer; font-family: inherit; font-size: inherit; line-height: inherit;
    }
    .task span {
      font-family: inherit; font-size: inherit; line-height: inherit;
    }
    @media (hover: hover) { .task:hover { background: var(--bg); } }
    .task input[type="checkbox"] {
      appearance: none; -webkit-appearance: none;
      width: 16px; height: 16px; margin: 4px 0 0; flex-shrink: 0;
      border: 1.8px solid var(--fg3); border-radius: 5px;
      cursor: pointer; position: relative; background: var(--card);
      transition: background .12s, border-color .12s;
    }
    .task input[type="checkbox"]:checked { background: var(--primary); border-color: var(--primary); }
    .task input[type="checkbox"]:checked::after {
      content: ""; position: absolute; left: 4px; top: 1px;
      width: 4px; height: 8px; border: solid var(--on-primary); border-width: 0 2px 2px 0;
      transform: rotate(45deg);
    }
    .task.done span, .task:has(input:checked) span { color: var(--fg3); text-decoration: line-through; }
    .task.done, .task:has(input:checked) { opacity: 0.65; }

    /* ---------- 无序列表 ---------- */
    .ulist { margin: 2px 0; display: flex; flex-direction: column; gap: 1px; }
    .uitem { padding-left: 6px; font-family: inherit; font-size: inherit; line-height: inherit; }

    /* ---------- Markdown 排版：标题 / 有序 / 表格 ---------- */
    /* 标题字号按层级递增（正文 14，H1-H6 递增；对齐官方 headingLevelClasses） */
    .md-h1 { font-size: 22px; margin: 8px 0 4px; border-bottom: 1px solid var(--border); padding-bottom: 6px; line-height: 1.35; }
    .md-h2 { font-size: 19px; margin: 7px 0 3px; border-bottom: 1px solid var(--border); padding-bottom: 4px; line-height: 1.35; }
    .md-h3 { font-size: 17px; margin: 6px 0 3px; line-height: 1.4; }
    .md-ol { padding-left: 4px; font-family: inherit; font-size: inherit; line-height: inherit; margin: 2px 0; }
    .md-h4 { font-size: 15.5px; margin: 5px 0 2px; line-height: 1.45; }
    .md-h5 { font-size: 14.5px; margin: 5px 0 2px; }
    .md-h6 { font-size: 13.5px; margin: 5px 0 2px; color: var(--fg2); }
    .md-hr { border: none; border-top: 1px solid var(--border); margin: 8px 0; }
    /* 图片骨架流光动画（空态加载过渡，彻底消除原生浏览器问号与跳变） */
    @keyframes img-shimmer {
      0% { background-position: -200% 0; }
      100% { background-position: 200% 0; }
    }
    .img-shimmer {
      background: linear-gradient(90deg, var(--bg) 25%, var(--border) 50%, var(--bg) 75%) !important;
      background-size: 200% 100% !important;
      animation: img-shimmer 1.5s infinite ease-in-out !important;
    }
    .md-img {
      max-width: 100%; border-radius: 8px; margin: 4px 0; display: block;
      transition: opacity .18s ease-out;
    }
    img.md-img:not(.is-loaded):not(.img-broken) {
      opacity: 0.15;
      min-height: 72px;
      background: linear-gradient(90deg, var(--bg) 25%, var(--border) 50%, var(--bg) 75%);
      background-size: 200% 100%;
      animation: img-shimmer 1.5s infinite ease-in-out;
    }
    img.md-img.is-loaded {
      opacity: 1;
      min-height: auto;
      animation: none;
      background: transparent;
    }
    /* 图片加载失败占位（替代浏览器问号） */
    .md-img.img-broken {
      display: flex; align-items: center; justify-content: center;
      min-height: 96px; background: var(--bg);
      border: 1px dashed var(--border); border-radius: 8px;
      color: var(--fg3); font-size: 12px; padding: 12px;
      box-sizing: border-box;
    }
    /* P2-5: 离线待上传附件——半透明提示 */
    .md-img.pending-img { opacity: 0.55; outline: 1px dashed rgba(120, 120, 120, 0.6); }
    .memo .content del, .content del { text-decoration: line-through; color: var(--fg3); font-family: inherit; font-size: inherit; }
    .memo .content sup.md-fn, .content sup.md-fn { font-size: 0.75em; color: var(--primary-deep); font-family: inherit; }
    .memo .content blockquote.quote-2, .content blockquote.quote-2 { margin-left: 9px; }
    .memo .content blockquote.quote-3, .content blockquote.quote-3 { margin-left: 18px; }
    .memo .content blockquote.quote-4, .memo .content blockquote.quote-5,
    .content blockquote.quote-4, .content blockquote.quote-5 { margin-left: 27px; }
    .memo .content .katex-display, .memo .content .katex,
    .content .katex-display, .content .katex { overflow-x: auto; overflow-y: hidden; }
    .md-table {
      margin: 6px 0; overflow-x: auto; border: 1px solid var(--border);
      border-radius: 8px;
    }
    .md-table table {
      border-collapse: collapse; width: 100%;
      font-family: inherit; font-size: inherit; line-height: inherit;
    }
    .md-table th, .md-table td {
      font-family: inherit; font-size: inherit; line-height: inherit;
      padding: 6px 10px; border-bottom: 1px solid var(--border);
      text-align: left; white-space: nowrap;
    }
    .md-table td:last-child, .md-table th:last-child { border-right: none; }
    .md-table th { background: var(--bg); font-weight: 600; }
    .md-table tbody tr:last-child td { border-bottom: none; }

    /* ---------- 无限滚动 / 触底提示 / 附件库 / 大图预览 ---------- */
    .load-more {
      display: flex; align-items: center; justify-content: center; gap: 8px;
      padding: 18px 0 12px; color: var(--fg3); font-size: 12.5px;
      user-select: none;
    }
    .load-more .spinner {
      display: none;
      width: 14px; height: 14px; border: 2px solid var(--border);
      border-top-color: var(--primary); border-radius: 50%;
      animation: spin 1s linear infinite;
    }
    .load-more.loading .spinner {
      display: inline-block;
    }
    .load-more-retry {
      background: transparent; border: 0; padding: 0;
      color: var(--primary-deep); font-size: 12.5px; cursor: pointer;
      text-decoration: underline; text-underline-offset: 2px;
    }
    @media (hover: hover) { .load-more-retry:hover { opacity: .85; } }
    .load-end-hint {
      display: flex; align-items: center; justify-content: center;
      padding: 20px 0 14px; color: var(--fg3); font-size: 12px;
      letter-spacing: .02em; opacity: .75; user-select: none;
    }
    .load-end-hint::before,
    .load-end-hint::after {
      content: ""; flex: 0 1 40px; height: 1px;
      background: var(--border); margin: 0 12px; opacity: .6;
    }
    @keyframes spin { to { transform: rotate(360deg); } }
    .att-grid {
      display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px;
      padding: 4px 0 10px;
    }
    .att-cell {
      position: relative; aspect-ratio: 1; border: 0; padding: 0;
      background: linear-gradient(90deg, var(--bg) 25%, var(--border) 50%, var(--bg) 75%);
      background-size: 200% 100%;
      animation: img-shimmer 1.5s infinite ease-in-out;
      border-radius: 8px; overflow: hidden; cursor: pointer;
    }
    .att-cell img {
      width: 100%; height: 100%; object-fit: cover; display: block;
      opacity: 0; transition: opacity .25s ease-out;
    }
    .att-cell img.is-loaded { opacity: 1; }
    .att-cell img.img-broken { opacity: 1; object-fit: contain; }
    .att-file-cell {
      display: flex; cursor: default;
      background: var(--card); animation: none;
      border: 1px solid var(--border);
    }
    .att-file-tile {
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      width: 100%; height: 100%; min-width: 0; overflow: hidden;
      padding: 10px 8px 8px; gap: 4px;
      text-decoration: none; color: var(--fg);
    }
    .att-file-ext {
      flex-shrink: 0; font-size: 10px; font-weight: 700; letter-spacing: .04em;
      color: var(--fg2); background: var(--bg); border: 1px solid var(--border);
      border-radius: 4px; padding: 2px 6px;
    }
    .att-file-tile .afn {
      font-size: 11px; line-height: 1.25; text-align: center;
      width: 100%; min-width: 0; overflow: hidden;
      display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
      word-break: break-all; color: var(--fg2);
    }
    .att-file-tile .asz { font-size: 10px; color: var(--fg3); flex-shrink: 0; }
    .att-cell-del {
      position: absolute; top: 4px; right: 4px; z-index: 2;
      width: 22px; height: 22px; padding: 0; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      background: var(--card); border: 1px solid var(--border); color: var(--fg3);
      cursor: pointer;
    }
    @media (hover: hover) { .att-cell-del:hover { background: #fee2e2; color: #dc2626; border-color: transparent; } }
    .att-files { display: flex; flex-direction: column; gap: 6px; padding: 4px 0 10px; }
    .att-file {
      display: flex; align-items: center; gap: 10px;
      background: var(--card); border: 1px solid var(--border); border-radius: 10px;
      padding: 10px 12px; text-decoration: none; color: var(--fg); font-size: 16px;
    }
    .att-file svg { width: 17px; height: 17px; color: var(--fg3); flex-shrink: 0; }
    .att-file .afn { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .att-file .asz { color: var(--fg3); font-size: 11px; flex-shrink: 0; }
    /* 卡片内绑定附件区（官方 webui 上传、以 attachment.memo 绑定的附件） */
    .attachments {
      margin: 2px 0 4px; padding: 7px 9px 9px;
      background: var(--bg); border: 1px solid var(--border); border-radius: 8px;
    }
    .att-label {
      font-size: 11px; color: var(--fg3); margin-bottom: 5px;
      display: flex; align-items: center; gap: 4px;
    }
    .att-grid-sm {
      display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px;
    }
    .att-thumb {
      position: relative; aspect-ratio: 1; border: 0; padding: 0;
      background: linear-gradient(90deg, var(--bg) 25%, var(--border) 50%, var(--bg) 75%);
      background-size: 200% 100%;
      animation: img-shimmer 1.5s infinite ease-in-out;
      border-radius: 8px; overflow: hidden; cursor: pointer;
    }
    .att-thumb img {
      width: 100%; height: 100%; object-fit: cover; display: block;
      opacity: 0; transition: opacity .25s ease-out;
    }
    .att-thumb img.is-loaded { opacity: 1; }
    .att-thumb img.img-broken { opacity: 1; object-fit: contain; }
    /* 卡片内非图片绑定附件小卡片 */
    .att-files-sm { display: flex; flex-direction: column; gap: 4px; margin-top: 5px; }
    .att-file-badge {
      display: flex; align-items: center; gap: 6px;
      background: var(--card); border: 1px solid var(--border); border-radius: 6px;
      padding: 5px 8px; text-decoration: none; color: var(--fg); font-size: 12px;
    }
    .att-file-badge svg { width: 14px; height: 14px; color: var(--fg3); flex-shrink: 0; }
    .att-file-badge .afn { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .att-file-badge .asz { color: var(--fg3); font-size: 11px; flex-shrink: 0; }
    /* 编辑器附件托盘（展示已绑定的图片/文件，支持解绑） */
    .composer-attachments {
      display: flex; gap: 8px; padding: 6px 12px 8px;
      overflow-x: auto; -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
    }
    .composer-attachments::-webkit-scrollbar { display: none; }
    .composer-att-item {
      position: relative; flex-shrink: 0; width: 62px; height: 62px;
      background: linear-gradient(90deg, var(--bg) 25%, var(--border) 50%, var(--bg) 75%);
      background-size: 200% 100%;
      animation: img-shimmer 1.5s infinite ease-in-out;
      border: 1px solid var(--border); border-radius: 8px;
      overflow: visible; display: flex; align-items: center; justify-content: center;
      transition: border-color .15s ease, box-shadow .15s ease;
    }
    .composer-att-item.is-inlined {
      border-color: var(--primary, #10b981);
      box-shadow: 0 0 0 1px var(--primary, #10b981);
    }
    .composer-att-item img {
      width: 100%; height: 100%; object-fit: cover; border-radius: 7px; display: block;
      opacity: 0; transition: opacity .25s ease-out;
    }
    .composer-att-item img.is-loaded { opacity: 1; }
    .composer-att-file {
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      width: 100%; height: 100%; padding: 4px; text-align: center;
    }
    .composer-att-file svg { width: 20px; height: 20px; color: var(--fg3); margin-bottom: 2px; }
    .composer-att-file .fn {
      font-size: 10px; color: var(--fg2); width: 100%; overflow: hidden;
      text-overflow: ellipsis; white-space: nowrap; line-height: 1.1;
    }
    .composer-att-del, .composer-att-insert {
      position: absolute; width: 20px; height: 20px;
      border-radius: 50%; background: var(--card); border: 1px solid var(--border);
      color: var(--fg2); display: flex; align-items: center; justify-content: center;
      cursor: pointer; padding: 0; box-shadow: 0 2px 4px rgba(0,0,0,.15);
      z-index: 2;
    }
    .composer-att-del { top: -6px; right: -6px; }
    @media (hover: hover) { .composer-att-del:hover { background: #fee2e2; color: #dc2626; border-color: transparent; } }
    .composer-att-insert { bottom: -6px; right: -6px; }
    @media (hover: hover) { .composer-att-insert:hover { background: var(--primary-bg, #ecfdf5); color: var(--primary, #10b981); border-color: transparent; } }
    .composer-att-item.is-inlined .composer-att-insert {
      background: var(--primary); color: var(--on-primary); border-color: transparent;
    }
    .composer-att-del svg, .composer-att-insert svg { width: 12px; height: 12px; }
    /* ---------- 图片 / 图表查看器（ui/viewer.js）：上栏标题与关闭，中间画布，下栏缩放旋转与附件操作 ---------- */
    .media-viewer {
      position: fixed; inset: 0; z-index: 400; display: flex; flex-direction: column; overflow: hidden;
      background: rgba(0,0,0,calc(.94 * var(--mv-dim, 1))); color: #fff;
      -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
      animation: mv-fade .16s ease-out;
    }
    .media-viewer[hidden] { display: none; }
    .media-viewer:focus { outline: none; }
    @keyframes mv-fade { from { opacity: 0; } }
    .mv-top {
      position: relative; z-index: 2; display: flex; align-items: center; gap: 4px;
      padding: calc(6px + env(safe-area-inset-top)) calc(6px + env(safe-area-inset-right)) 6px calc(16px + env(safe-area-inset-left));
      background: linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,0));
    }
    .mv-title { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 10px; font-size: 13px; color: rgba(255,255,255,.85); }
    .mv-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .mv-count { flex: none; color: rgba(255,255,255,.6); font-variant-numeric: tabular-nums; }
    .mv-stage {
      position: relative; z-index: 1; flex: 1; min-height: 0;
      display: flex; align-items: center; justify-content: center; touch-action: none;
    }
    .media-viewer.mv-zoomed .mv-stage { cursor: grab; }
    .mv-stage.is-dragging { cursor: grabbing !important; }
    .mv-media { flex: none; position: relative; transform-origin: center center; }
    .mv-media.mv-anim { transition: transform .22s ease, width .22s ease, height .22s ease; }
    .mv-media img, .mv-media svg { display: block; width: 100%; height: 100%; pointer-events: none; -webkit-user-drag: none; }
    /* 图表配色跟随深浅色，垫一层卡片底色 */
    .mv-media.is-svg { background: var(--card); border-radius: 8px; }
    .mv-media.mv-enter-next { animation: mv-in-next .2s ease-out; }
    .mv-media.mv-enter-prev { animation: mv-in-prev .2s ease-out; }
    @keyframes mv-in-next { from { opacity: 0; translate: 32px 0; } }
    @keyframes mv-in-prev { from { opacity: 0; translate: -32px 0; } }
    .mv-stage.mv-loading::after {
      content: ""; position: absolute; left: 50%; top: 50%; width: 28px; height: 28px; margin: -14px 0 0 -14px;
      border: 2px solid rgba(255,255,255,.25); border-top-color: #fff; border-radius: 50%;
      animation: mv-spin .8s linear infinite;
    }
    @keyframes mv-spin { to { rotate: 360deg; } }
    .mv-error { position: absolute; inset: auto 24px; text-align: center; color: rgba(255,255,255,.7); font-size: 13px; }
    .mv-error[hidden] { display: none; }
    .mv-bottom {
      position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 8px;
      padding: 8px calc(12px + env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) calc(12px + env(safe-area-inset-left));
      background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.5));
    }
    /* 提示浮在工具条上方，出现时不改变画布大小 */
    .mv-note { position: absolute; left: 12px; right: 12px; bottom: 100%; color: rgba(255,255,255,.8); font-size: 12px; text-align: center; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
    .mv-note[hidden] { display: none; }
    .mv-tools {
      display: inline-flex; align-items: center; gap: 2px; padding: 4px; border-radius: 999px;
      background: rgba(28,28,30,.72); border: 1px solid rgba(255,255,255,.12);
      -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    }
    .mv-btn {
      flex: none; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 999px;
      display: inline-flex; align-items: center; justify-content: center;
      background: transparent; color: #fff; cursor: pointer;
    }
    .mv-btn[aria-disabled="true"], .mv-btn:disabled { opacity: .35; cursor: default; }
    @media (hover: hover) { .mv-btn:not(:disabled):not([aria-disabled="true"]):hover { background: rgba(255,255,255,.14); } }
    .mv-btn:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
    .mv-zoom { width: auto; min-width: 58px; padding: 0 8px; font-size: 12px; font-variant-numeric: tabular-nums; }
    .mv-sep { width: 1px; height: 20px; margin: 0 4px; background: rgba(255,255,255,.18); }
    .mv-nav {
      position: absolute; top: 50%; z-index: 3; margin-top: -22px; width: 44px; height: 44px;
      background: rgba(28,28,30,.6); border: 1px solid rgba(255,255,255,.12);
    }
    .mv-nav[hidden] { display: none; }
    .mv-nav:disabled { opacity: 0; pointer-events: none; }
    .mv-prev { left: calc(12px + env(safe-area-inset-left)); }
    .mv-next { right: calc(12px + env(safe-area-inset-right)); }
    /* 触屏靠横滑切换，按钮缩小、只留一点边缘提示 */
    @media (hover: none) { .mv-nav { width: 36px; height: 36px; margin-top: -18px; opacity: .8; } }
    /* 操作区预留两行（按钮 + 关联笔记）：关联笔记异步出现、放大时隐藏，都不改变画布大小，画面不跳 */
    .mv-actions { display: flex; flex-direction: column; align-items: center; gap: 8px; max-width: 100%; min-height: 72px; }
    .mv-actions:empty { display: none; }
    .media-viewer.mv-zoomed .mv-actions { visibility: hidden; }
    /* 全屏 / 沉浸：工具栏浮在画面上，默认隐藏，轻点画面切换 */
    .media-viewer.mv-immersive { background: rgba(0,0,0,var(--mv-dim, 1)); }
    .mv-immersive :is(.mv-top, .mv-bottom) {
      position: absolute; left: 0; right: 0; opacity: 0; visibility: hidden; transition: opacity .18s, visibility .18s;
    }
    .mv-immersive .mv-top { top: 0; }
    .mv-immersive .mv-bottom { bottom: 0; }
    .mv-immersive .mv-nav { opacity: 0; visibility: hidden; }
    .mv-immersive.mv-chrome :is(.mv-top, .mv-bottom) { opacity: 1; visibility: visible; }
    .mv-immersive.mv-chrome .mv-nav:not(:disabled) { opacity: 1; visibility: visible; }
    @media (prefers-reduced-motion: reduce) {
      .media-viewer, .mv-media.mv-enter-next, .mv-media.mv-enter-prev { animation: none; }
      .mv-media.mv-anim, .mv-immersive :is(.mv-top, .mv-bottom) { transition: none; }
    }
    /* 查看器打开时提示（如「链接已复制」）浮在它上面 */
    body:has(.media-viewer:not([hidden])) #toast { z-index: 410; }
    .pv-actions { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
    .pv-related { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; }
    .pv-related[hidden] { display: none; }
    .pv-related-empty { color: rgba(255,255,255,.55); font-size: 12px; }
    .pv-btn {
      display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 12px;
      border-radius: 6px; border: 1px solid rgba(255,255,255,.2); background: rgba(0,0,0,.45);
      color: #fff; font-size: 12px; cursor: pointer; backdrop-filter: blur(8px);
    }
    @media (hover: hover) { .pv-btn:hover { background: rgba(255,255,255,.15); } }
    .pv-btn.danger { color: #f87171; border-color: rgba(248,113,113,.3); }
    @media (hover: hover) { .pv-btn.danger:hover { background: rgba(248,113,113,.2); } }

    /* ---------- 设置弹层（手机全屏） ---------- */
    /* ---------- 弹层（设置/搜索/确认）入场动画 ---------- */
    .mask {
      position: fixed; inset: 0; z-index: 100;
      background: rgba(0,0,0,.4); display: none; align-items: flex-end; justify-content: center;
    }
    .mask.show { display: flex; animation: maskIn .18s ease; }
    @keyframes maskIn { from { opacity: 0; } }
    .modal { animation: modalIn .24s cubic-bezier(.4, 0, .2, 1); }
    @keyframes modalIn { from { opacity: 0; transform: translateY(18px); } }
    /* 手机端搜索全屏层：顶部锚定（类似笔记输入面板），聚焦即弹键盘 */
    .search-mask { align-items: flex-start; }
    .search-layer {
      width: 100%; max-width: 480px; padding: calc(env(safe-area-inset-top, 0px) + 12px) 16px 0;
    }
    .search-layer-box {
      display: flex; align-items: center; gap: 8px;
      background: var(--card); border: 1px solid var(--border);
      border-radius: 12px; padding: 0 14px; height: 46px;
      box-shadow: 0 12px 40px rgba(0,0,0,.15);
    }
    .search-layer-box svg { width: 18px; height: 18px; color: var(--fg3); flex-shrink: 0; }
    .search-layer-box .search-close { width: 28px; height: 28px; flex-shrink: 0; }
    .search-layer-box input {
      flex: 1; min-width: 0; border: 0; outline: 0; background: none;
      font-size: 16px; color: var(--fg); height: 100%;
      text-overflow: ellipsis; /* 范围占位放不下时以省略号结尾，与侧栏搜索框一致 */
    }
    .modal {
      width: 100%; max-width: 480px; background: var(--bg);
      border-radius: 16px 16px 0 0; padding: 20px 20px calc(20px + env(safe-area-inset-bottom,0px));
      max-height: min(82dvh, 100%); overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      scroll-padding-top: 16px;
      scroll-padding-bottom: 240px;
    }
    .modal-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 0;
    }
    .modal-title-wrap {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .modal-head h3,
    .modal-title-wrap h3 {
      margin: 0;
      font-size: 16.5px;
      font-weight: 700;
      color: var(--fg);
    }
    .settings-modal {
      display: flex;
      flex-direction: column;
    }
    .settings-form {
      display: flex;
      flex-direction: column;
      width: 100%;
      height: 100%;
      min-height: 0;
    }
    .settings-head {
      flex: none;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 16px 20px 12px;
      border-bottom: 1px solid var(--border);
    }
    .settings-head-actions {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .settings-top-save {
      display: none !important;
      min-height: 32px;
      height: 32px;
      padding: 0 14px;
      font-size: 13.5px;
      border-radius: 8px;
      margin: 0;
    }
    .settings-scroll {
      flex: 1 1 auto;
      min-height: 0;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      padding: 14px 20px 16px;
    }
    .settings-foot {
      flex: none;
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 12px 20px 18px;
      border-top: 1px solid var(--border);
      background: var(--bg);
      margin: 0;
    }
    @media (min-width: 768px) {
      .mask { align-items: center; }
      .modal { border-radius: 16px; box-shadow: 0 12px 40px rgba(0,0,0,.15); max-height: 82dvh; scroll-padding-bottom: 24px; }
      .settings-modal {
        width: 100%;
        max-width: 480px;
        padding: 0;
        overflow: hidden;
        display: flex;
        flex-direction: column;
      }
      .settings-top-save { display: none !important; }
    }
    @media (max-width: 768px) {
      /* 移动端全屏配置界面与 iOS 软键盘自适应 */
      #mask .modal,
      #aiPromptsMask .modal,
      #aiCustomPromptMask .modal,
      #aiPreviewMask .modal,
      #tagEmojiMask .modal {
        position: fixed;
        inset: 0;
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
        border-radius: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        background: var(--bg);
        display: flex;
        flex-direction: column;
        overflow: hidden;
        box-sizing: border-box;
        z-index: 100;
        animation: none !important;
      }

      /* 顶栏适配刘海屏与统一高度 */
      .settings-head,
      .ai-prompts-modal .modal-head,
      .ai-custom-prompt-modal .modal-head,
      .ai-preview-modal .modal-head,
      .tag-emoji-header {
        flex: none;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: max(12px, calc(8px + env(safe-area-inset-top, 0px))) 16px 10px !important;
        border-bottom: 1px solid var(--border);
        background: var(--bg);
        margin: 0 !important;
      }
      .settings-top-save {
        display: inline-flex !important;
      }

      /* 中间独立滚动区 */
      .settings-scroll {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-y: contain;
        padding: 16px 16px calc(72px + env(safe-area-inset-bottom, 0px));
        scroll-padding-top: 16px;
        scroll-padding-bottom: 80px;
      }
      .ai-prompts-list {
        flex: 1 1 auto;
        min-height: 0;
        max-height: none !important;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-y: contain;
        padding: 12px 16px calc(72px + env(safe-area-inset-bottom, 0px));
        margin: 0 !important;
      }
      .ai-prompts-intro {
        padding: 10px 16px 0;
        margin-bottom: 0;
      }
      .ai-custom-prompt-scroll {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-y: contain;
        padding: 14px 16px calc(72px + env(safe-area-inset-bottom, 0px));
        display: flex;
        flex-direction: column;
        gap: 12px;
        scroll-padding-top: 16px;
        scroll-padding-bottom: 80px;
      }
      .ai-preview-scroll {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-y: contain;
        padding: 14px 16px calc(72px + env(safe-area-inset-bottom, 0px));
        display: flex;
        flex-direction: column;
        gap: 10px;
      }
      .ai-preview-content-wrap {
        flex: 1 1 auto;
        min-height: 180px;
        max-height: none !important;
      }
      .tag-emoji-body {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-y: contain;
        padding: 14px 16px calc(72px + env(safe-area-inset-bottom, 0px));
        scroll-padding-top: 16px;
        scroll-padding-bottom: 80px;
      }
      .tag-emoji-grid {
        max-height: 240px;
      }

      /* 软键盘弹起时按真实键盘高度避让（--kb 由 visualViewport 写入，默认 0）：
          旧的 clamp(280px,55vh,440px) 一刀切，不管键盘多高、输入框在哪都塞超大
          空白，是「乱跳」的放大器。scroll-padding 让聚焦行自然落在键盘上方。 */
      .modal.keyboard-open .settings-scroll,
      .modal.keyboard-active .settings-scroll,
      .modal.keyboard-open .ai-prompts-list,
      .modal.keyboard-active .ai-prompts-list,
      .modal.keyboard-open .ai-custom-prompt-scroll,
      .modal.keyboard-active .ai-custom-prompt-scroll,
      .modal.keyboard-open .ai-preview-scroll,
      .modal.keyboard-active .ai-preview-scroll,
      .modal.keyboard-open .tag-emoji-body,
      .modal.keyboard-active .tag-emoji-body {
        padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px) + var(--kb, 0px)) !important;
        scroll-padding-bottom: calc(var(--kb, 0px) + 24px) !important;
      }

      /* AI 指令配置管理在编辑指令卡片时或键盘唤起时隐藏外部底栏，释放全屏垂直编辑空间 */
      .ai-prompts-modal.has-editing .ai-prompts-foot,
      .ai-prompts-modal.keyboard-open .ai-prompts-foot,
      .ai-prompts-modal.keyboard-active .ai-prompts-foot {
        display: none !important;
      }

      /* 卡片就地编辑时为主列表提供避让缓冲 */
      body:has(.memo.is-editing) .page.main {
        padding-bottom: clamp(260px, 50vh, 400px) !important;
      }

      /* 底部固定操作栏 */
      .settings-foot,
      .ai-prompts-foot,
      .ai-custom-prompt-actions,
      .ai-preview-actions,
      .tag-emoji-actions {
        flex: none;
        padding: 10px 16px max(12px, calc(10px + env(safe-area-inset-bottom, 0px))) !important;
        border-top: 1px solid var(--border);
        background: var(--bg);
        margin: 0 !important;
      }

      /* 键盘弹起时收起底部多余 safe-area 留白 */
      .modal.keyboard-open .settings-foot,
      .modal.keyboard-open .ai-prompts-foot,
      .modal.keyboard-open .ai-custom-prompt-actions,
      .modal.keyboard-open .ai-preview-actions,
      .modal.keyboard-open .tag-emoji-actions {
        padding-bottom: 10px !important;
      }

      /* 移动端 AI 预览弹层底部按钮分行排版 */
      .ai-preview-actions {
        display: flex;
        flex-direction: column;
        gap: 8px;
        width: 100%;
        box-sizing: border-box;
      }
      .ai-preview-actions .ai-actions-group {
        display: flex;
        align-items: center;
        width: 100%;
        gap: 8px;
      }
      .ai-preview-actions .ai-actions-primary {
        margin-left: 0;
      }
      .ai-preview-actions .ai-actions-group .btn {
        flex: 1 1 0;
        min-width: 0;
        min-height: 42px;
        padding: 0 8px;
        text-align: center;
        justify-content: center;
        margin-left: 0;
      }

      /* 保证输入框在移动端字号不低于 16px，杜绝 iOS Safari 自动缩放页面 */
      .modal input,
      .modal select,
      .modal textarea,
      .ai-inline-name,
      .ai-inline-textarea,
      .tag-emoji-input-wrap input {
        font-size: 16px !important;
      }
    }
    .modal h3 { margin: 0 0 16px; font-size: 17px; }
    .modal label { display: block; font-size: 16px; color: var(--fg2); margin: 12px 0 6px; }
    .modal input, .modal select, .modal textarea {
      width: 100%; border: 1px solid var(--border); border-radius: 10px;
      background: var(--card); padding: 10px 12px; font-size: 16px; outline: none;
    }
    @media (max-width: 768px) {
      /* iOS 自动缩放抑制：聚焦 input <16px 会放大页面，设置面板输入框同样要 ≥16px */
      .modal input, .modal select, .modal textarea { font-size: 16px; }
    }
    .modal input:focus, .modal select:focus, .modal textarea:focus { border-color: var(--primary); }
    .modal textarea {
      min-height: 96px;
      resize: vertical;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
      line-height: 1.45;
    }
    .settings-help {
      font-size: 12px;
      color: var(--fg3);
      margin: 6px 0 0;
      line-height: 1.5;
    }
    .settings-advanced {
      margin-top: 14px;
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 8px 12px 12px;
      background: var(--bg);
    }
    .settings-advanced summary {
      cursor: pointer;
      font-size: 14px;
      color: var(--fg2);
      padding: 4px 0;
    }
    .settings-advanced textarea { margin-top: 8px; }
    /* 密码/密钥输入框包装与明文切换按钮 */
    .pwd-input-wrap {
      position: relative;
      display: flex;
      align-items: center;
      width: 100%;
    }
    .pwd-input-wrap input {
      width: 100%;
      padding-right: 42px;
    }
    .pwd-toggle-btn {
      position: absolute;
      right: 6px;
      top: 50%;
      transform: translateY(-50%);
      width: 32px;
      height: 32px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: none;
      border: none;
      color: var(--fg3);
      cursor: pointer;
      border-radius: 6px;
      padding: 0;
      transition: color .15s, background .15s;
    }
    @media (hover: hover) { .pwd-toggle-btn:hover {
      color: var(--fg);
      background: var(--bg2);
    } }
    .pwd-toggle-btn svg {
      width: 18px;
      height: 18px;
    }
    /* ============================================================
       现代化设置中心 (Settings Modal) 专属架构与控件样式
       ============================================================ */
    .settings-nav-tabs {
      display: flex;
      align-items: center;
      gap: 4px;
      padding: 8px 16px 8px;
      border-bottom: 1px solid var(--border);
      background: var(--bg);
      overflow-x: auto;
      scrollbar-width: none;
      -webkit-overflow-scrolling: touch;
      flex: none;
    }
    .settings-nav-tabs::-webkit-scrollbar { display: none; }
    .settings-nav-tab {
      flex: 1 1 0;
      min-width: fit-content;
      height: 34px;
      padding: 0 10px;
      border-radius: 8px;
      border: 1px solid transparent;
      background: transparent;
      color: var(--fg2);
      font-size: 13.5px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      cursor: pointer;
      white-space: nowrap;
      transition: all .15s ease;
    }
    @media (hover: hover) { .settings-nav-tab:hover {
      color: var(--fg);
      background: var(--bg2);
    } }
    .settings-nav-tab.active {
      color: var(--primary-deep);
      background: var(--primary-bg);
      border-color: color-mix(in srgb, var(--primary) 25%, transparent);
      font-weight: 600;
    }
    .settings-nav-tab svg {
      width: 15px;
      height: 15px;
      flex-shrink: 0;
    }

    .settings-panel {
      display: none;
      flex-direction: column;
      gap: 14px;
    }
    .settings-panel.active {
      display: flex;
      animation: settingsPanelFadeIn .18s ease;
    }
    @keyframes settingsPanelFadeIn {
      from { opacity: 0; transform: translateY(4px); }
      to { opacity: 1; transform: translateY(0); }
    }

    .settings-card {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 14px 16px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      box-sizing: border-box;
    }
    .settings-card-muted {
      background: var(--bg2);
      border-color: var(--border);
    }
    .settings-card-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      margin-bottom: 2px;
    }
    .settings-card-title {
      font-size: 14px;
      font-weight: 600;
      color: var(--fg);
    }
    .settings-card-subtitle {
      font-size: 12px;
      color: var(--fg3);
    }
    .settings-card-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: wrap;
    }
    .settings-tip-text {
      font-size: 12.5px;
      color: var(--fg2);
      line-height: 1.45;
      flex: 1 1 200px;
    }

    /* 常驻账户卡片 */
    .settings-account-card {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px 14px;
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: 12px;
    }
    .account-avatar {
      width: 42px;
      height: 42px;
      border-radius: 50%;
      background: var(--primary-bg);
      color: var(--primary-deep);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    .account-avatar svg {
      width: 20px;
      height: 20px;
    }
    .account-info {
      display: flex;
      flex-direction: column;
      gap: 3px;
      flex: 1;
      min-width: 0;
    }
    .account-name-row {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .account-name {
      font-size: 15px;
      font-weight: 600;
      color: var(--fg);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .account-badge {
      font-size: 11px;
      font-weight: 600;
      padding: 1px 6px;
      border-radius: 4px;
      background: var(--bg2);
      color: var(--fg2);
      border: 1px solid var(--border);
      text-transform: uppercase;
    }
    .account-status-line {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 12px;
      color: var(--fg3);
    }
    .status-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--fg3);
      flex-shrink: 0;
    }
    .status-dot.online {
      background: var(--primary);
      box-shadow: 0 0 0 3px var(--primary-bg);
    }
    .status-dot.offline {
      background: var(--danger);
      box-shadow: 0 0 0 3px rgba(239, 68, 68, .15);
    }

    /* 现代分段选择器 (Segmented Control) */
    /* 主题色选择器：色块取 theme.js 的 swatch（--sw-light / --sw-dark），选中环用前景色以区别于主色 */
    .theme-picker { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
    .theme-option {
      display: flex; flex-direction: column; align-items: center; gap: 6px;
      position: relative; padding: 10px 4px 8px; border-radius: 10px; cursor: pointer;
      border: 1px solid var(--border); background: var(--card);
      -webkit-user-select: none; user-select: none;
    }
    .modal .theme-option { display: flex; margin: 0; font-size: 13px; color: var(--fg); }
    .theme-swatch {
      display: block; width: 28px; height: 28px; border-radius: 50%;
      background: var(--sw-light); box-shadow: 0 0 0 2px var(--card), 0 0 0 3px var(--border);
    }
    @media (prefers-color-scheme: dark) { .theme-swatch { background: var(--sw-dark); } }
    @media (hover: hover) { .theme-option:hover { background: var(--hover); } }
    .theme-option:has(input:checked) { border-color: var(--fg2); }
    .theme-option:has(input:checked) .theme-swatch { box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--fg); }
    .theme-option:has(input:checked) .theme-name { font-weight: 600; }
    .theme-option:has(input:focus-visible) { outline: 2px solid var(--primary); outline-offset: 2px; }
    .segmented-control {
      display: flex;
      align-items: stretch;
      background: var(--bg2);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 3px;
      gap: 3px;
      width: 100%;
      box-sizing: border-box;
    }
    .seg-btn {
      flex: 1 1 0;
      min-height: 38px;
      border: none;
      background: transparent;
      border-radius: 7px;
      font-size: 13.5px;
      color: var(--fg2);
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      padding: 4px 8px;
      transition: all .16s cubic-bezier(.16, 1, .3, 1);
    }
    @media (hover: hover) { .seg-btn:hover {
      color: var(--fg);
    } }
    .seg-btn.active {
      background: var(--card);
      color: var(--fg);
      font-weight: 600;
      box-shadow: 0 1px 4px rgba(0,0,0,.08);
    }
    .seg-btn svg {
      width: 15px;
      height: 15px;
      flex-shrink: 0;
    }
    .seg-wide .seg-btn {
      flex-direction: column;
      gap: 2px;
      padding: 6px 8px;
      min-height: 48px;
    }
    .seg-kbd-label {
      font-size: 13px;
      font-weight: 600;
    }
    .seg-kbd-label kbd {
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: 4px;
      padding: 1px 4px;
      font-size: 11px;
      font-family: inherit;
      box-shadow: 0 1px 0 var(--border);
    }
    .seg-subtext {
      font-size: 11px;
      color: var(--fg3);
      font-weight: normal;
    }

    /* 就地操作行与内联测试结果 */
    .settings-inline-action-row {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-top: 4px;
      flex-wrap: wrap;
    }
    .settings-inline-action-row .btn {
      min-height: 34px;
      padding: 0 12px;
      font-size: 13px;
      flex: none;
    }
    .settings-inline-action-row .test-result {
      margin-top: 0;
      font-size: 13px;
      flex: 1;
      min-width: 0;
      line-height: 1.4;
    }

    /* 预设模型 Chips 栏 */
    .settings-chips-bar {
      display: flex;
      align-items: center;
      gap: 6px;
      flex-wrap: wrap;
      margin-top: 2px;
    }
    .settings-chips-hint {
      font-size: 12px;
      color: var(--fg3);
    }
    .settings-chip-btn {
      font-size: 12px;
      padding: 3px 8px;
      border-radius: 6px;
      border: 1px solid var(--border);
      background: var(--bg2);
      color: var(--fg2);
      cursor: pointer;
      transition: all .15s ease;
    }
    @media (hover: hover) { .settings-chip-btn:hover {
      background: var(--primary-bg);
      color: var(--primary-deep);
      border-color: color-mix(in srgb, var(--primary) 30%, var(--border));
    } }

    /* 存储指标与工具列表 */
    .storage-metrics-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
    }
    .storage-metric-item {
      background: var(--bg2);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 10px 8px;
      text-align: center;
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .storage-metric-num {
      font-size: 18px;
      font-weight: 700;
      color: var(--fg);
    }
    .storage-metric-label {
      font-size: 11.5px;
      color: var(--fg3);
    }
    .storage-tool-list {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .storage-tool-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 8px 0;
      border-bottom: 1px solid var(--border);
    }
    .storage-tool-item:last-child {
      border-bottom: none;
      padding-bottom: 0;
    }
    .storage-tool-desc {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }
    .storage-tool-desc strong {
      font-size: 13.5px;
      color: var(--fg);
    }
    .storage-tool-desc span {
      font-size: 12px;
      color: var(--fg3);
      line-height: 1.4;
    }
    .btn-ghost-danger {
      background: transparent;
      border-color: transparent;
      color: var(--danger, #ef4444);
      cursor: pointer;
      font-size: 12.5px;
      padding: 0 8px;
    }
    @media (hover: hover) { .btn-ghost-danger:hover {
      background: rgba(239, 68, 68, .1);
      border-color: rgba(239, 68, 68, .2);
    } }
    .visually-hidden {
      position: absolute !important;
      width: 1px !important;
      height: 1px !important;
      padding: 0 !important;
      margin: -1px !important;
      overflow: hidden !important;
      clip: rect(0, 0, 0, 0) !important;
      white-space: nowrap !important;
      border: 0 !important;
    }

    .test-result { font-size: 16px; margin-top: 10px; }
    .test-result.ok { color: var(--primary-deep); }
    .test-result.err { color: var(--danger); }
    .actions { display: flex; gap: 8px; margin-top: 18px; }
    .btn {
      min-height: 42px; padding: 0 18px; border-radius: 10px; font-size: 16px;
      border: 1px solid var(--border); background: var(--card); color: var(--fg);
      display: inline-flex; align-items: center; justify-content: center; gap: 6px;
      box-sizing: border-box; cursor: pointer; text-decoration: none;
    }
    .btn svg {
      width: 16px; height: 16px; flex-shrink: 0;
    }
    .btn-primary { background: var(--primary); border-color: var(--primary); color: var(--on-primary); font-weight: 600; margin-left: auto; }
    .btn-primary:disabled { opacity: .4; }
    .btn-danger { background: var(--danger); border-color: var(--danger); color: #fff; font-weight: 600; }
    .confirm-modal { max-width: 360px; }
    .tag-rewrite-modal { max-width: 380px; padding: 16px; }
    .tag-rewrite-modal .modal-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
    .tag-rewrite-modal h3 { margin: 0; font-size: 16px; }
    .tag-rewrite-from { margin: 0 0 12px; color: var(--fg2); font-size: 13px; word-break: break-all; }
    .tag-rewrite-field { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--fg2); }
    .tag-rewrite-field input {
      height: 38px; border: 1px solid var(--border); border-radius: 8px;
      padding: 0 10px; font-size: 15px; color: var(--fg); background: var(--card);
    }
    .tag-rewrite-scope { display: flex; gap: 8px; margin: 12px 0 0; }
    .tag-rewrite-scope-btn {
      flex: 1; height: 34px; border-radius: 8px; border: 1px solid var(--border);
      background: transparent; color: var(--fg2); font-size: 13px; cursor: pointer;
    }
    .tag-rewrite-scope-btn.on {
      border-color: color-mix(in srgb, var(--primary) 40%, var(--border));
      background: var(--primary-bg); color: var(--primary-deep); font-weight: 600;
    }
    .tag-rewrite-err { margin: 8px 0 0; color: var(--danger, #c0392b); font-size: 12px; }
    #tagRewriteMask { align-items: center; }
    #tagRewriteMask .actions { margin-top: 14px; gap: 8px; display: flex; }
    #tagRewriteMask .btn { min-height: 38px; font-size: 15px; }
    /* ---------- 详情页（独立页面，统一视觉） ---------- */
    .detail-page {
      position: fixed; inset: 0; z-index: 40;
      display: flex; flex-direction: column;
      background: var(--card); overflow: hidden;
    }
    @media (min-width: 768px) {
      .detail-page { align-items: center; justify-content: center; background: var(--bg); padding: 24px max(24px, env(safe-area-inset-right, 0px)) 24px max(24px, env(safe-area-inset-left, 0px)); }
      .detail-page-inner {
        width: 100%; max-width: 760px; height: 100%; max-height: calc(100vh - 48px);
        background: var(--card); border: 1px solid var(--border);
        border-radius: 16px; box-shadow: var(--shadow);
        display: flex; flex-direction: column; overflow: hidden;
      }
    }
    .detail-page-inner { display: flex; flex-direction: column; width: 100%; height: 100%; min-height: 0; background: var(--card); }
    .detail-top {
      flex: none; display: flex; align-items: center; gap: 8px;
      padding: 10px 16px; border-bottom: 1px solid var(--border);
      /* 背景透明：移动端继承整页 --bg，桌面端继承 inner --card，消除色块拼接 */
    }
    .detail-top .icon-btn { padding: 6px; border-radius: 8px; color: var(--fg2); }
    @media (hover: hover) { .detail-top .icon-btn:hover { background: var(--hover); color: var(--fg); } }
    .detail-top .icon-btn.active { background: var(--primary-bg); color: var(--primary); }
    .detail-title-wrap { display: flex; align-items: center; gap: 8px; min-width: 0; }
    .detail-title { font-size: 16px; font-weight: 700; white-space: nowrap; }
    .detail-meta-badges { display: inline-flex; align-items: center; gap: 6px; flex-wrap: nowrap; }
    .detail-spacer { flex: 1; }
    .detail-top-actions { display: flex; align-items: center; gap: 4px; position: relative; }
    .detail-edit-top-actions { display: inline-flex; align-items: center; gap: 8px; }
    .detail-edit-top-actions[hidden] { display: none; }
    .detail-normal-top-actions { display: inline-flex; align-items: center; gap: 4px; }
    .detail-normal-top-actions[hidden] { display: none; }
    .detail-top-actions .menu-pop {
      right: 0; left: auto; top: calc(100% + 6px); min-width: 180px;
    }
    .detail-scroll { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 18px 20px; }

    /* 元数据信息看板（字数、阅读时长、待办完成度、创建与更新时间） */
    .detail-meta-bar {
      display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
      padding: 8px 12px; margin-bottom: 16px;
      background: color-mix(in srgb, var(--muted) 35%, var(--card));
      border: 1px solid var(--border); border-radius: 10px;
      font-size: 12px; color: var(--fg2);
    }
    .detail-meta-bar .meta-pill {
      display: inline-flex; align-items: center; gap: 4px;
      white-space: nowrap; line-height: 1.4;
    }
    .detail-meta-bar .meta-pill svg {
      width: 13px; height: 13px; stroke-width: 2; color: var(--fg3); flex-shrink: 0;
    }
    .detail-meta-bar .meta-sep { color: var(--border); }

    /* 目录大纲（长文标题树） */
    .detail-toc-wrap {
      border: 1px solid var(--border); border-radius: 10px; margin-bottom: 16px;
      background: color-mix(in srgb, var(--muted) 25%, var(--card));
      overflow: hidden; transition: border-color .15s;
    }
    .detail-toc-head {
      display: flex; align-items: center; justify-content: space-between;
      padding: 8px 12px; cursor: pointer; user-select: none;
    }
    .detail-toc-title {
      font-size: 13px; font-weight: 600; color: var(--fg2);
      display: flex; align-items: center; gap: 6px;
    }
    .detail-toc-title svg { width: 14px; height: 14px; }
    .detail-toc-toggle {
      background: none; border: none; cursor: pointer; color: var(--fg3);
      padding: 2px; border-radius: 4px; display: inline-flex; align-items: center;
    }
    .detail-toc-toggle .icon-chev { width: 16px; height: 16px; transition: transform .2s ease; }
    .detail-toc-wrap.collapsed .icon-chev { transform: rotate(-90deg); }
    .detail-toc-wrap.collapsed .detail-toc-list { display: none; }
    .detail-toc-list {
      padding: 4px 10px 10px; border-top: 1px dashed var(--border);
      display: flex; flex-direction: column; gap: 2px; max-height: 220px; overflow-y: auto;
    }
    .detail-toc-item {
      text-decoration: none; color: var(--fg2); font-size: 13px;
      padding: 4px 8px; border-radius: 6px; display: block;
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
      transition: background .15s, color .15s;
    }
    @media (hover: hover) { .detail-toc-item:hover { background: var(--hover); color: var(--primary); } }
    .detail-toc-item.level-1 { font-weight: 600; }
    .detail-toc-item.level-2 { padding-left: 18px; }
    .detail-toc-item.level-3 { padding-left: 30px; font-size: 12px; }
    .detail-toc-item.level-4 { padding-left: 42px; font-size: 12px; color: var(--fg3); }

    /* 主 memo：无卡片框，直接内容流 */
    #detailMemo .memo { border: none; box-shadow: none; padding: 0; background: transparent; }
    #detailMemo .memo-header { margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
    #detailMemo .content { font-size: 15px; line-height: 1.85; word-break: break-word; }
    .detail-memo-time { font-size: 13px; color: var(--fg2); }
    .detail-creator { font-size: 12px; color: var(--fg3); margin: 6px 0 16px; padding-bottom: 16px; border-bottom: 1px solid var(--border); }

    /* 详情页专属内联编辑器 */
    .detail-editor-box {
      border: 1px solid var(--border); border-radius: 12px;
      background: var(--card); padding: 14px; margin-bottom: 16px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    }
    .detail-editor-host { min-height: 160px; max-height: none; overflow-y: visible; }
    .detail-editor-tools { padding-top: 10px; margin-top: 10px; border-top: 1px solid var(--border); }
    .detail-editor-actions {
      display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 12px;
    }
    /* 处于就地编辑状态时：彻底隐藏底部评论输入区、评论区列表与关联笔记，释放全部空间，杜绝软键盘与操作冲突 */
    .detail-page.is-editing .detail-input { display: none !important; }
    .detail-page.is-editing .detail-comments-wrap,
    .detail-page.is-editing .detail-relations-wrap { display: none !important; }
    .detail-page.is-editing .detail-scroll { padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }

    /* 正文图片交互增强：鼠标指针与微悬停效果 */
    .content img {
      max-width: 100%; border-radius: 8px; cursor: pointer;
      transition: opacity .15s ease;
    }
    @media (hover: hover) { .content img:hover { opacity: .92; } }

    /* 评论区 */
    .detail-comments-wrap {
      margin-top: 16px;
      padding-top: 14px;
      border-top: 1px solid var(--border);
    }
    .detail-comments-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 12px;
    }
    .detail-comments-title {
      font-size: 14.5px;
      font-weight: 600;
      color: var(--fg);
      display: flex;
      align-items: center;
      gap: 6px;
    }
    #detailCommentCount {
      font-size: 13px;
      font-weight: 500;
      color: var(--fg3);
    }
    .detail-add-comment-btn {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      height: 30px;
      min-height: 30px;
      padding: 0 12px;
      border-radius: 8px;
      font-size: 12.5px;
      font-weight: 500;
      cursor: pointer;
      background: var(--primary);
      color: var(--on-primary);
      border: none;
      transition: all .15s ease;
    }
    @media (hover: hover) { .detail-add-comment-btn:hover {
      opacity: .92;
      transform: translateY(-0.5px);
    } }
    .detail-add-comment-btn svg {
      width: 13px;
      height: 13px;
    }
    .detail-comments-empty {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 20px 0 16px;
      gap: 8px;
      background: color-mix(in srgb, var(--muted) 30%, transparent);
      border: 1px dashed var(--border);
      border-radius: 10px;
    }
    .detail-empty-add-btn {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      min-height: 30px;
      height: 30px;
      padding: 0 12px;
      border-radius: 8px;
      font-size: 12.5px;
    }
    .detail-add-comment-foot-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      width: 100%;
      padding: 10px;
      margin-top: 10px;
      border: 1px dashed var(--border);
      border-radius: 10px;
      background: none;
      color: var(--fg2);
      font-size: 13px;
      cursor: pointer;
      transition: all .15s ease;
    }
    @media (hover: hover) { .detail-add-comment-foot-btn:hover {
      border-color: var(--primary);
      color: var(--primary);
      background: var(--primary-bg);
    } }

    /* ---------- 悬浮评论编辑器（详情页与卡片流全局复用） ---------- */
    #commentMask {
      z-index: 120;
      background: rgba(0, 0, 0, .45);
      backdrop-filter: blur(2px);
      -webkit-backdrop-filter: blur(2px);
    }
    .comment-modal {
      position: relative;
      width: 100%;
      background: var(--card);
      display: flex;
      flex-direction: column;
      box-sizing: border-box;
      overflow: hidden !important;
      scroll-padding: 0 !important;
      -webkit-overflow-scrolling: auto !important;
      touch-action: manipulation;
    }
    @media (min-width: 769px) {
      #commentMask { align-items: center; justify-content: center; padding: 20px; }
      .comment-modal {
        max-width: 520px;
        border-radius: 20px;
        border: 1px solid var(--border);
        box-shadow: 0 16px 48px rgba(0,0,0,.24);
        padding: 16px 20px 14px;
        gap: 12px;
        animation: modalPopIn .2s cubic-bezier(.16, 1, .3, 1);
        max-height: 85vh;
      }
      .comment-modal-editor-wrap textarea {
        min-height: 100px;
        max-height: 220px;
        font-size: 14.5px;
      }
    }
    @media (max-width: 768px) {
      #commentMask {
        align-items: flex-start;
        justify-content: center;
        padding: calc(14px + env(safe-area-inset-top, 0px)) 12px 14px;
        overflow: hidden !important;
        touch-action: none;
      }
      .comment-modal {
        max-width: 540px;
        border-radius: 24px;
        border: 1px solid var(--border);
        box-shadow: 0 16px 48px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.05);
        padding: 14px 16px 12px;
        gap: 10px;
        animation: modalPopIn .2s cubic-bezier(.16, 1, .3, 1);
        overflow: hidden !important;
        transform-origin: center top;
        max-height: calc(100% - 14px);
      }
      .comment-modal-hint {
        display: none !important;
      }
      .comment-modal-cancel {
        display: none !important;
      }
      .comment-modal-editor-wrap textarea {
        min-height: 84px;
        max-height: 180px;
        font-size: 15px;
        touch-action: pan-y;
      }
    }
    @keyframes modalPopIn {
      from {
        opacity: 0;
        transform: scale(.95) translateY(-8px);
      }
      to {
        opacity: 1;
        transform: scale(1) translateY(0);
      }
    }
    .comment-modal-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      flex: none;
    }
    .comment-modal-title-wrap {
      display: flex;
      align-items: center;
      gap: 8px;
      min-width: 0;
      flex: 1;
    }
    .comment-modal-icon {
      width: 17px;
      height: 17px;
      color: var(--primary);
      flex-shrink: 0;
    }
    .comment-modal-title-text {
      display: flex;
      align-items: center;
      gap: 8px;
      min-width: 0;
    }
    .comment-modal-title-text h3 {
      margin: 0;
      font-size: 15.5px;
      font-weight: 600;
      color: var(--fg);
      line-height: 1.2;
      flex-shrink: 0;
    }
    .comment-modal-sub {
      font-size: 12px;
      color: var(--fg3);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 240px;
    }
    .comment-modal-close {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: var(--fg2);
      background: var(--muted);
      cursor: pointer;
      flex-shrink: 0;
      transition: all .15s ease;
    }
    @media (hover: hover) { .comment-modal-close:hover {
      background: var(--border);
      color: var(--fg);
    } }
    .comment-modal-close svg {
      width: 14px;
      height: 14px;
    }
    .comment-modal-body {
      display: flex;
      flex-direction: column;
      flex: 1 1 auto;
      min-height: 0;
    }
    .comment-modal-editor-wrap {
      width: 100%;
      border: 1px solid var(--border);
      border-radius: 12px;
      background: var(--bg);
      padding: 10px 12px;
      box-sizing: border-box;
      transition: border-color .15s ease, box-shadow .15s ease;
    }
    .comment-modal-editor-wrap:focus-within {
      border-color: var(--primary);
      box-shadow: 0 0 0 2px var(--primary-bg, rgba(var(--primary-rgb), .15));
    }
    .comment-modal-editor-wrap textarea {
      width: 100%;
      border: none;
      outline: none;
      background: transparent;
      font-family: inherit;
      line-height: 1.6;
      color: var(--fg);
      resize: none;
      box-sizing: border-box;
      padding: 0;
      margin: 0;
      display: block;
    }
    .comment-modal-foot {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      flex: none;
      padding-top: 2px;
    }
    .comment-modal-tools {
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .comment-modal-tools .tool-btn {
      width: 32px;
      height: 32px;
      border-radius: 8px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: var(--bg);
      border: 1px solid var(--border);
      color: var(--fg2);
      cursor: pointer;
      font-size: 13.5px;
      font-weight: 600;
      transition: all .15s ease;
    }
    @media (hover: hover) { .comment-modal-tools .tool-btn:hover {
      background: var(--card);
      color: var(--primary);
      border-color: var(--primary);
    } }
    .comment-modal-tools .tool-btn svg {
      width: 14px;
      height: 14px;
    }
    .comment-modal-hint {
      font-size: 12px;
      color: var(--fg3);
      margin-left: 4px;
    }
    .comment-modal-actions {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .comment-modal-actions .btn {
      min-height: 34px;
      height: 34px;
      padding: 0 16px;
      border-radius: 8px;
      font-size: 13.5px;
      font-weight: 600;
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }
    .comment-modal-actions .btn svg {
      width: 14px;
      height: 14px;
    }

    /* 详情页输入框与快捷工具 */
    .detail-input {
      flex: none; display: flex; flex-direction: column; gap: 6px;
      padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
      border-top: 1px solid var(--border); background: var(--card);
    }
    .detail-input-row { display: flex; align-items: center; gap: 8px; width: 100%; }
    .detail-input-tools { display: flex; align-items: center; gap: 6px; }
    .detail-input-tools .tool-btn {
      background: none; border: 1px solid var(--border); border-radius: 6px;
      padding: 2px 8px; font-size: 12px; color: var(--fg2); cursor: pointer;
      display: inline-flex; align-items: center; justify-content: center; gap: 4px;
      min-height: 24px; transition: background .15s, border-color .15s;
    }
    @media (hover: hover) { .detail-input-tools .tool-btn:hover { background: var(--hover); border-color: var(--primary); color: var(--primary); } }
    .detail-input-tools .tool-btn svg { width: 13px; height: 13px; }
    .detail-page.keyboard-open .detail-input {
      padding-bottom: 10px;
    }
    .detail-input textarea {
      flex: 1; resize: none; border: 1px solid var(--border); border-radius: 12px;
      padding: 10px 12px; font-size: 14px; line-height: 1.8; background: var(--card); color: var(--fg);
      min-height: 42px; max-height: 120px; box-sizing: border-box;
    }
    .detail-input .send-btn {
      min-height: 42px; height: 42px; padding: 0 16px;
      display: inline-flex; align-items: center; justify-content: center; gap: 6px;
      flex: none; box-sizing: border-box;
    }
    .detail-add-rel-btn {
      display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px;
      border: 1px dashed var(--border); border-radius: 8px; background: none;
      font-size: 13px; color: var(--fg2); cursor: pointer; margin-top: 6px;
      transition: all .15s ease;
    }
    @media (hover: hover) { .detail-add-rel-btn:hover {
      border-color: var(--primary); color: var(--primary); background: var(--primary-bg);
    } }
    .detail-add-rel-btn svg { width: 14px; height: 14px; }
    /* 卡片底部评论区（官方 Web UI 风格：独立子区块 + pill 评论项） */
    .card-comments {
      margin: 0 -16px; padding: 8px 16px 12px;
      border-top: 1px solid var(--border);
      display: flex; flex-direction: column; gap: 4px;
    }
    .card-comments-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
    .card-comments-title { font-size: 12px; color: var(--fg3); font-weight: 500; }
    .card-comments-viewall {
      display: inline-flex; align-items: center; gap: 2px;
      font-size: 12px; color: var(--primary); cursor: pointer;
      padding: 2px 4px; border-radius: 6px; background: none; border: none;
    }
    @media (hover: hover) { .card-comments-viewall:hover { background: var(--primary-bg); } }
    .card-comment {
      display: flex; align-items: center; gap: 6px;
      background: color-mix(in srgb, var(--muted) 40%, var(--card));
      border-radius: 6px; padding: 4px 8px;
      min-width: 0; cursor: pointer; transition: background .15s;
    }
    @media (hover: hover) { .card-comment:hover { background: color-mix(in srgb, var(--muted) 60%, var(--card)); } }
    .card-comment-user {
      flex: none; font-size: 12px; font-weight: 600; color: var(--fg);
      max-width: 30%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .card-comment-dot { flex: none; color: var(--fg3); font-size: 11px; }
    .card-comment-text {
      flex: 1; min-width: 0; font-size: 12px; color: var(--fg2);
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .card-comment-loading { cursor: default; color: var(--fg3); }
    /* 详情页评论区（对齐官方 MemoCommentSection：完整卡片式评论） */
    .detail-comment-item { padding: 10px 0; border-bottom: 1px solid var(--border); }
    .detail-comment-item:last-child { border-bottom: none; }
    .detail-comment-creator { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
    .detail-comment-name { font-size: 12px; font-weight: 600; color: var(--fg); }
    .detail-comment-time { font-size: 11px; color: var(--fg3); }
    .detail-comment-del { margin-left: auto; color: var(--fg3); padding: 2px; }
    @media (hover: hover) { .detail-comment-del:hover { color: var(--danger); } }
    .detail-comment-body { font-size: 15px; word-break: break-word; }
    .detail-comment-body .content { color: var(--fg); }
    .comment-item { padding: 10px 0; border-bottom: 1px solid var(--border); }
    .comment-item:last-child { border-bottom: none; }
    .comment-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
    .comment-time { font-size: 11px; color: var(--fg3); }
    .comment-del { margin-left: auto; color: var(--fg3); padding: 2px; }
    @media (hover: hover) { .comment-del:hover { color: var(--danger); } }
    .comment-body { font-size: 15px; word-break: break-word; }
    .comment-body .content { color: var(--fg); }
    .comment-body .content .md-h1, .comment-body .content .md-h2, .comment-body .content .md-h3 { font-size: 15px; margin: 4px 0 2px; border-bottom: none; padding-bottom: 0; }
    .detail-relations-wrap { margin-top: 10px; }
    .detail-sep {
      font-size: 13px; font-weight: 600; color: var(--fg2);
      margin: 14px 0 8px; display: flex; align-items: center; gap: 6px;
    }
    .relation-item {
      display: flex; align-items: center; gap: 8px; padding: 9px 10px;
      border: 1px solid var(--border); border-radius: 10px; margin-bottom: 6px;
      font-size: 14px; color: var(--fg2); cursor: pointer;
      transition: border-color .15s, background .15s;
    }
    @media (hover: hover) { .relation-item:hover { border-color: var(--primary); background: var(--primary-bg); } }
    .relation-item.is-backlink { border-left: 3px solid var(--accent); }
    .relation-item .rel-icon { width: 14px; height: 14px; flex-shrink: 0; color: var(--fg3); }
    .relation-item.is-backlink .rel-icon { color: var(--accent); }
    .rel-snippet { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

    /* 正文内嵌笔记胶囊链接 */
    .memo-link-pill {
      display: inline-flex; align-items: center; gap: 4px;
      max-width: min(100%, 340px); vertical-align: -3px;
      background: var(--bg); border: 1px solid var(--border);
      border-radius: 6px; padding: 1px 7px 1px 5px;
      font-size: 0.9em; font-weight: 500; line-height: 1.4;
      color: var(--primary); text-decoration: none;
      cursor: pointer; transition: all .15s ease;
      user-select: none; margin: 0 2px;
    }
    @media (hover: hover) { .memo-link-pill:hover {
      background: var(--primary-bg, rgba(13, 148, 136, 0.08));
      border-color: var(--primary);
      color: var(--primary-deep, var(--primary));
    } }
    .memo-link-pill .pill-icon {
      width: 13px; height: 13px; flex-shrink: 0; color: var(--primary);
    }
    .memo-link-pill .pill-text {
      min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }

    /* 详情页完整展开关联笔记嵌入卡片 */
    .relation-card-embed {
      border: 1px solid var(--border); border-radius: 10px; margin-bottom: 10px;
      background: var(--card); overflow: hidden;
      transition: border-color .15s ease, box-shadow .15s ease;
      cursor: pointer;
    }
    @media (hover: hover) { .relation-card-embed:hover {
      border-color: var(--primary); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    } }
    .relation-card-embed.is-backlink {
      border-left: 3px solid var(--accent);
    }
    .relation-card-embed .rel-embed-head {
      display: flex; align-items: center; justify-content: space-between;
      padding: 8px 12px; background: var(--bg);
      border-bottom: 1px solid var(--border); font-size: 12px;
    }
    .relation-card-embed .rel-embed-meta {
      display: flex; align-items: center; gap: 6px; min-width: 0;
    }
    .relation-card-embed .rel-embed-icon {
      width: 14px; height: 14px; flex-shrink: 0;
    }
    .relation-card-embed.is-referencing .rel-embed-icon { color: var(--primary); }
    .relation-card-embed.is-backlink .rel-embed-icon { color: var(--accent); }
    .relation-card-embed .rel-embed-badge {
      font-weight: 600; color: var(--fg2); flex-shrink: 0;
    }
    .relation-card-embed.is-backlink .rel-embed-badge { color: #d97706; }
    .relation-card-embed .rel-embed-time {
      color: var(--fg3); font-size: 11px; flex-shrink: 0;
    }
    .relation-card-embed .rel-embed-jump {
      font-size: 12px; color: var(--primary); text-decoration: none;
      cursor: pointer; display: flex; align-items: center; gap: 2px; flex-shrink: 0;
    }
    @media (hover: hover) { .relation-card-embed .rel-embed-jump:hover { text-decoration: underline; } }
    .relation-card-embed .rel-embed-body {
      padding: 10px 12px; font-size: 14px; color: var(--fg);
      line-height: 1.55; word-break: break-word; max-height: 260px; overflow-y: auto;
    }
    .relation-card-embed .rel-embed-body p { margin: 4px 0; }
    .relation-card-embed.is-snippet-only .rel-embed-body {
      color: var(--fg2); font-style: italic;
    }

    /* 编辑器关联笔记托盘 */
    .composer-relations {
      display: flex; flex-direction: column; gap: 6px; padding: 4px 14px 8px;
    }
    .composer-relations-header {
      display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--fg3); font-weight: 500;
    }
    .composer-rel-icon { width: 14px; height: 14px; color: var(--fg3); flex-shrink: 0; }
    .composer-relations-list {
      display: flex; flex-wrap: wrap; gap: 6px;
    }
    .composer-rel-chip {
      display: inline-flex; align-items: center; gap: 5px; max-width: 100%;
      background: var(--card); border: 1px solid var(--border); border-radius: 6px;
      padding: 3px 8px; font-size: 12px; color: var(--fg2); line-height: 1.3;
      transition: border-color .15s, background .15s;
    }
    @media (hover: hover) { .composer-rel-chip:hover { border-color: var(--primary); } }
    .composer-rel-chip .chip-icon {
      width: 12px; height: 12px; color: var(--fg3); flex-shrink: 0;
    }
    .composer-rel-chip .chip-text {
      max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .composer-rel-chip .chip-remove {
      display: inline-flex; align-items: center; justify-content: center;
      width: 16px; height: 16px; border-radius: 50%; border: none; background: transparent;
      color: var(--fg3); cursor: pointer; padding: 0; margin-left: 2px;
      transition: color .12s, background .12s;
    }
    @media (hover: hover) { .composer-rel-chip .chip-remove:hover { color: var(--danger, #ef4444); background: var(--bg); } }
    .composer-rel-chip .chip-remove svg { width: 11px; height: 11px; }

    /* 卡片微型关联徽章与内容预览 */
    .card-relations {
      display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 2px;
    }
    .card-rel-pill {
      display: inline-flex; align-items: center; gap: 5px; max-width: 100%;
      font-size: 12px; color: var(--fg2); background: var(--bg);
      border: 1px solid var(--border); border-radius: 6px;
      padding: 3px 8px; cursor: pointer; text-decoration: none;
      transition: border-color .15s ease, background .15s ease, color .15s ease;
      user-select: none;
    }
    @media (hover: hover) { .card-rel-pill:hover {
      border-color: var(--primary); color: var(--primary-deep, var(--primary)); background: var(--card);
    } }
    .card-rel-pill.referenced {
      border-left: 2.5px solid var(--accent);
    }
    .card-rel-pill.referenced .rel-count {
      font-weight: 600; color: var(--accent); margin-left: 1px;
    }
    .card-rel-pill svg { width: 12px; height: 12px; flex-shrink: 0; color: var(--fg3); }
    @media (hover: hover) { .card-rel-pill:hover svg { color: var(--primary); } }
    .card-rel-pill.referenced svg { color: var(--accent); }
    .card-rel-pill .rel-prefix {
      font-size: 11px; font-weight: 500; color: var(--fg3); flex-shrink: 0;
    }
    .card-rel-pill .rel-text {
      max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    @media (max-width: 640px) {
      .card-rel-pill .rel-text {
        max-width: 160px;
      }
    }

    /* ---------- 关联笔记选择弹窗 ---------- */
    @media (min-width: 768px) {
      #relationSelectMask { align-items: center; }
      #relationSelectMask .relation-select-modal {
        border-radius: 16px; margin: 0 16px; max-width: 440px; width: 100%;
        box-shadow: 0 16px 48px rgba(0,0,0,.22);
        animation: modalInCenter .22s cubic-bezier(.4, 0, .2, 1);
        padding: 18px 18px 14px;
        background: var(--card);
        border: 1px solid var(--border);
        display: flex; flex-direction: column; max-height: 80vh;
      }
    }
    @media (max-width: 768px) {
      #relationSelectMask .relation-select-modal {
        position: fixed; inset: 0; width: 100% !important; height: 100% !important;
        max-height: none !important; border-radius: 0 !important;
        padding: 14px 16px 16px; background: var(--card);
        display: flex; flex-direction: column; z-index: 300;
      }
    }
    .relation-select-header {
      display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px;
    }
    .relation-select-title-wrap { display: flex; align-items: center; gap: 10px; }
    .relation-title-icon { width: 22px; height: 22px; color: var(--primary); flex-shrink: 0; }
    .relation-select-title-text h3 { font-size: 16px; font-weight: 600; margin: 0; color: var(--fg); }
    .relation-select-sub { font-size: 12px; color: var(--fg3); }
    .relation-select-search-wrap { margin-bottom: 10px; }
    .relation-select-search-wrap input {
      width: 100%; height: 38px; border: 1px solid var(--border); border-radius: 8px;
      padding: 0 12px; background: var(--bg); color: var(--fg); font-size: 14px; outline: none;
      transition: border-color .15s;
    }
    .relation-select-search-wrap input:focus { border-color: var(--primary); }
    .relation-select-body {
      flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch;
      display: flex; flex-direction: column; gap: 6px; min-height: 180px; max-height: 380px;
      padding-right: 2px;
    }
    .relation-candidate-item {
      padding: 10px 12px; border: 1px solid var(--border); border-radius: 9px;
      background: var(--bg); cursor: pointer; transition: all .15s ease;
      display: flex; flex-direction: column; gap: 4px;
    }
    .relation-candidate-item:focus-visible {
      border-color: var(--primary); background: var(--primary-bg, var(--card));
      outline: none;
    }
    @media (hover: hover) { .relation-candidate-item:hover {
      border-color: var(--primary); background: var(--primary-bg, var(--card));
      outline: none;
    } }
    .relation-candidate-item .rel-cand-snippet {
      font-size: 13px; color: var(--fg); line-height: 1.45;
      max-height: 2.9em;
      overflow: hidden; text-overflow: ellipsis; display: -webkit-box;
      -webkit-line-clamp: 2; -webkit-box-orient: vertical;
      word-break: break-word;
    }
    .relation-candidate-item .rel-cand-time {
      font-size: 11px; color: var(--fg3); align-self: flex-end; margin-top: 2px;
    }
    .relation-empty-state {
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      padding: 36px 12px; color: var(--fg3); font-size: 13px; gap: 10px;
    }
    .relation-empty-state .empty-icon { width: 28px; height: 28px; opacity: .6; }
    /* ---------- 统计面板 + 活动热力图 ---------- */
    /* 头部复用 .modal-head（关闭在右上角）且固定不随内容滚走；桌面放宽到能一屏看完 52 周 */
    .stats-modal { display: flex; flex-direction: column; overflow: hidden; }
    .stats-modal .modal-head { flex: none; }
    .stats-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
    @media (min-width: 768px) { .stats-modal { max-width: min(880px, calc(100vw - 48px)); } }
    .stats-body { display: flex; flex-direction: column; gap: 18px; }
    .stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
    .stat-card { background: var(--bg); border: 1px solid var(--border); border-radius: 12px; padding: 12px; text-align: center; }
    .stat-num { font-size: 24px; font-weight: 700; color: var(--primary-deep); line-height: 1.2; font-variant-numeric: tabular-nums; }
    .stat-label { font-size: 12px; color: var(--fg2); margin-top: 2px; }
    .stats-sect { font-size: 13px; font-weight: 600; color: var(--fg2); margin: 0 0 8px; }
    .stats-empty { font-size: 13px; color: var(--fg2); padding: 4px 0; }
    /* 热力图：每列一周、每行一个星期几，DOM 按日期先后排列；横向放不下时滚动（打开时 stats.js 滚到最右） */
    .heatmap { overflow-x: auto; padding: 3px; margin: 0 -3px; }
    .heat-grid {
      display: grid; width: max-content;
      grid-template-columns: auto auto; grid-template-areas: "corner months" "wds cells";
      column-gap: 6px; row-gap: 4px;
    }
    .heat-months {
      grid-area: months; display: grid;
      grid-template-columns: repeat(var(--heat-weeks, 52), 12px); column-gap: 3px;
      font-size: 10px; line-height: 12px; color: var(--fg2);
    }
    .heat-month { white-space: nowrap; }
    /* 起点落进左侧吸附区的标签整体隐藏：只剩右半截时「12月」会读成「2月」（stats.js syncHeatMonthLabels 在打开和滚动时切换） */
    .heat-month.is-clipped { visibility: hidden; }
    /* 星期列（连同左上角）横向滚动时吸在左侧：窄屏打开即滚到最右，不吸附就看不到星期，月份也会露出半截 */
    .heat-wds, .heat-corner {
      position: sticky; left: -3px; z-index: 1; background: var(--bg);
      margin: 0 -6px 0 -3px; padding: 0 6px 0 3px;
    }
    .heat-corner { grid-area: corner; margin-bottom: -4px; padding-bottom: 4px; }
    .heat-wds {
      grid-area: wds; display: grid; grid-template-rows: repeat(7, 12px); row-gap: 3px;
      font-size: 10px; line-height: 12px; color: var(--fg2);
    }
    .heat-cells {
      grid-area: cells; display: grid;
      grid-template-rows: repeat(7, 12px); grid-auto-flow: column; grid-auto-columns: 12px; gap: 3px;
    }
    /* 空格子：--muted 底 + 1px --border 描边，四套主题深浅色下都能看出格子。
       有笔记的四级单独定档，以 --muted 为底混主色（30/50/72%，最高一级为实心主色）：热力图格子上没有数字，
       只靠颜色区分，空格与第一级、相邻两级的对比度都要看得出（test/stats.test.mjs 按四套主题深浅色校验下限）。
       分级（calculateHeatLevel）与侧栏日历相同，颜色不同：侧栏格子有数字、透明底，沿用低饱和的 14/22/32/44%。 */
    .heat-cell {
      display: block; width: 12px; height: 12px; padding: 0; border: 0; border-radius: 3px;
      background: var(--muted); box-shadow: inset 0 0 0 1px var(--border);
    }
    button.heat-cell { cursor: pointer; }
    .heat-cell.heat-l1 { background: color-mix(in srgb, var(--primary) 30%, var(--muted)); }
    .heat-cell.heat-l2 { background: color-mix(in srgb, var(--primary) 50%, var(--muted)); }
    .heat-cell.heat-l3 { background: color-mix(in srgb, var(--primary) 72%, var(--muted)); }
    .heat-cell.heat-l4 { background: var(--primary); }
    /* 今天与悬停是双色内环（外圈 + --bg 内缝）：较深两级接近实心主色，单色环会融进底色 */
    .heat-cell.is-today { box-shadow: inset 0 0 0 1.5px var(--fg2), inset 0 0 0 2.5px var(--bg); }
    @media (hover: hover) { button.heat-cell:hover { box-shadow: inset 0 0 0 1.5px var(--primary), inset 0 0 0 2.5px var(--bg); } }
    button.heat-cell:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
    .heat-foot {
      display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 12px;
      margin-top: 8px; font-size: 12px; color: var(--fg2);
    }
    .heat-legend { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; }
    .heat-legend .heat-cell { width: 10px; height: 10px; border-radius: 2px; }
    .heat-legend .heat-cell:first-child { margin-left: 3px; }
    .heat-legend .heat-cell:last-child { margin-right: 3px; }
    /* 桌面弹窗够宽：标签 Top 排成两列（按列先后），常见窗口高度下整个面板不用再滚动 */
    @media (min-width: 768px) {
      .tag-tops { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(4, auto); grid-auto-flow: column; column-gap: 32px; }
    }
    .tag-top {
      display: grid; grid-template-columns: minmax(0, 1fr) minmax(64px, 2fr) 2.5em; align-items: center; gap: 10px;
      padding: 6px 2px; font-size: 14px;
    }
    .tag-top .tname { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .tag-top .bar-track { height: 6px; border-radius: 3px; background: var(--muted); overflow: hidden; }
    .tag-top .bar { display: block; height: 100%; border-radius: 3px; background: var(--primary); }
    .tag-top .cnt { color: var(--fg2); font-size: 12px; text-align: right; font-variant-numeric: tabular-nums; }
    /* 删除确认弹层：始终屏幕居中（不随 .mask 默认底部弹出），手机上也是居中 */
    #confirmMask { align-items: center; }
    #confirmMask .modal {
      border-radius: 16px; margin: 0 16px;
      box-shadow: 0 12px 40px rgba(0,0,0,.15);
      animation: modalInCenter .24s cubic-bezier(.4, 0, .2, 1);
      /* 轻量确认窗：收紧底部留白（不继承底部抽屉的 safe-area padding） */
      padding: 18px 18px 14px;
    }
    #confirmMask h3 { margin-bottom: 8px; font-size: 16px; }
    #confirmMask .note { margin-top: 0; line-height: 1.5; }
    #confirmMask .actions { margin-top: 14px; gap: 8px; }
    #confirmMask .btn { min-height: 38px; font-size: 15px; }
    @keyframes modalInCenter { from { opacity: 0; transform: translateY(14px) scale(.97); } }
    .note { font-size: 12px; color: var(--fg3); margin-top: 14px; line-height: 1.7; }

    /* ---------- 标签 Emoji 图标配置弹层 ---------- */
    @media (min-width: 768px) {
      #tagEmojiMask { align-items: center; }
      #tagEmojiMask .tag-emoji-modal {
        border-radius: 16px; margin: 0 16px; max-width: 390px; width: 100%;
        box-shadow: 0 16px 48px rgba(0,0,0,.22);
        animation: modalInCenter .22s cubic-bezier(.4, 0, .2, 1);
        padding: 18px 18px 14px;
        background: var(--card);
        border: 1px solid var(--border);
      }
    }
    .tag-emoji-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
    .tag-emoji-title-wrap { display: flex; align-items: center; gap: 10px; }
    .tag-emoji-badge {
      width: 38px; height: 38px; border-radius: 10px; background: var(--bg);
      border: 1px solid var(--border); display: inline-flex; align-items: center; justify-content: center;
      font-size: 20px; flex-shrink: 0;
    }
    .tag-emoji-title-text h3 { font-size: 15px; font-weight: 600; margin: 0; color: var(--fg); line-height: 1.2; }
    .tag-emoji-sub { font-size: 12px; color: var(--primary-deep); margin-top: 2px; display: inline-block; font-weight: 500; }
    .tag-emoji-section-title { font-size: 11px; font-weight: 600; color: var(--fg3); margin-bottom: 8px; }
    .tag-emoji-grid {
      display: grid; grid-template-columns: repeat(8, 1fr); gap: 5px; margin-bottom: 12px;
      max-height: 180px; overflow-y: auto; padding: 2px;
    }
    .tag-emoji-grid-btn {
      width: 100%; aspect-ratio: 1; border-radius: 8px; border: 1px solid transparent;
      background: var(--bg); font-size: 18px; display: flex; align-items: center; justify-content: center;
      cursor: pointer; transition: all .12s ease; padding: 0;
    }
    @media (hover: hover) { .tag-emoji-grid-btn:hover { background: var(--card-hover, var(--bg-hover, var(--bg))); border-color: var(--border); transform: scale(1.14); } }
    .tag-emoji-grid-btn.active { background: var(--primary-bg); border-color: var(--primary); transform: scale(1.08); }
    .tag-emoji-custom-row { margin-bottom: 14px; }
    .tag-emoji-input-wrap {
      display: flex; align-items: center; background: var(--bg); border: 1px solid var(--border);
      border-radius: 8px; padding: 6px 10px; gap: 8px; font-size: 13px;
    }
    .tag-emoji-custom-label { color: var(--fg2); font-size: 12px; flex-shrink: 0; }
    .tag-emoji-input-wrap input { background: transparent; border: none; color: var(--fg); font-size: 15px; width: 100%; outline: none; }
    .tag-emoji-actions { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
    .tag-emoji-btn-clear { color: var(--danger) !important; background: transparent !important; }
    @media (hover: hover) { .tag-emoji-btn-clear:hover { background: var(--bg) !important; } }

    /* ---------- toast / debug ---------- */
    #toast {
      position: fixed; left: 50%; transform: translateX(-50%);
      bottom: calc(24px + env(safe-area-inset-bottom,0px)); z-index: 200;
      background: rgba(30,30,30,.92); color: #fff; font-size: 16px;
      border-radius: 999px; padding: 9px 18px; opacity: 0; pointer-events: none;
      transition: opacity .2s, transform .22s cubic-bezier(.4, 0, .2, 1);
      white-space: nowrap; translate: 0 8px;
    }
    #toast.show { opacity: 1; translate: 0 0; }
    #toast.hiding { opacity: 0; translate: 0 8px; }
    /* 带操作的提示：可点击、可换行，按钮至少 32px 高便于触控 */
    #toast.has-action {
      display: flex; align-items: center; gap: 10px; white-space: normal;
      width: max-content; max-width: min(calc(100vw - 32px), 520px);
      border-radius: 14px; padding: 6px 6px 6px 16px; line-height: 1.4;
    }
    #toast.has-action.show { pointer-events: auto; }
    #toast .toast-msg { min-width: 0; }
    #toast .toast-action {
      flex: none; min-height: 32px; padding: 4px 12px; border: 0; border-radius: 10px;
      background: rgba(255,255,255,.16); color: #fff; font: inherit; font-weight: 600; cursor: pointer;
    }
    #toast .toast-action:hover { background: rgba(255,255,255,.26); }
    #toast .toast-action:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
    /* 手机端浮动记录按钮占据右下 18–72px：带操作的提示抬到它上方，避免遮挡与误触 */
    @media (max-width: 768px) {
      #toast.has-action { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
    }
    .debugbar {
      position: fixed; left: 0; right: 0; bottom: 0; z-index: 300;
      background: var(--danger); color: #fff; font-size: 12px;
      padding: 8px 12px; text-align: center; display: none;
    }
    .debugbar.show { display: block; }
    /* 回到顶部（紧贴最底部笔记，下方预留避让浮动记录按钮的安全空间） */
    .back-top-wrap {
      text-align: center; padding: 4px 0 calc(36px + env(safe-area-inset-bottom, 0px));
    }
    .back-top-wrap:has(#btnBackTop[hidden]) {
      padding: 0 0 calc(32px + env(safe-area-inset-bottom, 0px));
    }
    @media (min-width: 769px) {
      .back-top-wrap { padding: 4px 0 12px; }
      .back-top-wrap:has(#btnBackTop[hidden]) {
        padding: 0; height: 0; overflow: hidden;
      }
    }
    .back-top {
      display: inline-flex; align-items: center; gap: 5px;
      border: 0; background: none; cursor: pointer;
      color: var(--fg3); font-size: 13px; padding: 6px 12px;
      border-radius: 999px; transition: color .15s, background .15s;
    }
    @media (hover: hover) { .back-top:hover { color: var(--primary-deep); background: var(--primary-bg); } }
    .back-top svg { width: 14px; height: 14px; }
  
@media (max-width: 768px) {
      /* 手机端防侧栏闪屏：初态未就绪时隐藏侧边栏，首屏 100% 直呈主界面 */
      body:not(.booted) .page.side { display: none !important; }
      /* 手机侧栏不放搜索框：顶栏已有搜索按钮和全屏搜索层（MEMO-010） */
      .side-search { display: none; }
      /* 手机：scroll-snap 两页翻页器（移植 dsh-mobile 的 PiUI 模式——丝滑且无空白）
         side 75% + main 100% 两页；overscroll-behavior-x: contain 阻止 iOS 横滚边界 rubber-band 露白；
         settle 重吸附（controller）保证永远停在整页 */
      .scroll-wrap { overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
      .scroll-wrap::-webkit-scrollbar { display: none; }
      /* WebKit 固定边缘颜色采样会跳过无自身背景的合成滚动层。
         两层都铺底，让 sticky 顶栏可被采样；html/body 的底色不能代替。
         尝试稳定 body 级弹层开关后的顶部颜色识别；
         机制与真机验证边界见 docs/ios-topbar-blur.md。 */
      .scroll-wrap, .page.main { background: var(--bg); }
      .page { scroll-snap-align: start; scroll-snap-stop: always; }
      .page.side { flex: 0 0 75%; flex-shrink: 0; } /* 侧栏页 75% */
      .page.main { width: 100%; flex: none; min-width: 0; } /* 主区全宽页（块级宽度，避免横向 flex 子项 + 内部纵向 flex 的 iOS 宽度 bug） */
      /* 手机：topbar 回归 sticky（主区流内子元素）——翻页拖动时跟着主区一起滑走，
         侧栏页露出的窄条里也自然可见（顶栏是主区的，露出属预期，无需隐藏逻辑）。
         v0.9.44 同结构已验证可行；v0.9.45/46 改 fixed 是当时 flex 嵌套结构所迫，现结构早已回归 */
      /* 手机：主区纵向不弹（下拉刷新单一位移源，不再与原生橡皮筋叠加） */
      .page.main { overscroll-behavior-y: none; }
      /* 手机：侧栏页露出条只挡手势不改布局——中途改 overflow 会对整个长列表强制重排（卡顿源），
         touch-action 在手势层挡住纵向（对在途手势也不生效，零布局抖动） */
      body.pager-side:not(.composer-full) .page.main { touch-action: pan-x; }
      /* 手机：顶栏标题压缩；搜索按钮 + 全屏搜索层 */
      .topbar { flex-wrap: nowrap; }
      .topbar h1 { flex: 1 1 auto; font-size: 16px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
      #btnSearch { display: inline-flex; }
      .searchbox .search-kbd { display: none; }
      #btnMenu .icon-desktop { display: none; }
      #btnMenu .icon-mobile { display: block; }
      /* 手机编辑器始终按 visualViewport 定位；聚焦前即处于最终位置。
         只过渡透明度，避免屏外聚焦与键盘高度动画互相追逐。
         网格布局（MEMO-012）：头部条与工具行 display:contents 拆开，各控件直接落位——
         可见范围胶囊并入标题行（不再单占一行），弹层停靠为工具条上方的托盘，工具条与发送键同排。 */
      .editor {
        position: fixed;
        top: calc(10px + env(safe-area-inset-top, 0px)); left: 10px; right: 10px; bottom: 10px;
        z-index: 90;
        margin: 0;
        padding: 10px 12px 12px;
        background: var(--card); border-radius: 24px;
        box-shadow: 0 12px 40px rgba(0,0,0,.28);
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto auto;
        grid-template-rows: auto minmax(0, 1fr) auto auto auto;
        grid-template-areas:
          "title head head"
          "top top top"
          "extras extras extras"
          "tray tray tray"
          "tools tools send";
        column-gap: 8px;
        max-width: none;
        max-height: 100dvh;
        overflow: hidden;
        visibility: hidden;
        opacity: 0;
        pointer-events: none;
        transition: opacity .2s ease;
      }
      .editor.open {
        visibility: visible;
        pointer-events: auto;
        opacity: 1;
      }
      .editor .composer-head, .editor .row.composer-tools { display: contents; }
      .editor .composer-title { grid-area: title; align-self: center; padding-left: 4px; font-size: 17px; font-weight: 600; color: var(--fg); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
      /* 胶囊与关闭键共用标题行右侧一格（各自靠右、胶囊让出关闭键的位置）：
         最后一列的宽度由发送键决定（编辑态「更新」更宽），标题行不受影响 */
      .editor .composer-audience { grid-area: head; align-self: center; justify-self: end; margin: 0 44px 0 0; }
      .editor .composer-audience .vis-select-wrap { height: 32px; }
      .editor .composer-audience .vis-select-wrap select { font-size: 13px; line-height: 30px; }
      .editor .composer-close {
        grid-area: head; align-self: center; justify-self: end;
        display: inline-flex; width: 36px; height: 36px; border-radius: 50%;
        background: var(--bg); color: var(--fg2);
      }
      .editor .composer-close:active { background: var(--border); }
      .editor .composer-close svg { width: 17px; height: 17px; }
      /* 主编辑区：占满键盘上方全部剩余空间（不嵌套灰底，整卡即书写面，干净） */
      .editor-top {
        grid-area: top; min-height: 0; margin-top: 6px;
        display: flex; align-items: stretch;
      }
      #editorHost { flex: 1 1 auto; min-height: 0; display: flex; }
      #editorHost .cm-editor { border: none; box-shadow: none; background: transparent; max-height: none; min-height: 0; min-width: 0; flex: 1 1 auto; }
      #editorHost .cm-editor.cm-focused { border: none; }
      #editorHost .cm-scroller { min-height: 0; overscroll-behavior: contain; }
      #editorHost .cm-content { padding: 6px 4px; min-height: 100%; box-sizing: border-box; font-size: 16px; line-height: 1.8; }
      .editor .composer-extras { grid-area: extras; min-height: 0; max-height: 25dvh; overflow-y: auto; overscroll-behavior: contain; }
      .editor .composer-extras:not(:has(> :not([hidden]))) { display: none; }
      .editor .hint { display: none; }
      /* 工具条：单行横滑的胶囊（不换行、不收纳），44px 触控；顺序按手机高频重排：插入 | 列表 | 缩进 | 行内 | 段落 */
      .editor .tools {
        grid-area: tools; min-width: 0; margin-top: 8px;
        background: var(--muted); border-radius: 14px; padding: 2px;
        --fmt-bar-bg: var(--muted); --fmt-fade: 32px;
      }
      .editor .tools-scroll { height: 40px; padding: 0 2px; }
      .editor .tg-insert { order: 0; }
      .editor .tg-list { order: 1; }
      .editor .tg-indent { order: 2; display: flex; }
      .editor .tg-inline { order: 3; }
      .editor .tg-block { order: 4; }
      .editor .tool-group { gap: 0; }
      /* 分隔线画在每组左侧：插入组在两种顺序里都排第一，其余组都带线 */
      .editor .tool-group + .tool-group::before { content: none; }
      .editor .tool-group:not(.tg-insert)::before {
        content: ""; flex: none; width: 1px; height: 18px; margin: 0 4px;
        background: color-mix(in srgb, var(--fg3) 55%, transparent);
      }
      .editor .tool { min-width: 40px; height: 40px; border-radius: 11px; }
      .editor .tool svg { width: 20px; height: 20px; }
      .editor .tool:active { background: var(--card); color: var(--primary-deep); }
      /* 灰底胶囊上主色浅底太淡：选中态加深一档 */
      .editor .tool[aria-pressed="true"], .editor .tool.is-active, .editor .tool[aria-expanded="true"] {
        background: color-mix(in srgb, var(--primary) 16%, var(--card));
      }
      .editor .tool-heading { padding: 0 4px 0 9px; }
      .editor .tool-heading .tool-chevron { width: 12px; height: 12px; }
      .editor .tool-heading-level { font-size: 14px; }
      /* 托盘：标题级别与链接表单停靠在工具条正上方，与工具条同宽，不再被卡片边缘裁切 */
      .editor .editor-pop-menu, .editor .link-pop {
        grid-area: tray; position: static; left: auto; max-width: none; width: auto; min-width: 0;
        margin-top: 8px; border-radius: 14px; box-shadow: none; background: var(--muted); border: 0;
        animation: tb-tray-in .16s cubic-bezier(.2, .8, .2, 1);
      }
      @keyframes tb-tray-in { from { opacity: 0; transform: translateY(6px); } }
      .editor .heading-pop { flex-direction: row; gap: 2px; padding: 2px; }
      .editor .heading-pop .tool-item {
        flex: 1 1 0; justify-content: center; min-width: 0; min-height: 40px;
        padding: 0 4px; border-radius: 11px; gap: 0;
      }
      .editor .heading-pop .h-name, .editor .heading-pop .menu-kbd, .editor .heading-pop .h-badge-p { display: none; }
      .editor .heading-pop [data-cmd="paragraph"] .h-name { display: inline; flex: none; font-size: 14px; font-weight: 600; }
      .editor .heading-pop .h-badge { width: auto; font-size: 14px; color: var(--fg); }
      .editor .heading-pop .h-badge svg { width: 18px; height: 18px; }
      .editor .heading-pop .tool-item[aria-checked="true"] { background: var(--card); color: var(--primary-deep); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
      .editor .link-pop { grid-template-columns: minmax(0, 1fr) auto; padding: 6px; gap: 6px; }
      .editor .link-pop .link-field { grid-column: 1; height: 40px; background: var(--card); border-color: transparent; border-radius: 10px; }
      .editor .link-pop .link-field input { font-size: 16px; } /* iOS 小于 16px 聚焦会放大页面 */
      .editor .link-pop .link-submit { grid-column: 2; grid-row: 1 / span 2; align-self: stretch; height: auto; border-radius: 10px; padding: 0 14px; flex-direction: column; justify-content: center; gap: 2px; }
      .editor .link-pop .link-submit svg { width: 18px; height: 18px; }
      /* 键盘弹起时把空间让给正文：收紧上下留白，控件尺寸不变 */
      .editor.keyboard-compact { padding-top: 6px; padding-bottom: 6px; }
      .editor.keyboard-compact .editor-top { margin-top: 2px; }
      .editor.keyboard-compact .tools,
      .editor.keyboard-compact .send-btn,
      .editor.keyboard-compact .editor-pop-menu,
      .editor.keyboard-compact .link-pop { margin-top: 6px; }
      .editor textarea { border: none; box-shadow: none; background: transparent; padding: 6px 10px; font-size: 16px; line-height: 1.8; min-height: 0; max-height: 100%; overflow-y: auto; overscroll-behavior: contain; }
      .editor textarea:focus { border: none; }
      .editor .send-btn { grid-area: send; align-self: center; justify-self: end; margin-top: 8px; }
      .editor .heading-pop [aria-checked="true"] .h-badge { color: inherit; }
      .send-btn {
        width: 44px; height: 44px; padding: 0; border-radius: 50%;
        display: inline-flex; align-items: center; justify-content: center;
        gap: 0; font-size: 0; flex-shrink: 0;
        margin-left: auto;
        background: var(--primary); color: var(--on-primary);
        box-shadow: 0 3px 10px color-mix(in srgb, var(--primary) 35%, transparent);
      }
      .send-btn:not(.editing) .send-text { display: none; }
      .send-btn svg {
        width: 18px; height: 18px;
        display: block; margin: 0;
        /* 纸飞机图标重心微调：补偿右上尖角与左下翼片面积差，视觉绝对居中（向左下补偿） */
        transform: translate(-1px, 1px);
      }
      .send-btn.editing {
        font-size: 16px; width: auto; min-height: 44px; height: 44px;
        border-radius: 12px; padding: 0 16px; gap: 0;
      }
      .send-btn.editing svg { display: none; }
      .send-btn.editing .send-text { display: inline; }
      .detail-input .send-btn {
        width: auto; min-height: 42px; height: 42px; padding: 0 16px;
        border-radius: 12px; gap: 6px; font-size: 16px;
      }
      .detail-input .send-btn svg { transform: none; display: inline-block; }
      .composer-mask {
        display: block; position: fixed; inset: 0; z-index: 85;
        /* Computed pixel insets are shared with composer-viewport.js. */
        padding-top: calc(10px + env(safe-area-inset-top, 0px));
        padding-bottom: max(10px, env(safe-area-inset-bottom, 0px));
        background: rgba(17,17,17,.45); /* 更深遮罩：悬浮卡四周露出的底色更有层级 */
        opacity: 0;
        pointer-events: none;
        transition: opacity .2s ease;
      }
      .composer-mask.show { opacity: 1; pointer-events: auto; }
      /* 全屏编辑时不显示主 FAB（避免双按钮冲突） */
      .fab { display: inline-flex !important; } /* 基础规则在下方（display:none），需覆盖 */
      body.composer-full .fab { display: none !important; }
      body:has(.detail-page:not([hidden])) .fab { display: none !important; }
      /* 图片预览条圆角适配 */
      .composer-preview { padding: 6px 2px 0; }
      #list { padding-bottom: 6px; }
      .memo { padding: 12px 16px; margin-bottom: 8px; }
      .menu-btn { width: 30px; height: 30px; }
      .menu-item { padding: 6px 9px; min-height: 32px; }
    }

    /* ---------- 桌面（≥769px）：侧栏贴左停靠、主区居中与人体工程学舒适度优化 ----------
       侧栏贴靠左边缘（left: 0），恢复 var(--card) 与微边框；主区占满剩余空间并在其内居中呈现笔记流；严格不影响移动端 */
    @media (min-width: 769px) {
      /* 桌面外层：标准 flex 左右双栏布局，消除全视口居中导致的左侧巨大断层 */
      .scroll-wrap {
        justify-content: flex-start;
        background: var(--bg);
        overflow-x: hidden;
      }

      /* 侧边栏：坚实停靠浏览器最左边缘，清晰面板层级与右侧分割线 */
      .page.side {
        flex: 0 0 calc(var(--nav-w) + env(safe-area-inset-left, 0px));
        width: calc(var(--nav-w) + env(safe-area-inset-left, 0px));
        height: 100%;
        background: var(--card);
        border-right: 1px solid var(--border);
        margin-right: 0;
        overflow-y: hidden;
        transition: width .25s cubic-bezier(.16, 1, .3, 1),
                    flex-basis .25s cubic-bezier(.16, 1, .3, 1),
                    opacity .2s ease;
        will-change: width, flex-basis, opacity;
      }
      .side-inner {
        width: var(--nav-w);
        box-sizing: border-box;
        padding: 16px 12px 14px 14px;
      }
      /* 侧边栏收起态：平滑收合宽度并淡出，固定 260px 内部容器防文字挤压折叠 */
      body.collapsed .page.side {
        width: 0;
        padding-left: 0;
        flex: 0 0 0;
        flex-basis: 0;
        margin-left: 0;
        margin-right: 0;
        border-right-color: transparent;
        opacity: 0;
        pointer-events: none;
        overflow: hidden;
      }

      /* 主区：充满侧栏右侧的全部空间，整体独立纵向滚动 */
      .page.main {
        flex: 1 1 0%;
        width: auto;
        max-width: none;
        height: 100%;
        background: var(--bg);
        padding-bottom: 32px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overflow-anchor: auto;
      }

      /* 顶栏：通栏吸顶导航条（52px），左侧常驻切换按钮与标题，底部分割线 */
      .topbar {
        position: sticky;
        top: 0;
        z-index: 20;
        width: 100%;
        max-width: none;
        height: 52px;
        box-sizing: border-box;
        padding: 0 20px;
        background: var(--bg);
        border-bottom: 1px solid var(--border);
        display: flex;
        align-items: center;
        gap: 12px;
      }
      .topbar h1 {
        font-size: 16px;
        font-weight: 600;
        color: var(--fg);
        letter-spacing: .2px;
      }
      #btnMenu, #btnRefresh {
        width: 34px;
        height: 34px;
        border-radius: 8px;
        color: var(--fg2);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        transition: background .15s, color .15s;
      }
      @media (hover: hover) { #btnMenu:hover, #btnRefresh:hover {
        background: var(--hover);
        color: var(--fg);
      } }
      #btnRefresh.has-pending {
        color: var(--primary-deep);
        background: var(--primary-bg);
      }
      @media (hover: hover) { #btnRefresh.has-pending:hover {
        background: var(--primary-bg);
      } }
      /* 同步状态胶囊与 34px 的顶栏按钮等高 */
      .sync-status-btn { min-width: 34px; height: 34px; }
      body.collapsed #btnMenu {
        color: var(--primary-deep);
        background: var(--primary-bg);
      }
      /* 折叠侧栏时，顶栏显式调出搜索按钮 */
      body.collapsed #btnSearch {
        display: inline-flex;
      }

      /* 主区可滚动包装器：在主区内部居中 */
      .main-scroll {
        width: 100%;
        box-sizing: border-box;
      }

      /* 编辑器整体：740px 黄金阅读/书写宽度卡片容器，居中排列 */
      .editor {
        visibility: visible !important;
        pointer-events: auto !important;
        opacity: 1 !important;
        transform: none !important;
        width: calc(100% - 32px);
        max-width: 740px;
        margin: 18px auto 14px;
        background: var(--card);
        border: 1px solid var(--border);
        border-radius: 12px;
        box-shadow: 0 1px 3px rgba(0,0,0,.04);
        padding: 12px 16px 10px;
        transition: max-width .25s cubic-bezier(.16, 1, .3, 1), border-color .15s, box-shadow .15s;
      }
      body.collapsed .editor {
        max-width: 780px;
      }
      .editor:focus-within {
        border-color: color-mix(in srgb, var(--primary) 55%, var(--border));
        box-shadow: 0 1px 3px rgba(0,0,0,.04), 0 0 0 3px var(--primary-bg);
      }
      /* CM6 编辑区：去自身描边与灰底，纯白一体化 */
      #editorHost .cm-editor {
        border: none;
        border-radius: 0;
        box-shadow: none;
        background: transparent;
        font-size: 14.5px;
      }
      #editorHost .cm-editor.cm-focused { border: none; }
      #editorHost .cm-scroller { line-height: 1.75; }
      #editorHost .cm-content { padding: 4px 2px 8px; font-size: 14.5px; line-height: 1.75; }
      .editor textarea {
        border: none;
        box-shadow: none;
        background: transparent;
        padding: 4px 2px 8px;
        font-size: 14.5px;
        line-height: 1.75;
      }

      /* 发送按钮：圆润主 CTA，推右对齐 */
      .send-btn {
        min-height: 34px; border-radius: 8px; padding: 0 15px;
        font-size: 13.5px; font-weight: 600; letter-spacing: .2px;
        box-shadow: 0 2px 8px color-mix(in srgb, var(--primary) 28%, transparent);
        margin-left: auto;
      }
      .send-btn:disabled { box-shadow: none; }
      /* 可见范围胶囊贴在「记录」左侧成组 [仅自己][记录]：胶囊保留 margin-left:auto 推右，按钮只留行内 gap 8px */
      .composer-audience + .send-btn { margin-left: 0; }

      /* 列表流与过滤器：740px 黄金阅读列居中，与编辑框精确几何对齐 */
      #list {
        width: calc(100% - 32px);
        max-width: 740px;
        margin: 0 auto;
        padding: 0 0 24px;
        box-sizing: border-box;
        transition: max-width .25s cubic-bezier(.16, 1, .3, 1);
      }
      body.collapsed #list {
        max-width: 780px;
      }
      .filter-bar {
        width: calc(100% - 32px);
        max-width: 740px;
        margin: 0 auto 12px;
        padding: 0; /* 胶囊左缘、计数右缘与卡片边缘对齐 */
        box-sizing: border-box;
        transition: max-width .25s cubic-bezier(.16, 1, .3, 1);
      }
      body.collapsed .filter-bar {
        max-width: 780px;
      }

      /* 笔记卡片：宽度与编辑框严格 100% 贴合对齐 */
      .memo {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
        border-radius: 12px;
        padding: 16px 20px;
        margin-bottom: 12px;
        border: 1px solid var(--border);
        box-shadow: 0 1px 2px rgba(0,0,0,.03);
        transition: border-color .18s ease, box-shadow .18s ease;
      }
      @media (hover: hover) { .memo:hover {
        border-color: color-mix(in srgb, var(--primary) 35%, var(--border));
        box-shadow: 0 2px 8px rgba(0,0,0,.04);
      } }
      .memo .memo-content {
        line-height: 1.75;
      }

      /* 侧栏搜索框与导航项悬浮效果 */
      .searchbox {
        background: var(--bg);
        border: 1px solid var(--border);
      }
      .searchbox:focus-within {
        border-color: var(--primary);
        box-shadow: 0 0 0 2px var(--primary-bg);
      }
      @media (hover: hover) { .nav-item:hover {
        background: var(--hover);
      } }
    }

    /* ============================================================
       AI 大模型配置、AI 指令配置管理与流式预览
       ============================================================ */
    .settings-sec-divider {
      height: 1px;
      background: var(--border);
      margin: 20px 0 16px;
    }
    .settings-sec-title {
      font-size: 15px;
      font-weight: 600;
      color: var(--fg);
      display: flex;
      align-items: center;
      gap: 6px;
      margin-bottom: 8px;
    }
    .settings-sec-title svg {
      width: 16px;
      height: 16px;
      color: var(--primary-deep);
    }
    .settings-sub-actions {
      margin-top: 10px;
      margin-bottom: 6px;
    }

    .modal-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 12px;
    }
    .modal-title-wrap {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .modal-title-wrap h3 {
      margin: 0 !important;
      font-size: 17px;
      font-weight: 600;
    }
    .modal-title-wrap svg {
      width: 18px;
      height: 18px;
      color: var(--primary-deep);
      flex-shrink: 0;
    }

    /* AI 指令配置管理 */
    .ai-prompts-modal {
      display: flex;
      flex-direction: column;
      box-sizing: border-box;
    }
    @media (min-width: 768px) {
      .ai-prompts-modal {
        max-width: 520px;
        width: 92vw;
        max-height: 86dvh;
      }
    }
    .ai-prompts-intro {
      font-size: 13px;
      color: var(--fg3);
      margin-bottom: 12px;
      line-height: 1.5;
    }
    .ai-prompt-form {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 12px 14px;
      margin-bottom: 12px;
      box-shadow: 0 2px 8px rgba(0,0,0,.04);
    }
    .ai-form-title {
      font-size: 14px;
      font-weight: 600;
      color: var(--primary-deep);
      margin-bottom: 8px;
    }
    .ai-prompt-form label {
      font-size: 12.5px;
      font-weight: 500;
      color: var(--fg2);
      display: block;
      margin-top: 8px;
      margin-bottom: 4px;
    }
    .ai-prompt-form label:first-of-type {
      margin-top: 0;
    }
    .ai-prompt-form input,
    .ai-prompt-form textarea {
      width: 100%;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: var(--bg);
      padding: 8px 10px;
      font-size: 13.5px;
      line-height: 1.5;
      color: var(--fg);
      box-sizing: border-box;
      font-family: inherit;
    }
    .ai-prompt-form textarea {
      resize: vertical;
      min-height: 72px;
    }
    .ai-prompt-form input:focus,
    .ai-prompt-form textarea:focus {
      border-color: var(--primary);
      outline: none;
    }
    .ai-prompt-form .actions {
      display: flex;
      justify-content: flex-end;
      gap: 8px;
      margin-top: 10px;
    }
    .ai-prompt-form .actions .btn {
      min-height: 34px;
      height: 34px;
      padding: 0 14px;
      font-size: 13px;
      border-radius: 8px;
    }
    .ai-prompts-list {
      display: flex;
      flex-direction: column;
      gap: 10px;
      flex: 1 1 auto;
      min-height: 80px;
      max-height: 52dvh;
      overflow-y: auto;
      overscroll-behavior: contain;
      padding: 2px;
      margin: 0 -2px;
    }
    .ai-prompt-card {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 12px 14px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      transition: border-color .14s ease, box-shadow .14s ease;
    }
    @media (hover: hover) { .ai-prompt-card:hover {
      border-color: var(--primary);
      box-shadow: 0 2px 10px rgba(0,0,0,.05);
    } }
    .ai-prompt-card-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .ai-prompt-name-badge {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .ai-prompt-name {
      font-size: 14.5px;
      font-weight: 600;
      color: var(--fg);
    }
    .ai-prompt-tag {
      font-size: 11px;
      padding: 1px 6px;
      border-radius: 4px;
      background: var(--primary-bg);
      color: var(--primary-deep);
      font-weight: 500;
    }
    .ai-prompt-btn-group {
      display: flex;
      align-items: center;
      gap: 4px;
    }
    .ai-prompt-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 28px;
      height: 28px;
      border: 0;
      background: none;
      border-radius: 6px;
      color: var(--fg3);
      cursor: pointer;
      padding: 0;
      transition: background .15s ease, color .15s ease;
    }
    @media (hover: hover) { .ai-prompt-btn:hover {
      background: var(--bg2);
      color: var(--fg);
    } }
    @media (hover: hover) { .ai-prompt-btn.del:hover {
      background: #fef2f2;
      color: var(--danger);
    } }
    .ai-prompt-btn svg {
      width: 14px;
      height: 14px;
      flex-shrink: 0;
    }
    .ai-prompt-preview {
      font-size: 12.5px;
      color: var(--fg2);
      line-height: 1.55;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      word-break: break-word;
      background: var(--bg);
      padding: 6px 10px;
      border-radius: 6px;
    }
    .ai-prompt-card.is-editing {
      border-color: var(--primary);
      box-shadow: 0 0 0 1px var(--primary), 0 4px 16px rgba(0,0,0,.08);
      background: var(--card);
      cursor: default;
      gap: 10px;
    }
    .ai-inline-title {
      font-size: 13px;
      font-weight: 600;
      color: var(--primary-deep);
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .ai-inline-field {
      display: flex;
      flex-direction: column;
      gap: 5px;
    }
    .ai-inline-label {
      font-size: 11.5px;
      font-weight: 600;
      color: var(--fg3);
    }
    .ai-inline-name {
      height: 34px;
      padding: 0 10px;
      border-radius: 6px;
      border: 1px solid var(--border);
      background: var(--bg);
      color: var(--fg);
      font-size: 13.5px;
      outline: none;
      box-sizing: border-box;
      transition: border-color .15s;
    }
    .ai-inline-name:focus {
      border-color: var(--primary);
    }
    .ai-inline-editor-host .cm-editor {
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: 6px;
      outline: none !important;
      font-size: 13px;
      line-height: 1.6;
      transition: border-color .15s;
    }
    .ai-inline-editor-host .cm-editor.cm-focused {
      border-color: var(--primary);
    }
    .ai-inline-editor-host .cm-scroller {
      min-height: 68px;
      max-height: 180px;
      padding: 4px 8px;
    }
    .ai-inline-textarea {
      min-height: 68px;
      max-height: 180px;
      padding: 6px 10px;
      border-radius: 6px;
      border: 1px solid var(--border);
      background: var(--bg);
      color: var(--fg);
      font-size: 13px;
      line-height: 1.6;
      resize: vertical;
      outline: none;
      box-sizing: border-box;
      font-family: inherit;
      transition: border-color .15s;
    }
    .ai-inline-textarea:focus {
      border-color: var(--primary);
    }
    .ai-inline-actions {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 8px;
      margin-top: 4px;
    }
    .ai-inline-actions .btn {
      min-height: 32px;
      height: 32px;
      padding: 0 14px;
      font-size: 12.5px;
      border-radius: 6px;
    }
    .ai-prompts-foot {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-top: 14px;
      padding-top: 12px;
      border-top: 1px solid var(--border);
    }
    .ai-prompts-foot .btn {
      min-height: 36px;
      height: 36px;
      padding: 0 14px;
      font-size: 13.5px;
      border-radius: 8px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
    }
    .ai-prompts-foot .btn-primary {
      margin-left: 0;
    }
    .ai-prompts-foot svg {
      width: 15px;
      height: 15px;
      flex-shrink: 0;
    }
    #btnResetAiPrompts {
      background: transparent;
      border-color: var(--border);
      color: var(--fg2);
      font-weight: 500;
    }
    @media (hover: hover) { #btnResetAiPrompts:hover {
      background: var(--bg2);
      color: var(--fg);
    } }

    /* 一次性 AI Prompt 输入弹窗 */
    .ai-custom-prompt-modal {
      display: flex;
      flex-direction: column;
      box-sizing: border-box;
    }
    @media (min-width: 768px) {
      .ai-custom-prompt-modal {
        max-width: 480px;
        width: 92vw;
        max-height: 86dvh;
      }
    }
    .ai-custom-memo-preview {
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 8px 12px;
      margin-bottom: 12px;
      font-size: 12.5px;
      line-height: 1.5;
    }
    .ai-custom-memo-label {
      font-weight: 600;
      color: var(--fg2);
      margin-bottom: 2px;
    }
    .ai-custom-memo-content {
      color: var(--fg3);
      white-space: pre-wrap;
      word-break: break-word;
      max-height: 64px;
      overflow-y: auto;
    }
    .ai-prompt-form-field {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .ai-prompt-form-field label {
      font-size: 13px;
      font-weight: 500;
      color: var(--fg);
    }
    .ai-prompt-form-field textarea {
      width: 100%;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: var(--card);
      padding: 10px 12px;
      font-size: 14px;
      line-height: 1.5;
      color: var(--fg);
      box-sizing: border-box;
      font-family: inherit;
      resize: vertical;
      min-height: 80px;
    }
    .ai-prompt-form-field textarea:focus {
      border-color: var(--primary);
      outline: none;
    }
    .ai-custom-prompt-chips {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-top: 8px;
    }
    .ai-chip {
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: 14px;
      padding: 4px 10px;
      font-size: 12px;
      color: var(--fg2);
      cursor: pointer;
      transition: all .15s ease;
      font-family: inherit;
    }
    @media (hover: hover) { .ai-chip:hover {
      background: var(--primary-bg);
      border-color: var(--primary);
      color: var(--primary-deep);
    } }
    .ai-custom-prompt-actions {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      gap: 10px;
      margin-top: 14px;
      padding-top: 12px;
      border-top: 1px solid var(--border);
    }
    .ai-custom-prompt-actions .btn {
      min-height: 36px;
      height: 36px;
      padding: 0 16px;
      font-size: 13.5px;
      border-radius: 8px;
    }
    .ai-custom-prompt-actions .btn-primary {
      margin-left: 0;
    }
    .ai-prompt-details {
      margin-bottom: 10px;
    }

    /* AI 流式预览弹窗 */
    .ai-preview-modal {
      display: flex;
      flex-direction: column;
    }
    @media (min-width: 768px) {
      .ai-preview-modal {
        max-width: 640px;
        width: 94vw;
        max-height: 86dvh;
      }
    }
    .ai-status-pill {
      font-size: 11.5px;
      font-weight: 500;
      padding: 2px 8px;
      border-radius: 10px;
      background: var(--primary-bg);
      color: var(--primary-deep);
      display: inline-flex;
      align-items: center;
      gap: 4px;
    }
    .ai-status-pill.generating {
      background: #e0f2fe;
      color: #0284c7;
    }
    .ai-status-pill.done {
      background: #dcfce7;
      color: #16a34a;
    }
    .ai-status-pill.error {
      background: #fee2e2;
      color: #dc2626;
    }
    .ai-source-details {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 8px 12px;
      margin-bottom: 12px;
      font-size: 13px;
      user-select: none;
    }
    .ai-source-details summary {
      cursor: pointer;
      color: var(--fg2);
      font-weight: 500;
      outline: none;
    }
    .ai-source-count {
      color: var(--fg3);
      font-size: 11.5px;
      font-weight: normal;
      margin-left: 4px;
    }
    .ai-source-body {
      margin-top: 8px;
      color: var(--fg3);
      font-size: 12.5px;
      line-height: 1.6;
      max-height: 100px;
      overflow-y: auto;
      white-space: pre-wrap;
      word-break: break-word;
      user-select: text;
    }
    /* 深度思考过程（DeepSeek R1/V4 等） */
    .ai-thinking-details {
      background: var(--bg2);
      border: 1px dashed var(--border);
      border-radius: 8px;
      padding: 8px 12px;
      margin-bottom: 12px;
      font-size: 12.5px;
      user-select: none;
      transition: all .2s ease;
    }
    .ai-thinking-details[open] {
      background: var(--card);
      border-style: solid;
    }
    .ai-thinking-details summary {
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: space-between;
      color: var(--fg2);
      font-weight: 500;
      outline: none;
    }
    .ai-thinking-title {
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }
    .ai-thinking-title svg {
      width: 14px;
      height: 14px;
      color: var(--primary);
      animation: thinkingPulse 2s ease-in-out infinite;
    }
    @keyframes thinkingPulse {
      0%, 100% { opacity: 0.6; transform: scale(0.95); }
      50% { opacity: 1; transform: scale(1.05); }
    }
    .ai-thinking-count {
      color: var(--fg3);
      font-size: 11px;
      font-weight: normal;
    }
    .ai-thinking-body {
      margin-top: 8px;
      padding-top: 8px;
      border-top: 1px solid var(--border);
      color: var(--fg3);
      font-size: 12px;
      line-height: 1.6;
      max-height: 140px;
      overflow-y: auto;
      white-space: pre-wrap;
      word-break: break-word;
      user-select: text;
    }
    .ai-preview-content-wrap {
      flex: 1;
      min-height: 180px;
      max-height: 440px;
      overflow-y: auto;
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 14px 16px;
      position: relative;
    }
    .ai-preview-output {
      font-size: 14px;
      line-height: 1.8;
      color: var(--fg);
      word-break: break-word;
    }
    .ai-cursor {
      display: inline-block;
      width: 6px;
      height: 15px;
      vertical-align: -2px;
      margin-left: 2px;
      background: var(--primary-deep);
      animation: aiCursorBlink .8s infinite;
    }
    @keyframes aiCursorBlink {
      0%, 100% { opacity: 1; }
      50% { opacity: 0; }
    }
    .ai-preview-error {
      margin-top: 10px;
      padding: 10px 14px;
      border-radius: 8px;
      background: #fef2f2;
      color: #b91c1c;
      font-size: 13px;
      line-height: 1.5;
      border: 1px solid #fca5a5;
    }
    .ai-preview-actions {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-top: 14px;
    }
    .ai-actions-group {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .ai-actions-primary {
      margin-left: auto;
    }
    .ai-actions-group .btn {
      font-size: 14px;
      min-height: 38px;
      padding: 0 14px;
      margin-left: 0;
      white-space: nowrap;
    }
    .ai-actions-group .btn:disabled {
      opacity: .45;
      cursor: not-allowed;
    }

    /* ---------- 桌面端鼠标中键罗盘自动滚动 ---------- */
    .mo-autoscroll-compass {
      position: fixed;
      width: 38px;
      height: 38px;
      margin-left: -19px;
      margin-top: -19px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.94);
      border: 1px solid rgba(0, 0, 0, 0.12);
      box-shadow: 0 4px 18px rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(255, 255, 255, 0.5) inset;
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      padding: 3px 0;
      pointer-events: none;
      z-index: 99999;
      box-sizing: border-box;
      opacity: 1;
      transition: opacity .12s ease;
      user-select: none;
    }
    @media (prefers-color-scheme: dark) {
      .mo-autoscroll-compass {
        background: rgba(30, 30, 30, 0.94);
        border: 1px solid rgba(255, 255, 255, 0.15);
        box-shadow: 0 4px 18px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.08) inset;
      }
    }
    .mo-autoscroll-compass.mo-asc-fadeout {
      opacity: 0;
      transform: scale(0.85);
      transition: opacity .12s ease, transform .12s ease;
    }
    .mo-asc-arrow {
      width: 14px;
      height: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--fg2);
      opacity: 0.45;
      transition: opacity .1s ease, color .1s ease, transform .1s ease;
    }
    .mo-asc-arrow svg {
      width: 14px;
      height: 14px;
    }
    .mo-asc-arrow.active {
      color: var(--primary-deep);
      opacity: 1;
    }
    .mo-asc-up.active {
      transform: translateY(-2px) scale(1.2);
    }
    .mo-asc-down.active {
      transform: translateY(2px) scale(1.2);
    }
    .mo-asc-dot {
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: var(--fg2);
      opacity: 0.5;
      transition: opacity .1s ease, transform .1s ease, background .1s ease;
    }
    .mo-asc-dot.active {
      background: var(--primary);
      opacity: 1;
      transform: scale(1.2);
    }

    /* ---------- 卡片就地编辑（In-Place Memo Editing） ---------- */
    .memo.is-editing {
      border-color: var(--primary);
      box-shadow: 0 0 0 1px var(--primary), 0 4px 16px rgba(0, 0, 0, 0.06);
      padding: 12px 14px 10px;
      transition: border-color .18s ease, box-shadow .18s ease;
    }
    .inline-editor-wrap {
      display: flex;
      flex-direction: column;
      gap: 6px;
      width: 100%;
    }
    .inline-editor-top {
      min-height: 68px;
    }
    .inline-editor-host {
      width: 100%;
    }
    .inline-editor-host .cm-editor {
      background: transparent;
      border: none;
      outline: none !important;
      font-size: 14px;
      line-height: 1.7;
      max-height: none;
    }
    .inline-editor-host .cm-scroller {
      font-family: inherit;
      line-height: 1.7;
      overflow-y: visible;
      max-height: none;
    }
    .inline-editor-host .cm-content {
      padding: 2px 0;
      min-height: 56px;
    }
    .inline-editor-host .cm-line {
      padding: 0;
    }
    .inline-editor-input {
      width: 100%;
      border: none;
      background: transparent;
      resize: vertical;
      outline: none;
      font-family: inherit;
      font-size: 14px;
      line-height: 1.7;
      min-height: 68px;
      color: var(--fg);
      box-sizing: border-box;
    }
    .inline-editor-attachments {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      padding: 4px 0;
    }
    .inline-att-item {
      position: relative;
      width: 60px;
      height: 60px;
      border-radius: 6px;
      border: 1px solid var(--border);
      background: var(--bg);
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: visible;
    }
    .inline-att-item.is-file {
      width: auto;
      max-width: 160px;
      height: 32px;
      padding: 0 8px;
      gap: 5px;
      overflow: hidden;
      border-radius: 6px;
    }
    .inline-att-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 5px;
      display: block;
    }
    .inline-att-file-icon svg {
      width: 16px;
      height: 16px;
      color: var(--fg2);
    }
    .inline-att-fn {
      font-size: 11px;
      color: var(--fg2);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .inline-att-del {
      position: absolute;
      top: -5px;
      right: -5px;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: var(--card);
      border: 1px solid var(--border);
      color: var(--fg2);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
      transition: background .12s, color .12s;
      z-index: 2;
    }
    @media (hover: hover) { .inline-att-del:hover {
      background: #fee2e2;
      color: #dc2626;
      border-color: #fca5a5;
    } }
    .inline-att-del svg {
      width: 11px;
      height: 11px;
    }
    .inline-editor-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      padding-top: 8px;
      margin-top: 4px;
      border-top: 1px dashed var(--border);
    }
    /* 格式按钮与主输入框同一套（.fmt-bar，见“格式工具栏”区块）；这里只排布工具条与可见性胶囊 */
    .inline-editor-tools, .detail-editor-tools {
      display: flex;
      align-items: center;
      gap: 6px;
      flex: 1 1 auto;
      min-width: 0;
    }
    .inline-editor-tools .tool.vis-btn, .detail-editor-tools .tool.vis-btn {
      flex: none;
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 0 8px;
      height: 26px;
      border: 1px solid var(--border);
      border-radius: 13px;
      font-size: 12px;
      color: var(--fg2);
      background: var(--card);
      cursor: pointer;
      transition: background .12s, border-color .12s;
    }
    @media (hover: hover) { .inline-editor-tools .tool.vis-btn:hover, .detail-editor-tools .tool.vis-btn:hover { background: var(--hover); border-color: var(--fg3); } }
    .inline-editor-tools .tool.vis-btn .vis-dot, .detail-editor-tools .tool.vis-btn .vis-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--fg3);
    }
    .inline-editor-tools .tool.vis-btn .vis-dot.prot, .detail-editor-tools .tool.vis-btn .vis-dot.prot { background: var(--info); }
    .inline-editor-tools .tool.vis-btn .vis-dot.pub, .detail-editor-tools .tool.vis-btn .vis-dot.pub { background: var(--primary); }
    .inline-editor-actions {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      flex: none;
      margin-left: auto;
    }
    .inline-btn-cancel {
      font-size: 13px;
      color: var(--fg2);
      padding: 5px 12px;
      border-radius: 6px;
      background: var(--muted);
      border: none;
      cursor: pointer;
      transition: background .15s, color .15s;
    }
    @media (hover: hover) { .inline-btn-cancel:hover {
      background: var(--muted-hover);
      color: var(--fg);
    } }
    .inline-btn-save {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-size: 13px;
      font-weight: 600;
      color: var(--on-primary);
      background: var(--primary);
      border: none;
      padding: 5px 14px;
      border-radius: 6px;
      cursor: pointer;
      transition: background .15s, opacity .15s;
    }
    @media (hover: hover) { .inline-btn-save:hover {
      background: var(--primary-deep);
    } }
    .inline-btn-save svg {
      width: 13px;
      height: 13px;
    }