/* ============================================================
   聚合易支付 · 视觉升级层（theme.css）
   设计取向：现代 SaaS 后台（对齐 Stripe / 支付宝商家中心）
   手法：只覆盖“观感属性”（圆角/阴影/配色/字重/过渡），
        不动布局属性（padding/margin/grid），因此不会破坏任何现有排版。
   约束：无 emoji、无大面积渐变、无发光、无拟人插画。
   ============================================================ */

/* ---------- 设计令牌 ---------- */
:root{
  /* 柔和色系：蓝 + 黄 + 粉，低饱和、高明度，观感轻盈不刺眼 */
  --pri:#7ba7d4;
  --pri-d:#6391c0;
  --pri-l:#f2f7fc;
  --ink:#2b3648;
  --ink-2:#5a6678;
  --ink-3:#7d8899;
  --ink-4:#a3acba;
  --line:#e9eef4;
  --line-2:#f4f7fa;
  --bg:#fafbfd;
  --ok:#6cb98f;
  --warn:#edc46e;
  --err:#dd8b85;
  --r-lg:16px;
  --r-md:14px;
  --r-sm:12px;
  --r-xs:10px;
  --sh-1:0 1px 2px rgba(43,54,72,.04),0 2px 6px rgba(43,54,72,.05);
  --sh-2:0 2px 6px rgba(43,54,72,.05),0 8px 18px rgba(43,54,72,.06);
  --sh-3:0 4px 10px rgba(43,54,72,.05),0 16px 34px rgba(43,54,72,.07);
  --ease:cubic-bezier(.22,.61,.36,1);
  /* 扩展调色板：柔和点缀色（蓝 / 黄 / 粉 三色循环） */
  --c-blue:#7ba7d4;
  --c-blue-bg:#eef5fb;
  --c-yellow:#edc46e;
  --c-yellow-bg:#fdf7ea;
  --c-pink:#efa4bb;
  --c-pink-bg:#fdf1f5;
  --c-teal:#7ba7d4;
  --c-green:#8dc9a5;
  --c-amber:#edc46e;
  --c-purple:#d3a9d8;
  --c-rose:#efa4bb;
}

