@charset "utf-8";
/* ==========================================================================
   代理IP服务官网模板样式表（站点名称由后台「站点名称」统一驱动，模板内不写死品牌）
   适配：PBootCMS   |   终端：PC / 平板 / 手机（响应式）
   目录：1.变量 2.基础 3.通用组件 4.顶部信息条 5.头部导航 6.首屏 7.通用区块
        8.产品/场景 9.套餐价格 10.接入流程 11.对比表 12.FAQ 13.CTA 14.页脚
        15.右侧悬浮客服 16.内页头部 17.列表/详情 18.表单 19.会员 20.响应式 21.打印
   ========================================================================== */

/* ---------- 1. 设计变量 ---------- */
:root {
    --navy-900: #061428;
    --navy-800: #0b1f3a;
    --navy-700: #12305a;
    --navy-600: #1b3f70;
    --brand-400: #4fe3ff;
    --brand-500: #00d4ff;
    --brand-600: #0a84ff;
    --brand-700: #0b63d6;
    --gold: #ffb648;

    --ink: #12233d;
    --ink-2: #3c5570;
    --muted: #6b7c93;
    --muted-2: #8fa9c7;
    --line: #e3ebf5;
    --line-2: #cfe0f5;

    --bg: #f4f8fd;
    --bg-2: #eef4fc;
    --white: #ffffff;

    --grad: linear-gradient(135deg, var(--brand-500), var(--brand-600));
    --grad-soft: linear-gradient(135deg, rgba(0, 212, 255, .16), rgba(10, 132, 255, .16));

    --radius-sm: 8px;
    --radius: 14px;
    --radius-lg: 20px;
    --shadow-sm: 0 4px 16px rgba(11, 31, 58, .05);
    --shadow: 0 12px 30px rgba(11, 31, 58, .09);
    --shadow-lg: 0 22px 50px rgba(11, 31, 58, .14);

    --header-h: 74px;
    --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---------- 2. 基础 ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }

/* 键盘可达性：用 Tab 浏览时给出清晰的焦点环（鼠标点击不会出现，不影响观感） */
:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 2px; }
.btn:focus-visible, .nav-link:focus-visible, .sort-tabs a:focus-visible,
.child-card:focus-visible, .plan-card:focus-visible, .article-item:focus-visible,
.side-list a:focus-visible, .footer-col a:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 3px; }
input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 0; }

/* 栅格安全阀：CSS 里 1fr 的「最小尺寸」是 auto，长 URL / 代码块 / 大表格会把栅格顶破。
   给所有栅格子项一个 min-width:0 让它们允许收缩，超出部分交给各自的 overflow 处理。 */
.cols-3 > *, .cols-4 > *, .hero-inner > *, .stat-grid > *,
.trust-inner > *, .plan-grid > *, .footer-grid > *,
.list-layout > *, .info-cards > *,
.form-grid > *, .prevnext > *, .map-stats > *, .member-layout > * { min-width: 0; }

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

body {
    font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 15px;
    line-height: 1.7;
    color: var(--ink);
    background: var(--bg);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body.nav-open { overflow: hidden; }

h1, h2, h3, h4, h5, h6 { line-height: 1.35; font-weight: 700; color: var(--ink); }

a { color: inherit; text-decoration: none; transition: color .22s var(--ease); }
a:hover { color: var(--brand-600); }

img { max-width: 100%; height: auto; vertical-align: middle; border: 0; }

ul, ol { list-style: none; }

button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; outline: none; }

button { cursor: pointer; border: none; background: none; }

