:root {
  color-scheme: dark;
  --bg: #1c1c1e;
  --panel: #252529;
  --panel-raised: #2c2c2e;
  --panel-soft: #343438;
  --line: rgba(255,255,255,.11);
  --line-soft: rgba(255,255,255,.07);
  --text: #f2f2f7;
  --text-muted: #a1a1a7;
  --text-faint: #73737a;
  --accent: #ffd60a;
  --accent-ink: #292300;
  --danger: #e89b91;
  /* 购物清单的「红绿灯」语义色。**不能复用 --accent**：它在不同主题下是黄/蓝/红，
     拿来当"可以下手"的绿灯时，在石墨红主题里会变成红灯，语义直接反了。 */
  --buy-go: #30d158;
  --buy-wait: #ff9f0a;
  --note-font-size: 14px;
  --note-opacity: .7;
  /* 正文行距与段落间距由设置里的两个滑动条驱动。
     取值范围与 index.html 的 range 控件保持一致（行距 1.4–2.6、段距 0–30px）。 */
  --note-line-height: 1.85;
  --note-paragraph-gap: 10px;
  /* 表单底色/聚焦描边必须走变量：写死深色会在石墨红主题下变成黑块。 */
  --field-bg: #1c1c1e;
  --field-focus-border: #6b6b70;
  /* 目录栏与编辑区底色同样走变量，避免两处硬编码 #1c1c1e 在明亮模式下漏改。 */
  --list-bg: #1c1c1e;
  --editor-bg: #1c1c1e;
  --hover: #2c2c2e;
  --active: #3a3a3e;
  --control: #343438;
  --chip-bg: #27231d;
  --chip-line: #3b372f;
  --float-bg: rgba(44,44,46,.82);
  --shadow: rgba(0,0,0,.32);
  --lock-glow: #323238;
  --titlebar-height: 0px;
  /* 安全区。Android 端是 edge-to-edge（MainActivity 调了 enableEdgeToEdge），
     不补这几项状态栏会直接压在标题上、手势条会盖住底部导航。
     浏览器 / iOS 走 env()；Android 原生侧会把实测到的窗口 inset 以内联样式写在
     documentElement 上覆盖这四个变量（内联优先级高于本规则），
     因为 Android WebView 对 env(safe-area-inset-*) 的支持在不同系统版本上并不一致。 */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  /* 抽屉/浮层背后的压暗色。窄屏下抽屉与内容同为白底，没有这层就分不清边界。 */
  --scrim: rgba(0,0,0,.24);
  /* 窄屏底部导航条的高度，内容区靠它让位。 */
  --mobile-nav-height: 54px;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Noto Sans CJK SC", sans-serif;
  background: var(--bg);
  color: var(--text);
}

body.theme-stone-dark { color-scheme: dark; --bg: #202124; --panel: #242528; --panel-raised: #303136; --panel-soft: #3b3c41; --line: rgba(255,255,255,.12); --line-soft: rgba(255,255,255,.08); --text: #eeeeee; --text-muted: #babcc0; --text-faint: #7f8289; --accent: #38a7e0; --accent-ink: #082431; --danger: #e89b91; --field-bg: #1c1c1e; --field-focus-border: #6b6b70; --list-bg: #1c1c1e; --editor-bg: #1c1c1e; --hover: #2c2c30; --active: #3a3b40; --control: #3b3c41; --chip-bg: #1d2a31; --chip-line: #2c4652; --float-bg: rgba(36,37,40,.88); --shadow: rgba(0,0,0,.38); --lock-glow: #2c3338; }
body.theme-stone-light { color-scheme: light; --bg: #f7f7f6; --panel: #ffffff; --panel-raised: #f1f1ef; --panel-soft: #e7e7e4; --line: rgba(35,35,35,.14); --line-soft: rgba(35,35,35,.08); --text: #3a3a3a; --text-muted: #676767; --text-faint: #9b9b9b; --accent: #ee5d62; --accent-ink: #ffffff; --danger: #cf5449; --buy-go: #1f9d47; --buy-wait: #b8730a; --field-bg: #f1f1ef; --field-focus-border: #b9b9b4; --list-bg: #ffffff; --editor-bg: #ffffff; --hover: #eeeeeb; --active: #e8e8e5; --control: #e7e7e4; --chip-bg: #f4f1ea; --chip-line: #ded7c8; --float-bg: rgba(255,255,255,.88); --shadow: rgba(30,30,30,.12); --lock-glow: #ecece8; --scrim: rgba(0,0,0,.16); }
body.is-native-app { --titlebar-height: 0px; }
body.theme-stone-light .sidebar, body.theme-stone-light .modal-card { background: var(--panel); }
body.theme-stone-light .nav-item.active, body.theme-stone-light .note-item.active { background: var(--active); }
body.theme-stone-light .note-item:hover, body.theme-stone-light .folder-header:hover, body.theme-stone-light .quiet-button:hover, body.theme-stone-light .privacy-button:hover { background: var(--hover); }
body.theme-stone-light .floating-controls { background: var(--float-bg); }
body.theme-stone-light .heading-menu, body.theme-stone-light .note-context-menu, body.theme-stone-light .document-outline, body.theme-stone-light .wiki-suggest { background: var(--panel-raised); border-color: var(--line); box-shadow: 0 10px 28px var(--shadow); }
body.theme-stone-light .toolbar button:hover, body.theme-stone-light .toolbar button.is-active, body.theme-stone-light .heading-menu button:hover, body.theme-stone-light .note-context-menu button:hover { background: var(--panel-soft); }
/* 明亮模式下这些控件原本沿用暗色写死值，会在白底上出现深色块 / 低对比文字。 */
body.theme-stone-light .secondary-button { background: var(--panel); border-color: var(--line); }
body.theme-stone-light .secondary-button:hover { background: var(--hover); }
body.theme-stone-light .danger-button { border-color: color-mix(in srgb, var(--danger) 42%, transparent); }
body.theme-stone-light .quiet-chip { background: var(--chip-bg); border-color: var(--chip-line); }
body.theme-stone-light .toggle-row input { background: #d6d6d2; }
body.theme-stone-light .toggle-row input::after { background: #ffffff; }
body.theme-stone-light .toggle-row input:checked { background: color-mix(in srgb, var(--accent) 62%, #ffffff); }
body.theme-stone-light .toggle-row input:checked::after { background: #ffffff; }
body.theme-stone-light input[type="range"] { background: #dcdcd8; }
body.theme-stone-light input[type="range"]::-webkit-slider-thumb { border-color: #ffffff; }
body.theme-stone-light .note-context-menu, body.theme-stone-light .heading-menu { color: var(--text); }

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); }
/* 主题变量挂在 body 上，:root 的 color 会用根变量先算成暗色；
   body 不重新声明 color 的话，所有继承文字色在明亮模式下仍是浅色（白底看不见字）。 */
body { min-height: 100vh; overflow: hidden; color: var(--text); }
body.is-native-app .lock-screen, body.is-native-app .workspace, body.is-native-app .app-root { min-height: 100vh; }
body.is-native-app .app-shell { height: 100vh; }
button, input, select { font: inherit; }
button { cursor: pointer; }
.is-hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.muted { color: var(--text-muted); }
.small { font-size: 12px; }

.app-root, .workspace { min-height: 100vh; }
.workspace { position: relative; }
.lock-screen { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: radial-gradient(circle at 50% 0%, var(--lock-glow) 0, var(--bg) 46%); }
.lock-card { width: min(100%, 320px); text-align: center; }
.lock-card .stack-form { margin-top: 0; }
.lock-card .text-button { margin-top: 10px; font-size: 11px; }
.brand-button { display: inline-flex; align-items: center; border: 0; background: transparent; color: var(--text-muted); padding: 0; font-size: 13px; letter-spacing: .02em; cursor: default; user-select: none; }
.brand-wordmark { display: inline-block; color: var(--text-muted); letter-spacing: .02em; white-space: nowrap; }
.brand-wordmark-large { color: var(--text); font-size: 25px; font-weight: 600; letter-spacing: -.035em; margin-bottom: 23px; }
.eyebrow { color: var(--text-faint); font-size: 10px; letter-spacing: .18em; margin: 0 0 10px; }
h1, h2, p { margin-top: 0; }
h1 { font-size: 28px; letter-spacing: -.04em; margin-bottom: 10px; }
h2 { font-size: 22px; letter-spacing: -.04em; margin: 0; }
.lock-card .muted { line-height: 1.7; font-size: 14px; }
.stack-form { display: grid; gap: 12px; margin-top: 26px; text-align: left; }
.stack-form label, .settings-form label { display: grid; gap: 8px; color: var(--text-muted); font-size: 13px; }
/* 排除单选/复选：它们不能继承 width:100% + 输入框内边距，否则会渲染成大方块。 */
/* 笔记标题与搜索框是"无框"输入，必须排除在整块输入框样式之外：
   这条规则优先级(0-5-1)高于 .note-title / .search-box input，不排除就会覆盖成深色底块。 */
input:not([type="radio"]):not([type="checkbox"]):not([type="range"]):not(.note-title):not(.search-input), select { width: 100%; border: 1px solid var(--line); background: var(--field-bg); color: var(--text); border-radius: 10px; padding: 12px 13px; outline: none; transition: border-color .15s, background .15s; }
input:not([type="radio"]):not([type="checkbox"]):not([type="range"]):not(.note-title):not(.search-input):focus, select:focus { border-color: var(--field-focus-border); background: var(--field-bg); }
/* 正文编辑区不能写 background：底色由 .editor-panel 提供。
   之前这条和输入框写在同一个选择器里、硬编码 #1c1c1e，石墨红主题一聚焦就整块变黑。 */
.editor-content:focus { background: transparent; }
input::placeholder { color: var(--text-faint); }
input[type="radio"], input[type="checkbox"] { flex: 0 0 auto; width: auto; padding: 0; margin: 0; accent-color: var(--accent); }
/* 单选行必须压过 .stack-form label 的 display:grid，否则单选框会独占一行、文字掉到下一行。 */
.stack-form label.release-choice, .settings-form label.release-choice { display: flex; align-items: center; gap: 9px; }
.release-choice { color: var(--text-muted); font-size: 13px; }
.release-choice input { margin: 0; }
.primary-button, .secondary-button, .danger-button, .quiet-button, .privacy-button, .text-button { border: 0; border-radius: 9px; padding: 11px 15px; transition: transform .15s, background .15s, opacity .15s; }
.primary-button { background: var(--accent); color: var(--accent-ink); font-weight: 700; }
.primary-button:hover, .secondary-button:hover { transform: translateY(-1px); }
.secondary-button { background: var(--control); color: var(--accent); border: 1px solid var(--line); padding: 8px 11px; font-size: 12px; }
.quiet-button, .privacy-button { display: inline-flex; align-items: center; gap: 5px; background: transparent; color: var(--text-muted); padding: 6px 8px; }
.quiet-button .icon-slot, .privacy-button .icon-slot { width: 14px; height: 14px; }
.quiet-button:hover, .privacy-button:hover { color: var(--text); background: var(--hover); }
.text-button { background: transparent; color: var(--accent); margin-top: 18px; padding: 5px; }
.form-error { min-height: 17px; color: var(--danger); font-size: 12px; margin: 0; }
.security-caption { color: var(--text-faint); font-size: 11px; line-height: 1.6; margin: 20px 0 0; }

.topbar { display: none; }
.topbar-leading { display: flex; align-items: center; gap: 4px; height: 30px; }
.sidebar-toggle-button, .note-list-toggle-button { display: inline-grid; place-items: center; width: 30px; height: 30px; }
/* 统一图标：全部改用 24×24 / 1.75px 线宽的 SVG 图标，跟随 currentColor。 */
.ui-icon { display: block; flex: 0 0 auto; }
.icon-slot { display: inline-grid; place-items: center; width: 16px; height: 16px; color: inherit; }
.menu-icon-slot { display: inline-grid; place-items: center; width: 15px; height: 15px; color: inherit; opacity: .86; }
.brand-lockup { display: flex; align-items: center; gap: 9px; color: var(--text-muted); font-size: 13px; letter-spacing: .03em; }
.top-actions { display: flex; align-items: center; gap: 8px; }
.save-state { color: var(--text-faint); font-size: 11px; min-width: 50px; text-align: right; }
.save-state.is-saving { color: var(--accent); }
.save-state.is-error { color: var(--danger); }
.editor-top-meta { display: flex; align-items: center; gap: 10px; min-width: 0; }
.app-shell { --sidebar-width-base: 230px; --note-list-width-base: 320px; --sidebar-width: var(--sidebar-width-base); --note-list-width: var(--note-list-width-base); height: 100vh; min-width: 0; position: relative; display: grid; grid-template-columns: minmax(0, var(--sidebar-width)) minmax(0, var(--note-list-width)) minmax(0, 1fr); overflow: hidden; isolation: isolate; transition: grid-template-columns .2s ease; }
.sidebar, .note-list, .editor-panel { min-width: 0; }
.sidebar { overflow: hidden; border-right: 1px solid var(--line); background: var(--panel); display: flex; flex-direction: column; justify-content: flex-start; padding: 24px 14px 20px; transition: opacity .14s ease, padding .2s ease; }
.app-shell.sidebar-collapsed { --sidebar-width: 0px; }
.app-shell.note-list-collapsed { --note-list-width: 0px; }
.app-shell.sidebar-collapsed .sidebar, .app-shell.note-list-collapsed .note-list { visibility: hidden; opacity: 0; pointer-events: none; border: 0; }
.app-shell.sidebar-collapsed .sidebar { padding-left: 0; padding-right: 0; }
.app-shell.note-list-collapsed .note-list { overflow: hidden; }
.column-resizer { position: absolute; z-index: 12; top: 0; bottom: 0; width: 10px; margin-left: -5px; cursor: col-resize; touch-action: none; }
.column-resizer::after { content: ""; position: absolute; top: 0; bottom: 0; left: 4px; width: 2px; background: transparent; transition: background .15s; }
.column-resizer:hover::after, .is-resizing-columns .column-resizer::after { background: color-mix(in srgb, var(--accent) 55%, transparent); }
.sidebar-resizer { left: var(--sidebar-width); }
.note-list-resizer { left: calc(var(--sidebar-width) + var(--note-list-width)); }
.sidebar-collapsed .sidebar-resizer, .note-list-collapsed .note-list-resizer { display: none; }
body.is-resizing-columns, body.is-resizing-columns * { cursor: col-resize !important; user-select: none !important; }
.sidebar-inner { display: flex; flex-direction: column; min-height: 100%; gap: 8px; }
.sidebar-brand-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; padding: 2px 2px 8px; }
.sidebar-brand-cluster { display: flex; align-items: center; gap: 2px; min-width: 0; }
.sidebar-brand { width: max-content; border: 0; background: transparent; color: var(--text); padding: 2px 7px; font-size: 13px; font-weight: 700; letter-spacing: -.02em; cursor: default; }
.sidebar-theme-button { display: inline-grid; place-items: center; width: 24px; height: 24px; border: 0; border-radius: 6px; background: transparent; color: var(--text-muted); }
.sidebar-theme-button:hover { color: var(--accent); background: var(--hover); }
.sidebar-theme-button .icon-slot { width: 14px; height: 14px; }
.sidebar-home-button { flex: 0 0 auto; border: 0; border-radius: 6px; background: transparent; color: var(--text-muted); padding: 4px 7px; font-size: 11px; white-space: nowrap; }
.sidebar-home-button:hover { color: var(--accent); background: var(--hover); }
.space-heading { display: flex; align-items: center; justify-content: space-between; color: var(--text-faint); font-size: 10px; letter-spacing: .14em; padding: 0 10px 2px; }
.space-add { display: inline-grid; place-items: center; width: 22px; height: 22px; border: 0; border-radius: 5px; background: transparent; color: var(--text-muted); }
.space-add:hover { color: var(--accent); background: var(--panel-soft); }
.space-items { display: grid; gap: 3px; }
.space-dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent); }
.nav-item { display: flex; align-items: center; gap: 9px; width: 100%; border: 1px solid transparent; color: var(--text-muted); background: transparent; text-align: left; border-radius: 9px; padding: 10px; font-size: 13px; }
.nav-item.active { background: var(--active); color: var(--text); border-color: transparent; }
.nav-icon { display: inline-grid; place-items: center; flex: 0 0 auto; width: 16px; height: 16px; color: var(--text-faint); }
.nav-item.active .nav-icon { color: var(--text-muted); }
.nav-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.nav-dot-muted { background: var(--text-faint); box-shadow: 0 0 0 3px color-mix(in srgb, var(--text-faint) 18%, transparent); }
.nav-count { margin-left: auto; color: var(--text-faint); font-size: 11px; }
/* 回收站上锁时在计数前显示一把小锁，否则用户点进去才知道要密码。 */
.nav-lock { display: inline-grid; place-items: center; margin-left: auto; color: var(--accent); opacity: .85; }
.nav-lock + .nav-count { margin-left: 6px; }
.sidebar-calendar { margin-top: auto; padding: 10px 9px 8px; border: 1px solid var(--line-soft); border-radius: 13px; background: color-mix(in srgb, var(--panel-raised) 72%, transparent); box-shadow: inset 0 1px rgba(255,255,255,.035); backdrop-filter: blur(12px); }
.calendar-head { display: grid; grid-template-columns: 22px 1fr 22px; align-items: center; gap: 3px; }
.calendar-month { color: var(--text); font-size: 11px; font-weight: 700; text-align: center; letter-spacing: .01em; }
.calendar-nav { width: 22px; height: 20px; border: 0; border-radius: 6px; background: transparent; color: var(--text-muted); font-size: 17px; line-height: 1; }
.calendar-nav:hover { color: var(--accent); background: var(--panel-soft); }
.calendar-scope { width: 100%; height: 25px; margin: 6px 0 7px; border: 0; border-radius: 6px; background: transparent; color: var(--text-muted); padding: 2px 4px; font-size: 10px; }
.calendar-scope:hover, .calendar-scope:focus { background: var(--panel-soft); }
.calendar-weekdays, .calendar-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; text-align: center; }
.calendar-weekdays { margin-bottom: 3px; color: var(--text-faint); font-size: 9px; font-weight: 650; }
.calendar-day { display: grid; place-items: center; width: 100%; aspect-ratio: 1; min-height: 19px; border: 0; border-radius: 50%; background: transparent; color: var(--text-muted); font-size: 10px; font-weight: 600; }
.calendar-day:not(.calendar-day-empty):hover { color: var(--text); background: var(--panel-soft); }
.calendar-day.has-notes { color: var(--accent); }
.calendar-day.has-notes::after { content: ""; position: absolute; width: 3px; height: 3px; border-radius: 50%; background: currentColor; transform: translateY(7px); }
.calendar-day { position: relative; }
.calendar-day.is-today { color: var(--text); border: 1px solid color-mix(in srgb, var(--accent) 70%, transparent); }
.calendar-day.is-selected { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }
.calendar-day.is-selected::after { background: var(--accent-ink); }
.calendar-popover { position: absolute; z-index: 60; left: 13px; bottom: 58px; width: 224px; margin: 0; border-color: var(--line); background: color-mix(in srgb, var(--panel-raised) 92%, transparent); box-shadow: 0 16px 42px rgba(0,0,0,.3); }

.note-list { border-right: 1px solid var(--line); background: var(--list-bg); overflow: auto; transition: opacity .14s ease; }
.list-heading { display: flex; align-items: flex-end; justify-content: space-between; padding: 25px 20px 16px; }
.list-heading h2 { color: var(--text); font-size: var(--note-font-size); font-weight: 650; line-height: 1.5; opacity: var(--note-opacity); }
.list-actions { display: flex; align-items: center; gap: 7px; }
.small-action { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--line); border-radius: 8px; background: transparent; color: var(--text-muted); padding: 6px 9px; font-size: 10px; }
.small-action .icon-slot { width: 14px; height: 14px; }
.small-action:hover { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: var(--panel-soft); }
.round-button { display: inline-grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 50%; background: transparent; color: var(--text-muted); transition: background .15s, color .15s; }
.round-button:hover, .round-button:focus-visible { background: var(--panel-soft); color: var(--accent); outline: none; }
/* 搜索不要方框：放大镜与输入文字同色，下方一条分割线收口。 */
.search-box { display: flex !important; align-items: center; gap: 8px !important; margin: 0 16px 12px; padding: 0 2px 8px; border: 0; border-bottom: 1px solid var(--line-soft); border-radius: 0; background: transparent; color: var(--text-muted); transition: border-color .15s, color .15s; }
.search-box:focus-within { border-bottom-color: var(--line); color: var(--text); }
.search-icon { display: inline-grid; place-items: center; flex: 0 0 auto; width: 16px; height: 16px; color: inherit; opacity: .85; }
.search-box input { width: 100%; border: 0; padding: 0; background: transparent; color: inherit; font-size: 12px; outline: none; }
.search-box input::placeholder { color: var(--text-faint); }
.search-box input::-webkit-search-cancel-button { -webkit-appearance: none; }
.list-options { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 16px 12px; color: var(--text-faint); font-size: 10px; }
.list-options select { width: auto; min-width: 96px; border: 0; background: transparent; padding: 3px 0; color: var(--text-muted); font-size: 10px; }
.note-items { padding: 0 9px 20px; }
.folder-section { margin-bottom: 7px; }
.folder-header-row { display: flex; align-items: center; gap: 3px; }
.folder-header { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; position: relative; border: 0; border-radius: 7px; background: transparent; color: var(--text-muted); padding: 8px 24px 7px 9px; text-align: left; }
.folder-header:hover { background: var(--hover); color: var(--text); }
.folder-chevron { display: inline-grid; place-items: center; flex: 0 0 14px; width: 14px; height: 14px; color: var(--accent); }
.folder-chevron .ui-icon { transition: transform .15s ease; }
.folder-header[aria-expanded="true"] .folder-chevron .ui-icon { transform: rotate(90deg); }
.folder-name { flex: 1; min-width: 0; overflow: hidden; font-size: 11px; line-height: 1.2; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.folder-count { color: var(--text-faint); font-size: 10px; line-height: 1.2; }
.folder-add { display: inline-grid; place-items: center; flex: 0 0 auto; width: 24px; height: 24px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--text-faint); }
.folder-add:hover { border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: var(--panel-soft); color: var(--accent); }
.folder-rename-input { flex: 1; min-width: 0; width: auto; border: 1px solid var(--line); border-radius: 6px; background: var(--panel-raised); color: var(--text); padding: 3px 6px; font-size: 11px; }
.folder-notes { padding-left: 5px; }
.folder-section.is-collapsed .folder-notes { display: none; }
.folder-inline-draft { padding: 2px 5px 6px; }
.folder-inline-draft input { border-radius: 7px; padding: 7px 9px; font-size: 11px; background: var(--panel-raised); }
.folder-inline-draft input[aria-invalid="true"] { border-color: var(--danger); }
.note-item { position: relative; display: block; width: 100%; border: 1px solid transparent; border-radius: 10px; padding: 12px 26px 12px 11px; background: transparent; text-align: left; color: var(--text); margin-bottom: 3px; }
.note-item:hover { background: var(--hover); }
.note-item.active { background: var(--active); border-color: transparent; }
.note-item-title { display: block; font-size: var(--note-font-size); font-weight: 650; opacity: var(--note-opacity); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 5px; }
.note-pin { display: inline-flex; align-items: center; gap: 3px; margin: -1px 0 4px; border-radius: 4px; color: var(--accent); font-size: 9px; font-weight: 650; letter-spacing: .03em; }
.note-item-preview { display: block; color: var(--text-muted); font-size: var(--note-font-size); opacity: calc(var(--note-opacity) * .9); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.45; }
.note-item-time { display: block; color: var(--text-faint); font-size: 10px; margin-top: 8px; }

/* 回收站批量操作栏 */
.batch-bar { display: flex; align-items: center; gap: 8px; margin: 0 9px 8px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-raised); }
.batch-all { display: inline-flex; align-items: center; gap: 6px; color: var(--text-muted); font-size: 11px; white-space: nowrap; cursor: pointer; }
.batch-all input { appearance: none; flex: 0 0 auto; width: 15px; height: 15px; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: 4px; background: transparent; position: relative; cursor: pointer; }
.batch-all input:checked { border-color: var(--accent); background: var(--accent); }
.batch-all input:checked::after { content: ""; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px; border: solid var(--accent-ink); border-width: 0 1.6px 1.6px 0; transform: rotate(45deg); }
.batch-all input:indeterminate { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 30%, transparent); }
/* 部分选中用一道横杠表示，跟"全部选中"的对勾区分开。 */
.batch-all input:indeterminate::after { content: ""; position: absolute; left: 3.5px; top: 6.2px; width: 6px; height: 1.8px; border-radius: 2px; background: var(--accent); }
.batch-count { flex: 1; min-width: 0; color: var(--text-faint); font-size: 10px; text-align: right; }
.batch-actions { display: flex; align-items: center; gap: 5px; }
.batch-actions .danger-button { padding: 6px 9px; font-size: 10px; }
.batch-actions .quiet-button { padding: 6px 7px; font-size: 10px; }
.batch-actions .danger-button:disabled, .batch-actions .quiet-button:disabled { opacity: .45; cursor: not-allowed; }
/* 回收站列表项左侧的选择框 */
.note-select { position: absolute; left: 9px; top: 13px; display: grid; place-items: center; width: 15px; height: 15px; border: 1px solid var(--line); border-radius: 4px; background: transparent; color: transparent; }
.note-select svg { width: 11px; height: 11px; }
.note-select.is-checked { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); }
.note-item.is-selectable { padding-left: 33px; }
.note-item.is-selected { border-color: color-mix(in srgb, var(--accent) 40%, transparent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.note-item.is-selectable .drag-handle { display: none; }
.empty-state { padding: 28px 20px; color: var(--text-faint); font-size: 12px; line-height: 1.6; }
.sidebar-scrim { display: none; }

/* 拖动排序：桌面端悬停显示抓取手柄、整行可拖；触屏端手柄常显。 */
.space-item { position: relative; padding-right: 26px; }
.drag-handle { position: absolute; top: 50%; right: 3px; display: none; place-items: center; width: 20px; height: 24px; transform: translateY(-50%); color: var(--text-faint); opacity: .58; cursor: grab; touch-action: none; }
@media (hover: hover) and (pointer: fine) {
  .note-item:hover .drag-handle, .space-item:hover .drag-handle, .folder-header:hover .drag-handle { display: inline-grid; }
}
@media (pointer: coarse) {
  .drag-handle { display: inline-grid; opacity: .5; }
}
.is-reorder-source { opacity: .42; }
.reorder-indicator { position: fixed; z-index: 90; height: 2px; border-radius: 2px; background: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); transform: translateY(-1px); pointer-events: none; }
body.is-reordering, body.is-reordering * { cursor: grabbing !important; user-select: none !important; }
.context-hint { margin: 2px 6px 4px; color: var(--text-faint); font-size: 10px; line-height: 1.5; }
.floating-controls { position: absolute; z-index: 30; left: 14px; bottom: 14px; display: flex; align-items: center; gap: 3px; padding: 3px; border: 1px solid var(--line); border-radius: 10px; background: var(--float-bg); backdrop-filter: blur(10px); box-shadow: 0 8px 28px var(--shadow); }
.floating-settings-button { display: grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 7px; background: transparent; color: var(--text-muted); font-size: 17px; line-height: 1; }
.floating-settings-button:hover, .floating-settings-button:focus-visible { background: var(--panel-soft); color: var(--text); outline: none; }
.note-context-menu { position: fixed; z-index: 80; width: 218px; max-height: min(70vh, 420px); overflow-y: auto; padding: 5px; border: 1px solid var(--line); border-radius: 11px; background: var(--panel-raised); box-shadow: 0 14px 40px var(--shadow); backdrop-filter: blur(18px); }
.note-context-menu button { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 34px; border: 0; border-radius: 6px; background: transparent; color: var(--text-muted); text-align: left; padding: 7px 10px; font-size: 12px; }
.menu-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 编辑区右键菜单右侧的快捷键提示（⌘X / ⌘C / …）。不参与点击，只做提示。 */
.menu-shortcut { flex: 0 0 auto; color: var(--text-faint); font-size: 10px; letter-spacing: .06em; pointer-events: none; }
.note-context-menu button:disabled { opacity: .42; cursor: not-allowed; }
.note-context-menu button:hover, .note-context-menu button:focus-visible { background: var(--panel-soft); color: var(--text); outline: none; }
.note-context-menu button.danger { color: var(--danger); }
.context-divider { height: 1px; margin: 4px 5px; background: var(--line); }
.context-submenu { margin: 0 0 4px 10px; padding-left: 5px; border-left: 1px solid var(--line); }

/* position:relative 是段落拖动把手的定位上下文 —— 把手是面板的绝对定位子元素。
   放在面板上而不是 #editor-body 里，是因为 #editor-body 是滚动容器，overflow 会把它裁掉。 */
.editor-panel { display: flex; flex-direction: column; position: relative; overflow: hidden; background: var(--editor-bg); padding: 20px clamp(22px, 6vw, 96px) 16px; }
.editor-topline { min-width: 0; height: 24px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.editor-top-actions { min-width: 0; display: flex; align-items: center; gap: 8px; }
.editor-icon-button { display: inline-grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 7px; background: transparent; color: var(--text-muted); }
.editor-icon-button:hover, .editor-icon-button.is-active { background: var(--panel-soft); color: var(--accent); }
.editor-delete-button { color: var(--danger); }
.editor-delete-button:hover { color: var(--danger); background: color-mix(in srgb, var(--danger) 14%, transparent); }
.editor-icon-button .icon-slot { width: 16px; height: 16px; }
.note-timestamps { min-width: 0; color: var(--text-faint); font-size: 10px; letter-spacing: .01em; opacity: .72; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.folder-picker select { width: auto; max-width: 140px; border: 1px solid transparent; background: transparent; color: var(--text-faint); padding: 5px 7px; font-size: 10px; }
.folder-picker select:hover, .folder-picker select:focus { border-color: var(--line); color: var(--text-muted); }
.privacy-button { border: 1px solid transparent; font-size: 11px; }
.privacy-button.is-active { color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.directory-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: var(--text-muted); }
.directory-empty-card { display: flex; flex-direction: column; align-items: center; }
.desktop-empty-action { display: none; }
.directory-empty .directory-symbol { display: grid; place-items: center; width: 50px; height: 50px; border: 1px solid var(--line); border-radius: 16px; color: var(--accent); font-size: 24px; margin-bottom: 18px; }
.directory-empty h2 { color: var(--text); font-size: 20px; margin-bottom: 8px; }
.directory-empty p:last-of-type { max-width: 260px; font-size: 12px; line-height: 1.7; }
.editor-panel.directory-mode > :not(.directory-empty) { display: none; }
.editor-panel:not(.directory-mode) .directory-empty { display: none; }
/* 标题不要方框，只用一条分割线与正文隔开。 */
/* 文章标题：只比正文大两个号（+4px），刻意不做 Notion 那种大标题。
   标题与各级小标题共用同一套「+Npx」阶梯，字号随设置里的正文字号一起缩放：
     标题 +4 ／ h1 +2 ／ h2 +1 ／ h3 +0（= 正文）。 */
.note-title { width: 100%; border: 0; border-bottom: 1px solid var(--line-soft); border-radius: 0; background: transparent; padding: 14px 0 11px; margin-bottom: 4px; color: var(--text); font-size: calc(var(--note-font-size) + 4px); line-height: var(--note-line-height); font-weight: 650; letter-spacing: -.01em; opacity: var(--note-opacity); outline: none; transition: opacity .2s, font-size .15s, border-color .15s; }
.note-title:focus { border-bottom-color: var(--line); background: transparent; }
.note-title::placeholder { color: var(--text-faint); }
/* 工具栏不要椭圆底框：保持一条轻量的图标行，弱化到不抢编辑区注意力。 */
.toolbar { position: relative; z-index: 5; display: flex; align-items: center; gap: 1px; align-self: flex-start; max-width: 100%; min-height: 32px; margin: 6px 0 5px; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; overflow: visible; }
.toolbar button { border: 0; background: transparent; color: var(--text-faint); min-width: 28px; height: 28px; border-radius: 7px; padding: 0 5px; font-size: 13px; line-height: 1; transition: background .15s, color .15s; }
.toolbar button:hover, .toolbar button.is-active { background: var(--panel-soft); color: var(--text); }
.heading-menu-wrap { position: relative; }
.heading-menu { position: absolute; z-index: 100; top: 32px; left: 0; width: 162px; padding: 5px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-raised); box-shadow: 0 14px 34px var(--shadow); }
.heading-menu button { display: flex; align-items: center; gap: 8px; width: 100%; height: 28px; padding: 0 8px; border-radius: 6px; text-align: left; font-size: 11px; }
.heading-menu button span { width: 20px; color: var(--accent); font-weight: 700; }
.toolbar-divider { width: 1px; height: 15px; background: var(--line); margin: 0 3px; }
/* 右栏唯一的滚动容器：物品字段区 + 正文一起滚，避免出现两个滚动条。
   用 flex: 1 0 auto 让正文「短的时候撑满、长的时候不被压缩」——压缩会让内容溢出、
   溢出区不计入父级 scrollHeight，滚动就会出现"滚不到底"的怪现象。 */
.editor-body { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; }
.editor-body > .editor-content { flex: 1 0 auto; min-height: 160px; overflow: visible; }
/* 安卓 Apple 外壳把正文搬进了自己的 .ios-scroll，这个共用壳必须整个消失，
   否则会多出一个空的 flex 子项、把布局顶偏。用 display:contents 拆掉盒子，
   里面只剩一个恒为 is-hidden 的 #buy-panel，不产生任何影响（也不用动 DOM）。 */
body.is-android-app #editor-body { display: contents; }
.editor-content { flex: 1; min-height: 100px; overflow: auto; padding: 18px 2px; color: var(--text); font-size: var(--note-font-size); line-height: var(--note-line-height); opacity: var(--note-opacity); outline: none; transition: opacity .2s, filter .2s, font-size .15s; }
.editor-content:empty::before { content: attr(data-placeholder); color: var(--text-faint); pointer-events: none; }
/* 段落间距走变量（设置里的「段落间距」滑动条）。这里必须同时覆盖 <p> 与裸 <div>：
   WebKit 在裸文本上按回车生成的是 <div>，两者间距不一致就会出现"有的段落挤在一起"。 */
.editor-content p { margin: 0 0 var(--note-paragraph-gap); }
.editor-content > div { margin: 0 0 var(--note-paragraph-gap); }
.editor-content h1, .editor-content h2, .editor-content h3 { margin: 1.15em 0 .55em; color: inherit; font-weight: 700; line-height: 1.55; }
.editor-content h1 { font-size: calc(var(--note-font-size) + 2px); }
.editor-content h2 { font-size: calc(var(--note-font-size) + 1px); }
.editor-content h3 { font-size: var(--note-font-size); }
.todo-line { display: flex; align-items: flex-start; gap: 7px; width: 100%; margin: 0 0 calc(var(--note-paragraph-gap) - 1px); min-height: calc(1em * var(--note-line-height)); }
/* 复选框的勾必须用 CSS 画，不能再用 ☑/☐ 字形。
   字形本身就是个方框，叠在 span 自己的边框里就是"框中框"（勾选后两层框套在一起）。
   现在 span 只负责画外框，::after 画一根旋转 45° 的 L 形描边当勾，
   未勾选时透明隐藏。序列化仍读 aria-checked，与视觉完全解耦。 */
.todo-checkbox { position: relative; display: inline-block; flex: 0 0 auto; width: 1.05em; height: 1.05em; margin-top: .39em; border: 1px solid var(--text-faint); border-radius: 3px; cursor: pointer; user-select: none; }
.todo-checkbox::after { content: ""; position: absolute; left: 50%; top: 50%; width: .5em; height: .26em; border-left: 1.6px solid var(--text-muted); border-bottom: 1.6px solid var(--text-muted); opacity: 0; transform: translate(-50%, -62%) rotate(-45deg); }
.todo-checkbox[aria-checked="true"] { border-color: var(--text-muted); background: transparent; }
.todo-checkbox[aria-checked="true"]::after { opacity: 1; }
.todo-text { display: block; flex: 1; min-width: 1em; min-height: calc(1em * var(--note-line-height)); outline: none; }
.todo-line:has(.todo-checkbox[aria-checked="true"]) .todo-text { color: var(--text-faint); text-decoration: line-through; text-decoration-thickness: 1px; }
.editor-content blockquote { margin: 14px 0; border-left: 2px solid var(--accent); padding: 2px 0 2px 16px; color: var(--text-muted); }
/* 粘贴 Markdown 会带进代码块、行内代码和外链，样式跟着主题走变量。 */
.editor-content pre { margin: 14px 0; padding: 12px 14px; background: var(--panel-raised); border: 1px solid var(--line-soft); border-radius: 8px; overflow-x: auto; white-space: pre; }
.editor-content code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .92em; background: var(--panel-soft); border-radius: 4px; padding: 1px 5px; }
.editor-content pre code { background: none; padding: 0; border-radius: 0; }
.editor-content a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.editor-content s { opacity: .72; }
.editor-content ul, .editor-content ol { padding-left: 26px; }
.editor-content li { padding-left: 4px; }
.editor-content ul.todo-list { list-style: none; padding-left: 0; margin: 0; }
.editor-content ul.todo-list > li { list-style: none; padding-left: 0; }
.editor-content ul.todo-list > li::marker { content: ""; }
.editor-content ul.todo-list ul.todo-list { margin-top: 2px; padding-left: 24px; }
.editor-content hr { border: 0; border-top: 1px solid currentColor; opacity: .38; margin: 1.3em 0; }
.fold-block { margin: 12px 0; padding: 0; border: 0; border-radius: 0; background: transparent; }
.fold-block summary { color: var(--text-muted); cursor: pointer; font-size: .92em; outline: none; }
.fold-block > div { min-height: 1.85em; padding: 8px 0 0 16px; }

/* ── 段落拖动把手（Notion 式）──────────────────────────────────────────
   把手跟着光标走的那个块，平时藏在正文左边的留白里，不占正文宽度。 */
.block-handle { position: absolute; top: 0; left: 2px; z-index: 14; display: none; place-items: center; width: 18px; height: 24px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--text-faint); opacity: .5; cursor: grab; touch-action: none; }
.block-handle.is-visible { display: inline-grid; }
.block-handle:hover { background: var(--panel-soft); color: var(--text-muted); opacity: 1; }
.block-handle.is-dragging { opacity: 1; color: var(--accent); }
.block-handle .icon-slot { width: 15px; height: 15px; }
/* 安卓 Apple 外壳不做段落拖动（列表与编辑器都不是这套结构） */
body.is-android-app .block-handle { display: none !important; }

