/* ============================================================
 *  Cidaiji Composer · 主题系统
 *  5 套主题：midnight / rose / emerald / azure / violet
 *  切换方式：document.documentElement.setAttribute('data-theme', '<id>')
 *  CSS 变量覆盖优先级：style.css :root → 本文件的 [data-theme="x"]
 * ============================================================ */

/* ---------- 主题色覆盖（覆盖 style.css 里 :root 定义的 --color-gold-*） ---------- */
/* 默认主题：石墨灰 —— 去渐变、低饱和的严肃工作配色 */
:root,
[data-theme="slate"] {
  --color-gold-300: #cdd6e2;
  --color-gold-400: #9fb2cc;
  --color-gold-500: #6e82a0;
  --color-blue: #9fb2cc;
  --color-mint: #9cb8a8;
  --color-rose: #d97070;
  --theme-accent-rgb: 159, 178, 204;
  --theme-accent-text: #b9c8dc;
  --theme-accent-bg-12: rgba(159, 178, 204, 0.10);
  --theme-accent-bg-18: rgba(159, 178, 204, 0.15);
  --theme-accent-bg-24: rgba(159, 178, 204, 0.20);
  --theme-accent-bg-73: rgba(159, 178, 204, 0.40);
  --theme-accent-shadow: 0 0 #0000;
  --theme-accent-shadow-strong: 0 0 #0000;
  --bg-preset: none;                    /* 无背景光晕，纯平深色 */
}

/* slate 主按钮：无光晕，平色浅填充区分层级 */
[data-theme="slate"] .btn.is-primary {
  background-color: var(--theme-accent-bg-24);
  color: #e6edf6;
}

[data-theme="midnight"] {
  --color-gold-300: #f8d98a;
  --color-gold-400: #f2b544;
  --color-gold-500: #dd9a20;
  --color-blue: #4ea8ff;
  --color-mint: #45d6a0;
  --color-rose: #ff6b6b;
  --theme-accent-rgb: 242, 181, 68;          /* gold 242/181/68 */
  --theme-accent-text: #f2b544;
  --theme-accent-bg-12: rgba(242, 181, 68, 0.12);
  --theme-accent-bg-18: rgba(242, 181, 68, 0.18);
  --theme-accent-bg-24: rgba(242, 181, 68, 0.24);
  --theme-accent-bg-73: rgba(242, 181, 68, 0.45);
  --theme-accent-shadow: 0 4px 18px rgba(242, 181, 68, 0.30);
  --theme-accent-shadow-strong: 0 3px 14px rgba(242, 181, 68, 0.22);
}

[data-theme="rose"] {
  --color-gold-300: #ffc2a8;
  --color-gold-400: #ff7a8a;
  --color-gold-500: #c9375a;
  --color-blue: #ff7a8a;
  --color-mint: #ffb1a3;
  --color-rose: #ff5a73;
  --theme-accent-rgb: 255, 122, 138;
  --theme-accent-text: #ff7a8a;
  --theme-accent-bg-12: rgba(255, 122, 138, 0.12);
  --theme-accent-bg-18: rgba(255, 122, 138, 0.18);
  --theme-accent-bg-24: rgba(255, 122, 138, 0.24);
  --theme-accent-bg-73: rgba(255, 122, 138, 0.45);
  --theme-accent-shadow: 0 4px 18px rgba(255, 122, 138, 0.30);
  --theme-accent-shadow-strong: 0 3px 14px rgba(255, 122, 138, 0.22);
}

[data-theme="emerald"] {
  --color-gold-300: #a3e8c1;
  --color-gold-400: #45d6a0;
  --color-gold-500: #1ea877;
  --color-blue: #45d6a0;
  --color-mint: #45d6a0;
  --color-rose: #ff7a8a;
  --theme-accent-rgb: 69, 214, 160;
  --theme-accent-text: #45d6a0;
  --theme-accent-bg-12: rgba(69, 214, 160, 0.12);
  --theme-accent-bg-18: rgba(69, 214, 160, 0.18);
  --theme-accent-bg-24: rgba(69, 214, 160, 0.24);
  --theme-accent-bg-73: rgba(69, 214, 160, 0.45);
  --theme-accent-shadow: 0 4px 18px rgba(69, 214, 160, 0.30);
  --theme-accent-shadow-strong: 0 3px 14px rgba(69, 214, 160, 0.22);
}

