/* 探验 · 全站公共层（WEB-R7 / 2026-10-08）
 * ------------------------------------------------------------------
 * 1) 设计稿 §1.1 配色 / §1.3 尺度 / §1.4 圆角 / §1.5 阴影 的**唯一定义处**
 *    —— 生效方式：同优先级后加载覆盖先加载。各页都把 nav.css 排在 tool.css**之后**，
 *       于是 tool.css 里旧的 --bg / --brand-soft / --t3 会被这里的规范值接管；
 *       首页 index.html 则把 nav.css 排在自己的 <style> 之后，同样由这里接管令牌。
 *       （六页/hall 页内另有一份同值 :root，属自包含写法，与本文件不冲突。）
 * 2) 统一顶栏（桌面行内 / <768px 汉堡菜单）
 * 3) 统一页脚
 * 4) 六页 + 大厅共用的轻量组件（卡片 / 网格 / 区块头 / 码位占位 / 空态）
 *
 * 红线：无外链资源（字体、图片、CDN 一律不用），无构建，纯 CSS。
 * 字体：沿用系统字体回退。
 */
:root {
  /* §1.1 配色 */
  --brand: #FF6B35;
  --brand-soft: #FFF0E8;
  --brand-deep: #E55A2B;
  --ink-warm: #2D2A26;          /* 辅色：深墨强调 */
  --ink: #1A1815;
  --t2: #6B6560;
  --t3: #A8A29C;                /* 占位文字：仅用于 placeholder，不用于正文 */
  --bg: #FAF8F5;
  --card: #FFFFFF;
  --line: #EAE6E1;
  --ok: #34C759;
  --warn: #FF9500;
  --err: #FF3B30;
  --link: #FF6B35;
  --link-hover: #E55A2B;

  /* §1.4 圆角 */
  --r-card: 20px;
  --r-btn: 28px;
  --r-input: 12px;
  --r-tag: 8px;
  --r-img: 12px;

  /* §1.5 阴影 */
  --sh-card: 0 2px 12px rgba(0, 0, 0, 0.06);
  --sh-card-hover: 0 8px 24px rgba(0, 0, 0, 0.10);
  --sh-float: 0 4px 20px rgba(255, 107, 53, 0.30);
  --sh-modal: 0 12px 48px rgba(0, 0, 0, 0.15);
  --sh-nav: 0 1px 8px rgba(0, 0, 0, 0.04);
  --sh-menu: 0 8px 24px rgba(0, 0, 0, 0.10);

  /* §1.3 尺度 */
  --w-max: 1200px;
  --pad-x: 24px;
  --h-nav: 64px;

  --font-ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}
@media (max-width: 767px) {
  :root { --pad-x: 16px; --h-nav: 56px; }
}

/* ══════════════════════════════════════════════════════════════
   1. 统一顶栏
   ══════════════════════════════════════════════════════════════ */
