@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap");*{box-sizing:border-box}body{margin:0;font-family:Poppins,sans-serif}.auth-container{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:20px}.auth-card{width:100%;max-width:450px;background-color:#0f2c3f;border-radius:16px;box-shadow:0 10px 25px rgba(0,0,0,.3);overflow:hidden;animation:fadeIn .5s ease-out;border:1px solid white}.auth-card:hover{box-shadow:0 10px 20px white;transform:translateY(-5px)}.auth-header{background:linear-gradient(145deg,#78350f,#0c2233);color:white;padding:30px;position:relative;overflow:hidden}.auth-header:after{width:200px;height:200px;right:-100px;top:-100px}.auth-header:after,.auth-header:before{content:"";position:absolute;background:rgba(255,255,255,.05);border-radius:50%}.auth-header:before{width:150px;height:150px;left:-75px;bottom:-75px}.auth-header h2{font-size:28px;font-weight:600;margin:0 0 10px;position:relative;z-index:1}.auth-header p{margin:0;font-size:16px;opacity:.85;position:relative;z-index:1}.auth-form{padding:30px}.form-group{margin-bottom:20px}.form-group label{display:block;margin-bottom:8px;font-size:14px;font-weight:500;color:#e5e7eb}.input-container{position:relative}.input-container,.input-icon{display:flex;align-items:center}.input-icon{position:absolute;left:15px;color:#9ca3af;font-size:18px;justify-content:center}.input-container input{width:100%;padding:12px 12px 12px 45px;font-size:15px;border:1px solid #cec496;border-radius:10px;background-color:#112742;transition:all .3s;color:#e5e7eb}.input-container input:focus{outline:none;box-shadow:0 0 0 3px rgba(217,119,6,.2);background-color:#112742}.input-container :hover{border-color:#d97706}.input-container input::placeholder{color:#9aa3b8}.password-toggle{position:absolute;right:15px;background:none;border:none;color:#9ca3af;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;font-size:18px}.password-toggle:hover{color:#d97706}.auth-links{display:flex;justify-content:flex-end;margin-bottom:20px}.forgot-password{color:#d97706;font-size:14px;text-decoration:none;transition:all .3s}.forgot-password:hover{color:#f59e0b;text-decoration:underline}.auth-button{display:flex;align-items:center;justify-content:center;width:100%;background:linear-gradient(145deg,#92400e,#78350f);border:none;border-radius:10px;color:white;font-weight:500;padding:14px;font-size:16px;cursor:pointer;transition:all .3s;position:relative;overflow:hidden}.auth-button:after{content:"";position:absolute;width:100%;height:100%;top:0;left:-100%;background:linear-gradient(90deg,rgba(255,255,255,0) 0,rgba(255,255,255,.1) 50%,rgba(255,255,255,0));transition:all .6s}.auth-button:hover{transform:translateY(-2px);box-shadow:0 5px 15px rgba(120,53,15,.5)}.auth-button:hover:after{left:100%}.auth-button:active{transform:translateY(1px)}.auth-button:focus{outline:none}.auth-button.submitting{background:linear-gradient(145deg,#7c3608,#662e0a);cursor:not-allowed}.spinner{width:20px;height:20px;margin-right:10px;animation:spin 1s linear infinite}.spinner-track{fill:none;stroke:rgba(255,255,255,.3);stroke-width:3}.spinner-path{fill:none;stroke:white;stroke-width:3;stroke-dasharray:62.83;stroke-dashoffset:62.83;animation:dash 1.5s ease-in-out infinite}.auth-switch{margin-top:25px;text-align:center}.auth-switch p{font-size:14px;color:#9aa3b8;margin:0}.auth-switch a{color:#d97706;font-weight:500;text-decoration:none;transition:all .3s}.auth-switch a:hover{color:#f59e0b;text-decoration:underline}.error-message-bottom{color:red}.forgot-password-container{display:flex;justify-content:flex-end;margin-top:6px}.forgot-password-link{background:none;border:none;color:#d97706;font-size:.9rem;padding:0;text-decoration:none;cursor:pointer;transition:color .2s ease}.forgot-password-link:hover{color:#89b4ee;text-decoration:underline}.auth-card{transition:all .3s ease}.auth-card:hover{box-shadow:0 15px 30px rgba(0,0,0,.1);transform:translateY(-2px)}.auth-button{transition:all .3s ease}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes dash{0%{stroke-dashoffset:62.83}50%{stroke-dashoffset:0}to{stroke-dashoffset:-62.83}}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@media (max-width:480px){.auth-card{max-width:100%}.auth-header{padding:25px}.auth-form{padding:20px}.auth-header h2{font-size:24px}}