[data-theme="azure"] {
  --color-gold-300: #9bd5ff;
  --color-gold-400: #4ea8ff;
  --color-gold-500: #1f78d8;
  --color-blue: #4ea8ff;
  --color-mint: #4ea8ff;
  --color-rose: #ff6b6b;
  --theme-accent-rgb: 78, 168, 255;
  --theme-accent-text: #4ea8ff;
  --theme-accent-bg-12: rgba(78, 168, 255, 0.12);
  --theme-accent-bg-18: rgba(78, 168, 255, 0.18);
  --theme-accent-bg-24: rgba(78, 168, 255, 0.24);
  --theme-accent-bg-73: rgba(78, 168, 255, 0.45);
  --theme-accent-shadow: 0 4px 18px rgba(78, 168, 255, 0.30);
  --theme-accent-shadow-strong: 0 3px 14px rgba(78, 168, 255, 0.22);
}

[data-theme="violet"] {
  --color-gold-300: #d8b6ff;
  --color-gold-400: #a87fff;
  --color-gold-500: #7d4ee8;
  --color-blue: #a87fff;
  --color-mint: #b5e8a3;
  --color-rose: #ff6b6b;
  --theme-accent-rgb: 168, 127, 255;
  --theme-accent-text: #a87fff;
  --theme-accent-bg-12: rgba(168, 127, 255, 0.12);
  --theme-accent-bg-18: rgba(168, 127, 255, 0.18);
  --theme-accent-bg-24: rgba(168, 127, 255, 0.24);
  --theme-accent-bg-73: rgba(168, 127, 255, 0.45);
  --theme-accent-shadow: 0 4px 18px rgba(168, 127, 255, 0.30);
  --theme-accent-shadow-strong: 0 3px 14px rgba(168, 127, 255, 0.22);
}

/* ---------- 用主题色覆盖 style.css 里硬编码的 RGBA 出现处 ---------- */
/* 这些是在 style.css 编译态写死的 rgba(242,181,68, ...) 等价替换 */
[data-theme] .btn.is-primary {
  --tw-shadow-color: var(--theme-accent-bg-24);
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--theme-accent-shadow-strong);
  border-color: transparent;
}
[data-theme] .btn.is-on {
  background-color: var(--theme-accent-bg-12);
  border-color: var(--color-gold-400);
  color: var(--color-gold-400);
}
.btn:disabled {
  opacity: .38;
  cursor: not-allowed;
  filter: saturate(.5);
}
[data-theme] .inst-chip.active {
  background: var(--theme-accent-bg-12);
  border-color: var(--color-gold-400);
  color: #fff;
}
[data-theme] .slider::-webkit-slider-thumb {
  background: var(--color-gold-400);
  box-shadow: 0 0 0 4px var(--theme-accent-bg-18);
}
[data-theme] .slider::-moz-range-thumb { background: var(--color-gold-400); }
[data-theme] .audio-hint {
  color: var(--color-gold-400);
  background: var(--theme-accent-bg-18);
  border-color: var(--theme-accent-bg-73);
}
[data-theme] .drop-mask > div {
  border-color: var(--color-gold-400);
  color: var(--color-gold-400);
}
[data-theme] .shadow-\[0_4px_18px_rgba\(242\,181\,68\,\.3\)\] {
  box-shadow: var(--theme-accent-shadow);
}

/* ---------- 去渐变：logo 徽标与进度条一律改平色 ---------- */
[data-theme] header span.bg-gradient-to-br {
  background-image: none;
  background-color: var(--color-gold-400);
}
[data-theme] #progressFill,
[data-theme] #aiBar {
  background-image: none;
  background-color: var(--color-gold-400);
}

