@waterwx/dsh-novel-forge 1.7.0 → 1.7.2

package/src/client/panel/panel.module.css

@@ -10,16 +10,17 @@
 .entry {
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: var(--nf-space-8, 8px);
   width: 100%;
-  padding: 8px 12px;
+  padding: var(--nf-space-8, 8px) var(--nf-space-12, 12px);
   border: none;
   background: transparent;
   color: var(--dsw-alias-label-primary, #1f1f23);
   cursor: pointer;
-  font-size: 13px;
+  /* 入口行在 .view 外，令牌不可达，用字面值对齐统一档（主文本 14px） */
+  font-size: 14px;
   text-align: left;
-  border-radius: 6px;
+  border-radius: var(--nf-radius-6, 6px);
   transition: background 0.15s ease;
 }
 
@@ -90,24 +91,102 @@ body[data-ds-dark-theme] .entry {
   --nf-shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.07), 0 20px 48px rgba(0, 0, 0, 0.12);
   --nf-card-shadow: 0 2px 6px rgba(0, 0, 0, 0.06), 0 14px 38px rgba(0, 0, 0, 0.14);
   --nf-card-shadow-hover: 0 4px 10px rgba(0, 0, 0, 0.08), 0 22px 52px rgba(0, 0, 0, 0.20);
-  /* Liquid Glass: vertical glass face + soft top-left core + sheen border */
-  --nf-glass-face: linear-gradient(180deg, #f6f7f9 0%, #f0f2f5 26%, #e9ebef 52%, #e0e3e8 78%, #d6d9df 100%);
-  --nf-glass-core: radial-gradient(30% 24% at 36% 28%, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.22) 45%, rgba(255, 255, 255, 0) 78%);
+  /* Liquid Glass: 薄透玻璃面（透明度以文字清晰为先，保留壁纸透色但不干扰阅读）+ 顶部高光 + 淡描边 */
+  --nf-glass-face: linear-gradient(180deg, rgba(255, 255, 255, 0.40) 0%, rgba(255, 255, 255, 0.30) 26%, rgba(255, 255, 255, 0.24) 52%, rgba(255, 255, 255, 0.20) 78%, rgba(255, 255, 255, 0.18) 100%);
+  --nf-glass-core: radial-gradient(60% 40% at 30% 0%, rgba(255, 255, 255, 0.60) 0%, rgba(255, 255, 255, 0.20) 42%, rgba(255, 255, 255, 0) 78%);
   --nf-glass-sheen: rgba(255, 255, 255, 0.55);
-  --nf-glass-border: rgba(255, 255, 255, 0.65);
-  --nf-glass-inset: rgba(255, 255, 255, 0.55);
-  --nf-glass-orb-a: rgba(0, 184, 92, 0.18);
-  --nf-glass-orb-b: rgba(120, 160, 255, 0.13);
+  --nf-glass-border: rgba(255, 255, 255, 0.5);
+  --nf-glass-inset: rgba(255, 255, 255, 0.4);
+  --nf-glass-orb-a: rgba(0, 184, 92, 0.24);
+  --nf-glass-orb-b: rgba(120, 160, 255, 0.20);
   --nf-glass-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
+  /* 容器形态（主题可覆盖，用于区分 液态玻璃/毛玻璃 等）：液态=适圆角+薄玻璃+彩色流光 */
+  --nf-card-radius: 20px;
+  --nf-card-blur: 26px;
+  --nf-card-saturate: 170%;
+  --nf-card-brightness: 1.04;
+  --nf-card-sheen: rgba(255, 255, 255, 0.5);
+  --nf-card-border: 1px solid rgba(255, 255, 255, 0.35);
+  /* 控件形态（液态：圆润 + 玻璃底 + 强内高光 + 绿色箭头） */
+  --nf-ctrl-radius: 14px;
+  --nf-ctrl-bg: var(--nf-bg-raise);
+  --nf-ctrl-border: 1px solid rgba(255, 255, 255, 0.7);
+  --nf-ctrl-sheen: rgba(255, 255, 255, 0.5);
+  --nf-ctrl-caret: var(--nf-accent);
+  /* 液态：绿→蓝 流光壁纸底 */
+  --nf-glass-bg-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='1000'%3E%3Cdefs%3E%3Cfilter id='b' x='-20%25' y='-20%25' width='140%25' height='140%25'%3E%3CfeGaussianBlur stdDeviation='110'/%3E%3C/filter%3E%3C/defs%3E%3Cg filter='url(%23b)'%3E%3Ccircle cx='300' cy='180' r='420' fill='%2335d07a' fill-opacity='0.62'/%3E%3Ccircle cx='1240' cy='260' r='470' fill='%233aa7ff' fill-opacity='0.58'/%3E%3Ccircle cx='900' cy='860' r='470' fill='%2340cfc0' fill-opacity='0.5'/%3E%3Ccircle cx='1500' cy='820' r='330' fill='%23ff9fb0' fill-opacity='0.4'/%3E%3Ccircle cx='600' cy='620' r='260' fill='%23b06ef0' fill-opacity='0.42'/%3E%3Ccircle cx='180' cy='600' r='220' fill='%23ffd166' fill-opacity='0.36'/%3E%3C/g%3E%3C/svg%3E");
   background: var(--nf-bg);
   /* Frosted glass: blur whatever is behind the panel (the chat dialog),
    * so translucency shows a soft blur instead of readable content. */
-  -webkit-backdrop-filter: blur(32px) saturate(180%);
-  backdrop-filter: blur(32px) saturate(180%);
+  -webkit-backdrop-filter: blur(30px) saturate(170%) brightness(1.04);
+  backdrop-filter: blur(30px) saturate(170%) brightness(1.04);
   color: var(--nf-text);
-}
-
-body[data-ds-dark-theme] .view {
+  /* ------------------------------------------------------------------
+   * Unified size tokens (单一尺寸来源).
+   * 约定：主题(data-nf-theme/data-nf-mode)只改颜色/质感，永不覆盖这些
+   * 尺寸令牌；界面密度(data-nf-density)是唯一允许重定义尺寸的开关。
+   * ------------------------------------------------------------------ */
+  /* 字号档：12=次要文本 / 14=主文本 / 16+ = 标题与大数字 */
+  --nf-fs-10: 10px;
+  --nf-fs-12: 12px;
+  --nf-fs-14: 14px;
+  --nf-fs-16: 16px;
+  --nf-fs-18: 18px;
+  --nf-fs-20: 20px;
+  --nf-fs-22: 22px;
+  --nf-fs-24: 24px;
+  --nf-fs-34: 34px;
+  --nf-fs-42: 42px;
+  /* 图标尺寸档 */
+  --nf-icon-s: 14px;
+  --nf-icon-m: 16px;
+  --nf-icon-l: 18px;
+  --nf-icon-xl: 22px;
+  /* 间距档 */
+  --nf-space-2: 2px;
+  --nf-space-4: 4px;
+  --nf-space-6: 6px;
+  --nf-space-8: 8px;
+  --nf-space-10: 10px;
+  --nf-space-12: 12px;
+  --nf-space-14: 14px;
+  --nf-space-16: 16px;
+  --nf-space-18: 18px;
+  --nf-space-20: 20px;
+  --nf-space-24: 24px;
+  --nf-space-28: 28px;
+  --nf-space-32: 32px;
+  /* 圆角档 */
+  --nf-radius-2: 2px;
+  --nf-radius-4: 4px;
+  --nf-radius-6: 6px;
+  --nf-radius-8: 8px;
+  --nf-radius-10: 10px;
+  --nf-radius-12: 12px;
+  --nf-radius-14: 14px;
+  --nf-radius-16: 16px;
+  --nf-radius-20: 20px;
+  --nf-radius-22: 22px;
+  --nf-radius-999: 999px;
+  /* 控件高度档 */
+  --nf-ctrl-s: 28px;
+  --nf-ctrl-m: 32px;
+  --nf-ctrl-l: 38px;
+  /* 页面主容器（以设置页为基准）与卡片 */
+  --nf-container-pad: 20px 22px;
+  --nf-container-gap: var(--nf-space-14, 14px);
+  --nf-card-pad: 20px 22px;
+  --nf-nav-pad: 16px 12px 14px;
+}
+
+/* 深色基准：由面板显示模式驱动（强制 dark / system 跟随宿主深色）。
+ * 注意 .view 是 .panel 的父容器，承载 background 与 color-scheme，必须同步设深色变量，
+ * 否则 .panel 设了深色也无法回传给父级 .view → 面板背景永远浅色。
+ * :has() 用于让 .view 跟随显式强制 dark/light（宿主深色时排除强制 light）。 */
+.panel[data-nf-mode='dark'],
+body[data-ds-dark-theme] .panel:not([data-nf-mode]),
+.view:has(> .panel[data-nf-mode='dark']),
+body[data-ds-dark-theme] .view:not(:has(> .panel[data-nf-mode='light'])) {
   color-scheme: dark;
   /* iOS dark palette — near-black canvas with green Liquid-Glass accents */
   --nf-bg: rgba(10, 11, 13, 0.86);
@@ -132,15 +211,30 @@ body[data-ds-dark-theme] .view {
   --nf-shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.4), 0 20px 48px rgba(0, 0, 0, 0.55);
   --nf-card-shadow: 0 2px 6px rgba(0, 0, 0, 0.35), 0 14px 38px rgba(0, 0, 0, 0.45);
   --nf-card-shadow-hover: 0 4px 10px rgba(0, 0, 0, 0.4), 0 22px 52px rgba(0, 0, 0, 0.55);
-  /* Liquid Glass (dark): translucent charcoal glass face + soft bright core */
-  --nf-glass-face: linear-gradient(180deg, rgba(112, 116, 122, 0.42) 0%, rgba(96, 100, 106, 0.42) 26%, rgba(82, 85, 90, 0.42) 52%, rgba(68, 71, 76, 0.42) 78%, rgba(56, 58, 63, 0.42) 100%);
-  --nf-glass-core: radial-gradient(30% 24% at 36% 28%, rgba(255, 255, 255, 0.26) 0%, rgba(255, 255, 255, 0.10) 45%, rgba(255, 255, 255, 0) 78%);
-  --nf-glass-sheen: rgba(255, 255, 255, 0.26);
+  /* Liquid Glass (dark): 薄透玻璃面（透明度以文字清晰为先）+ 顶部高光 + 淡描边 */
+  --nf-glass-face: linear-gradient(180deg, rgba(62, 66, 74, 0.52) 0%, rgba(54, 58, 66, 0.46) 26%, rgba(48, 52, 60, 0.40) 52%, rgba(42, 46, 54, 0.36) 78%, rgba(38, 42, 50, 0.34) 100%);
+  --nf-glass-core: radial-gradient(60% 40% at 30% 0%, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.08) 42%, rgba(255, 255, 255, 0) 78%);
+  --nf-glass-sheen: rgba(255, 255, 255, 0.24);
   --nf-glass-border: rgba(255, 255, 255, 0.14);
-  --nf-glass-inset: rgba(255, 255, 255, 0.07);
-  --nf-glass-orb-a: rgba(0, 202, 82, 0.28);
-  --nf-glass-orb-b: rgba(190, 200, 215, 0.10);
+  --nf-glass-inset: rgba(255, 255, 255, 0.08);
+  --nf-glass-orb-a: rgba(0, 202, 82, 0.36);
+  --nf-glass-orb-b: rgba(120, 160, 255, 0.28);
   --nf-glass-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
