/* theme-light.css —— 全站浅色主题「云白」
 *
 * 怎么用：<html> 上挂 class="theme-light" 就行（由 theme-switch.js 负责挂）。
 *         深色主题「深空」是默认值，不带这个类就是深色。
 *
 * 为什么挂在 <html> 而不是 <body>：
 *   theme-switch.js 在 <head> 里同步执行，那时候 body 还不存在，
 *   挂到 body 上会「先画一帧深色再变浅」闪一下。documentElement 在 head 就有了，零闪屏。
 *
 * 覆盖范围怎么定的（2026-09-28 换肤那轮的方法，后续加页面照做）：
 *   把全部 13 个页面渲染出来，用脚本扫「深色背景 / 浅色文字」的元素，
 *   再回 styles.css 找出是哪条规则设的深色值，逐条给浅色对应。
 *   扫出来一共 30 类，高度共享：INPUT/SELECT/TEXTAREA 覆盖 10 个页面、
 *   .home-nav 8 个、.panel 家族十几个 —— 所以一份文件就能兜住全站。
 *
 * ★ 最关键的一步是【重新定义强调色变量】（见下面 --cyan / --green / --violet）：
 *   深色主题里它们是为深底设计的亮色，搬到浅底就是「浅字压浅底，看不见」。
 *   一条条追那几十处 var() 引用追不干净，改变量本身才收得干净。
 */

/* ── 设计变量（沿用影刀那套命名）───────────────────────────────────── */
html.theme-light {
  --wl-brand: #8067ff;
  --wl-brand-2: #ff7ab6;
  --wl-brand-ink: #176a9a;
  --wl-brand-soft: rgba(58, 167, 255, .12);
  --wl-brand-line: rgba(58, 167, 255, .3);
  --wl-ink: #1b2334;
  --wl-ink-2: #33405c;
  --wl-muted: #6b7485;
  --wl-line: rgba(89, 104, 133, .18);
  --wl-line-strong: rgba(89, 104, 133, .26);
  --wl-surface: rgba(255, 255, 255, .86);
  --wl-panel: rgba(255, 255, 255, .82);
  --wl-field: rgba(255, 255, 255, .9);
  --wl-soft: rgba(255, 255, 255, .5);
  --wl-radius: 18px;
  --wl-shadow: 0 18px 48px rgba(74, 88, 132, .13);
  --wl-shadow-sm: 0 8px 24px rgba(74, 88, 132, .1);

  /* ★★ 关键一步：把深色主题的【强调色变量】就地重新定义。
   *
   * 深色主题里 --cyan 是 #67e8f9（亮青）、--green 是 #34d399（亮绿）——
   * 这些是「深底上的亮色」，直接搬到浅底上就成了【浅字压浅底，看不见】。
   * 「01 第一步…」那种小标题、上传图标、运行中状态全是这个毛病。
   *
   * 一条条去追那些规则没用（styles.css 里有几十处引用这些变量），
   * 直接把变量本身换成浅底可读的深色版，所有 var() 引用一次性全对。
   * 这是这次换肤能收干净的根本原因。 */
  --text: #1b2334;
  --muted: #6b7485;
  --line: rgba(89, 104, 133, .18);
  --line-strong: rgba(89, 104, 133, .28);
  --cyan: #0e7490;              /* 原 #67e8f9（深底亮青）→ 浅底可读的青 */
  --blue: #2563eb;              /* 原 #60a5fa */
  --violet: #7c3aed;            /* 原 #a78bfa */
  --green: #047857;             /* 原 #34d399 */
  --danger: #d92d20;            /* 原 #fb7185 */
  --panel: rgba(255, 255, 255, .82);
  --panel-strong: rgba(255, 255, 255, .95);
  --field: rgba(255, 255, 255, .9);
  --bg: #f7f9ff;
  --shadow: 0 18px 48px rgba(74, 88, 132, .13);

  color-scheme: light;              /* 让原生控件（下拉箭头、滚动条）也跟着变浅 */
  color: var(--wl-ink);
}

/* ── 页面底 + 去掉深色的光栅背景 ────────────────────────────────────── */
/* ⚠️ 必须设在 body 上，不能设在 html 上。
 *    styles.css 里 `body { background: ... #0a111d ... }` 是深色渐变 ——
 *    如果把浅色渐变设到 <html>，会被 body 自己的背景整片盖住，
 *    表现是「导航变浅了、页面底还是黑的、文字快看不清」。
 *    这个是实测截图发现的（2026-09-28），不是想出来的。
 *    选择器用 html.theme-light body（0,1,1）压过 body（0,0,1）。 */