/* 进度条 / 渐变填充 / 选中行等显式引用 var(--color-gold-400) 的，变量覆盖后已生效，无需额外覆盖 */

/* ---------- 主题切换器（顶栏下拉） ---------- */
.theme-picker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  background: var(--color-panel);
  font-size: 11.5px;
  color: var(--color-dim);
  cursor: pointer;
  user-select: none;
  transition: border-color .15s, background-color .15s, color .15s;
}
.theme-picker:hover { border-color: var(--color-line-2); color: var(--color-txt); }
.theme-picker .swatch {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: var(--theme-accent-text, var(--color-gold-400));
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.25);
  transition: background-color .25s;
}

.theme-menu {
  position: fixed;   /* 与锚点视口坐标一致，不受页面滚动影响 */
  z-index: 120;
  background: #131a26;
  border: 1px solid #2a3344;
  border-radius: 10px;
  padding: 6px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .55);
  min-width: 200px;
  max-width: calc(100vw - 16px);
  max-height: min(78vh, 620px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #2a3348 transparent;
  font-size: 12.5px;
  color: #b9c4da;
}
.theme-menu .row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 0;
  background: transparent;
  width: 100%;
  text-align: left;
  color: inherit;
  cursor: pointer;
  border-radius: 6px;
}
.theme-menu .row:hover { background: #1c2533; }
.theme-menu .row.is-active {
  background: var(--theme-accent-bg-18);
  color: var(--theme-accent-text);
}
.theme-menu .row .dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.3);
}
.theme-menu .row .name { flex: 1; }
.theme-menu .row .check {
  font-size: 12px;
  opacity: .8;
}
.theme-menu .hint {
  padding: 6px 10px 0;
  color: #5d6980;
  font-size: 11px;
  border-top: 1px solid #2a3344;
  margin-top: 6px;
  line-height: 1.5;
}

/* ============================================================
 *  背景系统
 *  - 每主题都有渐变预设（变量 --bg-preset），保证始终有点缀色
 *  - 用户可上传自定义图片（变量 --bg-custom），通过 ::before 层显示
 *  - ::after 是统一的暗化遮罩，文字可读
 *  - 模糊与暗度由变量控制
 * ============================================================ */
/* 主题预设渐变 + 底色（覆盖 body 的 bg-ink-950）；slate 默认纯平无光晕 */
[data-theme="midnight"] {
  --bg-preset: radial-gradient(at 25% 15%, rgba(60, 40, 90, 0.30) 0%, transparent 55%),
               radial-gradient(at 80% 85%, rgba(20, 50, 90, 0.30) 0%, transparent 55%),
               radial-gradient(at 50% 50%, rgba(40, 30, 70, 0.18) 0%, transparent 70%);
}
[data-theme="rose"] {
  --bg-preset: radial-gradient(at 25% 15%, rgba(180, 60, 90, 0.32) 0%, transparent 55%),
               radial-gradient(at 80% 85%, rgba(140, 40, 100, 0.32) 0%, transparent 55%),
               radial-gradient(at 50% 50%, rgba(120, 30, 80, 0.18) 0%, transparent 70%);
}
[data-theme="emerald"] {
  --bg-preset: radial-gradient(at 25% 15%, rgba(40, 140, 100, 0.32) 0%, transparent 55%),
               radial-gradient(at 80% 85%, rgba(20, 90, 70, 0.32) 0%, transparent 55%),
               radial-gradient(at 50% 50%, rgba(30, 100, 80, 0.18) 0%, transparent 70%);
}
[data-theme="azure"] {
  --bg-preset: radial-gradient(at 25% 15%, rgba(40, 110, 200, 0.32) 0%, transparent 55%),
               radial-gradient(at 80% 85%, rgba(20, 60, 160, 0.32) 0%, transparent 55%),
               radial-gradient(at 50% 50%, rgba(30, 70, 140, 0.18) 0%, transparent 70%);
}
[data-theme="violet"] {
  --bg-preset: radial-gradient(at 25% 15%, rgba(130, 80, 220, 0.32) 0%, transparent 55%),
               radial-gradient(at 80% 85%, rgba(80, 40, 180, 0.32) 0%, transparent 55%),
               radial-gradient(at 50% 50%, rgba(100, 50, 200, 0.18) 0%, transparent 70%);
}

