/* 极致租机 · 商城样式（与设计稿同一套：卡片/阶梯价/悬浮结算条/结算页/付款页） */

  :root{
    --brand:#2E7DFF;
    --brand-deep:#1F6BEE;
    --brand-soft:#EAF1FF;
    /* v119 全站统一：--brand 从 #2563EB 提亮到 #2E7DFF（亮度 53→59、饱和度 83→100）。
       v118 那两个临时的 --brand-go / --brand-go-deep 已删，现在全站只有这一套蓝。 */
    --ink:#0E1A2E;
    --body:#5A6B85;
    --muted:#8A99AE;
    --faint:#94A3B8;
    --line:#E9EEF7;
    --line-2:#E2E9F5;
    --page:#F6F8FC;
    --white:#fff;
    --shadow-card:0 1px 2px rgba(23,41,77,.04);
    --shadow-card-hover:0 10px 22px -14px rgba(23,41,77,.20), 0 1px 3px rgba(23,41,77,.04);
    --wrap:1280px;
    --gap:14px;
  }

  *{box-sizing:border-box;}
  html{-webkit-text-size-adjust:100%;}
  body{
    margin:0;
    background:var(--page);
    color:var(--ink);
    font-family:"Noto Sans SC",-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
    font-size:14px;
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
  }
  ::selection{background:#CFE0FF;color:#0E1A2E;}
  a{color:inherit;text-decoration:none;}
  button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;}
  svg{display:block;}

  .wrap{
    width:100%;
    max-width:1440px;
    margin:0 auto;
    padding:0 80px;
  }

  :focus-visible{
    outline:2px solid var(--brand);
    outline-offset:3px;
    border-radius:8px;
  }

  /* ============ 顶部导航 ============ */
  .site-header{
    position:sticky;top:0;z-index:50;
    background:rgba(255,255,255,.88);
    backdrop-filter:saturate(180%) blur(14px);
    -webkit-backdrop-filter:saturate(180%) blur(14px);
    border-bottom:1px solid var(--line);
  }
  /* 顶栏尺寸不由这里决定：整页走下面「桌面等比画面」那套 #page zoom，
     顶栏作为 #page 的第一个子元素跟着一起缩，所以三个页面顶栏完全一致。
     曾经试过只给 .site-header 单独加 zoom，结果会双重缩放（顶栏缩成 40px），记一笔免得再踩。 */
  .nav{
    height:68px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:32px;
    position:relative;   /* 导航绝对居中的定位基准 */
  }
  .brand{display:flex;align-items:center;gap:9px;}
  /* 品牌标识：公司正式 Logo */
  .brand-mark{
    width:38px;height:38px;border-radius:10px;flex:none;
    display:block;object-fit:cover;background:#2F6BDD;
    box-shadow:
      0 6px 14px -9px rgba(31,107,238,.55),
      0 0 0 1px rgba(31,107,238,.09);
  }
  /* 文字块宽度由中文名决定；align-items:flex-start 很关键——否则中文会被拉伸，
     后面量到的就是块宽而不是字宽，等宽会变成假的 */
  .brand-text{
    display:flex;flex-direction:column;gap:3px;
    width:max-content;align-items:flex-start;
  }
  .brand-name{
    font-size:18px;font-weight:700;letter-spacing:.1em;
    color:#0B1526;line-height:1.1;
  }
  /* 英文副标：右端与中文名严格对齐，字号由脚本实测反算 */
  .brand-sub{
    display:block;white-space:nowrap;letter-spacing:0;
    font-size:11.5px;font-weight:500;color:#64758F;line-height:1;
    font-family:"Inter",-apple-system,"Segoe UI",sans-serif;
  }

  /* --- 备选变体（?brand=a 更小 / ?brand=c 更大），默认即定稿的 B --- */
  /* A · 小标：中文紧排，块最窄 */
  .brand.v-a{gap:11px;}
  .brand.v-a .brand-text{gap:3px;}
  .brand.v-a .brand-name{font-size:17.5px;letter-spacing:.02em;}
  .brand.v-a .brand-sub{font-size:10px;color:#8494AB;}

  /* C · 大标：中文拉开成标准字，英文用主色加粗 */
  .brand.v-c{gap:12px;}
  .brand.v-c .brand-mark{
    width:42px;height:42px;border-radius:11px;
    box-shadow:0 7px 15px -9px rgba(31,107,238,.58), 0 0 0 1px rgba(31,107,238,.09);
  }
  .brand.v-c .brand-text{gap:4px;}
  .brand.v-c .brand-name{font-size:19px;letter-spacing:.32em;line-height:1.05;}
  .brand.v-c .brand-sub{font-size:12.5px;font-weight:700;color:var(--brand);}
  /* 绝对居中于 .nav，中线对齐页面中心 */
  .nav-links{
    display:flex;align-items:center;gap:36px;
    position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  }
  .nav-links a{
    font-size:13.5px;color:#445470;padding:6px 0;position:relative;
    transition:color .18s ease;
  }
  .nav-links a:hover{color:var(--brand);}
  .nav-links a.is-active{color:var(--brand);font-weight:500;}
  .nav-links a.is-active::after{
    content:"";position:absolute;left:0;right:0;bottom:-16px;height:2px;
    background:var(--brand);border-radius:2px;
  }
  .nav-right{display:flex;align-items:center;gap:20px;}
  .btn-primary{
    display:inline-flex;align-items:center;justify-content:center;
    height:36px;padding:0 18px;border-radius:8px;
    background:var(--brand);color:#fff;font-size:13px;font-weight:500;
    /* nowrap + flex:none：窄屏上宁可挤别人也不能把「联系我们」折成两行 */
    white-space:nowrap;flex:none;
    box-shadow:0 6px 16px -8px rgba(46,125,255,.75);
    transition:background .18s ease, transform .18s ease, box-shadow .18s ease;
  }
  .btn-primary:hover{background:var(--brand-deep);box-shadow:0 8px 20px -8px rgba(46,125,255,.85);}
  .btn-primary:active{transform:translateY(1px);}

  /* ============ Hero ============ */
  .hero{
    position:relative;
    padding:54px 0 32px;
    background:linear-gradient(180deg,#E8F0FF 0%,#F6F8FC 100%);
    overflow:hidden;
  }
  .hero::before{
    content:"";
    position:absolute;left:50%;top:-190px;
    width:920px;height:420px;margin-left:-300px;
    background:radial-gradient(closest-side,rgba(46,125,255,.16),rgba(46,125,255,0));
    pointer-events:none;
  }
  .hero-body{
    position:relative;
    display:flex;flex-direction:column;align-items:center;
    width:100%;
  }

  .badge{
    display:inline-flex;align-items:center;gap:6px;
    height:28px;padding:0 12px;border-radius:14px;
    background:#fff;border:1px solid #DDE7FB;
    font-size:11.5px;font-weight:500;color:var(--brand);
    box-shadow:0 1px 2px rgba(46,125,255,.06);
  }
  h1{
    margin:20px 0 0;
    font-size:36px;line-height:1.33;font-weight:700;
    letter-spacing:.01em;text-align:center;
    color:var(--ink);
  }
  .hero-sub{
    margin:14px 0 0;
    max-width:720px;text-align:center;
    font-size:14.5px;line-height:24px;color:var(--body);
  }

  /* 搜索框 */
  .search{
    position:relative;
    display:flex;align-items:center;gap:10px;
    width:680px;max-width:100%;height:54px;
    margin-top:28px;padding:0 20px;
    background:#fff;border:1px solid #DDE7FB;border-radius:27px;
    box-shadow:0 10px 28px -18px rgba(46,125,255,.55);
    transition:border-color .18s ease, box-shadow .18s ease;
  }
  .search:hover{border-color:#C6D8F8;}
  .search:focus-within{
    border-color:var(--brand);
    box-shadow:0 0 0 4px rgba(46,125,255,.10), 0 10px 28px -18px rgba(46,125,255,.55);
  }
  .search input{
    flex:1;min-width:0;height:100%;border:none;outline:none;background:transparent;
    font:inherit;font-size:13.5px;color:var(--ink);
  }
  /* 触屏设备输入框字号必须 ≥16px：iOS Safari 遇到更小的字号会在聚焦瞬间
     自动放大整页，客户点一下搜索框页面就跳、还得手动缩回来。
     用 hover:none 而不是断点判断——iPad、触屏本一视同仁，桌面不受影响。 */
  @media (hover:none){
    .search input{font-size:16px;}
  }
  .search input::placeholder{color:var(--muted);}
  .kbd{
    flex:none;height:24px;padding:0 8px;border-radius:6px;
    display:inline-flex;align-items:center;
    background:#F1F5FC;color:var(--muted);
    font-family:"Inter",-apple-system,sans-serif;font-size:10.5px;font-weight:500;
    letter-spacing:.02em;
  }

  /* 分类胶囊 */
  .chips{
    display:flex;flex-wrap:wrap;justify-content:center;gap:8px;
    margin-top:26px;
  }
  .chip{
    height:32px;padding:0 15px;border-radius:16px;
    display:inline-flex;align-items:center;gap:5px;
    background:#fff;border:1px solid var(--line-2);
    font-size:12.5px;color:var(--body);
    transition:all .16s ease;
  }
  .chip .num{
    font-family:"Inter",-apple-system,sans-serif;
    font-size:11px;color:#A9B5C7;font-weight:500;
  }
  .chip:hover{border-color:#BFD3F5;color:var(--brand);}
  .chip:hover .num{color:var(--brand);}
  .chip[aria-selected="true"]{
    background:var(--brand);border-color:var(--brand);color:#fff;font-weight:500;
    box-shadow:0 6px 14px -8px rgba(46,125,255,.8);
  }
  .chip[aria-selected="true"] .num{color:rgba(255,255,255,.72);}
  /* 加载中：先摆出 5 个固定类目，数字位用占位符。
     为什么不直接隐藏——隐藏再显示会让下方列表整体下移约 40px，
     慢网用户正好会看到这一下"跳"。 */
  .chip.is-pending{color:#93A2B8;cursor:default;}
  .chip.is-pending .num{color:#C7D1E0;}
  .chip.is-pending:hover{border-color:var(--line-2);color:#93A2B8;}

  /* 信任标签 */
  .trust{
    display:flex;flex-wrap:wrap;justify-content:center;gap:22px;
    margin-top:18px;
  }
  .trust-item{display:flex;align-items:center;gap:5px;font-size:12px;color:#7A8AA0;}
  .trust-item svg{flex:none;}

  /* ============ 软件库 ============ */
  .library{padding:20px 0 64px;}
  /* 收起时滚回这里，留出 68px 吸顶导航的高度，别把标题挡住 */
  #download{scroll-margin-top:76px;}
  .lib-head{
    display:flex;align-items:center;justify-content:space-between;gap:24px;
    margin-bottom:18px;
  }
  .lib-title{margin:0;font-size:19px;font-weight:700;letter-spacing:.01em;}
  .lib-sub{margin:5px 0 0;font-size:12px;color:var(--muted);}
  /* 筛选/排序控件已移除：分类由上方胶囊承担（一次点击直达，还带数量），
     排序交回后台拖拽顺序 —— 这里只留标题与副标 */

  .grid{
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:var(--gap);
  }

  /* ============ 列表折叠开关 ============
     软件攒多了以后，一屏铺几十个既拖慢首屏、也让人挑不出重点，
     所以默认只摆前 10 个，剩下的收在这一行按钮后面。
     · 圆角胶囊 + 蓝色描边：一眼看出可点，又不会抢走卡片的注意力
     · 箭头用 transform 旋转而不是换图标，展开后同一颗箭头掉头指上 */
  .grid-more{display:flex;justify-content:center;margin-top:22px;}
  .grid-more[hidden]{display:none;}    /* 必须显式写：display:flex 会盖掉 hidden */
  .btn-more{
    display:inline-flex;align-items:center;justify-content:center;gap:7px;
    height:38px;padding:0 22px;border-radius:999px;
    background:#fff;color:var(--brand);border:1px solid #D7E3F8;
    font-size:13px;font-weight:500;white-space:nowrap;flex:none;
    box-shadow:0 8px 20px -16px rgba(46,125,255,.9);
    transition:background .16s ease,border-color .16s ease,transform .16s ease;
  }
  .btn-more:hover{background:var(--brand-soft);border-color:#BFD4F5;}
  .btn-more:active{transform:translateY(1px);}
  .btn-more:focus-visible{outline:2px solid var(--brand);outline-offset:2px;}
  .btn-more svg{flex:none;transition:transform .22s ease;}
  .btn-more[aria-expanded="true"] svg{transform:rotate(180deg);}

  /* 精致版紧凑卡片 */
  /* 与 index.html 内联那份 .card 保持完全一致（首页软件卡的实际样式在 index.html，
     这里是历史副本，两处必须同步改，否则以后谁生效都不确定）。 */
  .card{
    position:relative;
    display:flex;flex-direction:column;
    padding:13px 14px;gap:9px;
    background:#fff;
    border:1px solid #F0F4FB;
    border-radius:14px;
    box-shadow:0 4px 12px -5px rgba(23,41,77,.14), 0 1px 3px rgba(23,41,77,.05);
    transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  }
  .card:hover{
    transform:translateY(-2px);
    border-color:#D9E4F8;
    box-shadow:0 10px 24px -10px rgba(23,41,77,.22), 0 2px 6px rgba(23,41,77,.06);
  }
  /* 拖动下载：卡片本身是拖拽源，鼠标按下即呈「可抓取」手势。
     注意只在卡片上设 grab，不动 .btn-dl —— 按钮仍要 cursor:pointer，
     否则用户以为按钮也变成了拖拽把手。 */
  .card[draggable="true"]{cursor:grab;}
  .card[draggable="true"]:active{cursor:grabbing;}
  /* 拖动中的源卡片淡出，让落点（桌面/文件夹）成为视觉焦点 */
  .card.is-dragging{
    opacity:.42;cursor:grabbing;
    transform:none;box-shadow:none;
    transition:opacity .12s ease;
  }
  .card-top{
    display:flex;align-items:flex-start;justify-content:space-between;
    min-height:38px;
  }
  .card-icon{
    width:38px;height:38px;border-radius:10px;
    display:grid;place-items:center;flex:none;
  }
  .tag{
    height:17px;padding:0 5px;border-radius:4px;
    display:inline-flex;align-items:center;
    background:#FFF3E0;color:#C07610;
    font-size:9.5px;font-weight:500;letter-spacing:.02em;
  }
  /* 卡片右上角操作区：标签 + 分享按钮排一行。
     图标用「出框箭头」（方框 + 右上斜箭头），语义是「送到别处去」；
     颜色常态就是品牌蓝——用户明确要求默认蓝色，一眼能认出这是分享入口。
     悬停靠淡蓝底 + 深一档的蓝区分，不去跟「下载」抢主次。 */
  .card-side{display:flex;align-items:center;gap:6px;flex:none;}
  .btn-share{
    width:26px;height:26px;border-radius:7px;flex:none;
    display:grid;place-items:center;
    color:var(--brand);background:transparent;cursor:pointer;
    transition:background .16s ease,color .16s ease;
    /* 长按这个按钮要用来「更换分享去向」，得先把系统的长按菜单压掉，
       否则 iOS 弹「存储图像」、安卓弹「复制链接」，手势直接被系统抢走 */
    -webkit-touch-callout:none;-webkit-user-select:none;user-select:none;
  }
  .btn-share:hover{background:var(--brand-soft);color:var(--brand-deep);}
  .btn-share:active{background:#DCE8FF;}
  .btn-share:focus-visible{outline:2px solid var(--brand);outline-offset:1px;}
  .card-title{
    margin:0;font-size:13.5px;font-weight:600;color:var(--ink);
    letter-spacing:.01em;line-height:1.35;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  .card-desc{
    margin:0;
    font-size:11.5px;line-height:17px;color:#7385A0;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
    overflow:hidden;
  }
  .card-foot{
    display:flex;align-items:center;justify-content:space-between;gap:6px;
    margin-top:auto;
  }
  .meta{
    font-family:"Inter",-apple-system,"Segoe UI",sans-serif;
    font-size:10px;color:#94A3B8;white-space:nowrap;
    letter-spacing:.01em;
    /* 窄屏上卡片底部只有 130px，版本号得会让位：
       不加 min-width:0，flex 子项的最小宽度是内容宽度，省略号永远不出现 */
    min-width:0;overflow:hidden;text-overflow:ellipsis;
  }
  .btn-dl{
    display:inline-flex;align-items:center;gap:4px;
    /* 36 而不是 28：这是全站唯一的主操作按钮，28 在手机上只有拇指宽，
       桌面又被整页缩放打到视觉 21px（WCAG 2.5.8 要求最小 24）。
       改这里必须同步 .sk-btn 的高度和下面骨架的尺寸注释，否则加载完成会位移。 */
    height:36px;padding:0 12px;border-radius:8px;
    background:var(--brand-soft);color:var(--brand);
    font-size:11.5px;font-weight:600;
    white-space:nowrap;flex:none;   /* 手机卡片窄，「下载」两个字会被挤成竖排 */
    transition:background .16s ease,color .16s ease,box-shadow .16s ease;
  }
  /* 鼠标进入整张卡时点亮下载按钮，静止时保持轻盈 */
  .card:hover .btn-dl{
    background:var(--brand);color:#fff;
    box-shadow:0 6px 14px -8px rgba(46,125,255,.95);
  }
  .btn-dl svg{transition:transform .16s ease;}
  .btn-dl:hover{background:var(--brand);color:#fff;}
  .btn-dl:hover svg{transform:translateY(1px);}

  .empty{
    display:none;
    padding:52px 24px;text-align:center;
    background:#fff;border:1px dashed #D9E3F3;border-radius:14px;
    color:var(--muted);font-size:13px;
  }
  .empty strong{color:var(--ink);font-weight:600;}

  /* ============ 骨架屏（数据到达前的占位） ============
     为什么需要：页面原本先用一段硬编码的假数据渲染，接口回来再整块替换，
     慢网下实测 900ms 后卡片全部换掉，用户能看到明显跳动。
     骨架屏与真卡片同尺寸同栅格，替换时不会引起布局位移。 */
  .card-sk{pointer-events:none;}
  .card-sk:hover{transform:none;box-shadow:var(--shadow-card);border-color:#EDF1F8;}
  .sk{
    display:block;border-radius:6px;
    background:linear-gradient(90deg,#EEF2F9 25%,#F7F9FD 37%,#EEF2F9 63%);
    background-size:400% 100%;
    animation:skShine 1.4s ease-in-out infinite;
  }
  @keyframes skShine{0%{background-position:100% 0;}100%{background-position:0 0;}}
  .sk-icon{width:38px;height:38px;border-radius:10px;}
  /* 这两个高度不是随手写的：真卡是 flex 列，布局高度 = 38(card-top)
     + 18.3(.card-title 行高) + 17(.card-desc 一行) + 36(card-foot)
     + 3×9(gap) + 26(padding) + 2(border) ≈ 162px。
     骨架卡按同样结构对齐，替换瞬间下方内容不位移（实测差 < 1px）。
     注意 36 必须跟 .btn-dl 的 height 保持一致，改一边别忘了另一边。 */
  .sk-title{width:58%;height:18px;}
  .sk-desc{width:100%;height:15px;}
  .sk-meta{width:64px;height:10px;}
  .sk-btn{width:54px;height:36px;border-radius:8px;}
  /* 手机上卡片描述会折成两行，骨架照桌面只画一行的话，数据到达时每行矮 19px，
     5 行累计差 96px，页脚会往上蹿一截。补一行把差压到几像素。 */
  .sk-d2{display:none;}
  @media (max-width:640px){
    .sk-d2{display:block;width:82%;height:10px;}
  }
  /* 减少动态偏好：不闪，静态灰块（无障碍要求） */
  @media (prefers-reduced-motion:reduce){
    .sk{animation:none;background:#EEF2F9;}
  }

  /* 加载失败态：跨满整行，占住网格位置，别让页面塌成一条 */
  .load-fail{
    grid-column:1/-1;
    display:flex;flex-direction:column;align-items:center;
    padding:46px 24px 40px;text-align:center;
    background:#fff;border:1px dashed #E8DCC4;border-radius:14px;
  }
  .lf-t{margin:12px 0 0;font-size:14px;font-weight:600;color:var(--ink);}
  .lf-s{margin:7px 0 0;font-size:12.5px;line-height:1.7;color:var(--muted);max-width:380px;}
  .lf-btn{
    margin-top:16px;height:34px;padding:0 18px;border-radius:8px;
    background:var(--brand-soft);color:var(--brand);
    font-size:12.5px;font-weight:600;cursor:pointer;
    transition:background .16s ease,color .16s ease;
  }
  .lf-btn:hover{background:var(--brand);color:#fff;}

  /* 需求横幅 */
  /* 与 .card 同套层次：边框 #F0F4FB + 同款阴影（index.html 内联那份同步改） */
  .ask{
    display:flex;align-items:center;justify-content:space-between;gap:20px;
    margin-top:18px;padding:16px 22px;
    background:#fff;border:1px solid #F0F4FB;border-radius:14px;
    box-shadow:0 4px 12px -5px rgba(23,41,77,.14), 0 1px 3px rgba(23,41,77,.05);
  }
  .ask-left{display:flex;align-items:center;gap:12px;}
  .ask-icon{
    width:36px;height:36px;border-radius:10px;flex:none;
    display:grid;place-items:center;background:var(--brand-soft);
  }
  .ask-title{font-size:13.5px;font-weight:600;color:var(--ink);}
  .ask-sub{margin-top:3px;font-size:11.5px;color:#7385A0;}
  .btn-ghost{
    display:inline-flex;align-items:center;justify-content:center;
    height:34px;padding:0 16px;border-radius:8px;flex:none;
    background:#fff;border:1px solid #C6D6F5;color:var(--brand);
    font-size:12px;font-weight:500;
    transition:all .16s ease;
  }
  .btn-ghost:hover{background:var(--brand-soft);border-color:#B7CBF2;}

  /* ============ 页脚 ============ */
  .site-footer{
    background:#0E1526;color:#fff;
    padding:48px 0 24px;
  }
  .foot-top{
    display:flex;justify-content:space-between;align-items:flex-start;gap:60px;
    padding-bottom:32px;
  }
  .foot-brand{display:flex;flex-direction:column;gap:14px;max-width:340px;}
  /* 页脚品牌区：与顶部导航同一套 lockup（logo 38 / 中文 18/.1em / 英文等宽副标） */
  .foot-brand-row{gap:9px;}
  .foot-brand-row .brand-mark{width:38px;height:38px;border-radius:10px;box-shadow:none;}
  .foot-brand-row .brand-name{font-size:18px;font-weight:700;letter-spacing:.1em;line-height:1.1;color:#fff;}
  .foot-brand-row .brand-sub{color:#8B9AB2;}
  .foot-company{font-size:12px;color:#B7C2D6;}
  .foot-scope{font-size:12px;line-height:20px;color:#B7C2D6;}
  .foot-cols{display:flex;gap:64px;}
  .foot-col{display:flex;flex-direction:column;gap:12px;}
  .foot-col h3{
    margin:0;font-size:12.5px;font-weight:600;color:#fff;letter-spacing:.02em;
  }
  .foot-col a{font-size:12px;color:#B7C2D6;transition:color .16s ease;}
  /* 空类目的页脚链接由 renderChips 打 hidden；显式声明一次，防止以后有人给
     .foot-col a 补 display 就把 hidden 属性盖掉（这个坑踩过一次了） */
  .foot-col a[hidden]{display:none;}
  /* 说明类条目（非链接）与链接同色同号。
     原先只给 .foot-col-claim span 写了规则，「发货与付款」那列的 span 没有覆盖，
     于是继承了 .site-footer 的 #fff 和正文的 14px —— 比左右两列既白 6 个色阶又大 2px，
     整行还被撑高 7px。三列必须同级。 */
  .foot-col > span{font-size:12px;color:#B7C2D6;}
  .foot-col-claim span{font-size:12px;color:#B7C2D6;}
  .foot-col a:hover{color:#fff;}
  .foot-divider{height:1px;background:#1E2A42;}
  .foot-bottom{
    display:flex;align-items:center;justify-content:space-between;gap:24px;
    padding-top:20px;
    font-size:12px;color:#A9B6CC;
  }
  .foot-legal{display:flex;align-items:center;gap:20px;}
  .foot-legal a{transition:color .16s ease;}
  .foot-legal a:hover{color:#9FB0C9;}

  /* 回到顶部 */
  /* 轻提示：替代 alert，不打断操作 */
  .toast{
    position:fixed;left:50%;bottom:40px;z-index:120;
    max-width:min(520px,calc(100vw - 48px));
    padding:11px 16px;border-radius:10px;
    background:rgba(23,32,48,.95);color:#fff;
    font-size:12.5px;line-height:1.55;letter-spacing:.01em;
    box-shadow:0 20px 48px -22px rgba(15,25,45,.9);
    opacity:0;pointer-events:none;transform:translate(-50%,12px);
    transition:opacity .22s ease,transform .22s ease;
  }
  .toast.on{opacity:1;transform:translate(-50%,0);}

  /* ============ 未上线栏目：开发中提示（三个版本共用的零件） ============ */
  .soon-ico{
    width:52px;height:52px;border-radius:16px;flex:none;
    display:grid;place-items:center;
    background:linear-gradient(160deg,#EEF4FF,#DEE9FC);
    border:1px solid #D8E3F8;
    box-shadow:0 8px 18px -12px rgba(46,125,255,.55);
  }
  .soon-ico svg{display:block;}
  .soon-pill{
    display:inline-flex;align-items:center;gap:6px;
    height:22px;padding:0 9px;border-radius:999px;
    background:#FFF3E2;color:#9A5A06;
    font-size:11px;font-weight:600;letter-spacing:.04em;
    border:1px solid #FBE3C4;
  }
  .soon-pill i{
    width:5px;height:5px;border-radius:50%;background:#E08A16;
    display:block;flex:none;
  }
  .soon-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;}
  .soon-btn{
    height:36px;padding:0 16px;border-radius:9px;cursor:pointer;
    font-family:inherit;font-size:12.5px;font-weight:600;letter-spacing:.01em;
    display:inline-flex;align-items:center;justify-content:center;gap:6px;
    border:1px solid transparent;transition:all .16s ease;
  }
  .soon-btn.primary{
    background:var(--brand);color:#fff;
    box-shadow:0 10px 22px -12px rgba(46,125,255,.9);
  }
  .soon-btn.primary:hover{background:#1D4FD8;}
  .soon-btn.ghost{background:#fff;color:#445470;border-color:#DDE5F1;}
  .soon-btn.ghost:hover{background:#F5F8FE;border-color:#C9D6EA;color:#0B1526;}
  .soon-btn:focus-visible{outline:2px solid #A9C2F0;outline-offset:2px;}

  /* —— B 版：居中弹层 —— */
  .soon-modal{
    position:fixed;inset:0;z-index:125;
    display:flex;align-items:center;justify-content:center;padding:24px;
    background:rgba(9,17,33,.52);
    -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
    opacity:0;visibility:hidden;
    /* 同 .wx-modal：打开瞬间就要 visible，否则 focus() 落在还没显形的元素上会失效 */
    transition:opacity .2s ease,visibility 0s linear .2s;
  }
  .soon-modal.is-open{
    opacity:1;visibility:visible;
    transition:opacity .2s ease,visibility 0s linear 0s;
  }
  .soon-card{
    position:relative;width:392px;max-width:100%;
    padding:28px 26px 24px;text-align:center;
    background:#fff;border-radius:18px;
    box-shadow:0 30px 70px -24px rgba(9,20,45,.5);
    transform:translateY(12px) scale(.97);
    transition:transform .24s cubic-bezier(.2,.8,.3,1);
  }
  .soon-modal.is-open .soon-card{transform:translateY(0) scale(1);}
  .soon-card:focus{outline:none;}
  .soon-card .soon-ico{margin:0 auto 14px;}
  .soon-x{
    position:absolute;top:12px;right:12px;width:30px;height:30px;
    border:0;border-radius:50%;display:grid;place-items:center;cursor:pointer;
    background:transparent;color:#9AA8BD;transition:background .16s ease,color .16s ease;
  }
  .soon-x:hover{background:#F1F4FA;color:#445470;}
  .soon-x:focus-visible{outline:2px solid #A9C2F0;outline-offset:2px;}
  .soon-title{
    font-size:16.5px;font-weight:700;color:#0B1526;
    letter-spacing:.01em;line-height:1.35;
  }
  .soon-desc{
    margin:9px 0 20px;
    font-size:12.5px;line-height:1.75;color:#5D6B85;letter-spacing:.01em;
  }
  .soon-desc em{font-style:normal;color:#0B1526;font-weight:600;}

  /* ============ 后台入口按钮 + 暗号框（v62 · 方案 C） ============
     按钮只是门铃，真正的大门是 /manage —— 而 /manage 没凭证时返回 404。
     所以这个按钮做得克制一点：白底描边，不跟实心的「联系我们」抢注意力。 */
  .btn-admin{
    display:inline-flex;align-items:center;justify-content:center;gap:6px;
    height:36px;padding:0 13px;border-radius:8px;
    background:#fff;color:#475569;border:1px solid #DDE5F1;
    font-size:13px;font-weight:500;cursor:pointer;
    white-space:nowrap;flex:none;   /* 同样不许折行：「后台管理」折成三行最难认 */
    transition:color .16s ease,border-color .16s ease,background .16s ease,transform .16s ease;
  }
  .btn-admin:hover{color:var(--brand);border-color:#B9CDF0;background:#F5F8FE;}
  .btn-admin:active{transform:translateY(1px);}
  .btn-admin:focus-visible{outline:2px solid #A9C2F0;outline-offset:2px;}
  .btn-admin svg{display:block;flex:none;}

  /* ============ 移动端导航（≤899px 才出现） ============
     原来 899px 以下 .nav-links 直接 display:none，
     等于手机上根本没有导航入口——「技术服务 / 办公耗材 / 关于我们」完全不可达。
     这里补一个汉堡按钮 + 下拉面板。桌面端两个元素都是 display:none，
     不给大屏留任何多余节点和样式影响。 */
  .btn-menu{
    display:none;                 /* 桌面隐藏，靠 @media(max-width:899px) 打开 */
    align-items:center;justify-content:center;
    width:32px;height:32px;padding:0;flex:none;
    background:#fff;color:#475569;border:1px solid #DDE5F1;border-radius:8px;
    cursor:pointer;
  }
  .btn-menu:hover{color:var(--brand);border-color:#B9CDF0;background:#F5F8FE;}
  .btn-menu:focus-visible{outline:2px solid #A9C2F0;outline-offset:2px;}
  /* 打开状态给个明确的视觉反馈：面板在下方展开，按钮自己也得变样，否则看不出是开是关 */
  .btn-menu[aria-expanded="true"]{color:var(--brand);border-color:#B9CDF0;background:#EEF4FF;}
  .btn-menu svg{display:block;}

  /* 面板挂在 .site-header 下（sticky 本身是定位元素，可以直接当包含块），
     top:100% 贴着导航底边展开，不占文档流，推开内容会显得跳。
     display 默认 none + 只在窄屏 .is-open 时开：桌面端就算 JS 误加 class 也露不出来。 */
  .m-panel{
    display:none;
    position:absolute;left:0;right:0;top:100%;
    background:#fff;
    border-bottom:1px solid var(--line);
    box-shadow:0 18px 40px -26px rgba(23,41,77,.45);
    /* 4 项 + 后台入口大概 250px，超矮屏（横屏 320 高）还要能滚 */
    max-height:calc(100vh - 68px);
    max-height:calc(100dvh - 68px);
    overflow:auto;
    padding:4px 0 10px;
  }
  .m-link{
    display:flex;align-items:center;gap:9px;
    width:100%;height:48px;padding:0;
    font-family:inherit;font-size:15px;line-height:1.2;
    color:#25324A;background:none;border:0;text-align:left;cursor:pointer;
    transition:color .16s ease;
  }
  .m-link:hover{color:var(--brand);}
  .m-link:focus-visible{outline:2px solid #A9C2F0;outline-offset:-2px;}
  .m-link.is-active{color:var(--brand);font-weight:600;}
  .m-link svg{display:block;flex:none;}
  .m-sep{height:1px;background:var(--line);margin:6px 0;}
  @keyframes mPanelIn{
    from{opacity:0;transform:translateY(-6px);}
    to{opacity:1;transform:none;}
  }
  @media (prefers-reduced-motion:reduce){
    .m-panel.is-open{animation:none !important;}
  }

  .code-wrap{margin:2px 0 14px;}
  .code-input{
    width:100%;height:52px;padding:0 16px;box-sizing:border-box;
    border:1.5px solid #DDE5F1;border-radius:12px;background:#FBFCFE;
    font-family:inherit;font-size:20px;font-weight:600;color:#0B1526;
    text-align:center;letter-spacing:.4em;text-indent:.4em;
    transition:border-color .16s ease,background .16s ease,box-shadow .16s ease;
  }
  .code-input::placeholder{
    letter-spacing:normal;text-indent:0;
    font-size:13px;font-weight:400;color:#A9B6CB;
  }
  .code-input:focus{outline:none;border-color:var(--brand);background:#fff;box-shadow:0 0 0 4px rgba(46,125,255,.12);}
  .code-input.is-err{border-color:#E24B4A;background:#FEF7F7;}
  .code-err{
    min-height:17px;margin:7px 0 0;
    font-size:12px;line-height:1.5;color:#D0342C;letter-spacing:.01em;
  }

  /* —— C 版：整页占位（不是弹层，是"这一栏还没开"的空状态页） —— */
  .soon-page{
    position:fixed;left:0;right:0;top:68px;bottom:0;z-index:60;
    background:
      radial-gradient(700px 340px at 50% -8%,#E8F0FF,rgba(232,240,255,0) 70%),
      #F7FAFF;
    overflow:auto;
  }
  .soon-page[hidden]{display:none;}
  .soon-page::before{
    content:"";position:absolute;inset:0;pointer-events:none;
    background-image:radial-gradient(#D7E2F5 1px,transparent 1px);
    background-size:22px 22px;
    opacity:.5;
    -webkit-mask-image:radial-gradient(600px 320px at 50% 22%,#000,transparent 72%);
    mask-image:radial-gradient(600px 320px at 50% 22%,#000,transparent 72%);
  }
  .soon-page-inner{
    position:relative;max-width:1180px;margin:0 auto;padding:22px 32px 48px;
    min-height:100%;display:flex;flex-direction:column;
  }
  .soon-page:focus{outline:none;}
  .soon-back{
    align-self:flex-start;
    display:inline-flex;align-items:center;gap:7px;
    height:32px;padding:0 12px 0 10px;border-radius:8px;
    background:#fff;border:1px solid #E1E8F4;cursor:pointer;
    font-family:inherit;font-size:12.5px;font-weight:600;color:#445470;
    box-shadow:0 4px 10px -8px rgba(16,32,64,.5);
    transition:all .16s ease;
  }
  .soon-back:hover{border-color:#C9D6EA;color:var(--brand);}
  .soon-page-body{
    max-width:520px;margin:auto;padding:30px 0 24px;text-align:center;
  }
  .soon-page-body .soon-ico{width:72px;height:72px;border-radius:22px;margin:0 auto 20px;}
  .soon-page-body .soon-ico svg{width:32px;height:32px;}
  .soon-page-h{
    font-size:25px;font-weight:700;color:#0B1526;letter-spacing:-.01em;line-height:1.3;
  }
  .soon-page-h span{color:var(--brand);}
  .soon-page-p{
    margin:12px 0 22px;font-size:13.5px;line-height:1.85;color:#5D6B85;
  }
  .soon-page-meta{
    display:inline-flex;align-items:center;gap:8px;
    margin-bottom:26px;padding:7px 13px;border-radius:8px;
    background:#fff;border:1px solid #E4EBF6;
    font-size:12px;color:#65758D;letter-spacing:.01em;
    box-shadow:0 6px 16px -14px rgba(16,32,64,.6);
  }
  .soon-page-meta b{color:#0B1526;font-weight:600;}
  .soon-page-meta i{width:1px;height:12px;background:#E1E8F4;display:block;}

  .to-top{
    position:fixed;right:32px;bottom:32px;z-index:40;
    width:44px;height:44px;border-radius:50%;
    display:grid;place-items:center;
    background:#fff;border:1px solid var(--line);
    box-shadow:0 8px 24px -10px rgba(23,41,77,.28);
    opacity:0;visibility:hidden;transform:translateY(8px);
    transition:opacity .22s ease, transform .22s ease, visibility .22s;
  }
  .to-top.is-visible{opacity:1;visibility:visible;transform:none;}
  .to-top:hover{border-color:#C6D6F5;}

  /* ============ 桌面等比画面（任意屏幕观感一致） ============
     目标：任何桌面分辨率看到的都是"同一张画面按比例缩放"——
           内容占屏幕的比例、卡片与字的相对大小、留白宽度，全都一样。
           依据：定稿画面 = 1920×1080 屏 100% 窗口：内容区 max-width 1440 居中，
                 两侧各留白 240，卡片 245px / 5 列 / 正文 14px。
     做法：
       · 缩放系数 s = 可视宽 / 1905（1905 = 1920 屏减去滚动条）—— 等比缩放
           · 1920 屏：s≈1.000，与你定稿画面逐像素一致
           · 2560 屏：s≈1.336，内容放大到约 1920 视觉宽，两侧留白仍占 12.2%
           · 4K 3840：s≈2.000，同样是"同一张画面放大两倍"
           · 小屏向下限 0.75 兜底（正文视觉约 10.5px），再小就退出缩放走响应式
       · zoom 只挂在 #page（内容层），弹层/回到顶部/提示条留在缩放层外面，
         否则 position:fixed 会掉进 zoom 的包含块，遮罩只盖住半屏（踩过）
       · 缩放层内不要写宽度反算（如 100%/s）：zoom 元素的百分比宽度本身就按
         缩放折算包含块，再除一次会变成"双重缩放"，画布只剩一半宽（也踩过）
       · 不要加 scrollbar-gutter:stable：它锁死布局视口，弹层打开、滚动条消失后
         fixed 遮罩不再变宽，右边永远露一条 15px 亮边（踩过）
       · 桌面断点（1180/960）已全部删除；只留 <900px 的移动端断点 */
  /* 商城系页面与首页共用同一套等比缩放：整页（含顶栏）一起缩，
     所以首页 ↔ 技术服务 ↔ 办公耗材 ↔ 结算 ↔ 付款之间切换时顶栏纹丝不动。
     缩放系数由 /assets/fit.js 挂在 <html> 的 --fit-s 上（与首页 fit() 同参数）。 */
  html.fit #page{zoom:var(--fit-s, 1);}
  /* 弹层卡片跟着一起缩放，否则大屏上 480px 的二维码卡片会显得小一号；
     封顶 1.5 倍，避免 4K 下弹出个占满屏幕的大框 */
  html.fit .wx-card,
  html.fit .soon-card{zoom:var(--fit-m, 1);}
  /* 缩放层外的 fixed 元素：位置跟着比例走，免得在大屏上贴边 */
  html.fit .to-top{right:calc(32px * var(--fit-s));bottom:calc(32px * var(--fit-s));}
  html.fit .soon-page{top:calc(68px * var(--fit-s));}   /* 让出缩放后的导航高度 */
  /* 内容不满一屏时（结算页缩放后刚好一屏、短单还会剩一截）：
     先按缩放比例把内容层撑满视口，再让页脚贴底，否则页脚下面会露一条浅色底 */
  html.fit #page{min-height:calc(100vh / var(--fit-s, 1));}
  html.fit #page{display:flex;flex-direction:column;}
  html.fit #page > .site-footer{margin-top:auto;}
  html.fit #page > .site-header{flex:none;}

  /* ============ 自适应（桌面优先） ============
     注意：等比缩放开启时（≥900px）下面这些断点一条都不会命中，
           页面永远按 1905 定稿画面的比例呈现；它们只服务于 900px 以下的窄窗与手机。 */
  @media (max-width:899px){
    .wrap{padding:0 32px;}
    .grid{grid-template-columns:repeat(3,minmax(0,1fr));}
    /* 横向导航收进汉堡面板；顶栏只留「联系我们」(主 CTA) + 汉堡，
       后台入口一并移进面板，省下的宽度正好够 320px 那档不挤 */
    .nav-links{display:none;}
    .btn-admin{display:none;}
    .btn-menu{display:inline-flex;}
    .m-panel{padding-left:32px;padding-right:32px;}
    .m-panel.is-open{display:block;animation:mPanelIn .16s ease both;}
    h1{font-size:30px;}
    .foot-top{flex-direction:column;gap:32px;}
  }
  @media (max-width:640px){
    .wrap{padding:0 20px;}
    .grid{grid-template-columns:repeat(2,minmax(0,1fr));}
    h1{font-size:26px;}
    .hero{padding:42px 0 38px;}
    .ask{flex-direction:column;align-items:flex-start;}
    .search{height:48px;}

    /* —— 胶囊：单行横滑 ——
       原来手机上会换行，而骨架态的占位胶囊比真实胶囊宽一点点，正好卡在 375px
       的临界值上多折一行，数据到达时整个列表往上跳 40px。
       改成不换行 + 横滑：高度恒定，顺带解决「最后一个类目孤立在第二行」。
       padding 上下各 4px 是给选中态的阴影留位置（overflow-y 会裁掉它），
       margin-top 从 26 减到 22 保持视觉距离不变。 */
    .chips{
      flex-wrap:nowrap;justify-content:flex-start;
      overflow-x:auto;overflow-y:hidden;
      padding:4px 0;margin-top:22px;
      scrollbar-width:none;-ms-overflow-style:none;
      -webkit-overflow-scrolling:touch;
      scroll-snap-type:x proximity;
    }
    .chips::-webkit-scrollbar{display:none;}
    .chip{flex:none;scroll-snap-align:start;}   /* flex:none 必须加，否则 nowrap 下胶囊会被挤扁 */
    /* 有溢出且没滑到头时右边缘渐隐，暗示还能往左滑；
       已经滑过一段（can-left）就左边也渐隐，免得左侧露出半个被裁的胶囊；
       滑到头只剩左边有可滚内容，右边缘恢复清晰。 */
    .chips.can-scroll{
      -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 26px),transparent);
      mask-image:linear-gradient(to right,#000 calc(100% - 26px),transparent);
    }
    .chips.can-scroll.can-left{
      -webkit-mask-image:linear-gradient(to right,transparent 0,#000 26px,#000 calc(100% - 26px),transparent 100%);
      mask-image:linear-gradient(to right,transparent 0,#000 26px,#000 calc(100% - 26px),transparent 100%);
    }
    .chips.can-scroll.at-end{
      -webkit-mask-image:linear-gradient(to left,#000 calc(100% - 26px),transparent);
      mask-image:linear-gradient(to left,#000 calc(100% - 26px),transparent);
    }

    /* —— 顶栏：横向空间不够，先把品牌副标和「Ctrl K」这类非必要元素让出去，
          按钮本身只缩字号不折行（折成两三行比字小难看得多） —— */
    .nav{gap:12px;}
    .site-header .brand-sub{display:none;}   /* 只藏顶栏的，页脚那张 white logo 卡照旧 */
    .nav-right{gap:8px;}
    .btn-primary,.btn-admin{height:32px;font-size:12px;}
    .btn-primary{padding:0 12px;}
    .btn-admin{padding:0 10px;gap:5px;}
    .m-panel{padding-left:20px;padding-right:20px;}
    .kbd{display:none;}

    /* —— 卡片底部：手机上卡片内容宽只有 130px 左右 —— */
    .btn-dl{padding:0 9px;gap:3px;font-size:11px;}
    .meta{font-size:9.5px;}
  }

  /* 320px 级别的老机型（iPhone SE 一代）：两个按钮实在放不下，
     后台入口退化成图标按钮，靠 aria-label 保住读屏语义 */
  @media (max-width:359px){
    .nav{gap:8px;}
    .ba-t{display:none;}
    .btn-admin{padding:0 9px;}
    .btn-primary{padding:0 10px;font-size:11.5px;}
    /* 卡片内容宽只剩 109px，下载按钮也只留图标（按钮自带 aria-label="下载 xxx"），
       把省下的 22px 还给版本号，否则「v4.2.1 · 98MB」会被截成「v4.2.1 · 9…」 */
    .btn-dl{padding:0 8px;}
    .dl-t{display:none;}
  }

  /* ============ 微信二维码弹层 ============ */
  .btn-primary{border:0;cursor:pointer;font-family:inherit;}
  .wx-modal{
    position:fixed;inset:0;z-index:130;
    display:flex;align-items:center;justify-content:center;padding:24px;
    background:rgba(9,17,33,.55);
    -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
    opacity:0;visibility:hidden;
    /* visibility 不能和 opacity 一起做 .2s 过渡：
       打开时它要等过渡跑起来才真正变 visible，紧接着调用的 focus() 会失效，
       焦点留在触发器上，读屏用户根本不知道弹窗开了（实测踩到）。
       拆开写 —— 打开立刻可见（delay 0s），关闭时等淡出结束再 hidden。 */
    transition:opacity .2s ease, visibility 0s linear .2s;
  }
  .wx-modal.is-open{
    opacity:1;visibility:visible;
    transition:opacity .2s ease, visibility 0s linear 0s;
  }
  .wx-card{
    position:relative;width:480px;max-width:100%;
    padding:22px;text-align:center;
    display:flex;gap:18px;align-items:center;
    background:#fff;border-radius:20px;
    box-shadow:0 28px 66px -20px rgba(9,20,45,.45);
    transform:translateY(10px) scale(.97);
    transition:transform .22s cubic-bezier(.2,.8,.3,1);
  }
  .wx-photo{
    width:194px;flex:none;border-radius:11px;overflow:hidden;
    border:1px solid #E9EEF7;background:#fff;
    box-shadow:0 9px 22px -12px rgba(16,32,64,.5);
  }
  .wx-photo img{display:block;width:100%;height:auto;background:#FAFBFE;}
  .wx-body{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;}
  .wx-modal.is-open .wx-card{transform:translateY(0) scale(1);}
  .wx-card:focus{outline:none;}
  .wx-close{
    position:absolute;top:13px;right:13px;
    width:33px;height:33px;border:0;border-radius:50%;
    display:grid;place-items:center;cursor:pointer;
    background:transparent;color:#9AA8BD;
    transition:background .16s ease, color .16s ease;
  }
  .wx-close:hover{background:#F1F4FA;color:#445470;}
  .wx-close:focus{outline:none;}
  .wx-close:focus-visible{outline:2px solid #A9C2F0;outline-offset:2px;}

  /* ============ 分享去向面板（手机上点「分享」用） ============
     底边贴齐的 sheet，不是居中弹窗：单手拿手机时拇指就落在那一片，
     居中弹窗的两个按钮会顶到屏幕上半区，够不着。
     窄屏圆角只做上面两角，宽屏才收成一整块浮起来的卡片。 */
  .sh-modal{
    position:fixed;inset:0;z-index:132;
    display:flex;align-items:flex-end;justify-content:center;
    background:rgba(9,17,33,.55);
    -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
    opacity:0;visibility:hidden;
    transition:opacity .2s ease, visibility 0s linear .2s;
  }
  .sh-modal.is-open{
    opacity:1;visibility:visible;
    transition:opacity .2s ease, visibility 0s linear 0s;
  }
  .sh-card{
    width:100%;max-width:470px;
    padding:20px 16px calc(16px + env(safe-area-inset-bottom,0px));
    background:#fff;border-radius:20px 20px 0 0;
    box-shadow:0 -20px 54px -22px rgba(9,20,45,.5);
    transform:translateY(16px);
    transition:transform .24s cubic-bezier(.2,.8,.3,1);
    text-align:center;
  }
  .sh-modal.is-open .sh-card{transform:translateY(0);}
  .sh-card:focus{outline:none;}
  @media (min-width:520px){
    .sh-modal{align-items:center;}
    .sh-card{border-radius:20px;margin-bottom:0;padding-bottom:18px;}
  }
  .sh-title{margin:0;font-size:15.5px;font-weight:700;color:#0B1526;}
  .sh-name{
    margin:5px 0 0;font-size:12.5px;color:#7A8AA0;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  .sh-apps{display:flex;gap:12px;margin:17px 0 0;}
  .sh-app{
    flex:1;display:flex;flex-direction:column;align-items:center;gap:9px;
    padding:16px 8px 14px;border:1px solid #E7EDF7;border-radius:16px;
    background:#fff;cursor:pointer;font-family:inherit;
    font-size:13px;font-weight:600;color:#22314A;
    transition:background .15s ease, border-color .15s ease, transform .12s ease;
  }
  .sh-app:active{transform:scale(.97);background:#F7F9FD;}
  .sh-app:focus{outline:none;}
  .sh-app:focus-visible{outline:2px solid #A9C2F0;outline-offset:2px;}
  .sh-ico{
    width:44px;height:44px;border-radius:12px;
    display:grid;place-items:center;color:#fff;
  }
  .sh-ico svg{width:26px;height:26px;display:block;}
  .sh-ico-wx{background:#07C160;}
  .sh-ico-wxw{background:#2E7BF6;}
  /* 原来这里有个「记住这条软件」的勾选框，已去掉：
     任何软件都可能发微信、也可能发企微，按软件记等于永远记不准。 */
  .sh-ghosts{display:flex;gap:10px;margin-top:16px;}
  .sh-ghost{
    flex:1;width:100%;height:44px;
    border:1px solid #E7EDF7;border-radius:12px;
    background:#fff;cursor:pointer;font-family:inherit;
    font-size:13.5px;font-weight:600;color:#41557A;
    transition:background .15s ease;
  }
  .sh-ghost:active{background:#F5F8FD;}
  .sh-ghost:focus{outline:none;}
  .sh-ghost:focus-visible{outline:2px solid #A9C2F0;outline-offset:2px;}
  .sh-cancel{
    width:100%;height:42px;margin-top:8px;border:0;border-radius:12px;
    background:transparent;cursor:pointer;font-family:inherit;
    font-size:13px;color:#93A1B5;
  }
  .sh-cancel:focus{outline:none;}
  .sh-cancel:focus-visible{outline:2px solid #A9C2F0;outline-offset:2px;}
  .sh-ghost[hidden]{display:none;}
  .wx-title{
    margin:0;font-size:16.5px;font-weight:700;color:#0B1526;
    letter-spacing:.01em;
  }
  .wx-sub{
    margin:8px 0 0;font-size:12.5px;line-height:1.65;color:#7A8AA0;
  }
  .wx-qr{
    width:145px;height:145px;margin:13px auto 11px;
    padding:7px;border-radius:12px;
    background:#fff;border:1px solid #E6ECF6;
    display:grid;place-items:center;
    box-shadow:0 9px 24px -14px rgba(20,40,80,.35);
  }
  .wx-qr img{display:block;width:100%;height:100%;object-fit:contain;border-radius:8px;}
  .wx-qr img[hidden]{display:none;}
  .wx-qr-ph[hidden]{display:none;}
  .wx-qr-ph{
    width:100%;height:100%;border-radius:8px;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
    background:#FAFBFE;
    border:1px dashed #D5DEEC;
    color:#9AA8BD;font-size:11px;line-height:1.3;
  }
  .wx-id{
    display:flex;align-items:center;justify-content:center;gap:8px;
    margin-top:0;padding:9px 11px;width:100%;
    background:#F5F8FD;border:1px solid #E9EFF8;border-radius:10px;
  }
  .wx-id-label{font-size:11.5px;color:#8A99AE;white-space:nowrap;flex:none;}
  .wx-id-num{
    font-family:"Inter",-apple-system,"Segoe UI",sans-serif;
    font-size:13px;font-weight:600;color:#0B1526;letter-spacing:.06em;
    white-space:nowrap;
  }
  .wx-copy{
    margin-left:2px;padding:3px 10px;border-radius:7px;flex:none;
    border:1px solid #D8E3F7;background:#fff;cursor:pointer;
    white-space:nowrap;
    font-size:12px;color:var(--brand);font-family:inherit;
    transition:background .16s ease,border-color .16s ease;
  }
  .wx-copy:hover{background:#EDF3FF;border-color:#B9CDF3;}
  @media (max-width:520px){
    .wx-card{width:100%;padding:16px;gap:12px;}
    .wx-photo{width:132px;}
    .wx-body{flex:1;min-width:0;width:auto;}
    .wx-qr{width:120px;height:120px;margin:10px auto 9px;}
    .wx-title{font-size:14.5px;}
    .wx-sub{font-size:11px;margin-top:5px;}
    /* 窄屏让「微信号/号码/复制」允许折行，否则 nowrap 会撑破卡片 */
    .wx-id{padding:7px 8px;gap:6px;flex-wrap:wrap;}
    .wx-id-label{font-size:10.5px;}
    .wx-id-num{font-size:11.5px;}
    .wx-copy{font-size:11px;padding:2px 8px;}
  }
  @media (max-width:380px){
    .wx-photo{display:none;}
  }


.sub-hero{padding:44px 0 6px;}
.crumb{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted);margin-bottom:16px;}
.crumb a{color:var(--muted);text-decoration:none;}
.crumb a:hover{color:var(--brand);}
.crumb i{font-style:normal;color:#C3CEE0;}
.sub-hero h1{margin:0 0 12px;font-size:33px;line-height:1.2;letter-spacing:-.6px;color:var(--ink);
  font-weight:700;text-align:left;}
.sub-hero .lead{margin:0;font-size:14.5px;line-height:1.75;color:var(--body);max-width:760px;text-align:left;}
.sub-hero .lead b{color:var(--brand);font-weight:600;}
.sec{padding:26px 0 10px;}
.sec-hd{display:flex;align-items:flex-end;gap:12px;margin:0 0 16px;}
.sec-hd h2{margin:0;font-size:17px;letter-spacing:-.2px;color:var(--ink);font-weight:650;}
.sec-hd span{font-size:12.5px;color:var(--muted);padding-bottom:2px;}
.tag{display:inline-flex;align-items:center;height:20px;padding:0 7px;border-radius:6px;font-size:11px;font-weight:500;letter-spacing:.1px;}
.tag.on{background:#E8F7EE;color:#177C46;}
.tag.ord{background:#FFF4E5;color:#9A5B00;}
.tag.blue{background:var(--brand-soft);color:var(--brand-deep);}
.tag.gray{background:#F0F3F9;color:#6C7C93;}
/* 首页给 svg 设了块级显示，非 flex 容器里图标会独占一行，这里统一兜住 */
.a-bar{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);
  border-radius:12px;padding:13px 18px;margin:14px 0 0;font-size:12.5px;color:var(--body);}
.a-bar .ic{color:var(--brand);flex:none;display:flex;align-items:center;}
.sec .chips{justify-content:flex-start;}

.b-switch{display:flex;gap:0;background:#EDF1F9;border-radius:14px;padding:5px;width:fit-content;margin:24px 0 6px;}
.b-switch button{appearance:none;border:0;background:transparent;font:inherit;font-size:14px;font-weight:600;
  color:#65758F;padding:11px 34px;border-radius:10px;cursor:pointer;display:flex;align-items:center;gap:8px;}
.b-switch button.on{background:#fff;color:var(--brand);box-shadow:0 2px 8px -2px rgba(23,41,77,.16);}
.b-switch button[disabled]{cursor:default;}
.b-note{font-size:12.5px;color:var(--muted);margin:12px 0 0;display:flex;align-items:center;gap:7px;}
.b-note b{color:var(--body);font-weight:600;}
.b-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:6px;}
/* v124 耗材卡与页面底色（#F6F8FC）区分度太低：边框淡到近乎隐形 + 阴影加厚让卡片浮起来。
   注意只作用于 .b-card，--shadow-card 变量保持原值，避免连累首页软件卡（.card / .ask）。 */
.b-card{background:#fff;border:1px solid #F0F4FB;border-radius:16px;padding:24px;display:flex;gap:16px;
  box-shadow:0 4px 12px -5px rgba(23,41,77,.14), 0 1px 3px rgba(23,41,77,.05);}
.b-card .ico{width:44px;height:44px;border-radius:12px;background:var(--brand-soft);color:var(--brand);
  display:grid;place-items:center;flex:none;}
.b-card .tx{flex:1;min-width:0;}
.b-card h3{margin:0 0 7px;font-size:15.5px;color:var(--ink);font-weight:650;letter-spacing:-.2px;}
.b-card p{margin:0;font-size:12.5px;line-height:1.7;color:var(--body);}
.b-card .tags{display:flex;gap:6px;margin-top:11px;flex-wrap:wrap;}
.b-hero-split{display:grid;grid-template-columns:1fr 300px;gap:32px;align-items:end;}
.b-side{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px 20px;box-shadow:var(--shadow-card);}
.b-side .row{display:flex;justify-content:space-between;align-items:center;padding:9px 0;font-size:12.5px;
  border-bottom:1px solid var(--line);}
.b-side .row:last-child{border-bottom:0;padding-bottom:0;}
.b-side .row .l{color:var(--muted);}
.b-side .row .r{color:var(--ink);font-weight:600;}
.b-cta{display:flex;align-items:center;justify-content:space-between;gap:20px;background:linear-gradient(96deg,#1F6BEE,#2E7DFF 55%,#4A8CFF);
  border-radius:16px;padding:22px 26px;margin-top:18px;color:#fff;}
.b-cta .t{font-size:16px;font-weight:650;letter-spacing:-.2px;}
.b-cta .d{font-size:12.5px;color:rgba(255,255,255,.82);margin-top:5px;}
.b-cta .btn{background:#fff;color:var(--brand-deep);font-size:13px;font-weight:650;padding:10px 20px;
  border-radius:10px;text-decoration:none;flex:none;}

.b-grid.three{grid-template-columns:repeat(3,1fr);gap:13px;}
.b-grid.three .b-card{padding:19px 20px;gap:14px;}
.b-grid.three .b-card .ico{width:40px;height:40px;border-radius:11px;}
.b-grid.three .b-card h3{font-size:14.5px;margin-bottom:5px;}
.b-grid.three .b-card p{font-size:12px;line-height:1.6;}
/* 阶梯价（v112 · 方案 B2）：三个胶囊 → 一条单行分段刻度。
   一整条浅底框里分三段，段间竖线，当前档实心蓝。
   高度 30px（原三个胶囊 45px 的两行版本太高，卡片会被撑高 22px）。
   「满 5支」的文案由 JS 给（见 shop.html supplyCard），这里只管形。 */
.tiers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin-top:10px;
  border:1px solid #E3EAF6;border-radius:9px;overflow:hidden;background:#F8FAFE;}
.tiers .t{display:flex;align-items:baseline;justify-content:center;gap:5px;
  font-size:11.5px;color:#5B6B85;background:transparent;
  border:0;border-right:1px solid #E3EAF6;border-radius:0;
  padding:7px 4px;white-space:nowrap;font-family:inherit;line-height:1.3;}
.tiers .t:last-child{border-right:0;}
.tiers .t b{font-size:10px;color:#8B99B0;font-weight:500;letter-spacing:.2px;}
/* 可点的档位（拆机件那种单档仍是 span，不给手型，避免误以为能点） */
.tiers button.t{appearance:none;cursor:pointer;
  transition:background .14s,color .14s;}
.tiers button.t:hover{background:#EFF4FE;}
.tiers button.t:focus-visible{outline:2px solid var(--brand);outline-offset:-2px;}
/* 选中档：实心品牌蓝白字。手机没有 hover，只有选中态够明显，用户才知道这里能点 */
.tiers button.t.on{background:var(--brand);color:#fff;box-shadow:none;}
.tiers button.t.on b{color:rgba(255,255,255,.78);font-weight:500;}
/* 单档商品（拆机件）没有档可刻：整条只放一个价，别留 2/3 空白 */
.tiers.single{grid-template-columns:1fr;}
.tiers.single .t.on{background:transparent;color:#5B6B85;}
.tiers.single .t.on b{color:#8B99B0;}
/* 数量步进器 */
.buy{display:flex;align-items:center;gap:9px;margin-top:11px;flex-wrap:wrap;}
.qty{display:flex;align-items:center;border:1px solid #DCE4F2;border-radius:9px;overflow:hidden;
  background:#fff;height:30px;}
.qty button{appearance:none;border:0;background:#F5F8FD;color:#4A5C78;width:28px;height:100%;
  font-size:15px;line-height:1;cursor:pointer;padding:0;}
.qty span{min-width:38px;text-align:center;font-size:13px;font-weight:650;color:var(--ink);
  font-variant-numeric:tabular-nums;}
/* 卡片金额：从 12.5px 放到 18px（用户 2026-11-02 定档），
   客户扫一眼就知道这一项多少钱，不用凑近看。
   line-height:1 压掉行高，避免放大字把整行撑高、卡片高度变化。 */
.buy .sub{font-size:18px;line-height:1;font-weight:750;color:var(--brand);margin-left:auto;
  letter-spacing:-.3px;font-variant-numeric:tabular-nums;display:flex;align-items:baseline;}
/* 「小计」两个字：不写的话客户得猜这个数是单价还是总价 */
.buy .sub::before{content:"小计";font-size:11px;font-weight:500;color:#8B99B0;
  margin-right:6px;letter-spacing:0;}
.buy .ask{font-size:12px;color:var(--muted);margin-left:auto;}
.stock{font-size:11px;color:#0F8A5F;}
.stock.no{color:#B4791A;}
.stock.up{font-size:11px;color:var(--brand);}
/* 底部悬浮结算条 */
.cartbar{position:fixed;left:0;right:0;bottom:0;z-index:50;background:rgba(255,255,255,.96);
  backdrop-filter:blur(10px);border-top:1px solid #E3EAF6;box-shadow:0 -8px 24px -18px rgba(9,18,33,.4);}
.cartbar .in{max-width:1440px;margin:0 auto;padding:0 80px;height:68px;display:flex;
  align-items:center;gap:18px;}
.cartbar .ic{width:34px;height:34px;border-radius:10px;background:var(--brand-soft);color:var(--brand);
  display:grid;place-items:center;flex:none;}
.cartbar .cnt{font-size:13px;color:var(--body);}
.cartbar .cnt b{color:var(--ink);font-weight:700;}
.cartbar .amt{margin-left:auto;font-size:13px;color:var(--muted);text-align:right;}
.cartbar .amt b{font-size:20px;color:var(--ink);font-weight:750;letter-spacing:-.4px;
  font-variant-numeric:tabular-nums;margin-left:6px;}
.cartbar .go{background:var(--brand);color:#fff;font-size:14px;font-weight:650;padding:11px 26px;
  border-radius:11px;text-decoration:none;flex:none;}
body.pad{padding-bottom:88px;}

/* ---------- 结算页 ---------- */
.ck-wrap{display:grid;grid-template-columns:1fr 384px;gap:24px;align-items:start;margin-top:6px;}
.panel{background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-card);}
.panel .hd{padding:18px 22px;border-bottom:1px solid var(--line);display:flex;align-items:center;
  justify-content:space-between;}
.panel .hd .t{font-size:14.5px;font-weight:700;color:var(--ink);}
.panel .hd .s{font-size:12px;color:var(--muted);}
.panel .bd{padding:20px 22px;}
.fld{margin-bottom:16px;}
.fld:last-child{margin-bottom:0;}
.fld label{display:block;font-size:12.5px;color:#4A5C78;margin-bottom:7px;}
.fld label i{color:#D9333F;font-style:normal;margin-left:2px;}
.fld input,.fld textarea{width:100%;box-sizing:border-box;font:inherit;font-size:13px;
  border:1px solid #DCE4F2;border-radius:10px;padding:11px 13px;color:var(--ink);background:#fff;
  outline:none;}
.fld input:focus,.fld textarea:focus{border-color:#9DBBF7;box-shadow:0 0 0 3px rgba(46,125,255,.1);}
.fld textarea{min-height:70px;resize:vertical;line-height:1.6;}
.fld .hint{font-size:11.5px;color:var(--muted);margin-top:6px;}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.guest-tip{display:flex;align-items:center;gap:10px;background:#F7FAFF;border:1px solid #DCE8FB;
  border-radius:12px;padding:12px 15px;font-size:12.5px;color:#33507A;margin-bottom:18px;}
.guest-tip b{color:var(--brand-deep);}
/* 订单摘要 */
.sum-row{display:flex;align-items:center;gap:10px;padding:11px 0;border-bottom:1px dashed #E8EEF8;}
.sum-row .nm{font-size:12.5px;color:var(--ink);flex:1;min-width:0;}
.sum-row .nm small{display:block;font-size:11px;color:var(--muted);margin-top:2px;}
.sum-row .q{font-size:12px;color:var(--muted);}
/* 明细金额：12.5 → 16px（用户 2026-11-02 在四档里定的 B 档）。
   比商品名（12.5px）明显，但还没大到盖过商品名的程度。 */
.sum-row .p{font-size:16px;font-weight:700;color:var(--ink);min-width:70px;text-align:right;
  font-variant-numeric:tabular-nums;letter-spacing:-.2px;}
.total-line{display:flex;justify-content:space-between;font-size:12.5px;color:var(--body);
  padding:8px 0;}
.total-line b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums;}
.pay-line{display:flex;align-items:baseline;justify-content:space-between;margin-top:12px;
  padding-top:14px;border-top:1px solid var(--line);}
.pay-line .k{font-size:13px;color:#4A5C78;}
.pay-line .v{font-size:24px;font-weight:750;color:#D92D20;letter-spacing:-.6px;
  font-variant-numeric:tabular-nums;}
.submit{display:block;width:100%;box-sizing:border-box;text-align:center;margin-top:16px;
  background:var(--brand);color:#fff;font-size:14.5px;font-weight:700;padding:13px;border-radius:12px;
  text-decoration:none;}
.submit-note{font-size:11.5px;color:var(--muted);text-align:center;margin-top:10px;line-height:1.6;}

/* ---------- 付款页 ---------- */
.pay-card{max-width:560px;margin:34px auto 60px;background:#fff;border:1px solid var(--line);
  border-radius:20px;box-shadow:0 26px 56px -28px rgba(9,18,33,.36);overflow:hidden;}
.pay-card .top{background:linear-gradient(160deg,#F2F7FF,#fff);padding:26px 30px 22px;
  border-bottom:1px solid var(--line);text-align:left;}
.pay-card .ok-badge{display:inline-flex;align-items:center;gap:7px;background:#ECFDF5;
  border:1px solid #A7F3D0;color:#047857;font-size:12px;font-weight:650;padding:6px 12px;
  border-radius:999px;margin-bottom:14px;}
.pay-card .ono{font-size:12.5px;color:var(--muted);}
.pay-card .ono b{color:var(--ink);font-weight:650;font-family:ui-monospace,Menlo,monospace;
  letter-spacing:.4px;}
.pay-card .amt{margin-top:10px;font-size:30px;font-weight:750;color:#D92D20;letter-spacing:-.8px;
  font-variant-numeric:tabular-nums;}
.pay-card .amt small{font-size:13px;color:var(--muted);font-weight:500;margin-left:8px;
  letter-spacing:0;}
.pay-body{padding:24px 30px 28px;}
.pay-sec-t{display:flex;align-items:baseline;gap:9px;font-size:13px;font-weight:700;
  color:var(--ink);margin-bottom:11px;}
.pay-sec-t span{font-size:11.5px;font-weight:400;color:var(--muted);}
.qr-box{display:flex;gap:20px;align-items:center;background:#FAFCFF;border:1px solid #E6EDF9;
  border-radius:14px;padding:16px;}
.qr-img{width:124px;height:124px;border-radius:10px;background:#fff;border:1px dashed #C9D7EC;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  color:#9AAAC2;flex:none;}
.qr-img .qr-cap{font-size:10px;line-height:1.35;text-align:center;color:#B3C0D4;}
.qr-tx .h{font-size:13.5px;font-weight:700;color:var(--ink);}
.qr-tx ol{margin:9px 0 0;padding-left:17px;font-size:12px;color:var(--body);line-height:1.85;}
.qr-tx ol b{color:#D92D20;}
.ono-copy{margin-top:10px;display:inline-block;font-family:ui-monospace,Menlo,monospace;
  font-size:12px;letter-spacing:.5px;color:var(--brand-deep);background:#EAF1FE;
  border:1px solid #C6D8FB;border-radius:7px;padding:5px 10px;}
.bank{background:#FAFCFF;border:1px solid #E6EDF9;border-radius:14px;padding:6px 16px;}
.bank .br{display:flex;gap:14px;padding:9px 0;font-size:12.5px;border-bottom:1px dashed #E3EBF7;}
.bank .br:last-child{border-bottom:0;}
.bank .k{color:var(--muted);width:62px;flex:none;}
.bank .v{color:var(--ink);font-weight:600;}
.bank .v.muted{color:#B4791A;font-weight:500;}
.pay-btn{display:block;text-align:center;margin-top:18px;background:var(--brand);color:#fff;
  font-size:14.5px;font-weight:700;padding:13px;border-radius:12px;text-decoration:none;}
.pay-alt{display:flex;gap:10px;margin-top:10px;}
.pay-alt a{flex:1;text-align:center;font-size:12.5px;color:#4A5C78;border:1px solid #DCE4F2;
  border-radius:10px;padding:10px;text-decoration:none;background:#fff;}

/* ---- 结算页 / 付款页 / 服务卡补充 ---- */
:root{--brand:#2E7DFF;
    --brand-deep:#1F6BEE;
    --brand-soft:#EAF1FF;
    --ink:#0E1A2E;
    --body:#5A6B85;
    --muted:#8A99AE;
    --faint:#94A3B8;
    --line:#E9EEF7;
    --line-2:#E2E9F5;
    --page:#F6F8FC;
    --white:#fff;
    --shadow-card:0 1px 2px rgba(23,41,77,.04);
    --shadow-card-hover:0 10px 22px -14px rgba(23,41,77,.20), 0 1px 3px rgba(23,41,77,.04);
    --wrap:1280px;
    --gap:14px;}
/* ---------- 通用面板 ---------- */
.ck-wrap{display:grid;grid-template-columns:1fr 392px;gap:24px;align-items:start;margin-top:6px;}
.panel:last-child{margin-bottom:0;}
.panel .hd .t svg{color:var(--brand);flex:none;}
/* ---------- 表单 ---------- */
.fld{margin-bottom:15px;}
/* 物流说明条 */
.ship-bar{display:flex;align-items:center;gap:10px;background:#F7FAFF;
  border:1px solid #DCE8FB;border-radius:12px;padding:12px 15px;font-size:12.5px;
  color:#33507A;line-height:1.6;}
.ship-bar svg{color:var(--brand);flex:none;}
.ship-bar b{color:var(--brand-deep);font-weight:650;}
/* ---------- 发票开关（本次核心） ---------- */
.inv-opts{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.inv-opt{position:relative;border:1.5px solid #DCE4F2;border-radius:12px;
  padding:13px 15px 13px 40px;background:#fff;cursor:pointer;}
.inv-opt .rd{position:absolute;left:14px;top:15px;width:15px;height:15px;border-radius:50%;
  border:1.5px solid #C6D2E4;background:#fff;box-sizing:border-box;}
.inv-opt.on{border-color:var(--brand);background:#F7FAFF;
  box-shadow:0 0 0 3px rgba(46,125,255,.07);}
.inv-opt.on .rd{border-color:var(--brand);
  background:radial-gradient(circle,var(--brand) 0 4px,#fff 4.5px);}
.inv-opt .n{font-size:13.5px;font-weight:650;color:var(--ink);}
.inv-opt .d{font-size:11.5px;color:var(--muted);margin-top:4px;line-height:1.5;}
.inv-opt.off .n{color:#8A99AF;}
/* 展开的开票表单 */
.inv-form{margin-top:15px;padding-top:16px;border-top:1px dashed #E3EBF7;}
.inv-form[hidden]{display:none;}
.seg{display:flex;gap:8px;margin-bottom:15px;}
.seg .g{flex:1;text-align:center;font-size:12.5px;padding:9px;border:1px solid #DCE4F2;
  border-radius:10px;color:#5B6B85;background:#fff;}
.seg .g.on{border-color:var(--brand);background:#EAF1FE;color:var(--brand-deep);
  font-weight:650;}
/* 不开票时的替代提示 */
.inv-off-tip{display:flex;align-items:center;gap:10px;background:#FFFBEB;
  border:1px solid #FDE9B8;border-radius:12px;padding:12px 15px;font-size:12.5px;
  color:#8A5A00;line-height:1.6;margin-top:14px;}
.inv-off-tip b{color:#7A4E00;}
/* ---------- 订单摘要 ---------- */
.sum-row{display:flex;align-items:center;gap:10px;padding:11px 0;
  border-bottom:1px dashed #E8EEF8;}
.total-line .free{color:#0F8A5F;font-weight:650;}
/* 支付方式预览条 */
.pm-box{margin-top:14px;border:1px solid #E6EDF9;background:#FAFCFF;border-radius:12px;
  padding:12px 14px;}
.pm-box .h{font-size:11.5px;color:var(--muted);margin-bottom:9px;}
.pm-box .r{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink);
  padding:4px 0;}
.pm-box .r .dot{width:5px;height:5px;border-radius:50%;background:var(--brand);flex:none;}
.pm-box .r.mute{color:#8A99AF;}
.pm-box .r.mute .dot{background:#C9D3E2;}
.pm-box .r b{font-weight:650;}
.pay-card.narrow{max-width:504px;}
/* 顶部发票状态角标 */
.inv-badge{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;
  padding:5px 10px;border-radius:7px;margin-top:12px;line-height:1.4;}
.inv-badge.yes{background:#EAF1FE;border:1px solid #C6D8FB;color:#1E4FA8;}
.inv-badge.no{background:#F4F6FA;border:1px solid #E2E8F2;color:#5B6B85;}
.inv-co{font-size:11.5px;color:var(--muted);margin-top:7px;line-height:1.5;}
/* 二维码卡 */
.qr-box{display:flex;gap:18px;align-items:center;background:#FAFCFF;
  border:1px solid #E6EDF9;border-radius:14px;padding:15px;}
.qr-photo{width:200px;height:200px;flex:none;border-radius:11px;background:#fff;
  border:1px solid #E6EDF9;padding:7px;box-sizing:border-box;display:flex;
  align-items:center;justify-content:center;}
.qr-photo img{max-width:100%;max-height:100%;display:block;}
.qr-photo.tall{height:262px;width:226px;}
/* 窄卡里改用竖排：码居中、说明在下，不挤文字 */
.qr-box.col{flex-direction:column;align-items:center;gap:16px;padding:20px;}
.qr-box.col .qr-tx{width:100%;text-align:center;}
.qr-box.col .qr-tx ol{display:inline-block;text-align:left;margin-left:0;}
.qr-tx .h em{font-style:normal;color:#D92D20;}
/* 对公账户表 */
.bank{background:#FAFCFF;border:1px solid #E6EDF9;border-radius:14px;padding:4px 16px;}
.bank .v.txt{font-family:inherit;letter-spacing:0;}
.bank .v.hl{color:#D92D20;}
.pay-foot{font-size:11.5px;color:var(--muted);text-align:center;margin-top:14px;
  line-height:1.7;}
.pay-foot a{color:var(--brand);text-decoration:none;font-weight:600;}
/* ---------- 承诺横幅 ---------- */
.promise{display:flex;align-items:center;gap:13px;background:#ECFDF5;
  border:1px solid #A7F3D0;border-radius:13px;padding:15px 18px;margin-top:18px;}
.promise .ic{width:36px;height:36px;border-radius:10px;background:#fff;color:#047857;
  display:grid;place-items:center;flex:none;border:1px solid #A7F3D0;}
.promise .t{font-size:13.5px;font-weight:700;color:#047857;}
.promise .d{font-size:12px;color:#2F6B57;margin-top:3px;line-height:1.55;}
/* ---------- 服务列表 ---------- */
.svc-group{margin-bottom:30px;}
.svc-group:last-child{margin-bottom:0;}
.grp-hd{display:flex;align-items:center;gap:11px;margin-bottom:14px;}
.grp-hd .ic{width:32px;height:32px;border-radius:9px;background:var(--brand-soft);
  color:var(--brand);display:grid;place-items:center;flex:none;}
.grp-hd .t{font-size:15px;font-weight:700;color:var(--ink);}
.grp-hd .d{font-size:12px;color:var(--muted);margin-left:auto;text-align:right;
  line-height:1.5;}
.svc-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:13px;}
.svc{grid-column:span 2;background:#fff;border:1px solid var(--line);border-radius:14px;
  padding:17px 19px;box-shadow:var(--shadow-card);display:flex;flex-direction:column;}
.svc.wide{grid-column:span 3;}
.svc .top{display:flex;align-items:flex-start;gap:11px;}
.svc .ico{width:36px;height:36px;border-radius:10px;background:#F2F5FB;color:#4A5C78;
  display:grid;place-items:center;flex:none;}
.svc.remote .ico{background:var(--brand-soft);color:var(--brand);}
.svc h3{font-size:13.5px;font-weight:650;color:var(--ink);margin:0 0 4px;
  line-height:1.45;}
.svc p{font-size:11.5px;color:var(--muted);line-height:1.6;margin:0;}
.svc .foot{display:flex;align-items:center;gap:9px;margin-top:auto;padding-top:13px;
  border-top:1px dashed #E8EEF8;flex-wrap:wrap;}
.svc .price{font-size:18px;font-weight:750;color:var(--ink);letter-spacing:-.3px;
  font-variant-numeric:tabular-nums;}
.svc .price small{font-size:11px;font-weight:400;color:var(--muted);margin-left:3px;
  letter-spacing:0;}
.svc .btn{margin-left:auto;font-size:12px;font-weight:650;color:var(--brand);
  border:1px solid #C6D8FB;background:#F7FAFF;border-radius:8px;padding:6px 13px;
  text-decoration:none;white-space:nowrap;}
.svc .tag-note{width:100%;font-size:10.5px;color:#0F8A5F;display:flex;align-items:center;
  gap:4px;margin-bottom:8px;}
.svc .tag-note.amber{color:#B4791A;}
/* 寄修大卡收件信息 */
.addr-card{background:linear-gradient(160deg,#F2F7FF,#fff);border:1px solid #DCE8FB;
  border-radius:14px;padding:18px 20px;margin-bottom:18px;}
.addr-card .lb{font-size:11.5px;color:var(--muted);margin-bottom:9px;
  display:flex;align-items:center;gap:6px;}
.addr-card .ad{font-size:14px;color:var(--ink);font-weight:650;line-height:1.65;}
.addr-card .pp{font-size:13px;color:#4A5C78;margin-top:7px;}
.addr-card .pp b{color:var(--ink);font-weight:650;}
.addr-card .pp span{margin-left:16px;font-family:ui-monospace,Menlo,monospace;
  letter-spacing:.3px;color:var(--brand-deep);font-weight:650;}
.copy-btn{display:inline-flex;align-items:center;gap:6px;margin-top:12px;font-size:12px;
  color:var(--brand);border:1px solid #C6D8FB;background:#fff;border-radius:8px;
  padding:6px 12px;text-decoration:none;}
/* 单选组 */
.radios{display:grid;gap:9px;}
.radio{display:flex;align-items:flex-start;gap:11px;border:1.5px solid #DCE4F2;
  border-radius:11px;padding:12px 14px;background:#fff;}
.radio.on{border-color:var(--brand);background:#F7FAFF;
  box-shadow:0 0 0 3px rgba(46,125,255,.07);}
.radio .rd{width:15px;height:15px;border-radius:50%;border:1.5px solid #C6D2E4;
  background:#fff;flex:none;margin-top:2px;box-sizing:border-box;}
.radio.on .rd{border-color:var(--brand);
  background:radial-gradient(circle,var(--brand) 0 4px,#fff 4.5px);}
.radio .tx{flex:1;min-width:0;}
.radio .n{font-size:12.5px;font-weight:650;color:var(--ink);line-height:1.45;}
.radio .d{font-size:11.5px;color:var(--muted);margin-top:3px;line-height:1.55;}
.radio .p{font-size:14px;font-weight:750;color:var(--brand);flex:none;
  font-variant-numeric:tabular-nums;white-space:nowrap;}
.radio .p small{font-size:10.5px;font-weight:400;color:var(--muted);margin-left:2px;}
/* 流程条 */
.flow{display:flex;align-items:center;gap:0;margin:20px 0 4px;flex-wrap:wrap;}
.flow .st{display:flex;align-items:center;gap:8px;font-size:12px;color:#8A99AF;}
.flow .st.on{color:var(--ink);font-weight:650;}
.flow .dot{width:22px;height:22px;border-radius:50%;background:#EDF1F8;color:#8A99AF;
  display:grid;place-items:center;font-size:11px;font-weight:700;flex:none;}
.flow .st.on .dot{background:var(--brand);color:#fff;}
.flow .ar{width:26px;height:1px;background:#DCE4F2;margin:0 9px;flex:none;}
/* 提交成功 */
.done-hero{text-align:center;padding:8px 0 4px;}
.done-ok{width:52px;height:52px;border-radius:50%;background:#ECFDF5;
  border:1px solid #A7F3D0;color:#047857;display:grid;place-items:center;margin:0 auto 14px;}
.done-hero h2{font-size:19px;font-weight:750;color:var(--ink);margin:0 0 8px;}
.done-hero p{font-size:12.5px;color:var(--muted);line-height:1.7;margin:0;
  text-align:center;}
.note-list{margin-top:16px;padding:15px 17px;background:#FFFBEB;border:1px solid #FDE9B8;
  border-radius:12px;font-size:12px;color:#8A5A00;line-height:1.85;}
.note-list b{color:#7A4E00;}