:root { color-scheme: dark; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: #090d16; color: #f4f6fb; }
* { box-sizing: border-box; }
body { min-height: 100svh; margin: 0; display: flex; flex-direction: column; background: radial-gradient(ellipse at 50% 26%, #172b51 0, #0c1525 34%, #090d16 68%); }
header, footer { width: min(1120px, 100%); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 24px 32px; }
.brand { display: flex; border-radius: 12px; }
.brand img { object-fit: contain; }
button { color: #c5d0e5; background: transparent; border: 1px solid #34435b; padding: 10px 16px; border-radius: 24px; font: inherit; cursor: pointer; }
button:hover { background: #182740; }
button:focus-visible, a:focus-visible { outline: 3px solid #85afff; outline-offset: 5px; }
main { flex: 1; display: grid; place-content: center; width: 100%; padding: 32px 20px 64px; }
.card { width: min(570px, 100%); margin: auto; padding: 44px; border: 1px solid #30405a; border-radius: 28px; background: #111b2ce8; box-shadow: 0 28px 80px #0004; }
.eyebrow { color: #9badcb; font-size: 11px; font-weight: 700; letter-spacing: 0.2em; margin: 0 0 28px; }
.status-icon { width: 58px; height: 58px; display: grid; place-items: center; font-size: 28px; border-radius: 18px; background: #2563eb25; color: #83adff; border: 1px solid #477cff55; }
.card[data-state="confirmed"] .status-icon { color: #72dab0; background: #15362d; border-color: #286249; }
.card[data-state="failed"] .status-icon, .card[data-state="expired"] .status-icon { color: #ffbda1; background: #38241f; border-color: #704532; }
h1 { font-size: clamp(29px, 5vw, 39px); letter-spacing: -0.04em; line-height: 1.2; margin: 25px 0 18px; }
#description { font-size: 16px; line-height: 1.75; color: #b9c7dd; margin: 0; }
.next-step { display: flex; gap: 16px; padding: 22px 0 0; margin-top: 30px; border-top: 1px solid #30405a; }
.step-number { align-self: flex-start; padding: 10px; border-radius: 10px; background: #2563eb; font-weight: 700; font-size: 12px; }
h2 { font-size: 15px; margin: 0 0 8px; }
.next-step p { color: #a5b5cf; font-size: 13px; line-height: 1.65; margin: 0; }
.platforms { font-size: 11px; color: #8a9ab4; line-height: 1.8; margin: 28px 0 0; }
footer { gap: 16px; color: #8a9ab4; font-size: 12px; padding-bottom: 28px; }
noscript { max-width: 570px; line-height: 1.7; color: #b9c7dd; }
@media (max-width: 540px) { header, footer { padding: 18px 20px; } main { padding: 20px 16px 40px; } .card { padding: 30px 24px; border-radius: 22px; } footer { flex-wrap: wrap; } }