/* ── 代码块的「复制」按钮 ──────────────────────────────────────────────
   和段落把手同一套路子：面板上的绝对定位浮动元素，不侵入正文。
   （塞进 <pre> 会被 htmlToMarkdown 当正文文本带走。）坐标由 JS 按代码块位置算。 */
.code-copy { position: absolute; top: 0; left: 0; z-index: 15; display: none; padding: 3px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel-raised); color: var(--text-muted); font-size: 11px; line-height: 1.5; }
.code-copy.is-visible { display: block; }
.code-copy:hover { color: var(--text); border-color: var(--line-strong, var(--line)); }
/* 触屏没有 hover，这个按钮永远不会出现，直接不参与布局。 */
body.is-android-app .code-copy { display: none !important; }
/* 分栏按钮同理：安卓端没有拖动把手、也没有分栏的交互，留一个点不动的按钮只会让人困惑。 */
body.is-android-app .columns-menu-wrap { display: none !important; }
/* 0.10.5 起分栏入口收进了「插入」菜单（图片 / 折叠 / 分栏）。安卓端保留「图片」「折叠」，
   只把两个分栏项藏掉 —— 分栏依赖桌面端的段落拖动把手，在安卓上没法操作。 */
body.is-android-app #insert-menu [data-columns] { display: none !important; }

/* ── 分栏 ──────────────────────────────────────────────────────────────
   列宽走 data-columns，窄屏一律塌成一列（不然三栏在手机上每栏只剩 90px）。 */
.editor-content .note-columns { display: grid; grid-template-columns: repeat(var(--note-columns, 2), minmax(0, 1fr)); gap: 4px 22px; margin: 0 0 var(--note-paragraph-gap); }
.editor-content .note-columns[data-columns="2"] { --note-columns: 2; }
.editor-content .note-columns[data-columns="3"] { --note-columns: 3; }
.editor-content .note-columns > .note-col { min-width: 0; }
.editor-content .note-columns > .note-col > *:last-child { margin-bottom: 0; }
/* 分栏里只有空段落时给个极淡的提示，否则看不出这里还能打字 */
.editor-content .note-columns > .note-col > p:only-child:not(:has(*)):not(:empty) { color: var(--text-faint); }
@media (max-width: 760px) {
  .editor-content .note-columns { grid-template-columns: minmax(0, 1fr); }
}
.editor-footer { display: flex; justify-content: space-between; gap: 12px; color: var(--text-faint); font-size: 10px; padding-top: 12px; }
.editor-hint { opacity: .75; }

/* 双链笔记：[[标题]] 在正文里渲染成一条带下划线的链接。 */
/* 双链是"药丸"：contenteditable=false 让它成为不可拆分的原子内联元素。
   WebKit 会顺着前面的内联元素继续输入（后续文字、回车换行都会被染成链接色），
   只有把药丸设成不可编辑才能彻底断掉这条继承链。 */
