/* MOForge2 样式
   深色专业工具风：层次分明的面板 + 克制的品牌蓝 + 舒展间距。
   token: 4/8/12/16/24 间距，10/12 圆角，三级文字色。 */

:root {
  --bg:      #0e1014;
  --panel:   #151922;
  --elev:    #1b202b;
  --hover:   #232a38;
  --line:    #252b38;
  --line2:   #303848;
  --fg:      #e8ebf1;
  --fg2:     #a9b2c3;
  --fg3:     #6e7889;
  --brand:   #5b8cff;
  --brand2:  #7ba3ff;
  --ok:      #3ecf8e;
  --warn:    #f5a623;
  --danger:  #ff6b6b;
  --r:       10px;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font: 13px/1.65 "Microsoft YaHei", "Segoe UI", system-ui, sans-serif;
  color: var(--fg);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}

/* ---------- 控件 ---------- */
button {
  font: inherit;
  color: var(--fg2);
  background: var(--elev);
  border: 1px solid var(--line2);
  border-radius: 8px;
  padding: 6px 13px;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
button:hover:not(:disabled) { background: var(--hover); color: var(--fg); }
button:disabled { opacity: .38; cursor: default; }

input, select {
  font: inherit;
  color: var(--fg);
  background: #10141b;
  border: 1px solid var(--line2);
  border-radius: 8px;
  padding: 6px 10px;
  transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(91, 140, 255, .16);
}
input::placeholder { color: var(--fg3); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #2b3341; border-radius: 6px; border: 2px solid var(--panel); }
::-webkit-scrollbar-thumb:hover { background: #3a4456; }
::-webkit-scrollbar-track { background: transparent; }

/* ---------- 顶栏 ---------- */
header {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 0 18px;
  height: 54px;
  flex: none;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}
.brand { font-size: 17px; font-weight: 700; letter-spacing: .4px; }
.brand span { color: var(--brand); }
.tools, .actions { display: flex; gap: 6px; }
.spacer { flex: 1; }

.tools button {
  background: transparent;
  border: 1px solid transparent;
  color: var(--fg2);
  padding: 7px 15px;
  border-radius: 8px;
}
.tools button:hover { background: var(--elev); color: var(--fg); }
.tools button.sel {
  background: rgba(91, 140, 255, .14);
  border-color: rgba(91, 140, 255, .45);
  color: var(--brand2);
  font-weight: 600;
}
.actions button { background: transparent; }
.actions #btnSave:not(:disabled) {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  font-weight: 600;
}
.actions #btnSave:not(:disabled):hover { background: #4a7bf0; border-color: #4a7bf0; }

/* ---------- 主体 ---------- */
main { flex: 1; min-height: 0; display: flex; }
#work { flex: 1; display: flex; flex-direction: column; min-width: 0; }

#picker { flex: none; padding: 16px 20px 0; }
#picker .searchbox { margin: 0; }

/* 页签：药丸风 */
#tabs {
  display: flex;
  gap: 6px;
  padding: 14px 20px 0;
  flex: none;
  flex-wrap: wrap;
}
#tabs button {
  background: transparent;
  border: 1px solid transparent;
  color: var(--fg3);
  padding: 6px 14px;
  border-radius: 8px;
}
#tabs button:hover { background: var(--elev); color: var(--fg2); }
#tabs button.sel {
  background: var(--elev);
  border-color: var(--line2);
  color: var(--fg);
  font-weight: 600;
}

/* 内容面板 */
#content {
  flex: 1;
  min-height: 0;
  margin: 14px 20px 20px;
  padding: 20px 22px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: auto;
  display: flex;
  flex-direction: column;
}
/* 关键：flex 子项默认不伸缩，否则超高的 details/table 会被压扁裁掉；
   源码模式的两栏布局用内联 flex:1 覆盖，仍可撑满。 */
#content > * { flex: none; }

