:root { color-scheme: light; --palm:#1e3a2b; --palm-deep:#14271d; --sage:#4a7c59; --sage-tint:#eaf2ec; --page:#f8f9fa; --surface:#fff; --border:#e2e8f0; --text:#0f172a; --muted:#64748b; --success:#065f46; --success-bg:#e6f4ea; --warning:#92400e; --warning-bg:#fef3c7; }
* { box-sizing: border-box; }
body { min-height:100vh; margin:0; background:linear-gradient(150deg,#edf6ef 0%,var(--page) 48%,#f2f6f3 100%); color:var(--text); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
.page-shell { width:min(100%,480px); min-height:100vh; margin:0 auto; padding:42px 20px 28px; display:flex; flex-direction:column; justify-content:center; }
.payment-card { background:var(--surface); border:1px solid var(--border); border-radius:24px; padding:30px 24px; box-shadow:0 16px 44px rgba(30,58,43,.10); }
.brand-mark { display:grid; place-items:center; width:48px; height:48px; margin-bottom:20px; border-radius:15px; background:var(--palm); color:#fff; font-size:15px; font-weight:800; letter-spacing:.08em; }
.eyebrow { margin:0 0 8px; color:var(--sage); font-size:12px; font-weight:800; letter-spacing:.12em; }
h1 { margin:0; font-size:clamp(27px,8vw,34px); line-height:1.14; letter-spacing:-.03em; }
.muted { margin:11px 0 0; color:var(--muted); line-height:1.55; }
.loading { display:flex; align-items:center; gap:10px; margin-top:28px; color:var(--muted); font-weight:600; }
.spinner { width:18px; height:18px; border:3px solid var(--sage-tint); border-top-color:var(--sage); border-radius:50%; animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.customer-line { margin-top:26px; color:var(--muted); font-size:15px; }.customer-line strong { color:var(--text); }
.amount-box { margin:20px 0 16px; padding:19px; border-radius:16px; background:var(--sage-tint); border:1px solid #cfe4d4; }.amount-box span { display:block; color:var(--success); font-size:13px; font-weight:700; }.amount-box strong { display:block; margin-top:5px; color:var(--palm); font-size:32px; letter-spacing:-.03em; }
.notice { margin:0 0 18px; color:var(--muted); font-size:13px; line-height:1.5; }
.primary-button { display:block; width:100%; padding:16px; border-radius:14px; background:var(--palm); color:#fff; text-align:center; text-decoration:none; font-size:16px; font-weight:800; transition:background .15s ease,transform .15s ease; }.primary-button:hover,.primary-button:focus-visible { background:var(--palm-deep); }.primary-button:active { transform:scale(.99); }
.help-text { margin:16px 4px 0; color:var(--muted); font-size:12px; line-height:1.45; text-align:center; }
.status-panel { margin-top:25px; padding:16px; border-radius:14px; color:var(--warning); background:var(--warning-bg); font-weight:650; line-height:1.45; }.status-panel.success { color:var(--success); background:var(--success-bg); }
.footer { margin:19px 0 0; color:var(--muted); font-size:12px; text-align:center; }
@media (max-width:360px) { .page-shell { padding:24px 14px; }.payment-card { padding:25px 19px; border-radius:20px; } }