.wiki-link { display: inline; color: var(--accent); border-bottom: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); border-radius: 3px; cursor: pointer; white-space: nowrap; }
.wiki-link:hover { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.wiki-suggest { position: fixed; z-index: 70; width: min(260px, calc(100vw - 24px)); max-height: 190px; overflow-y: auto; padding: 5px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-raised); box-shadow: 0 14px 34px var(--shadow); }
.wiki-suggest-item { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 28px; padding: 0 8px; border: 0; border-radius: 6px; background: transparent; color: var(--text-muted); font-size: 12px; text-align: left; }
.wiki-suggest-item.is-active, .wiki-suggest-item:hover { background: var(--panel-soft); color: var(--text); }
.wiki-suggest-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wiki-suggest-tag { flex: 0 0 auto; color: var(--accent); font-size: 9px; letter-spacing: .04em; }
.backlink-panel { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.backlink-heading { margin: 0 0 8px; color: var(--text-faint); font-size: 10px; letter-spacing: .18em; }
.backlink-items { display: flex; flex-wrap: wrap; gap: 6px; }
.backlink-item { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; padding: 5px 10px; border: 1px solid var(--line); border-radius: 8px; background: transparent; color: var(--text-muted); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.backlink-item:hover { border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: var(--panel-soft); color: var(--text); }
.backlink-item .backlink-label { overflow: hidden; text-overflow: ellipsis; }
.backlink-space { flex: 0 0 auto; color: var(--text-faint); font-size: 9px; letter-spacing: .04em; }
/* 反链/双链的跳转提示条 */
.backlink-locked { color: var(--text-faint); font-size: 10px; line-height: 1.6; }
.privacy-mode .editor-content, .privacy-mode .note-title { text-shadow: 0 0 1px color-mix(in srgb, var(--text) 18%, transparent); }
.window-blurred .privacy-sensitive { filter: blur(6px); opacity: .08 !important; }
.manual-blur .privacy-sensitive { filter: blur(7px); opacity: .07 !important; }

.modal-backdrop { position: fixed; z-index: 30; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(0,0,0,.72); backdrop-filter: blur(10px); overflow: auto; }
.modal-card { width: min(100%, 480px); max-height: calc(100vh - 40px); overflow: auto; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); box-shadow: 0 24px 80px var(--shadow); padding: 22px; }
.setup-card { width: min(100%, 450px); }
.modal-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.modal-heading h2 { font-size: 24px; }
.modal-intro { font-size: 13px; line-height: 1.7; margin: 15px 0 2px; }
/* 应用内对话框：macOS 原生 confirm 在 Tauri 里不可用，所有确认走这里。
   它可能叠加在「删除空间」等其它 modal-backdrop 之上，必须比普通弹窗更高，
   否则下层弹窗的控件会拦截点击，出现「确认框点了没反应」。 */
#app-dialog { z-index: 120; }
.dialog-card { width: min(100%, 452px); display: grid; }
.dialog-card h2 { font-size: 20px; margin: 0; }
.dialog-card .eyebrow { margin: 0 0 9px; }
#app-dialog-message { font-size: 13px; line-height: 1.75; margin: 13px 0 0; }
.dialog-field { display: grid; gap: 8px; margin-top: 17px; color: var(--text-muted); font-size: 13px; }
.dialog-inputs { display: grid; gap: 12px; margin-top: 17px; }
.dialog-inputs:empty { display: none; }
.dialog-inputs label { display: grid; gap: 7px; color: var(--text-muted); font-size: 13px; }
.dialog-note { margin: 8px 0 0; color: var(--text-faint); font-size: 11.5px; line-height: 1.6; }
.dialog-choices { display: grid; gap: 8px; margin-top: 17px; }
.dialog-choice { display: flex; align-items: flex-start; gap: 10px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 10px; color: var(--text-muted); font-size: 13px; cursor: pointer; transition: background .15s, border-color .15s; }
.dialog-choice:hover { background: var(--panel-soft); }
.dialog-choice input { flex: 0 0 auto; margin: 2px 0 0; accent-color: var(--accent); }
.dialog-choice-text { display: grid; gap: 3px; min-width: 0; }
.dialog-choice-text strong { color: var(--text); font-size: 13px; font-weight: 600; }
.dialog-choice-hint { color: var(--text-faint); font-size: 11.5px; line-height: 1.55; }
.dialog-choice:has(input:checked) { border-color: color-mix(in srgb, var(--accent) 58%, transparent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.dialog-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }
.dialog-actions .primary-button, .dialog-actions .danger-button, .dialog-actions .secondary-button { padding: 11px 16px; font-size: 12.5px; }
#app-dialog-error { margin: 14px 0 0; }
#app-dialog-error:empty { display: none; }

/* 跨空间拖动：悬停在左侧空间条目上时的落点提示。 */
.space-item.is-drop-target { background: color-mix(in srgb, var(--accent) 20%, transparent); outline: 1px solid color-mix(in srgb, var(--accent) 62%, transparent); color: var(--text); }
.space-item[data-drop-hint]::after { content: attr(data-drop-hint); margin-left: auto; color: var(--accent); font-size: 10px; line-height: 1.2; white-space: nowrap; }
.quiet-chip { border: 1px solid var(--chip-line); color: var(--accent); background: var(--chip-bg); border-radius: 99px; padding: 5px 8px; font-size: 10px; white-space: nowrap; }
.form-rule, .settings-divider { height: 1px; background: var(--line); margin: 5px 0; }
.advanced-settings { border-top: 1px solid var(--line); padding-top: 12px; margin-top: 2px; }
.advanced-settings summary { color: var(--text-muted); cursor: pointer; font-size: 12px; margin-bottom: 12px; }
.advanced-settings[open] { display: grid; gap: 12px; }
.advanced-settings[open] summary { margin-bottom: 0; }
.settings-card { width: min(100%, 520px); }
.settings-form { display: grid; gap: 14px; margin-top: 18px; }
.settings-form label > span:first-child, .sync-heading span { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.settings-form strong { color: var(--text); font-size: 12px; font-weight: 650; }
.settings-form small { color: var(--text-faint); font-size: 10px; line-height: 1.5; }
.theme-row { align-items: center; }
.theme-switch { display: flex; gap: 3px; padding: 3px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel-raised); }
.theme-switch button { display: grid; place-items: center; width: 28px; height: 26px; border: 0; border-radius: 6px; background: transparent; color: var(--text-muted); }
.theme-switch button.is-active { color: var(--accent); background: var(--panel-soft); }
.toggle-row, .select-row { display: flex !important; align-items: center; justify-content: space-between; gap: 18px; }
.toggle-row > span, .select-row > span { display: grid; gap: 4px; }
.toggle-row input { appearance: none; width: 40px; height: 23px; padding: 0; border-radius: 99px; background: var(--control); border: 0; position: relative; flex: 0 0 auto; cursor: pointer; }
.toggle-row input::after { content: ""; position: absolute; left: 3px; top: 3px; width: 17px; height: 17px; border-radius: 50%; background: var(--text-muted); transition: transform .15s, background .15s; }
.toggle-row input:checked { background: color-mix(in srgb, var(--accent) 55%, var(--control)); }
.toggle-row input:checked::after { transform: translateX(17px); background: var(--accent-ink); }
.range-row { gap: 9px !important; }
.range-row output { color: var(--accent); font-size: 11px; }
input[type="range"] { appearance: none; height: 3px; border: 0; padding: 0; border-radius: 4px; background: var(--control); }
input[type="range"]::-webkit-slider-thumb { appearance: none; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--bg); background: var(--accent); }
input[type="range"]:disabled { opacity: .45; cursor: not-allowed; }
.sync-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.sync-heading > div { display: grid; gap: 4px; }
.settings-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 3px; }
.location-picker-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.location-picker-row p { margin: 0; min-width: 0; overflow-wrap: anywhere; white-space: pre-line; line-height: 1.55; }
.location-picker-row .secondary-button { flex: 0 0 auto; }
.settings-inline-actions { display: flex; align-items: center; gap: 7px; flex: 0 0 auto; }
.settings-inline-actions .secondary-button { padding: 8px 11px; font-size: 11px; }
.settings-location-row { border-top: 1px solid var(--line); padding-top: 12px; }
.editor-top-actions { display: flex; align-items: center; gap: 9px; }
.editor-top-actions .quiet-button { padding: 6px 8px; font-size: 11px; }
.editor-content[contenteditable="false"] { cursor: default; }
.danger-button { background: transparent; border: 1px solid color-mix(in srgb, var(--danger) 42%, transparent); color: var(--danger); font-size: 11px; padding: 10px 12px; }
.icon-button { display: inline-grid; place-items: center; flex: 0 0 30px; border: 0; background: transparent; color: var(--text-muted); width: 30px; height: 30px; border-radius: 8px; font-size: 20px; line-height: 1; padding: 0; }
.icon-button:hover { color: var(--text); background: var(--panel-soft); }
.screen-cover { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; background: var(--bg); color: var(--text-faint); }
.cover-mark { font-family: Georgia, serif; font-size: 15px; letter-spacing: .08em; opacity: .5; }
.mobile-only { display: none; }

.sidebar, .note-list, .editor-content, .modal-card, .editor-body { scrollbar-width: thin; scrollbar-color: rgba(128,128,128,.18) transparent; }
.sidebar::-webkit-scrollbar, .note-list::-webkit-scrollbar, .editor-content::-webkit-scrollbar, .modal-card::-webkit-scrollbar, .editor-body::-webkit-scrollbar { width: 3px; height: 3px; }
.sidebar::-webkit-scrollbar-thumb, .note-list::-webkit-scrollbar-thumb, .editor-content::-webkit-scrollbar-thumb, .modal-card::-webkit-scrollbar-thumb, .editor-body::-webkit-scrollbar-thumb { background: rgba(128,128,128,.18); border-radius: 99px; }
.sidebar::-webkit-scrollbar-thumb:hover, .note-list::-webkit-scrollbar-thumb:hover, .editor-content::-webkit-scrollbar-thumb:hover, .modal-card::-webkit-scrollbar-thumb:hover, .editor-body::-webkit-scrollbar-thumb:hover { background: rgba(128,128,128,.34); }

.document-outline { position: absolute; z-index: 18; right: 16px; top: 50%; transform: translateY(-50%); max-width: min(220px, 32vw); padding: 7px 5px; border: 1px solid transparent; border-radius: 12px; background: color-mix(in srgb, var(--panel-raised) 76%, transparent); backdrop-filter: blur(12px); box-shadow: 0 8px 28px var(--shadow); opacity: .76; transition: width .18s, opacity .18s, background .18s; }
.document-outline:hover, .document-outline:focus-within { opacity: 1; background: var(--panel-raised); border-color: var(--line); }
.document-outline-items { display: grid; gap: 4px; }
.document-outline-item { display: flex; align-items: center; gap: 7px; width: 18px; height: 9px; overflow: hidden; border: 0; border-radius: 5px; background: transparent; color: var(--text-muted); padding: 0 3px; text-align: left; transition: width .18s, height .18s, background .15s; }
.document-outline:hover .document-outline-item, .document-outline:focus-within .document-outline-item { width: min(196px, 28vw); height: 23px; padding: 0 6px; }
.outline-tick { display: block; flex: 0 0 auto; width: 11px; height: 2px; border-radius: 9px; background: var(--text-faint); opacity: .72; }
.level-1 .outline-tick { width: 13px; background: var(--accent); }
.level-2 .outline-tick { width: 10px; }
.level-3 .outline-tick { width: 7px; }
.outline-label { min-width: 0; overflow: hidden; opacity: 0; font-size: 11px; line-height: 1; text-overflow: ellipsis; white-space: nowrap; transition: opacity .12s; }
.document-outline:hover .outline-label, .document-outline:focus-within .outline-label { opacity: 1; }
.document-outline-item:hover { background: var(--panel-soft); color: var(--text); }

/* Keep the calendar out of the navigation until the compact launcher is used. */
#sidebar-calendar { display: none; }
.calendar-popover { border-radius: 13px; padding: 10px; background: color-mix(in srgb, var(--panel-raised) 94%, transparent); }

/* Four bottom controls share the same quiet, 1.5px line-icon language. */
.floating-controls { gap: 2px; padding: 3px; border-color: color-mix(in srgb, var(--line) 72%, transparent); border-radius: 10px; background: var(--float-bg); box-shadow: 0 8px 24px var(--shadow); }
.floating-controls .icon-button, .floating-controls .floating-settings-button { display: inline-grid; place-items: center; width: 29px; height: 29px; border-radius: 7px; color: var(--text-muted); }
.floating-controls .icon-button:hover, .floating-controls .icon-button.is-active, .floating-controls .floating-settings-button:hover { background: var(--panel-soft); color: var(--accent); }

/* The formatting surface stays available, but no longer competes with the note. */
.toolbar { padding: 3px 2px; margin: 2px 0 4px; }
.toolbar button { opacity: .82; }
.toolbar button:hover, .toolbar button.is-active { opacity: 1; }

/* macOS workspace: a calmer palette and clearer hierarchy, without changing Android. */
body.is-native-app {
  --panel: #20282e;
  --panel-raised: #2a343a;
  --panel-soft: #344148;
  --list-bg: #192228;
  --editor-bg: #151d23;
  --hover: #29363d;
  --active: #35444a;
  --text: #edf3f4;
  --text-muted: #b4c0c4;
  --text-faint: #88999f;
  --accent: #78c9c0;
  --accent-ink: #12312f;
  --line: rgba(197, 225, 229, .11);
  --line-soft: rgba(197, 225, 229, .065);
  --float-bg: rgba(37, 49, 55, .92);
}
body.is-native-app.theme-stone-light {
  --panel: #f2f4f2;
  --panel-raised: #ffffff;
  --panel-soft: #e5ece9;
  --list-bg: #fafbf9;
  --editor-bg: #ffffff;
  --hover: #e9efec;
  --active: #deebe5;
  --text: #24383a;
  --text-muted: #566b6b;
  --text-faint: #758a89;
  /* 明亮模式（设置里叫「石墨红」）的强调色是橙红 vermilion。
     选 #d9481f 是因为它对白底与白字两个方向都够：与 #ffffff 的对比度 4.3:1，
     既能当 --accent-ink(#fff) 按钮底色，也能当白底上的图标/文字色。
     更亮的橙红（如 #e8590c）只有 3.6:1，白底上的小图标会发虚。 */
  --accent: #d9481f;
  --accent-ink: #ffffff;
  --line: rgba(27, 65, 63, .13);
  --line-soft: rgba(27, 65, 63, .075);
  --float-bg: rgba(250, 252, 250, .94);
}
body.is-native-app .sidebar { padding: 29px 14px 20px; background: var(--panel); }
body.is-native-app .sidebar-brand-row { padding-bottom: 15px; }
body.is-native-app .sidebar-brand { font-size: 15px; letter-spacing: -.035em; }
body.is-native-app .space-heading { margin-top: 8px; padding-bottom: 6px; font-size: 10px; font-weight: 700; letter-spacing: .15em; }
body.is-native-app .nav-item { position: relative; min-height: 39px; padding: 9px 11px; font-size: 12px; transition: background .16s, color .16s; }
body.is-native-app .nav-item:hover { background: var(--hover); color: var(--text); }
body.is-native-app .nav-item.active { background: var(--active); color: var(--text); box-shadow: inset 2px 0 var(--accent); }
body.is-native-app .space-dot { background: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 13%, transparent); }
body.is-native-app .note-list { background: var(--list-bg); }
body.is-native-app .list-heading { padding: 31px 21px 17px; }
body.is-native-app .list-heading h2 { font-size: 16px; letter-spacing: -.025em; }
body.is-native-app .search-box { margin: 0 17px 14px; padding-bottom: 10px; }
body.is-native-app .folder-header { min-height: 34px; padding-top: 9px; padding-bottom: 9px; }
body.is-native-app .folder-name { font-size: 12px; }
body.is-native-app .note-item { border-radius: 9px; padding-top: 11px; padding-bottom: 11px; }
body.is-native-app .note-item.active { background: var(--active); box-shadow: inset 2px 0 var(--accent); }
body.is-native-app .editor-panel { background: var(--editor-bg); }
body.is-native-app .editor-panel.directory-mode { background: radial-gradient(ellipse 55% 46% at 50% 48%, color-mix(in srgb, var(--accent) 7%, var(--editor-bg)), var(--editor-bg) 100%); }
body.is-native-app .directory-empty-card { width: min(100%, 390px); padding: 42px 38px 38px; border: 1px solid var(--line-soft); border-radius: 22px; background: color-mix(in srgb, var(--panel) 30%, var(--editor-bg)); box-shadow: 0 22px 70px rgba(0,0,0,.1), inset 0 1px rgba(255,255,255,.025); }
body.is-native-app .directory-empty .directory-symbol { width: 62px; height: 62px; margin-bottom: 25px; border: 1px solid color-mix(in srgb, var(--accent) 26%, var(--line)); border-radius: 19px; background: color-mix(in srgb, var(--accent) 12%, var(--editor-bg)); box-shadow: 0 10px 30px color-mix(in srgb, var(--accent) 8%, transparent); }
body.is-native-app .directory-empty .eyebrow { color: var(--accent); font-size: 10px; font-weight: 700; letter-spacing: .2em; }
body.is-native-app .directory-empty h2 { margin: 0 0 9px; font-size: 22px; font-weight: 650; letter-spacing: -.045em; }
body.is-native-app .directory-empty p:last-of-type { max-width: 300px; margin: 0; color: var(--text-muted); font-size: 12px; line-height: 1.75; }
body.is-native-app .desktop-empty-action { display: inline-flex; align-items: center; gap: 9px; height: 37px; margin-top: 25px; padding: 0 12px; border: 1px solid color-mix(in srgb, var(--accent) 34%, transparent); border-radius: 9px; background: color-mix(in srgb, var(--accent) 13%, var(--panel)); color: var(--text); font-size: 12px; font-weight: 600; transition: background .15s, transform .15s; }
body.is-native-app .desktop-empty-action:hover { background: color-mix(in srgb, var(--accent) 24%, var(--panel)); transform: translateY(-1px); }
body.is-native-app .desktop-empty-action .icon-slot { width: 14px; height: 14px; color: var(--accent); }
body.is-native-app .empty-shortcut { margin-left: 9px; color: var(--text-faint); font-size: 11px; font-weight: 500; }

@media (max-width: 980px) {
  .app-shell { --sidebar-width-base: min(196px, 28vw); --note-list-width-base: min(272px, 38vw); }
  .editor-panel { padding-left: 35px; padding-right: 35px; }
}

/* 触屏上 28～30px 的图标按钮太难点。宽屏触控设备（平板、触屏笔记本）也会命中这里，
   所以它和窄屏布局分开写 —— 这一块只管点击区大小，不管排布。 */
@media (pointer: coarse) {
  .icon-button, .editor-icon-button { width: 40px; height: 40px; }
  .floating-controls .icon-button, .floating-controls .floating-settings-button { width: 38px; height: 38px; }
  .round-button { width: 38px; height: 38px; }
  .folder-add, .space-add { width: 30px; height: 30px; }
  .small-action { padding: 8px 10px; font-size: 11px; }
  .quiet-button, .privacy-button { padding: 9px 10px; }
  .text-button { padding: 10px 8px; }
  .nav-item { padding: 12px 10px; }
  .toolbar button { min-width: 34px; height: 34px; }
  .calendar-nav { width: 30px; height: 28px; }
  .calendar-day { min-height: 26px; font-size: 11px; }
  .batch-all input { width: 18px; height: 18px; }
  .note-select { width: 18px; height: 18px; }
}