.nv-bar {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(250, 248, 245, 0.86);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
  transition: background .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.nv-bar.scrolled {
  background: rgba(255, 255, 255, 0.96);
  box-shadow: var(--sh-nav);
}
.nv-in {
  max-width: var(--w-max);
  margin: 0 auto;
  padding: 0 var(--pad-x);
  height: var(--h-nav);
  display: flex;
  align-items: center;
  gap: 20px;
}
.nv-logo {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  flex: 0 0 auto;
  color: var(--ink);
  text-decoration: none;
}
.nv-logo__mark {
  width: 28px; height: 28px; border-radius: 9px;
  background: var(--brand); color: #fff;
  font-size: 15px; font-weight: 800; line-height: 28px; text-align: center;
}
.nv-logo__txt { font-size: 17px; font-weight: 800; letter-spacing: -.3px; }
.nv-menu { display: flex; align-items: center; gap: 2px; flex: 1 1 auto; }
.nv-menu a {
  position: relative;
  display: inline-block;
  padding: 8px 12px;
  font-size: 15px;                       /* §1.2 导航 15px */
  color: var(--t2);
  text-decoration: none;
  border-radius: 9px;
  transition: color .15s ease, background .15s ease;
}
.nv-menu a:hover { color: var(--ink); background: rgba(26, 24, 21, 0.045); }
.nv-menu a.is-on { color: var(--brand-deep); font-weight: 700; }
.nv-menu a.is-on::after {          /* 当前页：主色下划线 */
  content: "";
  position: absolute;
  left: 12px; right: 12px; bottom: 0;
  height: 2.5px; border-radius: 2px;
  background: var(--brand);
}
.nv-right { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.nv-login {
  display: inline-flex; align-items: center; justify-content: center;
  height: 38px; padding: 0 20px;
  border-radius: var(--r-btn);
  background: var(--brand); color: #fff;
  font-size: 14px; font-weight: 700;
  text-decoration: none;
  transition: background .15s ease, transform .12s ease;
}
.nv-login:hover { background: var(--brand-deep); }
.nv-login:active { transform: scale(.97); }

/* 登录后：头像 + 下拉 */
.nv-acct { position: relative; }
.nv-avatar {
  display: inline-flex; align-items: center; gap: 8px;
  height: 38px; padding: 0 12px 0 6px;
  border: 1px solid var(--line); border-radius: var(--r-btn);
  background: var(--card); color: var(--ink);
  font: inherit; font-size: 13.5px; font-weight: 600;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.nv-avatar:hover { border-color: #DCD6CF; box-shadow: var(--sh-card); }
.nv-avatar__c {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--brand-soft); color: var(--brand-deep);
  font-size: 13px; font-weight: 800; line-height: 26px; text-align: center;
}
.nv-drop {
  position: absolute; right: 0; top: calc(100% + 8px);
  min-width: 208px;
  padding: 8px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--sh-menu);
  display: none;
}
.nv-drop.is-open { display: block; }
.nv-drop__who {
  padding: 8px 10px 10px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 6px;
  font-size: 12px; color: var(--t2); line-height: 1.6;
}
.nv-drop__who b { display: block; font-size: 13.5px; color: var(--ink); }
.nv-drop a, .nv-drop button {
  display: block; width: 100%;
  padding: 9px 10px;
  border: 0; border-radius: 9px; background: transparent;
  font: inherit; font-size: 13.5px; color: var(--t2); text-align: left;
  text-decoration: none; cursor: pointer;
}
.nv-drop a:hover, .nv-drop button:hover { background: var(--brand-soft); color: var(--brand-deep); }

/* 汉堡（<768px 才出现） */
.nv-burger {
  display: none;
  width: 40px; height: 38px;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--card); cursor: pointer;
  padding: 0; line-height: 1;
}
.nv-burger i {
  display: block; width: 18px; height: 2px; margin: 4px auto;
  border-radius: 2px; background: var(--ink);
}

/* 跳过导航（无障碍） */
.nv-skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--card); color: var(--ink);
  padding: 10px 16px; border-radius: 0 0 12px 0; font-size: 14px; z-index: 99;
}
.nv-skip:focus { left: 0; }

@media (max-width: 767px) {          /* <768px：导航收成汉堡菜单 */
  .nv-menu {
    position: absolute; left: var(--pad-x); right: var(--pad-x);
    top: calc(100% + 8px);
    display: none;
    flex-direction: column; align-items: stretch; gap: 2px;
    padding: 10px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: var(--sh-menu);
  }
  .nv-menu.is-open { display: flex; }
  .nv-menu a { padding: 12px 12px; font-size: 16px; }
  .nv-menu a.is-on::after { left: 12px; right: auto; width: 22px; bottom: 6px; }
  .nv-burger { display: block; }
}

/* 首页例外：hero 是深色满屏，顶栏改为**浮在 hero 之上**（fixed），
   未滚动时透明 + 白字，滚动后回到白底（§2.1「滚动时背景变白」）。 */
#site-nav[data-nav-theme="hero"] .nv-bar { position: fixed; left: 0; right: 0; top: 0; }
#site-nav[data-nav-theme="hero"] .nv-bar:not(.scrolled) {
  background: transparent;
  border-bottom-color: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
