/* ============================================================
   微联 · 前台字体（2026-10-05）
   自托管思源黑体可变子集，替代原字体栈：
     原: "Helvetica Neue","PingFang SC","Microsoft YaHei","Noto Sans SC"
     Helvetica Neue / PingFang SC 在 Windows 上不存在 → 实际落微软雅黑，
     而雅黑只有 400/700 两档，中间的 500/600 全靠合成加粗。
   现: 自托管 wght 100-900 可变字体（真实字重）+ 系统字体逐字回退兜底。
   ============================================================ */
@font-face {
  font-family: "Clara Web";
  src: url("fonts/clara-web.woff2") format("woff2-variations"),
       url("fonts/clara-web.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* 2026-10-05 移除：该 @import 会阻塞渲染且指向国内不可达的 Google Fonts；
   其加载的 Noto Serif SC 仅被 .v3-* 死样式引用（HTML/JS 命中各 0），删除无视觉影响。 */
/* ============================================================
   微联 · V2 Editorial Design System
   Web 版设计稿 · 唯一权威版本 · 从零全新编写
   16 主题令牌双主题（黑金星尘 / 象牙白）| 全直角 | 杂志式 12 列网格
   ============================================================ */

/* ---------- 1. 主题令牌 ---------- */
:root {
  /* 深色主题：黑金星尘 */
  --bg: #FFFFFF;
  --bg2: #F7F7F7;
  --bg3: #F2F2F2;
  --text: #1A1A1A;
  --dim: #666666;
  --line: #EFEFEF;
  --line2: #E5E5E5;
  --accent: #1677FF;
  --accent2: #1260CC;
  --on-accent: #FFFFFF;
  --heart: #F53F3F;
  --ok: #3ddc84;
  --warn: #e0a45c;
  --ghost: rgba(22, 119, 255, 0.08);
  --ghost2: rgba(22, 119, 255, 0.16);
  --glass: rgba(255, 255, 255, 0.88);
  --shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  --font-display: "Clara Web", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "HarmonyOS Sans SC", "MiSans", "Source Han Sans SC", "Microsoft YaHei UI", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  --font-body: "Clara Web", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "HarmonyOS Sans SC", "MiSans", "Source Han Sans SC", "Microsoft YaHei UI", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  --font-num: "Clara Web", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "HarmonyOS Sans SC", "MiSans", "Source Han Sans SC", "Microsoft YaHei UI", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --wrap: 1280px;
  --pad: clamp(20px, 4vw, 48px);
  --r: 0px;

  /* ============================================================
     2026-09-30 网站全量审核整改（审核项 P1-14 / P1-17 / P1-18）
     ------------------------------------------------------------
     ① 安全区令牌：各页 viewport 加上 viewport-fit=cover 之后，
        env() 才会返回真实值；不加这组令牌的话，本文件里既有的
        .bottom-tab 那行 env(safe-area-inset-bottom) 永远算 0，
        等于安全区适配全部失效。不支持该特性的环境恒为 0px，无副作用。
     ② 品牌金令牌：导航钻石 logo 的渐变/高光/刻线原先在 13 份复制的
        内联 SVG 里硬编码（#7FB3FF / #4C9AFF / #0B4FB0 / #D6E9FF / #0B4FB0，
        全站 217 处），与令牌 --accent(#1677FF) 构成"两套金色"，
        改一次品牌色要动 13 份 HTML。现收口到令牌，由文件末尾的
        .v3-mark 规则覆盖 SVG 表现属性 —— 改色只需改这里一处。
     ============================================================ */
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --sar: env(safe-area-inset-right, 0px);
  --gold-1: #7FB3FF;   /* 渐变首停 · 亮金 */
  --gold-2: #4C9AFF;   /* 渐变次停 · 中金 */
  --gold-3: #0B4FB0;   /* 渐变末停 · 暗金 */
  --gold-4: #D6E9FF;   /* 钻石顶面高光金 */
  --gold-5: #0B4FB0;   /* 钻石刻线描边金 */
  --gold-sweep: #1677FF; /* 顶导底部扫光高亮 */
  --cta-g1: #7FB3FF;   /* 主 CTA 渐变四停 */
  --cta-g2: #4C9AFF;
  --cta-g3: #4C9AFF;
  --cta-g4: #1677FF;

  /* ---------- 存量缺陷修复（B2 在验收复核中发现，审核报告未列出） ----------
     16_IM会话.html（7 处）、17_聊天.html（32 处）、index.html（1 处）长期使用
     var(--tx) / var(--tx2) / var(--tx3) / var(--text3) 做三级文字层次，
     但这 4 个变量 **全站从未定义过**（grep 整个 www：定义为 0 次）。
     CSS 自定义属性未定义时，使用它的声明属于"计算值阶段失效"（invalid at
     computed-value time），color 会退化为 unset→inherit，也就是**整条声明被静默丢弃**。
     后果：消息列表与聊天页里所有"次级/元信息"文字（会话预览、时间戳、状态、
     空态说明、面板小字…）本来该是灰的，实际全部继承了正文色，三级层次彻底消失，
     页面观感扁平；而作者写下的 39 条 color 声明一条都没生效。
     修法：补上别名，让作者本来的意图立即生效。
     ⚠️ 刻意只做**两级**层次（tx→正文，tx2/tx3→--dim 次要灰）：
     暗色下若再造一个更暗的第三级，对比度会掉到 AA 线（4.5:1）以下，
     11px 的时间戳/状态字会看不清，得不偿失。
     ⚠️ 值必须是**字面量**，不能写成 var(--text)/var(--dim)：
     自定义属性里的 var() 是在"声明它的那个元素"上完成替换的（:root 即 html），
     写成 var(--text) 会把暗色的 #1A1A1A 固化下来，body[data-theme="light"]
     再改 --text 也带不动它 —— 亮色主题下会变成浅字浅底。
     浅色取值写在下面的 body[data-theme="light"] 块里。 */
  --tx: #1A1A1A;      /* = --text 暗色 */
  --tx2: #666666;     /* = --dim  暗色 */
  --tx3: #666666;
  --text3: #666666;
}

body[data-theme="light"] {
  /* 浅色主题：象牙白 */
  --bg: #FFFFFF;
  --bg2: #ffffff;
  --bg3: #F7F8FA;
  --text: #1b1b1d;
  --dim: #6b6872;
  --line: rgba(27, 27, 29, 0.1);
  --line2: rgba(27, 27, 29, 0.22);
  --accent: #1677FF;
  --accent2: #1260CC;
  --on-accent: #ffffff;
  --heart: #F53F3F;
  --ok: #1d9e5c;
  --warn: #b8782e;
  --ghost: rgba(22, 119, 255, 0.12);
  --ghost2: rgba(22, 119, 255, 0.24);
  --glass: rgba(255, 255, 255, 0.88);
  --shadow: 0 24px 64px rgba(27, 27, 29, 0.12);
  /* 2026-09-30：浅色主题下顶导扫光高亮改用更饱和的金，收口到令牌 */
  --gold-sweep: #1677FF;
  /* 2026-09-30：--tx/--tx2/--tx3/--text3 别名（见 :root 处说明）的浅色取值。
     同样必须是字面量，理由见上。 */
  --tx: #1b1b1d;      /* = --text 亮色 */
  --tx2: #6b6872;     /* = --dim  亮色 */
  --tx3: #6b6872;
  --text3: #6b6872;
}

/* ---------- 2. Reset 与基础 ---------- */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 全直角铁律 —— 全站任何元素零圆角 */
* {
  border-radius: 0 !important;
}

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

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 0.01em;
  min-height: 100vh;
  min-height: 100dvh;
  /* 2026-09-30 审核 P1-18：配合各页 viewport-fit=cover 自补安全区内边距。
     顶部由 body 下移、导航自身再补 --sat（见文件末尾），二者相加后正文仍不会被导航遮住；
     --sat/--sab/--sal/--sar 在无刘海或不支持 env() 的环境恒为 0px，与改前完全等价。 */
  padding-top: var(--sat);
  padding-bottom: var(--sab);
  padding-left: var(--sal);
  padding-right: var(--sar);
  transition: background 0.4s var(--ease), color 0.4s var(--ease);
  overflow-x: hidden;
}

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

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: var(--bg);
}
::-webkit-scrollbar-thumb {
  background: var(--bg3);
  border: 2px solid var(--bg);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--accent2);
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}

