/* ============================================================================
   数据库页（database.html）—— 套装数据挖掘
   ----------------------------------------------------------------------------
   ⚠️ 全部选择器带 db- 前缀 / #dbTabs 作用域，**不碰 wow.css 里已有的类**。
      理由（本站踩过的坑）：站上给 .dcard / .wire-bd 配过 .dlist，但 .icard 从来没配过
      ⇒ 把列表塞进没配过的卡片里会直接掉成浏览器默认样式（圆点 / 16px / 零间距）。
      自己开一套命名空间最省事，也不会把别的页带坏。
   ⚠️ 卡片是**默认折叠**的（本站硬规矩：列表型工具铺成 N 卡两三屏 = 会被否）。
      判据不是「信息全不全」，是**版面占比** —— 所以收起态只留「名字 + 材质 + 件数」，
      效果要点开才出来。
   ========================================================================== */

/* ---------- 工具条 ---------- */
.db-top{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:0 0 16px}
.db-q{
  flex:1 1 260px;min-width:0;max-width:420px;
  padding:11px 15px;
  font-family:var(--f-body);font-size:13.5px;color:#dfe4ec;
  background:linear-gradient(180deg,rgba(10,12,16,.92),rgba(10,12,16,.96));
  border:1px solid var(--frame);
  box-shadow:inset 0 1px 0 rgba(255,235,180,.06);
  transition:.16s;
}
.db-q::placeholder{color:#6f7681}
.db-q:focus{
  outline:none;border-color:rgba(216,180,90,.62);
  box-shadow:inset 0 1px 0 rgba(255,235,180,.12),0 0 0 3px rgba(216,180,90,.10);
}
.db-btn{
  cursor:pointer;flex:none;
  padding:11px 20px;
  font-family:var(--f-title);font-size:13.5px;letter-spacing:1.6px;
  color:#b0b3ba;
  background:linear-gradient(180deg,rgba(17,17,18,.9),rgba(17,17,18,.95));
  border:1px solid var(--frame);
  box-shadow:inset 0 1px 0 rgba(255,235,180,.08);
  transition:.16s;
}
.db-btn:hover{color:var(--gold-hi);border-color:rgba(216,180,90,.6)}
.db-btn[disabled]{opacity:.42;cursor:not-allowed}
.db-btn[disabled]:hover{color:#b0b3ba;border-color:var(--frame)}
.db-cnt{margin-left:auto;font-size:12.5px;letter-spacing:1px;color:var(--parch-3);flex:none}

/* ---------- 职业筛选 ---------- */
.db-cls{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 18px}
.db-cls:empty{display:none}
.db-ci{
  cursor:pointer;display:inline-flex;align-items:center;gap:7px;
  padding:6px 14px 6px 11px;
  font-family:var(--f-body);font-size:12.5px;letter-spacing:.6px;
  color:#a9aeb7;
  background:rgba(14,16,20,.78);
  border:1px solid var(--frame);
  transition:.16s;
}
.db-ci:hover{color:var(--gold-hi);border-color:rgba(216,180,90,.5)}
.db-ci.on{
  color:#fff2cf;border-color:rgba(216,180,90,.72);
  background:linear-gradient(180deg,rgba(216,180,90,.22),rgba(216,180,90,.10));
  box-shadow:inset 0 0 0 1px rgba(255,225,150,.14);
}
.db-ci i{
  width:8px;height:8px;flex:none;border-radius:50%;
  background:var(--cc,#8b929d);
  box-shadow:0 0 6px var(--cc,rgba(139,146,157,.7));
}

/* ---------- 分栏说明 ---------- */
.db-note{
  margin:0 0 22px;padding:14px 20px;
  font-size:13.4px;line-height:1.85;color:#c2c7cf;
  background:linear-gradient(90deg,rgba(216,180,90,.10),rgba(216,180,90,.035) 70%);
  border-left:3px solid rgba(216,180,90,.55);
}
.db-note b{color:var(--gold-hi)}

/* ---------- 分组（经典套装改动 / 装备特效用） ---------- */
.db-g{margin:0 0 34px}
.db-gh{
  display:flex;align-items:center;gap:14px;margin:0 0 14px;
  font-family:var(--f-title);font-size:16.5px;letter-spacing:2px;color:var(--gold-hi);
}
.db-gh .ln{flex:1;height:1px;background:linear-gradient(90deg,rgba(216,180,90,.42),rgba(216,180,90,0))}
.db-gh .n{font-family:var(--f-body);font-size:12px;letter-spacing:1.2px;color:var(--parch-3)}

/* ---------- 网格 ---------- */
.db-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(322px,1fr));gap:14px}
@media(max-width:700px){.db-grid{grid-template-columns:1fr}}

/* ---------- 卡片 ---------- */
.db-s{
  position:relative;min-width:0;
  background:linear-gradient(180deg,rgba(15,17,22,.92),rgba(10,12,16,.96));
  border:1px solid var(--frame);
  box-shadow:inset 0 1px 0 rgba(255,235,180,.055);
  transition:border-color .16s,box-shadow .16s;
}
.db-s:hover{border-color:rgba(216,180,90,.42)}
.db-s.open{border-color:rgba(216,180,90,.55);box-shadow:inset 0 1px 0 rgba(255,235,180,.09)}

/* 卡头（整行可点） */
.db-sh{
  cursor:pointer;width:100%;display:flex;align-items:flex-start;gap:12px;
  padding:14px 16px 13px;text-align:left;
  background:none;border:0;color:inherit;font:inherit;
}
.db-sh:focus-visible{outline:2px solid rgba(216,180,90,.7);outline-offset:-2px}
.db-bar{width:3px;align-self:stretch;flex:none;background:var(--cc,#8b929d);opacity:.85}
.db-nm{flex:1;min-width:0}
.db-zh{
  display:block;font-family:var(--f-title);font-size:16px;letter-spacing:1.4px;
  color:#f2e6c8;line-height:1.35;
}
.db-en{
  display:block;margin-top:2px;font-size:11.4px;letter-spacing:.4px;
  color:#7d848f;line-height:1.4;word-break:break-word;
}
.db-tag{
  flex:none;display:inline-flex;align-items:center;gap:5px;
  padding:2px 8px;
  font-size:11px;letter-spacing:.6px;color:#cfd4dc;
  background:rgba(255,255,255,.045);border:1px solid var(--frame);
}
.db-tag i{width:6px;height:6px;border-radius:50%;flex:none;background:var(--cc,#8b929d)}

/* 展开箭头 */
.db-cv{
  flex:none;width:18px;height:18px;margin-top:3px;position:relative;
  transition:transform .2s ease;
}
.db-cv::before,.db-cv::after{
  content:"";position:absolute;top:8px;left:4px;width:10px;height:1.6px;
  background:#8d949f;transition:.16s;
}
.db-cv::before{transform:rotate(45deg);left:2.6px}
.db-cv::after{transform:rotate(-45deg);left:6.2px}
.db-s.open .db-cv{transform:rotate(90deg)}
.db-s.open .db-cv::before,.db-s.open .db-cv::after{background:var(--gold)}
.db-sh:hover .db-cv::before,.db-sh:hover .db-cv::after{background:var(--gold-hi)}

/* 元信息（材质 / 件数 / 部位） */
.db-meta{
  display:flex;flex-wrap:wrap;gap:6px 8px;
  padding:0 16px 12px;
  font-size:12.3px;color:#9aa1ac;line-height:1.5;
}
.db-meta span{
  padding:2px 9px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.06);
}
.db-meta span.v{color:#c4cad3}
.db-meta span.warn{color:#e8c874;border-color:rgba(216,180,90,.3);background:rgba(216,180,90,.09)}

/* 件数档位（经典套装改动） */
.db-th{display:flex;align-items:center;gap:8px;font-size:12.6px;color:#9aa1ac}
.db-th .k{color:#7d848f;letter-spacing:.6px}
.db-th .was{color:#8f96a1;text-decoration:line-through;text-decoration-color:rgba(160,168,180,.55)}
.db-th .arr{color:var(--gold-mid)}
.db-th .now{color:#f0dda6;font-weight:700;letter-spacing:.4px}

/* ---------- 效果列表（点开才出来） ---------- */
.db-b{
  overflow:hidden;max-height:0;
  transition:max-height .26s ease;
}
.db-s.open .db-b{max-height:1400px}
.db-bi{
  padding:12px 16px 13px;
  border-top:1px solid rgba(255,255,255,.06);
}
.db-bi:first-child{border-top:1px solid rgba(216,180,90,.22)}
.db-bh{display:flex;align-items:flex-start;gap:10px}
.db-p{
  flex:none;display:inline-flex;align-items:center;justify-content:center;
  min-width:26px;height:20px;padding:0 5px;
  font-family:var(--f-title);font-size:12px;letter-spacing:.4px;
  color:#2a1c08;
  background:linear-gradient(180deg,#e8c874,#b8912f);
  box-shadow:inset 0 1px 0 rgba(255,245,205,.6);
}
.db-p::after{
  content:"件";font-family:var(--f-body);font-size:9.4px;letter-spacing:0;margin-left:2px;
  opacity:.72;
}
.db-nb{flex:1;min-width:0}
.db-dz{font-size:13.2px;line-height:1.78;color:#dde2ea}
.db-dz b{color:var(--gold-hi)}
.db-d{
  display:block;margin-top:5px;
  font-size:11.2px;line-height:1.6;color:#7f8791;
  word-break:break-word;
}
/* 改动过 / 新增的那一档：档位徽章描金，正文点一句 */
.db-bi.isnew .db-p{
  background:linear-gradient(180deg,#fff3d0,#e0b95f);
  box-shadow:inset 0 1px 0 rgba(255,250,230,.9),0 0 10px rgba(216,180,90,.45);
}
.db-bi.isnew .db-dz{color:#f4e9cd}
.db-newtag{
  display:inline-block;margin-left:7px;padding:0 6px;
  font-family:var(--f-body);font-size:10px;letter-spacing:.8px;vertical-align:1px;
  color:#2a1c08;background:linear-gradient(180deg,#f0d68c,#c9a961);
}
/* 未改动的档位淡一档，让金色那几档跳出来 */
.db-bi.issame .db-dz{color:#b9bfc8}
.db-bi.issame .db-p{opacity:.62}

/* 空结果 */
.db-empty{
  padding:34px 20px;text-align:center;
  font-size:13.6px;color:var(--parch-3);line-height:1.9;
  border:1px dashed rgba(216,180,90,.28);
  background:rgba(255,255,255,.014);
}
.db-empty b{color:var(--gold-hi)}

/* ============================================================================
   物品查询（v79）—— 独立开一套 it- 命名空间
   ----------------------------------------------------------------------------
   ⚠️ 为什么不用 db-* ：那一套是给「套装卡片」配的，且验收脚本 _db_browser.py
      对 db-top / db-grid 的数量有断言。物品列表是另一种排版（一行一件、可展开），
      混用会把两边的判据都搅浑。
   ⚠️ 图标是本地文件 assets/item/<FileDataID>.jpg —— 自带缓存，**别挂 ?v=**
      （本站踩过：给图标挂版本号 = 每次翻页重问，favicon 那 43% 就是这么来的）。
   ========================================================================== */

/* 工具条：搜索框 */
.it-top{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:0 0 14px}
.it-q{
  flex:1 1 300px;min-width:0;max-width:460px;
  padding:11px 15px;
  font-family:var(--f-body);font-size:13.5px;color:#dfe4ec;
  background:linear-gradient(180deg,rgba(10,12,16,.92),rgba(10,12,16,.96));
  border:1px solid var(--frame);
  box-shadow:inset 0 1px 0 rgba(255,235,180,.06);
  transition:.16s;
}
.it-q::placeholder{color:#6f7681}
.it-q:focus{
  outline:none;border-color:rgba(216,180,90,.62);
  box-shadow:inset 0 1px 0 rgba(255,235,180,.12),0 0 0 3px rgba(216,180,90,.10);
}
.it-cnt{margin-left:auto;font-size:12.5px;letter-spacing:1px;color:var(--parch-3)}
.it-cnt b{color:var(--gold-hi)}

/* 筛选下拉 */
.it-f{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 18px}
.it-f:empty{display:none}
.it-sel{
  flex:0 1 190px;min-width:0;
  padding:9px 13px;
  font-family:var(--f-body);font-size:12.8px;color:#c2c8d1;
  background:rgba(14,16,20,.86);
  border:1px solid var(--frame);
  cursor:pointer;transition:.16s;
}
.it-sel:hover{color:var(--gold-hi);border-color:rgba(216,180,90,.5)}
.it-sel:focus{outline:none;border-color:rgba(216,180,90,.62)}

/* 结果列表：窄屏一行一件，宽屏两列 */
/* ⚠️ align-items:start 不能省：grid 默认 stretch ⇒ 点开一张卡时，同一行的
   邻居会被一起拉高、底下留一大片空白（本站"卡片看着被切开"的老毛病同类）。 */
.it-grid{display:grid;grid-template-columns:1fr;gap:10px;align-items:start}
@media(min-width:1080px){.it-grid{grid-template-columns:1fr 1fr}}

.it-c{
  position:relative;min-width:0;
  background:linear-gradient(180deg,rgba(15,17,22,.92),rgba(10,12,16,.96));
  border:1px solid var(--frame);
  box-shadow:inset 0 1px 0 rgba(255,235,180,.05);
  transition:border-color .16s,box-shadow .16s;
}
.it-c:hover{border-color:rgba(216,180,90,.4)}
.it-c.open{border-color:rgba(216,180,90,.55);box-shadow:inset 0 1px 0 rgba(255,235,180,.09)}

/* 行（整行可点） */
.it-h{
  cursor:pointer;width:100%;display:flex;align-items:center;gap:13px;
  padding:11px 15px;text-align:left;
  background:none;border:0;color:inherit;font:inherit;
}
.it-h:focus-visible{outline:2px solid rgba(216,180,90,.7);outline-offset:-2px}
.it-ico{
  flex:none;width:38px;height:38px;display:block;
  border:1px solid rgba(216,180,90,.34);
  background:#0a0b0e;
}
.it-noico{
  background:repeating-linear-gradient(45deg,rgba(255,255,255,.045),rgba(255,255,255,.045) 4px,transparent 4px,transparent 8px);
  border-style:dashed;border-color:rgba(255,255,255,.14);
}
.it-nm{flex:1;min-width:0}
.it-zh{
  display:block;font-family:var(--f-title);font-size:15px;letter-spacing:.8px;
  line-height:1.35;word-break:break-word;
}
/* ⚠️ 这里原来有一条 `.it-en{}`（列表行中文名下面的英文原名副标题）。
   2026-09-22 v140 站长「列表里去掉英文」⇒ 那个 span 已经从 items.js 删掉，
   这条样式随之作废，**已删除**。⛔ 别照旧样式把它加回来。
   英文原名仍然在**展开卡**里（`.it-src-en` 那行「英文名 …」）。 */
.it-meta{
  flex:none;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:5px;
  max-width:230px;
}
.it-meta span{
  display:inline-flex;align-items:center;gap:5px;
  padding:2px 8px;font-size:11px;letter-spacing:.4px;color:#b9bfc8;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);
}
.it-meta span b{color:#e8dfc6}
.it-meta i{width:7px;height:7px;border-radius:50%;flex:none;background:var(--qc,#8b929d)}

/* ★ v204 · 超窄屏（≤420px）物品行换行 —— 第二处横向溢出（真 bug 修复）
   ---------------------------------------------------------------------------
   病根：`.it-h` 是 `display:flex` 且**不换行**，而 `.it-meta` 写的是
        `flex:none;max-width:230px` —— **不收缩**。320px 视口下这一行是
        38(.it-ico) + 13 + .it-nm + 13 + 230(.it-meta) + 13 + 18(.db-cv) + 30(padding)
        ≈ 356px，比视口宽 36px，直接把 documentElement 撑出横向滚动。
   ⚠️ 这正是「375 测不出、320 才露头」的原因：375 时 356 < 375 刚好不溢出，
      所以只按 375 验收会漏掉它。五档宽度缺一不可。
   修法：元信息标签换到独立的第二行；`.db-cv` 用 order 提到它前面，箭头留在首行。
   ⛔ 别改用给 `.it-meta` 加 `overflow:hidden` —— 那会把「神器」「剑」这些
      标签**直接切掉**，比溢出更糟。
   ⚠️ order 只改**视觉**顺序，DOM 顺序不动，读屏与 Tab 焦点不受影响。 */
@media(max-width:420px){
  .it-h{flex-wrap:wrap}
  .it-meta{flex:1 1 100%;max-width:100%;justify-content:flex-start;order:5}
  .db-cv{order:4}
}

/* 展开区（点开才出来） */
.it-b{
  padding:4px 15px 14px;
  border-top:1px solid rgba(216,180,90,.22);
}
.it-st{
  list-style:none;margin:10px 0 0;padding:0;
  display:grid;grid-template-columns:1fr;gap:3px;
}
@media(min-width:520px){.it-st{grid-template-columns:1fr 1fr}}
.it-st li{font-size:13px;line-height:1.72;color:#c8ced7}
.it-st .k{color:#8ee08a;font-weight:700;letter-spacing:.3px}
/* 「无限」自己加的新属性：客户端里没有名字 ⇒ 照实标「未知属性」，别编名。
   用暖金而不是绿，是让它一眼看出「这条跟别条不是一回事」。 */
.it-st li.it-unk{color:#d9c79a}
.it-st li.it-unk .k{color:#e0b863}
.it-unkq{font-size:11.4px;color:#8b929d;letter-spacing:.2px}
/* 不展示数值的说明行：整行铺满（.it-st 是两列 grid，不写就会挤在左半列） */
.it-st li.it-none{grid-column:1/-1;font-size:12.4px;line-height:1.7;color:#8b929d}
.it-st li.it-none b{color:#d7cba6}
/* 效果文案（使用 / 装备 / 击中时可能）—— 2026-09-22 v135 新增，数据 data-itmfx.js。
   ⚠️ 必须 `grid-column:1/-1`：`.it-st` 在 ≥520px 是**两列 grid**，不写整行铺满，
      一句「使用：如果你花费至少 10 秒钟进食…」会被挤在左半列里折成三四行。
   ⚠️ 冷蓝 = 攻略页物品浮层那条 `.eq` 同色（全站"这是一条效果说明"的统一信号）。 */
.it-st li.it-fx{grid-column:1/-1;color:#8fb6e8}
/* ★ 未译英文那条说明（2026-09-22 v135）—— 与效果行**同色系但更弱**：
   它在说"这条为什么是英文"，是元信息，不能抢过效果本身。
   ⚠️ 同样要 `grid-column:1/-1`（`.it-st` 在 ≥520px 是两列 grid），
      不然这句中文会在左半列里折成一坨。 */
.it-st li.it-fx-en{grid-column:1/-1;color:#7b8492;font-size:11.6px}
.it-st li.it-fx-en b{color:#b9a877}
.it-desc{
  margin:10px 0 0;font-size:12.4px;line-height:1.75;color:#a8b0bb;letter-spacing:.2px;
  padding:8px 11px;border-left:2px solid rgba(216,180,90,.35);background:rgba(255,255,255,.016);
}
.it-sub{
  margin:11px 0 0;font-size:11.8px;line-height:1.7;color:#8b929d;letter-spacing:.3px;
}
.it-sub b{color:#d7cba6}
.it-src-en{margin:5px 0 0;font-size:11.2px;line-height:1.6;color:#6f7681}
.it-src-en b{color:#8b929d}

/* ---------- v107：掉落出处 + 经典旧世资料角标（2026-09-20 并库带来）----------
   ⚠️ 掉落出处是**外部资料**（引自同好社区站），不是客户端字段 ⇒ 那一行必须带
      `.it-ext` 小角标明写「外部资料」，别让人以为是我们挖客户端挖出来的。
   ⚠️ 「有出处」那个角标用**低调的青绿**，不用金色：金色在本页是"口径牌 / 强调来源"的语义
      （见 .it-note），一个列表里撒满金色角标会把那个语义稀释掉。 */
.it-drop .k{color:#d7cba6}
.it-nodrop{color:#5d646e}
.it-ext{
  font-style:normal;margin-left:7px;padding:1px 6px;
  font-size:10.2px;letter-spacing:.4px;color:#8b929d;
  border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.03);
}
.it-src-en.it-era{
  margin-top:7px;padding:6px 10px;color:#9aa3ae;
  border-left:2px solid rgba(216,180,90,.35);background:rgba(255,255,255,.016);
}
/* 开发残留物（内部测试 / 占位符）的说明块 —— 用**冷灰**，跟「客户端没译」(金线) 区分开：
   两种情况的**处理一样**（都显示我们的暂译名 + 各自一段说明），但性质不同
   （一个游戏里拿得到、一个永远拿不到），颜色分得开访客才不用细读。
   ⚠️ 2026-09-22 v140：这两块原来写的是「照实显示、不机翻」，现在都改成
      「上屏那个中文名是我们直译的暂译名」—— 改文案时别再把「不机翻」抄回来。
   ⚠️ 别把它做成"警告红"：这些是客户端自己带的东西，不是本站出错了。 */
.it-src-en.it-junk{
  margin-top:7px;padding:6px 10px;color:#8d949e;
  border-left:2px solid rgba(150,160,175,.28);background:rgba(255,255,255,.012);
}
.it-meta span.it-new{
  color:#cfd6df;border-color:rgba(255,255,255,.14);background:rgba(255,255,255,.06);
}
.it-meta span.it-hasd{
  color:#9fd8c4;border-color:rgba(120,200,170,.28);background:rgba(120,200,170,.08);
}
/* 「暂译」标记（2026-09-22 v140）：客户端没给中文名、名字是**我们自己按英文名直译**的。
   用暖黄，跟「有出处」的绿、「经典旧世资料」的灰都分得开 —— 这枚标记是免责，不是装饰，
   ⛔ 别拿它当普通角标随手关掉。 */
.it-meta span.it-mt{
  color:#e2c98a;border-color:rgba(216,180,90,.30);background:rgba(216,180,90,.09);
}

/* 分页控件（v86 起。原来那行 `.it-more{display:block;width:100%}` 是全宽「加载更多」按钮，
   血染要真翻页 ⇒ 已废掉，别再挂回来）。
   ⚠️ 整块靠 `#itMore` 的**内联 display** 开关（只有一页时隐藏）—— 内联优先于这条 flex，
      所以两边不打架；⛔ 别改成用 class 切 `display`。 */
.it-pg{display:flex;align-items:center;justify-content:center;gap:14px;margin:18px 0 0}
.it-pgb{min-width:98px;text-align:center}
.it-pgi{font-size:12.8px;letter-spacing:1px;color:var(--parch-3);white-space:nowrap}
.it-pgi b{color:var(--gold-hi)}
.it-pgi span{margin-left:8px;opacity:.8}
/* ★ v204 · 手机端分页换行（真 bug 修复）
   ---------------------------------------------------------------------------
   病根：`.it-pg` 是 `display:flex` 且**不换行**，两个 `.it-pgb` 各有
        `min-width:98px`，中间的 `.it-pgi` 页码文案又是 `white-space:nowrap`
        —— 三者加起来是一条**不可压缩的横排**。窄屏下它比视口宽，直接把
        `documentElement` 撑出横向滚动：
          375px → 溢出 10px    320px → 溢出 37px    390px → 溢出 2px
        验证方式（血染机器实测）：`documentElement.scrollWidth - clientWidth > 0`。
   ⚠️ 别指望 `body{overflow-x:hidden}` 兜底 —— 它设在 body 上时，溢出会**传播给
      html**，html 照样能左右晃；且给 html 加 overflow 会连带废掉 `.nav` 的
      `position:sticky`。所以必须在这里修根因。
   修法：页码文案独占第一行，两个按钮平分第二行 —— 宽度自适应，永不溢出。
   ⛔ 只加 flex-wrap / order / flex，**不碰 display** —— `#itMore` 靠内联
      `style.display` 开关（只有一页时整块隐藏），内联优先级高于这里的 flex 声明，
      改 display 会把那个开关打坏。 */
@media(max-width:560px){
  .it-pg{flex-wrap:wrap;gap:10px}
  .it-pgi{order:-1;flex:0 0 100%;text-align:center}
  .it-pgb{min-width:0;flex:1 1 0}
}

/* 收录范围口径牌（与 .db-note 同一套观感，但独立命名，别跟套装那块的 #dbNote 混） */
.it-note{
  margin:20px 0 0;padding:14px 20px;
  font-size:13.4px;line-height:1.85;color:#c2c7cf;
  background:linear-gradient(90deg,rgba(216,180,90,.10),rgba(216,180,90,.035) 70%);
  border-left:3px solid rgba(216,180,90,.55);
}
.it-note b{color:var(--gold-hi)}

/* 「专业配方 → 物品查询」的跳转反馈（v89，2026-09-18 站长后加的）-------------
   ⚠️ 只在**这一跳**上用：`.jump-note` 由 js/prof.js 现场插入、约 4.6 秒后自己淡出移除，
      `.out` 就是淡出那一档。⛔ 别把它做成常驻元素、也别挪去别处复用。
   ⚠️ 它要一眼看见，但得跟站上口径牌（上面 `.it-note`）像"一家人"，别另起一套视觉。 */
.jump-note{
  margin:0 0 14px;padding:11px 16px;
  font-size:12.8px;line-height:1.8;color:#e4dcc2;
  background:linear-gradient(90deg,rgba(216,180,90,.16),rgba(216,180,90,.05) 72%);
  border:1px solid rgba(216,180,90,.42);
  border-left:3px solid var(--gold-hi);
  opacity:1;transition:opacity .4s ease-out;
}
.jump-note.out{opacity:0}
.jump-note b{color:var(--gold-hi)}
.jump-note span{color:#8b929d}

/* ============================================================================
   专业配方（v87，2026-09-18）—— 独立开一套 pf- 命名空间
   ----------------------------------------------------------------------------
   ⚠️ 为什么再开一套：物品查询是「一行一件可展开」，套装是「卡片网格」，
      专业配方是**三栏**（专业横条 + 左侧分类 + 右侧列表），三者排版都不一样。
      跟前两块共用类名会把 _db_browser.py / _it_browser.py 的判据搅浑。
   ⚠️ 图标同样是本地文件 assets/item/<FileDataID>.jpg —— 自带缓存，**别挂 ?v=**。
   ⚠️ 左侧分类栏是**可滚动的定高块**：分类最多 34 个（锻造），不定高会把右侧列表顶下去。
   ========================================================================== */

/* 专业横条（12 个） */
.pf-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 16px}
.pf-tab{
  cursor:pointer;padding:8px 14px;
  font-family:var(--f-body);font-size:13px;letter-spacing:.6px;color:#b6bcc6;
  background:rgba(14,16,20,.86);border:1px solid var(--frame);
  transition:.16s;
}
.pf-tab:hover{color:var(--gold-hi);border-color:rgba(216,180,90,.42)}
.pf-tab.on{
  color:#f6ecd4;border-color:rgba(216,180,90,.72);
  background:linear-gradient(180deg,rgba(216,180,90,.20),rgba(216,180,90,.06));
  box-shadow:inset 0 1px 0 rgba(255,235,180,.16);
}
.pf-tab em{font-style:normal;margin-left:6px;font-size:11.2px;color:#8b929d}
.pf-tab.on em{color:#e5d4a6}

/* 三栏骨架（窄屏塌成一栏） */
.pf-body{display:grid;grid-template-columns:1fr;gap:16px;align-items:start}
@media(min-width:900px){.pf-body{grid-template-columns:214px minmax(0,1fr)}}

/* 左：分类（顺序 = 客户端的 OrderIndex，跟社区小程序一致） */
.pf-side{
  display:flex;flex-direction:column;gap:2px;
  max-height:540px;overflow-y:auto;padding:8px;
  background:rgba(10,12,16,.72);border:1px solid var(--frame);
}
.pf-side:empty{display:none}
.pf-sc{
  cursor:pointer;display:flex;align-items:center;gap:8px;width:100%;
  padding:7px 10px;text-align:left;
  font-family:var(--f-body);font-size:12.6px;letter-spacing:.4px;color:#b0b6c0;
  background:none;border:0;border-left:2px solid transparent;
  transition:.14s;
}
.pf-sc:hover{color:var(--gold-hi);background:rgba(216,180,90,.06)}
.pf-sc.on{
  color:#f6ecd4;border-left-color:var(--gold);
  background:linear-gradient(90deg,rgba(216,180,90,.16),rgba(216,180,90,.02));
}
.pf-sc span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ★★ v97：左栏最上面那排「技能等级」分档。
   配色不参与（是筛选项不是难度），但**选中态跟分类项同一套**语言，
   免得同一栏里出现两种"选中"长相。
   ⚠️ 类名 `.pf-sb` / `.pf-sh` 跟分类的 `.pf-sc` **必须分开**：
      `_pf_browser.py` 的 B4~B7 拿 `.pf-sc` 数分类条数，合并了当场全红。 */
.pf-sh{
  flex:none;margin:9px 0 3px;padding:0 10px;
  font-size:10.8px;letter-spacing:1.4px;color:#7c848f;
}
.pf-sh:first-child{margin-top:0}
.pf-sbs{flex:none;display:flex;flex-wrap:wrap;gap:4px;padding:0 10px 2px}
.pf-sb{
  cursor:pointer;display:inline-flex;align-items:center;gap:5px;
  padding:3px 7px;font-family:var(--f-body);font-size:11.4px;letter-spacing:.3px;
  color:#b0b6c0;background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.07);transition:.14s;
}
.pf-sb:hover{color:var(--gold-hi);border-color:rgba(216,180,90,.4);background:rgba(216,180,90,.06)}
.pf-sb.on{
  color:#f6ecd4;border-color:rgba(216,180,90,.62);
  background:linear-gradient(180deg,rgba(216,180,90,.18),rgba(216,180,90,.05));
}
.pf-sb span{flex:none}
.pf-sb b{flex:none;font-weight:400;font-size:10.6px;color:#868d99}
.pf-sb.on b{color:#e5d4a6}
.pf-sb:disabled{cursor:default;opacity:.38}
.pf-sb:disabled:hover{color:#b0b6c0;border-color:rgba(255,255,255,.07);background:rgba(255,255,255,.03)}
.pf-sc b{flex:none;font-weight:400;font-size:11.4px;color:#868d99}
.pf-sc.on b{color:#e5d4a6}

/* 右：工具条 + 列表 */
.pf-main{min-width:0}
.pf-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 12px}
.pf-q{
  flex:1 1 240px;min-width:0;max-width:400px;
  padding:10px 14px;
  font-family:var(--f-body);font-size:13.2px;color:#dfe4ec;
  background:linear-gradient(180deg,rgba(10,12,16,.92),rgba(10,12,16,.96));
  border:1px solid var(--frame);
  box-shadow:inset 0 1px 0 rgba(255,235,180,.06);
  transition:.16s;
}
.pf-q::placeholder{color:#6f7681}
.pf-q:focus{
  outline:none;border-color:rgba(216,180,90,.62);
  box-shadow:inset 0 1px 0 rgba(255,235,180,.12),0 0 0 3px rgba(216,180,90,.10);
}
.pf-cnt{font-size:12.5px;letter-spacing:1px;color:var(--parch-3)}
.pf-cnt b{color:var(--gold-hi)}

.pf-list{display:grid;grid-template-columns:1fr;gap:8px;align-items:start}
@media(min-width:1260px){.pf-list{grid-template-columns:1fr 1fr}}

.pf-c{
  position:relative;min-width:0;
  background:linear-gradient(180deg,rgba(15,17,22,.92),rgba(10,12,16,.96));
  border:1px solid var(--frame);
  box-shadow:inset 0 1px 0 rgba(255,235,180,.05);
  transition:border-color .16s,box-shadow .16s;
}
.pf-c:hover{border-color:rgba(216,180,90,.4)}
.pf-c.open{border-color:rgba(216,180,90,.55);box-shadow:inset 0 1px 0 rgba(255,235,180,.09)}
.pf-h{
  cursor:pointer;width:100%;display:flex;align-items:center;gap:12px;
  padding:10px 14px;text-align:left;
  background:none;border:0;color:inherit;font:inherit;
}
.pf-h:focus-visible{outline:2px solid rgba(216,180,90,.7);outline-offset:-2px}
.pf-ico{
  flex:none;width:36px;height:36px;display:block;
  border:1px solid rgba(216,180,90,.34);
  background:#0a0b0e;
}
.pf-noico{
  background:repeating-linear-gradient(45deg,rgba(255,255,255,.045),rgba(255,255,255,.045) 4px,transparent 4px,transparent 8px);
  border-style:dashed;border-color:rgba(255,255,255,.14);
}
.pf-nm{flex:1;min-width:0}
.pf-zh{
  display:block;font-family:var(--f-title);font-size:14.4px;letter-spacing:.7px;
  line-height:1.35;word-break:break-word;
}
.pf-mt{
  display:flex;flex-wrap:wrap;gap:5px;margin-top:3px;
}
.pf-mt span{
  display:inline-flex;align-items:center;gap:4px;
  padding:1px 7px;font-size:10.8px;letter-spacing:.4px;color:#b9bfc8;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);
}
.pf-mt span b{color:#e8dfc6}
.pf-mt span.pf-cat{color:#9aa1ab}
/* 「暂译」标记（2026-09-22 v140）：配方行用的名字是**我们自己按英文名直译**的
   （客户端没给中文名 ⇒ 原来是直接显示英文原名 / 材料行显示「物品 #id」）。
   ⛔ 这是免责标记，别当装饰随手关掉。 */
.pf-mt span.pf-mtz{
  color:#e2c98a;border-color:rgba(216,180,90,.30);background:rgba(216,180,90,.09);
}

/* ★★ v97：技能四档（学/黄/绿/灰）。
   配色跟**游戏内专业窗口**的四档色一致（白底取样）：红橙 rgb(255,128,64) ·
   金 rgb(251,189,8) · 绿 rgb(57,181,74) · 灰蓝 rgb(124,138,156)。
   ⚠️ 我方是**暗底**，所以金/绿/灰各提亮了一点点（照抄白底那三个值会发闷）。
   ⚠️ 选择器必须带 `.pf-mt`（或至少两个类）—— `.pf-mt span b` 是 (0,1,2)，
      写成 `.pf-tk b.t1`(0,2,1) 能赢，但把前缀写全更保险，免得以后有人加规则时被压掉。 */
.pf-tk{display:inline-flex;align-items:center;gap:6px}
.pf-mt .pf-tk b{font-weight:400}
.pf-mt .pf-tk b.t1{color:#ff8040}   /* 学：能学这条配方的等级 */
.pf-mt .pf-tk b.t2{color:#fbbd24}   /* 黄 */
.pf-mt .pf-tk b.t3{color:#3fb950}   /* 绿 */
.pf-mt .pf-tk b.t4{color:#8f99a6}   /* 灰：到这儿之后不再涨技能点 */
.pf-mt span.pf-tknone,.pf-mt span.pf-tkold{color:#868d99}

/* 展开区：材料清单 */
.pf-b{padding:2px 14px 13px;border-top:1px solid rgba(216,180,90,.22)}
.pf-bh{margin:10px 0 6px;font-size:11.6px;letter-spacing:1px;color:#8b929d}
.pf-mats{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:1fr;gap:4px;
}
@media(min-width:520px){.pf-mats{grid-template-columns:1fr 1fr}}
.pf-mats li{display:flex;align-items:center;gap:9px;min-width:0;font-size:12.6px;color:#c8ced7}
.pf-mats img,.pf-mico{
  flex:none;width:24px;height:24px;display:block;
  border:1px solid rgba(216,180,90,.28);background:#0a0b0e;
}
.pf-mats img.pf-noico,.pf-mico.pf-noico{
  border-style:dashed;border-color:rgba(255,255,255,.14);
}
.pf-mats span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pf-mats b{flex:none;font-weight:400;color:var(--gold-hi)}
.pf-mats li.pf-miss span{color:#8b929d}
/* 成品属性（展开才出来）—— 与物品库 .it-st 同一套配色：数值绿、未知属性暖金。
   ⚠️ 这里用 flex-wrap 而不是 .it-st 那种两列 grid：配方卡比物品卡窄，
      两列会被压到折行、看着像"挤坏了"；横排能自然收边。 */
.pf-atts{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;gap:2px 16px;
}
.pf-atts li{font-size:12.8px;line-height:1.75;color:#c8ced7;white-space:nowrap}
.pf-atts .k{color:#8ee08a;font-weight:700;letter-spacing:.3px}
.pf-atts li.pf-unk{color:#d9c79a}
.pf-atts li.pf-unk .k{color:#e0b863}
/* ---------- 成品属性的补充两行（2026-09-22 v135） ----------
   ★ 血染拿对照站点的物品浮层来核：人家有「物品等级 / 需要等级」和「使用：…」，
     我们只有材料清单 ⇒ 补上。数据本身早就在（data-item.js 的 4/5 列 + data-itmfx.js）。
   ⚠️ 效果行必须 `display:block` 覆盖 `.pf-atts` 的 flex-wrap：
      那是给「+7 耐力」这类**短属性词**排多列的；效果是一整句话，排成网格会碎掉。
   ⚠️ 颜色用冷蓝（同攻略页物品浮层那条 `.eq`），⛔ 不用金色 ——
      金色在本站是「标题 / 当前项」的专用色，给正文用会把层级压平。 */
.pf-ilv{margin:0 0 6px;font-size:11.8px;line-height:1.7;color:#8b929d;letter-spacing:.3px}
.pf-ilv b{color:#d7cba6}
.pf-atts.pf-fx{display:block;margin-top:6px;padding-top:6px;border-top:1px dashed rgba(255,255,255,.08)}
.pf-atts.pf-fx li{white-space:normal;color:#8fb6e8}
/* ★ 未译英文的说明（2026-09-22 v135）：元信息，比效果行弱一档；金色只留给关键词。
   ⚠️ 它是 `<p>` 不是 `<li>`（不在 `.pf-atts` 的 grid 语义里），别改成 li。 */
.pf-fx-en{margin:7px 0 0;font-size:11.4px;line-height:1.7;color:#7b8492;letter-spacing:.2px}
.pf-fx-en b{color:#b9a877}
.pf-sub{margin:11px 0 0;font-size:11.6px;line-height:1.7;color:#8b929d;letter-spacing:.3px}
.pf-sub b{color:#d7cba6}
.pf-go{
  cursor:pointer;margin-top:9px;padding:6px 12px;
  font-family:var(--f-body);font-size:11.8px;letter-spacing:.5px;color:#c8b98e;
  background:rgba(216,180,90,.08);border:1px solid rgba(216,180,90,.34);
  transition:.16s;
}
.pf-go:hover{color:var(--gold-hi);border-color:rgba(216,180,90,.62)}

/* 分页（与物品查询同一套观感；整块靠内联 display 开关，别改成 class 切） */
.pf-pg{display:flex;align-items:center;justify-content:center;gap:14px;margin:18px 0 0}
.pf-pgi{font-size:12.8px;letter-spacing:1px;color:var(--parch-3);white-space:nowrap}
.pf-pgi b{color:var(--gold-hi)}
.pf-pgi span{margin-left:8px;opacity:.8}

/* 2026-09-18：那块口径说明牌（.pf-note）按血染要求从页面上撤掉 ⇒ 样式一并清掉，不留死规则。 */

/* ============================================================================
   职业专属武器（v91 落地 · v92 换掉牧师那张 · 2026-09-18）—— 独立开一套 cw- 命名空间
   ----------------------------------------------------------------------------
   ⚠️ 为什么再开一套：套装是「卡片网格」、物品查询是「一行一件可展开」、
      专业配方是「三栏」。这一块是**图文卡**（上外观图 + 下属性清单），
      跟前三块都不一样；共用类名会把 _db_browser / _it_browser / _pf_browser 的判据搅浑。
   ⚠️ 配图 = assets/art/sod-*.jpg（8 个职业共 9 张）。**别挂 ?v=**（第 8b 步统一挂）。
   ⚠️ 牧师没有外观图（社区文章只给了 tooltip）⇒ `.cw-pic.is-icon`：
      放**游戏内真实图标**（`assets/icons/`，**不挂 ?v=**，全站图标口径）+ 一行
      「示意图标 · 无外观渲染图」。★ v91 那版是虚线空框，血染看了说
      「不要这么现实 / 很不专业」⇒ v92 换成图标。口径没变：图标**只作示意**，
      ⛔ 绝不允许看起来像"这件物品的外观"（同 .pf-noico / .it-noico 的道理）。
   ========================================================================== */
.cw{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:14px}
@media(max-width:700px){.cw{grid-template-columns:1fr}}

.cw-c{
  display:flex;flex-direction:column;min-width:0;
  background:linear-gradient(180deg,rgba(15,17,22,.92),rgba(10,12,16,.96));
  border:1px solid var(--frame);
  box-shadow:inset 0 1px 0 rgba(255,235,180,.05);
  transition:border-color .16s,box-shadow .16s;
}
.cw-c:hover{border-color:rgba(216,180,90,.42)}

/* 外观图：定高 + contain —— 素材横竖比差得多（132 ~ 900 px 高），
   不定高就会一行高一行矮，卡片参差不齐。 */
.cw-pic{
  height:152px;flex:none;display:flex;align-items:center;justify-content:center;
  padding:8px;border-bottom:1px solid rgba(216,180,90,.22);
  background:radial-gradient(120% 100% at 50% 0,rgba(216,180,90,.06),rgba(0,0,0,.34));
}
.cw-pic img{max-width:100%;max-height:100%;display:block}
/* 德鲁伊有两张（法系 / 物理，武器本身可互变）⇒ 并排两个，各让一半宽 */
.cw-pic.is-multi{gap:8px}
.cw-pic.is-multi img{max-width:calc(50% - 5px)}
/* 没有外观图的那张（牧师）：放一个**游戏内图标**当画面。
   ⚠️ 尺寸写死 96×96（图标母本 56×56，约 1.7 倍）—— 再大就糊了；
      上面 `.cw-pic img` 的 max-* 对它同样成立，撑不破图区。
   ⚠️ 图标**不挂 ?v=**：它属于全站图标体系（永久缓存），挂版本号等于每次升 VER 重传一遍。 */
.cw-pic.is-icon{flex-direction:column;gap:7px}
.cw-pic.is-icon img{
  width:96px;height:96px;flex:none;display:block;border-radius:9px;
  border:1px solid rgba(216,180,90,.4);
  box-shadow:0 0 0 1px rgba(0,0,0,.6),0 6px 20px rgba(0,0,0,.5);
}
/* ★ 这行小字是**免责**不是装饰 —— 「示意图标」得让人一眼看到。
   ⛔ 别删、别缩到看不见：那等于把"示意"偷换成"它长这样"。 */
.cw-pic.is-icon .cw-note{
  flex:none;font-size:11.4px;line-height:1.5;letter-spacing:.4px;color:#7f8791;text-align:center;
}

.cw-b{padding:12px 15px 14px;min-width:0}
.cw-b h3{
  display:flex;align-items:center;flex-wrap:wrap;gap:6px;
  margin:0 0 9px;font-size:15px;letter-spacing:.8px;color:#f2e6c8;
}
.cw-b h3 i{width:8px;height:8px;flex:none;border-radius:50%;background:var(--cc,#8b929d);
  box-shadow:0 0 6px var(--cc,rgba(139,146,157,.7))}
.cw-b h3 em{font-style:normal;color:var(--gold-hi)}
.cw-b h3 span{
  flex:none;padding:2px 8px;
  font-size:11px;font-weight:400;letter-spacing:.5px;color:#9aa1ac;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);
}

.cw-l{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px}
.cw-l li{
  position:relative;padding-left:11px;
  font-size:12.6px;line-height:1.72;color:#c3c9d2;
}
.cw-l li::before{content:"";position:absolute;left:0;top:8px;width:4px;height:4px;
  background:rgba(216,180,90,.6);transform:rotate(45deg)}
.cw-l li b{color:var(--gold-hi);font-weight:400}

/* 来源 / 免责 —— 与 .ts-src 同一套观感（数据挖掘内容得让人知道它"还不是官方的"）。
   ⚠️ 独立命名，别去改 sets.css 里的 .ts-src —— 那块已经搬去数据库页，两边各自演进。 */
.cw-src{
  margin-top:13px;font-size:11.8px;line-height:1.75;letter-spacing:.4px;
  color:var(--parch-3);
}
.cw-src b{font-weight:400;color:var(--gold)}

/* ============================================================================
   成就（2026-09-21 · 数据库页第六块）· 命名空间 ach-*
   ----------------------------------------------------------------------------
   形态照着社区成就页：大类导航（复用站上已有的 .gtabs / .gtab）+「只看传承点」
   开关 + 按子类分组的成就卡（图标 56×56 / 中文名 / 英文名 / 中文描述 / 目标列表）。
   ⚠️ 分组**默认全部收起**（本站硬规矩：列表型工具铺成两三屏会被否，判据是**版面占比**
      不是信息量）⇒ 收起态只留一行「组名 + 条数」，111 条一屏内放得下；
      js/achievements.js 在搜索/筛选命中时**自动展开**，不然用户会以为没搜到。
   ⚠️ 本页已有 it-* / pf-* / cw-* / db-* / tset 五套命名空间，这是第六套，别互串。
   ⚠️ 描述用 innerHTML 写入（脚本已 esc 一遍），所以这里别给 .ach-d 加 ::before 之类的装饰。
   ========================================================================== */

/* ---------- 工具条 ---------- */
.achm{margin-top:2px}
.ach-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 14px}
/* 「只看传承点」：按下时点亮金边（底子是 .db-btn，这里只覆盖状态色） */
.ach-lp.on{
  color:var(--gold-hi);border-color:rgba(216,180,90,.62);
  background:rgba(216,180,90,.08);
}
.ach-lp .n{margin-left:5px;font-size:12px;color:var(--gold-hi)}
.ach-lp:not(.on) .n{color:var(--parch-3)}
.ach-note{
  margin:0 0 16px;font-size:12.4px;line-height:1.82;letter-spacing:.3px;
  color:var(--parch-3);
}
.ach-note b{color:var(--gold-hi);font-weight:400}
.ach-note a{color:var(--gold);text-decoration:none;border-bottom:1px solid rgba(201,169,97,.35)}
.ach-note a:hover{color:var(--gold-hi);border-bottom-color:rgba(244,231,195,.6)}

/* ---------- 分组（<details>）---------- */
.ach-grp{
  border:1px solid var(--frame);border-radius:3px;
  background:rgba(255,255,255,.014);
  margin:0 0 9px;
}
.ach-grp>summary{
  display:flex;align-items:center;gap:9px;
  padding:11px 15px;cursor:pointer;list-style:none;
  font-size:13.4px;letter-spacing:.6px;color:var(--parch-2);
  transition:color .16s,background .16s;
}
.ach-grp>summary::-webkit-details-marker{display:none}
.ach-grp>summary:hover{color:var(--gold-hi);background:rgba(216,180,90,.045)}
.ach-grp>summary::before{
  content:"";flex:none;width:5px;height:5px;
  border-right:1px solid rgba(201,169,97,.75);border-bottom:1px solid rgba(201,169,97,.75);
  transform:rotate(-45deg);transition:transform .18s;margin-left:2px;
}
.ach-grp[open]>summary{color:var(--gold-hi);border-bottom:1px solid rgba(216,180,90,.16)}
.ach-grp[open]>summary::before{transform:rotate(45deg)}
.ach-grp>summary b{font-weight:400}
.ach-gn{margin-left:auto;flex:none;font-size:12px;letter-spacing:1px;color:var(--parch-3)}

/* ---------- 卡片 ---------- */
.ach-gb{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(336px,1fr));
  gap:9px;padding:12px 13px 14px;
}
.ach-c{
  display:flex;gap:11px;min-width:0;
  padding:10px 11px;border-radius:2px;
  background:rgba(255,255,255,.022);
  border:1px solid rgba(255,255,255,.05);
}
.ach-i{
  flex:none;width:56px;height:56px;object-fit:cover;
  border:1px solid rgba(216,180,90,.28);border-radius:2px;
  background:rgba(0,0,0,.28);
}
.ach-b{flex:1;min-width:0}   /* ⚠️ flex 子项要能缩，否则长描述会把它顶宽 */
.ach-hd{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap}
.ach-t{font-size:13.6px;font-weight:400;letter-spacing:.5px;color:var(--gold-hi);line-height:1.35}
.ach-tag{
  flex:none;font-size:10.4px;line-height:1.5;letter-spacing:.6px;padding:1px 6px;
  color:var(--gold-hi);border:1px solid rgba(216,180,90,.42);border-radius:2px;
  background:rgba(216,180,90,.09);
}
.ach-pt{
  flex:none;font-size:10.4px;letter-spacing:.4px;padding:1px 6px;border-radius:2px;
  color:#c8b98a;border:1px solid rgba(200,185,138,.24);
}
.ach-untr{
  flex:none;font-size:10.4px;letter-spacing:.4px;padding:1px 6px;border-radius:2px;
  color:#8d949e;border:1px dashed rgba(141,148,158,.32);
}
.ach-e{
  display:block;margin-top:3px;
  font-size:11.4px;letter-spacing:.3px;color:#7f8792;font-style:italic;
}
.ach-d{
  margin:5px 0 0;font-size:12.5px;line-height:1.72;color:#c3c9d2;
}
.ach-g{margin-top:7px}
.ach-g>summary{
  cursor:pointer;list-style:none;
  font-size:11.6px;letter-spacing:.5px;color:#9aa1ac;
}
.ach-g>summary::-webkit-details-marker{display:none}
.ach-g>summary::before{content:"▸ ";color:rgba(201,169,97,.7)}
.ach-g[open]>summary::before{content:"▾ "}
.ach-g>summary:hover{color:var(--gold-hi)}
.ach-gl{
  list-style:none;margin:7px 0 0;padding:0 0 0 2px;
  display:flex;flex-direction:column;gap:4px;
}
.ach-gl li{
  position:relative;padding-left:11px;
  font-size:12px;line-height:1.66;color:#b3b9c3;
}
.ach-gl li::before{
  content:"";position:absolute;left:0;top:7px;width:4px;height:4px;
  background:rgba(216,180,90,.55);transform:rotate(45deg);
}
.ach-gl li i{margin-left:6px;font-style:italic;font-size:11px;color:#767d88}

.ach-empty{
  margin:0;padding:22px 4px;font-size:13px;line-height:1.9;
  color:var(--parch-3);text-align:center;
}
.ach-empty b{color:var(--gold-hi);font-weight:400}

/* 来源 / 免责 —— 与 .cw-src / .ts-src 同一套观感 */
.ach-src{
  margin-top:13px;font-size:11.8px;line-height:1.75;letter-spacing:.4px;
  color:var(--parch-3);
}
.ach-src b{font-weight:400;color:var(--gold)}

@media(max-width:760px){
  .ach-gb{grid-template-columns:1fr;padding:10px}
  .ach-i{width:48px;height:48px}
}


/* ============================================================================
   商人青睐兑换库（2026-09-22 血染新增）—— 独立一套 kov- 命名空间（本页第六套）
   ----------------------------------------------------------------------------
   ★ 位置：紧跟在「专业配方」下面（站长：「就在专业配方下面」）。
   ★ 命名空间必须独立：本页已有 it- / pf- / cw- / db- / tset / ach- 六套，
     再共用类名一定会重演 css/wow.css 那条 .slot 的老账（别人没声明的属性照旧生效，
     肉眼看整页只觉得"多了条横杠"）。
   ⚠️ 视觉令牌全部对齐 .pf-*（边框 var(--frame)、底 rgba(15,17,22,…)、
      金色强调 var(--gold)/var(--gold-hi)、标题字 var(--f-title)）——
      两块挨着放，配色不齐一眼就看得出来。
   ⚠️ 四档色（学/黄/绿/灰）与 .pf-mt .pf-tk 同一组值，**故意重复**：
      两块分属两套命名空间，共用会让改一处动两处，且哪天只改一边就露馅。
   ============================================================================ */

.kovm{min-width:0}

/* 「青睐」价签：这一块的主角，比别处都亮一档 */
.kov-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 16px}
.kov-tab{
  cursor:pointer;padding:8px 14px;
  font-family:var(--f-body);font-size:13px;letter-spacing:.6px;color:#b6bcc6;
  background:rgba(14,16,20,.86);border:1px solid var(--frame);
  transition:.16s;
}
.kov-tab:hover{color:var(--gold-hi);border-color:rgba(216,180,90,.42)}
.kov-tab.on{
  color:#f6ecd4;border-color:rgba(216,180,90,.72);
  background:linear-gradient(180deg,rgba(216,180,90,.20),rgba(216,180,90,.06));
  box-shadow:inset 0 1px 0 rgba(255,235,180,.16);
}
.kov-tab b{font-weight:400;margin-left:6px;font-size:11.2px;color:#8b929d}
.kov-tab.on b{color:#e5d4a6}

.kov-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 12px}
.kov-q{
  flex:1 1 260px;min-width:0;padding:9px 13px;
  font-family:var(--f-body);font-size:12.8px;color:#e7e2d4;
  background:rgba(14,16,20,.86);border:1px solid var(--frame);
  transition:.16s;
}
.kov-q::placeholder{color:#6f7681}
.kov-q:focus{outline:none;border-color:rgba(216,180,90,.62);background:rgba(20,22,27,.94)}
.kov-cnt{font-size:12.5px;letter-spacing:1px;color:var(--parch-3)}
.kov-cnt b{color:var(--gold-hi)}

.kov-list{display:grid;grid-template-columns:1fr;gap:8px;align-items:start}
@media(min-width:1180px){.kov-list{grid-template-columns:1fr 1fr}}

.kov-c{
  position:relative;min-width:0;
  background:linear-gradient(180deg,rgba(15,17,22,.92),rgba(10,12,16,.96));
  border:1px solid var(--frame);
  box-shadow:inset 0 1px 0 rgba(255,235,180,.05);
  transition:border-color .16s,box-shadow .16s;
}
.kov-c:hover{border-color:rgba(216,180,90,.4)}
.kov-c.open{border-color:rgba(216,180,90,.55);box-shadow:inset 0 1px 0 rgba(255,235,180,.09)}
.kov-h{
  cursor:pointer;width:100%;display:flex;align-items:center;gap:12px;
  padding:10px 14px;text-align:left;
  background:none;border:0;color:inherit;font:inherit;
}
.kov-h:focus-visible{outline:2px solid rgba(216,180,90,.7);outline-offset:-2px}
.kov-ico{
  flex:none;width:36px;height:36px;display:block;
  border:1px solid rgba(216,180,90,.34);
  background:#0a0b0e;
}
.kov-noico{
  background:repeating-linear-gradient(45deg,rgba(255,255,255,.045),rgba(255,255,255,.045) 4px,transparent 4px,transparent 8px);
  border-style:dashed;border-color:rgba(255,255,255,.14);
}
.kov-nm{flex:1;min-width:0}
.kov-zh{
  display:block;font-family:var(--f-title);font-size:14.4px;letter-spacing:.7px;
  line-height:1.35;word-break:break-word;
}
.kov-mt{display:flex;flex-wrap:wrap;gap:5px;margin-top:3px}
.kov-mt span{
  display:inline-flex;align-items:center;gap:4px;
  padding:1px 7px;font-size:10.8px;letter-spacing:.4px;color:#b9bfc8;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);
}
.kov-mt span b{color:#e8dfc6}
/* 价签：唯一带金底的一枚 —— 一屏里要让眼睛先落到"多少青睐" */
.kov-mt .kov-cost{
  color:#f6e6bd;background:rgba(216,180,90,.16);
  border-color:rgba(216,180,90,.46);
}
.kov-mt .kov-cost b{color:#ffe9b0}
.kov-mt span.kov-vn{color:#9aa1ab}
.kov-mt span.kov-sd{color:#c9a86a;border-color:rgba(216,180,90,.34);background:rgba(216,180,90,.07)}
.kov-mt span.kov-bdg{color:#8f99a6}
/* 「暂译」标记（2026-09-22 v140）：名字是**我们自己按英文名直译**的，不是官方译名。
   暖黄，跟「仅联盟/仅部落」那枚的暗金错开（那枚是金的底、这枚只有字色与边框），
   免得两枚黄角标混成一种意思。⛔ 别拿它当普通角标随手关掉：这是免责标记。 */
.kov-mt span.kov-mtz{
  color:#e2c98a;border-color:rgba(216,180,90,.30);background:rgba(216,180,90,.09);
}
.kov-mt .kov-tk{display:inline-flex;align-items:center;gap:6px}
.kov-mt .kov-tk b{font-weight:400}
.kov-mt .kov-tk b.t1{color:#ff8040}
.kov-mt .kov-tk b.t2{color:#fbbd24}
.kov-mt .kov-tk b.t3{color:#3fb950}
.kov-mt .kov-tk b.t4{color:#8f99a6}

.kov-b{padding:2px 14px 13px;border-top:1px solid rgba(216,180,90,.22)}
.kov-bh{margin:10px 0 6px;font-size:11.6px;letter-spacing:1px;color:#8b929d}
.kov-mats{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:1fr;gap:4px;
}
@media(min-width:520px){.kov-mats{grid-template-columns:1fr 1fr}}
.kov-mats li{display:flex;align-items:center;gap:9px;min-width:0;font-size:12.6px;color:#c8ced7}
.kov-mats img,.kov-mico{
  flex:none;width:24px;height:24px;display:block;
  border:1px solid rgba(216,180,90,.28);background:#0a0b0e;
}
.kov-mats img.kov-noico,.kov-mico.kov-noico{
  border-style:dashed;border-color:rgba(255,255,255,.14);
}
.kov-mats span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kov-mats b{flex:none;font-weight:400;color:var(--gold-hi)}
.kov-mats li.kov-miss span{color:#8b929d}
.kov-prod{
  display:flex;align-items:center;gap:9px;margin-top:11px;
  font-size:12.8px;letter-spacing:.3px;color:#c8ced7;
}
.kov-prod img,.kov-pico{
  flex:none;width:28px;height:28px;display:block;
  border:1px solid rgba(216,180,90,.28);background:#0a0b0e;
}
.kov-prod em{font-style:normal;font-size:11.2px;color:#8b929d}
.kov-sub{margin:11px 0 0;font-size:11.6px;line-height:1.7;color:#8b929d;letter-spacing:.3px}
.kov-sub b{color:#d7cba6}
.kov-go{
  cursor:pointer;margin-top:9px;padding:6px 12px;
  font-family:var(--f-body);font-size:11.8px;letter-spacing:.5px;color:#c8b98e;
  background:rgba(216,180,90,.08);border:1px solid rgba(216,180,90,.34);
  transition:.16s;
}
.kov-go:hover{color:var(--gold-hi);border-color:rgba(216,180,90,.62)}

.kov-pg{display:flex;align-items:center;justify-content:center;gap:14px;margin:18px 0 0}
.kov-pgi{font-size:12.8px;letter-spacing:1px;color:var(--parch-3);white-space:nowrap}

@media(max-width:520px){
  .kov-h{gap:9px;padding:9px 11px}
  .kov-zh{font-size:13.4px}
}

/* 机制说明：三步流程 + 关键口径。⚠️ 用 ol 不用 div 堆 —— 三段有先后顺序，
   ⛔ 别做成三张并排卡（并排就没有"先上缴、再兑换"的次序感了）。 */
.kov-flow{
  list-style:none;margin:0 0 16px;padding:12px 15px;
  display:grid;grid-template-columns:1fr;gap:9px;
  background:rgba(10,12,16,.72);border:1px solid var(--frame);
}
@media(min-width:760px){.kov-flow{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}}
.kov-flow li{display:flex;gap:10px;align-items:flex-start;min-width:0}
.kov-flow i{
  flex:none;width:20px;height:20px;display:grid;place-items:center;
  font-style:normal;font-size:11.4px;color:#0d0f13;
  background:linear-gradient(180deg,#e8cf8a,#c9a24e);
}
.kov-flow b{display:block;font-weight:400;font-size:13px;letter-spacing:.5px;color:#e8dfc6}
.kov-flow span{display:block;margin-top:3px;font-size:11.8px;line-height:1.72;color:#a8aeb8}
.kov-flow span em{font-style:normal;color:var(--gold-hi)}

/* 脚注 */
.kov-src{
  margin-top:13px;font-size:11.8px;line-height:1.75;letter-spacing:.4px;
  color:var(--parch-3);
}
.kov-src b{font-weight:400;color:var(--gold)}

/* ============================================================================
   共用「物品浮层」（2026-09-22 v136 血染新增）—— 独立一套 wtip- 命名空间
   ----------------------------------------------------------------------------
   ⚠️ 本页已有 it- / pf- / cw- / db- / kov- / ach- / tset 七套命名空间，
      再共用类名一定重演 css/wow.css 那条 .slot 的老账（别人的声明照旧生效，
      肉眼看只觉得"多了条横线"）。所以浮层自己一套 wtip-。
   ⚠️ 行序照**游戏内**（使用 → 部位 → 物品等级 → 伤害 → 护甲 → 属性 → …），
      颜色也照游戏语义：能用的一次性效果是绿字、物品等级是金字、ID 是灰字。
      ⛔ 别为了"统一好看"把绿字改成正文色 —— 那不是装饰，是游戏里的信息分层。
   ⚠️ 浮层**必须** pointer-events:auto：它内部还有材料图标可以继续悬停看
      （设成 none 的话鼠标一碰它就穿过去、浮层当场消失，材料永远点不开）。
   ============================================================================ */

.wtip{
  position:fixed;left:0;top:0;z-index:920;
  max-width:346px;min-width:212px;
  padding:11px 13px 9px;
  background:linear-gradient(180deg,rgba(16,18,23,.985),rgba(9,10,14,.992));
  border:1px solid rgba(216,180,90,.46);
  box-shadow:0 16px 40px rgba(0,0,0,.66),inset 0 1px 0 rgba(255,235,180,.07);
  font-family:var(--f-body);font-size:12.8px;line-height:1.6;color:#d7dbe2;
  visibility:hidden;opacity:0;
  transition:opacity .1s linear;
  pointer-events:auto;
}
.wtip.on{visibility:visible;opacity:1}
.wtip-in{display:block}

.wtip-nm{
  font-family:var(--f-title);font-size:14.6px;letter-spacing:.6px;line-height:1.36;
  word-break:break-word;margin-bottom:1px;
}
.wtip-tp{color:#c6cbd4;letter-spacing:.3px}
.wtip-il{color:#e8c86a}
.wtip-il b{font-weight:400}

/* 「暂译」标（2026-09-23 v142）：浮层里凡是**我们译的**（客户端确实没给中文）都要挂这枚。
   暖黄，与列表行的 .it-mt、商人青睐的 .kov-mtz **同色同形**（三处一枚标记一个意思，
   ⛔ 别在这儿换颜色：颜色一变就成了"另一种标记"）。
   这是**免责标记，不是装饰** —— 摘了就等于我们在冒充官方译名。 */
.wtip-mt{
  display:inline-block;margin-left:5px;padding:0 5px;border-radius:3px;
  font-family:var(--f-body,inherit);font-size:10.6px;letter-spacing:.5px;
  vertical-align:1px;white-space:nowrap;
  color:#e2c98a;border:1px solid rgba(216,180,90,.30);background:rgba(216,180,90,.09);
}

/* 伤害行：左边区间、右边速度（游戏里就是这么分两头的，用 flex 而不是空格怼） */
.wtip-dmg{display:flex;justify-content:space-between;gap:14px;color:#eceff4}
.wtip-dmg span{color:#a8aeb8}
.wtip-dps{color:#8f97a2;font-size:12px}
.wtip-dt{color:#8f97a2;font-size:12px}
.wtip-arm{color:#eceff4}
.wtip-res{color:#c6cbd4}
.wtip-st{color:#eceff4}
/* 「使用：/装备：/击中时可能：」= 游戏里的绿字效果 */
.wtip-use,.wtip-fx{color:#1eff00}
.wtip-set{color:#e8c86a}
.wtip-drop{margin-top:3px;color:#b9bfc8;font-size:12.2px}
.wtip-drop span{color:#8f97a2;margin-right:6px}
.wtip-drop em{
  font-style:normal;margin-left:6px;padding:0 5px;font-size:10.6px;letter-spacing:.4px;
  color:#8f97a2;border:1px solid rgba(255,255,255,.13);
}
.wtip-req{color:#eceff4;margin-top:3px}
.wtip-req b{font-weight:400}
.wtip-bind{color:#c6cbd4}

/* 底部：物品 id + 数值来源角标 + 页内说明 */
.wtip-id{
  display:flex;align-items:center;gap:7px;flex-wrap:wrap;
  margin-top:8px;padding-top:7px;
  border-top:1px solid rgba(216,180,90,.2);
  font-size:11.4px;letter-spacing:.4px;color:#8f97a2;
}
.wtip-id em{
  font-style:normal;padding:0 5px;
  color:#c9a86a;border:1px solid rgba(216,180,90,.32);background:rgba(216,180,90,.07);
}
.wtip-id i{font-style:normal;color:#8f97a2}

/* 未收录 / 无值的说明：虚线框，一眼看出是"讲清楚"不是"数据行" */
.wtip-none{
  margin-top:5px;padding:5px 8px;font-size:11.8px;line-height:1.66;color:#98a0ab;
  border:1px dashed rgba(255,255,255,.16);
}
.wtip-none b{font-weight:400;color:#c6cbd4}

/* 小节标签（材料 / 制造）—— 与 .kov-bh 同一套语义，但**故意不复用**：
   浮层会出现在好几种底色上，共用会让"只改浮层"变成"连专业配方一起改" */
.wtip-lab{
  position:relative;margin:9px 0 6px;font-size:11.4px;letter-spacing:1.4px;color:#c9a86a;
}
.wtip-lab::after{
  content:"";position:absolute;left:34px;right:0;top:50%;height:1px;
  background:linear-gradient(90deg,rgba(216,180,90,.28),transparent);
}

.wtip-mats{display:flex;flex-wrap:wrap;gap:6px}
.wtip-mat{
  display:inline-flex;align-items:center;gap:6px;padding:2px 7px 2px 3px;
  background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.07);
  font-size:11.8px;color:#c8ced7;max-width:100%;
}
.wtip-mat img,.wtip-mico{
  flex:none;width:22px;height:22px;display:block;
  border:1px solid rgba(216,180,90,.3);background:#0a0b0e;
}
.wtip-mico{
  background:repeating-linear-gradient(45deg,rgba(255,255,255,.05),rgba(255,255,255,.05) 4px,transparent 4px,transparent 8px);
  border-style:dashed;border-color:rgba(255,255,255,.14);
}
.wtip-mat b{font-weight:400;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:150px}
.wtip-mat i{font-style:normal;color:#e8c86a}

/* 「制造」后面嵌的成品整块：左侧一道金线表示从属关系，⛔ 别用缩进 0 的方式平铺 */
.wtip-prod{
  margin-top:2px;padding:7px 0 2px 10px;
  border-left:2px solid rgba(216,180,90,.34);
}
.wtip-inner{padding:0}

/* 物品查询展开卡：伤害 / 护甲 / 抗性 / 数值来源（2026-09-22 v136）
   ⚠️ 与属性行（.it-st li）同一条左对齐线，**只靠 `.k` 那一段的宽度对齐** ——
      ⛔ 别给这几行单独加缩进或边框，一扫列表就会觉得"这几行是另一块东西"。 */
.it-dmg,.it-arm,.it-res{color:#d7dbe2}
.it-dmg .k,.it-arm .k,.it-res .k{
  display:inline-block;min-width:34px;color:var(--gold);
}
.it-sp{color:#8f97a2;font-size:11.8px;margin-left:6px}
/* 数值来源：贴着属性行下面的一行小字。⛔ 不能省 —— 三条来源可信度不同，
   不标出来访客会把"我们推算的"也当成客户端挖出来的。 */
.it-numsrc{margin-top:2px;font-size:11.6px;color:#8f97a2;letter-spacing:.2px}
.it-numsrc b{font-weight:400;color:#c9a86a}

/* ============================================================================
   分组按需加载的「载入中」提示（2026-09-23 v144 · 配合 js/lazy.js）
   ----------------------------------------------------------------------------
   为什么用 `<html>` 上的属性 + `::after`，而不是往容器里塞个占位节点：
     · 各渲染器对容器的处理**不统一** —— `js/items.js` 直接覆盖 `#itList` 的
       innerHTML，而 `js/prof.js` / `js/achievements.js` 是往**子元素**里写；
       占位节点会不会被清掉、什么时候被清掉，每个板块都得单独想一遍。
     · 占位节点还会被闸门数进"容器子节点数"里，逼着每套闸门都改判据。
     · 属性选择器**零 DOM 副作用**：加载完由 `js/lazy.js` 把属性摘掉，提示自动消失。
   ⛔ 别改成往容器 inject 元素 —— 那样每加一个渲染器都要重推一遍去留时机。
   ⚠️ 下面第一条通用规则**只给外观、不给 content**：没有 content 的伪元素不会生成盒子，
      所以某个板块没在 pending 列表里时，它一个像素都不会出现。
   ★ v153（2026-09-24 血染：「加载过程中没有任何提示，可否提示 加载中，请等待，做好看点」）：
      升级成「转圈 + 金字」—— ::before 画 spinner（纯 CSS border 圈圈），
      ::after 文案金色加字距；五个容器的 ::before 此前**零占用**（改前 grep 过全份 css）。
   ★★ v155（2026-09-24 血染：「网站内容都加载出来了，还在持续转圈，不消失」）：
      ::before / ::after 的选择器从 `html[data-lz-pending]`（**任意**组 pending 都命中）
      收紧成 `html[data-lz-pending~="组名"]`（只认**自己这组**）——
      否则访客看着「物品查询」（items 已加载完），而下面的
      prof / kov / ach / sets 还在懒加载队列里 ⇒ #itList 的圈圈一直转到天荒地老。
      （v153 首版就是这个形状 ::after 才没翻车 —— ::before 漏了同样的组名限定。）
   ========================================================================== */
html[data-lz-pending] #itList::after,
html[data-lz-pending] #pfList::after,
html[data-lz-pending] #kovList::after,
html[data-lz-pending] #achBody::after,
html[data-lz-pending] #dbBody::after{
  display:block;padding:2px 4px 34px;text-align:center;
  color:#d9b969;font-size:13.5px;letter-spacing:1.1px;
  text-shadow:0 0 12px rgba(216,180,90,.35);
}
/* ★ v155：spinner 只在自己这组 pending 时出现（组名限定，见上版本注）。 */
html[data-lz-pending~="items"] #itList::before,
html[data-lz-pending~="prof"] #pfList::before,
html[data-lz-pending~="kov"] #kovList::before,
html[data-lz-pending~="ach"] #achBody::before,
html[data-lz-pending~="sets"] #dbBody::before{
  content:"";display:block;width:26px;height:26px;margin:32px auto 10px;
  border:2px solid rgba(216,180,90,.22);border-top-color:#e8c874;border-radius:50%;
  animation:wflzspin .9s linear infinite;
}
@keyframes wflzspin{to{transform:rotate(360deg)}}
/* ★ v157：容器转圈同样是功能指示，不做减动效豁免（同 wow.css wfvspin 口径） */
html[data-lz-pending~="items"] #itList::after{content:"物品数据载入中，请稍候…"}
html[data-lz-pending~="prof"] #pfList::after{content:"配方数据载入中，请稍候…"}
html[data-lz-pending~="kov"] #kovList::after{content:"商人青睐数据载入中，请稍候…"}
html[data-lz-pending~="ach"] #achBody::after{content:"成就数据载入中，请稍候…"}
html[data-lz-pending~="sets"] #dbBody::after{content:"套装数据载入中，请稍候…"}

/* 失败态：某个数据文件 404/网络断了。⛔ 别静默 —— 空白板块会让访客以为
   "这个库就是空的"，正是本站吃过不止一次的"安静降级"型事故。 */
html[data-lz-fail] #itList::after,
html[data-lz-fail] #pfList::after,
html[data-lz-fail] #kovList::after,
html[data-lz-fail] #achBody::after,
html[data-lz-fail] #dbBody::after{
  display:block;padding:30px 4px 34px;text-align:center;
  color:#c98a6a;font-size:13px;letter-spacing:.7px;
}
html[data-lz-fail] #itList::after,
html[data-lz-fail] #pfList::after,
html[data-lz-fail] #kovList::after,
html[data-lz-fail] #achBody::after,
html[data-lz-fail] #dbBody::after{content:"数据没加载出来 —— 刷新本页重试"}

/* ==========================================================================
   专业升级清单 pl-（v188 重构，2026-09-28）—— 1-300 全专业升级路线 + 购物清单
   位置：紧跟「专业配方」下面（站长：「专业配方 的下面一个区域」）。
   v188 改版（站长：「这一块做好看点…每个专业做成 展开/收回…做的物品要有
   物品图标和属性描述…抄他的…225-300 也要全部显示」）：
   · tab 页签 → 专业手风琴 .pl-acc/.pl-p（展开/收回）；
   · 步骤行紧凑化：区间+难度条 | 物品图标(品质描边)+名称+说明行 | ~N次 | 材料图标(角标)；
   · 品质描边 q0..q5 沿用魔兽色（灰白绿蓝紫橙）；
   · 专家级 225-300（.later）与 Beta 上限横幅（.pl-capnote）全部上屏。
   图标文件 assets/prof/icons/（内容永不变，不参与 ?h=）。
   ========================================================================== */
.plm{margin-top:4px}
.pl-acc{display:flex;flex-direction:column;gap:10px;margin-top:10px}
.pl-p{
  border:1px solid rgba(216,180,90,.22);border-radius:10px;
  background:rgba(10,12,16,.55);overflow:hidden}
.pl-p.open{border-color:rgba(216,180,90,.45)}
.pl-ph{
  display:flex;align-items:center;gap:12px;width:100%;
  padding:10px 14px;cursor:pointer;text-align:left;
  background:linear-gradient(90deg,rgba(216,180,90,.10),rgba(216,180,90,.02) 65%);
  border:0;font:inherit;color:inherit}
.pl-ph:hover{background:rgba(216,180,90,.16)}
.pl-pi{
  width:38px;height:38px;border-radius:6px;flex:0 0 auto;
  border:1px solid rgba(216,180,90,.5);background:#0a0c10;padding:3px}
.pl-pn{font-family:var(--f-title);font-size:15.5px;letter-spacing:1px;color:#e8c874}
.pl-pm{font-size:11.5px;color:#8b929d;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pl-pa{
  margin-left:auto;flex:0 0 auto;width:9px;height:9px;
  border-right:2px solid #b9a26a;border-bottom:2px solid #b9a26a;
  transform:rotate(45deg);transition:transform .18s ease;margin-top:-3px}
.pl-p.open .pl-pa{transform:rotate(225deg);margin-top:3px}
.pl-pb{display:none;padding:4px 14px 14px;border-top:1px solid rgba(216,180,90,.18)}
.pl-p.open .pl-pb{display:block}
.pl-head h3{
  font-family:var(--f-title);font-size:16px;letter-spacing:1px;color:var(--gold);
  margin:10px 0 6px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pl-cap{
  font-size:11.5px;letter-spacing:.5px;color:#e8b34b;background:rgba(232,179,75,.10);
  border:1px solid rgba(232,179,75,.35);border-radius:999px;padding:2px 10px;font-weight:400}
.pl-head p{margin:0 0 10px;font-size:12px;color:#9aa3b2;line-height:1.7}
.pl-capnote{
  margin:0 0 10px;padding:8px 12px;border-radius:6px;font-size:12px;line-height:1.65;
  color:#d9c79a;background:rgba(216,180,90,.08);border:1px dashed rgba(216,180,90,.4)}
.pl-capnote b{font-family:var(--f-title);color:#e8b34b;margin-right:8px;letter-spacing:.5px}
.pl-rank{
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  margin:14px 0 0;padding:6px 12px;border-radius:6px;
  background:linear-gradient(90deg,rgba(216,180,90,.12),rgba(216,180,90,.02) 70%);
  border-left:3px solid var(--gold)}
.pl-rank.later{border-left-color:#7d8aa0;background:linear-gradient(90deg,rgba(125,138,160,.12),rgba(125,138,160,.02) 70%)}
.pl-rank b{font-family:var(--f-title);font-size:13.5px;letter-spacing:1px;color:#e8c874}
.pl-rank.later b{color:#aeb9cc}
.pl-rank span{font-size:11.5px;color:#9aa3b2}
.pl-step{
  display:grid;grid-template-columns:76px minmax(0,1fr) auto auto;
  gap:3px 14px;align-items:center;
  padding:8px 4px 8px 12px;border-bottom:1px solid rgba(255,255,255,.05)}
.pl-step:last-of-type{border-bottom:0}
.pl-step.later{background:rgba(125,138,160,.05)}
.pl-rg{display:flex;flex-direction:column;gap:4px;min-width:0}
.pl-rg b{
  font-family:var(--f-title);font-size:12.5px;letter-spacing:.3px;color:#e8c874;white-space:nowrap}
.pl-bar{
  position:relative;display:block;height:4px;border-radius:2px;
  background:rgba(255,255,255,.08);overflow:hidden}
.pl-bar i{
  position:absolute;top:0;bottom:0;border-radius:2px;
  background:linear-gradient(90deg,#b48a3c,#e8c874)}
.pl-bar em{
  position:absolute;top:-1px;bottom:-1px;width:2px;background:rgba(255,255,255,.55)}
.pl-it{display:flex;align-items:flex-start;gap:10px;min-width:0}
.pl-ic{
  width:36px;height:36px;flex:0 0 auto;border-radius:5px;padding:2px;
  background:#0a0c10;border:2px solid #c8cdd6;object-fit:cover}
.pl-ic.q0{border-color:#9d9d9d}
.pl-ic.q1{border-color:#cfd4dc}
.pl-ic.q2{border-color:#3ddc63}
.pl-ic.q3{border-color:#4a90dd}
.pl-ic.q4{border-color:#b04ad8}
.pl-ic.q5{border-color:#ff8a3c}
.pl-tx{display:flex;flex-direction:column;gap:1px;min-width:0}
.pl-tx b{font-size:13px;color:#f0a93c;font-weight:600;line-height:1.45}
.pl-tx small{font-size:11px;color:#8b929d}
.pl-tip{display:flex;flex-direction:column;gap:0;margin-top:2px}
.pl-tip span{font-size:11.5px;line-height:1.5}
.tl-p{color:#a9b0ba}
.tl-g{color:#5dd879}
.tl-m{color:#7a828d}
.tl-q{color:#4a90dd}
.pl-keep{font-style:normal;font-size:11.5px;color:#d8a24a}
.pl-ct{white-space:nowrap;text-align:right;align-self:center}
.pl-ct b{font-family:var(--f-title);font-size:14.5px;color:#e8c874}
.pl-ct i{font-style:normal;font-size:11px;color:#8b929d;margin-left:2px}
.pl-mats{display:flex;flex-wrap:wrap;gap:6px;align-items:center;justify-content:flex-end}
.pl-mat{position:relative;display:inline-flex}
.pl-mat img{
  width:28px;height:28px;border-radius:4px;padding:1px;background:#0a0c10;
  border:1.5px solid #cfd4dc;object-fit:cover}
.pl-mat img.q0{border-color:#9d9d9d}
.pl-mat img.q1{border-color:#cfd4dc}
.pl-mat img.q2{border-color:#3ddc63}
.pl-mat img.q3{border-color:#4a90dd}
.pl-mat img.q4{border-color:#b04ad8}
.pl-mat img.q5{border-color:#ff8a3c}
.pl-mat b{
  position:absolute;right:-5px;bottom:-5px;min-width:14px;height:14px;
  border-radius:7px;padding:0 3px;display:flex;align-items:center;justify-content:center;
  font-size:10px;font-weight:600;color:#0d0e12;background:#e8c874;
  border:1px solid rgba(0,0,0,.5)}
.pl-shop{margin:14px 0 0;border:1px solid rgba(216,180,90,.28);border-radius:8px;overflow:hidden}
.pl-shop summary{
  list-style:none;cursor:pointer;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  padding:10px 14px;background:rgba(216,180,90,.07)}
.pl-shop summary::-webkit-details-marker{display:none}
.pl-shop summary b{font-family:var(--f-title);font-size:14px;letter-spacing:1px;color:#e8c874}
.pl-shop summary span{font-size:12px;color:#9aa3b2}
.pl-shop summary em{
  font-style:normal;margin-left:auto;font-size:11.5px;color:#8b929d;white-space:nowrap}
.pl-shop[open] summary em::after{content:" ▲"}
.pl-shop summary em::after{content:" ▼"}
.pl-shg{padding:10px 14px;border-top:1px solid rgba(255,255,255,.05)}
.pl-shg h4{margin:0 0 8px;font-size:12.5px;color:#c8cdd6}
.pl-shg h4 small{font-weight:400;font-size:11px;color:#8b929d;margin-left:8px}
/* v189 购物清单条目：图标(品质描边) + 名称 + 数量（对标上游数据源 lv-rows） */
.pl-rows{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(165px,1fr));gap:4px 16px}
.pl-rows li{display:flex;align-items:center;gap:8px;padding:3px 0;min-width:0}
.pl-rows img{
  width:26px;height:26px;flex:0 0 auto;border-radius:4px;padding:1px;
  background:#0a0c10;border:1.5px solid #cfd4dc;object-fit:cover}
.pl-rows img.q0{border-color:#9d9d9d}
.pl-rows img.q1{border-color:#cfd4dc}
.pl-rows img.q2{border-color:#3ddc63}
.pl-rows img.q3{border-color:#4a90dd}
.pl-rows img.q4{border-color:#b04ad8}
.pl-rows img.q5{border-color:#ff8a3c}
.pl-rows span{
  font-size:12.5px;color:#cfd4dc;min-width:0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.pl-rows b{margin-left:auto;font-family:var(--f-title);font-size:13px;color:#e8c874}
/* 225-300 那份清单：蓝灰弱化（对应路线 .later 的口径） */
.pl-shop-later{border-color:rgba(125,138,160,.35)}
.pl-shop-later summary{background:rgba(125,138,160,.08)}
.pl-shop-later summary b{color:#aeb9cc}
.pl-src{margin:12px 0 0;font-size:11.5px;color:#6f7681;line-height:1.7}
@media(max-width:860px){
  .pl-pm{display:none}
}
@media(max-width:720px){
  .pl-step{grid-template-columns:64px minmax(0,1fr);row-gap:6px}
  .pl-ct{grid-column:1;grid-row:2;text-align:left;align-self:start}
  .pl-mats{grid-column:2;grid-row:2;justify-content:flex-start}
}