/* ===== 崩坏：星穹铁道 离线 Wiki — 样式表 ===== */

:root {
  /* 浅色主题 = 护眼米白。冷白 (#f4f5f8 + #ffffff) 长时间看偏刺眼，
     整体换成暖白：底色偏米、面板微暖，金色主色反而更协调。
     ⚠️ 只动色相不动明度差，保证 text / border 的对比度与原来一致（不牺牲可读性）。 */
  --bg: #f6f2e8;
  --panel: #fffdf7;
  --panel-2: #f2ecdf;
  --panel-3: #e9e2d2;
  --text: #2c2820;
  --text-dim: #6e6656;
  --text-faint: #9c9483;
  --border: #e5dece;
  --border-strong: #d1c8b4;
  --accent: #a8761c;
  --accent-soft: #f4ead4;
  --accent-text: #7a5510;
  --shadow: 0 1px 3px rgba(20, 25, 40, .06), 0 6px 20px rgba(20, 25, 40, .05);
  --shadow-lg: 0 12px 40px rgba(20, 25, 40, .16);
  --radius: 10px;
  --radius-sm: 6px;
  --sidebar-w: 232px;
}

[data-theme="dark"] {
  --bg: #13151c;
  --panel: #1b1e27;
  --panel-2: #22262f;
  --panel-3: #2b303b;
  --text: #e6e8ed;
  --text-dim: #9aa1b0;
  --text-faint: #6f7684;
  --border: #2c313d;
  --border-strong: #3c4351;
  --accent: #d9b45c;
  --accent-soft: #3a3220;
  --accent-text: #e6c877;
  --shadow: 0 1px 3px rgba(0, 0, 0, .3), 0 6px 20px rgba(0, 0, 0, .25);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, .5);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  font-family: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Source Han Sans SC",
               -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

button, input, select { font-family: inherit; font-size: inherit; color: inherit; }
button { cursor: pointer; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 5px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--text-faint); }

/* ---------- 布局 ---------- */
.app { display: flex; height: 100vh; }

.sidebar {
  width: var(--sidebar-w);
  flex: 0 0 var(--sidebar-w);
  background: var(--panel);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  z-index: 20;
}

.brand {
  padding: 18px 18px 14px;
  border-bottom: 1px solid var(--border);
}
.brand h1 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .3px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.brand .logo {
  width: 26px; height: 26px;
  border-radius: 7px;
  background: linear-gradient(135deg, #d9b45c, #b98b2e);
  color: #fff;
  display: grid; place-items: center;
  font-size: 14px; font-weight: 700;
  flex: 0 0 auto;
}
.brand .sub {
  margin-top: 6px;
  font-size: 11px;
  color: var(--text-faint);
  line-height: 1.5;
}

.nav { flex: 1; overflow-y: auto; padding: 10px 10px 20px; }

.nav-group-title {
  font-size: 11px;
  color: var(--text-faint);
  padding: 12px 10px 6px;
  font-weight: 600;
  letter-spacing: .5px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 8px 10px;
  border: none;
  background: none;
  border-radius: var(--radius-sm);
  color: var(--text-dim);
  text-align: left;
  transition: background .12s, color .12s;
  font-size: 13.5px;
}
.nav-item:hover { background: var(--panel-2); color: var(--text); }
.nav-item.active {
  background: var(--accent-soft);
  color: var(--accent-text);
  font-weight: 600;
}
.nav-item .ico { width: 17px; text-align: center; font-size: 13px; opacity: .85; }
.nav-item .txt { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-item .cnt {
  font-size: 11px;
  color: var(--text-faint);
  background: var(--panel-2);
  padding: 1px 6px;
  border-radius: 8px;
  font-variant-numeric: tabular-nums;
}
.nav-item.active .cnt { background: rgba(255,255,255,.5); color: var(--accent-text); }
[data-theme="dark"] .nav-item.active .cnt { background: rgba(255,255,255,.08); }

.nav-item.sub { padding-left: 26px; font-size: 13px; }

.sidebar-foot {
  padding: 10px 14px;
  border-top: 1px solid var(--border);
  font-size: 11px;
  color: var(--text-faint);
  line-height: 1.6;
}
.sidebar-foot b { color: var(--text-dim); font-weight: 600; }

/* ---------- 主区 ---------- */
.main { flex: 1; display: flex; flex-direction: column; min-width: 0; }

.topbar {
  height: 56px;
  flex: 0 0 56px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 18px;
}
.topbar h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  white-space: nowrap;
}
.topbar h2 .num {
  font-size: 12px;
  color: var(--text-faint);
  font-weight: 500;
  margin-left: 7px;
}

.search-wrap { position: relative; margin-left: auto; }
.search-wrap input {
  width: 240px;
  padding: 7px 32px 7px 32px;
  border: 1px solid var(--border-strong);
  border-radius: 18px;
  background: var(--panel-2);
  outline: none;
  transition: width .18s, border-color .15s, background .15s;
}
.search-wrap input:focus { width: 300px; border-color: var(--accent); background: var(--panel); }
.search-wrap .s-ico {
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  color: var(--text-faint); font-size: 13px; pointer-events: none;
}
.search-wrap .s-clear {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  border: none; background: var(--border-strong); color: var(--panel);
  width: 16px; height: 16px; border-radius: 50%; font-size: 11px;
  display: none; place-items: center; line-height: 1; padding: 0;
}
.search-wrap .s-clear.show { display: grid; }
.search-wrap input { width: 280px; }
.search-wrap input:focus { width: 340px; }

/* 「按版本」下拉：复用 .tbtn 观感，但 <select> 需要自己处理箭头与内边距 */
.versel {
  appearance: none; -webkit-appearance: none;
  padding-right: 24px;
  max-width: 210px;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 13px) 53%, calc(100% - 9px) 53%;
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
  text-overflow: ellipsis;
}
.versel.on { background-color: var(--accent-soft); color: var(--accent-text); border-color: var(--accent); }
.versel option { background: var(--panel); color: var(--text); }

/* 详情页右上角的条目操作（编辑 / 删除） */
.d-actions { display: flex; align-items: center; gap: 8px; }
.d-actions:not(:empty) { padding-left: 12px; border-left: 1px solid var(--border); }

.tbtn {
  border: 1px solid var(--border-strong);
  background: var(--panel);
  border-radius: var(--radius-sm);
  padding: 6px 11px;
  color: var(--text-dim);
  white-space: nowrap;
  transition: all .12s;
  font-size: 13px;
}
.tbtn:hover { background: var(--panel-2); color: var(--text); border-color: var(--accent); }
.tbtn.on { background: var(--accent-soft); color: var(--accent-text); border-color: var(--accent); }

