*{box-sizing:border-box}
:root{
  --bg:#0b0810;
  --card:#15111b;
  --accent:#bda7ff;
  --accent2:#7c5cff;
  --text:#f8f5ff;
  --muted:#b9afc8;
  --line:#30263d;
  --success:#70e0b5;
  --success-bg:rgba(112,224,181,.10);
  --danger:#ff9ca9;
  --danger-bg:rgba(255,120,140,.08);
  --warning:#e8c77a;
  --warning-bg:rgba(232,199,122,.09);
}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text)}
body{
  min-height:100vh;display:grid;place-items:center;padding:34px 18px;overflow-x:hidden;
  font-family:"Aptos","Segoe UI Variable Text","Segoe UI","Helvetica Neue",Arial,sans-serif;
  background:
    radial-gradient(circle at 85% 10%,rgba(124,92,255,.22),transparent 30%),
    radial-gradient(circle at 10% 90%,rgba(189,167,255,.12),transparent 32%),
    linear-gradient(145deg,#09070d 0%,#100b16 48%,#0b0810 100%);
}
.shell{width:min(100%,570px);position:relative;z-index:1}
.brand{display:flex;align-items:center;justify-content:center;gap:15px;margin-bottom:26px}
.mark{width:54px;height:54px;border-radius:17px;display:grid;place-items:center;font-size:22px;font-weight:800;background:linear-gradient(145deg,#241a31,#120d18);border:1px solid rgba(189,167,255,.34);color:var(--accent);box-shadow:0 14px 35px rgba(0,0,0,.32),inset 0 0 0 1px rgba(255,255,255,.03);letter-spacing:-1px}
.brand-copy{text-align:left}
.brand-name{font-family:"Aptos Display","Segoe UI Variable Display","Segoe UI",Arial,sans-serif;font-size:29px;font-weight:700;line-height:1.15;letter-spacing:-.8px;color:#fff}
.brand-subtitle{font-size:10px;letter-spacing:3.2px;margin-top:5px;color:#8f82a0;text-transform:uppercase;font-weight:700}
.payment-card{background:linear-gradient(180deg,rgba(28,22,37,.98),rgba(18,14,24,.98));border:1px solid rgba(189,167,255,.17);border-radius:25px;padding:39px;box-shadow:0 32px 90px rgba(0,0,0,.40),inset 0 1px 0 rgba(255,255,255,.025)}
.eyebrow{display:flex;align-items:center;gap:9px;color:var(--accent);font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;margin-bottom:14px}
.eyebrow:before{content:"";width:25px;height:2px;border-radius:99px;background:linear-gradient(90deg,var(--accent2),var(--accent))}
.eyebrow.centered{justify-content:center}.eyebrow.centered:before{display:none}
h1{font-family:"Aptos Display","Segoe UI Variable Display","Segoe UI",Arial,sans-serif;margin:0 0 12px;font-size:38px;line-height:1.12;font-weight:700;letter-spacing:-1.4px;color:#fff}
.lead{margin:0 0 30px;font-size:15px;line-height:1.75;color:var(--muted)}
label{display:block;font-size:13px;font-weight:700;color:#e7e0f1;margin-bottom:10px;letter-spacing:.01em}
.amount-wrap{height:74px;border:1px solid #3b3049;border-radius:16px;display:flex;align-items:center;background:#0f0b14;padding:0 18px;transition:.2s}
.amount-wrap:focus-within{border-color:var(--accent2);box-shadow:0 0 0 4px rgba(124,92,255,.12)}
.amount-wrap span{color:var(--accent);font-weight:800;border-right:1px solid #342a40;padding-right:14px;margin-right:14px;letter-spacing:.05em}
.amount-wrap input{width:100%;border:0;outline:0;background:transparent;color:#fff;font-size:29px;font-weight:700;font-family:"Aptos","Segoe UI Variable Text","Segoe UI",Arial,sans-serif;text-align:left}
.amount-wrap input::placeholder{color:#655b72}
small{display:block;color:#81778e;font-size:12px;margin-top:9px;line-height:1.6}
button,.back-link{width:100%;min-height:62px;margin-top:26px;border:0;border-radius:15px;color:#0d0911;background:linear-gradient(135deg,#d5c6ff 0%,#a98eff 50%,#8b6cff 100%);font-family:"Aptos","Segoe UI Variable Text","Segoe UI",Arial,sans-serif;font-size:15px;font-weight:800;cursor:pointer;box-shadow:0 15px 34px rgba(124,92,255,.22);display:flex;align-items:center;justify-content:center;gap:11px;letter-spacing:.01em;text-decoration:none;transition:.2s ease}
button:hover,.back-link:hover{transform:translateY(-1px);filter:brightness(1.05)}
button:disabled{opacity:.65;cursor:wait;transform:none}
.button-arrow{font-size:18px;line-height:1}
.secure-line{display:flex;align-items:center;justify-content:center;gap:9px;margin-top:24px;padding-top:20px;border-top:1px solid var(--line);color:#92879e;font-size:12px;text-align:center;line-height:1.5}
.shield{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:rgba(112,224,181,.11);color:var(--success);font-weight:900;flex:0 0 auto}
footer{text-align:center;margin-top:20px;font-size:11px;color:#665d72;letter-spacing:.04em}
.alert{background:var(--danger-bg);border:1px solid rgba(255,156,169,.28);color:#ffc1c9;padding:13px 14px;border-radius:12px;margin:-5px 0 22px;font-size:12px;line-height:1.7}
.result-shell{padding-top:8px}
.result-card{text-align:center}
.result-card .lead{text-align:center}
.result-icon{width:72px;height:72px;border-radius:50%;display:grid;place-items:center;margin:0 auto 24px;font-size:29px;font-weight:900;border:1px solid rgba(189,167,255,.22);background:#0f0b14;box-shadow:inset 0 0 0 1px rgba(255,255,255,.015)}
.result-icon.success{color:var(--success);background:var(--success-bg);border-color:rgba(112,224,181,.28)}
.result-icon.failed{color:var(--warning);background:var(--warning-bg);border-color:rgba(232,199,122,.25)}
.receipt-row{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:17px 0;border-top:1px solid var(--line);text-align:left;font-size:13px}
.receipt-row span{color:#91879e}
.receipt-row strong{color:#fff;text-align:right;word-break:break-all}
.back-link{margin-top:22px}
@media(max-width:600px){
  body{padding:24px 14px}
  .brand{margin-bottom:22px}
  .brand-name{font-size:27px}
  .mark{width:49px;height:49px}
  .payment-card{padding:29px 21px;border-radius:20px}
  h1{font-size:33px}
  .lead{font-size:14px}
  .amount-wrap{height:68px}
  .amount-wrap input{font-size:26px}
  button,.back-link{min-height:58px}
  .receipt-row{gap:12px}
}