.login-screen { display: grid; min-height: 100vh; grid-template-columns: minmax(0, 1.05fr) minmax(420px, .95fr); background: var(--color-white); }
.login-screen__visual { position: relative; display: flex; overflow: hidden; min-height: 100vh; flex-direction: column; justify-content: space-between; padding: 54px 7vw 42px; background: var(--color-navy-950); color: var(--color-white); }
.login-screen__visual::before { position: absolute; right: -100px; bottom: -170px; width: 520px; height: 520px; border: 1px solid rgba(16,165,156,.28); border-radius: 50%; box-shadow: 0 0 0 56px rgba(16,165,156,.05), 0 0 0 112px rgba(16,165,156,.035); content: ""; }
.login-screen__visual::after { position: absolute; top: 22%; right: 13%; width: 170px; height: 170px; border: 1px solid rgba(244,185,66,.26); transform: rotate(45deg); content: ""; }
.login-screen__visual-content { position: relative; z-index: 1; max-width: 590px; }
.login-brand { display: flex; align-items: center; gap: 13px; }
.login-brand__mark { width: 48px; height: 48px; border-radius: var(--radius-md); background: var(--color-white); object-fit: contain; }
.login-brand__name { color: var(--color-white); font-size: 16px; font-weight: 750; letter-spacing: .03em; }
.login-brand__meta { margin-top: 1px; color: rgba(255,255,255,.54); font-size: 10px; }
.login-screen__eyebrow { margin-top: 100px; color: var(--color-yellow-500); font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.login-screen__title { max-width: 580px; margin-top: 16px; color: var(--color-white); font-size: clamp(34px, 4vw, 58px); line-height: 1.08; letter-spacing: -.05em; }
.login-screen__title span { color: var(--color-teal-600); }
.login-screen__description { max-width: 520px; margin-top: 22px; color: rgba(255,255,255,.67); font-size: 15px; line-height: 1.7; }
.login-flow { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 36px; }
.login-flow__item { display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; border: 1px solid rgba(255,255,255,.13); border-radius: var(--radius-pill); background: rgba(255,255,255,.045); color: rgba(255,255,255,.72); font-size: 10px; }
.login-flow__item::before { width: 5px; height: 5px; border-radius: 50%; background: var(--color-teal-600); content: ""; }
.login-screen__visual-footer { position: relative; z-index: 1; color: rgba(255,255,255,.43); font-size: 10px; }
.login-screen__panel { display: flex; min-height: 100vh; align-items: center; justify-content: center; padding: 40px 7vw; background: var(--color-gray-50); }
.login-card { width: min(420px, 100%); padding: 36px; border: 1px solid var(--color-border); border-radius: var(--radius-xl); background: var(--color-white); box-shadow: var(--shadow-md); }
.login-card__header { margin-bottom: 28px; }
.login-card__title { color: var(--color-navy-950); font-size: 26px; letter-spacing: -.04em; }
.login-card__subtitle { margin-top: 7px; color: var(--color-gray-500); font-size: 12px; }
.login-card__concept { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 16px; padding: 6px 9px; border-radius: var(--radius-pill); background: var(--color-yellow-100); color: var(--color-orange-600); font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.login-card__concept svg { width: 13px; height: 13px; }
.login-form { display: flex; flex-direction: column; gap: 17px; }
.login-form__password { position: relative; }
.login-form__password input { width: 100%; padding-right: 40px; }
.login-form__toggle { position: absolute; top: 4px; right: 4px; display: grid; width: 32px; height: 32px; place-items: center; color: var(--color-gray-500); }
.login-form__toggle:hover { color: var(--color-teal-700); }
.login-form__options { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.checkbox { display: inline-flex; align-items: center; gap: 7px; color: var(--color-gray-600); font-size: 11px; font-weight: 500; }
.checkbox input { width: 15px; min-height: 15px; accent-color: var(--color-teal-700); }
.login-form__submit { width: 100%; min-height: 44px; margin-top: 3px; }
.login-card__note { display: flex; gap: 8px; margin-top: 21px; padding-top: 18px; border-top: 1px solid var(--color-border); color: var(--color-gray-500); font-size: 10px; line-height: 1.55; }
.login-card__note svg { width: 15px; height: 15px; flex: 0 0 15px; color: var(--color-teal-700); }
.login-demo-role { margin-top: 17px; }
.login-demo-role select { width: 100%; margin-top: 6px; font-size: 12px; }

@media (max-width: 820px) {
  .login-screen { display: block; }
  .login-screen__visual { display: none; }
  .login-screen__panel { min-height: 100vh; padding: 24px; }
}