/* ===================================================================
   共用样式 · 移动优先 + 桌面适配
   -------------------------------------------------------------------
   设计约定（改样式前先读这段）：

   字号只有 6 档：xs / sm / md / lg / xl / 2xl，桌面端整体上浮一级。
   不要再写裸 px 字号，用 var(--t-*)。

   圆角只有 4 档，规则固定：
     面（卡片 / 弹层 / 大容器）    --r-lg   16px
     控件（按钮 / 输入 / 提示条）  --r-md   12px
     微元素（标签 / 代码 / 图标底）--r-sm    8px
     胶囊（时间戳等）              --r-full

   颜色全部走变量，暗色模式在下面的 media 块里整体换值。
   任何地方都不要写死 #fff / #000 / #8B94A6 这类字面量。
   =================================================================== */

:root{
  color-scheme:light dark;

  /* ---- 品牌 ---- */
  --brand:#2E6BE8;          /* 填充色：按钮底、图标底。白字对比 4.79:1 */
  --brand-deep:#1F4FBF;     /* 填充色 hover */
  --brand-ink:#1F4FBF;      /* 文字色：品牌色的文字/描边用这个，白底 7.17:1 */
  --brand-weak:#E8EFFD;     /* 品牌浅底 */
  --brand-on:#FFFFFF;       /* 品牌填充上的文字 */
  --gold-graphic:#C99A2E;   /* 仅用于 SVG 图形标注（圈号），不作文字色 */

  /* ---- 表面 ---- */
  --bg:#F1F3F7;
  --hero-1:#E9F0FC;         /* 页头浅蓝晕，比页面底深一档，卡片上浮才有层次 */
  --hero-2:#F1F3F7;
  --card:#FFFFFF;
  --card-hover:#F7F9FC;
  --line:#E2E7F0;
  --line-soft:#EDF0F6;

  /* ---- 文字 ---- */
  --ink:#1B2130;            /* 主文字 */
  --ink-2:#4A5364;          /* 正文段落 */
  --sub:#616978;            /* 次要说明，本站任意底色上都 >=4.8:1 */
  --faint:#8A93A5;          /* 仅用于非文字图形（箭头描边） */

  /* ---- 状态 ---- */
  --brand-line:#D6E1FF;
  --warn-line:#EFDFBD;
  --ok:#0E7C3F;   --ok-soft:#E3F3E9;
  --warn:#8A5A00; --warn-soft:#FAEFD8;
  --stop:#A62B2B; --stop-soft:#FAE7E7;

  /* ---- 微信横幅（深琥珀，白字 5.0:1 以上） ---- */
  --bar-1:#7A4F00; --bar-2:#96650D;

  /* ---- 顶栏 ---- */
  --nav-bg:#FFFFFF;
  --nav-line:#E2E7F0;

  /* ---- 二维码：任何模式下都保持白底黑码，否则扫不出来 ---- */
  --qr-bg:#FFFFFF;
  --qr-line:#D8DEE9;

  /* ---- 字号 ---- */
  --t-xs:11.5px;
  --t-sm:12.5px;
  --t-md:13.5px;
  --t-lg:15px;
  --t-xl:17px;
  --t-2xl:24px;

  /* ---- 圆角 ---- */
  --r-lg:16px; --r-md:12px; --r-sm:8px; --r-full:999px;

  /* ---- 阴影：染背景色调，不用中性黑 ---- */
  --shadow:0 6px 20px -6px rgba(22,42,84,.16), 0 1px 2px rgba(22,42,84,.05);
  --shadow-sm:0 2px 8px -3px rgba(22,42,84,.14);
  --shadow-lg:0 20px 50px -12px rgba(10,20,44,.32);
  --shadow-fig:0 8px 22px -8px rgba(22,42,84,.28);

  --font:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Segoe UI",Roboto,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Consolas,monospace;
  --w:1080px;
  --ease:cubic-bezier(.2,.7,.3,1);
}