input,
textarea,
select {
  font-family: inherit;
  color: inherit;
}

ul,
ol {
  list-style: none;
}

/* ---------- 3. 布局骨架 ---------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding-left: var(--pad);
  padding-right: var(--pad);
}

main {
  display: block;
}

.section {
  padding: clamp(64px, 9vw, 120px) 0;
  position: relative;
}

.section.tight {
  padding: clamp(40px, 6vw, 72px) 0;
}

/* 杂志式 12 列网格 */
.grid12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(12px, 1.6vw, 24px);
}

.col-1 { grid-column: span 1; }
.col-2 { grid-column: span 2; }
.col-3 { grid-column: span 3; }
.col-4 { grid-column: span 4; }
.col-5 { grid-column: span 5; }
.col-6 { grid-column: span 6; }
.col-7 { grid-column: span 7; }
.col-8 { grid-column: span 8; }
.col-9 { grid-column: span 9; }
.col-10 { grid-column: span 10; }
.col-11 { grid-column: span 11; }
.col-12 { grid-column: span 12; }

/* 交错 offset（不对称杂志风） */
.off-1 { margin-top: clamp(24px, 4vw, 56px); }
.off-2 { margin-top: clamp(48px, 7vw, 96px); }

/* ---------- 4. 顶导 Topbar ---------- */
.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 90;
  height: 72px;
  display: flex;
  align-items: center;
  background: transparent;
  transition: background 0.35s var(--ease), box-shadow 0.35s var(--ease), height 0.35s var(--ease);
}

.topbar.solid {
  background: var(--glass);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 1px 0 var(--line);
  height: 62px;
}

.topbar .wrap {
  display: flex;
  align-items: center;
  gap: 32px;
  height: 100%;
}

/* Logo：菱形 + 字标 */
.logo {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.logo-mark {
  width: 30px;
  height: 30px;
  background: var(--accent);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  position: relative;
  transition: transform 0.5s var(--ease);
}

.logo:hover .logo-mark {
  transform: rotate(180deg);
}

.logo-mark::after {
  content: "";
  position: absolute;
  inset: 7px;
  background: var(--on-accent);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

.logo-word {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.34em;
  font-family: var(--font-display);
}

.logo-word em {
  font-style: normal;
  color: var(--accent);
}

/* 导航链接 */
.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}

.nav-links a {
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--dim);
  padding: 8px 14px;
  position: relative;
  transition: color 0.25s;
  white-space: nowrap;
}

.nav-links a:hover,
.nav-links a.active {
  color: var(--text);
}

.nav-links a.active::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 3px;
  height: 1px;
  background: var(--accent);
}

/* 发布任务按钮 */
.btn-pub {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 10px 18px;
  transition: background 0.25s, transform 0.25s;
  flex-shrink: 0;
}

.btn-pub:hover {
  background: var(--accent2);
  transform: translateY(-1px);
}

.btn-pub .plus {
  font-size: 16px;
  line-height: 1;
  font-weight: 400;
}