html.theme-light body {
  background:
    radial-gradient(circle at 12% 6%, rgba(128, 103, 255, .13), transparent 32%),
    radial-gradient(circle at 86% 16%, rgba(58, 167, 255, .14), transparent 36%),
    linear-gradient(135deg, #f7f9ff, #fff8f5);
}

/* 原版在 body 上叠了一层深色网格纹理，浅色下看着像脏点，直接藏掉 */
html.theme-light .ambient-grid {
  display: none;
}

/* ── 顶部导航 ───────────────────────────────────────────────────────── */
html.theme-light .home-nav {
  border: 1px solid rgba(255, 255, 255, .78);
  border-radius: 24px;
  background: rgba(255, 255, 255, .74);
  box-shadow: var(--wl-shadow);
  backdrop-filter: blur(18px);
}

html.theme-light .brand-link strong,
html.theme-light .home-nav strong {
  color: var(--wl-ink);
}

html.theme-light .brand-mark {
  color: #fff;
  background: linear-gradient(135deg, var(--wl-brand), var(--wl-brand-2));
  box-shadow: 0 8px 20px rgba(128, 103, 255, .3);
}

html.theme-light .main-nav-links a {
  border: 1px solid var(--wl-line);
  border-radius: 999px;
  background: rgba(255, 255, 255, .68);
  color: var(--wl-muted);
}

html.theme-light .main-nav-links a:hover {
  border-color: var(--wl-brand-line);
  background: var(--wl-brand-soft);
  color: var(--wl-brand-ink);
}

html.theme-light .main-nav-links a.active {
  border-color: transparent;
  background: linear-gradient(135deg, var(--wl-brand), var(--wl-brand-2));
  color: #fff;
}

/* 顶栏右侧的账号区（记账/额度/退出那一块） */
html.theme-light .nav-actions,
html.theme-light .nav-actions a,
html.theme-light .nav-actions button {
  color: var(--wl-ink-2);
}

html.theme-light .nav-actions a {
  border: 1px solid var(--wl-line);
  border-radius: 999px;
  background: rgba(255, 255, 255, .72);
}

html.theme-light .nav-actions a:hover {
  border-color: var(--wl-brand-line);
  background: var(--wl-brand-soft);
  color: var(--wl-brand-ink);
}

/* ── 通用文字 ───────────────────────────────────────────────────────── */
html.theme-light .eyebrow,
html.theme-light .section-title span,
html.theme-light .result-head p,
html.theme-light .subtitle {
  color: var(--wl-muted);
}

html.theme-light h1,
html.theme-light h2,
html.theme-light h3,
html.theme-light strong,
html.theme-light .section-title strong {
  color: var(--wl-ink);
}

html.theme-light p,
html.theme-light label,
html.theme-light span,
html.theme-light small {
  color: inherit;
}

html.theme-light label {
  color: var(--wl-ink-2);
}

html.theme-light .batch-hero p,
html.theme-light .workflow-hero p {
  color: var(--wl-muted);
}

/* ── 各种卡片 / 面板 / 容器 ─────────────────────────────────────────── */
html.theme-light .workflow-scenes,
html.theme-light .workflow-stage-panel,
html.theme-light .workflow-control,
html.theme-light .workflow-board,
html.theme-light .panel,
html.theme-light .workflow-card-actions,
html.theme-light .workflow-carousel-grid > *,
html.theme-light .workflow-output {
  border: 1px solid rgba(255, 255, 255, .78);
  border-radius: var(--wl-radius);
  background: var(--wl-panel);
  box-shadow: var(--wl-shadow);
  backdrop-filter: blur(18px);
}

/* 原来在深色页里是「深底 + 暗边框」的那一批，统一翻成浅色卡 */
html.theme-light .workflow-grid div,
html.theme-light .carousel-scene,
html.theme-light .result-pagination,
html.theme-light .result-collapsed-summary,
html.theme-light .workflow-run-item,
html.theme-light .carousel-result-card,
html.theme-light .workflow-beautify-card,
html.theme-light .workflow-reference-gallery,
html.theme-light .batch-progress,
html.theme-light .queue-item,
html.theme-light .result-card,
html.theme-light .progress-card {
  border: 1px solid var(--wl-line);
  border-radius: 14px;
  background: rgba(255, 255, 255, .66);
  box-shadow: none;
}

/* 图片容器：深色底是为了衬托图片，浅色下给个浅灰底更自然 */
html.theme-light .thumb,
html.theme-light .queue-thumb,
html.theme-light .queue-result,
html.theme-light .result-card img,
html.theme-light .carousel-result-image,
html.theme-light .workflow-big-image,
html.theme-light .workflow-reference-image {
  border-radius: 12px;
  background: #f1f4fa;
}

html.theme-light .workflow-reference-image-index {
  border-radius: 999px;
  background: rgba(27, 35, 52, .72);
  color: #fff;
}

/* 场景头（折叠那一行） */
html.theme-light .workflow-scene-head,
html.theme-light .workflow-scene-toolbar,
html.theme-light .workflow-scene-body {
  color: var(--wl-ink);
}

html.theme-light .scene-toggle .workflow-scene-title,
html.theme-light input.workflow-scene-title {
  border: 1px solid var(--wl-line);
  border-radius: 12px;
  background: var(--wl-field);
  color: var(--wl-ink);
}

/* ── 空态 ───────────────────────────────────────────────────────────── */
html.theme-light .empty,
html.theme-light .compact-empty {
  border: 1px dashed var(--wl-line-strong);
  border-radius: 14px;
  background: rgba(255, 255, 255, .5);
  color: var(--wl-muted);
}

html.theme-light .empty strong,
html.theme-light .compact-empty strong {
  color: var(--wl-ink);
}

/* ── 表单控件 ───────────────────────────────────────────────────────── */
html.theme-light .workflow-light input,
html.theme-light input,
html.theme-light textarea,
html.theme-light select {
  border: 1px solid var(--wl-line);
  border-radius: 12px;
  background: var(--wl-field);
  color: var(--wl-ink);
}

html.theme-light input::placeholder,
html.theme-light textarea::placeholder {
  color: #9aa5b5;
}

html.theme-light input:focus,
html.theme-light textarea:focus,
html.theme-light select:focus {
  border-color: rgba(128, 103, 255, .58);
  box-shadow: 0 0 0 4px rgba(128, 103, 255, .13);
}

/* 下拉展开后的选项列表：深色主题把它设成了 #0b1422，浅色下会「白底黑字看不见」 */
html.theme-light select option {
  background: #fff;
  color: var(--wl-ink);
}

/* 勾选框别的都不用动，浏览器跟随 color-scheme 已经变浅 */
html.theme-light .toggle-field,
html.theme-light .mini-check {
  color: var(--wl-ink-2);
}

/* ── 按钮：影刀那种胶囊 ─────────────────────────────────────────────── */
html.theme-light button,
html.theme-light .secondary {
  border: 1px solid var(--wl-line);
  border-radius: 999px;
  background: rgba(255, 255, 255, .8);
  color: var(--wl-ink-2);
}

html.theme-light button:hover:not(:disabled),
html.theme-light .secondary:hover:not(:disabled) {
  border-color: var(--wl-brand-line);
  background: var(--wl-brand-soft);
  color: var(--wl-brand-ink);
}

html.theme-light button.primary,
html.theme-light .primary {
  border-color: transparent;
  background: linear-gradient(135deg, var(--wl-brand), var(--wl-brand-2));
  color: #fff;
  box-shadow: 0 10px 22px rgba(128, 103, 255, .24);
}

html.theme-light button.primary:hover:not(:disabled),
html.theme-light .primary:hover:not(:disabled) {
  color: #fff;
  filter: brightness(1.04);
}

/* 危险动作（删除/清空）保留红系，只是换成浅底 */
html.theme-light .danger,
html.theme-light .batch-actions .danger,
html.theme-light .delete-beautify-btn {
  border-color: rgba(217, 45, 32, .32);
  background: rgba(217, 45, 32, .08);
  color: #d92d20;
}

html.theme-light .danger:hover:not(:disabled),
html.theme-light .batch-actions .danger:hover:not(:disabled),
html.theme-light .delete-beautify-btn:hover:not(:disabled) {
  border-color: rgba(217, 45, 32, .55);
  background: rgba(217, 45, 32, .15);
  color: #b42318;
}

/* ── 上传区 ─────────────────────────────────────────────────────────── */
html.theme-light .batch-upload,
html.theme-light .upload-box {
  border: 1px dashed var(--wl-line-strong);
  border-radius: 14px;
  background: rgba(255, 255, 255, .55);
  color: var(--wl-ink-2);
}

html.theme-light .upload-box:hover,
html.theme-light .batch-upload:hover {
  border-color: var(--wl-brand-line);
  background: var(--wl-brand-soft);
}

html.theme-light .upload-icon {
  color: #fff;
  background: linear-gradient(135deg, var(--wl-brand), var(--wl-brand-2));
}

/* ── 进度条 ─────────────────────────────────────────────────────────── */
html.theme-light .progress-meter {
  border-radius: 999px;
  background: rgba(89, 104, 133, .14);
}

html.theme-light .progress-meter span {
  background: linear-gradient(90deg, var(--wl-brand), var(--wl-brand-2));
}

html.theme-light .progress-stats,
html.theme-light .queue-summary {
  color: var(--wl-muted);
}

/* ── 结果区 ─────────────────────────────────────────────────────────── */
html.theme-light .result-head {
  border-bottom: 1px solid var(--wl-line);
  color: var(--wl-ink);
}

html.theme-light .result-frame {
  border: 1px solid var(--wl-line);
  border-radius: 14px;
  background: #f8faff;
}

html.theme-light .carousel-result-meta,
html.theme-light .workflow-card-meta {
  color: var(--wl-muted);
}

/* ── 设置面板（尺寸裁切那一块由 image-size-settings.js 渲染）───────── */
html.theme-light .ai-prompt-settings,
html.theme-light .settings-grid {
  color: var(--wl-ink);
}

/* ── 滚动条：深色主题的滚动条在浅色下是一道黑边 ─────────────────────── */
html.theme-light ::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

html.theme-light ::-webkit-scrollbar-track {
  background: transparent;
}

html.theme-light ::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background: rgba(89, 104, 133, .28);
  background-clip: content-box;
}

