.login-shell{min-height:100dvh;height:100dvh;display:flex;align-items:center;justify-content:center;padding:16px;background:linear-gradient(135deg,#667eea,#764ba2)}.login-card{width:min(450px,100%);border-radius:20px;border:none;background:#fffffff2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.login-logo{width:120px;height:auto;display:block;filter:drop-shadow(0 4px 8px rgba(0,0,0,.1));animation:fadeInDown .6s ease-out}.logo-container{position:relative;display:inline-block;margin-bottom:2rem}.login-title{font-size:30px}.login-subtitle{font-size:15px}.spinner-ring{position:absolute;top:50%;left:50%;width:150px;height:150px;transform:translate(-50%,-50%) scale(.8);border:4px solid transparent;border-top-color:#667eea;border-right-color:#764ba2;border-radius:50%;opacity:0;transition:opacity .3s ease,transform .3s ease;pointer-events:none}.spinner-ring.active{opacity:1;transform:translate(-50%,-50%) scale(1);animation:spin 1s linear infinite}.login-card .card-body{padding:2.5rem!important}@media(max-width:992px){.login-shell{padding:12px}.login-card{border-radius:18px}.login-card .card-body{padding:2rem!important}.login-title{font-size:28px}.login-subtitle{font-size:14px}}@media(max-width:768px){.login-shell{padding:20px 12px 28px}.login-card{border-radius:16px}.login-card .card-body{padding:1.75rem!important}.login-logo{width:100px}.spinner-ring{width:120px;height:120px}.login-title{font-size:26px}.login-subtitle{font-size:13px}.form-control-lg{padding:.6rem .9rem}.btn-primary{padding:.7rem}}@media(max-width:576px){.login-shell{padding:16px 10px 24px}.login-card{border-radius:14px;width:min(380px,100%)}.login-card .card-body{padding:1.5rem!important}.logo-container{margin-bottom:1.5rem}.login-logo{width:88px}.spinner-ring{width:105px;height:105px}.login-title{font-size:24px}.login-subtitle,.form-text,.form-label.small,.text-muted.small{font-size:12px}.input-group-lg .input-group-text,.input-group-lg .form-control,.form-control-lg{border-width:1.5px}.btn-primary{padding:.65rem;font-size:.95rem}}@media(max-width:380px){.login-card .card-body{padding:1.25rem!important}.login-logo{width:80px}.spinner-ring{width:96px;height:96px}.login-title{font-size:22px}.login-subtitle{font-size:11px}}@media(max-height:700px){.login-shell{padding:12px}.login-card .card-body{padding:1.25rem!important}.logo-container{margin-bottom:1.25rem}.login-logo{width:88px}.spinner-ring{width:105px;height:105px}.login-title{font-size:24px}.login-subtitle{font-size:12px}.login-card .mb-3{margin-bottom:.75rem!important}.login-card .mt-3{margin-top:.75rem!important}.login-card .mt-4{margin-top:.9rem!important}}@media(max-height:600px){.login-shell{padding:8px}.login-card .card-body{padding:1rem!important}.logo-container{margin-bottom:1rem}.login-logo{width:80px}.spinner-ring{width:96px;height:96px}.login-title{font-size:22px}.login-subtitle,.form-text,.form-label.small,.text-muted.small{font-size:11px}}.form-control-lg{border-radius:12px;border:2px solid #e0e0e0;padding:.75rem 1rem;transition:all .3s ease}.form-control-lg:focus{border-color:#667eea;box-shadow:0 0 0 .2rem #667eea26}.input-group-lg .input-group-text{border:2px solid #e0e0e0;border-right:0;border-radius:12px 0 0 12px;background:#e9ecef}.input-group-lg .form-control{border:2px solid #e0e0e0;border-left:2px solid #e0e0e0;border-radius:0 12px 12px 0}.input-group-lg .input-group-text .bi{color:#000}.input-group-lg{border-radius:12px}.input-group-lg .form-control:focus{border-color:#667eea;box-shadow:0 0 0 .2rem #667eea26}.login-shell .btn-primary{background:linear-gradient(135deg,#667eea,#764ba2);border:none;border-radius:12px;padding:.75rem;font-weight:600;letter-spacing:.5px;transition:all .3s ease;box-shadow:0 4px 15px #667eea4d}.login-shell .btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 20px #667eea66}.login-shell .btn-primary.loading{background:linear-gradient(135deg,#505fa3,#5a3978);cursor:not-allowed;opacity:.8}.alert-danger{border-radius:12px;border:none;background:#dc35451a;color:#dc3545;animation:shake .4s ease}@keyframes spin{0%{transform:translate(-50%,-50%) scale(1) rotate(0)}to{transform:translate(-50%,-50%) scale(1) rotate(360deg)}}@keyframes fadeInDown{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@keyframes shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-5px)}20%,40%,60%,80%{transform:translate(5px)}}