@media (prefers-color-scheme:dark){
  :root{
    --brand:#2E6BE8;        /* 填充色不变，保持品牌辨识 */
    --brand-deep:#3F7BF0;
    --brand-ink:#8FB2FF;    /* 暗底上的品牌文字提亮，卡片上 8.09:1 */
    --brand-weak:#1B2740;
    --gold-graphic:#D9B25C;

    --bg:#0E121C;
    --hero-1:#161F33;
    --hero-2:#0E121C;
    --card:#171C28;
    --card-hover:#1E2432;
    --line:#2A3143;
    --line-soft:#222838;

    --ink:#E7EAF1;
    --ink-2:#B9C0CE;
    --sub:#98A1B2;
    --faint:#6C7587;

    --brand-line:#2A3A63;
    --warn-line:#4A3B18;
    --ok:#62D392;   --ok-soft:#14301F;
    --warn:#E8BC63; --warn-soft:#322713;
    --stop:#F59595; --stop-soft:#351A1B;

    --bar-1:#5E3C00; --bar-2:#7A5209;

    --nav-bg:#141A26;
    --nav-line:#242C3C;

    --shadow:0 6px 20px -6px rgba(0,0,0,.55), 0 1px 2px rgba(0,0,0,.4);
    --shadow-sm:0 2px 8px -3px rgba(0,0,0,.5);
    --shadow-lg:0 20px 50px -12px rgba(0,0,0,.7);
    --shadow-fig:0 8px 22px -8px rgba(0,0,0,.6);
  }
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  font-family:var(--font);background:var(--bg);color:var(--ink);
  font-size:var(--t-md);line-height:1.6;-webkit-font-smoothing:antialiased;
  padding-bottom:40px;
}
a{color:inherit}
.wrap{max-width:var(--w);margin:0 auto;padding:0 16px}

/* ---------- 焦点态：全站统一，键盘与读屏可达 ---------- */
:focus-visible{
  outline:2px solid var(--brand-ink);outline-offset:2px;border-radius:var(--r-sm);
}
.btn:focus-visible,.chip:focus-visible{outline-offset:3px}

/* ---------- 微信横幅 ---------- */
#wxBar{
  display:none;background:linear-gradient(90deg,var(--bar-1),var(--bar-2));color:#fff;
  padding:11px 14px;font-size:var(--t-sm);line-height:1.6;
}
#wxBar.on{display:block}
#wxBar .in{max-width:var(--w);margin:0 auto;display:flex;align-items:flex-start;gap:10px}
#wxBar b{font-weight:700}
#wxBar svg{width:18px;height:18px;flex:none;stroke:#fff;fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;margin-top:2px}
#wxBar .wx-close{width:34px;height:34px;min-width:34px;margin:-5px -7px -5px auto;padding:0;
  border:1px solid rgba(255,255,255,.38);border-radius:10px;background:rgba(0,0,0,.14);
  color:#fff;font:500 25px/1 Arial,sans-serif;cursor:pointer;display:flex;align-items:center;
  justify-content:center}
#wxBar .wx-close:hover{background:rgba(0,0,0,.26)}
#wxBar .wx-close:focus-visible{outline-color:#fff;outline-offset:2px}

/* ---------- 顶栏 ---------- */
.nav{
  background:var(--nav-bg);position:sticky;top:0;z-index:40;
  border-bottom:1px solid var(--nav-line);
}
.nav-in{
  max-width:var(--w);margin:0 auto;padding:0 16px;height:56px;
  display:flex;align-items:center;gap:8px;
}
.brand{display:flex;align-items:center;gap:9px;margin-right:auto;
  text-decoration:none;color:var(--ink);flex:none}
.brand-mark{
  width:28px;height:28px;border-radius:var(--r-sm);background:var(--brand);
  color:var(--brand-on);flex:none;object-fit:cover;
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:var(--t-sm);
}
img.brand-mark{background:none}
.brand-name{font-size:var(--t-lg);font-weight:700;letter-spacing:.2px}
.nav-links{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;
  -webkit-overflow-scrolling:touch}