html.theme-light ::-webkit-scrollbar-thumb:hover {
  background: rgba(89, 104, 133, .45);
  background-clip: content-box;
}

/* ── 右下角的「永久存储」状态条 ─────────────────────────────────────── */
/* 那条是 browser-archive.js 自己注入的，全站统一是深色（在深色页上正合适）。
   浅色页面上它像块黑补丁，这里给它一个浅色变体。
   注意只改颜色不动布局 —— 位置、圆角、呼吸动画都保持原样。 */
html.theme-light #archiveStatusBadge {
  border-color: var(--wl-line);
  background: rgba(255, 255, 255, .95);
  color: var(--wl-muted);
  box-shadow: 0 10px 30px rgba(74, 88, 132, .18);
}

html.theme-light #archiveStatusBadge.is-active {
  border-color: rgba(128, 103, 255, .45);
  background: rgba(255, 255, 255, .97);
  color: #5b47b8;
}

html.theme-light #archiveStatusBadge .asb-dot {
  background: #b6c0d0;
}

html.theme-light #archiveStatusBadge.is-active .asb-dot {
  background: linear-gradient(135deg, var(--wl-brand), var(--wl-brand-2));
}

/* ── 勾选行 / 开关行 ─────────────────────────────────────────────────── */
/* ★ 深色主题给 .toggle-field 铺了 rgba(8,15,27,.76) 的深底 —— 换到浅色页面
 *   就是一块突兀的黑补丁。（Else哥 2026-09-28 截图指出的就是这个）
 *   这种「整行深底」的容器最容易被漏掉：它不靠变量、也不是图文卡片，扫一眼看不出来。 */
