/* ============================================================
   K线笔记 · 视觉系统 v5  —  蓝白调（OKX 官方调性）
   白/浅蓝灰底 + 深字 + 蓝色主色 + 绿涨红跌（仅图表数据）
   清晰无衬线 + 等宽数字 + bento 仪表盘
   （独立第三方品牌，不使用任何交易所官方标识）
   ============================================================ */

:root{
  /* 背景 / 表面（蓝白） */
  --paper:#f7f9fc;        /* 页面底（极浅蓝灰） */
  --paper-2:#eef3fb;      /* 交替区块底 */
  --card:#ffffff;         /* 卡片表面 */
  --surface-2:#f0f5ff;    /* 蓝色微染表面 */
  --line:#e4e9f2;         /* 发丝边 */
  --line-strong:#d2dae8;
  /* 文字 */
  --ink:#0e1526;          /* 主文字（深蓝墨） */
  --ink-soft:#5a6478;     /* 次文字 */
  --ink-faint:#8b94a6;    /* 标签/三级 */
  /* 主色：OKX 蓝 */
  --accent:#1e5eff;
  --accent-dk:#1448d6;
  --accent-soft:#e8f0ff;
  /* 数据色：涨绿跌红 */
  --up:#0ea66f;
  --up-soft:#e3f6ee;
  --down:#e64545;
  --down-soft:#fceaea;
  --warnbg:#fdf1f1;
  /* 深色区块（footer / 结果面板 / 蓝 CTA） */
  --navy:#0e1526;
  /* 阴影（浅色柔和） */
  --sh-sm:0 1px 2px rgba(14,21,38,.05);
  --sh-md:0 10px 30px rgba(14,21,38,.08);
  --sh-lg:0 22px 55px rgba(14,21,38,.12);
  /* 字体（全无衬线） */
  --sans:"Noto Sans SC",-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
  --serif:"Noto Sans SC",sans-serif;
  --label:"Space Grotesk","Noto Sans SC",sans-serif;
  --disp:"Space Grotesk","Noto Sans SC",sans-serif;
  --num:"Space Grotesk","Noto Sans SC",monospace;
  --wrap:1180px;
  --read:720px;
  --r:14px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;font-family:var(--sans);color:var(--ink);background:var(--paper);
  line-height:1.8;font-size:17px;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent);text-decoration:none;transition:color .15s}
a:hover{color:var(--accent-dk)}
h1,h2,h3,h4{font-family:var(--disp);font-weight:700;letter-spacing:-.02em;line-height:1.18;color:var(--ink);margin:0}
.serif{font-family:var(--disp)}
.mono-num,.num{font-family:var(--num);font-variant-numeric:tabular-nums;letter-spacing:-.01em}

/* ---------- 容器 ---------- */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 26px}
.read{max-width:var(--read);margin:0 auto}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

/* ---------- 顶部强调细线 ---------- */
.tape{height:3px;background:var(--accent)}

