/* ============================================================
   正协导航 style.css —— 红 / 金 / 白配色（清爽克制）  v4.1
   响应式 Grid：手机 2 列 / 平板 3 列 / 桌面 4 列
   容器最大宽度 1200px 居中，桌面不铺满
   ------------------------------------------------------------
   v4 变更：
   - 分类板块三段式（左 logo=全部 + 中滑道 + 右本地收藏）
   - 筛选板块1行三段式（当前筛选 + 滑道 + 清除筛选）
   - Hero 主引擎按钮原位 + 下方引擎滑道
   - 通用 .track 滑道，统一 is-scrollable 高亮/滚轮接管行为
   v4.1 修订：
   - 卡片排序按 type 分组（grid-break 换行，不同类型不同行）
   - type1 = 4行3列；type2/3 = 5行2列（收藏按钮进 grid，名称行右端）
   - 卡片收藏按钮改 SVG 星形；logo 未激活淡红底；本地收藏方形金色
   ============================================================ */

:root {
  /* 主色 */
  --red: #9E1B22;          /* 主品牌红（深酒红） */
  --red-deep: #7A1418;     /* 深红：悬停/渐变 */
  --red-soft: #C25B61;     /* 淡红：logo 未激活底色 */
  --red-soft-deep: #A33A40;/* 淡红渐变深端 */
  --gold: #C5A572;         /* 古典金：描边/分隔 */
  --gold-bright: #D4AF37;  /* 亮金：高亮 */
  --gold-deep: #B08D3E;    /* 深金：星形描边 */
  --focus-ring: #B08D3E;   /* 焦点环（亮色对比度 ~4.6:1 达标） */
  --ad-label: #64748b;     /* 广告标签色 */
  --bg: #FFFFFF;           /* 主背景（大面积白） */
  --bg-warm: #FAF6F0;      /* 暖白：卡片底/分区 */
  --text: #1A1A1A;         /* 主文字 */
  --text-sub: #5C5C5C;     /* 次要文字 */
  --radius: 8px;
  --shadow: 0 1px 3px rgba(26, 26, 26, .06);
  --shadow-hover: 0 8px 20px rgba(158, 27, 34, .12);
  --serif: "Noto Serif SC", "Songti SC", "SimSun", serif;
  --sans: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
}

/* ═══ 暗色模式 · 朱玺政务（暖炭底 + 朱砂 + 香槟金；护眼 / 偏好导向） ═══
   设计原则：亮色首访已完成“可信”品牌暗示，暗色只服务切换动机——
   深夜护眼（暖炭非死黑，不刺眼）+ 暗色偏好人群（舒适 / 高黏）。
   朱砂替代发灰酒红，香槟金替代亮金，去掉“阴森”观感。                       */
[data-theme="dark"] {
  --red: #E2604E;          /* 朱砂：干净提亮，暗底醒目且不血感 */
  --red-deep: #C0392B;     /* 朱红：悬停 / 渐变深端 */
  --red-soft: #3A2024;     /* 暗底 logo 未激活：暖酒红（去灰） */
  --red-soft-deep: #2A171A;
  --gold: #C9A86A;         /* 古典金：描边 / 分隔 */
  --gold-bright: #D9B978;  /* 香槟金：高亮（柔于亮金，夜间不刺眼） */
  --gold-deep: #A07E3C;    /* 深金：星形描边 */
  --focus-ring: #D9B978;   /* 焦点环（暗色香槟金，AA 可见） */
  --ad-label: #8A93A3;     /* 广告标签色（暗底提亮） */
  --bg: #1E1B1F;           /* 暖炭：非死黑，护眼不空洞 */
  --bg-warm: #2A252A;      /* 暖炭灰：卡片 / 分区 */
  --text: #ECE6DF;         /* 象牙白（暖调） */
  --text-sub: #A89E95;     /* 暖灰次要文字 */
  --shadow: 0 1px 3px rgba(0, 0, 0, .4);
  --shadow-hover: 0 8px 22px rgba(0, 0, 0, .45);
  --serif: "Noto Serif SC", "Songti SC", "SimSun", serif;
  --sans: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
}

/* 暗色模式：sticky 背景（性能：与亮色同样改不透明，去掉毛玻璃每帧模糊重算） */
[data-theme="dark"] .sticky-top {
  background: var(--bg);
}
/* B9 暗色描边柔和化：暗底下金描边改用半透明金，避免过亮刺眼 */
[data-theme="dark"] .card { border-color: rgba(197, 165, 114, .35); }
[data-theme="dark"] .card.is-scrollable,
[data-theme="dark"] .card__title.is-scrollable,
[data-theme="dark"] .card__desc.is-scrollable,
[data-theme="dark"] .card__tags.is-scrollable,
[data-theme="dark"] .card__links.is-scrollable {
  box-shadow: inset 0 0 0 1px rgba(197, 165, 114, .35);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  /* ⚠ scroll-behavior:smooth 已移除（2026-08-30 22:3x，真根因）：
     它与 JS window.scrollTo({behavior:'smooth'}) 冲突，导致 scrollTo 完全失效
     （实测：CSS smooth 下 scrollTo(0,800) 后 scrollY=0；auto 后 scrollY=1600）。
     滚动平滑由 JS safeScrollTo 统一接管（滚动按钮/随机漫步均经它）。 */
  /* ── 跨浏览器字体一致性（三道防线） ──
     1) 显式 16px 基准：浏览器默认字号可被用户设置改写，显式声明固定基数；
     2) text-size-adjust:100%：禁止浏览器（尤其移动端）"自动膨胀"文字，
        否则同一页面在不同浏览器字号不一致；
     3) 兜底 sans 字体进 font-family 栈，避免个别浏览器无衬线回退异常。 */
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* 渐进增强：禁用 JS 时也不受 hidden 残留影响 */
[hidden] { display: none !important; }

a { color: var(--red); }
button { font-family: inherit; cursor: pointer; }
/* 表单控件默认不继承字体（各浏览器 UA 内置样式不同）→ 显式继承，统一渲染 */
input, textarea, select { font-family: inherit; }

/* 可访问性：键盘焦点清晰可见 */
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* 页面容器：桌面最大宽度 1200px 居中 */
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 16px; }