@media (max-width: 760px) {
  body { overflow: hidden; }
  /* 触屏上没有 ⌘，这些快捷键提示只会让人困惑（文案本身在窄屏下也会被换掉）。 */
  .desktop-hint { display: none; }
  .topbar { height: 46px; padding: 0 10px; }
  .top-actions { gap: 2px; }
  .save-state { display: none; }
  .brand-lockup { font-size: 12px; }
  /* 单列：列表与编辑器互斥显示，导航交给底部那条固定 Tab 栏。 */
  .app-shell { height: 100vh; display: block; position: relative; overflow: hidden; }
  /* 空间抽屉：整屏高、盖住底部 Tab 栏，顶部让开状态栏。
     以前是 26px 定值内边距，edge-to-edge 下品牌名会顶进状态栏。 */
  .sidebar { position: fixed; z-index: 50; top: 0; bottom: 0; left: 0; width: min(84vw, 300px); padding: calc(var(--safe-top) + 16px) 14px calc(var(--safe-bottom) + 18px) calc(var(--safe-left) + 14px); border-right: 1px solid var(--line); box-shadow: 12px 0 32px var(--shadow); transform: translateX(-105%); transition: transform .2s ease; }
  .app-shell.sidebar-collapsed .sidebar, .app-shell.note-list-collapsed .note-list { visibility: visible; opacity: 1; pointer-events: auto; }
  .app-shell.sidebar-open .sidebar { transform: translateX(0); }
  /* 抽屉自带阴影之外再压一层很轻的暗化。窄屏下抽屉与内容同为白底，
     只靠阴影看不出边界，整屏会像渲染错位；这层同时也是"点空白处关闭"的落点。 */
  .sidebar-scrim { position: fixed; z-index: 40; display: none; inset: 0; width: 100%; border: 0; border-radius: 0; background: var(--scrim); }
  .workspace.sidebar-open #sidebar-scrim { display: block; }
  .note-list-scrim { z-index: 54; }
  .workspace.note-list-open #note-list-scrim { display: block; }
  .note-list, .editor-panel { height: 100%; border: 0; }
  /* 列表在窄屏有两种形态：整屏（mobile-list-view）与浮在编辑器上的卡片（note-list-open）。
     整屏形态要自己让开状态栏；卡片形态的 top 已经含了安全区，内部就不再重复补。 */
  .note-list { display: none; padding-top: var(--safe-top); }
  .app-shell.note-list-open .note-list { position: fixed; z-index: 55; display: block; height: auto; padding: 0; top: calc(var(--safe-top) + 12px); bottom: calc(var(--safe-bottom) + var(--mobile-nav-height) + 12px); left: calc(var(--safe-left) + 12px); width: min(88vw, 360px); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 20px 48px var(--shadow); background: var(--panel); }
  /* 卡片形态的 bottom 已经让开了 Tab 栏与安全区，内部再补一次就会空出一大块。 */
  .app-shell.note-list-open .note-list .note-items { padding-bottom: 16px; }
  .editor-panel { display: none; padding: calc(var(--safe-top) + 10px) 18px calc(var(--safe-bottom) + var(--mobile-nav-height) + 8px); }
  .mobile-list-view .note-list { display: block; }
  .mobile-editor-view .editor-panel { display: flex; }
  .mobile-editor-view .note-list { display: none; }
  .mobile-only { display: inline-grid; place-items: center; }
  .note-title { padding-top: 14px; }
  .toolbar { padding-top: 8px; flex-wrap: wrap; row-gap: 2px; }
  .editor-content { padding-top: 14px; }
  .editor-topline { height: auto; min-height: 26px; flex-wrap: wrap; row-gap: 4px; }
  /* 25px 的顶部留白在手机上白占一行，改由安全区变量让位。 */
  .list-heading { padding: 14px 18px 12px; }
  .search-box { margin-left: 14px; margin-right: 14px; }
  .list-options { padding: 0 16px 10px; }
  /* 底部要给固定 Tab 栏让位，否则最后几条笔记会被压在导航下面点不到。 */
  .note-items { padding-left: 7px; padding-right: 7px; padding-bottom: calc(var(--safe-bottom) + var(--mobile-nav-height) + 10px); }
  /* 手机上一屏能看的条目太少，标题/摘要/日期之间收紧一点。 */
  .note-item { padding: 10px 26px 10px 11px; margin-bottom: 2px; }
  .note-item-time { margin-top: 5px; }
  .list-actions { gap: 4px; }
  .small-action { padding-left: 8px; padding-right: 8px; }
  .editor-top-actions { gap: 3px; }
  .folder-picker select { max-width: 100px; }
  .modal-backdrop { padding: 0; align-items: end; }
  .modal-card { max-height: 92vh; border-radius: 17px 17px 0 0; padding: 23px 19px calc(var(--safe-bottom) + 26px); }
  .settings-actions { align-items: stretch; flex-direction: column-reverse; }
  .settings-actions button { width: 100%; }
  .location-picker-row { align-items: stretch; flex-direction: column; }
  .location-picker-row .secondary-button { align-self: flex-start; }
  .note-context-menu { width: min(218px, calc(100vw - 16px)); }
  /* 底部导航。原来这里是左下角一枚悬浮药丸：既压住列表最后几条，
     又因为 z-index 高于抽屉而浮在抽屉上面，看起来像渲染错位。
     改成通栏 Tab 栏后，z-index 落在遮罩之下，内容靠 --mobile-nav-height 让位。 */
  .floating-controls { left: 0; right: 0; bottom: 0; z-index: 35; justify-content: space-around; gap: 2px; padding: 5px calc(var(--safe-right) + 8px) calc(var(--safe-bottom) + 5px) calc(var(--safe-left) + 8px); border: 0; border-top: 1px solid var(--line); border-radius: 0; background: var(--panel); backdrop-filter: none; box-shadow: 0 -6px 22px var(--shadow); }
  .floating-controls .icon-button, .floating-controls .floating-settings-button { width: 46px; height: 44px; border-radius: 12px; }
  /* 抽屉/目录打开时把状态回显到 Tab 栏，否则点完看不出发生了什么。 */
  .floating-controls .icon-button.is-overlay-open { background: var(--active); color: var(--accent); }
  .sidebar-calendar { margin-top: 14px; }
  .calendar-popover { left: calc(var(--safe-left) + 12px); bottom: calc(var(--safe-bottom) + var(--mobile-nav-height) + 12px); width: min(224px, calc(100vw - 24px)); }
  /* 文章目录贴右边缘会压住正文，挪到 Tab 栏上方。 */
  .document-outline { right: calc(var(--safe-right) + 8px); top: auto; bottom: calc(var(--safe-bottom) + var(--mobile-nav-height) + 10px); transform: none; }
  .column-resizer { display: none; }
}

/* 安卓专属元素（.android-only）在其它环境一律不渲染。
   这条必须在媒体查询之外：桌面端、窄窗浏览器、网页版都要命中，
   否则 #folders-screen 会挤进 .app-shell 的 3 列 grid 里，桌面布局直接崩。 */
.android-only { display: none; }

/* ==========================================================================
   Apple 备忘录界面层 —— 安卓端专属（0.8.8）
   --------------------------------------------------------------------------
   视觉基调完全对齐 iOS 备忘录，而不是卡片 + 玻璃：
     · 扁平列表，没有卡片、没有阴影、没有渐变；行与行之间是靠左内缩的发丝线；
     · 导航栏 / 工具栏是真的"半透明材质"（backdrop-filter），内容从下面滚过去；
     · 日期分组标题（今天 / 昨天 / 前 7 天 …）直接落在背景上，不加卡片；
     · 滑动操作：右滑置顶（橙），左滑删除（红），行是不透明底色、完全盖住操作层；
     · 长按菜单一律渲染成底部 Action Sheet（含独立"取消"）。
   刻意丢掉的东西（上一版 Liquid Glass 的产物）：卡片化列表、极光背景、
   彩色光晕、卡片内高光、底部 Tab 栏。

   门控方式与范围：
   `is-android-app` 只在「跑在 Tauri 里且不是 macOS 原生应用」时由 app.js 的
   enableAppleNotesShell() 挂到 body 上。所以：
     · 桌面端（macOS 原生）不满足选择器 → 视觉与布局逐像素不变；
     · 窄屏浏览器（拖窄的桌面窗口 / 手机浏览器打开网页版）也不满足 →
       verify-ui 里那批窄屏断言（它们不带这个类）完全不受影响；
     · 只有安卓 APK 命中下面这一整块。
   注意 `.android-only { display: none }` 上面那条是无条件的，它才是桌面端
   零污染的第一道保险；下面这些规则只是"把隐藏的东西按安卓的样子显示出来"。

   三条不能违反的工程约束：
   1. 不要给 .app-shell 加 backdrop-filter / filter / transform。它身上有
      isolation: isolate，内部又有 position: fixed 的子节点。一旦它成了 fixed
      的包含块，整套定位会整体错位。玻璃只给导航栏 / 工具栏 / Sheet 用。
   2. .editor-panel 在"当前屏"状态必须是 transform: none。它内部有
      #wiki-suggest（position: fixed，坐标按 viewport 算）。只要面板带着
      transform，fixed 就会改挂到面板的 padding box 上、弹层会整体偏移。
      所以编辑器用 display 显隐 + 入场动画（动画结束回到 transform: none）。
   3. 滚动列表里不用 backdrop-filter。每行一次离屏合成会让滚动掉帧。
   ========================================================================== */
/* 0.10.13：加上「横屏矮视口」—— 手机横过来宽度超过 760px，以前整层失效、掉回桌面三栏。
   这一层每条选择器都带 body.is-android-app，所以对桌面窄窗 / 横屏浏览器没有任何影响。 */
