:root { --ink:#201c2e; --muted:#6e697a; --violet:#6650a8; --violet-dark:#4e3c8b; --lavender:#f3f0fb; --line:#ded9e8; --danger:#9d3447; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; color:var(--ink); font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; background:radial-gradient(circle at 8% 10%,#f6e9f5 0,transparent 31rem),radial-gradient(circle at 96% 95%,#e5ddf7 0,transparent 34rem),#faf9fc; }
.page-shell { min-height:100vh; display:grid; place-items:center; padding:40px 20px; }
.payment-card { width:min(720px,100%); background:#fff; padding:44px; border:1px solid rgba(71,51,116,.10); border-radius:24px; box-shadow:0 24px 65px rgba(45,31,76,.13); }
.brand { display:flex; align-items:center; gap:10px; font-size:.92rem; font-weight:700; letter-spacing:.01em; }
.brand-mark { display:grid; place-items:center; width:28px; height:28px; border-radius:50%; color:#fff; background:var(--violet); font-family:Georgia,serif; font-size:1.2rem; }
header { margin:31px 0 28px; } .eyebrow { margin:0 0 8px; color:var(--violet); font-size:.77rem; text-transform:uppercase; letter-spacing:.12em; font-weight:750; }
h1 { margin:0; font-size:clamp(2rem,5vw,2.7rem); letter-spacing:-.045em; } .intro { max-width:570px; margin:12px 0 0; color:var(--muted); line-height:1.55; }
.field-group { margin:0 0 22px; } label { display:block; margin-bottom:8px; font-weight:700; font-size:.92rem; }
input[type="text"], input[type="number"], textarea { width:100%; padding:13px 14px; border:1px solid var(--line); border-radius:10px; color:var(--ink); font:inherit; background:#fff; outline:none; transition:border .15s,box-shadow .15s; }
input:focus, textarea:focus { border-color:var(--violet); box-shadow:0 0 0 3px rgba(102,80,168,.14); } textarea { resize:vertical; min-height:105px; }
.amount-group { padding:19px; background:var(--lavender); border-radius:14px; } .amount-group label { margin-bottom:10px; }
.amount-input { display:flex; align-items:center; overflow:hidden; border:1px solid var(--line); border-radius:10px; background:#fff; } .amount-input > span:first-child { padding-left:15px; color:var(--muted); font-size:1.25rem; } .amount-input input { border:0; box-shadow:none; padding-left:7px; font-size:1.3rem; font-weight:700; } .amount-input .currency { padding-right:15px; color:var(--muted); font-size:.8rem; font-weight:700; }
.hint { margin:7px 0 0; color:var(--muted); font-size:.78rem; } .two-columns { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.check-row { display:flex; align-items:flex-start; gap:10px; margin:2px 0 23px; color:var(--muted); font-weight:500; line-height:1.4; } .check-row input { margin-top:3px; accent-color:var(--violet); }
.terms-box { margin:-7px 0 18px; border:1px solid var(--line); border-radius:10px; background:#faf9fc; color:var(--muted); font-size:.84rem; }.terms-box summary { padding:12px 14px; color:var(--violet); font-weight:750; cursor:pointer; }.terms-box div { padding:0 14px 4px; line-height:1.5; }.terms-box a { color:var(--violet); }
button { display:flex; justify-content:space-between; width:100%; padding:15px 18px; border:0; border-radius:10px; color:#fff; background:var(--violet); font:700 1rem inherit; cursor:pointer; transition:background .15s,transform .15s; } button:hover { background:var(--violet-dark); transform:translateY(-1px); } button:disabled { cursor:wait; opacity:.72; }
.return-link { display:inline-block; padding:12px 16px; border-radius:9px; color:#fff; background:var(--violet); text-decoration:none; font-weight:700; }
.receipt-card { max-width:720px; }.receipt { margin:0 0 18px; overflow:hidden; border:1px solid var(--line); border-radius:14px; }.receipt-top { display:flex; justify-content:space-between; gap:16px; align-items:center; padding:15px 18px; background:var(--lavender); border-bottom:1px solid var(--line); }.receipt-status { padding:5px 9px; color:#543d93; background:#e9e2fc; border-radius:99px; font-size:.78rem; font-weight:750; }.receipt-status.paid { color:#176536; background:#e0f5e7; }.receipt-number { font-size:.82rem; font-weight:750; letter-spacing:.02em; }.receipt dl { margin:0; }.receipt dl > div { display:grid; grid-template-columns:155px 1fr; gap:15px; padding:14px 18px; border-bottom:1px solid var(--line); }.receipt dl > div:last-child { border-bottom:0; }.receipt dt { color:var(--muted); font-size:.84rem; }.receipt dd { margin:0; font-weight:650; line-height:1.45; }.receipt-amount { font-size:1.16rem; }.print-button { margin:0 0 12px; background:#fff; color:var(--violet); border:1px solid var(--violet); }.print-button:hover { background:var(--lavender); }
.secure-note { margin:15px 0 0; text-align:center; color:var(--muted); font-size:.8rem; } .alert { margin-bottom:22px; padding:13px 15px; border-radius:10px; color:var(--danger); background:#fff0f2; border:1px solid #f5c6cf; }
@media (max-width:580px) { .payment-card { padding:28px 22px; border-radius:18px; } .two-columns { grid-template-columns:1fr; gap:0; } .page-shell { padding:20px 12px; }.receipt-top { align-items:flex-start; flex-direction:column; gap:8px; }.receipt dl > div { grid-template-columns:1fr; gap:4px; } }
@media print { body { background:#fff; }.page-shell { display:block; padding:0; }.payment-card { width:100%; border:0; box-shadow:none; padding:0; }.print-button,.return-link { display:none; } }