/* ==========================================================================
   香港留学指南 · 个人网站原型
   视觉沿用 C 方案（主色 #2563EB · 青 #0284C7）
   ========================================================================== */
:root{
  --font-sans:"Inter","HarmonyOS Sans SC","PingFang SC","Microsoft YaHei",system-ui,-apple-system,sans-serif;
  --font-mono:"JetBrains Mono","Cascadia Mono",Consolas,monospace;

  --brand-50:#EFF6FF; --brand-100:#DBEAFE; --brand-200:#BFDBFE;
  --brand-500:#3B82F6; --brand-600:#2563EB; --brand-700:#1D4ED8; --brand-800:#1E40AF;
  --cyan-50:#ECFEFF; --cyan-600:#0284C7; --cyan-700:#0369A1;

  --ink-900:#0F172A; --ink-800:#1E293B; --ink-700:#334155; --ink-600:#475569;
  --ink-500:#64748B; --ink-400:#94A3B8; --ink-300:#CBD5E1;

  --line:#E6EDF5; --line-soft:#F1F5F9; --bg:#FFFFFF; --bg-soft:#F8FAFC;
  --bg-tint:#F5F9FF;

  --green:#16A34A; --amber:#F59E0B; --red:#DC2626;

  --sh-1:0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.06);
  --sh-2:0 2px 6px rgba(15,23,42,.05), 0 8px 24px rgba(15,23,42,.07);
  --sh-3:0 12px 40px rgba(15,23,42,.12);
  --r-s:8px; --r:12px; --r-l:18px; --r-xl:24px;
  --wrap:1180px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink-900);
  font-family:var(--font-sans); font-size:15px; line-height:1.75;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