@media (max-width: 760px), (orientation: landscape) and (max-height: 560px) {
  /* --- 1. 设计令牌：iOS 系统色 / 系统材质 --------------------------------- */
  /* 上面那条 .android-only { display: none } 是无条件的，安卓端要把它翻回来。
     用 revert 而不是写死 block：<div>/<section>/<header> 各自回退到 UA 的
     display，需要 grid / flex 的元素再由下面更具体的选择器覆盖（(0,3,0) 高于
     这里的 (0,2,0)）。.is-hidden 的 display:none !important 仍然最高优先。 */
  body.is-android-app .android-only { display: revert; }

  body.is-android-app {
    --ios-list-bg: #1c1c1e;
    --ios-bar: rgba(28, 28, 30, .74);
    --ios-sheet-bg: #2c2c2e;
    --ios-sheet-raised: #48484a;
    --ios-field: rgba(120, 120, 128, .24);
    --ios-sep: rgba(84, 84, 88, .5);
    --ios-red: #ff453a;
    --ios-pin: #ff9f0a;
    /* 主题色继续用应用自己的 tint（石墨红 / 石墨黑），不换成 iOS 系统蓝 ——
       否则两套主题在安卓端会长得一模一样，"切换主题"看起来像坏了。 */
    --ios-tint: var(--accent);
    --ios-nav-h: 44px;
    --ios-toolbar-h: 50px;

    /* 列表与编辑器沿用用户可调的 --note-font-size / --note-opacity，但在它基础
       之上取一个 iOS 的下限：库里默认值是 12px，直接照搬到手机上会明显偏小
       （Apple 备忘录列表 17px、正文 17px、标题 28px）。用 max() 而不是写死，
       是为了让设置里的字号滑杆仍然有效 —— 往上调照旧生效，往下调不会掉到
       看不清。 */
    --ios-list-title: max(17px, calc(var(--note-font-size) + 5px));
    --ios-list-sub: max(15px, calc(var(--note-font-size) + 3px));
    --ios-editor-title: max(28px, calc(var(--note-font-size) * 1.9));
    --ios-editor-body: max(17px, calc(var(--note-font-size) + 5px));

    background: var(--ios-list-bg);
  }
  body.is-android-app.theme-stone-light {
    --ios-list-bg: #ffffff;
    --ios-bar: rgba(249, 249, 249, .82);
    --ios-sheet-bg: #ffffff;
    --ios-sheet-raised: #e9e9eb;
    --ios-field: rgba(120, 120, 128, .12);
    --ios-sep: rgba(60, 60, 67, .29);
    --ios-red: #ff3b30;
  }

  /* --- 2. 外壳：三块屏的定位上下文 --------------------------------------- */
  body.is-android-app .app-shell {
    position: relative;
    display: block;
    height: 100vh;
    overflow: hidden;
    /* 0.10.13：clip 而不是只 hidden —— hidden 仍是可程序滚动的容器。新建笔记时标题在编辑器
       滑入动画途中获得焦点，浏览器会把 .app-shell 横向滚动约 20px，整屏左移、右边露底色。 */
    overflow: clip;
    background: var(--ios-list-bg);
    /* 抽屉、列宽拖拽条、底部悬浮控件在 Apple 模型里没有位置。 */
    --mobile-nav-height: 0px;
  }
  body.is-android-app .app-shell > .sidebar,
  body.is-android-app .app-shell > .column-resizer,
  body.is-android-app .app-shell > .sidebar-scrim,
  body.is-android-app .app-shell > .floating-controls { display: none !important; }
  body.is-android-app .document-outline { display: none !important; }

  /* 三块屏统一成"整屏卡片"，靠 transform 叠起来：
       待命位置（右侧屏外）→ translateX(100%)
       已推入的上一屏      → translateX(-26%) 并压暗
       当前屏             → translateX(none)
     不用 display 切换是因为 display 不能过渡，推入动画会丢。 */
  body.is-android-app .app-shell > .folders-screen,
  body.is-android-app .app-shell > .note-list,
  body.is-android-app .app-shell > .editor-panel {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: var(--ios-list-bg);
    transform: translateX(100%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: transform .34s cubic-bezier(.32, .72, 0, 1), opacity .22s linear, visibility 0s linear .34s;
  }
  body.is-android-app .app-shell.apple-screen-notes > .folders-screen,
  body.is-android-app .app-shell.apple-screen-editor > .note-list {
    transform: translateX(-26%);
    opacity: .68;
    visibility: visible;
    transition: transform .34s cubic-bezier(.32, .72, 0, 1), opacity .34s linear;
  }
  body.is-android-app .app-shell.apple-screen-folders > .folders-screen,
  body.is-android-app .app-shell.apple-screen-notes > .note-list,
  body.is-android-app .app-shell.apple-screen-editor > .editor-panel {
    transform: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    z-index: 2;
    transition: transform .34s cubic-bezier(.32, .72, 0, 1), opacity .22s linear;
  }
  /* 边缘返回手势进行中：拖动必须 1:1 跟手，任何过渡都会拖后腿。 */
  body.is-android-app .app-shell.apple-gesture-back > .folders-screen,
  body.is-android-app .app-shell.apple-gesture-back > .note-list,
  body.is-android-app .app-shell.apple-gesture-back > .editor-panel { transition: none; }

  /* --- 3. 导航栏（半透明材质）-------------------------------------------- */
  body.is-android-app .app-shell .ios-nav {
    position: absolute;
    z-index: 5;
    top: 0;
    left: 0;
    right: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 4px;
    height: calc(var(--safe-top) + var(--ios-nav-h));
    padding: var(--safe-top) 6px 0;
    background: var(--ios-bar);
    -webkit-backdrop-filter: blur(22px) saturate(1.8);
    backdrop-filter: blur(22px) saturate(1.8);
  }
  /* 发丝线只在内容压到栏下面时才出现 —— Apple 就是这么做的。 */
  body.is-android-app .app-shell .ios-nav::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: var(--ios-sep);
    opacity: 0;
    transition: opacity .2s linear;
  }
  body.is-android-app .app-shell .ios-nav.is-tight::after { opacity: 1; }

  body.is-android-app .app-shell .ios-nav-side {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    height: 34px;
    padding: 0 6px;
    border: 0;
    background: transparent;
    color: var(--ios-tint);
    font-size: 17px;
    letter-spacing: -.01em;
    white-space: nowrap;
  }
  body.is-android-app .app-shell .ios-nav-side:disabled { opacity: .4; }
  body.is-android-app .app-shell .ios-nav-leading { justify-self: start; }
  body.is-android-app .app-shell .ios-nav-trailing { justify-self: end; }
  body.is-android-app .app-shell .ios-nav-parent {
    max-width: 32vw;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  body.is-android-app .app-shell .ios-nav-title {
    justify-self: center;
    max-width: 46vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 17px;
    font-weight: 600;
    color: var(--text);
    opacity: 0;
    transition: opacity .2s linear;
  }
  body.is-android-app .app-shell .ios-nav.is-tight .ios-nav-title { opacity: 1; }
  /* 编辑器里标题一直显示（Apple 也是常显），不跟着滚动淡入。 */
  body.is-android-app .app-shell .editor-panel .ios-nav-title { opacity: 1; }

  /* 纯 CSS 画的 chevron：两个边框转 45°，比嵌图标轻，且自动跟随 currentColor。 */
  body.is-android-app .ios-chevron-left,
  body.is-android-app .ios-chevron-right,
  body.is-android-app .ios-chevron-down {
    display: inline-block;
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    border-left: 2.2px solid currentColor;
    border-bottom: 2.2px solid currentColor;
    border-radius: 1px;
  }
  body.is-android-app .ios-chevron-left { transform: rotate(45deg); }
  body.is-android-app .ios-chevron-right { transform: rotate(-135deg); }
  body.is-android-app .ios-chevron-down { width: 8px; height: 8px; transform: rotate(-45deg); }

  /* --- 4. 滚动容器与工具栏 ----------------------------------------------- */
  /* 滚动容器的上下内边距等于导航栏 / 工具栏高度：内容从半透明栏下面滚过去，
     这才是"系统材质"的观感来源。 */
  body.is-android-app .app-shell .ios-scroll {
    position: absolute;
    inset: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    padding-top: calc(var(--safe-top) + var(--ios-nav-h));
    padding-bottom: calc(var(--safe-bottom) + var(--ios-toolbar-h));
  }

  body.is-android-app .app-shell .ios-toolbar {
    position: absolute;
    z-index: 5;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: calc(var(--safe-bottom) + var(--ios-toolbar-h));
    padding: 4px 8px calc(var(--safe-bottom) + 4px);
    background: var(--ios-bar);
    -webkit-backdrop-filter: blur(22px) saturate(1.8);
    backdrop-filter: blur(22px) saturate(1.8);
  }
  body.is-android-app .app-shell .ios-toolbar::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 1px;
    background: var(--ios-sep);
  }
  body.is-android-app .app-shell .ios-toolbar-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 38px;
    padding: 0 10px;
    border: 0;
    background: transparent;
    color: var(--ios-tint);
    font-size: 17px;
    letter-spacing: -.01em;
  }
  body.is-android-app .app-shell .ios-toolbar-button:active { opacity: .5; }
  body.is-android-app .app-shell .ios-toolbar-spacer { flex: 1; }

  /* 搜索框沉到底部（Apple 的位置），做成 iOS 的 inset 搜索框。 */
  body.is-android-app .app-shell .ios-toolbar-search {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding-top: 6px;
  }
  body.is-android-app .app-shell .notes-bottom-search { display: block; }
  body.is-android-app .app-shell .notes-bottom-search .search-box {
    margin: 0;
    padding: 7px 10px;
    border: 0;
    border-radius: 10px;
    background: var(--ios-field);
    color: var(--text-muted);
  }
  body.is-android-app .app-shell .notes-bottom-search .search-box:focus-within { color: var(--text); }
  body.is-android-app .app-shell .notes-bottom-search .search-box input { font-size: 17px; }
  body.is-android-app .app-shell .ios-toolbar-row { display: flex; align-items: center; gap: 6px; }

  /* --- 5. 大标题与分组列表 ----------------------------------------------- */
  body.is-android-app .app-shell .ios-large-title {
    margin: 0;
    padding: 16px 16px 8px;
    font-size: 34px;
    line-height: 1.15;
    font-weight: 700;
    letter-spacing: -.028em;
    color: var(--text);
  }
  /* 桌面端的标题条（空间名 + "笔记" + 文件夹/新建按钮）在 Apple 模型里全被
     导航栏与大标题取代，整块隐藏；里面的 #search-box / #list-options-row 是
     .list-heading 的兄弟节点，另行处理。 */
  body.is-android-app .app-shell .list-heading { display: none; }
  body.is-android-app .app-shell #list-options-row { display: none; }
  body.is-android-app .app-shell > .note-list > #empty-search { display: none !important; }

  body.is-android-app .app-shell .folder-list,
  body.is-android-app .app-shell .note-items {
    display: block;
    padding: 0 0 calc(var(--safe-bottom) + var(--ios-toolbar-h));
  }
  body.is-android-app .app-shell .ios-group { margin: 0; }
  body.is-android-app .app-shell .ios-search-entry {
    display: flex;
    align-items: center;
    gap: 10px;
    width: calc(100% - 32px);
    min-height: 44px;
    margin: 4px 16px 8px;
    padding: 0 13px;
    border: 0;
    border-radius: 11px;
    background: var(--ios-field);
    color: var(--text-muted);
    text-align: left;
    font-size: 16px;
  }
  body.is-android-app .app-shell .ios-search-entry .icon-slot { width: 19px; height: 19px; }
  body.is-android-app .app-shell .ios-search-entry:active { opacity: .72; }
  body.is-android-app .app-shell .ios-group-title {
    margin: 0;
    padding: 20px 16px 7px;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-muted);
  }
  body.is-android-app .app-shell .ios-group-card { display: block; }
  body.is-android-app .app-shell .ios-empty {
    margin: 0;
    padding: 44px 24px;
    text-align: center;
    color: var(--text-faint);
    font-size: 15px;
    line-height: 1.6;
  }

  body.is-android-app .app-shell .ios-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 52px;
    padding: 10px 16px;
    border: 0;
    border-radius: 0;
    background: var(--ios-list-bg);
    color: var(--text);
    text-align: left;
    font-size: var(--ios-list-title);
  }
  /* 发丝分割线从文字起点开始（左内缩 16px），这是 iOS 列表的标志性细节；
     整行通栏会显得像表格式的老式界面。用 ::after 而不是 inset 阴影是因为
     阴影没法只画左边一段，而且 ::after 会跟着行一起被滑走。 */
  body.is-android-app .app-shell .ios-row::after {
    content: "";
    position: absolute;
    left: 16px;
    right: 0;
    bottom: 0;
    height: 1px;
    background: var(--ios-sep);
  }
  body.is-android-app .app-shell .ios-group-card > .ios-row:last-child::after,
  body.is-android-app .app-shell .ios-group-card > .ios-swipe:last-child .ios-row::after { display: none; }
  body.is-android-app .app-shell .ios-row-icon {
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    color: var(--ios-tint);
  }
  body.is-android-app .app-shell .ios-row-main { flex: 1; min-width: 0; display: block; }
  body.is-android-app .app-shell .ios-row-title {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    letter-spacing: -.01em;
  }
  body.is-android-app .app-shell .ios-row-meta {
    flex: 0 0 auto;
    color: var(--text-faint);
    font-size: var(--ios-list-sub);
    font-variant-numeric: tabular-nums;
  }
  body.is-android-app .app-shell .ios-row-chevron { flex: 0 0 auto; color: var(--text-faint); opacity: .55; }

  /* 笔记行：标题 + 日期+摘要两行。 */
  body.is-android-app .app-shell .ios-note-row { min-height: 66px; padding-top: 11px; padding-bottom: 11px; gap: 10px; }
  body.is-android-app .app-shell .ios-note-top { display: flex; align-items: center; gap: 6px; }
  body.is-android-app .app-shell .ios-note-title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--ios-list-title);
    font-weight: 600;
    letter-spacing: -.012em;
    opacity: var(--note-opacity);
  }
  body.is-android-app .app-shell .ios-note-pin { flex: 0 0 auto; color: var(--ios-pin); display: inline-grid; place-items: center; }
  body.is-android-app .app-shell .ios-note-sub {
    display: block;
    margin-top: 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-muted);
    font-size: var(--ios-list-sub);
    opacity: calc(var(--note-opacity) * .95);
  }
  body.is-android-app .app-shell .ios-swipe.is-current .ios-note-title { color: var(--ios-tint); }

  /* --- 6. 滑动操作（右滑置顶 / 左滑删除）--------------------------------- */
  body.is-android-app .app-shell .ios-swipe {
    position: relative;
    display: block;
    overflow: hidden;
    background: var(--ios-list-bg);
  }
  body.is-android-app .app-shell .ios-swipe-bg { position: absolute; inset: 0; }
  body.is-android-app .app-shell .ios-swipe.is-swipe-right .ios-swipe-bg { background: var(--ios-pin); }
  body.is-android-app .app-shell .ios-swipe.is-swipe-left .ios-swipe-bg { background: var(--ios-red); }
  body.is-android-app .app-shell .ios-swipe-hint {
    position: absolute;
    top: 0;
    bottom: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #fff;
    font-size: 15px;
    font-weight: 500;
    opacity: 0;
    transition: opacity .12s linear;
  }
  body.is-android-app .app-shell .ios-swipe-hint.is-leading { left: 0; padding-left: 22px; }
  body.is-android-app .app-shell .ios-swipe-hint.is-trailing { right: 0; padding-right: 22px; }
  body.is-android-app .app-shell .ios-swipe.is-swipe-right .ios-swipe-hint.is-leading,
  body.is-android-app .app-shell .ios-swipe.is-swipe-left .ios-swipe-hint.is-trailing { opacity: 1; }
  /* 松开后归位是动画的；拖动中 inline transform 由 JS 直接写，不需要过渡。 */
  body.is-android-app .app-shell .ios-swipe .ios-row { transition: transform .24s cubic-bezier(.32, .72, 0, 1); }
  body.is-android-app .app-shell .ios-swipe .ios-row:active { background: var(--ios-list-bg); }

  /* 回收站多选（Apple 的圆形勾选圈）。 */
  body.is-android-app .app-shell .ios-check {
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    border: 1.6px solid var(--text-faint);
    border-radius: 50%;
    color: transparent;
  }
  body.is-android-app .app-shell .ios-check.is-checked {
    border-color: var(--ios-tint);
    background: var(--ios-tint);
    color: var(--ios-list-bg);
  }

  /* 批量操作条吸在导航栏下面（回收站多选时出现）。 */
  body.is-android-app .app-shell .batch-bar {
    position: sticky;
    z-index: 2;
    top: calc(var(--safe-top) + var(--ios-nav-h));
    margin: 0;
    padding: 8px 14px;
    border: 0;
    border-radius: 0;
    background: var(--ios-sheet-bg);
    box-shadow: inset 0 -1px 0 var(--ios-sep);
  }
  /* Apple 的批量操作是工具栏式的纯文字按钮，不是描边按钮。 */
  body.is-android-app .app-shell .batch-bar .quiet-button,
  body.is-android-app .app-shell .batch-bar .danger-button {
    border: 0;
    background: transparent;
    color: var(--ios-tint);
    padding: 6px 8px;
    font-size: 15px;
  }
  body.is-android-app .app-shell .batch-bar .danger-button { color: var(--ios-red); }
  body.is-android-app .app-shell .batch-bar .danger-button:disabled,
  body.is-android-app .app-shell .batch-bar .quiet-button:disabled { opacity: .4; }
  body.is-android-app .app-shell .batch-bar .batch-count { color: var(--text-muted); font-size: 13px; }
  body.is-android-app .app-shell .batch-bar .batch-all { color: var(--ios-tint); font-size: 15px; }

  /* --- 7. 编辑器：Apple 的标题 / 日期 / 正文 ----------------------------- */
  body.is-android-app .app-shell .editor-panel {
    background: var(--ios-list-bg);
    /* 入场动画。动画结束回到 transform: none —— 见文件头约束 2。 */
    animation: ios-editor-in .3s cubic-bezier(.32, .72, 0, 1);
  }
  @keyframes ios-editor-in {
    from { transform: translateX(14%); opacity: .4; }
    to { transform: none; opacity: 1; }
  }
  body.is-android-app .app-shell .editor-panel > .ios-scroll {
    display: block;
    overflow-y: auto;
    padding-left: 16px;
    padding-right: 16px;
    padding-bottom: calc(var(--safe-bottom) + var(--ios-toolbar-h) + 16px);
  }
  /* 桌面端的顶栏（时间戳 / 文件夹选择 / 一排图标）整块收进「更多」Action Sheet。 */
  body.is-android-app .app-shell .editor-topline { display: none; }
  body.is-android-app .app-shell .editor-footer { display: none; }
  body.is-android-app .app-shell .ios-note-date {
    margin: 6px 0 10px;
    color: var(--text-faint);
    font-size: 13px;
  }
  body.is-android-app .app-shell .note-title {
    padding: 0 0 10px;
    border-bottom: 0;
    font-size: var(--ios-editor-title);
    line-height: 1.24;
    font-weight: 700;
    letter-spacing: -.028em;
    /* #note-title 是单行 <input>（改成 textarea 会动到受保护的编辑器输入链路），
       长标题只能截断。补一个省略号，让"被截断"看起来是有意为之，而不是渲染出错。 */
    text-overflow: ellipsis;
  }
  /* Apple 是"整页滚动"，正文自己不再开内层滚动条。 */
  body.is-android-app .app-shell .editor-content {
    flex: none;
    overflow: visible;
    min-height: 45vh;
    padding: 2px 0 0;
    font-size: var(--ios-editor-body);
    line-height: 1.52;
  }
  body.is-android-app .app-shell .editor-content h1 { font-size: calc(var(--ios-editor-body) + 6px); letter-spacing: -.02em; }
  body.is-android-app .app-shell .editor-content h2 { font-size: calc(var(--ios-editor-body) + 3px); letter-spacing: -.016em; }
  body.is-android-app .app-shell .editor-content h3 { font-size: var(--ios-editor-body); }
  body.is-android-app .app-shell .directory-empty { margin: auto 0; text-align: center; padding: 0 24px; }
  body.is-android-app .app-shell .editor-panel.directory-mode > .ios-nav { display: grid; }
  body.is-android-app .app-shell .editor-panel.directory-mode > .ios-editor-toolbar { display: none; }

  /* 格式工具栏：吸在底部，横向可滚（Apple 的格式条也是横向的）。 */
  body.is-android-app .app-shell .ios-editor-toolbar {
    position: absolute;
    z-index: 5;
    left: 0;
    right: 0;
    bottom: 0;
    display: block;
    padding: 5px 8px calc(var(--safe-bottom) + 5px);
    background: var(--ios-bar);
    -webkit-backdrop-filter: blur(22px) saturate(1.8);
    backdrop-filter: blur(22px) saturate(1.8);
  }
  body.is-android-app .app-shell .ios-editor-toolbar::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 1px;
    background: var(--ios-sep);
  }
  body.is-android-app .app-shell .ios-editor-toolbar .toolbar {
    display: flex;
    flex-wrap: nowrap;
    gap: 2px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  body.is-android-app .app-shell .ios-editor-toolbar .toolbar::-webkit-scrollbar { display: none; }
  body.is-android-app .app-shell .ios-editor-toolbar .toolbar button {
    flex: 0 0 auto;
    /* 34px 宽是量出来的：10 个格式按钮 + 1 条分隔线 + 间距在 390px 上刚好放得下。
       用 40px 会在主流手机宽度上把最后一个图标切成半个，看起来像渲染坏了。
       更窄的屏幕靠横向滚动兜底。 */
    width: 34px;
    height: 38px;
    border-radius: 9px;
    color: var(--ios-tint);
  }
  body.is-android-app .app-shell .ios-editor-toolbar .toolbar button.is-active { background: var(--ios-field); }
  body.is-android-app .app-shell .ios-editor-toolbar .toolbar-divider { flex: 0 0 auto; width: 1px; height: 22px; margin: 0 3px; background: var(--ios-sep); }
  body.is-android-app .app-shell .ios-editor-toolbar .heading-menu-wrap { flex: 0 0 auto; }
  body.is-android-app .app-shell .ios-editor-toolbar .heading-menu {
    top: auto;
    bottom: calc(100% + 8px);
    background: var(--ios-sheet-bg);
    border: 0;
    border-radius: 12px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, .38);
  }
  body.is-android-app .app-shell .ios-editor-toolbar .heading-menu button { color: var(--ios-tint); border-radius: 8px; }

  /* 双链药丸、反向链接、文章目录：跟随 Apple 的正文观感。 */
  body.is-android-app .app-shell .backlink-panel { border-radius: 12px; background: var(--ios-field); }
  body.is-android-app .app-shell .wiki-suggest,
  body.is-android-app .app-shell .heading-menu {
    border: 0;
    background: var(--ios-sheet-bg);
    box-shadow: 0 16px 40px rgba(0, 0, 0, .38);
  }

  /* --- 8. 长按菜单 → 底部 Action Sheet ---------------------------------- */
  /* 不改 DOM 结构，只把浮层原位压到底部通栏，并把圆角/材质换成 iOS 的。 */
  body.is-android-app .note-context-menu:not(.is-hidden) {
    left: 10px !important;
    right: 10px !important;
    width: auto !important;
    top: auto !important;
    bottom: calc(var(--safe-bottom) + 10px) !important;
    max-height: min(66vh, 460px);
    overflow-y: auto;
    padding: 0;
    border: 0;
    border-radius: 14px;
    background: color-mix(in srgb, var(--ios-sheet-bg) 90%, transparent);
    -webkit-backdrop-filter: blur(24px) saturate(1.8);
    backdrop-filter: blur(24px) saturate(1.8);
    /* 第一个阴影是"整屏压暗"：100vmax 的扩散让 Sheet 四周铺满暗色，
       只有自己这块圆角矩形被挖空。不用额外加遮罩 DOM，也就不会跟既有的
       "点空白关闭"逻辑打架。 */
    box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .34), 0 20px 54px rgba(0, 0, 0, .42);
    animation: ios-sheet-in .26s cubic-bezier(.32, .72, 0, 1);
  }
  /* 压暗层跟着 Sheet 一起淡入，否则会"啪"地一下出现。 */
  @keyframes ios-sheet-in {
    from { transform: translateY(16px); opacity: 0; }
    to { transform: none; opacity: 1; }
  }
  body.is-android-app .note-context-menu > button {
    min-height: 52px;
    justify-content: center;
    gap: 8px;
    padding: 0 16px;
    border-radius: 0;
    color: var(--ios-tint);
    font-size: 17px;
    letter-spacing: -.01em;
  }
  body.is-android-app .note-context-menu > button + button { box-shadow: inset 0 1px 0 var(--ios-sep); }
  body.is-android-app .note-context-menu > button.danger { color: var(--ios-red); }
  body.is-android-app .note-context-menu > button:active { background: var(--ios-field); }
  body.is-android-app .note-context-menu > .sheet-cancel {
    min-height: 54px;
    background: var(--ios-sheet-raised);
    font-weight: 600;
    box-shadow: none;
  }
  body.is-android-app .note-context-menu .context-divider { height: 1px; margin: 0; background: var(--ios-sep); }
  body.is-android-app .note-context-menu .context-hint { margin: 8px 16px 10px; font-size: 12px; color: var(--text-faint); }
  body.is-android-app .note-context-menu .menu-icon-slot { width: 17px; height: 17px; opacity: 1; }

  /* --- 9. 弹层（设置 / 新建 / 确认框）与日历面板 -------------------------- */
  body.is-android-app .modal-card {
    border: 0;
    border-radius: 16px 16px 0 0;
    background: var(--ios-sheet-bg);
    box-shadow: 0 -12px 44px rgba(0, 0, 0, .4);
  }
  body.is-android-app .modal-backdrop { background: rgba(0, 0, 0, .42); }
  body.is-android-app .calendar-popover {
    left: 10px;
    right: 10px;
    top: auto;
    bottom: calc(var(--safe-bottom) + 10px);
    width: auto;
    border: 0;
    border-radius: 14px;
    background: var(--ios-sheet-bg);
    box-shadow: 0 20px 54px rgba(0, 0, 0, .42);
  }

  /* --- 10. 锁屏 --------------------------------------------------------- */
  body.is-android-app .lock-screen { background: var(--ios-list-bg); }

  /* --- 11. 不支持 backdrop-filter 时降级为不透明 ------------------------- */
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    body.is-android-app .app-shell .ios-nav,
    body.is-android-app .app-shell .ios-toolbar,
    body.is-android-app .app-shell .ios-editor-toolbar { background: var(--ios-list-bg); }
    body.is-android-app .note-context-menu:not(.is-hidden) { background: var(--ios-sheet-bg); }
  }
}

/* ==========================================================================
   Cove Android 0.10.13 · 与桌面 0.10.12 同一套视觉语言 + HyperOS（小米 15）交互
   --------------------------------------------------------------------------
   取代 0.9.x 的「Memos 绿」画布。颜色、字号阶梯、引用 / 折叠 / 代码块的样子
   全部取自桌面原生端（body.is-native-app 那一套），手机上只换交互形态：
     · 浅色 = 桌面「石墨红」：#f2f4f2 底 + 白卡片 + 朱红 #d9481f 强调；
       深色 = 桌面「石墨黑」：#192228 底 + #20282e 卡片 + 青绿 #78c9c0 强调；
     · 列表是 HyperOS 的分组圆角卡片，卡片里是桌面那种扁平行（标题 / 摘要 / 时间），
       当前笔记沿用桌面选中态：浅底 + 左侧 3px 强调色竖条；
     · 编辑器标题只比正文大 4px，h1 / h2 / h3 = +2 / +1 / +0（与桌面同一阶梯）；
     · 返回是箭头、更多是「⋯」、新建是右下角胶囊悬浮按钮（HyperOS 便签的位置）；
     · 所有可点目标 ≥ 44px，按下有底色反馈；悬浮按钮 / 格式条都抬在手势条之上；
     · 标题级别 / 插入 / 颜色三个下拉在手机上都是底部菜单。
   门控照旧：每一行选择器都带 body.is-android-app（verify-android 会逐行扫）。
   媒体条件多了一个「横屏矮视口」：小米 15 横过来宽 873px，以前会直接掉回桌面三栏。
   ========================================================================== */
