/* 超级表帮助中心 — 共享样式（breeze 清风 · 自托管 · 零 CDN）
   被 /help/ 列表页与所有文章页引用。视觉沿用首页 index.html 的 breeze token。 */

:root{
  --bg:#FFFFFF;
  --ink:#111827;        /* gray 900 */
  --body:#374151;       /* gray 700 — 正文比首页略深，长文更易读 */
  --soft:#6B7280;       /* gray 500 — 次要文字 */
  --blue:#3B82F6;
  --blue-600:#2563EB;
  --emerald:#10B981;
  --emerald-50:#ECFDF5;
  --amber:#F59E0B;
  --amber-50:#FFFBEB;
  --blue-50:#EFF6FF;
  --muted:#F3F4F6;      /* gray 100 */
  --gray-200:#E5E7EB;
  --gray-400:#9CA3AF;
  --maxw:760px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:'Noto Sans SC',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  color:var(--ink); background:var(--bg);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
.f-out{font-family:'Plus Jakarta Sans','Noto Sans SC',sans-serif; letter-spacing:-0.02em;}
a{color:var(--blue-600);}
img{max-width:100%;height:auto;}

/* ===== 顶栏 ===== */
.nav{position:sticky; top:0; z-index:40; background:#fff; border-bottom:2px solid var(--muted);}
.nav-in{max-width:1100px; margin:0 auto; padding:0 20px; height:64px; display:flex; align-items:center; justify-content:space-between;}
.brand{display:flex; align-items:center; gap:8px; text-decoration:none; color:var(--ink);}
.brand .mark{display:grid; place-items:center; width:36px; height:36px; border-radius:8px; background:var(--blue); color:#fff; font-weight:800;}
.brand b{font-weight:800; font-size:1.15rem;}
.brand .en{color:var(--gray-400); font-weight:700; font-size:.82rem;}
.nav-links{display:flex; align-items:center; gap:24px; font-size:.95rem; font-weight:500;}
.nav-links a{color:var(--body); text-decoration:none;}
.nav-links a:hover{color:var(--blue);}
.nav-cta{display:inline-flex; align-items:center; min-height:40px; padding:0 16px; border-radius:8px; background:var(--blue); color:#fff; font-weight:600; text-decoration:none; font-size:.9rem;}
.nav-cta:hover{background:var(--blue-600);}
@media(max-width:640px){ .nav-links{display:none;} }

/* ===== 容器 ===== */
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 20px;}
.wrap-wide{max-width:1100px; margin:0 auto; padding:0 20px;}

/* ===== 面包屑 ===== */
.crumb{font-size:.85rem; color:var(--soft); margin:24px 0 8px;}
.crumb a{color:var(--soft); text-decoration:none;}
.crumb a:hover{color:var(--blue);}
.crumb span{color:var(--gray-400);}

/* ===== 文章头 ===== */
.art-head{padding:8px 0 4px;}
.kicker{display:inline-block; font-family:'Plus Jakarta Sans',sans-serif; font-weight:600; font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; color:var(--blue);}
h1.title{font-family:'Plus Jakarta Sans','Noto Sans SC',sans-serif; font-weight:800; letter-spacing:-.02em; font-size:clamp(1.8rem,4.5vw,2.6rem); line-height:1.18; margin:.5rem 0 .6rem; color:var(--ink);}
.art-meta{font-size:.85rem; color:var(--soft); margin-bottom:6px;}
.art-lead{font-size:1.12rem; line-height:1.7; color:var(--body); margin:.4rem 0 0;}
.divider{height:2px; background:var(--muted); border:0; margin:28px 0;}

/* ===== 正文 prose ===== */
.prose{font-size:1.05rem; line-height:1.85; color:var(--body);}
.prose h2{font-family:'Plus Jakarta Sans','Noto Sans SC',sans-serif; font-weight:800; letter-spacing:-.02em; color:var(--ink); font-size:1.45rem; line-height:1.3; margin:2.4rem 0 .9rem;}
.prose h3{font-family:'Plus Jakarta Sans','Noto Sans SC',sans-serif; font-weight:700; color:var(--ink); font-size:1.15rem; margin:1.8rem 0 .6rem;}
.prose p{margin:1rem 0;}
.prose ul,.prose ol{margin:1rem 0; padding-left:1.4rem;}
.prose li{margin:.45rem 0;}
.prose strong{color:var(--ink); font-weight:700;}
.prose a{color:var(--blue-600); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1.5px;}
.prose a:hover{color:var(--blue);}
.prose code{background:var(--muted); padding:.12rem .42rem; border-radius:5px; font-size:.92em; font-family:'Plus Jakarta Sans',ui-monospace,SFMono-Regular,Menlo,monospace; color:var(--blue-600);}
.prose img{border-radius:10px; border:2px solid var(--muted); margin:1.4rem 0;}

/* 配图 figure + 图注（Excel 簇等用） */
.fig{margin:1.6rem 0;}
.fig img{display:block; width:100%; height:auto; border-radius:10px; border:2px solid var(--muted); background:#fff;}
.fig figcaption{margin-top:.5rem; font-size:.86rem; color:var(--soft); text-align:center; line-height:1.5;}

/* 步骤 / 提示 卡片 */
.callout{background:var(--blue-50); border-radius:10px; padding:16px 18px; margin:1.4rem 0; font-size:1rem;}
.callout.amber{background:var(--amber-50);}
.callout.emerald{background:var(--emerald-50);}
.callout .ct-t{font-family:'Plus Jakarta Sans','Noto Sans SC',sans-serif; font-weight:700; color:var(--ink); margin-bottom:4px;}

/* 对比表 */
.tbl{width:100%; border-collapse:collapse; margin:1.4rem 0; font-size:.98rem;}
.tbl th,.tbl td{text-align:left; padding:12px 14px; border-top:2px solid var(--gray-200);}
.tbl thead th{background:var(--muted); color:var(--body); font-weight:700; border-top:0;}
.tbl tbody tr:nth-child(even){background:#FAFAFB;}
.tbl .yes{color:var(--emerald); font-weight:700;}
.tbl .no{color:var(--gray-400); font-weight:700;}

/* ===== 文末 CTA ===== */
.cta-box{background:var(--ink); border-radius:14px; padding:28px; margin:40px 0 8px; text-align:center;}
.cta-box h3{font-family:'Plus Jakarta Sans','Noto Sans SC',sans-serif; color:#fff; font-weight:800; font-size:1.4rem; margin:0 0 6px;}
.cta-box p{color:rgba(255,255,255,.78); margin:0 0 16px;}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.5rem; min-height:48px; padding:0 22px; border-radius:8px; font-family:'Plus Jakarta Sans','Noto Sans SC',sans-serif; font-weight:600; text-decoration:none; transition:transform .2s ease, background-color .2s ease;}
.btn-primary{background:var(--blue); color:#fff;}
.btn-primary:hover{background:var(--blue-600); transform:scale(1.04);}
.btn-ghost{background:transparent; border:2px solid rgba(255,255,255,.6); color:#fff;}
.btn-ghost:hover{background:#fff; color:var(--ink);}

/* ===== 相关推荐 ===== */
.related{margin:40px 0;}
.related h2{font-family:'Plus Jakarta Sans','Noto Sans SC',sans-serif; font-weight:800; color:var(--ink); font-size:1.25rem; margin:0 0 14px;}
.rel-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px;}
.rel-card{display:block; background:var(--muted); border-radius:10px; padding:16px 18px; text-decoration:none; transition:background-color .2s ease, transform .2s ease;}
.rel-card:hover{background:#E9EBEF; transform:translateY(-2px);}
.rel-card .rc-k{font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--blue);}
.rel-card .rc-t{display:block; color:var(--ink); font-weight:700; margin-top:4px; line-height:1.4;}

/* ===== 帮助中心列表页 ===== */
.help-hero{background:var(--muted); padding:48px 0 40px; border-bottom:2px solid var(--gray-200);}
.help-hero h1{font-family:'Plus Jakarta Sans','Noto Sans SC',sans-serif; font-weight:800; letter-spacing:-.02em; font-size:clamp(2rem,5vw,2.8rem); margin:.3rem 0 .5rem; color:var(--ink);}
.help-hero p{font-size:1.1rem; color:var(--body); margin:0; max-width:620px;}
.sec-title{font-family:'Plus Jakarta Sans','Noto Sans SC',sans-serif; font-weight:800; color:var(--ink); font-size:1.3rem; margin:36px 0 14px;}
.art-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:16px;}
.art-card{display:flex; flex-direction:column; background:#fff; border:2px solid var(--muted); border-radius:12px; padding:20px; text-decoration:none; transition:border-color .2s ease, transform .2s ease;}
.art-card:hover{border-color:var(--blue); transform:translateY(-3px);}
.art-card .ac-k{font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--blue);}
.art-card .ac-t{font-family:'Plus Jakarta Sans','Noto Sans SC',sans-serif; color:var(--ink); font-weight:700; font-size:1.08rem; line-height:1.4; margin:8px 0 6px;}
.art-card .ac-d{color:var(--soft); font-size:.92rem; line-height:1.6; flex:1;}
.art-card .ac-go{margin-top:12px; color:var(--blue); font-weight:600; font-size:.9rem;}

/* ===== 页脚 ===== */
.foot{background:#0B1220; margin-top:56px; padding:32px 0;}
.foot-in{max-width:1100px; margin:0 auto; padding:0 20px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px; color:rgba(255,255,255,.7); font-size:.9rem;}
.foot-in a{color:rgba(255,255,255,.7); text-decoration:none;}
.foot-in a:hover{color:#fff;}
.foot-in .icp{color:rgba(255,255,255,.5);}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important; animation:none !important; scroll-behavior:auto !important;}
}