#site-nav[data-nav-theme="hero"] .nv-bar:not(.scrolled) .nv-logo { color: #fff; }
#site-nav[data-nav-theme="hero"] .nv-bar:not(.scrolled) .nv-menu a { color: rgba(255, 255, 255, .82); }
#site-nav[data-nav-theme="hero"] .nv-bar:not(.scrolled) .nv-menu a:hover { color: #fff; background: rgba(255, 255, 255, .12); }
#site-nav[data-nav-theme="hero"] .nv-bar:not(.scrolled) .nv-menu a.is-on { color: #fff; }
#site-nav[data-nav-theme="hero"] .nv-bar:not(.scrolled) .nv-burger {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .35);
}
#site-nav[data-nav-theme="hero"] .nv-bar:not(.scrolled) .nv-burger i { background: #fff; }

/* focus 可见（键盘） */
.nv-bar a:focus-visible,
.nv-bar button:focus-visible,
.nv-skip:focus {
  outline: 3px solid rgba(255, 107, 53, .45);
  outline-offset: 2px;
}

/* ══════════════════════════════════════════════════════════════
   2. 统一页脚
   ══════════════════════════════════════════════════════════════ */
.nv-foot {
  margin-top: 72px;
  border-top: 1px solid var(--line);
  background: var(--card);
  padding: 32px var(--pad-x) 40px;
}
.nv-foot__in {
  max-width: var(--w-max); margin: 0 auto;
  display: flex; flex-wrap: wrap; gap: 16px 28px;
  align-items: center; justify-content: space-between;
}
.nv-foot__brand { font-size: 16px; font-weight: 800; color: var(--ink); letter-spacing: -.2px; }
.nv-foot__links { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 13px; }
.nv-foot__links a { color: var(--t2); text-decoration: none; }
.nv-foot__links a:hover { color: var(--brand-deep); }
.nv-foot__legal {
  max-width: var(--w-max); margin: 18px auto 0; padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 12.5px; line-height: 1.9; color: var(--t2);
}
.nv-foot__legal a { color: var(--t2); }

/* ══════════════════════════════════════════════════════════════
   3. 共用轻量组件（大厅 / 六页）
   ══════════════════════════════════════════════════════════════ */
