:root { color-scheme: dark; font-family: Arial, Helvetica, sans-serif; color: #fff; background: #000; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100svh; }
main { width: min(calc(100% - 28px), 410px); margin: 0 auto; padding: 14px 0 calc(24px + env(safe-area-inset-bottom)); }
a { color: #e7ccff; }
.back { display: flex; align-items: center; justify-content: center; min-height: 36px; font-size: .875rem; color: #bfb2c9; text-decoration: none; }
header { text-align: center; margin: 16px 0 20px; }
h1 { margin: 0; font-size: 1.75rem; line-height: 1.2; }
.intro { margin: 8px 0 0; color: #b8b8b8; font-size: .9375rem; }
.payments { display: grid; gap: 8px; }
.payment { display: flex; align-items: center; gap: 14px; min-height: 74px; padding: 13px 16px; color: #fff; border: 1px solid #51445b; border-radius: 8px; background: #131016; text-decoration: none; }
a.payment:hover { background: #302037; border-color: #846699; }
.mark { display: grid; place-items: center; flex: 0 0 40px; width: 40px; height: 40px; border-radius: 8px; font-size: 1.5rem; font-weight: 800; }
.zelle .mark { background: #5d2e9a; }
.cashapp .mark { background: #00d64f; color: #00240c; }
.paypal .mark { background: #e0efff; color: #003087; }
.venmo .mark { background: #008cff; color: #fff; }
.label { display: grid; gap: 4px; }
.label strong { font-size: 1rem; }
.label > span { color: #bdb4c3; font-size: .8125rem; }
.arrow { margin-left: auto; font-size: 1.25rem; color: #bfb2c9; }
a:focus-visible, summary:focus-visible { outline: 3px solid #d9bbff; outline-offset: 4px; border-radius: 4px; }
.qr-options { margin-top: 20px; color: #cdb5df; font-size: .875rem; }
summary { cursor: pointer; padding: 10px 0; }
.qr-card { margin-top: 6px; padding: 0 12px 12px; border: 1px solid #51445b; border-radius: 6px; }
.qr-card p { margin: 6px 0 10px; color: #ccc; line-height: 1.5; }
.qr-card img { display: block; width: 100%; max-width: 300px; height: auto; margin: 10px auto; }
.qr-card a { display: block; padding: 8px 0; text-align: center; }
.thanks { margin: 18px 0 0; color: #888; font-size: .8125rem; text-align: center; }
.zelle-group { border: 1px solid #51445b; border-radius: 8px; background: #131016; overflow: hidden; }
.zelle-group .payment { border: 0; border-radius: 0; }
.zelle-contact { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 0 14px 12px; }
#zelle-email { color: #ddd; font-size: .8125rem; overflow-wrap: anywhere; user-select: text; }
#copy-zelle { min-height: 32px; min-width: 60px; padding: 6px 10px; border: 0; border-radius: 5px; background: #fff; color: #000; font: inherit; font-size: .8125rem; font-weight: 700; cursor: pointer; }
#copy-zelle:focus-visible { outline: 3px solid #d9bbff; outline-offset: 3px; }
#copy-zelle:disabled { opacity: .6; }
#copy-status { flex-basis: 100%; margin: 0; color: #cdb5df; font-size: .75rem; line-height: 1.4; }
#copy-status:empty { display: none; }
.qr-card .zelle-qr { background: #fff; padding: 16px; image-rendering: pixelated; }
[hidden] { display: none !important; }
@media (max-height: 650px) { header { margin: 10px 0 14px; } .payment { min-height: 68px; padding-block: 10px; } .qr-options { margin-top: 12px; } }