/* ==========================================================================
   全网云手机使用教程 · 设计系统
   --------------------------------------------------------------------------
   2026-09-28 框架重建（v3）：把「拼出来的页面」重做成一套有系统的界面。

   ── 设计意图 ──────────────────────────────────────────────────────────
   这是一个「选购决策站」：用户来是为了判断哪台云机值得买。
   所以视觉重心从「好看的卡片」转向「可比较的信息」——
     · 排行榜、评分、价格参数是主角，装饰退后
     · 靠字重与留白建立层级，而不是靠颜色堆叠
     · 表格/榜单用等宽对齐，方便纵向比较
     · 只保留一个强调色（靛蓝），其余都是中性灰阶

   ── 架构（改样式按这个顺序找）────────────────────────────────────────
     ① Token      设计变量：色阶 / 字阶 / 间距 / 圆角 / 阴影 / 动效
     ② Base       reset 与基础排版
     ③ Layout     shell（header / main / footer）与栅格
     ④ Components 组件库：按钮 / 徽章 / 卡片 / 输入 / 星星 / 空态
     ⑤ Blocks     业务区块：榜单 / 评价 / 视频 / 教程步骤 / 留言
     ⑥ Pages      页面级组装
     ⑦ Responsive 断点
     ⑧ Dark       深色模式
     ⑨ Motion     减弱动效

   ⚠️ 这些类名是 app.js 的钩子，重构时**必须保留**：
      .head-nav a（导航高亮）
      .tut-steps / .step / .tut-toc a（阅读进度 + 目录高亮）
      #tutFilter .chip-f / #tutGrid / #tutEmpty / .tcard（分类筛选）
      [data-guestbook] / .gb-ta / .gb-count b / .gb-msg / .gb-btn / .gb-card
      form[data-review] / .rev-star / [data-msg] / .rev-submit
      .vbox[data-player] / .vbox-play / .vbox-title
      #heroInput / #navSearch / #heroSug / #navSug / #searchOut / .sug-item
      #readBar / #toTop
   ========================================================================== */

/* ==========================================================================
   ① Token —— 所有视觉决策集中在这里，改版先改这里
   ========================================================================== */

:root {
  /* ---- 中性灰阶：界面 90% 的面积由这组颜色构成 ---- */
  --gray-0: #ffffff;   /* 卡片面 */
  --gray-1: #fafbfd;   /* 页面底 */
  --gray-2: #f4f4f4;   /* 次级面（表头、代码块） */
  --gray-3: #ebebeb;   /* 分隔线 */
  --gray-4: #dedede;   /* 强分隔 / 输入框边 */
  --gray-5: #bdbdbd;   /* 禁用文字 */
  --gray-6: #929292;   /* 次要文字 */
  --gray-7: #646464;   /* 正文次要 */
  --gray-8: #3b3b3b;   /* 正文 */
  --gray-9: #1f1f1f;   /* 标题 */
  --gray-10: #090909;  /* 极深（页脚） */

  /* ---- 强调色：只有一个，克制使用 ---- */
  --accent: #181818;        /* 靛蓝 700 */
  --accent-hi: #1d1d1d;     /* hover */
  --accent-lo: #252525;     /* 浅一档，深色模式用 */
  --accent-soft: #f1f1f1;   /* 极浅底 */
  --accent-line: #cfcfcf;   /* 浅边 */
  --accent-ink: #0e0e0e;    /* 强调色上的文字 */

  /* ---- 语义色 ---- */
  --star: #a9a9a9;          /* 星级评分（暖黄，唯一允许的第二种彩色） */
  --ok: #1b1b1b;
  --ok-soft: #f0f0f0;
  --warn: #212121;
  --warn-soft: #f7f7f7;
  --warn-line: #dbdbdb;
  --err: #c0342b;

  /* ---- 字阶：1.2 比例，标题紧、正文松 ---- */
  --fs-xs: 11.5px;
  --fs-sm: 12.5px;
  --fs-base: 14px;
  --fs-md: 15px;
  --fs-lg: 17px;
  --fs-xl: 20px;
  --fs-2xl: 25px;
  --fs-3xl: 32px;
  --fs-4xl: 42px;
  --fs-5xl: 54px;

  /* ---- 间距：8 的倍数，除最小的 4 ---- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 44px;
  --sp-9: 64px;

  /* ---- 圆角：整体偏克制，不做胶囊化 ---- */
  --r-xs: 6px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-full: 999px;

  /* ---- 阴影：三层，用得越少越高级 ---- */
  --sh-1: 0 1px 2px rgba(9, 9, 9, .05);
  --sh-2: 0 1px 3px rgba(9, 9, 9, .07), 0 6px 16px rgba(9, 9, 9, .05);
  --sh-3: 0 2px 8px rgba(9, 9, 9, .08), 0 16px 40px rgba(9, 9, 9, .1);

  /* ---- 布局 ---- */
  --w-page: 1160px;   /* 内容最大宽 */
  --w-text: 720px;    /* 长文最大宽（可读性） */
  --h-head: 60px;

  /* ---- 动效 ---- */
  --ease: cubic-bezier(.32, .72, .28, 1);
  --t-fast: .14s;
  --t-base: .22s;
}

/* ==========================================================================
   ② Base —— reset 与基础排版
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
               "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  font-size: var(--fs-base);
  line-height: 1.7;
  color: var(--gray-8);
  background: var(--gray-1);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 {
  margin: 0;
  color: var(--gray-9);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.01em;
}

p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img { max-width: 100%; height: auto; display: block; }

a {
  color: var(--accent);
  text-decoration: none;
  transition: color var(--t-fast) var(--ease);
}
a:hover { color: var(--accent-hi); }

button { font: inherit; color: inherit; }
input, textarea, select { font: inherit; }

/* [hidden] 必须压得住组件自己的 display。
   .bcard/.tcard 是 display:flex/grid，优先级比浏览器的 [hidden]{display:none} 高，
   所以「筛选后把卡片 el.hidden = true」会只加属性、元素照样显示 ——
   品牌大全/教程大全的筛选和排序点了看起来毫无反应，就是这个原因。
   这条放在 reset 末尾、组件之前，靠 !important 保证任何组件都压不过它。 */
[hidden] { display: none !important; }

/* 键盘焦点：只在键盘操作时出现，鼠标点击不出现 */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

/* 跳到主内容（无障碍） */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 99;
  padding: var(--sp-3) var(--sp-4);
  background: var(--accent); color: #fff; border-radius: 0 0 var(--r-sm) 0;
}
.skip:focus { left: 0; }

/* 滚动条 */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--gray-4); background-clip: content-box;
  border: 3px solid transparent; border-radius: var(--r-full);
}
::-webkit-scrollbar-thumb:hover { background: var(--gray-5); background-clip: content-box; }

::selection { background: var(--accent-soft); color: var(--accent-ink); }

/* ==========================================================================
   ③ Layout —— shell 与栅格
   ========================================================================== */

.wrap {
  width: 100%;
  max-width: var(--w-page);
  margin: 0 auto;
  padding: 0 var(--sp-5);
}

/* ---- 顶部导航 ---- */
.site-head {
  position: sticky; top: 0; z-index: 40;
  height: var(--h-head);
  background: rgba(255, 255, 255, .88);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--gray-3);
}
.head-in {
  height: 100%;
  display: flex; align-items: center; gap: var(--sp-5);
}

/* 站标 */
.logo { display: flex; align-items: center; gap: var(--sp-3); flex: none; }
.logo-mark {
  width: 30px; height: 30px; border-radius: var(--r-sm); flex: none;
  display: grid; place-items: center;
  background: var(--accent); color: #fff;
  font-size: var(--fs-md); font-weight: 800;
  letter-spacing: -.02em;
}
.logo-txt { display: flex; flex-direction: column; line-height: 1.15; }
.logo-name { font-size: var(--fs-md); font-weight: 700; color: var(--gray-9); letter-spacing: -.02em; }
.logo-sub { font-size: var(--fs-xs); color: var(--gray-6); }

/* 主导航 */
.head-nav { display: flex; align-items: center; gap: var(--sp-1); margin-left: var(--sp-4); }
.head-nav a {
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm);
  font-size: var(--fs-base); color: var(--gray-7); font-weight: 500;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.head-nav a:hover { background: var(--gray-2); color: var(--gray-9); }
.head-nav a.on { color: var(--accent); background: var(--accent-soft); font-weight: 600; }

/* 顶栏搜索 */
.head-search {
  position: relative;
  margin-left: auto; flex: none;
  display: flex; align-items: center;
  width: 240px;
}
.head-search input {
  width: 100%; height: 36px;
  padding: 0 var(--sp-3) 0 34px;
  border: 1px solid var(--gray-3); border-radius: var(--r-sm);
  background: var(--gray-1); color: var(--gray-9);
  font-size: var(--fs-base);
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.head-search input::placeholder { color: var(--gray-5); }
.head-search input:focus {
  outline: none; background: var(--gray-0);
  border-color: var(--accent);
}
.head-search .ico {
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  color: var(--gray-5); pointer-events: none; font-size: var(--fs-base);
}
/* 顶栏「买云手机」CTA */
.head-cta {
  flex: none; height: 36px; padding: 0 var(--sp-4);
  display: inline-flex; align-items: center; gap: 6px;
  border-radius: var(--r-sm);
  background: var(--accent); color: #fff !important;
  font-size: var(--fs-base); font-weight: 600;
  transition: background var(--t-fast) var(--ease);
}
.head-cta:hover { background: var(--accent-hi); }

/* 主区 */
.site-main { padding-bottom: var(--sp-9); min-height: 60vh; }

/* 页面容器（内页统一留白） */
.page { padding-top: var(--sp-6); }

/* 面包屑 */
.crumb {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-sm); color: var(--gray-6);
  margin-bottom: var(--sp-5);
  flex-wrap: wrap;
}
.crumb a { color: var(--gray-6); }
.crumb a:hover { color: var(--accent); }
.crumb span { color: var(--gray-4); }
.crumb b { color: var(--gray-8); font-weight: 600; }

/* ---- 页脚 ---- */
.site-foot {
  background: var(--gray-0);
  border-top: 1px solid var(--gray-3);
  padding: var(--sp-8) 0 var(--sp-6);
  margin-top: var(--sp-9);
}
.foot-grid {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
  gap: var(--sp-7);
}
.foot-brand { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.foot-about { font-size: var(--fs-sm); color: var(--gray-6); line-height: 1.9; max-width: 34em; }
.foot-h { font-size: var(--fs-sm); font-weight: 700; color: var(--gray-9); margin-bottom: var(--sp-3); }
.foot-list { display: flex; flex-direction: column; gap: var(--sp-2); }
.foot-list a { font-size: var(--fs-sm); color: var(--gray-6); }
.foot-list a:hover { color: var(--accent); }
.foot-svc { font-size: var(--fs-sm); color: var(--gray-7); line-height: 2; }
.foot-svc b { color: var(--gray-9); }
.foot-qr { display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-3); }
.foot-qr img { width: 76px; height: 76px; border-radius: var(--r-sm); border: 1px solid var(--gray-3); }
.foot-qr span { font-size: var(--fs-xs); color: var(--gray-6); }

.foot-bar {
  margin-top: var(--sp-7); padding-top: var(--sp-5);
  border-top: 1px solid var(--gray-2);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); flex-wrap: wrap;
  font-size: var(--fs-sm); color: var(--gray-6);
}
.foot-disc { max-width: 62em; font-size: var(--fs-xs); color: var(--gray-5); line-height: 1.8; }

