* {
            box-sizing: border-box;
        }

        html,
        body {
            margin: 0;
            padding: 0;
            min-height: 100%;
        }

        body {
            background:
                    radial-gradient(circle at 50% 0%, #eef7ff 0, #f5f8fb 35%, #f5f6f8 70%);
            font-family:
                    -apple-system,
                    BlinkMacSystemFont,
                    "PingFang SC",
                    "Microsoft YaHei",
                    sans-serif;
            color: #202124;
        }

        .page {
            width: 100%;
            max-width: 460px;
            margin: 0 auto;
            padding: 42px 18px 30px;
        }

        /* =========================
           顶部
        ========================= */

        .brand {
            text-align: center;
            margin-bottom: 26px;
        }

        .brand-icon {
            width: 44px;
            height: 44px;
            margin: 0 auto 12px;
            border-radius: 14px;
            background: linear-gradient(135deg, #1677ff, #55a8ff);
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 8px 20px rgba(22, 119, 255, .18);
        }

        .brand-icon svg {
            width: 24px;
            height: 24px;
            fill: #fff;
        }

        .brand-title {
            font-size: 20px;
            font-weight: 600;
        }

        .brand-subtitle {
            font-size: 13px;
            color: #9a9fa7;
            margin-top: 7px;
        }

        /* =========================
           主卡片
        ========================= */

        .card {
            background: rgba(255, 255, 255, .96);
            border-radius: 20px;
            padding: 30px 24px 26px;
            box-shadow:
                    0 12px 40px rgba(30, 55, 80, .08),
                    0 2px 8px rgba(30, 55, 80, .04);
        }

        /* =========================
           安全扫描状态
        ========================= */

        #checkingView {
            padding: 18px 0 14px;
            text-align: center;
        }

        .scanner {
            width: 150px;
            height: 150px;
            margin: 0 auto 30px;
            position: relative;
        }

        .scanner-circle {
            position: absolute;
            border-radius: 50%;
            border: 1px solid rgba(22, 119, 255, .15);
        }

        .scanner-circle.c1 {
            width: 150px;
            height: 150px;
            left: 0;
            top: 0;
            animation: pulse 2s infinite;
        }

        .scanner-circle.c2 {
            width: 116px;
            height: 116px;
            left: 17px;
            top: 17px;
            border-color: rgba(22, 119, 255, .22);
        }

        .scanner-circle.c3 {
            width: 82px;
            height: 82px;
            left: 34px;
            top: 34px;
            background: #edf6ff;
            border: 0;
            box-shadow: inset 0 0 0 1px rgba(22,119,255,.08);
        }

        .shield {
            position: absolute;
            width: 44px;
            height: 50px;
            left: 53px;
            top: 49px;
            z-index: 3;
        }

        .shield svg {
            width: 100%;
            height: 100%;
            fill: #1677ff;
        }

        /* 雷达扫描线 */

        .scan-line {
            position: absolute;
            left: 23px;
            top: 74px;
            width: 104px;
            height: 2px;
            background: linear-gradient(
                    90deg,
                    transparent,
                    #1677ff,
                    transparent
            );
            box-shadow: 0 0 12px rgba(22,119,255,.65);
            z-index: 5;
            animation: scan 1.8s ease-in-out infinite;
        }

        @keyframes scan {
            0% {
                transform: translateY(-42px);
                opacity: .2;
            }

            50% {
                opacity: 1;
            }

            100% {
                transform: translateY(42px);
                opacity: .2;
            }
        }

        @keyframes pulse {
            0% {
                transform: scale(.95);
                opacity: .6;
            }

            50% {
                transform: scale(1.05);
                opacity: 1;
            }

            100% {
                transform: scale(.95);
                opacity: .6;
            }
        }

        .checking-title {
            font-size: 18px;
            font-weight: 600;
            margin-bottom: 10px;
        }

        .checking-desc {
            font-size: 13px;
            color: #969ba3;
            line-height: 1.8;
        }

        .checking-text {
            margin-top: 24px;
            display: inline-flex;
            align-items: center;
            padding: 8px 14px;
            background: #f2f8ff;
            color: #4786c7;
            border-radius: 20px;
            font-size: 12px;
        }

        .dot-loading {
            margin-left: 4px;
        }

        .dot-loading span {
            animation: dot 1.4s infinite;
            opacity: .2;
        }

        .dot-loading span:nth-child(2) {
            animation-delay: .2s;
        }

        .dot-loading span:nth-child(3) {
            animation-delay: .4s;
        }

        @keyframes dot {
            0%, 100% {
                opacity: .2;
            }

            50% {
                opacity: 1;
            }
        }

        /* =========================
           二维码支付状态
        ========================= */

        #payView {
            display: none;
            text-align: center;
        }

        .success-icon {
            width: 38px;
            height: 38px;
            margin: 0 auto 9px;
            background: #ecf8f1;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .success-icon svg {
            width: 21px;
            height: 21px;
            fill: #18a957;
        }

        .ready-title {
            font-size: 17px;
            font-weight: 600;
        }

        .ready-desc {
            font-size: 12px;
            color: #999;
            margin-top: 5px;
        }

        /* QR */

        .qr-wrap {
            width: 220px;
            height: 220px;
            margin: 22px auto 18px;
            padding: 10px;
            border-radius: 15px;
            background: #fff;
            border: 1px solid #edf0f3;
            box-shadow: 0 5px 20px rgba(0,0,0,.05);
            position: relative;
        }

        #qrcode {
            width: 198px;
            height: 198px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        #qrcode img,
        #qrcode canvas {
            max-width: 100%;
            max-height: 100%;
        }

        /* 四角 */

        .qr-corner {
            position: absolute;
            width: 18px;
            height: 18px;
            border-color: #1677ff;
        }

        .qr-corner.lt {
            top: -3px;
            left: -3px;
            border-top: 2px solid;
            border-left: 2px solid;
            border-radius: 5px 0 0 0;
        }

        .qr-corner.rt {
            top: -3px;
            right: -3px;
            border-top: 2px solid;
            border-right: 2px solid;
            border-radius: 0 5px 0 0;
        }

        .qr-corner.lb {
            bottom: -3px;
            left: -3px;
            border-bottom: 2px solid;
            border-left: 2px solid;
            border-radius: 0 0 0 5px;
        }

        .qr-corner.rb {
            bottom: -3px;
            right: -3px;
            border-bottom: 2px solid;
            border-right: 2px solid;
            border-radius: 0 0 5px 0;
        }

        /* 金额 */

        .amount-label {
            color: #999;
            font-size: 13px;
            margin-top: 4px;
        }

        .amount {
            margin-top: 5px;
            font-size: 32px;
            line-height: 42px;
            font-weight: 650;
            letter-spacing: -.5px;
            color: #16181c;
        }

        .amount .symbol {
            font-size: 19px;
            margin-right: 3px;
            font-weight: 500;
        }

        /* 倒计时 */

        .expire {
            margin: 12px 0 20px;
            color: #999;
            font-size: 13px;
        }

        .expire-time {
            color: #ef6c4d;
            font-weight: 600;
            font-variant-numeric: tabular-nums;
        }

        /* button */

        .pay-btn {
            width: 100%;
            height: 50px;
            border: 0;
            outline: 0;
            border-radius: 12px;
            background: linear-gradient(135deg, #1677ff, #3d91ff);
            color: #fff;
            font-size: 16px;
            font-weight: 500;
            cursor: pointer;
            box-shadow: 0 8px 18px rgba(22,119,255,.20);
            transition: transform .15s, opacity .15s;
        }

        .pay-btn:active {
            transform: scale(.98);
        }

        .pay-btn:disabled {
            opacity: .5;
            cursor: not-allowed;
        }

        .pay-tip {
            font-size: 12px;
            color: #aaa;
            margin-top: 15px;
        }

        /* =========================
           订单信息
        ========================= */

        .order-info {
            margin-top: 17px;
            padding-top: 17px;
            border-top: 1px solid #f1f2f4;
        }

        .order-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            min-height: 27px;
            font-size: 12px;
        }

        .order-label {
            color: #aaa;
        }

        .order-value {
            color: #777;
            max-width: 220px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        /* =========================
           Footer
        ========================= */

        .footer {
            margin-top: 23px;
            text-align: center;
            color: #b0b4ba;
            font-size: 11px;
            line-height: 1.8;
        }

        .safe {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 5px;
            margin-bottom: 4px;
            color: #8e969f;
        }

        .safe svg {
            width: 13px;
            height: 13px;
            fill: #8e969f;
        }

        /* =========================
           过期
        ========================= */

        #expiredView {
            display: none;
            text-align: center;
            padding: 40px 0;
        }

        .expired-icon {
            width: 70px;
            height: 70px;
            border-radius: 50%;
            background: #f5f5f5;
            margin: 0 auto 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #aaa;
            font-size: 32px;
        }

        .expired-title {
            font-size: 18px;
            font-weight: 600;
        }

        .expired-desc {
            color: #999;
            font-size: 13px;
            margin-top: 9px;
        }

        @media (max-width: 400px) {

            .page {
                padding: 25px 14px;
            }

            .card {
                padding: 25px 19px;
            }

            .qr-wrap {
                width: 205px;
                height: 205px;
            }

            #qrcode {
                width: 183px;
                height: 183px;
            }
        }

