/* ==========================================================================
   魔兽世界：无限 · 全职业 BIS 配装（guides.html 专用）
   2026-09-22 新增 · 同日两批改版
     · 第一批（血染五条）：悬停属性 / 阵营切换 / 装备·天赋视图 / 三系天赋 / 每部位候选折叠
     · 第二批（血染三条）：删加点清单 / **候选下拉搬到总览格上**（不再有独立的逐槽位段）
       / 出处照写全

   ★ 为什么单开一个文件、而不是往 wow.css 里加：
     wow.css 是 theme_v5.py 的**产物**，主题脚本一跑就整份重写。
     独立成 css/bis.css 才能活过下一次主题回滚（gate.css / namegen.css 是同一个先例）。

   ★ 版面口径（沿用本站既有语汇，不发明新样式）：
     · 面板一律 .panel + .pn-tr/.pn-bl 四角雕花（雕花标签写在这份 HTML 里）
     · 职业切换沿用 wow.css 的 .gtabs/.gtab（金底表示选中）
     · 品质色用 **items.js 的 QC 数组**（0=粗糙 … 3=精良 4=史诗），
       ⛔ 不要用 wow.css 的 --q0..--q4 —— 那是另一套 0 起算的下标，差一位。
       数值由 bis.js 以 inline --qc 变量带进来，本文件只消费。
     · 阵营色用 --ally / --horde（全站统一）

   ★★ 一条容易踩的坑：`.bis-pane[hidden]` 必须显式写 display:none。
     一旦给 `.bis-pane` 设了 display，UA 的 `[hidden]{display:none}` 就被压掉了，
     两个视图会**同时显示**（而且看起来还挺像那么回事，不容易发现）。
   ★★ 天赋树的 44px/12px 与 js/bis.js 里的 TN/TG 是**同一组常量**，
     改一处必须同步另一处，否则 SVG 连线会整体偏移。
   ========================================================================== */

/* ---------- 0. 区块外框 ---------- */
.bis{margin-top:6px}

/* ---------- 0b. 职业页签上的头像 ---------- */
/* 2026-09-22 血染：「上面的这个职业 加上对应的职业图标」。
   ⚠️ 页签容器 `#bisTabs` 是 **`#bis` 的兄弟**（不是它的子节点），所以这里用 `.bis-tabs`
      收敛选择器 —— ⛔ 别写成全局 `.gtab img`：站上 PVE/PVP 那两组页签也带 `.gtab`。
   ★ padding 从 wow.css 的 26px 收到 21px：九个页签各加一颗 22px 头像后，
     总宽在 1440 容器上逼近上限，不回收就折成两行（九个职业分两行很难看）。
   ★ 选中态（金底）给头像一圈深边 + 一道亮描边 —— 亮底上放彩色小图，没有分隔会糊在一起。 */
.bis-tabs .gtab{padding:11px 21px;gap:9px}
.bis-tabs .gtab img.bis-ci{
  width:22px;height:22px;flex:none;display:block;
  border:1px solid var(--frame);background:#0b0b0d;
}
.bis-tabs .gtab.on img.bis-ci{
  border-color:rgba(30,31,32,.5);
  box-shadow:0 0 0 1px rgba(255,240,190,.4);
}
/* 窄档：九格一行放不下时，`flex-wrap` 的断法是 **8+1** —— 最后一行孤零零一个，
   比"折行"本身更难看。⇒ 1240 以下改成 3 列网格（3+3+3）整齐。
   ★ 上限为什么是 1240（不是"刚好折行的那个宽度"）：实测 1240 还排得下一行（余量 ~28px），
     1220 就已经掉成 [8,1]。临界带很窄，而**不同系统/缩放的字体度量会有出入**
     （1366 屏 @125% 逻辑宽 = 1093，1536 @125% = 1229）—— 取 1240 把这些都收进来。
   ⚠️ 下限压到 641：640 以下每格只剩 ~110px，「萨满祭司」+头像要 ~131px 放不下
      ⇒ 那个区间保持 flex-wrap 原样（手机端页签折行是站上既有形态，PVE/PVP 那组也折）。
   ⚠️ 进了网格，格宽由**列宽**决定（按钮会被拉到等宽），文字必须显式居中 ——
      否则九个职业名会全部贴左边，比折行还乱。 */
@media (max-width:1240px) and (min-width:641px){
  .bis-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
  .bis-tabs .gtab{justify-content:center}
}