/* 备案行 */
.beian { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.beian a { color: var(--gray-6); font-size: var(--fs-sm); }

/* ==========================================================================
   ④ Components —— 组件库
   ========================================================================== */

/* ---- 按钮 ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 38px; padding: 0 var(--sp-5);
  border: 1px solid transparent; border-radius: var(--r-sm);
  font-size: var(--fs-base); font-weight: 600;
  cursor: pointer; white-space: nowrap;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.btn-solid { background: var(--accent); color: #fff; }
.btn-solid:hover { background: var(--accent-hi); color: #fff; box-shadow: 0 4px 14px rgba(24, 24, 24, .22); }
.btn-ghost { background: var(--gray-0); color: var(--gray-8); border-color: var(--gray-4); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); background: var(--gray-0); }
.btn-sm { height: 32px; padding: 0 var(--sp-4); font-size: var(--fs-sm); }

/* ---- 徽章 / 标签 ---- */
.bdg {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px var(--sp-2); border-radius: var(--r-xs);
  font-size: var(--fs-xs); font-weight: 600; line-height: 1.7;
  background: var(--gray-2); color: var(--gray-7);
  white-space: nowrap;
}
.bdg-own { background: var(--accent-soft); color: var(--accent); }
.bdg-soft { background: var(--gray-2); color: var(--gray-6); }
.bdg-warn { background: var(--warn-soft); color: var(--warn); border: 1px solid var(--warn-line); }

.tag {
  display: inline-flex; align-items: center;
  padding: 2px var(--sp-2); border-radius: var(--r-xs);
  font-size: var(--fs-xs); font-weight: 600;
  background: var(--gray-2); color: var(--gray-7); white-space: nowrap;
}
.tag-cat { background: var(--gray-2); color: var(--gray-7); }
.tag-uni { background: var(--accent); color: #fff; }
.tag-brand { background: var(--accent-soft); color: var(--accent); }
.tag-video { background: var(--accent-soft); color: var(--accent); }

/* ---- 区块标题（统一各页的 section 头）---- */
/* .sec-h / .sec-head 是上一版模板的标题行，模板已改用 .ix-block-h，
   这里只保留 .group-h —— 品牌页、搜索页、教程页仍在用。 */
.group-h {
  font-size: var(--fs-lg); margin: var(--sp-7) 0 var(--sp-4);
  display: flex; align-items: center; gap: var(--sp-3);
}
.group-h::before { content: ''; width: 3px; height: 15px; border-radius: 2px; background: var(--accent); }
.group-h em { font-style: normal; font-size: var(--fs-sm); color: var(--gray-6); font-weight: 500; }
.group-note { font-size: var(--fs-sm); color: var(--gray-6); margin: calc(-1 * var(--sp-2)) 0 var(--sp-4); }

.page-h1 { font-size: var(--fs-3xl); letter-spacing: -.025em; margin-bottom: var(--sp-3); }
.page-sub { font-size: var(--fs-md); color: var(--gray-6); margin-bottom: var(--sp-6); line-height: 1.8; }

/* ---- 图标 ---- */
/* 内联 SVG 默认按 viewBox 比例撑满父容器，页脚的公安备案图标没有尺寸约束时
   会渲染成 169×169 把页脚撑开。这里给「图标位」的 svg 一个统一尺寸，
   需要别的尺寸时在各自组件里覆盖。 */
.fb-police { display: inline-flex; align-items: center; margin-right: 4px; }
.fb-police svg { width: 13px; height: 13px; display: block; }
.ico svg, .hs-ico svg { width: 16px; height: 16px; display: block; }
/* 搜索框里的放大镜：绝对定位 + 不挡输入 */
.hs-ico {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  color: var(--gray-5); pointer-events: none; display: flex;
}
.ix-search .ico, .head-search .ico { display: flex; }

/* ---- 胶囊（热词 / 筛选）---- */
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  height: 30px; padding: 0 var(--sp-3);
  border-radius: var(--r-full);
  background: var(--gray-2); color: var(--gray-7);
  font-size: var(--fs-sm); font-weight: 500;
  border: 1px solid transparent; cursor: pointer;
  transition: all var(--t-fast) var(--ease);
}
.chip:hover { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-line); }
/* 选中态：品牌大全的「筛选/排序」和教程大全的「分类/品牌/排序」各自用
   chip-s / chip-b / chip-t / chip-f 作钩子（app.js 按 chipClass 取按钮），
   所以选中样式挂在通用的 .chip.on 上，四种变体一起生效 */
.chip.on { background: var(--accent); color: #fff; border-color: var(--accent); }
.chip-f.on { background: var(--accent); color: #fff; border-color: var(--accent); }
/* ---- 提示条 ---- */
.notice {
  padding: var(--sp-3) var(--sp-4);
  margin: var(--sp-4) 0;
  background: var(--warn-soft);
  border-left: 3px solid var(--warn);
  border-radius: var(--r-xs);
  font-size: var(--fs-base); color: var(--warn); line-height: 1.8;
}
.warn-ico { margin-right: 4px; }

/* ---- 星级 ---- */
.stars { display: inline-flex; gap: 1px; line-height: 1; }
.stars .st { font-style: normal; font-size: 13px; color: var(--gray-4); }
.stars .st-on { color: var(--star); }
.stars-big .st { font-size: 16px; }

/* ---- 搜索联想 ---- */
.sug {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 30;
  background: var(--gray-0); border: 1px solid var(--gray-3);
  border-radius: var(--r-sm); box-shadow: var(--sh-3);
  overflow: hidden;
}
.sug-item {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-base); color: var(--gray-8); cursor: pointer;
}
.sug-item:hover, .sug-item.on { background: var(--accent-soft); color: var(--accent); }
.sug-item mark { background: none; color: var(--accent); font-weight: 700; }
/* 联想面板：分组标题、每条结果的三段（标题 / 归属 / 简介）、无结果提示。
   都在 app.js 里运行时拼出来，所以要在这儿给样式。 */
.sug-group {
  padding: var(--sp-2) var(--sp-4) 4px;
  font-size: var(--fs-xs); font-weight: 700; color: var(--gray-5);
  background: var(--gray-1);
}
.sug-empty { padding: var(--sp-4); font-size: var(--fs-sm); color: var(--gray-6); line-height: 1.8; }
.si-t { font-weight: 600; color: var(--gray-9); flex: none; }
.si-k {
  flex: none; padding: 1px 6px; border-radius: var(--r-xs);
  background: var(--accent-soft); color: var(--accent);
  font-size: var(--fs-xs); font-weight: 600;
}
.si-s {
  min-width: 0; color: var(--gray-5); font-size: var(--fs-sm);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---- 搜索结果页：结果容器与空态 ---- */
.search-out { min-height: 200px; }
.so-link { color: var(--accent); font-weight: 600; }

/* ---- 404 ---- */
.nf { padding-top: var(--sp-8); }
.nf-code {
  font-size: 68px; font-weight: 800; line-height: 1;
  letter-spacing: -.04em; color: var(--gray-4);
  font-variant-numeric: tabular-nums;
}
/* 快捷入口：与留言页脚的小卡同一套，横向排一行 */
.nf-links { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-6); }
.nf-links .bcard-mini {
  background: var(--gray-0); border: 1px solid var(--gray-3);
  border-radius: var(--r-sm); padding: var(--sp-3) var(--sp-4);
}
.nf-tip { font-size: var(--fs-base); color: var(--gray-7); line-height: 1.9; }

/* ---- 阅读进度条 ---- */
#readBar {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 60;
  background: transparent; pointer-events: none;
}
#readBar i {
  display: block; height: 100%; width: 0;
  background: var(--accent);
  transition: width .1s linear;
}

/* ---- 回到顶部 ---- */
/* 注意：显隐由 app.js 切 hidden 属性控制，不要用 .on 类，否则两边打架。
   （#toTop[hidden] 的 display:none 由 reset 里那条全局 [hidden] 兜住） */
#toTop {
  position: fixed; right: var(--sp-5); bottom: var(--sp-5); z-index: 50;
  width: 40px; height: 40px; border-radius: var(--r-sm);
  display: grid; place-items: center;
  background: var(--gray-0); color: var(--gray-7);
  border: 1px solid var(--gray-3); box-shadow: var(--sh-2);
  cursor: pointer; font-size: var(--fs-lg);
}
#toTop:hover { color: var(--accent); border-color: var(--accent-line); }

/* ==========================================================================
   ⑤ Blocks —— 业务区块
   ========================================================================== */

/* ---------------------------------------------------------------
   首页 · 论坛式门户
   ---------------------------------------------------------------
   结构参考贴吧/NGA 这类论坛的信息层级：
     顶部窄（定位+搜索+数据一行放完）→ 双栏主体（左内容 / 右导航）→ 底部品牌区
   为什么不用大 Hero：论坛式布局的优势是「一屏能看到多少信息」，
   大标题会把这唯一的优势吃掉。
   --------------------------------------------------------------- */

.ix-top {
  padding: var(--sp-7) 0 var(--sp-5);
  border-bottom: 1px solid var(--gray-3);
}
.ix-head { margin-bottom: var(--sp-5); }
.ix-head h1 {
  font-size: var(--fs-4xl);
  line-height: 1.16;
  letter-spacing: -.032em;
  margin-bottom: var(--sp-3);
}
.ix-sub { font-size: var(--fs-md); color: var(--gray-6); line-height: 1.75; max-width: 34em; }

/* 搜索：宽度克制（不拉满），跟内容对齐。
   .hero-search 是搜索页与 404 页的同款搜索条（同一个组件、两处使用），
   规则合并写，免得改了一处漏另一处。 */
