/* MS Archive — 档案库风格：瑞士国际主义 / 卡片目录。1px 边框、无阴影、无渐变、单一强调色。 */
:root {
  --bg: #f7f6f3;
  --surface: #ffffff;
  --text: #1a1a1a;
  --text-mute: #6b6b6b;
  --border: #dcd9d3;
  --accent: #8b2500;
  --ok: #2d6a4f;
  --warn: #9c6b00;
  --zebra: #fafaf9;
  --wrap: 1480px;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
}
* {box-sizing: border-box;}
html {-webkit-text-size-adjust: 100%;}
body {margin: 0; background: var(--bg); color: var(--text); font-family: var(--sans); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased;}
a {color: var(--text); text-decoration: underline; text-decoration-color: var(--border); text-underline-offset: 2px;}
a:hover {color: var(--accent); text-decoration-color: var(--accent);}
h1, h2, h3 {font-size: 15px; font-weight: 600; margin: 0;}
p {margin: 0 0 0.6rem;}
/* 行内代码在 .md 之外也要像代码：条目字段格里只走行内 Markdown（容器没有 .md） */
code, pre {font-family: var(--mono);}
.mono {font-family: var(--mono); font-size: 12px;}
.dim {color: var(--text-mute);}
.ok {color: var(--ok);}
.warn {color: var(--warn);}
.lede {color: var(--text);}
/* ---------------- 头部 ---------------- */
.site-head {background: var(--surface); border-bottom: 1px solid var(--border);}
.head-row {display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 18px 32px 14px; max-width: var(--wrap); margin: 0 auto;}
.brand {display: inline-flex; align-items: center; gap: 9px; text-decoration: none;}
.brand-text {display: inline-flex; align-items: baseline; gap: 10px;}
/* 品牌图形标志（软盘剪影，几何来自 assets/brand/mark.svg） */
.brand-mark {display: block; flex: 0 0 auto;}
/* 开发版本标记：外框区分，正式部署后自动消失 */
.flag-dev {background: none; color: var(--accent); border: 1px solid var(--accent); padding: 0 6px;}
.brand:hover {color: var(--text);}
.brand-en {font-size: 17px; font-weight: 600; letter-spacing: 0.01em;}
.brand-zh {color: var(--text-mute); font-size: 13px;}
.search {display: flex; flex: 0 1 360px; border: 1px solid var(--border); background: var(--surface);}
.search input {flex: 1; border: 0; padding: 7px 10px; font-size: 13px; font-family: var(--sans); background: transparent; color: var(--text); outline: none;}
.search button {border: 0; border-left: 1px solid var(--border); background: var(--zebra); color: var(--text-mute); padding: 0 12px; cursor: pointer; font-size: 14px;}
.search:focus-within {border-color: var(--accent);}
/* 顶栏里的导航分隔线与通知条底色**不设 max-width**：线和底色要铺满整宽，内容再用 padding
   推到 --wrap 的边界上。早先这两条和正文一样用 max-width: var(--wrap) + margin: 0 auto，
   在比 --wrap（1480px）宽的屏幕上，分隔线两端各缩进一截、通知条也短一截，而 header 的白底
   与它自己的下边框却是整宽的 —— 于是顶部两边看起来像被切掉了两块。
   max(…, (100% - --wrap)/2 + …) 在窄屏（100% < --wrap 时算出负数）自动退回原来的 24px / 32px，
   宽屏则正好落在正文左边缘上。≤860px 那条媒体查询里的 20px 依旧生效。 */
.nav {display: flex; flex-wrap: wrap; gap: 4px; border-top: 1px solid var(--border); padding: 0 max(24px, calc((100% - var(--wrap)) / 2 + 24px));}
.nav a {padding: 10px 13px; text-decoration: none; font-size: 13px; color: var(--text); border-bottom: 2px solid transparent;}
.nav a:hover {color: var(--accent); border-bottom-color: var(--accent);}
.nav a[aria-current="page"] {border-bottom-color: var(--accent); color: var(--accent);}
.notice {display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--text-mute); background: var(--zebra); border-top: 1px solid var(--border); padding: 9px max(32px, calc((100% - var(--wrap)) / 2 + 32px));}
.flag {font-family: var(--mono); font-size: 11px; color: var(--accent); border: 1px solid var(--accent); padding: 1px 6px; letter-spacing: 0.04em;}
/* ---------------- 主体与页脚 ---------------- */
.site-main {max-width: var(--wrap); margin: 0 auto; padding: 28px 32px 56px; min-height: 60vh;}
.site-foot {border-top: 1px solid var(--border); background: var(--surface);}
/* 页脚两行、左对齐：第一行收录规模，第二行版权 + 合规链接同行。
   早先是整体居中的，左右两片空白比内容还显眼；左对齐后跟正文同一条左边线。
   行内链接不另设颜色：全局 a 规则给的是正文色 + 浅下划线，正好从灰色元信息里跳出来。
   （免责声明 / 交流群 / 缓存时间已从这里移走或删掉） */
.foot-meta {display: flex; flex-direction: column; align-items: flex-start; gap: 4px; max-width: var(--wrap); margin: 0 auto; padding: 22px 32px; font-family: var(--mono); font-size: 11px; color: var(--text-mute);}
/* 版权与合规链接同行、字号比上面的机器可读信息大一点：11px 的中文链接几乎读不出来，
   而合规信息恰恰要能一眼看到 */