/* ---------- 排版 ---------- */
h2 {
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 14px;
  padding-left: 11px;
  border-left: 3px solid var(--brand);
  display: flex;
  align-items: center;
  gap: 10px;
}
h2:not(:first-child) { margin-top: 26px; }
.sum { color: var(--fg3); font-size: 12px; font-weight: 400; }
.hint {
  color: var(--fg3);
  font-size: 12px;
  line-height: 1.75;
  margin: 0 0 14px;
}
.empty {
  color: var(--fg3);
  padding: 56px 0;
  text-align: center;
  line-height: 2;
}
.badge {
  display: inline-block;
  background: rgba(91, 140, 255, .13);
  color: var(--brand2);
  border-radius: 6px;
  padding: 1px 8px;
  font-size: 11px;
}
/* 副本相对原件改了几项：橙色，和「改了 N 项」（相对全局规则）区分开 */
.badge.warnb {
  background: rgba(245, 166, 35, .16);
  color: var(--warn);
  margin-left: 6px;
}

/* ---------- 表格 ---------- */
table { border-collapse: separate; border-spacing: 0; width: 100%; }
th, td { text-align: left; padding: 6px 12px; }
td, th { line-height: 1.5; }
th {
  position: sticky;
  top: 0;
  z-index: 1;
  color: var(--fg3);
  font-weight: 500;
  font-size: 12px;
  background: var(--elev);
  border-bottom: 1px solid var(--line2);
  white-space: nowrap;
}
th:first-child { border-top-left-radius: 8px; }
th:last-child { border-top-right-radius: 8px; }
td { border-bottom: 1px solid var(--line); vertical-align: middle; }
td input, td select { padding: 4px 8px; font-size: 12.5px; }
tbody tr:hover td, table tr:hover td { background: rgba(255, 255, 255, .022); }
.keycell { color: var(--brand2); font-family: Consolas, "Courier New", monospace; }
.modval { color: var(--warn) !important; }

/* 规则覆盖段右列：rulesmo.ini 的值只是**参考**（本图相对全局规则不同），
   不是「改表」——改表是副本 vs 原 map，用橙色（见 .kvrow.dirty）。
   所以这里用中性的蓝灰，不占用警告色。 */
.cmpbox { display: inline-block; word-break: break-all; font-size: 12px; line-height: 1.5; }
.cmpold {
  color: var(--brand2);
  font-family: Consolas, "Courier New", monospace;
}

/* 键值表逐字段「已改」标记 + 还原按钮（与字段面板 .frow.dirty / .forig 同款观感）：
   改过的行整行淡橙底 + 左侧色条，并把打开时的原值摆出来，点一下就还原。 */
.kvline { display: flex; align-items: center; gap: 8px; }
.kvline > input { flex: 1; min-width: 0; width: 100%; }
.kvundo {
  display: none; flex: none; font: inherit; font-size: 11.5px; color: var(--fg2);
  background: var(--elev); border: 1px solid var(--line2); border-radius: 6px;
  padding: 2px 8px; cursor: pointer; max-width: 200px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.kvundo b { color: var(--warn); font-weight: 600; font-family: Consolas, monospace; }
.kvundo:hover { background: rgba(245, 166, 35, .2); color: var(--fg); }
tr.kvrow.dirty td { background: rgba(245, 166, 35, .06); }
tr.kvrow.dirty td:first-child { box-shadow: inset 3px 0 0 var(--warn); }
tr.kvrow.dirty .kvundo { display: inline-block; }

/* ---------- 搜索/分页 ---------- */
.searchbox { display: flex; gap: 8px; align-items: center; margin: 0 0 14px; flex-wrap: wrap; }
.searchbox input { flex: 1; max-width: 440px; }

.pager {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  padding: 8px 12px;
  background: var(--elev);
  border: 1px solid var(--line);
  border-radius: 10px;
  flex-wrap: wrap;
}
.pager .sp { flex: 1; }
.pager .pinfo { color: var(--fg2); font-size: 12px; padding: 0 4px; }
.pager .pin { color: var(--fg3); font-size: 12px; }
.pager input { width: 70px; text-align: center; }

/* ---------- 折叠 ---------- */
details {
  margin: 8px 0;
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
}
details > summary {
  padding: 10px 14px;
  cursor: pointer;
  background: var(--elev);
  list-style: none;
  display: flex;
  align-items: center;
  gap: 10px;
}
details > summary::-webkit-details-marker { display: none; }
details > summary::before { content: "▸"; color: var(--fg3); transition: transform .15s; }
details[open] > summary::before { content: "▾"; color: var(--brand); }
details > summary:hover { background: var(--hover); }
details .body { padding: 6px 12px 10px; }

/* ---------- 弹窗 ---------- */
.wmodal {
  position: fixed;
  inset: 0;
  background: rgba(6, 8, 12, .62);
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fade .15s ease;
}
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.wpanel {
  background: var(--panel);
  border: 1px solid var(--line2);
  border-radius: 12px;
  width: 560px;
  max-width: 92vw;
  max-height: 84vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .5);
}
.whead {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}
.wbody { padding: 16px 18px; overflow: auto; }
.wbody table th { width: 120px; position: static; background: transparent; border: none; }
.wbody table td { border: none; padding: 6px 8px; }
.mini { padding: 3px 10px; font-size: 12px; border-radius: 6px; }