/* 顶部口径说明面板（复用 .panel，只补内边距与行距） */
.bis-note{padding:16px 22px;margin:0 0 26px}
.bis-note p{margin:0;color:var(--parch-2);font-size:13.5px;line-height:1.95}
.bis-note b{color:var(--gold-hi)}
.bis-note .warn{color:#f0c674}
.bis-note code{
  font-family:var(--f-body);font-size:12.5px;padding:1px 6px;
  background:rgba(216,180,90,.10);border:1px solid rgba(216,180,90,.28);
  color:var(--gold-hi);
}

.bis-pane[hidden]{display:none!important}
.bis-empty{margin:0;padding:14px 16px;font-size:13px;color:var(--parch-3)}

/* ---------- 1. 职业头 + 工具条 ---------- */
.bis-head{margin:22px 0 20px}
.bis-h-top{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px}
.bis-h-name{
  font-family:var(--f-title);font-size:26px;letter-spacing:3px;color:var(--gold-hi);
  text-shadow:0 0 18px rgba(216,180,90,.3);
}
.bis-h-en{font-size:11.5px;letter-spacing:3.4px;color:var(--parch-3);text-transform:uppercase}
.bis-h-lv{margin-left:auto;font-size:12px;color:var(--parch-3)}
.bis-h-intro{margin:8px 0 0;font-size:13.5px;line-height:1.9;color:var(--parch-2);max-width:980px}

.bis-bar{
  display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:16px;
  padding:12px 14px;border:1px solid var(--frame);
  background:linear-gradient(180deg,rgba(19,19,21,.86),rgba(12,12,14,.9));
}
.bis-hint{margin-left:auto;font-size:11.5px;color:var(--parch-3)}

/* 分段按钮（阵营 / 视图 / 天赋系 共用一套外观） */
.bis-seg{display:inline-flex;border:1px solid var(--frame);background:rgba(255,255,255,.02)}
.bis-seg button{
  font-family:var(--f-body);font-size:13px;letter-spacing:1.6px;color:var(--parch-2);
  background:none;border:0;border-left:1px solid var(--frame);
  padding:7px 15px;cursor:pointer;transition:.14s;white-space:nowrap;
}
.bis-seg button:first-child{border-left:0}
.bis-seg button:hover{color:var(--gold-hi);background:rgba(216,180,90,.08)}
.bis-seg button.on{color:#2a1c08;font-weight:700;background:linear-gradient(180deg,#e8c874,#b8912f 55%,#8a6a1c)}
.bis-seg.bis-fac button.on.a{background:linear-gradient(180deg,#6ea3ec,#2f6bc0 55%,#1e4b8f);color:#f2f6ff}
.bis-seg.bis-fac button.on.h{background:linear-gradient(180deg,#e0665a,#b3352a 55%,#7d1d13);color:#fff1ef}
.bis-seg.bis-view button{letter-spacing:2.2px;padding:7px 20px}
/* 缩小版（装进属性块标题行右侧的那个）：**用结构收敛，不加新类名**。
   曾用 `.bis-seg.mini`，撞上 wow.css 的 `.mini{display:grid;padding:16px 18px}` ——
   我声明过的 display 我赢，但**没声明的 padding 照旧生效**，开关被撑肿一大圈。
   ⛔ 少一个类名就少一个撞车面；加新类名之前先跑 _tmp/_cls_audit.py。 */
.bis-st .bis-seg{padding:0;gap:0}
.bis-st .bis-seg button{padding:3px 12px;font-size:12px;letter-spacing:1.2px}

/* ---------- 1b. 天赋方案切换条（2026-09-22 加）----------
   参考站按「职业 × 天赋」分页：默认页 PvP 向、`/pve` 副本向，另有第 2/3 天赋页。
   一个职业 2~3 套，每套是**完整的另一份方案**（装备 / 属性 / 逐槽位 / 加点全不同）。
   ⛔ 只有一个变体时，渲染器整个不输出这块 —— 一个按钮的开关是纯噪音。
   ⚠️ 类名 `bis-vars` / `bis-vars-lb` / `bis-vars-i` / `bis-vars-t` / `bis-vars-s`
      加之前过了 _tmp/_cls_audit.py（站规：加新类名前先查撞不撞 wow.css）。 */
.bis-vars{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  margin-top:10px;padding:10px 14px;border:1px solid var(--frame);
  background:linear-gradient(180deg,rgba(19,19,21,.7),rgba(12,12,14,.8));
}
.bis-vars-lb{font-family:var(--f-title);font-size:12px;letter-spacing:2.4px;color:var(--parch-3)}
.bis-vars button{
  display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  font-family:var(--f-body);font-size:13px;letter-spacing:1.4px;color:var(--parch-2);
  background:rgba(255,255,255,.02);border:1px solid var(--frame);
  padding:5px 12px 5px 6px;transition:.14s;white-space:nowrap;
}
.bis-vars button:hover{color:var(--gold-hi);border-color:rgba(216,180,90,.5);background:rgba(216,180,90,.08)}
.bis-vars button.on{
  color:#2a1c08;font-weight:700;border-color:var(--gold);
  background:linear-gradient(180deg,#e8c874,#b8912f 55%,#8a6a1c);
}
/* 图标（天赋主系那张）—— 缺图时渲染器给的是空 <i>，占住位不塌版 */
.bis-vars-i{width:22px;height:22px;flex:none;border:1px solid rgba(0,0,0,.45);background:rgba(0,0,0,.3)}
img.bis-vars-i{object-fit:cover}
.bis-vars-t{font-size:13px}
/* 场合标注（PVP / 副本 / 升级）—— 用 currentColor 描边，跟着按钮选中态走 */
.bis-vars-s{
  font-size:10.5px;letter-spacing:1px;padding:1px 6px;border-radius:2px;
  border:1px solid currentColor;opacity:.95;
}
.bis-vars-s.pvp{color:#7fb2ff}
.bis-vars-s.pve{color:#7fd6a0}
.bis-vars-s.leveling{color:#e8c874}
.bis-vars button.on .bis-vars-s{color:#4a3610;opacity:.95}

/* ---------- 2. 小节标题 ---------- */
.bis-cap{
  display:flex;align-items:center;gap:12px;margin:30px 0 12px;
  font-family:var(--f-title);font-size:15px;letter-spacing:2.6px;color:var(--gold-hi);
}
.bis-cap::before{content:"";width:5px;height:5px;flex:none;transform:rotate(45deg);background:var(--gold)}
.bis-cap::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,rgba(216,180,90,.5),transparent)}
.bis-cap small{font-family:var(--f-body);font-size:11.5px;letter-spacing:1.4px;color:var(--parch-3)}

/* ---------- 3. 总览 ----------
   ★ 列数**写死**，不用 auto-fill。实测（_tmp/_ov_cols.py）：容器在 1600+ 封顶 1428px，
   而 auto-fill+minmax(196px) 在 1440 下给的是 **6 列** ⇒ 14 个防具格排成 6+6+2，
   末行孤零零 2 格，整块看着散 —— 血染说的「排版不好看」有一半是这个。
   7 列能把 14 整除成 7+7 两行齐平；窄下来依次 5 列(5+5+4)/3 列/2 列(2×7)。 */
.bis-ov{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
@media(min-width:560px){.bis-ov{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1000px){.bis-ov{grid-template-columns:repeat(5,1fr)}}
@media(min-width:1320px){.bis-ov{grid-template-columns:repeat(7,1fr)}}
/* 武器与附加：格数随职业变（战士/猎人/圣骑士 3 格，德鲁伊 4 格）。
   ⛔ 别用 grid auto-fit + minmax(0,1fr)：min 是 0 ⇒ 轨道会铺到"能塞多少塞多少"，
   3 个格只落在最前面 3 条上，实测格宽被压成 **26px**（整段看着像三条竖线）。
   用 flex 才对：flex:1 1 0 让 N 个格永远等分整行，N 由数据决定，CSS 不用知道。 */
.bis-ovw{
  display:flex;flex-wrap:wrap;gap:10px;
  margin-top:10px;padding-top:12px;border-top:1px dashed rgba(216,180,90,.22);
}
.bis-ovw-t{
  flex:1 0 100%;font-size:11.5px;letter-spacing:2.2px;color:var(--parch-3);
  font-family:var(--f-title);margin-bottom:-2px;
}
.bis-ovw .bis-ov-c{flex:1 1 0;min-width:150px}
.bis-ov-c{
  /* ★ 总览格现在是 <button>（点一下在下面展开该部位的候选，血染⑦），
     所以要把 button 的默认外观全部抹掉，否则会带上一套系统字体/居中/灰底。 */
  display:block;box-sizing:border-box;width:100%;text-align:left;
  font-family:inherit;color:inherit;
  min-width:0;                      /* 长名一律折行，别把格子撑破 */
  padding:10px 12px 11px;border:1px solid var(--frame);
  background:linear-gradient(180deg,rgba(19,19,21,.86),rgba(12,12,14,.9));
  transition:.14s;cursor:pointer;
}
.bis-ov-c:hover{border-color:rgba(216,180,90,.55);background:rgba(216,180,90,.06)}
/* 当前正在下面展开候选的那一格 */
.bis-ov-c.on{
  border-color:var(--gold);background:rgba(216,180,90,.12);
  box-shadow:inset 0 0 0 1px rgba(216,180,90,.2);
}
/* ⛔ 类名带 bis- 前缀不是洁癖：wow.css 里有一条全局 `.slot{min-height:78px;border-left:4px…}`，
   撞名时**它没被我声明的属性会照旧生效**（层叠不等于整条规则替换），槽位名会被撑成 78px。
   详见 js/bis.js 里 ovCellHTML 上方的注释与 _tmp/_cls_audit.py。 */
.bis-ov-c .bis-ov-s{
  display:flex;align-items:baseline;gap:8px;
  font-family:var(--f-title);font-size:11px;letter-spacing:2px;
  color:var(--gold);margin-bottom:7px;
}
/* 「N 件 ▾」—— 提示这格可点。放槽位名同一行的右侧，**不额外占高度**。 */
.bis-ov-c .cv{
  margin-left:auto;font-family:var(--f-body);font-size:10.5px;letter-spacing:.6px;
  color:var(--parch-3);font-weight:400;white-space:nowrap;
}
.bis-ov-c .cv i{font-style:normal;display:inline-block;margin-left:3px;transition:.18s}
.bis-ov-c.on .cv{color:var(--gold-hi)}
.bis-ov-c.on .cv i{transform:rotate(180deg)}
.bis-ov-c .it{display:flex;align-items:center;gap:9px;min-width:0}
.bis-ov-c .tx{min-width:0;display:flex;flex-direction:column;gap:3px}
.bis-ov-c .nm{
  font-size:13.5px;line-height:1.34;font-weight:400;
  overflow-wrap:anywhere;          /* 长名一律折行，⛔ 不用省略号（省略号是真丢字） */
}
.bis-ov-c .fac{
  align-self:flex-start;font-style:normal;font-size:10px;letter-spacing:1px;
  padding:1px 5px;border:1px solid currentColor;
}
.bis-ov-c .fac.a{color:#7fb0f0}
.bis-ov-c .fac.h{color:#e0857a}
/* ★ 附魔标注（BIS 槽位物品下方那行绿字，口径同社区榜：力量 +5 / 敏捷 +3 这类）。
   只在有附魔的物品上出现 —— 头/肩/戒指这类不能附魔的槽位自然就没有。 */
.bis-ov-c .ench{
  font-style:normal;font-size:11.5px;line-height:1.3;letter-spacing:.4px;
  color:#62c462;                       /* 魔兽绿字 —— 附魔/强化效果的经典读法 */
}
.bis-ov-c .ench::before{
  content:'';display:inline-block;width:5px;height:5px;margin-right:5px;
  transform:rotate(45deg);background:currentColor;vertical-align:1px;
}
.bis-ov-c.ph{display:flex;flex-direction:column;justify-content:center;border-style:dashed}
.bis-ov-c.ph .ph-nm{font-size:12.5px;color:var(--parch-3)}

/* ---------- 4. 属性合计（单栏，跟随阵营） ---------- */
.bis-st{padding:16px 20px 18px;border:1px solid var(--frame);margin-top:4px}
.bis-st.a{border-top:2px solid var(--ally)}
.bis-st.h{border-top:2px solid var(--horde)}
.bis-st h4{
  margin:0;display:flex;align-items:center;gap:9px;
  font-family:var(--f-title);font-size:16px;letter-spacing:2.6px;color:var(--gold-hi);
}
.bis-st h4 i{width:6px;height:6px;transform:rotate(45deg);background:var(--gold);flex:none}
/* 属性块自带阵营开关（血染⑥）：标题与开关同排，开关在右。
   ⚠️ h4 已在 .bis-st-head 里，所以 h4 自己不能再带下边距，否则行高会上下不齐。 */
.bis-st-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:0 0 11px}
.bis-st-head h4{flex:1 1 auto;min-width:190px}
.bis-st-who{margin:0 0 14px;font-size:12.5px;line-height:1.85;color:var(--parch-3);max-width:860px}
.bis-st-who b{color:var(--gold-hi)}
.bis-st-g{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px 26px}
.bis-st-c .gt{
  font-family:var(--f-title);font-size:12px;letter-spacing:2px;color:var(--gold);
  padding-bottom:5px;margin-bottom:5px;border-bottom:1px solid rgba(216,180,90,.22);
}
.bis-st-c table{width:100%;border-collapse:collapse}
.bis-st-c td{padding:4px 0;font-size:13px;vertical-align:baseline}
.bis-st-c td.n{color:var(--parch-3);width:44%}
.bis-st-c td.v{color:var(--parch);text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.bis-st-c td.d{color:#6f7681;font-size:11.5px;text-align:right;padding-left:10px}
.bis-st-c tr.up td.v{color:#7ddc6a}
.bis-st-note{margin:14px 0 0;font-size:11.5px;line-height:1.8;color:#6f7681}

/* ---------- 5. 总览格展开的候选面板 ----------
   ★ 血染⑦：「次选装备的下拉菜单能否直接做在上面这个推荐的装备上，这样省的大家往下翻」
   ⇒ 旧的「逐槽位候选与出处」整段（.bis-slots / .bis-slot / .bis-more / .bis-rest）
   **整段撤掉** —— 候选只保留一个入口：点总览格。
   ⚠️ 面板容器在 DOM 里是**总览网格的兄弟节点**（data-r="pick"），⛔ 不是它的子元素。
   插进网格流里的话，一个 grid-column:1/-1 的元素会按 auto-placement 落到"下一个能放下
   整行的位置"，同行其余格子被整片推到下一行 —— 点第 1 格时第 1 行只剩它自己，当场散架。 */
.bis-ov-tip{margin:0 0 10px;font-size:12.5px;line-height:1.8;color:var(--parch-3);max-width:920px}
.bis-ov-tip b{color:var(--gold-hi)}
.bis-pick{
  margin-top:12px;padding:13px 16px 15px;
  border:1px solid rgba(216,180,90,.42);
  background:linear-gradient(180deg,rgba(216,180,90,.06),rgba(216,180,90,.02));
}
.bis-pick-h{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin-bottom:10px;padding-bottom:9px;border-bottom:1px solid rgba(216,180,90,.24);
}
.bis-pick-h b{font-family:var(--f-title);font-size:15px;letter-spacing:2.4px;color:var(--gold-hi)}
.bis-pick-h .n{margin-left:auto;font-size:11.5px;color:var(--parch-3)}
.bis-pick-x{
  font-family:var(--f-body);font-size:11.5px;letter-spacing:1.2px;color:var(--parch-3);
  background:rgba(255,255,255,.03);border:1px solid var(--frame);
  padding:4px 10px;cursor:pointer;transition:.14s;
}
.bis-pick-x:hover{color:var(--gold-hi);border-color:rgba(216,180,90,.5)}
.bis-pick-x i{font-style:normal;margin-left:5px}
/* 候选卡排成多列 —— 面板是整栏宽（1400 上下），单列的话一行太长没法读。
   gap 管间距，所以里面 .bc 自己的 margin-top 要归零。 */
.bis-pick-g{display:grid;grid-template-columns:repeat(auto-fill,minmax(400px,1fr));gap:8px 14px;align-items:start}
.bis-pick-g .bc{margin-top:0}

/* 候选条
   ⚠️ 这里必须是**显式两行**：`.bc` 的 HTML 有 4 个子元素（序号 / 图标 / 主体 / 出处），
   只声明 3 列的话，第 4 个子元素会掉到下一行的第 1 列（20px 宽）——
   表现是出处那一整段被压成**竖排单字**，看着像排版炸了。 */
.bc{
  display:grid;grid-template-columns:20px 42px 1fr;gap:6px 10px;align-items:start;
  padding:9px 10px;border:1px solid var(--frame-dim);margin-top:6px;transition:.14s;
}
.bc:first-of-type{margin-top:0}
.bc:hover{border-color:rgba(216,180,90,.45);background:rgba(216,180,90,.05)}
.bc.best{border-color:rgba(216,180,90,.4);background:rgba(216,180,90,.045);position:relative}
.bc.best::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--gold);
}
.bc-r{
  grid-row:1/span 2;
  font-family:var(--f-title);font-size:13px;color:var(--gold);text-align:center;
  padding-top:12px;font-variant-numeric:tabular-nums;
}
.bc-ico{grid-row:1/span 2;align-self:center}
.bc-m{grid-column:3;grid-row:1;min-width:0}
.bc-n{display:flex;flex-wrap:wrap;align-items:baseline;gap:7px}
.bc-n .nm{font-size:13.5px;line-height:1.4;overflow-wrap:anywhere}
.bc-q{font-size:10.5px;letter-spacing:1px;color:var(--qc);border:1px solid var(--qc);padding:0 5px;opacity:.9}
.bc-rk{
  font-size:10.5px;letter-spacing:1.2px;padding:0 6px;color:#2a1c08;font-weight:700;
  background:linear-gradient(180deg,#e8c874,#b8912f);
}
.bc-rk.r2{color:var(--parch-3);background:none;border:1px solid var(--frame);font-weight:400}
.bc-fac{font-size:10.5px;letter-spacing:1px;padding:0 5px;border:1px solid currentColor}
.bc-fac.a{color:#7fb0f0}
.bc-fac.h{color:#e0857a}
.bc-st{display:flex;flex-wrap:wrap;gap:4px 12px;margin-top:5px}
.bc-st span{font-size:12px;color:var(--parch-2)}
.bc-st span.eq{color:#8fb6e8}
/* 展开候选面板里的附魔行（与总览格同一套绿色口径，「已附魔：力量 +5」） */
.bc-ench{
  margin-top:5px;font-size:12px;letter-spacing:.4px;color:#62c462;
}
.bc-ench::before{
  content:'';display:inline-block;width:5px;height:5px;margin-right:6px;
  transform:rotate(45deg);background:currentColor;vertical-align:1px;
}
.bc-s{grid-column:3;grid-row:2;margin-top:1px}
.bc-src{
  display:inline-block;font-size:11.5px;color:var(--parch-3);
  padding:2px 7px;background:rgba(255,255,255,.035);border-left:2px solid var(--frame-hi);
}
.bc-src.k-drop{color:#9ec48f;border-left-color:#5fa54c}
.bc-src.k-quest{color:#e8c07a;border-left-color:#c99a3f}
.bc-src.k-prof{color:#8fb6e8;border-left-color:var(--ally)}
.bc-src.k-vendor{color:#d7b58a;border-left-color:#a8853f}
.bc-note{margin:5px 0 0;font-size:11.5px;line-height:1.72;color:#6f7681}
.bc-none{padding:10px 4px;font-size:12.5px;color:var(--parch-3)}

/* ---------- 6. 天赋 ---------- */
.bis-tbar{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-bottom:14px}
.bis-seg.bis-spec button{letter-spacing:2.2px;padding:7px 16px}
.bis-seg.bis-spec button b{
  display:inline-block;margin-left:7px;font-size:11.5px;font-variant-numeric:tabular-nums;
  color:var(--gold);font-weight:400;
}
.bis-seg.bis-spec button.on b{color:#5a4410}
.bis-tinfo{margin-left:auto;font-size:12.5px;color:var(--parch-2)}
.bis-tinfo b{color:var(--gold-hi);letter-spacing:1px}
.bis-tinfo span{margin-left:10px;font-size:11px;color:var(--parch-3)}

.bis-trees{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.bis-tree-w{
  padding:14px 12px 16px;border:1px solid var(--frame);
  background:linear-gradient(180deg,rgba(19,19,21,.8),rgba(12,12,14,.9));transition:.18s;
}
.bis-tree-h{
  display:flex;align-items:center;gap:8px;margin-bottom:14px;
  padding-bottom:9px;border-bottom:1px solid rgba(216,180,90,.2);
}
.bis-tree-h b{font-family:var(--f-title);font-size:14.5px;letter-spacing:2.4px;color:var(--gold-hi)}
.bis-tree-h .p{margin-left:auto;font-size:12px;color:var(--gold);font-variant-numeric:tabular-nums}
.bis-tree-w.on{border-color:rgba(216,180,90,.42)}
.bis-tree{
  position:relative;display:grid;
  grid-template-rows:repeat(var(--tr),44px);
  grid-template-columns:repeat(var(--tc),44px);
  gap:12px;                          /* ⚠️ 与 js/bis.js 的 TN=44 / TG=12 必须一致 */
  width:var(--tw);height:var(--th);margin:0 auto;
}
.bis-links{position:absolute;left:0;top:0;pointer-events:none;overflow:visible}
.bis-links line{stroke:#39404b;stroke-width:2;stroke-linecap:round}
.bis-links line.half{stroke:#7a6630}
.bis-links line.lit{stroke:var(--gold);stroke-width:2.6}
.tn{
  position:relative;box-sizing:border-box;width:44px;height:44px;padding:0;cursor:pointer;
  background:#0b0c0e;border:2px solid var(--frame);
  filter:grayscale(1) brightness(.6);transition:.14s;
}
.tn img{display:block;width:100%;height:100%;object-fit:cover}
.tn:hover{filter:none;border-color:var(--gold)}
.tn .x{
  position:absolute;left:0;right:0;bottom:0;font-size:10px;
  line-height:12px;text-align:center;color:#cfd4dc;
  background:rgba(0,0,0,.72);font-variant-numeric:tabular-nums;letter-spacing:.4px;
}
.tn .x i{font-style:normal;color:#6f7681}
.tn.alloc{filter:none;border-color:var(--gold)}
.tn.alloc .x{color:#f4e7c3;background:rgba(0,0,0,.8)}
.tn.maxed{border-color:#f4e7c3;box-shadow:0 0 0 1px rgba(244,231,195,.35),0 0 12px rgba(216,180,90,.35)}
.tn.maxed .x{color:#ffe9a8}
.bis-tnote{margin:14px 0 0;font-size:11.5px;line-height:1.85;color:#6f7681;max-width:900px}

/* ⛔ 这里原来有一段「加点清单」（.bis-ck / .bis-ck-g / .bis-ck-none）。
   血染 07:07：「这个加点清单删除 不需要的」⇒ 整段撤掉，样式一并清掉，不留死规则。
   "怎么加"现在由天赋树自己承担（亮节点 + 金色前置连线 + 每系页签点数 + 悬停看每级效果）。 */
.bis-tnote b{color:var(--gold-hi)}

/* ---------- 7. 悬停提示（物品 / 天赋节点共用） ---------- */
.bis-tip{
  display:none;position:fixed;z-index:300;max-width:340px;pointer-events:none;
  padding:12px 14px 13px;border:1px solid rgba(216,180,90,.5);
  background:linear-gradient(180deg,rgba(14,15,18,.98),rgba(8,9,11,.99));
  box-shadow:0 10px 30px rgba(0,0,0,.6);
}
.bis-tip.on{display:block}
.tip-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px}
.tip-n{font-family:var(--f-title);font-size:15px;letter-spacing:1.2px;line-height:1.35}
.tip-n.gold{color:var(--gold-hi)}
.tip-fac{font-size:10.5px;padding:0 5px;border:1px solid currentColor}
.tip-fac.a{color:#7fb0f0}
.tip-fac.h{color:#e0857a}
.tip-k{font-size:10.5px;color:var(--parch-3);border:1px solid var(--frame);padding:0 5px}
.tip-q{margin-top:5px;font-size:11.5px;color:var(--parch-2)}
.tip-q b.gold{color:var(--gold-hi)}
.tip-st{margin:9px 0 0;padding:0;list-style:none}
.tip-st li{font-size:12.5px;line-height:1.7;color:var(--parch)}
.tip-st li.eq{color:#8fb6e8}
/* ★ 2026-09-22：候选行的属性改由内嵌物品库的「完整工具提示行」渲染（参考站当天改版，
   把候选行里的 bis-row-stats 删了，属性只剩悬停浮层一处）。下面几类**按数据形态**定的：
   · tip-two   带制表符的两栏行（左部位 / 右甲类或武器类别，或 伤害 / 速度）
   · tip-dim   绑定 / 需求等级 / 出售价 / 职业限定 / 唯一（游戏里本来也是灰字）
   · tip-seth · tip-mem · tip-set   套装块（表头 / 成员 / 奖励）
   ⛔ 别按中文词义去猜分类：猜错了只是颜色不对，页面照样正常，最难发现。 */
.tip-st li.tip-two{display:flex;justify-content:space-between;gap:16px}
.tip-st li.tip-two span:first-child{white-space:nowrap}
.tip-st li.tip-two span:last-child{color:var(--parch-2);text-align:right}
.tip-st li.tip-dim{color:#8b929d}
.tip-st li.tip-seth{margin-top:4px;color:var(--gold);letter-spacing:.4px}
.tip-st li.tip-mem{padding-left:9px;font-size:12px;color:var(--parch-2)}
.tip-st li.tip-set{color:#8fb6e8}
.tip-il{margin-left:8px;color:var(--parch-3)}
.tip-ranks{margin:9px 0 0;padding:0;list-style:none}
.tip-ranks li{display:flex;gap:8px;font-size:12px;line-height:1.7;color:var(--parch-2)}
.tip-ranks li i{
  flex:none;width:15px;height:15px;line-height:15px;margin-top:3px;text-align:center;
  font-size:10px;font-style:normal;color:var(--parch-3);border:1px solid var(--frame);
}
.tip-ranks li.off{color:#5d646e}
.tip-ranks li.off i{color:#4b5158}
.tip-ranks li.on{color:var(--gold-hi)}
.tip-ranks li.on i{color:#2a1c08;background:linear-gradient(180deg,#e8c874,#b8912f);border-color:transparent}
.tip-src{margin-top:10px;padding-top:9px;border-top:1px solid rgba(216,180,90,.2)}
.tip-src b{font-size:11.5px;color:var(--gold);font-weight:400;letter-spacing:.4px}
.tip-src p{margin:4px 0 0;font-size:11.5px;line-height:1.72;color:#8b929d}

/* ---------- 补充示意图（浮层里的那张标注图） ----------
   ★ 2026-09-22 血染：恶性根茎那块「加一张小图作为详细补充说明」。
     数据 → research/bis_img.json → _mk_bis.py → 候选行的 img 字段；
     ⛔ 没有台账条目的装备根本不会渲染这一块，别在这里做"没有也画个框"的兜底。
   ⚠️ 宽度跟着浮层走（100%，不写死 px）：浮层在手机上会被 max-width 收窄。
   ⚠️ 图题 + 图注**都要有**：原图右上那行手写注释在截图里被裁掉了一截，
      "图上的圈和线各是什么"这件事由文字承担，不指望访客去认图里的小字。
   ⚠️ 放宽 max-width 用的是**两个类**（.bis-tip.has-map）才压得住基础规则；
      媒体查询里那条 100vw 收窄必须跟着写一份（见上面 @media 里那段注释）。 */
.bis-tip.has-map{max-width:392px}
.tip-map{margin:10px 0 0}
.tip-map img{
  display:block;width:100%;height:auto;background:#0b0b0d;
  border:1px solid rgba(216,180,90,.34);
}
.tip-map figcaption{margin-top:6px}
.tip-map figcaption b{
  display:block;font-size:11.5px;font-weight:400;letter-spacing:.4px;color:var(--gold);
}
.tip-map figcaption span{display:block;margin-top:3px;font-size:11px;line-height:1.7;color:#8b929d}
.tip-pre{margin-top:8px;font-size:11.5px;color:var(--parch-3)}

/* 图标缺失兜底 */
.noico{
  display:inline-block;width:100%;height:100%;min-height:20px;
  border:1px dashed var(--frame-hi);background:rgba(255,255,255,.02);
}
img.bis-ico.noico{width:34px;height:34px}

/* ---------- 8. 窄屏 ---------- */
@media (max-width:1099px){
  /* 窄屏只显示当前选中的那一系（宽屏三系并排、非当前系压暗） */
  .bis-trees{grid-template-columns:1fr}
  .bis-tree-w.off{display:none}
}
@media (min-width:1100px){
  .bis-tree-w.off{opacity:.42;filter:grayscale(.72)}
  .bis-tree-w.off:hover{opacity:.9;filter:none}
}
@media (max-width:860px){
  .bis-h-name{font-size:22px}
  .bis-h-lv{margin-left:0;width:100%}
  .bis-hint{margin-left:0;width:100%}
  /* ⚠️ 这两条是 **max-width** 且排在前面那些 min-width 之后 —— 同优先级下后者胜，
     所以窄屏的列数**必须在这里重写一遍**，否则 860 以下会被 auto-fill 抢回去
     （实测 820 宽时总览变成 4 列，跟 900 宽的 3 列自相矛盾）。 */
  .bis-ov{grid-template-columns:repeat(3,1fr)}
  .bis-pick-g{grid-template-columns:1fr}
  .bis-st-g{grid-template-columns:1fr}
  .bis-tinfo{margin-left:0;width:100%}
  .bis-bar{padding:10px 12px;gap:10px}
  .bis-vars{padding:8px 10px;gap:7px}
  .bis-vars-lb{width:100%}
  .bis-vars button{padding:4px 9px 4px 5px;font-size:12.5px;gap:6px}
  .bis-vars-i{width:19px;height:19px}
}
@media (max-width:640px){
  .bis-h-name{font-size:20px;letter-spacing:2px}
  .bis-cap{font-size:13.5px;letter-spacing:2px}
  .bis-ov{grid-template-columns:repeat(2,1fr);gap:8px}
  .bis-ov-c{padding:9px 10px}
  .bis-ov-c .nm{font-size:12.5px}
  .bis-seg button{padding:6px 11px;font-size:12.5px}
  .bis-seg.bis-view button{padding:6px 14px}
  .bis-pick{padding:11px 12px 13px}
  .bis-pick-h{gap:8px}
  .bis-pick-h .n{margin-left:0;width:100%}
  .bis-pick-x{padding:3px 8px}
  .bc{grid-template-columns:16px 38px 1fr;gap:8px;padding:8px}
  .bc-ico{width:38px;height:38px}
  /* ⚠️ `.bis-tip.has-map`（下面补图那条）是**两个类**，优先级比这里的单类高 ——
     不一起收窄的话，手机上有补图的浮层会比屏幕还宽。两处必须成对改。 */
  .bis-tip,.bis-tip.has-map{max-width:calc(100vw - 24px)}
}

/* ==========================================================================
   §v210 · 等级档开关 + 装备附魔段 + 消耗品段
   数据：data-bis.js 两档（window.WF_BIS / window.WF_BIS_LV20），生成器 _tmp/_mk_bis2.py。
   ========================================================================== */

/* ---------- v210-1. 顶栏等级档开关 ---------- */
/* 造型沿用 .bis-seg（金底选中），只是排到阵营开关前面 —— 等级档换的是整份数据，
   语义上比阵营更大，放最左。 */
.bis-lv button b{font-weight:inherit}

/* ---------- v210-2. 装备附魔段 ---------- */
.bis-ench{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:18px}
.be{
  display:grid;grid-template-columns:64px 1fr;gap:0;
  border:1px solid var(--frame);background:rgba(255,255,255,.02);
}
.be-slot{
  display:flex;align-items:center;justify-content:center;
  padding:10px 6px;font-size:12.5px;color:var(--gold-hi);
  border-right:1px solid var(--frame);
  background:linear-gradient(180deg,rgba(216,180,90,.07),rgba(216,180,90,.02));
  letter-spacing:1px;
}
.be-m{padding:10px 12px;min-width:0}
.be-n{display:flex;align-items:center;flex-wrap:wrap;gap:6px 9px}
.be-n img{width:26px;height:26px;flex:none;border:1px solid var(--frame);background:#0b0b0d}
.be-n b{font-size:13.5px;color:#e8dcc0;line-height:1.35}
.be-eff{font-size:12.5px;color:#9ec48f}
.be-eff::before{content:'●';font-size:8px;vertical-align:2px;margin-right:4px;opacity:.6}
.be-lv{
  font-size:11.5px;color:#8fb6e8;white-space:nowrap;
  border:1px solid rgba(143,182,232,.35);padding:1px 6px;
}
.be-src{margin-top:6px;font-size:12px;color:#a89a78;line-height:1.5}
.be-mats{margin-top:7px;display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px}
.be-mats>span:first-child{
  font-size:11.5px;color:#7a7059;letter-spacing:2px;
  border-left:2px solid #5a5142;padding-left:6px;
}
.bm{display:inline-flex;align-items:center;gap:4px;font-size:12px}
.bm img{width:18px;height:18px;border:1px solid var(--frame);background:#0b0b0d}
.bm b{color:#c9b98f;font-size:11.5px;font-weight:600}

/* ---------- v210-3. 消耗品段 ---------- */
.bis-cons-lede{
  margin:-2px 0 12px;font-size:12.5px;color:#a89a78;line-height:1.6;
  border-left:3px solid #c99a3f;padding:2px 0 2px 10px;
}
.bis-cons-c{margin-bottom:14px}
.bis-cons-c .ct{
  font-size:13px;color:var(--gold-hi);letter-spacing:2px;margin-bottom:8px;
  display:flex;align-items:center;gap:10px;
}
.bis-cons-c .ct::after{content:'';flex:1;height:1px;background:var(--frame)}
.bis-cons-g{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.bco{
  border:1px solid var(--frame);background:rgba(255,255,255,.02);
  padding:10px 12px;min-width:0;
}
.bco-m{display:flex;gap:10px;align-items:flex-start}
.bco-ico{width:30px;height:30px;flex:none;border:1px solid var(--frame);background:#0b0b0d}
.bco-t{min-width:0}
.bco-t b{display:block;font-size:13.5px;line-height:1.4}
.bco-eff{display:block;margin-top:3px;font-size:12.5px;color:#b9c8a8;line-height:1.55}
.bco-s{margin-top:7px;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.bco-note{font-size:12px;color:#a89a78;line-height:1.5}
.bco .be-mats{margin-top:8px}

/* ---------- v210-4. 窄屏 ---------- */
@media (max-width:900px){
  .bis-ench{grid-template-columns:1fr}
  .bis-cons-g{grid-template-columns:1fr}
  .bis-bar{flex-wrap:wrap}
  .bis-hint{width:100%}
}
@media (max-width:640px){
  .be{grid-template-columns:52px 1fr}
  .be-slot{font-size:11.5px;padding:8px 4px}
  .be-m{padding:8px 9px}
  .bco{padding:8px 9px}
}