/* ═══════════════════════════════════════════════════════
   通用滑道 .track —— 统一滑动行为
   所有可滑动容器（分类滑道/筛选滑道/引擎滑道 + 卡片四类行）
   共用 is-scrollable 高亮态；只在真溢出时 JS 标记。
   ═══════════════════════════════════════════════════════ */
.track,
.card__title, .card__desc, .card__tags, .card__links, .card__sources {
  overflow-x: auto;
  scrollbar-width: none;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}
.track::-webkit-scrollbar,
.card__title::-webkit-scrollbar, .card__desc::-webkit-scrollbar,
.card__tags::-webkit-scrollbar, .card__links::-webkit-scrollbar { display: none; }

/* 内容真溢出时（JS 标 is-scrollable）：悬停/触摸金色高亮提示可左右滚 */
.track.is-scrollable,
.card__title.is-scrollable, .card__desc.is-scrollable,
.card__tags.is-scrollable, .card__links.is-scrollable { cursor: grab; }
.track.is-scrollable:active,
.card__title.is-scrollable:active, .card__desc.is-scrollable:active,
.card__tags.is-scrollable:active, .card__links.is-scrollable:active { cursor: grabbing; }
.track.is-scrollable:hover,
.card__title.is-scrollable:hover, .card__desc.is-scrollable:hover,
.card__tags.is-scrollable:hover, .card__links.is-scrollable:hover,
.track.is-scrollable.is-touch-active,
.card__title.is-scrollable.is-touch-active, .card__desc.is-scrollable.is-touch-active,
.card__tags.is-scrollable.is-touch-active, .card__links.is-scrollable.is-touch-active {
  background: linear-gradient(180deg, rgba(197, 165, 114, .10), rgba(197, 165, 114, .20));
  box-shadow: inset 0 0 0 1px var(--gold);
  border-radius: 6px;
}

