/* 2026-10-28 浅色主题（用户要求加浅色、深色两种，不跟随系统）。
   颜色变量在 tokens.css 的 :root[data-theme="light"]；这里只放变量管不到的地方。 */

/* 常用设置里的「界面颜色」 */
.preferences-theme { border: 0; padding: 0; margin: 0 0 18px; }
.preferences-theme legend { padding: 0; margin-bottom: 8px; font-weight: 600; }
.preferences-segment { display: inline-flex; gap: 4px; padding: 4px; border-radius: 10px; background: var(--color-surface-muted); }
.preferences-segment button { min-width: 88px; height: 34px; padding: 0 16px; border: 0; border-radius: 7px; background: transparent; color: var(--color-text-secondary); font-weight: 600; cursor: pointer; }
.preferences-segment button[aria-pressed="true"] { background: var(--color-primary); color: #fff; }
.preferences-segment button:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* 看大图的区域在两种主题下都是黑底（照飞象），里面沿用深色变量。 */
:root[data-theme="light"] :is(.tv-viewer, .tv-tip) {
  color-scheme: dark;
  --color-page: #000; --color-surface: #18181b; --color-surface-muted: #1d1d20; --color-glass: #18181b;
  --color-text: #fff; --color-text-secondary: rgb(255 255 255 / 80%); --color-text-muted: rgb(255 255 255 / 50%);
  --color-border: #2f2f33; --color-border-strong: #484850; --color-hover: #3a3a40; --color-primary-soft: #1d1d20; --ink: 255 255 255;
}

/* AI 帮写：浅底上用深紫字 */
:root[data-theme="light"] .textbtn.regen-btn { color: #4f49d6; background: rgb(123 118 255 / 12%); border-color: rgb(123 118 255 / 45%); }
:root[data-theme="light"] .textbtn.regen-btn:hover:not(:disabled) { color: #fff; background: var(--color-primary); border-color: var(--color-primary); }
:root[data-theme="light"] .regen-icon { background: #7b76ff; }
:root[data-theme="light"] .regen-btn:hover:not(:disabled) .regen-icon { background: #fff; }
:root[data-theme="light"] .ai-write { color: #4f49d6; background: rgb(123 118 255 / 12%); border-color: rgb(123 118 255 / 45%); }
:root[data-theme="light"] .ai-write:hover:not(:disabled) { color: #fff; }
:root[data-theme="light"] .ai-spark { background: #7b76ff; }
:root[data-theme="light"] .ai-write:hover:not(:disabled) .ai-spark { background: #fff; }

/* 左上角标志原图是浅灰色，浅色主题下反成深灰 */
:root[data-theme="light"] .wb-brand-mark img { filter: invert(.85); }

/* 任务视图里只在深色下成立的写法 */
:root[data-theme="light"] body[data-task-view="open"] .tv-composer-box { background: rgb(255 255 255 / 85%); border-color: var(--color-border); box-shadow: 0 6px 24px -10px rgb(15 20 25 / 18%); }
:root[data-theme="light"] body[data-task-view="open"] .tv-batch-menu { background: rgb(255 255 255 / 98%); }
:root[data-theme="light"] body[data-task-view="open"] .image-job-progress progress::-webkit-progress-value { background: var(--color-primary); }
:root[data-theme="light"] body[data-task-view="open"] .image-job-progress progress::-moz-progress-bar { background: var(--color-primary); }
:root[data-theme="light"] :is(.image-stats-dialog, .workspace-account-dialog, .layout-dialog, .layout-zoom, .cm-dialog, .vt-dialog, .ar-reader, .image-results-dialog, .production-wait)::backdrop { background: rgb(15 20 25 / 30%); }

/* 2026-10-31 模特形象页签：浅色下选中项是白底浮起（深色下是 --color-hover 灰底，见 theme-graphite.css）。 */
:root[data-theme="light"] .cm-tabs button.active { background: var(--color-surface); box-shadow: 0 1px 4px rgb(0 0 0 / 8%); }