:root {
  --bg-custom: none;          /* url('data:image/...') 或 none */
  --bg-blur: 0px;
  --bg-overlay: 0.45;         /* 0..0.85，越大背景越暗 */
  --bg-show-image: 0;         /* 0 或 1，控制 ::before 是否显示 */
}

/* 主题预设渐变 + 底色（覆盖 body 的 bg-ink-950） */
body {
  background-color: var(--color-ink-950) !important;
  background-image: var(--bg-preset) !important;
  background-attachment: fixed !important;
  background-repeat: no-repeat !important;
}

/* 用户自定义背景图（通过 ::before 在最底层渲染） */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: var(--bg-custom);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: blur(var(--bg-blur));
  opacity: var(--bg-show-image);
  z-index: -2;
  pointer-events: none;
  transition: opacity .35s ease;
}

/* 统一的暗化遮罩，保证前景内容可读 */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background: rgba(8, 10, 15, var(--bg-overlay));
  z-index: -1;
  pointer-events: none;
}

/* ---------- 键盘演奏模式：琴键上的物理键位标注 ---------- */
.key.white { position: relative; }
.key .kmap {
  position: absolute;
  font-size: 9.5px;
  line-height: 1;
  font-family: var(--font-mono);
  pointer-events: none;
  background: rgba(23, 29, 42, 0.88);
  border: 1px solid #2a3344;
  border-radius: 3px;
  padding: 1.5px 3.5px;
  color: #8b97b3;
}
.key.white .kmap { top: 4px; left: 50%; transform: translateX(-50%); }
.key.black .kmap { bottom: 7px; left: 50%; transform: translateX(-50%); padding: 1px 3px; font-size: 9px; color: #a8b4cc; }

/* ---------- 琴键按压态跟随主题强调色（覆盖 style.css 写死的金色） ---------- */
[data-theme] .key.white.active {
  background: linear-gradient(
    rgba(var(--theme-accent-rgb), 0.22) 0%,
    rgba(var(--theme-accent-rgb), 0.45) 58%,
    rgba(var(--theme-accent-rgb), 0.72) 100%);
  box-shadow: inset 0 -14px 22px rgba(var(--theme-accent-rgb), 0.16);
}
[data-theme] .key.black.active {
  background: linear-gradient(
    rgba(var(--theme-accent-rgb), 0.50) 0%,
    rgba(var(--theme-accent-rgb), 0.72) 58%,
    rgba(var(--theme-accent-rgb), 0.95) 100%);
  box-shadow: 0 3px 10px rgba(var(--theme-accent-rgb), 0.35);
}

/* ============================================================
 *  手机端适配
 * ============================================================ */

/* 去除移动端点击灰色高亮 / 双击缩放 */
* { -webkit-tap-highlight-color: transparent; }
button, .inst-chip, .key, input[type="range"] { touch-action: manipulation; }

/* 抽屉遮罩：仅窄屏且抽屉打开时显示，点击关闭 */
#drawerMask {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 55;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(2px);
}
@media (max-width: 1023px) {
  body.drawer-open #drawerMask { display: block; }
  /* 刘海屏 / 手势条安全区 */
  header { padding-top: calc(env(safe-area-inset-top, 0px) + 14px); }
  .piano-wrap { margin-bottom: env(safe-area-inset-bottom, 0px); }
  main { padding-bottom: 8px; }
}

/* 顶栏窄屏收紧：右侧组可换行兜底，登录胶囊内部省略号 */
@media (max-width: 1023px) {
  header .ml-auto { min-width: 0; flex-wrap: wrap; justify-content: flex-end; row-gap: 4px; }
  #authBox > span { max-width: 44vw; }
  #authBox > span > span {
    max-width: 26vw; overflow: hidden; text-overflow: ellipsis;
    display: inline-block; vertical-align: bottom; white-space: nowrap;
  }
  #authBox button, #authBox a { white-space: nowrap; }
}
@media (max-width: 640px) {
  #authBox > span { max-width: 54vw; }
  #authBox > span > span { max-width: 32vw; }
  #authBox span[style*="opacity:.75"] { display: none; }  /* 「未登录 · 演奏全功能可用」长文案 */
}