/* ═══════════ 第1行块：Hero ═══════════ */
.hero {
  background: linear-gradient(180deg, var(--bg-warm) 0%, var(--bg) 100%);
  text-align: center;
  padding: 56px 16px 44px;
  border-bottom: 1px solid var(--gold);
}
.hero__logo {
  font-family: var(--serif);
  font-weight: 900;
  font-size: clamp(42px, 7vw, 76px);
  letter-spacing: .06em;
  background: linear-gradient(135deg, var(--red) 0%, var(--red-deep) 60%, var(--gold) 125%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* B6：background-clip:text 兼容回退——不支持的浏览器直接显示纯红，避免标题不可见 */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .hero__logo { color: var(--red); background: none; -webkit-text-fill-color: currentColor; }
}
.hero__slogan {
  margin-top: 10px;
  font-family: var(--serif);
  font-size: clamp(15px, 2.2vw, 21px);
  color: var(--red);
  letter-spacing: .18em;
}
.hero__search { max-width: 660px; margin: 30px auto 0; }
/* directory 频道页专题介绍块（替换 hero 搜索框） */
.channel-intro {
  max-width: 760px;
  margin: 28px auto 0;
  text-align: left;
  background: var(--bg);
  border: 1px solid var(--gold);
  border-radius: 16px;
  padding: 22px 26px;
  box-shadow: 0 4px 14px rgba(158, 27, 34, .08);
}
.channel-intro__desc {
  margin: 0;
  font-size: clamp(15px, 2vw, 18px);
  line-height: 1.8;
  color: var(--text);
}
[data-theme="dark"] .channel-intro { box-shadow: 0 4px 14px rgba(0, 0, 0, .3); }
/* 主引擎按钮（原位：搜索框上方，胶囊分组） */
.hero__engines {
  display: inline-flex; gap: 4px;
  background: var(--bg);
  border: 1px solid var(--gold);
  border-bottom: none;
  border-radius: 999px 999px 0 0;
  padding: 4px 6px;
}
.hero__engines button {
  border: none; background: transparent;
  color: var(--text-sub);
  padding: 6px 18px; border-radius: 999px;
  font-size: 14px; white-space: nowrap;
  transition: background-color .15s ease, color .15s ease;
}
.hero__engines button.active { background: var(--red); color: #fff; }
.hero__searchrow {
  display: flex;
  background: var(--bg);
  border: 1px solid var(--gold);
  border-radius: 999px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(158, 27, 34, .08);
}
.hero__searchrow input {
  flex: 1; min-width: 0;
  border: none; outline: none;
  padding: 13px 22px; font-size: 15px;
  background: transparent; color: var(--text);
}
.hero__searchrow button {
  border: none;
  background: linear-gradient(135deg, var(--red), var(--red-deep));
  color: #fff;
  padding: 0 28px; font-size: 15px; letter-spacing: .1em;
}
.hero__searchrow button:hover { background: var(--red-deep); }
/* 引擎滑道（搜索框下方，扩展多类引擎） */
.hero__engines-track {
  display: flex; gap: 6px;
  margin-top: 8px; padding: 4px 2px;
  justify-content: flex-start;
}
.hero__engines-track button {
  flex: none;
  border: 1px solid var(--gold); background: var(--bg);
  color: var(--text-sub);
  padding: 5px 14px; border-radius: 999px;
  font-size: 13px; white-space: nowrap;
  transition: color .15s ease, background-color .15s ease, border-color .15s ease;
}
.hero__engines-track button:hover { color: var(--red); border-color: var(--gold-bright); }
.hero__engines-track button.active { background: var(--red); color: #fff; border-color: var(--red); }

/* ═══════════ 第2/7行块：广告位 ═══════════ */
/* ═══════════ 第2/7行块：Google 广告位 ═══════════
   布局原则（重要，勿改）：
   - 左右【零】margin / 零 padding，撑满可用宽度 → 给 Google 全宽响应式广告
     最大选择空间（小屏 = 整个视口宽）；
   - 上限 1400px 居中（Google 响应式展示广告单元最大宽 1200px，上限留余量无副作用）；
   - 只保留上下间距（1.5rem，宽松可调）与「广告」小字标签（AdSense 合规要求）；
   - 不加白底/圆角/阴影/边框等包裹样式——任何额外水平占位都会压缩广告可选宽度。 */
.ad { max-width: 1400px; margin: 1.5rem auto; border-top: 1px solid var(--gold); border-bottom: 1px solid var(--gold); padding: 10px 0; }  /* B10 广告区与内容明确区隔 */
.ad__label {
  margin: 0 0 4px;
  font-size: 11px; line-height: 1;
  color: var(--ad-label);
  text-align: right;
  display: inline-block;
  border: 1px solid currentColor;   /* B10 小徽章样式，与内容明确区分 */
  padding: 1px 6px; border-radius: 3px;
  opacity: .9;
}
.ad > ins { display: block; width: 100%; min-height: 100px; }  /* B4 预留空间，防广告加载前跳版(CLS) */

/* ═══════════ 第3-5行块：置顶区（分类 + 站内搜索 + 筛选，整体 sticky 吸顶） ═══════════ */
.sticky-top {
  position: sticky; top: 0; z-index: 100;
  /* 性能（2026-08-31）：去掉 backdrop-filter: blur(6px)，改不透明 var(--bg)。
     原因：sticky + 毛玻璃会让浏览器在滚动的每一帧对整页内容做全宽模糊重算，
     移动端（尤其小米自带浏览器）GPU 退化到软件渲染时直接掉帧。
     --bg 随主题切换（亮色 #FFFFFF / 暗色 #1E1B1F），故暗色无需单独覆盖。 */
  background: var(--bg);
  border-bottom: 1px solid var(--gold);
  box-shadow: 0 2px 8px rgba(158, 27, 34, .05);
}

/* ── 分类导航：三段式（左 logo + 中滑道 + 右本地收藏） ── */
.category-nav__inner {
  display: flex; align-items: center; gap: 10px;
  padding-top: 8px; padding-bottom: 8px;
}
/* 左：方形文字 logo（button + category-btn），承担「全部」功能。
   ⚠ 本块必须放在 .category-btn / .category-btn.active 之后：
   logo 同时带两个类，同优先级下后出现的规则才不会被
   .category-btn 的 border-radius:999px 和 background:transparent 覆盖
   （v4.1 曾因此显示成圆形 + 白底）。 */
/* 中：分类按钮滑道 */
.category-nav__list {
  flex: 1; min-width: 0;
  list-style: none;
  display: flex; gap: 6px;
  padding: 2px;
}
.category-nav__list li { flex: none; }
/* h2 直接给到分类按钮名称（承担页面标题层级），样式归零成按钮 */
.category-nav__list h2 {
  margin: 0;
  font-size: inherit; font-weight: inherit;
  font-family: inherit; line-height: inherit;
}
.category-btn {
  border: 1px solid transparent; background: transparent;
  color: var(--text-sub);
  font-size: 14px; padding: 7px 15px;
  border-radius: 999px; white-space: nowrap;
  transition: color .18s ease, background-color .18s ease, border-color .18s ease;
}
.category-btn:hover { color: var(--red); border-color: var(--gold); background: var(--bg-warm); }
.category-btn.active {
  background: linear-gradient(135deg, var(--red), var(--red-deep));
  color: #fff; border-color: var(--red);
  box-shadow: 0 2px 8px rgba(158, 27, 34, .25);
}

/* 左：方形文字 logo（在 .category-btn 之后声明，确保覆盖）。
   未激活底色为淡化红渐变；激活（=全部选中）正红渐变 + 金色描边环。 */
.category-nav__logo {
  flex: none;
  width: 44px; height: 44px; border-radius: 8px;
  background: linear-gradient(135deg, var(--red-soft), var(--red-soft-deep));
  color: #fff; border: none; padding: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  font-family: var(--serif); font-size: inherit;
  box-shadow: 0 2px 6px rgba(158, 27, 34, .22);
  transition: box-shadow .15s ease;
}
/* logo 双文字（v4.3）：激活=品牌名「正协/导航」；未激活（已选某分类）=「全部」，
   引导用户点它返回全部分类。纯 CSS 切换，JS 只管已有的 active 类。 */
.category-nav__logo .logo__brand { display: flex; flex-direction: column; align-items: center; }
.category-nav__logo .logo__brand span { line-height: 1.15; display: block; }
.category-nav__logo .logo__brand span:first-child { font-size: 15px; letter-spacing: .12em; }
.category-nav__logo .logo__brand span:last-child  { font-size: 13px; letter-spacing: .2em; opacity: .92; }
.category-nav__logo .logo__all {
  display: none;
  font-size: 15px; letter-spacing: .3em; padding-left: .3em; /* 补偿末字符间距，保持视觉居中 */
  line-height: 1;
}
.category-nav__logo:not(.active) .logo__brand { display: none; }
.category-nav__logo:not(.active) .logo__all { display: block; }
.category-nav__logo.active {
  background: linear-gradient(135deg, var(--red), var(--red-deep));
  color: #fff;
  box-shadow: 0 2px 8px rgba(158, 27, 34, .35), 0 0 0 2px var(--gold-bright);
}
.category-nav__logo:hover { box-shadow: 0 2px 8px rgba(158, 27, 34, .45), 0 0 0 2px var(--gold); }

/* 右：本地收藏按钮（v4.1：与 logo 同尺寸正方形，金色系。
   未点击显示 ★ 图标；点击（激活）显示「本地/收藏」两行文字。） */
.category-nav__fav {
  flex: none;
  width: 44px; height: 44px; border-radius: 8px;
  border: none;
  background: linear-gradient(135deg, var(--gold-bright), var(--gold));
  color: var(--red-deep);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif);
  box-shadow: 0 2px 6px rgba(197, 165, 114, .35);
  transition: box-shadow .15s ease;
}
.category-nav__fav-star { font-size: 20px; line-height: 1; }
.category-nav__fav-text { display: none; flex-direction: column; align-items: center; }
.category-nav__fav-text span { line-height: 1.15; display: block; }
.category-nav__fav-text span:first-child { font-size: 13px; letter-spacing: .12em; }
.category-nav__fav-text span:last-child  { font-size: 12px; letter-spacing: .2em; }
.category-nav__fav:hover { box-shadow: 0 2px 8px rgba(197, 165, 114, .5), 0 0 0 2px var(--gold-bright); }
/* 激活态：显示文字 + 金色描边环（与 logo 激活态呼应） */
.category-nav__fav.active {
  background: linear-gradient(135deg, var(--gold-bright), var(--gold));
  box-shadow: 0 2px 8px rgba(197, 165, 114, .5), 0 0 0 2px var(--red);
}
.category-nav__fav.active .category-nav__fav-star { display: none; }
.category-nav__fav.active .category-nav__fav-text { display: flex; }

/* ── 第4行块：站内搜索（在置顶区内，随整体 sticky） ── */
.site-search { margin-top: 12px; }
.site-search input {
  width: 100%; max-width: 660px; display: block; margin: 0 auto;
  padding: 12px 22px;
  border: 1px solid var(--gold); border-radius: 999px;
  font-size: 15px; outline: none;
  background: var(--bg); color: var(--text);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .04);
}
.site-search input:focus { border-color: var(--red); box-shadow: 0 0 0 3px rgba(158, 27, 34, .12); }

/* ── 第4.5行块：结果计数（搜索框与筛选标签行之间） ──
   无筛选：「共 N 个站点」；有筛选：「当前显示 X / N 个站点」；
   0 结果时红色加粗提醒。 */
.result-count { margin-top: 8px; text-align: center; }
.result-count__text { font-size: 12px; color: var(--text-sub); letter-spacing: .05em; }
.result-count__text.is-empty { color: var(--red); font-weight: 600; }

/* ── 第5行块：筛选标签区（1行三段式，在置顶区内随整体 sticky） ── */
.filter-tags {
  display: flex; align-items: center; gap: 8px;
  margin-top: 10px; margin-bottom: 10px; min-height: 34px;
}
.filter-tags__hint { flex: none; font-size: 13px; color: var(--text-sub); white-space: nowrap; }
.filter-tags__track {
  flex: 1; min-width: 0;
  display: flex; gap: 8px;
  padding: 2px;
}
.filter-tags__track .filter-tag { flex: none; }
.filter-tag {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--bg-warm);
  border: 1px solid var(--gold);
  color: var(--red);
  border-radius: 999px;
  padding: 3px 6px 3px 12px;
  font-size: 13px; white-space: nowrap;
}
.filter-tag__del {
  border: none; background: transparent;
  color: var(--text-sub); font-size: 14px; line-height: 1;
  padding: 2px 6px; border-radius: 50%;
}
.filter-tag__del:hover { color: #fff; background: var(--red); }
.filter-tag__clear {
  flex: none;
  border: 1px solid var(--gold); background: transparent;
  color: var(--red); font-size: 13px; padding: 4px 12px; border-radius: 999px;
  white-space: nowrap;
}
.filter-tag__clear:hover { background: var(--red); color: #fff; }

/* ═══════════ 第6行块：卡片容器（Grid 响应式） ═══════════
   手机一行 2 个，平板 3 个，桌面 4 个；
   v4.1：不同 type 的卡片之间由 grid-break 强制换行，绝不同行。 */
.cards-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  /* 顶对齐：某卡展开变高时，同行左右卡保持各自自然高度、互不拉伸 ——
     第一行(标题)不动、描述也保持原截断态，仅被点的卡独立展开 */
  align-items: start;
  padding-top: 14px; padding-bottom: 40px;
}
@media (min-width: 768px)  { .cards-container { grid-template-columns: repeat(3, 1fr); gap: 16px; } }
@media (min-width: 1024px) { .cards-container { grid-template-columns: repeat(4, 1fr); gap: 18px; } }
/* 类型分隔：占满整行、高度 0，仅用于强制换行 */
.grid-break { grid-column: 1 / -1; height: 0; }

/* ═══════════ 卡片通用 ═══════════ */
.card {
  position: relative;
  background: var(--bg);
  border: 1px solid var(--gold);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  min-width: 0;
  /* 性能（2026-08-31）：视口外的卡片整体跳过样式计算、布局与绘制。
     337 张卡实际只渲染视口内十几张，渲染成本不再随卡片总数线性增长。
     contain-intrinsic-size 的 auto 关键字让浏览器记住该卡真实高度，
     滚过一次后滚动条长度自动修正，避免首屏滚动条明显跳动。 */
  content-visibility: auto;
  contain-intrinsic-size: auto 300px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
/* 整卡位移 + 大阴影只在真支持悬停的设备启用：
   移动端触摸后 :hover 态会粘滞不消失，337 张卡同时挂着 transform 与
   大范围阴影会持续触发重绘，是移动端滚动掉帧的放大器之一。 */
@media (hover: hover) and (pointer: fine) {
  .card:hover { border-color: var(--gold-bright); transform: translateY(-3px); box-shadow: var(--shadow-hover); }
}

/* 卡片收藏按钮（v4.1：SVG 星形，grid 布局成员，统一固定在名称行右端） */
.card__fav {
  justify-self: end;
  width: 30px; height: 30px;
  border: none; background: transparent; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  padding: 0; cursor: pointer;
  transition: transform .15s ease;
}
.card__fav { color: var(--gold); }
.card__fav svg { width: 20px; height: 20px; display: block; }
.card__fav[aria-pressed="true"] { color: var(--gold-bright); }
/* 同上：缩放悬停只在支持真实悬停的设备启用，避免移动端触摸后粘滞重绘 */
@media (hover: hover) and (pointer: fine) {
  .card__fav:hover { transform: scale(1.12); color: var(--gold-bright); }
}

/* 媒体区：URL→仅图片（失败移除后露出红色渐变底）；空/非URL→文字 logo 占位 */
.card__media { position: relative; background: linear-gradient(135deg, var(--red), var(--red-deep)); overflow: hidden; }
.card__media-fallback {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-weight: 700; font-size: 34px;
  color: #fff; text-shadow: 0 2px 8px rgba(0, 0, 0, .25);
}
.card__media-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* 纯色块占位（media 列仅填颜色值）：inline style 已设 background，此处保证铺满且无图时不露红底 */
.card__media--color { background-image: none; }

/* 文本行（标题/描述）：单行不换行，超出截断隐藏（不用省略号），可横向滚动 */
.card__title {
  font-family: var(--serif);
  font-size: 16px; font-weight: 700; color: var(--text);
  min-width: 0;
}
.card__desc {
  font-size: 14px; color: var(--text-sub);   /* B11 可读性 13→14px */
  min-width: 0;
}
.result-count__text { font-size: 14px; }                                  /* B11 可读性 */
.card__link { font-size: 14px; }                                          /* B11 可读性 */

/* 标签行 & 链接行 */
.card__tags, .card__links {
  display: flex; gap: 6px;
  padding-bottom: 2px;
}
/* A：无链接时链接行占位，防止卡片底部塌陷（链接行恒为单行，与一条链接等高；min-height≈链接按钮高度+padding） */
.card__links { min-height: 28px; }
.card__tag {
  flex: none;
  border: 1px solid var(--gold); background: var(--bg-warm);
  color: var(--red); border-radius: 999px;
  padding: 2px 10px; font-size: 12px;
  transition: color .15s ease, background-color .15s ease, border-color .15s ease;
}
.card__tag:hover { background: var(--red); color: #fff; border-color: var(--red); }
.card__tag--cat { border-color: var(--red); font-weight: 600; }
.card__link {
  flex: none;
  font-size: 13px; color: var(--text-sub);
  text-decoration: none;
  border: 1px solid var(--gold); border-radius: 0;
  padding: 3px 12px;
  transition: color .15s ease, background-color .15s ease, border-color .15s ease;
}
.card__link:hover { background: var(--red); color: #fff; border-color: var(--red); }
.card__link-arrow { font-size: 11px; margin-left: 2px; opacity: .7; }
.card__link:hover .card__link-arrow { opacity: 1; }



/* ═══════════ 结构1：4行3列（v4.1） ═══════════
   第1-2行第1列=媒体（跨两行）；第1行第2列=名称、第3列=收藏；
   第2行第2-3列=描述；第3行=标签；第4行=链接 */
.card--t1 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 48px;
  grid-template-areas:
    "title media"
    "desc  fav"
    "tags  tags"
    "links links";
  gap: 6px 12px;
  padding: 14px;
  /* 顶对齐：同行等高被拉伸时，标题/描述仍钉在顶部，第一行不随卡片变高而下移 */
  align-items: start;
}
.card--t1 .card__media { grid-area: media; width: 48px; height: 48px; border-radius: 8px; align-self: start; }
/* 文字 logo：容器 48×48，字符 24px（用户 v4.4.3 指定） */
.card--t1 .card__media-fallback { font-size: 24px; }
.card--t1 .card__title {
  grid-area: title;
  /* 名称行数由 --title-lines 控制（JS 整行联动设同行最大值；未设默认 2 行，与 48px 图标平行）。
     关键修复：必须显式 height=行数×1.5em，否则内容少的短标题不会撑到 N 行高、
     同行无法等高（之前单靠 -webkit-line-clamp 控行数，短内容不撑高 → 短卡不跟随加行）。 */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--title-lines, 2);    /* 长内容裁到 N 行 + 省略号 */
  height: calc(var(--title-lines, 2) * 1.5em);  /* 短内容强制撑到 N 行高 → 与同行等高 */
  overflow: hidden;
  white-space: normal;   /* 覆盖全局 .card__title 的 nowrap（line-clamp 需可换行） */
  cursor: pointer;
}
/* 即便被标记 is-scrollable（兜底），类型1名称也不显示抓取光标/金色高亮 */
.card--t1 .card__title.is-scrollable { cursor: pointer; }
.card--t1 .card__title.is-scrollable:hover { background: none; box-shadow: none; }
/* fav 钉在单元格顶部：描述多行向下加行时，星标位置保持不变、不随之下沉 */
.card--t1 .card__fav   { grid-area: fav; justify-self: center; align-self: start; }
.card--t1 .card__desc  {
  grid-area: desc;
  /* 默认：单行省略（经典 nowrap+ellipsis，可靠）。
     展开态(.is-expanded)：JS 设 --lines=同行最大行数 → 高度=行数×1.5em，
     文字换行全显；同行所有卡同高(内容少的下方留白，多的精确裁到 N 行)，第一行不动。 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  height: 1.5em;
  cursor: pointer;
  line-height: 1.5;
}
.card--t1 .card__desc.is-expanded {
  white-space: normal;          /* 解除单行限制，允许换行全显 */
  height: calc(var(--lines, 1) * 1.5em);
}
.card--t1 .card__desc.is-scrollable { cursor: pointer; }
.card--t1 .card__desc.is-scrollable:hover { background: none; box-shadow: none; }
.card--t1 .card__tags  { grid-area: tags;  margin-top: 8px; }
.card--t1 .card__links { grid-area: links; }

/* ═══════════ 结构2/3：5行2列（v4.1） ═══════════
   第1行=媒体（跨两列，封面按黄金比例 1.618）；第2行=名称+收藏；
   第3行=描述；第4行=标签；第5行=链接 */
.card--t2, .card--t3 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "media media"
    "title title"
    "desc  fav"
    "tags  tags"
    "links links";
  row-gap: 6px;
  padding: 0 0 14px;
}
.card--t2 .card__media, .card--t3 .card__media { grid-area: media; }
.card--t2 .card__title, .card--t3 .card__title {
  grid-area: title;
  margin: 12px 14px 0;
  /* 同类型1：名称行数由 --title-lines 控制（JS 整行联动设同行最大值；类型2/3 未设默认 1 行）。
     必须显式 height=行数×1.5em，否则短标题不撑高、同行无法等高。 */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--title-lines, 1);
  height: calc(var(--title-lines, 1) * 1.5em);
  overflow: hidden;
  white-space: normal;
  cursor: pointer;
}
.card--t2 .card__fav,   .card--t3 .card__fav   { grid-area: fav;   margin: 2px 14px 0 0; align-self: start; justify-self: center; }
.card--t2 .card__desc,  .card--t3 .card__desc  {
  grid-area: desc;
  margin: 2px 14px 0;
  /* 同类型1：描述默认单行省略；展开态(JS 设 --lines=同行最大行数)换行全显、同行等高 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  height: 1.5em;
  cursor: pointer;
  line-height: 1.5;
}
.card--t2 .card__desc.is-expanded, .card--t3 .card__desc.is-expanded { white-space: normal; height: calc(var(--lines, 1) * 1.5em); }
/* 兜底：即便被标记 is-scrollable，类型2/3 名称/描述也不显示抓取光标 / 金高亮 */
.card--t2 .card__title.is-scrollable, .card--t3 .card__title.is-scrollable,
.card--t2 .card__desc.is-scrollable,  .card--t3 .card__desc.is-scrollable { cursor: pointer; }
.card--t2 .card__title.is-scrollable:hover, .card--t3 .card__title.is-scrollable:hover,
.card--t2 .card__desc.is-scrollable:hover,  .card--t3 .card__desc.is-scrollable:hover { background: none; box-shadow: none; }
.card--t2 .card__tags,  .card--t3 .card__tags  { grid-area: tags;  margin: 10px 14px 0; }
.card--t2 .card__links, .card--t3 .card__links { grid-area: links; margin: 6px 14px 0; }
.card--t2 .card__media { aspect-ratio: 1.618 / 1; }   /* 横向 */
.card--t3 .card__media { aspect-ratio: 1 / 1.618; }   /* 纵向 */
/* 纵向卡较高：不强行拉伸同行卡片 */
.card--t3 { align-self: start; }

/* ═══════════ 第8行块：Footer ═══════════ */
.footer {
  border-top: 1px solid var(--gold);
  background: var(--bg-warm);
  text-align: center;
  padding: 26px 16px 30px;
  color: var(--text-sub); font-size: 13px;
}
.footer__copyright { letter-spacing: .06em; }

/* ═══════════ 移动端微调 ═══════════ */
@media (max-width: 639px) {
  .ad { margin: 1rem auto; }   /* 仅收上下间距；左右仍零留白撑满屏宽 */
  .hero { padding: 40px 12px 32px; }
  .hero__engines button { padding: 5px 12px; font-size: 13px; }
  .hero__searchrow input { padding: 11px 16px; }
  .hero__searchrow button { padding: 0 18px; }
  .category-nav__inner { gap: 8px; }
  .category-nav__logo { width: 40px; height: 40px; }
  .category-nav__logo .logo__brand span:first-child { font-size: 13px; }
  .category-nav__logo .logo__brand span:last-child  { font-size: 12px; }
  .category-nav__logo .logo__all { font-size: 14px; }
  .category-nav__fav { width: 40px; height: 40px; }
  .category-nav__fav-star { font-size: 18px; }
  .category-nav__fav-text span:first-child { font-size: 12px; }
  .category-nav__fav-text span:last-child  { font-size: 11px; }
  .card--t1 { grid-template-columns: minmax(0, 1fr) 48px; padding: 12px; gap: 5px 10px; }
  .card--t1 .card__media { width: 48px; height: 48px; }
  .card--t1 .card__media-fallback { font-size: 24px; }
  .card__fav { width: 26px; height: 26px; }
  .card__fav svg { width: 17px; height: 17px; }
}

/* ═══════════ v5 新增样式 ═══════════ */

/* ── 无障碍：跳到主内容 ── */
.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 9999;
  background: var(--red);
  color: #fff;
  padding: 8px 20px;
  border-radius: 0 0 8px 8px;
  font-size: 14px;
  text-decoration: none;
  transition: top .15s ease;
}
.skip-link:focus { top: 0; }

