.login-page{min-height:100vh;display:flex;font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif}.login-page .login-hero-section{display:none;flex:1;background:linear-gradient(135deg,#059669,#047857 50%,#065f46);position:relative;overflow:hidden}.login-page .hero-background{position:absolute;inset:0}.login-page .hero-pattern-1{position:absolute;inset:0;background:radial-gradient(circle at 20% 80%,rgba(255,255,255,.1) 0,transparent 50%)}.login-page .hero-pattern-2{position:absolute;inset:0;background:radial-gradient(circle at 80% 20%,rgba(255,255,255,.1) 0,transparent 50%)}.login-page .hero-pattern-3{position:absolute;inset:0;background:linear-gradient(45deg,transparent 25%,rgba(255,255,255,.05) 0,rgba(255,255,255,.05) 50%,transparent 0,transparent 75%,rgba(255,255,255,.05) 0);background-size:60px 60px;animation:pulse 3s ease-in-out infinite}.login-page .hero-content{position:relative;display:flex;align-items:center;justify-content:center;width:100%;padding:48px;z-index:1}.login-page .hero-text-container{text-align:center;color:white;max-width:600px;animation:slideInLeft 1s ease-out}.login-page .hero-icon-container{position:relative;margin:0 auto 48px;animation:scaleRotate .8s ease-out .2s both}.login-page .hero-icon-background{width:128px;height:128px;background:rgba(255,255,255,.2);backdrop-filter:blur(10px);border-radius:24px;display:flex;align-items:center;justify-content:center;box-shadow:0 20px 40px rgba(0,0,0,.2);border:1px solid rgba(255,255,255,.3)}.login-page .hero-icon{width:64px;height:64px;color:white}.login-page .hero-icon-badge{position:absolute;top:-12px;right:-12px;width:32px;height:32px;background:#10b981;border-radius:50%;display:flex;align-items:center;justify-content:center;color:white;font-weight:700;font-size:14px;box-shadow:0 8px 16px rgba(245,158,11,.3)}.login-page .hero-title{font-size:48px;font-weight:900;margin-bottom:32px;line-height:1.1;animation:slideInUp .8s ease-out .4s both}.login-page .hero-title-accent{display:block;color:#fbbf24;margin-top:8px;font-size:40px}.login-page .hero-description{font-size:20px;color:rgba(255,255,255,.9);margin-bottom:48px;line-height:1.6;font-weight:500;animation:slideInUp .8s ease-out .6s both}.login-page .hero-features{display:grid;grid-template-columns:1fr;gap:24px;max-width:500px;margin:0 auto;animation:fadeIn .8s ease-out .8s both}.login-page .hero-feature{display:flex;align-items:center;color:rgba(255,255,255,.9);font-size:18px;background:rgba(255,255,255,.1);backdrop-filter:blur(5px);border-radius:16px;padding:16px;border:1px solid rgba(255,255,255,.2);transition:all .3s ease;animation:slideInLeft .5s ease-out}.login-page .hero-feature:first-child{animation-delay:.9s}.login-page .hero-feature:nth-child(2){animation-delay:1s}.login-page .hero-feature:nth-child(3){animation-delay:1.1s}.login-page .hero-feature:nth-child(4){animation-delay:1.2s}.login-page .hero-feature-icon{font-size:24px;margin-right:16px;flex-shrink:0}.login-page .hero-feature-text{font-weight:500}.login-page .login-form-section{flex:1;display:flex;align-items:center;justify-content:center;padding:64px 32px;background:#f9fafb}.login-page .login-container{width:100%;max-width:600px;display:flex;flex-direction:column;gap:48px}.login-page .login-header{text-align:center;animation:slideInRight .8s ease-out}.login-page .login-logo{display:inline-flex;align-items:center;gap:16px;margin-bottom:40px;text-decoration:none;transition:transform .3s ease}.login-page .login-logo:hover{transform:translateY(-2px)}.login-page .logo-container{position:relative}.login-page .logo-icon{width:64px;height:64px;background:linear-gradient(135deg,#059669,#047857);border-radius:24px;display:flex;align-items:center;justify-content:center;color:white;box-shadow:0 8px 32px rgba(5,150,105,.3);transition:all .3s ease}.login-page .login-logo:hover .logo-icon{box-shadow:0 12px 40px rgba(5,150,105,.4);transform:scale(1.05)}.login-page .logo-badge{position:absolute;top:-8px;right:-8px;width:24px;height:24px;background:#10b981;border-radius:50%;display:flex;align-items:center;justify-content:center;color:white;font-weight:700;font-size:12px;box-shadow:0 4px 12px rgba(245,158,11,.3)}.login-page .logo-text-container{text-align:left}.login-page .logo-title{font-size:32px;font-weight:800;color:#1a1a1a;margin-bottom:4px}.login-page .logo-subtitle{font-size:16px;color:#059669;font-weight:600}.login-page .login-title{font-size:48px;font-weight:900;color:#1a1a1a;margin-bottom:16px;line-height:1.1}.login-page .login-description{font-size:20px;color:#6b7280;font-weight:500}.login-page .login-form-container{background:white;border-radius:24px;box-shadow:0 20px 40px rgba(0,0,0,.1);border:1px solid #e5e7eb;padding:48px;animation:slideInUp .8s ease-out .2s both}.login-page .login-form{display:flex;flex-direction:column;gap:32px}.login-page .form-field{animation:slideInLeft .6s ease-out}.login-page .form-field:first-child{animation-delay:.3s}.login-page .form-field:nth-child(2){animation-delay:.4s}.login-page .form-label{display:block;font-size:16px;font-weight:600;color:#1a1a1a;margin-bottom:12px}.login-page .form-input-container{position:relative;display:flex;align-items:center}.login-page .form-input-icon{position:absolute;left:24px;color:#9ca3af;transition:color .3s ease;z-index:2}.login-page .form-input-container:focus-within .form-input-icon{color:#059669}.login-page .form-input{width:100%;padding:24px 24px 24px 64px;font-size:18px;background:#f9fafb;border:2px solid #e5e7eb;border-radius:16px;transition:all .3s ease;font-weight:500}.login-page .form-input:focus{outline:none;border-color:#059669;box-shadow:0 0 0 4px rgba(5,150,105,.1);background:white}.login-page .form-input::placeholder{color:#9ca3af}.login-page .password-input{padding-right:64px}.login-page .password-toggle{position:absolute;right:24px;background:none;border:none;color:#9ca3af;cursor:pointer;transition:all .3s ease;padding:8px;border-radius:8px}.login-page .password-toggle:hover{color:#059669;transform:scale(1.1)}.login-page .form-error{margin-top:8px;font-size:14px;color:#ef4444;font-weight:500;animation:slideInUp .3s ease-out}.login-page .submit-button{width:100%;background:linear-gradient(135deg,#059669,#047857);color:white;padding:24px 40px;border:none;border-radius:16px;font-weight:700;font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:12px;box-shadow:0 8px 24px rgba(5,150,105,.3);transition:all .3s ease;animation:slideInUp .6s ease-out .5s both}.login-page .submit-button:hover:not(:disabled){background:linear-gradient(135deg,#047857,#065f46);box-shadow:0 12px 32px rgba(5,150,105,.4);transform:translateY(-2px) scale(1.02)}.login-page .submit-button:active:not(:disabled){transform:translateY(0) scale(.98)}.login-page .submit-button:disabled{opacity:.6;cursor:not-allowed;transform:none}.login-page .loading-spinner{width:24px;height:24px;border:2px solid transparent;border-top-color:white;border-radius:50%;animation:spin 1s linear infinite}.login-page .login-links{text-align:center;padding-top:32px;border-top:1px solid #e5e7eb;animation:fadeIn .6s ease-out .6s both}.login-page .login-links-text{font-size:18px;color:#6b7280}.login-page .login-link{color:#059669;font-weight:700;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px;transition:all .3s ease}.login-page .login-link:hover{color:#047857;text-decoration-color:#047857}.login-page .demo-accounts-section{background:linear-gradient(135deg,#f0fdf4,#ecfeff);border-radius:24px;box-shadow:0 12px 24px rgba(0,0,0,.1);border:2px solid rgba(5,150,105,.1);padding:40px;animation:slideInUp .8s ease-out .4s both}.login-page .demo-accounts-header{text-align:center;margin-bottom:32px}.login-page .demo-accounts-title{font-size:24px;font-weight:800;color:#1a1a1a;margin-bottom:8px}.login-page .demo-accounts-description{color:#6b7280;font-weight:500}.login-page .demo-accounts-list{display:flex;flex-direction:column;gap:16px}.login-page .demo-account-card{background:white;border-radius:16px;box-shadow:0 4px 12px rgba(0,0,0,.05);border:1px solid #e5e7eb;padding:24px;cursor:pointer;transition:all .3s ease;animation:slideInLeft .5s ease-out}.login-page .demo-account-card:first-child{animation-delay:.5s}.login-page .demo-account-card:nth-child(2){animation-delay:.6s}.login-page .demo-account-card:nth-child(3){animation-delay:.7s}.login-page .demo-account-card:hover{box-shadow:0 8px 24px rgba(0,0,0,.1);transform:translateY(-2px) scale(1.01)}.login-page .demo-account-content{display:flex;align-items:center;justify-content:space-between}.login-page .demo-account-left{display:flex;align-items:center;gap:16px}.login-page .demo-account-icon{width:48px;height:48px;border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:20px;color:white;box-shadow:0 4px 12px rgba(0,0,0,.2);transition:all .3s ease}.login-page .demo-account-card:hover .demo-account-icon{box-shadow:0 8px 20px rgba(0,0,0,.3);transform:scale(1.1)}.login-page .demo-account-icon.purple{background:linear-gradient(135deg,#8b5cf6,#7c3aed)}.login-page .demo-account-icon.blue{background:linear-gradient(135deg,#10b981,#059669)}.login-page .demo-account-icon.emerald{background:linear-gradient(135deg,#059669,#047857)}.login-page .demo-account-info{display:flex;flex-direction:column}.login-page .demo-account-role{font-weight:700;color:#1a1a1a;font-size:18px;margin-bottom:4px}.login-page .demo-account-email{color:#6b7280;font-size:14px;font-weight:500}.login-page .demo-account-right{text-align:right}.login-page .demo-account-password-label{font-size:12px;color:#9ca3af;font-weight:500;margin-bottom:4px}.login-page .demo-account-password{font-family:Monaco,Consolas,monospace;font-size:14px;font-weight:700;color:#6b7280}.login-page .demo-account-badge{margin-top:12px;text-align:center}.login-page .demo-account-badge-text{font-size:12px;color:#059669;font-weight:600;background:rgba(5,150,105,.1);padding:4px 12px;border-radius:12px;display:inline-block}@keyframes slideInLeft{0%{opacity:0;transform:translateX(-30px)}to{opacity:1;transform:translateX(0)}}@keyframes slideInRight{0%{opacity:0;transform:translateX(30px)}to{opacity:1;transform:translateX(0)}}@keyframes slideInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes scaleRotate{0%{opacity:0;transform:scale(0) rotate(-180deg)}to{opacity:1;transform:scale(1) rotate(0deg)}}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes pulse{0%,to{opacity:.5}50%{opacity:.8}}@media (min-width:1024px){.login-page .login-hero-section{display:flex}.login-page .login-form-section{padding:64px}}@media (max-width:768px){.login-page .login-form-section{padding:32px 16px}.login-page .login-container{gap:32px}.login-page .login-title{font-size:36px}.login-page .login-description{font-size:18px}.login-page .login-form-container{padding:32px}.login-page .form-input{padding:20px 20px 20px 56px;font-size:16px}.login-page .submit-button{padding:20px 32px;font-size:18px}.login-page .logo-icon{width:56px;height:56px}.login-page .logo-title{font-size:28px}.login-page .demo-accounts-section{padding:24px}}@media (max-width:480px){.login-page .login-form-container{padding:24px}.login-page .login-title{font-size:32px}.login-page .form-input{padding:18px 18px 18px 52px;font-size:15px}.login-page .submit-button{padding:18px 24px;font-size:16px}.login-page .demo-account-content{flex-direction:column;gap:16px;text-align:center}.login-page .demo-account-right{text-align:center}}