/* ============================================================
公共筛选栏（filter-bar.css）—— 2026-09-19 建立 / 2026-09-23 重构
基准样式取自「角色图鉴」的定位那一行：标签固定宽 + 按钮胶囊 + 右侧搜索/计数。
所有带筛选的页面（角色 / 弧盘 / 驱动块 / 车辆 / 全队攻略 / 地图收集）都引这一份，
页面自己的 CSS 只保留本页特有的颜色规则，不要再重复间距与尺寸。
2026-09-23 改动（用户要求「筛选按钮不要颜色填充，选中用描边」）：
· 选中态 .fbtn.on 由「主色渐变底 + 深字」改为「白底 + 主色描边 + 主色深字」。
渐变填充在密集筛选行里会糊成一条彩色带，且和主 CTA 抢注意力；
描边选中用 inset box-shadow 把描边视觉加粗到 2px，
不占布局空间，也不会和 hover 混淆（hover 只有 1px 描边 + 文字变色）。
· 尺寸全部走 --sp-* / --r-* / --fs-* token。
规格速记：栏内边距 12/16、行间距 8、按钮间距 8、标签宽 60、下方留白 20。
============================================================ */
.filter-bar{
display:flex;flex-direction:column;gap: var(--sp-3);
background:var(--surface-raised);border:1px solid var(--line);border-radius:var(--r-lg);
padding: var(--sp-3) var(--sp-4);margin-bottom: var(--sp-5);
}
.filter-row{display:flex;align-items:center;gap: var(--sp-2);flex-wrap:wrap}
.filter-label{font-size:var(--fs-12);color:var(--ink-muted);width:60px;flex-shrink:0;font-weight:600}
/* 筛选按钮（胶囊）—— 颜色与选中态全站统一到「角色图鉴·定位」那一行。
未选中 = 白底 + 浅描边 + 次级文字色
悬 停 = 主色描边 + 主色深字（1px，浅）
选 中 = 白底 + 主色描边（视觉 2px）+ 主色深字 + 加粗 ← 不再用颜色填充
各页不再自己定义彩色变体（元素色/稀有度色/类型色一律不用）。 */
.filter-bar .fbtn{
display:inline-flex;align-items:center;justify-content:center;gap: var(--sp-1);
font-size:var(--fs-12);font-weight:600;line-height:1.5;
padding: var(--sp-1) var(--sp-3);
border:1px solid var(--line);border-radius:var(--r-md);
background:var(--surface-raised);color:var(--ink-muted);
cursor:pointer;font-family:inherit;
transition:background-color var(--dur) var(--ease),
border-color var(--dur) var(--ease),
color var(--dur) var(--ease),
box-shadow var(--dur) var(--ease);
}
.filter-bar .fbtn:hover{border-color:var(--brand);color:var(--brand-ink)}
.filter-bar .fbtn:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
/* 选中态：描边，不填充。
inset box-shadow 让描边视觉上达到 2px，但不改变盒子尺寸，
因此选中 / 未选中切换时不会跳位。 */
.filter-bar .fbtn.on,
.filter-bar .fbtn.on:hover{
background:var(--surface-raised);
border-color:var(--brand);
box-shadow:inset 0 0 0 1px var(--brand);
color:var(--brand-ink);
font-weight:700;
}
.filter-bar .fbtn.on img{filter:none}
/* 搜索框（靠右）*/
.search-box{
margin-left: auto;display:flex;align-items:center;gap: var(--sp-2);
background:var(--surface-raised);border:1px solid var(--line);border-radius:var(--r-full);
padding: var(--sp-1) var(--sp-3);min-width:200px;
}
.search-box:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.search-box input{flex:1;background:none;border:none;outline:none;color:var(--ink);font-size:var(--fs-13);padding: var(--sp-1) 0}
.search-box .icon{color:var(--ink-faint)}
/* 结果计数（靠右，若与搜索框同行则由搜索框占位）*/
.filter-count{margin-left: auto;font-size:var(--fs-12);color:var(--ink-muted);white-space:nowrap}
@media(max-width:767px){
.filter-label{width:50px}
.search-box{min-width:0;flex:1}
}
/* ============================================================
栏目说明 + 详情页静态入口（2026-09-24 加）
背景：4 个图鉴栏目页的卡片网格是前端 JS 渲染的，爬虫基本不执行 JS，
看到的是一张空网格，于是 sitemap 里那 104 个静态详情页全站没有任何入站链接（孤儿页）。
所以入口必须在构建期写成真 HTML —— 就是 .gallery-index 这一块，
由 scripts/build_gallery_index.ps1 按 detail-slugs.json 生成，不要手改。
============================================================ */
/* 这两段是给搜索引擎看的栏目说明（导语 + 数据口径），版面上不显示。
2026-09-25 用户确认：列表顶部那坨文案是 SEO 用的，继续隐藏。
用 sr-only 的 clip 方案而不是 display:none —— 内容仍在 DOM 里，爬虫与读屏都能拿到。 */
.page-intro{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
/* 站内索引块：给爬虫的静态详情页入口（卡片网格是 JS 渲染，爬虫抓不到）。
默认收起，展开后是整齐的小字胶囊，不抢首屏、也不像一堆散落的文字。
2026-11-01 之前只有链接颜色、没有布局，24 个名字直接流成两行裸文本。 */
.gallery-index{max-width:1120px;margin:28px auto 0;padding:0 16px;border-top:1px solid var(--line-subtle)}
.gallery-index>summary{display:flex;align-items:center;gap:8px;padding:14px 2px;font-size:var(--fs-13);color:var(--ink-faint);cursor:pointer;list-style:none;user-select:none}
.gallery-index>summary::-webkit-details-marker{display:none}
.gallery-index>summary::before{content:'';width:6px;height:6px;margin-right:2px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-45deg);transition:transform .18s}
.gallery-index[open]>summary::before{transform:rotate(45deg)}
.gallery-index>summary:hover{color:var(--ink-muted)}
/* 两种形态：
① 有链接（角色/弧盘/载具/驱动块）→ 横排胶囊，一行多个；
② 无链接（队伍/兑换码/每日任务/攻略目录）→ 一条一行，靠行距和浅色分隔，别挤成一坨。 */
.gallery-index-list{display:block;margin:2px 0 26px;padding:0;list-style:none}
.gallery-index-list li{margin:0 0 7px;font-size:var(--fs-13);color:var(--ink-muted);line-height:1.85}
.gallery-index-list li:last-child{margin-bottom:0}
.gallery-index-list b{color:var(--ink-body);font-weight:600}
.gallery-index-list:has(a){display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.gallery-index-list:has(a) li{margin:0;line-height:normal}
.gallery-index-list a{display:block;padding:4px 11px;border-radius:999px;background:var(--surface-raised);border:1px solid var(--line-subtle);color:var(--ink-muted);font-size:var(--fs-13);line-height:1.6;text-decoration:none;transition:color .15s,border-color .15s,background .15s}
.gallery-index-list a:hover{color:var(--brand-ink);border-color:var(--brand);background:var(--brand-softer);text-decoration:none}
/* 成就页这类用 承载整段清单，也要有统一的行距 */
.gallery-index p{margin:0 0 10px;font-size:var(--fs-13);color:var(--ink-muted);line-height:1.9}
.gallery-index p:last-child{margin-bottom:0}
/* 索引块内部的小标题（队伍梯队、任务分组之类） */
.gallery-index h3{margin:14px 0 6px;font-size:var(--fs-13);font-weight:600;color:var(--ink-body)}
.gallery-index h3:first-of-type{margin-top:4px}
/* 卡片整块可点：卡片类原本挂在