/* ================================================================
   NOTHING · 模块页皮肤桥接  skins-bridge.css        v1 · 2026-09-27
   ------------------------------------------------------------------
   背景：主站 9 个 iframe 模块页里，出片台(studio)/提示词工坊(promptkit)/
        剪辑台(cut) 已各自接入皮肤；出片台下面的 5 个模块（AI画廊 /
        漫剧制片厂 / 电商AI军师 / 内容电商工具 / AI早知道）没有接入 ——
        换皮肤后整页保持软白，与主站观感割裂（用户报障 2026-09-27）。
   用法：模块页 <head> 引三行（skins.css 在前，本文件其次，skin.js 收尾）：
        <link rel="stylesheet" href="/kjdex/skins.css?v=4">
        <link rel="stylesheet" href="/kjdex/skins-bridge.css?v=1">
        <script src="/kjdex/skin.js?v=2"></script>
   组成：
     ① 变量桥接 —— 各页私有变量名 → 主站标准令牌（skins.css 已按皮肤覆盖；
        classic 不覆盖任何令牌 → 桥接值=页面原生值，零改动）
     ② 页面特有规则 —— 写死 #fff 的大块容器 / 「炭黑底白字」反色按钮
   选择器全部带 html[data-skin]:not([data-skin="classic"]) 前缀：
     · classic 皮肤下整个文件不生效（原生观感零风险）
     · 类名跨页面天然隔离（iframe 独立文档，同名类只在各自页内匹配）
   ================================================================ */

/* ---------- ① 变量桥接 ----------
   gallery/ai-news 用 --ink 系；manju 用 --txt 系；ce/ec 共用同一套设计语言。
   注意：各页自己的 --accent（炭黑）故意不桥接 —— 让 skins.css 的皮肤
   强调色直接生效（权重 (0,1,1) > :root (0,1,0)，稳赢）。 */
html[data-skin]:not([data-skin="classic"]){
  /* gallery.html · ai-news.html */
  --ink:var(--text); --ink2:var(--text-secondary); --ink3:var(--text-muted);
  --sub:var(--text-muted);
  /* manju.html */
  --txt:var(--text); --txt2:var(--text-secondary);
  --card:var(--bg-card); --card2:var(--bg-soft);
  --line:var(--border); --line2:var(--border); --line3:var(--border);
  --soft:var(--bg-hover);
  /* ce.html · ec.html */
  --dim:var(--text-muted);
  --bg2:var(--bg-soft); --bg3:var(--bg-active); --bg4:var(--bg-active);
  --panel:var(--bg-hover); --panel2:var(--bg-hover); --panel3:var(--bg-active);
  --glow:none;
}

