:root{--primary: #2563eb;--primary-hover: #1d4ed8;--primary-active: #1e40af;--primary-soft: #eff6ff;--primary-light: #dbeafe;--primary-border: #93c5fd;--reward: #be185d;--reward-soft: #fdf2f8;--reward-border: #fbcfe8;--task: #0e7490;--task-soft: #ecfeff;--consumption: #b45309;--consumption-soft: #fffbeb;--bg: #f5f7fb;--surface: #ffffff;--surface-soft: #f8fafc;--text: #1f2937;--text-secondary: #64748b;--text-tertiary: #5e6c80;--text-on-soft: #5e6c80;--line: #e5eaf2;--line-soft: #e5eaf2;--success: #15803d;--success-soft: #f0fdf4;--warning: #b45309;--warning-soft: #fffbeb;--danger: #c2414b;--danger-soft: #fff1f2;--focus-ring: rgba(37, 99, 235, .28);--shadow: 0 2px 8px rgba(36, 50, 71, .035);--shadow-lg: 0 12px 32px rgba(36, 50, 71, .12);--radius-card: 10px;--radius-control: 8px;--panel: var(--surface);--panel-soft: var(--surface-soft);--muted: var(--text-on-soft);--accent: var(--primary);--accent-hover: var(--primary-hover);--accent-active: var(--primary-active);--accent-soft: var(--primary-soft);--accent-light: var(--primary-light);--el-color-primary: var(--primary);--el-color-primary-dark-2: var(--primary-hover);--el-color-primary-light-3: #6692f1;--el-color-primary-light-5: #92b1f5;--el-color-primary-light-7: #bed0f9;--el-color-primary-light-8: #dbeafe;--el-color-primary-light-9: #eff6ff;--el-color-success: var(--success);--el-color-success-dark-2: #2b604a;--el-color-success-light-3: #5ba677;--el-color-success-light-5: #8ac09e;--el-color-success-light-7: #b9d9c5;--el-color-success-light-8: #d0e6d8;--el-color-success-light-9: var(--success-soft);--el-color-warning: var(--warning);--el-color-warning-dark-2: #92400e;--el-color-warning-light-3: #ca8753;--el-color-warning-light-5: #daa984;--el-color-warning-light-7: #e8cbb5;--el-color-warning-light-8: #f0ddce;--el-color-warning-light-9: var(--warning-soft);--el-color-danger: var(--danger);--el-color-danger-dark-2: #963e43;--el-color-danger-light-3: #d47a81;--el-color-danger-light-5: #e0a0a5;--el-color-danger-light-7: #edc6c9;--el-color-danger-light-8: #f3d9db;--el-color-danger-light-9: var(--danger-soft);--el-color-error: var(--danger);--el-color-info: var(--text-secondary);--el-text-color-primary: var(--text);--el-text-color-regular: var(--text);--el-text-color-secondary: var(--text-on-soft);--el-text-color-placeholder: var(--text-secondary);--el-border-color: var(--line);--el-border-color-light: var(--line-soft);--el-border-radius-base: var(--radius-control);--el-box-shadow-light: var(--shadow-lg)}.el-button:focus-visible,.el-tabs__item:focus-visible,.el-dropdown-selfdefine:focus-visible{outline:2px solid var(--primary);outline-offset:2px}.el-tag.el-tag--light.el-tag--warning,.el-alert--warning.is-light{color:#92400e}*{box-sizing:border-box}html{min-width:320px;background:var(--bg)}body{margin:0;min-width:320px;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;align-items:center;padding:32px 20px;color:var(--text);font-family:Microsoft YaHei UI,Segoe UI,PingFang SC,sans-serif;background:var(--surface)}.page-frame{position:relative;width:min(560px,100%);min-width:0;flex:1;display:flex;flex-direction:column;gap:24px}.shell{position:relative;width:100%;flex-shrink:0;margin-block:auto;min-width:0;display:grid;grid-template-columns:minmax(0,1fr);gap:18px;padding:24px;overflow:hidden;border:1px solid var(--line);border-radius:10px;background:#fffffff7;box-shadow:var(--shadow)}.site-footer{width:100%;flex-shrink:0;display:flex;flex-wrap:wrap;justify-content:center;gap:6px 16px;color:var(--muted);font-size:12px;line-height:1.6;text-align:center}.site-footer a{color:inherit;text-decoration:none}.site-footer a:hover{color:var(--primary)}.site-footer a:focus-visible{outline:2px solid rgba(37,99,235,.28);outline-offset:2px;border-radius:3px}.shell>*,.brand>*,.checkout-layout,.account-column,.heading,.recharge-form,.pay-panel,.order-summary,.payment-details,.payment-content{min-width:0;max-width:100%}.brand{display:flex;align-items:center;gap:10px;padding-bottom:15px;border-bottom:1px solid var(--line-soft)}.brand img{width:42px;height:42px;flex:0 0 auto;object-fit:contain;border:1px solid var(--line-soft);border-radius:9px;background:#fff;box-shadow:0 6px 18px #0f172a12}.brand div{min-width:0;display:grid;gap:3px}.brand strong{overflow-wrap:anywhere;font-size:16px}.brand span{color:var(--muted);font-size:12px}.heading{display:grid;gap:5px}.eyebrow{color:var(--primary);font-size:11px;font-weight:800;letter-spacing:.08em}h1,h2{margin:0;color:var(--text)}h1{font-size:27px;line-height:1.25}h2{font-size:16px;line-height:1.35}.heading p{margin:2px 0 0;overflow-wrap:anywhere;line-height:1.6}.muted{color:var(--muted)}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.checkout-layout{display:grid;grid-template-columns:minmax(0,480px);align-items:start;justify-content:center;gap:24px}.account-column{display:grid;gap:20px}.recharge-form{display:grid;gap:12px}.section-heading{min-width:0;display:flex;align-items:flex-end;justify-content:space-between;gap:12px}.section-heading>span{flex:0 0 auto;color:var(--muted);font-size:11px}.amounts{min-width:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}.amounts button{min-width:0;grid-column:span 2}button,input{height:42px;min-width:0;border:1px solid var(--line);border-radius:8px;color:var(--text);background:#fff;font:inherit;transition:border-color .16s ease,background .16s ease,box-shadow .16s ease,transform .16s ease}button{cursor:pointer;font-weight:700}button:disabled{cursor:not-allowed;opacity:.58}button:not(:disabled):hover{border-color:var(--primary-border);background:var(--primary-soft)}button:not(:disabled):active{transform:translateY(1px)}button:focus-visible,input:focus-visible,a:focus-visible{outline:2px solid rgba(37,99,235,.28);outline-offset:2px}button.active{color:var(--primary);border-color:var(--primary-border);background:var(--primary-soft);box-shadow:0 0 0 1px #2563eb0f inset}.field-label{margin-top:2px;color:#334155;font-size:12px;font-weight:700}.amount-input{position:relative;min-width:0}.amount-input>span{position:absolute;z-index:1;left:13px;top:50%;color:#475569;font-weight:700;transform:translateY(-50%)}.amount-input input{width:100%;padding:0 13px 0 34px}input:hover{border-color:#cbd5e1}input:focus{border-color:var(--primary);box-shadow:0 0 0 3px #2563eb14}.primary{width:100%;margin-top:2px;color:#fff;border-color:var(--primary);background:var(--primary)}.primary:not(:disabled):hover{color:#fff;border-color:var(--primary-hover);background:var(--primary-hover)}.payment-dialog{width:min(520px,calc(100% - 24px));max-width:none;max-height:calc(100vh - 24px);padding:0;overflow:auto;border:0;border-radius:10px;background:transparent;box-shadow:0 28px 80px #0f172a3d}.payment-dialog::backdrop{background:#0f172a80;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}.pay-panel{width:100%;display:grid;gap:14px;padding:18px;overflow:hidden;border:1px solid var(--line-soft);border-radius:10px;background:var(--surface-soft)}.payment-header{min-width:0;display:flex;align-items:center;justify-content:space-between;gap:12px}.payment-actions{min-width:0;display:flex;align-items:center;gap:8px}.dialog-close{width:32px;height:32px;flex:0 0 auto;padding:0 0 2px;color:var(--muted);border-color:var(--line-soft);font-size:23px;font-weight:400;line-height:1}.status-badge{flex:0 0 auto;padding:5px 9px;border:1px solid var(--line);border-radius:999px;color:var(--primary);background:var(--primary-soft);font-size:11px;font-weight:700;white-space:nowrap}.status-badge.status-expired,.status-badge.status-closed{color:#475569;border-color:#cbd5e1;background:#f1f5f9}.payment-provider{min-width:0;display:flex;align-items:center;gap:8px}.payment-provider>img{width:28px;height:28px;flex:0 0 auto}.payment-provider strong{min-width:0;overflow-wrap:anywhere;color:#1677ff;font-size:14px}.payment-provider.is-mock>img{display:none}.payment-provider.is-mock strong{color:#475569}.payment-details{display:grid;gap:12px}.payment-details[hidden]{display:none}.order-summary{width:100%;display:grid;gap:9px;padding-top:11px;border-top:1px solid var(--line-soft)}.summary-row{width:100%;min-width:0;display:grid;grid-template-columns:64px minmax(0,1fr);align-items:center;gap:9px}.order-row{grid-template-columns:64px minmax(0,1fr) auto;align-items:center}.summary-label{color:var(--muted);font-size:12px;white-space:nowrap}.summary-row strong{min-width:0;color:var(--text);text-align:right}.order-number{overflow-wrap:anywhere;word-break:break-all;font-family:Cascadia Code,Consolas,monospace;font-size:12px;line-height:1.55}.amount-row strong{color:var(--primary);font-size:17px}.copy-button{width:auto;height:28px;padding:0 9px;color:#475569;border-color:var(--line-soft);font-size:11px}.copy-button.copied{color:var(--success);border-color:#bbf7d0;background:#f0fdf4}.payment-content{width:100%;display:grid;justify-items:center;gap:8px;text-align:center}#qrcode{width:min(256px,100%);aspect-ratio:1;display:grid;place-items:center;padding:8px;overflow:hidden;border:1px solid var(--line);border-radius:10px;background:#fff}#qrcode img,#qrcode canvas{display:block;max-width:100%;height:auto!important}#qrcode.is-inactive{opacity:.32;filter:grayscale(1)}.payment-status{max-width:100%;overflow-wrap:anywhere;line-height:1.55}.payment-status{font-size:12px}.pay-link{color:var(--primary);font-weight:700;text-decoration:none}.pay-link:hover{color:var(--primary-hover)}.error{color:var(--primary);font-size:13px;line-height:1.5;overflow-wrap:anywhere}.error:empty{display:none}.modal-error{text-align:center}.cancel-payment{width:100%;color:var(--primary);border-color:var(--line);background:#fff}.cancel-payment:not(:disabled):hover{color:var(--primary-hover);border-color:var(--primary-border);background:var(--primary-soft)}@media(max-width:520px){body{padding:14px 12px}.shell{gap:18px;padding:22px 18px;border-radius:10px}.brand{padding-bottom:15px}h1{font-size:24px}.amounts{grid-template-columns:repeat(2,minmax(0,1fr))}.amounts button{grid-column:auto}.payment-dialog{width:calc(100% - 20px);max-height:calc(100vh - 20px)}.pay-panel{padding:12px}.order-row{grid-template-columns:minmax(0,1fr) auto}.order-row .summary-label{align-self:center}.order-row .summary-label{grid-column:1/-1}.order-number{grid-column:1;grid-row:2;text-align:left!important}.order-row .copy-button{grid-column:2;grid-row:2}.amount-row{grid-template-columns:minmax(0,1fr) auto}#qrcode{width:min(228px,100%)}}.amount-field{min-width:0;display:grid;gap:8px}.reward-wallet{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:16px;padding:14px 16px;border:1px solid var(--line);border-radius:10px;background:var(--surface);transition:border-color .16s ease,box-shadow .16s ease}.reward-wallet:focus-within{border-color:var(--primary);box-shadow:0 0 0 3px #2563eb14}.reward-deduction{border-left:1px solid var(--line);padding-left:16px}.reward-deduction .field-label{margin:0;color:var(--text)}.reward-deduction input{border-color:var(--line);font-variant-numeric:tabular-nums}.reward-balance{min-width:0;display:grid;gap:4px}.reward-balance>span{color:var(--text);font-size:12px}.reward-balance strong{color:var(--primary);font-size:25px;line-height:1.2;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}#purchasePreview{padding:14px 16px;background:var(--surface-soft);border:1px solid var(--line-soft);border-radius:10px;font-size:13px}#quoteStatus{margin:0;line-height:1.6}.quote-breakdown{display:grid;gap:8px;margin:0 0 12px}.quote-breakdown>div,.quote-payment,.quote-points{display:flex;justify-content:space-between;align-items:baseline;gap:12px}.quote-breakdown dt,.quote-payment>span,.quote-points>span{color:var(--muted)}.quote-breakdown dd{margin:0;font-weight:600;font-variant-numeric:tabular-nums}#quoteReward.has-deduction{color:var(--success)}.quote-payment{padding-top:12px;border-top:1px solid var(--line)}.quote-payment strong{color:var(--primary);font-size:24px;font-variant-numeric:tabular-nums}.quote-points{margin-top:8px}.quote-points strong{text-align:right;overflow-wrap:anywhere}#retryConfiguration{height:auto;min-height:24px;justify-self:end;font-size:11px;padding:2px 0;border:0;background:transparent;color:var(--muted)}@media(max-width:380px){.amount-input input{padding-left:25px;padding-right:6px;font-size:13px}.amount-input>span{left:10px}.reward-wallet{padding:12px;gap:10px}.reward-deduction{padding-left:10px}}body{background:var(--bg)}body:before{display:none}.error{color:var(--danger)}.amount-row strong,.reward-balance strong,.quote-payment strong{color:var(--text)}.cancel-payment{color:var(--muted);border-color:var(--line)}.status-badge{color:var(--warning);background:var(--warning-soft)}.reward-wallet{background:var(--reward-soft);border-color:var(--reward-border)}.reward-wallet .reward-balance strong{color:var(--reward)}