.login-page { min-height: 100vh; display: grid; place-items: center; overflow: hidden; padding: 32px; background: #edf2f8; }
.login-decoration { position: fixed; border: 1px solid rgba(37,99,235,.08); border-radius: 50%; pointer-events: none; }
.login-decoration-one { width: 520px; height: 520px; top: -320px; right: -130px; background: rgba(255,255,255,.34); }
.login-decoration-two { width: 360px; height: 360px; bottom: -260px; left: -80px; background: rgba(37,99,235,.025); }
.login-shell { position: relative; z-index: 1; width: min(100%, 1020px); min-height: 590px; display: grid; grid-template-columns: 1.05fr .95fr; overflow: hidden; border: 1px solid #dce4ef; border-radius: 18px; background: #fff; box-shadow: 0 28px 70px rgba(24,34,53,.13); }
.login-intro { display: flex; flex-direction: column; justify-content: center; background: #182235; color: #fff; padding: 62px; }
.login-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 76px; font-size: 17px; font-weight: 750; }
.login-brand-mark, .login-logo-image { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 9px; background: var(--color-primary); color: #fff; object-fit: contain; font-size: 12px; font-weight: 800; }
.login-intro h1 { margin: 0; font-size: clamp(30px, 3vw, 40px); line-height: 1.28; letter-spacing: -.03em; }
.login-intro > p { max-width: 410px; margin: 22px 0 32px; color: #b8c4d6; font-size: 15px; line-height: 1.75; }
.login-proof { display: flex; align-items: center; gap: 8px; color: #dbe5f3; font-size: 13px; }
.login-proof span { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: rgba(37,99,235,.3); color: #93c5fd; }
.login-card { display: flex; flex-direction: column; justify-content: center; padding: 58px; }
.mobile-login-brand { display: none; }
.login-card-head { margin-bottom: 28px; }
.login-card h2 { margin: 0; color: var(--color-text-primary); font-size: 26px; }
.login-card-head p { margin: 6px 0 0; color: var(--color-text-secondary); }
.login-card form { display: grid; gap: 8px; }
.login-card label { margin-top: 7px; color: #344054; font-weight: 650; }
.login-card input { width: 100%; min-height: 44px; }
.login-submit { width: 100%; min-height: 44px; margin-top: 14px; }
.login-help { margin: 24px 0 0; color: #98a2b3; font-size: 12px; text-align: center; }
.form-alert { border-radius: var(--radius-sm); margin-bottom: 16px; padding: 10px 12px; }
.form-alert.error { border: 1px solid #fecdca; background: #fef3f2; color: #b42318; }
.form-alert.success { border: 1px solid #abefc6; background: #ecfdf3; color: #067647; }
@media (max-width: 820px) { .login-page { padding: 20px; } .login-shell { width: min(100%, 470px); min-height: auto; grid-template-columns: 1fr; } .login-intro { display: none; } .login-card { padding: 42px; } .mobile-login-brand { display: flex; align-items: center; gap: 11px; margin-bottom: 34px; } }
@media (max-width: 480px) { .login-page { padding: 12px; } .login-shell { border-radius: 14px; } .login-card { padding: 30px 24px; } }
.login-page{display:flex;flex-direction:column;justify-content:center;align-items:center}.login-footer{position:relative;z-index:1;text-align:center;padding:14px 18px 0;color:#667085;font-size:12px;line-height:1.5;overflow-wrap:anywhere}.login-company{font-weight:600;overflow-wrap:anywhere}