+  /* 深色液态容器形态 */
+  --nf-card-radius: 20px;
+  --nf-card-blur: 28px;
+  --nf-card-saturate: 165%;
+  --nf-card-brightness: 1;
+  --nf-card-border: 1px solid rgba(255, 255, 255, 0.14);
+  --nf-card-sheen: rgba(255, 255, 255, 0.22);
+  /* 深色液态专用壁纸：压暗浓郁光斑（仅默认液态，macos/neumorph 在各自块覆盖） */
+  --nf-glass-bg-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='1000'%3E%3Cdefs%3E%3Cfilter id='b' x='-20%25' y='-20%25' width='140%25' height='140%25'%3E%3CfeGaussianBlur stdDeviation='110'/%3E%3C/filter%3E%3C/defs%3E%3Cg filter='url(%23b)'%3E%3Ccircle cx='300' cy='180' r='420' fill='%231a9f4d' fill-opacity='0.44'/%3E%3Ccircle cx='1240' cy='260' r='470' fill='%23268bd6' fill-opacity='0.40'/%3E%3Ccircle cx='900' cy='860' r='470' fill='%232a9e94' fill-opacity='0.36'/%3E%3Ccircle cx='1500' cy='820' r='330' fill='%23e07a94' fill-opacity='0.30'/%3E%3Ccircle cx='600' cy='620' r='260' fill='%238c5bd6' fill-opacity='0.32'/%3E%3C/g%3E%3C/svg%3E");
+  /* 深色液态控件 */
+  --nf-ctrl-radius: 14px;
+  --nf-ctrl-bg: var(--nf-bg-raise);
+  --nf-ctrl-border: 1px solid rgba(255, 255, 255, 0.18);
+  --nf-ctrl-sheen: rgba(255, 255, 255, 0.2);
+  --nf-ctrl-caret: var(--nf-accent);
 }
 
 html[data-dsh-novelforge-active]:not([data-dsh-taskboard-active]):not([data-dsh-ssh-active]) .view {
@@ -149,45 +243,132 @@ html[data-dsh-novelforge-active]:not([data-dsh-taskboard-active]):not([data-dsh-
 
 /* ------------------------------------------------------------ themes
  * 'liquid' (default): iOS Liquid Glass, green accent — set on .view above.
- * 'classic': original frosted iOS look, blue accent — overrides below.
+ * 'macos' / 'neumorph' override below.
  */
-.panel[data-nf-theme='classic'] {
+
+/* ------------------------------------------------------------
+ * 'macos': macOS 玻璃（浅色默认 / 深色亮蓝），强调色随外观自动切换 #007aff / #0a84ff。
+ * 第二个选择器：深色系统下强制「浅色」显示模式时也能覆盖宿主的深色规则。
+ * ------------------------------------------------------------ */
+.panel[data-nf-theme='macos'],
+body[data-ds-dark-theme] .panel[data-nf-mode='light'][data-nf-theme='macos'] {
+  --nf-bg: rgba(245, 246, 248, 0.92);
+  --nf-bg-raise: rgba(255, 255, 255, 0.78);
+  --nf-bg-inset: rgba(118, 118, 128, 0.1);
+  --nf-border: rgba(60, 60, 67, 0.14);
+  --nf-border-strong: rgba(60, 60, 67, 0.3);
+  --nf-text: #1d1d1f;
+  --nf-text-2: #3a3a3c;
+  --nf-text-2-alpha: rgba(58, 58, 60, 0.7);
+  --nf-text-3: #86868b;
   --nf-accent: #007aff;
   --nf-accent-hover: #0071e3;
   --nf-accent-soft: rgba(0, 122, 255, 0.12);
   --nf-accent-fg: #ffffff;
+  --nf-hover: rgba(0, 0, 0, 0.04);
   --nf-info: #5856d6;
-  --nf-glass-face: var(--nf-bg-raise);
+  --nf-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 10px 28px rgba(0, 0, 0, 0.07);
+  --nf-shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.06), 0 18px 44px rgba(0, 0, 0, 0.11);
+  --nf-card-shadow: 0 2px 6px rgba(0, 0, 0, 0.05), 0 12px 34px rgba(0, 0, 0, 0.09);
+  --nf-card-shadow-hover: 0 4px 10px rgba(0, 0, 0, 0.07), 0 20px 48px rgba(0, 0, 0, 0.14);
+  --nf-glass-face: rgba(255, 255, 255, 0.7);
   --nf-glass-core: transparent;
-  --nf-glass-sheen: rgba(255, 255, 255, 0);
-  --nf-glass-border: var(--nf-border);
-  --nf-glass-inset: var(--nf-bg-inset);
-  --nf-glass-orb-a: transparent;
-  --nf-glass-orb-b: transparent;
+  --nf-glass-sheen: rgba(255, 255, 255, 0.8);
+  --nf-glass-border: rgba(255, 255, 255, 0.9);
+  --nf-glass-inset: rgba(255, 255, 255, 0.6);
+  --nf-glass-orb-a: rgba(0, 122, 255, 0.08);
+  --nf-glass-orb-b: rgba(88, 86, 214, 0.07);
   --nf-glass-noise: none;
-}
-
-body[data-ds-dark-theme] .panel[data-nf-theme='classic'] {
+  /* macOS 容器：小圆角 + 高模糊低饱和 + 冷描边，玻璃面板质感 */
+  --nf-card-radius: 12px;
+  --nf-card-blur: 42px;
+  --nf-card-saturate: 150%;
+  --nf-card-border: 1px solid var(--nf-border);
+  --nf-card-sheen: rgba(255, 255, 255, 0.35);
+  /* macOS 控件：小圆角 + 玻璃底 + 冷描边 + 蓝色箭头（focus 蓝环见特写） */
+  --nf-ctrl-radius: 8px;
+  --nf-ctrl-bg: var(--nf-bg-raise);
+  --nf-ctrl-border: 1px solid var(--nf-border-strong);
+  --nf-ctrl-sheen: rgba(255, 255, 255, 0.35);
+  --nf-ctrl-caret: var(--nf-accent);
+}
+
+.panel[data-nf-mode='dark'][data-nf-theme='macos'],
+body[data-ds-dark-theme] .panel[data-nf-theme='macos']:not([data-nf-mode]) {
+  --nf-bg: rgba(28, 28, 30, 0.9);
+  --nf-bg-raise: rgba(44, 44, 46, 0.82);
+  --nf-bg-inset: rgba(118, 118, 128, 0.18);
+  --nf-border: rgba(255, 255, 255, 0.12);
+  --nf-border-strong: rgba(255, 255, 255, 0.26);
+  --nf-text: #f5f5f7;
+  --nf-text-2: #d1d1d6;
+  --nf-text-2-alpha: rgba(209, 209, 214, 0.7);
+  --nf-text-3: #98989d;
   --nf-accent: #0a84ff;
   --nf-accent-hover: #3a9bff;
   --nf-accent-soft: rgba(10, 132, 255, 0.2);
   --nf-accent-fg: #ffffff;
+  --nf-hover: rgba(255, 255, 255, 0.06);
   --nf-info: #bf5af2;
-  --nf-glass-face: var(--nf-bg-raise);
+  --nf-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 30px rgba(0, 0, 0, 0.45);
+  --nf-shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.45), 0 18px 44px rgba(0, 0, 0, 0.6);
+  --nf-card-shadow: 0 2px 6px rgba(0, 0, 0, 0.4), 0 14px 38px rgba(0, 0, 0, 0.5);
+  --nf-card-shadow-hover: 0 4px 10px rgba(0, 0, 0, 0.45), 0 22px 52px rgba(0, 0, 0, 0.6);
+  --nf-glass-face: rgba(44, 44, 46, 0.85);
   --nf-glass-core: transparent;
-  --nf-glass-sheen: rgba(255, 255, 255, 0);
-  --nf-glass-border: var(--nf-border);
-  --nf-glass-inset: var(--nf-bg-inset);
-  --nf-glass-orb-a: transparent;
-  --nf-glass-orb-b: transparent;
+  --nf-glass-sheen: rgba(255, 255, 255, 0.2);
+  --nf-glass-border: rgba(255, 255, 255, 0.18);
+  --nf-glass-inset: rgba(255, 255, 255, 0.06);
+  --nf-glass-orb-a: rgba(10, 132, 255, 0.16);
+  --nf-glass-orb-b: rgba(191, 90, 242, 0.08);
   --nf-glass-noise: none;
 }
 
+/* macOS 按钮 / 输入框玻璃化（圆角由基础 .button/.input 引用 --nf-ctrl-radius 形态令牌提供） */
+.panel[data-nf-theme='macos'] .button {
+  border: 1px solid var(--nf-border-strong);
+  background: color-mix(in srgb, var(--nf-bg-raise) 82%, #fff);
+  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.6);
+}
+.panel[data-nf-theme='macos'] .buttonPrimary {
+  background: linear-gradient(180deg, color-mix(in srgb, var(--nf-accent) 90%, #fff), var(--nf-accent));
+  border-color: transparent;
+  color: var(--nf-accent-fg);
+  box-shadow: 0 1px 3px color-mix(in srgb, var(--nf-accent) 45%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.35);
+}
+.panel[data-nf-theme='macos'] .input,
+.panel[data-nf-theme='macos'] .textarea {
+  border: 1px solid var(--nf-border-strong);
+  background: var(--nf-bg-raise);
+}
+.panel[data-nf-theme='macos'] .input:focus,
+.panel[data-nf-theme='macos'] .textarea:focus {
+  border-color: var(--nf-accent);
+  box-shadow: 0 0 0 3px var(--nf-accent-soft);
+}
+
 /* ------------------------------------------------------------
  * 'neumorph': Neumorphism (dual-shadow soft UI).
  * Light variant in light mode; a dark dual-shadow variant in dark
  * mode so switching always has a visible effect.
  * ------------------------------------------------------------ */
+/* 新拟物容器：实色无模糊、较大圆角、无内高光（不依赖深浅，任何模式一致） */
+.panel[data-nf-theme='neumorph'] {
+  --nf-card-radius: 20px;
+  --nf-card-blur: 0px;
+  --nf-card-saturate: 100%;
+  --nf-card-border: none;
+  --nf-card-sheen: rgba(255, 255, 255, 0);
+  /* 新拟物控件：实色无模糊 + 较大圆角 + 无内高光（深浅一致） */
+  --nf-ctrl-radius: 10px;
+  --nf-ctrl-bg: var(--nf-bg-inset);
+  --nf-ctrl-border: none;
+  --nf-ctrl-sheen: rgba(255, 255, 255, 0);
+  --nf-ctrl-caret: var(--nf-text-3);
+  /* 新拟物：实色，无玻璃底图 */
+  --nf-glass-bg-image: none;
+}
+
 body:not([data-ds-dark-theme]) .panel[data-nf-theme='neumorph'] {
   --nf-bg: #e4e9f2;
   --nf-bg-raise: #e4e9f2;
@@ -213,7 +394,8 @@ body:not([data-ds-dark-theme]) .panel[data-nf-theme='neumorph'] {
   --nf-glass-noise: none;
 }
 
-body[data-ds-dark-theme] .panel[data-nf-theme='neumorph'] {
+.panel[data-nf-mode='dark'][data-nf-theme='neumorph'],
+body[data-ds-dark-theme] .panel[data-nf-theme='neumorph']:not([data-nf-mode]) {
   --nf-bg: #2b2f36;
   --nf-bg-raise: #2b2f36;
   --nf-bg-inset: #25292f;
@@ -237,6 +419,153 @@ body[data-ds-dark-theme] .panel[data-nf-theme='neumorph'] {
   --nf-glass-orb-b: transparent;
   --nf-glass-noise: none;
 }
+/* ------------------------------------------------------------
+ * 'clay': Claymorphism（粘土拟态）—— 柔软圆润、同色系软阴影、奶油底色。
+ * 实心（无 backdrop 模糊）、大圆角、双阴影制造"黏土鼓起"感。
+ * ------------------------------------------------------------ */
+/* 粘土形态（深浅一致）：大圆角、无模糊、奶油高光描边、软阴影 */
+.panel[data-nf-theme='clay'] {
+  /* 容器：大圆角 + 实心（关闭玻璃模糊）+ 顶部奶油高光 */
+  --nf-card-radius: 28px;
+  --nf-card-blur: 0px;
+  --nf-card-saturate: 100%;
+  --nf-card-brightness: 1;
+  --nf-card-border: 1px solid rgba(255, 255, 255, 0.6);
+  --nf-card-sheen: rgba(255, 255, 255, 0.85);
+  /* 控件：圆润 + 同色系软阴影 + 顶部高光 */
+  --nf-ctrl-radius: 16px;
+  --nf-ctrl-bg: var(--nf-bg-raise);
+  --nf-ctrl-border: 1px solid rgba(255, 255, 255, 0.55);
+  --nf-ctrl-sheen: rgba(255, 255, 255, 0.7);
+  --nf-ctrl-caret: var(--nf-accent);
+  /* 粘土为实心：无玻璃壁纸 */
+  --nf-glass-bg-image: none;
+}
+
+/* 浅色粘土（默认浅色系统 / 强制浅色） */
+body:not([data-ds-dark-theme]) .panel[data-nf-theme='clay'],
+.panel[data-nf-mode='light'][data-nf-theme='clay'] {
+  --nf-bg: #f2eae0;
+  --nf-bg-raise: #efe4d6;
+  --nf-bg-inset: #e6d8c6;
+  --nf-border: rgba(120, 96, 72, 0.16);
+  --nf-border-strong: rgba(120, 96, 72, 0.28);
+  --nf-text: #3a3330;
+  --nf-text-2: #5a4f48;
+  --nf-text-2-alpha: rgba(90, 79, 72, 0.7);
+  --nf-text-3: #9a8c80;
+  --nf-accent: #e08a5c;
+  --nf-accent-hover: #d67a4a;
+  --nf-accent-soft: rgba(224, 138, 92, 0.16);
+  --nf-accent-fg: #ffffff;
+  --nf-hover: rgba(120, 96, 72, 0.08);
+  --nf-success: #7fae6a;
+  --nf-error: #c96b63;
+  --nf-warn: #d9a660;
+  --nf-info: #e08a5c;
+  --nf-shadow: 0 8px 16px -6px rgba(90, 70, 50, 0.28), inset 0 6px 10px rgba(255, 255, 255, 0.55), inset 0 -6px 10px rgba(120, 96, 72, 0.12);
+  --nf-shadow-lg: 0 16px 28px -10px rgba(90, 70, 50, 0.34), inset 0 6px 10px rgba(255, 255, 255, 0.55), inset 0 -6px 10px rgba(120, 96, 72, 0.14);
+  --nf-card-shadow: 0 16px 28px -10px rgba(90, 70, 50, 0.34), inset 0 -8px 12px rgba(120, 96, 72, 0.14), inset 0 8px 12px rgba(255, 255, 255, 0.6);
+  --nf-card-shadow-hover: 0 22px 36px -12px rgba(90, 70, 50, 0.38), inset 0 -8px 12px rgba(120, 96, 72, 0.16), inset 0 8px 12px rgba(255, 255, 255, 0.7);
+  --nf-glass-face: #efe4d6;
+  --nf-glass-core: transparent;
+  --nf-glass-sheen: rgba(255, 255, 255, 0.85);
+  --nf-glass-border: rgba(255, 255, 255, 0.6);
+  --nf-glass-inset: #e6d8c6;
+  --nf-glass-orb-a: transparent;
+  --nf-glass-orb-b: transparent;
+  --nf-glass-noise: none;
+}
+
+/* 深色粘土（强制深色 / system 深色系统） */
+.panel[data-nf-mode='dark'][data-nf-theme='clay'],
+body[data-ds-dark-theme] .panel[data-nf-theme='clay']:not([data-nf-mode]) {
+  --nf-bg: #2a2522;
+  --nf-bg-raise: #37302b;
+  --nf-bg-inset: #2f2925;
+  --nf-border: rgba(255, 255, 255, 0.08);
+  --nf-border-strong: rgba(255, 255, 255, 0.18);
+  --nf-text: #efe9e3;
+  --nf-text-2: #c7beb5;
+  --nf-text-2-alpha: rgba(199, 190, 181, 0.7);
+  --nf-text-3: #8a8078;
+  --nf-accent: #e69a6c;
+  --nf-accent-hover: #f0ac82;
+  --nf-accent-soft: rgba(230, 154, 108, 0.2);
+  --nf-accent-fg: #241b16;
+  --nf-hover: rgba(255, 255, 255, 0.06);
+  --nf-success: #9cba82;
+  --nf-error: #d98f86;
+  --nf-warn: #d9a660;
+  --nf-info: #e69a6c;
+  --nf-shadow: 0 8px 16px -6px rgba(0, 0, 0, 0.55), inset 0 6px 10px rgba(255, 255, 255, 0.12), inset 0 -6px 10px rgba(0, 0, 0, 0.35);
+  --nf-shadow-lg: 0 16px 28px -10px rgba(0, 0, 0, 0.62), inset 0 6px 10px rgba(255, 255, 255, 0.12), inset 0 -6px 10px rgba(0, 0, 0, 0.4);
+  --nf-card-shadow: 0 16px 28px -10px rgba(0, 0, 0, 0.62), inset 0 -8px 12px rgba(0, 0, 0, 0.4), inset 0 8px 12px rgba(255, 255, 255, 0.14);
+  --nf-card-shadow-hover: 0 22px 36px -12px rgba(0, 0, 0, 0.68), inset 0 -8px 12px rgba(0, 0, 0, 0.44), inset 0 8px 12px rgba(255, 255, 255, 0.18);
+  --nf-glass-face: #37302b;
+  --nf-glass-core: transparent;
+  --nf-glass-sheen: rgba(255, 255, 255, 0.16);
+  --nf-glass-border: rgba(255, 255, 255, 0.16);
+  --nf-glass-inset: #2f2925;
+  --nf-glass-orb-a: transparent;
+  --nf-glass-orb-b: transparent;
+  --nf-glass-noise: none;
+}
+
+/* 粘土输入框：凹陷黏土内阴影（深浅一致，深色下另覆盖） */
+.panel[data-nf-theme='clay'] .input,
+.panel[data-nf-theme='clay'] .textarea {
+  background: var(--nf-bg-inset);
+  border-color: var(--nf-border-strong);
+  box-shadow: inset 3px 3px 7px rgba(120, 96, 72, 0.14), inset -3px -3px 7px rgba(255, 255, 255, 0.5);
+}
+
+/* 粘土按钮：柔和的"黏土凸起"——外围软投影 + 顶部奶油高光 + 底部厚影 */
+body:not([data-ds-dark-theme]) .panel[data-nf-theme='clay'] .button {
+  border-color: rgba(255, 255, 255, 0.6);
+  background: linear-gradient(180deg, #f6ecdf, #eee0cf);
+  box-shadow: 0 8px 16px -6px rgba(90, 70, 50, 0.35), inset 0 3px 4px rgba(255, 255, 255, 0.8), inset 0 -3px 5px rgba(120, 96, 72, 0.2);
+}
+
+body:not([data-ds-dark-theme]) .panel[data-nf-theme='clay'] .button:hover:not([disabled]) {
+  box-shadow: 0 12px 22px -8px rgba(90, 70, 50, 0.42), inset 0 3px 4px rgba(255, 255, 255, 0.85), inset 0 -3px 5px rgba(120, 96, 72, 0.22);
+}
+
+body:not([data-ds-dark-theme]) .panel[data-nf-theme='clay'] .buttonPrimary {
+  background: linear-gradient(180deg, #eda178, #e08a5c);
+  border-color: transparent;
+  color: var(--nf-accent-fg);
+  box-shadow: 0 8px 16px -6px rgba(224, 138, 92, 0.55), inset 0 3px 4px rgba(255, 255, 255, 0.5), inset 0 -3px 5px rgba(150, 70, 40, 0.3);
+}
+
+/* 深色粘土按钮 */
+.panel[data-nf-mode='dark'][data-nf-theme='clay'] .button,
+body[data-ds-dark-theme] .panel[data-nf-theme='clay']:not([data-nf-mode]) .button {
+  border-color: rgba(255, 255, 255, 0.16);
+  background: linear-gradient(180deg, #403731, #332c27);
+  box-shadow: 0 8px 16px -6px rgba(0, 0, 0, 0.55), inset 0 3px 4px rgba(255, 255, 255, 0.14), inset 0 -3px 5px rgba(0, 0, 0, 0.4);
+}
+
+.panel[data-nf-mode='dark'][data-nf-theme='clay'] .button:hover:not([disabled]),
+body[data-ds-dark-theme] .panel[data-nf-theme='clay']:not([data-nf-mode]) .button:hover:not([disabled]) {
+  box-shadow: 0 12px 22px -8px rgba(0, 0, 0, 0.6), inset 0 3px 4px rgba(255, 255, 255, 0.16), inset 0 -3px 5px rgba(0, 0, 0, 0.44);
+}
+
+.panel[data-nf-mode='dark'][data-nf-theme='clay'] .buttonPrimary,
+body[data-ds-dark-theme] .panel[data-nf-theme='clay']:not([data-nf-mode]) .buttonPrimary {
+  background: linear-gradient(180deg, #f0ac82, #d67a4a);
+  border-color: transparent;
+  color: var(--nf-accent-fg);
+  box-shadow: 0 8px 16px -6px rgba(230, 154, 108, 0.5), inset 0 3px 4px rgba(255, 255, 255, 0.4), inset 0 -3px 5px rgba(120, 50, 20, 0.3);
+}
+
+.panel[data-nf-mode='dark'][data-nf-theme='clay'] .input,
+.panel[data-nf-mode='dark'][data-nf-theme='clay'] .textarea,
+body[data-ds-dark-theme] .panel[data-nf-theme='clay']:not([data-nf-mode]) .input,
+body[data-ds-dark-theme] .panel[data-nf-theme='clay']:not([data-nf-mode]) .textarea {
+  box-shadow: inset 3px 3px 7px rgba(0, 0, 0, 0.45), inset -3px -3px 7px rgba(255, 255, 255, 0.08);
+}
+
 
 /* Neumorphic inset inputs (sunken). */
 body:not([data-ds-dark-theme]) .panel[data-nf-theme='neumorph'] .input,
@@ -315,13 +644,13 @@ body[data-ds-dark-theme] .panel[data-nf-theme='neumorph'] .buttonPrimary {
   flex-direction: column;
   height: 100%;
   min-width: 0;
-  font-size: 14px;
+  font-size: var(--nf-fs-14, 14px);
   line-height: 1.6;
   position: relative;
   overflow: hidden;
 }
 
-/* Liquid-Glass backdrop: colored orbs + vignette behind the frosted cards. */
+/* Liquid-Glass backdrop: themed abstract image + colored orbs + vignette behind the frosted cards. */
 .panel::before {
   content: '';
   position: absolute;
@@ -329,26 +658,32 @@ body[data-ds-dark-theme] .panel[data-nf-theme='neumorph'] .buttonPrimary {
   z-index: 0;
   pointer-events: none;
   background:
+    var(--nf-glass-bg-image, none) center / cover no-repeat,
     radial-gradient(46% 36% at 18% 12%, var(--nf-glass-orb-a), transparent 70%),
     radial-gradient(52% 42% at 88% 22%, var(--nf-glass-orb-b), transparent 72%),
     radial-gradient(120% 95% at 50% 42%, transparent 55%, rgba(2, 2, 3, 0.10) 100%);
 }
 
+/* --- 玻璃主题背后的「抽象壁纸」底图（每主题一种色调，供卡片 blur 出真实玻璃感） --- */
+.panel[data-nf-theme='macos'] {
+  --nf-glass-bg-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='1000'%3E%3Cdefs%3E%3Cfilter id='b' x='-20%25' y='-20%25' width='140%25' height='140%25'%3E%3CfeGaussianBlur stdDeviation='140'/%3E%3C/filter%3E%3C/defs%3E%3Cg filter='url(%23b)'%3E%3Ccircle cx='320' cy='220' r='320' fill='%230a84ff' fill-opacity='0.34'/%3E%3Ccircle cx='1180' cy='320' r='360' fill='%237f5af0' fill-opacity='0.30'/%3E%3Ccircle cx='920' cy='820' r='380' fill='%2340cfc0' fill-opacity='0.26'/%3E%3Ccircle cx='1460' cy='820' r='260' fill='%23ff9fb0' fill-opacity='0.18'/%3E%3C/g%3E%3C/svg%3E");
+}
+
 .panelTitle {
   margin: 0;
-  font-size: 16px;
+  font-size: var(--nf-fs-16, 16px);
   font-weight: 700;
   letter-spacing: 0.2px;
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: var(--nf-space-8, 8px);
 }
 
 .panelTitle::before {
   content: '';
   width: 4px;
   height: 16px;
-  border-radius: 2px;
+  border-radius: var(--nf-radius-2, 2px);
   background: linear-gradient(180deg, var(--nf-accent), var(--nf-info));
 }
 
@@ -356,10 +691,10 @@ body[data-ds-dark-theme] .panel[data-nf-theme='neumorph'] .buttonPrimary {
   border: none;
   background: transparent;
   cursor: pointer;
-  font-size: 16px;
+  font-size: var(--nf-fs-16, 16px);
   color: var(--nf-text-2);
-  padding: 4px 9px;
-  border-radius: 9px;
+  padding: var(--nf-space-4, 4px) var(--nf-space-10, 9px);
+  border-radius: var(--nf-radius-10, 9px);
   transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease;
 }
 
@@ -373,8 +708,8 @@ body[data-ds-dark-theme] .panel[data-nf-theme='neumorph'] .buttonPrimary {
 
 .tabBar {
   display: flex;
-  gap: 2px;
-  padding: 8px 14px 0;
+  gap: var(--nf-space-2, 2px);
+  padding: var(--nf-space-8, 8px) var(--nf-space-14, 14px) 0;
   border-bottom: 1px solid var(--nf-border);
   flex-shrink: 0;
   background: var(--nf-bg-raise);
@@ -386,10 +721,10 @@ body[data-ds-dark-theme] .panel[data-nf-theme='neumorph'] .buttonPrimary {
 .tab {
   border: none;
   background: transparent;
-  padding: 7px 13px;
+  padding: var(--nf-space-8, 7px) var(--nf-space-14, 13px);
   cursor: pointer;
-  border-radius: 8px 8px 0 0;
-  font-size: 13.5px;
+  border-radius: var(--nf-radius-8, 8px) var(--nf-radius-8, 8px) 0 0;
+  font-size: var(--nf-fs-14, 13.5px);
   color: var(--nf-text-2);
   transition: color 0.15s ease, background 0.15s ease;
   position: relative;
@@ -413,17 +748,17 @@ body[data-ds-dark-theme] .panel[data-nf-theme='neumorph'] .buttonPrimary {
   right: 10px;
   bottom: -1px;
   height: 2.5px;
-  border-radius: 2px 2px 0 0;
+  border-radius: var(--nf-radius-2, 2px) var(--nf-radius-2, 2px) 0 0;
   background: var(--nf-accent);
 }
 
 .panelContent {
   flex: 1;
   overflow: auto;
-  padding: var(--nf-density-pad, 16px 18px 20px);
+  padding: var(--nf-container-pad, 20px 22px);
   display: flex;
   flex-direction: column;
-  gap: var(--nf-density-gap, 14px);
+  gap: var(--nf-container-gap, 14px);
   position: relative;
   z-index: 1;
 }
@@ -444,11 +779,11 @@ body[data-ds-dark-theme] .panel[data-nf-theme='neumorph'] .buttonPrimary {
   width: 216px;
   display: flex;
   flex-direction: column;
-  gap: 6px;
+  gap: var(--nf-space-6, 6px);
   margin: 10px 0 10px 12px;
-  padding: var(--nf-density-nav, 16px 12px 14px);
+  padding: var(--nf-nav-pad, 16px 12px 14px);
   border: 1px solid var(--nf-glass-border);
-  border-radius: 18px;
+  border-radius: var(--nf-radius-16, 18px);
   background: var(--nf-glass-face);
   box-shadow: var(--nf-shadow), inset 0 1px 0 var(--nf-glass-sheen);
   -webkit-backdrop-filter: blur(28px) saturate(175%);
@@ -459,22 +794,22 @@ body[data-ds-dark-theme] .panel[data-nf-theme='neumorph'] .buttonPrimary {
 
 .panelNavCollapsed {
   width: 52px;
-  padding: 10px 6px;
+  padding: var(--nf-space-10, 10px) var(--nf-space-6, 6px);
 }
 
 .navGroup {
   display: flex;
   flex-direction: column;
-  gap: 6px;
+  gap: var(--nf-space-6, 6px);
 }
 
 .navGroupLabel {
-  font-size: 12px;
+  font-size: var(--nf-fs-12, 12px);
   font-weight: 600;
   letter-spacing: 0.8px;
   text-transform: uppercase;
   color: var(--nf-text-3);
-  padding: 12px 10px 6px;
+  padding: var(--nf-space-12, 12px) var(--nf-space-10, 10px) var(--nf-space-6, 6px);
   user-select: none;
 }
 
@@ -495,8 +830,8 @@ body[data-ds-dark-theme] .panel[data-nf-theme='neumorph'] .buttonPrimary {
   flex: none;
   display: flex;
   flex-direction: column;
-  gap: 4px;
-  padding: 8px 6px 4px;
+  gap: var(--nf-space-4, 4px);
+  padding: var(--nf-space-8, 8px) var(--nf-space-6, 6px) var(--nf-space-4, 4px);
   border-top: 1px solid var(--nf-border);
   margin-top: 4px;
 }
@@ -505,14 +840,14 @@ body[data-ds-dark-theme] .panel[data-nf-theme='neumorph'] .buttonPrimary {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 4px;
+  gap: var(--nf-space-4, 4px);
   border: none;
   background: transparent;
   cursor: pointer;
-  font-size: 11px;
+  font-size: var(--nf-fs-12, 11px);
   color: var(--nf-text-3);
-  padding: 4px 6px;
-  border-radius: 8px;
+  padding: var(--nf-space-4, 4px) var(--nf-space-6, 6px);
+  border-radius: var(--nf-radius-8, 8px);
   transition: color 0.15s ease, background 0.15s ease;
   text-align: left;
   white-space: nowrap;
@@ -528,10 +863,10 @@ body[data-ds-dark-theme] .panel[data-nf-theme='neumorph'] .buttonPrimary {
   background: var(--nf-accent-soft);
   color: var(--nf-accent);
   cursor: pointer;
-  font-size: 10.5px;
+  font-size: var(--nf-fs-12, 10.5px);
   font-weight: 600;
-  padding: 4px 6px;
-  border-radius: 8px;
+  padding: var(--nf-space-4, 4px) var(--nf-space-6, 6px);
+  border-radius: var(--nf-radius-8, 8px);
   text-align: left;
   white-space: nowrap;
 }
@@ -541,13 +876,13 @@ body[data-ds-dark-theme] .panel[data-nf-theme='neumorph'] .buttonPrimary {
 }
 
 .panelNavCollapsed .navAbout {
-  padding: 6px 2px 2px;
+  padding: var(--nf-space-6, 6px) var(--nf-space-2, 2px) var(--nf-space-2, 2px);
   align-items: center;
 }
 
 .panelNavCollapsed .navAboutRow {
   justify-content: center;
-  padding: 4px 0;
+  padding: var(--nf-space-4, 4px) 0;
   width: 100%;
 }
 
@@ -556,11 +891,11 @@ body[data-ds-dark-theme] .panel[data-nf-theme='neumorph'] .buttonPrimary {
   flex: none;
   min-width: 18px;
   height: 18px;
-  padding: 0 5px;
-  border-radius: 999px;
+  padding: 0 var(--nf-space-6, 5px);
+  border-radius: var(--nf-radius-999, 999px);
   background: var(--nf-accent);
   color: #fff;
-  font-size: 10.5px;
+  font-size: var(--nf-fs-12, 10.5px);
   font-weight: 700;
   line-height: 18px;
   text-align: center;
@@ -571,11 +906,12 @@ body[data-ds-dark-theme] .panel[data-nf-theme='neumorph'] .buttonPrimary {
   position: absolute;
   top: 2px;
   right: 2px;
-  min-width: 14px;
-  height: 14px;
-  line-height: 14px;
-  font-size: 9px;
-  padding: 0 3px;
+  /* 字号统一为 12px 后，徽标容器同步放大到 18px 避免溢出 */
+  min-width: 18px;
+  height: 18px;
+  line-height: 18px;
+  font-size: var(--nf-fs-12, 9px);
+  padding: 0 var(--nf-space-6, 5px);
 }
 
 .navTabBadgeDanger {
@@ -604,14 +940,14 @@ body[data-ds-dark-theme] .panel[data-nf-theme='neumorph'] .buttonPrimary {
 .navTab {
   display: flex;
   align-items: center;
-  gap: 10px;
+  gap: var(--nf-space-10, 10px);
   width: 100%;
   border: 1px solid transparent;
   background: transparent;
   cursor: pointer;
-  border-radius: 10px;
-  padding: 11px 12px;
-  font-size: 14px;
+  border-radius: var(--nf-radius-10, 10px);
+  padding: var(--nf-space-12, 11px) var(--nf-space-12, 12px);
+  font-size: var(--nf-fs-14, 14px);
   color: var(--nf-text-2-alpha, var(--nf-text-2));
   font-weight: 500;
   transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
@@ -622,7 +958,7 @@ body[data-ds-dark-theme] .panel[data-nf-theme='neumorph'] .buttonPrimary {
 
 .panelNavCollapsed .navTab {
   justify-content: center;
-  padding: 8px 0;
+  padding: var(--nf-space-8, 8px) 0;
 }
 
 .navTab:hover {
@@ -646,7 +982,7 @@ body[data-ds-dark-theme] .panel[data-nf-theme='neumorph'] .buttonPrimary {
   flex: none;
   width: 22px;
   text-align: center;
-  font-size: 17px;
+  font-size: var(--nf-fs-16, 17px);
   line-height: 1;
 }
 
@@ -659,8 +995,8 @@ body[data-ds-dark-theme] .panel[data-nf-theme='neumorph'] .buttonPrimary {
 .navTitle {
   display: flex;
   align-items: center;
-  gap: 10px;
-  padding: 2px 6px 12px;
+  gap: var(--nf-space-10, 10px);
+  padding: var(--nf-space-2, 2px) var(--nf-space-6, 6px) var(--nf-space-12, 12px);
   border-bottom: 1px solid var(--nf-border);
   margin-bottom: 6px;
   flex: none;
@@ -670,11 +1006,11 @@ body[data-ds-dark-theme] .panel[data-nf-theme='neumorph'] .buttonPrimary {
 .navTitleLogo {
   width: 34px;
   height: 34px;
-  border-radius: 10px;
+  border-radius: var(--nf-radius-10, 10px);
   background: linear-gradient(145deg, var(--nf-accent), var(--nf-accent-hover));
   color: var(--nf-accent-fg);
   font-weight: 800;
-  font-size: 15px;
+  font-size: var(--nf-fs-14, 15px);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -684,7 +1020,7 @@ body[data-ds-dark-theme] .panel[data-nf-theme='neumorph'] .buttonPrimary {
 
 .navTitleName {
   font-weight: 700;
-  font-size: 15px;
+  font-size: var(--nf-fs-14, 15px);
   letter-spacing: 0.2px;
   white-space: nowrap;
   overflow: hidden;
@@ -692,7 +1028,7 @@ body[data-ds-dark-theme] .panel[data-nf-theme='neumorph'] .buttonPrimary {
 }
 
 .navTitleBook {
-  font-size: 11px;
+  font-size: var(--nf-fs-12, 11px);
   color: var(--nf-text-3);
   white-space: nowrap;
   overflow: hidden;
@@ -701,21 +1037,21 @@ body[data-ds-dark-theme] .panel[data-nf-theme='neumorph'] .buttonPrimary {
 
 .panelNavCollapsed .navTitle {
   justify-content: center;
-  padding: 2px 0 10px;
+  padding: var(--nf-space-2, 2px) 0 var(--nf-space-10, 10px);
 }
 
 .panelNavCollapsed .navTitleLogo {
   width: 32px;
-  height: 32px;
+  height: var(--nf-ctrl-m, 32px);
 }
 
 /* 操作行：收起导航 / 关闭面板 */
 .navActions {
   flex: none;
   display: flex;
-  gap: 6px;
+  gap: var(--nf-space-6, 6px);
   margin-top: 8px;
-  padding-top: 8px;
+  padding-top: var(--nf-space-8, 8px);
   border-top: 1px solid var(--nf-border);
 }
 
@@ -725,9 +1061,9 @@ body[data-ds-dark-theme] .panel[data-nf-theme='neumorph'] .buttonPrimary {
   background: rgba(0, 0, 0, 0);
   color: var(--nf-text-2);
   cursor: pointer;
-  border-radius: 10px;
-  height: 32px;
-  font-size: 14px;
+  border-radius: var(--nf-radius-10, 10px);
+  height: var(--nf-ctrl-m, 32px);
+  font-size: var(--nf-fs-14, 14px);
   line-height: 1;
   display: inline-flex;
   align-items: center;
@@ -751,10 +1087,10 @@ body[data-ds-dark-theme] .panel[data-nf-theme='neumorph'] .buttonPrimary {
   flex: none;
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: var(--nf-space-8, 8px);
   margin-top: 4px;
-  padding: 9px;
-  border-radius: 12px;
+  padding: var(--nf-space-10, 9px);
+  border-radius: var(--nf-radius-12, 12px);
   background: var(--nf-bg-inset);
   border: 1px solid var(--nf-border);
   cursor: pointer;
@@ -773,19 +1109,19 @@ body[data-ds-dark-theme] .panel[data-nf-theme='neumorph'] .buttonPrimary {
 .bookSwitchCover {
   width: 26px;
   height: 34px;
-  border-radius: 5px;
+  border-radius: var(--nf-radius-6, 5px);
   background: linear-gradient(160deg, var(--nf-accent), color-mix(in srgb, var(--nf-accent) 45%, #000));
   color: var(--nf-accent-fg);
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 11px;
+  font-size: var(--nf-fs-12, 11px);
   font-weight: 700;
   flex: none;
 }
 
 .bookSwitchName {
-  font-size: 12.5px;
+  font-size: var(--nf-fs-12, 12.5px);
   font-weight: 600;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -793,7 +1129,7 @@ body[data-ds-dark-theme] .panel[data-nf-theme='neumorph'] .buttonPrimary {
 }
 
 .bookSwitchMeta {
-  font-size: 11px;
+  font-size: var(--nf-fs-12, 11px);
   color: var(--nf-text-3);
   overflow: hidden;
   text-overflow: ellipsis;
@@ -803,31 +1139,31 @@ body[data-ds-dark-theme] .panel[data-nf-theme='neumorph'] .buttonPrimary {
 .bookSwitchArrow {
   margin-left: auto;
   color: var(--nf-text-3);
-  font-size: 12px;
+  font-size: var(--nf-fs-12, 12px);
   flex: none;
 }
 
 /* demo 风格统计卡（今日待写 / 写作中 / 已通过 / 待审稿） */
-.statRowD { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
-.statCardD { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 14px 16px; border-radius: 16px; background: var(--nf-bg-inset); border: 1px solid var(--nf-border); min-width: 0; }
-.statCardDLabel { font-size: 12px; color: var(--nf-text-3); }
-.statCardDValue { font-size: 22px; font-weight: 700; margin-top: 2px; color: var(--nf-text); }
-.statCardDUnit { font-size: 12px; color: var(--nf-text-3); font-weight: 400; }
-.statCardDDetail { font-size: 11.5px; color: var(--nf-text-3); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.statRowD { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--nf-space-12, 12px); }
+.statCardD { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--nf-space-10, 10px); padding: var(--nf-space-14, 14px) var(--nf-space-16, 16px); border-radius: var(--nf-radius-16, 16px); background: var(--nf-bg-inset); border: 1px solid var(--nf-border); min-width: 0; }
+.statCardDLabel { font-size: var(--nf-fs-12, 12px); color: var(--nf-text-3); }
+.statCardDValue { font-size: var(--nf-fs-22, 22px); font-weight: 700; margin-top: 2px; color: var(--nf-text); }
+.statCardDUnit { font-size: var(--nf-fs-12, 12px); color: var(--nf-text-3); font-weight: 400; }
+.statCardDDetail { font-size: var(--nf-fs-12, 11.5px); color: var(--nf-text-3); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .statCardDDown { color: var(--nf-error); }
-.statCardDIcon { width: 38px; height: 38px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 18px; flex: none; background: var(--nf-accent-soft); }
+.statCardDIcon { width: 38px; height: var(--nf-ctrl-l, 38px); border-radius: var(--nf-radius-12, 12px); display: flex; align-items: center; justify-content: center; font-size: var(--nf-fs-18, 18px); flex: none; background: var(--nf-accent-soft); }
 .statCardDIconRed { background: color-mix(in srgb, var(--nf-error) 13%, transparent); }
 
 /* demo 风格创作时间线（6 阶段分段条，点击跳转对应 tab） */
-.tlBar { display: flex; gap: 6px; margin-top: 8px; }
-.tlSeg { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; border: none; background: transparent; padding: 0; cursor: pointer; font: inherit; }
-.tlSegTrack { height: 8px; border-radius: 999px; background: var(--nf-hover); border: 1px solid var(--nf-border); overflow: hidden; }
-.tlSegFill { display: block; height: 100%; width: 100%; border-radius: 999px; background: var(--nf-accent); }
+.tlBar { display: flex; gap: var(--nf-space-6, 6px); margin-top: 8px; }
+.tlSeg { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--nf-space-4, 4px); border: none; background: transparent; padding: 0; cursor: pointer; font: inherit; }
+.tlSegTrack { height: 8px; border-radius: var(--nf-radius-999, 999px); background: var(--nf-hover); border: 1px solid var(--nf-border); overflow: hidden; }
+.tlSegFill { display: block; height: 100%; width: 100%; border-radius: var(--nf-radius-999, 999px); background: var(--nf-accent); }
 .tlSegTodo .tlSegFill { opacity: 0; }
 .tlSegTodo .tlSegTrack { background: transparent; }
 .tlSegCurrent .tlSegTrack { border-color: var(--nf-accent); box-shadow: 0 0 0 2px var(--nf-accent-soft); }
 .tlSegCurrent .tlSegFill { opacity: 0.45; }
-.tlSegLabel { font-size: 10.5px; color: var(--nf-text-3); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.tlSegLabel { font-size: var(--nf-fs-12, 10.5px); color: var(--nf-text-3); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 .tlSegDone .tlSegLabel { color: var(--nf-accent); font-weight: 600; }
 .tlSeg:hover .tlSegTrack { border-color: var(--nf-border-strong); }
 
@@ -836,19 +1172,19 @@ body[data-ds-dark-theme] .panel[data-nf-theme='neumorph'] .buttonPrimary {
 
 .card {
   position: relative;
-  border: 1px solid var(--nf-glass-border);
-  border-radius: 22px;
-  padding: var(--nf-density-card, 16px 18px);
+  border: var(--nf-card-border, 1px solid var(--nf-glass-border));
+  border-radius: var(--nf-card-radius, 22px);
+  padding: var(--nf-card-pad, 20px 22px);
   display: flex;
   flex-direction: column;
-  gap: 10px;
+  gap: var(--nf-space-10, 10px);
   background: var(--nf-glass-face);
   box-shadow:
     var(--nf-card-shadow),
-    inset 0 1.5px 0 var(--nf-glass-sheen),
-    inset 0 -1px 0 rgba(255, 255, 255, 0.25);
-  -webkit-backdrop-filter: blur(30px) saturate(180%);
-  backdrop-filter: blur(30px) saturate(180%);
+    inset 0 1.5px 0 var(--nf-card-sheen, var(--nf-glass-sheen)),
+    inset 0 -1px 0 rgba(255, 255, 255, 0.10);
+  -webkit-backdrop-filter: blur(var(--nf-card-blur, 30px)) saturate(var(--nf-card-saturate, 180%)) brightness(var(--nf-card-brightness, 1.06));
+  backdrop-filter: blur(var(--nf-card-blur, 30px)) saturate(var(--nf-card-saturate, 180%)) brightness(var(--nf-card-brightness, 1.06));
   transition: transform 0.22s ease, box-shadow 0.22s ease;
 }
 
@@ -861,7 +1197,7 @@ body[data-ds-dark-theme] .panel[data-nf-theme='neumorph'] .buttonPrimary {
   pointer-events: none;
   background:
     var(--nf-glass-core),
-    linear-gradient(90deg, transparent, var(--nf-glass-sheen), transparent) no-repeat 10% 0 / 80% 1px,
+    linear-gradient(90deg, transparent, var(--nf-card-sheen, var(--nf-glass-sheen)), transparent) no-repeat 10% 0 / 80% 1px,
     linear-gradient(156deg, rgba(255, 255, 255, 0.26) 0%, rgba(255, 255, 255, 0) 55%);
   z-index: 0;
 }
@@ -882,7 +1218,7 @@ body[data-ds-dark-theme] .panel[data-nf-theme='neumorph'] .buttonPrimary {
   transform: translateY(-3px);
   box-shadow:
     var(--nf-card-shadow-hover),
-    inset 0 1.5px 0 var(--nf-glass-sheen),
+    inset 0 1.5px 0 var(--nf-card-sheen, var(--nf-glass-sheen)),
     inset 0 -1px 0 rgba(255, 255, 255, 0.25);
 }
 
@@ -893,26 +1229,27 @@ body[data-ds-dark-theme] .panel[data-nf-theme='neumorph'] .buttonPrimary {
 
 .cardTitle {
   margin: 0;
-  font-size: 14px;
+  font-size: var(--nf-fs-14, 14px);
   font-weight: 650;
   color: var(--nf-text);
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: var(--nf-space-8, 8px);
 }
 
 /* ------------------------------------------------------------ buttons */
 
 .button {
-  border: 1px solid var(--nf-border-strong);
-  background: var(--nf-bg-inset);
+  /* 控件形态令牌：按钮与 input/textarea 一致，随主题（液态/粘土/macOS/新拟物）走形状 */
+  border: 1px solid var(--nf-ctrl-border, var(--nf-border-strong));
+  background: var(--nf-ctrl-bg, var(--nf-bg-inset));
   color: var(--nf-text);
-  padding: 7px 15px;
-  border-radius: 9px;
+  padding: var(--nf-space-8, 7px) var(--nf-space-16, 15px);
+  border-radius: var(--nf-ctrl-radius, 10px);
   cursor: pointer;
-  font-size: 13px;
+  font-size: var(--nf-fs-14, 13px);
   font-weight: 500;
-  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09);
+  box-shadow: inset 0 1px 0 var(--nf-ctrl-sheen, rgba(255, 255, 255, 0.09));
   transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
   white-space: nowrap;
 }
@@ -936,7 +1273,7 @@ body[data-ds-dark-theme] .panel[data-nf-theme='neumorph'] .buttonPrimary {
   border-color: transparent;
   background: linear-gradient(180deg, color-mix(in srgb, var(--nf-accent) 88%, #ffffff), var(--nf-accent));
   color: var(--nf-accent-fg);
-  border-radius: 10px;
+  border-radius: var(--nf-radius-10, 10px);
   box-shadow: 0 2px 10px color-mix(in srgb, var(--nf-accent) 45%, transparent), 0 0 0 0.5px color-mix(in srgb, var(--nf-accent) 30%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.45);
 }
 
@@ -957,9 +1294,10 @@ body[data-ds-dark-theme] .panel[data-nf-theme='neumorph'] .buttonPrimary {
 }
 
 .buttonSmall {
-  padding: 4px 10px;
-  font-size: 12px;
-  border-radius: 8px;
+  padding: var(--nf-space-4, 4px) var(--nf-space-10, 10px);
+  font-size: var(--nf-fs-12, 12px);
+  /* 与常规按钮同一控件形态令牌，保证主题一致 */
+  border-radius: var(--nf-ctrl-radius, 8px);
 }
 
 /* ------------------------------------------------------------ forms */
@@ -967,25 +1305,26 @@ body[data-ds-dark-theme] .panel[data-nf-theme='neumorph'] .buttonPrimary {
 .field {
   display: flex;
   flex-direction: column;
-  gap: 5px;
+  gap: var(--nf-space-6, 5px);
 }
 
 .fieldLabel {
-  font-size: 12px;
+  font-size: var(--nf-fs-12, 12px);
   color: var(--nf-text-2);
   font-weight: 500;
 }
 
 .input {
-  border: 1px solid var(--nf-border-strong);
-  background: var(--nf-bg-inset);
+  border: var(--nf-ctrl-border, 1px solid var(--nf-border-strong));
+  background: var(--nf-ctrl-bg, var(--nf-bg-inset));
   color: var(--nf-text);
   color-scheme: light;
-  border-radius: 12px;
-  padding: 7px 11px;
-  font-size: 13px;
+  border-radius: var(--nf-ctrl-radius, 12px);
+  padding: var(--nf-space-8, 7px) var(--nf-space-12, 11px);
+  font-size: var(--nf-fs-14, 13px);
   width: 100%;
   box-sizing: border-box;
+  box-shadow: inset 0 1px 0 var(--nf-ctrl-sheen, rgba(255, 255, 255, 0.09));
   transition: border-color 0.15s ease, box-shadow 0.15s ease;
 }
 
@@ -1004,11 +1343,21 @@ body:not([data-ds-dark-theme]) .panel[data-nf-theme='neumorph'] .input {
 }
 select.input {
   cursor: pointer;
+  appearance: none;
+  -webkit-appearance: none;
+  /* 自绘下拉箭头（跟随主题色），去掉浏览器默认黑色 caret */
+  background-image:
+    linear-gradient(45deg, transparent 50%, var(--nf-ctrl-caret, var(--nf-text-3)) 50%),
+    linear-gradient(135deg, var(--nf-ctrl-caret, var(--nf-text-3)) 50%, transparent 50%);
+  background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%;
+  background-size: 6px 6px, 6px 6px;
+  background-repeat: no-repeat;
+  padding-right: 30px;
 }
 .input option {
   color: var(--nf-text);
   background: var(--nf-bg-raise);
-  font-size: 15px;
+  font-size: var(--nf-fs-14, 15px);
 }
 
 .input:focus,
@@ -1024,12 +1373,12 @@ select.input {
 }
 
 .textarea {
-  border: 1px solid var(--nf-border-strong);
-  background: var(--nf-bg-inset);
+  border: var(--nf-ctrl-border, 1px solid var(--nf-border-strong));
+  background: var(--nf-ctrl-bg, var(--nf-bg-inset));
   color: var(--nf-text);
-  border-radius: 12px;
-  padding: 9px 11px;
-  font-size: 13px;
+  border-radius: var(--nf-ctrl-radius, 12px);
+  padding: var(--nf-space-10, 9px) var(--nf-space-12, 11px);
+  font-size: var(--nf-fs-14, 13px);
   width: 100%;
   box-sizing: border-box;
   min-height: 200px;
@@ -1042,7 +1391,7 @@ select.input {
 .row {
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: var(--nf-space-8, 8px);
   flex-wrap: wrap;
 }
 
@@ -1055,27 +1404,27 @@ select.input {
 .chapterList {
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  gap: var(--nf-space-8, 8px);
 }
 
 /* 章节按卷分组 */
 .volumeGroup {
   display: flex;
   flex-direction: column;
-  gap: 6px;
+  gap: var(--nf-space-6, 6px);
 }
 
 .volumeGroupHeader {
   display: flex;
   align-items: center;
-  gap: 8px;
-  padding: 6px 10px;
-  border-radius: 10px;
+  gap: var(--nf-space-8, 8px);
+  padding: var(--nf-space-6, 6px) var(--nf-space-10, 10px);
+  border-radius: var(--nf-radius-10, 10px);
   background: var(--nf-bg-inset);
   border: 1px solid var(--nf-border);
   cursor: pointer;
   user-select: none;
-  font-size: 13px;
+  font-size: var(--nf-fs-14, 13px);
   transition: border-color 0.15s ease;
 }
 
@@ -1085,17 +1434,17 @@ select.input {
 
 .volumeGroupToggle {
   flex: none;
-  font-size: 11px;
+  font-size: var(--nf-fs-12, 11px);
   color: var(--nf-text-2);
 }
 
 .chapter {
   display: flex;
   align-items: center;
-  gap: 10px;
-  padding: 9px 12px;
+  gap: var(--nf-space-10, 10px);
+  padding: var(--nf-space-10, 9px) var(--nf-space-12, 12px);
   border: 1px solid var(--nf-border);
-  border-radius: 10px;
+  border-radius: var(--nf-radius-10, 10px);
   background: var(--nf-bg);
   transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
 }
@@ -1122,12 +1471,12 @@ select.input {
   align-items: center;
   justify-content: center;
   min-width: 28px;
-  height: 28px;
-  padding: 0 8px;
-  border-radius: 8px;
+  height: var(--nf-ctrl-s, 28px);
+  padding: 0 var(--nf-space-8, 8px);
+  border-radius: var(--nf-radius-8, 8px);
   background: var(--nf-bg-inset);
   border: 1px solid var(--nf-border);
-  font-size: 12px;
+  font-size: var(--nf-fs-12, 12px);
   font-weight: 700;
   color: var(--nf-text-2);
   flex-shrink: 0;
@@ -1140,15 +1489,15 @@ select.input {
 
 .chapterTitle {
   font-weight: 600;
-  font-size: 13px;
+  font-size: var(--nf-fs-14, 13px);
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: var(--nf-space-8, 8px);
   color: var(--nf-text);
 }
 
 .chapterBeats {
-  font-size: 12px;
+  font-size: var(--nf-fs-12, 12px);
   color: var(--nf-text-2);
   opacity: 0.85;
   overflow: hidden;
@@ -1158,7 +1507,7 @@ select.input {
 
 .chapterActions {
   display: flex;
-  gap: 4px;
+  gap: var(--nf-space-4, 4px);
   flex-shrink: 0;
   opacity: 0.85;
   transition: opacity 0.15s ease;
@@ -1171,9 +1520,9 @@ select.input {
 /* ------------------------------------------------------------ badges */
 
 .badge {
-  font-size: 11px;
-  padding: 2px 9px;
-  border-radius: 999px;
+  font-size: var(--nf-fs-12, 11px);
+  padding: var(--nf-space-2, 2px) var(--nf-space-10, 9px);
+  border-radius: var(--nf-radius-999, 999px);
   border: 1px solid;
   white-space: nowrap;
   font-weight: 600;
@@ -1221,13 +1570,13 @@ select.input {
 
 .reviewBox {
   border: 1px solid var(--nf-border);
-  border-radius: 10px;
-  padding: 10px 12px;
+  border-radius: var(--nf-radius-10, 10px);
+  padding: var(--nf-space-10, 10px) var(--nf-space-12, 12px);
   background: var(--nf-bg-inset);
   display: flex;
   flex-direction: column;
-  gap: 6px;
-  font-size: 12.5px;
+  gap: var(--nf-space-6, 6px);
+  font-size: var(--nf-fs-12, 12.5px);
 }
 
 .chapterPreview {
@@ -1235,14 +1584,14 @@ select.input {
   overflow: auto;
   white-space: pre-wrap;
   word-break: break-all;
-  font-size: 12.5px;
+  font-size: var(--nf-fs-12, 12.5px);
   line-height: 1.8;
   font-family: inherit;
   color: var(--nf-text);
   background: var(--nf-bg-inset);
   border: 1px solid var(--nf-border);
-  border-radius: 10px;
-  padding: 10px 12px;
+  border-radius: var(--nf-radius-10, 10px);
+  padding: var(--nf-space-10, 10px) var(--nf-space-12, 12px);
   margin: 0;
 }
 
@@ -1255,10 +1604,10 @@ select.input {
   overflow-y: auto;
   display: flex;
   flex-direction: column;
-  gap: 10px;
-  padding: 14px;
+  gap: var(--nf-space-10, 10px);
+  padding: var(--nf-space-14, 14px);
   border: 1px solid var(--nf-border);
-  border-radius: 12px;
+  border-radius: var(--nf-radius-12, 12px);
   background: var(--nf-bg-inset);
 }
 
@@ -1267,9 +1616,9 @@ select.input {
   max-width: 90%;
   background: linear-gradient(180deg, var(--nf-accent), var(--nf-accent-hover));
   color: var(--nf-accent-fg);
-  border-radius: 14px 14px 4px 14px;
-  padding: 9px 14px;
-  font-size: 13px;
+  border-radius: var(--nf-radius-14, 14px) var(--nf-radius-14, 14px) var(--nf-radius-4, 4px) var(--nf-radius-14, 14px);
+  padding: var(--nf-space-10, 9px) var(--nf-space-14, 14px);
+  font-size: var(--nf-fs-14, 13px);
   box-shadow: 0 2px 6px rgba(77, 107, 254, 0.2);
 }
 
@@ -1279,14 +1628,14 @@ select.input {
   background: var(--nf-bg-raise);
   color: var(--nf-text);
   border: 1px solid var(--nf-border);
-  border-radius: 14px 14px 14px 4px;
-  padding: 9px 14px;
-  font-size: 13px;
+  border-radius: var(--nf-radius-14, 14px) var(--nf-radius-14, 14px) var(--nf-radius-14, 14px) var(--nf-radius-4, 4px);
+  padding: var(--nf-space-10, 9px) var(--nf-space-14, 14px);
+  font-size: var(--nf-fs-14, 13px);
   box-shadow: var(--nf-shadow);
 }
 
 .chatRole {
-  font-size: 11px;
+  font-size: var(--nf-fs-12, 11px);
   color: var(--nf-text-3);
   margin-bottom: 3px;
   font-weight: 600;
@@ -1295,11 +1644,11 @@ select.input {
 /* Live tool output (text streaming while a chapter is generated/rewritten). */
 .toolLive {
   margin-top: 6px;
-  padding: 8px 10px;
-  border-radius: 8px;
+  padding: var(--nf-space-8, 8px) var(--nf-space-10, 10px);
+  border-radius: var(--nf-radius-8, 8px);
   background: var(--nf-bg-inset);
   border: 1px dashed var(--nf-border-strong);
-  font-size: 12px;
+  font-size: var(--nf-fs-12, 12px);
   line-height: 1.7;
   white-space: pre-wrap;
   word-break: break-all;
@@ -1312,15 +1661,15 @@ select.input {
 .assistantStatus {
   flex: none;
   margin-top: 6px;
-  padding: 6px 12px;
-  border-radius: 999px;
-  font-size: 12px;
+  padding: var(--nf-space-6, 6px) var(--nf-space-12, 12px);
+  border-radius: var(--nf-radius-999, 999px);
+  font-size: var(--nf-fs-12, 12px);
   color: var(--nf-text-2);
   background: var(--nf-bg-inset);
   border: 1px solid var(--nf-border);
   display: flex;
   align-items: center;
-  gap: 6px;
+  gap: var(--nf-space-6, 6px);
 }
 
 .assistantStatusBusy {
@@ -1334,17 +1683,17 @@ select.input {
 .toolSteps {
   display: flex;
   flex-direction: column;
-  gap: 4px;
+  gap: var(--nf-space-4, 4px);
   margin-top: 6px;
 }
 
 .toolStep {
   display: flex;
   align-items: center;
-  gap: 8px;
-  padding: 5px 10px;
-  border-radius: 8px;
-  font-size: 12px;
+  gap: var(--nf-space-8, 8px);
+  padding: var(--nf-space-6, 5px) var(--nf-space-10, 10px);
+  border-radius: var(--nf-radius-8, 8px);
+  font-size: var(--nf-fs-12, 12px);
   background: var(--nf-bg-inset);
   border: 1px solid var(--nf-border);
 }
@@ -1361,7 +1710,7 @@ select.input {
 
 .toolStepIcon {
   flex: none;
-  font-size: 13px;
+  font-size: var(--nf-fs-14, 13px);
 }
 
 .toolStepName {
@@ -1376,7 +1725,7 @@ select.input {
 .toolStepStatus {
   flex: none;
   color: var(--nf-text-2);
-  font-size: 11px;
+  font-size: var(--nf-fs-12, 11px);
 }
 
 .toolStepActive .toolStepStatus {
@@ -1390,7 +1739,7 @@ select.input {
 .toolStepDetail {
   width: 100%;
   color: var(--nf-error);
-  font-size: 11px;
+  font-size: var(--nf-fs-12, 11px);
   word-break: break-all;
 }
 
@@ -1398,9 +1747,9 @@ select.input {
 
 .progress {
   border: 1px solid var(--nf-border);
-  border-radius: 10px;
-  padding: 10px 14px;
-  font-size: 12px;
+  border-radius: var(--nf-radius-10, 10px);
+  padding: var(--nf-space-10, 10px) var(--nf-space-14, 14px);
+  font-size: var(--nf-fs-12, 12px);
   min-height: 60px;
   max-height: 220px;
   overflow: auto;
@@ -1422,7 +1771,7 @@ select.input {
   font-weight: 600;
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: var(--nf-space-8, 8px);
 }
 
 .progressBar {
@@ -1430,7 +1779,7 @@ select.input {
   flex: none;
   width: 110px;
   height: 6px;
-  border-radius: 999px;
+  border-radius: var(--nf-radius-999, 999px);
   background: var(--nf-border);
   overflow: hidden;
 }
@@ -1438,7 +1787,7 @@ select.input {
 .progressBarFill {
   display: block;
   height: 100%;
-  border-radius: 3px;
+  border-radius: var(--nf-radius-4, 3px);
   background: var(--nf-accent);
   transition: width 0.3s ease;
 }
@@ -1448,12 +1797,12 @@ select.input {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 12px;
+  gap: var(--nf-space-12, 12px);
   flex-wrap: wrap;
 }
 
 .liveText {
-  font-size: 12px;
+  font-size: var(--nf-fs-12, 12px);
   font-variant-numeric: tabular-nums;
   color: var(--nf-text-2);
 }
@@ -1461,7 +1810,7 @@ select.input {
 .bigProgressBar {
   margin-top: 10px;
   height: 8px;
-  border-radius: 999px;
+  border-radius: var(--nf-radius-999, 999px);
   background: var(--nf-border);
   overflow: hidden;
 }
@@ -1469,7 +1818,7 @@ select.input {
 .bigProgressBarFill {
   display: block;
   height: 100%;
-  border-radius: 999px;
+  border-radius: var(--nf-radius-999, 999px);
   background: linear-gradient(90deg, var(--nf-accent), var(--nf-accent-2, var(--nf-accent)));
   transition: width 0.3s ease;
 }
@@ -1478,10 +1827,10 @@ select.input {
 .diffLegend {
   display: flex;
   align-items: center;
-  gap: 14px;
+  gap: var(--nf-space-14, 14px);
   flex-wrap: wrap;
   margin: 6px 0 8px;
-  font-size: 12px;
+  font-size: var(--nf-fs-12, 12px);
 }
 
 .legendOld {
@@ -1497,7 +1846,7 @@ select.input {
 .onlyChanges {
   display: inline-flex;
   align-items: center;
-  gap: 4px;
+  gap: var(--nf-space-4, 4px);
   color: var(--nf-text-2);
   cursor: pointer;
   margin-left: auto;
@@ -1508,27 +1857,27 @@ select.input {
   min-height: 0;
   overflow-y: auto;
   border: 1px solid var(--nf-border);
-  border-radius: 8px;
+  border-radius: var(--nf-radius-8, 8px);
   background: var(--nf-bg-inset);
-  padding: 10px 12px;
+  padding: var(--nf-space-10, 10px) var(--nf-space-12, 12px);
   display: flex;
   flex-direction: column;
-  gap: 8px;
-  font-size: 13px;
+  gap: var(--nf-space-8, 8px);
+  font-size: var(--nf-fs-14, 13px);
   line-height: 1.7;
 }
 
 .diffSame {
   border: 1px dashed var(--nf-border);
-  border-radius: 6px;
-  padding: 6px 10px;
+  border-radius: var(--nf-radius-6, 6px);
+  padding: var(--nf-space-6, 6px) var(--nf-space-10, 10px);
   color: var(--nf-text-2);
   opacity: 0.85;
 }
 
 .diffSame summary {
   cursor: pointer;
-  font-size: 12px;
+  font-size: var(--nf-fs-12, 12px);
   user-select: none;
 }
 
@@ -1542,16 +1891,16 @@ select.input {
   display: grid;
   grid-template-columns: 1fr 1fr;
   border: 1px solid var(--nf-border);
-  border-radius: 8px;
+  border-radius: var(--nf-radius-8, 8px);
   overflow: hidden;
 }
 
 .diffColumn {
   display: flex;
   flex-direction: column;
-  gap: 6px;
+  gap: var(--nf-space-6, 6px);
   min-width: 0;
-  padding: 8px 10px;
+  padding: var(--nf-space-8, 8px) var(--nf-space-10, 10px);
 }
 
 .diffColumn:first-child {
@@ -1562,10 +1911,10 @@ select.input {
 .diffTagNew {
   align-self: flex-start;
   flex: none;
-  font-size: 11px;
+  font-size: var(--nf-fs-12, 11px);
   font-weight: 700;
-  border-radius: 4px;
-  padding: 1px 7px;
+  border-radius: var(--nf-radius-4, 4px);
+  padding: var(--nf-space-2, 1px) var(--nf-space-8, 7px);
   letter-spacing: 0.5px;
 }
 
@@ -1597,9 +1946,9 @@ select.input {
 .diffDel {
   display: flex;
   flex-direction: column;
-  gap: 4px;
-  padding: 6px 10px;
-  border-radius: 6px;
+  gap: var(--nf-space-4, 4px);
+  padding: var(--nf-space-6, 6px) var(--nf-space-10, 10px);
+  border-radius: var(--nf-radius-6, 6px);
   border: 1px solid color-mix(in srgb, var(--nf-error) 35%, transparent);
   background: color-mix(in srgb, var(--nf-error) 7%, transparent);
 }
@@ -1607,9 +1956,9 @@ select.input {
 .diffAdd {
   display: flex;
   flex-direction: column;
-  gap: 4px;
-  padding: 6px 10px;
-  border-radius: 6px;
+  gap: var(--nf-space-4, 4px);
+  padding: var(--nf-space-6, 6px) var(--nf-space-10, 10px);
+  border-radius: var(--nf-radius-6, 6px);
   border: 1px solid color-mix(in srgb, var(--nf-success) 35%, transparent);
   background: color-mix(in srgb, var(--nf-success) 7%, transparent);
 }
@@ -1634,13 +1983,13 @@ select.input {
   flex-direction: column;
   flex: 1;
   min-height: 0;
-  gap: 10px;
+  gap: var(--nf-space-10, 10px);
 }
 
 .wsPageHeader {
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: var(--nf-space-8, 8px);
   flex: none;
   flex-wrap: wrap;
 }
@@ -1650,20 +1999,20 @@ select.input {
   flex: none;
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: var(--nf-space-8, 8px);
   flex-wrap: wrap;
-  padding: 8px 12px;
+  padding: var(--nf-space-8, 8px) var(--nf-space-12, 12px);
   border: 1px solid var(--nf-success);
-  border-radius: 10px;
+  border-radius: var(--nf-radius-10, 10px);
   background: color-mix(in srgb, var(--nf-success) 8%, transparent);
-  font-size: 12px;
+  font-size: var(--nf-fs-12, 12px);
   font-weight: 600;
 }
 
 .wsColumns {
   display: grid;
   grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
-  gap: 14px;
+  gap: var(--nf-space-14, 14px);
   flex: 1;
   min-height: 0;
 }
@@ -1671,7 +2020,7 @@ select.input {
 .wsColumn {
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  gap: var(--nf-space-8, 8px);
   min-width: 0;
   min-height: 0;
 }
@@ -1681,15 +2030,15 @@ select.input {
   min-height: 0;
   resize: vertical;
   font-family: var(--nf-font);
-  font-size: 13px;
+  font-size: var(--nf-fs-14, 13px);
   line-height: 1.75;
   white-space: pre-wrap;
 }
 
 .wsSelected {
   border: 1px solid var(--nf-accent);
-  border-radius: 6px;
-  padding: 6px 10px;
+  border-radius: var(--nf-radius-6, 6px);
+  padding: var(--nf-space-6, 6px) var(--nf-space-10, 10px);
   background: color-mix(in srgb, var(--nf-accent) 8%, transparent);
   max-height: 120px;
   overflow: auto;
@@ -1697,18 +2046,18 @@ select.input {
 
 .wsSelectedText {
   margin-top: 4px;
-  font-size: 12px;
+  font-size: var(--nf-fs-12, 12px);
   color: var(--nf-text-2);
   white-space: pre-wrap;
 }
 
 .wsPreview {
   border: 1px solid var(--nf-border);
-  border-radius: 8px;
-  padding: 8px 10px;
+  border-radius: var(--nf-radius-8, 8px);
+  padding: var(--nf-space-8, 8px) var(--nf-space-10, 10px);
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  gap: var(--nf-space-8, 8px);
   background: var(--nf-bg-inset);
 }
 
@@ -1717,7 +2066,7 @@ select.input {
   flex: 1;
   min-height: 0;
   overflow: auto;
-  font-size: 13px;
+  font-size: var(--nf-fs-14, 13px);
   line-height: 1.7;
   white-space: pre-wrap;
   color: var(--nf-text);
@@ -1727,16 +2076,16 @@ select.input {
 .assetGrid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
-  gap: 10px;
+  gap: var(--nf-space-10, 10px);
 }
 
 .assetStat {
   border: 1px solid var(--nf-glass-border);
-  border-radius: 14px;
-  padding: 10px 12px;
+  border-radius: var(--nf-radius-14, 14px);
+  padding: var(--nf-space-10, 10px) var(--nf-space-12, 12px);
   display: flex;
   flex-direction: column;
-  gap: 4px;
+  gap: var(--nf-space-4, 4px);
   background: var(--nf-glass-face);
   box-shadow: var(--nf-card-shadow), inset 0 1px 0 var(--nf-glass-sheen);
   -webkit-backdrop-filter: blur(30px) saturate(180%);
@@ -1750,20 +2099,20 @@ select.input {
 }
 
 .assetStatLabel {
-  font-size: 11px;
+  font-size: var(--nf-fs-12, 11px);
   color: var(--nf-text-2);
   opacity: 0.9;
 }
 
 .assetStatValue {
-  font-size: 15px;
+  font-size: var(--nf-fs-14, 15px);
   font-weight: 700;
   line-height: 1.2;
   color: var(--nf-text);
 }
 
 .assetStatDetail {
-  font-size: 11px;
+  font-size: var(--nf-fs-12, 11px);
   color: var(--nf-text-2);
   opacity: 0.85;
   overflow: hidden;
@@ -1776,8 +2125,9 @@ select.input {
 .dashHero {
   position: relative;
   border: 1px solid var(--nf-glass-border);
-  border-radius: 22px;
-  padding: 18px 20px;
+  border-radius: var(--nf-radius-22, 22px);
+  /* 主容器统一：与设置页卡片同一 --nf-card-pad */
+  padding: var(--nf-card-pad, 20px 22px);
   background: var(--nf-glass-face);
   box-shadow:
     var(--nf-card-shadow),
@@ -1787,7 +2137,7 @@ select.input {
   backdrop-filter: blur(30px) saturate(180%);
   display: flex;
   flex-direction: column;
-  gap: 14px;
+  gap: var(--nf-space-14, 14px);
   transition: transform 0.22s ease, box-shadow 0.22s ease;
 }
 
@@ -1833,25 +2183,25 @@ select.input {
 .dashHeroEyebrow {
   display: inline-flex;
   align-items: center;
-  gap: 6px;
-  font-size: 13px;
+  gap: var(--nf-space-6, 6px);
+  font-size: var(--nf-fs-14, 13px);
   font-weight: 600;
   color: var(--nf-accent);
 }
 
 .dashHeroSparkle {
-  font-size: 14px;
+  font-size: var(--nf-fs-14, 14px);
 }
 
 .dashHeroTitle {
   display: flex;
   flex-direction: column;
-  gap: 2px;
+  gap: var(--nf-space-2, 2px);
 }
 
 .dashHeroBook {
   margin: 0;
-  font-size: 24px;
+  font-size: var(--nf-fs-24, 24px);
   font-weight: 700;
   letter-spacing: -0.3px;
   line-height: 1.25;
@@ -1860,25 +2210,25 @@ select.input {
 .dashHeroAction {
   display: flex;
   align-items: center;
-  gap: 12px;
+  gap: var(--nf-space-12, 12px);
   border: 1px solid var(--nf-glass-border);
-  border-radius: 14px;
+  border-radius: var(--nf-radius-14, 14px);
   background: var(--nf-glass-inset);
   box-shadow: inset 0 1px 0 var(--nf-glass-sheen);
-  padding: 10px 14px;
+  padding: var(--nf-space-10, 10px) var(--nf-space-14, 14px);
 }
 
 .dashHeroArrow {
   flex: none;
   width: 28px;
-  height: 28px;
+  height: var(--nf-ctrl-s, 28px);
   border-radius: 50%;
   background: var(--nf-accent);
   color: #fff;
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  font-size: 14px;
+  font-size: var(--nf-fs-14, 14px);
 }
 
 .dashHeroActionBody {
@@ -1886,23 +2236,23 @@ select.input {
   min-width: 0;
   display: flex;
   flex-direction: column;
-  gap: 2px;
+  gap: var(--nf-space-2, 2px);
 }
 
 .dashHeroActionTitle {
-  font-size: 14px;
+  font-size: var(--nf-fs-14, 14px);
   font-weight: 600;
 }
 
 .dashJourney {
   display: flex;
   flex-direction: column;
-  gap: 6px;
+  gap: var(--nf-space-6, 6px);
 }
 
 .dashJourneyBar {
   height: 6px;
-  border-radius: 999px;
+  border-radius: var(--nf-radius-999, 999px);
   background: var(--nf-border);
   overflow: hidden;
 }
@@ -1910,7 +2260,7 @@ select.input {
 .dashJourneyFill {
   display: block;
   height: 100%;
-  border-radius: 999px;
+  border-radius: var(--nf-radius-999, 999px);
   background: linear-gradient(90deg, var(--nf-info), var(--nf-accent));
   transition: width 0.4s ease;
 }
@@ -1918,15 +2268,15 @@ select.input {
 .dashJourneyStages {
   display: grid;
   grid-template-columns: repeat(6, minmax(0, 1fr));
-  gap: 4px;
+  gap: var(--nf-space-4, 4px);
 }
 
 .dashStage {
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 3px;
-  font-size: 11px;
+  gap: var(--nf-space-4, 3px);
+  font-size: var(--nf-fs-12, 11px);
   color: var(--nf-text-3);
   text-align: center;
   white-space: nowrap;
@@ -1940,7 +2290,7 @@ select.input {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  font-size: 10px;
+  font-size: var(--nf-fs-12, 10px);
   background: var(--nf-bg-base);
 }
 
@@ -1968,20 +2318,20 @@ select.input {
 .dashFacts {
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
-  gap: 8px;
+  gap: var(--nf-space-8, 8px);
   border-top: 1px solid var(--nf-border);
-  padding-top: 12px;
+  padding-top: var(--nf-space-12, 12px);
 }
 
 .dashFact {
   display: flex;
   flex-direction: column;
-  gap: 2px;
+  gap: var(--nf-space-2, 2px);
   min-width: 0;
 }
 
 .dashFact b {
-  font-size: 13px;
+  font-size: var(--nf-fs-14, 13px);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -1990,17 +2340,17 @@ select.input {
 .dashGrid {
   display: grid;
   grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
-  gap: 14px;
+  gap: var(--nf-space-14, 14px);
   align-items: start;
 }
 
 .todoItem {
   display: flex;
   align-items: center;
-  gap: 10px;
-  border-radius: 8px;
-  padding: 8px 12px;
-  font-size: 12.5px;
+  gap: var(--nf-space-10, 10px);
+  border-radius: var(--nf-radius-8, 8px);
+  padding: var(--nf-space-8, 8px) var(--nf-space-12, 12px);
+  font-size: var(--nf-fs-12, 12.5px);
   border: 1px solid var(--nf-border);
 }
 
@@ -2024,17 +2374,17 @@ select.input {
   min-width: 0;
   display: flex;
   flex-direction: column;
-  gap: 2px;
+  gap: var(--nf-space-2, 2px);
 }
 
 /* 只读大纲（开书后的出生证明） */
 .outlineReadonly {
   margin: 0;
-  padding: 12px 14px;
+  padding: var(--nf-space-12, 12px) var(--nf-space-14, 14px);
   border: 1px solid var(--nf-border);
-  border-radius: 12px;
+  border-radius: var(--nf-radius-12, 12px);
   background: var(--nf-bg-inset);
-  font-size: 12.5px;
+  font-size: var(--nf-fs-12, 12.5px);
   line-height: 1.8;
   white-space: pre-wrap;
   max-height: 480px;
@@ -2046,7 +2396,7 @@ select.input {
 .bookCreateOutline {
   display: flex;
   flex-direction: column;
-  gap: 6px;
+  gap: var(--nf-space-6, 6px);
   align-items: flex-start;
 }
 
@@ -2057,7 +2407,7 @@ select.input {
   display: flex;
   flex-direction: column;
   border: 1px solid var(--nf-border);
-  border-radius: 16px;
+  border-radius: var(--nf-radius-16, 16px);
   background: var(--nf-bg-raise);
   -webkit-backdrop-filter: blur(24px) saturate(180%);
   backdrop-filter: blur(24px) saturate(180%);
@@ -2072,11 +2422,11 @@ select.input {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 8px;
-  padding: 8px 10px 8px 14px;
+  gap: var(--nf-space-8, 8px);
+  padding: var(--nf-space-8, 8px) var(--nf-space-10, 10px) var(--nf-space-8, 8px) var(--nf-space-14, 14px);
   cursor: grab;
   user-select: none;
-  font-size: 13px;
+  font-size: var(--nf-fs-14, 13px);
   font-weight: 600;
   border-bottom: 1px solid var(--nf-border);
   background: var(--nf-bg-inset);
@@ -2091,7 +2441,7 @@ select.input {
   min-height: 0;
   overflow: hidden;
   display: flex;
-  padding: 10px;
+  padding: var(--nf-space-10, 10px);
 }
 
 .assistantFloatBody > * {
@@ -2116,7 +2466,7 @@ select.input {
   width: 150px;
   height: 200px;
   border: 1px solid var(--nf-border);
-  border-radius: 12px;
+  border-radius: var(--nf-radius-12, 12px);
   overflow: hidden;
   background: var(--nf-bg-inset);
   display: flex;
@@ -2132,7 +2482,7 @@ select.input {
 }
 
 .coverPlaceholder {
-  font-size: 12px;
+  font-size: var(--nf-fs-12, 12px);
   color: var(--nf-text-3);
 }
 
@@ -2142,32 +2492,32 @@ select.input {
   flex: 1;
   min-height: 0;
   overflow: auto;
-  padding: var(--nf-density-pad, 18px);
+  padding: var(--nf-container-pad, 20px 22px);
   display: flex;
   flex-direction: column;
-  gap: var(--nf-density-gap, 16px);
+  gap: var(--nf-container-gap, 14px);
 }
 
 .shelfHeader {
   display: flex;
   flex-direction: column;
-  gap: 10px;
+  gap: var(--nf-space-10, 10px);
 }
 
 /* 书架顶部主容器：加高玻璃卡 */
 .shelfHero {
   display: flex;
   flex-direction: column;
-  gap: 14px;
-  padding: var(--nf-density-card, 22px 24px);
+  gap: var(--nf-space-14, 14px);
+  padding: var(--nf-card-pad, 20px 22px);
   border: 1px solid var(--nf-glass-border);
-  border-radius: 22px;
+  border-radius: var(--nf-radius-22, 22px);
   background: var(--nf-glass-face);
   box-shadow: var(--nf-shadow), inset 0 1.5px 0 var(--nf-glass-sheen);
 }
 
 .shelfHero .panelTitle {
-  font-size: 22px;
+  font-size: var(--nf-fs-22, 22px);
   letter-spacing: 0.3px;
 }
 
@@ -2175,14 +2525,14 @@ select.input {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 10px;
+  gap: var(--nf-space-10, 10px);
   flex-wrap: wrap;
 }
 
 .shelfToolbar {
   display: flex;
   align-items: center;
-  gap: 10px;
+  gap: var(--nf-space-10, 10px);
   flex-wrap: wrap;
 }
 
@@ -2195,17 +2545,17 @@ select.input {
 .shelfStats {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
-  gap: 10px;
+  gap: var(--nf-space-10, 10px);
 }
 
 .shelfStat {
   display: flex;
   align-items: baseline;
   justify-content: space-between;
-  gap: 8px;
-  padding: 10px 14px;
+  gap: var(--nf-space-8, 8px);
+  padding: var(--nf-space-10, 10px) var(--nf-space-14, 14px);
   border: 1px solid var(--nf-glass-border);
-  border-radius: 14px;
+  border-radius: var(--nf-radius-14, 14px);
   background: var(--nf-glass-face);
   box-shadow: var(--nf-shadow), inset 0 1px 0 var(--nf-glass-sheen);
   cursor: pointer;
@@ -2225,23 +2575,23 @@ select.input {
 }
 
 .shelfStat b {
-  font-size: 20px;
+  font-size: var(--nf-fs-20, 20px);
   font-weight: 800;
   color: var(--nf-accent);
 }
 
 .shelfStat span {
-  font-size: 12px;
+  font-size: var(--nf-fs-12, 12px);
   color: var(--nf-text-2);
 }
 
 /* 筛选：胶囊分段控件 */
 .shelfFilters {
   display: inline-flex;
-  gap: 2px;
-  padding: 3px;
+  gap: var(--nf-space-2, 2px);
+  padding: var(--nf-space-4, 3px);
   border: 1px solid var(--nf-border);
-  border-radius: 999px;
+  border-radius: var(--nf-radius-999, 999px);
   background: var(--nf-bg-inset);
 }
 
@@ -2249,14 +2599,14 @@ select.input {
   border: none;
   background: transparent;
   color: var(--nf-text-2);
-  font-size: 12.5px;
+  font-size: var(--nf-fs-12, 12.5px);
   font-weight: 600;
-  padding: 5px 12px;
-  border-radius: 999px;
+  padding: var(--nf-space-6, 5px) var(--nf-space-12, 12px);
+  border-radius: var(--nf-radius-999, 999px);
   cursor: pointer;
   display: inline-flex;
   align-items: center;
-  gap: 5px;
+  gap: var(--nf-space-6, 5px);
   white-space: nowrap;
   transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
 }
@@ -2272,11 +2622,11 @@ select.input {
 }
 
 .shelfFilterCount {
-  font-size: 10.5px;
+  font-size: var(--nf-fs-12, 10.5px);
   opacity: 0.8;
   background: color-mix(in srgb, currentColor 14%, transparent);
-  border-radius: 999px;
-  padding: 0 6px;
+  border-radius: var(--nf-radius-999, 999px);
+  padding: 0 var(--nf-space-6, 6px);
 }
 
 /* 书架空态 / 无结果引导卡 */
@@ -2286,10 +2636,10 @@ select.input {
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  gap: 10px;
-  padding: 40px 20px;
+  gap: var(--nf-space-10, 10px);
+  padding: var(--nf-space-40, 40px) var(--nf-space-20, 20px);
   border: 1px dashed var(--nf-border-strong);
-  border-radius: 16px;
+  border-radius: var(--nf-radius-16, 16px);
   background: var(--nf-bg-raise);
   -webkit-backdrop-filter: blur(24px) saturate(180%);
   backdrop-filter: blur(24px) saturate(180%);
@@ -2297,43 +2647,45 @@ select.input {
 }
 
 .shelfEmptyIcon {
-  font-size: 42px;
+  font-size: var(--nf-fs-42, 42px);
 }
 
 .shelfEmptyTitle {
-  font-size: 16px;
+  font-size: var(--nf-fs-16, 16px);
   font-weight: 700;
 }
 
 .shelfGrid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
-  gap: var(--nf-density-gap, 14px);
+  gap: var(--nf-container-gap, 14px);
   align-content: start;
 }
 
 /* ------------------------------------------------------------
  * 外观设置扩展：强制显示模式 + 界面密度 + 主题暗色覆盖
  * ------------------------------------------------------------ */
+/* 界面密度：唯一允许重定义尺寸的开关（主题永不触碰这些令牌）。
+ * comfort = 设置页主容器基准；compact/spacious 只缩放令牌，不改组件。 */
 .panel {
-  --nf-density-card: 16px 18px;
-  --nf-density-gap: 14px;
-  --nf-density-pad: 16px 18px 20px;
-  --nf-density-nav: 16px 12px 14px;
+  --nf-container-pad: 20px 22px;
+  --nf-container-gap: var(--nf-space-14, 14px);
+  --nf-card-pad: 20px 22px;
+  --nf-nav-pad: 16px 12px 14px;
 }
 
 .panel[data-nf-density='compact'] {
-  --nf-density-card: 12px 14px;
-  --nf-density-gap: 8px;
-  --nf-density-pad: 12px 14px;
-  --nf-density-nav: 8px 8px;
+  --nf-container-pad: 12px 14px;
+  --nf-container-gap: var(--nf-space-8, 8px);
+  --nf-card-pad: 12px 14px;
+  --nf-nav-pad: 8px 8px;
 }
 
 .panel[data-nf-density='spacious'] {
-  --nf-density-card: 22px 26px;
-  --nf-density-gap: 18px;
-  --nf-density-pad: 22px 24px;
-  --nf-density-nav: 18px 14px;
+  --nf-container-pad: 24px 28px;
+  --nf-container-gap: var(--nf-space-18, 18px);
+  --nf-card-pad: 22px 26px;
+  --nf-nav-pad: 18px 14px;
 }
 
 /* 强制浅色（不跟随系统时覆盖 .view 的明暗变量） */
@@ -2404,20 +2756,35 @@ select.input {
   --nf-glass-orb-b: rgba(190, 200, 215, 0.10);
 }
 
-/* 强制深色时：经典毛玻璃 / 新拟物 的暗色变体 */
-.panel[data-nf-mode='dark'][data-nf-theme='classic'] {
+/* 强制深色时：新拟物 的暗色变体 */
+
+.panel[data-nf-mode='dark'][data-nf-theme='macos'] {
+  --nf-bg: rgba(28, 28, 30, 0.9);
+  --nf-bg-raise: rgba(44, 44, 46, 0.82);
+  --nf-bg-inset: rgba(118, 118, 128, 0.18);
+  --nf-border: rgba(255, 255, 255, 0.12);
+  --nf-border-strong: rgba(255, 255, 255, 0.26);
+  --nf-text: #f5f5f7;
+  --nf-text-2: #d1d1d6;
+  --nf-text-2-alpha: rgba(209, 209, 214, 0.7);
+  --nf-text-3: #98989d;
   --nf-accent: #0a84ff;
   --nf-accent-hover: #3a9bff;
   --nf-accent-soft: rgba(10, 132, 255, 0.2);
   --nf-accent-fg: #ffffff;
+  --nf-hover: rgba(255, 255, 255, 0.06);
   --nf-info: #bf5af2;
-  --nf-glass-face: var(--nf-bg-raise);
+  --nf-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 30px rgba(0, 0, 0, 0.45);
+  --nf-shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.45), 0 18px 44px rgba(0, 0, 0, 0.6);
+  --nf-card-shadow: 0 2px 6px rgba(0, 0, 0, 0.4), 0 14px 38px rgba(0, 0, 0, 0.5);
+  --nf-card-shadow-hover: 0 4px 10px rgba(0, 0, 0, 0.45), 0 22px 52px rgba(0, 0, 0, 0.6);
+  --nf-glass-face: rgba(44, 44, 46, 0.85);
   --nf-glass-core: transparent;
-  --nf-glass-sheen: rgba(255, 255, 255, 0);
-  --nf-glass-border: var(--nf-border);
-  --nf-glass-inset: var(--nf-bg-inset);
-  --nf-glass-orb-a: transparent;
-  --nf-glass-orb-b: transparent;
+  --nf-glass-sheen: rgba(255, 255, 255, 0.2);
+  --nf-glass-border: rgba(255, 255, 255, 0.18);
+  --nf-glass-inset: rgba(255, 255, 255, 0.06);
+  --nf-glass-orb-a: rgba(10, 132, 255, 0.16);
+  --nf-glass-orb-b: rgba(191, 90, 242, 0.08);
   --nf-glass-noise: none;
 }
 
@@ -2476,10 +2843,10 @@ select.input {
 .bookCard {
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  gap: var(--nf-space-8, 8px);
   border: 1px solid var(--nf-border);
-  border-radius: 16px;
-  padding: 12px;
+  border-radius: var(--nf-radius-16, 16px);
+  padding: var(--nf-space-12, 12px);
   background: var(--nf-bg-raise);
   -webkit-backdrop-filter: blur(24px) saturate(180%);
   backdrop-filter: blur(24px) saturate(180%);
@@ -2502,7 +2869,7 @@ select.input {
 .bookCardCover {
   flex: none;
   aspect-ratio: 3 / 4;
-  border-radius: 12px;
+  border-radius: var(--nf-radius-12, 12px);
   overflow: hidden;
   background: var(--nf-bg-inset);
   border: 1px solid var(--nf-border);
@@ -2545,7 +2912,7 @@ select.input {
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  gap: 6px;
+  gap: var(--nf-space-6, 6px);
   width: 100%;
   height: 100%;
   background:
@@ -2554,7 +2921,7 @@ select.input {
 }
 
 .bookCardCoverTitle {
-  font-size: 22px;
+  font-size: var(--nf-fs-22, 22px);
   font-weight: 800;
   color: var(--nf-accent);
   letter-spacing: 2px;
@@ -2563,7 +2930,7 @@ select.input {
 .bookCardBody {
   display: flex;
   flex-direction: column;
-  gap: 5px;
+  gap: var(--nf-space-6, 5px);
   min-width: 0;
   flex: 1;
 }
@@ -2572,12 +2939,12 @@ select.input {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 6px;
+  gap: var(--nf-space-6, 6px);
 }
 
 .bookCardName {
   font-weight: 700;
-  font-size: 13.5px;
+  font-size: var(--nf-fs-14, 13.5px);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -2595,13 +2962,13 @@ select.input {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 6px;
+  gap: var(--nf-space-6, 6px);
   flex-wrap: wrap;
 }
 
 .bookCardProgressBar {
   height: 6px;
-  border-radius: 999px;
+  border-radius: var(--nf-radius-999, 999px);
   background: var(--nf-border);
   overflow: hidden;
   box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12);
@@ -2610,7 +2977,7 @@ select.input {
 .bookCardProgressFill {
   display: block;
   height: 100%;
-  border-radius: 999px;
+  border-radius: var(--nf-radius-999, 999px);
   background: linear-gradient(90deg, var(--nf-info), var(--nf-accent));
   transition: width 0.3s ease;
 }
@@ -2618,7 +2985,7 @@ select.input {
 .bookAddCard {
   align-items: center;
   justify-content: center;
-  gap: 8px;
+  gap: var(--nf-space-8, 8px);
   text-align: center;
   border-style: dashed;
   color: var(--nf-text-2);
@@ -2634,7 +3001,7 @@ select.input {
 }
 
 .bookAddIcon {
-  font-size: 34px;
+  font-size: var(--nf-fs-34, 34px);
   line-height: 1;
   color: var(--nf-accent);
   transition: transform 0.15s ease;
@@ -2655,10 +3022,11 @@ select.input {
   flex: 1;
   min-height: 0;
   overflow: auto;
-  padding: 14px 18px 24px;
+  /* 主容器统一：与工作台/书架/设置页同一令牌 */
+  padding: var(--nf-container-pad, 20px 22px);
   display: flex;
   flex-direction: column;
-  gap: 14px;
+  gap: var(--nf-container-gap, 14px);
 }
 
 .createBookTop {
@@ -2671,10 +3039,11 @@ select.input {
   width: min(520px, 100%);
   display: flex;
   flex-direction: column;
-  gap: 12px;
+  gap: var(--nf-space-12, 12px);
   border: 1px solid var(--nf-border);
-  border-radius: 20px;
-  padding: 26px 28px;
+  border-radius: var(--nf-radius-20, 20px);
+  /* 主容器统一：与设置页卡片同一 --nf-card-pad */
+  padding: var(--nf-card-pad, 20px 22px);
   background: var(--nf-bg-raise);
   -webkit-backdrop-filter: blur(24px) saturate(180%);
   backdrop-filter: blur(24px) saturate(180%);
@@ -2682,13 +3051,13 @@ select.input {
 }
 
 .createBookIcon {
-  font-size: 34px;
+  font-size: var(--nf-fs-34, 34px);
   line-height: 1;
 }
 
 .createBookTitle {
   margin: 0;
-  font-size: 22px;
+  font-size: var(--nf-fs-22, 22px);
   font-weight: 800;
   letter-spacing: -0.3px;
 }
@@ -2697,21 +3066,21 @@ select.input {
 .ideaCard {
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  gap: var(--nf-space-8, 8px);
   border: 1px dashed var(--nf-border-strong);
-  border-radius: 14px;
-  padding: 10px 12px;
+  border-radius: var(--nf-radius-14, 14px);
+  padding: var(--nf-space-10, 10px) var(--nf-space-12, 12px);
   background: color-mix(in srgb, var(--nf-accent) 3%, transparent);
 }
 
 .ideaToggle {
   display: flex;
   align-items: center;
-  gap: 6px;
+  gap: var(--nf-space-6, 6px);
   border: none;
   background: none;
   color: var(--nf-accent);
-  font-size: 13px;
+  font-size: var(--nf-fs-14, 13px);
   font-weight: 700;
   cursor: pointer;
   text-align: left;
@@ -2721,10 +3090,10 @@ select.input {
 .ideaCandidate {
   display: flex;
   flex-direction: column;
-  gap: 6px;
+  gap: var(--nf-space-6, 6px);
   border: 1px solid var(--nf-border);
-  border-radius: 12px;
-  padding: 10px 12px;
+  border-radius: var(--nf-radius-12, 12px);
+  padding: var(--nf-space-10, 10px) var(--nf-space-12, 12px);
   background: var(--nf-bg);
 }
 
@@ -2741,7 +3110,7 @@ select.input {
 /* ------------------------------------------------------------ misc */
 
 .meta {
-  font-size: 12px;
+  font-size: var(--nf-fs-12, 12px);
   color: var(--nf-text-2);
   opacity: 0.9;
 }
@@ -2758,8 +3127,8 @@ select.input {
 .fileList {
   display: flex;
   flex-direction: column;
-  gap: 3px;
-  font-size: 12px;
+  gap: var(--nf-space-4, 3px);
+  font-size: var(--nf-fs-12, 12px);
   color: var(--nf-text-2);
   opacity: 0.9;
   word-break: break-all;
@@ -2781,7 +3150,7 @@ select.input {
 .progress::-webkit-scrollbar-thumb,
 .toolLive::-webkit-scrollbar-thumb {
   background: var(--nf-border-strong);
-  border-radius: 4px;
+  border-radius: var(--nf-radius-4, 4px);
 }
 
 .panelContent::-webkit-scrollbar-thumb:hover,
@@ -2802,8 +3171,8 @@ select.input {
 .workflowRow {
   display: flex;
   align-items: flex-start;
-  gap: 12px;
-  padding: 8px 4px;
+  gap: var(--nf-space-12, 12px);
+  padding: var(--nf-space-8, 8px) var(--nf-space-4, 4px);
   position: relative;
 }
 
@@ -2823,12 +3192,12 @@ select.input {
 
 .workflowDot {
   width: 28px;
-  height: 28px;
+  height: var(--nf-ctrl-s, 28px);
   border-radius: 50%;
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  font-size: 12px;
+  font-size: var(--nf-fs-12, 12px);
   font-weight: 700;
   flex-shrink: 0;
   border: 2px solid var(--nf-border-strong);
@@ -2855,18 +3224,18 @@ select.input {
   min-width: 0;
   display: flex;
   flex-direction: column;
-  gap: 4px;
-  padding-top: 2px;
+  gap: var(--nf-space-4, 4px);
+  padding-top: var(--nf-space-2, 2px);
 }
 
 .workflowLabel {
-  font-size: 13px;
+  font-size: var(--nf-fs-14, 13px);
   font-weight: 600;
   color: var(--nf-text);
 }
 
 .workflowHint {
-  font-size: 12px;
+  font-size: var(--nf-fs-12, 12px);
   color: var(--nf-text-2);
 }
 
@@ -2889,11 +3258,11 @@ select.input {
 .bookshelf {
   display: flex;
   align-items: center;
-  gap: 10px;
+  gap: var(--nf-space-10, 10px);
   margin: 10px 12px 0;
-  padding: 8px 14px;
+  padding: var(--nf-space-8, 8px) var(--nf-space-14, 14px);
   border: 1px solid var(--nf-glass-border);
-  border-radius: 16px;
+  border-radius: var(--nf-radius-16, 16px);
   background: var(--nf-glass-face);
   box-shadow: var(--nf-shadow), inset 0 1px 0 var(--nf-glass-sheen);
   -webkit-backdrop-filter: blur(26px) saturate(175%);
@@ -2905,7 +3274,7 @@ select.input {
 }
 
 .bookshelfLabel {
-  font-size: 12px;
+  font-size: var(--nf-fs-12, 12px);
   font-weight: 700;
   color: var(--nf-text-3);
   letter-spacing: 1px;
@@ -2915,7 +3284,7 @@ select.input {
 .bookshelfList {
   display: flex;
   align-items: center;
-  gap: 6px;
+  gap: var(--nf-space-6, 6px);
   flex-wrap: wrap;
   flex: 1;
   min-width: 0;
@@ -2924,13 +3293,13 @@ select.input {
 .bookChip {
   display: flex;
   align-items: center;
-  gap: 6px;
-  padding: 4px 8px 4px 10px;
+  gap: var(--nf-space-6, 6px);
+  padding: var(--nf-space-4, 4px) var(--nf-space-8, 8px) var(--nf-space-4, 4px) var(--nf-space-10, 10px);
   border: 1px solid var(--nf-border);
-  border-radius: 999px;
+  border-radius: var(--nf-radius-999, 999px);
   background: var(--nf-bg-inset);
   cursor: pointer;
-  font-size: 12px;
+  font-size: var(--nf-fs-12, 12px);
   transition: border-color 0.15s ease, background 0.15s ease;
   max-width: 220px;
 }
@@ -2953,7 +3322,7 @@ select.input {
 }
 
 .bookChipMeta {
-  font-size: 11px;
+  font-size: var(--nf-fs-12, 11px);
   opacity: 0.7;
   white-space: nowrap;
 }
@@ -2963,10 +3332,10 @@ select.input {
   background: transparent;
   color: var(--nf-text-3);
   cursor: pointer;
-  font-size: 13px;
+  font-size: var(--nf-fs-14, 13px);
   line-height: 1;
-  padding: 0 2px;
-  border-radius: 4px;
+  padding: 0 var(--nf-space-2, 2px);
+  border-radius: var(--nf-radius-4, 4px);
 }
 
 .bookChipRemove:hover {
@@ -2978,9 +3347,9 @@ select.input {
   background: transparent;
   color: var(--nf-text-2);
   cursor: pointer;
-  font-size: 12px;
-  padding: 4px 12px;
-  border-radius: 999px;
+  font-size: var(--nf-fs-12, 12px);
+  padding: var(--nf-space-4, 4px) var(--nf-space-12, 12px);
+  border-radius: var(--nf-radius-999, 999px);
   transition: border-color 0.15s ease, color 0.15s ease;
 }
 
@@ -2992,24 +3361,24 @@ select.input {
 .bookCreateForm {
   display: flex;
   align-items: center;
-  gap: 6px;
+  gap: var(--nf-space-6, 6px);
 }
 
 /* ------------------------------------------------------------ dropzone */
 
 .dropzone {
   border: 2px dashed var(--nf-border-strong);
-  border-radius: 10px;
-  padding: 18px 14px;
+  border-radius: var(--nf-radius-10, 10px);
+  padding: var(--nf-space-18, 18px) var(--nf-space-14, 14px);
   text-align: center;
-  font-size: 13px;
+  font-size: var(--nf-fs-14, 13px);
   color: var(--nf-text-2);
   cursor: pointer;
   transition: border-color 0.15s ease, background 0.15s ease;
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 6px;
+  gap: var(--nf-space-6, 6px);
 }
 
 .dropzone:hover,
@@ -3020,7 +3389,7 @@ select.input {
 }
 
 .dropzoneIcon {
-  font-size: 22px;
+  font-size: var(--nf-fs-22, 22px);
   line-height: 1;
 }
 
@@ -3029,9 +3398,9 @@ select.input {
 .bookCardActions {
   display: flex;
   align-items: center;
-  gap: 6px;
+  gap: var(--nf-space-6, 6px);
   margin-top: auto;
-  padding-top: 8px;
+  padding-top: var(--nf-space-8, 8px);
 }
 
 .bookCardActions .button {
@@ -3054,31 +3423,31 @@ select.input {
   flex: none;
   display: flex;
   align-items: center;
-  gap: 8px;
-  padding: 8px 12px;
+  gap: var(--nf-space-8, 8px);
+  padding: var(--nf-space-8, 8px) var(--nf-space-12, 12px);
   border-bottom: 1px solid;
   flex-wrap: wrap;
 }
 
 .readerTitle {
   font-weight: 700;
-  font-size: 14px;
+  font-size: var(--nf-fs-14, 14px);
 }
 
 .readerSeg {
   display: flex;
   align-items: center;
-  gap: 2px;
-  border-radius: 8px;
+  gap: var(--nf-space-2, 2px);
+  border-radius: var(--nf-radius-8, 8px);
   overflow: hidden;
 }
 
 .readerSegBtn {
   border: none;
   background: transparent;
-  font-size: 12px;
-  padding: 3px 8px;
-  border-radius: 6px;
+  font-size: var(--nf-fs-12, 12px);
+  padding: var(--nf-space-4, 3px) var(--nf-space-8, 8px);
+  border-radius: var(--nf-radius-6, 6px);
   cursor: pointer;
   opacity: 0.75;
 }
@@ -3103,34 +3472,34 @@ select.input {
   width: 220px;
   min-width: 220px;
   overflow-y: auto;
-  padding: 8px 6px 24px;
+  padding: var(--nf-space-8, 8px) var(--nf-space-6, 6px) var(--nf-space-24, 24px);
   border-right: 1px solid;
   scrollbar-width: thin;
   display: flex;
   flex-direction: column;
-  gap: 10px;
+  gap: var(--nf-space-10, 10px);
 }
 
 .readerGroup {
   display: flex;
   flex-direction: column;
-  gap: 1px;
+  gap: var(--nf-space-2, 1px);
 }
 
 .readerGroupTitle {
   display: flex;
   align-items: center;
-  gap: 6px;
+  gap: var(--nf-space-6, 6px);
   width: 100%;
   border: none;
   background: transparent;
-  font-size: 12px;
+  font-size: var(--nf-fs-12, 12px);
   font-weight: 700;
-  padding: 6px 8px 4px;
+  padding: var(--nf-space-6, 6px) var(--nf-space-8, 8px) var(--nf-space-4, 4px);
   opacity: 0.9;
   cursor: pointer;
   text-align: left;
-  border-radius: 6px;
+  border-radius: var(--nf-radius-6, 6px);
 }
 
 .readerGroupTitle:hover {
@@ -3140,30 +3509,30 @@ select.input {
 
 .readerGroupArrow {
   flex: none;
-  font-size: 10px;
+  font-size: var(--nf-fs-12, 10px);
   width: 12px;
   text-align: center;
 }
 
 .readerGroupCount {
   flex: none;
-  font-size: 11px;
+  font-size: var(--nf-fs-12, 11px);
   font-weight: 400;
   opacity: 0.6;
   margin-left: auto;
-  padding-right: 2px;
+  padding-right: var(--nf-space-2, 2px);
 }
 
 .readerItem {
   display: flex;
   align-items: center;
-  gap: 6px;
+  gap: var(--nf-space-6, 6px);
   border: 1px solid;
-  border-radius: 8px;
+  border-radius: var(--nf-radius-8, 8px);
   background: transparent;
-  font-size: 12px;
+  font-size: var(--nf-fs-12, 12px);
   text-align: left;
-  padding: 4px 8px;
+  padding: var(--nf-space-4, 4px) var(--nf-space-8, 8px);
   cursor: pointer;
   opacity: 0.8;
   transition: opacity 0.15s ease, background 0.15s ease;
@@ -3197,14 +3566,14 @@ select.input {
 
 .readerItemBadge {
   flex: none;
-  font-size: 11px;
+  font-size: var(--nf-fs-12, 11px);
 }
 
 .readerMain {
   flex: 1;
   min-height: 0;
   overflow-y: auto;
-  padding: 20px 16px 48px;
+  padding: var(--nf-space-20, 20px) var(--nf-space-16, 16px) var(--nf-space-48, 48px);
   display: flex;
   justify-content: center;
   scrollbar-width: thin;
@@ -3214,12 +3583,12 @@ select.input {
   width: 100%;
   display: flex;
   flex-direction: column;
-  gap: 12px;
+  gap: var(--nf-space-12, 12px);
 }
 
 .readerChapterTitle {
   margin: 0;
-  font-size: 24px;
+  font-size: var(--nf-fs-24, 24px);
   font-weight: 800;
   letter-spacing: 1px;
 }
@@ -3227,8 +3596,8 @@ select.input {
 .readerChapterMeta {
   display: flex;
   align-items: center;
-  gap: 8px;
-  font-size: 12px;
+  gap: var(--nf-space-8, 8px);
+  font-size: var(--nf-fs-12, 12px);
 }
 
 .readerText {
@@ -3245,17 +3614,17 @@ select.input {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 8px;
+  gap: var(--nf-space-8, 8px);
   margin-top: 12px;
-  padding-top: 12px;
+  padding-top: var(--nf-space-12, 12px);
   border-top: 1px dashed;
 }
 
 .readerLoading,
 .readerError {
   align-self: center;
-  padding: 32px 0;
-  font-size: 13px;
+  padding: var(--nf-space-32, 32px) 0;
+  font-size: var(--nf-fs-14, 13px);
   opacity: 0.7;
 }
 
@@ -3275,7 +3644,7 @@ select.input {
   background: rgba(0, 0, 0, 0.45);
   -webkit-backdrop-filter: blur(4px);
   backdrop-filter: blur(4px);
-  padding: 24px;
+  padding: var(--nf-space-24, 24px);
 }
 
 .importModal {
@@ -3284,10 +3653,11 @@ select.input {
   overflow: auto;
   display: flex;
   flex-direction: column;
-  gap: 12px;
+  gap: var(--nf-space-12, 12px);
   border: 1px solid var(--nf-border-strong);
-  border-radius: 16px;
-  padding: 16px;
+  border-radius: var(--nf-radius-16, 16px);
+  /* 主容器统一：与设置页卡片同一 --nf-card-pad */
+  padding: var(--nf-card-pad, 20px 22px);
   background: var(--nf-bg-raise);
   -webkit-backdrop-filter: blur(28px) saturate(180%);
   backdrop-filter: blur(28px) saturate(180%);
@@ -3298,12 +3668,12 @@ select.input {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 10px;
+  gap: var(--nf-space-10, 10px);
 }
 
 .importModalTabs {
   display: flex;
-  gap: 8px;
+  gap: var(--nf-space-8, 8px);
 }
 
 .importModalTabs .button {
@@ -3313,28 +3683,28 @@ select.input {
 .importModalBody {
   display: flex;
   flex-direction: column;
-  gap: 10px;
+  gap: var(--nf-space-10, 10px);
 }
 
 .importField {
   display: flex;
   flex-direction: column;
-  gap: 5px;
-  font-size: 13px;
+  gap: var(--nf-space-6, 5px);
+  font-size: var(--nf-fs-14, 13px);
   color: var(--nf-text-2);
 }
 
 .importHint {
-  font-size: 12px;
+  font-size: var(--nf-fs-12, 12px);
   color: var(--nf-text-3);
   line-height: 1.5;
 }
 
 .importError {
   border: 1px solid color-mix(in srgb, var(--nf-danger, #e5484d) 55%, transparent);
-  border-radius: 10px;
-  padding: 8px 10px;
-  font-size: 12.5px;
+  border-radius: var(--nf-radius-10, 10px);
+  padding: var(--nf-space-8, 8px) var(--nf-space-10, 10px);
+  font-size: var(--nf-fs-12, 12.5px);
   color: var(--nf-danger, #e5484d);
   background: color-mix(in srgb, var(--nf-danger, #e5484d) 10%, transparent);
   white-space: pre-wrap;
@@ -3344,11 +3714,11 @@ select.input {
 .importResult {
   display: flex;
   flex-direction: column;
-  gap: 4px;
+  gap: var(--nf-space-4, 4px);
   border: 1px solid color-mix(in srgb, var(--nf-ok, #46a758) 45%, transparent);
-  border-radius: 10px;
-  padding: 10px 12px;
-  font-size: 13px;
+  border-radius: var(--nf-radius-10, 10px);
+  padding: var(--nf-space-10, 10px) var(--nf-space-12, 12px);
+  font-size: var(--nf-fs-14, 13px);
   background: color-mix(in srgb, var(--nf-ok, #46a758) 9%, transparent);
   word-break: break-all;
 }
@@ -3356,14 +3726,14 @@ select.input {
 .importModalActions {
   display: flex;
   justify-content: flex-end;
-  gap: 8px;
+  gap: var(--nf-space-8, 8px);
 }
 
 .importFileInfo {
   display: flex;
   align-items: center;
-  gap: 8px;
-  font-size: 13px;
+  gap: var(--nf-space-8, 8px);
+  font-size: var(--nf-fs-14, 13px);
   color: var(--nf-text-1);
   flex-wrap: wrap;
 }
@@ -3371,21 +3741,21 @@ select.input {
 .importPreview {
   display: flex;
   flex-direction: column;
-  gap: 4px;
+  gap: var(--nf-space-4, 4px);
   border: 1px solid var(--nf-border-strong);
-  border-radius: 10px;
-  padding: 10px 12px;
-  font-size: 13px;
+  border-radius: var(--nf-radius-10, 10px);
+  padding: var(--nf-space-10, 10px) var(--nf-space-12, 12px);
+  font-size: var(--nf-fs-14, 13px);
   background: var(--nf-bg-inset);
 }
 
 .importPreviewList {
   margin: 0;
-  padding-left: 18px;
+  padding-left: var(--nf-space-18, 18px);
   display: flex;
   flex-direction: column;
-  gap: 2px;
-  font-size: 12.5px;
+  gap: var(--nf-space-2, 2px);
+  font-size: var(--nf-fs-12, 12.5px);
   color: var(--nf-text-2);
   max-height: 140px;
   overflow: auto;
@@ -3415,12 +3785,12 @@ select.input {
   transform: translateX(-50%);
   width: 280px;
   max-width: 70vw;
-  padding: 10px 12px;
-  border-radius: 10px;
+  padding: var(--nf-space-10, 10px) var(--nf-space-12, 12px);
+  border-radius: var(--nf-radius-10, 10px);
   background: var(--nf-bg-raise);
   border: 1px solid var(--nf-border-strong);
   box-shadow: var(--nf-shadow-lg);
-  font-size: 12px;
+  font-size: var(--nf-fs-12, 12px);
   font-weight: 400;
   line-height: 1.7;
   color: var(--nf-text-2);
@@ -3436,36 +3806,19 @@ select.input {
   display: block;
 }
 
-/* 设置页字号放大（标题明显大于正文） */
-.settingsCard {
-  font-size: 15px;
-}
-.settingsCard .fieldLabel {
-  font-size: 14px;
-}
-.settingsCard .input {
-  font-size: 15.5px;
-}
-.settingsCard .meta {
-  font-size: 13px;
-}
-.settingsCard .cardTitle {
-  font-size: 20px;
-}
-.settingsCard .input {
-  padding: 12px 16px;
-  border-radius: 10px;
-}
+/* 设置页：字号已统一为全局档（次要 12 / 主 14 / 标题 16+），不再放大；
+ * 主容器由 .card 的 --nf-card-pad 统一提供（舒适 20px 22px）。 */
 .settingsCard + .settingsCard {
   flex: 1;
   min-height: 0;
+}
 
 /* 设置页开关（滑块） */
 .switch {
   position: relative;
   width: 42px;
   height: 24px;
-  border-radius: 999px;
+  border-radius: var(--nf-radius-999, 999px);
   border: 1px solid var(--nf-border-strong);
   background: var(--nf-bg-inset);
   cursor: pointer;
@@ -3494,5 +3847,3 @@ select.input {
 .switchOn .switchKnob {
   transform: translateX(18px);
 }
-
-}