/* ==========================================================================
   SSL 官网统一视觉层（design tokens + 统一组件 + 动效）
   加载顺序：layout 内联样式 → 各页面 style → 本文件，因此本文件可安全覆盖
   ========================================================================== */

/* ---------- 1. 设计令牌 ---------- */
:root{
  --brand:#1d7ef5; --brand-d:#1268db; --brand-l:#f0f6ff;
  --ink:#0f172a; --ink-2:#3d4451; --ink-3:#7b8798;
  --line:#e9eef6; --line-2:#f1f5fb; --bg:#f7f9fc;
  --r-xs:6px; --r-s:8px; --r-m:12px; --r-l:16px;
  --sh-1:0 1px 2px rgba(15,23,42,.04), 0 6px 18px -14px rgba(15,23,42,.18);
  --sh-2:0 12px 30px -22px rgba(20,40,90,.42);
  --sh-3:0 26px 54px -34px rgba(12,42,92,.55);
  --sec-y:68px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

html{scroll-behavior:smooth}
body{-webkit-text-size-adjust:100%}
::selection{background:rgba(29,126,245,.16);color:#0b1220}

/* 滚动条（桌面） */
@media(min-width:1024px){
  html{scrollbar-width:thin;scrollbar-color:#c9d6e8 transparent}
  ::-webkit-scrollbar{width:9px;height:9px}
  ::-webkit-scrollbar-track{background:transparent}
  ::-webkit-scrollbar-thumb{background:#cbd8ea;border-radius:8px;border:2px solid #fff}
  ::-webkit-scrollbar-thumb:hover{background:#aebfd6}
}

/* ---------- 2. 统一圆角 / 阴影 ---------- */
.card,.pc,.art-item,.tb-wrap,.buyer,.scard,.qy-panel,.qy-card,.qy-empty,.qy-tips,
.pg-qb,.art-wrap,.hc-box,.auth,.pg-cta{border-radius:var(--r-m)!important}
.pg-cta,.auth,.buyer,.qy-panel,.scard,.art-wrap{border-radius:var(--r-l)!important}
.btn,.input,select,textarea,.qy-field,.qy-go,.btn-buy,.sbtn,.hp-btn,.hp-more a,
.qy-chips button,.order-price label,.pay-list label,.pg-side .side-list a,
.detail-nav a,.hc-chip,.hc-pager a,.hc-pager span,.pager a,.pager span{border-radius:var(--r-s)!important}
.tag,.pill{border-radius:var(--r-xs)!important}
.card,.pc{box-shadow:var(--sh-1)}
.pc{box-shadow:var(--sh-2)}
.qy-panel,.buyer,.qy-card,.art-wrap{box-shadow:var(--sh-3)}

/* ---------- 3. 统一区块节奏 ---------- */
section{padding:var(--sec-y) 0}
.hp-sec{padding:var(--sec-y) 0}
.pg-sec{padding:var(--sec-y) 0}
.pg-sec[style*="padding-top"]{padding-top:34px!important}
.hp-deal{padding:var(--sec-y) 0}
.hp-cols{padding:var(--sec-y) 0}
.qy-body{padding:0 0 var(--sec-y)}
.hc-body{padding:30px 0 var(--sec-y)}
@media(max-width:900px){
  :root{--sec-y:44px}
  .hp-sec,.pg-sec,.hp-deal,.hp-cols,section{padding:var(--sec-y) 0}
}

/* ---------- 4. 统一页头（pg-hero / qy-hero / hc-hero） ---------- */
.pg-hero,.qy-hero,.hc-hero{
  position:relative;overflow:hidden;padding:0;
  background:linear-gradient(118deg,#f1f7ff 0%,#fbfdff 52%,#eaf3ff 100%);
  border-bottom:1px solid #e9f0fa
}
.pg-hero:before,.qy-hero:before,.hc-hero:before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.85;
  background-image:
    repeating-linear-gradient(116deg,rgba(255,255,255,.9) 0 3px,rgba(255,255,255,0) 3px 108px),
    repeating-linear-gradient(116deg,rgba(23,105,255,.04) 0 1px,rgba(23,105,255,0) 1px 108px)
}
.pg-hero:after{
  content:"";position:absolute;left:auto;top:auto;border-radius:0;
  right:max(20px,calc(50% - 600px));bottom:8px;
  width:214px;height:160px;pointer-events:none;opacity:1;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 160' fill='none'%3E%3Ccircle cx='152' cy='66' r='44' stroke='%239dbfe9' stroke-width='2'/%3E%3Cellipse cx='152' cy='66' rx='19' ry='44' stroke='%239dbfe9' stroke-width='2'/%3E%3Cpath d='M108 66h88' stroke='%239dbfe9' stroke-width='2'/%3E%3Ccircle cx='152' cy='66' r='3.4' fill='%231d7ef5' fill-opacity='.55'/%3E%3Cpath d='M52 34l30 11v26c0 21-14 31-30 37-16-6-30-16-30-37V45l30-11z' fill='%23fff' stroke='%239dbfe9' stroke-width='2.6'/%3E%3Cpath d='M38 62l9 9 17-18' stroke='%231d7ef5' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain
}
.pg-hero-in{position:relative;z-index:2;padding:34px 0 44px}
.pg-hero.pg-hero-tight:after{display:none}
.qy-hero-in{position:relative;z-index:2;padding:34px 0 60px}
.hc-hero-in{position:relative;z-index:2;padding:34px 0 40px}
.hc-hero:after{
  content:"";position:absolute;right:max(20px,calc(50% - 600px));top:50%;transform:translateY(-50%);
  width:164px;height:164px;pointer-events:none;opacity:.55;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120' fill='none' stroke='%239dbfe9' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M28 16h44l20 20v68H28z'/%3E%3Cpath d='M72 16v20h20M42 58h36M42 74h36M42 90h24'/%3E%3C/svg%3E") no-repeat center/contain
}
@media(max-width:900px){.hc-hero:after{display:none}}
.bbar{border-radius:0 0 var(--r-l) var(--r-l)!important}
.pg-hero h1,.qy-hero h1,.hc-hero h1{
  margin:12px 0 0;font-size:32px;line-height:1.32;font-weight:800;
  color:#0f172a;letter-spacing:-.5px
}
.pg-crumb,.qy-crumb,.hc-crumb{font-size:12.6px;color:#93a0b5;letter-spacing:.2px}
.pg-crumb a,.qy-crumb a,.hc-crumb a{color:#93a0b5}
.pg-crumb a:hover,.qy-crumb a:hover,.hc-crumb a:hover{color:var(--brand)}
.pg-crumb i,.qy-crumb i,.hc-crumb i{font-style:normal;margin:0 6px;color:#c2cbd9}
.pg-hero p,.qy-hero p,.hc-hero p{margin:10px 0 0;font-size:14.4px;line-height:1.75;color:#71809a;letter-spacing:0}
@media(max-width:900px){
  .pg-hero-in,.qy-hero-in,.hc-hero-in{padding:24px 0 34px}
  .pg-hero h1,.qy-hero h1,.hc-hero h1{font-size:25px;letter-spacing:-.3px}
  .pg-hero p,.qy-hero p,.hc-hero p{font-size:13.4px}
  .pg-hero:after{display:none}
}

/* 区块标题统一 */
.hp-h h2,.pg-h h2{font-size:28px;font-weight:800;letter-spacing:.4px;color:#15171c}
.hp-h p,.pg-h p{margin-top:11px;font-size:14.5px;color:#8b92a3;letter-spacing:.2px}
@media(max-width:900px){
  .hp-h h2,.pg-h h2{font-size:22px}
  .hp-h p,.pg-h p{font-size:13.4px}
  .hp-h,.pg-h{margin-bottom:28px}
}

/* ---------- 5. 动效：滚动进度条 ---------- */
.fx-progress{
  position:fixed;left:0;top:0;height:2px;width:0;z-index:9999;pointer-events:none;
  background:linear-gradient(90deg,#1d7ef5,#4facfe 55%,#8b5cf6);
  box-shadow:0 0 12px rgba(29,126,245,.65);transition:width .12s linear
}

/* ---------- 6. 动效：头部 / 导航 ---------- */
.hd{transition:box-shadow .28s var(--ease),background .28s var(--ease)}
body.fx-scrolled .hd{box-shadow:0 12px 30px -24px rgba(15,23,42,.55);background:rgba(255,255,255,.96)}
.nav a:before{
  content:"";position:absolute;left:17px;right:17px;bottom:0;height:2px;
  background:var(--brand);border-radius:2px 2px 0 0;transform:scaleX(0);
  transform-origin:50% 50%;transition:transform .26s var(--ease);opacity:.85
}
.nav a:hover:before{transform:scaleX(1)}
.nav a.on:before{display:none}
.logo .mark{transition:transform .35s var(--ease)}
.logo:hover .mark{transform:rotate(-6deg) scale(1.04)}

/* ---------- 7. 动效：滚动进场 ---------- */
html.fx .fx-r{opacity:0;transform:translateY(18px)}
html.fx .fx-r.fx-in{
  opacity:1;transform:none;
  transition:opacity .66s var(--ease),transform .66s var(--ease)
}

/* ---------- 8. 动效：按钮光泽 ---------- */
.btn-p,.hp-btn-m,.qy-go,.btn-buy,.hp-pcard .buy,.scard .buy,.hc-cta a{
  position:relative;overflow:hidden
}
.btn-p:after,.hp-btn-m:after,.qy-go:after,.btn-buy:after,.hp-pcard .buy:after,.scard .buy:after{
  content:"";position:absolute;top:-30%;left:-140%;width:52%;height:160%;
  transform:skewX(-20deg);pointer-events:none;
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.34),rgba(255,255,255,0));
  transition:left .62s var(--ease)
}
.btn-p:hover:after,.hp-btn-m:hover:after,.qy-go:hover:after,
.btn-buy:hover:after,.hp-pcard .buy:hover:after,.scard .buy:hover:after{left:150%}

/* ---------- 9. 动效：首页首屏 ---------- */
.hp-hero:before{will-change:opacity}
@keyframes fxUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes fxFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes fxDrift{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(-16px,10px,0) scale(1.06)}
}
.hp-hero h1{animation:fxUp .72s .04s var(--ease) both}
.hp-hero .sub{animation:fxUp .72s .14s var(--ease) both}
.hp-pts{animation:fxUp .72s .22s var(--ease) both}
.hp-btns{animation:fxUp .72s .30s var(--ease) both}
.hp-art{animation:fxUp .86s .18s var(--ease) both}
.hp-art img{animation:fxFloat 7.5s ease-in-out .9s infinite}
.hp-hero:after{animation:fxDrift 16s ease-in-out infinite}
.hp-art{transition:transform .5s var(--ease);will-change:transform}

/* ---------- 10. 动效：卡片 ---------- */
.hp-pcard,.scard,.pc,.qy-tip,.pg-tip,.hc-item{transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease)}
.hp-pcard:hover{transform:translateY(-6px);box-shadow:0 26px 50px -26px rgba(20,40,90,.4)}
.hp-pcard .top{background-size:150% 150%!important;transition:background-position .6s var(--ease)}
.hp-pcard:hover .top{background-position:100% 50%}
.hp-pcard .body{position:relative}
.pc:hover{box-shadow:0 22px 46px -26px rgba(20,40,90,.4)}
.qy-tip{transition:background .25s}
.qy-tip:hover{background:#f7fbff}

/* 卡片 3D 倾斜（仅首页证书卡，JS 驱动） */
.hp-pcard{transform-style:preserve-3d}

/* ---------- 11. 动效：成交表 / 承诺条 ---------- */
.hp-deal-head{position:relative;overflow:hidden}
.hp-deal-head:after{
  content:"";position:absolute;top:0;left:-55%;width:38%;height:100%;
  background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.5),rgba(255,255,255,0));
  animation:fxSheen 5.4s ease-in-out infinite;pointer-events:none
}
@keyframes fxSheen{0%{left:-55%}55%{left:125%}100%{left:125%}}
.hp-deal-row{transition:background .22s}
.hp-deal-row:hover{background:#fffdf0!important}
.hp-deal-box{transition:box-shadow .3s var(--ease)}
.hp-deal-box:hover{box-shadow:0 20px 44px -30px rgba(0,0,0,.6)}
.hp-trust{position:relative;overflow:hidden;background-size:200% 100%;animation:fxTrust 12s linear infinite}
@keyframes fxTrust{0%{background-position:0 0}100%{background-position:200% 0}}
.hp-trust-item{transition:transform .25s var(--ease)}
.hp-trust-item:hover{transform:translateY(-2px)}
.hp-trust-item svg{transition:transform .4s var(--ease)}
.hp-trust-item:hover svg{transform:scale(1.12) rotate(-4deg)}

/* ---------- 12. 动效：列表 / 表格 ---------- */
.hp-col li a{transition:color .18s,padding-left .22s var(--ease)}
.hp-col li:hover a{padding-left:3px}
.hp-col li a i{transition:background .18s,transform .18s}
.hp-col li:hover a i{transform:scale(1.5)}
.tb tbody tr,.tb tr{transition:background .18s}
.tb tbody tr:hover,.tb tr:hover{background:#fafcff}
.article-body a{position:relative;transition:color .18s}
.article-body a:hover{color:var(--brand-d)}
.side-list a,.hc-link,.ft a{transition:color .18s,transform .2s var(--ease)}
.side-list a:hover{transform:translateX(3px)}
.ft a:hover{transform:translateX(3px)}

/* ---------- 13. 动效：表单 / 输入 ---------- */
.input,.qy-field,select,textarea{transition:border-color .2s,box-shadow .2s,background .2s}
.order-price label,.pay-list label,.chk,.vcard,.sbtn{transition:transform .2s var(--ease),border-color .2s,background .2s,box-shadow .2s}
.order-price label:hover,.pay-list label:hover{transform:translateY(-2px)}
.vcard:hover{transform:translateY(-2px)}

/* ---------- 14. 动效：右侧悬浮条 / 返回顶部 ---------- */
.hp-side{transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.hp-side:hover{transform:translateY(-50%) translateX(-3px);box-shadow:0 24px 52px -28px rgba(15,35,80,.6)}
.hp-side a{transition:background .2s,color .2s,transform .2s}
.hp-side a:hover{transform:translateX(-2px)}

/* ---------- 15. 图片载入淡入 ---------- */
.hp-art img{opacity:0;animation:fxFade .8s .1s var(--ease) forwards,fxFloat 7.5s ease-in-out 1.1s infinite}
@keyframes fxFade{to{opacity:1}}

/* ---------- 16. 首页：资讯四栏 / 成交底色 ---------- */
.hp-cols-in{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:1180px){
  .hp-cols-in{grid-template-columns:repeat(4,minmax(0,1fr));gap:38px 34px}
  .hp-col-h h3{font-size:17px;letter-spacing:.6px}
  .hp-col-h{padding-bottom:12px}
  .hp-col li{padding:11px 0;gap:10px}
  .hp-col li a{font-size:13.4px}
  .hp-col li em{font-size:12.2px}
}
@media(min-width:901px) and (max-width:1179px){
  .hp-cols-in{gap:40px 44px}
}
@media(max-width:1000px){
  .hp-cols-in{grid-template-columns:minmax(0,1fr)}
}

/* 成交实况：与整站底色统一 */
.hp-deal{background:#f7f9fc}
.hp-deal-box:before{background:#fff3cf;opacity:.9;left:26px;right:26px}
.hp-deal-head{letter-spacing:.6px}
.hp-deal-row span{padding:13px 10px}

/* ---------- 17. 商城：选购器收紧 ---------- */
.vcards{grid-template-columns:repeat(auto-fill,minmax(178px,232px))!important;justify-content:start}
@media(max-width:900px){.vcards{grid-template-columns:1fr!important}}
.buyer{padding:22px 26px 0}
.brow{padding:14px 0;grid-template-columns:96px minmax(0,1fr)}
.vcard{padding:12px 14px}
.vcard b{margin-bottom:6px}
.vcard ul{line-height:1.85}
.vcard ul li:before{margin-right:4px}
.vcards+.dhint{margin-top:10px}
.tabs{margin-bottom:22px}
.tabs a{padding-bottom:12px}
.bbar{margin-top:2px}

/* ---------- 18. 登录 / 注册：底部呼吸 ---------- */
.auth{min-height:496px}
@media(min-width:901px){
  .auth-sec{padding-bottom:84px!important}
}

/* ---------- 19. 通用细节 ---------- */
.pc-b{padding:22px 24px}
.pg-cols{gap:24px}
.pg-side .pc-b{padding:18px 20px}
.pg-h{margin-bottom:32px}
.steps .st em{box-shadow:0 8px 18px -12px rgba(29,126,245,.7)}
.pg-tip{transition:transform .28s var(--ease),box-shadow .28s var(--ease),border-color .28s}
.pg-tip:hover{transform:translateY(-4px);border-color:#dbe8fb;box-shadow:0 18px 36px -26px rgba(20,40,90,.4)}
.qy-card-hd .pill.p-idle{background:#f1f5fb}

/* 页脚顶部渐隐光带 */
.ft{position:relative}
.ft:before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(29,126,245,.55),transparent)
}

/* 空态 / 加载 */
.empty,.hc-empty{color:#8b98ad}

/* 移动端整体收紧 */
@media(max-width:640px){
  .wrap{padding:0 16px}
  .hp-deal-body{height:140px}
  .qy-panel{padding:12px}
  .pc-b{padding:18px 16px}
}

/* ---------- 20. 移动端导航 ---------- */
.mbtn{display:none;width:42px;height:42px;margin-left:4px;border:1px solid var(--line);background:#fff;
  border-radius:var(--r-s);cursor:pointer;padding:0;flex:none;transition:.2s;
  flex-direction:column;align-items:center;justify-content:center}
.mbtn span{display:block;width:17px;height:2px;border-radius:2px;background:#3d4451;transition:.26s var(--ease)}
.mbtn span+span{margin-top:4px}
.mbtn.on{border-color:#cfe0f8;background:#f5faff}
.mbtn.on span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.mbtn.on span:nth-child(2){opacity:0}
.mbtn.on span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.mnav{position:fixed;left:0;right:auto;width:100%;max-width:100vw;box-sizing:border-box;top:60px;z-index:49;background:#fff;border-bottom:1px solid #eef0f4;
  box-shadow:0 24px 48px -30px rgba(15,23,42,.55);padding:8px 10px 12px;
  opacity:0;visibility:hidden;transform:translateY(-10px);transition:.26s var(--ease)}
.mnav.on{opacity:1;visibility:visible;transform:none}
.mnav a{display:block;padding:12px 14px;font-size:15px;color:#3d4451;border-radius:var(--r-s)}
.mnav a:hover,.mnav a:active{background:#f4f7fc;color:var(--brand)}
.mnav .mnav-act{display:flex;gap:8px;margin-top:8px;padding-top:10px;border-top:1px solid #f1f4f9}
.mnav .mnav-act a{flex:1;text-align:center;border:1px solid var(--line);font-size:14px;font-weight:600}
.mnav .mnav-act a.pri{background:var(--brand);color:#fff;border-color:var(--brand)}
@media(max-width:900px){.mbtn{display:flex}}
@media(min-width:901px){.mnav{display:none}}

/* 商城结算条：窄屏改纵向堆叠，避免文字被压成两行 */
@media(max-width:760px){
  .bbar{flex-direction:column;align-items:stretch;gap:12px;padding:16px 18px;margin-left:-18px;margin-right:-18px}
  .bbar .sum{flex-wrap:wrap;gap:4px 10px}
  .bbar .sum span{white-space:nowrap}
  .bbar .sum b{font-size:26px}
  .bbar .sum i{width:100%;font-size:12px;line-height:1.6}
  .bbar .sp{display:none}
}

/* 内页卡片：hover 顶部渐变线 */
.pc{position:relative;overflow:hidden}
.pc:before{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;z-index:2;
  background:linear-gradient(90deg,#1d7ef5,#4facfe);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .38s var(--ease)
}
.pc:hover:before{transform:scaleX(1)}
.pg-cta:before{display:none}

/* 步骤条：窄屏两列时去掉连接线，避免伪元素撑出横向滚动 */
@media(max-width:900px){
  .steps .st:after{display:none}
  .steps{gap:22px 0}
}

/* ---------- 21. 无障碍 / 降级 ---------- */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*:before,*:after{animation:none!important;transition:none!important}
  html.fx .fx-r{opacity:1!important;transform:none!important}
  .hp-art img{opacity:1}
  .fx-progress{display:none}
}