.login-page {
    --login-bg: #f7f8ff;
    --login-surface: #fff;
    --login-panel: rgba(255,255,255,.95);
    --login-text: #0a1431;
    --login-muted: #66718c;
    --login-line: #dfe4ef;
    --login-purple: #7225ee;
    --login-input: #fff;
    --login-shadow: 0 22px 60px rgba(29,39,92,.16);
    min-height: 100vh;
    color: var(--login-text);
    font-family: "Plus Jakarta Sans", Inter, sans-serif;
    background: var(--login-bg);
}

[data-theme="dark"] .login-page {
    --login-bg: #071329;
    --login-surface: #0e1e3b;
    --login-panel: rgba(13,27,54,.95);
    --login-text: #f7f9ff;
    --login-muted: #a8b4ca;
    --login-line: #263957;
    --login-input: #122443;
    --login-shadow: 0 24px 70px rgba(0,0,0,.42);
}

body:has(.login-page) .site-header,
body:has(.login-page) .site-footer,
body:has(.login-page) .chat-widget-container { display: none !important; }
body:has(.login-page) main { padding: 0; }
.login-page *, .login-page *::before, .login-page *::after { box-sizing: border-box; }
.login-page a { text-decoration: none; }
.login-container { display: grid; grid-template-columns: minmax(520px,1.55fr) minmax(520px,1fr); min-height: 100vh; overflow: hidden; }

