.login-screen { display: grid; grid-template-columns: minmax(360px,42%) minmax(0,1fr); min-height: 100vh; min-height: 100svh; background: #fff; }
.login-brand-panel { background: #1b75bb; color: #fff; display: flex; flex-direction: column; padding: 42px clamp(32px,4.5vw,76px) 26px; overflow: hidden; position: relative; }
.login-brand img { width: 168px; height: auto; display: block; filter: brightness(0) invert(1); }
.login-brand-body { margin: auto 0; padding: 54px 0; max-width: 430px; }
.login-brand-label { font-size: 11px; letter-spacing: .15em; text-transform: uppercase; color: #cae5f9; font-weight: 550; }
.login-brand-body h2 { margin-top: 18px; font-size: clamp(28px,3.3vw,46px); line-height: 1.16; letter-spacing: -.04em; font-weight: 500; color: #fff; }
.login-brand-footer { display: flex; justify-content: space-between; color: #c2def3; font-size: 11px; }
.login-brand-visual { margin-top: 42px; border: 1px solid #ffffff38; border-radius: 9px; background: #ffffff09; transform: perspective(900px) rotateY(-7deg); box-shadow: 0 24px 40px #074c7c18; }
.login-visual-head { height: 30px; display: flex; align-items: center; gap: 4px; padding: 0 13px; border-bottom: 1px solid #ffffff24; }
.login-visual-head span { width: 43px; height: 4px; background: #ffffff70; border-radius: 2px; margin-right: auto; }
.login-visual-head i { width: 5px; height: 5px; background: #ffffff40; border-radius: 50%; }
.login-visual-layout { display: grid; grid-template-columns: 56px 1fr; min-height: 158px; }
.login-visual-nav { border-right: 1px solid #ffffff20; padding: 16px 10px; display: flex; flex-direction: column; gap: 14px; }
.login-visual-nav i { width: 31px; height: 4px; background: #ffffff35; border-radius: 2px; }
.login-visual-nav i:first-child { background: #ffffffa0; }
.login-visual-main { padding: 16px; }
.login-visual-main > b { display: block; width: 42%; height: 6px; border-radius: 3px; background: #ffffff90; }
.login-visual-metrics { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-top: 15px; }
.login-visual-metrics i { height: 28px; border: 1px solid #ffffff30; border-radius: 4px; background: #ffffff08; }
.login-visual-register { margin-top: 15px; display: grid; gap: 9px; }
.login-visual-register i { display: block; height: 4px; width: 100%; border-radius: 2px; background: linear-gradient(90deg,#ffffff50 0 40%,transparent 40% 55%,#ffffff24 55% 72%,transparent 72% 84%,#ffffff40 84%); }
.login-form-panel { display: flex; flex-direction: column; justify-content: center; position: relative; padding: 60px clamp(32px,7vw,110px); }
.login-panel { width: 100%; max-width: 376px; margin: auto; padding: 32px 0; }
.login-heading { display: block; margin-bottom: 31px; }
.login-eyebrow { display: block; text-transform: uppercase; letter-spacing: .12em; color: #64748b; font-size: 10px; font-weight: 600; margin-bottom: 12px; }
.login-heading h1 { font-size: 34px; font-weight: 600; letter-spacing: -.04em; line-height: 1.2; color: #17212f; }
.login-heading p { margin-top: 11px; color: #667085; font-size: 14px; }
.login-form { display: grid; gap: 21px; }
.login-form .form-field { font-size: 13px; font-weight: 550; gap: 9px; color: #344054; }
.login-form .form-field input { min-height: 47px; border: 1px solid #d0d5dd; background: #fff; border-radius: 6px; padding: 11px 13px; font-size: 15px; font-weight: 400; box-shadow: 0 1px 2px #10182804; }
.login-form .form-field input:focus { border-color: #1b75bb; box-shadow: 0 0 0 3px #1b75bb12; outline: none; }
.login-form .form-field input::placeholder { color: #98a2b3; }
.login-password-control { position: relative; display: block; }
.login-password-control input { width: 100%; padding-right: 48px!important; }
.login-password-toggle { position: absolute; right: 6px; top: 6px; width: 35px; height: 35px; border: 0; background: transparent; display: grid; place-items: center; border-radius: 4px; color: #667085; }
.login-password-toggle:hover { background: #f2f4f7; color: #17212f; }
.login-form > .btn { min-height: 47px; justify-content: center; gap: 12px; margin-top: 4px; font-size: 14px; font-weight: 550; border-radius: 6px; box-shadow: 0 1px 2px #1018280b; }
.login-security { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 23px; font-size: 11px; color: #98a2b3; }
.login-footer { display: flex; justify-content: space-between; align-items: center; gap: 15px; font-size: 11px; color: #98a2b3; padding-top: 20px; }
.login-footer a { color: #667085; display: inline-flex; gap: 5px; align-items: center; }
.login-mobile-brand { display: none; }
@media(max-width:950px) { .login-screen { grid-template-columns: 38% minmax(0,1fr); } .login-brand-panel { padding: 35px 30px 25px; } .login-brand-body h2 { font-size: 33px; } .login-visual-layout { grid-template-columns: 40px 1fr; } .login-visual-nav { padding-inline: 7px; } .login-visual-nav i { width: 25px; } .login-form-panel { padding-inline: 50px; } }
@media(max-width:700px) { .login-screen { display: flex; min-height: 100svh; } .login-brand-panel { display: none; } .login-form-panel { flex: 1; padding: 30px 25px 20px; } .login-panel { max-width: 390px; } .login-mobile-brand { display: block; margin-bottom: 45px; } .login-mobile-brand img { display: block; width: 148px; } .login-heading h1 { font-size: 31px; } .login-form .form-field input { font-size: 16px; min-height: 49px; } .login-form > .btn { min-height: 49px; } .login-footer { width: 100%; max-width: 390px; margin: 0 auto; } }