/* ---------- 筛选区 ---------- */
.filterbar {
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  padding: 10px 18px 11px;
  /* 每个图鉴的筛选区都多了「实装版本」这一行（物品/细分分类最多，7 行），
     按视口给高度，小屏也不至于把卡片挤没 */
  max-height: min(34vh, 300px);
  overflow-y: auto;
  flex: 0 0 auto;
}
.frow { display: flex; align-items: flex-start; gap: 10px; padding: 3px 0; }
.flabel {
  flex: 0 0 68px;
  font-size: 12px;
  color: var(--text-faint);
  padding-top: 4px;
  font-weight: 600;
  user-select: none;
}
.chips { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; }
.chip {
  border: 1px solid var(--border);
  background: var(--panel-2);
  border-radius: 14px;
  padding: 3px 11px;
  font-size: 12.5px;
  color: var(--text-dim);
  transition: all .12s;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.chip:hover { border-color: var(--accent); color: var(--text); }
.chip.on {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-weight: 600;
}
[data-theme="dark"] .chip.on { color: #1b1e27; }
.chip .n { font-size: 10.5px; opacity: .7; font-variant-numeric: tabular-nums; }
.chip:disabled { opacity: .32; cursor: not-allowed; }
.chip:disabled:hover { border-color: var(--border); color: var(--text-dim); }

.fbar-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 8px;
  flex-wrap: wrap;
}
.sortsel {
  border: 1px solid var(--border-strong);
  background: var(--panel);
  border-radius: var(--radius-sm);
  padding: 4px 8px;
  outline: none;
  font-size: 12.5px;
}
.fstat { font-size: 12px; color: var(--text-faint); }
.linkbtn {
  border: none; background: none; color: var(--accent);
  font-size: 12px; padding: 2px 4px; text-decoration: underline;
}

/* ---------- 内容区 ---------- */
.content { flex: 1; overflow-y: auto; padding: 16px 18px 60px; }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(228px, 1fr));
  gap: 12px;
}
.grid.wide { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }

.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 13px 14px;
  cursor: pointer;
  transition: transform .12s, box-shadow .12s, border-color .12s;
  position: relative;
  overflow: hidden;
  min-width: 0;
}
.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
  border-color: var(--accent);
}
.card .c-head { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }
.card .c-title {
  font-weight: 600;
  font-size: 14.5px;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}
