/* VOX ATLAS 主题：浅色（默认）/ 深色。所有需要随主题变化的颜色都走变量 */
:root {
  --glass: rgba(241, 238, 230, .92);
  --hover: rgba(32, 35, 31, .05);
  --sel: rgba(195, 106, 67, .12);
  --shadow: rgba(32, 35, 31, .35);
  --preview-bg: #E2DED2;
  --thumb: rgba(32, 35, 31, .24);
  --on-ink-sub: #A9AFA3;
  --drop-over: #EAE6DA;
  --mark: rgba(195, 106, 67, .2);
  --pill-mid: #9A7A2C;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --paper: #161B17;
  --paper-2: #1C221D;
  --card: #1D241E;
  --ink: #E8E3D5;
  --sub: #A1A898;
  --moss: #93AE7F;
  --rust: #E0906A;
  --rule: #323B33;
  --night: #0E120F;
  --night-ink: #E8E3D5;
  --glass: rgba(22, 27, 23, .9);
  --hover: rgba(232, 227, 213, .06);
  --sel: rgba(224, 144, 106, .16);
  --shadow: rgba(0, 0, 0, .65);
  --preview-bg: #0F1310;
  --thumb: rgba(232, 227, 213, .22);
  --on-ink-sub: #5C6358;
  --drop-over: #222A23;
  --mark: rgba(224, 144, 106, .28);
  --pill-mid: #D4B26A;
  color-scheme: dark;
}
:root[data-theme="dark"] body::before { opacity: .18; filter: invert(1); }

/* 替换写死的颜色 */
.nav { background: var(--glass); }
.btn.primary:hover { background: var(--sub); }
.tpl-tabs button.on small, .tpl-list button.on small { color: var(--on-ink-sub); }
.stage, .tpl-card:hover .thumb { box-shadow: 0 30px 60px -40px var(--shadow); }
.drop.over { background: var(--drop-over); }
.edit-bar { background: var(--glass); }
.pill.mid { color: var(--pill-mid); }
.ctx mark, .detail mark { background: var(--mark); color: var(--ink); }
.poster-preview { background: var(--preview-bg); }
.poster-preview .sheet { box-shadow: 0 40px 70px -40px var(--shadow); }
.ex-list li:hover, .pick-list button:hover { background: var(--hover); }
.ex-list li.on { background: var(--sel); }
.pick-list button.on { background: var(--sel); }
.who { color: var(--ink); }
.input, .select, .textarea, .drop, .seg-card, .icon-btn { background: var(--card); }
.icon-btn { color: var(--ink); }
::selection { background: var(--mark); }
* { scrollbar-color: var(--thumb) transparent; }
::-webkit-scrollbar-thumb { background-color: var(--thumb); }
.intro { background: var(--paper); }
.inode b { background: var(--paper); }
.tip { background: var(--ink); color: var(--paper); }
@media (max-width: 860px) {
  .mbar, .export-row, .edit-bar { background: var(--glass) !important; }
  .mbar button.on { background: var(--hover); }
  .msheet { box-shadow: 0 -24px 48px -24px var(--shadow); }
}

/* 切换按钮 */
.theme-btn {
  display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--rule); background: transparent; color: var(--ink);
  border-radius: 999px; padding: 5px 12px 5px 9px; cursor: pointer; font-size: 13px; min-height: 34px; margin-left: 4px;
}
.theme-btn:hover { border-color: var(--ink); }
.theme-btn svg { width: 16px; height: 16px; }
.hero-theme { margin-top: 14px; display: inline-flex; border: 1px solid var(--rule); border-radius: 999px; padding: 3px; gap: 2px; opacity: 0; animation: fade-up 1s var(--ease) 1.25s forwards; }
.hero-theme button { border: 0; background: none; color: var(--sub); padding: 6px 14px; border-radius: 999px; cursor: pointer; font-size: 13px; }
.hero-theme button.on { background: var(--ink); color: var(--paper); }
@media (max-width: 640px) { .theme-btn span { display: none; } .theme-btn { padding: 5px 8px; } }
html { transition: background-color .4s var(--ease); }
body { transition: background-color .4s var(--ease), color .4s var(--ease); }