/* 换色键（每页唯一，永远在顶导最右） */
#btn-theme {
  width: 38px;
  height: 38px;
  border: 1px solid var(--line2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  transition: background 0.25s, border-color 0.25s, transform 0.4s var(--ease);
  flex-shrink: 0;
  position: relative;
}

#btn-theme:hover {
  background: var(--ghost);
  border-color: var(--accent);
  transform: rotate(180deg);
}

#btn-theme svg {
  width: 17px;
  height: 17px;
  display: block;
}

#btn-theme .t-label {
  position: absolute;
  right: 46px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--dim);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s;
}

#btn-theme:hover .t-label {
  opacity: 1;
}

/* 汉堡 */
.burger {
  display: none;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line2);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  flex-shrink: 0;
  transition: border-color 0.25s;
}

.burger:hover {
  border-color: var(--accent);
}

.burger span {
  display: block;
  width: 16px;
  height: 1.5px;
  background: var(--text);
  transition: transform 0.3s var(--ease), opacity 0.3s;
}

body.menu-open .burger span:nth-child(1) {
  transform: translateY(3.25px) rotate(45deg);
}
body.menu-open .burger span:nth-child(2) {
  opacity: 0;
}
body.menu-open .burger span:nth-child(3) {
  transform: translateY(-3.25px) rotate(-45deg);
}

/* ---------- 5. 全屏菜单 ---------- */
.menu-fs {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 96px var(--pad) 48px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s var(--ease);
}

body.menu-open .menu-fs {
  opacity: 1;
  pointer-events: auto;
}

.menu-fs nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: var(--wrap);
  width: 100%;
  margin: 0 auto;
}

.menu-fs nav a {
  font-family: var(--font-display);
  font-size: clamp(28px, 5.4vw, 52px);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--dim);
  display: flex;
  align-items: baseline;
  gap: 20px;
  padding: 6px 0;
  transition: color 0.25s, transform 0.4s var(--ease);
  border-bottom: 1px solid var(--line);
}

.menu-fs nav a:hover {
  color: var(--text);
  transform: translateX(14px);
}

.menu-fs nav a.active {
  color: var(--accent);
}

.menu-fs nav a i {
  font-style: normal;
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--accent);
  min-width: 40px;
}

/* ---------- 6. 按钮体系 ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 13px 28px;
  border: 1px solid transparent;
  transition: all 0.25s var(--ease);
  white-space: nowrap;
}

.btn-gold {
  background: var(--accent);
  color: var(--on-accent);
}
.btn-gold:hover {
  background: var(--accent2);
  transform: translateY(-2px);
}

.btn-line {
  border-color: var(--line2);
  color: var(--text);
  background: transparent;
}
.btn-line:hover {
  border-color: var(--accent);
  background: var(--ghost);
}

.btn-ghost {
  background: var(--ghost);
  color: var(--accent);
}
.btn-ghost:hover {
  background: var(--ghost2);
}

.btn-sm {
  padding: 9px 18px;
  font-size: 12.5px;
}

.btn-block {
  width: 100%;
}

.btn[disabled] {
  opacity: 0.45;
  pointer-events: none;
}

/* ---------- 7. Hero ---------- */
.hero {
  min-height: 100vh;
  /* 2026-09-30 审核 P1-19：iOS Safari / 微信内置浏览器地址栏伸缩时 100vh 会多出一截，
     用 dvh 修正；保留上一行 100vh 作旧内核降级。 */
  min-height: 100dvh;
  display: flex;
  align-items: center;
  position: relative;
  padding: 140px 0 80px;
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hero-bg .orb {
  position: absolute;
  filter: blur(90px);
  opacity: 0.5;
}

.hero-title {
  font-family: var(--font-display);
  font-size: clamp(52px, 9vw, 110px);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.03em;
  position: relative;
  z-index: 2;
}

.hero-title .stroke {
  color: transparent;
  -webkit-text-stroke: 1.5px var(--accent);
}

.hero-title .gold {
  color: var(--accent);
}

.hero-sub {
  font-size: clamp(15px, 1.6vw, 19px);
  color: var(--dim);
  max-width: 560px;
  margin-top: 28px;
  line-height: 1.7;
  position: relative;
  z-index: 2;
}

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  margin-top: 44px;
  position: relative;
  z-index: 2;
}

.hero-meta .hm-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.hero-meta .hm-num {
  font-family: var(--font-num);
  font-size: clamp(26px, 3.4vw, 42px);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text);
}

.hero-meta .hm-num em {
  font-style: normal;
  color: var(--accent);
  font-size: 0.62em;
  margin-right: 2px;
}

.hero-meta .hm-label {
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--dim);
  text-transform: uppercase;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 44px;
  position: relative;
  z-index: 2;
}

.hero-side {
  position: relative;
  z-index: 2;
}

/* ---------- 8. 区块头（空心大数字 Editorial） ---------- */
.sec-head {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(20px, 4vw, 48px);
  align-items: end;
  margin-bottom: clamp(40px, 6vw, 72px);
}

.sec-head .sh-index {
  font-family: var(--font-num);
  font-size: clamp(64px, 10vw, 140px);
  font-weight: 800;
  line-height: 0.82;
  letter-spacing: -0.02em;
  color: transparent;
  -webkit-text-stroke: 1px var(--line2);
  user-select: none;
  transition: -webkit-text-stroke-color 0.5s;
}

.sec-head:hover .sh-index {
  -webkit-text-stroke-color: var(--accent);
}

