:root { color-scheme: dark; font: 16px/1.55 system-ui, sans-serif; background: #101827; color: #f7f8fc; }
* { box-sizing: border-box; }
[hidden] { display:none !important; }
body { margin: 0; }
a { color: #cbb9ff; }
p { color: #d2d9e7; }
.site-header { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px max(24px, calc((100vw - 1080px)/2)); border-bottom: 1px solid #354158; }
.brand { display: flex; gap: 12px; align-items: center; color: white; text-decoration: none; font-size: 16px; font-weight: 800; letter-spacing: .12em; }
.brand-mark { display: inline-grid; place-items: center; width: 37px; height: 37px; border-radius: 10px; background: #e7dcff; color: #1d2035; font-size: 12px; letter-spacing: 0; }
.header-caption { color: #b9c4d9; font-size: 13px; }
main { width: min(100% - 32px, 1080px); margin: 42px auto 70px; }
.eyebrow { color: #a6d8f2; margin: 0; font-size: 13px; letter-spacing: .1em; }
h1 { font-size: clamp(30px, 4vw, 43px); margin: 4px 0 5px; line-height: 1.2; }
h2 { font-size: 20px; margin: 0 0 17px; }
.intro { margin: 0 0 25px; font-size: 14px; }
.checkout-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 18px; align-items: start; }
.order-card, .payment-card { border: 1px solid #3b4963; border-radius: 18px; background: #1a263b; padding: 25px; }
.order-card { background: linear-gradient(150deg, #22324e, #1a263b 72%); }
.price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; color: white; font-size: 38px; font-weight: 780; margin: 0 0 18px; line-height: 1.2; }
.price span { color: #bdc8d9; font-size: 14px; font-weight: 400; }
.included { list-style: none; padding: 0; margin: 0; }
.included li { padding: 10px 0 10px 21px; border-bottom: 1px solid #43526d; position: relative; font-size: 15px; }
.included li::before { content: '✓'; position: absolute; left: 1px; color: #cbb9ff; }
.scope { margin: 16px 0 0; font-size: 13px; }
.back-links { display: grid; gap: 8px; margin: 17px 0 0; font-size: 14px; }
.payment-hint { margin: -8px 0 14px; font-size: 14px; }
.mobile-payment-note { margin: 0 0 14px; padding: 12px 14px; border: 1px solid #b9903e; border-radius: 10px; background: #3b3020; color: #f3e4c2; font-size: 14px; }
form { display: grid; gap: 12px; }
form label:not(.check) { font-weight: 650; }
input[type=email] { width: 100%; padding: 12px; border: 1px solid #8492a9; border-radius: 9px; background: #101a2c; color: white; font: inherit; }
input[type=email]:focus-visible, a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid #acd4ff; outline-offset: 2px; }
.small { font-size: 13px; margin: -5px 0 0; }
.key-notices { padding: 11px 14px; border: 1px solid #58687f; border-radius: 11px; background: #121d30; }
.key-notices p { margin: 5px 0 9px; font-size: 13px; line-height: 1.45; }
.key-notices p:last-child { margin-bottom: 5px; }
.key-notices strong { color: #e1d4ff; }
.details-group { display: grid; gap: 7px; }
.disclosure { border: 1px solid #455571; border-radius: 8px; background: #131e31; }
.disclosure summary { cursor: pointer; padding: 9px 12px; font-size: 13px; font-weight: 650; }
.disclosure[open] summary { border-bottom: 1px solid #455571; }
.disclosure-body { padding: 4px 12px 10px; font-size: 13px; }
.disclosure-body p { margin: 8px 0; }
.check { display: flex; gap: 9px; align-items: start; font-size: 13px; line-height: 1.45; }
.check input { margin-top: 3px; flex: none; }
button { width: 100%; padding: 13px 18px; border: 0; border-radius: 9px; background: #d8c8ff; color: #1a1830; font: inherit; font-weight: 760; cursor: pointer; }
button:hover { background: #e9dfff; }
button:disabled { opacity: .6; cursor: not-allowed; }
.support { font-size: 13px; margin: 12px 0 0; }
#result { width:min(100%,680px); margin:22px auto 0; padding:28px; border:1px solid #44516a; border-radius:18px; background:#1a263b; text-align:center; }
#result h2 { margin-bottom:12px; }
.scan-amount { margin:0; color:#f7f8fc; font-size:16px; }
.scan-amount strong { font-size:27px; }
.scan-merchant { margin:4px 0 10px; font-size:14px; }
.scan-merchant strong { color:#f7f8fc; }
.scan-order { color:#b9c4d9; font-size:12px; overflow-wrap:anywhere; }
#qr { display:block; width:260px; max-width:100%; margin:16px auto; border:8px solid white; background:white; }
#qr-expiry { min-height:1.5em; color:#f2d9a2; font-size:14px; font-variant-numeric:tabular-nums; }
.scan-help { margin:12px auto; max-width:470px; font-size:13px; }
.scan-state { margin:15px 0 0; color:#e1d4ff; font-size:14px; }
#completion { margin:18px auto 0; max-width:500px; padding:15px; border:1px solid #68828a; border-radius:12px; background:#152c32; font-size:14px; text-align:left; }
footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; margin-top: 34px; padding-top: 18px; border-top: 1px solid #44516a; color: #aab4c7; font-size: 12px; }
@media (max-width: 760px) {
  .site-header { padding: 14px 20px; }
  main { margin-top: 24px; }
  .checkout-grid { grid-template-columns: 1fr; }
  .order-card, .payment-card { padding: 20px; }
  #result { padding:20px 16px; }
}