.nav-links::-webkit-scrollbar{display:none}
.nav-links a{
  color:var(--sub);text-decoration:none;font-size:var(--t-md);font-weight:600;
  padding:8px 11px;border-radius:var(--r-sm);white-space:nowrap;
  display:flex;align-items:center;min-height:40px;
  transition:color .16s var(--ease),background .16s var(--ease);
}
.nav-links a:hover{color:var(--ink);background:var(--line-soft)}
.nav-links a.on{color:var(--brand-ink);background:var(--brand-weak)}
/* 窄屏优先保证 4 个导航项全部可见，品牌标记保留、文字让位 */
@media (max-width:430px){
  .brand-name{display:none}
  .nav-links a{padding:8px 9px}
}

/* ---------- 页头 ---------- */
.hero{
  background:linear-gradient(168deg,var(--hero-1),var(--hero-2));
  color:var(--ink);padding:24px 0 38px;
}
.hero .wrap{max-width:var(--w)}
.hero h1{margin:0 0 8px;font-size:var(--t-2xl);font-weight:700;
  letter-spacing:-.4px;line-height:1.25}
.hero p{margin:0;font-size:var(--t-md);color:var(--sub);line-height:1.7;max-width:60ch}
.stamp{
  display:inline-flex;align-items:center;gap:6px;margin-top:16px;font-size:var(--t-xs);
  color:var(--sub);background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-full);padding:5px 12px;
}
.pull{margin-top:-20px}

/* ---------- 区块 ---------- */
section{margin-top:26px}
.sec-head{margin:0 2px 12px}
.sec-title{font-size:var(--t-xl);font-weight:700;letter-spacing:-.2px}
.sec-note{font-size:var(--t-sm);color:var(--sub);margin-top:3px}

/* ---------- 卡片 / 行 ---------- */
.card{background:var(--card);border-radius:var(--r-lg);box-shadow:var(--shadow);
  overflow:hidden}
.row{
  display:flex;align-items:center;gap:12px;padding:13px 14px;
  border-bottom:1px solid var(--line-soft);
  text-decoration:none;color:inherit;cursor:pointer;min-height:60px;
  transition:background .16s var(--ease);
}
.row:last-child{border-bottom:none}
.row:hover{background:var(--card-hover)}
.row:active{background:var(--line-soft)}
.ico{width:38px;height:38px;border-radius:var(--r-md);background:var(--brand-weak);
  flex:none;display:flex;align-items:center;justify-content:center}