/* ── 暗色模式切换按钮 ── */
.theme-toggle {
  flex: none;
  width: 44px; height: 44px; border-radius: 8px;
  border: 1px solid var(--gold);
  background: var(--bg);
  color: var(--gold-bright);
  display: flex; align-items: center; justify-content: center;
  padding: 0; cursor: pointer;
  transition: color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.theme-toggle svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.theme-toggle__moon { display: none; }
[data-theme="dark"] .theme-toggle__sun { display: none; }
[data-theme="dark"] .theme-toggle__moon { display: block; }
.theme-toggle:hover { border-color: var(--gold-bright); color: var(--gold-bright); box-shadow: 0 0 0 2px rgba(197, 165, 114, .3); }
@media (max-width: 639px) {
  .theme-toggle { width: 40px; height: 40px; }
  .theme-toggle svg { width: 18px; height: 18px; }
}

/* ── 回到顶部按钮 ── */
/* 滚动按钮：4 个独立按钮，按滚动位置只显示 1 个 */
.scroll-btns { position: fixed; bottom: calc(var(--taskbar-inset, 0px) + 24px); right: 24px; z-index: 90; }
.scroll-btn {
  position: absolute; right: 0; bottom: 0;
  width: 44px; height: 44px;
  border: 1px solid var(--gold); border-radius: 50%;
  background: var(--bg); color: var(--red);
  display: none; align-items: center; justify-content: center;
  padding: 0; cursor: pointer;
  box-shadow: var(--shadow-hover);
  opacity: 0; transform: translateY(10px);
  transition: opacity .2s ease, transform .2s ease, border-color .15s ease;
}
/* 按 data-target 显示对应按钮 */
.scroll-btn.is-active { display: flex; opacity: 1; transform: translateY(0); }
.scroll-btn svg { width: 22px; height: 22px; }
.scroll-btn:hover { border-color: var(--gold-bright); color: var(--gold-bright); }
@media (max-width: 639px) {
  .scroll-btns { bottom: calc(var(--taskbar-inset, 0px) + 16px); right: 16px; }
  .scroll-btn { width: 40px; height: 40px; }
}

/* ── 空结果状态 ── */
.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-sub);
}
.empty-state__icon { color: var(--gold); margin-bottom: 16px; }
.empty-state__text { font-size: 16px; }