.sec-head .sh-body h2 {
  font-family: var(--font-display);
  font-size: clamp(26px, 3.6vw, 44px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.12;
}

.sec-head .sh-body p {
  color: var(--dim);
  margin-top: 12px;
  max-width: 520px;
  font-size: 14.5px;
  line-height: 1.7;
}

.sec-head .sh-link {
  margin-top: 18px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  letter-spacing: 0.14em;
  color: var(--accent);
  font-weight: 600;
  transition: gap 0.25s;
}

.sec-head .sh-link:hover {
  gap: 16px;
}

/* ---------- 9. Marquee ---------- */
.marquee {
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 18px 0;
  position: relative;
  white-space: nowrap;
}

.marquee-track {
  display: inline-flex;
  align-items: center;
  gap: 48px;
  animation: marquee-scroll 30s linear infinite;
  will-change: transform;
}

.marquee:hover .marquee-track {
  animation-play-state: paused;
}

.marquee-track span {
  font-family: var(--font-display);
  font-size: clamp(16px, 2vw, 22px);
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--text);
  display: inline-flex;
  align-items: center;
  gap: 48px;
}

.marquee-track span::after {
  content: "◆";
  color: var(--accent);
  font-size: 0.5em;
}

@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ---------- 10. Bento ---------- */
.bento {
  display: grid;
  gap: clamp(12px, 1.6vw, 24px);
}

.bento-item {
  background: var(--bg2);
  border: 1px solid var(--line);
  padding: clamp(24px, 3vw, 40px);
  position: relative;
  overflow: hidden;
  transition: border-color 0.35s, transform 0.35s var(--ease);
}

.bento-item:hover {
  border-color: var(--line2);
  transform: translateY(-4px);
}

.bento-item .bi-tag {
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--accent);
  text-transform: uppercase;
}

.bento-item .bi-title {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.4vw, 30px);
  font-weight: 800;
  letter-spacing: -0.01em;
  margin-top: 14px;
  line-height: 1.2;
}

.bento-item .bi-desc {
  color: var(--dim);
  font-size: 13.5px;
  margin-top: 10px;
  line-height: 1.7;
}

.bento-item .bi-num {
  font-family: var(--font-num);
  font-size: clamp(40px, 6vw, 76px);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: transparent;
  -webkit-text-stroke: 1px var(--accent);
  margin-top: 20px;
  line-height: 1;
}

.bento-item .bi-img {
  margin-top: 24px;
  height: 180px;
  object-fit: cover;
  width: 100%;
  border: 1px solid var(--line);
}

/* ---------- 11. 卡片通用 ---------- */
.card {
  background: var(--bg2);
  border: 1px solid var(--line);
  transition: border-color 0.3s, transform 0.3s var(--ease);
  position: relative;
  overflow: hidden;
}

.card:hover {
  border-color: var(--line2);
  transform: translateY(-4px);
}

.card-media {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--bg3);
}

.card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease);
}

.card:hover .card-media img {
  transform: scale(1.05);
}

.card-media .cm-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 5px 10px;
}

.card-media .cm-rank {
  position: absolute;
  right: 12px;
  bottom: 10px;
  font-family: var(--font-num);
  font-size: 54px;
  font-weight: 800;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.85);
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
}

.card-body {
  padding: 18px 18px 20px;
}

.card-body .cb-title {
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-body .cb-sub {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
  font-size: 12.5px;
  color: var(--dim);
}

.card-body .cb-user {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.card-body .cb-avatar {
  width: 22px;
  height: 22px;
  background: var(--bg3);
  border: 1px solid var(--line2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: var(--accent);
  flex-shrink: 0;
}

.card-body .cb-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card-body .cb-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card-body .cb-like {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-num);
  font-weight: 700;
  transition: color 0.25s;
  flex-shrink: 0;
}

.card-body .cb-like:hover {
  color: var(--heart);
}

.card-body .cb-like.liked {
  color: var(--heart);
}

/* ---------- 12. 榜单 ---------- */
.rank-list {
  display: flex;
  flex-direction: column;
}

.rank-row {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  align-items: center;
  gap: 18px;
  padding: 18px 8px;
  border-bottom: 1px solid var(--line);
  transition: background 0.25s;
}

.rank-row:hover {
  background: var(--ghost);
}

.rank-row .rk-num {
  font-family: var(--font-num);
  font-size: 30px;
  font-weight: 800;
  color: transparent;
  -webkit-text-stroke: 1px var(--line2);
  line-height: 1;
  text-align: center;
}

.rank-row.top1 .rk-num { -webkit-text-stroke: 1.5px var(--accent); color: var(--accent); -webkit-text-fill-color: var(--accent); }
.rank-row.top2 .rk-num { -webkit-text-stroke: 1.5px #c9c9d4; -webkit-text-fill-color: #c9c9d4; }
.rank-row.top3 .rk-num { -webkit-text-stroke: 1.5px #c08a4a; -webkit-text-fill-color: #c08a4a; }

.rank-row .rk-main {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.rank-row .rk-avatar {
  width: 44px;
  height: 44px;
  border: 1px solid var(--line2);
  background: var(--bg3);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 16px;
  color: var(--accent);
  overflow: hidden;
}

.rank-row .rk-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rank-row .rk-info {
  min-width: 0;
}

.rank-row .rk-name {
  font-size: 15px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
}

.rank-row .rk-vip {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  background: var(--ghost);
  color: var(--accent);
  padding: 2px 6px;
}

.rank-row .rk-desc {
  font-size: 12.5px;
  color: var(--dim);
  margin-top: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rank-row .rk-score {
  text-align: right;
  flex-shrink: 0;
}

.rank-row .rk-score b {
  font-family: var(--font-num);
  font-size: 19px;
  font-weight: 800;
  display: block;
}

.rank-row .rk-score small {
  font-size: 11px;
  color: var(--dim);
  letter-spacing: 0.1em;
}

/* ---------- 13. 任务 ---------- */
.task-card {
  background: var(--bg2);
  border: 1px solid var(--line);
  padding: 22px;
  transition: border-color 0.3s, transform 0.3s var(--ease);
}

.task-card:hover {
  border-color: var(--line2);
  transform: translateY(-3px);
}

.task-card .tc-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.task-card .tc-title {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
}

.task-card .tc-badge {
  font-size: 11px;
  letter-spacing: 0.08em;
  padding: 4px 10px;
  background: var(--ghost);
  color: var(--accent);
  white-space: nowrap;
  flex-shrink: 0;
}

.task-card .tc-badge.urgent {
  background: rgba(224, 92, 106, 0.12);
  color: var(--heart);
}

.task-card .tc-desc {
  color: var(--dim);
  font-size: 13.5px;
  line-height: 1.7;
  margin-top: 10px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.task-card .tc-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-top: 16px;
  font-size: 12.5px;
  color: var(--dim);
  border-top: 1px solid var(--line);
  padding-top: 14px;
}

.task-card .tc-meta b {
  color: var(--text);
  font-family: var(--font-num);
}

.task-card .tc-meta .tc-price {
  color: var(--accent);
  font-family: var(--font-num);
  font-weight: 800;
  font-size: 15px;
}

/* ---------- 14. 表单 ---------- */
.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
}

.field label {
  font-size: 12.5px;
  letter-spacing: 0.1em;
  color: var(--dim);
  font-weight: 600;
}

.field label b {
  color: var(--heart);
  font-weight: 400;
}

.input {
  background: var(--bg);
  border: 1px solid var(--line2);
  padding: 14px 16px;
  font-size: 15px;
  color: var(--text);
  transition: border-color 0.25s, box-shadow 0.25s;
  width: 100%;
}

.input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--ghost);
}

.input::placeholder {
  color: var(--dim);
  opacity: 0.6;
}

textarea.input {
  resize: vertical;
  min-height: 120px;
  line-height: 1.6;
}

select.input {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--dim) 50%), linear-gradient(135deg, var(--dim) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
  cursor: pointer;
}

.check-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  color: var(--dim);
  cursor: pointer;
}

.check-row input {
  accent-color: var(--accent);
  width: 16px;
  height: 16px;
  cursor: pointer;
}

/* 验证码 */
.captcha-box {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line2);
  background: var(--bg2);
  padding: 14px 16px;
}