.ico svg{width:19px;height:19px;stroke:var(--brand-ink);fill:none;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.row-body{flex:1;min-width:0}
.row-t{font-size:var(--t-lg);font-weight:600;display:flex;align-items:center;gap:6px;
  line-height:1.4}
.row-d{font-size:var(--t-sm);color:var(--sub);margin-top:2px;font-family:var(--mono);
  line-height:1.55;overflow-wrap:anywhere;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tag{font-size:var(--t-xs);font-weight:600;padding:2px 7px;border-radius:var(--r-sm);
  background:var(--ok-soft);color:var(--ok);flex:none;line-height:1.5}
.tag.warn{background:var(--warn-soft);color:var(--warn)}
.tag.stop{background:var(--stop-soft);color:var(--stop)}
.chev{flex:none;width:16px;height:16px;stroke:var(--faint);fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}

/* 行内的次要操作（复制）：抬到整行点击区之上，保证不会误触发跳转 */
.row > .btn.sm{position:relative;z-index:1;flex:none;margin-left:2px}

/* ---------- 按钮 ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--brand);color:var(--brand-on);text-decoration:none;
  font-size:var(--t-md);font-weight:600;padding:11px 18px;min-height:44px;
  border-radius:var(--r-md);border:1px solid transparent;
  font-family:inherit;cursor:pointer;white-space:nowrap;
  transition:background .16s var(--ease),transform .1s var(--ease),
             border-color .16s var(--ease);
}
.btn:hover{background:var(--brand-deep)}
.btn:active{transform:translateY(1px)}
.btn.ghost{background:transparent;color:var(--brand-ink);border-color:var(--line)}
.btn.ghost:hover{background:var(--brand-weak);border-color:var(--brand-weak)}
.btn.sm{font-size:var(--t-sm);padding:8px 12px;min-height:44px}

/* ---------- 网格 ---------- */
.grid{display:grid;gap:14px;grid-template-columns:1fr}

/* ---------- 下载卡 ---------- */
.dl-card{background:var(--card);border-radius:var(--r-lg);box-shadow:var(--shadow);
  padding:16px;display:flex;gap:14px;align-items:flex-start}
.dl-icon{width:46px;height:46px;border-radius:11px;flex:none;object-fit:cover;
  box-shadow:0 2px 8px -2px rgba(22,42,84,.28)}
/* 二维码只在桌面出现：手机用户没法扫自己屏幕，留着只会挤掉按钮空间。
   若要在手机上也显示，把下面的 display:none 删掉即可。 */
.qr{display:none;width:100px;height:100px;flex:none;border-radius:var(--r-md);
  border:1px solid var(--qr-line);padding:7px;background:var(--qr-bg)}
.qr svg,.qr img{width:100%;height:100%;display:block}
.dl-body{flex:1;min-width:0}
.dl-t{font-size:var(--t-xl);font-weight:700;margin:0 0 5px;line-height:1.35;
  display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.dl-d{font-size:var(--t-md);color:var(--sub);line-height:1.7;margin-bottom:13px}
.dl-acts{display:flex;gap:8px;flex-wrap:wrap}

/* ---------- 教程步骤 ---------- */
.steps{counter-reset:s}
.step{background:var(--card);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);
  padding:16px;margin-bottom:12px;display:flex;gap:14px;align-items:flex-start}
.step-n{
  width:26px;height:26px;border-radius:50%;background:var(--brand);
  color:var(--brand-on);flex:none;
  display:flex;align-items:center;justify-content:center;
  font-size:var(--t-md);font-weight:700;margin-top:1px;
}
.step-main{flex:1;min-width:0}
.step-t{font-size:var(--t-lg);font-weight:700;margin-bottom:5px;line-height:1.45}
.step-d{font-size:var(--t-md);color:var(--ink-2);line-height:1.8}
.step-d code{background:var(--brand-weak);color:var(--brand-ink);padding:2px 6px;
  border-radius:var(--r-sm);font-family:var(--mono);font-size:var(--t-sm);font-weight:600}
.step-d b{color:var(--ink)}
.step-fig{margin-top:13px}
.step-fig svg{width:186px;max-width:100%;height:auto;border-radius:var(--r-lg);
  box-shadow:var(--shadow-fig)}
.step-cap{font-size:var(--t-sm);color:var(--sub);margin-top:7px;max-width:250px;
  line-height:1.6}

/* ---------- 教程截图 ---------- */
.shot{margin:13px 0 0;padding:0}
.shot img{display:block;width:100%;max-width:220px;height:auto;
  border-radius:var(--r-md);box-shadow:var(--shadow-fig);cursor:zoom-in;
  background:var(--card)}
.shot.wide img{max-width:100%}
.shot figcaption{font-size:var(--t-sm);color:var(--sub);margin-top:7px;
  line-height:1.6;max-width:420px}
.shot-missing{font-size:var(--t-sm);color:var(--stop);background:var(--stop-soft);
  border-radius:var(--r-sm);padding:8px 10px;margin-top:10px}
.shot-row{display:flex;gap:14px;flex-wrap:wrap;align-items:flex-start}
.shot-row .shot{flex:1 1 190px;min-width:0;margin-top:0}

#zoom{position:fixed;inset:0;background:rgba(6,10,20,.93);z-index:120;
  display:none;align-items:center;justify-content:center;padding:16px;
  overflow:auto;-webkit-overflow-scrolling:touch}
#zoom.on{display:flex;animation:fadeIn .16s var(--ease) both}
#zoom img{max-width:100%;height:auto;border-radius:var(--r-md);cursor:zoom-out}
.zoom-x{position:fixed;top:12px;right:12px;width:44px;height:44px;
  border-radius:50%;border:none;background:rgba(255,255,255,.16);color:#fff;
  font-size:26px;line-height:1;cursor:pointer;font-family:inherit}
.zoom-x:hover{background:rgba(255,255,255,.28)}

/* ---------- 提示条 ---------- */
.note{border-radius:var(--r-md);padding:12px 14px;font-size:var(--t-md);
  line-height:1.75;margin:12px 0}
.note.warn{background:var(--warn-soft);color:var(--warn)}
.note.info{background:var(--brand-weak);color:var(--brand-ink)}
.note.stop{background:var(--stop-soft);color:var(--stop)}
.note b{font-weight:700}
.note code{background:rgba(0,0,0,.07);padding:2px 6px;border-radius:var(--r-sm);
  font-family:var(--mono);font-size:var(--t-sm)}
@media (prefers-color-scheme:dark){
  .note code{background:rgba(255,255,255,.10)}
}

/* ---------- 品牌选择 tab ---------- */
.chips{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:14px}
.chip{
  border:1px solid var(--line);background:var(--card);color:var(--sub);
  font-family:inherit;font-size:var(--t-md);font-weight:600;
  padding:9px 14px;min-height:44px;border-radius:var(--r-md);cursor:pointer;
  transition:background .16s var(--ease),color .16s var(--ease),
             border-color .16s var(--ease),transform .1s var(--ease);
}
.chip:hover{color:var(--ink);border-color:var(--faint)}
.chip:active{transform:translateY(1px)}
.chip.on{background:var(--brand);color:var(--brand-on);border-color:var(--brand)}
.pane{display:none}
.pane.on{display:block;animation:fadeUp .26s var(--ease) both}

/* ---------- 活动 ---------- */
.act-card{background:var(--card);border-radius:var(--r-lg);box-shadow:var(--shadow);
  overflow:hidden;display:flex;flex-direction:column}
/* 顶饰条：颜色仍由 config.js 里每个活动的 color 决定，只是不再重复印一遍标题 */
.act-banner{height:8px;flex:none}
.act-in{padding:16px}
.act-status{display:inline-block;font-size:var(--t-xs);font-weight:700;padding:2px 8px;
  border-radius:var(--r-sm);margin-bottom:9px;line-height:1.6}
.act-t{font-size:var(--t-xl);font-weight:700;margin-bottom:5px;line-height:1.4}
.act-meta{font-size:var(--t-sm);color:var(--sub);font-family:var(--mono);margin-bottom:10px}
.act-sum{font-size:var(--t-md);color:var(--ink-2);line-height:1.75;margin-bottom:13px}
.act-detail{border-top:1px solid var(--line);padding-top:13px;margin-top:2px;display:none}
.act-detail.on{display:block;animation:fadeUp .24s var(--ease) both}
.act-detail h4{margin:0 0 7px;font-size:var(--t-md);font-weight:700;color:var(--ink)}
.act-detail ul{margin:0 0 13px;padding-left:19px;font-size:var(--t-md);
  color:var(--ink-2);line-height:1.85}

/* ---------- FAQ ---------- */
.faq{background:var(--card);border-radius:var(--r-lg);box-shadow:var(--shadow);
  overflow:hidden}
.faq-item{border-bottom:1px solid var(--line-soft)}
.faq-item:last-child{border-bottom:none}
.faq-q{padding:14px;font-size:var(--t-lg);font-weight:600;cursor:pointer;
  display:flex;gap:10px;align-items:flex-start;min-height:52px;line-height:1.5;
  transition:background .16s var(--ease)}
.faq-q:hover{background:var(--card-hover)}
.faq-q svg{width:16px;height:16px;flex:none;stroke:var(--sub);fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;margin-top:4px;
  transition:transform .22s var(--ease)}
.faq-item.open .faq-q svg{transform:rotate(180deg)}
.faq-a{display:none;padding:0 14px 15px 40px;font-size:var(--t-md);
  color:var(--ink-2);line-height:1.8}
.faq-item.open .faq-a{display:block;animation:fadeUp .22s var(--ease) both}

/* ---------- 底部 ---------- */
footer{margin-top:34px}
footer .disc{background:var(--card);border-radius:var(--r-md);padding:15px;
  color:var(--sub);font-size:var(--t-sm);line-height:1.85;box-shadow:var(--shadow-sm)}
footer .cr{text-align:center;font-size:var(--t-sm);color:var(--sub);margin-top:14px}

/* ---------- toast + 复制弹层 ---------- */
#toast{position:fixed;left:50%;bottom:40px;transform:translate(-50%,16px);
  background:var(--ink);color:var(--bg);font-size:var(--t-md);padding:11px 18px;
  border-radius:var(--r-md);opacity:0;pointer-events:none;
  transition:opacity .22s var(--ease),transform .22s var(--ease);z-index:99;
  box-shadow:var(--shadow-lg)}
