.auth-body { margin: 0; min-height: 100vh; background: #f8fafc; }
.auth-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(360px, 44%) 1fr; }
.auth-institutional { position: relative; overflow: hidden; display: flex; flex-direction: column; padding: clamp(2rem, 5vw, 4.5rem); color: #fff; background: linear-gradient(145deg, #450a0a 0%, #7f1d1d 52%, #b91c1c 100%); }
.auth-institutional::before, .auth-institutional::after { content: ""; position: absolute; border-radius: 50%; border: 1px solid rgba(255,255,255,.14); }
.auth-institutional::before { width: 420px; height: 420px; right: -190px; top: -110px; }
.auth-institutional::after { width: 280px; height: 280px; left: -130px; bottom: -90px; background: rgba(255,255,255,.04); }
.auth-brand, .auth-mobile-brand { display: flex; align-items: center; gap: .85rem; }
.auth-brand { position: relative; z-index: 1; }
.auth-brand-icon { width: 50px; height: 50px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.35); border-radius: 15px; font-size: 1.2rem; background: rgba(255,255,255,.08); }
.auth-brand strong { display: block; font-size: 1.35rem; letter-spacing: .04em; }
.auth-brand span { display: block; opacity: .75; font-size: .86rem; }
.auth-institutional-content { position: relative; z-index: 1; margin: auto 0; max-width: 560px; }
.auth-eyebrow { display: block; color: #b91c1c; font-size: .75rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; margin-bottom: .85rem; }
.auth-institutional .auth-eyebrow { color: #fecaca; }
.auth-institutional h1 { font-size: clamp(2rem, 3.8vw, 3.5rem); line-height: 1.08; font-weight: 800; margin-bottom: 1.4rem; }
.auth-institutional p { max-width: 500px; color: rgba(255,255,255,.76); font-size: 1.05rem; line-height: 1.7; }
.auth-security { position: relative; z-index: 1; display: flex; gap: .6rem; align-items: center; color: rgba(255,255,255,.68); }
.auth-login-panel { display: grid; place-items: center; padding: clamp(1.25rem, 5vw, 4rem); }
.auth-card { width: min(100%, 470px); padding: clamp(1.5rem, 4vw, 2.75rem); background: #fff; border: 1px solid var(--border); border-radius: 24px; box-shadow: 0 24px 60px rgba(69,10,10,.1); }
.auth-mobile-brand { display: none; color: var(--primary-dark); margin-bottom: 1.75rem; }
.auth-card-header h2 { font-size: clamp(1.75rem, 3vw, 2.25rem); font-weight: 800; margin-bottom: .65rem; }
.auth-card-header p { color: #64748b; margin-bottom: 2rem; }
.auth-field { margin-bottom: 1.25rem; }
.auth-field .form-label { font-size: .88rem; font-weight: 700; color: #334155; }
.auth-input-wrap { position: relative; }
.auth-input-wrap > i { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: #94a3b8; z-index: 2; }
.auth-input-wrap .form-control { min-height: 52px; padding-left: 2.75rem; border-radius: 12px; border-color: #dbe1e8; }
.auth-input-wrap .form-control:focus { border-color: var(--primary); box-shadow: 0 0 0 .2rem rgba(185,28,28,.12); }
.auth-input-wrap .form-control::placeholder { color: #94a3b8; opacity: .78; font-weight: 400; }
.auth-input-wrap .form-control:focus::placeholder { opacity: .5; }
.auth-input-wrap:focus-within > i { color: var(--primary); }
.auth-input-wrap .form-control.input-validation-error { border-color: #dc3545; background-image: none; }
.auth-input-wrap .form-control.input-validation-error:focus { border-color: #dc3545; box-shadow: 0 0 0 .2rem rgba(220,53,69,.12); }
.auth-password-wrap .form-control { padding-right: 3rem; }
.auth-password-toggle { position: absolute; right: .65rem; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; border: 0; background: transparent; color: #64748b; border-radius: 9px; }
.auth-password-toggle:hover, .auth-password-toggle:focus-visible { color: var(--primary); background: var(--primary-soft); outline: none; }
.auth-remember { margin: .4rem 0 1.5rem; }
.auth-remember .form-check-input:checked { background-color: var(--primary); border-color: var(--primary); }
.auth-submit { width: 100%; min-height: 52px; display: flex; align-items: center; justify-content: center; gap: .75rem; border-radius: 12px; font-weight: 700; }
.auth-secondary-action { text-align: center; margin-top: 1.15rem; font-size: .9rem; }
.auth-secondary-action a, .auth-resend-form .btn-link { color: var(--primary); font-weight: 700; text-decoration: none; }
.auth-secondary-action a:hover, .auth-resend-form .btn-link:hover { text-decoration: underline; }
.auth-code-fallback { min-height: 52px; text-align: center; font-size: 1.25rem; font-weight: 700; letter-spacing: .3rem; }
.auth-otp-fieldset { min-width: 0; }
.auth-otp { display: grid; width: 100%; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .65rem; }
.auth-otp[hidden] { display: none; }
.auth-otp-digit { width: 100%; aspect-ratio: 1; min-width: 0; max-height: 58px; border: 1px solid #cbd5e1; border-radius: 12px; background: #fff; color: #1e293b; font-size: 1.45rem; font-weight: 800; line-height: 1; text-align: center; caret-color: var(--primary); transition: border-color .15s, box-shadow .15s, background-color .15s; }
.auth-otp-digit:focus { border-color: var(--primary); background: #fffafa; box-shadow: 0 0 0 .22rem rgba(185,28,28,.14); outline: 2px solid transparent; }
.auth-otp.is-invalid .auth-otp-digit { border-color: #dc3545; background: #fff8f8; }
.auth-otp.is-invalid .auth-otp-digit:focus { box-shadow: 0 0 0 .22rem rgba(220,53,69,.14); }
.auth-otp-error { display: block; min-height: 1.2em; margin-top: .5rem; text-align: center; }
.auth-countdown-box { display: flex; align-items: center; justify-content: center; gap: .5rem; margin: .25rem 0 1.15rem; padding: .7rem .85rem; border-radius: 10px; background: #f8fafc; color: #475569; font-size: .88rem; font-weight: 600; text-align: center; }
.auth-countdown-box.is-expired { color: #991b1b; background: #fef2f2; }
.auth-resend-form { text-align: center; margin-top: .65rem; }
.auth-password-requirements { color: #64748b; font-size: .82rem; line-height: 1.65; margin-bottom: 1.25rem; }
.auth-validation-summary:empty, .auth-validation-summary.validation-summary-valid { display: none; }
.auth-validation-summary { padding: .85rem 1rem; margin-bottom: 1.25rem; color: #991b1b; background: #fef2f2; border: 1px solid #fecaca; border-radius: 12px; font-size: .9rem; }
.auth-validation-summary ul { margin: 0; padding-left: 1.2rem; }
.auth-field .text-danger { display: block; font-size: .8rem; margin-top: .35rem; }
@media (max-width: 991.98px) { .auth-shell { grid-template-columns: minmax(280px, 38%) 1fr; } .auth-institutional { padding: 2rem; } .auth-institutional h1 { font-size: 2rem; } }
@media (max-width: 767.98px) { .auth-shell { display: block; min-height: 100vh; } .auth-institutional { display: none; } .auth-login-panel { min-height: 100vh; padding: 1rem; } .auth-card { width: 100%; padding: 1.5rem; border-radius: 20px; } .auth-mobile-brand { display: flex; } }
@media (max-width: 359.98px) { .auth-login-panel { padding: .65rem; } .auth-card { padding: 1.15rem; } }
@media (max-width: 479.98px) { .auth-otp { gap: .35rem; } .auth-otp-digit { border-radius: 9px; font-size: 1.15rem; } }