.captcha-box .cb-key {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 800;
  letter-spacing: 0.3em;
  color: var(--accent);
  user-select: none;
  flex: 1;
}

.captcha-box button {
  font-size: 12px;
  color: var(--dim);
  letter-spacing: 0.06em;
  flex-shrink: 0;
  transition: color 0.25s;
}

.captcha-box button:hover {
  color: var(--accent);
}

/* 密码强度 */
.pw-meter {
  display: flex;
  gap: 4px;
  margin-top: 6px;
}

.pw-meter i {
  height: 3px;
  flex: 1;
  background: var(--bg3);
  transition: background 0.3s;
}

.pw-meter.lv1 i:nth-child(1) { background: var(--heart); }
.pw-meter.lv2 i:nth-child(-n+2) { background: var(--warn); }
.pw-meter.lv3 i:nth-child(-n+3) { background: var(--accent); }
.pw-meter.lv4 i { background: var(--ok); }

/* ---------- 15. 聊天 / IM ---------- */
.chat-list {
  display: flex;
  flex-direction: column;
}

.chat-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 10px;
  border-bottom: 1px solid var(--line);
  transition: background 0.25s;
}

.chat-item:hover {
  background: var(--ghost);
}

.chat-item .ci-avatar {
  width: 48px;
  height: 48px;
  border: 1px solid var(--line2);
  background: var(--bg3);
  flex-shrink: 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  font-size: 17px;
  overflow: hidden;
}

.chat-item .ci-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.chat-item .ci-avatar .dot {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 12px;
  height: 12px;
  background: var(--ok);
  border: 2px solid var(--bg2);
}

.chat-item .ci-body {
  flex: 1;
  min-width: 0;
}

.chat-item .ci-name {
  font-size: 15px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
}

.chat-item .ci-msg {
  font-size: 13px;
  color: var(--dim);
  margin-top: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-item .ci-right {
  text-align: right;
  flex-shrink: 0;
}

.chat-item .ci-time {
  font-size: 11.5px;
  color: var(--dim);
}

.chat-item .ci-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  background: var(--heart);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 0 6px;
  margin-top: 6px;
}

/* 气泡 */
.msg-row {
  display: flex;
  gap: 12px;
  margin-bottom: 22px;
}

.msg-row.me {
  flex-direction: row-reverse;
}

.msg-avatar {
  width: 38px;
  height: 38px;
  border: 1px solid var(--line2);
  background: var(--bg3);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  font-size: 13px;
  overflow: hidden;
}

.msg-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.msg-bubble {
  max-width: 68%;
  background: var(--bg2);
  border: 1px solid var(--line);
  padding: 12px 16px;
  font-size: 14.5px;
  line-height: 1.6;
}

.msg-row.me .msg-bubble {
  background: var(--ghost);
  border-color: var(--ghost2);
}

.msg-bubble .mb-time {
  display: block;
  font-size: 11px;
  color: var(--dim);
  margin-top: 6px;
  text-align: right;
}

/* ---------- 16. Footer 巨型印章 ---------- */
.footer {
  border-top: 1px solid var(--line);
  padding: clamp(56px, 8vw, 100px) 0 0;
  overflow: hidden;
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(12px, 1.6vw, 24px);
  padding-bottom: clamp(48px, 7vw, 80px);
}

.footer .f-brand {
  grid-column: span 4;
}

.footer .f-brand .logo {
  margin-bottom: 20px;
}

.footer .f-brand p {
  color: var(--dim);
  font-size: 13.5px;
  line-height: 1.8;
  max-width: 300px;
}

.footer .f-col {
  grid-column: span 2;
}

.footer .f-col h4 {
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--dim);
  text-transform: uppercase;
  margin-bottom: 18px;
}

