:root {
  /* 底色比第一版抬了一档、面板与底色的差拉开：原来是 #080706 的黑底配 #14110d 的面板，
     两档几乎分不出来，一屏都是黑的，读久了眼睛发紧。现在的分工是
     「底色最暗 / 面板亮一档 / 浮层再亮一档」，靠明度、不靠描边来分层。 */
  --bg: #0a0702;
  --bg-2: #201b15;
  --panel: #1a130b;
  --panel-2: #2e271e;
  /* 比面板再深一层的地方：缩略图底、输入框、代码块。压下去才有"凹进去"的感觉 */
  --ink: #14110b;
  --ink-rgb: 20, 17, 11;
  --line: rgba(214, 178, 96, 0.16);
  --line-2: rgba(214, 178, 96, 0.32);
  --line-3: rgba(214, 178, 96, 0.58);
  --gold: #d3ab55;
  --gold-l: #f0dba8;
  --gold-d: #96762f;
  --ember: #d9542b;
  --ember-l: #ff8a52;
  --ice: #8cc9df;
  /* 正文与次要文字都比原来亮一档：原 --muted 在 #080706 上只有 3.9:1，
     11~12px 的小字（行列表的元信息、属性表的标签）基本要凑近了看 */
  --text: #ece4d5;
  --text-2: #c6bca9;
  --muted: #9a9080;
  --ff-display: "Cinzel", "Trajan Pro", Georgia, "Songti SC", "STZhongsong", serif;
  --ff-body: "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
  --hd: 64px;
  /* 让浏览器把表单控件、滚动条、<select> 弹层一并按深色排。
     少了这一行，滚动条永远是系统那根白条 —— 深底上一条白杠，比什么都显眼 */
  color-scheme: dark;
}

/* ---------- 滚动条 ---------- */
/* 细、暗金、悬停才亮：滚动条是"需要时才看见"的控件，不该比内容更抢眼 */
* { scrollbar-color: rgba(214, 178, 96, 0.28) transparent; scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(214, 178, 96, 0.22);
  border: 2px solid transparent; background-clip: content-box; border-radius: 8px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(214, 178, 96, 0.42); background-clip: content-box; }
::-webkit-scrollbar-corner { background: transparent; }

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg) url("../img/top_bg.jpg") center 0 no-repeat;
  background-size: contain;
  color: var(--text);
  font-family: var(--ff-body);
  font-size: 14px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(80% 50% at 50% -10%, rgba(214, 178, 96, 0.10), transparent 70%),
    radial-gradient(60% 40% at 90% 100%, rgba(217, 84, 43, 0.07), transparent 70%);
}

a { color: var(--gold-l); text-decoration: none; }
a:hover { color: var(--ember-l); }

/* `hidden` 属性必须真的隐藏。
   UA 样式表用的是 `[hidden] { display: none }`，**任何带 display 的类都会盖过它**
   （.adm-shell 是 grid、.detail 是 grid、.grid 是 grid…），于是 hidden="true" 完全不起作用。
   这个坑每加一个带 display 的容器就会重犯一次（.detail-tags 和 .freset 都单独打过补丁），
   所以在最前面一次性钉住。页面上没有任何"元素带 hidden 但仍要显示"的用法。 */
[hidden] { display: none !important; }

.wrap { max-width: 1240px; margin: 0 auto; padding: 0 20px; position: relative; z-index: 1; }

/* ---------- 头部 ---------- */
.hd {
  position: sticky; top: 0; z-index: 40;
  height: var(--hd);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(8px);
}
.hd-inner { height: var(--hd); display: flex; align-items: center; gap: 16px; }
.logo { display: flex; align-items: center; gap: 10px; min-width: 0; }
/* 站名换成了图片（src/web/img/logo.webp）。高度跟头部行高对齐，宽度自适应，
   不写死宽度 —— 换一张比例不同的 logo 不用改样式。 */