/* 轨道行：窄屏两行布局（名称整行，音色+按钮一行）；极窄屏隐藏音量推子 */
@media (max-width: 640px) {
  .track-row { flex-wrap: wrap; row-gap: 6px; }
  .track-row .track-name { flex: 1 1 100%; width: auto; }
  .track-row .track-inst { flex: 1 1 120px; min-width: 0; }
  .track-row .track-mute, .track-row .track-solo,
  .track-row .track-rec, .track-row .track-edit { flex-shrink: 0; }
}
@media (max-width: 400px) {
  .track-row .track-vol { display: none; }
}

/* 合成器工作室弹窗：窄屏网格降列 */
@media (max-width: 640px) {
  .st-grid3 { grid-template-columns: 1fr 1fr !important; }
  .st-grid4 { grid-template-columns: 1fr 1fr !important; }
  .st-grid2 { grid-template-columns: 1fr !important; }
  .st-row { grid-template-columns: 1fr 1fr !important; }
  .st-head { flex-wrap: wrap; }
  .st-head #stName { flex: 1 1 120px; width: auto !important; }
  /* 音符编辑器表格窄屏压缩 */
  #noteEditor div[style*="grid-template-columns:60px"] {
    grid-template-columns: 44px 64px 1fr 1fr 56px 30px !important;
    gap: 4px !important;
    padding-left: 8px !important; padding-right: 8px !important;
  }
}

/* ---------- 主题菜单里的"背景"分区 ---------- */
.theme-menu .bg-section {
  margin: 6px 0 2px;
  padding-top: 6px;
  border-top: 1px solid #2a3344;
}
.theme-menu .bg-section .label {
  padding: 0 10px 6px;
  font-size: 11px;
  color: #5d6980;
  letter-spacing: .04em;
}
.theme-menu .bg-section .bg-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
}
.theme-menu .bg-section .bg-row .pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  font-size: 11px;
  border: 1px solid #2a3344;
  border-radius: 999px;
  background: #171d2a;
  color: #b9c4da;
  cursor: pointer;
  transition: border-color .15s, background-color .15s, color .15s;
}
.theme-menu .bg-section .bg-row .pill:hover { border-color: var(--color-line-2); color: #fff; }
.theme-menu .bg-section .bg-row .pill.is-on {
  border-color: var(--color-gold-400);
  background: var(--theme-accent-bg-12);
  color: var(--color-gold-400);
}
.theme-menu .bg-section .upload-btn {
  position: relative;
  overflow: hidden;
  display: inline-block;
}
.theme-menu .bg-section .upload-btn input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}
.theme-menu .bg-section .thumb {
  width: 36px;
  height: 24px;
  border-radius: 4px;
  border: 1px solid #2a3344;
  background-size: cover;
  background-position: center;
}
.theme-menu .bg-section .ctrl {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px 10px 6px;
  font-size: 10.5px;
  color: #8b97b3;
}
.theme-menu .bg-section .ctrl .ctrl-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.theme-menu .bg-section .ctrl .ctrl-row label {
  flex: 0 0 36px;
  color: #5d6980;
}
.theme-menu .bg-section .ctrl .ctrl-row input[type="range"] {
  flex: 1;
  appearance: none;
  height: 3px;
  background: #2a3348;
  border-radius: 999px;
  outline: none;
}
.theme-menu .bg-section .ctrl .ctrl-row input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 11px;
  height: 11px;
  background: var(--color-gold-400);
  border-radius: 50%;
  cursor: pointer;
}
.theme-menu .bg-section .ctrl .ctrl-row .val {
  flex: 0 0 30px;
  text-align: right;
  font-family: var(--font-mono);
  color: #b9c4da;
  font-size: 10.5px;
}


