.login-screen {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background: radial-gradient(circle at 15% 15%, #ffffff 0, transparent 30%), linear-gradient(135deg, #e5e9ed, #cbd2d8);
}

.login-layout{width:min(1120px,100%);display:grid;grid-template-columns:1fr 1fr;align-items:stretch;gap:0;direction:ltr;filter:drop-shadow(0 28px 70px rgba(0,0,0,.22))}
.login-visual{position:relative;min-height:650px;overflow:hidden;border-radius:26px 0 0 26px;background:#626a72;color:#fff;direction:ltr}
.login-visual img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(.92);opacity:.9}
.login-visual:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(38,45,52,.08),rgba(38,45,52,.76))}
.login-visual-copy{position:absolute;left:34px;right:34px;bottom:32px;z-index:1;text-align:left}
.login-visual-copy span{font-size:11px;letter-spacing:.14em;color:#b8d9f2;font-weight:700}
.login-visual-copy h2{font:700 31px/1.15 "Segoe UI",Tahoma,sans-serif;margin:10px 0 12px;letter-spacing:-.03em}
.login-visual-copy p{font:14px/1.8 Tahoma,"Segoe UI",sans-serif;color:#e5f1fb;margin:0;max-width:390px}

.login-card {
  width: 100%;
  background: #fff;
  border-radius: 20px;
  padding: 34px;
  box-shadow: none;
  border-radius: 0 26px 26px 0;
  min-height: 650px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.login-brand { color: var(--navy); border-color: var(--line); padding: 0 0 22px; margin-bottom: 24px; }
.login-brand .brand-mark { border-color: var(--navy); }
.login-card h1 { font-size: 25px; margin: 8px 0; }
.login-card .login-title-en { font-family: "Segoe UI", Tahoma, sans-serif; font-size: 25px; line-height: 1.25; letter-spacing: -.02em; text-align: center; }
.login-card .login-tagline { direction: ltr; text-align: center; }
.login-copy { color: var(--muted); line-height: 1.8; margin: 0 0 24px; }
.login-card input { width: 100%; border: 1px solid #cbd8e4; border-radius: 10px; padding: 13px; font: inherit; margin-bottom: 17px; }
.login-card input:focus { outline: 2px solid #cbe9fa; border-color: var(--blue); }
.login-submit { width: 100%; margin-top: 4px; }
.login-error { min-height: 20px; color: var(--red); font-size: 12px; margin: 0 0 6px; }
.demo-credentials { margin-top: 22px; padding: 14px; background: #f4f8fb; border-radius: 10px; display: grid; gap: 7px; font-size: 12px; color: #506174; }
.demo-credentials strong { color: var(--navy); }
.demo-credentials code { direction: ltr; display: inline-block; background: #e7eef5; padding: 2px 5px; border-radius: 4px; }
.security-disclaimer { font-size: 10px; color: #7d8998; line-height: 1.7; margin: 14px 0 0; }
.logout-button { white-space: nowrap; }
.login-logo-wrap { display: grid; place-items: center; margin: -10px 0 22px; }
.login-logo-wrap { display: grid; place-items: center; margin: -10px 0 22px; }
@media(max-width:640px){.login-layout{display:block;width:min(520px,100%)}.login-visual{min-height:250px;border-radius:24px 24px 0 0}.login-visual img{object-position:center 48%}.login-visual-copy{left:24px;right:24px;bottom:22px}.login-visual-copy h2{font-size:24px;margin:6px 0}.login-visual-copy p{font-size:12px}.login-card{min-height:auto;border-radius:0 0 24px 24px;padding:28px 26px}}