/* ============================================================================
   console-theme.css — videos 控制台三页（index/create/help）共享改版层：
   双主题 token + 通用组件。2026-07-19/20 质感改版（R1-R5）定稿合入。
   设计决策（改前必读，改动需保住这些不变量）：
   - 品牌 lockup：header 左上企业 logo（brand-logo(-dark).svg，双 img 常驻 DOM
     随 html.vg-dark 显隐）；主强调色 = logo 橙 #ea580c（暗色亮化 #fb923c 保
     对比度），只做强调（选中态/开关/下划线/聚焦环/橙点/key 空态），大面积底
     色保持中性。
   - 填充 CTA（Generate / 导出 CSV）= 墨色单色家族 --vg-submit-*，不用橙：
     浅色 logo 墨蓝黑 #16213f 底白字（15.9:1）；暗色反白 near-white 底墨蓝字
     （14.1:1）——纯黑在 #17181d 面板上表面对比只剩 ~1.2:1（按钮体量消失），
     反白是暗色主题单色主 CTA 的标准处理；字色恒 logo 墨蓝保品牌联系。
     填充钮全站只有这一个色族（黑=动作、橙=状态/品牌），不留层级歧义。
   仅被 videos 三页引用（admin 不引）；不改 _shared.css 既有规则（叠加在其后）。
   主题机制与站点一致（调查结论）：
     - 营销站（tryaiapi-site.js）：localStorage `ifw_public_theme` + 镜像写
       宿主控制台 cookie `vite-ui-theme`（dark|light|system）+ prefers 兜底
     - 宿主控制台（本 videos 页的 iframe 宿主）：读 cookie `vite-ui-theme`
   本层通过在 html.vg-dark 上重定义 _shared.css 的 :root 变量（--bg/--panel/
   --border/--muted/--text/--primary），让全局 header / nav / toast 自动跟随暗色，
   不触碰 _shared.css 本体。主题解析/切换逻辑在 console-theme.js。
   ⚠️ 改本文件内容必须同步 bump 三页 <link> 的 ?v= 版本号（2026-07-04 缓存事故
   纪律：CF zone 对 js/css 有 Browser TTL 覆盖，?v= 是唯一可靠即时熔断）。
   ========================================================================== */