/* ---------- 刊头 / 导航 ---------- */
.masthead{background:rgba(247,249,252,.85);backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:40}
.mast-row{display:flex;align-items:center;gap:18px;padding:14px 26px;max-width:var(--wrap);margin:0 auto}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);white-space:nowrap}
.brand:hover{color:var(--ink)}
.brand .mark{width:34px;height:34px;flex:0 0 auto}
.brand span{font-family:var(--disp);font-weight:700;font-size:21px;letter-spacing:-.01em;line-height:1.05}
.brand small{display:block;font-family:var(--label);font-weight:400;font-size:10.5px;color:var(--ink-faint);letter-spacing:.05em;text-transform:uppercase;margin-top:3px}
.nav{margin-left:auto;display:flex;align-items:center;gap:2px}
.nav a{font-family:var(--label);font-weight:500;font-size:14px;color:var(--ink-soft);text-decoration:none;padding:10px 14px;border-radius:8px;min-height:44px;display:inline-flex;align-items:center;letter-spacing:.01em;transition:.15s}
.nav a:hover{color:var(--ink);background:var(--paper-2)}
.nav a.cta{background:var(--accent);color:#fff;font-weight:600;margin-left:8px;padding:10px 18px;border-radius:9px}
.nav a.cta:hover{background:var(--accent-dk);color:#fff}
.nav-toggle{display:none;margin-left:auto;background:none;border:1px solid var(--line-strong);border-radius:9px;width:46px;height:44px;cursor:pointer;align-items:center;justify-content:center}
.nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{content:"";display:block;width:19px;height:1.5px;background:var(--ink);position:relative;transition:.2s}
.nav-toggle span::before{position:absolute;top:-6px}
.nav-toggle span::after{position:absolute;top:6px}

@media(max-width:820px){
  .nav-toggle{display:inline-flex}
  .nav{position:fixed;inset:65px 0 auto 0;flex-direction:column;align-items:stretch;gap:0;background:#fff;border-bottom:1px solid var(--line);padding:8px 18px 18px;transform:translateY(-130%);transition:transform .25s ease;box-shadow:var(--sh-md);margin-left:0}
  .nav.open{transform:translateY(0)}
  .nav a{font-size:16px;padding:14px 10px;border-bottom:1px solid var(--line)}
  .nav a.cta{margin:10px 0 0;justify-content:center;border-radius:10px}
}

/* ---------- 顶部 disclosure 披露条 ---------- */
.disclosure{background:var(--surface-2);border-bottom:1px solid var(--line)}
.disclosure .wrap{padding:9px 26px;font-family:var(--label);font-size:12.5px;color:var(--ink-soft);letter-spacing:.01em;line-height:1.6}
.disclosure a{color:var(--accent)}
.disclosure b{font-family:var(--num);font-weight:600;color:var(--ink)}

/* ---------- Hero（旧两栏，文章页/合规页不用，保留兜底） ---------- */
.hero{padding:78px 0 64px;position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;top:-160px;right:-120px;width:560px;height:560px;border-radius:50%;background:radial-gradient(circle,rgba(30,94,255,.10),transparent 62%);pointer-events:none}
.hero .wrap{display:grid;grid-template-columns:1.02fr .98fr;gap:48px;align-items:center;position:relative}
.hero .kicker{display:inline-flex;align-items:center;gap:9px;font-family:var(--label);font-weight:600;font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:24px;background:var(--accent-soft);padding:7px 14px;border-radius:30px}
.hero .kicker::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent)}
.hero h1{font-size:clamp(36px,5.6vw,62px);margin:0 0 22px;letter-spacing:-.035em;line-height:1.06}
.hero h1 .hl{color:var(--accent)}
.hero .lede{font-size:clamp(17px,1.6vw,20px);color:var(--ink-soft);max-width:46ch;margin:0 0 32px;line-height:1.75}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.hero-art{width:100%}
@media(max-width:900px){.hero{padding:48px 0 42px}.hero .wrap{grid-template-columns:1fr;gap:34px}.hero-art{max-width:480px}}

/* ---------- 按钮 ---------- */
.btn{font-family:var(--label);font-weight:600;font-size:15.5px;text-decoration:none;display:inline-flex;align-items:center;gap:9px;padding:14px 26px;border-radius:11px;min-height:52px;border:1px solid transparent;cursor:pointer;transition:transform .14s ease,box-shadow .14s ease,background .18s,color .18s;letter-spacing:.01em}
.btn-primary{background:var(--accent);color:#fff;box-shadow:0 6px 18px rgba(30,94,255,.22)}
.btn-primary:hover{background:var(--accent-dk);transform:translateY(-2px);box-shadow:0 10px 28px rgba(30,94,255,.3);color:#fff}
.btn-ghost{background:#fff;color:var(--ink);border-color:var(--line-strong)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px)}
.btn-dark{background:var(--accent);color:#fff}
.btn-dark:hover{background:var(--accent-dk);color:#fff;transform:translateY(-2px)}
.btn .arr{transition:transform .15s}
.btn:hover .arr{transform:translateX(4px)}

/* ---------- 通用区块 ---------- */
section{padding:50px 0}
.eyebrow{font-family:var(--label);font-weight:600;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin:0 0 14px;display:flex;align-items:center;gap:9px}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--accent);display:inline-block}
.h-2{font-size:clamp(26px,3.6vw,38px);margin:0 0 12px;letter-spacing:-.03em}
.sub{color:var(--ink-soft);max-width:58ch;margin:0 0 34px;font-size:17.5px}

/* ============================================================
   首页 bento 仪表盘
   ============================================================ */
.hero-bento{padding:30px 0 18px;position:relative;overflow:hidden}
.hero-bento::before{content:"";position:absolute;top:-200px;left:50%;transform:translateX(-50%);width:820px;height:540px;border-radius:50%;background:radial-gradient(circle,rgba(30,94,255,.08),transparent 64%);pointer-events:none}
.bento{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;position:relative;grid-auto-rows:minmax(118px,auto)}
.bento .tile{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:24px;display:flex;flex-direction:column;position:relative;overflow:hidden;box-shadow:var(--sh-sm);transition:border-color .18s,transform .18s,box-shadow .18s}
.bento a.tile:hover{border-color:var(--accent);transform:translateY(-3px);box-shadow:var(--sh-md)}
.tile .tlab{font-family:var(--label);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:auto}
.tile .tnum{font-family:var(--num);font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.02em;line-height:1}

.tile.t-hero{grid-column:span 2;grid-row:span 3;justify-content:center;background:linear-gradient(165deg,#ffffff,#eef4ff);border-color:var(--line-strong)}
.tile.t-hero .kick{display:inline-flex;align-items:center;gap:9px;align-self:flex-start;font-family:var(--label);font-weight:600;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);background:var(--accent-soft);padding:7px 13px;border-radius:30px;margin-bottom:22px}
.tile.t-hero .kick::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent)}
.tile.t-hero h1{font-size:clamp(30px,3.9vw,50px);line-height:1.06;letter-spacing:-.035em;margin:0 0 16px}
.tile.t-hero h1 .hl{color:var(--accent)}
.tile.t-hero p{color:var(--ink-soft);font-size:16.5px;line-height:1.7;margin:0 0 24px;max-width:36ch}
.tile.t-hero .acts{display:flex;flex-wrap:wrap;gap:12px}

.tile.t-chart{grid-column:span 2;grid-row:span 3;padding:0;background:#fff;border-color:var(--line-strong)}
.tile.t-chart svg{width:100%;height:100%;display:block}

.tile.t-stat{grid-column:span 1;justify-content:space-between}
.tile.t-stat .tnum{font-size:clamp(30px,3.4vw,44px);color:var(--ink);margin-bottom:6px}
.tile.t-stat .tnum.green{color:var(--accent)}
.tile.t-stat .tdesc{color:var(--ink-soft);font-size:13.5px;line-height:1.5}
.tile.t-stat .tdesc b{color:var(--ink)}

.tile.t-calc{grid-column:span 2;justify-content:space-between;background:linear-gradient(165deg,#ffffff,#eef4ff)}
.tile.t-calc .crow{display:flex;justify-content:space-between;align-items:baseline;padding:7px 0;border-bottom:1px solid var(--line)}
.tile.t-calc .crow:last-of-type{border-bottom:0}
.tile.t-calc .crow .l{color:var(--ink-soft);font-size:13px;font-family:var(--label);letter-spacing:.03em}
.tile.t-calc .crow .v{font-family:var(--num);font-weight:700;font-size:18px}
.tile.t-calc .clink{margin-top:12px;font-family:var(--label);font-weight:600;font-size:14px;color:var(--accent);display:inline-flex;align-items:center;gap:7px}

.tile.t-link{grid-column:span 1;justify-content:flex-end;text-decoration:none;color:var(--ink)}
.tile.t-link .tt{font-family:var(--disp);font-weight:700;font-size:17px;letter-spacing:-.01em;margin-bottom:5px;line-height:1.3;color:var(--ink)}
.tile.t-link p{margin:0;color:var(--ink-soft);font-size:13.5px;line-height:1.55}
.tile.t-link .tag{align-self:flex-start;font-family:var(--label);font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);background:var(--accent-soft);padding:3px 9px;border-radius:6px;margin-bottom:auto}
.tile.t-link .tag.r{color:var(--down);background:var(--down-soft)}
.tile.t-link .tag.b{color:var(--accent);background:var(--accent-soft)}
.tile.t-wide2{grid-column:span 2}

@media(max-width:900px){
  .bento{grid-template-columns:repeat(2,1fr)}
  .tile.t-hero,.tile.t-chart,.tile.t-calc,.tile.t-wide2{grid-column:span 2}
  .tile.t-hero{grid-row:auto}.tile.t-chart{grid-row:auto;min-height:300px}
}
@media(max-width:560px){
  .bento{grid-template-columns:1fr;gap:12px}
  .bento .tile{grid-column:span 1 !important;grid-row:auto !important}
  .tile.t-chart{min-height:260px}
}

/* ---------- 卡片网格（文章索引 / related） ---------- */
.grid{display:grid;gap:18px}
.grid.c2{grid-template-columns:repeat(2,1fr)}
.grid.c3{grid-template-columns:repeat(3,1fr)}
@media(max-width:860px){.grid.c3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:580px){.grid.c2,.grid.c3{grid-template-columns:1fr}}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:24px;text-decoration:none;color:var(--ink);display:flex;flex-direction:column;box-shadow:var(--sh-sm);transition:transform .18s ease,border-color .18s,box-shadow .18s}
.card:hover{transform:translateY(-4px);box-shadow:var(--sh-md);border-color:var(--accent);color:var(--ink)}
.card .tag{align-self:flex-start;font-family:var(--label);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:4px 10px;margin-bottom:16px;color:var(--accent);background:var(--accent-soft);border-radius:6px}
.tag.t-up{color:var(--up);background:var(--up-soft)}
.tag.t-down{color:var(--down);background:var(--down-soft)}
.tag.t-ink{color:var(--ink-soft);background:var(--paper-2)}
.tag.t-blue{color:var(--accent);background:var(--accent-soft)}
.card h3{font-size:20px;margin:0 0 10px;line-height:1.32;letter-spacing:-.02em}
.card p{margin:0;color:var(--ink-soft);font-size:15px;line-height:1.66}
.card .meta{margin-top:auto;padding-top:18px;color:var(--ink-faint);font-size:12.5px;font-family:var(--label);letter-spacing:.04em;text-transform:uppercase;display:flex;gap:14px}
.card.feature{grid-column:1/-1;flex-direction:row;gap:32px;align-items:center;background:linear-gradient(135deg,#ffffff,#eef4ff);border-color:var(--line-strong);padding:34px}
.card.feature:hover{transform:translateY(-4px);box-shadow:var(--sh-lg);border-color:var(--accent)}
.card.feature h3{color:var(--ink);font-size:clamp(23px,3vw,30px);line-height:1.22}
.card.feature p{color:var(--ink-soft);font-size:16px}
.card.feature .tag{color:var(--accent);background:var(--accent-soft)}
.card.feature .meta{color:var(--ink-faint)}
.card.feature .feat-art{flex:0 0 230px;width:230px;border-radius:12px;overflow:hidden;border:1px solid var(--line)}
@media(max-width:700px){.card.feature{flex-direction:column;align-items:flex-start;padding:26px}.card.feature .feat-art{width:100%;flex-basis:auto}}

/* ---------- 文章版式 ---------- */
.article-head{padding:50px 0 10px}
.crumb{font-family:var(--label);font-size:12.5px;color:var(--ink-faint);margin-bottom:22px;letter-spacing:.04em;text-transform:uppercase}
.crumb a{color:var(--ink-faint)}
.crumb a:hover{color:var(--accent)}
.article-head h1{font-size:clamp(29px,4.6vw,46px);margin:0 0 20px;max-width:21ch;letter-spacing:-.03em;line-height:1.14}
.byline{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;font-size:13px;color:var(--ink-faint);font-family:var(--label);letter-spacing:.03em;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:15px 0;margin-top:8px}
.byline .who{color:var(--ink);font-weight:600}
.byline time{color:var(--ink-faint)}

.prose{font-size:17.5px;line-height:1.9;color:#2a3242}
.prose>p,.prose>ul,.prose>ol,.prose>h2,.prose>h3,.prose>figure,.prose>.callout,.prose>.hands-on,.prose>.tbl-wrap,.prose>.faq,.prose>blockquote,.prose>.inline-cta,.prose>.note{max-width:var(--read);margin-left:auto;margin-right:auto}
.prose h2{font-size:clamp(23px,3vw,31px);margin:54px auto 16px;padding-top:24px;border-top:1px solid var(--line);letter-spacing:-.025em;position:relative;color:var(--ink)}
.prose h2::before{content:"";position:absolute;left:0;top:-1px;width:46px;height:3px;background:var(--accent)}
.prose h2.r::before{background:var(--down)}
.prose h3{font-size:20px;margin:34px auto 12px;letter-spacing:-.01em;color:var(--ink)}
.prose p{margin:0 auto 21px}
.prose ul,.prose ol{margin:0 auto 22px;padding-left:24px}
.prose li{margin:8px 0}
.prose li::marker{color:var(--accent)}
.prose strong{font-weight:600;color:var(--ink)}
.prose mark{background:var(--accent-soft);color:var(--accent-dk);padding:1px 5px;border-radius:4px}
.prose blockquote{border-left:3px solid var(--accent);padding:6px 0 6px 22px;margin:30px auto;font-size:20px;color:var(--ink);line-height:1.6;letter-spacing:-.01em}
.prose code{font-family:var(--num);background:var(--paper-2);border:1px solid var(--line);border-radius:5px;padding:1px 6px;font-size:.88em;color:var(--accent-dk)}
.prose figure{margin:32px auto}
.prose figure img{border:1px solid var(--line);border-radius:14px}
.prose figcaption{font-size:13px;color:var(--ink-faint);margin-top:11px;text-align:center;font-family:var(--label);letter-spacing:.03em}

/* 目录 TOC */
.toc{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:24px 28px;margin:0 auto 40px;max-width:var(--read);box-shadow:var(--sh-sm)}
.toc .toc-t{font-family:var(--label);font-weight:600;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);margin:0 0 14px;display:flex;align-items:center;gap:9px}
.toc .toc-t::before{content:"";width:20px;height:2px;background:var(--accent)}
.toc ol{margin:0;padding-left:0;list-style:none;counter-reset:toc}
.toc li{counter-increment:toc;margin:0;border-bottom:1px solid var(--line)}
.toc li:last-child{border-bottom:0}
.toc a{display:flex;gap:15px;padding:11px 0;text-decoration:none;color:var(--ink-soft);font-size:15.5px;line-height:1.5}
.toc a::before{content:counter(toc,decimal-leading-zero);font-family:var(--num);color:var(--accent);font-size:13px;font-weight:600;flex:0 0 auto;padding-top:2px}
.toc a:hover{color:var(--accent)}

/* hands-on 编辑组实测 */
.hands-on{background:var(--surface-2);border:1px solid #d4e2ff;border-left:3px solid var(--accent);border-radius:0 12px 12px 0;padding:20px 24px;margin:32px auto}
.hands-on .ho-t{font-family:var(--label);font-weight:600;font-size:12px;color:var(--accent-dk);margin-bottom:9px;letter-spacing:.1em;text-transform:uppercase}
.hands-on p{margin:0;font-size:16.5px;line-height:1.78;color:#2a3242}

/* callout / note / warn */
.callout{background:var(--surface-2);border:1px solid #d4e2ff;border-radius:12px;padding:18px 22px;margin:30px auto}
.note{background:var(--paper-2);border:1px solid var(--line);border-radius:12px;padding:18px 22px;margin:30px auto;font-size:16px}
.warn{background:var(--warnbg);border:1px solid #f3cfcf;border-left:3px solid var(--down);border-radius:0 12px 12px 0;padding:20px 24px;margin:32px auto}
.warn .w-t{font-family:var(--label);font-weight:600;color:var(--down);margin-bottom:9px;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase}
.warn p{margin:0 0 7px;font-size:16.5px;line-height:1.76;color:#7a3535}

/* 表格 */
.tbl-wrap{overflow-x:auto;margin:32px auto;border:1px solid var(--line);border-radius:14px;box-shadow:var(--sh-sm)}
table{border-collapse:collapse;width:100%;font-size:15.5px;background:var(--card)}
th,td{padding:13px 18px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top;color:#2a3242}
thead th{background:var(--paper-2);color:var(--ink-faint);font-family:var(--label);font-weight:600;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase}
tbody tr:last-child td{border-bottom:0}
td .up{color:var(--up);font-weight:600;font-family:var(--num)}
td .down{color:var(--down);font-weight:600;font-family:var(--num)}

/* FAQ */
.faq{margin:36px auto}
.faq details{border-bottom:1px solid var(--line);background:transparent}
.faq details:first-of-type{border-top:1px solid var(--line)}
.faq summary{cursor:pointer;padding:20px 0;font-family:var(--disp);font-weight:600;font-size:18px;list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center;letter-spacing:-.01em;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--label);font-size:24px;color:var(--accent);flex:0 0 auto;transition:transform .2s;font-weight:400}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .faq-a{padding:0 0 20px;font-size:16.5px;color:var(--ink-soft);line-height:1.78}
.faq .faq-a p{margin:0 0 10px}
.faq .faq-a p:last-child{margin:0}

/* 内文 inline CTA */
.inline-cta{border:1px solid #d4e2ff;border-left:3px solid var(--accent);background:var(--surface-2);padding:20px 24px;border-radius:0 12px 12px 0;margin:34px auto;font-size:17px;line-height:1.7;color:#2a3242}
.inline-cta a{color:var(--accent);font-weight:600}

/* 文末 CTA 块（蓝色实底，OKX 风） */
.endcta{background:linear-gradient(135deg,#1e5eff,#1448d6);border-radius:20px;padding:46px 40px;margin:56px auto 8px;max-width:var(--read);text-align:center;position:relative;overflow:hidden;box-shadow:0 18px 44px rgba(30,94,255,.28)}
.endcta h3{color:#fff;font-size:clamp(23px,3.4vw,30px);margin:0 0 14px;letter-spacing:-.02em;line-height:1.25}
.endcta p{color:#dbe6ff;margin:0 auto 26px;max-width:44ch;font-size:16.5px;line-height:1.7}
.endcta .btn-primary{background:#fff;color:var(--accent);box-shadow:none}
.endcta .btn-primary:hover{background:#eef4ff;color:var(--accent-dk)}
.endcta .fine{font-size:12.5px;color:#bcccf5;margin-top:20px;font-family:var(--label);letter-spacing:.02em;line-height:1.6}
.endcta .fine a{color:#fff;text-decoration:underline}

/* 决策树 / 评分卡 / 时间线 */
.dtree{counter-reset:st;margin:30px auto;max-width:var(--read)}
.dtree .step{display:flex;gap:20px;padding:20px 0;border-bottom:1px solid var(--line)}
.dtree .step:last-child{border-bottom:0}
.dtree .step .n{counter-increment:st;flex:0 0 40px;height:40px;border:1px solid var(--accent);border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--num);font-weight:600;color:var(--accent);background:var(--accent-soft)}
.dtree .step .n::before{content:counter(st,decimal-leading-zero)}
.dtree .step h4{margin:4px 0 6px;font-size:18px;letter-spacing:-.01em;color:var(--ink)}
.dtree .step p{margin:0;color:var(--ink-soft);font-size:15.5px;line-height:1.7}

.timeline{border-left:2px solid var(--line-strong);margin:30px auto 30px 14px;max-width:calc(var(--read) - 14px);padding-left:28px}
.timeline .ev{position:relative;padding:0 0 26px}
.timeline .ev::before{content:"";position:absolute;left:-35px;top:5px;width:12px;height:12px;border-radius:50%;background:var(--accent);border:3px solid var(--paper)}
.timeline .ev.r::before{background:var(--down)}
.timeline .ev .d{font-family:var(--label);font-weight:600;color:var(--ink-faint);font-size:12.5px;letter-spacing:.06em;text-transform:uppercase}
.timeline .ev h4{margin:5px 0 6px;font-size:18px;letter-spacing:-.01em;color:var(--ink)}
.timeline .ev p{margin:0;color:var(--ink-soft);font-size:15.5px;line-height:1.7}

.qa-hero{margin:28px auto;max-width:var(--read);display:grid;gap:0;border-top:1px solid var(--line)}
.qa-hero .qa{border-bottom:1px solid var(--line);padding:20px 0}
.qa-hero .qa .q{font-family:var(--disp);font-weight:700;font-size:18px;margin-bottom:8px;color:var(--ink);letter-spacing:-.01em}
.qa-hero .qa .q::before{content:"Q ";font-family:var(--num);color:var(--accent);font-weight:600}
.qa-hero .qa .a{margin:0;color:var(--ink-soft);font-size:16px;line-height:1.72}

.score{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:30px auto;max-width:var(--read)}
@media(max-width:580px){.score{grid-template-columns:1fr}}
.score .col{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:24px;box-shadow:var(--sh-sm)}
.score .col h4{margin:0 0 12px;font-size:19px;letter-spacing:-.01em;color:var(--ink)}
.score .col .big{font-family:var(--num);font-size:42px;font-weight:700;line-height:1;color:var(--accent)}
.score .row{display:flex;justify-content:space-between;border-bottom:1px solid var(--line);padding:9px 0;font-size:14.5px;color:var(--ink-soft)}
.score .row:last-child{border-bottom:0}

/* 形态卡片图鉴 */
.patgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin:30px auto;max-width:var(--read)}
@media(max-width:580px){.patgrid{grid-template-columns:1fr}}
.patgrid .pat{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:20px;box-shadow:var(--sh-sm)}
.patgrid .pat svg{display:block;margin:0 auto 12px}
.patgrid .pat h4{margin:0 0 7px;font-size:17px;text-align:center;letter-spacing:-.01em;color:var(--ink)}
.patgrid .pat p{margin:0;font-size:14.5px;color:var(--ink-soft);line-height:1.62}

/* 速览 / 关键要点 */
.keybox{background:var(--surface-2);border:1px solid #d4e2ff;border-radius:16px;padding:22px 26px;margin:30px auto;max-width:var(--read)}
.keybox .kb-t{font-family:var(--label);font-weight:600;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-dk);margin-bottom:12px;display:flex;align-items:center;gap:9px}
.keybox .kb-t::before{content:"";width:20px;height:2px;background:var(--accent)}
.keybox ul{margin:0;padding-left:20px}
.keybox li{margin:8px 0;font-size:16.5px;line-height:1.7;color:#2a3242}
.keybox li::marker{color:var(--accent)}

/* 相关阅读 */
.related{border-top:1px solid var(--line-strong);margin-top:56px;padding-top:34px}
.related h3{font-size:14px;font-family:var(--label);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);margin:0 0 20px}
.related .grid{gap:16px}

/* ---------- 计算器 ---------- */
.calc{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:30px;box-shadow:var(--sh-md);max-width:var(--read);margin:0 auto}
.calc .tabs{display:flex;gap:8px;margin-bottom:26px;flex-wrap:wrap}
.calc .tabs button{font-family:var(--label);font-weight:600;font-size:14px;padding:10px 18px;min-height:44px;border:1px solid var(--line-strong);background:#fff;border-radius:10px;cursor:pointer;color:var(--ink-soft);transition:.15s;letter-spacing:.02em}
.calc .tabs button.on{background:var(--accent);color:#fff;border-color:var(--accent)}
.calc .field{margin-bottom:18px}
.calc label{display:block;font-family:var(--label);font-weight:600;font-size:13px;margin-bottom:7px;letter-spacing:.03em;text-transform:uppercase;color:var(--ink-soft)}
.calc label .hint{font-weight:400;color:var(--ink-faint);font-family:var(--sans);text-transform:none;letter-spacing:0;font-size:12.5px}
.calc input,.calc select{width:100%;font-family:var(--num);font-size:19px;padding:13px 16px;min-height:52px;border:1px solid var(--line-strong);border-radius:11px;background:#fff;color:var(--ink);font-variant-numeric:tabular-nums}
.calc input:focus,.calc select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.calc .row2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:540px){.calc .row2{grid-template-columns:1fr}}
.calc-out{margin-top:10px;background:var(--navy);border-radius:16px;padding:24px}
.calc-out .ro{display:flex;justify-content:space-between;align-items:baseline;padding:11px 0;border-bottom:1px solid rgba(255,255,255,.1);gap:16px}
.calc-out .ro:last-child{border-bottom:0}
.calc-out .ro .lbl{color:#aab4c8;font-size:13px;font-family:var(--label);letter-spacing:.04em;text-transform:uppercase}
.calc-out .ro .val{font-family:var(--num);font-weight:700;font-size:25px;font-variant-numeric:tabular-nums;color:#fff}
.calc-out .ro .val.up{color:#4cd9a0}
.calc-out .ro .val.down{color:#ff7a7a}

/* ---------- 页脚（深蓝墨） ---------- */
.foot{background:var(--navy);margin-top:70px;padding:54px 0 34px;font-size:14.5px;line-height:1.85;color:#aab4c8}
.foot a{color:#cdd5e4}
.foot a:hover{color:#fff}
.foot .cols{display:grid;grid-template-columns:1.7fr 1fr 1fr;gap:36px}
@media(max-width:740px){.foot .cols{grid-template-columns:1fr 1fr}.foot .brandcol{grid-column:1/-1}}
.foot .brandcol .b{font-family:var(--disp);font-weight:700;font-size:20px;color:#fff;display:flex;align-items:center;gap:10px;margin-bottom:12px}
.foot .brandcol p{margin:0 0 12px;max-width:36ch;color:#8b94a6}
.foot h5{font-family:var(--label);color:#fff;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;margin:0 0 14px}
.foot ul{list-style:none;margin:0;padding:0}
.foot li{margin:8px 0}
.foot .legal{border-top:1px solid rgba(255,255,255,.12);margin-top:40px;padding-top:24px;color:#828ca0;font-size:12.5px}
.foot .legal .risk{background:rgba(230,69,69,.12);border:1px solid rgba(230,69,69,.3);border-radius:12px;padding:15px 18px;margin-bottom:18px;color:#f0b8b8;line-height:1.7}
.foot .legal b{color:#aab4c8}

/* scroll reveal */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}*{scroll-behavior:auto}}

/* 工具/合规页 */
.page{padding:36px 0 14px}
.page .read h2{font-size:clamp(23px,3vw,29px);margin:42px 0 14px;letter-spacing:-.025em;padding-top:22px;border-top:1px solid var(--line);position:relative;color:var(--ink)}
.page .read h2::before{content:"";position:absolute;left:0;top:-1px;width:42px;height:3px;background:var(--accent)}
.page .read p{margin:0 0 17px;line-height:1.86;color:#2a3242}
.page .read ul{margin:0 0 19px;padding-left:22px;color:#2a3242}
.page .read li{margin:8px 0}
.page .read li::marker{color:var(--accent)}

/* diff 更正 */
.diff .old{background:var(--down-soft);text-decoration:line-through;color:var(--down);padding:1px 6px;border-radius:5px}
.diff .new{background:var(--up-soft);color:var(--up);padding:1px 6px;border-radius:5px}
.corr{border:1px solid var(--line);border-radius:14px;padding:20px 24px;margin-bottom:18px;background:var(--card);box-shadow:var(--sh-sm)}
.corr .cd{font-family:var(--label);font-weight:600;color:var(--ink-faint);font-size:12px;margin-bottom:9px;letter-spacing:.06em;text-transform:uppercase}

/* ============================================================
   v5.1 UI 打磨：层次 / 阴影 / 微动效 / 大数字
   ============================================================ */
body{background:linear-gradient(180deg,#e9f0fb 0%,var(--paper) 420px)}
.bento .tile{box-shadow:0 1px 2px rgba(14,21,38,.04),0 6px 16px rgba(14,21,38,.04)}
.bento a.tile:hover{border-color:var(--accent);transform:translateY(-3px);box-shadow:0 16px 38px rgba(30,94,255,.12)}
.tile.t-hero{box-shadow:0 2px 4px rgba(14,21,38,.04),0 18px 40px rgba(30,94,255,.07)}
.tile.t-chart{box-shadow:0 2px 4px rgba(14,21,38,.04),0 18px 40px rgba(14,21,38,.06)}
/* 大数字更突出 */
.tile.t-stat .tnum{font-size:clamp(38px,4.4vw,56px);letter-spacing:-.04em}
.tile.t-stat .tnum.green{background:linear-gradient(135deg,#1e5eff,#3f86ff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
/* 文章磁贴 hover 箭头 */
.tile.t-link{position:relative}
.tile.t-link::after{content:"→";position:absolute;top:20px;right:22px;font-family:var(--label);font-weight:600;color:var(--accent);opacity:0;transform:translateX(-5px);transition:opacity .2s,transform .2s}
.tile.t-link:hover::after{opacity:1;transform:translateX(0)}
.tile.t-link:hover .tt{color:var(--accent)}
/* hero 主标题更紧致有力 */
.tile.t-hero h1{font-weight:700;font-size:clamp(31px,4.1vw,52px)}
/* 按钮：更精致的过渡 */
.btn-primary{box-shadow:0 8px 20px rgba(30,94,255,.24)}
.btn-primary:hover{box-shadow:0 12px 30px rgba(30,94,255,.34)}
/* eyebrow 居中变体可用 */
.eyebrow[style*="center"]{justify-content:center}
/* 区块节奏微调 */
#articles{padding-top:30px}
.hero-bento .bento{gap:16px}

/* ============================================================
   v6 首页专属优惠区（邀请码 + 永久 20% 减免，最显眼）
   ============================================================ */
.offer-wrap{padding:6px 0 0}
.offer{display:grid;grid-template-columns:1.12fr 1fr;gap:30px;align-items:center;background:linear-gradient(120deg,#e9f1ff,#f6f9ff);border:1px solid #cfe0ff;border-radius:22px;padding:28px 32px;box-shadow:0 16px 44px rgba(30,94,255,.12);position:relative;overflow:hidden}
.offer::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--accent)}
.offer .offer-tag{display:inline-block;font-family:var(--label);font-weight:600;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:#fff;background:var(--accent);padding:5px 13px;border-radius:20px;margin-bottom:14px}
.offer h2{font-size:clamp(22px,2.7vw,30px);letter-spacing:-.02em;line-height:1.28;margin:0 0 10px}
.offer h2 .hl{color:var(--accent)}
.offer h2 sup a{color:var(--accent);text-decoration:none;font-size:.6em}
.offer .offer-sub{margin:0;color:var(--ink-soft);font-size:15.5px;line-height:1.6;max-width:46ch}
.offer .codes{display:grid;gap:12px}
.offer .code-row{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:13px 16px;box-shadow:var(--sh-sm)}
.offer .code-row .ci{flex:1;min-width:0}
.offer .code-row .cl{font-family:var(--label);font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:2px}
.offer .code-row .cv{font-family:var(--num);font-weight:700;font-size:23px;letter-spacing:.05em;color:var(--accent);line-height:1.1}
.offer .code-row .btn{flex:0 0 auto;min-height:46px;padding:11px 18px;font-size:14px}
.offer-fine{font-size:12px;color:var(--ink-faint);margin:13px 2px 0;font-family:var(--label);letter-spacing:.01em;line-height:1.6}
@media(max-width:820px){
  .offer{grid-template-columns:1fr;gap:20px;padding:24px}
  .offer .code-row{flex-wrap:wrap}
  .offer .code-row .btn{width:100%;justify-content:center;margin-top:4px}
}