/* ============================================================
 *  「枕屋粉」亮色主题 —— 与主站 yxpil.com 视觉对齐
 *  亮色令牌对齐主站：bg #f7f8fa / 卡片 #ffffff / 强调粉 #ff4d7e
 *  文字 #1c222b / 边框 #e2e6ec / 悬停 #fff0f5
 * ============================================================ */

/* 弹层与画布共用的表面色令牌（深色默认值） */
:root {
  --surface-hover: #1c2533;      /* 菜单/弹层悬停底色 */
  --color-field: #0f141d;        /* 输入框底色 */
  --color-danger-bg: #3a1d1d;
  --color-danger-text: #ff9090;
  --color-danger-hover: #7a1f1f;
  --color-danger-border: #5c2431;
  --font-sans: "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", "Segoe UI", system-ui, sans-serif;
}

[data-theme="pillow"] {
  --color-ink-950: #f7f8fa;
  --color-panel: #ffffff;
  --color-panel-2: #eef1f5;
  --color-line: #e2e6ec;
  --color-line-2: #d9dfe8;
  --color-txt: #1c222b;
  --color-dim: #565e6b;
  --color-dim-2: #8f96a3;
  --color-gold-300: #ff8fb1;
  --color-gold-400: #ff4d7e;
  --color-gold-500: #e03a6b;
  --color-blue: #ff4d7e;
  --color-mint: #45d6a0;
  --color-rose: #e03131;
  --surface-hover: #fff0f5;
  --color-field: #f7f8fa;
  --color-danger-bg: #fff5f5;
  --color-danger-text: #e03131;
  --color-danger-hover: #ffe3e3;
  --color-danger-border: #fecaca;
  --theme-accent-rgb: 255, 77, 126;
  --theme-accent-text: #ff4d7e;
  --theme-accent-bg-12: rgba(255, 77, 126, 0.10);
  --theme-accent-bg-18: rgba(255, 77, 126, 0.14);
  --theme-accent-bg-24: rgba(255, 77, 126, 0.18);
  --theme-accent-bg-73: rgba(255, 77, 126, 0.40);
  --theme-accent-shadow: 0 4px 18px rgba(255, 77, 126, 0.16);
  --theme-accent-shadow-strong: 0 3px 14px rgba(255, 77, 126, 0.12);
  --bg-preset: radial-gradient(at 25% 15%, rgba(255, 77, 126, 0.05) 0%, transparent 55%),
               radial-gradient(at 80% 85%, rgba(255, 143, 177, 0.06) 0%, transparent 55%);
}

/* 主按钮：实心粉 + 白字（对齐主站 --accent-text:#fff） */
[data-theme="pillow"] .btn.is-primary {
  background-color: #ff4d7e;
  color: #fff;
}