/* ===== unified result states ===== */
.pay-page { display: none; }
.pay-page.is-active { display: block; }
.result-view { text-align: center; padding: 8px 0 0; }
.result-view .status-icon { width:88px;height:88px;margin:0 auto 24px;border-radius:50%;display:flex;align-items:center;justify-content:center;position:relative; }
.result-view .status-icon svg { width:45px;height:45px; }
.result-view .status-success { background:#ecf9f2; color:#20b26b; }
.result-view .status-success:after { content:"";position:absolute;width:88px;height:88px;border-radius:50%;border:1px solid rgba(32,178,107,.18);animation:successPulse 2s infinite; }
.result-view .status-success svg { fill:#20b26b; }
@keyframes successPulse { 0%{transform:scale(.95);opacity:1}70%,100%{transform:scale(1.18);opacity:0} }
.result-view .status-expired { background:#fff7e8; }
.result-view .status-expired svg { fill:#e9a23b; }
.result-view .status-error { background:#fff0f0; }
.result-view .status-error svg { fill:#e85d5d; }
.result-view .status-title { font-size:21px;font-weight:600;color:#202124; }
.result-view .status-desc { margin-top:9px;color:#969ba3;font-size:13px;line-height:1.7; }
.result-view .result-amount-area { margin-top:27px; }
.result-view .result-amount-label { color:#aaa;font-size:12px; }
.result-view .result-amount { margin-top:4px;font-size:34px;font-weight:650;letter-spacing:-.5px;color:#181a1e; }
.result-view .result-amount-symbol { font-size:19px;font-weight:500;margin-right:3px; }
.result-view .separator { height:1px;background:#f0f1f3;margin:27px 0 18px; }
.result-view .result-order-info { text-align:left; }
.result-view .result-order-row { display:flex;align-items:center;justify-content:space-between;min-height:32px;gap:20px;font-size:12px; }
.result-view .result-order-label { color:#aaa;flex-shrink:0; }
.result-view .result-order-value { color:#666;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.result-view .actions { margin-top:24px; }
.result-view .btn { width:100%;height:50px;border-radius:12px;font-size:15px;cursor:pointer;transition:transform .15s,opacity .15s; }
.result-view .btn:active { transform:scale(.98); }
.result-view .btn-primary { border:0;background:linear-gradient(135deg,#1677ff,#3d91ff);color:#fff;box-shadow:0 8px 18px rgba(22,119,255,.18); }
.result-view .btn-default { margin-top:11px;border:1px solid #e5e7ea;background:#fff;color:#666; }
.result-view .error-box { margin-top:22px;padding:13px 15px;background:#fff7f7;border-radius:9px;color:#a76868;font-size:12px;line-height:1.7;text-align:left;word-break:break-all; }
.result-view .error-title { color:#d05d5d;font-weight:500;margin-bottom:3px; }
@media (prefers-reduced-motion: reduce) { .result-view .status-success:after { animation:none; } }
.pay-message{position:fixed;left:50%;top:30px;z-index:99999;display:flex;align-items:center;gap:8px;max-width:calc(100% - 40px);padding:11px 17px;background:rgba(30,32,35,.92);color:#fff;border-radius:10px;font-size:13px;line-height:20px;box-shadow:0 8px 30px rgba(0,0,0,.15);opacity:0;transform:translate(-50%,-10px);transition:all .25s}.pay-message.show{opacity:1;transform:translate(-50%,0)}.pay-message-icon{width:18px;height:18px;display:flex;align-items:center;justify-content:center;border-radius:50%;font-size:11px;font-weight:bold;flex-shrink:0}.pay-message-success .pay-message-icon{background:#20b26b}.pay-message-error .pay-message-icon{background:#e85d5d}.pay-message-warning .pay-message-icon{background:#e9a23b}.pay-message-info .pay-message-icon{background:#1677ff}