/* ---------- 基础排版：字重与颜色分层 ---------- */
body{background:var(--bg)!important;color:var(--ink-2)!important;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
h1,h2,h3,h4{color:var(--ink)!important;letter-spacing:-.2px}
/* 数字统一等宽，表格/金额不会跳动 */
.n,.num,.money,.stats .st b,.dbar .d .n{font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1}

/* ---------- 顶栏：加深并加底部分隔，去掉生硬纯色 ---------- */
/* 非玻璃顶栏（后台）用纯深色，不用渐变，避免观感发闷 */
.top{background:#1f2937!important;
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 1px 6px rgba(16,24,40,.18)}
.top .tt{font-weight:600;letter-spacing:.2px}
.top .ur b{color:#fff}
.ubtn{border-radius:var(--r-sm);padding:0 10px;height:38px;transition:background .18s var(--ease)}
.ubtn:hover{background:rgba(255,255,255,.09)}
.ubtn .tri{transition:transform .22s var(--ease)}

/* ---------- 商户中心顶栏：果冻玻璃（半透明 + 背景模糊） ----------
   .glass 只加在 user.php 的顶栏上，后台 admin.php 保持实底。
   兜底：浏览器不支持 backdrop-filter 时退回实色，避免白字看不清。 */
.top.glass{
  background:rgba(21,29,42,.88)!important;
  -webkit-backdrop-filter:blur(28px) saturate(210%);
  backdrop-filter:blur(28px) saturate(210%);
  border-bottom:1px solid rgba(255,255,255,.12);
  border-radius:0;
  box-shadow:0 1px 0 rgba(255,255,255,.14) inset,0 4px 18px rgba(16,24,40,.10);
  transition:box-shadow .22s var(--ease),background .22s var(--ease)}
.top.glass.scr{background:rgba(19,27,39,.93)!important;
  box-shadow:0 1px 0 rgba(255,255,255,.14) inset,0 6px 22px rgba(16,24,40,.20)}
/* 玻璃上的内容要更实一点，避免被背后内容干扰 */
.top.glass .tt,.top.glass .ur b{text-shadow:0 1px 2px rgba(0,0,0,.28)}
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  .top.glass{background:#1f2937!important}
  .top.glass.scr{background:#1f2937!important}
}

/* ---------- 右上角展开菜单：果冻玻璃 ---------- */
.udrop{background:rgba(255,255,255,.68)!important;
  -webkit-backdrop-filter:blur(26px) saturate(200%);
  backdrop-filter:blur(26px) saturate(200%);
  border:1px solid rgba(255,255,255,.85)!important;
  border-radius:14px!important;
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 14px 34px rgba(16,24,40,.16)!important;
  overflow:hidden}
.udrop .uhd{background:rgba(247,249,252,.55)!important;border-bottom:1px solid rgba(226,232,240,.7)!important}
.udrop .umenu a:hover{background:rgba(37,99,235,.08)!important}
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  .udrop{background:#fff!important}
  .udrop .uhd{background:#f7f9fc!important}
}

/* ---------- 侧栏 ---------- */
.side{background:#1a2432!important;box-shadow:2px 0 16px rgba(16,24,40,.22)}
.side .brand{border-bottom:1px solid rgba(255,255,255,.07)!important}
.side .brand .nm{font-size:15.5px;letter-spacing:.2px}
.side a.m{border-radius:var(--r-sm);margin:2px 8px;padding:10px 12px!important;
  transition:background .16s var(--ease),color .16s var(--ease),transform .16s var(--ease)}
.side a.m:hover{background:rgba(255,255,255,.07)!important;transform:scale(.994)}
.side a.m.on{background:var(--pri)!important;color:#fff!important}
.side a.m.on:hover{transform:none}
.side .sec{color:#7d8ba1!important;font-size:10.5px!important;
  letter-spacing:1.4px!important;padding:16px 20px 6px!important}
.side::-webkit-scrollbar{width:5px}
.side::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:3px}

/* ---------- 卡片：柔和阴影取代扁平细线 ---------- */
.card{background:#fff!important;border:1px solid var(--line-2)!important;
  border-radius:var(--r-lg)!important;box-shadow:var(--sh-1);
  transition:box-shadow .22s var(--ease),transform .22s var(--ease),border-color .22s var(--ease)}
.card:hover{box-shadow:var(--sh-2);border-color:var(--line)}
.card h3{font-size:14.5px;font-weight:600;color:var(--ink);letter-spacing:-.1px}
.card h3 svg{color:var(--pri)}

/* ---------- 统计卡：数字是主角 ---------- */
.stats{gap:12px!important}
.stats .st,.stat{background:#fff!important;border:1px solid var(--line-2)!important;
  border-radius:var(--r-lg)!important;box-shadow:var(--sh-1);
  transition:box-shadow .22s var(--ease),transform .22s var(--ease)}
.stats .st:hover,.stat:hover{transform:translateY(-2px);box-shadow:var(--sh-2)}
.stats .st b,.stat b,.stat .v{font-size:21px!important;font-weight:700!important;
  color:var(--ink)!important;line-height:1.25!important;letter-spacing:-.4px}
.stats .st span,.stat span,.stat .l{font-size:11.5px!important;color:var(--ink-4)!important;
  letter-spacing:.2px}

/* ---------- 按钮 ---------- */
.btn{border-radius:var(--r-sm)!important;font-weight:500;letter-spacing:.2px;
  box-shadow:0 1px 2px rgba(16,24,40,.06);
  transition:background .18s var(--ease),transform .12s var(--ease),box-shadow .18s var(--ease)}
.btn:hover{box-shadow:0 2px 8px rgba(37,99,235,.24)}
.btn:active{transform:scale(.94)}
.btn.gray{background:#fff!important;color:var(--ink-2)!important;
  border:1px solid var(--line)!important;box-shadow:var(--sh-1)}
.btn.gray:hover{background:var(--line-2)!important;box-shadow:var(--sh-1)}
.btn.sm{border-radius:var(--r-xs)!important}
.btn.dg,.btn.red,.btn.danger{box-shadow:0 1px 2px rgba(240,68,56,.18)}

/* ---------- 输入框 ---------- */
input,textarea,select{border-radius:var(--r-sm)!important;
  border:1px solid var(--line)!important;background:#fff;
  transition:border-color .18s var(--ease),box-shadow .18s var(--ease),background .18s var(--ease)}
input:hover,textarea:hover,select:hover{border-color:#d0d5dd}
input:focus,textarea:focus,select:focus{border-color:var(--pri)!important;
  box-shadow:0 0 0 3px rgba(37,99,235,.12)!important;outline:0}
input::placeholder,textarea::placeholder{color:var(--ink-4)}

/* ---------- 表格 ---------- */
.tw{overflow-x:auto;border:1px solid var(--line-2);border-radius:var(--r-lg);
  background:#fff;box-shadow:var(--sh-1)}
.tw table{border-collapse:separate;border-spacing:0;width:100%}
.tw th{background:#fafbfc;font-size:12px;font-weight:600;color:var(--ink-3);
  letter-spacing:.3px;white-space:nowrap;padding:10px 12px;border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:2}
.tw td{padding:11px 12px;border-bottom:1px solid var(--line-2);font-size:13px;color:var(--ink-2)}
.tw tbody tr{transition:background .14s var(--ease)}
.tw tbody tr:nth-child(even){background:#fcfcfd}
.tw tbody tr:hover{background:var(--pri-l)!important}
.tw tbody tr:last-child td{border-bottom:0}
.tw::-webkit-scrollbar{height:6px}
.tw::-webkit-scrollbar-thumb{background:#d0d5dd;border-radius:3px}
.tw::-webkit-scrollbar-thumb:hover{background:#b0b7c3}

/* 状态标签：改成圆角药丸，配色克制 */
.tag,.badge,.st-tag{display:inline-block;padding:2px 8px;border-radius:20px;
  font-size:11.5px;font-weight:500;line-height:1.6;white-space:nowrap}
.tag.ok,.badge.ok{background:#e7f8ee;color:#067647}
.tag.no,.badge.no,.tag.err,.badge.err{background:#fdecea;color:#b42318}
.tag.wait,.badge.wait,.tag.warn,.badge.warn{background:#fef4e6;color:#b54708}

/* ---------- 首页（官网）细修 ---------- */
.nav .bt{border-radius:var(--r-sm)}
.nav .bt.pri{box-shadow:none}
.nav .bt.pri:hover{background:var(--pri-d)}
.hero .op a{border-radius:var(--r-sm)!important;font-weight:500}
.hero .op .a1{box-shadow:none}
.hero .op .a1:hover{background:var(--pri-d)}
.rt,.md,.gd,.fl,.ch{border-radius:var(--r-md)!important}
.chan{border-radius:var(--r-md)!important;overflow:hidden}
.gd{transition:box-shadow .22s var(--ease),transform .22s var(--ease),border-color .22s var(--ease)}
.gd:hover{box-shadow:var(--sh-2);transform:translateY(-2px);border-color:var(--line)}
.ch{transition:background .18s var(--ease)}
.ch:hover{background:#fafbfd}
.fl{transition:background .18s var(--ease)}
.fl:hover{background:#fafbfd}
.dbar .in{background:var(--line-2)}
.dbar .d{background:#fff;transition:transform .2s var(--ease)}
.dbar .d:hover{transform:translateY(-2px)}

/* hero：纯白底，不加任何底纹/渐变/光晕（那些看着像模板生成的） */
.hero{position:relative;background:#fff}
.hero>.wrap{position:relative;z-index:1}

/* 优势卡：去掉左侧竖条（那个观感偏廉价），改成白卡 + 上浮 */
.ad{border:1px solid var(--line-2)!important;border-left:1px solid var(--line-2)!important;
  border-radius:var(--r-md)!important;background:#fff;box-shadow:var(--sh-1);
  transition:box-shadow .22s var(--ease),transform .22s var(--ease)}
.ad:hover{box-shadow:var(--sh-2);transform:translateY(-2px)}
.ad .t{color:var(--ink)!important}
.ad .d{color:var(--ink-3)!important}

/* FAQ */
.faq{border:1px solid var(--line-2)!important;border-radius:var(--r-md)!important;
  background:#fff;box-shadow:var(--sh-1)}
.qa{border-bottom:1px solid var(--line-2)!important;transition:background .16s var(--ease)}
.qa:hover{background:#fafbfd}
.qa.on{background:#fafbfd}
.qa .q{color:var(--ink)!important}
.qa .a{color:var(--ink-3)!important}

/* 顶栏 logo 更精致 */
.logo i{border-radius:var(--r-xs)!important}

/* 返回顶部按钮 */
.top2{border-radius:var(--r-sm)!important;box-shadow:var(--sh-2);
  transition:transform .18s var(--ease),background .18s var(--ease)}
.top2:hover{transform:scale(.99);background:var(--pri-d)}

/* 页脚 */
.ft{background:#182338}
.ft .ln b{color:#7d8ba1!important}
.cp .mk{color:#5c6b85!important}

/* ---------- 通用：分割线更淡，留白更透气 ---------- */
hr{border:0;border-top:1px solid var(--line-2)}

/* ============================================================
   动效
   ============================================================ */

/* 入场：滑动进场（由 JS 加 .in）
   默认是"从下方滑上来"；.slide-l / .slide-r 是左右侧滑，用在官网区块上更有节奏 */
.rv{opacity:0;transform:translateY(20px);
  transition:opacity .5s var(--ease),transform .5s var(--ease)}
.rv.slide-l{transform:translateX(-24px)}
.rv.slide-r{transform:translateX(24px)}
.rv.in{opacity:1;transform:none}

/* ---------- 按压反馈：只要一点点，几乎看不出来 ----------
   统一 .99 上下，手指能感到"按到了"，但肉眼看不出形变。
   块级元素（卡片/表格行）完全不动，避免整块晃。 */
.btn:active{transform:scale(.988)!important}
.nav .bt:active{transform:scale(.988)}
.hero .op a:active{transform:scale(.988)}
.ubtn:active{transform:scale(.99)}
.ham:active{transform:scale(.97)}
.side a.m:active{transform:scale(.994)}
.top2:active{transform:scale(.985)}
.card:active,.stat:active,.stats .st:active{transform:none}
.gd:active,.ad:active,.chan .ch:active,.fl:active{transform:none}
.tw tbody tr:active td{background:var(--pri-l)}
/* 按压过渡压到 .07s，松手几乎立刻回位，不拖泥带水 */
.btn,.nav .bt,.hero .op a,.ubtn,.ham,.side a.m,.top2{transition:
  background .16s var(--ease),color .16s var(--ease),box-shadow .18s var(--ease),
  transform .07s var(--ease)}

/* 数字滚动时避免布局跳动 */
.zfnum{font-variant-numeric:tabular-nums}

/* 骨架屏 */
.sk{background:linear-gradient(90deg,#f2f4f7 25%,#e9edf2 37%,#f2f4f7 63%);
  background-size:400% 100%;animation:sks 1.3s ease-in-out infinite;border-radius:var(--r-xs)}
@keyframes sks{0%{background-position:100% 50%}100%{background-position:0 50%}}

/* 顶部进度条：加一点拖尾光，更有质感 */
#zfpb{height:2.5px!important;background:linear-gradient(90deg,#7ba7d4,#7ba6c7)!important}

/* 轻提示：更精致 */
#zfts{border-radius:10px!important;background:rgba(16,24,40,.92)!important;
  backdrop-filter:blur(8px);padding:11px 20px!important;font-size:13.5px!important;
  box-shadow:0 8px 28px rgba(16,24,40,.28)}

/* 遮罩：轻微模糊背景，聚焦弹层 */
.mask{background:rgba(16,24,40,.42);backdrop-filter:blur(2px)}
.nmask{background:rgba(16,24,40,.5);backdrop-filter:blur(3px)}

/* 尊重系统「减少动效」 */

/* ---------- 移动端：对齐与可读性 ---------- */
@media(max-width:680px){
  .side{width:78%;max-width:300px}
  .main{padding:12px 12px 28px!important}
  .card{padding:14px!important;border-radius:var(--r-md)!important;margin-bottom:12px!important}
  .card h3{font-size:14.5px!important;margin-bottom:10px!important}
  .stats{gap:10px!important}
  .stats .st{padding:12px 12px!important;border-radius:var(--r-md)!important}
  .stats .st .vl{font-size:19px!important}
  .stats .st .lb{font-size:11px!important}
  .tw{border-radius:var(--r-sm);overflow-x:auto;-webkit-overflow-scrolling:touch}
  table{font-size:12.5px!important}
  table th,table td{padding:9px 10px!important}
  .fm{grid-template-columns:1fr!important;gap:10px!important}
  .btn{min-height:38px}
  .btn.sm{min-height:32px}
  .msg,.hint{font-size:12.5px!important;line-height:1.7!important}
  .tag{font-size:11.5px!important;padding:2px 8px!important}
}
@media(max-width:400px){
  .stats{grid-template-columns:repeat(2,1fr)!important}
  .stats .st .vl{font-size:17.5px!important}
}

/* ---------- 移动端：官网/表单/付款页 统一对齐 ---------- */
@media(max-width:680px){
  /* 官网容器统一左右留白，避免各区块宽度不一致 */
  .wrap,.hero,.sec,.ft,.ftop,.nav{padding-left:16px!important;padding-right:16px!important}
  .grid,.gd,.chan,.ch,.flow,.fl,.faq,.qa,.ads,.ad{margin-left:0!important;margin-right:0!important}
  .grid,.chan{grid-template-columns:repeat(2,1fr)!important;gap:10px!important}
  .gd,.ch,.ad{border-radius:var(--r-md)!important;padding:13px 12px!important}
  .gd,.ch,.ad{font-size:13px!important;line-height:1.65!important}
  .gd b,.ch b,.ad b,.pri{font-size:15px!important}
  .faq,.qa{font-size:13px!important;line-height:1.75!important}
  .qa,.faq{padding:11px 13px!important}
  .hero{padding-top:26px!important;padding-bottom:24px!important}
  .hg,.hero h1,.hero .t{font-size:22px!important;line-height:1.4!important}
  .hero .en,.hero .sb,.sh{font-size:13px!important;line-height:1.7!important}
  .ds,.dbar{flex-wrap:wrap;gap:8px!important}
  .ds .d,.dbar .d{flex:1 1 44%;min-width:0;padding:9px 10px!important}
  .ds .d .v,.dbar .d .v{font-size:16px!important}
  .ds .d .l,.dbar .d .l{font-size:11px!important}
  .ft,.ftop{grid-template-columns:1fr!important;gap:18px!important}
  .lk,.more,.sp{margin-top:14px!important}
  .cp,.cp *{font-size:11.5px!important;line-height:1.8!important}

  /* 表单：标签与输入框统一高度与字号，杜绝错位 */
  .fm label,.fm .lb{font-size:12.5px!important;margin-bottom:6px!important}
  .fm input,.fm select,.fm textarea,
  input[type=text],input[type=password],input[type=email],input[type=number],
  select,textarea{
    height:44px!important;min-height:44px!important;font-size:16px!important;
    padding:0 12px!important;border-radius:var(--r-sm)!important;width:100%!important;
    -webkit-appearance:none;appearance:none}
  textarea{height:auto!important;min-height:84px!important;padding:10px 12px!important;line-height:1.6!important}
  /* .two / .cap 是「输入框+按钮」并排行，保持横排以节省纵向空间 */
  .fm .row,.fm .in{grid-template-columns:1fr!important;gap:10px!important}
  .fm .two,.fm .cap,.two,.cap{display:flex!important;gap:8px!important;align-items:stretch!important}
  .fm .two input,.fm .cap input,.two input,.cap input{flex:1!important;min-width:0!important;width:auto!important}
  .fm .two button,.fm .cap button,.two button,.cap button,
  .fm .two .btn,.fm .cap .btn,.two .btn,.cap .btn{
    flex:0 0 auto!important;width:auto!important;min-width:96px!important;padding:0 12px!important}
  .cap img,.two img{flex:0 0 auto!important;width:100px!important;height:44px!important;object-fit:cover}

  /* 按钮：统一高度，避免大小不一 */
  .btn,.bt,.btn.sm,.bt.sm{min-height:44px!important;line-height:44px!important;font-size:15px!important;padding:0 14px!important}
  .btn.sm,.bt.sm{min-height:36px!important;line-height:36px!important;font-size:13.5px!important}

  /* 付款页：顶部收款方与金额卡对齐 */
  .hd{padding:15px 16px!important}
  .hd .nm{font-size:16px!important}
  .amt{padding:16px!important}
  .amt .val{font-size:34px!important}
  .way label{padding:12px 16px!important}
  .way .wn{font-size:14.5px!important}

  /* 注册/登录页：压缩间距，争取一屏可见 */
  /* 注意：.lg 是登录/找回页的 logo 容器，不能给它加 padding，否则 logo 被撑大 */
  .box,.card.lg{margin:0 auto!important;max-width:100%!important}
  .lg h2,.rg h2{font-size:18px!important;margin-bottom:14px!important}
  .lg .fm,.rg .fm{gap:9px!important}
  .lg .tip,.rg .tip{font-size:11.5px!important;margin-top:10px!important}
}

/* ---------- 移动端兜底：防溢出 + iOS 聚焦不放大 ---------- */
@media(max-width:680px){
  /* min-width 在窄屏会把 flex 容器撑破 */
  .linkrow,.paybox,.cap,.two{flex-wrap:wrap}
  .linkrow input,.paybox .info{min-width:0!important;width:100%}
  #inlink{min-width:0!important;width:100%}

  /* iOS Safari：输入框字号 <16px 时聚焦会放大整页，导致输入框被顶出可视区 */
  .ipt input,.fm input,.fm select,.fm textarea,
  .cap input,.rmk input,.linkrow input,.two input{font-size:16px!important}

  /* 长链接/长订单号不撑破卡片 */
  .card,.st,.paybox,.hd{word-break:break-word;overflow-wrap:anywhere}

  /* 顶栏在小屏不再挤成一坨 */
  .nav .in{padding:0 14px!important}
  .nav .bt{height:32px!important;line-height:32px!important;padding:0 13px!important;font-size:13px!important}

  /* 图表高度固定，避免 canvas 被 devicePixelRatio 拉伸 */
  #chart{height:200px!important}
}

@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  .sk{animation:none}
  .card:hover,.stats .st:hover,.stat:hover,.gd:hover,.dbar .d:hover{transform:none}
}

/* ---------- 关键例外：带图标的输入框必须保留左侧图标位 ----------
   上面那条 input{...padding:0 12px!important} 会把 .ipt 的 padding-left:38px 覆盖掉，
   导致左侧图标（left:12px，宽 17px）与文字重叠。这里用更高特异性补回。 */
.ipt input[type=text],.ipt input[type=password],.ipt input[type=email],
.ipt input[type=number],.ipt input{
  padding-left:38px!important}

/* 图表：devicePixelRatio 会撑高 canvas 位图，必须锁死 CSS 高度，
   否则 X 轴日期标签被推到很下方 */
canvas#chart{height:200px!important;max-height:200px!important;display:block}