/* ============================================================
   奶油画室 · 配色方案集（2026-08-12）
   只换颜色，不换布局/字体/组件形态。
   由 theme-switcher.js 通过 html[data-cream-palette] 切换。
   ============================================================ */

/* ---------- 1. 肉绿 Original（当前默认） ----------
   肉色暖底 · 森林绿主色 · 芥末金点缀 · 杏粉光晕 */
html[data-cream-palette="original"] {
  --color-bg: #f9e8da;
  --color-surface: color-mix(in srgb, white 55%, var(--color-bg) 45%);
  --color-elevated: color-mix(in srgb, white 40%, var(--color-bg) 60%);
  --color-primary: #2f4a3c;
  --color-primary-hover: #26402f;
  --color-primary-soft: #e6eee4;
  --color-text: #2b2620;
  --color-text-body: #3a342c;
  --color-text-secondary: #6b6257;
  --color-text-tertiary: #a89e8e;
  --color-border: rgba(93, 122, 99, 0.30);
  --color-border-input: rgba(93, 122, 99, 0.25);
  --color-border-light: rgba(93, 122, 99, 0.16);
  --color-separator: rgba(93, 122, 99, 0.18);
  --color-teal: #f2c14e;
  --color-success: #5d7a63;
  --gradient-mesh:
    radial-gradient(ellipse 55% 45% at 8% 6%,  rgba(242, 193, 78, 0.15) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 94% 10%, rgba(222, 164, 116, 0.15) 0%, transparent 60%),
    radial-gradient(ellipse 60% 45% at 50% 100%, rgba(238, 180, 172, 0.13) 0%, transparent 60%);
  --studio-sidebar-bg: linear-gradient(180deg, #33523f 0%, #26402f 60%, #1f3527 100%);
  --studio-sidebar-hover: rgba(247, 242, 233, 0.12);
  --studio-sidebar-text: #cfd8cc;
  --studio-sidebar-dim: #93a1be;
  --studio-shadow-card: 0 12px 40px rgba(43, 38, 32, .08);
  --studio-shadow-sm: 0 1px 3px rgba(43, 38, 32, .05), 0 1px 2px rgba(43, 38, 32, .03);
}

/* ---------- 2. 粉肉 Rose Cream ----------
   玫瑰粉底 · 玫瑰褐主色 · 蜜桃肉色点缀 */
html[data-cream-palette="rose"] {
  --color-bg: #f8edee;
  --color-surface: color-mix(in srgb, white 55%, var(--color-bg) 45%);
  --color-elevated: color-mix(in srgb, white 40%, var(--color-bg) 60%);
  --color-primary: #a85774;
  --color-primary-hover: #8f4560;
  --color-primary-soft: #f3e1e6;
  --color-text: #3d2a2e;
  --color-text-body: #52393e;
  --color-text-secondary: #8a6b72;
  --color-text-tertiary: #b89da3;
  --color-border: rgba(168, 87, 116, 0.28);
  --color-border-input: rgba(168, 87, 116, 0.22);
  --color-border-light: rgba(168, 87, 116, 0.14);
  --color-separator: rgba(168, 87, 116, 0.16);
  --color-teal: #f4b8a3;
  --color-success: #b87a6b;
  --gradient-mesh:
    radial-gradient(ellipse 55% 45% at 8% 6%,  rgba(244, 184, 163, 0.18) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 94% 10%, rgba(168, 87, 116, 0.12) 0%, transparent 60%),
    radial-gradient(ellipse 60% 45% at 50% 100%, rgba(232, 190, 200, 0.14) 0%, transparent 60%);
  --studio-sidebar-bg: linear-gradient(180deg, #8f4560 0%, #74384e 60%, #5d2d3e 100%);
  --studio-sidebar-hover: rgba(255, 250, 250, 0.10);
  --studio-sidebar-text: #f3e1e6;
  --studio-sidebar-dim: #d4b4bc;
  --studio-shadow-card: 0 12px 40px rgba(61, 42, 46, .08);
  --studio-shadow-sm: 0 1px 3px rgba(61, 42, 46, .05), 0 1px 2px rgba(61, 42, 46, .03);
}

/* ---------- 3. 绿奶 Sage Cream ----------
   鼠尾草浅底 · 鼠尾草绿主色 · 燕麦棕点缀 */
html[data-cream-palette="sage"] {
  --color-bg: #f1f3ec;
  --color-surface: color-mix(in srgb, white 55%, var(--color-bg) 45%);
  --color-elevated: color-mix(in srgb, white 40%, var(--color-bg) 60%);
  --color-primary: #5e6f5a;
  --color-primary-hover: #4d5c49;
  --color-primary-soft: #e4e9e1;
  --color-text: #2d332a;
  --color-text-body: #3d4539;
  --color-text-secondary: #6e7a68;
  --color-text-tertiary: #a5b09d;
  --color-border: rgba(94, 111, 90, 0.28);
  --color-border-input: rgba(94, 111, 90, 0.22);
  --color-border-light: rgba(94, 111, 90, 0.14);
  --color-separator: rgba(94, 111, 90, 0.16);
  --color-teal: #d4a373;
  --color-success: #7a8f74;
  --gradient-mesh:
    radial-gradient(ellipse 55% 45% at 8% 6%,  rgba(212, 163, 115, 0.16) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 94% 10%, rgba(94, 111, 90, 0.12) 0%, transparent 60%),
    radial-gradient(ellipse 60% 45% at 50% 100%, rgba(195, 210, 185, 0.14) 0%, transparent 60%);
  --studio-sidebar-bg: linear-gradient(180deg, #6a7d65 0%, #4d5c49 60%, #3e4a3a 100%);
  --studio-sidebar-hover: rgba(252, 252, 249, 0.10);
  --studio-sidebar-text: #e8ede5;
  --studio-sidebar-dim: #bccbb5;
  --studio-shadow-card: 0 12px 40px rgba(45, 51, 42, .08);
  --studio-shadow-sm: 0 1px 3px rgba(45, 51, 42, .05), 0 1px 2px rgba(45, 51, 42, .03);
}

/* ---------- 4. 紫奶 Lavender Cream ----------
   薰衣草浅底 · 薰衣草紫主色 · 淡紫点缀 */
html[data-cream-palette="lavender"] {
  --color-bg: #f2eff5;
  --color-surface: color-mix(in srgb, white 55%, var(--color-bg) 45%);
  --color-elevated: color-mix(in srgb, white 40%, var(--color-bg) 60%);
  --color-primary: #6b5b7a;
  --color-primary-hover: #594b66;
  --color-primary-soft: #ebe4f0;
  --color-text: #302a35;
  --color-text-body: #453d4b;
  --color-text-secondary: #7c7086;
  --color-text-tertiary: #afa7b6;
  --color-border: rgba(107, 91, 122, 0.28);
  --color-border-input: rgba(107, 91, 122, 0.22);
  --color-border-light: rgba(107, 91, 122, 0.14);
  --color-separator: rgba(107, 91, 122, 0.16);
  --color-teal: #c9a9e0;
  --color-success: #8e7ba0;
  --gradient-mesh:
    radial-gradient(ellipse 55% 45% at 8% 6%,  rgba(201, 169, 224, 0.16) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 94% 10%, rgba(107, 91, 122, 0.12) 0%, transparent 60%),
    radial-gradient(ellipse 60% 45% at 50% 100%, rgba(210, 195, 225, 0.14) 0%, transparent 60%);
  --studio-sidebar-bg: linear-gradient(180deg, #766486 0%, #594b66 60%, #483d52 100%);
  --studio-sidebar-hover: rgba(252, 251, 254, 0.10);
  --studio-sidebar-text: #ebe4f0;
  --studio-sidebar-dim: #c9bdd4;
  --studio-shadow-card: 0 12px 40px rgba(48, 42, 53, .08);
  --studio-shadow-sm: 0 1px 3px rgba(48, 42, 53, .05), 0 1px 2px rgba(48, 42, 53, .03);
}

/* ---------- 5. 橙奶 Terracotta Cream ----------
   暖奶油底 · 赤陶主色 · 杏色点缀 */
html[data-cream-palette="terracotta"] {
  --color-bg: #f7ede5;
  --color-surface: color-mix(in srgb, white 55%, var(--color-bg) 45%);
  --color-elevated: color-mix(in srgb, white 40%, var(--color-bg) 60%);
  --color-primary: #9c5b43;
  --color-primary-hover: #824b37;
  --color-primary-soft: #f2e2da;
  --color-text: #3b2720;
  --color-text-body: #52382f;
  --color-text-secondary: #8c6b5e;
  --color-text-tertiary: #bfa99e;
  --color-border: rgba(156, 91, 67, 0.28);
  --color-border-input: rgba(156, 91, 67, 0.22);
  --color-border-light: rgba(156, 91, 67, 0.14);
  --color-separator: rgba(156, 91, 67, 0.16);
  --color-teal: #e89f6d;
  --color-success: #b37d5e;
  --gradient-mesh:
    radial-gradient(ellipse 55% 45% at 8% 6%,  rgba(232, 159, 109, 0.16) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 94% 10%, rgba(156, 91, 67, 0.12) 0%, transparent 60%),
    radial-gradient(ellipse 60% 45% at 50% 100%, rgba(220, 190, 175, 0.14) 0%, transparent 60%);
  --studio-sidebar-bg: linear-gradient(180deg, #a8644a 0%, #824b37 60%, #693c2c 100%);
  --studio-sidebar-hover: rgba(255, 251, 248, 0.10);
  --studio-sidebar-text: #f2e2da;
  --studio-sidebar-dim: #dcc0b3;
  --studio-shadow-card: 0 12px 40px rgba(59, 39, 32, .08);
  --studio-shadow-sm: 0 1px 3px rgba(59, 39, 32, .05), 0 1px 2px rgba(59, 39, 32, .03);
}

/* ---------- 6. 紫晶 Amethyst Cream ----------
   淡紫奶油底 · 深紫主色 · 亮紫点缀 */
html[data-cream-palette="amethyst"] {
  --color-bg: #f3edf8;
  --color-surface: color-mix(in srgb, white 55%, var(--color-bg) 45%);
  --color-elevated: color-mix(in srgb, white 40%, var(--color-bg) 60%);
  --color-primary: #6d4d8e;
  --color-primary-hover: #5a3e76;
  --color-primary-soft: #ece2f5;
  --color-text: #2d2535;
  --color-text-body: #44374d;
  --color-text-secondary: #7d6e8a;
  --color-text-tertiary: #b0a4bc;
  --color-border: rgba(109, 77, 142, 0.28);
  --color-border-input: rgba(109, 77, 142, 0.22);
  --color-border-light: rgba(109, 77, 142, 0.14);
  --color-separator: rgba(109, 77, 142, 0.16);
  --color-teal: #b88ce0;
  --color-success: #8e6ba8;
  --gradient-mesh:
    radial-gradient(ellipse 55% 45% at 8% 6%,  rgba(184, 140, 224, 0.18) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 94% 10%, rgba(109, 77, 142, 0.14) 0%, transparent 60%),
    radial-gradient(ellipse 60% 45% at 50% 100%, rgba(215, 195, 235, 0.14) 0%, transparent 60%);
  --studio-sidebar-bg: linear-gradient(180deg, #7b5a9e 0%, #5a3e76 60%, #473060 100%);
  --studio-sidebar-hover: rgba(253, 251, 255, 0.10);
  --studio-sidebar-text: #ece2f5;
  --studio-sidebar-dim: #c9bdd8;
  --studio-shadow-card: 0 12px 40px rgba(45, 37, 53, .08);
  --studio-shadow-sm: 0 1px 3px rgba(45, 37, 53, .05), 0 1px 2px rgba(45, 37, 53, .03);
}

/* ===== Amethyst 紫晶 · pte-status-widget 世界聊天横幅覆写 =====
   widget 注入的 inline style 用 var(--color-*, fallback)，理论上
   --color-primary 已经映射成 #6d4d8e，但用户在某些浏览器上仍看到 fallback
   的硬色（如肉绿 #4a7a5b）。这里在 amethyst 段用 !important 强制覆盖，
   让 banner / 进入世界按钮 / 发送按钮的 inline 颜色跟紫色版一致。 */
html[data-cream-palette="amethyst"] #pte-pk-feed-banner {
  background-color: var(--color-surface) !important;
  color: var(--color-text-secondary) !important;
  border-color: var(--color-border) !important;
}
html[data-cream-palette="amethyst"] #ptePkFeedGo,
html[data-cream-palette="amethyst"] #ptePkFeedSend {
  background-color: var(--color-primary) !important;
  color: #fff !important;
}
html[data-cream-palette="amethyst"] #ptePkFeedInput {
  background-color: var(--color-bg) !important;
  color: var(--color-text) !important;
  border-color: var(--color-border-input) !important;
}

/* ---------- 7. 墨蓝 Ink Blue ----------
   浅蓝灰底 · 深海军蓝主色 · 钢蓝点缀 */
html[data-cream-palette="ink"] {
  --color-bg: #eef1f6;
  --color-surface: color-mix(in srgb, white 55%, var(--color-bg) 45%);
  --color-elevated: color-mix(in srgb, white 40%, var(--color-bg) 60%);
  --color-primary: #3a4f6b;
  --color-primary-hover: #2d3e54;
  --color-primary-soft: #e0e6f0;
  --color-text: #232c38;
  --color-text-body: #384553;
  --color-text-secondary: #6a7787;
  --color-text-tertiary: #a5b0bf;
  --color-border: rgba(58, 79, 107, 0.28);
  --color-border-input: rgba(58, 79, 107, 0.22);
  --color-border-light: rgba(58, 79, 107, 0.14);
  --color-separator: rgba(58, 79, 107, 0.16);
  --color-teal: #6b8cae;
  --color-success: #5070a0;
  --gradient-mesh:
    radial-gradient(ellipse 55% 45% at 8% 6%,  rgba(107, 140, 174, 0.16) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 94% 10%, rgba(58, 79, 107, 0.12) 0%, transparent 60%),
    radial-gradient(ellipse 60% 45% at 50% 100%, rgba(190, 205, 225, 0.14) 0%, transparent 60%);
  --studio-sidebar-bg: linear-gradient(180deg, #4a6184 0%, #3a4f6b 60%, #2d3e54 100%);
  --studio-sidebar-hover: rgba(252, 253, 255, 0.10);
  --studio-sidebar-text: #e0e6f0;
  --studio-sidebar-dim: #b8c5d8;
  --studio-shadow-card: 0 12px 40px rgba(35, 44, 56, .08);
  --studio-shadow-sm: 0 1px 3px rgba(35, 44, 56, .05), 0 1px 2px rgba(35, 44, 56, .03);
}

/* ---------- 8. 焦糖 Caramel ----------
   焦糖奶油底 · 深棕主色 · 焦糖金点缀 */
html[data-cream-palette="caramel"] {
  --color-bg: #f5ede0;
  --color-surface: color-mix(in srgb, white 55%, var(--color-bg) 45%);
  --color-elevated: color-mix(in srgb, white 40%, var(--color-bg) 60%);
  --color-primary: #7a5530;
  --color-primary-hover: #634228;
  --color-primary-soft: #f0e4d4;
  --color-text: #322820;
  --color-text-body: #4a3a2c;
  --color-text-secondary: #7d6b56;
  --color-text-tertiary: #b8a890;
  --color-border: rgba(122, 85, 48, 0.28);
  --color-border-input: rgba(122, 85, 48, 0.22);
  --color-border-light: rgba(122, 85, 48, 0.14);
  --color-separator: rgba(122, 85, 48, 0.16);
  --color-teal: #c89b6b;
  --color-success: #9a7448;
  --gradient-mesh:
    radial-gradient(ellipse 55% 45% at 8% 6%,  rgba(200, 155, 107, 0.18) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 94% 10%, rgba(122, 85, 48, 0.12) 0%, transparent 60%),
    radial-gradient(ellipse 60% 45% at 50% 100%, rgba(220, 195, 165, 0.14) 0%, transparent 60%);
  --studio-sidebar-bg: linear-gradient(180deg, #8a6238 0%, #634228 60%, #4e3520 100%);
  --studio-sidebar-hover: rgba(255, 252, 247, 0.10);
  --studio-sidebar-text: #f0e4d4;
  --studio-sidebar-dim: #d4c0a8;
  --studio-shadow-card: 0 12px 40px rgba(50, 40, 32, .08);
  --studio-shadow-sm: 0 1px 3px rgba(50, 40, 32, .05), 0 1px 2px rgba(50, 40, 32, .03);
}

/* ---------- 9. 薄荷 Mint ----------
   薄荷白底 · 深薄荷绿主色 · 亮薄荷点缀 */
html[data-cream-palette="mint"] {
  --color-bg: #eef6f2;
  --color-surface: color-mix(in srgb, white 55%, var(--color-bg) 45%);
  --color-elevated: color-mix(in srgb, white 40%, var(--color-bg) 60%);
  --color-primary: #2d7a6b;
  --color-primary-hover: #1f5e51;
  --color-primary-soft: #dceee9;
  --color-text: #20382f;
  --color-text-body: #345048;
  --color-text-secondary: #5e7a72;
  --color-text-tertiary: #9bb8b0;
  --color-border: rgba(45, 122, 107, 0.28);
  --color-border-input: rgba(45, 122, 107, 0.22);
  --color-border-light: rgba(45, 122, 107, 0.14);
  --color-separator: rgba(45, 122, 107, 0.16);
  --color-teal: #7fd1bd;
  --color-success: #4a9a87;
  --gradient-mesh:
    radial-gradient(ellipse 55% 45% at 8% 6%,  rgba(127, 209, 189, 0.18) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 94% 10%, rgba(45, 122, 107, 0.12) 0%, transparent 60%),
    radial-gradient(ellipse 60% 45% at 50% 100%, rgba(180, 220, 210, 0.14) 0%, transparent 60%);
  --studio-sidebar-bg: linear-gradient(180deg, #3a8a7a 0%, #1f5e51 60%, #184a40 100%);
  --studio-sidebar-hover: rgba(252, 255, 254, 0.10);
  --studio-sidebar-text: #dceee9;
  --studio-sidebar-dim: #b0ccc3;
  --studio-shadow-card: 0 12px 40px rgba(32, 56, 47, .08);
  --studio-shadow-sm: 0 1px 3px rgba(32, 56, 47, .05), 0 1px 2px rgba(32, 56, 47, .03);
}

/* ---------- 10. 珊瑚 Coral ----------
   珊瑚粉底 · 珊瑚红主色 · 浅珊瑚点缀 */
html[data-cream-palette="coral"] {
  --color-bg: #fcefec;
  --color-surface: color-mix(in srgb, white 55%, var(--color-bg) 45%);
  --color-elevated: color-mix(in srgb, white 40%, var(--color-bg) 60%);
  --color-primary: #c45a4a;
  --color-primary-hover: #a4473a;
  --color-primary-soft: #f6ddd7;
  --color-text: #38221e;
  --color-text-body: #503530;
  --color-text-secondary: #8a6058;
  --color-text-tertiary: #be9e96;
  --color-border: rgba(196, 90, 74, 0.28);
  --color-border-input: rgba(196, 90, 74, 0.22);
  --color-border-light: rgba(196, 90, 74, 0.14);
  --color-separator: rgba(196, 90, 74, 0.16);
  --color-teal: #f0a892;
  --color-success: #c47868;
  --gradient-mesh:
    radial-gradient(ellipse 55% 45% at 8% 6%,  rgba(240, 168, 146, 0.18) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 94% 10%, rgba(196, 90, 74, 0.12) 0%, transparent 60%),
    radial-gradient(ellipse 60% 45% at 50% 100%, rgba(230, 195, 185, 0.14) 0%, transparent 60%);
  --studio-sidebar-bg: linear-gradient(180deg, #d06656 0%, #a4473a 60%, #833830 100%);
  --studio-sidebar-hover: rgba(255, 253, 252, 0.10);
  --studio-sidebar-text: #f6ddd7;
  --studio-sidebar-dim: #e0b8b0;
  --studio-shadow-card: 0 12px 40px rgba(56, 34, 30, .08);
  --studio-shadow-sm: 0 1px 3px rgba(56, 34, 30, .05), 0 1px 2px rgba(56, 34, 30, .03);
}

/* ---------- 11. 石墨 Graphite ----------
   浅灰底 · 深石墨主色 · 钢灰点缀 */
html[data-cream-palette="graphite"] {
  --color-bg: #f0f0f2;
  --color-surface: color-mix(in srgb, white 55%, var(--color-bg) 45%);
  --color-elevated: color-mix(in srgb, white 40%, var(--color-bg) 60%);
  --color-primary: #3d3d4a;
  --color-primary-hover: #2e2e38;
  --color-primary-soft: #e2e2e8;
  --color-text: #252530;
  --color-text-body: #3a3a48;
  --color-text-secondary: #6a6a78;
  --color-text-tertiary: #a8a8b4;
  --color-border: rgba(61, 61, 74, 0.28);
  --color-border-input: rgba(61, 61, 74, 0.22);
  --color-border-light: rgba(61, 61, 74, 0.14);
  --color-separator: rgba(61, 61, 74, 0.16);
  --color-teal: #7878d0;
  --color-success: #5a5a88;
  --gradient-mesh:
    radial-gradient(ellipse 55% 45% at 8% 6%,  rgba(120, 120, 208, 0.12) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 94% 10%, rgba(61, 61, 74, 0.10) 0%, transparent 60%),
    radial-gradient(ellipse 60% 45% at 50% 100%, rgba(190, 190, 210, 0.12) 0%, transparent 60%);
  --studio-sidebar-bg: linear-gradient(180deg, #4a4a58 0%, #2e2e38 60%, #232330 100%);
  --studio-sidebar-hover: rgba(253, 253, 255, 0.10);
  --studio-sidebar-text: #e2e2e8;
  --studio-sidebar-dim: #b8b8c8;
  --studio-shadow-card: 0 12px 40px rgba(37, 37, 48, .08);
  --studio-shadow-sm: 0 1px 3px rgba(37, 37, 48, .05), 0 1px 2px rgba(37, 37, 48, .03);
}

/* ---------- 12. 酒红 Wine ----------
   淡酒红底 · 酒红主色 · 玫瑰金点缀 */
html[data-cream-palette="wine"] {
  --color-bg: #f4ecee;
  --color-surface: color-mix(in srgb, white 55%, var(--color-bg) 45%);
  --color-elevated: color-mix(in srgb, white 40%, var(--color-bg) 60%);
  --color-primary: #7a2d3a;
  --color-primary-hover: #5e222c;
  --color-primary-soft: #efdde2;
  --color-text: #302024;
  --color-text-body: #483338;
  --color-text-secondary: #7d5e64;
  --color-text-tertiary: #b8989e;
  --color-border: rgba(122, 45, 58, 0.28);
  --color-border-input: rgba(122, 45, 58, 0.22);
  --color-border-light: rgba(122, 45, 58, 0.14);
  --color-separator: rgba(122, 45, 58, 0.16);
  --color-teal: #c47890;
  --color-success: #9a4858;
  --gradient-mesh:
    radial-gradient(ellipse 55% 45% at 8% 6%,  rgba(196, 120, 144, 0.16) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 94% 10%, rgba(122, 45, 58, 0.12) 0%, transparent 60%),
    radial-gradient(ellipse 60% 45% at 50% 100%, rgba(220, 195, 200, 0.14) 0%, transparent 60%);
  --studio-sidebar-bg: linear-gradient(180deg, #8a3543 0%, #5e222c 60%, #4a1a22 100%);
  --studio-sidebar-hover: rgba(254, 252, 253, 0.10);
  --studio-sidebar-text: #efdde2;
  --studio-sidebar-dim: #d4b8c0;
  --studio-shadow-card: 0 12px 40px rgba(48, 32, 36, .08);
  --studio-shadow-sm: 0 1px 3px rgba(48, 32, 36, .05), 0 1px 2px rgba(48, 32, 36, .03);
}

/* ---------- 13. 墨韵 Ink Wash ----------
   宣纸米底 · 浓墨主色 · 朱砂红印章 · 中国水墨风 */
html[data-cream-palette="inkwash"] {
  --color-bg: #f5f0e6;
  --color-surface: color-mix(in srgb, white 55%, var(--color-bg) 45%);
  --color-elevated: color-mix(in srgb, white 40%, var(--color-bg) 60%);
  --color-primary: #1c1c1c;
  --color-primary-hover: #0a0a0a;
  --color-primary-soft: #e0dacd;
  --color-text: #1a1a1a;
  --color-text-body: #2a2a28;
  --color-text-secondary: #5c5c58;
  --color-text-tertiary: #9a9a90;
  --color-border: rgba(28, 28, 28, 0.30);
  --color-border-input: rgba(28, 28, 28, 0.22);
  --color-border-light: rgba(28, 28, 28, 0.14);
  --color-separator: rgba(28, 28, 28, 0.16);
  --color-teal: #c93a3a;
  --color-success: #4a6b4a;
  --gradient-mesh:
    radial-gradient(ellipse 55% 45% at 8% 6%,  rgba(201, 58, 58, 0.10) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 94% 10%, rgba(28, 28, 28, 0.10) 0%, transparent 60%),
    radial-gradient(ellipse 60% 45% at 50% 100%, rgba(180, 170, 150, 0.14) 0%, transparent 60%);
  --studio-sidebar-bg: linear-gradient(180deg, #2a2a2a 0%, #1a1a1a 60%, #0e0e0e 100%);
  --studio-sidebar-hover: rgba(201, 58, 58, 0.12);
  --studio-sidebar-text: #e0dacd;
  --studio-sidebar-dim: #9a9a90;
  --studio-shadow-card: 0 12px 40px rgba(20, 20, 18, .10);
  --studio-shadow-sm: 0 1px 3px rgba(20, 20, 18, .06), 0 1px 2px rgba(20, 20, 18, .04);
}

/* ---------- 14. 暮野 Dusk ----------
   暖橘底 · 深紫红 · 落日金 · 黄昏余晖 */
html[data-cream-palette="dusk"] {
  --color-bg: #fbe8d8;
  --color-surface: color-mix(in srgb, white 55%, var(--color-bg) 45%);
  --color-elevated: color-mix(in srgb, white 40%, var(--color-bg) 60%);
  --color-primary: #6b2d5c;
  --color-primary-hover: #4e1f44;
  --color-primary-soft: #f0dde4;
  --color-text: #2e1a26;
  --color-text-body: #422a38;
  --color-text-secondary: #7a5868;
  --color-text-tertiary: #b898a4;
  --color-border: rgba(107, 45, 92, 0.28);
  --color-border-input: rgba(107, 45, 92, 0.22);
  --color-border-light: rgba(107, 45, 92, 0.14);
  --color-separator: rgba(107, 45, 92, 0.16);
  --color-teal: #e8a838;
  --color-success: #5a8a4e;
  --gradient-mesh:
    radial-gradient(ellipse 55% 45% at 8% 6%,  rgba(232, 168, 56, 0.20) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 94% 10%, rgba(107, 45, 92, 0.16) 0%, transparent 60%),
    radial-gradient(ellipse 60% 45% at 50% 100%, rgba(200, 120, 100, 0.14) 0%, transparent 60%);
  --studio-sidebar-bg: linear-gradient(180deg, #7a3568 0%, #4e1f44 60%, #3a1838 100%);
  --studio-sidebar-hover: rgba(232, 168, 56, 0.14);
  --studio-sidebar-text: #f0dde4;
  --studio-sidebar-dim: #c4a0b0;
  --studio-shadow-card: 0 12px 40px rgba(46, 26, 38, .08);
  --studio-shadow-sm: 0 1px 3px rgba(46, 26, 38, .05), 0 1px 2px rgba(46, 26, 38, .03);
}

/* ---------- 15. 青瓷 Celadon ----------
   青白底 · 青瓷绿 · 釉蓝 · 宋代青瓷 */
html[data-cream-palette="celadon"] {
  --color-bg: #eef0ec;
  --color-surface: color-mix(in srgb, white 55%, var(--color-bg) 45%);
  --color-elevated: color-mix(in srgb, white 40%, var(--color-bg) 60%);
  --color-primary: #4a6b5a;
  --color-primary-hover: #385448;
  --color-primary-soft: #dde8e0;
  --color-text: #1e2a22;
  --color-text-body: #2e3a32;
  --color-text-secondary: #5a6e60;
  --color-text-tertiary: #9ab0a0;
  --color-border: rgba(74, 107, 90, 0.28);
  --color-border-input: rgba(74, 107, 90, 0.22);
  --color-border-light: rgba(74, 107, 90, 0.14);
  --color-separator: rgba(74, 107, 90, 0.16);
  --color-teal: #7ba8a0;
  --color-success: #4a8a6b;
  --gradient-mesh:
    radial-gradient(ellipse 55% 45% at 8% 6%,  rgba(123, 168, 160, 0.16) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 94% 10%, rgba(74, 107, 90, 0.14) 0%, transparent 60%),
    radial-gradient(ellipse 60% 45% at 50% 100%, rgba(160, 180, 170, 0.12) 0%, transparent 60%);
  --studio-sidebar-bg: linear-gradient(180deg, #547a64 0%, #385448 60%, #2a4038 100%);
  --studio-sidebar-hover: rgba(123, 168, 160, 0.14);
  --studio-sidebar-text: #dde8e0;
  --studio-sidebar-dim: #9ab0a0;
  --studio-shadow-card: 0 12px 40px rgba(30, 42, 34, .08);
  --studio-shadow-sm: 0 1px 3px rgba(30, 42, 34, .05), 0 1px 2px rgba(30, 42, 34, .03);
}

/* ---------- 16. 黑金 Noir ----------
   冷灰底 · 炭黑主色 · 香槟金点缀 · 暗黑奢华 */
html[data-cream-palette="noir"] {
  --color-bg: #e8e8ea;
  --color-surface: color-mix(in srgb, white 55%, var(--color-bg) 45%);
  --color-elevated: color-mix(in srgb, white 40%, var(--color-bg) 60%);
  --color-primary: #1a1a20;
  --color-primary-hover: #0a0a0e;
  --color-primary-soft: #d8d8dc;
  --color-text: #15151a;
  --color-text-body: #25252a;
  --color-text-secondary: #555560;
  --color-text-tertiary: #9898a4;
  --color-border: rgba(26, 26, 32, 0.30);
  --color-border-input: rgba(26, 26, 32, 0.22);
  --color-border-light: rgba(26, 26, 32, 0.14);
  --color-separator: rgba(26, 26, 32, 0.16);
  --color-teal: #c9a96a;
  --color-success: #5a8a5a;
  --gradient-mesh:
    radial-gradient(ellipse 55% 45% at 8% 6%,  rgba(201, 169, 106, 0.14) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 94% 10%, rgba(26, 26, 32, 0.12) 0%, transparent 60%),
    radial-gradient(ellipse 60% 45% at 50% 100%, rgba(160, 160, 170, 0.10) 0%, transparent 60%);
  --studio-sidebar-bg: linear-gradient(180deg, #2a2a30 0%, #1a1a20 60%, #0e0e12 100%);
  --studio-sidebar-hover: rgba(201, 169, 106, 0.12);
  --studio-sidebar-text: #d8d8dc;
  --studio-sidebar-dim: #9898a4;
  --studio-shadow-card: 0 12px 40px rgba(15, 15, 20, .12);
  --studio-shadow-sm: 0 1px 3px rgba(15, 15, 20, .08), 0 1px 2px rgba(15, 15, 20, .05);
}

/* ---------- 17. 枫丹 Maple ----------
   暖米底 · 枫叶红 · 琥珀金 · 秋日枫林 */
html[data-cream-palette="maple"] {
  --color-bg: #f5ebe0;
  --color-surface: color-mix(in srgb, white 55%, var(--color-bg) 45%);
  --color-elevated: color-mix(in srgb, white 40%, var(--color-bg) 60%);
  --color-primary: #a8423a;
  --color-primary-hover: #8a3530;
  --color-primary-soft: #f0ddd8;
  --color-text: #2e1e1a;
  --color-text-body: #422e2a;
  --color-text-secondary: #7a5e58;
  --color-text-tertiary: #b89890;
  --color-border: rgba(168, 66, 58, 0.28);
  --color-border-input: rgba(168, 66, 58, 0.22);
  --color-border-light: rgba(168, 66, 58, 0.14);
  --color-separator: rgba(168, 66, 58, 0.16);
  --color-teal: #d4943c;
  --color-success: #6b8a4a;
  --gradient-mesh:
    radial-gradient(ellipse 55% 45% at 8% 6%,  rgba(212, 148, 60, 0.18) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 94% 10%, rgba(168, 66, 58, 0.14) 0%, transparent 60%),
    radial-gradient(ellipse 60% 45% at 50% 100%, rgba(200, 130, 100, 0.12) 0%, transparent 60%);
  --studio-sidebar-bg: linear-gradient(180deg, #b84a42 0%, #8a3530 60%, #6a2825 100%);
  --studio-sidebar-hover: rgba(212, 148, 60, 0.14);
  --studio-sidebar-text: #f0ddd8;
  --studio-sidebar-dim: #c4a098;
  --studio-shadow-card: 0 12px 40px rgba(46, 30, 26, .08);
  --studio-shadow-sm: 0 1px 3px rgba(46, 30, 26, .05), 0 1px 2px rgba(46, 30, 26, .03);
}

/* ---------- 18. 极光 Aurora ----------
   冰蓝底 · 极光绿 · 极光紫 · 北极夜空 */
html[data-cream-palette="aurora"] {
  --color-bg: #e8eef5;
  --color-surface: color-mix(in srgb, white 55%, var(--color-bg) 45%);
  --color-elevated: color-mix(in srgb, white 40%, var(--color-bg) 60%);
  --color-primary: #2a6b5c;
  --color-primary-hover: #1f5248;
  --color-primary-soft: #d8e8e2;
  --color-text: #1a2a28;
  --color-text-body: #2a3a38;
  --color-text-secondary: #5a6e6a;
  --color-text-tertiary: #98b0ac;
  --color-border: rgba(42, 107, 92, 0.28);
  --color-border-input: rgba(42, 107, 92, 0.22);
  --color-border-light: rgba(42, 107, 92, 0.14);
  --color-separator: rgba(42, 107, 92, 0.16);
  --color-teal: #8a6dc4;
  --color-success: #4a8a6b;
  --gradient-mesh:
    radial-gradient(ellipse 55% 45% at 8% 6%,  rgba(138, 109, 196, 0.16) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 94% 10%, rgba(42, 107, 92, 0.14) 0%, transparent 60%),
    radial-gradient(ellipse 60% 45% at 50% 100%, rgba(120, 200, 180, 0.14) 0%, transparent 60%);
  --studio-sidebar-bg: linear-gradient(180deg, #2a7a68 0%, #1f5248 60%, #163a35 100%);
  --studio-sidebar-hover: rgba(138, 109, 196, 0.14);
  --studio-sidebar-text: #d8e8e2;
  --studio-sidebar-dim: #98b0ac;
  --studio-shadow-card: 0 12px 40px rgba(26, 42, 40, .08);
  --studio-shadow-sm: 0 1px 3px rgba(26, 42, 40, .05), 0 1px 2px rgba(26, 42, 40, .03);
}

/* ---------- 19. 樱花 Sakura ----------
   樱花粉底 · 深玫红 · 淡樱粉 · 春日樱花 */
html[data-cream-palette="sakura"] {
  --color-bg: #fdf0f0;
  --color-surface: color-mix(in srgb, white 55%, var(--color-bg) 45%);
  --color-elevated: color-mix(in srgb, white 40%, var(--color-bg) 60%);
  --color-primary: #c45c7c;
  --color-primary-hover: #a84763;
  --color-primary-soft: #f5dde2;
  --color-text: #2e1a20;
  --color-text-body: #422a32;
  --color-text-secondary: #7a5e68;
  --color-text-tertiary: #b898a4;
  --color-border: rgba(196, 92, 124, 0.28);
  --color-border-input: rgba(196, 92, 124, 0.22);
  --color-border-light: rgba(196, 92, 124, 0.14);
  --color-separator: rgba(196, 92, 124, 0.16);
  --color-teal: #f4a8b8;
  --color-success: #6b8a5a;
  --gradient-mesh:
    radial-gradient(ellipse 55% 45% at 8% 6%,  rgba(244, 168, 184, 0.18) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 94% 10%, rgba(196, 92, 124, 0.14) 0%, transparent 60%),
    radial-gradient(ellipse 60% 45% at 50% 100%, rgba(230, 180, 195, 0.14) 0%, transparent 60%);
  --studio-sidebar-bg: linear-gradient(180deg, #c4607e 0%, #a84763 60%, #8a3850 100%);
  --studio-sidebar-hover: rgba(244, 168, 184, 0.14);
  --studio-sidebar-text: #f5dde2;
  --studio-sidebar-dim: #d4a0b0;
  --studio-shadow-card: 0 12px 40px rgba(46, 26, 32, .08);
  --studio-shadow-sm: 0 1px 3px rgba(46, 26, 32, .05), 0 1px 2px rgba(46, 26, 32, .03);
}

/* ---------- 20. 鸢尾 Iris ----------
   淡蓝紫底 · 鸢尾蓝 · 嫩紫 · 鸢尾花田 */
html[data-cream-palette="iris"] {
  --color-bg: #edeaf5;
  --color-surface: color-mix(in srgb, white 55%, var(--color-bg) 45%);
  --color-elevated: color-mix(in srgb, white 40%, var(--color-bg) 60%);
  --color-primary: #4a4d8e;
  --color-primary-hover: #3a3d72;
  --color-primary-soft: #dde0ee;
  --color-text: #1e1e2e;
  --color-text-body: #2e2e3e;
  --color-text-secondary: #5a5a72;
  --color-text-tertiary: #9898b0;
  --color-border: rgba(74, 77, 142, 0.28);
  --color-border-input: rgba(74, 77, 142, 0.22);
  --color-border-light: rgba(74, 77, 142, 0.14);
  --color-separator: rgba(74, 77, 142, 0.16);
  --color-teal: #9b8ad4;
  --color-success: #5a8a6b;
  --gradient-mesh:
    radial-gradient(ellipse 55% 45% at 8% 6%,  rgba(155, 138, 212, 0.16) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 94% 10%, rgba(74, 77, 142, 0.14) 0%, transparent 60%),
    radial-gradient(ellipse 60% 45% at 50% 100%, rgba(170, 160, 210, 0.12) 0%, transparent 60%);
  --studio-sidebar-bg: linear-gradient(180deg, #5457a0 0%, #3a3d72 60%, #2a2d58 100%);
  --studio-sidebar-hover: rgba(155, 138, 212, 0.14);
  --studio-sidebar-text: #dde0ee;
  --studio-sidebar-dim: #9898b0;
  --studio-shadow-card: 0 12px 40px rgba(30, 30, 46, .08);
  --studio-shadow-sm: 0 1px 3px rgba(30, 30, 46, .05), 0 1px 2px rgba(30, 30, 46, .03);
}

/* ---------- 21. 琥珀 Amber ----------
   暖黄底 · 琥珀棕 · 蜂蜜金 · 琥珀蜜蜡 */
html[data-cream-palette="amber"] {
  --color-bg: #f8f0e0;
  --color-surface: color-mix(in srgb, white 55%, var(--color-bg) 45%);
  --color-elevated: color-mix(in srgb, white 40%, var(--color-bg) 60%);
  --color-primary: #8b6914;
  --color-primary-hover: #6e5410;
  --color-primary-soft: #f0e4cc;
  --color-text: #2e2410;
  --color-text-body: #42321a;
  --color-text-secondary: #7a6840;
  --color-text-tertiary: #b8a878;
  --color-border: rgba(139, 105, 20, 0.28);
  --color-border-input: rgba(139, 105, 20, 0.22);
  --color-border-light: rgba(139, 105, 20, 0.14);
  --color-separator: rgba(139, 105, 20, 0.16);
  --color-teal: #e8b83c;
  --color-success: #6b8a4a;
  --gradient-mesh:
    radial-gradient(ellipse 55% 45% at 8% 6%,  rgba(232, 184, 60, 0.18) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 94% 10%, rgba(139, 105, 20, 0.14) 0%, transparent 60%),
    radial-gradient(ellipse 60% 45% at 50% 100%, rgba(200, 170, 100, 0.12) 0%, transparent 60%);
  --studio-sidebar-bg: linear-gradient(180deg, #9a761a 0%, #6e5410 60%, #54400c 100%);
  --studio-sidebar-hover: rgba(232, 184, 60, 0.14);
  --studio-sidebar-text: #f0e4cc;
  --studio-sidebar-dim: #c4b078;
  --studio-shadow-card: 0 12px 40px rgba(46, 36, 16, .08);
  --studio-shadow-sm: 0 1px 3px rgba(46, 36, 16, .05), 0 1px 2px rgba(46, 36, 16, .03);
}

/* ---------- 22. 苔藓 Moss ----------
   灰绿底 · 深苔绿 · 锈红 · 森林苔藓 */
html[data-cream-palette="moss"] {
  --color-bg: #e8ede5;
  --color-surface: color-mix(in srgb, white 55%, var(--color-bg) 45%);
  --color-elevated: color-mix(in srgb, white 40%, var(--color-bg) 60%);
  --color-primary: #3a5a3d;
  --color-primary-hover: #2c4830;
  --color-primary-soft: #d8e4d8;
  --color-text: #1a2a1c;
  --color-text-body: #2a3a2c;
  --color-text-secondary: #5a6e5c;
  --color-text-tertiary: #98b09a;
  --color-border: rgba(58, 90, 61, 0.28);
  --color-border-input: rgba(58, 90, 61, 0.22);
  --color-border-light: rgba(58, 90, 61, 0.14);
  --color-separator: rgba(58, 90, 61, 0.16);
  --color-teal: #a87858;
  --color-success: #4a8a5a;
  --gradient-mesh:
    radial-gradient(ellipse 55% 45% at 8% 6%,  rgba(168, 120, 88, 0.14) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 94% 10%, rgba(58, 90, 61, 0.14) 0%, transparent 60%),
    radial-gradient(ellipse 60% 45% at 50% 100%, rgba(140, 170, 140, 0.12) 0%, transparent 60%);
  --studio-sidebar-bg: linear-gradient(180deg, #446a48 0%, #2c4830 60%, #1e3822 100%);
  --studio-sidebar-hover: rgba(168, 120, 88, 0.14);
  --studio-sidebar-text: #d8e4d8;
  --studio-sidebar-dim: #98b09a;
  --studio-shadow-card: 0 12px 40px rgba(26, 42, 28, .08);
  --studio-shadow-sm: 0 1px 3px rgba(26, 42, 28, .05), 0 1px 2px rgba(26, 42, 28, .03);
}

/* ---------- 23. 海盐 Sea Salt ----------
   浅青底 · 海蓝 · 珊瑚粉 · 海边沙滩 */
html[data-cream-palette="seasalt"] {
  --color-bg: #e6f0ee;
  --color-surface: color-mix(in srgb, white 55%, var(--color-bg) 45%);
  --color-elevated: color-mix(in srgb, white 40%, var(--color-bg) 60%);
  --color-primary: #3a7a8c;
  --color-primary-hover: #2c6070;
  --color-primary-soft: #d4e8ec;
  --color-text: #1a2a2e;
  --color-text-body: #2a3a3e;
  --color-text-secondary: #5a6e72;
  --color-text-tertiary: #98b0b4;
  --color-border: rgba(58, 122, 140, 0.28);
  --color-border-input: rgba(58, 122, 140, 0.22);
  --color-border-light: rgba(58, 122, 140, 0.14);
  --color-separator: rgba(58, 122, 140, 0.16);
  --color-teal: #f0a8a0;
  --color-success: #4a8a6b;
  --gradient-mesh:
    radial-gradient(ellipse 55% 45% at 8% 6%,  rgba(240, 168, 160, 0.14) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 94% 10%, rgba(58, 122, 140, 0.14) 0%, transparent 60%),
    radial-gradient(ellipse 60% 45% at 50% 100%, rgba(140, 200, 195, 0.14) 0%, transparent 60%);
  --studio-sidebar-bg: linear-gradient(180deg, #448a9c 0%, #2c6070 60%, #1e4858 100%);
  --studio-sidebar-hover: rgba(240, 168, 160, 0.14);
  --studio-sidebar-text: #d4e8ec;
  --studio-sidebar-dim: #98b0b4;
  --studio-shadow-card: 0 12px 40px rgba(26, 42, 46, .08);
  --studio-shadow-sm: 0 1px 3px rgba(26, 42, 46, .05), 0 1px 2px rgba(26, 42, 46, .03);
}

/* ---------- 24. 抹茶 Matcha ----------
   浅黄绿底 · 深抹茶绿 · 米黄 · 日式抹茶 */
html[data-cream-palette="matcha"] {
  --color-bg: #eef0e2;
  --color-surface: color-mix(in srgb, white 55%, var(--color-bg) 45%);
  --color-elevated: color-mix(in srgb, white 40%, var(--color-bg) 60%);
  --color-primary: #4a6b3a;
  --color-primary-hover: #3a5530;
  --color-primary-soft: #dde4cc;
  --color-text: #1e2a14;
  --color-text-body: #2e3a22;
  --color-text-secondary: #5a6e4c;
  --color-text-tertiary: #98b088;
  --color-border: rgba(74, 107, 58, 0.28);
  --color-border-input: rgba(74, 107, 58, 0.22);
  --color-border-light: rgba(74, 107, 58, 0.14);
  --color-separator: rgba(74, 107, 58, 0.16);
  --color-teal: #d4c87a;
  --color-success: #5a8a4a;
  --gradient-mesh:
    radial-gradient(ellipse 55% 45% at 8% 6%,  rgba(212, 200, 122, 0.16) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 94% 10%, rgba(74, 107, 58, 0.14) 0%, transparent 60%),
    radial-gradient(ellipse 60% 45% at 50% 100%, rgba(160, 180, 120, 0.12) 0%, transparent 60%);
  --studio-sidebar-bg: linear-gradient(180deg, #547a44 0%, #3a5530 60%, #2a4022 100%);
  --studio-sidebar-hover: rgba(212, 200, 122, 0.14);
  --studio-sidebar-text: #dde4cc;
  --studio-sidebar-dim: #98b088;
  --studio-shadow-card: 0 12px 40px rgba(30, 42, 20, .08);
  --studio-shadow-sm: 0 1px 3px rgba(30, 42, 20, .05), 0 1px 2px rgba(30, 42, 20, .03);
}