/* ---------- 底部联系栏 ---------- */
#footBar {
  flex: none;
  display: flex;
  justify-content: center;
  gap: 6px;
  padding: 7px 18px;
  background: var(--panel);
  border-top: 1px solid var(--line);
}
#footBar button {
  background: transparent;
  border: 1px solid transparent;
  color: var(--fg3);
  padding: 4px 12px;
  border-radius: 8px;
  font-size: 12px;
}
#footBar button:hover { background: var(--elev); color: var(--fg2); }
.footqr { max-width: min(300px, 78vw); max-height: 56vh; border-radius: 10px; }
.foottip { margin: 10px 0 2px; color: var(--fg3); font-size: 12px; }
.footmail { font-family: Consolas, monospace; font-size: 15px; color: var(--brand2); }
.footlink {
  display: inline-block;
  font: inherit;
  font-size: 12px;
  color: var(--fg2);
  background: var(--elev);
  border: 1px solid var(--line2);
  border-radius: 6px;
  padding: 3px 10px;
  line-height: 1.6;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.footlink:hover { background: var(--hover); color: var(--fg); }

/* ---------- 其它 ---------- */
#toast {
  position: fixed;
  left: 50%;
  bottom: 40px;
  transform: translateX(-50%) translateY(10px);
  background: var(--elev);
  border: 1px solid var(--line2);
  color: var(--fg);
  padding: 10px 20px;
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .45);
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s, transform .22s;
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- 图标展示 ---------- */
.cgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));
  gap:10px;margin-top:10px}
.ccard{border:1px solid var(--line);border-radius:10px;padding:8px 6px;
  background:var(--elev);cursor:pointer;text-align:center}