button,input,textarea{font:inherit; color:inherit}
h1,h2,h3,h4{margin:0; line-height:1.3; font-weight:700; letter-spacing:-.01em}
p{margin:0}
ul,ol{margin:0; padding-left:1.15em}
::selection{background:var(--brand-100)}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 24px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- 顶栏 ---------- */
.top{
  position:sticky; top:0; z-index:60;
  background:rgba(255,255,255,.86); backdrop-filter:saturate(1.6) blur(14px);
  border-bottom:1px solid var(--line);
}
.top-in{display:flex; align-items:center; gap:18px; height:64px}
.brand{display:flex; align-items:center; gap:10px; flex:0 0 auto}
.brand .mk{
  width:34px;height:34px;border-radius:10px;flex:0 0 auto;
  background:linear-gradient(140deg,var(--brand-600),var(--cyan-600));
  color:#fff;font-weight:800;font-size:17px;display:grid;place-items:center;
  box-shadow:0 2px 8px rgba(37,99,235,.32);
}
.brand b{font-size:16px;font-weight:700;letter-spacing:-.015em;display:block;line-height:1.25}
.brand small{display:block;font-size:11.5px;color:var(--ink-500);line-height:1.3;letter-spacing:.01em}
.menu{display:flex; align-items:center; gap:2px; margin-left:14px}
.menu a{
  padding:8px 14px; border-radius:9px; font-size:14.5px; font-weight:550;
  color:var(--ink-600); transition:.16s; white-space:nowrap;
}
.menu a:hover{background:var(--line-soft); color:var(--ink-900)}
.menu a.on{background:var(--brand-50); color:var(--brand-700); font-weight:650}
.top-r{margin-left:auto; display:flex; align-items:center; gap:10px}
.sbtn{
  display:flex; align-items:center; gap:7px; height:36px; padding:0 12px;
  border:1px solid var(--line); border-radius:9px; background:#fff;
  color:var(--ink-500); font-size:13.5px; cursor:pointer; transition:.16s; white-space:nowrap;
}
.sbtn:hover{border-color:var(--brand-200); color:var(--brand-700); background:var(--brand-50)}
.sbtn kbd{
  font-family:var(--font-mono); font-size:11px; background:var(--line-soft);
  border:1px solid var(--line); border-radius:4px; padding:1px 5px; color:var(--ink-400);
}
.btn-wx{
  display:inline-flex; align-items:center; gap:7px; height:36px; padding:0 16px;
  background:linear-gradient(135deg,var(--brand-600),var(--brand-700));
  color:#fff; border-radius:9px; font-size:14px; font-weight:600;
  box-shadow:0 2px 8px rgba(37,99,235,.28); transition:.16s;
}
.btn-wx:hover{transform:translateY(-1px); box-shadow:0 5px 16px rgba(37,99,235,.36)}
.mbtn{display:none; width:38px;height:38px; border:1px solid var(--line); border-radius:9px;
  background:#fff; cursor:pointer; place-items:center; color:var(--ink-700)}
.mbtn svg{width:19px;height:19px}

/* 手机抽屉 */
.drawer{
  display:none; position:fixed; inset:64px 0 0; z-index:55;
  background:rgba(15,23,42,.34); backdrop-filter:blur(2px);
}
.drawer.on{display:block}
.drawer-p{
  background:#fff; border-bottom:1px solid var(--line); padding:14px 20px 22px;
  box-shadow:var(--sh-3); animation:drop .2s ease;
}
@keyframes drop{from{transform:translateY(-8px);opacity:.6}to{transform:none;opacity:1}}
.drawer-p a{display:block; padding:12px 4px; font-size:16px; font-weight:600; border-bottom:1px solid var(--line-soft)}
.drawer-p a.on{color:var(--brand-700)}
.drawer-p .ds{
  display:flex; align-items:center; gap:9px; margin-top:14px; padding:11px 14px;
  background:var(--bg-soft); border:1px solid var(--line); border-radius:10px; color:var(--ink-500);
}

/* 首屏「这一站是什么」（GEO：自包含答案） */
.ansbar{
  margin-top:38px; padding:22px 26px; border-radius:var(--r-l);
  background:linear-gradient(120deg,#F5F9FF,#F0FBFF); border:1px solid var(--brand-100);
  display:flex; gap:18px; align-items:center; flex-wrap:wrap;
}
.ans-k{
  flex:0 0 auto; font-size:12.5px; font-weight:700; color:var(--brand-700);
  background:#fff; border:1px solid var(--brand-200); border-radius:999px; padding:6px 14px;
  letter-spacing:.02em;
}
.ansbar p{flex:1; min-width:300px; font-size:15.5px; line-height:1.85; color:var(--ink-700); margin:0}
.ansbar p b{color:var(--ink-900); font-weight:650}

/* ---------- 门厅 ---------- */
.hero{
  position:relative; min-height:520px; display:flex; align-items:center;
  background:#0B1B34; overflow:hidden;
}
.hero-bg{position:absolute; inset:0}
.hero-bg img{width:100%; height:100%; object-fit:cover; object-position:center 42%}
.hero-bg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(105deg,rgba(7,20,42,.94) 0%,rgba(9,26,54,.86) 38%,rgba(10,32,64,.55) 68%,rgba(12,40,80,.34) 100%);
}
.hero-in{position:relative; z-index:2; padding:76px 0 84px; width:100%}
.hero-pill{
  display:inline-flex; align-items:center; gap:8px; height:30px; padding:0 13px;
  border:1px solid rgba(147,197,253,.42); border-radius:999px;
  background:rgba(37,99,235,.18); color:#BFDBFE; font-size:12.5px; font-weight:550;
  backdrop-filter:blur(4px); letter-spacing:.01em;
}
.hero-pill i{width:6px;height:6px;border-radius:50%;background:#4ADE80;box-shadow:0 0 0 3px rgba(74,222,128,.22)}
.hero h1{
  font-size:52px; line-height:1.16; margin:22px 0 0; color:#fff;
  letter-spacing:-.025em; font-weight:800; max-width:760px;
}
.hero h1 em{
  font-style:normal; display:block;
  background:linear-gradient(96deg,#93C5FD 0%,#7DD3FC 52%,#A5F3FC 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero p{
  margin:20px 0 0; max-width:620px; font-size:16.5px; line-height:1.8;
  color:rgba(226,236,250,.86);
}
.hero p b{color:#fff; font-weight:600}
.hero-search{
  margin-top:32px; display:flex; align-items:center; gap:12px; max-width:620px;
  background:#fff; border-radius:14px; padding:9px 9px 9px 18px;
  box-shadow:0 18px 48px rgba(4,16,36,.42);
}
.hero-search svg{width:19px;height:19px;color:var(--ink-400);flex:0 0 auto}
.hero-search input{
  flex:1; border:0; outline:0; font-size:15.5px; background:transparent; padding:9px 0;
}
.hero-search input::placeholder{color:var(--ink-400)}
.hero-search button{
  border:0; cursor:pointer; height:42px; padding:0 22px; border-radius:10px;
  background:linear-gradient(135deg,var(--brand-600),var(--brand-700)); color:#fff;
  font-weight:650; font-size:14.5px; box-shadow:0 2px 10px rgba(37,99,235,.34);
}
.hero-tags{margin-top:16px; display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.hero-tags span{font-size:12.5px; color:rgba(191,219,254,.66)}
.hero-tags a{
  font-size:12.5px; color:#DBEAFE; padding:4px 11px; border-radius:999px;
  border:1px solid rgba(147,197,253,.3); background:rgba(30,64,175,.24); transition:.16s;
}
.hero-tags a:hover{background:rgba(59,130,246,.38); border-color:rgba(147,197,253,.6); color:#fff}

/* 分流双卡 */
.forks{padding:64px 0 8px}
.sechead{display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:26px}
.sechead h2{font-size:29px; letter-spacing:-.02em}
.sechead i{font-style:normal; font-size:14px; color:var(--ink-500); display:block; margin-top:7px; font-weight:450}
.forks-grid{display:grid; grid-template-columns:1fr 1fr; gap:22px}
.fork{
  position:relative; border-radius:var(--r-l); overflow:hidden; min-height:340px;
  display:flex; flex-direction:column; justify-content:flex-end; padding:30px;
  color:#fff; box-shadow:var(--sh-2); transition:.24s cubic-bezier(.4,0,.2,1);
  border:1px solid transparent;
}
.fork:hover{transform:translateY(-5px); box-shadow:var(--sh-3)}
.fork img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:.5s}
.fork:hover img{transform:scale(1.045)}
.fork::after{content:""; position:absolute; inset:0}
.fork.a::after{background:linear-gradient(to top,rgba(8,28,62,.95) 8%,rgba(10,36,78,.72) 44%,rgba(12,44,94,.30) 100%)}
.fork.b::after{background:linear-gradient(to top,rgba(4,38,58,.95) 8%,rgba(6,54,80,.72) 44%,rgba(8,66,96,.30) 100%)}
.fork-c{position:relative; z-index:2}
.fork-ic{
  width:44px;height:44px;border-radius:12px;display:grid;place-items:center;margin-bottom:16px;
  background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.26); backdrop-filter:blur(6px);
}
.fork-ic svg{width:23px;height:23px}
.fork h3{font-size:23px; line-height:1.34; letter-spacing:-.015em}
.fork h3 u{text-decoration:none; display:block; font-size:13px; font-weight:600; opacity:.8; margin-bottom:7px; letter-spacing:.02em}
.fork p{margin-top:12px; font-size:14px; line-height:1.78; color:rgba(240,246,255,.82)}
.fork-meta{
  margin-top:20px; padding-top:16px; border-top:1px solid rgba(255,255,255,.2);
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.fork-meta em{font-style:normal; font-size:13.5px; font-weight:650}
.fork-meta i{font-style:normal; font-size:14px; font-weight:650; display:flex; align-items:center; gap:6px}

/* 统计条 */
.stats{
  margin-top:22px; display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
}
.stat{background:#fff; padding:22px 20px; text-align:center}
.stat b{display:block; font-size:27px; font-weight:800; letter-spacing:-.02em; color:var(--brand-700); line-height:1.2}
.stat b.s2{color:var(--cyan-700)}
.stat span{font-size:13px; color:var(--ink-500); display:block; margin-top:5px}

/* 加微信 CTA */
.cta{
  margin:64px 0 0; border-radius:var(--r-xl); overflow:hidden; position:relative;
  display:grid; grid-template-columns:1fr 380px; align-items:center; gap:0;
  background:linear-gradient(118deg,#0B2447 0%,#123A6B 55%,#0E3F6E 100%);
  box-shadow:var(--sh-2);
}
.cta-pic{position:absolute; inset:0; left:auto; width:44%; opacity:.5; mask-image:linear-gradient(to right,transparent,#000 42%)}
.cta-pic img{width:100%;height:100%;object-fit:cover}
.cta-t{position:relative; z-index:2; padding:44px 40px}
.cta-t b{display:block; font-size:25px; color:#fff; letter-spacing:-.02em; line-height:1.4}
.cta-t p{margin-top:12px; font-size:14.5px; color:rgba(219,234,254,.82); line-height:1.8; max-width:480px}
.cta-t .acts{margin-top:24px; display:flex; gap:12px; flex-wrap:wrap}
.cta-t .acts a{
  display:inline-flex; align-items:center; gap:8px; height:44px; padding:0 24px; border-radius:11px;
  background:#fff; color:var(--brand-700); font-weight:680; font-size:15px;
  box-shadow:0 4px 16px rgba(0,0,0,.18);
}
.cta-t .acts a.gh{
  background:rgba(255,255,255,.12); color:#fff; border:1px solid rgba(255,255,255,.3); box-shadow:none;
}
.cta-qr{
  position:relative; z-index:2; padding:32px 36px 32px 0; display:flex; flex-direction:column;
  align-items:center; gap:10px;
}
.cta-qr img{
  width:186px; height:186px; border-radius:14px; background:#fff; padding:9px;
  box-shadow:0 10px 30px rgba(0,0,0,.3);
}
.cta-qr span{font-size:12.5px; color:rgba(191,219,254,.75)}

/* GitHub 横条 */
.gh{
  margin-top:16px; display:flex; align-items:center; gap:16px; padding:18px 22px;
  border:1px solid var(--line); border-radius:var(--r); background:var(--bg-soft);
  transition:.18s;
}
.gh:hover{border-color:var(--ink-300); background:#fff; box-shadow:var(--sh-1)}
.gh .gh-ic{
  width:38px;height:38px;border-radius:10px;background:var(--ink-900);color:#fff;
  display:grid;place-items:center;flex:0 0 auto;
}
.gh .gh-ic svg{width:21px;height:21px}
.gh .gh-t{flex:1; min-width:0}
.gh .gh-t b{display:block; font-size:14.5px; font-weight:650}
.gh .gh-t span{display:block; font-size:13px; color:var(--ink-500); margin-top:2px; line-height:1.6}
.gh .gh-t code{
  font-family:var(--font-mono); font-size:12.5px; background:#fff; border:1px solid var(--line);
  padding:1px 7px; border-radius:5px; color:var(--brand-700);
}
.gh .gh-go{font-size:13.5px; color:var(--ink-400); flex:0 0 auto; font-weight:600}

/* 下载横条 */
.dl{
  margin-top:16px; border:1px solid var(--brand-200); border-radius:var(--r);
  background:linear-gradient(135deg,#F5F9FF,#F0FBFF); padding:18px 22px;
}
.dl-row{display:flex; align-items:center; gap:16px; flex-wrap:wrap}
.dl-ic{
  width:40px;height:40px;border-radius:11px;flex:0 0 auto;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--brand-600),var(--brand-700)); color:#fff;
  box-shadow:0 2px 8px rgba(37,99,235,.3);
}
.dl-ic svg{width:20px;height:20px}
.dl-t{flex:1; min-width:260px}
.dl-t b{display:block; font-size:14.5px; font-weight:680}
.dl-t span{display:block; font-size:13px; color:var(--ink-500); margin-top:3px; line-height:1.65}
.dl-btns{display:flex; gap:8px; flex-wrap:wrap}
.dl-btns a{
  display:inline-flex; align-items:center; height:38px; padding:0 16px; border-radius:9px;
  background:var(--brand-600); color:#fff; font-size:13.5px; font-weight:650;
  box-shadow:0 2px 8px rgba(37,99,235,.26); transition:.16s; white-space:nowrap;
}
.dl-btns a:hover{transform:translateY(-1px); box-shadow:0 5px 14px rgba(37,99,235,.36)}
.dl-btns a:nth-child(2){background:var(--brand-700)}
.dl-btns a:nth-child(3){background:#fff; color:var(--brand-700); border:1px solid var(--brand-200); box-shadow:none}
.dl-btns a.ghb{background:#24292F; color:#fff; box-shadow:none; border:1px solid #24292F}
.dl-btns a.ghb:hover{background:#3a4148; box-shadow:0 5px 14px rgba(20,26,34,.3)}
.dl-t a{color:var(--brand-700); font-weight:650; border-bottom:1px solid var(--brand-200)}
.dl-t a:hover{border-bottom-style:solid}
.dl-ai{
  margin-top:13px; padding-top:12px; border-top:1px dashed var(--brand-200);
  font-size:13px; color:var(--ink-600);
}
.dl-ai .ai-h{display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-bottom:8px}
.dl-ai .ai-h b{font-weight:680; color:var(--ink-800)}
.dl-ai .ai-h .cpy{margin-left:auto}
.dl-ai .ai-cmd{
  display:block; box-sizing:border-box; width:100%; font-size:12.5px; color:var(--ink-600);
  background:#fff; border:1px solid var(--line); border-radius:8px; padding:9px 13px;
  line-height:1.75; word-break:break-all; cursor:pointer; transition:.15s; font-weight:450;
}
.dl-ai .ai-cmd:hover{border-color:var(--brand-200); background:var(--brand-50)}

/* 署名横条 */
.byline{
  margin-top:16px; display:flex; align-items:center; gap:18px; padding:20px 24px;
  border:1px solid var(--brand-200); border-radius:var(--r); background:var(--brand-50);
}
.byline img{width:54px;height:54px;border-radius:14px;object-fit:cover;flex:0 0 auto;box-shadow:var(--sh-1)}
.byline .bt{flex:1; min-width:0}
.byline .bt b{display:block; font-size:15px; font-weight:680; color:var(--ink-900)}
.byline .bt span{display:block; font-size:13.5px; color:var(--ink-600); margin-top:3px; line-height:1.65}
.byline a{
  flex:0 0 auto; font-size:14px; font-weight:650; color:var(--brand-700);
  padding:9px 16px; background:#fff; border:1px solid var(--brand-200); border-radius:9px;
}

/* ---------- 房间页头 ---------- */
.rhead{position:relative; overflow:hidden; padding:54px 0 42px; border-bottom:1px solid var(--line); background:#0B2447; color:#fff}
.rhead-bg{position:absolute; inset:0}
.rhead-bg img{width:100%; height:100%; object-fit:cover; object-position:center 38%}
.rhead-bg::after{content:""; position:absolute; inset:0;
  background:linear-gradient(100deg,rgba(9,28,60,.96) 0%,rgba(11,36,74,.87) 45%,rgba(13,44,88,.62) 100%)}
.rhead.nav .rhead-bg::after{background:linear-gradient(100deg,rgba(3,32,48,.96) 0%,rgba(4,46,66,.87) 45%,rgba(6,58,82,.62) 100%)}
.rhead.about .rhead-bg::after{background:linear-gradient(100deg,rgba(12,24,52,.96) 0%,rgba(16,34,70,.87) 45%,rgba(20,46,92,.62) 100%)}
.rhead .wrap{position:relative; z-index:2}
.crumb{display:flex; align-items:center; gap:8px; font-size:13px; color:var(--ink-500); margin-bottom:14px}
.crumb a{color:var(--ink-500)}
.crumb a:hover{color:var(--brand-700)}
.crumb em{font-style:normal; color:var(--ink-300)}
.rhead .crumb a,.rhead .crumb span{color:rgba(219,234,254,.78)}
.rhead .crumb a:hover{color:#fff}
.rhead .crumb em{color:rgba(219,234,254,.42)}
.rhead h1{font-size:38px; letter-spacing:-.025em; line-height:1.24; color:#fff}
.rhead p{margin-top:14px; font-size:16px; color:rgba(226,236,250,.85); max-width:760px; line-height:1.82}
.rhead p b{color:#fff; font-weight:650}
.rhead .rh-facts{margin-top:20px; display:flex; flex-wrap:wrap; gap:10px}
.rhead .rh-facts span{
  font-size:13px; padding:6px 13px; border-radius:999px; font-weight:550;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.24); color:#E2ECFA;
}
.rhead .rh-facts span i{font-style:normal; color:#93C5FD; font-weight:700}

/* chips 筛选 */
.chips{
  position:sticky; top:64px; z-index:40; background:rgba(255,255,255,.92);
  backdrop-filter:blur(12px); border-bottom:1px solid var(--line); padding:12px 0;
}
.chips-in{display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; padding:0 24px; max-width:var(--wrap); margin:0 auto}
.chips-in::-webkit-scrollbar{display:none}
.chip{
  flex:0 0 auto; height:36px; padding:0 15px; border-radius:9px; border:1px solid var(--line);
  background:#fff; color:var(--ink-600); font-size:13.5px; font-weight:550; cursor:pointer;
  display:inline-flex; align-items:center; gap:7px; transition:.16s; white-space:nowrap;
}
.chip:hover{border-color:var(--brand-200); color:var(--brand-700)}
.chip.on{background:var(--brand-600); border-color:var(--brand-600); color:#fff; box-shadow:0 2px 8px rgba(37,99,235,.3)}
.chip.on.nv{background:var(--cyan-600); border-color:var(--cyan-600); box-shadow:0 2px 8px rgba(2,132,199,.3)}
.chip em{font-style:normal; font-size:12px; opacity:.72; font-variant-numeric:tabular-nums}

/* ---------- 指南房间 ---------- */
.room{padding:44px 0 72px}
.hubgrp{margin-bottom:40px}
.hubgrp-h{display:flex; align-items:center; gap:12px; margin-bottom:16px; flex-wrap:wrap}
.hubgrp-h .hb{
  width:9px;height:9px;border-radius:3px;background:var(--brand-600);
}
.hubgrp-h h3{font-size:18.5px; letter-spacing:-.01em}
.hubgrp-h span{font-size:13px; color:var(--ink-500)}
.hubgrp-h em{
  font-style:normal; margin-left:auto; font-size:12.5px; color:var(--ink-400);
  font-variant-numeric:tabular-nums;
}
.arts{display:grid; grid-template-columns:repeat(2,1fr); gap:10px}
.art{
  display:flex; align-items:flex-start; gap:13px; padding:15px 17px; background:#fff;
  border:1px solid var(--line); border-radius:var(--r); transition:.16s; cursor:pointer;
}
.art:hover{border-color:var(--brand-200); box-shadow:var(--sh-1); transform:translateY(-1px)}
.art-n{
  font-family:var(--font-mono); font-size:11.5px; color:var(--ink-400); font-weight:600;
  background:var(--line-soft); border-radius:6px; padding:3px 7px; flex:0 0 auto; margin-top:2px;
  letter-spacing:-.02em;
}
.art-b{flex:1; min-width:0}
.art-b b{display:block; font-size:14.5px; font-weight:600; line-height:1.55; letter-spacing:-.005em}
.art-b span{display:block; font-size:12.5px; color:var(--ink-400); margin-top:4px}
.art-go{color:var(--ink-300); flex:0 0 auto; margin-top:3px; font-size:13px}
.art.demo .art-n{background:var(--brand-50); color:var(--brand-700)}
.art:hover .art-go{color:var(--brand-600)}

.tip-line{
  margin-top:8px; padding:16px 20px; border-radius:var(--r); border:1px dashed var(--line);
  background:var(--bg-soft); display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  font-size:14px; color:var(--ink-600);
}
.tip-line b{color:var(--ink-900); font-weight:650}
.tip-line a{color:var(--cyan-700); font-weight:650; display:inline-flex; align-items:center; gap:5px}

/* ---------- 文章页 ---------- */
.artwrap{max-width:820px; margin:0 auto; padding:40px 24px 72px}
.arthd{border-bottom:1px solid var(--line); padding-bottom:26px; margin-bottom:30px}
.arthd .meta{display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-bottom:14px}
.tagk{
  font-size:12px; font-weight:650; padding:4px 11px; border-radius:999px;
  background:var(--brand-50); color:var(--brand-700); border:1px solid var(--brand-200);
}
.artno{font-family:var(--font-mono); font-size:12.5px; color:var(--ink-400); letter-spacing:-.02em}
.arthd h1{font-size:31px; line-height:1.35; letter-spacing:-.022em}
.arthd .lead{margin-top:16px; font-size:15px; color:var(--ink-500); line-height:1.8}
/* GEO：作者署名 + 更新时间（匿名内容基本不被 AI 引用） */
.auth{
  margin-top:22px; display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:14px 18px; border-radius:var(--r); background:var(--bg-soft); border:1px solid var(--line);
}
.auth img{width:44px;height:44px;border-radius:11px;object-fit:cover;flex:0 0 auto}
.auth-t{flex:1; min-width:220px}
.auth-t b{display:block; font-size:14px; font-weight:680}
.auth-t span{display:block; font-size:12.5px; color:var(--ink-500); margin-top:2px; line-height:1.6}
.auth-m{flex:0 0 auto; text-align:right}
.auth-m i{font-style:normal; display:block; font-size:11.5px; color:var(--ink-400)}
.auth-m b{display:block; font-size:13.5px; font-weight:650; color:var(--ink-800); font-variant-numeric:tabular-nums}

/* GEO：开篇「快速说明」强化成一句话答案卡（前 30% 文本占 44% 的 AI 引用） */
.art-sec[data-k="lede"] .fb{
  background:linear-gradient(120deg,#F3F8FF,#F8FBFF);
  border:1px solid var(--brand-100); border-left:4px solid var(--brand-600);
  border-radius:0 var(--r) var(--r) 0; font-size:16px; color:var(--ink-800);
  padding:22px 26px; line-height:1.88;
}
.art-sec[data-k="lede"]>h2{color:var(--brand-800); border-bottom-color:var(--brand-100)}
.artdemo{
  margin-top:18px; padding:13px 17px; border-radius:10px; background:#FFFBEB;
  border:1px solid #FDE68A; font-size:13.5px; color:#92400E; line-height:1.7;
}
.art-sec{margin-bottom:30px}
.art-sec>h2{
  font-size:19px; letter-spacing:-.015em; display:flex; align-items:center; gap:10px;
  padding-bottom:11px; border-bottom:1px solid var(--line-soft); margin-bottom:16px;
}
.art-sec>h2::before{
  content:""; width:4px; height:17px; border-radius:2px; background:var(--brand-600); flex:0 0 auto;
}
.art-sec[data-k="cost"]>h2::before{background:var(--amber)}
.art-sec[data-k="gain"]>h2::before{background:var(--green)}
.art-sec[data-k="red"]>h2::before{background:var(--red)}
.art-sec[data-k="ev"]>h2::before{background:var(--ink-400)}
.art-sec[data-k="upd"]>h2::before{background:var(--ink-300)}
.fb{
  background:var(--bg-soft); border:1px solid var(--line-soft); border-radius:var(--r);
  padding:20px 24px; font-size:15px; line-height:1.85; color:var(--ink-700);
}
.fb>p+p{margin-top:14px}
.fb ul,.fb ol{margin-top:12px; display:flex; flex-direction:column; gap:9px}
.fb li{padding-left:2px}
.fb strong{color:var(--ink-900); font-weight:650}
.fb a{
  color:var(--brand-700); border-bottom:1px dashed var(--brand-200); padding-bottom:1px;
  font-weight:550; transition:.15s;
}
.fb a:hover{border-bottom-style:solid; border-bottom-color:var(--brand-600); background:var(--brand-50)}
.fbi{
  margin-top:14px; padding:14px 18px; border-left:3px solid var(--brand-200);
  background:#fff; border-radius:0 var(--r-s) var(--r-s) 0; font-size:14.5px;
}
.fbt{
  font-size:12.5px; color:var(--ink-400); margin-bottom:10px; font-weight:650;
  letter-spacing:.03em; text-transform:uppercase;
}
.fb table{width:100%; border-collapse:collapse; margin-top:14px; font-size:14px; background:#fff; border-radius:var(--r-s); overflow:hidden}
.fb th,.fb td{padding:10px 13px; border:1px solid var(--line); text-align:left}
.fb th{background:var(--line-soft); font-weight:650; color:var(--ink-900); font-size:13.5px}
.fb hr{border:0;border-top:1px solid var(--line); margin:18px 0}

.artfoot{margin-top:36px; display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding-top:22px; border-top:1px solid var(--line)}
.pn{display:flex; gap:10px; flex:1; min-width:0}
.pn a{
  flex:1; min-width:0; padding:13px 16px; border:1px solid var(--line); border-radius:var(--r);
  font-size:13.5px; color:var(--ink-600); transition:.16s; overflow:hidden;
}
.pn a:hover{border-color:var(--brand-200); background:var(--brand-50); color:var(--brand-700)}
.pn a i{font-style:normal; display:block; font-size:11.5px; color:var(--ink-400); margin-bottom:3px}
.pn a b{font-weight:600; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

/* ---------- 导航房间 ---------- */
.navsec{margin-bottom:40px}
.navsec-h{margin-bottom:18px}
.navsec-h h3{font-size:18px; letter-spacing:-.01em; display:flex; align-items:center; gap:10px}
.navsec-h h3 em{
  font-style:normal; font-size:12px; font-weight:650; color:var(--cyan-700);
  background:var(--cyan-50); border:1px solid #A5F3FC; border-radius:999px; padding:3px 10px;
}
.navsec-h p{margin-top:7px; font-size:13.5px; color:var(--ink-500); max-width:760px; line-height:1.72}
.egrid{display:grid; grid-template-columns:repeat(3,1fr); gap:13px}
.egrid.wide{grid-template-columns:repeat(2,1fr)}
.e{
  border:1px solid var(--line); border-radius:var(--r); background:#fff; padding:17px 18px;
  transition:.18s; display:flex; flex-direction:column;
}
.e:hover{border-color:#A5F3FC; box-shadow:0 4px 18px rgba(2,132,199,.10); transform:translateY(-2px)}
.e-h{display:flex; align-items:flex-start; gap:11px}
.e-fav{
  width:36px;height:36px;border-radius:9px;flex:0 0 auto;display:grid;place-items:center;
  background:linear-gradient(140deg,#EFF6FF,#E0F2FE); color:var(--cyan-700);
  font-family:var(--font-mono); font-size:10.5px; font-weight:700; letter-spacing:-.03em;
  border:1px solid #DBEAFE;
}
.e-t{flex:1;min-width:0}
.e-t b{display:block; font-size:15px; font-weight:650; letter-spacing:-.01em; line-height:1.4}
.e-t span{display:block; font-size:12px; color:var(--ink-400); font-family:var(--font-mono); margin-top:3px}
.e p{margin-top:11px; font-size:13.2px; color:var(--ink-600); line-height:1.72; flex:1}
.e-tags{margin-top:11px; display:flex; flex-wrap:wrap; gap:6px}
.e-tags i{
  font-style:normal; font-size:11.5px; padding:3px 9px; border-radius:6px;
  background:var(--bg-soft); border:1px solid var(--line); color:var(--ink-500);
}
.e-bdg{
  font-size:10.5px; font-weight:700; padding:2px 8px; border-radius:5px; margin-left:auto;
  background:#FEF3C7; color:#92400E; flex:0 0 auto; letter-spacing:.02em;
}
.e-subs{margin-top:12px; padding-top:11px; border-top:1px dashed var(--line); display:flex; flex-direction:column; gap:7px}
.e-subs a{font-size:12.8px; color:var(--ink-600); display:flex; align-items:center; gap:7px; transition:.15s}
.e-subs a:hover{color:var(--cyan-700)}
.e-subs a::before{content:"↳"; color:var(--ink-300); font-size:12px}
.e-cta{
  margin-top:13px; display:flex; align-items:center; justify-content:space-between;
  font-size:13px; font-weight:650; color:var(--cyan-700); padding-top:11px; border-top:1px solid var(--line-soft);
}
.e-cta span{color:var(--ink-400); font-weight:500; font-size:12px}

/* ---------- 关于页 ---------- */
.abt{padding:52px 0 72px}
.ab-hero{display:grid; grid-template-columns:200px 1fr; gap:40px; align-items:center; margin-bottom:52px}
.ab-hero img{
  width:200px;height:200px;border-radius:22px;object-fit:cover;
  box-shadow:var(--sh-2); border:4px solid #fff;
}
.ab-hero h2{font-size:33px; letter-spacing:-.025em}
.ab-hero .role{margin-top:10px; font-size:14.5px; color:var(--ink-500); font-weight:550}
.ab-hero .role em{font-style:normal; color:var(--brand-700)}
.ab-hero p{margin-top:18px; font-size:15.5px; color:var(--ink-600); line-height:1.9}
.ab-hero p b{color:var(--ink-900); font-weight:650}
.ab-sec{margin-bottom:44px}
.ab-sec>h3{
  font-size:21px; letter-spacing:-.018em; margin-bottom:16px;
  display:flex; align-items:center; gap:11px;
}
.ab-sec>h3::before{content:"";width:4px;height:19px;border-radius:2px;background:var(--brand-600)}
.ab-sec>p{font-size:15px; color:var(--ink-600); line-height:1.9; max-width:800px}
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:6px}
.step{padding:22px; border:1px solid var(--line); border-radius:var(--r); background:#fff}
.step u{
  text-decoration:none; font-family:var(--font-mono); font-size:12px; font-weight:700;
  color:var(--brand-700); background:var(--brand-50); padding:3px 9px; border-radius:6px;
  display:inline-block; margin-bottom:12px;
}
.step b{display:block; font-size:15.5px; font-weight:650; margin-bottom:7px}
.step p{font-size:13.5px; color:var(--ink-500); line-height:1.72}
.bounds{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.bd{padding:24px; border-radius:var(--r); border:1px solid var(--line)}
.bd.do{background:#F0FDF4; border-color:#BBF7D0}
.bd.dont{background:#FEF2F2; border-color:#FECACA}
.bd h4{font-size:15.5px; margin-bottom:14px; display:flex; align-items:center; gap:8px}
.bd.do h4{color:#166534}
.bd.dont h4{color:#991B1B}
.bd ul{font-size:14px; color:var(--ink-700); display:flex; flex-direction:column; gap:9px; line-height:1.7}
.contact{display:grid; grid-template-columns:230px 1fr; gap:36px; align-items:start;
  padding:30px; border:1px solid var(--line); border-radius:var(--r-l); background:var(--bg-soft)}
.contact .qr{text-align:center}
.contact .qr img{
  width:200px;height:200px;border-radius:14px;background:#fff;padding:10px;
  box-shadow:var(--sh-1); margin:0 auto;
}
.contact .qr span{display:block; font-size:12.5px; color:var(--ink-500); margin-top:11px; line-height:1.6}
.crows{display:flex; flex-direction:column; gap:12px}
.crow{display:flex; align-items:center; gap:13px; padding:14px 17px; background:#fff;
  border:1px solid var(--line); border-radius:var(--r)}
.crow .ci{
  width:36px;height:36px;border-radius:9px;background:var(--brand-50);color:var(--brand-700);
  display:grid;place-items:center;flex:0 0 auto;font-weight:700;font-size:15px;
}
.crow .ct{flex:1;min-width:0}
.crow .ct span{display:block;font-size:12px;color:var(--ink-400)}
.crow .ct b{display:block;font-family:var(--font-mono);font-size:14.5px;font-weight:650;letter-spacing:-.01em;margin-top:1px}
.cpy{
  font-size:12.5px;color:var(--brand-700);font-weight:650;border:1px solid var(--brand-200);
  background:#fff;border-radius:7px;padding:6px 12px;cursor:pointer;transition:.15s;
}
.cpy:hover{background:var(--brand-50)}

/* ---------- 搜索面板 ---------- */
.search{
  display:none; position:fixed; inset:0; z-index:80; background:rgba(15,23,42,.42);
  backdrop-filter:blur(3px); padding:80px 20px 20px;
}
.search.on{display:block}
.search-p{
  max-width:680px; margin:0 auto; background:#fff; border-radius:var(--r-l);
  box-shadow:var(--sh-3); overflow:hidden; animation:drop .18s ease;
}
.search-in{display:flex; align-items:center; gap:12px; padding:16px 20px; border-bottom:1px solid var(--line)}
.search-in svg{width:20px;height:20px;color:var(--ink-400);flex:0 0 auto}
.search-in input{flex:1; border:0;outline:0;font-size:16px;background:transparent}
.search-in kbd{
  font-family:var(--font-mono);font-size:11px;background:var(--line-soft);border:1px solid var(--line);
  border-radius:5px;padding:2px 6px;color:var(--ink-400);cursor:pointer;
}
.sres{max-height:62vh; overflow-y:auto; padding:8px}
.sr-h{
  font-size:11.5px; font-weight:700; color:var(--ink-400); padding:12px 14px 7px;
  letter-spacing:.06em; text-transform:uppercase;
}
.sr-i{
  display:flex; align-items:flex-start; gap:12px; padding:11px 14px; border-radius:10px; cursor:pointer;
}
.sr-i:hover,.sr-i.on{background:var(--bg-soft)}
.sr-i .k{
  font-size:10.5px;font-weight:700;border-radius:5px;padding:3px 7px;flex:0 0 auto;margin-top:2px;
}
.sr-i .k.g{background:var(--brand-50);color:var(--brand-700)}
.sr-i .k.n{background:var(--cyan-50);color:var(--cyan-700)}
.sr-i .tx{flex:1;min-width:0}
.sr-i .tx b{display:block;font-size:14.5px;font-weight:600;line-height:1.5}
.sr-i .tx span{display:block;font-size:12.5px;color:var(--ink-400);margin-top:2px}
.sr-empty{padding:40px 20px;text-align:center;color:var(--ink-400);font-size:14px}
.sr-foot{padding:12px 18px;border-top:1px solid var(--line);background:var(--bg-soft);
  font-size:12.5px;color:var(--ink-400);display:flex;gap:16px;flex-wrap:wrap}
.sr-foot b{color:var(--ink-600);font-weight:650}

/* ---------- 页脚 ---------- */
.foot{border-top:1px solid var(--line); background:var(--bg-soft); padding:44px 0 30px; margin-top:0}
.foot-t{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:32px; margin-bottom:32px}
.foot-t .fb-brand b{font-size:16px; font-weight:700; display:block; margin-bottom:9px}
.foot-t .fb-brand p{font-size:13.5px; color:var(--ink-500); line-height:1.8; max-width:340px}
.foot-t h5{font-size:13px; font-weight:700; color:var(--ink-900); margin:0 0 12px; letter-spacing:.02em}
.foot-t ul{list-style:none; padding:0; display:flex; flex-direction:column; gap:9px}
.foot-t ul a{font-size:13.5px; color:var(--ink-500); transition:.15s}
.foot-t ul a:hover{color:var(--brand-700)}
.foot-b{
  padding-top:20px; border-top:1px solid var(--line); display:flex; align-items:center;
  justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:12.5px; color:var(--ink-400);
}
.foot-b .wxb{color:var(--ink-500)}
.foot-b .wxb b{font-family:var(--font-mono); color:var(--ink-700)}

/* ---------- 响应式 ---------- */
@media (max-width:1080px){
  .menu{display:none}
  .mbtn{display:grid}
  .forks-grid{grid-template-columns:1fr}
  .cta{grid-template-columns:1fr}
  .cta-pic{width:100%; opacity:.28}
  .cta-qr{padding:0 40px 36px; flex-direction:row; justify-content:flex-start}
  .cta-qr img{width:150px;height:150px}
  .egrid,.egrid.wide{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(2,1fr)}
  .foot-t{grid-template-columns:1fr 1fr}
  .ab-hero{grid-template-columns:1fr; gap:26px}
  .ab-hero img{width:150px;height:150px;border-radius:18px}
}
@media (max-width:760px){
  body{font-size:14.5px}
  .wrap{padding:0 18px}
  .hero{min-height:440px}
  .hero-in{padding:52px 0 58px}
  .hero h1{font-size:31px}
  .hero p{font-size:15px}
  .hero-search{padding:7px 7px 7px 14px; margin-top:24px}
  .hero-search button{padding:0 16px; height:40px; font-size:14px}
  .sechead{flex-direction:column; align-items:flex-start; gap:8px; margin-bottom:20px}
  .sechead h2{font-size:23px}
  .forks{padding:44px 0 6px}
  .fork{min-height:290px; padding:24px}
  .fork h3{font-size:20px}
  .rhead{padding:32px 0 26px}
  .rhead h1{font-size:26px}
  .rhead p{font-size:14.5px}
  .arts{grid-template-columns:1fr}
  .egrid,.egrid.wide{grid-template-columns:1fr}
  .arthd h1{font-size:24px}
  .artwrap{padding:28px 18px 56px}
  .fb{padding:17px 18px}
  .contact{grid-template-columns:1fr; gap:24px; padding:24px}
  .bounds{grid-template-columns:1fr}
  .foot-t{grid-template-columns:1fr; gap:26px}
  .brand small{display:none}
  .cta-t{padding:32px 24px}
  .cta-t b{font-size:21px}
  .cta-qr{padding:0 24px 30px}
  .byline{flex-wrap:wrap}
  .byline a{margin-left:auto}
  .search{padding:60px 12px 12px}
}
@media print{.top,.chips,.search,.foot{display:none}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important; transition:none !important}
}

/* ---------- 静态多页站补充 ---------- */
a.chip{text-decoration:none}
.hubcards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:34px}
.hubcard{
  display:block;padding:20px 22px;border:1px solid var(--line);border-radius:var(--r);
  background:#fff;transition:.18s;text-decoration:none;
}
.hubcard:hover{border-color:var(--brand-200);box-shadow:var(--sh-1);transform:translateY(-2px)}
.hubcard b{display:block;font-size:16.5px;font-weight:680;letter-spacing:-.01em;color:var(--ink-900)}
.hubcard span{display:block;font-size:13px;color:var(--ink-500);margin-top:6px;line-height:1.65}
.hubcard em{
  display:inline-block;margin-top:12px;font-style:normal;font-size:12px;font-weight:650;
  color:var(--brand-700);background:var(--brand-50);border-radius:6px;padding:3px 9px;
}
.arts-wide{grid-template-columns:1fr}
.catsec{margin-bottom:46px;scroll-margin-top:120px}
.catsec-h{
  font-size:20px;letter-spacing:-.015em;margin-bottom:20px;padding-bottom:12px;
  border-bottom:2px solid var(--line);display:flex;align-items:center;gap:12px;
}
.catsec-h em{
  font-style:normal;font-size:12px;font-weight:650;color:var(--cyan-700);
  background:var(--cyan-50);border:1px solid #A5F3FC;border-radius:999px;padding:3px 10px;
}
.byline-go{
  flex:0 0 auto;font-size:14px;font-weight:650;color:var(--brand-700);
  padding:9px 16px;background:#fff;border:1px solid var(--brand-200);border-radius:9px;
}
@media (max-width:1080px){.hubcards{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.hubcards{grid-template-columns:1fr}}

.byline{text-decoration:none}
.art{text-decoration:none}
.art:hover .art-go{color:var(--brand-600)}