:root {
  --color-brand: #2563eb;
  --color-navy: #172b52;
  --color-text: #172033;
  --color-text-muted: #667085;
  --color-danger: #b42318;
  --radius-sm: 6px;
  --radius-lg: 14px;
}
body { background: linear-gradient(145deg, #edf3ff 0%, #f7f9fc 52%, #e9eff8 100%); color: var(--color-text); }
.x-layer { visibility: hidden; }
.x-hide-display { display: none !important; }
.x-hide-visibility { visibility: hidden !important; }
.login-wrapper.login-page { display: flex; flex-direction: column; min-height: 100vh; align-items: center; justify-content: center; padding: 24px; }
.login-page .login-container { display: flex; width: min(920px, 100%); overflow: hidden; border: 1px solid rgba(207, 218, 235, .9); border-radius: var(--radius-lg); background: #fff; box-shadow: 0 24px 60px rgba(34, 55, 92, .16); }
.login-page .left-panel {
    width: 42%;
    padding: 58px 44px;
    background: #376DB3;
    color: #fff;

    display: flex;
    flex-direction: column;
    justify-content: center; /* vertical center */
    align-items: center;     /* horizontal center */
    text-align: center;
}
.login-page .left-panel h1 { margin: 0; font-size: 48px; letter-spacing: .12em; line-height: 1;   }
.login-page .left-panel h2 { margin: 22px 0 10px; font-size: 22px; font-weight: 500; }
.login-page .left-panel p { max-width: 250px; margin: 0; color: rgba(255,255,255,.82); line-height: 1.55; }
.login-page .right-panel { width: 58%; padding: 54px; }
.login-page .right-panel h2 { margin: 0; color: var(--color-navy); font-size: 26px; }
.login-page .right-panel > p { margin: 8px 0 28px; color: var(--color-text-muted); }
.login-page .form-group { margin-bottom: 18px; }
.login-page .form-group label { display: block; margin-bottom: 7px; color: #344054; font-size: 13px; font-weight: 600; }
.login-page .status { min-height: 20px; margin-bottom: 15px; color: var(--color-danger); }
.login-page .btn-login { width: 100%; margin-top: 10px; min-height: 40px; border-radius: var(--radius-sm); font-weight: 600; }
@media (max-width: 680px) { .login-page .login-container { flex-direction: column; } .login-page .left-panel, .login-page .right-panel { width: 100%; padding: 34px 28px; } .login-page .left-panel h1 { font-size: 38px; } }