.logo-img { height: 40px; width: auto; display: block; }
.logo b {
  font-family: var(--ff-display); font-size: 20px; letter-spacing: 2px; white-space: nowrap;
  background: linear-gradient(180deg, #fff4d8, #9c7a2f);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.logo span { color: var(--muted); font-size: 12px; letter-spacing: 1px; white-space: nowrap; }
.hd-spacer { flex: 1; }

.search { display: flex; align-items: center; gap: 8px; min-width: 0; }
.search input {
  width: 230px; min-width: 0; padding: 8px 12px;
  background: rgba(var(--ink-rgb), 0.6); color: var(--text);
  border: 1px solid var(--line-2); border-radius: 3px;
  font-family: var(--ff-body); font-size: 13px; outline: none;
}
.search input:focus { border-color: var(--line-3); box-shadow: 0 0 0 2px rgba(214, 178, 96, 0.12); }

/* ---------- 按钮 ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px; border: 1px solid var(--line-2); border-radius: 3px;
  background: transparent; color: var(--text-2);
  font-family: var(--ff-body); font-size: 13px; cursor: pointer;
  transition: all 0.18s;
}
.btn:hover { color: var(--gold-l); border-color: var(--line-3); background: rgba(214, 178, 96, 0.06); }
.btn-primary {
  position: relative; overflow: hidden;
  border: none; color: #fff2e6; font-weight: 600; letter-spacing: 1px;
  background: linear-gradient(135deg, #b8441f, #d9542b);
  box-shadow: 0 4px 16px rgba(217, 84, 43, 0.28);
}
.btn-primary:hover { color: #fff; background: linear-gradient(135deg, #d9542b, #ff7f45); }
.btn-primary::after {
  content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  transform: skewX(-20deg); animation: sweep 3.4s ease-in-out infinite;
}
@keyframes sweep { 0% { left: -60%; } 55% { left: 130%; } 100% { left: 130%; } }

/* ---------- 区块标题 ---------- */
.sec-head { display: flex; align-items: center; gap: 14px; margin:20px 0 10px; }
.sec-title {
  font-family: var(--ff-display); font-size: 17px; letter-spacing: 3px; white-space: nowrap;
  background: linear-gradient(180deg, #fff4d8, #9c7a2f);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  margin:0;
}
.sec-title::before { content: "◆"; color: var(--gold-d); font-size: 10px; margin-right: 8px; }
.sec-line { flex: 1; height: 1px; background: linear-gradient(90deg, var(--line-2), transparent); }
.sec-meta { color: var(--muted); font-size: 12px; white-space: nowrap; }
/* 区块标题那一行在窄屏上要能折：元信息是拼出来的（"共 35,175 张 · 378.89 GB ·
   最近收录 2026/10/12 10:14:58"），nowrap 会直接把文档撑宽 —— 实测 390px 下溢出到 481px。
   折行之后那条装饰用的横线（.sec-line）就没有意义了，去掉。 */
@media (max-width: 860px) {
  .sec-head { flex-wrap: wrap; }
  .sec-head .sec-line { display: none; }
  .sec-meta { flex: 1 1 100%; white-space: normal; }
}



/* ---------- 筛选栏 ---------- */
.filter-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding: 12px 14px; margin-bottom: 18px;
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  border: 1px solid var(--line); border-radius: 4px;
}
.filter-bar label { color: var(--muted); font-size: 12px; }
.filter-bar select, .filter-bar input {
  padding: 6px 10px; background: rgba(var(--ink-rgb), 0.6); color: var(--text);
  border: 1px solid var(--line-2); border-radius: 3px;
  font-family: var(--ff-body); font-size: 13px; outline: none;
}
.filter-bar select:focus, .filter-bar input:focus { border-color: var(--line-3); }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip {
  padding: 5px 12px; border: 1px solid var(--line-2); border-radius: 20px;
  color: var(--text-2); font-size: 12px; cursor: pointer; background: transparent;
  transition: all 0.16s; font-family: var(--ff-body);
}
.chip:hover { color: var(--gold-l); border-color: var(--line-3); }
.chip.on { color: #1a1206; background: linear-gradient(180deg, var(--gold-l), var(--gold)); border-color: var(--gold); font-weight: 600; }

/* ---------- 网格 ---------- */
.grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; }

/* ---------- 卡片 ---------- */
.card {
  position: relative; display: flex; flex-direction: column;
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  border: 1px solid var(--line); border-radius: 4px; overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.card:hover {
  transform: translateY(-4px);
  border-color: var(--line-3);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55), inset 0 0 0 1px rgba(214, 178, 96, 0.18);
}
.thumb {
  position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden;
  background: radial-gradient(120% 92% at 62% 8%, #2f2718, #1b1710 66%, var(--ink));
}
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.35s; }
.card:hover .thumb img { transform: scale(1.06); }
.thumb::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(var(--ink-rgb), 0.8));
}
.thumb .rune {
  position: absolute; inset: 0; display: grid; place-items: center;
  color: var(--gold); opacity: 0.22; pointer-events: none;
}
.thumb .rune svg { width: 62%; height: 62%; animation: spin 90s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.thumb.noimg { background: radial-gradient(120% 92% at 62% 8%, #352c1a, #1d1811 64%, var(--ink)); }
.thumb.noimg .sk { position: absolute; inset: 0; color: #17130c; }

.corner {
  position: absolute; top: 8px; left: 8px; display: flex; gap: 5px; z-index: 2;
  /* 角标最多会同时出现四个（分类 / 格式 / 压缩包 / 人数），窄卡片上要能折行，不能溢出 */
  flex-wrap: wrap; max-width: calc(100% - 16px);
}
.badge {
  padding: 2px 8px; border-radius: 2px; font-size: 11px; letter-spacing: 0.5px;
  background: linear-gradient(180deg, #d9542b, #7d1d12); color: #ffe9dd; font-weight: 600;
}
.badge.gold { background: linear-gradient(180deg, var(--gold-l), var(--gold-d)); color: #1a1206; }
.badge.dark { background: rgba(var(--ink-rgb), 0.7); color: var(--text-2); border: 1px solid var(--line-2); font-weight: 400; }
/* 分类角标：金线描边，和"格式 / 体积"那类灰角标区分开 —— 它回答的是"这是什么图" */
.badge.cls { background: rgba(214, 178, 96, 0.16); color: var(--gold-l); border: 1px solid var(--line-3); }

.card-body { padding: 12px 13px 14px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.card-title {
  display: block; font-size: 14px; font-weight: 600; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.card:hover .card-title { color: var(--gold-l); }
.card-sub { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-foot {
  margin-top: auto; display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding-top: 8px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px;
}
.card-foot .players { color: var(--ice); }
.tag { color: var(--text-2); }
.pending { color: var(--muted); font-style: italic; }

/* ---------- 分页 ---------- */
/* 页码是真的 <a>（能中键新开、能收藏、能被爬），只有"当前页"和"翻到头"用 <span> */
.pager { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 28px 0 10px; flex-wrap: wrap; }
.pager a, .pager span {
  min-width: 36px; height: 32px; padding: 0 10px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-2); border-radius: 3px;
  color: var(--text-2); font-size: 13px;
}
.pager a:hover { color: var(--gold-l); border-color: var(--line-3); background: rgba(214, 178, 96, 0.06); }
.pager span.on { color: #1a1206; background: linear-gradient(180deg, var(--gold-l), var(--gold)); border-color: var(--gold); font-weight: 600; }
.pager span.off { opacity: 0.35; }
.pager .gap { min-width: auto; border: none; padding: 0 2px; }
.pager .info { min-width: auto; border: none; color: var(--muted); font-size: 12px; margin: 0 8px; }

/* ---------- 空态 / 骨架 ---------- */
.empty { padding: 70px 20px; text-align: center; color: var(--muted); line-height: 1.9; }
.empty b { display: block; color: var(--text-2); font-size: 15px; margin-bottom: 8px; }
/* 空态里给条出路。只写"没有找到"就完了的话，读者只能自己回到地址栏 */
.empty-act { display: flex; gap: 10px; justify-content: center; margin-top: 18px; flex-wrap: wrap; }
.empty code, .prose code, .notfound code {
  background: rgba(214, 178, 96, 0.1); border: 1px solid var(--line); border-radius: 2px;
  padding: 1px 5px; font-family: Consolas, monospace; font-size: 12px;
}
.notfound { max-width: 560px; margin: 70px auto; }
.skel { border: 1px solid var(--line); border-radius: 4px; overflow: hidden; background: var(--panel); }
.skel .b { height: 12px; margin: 10px 13px; border-radius: 2px; background: linear-gradient(90deg, var(--panel-2), #332c21, var(--panel-2)); background-size: 200% 100%; animation: shim 1.4s linear infinite; }
.skel .b.thumb { height: 0; padding-bottom: 100%; margin: 0; }
.skel .b.w60 { width: 60%; }
/* 行列表的骨架：一行一根细条，形状要和真行一样，否则列表到位时会"跳"一下 */
.skel-row { display: flex; align-items: center; gap: 11px; padding: 7px 8px; border-bottom: 1px solid var(--line); }
.skel-row .b { border-radius: 2px; background: linear-gradient(90deg, var(--panel-2), #332c21, var(--panel-2)); background-size: 200% 100%; animation: shim 1.4s linear infinite; }
.skel-row .b.thumb { flex: 0 0 46px; height: 46px; }
.skel-row .bk { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.skel-row .b.line1 { height: 11px; width: 62%; }
.skel-row .b.line2 { height: 9px; width: 40%; }
@keyframes shim { to { background-position: -200% 0; } }

/* ---------- 详情（独立页 /map/:fsid 与列表页右栏共用同一份标记） ---------- */
/* 摆法是"属性面板"：头图一块、标题、一行概览，然后一路 label / value 的细线表。
   竖着扫一列标签就知道有些什么信息，比把字段塞进一堆小方块里好找；
   参考的是文件管理器那种属性页，也是这块最主要的使用场景 —— 快速确认"这是不是我要的那张"。

   **单栏**：早先是正文 + 右侧栏两栏，栏一宽就断成左右两截、眼睛来回跳。
   独立页给一个上限并居中（不然 1240px 宽的属性表拉得太长、还会贴在左边剩一大块空）；
   右栏本来就窄，铺满即可。 */
/* 独立详情页：宽度交给外层 .wrap（max-width 1240px）限制，这里不再单独封顶。
   （列表右栏的 .detail.detail-pane 另有 max-width:none / margin:0 覆盖，不受影响） */
.detail { margin: 18px auto 0; }
.panel {
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  border: 1px solid var(--line-2); border-radius: 4px; padding: 20px; position: relative;
}
.panel + .panel { margin-top: 18px; }

/* 头图 + 标题。默认横排（独立页的左栏有 660px 宽，并排才不浪费）；
   右栏默认竖排 —— 窄栏里就是参考图那个"图上、文下"的样子，宽过 560px 再并排。
   图是正方形、封顶 300px：war3parser 抠出来的基本只有 256×256，再大只是放大像素 */
.dtop { display: flex; flex-direction: row; align-items: flex-start; gap: 20px; margin-bottom: 4px; }
.dhero {
  position: relative; flex: 0 0 300px; width: 300px; aspect-ratio: 1 / 1;
  overflow: hidden; border: 1px solid var(--line-2); border-radius: 4px; background: var(--ink);
}
.dhero img, .dhero > .sk { width: 100%; height: 100%; object-fit: cover; display: block; }
.dhero .rune {
  position: absolute; inset: 0; display: grid; place-items: center;
  color: var(--gold); opacity: 0.14; pointer-events: none;
}
.dhero .rune svg { width: 46%; height: 46%; }
/* 角上那行压在图上，不另占版面 */
.dhero-cap {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 9px 6px;
  text-align: right; font-size: 11px; color: var(--text-2);
  background: linear-gradient(180deg, transparent, rgba(5, 4, 3, 0.85));
}
.dhead { flex: 1 1 auto; min-width: 0; }
.detail h1 {
  font-family: var(--ff-display); font-size: 26px; line-height: 1.35; margin: 0 0 9px; letter-spacing: 1px;
  background: linear-gradient(180deg, #fff4d8, #9c7a2f);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* 标题下那一行概览：这是个什么格式、多大、几个人玩、什么地形。竖线隔开，
   和下面"标签 vs 值"的属性表区分开 —— 这行是概览，不是明细 */
.dfacts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--text-2); font-size: 13px; margin-bottom: 12px; }
.dfacts .dbar { width: 1px; height: 11px; background: var(--line-2); }
/* 详情页顶部的分类标签 */
.detail-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }
.dtag {
  padding: 3px 11px; border: 1px solid var(--line-2); border-radius: 20px;
  color: var(--text-2); font-size: 12px; transition: all 0.16s;
}
.dtag:hover { color: var(--gold-l); border-color: var(--line-3); background: rgba(214, 178, 96, 0.06); }

/* 「相关信息」：同作者 / 名字含相同词的地图。宽栏两列，窄栏自动落成一列 */
.rel-list {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 2px 10px;
}
.rel-row {
  display: flex; align-items: center; gap: 9px; min-width: 0;
  padding: 6px 8px; border: 1px solid transparent; border-radius: 3px; transition: background 0.14s, border-color 0.14s;
}
.rel-row:hover { background: rgba(214, 178, 96, 0.06); border-color: var(--line); }
.rel-thumb {
  position: relative; flex: 0 0 34px; width: 34px; height: 34px; border-radius: 2px;
  overflow: hidden; background: var(--ink);
}
.rel-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rel-thumb .rune { position: absolute; inset: 0; display: grid; place-items: center; color: var(--gold); opacity: 0.2; }
.rel-thumb .rune svg { width: 58%; height: 58%; }
.rel-body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rel-t { color: var(--text); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rel-row:hover .rel-t { color: var(--gold-l); }
.rel-m { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 一节：一条小标题 + 内容。上面一条细线把它和前一块分开，不靠空白硬撑 */
.dsec { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.dsec-t {
  display: flex; align-items: center; gap: 8px; margin: 0 0 10px;
  font-size: 15px; font-weight: 600; letter-spacing: 2px; color: var(--gold-l);
}
.dsec-t::before { content: "◆"; color: var(--gold-d); font-size: 9px; }

/* 属性表：标签一列（宽度取最长那个）、值一列，行间一条细线。
   值里可能出现很长的网盘路径，所以 minmax(0,1fr) + overflow-wrap —— 不然会把容器撑破 */
.kvr { display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: 18px; margin: 0; }
.kvr dt { color: var(--muted); font-size:14px; padding: 6px 0; }
.kvr dd { margin: 0; padding: 6px 0; color: var(--text); font-size: 14px; overflow-wrap: anywhere; }
/* 第一行不要再画一条线：上面已经有 .dsec 的边框了 */
.kvr dt:first-of-type, .kvr dd:first-of-type { border-top: 0; }
.kvr dd.mono { font-family: Consolas, monospace; font-size: 12px; color: var(--text-2); }

/* 下载区跟着标题走：按钮 + 提取码 + 一句说明。回答的是"这张图我要不要"，
   和标题、人数、体积是同一个判断，不该让人看完一圈属性再回去找按钮 */
.dact { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; margin-top: 14px; }
.dact .btn-primary { padding: 11px 26px; font-size: 15px; }
.dl-note { color: var(--muted); font-size: 12px; line-height: 1.7; }
/* 分享提取码：一眼看得清、一点就能复制 */
.dl-pwd { display: flex; align-items: center; gap: 9px; color: var(--text-2); font-size: 13px; }
.dl-pwd b { color: var(--gold-l); font-family: Consolas, monospace; font-size: 15px; letter-spacing: 2px; }
/* 「分享的链接已失效？点击报错」：像链接但比正文弱一档 —— 它是兜底出口，
   不该和下载按钮抢注意力。放在按钮下方、说明文字之后，点开发现打不开才会去找它。 */
.dl-report { margin-top: 1px; }
.dl-report-btn {
  padding: 0; border: 0; background: none; cursor: pointer;
  font-family: inherit; font-size: 12px; color: var(--muted);
  border-bottom: 1px dashed var(--line); transition: color 0.15s, border-color 0.15s;
}
.dl-report-btn:hover { color: var(--gold-l); border-bottom-color: var(--gold-l); }
.dl-report-btn:disabled { cursor: default; color: var(--text-2); border-bottom-color: transparent; }
.btn-mini { padding: 4px 10px; font-size: 12px; }
/* 没有下载入口时的按钮形态：留着位置，但明摆着点不动，别让人以为是网络卡了 */
.btn.is-off, .btn.is-off:hover { background: transparent; border-color: var(--line); color: var(--muted); cursor: default; box-shadow: none; }

/* 文件 / 解析信息 两个页签：都是十来行的 label/value 长表，叠着放会把详情拉得很长，
   而读者通常只要其中一块。页签本身不用栏目标题 —— 页签就是标题。 */
.dtabs { display: flex; gap: 2px; margin-bottom: 10px; border-bottom: 1px solid var(--line); }
.dtab {
  padding: 7px 15px 8px; border: 0; background: transparent; cursor: pointer;
  font-family: var(--ff-body); font-size: 14px;color: var(--muted);
  border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color 0.15s, border-color 0.15s;
}
.dtab::before { content: "◆"; color: var(--gold-d); font-size: 8px; margin-right: 7px; vertical-align: 2px; opacity: 0.6; }
.dtab:hover { color: var(--text-2); }
.dtab.on { color: var(--gold-l); border-bottom-color: var(--gold); font-weight: 600; }
.dtab.on::before { opacity: 1; }
.dtab:focus-visible { outline: 1px solid var(--line-3); outline-offset: -1px; }

/* 介绍装在一个浅底框里：正文是作者写的自由文本，和周围的属性表不是一类东西 */
.desc-box { background: rgba(var(--ink-rgb), 0.45); border: 1px solid var(--line); border-radius: 4px; padding: 12px 14px; }
.desc { color: var(--text-2); font-size: 14px; line-height: 1.85; white-space: pre-wrap; overflow-wrap: anywhere; }
/* 「地图介绍」的两段来源各占一块：两块并存时前面标一行小字，说明这段话在游戏的哪个界面能看到。
   只有一块时不标 —— 节标题已经写着「地图介绍」，再标一遍是同一句话说两次 */
.desc-block + .desc-block { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.desc-src { display: block; color: var(--muted); font-size: 14px; font-weight: 400; letter-spacing: 0.5px; margin-bottom: 5px; }
.desc-src::before { content: "◆"; color: var(--gold-d); font-size: 9px; margin-right: 6px; vertical-align: 1px; }

/* 工具补丁说明的富文本（desc-html）：白名单过滤后渲染的 HTML 需要这些排版。
   只挂在 .desc-html 上，不碰普通地图介绍那套纯文本样式。 */
.desc-html a { color: var(--gold-l); }
.desc-html a:hover { text-decoration: underline; }
.desc-html b, .desc-html strong { color: var(--gold-l); }
.desc-html i, .desc-html em { font-style: italic; }
.desc-html u { text-decoration: underline; }
.desc-html s, .desc-html del { text-decoration: line-through; color: var(--muted); }
.desc-html h1, .desc-html h2, .desc-html h3 { margin: 12px 0 6px; color: var(--text); font-weight: 600; letter-spacing: 0.5px; }
.desc-html h1 { font-size: 18px; }
.desc-html h2 { font-size: 16px; }
.desc-html h3 { font-size: 15px; }
.desc-html ul, .desc-html ol { margin: 6px 0; padding-left: 22px; }
.desc-html li { margin: 2px 0; }
.desc-html blockquote { margin: 8px 0; padding: 4px 12px; border-left: 3px solid var(--line-3); color: var(--text-2); }
.desc-html code { font-family: Consolas, Menlo, monospace; font-size: 13px; background: rgba(var(--ink-rgb), 0.6); padding: 1px 5px; border-radius: 3px; }
.desc-html pre { background: rgba(var(--ink-rgb), 0.6); padding: 10px 12px; border-radius: 4px; overflow-x: auto; }
.desc-html pre code { background: none; padding: 0; }
.desc-html hr { border: 0; border-top: 1px solid var(--line); margin: 10px 0; }
.desc-html img { max-width: 100%; height: auto; display: block; margin: 8px 0; border-radius: 4px; }
.desc-html iframe { width: 100%; max-width: 100%; aspect-ratio: 16 / 9; border: 0; margin: 8px 0; border-radius: 4px; background: #000; }
.desc-html table { border-collapse: collapse; margin: 8px 0; width: 100%; }
.desc-html th, .desc-html td { border: 1px solid var(--line); padding: 6px 10px; font-size: 13px; text-align: left; }
.desc-html th { background: rgba(var(--ink-rgb), 0.5); color: var(--gold-l); }


/* 「章节列表」：战役的关卡清单。两列（章节名 / 关卡标题）+ 行间细线，语气和属性表一致——
   它是清单不是正文，所以不用 desc-box 那种浅底框 */
.dsec-sub { color: var(--muted); font-size: 12px; font-weight: 400; letter-spacing: 0.5px; }
.chapters { list-style: none; margin: 0; padding: 0; }
.chapters li { display: flex; align-items: baseline; gap: 14px; padding: 7px 0; border-top: 1px solid var(--line); }
.chapters li:first-child { border-top: 0; padding-top: 1px; }
.ch-no { flex: 0 0 auto; min-width: 62px; color: var(--muted); font-size: 12px; letter-spacing: 1px; }
.ch-t { color: var(--text-2); font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }

/* ---------- 提示 ---------- */
#toast {
  position: fixed; left: 50%; bottom: 34px; transform: translate(-50%, 20px);
  padding: 10px 20px; border-radius: 3px; font-size: 13px;
  background: var(--panel-2); border: 1px solid var(--line-3); color: var(--gold-l);
  opacity: 0; pointer-events: none; transition: all 0.24s; z-index: 90;
}
#toast.on { opacity: 1; transform: translate(-50%, 0); }

.ft { padding: 20px 0; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; text-align: center; }
.ft a { color: var(--text-2); }

.back { display: inline-flex; align-items: center; gap: 6px; margin-top: 18px; color: var(--text-2); font-size: 13px; }
.back:hover { color: var(--gold-l); }

/* ---------- 维护页面 ---------- */
/* 头部那行"已收录 / 待解析"：窄屏上它会把标题挤到折行，还把"回站点"压成竖排。
   手机上维护的人要的是入口，不是统计，所以直接不显示这一行。 */
.adm-head-stat { white-space: nowrap; }
.hd .btn-mini { white-space: nowrap; }
@media (max-width: 640px) {
  .adm-head-stat { display: none; }
}
.btn-danger { border-color: rgba(217, 84, 43, 0.45); color: #e8875f; }
.btn-danger:hover { color: #fff; border-color: var(--ember); background: linear-gradient(135deg, #b8441f, #d9542b); }
.btn:disabled { opacity: 0.55; cursor: progress; }

.adm-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 12px; }
.adm-opts { gap: 18px; }
.adm-check { display: inline-flex; align-items: center; gap: 6px; color: var(--text-2); font-size: 12px; cursor: pointer; }
.adm-check input { accent-color: var(--gold); }
.adm-input {
  flex: 1; min-width: 0; padding: 8px 12px;
  background: rgba(var(--ink-rgb), 0.6); color: var(--text);
  border: 1px solid var(--line-2); border-radius: 3px;
  font-family: var(--ff-body); font-size: 13px; outline: none;
}
.adm-input:focus { border-color: var(--line-3); box-shadow: 0 0 0 2px rgba(214, 178, 96, 0.12); }
/* 路径和 fs_id 都是机器串，等宽字体更好核对有没有抄错 */
.adm-input-wide { font-family: Consolas, monospace; font-size: 12px; }
.adm-input-num { flex: 0 0 110px; }
/* 分享链接多半是一整段话，得给个能放下两行的框 */
.adm-textarea { flex: 1 1 100%; min-height: 62px; resize: vertical; line-height: 1.6; }
.adm-input-tiny { flex: 0 0 84px; text-align: center; }
.panel code { background: rgba(214, 178, 96, 0.1); border: 1px solid var(--line); border-radius: 2px; padding: 1px 5px; font-family: Consolas, monospace; font-size: 12px; }

/* 攻略秘籍（后台）：列表 + 富文本编辑器 */
.adm-field { display: block; margin-top: 12px; color: var(--text-2); font-size: 13px; }
.adm-field .adm-input { margin-top: 6px; width: 100%; }
.adm-guide-list { display: flex; flex-direction: column; gap: 8px; }
.adm-guide-row {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: 4px; background: var(--panel-2);
}
.adm-guide-main { min-width: 0; flex: 1 1 auto; }
.adm-guide-t { color: var(--text); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-guide-m { margin-top: 3px; color: var(--muted); font-size: 12px; }
.adm-guide-act { flex: 0 0 auto; display: flex; gap: 6px; }

.guide-editor { margin-top: 6px; border: 1px solid var(--line-2); border-radius: 4px; overflow: hidden; background: var(--ink); }
.guide-toolbar { display: flex; flex-wrap: wrap; gap: 2px; padding: 6px; border-bottom: 1px solid var(--line); background: var(--panel-2); }
.guide-toolbar button {
  padding: 4px 10px; border: 1px solid transparent; border-radius: 3px;
  background: transparent; color: var(--text-2); font-size: 12px; cursor: pointer;
}
.guide-toolbar button:hover { color: var(--gold-l); border-color: var(--line-2); background: rgba(214, 178, 96, 0.06); }
.guide-edit {
  min-height: 260px; max-height: 60vh; overflow-y: auto; padding: 12px 14px;
  color: var(--text); font-size: 14px; line-height: 1.8; outline: none;
}
.guide-edit:empty::before { content: "在这里写正文……"; color: var(--muted); }
.guide-edit img { max-width: 100%; height: auto; border-radius: 4px; }
.guide-edit h3 { margin: 12px 0 6px; color: var(--gold-l); font-size: 15px; }
.guide-edit ul, .guide-edit ol { padding-left: 22px; }
.guide-edit a { color: var(--gold-l); }
/* HTML 源码模式：等宽、可纵向拉高，和可视框同高 */
.guide-html {
  display: block; width: 100%; min-height: 260px; max-height: 60vh; box-sizing: border-box;
  padding: 12px 14px; border: 0; outline: none; resize: vertical;
  background: var(--ink); color: var(--text-2);
  font-family: Consolas, Menlo, monospace; font-size: 12px; line-height: 1.7;
}
.guide-toolbar button.on { color: var(--gold-l); border-color: var(--line-3); background: rgba(214, 178, 96, 0.1); }

/* 查一下：把结论和两边的现状并排放出来 */
.adm-verdict { margin-top: 14px; padding: 12px 14px; background: var(--panel-2); border: 1px solid var(--line); border-left: 3px solid var(--gold); border-radius: 3px; }
.adm-verdict.adm-ok { border-left-color: var(--gold); }
.adm-verdict.adm-warn { border-left-color: var(--ember); }
.adm-verdict.adm-err { border-left-color: #b3495c; }
.adm-v-head { color: var(--gold-l); font-size: 13px; font-weight: 600; margin-bottom: 8px; }
.adm-v-grid { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 4px 10px; font-size: 12px; }
.adm-v-k { color: var(--muted); }
.adm-v-v { color: var(--text); overflow-wrap: anywhere; }
.adm-v-v.mono { font-family: Consolas, monospace; font-size: 12px; color: var(--text-2); }
.adm-v-v.adm-err { color: #e8875f; }
.adm-v-note { margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--line); color: var(--text-2); font-size: 12px; line-height: 1.7; }
/* 目录下挂着的条目：移除前先让人看清删的是哪几条 */
.adm-v-list { margin-top: 7px; display: grid; gap: 3px; }
.adm-v-li { padding: 4px 8px; background: rgba(var(--ink-rgb), 0.45); border: 1px solid var(--line); border-radius: 3px; color: var(--text-2); font-size: 12px; overflow-wrap: anywhere; }
.adm-v-li .mono { color: var(--muted); font-family: Consolas, monospace; margin-right: 8px; }

/* 同步进度：一轮几十分钟，光一句"正在同步中"跟卡死没法区分 */
.adm-prog { margin-top: 12px; padding: 11px 13px; background: var(--panel-2); border: 1px solid var(--line); border-left: 2px solid var(--gold); border-radius: 3px; }
.adm-prog-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.adm-prog-phase { color: var(--gold-l); font-size: 13px; font-weight: 600; }
.adm-prog-time { margin-left: auto; color: var(--muted); font-size: 12px; }
.adm-prog-bar { height: 4px; background: rgba(var(--ink-rgb), 0.7); border-radius: 2px; overflow: hidden; }
.adm-prog-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold), var(--ember)); transition: width .4s ease; }
.adm-prog-line { margin-top: 8px; color: var(--text); font-size: 12px; line-height: 1.7; }
.adm-prog-cur { margin-top: 4px; color: var(--text-2); font-size: 11px; line-height: 1.6; overflow-wrap: anywhere; }
.adm-prog-sub { margin-top: 4px; color: var(--muted); font-size: 11px; line-height: 1.7; }
/* 解析页那行「上一轮」的结局：被中断和出错要一眼看出来，正常跑完不用抢眼 */
.parse-end-ok { color: var(--gold-l); }
.parse-end-warn { color: var(--ember-l); }
.parse-end-err { color: #e8875f; }

/* 解析失败清单：一行一条，名字占满第一行，原因和元信息折在第二行。
   不用表格 —— 原因长度差得太多（"地图被保护"和"包里没有可识别的条目（内含：…）"），
   表格会把短的那列拉得极宽，长的那格反而挤成一条缝。 */
.adm-fail-list { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; max-height: 520px; overflow-y: auto; }
.adm-fail { padding: 8px 12px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 3px; }
.adm-fail:hover { border-color: var(--line-3); }
.adm-fail-h { display: flex; align-items: center; gap: 10px; }
.adm-fail-n { flex: 1; min-width: 0; font-size: 13px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-fail-n a { color: inherit; }
.adm-fail-n a:hover { color: var(--gold-l); }
.adm-fail-b { flex: 0 0 auto; }
.adm-fail-m { display: flex; align-items: baseline; gap: 8px; margin-top: 5px; font-size: 11px; color: var(--muted); flex-wrap: wrap; }
.adm-fail-tag { flex: 0 0 auto; padding: 1px 6px; border-radius: 2px; font-size: 11px; font-weight: 600; }
.adm-fail-tag.err { color: #e8875f; background: rgba(217, 84, 43, 0.12); }
.adm-fail-tag.warn { color: var(--ember-l); background: rgba(214, 178, 96, 0.12); }
.adm-fail-tag.stg { color: var(--muted); background: rgba(var(--ink-rgb), 0.5); border: 1px solid var(--line); font-weight: 400; }
/* 核实"还能打开"用绿色（判定为否定失效），和"失效(橙红)""没判出来(琥珀)"区分开 */
.adm-fail-tag.ok { color: #7fb98a; background: rgba(127, 185, 138, 0.12); }
/* 原因最多两行，全文在 title 里。几十条一屏，每条铺五行就变成没法扫了 */
.adm-fail-r {
  flex: 1 1 240px; min-width: 0; color: var(--text-2); line-height: 1.6; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
@media (max-width: 640px) {
  /* 窄屏：按钮单独占一行，名字和原因各留满宽。清单仍然限高（内部滚动）——
     50 条铺开是三米长的页面，下面的东西全被顶走。 */
  .adm-fail-h { flex-wrap: wrap; }
  .adm-fail-b { width: 100%; }
}

/* 最近 7 天的小表：不比大小、不画图，就一列数字对齐着看 */
.adm-week { display: flex; flex-direction: column; font-size: 12px; margin-top: 12px; }
.adm-week-row {
  display: grid; grid-template-columns: 96px repeat(4, minmax(0, 1fr));
  gap: 10px; padding: 7px 2px; border-bottom: 1px solid var(--line); align-items: baseline;
}
.adm-week-row > span:not(:first-child) { text-align: right; }
.adm-week-row.head { color: var(--muted); font-size: 11px; border-bottom-color: var(--line-3); }
.adm-week-row.today { color: var(--gold-l); }
@media (max-width: 640px) {
  .adm-week-row { grid-template-columns: 76px repeat(4, minmax(0, 1fr)); gap: 6px; font-size: 11px; }
}

/* 搜一条：结果是一排可点的按钮 */
.adm-results { display: grid; gap: 6px; margin-top: 12px; }

/* 分类标签：挑分类的那排 chip 里塞了个复选框 */
.tag-pick { display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px; }
.tag-pick input { accent-color: var(--gold); margin: 0; }
.tag-pick b { color: var(--muted); font-size: 11px; font-weight: 400; }
.tag-pick.on, .tag-pick.on:hover {
  color: #1a1206; background: linear-gradient(180deg, var(--gold-l), var(--gold));
  border-color: var(--gold); font-weight: 600;
}
.tag-pick.on b { color: rgba(26, 18, 6, 0.65); }

/* 一批图里的每一条：整行都是 label，点哪儿都能勾上 */
.adm-pick { cursor: pointer; }
.adm-pick input { flex: 0 0 auto; accent-color: var(--gold); }
.adm-pick-t {
  flex: 0 1 auto; max-width: 46%; color: var(--gold-l); font-size: 12px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.adm-pick-t.none { color: var(--muted); font-style: italic; }

/* 维护面板里那种"一句话结论" */
.adm-v-t { color: var(--text); font-size: 13px; }

.adm-hit {
  display: flex; align-items: baseline; gap: 12px; width: 100%; text-align: left;
  padding: 8px 12px; background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 3px; cursor: pointer; font-family: var(--ff-body);
  transition: all 0.16s;
}
.adm-hit:hover { border-color: var(--line-3); background: rgba(214, 178, 96, 0.06); }
.adm-hit-n { flex: 1; min-width: 0; color: var(--text); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-hit-m { color: var(--muted); font-family: Consolas, monospace; font-size: 11px; }

/* 分类标签那批结果：第二行专门放网盘路径。
   标注时要看的就是"这张图在网盘的哪一层"，单行布局会把它挤成省略号 */
.adm-hit-2l { align-items: flex-start; }
.adm-hit-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.adm-hit-line { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.adm-hit-p {
  color: var(--muted); font-family: Consolas, monospace; font-size: 12px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* 操作记录 */
.adm-log { max-height: 420px; overflow-y: auto; }
.adm-log-empty { color: var(--muted); font-size: 12px; padding: 8px 0; }
.adm-log-item { display: flex; gap: 10px; padding: 9px 12px; margin-bottom: 6px; background: var(--panel-2); border: 1px solid var(--line); border-left: 3px solid var(--gold); border-radius: 3px; }
.adm-log-item.adm-warn { border-left-color: var(--ember); }
.adm-log-item.adm-err { border-left-color: #b3495c; }
.adm-log-time { flex: 0 0 auto; color: var(--muted); font-family: Consolas, monospace; font-size: 11px; padding-top: 2px; }
.adm-log-body { flex: 1; min-width: 0; }
.adm-log-t { color: var(--text); font-size: 13px; overflow-wrap: anywhere; }
.adm-log-item summary { color: var(--text); font-size: 13px; cursor: pointer; }
.adm-log-item pre { margin: 8px 0 0; padding: 9px 11px; background: rgba(var(--ink-rgb), 0.6); border: 1px solid var(--line); border-radius: 3px; color: var(--text-2); font-size: 12px; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--ff-body); }

@media (max-width: 560px) {
  .adm-v-grid { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .adm-v-k { margin-top: 6px; }
  .adm-input-num { flex: 1; }
}

/* ---------- 门户首页 ---------- */
.hero { padding: 44px 0 26px; text-align: center; }
.hero-t {
  margin: 0; font-family: var(--ff-display); font-size: 40px; font-weight: 600; letter-spacing: 4px;
  background: linear-gradient(180deg, #fff4d8, #9c7a2f);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-s { margin: 12px auto 0; max-width: 760px; color: var(--text-2); font-size: 14px; line-height: 1.95; }

/* 大搜索。原来这里是三四个统计数字：数字回答的是"这个库有多大"，
   而访客来这里的第一个动作是"找一张图"。所以把这个位置让给搜索。 */
.bigsearch { margin: 0 auto 6px; max-width: 760px; }
.bigsearch-f {
  display: flex; gap: 10px; align-items: stretch;
  border: 1px solid var(--line-3); border-radius: 4px;
  padding: 8px; transition: border-color 0.15s, box-shadow 0.15s;
}
.bigsearch-f:focus-within { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(214, 178, 96, 0.1); }
/* 搜索范围：和输入框同处一个圆角框里，用一条竖线分开。
   原生 select 的展开列表是系统画的，只能靠 option 给深色背景兜住 */
.bigsearch-fd {
  flex: 0 0 auto; padding: 0 8px 0 12px; border: 0; border-right: 1px solid var(--line-2);
  background: transparent; color: var(--text-2);
  font-family: inherit; font-size: 14px; outline: none; cursor: pointer;
  -webkit-appearance: none; appearance: none;
  padding-right: 22px;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
                    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 12px) 52%, calc(100% - 7px) 52%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.bigsearch-fd:focus { color: var(--gold-l); }
.bigsearch-fd option { background: #211c16; color: var(--text); }
.bigsearch-q {
  flex: 1; min-width: 0; padding: 10px 14px; border: 0; background: transparent;
  color: var(--text); font-family: inherit; font-size: 16px; outline: none;
}
.bigsearch-q::placeholder { color: var(--muted); }
.bigsearch-b { padding: 10px 28px; font-size: 15px; }
.bigsearch-hint { margin: 10px 2px 0; color: var(--muted); font-size:14px; }
.bigsearch-hint a { color: var(--text-2); border-bottom: 1px dashed var(--line-3); }
.bigsearch-hint a:hover { color: var(--gold-l); border-bottom-color: var(--gold-l); }

/* 快捷下载：标签靠左 + 链接横向流动换行的紧凑排版，省高度。
   三组各配一个强调色（金 / 橙 / 冰蓝），跟整站暗金奇幻风对齐。 */
.quick { display: flex; flex-direction: column; gap: 10px; margin: 4px 0 12px; }

.quick-r { display: flex; align-items: flex-start; gap: 14px; }
.quick-tag {
  --qaccent: var(--gold);
  flex: 0 0 auto; min-width: 74px; text-align: center;
  padding: 4px 12px; font-size: 13px; letter-spacing: 1px;
  color: var(--qaccent); background: var(--ink);
  border: 1px solid rgba(214, 178, 96, 0.32);
  border-radius: 3px; line-height: 1.4;
}
.q-gold { --qaccent: var(--gold); }
.q-ember { --qaccent: var(--ember-l); }
.q-ice { --qaccent: var(--ice); }

.quick-links { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 20px; min-width: 0;margin-top: 4px; }
.quick-links a {
  color: var(--text-2); font-size: 14px; line-height: 1.6;
  white-space: nowrap; transition: color 0.15s;
}
.quick-links a:hover { color: var(--gold-l); text-decoration: underline; }

@media (max-width: 560px) {
  .quick-r { flex-direction: column; gap: 6px; }
  .quick-tag { min-width: 0; align-self: flex-start; }
}

/* 友情链接：文字链，不占篇幅。一行排开，窄屏自然折行 */
.friends { display: flex; flex-wrap: wrap; gap: 8px 22px; padding: 0px 0 20px; }
.friends .friend {
  color: var(--text-2); font-size: 13px; letter-spacing: 0.5px;
  border-bottom: 1px dashed var(--line-3); padding-bottom: 2px;
}
.friends .friend:hover { color: var(--gold-l); border-bottom-color: var(--gold-l); }
.friends-empty { color: var(--muted); font-size: 13px; }

/* 数字条。四个格子紧挨着（靠 1px 的间隙露出底色当分隔线），比四个独立卡片更像一组数据 */
.tiles { margin: 10px 0 4px; }
.tiles-in {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)); gap: 1px;
  margin: 0; background: var(--line); border: 1px solid var(--line); border-radius: 4px; overflow: hidden;
}
.tile { background: var(--panel); padding: 15px 18px; min-width: 0; }
.tile dt { color: var(--muted); font-size: 12px; letter-spacing: 0.5px; }
.tile dd { margin: 5px 0 0; color: var(--text-2); font-size: 14px; }
.tile dd b { font-family: var(--ff-display); font-size: 25px; color: var(--gold-l); letter-spacing: 1px; }
.tile-s { display: block; margin-top: 6px; color: var(--muted); font-size: 11px; line-height: 1.65; }
/* 固定在两列。auto-fit 在窄栏里会算出三列，第四个格子孤零零地掉到第二行 */
.tiles-in.tiles-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* 分类卡片 */
.cats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.cat {
  display: flex; flex-direction: column; gap: 4px; padding: 14px 15px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 4px;
  transition: all 0.18s;
}
.cat:hover { border-color: var(--line-3); background: rgba(214, 178, 96, 0.06); transform: translateY(-2px); }
.cat b { color: var(--gold-l); font-size: 14px; }
.cat span { color: var(--muted); font-size: 12px; }
.cat-all b { color: var(--ember-l); }
/* 还没标过图的分类压暗：摆在那儿是为了让人知道有这一栏，不是点进去看空的 */
.cat-zero b { color: var(--muted); }

.sec-more { color: var(--text-2); font-size: 12px; white-space: nowrap; }
.sec-more:hover { color: var(--gold-l); }
.lead { margin: -4px 0 20px; color: var(--text-2); font-size: 13px; line-height: 1.85; }

/* 「清除筛选」：没有筛选可清时是 hidden 的，别摆一个点了没反应的按钮 */
.freset { color: var(--muted); font-size: 12px; padding: 0 4px; }
.freset:hover { color: var(--gold-l); }

/* ---------- 排行 ---------- */
.rank-wrap { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: start; }
/* 三张榜并排。`.panel + .panel` 会给第 2、3 张加 18px 上边距（那条是给上下堆叠用的），
   这里必须用两个类把它压回去，否则「本周」「本月」比「今日」低一截 */
.panel.rank-panel { margin: 0; }
.rlist { display: flex; flex-direction: column; gap: 1px; }
.rrow { display: flex; align-items: center; gap: 10px; padding: 7px 9px; border-radius: 3px; transition: background 0.15s; }
.rrow:hover { background: rgba(214, 178, 96, 0.07); }
.rno { flex: 0 0 22px; text-align: right; color: var(--muted); font-family: var(--ff-display); font-size: 13px; }
.rno.top { color: var(--gold-l); font-size: 16px; }
.rthumb { flex: 0 0 34px; height: 34px; position: relative; border-radius: 2px; overflow: hidden; background: var(--ink); }
.rthumb img, .rthumb .sk { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 34px 见方放符文环只会糊成一团，榜单里就不放装饰了 */
.rthumb .rune { display: none; }
.rbody { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rtitle { color: var(--text); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rrow:hover .rtitle { color: var(--gold-l); }
.rmeta { color: var(--muted); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rval { flex: 0 0 auto; color: var(--text-2); font-size: 12px; }

/* ---------- 攻略秘籍 ---------- */
/* 列表复用工具补丁那套 .lrow 行样式（无缩略图，一行 标题 / 作者 / 时间）。
   宽栏下给它自己的列，规则写在下面 @container(760px) 里、.lrow 之后 —— 顺序不能提前，
   否则会被 .lrow 的六列网格盖回去 */

.guide-article { margin: 18px 0 44px; }
.guide-head { border-bottom: 1px solid var(--line); padding-bottom: 14px; margin-bottom: 18px; }
.guide-title {
  font-family: var(--ff-display); font-size: 26px; line-height: 1.35; margin: 0 0 9px; letter-spacing: 1px;
  background: linear-gradient(180deg, #fff4d8, #9c7a2f);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.guide-meta { color: var(--muted); font-size: 13px; }
.guide-content { font-size: 14px; line-height: 1.9; }
.guide-back { margin-top: 26px; }

/* ---------- 维护页：三栏（导航 / 当前功能 / 常驻记录） ---------- */
/* 原来五个面板串在一整页上，改个分享得先滚过三屏别的表单，而且改完看不到回执。
   拆成一页一件事之后，左边选功能、中间做事、右边一直留着操作记录。 */
.adm-shell { display: grid; grid-template-columns: 178px minmax(0, 1fr) 330px; gap: 18px; align-items: start; margin-top: 18px; }
.adm-side, .adm-logcol { position: sticky; top: calc(var(--hd) + var(--tagh, 0px) + 14px); }
.adm-nav { display: flex; flex-direction: column; gap: 2px; }
.adm-nav a {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 12px; border-left: 2px solid transparent; border-radius: 0 3px 3px 0;
  color: var(--text-2); font-size: 13px;
}
.adm-nav a:hover { color: var(--gold-l); background: rgba(214, 178, 96, 0.06); }
.adm-nav a.on { color: var(--gold-l); background: rgba(214, 178, 96, 0.1); border-left-color: var(--gold); font-weight: 600; }
/* "后台正在跑"的标记：切到别的功能时也该知道机器没闲着 */
.adm-nav-run { margin-left: auto; color: var(--ember-l); font-size: 10px; font-weight: 400; }
.adm-side-foot { margin-top: 16px; padding-top: 13px; border-top: 1px solid var(--line); }
.adm-side-t { color: var(--muted); font-size: 11px; letter-spacing: 0.5px; margin-bottom: 7px; }
.adm-token-note { margin-top: 8px; color: var(--muted); font-size: 11px; line-height: 1.7; }
.adm-view > .panel:first-child { margin-top: 0; }

/* 概览里的"去做什么"：四个入口，各说清这一页是干什么的 */
.adm-jump { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.adm-jump-i {
  display: flex; flex-direction: column; gap: 5px; padding: 14px 15px;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 4px;
  color: var(--text-2); transition: all 0.18s;
}
.adm-jump-i:hover { border-color: var(--line-3); background: rgba(214, 178, 96, 0.07); transform: translateY(-1px); }
.adm-jump-i b { color: var(--gold-l); font-size: 14px; }
.adm-jump-i span { color: var(--muted); font-size: 12px; line-height: 1.7; }
/* 记录常驻在右侧，自己滚；页面滚的时候它跟着停在原位 */
.adm-logcol { display: flex; flex-direction: column; }
.adm-loghead {
  color: var(--gold-l); font-size: 13px; font-weight: 600; letter-spacing: 0.5px;
  padding-bottom: 9px; margin-bottom: 9px; border-bottom: 1px solid var(--line);
}
.adm-loghead::before { content: "◆"; color: var(--gold-d); font-size: 9px; margin-right: 7px; vertical-align: 2px; }
/* 记录区自己滚，不跟着整页走：一次维护往往要看十几条回执 */
.adm-logcol .adm-log { max-height: calc(100vh - 230px); }
.adm-logcol .panel { margin: 0; }

@media (max-width: 1240px) {
  /* 窄了就把记录挪到底部通栏（用户选的"右侧或底部常驻"） */
  .adm-shell { grid-template-columns: 168px minmax(0, 1fr); }
  .adm-logcol { grid-column: 1 / -1; position: static; }
  .adm-log { max-height: 340px; }
}
@media (max-width: 820px) {
  .adm-shell { grid-template-columns: minmax(0, 1fr); }
  .adm-side { position: static; }
  .adm-nav { flex-direction: row; flex-wrap: wrap; gap: 4px; }
  .adm-nav a { border-left: none; border-bottom: 2px solid transparent; border-radius: 3px 3px 0 0; }
  .adm-nav a.on { border-left: none; border-bottom-color: var(--gold); }
  .adm-side-foot { margin-top: 12px; }
  .adm-jump { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 1080px) { .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 860px) {
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* 详情页的"图右文左"在窄屏上会把标题压成一条 —— 退回图上文下 */
  .dtop { flex-direction: column; }
  .dhero { flex: 0 0 auto; width: min(100%, 300px); }
  .logo span { display: none; }
  /* 三栏的榜单在平板上每栏只剩两百多像素，标题会被截成半截 —— 一栏一行反而更好扫 */
  .rank-wrap { grid-template-columns: minmax(0, 1fr); }
  .cats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hero { padding: 32px 0 20px; }
  .hero-t { font-size: 30px; letter-spacing: 2px; }
}
@media (max-width: 560px) {
  .wrap { padding: 0 14px; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .search input { width: 120px; }
  .sec-title { font-size: 15px; letter-spacing: 1px; }
  .detail h1 { font-size: 20px; }
  .cats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero { padding: 24px 0 16px; }
  .hero-t { font-size: 23px; letter-spacing: 1px; }
}
@media (max-width: 380px) { .search input { width: 84px; } }

/* ---------- 列表页：三栏工作台（左分类 / 中列表 / 右详情） ---------- */
/* 照 QQ 邮箱那套做的：整页就是这一块工作台 —— 不滚整页、三栏各自滚、宽度铺满。
   这一页没有"读一篇文章"的语境，左右留白只是白白少掉两列卡片。
   排版比例也一样：左栏固定且窄，中栏是可以拖的"列表条"，右栏吃掉剩下的全部宽度 ——
   看详情才是这一页的正事，把它挤成一条缝是本末倒置。

   没有选中任何图时右栏不存在（data-open="0"），列表铺满、卡片自己变大 ——
   一开始就空着一块"请选择"的区域，等于把三分之一的屏幕用来道歉。 */

/* 整页不滚：滚动交给三栏各自。flex 列排下来，头部与导航吃固定高度，剩下全给工作台 */
body.wb-body { height: 100vh; overflow: hidden; display: flex; flex-direction: column; }
@supports (height: 100dvh) { body.wb-body { height: 100dvh; } }
body.wb-body #shellTop { flex: 0 0 auto; }
/* 工作台里没有页脚的位置：整页不滚，它要么被截在屏外，要么挤掉一栏的高度。
   站点级入口在左栏底部留着（下载排行），信息没丢 */
body.wb-body #shellFoot { display: none; }

/* 工作台是满屏的，头部要是还居中在 1240 里，logo 就跟下面的左栏对不齐了 */
body.wb-body .hd > .wrap { max-width: none; }

.pane-shell {
  position: relative; z-index: 1;
  flex: 1; min-height: 0;
  display: grid;
  grid-template-columns: 196px minmax(0, var(--list-w, 500px)) 8px minmax(0, 1fr);
  /* 行高显式写成 1fr：隐式行是 auto 的，三栏里内容最高的那一栏会把整行顶高，
     于是"各自滚"变成"整页被撑出滚动条"。 */
  grid-template-rows: minmax(0, 1fr);
  column-gap: 0;
  width: 100%; margin: 0;
  overflow: hidden;
}
/* 收起详情时是两列：左栏 + 铺满的列表。中间那栏就不该再受 --list-w 限制 */
.pane-shell[data-open="0"] { grid-template-columns: 196px minmax(0, 1fr); }
.pane-shell[data-open="0"] .splitter,
.pane-shell[data-open="0"] .pane-detail { display: none; }

/* 左栏：固定宽度，自己滚。它不跟着列表走 —— 翻到第 300 张时它还停在原处。
   三栏各给一档底色（左最沉、中稍亮、右最亮）：一屏三块同色只靠 1px 线分，
   看上去就是一整片黑；哪怕只差三五个明度，边界也立刻清楚了 */
.pane-side {
  height: 100%; min-height: 0;
  overflow-y: auto; overflow-x: hidden;
  padding: 14px 10px 20px 16px;
  background: #1d1813;
  border-right: 1px solid var(--line);
}
.pane-side-h { color: var(--muted); font-size: 11px; letter-spacing: 1.5px; padding: 4px 10px 6px; }
.pane-side-h:not(:first-child) { margin-top: 14px; }
.snav { display: flex; flex-direction: column; gap: 1px; }
.snav-i {
  display: flex; align-items: center; gap: 10px; min-width: 0;
  padding: 7px 10px; border-left: 2px solid transparent; border-radius: 0 3px 3px 0;
  color: var(--text-2); font-size: 13px;
}
.snav-i:hover { color: var(--gold-l); background: rgba(214, 178, 96, 0.06); }
.snav-i.on { color: var(--gold-l); background: rgba(214, 178, 96, 0.1); border-left-color: var(--gold); font-weight: 600; }
.snav-i.zero { color: var(--muted); }
/* 行内元素写 ellipsis 是无效组合（overflow 对 inline 不生效），这里必须是 flex + min-width:0 */
.snav-n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.snav-c { flex: 0 0 auto; color: var(--muted); font-size: 11px; font-weight: 400; font-variant-numeric: tabular-nums; }
.snav-i.on .snav-c { color: var(--gold-d); }
.pane-side-foot { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; }
.pane-side-foot a { color: var(--muted); font-size: 12px; }
.pane-side-foot a:hover { color: var(--gold-l); }

/* 中栏：列表。列数由容器宽度算，拖宽拖窄它自己跟着变。
   这一栏自己滚的只有卡片区 —— 标题和筛选条钉在上头，否则每翻一页都得先往上找排序 */
.pane-list {
  height: 100%; min-height: 0; min-width: 0;
  display: flex; flex-direction: column;
  background: #211c16;
  /* 这一栏的宽度是拖出来的，行的排法要按"这一栏自己多宽"决定，不是按窗口 */
  container-type: inline-size;
}
.pane-list-head { flex: 0 0 auto; padding: 14px 16px 12px; border-bottom: 1px solid var(--line); }
.pane-list-body { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 14px 16px 28px; }
.pane-list .sec-head { margin: 0 0 12px; }

/* 中栏的行列表：一行一张图 —— 缩略图 + 名字 + 一行元信息，格式与体积靠右成两行。
   比卡片密得多（一屏扫十几行才叫"列表"，卡片一屏只放得下六七张），
   行间用细线而不是留白分开：二十多行靠留白会散成一片，看不出这是一份清单。 */
.rows { display: flex; flex-direction: column; }
.lrow {
  display: flex; align-items: center; gap: 11px;
  padding: 7px 10px 7px 8px; border-bottom: 1px solid var(--line);
  transition: background 0.14s;
}
.lrow:hover { background: rgba(214, 178, 96, 0.06); }
/* 当前在右栏打开的那张：左边一道金线 + 淡金底。扫视时不用读名字就知道是哪一行 */
.lrow.on { background: rgba(214, 178, 96, 0.1); box-shadow: inset 2px 0 0 var(--gold); }
.lrow.on .ltitle { color: var(--gold-l); }
.lthumb {
  flex: 0 0 46px; height: 46px; position: relative;
  border: 1px solid var(--line); border-radius: 3px; overflow: hidden; background: var(--ink);
}
.lthumb img, .lthumb .sk { width: 100%; height: 100%; object-fit: cover; display: block; }
.lthumb .rune { position: absolute; inset: 0; display: grid; place-items: center; color: var(--gold); opacity: 0.2; }
.lthumb .rune svg { width: 58%; height: 58%; }
.lthumb.noimg { background: radial-gradient(120% 92% at 62% 8%, #352c1a, #1d1811 64%, var(--ink)); }
.lbody { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ltitle { color: var(--text); font-size:14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lrow:hover .ltitle { color: var(--gold-l); }
/* 元信息：四个固定格子，空的收起来。分隔点用 + 兄弟选择器加，
   这样"作者 | 空 | 空 | 日期"不会在前面留一个孤零零的点 */
.lmeta { display: flex; align-items: baseline; gap: 6px; min-width: 0; color: var(--muted); font-size: 12px; }
.lmeta > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lmeta > span:empty { display: none; }
.lmeta > span + span::before { content: "·"; margin-right: 6px; color: var(--line-3); }
/* 右边两格右对齐：位置在每一行都一样，竖着扫一眼就能按体积排出个大概 */
.lside { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.lext {
  padding: 0 5px; border: 1px solid var(--line-2); border-radius: 2px; line-height: 1.5;
  color: var(--text-2); font-size: 10px; letter-spacing: 0.5px; text-transform: uppercase;
}
.lsize { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }

/* 中栏铺满整屏（没选图时）或被拖宽之后，行还按原来的三块排，中间会空出一大片。
   这时候把元信息拆成真正的列：作者 / 人数 / 更新时间 各占一列 ——
   就是文件管理器那种"详细信息"视图。空的那格照样占位，列才对得齐。
   门槛给到 760：再窄的话固定列会把标题压成一小截 */
@container (min-width: 760px) {
  .lrow { display: grid; grid-template-columns: 46px minmax(0, 1fr) 160px 96px 108px auto; column-gap: 12px; }
  /* 两层包装在这一档没有意义了，拆掉让内容直接落到网格上 */
  .lbody, .lmeta { display: contents; }
  .lmeta > span:empty { display: block; }
  .lmeta > span + span::before { content: none; }
  .lside { flex-direction: row; align-items: center; gap: 10px; justify-self: end; }

  /* 工具补丁的行没有缩略图、也没有作者/人数（见 rowHTML 的 isTool 分支）。
     沿用上面那套列的话，标题会落到"缩略图"那一列 —— 46px 宽，一行只剩两个字。
     这里给它自己的列：标题 / 收录日期 / 右侧（格式 + 体积）。 */
  .lrow-tool { grid-template-columns: minmax(0, 1fr) 108px auto; }
  .lrow-tool .ltitle { grid-column: 1; }
  .lrow-tool .lmeta > span { grid-column: 2; }
  .lrow-tool .lside { grid-column: 3; }

  /* 攻略行：同样没有缩略图/右侧列，只有 标题 + 作者·时间。
     必须排在 .lrow 那条六列规则之后 —— 同优先级，靠后覆盖 */
  .lrow-guide { grid-template-columns: minmax(0, 1fr) 220px; }
}

/* 筛选条在这一栏里挤进 420px，全尺寸摆下去要占四行 —— 每样缩一档才像个工具条 */
.pane-list .filter-bar { padding: 9px 11px; gap: 7px; margin-bottom: 0; }
.pane-list .filter-bar label { font-size: 11px; }
.pane-list .filter-bar select, .pane-list .filter-bar input { padding: 4px 8px; font-size: 12px; }
.pane-list .filter-bar .chip { padding: 3px 10px; font-size: 12px; }
/* 中间那条可以拖的缝。1px 的线放在 8px 的热区中间，好抓但不显眼；
   中点再放一小截"抓手"，否则没人知道这条线能拖 */
.splitter {
  position: relative; height: 100%;
  display: flex; justify-content: center;
  cursor: col-resize; touch-action: none;
}
.splitter::before { content: ""; width: 1px; background: var(--line); transition: background 0.15s; }
.splitter::after {
  content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 3px; height: 40px; border-radius: 2px;
  background: var(--line-2); transition: background 0.15s;
}
.splitter:hover::before, .splitter:focus-visible::before { background: var(--gold); }
.splitter:hover::after, .splitter:focus-visible::after { background: var(--gold); }
.splitter:focus-visible { outline: none; }
body.is-resizing { cursor: col-resize; user-select: none; }
body.is-resizing .splitter::before { background: var(--gold); }

/* 右栏：详情。铺满剩下的宽度，自己滚。
   `container-type` 是为了下面那条容器查询 —— 这一栏多宽由用户拖出来，没有固定的断点可用 */
.pane-detail {
  height: 100%; min-height: 0; min-width: 0;
  overflow-y: auto; overflow-x: hidden;
  padding: 0 20px 20px;
  background: #251f19;
  container-type: inline-size;
}
/* 标题条跟着滚（sticky），滚到明细深处也还够得着关闭。
   底色跟着右栏走，不跟 body —— 不然滚起来会有一条色带在动 */
.pane-detail-bar {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 0; margin-bottom: 14px;
  background: #251f19; border-bottom: 1px solid var(--line);
}
.pane-detail-t { color: var(--gold-l); font-size: 14px; font-weight: 600; letter-spacing: 0.5px; }
.pane-detail-t::before { content: "◆"; color: var(--gold-d); font-size: 9px; margin-right: 6px; vertical-align: 2px; }
.pane-detail-open { margin-left: auto; color: var(--muted); font-size: 12px; }
.pane-detail-open:hover { color: var(--gold-l); }
.pane-detail-x {
  flex: 0 0 auto; width: 26px; height: 26px; padding: 0; line-height: 1;
  border: 1px solid var(--line-2); border-radius: 3px; background: transparent;
  color: var(--text-2); font-size: 14px; cursor: pointer;
}
.pane-detail-x:hover { color: var(--ember-l); border-color: var(--line-3); }

/* 右栏里的详情：比独立页紧凑一档 —— 这一栏是"顺手看一眼"，不是阅读页 */
.detail-pane { max-width: none; margin: 0; }
.detail-pane .dtop { flex-direction: column; gap: 14px; }
.detail-pane .dhero { flex: 0 0 auto; width: min(100%, 300px); }
.detail-pane h1 { font-size: 20px; letter-spacing: 0.5px; }
.detail-pane .dfacts { font-size: 12px; }
.detail-pane .dsec { margin-top: 18px; padding-top: 14px; }
.detail-pane .dsec-t { font-size: 14px; letter-spacing: 1.5px; }
.detail-pane .dact { margin-top: 12px; }
.detail-pane .dact .btn-primary { padding: 9px 20px; font-size: 14px; }
.detail-pane .desc { font-size: 14px; }

/* 右栏够宽了就并排：图 240px + 标题占剩下的。窄栏硬要并排会把标题挤成三行 */
@container (min-width: 560px) {
  .detail-pane .dtop { flex-direction: row; align-items: flex-start; gap: 20px; }
  .detail-pane .dhero { flex: 0 0 240px; width: 240px; }
  .detail-pane h1 { font-size: 24px; }
}

/* 再宽只把字放大一档，不再分栏 —— 单栏才是这块的本意。
   用容器查询而不是断点：这一栏多宽是用户拖出来的，跟窗口宽度没有对应关系。 */
@container (min-width: 820px) {
  .detail-pane .dhero { flex: 0 0 260px; width: 260px; }
  .detail-pane h1 { font-size: 25px; }
  .detail-pane .desc { font-size: 14px; }
}

/* 右栏很宽时，属性表改成"两对标签/值"一行：短值（10 人、v25、城郊）不会在右边拖出一条空白，
   行数也少一半。dt/dd 在 DOM 里本来就是交替的，换成四列网格自然就对上了，不用改标记。
   门槛 900：再窄两列会把值挤成两三行，反而更难读 */
@container (min-width: 500px) {
  .detail-pane .kvr { grid-template-columns: max-content minmax(0, 1fr) max-content minmax(0, 1fr); column-gap: 30px; }
  .detail-pane .desc-box { max-width: 100%; }
}

/* 独立详情页（.detail，非右栏 .detail-pane）的「地图信息」属性表：整页宽跟随窗口，
   窗口够宽时也并成"两对标签/值"一行，和右栏面板一个样。面板那条走容器查询（栏宽是拖出来的），
   独立页整页宽，用媒体查询即可 */
@media (min-width: 500px) {
  .detail:not(.detail-pane) .kvr {
    grid-template-columns: max-content minmax(0, 1fr) max-content minmax(0, 1fr);
    column-gap: 30px;
  }
}

/* 窄屏：整页不滚 + 三栏各自滚这套只在宽屏上成立（一栏只剩两百多像素，还各自带滚动条就没法用了）。
   回到"整页滚"的老样子：左栏变成一排可横滑的分类胶囊，右栏改成"顶掉列表"的整屏视图，拖拽没意义了 */
@media (max-width: 1100px) {
  body.wb-body { height: auto; display: block; overflow: visible; }
  body.wb-body #shellFoot { display: block; }
  .pane-shell, .pane-shell[data-open="0"] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    grid-auto-rows: auto;
    row-gap: 12px;
    height: auto; overflow: visible;
   
  }
  .pane-side {
    height: auto; overflow: visible;
    padding: 12px 10px 10px;
    border-right: 0; border-bottom: 1px solid var(--line);
  }
  /* 四组（全部 / 分类 / 资源 / 入口）排成一行，各保持整块不被拆开，整条横滑。
     各占一行的话，光导航就要吃掉三四行高度 */
  .pane-side { display: flex; align-items: center; gap: 6px; }
  .pane-side > div { display: flex; align-items: center; gap: 6px; width: max-content; max-width: none; flex: 0 0 auto; }
  /* 容不下就横着滚，不折行 —— 折成三行会先吃掉半屏 */
  .pane-side { overflow-x: auto; scrollbar-width: none; }
  .pane-side::-webkit-scrollbar { display: none; }
  .pane-side-h { display: none; }
  .snav { flex-direction: row; gap: 6px; }
  .snav-i { padding: 5px 12px; border: 1px solid var(--line-2); border-left-width: 1px; border-radius: 20px; }
  .snav-i.on { border-color: var(--gold); }
  .pane-side-foot { display: none; }
  .pane-list { height: auto; display: block; }
  .pane-list-head { padding:10px 20px 0; border-bottom: 0; }

  .pane-list-body { height: auto; overflow: visible; padding: 14px 0 8px; }
  .splitter { display: none !important; }
  .pane-detail { height: auto; overflow: visible;  }
  body.detail-open .pane-list { display: none; }
  /* 窄屏看详情时把分类那排也收起来：一条是给"挑分类"用的，读详情时它只是占地方 */
  body.detail-open .pane-side { display: none; }
  .lrow{padding-left:20px;padding-right:20px;}
}

@media (max-width: 560px) {
  .pane-shell { padding: 0 ; }
  .detail-pane h1 { font-size: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::after, *::before { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}