#toast.on{opacity:1;transform:translate(-50%,0)}

#modal{position:fixed;inset:0;background:rgba(8,14,30,.62);z-index:90;
  display:none;align-items:center;justify-content:center;padding:20px}
#modal.on{display:flex;animation:fadeIn .18s var(--ease) both}
.modal-box{background:var(--card);border-radius:var(--r-lg);max-width:400px;width:100%;
  padding:20px;box-shadow:var(--shadow-lg);animation:popIn .24s var(--ease) both}
.modal-box h3{margin:0 0 8px;font-size:var(--t-xl);font-weight:700}
.modal-box p{margin:0 0 13px;font-size:var(--t-md);color:var(--sub);line-height:1.7}
.url-box{background:var(--bg);border:1px solid var(--line);border-radius:var(--r-md);
  padding:12px;font-family:var(--mono);font-size:var(--t-sm);word-break:break-all;
  color:var(--ink);line-height:1.6;margin-bottom:13px;
  user-select:all;-webkit-user-select:all}
.modal-acts{display:flex;gap:9px}
.modal-acts .btn{flex:1}
.wx-tip{background:var(--warn-soft);color:var(--warn);border-radius:var(--r-md);
  padding:11px 13px;font-size:var(--t-sm);line-height:1.7;margin-bottom:13px}

/* ---------- 动效关键帧（档位 3：只做进入与反馈，不做滚动编排） ---------- */
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes fadeUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes popIn{from{opacity:0;transform:translateY(10px) scale(.98)}
                 to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;
  }
}

/* ===================================================================
   桌面适配
   =================================================================== */
@media (min-width:760px){
  :root{
    --t-xs:12px; --t-sm:13px; --t-md:14.5px; --t-lg:16px;
    --t-xl:19px; --t-2xl:29px;
  }
  .hero{padding:36px 0 58px}
  .hero p{font-size:var(--t-lg)}
  .grid{grid-template-columns:1fr 1fr}
  .grid.g3{grid-template-columns:repeat(3,1fr)}
  .sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px}
  .sec-note{margin-top:0;text-align:right;flex:none}
  .step{padding:20px 22px}
  .step-fig{display:flex;gap:18px;align-items:flex-start}
  .step-fig svg{width:200px}
  .shot img{max-width:240px}
  .shot.wide img{max-width:720px}
  .step-cap{margin-top:0;max-width:300px}
  .qr{display:block}
  footer .disc{padding:18px 20px}
}
@media (min-width:1000px){
  .dl-grid{grid-template-columns:1fr 1fr}
}