:root { --bg: #050505; --text: #fff; --cyan: #00f3ff; --purple: #bc13fe; --glass: rgba(255,255,255,0.05); --border: 1px solid rgba(255,255,255,0.1); }
* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', sans-serif; }
body { background: var(--bg); color: var(--text); min-height: 100vh; display: flex; flex-direction: column; align-items: center; overflow-x: hidden; }
.scanlines { position: fixed; inset: 0; background: linear-gradient(transparent 50%, rgba(0,0,0,0.3) 50%); background-size: 100% 4px; pointer-events: none; }
.navbar { width: 100%; padding: 20px 5%; display: flex; justify-content: space-between; background: rgba(0,0,0,0.8); border-bottom: var(--border); }
.logo { font-family: 'Space Grotesk'; font-weight: 700; font-size: 1.5rem; } .dot { color: var(--cyan); }
.back-link { color: #aaa; text-decoration: none; } .back-link:hover { color: #fff; }
.container { margin-top: 40px; text-align: center; width: 90%; max-width: 800px; padding-bottom: 50px; }
h1 { font-family: 'Space Grotesk'; font-size: 2.5rem; margin-bottom: 10px; }
.form-wrapper { max-width: 500px; margin: 0 auto; text-align: left; background: var(--glass); border: var(--border); padding: 30px; border-radius: 20px; backdrop-filter: blur(10px); }
.input-group { margin-bottom: 20px; }
.input-group label { display: block; margin-bottom: 8px; color: #ccc; font-size: 0.9rem; }
.input-group input { width: 100%; padding: 12px; background: rgba(0,0,0,0.3); border: 1px solid #333; border-radius: 8px; color: #fff; outline: none; transition: 0.3s; }
.input-group input:focus { border-color: var(--cyan); }
.btn-submit { width: 100%; padding: 15px; background: linear-gradient(45deg, var(--cyan), var(--purple)); border: none; border-radius: 50px; color: #000; font-weight: bold; cursor: pointer; transition: 0.3s; margin-top: 10px; text-decoration: none; }
.instruction-box { text-align: left; background: rgba(0, 243, 255, 0.05); border: 1px solid var(--cyan); padding: 20px; border-radius: 12px; margin-bottom: 30px; }
.qr-grid { display: flex; justify-content: center; }
.qr-card { background: var(--glass); border: var(--border); padding: 30px; border-radius: 20px; width: 320px; text-align: center; position: relative; display: none; animation: popIn 0.5s ease; }
@keyframes popIn { from { transform: scale(0.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.badge { display: inline-block; padding: 5px 15px; border: 1px solid #fff; border-radius: 20px; font-size: 0.8rem; margin-bottom: 20px; }
.badge-premium { border-color: var(--cyan); color: var(--cyan); }
.badge-ultra { border-color: var(--purple); color: var(--purple); }
.qr-wrapper { background: #fff; padding: 10px; border-radius: 12px; margin-bottom: 20px; }
.qr-wrapper img { width: 100%; display: block; }
h2 { font-family: 'Space Grotesk'; font-size: 2.5rem; margin-bottom: 5px; }