.footer .f-col a {
  display: block;
  font-size: 13.5px;
  color: var(--text);
  padding: 6px 0;
  opacity: 0.75;
  transition: opacity 0.25s, transform 0.25s;
}

.footer .f-col a:hover {
  opacity: 1;
  transform: translateX(6px);
  color: var(--accent);
}

.footer-mega {
  text-align: center;
  user-select: none;
  pointer-events: none;
  line-height: 0.78;
  margin-top: 20px;
}

.footer-mega span {
  font-family: var(--font-display);
  font-size: clamp(100px, 17vw, 250px);
  font-weight: 800;
  letter-spacing: 0.02em;
  color: transparent;
  -webkit-text-stroke: 1px var(--accent);
  opacity: 0.85;
  display: inline-block;
}

.footer-bar {
  border-top: 1px solid var(--line);
  padding: 20px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 12.5px;
  color: var(--dim);
}

.footer-bar .fb-links {
  display: flex;
  gap: 24px;
}

.footer-bar a:hover {
  color: var(--accent);
}

/* ---------- 17. 底 Tab（≤960px 显示） ---------- */
.bottom-tab {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 70;
  background: var(--glass);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-top: 1px solid var(--line);
  padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
}

.bottom-tab .bt-inner {
  display: flex;
  align-items: center;
  justify-content: space-around;
  max-width: 520px;
  margin: 0 auto;
}

.bottom-tab a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  color: var(--dim);
  padding: 4px 12px;
  transition: color 0.25s;
}

.bottom-tab a.active {
  color: var(--accent);
}

.bottom-tab a svg {
  width: 21px;
  height: 21px;
  display: block;
}

.bottom-tab .bt-pub {
  width: 46px;
  height: 46px;
  background: var(--accent);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--on-accent);
  margin-top: -18px;
  transition: transform 0.3s var(--ease);
}

.bottom-tab .bt-pub:hover {
  transform: rotate(90deg);
}

.bottom-tab .bt-pub svg {
  width: 19px;
  height: 19px;
}

/* ---------- 18. Toast ---------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: 96px;
  transform: translateX(-50%) translateY(20px);
  z-index: 120;
  background: var(--bg2);
  border: 1px solid var(--accent);
  color: var(--text);
  font-size: 14px;
  letter-spacing: 0.04em;
  padding: 13px 24px;
  box-shadow: var(--shadow);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
  max-width: min(90vw, 420px);
  text-align: center;
}

.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ---------- 19. Reveal 入场 ---------- */
.rv {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}

.rv.on {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- 20. 其他通用 ---------- */
.divider {
  height: 1px;
  background: var(--line);
  border: none;
}

.badge-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--accent);
  margin-right: 8px;
  vertical-align: middle;
}

.tag {
  display: inline-block;
  font-size: 11.5px;
  letter-spacing: 0.08em;
  border: 1px solid var(--line2);
  padding: 5px 12px;
  color: var(--dim);
  transition: all 0.25s;
}

.tag:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--ghost);
}

.page-head {
  padding: 160px 0 48px;
}

.page-head .ph-kicker {
  font-size: 12px;
  letter-spacing: 0.26em;
  color: var(--accent);
  text-transform: uppercase;
}

.page-head h1 {
  font-family: var(--font-display);
  font-size: clamp(34px, 5.6vw, 64px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.08;
  margin-top: 14px;
}

.page-head p {
  color: var(--dim);
  max-width: 560px;
  margin-top: 18px;
  font-size: 15px;
  line-height: 1.7;
}

.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 4vw, 56px);
  align-items: start;
}

.mono-num {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
}

/* 空状态 */
.empty {
  text-align: center;
  padding: 80px 20px;
  color: var(--dim);
}

.empty .e-icon {
  font-size: 44px;
  margin-bottom: 18px;
  color: var(--line2);
}

.empty h3 {
  font-size: 17px;
  color: var(--text);
  font-weight: 700;
  margin-bottom: 8px;
}

.empty p {
  font-size: 13.5px;
}

/* ---------- 21. 响应式 ---------- */
@media (max-width: 1160px) {
  .nav-links {
    display: none;
  }
  .burger {
    display: flex;
  }
  .topbar .wrap {
    gap: 14px;
  }
  .topbar .btn-pub {
    margin-left: auto;
  }
  .footer .f-brand { grid-column: span 12; }
  .footer .f-col { grid-column: span 3; }
}

@media (max-width: 960px) {
  body {
    padding-bottom: 74px;
  }
  .bottom-tab {
    display: block;
  }
  .footer-mega span {
    font-size: clamp(64px, 20vw, 150px);
  }
  .col-1, .col-2, .col-3, .col-4, .col-5, .col-6,
  .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {
    grid-column: span 12;
  }
  .off-1, .off-2 {
    margin-top: 0;
  }
  .two-col {
    grid-template-columns: 1fr;
  }
  .sec-head {
    grid-template-columns: 1fr;
    align-items: start;
  }
  .sec-head .sh-index {
    font-size: clamp(48px, 16vw, 96px);
  }
  .hero {
    padding-top: 120px;
    min-height: 88vh;
  }
  .footer .f-col { grid-column: span 6; }
  .rank-row {
    grid-template-columns: 44px 1fr auto;
    gap: 12px;
  }
  .rank-row .rk-num {
    font-size: 24px;
  }
  .msg-bubble {
    max-width: 82%;
  }
  .btn-pub span {
    display: none;
  }
  .btn-pub {
    padding: 11px 13px;
  }
}

@media (max-width: 560px) {
  .hero-title {
    letter-spacing: -0.02em;
  }
  .footer .f-col { grid-column: span 12; }
  .card-body .cb-title {
    font-size: 14px;
  }
}