/* ── 页面入场动画 ── */
@media (prefers-reduced-motion: no-preference) {
  .hero { animation: fadeInDown .5s ease-out; }
  .sticky-top { animation: fadeIn .4s ease-out .1s both; }
  .cards-container .card { animation: fadeInUp .35s ease-out both; }
  .cards-container .card:nth-child(1) { animation-delay: .15s; }
  .cards-container .card:nth-child(2) { animation-delay: .2s; }
  .cards-container .card:nth-child(3) { animation-delay: .25s; }
  .cards-container .card:nth-child(4) { animation-delay: .3s; }
  .cards-container .card:nth-child(5) { animation-delay: .35s; }
  .cards-container .card:nth-child(6) { animation-delay: .4s; }
  .cards-container .card:nth-child(7) { animation-delay: .45s; }
  .cards-container .card:nth-child(8) { animation-delay: .5s; }
  .footer { animation: fadeIn .4s ease-out .3s both; }
}
@keyframes fadeInDown { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ── 卡片悬停增强：金色光带 ── */
@media (prefers-reduced-motion: no-preference) {
  .card { position: relative; overflow: hidden; }
  .card::after {
    content: '';
    position: absolute; top: 0; left: -100%;
    width: 60%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(212, 175, 55, .08), transparent);
    transition: left .5s ease;
    pointer-events: none;
  }
  .card:hover::after { left: 120%; }
}