html.theme-light .toggle-field {
  border: 1px solid var(--wl-line);
  background: rgba(255, 255, 255, .68);
  color: var(--wl-ink-2);
}

/* 勾选框用品牌色，别跟着深色主题的亮绿 */
html.theme-light .toggle-field input,
html.theme-light .mini-check input {
  accent-color: var(--wl-brand);
}

html.theme-light .mini-check {
  color: var(--wl-ink-2);
}

/* 小标题那一行：深色主题是近白色字（#e4f5fb），浅底上会看不见。
   虽然它的子元素都被单独覆盖了，这里还是补上 —— 免得以后有人往里直接塞文字节点。 */
html.theme-light .section-title {
  color: var(--wl-ink);
}

html.theme-light .section-title span {
  border-color: rgba(128, 103, 255, .28);
  background: rgba(128, 103, 255, .1);
  color: #6d4fd8;
}

/* ── 青色调容器：深色主题靠青色做强调，浅底上换成品牌紫 ─────────────── */
html.theme-light .queue-summary,
html.theme-light .carousel-scene-adder,
html.theme-light .workflow-action-field,
html.theme-light .workflow-scene-toolbar {
  border-color: rgba(128, 103, 255, .2);
  background: rgba(128, 103, 255, .06);
  color: var(--wl-ink-2);
}

/* 运行中 / 忙碌态：原来是一层青色微光，浅色下换成品牌紫微光 */
html.theme-light .queue-item.running,
html.theme-light .carousel-result-card.running,
html.theme-light .workflow-beautify-card.running,
html.theme-light .status.busy {
  border-color: rgba(128, 103, 255, .3);
  background: rgba(128, 103, 255, .1);
}

