:root {
  --bg: #F3F6FB; --card: #FFFFFF; --ink: #172538; --muted: #5B6B82;
  --accent: #145CD6; --accent-ink: #FFFFFF; --line: #DCE3EE;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #0E1A2B; --card: #16243A; --ink: #EEF3FF; --muted: #A9B7CF; --accent: #3B82F6; --line: #263A57; }
}
* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background: var(--bg); color: var(--ink); }
header { background: #16324F; color: #FFFFFF; padding: 28px 20px 60px; text-align: center; }
header img { width: 84px; height: 84px; border-radius: 20px; box-shadow: 0 6px 18px rgba(0, 0, 0, .25); }
header h1 { margin: 14px 0 6px; font-size: 26px; }
header p { margin: 0; opacity: .85; }
main { max-width: 520px; margin: -36px auto 32px; padding: 0 16px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 20px; margin-bottom: 16px; }
.card h2 { margin: 0 0 6px; font-size: 19px; }
.button { display: block; text-align: center; background: var(--accent); color: var(--accent-ink); text-decoration: none; font-weight: 600; font-size: 17px; padding: 15px; border-radius: 14px; margin: 14px 0 6px; }
.button.disabled { background: var(--line); color: var(--muted); pointer-events: none; }
ol { padding-left: 20px; margin: 10px 0 0; color: var(--muted); line-height: 1.5; }
a { color: var(--accent); }
.muted { color: var(--muted); font-size: 14px; }
.qr { text-align: center; }
.qr img { width: 220px; height: 220px; background: #FFFFFF; padding: 10px; border-radius: 16px; }
[hidden] { display: none !important; }