/* ============================================================
   川合汇海 · 设计系统  v0.1
   高保真设计稿 · 静态预览 · 未接数据
   ------------------------------------------------------------
   视觉隐喻：百川汇流成海
   每个人一次关注 = 一条细流；千万条细流 = 一片海
   配色遵循「温暖 + 理性 + 可审计」，刻意避开红金金融风
   ============================================================ */

:root{
  --bg:#F7F4EE;
  --bg-elev:#FFFFFF;
  --bg-deep:#0B2A33;
  --bg-deep-2:#0F3540;

  --ink:#12313B;
  --ink-2:#4C6871;
  --ink-3:#8DA0A8;
  --ink-inv:#EEF4F4;

  --line:#E5DFD3;
  --line-2:#D2C8B7;

  --sea:#0E4C5C;
  --sea-2:#0A3843;
  --sea-soft:#E5EEF0;

  --amber:#C4692A;
  --amber-2:#E1904A;
  --amber-soft:#FBEEE1;

  --gold:#A9863C;
  --ok:#2F7D5B;

  --r-xs:6px; --r-sm:10px; --r:16px; --r-lg:24px; --r-xl:34px; --r-pill:999px;

  --sh-1:0 1px 2px rgba(18,49,59,.05), 0 6px 18px rgba(18,49,59,.06);
  --sh-2:0 2px 6px rgba(18,49,59,.07), 0 18px 44px rgba(18,49,59,.10);
  --sh-3:0 30px 70px rgba(11,42,51,.22);

  --maxw:1180px;
  --maxw-narrow:760px;

  --f-sans:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",sans-serif;
  --f-serif:"Source Han Serif SC","Noto Serif SC","Songti SC","STSong",SimSun,serif;
  --f-mono:"SFMono-Regular",Menlo,Consolas,"Liberation Mono",monospace;

  --ease:cubic-bezier(.22,.61,.36,1);
}

/* 设计页可实时切换标题字体，默认无衬线 */
html.fH-serif .display,
html.fH-serif h1,
html.fH-serif h2,
html.fH-serif .sec-title{ font-family:var(--f-serif); letter-spacing:0; }

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

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

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--f-sans);
  font-size:16px;
  line-height:1.75;
  letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; cursor:pointer; }

::selection{ background:#F3DCC3; color:var(--ink); }

/* ---------- 布局 ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 22px; }
.wrap-n{ width:100%; max-width:var(--maxw-narrow); margin:0 auto; padding:0 22px; }
.sec{ padding:74px 0; }
.sec-tight{ padding:52px 0; }
.sec-deep{ background:var(--bg-deep); color:var(--ink-inv); }
.sec-sea{ background:var(--sea); color:var(--ink-inv); }
.sec-white{ background:var(--bg-elev); }
.sec-line{ border-top:1px solid var(--line); }

.grid{ display:grid; gap:18px; }
/* 注意：必须用 minmax(0,1fr) 而不是 1fr。
   1fr 等价于 minmax(auto,1fr)，其 auto 下限会被子元素的最小内容宽度撑开，
   导致窄屏下整个网格溢出视口（表格、长文本尤其容易触发）。 */
.g2{ grid-template-columns:minmax(0,1fr); }
.g3{ grid-template-columns:minmax(0,1fr); }
.g4{ grid-template-columns:repeat(2,minmax(0,1fr)); }

@media(min-width:760px){
  .g2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .g3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .g4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
  .sec{ padding:96px 0; }
}

/* ---------- 排版 ---------- */
.eyebrow{
  font-size:12px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--amber); font-weight:700; margin:0 0 14px;
}
.sec-deep .eyebrow,.sec-sea .eyebrow{ color:var(--amber-2); }

h1,h2,h3,h4{ margin:0; line-height:1.25; font-weight:800; letter-spacing:-.005em; }