html.theme-light .workflow-reference-add {
  border-color: rgba(128, 103, 255, .26);
  color: #6d4fd8;
}

html.theme-light .workflow-reference-add:hover {
  background: rgba(128, 103, 255, .08);
}

html.theme-light .workflow-grid span {
  background: rgba(4, 120, 87, .1);
  color: var(--green);
}

html.theme-light .status-dot {
  background: var(--green);
}

/* ── 测试版横幅 ─────────────────────────────────────────────────────── *//* 说明「这是测试版」，并给一条回正式版的路 —— 免得用户分不清在哪一页 */
html.theme-light .workflow-light-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
  padding: 10px 16px;
  border: 1px solid rgba(128, 103, 255, .26);
  border-radius: 14px;
  background: rgba(128, 103, 255, .08);
  color: #4b3a9e;
  font-size: 13px;
  line-height: 1.6;
}

html.theme-light .workflow-light-banner strong {
  color: #6d4fd8;
}

html.theme-light .workflow-light-banner a {
  flex: 0 0 auto;
  padding: 5px 13px;
  border: 1px solid var(--wl-brand-line);
  border-radius: 999px;
  background: rgba(255, 255, 255, .8);
  color: var(--wl-brand-ink);
  font-weight: 700;
  text-decoration: none;
}

html.theme-light .workflow-light-banner a:hover {
  border-color: rgba(58, 167, 255, .48);
  background: var(--wl-brand-soft);
}

/* ── 窄屏 ───────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  html.theme-light .home-nav {
    border-radius: 20px;
  }
}


/* ══════════════════════════════════════════════════════════════════════
 * 以下覆盖其它页面家族（扫全站 13 个页面得出的清单，共 30 类深色元素）
 * 这些页面在换肤之前只跑深色主题，所以是后面补上的。
 * ══════════════════════════════════════════════════════════════════════ */

/* ── .panel 家族：十来个页面共用同一个基类，只是各自加了前缀 ────────── */
/* 实测深色值 rgba(15,24,38,.78) / rgba(12,22,36,.82) / rgba(16,27,44,.92)，
   出现十几处（batch-control / batch-queue-panel / workflow-* / form-panel /
   result-panel / aplus-* / carousel-* / gpt-lab-* / multi-reference-*）。
   与其逐个列，不如按 .panel 统一接管 —— 它们本来就是同一套视觉。 */
html.theme-light .panel,
html.theme-light .batch-control,
html.theme-light .batch-queue-panel,
html.theme-light .chain-panel,
html.theme-light .form-panel,
html.theme-light .result-panel,
html.theme-light .aplus-control,
html.theme-light .aplus-result-panel,
html.theme-light .carousel-control,
html.theme-light .carousel-result-panel,
html.theme-light .gpt-lab-panel,
html.theme-light .gpt-lab-form,
html.theme-light .gpt-lab-output,
html.theme-light .multi-reference-control,
html.theme-light .multi-reference-output {
  border: 1px solid rgba(255, 255, 255, .78);
  border-radius: var(--wl-radius);
  background: var(--wl-panel);
  box-shadow: var(--wl-shadow);
  backdrop-filter: blur(18px);
}

/* ── 顶栏：gpt-image-2-lab 和自动化页有自己的一套 ───────────────────── */
html.theme-light .gpt-lab-topbar,
html.theme-light .auto-nav {
  border: 1px solid rgba(255, 255, 255, .78);
  border-radius: 24px;
  background: rgba(255, 255, 255, .74);
  box-shadow: var(--wl-shadow);
  backdrop-filter: blur(18px);
  color: var(--wl-ink);
}

/* ── 日志区 / 代码块：原来是近黑底 ─────────────────────────────────── */
html.theme-light .chain-log,
html.theme-light pre {
  border: 1px solid var(--wl-line);
  border-radius: 12px;
  background: #f5f7fc;
  color: var(--wl-ink-2);
}

/* 日志里的分级颜色：深色主题用的是亮色系，浅底上要压深才看得清 */
html.theme-light .chain-log .log-error,
html.theme-light .chain-log [class*="error"] {
  color: #b42318;
}
html.theme-light .chain-log .log-warn,
html.theme-light .chain-log [class*="warn"] {
  color: #9a5b06;
}
html.theme-light .chain-log .log-info,
html.theme-light .chain-log [class*="info"] {
  color: var(--wl-brand-ink);
}