/* ---------- 22. 动效工具 ---------- */
.fade-in {
  animation: fadeIn 0.6s var(--ease) both;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.spin {
  animation: spin 1.2s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ============================================================
   23. V3 导航组件 —— 2026-08-25 黑金呼吸钻石导航 × V2 全直角铁律
   （2026-09-07 接入：8.25 定稿导航视觉基因 + 002 站 19 页目录结构）
   ============================================================ */
.v3nav{position:fixed;top:0;left:0;right:0;z-index:90;height:72px;display:flex;align-items:center;gap:clamp(18px,3vw,36px);padding:0 var(--pad);background:var(--glass);-webkit-backdrop-filter:blur(22px) saturate(160%);backdrop-filter:blur(22px) saturate(160%);border-bottom:1px solid var(--line);}
.v3nav::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;background:linear-gradient(90deg,transparent,var(--accent) 25%,var(--gold-sweep) 50%,var(--accent) 75%,transparent);background-size:200% 100%;animation:v3sweep 5s ease-in-out infinite;pointer-events:none;}
body[data-theme="light"] .v3nav::after{background:linear-gradient(90deg,transparent,var(--accent) 25%,var(--gold-sweep) 50%,var(--accent) 75%,transparent);background-size:200% 100%;}
@keyframes v3sweep{0%{background-position:-200% 0;}100%{background-position:200% 0;}}
@keyframes v3breathe{0%,100%{filter:drop-shadow(0 0 8px rgba(76, 154, 255,.2));}50%{filter:drop-shadow(0 0 30px rgba(76, 154, 255,.5));}}
.v3-brand{display:flex;align-items:center;gap:10px;flex:none;}
.v3-mark{width:30px;height:30px;flex:none;animation:v3breathe 3.2s ease-in-out infinite;}
.v3-word{font-family:'Noto Serif SC','Songti SC','STSong',serif;font-size:21px;font-weight:600;letter-spacing:.07em;color:var(--accent);white-space:nowrap;}
.v3-links{display:flex;align-items:center;gap:30px;flex:1;margin-left:6px;}
.v3-links > a{font-size:14px;letter-spacing:.07em;color:var(--dim);position:relative;padding:8px 0;white-space:nowrap;transition:color .25s;}
.v3-links > a:hover,.v3-links > a.on{color:var(--text);}
.v3-links > a::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--accent);transition:width .35s cubic-bezier(.2,.8,.2,1);}
.v3-links > a:hover::after,.v3-links > a.on::after{width:100%;}
.v3-drop{position:relative;}
.v3-dropbtn{display:flex;align-items:center;gap:5px;font-size:14px;letter-spacing:.07em;color:var(--dim);background:none;border:none;padding:8px 0;cursor:pointer;position:relative;white-space:nowrap;transition:color .25s;font-family:inherit;}
.v3-dropbtn::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--accent);transition:width .35s cubic-bezier(.2,.8,.2,1);}
.v3-dropbtn:hover,.v3-dropbtn.on{color:var(--text);}
.v3-drop:hover .v3-dropbtn{color:var(--text);}
.v3-drop:hover .v3-dropbtn::after,.v3-dropbtn.on::after{width:100%;}
.v3-dropbtn svg{width:10px;height:10px;stroke:currentColor;transition:transform .3s var(--ease);}
.v3-drop:hover .v3-dropbtn svg,.v3-drop:focus-within .v3-dropbtn svg{transform:rotate(180deg);}
.v3-menu{position:absolute;top:100%;left:50%;transform:translate(-50%,6px);min-width:430px;background:var(--bg2);border:1px solid var(--line2);padding:12px;display:grid;grid-template-columns:1fr 1fr;gap:2px;opacity:0;pointer-events:none;transition:opacity .28s var(--ease),transform .28s var(--ease);box-shadow:var(--shadow);}
.v3-menu::before{content:"";position:absolute;top:-10px;left:0;right:0;height:10px;}
.v3-drop:hover .v3-menu,.v3-drop:focus-within .v3-menu,.v3-menu.open{opacity:1;pointer-events:auto;transform:translate(-50%,0);}
.v3-menu a{display:flex;align-items:center;gap:9px;padding:10px 14px;font-size:13px;letter-spacing:.04em;color:var(--dim);transition:color .2s,background .2s;white-space:nowrap;}
.v3-menu a:hover,.v3-menu a.on{color:var(--accent);background:var(--ghost);}
.v3-no{font-family:'Noto Serif SC','Songti SC','STSong',serif;font-size:11px;letter-spacing:.08em;color:var(--accent);opacity:.85;flex:none;width:22px;}
.v3-tag{font-size:9px;letter-spacing:.12em;color:var(--dim);border:1px solid var(--line);padding:1px 7px;margin-left:auto;flex:none;}
.v3-right{display:flex;align-items:center;gap:12px;flex:none;}
.v3-ghost{display:inline-flex;align-items:center;height:38px;padding:0 16px;font-size:13px;letter-spacing:.05em;color:var(--dim);border:1px solid var(--line2);background:transparent;transition:color .2s,border-color .2s;white-space:nowrap;}
.v3-ghost:hover{border-color:var(--accent);color:var(--accent);}
.v3-cta{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 20px;font-size:13px;font-weight:700;letter-spacing:.08em;color:var(--on-accent);background:linear-gradient(135deg,var(--cta-g1) 0%,var(--cta-g2) 30%,var(--cta-g3) 70%,var(--cta-g4) 100%);transition:filter .22s,box-shadow .22s,transform .22s;white-space:nowrap;}
.v3-cta:hover{filter:brightness(1.06);box-shadow:0 6px 24px rgba(76, 154, 255,.28);transform:translateY(-1px);}
.v3-plus{font-size:15px;font-weight:400;line-height:1;}
.v3-burger{display:none;flex-direction:column;justify-content:center;align-items:center;gap:5px;width:40px;height:40px;border:1px solid var(--line2);background:transparent;cursor:pointer;transition:border-color .25s;flex:none;}
.v3-burger:hover{border-color:var(--accent);}
.v3-burger span{display:block;width:16px;height:1.5px;background:var(--text);transition:transform .3s var(--ease),opacity .3s;}
.v3-burger.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
.v3-burger.open span:nth-child(2){opacity:0;}
.v3-burger.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}
.v3-drawer{position:fixed;top:72px;left:0;right:0;z-index:85;background:var(--bg2);border-bottom:1px solid var(--line);padding:10px var(--pad) 22px;display:none;flex-direction:column;box-shadow:0 20px 40px rgba(0,0,0,.18);max-height:calc(100vh - 72px);overflow-y:auto;}
body[data-theme="light"] .v3-drawer{box-shadow:0 20px 40px rgba(0,0,0,.10);}
.v3-drawer.open{display:flex;}
.v3-drawer > a{display:block;padding:15px 2px;font-size:16px;color:var(--dim);letter-spacing:.06em;border-bottom:1px solid var(--line);transition:color .2s;}
.v3-drawer > a:hover,.v3-drawer > a.on{color:var(--text);}
.v3-dlabel{font-size:10px;letter-spacing:.18em;color:var(--dim);padding:14px 2px 4px;}
.v3-dmods{display:grid;grid-template-columns:1fr 1fr;gap:0 14px;border-bottom:1px solid var(--line);padding-bottom:14px;}
.v3-dmods a{display:flex;align-items:center;gap:8px;padding:10px 2px;font-size:13px;letter-spacing:.03em;color:var(--dim);border-bottom:none;}
.v3-dmods a:hover,.v3-dmods a.on{color:var(--accent);}
.v3-dmods .v3-no{font-size:10px;width:18px;}
.v3-dcta{display:flex;gap:12px;margin-top:18px;align-items:center;}
.v3-dcta .v3-cta{flex:1;justify-content:center;}
.footer .v3-mark{width:26px;height:26px;animation:none;filter:none;}
.footer .v3-word{font-size:19px;}
@media (prefers-reduced-motion:reduce){
  .v3nav::after,.v3-mark{animation:none !important;}
}
@media (max-width:1160px){
  .v3-links{display:none;}
  .v3-ghost{display:none;}
  .v3-burger{display:flex;}
  .v3nav{gap:14px;}
  .v3-right{margin-left:auto;}
}
@media (max-width:560px){
  .v3nav{padding:0 20px;}
  .v3-word{font-size:18px;}
  .v3-dmods{grid-template-columns:1fr;}
  .v3-cta{padding:0 14px;}
}