:root {
  /* 统一容器宽度（owner R2 指示：三 tab 与详情页对齐）*/
  --vg-page-max: 1360px;
  /* 2026-07-24 owner 反馈修复：展开「+ 添加参考」等使页面变高→纵向滚动条出现→
     视口宽度突减 ~15px→整页（含导航）横移。预留滚动条槽位根治，三页统一。 */
  scrollbar-gutter: stable;
  /* 浅色画布微调（_shared.css --bg=#fafafa 的高质感替代；冷近白，§50 红线不换暖色相）*/
  --bg: #f5f5f3;

  /* ---- R4 品牌橙色系（owner 指示：以 logo 主色 #ea580c 为核心的强调色，
     大面积底色保持中性、橙只做强调）：
       - 非文字图形（选中边框/橙点/开关/下划线/聚焦环）用纯品牌 #ea580c
         —— UI 组件 3:1 线（vs 白 3.56:1 ✓），保 logo 原色纯度。
     R5 起橙不再承 CTA 字面（提交钮改墨色系，见头注）；R4 的 #c9440a 双梯度
     CTA 档随之退役。
     --vg-switch-on 两主题钉死 #ea580c：白色旋钮 vs 亮化橙 #fb923c 只有 2.26:1，
     vs #ea580c 3.56:1 ✓（开关状态主要靠位置+色彩双通道，此为底线保障）。*/
  /* R6 全局降饱和（2026-07-23 owner："选中橙太浓、开关太浓、整体不协调"——
     色彩只分两层：①选中/展开态=低饱和橙（半透明边+浅 tint，全控件统一走
     chip-active 两 token）②品牌纯橙 #ea580c 只留 logo/聚焦环等小面积点缀。
     --vg-accent 本体调柔一档（焦点环/图标跟随），选中态另走 alpha 边框。 */
  --vg-accent: #e26a2b;
  --vg-accent-strong: #c2410c;
  --vg-accent-soft: rgba(234, 88, 12, .07);
  /* 开关选中态：降饱和暖橙（owner：#ea580c 太浓）；白旋钮对比 ≈3.2:1，
     配合位置双通道仍达底线（原 3.56:1 注释的保守裕量让渡给观感） */
  --vg-switch-on: #d9622b;
  /* R5 CTA 墨色家族（浅色主题）：logo 墨蓝黑 #16213f 底白字（实测对比度见
     task log R5）；hover 提亮一档保留 affordance */
  --vg-submit-hover-bg: #22315c;

  --vg-radius: 18px;
  --vg-editor-bg: #ffffff;
  --vg-editor-border: #e8e8e4;
  --vg-editor-shadow: 0 1px 2px rgba(17, 24, 39, .04), 0 18px 44px -20px rgba(17, 24, 39, .16);
  --vg-card-shadow: 0 1px 2px rgba(17, 24, 39, .03), 0 10px 28px -18px rgba(17, 24, 39, .10);
  --vg-chip-bg: #ffffff;
  /* 中性描边加深一档（owner：虚线/边框太淡看不出可点）——全页输入框/胶囊/虚线统一跟随 */
  --vg-chip-border: #d6d6d0;
  --vg-chip-active-bg: rgba(234, 88, 12, .06);
  --vg-chip-active-border: rgba(234, 88, 12, .45);
  --vg-submit-bg: #16213f; /* R5：CTA 黑（logo 墨蓝黑），白字高对比 */
  --vg-submit-fg: #ffffff;
  /* R5 API Key 空态提醒环（no-key 点 Generate 的脉冲）+ 徽章色。
     --vg-key-need 不用 --vg-accent-strong(#c2410c)：空态行底是微橙 tint，
     #c2410c 实测 4.42:1 差半步不过 4.5 线，加深到 #9a3412 → 6.2:1 ✓ */
  --vg-key-pulse: rgba(234, 88, 12, .28);
  --vg-key-ok: #047857;
  --vg-key-need: #9a3412;
  /* A6（2026-07-20 Codex 审查）：key 无效态（401 后）——实测 #b91c1c vs 白 6.47:1 / vs 微红 tint 5.99:1 */
  --vg-key-bad: #b91c1c;
  --vg-key-bad-bg: rgba(220, 38, 38, .05);
  --vg-audio-bg: rgba(234, 88, 12, .05);
  --vg-audio-border: rgba(234, 88, 12, .28);
  --vg-hover-bg: #f3f4f2;
  --vg-th-bg: #f9faf9;
  --vg-badge-ok-bg: #ecfdf5;
  --vg-badge-err-bg: #fef2f2;
  --vg-badge-run-bg: #ecfeff;
  /* A8（2026-07-20 Codex 审查）：徽章文字专用 fg token——原 _shared.css 的
     --running/--success/--error 在两主题徽章底上均不足 4.5:1（暗 3.27–3.98、
     浅 3.54–4.41）；不动全局变量（--error 还承 toast.error 底色，提亮会砸 toast
     白字对比），只给徽章开专token。实测：浅 5.15/5.21/5.91，暗 8.11/7.67/5.71 */
  --vg-badge-run-fg: #0e7490;
  --vg-badge-ok-fg: #047857;
  --vg-badge-err-fg: #b91c1c;
  --vg-info-bg: #eff6ff;
  --vg-info-border: #bfdbfe;
  --vg-info-text: #1e3a8a;
  --vg-code-bg: #f3f4f6;
}

