/* 暗黑破坏神III · Switch 配装器 — 暗黑哥特风 */
:root {
  --bg0: #0b0908;
  --bg1: #14100c;
  --bg2: #1c1611;
  --bg3: #251d15;
  --line: #3a2d1c;
  --line2: #55401f;
  --gold: #c7a961;
  --gold-hi: #eed9a4;
  --txt: #d8cdb8;
  --txt-dim: #8a7d63;
  --leg: #e88c3c;
  --set: #6fd66f;
  --red: #b03030;
  --blue: #6f9fd8;
  --anc: #c85050;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { color-scheme: dark; }
body {
  background: radial-gradient(ellipse 120% 80% at 50% -10%, #241a10 0%, var(--bg1) 55%, var(--bg0) 100%) fixed;
  color: var(--txt);
  font: 14px/1.6 "Microsoft YaHei", "PingFang SC", "Noto Sans SC", sans-serif;
  min-height: 100vh;
}
h1, h2, h3, .serif { font-family: Georgia, "Times New Roman", "STZhongsong", "SimSun", serif; letter-spacing: .04em; }
a { color: var(--gold); }
button { font: inherit; cursor: pointer; }
input, select, textarea { font: inherit; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--line2); border-radius: 5px; }
::-webkit-scrollbar-track { background: var(--bg1); }

/* ---------- 头部 ---------- */
#topbar {
  border-bottom: 2px solid var(--line2);
  background: linear-gradient(180deg, rgba(199,169,97,.08), transparent 70%), var(--bg1);
  padding: 10px 16px 0;
}
.title-row { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; padding-bottom: 6px; }
.title-row h1 { font-size: 22px; color: var(--gold-hi); text-shadow: 0 0 14px rgba(199,169,97,.35); }
.title-row .sub { color: var(--txt-dim); font-size: 12px; }
.build-ctl { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
#buildname { width: 150px; }
#classtabs { display: flex; gap: 2px; flex-wrap: wrap; }
#classtabs button {
  background: none; border: 1px solid transparent; border-bottom: none;
  color: var(--txt-dim); padding: 7px 14px; border-radius: 6px 6px 0 0;
}
#classtabs button.on {
  color: var(--gold-hi); border-color: var(--line2); background: var(--bg2);
  box-shadow: inset 0 2px 0 var(--gold);
}
#viewtabs { display: flex; gap: 2px; flex-wrap: wrap; padding: 0 8px; }
#viewtabs button {
  background: none; border: none; color: var(--txt-dim); padding: 8px 16px; font-size: 15px;
  border-bottom: 2px solid transparent;
}
#viewtabs button.on { color: var(--gold-hi); border-bottom-color: var(--gold); }

