:root { --tlo: #0b0b10; --karta: #16161f; --tekst: #f4f4f7; --szary: #9a9aab; --akcent: #7c3aed; }
@media (prefers-color-scheme: light) { :root { --tlo: #f6f6f9; --karta: #ffffff; --tekst: #111118; --szary: #5c5c6e; } }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: grid; place-items: center; padding: 24px 16px;
  font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: var(--tlo); color: var(--tekst); }
main { width: 100%; max-width: 420px; text-align: center; }
.ikona { width: 88px; height: 88px; border-radius: 22px; box-shadow: 0 8px 30px rgba(124, 58, 237, .35); }
h1 { font-size: 28px; line-height: 1.2; margin: 20px 0 8px; }
p { color: var(--szary); margin: 0 0 20px; }
.kod { margin: 0 auto 20px; padding: 16px; border-radius: 16px; background: var(--karta); }
.kod small { display: block; color: var(--szary); font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; }
.kod strong { display: block; font-size: 32px; letter-spacing: 6px; margin-top: 4px; }
.przycisk { display: block; width: 100%; padding: 15px; margin: 10px 0 0; border: 0; border-radius: 14px; cursor: pointer;
  font: 600 16px/1.2 inherit; font-family: inherit; text-decoration: none; background: var(--akcent); color: #fff; }
.przycisk.drugi { background: var(--karta); color: var(--tekst); }
.przycisk[aria-disabled="true"] { opacity: .55; pointer-events: none; }
.uwaga { font-size: 13px; margin-top: 16px; }