.login-body { min-width: 320px; background: #fff; }

.login-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 60% 40%;
}

.login-brand {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    padding: clamp(48px, 7vw, 100px);
    color: #fff;
    background: linear-gradient(145deg, #A90C25 20%, #CE0E2D 62%, #DD3851 90%);
}

.login-brand::before {
    content: "";
    position: absolute;
    z-index: 1;
    top: 37%;
    left: 50%;
    width: min(72%, 760px);
    aspect-ratio: 300 / 45;
    background: url("/images/scd-slogan.svg") center / contain no-repeat;
    filter: brightness(0) invert(1);
    opacity: .94;
    transform: translateX(-50%);
    pointer-events: none;
}

.login-brand::after {
    content: "";
    position: absolute;
    z-index: 2;
    bottom: 5.5%;
    left: 50%;
    width: min(28%, 330px);
    aspect-ratio: 4 / 1;
    background: url("/images/scd-ci-white.svg") center / contain no-repeat;
    transform: translateX(-50%);
    pointer-events: none;
}

.brand-content { position: relative; z-index: 2; max-width: 560px; display: none; }
.brand-kicker { font-size: 0.8rem; font-weight: 800; letter-spacing: 0.16em; opacity: 0.82; }
.brand-content h1 { margin: 20px 0 18px; font-size: 3.2rem; line-height: 1.14; letter-spacing: -0.045em; }
.brand-content p { max-width: 460px; margin: 0; font-size: .9rem; line-height: 1.75; opacity: 0.88; }

.brand-shape { display: none; }
.brand-shape-one { width: 520px; height: 520px; top: -180px; right: -150px; }
.brand-shape-two { width: 310px; height: 310px; top: -75px; right: -45px; background: rgba(255,255,255,.04); }

.login-area {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 48px 28px 24px;
    background: #fff;
}

.login-area::before,.login-area::after{display:none}

.login-card { position:relative; z-index:1; width: min(100%, 410px); }
.login-logo { display: none; }
.login-heading .eyebrow { position:relative; width:100%; margin:0 0 30px; padding-bottom:12px; color:transparent; background:linear-gradient(90deg,#A90C25,#F01847,#A90C25); background-size:200% auto; background-clip:text; -webkit-background-clip:text; font-size:1.2rem; font-weight:900; letter-spacing:.2em; text-shadow:0 5px 18px rgba(206,14,45,.2); animation:portal-title-shine 4s linear infinite; }
.login-heading .eyebrow::after { content:""; position:absolute; right:0; bottom:0; left:0; height:5px; background:linear-gradient(90deg,#E5E5E7 0 28%,transparent 28%) 0 0/100% 2px no-repeat,linear-gradient(135deg,transparent 0 29%,#CE0E2D 29.5% 100%) 0 2px/100% 3px no-repeat; }
@keyframes portal-title-shine { to { background-position:200% center; } }
.login-heading h2 { margin: 0; font-size: 2rem; letter-spacing: -0.035em; }
.login-heading > p:last-child { margin: 8px 0 30px; color: var(--scd-gray); }

.form-field { margin-bottom: 18px; }
.form-field label { display: block; margin-bottom: 8px; font-size: 0.9rem; font-weight: 700; }
.form-field input {
    width: 100%;
    height: 54px;
    padding: 0 16px;
    color: var(--scd-black);
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 10px;
    transition: border-color 160ms ease, box-shadow 160ms ease;
}
.form-field input::placeholder { color: #9B9B9E; }
.form-field input:focus { border-color: var(--scd-red); box-shadow: 0 0 0 4px var(--scd-red-soft); outline: none; }

.remember-option { width: fit-content; display: flex; align-items: center; gap: 9px; margin: 2px 0 24px; color: var(--scd-gray); font-size: 0.9rem; cursor: pointer; }
.remember-option input { width: 17px; height: 17px; margin: 0; accent-color: var(--scd-red); }
.button-login { width: 100%; min-height: 54px; font-size: 1rem; }

.login-messages:not(:empty){margin-top:14px}.alert { margin:0 0 10px; padding:12px 14px; border-radius:var(--radius-sm); font-size:.875rem; }
.login-messages .alert{animation:login-message-notice 1.4s ease-out both;transform-origin:center}
@keyframes login-message-notice{
    0%{opacity:0;transform:translateY(-12px) scale(.96);box-shadow:0 0 0 rgba(206,14,45,0)}
    20%{opacity:1;transform:translateY(0) scale(1);box-shadow:0 7px 18px rgba(206,14,45,.15)}
    48%{opacity:.6;transform:translateY(0) scale(1.015);box-shadow:0 9px 23px rgba(206,14,45,.2)}
    75%{opacity:1;transform:translateY(0) scale(1);box-shadow:0 5px 14px rgba(206,14,45,.1)}
    100%{opacity:1;transform:translateY(0) scale(1);box-shadow:none}
}
.alert-error { color: #951126; background: #FCEBED; }
.login-attempt { color: inherit; font-size: inherit; font-weight: 700; }
.alert-success { color: #12613D; background: #E9F5EF; }
.alert-info { color: #1E4F89; background: #EAF2FB; }
.login-help { margin: 22px 0 0; color: #767679; font-size: 0.8rem; text-align: center; }
.copyright { position:absolute; z-index:1; right:20px; bottom:16px; left:20px; margin:0; padding:0; color:#969699; font-size:.75rem; text-align:center; }

@media (max-width: 1100px) {
    .login-shell { grid-template-columns: 1fr; }
    .login-brand { min-height: 205px; align-items: center; padding: 34px 28px; }
    .brand-content h1 { margin: 10px 0 0; font-size: 1.75rem; }
    .brand-content h1 br { display: none; }
    .brand-content p { display: none; }
    .login-brand::before { top: 50%; width: min(70%, 460px); transform: translate(-50%,-50%); opacity: .94; }
    .login-brand::after { display:none; }
    .login-area { min-height: calc(100vh - 205px); justify-content:center; padding:42px 28px 54px; }
    .login-logo { width: 220px; margin-bottom: 34px; }
}

@media (max-width: 480px) {
    .login-shell { height: 100vh; height: 100dvh; min-height: 0; grid-template-rows: 110px minmax(0,1fr); overflow: hidden; }
    .login-brand { min-height: 110px; height: 110px; box-sizing: border-box; padding: 14px 20px; }
    .brand-content h1 { font-size: 1.45rem; }
    .login-brand::before { width: min(72%, 285px); }
    .login-area { min-height: 0; height: 100%; box-sizing: border-box; justify-content:center; padding:18px 20px 34px; }
    .login-logo { width: 190px; margin-bottom: 28px; }
    .login-heading .eyebrow { margin-bottom: 18px; padding-bottom: 9px; }
    .login-heading h2 { font-size: 1.7rem; }
    .login-heading > p:last-child { margin-bottom: 18px; }
    .form-field { margin-bottom: 12px; }
    .form-field label { margin-bottom: 6px; }
    .form-field input { height: 50px; }
    .remember-option { margin-bottom: 16px; }
    .button-login { min-height: 50px; }
    .login-messages:not(:empty) { margin-top: 9px; }
    .alert { padding: 9px 11px; }
    .login-help { margin-top: 14px; }
    .copyright { right:12px; bottom:8px; left:12px; padding:0; font-size:.68rem; }
}

@media (max-width: 480px) and (max-height: 650px) {
    .login-shell { grid-template-rows: 82px minmax(0,1fr); }
    .login-brand { min-height: 82px; height: 82px; padding: 8px 20px; }
    .login-brand::before { width: min(64%, 240px); }
    .login-area { padding-top: 10px; padding-bottom: 25px; }
    .login-heading .eyebrow { margin-bottom: 11px; padding-bottom: 7px; font-size: 1rem; }
    .login-heading h2 { font-size: 1.5rem; }
    .login-heading > p:last-child { margin: 4px 0 10px; }
    .form-field { margin-bottom: 8px; }
    .form-field input { height: 46px; }
    .remember-option { margin-bottom: 10px; }
    .button-login { min-height: 46px; }
    .login-help { margin-top: 8px; }
}

@media (prefers-reduced-motion: reduce) {
    .login-messages .alert { animation: none; }
}