/* ---------- 布局 ---------- */
main { max-width: 1340px; margin: 0 auto; padding: 14px 16px 60px; }
.panel {
  background: linear-gradient(180deg, rgba(255,255,255,.015), transparent), var(--bg2);
  border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; margin-bottom: 14px;
}
.panel h3 { color: var(--gold); font-size: 15px; margin-bottom: 8px; border-bottom: 1px solid var(--line); padding-bottom: 6px; }
#build-grid { display: grid; grid-template-columns: minmax(0, 460px) minmax(0, 1fr); gap: 14px; align-items: start; }
/* 700~1024（平板/阔折叠）保持双栏桌面级布局，≤699 才塌单列 */
@media (max-width: 699px) { #build-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- 图标（图集切图） ---------- */
.ico {
  display: inline-block; flex: none; vertical-align: middle;
  background-image: var(--atlas); background-repeat: no-repeat;
  background-size: var(--icon-bgx) var(--icon-bgy);
  background-position: var(--p, 0 0);
}
.ico-ph { display: inline-block; flex: none; width: 40px; height: 40px; border-radius: 6px; border: 1px dashed var(--line2); opacity: .5; }

/* ---------- 纸娃娃（游戏式穿戴展示） ---------- */
#dollpanel { overflow: hidden; }
.doll-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; border-bottom: 1px solid var(--line); padding-bottom: 6px; }
.doll-head h3 { flex: 1; margin: 0; border: none; padding: 0; }
.sexsw { display: flex; gap: 4px; }
.sexsw .btn.on { border-color: var(--gold); color: var(--gold-hi); background: linear-gradient(180deg, #3a2e1a, #241c10); }

#dollstage { position: relative; margin: 2px auto 6px; }
#dollcanvas {
  position: absolute; left: 0; top: 0; width: 340px; height: 450px;
  transform-origin: top left;
  background-repeat: no-repeat; background-size: 340px 450px;
  border-radius: 10px; border: 1px solid var(--line);
  box-shadow: inset 0 0 60px 18px rgba(0,0,0,.5);
}
.dslot {
  position: absolute; display: flex; align-items: center; justify-content: center;
  border: 1px solid transparent; border-radius: 7px; cursor: pointer;
  transition: background .14s, border-color .14s, box-shadow .14s;
}
.dslot:hover { background: rgba(255,255,255,.08); border-color: var(--gold); box-shadow: 0 0 14px rgba(199,169,97,.45); }
.dslot .ico { filter: drop-shadow(0 2px 3px rgba(0,0,0,.8)); }
.dslot.q-legendary { border-color: rgba(194,147,55,.75); background: radial-gradient(ellipse at center, rgba(232,140,60,.14), transparent 72%); }
.dslot.q-set { border-color: rgba(135,167,61,.75); background: radial-gradient(ellipse at center, rgba(111,214,111,.14), transparent 72%); }
.dslot.disabled { opacity: .38; }
.dslot .dl { display: none; position: absolute; inset: 0; align-items: center; justify-content: center;
  font-size: 11px; color: rgba(226,214,190,.62); letter-spacing: .08em; text-shadow: 0 1px 3px #000; }
.dslot.empty .dl { display: flex; }
.dslot .amark, .dslot .pmark { position: absolute; right: 2px; bottom: 0; font-size: 9px; line-height: 1.2; padding: 0 2px; border-radius: 3px; background: rgba(0,0,0,.6); }

/* 已穿戴清单（纸娃娃下方的紧凑列表） */
.gl-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin: 6px 0 4px; color: var(--gold); font-size: 12.5px; }
.gl-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px 10px; }
.gitem { display: flex; align-items: center; gap: 7px; padding: 4px 6px; border-radius: 7px; cursor: pointer;
  border: 1px solid transparent; min-width: 0; }
