* {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}
:root {
    --primary-color: #07c160;
    --bg-color: #f3f6fb;
    --card-bg: #ffffff;
    --text-primary: #333333;
    --text-secondary: #7a8599;
    --text-muted: #666666;
    --text-soft: #888888;
    --text-strong: #1f2937;
    --border-color: #e9edf3;
    --border-subtle: #eeeeee;
    --border-strong: #d7deea;
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --radius-sm: 0.5rem;
    --radius-md: 0.75rem;
    --radius-lg: 1rem;
    --radius-pill: 999px;
    --surface-card: rgba(255, 255, 255, 0.98);
    --surface-card-soft: rgba(255, 255, 255, 0.92);
    --surface-accent: rgba(7, 193, 96, 0.1);
    --surface-neutral: #f2f3f5;
    --surface-subtle: #f0f0f0;
    --surface-warning: #fff1b8;
    --surface-danger: #fff0f0;
    --surface-danger-soft: #fff2f0;
    --success-color: #07c160;
    --danger-color: #ff4d4f;
    --danger-strong: #cf1322;
    --primary-gradient: linear-gradient(135deg, var(--primary-color) 0%, #19cf72 100%);
    --shadow-soft: 0 10px 30px rgba(15, 23, 42, 0.06);
    --shadow-strong: 0 12px 32px rgba(7, 193, 96, 0.18);
    --card-radius: 1.25rem;
    --button-height: 3rem;
    --button-height-lg: 3.25rem;
}
html { font-size: clamp(14px, 3.8vw, 16px); background: linear-gradient(180deg, #f7fbff 0%, #f3f6fb 100%); }
body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; background: transparent; color: var(--text-primary); -webkit-font-smoothing: antialiased; line-height: 1.5; font-size: 1rem; }
button { font: inherit; -webkit-appearance: none; appearance: none; }
img, canvas, svg { max-width: 100%; }
.container { width: min(100%, 35rem); margin: 0 auto; padding: clamp(0.625rem, 3vw, var(--space-5)); padding-top: max(env(safe-area-inset-top), clamp(0.625rem, 3vw, 1.125rem)); padding-bottom: calc(max(env(safe-area-inset-bottom), 0.625rem) + clamp(0.625rem, 3vw, 1.125rem)); min-height: 100vh; display: flex; flex-direction: column; }
.card { width: 100%; background: linear-gradient(180deg, var(--surface-card) 0%, #ffffff 100%); border-radius: var(--card-radius); padding: clamp(var(--space-4), 4vw, 1.375rem); margin-bottom: var(--space-3); text-align: center; box-shadow: var(--shadow-soft); border: 1px solid rgba(233, 237, 243, 0.9); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.label { font-size: 0.875rem; color: var(--text-secondary); margin-bottom: var(--space-2); letter-spacing: 0.0125rem; }
.value { font-size: clamp(1.25rem, 6vw, 1.5rem); font-weight: 600; color: var(--text-primary); }
.amount { font-size: clamp(2.125rem, 9vw, 2.75rem); font-weight: 800; color: var(--text-strong); word-break: break-all; letter-spacing: -0.025rem; }
.order-info { margin-top: var(--space-4); padding-top: 0.875rem; border-top: 1px solid var(--border-color); display: flex; flex-direction: column; gap: var(--space-3); font-size: 0.875rem; color: var(--text-secondary); text-align: left; }
.info-row { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); min-width: 0; }
.info-label { flex-shrink: 0; }
.info-row > span:last-child, .info-row > div { color: var(--text-primary); font-weight: 600; }
.copy-btn { color: var(--primary-color); background: var(--surface-accent); min-height: 1.875rem; padding: var(--space-1) 0.625rem; border-radius: var(--radius-pill); font-size: 0.75rem; font-weight: 600; cursor: pointer; border: none; white-space: nowrap; flex-shrink: 0; }
.inline-flex-center { display: flex; align-items: center; }
.order-meta { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-2); min-width: 0; flex: 1; }
.trade-no { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; }
.card-no-padding { padding: 0; }

.method-item { display: flex; align-items: center; padding: 1.125rem var(--space-5); border-bottom: 1px solid var(--border-color); min-height: 4.5rem; }
.method-item:last-child { border-bottom: none; }
.method-icon { width: 2rem; height: 2rem; margin-right: 0.875rem; flex-shrink: 0; }
.method-info { flex: 1; text-align: left; }
.method-name { font-size: 1rem; font-weight: 700; color: var(--text-primary); }
.method-desc { font-size: 0.75rem; color: var(--text-secondary); margin-top: 0.1875rem; }
.radio-check { width: 1.375rem; height: 1.375rem; border: 2px solid var(--border-strong); border-radius: 50%; position: relative; flex-shrink: 0; }
.selected .radio-check { border-color: var(--primary-color); background-color: var(--primary-color); }
.selected .radio-check::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 0.5rem; height: 0.5rem; background: #fff; border-radius: 50%; }

.pay-btn,
.modal-btn,
.inline-action-btn {
    width: 100%;
    padding: 0.875rem 1rem;
    background: var(--primary-gradient);
    color: #fff;
    border: none;
    border-radius: var(--radius-pill);
    font-weight: 700;
    cursor: pointer;
}
.pay-btn { min-height: var(--button-height-lg); padding-inline: 1.125rem; font-size: 1.125rem; margin-top: 0.875rem; box-shadow: var(--shadow-strong); }
.pay-btn:disabled { background-color: #ccc; box-shadow: none; cursor: not-allowed; }

.error-container { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: min(52vh, 22.5rem); }
.error-icon { font-size: 4rem; margin-bottom: var(--space-5); color: var(--danger-color); }

.tips-section { margin-top: 0.875rem; background: var(--surface-card-soft); border-radius: var(--card-radius); padding: clamp(var(--space-4), 4vw, var(--space-5)); box-shadow: var(--shadow-soft); border: 1px solid rgba(233, 237, 243, 0.9); }
.tips-header { display: flex; align-items: center; margin-bottom: var(--space-3); padding-bottom: 0.625rem; border-bottom: 1px dashed var(--border-subtle); }
.tips-icon { font-size: 1.125rem; margin-right: var(--space-2); }
.tips-title { font-size: 1rem; font-weight: 600; color: var(--text-primary); margin: 0; }
.tips-list { list-style: none; padding: 0; margin: 0; }
.tips-item { font-size: 0.8125rem; color: var(--text-muted); line-height: 1.7; margin-bottom: 0.625rem; padding-left: 0; display: flex; align-items: flex-start; }
.tips-item:last-child { margin-bottom: 0; }
.item-num { min-width: 1.125rem; height: 1.125rem; line-height: 1.125rem; text-align: center; background: var(--surface-subtle); color: #999; border-radius: 50%; font-size: 0.6875rem; margin-right: var(--space-2); margin-top: 0.125rem; flex-shrink: 0; }
.highlight { font-weight: 700; margin: 0 0.125rem; padding: 0.0625rem 0.375rem; border-radius: var(--radius-pill); background: rgba(0,0,0,0.05); }

.loader { width: 3.125rem; height: 3.125rem; border: 0.25rem solid var(--surface-accent); border-radius: 50%; border-top-color: var(--primary-color); animation: spin 1s ease-in-out infinite; margin-bottom: var(--space-6); }
@keyframes spin { to { transform: rotate(360deg); } }
.status-title { font-size: clamp(1.25rem, 5vw, 1.5rem); font-weight: 700; margin-bottom: var(--space-3); color: var(--text-primary); }
.status-desc { font-size: 0.875rem; color: var(--text-soft); line-height: 1.7; max-width: 20rem; margin: 0 auto; }

.hidden { display: none !important; }

.theme-text { color: var(--primary-color); }
.theme-bg-light { background-color: var(--surface-accent); }

#countdown-str { font-size: clamp(1.5rem, 8vw, 2rem); font-weight: 700; color: var(--primary-color); letter-spacing: 0.03125rem; }

.native-card-layout { text-align: center; padding: clamp(var(--space-4), 5vw, var(--space-6)) clamp(0.875rem, 4vw, var(--space-5)); box-shadow: 0 10px 28px rgba(0,0,0,0.08); width: 100%; }
.qr-header { margin-bottom: var(--space-4); border-bottom: 1px dashed var(--border-subtle); padding-bottom: var(--space-4); }
.qr-amount { font-size: clamp(2rem, 10vw, 2.625rem); font-weight: 800; color: var(--text-primary); margin-bottom: var(--space-2); line-height: 1.2; word-break: break-all; }
.qr-timer { font-size: clamp(0.875rem, 4vw, 1.125rem); color: var(--primary-color); font-weight: 600; background: var(--surface-accent); display: inline-block; padding: var(--space-1) var(--space-3); border-radius: var(--card-radius); }
.qr-pay-label { margin-top: 0.9375rem; }
#qrcode-middle { margin: 1.125rem auto; padding: 0.625rem; background: #fff; border-radius: var(--radius-lg); display: flex; justify-content: center; align-items: center; border: 1px solid var(--border-subtle); width: fit-content; max-width: 100%; box-shadow: 0 6px 18px rgba(0,0,0,0.04); }
#qrcode-middle img, #qrcode-middle canvas { max-width: 100% !important; height: auto !important; object-fit: contain; }
.qr-tips-text { font-size: 1rem; color: var(--text-primary); font-weight: 500; margin-top: 0.9375rem; line-height: 1.7; }
.qr-tips-text .highlight { font-size: 1.125rem; }
.qr-friend-tip { font-weight: 600; }
.wechat-link-share-card { text-align: left; }
.link-share-badge { display: inline-flex; align-items: center; justify-content: center; min-height: 1.75rem; padding: 0.25rem 0.75rem; border-radius: var(--radius-pill); background: var(--surface-accent); color: var(--primary-color); font-size: 0.8125rem; font-weight: 700; margin-bottom: var(--space-3); }
.link-share-title { font-size: 1.125rem; font-weight: 700; color: var(--text-primary); line-height: 1.5; }
.link-share-desc { margin-top: var(--space-2); font-size: 0.875rem; line-height: 1.7; color: var(--text-secondary); }
.share-link-panel { margin-top: var(--space-4); padding: var(--space-3); border-radius: var(--radius-lg); border: 1px solid var(--border-color); background: rgba(247, 251, 255, 0.95); }
.share-link-text { word-break: break-all; font-size: 0.9375rem; line-height: 1.75; color: var(--text-primary); font-weight: 600; }
.share-copy-btn { margin-top: var(--space-3); min-width: 5rem; }
.share-link-note { margin-top: var(--space-3); font-size: 0.8125rem; line-height: 1.65; color: var(--text-soft); }

.modal-overlay { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.56); z-index: 9999; display: flex; align-items: center; justify-content: center; padding: clamp(var(--space-4), 4vw, var(--space-6)); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.modal-content { background: #fff; border-radius: var(--card-radius); width: 100%; max-width: 22.5rem; padding: clamp(1.25rem, 5vw, 1.625rem); box-shadow: 0 18px 50px rgba(0,0,0,0.18); animation: modalPop 0.3s ease-out forwards; }
@keyframes modalPop { 0% { transform: scale(0.9); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
.modal-btn { min-height: var(--button-height); font-size: 1rem; margin-top: var(--space-4); box-shadow: 0 4px 12px rgba(7, 193, 96, 0.3); }
.modal-title { color: var(--text-primary); font-weight: 700; font-size: 1.25rem; text-align: center; margin-bottom: var(--space-3); }
.modal-desc { font-size: 0.9375rem; line-height: 1.8; color: var(--text-secondary); text-align: center; }
.modal-warning { display: flex; align-items: center; justify-content: center; gap: var(--space-2); background: var(--surface-danger-soft); color: var(--danger-strong); border: 1px solid #ffccc7; border-radius: var(--radius-md); padding: var(--space-3) 0.875rem; font-size: 0.9375rem; font-weight: 700; margin-bottom: 0.875rem; }
.modal-highlight { display: inline-block; color: var(--danger-strong); background: var(--surface-warning); border-radius: var(--radius-sm); padding: 0.125rem var(--space-2); font-weight: 800; font-size: 1.0625rem; margin: 0 var(--space-1); }
.modal-btn-row { display: flex; gap: var(--space-3); margin-top: var(--space-4); }
.modal-btn-row .modal-btn { margin-top: 0; }
.modal-btn-secondary { background: var(--surface-neutral); color: var(--text-muted); box-shadow: none; }
.inline-action-btn { min-height: var(--button-height); font-size: 1rem; box-shadow: 0 4px 12px rgba(7, 193, 96, 0.22); margin-top: var(--space-3); }
.pay-confirm-modal-content { max-width: 20rem; padding: 1rem 1rem 0.9375rem; }
.pay-confirm-header { display: flex; flex-direction: column; align-items: center; justify-content: center; margin-bottom: 0.625rem; }
.pay-confirm-icon { display: inline-flex; align-items: center; justify-content: center; min-width: 3.125rem; height: 1.75rem; padding: 0 0.75rem; border-radius: var(--radius-pill); background: var(--surface-accent); color: var(--primary-color); font-size: 0.75rem; font-weight: 700; margin-bottom: 0.5rem; }
.pay-confirm-modal-content .modal-title { margin-bottom: 0; font-size: 1.125rem; letter-spacing: 0.01rem; }
.pay-confirm-tips { background: #f7fbff; border: 1px solid #dbeafe; border-radius: var(--radius-md); padding: 0.8125rem 0.875rem; text-align: left; box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04); }
.pay-confirm-tip-row { display: flex; align-items: flex-start; gap: 0.625rem; }
.pay-confirm-tip-row + .pay-confirm-tip-row { margin-top: 0.625rem; padding-top: 0.625rem; border-top: 1px dashed rgba(148, 163, 184, 0.35); }
.pay-confirm-step { width: 1.375rem; height: 1.375rem; border-radius: 50%; background: var(--primary-color); color: #fff; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 0.75rem; font-weight: 700; line-height: 1; margin-top: 0.125rem; }
.pay-confirm-tip-text { flex: 1; font-size: 0.875rem; line-height: 1.7; color: var(--text-primary); font-weight: 500; }
.pay-confirm-inline { display: inline-block; margin: 0 0.125rem; padding: 0.0625rem 0.375rem; border-radius: var(--radius-pill); background: var(--surface-warning); color: var(--danger-strong); font-weight: 700; }
.modal-btn-row-fixed { gap: 0.625rem; flex-direction: row; }
.modal-btn-row-fixed .modal-btn { flex: 1; min-width: 0; min-height: 2.75rem; font-size: 0.9375rem; padding: 0.75rem 0.5rem; }
.modal-section-title { text-align: center; margin-bottom: var(--space-5); }
.instruction-title { color: var(--text-primary); font-weight: 700; font-size: 1.25rem; }
.instruction-list { font-size: 0.9375rem; line-height: 1.8; color: var(--text-secondary); font-weight: 500; text-align: left; }
.instruction-item { display: flex; align-items: flex-start; margin-bottom: var(--space-3); }
.instruction-item:last-child { margin-bottom: 0; }
.instruction-step { background: var(--surface-accent); color: var(--primary-color); width: 1.5rem; height: 1.5rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.875rem; font-weight: 700; margin-right: 0.625rem; flex-shrink: 0; margin-top: 0.125rem; }
.instruction-strong { color: var(--text-primary); font-weight: 600; }
.instruction-warning { margin-top: var(--space-4); font-size: 0.8125rem; color: var(--danger-color); background: var(--surface-danger); padding: var(--space-3); border-radius: var(--radius-sm); font-weight: 500; display: flex; flex-direction: column; gap: 0.375rem; text-align: left; }
.instruction-warning-row { display: flex; align-items: center; }
.instruction-warning-icon { margin-right: 0.375rem; }

@media (max-width: 420px) {
    .container { padding-left: var(--space-3); padding-right: var(--space-3); }
    .card, .tips-section { border-radius: var(--radius-lg); }
    .method-item { padding: var(--space-4) 0.875rem; }
    .method-name { font-size: 0.9375rem; }
    .modal-btn-row:not(.modal-btn-row-fixed) { flex-direction: column; }
}

@media (max-width: 360px) {
    .card { padding: 0.875rem var(--space-3); }
    .tips-section { padding: 0.875rem var(--space-3); }
    .amount { font-size: 1.875rem; }
    .qr-amount { font-size: 1.875rem; }
    .copy-btn { min-height: 1.75rem; padding: 0.1875rem 0.5625rem; }
    .inline-action-btn, .pay-btn, .modal-btn { font-size: 0.9375rem; }
    .status-desc { max-width: 100%; }
    .link-share-title { font-size: 1rem; }
    .share-link-text { font-size: 0.875rem; }
}

@media (min-width: 768px) {
    .container { width: min(100%, 38.75rem); }
    .card { padding: var(--space-5) var(--space-6); }
    .tips-section { padding: 1.125rem 1.375rem; }
    .modal-content { max-width: 23.75rem; }
}