.container{width:100%;max-width:400px;margin:0 auto}.login-box{background:white;padding:2.5rem;border-radius:20px;box-shadow:0 20px 40px rgba(0,0,0,.1);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2);position:relative;overflow:hidden}.login-box:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#3b82f6,#1d4ed8,#3b82f6);background-size:200% 100%;animation:gradient-shift 3s ease-in-out infinite}@keyframes gradient-shift{0%,to{background-position:0 50%}50%{background-position:100% 50%}}.input-box{position:relative;margin-bottom:1.5rem}.input-box input{width:100%;padding:1rem 1rem .5rem;border:2px solid #e5e7eb;border-radius:12px;font-size:1rem;background:#f9fafb;transition:all .3s ease;outline:none}.input-box input:focus,.input-box input:valid{border-color:#3b82f6;background:white;box-shadow:0 0 0 3px rgba(59,130,246,.1)}.input-box label{position:absolute;top:1rem;left:1rem;font-size:1rem;color:#6b7280;pointer-events:none;transition:all .3s ease;transform-origin:left top}.input-box input:focus+label,.input-box input:valid+label{top:.5rem;left:1rem;font-size:.75rem;color:#3b82f6;font-weight:600;transform:translateY(-50%)}.password-input{position:relative}.password-toggle-btn{position:absolute;right:1rem;top:50%;transform:translateY(-50%);background:none;border:none;color:#6b7280;cursor:pointer;padding:.25rem;border-radius:.375rem;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.password-toggle-btn:hover{color:#3b82f6;background-color:rgba(59,130,246,.1)}.password-toggle-btn:focus{outline:2px solid #3b82f6;outline-offset:2px}.password-toggle-btn:active{transform:translateY(-50%) scale(.95)}.forgot-pass{text-align:right;margin-bottom:1.5rem;font-size:.875rem}.btn{width:100%;padding:1rem;background:linear-gradient(135deg,#3b82f6,#1d4ed8);color:white;border:none;border-radius:12px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s ease;position:relative;overflow:hidden}.btn:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:left .5s}.btn:hover:before{left:100%}.btn:hover{transform:translateY(-2px);box-shadow:0 10px 25px rgba(59,130,246,.3)}.btn:active{transform:translateY(0)}.btn:disabled{opacity:.7;cursor:not-allowed;transform:none}.signup-link{text-align:center;margin-top:1.5rem;font-size:.875rem}@media (max-width:480px){.login-box{padding:2rem;margin:1rem}.container{max-width:100%}}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.animate-spin{animation:spin 1s linear infinite}@keyframes slideIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.bg-red-50{animation:slideIn .3s ease-out}.btn:focus,.input-box input:focus{outline:2px solid #3b82f6;outline-offset:2px}@media (prefers-color-scheme:dark){.login-box{background:#1f2937;border-color:rgba(255,255,255,.1)}.input-box input{background:#374151;border-color:#4b5563;color:white}.input-box input:focus{background:#1f2937}.input-box label,.password-toggle-btn{color:#9ca3af}.password-toggle-btn:hover{color:#60a5fa;background-color:rgba(96,165,250,.1)}}