.ccard:hover{border-color:#5aa9ff}
.cimg{height:56px;display:flex;align-items:center;justify-content:center}
.cimg img{max-height:56px;max-width:100%;image-rendering:pixelated}
.cimg .cq{color:var(--fg3);font-size:20px}
.cname{font-size:12px;margin-top:6px;line-height:1.3;word-break:break-all}
.cid{font-size:10.5px;color:var(--fg3);font-family:Consolas,monospace}
.cmeta{font-size:10px;color:var(--fg3);margin-top:2px;line-height:1.3}

/* ---------- 源码模式（只读原文） ---------- */
.srcinfo{font-size:12px;color:var(--fg3);padding:0 2px 8px;word-break:break-all}
.srccode{font-family:Consolas,"Courier New",monospace;font-size:12.5px;
  line-height:1.55;border:1px solid var(--line);border-radius:10px;
  background:var(--elev);overflow:auto;padding:8px 0}
.sline{display:flex;white-space:pre}
.sline:hover{background:rgba(91,140,255,.08)}
.sno{flex:none;width:64px;text-align:right;padding-right:12px;
  color:var(--fg3);user-select:none}
.stx{white-space:pre;padding-right:16px}

/* ---------- 势力与国家：所属方 → 国家分组 ---------- */
.bgroup { margin-bottom: 10px; }
.bgroup > summary { padding: 8px 12px; background: var(--elev); border-radius: 8px; }
.bgroup > summary:hover { background: var(--hover); }
.bgroup > summary b { font-size: 13px; }
.bcountry { font-size: 12px; color: var(--fg2); margin: 12px 0 6px;
  border-left: 3px solid var(--brand); padding-left: 8px; }

/* 覆盖段列表的分类组头（盟军载具 / 苏军步兵 / 武器段 / 全局规则段…） */
.ovgrp + .ovgrp { margin-top: 2px; }
.ovcat { position: sticky; top: 0; z-index: 1; padding: 5px 8px 3px;
  font-size: 11.5px; font-weight: 600; color: var(--fg3); letter-spacing: .3px;
  background: var(--panel); border-bottom: 1px solid var(--line); cursor: pointer; }
.ovcat:hover { color: var(--fg2); }
.ovcat .ovcar { display: inline-block; width: 12px; margin-right: 2px;
  transition: transform .12s; }
.ovcat .ovcar::before { content: "▾"; }
.ovgrp.off .ovcat .ovcar { transform: rotate(-90deg); }
.ovgrp.off .ovgbody { display: none; }

/* ---------- 建造链路（科技树图式：一行一条流水线） ---------- */
.bchk { display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; color: var(--fg2); cursor: pointer; user-select: none; }
.bchk input { margin: 0; }

.brow { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 10px;
  padding: 10px 12px; background: var(--elev);
  border: 1px solid var(--line); border-radius: var(--r); }
.bkey { flex: none; width: 116px; display: flex; flex-direction: column;
  align-items: center; gap: 3px; }
.bkeyimg { height: 46px; width: 100%; display: flex; align-items: center;
  justify-content: center; gap: 3px; }
.bkeyimg img { max-height: 46px; max-width: 100%; image-rendering: pixelated; }
.bkeystack img { max-height: 34px; max-width: 34px; }
.bkeyno { font-size: 12px; color: var(--fg3); }
.bkn { font-size: 11.5px; line-height: 1.3; text-align: center; color: var(--fg2);
  word-break: break-all; }
.blk { font-size: 10px; color: var(--fg3); font-family: Consolas, monospace; }
.barrow { flex: none; color: var(--fg3); font-size: 17px; padding-top: 14px; }
.bwall { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; gap: 8px; }

.bcard { position: relative; width: 92px; padding: 5px 4px 6px; text-align: center;
  background: var(--panel); border: 1px solid var(--line2); border-radius: 8px;
  cursor: pointer; transition: border-color .15s, opacity .15s, box-shadow .15s; }
.bcard:hover { border-color: var(--brand2); }
.bcard.off { opacity: .28; }
.bcard.on { border-color: var(--ok); box-shadow: 0 0 0 1px rgba(62, 207, 142, .35) inset; }
.bicon { height: 42px; display: flex; align-items: center; justify-content: center; }
.bicon img { max-height: 42px; max-width: 84px; image-rendering: pixelated; }
.bname { font-size: 11.5px; line-height: 1.25; word-break: break-all; }
.bid { font-size: 9.5px; color: var(--fg3); font-family: Consolas, monospace; }
.btech { font-size: 9.5px; color: var(--fg3); margin-top: 1px; }
/* 右上角小旗：只有这几个国家能造 */
.bflag { position: absolute; top: 3px; right: 3px; display: flex; gap: 2px; }
.bflag img { height: 12px; image-rendering: pixelated;
  border: 1px solid rgba(0, 0, 0, .45); }
.bflag .bfno { font-size: 10px; color: var(--warn); }
/* 额外前置（除了行首那个之外的其它前置） */
.bchips { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; margin-top: 3px; }
.bchip { display: inline-flex; align-items: center; gap: 2px; max-width: 100%;
  padding: 0 4px; font-size: 9.5px; color: var(--fg3);
  border: 1px dashed var(--line2); border-radius: 20px; overflow: hidden; }
.bchip img { height: 13px; image-rendering: pixelated; }

/* ---------- 势力与国家：玩家控制的势力段置顶高亮 ---------- */
details.ppsec { border-color: rgba(91, 140, 255, .5); background: rgba(91, 140, 255, .07); }
details.ppsec > summary b { color: var(--brand2); }
.ppbadge { display: inline-block; margin-left: 8px; padding: 1px 9px; border-radius: 20px;
  font-size: 11px; font-weight: 600; color: #fff; background: var(--brand);
  letter-spacing: .3px; }

/* ---------- 势力与国家：阵营配色 ----------
   按 Side= 给「所属方分组 / 国家 / 势力段」整套上色：
   盟军 GDI 蓝、苏军 NOD 红、厄普西隆 THIRDSIDE 紫、焚风 FOURTHSIDE 绿，
   平民·变异体灰、解析不出所属方的更淡灰（不上色但不丢信息）。
   每个配色是一组：--sc 主色（色条/文字）、--sc-bg 淡底、--sc-bd 强调边。
   放在 .ppsec 之后：玩家控制的势力段仍按自己阵营显色，徽标也跟着变。 */
.side-gdi    { --sc: #6f9dff; --sc-bg: rgba(91,140,255,.10);  --sc-bd: rgba(91,140,255,.46); }
.side-nod    { --sc: #ff7b7b; --sc-bg: rgba(255,107,107,.10); --sc-bd: rgba(255,107,107,.46); }
.side-third  { --sc: #bb86ff; --sc-bg: rgba(176,123,255,.11); --sc-bd: rgba(176,123,255,.46); }
.side-fourth { --sc: #4ddb9a; --sc-bg: rgba(62,207,142,.10);  --sc-bd: rgba(62,207,142,.46); }
.side-civ    { --sc: #9aa3b5; --sc-bg: rgba(154,163,181,.09); --sc-bd: rgba(154,163,181,.36); }
.side-none   { --sc: #7b8497; --sc-bg: rgba(123,132,151,.08); --sc-bd: rgba(123,132,151,.30); }

/* 所属方分组：淡底 + 左侧色条 + 标题着色 */
.bgroup.side > summary { background: var(--sc-bg); border-left: 3px solid var(--sc); }
.bgroup.side > summary:hover { background: var(--sc-bd); }
.bgroup.side > summary b { color: var(--sc); }
.bgroup.side > summary .sum { color: var(--fg3); }
/* 国家：淡底 + 左侧色条，国名用阵营色 */
.bcountry.side { border-left: 3px solid var(--sc); background: var(--sc-bg);
  border-radius: 0 6px 6px 0; padding: 5px 9px; color: var(--sc); font-weight: 600; }
.bcountry.side .sum { color: var(--fg3); font-weight: 400; }
/* 势力段 / 国家裸段折叠块：淡底 + 左侧色条 */
details.ssec { border-left: 3px solid var(--sc); background: var(--sc-bg); }
details.ssec > summary b { color: var(--sc); }
/* 玩家控制时保留高亮边与徽标，但颜色按该势力自己的阵营 */
details.ssec.ppsec { border-color: var(--sc-bd); background: var(--sc-bg); }
details.ssec.ppsec > summary b { color: var(--sc); }
details.ssec .ppbadge { background: var(--sc); }

/* ---------- rulesmo.ini 折叠树 ---------- */
.rgrp > summary { font-size: 13.5px; }
.rgrp > summary b { color: var(--fg); }
.rsub {
  border: none !important;
  margin: 2px 0 !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, .015);
}
.rsub > summary { background: transparent; padding: 6px 10px; }
.rsub > summary:hover { background: var(--elev); }
.rsec {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
}
.rsec:hover { background: var(--hover); }
.rsec.on { background: rgba(91, 140, 255, .16); }
.rsec.on .keycell { color: var(--brand2); font-weight: 600; }
/* 相对原件改过的段：左侧列表里打个小橙标（数据来自 /api/diff） */
.rsec.chg { box-shadow: inset 3px 0 0 var(--warn); }
.ovchg {
  flex: none;
  margin-left: auto;
  font-size: 11px;
  padding: 0 6px;
  border-radius: 6px;
  color: var(--warn);
  background: rgba(245, 166, 35, .16);
}

/* ---------- 图标（INI 规则结构：对象缩略图 / 属性行图标） ---------- */
.ricon {
  width: 26px;
  height: 21px;
  flex: none;
  object-fit: contain;
  image-rendering: pixelated;
  border-radius: 3px;
  background: rgba(0, 0, 0, .28);
}
.rbigicon {
  height: 52px;
  width: auto;
  margin-right: 10px;
  vertical-align: middle;
  image-rendering: pixelated;
}
.rvalicon {
  width: 32px;
  height: 26px;
  flex: none;
  object-fit: contain;
  image-rendering: pixelated;
  border-radius: 3px;
  background: rgba(0, 0, 0, .28);
}

/* ---------- 规则结构：对象属性面板（字段控件化） ---------- */
.rpanel {
  flex: none;
  width: clamp(470px, 46vw, 780px);
  overflow: auto;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 12px 14px 0;
  display: flex;
  flex-direction: column;
}
.rhead {
  display: flex;
  gap: 12px;
  align-items: center;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.rhead .rbigicon { height: 46px; margin-right: 0; flex: none; }
.rheadmain { min-width: 0; }
.rheadt {
  font-size: 15px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}
.rheadt b { color: var(--brand2); font-family: Consolas, monospace; }
.kbadge {
  font-size: 11px;
  font-weight: 400;
  color: var(--brand2);
  background: rgba(91, 140, 255, .12);
  border: 1px solid rgba(91, 140, 255, .35);
  border-radius: 20px;
  padding: 1px 8px;
}
.rhead .sum { font-size: 11.5px; color: var(--fg3); }
#ffhdcnt { color: var(--warn); }

.rfilter {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 10px 0;
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--panel);
}
.rfilter #ffq { flex: 1; min-width: 0; }
.chk {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  font-size: 12px;
  color: var(--fg2);
  white-space: nowrap;
  cursor: pointer;
}
.chk input { accent-color: var(--brand); }

/* 分组卡片。
   注意：这里不能加 flex:1 —— 面板是定高的列向 flex，flex:1 会把这个盒子
   压成「剩余高度」，里面几千像素的字段行溢出盒外，面板滚动和吸底条全乱
   （字段被裁、保存条跑没影）。让它按内容自然增高，由 .rpanel 整体滚动。 */
.fgroups { flex: none; min-height: 40px; }
.fgrp {
  border: 1px solid var(--line);
  border-radius: var(--r);
  margin-bottom: 8px;
  background: var(--elev);
  overflow: hidden;
}
.fgrp > summary {
  cursor: pointer;
  padding: 8px 12px;
  font-weight: 600;
  font-size: 12.5px;
  display: flex;
  align-items: center;
  gap: 8px;
  user-select: none;
}
.fgrp > summary:hover { background: var(--hover); }
.fgrp[open] > summary { border-bottom: 1px solid var(--line); }
.fgrp > summary .sum { margin-left: auto; color: var(--fg3); font-weight: 400; }
.fbody { padding: 3px 8px 6px; }

/* 字段行：左键名（中文 + 英文小字）/ 右控件 */
.frow {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 4px 6px;
  border-radius: 6px;
  border-left: 3px solid transparent;
}
.frow:hover { background: var(--hover); }
.frow.dirty { border-left-color: var(--warn); background: rgba(245, 166, 35, .06); }
.fkey { width: 176px; flex: none; min-width: 0; line-height: 1.28; }
.fkzh {
  display: block;
  font-size: 12.5px;
  color: var(--fg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fkzh:empty { display: none; }
.fken {
  display: block;
  font-size: 10.5px;
  color: var(--fg3);
  font-family: Consolas, monospace;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fctl { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; }
.fctl > input, .fctl > select { width: 100%; min-width: 0; }
.fctl .rvalicon { flex: none; }
/* 已改字段的原件原值（.forig）：摆出来供对照，点了直接还原 */
.fctl .forig {
  flex: none;
  font-size: 11.5px;
  color: var(--fg2);
  background: rgba(245, 166, 35, .1);
  border: 1px dashed rgba(245, 166, 35, .5);
  border-radius: 6px;
  padding: 2px 7px;
  cursor: pointer;
  white-space: nowrap;
  max-width: 46%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fctl .forig b { color: var(--warn); font-weight: 600; font-family: Consolas, monospace; }
.fctl .forig:hover { background: rgba(245, 166, 35, .2); color: var(--fg); }
.frow.dirty .fctl > input:not([type="range"]),
.frow.dirty .fctl > select { color: var(--warn); border-color: rgba(245, 166, 35, .45); }
.empty { color: var(--fg3); padding: 14px 4px; }

/* 数字：滑块 + 数字框（可拖动，也可精确输入/超范围）
   全部自定义样式：原生 thumb 太大，原生加减号会盖住右对齐的数字且不好看。 */
.numc { display: flex; align-items: center; gap: 10px; width: 100%; min-width: 0; }
.numc .rng {
  flex: 1;
  min-width: 60px;
  height: 16px;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  cursor: pointer;
}
/* --p（0~100%）由 JS 维护：webkit 用它画已填充段；Firefox 用原生 range-progress */
.numc .rng::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(to right, var(--brand) var(--p, 0%), #2b3341 var(--p, 0%));
}
.numc .rng::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 11px;
  height: 11px;
  margin-top: -3.5px;
  border-radius: 50%;
  background: #dfe5f0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .5);
  transition: transform .12s, background .12s;
}
.numc .rng:hover::-webkit-slider-thumb,
.numc .rng:active::-webkit-slider-thumb {
  transform: scale(1.2);
  background: #fff;
}
.numc .rng:focus-visible { outline: none; }
.numc .rng:focus-visible::-webkit-slider-thumb { background: var(--brand2); }
.numc .rng::-moz-range-track { height: 4px; border-radius: 2px; background: #2b3341; }
.numc .rng::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--brand); }
.numc .rng::-moz-range-thumb {
  width: 11px;
  height: 11px;
  border: none;
  border-radius: 50%;
  background: #dfe5f0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}

/* 数字框：藏掉原生加减号，右侧留位给悬停浮出的微调按钮 */
.numc .nwrap { position: relative; flex: none; }
.numc .num {
  width: 84px;
  text-align: right;
  font-family: Consolas, monospace;
  padding-right: 20px;
  appearance: textfield;
  -moz-appearance: textfield;
}
.numc .num::-webkit-outer-spin-button,
.numc .num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.numc .nspin {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  transition: opacity .12s;
}
.numc .nwrap:hover .nspin,
.numc .nwrap:focus-within .nspin { opacity: 1; }
.numc .nspin button {
  width: 15px;
  height: 10px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  font-size: 8px;
  line-height: 1;
  color: var(--fg3);
  background: var(--elev);
  border-color: var(--line);
}
.numc .nspin button:hover { color: var(--brand2); border-color: var(--brand); }

/* 开关：两个互斥单选（胶囊样式，保留 radio 语义） */
.rbg { display: flex; gap: 6px; align-items: center; }
label.rb {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 11px;
  border: 1px solid var(--line2);
  border-radius: 20px;
  background: var(--panel);
  color: var(--fg2);
  cursor: pointer;
  font-size: 12px;
  transition: all .12s;
}
label.rb:hover { border-color: var(--brand); color: var(--fg); }
label.rb.on {
  background: rgba(91, 140, 255, .16);
  border-color: var(--brand);
  color: var(--brand2);
  font-weight: 600;
}
label.rb input { display: none; }
label.rb:has(:checked) {
  background: rgba(91, 140, 255, .16);
  border-color: var(--brand);
  color: var(--brand2);
  font-weight: 600;
}
.rbg .sum { font-size: 11.5px; color: var(--fg3); }

/* 底部改动条 */
.rsavebar {
  position: sticky;
  bottom: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px -14px 0;
  margin-top: auto;                /* 字段少时把操作条推到面板底部；字段多时跟在内容后头 */
  padding: 9px 14px;
  background: var(--panel);
  border-top: 1px solid var(--line);
}
.rsavebar .sum { font-size: 12px; color: var(--fg2); }
.rsavebar button { padding: 5px 12px; }
.rsavebar button.primary {
  color: #fff;
  background: var(--brand);
  border-color: var(--brand);
  font-weight: 600;
}
.rsavebar button.primary:hover:not(:disabled) { background: var(--brand2); border-color: var(--brand2); }
.rsavebar button:disabled { opacity: .45; cursor: default; }

@media (max-width: 1280px) {
  .rpanel { width: clamp(430px, 52vw, 660px); }
}

/* ---------- 武器 -> 使用者（规则结构页 · 武器段） ---------- */
.wusage { margin: 0 0 10px; }
.wusage .fgrp { margin-bottom: 0; }
.wusage .fbody { padding: 8px 10px 10px; }
.wusage .hint { margin: 0 0 8px; }
.wusage .hint.wbad { color: var(--warn); }
.wutop { margin: 0 0 8px; }
.wutop input { width: 100%; }
.wulist { max-height: 264px; overflow: auto; }
.wugrp {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  padding: 5px 0; border-bottom: 1px dashed var(--line);
}
.wugrp:last-child { border-bottom: 0; }
.wugrp > .badge { flex: none; width: 76px; text-align: center; }
.wub {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px; font-size: 12px; border-radius: 7px;
}
.wub .sum { font-size: 11px; }
.wub .sum.via { color: var(--warn); opacity: .85; }

/* 字段行里的武器引用：中文名 / 未登记警告 / 跳到武器段 */
.fctl .wzh { color: var(--fg2); font-size: 12px; white-space: nowrap; }
.fctl .wbad {
  color: var(--warn); font-size: 11px; padding: 1px 7px;
  border: 1px solid rgba(245, 166, 35, .45); border-radius: 6px;
}
.fctl .wjump { flex: none; padding: 4px 9px; font-size: 12px; }