:root {
            --bg-color: #f2f2f7; 
            --card-color: #ffffff;
            --main-text: #1c1c1e;
            --sub-text: #8e8e93;
            --primary-gray: #4b5563; 
            --border-color: #e5e5ea;
            --accent-orange: #f97316; /* 醒目橙色备用按钮 */
        }

        body {
            margin: 0;
            background-color: var(--bg-color);
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            padding: 12px 0;
        }

        .card {
            width: 92%;
            max-width: 380px;
            background: var(--card-color);
            border-radius: 24px;
            padding: 30px 24px;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
            box-sizing: border-box;
            text-align: center;
        }

        h2 { font-size: 22px; color: var(--main-text); margin: 0 0 5px 0; font-weight: 700; }
        .subtitle { color: var(--sub-text); font-size: 14px; margin-bottom: 25px; }

        .price-section { margin-bottom: 30px; }
        .price-section .amount { font-size: 42px; font-weight: 800; color: #000; }
        .price-section .currency { font-size: 20px; vertical-align: super; margin-right: 2px; font-weight: 600; }

        .form-group { text-align: left; margin-bottom: 18px; }
        .form-group label { font-size: 13px; color: var(--sub-text); margin-left: 6px; margin-bottom: 6px; display: block; }

        input[type="email"], input[type="text"], select {
            width: 100%; height: 52px; background: #f5f5f7; border: 1.5px solid transparent;
            border-radius: 12px; padding: 0 15px; font-size: 16px; box-sizing: border-box;
            outline: none; color: var(--main-text); transition: all 0.2s ease;
        }

        input:focus, select:focus { background: #fff; border-color: var(--primary-gray); }

        .terms-container {
            display: flex; align-items: flex-start; text-align: left; margin: 20px 0;
            cursor: pointer; font-size: 13px; color: var(--sub-text);
        }
        .terms-container input { margin-right: 10px; margin-top: 2px; width: 18px; height: 18px; accent-color: var(--primary-gray); }
        .terms-container a { color: var(--primary-gray); text-decoration: none; font-weight: 600; }

        /* 主支付按钮 */
        button.pay-button {
            width: 100%; height: 56px; background: var(--primary-gray); color: white; border: none;
            border-radius: 16px; font-size: 17px; font-weight: 600; cursor: pointer;
            box-shadow: 0 8px 16px rgba(0,0,0,0.05); transition: all 0.2s;
            margin-bottom: 12px;
        }
        button.pay-button:active { transform: scale(0.97); opacity: 0.9; }

        /* 备用按钮 — 显眼橙色，比主按钮稍大或一样突出 */
        .backup-button {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 60px;               /* 比主按钮高一点点 */
            background: var(--accent-orange);
            color: white;
            border: none;
            border-radius: 18px;         /* 稍大的圆角，更显眼 */
            font-size: 18px;              /* 字体稍大 */
            font-weight: 700;
            text-decoration: none;
            box-shadow: 0 10px 20px rgba(249, 115, 22, 0.3); /* 橙色阴影强调 */
            transition: all 0.25s ease;
            margin-bottom: 24px;          /* 与上方卡片内容拉开间距 */
            letter-spacing: 0.5px;
            border: 2px solid transparent; /* 预留激活效果 */
        }
        .backup-button:hover {
            background: #ea580c;
            transform: scale(1.02);
            box-shadow: 0 14px 24px rgba(249, 115, 22, 0.4);
        }
        .backup-button:active {
            transform: scale(0.96);
        }
        /* 可选添加一个小箭头或图标，更醒目 */
        .backup-button span {
            margin-left: 8px;
            font-size: 22px;
        }