* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #f8f7ff; }
body { background: #020817; }
.night-shell { min-height: 100vh; position: relative; display: grid; place-items: center; overflow: hidden; padding: 28px 18px; background: radial-gradient(circle at 70% 12%, #20346c 0, transparent 32%), linear-gradient(180deg, #030817 0%, #071537 48%, #020712 100%); }
.stars, .stars::before, .stars::after { position: absolute; inset: 0; content: ""; background-image: radial-gradient(#fff 0.7px, transparent 1px); background-size: 52px 52px; opacity: .58; }
.stars::before { transform: translate(22px, 11px); opacity: .34; background-size: 83px 83px; }
.stars::after { transform: translate(11px, 31px); opacity: .25; background-size: 127px 127px; }
.moon { position: absolute; right: clamp(32px, 11vw, 120px); top: clamp(48px, 9vh, 82px); width: 54px; height: 54px; border-radius: 50%; background: #ffe9b0; box-shadow: 0 0 30px rgba(255, 235, 180, .45); }
.moon::after { content: ""; position: absolute; left: -13px; top: -5px; width: 54px; height: 54px; border-radius: 50%; background: #071537; }
.mountains { position: absolute; left: -5%; right: -5%; bottom: 0; height: 34vh; opacity: .9; clip-path: polygon(0 78%, 7% 58%, 15% 63%, 24% 35%, 31% 52%, 40% 41%, 51% 64%, 61% 31%, 72% 54%, 83% 38%, 92% 57%, 100% 44%, 100% 100%, 0 100%); }
.mountains.back { background: #111f44; bottom: 10vh; opacity: .55; }
.mountains.front { background: linear-gradient(180deg, #0a1430, #020712); height: 30vh; }
.activation-card { width: min(440px, 100%); position: relative; z-index: 1; padding: 44px 34px 32px; border: 1px solid rgba(156, 171, 255, .28); border-radius: 22px; background: linear-gradient(180deg, rgba(13, 27, 68, .70), rgba(8, 17, 43, .58)); box-shadow: 0 30px 80px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.12); backdrop-filter: blur(18px); text-align: center; }
h1 { margin: 0; font-size: 38px; font-weight: 500; letter-spacing: .08em; }
.tiny-heart { color: #a884ff; font-size: 22px; margin-left: 6px; }
.subtitle { color: #c9c4e6; margin: 12px 0 22px; }
.divider { height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.15), transparent); margin-bottom: 26px; }
h2 { font-size: 20px; margin: 0 0 10px; }
.hint, .compliance { color: #aeb4cf; font-size: 13px; }
.input-wrap { display: flex; align-items: center; height: 48px; margin-top: 22px; border: 1px solid rgba(165, 178, 232, .36); border-radius: 8px; background: rgba(6, 15, 42, .56); }
input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: #fff; padding: 0 16px; font-size: 15px; }
input::placeholder { color: #78819f; }
.scan-mark { width: 48px; color: #dfe4ff; font-size: 20px; }
.error { min-height: 20px; color: #ffb4c8; font-size: 13px; margin: 8px 0 12px; }
.primary-button { width: 100%; height: 54px; border: 0; border-radius: 999px; color: #fff; font-size: 17px; background: linear-gradient(90deg, #8d6cff, #d3a7ff); box-shadow: 0 16px 34px rgba(146, 103, 255, .36); cursor: pointer; }
.primary-button:disabled { opacity: .65; cursor: wait; }
.compliance { margin: 28px 0 0; }
@media (max-width: 480px) { .activation-card { padding: 38px 22px 28px; } h1 { font-size: 33px; } .moon { width: 42px; height: 42px; } }