html.vg-dark {
  /* 重定义 _shared.css 全局变量 → header/nav/toast/meta 自动跟随 */
  --bg: #0f1013;
  --panel: #17181d;
  --border: #26272d;
  --muted: #9aa1ac;
  --text: #f0f1f4;
  --primary: #24262c; /* toast 底色：深灰白字（配下方 border 提亮边界）*/

  /* R4 暗色亮化橙（owner：暗色下注意橙的对比度可读性）：#fb923c 对暗底 chip
     边框对比 ~5:1（R5 起橙只承强调层，CTA 见下方墨色反白）*/
  /* R6 暗色同步降饱和（与浅色同一两层原则） */
  --vg-accent: #f09a5c;
  --vg-accent-strong: #fdba74;
  --vg-accent-soft: rgba(251, 146, 60, .11);
  /* R5 CTA 暗色反白（"黑钮"的暗色质感处理，取舍见文件头注）：near-white 底
     （= 暗色 --text，画面内已有的最亮灰阶，不引新色）+ logo 墨蓝字；
     hover 提到纯白 */
  --vg-submit-hover-bg: #ffffff;

  --vg-editor-bg: #191b20;
  --vg-editor-border: #2a2c33;
  --vg-editor-shadow: 0 24px 48px -24px rgba(0, 0, 0, .6);
  --vg-card-shadow: 0 14px 32px -20px rgba(0, 0, 0, .55);
  --vg-chip-bg: #1c1e24;
  /* 中性描边加深一档（暗色同步） */
  --vg-chip-border: #383b45;
  --vg-chip-active-bg: rgba(251, 146, 60, .10);
  --vg-chip-active-border: rgba(251, 146, 60, .50);
  --vg-submit-bg: #f0f1f4; /* R5：暗色"黑钮"反白处理（见上注）*/
  --vg-submit-fg: #16213f;
  --vg-key-pulse: rgba(251, 146, 60, .30);
  --vg-key-ok: #34d399;
  --vg-key-need: #fdba74;
  /* A6 暗色：#f87171 vs chip #1c1e24 = 6.02:1 / vs tint 5.39:1 */
  --vg-key-bad: #f87171;
  --vg-key-bad-bg: rgba(248, 113, 113, .08);
  --vg-audio-bg: rgba(251, 146, 60, .10);
  --vg-audio-border: rgba(251, 146, 60, .38);
  --vg-hover-bg: #1d1f26;
  --vg-th-bg: #1a1c22;
  --vg-badge-ok-bg: rgba(5, 150, 105, .16);
  --vg-badge-err-bg: rgba(220, 38, 38, .16);
  --vg-badge-run-bg: rgba(8, 145, 178, .16);
  /* A8 暗色徽章文字（对 alpha 底与 panel 混色后的实测值见 :root 注）*/
  --vg-badge-run-fg: #22d3ee;
  --vg-badge-ok-fg: #34d399;
  --vg-badge-err-fg: #f87171;
  --vg-info-bg: rgba(59, 130, 246, .10);
  --vg-info-border: rgba(59, 130, 246, .30);
  --vg-info-text: #b6cdf5;
  --vg-code-bg: #23252c;
}
html.vg-dark body { color: var(--text); }
html.vg-dark .toast { border: 1px solid #3a3d46; }

/* 统一三页容器宽度 */
body.vg-redesign main { max-width: var(--vg-page-max); padding: 28px 24px 48px; }
@media (max-width: 720px) {
  body.vg-redesign main { padding: 16px 14px 40px; }
}

/* 页面小标题（状态点 + 文本）*/
.vg-eyebrow {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 600; color: var(--text);
  margin: 4px 0 16px;
}
.vg-eyebrow::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: var(--vg-accent); flex: none; /* R4：品牌橙点（原 success 绿）*/
}

/* ---- R4 header 品牌 lockup：logo 挂进 renderHeader() 的 h1（mountBrandLogo）----
   双 <img> 常驻 DOM、显隐随 html.vg-dark 切；22px 高 = tight-crop 后 ink 满高，
   对 18px/600 CJK 站名（ink ≈17px）略高一档，标准 mark+wordmark 比例 */
body.vg-redesign header h1 { display: flex; align-items: center; gap: 10px; min-width: 0; }
.vg-brand-logo { display: inline-flex; align-items: center; flex: none; }
.vg-brand-logo img { height: 22px; width: auto; display: block; }
html.vg-dark .vg-logo-light { display: none; }
html:not(.vg-dark) .vg-logo-dark { display: none; }

/* R4：导航当前 tab 下划线换品牌橙（覆盖 _shared.css 的 var(--text) 下划线；
   文字色保持中性——橙只做强调不做正文）*/
body.vg-redesign nav a.active { border-bottom-color: var(--vg-accent); }

/* R4：聚焦环统一品牌橙（键盘可达性）*/
body.vg-redesign button:focus-visible,
body.vg-redesign a:focus-visible {
  outline: 2px solid var(--vg-accent); outline-offset: 2px;
}

/* 通用卡片 */
.vg-card {
  background: var(--vg-chip-bg);
  border: 1px solid var(--vg-chip-border);
  border-radius: 14px;
  box-shadow: var(--vg-card-shadow);
  min-width: 0;
}
.vg-section-head {
  font-size: 12px; font-weight: 650; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 10px;
}

/* header 右槽主题切换按钮（页面 JS 注入到 renderHeader 的 .header-side）
   §18 icon ink 纪律：svg 显式 fill:none + stroke:currentColor，绝不落 UA 默认 */
.vg-theme-toggle {
  width: 34px; height: 34px; padding: 0; margin-left: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); border-radius: 50%;
  background: var(--panel); color: var(--muted); cursor: pointer;
  transition: color .12s, border-color .12s;
}
.vg-theme-toggle:hover { color: var(--text); border-color: var(--muted); }
.vg-theme-toggle svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.vg-theme-toggle .vg-ico-sun { display: none; }
.vg-theme-toggle .vg-ico-moon { display: block; }
html.vg-dark .vg-theme-toggle .vg-ico-sun { display: block; }
html.vg-dark .vg-theme-toggle .vg-ico-moon { display: none; }

/* 提示 hint（page-hint：index 顶部说明条的主题自适应版）*/
.vg-hint {
  background: var(--vg-info-bg); color: var(--vg-info-text);
  border: 1px solid var(--vg-info-border); border-radius: 12px;
  padding: 10px 14px; margin-bottom: 16px; font-size: 13px; line-height: 1.6;
}
.vg-hint a { color: inherit; text-decoration: underline; }