@media (max-width: 760px), (orientation: landscape) and (max-height: 560px) {
  body.is-android-app {
    --ios-list-bg: #f2f4f2;
    --ios-bar: #f2f4f2;
    --ios-sheet-bg: #ffffff;
    --ios-sheet-raised: #e9efec;
    --ios-field: #e5ece9;
    --ios-sep: rgba(27, 65, 63, .1);
    --ios-tint: #d9481f;
    --ios-pin: #c98038;
    --ios-red: #c64b52;
    --ios-nav-h: 58px;
    --ios-toolbar-h: 64px;
    --android-press: rgba(27, 65, 63, .08);
    --android-title: calc(var(--ios-editor-body) + 4px);
    --text: #24383a;
    --text-muted: #566b6b;
    --text-faint: #758a89;
    --accent: #d9481f;
    --accent-ink: #ffffff;
    --panel: #f2f4f2;
    --panel-raised: #ffffff;
    --panel-soft: #e5ece9;
    --list-bg: #fafbf9;
    --editor-bg: #ffffff;
    --field-bg: #f2f4f2;
    --hover: #e9efec;
    --active: #deebe5;
    --line: rgba(27, 65, 63, .13);
    --line-soft: rgba(27, 65, 63, .075);
    --float-bg: rgba(250, 252, 250, .94);
    color: var(--text);
    /* 小米机型的系统字体是 MiSans；排第一位，其它安卓机落到系统无衬线。 */
    font-family: "MiSans", "MiSans VF", "HarmonyOS Sans SC", system-ui, -apple-system, "PingFang SC", "Noto Sans CJK SC", "Noto Sans SC", sans-serif;
    -webkit-tap-highlight-color: transparent;
  }
  body.is-android-app.theme-stone-light {
    --ios-list-bg: #f2f4f2;
    --ios-bar: #f2f4f2;
    --ios-sheet-bg: #ffffff;
    --ios-field: #e5ece9;
    --ios-sep: rgba(27, 65, 63, .1);
    --ios-tint: #d9481f;
    --ios-red: #c64b52;
    --accent: #d9481f;
  }
  body.is-android-app.theme-stone-dark {
    --ios-list-bg: #192228;
    --ios-bar: #192228;
    --ios-sheet-bg: #20282e;
    --ios-sheet-raised: #2a343a;
    --ios-field: #29363d;
    --ios-sep: rgba(197, 225, 229, .09);
    --ios-tint: #78c9c0;
    --ios-pin: #e5ab66;
    --ios-red: #ef8588;
    --android-press: rgba(197, 225, 229, .09);
    --text: #edf3f4;
    --text-muted: #b4c0c4;
    --text-faint: #88999f;
    --accent: #78c9c0;
    --accent-ink: #12312f;
    --panel: #20282e;
    --panel-raised: #2a343a;
    --panel-soft: #344148;
    --list-bg: #192228;
    --editor-bg: #151d23;
    --field-bg: #151d23;
    --hover: #29363d;
    --active: #35444a;
    --line: rgba(197, 225, 229, .11);
    --line-soft: rgba(197, 225, 229, .065);
    --float-bg: rgba(37, 49, 55, .92);
  }

  /* --- 触控基线：无 300ms 延迟、界面元素不被长按选中、按下有反馈 --------- */
  body.is-android-app button,
  body.is-android-app .app-shell .ios-row { touch-action: manipulation; }
  body.is-android-app .app-shell .ios-nav,
  body.is-android-app .app-shell .ios-toolbar,
  body.is-android-app .app-shell .ios-editor-toolbar,
  body.is-android-app .app-shell .ios-large-title,
  body.is-android-app .app-shell .ios-group-title,
  body.is-android-app .app-shell .ios-row,
  body.is-android-app .note-context-menu,
  body.is-android-app .modal-card h2 { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }

  /* --- 导航栏：箭头返回 + 收起后的小标题 + 图标按钮 ----------------------- */
  body.is-android-app .app-shell .ios-nav {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 2px;
    padding: var(--safe-top) calc(var(--safe-right) + 8px) 0 calc(var(--safe-left) + 8px);
    background: var(--ios-bar);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  body.is-android-app .app-shell .ios-nav::after { display: none; }
  body.is-android-app .app-shell .ios-nav-title {
    display: block;
    justify-self: start;
    max-width: 100%;
    padding: 0 6px;
    font-size: 17px;
    font-weight: 650;
    letter-spacing: -.02em;
    color: var(--text);
    opacity: 0;
  }
  body.is-android-app .app-shell .ios-nav.is-tight .ios-nav-title { opacity: 1; }
  body.is-android-app .app-shell .editor-panel .ios-nav-title { display: none; }
  body.is-android-app .app-shell .ios-nav-side {
    min-height: 44px;
    padding: 0 12px;
    border-radius: 22px;
    background: transparent;
    color: var(--text);
    font-size: 15px;
    font-weight: 600;
  }
  body.is-android-app .app-shell .ios-nav-back,
  body.is-android-app .app-shell .ios-nav-icon {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--text);
  }
  body.is-android-app .app-shell .ios-nav-back .ios-nav-parent {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  body.is-android-app .app-shell .ios-nav-icon:disabled { opacity: .3; }
  body.is-android-app .app-shell .ios-nav-back:active,
  body.is-android-app .app-shell .ios-nav-icon:active:not(:disabled),
  body.is-android-app .app-shell .ios-nav-side:active { background: var(--android-press); }
  body.is-android-app .app-shell .ios-nav-actions { display: inline-flex; align-items: center; gap: 0; }
  /* 空间切换：桌面侧栏的「空间圆点」放进一枚胶囊。 */
  body.is-android-app .app-shell #space-menu-button {
    gap: 8px;
    max-width: 62vw;
    min-height: 40px;
    padding: 0 14px 0 12px;
    border-radius: 20px;
    background: var(--ios-sheet-bg);
    color: var(--text);
    box-shadow: 0 0 0 1px var(--ios-sep);
  }
  body.is-android-app .app-shell #space-menu-button::before {
    content: "";
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
  }
  body.is-android-app .app-shell #space-menu-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  body.is-android-app .app-shell .ios-chevron-down { width: 7px; height: 7px; border-width: 0 0 1.8px 1.8px; opacity: .6; }

  /* --- 滚动容器 / 大标题 / 搜索 ------------------------------------------- */
  body.is-android-app .app-shell .ios-scroll {
    padding-top: calc(var(--safe-top) + var(--ios-nav-h) + 4px);
    padding-bottom: calc(var(--safe-bottom) + 96px);
    scrollbar-width: none;
  }
  body.is-android-app .app-shell .ios-scroll::-webkit-scrollbar { display: none; }
  body.is-android-app .app-shell .ios-large-title {
    padding: 8px calc(var(--safe-right) + 20px) 16px calc(var(--safe-left) + 20px);
    font-size: 30px;
    font-weight: 650;
    letter-spacing: -.045em;
    line-height: 1.15;
  }
  body.is-android-app .app-shell .ios-search-entry,
  body.is-android-app .app-shell #notes-scroll > .search-box {
    display: flex;
    align-items: center;
    gap: 10px;
    width: calc(100% - 32px - var(--safe-left) - var(--safe-right));
    min-height: 46px;
    margin: 0 calc(var(--safe-right) + 16px) 18px calc(var(--safe-left) + 16px);
    padding: 0 14px;
    border: 0;
    border-radius: 14px;
    background: var(--ios-field);
    color: var(--text-faint);
    box-shadow: none;
    font-size: 15px;
  }
  body.is-android-app .app-shell .ios-search-entry:active { background: var(--hover); }
  body.is-android-app .app-shell #notes-scroll > .search-box input {
    width: 100%;
    min-height: 44px;
    font-size: 16px;
    color: var(--text);
    background: transparent;
  }

  /* --- 分组卡片（HyperOS）+ 扁平行（桌面）------------------------------- */
  body.is-android-app .app-shell .folder-list,
  body.is-android-app .app-shell .note-items {
    padding: 0 calc(var(--safe-right) + 16px) 8px calc(var(--safe-left) + 16px);
  }
  body.is-android-app .app-shell .ios-group { margin: 0 0 18px; }
  body.is-android-app .app-shell .ios-group-title {
    padding: 2px 6px 8px;
    color: var(--text-faint);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .02em;
  }
  body.is-android-app .app-shell .ios-group-card {
    display: block;
    overflow: hidden;
    border-radius: 18px;
    background: var(--ios-sheet-bg);
  }
  body.is-android-app .app-shell .ios-row {
    min-height: 58px;
    padding: 10px 16px;
    gap: 14px;
    background: var(--ios-sheet-bg);
    font-size: var(--ios-list-title);
    transition: background .12s linear;
  }
  body.is-android-app .app-shell .ios-row:active { background: var(--hover); }
  body.is-android-app .app-shell .ios-row::after { left: 16px; background: var(--ios-sep); }
  body.is-android-app .app-shell #folder-list .ios-row::after { left: 62px; }
  body.is-android-app .app-shell .ios-row-icon {
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    color: var(--accent);
  }
  body.is-android-app .app-shell .ios-all-notes-row .ios-row-icon { background: var(--accent); color: var(--accent-ink); }
  body.is-android-app .app-shell .ios-row-title { font-weight: 500; }
  body.is-android-app .app-shell .ios-row-meta { color: var(--text-faint); font-size: 14px; }
  body.is-android-app .app-shell .ios-row-chevron { color: var(--text-faint); opacity: .7; }

  /* 笔记行：标题 / 一行摘要 / 时间 · 文件夹（桌面中栏的三段式）。 */
  body.is-android-app .app-shell #note-items .ios-note-row {
    align-items: flex-start;
    min-height: 76px;
    padding: 13px 16px 12px;
    gap: 10px;
  }
  body.is-android-app .app-shell #note-items .ios-note-row .ios-row-chevron { display: none; }
  body.is-android-app .app-shell .ios-note-title {
    font-size: var(--ios-list-title);
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -.015em;
    opacity: var(--note-opacity);
  }
  body.is-android-app .app-shell .ios-note-pin { color: var(--ios-pin); }
  body.is-android-app .app-shell .ios-note-sub {
    margin-top: 4px;
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.5;
    opacity: calc(var(--note-opacity) * .96);
  }
  body.is-android-app .app-shell .ios-note-meta {
    display: block;
    margin-top: 5px;
    color: var(--text-faint);
    font-size: 12.5px;
    line-height: 1.3;
    font-variant-numeric: tabular-nums;
  }
  body.is-android-app .app-shell .ios-swipe { background: var(--ios-sheet-bg); }
  body.is-android-app .app-shell .ios-swipe .ios-row:active { background: var(--hover); }
  body.is-android-app .app-shell #note-items .ios-swipe.is-current .ios-note-row {
    background: var(--active);
    box-shadow: inset 3px 0 var(--accent);
  }
  body.is-android-app .app-shell #note-items .ios-swipe.is-current .ios-note-title { color: var(--text); }
  body.is-android-app .app-shell .ios-check { width: 24px; height: 24px; }
  body.is-android-app .app-shell .ios-empty {
    padding: 56px 24px;
    border-radius: 18px;
    background: var(--ios-sheet-bg);
    color: var(--text-faint);
  }
  body.is-android-app .app-shell .batch-bar { background: var(--ios-list-bg); box-shadow: inset 0 -1px 0 var(--ios-sep); }
  body.is-android-app .app-shell .batch-bar .quiet-button,
  body.is-android-app .app-shell .batch-bar .danger-button { min-height: 40px; }

  /* --- 底部：悬浮新建按钮（抬在手势条之上）----------------------------- */
  body.is-android-app .app-shell .ios-toolbar {
    display: block;
    min-height: 0;
    padding: 0;
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    pointer-events: none;
  }
  body.is-android-app .app-shell .ios-toolbar::before { display: none; }
  body.is-android-app .app-shell .ios-toolbar-button { pointer-events: auto; }
  body.is-android-app .app-shell #folders-new-folder-button,
  body.is-android-app .app-shell #notes-new-note-button {
    position: absolute;
    right: calc(var(--safe-right) + 18px);
    bottom: calc(var(--safe-bottom) + 20px);
    min-height: 52px;
    padding: 0 20px 0 16px;
    border: 0;
    border-radius: 26px;
    background: var(--accent);
    color: var(--accent-ink);
    box-shadow: 0 8px 22px color-mix(in srgb, var(--accent) 30%, rgba(0, 0, 0, .12));
    font-size: 15px;
    font-weight: 600;
    transition: transform .12s ease, box-shadow .12s ease;
  }
  body.is-android-app .app-shell #folders-new-folder-button::before,
  body.is-android-app .app-shell #notes-new-note-button::before {
    content: "+";
    margin-right: 6px;
    font-size: 24px;
    font-weight: 400;
    line-height: 0;
  }
  body.is-android-app .app-shell #folders-new-folder-button:active,
  body.is-android-app .app-shell #notes-new-note-button:active { transform: scale(.96); opacity: 1; }
  body.is-android-app .app-shell #folders-trash-button,
  body.is-android-app .app-shell #notes-list-more-button,
  body.is-android-app .app-shell .notes-bottom-search { display: none; }
  /* 键盘弹起（搜索 / 重命名）时，悬浮按钮会被顶到键盘上方压住内容，收起来。 */
  body.is-android-app.is-keyboard-open .app-shell #folders-new-folder-button,
  body.is-android-app.is-keyboard-open .app-shell #notes-new-note-button { display: none; }

  /* --- 编辑器：桌面原生端的排版，手机字号 ----------------------------- */
  body.is-android-app .app-shell .editor-panel { background: var(--editor-bg); }
  body.is-android-app .app-shell .editor-panel .ios-nav { background: var(--editor-bg); }
  body.is-android-app .app-shell .editor-panel > .ios-scroll {
    padding-left: calc(var(--safe-left) + 20px);
    padding-right: calc(var(--safe-right) + 20px);
    padding-bottom: calc(var(--safe-bottom) + var(--ios-toolbar-h) + 72px);
  }
  body.is-android-app.is-keyboard-open .app-shell .editor-panel > .ios-scroll { padding-bottom: calc(var(--ios-toolbar-h) + 72px); }
  body.is-android-app .app-shell .ios-note-date { margin: 8px 0 6px; color: var(--text-faint); font-size: 12.5px; font-variant-numeric: tabular-nums; }
  body.is-android-app .app-shell .note-title {
    padding: 2px 0 10px;
    border-bottom: 0;
    font-size: var(--android-title);
    font-weight: 680;
    line-height: 1.34;
    letter-spacing: -.034em;
    caret-color: var(--accent);
  }
  body.is-android-app .app-shell .editor-content {
    font-size: var(--ios-editor-body);
    line-height: var(--note-line-height);
    caret-color: var(--accent);
  }
  body.is-android-app .app-shell .editor-content p,
  body.is-android-app .app-shell .editor-content > div { margin: 0 0 var(--note-paragraph-gap); }
  body.is-android-app .app-shell .editor-content h1,
  body.is-android-app .app-shell .editor-content h2,
  body.is-android-app .app-shell .editor-content h3 { font-weight: 700; letter-spacing: -.02em; line-height: 1.34; }
  body.is-android-app .app-shell .editor-content h1 { margin: .9em 0 .4em; font-size: calc(var(--ios-editor-body) + 2px); }
  body.is-android-app .app-shell .editor-content h2 { margin: .85em 0 .35em; font-size: calc(var(--ios-editor-body) + 1px); }
  body.is-android-app .app-shell .editor-content h3 { margin: .8em 0 .3em; font-size: var(--ios-editor-body); }
  body.is-android-app .app-shell .editor-content blockquote {
    margin: 14px 0;
    padding: 6px 12px 6px 14px;
    border-left: 3px solid var(--accent);
    border-radius: 0 8px 8px 0;
    background: color-mix(in srgb, var(--accent) 7%, transparent);
    color: var(--text-muted);
  }
  body.is-android-app .app-shell .fold-block {
    padding: 8px 12px 10px;
    border: 1px solid var(--line-soft);
    border-radius: 12px;
    background: color-mix(in srgb, var(--panel) 62%, transparent);
  }
  body.is-android-app .app-shell .fold-block summary { min-height: 32px; font-weight: 650; }
  body.is-android-app .app-shell .editor-content pre {
    padding: 40px 14px 12px;
    border-radius: 10px;
    background: var(--panel);
    font-size: .88em;
  }
  body.is-android-app .app-shell .editor-content ::selection { background: color-mix(in srgb, var(--accent) 28%, transparent); }
  body.is-android-app .app-shell .note-image img { border: 1px solid var(--line); border-radius: 12px; }
  body.is-android-app .app-shell .todo-checkbox { width: 1.1em; height: 1.1em; border-radius: 4px; }
  body.is-android-app .app-shell .backlink-panel { border-radius: 14px; background: var(--panel); }

  /* --- 格式条：贴底、抬在手势条之上，键盘弹起时贴在键盘上方 ------------- */
  body.is-android-app .app-shell .ios-editor-toolbar {
    padding: 6px calc(var(--safe-right) + 8px) calc(var(--safe-bottom) + 6px) calc(var(--safe-left) + 8px);
    background: var(--editor-bg);
    border-top: 1px solid var(--line-soft);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  body.is-android-app .app-shell .ios-editor-toolbar::before { display: none; }
  /* 右侧渐隐：提示「还能往左滑」，滑到底就收起（JS 加 .is-scroll-end）。 */
  body.is-android-app .app-shell .ios-editor-toolbar::after {
    content: "";
    position: absolute;
    top: 1px;
    right: 0;
    bottom: calc(var(--safe-bottom) + 1px);
    width: 36px;
    background: linear-gradient(to right, transparent, var(--editor-bg) 78%);
    pointer-events: none;
    transition: opacity .15s linear;
  }
  body.is-android-app .app-shell .ios-editor-toolbar.is-scroll-end::after { opacity: 0; }
  body.is-android-app .app-shell .ios-editor-toolbar .toolbar {
    gap: 2px;
    scroll-snap-type: x proximity;
    scroll-padding: 0 8px;
  }
  body.is-android-app .app-shell .ios-editor-toolbar .toolbar > button,
  body.is-android-app .app-shell .ios-editor-toolbar .toolbar > .heading-menu-wrap > button {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    color: var(--text-muted);
    opacity: 1;
    scroll-snap-align: start;
  }
  body.is-android-app .app-shell .ios-editor-toolbar .toolbar > button:active,
  body.is-android-app .app-shell .ios-editor-toolbar .toolbar > .heading-menu-wrap > button:active { background: var(--android-press); }
  body.is-android-app .app-shell .ios-editor-toolbar .toolbar button.is-active,
  body.is-android-app .app-shell .ios-editor-toolbar .toolbar > .heading-menu-wrap > button[aria-expanded="true"] { background: var(--active); color: var(--accent); }
  body.is-android-app .app-shell .ios-editor-toolbar .toolbar .icon-slot,
  body.is-android-app .app-shell .ios-editor-toolbar .toolbar .icon-slot svg { width: 22px; height: 22px; }
  body.is-android-app .app-shell .ios-editor-toolbar .toolbar-divider { height: 24px; background: var(--line); }

  /* --- 标题级别 / 插入 / 颜色：底部菜单 ------------------------------- */
  body.is-android-app .app-shell .ios-editor-toolbar .heading-menu:not(.is-hidden) {
    position: fixed;
    z-index: 60;
    top: auto;
    left: calc(var(--safe-left) + 10px);
    right: calc(var(--safe-right) + 10px);
    bottom: calc(var(--safe-bottom) + 10px);
    width: auto;
    max-height: min(72vh, 560px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 6px 8px 10px;
    border: 1px solid var(--ios-sep);
    border-radius: 22px;
    background: var(--ios-sheet-bg);
    box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .34), 0 20px 54px rgba(0, 0, 0, .3);
    animation: ios-sheet-in .26s cubic-bezier(.32, .72, 0, 1);
  }
  body.is-android-app.is-keyboard-open .app-shell .ios-editor-toolbar .heading-menu:not(.is-hidden) { bottom: 10px; }
  body.is-android-app .app-shell .ios-editor-toolbar .heading-menu::before {
    display: block;
    padding: 10px 12px 6px;
    color: var(--text-faint);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .02em;
  }
  body.is-android-app .app-shell .ios-editor-toolbar #heading-menu::before { content: "段落样式"; }
  body.is-android-app .app-shell .ios-editor-toolbar #insert-menu::before { content: "插入"; }
  body.is-android-app .app-shell .ios-editor-toolbar #color-menu::before { content: none; }
  body.is-android-app .app-shell .ios-editor-toolbar .heading-menu:not(.color-menu) button {
    gap: 14px;
    width: 100%;
    min-height: 52px;
    height: auto;
    padding: 0 14px;
    border-radius: 14px;
    color: var(--text);
    font-size: 16px;
  }
  body.is-android-app .app-shell .ios-editor-toolbar .heading-menu:not(.color-menu) button:active { background: var(--android-press); }
  body.is-android-app .app-shell .ios-editor-toolbar .heading-menu:not(.color-menu) button span { width: 30px; color: var(--accent); font-weight: 700; }
  body.is-android-app .app-shell .ios-editor-toolbar .color-menu { padding: 6px 10px 12px; }
  body.is-android-app .app-shell .ios-editor-toolbar .color-menu .color-menu-label { margin: 12px 6px 6px; font-size: 13px; font-weight: 600; letter-spacing: .02em; }
  body.is-android-app .app-shell .ios-editor-toolbar .color-menu .color-options:not(.is-hidden) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
  body.is-android-app .app-shell .ios-editor-toolbar .color-menu .color-option { display: flex; justify-content: flex-start; gap: 12px; width: 100%; height: auto; min-width: 0; min-height: 48px; padding: 6px 10px; border-radius: 12px; font-size: 15px; }
  body.is-android-app .app-shell .ios-editor-toolbar .color-menu .color-option:active { background: var(--android-press); }
  body.is-android-app .app-shell .ios-editor-toolbar .color-menu .color-option .color-option-preview { width: 32px; height: 32px; border-radius: 9px; font-size: 17px; }
  body.is-android-app .app-shell .ios-editor-toolbar .color-menu .color-option .color-option-label { width: auto; min-width: 0; overflow: hidden; font-size: 15px; white-space: nowrap; text-overflow: ellipsis; }
  /* 颜色面板打开时收起选区浮条，避免两层叠在一起。 */
  body.is-android-app .app-shell .ios-editor-toolbar:has(#color-menu:not(.is-hidden)) .android-selection-bar { display: none; }
  body.is-android-app .app-shell .ios-editor-toolbar .color-menu .color-option .color-option-shortcut { display: none; }

  /* --- 选中文字后的格式条：贴在格式条正上方 --------------------------- */
  body.is-android-app .app-shell .ios-editor-toolbar .selection-bubble {
    position: absolute;
    z-index: 6;
    top: auto;
    left: calc(var(--safe-left) + 10px);
    right: calc(var(--safe-right) + 10px);
    bottom: calc(100% + 8px);
    display: flex;
    align-items: center;
    gap: 2px;
    height: 54px;
    padding: 4px 6px;
    border: 1px solid var(--ios-sep);
    border-radius: 18px;
    background: var(--ios-sheet-bg);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .16);
    animation: ios-sheet-in .18s cubic-bezier(.32, .72, 0, 1);
  }
  body.is-android-app .app-shell .ios-editor-toolbar .selection-bubble button {
    display: inline-grid;
    place-items: center;
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--text);
  }
  body.is-android-app .app-shell .ios-editor-toolbar .selection-bubble button:active { background: var(--android-press); }
  body.is-android-app .app-shell .ios-editor-toolbar .selection-bar-divider { flex: 0 0 auto; width: 1px; height: 24px; background: var(--line); }
  body.is-android-app .app-shell .ios-editor-toolbar .selection-bar-text { padding: 0 4px; font-size: 18px; font-weight: 700; line-height: 1.3; }
  body.is-android-app .app-shell .ios-editor-toolbar .selection-bar-color .selection-bar-text { color: var(--swatch, var(--text)); box-shadow: inset 0 -3px var(--swatch, var(--text-faint)); }
  body.is-android-app .app-shell .ios-editor-toolbar .selection-bar-bg .selection-bar-text { border-radius: 5px; background: color-mix(in srgb, var(--swatch, #dfab01) 34%, transparent); }
  body.is-android-app .android-selection-bar [data-name="gray"] { --swatch: #8b8b8b; }
  body.is-android-app .android-selection-bar [data-name="brown"] { --swatch: #9b6b4a; }
  body.is-android-app .android-selection-bar [data-name="orange"] { --swatch: #d9730d; }
  body.is-android-app .android-selection-bar [data-name="yellow"] { --swatch: #dfab01; }
  body.is-android-app .android-selection-bar [data-name="green"] { --swatch: #2f8f62; }
  body.is-android-app .android-selection-bar [data-name="blue"] { --swatch: #337ea9; }
  body.is-android-app .android-selection-bar [data-name="purple"] { --swatch: #9065b0; }
  body.is-android-app .android-selection-bar [data-name="pink"] { --swatch: #c14c8a; }
  body.is-android-app .android-selection-bar [data-name="red"] { --swatch: #d44c47; }

  /* --- 代码块复制按钮（常驻，跟着内容滚）------------------------------- */
  body.is-android-app .android-code-layer { position: absolute; z-index: 3; top: 0; left: 0; width: 0; height: 0; }
  body.is-android-app .android-code-copy {
    position: absolute;
    min-width: 56px;
    height: 30px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 15px;
    background: var(--ios-sheet-bg);
    color: var(--text-muted);
    font-size: 12.5px;
    transform: translateX(-100%);
  }
  /* 视觉 30px，触控区向四周再扩 8px，凑够 44px 以上。 */
  body.is-android-app .android-code-copy::before { content: ""; position: absolute; inset: -8px; }
  body.is-android-app .android-code-copy:active { background: var(--hover); }
  body.is-android-app .android-code-copy.is-done { border-color: color-mix(in srgb, var(--accent) 46%, transparent); color: var(--accent); }

  /* --- 图片块：点一下出操作条（左 / 中 / 右 + 四档宽度）---------------- */
  body.is-android-app .note-image .note-image-bar { display: none; }
  body.is-android-app .note-image.is-touch-active .note-image-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
    max-width: calc(100% - 16px);
    padding: 4px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--ios-sheet-bg);
    box-shadow: 0 6px 20px rgba(0, 0, 0, .14);
  }
  body.is-android-app .note-image .note-image-align { width: auto; min-width: 38px; height: 36px; padding: 0 6px; border-radius: 9px; color: var(--text); font-size: 13px; }
  body.is-android-app .note-image .note-image-align:active { background: var(--android-press); }
  body.is-android-app .note-image[data-align="left"] [data-image-align="left"],
  body.is-android-app .note-image[data-align="center"] [data-image-align="center"],
  body.is-android-app .note-image[data-align="right"] [data-image-align="right"],
  body.is-android-app .note-image[data-width="40"] [data-image-width="40"],
  body.is-android-app .note-image[data-width="60"] [data-image-width="60"],
  body.is-android-app .note-image[data-width="80"] [data-image-width="80"],
  body.is-android-app .note-image[data-width="100"] [data-image-width="100"] { background: var(--active); color: var(--accent); }
  body.is-android-app .note-image .note-image-divider { width: 1px; height: 20px; margin: 0 3px; background: var(--line); }
  body.is-android-app .note-image .note-image-resize { opacity: 0; pointer-events: none; }
  body.is-android-app .note-image.is-touch-active .note-image-resize {
    top: 50%;
    right: -11px;
    width: 22px;
    height: 58px;
    border: 3px solid var(--editor-bg);
    opacity: .95;
    pointer-events: auto;
    touch-action: none;
    transform: translateY(-50%);
  }
  body.is-android-app .note-image.is-touch-active img { outline: 2px solid color-mix(in srgb, var(--accent) 60%, transparent); outline-offset: 2px; }

  /* --- 长按 / 更多：底部 Action Sheet --------------------------------- */
  body.is-android-app .note-context-menu:not(.is-hidden),
  body.is-android-app .calendar-popover {
    border: 1px solid var(--ios-sep);
    border-radius: 22px;
    background: var(--ios-sheet-bg);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  body.is-android-app .note-context-menu:not(.is-hidden) { padding: 6px 0 0; }
  body.is-android-app .note-context-menu > button {
    justify-content: flex-start;
    gap: 14px;
    min-height: 52px;
    padding: 0 20px;
    color: var(--text);
    font-size: 16px;
  }
  body.is-android-app .note-context-menu > button + button { box-shadow: none; }
  body.is-android-app .note-context-menu > button:active { background: var(--android-press); }
  body.is-android-app .note-context-menu > button.danger { color: var(--ios-red); }
  body.is-android-app .note-context-menu > button.is-current { color: var(--accent); font-weight: 600; }
  body.is-android-app .note-context-menu .menu-icon-slot { width: 20px; height: 20px; color: var(--accent); }
  body.is-android-app .note-context-menu > button.danger .menu-icon-slot { color: var(--ios-red); }
  body.is-android-app .note-context-menu .menu-icon-slot svg { width: 20px; height: 20px; }
  body.is-android-app .note-context-menu .context-divider { margin: 4px 20px; background: var(--ios-sep); }
  body.is-android-app .note-context-menu > .sheet-cancel {
    justify-content: center;
    min-height: 54px;
    margin-top: 2px;
    background: var(--ios-field);
    color: var(--text);
    font-weight: 600;
  }
  body.is-android-app .note-context-menu .context-submenu > button { min-height: 48px; padding-left: 54px; font-size: 15px; }

  /* --- 弹层：底部抽屉 + 抓手 ------------------------------------------- */
  body.is-android-app .modal-backdrop { background: rgba(0, 0, 0, .36); }
  body.is-android-app .modal-card {
    border: 0;
    border-radius: 24px 24px 0 0;
    background: var(--ios-sheet-bg);
    max-height: calc(100vh - var(--safe-top) - 16px);
    padding: 12px calc(var(--safe-right) + 20px) calc(var(--safe-bottom) + 22px) calc(var(--safe-left) + 20px);
    box-shadow: 0 -12px 44px rgba(0, 0, 0, .18);
  }
  body.is-android-app .modal-card::before {
    content: "";
    display: block;
    width: 36px;
    height: 4px;
    margin: 0 auto 14px;
    border-radius: 2px;
    background: var(--line);
  }
  body.is-android-app .modal-card .primary-button,
  body.is-android-app .modal-card .secondary-button,
  body.is-android-app .modal-card .danger-button { min-height: 48px; border-radius: 14px; font-size: 16px; }
  body.is-android-app .lock-screen { background: var(--ios-list-bg); }

  /* --- 0.10.13 首页改版：快捷入口 / 最近编辑 / 圆形 + / 网格 / 长按多选 ---------- */
  body.is-android-app .app-shell .folders-screen .ios-nav-actions { display: flex; align-items: center; gap: 2px; justify-self: end; }
  body.is-android-app .app-shell .android-home-chips {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 0 calc(var(--safe-right) + 16px) 16px calc(var(--safe-left) + 16px);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  body.is-android-app .app-shell .android-home-chips::-webkit-scrollbar { display: none; }
  body.is-android-app .app-shell .android-chip {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 0 14px 0 12px;
    border: 1px solid var(--ios-sep);
    border-radius: 22px;
    background: var(--ios-sheet-bg);
    color: var(--text);
    font-size: 14px;
    font-weight: 560;
    white-space: nowrap;
    transition: background .12s linear, transform .12s ease;
  }
  body.is-android-app .app-shell .android-chip svg { color: var(--accent); }
  body.is-android-app .app-shell .android-chip-count { color: var(--text-faint); font-size: 12.5px; font-variant-numeric: tabular-nums; }
  body.is-android-app .app-shell .android-chip:active { background: var(--android-press); transform: scale(.97); }
  body.is-android-app .app-shell .android-chip.is-active {
    border-color: transparent;
    background: color-mix(in srgb, var(--accent) 15%, var(--ios-sheet-bg));
    color: var(--accent);
  }
  body.is-android-app .app-shell .android-chip.is-active .android-chip-count { color: var(--accent); }
  body.is-android-app .app-shell .android-home-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 calc(var(--safe-right) + 8px) 2px calc(var(--safe-left) + 22px);
  }
  body.is-android-app .app-shell .android-home-title { margin: 0; color: var(--text-faint); font-size: 13px; font-weight: 600; letter-spacing: .02em; }
  body.is-android-app .app-shell .android-home-view { width: 44px; height: 44px; color: var(--text-soft, var(--text)); }
  body.is-android-app .app-shell .android-home-notes {
    padding: 4px calc(var(--safe-right) + 16px) calc(var(--safe-bottom) + 112px) calc(var(--safe-left) + 16px);
  }
  body.is-android-app .app-shell .android-home-notes .ios-group-title:first-child { padding-top: 4px; }
  body.is-android-app .app-shell .android-home-more {
    display: block;
    width: 100%;
    min-height: 48px;
    margin: 0 0 12px;
    border: 0;
    border-radius: 14px;
    background: var(--ios-sheet-bg);
    color: var(--accent);
    font-size: 15px;
    font-weight: 600;
  }
  body.is-android-app .app-shell .android-folder-sheet { max-height: min(72vh, 620px); overflow-y: auto; }
  body.is-android-app .app-shell #home-notes .ios-swipe.is-current .ios-note-row { background: var(--active); box-shadow: inset 3px 0 var(--accent); }
  body.is-android-app .app-shell #home-notes .ios-swipe.is-current .ios-note-title { color: var(--text); }
  body.is-android-app .calendar-popover:not(.is-hidden) { z-index: 60; box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .34), 0 20px 54px rgba(0, 0, 0, .3); }

  /* 圆形 +（56dp，HyperOS / Material 的主操作按钮）。一点即新建，长按出「新建」菜单。 */
  body.is-android-app .app-shell #home-new-note-button.android-fab,
  body.is-android-app .app-shell #notes-new-note-button.android-fab {
    position: absolute;
    right: calc(var(--safe-right) + 18px);
    bottom: calc(var(--safe-bottom) + 22px);
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    min-height: 58px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--accent);
    color: var(--accent-ink);
    box-shadow: 0 10px 24px color-mix(in srgb, var(--accent) 34%, rgba(0, 0, 0, .14)), 0 2px 6px rgba(0, 0, 0, .12);
    pointer-events: auto;
    -webkit-touch-callout: none;
    transition: transform .12s ease, box-shadow .12s ease;
  }
  body.is-android-app .app-shell #home-new-note-button.android-fab::before,
  body.is-android-app .app-shell #notes-new-note-button.android-fab::before { content: none; }
  body.is-android-app .app-shell #home-new-note-button.android-fab:active,
  body.is-android-app .app-shell #notes-new-note-button.android-fab:active { transform: scale(.93); opacity: 1; }
  body.is-android-app.is-keyboard-open .app-shell #home-new-note-button,
  body.is-android-app .app-shell.is-android-selecting #home-new-note-button,
  body.is-android-app .app-shell.is-android-selecting #notes-new-note-button,
  body.is-android-app .app-shell.android-trash-mode #notes-new-note-button { display: none; }

  /* 从首页直接进编辑器：返回时露出来的是首页，不是笔记列表。 */
  body.is-android-app .app-shell.apple-screen-editor.apple-editor-from-home > .note-list {
    transform: translateX(100%);
    opacity: 0;
    visibility: hidden;
    transition: transform .34s cubic-bezier(.32, .72, 0, 1), opacity .22s linear, visibility 0s linear .34s;
  }
  body.is-android-app .app-shell.apple-screen-editor.apple-editor-from-home > .folders-screen {
    transform: translateX(-26%);
    opacity: .68;
    visibility: visible;
    transition: transform .34s cubic-bezier(.32, .72, 0, 1), opacity .34s linear;
  }

  /* 网格视图（Keep 式两列卡片）。 */
  body.is-android-app.android-notes-grid .app-shell .ios-group-card {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(156px, 1fr));
    gap: 10px;
    overflow: visible;
    border-radius: 0;
    background: transparent;
  }
  body.is-android-app.android-notes-grid .app-shell .ios-group-card > .ios-swipe { overflow: hidden; border-radius: 16px; background: var(--ios-sheet-bg); }
  body.is-android-app.android-notes-grid .app-shell .ios-swipe-bg,
  body.is-android-app.android-notes-grid .app-shell .ios-note-row .ios-row-chevron,
  body.is-android-app.android-notes-grid .app-shell .ios-note-row::after { display: none; }
  body.is-android-app.android-notes-grid .app-shell .ios-note-row {
    position: relative;
    align-items: flex-start;
    height: 100%;
    min-height: 132px;
    padding: 14px 14px 12px;
  }
  body.is-android-app.android-notes-grid .app-shell .ios-note-row .ios-row-main { width: 100%; }
  body.is-android-app.android-notes-grid .app-shell .ios-note-title,
  body.is-android-app.android-notes-grid .app-shell .ios-note-sub {
    display: -webkit-box;
    overflow: hidden;
    white-space: normal;
    -webkit-box-orient: vertical;
  }
  body.is-android-app.android-notes-grid .app-shell .ios-note-title { -webkit-line-clamp: 2; }
  body.is-android-app.android-notes-grid .app-shell .ios-note-sub { margin-top: 4px; -webkit-line-clamp: 5; line-height: 1.5; }
  body.is-android-app.android-notes-grid .app-shell .ios-note-meta { margin-top: 8px; }

  /* 长按多选：顶部「已选 N 项」+ 底部操作条（置顶 / 移动 / 删除 / 更多）。 */
  body.is-android-app .app-shell .android-select-tick { display: none; }
  body.is-android-app .app-shell.is-android-selecting .android-select-tick {
    display: inline-grid;
    flex: none;
    place-items: center;
    width: 24px;
    height: 24px;
    border: 1.6px solid color-mix(in srgb, var(--text-faint) 80%, transparent);
    border-radius: 50%;
    color: transparent;
  }
  body.is-android-app .app-shell.is-android-selecting .ios-swipe.is-selected .android-select-tick { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); }
  body.is-android-app .app-shell.is-android-selecting .ios-note-row .ios-row-chevron { display: none; }
  body.is-android-app .app-shell.is-android-selecting .ios-swipe.is-selected .ios-note-row { background: color-mix(in srgb, var(--accent) 10%, var(--ios-sheet-bg)); }
  body.is-android-app.android-notes-grid .app-shell.is-android-selecting .android-select-tick { position: absolute; top: 10px; right: 10px; }
  body.is-android-app .app-shell .android-select-head,
  body.is-android-app .app-shell .android-select-bar { display: none; }
  body.is-android-app .app-shell.is-android-selecting .android-select-head {
    position: absolute;
    z-index: 30;
    top: 0;
    left: 0;
    right: 0;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    align-items: center;
    min-height: calc(var(--safe-top) + 58px);
    padding: var(--safe-top) calc(var(--safe-right) + 8px) 0 calc(var(--safe-left) + 6px);
    background: var(--ios-list-bg);
    animation: ios-sheet-in .18s cubic-bezier(.32, .72, 0, 1);
  }
  body.is-android-app .app-shell .android-select-cancel { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; color: var(--text); }
  body.is-android-app .app-shell .android-select-cancel:active,
  body.is-android-app .app-shell .android-select-all:active { background: var(--android-press); }
  body.is-android-app .app-shell .android-select-count { padding-left: 4px; font-size: 18px; font-weight: 650; letter-spacing: -.02em; }
  body.is-android-app .app-shell .android-select-all { min-height: 44px; padding: 0 14px; border: 0; border-radius: 22px; background: transparent; color: var(--accent); font-size: 15px; font-weight: 600; }
  body.is-android-app .app-shell.is-android-selecting .android-select-bar {
    position: absolute;
    z-index: 30;
    left: calc(var(--safe-left) + 12px);
    right: calc(var(--safe-right) + 12px);
    bottom: calc(var(--safe-bottom) + 12px);
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
    padding: 6px;
    border-radius: 22px;
    background: var(--ios-sheet-bg);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .16), 0 0 0 1px var(--ios-sep);
    animation: ios-sheet-in .2s cubic-bezier(.32, .72, 0, 1);
  }
  body.is-android-app .app-shell .android-select-bar button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: 58px;
    border: 0;
    border-radius: 16px;
    background: transparent;
    color: var(--text);
    font-size: 12px;
    font-weight: 560;
  }
  body.is-android-app .app-shell .android-select-bar button:active { background: var(--android-press); }
  body.is-android-app .app-shell .android-select-bar button.is-danger { color: var(--ios-red, #c64b52); }
  body.is-android-app .app-shell .android-select-bar button:disabled { opacity: .36; }
}

/* ── 购物清单（ToBuy List）───────────────────────────────────────────────
   门控：只有当前空间 kind === "shopping" 时 #buy-panel 才显示（否则整块 is-hidden），
   普通空间与安卓端完全不受影响。
   字号纪律：所有"内容"字号都走 --note-font-size（与笔记正文一致）；
   只有状态徽章 / 标签 / 小标题这类外壳文字用 10px 级。
   ⚠️ 全局那条 input 规则是 (0,5,1) 特异度，普通类选择器压不过，所以这里用 #buy-panel 打头。 */
/* ⚠️ 这里**不能**再加 border-top：.note-title 自己有一条 border-bottom，
   紧挨着再来一条就成了"标题下两条线"（用户实测截图反馈）。
   字段区与正文之间改用一条更淡的收尾线 + 留白来分区。 */
#buy-panel { flex: 0 0 auto; margin: 0 0 2px; padding: 6px 2px 14px; border-bottom: 1px solid var(--line-soft); }

/* ── 状态卡：一眼看清「现在能不能下手」─────────────────────────────────
   上半句是人话结论（红绿灯语义色灯 + 状态名 + 倒计时/实付摘要），
   下半句是六步生命线（当前步发光、走过的步实心、没到的是空心圈）。
   颜色一律走变量：绿=可以下手/已到手，琥珀=待买/冷静中，红=逾期，灰=候选/放弃。 */
.buy-statebar { --tone: var(--text-faint); display: grid; gap: 11px; margin: 0 0 15px; padding: 11px 13px 10px; border: 1px solid var(--line); border-radius: 12px; background: color-mix(in srgb, var(--panel-raised) 70%, transparent); }
.buy-status-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.buy-lamp { flex: 0 0 auto; width: 10px; height: 10px; border-radius: 99px; background: var(--tone); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tone) 22%, transparent); }
.buy-lamp.is-pulse { animation: buy-lamp-pulse 2.1s ease-in-out infinite; }
@keyframes buy-lamp-pulse {
  0%, 100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--tone) 22%, transparent); }
  50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--tone) 7%, transparent); }
}
.buy-status-name { flex: 0 0 auto; color: var(--text); font-size: var(--note-font-size); font-weight: 650; letter-spacing: -.01em; }
.buy-status-meta { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-muted); font-size: 11px; }
.buy-status-tail { flex: 0 0 auto; margin-left: auto; color: var(--text-faint); font-size: 10.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.buy-status-tail b { color: var(--text); font-weight: 650; }
.buy-status-tail .buy-low { color: var(--accent); }

/* 生命线本身：6 等分栅格，圆点用 ::before，连接线用 ::after（上一格中心 → 本格中心）。
   圆点必须 z-index 抬高，否则绝对定位的连接线会盖在它上面。 */
.buy-rail { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.buy-rail button { position: relative; display: grid; justify-items: center; gap: 5px; min-width: 0; height: auto; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--text-faint); font-size: 10px; line-height: 1.2; white-space: nowrap; }
.buy-rail button::before { content: ""; position: relative; z-index: 1; width: 9px; height: 9px; border-radius: 99px; background: var(--editor-bg); box-shadow: inset 0 0 0 1.5px var(--line); transition: background .16s, box-shadow .16s; }
.buy-rail button:not(:first-child)::after { content: ""; position: absolute; top: 4px; right: 50%; width: 100%; height: 1px; background: var(--line); }
.buy-rail button:hover { color: var(--text-muted); }
.buy-rail button:hover::before { box-shadow: inset 0 0 0 1.5px var(--text-faint); }
.buy-rail button.is-done::before { background: var(--line); box-shadow: inset 0 0 0 1.5px transparent; }
.buy-rail button.is-done { color: var(--text-muted); }
.buy-rail button.is-on { color: var(--text); font-weight: 650; }
.buy-rail button.is-on::before { background: var(--tone); box-shadow: 0 0 0 3.5px color-mix(in srgb, var(--tone) 22%, transparent); }
.buy-rail button:disabled { cursor: default; }
/* 状态卡整体色调由 data-tone 决定，避免在 JS 里拼颜色字符串 */
.buy-statebar[data-tone="idle"] { --tone: var(--text-faint); }
.buy-statebar[data-tone="wait"] { --tone: var(--buy-wait); }
.buy-statebar[data-tone="live"] { --tone: var(--accent); }
.buy-statebar[data-tone="go"] { --tone: var(--buy-go); }
.buy-statebar[data-tone="stop"] { --tone: var(--danger); }

.buy-section { margin: 0 0 14px; }
.buy-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.buy-section-head h3 { margin: 0; color: var(--text); font-size: 11px; font-weight: 700; letter-spacing: .13em; }
.buy-section-head small { color: var(--text-faint); font-size: 10px; }

.buy-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px 18px; }
.buy-field { display: grid; gap: 2px; min-width: 0; }
.buy-field > span { color: var(--text-faint); font-size: calc(var(--note-font-size) - 2px); letter-spacing: .05em; }
.buy-field.is-wide { grid-column: 1 / -1; }
.buy-field.is-derived > span::after { content: " · 自动"; font-size: 9px; }
#buy-panel .buy-field input, #buy-panel .buy-field select, #buy-panel .buy-field textarea { width: 100%; height: 28px; padding: 2px 0 4px; border: 0; border-bottom: 1px solid var(--line-soft); border-radius: 0; background: transparent; color: var(--text); font-size: var(--note-font-size); line-height: 1.25; outline: none; }
#buy-panel .buy-field textarea { height: auto; min-height: 44px; resize: none; line-height: 1.6; }
#buy-panel .buy-field input:focus, #buy-panel .buy-field select:focus, #buy-panel .buy-field textarea:focus { border-bottom-color: var(--accent); }
#buy-panel .buy-field input[readonly] { color: var(--accent); font-weight: 650; }
.buy-money { font-variant-numeric: tabular-nums; letter-spacing: -.01em; }