.gitem:hover { background: rgba(199,169,97,.07); border-color: var(--line); }
.gitem.q-legendary { border-color: rgba(122,82,38,.7); }
.gitem.q-set { border-color: rgba(47,107,53,.7); }
.gi-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.gi-slot { font-size: 10.5px; color: var(--txt-dim); }
.gi-name { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gitem.empty .gi-name { color: #5b5142; font-style: italic; }
.gi-sub { font-size: 10.5px; color: var(--txt-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#dolllegend { margin-top: 6px; }
@media (max-width: 640px) { .gl-grid { grid-template-columns: minmax(0, 1fr); } }

.q-legendary, .leg { color: var(--leg); }
.q-set, .setc { color: var(--set); }
.amark { font-size: 10px; color: var(--anc); font-weight: bold; }
.pmark { font-size: 10px; color: #e8b33c; font-weight: bold; }

/* ---------- 通用控件 ---------- */
.btn {
  background: linear-gradient(180deg, #2b2318, #1d1710);
  border: 1px solid var(--line2); color: var(--txt); border-radius: 6px; padding: 5px 12px;
}
.btn:hover { border-color: var(--gold); color: var(--gold-hi); }
.btn.primary { border-color: #8a6c2f; color: var(--gold-hi); background: linear-gradient(180deg, #3a2e1a, #241c10); }
.btn.danger { border-color: #6b2f2f; color: #d88; }
.btn.mini { padding: 2px 8px; font-size: 12px; }
input[type=text], input[type=number], input[type=search], select, textarea {
  background: var(--bg1); border: 1px solid var(--line); color: var(--txt);
  border-radius: 6px; padding: 5px 8px;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--gold); }
textarea { width: 100%; resize: vertical; }
select { max-width: 100%; }

/* ---------- 列表/表格 ---------- */
table.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl th { text-align: left; color: var(--txt-dim); font-weight: normal; border-bottom: 1px solid var(--line); padding: 4px 6px; white-space: nowrap; }
.tbl td { border-bottom: 1px solid #221b12; padding: 5px 6px; vertical-align: top; }
.tbl tr.click { cursor: pointer; }
.tbl tr.click:hover td { background: rgba(199,169,97,.05); }
.tbl .btn { white-space: nowrap; }

/* ---------- 模态 ---------- */
#modal { position: fixed; inset: 0; display: none; z-index: 50; }
#modal.on { display: block; }
#modal .overlay { position: absolute; inset: 0; background: rgba(0,0,0,.72); }
#modal .mbox {
  position: relative; max-width: 780px; margin: 4vh auto; max-height: 90vh; overflow: auto;
  background: var(--bg2); border: 1px solid var(--line2); border-radius: 12px; padding: 16px 18px;
  box-shadow: 0 12px 60px rgba(0,0,0,.7);
}
#modal .mbox h3 { color: var(--gold-hi); margin-bottom: 10px; }
#modal .mbox::-webkit-scrollbar { width: 8px; }
#modal .mbox::-webkit-scrollbar-thumb { background: #3a2f1e; }
#modal .mbox::-webkit-scrollbar-track { background: transparent; }
.mclose { position: absolute; right: 12px; top: 10px; background: none; border: none; color: var(--txt-dim); font-size: 18px; }
.mclose:hover { color: var(--gold-hi); }

/* ---------- 物品选择器 ---------- */
.pick-filters { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.pick-list { max-height: 46vh; overflow: auto; border: 1px solid var(--line); border-radius: 8px; }
.pick-item {
  display: flex; gap: 8px; align-items: baseline; width: 100%; text-align: left;
  background: none; border: none; border-bottom: 1px solid #221b12; padding: 7px 10px; color: var(--txt);
}
.pick-item:hover { background: rgba(199,169,97,.07); }
.pick-item .en { color: var(--txt-dim); font-size: 11.5px; }
.pick-item .badge { margin-left: auto; font-size: 11px; color: var(--txt-dim); white-space: nowrap; }

/* ---------- 词缀编辑 ---------- */
.aff-row { display: flex; gap: 8px; align-items: center; padding: 4px 0; border-bottom: 1px dashed #241c12; flex-wrap: wrap; }
.aff-row input[type=number] { width: 90px; }
.aff-row .rng { color: var(--txt-dim); font-size: 12px; white-space: nowrap; }
.aff-row label { display: flex; gap: 6px; align-items: center; cursor: pointer; min-width: 190px; }
.aff-extra { font-size: 12px; }
.power-box { color: #e8b06a; background: rgba(232,140,60,.05); border: 1px solid #4a3a22; border-radius: 8px; padding: 8px 10px; margin: 8px 0; font-size: 13px; }
.function-panel#cubeband .btn[data-act^="cube"] { display: inline-block; }
#cubeband button[data-act="cube"] { min-width: 60%; padding: 8px 14px; text-align: left; }
#modal .pick-item .badge { text-align: right; }

/* ---------- 套装 ---------- */
.setpiece { display: inline-block; border: 1px solid #2f6b35; background: rgba(111,214,111,.05); color: var(--set); border-radius: 6px; padding: 3px 8px; margin: 2px; font-size: 12px; cursor: pointer; }
.setpiece:hover { border-color: var(--set); }
.tier { margin: 4px 0; padding: 6px 8px; border-left: 3px solid var(--line2); background: rgba(255,255,255,.015); font-size: 12.5px; }
.tier.on { border-left-color: var(--gold); background: rgba(199,169,97,.07); }
.tier .tstat { color: var(--txt-dim); font-size: 11px; }
.rrg-badge { color: var(--gold-hi); border: 1px solid var(--gold); border-radius: 4px; padding: 0 6px; font-size: 11px; }

/* ---------- 技能 ---------- */
.sk-row { display: grid; grid-template-columns: 52px minmax(0, 1fr) minmax(0, 1fr); gap: 6px; align-items: center; margin-bottom: 6px; }
.sk-row .key { color: var(--txt-dim); font-size: 12px; text-align: center; }

/* ---------- 伤害计算 ---------- */
.calc-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: start; }
@media (max-width: 699px) { .calc-grid { grid-template-columns: minmax(0, 1fr); } }
.factor td:first-child { white-space: nowrap; }
.bucket-src { color: var(--txt-dim); font-size: 12px; }
.mult { color: #e8b33c; }
.addb { color: var(--blue); }
.result-box { font-size: 16px; }
.result-box b { color: var(--gold-hi); font-size: 20px; }
.formula { font-family: Consolas, monospace; font-size: 12px; color: var(--txt-dim); word-break: break-all; background: var(--bg1); border: 1px solid var(--line); border-radius: 8px; padding: 8px; }

/* ---------- 筛选条 ---------- */
.filterbar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; align-items: center; }
.filterbar .cnt { color: var(--txt-dim); margin-left: auto; font-size: 12.5px; }

/* ---------- 说明 ---------- */
#view-about .panel { max-width: 900px; }
#view-about li { margin-left: 18px; margin-bottom: 4px; }
.tag { display: inline-block; border: 1px solid var(--line2); color: var(--txt-dim); border-radius: 4px; padding: 0 6px; font-size: 11px; margin-right: 4px; }
/* 说明 · 玩家手册 */
.about-nav { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.about-nav a {
  display: inline-block; border: 1px solid var(--line2); border-radius: 6px;
  color: var(--txt); background: linear-gradient(180deg, #2b2318, #1d1710);
  padding: 4px 10px; font-size: 12.5px; text-decoration: none;
}
.about-nav a:hover { border-color: var(--gold); color: var(--gold-hi); }
#view-about .man-steps { list-style: none; margin-left: 0; counter-reset: step; }
#view-about .man-steps li { counter-increment: step; position: relative; padding-left: 34px; margin: 0 0 12px; }
#view-about .man-steps li::before {
  content: counter(step); position: absolute; left: 0; top: 2px;
  width: 22px; height: 22px; border-radius: 50%; text-align: center; line-height: 22px;
  background: linear-gradient(180deg, #3a2e1a, #241c10); border: 1px solid var(--gold);
  color: var(--gold-hi); font-size: 12.5px; font-weight: 700;
}
.man-tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; margin: 8px 0; }
.man-tbl th, .man-tbl td { border-bottom: 1px solid #221b12; padding: 5px 7px; text-align: left; vertical-align: top; }
.man-tbl th { color: var(--txt-dim); font-weight: normal; white-space: nowrap; }
.man-tbl td:first-child { color: var(--gold-hi); white-space: nowrap; }
.faq dt { color: var(--gold-hi); font-weight: 600; margin-top: 10px; }
.faq dd { margin: 2px 0 0 0; }
.man-note { color: var(--txt-dim); font-size: 12px; }
.kbd { border: 1px solid var(--line2); border-radius: 4px; padding: 0 5px; font-size: 12px; background: var(--bg1); font-family: Consolas, monospace; }

/* ---------- 提示 ---------- */
#toast {
  position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%);
  background: var(--bg3); border: 1px solid var(--gold); color: var(--gold-hi);
  padding: 8px 18px; border-radius: 8px; opacity: 0; pointer-events: none; transition: opacity .25s; z-index: 99;
}
#toast.on { opacity: 1; }
.hidden { display: none !important; }

/* ---------- 响应式适配总控 ----------
   目标机型：手机竖屏 10:16 ≤640（Pura X 外屏类）/ 阔折叠内屏 16:10（700~1024 且矮横屏）/ 平板 700~1024 / 桌面 ≥1025 不变 */

#dblist { overflow-x: auto; }
#view-db .panel, #view-calc .panel { max-width: 100%; }
.tbl { min-width: 520px; }
/* grid 项 min-width:auto 会把内容的 min-content 传给 1fr 轨道导致整页撑破——这是根因 */
#build-grid > .panel, .calc-grid > .panel { min-width: 0; }
.panel { overflow-x: auto; }
input[type=checkbox] { accent-color: var(--gold); }
/* 手机/平板上魔盒不在右侧，隐藏「在右侧」半句 */
@media (max-width: 1024px) { .hint-cube { display: none; } }

/* ---- 手机竖屏 10:16（≤640）：标签单行横滑、触控目标加大 ---- */
@media (max-width: 640px) {
  #parband > div { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 640px) {
  main { padding: 10px 8px calc(50px + env(safe-area-inset-bottom, 0px)); }
  .panel { padding: 10px; border-radius: 8px; }
  .title-row h1 { font-size: 18px; }
  .title-row .sub { display: none; }
  .build-ctl { width: 100%; }
  /* 职业/视图标签单行横滑，不再折行吃掉半屏 */
  #classtabs, #viewtabs { flex-wrap: nowrap; overflow-x: auto; }
  #classtabs::-webkit-scrollbar, #viewtabs::-webkit-scrollbar { display: none; }
  #classtabs button, #viewtabs button { flex: none; }
  #classtabs button { padding: 7px 11px; font-size: 13px; }
  #viewtabs button { padding: 8px 11px; font-size: 13.5px; }
  /* 配装控制区：下拉框与名称框弹性占满一行，减少折行 */
  .build-ctl select, .build-ctl #buildname { flex: 1 1 140px; min-width: 0; }
  /* 触控目标加大 */
  .btn { padding: 7px 13px; }
  .btn.mini { padding: 5px 10px; font-size: 12.5px; }
  .pick-item { padding: 10px 12px; }
  input[type=checkbox] { width: 18px; height: 18px; }
  .sk-row { grid-template-columns: 40px minmax(0, 1fr) minmax(0, 1fr); }
  #modal .mbox { width: calc(100vw - 16px); margin: 1.5vh auto; padding: 12px; max-height: 94vh; }
  .aff-row label { min-width: 150px; }
  .result-box b { font-size: 17px; }
  .dslot .dl { font-size: 10px; letter-spacing: 0; }
  #toast { bottom: calc(26px + env(safe-area-inset-bottom, 0px)); max-width: calc(100vw - 24px); }
}

/* ---- 平板 + 阔折叠（641~1024）：紧凑头部，回归桌面级信息密度 ---- */
@media (min-width: 641px) and (max-width: 1024px) {
  #topbar { padding: 8px 14px 0; }
  .title-row h1 { font-size: 18px; }
  .title-row { gap: 10px; padding-bottom: 4px; }
  #classtabs button { padding: 5px 10px; font-size: 12.5px; }
  #viewtabs button { padding: 6px 11px; font-size: 13.5px; }
  main { padding: 10px 14px 46px; }
  .panel { padding: 11px 13px; margin-bottom: 11px; }
}

/* ---- 阔折叠内屏 16:10（矮横屏）：头部再压缩，弹窗/选择器吃满高度 ---- */
@media (min-width: 641px) and (max-width: 1024px) and (max-height: 620px) {
  .title-row .sub { display: none; }
  .title-row { padding-bottom: 2px; }
  .build-ctl { gap: 4px; }
  #buildname { width: 110px; }
  #classtabs button { padding: 4px 8px; font-size: 12px; }
  #viewtabs button { padding: 5px 9px; font-size: 13px; }
  .panel h3 { font-size: 14px; margin-bottom: 6px; padding-bottom: 4px; }
  .pick-list { max-height: 72vh; }
  #modal .mbox { margin: 1vh auto; max-height: 96vh; padding: 12px 14px; }
  main { padding-top: 8px; }
}

/* ---- 平板/阔折叠（700~1024）：配装保持双栏桌面级布局（纸娃娃列随宽自适应） ---- */
@media (min-width: 700px) and (max-width: 1024px) {
  #build-grid { grid-template-columns: minmax(0, min(380px, 46%)) minmax(0, 1fr); gap: 11px; }
  .gl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- 矮横屏（如外屏手机横过来）双栏太挤，塌单列 ---- */
@media (min-width: 700px) and (max-height: 460px) {
  #build-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- 图标在各列表里的落位 ---------- */
.pick-item { align-items: center; }
.pick-item .ico { margin-right: 2px; }
.tbl .icohead { width: 32px; }
.tbl .icocell { width: 32px; padding-right: 0; }
.tbl .icocell .ico { display: block; }
.setpiece .ico { vertical-align: -5px; margin-right: 3px; }
.detail-head { display: flex; align-items: center; gap: 12px; }
.detail-head .ico { filter: drop-shadow(0 3px 5px rgba(0,0,0,.75)); }
.detail-head .dh-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }

/* ---------- 魔盒 / 宝石 ---------- */
.cube-row { margin-bottom: 9px; }
.cube-ctl { display: flex; gap: 6px; align-items: center; }
.cube-btn { min-width: 62%; padding: 6px 12px; text-align: left; display: inline-flex; align-items: center; gap: 7px; }
.cube-btn .ico { vertical-align: middle; }
.cube-pw { margin-top: 3px; }
.gem-line { margin-bottom: 6px; }
.gem-row { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; }
.gem-row select { min-width: 0; }  /* 选项文本长会把 flex 撑破面板，允许收缩 */
.gem-row .gmi { border-radius: 50%; box-shadow: 0 0 8px rgba(111,159,216,.25); }
.ico-ph.gmi { width: 28px; height: 28px; border-radius: 50%; }

/* ---------- 技能图鉴 ---------- */
.runechip { display: inline-block; width: 22px; height: 22px; line-height: 21px; text-align: center; border-radius: 50%; border: 1px solid var(--gold); color: var(--gold-hi); font-size: 11px; }
.sktbl td { vertical-align: top; }
.skcard { padding: 8px 0; border-bottom: 1px dashed #241c12; }
.skcard:last-child { border-bottom: none; }

/* ---------- 梦想装备（虚） ---------- */
.dmark {
  font-size: 10px; font-weight: bold; color: #9b7fd8;
  border: 1px solid #6b52a8; border-radius: 3px; padding: 0 3px;
  background: rgba(155,127,216,.12);
}
.dslot.dream { border-style: dashed !important; border-color: #6b52a8 !important;
  background: repeating-linear-gradient(45deg, rgba(155,127,216,.10) 0 6px, transparent 6px 12px) !important; }
.gitem.dream { border-style: dashed; border-color: #6b52a8; }
.pick-item.dream, .dream-row { background: rgba(155,127,216,.05); }
.dream-row td { font-style: italic; }

/* ---------- 毕业进度 ---------- */
.gap-summary { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.gap-pill {
  border: 1px solid var(--gc); color: var(--gc); border-radius: 4px;
  padding: 1px 8px; font-size: 11.5px; background: rgba(255,255,255,.02);
}
.gap-note {
  border-left: 3px solid #c9a04a; background: rgba(201,160,74,.07);
  padding: 6px 8px; font-size: 12px; color: #d8c08a; margin-bottom: 8px; border-radius: 0 4px 4px 0;
}
.gap-list { display: flex; flex-direction: column; gap: 2px; }
.gap-row {
  display: grid; grid-template-columns: 46px minmax(0,1.3fr) 74px minmax(0,1fr) 52px;
  gap: 8px; align-items: center; padding: 3px 4px; border-radius: 5px; font-size: 12.5px;
}
.gap-row:hover { background: rgba(199,169,97,.05); }
.gap-slot { color: var(--txt-dim); font-size: 11.5px; }
.gap-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gap-name.dream { font-style: italic; color: #b9a3e8; }
.gap-badge {
  text-align: center; border: 1px solid var(--gc); color: var(--gc);
  border-radius: 4px; font-size: 11px; padding: 0 4px;
}
.gap-detail { font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gap-tgt { padding: 0 6px !important; font-size: 11px !important; opacity: .65; }
.gap-row:hover .gap-tgt { opacity: 1; }

/* ---------- 目标词缀编辑 ---------- */
.tgt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 2px 12px; margin-top: 6px; }
.tgt-row { display: flex; gap: 6px; align-items: center; padding: 3px 0; cursor: pointer; font-size: 13px; }
.tgt-row .rng { font-size: 11px; margin-left: auto; }

/* ---------- 赛季主题 ---------- */
#themesel.themed {
  border-color: #8a6c2f; color: var(--gold-hi);
  background: linear-gradient(180deg, #3a2e1a, #241c10);
}