.foot-copy {font-size: 12px;}
.page-title {font-size: 16px; font-weight: 600; margin-bottom: 6px;}
.intro {color: var(--text-mute); margin-bottom: 14px; max-width: 72ch;}
/* ---------------- 首页 ---------------- */
.home-intro {border-bottom: 1px solid var(--border); padding-bottom: 20px; margin-bottom: 32px; text-align: center;}
.hi-site {font-family: var(--mono); font-size: 12px; color: var(--text-mute); letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 4px;}
.hi-title {font-size: 16px; font-weight: 600; margin-bottom: 8px;}
.hi-decl {color: var(--text-mute); margin-bottom: 8px;}
.hi-decl strong {color: var(--text);}
.hi-stat {color: var(--text-mute); margin: 0;}
.home-block {margin-bottom: 40px;}
.hb-head {display: flex; align-items: baseline; justify-content: space-between; border-bottom: 1px solid var(--border); padding-bottom: 8px; margin-bottom: 16px;}
.hb-title {font-size: 14px;}
.hb-more {font-family: var(--mono); font-size: 12px; color: var(--text-mute);}
.card-grid {display: grid; grid-template-columns: repeat(auto-fill, minmax(184px, 1fr)); gap: 18px; align-items: start;}
.card {display: flex; flex-direction: column; text-decoration: none; border: 1px solid var(--border); background: var(--surface);}
.card:hover {border-color: var(--accent); color: var(--text);}
/* 卡片封面按图片实际比例显示（不裁切、不强制 3:4 画幅）：
   同一个 grid 里各行高度会不一样，这是「照原比例列条目」的代价，也正是想要的效果。
   max-height 只兜极端长条（例如书脊扫描），配合 contain 只是等比缩小，不裁切。 */