.buy-table { width: 100%; border-collapse: collapse; font-size: var(--note-font-size); }
.buy-table th { padding: 0 6px 5px; color: var(--text-faint); font-size: 10px; font-weight: 500; text-align: left; letter-spacing: .05em; }
.buy-table td { padding: 6px; border-top: 1px solid var(--line-soft); color: var(--text-muted); vertical-align: middle; }
.buy-table tr.is-chosen td { background: color-mix(in srgb, var(--accent) 9%, transparent); color: var(--text); }
.buy-cell-name { color: var(--text); font-weight: 600; }
.buy-cell-num { white-space: nowrap; font-variant-numeric: tabular-nums; }
.buy-row-actions { display: flex; gap: 4px; justify-content: flex-end; }

.buy-pill { display: inline-flex; align-items: center; gap: 4px; height: 18px; padding: 0 6px; border-radius: 99px; background: var(--panel-soft); color: var(--text-muted); font-size: 9.5px; white-space: nowrap; }
.buy-pill.is-chosen { background: color-mix(in srgb, var(--accent) 20%, transparent); color: var(--accent); font-weight: 650; }
.buy-low { color: var(--accent); font-weight: 650; }
.buy-text-button { border: 0; border-radius: 6px; background: transparent; color: var(--text-muted); padding: 3px 7px; font-size: 11px; }
.buy-text-button:hover { background: var(--panel-soft); color: var(--text); }
.buy-text-button.is-primary { color: var(--accent); }
.buy-text-button.danger { color: var(--danger); }