/* ---------- ② AI 画廊 gallery.html ---------- */
html[data-skin]:not([data-skin="classic"]) .card,
html[data-skin]:not([data-skin="classic"]) .clcard{
  background:var(--bg-card); border-color:var(--border);
}
html[data-skin]:not([data-skin="classic"]) .clslot{
  background:var(--bg-card); border-color:var(--border);
}
html[data-skin]:not([data-skin="classic"]) .dlg input[type=text]{
  background:var(--bg-input); color:var(--text); border-color:var(--border);
}
html[data-skin]:not([data-skin="classic"]) textarea{
  background:var(--bg-input); color:var(--text); border-color:var(--border);
}
/* 「炭黑底白字」反色按钮 → 皮肤强调色底 */
html[data-skin]:not([data-skin="classic"]) .chip.on,
html[data-skin]:not([data-skin="classic"]) .go{
  background:var(--accent); color:var(--sk-on-accent,#fff); border-color:var(--accent);
}

/* ---------- ③ 漫剧制片厂 manju.html ---------- */
html[data-skin]:not([data-skin="classic"]) .top{
  background:var(--bg-sidebar); border-color:var(--border);
  -webkit-backdrop-filter:blur(5px) saturate(1.12); backdrop-filter:blur(5px) saturate(1.12);
}
html[data-skin]:not([data-skin="classic"]) .rail,
html[data-skin]:not([data-skin="classic"]) .modebar,
html[data-skin]:not([data-skin="classic"]) .composer,
html[data-skin]:not([data-skin="classic"]) .quick{
  background:var(--bg-card);
}
html[data-skin]:not([data-skin="classic"]) .msg.ai{
  background:var(--ai-bubble,var(--bg-card)); border-color:var(--border);
}
/* 素材库 tab / 使用按钮：accent 底上的白字 → 深色墨（metal 青底白字对比不足） */
html[data-skin]:not([data-skin="classic"]) .assetlib .al-tab.on,
html[data-skin]:not([data-skin="classic"]) .assetlib .al-use,
html[data-skin]:not([data-skin="classic"]) .assetlib .al-use-sc{
  color:var(--sk-on-accent,#fff);
}

/* ---------- ④ 内容电商工具 ce.html · 电商 AI 军师 ec.html ---------- */
/* ce 的输入框有带 type 和不带 type 两种（#f1url 就没写 type），都要接住 */
html[data-skin]:not([data-skin="classic"]) input[type=text],
html[data-skin]:not([data-skin="classic"]) input[type=url],
html[data-skin]:not([data-skin="classic"]) input:not([type]),
html[data-skin]:not([data-skin="classic"]) textarea,
html[data-skin]:not([data-skin="classic"]) select{
  background:var(--bg-input); color:var(--text); border-color:var(--border);
}
html[data-skin]:not([data-skin="classic"]) ::placeholder{ color:var(--text-muted); opacity:1; }
/* 「炭黑底纸色字」反色主元素 → accent 底 深色墨字 */
html[data-skin]:not([data-skin="classic"]) .tab.on,
html[data-skin]:not([data-skin="classic"]) .btn.pri,
html[data-skin]:not([data-skin="classic"]) .step-no,
html[data-skin]:not([data-skin="classic"]) .hd .logo{
  background:var(--accent); color:var(--sk-on-accent,#fff);
}
/* 步骤条选中态（.fstep.on：炭黑底 + 米白字）→ accent 底 深色墨字 */
html[data-skin]:not([data-skin="classic"]) .fstep.on{
  background:var(--accent);
}
html[data-skin]:not([data-skin="classic"]) .fstep.on .fs-no,
html[data-skin]:not([data-skin="classic"]) .fstep.on .fs-cnt{
  color:var(--sk-on-accent,#fff); opacity:.75;
}
html[data-skin]:not([data-skin="classic"]) .fstep.on .fs-name{
  color:var(--sk-on-accent,#fff);
}

/* ---------- ⑤ AI早知道 ai-news.html ---------- */
html[data-skin]:not([data-skin="classic"]) .card{
  background:var(--bg-card); border-color:var(--border);
}
html[data-skin]:not([data-skin="classic"]) .newsimg{ background:var(--bg-soft); }
html[data-skin]:not([data-skin="classic"]) .cred{
  background:var(--bg-card); border-color:var(--border);
}
html[data-skin]:not([data-skin="classic"]) .kj{
  background:var(--bg-card); border-color:var(--border);
}
html[data-skin]:not([data-skin="classic"]) .addr{ background:var(--bg-card); }
html[data-skin]:not([data-skin="classic"]) .dchip.on,
html[data-skin]:not([data-skin="classic"]) .chip.on,
html[data-skin]:not([data-skin="classic"]) .addr .fav{
  background:var(--accent); color:var(--sk-on-accent,#fff); border-color:var(--accent);
}

/* ================================================================
   可读性补丁 v3（2026-09-29 凌晨 · 用户报障：metal/graffiti 下字看不清）
   ------------------------------------------------------------------
   ① 电商AI军师 ec.html —— 顶栏 .topbar 是写死的白色渐变，暗皮肤下
      整条仍是白底（与全站割裂）；logo 徽标、选中 nav-tab 同病。
   ② AI早知道 ai-news.html —— 正文 .sum(#2a2a2a)、K.J解读 .kj(#3a3120)、
      引文 .quote(#44526b) 是写死的深色字，压在暗卡上直接糊掉。
   对策：全部接皮肤令牌（--text 亮白系 / --bg-soft / --accent），
   classic 依旧零生效。原则：暗皮肤下正文一律亮白，辅文用
   --text-secondary / --text-muted 分层，强调用 --accent。
   ================================================================ */

/* ---------- ① 电商AI军师 ec.html ---------- */
html[data-skin]:not([data-skin="classic"]) .topbar{
  background:linear-gradient(180deg,rgba(14,15,18,.92),rgba(14,15,18,.70));
  border-bottom-color:var(--border);
}
html[data-skin]:not([data-skin="classic"]) .brand-logo{
  background:var(--bg-card); color:var(--text); border-color:var(--border);
  box-shadow:0 4px 16px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.08);
}
html[data-skin]:not([data-skin="classic"]) .brand .sub{ color:var(--text-muted); }
html[data-skin]:not([data-skin="classic"]) .nav-tab.on{
  color:var(--text); background:var(--bg-active);
}
html[data-skin]:not([data-skin="classic"]) .btn.primary{
  background:var(--accent); border-color:var(--accent);
  color:var(--sk-on-accent,#fff);
}
html[data-skin]:not([data-skin="classic"]) .cat-pill.on .cnt{
  color:var(--sk-on-accent,#fff); background:rgba(0,0,0,.30);
}
html[data-skin]:not([data-skin="classic"]) .toast.err{ color:var(--text); }

/* ---------- ② AI早知道 ai-news.html ---------- */
/* 正文 / 解读 / 引文：深色字 → 亮白分层 */
html[data-skin]:not([data-skin="classic"]) .sum{ color:var(--text); }
html[data-skin]:not([data-skin="classic"]) .kj{
  color:var(--text); border-left-color:var(--accent);
}
html[data-skin]:not([data-skin="classic"]) .kj .xh{ color:var(--accent); }
html[data-skin]:not([data-skin="classic"]) .quote{
  background:var(--bg-soft); border-left-color:var(--accent);
}
html[data-skin]:not([data-skin="classic"]) .quote .ql{ color:var(--text-muted); }
html[data-skin]:not([data-skin="classic"]) .quote .qt{ color:var(--text-secondary); }
/* 来源徽标 / 语言标签：暗底语义色 */
html[data-skin]:not([data-skin="classic"]) .src{
  color:var(--accent); border-color:var(--accent);
}
html[data-skin]:not([data-skin="classic"]) .src:hover{
  background:var(--accent); color:var(--sk-on-accent,#fff);
}
html[data-skin]:not([data-skin="classic"]) .ltag{
  background:var(--bg-soft); color:var(--text-secondary);
}
html[data-skin]:not([data-skin="classic"]) .ltag.en{ background:rgba(80,140,220,.22); color:#9CC3F0; }
html[data-skin]:not([data-skin="classic"]) .ltag.vi{ background:rgba(255,110,140,.18); color:#FF9DB4; }
html[data-skin]:not([data-skin="classic"]) .ltag.zh{ background:rgba(216,180,106,.16); color:#E2C58A; }
html[data-skin]:not([data-skin="classic"]) .dchip .n{ color:var(--accent); }
html[data-skin]:not([data-skin="classic"]) .arc-k{
  background:var(--bg-soft); color:var(--text-muted);
}
html[data-skin]:not([data-skin="classic"]) .flbl{ color:var(--text-muted); }
/* 来源凭证卡：浏览器窗体条改暗，字提亮 */
html[data-skin]:not([data-skin="classic"]) .cred-bar{
  background:var(--bg-soft); border-bottom-color:var(--border);
}
html[data-skin]:not([data-skin="classic"]) .cred-url,
html[data-skin]:not([data-skin="classic"]) .cred-foot{ color:var(--text-muted); }
html[data-skin]:not([data-skin="classic"]) .cred-foot b{ color:#A5D68A; }
html[data-skin]:not([data-skin="classic"]) .newsimg .ph{ color:var(--text-muted); }
/* ec 第二行导航条 .mainnav 也是写死的白色渐变（v3 漏网，截图复检发现） */
html[data-skin]:not([data-skin="classic"]) .mainnav{
  background:linear-gradient(180deg,rgba(14,15,18,.90),rgba(14,15,18,.72));
  border-bottom-color:var(--border);
}
html[data-skin]:not([data-skin="classic"]) .nav-tab:hover{
  background:var(--bg-hover); color:var(--text);
}

/* ================================================================
   v5（2026-09-29 · 用户报障：军师 /ec 背景不跟随）
   真身 = backend/ecom-tools.html（/kjdex/ec 反代到 8088），
   与静态 ec.html 同款类名但此前未接皮肤。除引用皮肤三件套外，
   该页使用自有变量名（--txt/--sub/--line/--panel/--bg2~4/--acc 等），
   此处将其整体映射到皮肤令牌 —— :has(.topbar) 限定军师页生效，
   其余页面零影响。
   ================================================================ */
html[data-skin]:not([data-skin="classic"]):has(.topbar){
  --txt:var(--text); --txt2:var(--text);
  --sub:var(--text-secondary); --dim:var(--text-muted);
  --bg2:var(--bg-soft); --bg3:var(--bg-card); --bg4:var(--bg-input);
  --panel:var(--bg-soft); --panel2:var(--bg-hover); --panel3:var(--bg-active);
  --line:var(--border); --line2:var(--border); --line3:var(--border);
  --acc:var(--accent); --acc2:var(--accent-hover); --acc3:var(--accent-soft);
  --gold:var(--text); --gold-l:var(--text); --gold-d:var(--text-muted); --bronze:var(--text-muted);
  --jade:var(--text); --clay:var(--text-muted);
  --ok:var(--accent); --warn:var(--text-secondary); --bad:#FF7B7B;
  --glow:none;
}