.nv-page {
  max-width: var(--w-max);
  margin: 0 auto;
  padding: 28px var(--pad-x) 0;
}
.nv-page--read { max-width: 900px; }
.nv-back {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; padding-right: 8px;
  font-size: 14px; font-weight: 600; color: var(--t2); text-decoration: none;
}
.nv-back:hover { color: var(--brand-deep); }
.nv-h1 {
  font-size: 32px; font-weight: 800; letter-spacing: -.8px; line-height: 1.25;
  color: var(--ink);
}
.nv-sub { font-size: 15px; line-height: 1.8; color: var(--t2); margin-top: 10px; }
.nv-sec { margin-top: 44px; }
.nv-sec__h {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: 19px; font-weight: 800; color: var(--ink);
  margin-bottom: 16px;
}
.nv-sec__h span { font-size: 13px; font-weight: 500; color: var(--t2); }
.nv-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--sh-card);
  padding: 20px 22px;
}
.nv-card--hover { transition: transform .2s ease, box-shadow .2s ease; }
.nv-card--hover:hover { transform: translateY(-4px); box-shadow: var(--sh-card-hover); }  /* §1.6 200ms 上浮 */
.nv-grid { display: grid; gap: 16px; }
.nv-grid--2 { grid-template-columns: repeat(2, 1fr); }
.nv-grid--3 { grid-template-columns: repeat(3, 1fr); }
.nv-grid--4 { grid-template-columns: repeat(4, 1fr); }   /* 桌面 4 列 */
@media (max-width: 1023px) {
  .nv-grid--4 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 767px) {
  .nv-grid--3, .nv-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .nv-grid--2 { grid-template-columns: 1fr; }
  .nv-grid { gap: 12px; }
  .nv-h1 { font-size: 26px; }
  .nv-page { padding-top: 20px; }
}
.nv-tag {
  display: inline-block;
  padding: 3px 9px;
  border-radius: var(--r-tag);
  background: var(--brand-soft);
  color: var(--brand-deep);
  font-size: 12px; font-weight: 600; line-height: 16px;
}
.nv-tag--line { background: transparent; border: 1px solid var(--line); color: var(--t2); }
.nv-ai {
  position: absolute; top: 8px; left: 8px;
  padding: 2px 7px; border-radius: 6px;
  background: rgba(229, 90, 43, .92); color: #fff;
  font-size: 11px; font-weight: 600; line-height: 16px;
}
/* 缩略图位：没有真实图片时的纯 CSS 占位（不引用任何外部图片） */
.nv-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-img);
  display: flex; align-items: center; justify-content: center;
  font-size: 30px;
  background: linear-gradient(150deg, #EFEBE6, #E1DAD2);
  overflow: hidden;
}
.nv-thumb--a { background: linear-gradient(150deg, #F6E3D6, #E8C9B4); }
.nv-thumb--b { background: linear-gradient(150deg, #E3E8F3, #CBD6E8); }
.nv-thumb--c { background: linear-gradient(150deg, #EAE4D6, #D3C8AE); }
.nv-thumb--d { background: linear-gradient(150deg, #F3E2E6, #E4C6CE); }
.nv-thumb__note {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 5px 8px;
  background: rgba(26, 24, 21, .55);
  color: #fff; font-size: 11px; text-align: center;
}
/* 小程序码占位框（图片不存在时用，禁止外链） */
.nv-qr {
  width: 148px; height: 148px;
  margin: 0 auto;
  border: 2px dashed var(--line);
  border-radius: 16px;
  background:
    repeating-linear-gradient(45deg, #FBFAF8 0 8px, #F4F2EF 8px 16px);
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  font-size: 12px; line-height: 1.6; color: var(--t2);
  padding: 12px;
}
.nv-qr__wrap { text-align: center; }
.nv-qr__cap { margin-top: 10px; font-size: 12px; color: var(--t2); }
.nv-empty {
  padding: 34px 16px;
  text-align: center;
  font-size: 13.5px; color: var(--t2);
  background: var(--card);
  border: 1px dashed var(--line);
  border-radius: var(--r-card);
}
.nv-note {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: var(--r-input);
  background: var(--brand-soft);
  color: #A8391A;
  font-size: 12.5px; line-height: 1.75;
}
.nv-note--muted { background: #F4F2EF; color: var(--t2); }
.nv-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 22px;
  border: 0; border-radius: var(--r-btn);
  background: var(--brand); color: #fff;
  font: inherit; font-size: 15px; font-weight: 700;
  text-decoration: none; cursor: pointer;
  transition: background .15s ease, transform .12s ease;
}
.nv-btn:hover { background: var(--brand-deep); }
.nv-btn:active { transform: scale(.975); }
.nv-btn--ghost { background: var(--card); color: var(--ink); border: 1.5px solid var(--line); }
.nv-btn--ghost:hover { background: var(--card); border-color: #DCD6CF; }
.nv-btn:focus-visible, .nv-card:focus-visible, .nv-thumb:focus-visible {
  outline: 3px solid rgba(255, 107, 53, .45);
  outline-offset: 2px;
}
.nv-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }

/* §1.6 滚动进入：从下往上淡入 500ms */
.nv-reveal { opacity: 0; transform: translateY(24px); transition: opacity .5s ease, transform .5s ease; }
.nv-reveal.is-in { opacity: 1; transform: none; }

/* 无障碍：尊重系统「减少动态效果」 */
@media (prefers-reduced-motion: reduce) {
  .nv-bar, .nv-menu a, .nv-card--hover, .nv-btn, .nv-login, .nv-avatar, .nv-drop a, .nv-reveal {
    transition: none !important;
  }
  .nv-card--hover:hover { transform: none; }
  .nv-reveal { opacity: 1; transform: none; }
}

/* ══════════════════════════════════════════════════════════════════
   §1.7 统一图标系统（第 33 轮 WEB-R33 · 2026-10-12）
   ──────────────────────────────────────────────────────────────────
   为什么加：全站此前混用三类互不相干的「图标」——
     · emoji（📱👥🔮🔒🛡📄📷✨👗🏺☕🔥…）字形由操作系统字体决定，Windows / 安卓 / 苹果各不相同；
     · 圈码（①②③④）与纯文字箭头（→ ‹ › ← ▾）；
     · 三者与页面既有设计令牌（--brand 橙 / --line 描边 / --r-* 圆角）无任何关联。
   后果：同一页面在不同设备上「长得不一样」，且与产品调性（克制 / 沉浸）不符，观感像半成品。

   规范（对齐设计稿 §1.1 配色 / §1.3 尺度）：
     · 图形  线性描边 stroke-width 1.6（24 视框），圆头圆角端点、无填充 ⇒ 各尺寸下视觉重量一致；
     · 颜色  一律 currentColor ⇒ 由令牌 --brand 一处控色，改令牌即全站换色；
     · 尺寸  1em × 1em，随字号缩放 ⇒ 直接复用各页既有 font-size（.ico 28px / .nv-thumb 30px …），不必逐处调尺度；
     · 位置  vertical-align:-.125em，可内联于任何文本流 / flex 行，不改容器 display（避免破坏既有排版）；
     · 实现  data-URI SVG + mask —— 零新增文件、零外链（守红线「无外链资源」），不改任何 DOM 契约。

   用法：<span class="ti ti-camera" aria-hidden="true"></span>
        （纯装饰图标一律 aria-hidden="true"；承载语义处由相邻文字承担）
   边界：只替换「图标位」。正文中作为叙述符号的箭头（如「浏览器设置 → 清除数据」）、
        法律文书正文的 ①② 枚举（法条格式）**不替换**。
   ══════════════════════════════════════════════════════════════════ */
:root {
  --i-back:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 5 8 12l7 7'/%3E%3C/svg%3E");
  --i-next:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.6 12h14.2M13.2 6.4 18.8 12l-5.6 5.6'/%3E%3C/svg%3E");
  --i-right:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.6 5 16.6 12l-7 7'/%3E%3C/svg%3E");
  --i-down:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 9.2l7 7 7-7'/%3E%3C/svg%3E");
  --i-check:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.6 12.6 9.5 17.5 19.4 6.6'/%3E%3C/svg%3E");
  --i-power:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4.6v7.4'/%3E%3Cpath d='M7.9 6.8a7 7 0 1 0 8.2 0'/%3E%3C/svg%3E");
  --i-upload: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 17.4V5.4'/%3E%3Cpath d='M7.4 10 12 5.4 16.6 10'/%3E%3Cpath d='M4.6 19.6h14.8'/%3E%3C/svg%3E");
  --i-compass:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.6'/%3E%3Cpath d='M15.6 8.4 13.3 13.3 8.4 15.6 10.7 10.7Z'/%3E%3C/svg%3E");
  --i-sparkle:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.4 13.8 10.2 20.6 12 13.8 13.8 12 20.6 10.2 13.8 3.4 12 10.2 10.2Z'/%3E%3C/svg%3E");
  --i-album:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.6' y='3.6' width='16.8' height='16.8' rx='3'/%3E%3Cpath d='M12 8.4v7.2'/%3E%3Cpath d='M8.8 12.4 12 15.6l3.2-3.2'/%3E%3C/svg%3E");
  --i-users:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9.2' cy='8.2' r='3.2'/%3E%3Cpath d='M3.6 19.6c0-3.1 2.5-5.6 5.6-5.6s5.6 2.5 5.6 5.6'/%3E%3Ccircle cx='16.9' cy='9.5' r='2.3'/%3E%3Cpath d='M16.2 14.2c2.2.4 3.8 2.3 3.8 4.5'/%3E%3C/svg%3E");
  --i-user:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8.4' r='3.6'/%3E%3Cpath d='M5 20.4c0-3.6 3.1-6.4 7-6.4s7 2.8 7 6.4'/%3E%3C/svg%3E");
  --i-calendar:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.6' y='5.2' width='16.8' height='15' rx='2.6'/%3E%3Cpath d='M3.6 10.2h16.8'/%3E%3Cpath d='M8.2 3.6v3.2M15.8 3.6v3.2'/%3E%3C/svg%3E");
  --i-bag:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.4 8h13.2l1 12.4H4.4z'/%3E%3Cpath d='M9 8V6.6a3 3 0 0 1 6 0V8'/%3E%3C/svg%3E");
  --i-badge:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='9' r='5.2'/%3E%3Cpath d='M8.5 13.3 6.9 20.4 12 18 17.1 20.4l-1.6-7.1'/%3E%3C/svg%3E");
  --i-lock:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='10.6' width='14' height='9.4' rx='2.6'/%3E%3Cpath d='M8.6 10.6V8a3.4 3.4 0 0 1 6.8 0v2.6'/%3E%3Ccircle cx='12' cy='15.2' r='1.2'/%3E%3C/svg%3E");
  --i-shield: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.4 19 6.3v5.3c0 3.9-2.8 7.5-7 8.9-4.2-1.4-7-5-7-8.9V6.3z'/%3E%3Cpath d='M9 11.8 11.3 14 15.2 9.4'/%3E%3C/svg%3E");
  --i-doc:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='3.6' width='14' height='16.8' rx='2.6'/%3E%3Cpath d='M8.6 8.4h6.8M8.6 12h6.8M8.6 15.6h4.2'/%3E%3C/svg%3E");
  --i-crown:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 17.4 3.2 7.2l4.9 3.6L12 5.2l3.9 5.6 4.9-3.6-1 10.2z'/%3E%3Cpath d='M4.6 20h14.8'/%3E%3C/svg%3E");
  --i-photo:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5.8' width='18' height='14.4' rx='2.6'/%3E%3Ccircle cx='8.6' cy='10.8' r='1.7'/%3E%3Cpath d='M3.6 17.8 9.2 12.4l4.8 5 3.4-2.9 3.4 3.3'/%3E%3C/svg%3E");
  --i-shirt:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.6 4.2 12 7l3.4-2.8 4.6 2.6-1.8 4.2-1.7-.8v9.4H8.4v-9.4l-1.7.8L4.9 6.8z'/%3E%3C/svg%3E");
  --i-home:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.6 10.6 12 4l8.4 6.6V20H3.6z'/%3E%3Cpath d='M9.6 20v-5.4h4.8V20'/%3E%3C/svg%3E");
  --i-bowl:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.6 11.2h16.8a8.4 8.4 0 0 1-16.8 0Z'/%3E%3Cpath d='M6.6 20.6h10.8'/%3E%3Cpath d='M9.2 7.8c0-1.1 1-1.5 1-2.4M13.8 7.8c0-1.1 1-1.5 1-2.4'/%3E%3C/svg%3E");
  --i-luggage:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='8' width='14' height='11.2' rx='2.6'/%3E%3Cpath d='M9.6 8V5.6h4.8V8'/%3E%3Cpath d='M8.6 19.2v1.6M15.4 19.2v1.6'/%3E%3C/svg%3E");
  --i-run:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='15.2' cy='5.6' r='2'/%3E%3Cpath d='M13.8 10.2 9.2 12.8l3 3.4-.6 4.6'/%3E%3Cpath d='M12.4 16.2l3.8 1.2 1.8 3.4'/%3E%3Cpath d='M8.8 12.8 6 11.4'/%3E%3C/svg%3E");
  --i-palette:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.6c4.8 0 8.5 3.3 8.5 7.4a3.4 3.4 0 0 1-3.4 3.4h-2.2c-.9 0-1.6.7-1.6 1.5 0 .5.3.9.7 1.3.4.4.6.8.6 1.3 0 1-.8 1.7-1.9 1.7-4.7 0-8.6-3.8-8.6-8.5S7.3 3.6 12 3.6Z'/%3E%3Ccircle cx='8.6' cy='10.4' r='1'/%3E%3Ccircle cx='12' cy='7.8' r='1'/%3E%3Ccircle cx='15.6' cy='10.4' r='1'/%3E%3C/svg%3E");
  --i-music:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 17.6V5.8l8-1.8v11.2'/%3E%3Ccircle cx='7.6' cy='17.8' r='2.5'/%3E%3Ccircle cx='15.6' cy='15.4' r='2.5'/%3E%3C/svg%3E");
  --i-wind:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.6 9.2h8.6a2.6 2.6 0 1 0-2.6-2.6'/%3E%3Cpath d='M3.6 14.4h12.9a2.9 2.9 0 1 1-2.9 2.9'/%3E%3C/svg%3E");
  --i-chat:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12.6a6.4 6.4 0 0 1-6.4 6.4H8.4L4 22.2v-9.6a6.4 6.4 0 0 1 6.4-6.4h3.2A6.4 6.4 0 0 1 20 12.6Z'/%3E%3C/svg%3E");
  --i-cup:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.6 7.6h12v6.2a5 5 0 0 1-5 5h-2a5 5 0 0 1-5-5z'/%3E%3Cpath d='M16.6 9.4h1.6a2.6 2.6 0 0 1 0 5.2h-1.6'/%3E%3Cpath d='M4 21h13.6'/%3E%3C/svg%3E");
  --i-vase:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='12' cy='17.4' rx='6.2' ry='3.2'/%3E%3Cpath d='M6.4 14.4c0-3.4 2.4-5.6 5.6-5.6s5.6 2.2 5.6 5.6'/%3E%3Cpath d='M12 8.8V4.6'/%3E%3C/svg%3E");
  --i-fish:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.2c2.3-3.2 5-4.8 8-4.8s5.7 1.6 7.1 4.8c-1.4 3.2-4.1 4.8-7.1 4.8s-5.7-1.6-8-4.8Z'/%3E%3Cpath d='M20.1 12.2 22.4 9v6.4z'/%3E%3Ccircle cx='9' cy='10.9' r='.9'/%3E%3C/svg%3E");
  --i-flame:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.4c3.4 3.9 5.9 6.5 5.9 9.5a5.9 5.9 0 0 1-11.8 0c0-2 1.1-3.7 2.4-5 .3 1.5 1.2 2.4 2.2 2.4 1.3 0 2-1.5 1.3-6.9Z'/%3E%3C/svg%3E");
  --i-film:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.6' y='5.4' width='16.8' height='13.2' rx='2.6'/%3E%3Cpath d='M8.2 5.4v13.2M15.8 5.4v13.2M3.6 9.6h4.6M3.6 14.4h4.6M15.8 9.6h4.6M15.8 14.4h4.6'/%3E%3C/svg%3E");
  --i-heart:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20.2S4.4 15.6 4.4 10.6A4.4 4.4 0 0 1 12 7.6a4.4 4.4 0 0 1 7.6 3c0 5-7.6 9.6-7.6 9.6Z'/%3E%3C/svg%3E");
  --i-comment:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 15.4a2.4 2.4 0 0 1-2.4 2.4H9l-4.8 3.4V6.8a2.4 2.4 0 0 1 2.4-2.4h11a2.4 2.4 0 0 1 2.4 2.4z'/%3E%3C/svg%3E");
  --i-repost: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.2a5.2 5.2 0 0 1 5.2-5.2h9.4'/%3E%3Cpath d='M15.4 3.6 18.6 7l-3.2 3.4'/%3E%3Cpath d='M20 11.8a5.2 5.2 0 0 1-5.2 5.2H5.4'/%3E%3Cpath d='M8.6 20.4 5.4 17l3.2-3.4'/%3E%3C/svg%3E");
  --i-hash:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.6 4 8 20M16 4l-1.6 16M4.6 9h15M3.6 15h15'/%3E%3C/svg%3E");
}
.ti {
  display: inline-block; width: 1em; height: 1em; flex: none;
  background-color: currentColor; vertical-align: -.125em;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center;  mask-position: center;
  -webkit-mask-size: contain;     mask-size: contain;
  -webkit-mask-image: var(--ti);  mask-image: var(--ti);
}
.ti-back{--ti:var(--i-back)}    .ti-next{--ti:var(--i-next)}     .ti-right{--ti:var(--i-right)}
.ti-down{--ti:var(--i-down)}    .ti-check{--ti:var(--i-check)}   .ti-power{--ti:var(--i-power)}
.ti-upload{--ti:var(--i-upload)}.ti-compass{--ti:var(--i-compass)}.ti-sparkle{--ti:var(--i-sparkle)}
.ti-album{--ti:var(--i-album)}  .ti-users{--ti:var(--i-users)}   .ti-user{--ti:var(--i-user)}
.ti-calendar{--ti:var(--i-calendar)}.ti-bag{--ti:var(--i-bag)}   .ti-badge{--ti:var(--i-badge)}
.ti-lock{--ti:var(--i-lock)}    .ti-shield{--ti:var(--i-shield)} .ti-doc{--ti:var(--i-doc)}
.ti-crown{--ti:var(--i-crown)}  .ti-photo{--ti:var(--i-photo)}   .ti-shirt{--ti:var(--i-shirt)}
.ti-home{--ti:var(--i-home)}    .ti-bowl{--ti:var(--i-bowl)}     .ti-luggage{--ti:var(--i-luggage)}
.ti-run{--ti:var(--i-run)}      .ti-palette{--ti:var(--i-palette)}.ti-music{--ti:var(--i-music)}
.ti-wind{--ti:var(--i-wind)}    .ti-chat{--ti:var(--i-chat)}     .ti-cup{--ti:var(--i-cup)}
.ti-vase{--ti:var(--i-vase)}    .ti-fish{--ti:var(--i-fish)}     .ti-flame{--ti:var(--i-flame)}
.ti-film{--ti:var(--i-film)}    .ti-heart{--ti:var(--i-heart)}   .ti-comment{--ti:var(--i-comment)}
.ti-repost{--ti:var(--i-repost)}.ti-hash{--ti:var(--i-hash)}

/* 上下文微调：只加左右呼吸距，不改容器 display（避免破坏既有 block+text-align 居中排版） */
/*   · 前缀图标（图标在文字前）→ 右侧留距  */
.nv-back .ti, .backlink .ti, .back .ti,
.hall-topic__lb .ti, .c-topic__lb .ti, .t-hero__lb .ti,
.hall-flow__t .ti, .nv-thumb .ti, .kind-emoji .ti, .upload-icon .ti,
.gen-emoji .ti, .gen-spark .ti { margin-right: .34em; }
.nv-thumb .ti, .kind-emoji .ti, .upload-icon .ti, .gen-emoji .ti, .gen-spark .ti { margin-right: 0; }
/*   · 后缀图标（图标在文字后，如「查看 →」）→ 左侧留距 */
.go .ti, .trade-go .ti, .all-link .ti, .c-card__go .ti, .m-row__vl .ti,
.explore-more a .ti, .hall-city .ti, .nv-back--next .ti, .plan .ti { margin-left: .3em; }
/*   · 行内计数（点赞/评论/转发 等）→ 图标紧贴数字 */
.screen-card__k .ti, .p-card__k .ti, .p-card__au .ti { margin-right: .28em; margin-left: 0; }
.screen-card__k .ti { width: 1.15em; height: 1.15em; }
/*   · 按钮内图标 */
.btn .ti, .nv-btn .ti { margin-left: .34em; }
/*   · 卡片内「图标独占一行/居中」的图标位 → 不留外边距 */
.ico .ti, .trade-card__ico .ti, .cp-card__ico .ti, .m-row__ic .ti { margin: 0; }
/*   · 卡片标题前缀图标 → 右侧留距 */
.cu-card__t .ti, .pt-card__t .ti, .sh-card__t .ti { margin: 0 .38em 0 0; }
/*   · 图标位统一品牌色（一处控色：改 --brand 即全站换色）
 *     仅作用于「图标位」；返回箭头 / 计数等沿用其容器文字色（灰阶），保持层级克制 */
.ico .ti, .trade-card__ico .ti, .cp-card__ico .ti,
.cu-card__t .ti, .pt-card__t .ti, .sh-card__t .ti, .m-row__ic .ti,
.nv-thumb .ti, .kind-emoji .ti, .upload-icon .ti, .gen-emoji .ti, .gen-spark .ti,
.hall-flow__t .ti { color: var(--brand); }
.nv-thumb .ti { color: var(--brand-deep); }

/* 序号片：替代圈码 ①②③④（圈码字形随系统字体变化，且与图标语言无关） */
.nstep {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.4em; height: 1.4em; margin-right: .42em;
  border-radius: 50%; background: var(--brand-soft); color: var(--brand-deep);
  font-size: .8em; font-weight: 800; font-style: normal; line-height: 1;
  vertical-align: -.22em;
}