.ix-search, .hero-search {
  position: relative;
  display: flex; align-items: center; gap: var(--sp-2);
  max-width: 560px; margin-bottom: var(--sp-4);
}
/* 搜索页/404 里搜索条在页面顶部，与标题拉开距离 */
.hero-search-flat { max-width: 620px; margin: var(--sp-5) 0 var(--sp-6); }
.ix-search input, .hero-search input {
  flex: 1; min-width: 0; height: 44px;
  padding: 0 var(--sp-4) 0 42px;
  border: 1px solid var(--gray-4); border-radius: var(--r-sm);
  background: var(--gray-0); color: var(--gray-9); font-size: var(--fs-md);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.ix-search input::placeholder, .hero-search input::placeholder { color: var(--gray-5); }
.ix-search input:focus, .hero-search input:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.ix-search .ico, .hero-search .ico,
.hero-search .hs-ico {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  color: var(--gray-5); pointer-events: none;
}
.ix-search button, .hero-search button {
  height: 44px; padding: 0 var(--sp-5); flex: none;
  border: 0; border-radius: var(--r-sm);
  background: var(--accent); color: #fff; font-weight: 600; cursor: pointer;
  transition: background var(--t-fast) var(--ease);
}
.ix-search button:hover, .hero-search button:hover { background: var(--accent-hi); }

.ix-tags { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.ix-tags > span { font-size: var(--fs-sm); color: var(--gray-6); }
.chip-sm { height: 26px; padding: 0 var(--sp-3); font-size: var(--fs-sm); }

/* 数据条：一行文字，不是三张大卡 —— 数字是佐证不是主角 */
.ix-nums {
  margin-top: var(--sp-5); padding-top: var(--sp-4);
  border-top: 1px solid var(--gray-2);
  display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap;
  font-size: var(--fs-sm); color: var(--gray-6);
}
.ix-nums b {
  font-size: var(--fs-lg); font-weight: 800; color: var(--gray-9);
  margin-right: 4px; letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.ix-nums i { width: 1px; height: 12px; background: var(--gray-3); flex: none; }

/* ---- 双栏主体 ---- */
.ix-body {
  display: grid; grid-template-columns: 1fr 316px; gap: var(--sp-6);
  align-items: start;
  padding-top: var(--sp-6);
}
.ix-main { min-width: 0; display: flex; flex-direction: column; gap: var(--sp-6); }
.ix-side { display: flex; flex-direction: column; gap: var(--sp-4); position: sticky; top: calc(var(--h-head) + var(--sp-4)); }

.ix-block { min-width: 0; }
.ix-block-h {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); margin-bottom: var(--sp-3);
}
.ix-block-h h2 {
  font-size: var(--fs-lg); letter-spacing: -.015em;
  display: flex; align-items: center; gap: var(--sp-2);
}
.ix-block-h h2::before {
  content: ''; width: 3px; height: 15px; border-radius: 2px;
  background: var(--accent); flex: none;
}
.ix-more { font-size: var(--fs-sm); font-weight: 600; white-space: nowrap; }
.ix-block-sub { font-size: var(--fs-sm); color: var(--gray-6); margin: calc(-1 * var(--sp-2)) 0 var(--sp-3); }

/* 空态不用大块卡片，用一行字 + 一个去处。
   理由：空态是「这条路暂时没内容」，不该占掉半屏抢走真正有内容的区块的注意力。
   一行提示 + 一个链接，信息量一样，视觉重量小得多。 */
.ix-line-empty {
  font-size: var(--fs-sm); color: var(--gray-6); line-height: 1.8;
  padding: var(--sp-4) var(--sp-5);
  background: var(--gray-2); border-radius: var(--r-sm);
}
.ix-line-cta { margin-top: var(--sp-2); }

/* ---------- 教程列表行（首页「大家在看的」用） ----------
   一行一条：分类 · 标题 / 简介 · 步骤数。
   高度约 56px，一屏能扫十来条；同样的信息做成卡片要 170px，一屏只看四条。 */
.tlist {
  display: flex; flex-direction: column;
  border: 1px solid var(--gray-3); border-radius: var(--r-md);
  overflow: hidden; background: var(--gray-0);
}
.trow {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--gray-2);
  color: inherit;
  transition: background var(--t-fast) var(--ease);
}
.trow:last-child { border-bottom: 0; }
.trow:hover { background: var(--accent-soft); }
.trow-tag { flex: none; }
.trow-main { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 1px; }
.trow-title {
  font-size: var(--fs-base); font-weight: 600; color: var(--gray-9);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.trow:hover .trow-title { color: var(--accent); }
.trow-sum {
  font-size: var(--fs-sm); color: var(--gray-6);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.trow-meta {
  flex: none; font-size: var(--fs-sm); color: var(--gray-5);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.trow-meta b { color: var(--gray-7); }

/* ---------- 品牌索引（首页底部，35 个全列出） ----------
   参考论坛的版块索引：不追求好看，追求「有没有我要的」这个是非题能立刻答完。
   本店代理用强调色底 + 白字，第三方用灰底 —— 扫一眼就能分出阵营。 */
.bidx-row { display: flex; gap: var(--sp-3); align-items: flex-start; }
.bidx-row + .bidx-row { margin-top: var(--sp-3); }
/* 标签不换行：「本店代理机型」6 个字，给 5.6em 在 14px 下刚好差一点，
   折成两行会把整行方块往下推、看着就不齐了。nowrap + 定宽留足。 */
.bidx-k {
  flex: none; width: 6.4em; padding-top: 5px;
  font-size: var(--fs-sm); color: var(--gray-6); white-space: nowrap;
}
.bidx-list { display: flex; flex-wrap: wrap; gap: var(--sp-2); min-width: 0; }
.bidx {
  display: inline-flex; align-items: center;
  height: 28px; padding: 0 var(--sp-3);
  border: 1px solid var(--gray-3); border-radius: var(--r-sm);
  background: var(--gray-1); color: var(--gray-7);
  font-size: var(--fs-sm); font-weight: 500;
  transition: all var(--t-fast) var(--ease);
}
.bidx:hover { border-color: var(--accent); color: var(--accent); background: var(--gray-0); }
.bidx-own {
  background: var(--accent-soft); border-color: var(--accent-line);
  color: var(--accent); font-weight: 600;
}
.bidx-own:hover { background: var(--accent); color: #fff; border-color: var(--accent); }

/* 教程中心：宫格入口，像论坛的版块列表
   用 auto-fill 而不是固定列数 —— 分类增减时不会出现「最后一个落单」的尴尬排布。
   138px 是算出来的：主栏在最大宽度下约 780px，(780-4×8)/5 ≈ 150px，
   取 138 正好容纳 5 列，当前 5 个分类能排成整齐一行。 */
.ix-board {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(138px, 1fr));
  gap: var(--sp-2);
}
.ix-board-item {
  display: flex; flex-direction: column; gap: 2px;
  padding: var(--sp-3) var(--sp-4);
  background: var(--gray-0); border: 1px solid var(--gray-3);
  border-radius: var(--r-sm); color: inherit;
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.ix-board-item:hover { border-color: var(--accent-line); background: var(--accent-soft); color: var(--accent); }
.ix-board-item b { font-size: var(--fs-base); color: var(--gray-9); }
.ix-board-item:hover b { color: var(--accent); }
.ix-board-item span { font-size: var(--fs-sm); color: var(--gray-6); }
.ix-board-uni { background: var(--accent-soft); border-color: var(--accent-line); }
.ix-board-uni b { color: var(--accent); }

/* ---- 右侧栏 ---- */
.ix-side-card {
  padding: var(--sp-4);
  background: var(--gray-0); border: 1px solid var(--gray-3);
  border-radius: var(--r-md);
}
.ix-side-h {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-2); margin-bottom: var(--sp-3);
}
.ix-side-h h3 { font-size: var(--fs-base); letter-spacing: -.01em; }
.ix-side-h > span {
  font-size: var(--fs-sm); color: var(--gray-6); font-variant-numeric: tabular-nums;
}
.ix-side-note { font-size: var(--fs-sm); color: var(--gray-6); margin: calc(-1 * var(--sp-2)) 0 var(--sp-3); line-height: 1.7; }
.ix-side-list { display: flex; flex-direction: column; gap: 1px; }
.ix-side-list .sc {
  margin-left: auto; font-style: normal;
  font-size: var(--fs-sm); color: var(--star); font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.ix-side-empty { font-size: var(--fs-sm); color: var(--gray-6); line-height: 1.8; }
.ix-side-tags { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.ix-side-more {
  display: block; margin-top: var(--sp-3); padding-top: var(--sp-3);
  border-top: 1px solid var(--gray-2);
  font-size: var(--fs-sm); font-weight: 600; text-align: center;
}
/* 侧栏买机卡：转化入口放侧栏，不放正文中间 ——
   它是生意，不是内容，横插在阅读流里会打断「找教程」这件事。
   侧栏是论坛的常规广告位，放这儿用户不会觉得被挡路。 */
.ix-buy {
  background: var(--accent-soft); border-color: var(--accent-line);
}
.ix-buy h3 { font-size: var(--fs-base); color: var(--accent-ink); margin-bottom: var(--sp-2); }
.ix-buy p { font-size: var(--fs-sm); color: var(--gray-7); line-height: 1.8; }
.ix-buy .btn { width: 100%; margin-top: var(--sp-3); }
.ix-buy-note { margin-top: var(--sp-2); font-size: var(--fs-xs); color: var(--gray-6); }

.ix-brand-sec { margin-top: var(--sp-7); }

/* ---------------------------------------------------------------
   口碑榜（首页核心区块）
   --------------------------------------------------------------- */
/* 榜单表：数字右对齐、等宽，方便纵向比较 */
.rank-wrap {
  background: var(--gray-0); border: 1px solid var(--gray-3);
  border-radius: var(--r-md); overflow: hidden;
}
.rank { width: 100%; border-collapse: collapse; font-size: var(--fs-base); }
.rank thead th {
  padding: var(--sp-3) var(--sp-4);
  text-align: left; font-size: var(--fs-xs); font-weight: 700;
  color: var(--gray-6); text-transform: uppercase; letter-spacing: .04em;
  background: var(--gray-2); border-bottom: 1px solid var(--gray-3);
}
.rank tbody td {
  padding: var(--sp-4);
  border-bottom: 1px solid var(--gray-2); color: var(--gray-8);
  vertical-align: middle;
}
.rank tbody tr:last-child td { border-bottom: 0; }
.rank tbody tr:hover { background: var(--gray-1); }
.rank-idx { width: 52px; }
.rank-no {
  display: inline-grid; place-items: center;
  width: 24px; height: 24px; border-radius: var(--r-xs);
  font-size: var(--fs-sm); font-weight: 800;
  background: var(--gray-2); color: var(--gray-6);
  font-variant-numeric: tabular-nums;
}
/* 前三名给强调色 —— 榜单里唯一用彩色的地方 */
.rank-no-top { background: var(--accent); color: #fff; }
.rank-brand { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.rank-brand a { font-size: var(--fs-md); font-weight: 700; color: var(--gray-9); }
.rank-brand a:hover { color: var(--accent); }
.rank-score { white-space: nowrap; }
.rank-score b {
  font-size: var(--fs-lg); font-weight: 800; color: var(--gray-9);
  margin-right: var(--sp-2); font-variant-numeric: tabular-nums;
}
.rank-cnt { color: var(--gray-6); font-size: var(--fs-sm); text-align: right; font-variant-numeric: tabular-nums; }
.rank-empty {
  padding: var(--sp-6); border-radius: var(--r-md);
  background: var(--gray-2); color: var(--gray-6);
  font-size: var(--fs-base); line-height: 1.9;
}

/* 最新评价流 */
.latest { display: flex; flex-direction: column; gap: var(--sp-3); }
.latest-item {
  display: block; padding: var(--sp-4);
  background: var(--gray-0); border: 1px solid var(--gray-3);
  border-radius: var(--r-md); color: inherit;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-base) var(--ease);
}
.latest-item:hover { border-color: var(--accent-line); box-shadow: var(--sh-2); }
.latest-top { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.latest-top b { font-size: var(--fs-base); color: var(--gray-9); }
.latest-body { display: block; margin-top: var(--sp-2); font-size: var(--fs-base); color: var(--gray-7); line-height: 1.75; }
.latest-foot { display: block; margin-top: var(--sp-2); font-size: var(--fs-xs); color: var(--gray-5); }

/* ---------------------------------------------------------------
   品牌卡（列表 / 网格）
   --------------------------------------------------------------- */
.bgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }

.bcard {
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  background: var(--gray-0); border: 1px solid var(--gray-3);
  border-radius: var(--r-md); color: inherit;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-base) var(--ease),
              transform var(--t-base) var(--ease);
}
.bcard:hover {
  border-color: var(--accent-line); box-shadow: var(--sh-2);
  transform: translateY(-2px); color: inherit;
}
.bcard-tile {
  width: 42px; height: 42px; flex: none; border-radius: var(--r-sm);
  display: grid; place-items: center;
  background: var(--gray-2); color: var(--gray-7);
  font-size: var(--fs-lg); font-weight: 800;
}
.bcard-own .bcard-tile { background: var(--accent); color: #fff; }
.bcard-main { min-width: 0; flex: 1; }
.bcard-name { font-size: var(--fs-md); font-weight: 700; color: var(--gray-9); display: block; }
.bcard-intro {
  font-size: var(--fs-sm); color: var(--gray-6); margin-top: 3px; line-height: 1.6;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.bcard-go { color: var(--gray-4); flex: none; font-size: var(--fs-lg); }
.bcard:hover .bcard-go { color: var(--accent); }

/* 品牌卡的评分位：固定宽度右对齐，让一列卡片的分数能纵向对齐比较 */
.bc-score {
  flex: none; width: 92px; text-align: right;
  display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
}
.bc-score b {
  font-size: var(--fs-xl); font-weight: 800; color: var(--gray-9);
  line-height: 1.1; letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.bc-score .stars { justify-content: flex-end; }
.bc-score em {
  font-style: normal; font-size: var(--fs-xs); color: var(--gray-5);
  font-variant-numeric: tabular-nums;
}
/* 没评价时不要留空白格 —— 给一句轻提示，同时保持宽度不塌 */
.bc-score-none {
  font-size: var(--fs-xs); color: var(--gray-5);
  justify-content: center; padding-top: var(--sp-2);
}

/* ---- 品牌大全的筛选条 ---- */
.ph-bar {
  padding: var(--sp-5);
  background: var(--gray-0); border: 1px solid var(--gray-3);
  border-radius: var(--r-md);
  margin-bottom: var(--sp-4);
  display: flex; flex-direction: column; gap: var(--sp-4);
}
.ph-line { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }
.ph-label {
  font-size: var(--fs-sm); font-weight: 700; color: var(--gray-6);
  flex: none; min-width: 62px;
}
.ph-chips { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.ph-search {
  margin-left: auto; width: 200px; height: 30px;
  padding: 0 var(--sp-3);
  border: 1px solid var(--gray-4); border-radius: var(--r-full);
  background: var(--gray-1); color: var(--gray-9); font-size: var(--fs-sm);
}
.ph-search:focus { outline: none; border-color: var(--accent); background: var(--gray-0); }
.ph-count { font-size: var(--fs-sm); color: var(--gray-6); margin-bottom: var(--sp-4); }
.ph-empty {
  padding: var(--sp-7) var(--sp-5); text-align: center;
  background: var(--gray-2); border-radius: var(--r-md);
  color: var(--gray-6); font-size: var(--fs-base);
}
.ph-legend {
  margin-top: var(--sp-5); padding-top: var(--sp-4);
  border-top: 1px solid var(--gray-3);
  display: flex; gap: var(--sp-6); flex-wrap: wrap;
  font-size: var(--fs-sm); color: var(--gray-6);
}
.ph-legend > span { display: flex; align-items: center; gap: var(--sp-2); }

/* 迷你品牌卡（侧栏用） */
.bcard-mini {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm);
  color: inherit; font-size: var(--fs-base);
  transition: background var(--t-fast) var(--ease);
}
.bcard-mini:hover { background: var(--accent-soft); color: var(--accent); }
.bcard-mini .dot {
  width: 22px; height: 22px; flex: none; border-radius: var(--r-xs);
  display: grid; place-items: center; font-size: var(--fs-xs); font-weight: 800;
  background: var(--gray-2); color: var(--gray-7);
}
.bcard-mini .nm { font-weight: 600; color: var(--gray-8); }
.bcard-mini:hover .nm { color: var(--accent); }

/* ---------------------------------------------------------------
   教程卡
   --------------------------------------------------------------- */
.tgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }

.tcard {
  display: flex; flex-direction: column; gap: var(--sp-3);
  padding: var(--sp-5);
  background: var(--gray-0); border: 1px solid var(--gray-3);
  border-radius: var(--r-md); color: inherit; height: 100%;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-base) var(--ease),
              transform var(--t-base) var(--ease);
}
.tcard:hover {
  border-color: var(--accent-line); box-shadow: var(--sh-2);
  transform: translateY(-2px); color: inherit;
}
.tcard-top { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.tcard-title { font-size: var(--fs-md); font-weight: 700; color: var(--gray-9); line-height: 1.45; }
.tcard-sum {
  font-size: var(--fs-base); color: var(--gray-6); line-height: 1.7; flex: 1;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.tcard-meta { font-size: var(--fs-sm); color: var(--gray-5); }
.tcard-big { padding: var(--sp-6); }
.tcard-big .tcard-title { font-size: var(--fs-xl); }

/* ---------------------------------------------------------------
   品牌页 · 头部
   --------------------------------------------------------------- */
.brand-head {
  display: grid; grid-template-columns: auto 1fr auto; gap: var(--sp-5);
  align-items: center;
  padding: var(--sp-6);
  background: var(--gray-0); border: 1px solid var(--gray-3);
  border-radius: var(--r-lg);
  margin-bottom: var(--sp-5);
}
.brand-tile {
  width: 64px; height: 64px; flex: none; border-radius: var(--r-md);
  display: grid; place-items: center;
  background: var(--accent); color: #fff;
  font-size: var(--fs-2xl); font-weight: 800;
}
.brand-meta h1 { font-size: var(--fs-2xl); letter-spacing: -.025em; margin-bottom: var(--sp-2); }
.brand-meta p { font-size: var(--fs-base); color: var(--gray-6); line-height: 1.75; }
.brand-tags { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-3); }
.brand-cta { display: flex; flex-direction: column; align-items: flex-end; gap: var(--sp-2); }
.dl-row { display: flex; gap: var(--sp-2); flex-wrap: wrap; justify-content: flex-end; }

/* ---------------------------------------------------------------
   评价区
   --------------------------------------------------------------- */
.rev-sec { margin: var(--sp-6) 0 var(--sp-7); }
.rev-h { font-size: var(--fs-xl); margin-bottom: var(--sp-4); display: flex; align-items: center; gap: var(--sp-3); }
.rev-h::before { content: ''; width: 3px; height: 17px; border-radius: 2px; background: var(--accent); }

/* 评分大盘：左分数、右分布 */
.rev-sum-box {
  display: grid; grid-template-columns: 200px 1fr; gap: var(--sp-7);
  align-items: center;
  padding: var(--sp-6);
  background: var(--gray-0); border: 1px solid var(--gray-3);
  border-radius: var(--r-md);
}
.rev-big { text-align: center; }
.rev-big > b {
  display: block; font-size: var(--fs-5xl); font-weight: 800; line-height: 1;
  color: var(--gray-9); letter-spacing: -.04em; font-variant-numeric: tabular-nums;
}
.rev-big .stars { justify-content: center; margin: var(--sp-3) 0 var(--sp-2); }
.rev-cnt { font-size: var(--fs-sm); color: var(--gray-6); }

.dist { display: flex; flex-direction: column; gap: var(--sp-2); }
.dist-row { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-sm); }
.dist-k { width: 44px; color: var(--gray-6); flex: none; font-variant-numeric: tabular-nums; }
.dist-bar { flex: 1; height: 6px; border-radius: var(--r-full); background: var(--gray-2); overflow: hidden; }
.dist-bar > i { display: block; height: 100%; border-radius: var(--r-full); background: var(--star); }
.dist-n { width: 28px; text-align: right; color: var(--gray-7); flex: none; font-variant-numeric: tabular-nums; }
.rev-none { font-size: var(--fs-base); color: var(--gray-6); }
/* 无评价时：整块变轻，只留一句引导，不摆空分数 */
.rev-sum-empty {
  display: block; padding: var(--sp-5) var(--sp-6);
  background: var(--gray-2); border-style: dashed;
}

/* 评价列表 */
.rev-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); margin-top: var(--sp-4); }
.rev {
  padding: var(--sp-5);
  background: var(--gray-0); border: 1px solid var(--gray-3);
  border-radius: var(--r-md);
}
.rev-top { border-color: var(--accent-line); background: var(--accent-soft); }
.rev-head { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.rev-nick { font-size: var(--fs-base); color: var(--gray-9); }
.rev-badge {
  padding: 1px var(--sp-2); border-radius: var(--r-xs);
  font-size: var(--fs-xs); font-weight: 700;
  background: var(--accent); color: #fff;
}
.rev-time { margin-left: auto; font-size: var(--fs-sm); color: var(--gray-5); }
.rev-meta { margin-top: var(--sp-2); display: flex; gap: var(--sp-4); flex-wrap: wrap; font-size: var(--fs-sm); color: var(--gray-6); }
.rev-body { margin-top: var(--sp-3); font-size: var(--fs-base); color: var(--gray-7); line-height: 1.8; }

/* 评价表单 */
.rev-form {
  margin-top: var(--sp-5); padding: var(--sp-6);
  background: var(--gray-0); border: 1px solid var(--gray-3);
  border-radius: var(--r-md);
}
.rev-form-h { font-size: var(--fs-lg); margin-bottom: var(--sp-2); }
.rev-form-hint { font-size: var(--fs-sm); color: var(--gray-6); line-height: 1.8; }
.rev-f { margin-top: var(--sp-4); }
.rev-f label { display: block; font-size: var(--fs-sm); font-weight: 600; color: var(--gray-7); margin-bottom: var(--sp-2); }
.rev-f input, .rev-f textarea {
  width: 100%; padding: 10px var(--sp-3);
  border: 1px solid var(--gray-4); border-radius: var(--r-sm);
  background: var(--gray-0); color: var(--gray-9);
  transition: border-color var(--t-fast) var(--ease);
}
.rev-f input:focus, .rev-f textarea:focus { outline: none; border-color: var(--accent); }
.rev-f textarea { resize: vertical; min-height: 100px; line-height: 1.75; }
.rev-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }

.rev-stars { display: inline-flex; gap: var(--sp-1); }
.rev-star {
  border: 0; background: none; cursor: pointer; padding: 2px 3px;
  font-size: 28px; line-height: 1; color: var(--gray-4);
  transition: color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.rev-star:hover { transform: scale(1.1); }
.rev-star.on { color: var(--star); }

.rev-foot { margin-top: var(--sp-5); display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }
.rev-msg { font-size: var(--fs-sm); }
.rev-msg.ok { color: var(--ok); }
.rev-msg.bad { color: var(--err); }
.rev-submit[disabled] { opacity: .55; cursor: not-allowed; }

/* ---------------------------------------------------------------
   教程页 · 步骤
   --------------------------------------------------------------- */
.tut-head { padding-bottom: var(--sp-6); border-bottom: 1px solid var(--gray-3); margin-bottom: var(--sp-6); }
.tut-head h1 { font-size: var(--fs-3xl); letter-spacing: -.028em; margin: var(--sp-3) 0 var(--sp-3); }
.tut-tags { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.tut-lead { font-size: var(--fs-md); color: var(--gray-6); line-height: 1.8; max-width: var(--w-text); }
.tut-meta { margin-top: var(--sp-3); font-size: var(--fs-sm); color: var(--gray-6); }
.tut-meta b { color: var(--gray-9); }

.tut-body { display: grid; grid-template-columns: 232px 1fr; gap: var(--sp-8); align-items: start; }

/* 步骤目录（粘性） */
.tut-toc { position: sticky; top: calc(var(--h-head) + var(--sp-5)); }
.tut-toc h4 {
  font-size: var(--fs-xs); font-weight: 700; color: var(--gray-6);
  text-transform: uppercase; letter-spacing: .06em; margin-bottom: var(--sp-3);
}
.tut-toc ol { display: flex; flex-direction: column; gap: 2px; border-left: 2px solid var(--gray-3); }
.tut-toc a {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  margin-left: -2px; border-left: 2px solid transparent;
  font-size: var(--fs-sm); color: var(--gray-7); line-height: 1.5;
  transition: all var(--t-fast) var(--ease);
}
.tut-toc a span {
  width: 19px; height: 19px; flex: none; border-radius: var(--r-xs);
  display: grid; place-items: center;
  background: var(--gray-2); color: var(--gray-6);
  font-size: var(--fs-xs); font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.tut-toc a:hover { color: var(--accent); border-left-color: var(--accent-line); }
.tut-toc a:hover span { background: var(--accent-soft); color: var(--accent); }
.tut-toc a.on { color: var(--accent); font-weight: 600; border-left-color: var(--accent); }
.tut-toc a.on span { background: var(--accent); color: #fff; }
.tut-toc a em.toc-v { font-style: normal; font-size: 9px; margin-left: 4px; color: var(--accent); opacity: .8; }
.toc-help {
  display: block; margin-top: var(--sp-4);
  font-size: var(--fs-sm); color: var(--gray-6);
}
.toc-help:hover { color: var(--accent); }

/* 步骤卡片 */
.tut-steps { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }
.step {
  display: flex; gap: var(--sp-4);
  padding: var(--sp-5);
  background: var(--gray-0); border: 1px solid var(--gray-3);
  border-radius: var(--r-md);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-base) var(--ease);
}
.step:hover { border-color: var(--accent-line); box-shadow: var(--sh-1); }
.step-no {
  width: 34px; height: 34px; flex: none; border-radius: var(--r-sm);
  display: grid; place-items: center;
  background: var(--accent); color: #fff;
  font-size: var(--fs-md); font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.step-main { min-width: 0; flex: 1; }
.step-main h3 { font-size: var(--fs-lg); letter-spacing: -.015em; }
.step-sum { margin-top: var(--sp-2); font-size: var(--fs-base); color: var(--accent); font-weight: 600; line-height: 1.7; }
.step-body { margin-top: var(--sp-4); }

/* 富文本正文（render.js 的 rich() 产出这些类） */
.rt-h {
  font-size: var(--fs-base); font-weight: 700; color: var(--gray-9);
  margin: var(--sp-5) 0 var(--sp-2);
  display: flex; align-items: center; gap: var(--sp-2);
}
.rt-h:first-child { margin-top: 0; }
.rt-h::before { content: ''; width: 3px; height: 13px; border-radius: 2px; background: var(--accent); flex: none; }
.rt-p { font-size: var(--fs-base); color: var(--gray-7); margin: var(--sp-3) 0; line-height: 1.85; }
.rt-ul { margin: var(--sp-3) 0; display: flex; flex-direction: column; gap: 6px; }
.rt-ul li {
  position: relative; padding-left: var(--sp-5);
  font-size: var(--fs-base); color: var(--gray-7); line-height: 1.8;
}
.rt-ul li::before {
  content: ''; position: absolute; left: 3px; top: .68em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--gray-5);
}
.rt-p code, .step-body code, .about-list code {
  background: var(--gray-2); color: var(--accent);
  border-radius: var(--r-xs); padding: 1.5px 6px;
  font-size: 12.5px; font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  word-break: break-word;
}
.step-body strong { color: var(--gray-9); font-weight: 700; }

/* 教程页底部按钮组 */
.tut-foot { display: flex; gap: var(--sp-3); flex-wrap: wrap; margin-top: var(--sp-6); }

/* 上一篇 / 下一篇 */
.pager { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); margin-top: var(--sp-7); }
.pager-a {
  padding: var(--sp-4) var(--sp-5);
  background: var(--gray-0); border: 1px solid var(--gray-3);
  border-radius: var(--r-md); color: inherit;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-base) var(--ease);
}
.pager-a:hover { border-color: var(--accent-line); box-shadow: var(--sh-1); color: inherit; }
.pager-r { text-align: right; }
.pager-a span { display: block; font-size: var(--fs-sm); color: var(--gray-6); margin-bottom: 3px; }
.pager-a b { font-size: var(--fs-base); color: var(--gray-9); }

/* ---------------------------------------------------------------
   视频区块
   --------------------------------------------------------------- */
.vbox {
  margin: var(--sp-4) 0 var(--sp-2); padding: var(--sp-4);
  border: 1px dashed var(--gray-4); border-radius: var(--r-sm);
  background: var(--gray-1);
}
.vbox-head { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-3); }
.vbox-badge {
  padding: 2px var(--sp-2); border-radius: var(--r-xs);
  font-size: var(--fs-xs); font-weight: 700;
  background: var(--accent); color: #fff; white-space: nowrap;
}
.vbox-title { font-size: var(--fs-sm); color: var(--gray-9); font-weight: 600; min-width: 0; }
.vbox-date { font-size: var(--fs-xs); color: var(--gray-5); margin-left: auto; white-space: nowrap; }
.vbox-play {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: var(--sp-2);
  padding: var(--sp-5) var(--sp-4);
  border: 0; border-radius: var(--r-sm); cursor: pointer;
  background: var(--gray-0); color: var(--gray-7);
  font-size: var(--fs-base); font-weight: 600;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.vbox-play:hover { background: var(--accent-soft); color: var(--accent); }
.vbox-play-icon {
  display: inline-grid; place-items: center;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--accent); color: #fff; font-size: 12px; padding-left: 3px;
}
.vbox-note { margin-top: var(--sp-3); font-size: var(--fs-xs); color: var(--gray-5); line-height: 1.7; }
.vbox-ns { margin-top: var(--sp-2); font-size: var(--fs-sm); color: var(--gray-6); }
.vbox-frame { position: relative; width: 100%; padding-top: 56.25%; border-radius: var(--r-sm); overflow: hidden; background: #000; }
.vbox-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.vhero { margin: var(--sp-5) 0 var(--sp-2); }
.vhero-h { font-size: var(--fs-md); margin-bottom: var(--sp-3); }

/* ---------------------------------------------------------------
   留言表单
   --------------------------------------------------------------- */
.gb-card {
  margin-top: var(--sp-7); padding: var(--sp-6);
  background: var(--gray-0); border: 1px solid var(--gray-3);
  border-radius: var(--r-md);
}
.gb-h { font-size: var(--fs-lg); margin-bottom: var(--sp-2); }
.gb-hint { font-size: var(--fs-sm); color: var(--gray-6); line-height: 1.8; }
.gb-row { display: flex; gap: var(--sp-3); margin-top: var(--sp-4); }
.gb-in {
  flex: 1; height: 38px; padding: 0 var(--sp-3);
  border: 1px solid var(--gray-4); border-radius: var(--r-sm);
  background: var(--gray-0); color: var(--gray-9);
}
.gb-in:focus { outline: none; border-color: var(--accent); }
.gb-ta {
  width: 100%; margin-top: var(--sp-3); padding: var(--sp-3);
  border: 1px solid var(--gray-4); border-radius: var(--r-sm);
  background: var(--gray-0); color: var(--gray-9);
  line-height: 1.75; resize: vertical; min-height: 100px;
}
.gb-ta:focus { outline: none; border-color: var(--accent); }
.gb-foot { margin-top: var(--sp-4); display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; }
.gb-count { font-size: var(--fs-sm); color: var(--gray-5); }
.gb-btn {
  height: 38px; padding: 0 var(--sp-6);
  border: 0; border-radius: var(--r-sm);
  background: var(--accent); color: #fff; font-weight: 600; cursor: pointer;
  transition: background var(--t-fast) var(--ease);
}
.gb-btn:hover { background: var(--accent-hi); }
.gb-btn[disabled] { opacity: .55; cursor: not-allowed; }
.gb-msg { font-size: var(--fs-sm); }
.gb-msg.ok { color: var(--ok); }
.gb-msg.bad { color: var(--err); }
.gb-card.is-done { border-color: var(--ok); }

/* ---------------------------------------------------------------
   关于页
   --------------------------------------------------------------- */
.about-card {
  padding: var(--sp-6); margin-bottom: var(--sp-4);
  background: var(--gray-0); border: 1px solid var(--gray-3);
  border-radius: var(--r-md);
}
.about-card h2 { font-size: var(--fs-lg); margin-bottom: var(--sp-4); }
.about-list { display: flex; flex-direction: column; gap: var(--sp-3); }
.about-list li {
  position: relative; padding-left: var(--sp-5);
  font-size: var(--fs-base); color: var(--gray-7); line-height: 1.85;
}
.about-list li::before {
  content: ''; position: absolute; left: 3px; top: .68em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--accent);
}
.about-terms {
  padding: var(--sp-6);
  background: var(--gray-2); border-radius: var(--r-md);
  font-size: var(--fs-sm); color: var(--gray-6); line-height: 1.95;
}
/* 关于页：两块说明并排，联系卡与声明通栏。
   窄屏塌成单栏（见 ⑦ Responsive）。 */
.about-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-4); align-items: start;
}
.about-grid .about-card { margin-bottom: 0; }
.about-svc { grid-column: 1 / -1; }
/* 联系方式：左侧标签定宽，右侧内容对齐成一列 */
.as-line {
  display: flex; align-items: baseline; gap: var(--sp-3);
  font-size: var(--fs-base); color: var(--gray-8); line-height: 2;
}
.as-line > span { flex: none; width: 5em; color: var(--gray-6); font-size: var(--fs-sm); }
.as-note { margin-top: var(--sp-4); font-size: var(--fs-sm); color: var(--gray-6); line-height: 1.8; }
/* 客服二维码：不约束尺寸时 <img> 会按原图宽度铺满（实测 774px）把卡片撑爆 */
.as-qr {
  width: 132px; height: 132px; margin-top: var(--sp-4);
  border: 1px solid var(--gray-3); border-radius: var(--r-sm); background: var(--gray-1);
}
.about-beian {
  margin-top: var(--sp-6); display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  font-size: var(--fs-sm); color: var(--gray-6);
}

/* 服务卡（品牌页 / 首页共用） */
.svc-card {
  display: grid; grid-template-columns: 1fr auto; gap: var(--sp-6); align-items: center;
  padding: var(--sp-6);
  background: var(--gray-0); border: 1px solid var(--gray-3);
  border-radius: var(--r-md);
}
.svc-main h2 { font-size: var(--fs-lg); margin-bottom: var(--sp-2); }
.svc-main p { font-size: var(--fs-base); color: var(--gray-7); line-height: 1.8; }
.svc-cta { display: flex; flex-direction: column; gap: var(--sp-2); align-items: flex-end; }

/* 品牌页底部的服务卡（本店代理机型才出）。与首页的 .svc-card 同一套视觉，
   但用 .page-svc/.ps-* 这套类名 —— 两个页面的模板各自独立，别混用。 */
.page-svc {
  display: grid; grid-template-columns: 1fr auto; gap: var(--sp-6); align-items: center;
  margin-top: var(--sp-7); padding: var(--sp-6);
  background: var(--gray-0); border: 1px solid var(--gray-3);
  border-radius: var(--r-md);
}
.ps-main h2 { font-size: var(--fs-lg); margin-bottom: var(--sp-2); }
.ps-main p { font-size: var(--fs-base); color: var(--gray-7); line-height: 1.8; }
.ps-cta { display: flex; flex-direction: column; gap: var(--sp-2); align-items: flex-end; }
.ps-note { font-size: var(--fs-sm); color: var(--gray-6); }

/* 分类卡 */

/* 新手教程卡（品牌页「上机流程」区用） */
.uni-card {
  display: grid; grid-template-columns: 1fr 1.15fr; gap: var(--sp-6); align-items: center;
  padding: var(--sp-6);
  background: var(--gray-0); border: 1px solid var(--gray-3);
  border-radius: var(--r-md);
}
.uni-left h3 { font-size: var(--fs-xl); margin: var(--sp-3) 0 var(--sp-2); letter-spacing: -.02em; }
.uni-left p { font-size: var(--fs-base); color: var(--gray-6); line-height: 1.8; margin-bottom: var(--sp-4); }
.uni-steps { display: flex; flex-direction: column; gap: var(--sp-1); }
.uni-steps li {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm);
  font-size: var(--fs-base); color: var(--gray-7);
}
.uni-steps li:hover { background: var(--gray-1); }
.uni-steps .n {
  width: 22px; height: 22px; flex: none; border-radius: var(--r-xs);
  display: grid; place-items: center;
  background: var(--gray-2); color: var(--gray-6);
  font-size: var(--fs-xs); font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.uni-steps .t { min-width: 0; }

/* 搜索结果页 */

/* 搜索结果页 */
.so-head { font-size: var(--fs-md); color: var(--gray-7); margin-bottom: var(--sp-5); }
.so-head b, .so-head mark { color: var(--accent); font-weight: 700; background: none; }
.so-empty { padding: var(--sp-8) var(--sp-5); text-align: center; }
.so-empty h2 { font-size: var(--fs-lg); margin-bottom: var(--sp-2); }
.so-empty p { font-size: var(--fs-base); color: var(--gray-6); }

/* ==========================================================================
   ⑥ Pages
   ========================================================================== */

.sec { margin-bottom: var(--sp-8); }

/* ==========================================================================
   ⑦ Responsive
   ========================================================================== */

@media (max-width: 1040px) {
/* 首页双栏塌成单栏：侧栏内容挪到主栏下面（顺序不变，读起来仍顺） */
  .ix-body { grid-template-columns: 1fr; gap: var(--sp-5); }
  .ix-side { position: static; }
  .ix-board { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .bgrid { grid-template-columns: repeat(2, 1fr); }
  .tgrid { grid-template-columns: repeat(2, 1fr); }
  .foot-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-6); }
.tut-body { grid-template-columns: 1fr; gap: var(--sp-5); }
  .tut-toc { position: static; }
  .tut-toc ol { flex-direction: row; flex-wrap: wrap; border-left: 0; gap: var(--sp-2); }
  .tut-toc a { margin-left: 0; border-left: 0; padding: var(--sp-1) var(--sp-2); }
  .tut-toc a span { width: 17px; height: 17px; }
  .uni-card { grid-template-columns: 1fr; }
  .svc-card { grid-template-columns: 1fr; }
  .svc-cta { align-items: stretch; }
  .page-svc { grid-template-columns: 1fr; gap: var(--sp-4); }
  .ps-cta { align-items: stretch; }
  .about-grid { grid-template-columns: 1fr; }
  .rev-list { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  :root { --h-head: 56px; }
  .wrap { padding: 0 var(--sp-4); }
  .site-main { padding-bottom: var(--sp-8); }

  /* 顶栏：窄屏收起次级导航，只留站标 + 搜索 + CTA。
     搜索框必须可伸缩（flex + min-width:0）—— 固定 150px 时
     站标(174) + 搜索(150) + CTA(74) + 间距 会超出 390px 视口，
     把整页撑出 64px 横向滚动。站名也跟着收窄，空间不够就省略号。 */
  .head-in { gap: var(--sp-3); }
  .head-nav { display: none; }
  .head-search { flex: 1 1 auto; min-width: 0; width: auto; margin-left: auto; }
  .logo-mark { width: 28px; height: 28px; }
  .logo-sub { display: none; }
  .logo-name {
    display: block; max-width: 5.6em;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .head-cta { padding: 0 var(--sp-3); font-size: var(--fs-sm); }

  /* 首页：手机上标题再收一档，搜索占满宽，宫格两列 */
  .ix-top { padding: var(--sp-6) 0 var(--sp-4); }
  .ix-head h1 { font-size: var(--fs-3xl); }
  .ix-sub { font-size: var(--fs-base); }
  .ix-search { max-width: none; }
  .ix-search input, .ix-search button { height: 42px; }
  .ix-nums { gap: var(--sp-3); }
  .ix-nums b { font-size: var(--fs-md); }
  .ix-board { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); }

  /* 教程列表行：窄屏藏掉简介，标题和步骤数才是关键（一行也放不下三段） */
  .trow { padding: var(--sp-3); gap: var(--sp-2); }
  .trow-tag { display: none; }
  .trow-sum { display: none; }

  /* 品牌索引：标签列挪到上方，方块铺满整行 */
  .bidx-row { flex-direction: column; gap: var(--sp-2); }
  .bidx-k { width: auto; padding-top: 0; }
  .bidx { height: 30px; }

  .bgrid, .tgrid { grid-template-columns: 1fr; }
.foot-grid { grid-template-columns: 1fr; }
  .pager { grid-template-columns: 1fr; }

  .page-h1 { font-size: var(--fs-2xl); }
  .tut-head h1 { font-size: var(--fs-2xl); }
  .step { padding: var(--sp-4); gap: var(--sp-3); }
  .step-no { width: 30px; height: 30px; font-size: var(--fs-base); }
  .step-main h3 { font-size: var(--fs-md); }

  .brand-head { grid-template-columns: 1fr; gap: var(--sp-4); padding: var(--sp-5); }
  .brand-tile { width: 52px; height: 52px; font-size: var(--fs-xl); }
  .brand-meta h1 { font-size: var(--fs-xl); }
  .brand-cta { align-items: stretch; }
  .dl-row { justify-content: flex-start; }

  /* 榜单：手机上藏掉「评价数」列，品牌名和分数才是关键 */
  .rank-cnt, .rank thead th.rank-cnt { display: none; }
  .rank tbody td, .rank thead th { padding: var(--sp-3); }
  .rank-score b { font-size: var(--fs-md); }
  .rank-score .stars { display: none; }

  .rev-sum-box { grid-template-columns: 1fr; gap: var(--sp-5); padding: var(--sp-5); }
  .rev-big > b { font-size: var(--fs-4xl); }
  .rev-row { grid-template-columns: 1fr; gap: 0; }
  .rev-form { padding: var(--sp-5); }
  .rev-star { font-size: 32px; }

  .gb-card { padding: var(--sp-5); }
  .gb-row { flex-direction: column; }
  .gb-foot { flex-direction: column-reverse; align-items: stretch; }
  .gb-count { text-align: right; }

  .about-card, .about-terms { padding: var(--sp-5); }

  /* 品牌卡：手机上评分位从右侧移到名称下方，否则简介被挤没 */
  .bcard { flex-wrap: wrap; gap: var(--sp-3); }
  .bc-score {
    width: auto; flex-direction: row; align-items: center;
    gap: var(--sp-2); text-align: left;
  }
  .bc-score b { font-size: var(--fs-lg); }
  .bc-score em { margin-left: var(--sp-1); }

  .ph-bar { padding: var(--sp-4); }
  .ph-label { min-width: auto; width: 100%; }
  .ph-search { margin-left: 0; width: 100%; }
}

/* ==========================================================================
   ⑧ Dark —— 跟随系统
   原则：不是简单反色，而是把「面」的层级重排 ——
   深色下靠亮度差分层（越靠前的面越亮），浅色下靠阴影分层。
   ========================================================================== */

@media (prefers-color-scheme: dark) {
  :root {
    --gray-0: #1a1a1a;   /* 卡片面：最亮 */
    --gray-1: #121212;   /* 页面底 */
    --gray-2: #222222;   /* 次级面 */
    --gray-3: #2d2d2d;   /* 分隔线 */
    --gray-4: #3b3b3b;   /* 强边 */
    --gray-5: #626262;   /* 禁用 */
    --gray-6: #8d8d8d;   /* 次要文字 */
    --gray-7: #afafaf;   /* 正文次要 */
    --gray-8: #d9d9d9;   /* 正文 */
    --gray-9: #f1f1f1;   /* 标题 */
    --gray-10: #090909;

    --accent: #292929;
    --accent-hi: #2f2f2f;
    --accent-lo: #323232;
    --accent-soft: rgba(41, 41, 41, .14);
    --accent-line: rgba(41, 41, 41, .34);
    --accent-ink: #e4e4e4;

    --star: #bbbbbb;
    --ok: #a7a7a7;
    --ok-soft: rgba(167, 167, 167, .12);
    --warn: #bfbfbf;
    --warn-soft: rgba(191, 191, 191, .1);
    --warn-line: rgba(191, 191, 191, .3);
    --err: #f87171;

    /* 深色下阴影几乎不可见，改用边框与亮度分层 */
    --sh-1: none;
    --sh-2: 0 1px 3px rgba(0, 0, 0, .3);
    --sh-3: 0 8px 30px rgba(0, 0, 0, .5);
  }

  .site-head { background: rgba(18, 18, 18, .85); }
  .ix-search input:focus { box-shadow: 0 0 0 4px rgba(41, 41, 41, .16); }
  .btn-solid:hover { box-shadow: none; }
  .logo-mark { background: var(--accent); color: #121212; }
  .rank-no-top { color: #121212; }
  .step-no { color: #121212; }
  .brand-tile { color: #121212; }
  .vbox-badge { color: #121212; }
  .tag-uni { color: #121212; }
  .rev-badge { color: #121212; }
  .head-cta { color: #121212 !important; }
  .gb-btn { color: #121212; }
  .ix-search button { color: #121212; }
  /* 深色下 --accent 是浅靛蓝，白字压不住，换成深字（同 .logo-mark 的处理） */
  .bidx-own:hover { color: #121212; }
  ::selection { background: rgba(41, 41, 41, .3); color: #f1f1f1; }
}

/* ==========================================================================
   ⑩ Wallpaper & Skin —— 壁纸与画风
   --------------------------------------------------------------------------
   两个正交的维度，都挂在 <html> 的 data 属性上，靠 CSS 全量切换：

     data-wall="plain|sky|night|candy|forest|sunset|mint"   背景场景
     data-skin="plain|cartoon"                              画风（材质）

   为什么用纯 CSS 画壁纸、不引图片：
     · 零请求 —— 壁纸是每个页面都要加载的东西，7 张图就是 7 个请求
     · 零版权风险 —— 卡通素材的授权是笔糊涂账，自己用渐变画没有这个问题
     · 任何分辨率都清晰，深色模式与「减弱动效」也能各自适配

   面板透明度：有壁纸时，白底卡片换成半透明白 + 毛玻璃，
   否则一整块纯白会把背景压死，等于没换壁纸。
   ========================================================================== */

/* ---------- 壁纸场景（画在 body::before 上，固定在视口） ---------- */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: -1;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: cover;
}

/* 蓝天白云：一段天蓝渐变 + 三朵云 + 一个太阳 */
html[data-wall="sky"] body::before {
  background-image:
    radial-gradient(circle at 82% 14%, #f3f3f3 0 46px, rgba(243, 243, 243,.45) 46px 68px, transparent 68px),
    radial-gradient(ellipse 90px 34px at 16% 22%, #fff 0 60%, transparent 62%),
    radial-gradient(ellipse 66px 26px at 26% 20%, #fff 0 60%, transparent 62%),
    radial-gradient(ellipse 120px 44px at 74% 34%, rgba(255,255,255,.92) 0 60%, transparent 62%),
    radial-gradient(ellipse 80px 30px at 88% 30%, rgba(255,255,255,.9) 0 60%, transparent 62%),
    radial-gradient(ellipse 150px 54px at 40% 68%, rgba(255,255,255,.75) 0 60%, transparent 62%),
    linear-gradient(180deg, #c4c4c4 0%, #dedede 46%, #f3f3f3 100%);
}

/* 星空月亮：深蓝渐变 + 月晕 + 一片星点 */
html[data-wall="night"] body::before {
  background-image:
    radial-gradient(circle at 78% 16%, #f5f5f5 0 34px, rgba(245, 245, 245,.28) 34px 58px, transparent 58px),
    radial-gradient(circle at 20% 18%, #fff 0 1.6px, transparent 2px),
    radial-gradient(circle at 34% 30%, #fff 0 1.3px, transparent 2px),
    radial-gradient(circle at 12% 40%, #fff 0 1.5px, transparent 2px),
    radial-gradient(circle at 46% 12%, #fff 0 1.2px, transparent 2px),
    radial-gradient(circle at 60% 26%, #fff 0 1.6px, transparent 2px),
    radial-gradient(circle at 88% 40%, #fff 0 1.3px, transparent 2px),
    radial-gradient(circle at 28% 56%, rgba(255,255,255,.8) 0 1.4px, transparent 2px),
    radial-gradient(circle at 70% 54%, rgba(255,255,255,.75) 0 1.2px, transparent 2px),
    radial-gradient(circle at 52% 74%, rgba(255,255,255,.7) 0 1.5px, transparent 2px),
    radial-gradient(circle at 16% 78%, rgba(255,255,255,.6) 0 1.2px, transparent 2px),
    radial-gradient(circle at 84% 72%, rgba(255,255,255,.6) 0 1.4px, transparent 2px),
    linear-gradient(180deg, #0c0c0c 0%, #111111 45%, #515151 100%);
}

/* 糖果甜心：粉紫渐变 + 几颗糖豆 */
html[data-wall="candy"] body::before {
  background-image:
    radial-gradient(circle at 14% 24%, #e1e1e1 0 56px, transparent 58px),
    radial-gradient(circle at 86% 20%, #d9d9d9 0 46px, transparent 48px),
    radial-gradient(circle at 74% 62%, #e3e3e3 0 40px, transparent 42px),
    radial-gradient(circle at 22% 74%, #e6e6e6 0 50px, transparent 52px),
    radial-gradient(circle at 50% 40%, rgba(255,255,255,.5) 0 90px, transparent 92px),
    linear-gradient(160deg, #efefef 0%, #ececec 52%, #efefef 100%);
}

/* 森林小径：绿色渐变 + 三棵三角树 + 地面 */
html[data-wall="forest"] body::before {
  background-image:
    radial-gradient(ellipse 200px 60px at 50% 100%, #c6c6c6 0 60%, transparent 62%),
    radial-gradient(ellipse 120px 40px at 20% 96%, #b3b3b3 0 60%, transparent 62%),
    radial-gradient(ellipse 140px 46px at 82% 97%, #b3b3b3 0 60%, transparent 62%),
    conic-gradient(from 180deg at 50% 100%, transparent 0 25%, #282828 25% 75%, transparent 75%),
    conic-gradient(from 180deg at 50% 100%, transparent 0 25%, #2d2d2d 25% 75%, transparent 75%),
    conic-gradient(from 180deg at 50% 100%, transparent 0 25%, #232323 25% 75%, transparent 75%),
    linear-gradient(180deg, #e7e7e7 0%, #eeeeee 58%, #e2e2e2 100%);
  background-size: 100% 100%, 100% 100%, 100% 100%, 150px 210px, 190px 260px, 120px 170px, 100% 100%;
  background-position: 0 0, 0 0, 0 0, 12% 100%, 50% 100%, 84% 100%, 0 0;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
}

/* 黄昏橘子：日落渐变 + 低垂的太阳 */
html[data-wall="sunset"] body::before {
  background-image:
    radial-gradient(circle at 50% 88%, #ededed 0 62px, rgba(216, 216, 216,.5) 62px 92px, transparent 92px),
    radial-gradient(ellipse 220px 70px at 22% 30%, rgba(255,255,255,.28) 0 60%, transparent 62%),
    radial-gradient(ellipse 260px 80px at 78% 22%, rgba(255,255,255,.22) 0 60%, transparent 62%),
    linear-gradient(180deg, #1c1c1c 0%, #292929 34%, #a7a7a7 64%, #d0d0d0 100%);
}

/* 薄荷清凉：青绿渐变 + 气泡 */
html[data-wall="mint"] body::before {
  background-image:
    radial-gradient(circle at 18% 26%, rgba(255,255,255,.75) 0 44px, transparent 46px),
    radial-gradient(circle at 80% 18%, rgba(255,255,255,.6) 0 30px, transparent 32px),
    radial-gradient(circle at 68% 66%, rgba(255,255,255,.5) 0 56px, transparent 58px),
    radial-gradient(circle at 28% 80%, rgba(255,255,255,.45) 0 36px, transparent 38px),
    linear-gradient(160deg, #f1f1f1 0%, #e3e3e3 48%, #eaeaea 100%);
}

/* ---------- 有壁纸时：面板换半透明白 + 毛玻璃 ---------- */
/* 不用纯白，否则整页白块把背景压死，等于没换壁纸 */
html:is([data-wall]:not([data-wall="plain"]), [data-wall-img]) {
  --gray-0: rgba(255, 255, 255, .82);
  --gray-1: rgba(255, 255, 255, .55);
  --gray-2: rgba(255, 255, 255, .62);
  --gray-3: rgba(45, 45, 45, .22);
  --gray-4: rgba(45, 45, 45, .34);
}
html:is([data-wall]:not([data-wall="plain"]), [data-wall-img]) body { background: transparent; }
html:is([data-wall]:not([data-wall="plain"]), [data-wall-img]) .site-head {
  background: rgba(255, 255, 255, .72);
}
/* 卡片类统一加模糊，保证叠在花纹上也读得清 */
html:is([data-wall]:not([data-wall="plain"]), [data-wall-img]) .ix-side-card,
html:is([data-wall]:not([data-wall="plain"]), [data-wall-img]) .ix-board-item,
html:is([data-wall]:not([data-wall="plain"]), [data-wall-img]) .bcard,
html:is([data-wall]:not([data-wall="plain"]), [data-wall-img]) .tcard,
html:is([data-wall]:not([data-wall="plain"]), [data-wall-img]) .tlist,
html:is([data-wall]:not([data-wall="plain"]), [data-wall-img]) .trow,
html:is([data-wall]:not([data-wall="plain"]), [data-wall-img]) .bcard-mini,
html:is([data-wall]:not([data-wall="plain"]), [data-wall-img]) .gb-card,
html:is([data-wall]:not([data-wall="plain"]), [data-wall-img]) .rev-form,
html:is([data-wall]:not([data-wall="plain"]), [data-wall-img]) .rev-sum-box,
html:is([data-wall]:not([data-wall="plain"]), [data-wall-img]) .rank-wrap,
html:is([data-wall]:not([data-wall="plain"]), [data-wall-img]) .brand-head,
html:is([data-wall]:not([data-wall="plain"]), [data-wall-img]) .step,
html:is([data-wall]:not([data-wall="plain"]), [data-wall-img]) .tut-toc,
html:is([data-wall]:not([data-wall="plain"]), [data-wall-img]) .uni-card,
html:is([data-wall]:not([data-wall="plain"]), [data-wall-img]) .about-card,
html:is([data-wall]:not([data-wall="plain"]), [data-wall-img]) .about-terms,
html:is([data-wall]:not([data-wall="plain"]), [data-wall-img]) .page-svc,
html:is([data-wall]:not([data-wall="plain"]), [data-wall-img]) .svc-card,
html:is([data-wall]:not([data-wall="plain"]), [data-wall-img]) .ph-bar,
html:is([data-wall]:not([data-wall="plain"]), [data-wall-img]) .bidx,
html:is([data-wall]:not([data-wall="plain"]), [data-wall-img]) .nf-links .bcard-mini,
html:is([data-wall]:not([data-wall="plain"]), [data-wall-img]) .ix-line-empty,
html:is([data-wall]:not([data-wall="plain"]), [data-wall-img]) .ph-empty {
  backdrop-filter: saturate(150%) blur(10px);
  -webkit-backdrop-filter: saturate(150%) blur(10px);
}
/* 深色模式 + 壁纸：面板换成暗色半透明 */
@media (prefers-color-scheme: dark) {
  html:is([data-wall]:not([data-wall="plain"]), [data-wall-img]) {
    --gray-0: rgba(26, 26, 26, .78);
    --gray-1: rgba(18, 18, 18, .55);
    --gray-2: rgba(34, 34, 34, .62);
    --gray-3: rgba(45, 45, 45, .2);
    --gray-4: rgba(45, 45, 45, .32);
  }
  html:is([data-wall]:not([data-wall="plain"]), [data-wall-img]) .site-head {
    background: rgba(18, 18, 18, .72);
  }
}

/* ---------- 卡通画风：把「面」的材质整套换掉 ----------
   原则不是加花纹，而是换材质：圆角更大、描边更粗、投影变成实心错位（漫画感）。
   只覆盖 token 与组件材质，不动任何结构 —— 所以可以随时切回「简约」。 */
html[data-skin="cartoon"] {
  --r-xs: 10px;
  --r-sm: 14px;
  --r-md: 20px;
  --r-lg: 26px;

  --gray-1: #f6f6f6;
  --gray-2: #eeeeee;
  --gray-3: #dddddd;
  --gray-4: #c7c7c7;
  --gray-6: #828282;
  --gray-7: #595959;
  --gray-8: #111111;
  --gray-9: #0c0c0c;

  --accent: #252525;
  --accent-hi: #1f1f1f;
  --accent-soft: #ececec;
  --accent-line: #cacaca;
  --accent-ink: #0e0e0e;

  --star: #b7b7b7;
  --ok: #232323;
  --ok-soft: #f0f0f0;
  --warn: #1f1f1f;
  --warn-soft: #f0f0f0;
  --warn-line: #c6c6c6;
  --err: #dc2626;

  /* 漫画式投影：实心错位，不用模糊 */
  --sh-1: 2px 2px 0 rgba(12, 12, 12, .12);
  --sh-2: 3px 3px 0 rgba(12, 12, 12, .16);
  --sh-3: 5px 5px 0 rgba(12, 12, 12, .18);
}

/* 描边加粗：逐个组件点名，因为 border-width 没有走 token */
html[data-skin="cartoon"] .site-head,
html[data-skin="cartoon"] .ix-board-item,
html[data-skin="cartoon"] .ix-side-card,
html[data-skin="cartoon"] .bcard,
html[data-skin="cartoon"] .tcard,
html[data-skin="cartoon"] .tlist,
html[data-skin="cartoon"] .bcard-mini,
html[data-skin="cartoon"] .gb-card,
html[data-skin="cartoon"] .rev-form,
html[data-skin="cartoon"] .rev-sum-box,
html[data-skin="cartoon"] .rank-wrap,
html[data-skin="cartoon"] .brand-head,
html[data-skin="cartoon"] .step,
html[data-skin="cartoon"] .tut-toc,
html[data-skin="cartoon"] .uni-card,
html[data-skin="cartoon"] .about-card,
html[data-skin="cartoon"] .about-terms,
html[data-skin="cartoon"] .page-svc,
html[data-skin="cartoon"] .svc-card,
html[data-skin="cartoon"] .ph-bar,
html[data-skin="cartoon"] .bidx,
html[data-skin="cartoon"] .nf-links .bcard-mini,
html[data-skin="cartoon"] .vbox,
html[data-skin="cartoon"] .head-search input,
html[data-skin="cartoon"] .ix-search input,
html[data-skin="cartoon"] .gb-in,
html[data-skin="cartoon"] .gb-ta,
html[data-skin="cartoon"] .ph-search {
  border-width: 2px;
  border-color: var(--gray-4);
}

/* 卡片悬停：上浮 + 实心投影，像贴纸翘起来 */
html[data-skin="cartoon"] .bcard:hover,
html[data-skin="cartoon"] .tcard:hover,
html[data-skin="cartoon"] .ix-board-item:hover,
html[data-skin="cartoon"] .bcard-mini:hover,
html[data-skin="cartoon"] .bidx:hover {
  transform: translate(-1px, -2px);
  box-shadow: var(--sh-2);
}
html[data-skin="cartoon"] .bcard,
html[data-skin="cartoon"] .tcard,
html[data-skin="cartoon"] .ix-board-item,
html[data-skin="cartoon"] .bidx { transition: all var(--t-base) var(--ease); }

/* 标题：加粗一档 + 微收紧，卡通标题要「实」 */
html[data-skin="cartoon"] h1,
html[data-skin="cartoon"] h2,
html[data-skin="cartoon"] h3,
html[data-skin="cartoon"] h4,
html[data-skin="cartoon"] .logo-name { font-weight: 800; letter-spacing: -.02em; }

/* 按钮：加大圆角 + 描边 + 实心投影，按下时「压扁」 */
html[data-skin="cartoon"] .btn,
html[data-skin="cartoon"] .gb-btn,
html[data-skin="cartoon"] .ix-search button,
html[data-skin="cartoon"] .hero-search button,
html[data-skin="cartoon"] .head-cta,
html[data-skin="cartoon"] .rev-submit {
  border-radius: var(--r-full);
  border: 2px solid var(--accent-ink);
  box-shadow: var(--sh-1);
  font-weight: 700;
}
html[data-skin="cartoon"] .btn-solid,
html[data-skin="cartoon"] .gb-btn,
html[data-skin="cartoon"] .ix-search button,
html[data-skin="cartoon"] .hero-search button,
html[data-skin="cartoon"] .head-cta {
  border-color: rgba(14, 14, 14, .55);
}
html[data-skin="cartoon"] .btn:active,
html[data-skin="cartoon"] .gb-btn:active,
html[data-skin="cartoon"] .head-cta:active { transform: translate(2px, 2px); box-shadow: none; }
html[data-skin="cartoon"] .btn-solid:hover,
html[data-skin="cartoon"] .ix-search button:hover,
html[data-skin="cartoon"] .hero-search button:hover { box-shadow: var(--sh-2); }

/* 图标位（站标 / 品牌首字 / 序号 / 播放键）：圆形 + 描边，更像卡通徽章 */
html[data-skin="cartoon"] .logo-mark,
html[data-skin="cartoon"] .bcard-tile,
html[data-skin="cartoon"] .brand-tile,
html[data-skin="cartoon"] .step-no,
html[data-skin="cartoon"] .rank-no,
html[data-skin="cartoon"] .vbox-play-icon,
html[data-skin="cartoon"] .bcard-mini .dot,
html[data-skin="cartoon"] .uni-steps .n {
  border-radius: var(--r-full);
  border: 2px solid rgba(14, 14, 14, .35);
}
html[data-skin="cartoon"] .step-no,
html[data-skin="cartoon"] .rank-no { box-shadow: var(--sh-1); }

/* 标签 / 胶囊：描边 + 更圆 */
html[data-skin="cartoon"] .tag,
html[data-skin="cartoon"] .bdg,
html[data-skin="cartoon"] .chip,
html[data-skin="cartoon"] .vbox-badge,
html[data-skin="cartoon"] .rev-badge {
  border-radius: var(--r-full);
  font-weight: 700;
}
html[data-skin="cartoon"] .tag,
html[data-skin="cartoon"] .bdg {
  border: 1.5px solid rgba(14, 14, 14, .18);
}

/* 区块小标题左侧的竖条：换成小方块，圆一点 */
html[data-skin="cartoon"] .ix-block-h h2::before,
html[data-skin="cartoon"] .group-h::before {
  width: 12px; height: 12px; border-radius: 4px;
}

/* 教程列表行：整条圆角，行间留白，像一张张贴纸 */
html[data-skin="cartoon"] .tlist { border-radius: var(--r-md); }
html[data-skin="cartoon"] .trow:last-child { border-bottom: 0; }

/* 页脚：卡通底换浅色而不是近黑 */
html[data-skin="cartoon"] .site-foot {
  background: #f3f3f3;
  border-top: 2px solid var(--gray-3);
}

/* ---------- 壁纸选择面板 ---------- */
.wbtn {
  position: fixed; right: var(--sp-5); bottom: calc(var(--sp-5) + 52px); z-index: 55;
  width: 42px; height: 42px; border-radius: var(--r-full);
  display: grid; place-items: center;
  background: var(--gray-0); color: var(--gray-7);
  border: 1px solid var(--gray-3); box-shadow: var(--sh-2);
  cursor: pointer; font-size: 19px; line-height: 1;
  transition: transform var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.wbtn:hover { color: var(--accent); transform: rotate(-12deg) scale(1.06); }

.wpanel {
  position: fixed; right: var(--sp-5); bottom: calc(var(--sp-5) + 104px); z-index: 56;
  width: 340px; max-width: calc(100vw - var(--sp-5) * 2);
  max-height: min(76vh, 620px); overflow-y: auto;
  padding: var(--sp-5);
  background: var(--gray-0); border: 1px solid var(--gray-3);
  border-radius: var(--r-md); box-shadow: var(--sh-3);
}
.wp-h { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.wp-h b { font-size: var(--fs-md); color: var(--gray-9); }
.wp-x {
  width: 26px; height: 26px; flex: none; border: 0; border-radius: var(--r-xs);
  background: var(--gray-2); color: var(--gray-7);
  font-size: 17px; line-height: 1; cursor: pointer;
}
.wp-x:hover { background: var(--gray-3); color: var(--gray-9); }
.wp-sub { margin-top: var(--sp-2); font-size: var(--fs-sm); color: var(--gray-6); line-height: 1.7; }
.wp-sec {
  margin: var(--sp-5) 0 var(--sp-3);
  font-size: var(--fs-xs); font-weight: 700; color: var(--gray-5);
  letter-spacing: .06em;
}
.wp-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-2); }
.wp-i {
  position: relative; padding: 0;
  border: 1px solid var(--gray-3); border-radius: var(--r-sm);
  background: var(--gray-1); cursor: pointer; overflow: hidden;
  transition: border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.wp-i:hover { border-color: var(--accent-line); transform: translateY(-1px); }
/* 选中：描边 + 角标勾，靠外圈颜色一眼看出选的是哪个 */
.wp-i.on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.wp-i.on::after {
  content: '✓'; position: absolute; top: 3px; right: 3px;
  width: 15px; height: 15px; border-radius: var(--r-full);
  display: grid; place-items: center;
  background: var(--accent); color: #fff; font-size: 10px; font-weight: 700;
}
/* 预览块：真实还原壁纸配色（比小图标更能说明「选它长什么样」） */
.wp-c { display: block; height: 46px; }
.wp-n {
  display: block; padding: 5px 2px 6px;
  font-size: var(--fs-xs); color: var(--gray-7); text-align: center;
  background: var(--gray-0);
}
.wp-i.on .wp-n { color: var(--accent); font-weight: 700; }
/* 画风那两个不是壁纸，用文字按钮而不是预览块 */
.wp-row-skin { grid-template-columns: repeat(2, 1fr); }
.wp-row-skin .wp-i { padding: var(--sp-3); }
.wp-row-skin .wp-n { background: none; padding: 0; font-size: var(--fs-sm); }

/* 各壁纸的缩略预览（与上面场景同一套渐变，缩到 46px 高） */
.wp-c-plain { background: linear-gradient(160deg, #fff, #f1f1f1); }
.wp-c-sky {
  background:
    radial-gradient(circle at 78% 24%, #f3f3f3 0 7px, transparent 8px),
    radial-gradient(ellipse 16px 7px at 34% 30%, #fff 0 60%, transparent 62%),
    linear-gradient(180deg, #c4c4c4, #f3f3f3);
}
.wp-c-night {
  background:
    radial-gradient(circle at 76% 26%, #f5f5f5 0 6px, rgba(245, 245, 245,.3) 6px 11px, transparent 12px),
    radial-gradient(circle at 24% 34%, #fff 0 1.4px, transparent 2px),
    radial-gradient(circle at 44% 22%, #fff 0 1.2px, transparent 2px),
    radial-gradient(circle at 60% 56%, rgba(255,255,255,.8) 0 1.3px, transparent 2px),
    linear-gradient(180deg, #0c0c0c, #515151);
}
.wp-c-candy {
  background:
    radial-gradient(circle at 22% 34%, #e1e1e1 0 13px, transparent 14px),
    radial-gradient(circle at 76% 60%, #e3e3e3 0 10px, transparent 11px),
    linear-gradient(160deg, #efefef, #efefef);
}
.wp-c-forest {
  background:
    conic-gradient(from 180deg at 50% 100%, transparent 0 25%, #282828 25% 75%, transparent 75%) 50% 100% / 34px 40px no-repeat,
    conic-gradient(from 180deg at 50% 100%, transparent 0 25%, #232323 25% 75%, transparent 75%) 18% 100% / 26px 30px no-repeat,
    linear-gradient(180deg, #e7e7e7 0%, #eeeeee 70%, #e2e2e2 100%);
}
.wp-c-sunset {
  background:
    radial-gradient(circle at 50% 88%, #ededed 0 12px, rgba(216, 216, 216,.5) 12px 19px, transparent 20px),
    linear-gradient(180deg, #1c1c1c, #292929 34%, #a7a7a7 64%, #d0d0d0);
}
.wp-c-mint {
  background:
    radial-gradient(circle at 26% 36%, rgba(255,255,255,.8) 0 11px, transparent 12px),
    radial-gradient(circle at 74% 66%, rgba(255,255,255,.55) 0 8px, transparent 9px),
    linear-gradient(160deg, #f1f1f1, #e3e3e3 48%, #eaeaea);
}

.wp-foot {
  display: flex; align-items: center; gap: var(--sp-3);
  margin-top: var(--sp-5); padding-top: var(--sp-4);
  border-top: 1px solid var(--gray-2);
}
.wp-reset {
  flex: none; height: 30px; padding: 0 var(--sp-3);
  border: 1px solid var(--gray-4); border-radius: var(--r-full);
  background: var(--gray-1); color: var(--gray-7);
  font-size: var(--fs-sm); cursor: pointer;
}
.wp-reset:hover { border-color: var(--accent); color: var(--accent); }
.wp-msg { font-size: var(--fs-xs); color: var(--gray-6); line-height: 1.5; }
.wp-msg.ok { color: var(--ok); }
.wp-msg.bad { color: var(--err); }

/* ---------- 自定义壁纸区（登录后上传，图要过审） ---------- */
.wp-mine { display: flex; flex-direction: column; gap: var(--sp-2); align-items: flex-start; }
.wp-tip { font-size: var(--fs-xs); color: var(--gray-6); line-height: 1.7; }
.wp-pick {
  height: 30px; padding: 0 var(--sp-4);
  border: 1px solid var(--accent-line); border-radius: var(--r-full);
  background: var(--accent-soft); color: var(--accent);
  font-size: var(--fs-sm); font-weight: 600; cursor: pointer;
}
.wp-pick:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.wp-pick[disabled] { opacity: .55; cursor: not-allowed; }

/* 登录表单：三个输入框竖排，按钮一行 */
.wp-lg { display: flex; flex-direction: column; gap: var(--sp-2); width: 100%; margin-top: var(--sp-2); }
.wp-in {
  width: 100%; height: 34px; padding: 0 var(--sp-3);
  border: 1px solid var(--gray-4); border-radius: var(--r-sm);
  background: var(--gray-0); color: var(--gray-9); font-size: var(--fs-sm);
}
.wp-in:focus { outline: none; border-color: var(--accent); }
.wp-lg-row { display: flex; align-items: center; gap: var(--sp-3); }
.wp-go {
  height: 34px; padding: 0 var(--sp-4); flex: none;
  border: 0; border-radius: var(--r-full);
  background: var(--accent); color: #fff;
  font-size: var(--fs-sm); font-weight: 600; cursor: pointer;
}
.wp-go:hover { background: var(--accent-hi); }
.wp-go[disabled] { opacity: .55; cursor: not-allowed; }
.wp-link {
  padding: 0; border: 0; background: none;
  color: var(--accent); font-size: var(--fs-xs); cursor: pointer;
}
.wp-link:hover { text-decoration: underline; }
.wp-out { display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-2); }

/* ---------- 用户自定义壁纸的铺图层 ----------
   分两层，顺序不能反：先铺用户的图（::before），再压可读性蒙版（::after）。
   蒙版在上、图在下，所以图还能看清，而文字始终压在最上面。 */
html[data-wall-img] body::before {
  background-image: var(--wall-img);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* ---------- 可读性蒙版（所有非纯色壁纸统一走这一层） ----------
   为什么需要它：站点的 UI 是浅色主题（白卡片 + 深灰字）。
   一旦背景换成深色壁纸（星空、黄昏），直接压在背景上的那些文字
   —— 首屏大标题、数据条、区段小标题、页脚声明 —— 就会变成深字压深底，
   几乎读不出来。给每个元素单独兜底既琐碎又必然漏。

   蒙版要「够白」而不是「半灰」：这儿的关键是文字色是按近白底调的，
   背景一旦变成中灰（比如 rgb(202, 202, 202)，实测星空壁纸就是），
   次级文字立刻掉到 1.9 的对比度。所以深色壁纸的蒙版给到 .88 以上，
   让底子回到接近白，壁纸只留一层色调。
   想保住通透感的浅色壁纸用 .62 左右 —— 它们本身就亮，压多了发灰。
   各档数值是量出来的（见下面 --scrim-* 的注释），不是拍的。 */
html:is([data-wall]:not([data-wall="plain"]), [data-wall-img]) body::after {
  content: '';
  position: fixed; inset: 0; z-index: -1;
  pointer-events: none;
  background: rgba(255, 255, 255, var(--scrim, .62));
}

/* 各壁纸的蒙版强度。
   取舍：蒙版越强越可读，但壁纸也越看不见 —— 压到 .9 以上就等于没换壁纸。
   所以这里把蒙版控制在「壁纸看得出来」的档位，可读性交给下面两块内容画布来兜。 */
html[data-wall="sky"] { --scrim: .52; }
html[data-wall="candy"] { --scrim: .50; }
html[data-wall="forest"] { --scrim: .58; }
html[data-wall="mint"] { --scrim: .50; }
html[data-wall="night"] { --scrim: .58; }
html[data-wall="sunset"] { --scrim: .58; }
/* 用户自定义的图什么颜色都有可能，取保守值 */
html[data-wall-img] { --scrim: .62; }

/* ---------- 内容画布 ----------
   有了壁纸之后，光靠蒙版是两难：压狠了壁纸看不见，压轻了文字读不清。
   所以把「可读性」这件事交给内容自己的半透明画布来保证 ——
   壁纸从画布四周和半透明里透出来（观感是「有底的纸」而不是「糊了一层白」），
   而正文永远有个稳定的面。

   画布只盖「没有卡片底的裸文字区」：双栏主体、全部品牌区、首屏。
   卡片本身已经有底色，不用再包一层。 */
html:is([data-wall]:not([data-wall="plain"]), [data-wall-img]) .ix-body,
html:is([data-wall]:not([data-wall="plain"]), [data-wall-img]) .ix-brand-sec,
html:is([data-wall]:not([data-wall="plain"]), [data-wall-img]) .ix-top {
  background: rgba(255, 255, 255, .52);
  backdrop-filter: saturate(150%) blur(12px);
  -webkit-backdrop-filter: saturate(150%) blur(12px);
  border-radius: var(--r-lg);
}
html:is([data-wall]:not([data-wall="plain"]), [data-wall-img]) .ix-top {
  padding-left: var(--sp-5);
  padding-right: var(--sp-5);
}
html:is([data-wall]:not([data-wall="plain"]), [data-wall-img]) .ix-body,
html:is([data-wall]:not([data-wall="plain"]), [data-wall-img]) .ix-brand-sec {
  padding: var(--sp-5);
  margin-top: var(--sp-5);
}

/* 有壁纸时把次级文字调深一档。
   原因：--gray-6 在中灰底上只有 1.9 的对比度（白底上是 3.2），
   壁纸把底子从纯白拉到浅灰后，这一档必须补回来。 */
html:is([data-wall]:not([data-wall="plain"]), [data-wall-img]) {
  --gray-5: #838383;   /* 页脚声明等小字 */
  --gray-6: #646464;   /* 副标题、说明文字 */
  --gray-7: #4f4f4f;
}

@media (prefers-color-scheme: dark) {
  /* 深色模式下 UI 本身是深色，蒙版换成黑的，把背景压暗好让浅字读得出 */
  html:is([data-wall]:not([data-wall="plain"]), [data-wall-img]) body::after {
    background: rgba(9, 9, 9, var(--scrim-dark, .55));
  }
  html[data-wall="sky"] { --scrim-dark: .58; }
  html[data-wall="candy"] { --scrim-dark: .60; }
  html[data-wall="forest"] { --scrim-dark: .62; }
  html[data-wall="mint"] { --scrim-dark: .58; }
  /* 深色下星空壁纸本身就暗，蒙版轻一点，不然壁纸彻底没了 */
  html[data-wall="night"] { --scrim-dark: .34; }
  html[data-wall="sunset"] { --scrim-dark: .50; }
  html[data-wall-img] { --scrim-dark: .62; }

  /* 深色下次级文字要提亮（方向与浅色模式相反） */
  html:is([data-wall]:not([data-wall="plain"]), [data-wall-img]) {
    --gray-5: #747474;
    --gray-6: #9c9c9c;
    --gray-7: #bababa;
  }
  /* 深色下的内容画布换成深色半透明 */
  html:is([data-wall]:not([data-wall="plain"]), [data-wall-img]) .ix-body,
  html:is([data-wall]:not([data-wall="plain"]), [data-wall-img]) .ix-brand-sec,
  html:is([data-wall]:not([data-wall="plain"]), [data-wall-img]) .ix-top {
    background: rgba(18, 18, 18, .58);
  }
}

/* 卡通皮肤下的面板也跟着圆起来 */
html[data-skin="cartoon"] .wpanel { border-width: 2px; border-color: var(--gray-4); box-shadow: var(--sh-3); }
html[data-skin="cartoon"] .wbtn { border-width: 2px; border-color: var(--gray-4); }

/* 手机：面板贴底、按钮挪到不挡「回到顶部」的位置 */
@media (max-width: 720px) {
  .wbtn { right: var(--sp-4); bottom: calc(var(--sp-4) + 48px); width: 40px; height: 40px; font-size: 18px; }
  .wpanel {
    right: var(--sp-3); left: var(--sp-3); bottom: var(--sp-3);
    width: auto; max-width: none;
    max-height: 68vh; padding: var(--sp-4);
  }
  .wp-row { grid-template-columns: repeat(3, 1fr); }
  .wp-c { height: 40px; }
}

/* 打印时不出壁纸与面板 */
@media print {
  body::before, .wbtn, .wpanel { display: none !important; }
}

/* ==========================================================================
   ⑨ Motion —— 尊重系统的「减弱动效」
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* 打印：去掉导航与交互件，只留正文 */
@media print {
  .site-head, .site-foot, .rev-form, .gb-card, .vbox-play, #toTop, #readBar, .tut-toc { display: none; }
  body { background: #fff; }
  .step, .card, .tcard { border-color: #ccc; box-shadow: none; break-inside: avoid; }
}