/* ============================================================
   2026-09-30 网站全量审核整改 · 收口块
   （必须留在文件最末：靠源序覆盖前面的 padding 简写与内联 SVG 表现属性）
   ------------------------------------------------------------
   P1-18 安全区适配：各主页面 viewport 加上 viewport-fit=cover 之后 env() 才生效。
     · .v3nav 是 position:fixed;top:0，不会跟随 body 的 padding-top，
       必须自己把 --sat 补进高度与内边距，否则刘海/状态栏会压住 logo 与导航文字。
       body 下移 --sat、导航高度也加 --sat，两者相加后正文与导航的相对距离不变。
     · .v3-drawer 固定定位且原为 top:72px，必须同步下移并重算最大高度。
     · .bottom-tab（≤960px 的底部 Tab）本文件 17 节已有
       env(safe-area-inset-bottom) 竖向内边距，这里补横向左右安全区（横屏刘海）。
     ⚠️ --sat/--sab/--sal/--sar 在无刘海机型或不支持 env() 的环境恒为 0px，
        因此以上所有 calc() 结果与改前逐像素一致，不存在回归。
   ------------------------------------------------------------
   P1-17 品牌金收口：用 CSS 覆盖 13 份复制的内联 SVG 里硬编码的表现属性。
     刻意使用**属性选择器**只命中"原本就是这个硬编码值"的元素 ——
     这样不会给本来没有 stroke 的钻石顶面（fill="#D6E9FF" 那个 path）凭空加描边，
     视觉输出与改前完全一致，但改色从此只需改 :root 的 --gold-*。
     ⚠️ 维护提示：此后改 logo 金色请改 --gold-*；直接改 HTML 里的
        stop-color / stroke / fill 属性不会再生效（CSS 优先级高于 SVG 表现属性）。
   ============================================================ */
.v3nav {
  /* 先给旧内核写死原值：万一 env() 不受支持，var(--sat) 会变成无效值
     使整条 calc() 在计算期失效 —— 有前一行兜底就仍回到 72px，不会塌成 auto。 */
  height: 72px;
  height: calc(72px + var(--sat));
  padding-top: 0;
  padding-top: var(--sat);
}
.v3-drawer {
  top: 72px;
  top: calc(72px + var(--sat));
  max-height: calc(100vh - 72px);
  max-height: calc(100vh - 72px - var(--sat));
  max-height: calc(100dvh - 72px - var(--sat));
}
.bottom-tab {
  padding-left: 10px;
  padding-left: calc(10px + var(--sal));
  padding-right: 10px;
  padding-right: calc(10px + var(--sar));
}
.v3-mark stop[stop-color="#7FB3FF"] { stop-color: var(--gold-1); }
.v3-mark stop[stop-color="#4C9AFF"] { stop-color: var(--gold-2); }
.v3-mark stop[stop-color="#0B4FB0"] { stop-color: var(--gold-3); }
.v3-mark path[fill="#D6E9FF"] { fill: var(--gold-4); }
.v3-mark path[stroke="#0B4FB0"] { stroke: var(--gold-5); }