.login-bg-modern { min-height: 100vh; margin: 0; background: #f6f8fc; }
.login-layout { display: grid; grid-template-columns: minmax(440px,.95fr) minmax(520px,1.05fr); min-height: 100vh; }
.login-showcase { position: relative; flex-direction: column; overflow: hidden; padding: 38px clamp(42px,5vw,78px); color: #fff; background: radial-gradient(circle at 100% 10%,rgba(83,122,239,.45),transparent 32%),linear-gradient(145deg,#17284c,#0e1629 70%); }
.login-showcase::after { content: ""; position: absolute; right: -180px; bottom: -180px; width: 430px; height: 430px; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; box-shadow: 0 0 0 80px rgba(255,255,255,.025),0 0 0 160px rgba(255,255,255,.018); }
.login-brand { position: relative; z-index: 1; padding-left: 0; }
.login-copy { position: relative; z-index: 1; max-width: 550px; margin-block: auto; }
.login-copy .eyebrow { color: #8eacf9; }
.login-copy h1 { margin: 16px 0 18px; font-size: clamp(2.5rem,4.2vw,4.6rem); line-height: 1.03; font-weight: 800; letter-spacing: -.055em; }
.login-copy > p { max-width: 510px; color: #aebbd0; font-size: 1rem; line-height: 1.75; }
.login-features { display: grid; gap: 13px; margin-top: 30px; color: #dce5f7; font-size: .86rem; }
.login-features i { margin-right: 9px; color: #69dda7; }
.login-copyright { position: relative; z-index: 1; color: #72829c; }
.login-side { display: grid; place-items: center; padding: 34px; }
.login-card-modern { width: min(92vw,450px); padding: 40px; border: 1px solid var(--line); border-radius: 24px; background: #fff; box-shadow: 0 24px 70px rgba(26,43,76,.11); }
.login-card-modern h2 { margin: 8px 0 5px; font-size: 1.75rem; font-weight: 790; letter-spacing: -.035em; }
.login-subtitle { margin-bottom: 28px; color: var(--muted); font-size: .87rem; }
.input-wrap { position: relative; }
.input-wrap .form-control { padding-right: 48px; }
.password-toggle { position: absolute; z-index: 3; top: 50%; right: 8px; width: 36px; height: 36px; transform: translateY(-50%); border: 0; border-radius: 9px; color: #7d899b; background: transparent; }
.password-toggle:hover { color: var(--primary); background: var(--primary-soft); }
.btn-login { display: flex; min-height: 50px; align-items: center; justify-content: center; gap: 9px; }
.login-divider { display: flex; align-items: center; gap: 12px; margin: 24px 0 16px; color: #97a1b0; font-size: .7rem; }
.login-divider::before,.login-divider::after { content: ""; height: 1px; flex: 1; background: var(--line); }
.btn-whatsapp-login { display: flex; min-height: 48px; align-items: center; justify-content: center; gap: 9px; border: 1px solid #bfe9d5; color: #087a47; background: #eaf9f2; }
.btn-whatsapp-login:hover { border-color: #16a66a; color: #fff; background: #16a66a; }
.login-safe { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 20px; color: #8a96a8; font-size: .7rem; }
.login-safe i { color: var(--success); font-size: 1rem; }
.mobile-login-brand { display: flex; align-items: center; gap: 11px; margin-bottom: 28px; }
.mobile-login-brand b,.mobile-login-brand small { display: block; }
.mobile-login-brand small { color: #7d8ba1; font-size: .6rem; font-weight: 800; letter-spacing: .16em; }
@media(max-width:991.98px){.login-layout{display:block}.login-side{min-height:100vh}}
@media(max-width:575.98px){.login-side{padding:18px}.login-card-modern{padding:29px 22px;border-radius:20px}.login-card-modern h2{font-size:1.5rem}}