/* ── 搜索高亮 ── */
.card mark {
  background: rgba(212, 175, 55, .3);
  color: inherit;
  border-radius: 2px;
  padding: 0 1px;
}

/* ── Footer 重构（版权 / 导航 / 工具簇） ── */
.footer__inner {
  display: flex; flex-direction: column; align-items: center;
  gap: 16px; text-align: center;
}
.footer__copyright { letter-spacing: .06em; }
.footer__nav {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 4px 22px;
}
.footer__nav a {
  color: var(--text-sub); text-decoration: none; font-size: 14px;   /* B11 可读性 13→14px */
  letter-spacing: .04em; transition: color .15s ease;
}
.footer__nav a:hover { color: var(--red); }
/* A1 页脚非官方声明 */
.footer__disclaimer { font-size: 12px; color: var(--text-sub); margin: 8px 0 0; line-height: 1.6; }
/* A1 首页底部固定非官方声明条（可关闭）
   z-index 80：必须低于 .scroll-btns(90)——声明条 fixed bottom 会覆盖右下角滚动按钮区域，
   若 z-index 更高则拦截按钮点击（新世界 22:19 实测 bug，造物主定位图层覆盖）。 */
.official-banner {
  position: fixed; left: 0; right: 0; bottom: var(--taskbar-inset, 0px); z-index: 80;
  background: var(--red-deep); color: #fff;
  padding: 10px 48px 10px 16px; text-align: center;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, .25);
}
.official-banner[hidden] { display: none; }
.official-banner__text { margin: 0; font-size: 13px; line-height: 1.5; letter-spacing: .02em; }
.official-banner__close {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  background: transparent; border: none; color: #fff; font-size: 22px; line-height: 1;
  cursor: pointer; padding: 2px 8px;
}
.official-banner__close:hover { opacity: .8; }
/* 声明条显示时，滚动按钮上移避开其覆盖区（空间分离——不依赖 z-index 对抗；
   Edge 渲染 fixed 兄弟 z-index 与 Chrome 有差异，2026-08-30 23:39 造物主实测；
   :has() 需 Chrome/Edge 105+，老内核回退默认低位）。
   所有 bottom 均叠加 --taskbar-inset（最大化时窗口底边常被任务栏覆盖，
   贴底元素被"吃掉"导致关闭钮点不到/悬停不触发；JS 会写该变量 = 任务栏高）。 */
