/* 剑网3 体服 · 藏剑配装器 —— 浅色主题 */

:root {
  --bg:        #ffffff;
  --bg2:       #ffffff;
  --bg3:       #f7f8fa;
  --line:      #e3e6ea;
  --line2:     #cfd5dd;
  --fg:        #23282f;
  --fg-dim:    #5b646f;
  --fg-dim2:   #8a929c;
  --accent:    #b07d18;   /* 藏剑: 剑器的金色。浅底上加深, 保证对比度 */
  --accent2:   #8f6410;
  --good:      #2f9e5f;
  --warn:      #c9741f;
  --sel:       #fdf6e6;
  --shadow:    0 10px 30px rgba(20, 30, 50, .16);
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
  font: 13px/1.5 "Microsoft YaHei", "PingFang SC", "Segoe UI", sans-serif;
}

/* ---------------- 顶栏 ---------------- */
/* 背景/描边通栏, 内容与下面的内容块对齐(v0.24.5: 从"居中"改成"左 gap"; v0.28.0: gap 50 → 250)。
   右侧留白取 max(18, 窗口 − gap − 1300), 这样右端的按钮仍然和内容块的右边缘对齐。 */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  padding: 12px max(18px, calc(100vw - var(--pagegap) - var(--maxw))) 12px var(--pagegap);
  background: linear-gradient(180deg, #ffffff, #fbfcfd);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 30;
}
.topbar h1 { margin: 0; font-size: 19px; font-weight: 600; letter-spacing: .5px; }
.topbar h1 .sub { font-size: 13px; color: var(--fg-dim); font-weight: 400; margin-left: 8px; }
/* 版本标识: 软件版本 + 数据版本。数据版本很重要 —— 玩家说「数值不对」时先看它。 */
.topbar h1 .buildtag {
  font-size: 11.5px; font-weight: 400; color: var(--fg-dim2);
  margin-left: 10px; padding: 1px 7px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--bg3);
  white-space: nowrap; cursor: help;
}
.topbar-actions { display: flex; gap: 8px; }

