.login-page{box-sizing:border-box;background-color:#000;justify-content:center;align-items:center;width:100%;min-height:100vh;display:flex;position:relative;overflow:hidden}.login-background{display:none}.login-background:before,.login-background:after{content:"";position:absolute;inset:0}.login-background:before{background-image:radial-gradient(1.5px 1.5px at 20px 30px,#01e4ff,#0000),radial-gradient(1.5px 1.5px at 40px 70px,#fff,#0000),radial-gradient(2px 2px at 50px 160px,#01e4ff,#0000),radial-gradient(1.5px 1.5px at 90px 40px,#fff,#0000),radial-gradient(2px 2px at 130px 80px,#01e4ff,#0000),radial-gradient(1.5px 1.5px at 160px 120px,#fff,#0000);background-repeat:repeat;background-size:200px 200px;animation:4s ease-in-out infinite alternate twinkle}.login-background:after{background-image:radial-gradient(1px 1px at 10px 50px,#fff,#0000),radial-gradient(2px 2px at 70px 10px,#01e4ff,#0000),radial-gradient(1.5px 1.5px at 110px 150px,#fff,#0000),radial-gradient(1px 1px at 180px 60px,#01e4ff,#0000);background-repeat:repeat;background-size:250px 250px;animation:3s ease-in-out infinite alternate-reverse twinkle}@keyframes twinkle{0%{opacity:.1;transform:scale(.95)}50%{opacity:.8}to{opacity:.2;transform:scale(1.05)}}.login-container{z-index:1;box-sizing:border-box;flex-direction:column;gap:24px;width:100%;max-width:440px;padding:24px;display:flex}.login-logo{text-align:center;flex-direction:column;align-items:center;gap:4px;display:flex}.login-logo h1{color:#fff;letter-spacing:-1px;white-space:nowrap;margin:0;font-size:2.2rem;font-weight:300}.text-cyan{color:#01e4ff;text-shadow:0 0 15px #01e4ff66;font-weight:800}.login-subtitle{color:#80868b;text-transform:uppercase;letter-spacing:2px;font-size:.9rem;font-weight:600}.login-card{-webkit-backdrop-filter:blur(16px);background:#101112b3;border:1px solid #ffffff14;border-radius:24px;flex-direction:column;padding:32px 24px;display:flex;box-shadow:0 8px 32px #0000005e}.selected-user-info{flex-direction:column;align-items:center;margin-bottom:24px;display:flex}.user-avatar-xl{color:#030508;background:linear-gradient(135deg,#01e4ff 0%,#6befff 50%,#01e4ff 100%) 0 0/200% 200%;border-radius:20px;justify-content:center;align-items:center;width:72px;height:72px;margin-bottom:12px;font-size:1.8rem;font-weight:700;animation:3s infinite gradientFlow;display:flex;box-shadow:0 0 20px #01e4ff66}@keyframes gradientFlow{0%{background-position:0%}50%{background-position:100%}to{background-position:0%}}.selected-user-info h2{color:#fff;margin:0 0 2px;font-size:1.3rem;font-weight:700}.selected-user-info p{color:#80868b;letter-spacing:.5px;margin:0;font-size:.85rem}.pin-form{flex-direction:column;gap:16px;display:flex}.form-group-login{flex-direction:column;gap:6px;display:flex}.login-input{color:#fff;box-sizing:border-box;background:#ffffff08;border:1px solid #ffffff14;border-radius:12px;outline:none;width:100%;padding:12px 16px;font-size:15px;transition:all .2s}.login-input:focus{background:#ffffff0d;border-color:#01e4ff;box-shadow:0 0 10px #00f2fe1a}.pin-label{color:#80868b;text-transform:uppercase;letter-spacing:1px;margin-bottom:2px;font-size:.7rem;font-weight:700}.pin-input-container{cursor:text;box-sizing:border-box;background:#ffffff08;border:1px solid #ffffff14;border-radius:12px;justify-content:center;align-items:center;gap:16px;margin-bottom:8px;padding:16px;transition:all .2s;display:flex;position:relative}.pin-input-container:focus-within{background:#ffffff0d;border-color:#01e4ff;box-shadow:0 0 15px #00f2fe1a}.hidden-pin-input{opacity:0;cursor:text;z-index:10;width:100%;height:100%;font-size:16px;position:absolute;top:0;left:0}.pin-group{z-index:1;gap:12px;display:flex}.pin-divider{opacity:.3;z-index:1;background-color:#80868b;width:1px;height:20px}.pin-visual-digit{color:#fff;background-color:#ffffff0f;border-radius:50%;justify-content:center;align-items:center;width:14px;height:14px;font-size:24px;line-height:14px;transition:all .15s;display:flex}.pin-visual-digit.filled{background-color:#0000}.login-btn{color:#030508;cursor:pointer;box-sizing:border-box;background:linear-gradient(90deg,#01e4ff 0%,#6befff 50%,#01e4ff 100%) 0 0/200% 200%;border:none;border-radius:12px;width:100%;padding:12px;font-size:1rem;font-weight:700;transition:all .2s;animation:3s infinite gradientFlow;box-shadow:0 4px 15px #01e4ff4d}.login-btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 6px 20px #01e4ff80}.login-btn:disabled{opacity:.5;cursor:not-allowed}.login-copyright-bar{color:#030508;text-align:center;letter-spacing:.5px;z-index:10;box-sizing:border-box;background-color:#01e4ff;width:100%;padding:8px 16px;font-size:.7rem;font-weight:700;position:absolute;bottom:0;left:0;box-shadow:0 -2px 10px #01e4ff26}@media (max-width:480px){.login-container{gap:16px;padding:16px}.login-logo h1{font-size:1.8rem}.login-card{border-radius:20px;padding:24px 16px}.pin-input-container{gap:10px;padding:12px}.pin-group{gap:8px}.pin-visual-digit{width:12px;height:12px;font-size:20px;line-height:12px}.user-avatar-xl{border-radius:16px;width:60px;height:60px}}