.commerce-wallet,.commerce-order,.commerce-confirm,.commerce-pending { border:2px solid var(--ink); border-radius:10px; padding:26px; margin-bottom:24px; background:#fffaf0; }
.commerce-section-head { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.commerce-section-head h2,.commerce-confirm h2 { font-size:23px; letter-spacing:-.04em; }
.commerce-section-head .eyebrow { font-size:9px; color:var(--muted); margin-bottom:8px; }
.commerce-wallet-values { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; padding:26px 0 16px; }
.commerce-wallet-values span { display:block; font-size:11px; color:var(--muted); }
.commerce-wallet-values strong { display:block; font-size:28px; margin-top:9px; overflow-wrap:anywhere; }
.commerce-wallet-values small { font-size:12px; font-weight:400; }
.commerce-wallet > p,.commerce-exchange p,.commerce-message,.commerce-confirm p,.commerce-qr p,.commerce-pending p { font-size:12px; line-height:1.9; color:var(--muted); margin-top:12px; }
.commerce-exchange { border-top:1px solid var(--line); margin-top:20px; padding-top:10px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; }
.commerce-exchange small { flex-basis:100%; color:var(--muted); font-size:10px; line-height:1.9; }
.commerce-feedback { font-size:12px; line-height:1.9; margin-bottom:20px; min-height:1px; }
.commerce-pending { border-color:#a86d23; background:#fff0cf; }
.commerce-pending .button { margin-top:16px; }
.commerce-confirm { background:#f5e7ca; }
.commerce-confirm .form-input { max-width:350px; }
.commerce-actions { display:flex; flex-wrap:wrap; align-items:center; gap:20px; margin-top:20px; }
.commerce-actions .button:disabled,.commerce-exchange .button:disabled { opacity:.55; transform:none; cursor:not-allowed; }
.commerce-order-info { margin-top:22px; display:grid; gap:12px; }
.commerce-order-info > div { display:flex; gap:18px; font-size:12px; line-height:1.7; }
.commerce-order-info dt { color:var(--muted); min-width:74px; }
.commerce-order-info dd { margin:0; overflow-wrap:anywhere; }
.commerce-status { border:1px solid #bd9760; padding:7px 10px; font-size:10px; white-space:nowrap; }
.commerce-status.is-paid { border-color:#6a8063; color:#355b2d; background:#edf2e8; }
.commerce-qr { text-align:center; padding-top:24px; }
.commerce-qr canvas { display:block; margin:auto; max-width:100%; width:240px; height:auto; image-rendering:pixelated; border:1px solid #e2d3bc; }
.purchase-card ul { padding-left:17px; font-size:11px; line-height:1.9; margin:12px 0; color:var(--muted); }
.purchase-plans { align-items:stretch; }
.purchase-card { display:flex; flex-direction:column; min-width:0; }
.purchase-card .button,.purchase-card-footer { margin-top:auto; }
.purchase-card .button { width:100%; min-height:44px; }
.purchase-card > small { margin-bottom:16px; }
.commerce-recharge-balance { display:flex; flex-wrap:wrap; align-items:baseline; gap:12px; margin:18px 0; font-size:13px; }
.commerce-recharge-balance > strong { font-size:20px; font-weight:500; }
.point-record-delta { white-space:nowrap; font-variant-numeric:tabular-nums; }
.subscription-benefits { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 24px; padding:20px 0; border-top:1px solid var(--line); }
.subscription-benefits span,.subscription-benefits strong { display:block; font-size:13px; }
.subscription-benefits span { color:var(--muted); margin-bottom:6px; }
.subscription-benefits strong { font-weight:500; }
.commerce-checkin { display:flex; align-items:center; justify-content:space-between; gap:16px; border-top:1px solid var(--line); padding-top:18px; margin-top:16px; font-size:13px; }
.topup-row { display:grid; grid-template-columns:minmax(90px,1fr) minmax(150px,1.2fr) 96px; align-items:center; gap:20px; padding:18px 0; border-bottom:1px solid var(--line); }
.topup-row > strong { font-size:15px; font-weight:500; }
.topup-row > div { min-width:0; text-align:right; }
.topup-row > div > span { font-size:18px; }
.topup-row small { display:block; font-size:11px; color:var(--muted); margin-top:4px; }
.topup-row .button { margin-top:0; width:96px; min-height:44px; padding-left:12px; padding-right:12px; }
.purchase-card.is-current-plan { border-color:var(--accent); }
.commerce-record-row { display:flex; align-items:center; gap:20px; width:100%; padding:18px 0; background:none; border:0; border-bottom:1px solid var(--line); text-align:left; font-size:13px; }
.commerce-record-row > div { min-width:0; flex:1; }
.commerce-record-row strong { font-size:13px; font-weight:500; overflow-wrap:anywhere; }
.commerce-record-row small { display:block; color:var(--muted); margin-top:6px; font-size:11px; }
.commerce-record .commerce-order { margin:0; padding:20px; border:0; border-bottom:1px solid var(--line); background:transparent; }
.commerce-linked-events { padding:0 20px 18px; font-size:12px; }
@media(max-width:700px) { .topup-row { gap:12px; grid-template-columns:minmax(0,1fr) minmax(0,1fr); } .topup-row .button { grid-column:1/-1; width:100%; } .commerce-record-row { gap:10px; font-size:11px; } .subscription-benefits { grid-template-columns:minmax(0,1fr); } }
.commerce-table-wrap { overflow-x:auto; margin-top:20px; }
.commerce-history table { width:100%; border-collapse:collapse; text-align:left; font-size:11px; }
.commerce-history th { color:var(--muted); font-size:10px; font-weight:400; }
.commerce-history th,.commerce-history td { padding:13px 10px; border-bottom:1px solid var(--line); line-height:1.8; vertical-align:top; }
.commerce-history td strong { display:block; font-size:12px; }
.commerce-history td small { display:block; color:var(--muted); max-width:240px; overflow-wrap:anywhere; }
.commerce-history > p { font-size:12px; color:var(--muted); margin-top:18px; }
.commerce-history > button { margin-top:18px; }
@media(max-width:700px) {
 .commerce-wallet,.commerce-order,.commerce-confirm,.commerce-pending { padding:22px 18px; }
 .commerce-section-head { align-items:flex-start; flex-wrap:wrap; }
 .commerce-section-head h2,.commerce-confirm h2 { font-size:21px; }
 .commerce-wallet-values { gap:15px; }
 .commerce-wallet-values strong { font-size:23px; }
 .commerce-exchange { align-items:flex-start; flex-direction:column; }
 .commerce-exchange .button { width:100%; }
 .commerce-history th,.commerce-history td { padding:10px 6px; }
 .commerce-order-info > div { gap:8px; }
 .commerce-order-info dt { min-width:64px; }
}