.buy-quick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; padding: 9px 11px; border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent); border-radius: 10px; background: color-mix(in srgb, var(--accent) 8%, transparent); }
.buy-quick > strong { color: var(--accent); font-size: 11px; font-weight: 650; }
.buy-quick .buy-quick-hint { flex-basis: 100%; color: var(--text-faint); font-size: 10px; }
#buy-panel .buy-quick input, #buy-panel .buy-quick select { width: auto; height: 28px; padding: 5px 8px; border: 1px solid var(--line); border-radius: 7px; background: var(--field-bg); color: var(--text); font-size: var(--note-font-size); }
#buy-panel .buy-quick input:focus, #buy-panel .buy-quick select:focus { border-color: var(--accent); outline: none; }
#buy-panel .buy-quick input.buy-quick-price { width: 88px; }
#buy-panel .buy-quick input.buy-quick-note { flex: 1; min-width: 120px; }

.buy-log { display: grid; gap: 2px; margin-top: 6px; }
/* 五列：日期 / 渠道 / 价格 / 备注 / 删除。少一列删除按钮就会掉到下一行（实测过） */
.buy-log-row { display: grid; grid-template-columns: 58px minmax(90px, auto) auto 1fr auto; align-items: center; gap: 8px; padding: 5px 2px; border-top: 1px solid var(--line-soft); color: var(--text-muted); font-size: var(--note-font-size); }
.buy-log-row.is-low { color: var(--text); }
.buy-log-note { color: var(--text-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.buy-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.buy-tag { border: 1px solid var(--line); border-radius: 99px; background: transparent; color: var(--text-muted); height: 22px; padding: 0 9px; font-size: 10.5px; }
.buy-tag:hover { border-color: var(--accent); color: var(--accent); }
.buy-tag.is-on { border-color: color-mix(in srgb, var(--accent) 50%, transparent); background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }

/* 中栏：物品卡片（容器仍是 .note-item，所以拖动排序 / 选中态 / 隐私模糊全部复用） */
.buy-badge { display: inline-flex; align-items: center; gap: 4px; height: 17px; padding: 0 6px; border-radius: 99px; border: 1px solid var(--line); background: var(--panel-soft); color: var(--text-muted); font-size: 9.5px; font-weight: 650; white-space: nowrap; }
.buy-badge.is-due { border-color: color-mix(in srgb, var(--danger) 46%, transparent); background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); }
.buy-badge.is-live { border-color: color-mix(in srgb, var(--accent) 40%, transparent); background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); }
.buy-badge.is-go { border-color: color-mix(in srgb, var(--buy-go) 44%, transparent); background: color-mix(in srgb, var(--buy-go) 14%, transparent); color: var(--buy-go); }
.buy-badge.is-done { opacity: .72; }
.buy-card-line { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.buy-card-meta { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-faint); font-size: 10.5px; font-variant-numeric: tabular-nums; }
.buy-card-meta b { color: var(--text-muted); font-weight: 600; }
.buy-section-label { margin: 10px 0 5px; padding: 0 2px; color: var(--text-faint); font-size: 10px; letter-spacing: .12em; }
.buy-section-label.is-due { color: var(--danger); }
.buy-section-label.is-ready { color: var(--buy-go); }
.buy-alert { display: flex; align-items: center; gap: 8px; width: 100%; margin-bottom: 4px; padding: 7px 10px; border: 1px solid color-mix(in srgb, var(--danger) 40%, transparent); border-radius: 9px; background: color-mix(in srgb, var(--danger) 10%, transparent); color: var(--text); font-size: 11.5px; text-align: left; }
.buy-alert:hover { background: color-mix(in srgb, var(--danger) 17%, transparent); }
.buy-alert b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.buy-alert span { flex: 0 0 auto; color: var(--danger); font-size: 10.5px; font-weight: 650; }
.buy-alert.is-overdue { border-color: color-mix(in srgb, var(--danger) 26%, transparent); background: color-mix(in srgb, var(--danger) 6%, transparent); }
/* 价格到位的那条用绿灯：和"冷静期到点"是两种不同性质的动作信号 */
.buy-alert.is-ready { border-color: color-mix(in srgb, var(--buy-go) 42%, transparent); background: color-mix(in srgb, var(--buy-go) 10%, transparent); }
.buy-alert.is-ready:hover { background: color-mix(in srgb, var(--buy-go) 18%, transparent); }
.buy-alert.is-ready span { color: var(--buy-go); }
.buy-filterbar { display: flex; flex-wrap: wrap; gap: 5px; padding: 0 17px 8px; }
.buy-hint { margin: 0 17px 8px; color: var(--text-faint); font-size: 10px; line-height: 1.6; }

/* ── 价格走势迷你图（内联 SVG，零依赖）────────────────────────────────
   viewBox 用 preserveAspectRatio="none" 横向拉伸，所以只允许画线/路径 ——
   圆会被拉成椭圆。描边用 vector-effect:non-scaling-stroke 保持 1.6px 不回弹变形。 */
.buy-trend { display: grid; gap: 5px; margin: 10px 0 2px; }
.buy-trend svg { display: block; width: 100%; height: 44px; overflow: visible; }
.buy-spark-line { fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.buy-spark-area { fill: color-mix(in srgb, var(--accent) 13%, transparent); stroke: none; }
.buy-spark-mark { stroke-width: 1.4; stroke-dasharray: 2 3; vector-effect: non-scaling-stroke; }
.buy-spark-mark.is-low { stroke: var(--buy-go); }
.buy-spark-mark.is-last { stroke: var(--text-faint); }
.buy-spark-mark.is-expected { stroke: var(--accent); stroke-dasharray: 3 3; opacity: .78; }
.buy-trend-foot { display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 8px; color: var(--text-faint); font-size: 10px; font-variant-numeric: tabular-nums; }
/* 每个片段整体换行，不然窄屏上会出现「近 5 笔全新 / 价」这种把词切开的断行 */
.buy-trend-foot > span { white-space: nowrap; }
.buy-trend-foot b { color: var(--text-muted); font-weight: 600; }
.buy-trend-foot .buy-low { color: var(--buy-go); }

/* 成交（已下单 / 已到手才会出现）。之前只写不显示：spent 记下来了，界面上却看不到。 */
.buy-spent-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 9px 11px; border: 1px solid color-mix(in srgb, var(--buy-go) 34%, transparent); border-radius: 10px; background: color-mix(in srgb, var(--buy-go) 9%, transparent); }
/* 状态已经回到"候选/冷静中"、只是留着一条历史实付时，别再用"已成交"的绿色。 */
.buy-spent-row.is-plain { border-color: var(--line); background: transparent; }
.buy-spent-row.is-plain > strong { color: var(--text-muted); }
.buy-spent-row > strong { color: var(--buy-go); font-size: 11px; font-weight: 650; }
#buy-panel .buy-spent-row input, #buy-panel .buy-spent-row select { width: auto; height: 28px; padding: 5px 8px; border: 1px solid var(--line); border-radius: 7px; background: var(--field-bg); color: var(--text); font-size: var(--note-font-size); }
#buy-panel .buy-spent-row input { width: 104px; }
#buy-panel .buy-spent-row input:focus, #buy-panel .buy-spent-row select:focus { border-color: var(--buy-go); outline: none; }
.buy-spent-diff { color: var(--text-muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.buy-spent-diff b { color: var(--buy-go); font-weight: 650; }
.buy-spent-diff.is-over b { color: var(--danger); }

/* 编辑区窄到一定程度，两列字段会挤成"每列一半都放不下标签"，直接单列。 */
@media (max-width: 720px) {
  .buy-fields { grid-template-columns: minmax(0, 1fr); }
  .buy-rail button { font-size: 9.5px; }
}
/* 购物空间的空间圆点做个区分（不看名字也能认出来） */
.space-item[data-space-kind="shopping"] .space-dot { background: transparent; box-shadow: inset 0 0 0 1.6px var(--accent); }


/* 0.10.4：Tab 缩进必须看得见。pre-wrap 不在安卓指纹属性里，桌面/网页一起生效。 */
.editor-content { white-space: pre-wrap; tab-size: 2; }
.editor-content [data-indent="1"] { margin-left: 1.6em; }
.editor-content [data-indent="2"] { margin-left: 3.2em; }
.editor-content [data-indent="3"] { margin-left: 4.8em; }
.editor-content [data-indent="4"] { margin-left: 6.4em; }
.editor-content [data-indent="5"] { margin-left: 8em; }
.editor-content [data-indent="6"] { margin-left: 9.6em; }
.editor-content ::selection { background: color-mix(in srgb, var(--accent) 32%, transparent); }

/* 桌面视觉收一档：标题层级、折叠块、分栏分隔。全部挂在 is-native-app，避免碰安卓指纹。
   0.10.12：这里原来把原生端的 h1/h2/h3 放大到 2em/1.5em/1.2em（正文 12px 时 h1 = 24px），
   结果正文里的一级标题比「文章标题」还大 —— 层级是反的。现在原生端与网页端共用
   同一套字号阶梯（标题 +4 / h1 +2 / h2 +1 / h3 +0），这里只保留字距、行高与段距的差别。
   ⚠️ 改这一段要同时在浏览器里给 body 加 is-native-app 实测，普通 verify 套件跑的是网页路径，
   看不到原生端的样式。 */
body.is-native-app .note-title { font-weight: 680; letter-spacing: -.034em; border-bottom-color: transparent; padding-top: 8px; }
body.is-native-app .note-title:focus { border-bottom-color: var(--line); }
body.is-native-app .editor-content h1,
body.is-native-app .editor-content h2,
body.is-native-app .editor-content h3 { letter-spacing: -.02em; line-height: 1.34; }
body.is-native-app .editor-content h1 { margin: .9em 0 .4em; }
body.is-native-app .editor-content h2 { margin: .85em 0 .35em; }
body.is-native-app .editor-content h3 { margin: .8em 0 .3em; }
body.is-native-app .editor-content { padding-top: 8px; }
body.is-native-app .editor-content blockquote { border-left-width: 3px; border-radius: 0 8px 8px 0; background: color-mix(in srgb, var(--accent) 7%, transparent); padding: 6px 12px 6px 14px; }
body.is-native-app .fold-block { border: 1px solid var(--line-soft); border-radius: 12px; padding: 8px 12px 10px; background: color-mix(in srgb, var(--panel) 62%, transparent); }
body.is-native-app .fold-block summary { font-weight: 650; }
body.is-native-app .editor-content .note-columns { gap: 6px 0; }
body.is-native-app .editor-content .note-col + .note-col { border-left: 1px solid var(--line-soft); padding-left: 18px; margin-left: 8px; }
body.is-native-app .toolbar { border-radius: 10px; }
body.is-native-app .editor-footer { letter-spacing: .01em; }

/* 0.10.5 Notion 式图片块、文字色 / 背景色、提示块 */
.note-image { position: relative; margin: 8px 0 14px; width: 100%; max-width: 100%; }
.note-image[data-width="100"] { width: 100%; }
.note-image[data-align="left"] { margin-right: auto; }
.note-image[data-align="center"] { margin-left: auto; margin-right: auto; }
.note-image[data-align="right"] { margin-left: auto; }
.note-image img { display: block; width: 100%; height: auto; border-radius: 10px; }
.note-image figcaption { min-height: 1.4em; margin-top: 6px; color: var(--text-faint); font-size: .86em; text-align: center; outline: none; }
.note-image figcaption:empty::before { content: "添加说明"; }
.note-image-bar { position: absolute; top: 8px; left: 8px; display: none; gap: 4px; padding: 4px; border-radius: 8px; background: color-mix(in srgb, var(--panel-raised) 92%, transparent); }
.note-image:hover .note-image-bar, .note-image:focus-within .note-image-bar { display: flex; }
.note-image-align, .note-image-resize { border: 0; background: transparent; color: var(--text-muted); }
.note-image-align { width: 26px; height: 24px; border-radius: 6px; font-size: 11px; }
.note-image-align:hover { background: var(--panel-soft); color: var(--text); }
.note-image-resize { position: absolute; top: 18px; right: -7px; width: 10px; height: 42px; border-radius: 99px; background: var(--accent); cursor: ew-resize; opacity: 0; }
.note-image:hover .note-image-resize { opacity: .85; }
.note-image[data-width="24"] { width: 24%; }
.note-image[data-width="40"] { width: 40%; }
.note-image[data-width="60"] { width: 60%; }
.note-image[data-width="80"] { width: 80%; }
.note-image[data-width="100"] { width: 100%; }
/* ⚠️ `.color-swatch` 现在只剩两个使用者：编辑器右键菜单的颜色行（addEditorColorRow）
   和选中文字后浮条上的色块。工具条上的颜色菜单改用 `.color-option`（见下），别把这条删了。 */
.color-swatches { display: flex; flex-wrap: wrap; gap: 6px; }
.color-swatch { width: 36px; height: 26px; border: 1px solid var(--line); border-radius: 7px; background: var(--panel); color: var(--text); font-size: 11px; }

/* ── 颜色菜单（0.10.12 改成 Notion 那种「预览块 + 名称」两段式）────────────
   以前是一堆 36×26 的小色块里塞中文标签，颜色和名字都看不清。现在每行一个选项：
   左边是预览块（文本色是浅色底 + 彩色 A，背景色是纯色块），右边是名称。 */
/* ⚠️ 这一整块必须带 `.color-menu` 前缀。菜单本身也是 `.heading-menu`，而那里有一条
   `.heading-menu button span { width: 20px; color: var(--accent); font-weight: 700 }`
   （给「标题级别」菜单里的 1/2/3 用的）。不带前缀的话，它会把这里的预览块和名称
   一起压成 20px 宽并染成强调色 —— 表现为名称一个字一行、堆成一团。 */
.color-menu { width: 264px; padding: 8px; max-height: min(72vh, 560px); overflow-y: auto; }
.color-menu .color-menu-label { margin: 8px 6px 4px; color: var(--text-faint); font-size: 10.5px; letter-spacing: .08em; }
.color-menu .color-options { display: flex; flex-direction: column; gap: 1px; }
.color-menu .color-option { display: flex; align-items: center; gap: 10px; width: 100%; height: auto; padding: 4px 6px; border: 0; border-radius: 7px; background: transparent; color: var(--text); text-align: left; font-size: 12.5px; }
.color-menu .color-option:hover, .color-menu .color-option:focus-visible { background: var(--panel-soft); }
.color-menu .color-option.is-current { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.color-menu .color-option .color-option-preview { flex: 0 0 auto; display: grid; place-items: center; width: 24px; height: 24px; border: 1px solid var(--line); border-radius: 6px; font-size: 14px; font-weight: 700; line-height: 1; }
/* 文本色：浅色底 + 该色的 A，让人一眼看出「文字会变成什么颜色」；
   背景色：纯色块（色值同样来自 --swatch）。 */
.color-menu .color-option[data-kind="color"] .color-option-preview { color: var(--swatch, var(--text)); background: color-mix(in srgb, var(--swatch, var(--text)) 15%, transparent); border-color: color-mix(in srgb, var(--swatch, var(--text)) 38%, var(--line)); }
.color-menu .color-option[data-kind="bg"] .color-option-preview { background: color-mix(in srgb, var(--swatch, var(--line)) 34%, transparent); border-color: color-mix(in srgb, var(--swatch, var(--line)) 46%, var(--line)); }
/* 名称要显式写回 auto / inherit：压过上面那条 span 规则给它的 20px 与强调色。 */
.color-menu .color-option .color-option-label { width: auto; color: var(--text); font-weight: 400; font-size: 12.5px; }
.color-menu .color-option .color-option-shortcut { width: auto; margin-left: auto; color: var(--text-faint); font-weight: 400; font-size: 11px; }
/* 每种颜色的色值只在这里写一次，预览块与菜单项共用 --swatch。 */
.color-menu .color-option[data-name="gray"] { --swatch: #8b8b8b; }
.color-menu .color-option[data-name="brown"] { --swatch: #9b6b4a; }
.color-menu .color-option[data-name="orange"] { --swatch: #d9730d; }
.color-menu .color-option[data-name="yellow"] { --swatch: #dfab01; }
.color-menu .color-option[data-name="green"] { --swatch: #2f8f62; }
.color-menu .color-option[data-name="blue"] { --swatch: #337ea9; }
.color-menu .color-option[data-name="purple"] { --swatch: #9065b0; }
.color-menu .color-option[data-name="pink"] { --swatch: #c14c8a; }
.color-menu .color-option[data-name="red"] { --swatch: #d44c47; }
.note-mark[data-color="gray"] { color: #8b8b8b; }
.note-mark[data-color="brown"] { color: #9b6b4a; }
.note-mark[data-color="orange"] { color: #d9730d; }
.note-mark[data-color="yellow"] { color: #c49a12; }
.note-mark[data-color="green"] { color: #2f8f62; }
.note-mark[data-color="blue"] { color: #337ea9; }
.note-mark[data-color="purple"] { color: #9065b0; }
.note-mark[data-color="pink"] { color: #c14c8a; }
.note-mark[data-color="red"] { color: #d44c47; }
.note-mark[data-bg="gray"] { background: color-mix(in srgb, #8b8b8b 28%, transparent); border-radius: 4px; }
.note-mark[data-bg="brown"] { background: color-mix(in srgb, #9b6b4a 28%, transparent); border-radius: 4px; }
.note-mark[data-bg="orange"] { background: color-mix(in srgb, #d9730d 30%, transparent); border-radius: 4px; }
.note-mark[data-bg="yellow"] { background: color-mix(in srgb, #dfab01 34%, transparent); border-radius: 4px; }
.note-mark[data-bg="green"] { background: color-mix(in srgb, #2f8f62 28%, transparent); border-radius: 4px; }
.note-mark[data-bg="blue"] { background: color-mix(in srgb, #337ea9 28%, transparent); border-radius: 4px; }
.note-mark[data-bg="purple"] { background: color-mix(in srgb, #9065b0 28%, transparent); border-radius: 4px; }
.note-mark[data-bg="pink"] { background: color-mix(in srgb, #c14c8a 28%, transparent); border-radius: 4px; }
.note-mark[data-bg="red"] { background: color-mix(in srgb, #d44c47 28%, transparent); border-radius: 4px; }
.note-color-gray, .note-bg-gray { background: #8b8b8b; color: white; }
.note-color-brown, .note-bg-brown { background: #9b6b4a; color: white; }
.note-color-orange, .note-bg-orange { background: #d9730d; color: white; }
.note-color-yellow, .note-bg-yellow { background: #dfab01; color: #2a2208; }
.note-color-green, .note-bg-green { background: #2f8f62; color: white; }
.note-color-blue, .note-bg-blue { background: #337ea9; color: white; }
.note-color-purple, .note-bg-purple { background: #9065b0; color: white; }
.note-color-pink, .note-bg-pink { background: #c14c8a; color: white; }
.note-color-red, .note-bg-red { background: #d44c47; color: white; }
.note-callout { margin: 10px 0; padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--accent) 12%, transparent); }

.context-color-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 6px 8px; }
.context-color-label { flex: 0 0 100%; color: var(--text-faint); font-size: 10px; }

.selection-bubble { position: fixed; z-index: 40; display: flex; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-raised); }
.selection-bubble button { width: 26px; height: 26px; border: 0; border-radius: 6px; background: transparent; color: var(--text); }
.image-width-label { position: fixed; z-index: 40; padding: 2px 6px; border-radius: 6px; background: var(--panel-raised); font-size: 11px; }
body.is-native-app .editor-content p { margin: 0 0 12px; }
body.is-native-app .editor-content blockquote { border-left: 3px solid var(--accent); padding-left: 12px; }
body.is-native-app .note-callout { border-left: 3px solid var(--accent); }
body.is-native-app .note-image img { border: 1px solid var(--line); border-radius: 12px; }
.color-swatch.is-current { outline: 2px solid var(--accent); }