html, body{margin:0;height:100%;font-family:Arial,sans-serif;color:#fff;background:linear-gradient(135deg,#0a192f,#172a45,#203a43);overflow:hidden;display:flex;align-items:center;justify-content:center;}  

/* FLOATING ICONS */  
.bg-icons{position:fixed;inset:0;z-index:3;pointer-events:none;}  
.bg-icons i{position:absolute;font-size:60px;opacity:0.35;color:#00e6ff;animation:float 7s ease-in-out infinite;filter: drop-shadow(0 0 12px rgba(0,230,255,.7));}  
.bg-icons i:nth-child(1){top:18%;left:22%;}  
.bg-icons i:nth-child(2){top:45%;left:18%;animation-delay:1s;}  
.bg-icons i:nth-child(3){top:70%;left:25%;animation-delay:2s;}  
.bg-icons i:nth-child(4){top:25%;right:22%;animation-delay:1.5s;}  
.bg-icons i:nth-child(5){top:60%;right:20%;animation-delay:2.5s;}  

@keyframes float{0%{transform:translateY(0)}50%{transform:translateY(-25px)}100%{transform:translateY(0)}}

/* CARD */  
.card{position:relative;z-index:5;background:rgba(0,0,0,.65);border-radius:16px;padding:35px 30px;width:100%;max-width:500px;max-height:90vh;overflow-y:auto;box-shadow:0 15px 35px rgba(0,0,0,.6);}  
.card::-webkit-scrollbar{width:6px}  
.card::-webkit-scrollbar-thumb{background:#00e6ff;border-radius:10px}  

.logo{background:#00e6ff;color:#0a192f;padding:10px 30px;border-radius:10px;font-size:28px;font-weight:bold;display:inline-block;margin-bottom:20px;}  
input{background:rgba(255,255,255,.12);border:none;color:#fff;padding:15px;border-radius:8px;margin-bottom:15px;width:100%;box-sizing:border-box;}  
input::placeholder{color:rgba(255,255,255,.6)}  

.btn-reg{background:#00e6ff;color:#000;padding:15px;border-radius:50px;font-weight:bold;border:none;width:100%;font-size:16px;}  

#alert{display:none;padding:15px;border-radius:8px;margin-bottom:20px;text-align:center;}