:root{--primary-dark: #1a1a2e;--secondary-dark: #16213e;--accent-purple: #6c5ce7;--accent-gold: #fdcb6e;--text-light: #ddd;--text-white: #fff;--card-bg: #2d3748;--hover-bg: #4a5568;--border-color: #4a5568;--shadow-dark: rgba(0, 0, 0, .8);--gradient-mystical: linear-gradient(135deg, #667eea 0%, #764ba2 100%)}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;background:var(--primary-dark);color:var(--text-light);min-height:100vh;background-image:radial-gradient(circle at 20% 50%,rgba(120,119,198,.3) 0%,transparent 50%),radial-gradient(circle at 80% 20%,rgba(255,119,198,.3) 0%,transparent 50%),radial-gradient(circle at 40% 80%,rgba(120,119,198,.3) 0%,transparent 50%)}.container{max-width:1200px;margin:0 auto;padding:20px}.btn{padding:12px 24px;border:none;border-radius:8px;font-size:16px;font-weight:600;cursor:pointer;transition:all .3s ease;text-transform:uppercase;letter-spacing:1px}.btn-primary{background:var(--gradient-mystical);color:var(--text-white)}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 25px #667eea66}.btn-secondary{background:transparent;color:var(--accent-gold);border:2px solid var(--accent-gold)}.btn-secondary:hover{background:var(--accent-gold);color:var(--primary-dark)}.card{background:var(--card-bg);border-radius:12px;padding:24px;box-shadow:0 8px 32px var(--shadow-dark);border:1px solid var(--border-color)}.form-group{margin-bottom:20px}.form-control{width:100%;padding:12px 16px;border:2px solid var(--border-color);border-radius:8px;background:var(--secondary-dark);color:var(--text-light);font-size:16px;transition:border-color .3s ease}.form-control:focus{outline:none;border-color:var(--accent-purple);box-shadow:0 0 0 3px #6c5ce733}.form-label{display:block;margin-bottom:8px;font-weight:600;color:var(--text-light)}.text-center{text-align:center}.mb-4{margin-bottom:2rem}.mt-4{margin-top:2rem}.fade-in{animation:fadeIn .6s ease-in}.slide-up{animation:slideUp .6s ease-out}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{transform:translateY(30px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes shuffle{0%{transform:translate(0) rotate(0)}25%{transform:translate(-10px) rotate(-2deg)}50%{transform:translate(10px) rotate(2deg)}75%{transform:translate(-5px) rotate(-1deg)}to{transform:translate(0) rotate(0)}}.shuffle-animation{animation:shuffle .5s ease-in-out}