.btn {
  border: 1px solid var(--line2); background: #fff; color: var(--fg);
  padding: 7px 16px; border-radius: 5px; cursor: pointer; font-size: 13.5px;
  font-family: inherit;
}
.btn:hover { background: #eef1f5; border-color: var(--accent); color: var(--accent2); }
.btn-ghost { background: transparent; }
/* 金色主按钮: 分享链接(最常用的对外动作, 让它显眼一点) */
.btn-gold { border-color: var(--accent); background: var(--accent); color: #fff; font-weight: 600; }
.btn-gold:hover { background: var(--accent2); border-color: var(--accent2); color: #fff; }

/* ---------------- (实战增益效果 v0.15.0 已删除) ----------------
   原来这里有一整块 .buffbar / .buffbox / .bgrp / .blab / .bsel2 的样式。
   表格还在: data\buffs.js 与 tools\Export-BuffData.ps1(结合工程要做统一增益时会用)。 */

/* ---------------- 提示条(分享链接 / 载入分享配装) ---------------- */
.notebar {
  position: fixed; top: 10px; left: 50%; transform: translateX(-50%);
  z-index: 60; max-width: min(92vw, 900px);
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; border: 1px solid var(--accent); border-radius: 7px;
  background: #fffdf6; box-shadow: var(--shadow);
  font-size: 13px;
}
.notebar.hidden { display: none; }
.notebar .note-text { color: var(--fg); white-space: nowrap; }
.notebar .note-input {
  flex: 1 1 auto; min-width: 120px;
  padding: 5px 8px; border: 1px solid var(--line2); border-radius: 4px;
  font-family: Consolas, Menlo, monospace; font-size: 11.5px; color: var(--fg-dim);
  background: var(--bg3);
}
.notebar .note-input.hidden { display: none; }
.btn:disabled { opacity: .4; cursor: default; }

/* ---------------- 左侧导航栏(占位, v0.28.0) ----------------
   整页右移 200px 之后, 左边让出一条白带(--navgap 50 → --pagegap 250), 导航就贴在最左。
   两项**只是表现效果**: 现在点了不跳转、不切页(后续由合并版接上)。 */
.sidenav {
  position: fixed; left: var(--navgap); top: 62px;
  width: 176px; z-index: 20;
  display: flex; flex-direction: column; gap: 6px;
  padding: 8px;
  background: var(--bg2); border: 1px solid var(--line); border-radius: 6px;
}
.navi {
  font: inherit; font-size: 13px; text-align: left; cursor: pointer;
  padding: 8px 10px; border-radius: 4px;
  border: 1px solid transparent; background: transparent; color: var(--fg-dim);
}
.navi:hover { background: var(--sel); border-color: var(--line2); color: var(--fg); }
/* 当前页(= 藏剑配装器)高亮 */
.navi.on { background: var(--sel); border-color: var(--accent); color: var(--accent2); font-weight: 600; }
/* 窄窗口: 左移出来的白带放不下了就收起来(内容块仍从 --pagegap 开始) */
@media (max-width: 1000px) { .sidenav { display: none; } }

/* ---------------- 两个框体(v0.15.0): 筛选设置 / 装备选择 ----------------
   每个框 = 一条标题栏(金色小标题 + 分隔线) + 内容。框本身白底、1px 边框、6px 圆角,
   宽度跟内容列(--maxw 居中)对齐。之前这里是「批量操作栏(一键精炼/一键镶嵌)」和
   「实战增益」两条通栏色带 —— 批量操作挪进了装备表表头, 增益整块删掉了。 */
.panelbox {
  max-width: var(--maxw);
  margin: 12px auto 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg2);
  overflow: visible;             /* 表头的一键菜单要能溢出框外 */
}
.panelbox + .panelbox { margin-top: 12px; }
.boxh {
  margin: 0; padding: 7px 12px 6px;
  font-size: 13px; font-weight: 600; color: var(--accent);
  letter-spacing: .5px;
  background: var(--bg3);
  border-bottom: 1px solid var(--line);
  border-radius: 6px 6px 0 0;
}

/* ---------------- 筛选设置(框体一里的内容) ---------------- */
.filters {
  display: flex; flex-wrap: wrap; gap: 12px 26px;
  padding: 11px 12px;
  align-items: center;
}
.fgroup { display: flex; align-items: center; gap: 10px; }
.fgroup { display: flex; align-items: center; gap: 10px; }
.fgroup.grow { flex: 1 1 220px; min-width: 180px; }
.flabel { color: var(--fg-dim); font-size: 13.5px; white-space: nowrap; }
.dash { color: var(--fg-dim2); }
.hint { color: var(--fg-dim2); font-size: 12px; }

.num, .text {
  background: #fff; color: var(--fg); border: 1px solid var(--line2);
  border-radius: 5px; padding: 6px 9px; font: inherit; font-size: 13.5px;
}
.num { width: 82px; }

/* ---------------- 品级范围: 数字框 + 单条双把滑动条 ----------------
   布局: 最低 [数字] ──●═══════●── [数字] 最高
   做法是**两条 range 叠在同一条轨道上**(原生没有双把手控件):
   输入框本身 pointer-events:none(免得挡住轨道点击), 只有滑块手柄 pointer-events:auto 可拖。
   步长 1 —— 品级里有 135 个不是 5 的倍数(如 162), 步长 5 会滑不到。 */
.rngrow { display: inline-flex; align-items: center; gap: 7px; }
.rnglab { font-size: 11.5px; color: var(--fg-dim2); white-space: nowrap; }
.dual { position: relative; width: 200px; height: 20px; display: inline-block; vertical-align: middle; }
.dualtrack,
.dualfill { position: absolute; top: 8px; height: 4px; border-radius: 2px; }
.dualtrack { left: 0; right: 0; background: var(--line2); }
.dualfill { background: var(--accent); opacity: .45; }
.dualrng {
  position: absolute; left: 0; top: 0; width: 100%; height: 20px; margin: 0;
  -webkit-appearance: none; appearance: none; background: none; pointer-events: none;
}
.dualrng:focus { outline: none; }
.dualrng::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; pointer-events: auto;
  width: 14px; height: 14px; border-radius: 50%; background: var(--accent);
  border: 2px solid #fff; box-shadow: 0 0 0 1px var(--accent); cursor: pointer;
}
.dualrng::-moz-range-thumb {
  pointer-events: auto; width: 12px; height: 12px; border-radius: 50%;
  background: var(--accent); border: 2px solid #fff; box-shadow: 0 0 0 1px var(--accent); cursor: pointer;
}
.dualrng:focus::-webkit-slider-thumb { box-shadow: 0 0 0 3px rgba(176, 125, 24, .25); }
.text { width: 100%; }
.num:focus, .text:focus { outline: none; border-color: var(--accent); }

.chk { display: inline-flex; align-items: center; gap: 6px; color: var(--fg); font-size: 13.5px; cursor: pointer; user-select: none; }
.chk input { accent-color: var(--accent); width: 15px; height: 15px; }

/* ---- 属性要求那一行(独占一行) ---- */
.fgroup.attrs { flex: 1 1 100%; align-items: center; gap: 12px; border-top: 1px dashed var(--line); padding-top: 10px; }
.attrbox { display: flex; flex-wrap: wrap; gap: 4px 18px; align-items: center; }
.attrbox .chk { font-size: 13.5px; }
.attrbox .chk input { margin: 0; }
/* 两行互斥(v0.20.0 起是「按属性」): 某个属性在对行被勾了, 只有那一格禁用 + 压暗;
   禁用是 Input 自己的 disabled(浏览器自带灰化), 这里再降标签不透明度、改光标 */
.attrbox .chk.off { opacity: .45; cursor: default; }

/* ---------------- 主区布局 ---------------- */
/* 装备区 v0.14.0 起改成「一张表」(一行一件、六列)。
   v0.14.2: 各控制列按用户指定的比例缩窄(精炼/五行石 74px、附魔/大附魔 各 130px),
   表格的自然宽度因此约 846px(v0.24.2 起;之前 930) —— 内容整块 1300px 居中, 面板 320px 跟在表格右边。
  ★ 装备那一列是唯一的弹性列(minmax(140px,1fr)), 所以"整表收 84px"= "装备列 420 → 336"(用户 2026-10-14 要求)。
   窄屏(≤1180px)面板落到表格下面; ≤820px 时每一行折成「部位 + 一格一行」不再并排。
  ★ 为什么断点是 1180:两列**一点不挤地**并排需要 846(表) + 10(列间距) + 320(面板) + 36(页面左右留白)
     = **1212px**(实测:窗口 1212 时装备列是完整的 336;1200→324、1181→305, 已经开始压装备列了;
     而 ≤1180 一旦改成"面板落下", 表格反而能占满整行 ≈1127px)。所以 1180 这条线是"挤之前先挪"。 */
:root {
  --maxw: 1300px;
  /* v0.24.5: 内容块到窗口左边的距离; v0.28.0 再右移 200px(50 → 250) —— 让出来的左侧白带放导航栏 */
  --pagegap: 250px;
  --navgap: 50px;     /* 左侧导航栏贴窗口左边的距离(= 原来内容块的位置) */
}
.layout {
  display: grid;
  grid-template-columns: minmax(0, 846px) 320px;
  column-gap: 10px; row-gap: 14px;
  max-width: var(--maxw);
  margin: 0 0 0 var(--pagegap);      /* v0.24.5: 原来是 margin: 0 auto(居中) —— 用户要求整页左移, 左边留 50px */
  padding: 14px 18px 40px 0;         /* v0.24.5: 左内边距 18 → 0, 让框体的**可见左边缘**正好在 50px(和标题/页脚对齐) */
  align-items: start;
  justify-content: start;
}
/* 「筛选设置」跨两列 => 宽度 = 装备选择(846) + 列间距(10) + 面板(320) = 1176px, 与下边两块整体同宽 */
#filterBox { grid-column: 1 / -1; }
@media (max-width: 1180px) {
  .layout { grid-template-columns: minmax(0, 1fr); }
  .panel { grid-column: 1 / -1; position: static !important; }
}
@media (max-width: 720px) {
  .layout { grid-template-columns: 1fr; }
}

.col { display: flex; flex-direction: column; gap: 10px; min-width: 0; }

/* ---------------- 装备表(单列, 一行一件) ---------------- */
/* 一行六格: 部位 | 装备 | 精炼 | 附魔 | 五行石 | 大附魔(没有大附魔的部位这格空着)。
   列宽用 fr, 屏窄时自动压缩(下拉里的长文字由浏览器截断)。
   v0.14.0 之前是「两列卡片」, 每件装备占 4 行(装备行/精炼星/附魔/五行石), 武器再多一行五彩石。
   v0.14.1: 每个部位套一个 .slotbox 小框 —— 武器 + 它的五彩石行因此读成一个整体; 武器排到最后。 */
.slotstable { background: transparent; }
/* 装备选择那个框在 .layout 的第一列里: 边距/宽度交给网格, 不要再自己加 */
.layout .panelbox { margin: 0; max-width: none; }
.slothead, .slotrow {
  display: grid;
  /* 列宽: 部位 52 / 装备 1fr / 精炼·五行石·附魔 **各 88px** / 大附魔 130。
     88px 的来历(v0.15.4): 用户要求这三列缩到「和表头上方的『精炼+一键』一样宽」——
     实测「精炼+一键」= 73.2px、「五行石+一键」= 87.2px; 三列**必须同宽**, 又要让最宽的那组
     (五行石+一键) 不被切掉, 所以取 87.2 进到 88。改表头字号/按钮内边距后要重新量。
     ⚠️ 列的顺序 v0.15.1 换过: 精炼 | 五行石 | 附魔 | 大附魔 —— 与 app.js 里 slotCardHTML
        拼 `${rSel}${diaSel}${enSel}${bigSel}` 的顺序、和 renderSlots 的表头一致, 三处必须同步改。 */
  grid-template-columns: 52px minmax(140px, 1fr) 88px 88px 88px minmax(104px, 130px);
  column-gap: 8px; align-items: center;
}
.slothead {
  /* 左内边距比 .slotrow 多 1px: 补上 .slotbox 那 1px 边框, 表头文字才和框里的列对齐。
     字号 v0.15.2 从 11.5px 放大到 13.5px(用户要求, 含「一键」按钮) */
  padding: 5px 10px 5px 11px; font-size: 13.5px; color: var(--fg-dim); letter-spacing: .5px;
  border-bottom: 1px solid var(--line);
}

/* 表头里的「一键」按钮 + 悬停菜单(v0.15.0): 精炼 / 五行石 两格。
   菜单绝对定位, 悬停表头格即开。 */
.headgrp { position: relative; display: inline-flex; align-items: center; gap: 4px; }
.slothead > * { white-space: nowrap; }
.hlab { color: var(--fg-dim); }
.onekey {
  border: 1px solid var(--line2); background: #fff; color: var(--accent2);
  border-radius: 3px; padding: 0 4px; cursor: pointer;
  font: inherit; font-size: 11px; line-height: 17px; white-space: nowrap;
}
.headgrp:hover .onekey, .onekey:hover { border-color: var(--accent); background: var(--sel); }
.onemenu {
  position: absolute; top: 100%; left: -4px; z-index: 40; margin-top: 3px;
  min-width: 112px; padding: 4px;
  background: #fff; border: 1px solid var(--line2); border-radius: 5px;
  box-shadow: var(--shadow);
}
/* ★ 3px 的视觉间隙靠 margin-top 撑出来, 但光标从按钮往下走会扫过这条缝 ——
   缝不属于按钮也不属于菜单, mouseleave 立刻触发, 浮窗就"一移就关"(用户 v0.15.1 反馈)。
   这里用一块**透明桥**把缝补上:它是菜单自己的伪元素, 悬停它 = 悬停菜单, 所以过缝时不会出界。
   (JS 那边另有一道 260ms 延迟关闭兜底。) */
.onemenu::before { content: ''; position: absolute; left: 0; right: 0; top: -4px; height: 4px; }
.onemenu.hidden { display: none; }
.onetip { padding: 2px 6px 4px; font-size: 10.5px; color: var(--fg-dim2); white-space: nowrap; }
.oneitem { padding: 3px 6px; border-radius: 3px; font-size: 12px; color: var(--fg); cursor: pointer; }
.oneitem:hover { background: var(--sel); color: var(--accent2); }
/* 一键应用后的结果提示: 浮在表头下方(绝对定位, 不占格子 —— 表头是 6 列网格) */
.headmsg {
  position: absolute; top: 100%; right: -4px; margin-top: 3px; z-index: 41;
  padding: 1px 6px; border-radius: 3px;
  background: #fffdf6; border: 1px solid var(--accent);
  color: var(--accent2); font-size: 11px; white-space: nowrap;
}
.headmsg:empty { display: none; }
/* 每个部位一个小框 */
.slotbox {
  border: 1px solid var(--line); border-radius: 5px; background: var(--bg2);
  margin-bottom: 4px; overflow: hidden;
}
.slotbox:last-child { margin-bottom: 0; }
.slotrow { padding: 4px 10px; }
/* 武器的第二行: 五彩石。**和主行共用同一套 6 列网格**(不再有自己的 flex 容器):
   ② 装备格 = 石头名(.fivename, 用 .slot-item-name 那套字号/省略号), ③④⑤ = 三个词, ⑥ = 等级。
   与装备行同属一个 .slotbox, 只隔一条虚线。 */
.slotrow.sub { background: #fafbfc; border-top: 1px dashed var(--line); }
.slotrow.sub .slot-name { color: var(--fg-dim); font-weight: 400; }
/* 石头名框(v0.15.3): **淡黄底色、不带边框**的小块, 宽度与上一行的「装备」框一致(都占满第 2 列);
   文字是「五彩石：名字」, 字号/颜色与装备名一致(12.5px)。没选石头时写「未选择五彩石」(灰斜体)。
   ① 那一列空着 —— 网格靠 DOM 顺序填格, 所以 HTML 里留了个空 span 占位。 */
.fivename {
  display: flex; align-items: center; min-width: 0; min-height: 26px;
  padding: 3px 7px; border-radius: 4px;
  background: #fbf4d5;                 /* 淡黄 */
  font-size: 12.5px; color: var(--fg);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fivename.empty { color: var(--fg-dim2); font-style: italic; }
/* 空装备位: 「装备」格只占自己那一列(占位下拉与已选行同款, 见 .slot-item.empty 的 HTML) */

/* 窄屏(≤820px): 六列并排放不下 —— 折成「部位 + 一格一行」(表头就不显示了) */
@media (max-width: 820px) {
  .slothead { display: none; }
  .slotrow { grid-template-columns: 52px minmax(0, 1fr); row-gap: 4px; }
  .slotrow > .slot-name { grid-column: 1; grid-row: 1; }
  .slotrow > :not(.slot-name) { grid-column: 2; }
}

.slot-name { color: var(--accent); font-weight: 600; font-size: 12px; letter-spacing: .5px; white-space: nowrap; }

/* 装备那一格: 名字 +(属性串)+ 品级 + 精简 + 来源(最右)。点一下弹选择器。 */
.slot-item {
  cursor: pointer; background: #fff; border: 1px solid var(--line2);
  border-radius: 4px; padding: 3px 6px; min-width: 0; min-height: 26px;
  display: flex; align-items: center; gap: 6px; flex-wrap: nowrap;
}
.slot-item:hover { border-color: var(--accent); background: var(--sel); }
.slot-item.empty { color: var(--fg-dim2); font-style: italic; gap: 8px; }
.slot-item-name { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; }
/* 装备格右侧那一组: 属性简写 / 品级 / 来源 —— 整体靠右(从右向左就是 来源 → 品级 → 属性简写) */
.slot-right { margin-left: auto; display: flex; align-items: center; gap: 5px; flex: none; min-width: 0; }
/* 属性简写: **橙色底色**的小块(v0.14.3 起; 之前是「（破防无双）」括号文字) */
.chip-attr {
  flex: none; padding: 0 5px; border-radius: 3px;
  background: #f6c98a; color: #6b3d05;
  font-size: 10.5px; white-space: nowrap;
}
.slot-src { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 11px; color: var(--fg-dim2); white-space: nowrap; }
.tag { padding: 0 4px; border-radius: 3px; background: #eef1f5; color: var(--fg-dim); font-size: 10.5px; white-space: nowrap; flex: none; }
.tag.kind-精简 { color: #a8661a; }
.tag.lv { color: var(--fg-dim2); }

/* ---- 表格里的下拉(精炼 / 附魔 / 五行石 / 大附魔 / 五彩石) ---- */
.asel {
  min-width: 0; width: 100%; max-width: 100%;
  background: #fff; color: var(--fg); border: 1px solid var(--line2);
  border-radius: 4px; padding: 3px 5px; font: inherit; font-size: 11.5px; cursor: pointer;
}
.slotrow > .asel[disabled] { background: var(--bg3); color: var(--fg-dim2); cursor: default; }
.asel:hover:not([disabled]) { border-color: var(--accent); }
.asel:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px rgba(176, 125, 24, .15); }
/* 五彩石的三词下拉: 直接占满所在的那一列(111px, 与「精炼 / 五行石 / 附魔」同列同宽)。
   v0.15.2 起它们是网格里的普通格子, 不再需要 flex 定宽(等级下拉同理, 用 .asel 基础样式)。 */
.asel-w { width: 100%; }
.asel-group { display: flex; flex-wrap: wrap; gap: 5px 8px; align-items: center; min-width: 0; }

/* 顶栏里的一键镶嵌 */
/* ---------------- 第三列: 面板 ---------------- */
.panel {
  background: var(--bg2); border: 1px solid var(--line); border-radius: 6px;
  position: sticky; top: 62px;
  max-height: calc(100vh - 80px); overflow: auto;
  gap: 0;
}
.panel-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 13px; border-bottom: 1px solid var(--line);
  position: sticky; top: 0; background: var(--bg2); z-index: 2;
}
.panel-head h2 { margin: 0; font-size: 14px; color: var(--accent); }

/* (.score-block / .score-label / .score-value / .score-detail —— 「装备分数」那块大数字
   v0.27.0 按用户要求删掉: 装分改成面板列表的**第一行**(见 app.js renderSummary), 样式一并移除) */

.panel-body { padding: 6px 13px 12px; }

/* ---------------- 面板中部那两行开关(v0.27.0~v0.36.2) → **v0.38.0 全部搬走** ----------------
   用户 2026-10-16 的版式调整:
     · 「开启/关闭增益计算」胶囊(#gainPill)→ **搬进「设置增益」二级弹窗**(页脚「取消」左侧),
       由 calc-bridge.js 搬节点; 不在弹窗里时待在 `#gainPillHome`(下面那条规则);
     · 「开启/关闭自定义属性」(#customPill)与「开启/关闭装备对比」(新胶囊 #comparePill = 原 #btnCompare 那个开关)
       → 搬进 .calc-opts, **各占一行**(见那边的 `.opt-pill`)。
   所以旧的 `.cmp-row` / `.cmp-left` / `.cmp-row2` 三条规则**整条删除**;
   `.cmp-toggle`("单个按钮当开关"、按下变金色)也**随「装备对比」改成胶囊而彻底下岗** ——
   面板里不再有这种单按钮开关, 只剩 `.cmp-plain`(点击触发式按钮, 现在给「设置属性」用)。
   ⚠️ 下面胶囊那条注释里的两条教训仍然适用: 文字一律 `nowrap`、宽度按"实际可用宽"算(折行会把整行顶高)。 */
#gainPillHome { display: none; }        /* `hidden` 属性本来就不显示; 写死一条兜底(它只是胶囊的"存放处", 不占位) */
.cmp-plain { font-size: 12px; padding: 4px 10px; white-space: nowrap; }

/* 胶囊开关(.capsule) —— **四个地方共用**的一套样式:
     · 「开启/关闭增益」  #gainPill(v0.38.0 起在「设置增益」弹窗的页脚, 取消左侧)
     · 「开启/关闭自定义属性」#customPill(v0.38.0 起在 .calc-opts, 与装备对比各占一行)
     · 「开启/关闭装备对比」#comparePill(v0.38.0 新增: 原 #btnCompare 那个开关改成同款胶囊)
     · 「轻剑/重剑」相位   #phaseTabs(v0.36.2 起在「面板属性」标题右侧)
   结构 = 胶囊轨道(浅底 + 描边 + 2px 内缩)里放**左/右两个等宽透明按钮**, 再加一个金色滑块 `.thumb`
   垫在当前那一半下面;滑块往哪边滑**纯 CSS 决定**(右边那半 `aria-pressed="true"` 时就滑过去)——
   不用 `:has()`, 老 Chromium(QQ 浏览器那类)也不怕。
   ★ 交互: **整个胶囊都可点**(处理器挂在胶囊上、动作是"切换/翻转" —— 用户:「无论我点哪里都自动切换」),
   两半按钮自己不挂处理器(点哪都只切一次);`cursor:pointer` 也给在胶囊上。
   ⚠️ 宽度按**所在那一行的实际可用宽**算(v0.34.3 的教训: 折行会把整行从 44 顶到 61), 文字一律 nowrap。 */
.capsule {
  display: grid; grid-template-columns: 1fr 1fr;
  position: relative; padding: 2px;
  border: 1px solid var(--line2); border-radius: 999px; background: #f2f4f7;
  cursor: pointer;
}
.capsule .pillseg {
  grid-row: 1; position: relative; z-index: 1;
  border: 0; background: transparent; border-radius: 999px;
  font-family: inherit; font-size: 12px; padding: 2px 8px; white-space: nowrap;
  color: var(--fg-dim); cursor: pointer;
}
/* 两半固定落在第 1 / 第 2 列(与 DOM 顺序无关, 保证永远等宽) */
.capsule button:nth-of-type(1) { grid-column: 1; }
.capsule button:nth-of-type(2) { grid-column: 2; }
.capsule .pillseg[aria-pressed="true"] { color: #fff; font-weight: 600; }
.capsule .pillseg:not([aria-pressed="true"]):hover { color: var(--fg); }
.capsule .thumb {
  grid-area: 1 / 1 / 2 / 2; z-index: 0;
  border-radius: 999px; background: var(--accent);
  transition: transform .16s ease;
}
/* 右半是"当前"时滑块滑到右边(增益=开启 / 自定义属性=开启 / 装备对比=开启 / 相位=重剑);左半是当前就停在左边 */
.capsule button:nth-of-type(2)[aria-pressed="true"] ~ .thumb { transform: translateX(100%); }
/* 禁用的一半(相位那种"没装武器"的): 压暗、不变手型、悬停也不变色 */
.capsule .pillseg:disabled, .capsule .pillseg:disabled:hover { color: var(--fg-dim); opacity: .45; cursor: default; }
.cmp-right { display: inline-flex; align-items: center; gap: 5px; }
.cmp-mode { font-size: 12px; color: var(--fg-dim); }

/* 问号 + 悬停浮窗(v0.28.1):鼠标移上去(或键盘聚焦)弹出一段说明。
   ⚠️ 浮窗**朝下开、且留在面板框内** —— .panel 是 overflow:auto, 朝上开会被裁掉(踩过的坑)。 */
.qmark {
  position: relative; flex: none;
  width: 14px; height: 14px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line2); background: #fff;
  font-size: 10px; line-height: 1; color: var(--fg-dim2);
  cursor: help; user-select: none;
}
.qmark:hover, .qmark:focus-visible { border-color: var(--accent); color: var(--accent2); }
.qmark .qtip {
  display: none; position: absolute; right: -4px; top: calc(100% + 6px);
  width: 236px; padding: 8px 10px;
  background: #fffdf6; border: 1px solid var(--accent); border-radius: 6px;
  box-shadow: var(--shadow); z-index: 5;
  font-size: 12px; line-height: 1.55; color: var(--fg);
  white-space: normal; text-align: left;
}
.qmark:hover .qtip, .qmark:focus .qtip, .qmark:focus-visible .qtip { display: block; }

/* ---------------- 计算参数(占位, v0.26.0) ----------------
   三行「文字 + 下拉」+ 两行开关胶囊 +「设置属性 / 开始计算」动作行 = **合并版的预留接口**:
   选项与点击行为由计算器侧接管(app.js 的 setCalcOptions() / window.onStartCalc)。 */
.calc-opts {
  display: flex; flex-direction: column; gap: 8px;
  padding: 10px 13px 12px;
  border-top: 1px solid var(--line);
}
.opt-row { display: flex; align-items: center; gap: 8px; }
.opt-lab { flex: none; font-size: 12px; color: var(--fg-dim); }
.opt-row .asel { flex: 1 1 auto; min-width: 0; }
/* 「目标」那一行(v0.37.1, 用户:「目标选择和目标个数放在同一行;目标选择改名为『目标』;
   目标个数**不用标题**, 下拉直接放在旁边、可缩短适配宽度」):
   = 「目标」标签 + 目标下拉(吃掉剩下的宽) + 目标个数下拉(**无标题**、固定 88px 刚好放下"全程双目标";
   说明文字在它的 title / aria-label 里)。
   ⚠️ 计算器那条线的 calc-merge.css 里还留着早先那套 `.opt-targets` 两列网格 + `.opt-cell` 规则(已不再需要)——
      这里靠 **id 选择器**的特异性盖掉 `.opt-targets .asel{width:100%}` 那条(加载顺序是 style.css → calc-merge.css)。 */
.calc-opts .opt-targets { display: flex; align-items: center; gap: 6px; }
#tgtLvSel { flex: 1 1 auto; min-width: 0; }
#tgtCntSel { flex: none; width: 88px; }
/* 两个开关胶囊各占一行(v0.38.0, 用户:「移动到开始计算和网络延迟两行之间, 各占一行」)——
   胶囊**拉满整行**(两半等宽、文字居中), 与这一块里其它行(下拉吃满剩余宽)对齐;
   可用宽 = 294 − 无(这一行只有胶囊一个孩子) → 每半 ≈ 145, 最长的「关闭自定义属性」7 字 ≈ 84+16 怎么也放得下。 */
.calc-opts .opt-pill .capsule { flex: 1 1 auto; min-width: 0; }
/* 底部动作行(v0.34.0):左「设置属性」(占 1/4 减 gap; v0.38.0 起由它占这一格 —— 原「装备对比」)+
   右「开始计算」(1fr = 整宽的 3/4)。
   gap 与列宽的关系: 1fr = W − (25%W − gap) − gap = 75%W ✓ 所以「开始计算」正好是原来的 3/4。 */
.calc-actions { display: grid; grid-template-columns: calc(25% - 6px) 1fr; gap: 6px; margin-top: 2px; }
.calc-actions .btn { width: 100%; }
/* 左格只有 67px 宽, 用 .btn 默认的 padding(16)会顶出去 → 单独收窄(四个汉字 ≈ 48 + 8 + 2 = 58 ✓) */
.calc-actions .cmp-plain { font-size: 12px; padding: 4px 4px; }

/* 轻剑相 / 重剑相(v0.36.2: 从单独一行挪进「面板属性」标题右侧, 做成 .capsule 胶囊 —— 见上面的胶囊通用样式)。
   这里只剩两件事: 让它在标题行里不被压缩(flex:none)、以及"没装武器的相位"那半的禁用态(通用样式里已写)。 */
.panel-head .capsule { flex: none; }
.ptab { font-size: 12px; }

.prow2 {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; padding: 5px 0; border-bottom: 1px dashed #e8ebef;
}
.prow2:last-child { border-bottom: none; }
.prow2 .pk { color: var(--fg-dim); font-size: 12px; flex: none; }
.prow2 .pv {
  text-align: right; font-size: 15px; color: var(--fg);
  font-variant-numeric: tabular-nums; font-weight: 600;
}
/* (.prow2 .psub —— 面板行下面那行「会心值 3798」小字: v0.24.3 按用户要求不再显示, 样式移除;
   原始值仍然进导出 JSON 的 数值项, 只是不上页面) */

/* ---------------- 选择下拉(锚定在被点的控件下方, 不是独立界面) ---------------- */
.picker { position: fixed; z-index: 50; }
.picker.hidden { display: none; }
.picker-panel {
  background: var(--bg2); border: 1px solid var(--line2); border-radius: 8px;
  box-shadow: var(--shadow);
  width: 100%; max-height: min(62vh, 560px);
  display: flex; flex-direction: column; overflow: hidden;
}
.picker-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 12px; border-bottom: 1px solid var(--line);
}
.picker-head strong { font-size: 12px; }
.picker-head-right { display: flex; align-items: center; gap: 8px; flex: 1 1 auto; justify-content: flex-end; }
/* 搜索框:可伸缩(弹层收窄后不能把「卸下」挤出去), 上限 220 */
.picker-head-right .text { flex: 1 1 auto; width: auto; min-width: 80px; max-width: 220px; }
/* 「卸下」(v0.24.0):**加宽**(58.7→84)、**高度与搜索框一致**(34px; 之前被 flex 拉成 52) */
#pickerClear { height: 34px; padding: 0 12px; min-width: 84px; }
/* (.picker-meta —— 「候选 N 件 / 本部位最高品级 / 点空白处或按 Esc 关闭」那行提示
   v0.24.1 按用户要求整行删除, 样式一并移除) */
.picker-list { overflow: auto; padding: 4px; }

.prow {
  padding: 6px 10px; border-radius: 4px; cursor: pointer;
  border: 1px solid transparent;
}
.prow:hover { background: var(--sel); border-color: var(--line2); }
.prow.on { border-color: var(--accent); background: var(--sel); }
/* 行内间距 8 → 6px(v0.24.4):品级/来源放大到 13px 后, 最长名字那行只差 2px 就被挤出省略号;
   收 2px 间距即可让 400 行全部完整显示(实测最坏行 153px 可用 / 155px 需要) */
.pline1 { display: flex; align-items: center; gap: 6px; }
/* 装备名**加粗**(v0.24.0 用户要求);名字先收缩(原来最右边还钉着「来源」, v0.30.2 起不显示了) */
.pline1 .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; min-width: 0; }
/* 品级紧跟名称和「精简」标签后面, 不再推到最右; v0.24.0 起写成「1370品」;
   v0.24.4 字号放大到与装备名一致(13px, 不加粗) */
.pline1 .lv { flex: none; color: var(--fg-dim); font-size: 13px; font-weight: 400; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* (.pline1 .src —— 原来把「来源」钉在第 1 行最右; v0.30.2 按用户要求整个删掉, 样式一并移除) */
/* 装备对比的 DPS 差(v0.32.0):与装备名同行、**靠右对齐**(占的就是原来「来源」那一格)。
   正值金绿、负值灰、跨加速段/当前穿着各一种样子。 */
.pline1 .diff { margin-left: auto; flex: none; font-size: 13px; font-weight: 600;
  font-variant-numeric: tabular-nums; white-space: nowrap; padding-left: 8px; }
.pline1 .diff.up { color: #1a7f37; }
.pline1 .diff.down { color: #a4544f; }
.pline1 .diff.cur { color: var(--accent2); font-weight: 600; }
.pline1 .diff.thresh { color: var(--fg-dim2); font-weight: 400; font-size: 11.5px; }
/* 属性行(v0.24.0):只列属性名、不写数值;字号放大到和装备名一样(13px) */
.pline2 { color: var(--fg-dim); font-size: 13px; margin-top: 3px; }

/* ---------------- 页脚: 数据来源与免责声明 ---------------- */
.footnote {
  max-width: var(--maxw); margin: 22px 0 34px var(--pagegap); padding: 14px 16px;   /* v0.24.5: 跟随整页左移 */
  border-top: 1px solid var(--line); color: var(--fg-dim); font-size: 12.5px; line-height: 1.75;
}
.footnote p { margin: 0 0 7px; }
.footnote strong { color: var(--fg); font-weight: 600; }
.footnote b { color: var(--fg); font-weight: 600; }
.footnote .mono { font-family: Consolas, Menlo, monospace; font-size: 12px; color: var(--fg-dim2); }
/* ★2026-10-19(用户):页脚链接用导航栏选中的淡黄色(--sel)做底,不用 jx3box 那种黑色 */
.footlinks { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; }
.footlink {
  font: inherit; font-size: 12.5px; padding: 3px 10px; cursor: pointer;
  background: var(--sel); color: var(--accent2);
  border: 1px solid var(--line); border-radius: 5px;
}
.footlink:hover { border-color: var(--accent); background: #fbf0d4; }
.footmeta { color: var(--fg-dim2); font-size: 12px; }
.footmeta a { color: var(--accent2); text-decoration: none; }
.footmeta a:hover { text-decoration: underline; }
.footnote details { margin-top: 8px; }
.footnote summary { cursor: pointer; color: var(--fg-dim2); font-size: 12.5px; }
.footnote details p { margin: 7px 0 0; color: var(--fg-dim2); }

/* ---------------- 「联系我」弹窗(v0.35.0) ---------------- */
/* 左侧导航第三项「联系我」点开: 遮罩 + 居中面板; 关闭 = ✕ / 点遮罩 / Esc(接线在 js\app.js 的 bind())。
   ⚠️ 故意不复用计算器那条线的 `.ce-modal`(「设置增益」二级弹窗, 在 calc-merge.css 里)—— 免得互相牵连。
   ⚠️ `.hidden` 在本文件里没有通用规则(都是 .picker.hidden 这种复合写法), 所以这里必须自己写一条。 */
.cmodal {
  position: fixed; inset: 0; z-index: 80;
  display: flex; align-items: center; justify-content: center; padding: 24px;
  background: rgba(22, 26, 32, .38);
}
.cmodal.hidden { display: none; }
.cmodal-panel {
  width: min(520px, 92vw); max-height: 84vh; overflow: auto;
  background: #fff; border: 1px solid var(--line2); border-radius: 8px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .22);
}
.cmodal-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 14px; border-bottom: 1px solid var(--line);
  background: #fafbfc; border-radius: 8px 8px 0 0;
}
.cmodal-head strong { font-size: 14px; color: var(--fg); }
.cmodal-x {
  border: 0; background: transparent; cursor: pointer; font-family: inherit;
  font-size: 13px; line-height: 1; color: var(--fg-dim); padding: 5px 7px; border-radius: 4px;
}
.cmodal-x:hover { background: #eef1f5; color: var(--fg); }
.cmodal-body { padding: 12px 14px 16px; font-size: 12.5px; line-height: 1.8; color: var(--fg-dim); }
.cmodal-body p { margin: 0 0 10px; }
.cmodal-body p:last-child { margin-bottom: 0; }

/* ---------------- 「自定义额外属性」(v0.36.0 / v0.36.2) ---------------- */
/* 开关本体(v0.36.2 起) = 「面板属性」下方那个 `.capsule`(与增益胶囊同款, 见上面通用样式);
   这里只剩**按下后每行**的算术样式: 基准值(灰) + 「+」 + 输入框 + 「=」 + 最终值(金色), 整行仍在 .prow2 里右对齐。 */
.prow2 .pv.pcust { display: flex; align-items: baseline; gap: 3px; }
.pcust .pbase { color: var(--fg-dim); font-weight: 600; }
.pcust .pplus, .pcust .peq { color: var(--fg-dim2); font-size: 12px; font-weight: 400; }
.pcust .pcin {
  width: 54px; font: inherit; font-size: 12px; padding: 1px 4px; text-align: right;
  border: 1px solid var(--line2); border-radius: 4px; background: #fff; color: var(--fg);
}
.pcust .pcin:focus { border-color: var(--accent); outline: none; }
.pcust .pcin::-webkit-outer-spin-button, .pcust .pcin::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pcust .pfinal { color: var(--accent2); font-size: 15px; }