body:has(.official-banner:not([hidden])) .scroll-btns { bottom: calc(var(--taskbar-inset, 0px) + 76px); }
@media (max-width: 768px) {
  body:has(.official-banner:not([hidden])) .scroll-btns { bottom: calc(var(--taskbar-inset, 0px) + 84px); }
}
/* 兜底：JS 驱动（不依赖 :has()，老内核/IE 模式同样生效）——声明条显示时脚本给 body 加 .has-notice，
   关闭时移除；脚本另会按声明条实测高度写内联 bottom（优先级最高），此处仅作无 JS 时的样式降级 */
body.has-notice .scroll-btns { bottom: calc(var(--taskbar-inset, 0px) + 76px); }
@media (max-width: 768px) {
  body.has-notice .scroll-btns { bottom: calc(var(--taskbar-inset, 0px) + 84px); }
}
/* 工具簇：随机漫步 + 暗色切换，分隔成一组控制条 */
.footer__tools {
  display: flex; align-items: center; justify-content: center;
  gap: 16px; width: 100%; max-width: 320px;
  padding-top: 14px; border-top: 1px solid var(--gold);
}
.footer__random {
  border: 1px solid var(--gold); background: transparent;
  color: var(--red); font-size: 13px; padding: 6px 18px;
  border-radius: 999px; cursor: pointer; white-space: nowrap;
  transition: color .15s ease, background-color .15s ease, border-color .15s ease;
}
.footer__random:hover { background: var(--red); color: #fff; border-color: var(--red); }
/* 暗色切换（已在 footer 工具簇中） */
.footer__tools .theme-toggle { width: 38px; height: 38px; flex: none; }
.footer__tools .theme-toggle svg { width: 18px; height: 18px; }

/* ── 打印样式 ── */
@media print {
  .hero__search, .ad, .sticky-top, .scroll-btns, .theme-toggle,
  .card__fav, .filter-tags, .site-search, .result-count, .footer__random,
  .skip-link, .empty-state { display: none !important; }
  .card { border: 1px solid #ccc; box-shadow: none; break-inside: avoid; }
  .cards-container { grid-template-columns: repeat(3, 1fr) !important; gap: 8px !important; }
  body { background: #fff; color: #000; }
}

/* ── 暗色模式适配 ── */
[data-theme="dark"] .card__media { background: linear-gradient(135deg, var(--red-soft), var(--red-soft-deep)); }
[data-theme="dark"] .hero__engines,
[data-theme="dark"] .hero__searchrow,
[data-theme="dark"] .hero__engines-track button { background: var(--bg-warm); }
[data-theme="dark"] .hero__engines-track button { color: var(--text-sub); }
[data-theme="dark"] .site-search input { background: var(--bg-warm); }
[data-theme="dark"] .filter-tag { background: var(--bg-warm); }
[data-theme="dark"] .card__tag { background: var(--bg-warm); }
[data-theme="dark"] .footer__random { background: transparent; }

/* ═══ 面包屑导航（B 档新增 + 底部位置改造，红/金配色，亮暗双模式） ═══ */
.breadcrumb {
  max-width: 1200px;
  margin: 0 auto;
  padding: 14px 20px 12px;
  border-top: 1px solid rgba(197, 165, 114, .4);
  font-family: var(--sans);
  font-size: 12px;
  line-height: 1.6;
}
.breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.breadcrumb__item {
  display: inline-flex;
  align-items: center;
  color: var(--text-sub);
}
.breadcrumb__item:not(:last-child)::after {
  content: "/";
  margin: 0 8px;
  color: var(--gold);
  font-weight: 400;
}
.breadcrumb__link {
  color: var(--red);
  text-decoration: none;
  transition: color .15s ease;
}
.breadcrumb__link:hover {
  color: var(--red-deep);
  text-decoration: underline;
}
.breadcrumb__item--current {
  color: var(--red);
  font-weight: 600;
}
/* 暗色模式 */
[data-theme="dark"] .breadcrumb__link { color: var(--gold-bright); }
[data-theme="dark"] .breadcrumb__link:hover { color: var(--gold); }
[data-theme="dark"] .breadcrumb__item { color: var(--text-sub); }
[data-theme="dark"] .breadcrumb__item::after { color: var(--gold); }
[data-theme="dark"] .breadcrumb__item--current { color: var(--red); }

/* ═══ miniworld 新增（第 8 步）═══ */

/* 随机漫步条（分类容器内 sticky，做-5） */
.random-bar {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 4px 12px; font-size: 14px; color: var(--text);
  background: var(--bg-warm, #fff8f2);
}
.random-bar[hidden] { display: none; }
.random-btn {
  border: 1px solid var(--gold); background: var(--red); color: #fff;
  padding: 3px 14px; border-radius: 999px; cursor: pointer; font-size: 13px;
}
.random-btn--ghost { background: transparent; color: var(--text-sub); }

/* 广告卡标识（is_ad，D-15） */
.card--ad { position: relative; }
.card__ad-label {
  position: absolute; top: 4px; right: 4px; z-index: 2;
  background: var(--gold, #d9b978); color: #fff; font-size: 10px;
  padding: 1px 6px; border-radius: 3px; letter-spacing: .05em;
}

/* 无链接卡空行占位（与旧世界一致，不加提示文字——造物主拍板 2026-08-30） */

/* T6 修复（2026-08-31 v2）：横向滑道只声明 pan-x，让浏览器独占横手势，
   竖手势自动留给页面 → 解决小米「左右滑时好时坏」。
   overscroll-behavior: contain 阻止到边界时把手势链到页面/系统导航
   （小米左滑回桌面、到尽头往上滑的根因）。
   标题/描述区是「点按展开」非滑道，不在此列，保留纵向滚页面手势。 */
.track, .filter-tags__track,
.card__tags, .card__links, .card__sources {
  touch-action: pan-x;
  overscroll-behavior: contain;
}
/* T6 修复（2026-08-31）：禁用整页橡皮筋回弹，杜绝 MIUI 把页面 overscroll
   钩成「左滑回桌面」系统手势，避免用户被甩出站点。本产品无下拉刷新，无副作用。 */
html, body { overscroll-behavior: none; }