:root{
  --bg:#f4f7fb;--card:#fff;--text:#101828;--muted:#667085;
  --border:#d0d5dd;--primary:#111827;--primary2:#000;
  --danger:#b42318;--danger-bg:#fef3f2;--success:#067647;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.page{min-height:100vh;display:grid;place-items:center;padding:24px}
.card{width:min(100%,520px);background:var(--card);border:1px solid #eaecf0;border-radius:24px;padding:40px;box-shadow:0 24px 70px rgba(16,24,40,.09)}
.brand{text-align:center;font-size:12px;font-weight:800;letter-spacing:.14em;color:var(--muted);margin-bottom:22px}
h1{text-align:center;margin:0;font-size:32px;line-height:1.15}
.subtitle{text-align:center;color:var(--muted);line-height:1.55;margin:12px 0 28px}
.amount-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.amount-btn{border:1px solid var(--border);background:#fff;color:var(--text);border-radius:12px;padding:14px 8px;font-size:16px;font-weight:750;cursor:pointer}
.amount-btn:hover,.amount-btn.active{border-color:var(--primary);background:#f2f4f7}
.or{display:flex;align-items:center;gap:12px;color:#98a2b3;font-size:11px;font-weight:800;margin:24px 0}
.or:before,.or:after{content:"";height:1px;background:#eaecf0;flex:1}
label{display:block;font-size:14px;font-weight:700;margin-bottom:8px}
.money-input{display:flex;align-items:center;border:1px solid var(--border);border-radius:12px;background:#fff;padding:0 14px}
.money-input:focus-within{border-color:#667085;box-shadow:0 0 0 3px rgba(16,24,40,.08)}
.money-input span{font-weight:750;color:var(--muted)}
.money-input input{width:100%;border:0;outline:0;padding:14px 8px;font-size:18px;background:transparent}
.help{font-size:12px;color:#98a2b3;margin:7px 0 0}
.selected{text-align:center;font-weight:700;margin:24px 0 14px;min-height:24px}

.continue-btn{width:100%;display:flex;align-items:center;justify-content:center;border:0;border-radius:12px;background:#2563eb;color:#fff;padding:15px 18px;font-size:16px;font-weight:800;cursor:pointer;margin-bottom:16px;transition:opacity .15s,transform .15s}
.continue-btn:hover:not(:disabled){opacity:.92;transform:translateY(-1px)}
.continue-btn:disabled{opacity:.45;cursor:not-allowed;transform:none}

.pay-btn{width:100%;display:flex;align-items:center;justify-content:center;border:0;border-radius:12px;background:var(--primary);color:#fff;padding:15px 18px;font-size:16px;font-weight:800;cursor:pointer;text-decoration:none}
.pay-btn:hover:not(:disabled){background:var(--primary2)}
.pay-btn:disabled{opacity:.45;cursor:not-allowed}
.error{color:var(--danger);background:var(--danger-bg);border:1px solid #fecdca;border-radius:10px;padding:11px 12px;font-size:14px;margin-top:14px}
.secure{text-align:center;color:#98a2b3;font-size:12px;margin:18px 0 0}
.result{text-align:center}
.status-icon{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;margin:0 auto 20px;background:#ecfdf3;color:var(--success);font-size:30px;font-weight:900}
.status-icon.neutral{background:#f2f4f7;color:#667085}
.details{text-align:left;margin:20px 0;padding:16px;border:1px solid #eaecf0;border-radius:12px;background:#fafafa;line-height:1.8}
.link-btn{margin-top:22px}
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
@media(max-width:520px){.card{padding:28px 20px;border-radius:18px}.amount-grid{grid-template-columns:repeat(2,1fr)}h1{font-size:28px}}

.setup-status {
  border: 1px solid #f0c7c7;
  background: #fff7f7;
  color: #9b2c2c;
  border-radius: 10px;
  padding: 12px 14px;
  margin: 12px 0;
  font-size: 14px;
  line-height: 1.45;
}
.retry-btn {
  width: 100%;
  border: 1px solid #cbd5e1;
  background: #fff;
  color: #111827;
  border-radius: 10px;
  padding: 11px 14px;
  font-weight: 700;
  cursor: pointer;
  margin-bottom: 12px;
}
.retry-btn:hover { background: #f8fafc; }
