/* 收银台高级主题：炭黑基底、电竞蓝重点、暖橙提示、柔白内容卡 */
:root { --pay-ink:#111827; --pay-blue:#2f6fed; --pay-blue2:#5a93ff; --pay-orange:#ff8a3d; --pay-paper:#f6f8fc; }
body[data-tpl] { font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif; }
body[data-tpl="classic"], body[data-tpl="wechat"], body[data-tpl="minimal"], body[data-tpl="immersive"], body[data-tpl="split"], body[data-tpl="guochao"] { background:radial-gradient(600px 300px at 50% 0, rgba(90,147,255,.16), transparent 70%), var(--pay-paper); color:var(--pay-ink); }
body[data-tpl="dark"] { background:radial-gradient(760px 380px at 15% 0, rgba(47,111,237,.34), transparent 65%), radial-gradient(680px 360px at 100% 30%, rgba(255,138,61,.12), transparent 66%), #0e1627; }
.stage { padding:32px 16px 48px; }
.card { border-color:rgba(182,199,227,.72); box-shadow:0 24px 70px rgba(24,45,82,.16); }
body[data-tpl="classic"] .card, body[data-tpl="minimal"] .card, body[data-tpl="immersive"] .card, body[data-tpl="split"] .card, body[data-tpl="guochao"] .card { background:rgba(255,255,255,.96); }
body[data-tpl="classic"] .amount, body[data-tpl="minimal"] .amount { color:var(--pay-blue); }
body[data-tpl="classic"] .pay-btn, body[data-tpl="minimal"] .pay-btn, body[data-tpl="split"] .pay-btn, body[data-tpl="immersive"] .pay-btn, body[data-tpl="guochao"] .pay-btn { background:linear-gradient(135deg,var(--pay-blue),var(--pay-blue2)); color:#fff; box-shadow:0 10px 22px rgba(47,111,237,.22); }
body[data-tpl="classic"] .pay-btn:hover, body[data-tpl="minimal"] .pay-btn:hover, body[data-tpl="split"] .pay-btn:hover, body[data-tpl="immersive"] .pay-btn:hover, body[data-tpl="guochao"] .pay-btn:hover { transform:translateY(-1px); box-shadow:0 14px 28px rgba(47,111,237,.3); }
.pay-btn, .tabs button, .of-go { transition:transform .18s ease, box-shadow .18s ease, filter .18s ease; }
.pay-btn:focus-visible, .tabs button:focus-visible, .of-go:focus-visible { outline:3px solid rgba(47,111,237,.28); outline-offset:2px; }
.qr, .qr-wrap, .qr-panel { border-color:#dce5f2; }
.amt-warn, .of-warn { color:#a95a21; background:#fff6ed; border-color:#ffd9b9; }
.status-line b, .rows .r .cd b, .grid-info .v.hi { color:var(--pay-orange); }
.tabs button.on { border-color:var(--pay-blue); color:var(--pay-blue); background:#f1f6ff; }
body[data-tpl="dark"] .tabs button.on { color:#fff; background:linear-gradient(135deg,var(--pay-blue),var(--pay-blue2)); }
body[data-tpl="dark"] .pay-btn { background:linear-gradient(135deg,var(--pay-blue),var(--pay-orange)); color:#fff; box-shadow:0 10px 28px rgba(47,111,237,.32); }
body[data-tpl="dark"] .card { border-color:#30466f; box-shadow:0 26px 80px rgba(3,9,20,.58); }
.pay-toast { background:rgba(17,24,39,.94); border:1px solid rgba(255,255,255,.1); box-shadow:0 10px 28px rgba(0,0,0,.18); }
.foot { color:#9aa8bd; }
[data-pay-btn]:not(:disabled):hover { filter:brightness(1.06); }
@media (max-width:480px) { .stage { padding:18px 10px 38px; } .card { border-radius:16px; } }
.cp-pay-brand{display:flex;align-items:center;gap:9px;align-self:flex-start;margin:0 auto 12px;width:min(400px,100%);color:#6f8098;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}.cp-pay-brand small{display:block;margin-top:3px;font-size:7px;letter-spacing:.16em;font-weight:500;color:#9aa8bd}.cp-pay-logo{display:grid;place-items:center;width:25px;height:25px;border-radius:8px;background:linear-gradient(135deg,var(--pay-blue),var(--pay-blue2));color:#fff;font-size:18px;letter-spacing:0;box-shadow:0 5px 12px rgba(47,111,237,.22)}body[data-tpl="dark"] .cp-pay-brand{color:#aebbd0}body[data-tpl="dark"] .cp-pay-brand small{color:#8094b1}
/* Contained layout rules; status/data-mode switching remains owned by pay.css. */
body.cp-pay{margin:0} .cp-pay *{box-sizing:border-box}
.cp-pay .stage{min-height:100svh;gap:0}
.cp-pay .card{border-radius:21px;border:1px solid #dfe7f4;box-shadow:0 18px 50px #1c3f6b12}
.cp-pay .amount,.cp-pay .amt .n{font-weight:700;letter-spacing:-.055em;font-variant-numeric:tabular-nums}
.cp-pay .qr img{border-radius:0;filter:none}
.cp-pay .qr{background:#fff;border-radius:10px}
.cp-pay .amt-warn{font-size:11px!important;line-height:1.8;border:1px solid #f5d8be!important;background:#fff7ef!important;color:#af7343!important;font-weight:400}
.cp-pay .tabs button{border-radius:9px;font-size:12px;padding:12px 8px;border-color:#e1e7f1;background:#fff;color:#8a9bb2;box-shadow:none}
.cp-pay .tabs button.on{color:#3e75c5;border:1px solid #bfd4f5;background:#edf4ff;box-shadow:none}
.cp-pay .tabs button[data-disabled="1"]{opacity:.65}
.cp-pay .pay-btn{font-size:13px;letter-spacing:.02em;font-weight:500;box-shadow:0 8px 17px #3478e81c;border-radius:10px}
.cp-pay .scan-tip{font-size:12px;color:#6e829f;line-height:1.8}
.cp-pay .pending .order-no{color:#99a8bc}
.cp-pay .cp-official{width:100%;max-width:100%;text-align:center;min-width:0;color:#7386a0}
.cp-pay .cp-official [data-of-loading]{padding:40px 12px;font-size:12px;line-height:1.8}
.cp-pay .cp-official [data-of-loading][data-kind='err']{color:#cb665f;background:#fff5f3;border-radius:10px}
.cp-pay .cp-official [data-of-qr] img{width:min(240px,100%);height:auto;aspect-ratio:1;object-fit:contain;margin:0 auto;background:white;padding:8px;border:1px solid #e4ebf6;box-sizing:border-box}
.cp-pay .of-go{border-radius:9px;background:#3478e8;font-size:12px;padding:11px 20px;max-width:100%;box-sizing:border-box;color:#fff}
.cp-pay .of-qr-err{width:100%;height:auto;min-height:180px}
.cp-pay body[data-mode='official']{color:inherit}
.cp-pay[data-mode='official'] [data-qr-only]{display:none!important}
.cp-pay .pay-btn[data-loading='1']{opacity:.65;box-shadow:none}
.cp-pay .pay-btn[data-loading='1']:before{content:'';display:inline-block;vertical-align:-2px;width:11px;height:11px;margin-right:8px;border:2px solid #ffffff60;border-top-color:#fff;border-radius:50%;animation:ofSpin .8s linear infinite}
.cp-pay .pay-btn[data-state='paid']{background:#299c78!important;color:#fff}
.cp-pay .paid .t{color:#268e6c!important;font-size:21px!important;letter-spacing:0!important}
.cp-pay .paid .s,.cp-pay .expired .s{line-height:1.9;font-size:12px!important}
.cp-pay .expired .t{color:#cd8055!important;letter-spacing:0!important}
body[data-tpl='classic'] .card{padding:34px 28px;max-width:410px}
body[data-tpl='classic'] h1{margin:0 0 26px;font-size:18px;color:#3a5376}
body[data-tpl='classic'] .amount{font-size:48px;color:#2b4264}
body[data-tpl='classic'] .qr{box-sizing:border-box;width:246px;height:246px;padding:12px;margin-top:24px;border-color:#e3eaf5;box-shadow:0 8px 18px #355d9410}
body[data-tpl='classic'] .status-line{color:#90a0b6;border-color:#e5ecf6;font-size:11px;margin-top:23px}
body[data-tpl='classic'] .status-line b{color:#d59259}
body[data-tpl='classic'] .foot{font-size:10px;color:#a3b1c5}
body[data-tpl='wechat'] .card{border-radius:21px;max-width:410px}
body[data-tpl='wechat'] .head{padding:25px 25px 52px;background:linear-gradient(120deg,#233b5e,#3e7ddd);color:white}
body[data-tpl='wechat'] .shop{font-size:12px;color:#e0edff}
body[data-tpl='wechat'] .head .amt{font-size:42px;margin-top:20px;letter-spacing:-.04em}
body[data-tpl='wechat'] .qr-panel{border:1px solid #e2eafa;box-shadow:0 8px 23px #1c3f6b10;padding:22px;border-radius:15px}
body[data-tpl='wechat'] .qr{width:226px;height:226px;padding:5px;border:1px solid #e8eef8}
body[data-tpl='wechat'] .body{padding:0 20px 22px}
body[data-tpl='wechat'] .rows{font-size:11px;color:#98a8bc;padding:0 3px}
body[data-tpl='wechat'] .rows b{color:#4e6689}
body[data-tpl='wechat'] .pay-btn{background:#3478e8;color:#fff;padding:13px}
body[data-tpl='wechat'] .rows .r .cd b{color:#d38d52}
body[data-tpl='dark'] .card{max-width:410px;padding:29px 25px;background:linear-gradient(145deg,#26364e,#19253b);border:1px solid #3d5272;border-radius:22px;backdrop-filter:none;box-shadow:0 25px 70px #050c1b40}
body[data-tpl='dark'] .card:before{height:3px;background:linear-gradient(90deg,#4f8cff 10%,#ff9c57 90%)}
body[data-tpl='dark'] .brand{font-size:11px;color:#97aac7;letter-spacing:0}
body[data-tpl='dark'] .brand .chip{color:#a9c8f7;border-color:#466080;background:#273d5a;font-size:9px}
body[data-tpl='dark'] .amount{background:none;-webkit-text-fill-color:#ecf4ff;color:#ecf4ff;font-size:48px;margin-top:24px}
body[data-tpl='dark'] .amount small{-webkit-text-fill-color:#8fb6ef;color:#8fb6ef;font-size:21px}
body[data-tpl='dark'] .order-no{font-size:10px;color:#7d92b2}
body[data-tpl='dark'] .qr-wrap{width:258px;height:258px;max-width:100%;border:1px solid #465d80;background:#31445f;border-radius:18px;padding:12px;box-shadow:0 14px 26px #0a132222}
body[data-tpl='dark'] .qr-wrap:after{display:none}
body[data-tpl='dark'] .qr{padding:9px;border-radius:9px}
body[data-tpl='dark'] .scan-tip{color:#9db0cc}
body[data-tpl='dark'] .scan-tip b{color:#a9c9ff}
body[data-tpl='dark'] .amt-warn{background:#3d3430!important;color:#e0ad85!important;border-color:#645044!important}
body[data-tpl='dark'] .tabs button{background:#21324a;border-color:#3b5070;color:#91a4c1}
body[data-tpl='dark'] .tabs button.on{background:#365e99;border-color:#527fbc;color:#eaf3ff}
body[data-tpl='dark'] .cell{background:#1b2a40;border-color:#324660;border-radius:10px;padding:12px}
body[data-tpl='dark'] .cell .k{color:#7e94b5;font-size:9px}
body[data-tpl='dark'] .cell .v{color:#b9cbe7;font-size:12px;font-weight:500}
body[data-tpl='dark'] .cell .v.hi{color:#f0ac77}
body[data-tpl='dark'] .pay-btn{background:#3f7ce0;box-shadow:0 9px 20px #09172a40}
body[data-tpl='dark'] .paid .s,body[data-tpl='dark'] .expired .s{color:#91a5c3}
body[data-tpl='dark'] .paid .ico{color:#5bd2a6;background:#244a45;border-color:#42776a;box-shadow:none}
body[data-tpl='dark'] .paid .t{color:#78d4b4!important}
body[data-tpl='dark'][data-status='expired'] .amount{-webkit-text-fill-color:#ce9f83}
body[data-tpl='dark'] .cp-official{color:#8da5ca}
body[data-tpl='dark'][data-mode='official'] .qr-wrap{height:auto;min-height:258px}
body[data-tpl='minimal'] .card{max-width:410px;padding:30px 29px;box-shadow:0 12px 40px #244b7b09}
body[data-tpl='minimal'] .top .merchant{color:#426086;font-size:13px}
body[data-tpl='minimal'] .amount{color:#273f62;font-size:49px}
body[data-tpl='minimal'] .amount small{color:#859cbc;font-size:21px}
body[data-tpl='minimal'] .label{font-size:10px;letter-spacing:.1em;color:#9bacc2}
body[data-tpl='minimal'] .qr{border:1px solid #e2eaf5;padding:10px;width:246px;height:246px;box-shadow:0 8px 20px #335a8a08}
body[data-tpl='minimal'] .rows{font-size:11px}
body[data-tpl='minimal'] .row .k{color:#9aacc4}body[data-tpl='minimal'] .row .v{color:#567093}
body[data-tpl='minimal'] .row .v.cd{color:#d2925d}
body[data-tpl='immersive'] .card{max-width:410px}
body[data-tpl='immersive'] .hero{background:linear-gradient(125deg,#1e304b,#3974d2 70%,#79a5ec);padding:25px 25px 70px}
body[data-tpl='immersive'] .hero:before{background:#ffffff0b}body[data-tpl='immersive'] .hero:after{background:#ffb07822}
body[data-tpl='immersive'] .hero-top{font-size:11px}
body[data-tpl='immersive'] .hero-top .pill{font-size:9px;border:1px solid #ffffff25;background:#ffffff10}
body[data-tpl='immersive'] .amt .n{font-size:48px;letter-spacing:-.04em;text-shadow:none}
body[data-tpl='immersive'] .amt .cap,body[data-tpl='immersive'] .amt .sub{font-size:11px;color:#c0d5f8;opacity:1}
body[data-tpl='immersive'] .qr-panel{border:1px solid #e4ebf7;box-shadow:0 8px 23px #25487910;padding:22px}
body[data-tpl='immersive'] .qr{width:226px;height:226px;border:1px solid #e5ecf7;padding:6px}
body[data-tpl='immersive'] .tabs button.on{background:#eaf2ff;color:#4077ca;border-color:#bed2f2}
body[data-tpl='immersive'] .foot{background:#f7f9fd;border:1px solid #e8eef8;padding:14px;font-size:11px;color:#93a4be}
body[data-tpl='immersive'] .foot .r b{color:#5b7396}body[data-tpl='immersive'] .foot .r .cd{color:#c78b56}
body[data-tpl='split'] .card{max-width:760px}
body[data-tpl='split'] .head{padding:22px 26px;background:#f9fbff;border-color:#e5edf8}
body[data-tpl='split'] .head .m{font-size:13px;color:#4a658b}
body[data-tpl='split'] .head .secure{font-size:10px;color:#92a5bf}
body[data-tpl='split'] .split{grid-template-columns:minmax(0,1fr) 310px}
body[data-tpl='split'] .left{padding:32px 28px}
body[data-tpl='split'] .right{background:#f7faff;border-left-color:#e5edf8;padding:28px}
body[data-tpl='split'] .amount{color:#30588f;font-size:46px}
body[data-tpl='split'] .goods{background:#edf4ff;font-size:11px;color:#6185b8}
body[data-tpl='split'] .cap{font-size:10px;color:#94a7c0}
body[data-tpl='split'] .rows{font-size:11px;color:#869dbc}
body[data-tpl='split'] .row .k{color:#94a7c0}body[data-tpl='split'] .row .v{color:#587297}body[data-tpl='split'] .row .v.mono{font-size:10px}body[data-tpl='split'] .row .v.cd{color:#d39561}
body[data-tpl='split'] .qr{width:234px;height:234px;padding:10px;border-color:#dfe9f6}
body[data-tpl='split'] .cp-pay-brand{width:min(760px,100%)}
body[data-tpl='guochao'] .card{background:linear-gradient(160deg,#fffcf7,#fff 60%);border:1px solid #ecdfd3;padding:0 26px 28px}
body[data-tpl='guochao'] .card:before{height:4px;background:linear-gradient(90deg,#3d78d5,#ffac6d)}
body[data-tpl='guochao'] .deco{color:#d69562;font-size:64px;opacity:.07}
body[data-tpl='guochao'] .seal{width:47px;height:47px;background:linear-gradient(135deg,#ffaf76,#e98b49);box-shadow:0 8px 18px #d98a4520;border:1px solid #ffcba4;font-size:20px}
body[data-tpl='guochao'] .head .t{color:#465d7a;font-size:18px;letter-spacing:.1em}
body[data-tpl='guochao'] .head .s{color:#b39b85;font-size:10px;letter-spacing:.05em}
body[data-tpl='guochao'] .divider{color:#dca072;font-size:11px}
body[data-tpl='guochao'] .divider:before,body[data-tpl='guochao'] .divider:after{background:linear-gradient(90deg,transparent,#efc9a8,transparent)}
body[data-tpl='guochao'] .amount{color:#b47b4d;font-size:46px;text-shadow:none}
body[data-tpl='guochao'] .order-no{color:#b7a490;font-size:10px}
body[data-tpl='guochao'] .qr-frame{width:250px;height:250px;border-color:#edd9c7;box-shadow:0 7px 18px #976d3608}
body[data-tpl='guochao'] .qr-frame:before,body[data-tpl='guochao'] .qr-frame:after{border-color:#e3b28d}
body[data-tpl='guochao'] .scan-tip{color:#8f806f}
body[data-tpl='guochao'] .tabs button{border-color:#edddce;color:#a79481;background:#fffdfb}
body[data-tpl='guochao'] .tabs button.on{background:#fff0e3;color:#b48258;border-color:#edc8a8}
body[data-tpl='guochao'] .meta{border-color:#ecdbc9;font-size:11px;color:#ae9b88}
body[data-tpl='guochao'] .meta .r b{color:#8e7a65}body[data-tpl='guochao'] .meta .r .cd{color:#ca8e5d}
body[data-tpl='guochao'] .pay-btn{background:linear-gradient(125deg,#3e6cad,#4c85d5);box-shadow:0 8px 18px #3d6da820}
body[data-tpl='guochao'][data-mode='official'] .qr-frame{height:auto;min-height:250px}
@media(max-width:560px){body[data-tpl='split'] .split{grid-template-columns:1fr}body[data-tpl='split'] .right{border-left:0;border-top:1px solid #e5edf8}body[data-tpl='split'] .left{padding:25px}}
@media(max-width:380px){.cp-pay .stage{padding:14px 8px 26px}body[data-tpl='classic'] .card,body[data-tpl='minimal'] .card,body[data-tpl='dark'] .card{padding:27px 20px}body[data-tpl='wechat'] .qr-panel,body[data-tpl='immersive'] .qr-panel{padding:15px}.cp-pay .qr-wrap{width:242px;height:242px}.cp-pay .cp-pay-brand{padding:0 4px}.cp-pay .cp-pay-brand small{font-size:6px}body[data-tpl='guochao'] .card{padding:0 20px 24px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}
/* Preview toolbar is injected before the document with legacy inline styling. */
#payDemoBar{background:#1b2a43f5!important;border-top:1px solid #3c5372;box-shadow:0 -8px 24px #0d1a3030!important;backdrop-filter:blur(12px)}
#payDemoTpl{background:#263c5d!important;border-color:#415e87!important;color:#d5e5ff!important}
#payDemoGo{background:#3b7fe9!important;border-radius:8px!important}
#payDemoPay{background:#f0a268!important;color:#362419!important;border-radius:8px!important}
body[data-demo='1'] .stage{padding-bottom:85px}