/* 顶栏 logo 徽标文字改白（text-ink-950 在亮色下会变浅灰不可读） */
[data-theme="pillow"] header span.bg-gradient-to-br { color: #fff; }

/* 遮罩层：暗化黑纱改亮色白纱 */
[data-theme="pillow"] body::after { background: rgba(247, 248, 250, var(--bg-overlay)); }

/* style.css 中硬编码深色的组件覆盖 */
[data-theme="pillow"] .slider { background: #e2e6ec; }
[data-theme="pillow"] .scroll-y { scrollbar-color: #c9d1dd transparent; }
[data-theme="pillow"] .scroll-y::-webkit-scrollbar-thumb { background: #c9d1dd; }
[data-theme="pillow"] .inst-chip { color: #565e6b; }
[data-theme="pillow"] .klabel { color: #8f96a3; }
[data-theme="pillow"] .key .kmap {
  background: rgba(255, 255, 255, 0.92);
  border-color: #e2e6ec;
  color: #565e6b;
  box-shadow: 0 1px 2px rgba(23, 30, 38, 0.08);
}
[data-theme="pillow"] .key.black .kmap { color: #565e6b; }
[data-theme="pillow"] .toast {
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 10px 30px rgba(23, 30, 38, 0.14);
}
[data-theme="pillow"] .toast.err { color: #e03131; border-color: #fecaca; }

/* index.html 中任意值工具类（写死的深色） */
[data-theme="pillow"] .bg-\[\#0d1119\] { background-color: #eef1f5; }
[data-theme="pillow"] .bg-\[\#0f141d\] { background-color: #faf5f7; }
[data-theme="pillow"] .bg-\[\#222b3f\] { background-color: #e2e6ec; }
[data-theme="pillow"] .bg-\[\#0b0e14\] { background-color: #fbfbfd; }
[data-theme="pillow"] .text-\[\#6b7793\] { color: #8f96a3; }
[data-theme="pillow"] .text-\[\#a8b4cc\] { color: #8f96a3; }
[data-theme="pillow"] .text-\[\#b6c4e0\] { color: #565e6b; }
[data-theme="pillow"] .text-\[\#b9c4da\] { color: #565e6b; }
[data-theme="pillow"] .shadow-\[12px_0_44px_rgba\(0\,0\,0\,\.6\)\] { box-shadow: 12px 0 44px rgba(23, 30, 38, 0.12); }
[data-theme="pillow"] .shadow-\[0_-8px_30px_rgba\(0\,0\,0\,\.35\)\] { box-shadow: 0 -8px 30px rgba(23, 30, 38, 0.10); }

/* 主题选择器与下拉菜单亮色 */
[data-theme="pillow"] .theme-picker { background: #fff; border-color: #e2e6ec; color: #565e6b; }
[data-theme="pillow"] .theme-picker:hover { border-color: #ff8fb1; color: #1c222b; }
[data-theme="pillow"] .theme-picker .swatch { box-shadow: 0 0 0 2px rgba(23, 30, 38, 0.08); }
[data-theme="pillow"] .theme-menu {
  background: #ffffff;
  border-color: #e2e6ec;
  box-shadow: 0 16px 40px rgba(23, 30, 38, 0.14);
  color: #565e6b;
  scrollbar-color: #c9d1dd transparent;
}
[data-theme="pillow"] .theme-menu .row:hover { background: #fff0f5; }
[data-theme="pillow"] .theme-menu .row .dot { border-color: rgba(0, 0, 0, 0.12); box-shadow: 0 0 0 2px rgba(23, 30, 38, 0.06); }
[data-theme="pillow"] .theme-menu .hint { color: #8f96a3; border-top-color: #e2e6ec; }
[data-theme="pillow"] .theme-menu .bg-section { border-top-color: #e2e6ec; }
[data-theme="pillow"] .theme-menu .bg-section .label { color: #8f96a3; }
[data-theme="pillow"] .theme-menu .bg-section .pill { border-color: #e2e6ec; background: #eef1f5; color: #565e6b; }
[data-theme="pillow"] .theme-menu .bg-section .pill:hover { border-color: #ff8fb1; color: #1c222b; }
[data-theme="pillow"] .theme-menu .bg-section .thumb { border-color: #e2e6ec; }
[data-theme="pillow"] .theme-menu .bg-section .ctrl { color: #565e6b; }
[data-theme="pillow"] .theme-menu .bg-section .ctrl .ctrl-row label { color: #8f96a3; }
[data-theme="pillow"] .theme-menu .bg-section .ctrl .ctrl-row input[type="range"] { background: #e2e6ec; }
[data-theme="pillow"] .theme-menu .bg-section .ctrl .ctrl-row .val { color: #565e6b; }

/* ---------- 石墨灰主题强调色对齐主站暗色强调 #5b8bff ---------- */
[data-theme="slate"] {
  --color-blue: #5b8bff;
  --theme-accent-rgb: 91, 139, 255;
  --theme-accent-text: #5b8bff;
  --theme-accent-bg-12: rgba(91, 139, 255, 0.12);
  --theme-accent-bg-18: rgba(91, 139, 255, 0.18);
  --theme-accent-bg-24: rgba(91, 139, 255, 0.24);
  --theme-accent-bg-73: rgba(91, 139, 255, 0.45);
}
[data-theme="slate"] .btn.is-primary { color: #fff; }