::selection { background: rgba(0, 212, 255, .28); }

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: #eaf1fa; }
::-webkit-scrollbar-thumb { background: #b9cde4; border-radius: 9px; }
::-webkit-scrollbar-thumb:hover { background: var(--brand-600); }

/* 内联 SVG 图标统一处理（符号自带描边参数，未设置尺寸时按字号缩放） */
.ico {
    width: 1.1em; height: 1.1em; flex: none; display: inline-block;
    vertical-align: -0.16em; fill: none; stroke: currentColor;
    stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}

.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.skip-link {
    position: absolute; left: 12px; top: -60px; z-index: 999;
    background: var(--brand-600); color: #fff; padding: 8px 16px; border-radius: 0 0 10px 10px;
    transition: top .2s;
}
.skip-link:focus { top: 0; color: #fff; }

/* 跨页锚点定位（如子分类页点「看全部套餐横向对比 →」跳到 /package/#compare）：
   吸顶导航会盖住目标版块顶部，按导航高度留出偏移 */
section[id] { scroll-margin-top: calc(var(--header-h) + 14px); }

/* ---------- 3. 通用组件 ---------- */
.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 20px; }

.section { padding: 84px 0; position: relative; }
.section.alt { background: var(--white); }
/* 紧跟首屏/信任条的版块，顶部留白收紧一些 */
.section-tight { padding-top: 32px; }
/* 紧接下一个版块时，底部留白与「信任条」的 26px 保持一致（窄屏 22 / 20px，与 .section-tabbed 同节奏） */
.section-tight-b { padding-bottom: 26px; }

.section-head { max-width: 760px; margin: 0 auto 48px; text-align: center; }
/* 加宽版标题区：版心与下方表格同宽、间距收紧（用于产品对比、表格类区块） */
.section-head-wide { max-width: 100%; margin-bottom: 22px; }
.section-head h2,
.section-title { font-size: 32px; letter-spacing: .5px; margin-bottom: 14px; }
.section-head p,
.section-desc { color: var(--muted); font-size: 15.5px; }

.text-gradient {
    background: linear-gradient(90deg, var(--brand-500), #7fe3ff 60%, #8fb8ff);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* 按钮 */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 12px 24px; border-radius: 10px; font-size: 15px; font-weight: 600;
    border: 1px solid transparent; white-space: nowrap; cursor: pointer;
    transition: transform .22s var(--ease), box-shadow .22s var(--ease), background .22s, color .22s, border-color .22s;
}
.btn .ico { width: 18px; height: 18px; flex: none; }

.btn-primary { background: var(--grad); color: #04182c; box-shadow: 0 8px 20px rgba(10, 132, 255, .28); }
.btn-primary:hover { color: #04182c; transform: translateY(-2px); box-shadow: 0 14px 28px rgba(10, 132, 255, .34); }

/* 深色实底按钮：跟首屏 / 收尾条 / 页脚的"海军蓝"一条线，沉稳、有分量、不刺眼。
   目前只用在首页套餐区底部的「查看全部套餐与价格」—— 它是"去看全部"的导航动作，
   不是购买本身，所以不该用亮青蓝主色去抢首屏「立即购买」和收尾条「免费注册」这两个主 CTA 的戏。 */
.btn-navy { background: linear-gradient(135deg, var(--navy-700), var(--navy-800)); color: #fff; box-shadow: 0 12px 26px rgba(11, 31, 58, .22); }
.btn-navy:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 18px 34px rgba(11, 31, 58, .28); }

.btn-outline { border-color: var(--line-2); background: #fff; color: var(--navy-700); }
.btn-outline:hover { border-color: var(--brand-500); color: var(--brand-700); transform: translateY(-2px); }

.btn-ghost { border-color: rgba(255, 255, 255, .3); color: #d7e6f7; background: rgba(255, 255, 255, .04); }
.btn-ghost:hover { border-color: var(--brand-500); color: #fff; background: rgba(0, 212, 255, .12); }

.btn-lg { padding: 15px 34px; font-size: 16.5px; border-radius: 12px; }
.btn-sm { padding: 8px 16px; font-size: 14px; border-radius: 8px; }
.btn-block { width: 100%; }

.link-more { display: inline-flex; align-items: center; gap: 6px; color: var(--brand-700); font-weight: 600; font-size: 14.5px; }
.link-more::after { content: "→"; transition: transform .22s var(--ease); }
.link-more:hover::after { transform: translateX(4px); }

/* 卡片 */
.card {
    background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 28px; box-shadow: var(--shadow-sm);
    transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--line-2); }
.card h3 { font-size: 17.5px; margin-bottom: 10px; }
.card p { color: var(--muted); font-size: 14.5px; }

.grid { display: grid; gap: 22px; }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-4 { grid-template-columns: repeat(4, 1fr); }

/* 图标块 */
.icon-box {
    width: 48px; height: 48px; border-radius: 14px; display: flex; align-items: center; justify-content: center;
    background: var(--grad-soft); color: var(--brand-600); margin-bottom: 16px; flex: none;
}
.icon-box .ico { width: 24px; height: 24px; }
.icon-box.solid { background: var(--grad); color: #04182c; }

.notice-bar {
    display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.7;
    background: linear-gradient(90deg, rgba(0, 212, 255, .1), rgba(10, 132, 255, .06));
    border: 1px solid var(--line-2); border-radius: var(--radius); padding: 14px 18px; color: var(--ink-2);
}
.notice-bar .ico { width: 18px; height: 18px; color: var(--brand-600); flex: none; margin-top: 3px; }
.notice-bar strong { color: var(--navy-800); }
/* 提示条内的暖色强调（折扣/优惠这类"行动理由"，用暖色从蓝色主色里跳出来） */
.notice-bar .hl { color: #e0670d; font-weight: 700; }
/* 提示条里的文字链接（如子分类页「看全部套餐横向对比 →」）：默认继承正文灰，看着不像链接 */
.notice-bar a { color: var(--brand-700); font-weight: 600; }
.notice-bar a:hover { color: var(--brand-600); text-decoration: underline; }
/* 同一个 .hl 用在深色 CTA 区：深蓝底上橙色偏闷，换成金色才跳得出来 */
.cta-band .hl { color: var(--gold); font-weight: 700; }
/* 首页合规提示：单行短文案，淡蓝底胶囊、宽度贴合文字并居中（模板里其它页面仍用默认蓝色底板） */
.notice-bar-plain {
    width: fit-content; max-width: 100%;
    margin: 10px auto 0;           /* 与上一行“以上为部分支持项目展示…”贴紧，读作同一组脚注 */
    justify-content: center; text-align: center;
    background: linear-gradient(90deg, rgba(0, 212, 255, .1), rgba(10, 132, 255, .06));
    border: 1px solid var(--line-2); border-radius: 999px;
    padding: 7px 20px;
    font-size: 13px; line-height: 1.7; color: var(--ink-2);
}
.notice-bar-plain strong { color: var(--navy-800); }

/* 合规警示条（警示色 + 图标；宽度与下方卡片区对齐，桌面端单行显示，窄屏自动折行） */
.warn-bar {
    display: flex; align-items: center; gap: 10px;
    width: 100%; max-width: 1160px; margin: 0 auto 40px;
    background: linear-gradient(90deg, #fff6e5, #fffdf9);
    border: 1px solid #ffd79a; border-left: 3px solid #f5a623;
    border-radius: 10px; padding: 12px 20px;
    font-size: 14px; line-height: 1.75; color: #8a5a12; text-align: left;
}
.warn-bar > div { text-wrap: balance; }
.warn-bar .ico { width: 18px; height: 18px; flex: none; color: #e08c00; }
.warn-bar strong { color: #b26a00; font-weight: 700; }

/* 滚动出现动画（仅在 JS 可用时隐藏，保证无 JS 时可正常阅读与收录） */
.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    .js .reveal { opacity: 1; transform: none; transition: none; }
    html { scroll-behavior: auto; }
}

/* ---------- 4. 头部导航 ---------- */
.site-header {
    position: sticky; top: 0; z-index: 120;
    background: rgba(11, 31, 58, .96);
    backdrop-filter: saturate(180%) blur(10px);
    -webkit-backdrop-filter: saturate(180%) blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    transition: box-shadow .3s, background .3s;
}
.site-header.is-stuck { box-shadow: 0 10px 30px rgba(6, 20, 40, .35); }
.header-inner { display: flex; align-items: center; gap: 26px; height: var(--header-h); }

.brand { display: flex; align-items: center; gap: 11px; flex: none; }

/* LOGO 位：固定 50×50，上传任意尺寸的图片都会自动缩放到该尺寸（等比、不拉伸变形） */
.brand-logo {
    display: block; flex: none;
    width: 50px; height: 50px;
    object-fit: contain; object-position: center;
    border-radius: 9px;
}
/* 未上传 LOGO 时 CMS 会回退输出默认图，这里隐藏掉，保证位置留空 */
.brand-logo[src=""], .brand-logo[src$="/static/images/logo.png"] { display: none; }
/* 想让 LOGO 填满 50×50：把上面的 object-fit 改成 cover（裁切填满）或 fill（拉伸填满） */
/* 若 LOGO 是深色透明图、在深色导航上对比度不足，可加白色圆角底： */
/* .brand-logo { background: #fff; padding: 4px; border-radius: 10px; box-sizing: border-box; } */
.footer-logo {
    display: block; flex: none;
    width: 50px; height: 50px;
    object-fit: contain; object-position: center;
    border-radius: 9px;
}
.footer-logo[src=""], .footer-logo[src$="/static/images/logo.png"] { display: none; }
/* .footer-logo { background: #fff; padding: 4px; border-radius: 10px; box-sizing: border-box; } */

.brand-text { display: flex; align-items: center; }
.brand-text b { color: #fff; font-size: 25px; font-weight: 700; letter-spacing: .5px; white-space: nowrap; }

.main-nav { margin-left: auto; }
.nav-list { display: flex; align-items: center; gap: 4px; }
.nav-item { position: relative; }
.nav-link {
    display: flex; align-items: center; gap: 4px; color: #c6d6ea; font-size: 15px;
    padding: 10px 14px; border-radius: 9px; transition: color .2s, background .2s;
}
.nav-link:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.nav-item.active > .nav-link { color: #fff; background: rgba(0, 212, 255, .16); }

/* 导航里那个"要跳出来"的栏目（自研软路由）：**只用一个金色角标做标记**，
   文字颜色与字重跟其它栏目完全一致（不加粗、不变白）—— 角标已经够醒目，
   再叠一层"白色+加粗"就变成三重强调，反而像广告位。
   定位说明：角标的绝对定位挂在 .nav-item 上（.nav-item 本身就是 position: relative），
   所以这里不需要再给 .nav-link 加定位。类名 nav-hl 由 head.html 按 scode 条件加，不写死栏目名。 */
.nav-item.nav-hl > .nav-link .nav-tag {
    position: absolute; top: -3px; right: -8px; font-style: normal;
    font-size: 10px; line-height: 1; padding: 3px 5px; border-radius: 7px;
    font-weight: 800; letter-spacing: .2px;
    background: linear-gradient(135deg, #ffd489, #ffb648); color: #3a2400;
    box-shadow: 0 3px 8px rgba(255, 182, 72, .35);
    overflow: hidden;
}
/* 悬停才扫的一道流光：默认完全静止（高光带停在画面外），鼠标移到该项上跑一次就停。
   只动 transform，不动 left/width，避免触发布局重排。 */
.nav-item.nav-hl > .nav-link .nav-tag::after {
    content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 60%;
    border-radius: inherit; pointer-events: none;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .75), rgba(255, 255, 255, 0));
    transform: translateX(-120%) skewX(-18deg);
}
.nav-item.nav-hl > .nav-link:hover .nav-tag::after { animation: tagSheen .8s ease-in-out 1; }
@keyframes tagSheen {
    from { transform: translateX(-120%) skewX(-18deg); }
    to { transform: translateX(170%) skewX(-18deg); }
}
/* 系统开了「减少动态效果」就不扫光 */
@media (prefers-reduced-motion: reduce) {
    .nav-item.nav-hl > .nav-link .nav-tag::after { display: none; }
}

.sub-menu {
    position: absolute; top: calc(100% + 8px); left: 50%; transform: translate(-50%, 8px);
    min-width: 178px; background: #fff; border-radius: 12px; padding: 8px;
    box-shadow: 0 18px 40px rgba(6, 20, 40, .18); border: 1px solid var(--line);
    opacity: 0; visibility: hidden; transition: all .24s var(--ease); z-index: 20;
}
.sub-menu:empty { display: none; }
.sub-menu::before {
    content: ""; position: absolute; top: -6px; left: 50%; margin-left: -6px;
    width: 12px; height: 12px; background: #fff; transform: rotate(45deg);
    border-left: 1px solid var(--line); border-top: 1px solid var(--line);
}
.nav-item:hover > .sub-menu { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.sub-menu a { display: block; padding: 9px 14px; border-radius: 8px; font-size: 14.5px; color: var(--ink-2); }
.sub-menu a:hover { background: var(--bg-2); color: var(--brand-700); }

.header-cta { display: flex; align-items: center; gap: 10px; flex: none; }
.header-cta .btn { padding: 9px 18px; font-size: 14px; }

/* 页头「注册」按钮的呼吸光晕（主 CTA 想让它"活着"，但别晃、别动位置）。
   做法要点：光晕画在 ::after 这一层上，而不是动按钮自己的 box-shadow ——
   因为 CSS 动画的值优先级高于普通声明，直接动 box-shadow 会把
   .btn-primary:hover 的加深阴影顶掉；动画只碰 opacity 也只影响合成层，最省。
   按钮自身的 hover 上浮（transform）与阴影因此完全不受影响。 */
.header-cta .btn-primary { position: relative; }
.header-cta .btn-primary::after {
    content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    box-shadow: 0 0 0 6px rgba(0, 212, 255, .14), 0 12px 30px rgba(0, 212, 255, .55);
    opacity: 0;
    animation: headerCtaGlow 3s ease-in-out infinite;
}
@keyframes headerCtaGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .header-cta .btn-primary::after { display: none; }
}

.nav-toggle {
    display: none; width: 44px; height: 44px; border-radius: 10px; flex: none;
    border: 1px solid rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .06);
    position: relative;
}
.nav-toggle span {
    position: absolute; left: 50%; width: 20px; height: 2px; background: #fff; border-radius: 2px;
    transform: translateX(-50%); transition: transform .28s var(--ease), opacity .2s;
}
.nav-toggle span:nth-child(1) { top: 15px; }
.nav-toggle span:nth-child(2) { top: 21px; }
.nav-toggle span:nth-child(3) { top: 27px; }
.nav-toggle.active span:nth-child(1) { transform: translateX(-50%) translateY(6px) rotate(45deg); }
.nav-toggle.active span:nth-child(2) { opacity: 0; }
.nav-toggle.active span:nth-child(3) { transform: translateX(-50%) translateY(-6px) rotate(-45deg); }

.nav-drawer-head { display: none; }
.nav-foot { display: none; }
.nav-mask {
    position: fixed; inset: 0; background: rgba(6, 20, 40, .55); z-index: 110;
    opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s;
    backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
}
.nav-mask.show { opacity: 1; visibility: visible; }

/* ---------- 6. 首屏 ---------- */
.hero {
    position: relative; overflow: hidden; color: #fff;
    background: linear-gradient(160deg, #0b1f3a 0%, #12305a 55%, #0b1f3a 100%);
    padding: 78px 0 92px;
}
.hero::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background:
        radial-gradient(760px 420px at 82% -10%, rgba(0, 212, 255, .26), transparent 62%),
        radial-gradient(680px 420px at 8% 108%, rgba(10, 132, 255, .22), transparent 60%);
}
.hero::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
    background-size: 58px 58px;
    -webkit-mask-image: radial-gradient(circle at 62% 32%, #000, transparent 76%);
    mask-image: radial-gradient(circle at 62% 32%, #000, transparent 76%);
}
.hero-inner {
    position: relative; z-index: 2;
    display: grid; grid-template-columns: 1.1fr .9fr; gap: 54px; align-items: center;
}
.hero-badge {
    display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: #7fe3ff;
    background: rgba(0, 212, 255, .14); border: 1px solid rgba(0, 212, 255, .3);
    padding: 6px 14px; border-radius: 20px; margin-bottom: 20px;
}
.hero-title { font-size: 46px; line-height: 1.24; letter-spacing: 1px; margin-bottom: 18px; color: #fff; }
.hero-desc { color: #b9cde6; font-size: 17px; max-width: 580px; margin-bottom: 30px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 26px; }
.hero-points { display: flex; flex-wrap: wrap; gap: 10px 24px; color: #9db4ce; font-size: 14px; }
.hero-points li { display: flex; align-items: center; gap: 7px; }
.hero-points .ico { width: 16px; height: 16px; color: var(--brand-500); flex: none; }

.hero-panel {
    background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14);
    border-radius: var(--radius-lg); padding: 26px;
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 24px 60px rgba(4, 14, 30, .35);
}
.hero-panel .panel-title {
    display: flex; align-items: center; justify-content: flex-start; gap: 8px;
    font-size: 13.5px; color: #91a9c5; letter-spacing: .5px; margin-bottom: 18px;
}
/* 标题前的「实况」呼吸点 */
.hero-panel .panel-title::before {
    content: ''; width: 7px; height: 7px; border-radius: 50%; flex: none;
    background: #34d399; box-shadow: 0 0 0 4px rgba(52, 211, 153, .16);
    animation: panelPulse 2.4s ease-in-out infinite;
}
@keyframes panelPulse { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }
.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.stat-card {
    background: rgba(0, 212, 255, .07); border: 1px solid rgba(0, 212, 255, .18);
    border-radius: 12px; padding: 16px;
    /* 悬停动效：只让边框亮起来（0.3s 过渡），不位移、不跳数字 */
    transition: border-color .3s var(--ease);
}
.stat-card:hover { border-color: rgba(0, 212, 255, .55); }
.stat-card b { display: block; font-size: 25px; font-weight: 800; color: var(--brand-500); letter-spacing: .5px; line-height: 1.15; }
.stat-card b small { font-size: .6em; font-weight: 700; margin-left: 1px; letter-spacing: 0; }
/* ∞ 等非数字符号偏小，单独放大一点 */
.stat-card b span[data-count="∞"] { font-size: 1.18em; line-height: 1; }
.stat-card span { font-size: 13px; color: #9db4ce; }

.meter-list { margin-top: 20px; }
.meter { display: flex; align-items: center; gap: 12px; font-size: 12.5px; color: #9db4ce; margin-bottom: 11px; }
.meter > span { flex: none; width: auto; min-width: 78px; white-space: nowrap; }
/* 进度条右端显示百分比数值（原来是空的）：等宽数字对齐，换行不跳动 */
.meter > em {
    flex: none; min-width: 46px; text-align: right; font-style: normal;
    color: #dbe7f5; font-weight: 600; font-variant-numeric: tabular-nums;
}
.meter-bar { flex: 1; height: 6px; border-radius: 6px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.meter-bar i { display: block; height: 100%; width: 0; border-radius: 6px; background: var(--grad); transition: width 1.2s var(--ease); }

/* 面板底部：返利招商文案 */
.panel-protocols {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .1);
    font-size: 14px; color: var(--brand-500);
}
.panel-protocols b { color: var(--brand-500); font-weight: 700; }
.panel-protocols span { color: var(--brand-500); font-weight: 600; letter-spacing: .4px; }
/* 后半句前的圆点：跟文案同色，带一点同色辉光 */
.panel-protocols i {
    flex: none; width: 5px; height: 5px; border-radius: 50%;
    background: var(--brand-500); box-shadow: 0 0 6px rgba(0, 212, 255, .55);
}

/* 信任条 */
.trust-strip { background: var(--white); border-bottom: 1px solid var(--line); }
.trust-inner { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; padding: 26px 0; }
.trust-item { display: flex; align-items: center; gap: 12px; }
.trust-item .icon-box { margin: 0; width: 42px; height: 42px; border-radius: 12px; }
.trust-item .icon-box .ico { width: 21px; height: 21px; }
.trust-item b { display: block; font-size: 15.5px; }
.trust-item span { font-size: 13px; color: var(--muted); }

/* ---------- 7. 通用区块：优势 ---------- */
.feature-card { display: flex; flex-direction: column; height: 100%; }
.feature-card p { flex: 1; }



/* ---------- 8. 产品矩阵 / 应用场景（.scene-* 已随版块替换删除） ---------- */
.product-card { position: relative; overflow: hidden; }
.product-card::after {
    content: ""; position: absolute; right: -40px; top: -40px; width: 110px; height: 110px;
    border-radius: 50%; background: var(--grad-soft); transition: transform .4s var(--ease);
}
.product-card:hover::after { transform: scale(1.35); }
.product-card .icon-box, .product-card h3, .product-card p { position: relative; z-index: 1; }

/* ---------- 支持的游戏与应用（图标墙：每行 10 个，自动换行且最后一行居中） ---------- */
.icon-wall {
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: 20px 10px; max-width: 1040px; margin: 0 auto;
}
.wall-item { width: 92px; min-height: 86px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 8px; }
.wall-tile {
    width: 62px; height: 62px; border-radius: 16px; flex: none;
    background: #fff; border: 1px solid var(--line); padding: 4px;
    box-shadow: 0 4px 12px rgba(11, 31, 58, .06);
    display: flex; align-items: center; justify-content: center; overflow: hidden;
    transition: transform .24s var(--ease), box-shadow .24s var(--ease), border-color .24s;
}
.wall-tile img { width: 100%; height: 100%; object-fit: contain; }
.wall-item:hover .wall-tile { transform: translateY(-3px); box-shadow: 0 10px 22px rgba(10, 132, 255, .2); border-color: var(--line-2); }
.wall-name { font-size: 12px; color: var(--ink-2); line-height: 1.25; }
/* 未上传图标时的占位：取名称首字做字母块，尺寸与已配图完全一致（上传图标后自动替换） */
.wall-tile-mono { background: linear-gradient(140deg, #eef5ff, #fbfdff); border-color: var(--line-2); }
.wall-tile-mono i { display: block; font-style: normal; font-size: 0; font-weight: 800; color: var(--brand-600); line-height: 1; }
.wall-tile-mono i::first-letter { font-size: 20px; }
.wall-more { text-align: center; font-size: 13.5px; color: var(--muted); margin-top: 22px; }

/* ---------- 9. 套餐价格 ---------- */
.plan-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; }
.plan-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.plan-card {
    position: relative; display: flex; flex-direction: column; background: #fff;
    border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 30px 26px;
    box-shadow: var(--shadow-sm);
    transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
}
.plan-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--line-2); }
.plan-card.featured {
    background: linear-gradient(#fff, #fff) padding-box, var(--grad) border-box;
    border: 2px solid transparent; box-shadow: 0 18px 44px rgba(10, 132, 255, .18);
}
.plan-badge {
    position: absolute; top: -13px; right: 22px; font-size: 12px; font-weight: 700; color: #04182c;
    background: var(--grad); padding: 4px 14px; border-radius: 20px;
    box-shadow: 0 6px 16px rgba(10, 132, 255, .28);
}
.plan-name { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; color: var(--brand-700); }
/* 套餐角标：右上角卖点标签（颜色由后台「颜色」字段决定） */
.plan-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
/* 套餐角标：颜色由后台扩展字段 ext_color 决定（写「蓝色/橙色」等中文色名）。
   没写色名或写了未收录的色名时，用下面这条默认底色兜底，角标不会变成"裸文字"。 */
.plan-tag { flex: none; font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 20px; white-space: nowrap; background: rgba(10, 132, 255, .1); color: var(--brand-700); }
.plan-tag[data-c="红色"] { background: #fee2e2; color: #c0392b; }
.plan-tag[data-c="橙色"] { background: #ffedd5; color: #c2410c; }
.plan-tag[data-c="黄色"] { background: #fef9c3; color: #a16207; }
.plan-tag[data-c="绿色"] { background: #dcfce7; color: #15803d; }
.plan-tag[data-c="蓝色"] { background: #dbeafe; color: #1d4ed8; }
.plan-tag[data-c="紫色"] { background: #ede9fe; color: #6d28d9; }
.plan-tag:empty { display: none; }
.plan-price { display: flex; align-items: baseline; gap: 6px; margin: 16px 0 6px; }
.plan-price b { font-size: 38px; font-weight: 800; color: var(--navy-800); letter-spacing: -1px; line-height: 1; }
.plan-price b small { font-size: 20px; font-weight: 700; }
.plan-price span { color: var(--muted); font-size: 14px; }
.plan-desc { color: var(--muted); font-size: 14px; padding-bottom: 18px; border-bottom: 1px dashed var(--line); margin-bottom: 18px; flex: 1; }
/* 套餐卖点：勾选图标用 CSS mask 画（颜色跟随主题主色）。
   后台把某条卖点留空时，渲染结果是空的 <li></li>，由 :empty 自动隐藏，
   所以模板里不需要写「字段非空」的条件判断（PBootCMS 的 if 条件不支持字符串字段比较）。 */
.plan-features { flex: 1; margin-bottom: 24px; list-style: none; }
.plan-features li, .detail-features li { position: relative; padding: 6px 0 6px 26px; font-size: 14.5px; color: var(--ink-2); }
.plan-features li::before, .detail-features li::before {
    content: ''; position: absolute; left: 0; top: 11px; width: 17px; height: 17px;
    background: var(--brand-600);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6L9 17l-5-5' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6L9 17l-5-5' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.plan-features li:empty, .detail-features li:empty { display: none; }

/* 详情页的「套餐要点」：浅底圆角框 + 两列，与首页卖点同源同款 */
.detail-features {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 22px;
    list-style: none; margin: 0 0 26px; padding: 16px 22px;
    background: linear-gradient(140deg, rgba(0, 212, 255, .07), rgba(10, 132, 255, .04));
    border: 1px solid var(--line-2); border-radius: var(--radius);
}

/* ---------- 软路由页：为什么选择 / 版本卡 / 能力分组 / 后台实拍 ---------- */
/* 「为什么选择」版块：上下留白一样（各 40px），版块自己上下对称。
   标题距首屏 = 首屏自身下内边距 56px + 这里 40px = 96px；
   卡片下方浅蓝留白 40px（再往下是下一版块自己的 84px 白底留白）。
   想再紧一点改成 32px、想再松一点改成 48px，两个数一起改才是上下对称。 */
.section-about { padding-top: 40px; padding-bottom: 40px; }
.section-about .section-head { margin-bottom: 30px; }
/* 4 个要点卡：一行 4 个，图标 + 大号关键词 + 一句说明 */
.about-points {
    list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px; max-width: 1060px; margin: 0 auto 30px;
}
.about-points li {
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
    padding: 24px 20px; text-align: center;
    transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s;
}
.about-points li:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--line-2); }
.about-points .ico { width: 26px; height: 26px; color: var(--brand-600); margin-bottom: 10px; }
.about-points b { display: block; font-size: 22px; color: var(--navy-800); letter-spacing: .5px; margin-bottom: 6px; }
.about-points span { display: block; font-size: 13.5px; color: var(--muted); line-height: 1.75; }

/* ---------- 深色区（部署方案 + OEM 定制，通屏深色底只画一次） ----------
   两块内容原本各自带深色底，中间夹一条浅色缝 —— 挨在一起就像"两个深色块撞上了"。
   现在底色提到这个外层容器上：① 接缝不存在（本来就只有一块底色）；
   ② 页面中段变成一整段"深色章节"，比两个小深块更有分量；③ 想调深色只改这一处。
   配色：牌面 多 WiFi 版 = 青（#22d3ee），工控 + AP 版 = 金（#fbbf24），
   深底上用高饱和的青 / 金才跳得出来，跟浅色区的蓝 / 橙强调色是同一套逻辑。 */
.dark-zone {
    position: relative; overflow: hidden; color: #e8eaf2;
    /* 整段深色 1116px 高，上下两端如果只用版块自己的 36px 贴边会显得"顶天立地太满"。
       这里加 20px：两端各 36 + 20 = 56px。
       注意这是**整幅通屏色块的边缘留白**，跟"版块之间的 36px 节奏"是两回事，
       不冲突 —— 里面两段之间的间距仍然由 .ver-band / .section 的 36/40 决定。
       想收就改这一个数：12 → 48px，0 → 回到 36px。 */
    padding-top: 20px; padding-bottom: 20px;
    /* 上面一道青色柔光提亮方案卡，右下角一点极淡的紫给 OEM 那段分层；
       底色是全站的"深海军蓝"，跟首屏 / CTA / 页脚一条线。 */
    background:
        radial-gradient(760px 380px at 50% 2%, rgba(0, 212, 255, .18), transparent 70%),
        radial-gradient(620px 340px at 92% 86%, rgba(124, 92, 255, .13), transparent 70%),
        linear-gradient(160deg, #071324, #101d3f 55%, #060d1a);
}
.ver-band {
    position: relative;
    padding: 36px 0 40px;
    /* 深色底由外层 .dark-zone 提供（通屏、只画一次），这里不再自带 background */
}
/* 版块头就两行：大标题 + 一行"多少台选哪个"（后半句整段换色） */
.ver-head { text-align: center; margin-bottom: 34px; }
.ver-lead { font-size: 28px; font-weight: 700; color: #fff; letter-spacing: .5px; margin-bottom: 14px; }
.ver-scale { font-size: 15.5px; color: #8fa0bd; }
.ver-band .hl-wifi { color: #22d3ee; font-weight: 700; }
.ver-band .hl-ap { color: #fbbf24; font-weight: 700; }

.ver-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; max-width: 1060px; margin: 0 auto; }
.ver-panel {
    position: relative; display: flex; flex-direction: column;
    background: rgba(255, 255, 255, .045); border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 18px; padding: 28px 26px 24px;
    transition: border-color .28s var(--ease), transform .28s var(--ease), background .28s var(--ease);
}
.ver-panel:hover { transform: translateY(-4px); border-color: rgba(34, 211, 238, .35); background: rgba(255, 255, 255, .06); }
.ver-panel-tag {
    align-self: flex-start; font-size: 12.5px; font-weight: 700; line-height: 1;
    padding: 7px 14px; border-radius: 20px; margin-bottom: 18px;
    color: #22d3ee; background: rgba(34, 211, 238, .12); border: 1px solid rgba(34, 211, 238, .34);
}
.ver-panel-tag:empty { display: none; }
.ver-panel-name { font-size: 27px; color: #fff; margin-bottom: 10px; }
.ver-panel-sub { font-size: 13.5px; line-height: 1.7; color: #94a5c2; margin-bottom: 20px; }
/* 要点：小圆点 + 文字（空行自动隐藏） */
.ver-panel-feat { list-style: none; display: grid; gap: 11px; margin-bottom: 24px; }
.ver-panel-feat li { position: relative; padding-left: 18px; font-size: 14px; line-height: 1.7; color: #cfd8ea; }
.ver-panel-feat li::before {
    content: ""; position: absolute; left: 0; top: 10px;
    width: 6px; height: 6px; border-radius: 50%; background: #22d3ee;
}
.ver-panel-feat li:empty { display: none; }
/* 大数字：30 台以内 / 30 台以上 */
.ver-panel-num { display: flex; align-items: baseline; gap: 8px; margin-bottom: 20px; }
.ver-panel-num b { font-size: 54px; line-height: 1; font-weight: 800; color: #22d3ee; letter-spacing: -1px; }
.ver-panel-num span { font-size: 15px; color: #94a5c2; }
.ver-panel-num b:empty, .ver-panel-num span:empty { display: none; }
/* 底部提示条：卡片最后一项，不留下边距 */
.ver-panel-note {
    font-size: 13px; line-height: 1.75; color: #fbbf24;
    background: rgba(251, 191, 36, .08); border: 1px solid rgba(251, 191, 36, .2);
    border-radius: 12px; padding: 13px 16px; margin: 0;
}
.ver-panel-note:empty { display: none; }

/* 第二张卡（工控 + AP 版）走金色：角标 / 圆点 / 大数字 / 提示条一起换 */
.ver-cards .ver-panel:nth-child(2):hover { border-color: rgba(251, 191, 36, .38); }
.ver-cards .ver-panel:nth-child(2) .ver-panel-tag { color: #fbbf24; background: rgba(251, 191, 36, .12); border-color: rgba(251, 191, 36, .34); }
.ver-cards .ver-panel:nth-child(2) .ver-panel-feat li::before { background: #fbbf24; }
.ver-cards .ver-panel:nth-child(2) .ver-panel-num b { color: #fbbf24; }
.ver-cards .ver-panel:nth-child(2) .ver-panel-note {
    color: #4ade80; background: rgba(74, 222, 128, .08); border-color: rgba(74, 222, 128, .2);
}

/* ---------- 系统亮点：小条目卡（一行 3 个） ----------
   比起"6 张大卡 + 项目符号列表"，12 个小条目更好扫：左边一个图标方块，右边名称 + 一句话。
   底版用 --bg 浅蓝（这个版块是白底），跟「发货与售后」那排卡同一套语言。 */
.feat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.feat-item {
    display: flex; align-items: flex-start; gap: 14px;
    background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 18px 20px;
    transition: transform .28s var(--ease), border-color .28s var(--ease), background .28s var(--ease);
}
.feat-item:hover { transform: translateY(-3px); border-color: var(--line-2); background: #fff; }
.feat-ico {
    box-sizing: border-box; flex: none; width: 38px; height: 38px; padding: 9px; border-radius: 11px;
    display: flex; align-items: center; justify-content: center;
    background: var(--grad-soft); color: var(--brand-700);
}
.feat-ico .ico { width: 20px; height: 20px; }
.feat-item h3 { font-size: 15.5px; margin-bottom: 4px; }
.feat-item p { font-size: 13px; line-height: 1.65; color: var(--muted); }

/* ---------- 软路由页：后台截图（标签切换） ----------
   三张图都是 1920×910，切换时占的是同一块位置、同一个尺寸 —— 所以永远是对齐的。
   默认（不跑 JS）三张平铺，至少都能看到；JS 给容器加 .is-tabbed 后才变成「标签 + 单张」。 */
/* 间距统一原则（软路由页）：
   ① 版块之间的留白一律走下面这两条 scoped 规则，不逐个改版块 —— 页面里所有浅色版块就是一个间距；
   ② 去掉小标的版块，标题就是版块第一个元素，所以"上面该留多少"跟别的版块完全一样，不需要额外补偿；
   ③ 只额外收紧「标题区 → 下面内容」这一处（48 → 24）；
   ④ 例外只有两个、都是单独确认过的：首屏下面那个「为什么选择」版块 40/40、深色的部署方案块 42/48。 */
/* 这一页版块之间的留白比全站默认（84px）小一档：全站默认适合内容型页面，
   而这个落地页块头大（深色横幅、18 条目、大卡），84 一叠起来每处都空一大截。
   用 .router-page 包一层精确作用到这一页，其它页面的 .section 不受影响。 */
.router-page .section { padding-top: 36px; padding-bottom: 36px; }
.router-page .section.section-about { padding-top: 32px; padding-bottom: 32px; }  /* 「为什么选择」比其它版块再紧 4px，维持首屏后的过渡感 */
.section-compact .section-head { margin-bottom: 24px; }

/* 两个方案名的强调色（浅底上用的，跟卡片标题同色，一眼能把"名字"和"方案"对起来）：
   多 WiFi 版 = 品牌蓝；工控 + AP 版 = 暖橙金。 */
.hl-wifi { color: var(--brand-700); font-weight: 700; }
.hl-ap { color: #c2410c; font-weight: 700; }
.ui-shots { display: block; }
.ui-shot { margin: 0 0 26px; }
.ui-shot:last-child { margin-bottom: 0; }

/* 点图放大（页面内灯箱，见 main.js 的 initLightbox）：只是鼠标样式与占位盒子 */
.ui-zoom { display: block; cursor: zoom-in; }
/* 写死宽高比：懒加载还没下完时也先把位置占住，三张高度一致、切换不跳高度 */
.ui-zoom img { display: block; width: 100%; height: auto; aspect-ratio: 1920 / 910; border-radius: var(--radius); border: 1px solid var(--line); }
/* 上面那条 aspect-ratio 是给软路由页 1920×910 的后台截图定的；
   教程正文里的截图尺寸各不相同，进正文时还原成图片自身比例，别被拉变形 */
.article-body .ui-zoom img { aspect-ratio: auto; }

/* ---------- 教程正文里的"内容组件"（正文不能用 <svg>，图标一律用 CSS 伪元素） ---------- */
/* 1) 正文第一行如果是标题，不要顶出那么大留白 */
.article-body > h2:first-child { margin-top: 0; }

/* 2) 提示条：左侧补一个小圆徽标（info=蓝 i / warn=橙 !），比裸"※"干净得多 */
.article-body .notice-bar, .article-body .warn-bar { margin: 4px 0 22px; }
.article-body .notice-bar::before,
.article-body .warn-bar::before {
    content: 'i'; flex: none; width: 18px; height: 18px; border-radius: 50%; margin-top: 3px;
    display: inline-flex; align-items: center; justify-content: center;
    font: 700 12px/1 Georgia, "Times New Roman", serif; color: #fff; background: var(--brand-600);
}
.article-body .warn-bar::before { content: '!'; background: #f5a623; margin-top: 0; }

/* 3) 正文里的行动按钮：小号 + 引导语，不用页面级大按钮（大按钮放在正文里很吵）。
      注意 .article-body a 的链接色/下划线优先级高于 .btn-primary，这里要显式盖回来 */
.article-body .article-cta { margin: 4px 0 26px; }
.article-body .article-cta .btn { padding: 9px 18px; font-size: 14.5px; color: #04182c; text-decoration: none; }
.article-body .article-cta .btn:hover { color: #04182c; text-decoration: none; }

/* 4) 截图统一按固定宽度显示（不拉满整栏、也不放大），点开灯箱看原图 */
.article-body .ui-zoom { max-width: 680px; margin: 6px auto 22px; }
.article-body .ui-zoom img { width: 100%; max-width: 100%; aspect-ratio: auto; margin: 0; border-radius: 10px; }

/* 灯箱：单击任意位置或按 ESC 关闭 */
html.lightbox-open, html.lightbox-open body { overflow: hidden; }
/* 灯箱：**点开就是原图 1:1**（用户反馈"放大的时候没有放到原图大小、有个固定尺寸"，
   以及"不要切换，直接就是原图"——所以这里没有"适应屏幕"那一档）。
   1:1 会超出视口，所以做成可滚动：
   · 外层 display:flex + 图片 margin:auto —— 放得下就居中，放不下 auto 边距归零、从左上开始，
     这样才能滚到图片的左上角（用 align/justify-center 的话超出的部分会被裁掉、滚不到）。
   · 关闭：单击任意位置或 ESC。 */
.lightbox {
    position: fixed; inset: 0; z-index: 999; cursor: zoom-out;
    display: flex; overflow: auto;
    padding: 2vh 4px; background: rgba(4, 12, 24, .92);
    animation: lbFade .22s var(--ease);
}
.lightbox[hidden] { display: none; }
.lightbox img {
    margin: auto; display: block;
    max-width: none; max-height: none;      /* 关键：不缩、不放到视口里，就是原图尺寸 */
    border-radius: 10px; box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
}
/* 关闭提示：**跟着鼠标走**（JS 用 transform 实时改位置，见 main.js 的 initLightbox）。
   用一个真元素而不是 ::after —— ::after 没法被 JS 精确定位，也没法单独淡出。
   pointer-events:none 保证它不吃点击（点到它也算"点空白处"→关闭）。 */
.lb-tip {
    position: fixed; left: 0; top: 0; z-index: 1; pointer-events: none;
    padding: 6px 12px; border-radius: 999px;
    background: rgba(6, 18, 34, .82); border: 1px solid rgba(185, 205, 230, .28);
    font-size: 13px; line-height: 1.4; color: #dce9f8; white-space: nowrap;
    opacity: 0; transition: opacity .18s var(--ease);
    will-change: transform;
}
.lb-tip.on { opacity: 1; }
@keyframes lbFade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .lightbox { animation: none; } }

/* ---------- 咨询客服弹层（点 [data-qr-open] 打开，展示 QQ / 微信二维码） ----------
   用在各页收尾条的「咨询客服」按钮上：不跳转页面，直接在原地弹二维码。 */
html.modal-open, html.modal-open body { overflow: hidden; }
.qr-modal {
    position: fixed; inset: 0; z-index: 998; padding: 4vh 4vw;
    display: flex; align-items: center; justify-content: center;
    background: rgba(4, 12, 24, .82); animation: lbFade .22s var(--ease);
}
.qr-modal[hidden] { display: none; }
.qr-modal-card {
    position: relative; width: 100%; max-width: 460px; background: #fff; border-radius: 16px;
    padding: 28px 26px 22px; text-align: center; box-shadow: 0 30px 70px rgba(4, 14, 30, .45);
}
.qr-modal-card h3 { font-size: 20px; color: var(--navy-800); margin-bottom: 6px; }
.qr-modal-sub { font-size: 13px; color: var(--muted); margin-bottom: 18px; }
.qr-modal-grid { display: flex; gap: 18px; justify-content: center; }
.qr-modal-grid figure { flex: 1 1 0; min-width: 0; }
.qr-modal-grid img { width: 100%; max-width: 168px; border-radius: 10px; border: 1px solid var(--line); }
.qr-modal-grid figcaption { font-size: 13.5px; color: var(--navy-700); font-weight: 600; margin-top: 8px; }
.qr-modal-id {
    font-size: 13px; color: var(--brand-700); font-weight: 600; margin-top: 4px;
    word-break: break-all; cursor: pointer;
}
.qr-modal-close {
    position: absolute; top: 10px; right: 12px; width: 32px; height: 32px; border-radius: 9px;
    border: 1px solid var(--line); background: #fff; color: var(--muted); font-size: 15px; line-height: 1;
}
.qr-modal-close:hover { color: var(--brand-700); border-color: var(--brand-500); }
@media (max-width: 430px) {
    .qr-modal-card { padding: 24px 16px 18px; }
    .qr-modal-grid { gap: 12px; }
}
@media (prefers-reduced-motion: reduce) { .qr-modal { animation: none; } }

/* 标签栏（样式跟其它页的 .sort-tabs 一套） */
.ui-tabs { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 22px; }
.ui-tab {
    appearance: none; -webkit-appearance: none; font: inherit; cursor: pointer;
    padding: 9px 22px; border-radius: 22px; font-size: 14.5px; font-weight: 600;
    background: #f4f7fb; border: 1px solid #dce6f2; color: #4a6480;
    transition: all .22s var(--ease);
}
.ui-tab:hover { border-color: var(--brand-500); color: var(--brand-700); transform: translateY(-2px); }
.ui-tab.active { background: var(--grad); color: #04182c; border-color: transparent; font-weight: 700; }
.ui-shots.is-tabbed .ui-shot { display: none; }
.ui-shots.is-tabbed .ui-shot.active { display: block; animation: uiFade .32s var(--ease); }
@keyframes uiFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ui-shots.is-tabbed .ui-shot.active { animation: none; } }

/* ---------- 软路由页：OEM 定制（「适用场景 / 上线流程 / 发货与售后」三节已按需求删除，
   对应的 .scene-* / .steps.steps-4 / .policy-list 样式也一并清掉，不留死代码） ---------- */

/* OEM / ODM 定制：内容直接坐在通屏深色底上（不套深色实心卡），外面加一圈"玻璃边框"。
   关键三个数都跟上面的 .ver-panel 对齐，这样两块才像一套：
     ① 宽度 max-width: 1060px ── 跟 .ver-cards 一样，外边缘对齐；
     ② 左右内边距 26px ── 跟 .ver-panel 的 padding 一样，连文字都对齐同一条竖线；
     ③ 圆角 18px ── 跟 .ver-panel 完全一致。
   边框比里面 .oem-col 更淡（.10 < .12），于是层次是：深色底 → 淡框 → 亮面板，不会糊成一片。
   右上角那点青色柔光是沿用原来深色卡上的，用来压住大块深色的闷。 */
.oem-inner {
    position: relative; overflow: hidden;
    max-width: 1060px; margin: 0 auto;
    padding: 32px 26px 30px;
    background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: 18px;
}
.oem-inner::before {
    content: ""; position: absolute; inset: 0;
    background: radial-gradient(620px 300px at 88% -14%, rgba(0, 212, 255, .13), transparent 70%);
}
.oem-inner > * { position: relative; z-index: 1; }
.oem-eyebrow {
    display: inline-block; font-size: 13px; font-weight: 600; letter-spacing: .5px;
    color: var(--brand-400); background: rgba(0, 212, 255, .14);
    padding: 5px 14px; border-radius: 20px; margin-bottom: 14px;
}
.oem-title { font-size: 32px; color: #fff; letter-spacing: .5px; margin-bottom: 14px; }
.oem-desc { max-width: 880px; font-size: 15.5px; line-height: 1.85; color: #b9cde6; }
.oem-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 28px; margin: 26px 0 30px; }
.oem-col {
    background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12);
    border-radius: var(--radius); padding: 18px 20px;
}
.oem-col h3 { font-size: 15.5px; color: #fff; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.oem-col h3 .ico { width: 18px; height: 18px; color: var(--brand-400); flex: none; }
.oem-col ul { list-style: none; }
.oem-col li { position: relative; padding: 5px 0 5px 18px; font-size: 13.5px; line-height: 1.75; color: #b9cde6; }
.oem-col li::before { content: ""; position: absolute; left: 2px; top: 13px; width: 5px; height: 5px; border-radius: 50%; background: var(--brand-500); }
.oem-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.plan-card .btn { width: 100%; }

/* ---------- 教程页：LOGO 卡（图文教程 / 视频教程 / 常见问题 / 全部教程 共用） ----------
   排列与价格套餐页一致：一行 3 张、靠左排（不足一行也靠左）。 */
.tool-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.tool-card {
    position: relative; display: flex; flex-direction: column; background: #fff;
    border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 22px 22px 20px;
    box-shadow: var(--shadow-sm);
    transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s;
}
.tool-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--line-2); }
.tool-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
/* LOGO：上传缩略图就用图，没上传则显示标题首字的字母块，尺寸一致 */
.tool-logo {
    flex: none; width: 56px; height: 56px; border-radius: 14px; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(140deg, #eef5ff, #fbfdff); border: 1px solid var(--line);
}
.tool-logo img { width: 100%; height: 100%; object-fit: contain; }
.tool-logo img[src*="nopic"] { display: none; }
.tool-logo i { font-style: normal; font-size: 0; font-weight: 800; color: var(--brand-600); line-height: 1; }
.tool-logo i::first-letter { font-size: 24px; }
/* 右上角类型角标：取栏目名（图文教程 / 视频教程 / 常见问题 / Windows客户端 / Android客户端）
   原来按"类型"上了 3 种颜色（蓝 / 紫 / 绿），跟标签栏那套 4 色是一对 —— 同样的问题：
   紫和绿都不在站点调色板里，而角标上的文字本来就写明了类型，颜色是多余的。
   现在统一走上面的默认品牌浅蓝，整页只剩青 / 蓝 / 海军蓝。
   ⚠️ 下面 data-c 那 6 个「封面配色」**保留**：那是后台 ext_color 字段（多选）对应的功能，
   管理员想让某张卡跳色随时可用；这里动的只是"没设置时的默认色"。 */
.tool-badge {
    flex: none; font-style: normal; font-size: 13px; font-weight: 600; white-space: nowrap;
    padding: 5px 12px; border-radius: 7px; background: rgba(10, 132, 255, .1); color: var(--brand-700);
}
/* 按**栏目**自动上色（data-t 是栏目名）：后台「封面配色」字段默认都是空的，
   所以原来图文/视频/常见问题三种卡片的徽标全是同一个浅蓝，分不清是哪一栏。
   色值**跟列表顶部的筛选标签（.sort-tabs 的 nth-child 配色）完全一致** ——
   点"视频教程"筛出来的卡片，徽标就是同一个紫色，不用来回对。
   注意顺序——下面 [data-c] 那组必须排在这组之后，管理员真填了「封面配色」时才能盖过它。 */
.tool-badge[data-t="图文教程"] { background: #eef6ff; color: #0a6fd8; }
.tool-badge[data-t="视频教程"] { background: #f3efff; color: #6b46ff; }
.tool-badge[data-t="常见问题"] { background: #eafaf3; color: #0a8f62; }
/* 平台类角标：安卓端绿色、Windows 端蓝色 —— 与下载页顶部筛选标签、卡片底部那排小胶囊
   用的是同一套色（Android=#eafaf3/#0a8f62，Windows=#eef6ff/#0a6fd8），
   一眼就能分清这张卡是哪个平台，不用再读文字。 */
.tool-badge[data-t="Android客户端"] { background: #eafaf3; color: #0a8f62; }
.tool-badge[data-t="Windows客户端"] { background: #eef6ff; color: #0a6fd8; }
/* 手动指定配色时优先级最高（后台「封面配色」字段，留空则用上面的栏目色） */
.tool-badge[data-c="红色"] { background: #fee2e2; color: #c0392b; }
.tool-badge[data-c="橙色"] { background: #ffedd5; color: #c2410c; }
.tool-badge[data-c="黄色"] { background: #fef9c3; color: #a16207; }
.tool-badge[data-c="绿色"] { background: #dcfce7; color: #15803d; }
.tool-badge[data-c="蓝色"] { background: #dbeafe; color: #1d4ed8; }
.tool-badge[data-c="紫色"] { background: #ede9fe; color: #6d28d9; }
/* 名称：不锁高度，允许折成 1~2 行（标题完整显示、不出省略号）。
   它带来的高度差由下面的 .tool-bottom（margin-top:auto）吸收，不影响标签行与按钮的对齐。 */
.tool-name { font-size: 17px; line-height: 1.5; margin-bottom: 10px; }
.tool-name a { color: var(--navy-800); }
/* 卡片不做整块可点：只有标题与两个按钮是链接（与参考样式一致，避免误触进详情页） */
.tool-name a:hover { color: var(--brand-700); text-decoration: underline; }
/* 名称后面的小标签（后台「类型标签」字段，如 桌面 / 移动 / 网页），留空不显示 */
.tool-kind {
    font-style: normal; font-size: 12.5px; font-weight: 500; color: var(--muted);
    margin-left: 6px; white-space: nowrap;
}
.tool-kind:empty { display: none; }
/* 简介固定 3 行高（5.25em = 3 行 × line-height 1.75）：简介写 1~2 行的卡片也占满这 3 行，
   把高度差统一挤到「标签行」上方，让标签行在任何卡片里都落在同一高度；超过 3 行截断。 */
.tool-desc {
    color: var(--muted); font-size: 13.5px; line-height: 1.75; margin-bottom: 18px;
    height: 5.25em;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
/* 卡片下半区（标签行 + 底部按钮）整块吸底：不管上面简介/标题几行，
   这行标签胶囊永远贴在同一高度上，两个按钮也永远贴卡片底边。 */
.tool-bottom { margin-top: auto; display: block; }
/* 卡片底部：**日期/浏览量靠左 + 按钮靠右，同一行**。
   原来 meta 一行、按钮一行，而教程栏卡片只有一个「点击查看」，孤零零占一行还靠左，
   右边空一大块（用户反馈"看着不协调"）。并成一行后卡片矮一行、按钮自然落到右下，
   跟卡片右上角的栏目徽标形成对角呼应。
   软件下载栏没有 meta、只有两个按钮：`.tool-actions` 用 flex:1 撑满剩余宽度，
   内部仍是 space-between，所以两个按钮还是分别贴左右边（跟改版前一致）。 */
.tool-foot { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 12px; }
.tool-foot .tool-meta { flex: none; }
/* ⚠️ 这里必须用 flex-basis:auto + min-width:max-content：
   写成 flex:1（= basis 0%）时，换行计算把它当 0 宽，于是"meta+按钮"永远挤在同一行，
   按钮（nowrap，最窄 114px）会从容器里顶出去 —— 实测 1024px 下按钮右边缘比卡片内边距
   多出 10px，跟上面的日期行对不齐。改成 auto 后：放得下就同一行（按钮自动靠右），
   放不下就整块换到下一行占满宽度，按钮仍然贴右边。 */
.tool-foot > .tool-actions { flex: 1 1 auto; min-width: max-content; }
/* 日期 / 浏览量：原来用 --muted-2(#8fa9c7) 在卡片上只有 ~2.4:1，太淡了，提到 --muted */
.tool-meta { display: inline-flex; align-items: center; gap: 12px; color: var(--muted); font-size: 12.5px; }
.tool-meta span { display: inline-flex; align-items: center; gap: 5px; }
.tool-meta .ico { width: 14px; height: 14px; }
.tool-actions { display: flex; align-items: center; gap: 10px; justify-content: space-between; }
/* 只剩「点击查看」一个按钮时（教程/常见问题栏，DOM 里的「点击下载」被 JS 隐藏）推到最右 */
.tool-actions .btn-doc { margin-left: auto; }
.tool-actions .btn:only-child { flex: 1; }   /* 只剩一个按钮时铺满整行，看着不空 */
.tool-actions .btn .ico { width: 14px; height: 14px; margin-left: 2px; }
/* 「点击下载」按钮改用深色实底（海军蓝渐变），跟首页套餐区的新按钮同一套语言。
   原来用的是绿色 #16c98d→#0ea472 —— 但绿色根本不在站点调色板（:root 只有青 / 蓝 /
   海军蓝三档 + 金色），6 张卡排开尤其跳；改成深海军蓝后既明确了"这是这张卡的主操作"，
   又跟页头、页脚、首页那条深色线连成一体，不跟前后的亮青蓝主 CTA 抢。 */
.tool-actions .btn-dl {
    background: linear-gradient(135deg, var(--navy-700), var(--navy-800)); color: #fff; border-color: transparent;
    box-shadow: 0 8px 18px rgba(11, 31, 58, .22);
}
.tool-actions .btn-dl:hover {
    background: linear-gradient(135deg, var(--navy-600), var(--navy-700)); color: #fff;
    box-shadow: 0 10px 22px rgba(11, 31, 58, .30); transform: translateY(-2px);
}
/* 「相关教程」按钮用浅蓝底 + 品牌蓝字：跟深色下载键配成一对（深色=动作、浅蓝=看教程），
   比纯白描边更有指向性，又不跟主按钮抢视线 */
.tool-actions .btn-doc {
    background: linear-gradient(135deg, #eef6ff, #dceaff); color: #0a6fd8;
    border-color: rgba(10, 111, 216, .26); box-shadow: 0 6px 14px rgba(10, 111, 216, .10);
}
.tool-actions .btn-doc:hover {
    background: linear-gradient(135deg, #e2efff, #c9e0ff); color: #0757ad;
    border-color: rgba(10, 111, 216, .46); box-shadow: 0 10px 20px rgba(10, 111, 216, .18);
}
/* 「官网下载」按钮：软件下载栏目固定显示（.always，没填地址时由 JS 先指向本条详情页）；
   其它栏目只有填了「官网下载地址」才显示，避免教程卡上冒出一个下载按钮 */
.tool-dl[href=""]:not(.always), .tool-dl:not([href]):not(.always) { display: none; }
/* 内容标签小胶囊（后台「标签」字段，main.js 拆分渲染；没有标签时整行隐藏）
   可读性优化：原来 12px + 浅灰 --muted(#6b7c93) 配 #eef4fc 底，对比度只有 ~3.9:1，小字发虚。
   现在字色提到 --ink-2(#3c5570)、12.5px、500 字重，底色调深一档再加一道浅边框，对比度 ~7:1。 */
.tool-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.tool-tags i {
    font-style: normal; font-size: 12.5px; font-weight: 500; line-height: 1;
    padding: 6px 10px; border-radius: 6px;
    background: #e9f1fb; color: var(--ink-2); border: 1px solid #d8e6f7;
}
.tool-tags:empty { display: none; }
/* 平台标签上色：tutorial.html 按标签文字加类（安卓端 → tg-android，电脑端/Windows端/PC端 → tg-pc），
   色值跟下载页顶部筛选标签同一套（Android 绿 / Windows 蓝）；其它标签保持中性，
   避免一行胶囊全彩、反而看不出重点。 */
.tool-tags i.tg-android { background: #eafaf3; border-color: #b7e8d4; color: #0a8f62; }
.tool-tags i.tg-pc { background: #eef6ff; border-color: #c9dffa; color: #0a6fd8; }

/* 详情页视频区：外链嵌入 / 本地 mp4 都由 main.js 生成，统一 16:9 自适应；空值不占位 */
.video-embed { margin-bottom: 26px; }
.video-embed:empty { display: none; }
.video-embed iframe,
.video-embed video {
    display: block; width: 100%; aspect-ratio: 16 / 9; border: 0;
    border-radius: var(--radius); background: #04182c;
}

/* 标签栏只有一个标签时（该栏目没有子栏目，比如「软件下载」）整行隐藏，不留一条无意义的标签 */
.sort-tabs:has(a:only-child) { display: none; }

/* ---------- 10. 代理加盟页 ----------
   版式参考 jiexunip.com 的代理页重做，学的是它的**结构**（优势卡 → 四步盈利 → 收益测算 → 人群 → 须知 → 联系），
   文案与配色都是我们自己的。收益测算那块的数字走后台标签 join_roi_*。 */

/* 整页收紧版块间距：全站 .section 默认 84px 上下，两个版块相接就是 168px 空白；
   这一页 5 个版块、内容又都是卡片，168 一叠起来太散（用户截图圈了标题上方那 84px）。
   跟软路由页一样用作用域类，只作用于这一页 —— 其它内页仍是 84px。
   想再松/再紧只改这一个数：36 → 72px 间隔，44 → 88px，56 → 112px。 */
.join-page .section { padding-top: 44px; padding-bottom: 44px; }

/* 优势卡：6 张，跟富文本之间拉开一点 */
.join-adv { margin-top: 38px; }

/* 四步盈利流程：一行 4 个，卡片之间用一条渐变小箭头连起来 */
.join-flow { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; counter-reset: jf; }
.join-flow li {
    position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
    padding: 26px 22px 24px; transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.join-flow li:hover { transform: translateY(-4px); border-color: var(--line-2); box-shadow: var(--shadow-sm); }
.join-flow-num {
    display: flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 10px; margin-bottom: 14px;
    background: var(--grad); color: #04182c; font-weight: 800; font-size: 15px;
    box-shadow: 0 8px 18px rgba(10, 132, 255, .22);
}
.join-flow li h3 { font-size: 16.5px; margin-bottom: 8px; }
.join-flow li p { font-size: 13.8px; line-height: 1.8; color: var(--muted); }
.join-flow li::after {
    content: ""; position: absolute; top: 60px; right: -14px; width: 10px; height: 10px;
    border-top: 2px solid var(--line-2); border-right: 2px solid var(--line-2);
    transform: rotate(45deg);
}
.join-flow li:last-child::after { display: none; }

/* 收益测算 */
.roi-box {
    max-width: 1040px; margin: 0 auto; background: #fff; border: 1px solid var(--line);
    border-radius: var(--radius-lg); padding: 34px 36px 30px; box-shadow: var(--shadow-sm);
}
.roi-top { display: flex; align-items: center; justify-content: center; gap: 26px; flex-wrap: wrap; }
.roi-item {
    flex: 1 1 200px; text-align: center; border: 1px dashed var(--line-2);
    border-radius: var(--radius); padding: 18px 14px;
}
.roi-item.is-key { border-style: solid; border-color: rgba(10, 132, 255, .32); background: rgba(10, 132, 255, .05); }
.roi-item span { display: block; font-size: 13px; color: var(--muted); margin-bottom: 8px; }
.roi-item b { display: block; font-size: 38px; line-height: 1.1; font-weight: 800; color: var(--brand-700); letter-spacing: -.5px; }
.roi-item b i { font-style: normal; font-size: 20px; margin-right: 2px; }
.roi-item em { display: block; font-style: normal; font-size: 12.5px; color: var(--muted-2); margin-top: 6px; }
.roi-arrow {
    flex: none; width: 10px; height: 10px; border-top: 2px solid var(--line-2); border-right: 2px solid var(--line-2);
    transform: rotate(45deg); margin: 0 -8px;
}
.roi-rows { list-style: none; margin-top: 26px; border-top: 1px solid var(--line); }
.roi-rows li {
    display: flex; align-items: center; justify-content: space-between; gap: 18px;
    padding: 15px 4px; border-bottom: 1px solid var(--line);
}
.roi-rows li b { font-size: 15px; color: var(--navy-800); flex: 1 1 auto; }
.roi-rows li span { font-size: 13.5px; color: var(--muted); flex: none; }
.roi-rows li em {
    font-style: normal; font-size: 17px; font-weight: 800; color: var(--brand-700);
    flex: none; min-width: 96px; text-align: right;
}
.roi-note {
    display: flex; gap: 9px; align-items: flex-start; margin-top: 20px;
    font-size: 13px; line-height: 1.8; color: var(--muted);
    background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px;
}
.roi-note .ico { width: 17px; height: 17px; color: var(--brand-600); flex: none; margin-top: 2px; }

/* 「合作说明」卡：跟下面的优势卡行**同宽同边**。
   2026-10 改动记录：先前给它加了 max-width:920px 来限制行长，结果实测右边缘比卡片行短 240px
   （合作说明右 1056 vs 卡片行右 1296），用户一眼就看出"对不齐" —— 已去掉该限制。
   2026-10 再改：标题离卡片顶边太远（实测 39px，就是 .page-block 的 38px 上内边距），
   用户要求"往上点"，收到 26px；下内边距保持 38px 不动，卡片整体矮 13px。
   ⚠️ 这里必须用 .page-block.join-intro 双类名（权重 0,2,0）：.page-block 在样式表里位置更靠后，
   单类名同权重会被它的 padding/border 简写盖掉。 */
.page-block.join-intro { padding-top: 26px; border-left: 4px solid var(--brand-600); }
.join-intro strong { color: var(--brand-700); font-weight: 700; }

/* 适合人群：3 列卡片（跟首页「专为工作室场景量身定制」的 .about-points、
   软路由页「化繁为简」的 .feat-item 一样都是卡片 —— 站内这类"图标 + 标题 + 一句"的网格本来就用卡片）。
   卡片语言直接抄 .card：白底 + 细边框 + shadow-sm，悬浮上浮 4px。
   ⚠️ 注意跟"上一版为什么难看"区分开：之前难看是因为 6 张卡**竖着叠成一列**（一摞方框），
   不是因为用了卡片；现在是 3 列 × 2 行的网格，同一套卡片语言就协调了。 */
.join-people { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.join-people li {
    display: flex; gap: 14px; align-items: flex-start;
    background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 22px 20px; box-shadow: var(--shadow-sm);
    transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease);
}
.join-people li:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--line-2); }
.join-people-ico {
    box-sizing: border-box; flex: none; width: 40px; height: 40px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    background: var(--grad-soft); color: var(--brand-700);
}
.join-people-ico .ico { width: 21px; height: 21px; }
.join-people-text b { display: block; font-size: 15.5px; color: var(--navy-800); margin-bottom: 6px; }
.join-people-text span { display: block; font-size: 13.5px; line-height: 1.78; color: var(--muted); }

/* 加入须知：通栏浅底面板 + 两列条目 */
.join-notes-box {
    margin-top: 46px; background: var(--bg); border: 1px solid var(--line);
    border-radius: var(--radius-lg); padding: 28px 34px 26px;
}
.join-notes-box h3 { display: flex; align-items: center; gap: 9px; font-size: 17px; margin-bottom: 16px; }
.join-notes-box h3 .ico { width: 20px; height: 20px; color: var(--brand-600); flex: none; }
.join-notes { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 34px; }
.join-notes li {
    position: relative; padding: 7px 0 7px 20px; font-size: 14px; line-height: 1.8; color: var(--ink-2);
}
.join-notes li::before {
    content: ""; position: absolute; left: 0; top: 16px; width: 7px; height: 7px;
    border-radius: 50%; background: var(--grad);
}

/* 联系我们：改用站点通用收尾条 .cta-band（见 join.html 第 5 节的说明），
   这里原来那套 .join-contact-foot（info-cards + side-card 两栏）已删除。 */

/* ---------- 11. 对比表 ---------- */
.table-wrap { overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--line); background: #fff; -webkit-overflow-scrolling: touch; }
/* 窄屏对比表需要横向滑动，给个提示（桌面端不显示）。
   断点取 1100px：实测表格本身约 1023px 宽，视口小于 ~1091px 就会开始被截断，
   所以不能只到 760px——否则平板/小笔记本上表格被切了却没有滑动提示。 */
.table-hint { display: none; }
@media (max-width: 1100px) {
    .table-hint { display: block; text-align: center; font-size: 12.5px; color: var(--muted); margin-top: 10px; }
}
table.data-table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 620px; }
/* 对比表：单元格不折行，整表横向滚动，避免文字换行成两行 */
table.data-table th, table.data-table td { white-space: nowrap; }
table.data-table th, table.data-table td { padding: 15px 20px; text-align: center; border-bottom: 1px solid var(--line); }
/* 对比表：首列（套餐类型）左对齐，其余按列居中，表头与数据对齐 */
table.data-table th:first-child, table.data-table td:first-child { text-align: left; }table.data-table thead th { background: linear-gradient(180deg, #f2f7fd, #e9f2fc); color: var(--navy-800); font-weight: 700; font-size: 14px; white-space: nowrap; }
table.data-table tbody tr:nth-child(even) { background: #fafcff; }
table.data-table tbody tr:hover { background: #f2f8ff; }
table.data-table tr:last-child td { border-bottom: none; }
table.data-table td:first-child { font-weight: 600; color: var(--navy-800); white-space: nowrap; }

/* ---------- 12. FAQ ---------- */
.faq-list { max-width: 900px; margin: 0 auto; }
.faq-item {
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
    margin-bottom: 14px; overflow: hidden; transition: border-color .25s, box-shadow .25s;
}
.faq-item:hover { border-color: var(--line-2); }
.faq-item.open { border-color: var(--brand-500); box-shadow: 0 12px 30px rgba(10, 132, 255, .1); }
.faq-q {
    display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%;
    padding: 20px 24px; text-align: left; font-size: 16px; font-weight: 600; color: var(--navy-800);
}
.faq-q .q-mark { color: var(--brand-600); font-weight: 800; margin-right: 8px; }
.faq-q .faq-icon { position: relative; width: 18px; height: 18px; flex: none; }
.faq-q .faq-icon::before, .faq-q .faq-icon::after {
    content: ""; position: absolute; left: 50%; top: 50%; background: var(--brand-600); border-radius: 2px;
    transform: translate(-50%, -50%); transition: transform .3s var(--ease), opacity .3s;
}
.faq-q .faq-icon::before { width: 14px; height: 2px; }
.faq-q .faq-icon::after { width: 2px; height: 14px; }
.faq-item.open .faq-q .faq-icon::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .35s var(--ease); }
.faq-a-inner { padding: 0 24px 22px; color: var(--muted); font-size: 14.8px; }

/* ---------- 13. 底部 CTA ---------- */
.cta-band {
    position: relative; overflow: hidden; text-align: center; color: #fff; padding: 76px 0;
    background: linear-gradient(150deg, var(--navy-800), var(--navy-700) 60%, var(--navy-800));
}
.cta-band::before {
    content: ""; position: absolute; inset: 0;
    background: radial-gradient(600px 300px at 50% 0%, rgba(0, 212, 255, .28), transparent 70%);
}
.cta-band .container { position: relative; z-index: 1; }
.cta-band h2 { font-size: 32px; color: #fff; margin-bottom: 14px; }
.cta-band p { color: #b9cde6; margin-bottom: 28px; font-size: 16px; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.cta-tips { margin-top: 22px; color: #8fa9c7; font-size: 13.5px; }

/* ---------- 14. 页脚 ---------- */
.site-footer { background: var(--navy-900); color: #8fa9c7; padding: 62px 0 0; font-size: 14px; }
.site-footer a { color: #8fa9c7; }
.site-footer a:hover { color: var(--brand-500); }
/* 6 列：品牌 / 产品 / 帮助 / 关于 / 友情 / 联系客服。页脚容器宽 1160px（有上限），
   所以每一档的 fr 都是按"最小可用宽度"倒推的：
     品牌列 ~285px、二维码列 ≥206px（两个 96px 二维码 + 14px 间距）、链接列 ≥140px（「MingYangOS软路由」实测 121px）
   列间距 34 → 16 → 现在 24px：16px 时品牌列的文字紧贴「产品与套餐」列（实测视觉间隙只有 20px，用户反馈太近），
   24px + 给简介加 max-width 262px（下面那条），视觉间隙回到 ~54px。
   ⚠️ 「友情链接」列在没有链接时会被 CSS 整体隐藏（见下面的 .friend-col:not(:has(a))），
   而 grid 的**轨道数不会跟着变**：一旦少了这一列，后面 5 个可见列就会依次占掉 1~5 号轨道，
   把「联系客服」挤进 1fr 那条（实测被压成 62×96、提示文字折成两行）。
   所以这里给「友情」「联系客服」两列**显式指定轨道**（5 / 6），自动排列的只有前面 4 列 —— 少一列也不会串位。 */
.footer-grid { display: grid; grid-template-columns: 2.08fr 1fr 1fr 1fr 1fr 1.5fr; gap: 24px; padding-bottom: 22px; }
.friend-col { grid-column: 5; }
.footer-qr-col { grid-column: 6; }
/* 品牌列的简介别顶到列边界：留 ~23px 内部余量，避免"文字几乎贴到下一列" */
.footer-col:first-child .footer-about { max-width: 262px; }
.footer-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.footer-brand b { color: #fff; font-size: 18px; white-space: nowrap; }
.footer-about { line-height: 1.9; font-size: 13.8px; max-width: 320px; }
/* 页脚第一列的「服务保障」四个小标签：2×2、每个一行（补上联系方式删掉后空出来的一块）。
   窄屏页脚变成单列时这两列网格仍然成立，不会挤。 */
.foot-trust { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px 12px; margin-top: 18px; }
.foot-trust span { display: flex; align-items: center; gap: 7px; font-size: 12.8px; color: #8fa9c7; }
.foot-trust .ico { width: 15px; height: 15px; flex: none; color: #38a9d8; }
.footer-col h5 { color: #fff; font-size: 15px; margin-bottom: 16px; font-weight: 600; }
.footer-col li { margin-bottom: 10px; font-size: 13.8px; }
.footer-qr { display: flex; gap: 14px; }
/* 二维码 + 提示文字这一组：宽度取内容宽（两个码的宽度），文字相对"两个码"居中 */
.footer-qr-inner { display: flex; flex-direction: column; align-items: center; width: fit-content; }
.footer-qr-tip { margin: 12px 0 0; font-size: 13px; text-align: center; }
.footer-qr figure { text-align: center; }
.footer-qr img { flex: none; width: 96px; height: 96px; object-fit: contain; border-radius: 10px; background: #fff; padding: 6px; }
.footer-qr figcaption { font-size: 12.5px; margin-top: 8px; color: #8fa9c7; }
.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, .09); padding: 20px 0 26px;
    display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap;
    font-size: 13px; color: #7690ad;
}
.footer-bottom .fb-links { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
/* 版权 与 备案号 之间的竖线分隔（用伪元素，模板里不用写符号） */
.footer-bottom .fb-links::before { content: '|'; color: rgba(255, 255, 255, .22); }

/* 页脚免责声明（正文在后台自定义标签 disclaimer 里）：
   位于链接列下面、版权行上面。上边框由它负责。
   上间距 = .footer-grid 的 padding-bottom(22px) + 这里的 padding-top(12px) = 34px
   （原来是 44+16=60px，用户反馈"能不能再往上点"） */
.footer-disclaimer {
    border-top: 1px solid rgba(255, 255, 255, .09);
    padding: 12px 0 14px; font-size: 12px; line-height: 1.9; color: #63798f;
}
.footer-disclaimer b { color: var(--brand-500); font-weight: 600; }

/* 友情链接（「关于我们」右边的一列）：链接由后台「链接管理」维护。
   没有链接时整列隐藏 —— 不留一个只有标题的空列。 */
.friend-col:not(:has(a)) { display: none; }

/* ---------- 15. 右侧悬浮客服 ---------- */
.contact-dock {
    position: fixed; right: 16px; top: 50%; transform: translateY(-50%);
    z-index: 90; display: flex; flex-direction: column; gap: 10px;
}
.dock-item { position: relative; }
.dock-btn {
    width: 56px; height: 56px; border-radius: 14px; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 2px; color: #fff; cursor: pointer;
    background: linear-gradient(150deg, var(--navy-700), var(--navy-800));
    border: 1px solid rgba(255, 255, 255, .12);
    box-shadow: 0 10px 24px rgba(6, 20, 40, .22);
    transition: transform .24s var(--ease), background .24s, box-shadow .24s, color .24s;
}
.dock-btn .ico { width: 22px; height: 22px; }
.dock-btn .dock-label { font-size: 11px; letter-spacing: .5px; }
.dock-btn:hover { transform: translateX(-4px); background: var(--grad); color: #04182c; box-shadow: 0 14px 30px rgba(10, 132, 255, .35); }
.dock-btn.top { display: none; background: rgba(11, 31, 58, .92); }
.dock-btn.top.is-show { display: flex; }

.dock-pop {
    position: absolute; right: calc(100% + 12px); top: 50%; transform: translate(10px, -50%);
    background: #fff; border-radius: var(--radius); padding: 14px;
    box-shadow: 0 18px 44px rgba(6, 20, 40, .22); border: 1px solid var(--line);
    opacity: 0; visibility: hidden; transition: all .26s var(--ease); text-align: center; width: 194px;
}
.dock-pop::after {
    content: ""; position: absolute; right: -6px; top: 50%; margin-top: -6px; width: 12px; height: 12px;
    background: #fff; transform: rotate(45deg); border-right: 1px solid var(--line); border-top: 1px solid var(--line);
}
.dock-item:hover .dock-pop, .dock-item.open .dock-pop { opacity: 1; visibility: visible; transform: translate(0, -50%); }
.dock-pop img { width: 150px; height: 150px; object-fit: contain; border-radius: 10px; }
.dock-pop .pop-title { font-size: 14px; font-weight: 700; color: var(--navy-800); margin-bottom: 8px; }
.dock-pop .pop-tip { font-size: 12.5px; color: var(--muted); margin-top: 8px; line-height: 1.6; }
.dock-pop .pop-value { font-size: 13px; color: var(--brand-700); font-weight: 600; margin-top: 6px; word-break: break-all; }

/* ---------- 16. 内页头部 ---------- */
.page-hero {
    position: relative; overflow: hidden; color: #fff; padding: 62px 0 56px; text-align: center;
    background: linear-gradient(150deg, var(--navy-800), var(--navy-700) 60%, var(--navy-800));
}
.page-hero::before {
    content: ""; position: absolute; inset: 0;
    background: radial-gradient(560px 260px at 50% -10%, rgba(0, 212, 255, .26), transparent 70%);
}
.page-hero .container { position: relative; z-index: 1; }
.page-hero h1 { color: #fff; font-size: 34px; margin-bottom: 12px; letter-spacing: .5px; }
.page-hero p { color: #b9cde6; font-size: 15.5px; max-width: 720px; margin: 0 auto; }

/* 栏目头部的亮点小条（与首页信任条呼应） */
.hero-chips { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 20px; }
.hero-chips span {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 14px; border-radius: 20px; font-size: 13px; color: #cfe4fa;
    background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16);
}
.hero-chips .ico { width: 14px; height: 14px; color: var(--brand-500); flex: none; }
/* 有序步骤用的数字气泡（教程页流程：1→5）；功能型胶囊仍用对号 ✓，两者共用同一套胶囊外壳。
   居中方式：行高等圆高 + text-align 居中（比 flex 居中更稳），数字单独用西文字体，避免中文字体的数字偏上/偏左 */
.hero-chips .chip-num {
    flex: none; display: inline-block; width: 17px; height: 17px;
    border-radius: 50%; font-style: normal; text-align: center;
    font-family: Arial, Helvetica, "Segoe UI", sans-serif;
    font-size: 11.5px; font-weight: 700; line-height: 17px;
    background: var(--grad); color: #04182c;
}

/* 子栏目入口卡（导航去掉下拉后，这里是子栏目的主要入口） */
.child-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-bottom: 34px; }
.child-card {
    display: flex; align-items: flex-start; gap: 14px; background: #fff;
    border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px;
    transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s;
}
.child-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--line-2); }
.child-card .cc-ico {
    width: 42px; height: 42px; border-radius: 12px; flex: none;
    background: linear-gradient(140deg, rgba(0, 212, 255, .16), rgba(10, 132, 255, .12));
    display: flex; align-items: center; justify-content: center;
}
.child-card .cc-ico .ico { width: 20px; height: 20px; color: var(--brand-600); }
.child-card .cc-body { min-width: 0; flex: 1; }
.child-card .cc-body b { display: block; font-size: 16px; margin-bottom: 4px; }
.child-card .cc-body span { color: var(--muted); font-size: 13.5px; line-height: 1.6; }
.child-card .cc-go { margin-left: auto; color: var(--brand-600); font-size: 13px; font-weight: 700; flex: none; align-self: center; }

.breadcrumb-wrap { background: #fff; border-bottom: 1px solid var(--line); }
.breadcrumb { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 14px 0; font-size: 13.5px; color: var(--muted); }
.breadcrumb a { color: var(--muted); }
.breadcrumb a:hover { color: var(--brand-600); }

.sort-tabs { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 26px; }
.sort-tabs a {
    padding: 9px 22px; border-radius: 22px; font-size: 14.5px; background: #fff;
    border: 1px solid var(--line); color: var(--ink-2); transition: all .22s var(--ease);
}
.sort-tabs a:hover { border-color: var(--brand-500); color: var(--brand-700); transform: translateY(-2px); }
.sort-tabs a.active { background: var(--grad); color: #04182c; border-color: transparent; font-weight: 700; }

/* 价格套餐页：套餐卡区顶部紧跟标签、底部留白收紧，避免与下方「产品对比」之间出现大片空档 */
.section-tabbed { padding-top: 24px; padding-bottom: 26px; }
/* 详情页：面包屑紧接文章卡，不用版块通用的 84px 上留白（下面留白仍保持版块节奏） */
.section-article { padding-top: 28px; }

/* 标签栏按位置上色：1=灰蓝 / 2=蓝 / 3=紫 / 4=绿，当前项实心填充。
   这一套曾经在第三十三轮被收敛成单色（理由：紫和绿不在站点调色板里），
   但用户看过实际效果后要求换回彩色 —— 理由是"光秃秃一片、认不出类型"。
   已按原样恢复（原文取自 backup/style-20261020o.css，不是手抄）。
   ⚠️ 代价要记着：这是一套"局外色"（绿/紫不在 :root 调色板里），
   而且它靠 nth-child 位置配色，加一个 tab 或调一次顺序就会串色 ——
   .dl-tabs 那 6 条覆盖就是为此而写（第 4 个必须重复写一遍紫色，
   否则会落到上面的 nth-child(4) 绿色跟 Android 撞色）。 */
.sort-tabs a:nth-child(1) { background: #f4f7fb; border-color: #dce6f2; color: #4a6480; }
.sort-tabs a:nth-child(1):hover { border-color: #9fb6cd; color: #2f485f; }
.sort-tabs a:nth-child(1).active { background: linear-gradient(135deg, #55708c, #3c5570); color: #fff; }
.sort-tabs a:nth-child(2) { background: #eef6ff; border-color: #bcdcff; color: #0a6fd8; }
.sort-tabs a:nth-child(2):hover { border-color: #7cc0ff; color: #0557ad; }
.sort-tabs a:nth-child(2).active { background: linear-gradient(135deg, #0a84ff, #00c2ff); color: #fff; }
.sort-tabs a:nth-child(3) { background: #f3efff; border-color: #d8ccff; color: #6b46ff; }
.sort-tabs a:nth-child(3):hover { border-color: #b39dff; color: #5433d6; }
.sort-tabs a:nth-child(3).active { background: linear-gradient(135deg, #7c5cff, #a06bff); color: #fff; }
.sort-tabs a:nth-child(4) { background: #eafaf3; border-color: #b7e8d4; color: #0a8f62; }
.sort-tabs a:nth-child(4):hover { border-color: #7fd9b6; color: #067a52; }
.sort-tabs a:nth-child(4).active { background: linear-gradient(135deg, #10b981, #34d399); color: #fff; }
/* 软件下载页的标签是：全部软件 / Windows客户端 / Android客户端 / MingYang OS 软路由（外链跳 /router/）。
   第 3 个（Android）用绿色，跟安卓的绿色调对上；第 4 个（软路由）用紫色，跟教程页第 3 个同款。
   注意：这里必须把第 4 个也覆盖掉，否则会落到上面默认的 nth-child(4) 绿色，和 Android 撞色。 */
.sort-tabs.dl-tabs a:nth-child(3) { background: #eafaf3; border-color: #b7e8d4; color: #0a8f62; }
.sort-tabs.dl-tabs a:nth-child(3):hover { border-color: #7fd9b6; color: #067a52; }
.sort-tabs.dl-tabs a:nth-child(3).active { background: linear-gradient(135deg, #10b981, #34d399); color: #fff; }
.sort-tabs.dl-tabs a:nth-child(4) { background: #f3efff; border-color: #d8ccff; color: #6b46ff; }
.sort-tabs.dl-tabs a:nth-child(4):hover { border-color: #b39dff; color: #5433d6; }
.sort-tabs.dl-tabs a:nth-child(4).active { background: linear-gradient(135deg, #7c5cff, #a06bff); color: #fff; }

/* ---------- 17. 列表 / 详情 ---------- */
.list-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 34px; align-items: start; }

.article-list { display: grid; gap: 18px; }

/* 列表页顶部「共 N 篇」计数 */
.list-count { font-size: 13.5px; color: var(--muted); margin-bottom: 16px; }
.list-count b { color: var(--brand-700); font-size: 15px; }

.article-item {
    display: flex; gap: 20px; background: #fff; border: 1px solid var(--line);
    border-radius: var(--radius); padding: 20px;
    transition: transform .26s var(--ease), box-shadow .26s var(--ease), border-color .26s;
}
.article-item:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--line-2); }
.article-thumb { width: 210px; height: 140px; flex: none; border-radius: 10px; overflow: hidden; background: var(--bg-2); }
.article-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.article-item:hover .article-thumb img { transform: scale(1.06); }
.article-info { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.article-info h3 { font-size: 18px; margin-bottom: 10px; }
.article-info h3 a { display: block; overflow: hidden; text-overflow: ellipsis; }
.article-info .article-sum {
    color: var(--muted); font-size: 14px; margin-bottom: 14px; flex: 1;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.article-meta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--muted); }
.article-meta .ico { width: 15px; height: 15px; margin-right: 5px; vertical-align: -3px; }
.article-meta .meta-item { display: inline-flex; align-items: center; }

/* 无配图文章左侧的序号块（与首页卡片同为圆角浅蓝块，悬停变实心主色） */
.ai-num {
    width: 48px; height: 48px; flex: none; border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(140deg, rgba(0, 212, 255, .16), rgba(10, 132, 255, .1));
    color: var(--brand-700); font-weight: 800; font-size: 18px; letter-spacing: -.5px;
    transition: background .26s var(--ease), color .26s var(--ease);
}
.article-item:hover .ai-num { background: var(--grad); color: #04182c; }

/* 内页侧栏在桌面端跟随滚动：长文章阅读时客服/热门入口不会滑走 */
@media (min-width: 981px) {
    .list-side { position: sticky; top: calc(var(--header-h) + 20px); }
}

/* .cols-2-text（富文本两栏）已删除：只有加盟页用过，而它现在只剩「合作说明」一段，
   两栏会把右栏空着；已按其它页面的惯例改回单栏 .page-block rich-text。 */

/* .product-list / .product-item / .pi-* 已随套餐中心改版（改用首页同款套餐卡）删除 */


.pagination { display: flex; justify-content: center; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 36px; }
.pagination a, .pagination span {
    min-width: 40px; height: 40px; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center;
    border-radius: 10px; background: #fff; border: 1px solid var(--line); color: var(--ink-2); font-size: 14px;
    transition: all .22s var(--ease);
}
.pagination a:hover { border-color: var(--brand-500); color: var(--brand-700); }
.pagination .page-num-current,
.pagination a.page-num-current { background: var(--grad); color: #04182c; border-color: transparent; font-weight: 700; }
.pagination .page-num { cursor: default; }
.pagination span.page-num { background: #fff; color: var(--muted); }
.search-bar { display: flex; gap: 12px; max-width: 660px; margin: 0 auto 36px; }
.search-bar input {
    flex: 1; min-width: 0; padding: 13px 16px; border: 1px solid var(--line);
    border-radius: 10px; background: #fff; font-size: 15px; transition: border-color .2s, box-shadow .2s;
}
.search-bar input:focus { border-color: var(--brand-500); box-shadow: 0 0 0 3px rgba(0, 212, 255, .16); }
.pagination .current, .pagination span.current { background: var(--grad); color: #04182c; border-color: transparent; font-weight: 700; }

.side-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; margin-bottom: 22px; }
.side-card:last-child { margin-bottom: 0; }
.side-title { font-size: 16.5px; font-weight: 700; margin-bottom: 16px; padding-left: 12px; position: relative; }
.side-title::before {
    content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    width: 4px; height: 17px; border-radius: 3px; background: var(--grad);
}
.side-list li { border-bottom: 1px dashed var(--line); }
.side-list li:last-child { border-bottom: none; }
.side-list a { display: block; padding: 11px 0; font-size: 14.5px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-list a:hover { color: var(--brand-700); padding-left: 4px; }
.side-list .rank {
    display: inline-flex; width: 20px; height: 20px; border-radius: 6px; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 700; background: var(--bg-2); color: var(--muted); margin-right: 8px;
}
.side-list li:nth-child(1) .rank { background: var(--grad); color: #04182c; }
.side-list li:nth-child(2) .rank { background: rgba(10, 132, 255, .18); color: var(--brand-700); }
.side-list li:nth-child(3) .rank { background: rgba(0, 212, 255, .18); color: var(--brand-700); }

/* 侧栏「相关套餐」：名称在左、价格在右（文章页到套餐页的内链） */
.side-plan li { border-bottom: 1px dashed var(--line); }
.side-plan li:last-child { border-bottom: none; }
.side-plan a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 0; font-size: 14px; color: var(--ink-2); }
.side-plan a:hover { color: var(--brand-700); }
.side-plan a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-plan b { color: var(--brand-700); font-size: 14.5px; flex: none; }

.side-contact { background: linear-gradient(150deg, var(--navy-800), var(--navy-700)); color: #c6d6ea; border: none; }
.side-contact .side-title { color: #fff; }
.side-contact .side-title::before { background: var(--brand-500); }
.side-contact .sc-row { display: flex; align-items: center; gap: 10px; font-size: 14px; margin-bottom: 12px; }
.side-contact .sc-row .ico { width: 17px; height: 17px; color: var(--brand-500); flex: none; }
.side-contact .sc-row b { color: #fff; font-weight: 600; }
.side-contact .btn { margin-top: 8px; }

/* 详情 */
.article { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 38px 42px; }
.article-head { border-bottom: 1px solid var(--line); padding-bottom: 22px; margin-bottom: 26px; }
.article-head h1 { font-size: 27px; line-height: 1.45; margin-bottom: 16px; }
.article-body { font-size: 15.5px; color: #2c4257; line-height: 1.95; word-wrap: break-word; }
.article-body p { margin-bottom: 18px; }
.article-body h2 { font-size: 21px; margin: 34px 0 16px; padding-left: 13px; border-left: 4px solid var(--brand-500); }
.article-body h3 { font-size: 18px; margin: 26px 0 12px; }
.article-body h4 { font-size: 16.5px; margin: 22px 0 10px; }
.article-body ul, .article-body ol { margin: 0 0 18px 22px; }
.article-body ul li { list-style: disc; margin-bottom: 8px; }
.article-body ol li { list-style: decimal; margin-bottom: 8px; }
.article-body img { max-width: 100%; height: auto; border-radius: 10px; margin: 10px 0; }
.article-body a { color: var(--brand-700); text-decoration: underline; }
.article-body blockquote {
    margin: 20px 0; padding: 16px 20px; background: var(--bg-2); border-left: 4px solid var(--brand-500);
    border-radius: 0 10px 10px 0; color: var(--ink-2);
}
.article-body table { width: 100%; border-collapse: collapse; margin: 20px 0; font-size: 14.5px; }
.article-body table th, .article-body table td { border: 1px solid var(--line); padding: 11px 14px; text-align: left; }
.article-body table th { background: var(--bg-2); font-weight: 600; }
.article-body pre {
    background: var(--navy-800); color: #cfe4fa; padding: 18px 20px; border-radius: 12px; overflow-x: auto;
    font-family: "JetBrains Mono", Consolas, Monaco, "Courier New", monospace;
    font-size: 13.5px; line-height: 1.8; margin: 18px 0;
}
.article-body code { font-family: "JetBrains Mono", Consolas, Monaco, monospace; font-size: .95em; }
.article-body :not(pre) > code { background: var(--bg-2); color: var(--brand-700); padding: 2px 7px; border-radius: 5px; }

.article-tags {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 30px; padding-top: 22px;
    border-top: 1px solid var(--line); font-size: 13.5px; color: var(--muted);
}
.article-tags a { padding: 4px 12px; border-radius: 6px; background: var(--bg-2); color: var(--ink-2); }
.article-tags a:hover { background: var(--grad); color: #04182c; }

.prevnext { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 24px; }
.prevnext a {
    display: block; background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
    padding: 16px 20px; font-size: 14.5px; color: var(--ink-2);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: all .24s var(--ease);
}
.prevnext a:hover { border-color: var(--brand-500); color: var(--brand-700); transform: translateY(-2px); }
.prevnext a span { color: var(--muted); margin-right: 8px; }

/* ---------- 首页「最新动态」：左标题 + 右上"查看更多" + 一整条资讯列表 ----------
   取代了原来的"居中标题 + 三张卡 + 居中按钮"（原因写在 index.html 该版块的注释里）。
   列表行用 flex 两端对齐，hover 时左内边距加大做出轻微推进感。 */
.news-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 22px; }
.news-head-text { min-width: 0; }
.news-head h2 { font-size: 26px; letter-spacing: .3px; color: var(--navy-800); margin-bottom: 10px; }
.news-head p { font-size: 14.5px; line-height: 1.8; color: var(--muted); }
.news-list { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.news-list a {
    display: flex; align-items: center; justify-content: space-between; gap: 20px;
    padding: 19px 26px; border-bottom: 1px solid var(--line);
    font-size: 15.5px; font-weight: 600; color: var(--navy-800);
    transition: background .25s var(--ease), color .25s var(--ease), padding-left .25s var(--ease);
}
.news-list a:last-child { border-bottom: none; }
.news-list a:hover { background: var(--bg); color: var(--brand-700); padding-left: 34px; }
.news-list .news-item-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.news-list .news-date { flex: none; font-size: 13px; font-weight: 500; color: var(--muted-2); }

/* ---------- 全国节点覆盖地图 ---------- */
.map-stats {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
    max-width: 860px; margin: 0 auto 30px; text-align: center;
}
.map-stats b {
    display: block; font-size: 30px; font-weight: 800; letter-spacing: -.5px;
    color: var(--brand-600); line-height: 1.15;
}
.map-stats b small { font-size: .55em; font-weight: 700; letter-spacing: 0; }
.map-stats > div > span { font-size: 13.5px; color: var(--muted); }
.map-wrap { position: relative; max-width: 940px; margin: 0 auto; }
.map-wrap::before {
    content: ""; position: absolute; inset: 6% 10%;
    background: radial-gradient(closest-side, rgba(10, 132, 255, .08), transparent 72%);
    pointer-events: none;
}
.map-wrap img { position: relative; z-index: 1; display: block; width: 100%; height: auto; }
.map-tip-wrap { text-align: center; margin-top: 18px; }
.map-tip {
    display: inline-flex; align-items: center; gap: 7px;
    background: rgba(10, 132, 255, .09); color: var(--brand-700);
    border: 1px solid rgba(10, 132, 255, .18); border-radius: 20px;
    padding: 7px 16px; font-size: 13.5px;
}
.map-tip .ico { width: 16px; height: 16px; flex: none; }

.empty-state { text-align: center; padding: 70px 20px; color: var(--muted); background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
.empty-state .ico { width: 46px; height: 46px; color: var(--line-2); margin-bottom: 14px; }

.page-block { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 38px 42px; }
.info-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 30px; }
.info-card { text-align: center; padding: 26px 20px; }
.info-card .icon-box { margin: 0 auto 14px; }
.info-card b { display: block; font-size: 16px; margin-bottom: 6px; }
.info-card p { color: var(--muted); font-size: 14px; word-break: break-all; }

/* 富文本通配（后台编辑器输出的通用样式） */
.rich-text img { max-width: 100%; height: auto; }
.rich-text table { max-width: 100%; }
/* 正文里的超长串（API 地址、密钥、代码）在窄屏会顶破容器，强制可断行 + 代码块横向滚动 */
.rich-text { overflow-wrap: anywhere; word-break: break-word; }
.rich-text a { word-break: break-all; }
.rich-text pre { max-width: 100%; overflow-x: auto; }
.rich-text code { word-break: break-word; }

/* ---------- 18. 表单 ---------- */
.form-wrap { max-width: 760px; margin: 0 auto; }
.form-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 34px; box-shadow: var(--shadow-sm); }
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.field { margin-bottom: 18px; }
.field.full { grid-column: 1 / -1; }
.field label { display: block; font-size: 13.8px; font-weight: 600; color: var(--ink-2); margin-bottom: 8px; }
.field label .req { color: #e5484d; margin-left: 3px; }
.field input[type="text"], .field input[type="password"], .field input[type="tel"], .field input[type="email"],
.field input[type="number"], .field select, .field textarea {
    width: 100%; padding: 12px 15px; border: 1px solid var(--line); border-radius: 10px;
    background: #fff; color: var(--ink); font-size: 14.8px; transition: border-color .2s, box-shadow .2s;
}
.field textarea { min-height: 120px; resize: vertical; line-height: 1.7; }
.field select {
    appearance: none; -webkit-appearance: none; padding-right: 40px;
    background-image: linear-gradient(45deg, transparent 50%, #93a7bd 50%), linear-gradient(135deg, #93a7bd 50%, transparent 50%);
    background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%;
    background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--brand-500); box-shadow: 0 0 0 3px rgba(0, 212, 255, .16); }
.captcha-row { display: flex; gap: 12px; align-items: stretch; }
.captcha-row input { flex: 1; }
.captcha-row img { height: 46px; width: auto; border-radius: 10px; cursor: pointer; border: 1px solid var(--line); display: block; }
/* 验证码用按钮包裹，键盘 Tab 也能聚焦刷新 */
.captcha-btn { background: none; border: 0; padding: 0; cursor: pointer; border-radius: 10px; line-height: 0; }
.captcha-btn:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 2px; }
.form-tip { font-size: 13px; color: var(--muted); margin-top: 16px; line-height: 1.8; }
.form-tip a { color: var(--brand-700); font-weight: 600; }
.checkbox-line { display: flex; align-items: flex-start; gap: 8px; font-size: 13.5px; color: var(--muted); margin-bottom: 20px; cursor: pointer; }
.checkbox-line input { width: auto; margin-top: 4px; flex: none; }
.form-note {
    display: flex; align-items: center; gap: 10px; background: var(--bg-2); border-radius: 10px;
    padding: 12px 16px; font-size: 13.5px; color: var(--ink-2); margin-bottom: 24px;
}
.form-note .ico { width: 18px; height: 18px; color: var(--brand-600); flex: none; }

/* ---------- 19. 会员（登录/注册/中心） ---------- */
.member-wrap { max-width: 470px; margin: 0 auto; }
.member-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 38px; box-shadow: var(--shadow); }
.member-card h1 { font-size: 24px; text-align: center; margin-bottom: 8px; }
.member-card .member-sub { text-align: center; color: var(--muted); font-size: 14px; margin-bottom: 28px; }
.member-card .btn { width: 100%; padding: 13px; }
.member-extra { display: flex; align-items: center; justify-content: space-between; font-size: 13.5px; color: var(--muted); margin-bottom: 22px; }
.member-extra label { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.member-extra input { width: auto; }
.member-foot { text-align: center; font-size: 13.5px; color: var(--muted); margin-top: 18px; }
.member-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 28px; align-items: start; }
.member-menu { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.member-menu a { display: block; padding: 14px 20px; font-size: 14.5px; color: var(--ink-2); border-bottom: 1px solid var(--line); }
.member-menu a:last-child { border-bottom: none; }
.member-menu a:hover, .member-menu a.active { background: var(--bg-2); color: var(--brand-700); font-weight: 600; }
.member-panel { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; }
.member-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.member-table th, .member-table td { padding: 12px 14px; border-bottom: 1px solid var(--line); text-align: left; }
.member-table th { background: var(--bg-2); font-weight: 600; }

/* ---------- 20. 响应式 ---------- */
/* 视口不够宽时，右侧悬浮客服改为右下角，避免压住首屏数据面板 */
@media (max-width: 1400px) {
    .contact-dock { top: auto; bottom: 18px; right: 10px; transform: none; }
    .dock-btn { width: 48px; height: 48px; border-radius: 12px; }
    .dock-pop { top: auto; bottom: 0; transform: translate(10px, 0); }
    .dock-item:hover .dock-pop, .dock-item.open .dock-pop { transform: translate(0, 0); }
}

@media (max-width: 1180px) {
    /* 5 列：品牌 / 产品 / 帮助 / 关于 / 友情，二维码列整行铺到下面。
       首列 2fr —— 1024px 时仍有约 293px；列间距跟基础栅格一样用 24px。 */
    .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr 1fr; gap: 24px; }
    .footer-qr-col { grid-column: 1 / -1; }
}

@media (max-width: 1080px) {
    .hero-title { font-size: 38px; }
    .hero-inner { gap: 38px; }
    .cols-4, .plan-grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
    .news-head h2 { font-size: 23px; }
    /* 加盟页：四步流程收到两行；人群网格收到两列 */
    .join-flow { grid-template-columns: repeat(2, 1fr); }
    .join-flow li::after { display: none; }
    .join-people { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .roi-item b { font-size: 32px; }
    .roi-item { flex: 1 1 160px; }
    .ver-cards, .feat-grid { grid-template-columns: repeat(2, 1fr); }
    .about-points { grid-template-columns: repeat(2, 1fr); }
    .ver-band { padding: 32px 0 34px; }
    .ver-lead { font-size: 21px; }
    .ver-scale { font-size: 14px; }
    .ver-head { margin-bottom: 26px; }
    .ver-panel-name { font-size: 22px; }
    .ver-panel-num b { font-size: 42px; }
    .oem-title { font-size: 27px; }
    .oem-inner { padding: 28px 22px 26px; }
    .map-stats { grid-template-columns: repeat(3, 1fr); gap: 14px 12px; }
    .map-stats b { font-size: 26px; }
    .list-layout { grid-template-columns: minmax(0, 1fr) 288px; gap: 26px; }
}

@media (max-width: 980px) {
    :root { --header-h: 64px; }
    /* 页脚：5 列在 900px 以下太挤（最长的「MingYangOS软路由」会折行），
       改成 3 列：品牌 / 产品 / 帮助 在第一行，「关于我们」「友情链接」自动换到第二行，
       二维码列（≤1180 是整行铺开）继续在最后。 */
    .footer-grid { grid-template-columns: 1.9fr 1fr 1fr; gap: 22px; }
    /* 3 列布局里只有 3 条轨道，必须把基础样式里给这两列写的 grid-column:5/6 复位，
       否则会生成隐式轨道、把整行撑乱 */
    .friend-col, .footer-qr-col { grid-column: auto; }
    /* 关键：backdrop-filter 会让抽屉的 position:fixed 改以头部为参照，
       导致手机端抽屉高度只有头部那么高、并把页面撑出横向滚动，这里关掉毛玻璃 */
    .site-header { backdrop-filter: none; -webkit-backdrop-filter: none; }
    .section { padding: 62px 0; }
    .section-tight { padding-top: 26px; }
    .section-tabbed { padding-top: 20px; padding-bottom: 22px; }
    .section-article { padding-top: 22px; }
    .section-tight-b { padding-bottom: 22px; }
    .section-title, .section-head h2 { font-size: 26px; }
    .hero { padding: 56px 0 66px; }
    .hero-inner { grid-template-columns: 1fr; gap: 34px; }
    .hero-title { font-size: 33px; }
    .hero-desc { font-size: 15.5px; }
    .hero-panel { max-width: 580px; }
    .cols-3, .trust-inner { grid-template-columns: repeat(2, 1fr); }
    .tool-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .plan-grid { grid-template-columns: repeat(2, 1fr); }
    .list-layout { grid-template-columns: 1fr; }
    .info-cards { grid-template-columns: repeat(2, 1fr); }
    .member-layout { grid-template-columns: 1fr; }
    .article { padding: 28px 24px; }
    .page-block { padding: 26px 24px; }
    .cta-band h2 { font-size: 25px; }

    /* 移动端抽屉导航 */
    .brand { flex: 1 1 auto; min-width: 0; gap: 9px; }
    .brand-text { min-width: 0; }
    .brand-text b { font-size: 22px; overflow: hidden; text-overflow: ellipsis; }
    .nav-toggle { display: block; margin-left: auto; flex: none; }
    .header-cta { display: none; }
    .main-nav {
        position: fixed; top: 0; right: 0; width: 84%; max-width: 340px; height: 100%;
        background: #0d2444; z-index: 130; margin: 0; padding: 20px 20px 90px; overflow-y: auto;
        transform: translateX(102%); visibility: hidden;
        transition: transform .34s var(--ease), visibility .34s var(--ease);
        box-shadow: -14px 0 40px rgba(4, 14, 30, .4);
        display: flex; flex-direction: column;
    }
    .main-nav.open { transform: none; visibility: visible; }
    .nav-drawer-head {
        display: flex; align-items: center; justify-content: space-between;
        padding-bottom: 16px; margin-bottom: 6px; border-bottom: 1px solid rgba(255, 255, 255, .1);
    }
    .nav-drawer-head b { color: #fff; font-size: 17px; }
    .nav-close { width: 34px; height: 34px; border-radius: 9px; background: rgba(255, 255, 255, .08); color: #fff; font-size: 17px; line-height: 1; }
    .nav-list { flex-direction: column; align-items: stretch; gap: 2px; }
    .nav-item { border-bottom: 1px solid rgba(255, 255, 255, .07); }
    .nav-link { padding: 14px 8px; font-size: 16px; justify-content: space-between; border-radius: 0; }
    .nav-item.active > .nav-link { background: transparent; color: var(--brand-400); }
    /* 抽屉里一行一项，角标不能再用"绝对定位贴右上角"（会跑到整行最右边贴边），
       改成跟着文字走：留在行内，由父级 space-between 排到行尾 */
    .nav-item.nav-hl > .nav-link .nav-tag { position: static; margin-left: 8px; }
    .sub-menu {
        position: static; transform: none; opacity: 1; visibility: visible; box-shadow: none;
        background: rgba(255, 255, 255, .04); border: none; border-radius: 0;
        min-width: auto; padding: 0 0 8px 12px; max-height: 0; overflow: hidden;
        transition: max-height .3s var(--ease);
    }
    .sub-menu::before { display: none; }
    .sub-menu a { color: #b9cde6; padding: 10px; font-size: 14.5px; border-radius: 8px; }
    .sub-menu a:hover { background: rgba(255, 255, 255, .06); color: #fff; }
    .nav-item.expand > .sub-menu { max-height: 560px; }
    .nav-foot { display: flex; gap: 12px; margin-top: 24px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .1); }
    .nav-foot .btn { flex: 1; }
}

@media (max-width: 760px) {
    .hero-title { font-size: 27px; letter-spacing: .5px; }
    .hero-desc { font-size: 15px; }
    /* 教程页卡片：≤760px 收成单列，自动铺满整行 */
    .tool-grid { grid-template-columns: 1fr; }
    /* 文案折行后胶囊圆角会显得怪，窄屏改回常规圆角 */
    .notice-bar-plain { border-radius: 12px; padding: 7px 14px; }
    .hero-actions .btn { flex: 1; min-width: 130px; }
    .btn-lg { padding: 13px 22px; font-size: 15.5px; }
    .stat-card b { font-size: 21px; }

    .cols-3, .cols-4, .plan-grid, .plan-grid.cols-4,
    .info-cards, .trust-inner, .form-grid,
    .oem-cols, .about-points, .feat-grid { grid-template-columns: 1fr; }
    .oem-title { font-size: 22px; }
    .oem-inner { padding: 22px 16px 22px; border-radius: 14px; }
    /* 首页最新动态：窄屏"查看更多"移到标题下方，资讯行改成上下两行（标题在上、日期在下） */
    .news-head { flex-direction: column; align-items: flex-start; gap: 10px; margin-bottom: 18px; }
    .news-head h2 { font-size: 21px; }
    .news-list a { flex-direction: column; align-items: flex-start; gap: 6px; padding: 16px 18px; }
    .news-list .news-item-title { white-space: normal; }
    /* 加盟页窄屏：四步流程单列；收益测算的三段改成上下排、四档改成两行一组 */
    .join-flow { grid-template-columns: 1fr; }
    .join-adv { margin-top: 26px; }
    .roi-box { padding: 24px 20px 22px; }
    .roi-top { flex-direction: column; gap: 14px; }
    .roi-item { width: 100%; flex: none; }
    .roi-arrow { transform: rotate(135deg); margin: 0; }
    .roi-rows li { flex-direction: column; align-items: flex-start; gap: 5px; }
    .roi-rows li em { min-width: 0; text-align: left; }
    .roi-note { font-size: 12.5px; padding: 12px 14px; }
    /* 人群网格与须知面板窄屏收单列 */
    .join-people { grid-template-columns: 1fr; gap: 22px; }
    .join-notes-box { margin-top: 32px; padding: 22px 18px 20px; }
    .join-notes { grid-template-columns: 1fr; gap: 2px; }
    .trust-inner { gap: 16px; padding: 20px 0; }
    .section { padding: 50px 0; }
    /* 软路由页桌面端收到了 36px，手机上内容是一行行堆的、没有大卡撑场，
       36 会显得挤；这里单独回放到 46/40，跟"桌面更紧、手机更松"的直觉一致。 */
    .router-page .section { padding-top: 46px; padding-bottom: 46px; }
    .router-page .section.section-about { padding-top: 40px; padding-bottom: 40px; }
    .section-tight { padding-top: 22px; }
    .section-tabbed { padding-top: 18px; padding-bottom: 20px; }
    .section-article { padding-top: 18px; }
    .section-tight-b { padding-bottom: 20px; }
    .section-head { margin-bottom: 32px; }
    .section-title, .section-head h2 { font-size: 22px; }
    .section-head p, .section-desc { font-size: 14.5px; }

    .card { padding: 22px 20px; }
    .plan-card { padding: 26px 20px; }
    .plan-price b { font-size: 32px; }
    .warn-bar { padding: 12px 14px; font-size: 14px; margin-bottom: 34px; }

    .sort-tabs { justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 6px; -webkit-overflow-scrolling: touch; }
    .sort-tabs a { flex: none; }

    .article-item { flex-direction: column; gap: 14px; padding: 16px; }
    .article-thumb { width: 100%; height: 180px; }
    .article-info h3 { font-size: 16.5px; }
    .article-head h1 { font-size: 21px; }
    .article-body { font-size: 15px; }
    .prevnext { grid-template-columns: 1fr; }

    .page-hero { padding: 42px 0 38px; }
    .page-hero h1 { font-size: 24px; }
    .page-hero p { font-size: 14.5px; }
    .form-card, .member-card { padding: 24px 20px; }
    .cta-band { padding: 52px 0; }
    .cta-band h2 { font-size: 21px; }
    .cta-band p { font-size: 14.5px; }
    .cta-actions .btn { width: 100%; }

    .site-footer { padding-top: 44px; }
    .footer-grid { grid-template-columns: 1fr; gap: 26px; padding-bottom: 30px; }
    .footer-bottom { flex-direction: column; align-items: center; gap: 6px; }
    /* 窄屏是上下两行，横排的竖线分隔就没意义了，去掉 */
    .footer-bottom .fb-links::before { display: none; }

    /* 悬浮客服：右侧竖排紧凑图标 */
    .contact-dock { right: 8px; gap: 8px; }
    .dock-btn { width: 46px; height: 46px; border-radius: 12px; }
    .dock-btn .ico { width: 20px; height: 20px; }
    .dock-btn .dock-label { display: none; }
    .dock-pop { right: 0; top: auto; bottom: calc(100% + 10px); transform: translate(0, 8px); width: 182px; }
    .dock-pop::after { right: 16px; top: auto; bottom: -6px; border: none; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
    .dock-item.open .dock-pop { transform: translate(0, 0); }
    .dock-pop img { width: 140px; height: 140px; }
}

@media (max-width: 400px) {
    .container { padding: 0 15px; }
    .hero-title { font-size: 24px; }
    .dock-btn { width: 42px; height: 42px; }
}

/* 超窄屏（老款小屏手机） */
@media (max-width: 344px) {
    .stat-grid { grid-template-columns: 1fr; }
}

/* ---------- 21. 打印 ---------- */
@media print {
    .site-header, .contact-dock, .cta-band, .site-footer, .nav-toggle, .nav-mask { display: none !important; }
    body { background: #fff; }
    .article, .page-block { border: none; padding: 0; }
}

/* ---------- 59. 教程正文：参考站样式（作用域 .tut-ref，只作用于带这个类的正文） ----------
   做法：把参考教程页那套"彩色模块标题 + 灰底卡片 + 黄/红提示框 + 合规卡片"的样式
   原样搬进来，每条选择器都加 .tut-ref 前缀，保证不会影响站内其它页面。
   正文里用 <div class="tut-ref"> 包一层即可。 */
.tut-ref {
    /* 2026-10 标题条「一色到底」：七个模块标题条全部固定成同一个「深 → 亮」品牌青蓝。
       正文里每条标题条的行内 style 仍在引用下面这 5 组变量，所以这里把它们统一成同一个值 ——
       万一哪天行内样式被后台编辑器清掉，变量兜底还是同一个色。真正生效的是 .module-header 那条 !important。 */
    --blue-start: #0b3a7a; --blue-end: #0a84ff;
    --purple-start: #0b3a7a; --purple-end: #0a84ff;
    --green-start: #0b3a7a; --green-end: #0a84ff;
    --pink-start: #0b3a7a; --pink-end: #0a84ff;
    --orange-start: #0b3a7a; --orange-end: #0a84ff;
    max-width: 800px; margin: 0 auto; font-size: 15.5px; color: var(--ink-2);
}
.tut-ref > div { margin-bottom: 30px; }
.tut-ref > div:last-child { margin-bottom: 0; }

/* ---------- 62. 教程详情页正文栏宽 ----------
   「使用教程」这一栏（含子栏）的统一宽度：正文卡 884px 居中（正文 800px 阅读宽度）。
   由 main.js 的 initToc() 给 .list-main 加 .tut-narrow —— 判定依据是面包屑里的
   「使用教程」链接，所以将来在后台加子栏也自动生效，不用回来改 CSS。
   没 JS 时下面的 :has(.tut-ref) 兜底：带参考站版式的那篇仍然收窄。 */
.list-main:has(.tut-ref),
.list-main.tut-narrow { max-width: 884px; margin: 0 auto; }

/* 模块标题（固定渐变底 + 白色图标 + 右边按钮）
   2026-10-17 按用户反馈调过一版：原来 #0b3a7a→#0a84ff 的亮蓝一屏叠 5 条太扎眼、标题离下面卡片也挤。
   现在改成更深的藏蓝（#0f2f57→#1b5ea6）+ 内边距和行间距都放宽，蓝色仍是主色但没有"电光蓝"的刺眼感。 */
/* 模块标题（浅蓝底 + 左侧蓝竖条 + 深藏蓝字）
   2026-10-17 第二稿：深蓝实底整条太抢眼（用户："这几个蓝色的标题是不是太显眼了"），
   改成"浅蓝底 + 3px 左竖条 + 深藏蓝字 + 深色图标"，同时把高度收窄一档（7px 内边距、1.08rem 字、16px 图标）。
   蓝色只留作左侧一小段强调，标题本身当"文档小节标题"看，不再和正文抢注意力。
   正文里的 7 条标题条各自带行内 style（background: linear-gradient(...)），必须用 !important 盖掉。 */
.tut-ref .module-header {
    padding: 7px 0 7px 13px; margin-bottom: 14px;
    border: 1px solid #e0ebf8; border-left: 3px solid #1b5ea6; border-radius: 8px;
    background: #f4f8fd !important;
    display: flex; align-items: center;
}
.tut-ref .module-header h2 { color: #12315a !important; text-shadow: none !important; font-size: 1.08rem !important; }
.tut-ref .module-header h2 {
    font-size: 1.08rem; font-weight: 700; margin: 0; padding: 0; border: 0;
    color: #12315a; text-shadow: none;
}
.tut-ref .module-header .icon { font-size: 16px; margin-right: 5px; line-height: 1; }
/* 参考站那里是 emoji；本站正文存不了 emoji（列是 utf8 3 字节），
   改用站内 sprite 导出的白色 SVG 图标（build/gen-tut-icons.js 生成，正文用 <img> 引用）。
   ⚠️ 注意别用 `.icon:empty` 来兜底 —— img 也是 :empty（没有子节点），会被套上占位样式。
   浅底上白色图标看不见 → 用 filter 反色压成深蓝（和标题同色系）。 */
.tut-ref .module-header img.icon {
    width: 16px; height: 16px; flex: none; margin-right: 6px;
    background: none; border-radius: 0;
    filter: invert(1) sepia(1) saturate(6) hue-rotate(190deg) brightness(.55);
    opacity: 1;
}
/* 参考站正文里的 ⚠️ / 🔔 / ✅ 这些小图标：正文列是 utf8（3 字节）存不了 emoji，
   内联 <svg> 又会被 CMS 过滤，所以用 CSS mask 画 —— mask 取的是 SVG 的 alpha 通道，
   图标直接吃父级的 currentColor：徽标上是白色、红提示里是红色、蓝卡片里是蓝色，一份文件三处通用。
   ⚠️ 别用 `.nt-ico:empty` 这类写法兜底（本站踩过 img/:empty 的坑），一律用明确的类名。 */
.tut-ref .nt-ico {
    display: inline-block; width: 15px; height: 15px; vertical-align: -2px; margin-right: 6px;
    background: currentColor;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: center; mask-position: center;
    -webkit-mask-size: contain; mask-size: contain;
}
.tut-ref .nt-warn { -webkit-mask-image: url(/template/dyl/images/tut-icons/i-warn.svg); mask-image: url(/template/dyl/images/tut-icons/i-warn.svg); }
.tut-ref .nt-bell { -webkit-mask-image: url(/template/dyl/images/tut-icons/i-bell.svg); mask-image: url(/template/dyl/images/tut-icons/i-bell.svg); }
.tut-ref .nt-check { -webkit-mask-image: url(/template/dyl/images/tut-icons/i-check.svg); mask-image: url(/template/dyl/images/tut-icons/i-check.svg); }
/* 徽标里的图标小一号，避免把胶囊撑高 */
.tut-ref .tag-red .nt-ico { width: 13px; height: 13px; vertical-align: -1.5px; margin-right: 5px; }
.tut-ref .module-header .btn-link {
    margin-left: auto; margin-right: 10px; background: var(--gold);
    color: #04182c; text-decoration: none; padding: 9px 20px; border-radius: 10px;
    font-weight: 600; font-size: 14.5px; white-space: nowrap;
    box-shadow: 0 8px 18px rgba(255, 182, 72, .30);
}
.tut-ref .module-header .btn-link:hover { background: #ffc76a; color: #04182c; text-decoration: none; }
.tut-ref .spaced-header { margin-bottom: 14px; }

/* 内容卡片：中性灰底/描边 → 站内蓝灰底 + 站内描边
   悬停：参考站和全站 .card 都有"整块上浮"，但这里是长图文，鼠标划过一片乱动 —— 文字卡片取消动效，
   动效只留给图片（见下面 .card-white img:hover），而且调轻。 */
.tut-ref .card {
    background: var(--bg); padding: 18px; border-radius: var(--radius);
    border: 1px solid var(--line); position: relative;
}
.tut-ref .card:hover { transform: none; box-shadow: var(--shadow-sm); border-color: var(--line); }
/* 同一模块里**相邻两张灰卡**之间留一点间距：.card 自身只有内边距，模块级那 25px 只作用在最外层 div，
   所以「节点购买」的"套餐分类说明"和"详细购买步骤"两张卡原本是贴在一起的（0 间距）。
   14px 跟标题条下沿的 12px 同档，比模块之间的 25px 小，读得出"这是同一节里的两块"。 */
.tut-ref .card + .card,
.tut-ref .card-white + .card { margin-top: 14px; }
.tut-ref .card p { font-size: 15px; color: var(--ink-2); line-height: 1.9; margin-bottom: 10px; }
.tut-ref .card p:last-child { margin-bottom: 0; }
/* 卡片里的列表：字号/行高必须和上面的 p 一致。原来 li 继承的是 .tut-ref 的 15.5px/1.95，
   比 p（15px/1.9）大一号，看着"列表比正文大"，整页显得乱。 */
.tut-ref .card ul, .tut-ref .card ol { margin: 2px 0 10px 20px; }
.tut-ref .card li { font-size: 15px; line-height: 1.9; margin-bottom: 6px; color: var(--ink-2); }
.tut-ref .card li:last-child { margin-bottom: 0; }
.tut-ref .card-white {
    background: #fff; padding: 12px; border-radius: var(--radius); box-shadow: var(--shadow-sm);
    border: 1px solid var(--line); text-align: center; margin-top: 12px;
}
.tut-ref .card-white img {
    max-width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--line);
    cursor: zoom-in; transition: transform .3s ease, box-shadow .3s ease; margin: 0;
}
.tut-ref .card-white img:hover { transform: scale(1.006); box-shadow: 0 6px 18px rgba(11, 31, 58, .10); }

/* 关键词高亮：参考站 7 色 → 站内 5 色（粉并入红、青并入绿，其余换同族站内色） */
/* 关键词高亮：参考站正文里只用了 4 种颜色（蓝 #1890ff / 绿 #28a745 / 橙 #e67e00 / 红 #d32f2f），
   一页里颜色越少越整洁、越大气。这里同样收敛成 4 色（色相取站内家族色，比 Bootstrap 那套更沉稳）：
     蓝 = 品牌蓝 --brand-700 ｜ 绿 = 青绿 #0f9d76 ｜ 橙 = 站内暖橙 #e0670d ｜ 红 = 珊瑚红 #d9483b
   正文里的旧类名（purple / teal / pink）保留成同色别名，历史内容或从别处粘来的片段都不会变成黑字。 */
.tut-ref .hl-blue, .tut-ref .hl-purple { color: var(--brand-700); font-weight: 700; }
.tut-ref .hl-green, .tut-ref .hl-teal { color: #0f9d76; font-weight: 700; }
.tut-ref .hl-orange { color: #e0670d; font-weight: 700; }
.tut-ref .hl-red, .tut-ref .hl-pink { color: #d9483b; font-weight: 700; }
.tut-ref .tag-red {
    position: absolute; top: -10px; left: 20px; background: #e5533d; color: #fff;
    padding: 4px 16px; border-radius: 18px; font-size: .8rem; font-weight: 600;
    box-shadow: 0 3px 8px rgba(229, 83, 61, .25);
}

/* 提示框：Bootstrap 黄/红 → 站内警示条那套（.warn-bar 的暖色 / 珊瑚红）
   2026-10-17 两次微调：
   ① 宽度改成 fit-content（短提示缩成贴纸，长提示 max-width 100% 折行）；
   ② 高度收窄（12px→7px 内边距、14px→13.5px 字号、1.7→1.55 行高），
      原来一条提示比模块标题还高，现在和标题条基本齐平。 */
.tut-ref .note-yellow {
    margin-top: 8px; padding: 7px 13px; background: linear-gradient(90deg, #fff6e5, #fffdf9);
    border: 1px solid #ffd79a; border-left: 3px solid #f5a623; border-radius: 10px;
    width: fit-content; max-width: 100%;
}
.tut-ref .note-yellow p { margin: 0; font-size: 13.5px; color: #8a5a12; line-height: 1.55; }
.tut-ref .note-red {
    margin-top: 8px; padding: 7px 13px; background: #fff5f4;
    border: 1px solid #ffd2cc; border-left: 3px solid #e5533d; border-radius: 10px;
    width: fit-content; max-width: 100%;
}
.tut-ref .note-red p { margin: 0; font-size: 14px; color: #b3271c; line-height: 1.7; font-weight: 600; }
.tut-ref .note-orange {
    padding: 12px 16px; background: linear-gradient(90deg, #fff6e5, #fffdf9);
    border: 1px solid #ffd79a; border-left: 3px solid #f5a623; border-radius: 10px; margin-bottom: 16px;
}
.tut-ref .note-orange p { margin: 0; font-size: 14px; color: #8a5a12; line-height: 1.7; }

/* 合规卡片（左上角小标签） */
.tut-ref .compliance-card { padding: 18px; border-radius: var(--radius); margin-bottom: 16px; position: relative; }
.tut-ref .compliance-card .label {
    position: absolute; top: -10px; left: 20px; color: #fff; padding: 4px 16px;
    border-radius: 18px; font-size: .875rem; font-weight: 600; box-shadow: 0 3px 8px rgba(0, 0, 0, .25);
}
.tut-ref .compliance-card p { margin: 20px 0 0; font-size: .95rem; line-height: 1.5; font-weight: 600; }
.tut-ref .compliance-red { background: linear-gradient(145deg, #fff5f4, #ffeae7); border: 1px solid #ffd2cc; }
.tut-ref .compliance-red .label { background: #e5533d; }
.tut-ref .compliance-red p { color: #b3271c; }
.tut-ref .compliance-blue { background: linear-gradient(145deg, #f2f8ff, #e8f2ff); border: 1px solid var(--line-2); }
.tut-ref .compliance-blue .label { background: var(--brand-700); }
.tut-ref .compliance-blue p { color: var(--brand-700); }

/* 图片放大用站内灯箱（.ui-zoom）：把正文里那两条通用规则在 .tut-ref 内还原成参考站的版式 */
.tut-ref .ui-zoom { display: block; max-width: none; margin: 0; }
.tut-ref .ui-zoom img { width: auto; max-width: 100%; aspect-ratio: auto; }

@media (max-width: 600px) {
    .tut-ref .module-header .btn-link { font-size: .8rem; padding: 6px 14px; }
    .tut-ref .module-header h2 { font-size: 1.05rem; }
}

/* ---------- 65. 教程详情页右侧目录（.toc，白卡方案 · 贴正文右侧悬浮） ----------
   版式：**正文卡保持 884px 居中**（`.list-main:has(.tut-ref)` 那条），目录不参与文档流 ——
   `position:fixed`，**横向贴着正文右边缘**（距正文 26px），不再钉在视口最右边
   （1920 屏上钉视口右边会离正文 188px，看着"飘"）；纵向由 JS 学 sticky：
   起初跟正文卡顶边对齐，往上滚到吸顶导航下面 16px 就停住。
   宽度不写死：由 main.js 的 initToc() 量出「正文右边缘 → 右侧悬浮客服条」之间还剩多少，
   写进 --toc-w（148~240px）。空间不够（窄屏 / 客服条挤得只剩几十像素）就不加 .toc-float，
   目录不显示、正文照旧居中 —— 所以这里没有任何断点猜测。
   目录由 main.js 生成，只有"正文带 .tut-ref"的页面才生成，其它文章页完全不受影响。 */
.toc { display: none; }

/* 章节锚点偏移：参考站版式的模块 div、以及普通文章的 h2/h3，直接打开 #sec-n 时别被吸顶导航盖住 */
.tut-ref > div[id], .article-body h2[id], .article-body h3[id] { scroll-margin-top: calc(var(--header-h) + 16px); }

.toc.toc-float {
    display: block; position: fixed; z-index: 30;
    top: calc(var(--header-h) + 16px);   /* JS 会按正文卡顶边实时改写它（首屏对齐、滚动后吸在导航下） */
    right: var(--toc-right, 72px);
    width: var(--toc-w, 200px);
    max-height: calc(100vh - var(--header-h) - 40px); overflow-y: auto;
    transition: opacity .28s var(--ease), visibility .28s;
}
/* 正文整块滚出视口（看到评论区/页脚了）就把它收起来，效果等同 sticky 到文章末尾为止 */
.toc.toc-float.toc-hide { opacity: 0; visibility: hidden; }

/* 卡片内边距/字号按"最窄 156~171px"设计：实测 16px 内边距 + 13.5px 字会让
   「07 合规与售后保障」折成两行，收到 13px 内边距 + 13px 字就单行放得下。 */
.toc-in { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 13px; box-shadow: var(--shadow-sm); }
.toc h3 {
    font-size: 13.5px; color: var(--ink); margin-bottom: 9px; padding-bottom: 9px;
    border-bottom: 1px solid var(--line);
}
.toc li { margin-bottom: 2px; }
.toc a {
    display: flex; gap: 7px; align-items: baseline; padding: 6px 8px; border-radius: 8px;
    font-size: 13px; line-height: 1.5; color: var(--ink-2);
}
.toc a b { font-size: 11px; font-weight: 700; letter-spacing: .5px; color: var(--muted-2); }
.toc a:hover { background: var(--bg); color: var(--brand-700); }
.toc a.on { background: var(--grad-soft); color: var(--brand-700); font-weight: 600; }
.toc a.on b { color: var(--brand-600); }

/* ===== 首页欢迎弹窗（index.html 里的 .welcome-modal）=====
   3 秒后自动出现，每个浏览器会话只弹一次（逻辑在 js/main.js 末尾）。
   版式参考"清爽版"：标题一行 + 三个短卖点一行（竖线分隔）+ 一个通栏按钮 + 一行小字。 */
.welcome-modal { position: fixed; inset: 0; z-index: 130; display: flex; align-items: center; justify-content: center; padding: 20px; }
.welcome-modal[hidden] { display: none; }
.wm-backdrop { position: absolute; inset: 0; background: rgba(6, 22, 43, .58); opacity: 0; transition: opacity .26s var(--ease); }
.wm-card {
    position: relative; width: min(460px, 100%); background: #fff; border-radius: 16px;
    padding: 20px 24px 22px; box-shadow: 0 26px 64px rgba(4, 24, 50, .34);
    opacity: 0; transform: translateY(12px) scale(.985);
    transition: opacity .26s var(--ease), transform .3s cubic-bezier(.2, .8, .3, 1);
}
.welcome-modal.is-open .wm-backdrop { opacity: 1; }
.welcome-modal.is-open .wm-card { opacity: 1; transform: none; }
.wm-card:focus { outline: none; }
.wm-head { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.wm-head h2 { margin: 0; font-size: 1.12rem; font-weight: 700; color: var(--navy-800); letter-spacing: .2px; }
.wm-head h2 span { color: var(--brand-600); }
.wm-head .wm-logo { width: 26px; height: 26px; flex: none; object-fit: contain; }
.wm-row .ico { width: 16px; height: 16px; flex: none; color: var(--brand-600); }
.wm-close {
    margin-left: auto; width: 30px; height: 30px; flex: none; border: 0; border-radius: 8px;
    background: transparent; color: #b6c4d6; font-size: 16px; line-height: 1; cursor: pointer;
    transition: background .2s var(--ease), color .2s var(--ease);
}
.wm-close:hover { background: #f1f5fb; color: var(--navy-800); }
.wm-row {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
    gap: 8px 0; margin: 0 0 22px; font-size: 14.5px; font-weight: 600; color: var(--navy-800);
}
.wm-row span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; padding: 0 14px; }
.wm-row span + span { border-left: 1px solid #e3ebf5; }
.wm-cta {
    display: block; width: 100%; height: 46px; border: 0; border-radius: 10px; cursor: pointer;
    background: var(--grad); color: #fff; font-size: 15px; font-weight: 700; font-family: inherit;
    box-shadow: 0 10px 24px rgba(10, 132, 255, .26);
    transition: transform .2s var(--ease), box-shadow .2s var(--ease), filter .2s var(--ease);
}
.wm-cta:hover { transform: translateY(-1px); filter: brightness(1.03); box-shadow: 0 14px 30px rgba(10, 132, 255, .32); }
.wm-cta:active { transform: none; }
body.wm-lock { overflow: hidden; }
@media (max-width: 480px) {
    .wm-card { padding: 18px 18px 20px; border-radius: 14px; }
    .wm-head h2 { font-size: 1.05rem; }
    .wm-row { font-size: 12.5px; margin-bottom: 18px; gap: 6px 0; }
    .wm-row span { padding: 0 8px; }
    .wm-cta { height: 44px; font-size: 14.5px; }
}
@media (max-width: 350px) {
    .wm-row { flex-direction: column; gap: 6px; }
    .wm-row span + span { border-left: 0; }
}