/* ── 多参考图那页的统计小卡 / 缩略图 ───────────────────────────────── */
html.theme-light .multi-reference-stats article,
html.theme-light .multi-reference-group,
html.theme-light .multi-reference-thumb,
html.theme-light .multi-reference-empty,
html.theme-light .multi-reference-group-head input {
  border: 1px solid var(--wl-line);
  border-radius: 14px;
  background: rgba(255, 255, 255, .66);
}

html.theme-light .multi-reference-thumb img,
html.theme-light .gpt-lab-reference-card img,
html.theme-light .gpt-lab-result-card img {
  border-radius: 12px;
  background: #f1f4fa;
}

html.theme-light .gpt-lab-reference-card,
html.theme-light .gpt-lab-result-card,
html.theme-light .gpt-lab-result-card a,
html.theme-light .gpt-lab-reference-empty,
html.theme-light .gpt-lab-empty {
  border: 1px solid var(--wl-line);
  border-radius: 14px;
  background: rgba(255, 255, 255, .66);
}

html.theme-light .gpt-lab-field input,
html.theme-light .gpt-lab-field select,
html.theme-light .gpt-lab-field textarea,
html.theme-light .gpt-lab-task-tools input {
  border: 1px solid var(--wl-line);
  border-radius: 12px;
  background: var(--wl-field);
  color: var(--wl-ink);
}

html.theme-light .gpt-lab-status.error,
html.theme-light .status.error {
  border-color: rgba(217, 45, 32, .3);
  background: rgba(217, 45, 32, .08);
  color: #b42318;
}

/* ── 工作流页的场景容器（它是 carousel-scene + workflow-scene 两个类叠的）── */
html.theme-light .carousel-scene.workflow-scene {
  border: 1px solid var(--wl-line);
  background: rgba(255, 255, 255, .6);
}

/* ── 首页 / 登录页的深色底 ─────────────────────────────────────────── */
html.theme-light .product-home,
html.theme-light .hero-preview {
  background:
    radial-gradient(circle at 15% 8%, rgba(128, 103, 255, .12), transparent 34%),
    linear-gradient(135deg, #f7f9ff, #fff8f5);
}

html.theme-light .feature-card,
html.theme-light .preview-panel,
html.theme-light .preview-topbar,
html.theme-light .preview-gallery figure {
  border: 1px solid rgba(255, 255, 255, .78);
  border-radius: var(--wl-radius);
  background: var(--wl-panel);
  box-shadow: var(--wl-shadow-sm);
  backdrop-filter: blur(18px);
}

html.theme-light .feature-card:hover {
  background: rgba(255, 255, 255, .95);
}

html.theme-light .feature-card.active-tool {
  border-color: rgba(128, 103, 255, .35);
  background: rgba(128, 103, 255, .1);
}

html.theme-light .feature-index {
  border-color: rgba(128, 103, 255, .28);
  color: #6d4fd8;
}

html.theme-light .nav-actions .nav-primary {
  border-color: rgba(128, 103, 255, .28);
  background: rgba(128, 103, 255, .12);
  color: #6d4fd8;
}

/* ── 右上角的主题切换按钮（theme-switch.js 注入）───────────────────── */
/* 上面 theme-switch.js 里已经带了浅色配色，这里只是把位置对齐到页面的
   实际右侧留白，免得在窄屏上压住别的按钮。 */
html.theme-light #themeSwitch {
  flex: 0 0 auto;
}


/* ══════════════════════════════════════════════════════════════════════
 * 文字色统一接管（31 条）
 *
 * 为什么需要这一块：styles.css 里有几十条规则把文字设成了【浅色】
 *   label{color:#d4e5ed}  p{color:#edf7fb}  summary{color:#bdd2dc} ...
 * 这些颜色是为深底设计的。深色主题下没问题，浅色主题下就成了
 * 「浅字压浅底」—— 实测对比度只有 1.0~1.3，基本等于看不见。
 *
 * 这些不是 var() 引用，改变量解决不了，只能逐条接管。
 * 清单是脚本从 styles.css 里扫出来的（凡是「文字亮度 > 195 且自己不带背景」的规则），
 * 不是手写的 —— 手写一定会漏。
 *
 * 选择器统一加 html.theme-light 前缀，class 数比原规则多，所以能稳定压过去。
 * ══════════════════════════════════════════════════════════════════════ */