.card .c-sub {
  font-size: 11.5px;
  color: var(--text-faint);
  margin-bottom: 7px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.card .c-desc {
  font-size: 12.5px;
  color: var(--text-dim);
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card .c-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 7px; }
.card .c-foot {
  margin-top: 9px;
  padding-top: 8px;
  border-top: 1px dashed var(--border);
  font-size: 11.5px;
  color: var(--text-faint);
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
.card .c-foot span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- 已读标记（阅读进度，记在本机浏览器） ----------
   详情页顶栏那个切换按钮直接复用 `.tbtn.on` 的配色，这里只管列表侧的展示。
   ⚠️ 角标用 CSS `::after` 统一画，而不是往卡片 HTML 里塞元素 ——
   卡片内容由 17 个模块各自的 `card()` 生成，在渲染层加一个 `is-read` 类
   比逐个改 `card()` 可靠得多，也不会让「阅读进度」耦合进数据渲染。
   ⚠️ 这两条的**特异性都是 (0,2,0)**，与 `.card:hover` 打平，靠写在后面才压得住
   —— 挪到 `.card:hover` 之前，鼠标划过时已读底色就会被 hover 底色盖掉。 */
.card.is-read { background: var(--panel-2); border-color: var(--border); }
.card.is-read .c-title { color: var(--text-dim); }
.card.is-read::after {
  content: '✓ 已读';
  position: absolute; top: 8px; right: 8px; z-index: 2;
  padding: 1px 7px; border-radius: 9px;
  font-size: 10.5px; font-weight: 700; line-height: 1.6; letter-spacing: .2px;
  /* 主色底 + 面板色字：浅色主题 = 深金底 / 近白字，深色主题 = 亮金底 / 深字，
     两边都够对比度，不必为深色主题单独写一套。 */
  background: var(--accent); color: var(--panel);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .22);
  pointer-events: none;   /* 角标不能吃掉卡片本身的点击 */
}

/* 表格视图的已读样式见下方 table.dt 区块（要和 tr:hover 抢层叠，必须写在它后面） */

/* 全站搜索结果行（.rel-item 也用于详情页的「推荐光锥」，那边不会带 is-read）
   ⚠️ .rel-item 的**默认底色就是 --panel-2**（hover 是 --panel，会变亮），
   所以已读必须用更深一档的 --panel-3 —— 写 panel-2 等于没变化。 */
.rel-item.is-read { background: var(--panel-3); }
.rel-item.is-read .rt { color: var(--text-dim); }
.rel-item.is-read .rt::before { content: '✓ '; color: var(--accent); font-weight: 700; }

/* 遗器卡片：套装图标 + 内容 */
.relic-card { display: flex; gap: 11px; align-items: flex-start; }
.relic-set-icon {
  width: 62px; height: 62px; flex: 0 0 62px;
  object-fit: contain; border-radius: 10px;
  background: var(--bg-soft); padding: 4px; box-sizing: border-box;
}
.item-ic {
  width: 34px; height: 34px; flex: 0 0 34px;
  object-fit: contain; border-radius: 7px;
  background: var(--bg-soft); padding: 2px; box-sizing: border-box;
}
.relic-card-body { flex: 1; min-width: 0; }
.relic-piece-row { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.relic-piece-chip {
  width: 30px; height: 30px; object-fit: contain;
  border-radius: 7px; background: var(--bg-soft); padding: 2px; box-sizing: border-box;
}

/* 头像占位 */
.avatar {
  width: 38px; height: 38px;
  flex: 0 0 38px;
  border-radius: 9px;
  display: grid; place-items: center;
  font-size: 15px; font-weight: 700;
  color: #fff;
  letter-spacing: -1px;
}
.avatar.sm { width: 30px; height: 30px; flex-basis: 30px; font-size: 12.5px; border-radius: 7px; }

/* 属性色 */
.el-物理 { background: #9aa0ae; }
.el-火   { background: #ef5f4c; }
.el-冰   { background: #35b7d4; }
.el-雷   { background: #9b6de8; }
.el-风   { background: #2ec08a; }
.el-量子 { background: #4d7ee0; }
.el-虚数 { background: #e0a52a; }

.tag {
  display: inline-flex;
  align-items: center;
  font-size: 11.5px;
  padding: 1.5px 7px;
  border-radius: 4px;
  background: var(--panel-3);
  color: var(--text-dim);
  white-space: nowrap;
  line-height: 1.5;
}
.tag.el { color: #fff; font-weight: 600; }
.tag.gold { background: var(--accent-soft); color: var(--accent-text); font-weight: 600; }
.tag.out { background: transparent; border: 1px solid var(--border-strong); }
.tag.accent { background: var(--accent); color: #fff; font-weight: 600; }

.stars { color: #e8a33d; letter-spacing: 1px; font-size: 11px; white-space: nowrap; }
.stars .off { color: var(--border-strong); }

.r5 { color: #d98f2a; font-weight: 700; }
.r4 { color: #8b6cd8; font-weight: 700; }
.r3 { color: #4d96c4; font-weight: 700; }

/* 版本卡专用 */
.grid.ver { grid-template-columns: repeat(auto-fill, minmax(292px, 1fr)); }

.ver-cover {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin-bottom: 10px;
  /* 立绘缺失时的兜底背景 */
  background: linear-gradient(135deg, #2b3550 0%, #1b2233 55%, #3a2f4d 100%);
  display: grid;
  place-items: center;
}
.ver-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s ease;
}
.card:hover .ver-cover img { transform: scale(1.045); }

.ver-badge {
  position: absolute;
  left: 8px; bottom: 8px;
  background: rgba(12, 15, 24, .74);
  color: #fff;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -.3px;
  padding: 2px 9px;
  border-radius: 5px;
  font-variant-numeric: tabular-nums;
  line-height: 1.35;
}

.ver-name { font-size: 15px; font-weight: 700; margin-top: 1px; line-height: 1.4; }

/* 详情大图 */
.detail-cover {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 16px;
  background: var(--panel-2);
}
.detail-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* 光锥单图立绘（详情）：限制尺寸，随屏幕缩放而不溢出 */
.detail-char { text-align: center; }
.detail-char img {
  max-width: 100%; max-height: min(70vh, 720px);
  width: auto; object-fit: contain;
  border-radius: 12px; display: block; margin: 0 auto;
}

/* 表格里的缩略图 */
table.dt img.thumb {
  width: 80px;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 3px;
  display: block;
}
/* 角色立绘缩略图（3:4 完整显示，不裁切） */
table.dt img.thumb-port {
  width: 56px;
  aspect-ratio: 3 / 4;
  object-fit: contain;
  border-radius: 4px;
  display: block;
  background: var(--bg-soft);
}

/* 角色卡片立绘条 */
.c-cover {
  height: 172px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: var(--bg-soft);
  border-radius: 10px;
  margin-bottom: 10px;
  overflow: hidden;
}
.c-cover img { max-height: 100%; max-width: 100%; object-fit: contain; display: block; }
/* NPC 立绘详情：顶部居中，允许较高立绘完整显示 */
.modal-body > .c-cover { height: auto; max-height: 70vh; padding: 12px; }
.modal-body > .c-cover img { max-height: 70vh; }

/* 角色详情立绘画廊（左右箭头切换） */
.detail-gallery {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  position: relative;
  margin-bottom: 22px;
  padding: 0 4px;
}
.detail-gallery .g-stage { flex: 0 1 auto; max-width: 84%; text-align: center; }
.detail-gallery .g-img {
  max-height: min(72vh, 760px); max-width: 100%;
  object-fit: contain; border-radius: 8px;
  display: block; margin: 0 auto;
}
.detail-gallery .g-btn {
  flex: 0 0 auto;
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  font-size: 20px; line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s, border-color .15s;
}
.detail-gallery .g-btn:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.detail-gallery .g-dots {
  position: absolute;
  bottom: -16px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 7px;
}
.detail-gallery .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--border); cursor: pointer; transition: background .15s;
}
.detail-gallery .dot.on { background: var(--accent); }
.detail-gallery.single .g-btn,
.detail-gallery.single .g-dots { display: none; }

/* ---------- 表格视图 ---------- */
.table-wrap {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: auto;
  max-height: calc(100vh - 260px);
}
table.dt { width: 100%; border-collapse: collapse; font-size: 13px; }
table.dt th {
  position: sticky; top: 0; z-index: 2;
  background: var(--panel-2);
  text-align: left;
  padding: 9px 12px;
  font-weight: 600;
  color: var(--text-dim);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  font-size: 12.5px;
}
table.dt td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
  max-width: 380px;
}
table.dt tbody tr { cursor: pointer; transition: background .1s; }
table.dt tbody tr:hover { background: var(--panel-2); }
table.dt tbody tr:last-child td { border-bottom: none; }
/* 已读行：底色比 hover 深一档（panel-3），这样「已读」和「鼠标划过」不会看起来一样。
   特异性与 tr:hover 打平 (0,2,3)，靠写在后面胜出 —— 挪到 tr:hover 之前会被压掉。
   ⚠️ ✓ 标在 `td.name` 上而不是 `td:first-child`：17 个模块的 cols 都遵守
   `cls:'name'` 约定，但**首列不一定是名称**（角色表首列是立绘缩略图，
   标在首列会让 ✓ 飘到图片左边）。 */
table.dt tbody tr.is-read { background: var(--panel-3); }
table.dt tbody tr.is-read td.name::before {
  content: '✓ '; color: var(--accent); font-weight: 700;
}
table.dt td.clip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
table.dt td.name { font-weight: 600; white-space: nowrap; }

.empty {
  text-align: center;
  padding: 70px 20px;
  color: var(--text-faint);
}
.empty .big { font-size: 34px; margin-bottom: 10px; opacity: .5; }

/* ---------- 详情弹窗 ---------- */
.modal-mask {
  position: fixed; inset: 0;
  background: rgba(15, 18, 26, .5);
  backdrop-filter: blur(2px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 28px;
}
.modal-mask.show { display: flex; }
.modal {
  background: var(--panel);
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  width: min(760px, 100%);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: pop .16s ease-out;
}
@keyframes pop { from { opacity: 0; transform: translateY(10px) scale(.99); } }
.modal-head {
  padding: 16px 20px 14px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
}
.modal-head .m-title { font-size: 18px; font-weight: 700; flex: 1; min-width: 0; }
.modal-head .m-sub { font-size: 12px; color: var(--text-faint); font-weight: 400; margin-top: 2px; }
.modal-close {
  border: none; background: var(--panel-2);
  width: 28px; height: 28px; border-radius: 50%;
  color: var(--text-dim); font-size: 16px; line-height: 1;
  flex: 0 0 auto;
}
.modal-close:hover { background: var(--panel-3); color: var(--text); }
.modal-body { padding: 16px 20px 22px; overflow-y: auto; flex: 1; }

.sec { margin-bottom: 18px; }
.sec:last-child { margin-bottom: 0; }
.sec h4 {
  margin: 0 0 8px;
  font-size: 12px;
  color: var(--accent);
  font-weight: 700;
  letter-spacing: .6px;
  display: flex;
  align-items: center;
  gap: 7px;
}
.sec h4::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.sec p { margin: 0 0 8px; color: var(--text-dim); line-height: 1.75; font-size: 13.5px; }
.sec p:last-child { margin-bottom: 0; }
.sec .lead { color: var(--text); }
.sec .lore { color: var(--text-dim); font-style: normal; background: var(--bg-soft);
  border-left: 3px solid var(--accent); border-radius: 0 6px 6px 0; padding: 10px 12px; }

/* 遗器详情：套装图标 + 套装组成 */
.relic-set-icon-wrap { text-align: center; }
.relic-set-icon-wrap img {
  width: 120px; height: 120px; object-fit: contain;
  border-radius: 14px; background: var(--bg-soft); padding: 8px; box-sizing: border-box;
}
.relic-pieces { display: flex; flex-direction: column; gap: 14px; }
.relic-piece { display: flex; gap: 13px; align-items: flex-start; }
.relic-piece-icon {
  width: 72px; height: 72px; flex: 0 0 72px;
  object-fit: contain; border-radius: 12px;
  background: var(--bg-soft); padding: 6px; box-sizing: border-box;
}
.relic-piece-icon-empty {
  border: 1px dashed var(--border); background: transparent;
}
.relic-piece-info { flex: 1; min-width: 0; }
.relic-piece-head { display: flex; align-items: baseline; gap: 9px; margin-bottom: 6px; flex-wrap: wrap; }
.relic-piece-type {
  font-size: 11.5px; color: #fff; background: var(--accent);
  border-radius: 5px; padding: 1px 7px; font-weight: 600; flex: 0 0 auto;
}
.relic-piece-name { font-size: 14px; font-weight: 600; color: var(--text); }

.kv { display: grid; grid-template-columns: 78px 1fr; gap: 6px 12px; font-size: 13.5px; }
.kv dt { color: var(--text-faint); font-size: 12.5px; }
.kv dd { margin: 0; color: var(--text); }
/* ---------- 超宽屏：让「短内容」也把横向空间用起来 ----------
   详情页正文已铺满整宽（1920 屏上正文列约 1674～1864px）。如果仍按单栏
   左对齐排，属性表 / 关联列表这种短内容就会「全挤在左边、右侧一大片空白」，
   铺满反而显得更空。这里在大屏上把它们排成两栏，真正吃满宽度。
   ⚠️ 断点放在 1560px：窄于它的屏幕布局与以前**完全一致**，不会引入回归。
   ⚠️ 只作用于 .detail-page：列表页的弹窗自身宽度仍受 min(94vw, 1240px) 限制，
      媒体查询是按「视口」而非「容器」触发的，不限定作用域会把弹窗里的
      属性表也排成两栏。 */
@media (min-width: 1560px) {
  /* 属性键值表：4 列 = 两栏（顺序仍按「从左到右、从上到下」阅读） */
  .detail-page .kv {
    grid-template-columns: 78px minmax(0, 1fr) 78px minmax(0, 1fr);
    column-gap: 26px;
  }
  /* 关联条目列表（推荐光锥 / 遗器 / 相关条目）：两栏 */
  .detail-page .rel-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px 16px;
    align-items: start;
  }
  /* 角色行迹 / 角色星魂：条目多、单条短，单列排会在右侧空出一大片 */
  .detail-page .ch-traces {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 26px;
    align-items: start;
  }
  .detail-page .ch-eids {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 26px;
    align-items: start;
  }
}

.pill-list { display: flex; flex-wrap: wrap; gap: 6px; }
.pill {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 3px 9px;
  font-size: 12.5px;
  color: var(--text-dim);
}
.pill.click { cursor: pointer; }
.pill.click:hover { border-color: var(--accent); color: var(--accent-text); }

.quote {
  border-left: 3px solid var(--accent);
  background: var(--panel-2);
  padding: 10px 14px;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--text-dim);
  font-size: 13px;
  line-height: 1.75;
  font-style: italic;
}

.rel-list { display: flex; flex-direction: column; gap: 6px; }
.rel-item {
  display: flex; align-items: center; gap: 9px;
  width: 100%;                       /* 全站结果里它是 <button>，需要显式撑满 */
  text-align: left; color: inherit; font: inherit; font-size: 13px;
  padding: 7px 11px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color .12s, background .12s;
}
.rel-item:hover { background: var(--panel); }
.rel-item:hover { border-color: var(--accent); }
.rel-item .rt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 全站搜索 */
.gsec { margin-bottom: 20px; }
.gsec-t {
  font-size: 12px; color: var(--accent); font-weight: 700;
  margin-bottom: 8px; letter-spacing: .5px;
  display: flex; align-items: center; gap: 7px;
}
.gsec-t .gi-ico { font-size: 13px; opacity: .9; }
.gsec-t .n {
  margin-left: auto; font-weight: 600; font-size: 11px; letter-spacing: 0;
  color: var(--text-dim); background: var(--panel-2);
  border: 1px solid var(--border); border-radius: 9px; padding: 0 7px;
}

/* 全站检索结果：平衡多栏。
   用 columns 而不是 grid —— 分组之间条数差得很远（「成就」13 条 vs「版本图鉴」1 条），
   grid 要按行对齐，小组下面会留一大片空白；columns 会自动把高度摊平。
   break-inside 是软约束：某组特别高时浏览器会照常断开，不会因此出现空洞。 */
.gres { column-width: 330px; column-gap: 26px; }
.gres .gsec { break-inside: avoid; -webkit-column-break-inside: avoid; margin-bottom: 20px; }
.gmore { font-size: 12px; color: var(--text-faint); padding: 3px 2px; }

/* 检索条件条（复用筛选栏位置） */
.qchip {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--accent-soft); color: var(--accent-text);
  border: 1px solid var(--accent); border-radius: 999px;
  padding: 2px 11px; font-size: 12px; max-width: 420px;
}
.qchip b { font-weight: 700; }

/* 导入导出面板 */
.io-note {
  font-size: 12.5px;
  color: var(--text-faint);
  line-height: 1.7;
  background: var(--panel-2);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  margin-bottom: 14px;
  border: 1px solid var(--border);
}
.io-note code {
  background: var(--panel-3);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 11.5px;
}
.io-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.io-row .tbtn { flex: 1; min-width: 120px; text-align: center; padding: 8px 12px; }

.toast {
  position: fixed;
  bottom: 26px; left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--text);
  color: var(--panel);
  padding: 9px 20px;
  border-radius: 20px;
  font-size: 13px;
  opacity: 0;
  pointer-events: none;
  transition: all .25s;
  z-index: 200;
  box-shadow: var(--shadow-lg);
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- 详情弹窗：高分屏自适应（按屏幕分辨率放大） ---------- */
@media (min-width: 900px) {
  .modal-mask { padding: 32px; }
  .modal {
    width: min(94vw, 1240px);
    max-height: 96vh;
  }
  .modal-body {
    display: block;
    padding: 22px 28px 26px;
  }
  /* 媒体（立绘/封面/单图）统一置顶居中，文字在其下方（上下展示） */
  .modal-body > :first-child.detail-char,
  .modal-body > :first-child.detail-cover,
  .modal-body > :first-child.c-cover,
  .modal-body > :first-child.detail-gallery {
    position: static;
    margin: 0 auto 2.2em;
    text-align: center;
  }
}

/* 版本详情：立绘置顶（满宽、更大），其余内容在下方，新增内容两列 */
.modal.is-versions .modal-body { display: block; }
.modal.is-versions .detail-cover {
  position: static;
  aspect-ratio: auto;
  max-height: 56vh;
  width: calc(100% + 56px);
  margin: -22px -28px 2.4em;
  border-radius: 14px 14px 0 0;
  overflow: hidden;
  background: #fff;
}
.modal.is-versions .detail-cover img {
  object-fit: contain;
  max-height: 56vh;
  width: 100%;
}
.rel-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 24px;
  margin-top: 2px;
}
.rel-grid .sec { margin-bottom: 0; }

/* 光锥详情：上下显示（立绘置顶居中，文字在下） */
.modal.is-lightcones .modal-body { display: block; }
.modal.is-lightcones .detail-char {
  position: static;
  text-align: center;
  margin-bottom: 2.4em;
}
.modal.is-lightcones .detail-char img {
  width: auto;
  max-height: 70vh;
  max-width: 100%;
  object-fit: contain;
  border-radius: 12px;
  display: block;
  margin: 0 auto;
}
/* 技能下方间隔两行再显示光锥效果 / 光锥故事 */
.modal.is-lightcones .modal-body .kv + .sec { margin-top: 2em; }

/* ---------- 响应式 ---------- */
@media (max-width: 860px) {
  :root { --sidebar-w: 60px; }
  .brand h1 .btxt, .nav-item .txt, .nav-item .cnt, .sidebar-foot, .nav-group-title { display: none; }
  /* 侧栏副标题（离线单机版 · 数据截止 …）在 60px 宽里会竖排成一列，手机上直接不显示 */
  .brand .sub { display: none; }
  .brand { padding: 16px 10px; display: flex; justify-content: center; }
  .nav-item { justify-content: center; padding: 10px 0; }
  .nav-item.sub { padding-left: 0; }
  /* 顶栏原来挤成一行、把页面撑到 838px 宽；改成两行：标题+搜索 / 下拉+按钮 */
  .topbar {
    height: auto;
    flex: 0 0 auto;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 10px;
  }
  .topbar h2 { flex: 0 0 auto; font-size: 15px; }
  .search-wrap { margin-left: auto; flex: 1 1 170px; min-width: 0; }
  .search-wrap input { width: 100%; box-sizing: border-box; }
  .search-wrap input:focus { width: 100%; }
  .topbar .tbtn { padding: 6px 9px; font-size: 12px; }
  .flabel { flex-basis: 54px; }
  .rel-grid { grid-template-columns: 1fr; }
}

/* 更窄的手机（竖屏）：「按版本」下拉让位给 4 个按钮，版本筛选页面上仍有 chip 行 */
@media (max-width: 600px) {
  .versel { display: none; }
}

/* ---------- 新增 / 编辑 表单 ---------- */
.tbtn.add { background: var(--accent); color: #fff; border-color: var(--accent); }
.tbtn.add:hover { filter: brightness(1.06); }
.tbtn.primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.tbtn.primary:hover { filter: brightness(1.06); }
.tbtn.danger { color: #fff; background: #c0504d; border-color: #c0504d; }
.tbtn.danger:hover { filter: brightness(1.06); }

.m-actions { display: flex; gap: 10px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); }
.m-actions .tbtn { flex: 0 0 auto; }

.form { display: grid; gap: 14px; margin-top: 4px; }
.frow { display: grid; grid-template-columns: 76px 1fr; align-items: start; gap: 12px; }
.frow > label { font-size: 13px; font-weight: 600; color: var(--text-2); padding-top: 8px; text-align: right; }
.frow > label .req { color: #c0504d; font-style: normal; margin-left: 2px; }
.fld { width: 100%; box-sizing: border-box; padding: 8px 10px; font-size: 13px; font-family: inherit;
  color: var(--text); background: var(--bg-input); border: 1px solid var(--border); border-radius: 8px; outline: none; }
.fld:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
textarea.fld { resize: vertical; line-height: 1.5; }
.fchips { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 4px; }
.fchip { font: inherit; font-size: 12px; padding: 5px 11px; border-radius: 20px; cursor: pointer;
  color: var(--text-2); background: var(--bg-input); border: 1px solid var(--border); transition: all .15s; }
.fchip:hover { border-color: var(--accent); }
.fchip.on { background: var(--accent); color: #fff; border-color: var(--accent); }

/* ---------- 图片高清查看（lightbox） ---------- */
img.zoomable { cursor: zoom-in; }
.lightbox { position: fixed; inset: 0; z-index: 300; display: none;
  align-items: center; justify-content: center; flex-direction: column;
  padding: 28px; background: rgba(8, 10, 16, .9); backdrop-filter: blur(2px); }
.lightbox.show { display: flex; }
.lightbox img { max-width: 96vw; max-height: 86vh; object-fit: contain;
  border-radius: 10px; box-shadow: 0 16px 50px rgba(0, 0, 0, .55);
  cursor: zoom-out; background: #fff; }
.lightbox .lb-cap { color: #fff; margin-top: 14px; font-size: 13px;
  opacity: .82; max-width: 90vw; text-align: center; line-height: 1.4; }
.lightbox .lb-close { position: absolute; top: 18px; right: 20px; width: 42px; height: 42px;
  border: none; border-radius: 50%; background: rgba(255, 255, 255, .16); color: #fff;
  font-size: 24px; line-height: 1; cursor: pointer; transition: background .15s; }
.lightbox .lb-close:hover { background: rgba(255, 255, 255, .32); }

/* ============ 开拓任务：大标题 / 小标题 ============ */
.modal.is-trailblaze .tb-subs { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.tb-sub { display: flex; align-items: center; gap: 12px; padding: 11px 14px;
  background: var(--bg-soft); border: 1px solid var(--border); border-radius: 10px;
  cursor: pointer; transition: background .14s, border-color .14s, transform .08s; }
.tb-sub:hover { background: var(--panel-2); border-color: var(--accent); }
.tb-sub:active { transform: scale(.995); }
.tb-sub-name { flex: 1; min-width: 0; font-weight: 600; color: var(--text); }
.tb-sub-region { color: var(--text-dim); font-size: 12.5px; }
.tb-sub-arrow { color: var(--accent); font-size: 18px; line-height: 1; }
.tb-plot-btn { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px;
  padding: 11px 16px; background: var(--accent); color: #fff; border-radius: 10px;
  cursor: pointer; font-weight: 600; width: fit-content; transition: filter .14s; }
.tb-plot-btn:hover { filter: brightness(1.08); }
.tb-plot-btn span { font-size: 18px; line-height: 1; }
.tb-plot-note { margin-top: 14px; color: var(--text-dim); font-size: 13px; font-style: italic; }

/* ============ 剧情内容独立界面 ============ */
.plot-mask { background: rgba(8, 10, 16, .72); }
.plot-mask.show { display: flex; }
.plot-modal { width: min(94vw, 900px); max-height: 92vh; display: flex; flex-direction: column;
  background: var(--panel); border-radius: 16px; box-shadow: 0 24px 70px rgba(0, 0, 0, .5);
  overflow: hidden; animation: pop .18s ease; }
.plot-body { padding: 22px 26px 28px; overflow-y: auto; line-height: 1.85; font-size: 15px; }
.plot-body .plot-p { margin: 0 0 12px; color: var(--text); }
.plot-body .plot-dialogue { margin: 0 0 10px; padding-left: 14px; border-left: 3px solid var(--accent);
  color: var(--text); }
.plot-body .plot-narration { margin: 0 0 12px; padding-left: 14px; color: var(--text-dim);
  font-style: italic; border-left: 3px solid var(--border); }
.plot-body .plot-head { margin: 18px 0 10px; font-weight: 700; font-size: 15.5px; color: var(--accent);
  padding-bottom: 6px; border-bottom: 1px dashed var(--border); }
.plot-body .plot-option { margin: 0 0 10px; padding: 8px 12px; background: var(--bg-soft);
  border-left: 3px solid var(--accent); border-radius: 6px; color: var(--text); font-weight: 600; }
.plot-body .plot-fold-title { margin: 16px 0 8px; font-weight: 700; color: var(--text); }
.plot-body .empty { color: var(--text-dim); }

/* ---------- 角色详情：行迹 / 星魂 / 故事 / 语音 ---------- */
/* 行迹 */
.ch-traces { display: flex; flex-direction: column; gap: 10px; }
.ch-trace { display: flex; gap: 11px; align-items: flex-start; }
.ch-ic { width: 46px; height: 46px; flex: 0 0 46px; object-fit: contain; border-radius: 9px;
  background: var(--bg-soft); padding: 3px; box-sizing: border-box; }
.ch-ic-empty { border: 1px dashed var(--border); background: transparent; }
.ch-trace-main { flex: 1; min-width: 0; }
.ch-head-row { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.ch-tag { font-size: 11px; color: #fff; background: var(--accent); border-radius: 5px;
  padding: 1px 7px; font-weight: 600; flex: 0 0 auto; }
.ch-name { font-size: 14px; font-weight: 600; color: var(--text); }
.ch-desc { color: var(--text-dim); font-size: 13.5px; line-height: 1.75; }
.ch-subtags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.ch-subtag { font-size: 11.5px; color: var(--text-dim); background: var(--panel-2);
  border: 1px solid var(--border); border-radius: 5px; padding: 1px 7px; }
.ch-num { margin-top: 7px; }
.ch-num > summary { cursor: pointer; font-size: 12px; color: var(--accent-text); list-style: none; }
.ch-num > summary::-webkit-details-marker { display: none; }
.ch-num > summary::before { content: "▸ "; }
.ch-num[open] > summary::before { content: "▾ "; }
.ch-num-wrap { margin-top: 7px; overflow-x: auto; }
table.ch-lv { border-collapse: collapse; font-size: 12.5px; min-width: 200px; }
table.ch-lv th, table.ch-lv td { border: 1px solid var(--border); padding: 3px 9px; text-align: left;
  color: var(--text-dim); white-space: nowrap; }
table.ch-lv th { background: var(--bg-soft); color: var(--text-faint); font-weight: 600; }

/* 星魂 */
.ch-eids { display: flex; flex-direction: column; gap: 12px; }
.ch-eid { display: flex; gap: 11px; align-items: flex-start; }
.ch-eid-ic { width: 54px; height: 54px; flex: 0 0 54px; object-fit: contain; border-radius: 10px;
  background: var(--bg-soft); padding: 3px; box-sizing: border-box; }
.ch-eid-main { flex: 1; min-width: 0; }
.ch-eid-name { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 4px; }

/* 故事 */
.ch-stories { display: flex; flex-direction: column; gap: 14px; }
.ch-story { background: var(--bg-soft); border-radius: 8px; padding: 11px 14px; }
.ch-story-head { font-size: 13.5px; font-weight: 700; color: var(--accent-text); margin-bottom: 6px;
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.ch-cond { font-size: 11.5px; color: var(--text-faint); font-weight: 400; }
.ch-story-text { color: var(--text-dim); font-size: 13.5px; line-height: 1.85; }

/* 语音 */
.ch-voices { display: flex; flex-direction: column; gap: 8px; }
.ch-vlang { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.ch-vlang > summary { cursor: pointer; padding: 9px 13px; background: var(--panel-2);
  font-size: 13.5px; font-weight: 600; color: var(--text); list-style: none;
  display: flex; align-items: center; gap: 8px; }
.ch-vlang > summary::-webkit-details-marker { display: none; }
.ch-vlang > summary::before { content: "▸"; color: var(--accent); }
.ch-vlang[open] > summary::before { content: "▾"; }
.ch-vcount { margin-left: auto; font-size: 11.5px; color: var(--text-faint); font-weight: 400; }
.ch-vlines { padding: 6px 13px 11px; }
.ch-vline { padding: 7px 0; border-bottom: 1px dashed var(--border); }
.ch-vline:last-child { border-bottom: none; }
.ch-vhead { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ch-vtype { font-size: 11px; color: var(--text-faint); background: var(--bg-soft); border-radius: 4px; padding: 1px 6px; }
.ch-vname { font-size: 13px; font-weight: 600; color: var(--text); }
.ch-play { margin-left: auto; border: 1px solid var(--border); background: var(--panel);
  color: var(--accent-text); width: 24px; height: 24px; border-radius: 50%; font-size: 11px;
  line-height: 1; cursor: pointer; flex: 0 0 auto; }
.ch-play:hover { border-color: var(--accent); }
.ch-play.playing { background: var(--accent); color: #fff; border-color: var(--accent); }
.ch-vtext { margin-top: 4px; color: var(--text-dim); font-size: 13px; line-height: 1.7; }

/* =====================================================================
   独立详情页 / 剧情页（点击图鉴条目新开网页，不再是弹窗）
   正文容器复用 .modal / .modal-body 版式，这里只去掉「卡片」外观并加大留白
   ===================================================================== */
body.detail-page {
  height: auto;
  min-height: 100%;
  overflow: auto;
}

/* 顶栏 */
.d-top {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px 18px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow);
}
.d-back {
  border: 1px solid var(--border-strong);
  background: var(--panel-2);
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: 6px 12px;
  font-size: 13px;
  transition: all .12s;
}
.d-back:hover { border-color: var(--accent); color: var(--accent-text); background: var(--accent-soft); }
.d-brand { font-size: 12.5px; color: var(--text-faint); }
.d-crumb { font-size: 12.5px; font-weight: 600; color: var(--accent-text); }
.d-crumb::before { content: "· "; color: var(--text-faint); font-weight: 400; }
.d-spacer { flex: 1; }
a.tbtn { display: inline-flex; align-items: center; text-decoration: none; }

/* 标题区（在 .d-col 内，左内边距与 .modal-body 对齐） */
.d-hero { padding: 26px 0 4px 20px; }
.d-hero h1 {
  margin: 0;
  font-size: 26px;
  line-height: 1.3;
  letter-spacing: .3px;
  word-break: break-word;
}
.d-hero .d-sub { margin-top: 6px; color: var(--text-faint); font-size: 13px; }

/* 正文：铺满整个视口宽度。
   ⚠️ 原来这里是 max-width: 1420px + margin:0 auto —— 在 1920 屏上两侧各空 250px，
   内容集中在中间。顶栏 .d-top 是全宽的，正文却居中，二者视觉上也不对齐。
   现在取消上限：正文宽度 = 视口 − 两侧 28px 呼吸边距。 */
.detail-main { width: 100%; max-width: none; margin: 0; padding-bottom: 80px; }

/* ---------- 详情页「本页导航」----------
   左栏是目录（168px 固定），右栏是内容（吃掉剩余全部宽度）。
   窄屏（≤1180px）自动收起导航，正文恢复单栏。 */
.d-cols {
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr);
  column-gap: 22px;
  padding: 0 28px;
  align-items: start;
  max-width: none;
}
/* ⚠️ 必须显式指定列：`hidden` 的 .d-toc 不生成 box，若不写 grid-column，
   .d-col 会被自动流填进 168px 那一栏 —— 正文被挤成竖排文字。
   （只有肉眼能发现，断言全绿。） */
.d-toc { grid-column: 1; }
.d-col { grid-column: 2; min-width: 0; }

/* 章节不足 2 条时不显示导航：同样铺满整宽（不再收回到 1230px） */
.d-cols.no-toc { grid-template-columns: minmax(0, 1fr); max-width: none; margin: 0; }
.d-cols.no-toc .d-col { grid-column: 1; }

.d-toc {
  position: sticky;
  top: 62px;                              /* 顶栏高 + 一点余量 */
  max-height: calc(100vh - 92px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 2px 0 6px;
  scrollbar-width: thin;
}
.d-toc[hidden] { display: none; }
.toc-h {
  font-size: 11px; font-weight: 700; letter-spacing: .8px;
  color: var(--text-faint); padding: 0 10px 8px 10px;
}
.toc-i {
  display: block; width: 100%; text-align: left;
  border: 0; border-left: 2px solid var(--border);
  background: transparent;
  padding: 5px 9px;
  color: var(--text-dim);
  font: inherit; font-size: 12.5px; line-height: 1.55;
  cursor: pointer;
  border-radius: 0 7px 7px 0;
  transition: color .12s, background .12s, border-color .12s;
  overflow: hidden;
}
.toc-i > span {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; word-break: break-word;
}
.toc-i:hover { color: var(--text); background: var(--panel-2); }
.toc-i.on {
  color: var(--accent-text);
  border-left-color: var(--accent);
  background: var(--accent-soft);
  font-weight: 600;
}

/* 章节标题留出 sticky 顶栏的高度，锚点跳转后不被盖住 */
.detail-page .sec h4,
.detail-page .plot-head { scroll-margin-top: 72px; }
.detail-page .modal {
  width: 100%;
  max-height: none;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  animation: none;
  overflow: visible;
}
.detail-page .modal-body { overflow: visible; }
/* 详情页的 .m-actions 已废弃：编辑 / 删除按钮改为注入顶栏右上角的 #dActions。
   保留 .m-actions 基础样式供「新增 / 编辑表单」的底部按钮区使用。 */

/* 剧情页正文：同样铺满（原来限制 1210px，两侧各空 355px 最窄） */
.d-plot-main { max-width: none; }
.detail-page .d-plot-main .plot-body { padding: 4px 20px 0; background: transparent; }

/* 窄屏：收起左侧导航，正文恢复单栏 */
@media (max-width: 1180px) {
  .d-cols { grid-template-columns: minmax(0, 1fr); column-gap: 0; }
  .d-toc { display: none; }
  .d-col { grid-column: 1; }
}

@media (max-width: 899px) {
  .d-hero { padding: 20px 0 2px; }
  .d-hero h1 { font-size: 21px; }
  .detail-main { padding-bottom: 56px; }
  .d-cols { padding: 0 20px; }
  .detail-page .d-plot-main .plot-body { padding: 4px 0 0; }
  .d-brand { display: none; }
}

/* =====================================================================
   角色图鉴：BWIKI「角色一览」版式
   参照 https://wiki.biligame.com/sr/角色图鉴 （模板:角色一览）
   —— 方形头像格，左上角叠放属性 / 命途图标，底部名称 + 星级
   ===================================================================== */
.grid.sr {
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: 16px 14px;
}
.grid.sr .card {
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  overflow: visible;
}
.grid.sr .card:hover {
  transform: none;
  box-shadow: none;
  border-color: transparent;
}

.m-card {
  position: relative;
  width: 100%;
  /* 与 BWIKI .ping0 一致：120×163，素材 240×327 正好 2 倍 */
  aspect-ratio: 120 / 163;
  /* BWIKI 底版：右上角 15px 圆角 + 深色渐变，其余同普通卡片 */
  border-radius: 8px 15px 8px 8px;
  overflow: hidden;
  background: linear-gradient(165deg, #4b5164 0%, #2c3141 55%, #1b1f29 100%);
  box-shadow: 0 1px 3px rgba(15, 18, 28, .22);
  transition: transform .18s ease, box-shadow .18s ease;
}
.grid.sr .card:hover .m-card {
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(15, 18, 28, .3);
}
/* 内描边，提升卡面质感 */
.m-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid rgba(255, 255, 255, .1);
  pointer-events: none;
  z-index: 3;
}

/* 立绘：顶部对齐、横向放大 130%，把人物头部留在格子里（同 BWIKI .chara-image） */
.m-card img {
  position: absolute;
  top: 0;
  left: 50%;
  width: 130%;
  height: auto;
  max-width: none;
  transform: translateX(-50%);
  display: block;
  transition: transform .3s ease;
}
.grid.sr .card:hover .m-card img { transform: translateX(-50%) scale(1.03); }

/* 无立绘时的占位字 */
.m-card-ph {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 36px;
  font-weight: 700;
  color: rgba(255, 255, 255, .22);
}

/* 左上角属性 / 命途图标（CSS 背景图，卡片内仍只有 1 个 <img>） */
.ch-ico {
  position: absolute;
  left: 5%;
  width: 19%;
  aspect-ratio: 1 / 1;
  z-index: 2;
  border-radius: 50%;
  background-color: rgba(8, 10, 18, .32);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 74%;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .5));
  pointer-events: none;
}
.ch-el { top: 4%; }
.ch-path { top: 19%; }

/* 底部名称 / 星级：半透明压暗，保证浅色立绘上也能看清 */
.m-card-info {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: 26px 4px 6px;
  text-align: center;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(8, 10, 18, 0) 0%, rgba(8, 10, 18, .55) 58%, rgba(8, 10, 18, .86) 100%);
}
.m-card-name {
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: .2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .6);
}
.m-card-stars { margin-top: 1px; line-height: 1; }
.m-card-stars .stars { font-size: 9.5px; letter-spacing: 0; color: #ffca4d; }
.m-card-stars .stars .off { color: rgba(255, 255, 255, .3); }

@media (max-width: 899px) {
  .grid.sr { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 12px 10px; }
  .grid.sr .card:hover .m-card { transform: none; }
  .m-card-name { font-size: 12px; }
  .m-card-info { padding: 22px 3px 5px; }
}

/* =====================================================================
   书架：卡片封面 + 详情页正文（数据源：观测枢「阅读物」频道）
   ===================================================================== */
.bk-card { display: flex; gap: 11px; align-items: flex-start; }
.bk-card__cover {
  flex: 0 0 62px;
  width: 62px;
  height: 62px;
  border-radius: 9px;
  overflow: hidden;
  background: linear-gradient(160deg, #eef2f8, #e2e8f2);
  display: grid;
  place-items: center;
}
.bk-card__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bk-card__main { flex: 1; min-width: 0; }
/* 书名允许多行（默认 .c-title 是 nowrap 单行） */
.bk-card__main .c-title {
  flex: none;
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.bk-card__main .c-sub { margin-top: 3px; }

/* 正文排版 */
.bk-hero { margin-bottom: 14px; }
.bk-hero img {
  width: 104px;
  height: 104px;
  border-radius: 12px;
  object-fit: cover;
  box-shadow: var(--shadow);
  background: var(--panel-2);
}
.bk-body {
  font-size: 13.5px;
  line-height: 1.95;
  color: var(--text-dim);
  word-break: break-word;
}
.bk-body p { margin: 0 0 10px; }
.bk-body p:empty { height: 8px; margin: 0; }
.bk-body em { font-style: italic; color: var(--text-faint); }
.bk-body strong { font-weight: 600; color: var(--text); }
.bk-body u { text-decoration: underline; text-underline-offset: 3px; }
.bk-body s { opacity: .6; }
.bk-body sub, .bk-body sup { font-size: 11px; }
.bk-body h2 {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  margin: 20px 0 10px;
  padding-left: 9px;
  border-left: 3px solid var(--accent);
}
.bk-body sup[title] { color: var(--accent); cursor: help; margin-left: 3px; }
.bk-body img { max-width: 100%; height: auto; border-radius: 9px; display: block; margin: 14px auto; }
.bk-body table { width: 100%; border-collapse: collapse; margin: 14px 0; font-size: 13px; }
.bk-body th, .bk-body td { border: 1px solid var(--border); padding: 8px 11px; vertical-align: top; }
.bk-body th { background: var(--panel-2); font-weight: 600; color: var(--text); }

/* 多卷书籍：每卷一个折叠块 */
.bk-vol { border: 1px solid var(--border); border-radius: 10px; margin: 0 0 10px; overflow: hidden; }
.bk-vol > summary {
  cursor: pointer;
  padding: 9px 13px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  background: var(--panel-2);
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
}
.bk-vol > summary::-webkit-details-marker { display: none; }
.bk-vol > summary::before {
  content: '▸';
  color: var(--text-faint);
  font-size: 11px;
  transition: transform .15s;
}
.bk-vol[open] > summary::before { transform: rotate(90deg); }
.bk-vol > .bk-body { padding: 13px 14px 3px; }

@media (max-width: 899px) {
  .bk-card__cover { flex-basis: 50px; width: 50px; height: 50px; border-radius: 8px; }
  .bk-body { font-size: 13px; line-height: 1.9; }
}

/* =====================================================================
   家具：卡片方图 + 详情页大图（数据源：观测枢「家具」频道 17/216）
   家具图是透明 PNG，故用 contain 保住整件家具，并给一块浅色底板衬托
   ===================================================================== */
.fn-card { display: flex; gap: 11px; align-items: flex-start; }
.fn-card__pic {
  flex: 0 0 62px;
  width: 62px;
  height: 62px;
  border-radius: 9px;
  overflow: hidden;
  background: linear-gradient(160deg, var(--panel-2), var(--panel));
  border: 1px solid var(--border);
  display: grid;
  place-items: center;
  padding: 4px;
  box-sizing: border-box;
}
.fn-card__pic img { width: 100%; height: 100%; object-fit: contain; display: block; }
.fn-card__main { flex: 1; min-width: 0; }
/* 家具名允许多行（默认 .c-title 是 nowrap 单行） */
.fn-card__main .c-title {
  flex: none;
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.fn-hero {
  margin-bottom: 16px;
  display: flex;
  justify-content: center;
  background: linear-gradient(160deg, var(--panel-2), var(--panel));
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px;
}
.fn-hero img {
  width: 168px;
  height: 168px;
  object-fit: contain;
  display: block;
}

@media (max-width: 899px) {
  .fn-card__pic { flex-basis: 50px; width: 50px; height: 50px; }
  .fn-hero { padding: 12px; }
  .fn-hero img { width: 128px; height: 128px; }
}

/* =====================================================================
   任务详情：任务流程（观测枢 mission/process 的步骤清单）
   ===================================================================== */
.q-steps {
  margin: 0;
  padding-left: 0;
  list-style: none;
  counter-reset: qstep;
}
.q-steps li {
  counter-increment: qstep;
  position: relative;
  padding: 5px 0 5px 30px;
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--text-dim);
  border-bottom: 1px dashed var(--border);
}
.q-steps li:last-child { border-bottom: none; }
.q-steps li::before {
  content: counter(qstep);
  position: absolute;
  left: 0;
  top: 6px;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--text-faint);
  font-size: 11px;
  line-height: 18px;
  text-align: center;
}

/* =====================================================================
   任务：章节卡（开拓任务已并入「任务」，章节卡由开拓任务聚合而来）
   靠左描边 + 微底色与普通任务卡区分，并与 .tag.accent 的「章节」徽标呼应
   ===================================================================== */
.cq-chapter {
  border-left: 3px solid var(--accent);
  padding-left: 10px;
  margin-left: -3px;
}
.cq-chapter .c-title { font-size: 15px; }

/* =====================================================================
   装扮：方图卡片 + 详情页大图（数据源：观测枢「装扮」频道 17/157）
   装扮图统一 300×300 方图，故用「上图下文」版式 + 更密的网格
   ===================================================================== */
.grid.of { grid-template-columns: repeat(auto-fill, minmax(156px, 1fr)); gap: 12px; }

.of-card { display: flex; flex-direction: column; gap: 9px; }
.of-card__pic {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 9px;
  overflow: hidden;
  background: linear-gradient(160deg, var(--panel-2), var(--panel));
  border: 1px solid var(--border);
  display: grid;
  place-items: center;
}
.of-card__pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.of-card__pic--none { color: var(--text-faint); font-size: 26px; }
.of-card__main { min-width: 0; }
/* 装扮名允许多行（默认 .c-title 是 nowrap 单行） */
.of-card__main .c-title {
  flex: none;
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: 13.5px;
}
.of-card__main .c-tags { margin-bottom: 0; }

.of-hero {
  margin-bottom: 16px;
  display: flex;
  justify-content: center;
  background: linear-gradient(160deg, var(--panel-2), var(--panel));
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px;
}
.of-hero img {
  width: 200px;
  height: 200px;
  object-fit: contain;
  display: block;
  border-radius: 8px;
}
/* 装扮描述的富文本由数据层保留 <strong>/<em>/<br>，渲染层经 richHtml() 归一为
   <strong>/<i>/<br>（<p> 会被换成 <br>），所以这里直接给整块设排版，不能再按 <p> 命中 */
.of-desc {
  font-size: 13.5px;
  line-height: 1.9;
  color: var(--text-dim);
}
.of-desc strong { color: var(--text); font-weight: 600; }
.of-desc i { color: var(--text); font-style: italic; }

/* ---------- 物品：合成配方 ---------- */
.recipe-list { margin: 0; padding: 0; list-style: none; }
.recipe-list li {
  padding: 8px 0;
  border-bottom: 1px dashed var(--border);
  font-size: 13.5px;
  line-height: 1.7;
}
.recipe-list li:last-child { border-bottom: none; }
.recipe-list b { color: var(--text); font-weight: 600; }
.recipe-list .rc-cost {
  display: block;
  margin-top: 2px;
  color: var(--text-dim);
}
.recipe-list .rc-eff {
  display: block;
  margin-top: 2px;
  color: var(--text-faint);
  font-size: 12.5px;
}
.recipe-list .rc-eff::before { content: '效果：'; }
/* 当前条目本身（它就是这条配方的材料之一）：标出来，一眼看出「我在这条配方里的位置」 */
.recipe-list .rc-self {
  font-style: normal;
  color: #c9a227;
  font-weight: 600;
  border-bottom: 1px dashed #c9a227;
}

/* ---------- 活动任务（观测枢 17/114） ---------- */
/* 宣传图是宽幅海报，等比缩放、不裁切 */
.act-banner {
  margin: 0 0 14px;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(160deg, var(--panel-2), var(--panel));
}
.act-banner img { display: block; width: 100%; height: auto; }
/* 活动信息是一张表，活动说明是富文本：两者都经 richHtml() 归一（<p> → <br>），
   所以整块设排版，不能按 <p> 命中 */
.act-rich {
  font-size: 13.5px;
  line-height: 1.9;
  color: var(--text-dim);
  overflow-x: auto;
}
.act-rich strong, .act-rich b { color: var(--text); font-weight: 600; }
.act-rich i { color: var(--text); font-style: italic; }
.act-rich table {
  border-collapse: collapse;
  font-size: 13px;
  line-height: 1.6;
  min-width: 260px;
}
.act-rich td, .act-rich th {
  border: 1px solid var(--border);
  padding: 5px 9px;
  vertical-align: top;
  color: var(--text-dim);
}
.act-rich tr > td:first-child { color: var(--text); white-space: nowrap; }
.act-rich img { max-width: 100%; vertical-align: middle; }
/* 「限时奖励」等格子里是一排奖励图标（远程图），限高免得把表格行撑得很高；
   离线打开时 onerror 会把节点摘掉，退化成改动前的空格子，不会留裂图 */
.act-info td img { max-height: 56px; width: auto; }
/* 活动说明正文里的 ▍小标题 */
.act-rich::after { content: ''; display: block; clear: both; }

@media (max-width: 899px) {
  .grid.of { grid-template-columns: repeat(auto-fill, minmax(126px, 1fr)); }
  .of-hero { padding: 12px; }
  .of-hero img { width: 150px; height: 150px; }
  .act-rich table { font-size: 12.5px; }
  .act-rich td, .act-rich th { padding: 4px 6px; }
}