.display{ font-size:clamp(30px,6.4vw,62px); line-height:1.16; font-weight:800; letter-spacing:-.02em; }
.sec-title{ font-size:clamp(23px,3.6vw,38px); line-height:1.3; font-weight:800; letter-spacing:-.015em; }
.sub{ font-size:clamp(16px,1.9vw,19px); line-height:1.72; color:var(--ink-2); }
.sec-deep .sub,.sec-sea .sub{ color:#B9CDD2; }
.lead{ font-size:clamp(17px,2.1vw,21px); line-height:1.7; color:var(--ink-2); }
.muted{ color:var(--ink-3); }
.small{ font-size:14px; line-height:1.7; }
.tiny{ font-size:12.5px; line-height:1.65; }
strong{ font-weight:700; color:var(--ink); }
.sec-deep strong,.sec-sea strong{ color:#fff; }

.hl{ background:linear-gradient(transparent 62%, #F7DFC4 62%); padding:0 .1em; }

/* ---------- 标识 ---------- */
.brand{ display:inline-flex; align-items:center; gap:12px; }
.brand-mark{ width:40px; height:40px; flex:0 0 40px; color:var(--sea); }
.sec-deep .brand-mark,.sec-sea .brand-mark{ color:#7FC3D2; }
.brand-name{
  font-size:20px; font-weight:800; line-height:1.08;
  letter-spacing:.15em; margin-right:-.15em;   /* 抵掉末字后的字距空隙 */
}
.brand-name--serif{ font-family:var(--f-serif); font-weight:700; letter-spacing:.2em; margin-right:-.2em; }
/* 品牌字标（思源宋体 Black 转成的 SVG 路径，不依赖访客装了什么字体）
   ⚠ 两个必须记住的坑：
   1) 必须显式给 height。内联 SVG 只给 width 时，浏览器会套用替换元素默认的
      150px 高度并"按高度适配"，字标会被缩小、居中、周围留一大片空白。
   2) 必须显式给 fill。字标是用 <symbol> + <use> 引用的，
      SVG 里 fill 的初始值是**黑色**而不是 currentColor ——
      只设 color 而不设 fill，页头的字标会变黑，
      页脚（深色底）上就是黑底黑字、完全看不见。
      <use> 的 shadow 内容会继承 fill，所以写在这里就够了。 */
.brand-wm{
  height:23px; width:auto; display:block;
  color:var(--sea); fill:currentColor; flex:0 0 auto;
}
.sec-deep .brand-wm,.sec-sea .brand-wm,.foot .brand-wm{ color:#fff; fill:currentColor; }
.wm-defs{ position:absolute; width:0; height:0; overflow:hidden; }
@media(max-width:420px){ .brand-wm{ height:20px; } }
.brand-sub{ display:block; font-size:9px; letter-spacing:.18em; color:var(--ink-3); font-weight:600; margin-top:4px; }
.sec-deep .brand-sub,.sec-sea .brand-sub{ color:#6E99A4; }
@media(max-width:420px){ .brand-name{ font-size:18px; } .brand-mark{ width:34px; height:34px; flex:0 0 34px; } }

/* ---------- 顶部导航 ---------- */
.nav{
  position:sticky; top:0; z-index:60;
  background:rgba(247,244,238,.86);
  backdrop-filter:blur(14px) saturate(1.6);
  border-bottom:1px solid var(--line);
}
.nav-in{ display:flex; align-items:center; gap:14px; height:64px; }
.nav-links{ display:none; margin-left:auto; align-items:center; gap:2px; }
.nav-links a{
  padding:8px 13px; border-radius:var(--r-pill); font-size:14.5px;
  color:var(--ink-2); font-weight:600; transition:.18s var(--ease);
}
.nav-links a:hover{ background:#EFEAE0; color:var(--ink); }
.nav-links a[aria-current="page"]{ color:var(--sea); background:var(--sea-soft); }
.nav-cta{ margin-left:auto; }
.nav-links + .nav-cta{ margin-left:10px; }
/* 导航有 7 项（为什么/钱的流向/短视频/游戏/商城/透明账本/质疑），
   加上品牌与 CTA 大约要 850px，所以断点从 900 提高到 1040，避免挤在一起。
   窄于这个宽度时走汉堡抽屉。 */
@media(min-width:1040px){ .nav-links{ display:flex; } .nav-burger{ display:none !important; } }

.nav-burger{
  margin-left:auto; width:42px; height:42px; border:1px solid var(--line);
  background:var(--bg-elev); border-radius:var(--r-sm);
  display:grid; place-items:center;
}
.nav-burger span{ display:block; width:17px; height:1.8px; background:var(--ink); border-radius:2px; }
.nav-burger span + span{ margin-top:4px; }

.nav-drawer{
  display:none; border-bottom:1px solid var(--line); background:var(--bg-elev);
}
.nav-drawer.open{ display:block; }
.nav-drawer a{
  display:block; padding:15px 22px; border-bottom:1px solid var(--line);
  font-weight:600; color:var(--ink-2);
}
.nav-drawer a:last-child{ border-bottom:0; }

/* ---------- 按钮 ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:13px 24px; border-radius:var(--r-pill); border:1px solid transparent;
  font-size:15px; font-weight:700; line-height:1.2; white-space:nowrap;
  transition:.2s var(--ease); cursor:pointer;
}
.btn:active{ transform:translateY(1px); }
.btn-primary{ background:var(--amber); color:#fff; box-shadow:0 6px 20px rgba(196,105,42,.26); }
.btn-primary:hover{ background:#B25C22; box-shadow:0 10px 28px rgba(196,105,42,.32); }
.btn-sea{ background:var(--sea); color:#fff; box-shadow:0 6px 20px rgba(14,76,92,.22); }
.btn-sea:hover{ background:var(--sea-2); }
.btn-ghost{ background:transparent; border-color:var(--line-2); color:var(--ink); }
.btn-ghost:hover{ background:#EFEAE0; border-color:var(--ink-3); }
.sec-deep .btn-ghost,.sec-sea .btn-ghost{ border-color:rgba(255,255,255,.3); color:#fff; }
.sec-deep .btn-ghost:hover,.sec-sea .btn-ghost:hover{ background:rgba(255,255,255,.1); }
.btn-sm{ padding:9px 17px; font-size:14px; }
.btn-lg{ padding:16px 32px; font-size:16.5px; }
.btn-block{ width:100%; }
.btn[disabled],.btn.is-off{ opacity:.42; pointer-events:none; }

.btn-row{ display:flex; flex-wrap:wrap; gap:12px; }
@media(max-width:520px){ .btn-row .btn{ width:100%; } }

/* ---------- 卡片 ---------- */
.card{
  background:var(--bg-elev); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:24px; box-shadow:var(--sh-1);
}
.card-flat{ box-shadow:none; }
.card-hover{ transition:.24s var(--ease); }
.card-hover:hover{ transform:translateY(-3px); box-shadow:var(--sh-2); border-color:var(--line-2); }
.card-deep{ background:var(--bg-deep-2); border-color:rgba(255,255,255,.09); color:var(--ink-inv); }

.pill{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 12px; border-radius:var(--r-pill);
  font-size:12px; font-weight:700; letter-spacing:.04em;
  border:1px solid var(--line-2); color:var(--ink-2); background:var(--bg);
}
.pill-amber{ background:var(--amber-soft); border-color:#EBCFAE; color:#9C4F16; }
.pill-sea{ background:var(--sea-soft); border-color:#C2D8DD; color:var(--sea); }
.pill-ok{ background:#E4F1E9; border-color:#BEDCCB; color:#1F6A49; }
.pill-off{ background:#F0EDE7; border-color:var(--line-2); color:var(--ink-3); }
.sec-deep .pill,.sec-sea .pill{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.18); color:#CFE0E4; }

.dot{ width:7px; height:7px; border-radius:50%; background:var(--ok); flex:0 0 7px; }
.dot-pulse{ box-shadow:0 0 0 0 rgba(47,125,91,.55); animation:pulse 2.2s infinite; }
@keyframes pulse{ 70%{ box-shadow:0 0 0 9px rgba(47,125,91,0);} 100%{ box-shadow:0 0 0 0 rgba(47,125,91,0);} }

/* ---------- Hero ----------
   两种 hero，**必须分清楚**：

     .hero            浅色。除 index.html 外的所有页面都用这个（原样，未改动）
     .hero--video     深色。只有 index.html 用，因为它的首屏是一段真实拍摄的
                      「大川汇入海」视频，文字必须压在压暗层上才读得清

   为什么不用 `.hero:has(.hero-media)` 一句搞定：:has() 在旧浏览器上不生效，
   那些浏览器就会掉回"深色底 + 深色字"，也就是我曾经造成的那次事故。
   显式加一个类，任何浏览器都不会猜错。

   教训（真发生过）：上一版把深色写在了 `.hero` 上，于是 7 个**没有视频**的页面
   也跟着变深色 —— 它们的 .lead 是深灰字、.card 是白底却继承了白字，
   一片看不清。改背景色一定要问一句「这条规则会落到哪些页面上」。 */
.hero{
  position:relative; overflow:hidden;
  background:
    radial-gradient(1100px 520px at 84% -8%, #E9F0F1 0%, rgba(233,240,241,0) 62%),
    radial-gradient(760px 420px at 6% 108%, #FBEEE1 0%, rgba(251,238,225,0) 60%),
    var(--bg);
  border-bottom:1px solid var(--line);
}
.hero-in{ padding:56px 0 62px; position:relative; z-index:2; }
@media(min-width:900px){ .hero-in{ padding:88px 0 96px; } }

/* ---- 带背景视频的 hero：只有 index.html ---- */
.hero--video{
  /* 深海底色是**兜底**：视频没加载出来 / 被省流量模式拦下时，也不会露出白底黑字 */
  background:linear-gradient(160deg, #0B2A33 0%, #0E4C5C 58%, #0A3843 100%);
  color:var(--ink-inv);
}
.hero--video .hero-in{ z-index:3; }

/* 背景视频：铺满、裁切、不接收鼠标事件 */
.hero-media{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.hero-video{
  display:block; width:100%; height:100%; object-fit:cover;
  /* 真实画面颜色偏艳，稍微收一点，免得跟品牌色打架 */
  filter:saturate(.88) contrast(.97);
}
/* 压暗层。文字压在真实画面上，不压暗就没法保证可读 ——
   这是"必须做"的一步，不是装饰。

   强度是**量出来的**，不是拍脑袋定的：把视频停在 7 个时间点各截一帧，
   逐帧算 WCAG 对比度取最差。第一版（上 .32 / 中 .56 / 下 .80 + 径向 .40）
   实测在画面较亮的那几帧上不达标：小字「个人发起的公益倡议」只有 4.41:1
   （要求 4.5），窄屏上大标题也只有 3.04:1（要求 3.0）—— 等于擦线。
   所以整体加深了一档，并给自带底色的小元素（顶部说明胶囊、音乐开关）
   各自加了不透明度，让它们不再依赖视频当前那一帧的明暗。 */
.hero-scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(11,42,51,.52) 0%, rgba(11,42,51,.68) 44%, rgba(11,42,51,.88) 100%),
    radial-gradient(880px 520px at 16% 64%, rgba(11,42,51,.46) 0%, rgba(11,42,51,0) 72%);
}
/* 视频不播时（省流量 / 减少动态 / 加载失败）画面停在 poster 静帧上。
   注意：**不是隐藏**。这个项目为"把降级写成删除"栽过三次，这里不再犯。 */
.hero.is-static .hero-media{ opacity:1; }

/* 音乐开关：可交互元素，不能放进 aria-hidden 的媒体块里，所以是并列的 */
.hero-sound{
  position:absolute; top:16px; right:16px; z-index:4;
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 13px; font:inherit; font-size:12.5px; font-weight:600;
  color:#DCE7E9; background:rgba(11,42,51,.74);
  border:1px solid rgba(255,255,255,.24); border-radius:var(--r-pill);
  cursor:pointer; backdrop-filter:blur(6px);
  transition:background .18s var(--ease), border-color .18s var(--ease);
}
.hero-sound:hover{ background:rgba(11,42,51,.72); border-color:rgba(255,255,255,.42); }
.hero-sound:focus-visible{ outline:2px solid #F3DCC3; outline-offset:2px; }
.hero-sound-ic{
  width:13px; height:13px; flex:0 0 13px; position:relative;
  border:1.6px solid currentColor; border-radius:3px;
}
/* 图标：关着的时候画一道斜杠，开着的时候在方块右侧画两道弧 */
.hero-sound[aria-pressed="false"] .hero-sound-ic::after{
  content:""; position:absolute; left:-3px; top:5px; width:19px; height:1.6px;
  background:currentColor; transform:rotate(-45deg);
}
.hero-sound[aria-pressed="true"]{ color:#F3DCC3; border-color:rgba(243,220,195,.5); }
@media(max-width:520px){
  .hero-sound{ top:12px; right:12px; font-size:12px; padding:6px 11px; }
}

.hero-claim{
  font-size:12px; letter-spacing:.2em; font-weight:700; color:var(--amber);
  display:inline-flex; align-items:center; gap:9px; margin-bottom:20px;
  padding:7px 15px 7px 12px; border:1px solid #EBCFAE; border-radius:var(--r-pill);
  background:rgba(255,255,255,.7);
}
.hero--video .hero-claim{
  color:#F3DCC3; border-color:rgba(243,220,195,.32);
  background:rgba(11,42,51,.74);
}
.hero--video h1{ color:#fff; }
/* .hl 的高亮是**一条下划线**（background 从 62% 才开始着色），不是整块底色。
   所以深色字只有下沿一点压在米色上，上半截其实压在视频上 —— 深色压深色，看不清。
   改法：字改成白色，并把下划线压到 84%（原来那条占行高 38%，会盖住字的下半部分，
   白字压米色反而更糊）。这样字干净地落在压暗层上，下沿留一道暖色装饰。 */
.hero--video .hl{
  color:#fff;
  background:linear-gradient(transparent 84%, #F7DFC4 84%);
}
.hero h1{ margin-bottom:22px; max-width:15em; }
.hero .sub{ max-width:34em; }
.hero .btn-row{ margin-top:30px; }
.hero--video .sub{ color:#CFE0E4; }
.hero--video .sub strong{ color:#fff; }
.hero--video .btn-ghost{ border-color:rgba(255,255,255,.36); color:#fff; }
.hero--video .btn-ghost:hover{ background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.6); }
/* 计数器卡片本身是白底，卡片内文字颜色不用改；只有卡片外的说明行要提亮 */
.hero--video .meter-foot{ color:#A9C2C8; }
.hero--video .meter-foot a{ color:#F3DCC3 !important; border-bottom-color:rgba(243,220,195,.5) !important; }
/* 宗旨原句在浅色 hero 上是深海青；深色背景上必须反过来，
   否则"深青字压深底色"——本项目第 N 次提醒自己：换背景就要把所有字色过一遍。 */
.hero--video .hero-motto{ color:#EEF4F4; }

/* 首屏用视频时，把 motion.css 里那层"极光"关掉。
   极光原本是给浅色空 hero 添一点活气的（其它页仍在用）；这里已经有真实画面，
   它既看不见（在视频下层）又白耗 GPU。 */
.hero--video::before,
.hero--video::after{ display:none; }

/* ---------- 计数器（零态） ---------- */
.meter{
  display:grid; grid-template-columns:repeat(2,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line);
  border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-1);
  margin-top:38px;
}
@media(min-width:820px){ .meter{ grid-template-columns:repeat(4,1fr); } }
.meter-cell{ background:var(--bg-elev); padding:20px 20px 18px; }
.meter-k{ font-size:12.5px; color:var(--ink-3); font-weight:600; letter-spacing:.05em; margin-bottom:8px; }
.meter-v{
  font-family:var(--f-mono); font-size:clamp(23px,3.2vw,31px);
  font-weight:600; letter-spacing:-.03em; color:var(--sea);
  font-variant-numeric:tabular-nums; line-height:1.1;
}
.meter-v.zero{ color:var(--ink-3); }
.meter-note{ font-size:11.5px; color:var(--ink-3); margin-top:6px; }
.meter-foot{
  margin-top:13px; font-size:13px; color:var(--ink-3);
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}

/* 项目宗旨原句（发起人写在四个平台账号简介里的同一句话） */
.hero-motto{
  font-family:var(--f-serif);
  font-size:clamp(17px,2.2vw,23px);
  line-height:1.7; color:var(--sea);
  margin:0 0 24px; max-width:30em;
  padding:2px 0 2px 18px;
  border-left:3px solid var(--amber);
  font-weight:600;
}
.motto-br{ display:none; }
@media(min-width:560px){ .motto-br{ display:inline; } }

/* ---------- 分配流向图 ---------- */
.flow-block{ margin-top:34px; }
.flow-row{ margin-bottom:26px; }
.flow-head{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:12px; flex-wrap:wrap; margin-bottom:11px;
}
.flow-name{ font-weight:800; font-size:16px; }
.flow-cap{ font-size:13.5px; color:var(--ink-3); }
.flow-bar{
  display:flex; height:58px; border-radius:var(--r); overflow:hidden;
  border:1px solid var(--line-2); box-shadow:var(--sh-1);
}
.flow-seg{
  display:flex; align-items:center; justify-content:center;
  font-size:13.5px; font-weight:700; color:#fff; position:relative;
  padding:0 10px; text-align:center; line-height:1.3;
}
.flow-seg.now{ background:linear-gradient(135deg,#3A5560,#22383F); flex:1; }
.flow-seg.op{ background:linear-gradient(135deg,#12667A,var(--sea)); width:34%; }
.flow-seg.ubi{ background:linear-gradient(135deg,var(--amber-2),var(--amber)); width:66%; }

/* 成本段：比例不固定，所以视觉上不能画成一条边界清晰的实心块 ——
   那等于在用图形宣布一个比例。用斜条纹 + 斜切边表示"这条边界会移动"，
   和旁边"无固定比例"的文字才对得上。 */
.flow-seg.var{
  background:
    repeating-linear-gradient(115deg,
      rgba(255,255,255,.13) 0 7px,
      rgba(255,255,255,0) 7px 15px),
    linear-gradient(135deg,#12667A,var(--sea));
  width:30%;
  clip-path:polygon(0 0, 100% 0, calc(100% - 16px) 100%, 0 100%);
  padding-right:22px;
}
.flow-seg.ubi-solid{ background:linear-gradient(135deg,var(--amber-2),var(--amber)); flex:1; }
.flow-var-note{
  display:flex; align-items:center; gap:7px;
  margin-top:9px; font-size:12.5px; color:var(--ink-3);
}
.flow-var-note svg{ width:14px; height:14px; flex:0 0 14px; }
@media(max-width:640px){
  .flow-bar{ height:auto; flex-direction:column; }
  .flow-seg{ width:auto !important; padding:15px 10px; }
}
.flow-legend{ display:flex; flex-wrap:wrap; gap:16px; margin-top:14px; font-size:13px; color:var(--ink-2); }
.flow-legend i{ width:11px; height:11px; border-radius:3px; display:inline-block; margin-right:7px; vertical-align:-1px; }

/* ---------- 步骤闭环 ---------- */
.steps{ counter-reset:s; }
.step{ position:relative; padding-left:52px; }
.step::before{
  counter-increment:s; content:counter(s,decimal-leading-zero);
  position:absolute; left:0; top:2px;
  width:36px; height:36px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--sea-soft); color:var(--sea);
  font-family:var(--f-mono); font-size:13px; font-weight:700;
}
.sec-deep .step::before{ background:rgba(127,195,210,.15); color:#7FC3D2; }
.step h3{ font-size:18px; margin-bottom:8px; }
.step p{ margin:0; font-size:14.5px; color:var(--ink-2); line-height:1.72; }
.sec-deep .step p{ color:#A9C2C8; }
.steps-line{ display:grid; gap:30px; }
@media(min-width:900px){
  .steps-line{ grid-template-columns:repeat(3,1fr); gap:26px; }
  .steps-line .step{ padding-left:0; padding-top:52px; }
  .steps-line .step::before{ top:0; }
}

/* ---------- 业务入口卡 ---------- */
.biz{
  display:flex; flex-direction:column; position:relative; overflow:hidden;
  padding:26px 24px 22px; min-height:220px;
}
.biz-ic{
  width:44px; height:44px; border-radius:13px; display:grid; place-items:center;
  background:var(--sea-soft); color:var(--sea); margin-bottom:16px;
}
.biz-ic svg{ width:22px; height:22px; }
.biz h3{ font-size:19px; margin-bottom:8px; }
.biz p{ margin:0 0 16px; font-size:14.5px; color:var(--ink-2); line-height:1.7; flex:1; }
.biz-foot{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.biz.is-live{ border-color:#C9DFD4; }
.biz.is-live .biz-ic{ background:#E4F1E9; color:#1F6A49; }
.biz.is-soon{ background:#FBF9F5; }
.biz.is-cost .biz-ic{ background:var(--amber-soft); color:#9C4F16; }
.biz-tag{ position:absolute; top:20px; right:20px; }

/* ---------- 账号卡 ---------- */
.acct{ display:flex; flex-direction:column; gap:16px; }
@media(min-width:700px){ .acct{ flex-direction:row; align-items:center; } }
.acct-qr{
  width:104px; height:104px; flex:0 0 104px; border-radius:var(--r);
  border:1px solid var(--line-2); background:#fff; padding:8px;
  display:grid; place-items:center;
}
/* 账号头像（真实素材） */
.acct-av-lg{
  width:76px; height:76px; flex:0 0 76px; border-radius:50%;
  object-fit:cover; background:var(--sea-soft);
  border:2px solid var(--bg-elev);
  box-shadow:0 0 0 1px var(--line-2), var(--sh-1);
}
@media(max-width:699px){ .acct-av-lg{ width:60px; height:60px; flex:0 0 60px; } }
.acct-main{ flex:1; min-width:0; }
.acct-name{ font-size:17px; font-weight:800; display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.acct-desc{ font-size:14px; color:var(--ink-2); margin:7px 0 12px; }
.acct-meta{ display:flex; gap:16px; flex-wrap:wrap; font-size:12.5px; color:var(--ink-3); font-family:var(--f-mono); }
.acct-act{ display:flex; gap:9px; flex-wrap:wrap; }
@media(min-width:700px){ .acct-act{ flex-direction:column; min-width:132px; } }

.plat{
  display:inline-grid; place-items:center; width:22px; height:22px; border-radius:6px;
  font-size:11px; font-weight:800; color:#fff; letter-spacing:-.02em;
}
.p-douyin{ background:#161823; }
.p-kuaishou{ background:#FF5A18; }
.p-sph{ background:#0EBE4B; }
.p-bili{ background:#00A1D6; }
.p-xhs{ background:#FF2442; }

.ph{
  border-bottom:1px dashed var(--line-2); color:var(--ink-3);
  font-weight:600; padding-bottom:1px;
}

/* 平台分组标题 */
.plat-head{
  display:flex; align-items:center; gap:11px; margin:0 0 16px;
  padding-bottom:13px; border-bottom:1px solid var(--line);
}
.plat-head h3{ font-size:17px; }

/* 关注打卡 */
.check-in{
  display:flex; align-items:center; gap:11px; flex-wrap:wrap;
  padding:15px 18px; border-radius:var(--r);
  background:var(--sea-soft); border:1px solid #C2D8DD;
}
.check-in .btn.is-done{ background:var(--ok); border-color:var(--ok); color:#fff; }

/* ---------- 账号卡（带真实二维码） ---------- */
.acct-card{ display:flex; flex-direction:column; }
.acct-card-head{
  display:flex; align-items:center; gap:12px;
  padding-bottom:15px; margin-bottom:16px; border-bottom:1px solid var(--line);
}
.acct-card-name{ font-size:17px; font-weight:800; line-height:1.25; }
.acct-id{
  font-family:var(--f-mono); color:var(--sea); font-size:13px;
  letter-spacing:.03em; font-variant-numeric:tabular-nums;
}
.acct-card-body{ display:flex; gap:18px; align-items:flex-start; flex:1; }
.acct-card-qr{
  width:132px; height:132px; flex:0 0 132px;
  border-radius:var(--r-sm); border:1px solid var(--line-2);
  background:#fff; object-fit:contain;
}
.acct-card-info{ flex:1; min-width:0; }
.acct-card-act{ display:flex; gap:9px; flex-wrap:wrap; margin-top:18px; }
@media(max-width:520px){
  .acct-card-body{ flex-direction:column; gap:14px; }
  .acct-card-qr{ width:170px; height:170px; flex:0 0 170px; margin:0 auto; }
  .acct-card-act .btn{ flex:1 1 44%; }
}

/* ---------- 表格 ---------- */
.tbl-wrap{ overflow-x:auto; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--bg-elev); box-shadow:var(--sh-1); -webkit-overflow-scrolling:touch; }
/* 移动端横向滚动提示：sticky 定位，滚动时保持可见 */
@media(max-width:700px){
  .tbl-wrap::before{
    content:"← 左右滑动查看完整表格 →";
    display:block; position:sticky; left:0;
    width:calc(100vw - 44px); max-width:100%;
    padding:9px 0; text-align:center;
    font-size:11.5px; letter-spacing:.04em; color:var(--ink-3);
    background:#FBF9F5; border-bottom:1px solid var(--line);
  }
}
table{ width:100%; border-collapse:collapse; font-size:14px; min-width:540px; }
thead th{
  text-align:left; padding:14px 18px; font-size:12px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-3); font-weight:700;
  background:#FBF9F5; border-bottom:1px solid var(--line); white-space:nowrap;
}
tbody td{ padding:15px 18px; border-bottom:1px solid var(--line); vertical-align:middle; }
tbody tr:last-child td{ border-bottom:0; }
td.num,th.num{ text-align:right; font-family:var(--f-mono); font-variant-numeric:tabular-nums; }
.tbl-demo td{ color:var(--ink-3); }
.tbl-demo .ph{ color:#B4AFA4; }

/* ---------- 空态 ---------- */
.empty{
  text-align:center; padding:56px 26px;
  border:1px dashed var(--line-2); border-radius:var(--r-lg); background:#FBF9F5;
}
.empty-ic{
  width:58px; height:58px; margin:0 auto 20px; border-radius:50%;
  display:grid; place-items:center; background:var(--sea-soft); color:var(--sea);
}
.empty h3{ font-size:19px; margin-bottom:10px; }
.empty p{ margin:0 auto; max-width:34em; font-size:14.5px; color:var(--ink-2); }

/* ---------- 时间线 ---------- */
.tl{ position:relative; padding-left:26px; }
.tl::before{ content:""; position:absolute; left:6px; top:8px; bottom:8px; width:1px; background:var(--line-2); }
.tl-item{ position:relative; padding-bottom:26px; }
.tl-item::before{
  content:""; position:absolute; left:-25px; top:8px; width:11px; height:11px;
  border-radius:50%; background:var(--bg); border:2px solid var(--line-2);
}
.tl-item.done::before{ background:var(--ok); border-color:var(--ok); }
.tl-item.now::before{ background:var(--amber); border-color:var(--amber); box-shadow:0 0 0 5px rgba(196,105,42,.14); }
.tl-date{ font-family:var(--f-mono); font-size:12px; color:var(--ink-3); letter-spacing:.04em; }
.tl-item h4{ font-size:15.5px; margin:5px 0 5px; }
.tl-item p{ margin:0; font-size:14px; color:var(--ink-2); }

/* ---------- 折叠 ---------- */
.acc{ border-top:1px solid var(--line); }
.acc-item{ border-bottom:1px solid var(--line); }
.acc-q{
  width:100%; background:none; border:0; text-align:left;
  padding:21px 42px 21px 0; position:relative;
  font-size:16.5px; font-weight:700; line-height:1.5; color:var(--ink);
}
.acc-q::after{
  content:""; position:absolute; right:8px; top:50%; width:9px; height:9px;
  border-right:2px solid var(--ink-3); border-bottom:2px solid var(--ink-3);
  transform:translateY(-70%) rotate(45deg); transition:.25s var(--ease);
}
.acc-item.open .acc-q::after{ transform:translateY(-30%) rotate(-135deg); }
.acc-a{ display:none; padding:0 42px 24px 0; font-size:15px; color:var(--ink-2); line-height:1.78; }
.acc-item.open .acc-a{ display:block; }
.acc-a p{ margin:0 0 12px; }
.acc-a p:last-child{ margin-bottom:0; }
.sec-deep .acc,.sec-deep .acc-item{ border-color:rgba(255,255,255,.12); }
.sec-deep .acc-q{ color:#fff; }
.sec-deep .acc-q::after{ border-color:#7FA3AC; }
.sec-deep .acc-a{ color:#A9C2C8; }

/* ---------- 引用 / 声明块 ---------- */
.note{
  border-left:3px solid var(--amber); background:#FBF9F5;
  border-radius:0 var(--r) var(--r) 0; padding:18px 22px;
  font-size:14.5px; color:var(--ink-2); line-height:1.75;
}
.note strong{ color:var(--ink); }
.sec-deep .note,.sec-sea .note{ background:rgba(255,255,255,.06); color:#B9CDD2; border-left-color:var(--amber-2); }
.sec-deep .note strong,.sec-sea .note strong{ color:#fff; }

/* 深色区块里的表格。
   为什么需要这一段：`.tbl-wrap` 自带**白色**背景（--bg-elev），
   而 `.sec-deep` 会把文字设成浅色。两者一碰就是"白底 + 浅字"，几乎看不见 ——
   站长报的 how.html「哪个赚钱，哪个花钱」那张表就是这个。
   沿用这个区块里其它组件的同一套做法：半透明白底 + 浅色字。
   （how.html 那处原本只在 .tbl-wrap 上写了 border-color:rgba(255,255,255,.12)，
     说明当初想的就是深色表 —— 只是背景没跟着改。） */
.sec-deep .tbl-wrap,.sec-sea .tbl-wrap{
  background:rgba(255,255,255,.04);
  border-color:rgba(255,255,255,.14);
  box-shadow:none;
}
.sec-deep .tbl-wrap::before,.sec-sea .tbl-wrap::before{
  background:rgba(255,255,255,.05);
  border-bottom-color:rgba(255,255,255,.14);
  color:#8FB0B8;
}
.sec-deep thead th,.sec-sea thead th{
  background:rgba(255,255,255,.07);
  border-bottom-color:rgba(255,255,255,.16);
  color:#A9C2C8;
}
.sec-deep tbody td,.sec-sea tbody td{ border-bottom-color:rgba(255,255,255,.10); }
/* 行内的 style="color:#CFE0E4" 是当初为深色表写的，留着即可；
   这里补一条兜底，防止哪天有人把行内样式去掉就又变成浅字压浅底。 */
.sec-deep tbody td,.sec-sea tbody td{ color:#CFE0E4; }

.pledge{
  border:1px solid #C2D8DD; background:linear-gradient(180deg,#F1F7F8,#E9F1F3);
  border-radius:var(--r-lg); padding:26px 26px 24px;
}
.pledge h3{ font-size:18px; margin-bottom:12px; color:var(--sea); }
.pledge ul{ margin:0; padding-left:0; list-style:none; }
.pledge li{ position:relative; padding-left:26px; margin-bottom:11px; font-size:14.5px; color:var(--ink-2); line-height:1.7; }
.pledge li:last-child{ margin-bottom:0; }
.pledge li::before{
  content:""; position:absolute; left:0; top:8px; width:14px; height:8px;
  border-left:2px solid var(--ok); border-bottom:2px solid var(--ok);
  transform:rotate(-45deg);
}

/* ---------- 页脚 ---------- */
.foot{ background:var(--bg-deep); color:#9FBAC1; padding:60px 0 34px; font-size:14px; }
.foot-grid{ display:grid; gap:34px; grid-template-columns:1fr; }
@media(min-width:820px){ .foot-grid{ grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:30px; } }
.foot h4{ font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:#6E99A4; margin-bottom:15px; font-weight:700; }
.foot a{ display:block; padding:5px 0; color:#9FBAC1; transition:.18s; }
.foot a:hover{ color:#fff; }
.foot-brand .brand-mark{ color:#7FC3D2; }
.foot-brand .brand-name{ color:#fff; }
.foot-desc{ margin-top:16px; font-size:13.5px; line-height:1.75; color:#88A6AE; max-width:30em; }
.foot-legal{
  margin-top:40px; padding-top:26px; border-top:1px solid rgba(255,255,255,.1);
  font-size:12.5px; line-height:1.85; color:#7C9AA2;
}
.foot-legal strong{ color:#CFE0E4; }
.foot-bot{
  margin-top:22px; display:flex; justify-content:space-between; gap:14px;
  flex-wrap:wrap; font-size:12px; color:#628390;
}

/* ---------- 模态 ---------- */
.modal{
  position:fixed; inset:0; z-index:200; display:none;
  align-items:center; justify-content:center; padding:22px;
  background:rgba(11,42,51,.56); backdrop-filter:blur(4px);
}
.modal.open{ display:flex; }
.modal-box{
  background:var(--bg-elev); border-radius:var(--r-xl); padding:32px;
  max-width:400px; width:100%; text-align:center; box-shadow:var(--sh-3);
}
.modal-box h3{ font-size:20px; margin-bottom:9px; }
.modal-box p{ margin:0 0 22px; font-size:14.5px; color:var(--ink-2); }
.qr-lg{
  width:210px; height:210px; margin:0 auto 20px; padding:14px;
  border:1px solid var(--line-2); border-radius:var(--r); background:#fff;
}
.modal-close{ margin-top:4px; }

/* ---------- 扫码弹窗（真实素材版） ---------- */
.modal-box-qr{ max-width:430px; max-height:92vh; overflow-y:auto; padding:26px; }
.qr-img{
  display:block; width:auto; max-width:100%; max-height:42vh;
  margin:0 auto 20px; border-radius:var(--r); border:1px solid var(--line-2);
  background:#fff;
}
/* 抖音号：始终可用的兜底方案 */
.modal-id{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  font-size:13px; color:var(--ink-2);
  background:var(--sea-soft); border:1px solid #C2D8DD;
  border-radius:var(--r-sm); padding:10px 14px; margin:0 0 14px;
  text-align:left;
}
.modal-id b{
  font-family:var(--f-mono); font-size:17px; letter-spacing:.04em;
  color:var(--sea); font-variant-numeric:tabular-nums;
}
.modal-acts{ display:grid; gap:9px; }
.modal-note{
  margin:16px 0 0; font-size:12px; line-height:1.65; color:var(--ink-3);
  text-align:left;
}

/* ---------- 工具类 ---------- */
.mt0{margin-top:0}.mt8{margin-top:8px}.mt14{margin-top:14px}.mt20{margin-top:20px}
.mt28{margin-top:28px}.mt40{margin-top:40px}.mt56{margin-top:56px}
.mb0{margin-bottom:0}.mb8{margin-bottom:8px}.mb14{margin-bottom:14px}.mb20{margin-bottom:20px}
.mb28{margin-bottom:28px}.mb40{margin-bottom:40px}
.tc{text-align:center}
.mx-auto{margin-left:auto;margin-right:auto}
.maxw-n{max-width:44em}
.inline-ic{ display:inline-flex; vertical-align:-3px; }
.nowrap{ white-space:nowrap; }
.ml-auto{ margin-left:auto; }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }

/* 设计稿水印 */
.draft-flag{
  display:inline-flex; align-items:center; gap:7px;
  background:#FBE9E1; border:1px solid #EFC9B4; color:#9C4F16;
  padding:5px 13px; border-radius:var(--r-pill); font-size:11.5px; font-weight:700;
  letter-spacing:.08em;
}

@media print{ .nav,.foot,.btn{ display:none; } }

/* ---------- 导航里的登录入口（v0.2）----------
   这条必须放在 style.css 而不是 auth.css：导航是全站共用的外壳，
   而 auth.css 只有登录/注册/个人中心四个页面引用。
   放错地方的后果实测过 —— 其余 11 个页面上按钮没被隐藏，窄屏导航直接溢出 15px。 */
.nav-auth{ display:none; white-space:nowrap; }
@media(min-width:1040px){ .nav-auth{ display:inline-flex; align-items:center; } }
.nav-auth + .nav-cta{ margin-left:10px; }
@media(max-width:1040px){ .nav-drawer a[data-auth-drawer]{ color:var(--sea); } }