.login-brand {
    position: relative;
    display: flex;
    min-height: 100vh;
    padding: 44px 52px;
    flex-direction: column;
    color: #fff;
    background:
        linear-gradient(90deg,rgba(8,28,91,.9),rgba(21,35,98,.42) 54%,rgba(17,20,66,.12)),
        linear-gradient(0deg,rgba(2,7,27,.7),transparent 56%),
        url('../images/slider/slider3.jpg') center/cover no-repeat;
}
.login-brand::after { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 75% 18%,rgba(141,75,255,.3),transparent 30%); content: ""; }
.brand-content, .brand-footer { position: relative; z-index: 1; }
.brand-content { display: flex; flex: 1; flex-direction: column; }
.login-brand-row { display: flex; align-items: center; gap: 22px; }
.brand-logo { display: flex; align-items: center; color: #fff; }
.brand-logo img { display: block; width: clamp(165px, 15vw, 205px); height: auto; object-fit: contain; filter: drop-shadow(0 10px 20px rgba(0,0,0,.25)); }
.login-brand-row>p { margin: 0; padding-left: 20px; border-left: 1px solid rgba(255,255,255,.45); font-size: .72rem; line-height: 1.55; }
.brand-tagline { max-width: 570px; margin-block: auto; padding-top: 60px; }
.brand-tagline h1 { margin: 0 0 17px; color: #fff; font-size: clamp(2.5rem,4vw,3.35rem); font-weight: 800; line-height: 1.18; letter-spacing: -.04em; }
.brand-tagline h1 span { color: #a977ff; }
.brand-tagline>p { max-width: 520px; margin: 0; color: rgba(255,255,255,.9); font-size: 1rem; line-height: 1.8; }
.brand-features { display: flex; gap: 15px; margin-top: 52px; }
.feature-item { width: 126px; min-height: 126px; padding: 16px 13px; border: 1px solid rgba(255,255,255,.3); border-radius: 14px; background: rgba(21,18,73,.32); backdrop-filter: blur(12px); transition: .25s ease; }
.feature-item:hover { background: rgba(84,46,170,.38); transform: translateY(-5px); }
.feature-icon { display: grid; width: 42px; height: 42px; margin-bottom: 12px; place-items: center; border-radius: 12px; color: #fff; background: color-mix(in srgb,var(--feature-tone) 65%,rgba(31,16,73,.8)); box-shadow: inset 0 0 0 1px color-mix(in srgb,var(--feature-tone) 70%,transparent),0 8px 18px rgba(0,0,0,.18); }
.feature-text h6 { margin: 0 0 4px; color: #fff; font-size: .72rem; font-weight: 800; }
.feature-text p { margin: 0; color: rgba(255,255,255,.7); font-size: .6rem; line-height: 1.45; }
.brand-footer p { margin: 0; color: rgba(255,255,255,.76); font-size: .65rem; }

.login-form-wrapper { position: relative; display: grid; min-height: 100vh; padding: 76px 50px 45px; place-items: center; background: radial-gradient(circle at 88% 19%,rgba(118,38,238,.09) 0 1px,transparent 2px) 0 0/13px 13px,var(--login-bg); }
.login-form-wrapper::before { position: absolute; top: 0; bottom: 0; left: -100px; width: 150px; pointer-events: none; background: linear-gradient(90deg,transparent,var(--login-bg)); content: ""; }
.login-home-link { position: absolute; z-index: 2; top: 28px; right: 34px; padding: 10px 14px; border: 1px solid var(--login-line); border-radius: 11px; color: var(--login-text); font-size: .72rem; font-weight: 700; background: var(--login-surface); box-shadow: 0 7px 18px rgba(28,42,88,.1); }
.login-card { position: relative; z-index: 1; width: min(100%,560px); padding: 40px 42px 34px; border: 1px solid color-mix(in srgb,var(--login-line) 60%,transparent); border-radius: 20px; background: var(--login-panel); box-shadow: var(--login-shadow); backdrop-filter: blur(18px); }
.login-security { display: grid; width: 96px; height: 96px; margin: 0 auto 18px; place-items: center; border-radius: 24px; background: linear-gradient(145deg,rgba(118,37,238,.03),rgba(118,37,238,.1)); }
.login-security div { display: grid; width: 49px; height: 57px; place-items: center; clip-path: polygon(50% 0,92% 17%,88% 72%,50% 100%,12% 72%,8% 17%); color: #fff; font-size: 1.2rem; background: linear-gradient(150deg,#8b2df1,#5014ce); filter: drop-shadow(0 9px 13px rgba(103,29,220,.3)); }
.login-card-header { margin-bottom: 26px; text-align: center; }
.login-card-header h2 { margin: 0 0 8px; color: var(--login-text); font-size: 1.5rem; font-weight: 800; }
.login-card-header p { margin: 0; color: var(--login-muted); font-size: .82rem; }
.login-form .form-group { margin-bottom: 20px; }
.login-form .form-label { display: block; margin-bottom: 9px; color: var(--login-text); font-size: .8rem; font-weight: 700; }
.input-wrapper { position: relative; display: flex; height: 52px; align-items: center; border: 1px solid var(--login-line); border-radius: 12px; background: var(--login-input); transition: .2s ease; }
.input-wrapper:focus-within { border-color: var(--login-purple); box-shadow: 0 0 0 4px rgba(113,37,238,.09); }
.input-icon { display: grid; width: 48px; place-items: center; color: var(--login-muted); font-size: 1rem; }
.input-wrapper .form-control { flex: 1; min-width: 0; height: 50px; padding: 0 14px 0 0; border: 0; outline: 0; color: var(--login-text); background: transparent; box-shadow: none; }
.input-wrapper .form-control::placeholder { color: color-mix(in srgb,var(--login-muted) 78%,transparent); }
.input-wrapper .form-control.is-invalid { color: #ed526b; }
.password-toggle { display: grid; width: 48px; height: 50px; place-items: center; border: 0; color: var(--login-muted); background: transparent; }
.forgot-link { margin-left: auto; color: #fff; font-size: .75rem; font-weight: 700; text-align: right; }
.forgot-link:hover, .forgot-link:focus { color: #fff; }
.form-check-wrapper { margin: -2px 0 24px; }
.form-check { display: flex; gap: 9px; align-items: center; min-height: auto; padding: 0; }
.form-check .form-check-input { width: 17px; height: 17px; margin: 0; border: 1px solid var(--login-line); background-color: var(--login-input); }
.form-check .form-check-input:checked { border-color: var(--login-purple); background-color: var(--login-purple); }
.form-check .form-check-label { color: var(--login-muted); font-size: .75rem; }
.btn-login { position: relative; display: flex; width: 100%; height: 52px; align-items: center; justify-content: center; gap: 9px; border: 0; border-radius: 12px; color: #fff; font-weight: 800; background: linear-gradient(100deg,#862cff,#4d16ce); box-shadow: 0 12px 24px rgba(106,32,227,.27); transition: .2s ease; }
.btn-login:hover { color: #fff; filter: brightness(1.08); transform: translateY(-2px); }
.btn-login .btn-icon { position: absolute; right: 24px; }
.login-footer { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--login-line); text-align: center; }
.login-footer p { margin: 0; color: var(--login-muted); font-size: .8rem; }
.login-footer a { color: var(--login-purple); font-weight: 700; }
.login-card .alert { border: 0; border-radius: 11px; font-size: .76rem; }
.login-card .alert-success { color: #16a36b; background: rgba(21,229,154,.11); }
.login-card .alert-danger { color: #ed526b; background: rgba(237,82,107,.11); }

@media (max-width:1050px) {
    .login-container { grid-template-columns: 1fr 500px; }
    .login-brand { padding: 38px; }
    .brand-tagline h1 { font-size: 2.6rem; }
    .feature-item { width: 112px; }
    .login-form-wrapper { padding-inline: 32px; }
    .login-card { padding-inline: 32px; }
}
@media (max-width:820px) {
    .login-container { display: block; }
    .login-brand { min-height: 420px; padding: 30px 28px; background-position: center 43%; }
    .brand-tagline { margin-bottom: 30px; padding-top: 48px; }
    .brand-tagline h1 { font-size: 2.2rem; }
    .brand-features, .brand-footer { display: none; }
    .login-form-wrapper { min-height: auto; padding: 82px 20px 36px; }
    .login-form-wrapper::before { display: none; }
    .login-home-link { top: 20px; right: 20px; }
}
@media (max-width:520px) {
    .login-brand { min-height: 330px; padding-inline: 20px; }
    .login-brand-row>p { font-size: .58rem; }
    .brand-tagline { padding-top: 38px; }
    .brand-tagline h1 { font-size: 1.9rem; }
    .brand-tagline>p { font-size: .78rem; }
    .login-card { padding: 30px 20px 27px; border-radius: 17px; }
    .login-security { width: 78px; height: 78px; }
    .login-security div { width: 40px; height: 47px; }
    .login-home-link { padding: 9px 11px; }
}