/* 正文色（原亮度 241~255）*/
html.theme-light .api-hero-stats strong { color: var(--wl-ink); }   /* 原 #ffffff → var(--wl-ink) */
html.theme-light .aplus-product-card strong { color: var(--wl-ink); }   /* 原 #f8fbff → var(--wl-ink) */
html.theme-light .aplus-copy-block b { color: var(--wl-ink); }   /* 原 #f8fbff → var(--wl-ink) */
html.theme-light .gpt-lab-hero h1 { color: var(--wl-ink); }   /* 原 #f8fbff → var(--wl-ink) */
html.theme-light .multi-reference-stats strong { color: var(--wl-ink); }   /* 原 #f8fbff → var(--wl-ink) */
html.theme-light .gpt-lab-upload b { color: var(--wl-ink); }   /* 原 #f5fbff → var(--wl-ink) */
html.theme-light .gpt-lab-empty strong { color: var(--wl-ink); }   /* 原 #f5fbff → var(--wl-ink) */
html.theme-light .multi-reference-empty strong { color: var(--wl-ink); }   /* 原 #f5fbff → var(--wl-ink) */
html.theme-light .multi-reference-thumb strong { color: var(--wl-ink); }   /* 原 #f5fbff → var(--wl-ink) */
html.theme-light .progress-card strong { color: var(--wl-ink); }   /* 原 #effbff → var(--wl-ink) */
html.theme-light .scene-toggle { color: var(--wl-ink); }   /* 原 #ecf7fb → var(--wl-ink) */
html.theme-light .result-collapsed-summary strong { color: var(--wl-ink); }   /* 原 #ecf7fb → var(--wl-ink) */
html.theme-light .mini-check { color: var(--wl-ink); }   /* 原 #ecf7fb → var(--wl-ink) */
html.theme-light .section-title { color: var(--wl-ink); }   /* 原 #e4f5fb → var(--wl-ink) */

/* 次要色（原亮度 197~230）*/
html.theme-light .workflow-reference-gallery-head { color: var(--wl-muted); }   /* 原 #dce8f4 → var(--wl-muted) */
html.theme-light .main-nav-links a { color: var(--wl-muted); }   /* 原 #d9e8f1 → var(--wl-muted) */
html.theme-light .gpt-lab-field > span { color: var(--wl-muted); }   /* 原 #d9e8f1 → var(--wl-muted) */
html.theme-light .gpt-lab-reference-head strong { color: var(--wl-muted); }   /* 原 #d9e8f1 → var(--wl-muted) */
html.theme-light .gpt-lab-raw summary { color: var(--wl-muted); }   /* 原 #d9e8f1 → var(--wl-muted) */
html.theme-light label { color: var(--wl-muted); }   /* 原 #d4e5ed → var(--wl-muted) */
html.theme-light .aplus-result-grid summary { color: var(--wl-muted); }   /* 原 #d4e5ed → var(--wl-muted) */
html.theme-light .main-nav-links a, .nav-actions a { color: var(--wl-muted); }   /* 原 #cfe2eb → var(--wl-muted) */
html.theme-light .gpt-lab-topbar nav a { color: var(--wl-muted); }   /* 原 #cfe2eb → var(--wl-muted) */
html.theme-light .api-pager button:disabled { color: var(--wl-muted); }   /* 原 #cbd5e1 → var(--wl-muted) */
html.theme-light .raw-box summary { color: var(--wl-muted); }   /* 原 #bdd2dc → var(--wl-muted) */
html.theme-light .workflow-reference-image-name { color: var(--wl-muted); }   /* 原 #b9c8d7 → var(--wl-muted) */
html.theme-light .aplus-copy-block ul { color: var(--wl-muted); }   /* 原 #b9c8d4 → var(--wl-muted) */

/* 绿色（原亮度 200~200）*/
html.theme-light .gpt-lab-hero p { color: var(--green); }   /* 原 #86efac → var(--green) */
html.theme-light .multi-reference-group-head span { color: var(--green); }   /* 原 #86efac → var(--green) */

/* 红色（原亮度 220~220）*/
html.theme-light .gpt-lab-empty.error span { color: var(--danger); }   /* 原 #fecdd3 → var(--danger) */
html.theme-light .multi-reference-actions .danger { color: var(--danger); }   /* 原 #fecdd3 → var(--danger) */


/* ── 容器级文字色（脚本漏掉的那批）──────────────────────────────────────
 * 上面那份清单是脚本扫的，判据是「文字亮度 > 195 且自己不带背景」。
 * 这条判据会漏掉一类：**容器自己带渐变背景、但把浅色字往下传给子元素**。
 * 典型是 `.gpt-lab-page { color: #edf7fb }` —— 它的 p / small / summary
 * 全都继承到这个近白色，在浅底上对比度只有 1.03（实测）。
 *
 * 这类只要接管容器本身，后代就都对了。
 */
