/* 充值：员工页「充值」分页，以及共享件（topup-kit.js 输出的 .tp-addr .tp-g i.k .tp-cmp .tp-int .tp-dot .tp-fp）的样式。
   后台页也加载本文件：共享件的规则只用颜色令牌加回退值，不依赖员工页的外层；员工页专用规则全部挂在 .tp-* 下。
   图片用相对路径（与 front.css 同目录）。prefers-reduced-motion：香退化成进度条，印章直接落定，不再有涟漪与烟。
   字体：SD Serif 只是一小份子集，「充值缴」等字不在里面，所以题头直接用完整宋体（--tp-serif），免得一行字粗细不一。 */
:root{--tp-serif:"Songti SC","STSong","Noto Serif SC","Source Han Serif SC","Source Han Serif CN","Noto Serif CJK SC","SimSun","Songti TC",serif}

/* ================= 共享件：地址、核对、金额 ================= */
.tp-addr{font-family:var(--mono,Consolas,"SF Mono",monospace);font-variant-ligatures:none;letter-spacing:0;line-height:1.8;color:var(--fg,#1d1b17)}
.tp-g{display:inline-block;white-space:nowrap;margin-right:.72em}
.tp-g:last-child{margin-right:0}
.tp-addr i,.tp-cmp i{font-style:normal}
.tp-addr i.k{color:var(--red,#b3202a);font-weight:800;text-decoration:underline;text-decoration-color:var(--red,#b3202a);text-decoration-thickness:2px;text-underline-offset:.26em;text-decoration-skip-ink:none}
.tp-cmp{font-family:var(--mono,Consolas,"SF Mono",monospace);font-variant-ligatures:none;line-height:2;word-break:break-all}
.tp-cmp i{display:inline-block;min-width:.64em;padding:0 .04em;text-align:center;border-radius:2px}
.tp-cmp i.ok{color:var(--ok,#2e8a52)}
.tp-cmp i.bad{background:var(--red,#b3202a);color:#fff;font-weight:800}
.tp-cmp i.miss{color:var(--red,#b3202a);font-weight:800;box-shadow:inset 0 -2px 0 var(--red,#b3202a)}
.tp-int{color:var(--fg,#1d1b17)}
.tp-dot{color:var(--fg2,#4b463d);margin:0 -.09em 0 -.05em}
.tp-fp{position:relative;color:var(--red,#b3202a)}
.tp-fp::after{content:"";position:absolute;left:-.05em;right:-.08em;bottom:-.17em;height:.17em;background:currentColor;opacity:.92;
  -webkit-mask:url(ink/stroke.webp) left center/100% 100% no-repeat;mask:url(ink/stroke.webp) left center/100% 100% no-repeat}

/* ================= 员工页：版面 ================= */
.tp-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.tp-wrap{display:flex;flex-direction:column;gap:16px;min-width:0}
.tp-top{display:grid;grid-template-columns:minmax(0,900px) minmax(260px,340px);gap:16px;align-items:start}
.tp-main,.tp-side{display:flex;flex-direction:column;gap:14px;min-width:0}
.tp-wrap .note{margin:0}
.tp-wrap .note b{font-weight:800}
.tp-lbl{font-size:12.5px;font-weight:800;letter-spacing:.2em;color:var(--red)}
.tp-lbl small{margin-left:8px;font-size:12px;font-weight:500;letter-spacing:.02em;color:var(--muted)}
.tp-help{margin:4px 0 8px;font-size:12.5px;line-height:1.65;color:var(--fg2)}
.tp-help b{color:var(--fg);font-weight:700}

/* 多张待付单：一排小签 */
.tp-switch{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:0 2px}
.tp-switch>span{font-size:12.5px;color:var(--muted)}
.tp-sw{display:inline-flex;align-items:baseline;gap:8px;min-height:34px;padding:5px 14px;border:1px solid var(--line-strong);border-radius:var(--r,6px);background:var(--panel);color:var(--fg2);cursor:pointer;font:inherit}
.tp-sw b{font:italic 700 17px/1 var(--display);font-variant-numeric:tabular-nums;color:var(--fg)}
.tp-sw small{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.tp-sw:hover{border-color:var(--fg2)}
.tp-sw.on{border-color:var(--red);background:var(--red-ink)}
.tp-sw.on b{color:var(--red)}

/* ================= 缴费单（票据／卷轴） ================= */
.tp-bill{position:relative;isolation:isolate;max-width:900px;padding:30px 36px 28px;background:var(--panel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='5' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .4 0 0 0 0 .32 0 0 0 0 .2 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  border:2px solid var(--red);border-radius:2px;box-shadow:0 20px 44px -26px rgba(70,40,20,.55),0 2px 0 rgba(60,40,20,.05)}
.tp-bill::before{content:"";position:absolute;inset:6px;border:1px solid var(--red);pointer-events:none;z-index:-1}
.tp-bill::after{content:"";position:absolute;inset:11px;border:1px solid var(--gold);opacity:.8;pointer-events:none;z-index:-1}
.tp-bill{scroll-margin-top:76px}
.tp-pick{scroll-margin-top:76px}
.tp-bill.tp-enter{animation:tp-unroll .8s cubic-bezier(.2,.7,.2,1) both}
.tp-bill.thud{animation:tp-thud .34s cubic-bezier(.3,1.6,.5,1)}
@keyframes tp-unroll{from{opacity:0;clip-path:inset(0 -60px 100% -60px);transform:translateY(-8px)}to{opacity:1;clip-path:inset(-60px -60px -60px -60px);transform:none}}
@keyframes tp-thud{0%{transform:translateY(0)}30%{transform:translateY(3px)}100%{transform:translateY(0)}}
/* 四角回纹 */
.tp-c{position:absolute;width:24px;height:24px;z-index:-1;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cpath d='M2 27V2h25v20H7V7h15v10H12v-5h5' fill='none' stroke='%23b3202a' stroke-width='1.8'/%3E%3C/svg%3E") center/contain no-repeat}
.tp-bill>.tp-c.tl{left:14px;top:14px}
.tp-bill>.tp-c.tr{right:14px;top:14px;transform:scaleX(-1)}
.tp-bill>.tp-c.bl{left:14px;bottom:14px;transform:scaleY(-1)}
.tp-bill>.tp-c.br{right:14px;bottom:14px;transform:scale(-1,-1)}
/* 题头 */
.tp-head{position:relative;display:flex;align-items:center;gap:14px;padding:0 120px 16px 0;min-height:64px}
.tp-head::after{content:"";position:absolute;left:0;right:0;bottom:0;height:10px;background:var(--red);opacity:.9;
  -webkit-mask:url(ink/stroke.webp) left center/100% 100% no-repeat;mask:url(ink/stroke.webp) left center/100% 100% no-repeat;transform:scaleY(.55);transform-origin:left bottom}
.tp-logo{flex:none;width:46px;height:46px;background:url(ink/seal-sm.webp) center/contain no-repeat}
.tp-ttl h3{margin:0;font:900 31px/1.1 var(--tp-serif);letter-spacing:.34em;color:var(--ink)}
.tp-ttl p{margin:5px 0 0;font-size:12px;letter-spacing:.16em;color:var(--muted)}
.tp-meta{display:flex;flex-wrap:wrap;gap:2px 18px;margin:10px 0 0;font-size:12.5px;color:var(--muted)}
.tp-meta b{color:var(--fg2);font-weight:600}
/* 印章 */
.tp-seal{position:absolute;right:34px;top:20px;width:98px;height:98px;pointer-events:none;mix-blend-mode:multiply;rotate:-8deg;z-index:2}
.tp-seal.wait{background:#4a4237;opacity:.82;-webkit-mask:url(ink2/seal-wait.webp) center/contain no-repeat;mask:url(ink2/seal-wait.webp) center/contain no-repeat}
.tp-seal.ok{background:url(ink/seal-ok.webp) center/contain no-repeat}
.tp-seal.no{background:url(ink/seal-no.webp) center/contain no-repeat;opacity:.92}
.tp-seal.slam{animation:tp-slam .7s cubic-bezier(.3,1.5,.5,1) both}
@keyframes tp-slam{0%{opacity:0;transform:scale(2.9) rotate(-26deg)}55%{opacity:1;transform:scale(.9) rotate(5deg)}78%{transform:scale(1.04) rotate(-2deg)}100%{opacity:1;transform:scale(1) rotate(0)}}
/* 应付金额 */
.tp-amt{padding:20px 0 0}
.tp-payrow{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:10px 20px;margin:8px 0 0}
.tp-pay{display:flex;align-items:baseline;gap:10px;font:italic 700 clamp(48px,7.2vw,80px)/1 var(--display);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.tp-pay small{font:700 16px/1 var(--mono);font-style:normal;letter-spacing:.08em;color:var(--fg2)}
.tp-fpnote{margin:14px 0 0;font-size:13.5px;line-height:1.7;color:var(--fg2)}
.tp-fpnote b{color:var(--red);font-weight:800}
.tp-get{margin:2px 0 0;font-size:12.5px;color:var(--muted)}
/* 一炷香 */
.tp-time{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:end;gap:4px 22px;margin:20px 0 4px;padding:14px 18px 12px 16px;border:1px solid var(--line-strong);border-radius:3px;background:rgba(243,238,226,.55)}
.tp-clock{display:flex;flex-direction:column;gap:3px;min-width:96px;padding-bottom:2px}
.tp-clock small{font-size:12px;font-weight:700;letter-spacing:.28em;color:var(--fg2)}
.tp-clock b{font:italic 700 36px/1 var(--display);font-variant-numeric:tabular-nums;color:var(--fg)}
.tp-clock b.low{color:var(--red)}
.tp-rack{position:relative;height:84px;min-width:0}
.tp-rack .base{position:absolute;left:0;bottom:7px;width:15px;height:16px;border-radius:2px 2px 5px 5px;background:#3a3732}
.tp-rack .base::after{content:"";position:absolute;left:-4px;right:-4px;bottom:-3px;height:4px;border-radius:2px;background:#3a3732}
.tp-rack .ghost{position:absolute;left:13px;right:0;bottom:15px;height:7px;border:1px dashed var(--line-strong);border-radius:4px}
.tp-rack .stick{position:absolute;left:13px;bottom:15px;height:7px;width:calc((100% - 13px) * var(--f,1));background:linear-gradient(90deg,#d2bd82 0 20px,#8f3a28 20px);border-radius:4px 1px 1px 4px;box-shadow:inset 0 1px 0 rgba(255,255,255,.28);transition:width 1s linear}
.tp-rack .stick::before{content:"";position:absolute;right:0;top:0;bottom:0;width:7px;background:#3d2c25;border-radius:0 1px 1px 0}
.tp-rack .stick::after{content:"";position:absolute;right:-6px;top:-5px;width:15px;height:17px;border-radius:50%;
  background:radial-gradient(circle at 50% 56%,#fff6cf 0,#ffc25a 24%,#ff6a35 52%,rgba(255,90,42,0) 72%);animation:tp-ember 1.15s ease-in-out infinite alternate}
.tp-rack .ash{position:absolute;left:100%;top:1px;width:16px;height:5px;margin-left:3px;border-radius:0 3px 3px 0;background:#c4bdb1;opacity:.85}
.tp-rack .smoke{position:absolute;right:-6px;bottom:19px;width:22px;height:60px;overflow:visible;pointer-events:none}
.tp-rack .smoke path{fill:none;stroke:#6f675b;stroke-width:1.6;stroke-linecap:round;stroke-dasharray:70;stroke-dashoffset:70;opacity:0;animation:tp-wisp 4.2s ease-out infinite}
.tp-rack .smoke.b{right:-10px;transform:scaleX(-1)}
.tp-rack .smoke.b path{animation-delay:2.1s}
@keyframes tp-ember{from{opacity:.78;transform:scale(.88)}to{opacity:1;transform:scale(1.1)}}
@keyframes tp-wisp{0%{stroke-dashoffset:70;opacity:0}12%{opacity:.8}60%{opacity:.55}100%{stroke-dashoffset:-70;opacity:0}}
.tp-until{display:flex;flex-direction:column;align-items:flex-end;gap:3px;font-size:12.5px;color:var(--muted);text-align:right;padding-bottom:2px}
.tp-until b{font:italic 700 20px/1 var(--display);color:var(--fg);font-variant-numeric:tabular-nums;margin-left:4px}
.tp-time.out .stick{width:0;transition:none}
.tp-time.out .stick::after,.tp-time.out .smoke,.tp-time.out .ash{display:none}
/* 收款地址＋二维码 */
.tp-sec{margin-top:20px;padding-top:18px;border-top:1px dashed var(--line-strong)}
.tp-adr{display:grid;grid-template-columns:minmax(0,1fr) 206px;gap:12px 28px;align-items:start}
.tp-addrtxt{margin:10px 0 0;font-size:clamp(15px,1.75vw,21px)}
.tp-chk{display:flex;align-items:flex-start;gap:8px;margin:10px 0 0;font-size:13px;line-height:1.55;color:var(--fg2)}
.tp-chk::before{content:"";flex:none;width:18px;height:18px;margin-top:1px;border-radius:50%;background:var(--wash,#d9d0ba)}
.tp-chk.ok{color:#1f6b3e}
.tp-chk.ok::before{background:#2e8a52 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M4.5 9.4l3 3 6-6.4' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.tp-chk.wait::before{animation:tp-pulse 1s ease-in-out infinite alternate}
.tp-chk.na{color:#7a5410}
.tp-chk.na::before{background:var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M9 4.5v5.5M9 12.6v.9' stroke='white' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat}
.tp-chk.bad{color:var(--red);font-weight:700}
.tp-chk.bad::before{background:var(--red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5.5 5.5l7 7M12.5 5.5l-7 7' stroke='white' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat}
@keyframes tp-pulse{from{opacity:.4}to{opacity:1}}
.tp-ends{margin:6px 0 0;font-size:12.5px;line-height:1.6;color:var(--muted)}
.tp-ends b{color:var(--red);font-weight:800;font-size:13px;letter-spacing:.03em}
.tp-btnrow{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:12px 0 0}
.tp-ext{display:inline-flex;align-items:center;gap:4px;font-size:13px;color:var(--fg2);border-bottom:1px solid var(--line-strong);padding-bottom:1px}
.tp-ext::after{content:"";width:.85em;height:.85em;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 9l6-6M4 3h5v5' fill='none' stroke='black' stroke-width='1.5'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 9l6-6M4 3h5v5' fill='none' stroke='black' stroke-width='1.5'/%3E%3C/svg%3E") center/contain no-repeat}
.tp-ext:hover{color:var(--red);border-bottom-color:var(--red)}
.tp-qrcol{display:flex;flex-direction:column;align-items:center;gap:8px}
.tp-qrbox{position:relative;width:100%;max-width:206px;aspect-ratio:1;padding:20px;background:#fff;border:1px solid var(--line-strong);border-radius:2px;display:grid;place-items:center}
.tp-qrbox svg{display:block;width:100%;height:100%}
.tp-qrbox .tp-c{width:15px;height:15px;z-index:0}
.tp-qrbox .tp-c.tl{left:3px;top:3px}.tp-qrbox .tp-c.tr{right:3px;top:3px;transform:scaleX(-1)}
.tp-qrbox .tp-c.bl{left:3px;bottom:3px;transform:scaleY(-1)}.tp-qrbox .tp-c.br{right:3px;bottom:3px;transform:scale(-1,-1)}
.tp-qrcol p{margin:0;font-size:12px;line-height:1.5;color:var(--muted);text-align:center}
.tp-qrcol p b{color:var(--fg2)}
.tp-badaddr{padding:14px 16px;border:2px solid var(--red);border-radius:3px;background:var(--red-ink);color:#7d1a22;font-size:13.5px;line-height:1.7}
.tp-badaddr b{display:block;font-size:16px;margin-bottom:2px}
.tp-bill.badaddr .tp-ends{display:none}
.tp-bill.badaddr .tp-addrtxt{opacity:.5;filter:grayscale(1);user-select:none}
.tp-bill.badaddr .tp-stat,.tp-bill.badaddr .tp-time,.tp-bill.badaddr [data-act=check],.tp-bill.badaddr [data-act=hash-toggle],.tp-bill.badaddr [data-act=copy-pay],.tp-bill.badaddr .tp-hash{display:none}
.tp-oldaddr{margin:12px 0 0;padding:9px 12px;border-left:3px solid var(--gold);background:var(--gold-ink);color:#6b4c12;font-size:12.5px;line-height:1.6}
/* 核对：粘贴比对＋三步 */
.tp-two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px 28px;align-items:start}
.tp-cmpbox input[type=text]{height:40px;font:13px var(--mono);letter-spacing:.02em}
.tp-cmpbox label.f{margin:0}
.tp-cmp-out{margin-top:10px;min-height:20px;font-size:13px;line-height:1.65}
.tp-cmp-out .tp-cmp{display:block;font-size:14px}
.tp-cmp-out p{margin:6px 0 0}
.tp-cmp-out .bad{color:var(--red);font-weight:700}
.tp-cmp-out .hint{color:var(--muted)}
.tp-cmp-ends{display:flex;flex-wrap:wrap;gap:4px 16px;margin-top:6px;font-size:12.5px;color:var(--fg2)}
.tp-cmp-ends b.y{color:#1f6b3e}.tp-cmp-ends b.n{color:var(--red)}
.tp-same{display:flex;align-items:center;gap:10px;margin:2px 0 6px;color:#1f6b3e;font-size:14px;font-weight:800}
.tp-same i{flex:none;width:38px;height:38px;background:url(ink/seal-ok.webp) center/contain no-repeat;animation:tp-pop .5s cubic-bezier(.3,1.6,.5,1) both;rotate:-6deg}
@keyframes tp-pop{from{opacity:0;transform:scale(2.2) rotate(-14deg)}}
/* 竹简行 */
.tp-steps .tp-lbl{margin-bottom:8px}
.tp-slip{position:relative;display:flex;align-items:flex-start;gap:10px;margin:0 0 7px;padding:9px 14px 9px 44px;border:1px solid #d3bf86;border-radius:2px;background:#f4e9cb;cursor:pointer;font-size:13.5px;line-height:1.55;color:var(--fg);transition:background .15s,border-color .15s}
.tp-slip::before{content:"";position:absolute;left:0;top:0;bottom:0;width:34px;background:#e7d8aa;border-right:1px solid #cdb97c}
.tp-slip::after{content:"";position:absolute;left:34px;top:-1px;bottom:-1px;width:5px;background:repeating-linear-gradient(180deg,rgba(143,110,40,.28) 0 1px,transparent 1px 7px);pointer-events:none}
.tp-slip input{position:absolute;opacity:0;width:1px;height:1px}
.tp-box{position:absolute;left:10px;top:50%;width:16px;height:16px;margin-top:-8px;border:1.5px solid #5a4a2a;border-radius:2px;background:#fffaf0}
.tp-slip input:checked+.tp-box::after{content:"";position:absolute;left:4px;top:-1px;width:5px;height:10px;border:solid var(--red);border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.tp-slip input:focus-visible+.tp-box{outline:2px solid var(--gold);outline-offset:2px}
.tp-slip:hover{border-color:#b9a15a}
.tp-slip:has(input:checked){background:#f7efd7;border-color:#c9b274}
.tp-slip:has(input:checked) .tp-tx{color:var(--fg2)}
.tp-no{flex:none;width:1.2em;font-weight:800;color:var(--red)}
.tp-tx{min-width:0}
.tp-tx b{font-weight:800}
.tp-tx .tp-pay-sm{font:italic 700 16px/1 var(--display);font-variant-numeric:tabular-nums}
.tp-steps-done{display:none;align-items:center;gap:10px;margin:8px 0 0;font-size:13px;font-weight:800;color:#1f6b3e}
.tp-steps.all .tp-steps-done{display:flex}
.tp-steps-done i{flex:none;width:40px;height:40px;background:url(ink3/seal-zhun.webp) center/contain no-repeat;rotate:-6deg;animation:tp-pop .5s cubic-bezier(.3,1.6,.5,1) both}
.tp-warn{margin:10px 0 0;padding:9px 12px;border-left:3px solid var(--red);background:var(--red-ink);color:#7d1a22;font-size:12.5px;line-height:1.65}
.tp-warn b{font-weight:800}
/* 状态区 */
.tp-stat{display:flex;align-items:center;gap:16px;margin:20px 0 0;padding:16px 18px;border:1px dashed var(--line-strong);border-radius:3px;background:rgba(243,238,226,.45)}
.tp-stat p{margin:0}
.tp-stat b{font-weight:800}
.tp-st-t{display:block;font-size:15px;font-weight:800;color:var(--fg)}
.tp-st-s{display:block;margin-top:3px;font-size:13px;line-height:1.6;color:var(--fg2)}
.tp-msg{margin-top:6px!important;font-size:12.5px;color:#6b4c12}
.tp-net{margin-top:6px!important;font-size:12.5px;color:var(--muted)}
.tp-rip{position:relative;flex:none;width:48px;height:48px}
.tp-rip::before{content:"";position:absolute;inset:17px;border-radius:50%;background:var(--ink);opacity:.82}
.tp-rip i{position:absolute;inset:0;border-radius:50%;border:1.5px solid var(--ink);opacity:0;animation:tp-ripple 2.6s ease-out infinite}
.tp-rip i:nth-child(2){animation-delay:.87s}
.tp-rip i:nth-child(3){animation-delay:1.74s}
@keyframes tp-ripple{0%{transform:scale(.36);opacity:.55}100%{transform:scale(1);opacity:0}}
.tp-stat.seen{border-style:solid;border-color:var(--gold);background:var(--gold-ink)}
.tp-stat.seen .tp-rip::before{background:var(--gold)}
.tp-stat.seen .tp-rip i{border-color:var(--gold);animation-duration:1.6s}
.tp-bar{display:block;position:relative;height:5px;margin-top:9px;overflow:hidden;background:rgba(148,102,26,.18);border-radius:3px}
.tp-bar::after{content:"";position:absolute;top:0;bottom:0;width:34%;background:var(--gold);border-radius:3px;animation:tp-slide 1.5s ease-in-out infinite}
@keyframes tp-slide{from{left:-36%}to{left:102%}}
.tp-stat.pause{border-style:solid;border-color:var(--gold);background:var(--gold-ink);color:#6b4c12}
.tp-stat.pause .tp-st-s{margin-top:0;font-size:14px;line-height:1.75;color:#6b4c12}
.tp-stat.pause .tp-st-s b{color:var(--fg)}
.tp-pause-ic{flex:none;width:46px;height:46px;background:var(--gold);rotate:-6deg;-webkit-mask:url(ink2/seal-wait.webp) center/contain no-repeat;mask:url(ink2/seal-wait.webp) center/contain no-repeat}
.tp-bill.paused .tp-seal.wait{opacity:.5}
.tp-stat.done{border-style:solid;border-color:#2e8a52;background:var(--ok-ink)}
.tp-gain{flex:none;display:flex;flex-direction:column;gap:2px}
.tp-gain small{font-size:12px;font-weight:800;letter-spacing:.24em;color:#1f6b3e}
.tp-gain b{font:italic 700 clamp(34px,5vw,48px)/1 var(--display);font-variant-numeric:tabular-nums;color:#1f6b3e}
.tp-stat.done .tp-st-s b{color:var(--fg)}
.tp-stat.end{border-style:solid;border-color:var(--line-strong);background:rgba(243,238,226,.7)}
.tp-stat.end .tp-st-t{color:var(--red)}
.tp-stat a{color:var(--red);text-decoration:underline;text-underline-offset:2px}
/* 按钮行与交易哈希 */
.tp-acts{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;margin:16px 0 0}
.tp-acts .btn:first-child{height:42px;padding:0 24px;font-size:15px;letter-spacing:.1em}
.tp-acts .gap{flex:1}
.tp-hash{display:none;margin:12px 0 0;padding:12px 14px;border:1px solid var(--line);border-radius:3px;background:rgba(243,238,226,.5)}
.tp-hash.on{display:block}
.tp-hash label.f{margin:0 0 8px}
.tp-hash .row{display:flex;gap:10px;align-items:flex-start}
.tp-hash .row label.f{flex:1;min-width:0}
.tp-hash input[type=text]{font:12.5px var(--mono);letter-spacing:0}
.tp-hash p{margin:0;font-size:12px;color:var(--muted)}
.tp-bal{margin-top:6px!important;font-size:13px}
.tp-bal b{font:italic 700 20px/1 var(--display);font-variant-numeric:tabular-nums;color:var(--fg)}

/* ================= 选金额 ================= */
.tp-pick{max-width:900px;padding:24px 28px}
.tp-pick h3{font:900 19px/1.2 var(--tp-serif);letter-spacing:.2em;margin:0 0 6px}
.tp-sub{margin:0 0 16px;font-size:13px;line-height:1.7;color:var(--fg2)}
.tp-chips{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 16px}
.tp-chip{height:48px;min-width:88px;padding:0 20px;font:italic 700 23px/1 var(--display);font-variant-numeric:tabular-nums;color:var(--fg)}
.tp-chip small{font:600 11px var(--mono);font-style:normal;letter-spacing:.06em;color:var(--muted);margin-left:5px}
.tp-chip.on{color:var(--red)}
.tp-chip.on small{color:var(--red)}
.tp-chip:not(.on):hover{color:var(--red)}
.tp-custom{max-width:420px;margin:0 0 6px}
.tp-amtrow{display:flex;align-items:center;gap:10px;max-width:340px}
.tp-amtrow input{flex:1;min-width:0;height:46px;font:italic 700 22px var(--display);font-variant-numeric:tabular-nums}
.tp-amtrow input::placeholder{font:400 14px var(--sans);font-style:normal;color:var(--muted)}
.tp-amtrow b{flex:none;font:700 13px var(--mono);letter-spacing:.08em;color:var(--fg2)}
.tp-prev{display:flex;flex-wrap:wrap;gap:2px 18px;align-items:baseline;margin:10px 0 16px;padding:10px 14px;border-left:3px solid var(--gold);background:var(--gold-ink);font-size:13px;line-height:1.7;color:#6b4c12}
.tp-prev b{font:italic 700 18px/1 var(--display);font-variant-numeric:tabular-nums;color:var(--fg)}
.tp-prev.err{border-left-color:var(--red);background:var(--red-ink);color:#7d1a22}
.tp-create{width:100%;max-width:340px;height:48px;font-size:16px;letter-spacing:.3em;text-indent:.3em}
.tp-fine{margin:14px 0 0;font-size:12px;line-height:1.7;color:var(--muted)}
.tp-limit{padding:16px 18px}
.tp-limit h3{margin:0 0 6px;font-size:14px}
.tp-limit p{margin:0;font-size:13px;line-height:1.7;color:var(--fg2)}
.tp-limit .btn{margin-top:10px}

/* ================= 侧栏：怎么充、提醒 ================= */
.tp-how{padding:18px 20px}
.tp-how h3{margin:0 0 12px;font:900 16px/1.2 var(--tp-serif);letter-spacing:.16em}
.tp-how ol{margin:0;padding:0;list-style:none;counter-reset:s}
.tp-how li{position:relative;margin:0 0 12px;padding-left:34px;font-size:13px;line-height:1.65;color:var(--fg2)}
.tp-how li:last-child{margin-bottom:0}
.tp-how li::before{counter-increment:s;content:counter(s);position:absolute;left:0;top:-1px;width:24px;height:24px;display:grid;place-items:center;background:var(--red);color:#fff;font:italic 700 14px/1 var(--display);border-radius:3px;rotate:-4deg}
.tp-how li b{color:var(--fg);font-weight:700}
.tp-tip{padding:14px 16px;border-left:3px solid var(--gold);background:var(--gold-ink);color:#6b4c12;font-size:12.5px;line-height:1.7}
.tp-tip b{font-weight:800}
.tp-tip.red{border-left-color:var(--red);background:var(--red-ink);color:#7d1a22}
.tp-more{padding:14px 18px}
.tp-more h3{margin:0;font-size:14px}
.tp-more p{margin:8px 0 0;font-size:12.5px;line-height:1.7;color:var(--fg2)}
.tp-more .btn{margin-top:10px}

/* ================= 记录、常见问题 ================= */
.tp-hist h3,.tp-faq h3{font:900 17px/1.2 var(--tp-serif);letter-spacing:.18em}
.tp-hist h3 .more{font:500 12px var(--sans);letter-spacing:0}
.tp-hist .tbl-wrap{border-top:1px solid var(--line-strong)}
.tp-hist td.c-amt{font:italic 700 15px var(--display);font-variant-numeric:tabular-nums;letter-spacing:0;white-space:nowrap}
.tp-hist td.c-tx a{font:12px var(--mono);color:var(--fg2);border-bottom:1px solid var(--line-strong)}
.tp-hist td.c-tx a:hover{color:var(--red);border-bottom-color:var(--red)}
.tp-hist td.c-act{text-align:right;white-space:nowrap}
.tp-hist tr.cur{background:var(--card2)}
.tp-q{border-top:1px solid var(--line)}
.tp-q:first-of-type{border-top:0}
.tp-q summary{position:relative;list-style:none;cursor:pointer;padding:13px 28px 13px 2px;font-size:14px;font-weight:700;color:var(--fg)}
.tp-q summary::-webkit-details-marker{display:none}
.tp-q summary::after{content:"";position:absolute;right:6px;top:50%;width:8px;height:8px;margin-top:-6px;border:solid var(--muted);border-width:0 2px 2px 0;transform:rotate(45deg);transition:transform .18s}
.tp-q[open] summary::after{transform:rotate(-135deg);margin-top:-2px}
.tp-q summary:hover{color:var(--red)}
.tp-q p{max-width:64em;margin:0 0 14px;padding:0 2px;font-size:13px;line-height:1.8;color:var(--fg2)}
.tp-q p b{color:var(--fg);font-weight:700}

/* 额度大卡片里的「充值」小按钮；点它时把分页签带到固定顶栏下面 */
#root .tabs{scroll-margin-top:76px}
.quota-big .lbl .tp-go{margin-left:12px;vertical-align:middle;letter-spacing:.14em}

/* ================= 手机 ================= */
@media (max-width:1100px){
  .tp-top{grid-template-columns:minmax(0,1fr)}
  .tp-bill,.tp-pick{max-width:none}
}
@media (max-width:760px){
  .tp-bill{padding:22px 18px 20px}
  .tp-bill>.tp-c{width:18px;height:18px}
  .tp-bill>.tp-c.tl,.tp-bill>.tp-c.tr{top:12px}.tp-bill>.tp-c.bl,.tp-bill>.tp-c.br{bottom:12px}
  .tp-bill>.tp-c.tl,.tp-bill>.tp-c.bl{left:12px}.tp-bill>.tp-c.tr,.tp-bill>.tp-c.br{right:12px}
  .tp-head{padding-right:84px;min-height:56px;gap:10px}
  .tp-logo{width:36px;height:36px}
  .tp-ttl h3{font-size:23px;letter-spacing:.2em}
  .tp-ttl p{letter-spacing:.08em}
  .tp-seal{right:22px;top:20px;width:74px;height:74px}
  .tp-pay{font-size:clamp(44px,13vw,56px)}
  .tp-time{grid-template-columns:auto minmax(0,1fr);align-items:end;gap:14px 14px;padding:12px 14px 6px}
  .tp-clock{grid-column:1;grid-row:1}
  .tp-until{grid-column:2;grid-row:1}
  .tp-rack{grid-column:1/-1;grid-row:2}
  .tp-adr{grid-template-columns:minmax(0,1fr)}
  .tp-addrtxt{font-size:17px;max-width:10.6em}
  .tp-qrcol{align-items:flex-start}
  .tp-qrbox{max-width:190px}
  .tp-qrcol p{text-align:left}
  .tp-two{grid-template-columns:minmax(0,1fr);gap:20px}
  .tp-stat{align-items:flex-start;gap:12px;padding:14px}
  .tp-acts .btn:first-child{width:100%}
  .tp-pick{padding:18px 16px}
  .tp-chip{min-width:72px;padding:0 14px}
  .tp-create{max-width:none}
  .tp-amtrow{max-width:none}
  /* 记录：一行变成一小张卡 */
  .tp-hist table,.tp-hist tbody,.tp-hist tr,.tp-hist td{display:block}
  .tp-hist thead{display:none}
  .tp-hist tr{display:grid;grid-template-columns:1fr auto;align-items:center;gap:3px 10px;padding:12px 8px;border-top:1px solid var(--line)}
  .tp-hist tr:first-child{border-top:0}
  .tp-hist td{height:auto;padding:0;border:0;font-weight:400}
  .tp-hist td.c-amt{grid-column:1;grid-row:1;font-size:18px;text-align:left}
  .tp-hist td.c-st{grid-column:2;grid-row:1;justify-self:end}
  .tp-hist td.c-time{grid-column:1;grid-row:2;color:var(--muted);font-size:12px}
  .tp-hist td.c-get{grid-column:2;grid-row:2;justify-self:end;font-size:12px;color:var(--fg2)}
  .tp-hist td.c-tx{grid-column:1;grid-row:3}
  .tp-hist td.c-act{grid-column:2;grid-row:3;justify-self:end;margin-top:4px}
  .tp-hist td:empty{display:none}
  .tp-hist .tbl-wrap{overflow:visible;border-bottom:0}
}
@media (max-width:420px){
  .tp-time{padding:12px 12px 10px}
  .tp-clock b{font-size:32px}
}

/* ================= 减少动态：香变进度条，印章直接落定，不再有涟漪、烟、火星 ================= */
@media (prefers-reduced-motion:reduce){
  .tp-bill.tp-enter,.tp-bill.thud,.tp-seal.slam,.tp-same i,.tp-steps-done i,.tp-chk.wait::before,.tp-rip i,.tp-bar::after,.tp-rack .stick::after,.tp-rack .smoke path{animation:none!important}
  .tp-rack .stick{transition:none}
  .tp-rack .smoke,.tp-rack .ash,.tp-rack .base,.tp-rack .stick::after,.tp-rack .stick::before,.tp-rip i{display:none!important}
  .tp-rack{height:16px;align-self:center}
  .tp-time{align-items:center}
  .tp-rack .ghost{left:0;bottom:3px;height:10px;border:0;border-radius:5px;background:var(--line)}
  .tp-rack .stick{left:0;bottom:3px;height:10px;width:calc(100% * var(--f,1));border-radius:5px;background:var(--red);box-shadow:none}
  .tp-bar::after{width:100%;left:0}
  .tp-q summary::after{transition:none}
}