.card-media {position: relative; overflow: hidden; background: var(--zebra);}
.card-media .pic, .card-media .placeholder {display: block;}
.card-media .pic img {max-height: 480px; object-fit: contain;}
.card-media .placeholder {aspect-ratio: 4 / 3;}
.card-body {padding: 10px 13px 13px; border-top: 1px solid var(--border);}
.card-title {font-size: 14px; font-weight: 600; line-height: 1.35; margin-bottom: 3px;}
.card-sub {font-family: var(--mono); font-size: 11px; color: var(--text-mute); margin: 0 0 4px; line-height: 1.4;}
.card-id {font-family: var(--mono); font-size: 11px; color: #9a968e; margin: 0;}
.brand-strip {display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px;}
.brand-tile, .pack-tile {display: flex; flex-direction: column; border: 1px solid var(--border); background: var(--surface); padding: 14px 16px; text-decoration: none;}
.brand-tile:hover, .pack-tile:hover {border-color: var(--accent); color: var(--text);}
.bt-name, .pt-name {font-weight: 600; font-size: 14px;}
.bt-en, .pt-en {font-family: var(--mono); font-size: 11px; color: var(--text-mute);}
.bt-count, .pt-count {font-family: var(--mono); font-size: 11px; color: var(--accent); margin-top: 6px;}
.pack-strip {display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px;}
.timeline {display: flex; align-items: flex-end; gap: 4px; overflow-x: auto; padding-bottom: 10px; border-bottom: 1px solid var(--border);}
.tl-item {display: flex; flex-direction: column; align-items: center; text-decoration: none; min-width: 30px;}
.tl-bar {width: 100%; background: var(--border); min-height: 3px;}
.tl-item:hover .tl-bar {background: var(--accent);}
.tl-year {font-family: var(--mono); font-size: 9px; color: var(--text-mute); margin-top: 4px; transform: rotate(-45deg);}
/* ---------------- 图鉴：侧栏筛选与工具栏 ---------------- */
.catalog-head {margin-bottom: 20px;}
.catalog-body {display: flex; gap: 32px; align-items: flex-start;}
.facets {flex: 0 0 260px; background: var(--surface); border: 1px solid var(--border);}
.active-filters {border-bottom: 1px solid var(--border); padding: 13px 15px; background: var(--zebra);}
.af-head {display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 6px;}
.af-head a {font-family: var(--mono); font-size: 11px;}
.af-chip {display: inline-block; font-size: 12px; border: 1px solid var(--border); padding: 1px 7px; margin: 2px 2px 0 0; text-decoration: none; background: var(--surface);}
.af-chip:hover {border-color: var(--accent);}
.facet-group {border-bottom: 1px solid var(--border);}
.facet-group:last-child {border-bottom: 0;}
.facet-title {width: 100%; display: flex; justify-content: space-between; align-items: center; background: none; border: 0; padding: 12px 15px; font-size: 13px; font-weight: 600; color: var(--text); cursor: pointer; font-family: var(--sans); text-align: left;}
.facet-count {font-family: var(--mono); font-size: 11px; color: var(--text-mute); font-weight: 400;}
.facet-body {padding: 0 15px 14px; max-height: 320px; overflow-y: auto;}
.facet-more {margin-top: 6px;} .facet-more summary {font-size: 11px; color: var(--accent); cursor: pointer; padding: 3px 0;} .facet-more summary:hover {text-decoration: underline;}
.facet-opt {display: flex; align-items: baseline; gap: 8px; padding: 4px 0; font-size: 13px; cursor: pointer;}
.facet-opt input {margin: 0; flex: 0 0 auto; width: 15px; height: 15px;}
.fo-label {flex: 1;}
.fo-count {color: var(--text-mute); font-size: 11px;}
.catalog-main {flex: 1; min-width: 0;}
.toolbar {display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; margin-bottom: 16px;}
.tb-count {color: var(--text-mute);}
.tb-actions {display: flex; gap: 26px; flex-wrap: wrap; align-items: center;}
.tb-group {display: flex; gap: 2px;}
.tb-group + .tb-group {border-left: 1px solid var(--border); padding-left: 24px;}
.tb-link {font-family: var(--mono); font-size: 12px; color: var(--text-mute); text-decoration: none; border: 1px solid var(--border); padding: 5px 12px; background: var(--surface);}
.tb-link:hover {color: var(--accent); border-color: var(--accent);}
.tb-link.is-on {color: var(--surface); background: var(--text); border-color: var(--text);}
.empty {border: 1px dashed var(--border); padding: 30px; text-align: center; color: var(--text-mute);}
.table-wrap {overflow-x: auto; border: 1px solid var(--border); background: var(--surface);}
.item-table {width: 100%; border-collapse: collapse; font-size: 13px;}
.item-table th {position: sticky; top: 0; background: var(--surface); z-index: 1; text-align: left; font-weight: 600; font-size: 12px; padding: 11px 14px; border-bottom: 1px solid var(--border); white-space: nowrap;}
.item-table td {padding: 11px 14px; border-bottom: 1px solid var(--border); vertical-align: top;}
.item-table tbody tr:nth-child(even) {background: var(--zebra);}
.item-table tbody tr:hover {background: #f1efe9;}
.th-sort {text-decoration: none; color: var(--text);}
.th-sort:hover, .th-sort.is-on {color: var(--accent);}
.c-thumb {width: 52px;}
/* 列表缩略图也按图片实际比例：宽度固定 36px、高度自适应，竖图自然高一点、横图矮一点，
   不再统一裁成 36×48。max-height 只是防止极端长条把整行撑爆（配合 contain 也不裁切）。
   占位符仍给固定 36×48，免得没图的条目行塌成一条线。 */
.c-thumb .pic {display: block; width: 36px;}
.c-thumb .pic img {width: 36px; height: auto; max-height: 72px; object-fit: contain;}
.c-thumb .placeholder {display: block; width: 36px; height: 48px;}
.c-id {font-family: var(--mono); font-size: 11px; white-space: nowrap;}
.c-title {min-width: 160px;}
.row-title {text-decoration: none; font-weight: 600;}
.row-sub {display: block; font-family: var(--mono); font-size: 11px; color: var(--text-mute); margin-top: 2px;}
.c-version, .c-brand, .c-region, .c-media, .c-pack, .c-edtype {color: var(--text-mute);}
.c-year {font-family: var(--mono); font-size: 11px; color: var(--text-mute); white-space: nowrap;}
.c-version .dim {color: #9a968e;}
.pagination {display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 22px;}
.pg-meta {color: var(--text-mute);}
.pg-links {display: flex; gap: 5px; align-items: center; flex-wrap: wrap;}
.pg-btn, .pg-num {font-family: var(--mono); font-size: 12px; border: 1px solid var(--border); padding: 5px 11px; text-decoration: none; background: var(--surface);}
.pg-num.is-cur {background: var(--text); color: var(--surface); border-color: var(--text);}
.pg-btn.is-dis {color: var(--text-mute); border-color: transparent;}
.pg-ell {font-family: var(--mono); font-size: 12px; padding: 0 4px; color: var(--text-mute);}
.pic {display: block; position: relative;}
/* 图片默认按自身比例显示（宽度撑满容器、高度自适应），不裁切。
   需要固定画幅的上下文（卡片、列表缩略图、胶片条）各自覆写尺寸。 */
.pic img {display: block; width: 100%; height: auto;}
.wm {position: absolute; inset: 0; pointer-events: none; background-repeat: repeat;}
/* 占位符本身不定高：各上下文自己决定尺寸（卡片/列表缩略图/胶片条）
   定死 min-height 会把 36px 宽的列表缩略图撑成竖条。 */
.placeholder {position: relative; display: flex; align-items: center; justify-content: center; background: var(--zebra); border: 1px solid var(--border);}
.ph-inner {font-family: var(--mono); font-size: 11px; color: #c4c0b8; letter-spacing: 0.1em;}
/* ---------------- 条目页 ---------------- */
.breadcrumb {font-size: 11px; color: var(--text-mute); margin-bottom: 16px;}
.breadcrumb a {text-decoration: none;}
/* 前台的管理员条：只有后台已登录时才渲染（见 public/index.php 的条目路由），匿名访客的 HTML 里没有它 */
.admin-strip {display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin: 0 0 14px;
  padding: 6px 10px; border: 1px solid var(--warn); border-left-width: 3px; border-radius: 3px;
  background: #fdf8ec; font-size: 12px;}
.admin-strip .as-tag {font-family: var(--mono); font-size: 10px; letter-spacing: .06em;
  color: #fff; background: var(--warn); padding: 2px 6px; border-radius: 2px;}
.admin-strip .as-link {text-decoration: none; color: var(--warn); border-bottom: 1px solid currentColor;}
.admin-strip .as-link:hover {color: var(--accent); border-bottom-color: var(--accent);}
.item-head {border-bottom: 1px solid var(--border); padding-bottom: 16px; margin-bottom: 22px;}
.item-title {font-size: 19px; font-weight: 600;}
.item-title-en {font-family: var(--mono); font-size: 13px; color: var(--text-mute); margin: 3px 0 10px;}
.item-meta {display: flex; flex-wrap: wrap; gap: 10px; color: var(--text-mute);}
.item-meta .id {color: var(--text);}
.item-meta .sep {color: var(--border);}
/* 录入来源 = AI 识别：条目页顶部的提醒条（文案见 Repo\Source::AI_NOTICE） */
.ai-notice {border: 1px solid var(--border); background: var(--zebra); padding: 9px 12px; margin: 0 0 22px;
  font-size: 12px; color: var(--text-mute); line-height: 1.65;}
/* 「AI」小标签：前台提醒条与后台提醒共用（后台页面同样加载了本文件） */
.ai-mark {display: inline-block; font-family: var(--mono); font-size: 9px; line-height: 1.7; letter-spacing: .08em;
  color: #fff; background: var(--warn); padding: 0 4px; margin-right: 6px; vertical-align: 1px;}
/* 转录 / 备注这类容易被识别错的段落标题旁的标签，hover 出完整提醒 */
.ai-chip {display: inline-block; font-family: var(--mono); font-size: 9px; line-height: 1.6; letter-spacing: .06em;
  color: var(--warn); border: 1px solid var(--warn); padding: 0 4px; margin-left: 8px; vertical-align: 2px;
  font-weight: 400; cursor: help;}
.item-layout {display: grid; grid-template-columns: minmax(300px, 440px) minmax(0, 1fr); gap: 40px; margin-bottom: 28px; align-items: start;}
.item-facts {min-width: 0;}
/* 缩略图条整条横跨两栏。它原本待在左栏里，图片一多左栏就远高于右边的事实卡，
   而「介质明细」这种整节内容是排在 .item-layout 之后的 —— 于是条目信息与介质明细
   之间空出一大片（条目图片越多、空白越高）。横跨两栏后它自成一节，高度由自己决定。 */
.media-strip {grid-column: 1 / -1;}
.hero {margin: 0 0 12px;}
/* 详细页主图：按原图比例显示，不裁切、不强制画幅 */
.hero .pic {border: 1px solid var(--border); background: var(--surface);}
.hero .placeholder {aspect-ratio: 3 / 2;}
.hero .pic img {width: 100%; height: auto;}
.hero figcaption {font-size: 11px; color: var(--text-mute); margin-top: 8px;}
/* 可放大元素：鼠标悬停给一点提示 */
.zoomable, .g-item, .ml-photo {position: relative;}
.zoomable {display: block;}
.zoomable::after {content: "⤢ 放大"; position: absolute; right: 8px; bottom: 8px; font-family: var(--mono); font-size: 10px; background: rgba(26,26,26,.72); color: #fff; padding: 3px 7px; opacity: 0; transition: opacity .15s;}
.zoomable:hover::after {opacity: 1;}
/* 画廊：统一高度、宽度随图片比例伸缩（胶片条式），避免竖图横图互相裁切。
   条目页的缩略图条（.media-strip）与「运行截图」区块都用这一套，两处都是整栏宽。 */
.gallery {display: flex; flex-wrap: wrap; gap: 10px;}
.g-item {text-decoration: none; border: 1px solid var(--border); background: var(--surface); cursor: pointer;}
/* 画廊就是大图选择器：当前选中的那张必须一眼看出来（点一下换大图，再点一下放大） */
.g-item.is-cur {border-color: var(--accent); outline: 1px solid var(--accent); outline-offset: -3px;}
.g-item.is-cur .g-label {color: var(--accent);}
.g-item:hover .g-label {color: var(--text);}
.g-item.is-cur:hover .g-label {color: var(--accent);}
.g-item .pic, .g-item .placeholder {display: block; height: 104px; width: auto;}
.g-item .pic img {height: 104px; width: auto; max-width: 220px; object-fit: contain;}
.g-item .placeholder {width: 78px;}
.g-label {display: block; font-size: 10px; color: var(--text-mute); padding: 4px 7px; border-top: 1px solid var(--border);}
/* 「运行截图」区块：说明文字压在画廊上方，与下面缩略图贴紧一点 */
.shot-note {font-size: 12px; color: var(--text-mute); margin: 0 0 12px;}
/* 截图的说明是自由填写的一句话，常常比缩略图本身宽。不给约束的话 <a> 会被文字撑宽，
   缩略图右边就空出一块（包装图集的标签是「正面 / 背面」这种短词，所以一直没暴露）。
   width:0 + min-width:100% 让标签不参与自身宽度计算：盒子宽度由缩略图决定，文字在盒子内换行。 */
.shot-gallery .g-item {display: flex; flex-direction: column; align-items: flex-start;}
.shot-gallery .g-label {width: 0; min-width: 100%; white-space: normal;}
/* 说明长短不一，别让同一行的格子互相拉到一样高（短说明下面会留一条空白）；
   缩略图顶边靠 flex-start 对齐就够了 */
.shot-gallery {align-items: flex-start;}
.media-note {font-size: 11px; color: var(--text-mute); margin-top: 12px;}
.block-title {font-size: 14px; margin-bottom: 12px; padding-bottom: 7px; border-bottom: 1px solid var(--border);}
/* ---------------- 条目页：关键信息速览与分组事实卡 ---------------- */
.glance {margin-bottom: 26px;}
.glance-grid {display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); margin: 0;}
.glance-item {background: var(--surface); padding: 12px 16px;}
.glance-item dt {font-size: 11px; color: var(--text-mute); margin-bottom: 3px;}
.glance-item dd {margin: 0; font-size: 15px; font-weight: 600;}
.glance-item dd.mono {font-size: 14px;}
.fact-groups {display: flex; flex-direction: column; gap: 30px;}
.fg-title {font-size: 12px; font-weight: 600; color: var(--text-mute); letter-spacing: 0.08em; padding-bottom: 6px; border-bottom: 1px solid var(--border); margin-bottom: 14px;}
.fact-grid {display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px 30px; margin: 0;}
.fact {min-width: 0;}
.fact dt {font-size: 11px; color: var(--text-mute); margin-bottom: 2px;}
.fact dd {margin: 0; font-size: 14px; word-break: break-word;}
.fact dd.mono {font-size: 12.5px;}
.item-section {margin-bottom: 34px;}
.media-list {list-style: none; padding: 0; margin: 0;}
.media-list li {display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px dotted var(--border);}
.media-list li:last-child {border-bottom: 0;}
.ml-seq {color: var(--text-mute); min-width: 28px;}
.ml-name {flex: 1;}
.ml-label {color: var(--text-mute);} .ml-part {color: var(--accent);}
.ml-photo {flex: 0 0 auto; display: block; width: 52px; height: 52px; border: 1px solid var(--border); background: var(--zebra);}
.ml-thumb {width: 52px; height: 52px;}
.ml-thumb img {object-fit: contain !important;}
.ml-photo-none {display: flex; align-items: center; justify-content: center; color: #c4c0b8;}
.plain-list {list-style: none; padding: 0; margin: 0;}
.plain-list li {padding: 6px 0; border-bottom: 1px dotted var(--border);}
.plain-list li:last-child {border-bottom: 0;}
.transcript {border: 1px solid var(--border); background: var(--surface); padding: 16px 18px; font-size: 13px; line-height: 1.65;}
.compare-table, .matrix-table {width: 100%; border-collapse: collapse; font-size: 13px;}
.compare-table th, .matrix-table th, .compare-table td, .matrix-table td {padding: 10px 14px; border: 1px solid var(--border); text-align: left;}
.compare-table th, .matrix-table th {background: var(--surface); font-size: 12px;}
.compare-table tr.is-cur td, .matrix-table tr.is-cur td {background: #f4efe8;}
.item-disclaimer {border: 1px solid var(--border); background: var(--zebra); padding: 14px 18px; font-size: 12px; color: var(--text-mute); line-height: 1.65;}
.brand-list, .line-list {border: 1px solid var(--border); background: var(--surface);}
.brand-row, .line-row {display: grid; grid-template-columns: 1fr 1.4fr 140px 110px; gap: 18px; align-items: center; padding: 15px 20px; text-decoration: none; border-bottom: 1px solid var(--border);}
.brand-row:last-child, .line-row:last-child {border-bottom: 0;}
.brand-row:hover, .line-row:hover {color: var(--text); background: var(--zebra);}
.br-name, .lr-name {font-weight: 600;}
.br-en, .lr-en {font-family: var(--mono); font-size: 12px; color: var(--text-mute);}
.br-span, .br-count, .lr-more {font-family: var(--mono); font-size: 11px; color: var(--text-mute); text-align: right;}
.lr-brand {color: var(--text-mute);}
.line-row {grid-template-columns: 1fr 1.2fr 160px 30px;}
.year-list {border: 1px solid var(--border); background: var(--surface);}
.year-row {display: grid; grid-template-columns: 80px 1fr 90px; gap: 18px; align-items: center; padding: 12px 20px; text-decoration: none; border-bottom: 1px solid var(--border);}
.year-row:last-child {border-bottom: 0;}
.year-row:hover {color: var(--text); background: var(--zebra);}
.yr-year {font-weight: 600;}
.yr-bar {height: 8px; background: var(--zebra); border: 1px solid var(--border);}
.yr-bar span {display: block; height: 100%; background: var(--border);}
.year-row:hover .yr-bar span {background: var(--accent);}
.yr-count {text-align: right; color: var(--text-mute);}
.pack-grid {display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px;}
.pack-card {display: flex; flex-direction: column; gap: 4px; border: 1px solid var(--border); background: var(--surface); padding: 16px 18px; text-decoration: none;}
.pack-card:hover {border-color: var(--accent); color: var(--text);}
.pc-name {font-weight: 600;}
.pc-en {font-family: var(--mono); font-size: 11px; color: var(--text-mute);}
.pc-note {font-size: 12px; color: var(--text-mute);}
.pc-count {font-family: var(--mono); font-size: 11px; color: var(--accent); margin-top: 4px;}
/* ---------------- 系列版本矩阵 ---------------- */
.series-head {margin-bottom: 14px;}
.m-chip {display: inline-block; font-family: var(--mono); font-size: 11px; border: 1px solid var(--border); padding: 1px 6px; margin: 1px; text-decoration: none; background: var(--surface);}
.m-chip:hover {border-color: var(--accent); color: var(--accent);}
.m-cell {min-width: 90px; vertical-align: top;}
.m-label {font-weight: 600;}
/* ---------------- 关于 / 免责声明等散文页 ---------------- */
.prose-page {max-width: 74ch;}
.prose-meta {margin-top: 26px; padding-top: 10px; border-top: 1px solid var(--border);}
/* ---------------- Markdown 正文（Support\Markdown 的输出，容器加 .md） ----------------
   这里只描述「Markdown 渲染出来的东西长什么样」：标题、段落、列表、引用、代码、表格、
   水平线、图片。容器自带 .md 才生效 —— 后台那些手写的 .plain-list（内容物清单、系统要求）
   是另一套东西，不受影响。 */
.md > :first-child {margin-top: 0;}
.md > :last-child {margin-bottom: 0;}
.md h1, .md h2 {font-size: 14px; font-weight: 600; margin: 22px 0 8px; padding-bottom: 4px; border-bottom: 1px solid var(--border);}
.md h3, .md h4, .md h5, .md h6 {font-size: 13px; font-weight: 600; margin: 16px 0 6px;}
.md p {margin: 0 0 10px;}
.md ul, .md ol {margin: 0 0 10px; padding-left: 24px;}
.md li {margin: 3px 0;}
.md li > ul, .md li > ol {margin: 4px 0 2px;}
.md blockquote {margin: 0 0 12px; padding: 2px 0 2px 14px; border-left: 2px solid var(--border); color: var(--text-mute);}
.md blockquote > :last-child {margin-bottom: 0;}
.md code {font-family: var(--mono); font-size: 12px; background: var(--zebra); border: 1px solid var(--border); padding: 0 4px;}
.md pre {margin: 0 0 12px; padding: 12px 14px; background: var(--zebra); border: 1px solid var(--border); overflow: auto;}
.md pre code {display: block; background: none; border: 0; padding: 0; font-size: 12px; line-height: 1.55; white-space: pre;}
.md hr {margin: 20px 0; border: 0; border-top: 1px solid var(--border);}
.md-table-wrap {margin: 0 0 12px; overflow-x: auto;}
.md table {width: 100%; border-collapse: collapse; font-size: 13px; margin: 0;}
.md th, .md td {padding: 8px 12px; border: 1px solid var(--border); text-align: left; vertical-align: top;}
.md th {background: var(--surface); font-size: 12px; font-weight: 600;}
.md .md-center {text-align: center;}
.md .md-right {text-align: right;}
.md img {max-width: 100%; height: auto; border: 1px solid var(--border);}
.md del {color: var(--text-mute);}
.md input[type="checkbox"] {margin: 0 6px 0 0; vertical-align: baseline;}
.md li.md-task {list-style: none;}
.md a {word-break: break-word;}
/* 首页顶部那条声明：Markdown 渲染后仍是「一行状态条」，所以段落不带外边距 */
.notice-md {min-width: 0;}
.notice-md p {margin: 0;}
.notice-md img {height: 14px; width: auto; border: 0; vertical-align: -2px;}
.kv-list {list-style: none; padding: 0; margin: 8px 0; display: flex; flex-wrap: wrap; gap: 4px 18px;}
.kv-list .k {color: var(--text-mute); font-size: 12px; margin-right: 6px;}
.chip-row {display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px;}
.chip {font-size: 12px; border: 1px solid var(--border); padding: 2px 9px; text-decoration: none; background: var(--surface);}
.chip:hover {border-color: var(--accent);}
/* ---------------- 错误页 ---------------- */
.error-page {border: 1px solid var(--border); background: var(--surface); padding: 30px;}
.err-code {font-size: 40px; color: var(--border); margin: 0 0 4px;}
.err-detail {white-space: pre-wrap; background: var(--zebra); border: 1px solid var(--border); padding: 10px; font-size: 11px; overflow: auto;}
/* ---------------- 键盘焦点与灯箱 ---------------- */
.item-table tbody tr.is-focus {background: #efe8dd !important;}
/* ---------------- 图片查看器：缩放 / 拖动看局部 ---------------- */
/* 背景用实色：半透明会让底下页面透出来，干扰看片 */
.viewer {position: fixed; inset: 0; z-index: 120; display: none; flex-direction: column; background: #141210;}
.viewer.is-open {display: flex;}
html.vw-locked {overflow: hidden;}
.vw-bar {flex: 0 0 auto; display: flex; align-items: center; gap: 14px; padding: 8px 14px; border-bottom: 1px solid #3a3733; color: #d8d3ca; font-size: 12px;}
.vw-count {flex: 0 0 auto; color: #8f8a82;}
.vw-caption {flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.vw-tools {flex: 0 0 auto; display: flex; align-items: center; gap: 6px;}
.vw-btn {width: 32px; height: 30px; padding: 0; border: 1px solid #4a4640; background: none; color: #e6e1d8; font-size: 15px; line-height: 1; cursor: pointer;}
.vw-btn:hover {border-color: var(--accent); color: #fff;}
.vw-zoom {min-width: 54px; text-align: center; color: #a9a49b;}
.vw-close {font-size: 19px; margin-left: 6px;}
.vw-stage {flex: 1 1 auto; position: relative; overflow: hidden; cursor: grab; touch-action: none;}
.vw-stage.is-panning {cursor: grabbing;}
.vw-wrap {position: absolute; top: 0; left: 0; transform-origin: 0 0; will-change: transform;}
.vw-wrap img {display: block; width: 100%; height: 100%; user-select: none; -webkit-user-drag: none;}
.vw-hint {flex: 0 0 auto; margin: 0; padding: 7px 14px; border-top: 1px solid #3a3733; color: #8f8a82; font-size: 11px;}
@media (max-width: 640px) {.vw-caption {display: none;} .vw-hint {display: none;}}/* 桌面端：字号略放大，阅读更舒展 */
@media (min-width: 1080px) {
  body {font-size: 15px; line-height: 1.62;}
  .pg-meta, .tb-count {font-size: 13px;}
}
/* 超宽屏才展开全部 10 列，并把容器同步加宽，保证每列都有余量 */
@media (min-width: 1560px) {
  :root {--wrap: 1660px;}
}
/* 列表视图按宽度逐步收起次要列，避免挤成一团（其余仍在网格视图与条目页） */
@media (max-width: 1559px) {
  .c-media, .c-edtype {display: none;}
}
@media (max-width: 1179px) {
  .c-pack {display: none;}
}
/* 条目页在中小桌面先上下堆叠，让事实卡拿到整行宽度 */
@media (max-width: 1024px) {
  .item-layout {grid-template-columns: 1fr; gap: 28px;}
}
@media (max-width: 860px) {
  .catalog-body {flex-direction: column;}
  .facets {flex: none; width: 100%;}
  .admin-cols {grid-template-columns: 1fr;}
  .head-row {flex-direction: column; align-items: stretch; padding: 16px 20px 12px; gap: 14px;}
  .site-main {padding: 20px 20px 40px;}
  .nav, .notice, .foot-meta {padding-left: 20px; padding-right: 20px;}
  .search {flex: none;}
  .brand-row, .line-row {grid-template-columns: 1fr 1fr;}
  .br-span, .br-count, .lr-brand, .lr-more {text-align: left;}
  .glance-grid {grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));}
}
@media (prefers-reduced-motion: reduce) {
  * {scroll-behavior: auto !important;}
}

/* 测试版标记（is_beta）：描边样式，不与「开发版本」标记混淆 */
.badge-beta {display: inline-block; vertical-align: middle; margin-left: 8px; font-family: var(--mono); font-size: 10px; line-height: 1.6; color: var(--accent); border: 1px solid var(--accent); padding: 0 5px; font-weight: 400;}
.badge-beta-sm {margin-left: 6px; font-size: 9px; padding: 0 4px;}


/* ---------------- 捐赠页 ---------------- */
.donate-pledge {border: 1px solid var(--accent); background: var(--surface); padding: 10px 14px; margin: 0 0 20px; font-size: 13px; line-height: 1.7; max-width: 74ch;}
.donate-pledge strong {color: var(--accent);}
.donate-page {max-width: none;}
.donate-page .donate-pledge, .donate-page .prose-body, .donate-page .donate-fine, .donate-page .prose-meta {max-width: 74ch;}
.donate-ways {margin-top: 28px; max-width: 780px;}
.donate-ways h2 {font-size: 14px; margin: 0 0 12px; padding-bottom: 4px; border-bottom: 1px solid var(--border);}
.donate-grid {display: flex; flex-wrap: wrap; gap: 14px; align-items: stretch;}
.donate-card {margin: 0; border: 1px solid var(--border); background: var(--surface); padding: 12px; text-align: center; flex: 1 1 180px; max-width: 230px;}
.donate-card img {display: block; width: 100%; max-width: 190px; height: auto; margin: 0 auto 8px; background: #fff; padding: 4px; border: 1px solid var(--border);}
.donate-card figcaption {font-size: 13px;}
.donate-paypal {display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 10px;}
/* PayPal 图形标志：和两张二维码一样放进白底方框里，三张卡片的视觉锚点高度对齐
   （选择器比 .donate-card img 多一层类，否则 width/height/padding 会被那条通用规则压回去） */
.donate-card .dp-logo {display: block; width: 112px; height: 112px; margin: 0 auto; padding: 18px; background: #fff; border: 1px solid var(--border);}
.dp-ico {margin: 0; font-family: var(--mono); font-size: 11px; color: var(--text-mute);}
.donate-paypal a {display: inline-block; border: 1px solid var(--text); padding: 7px 14px; text-decoration: none; font-size: 13px; color: var(--text); word-break: break-all;}
.donate-paypal a:hover {border-color: var(--accent); color: var(--accent);}
.donate-fine {margin: 14px 0 0; font-size: 12px; line-height: 1.7; color: var(--text-mute); max-width: 74ch;}

/* ---------------- 联系 · 交流群 ---------------- */
/* 群号只给文本 + 复制按钮：QQ 群没有免分享 key 的加群链接，宁可不给链接也不给假链接 */
/* 入口在首页简介与「关于」页（页脚那份已按需求删掉，故不再有 .foot-contact / .foot-meta .cc-num-sm） */
.contact-line {display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px;}
.cc-num-sm {font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; color: var(--text);}
.cc-copy {font-family: var(--mono); font-size: 11px; line-height: 1.6; color: var(--text-mute); background: var(--surface); border: 1px solid var(--border); padding: 0 6px; cursor: pointer;}
.cc-copy:hover {border-color: var(--accent); color: var(--accent);}
.cc-copy.is-done {border-color: var(--ok); color: var(--ok);}
.cc-copy-sm {padding: 0 5px;}
/* 交流群卡片：贴在正文流里、按内容收紧（早先是整行宽的大白框，显得空且群号字号过大） */
.contact-card {margin-top: 26px; padding: 12px 14px; border: 1px solid var(--border); background: var(--surface); display: inline-block; max-width: 100%;}
.contact-card h2 {font-size: 13px; margin: 0 0 8px; padding-bottom: 4px; border-bottom: 1px solid var(--border);}
.cc-row {display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0;}
.contact-card .cc-num {font-family: var(--mono); font-size: 14px; letter-spacing: 0.04em; color: var(--text);}
.contact-card .cc-copy {font-size: 12px; padding: 1px 8px;}
.hi-contact {margin: 10px 0 0; font-size: 12px; color: var(--text-mute);}

/* ---------------- 条目页：访客纠错 / 补充 ---------------- */
/* 字段名旁的入口。一个条目页有三十几个字段，每个都挂一个链接 —— 常亮的话整页会变成
   一片链接，所以默认淡、悬停/键盘焦点时才显形；打印时隐藏（纸面上没法点）。 */
.fx-fix {margin-left: 6px; font-size: 11px; font-weight: 400; color: var(--text-mute); opacity: 0.6;
  text-decoration: none; border-bottom: 1px dotted currentColor; white-space: nowrap;}
.fx-fix:hover, .fx-fix:focus-visible {opacity: 1; color: var(--accent); border-bottom-color: var(--accent);}
/* 区块标题里的入口靠右，别把标题挤乱 */
.block-title .fx-fix {float: right; margin-left: 10px;}
/* 「照片……告诉我们」是句子里的一环，不要浮起来 */
.media-note .fx-fix {float: none; margin: 0;}

/* 弹窗本体（原生 <dialog>）：默认 display:none，点字段旁的「纠错」才 showModal()。
   居中、限宽、内容超高时内部滚动；手机上留出安全边距。 */
.fr-modal {border: 1px solid var(--border); background: var(--surface); color: var(--text); padding: 18px 20px;
  width: min(680px, 92vw); max-height: 86vh; overflow: auto; scroll-margin-top: 12px;}
.fr-modal::backdrop {background: rgba(26, 26, 26, 0.42);}
/* 无 JS 时：链接 href="#field-report" 命中 :target，表单在页面原位置展开（老访客、爬虫都还能用）。
   dialog 的 UA 样式是绝对定位的浮层，这里显式退回文档流，免得它压在相关内容上。 */
.fr-modal:target {position: static; display: block; width: auto; max-width: none; margin: 20px 0 0;}
/* 有 JS 时（main.js 给 body 加了 .fr-js）关掉上面那套退化样式，只认 showModal()/close()。
   为什么必须关：Chromium 在 history.replaceState() 抹掉 #field-report 之后**不会**重算 :target，
   于是弹窗关掉了、表单却仍以 :target 样式摊在页面底部（实测踩到）。限 closed 状态：
   回执页（URL 里还带 #field-report）自动 showModal() 打开时，不能把打开的弹窗又藏起来。 */
body.fr-js .fr-modal:target:not([open]) {display: none;}
/* 关闭类按钮只在有 JS 时有意义：无 JS 时表单是就地展开的一块（没有"关掉"这回事），
   留着 ✕ / 取消 只会是点不动的死按钮 */
.fr-close, .fr-cancel {display: none;}
body.fr-js .fr-close {display: inline-block;}
body.fr-js .fr-cancel {display: inline-block;}
.fr-head {display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px;
  padding-bottom: 8px; border-bottom: 1px solid var(--border);}
.fr-title {font-size: 14px; display: flex; align-items: baseline; gap: 8px;}
.fr-sub {font-weight: 400;}
.fr-close {border: 0; background: none; color: var(--text-mute); font-size: 15px; line-height: 1;
  padding: 2px 4px; cursor: pointer; font-family: var(--sans);}
.fr-close:hover {color: var(--accent);}
/* 弹窗打开时锁住背景滚动（main.js 加/去这个类） */
body.fr-lock {overflow: hidden;}
.fr-flash {font-size: 13px; padding: 9px 12px; border: 1px solid var(--border); margin-bottom: 14px;}
.fr-flash-ok {color: var(--ok); border-color: #b6cbb0; background: #f2f6ee;}
.fr-flash-err {color: var(--accent); border-color: #d9b8a8; background: #fbf1ea;}
.fr-form {display: flex; flex-direction: column; gap: 12px;}
.fr-grid {display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px;}
.fr-f {display: flex; flex-direction: column; gap: 4px; min-width: 0;}
.fr-l {font-size: 11px; color: var(--text-mute);}
.fr-f input, .fr-f select, .fr-f textarea {border: 1px solid var(--border); background: var(--bg); color: var(--text);
  font-family: var(--sans); font-size: 13px; padding: 7px 9px; width: 100%;}
.fr-f textarea {resize: vertical; line-height: 1.6;}
.fr-f input:focus, .fr-f select:focus, .fr-f textarea:focus {outline: none; border-color: var(--accent); background: var(--surface);}
/* honeypot：屏幕外 + 不可聚焦，正常访客根本碰不到 */
.fr-hp {position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden;}
.fr-actions {display: flex; align-items: center; gap: 12px; flex-wrap: wrap;}
.fr-submit {border: 1px solid var(--accent); background: var(--accent); color: #fff; font-family: var(--sans);
  font-size: 13px; padding: 8px 16px; cursor: pointer;}
.fr-submit:hover {filter: brightness(1.1);}
.fr-cancel {border: 1px solid var(--border); background: var(--surface); color: var(--text); font-family: var(--sans);
  font-size: 13px; padding: 8px 14px; cursor: pointer;}
.fr-cancel:hover {border-color: var(--accent); color: var(--accent);}
@media print {.fx-fix, .fr-modal {display: none;}}