.LoginBGArea { background: linear-gradient(310deg, #bd0000 0%, #8f0000 38%, #570000 72%, #000 100%); min-height: 100dvh; overflow: hidden; }
.login-panel { position: relative; z-index: 2; background: #f7f4f4; }
.LoginFormMudPaper { width: min(100%, 440px); padding: 28px !important; background: #fff; border: 1px solid #e5dada !important; border-radius: 8px !important; box-shadow: 0 18px 48px rgba(55,15,15,.11) !important; --mud-palette-lines-inputs: #d5c7c7 !important; }
.login-title { color: #2b2020; font-weight: 800 !important; }
.login-subtitle { color: #6f6060; }
.login-visual { position: relative; overflow: hidden; background: #570000; }
.login-visual::after { content: 'Run your business with clarity.'; position: absolute; left: 48px; bottom: 44px; max-width: 520px; color: #fff; font-size: clamp(2rem, 4vw, 4rem); line-height: 1.05; font-weight: 800; text-shadow: 0 2px 18px rgba(0,0,0,.32); }
.LoginPageSideImage { width: 100%; height: 100%; object-fit: cover; opacity: .76; animation: image-reveal .55s ease-out both; }
@keyframes image-reveal { from { transform: scale(1.025); opacity: 0; } to { transform: scale(1); opacity: .76; } }
.scale-in-center { animation: scale-in-center .35s ease-out both; }
@keyframes scale-in-center { from { transform: scale(.97); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@media (max-width: 959px) { .login-panel { min-height: 100dvh; padding: 20px !important; } .LoginFormMudPaper { padding: 20px !important; } }