html.theme-light .gpt-lab-page,
html.theme-light .batch-page,
html.theme-light .platform-home-page,
html.theme-light .product-home,
html.theme-light body {
  color: var(--wl-ink);
}

/* 这几个是通用标签/类，脚本按「带背景就跳过」漏掉了，但实际都得改 */
html.theme-light pre { color: var(--wl-ink-2); }
html.theme-light summary { color: var(--wl-ink-2); }
html.theme-light .status { color: var(--wl-ink-2); }
html.theme-light .secondary { color: var(--wl-ink-2); }
html.theme-light em { color: var(--wl-muted); }
html.theme-light .raw-box summary,
html.theme-light .gpt-lab-raw summary,
html.theme-light .aplus-result-grid summary { color: var(--wl-ink-2); }

/* 导航链接：深色主题是浅灰蓝，浅底上得压深 */
html.theme-light .main-nav-links a,
html.theme-light .nav-actions a,
html.theme-light .gpt-lab-topbar nav a,
html.theme-light .auto-nav a {
  color: var(--wl-ink-2);
}

html.theme-light .main-nav-links a.active,
html.theme-light .gpt-lab-topbar nav a.active,
html.theme-light .auto-nav a.active {
  color: #fff;              /* 选中态是品牌渐变底，白字是对的 */
}


/* ── 变量被容器重新声明，得在同一个元素上盖回来 ──────────────────────────
 * `styles.css` 里 `.batch-page { --muted: #98a9b8 }` 把 --muted 又声明了一遍。
 * 我是在 html.theme-light 上改的变量，传到 body 时被这条盖掉 ——
 * 所以凡是 `.batch-page` 里用 var(--muted) 的文字，全是深色主题那个 #98a9b8。
 * （同类问题第一轮已经踩过一次：--cyan 也是这个毛病。）
 * 教训：换肤时不能只改一处变量，凡是「下游又声明了一遍」的都要跟着盖。
 */
html.theme-light .batch-page {
  --muted: var(--wl-muted);
  --text: var(--wl-ink);
}

/* ── 硬编码的说明文字色 #91a3b2（对比度实测只有 2.47）────────────────── */
html.theme-light .gpt-lab-section-head small,
html.theme-light .gpt-lab-upload small,
html.theme-light .gpt-lab-reference-card span,
html.theme-light .multi-reference-stats span,
html.theme-light .multi-reference-thumb span,
html.theme-light .gpt-lab-reference-empty,
html.theme-light .gpt-lab-empty,
html.theme-light .multi-reference-empty,
html.theme-light .batch-page .workflow-run-item p,
html.theme-light .batch-page .muted-text,
html.theme-light .empty em {
  color: var(--wl-muted);
}

/* 禁用态：用整体透明度表示，不要单独改文字色。
 * ⚠️ 这里踩过一次：一开始写成 `button:disabled { color: #9aa5b5 }`，
 *    结果连主按钮（品牌渐变底 + 白字）也被染成灰的，反而更难看。
 *    半透明是标准做法，对渐变底、描边底都成立。 */
html.theme-light button:disabled {
  opacity: .5;
}

/* 缩略图上的操作按钮：原来 rgba(145,163,178,.42) 在浅底上几乎看不见。
   这条不能靠透明度 —— 它叠在图片上，半透明会更看不清。 */
html.theme-light .multi-reference-thumb-actions button:disabled {
  color: #8792a3;
}

/* 橙色状态标签：原 #ff8b22 在浅底上偏亮，压深一点 */
html.theme-light .monitor-card {
  color: #c2410c;
}


/* ── Logo 方块 ──────────────────────────────────────────────────────────
 * styles.css 里两处是把 logo 底设成硬编码的近黑色：
 *   .platform-home-brand span { background: #111827 }   ← 首页那个黑方块
 *   .brand-mark { background: linear-gradient(135deg, var(--cyan), var(--green)) }
 * 第二处虽然用了变量，但那两个变量在浅色主题里被我压深了（为了当文字色能看清），
 * 拿去做 logo 底色就发闷。统一换成品牌紫粉渐变，跟整体一套。
 * （第一处是实测截图发现的：首页右上角一个黑方块特别扎眼。）
 */
html.theme-light .platform-home-brand span,
html.theme-light .brand-mark,
html.theme-light .api-brand-mark {
  color: #fff;
  background: linear-gradient(135deg, var(--wl-brand), var(--wl-brand-2));
  box-shadow: 0 8px 20px rgba(128, 103, 255, .28);
}