:root { --la-red: #9e1111; --la-red-dark: #710a0a; --la-green: #249d27; --la-ink: #20242c; --la-muted: #69707d; }
.list-attendance-auth { min-height: 100vh; background: #f6f7f8; color: var(--la-ink); font-family: Nunito, sans-serif; }
.auth-layout { display: flex; min-height: 100vh; }
.auth-intro { position: relative; display: flex; flex: 1 1 52%; min-height: 100vh; overflow: hidden; color: #fff; background: linear-gradient(140deg, var(--la-red-dark), var(--la-red) 54%, #c51e1e); }
.auth-intro::before, .auth-intro::after { position: absolute; border: 1px solid rgba(255, 255, 255, .12); border-radius: 50%; content: ''; }
.auth-intro::before { width: 38rem; height: 38rem; right: -13rem; top: -15rem; }
.auth-intro::after { width: 27rem; height: 27rem; left: -15rem; bottom: -13rem; }
.auth-intro__content { position: relative; z-index: 1; max-width: 33rem; margin: auto; padding: 4rem; }
.auth-intro__logo { width: 5rem; height: 5rem; object-fit: contain; object-position: left; filter: brightness(0) invert(1); }
.auth-intro__eyebrow, .signin-card__eyebrow { margin: 2.5rem 0 .7rem; color: rgba(255,255,255,.74); font-size: .72rem; font-weight: 800; letter-spacing: .16em; }
.auth-intro h1 { max-width: 31rem; margin: 0; font-size: clamp(2.25rem, 4vw, 3.65rem); font-weight: 800; line-height: 1.09; letter-spacing: -.045em; }
.auth-intro__copy { max-width: 28rem; margin: 1.4rem 0 2rem; color: rgba(255,255,255,.82); font-size: 1.08rem; line-height: 1.65; }
.auth-intro__features { display: grid; gap: .85rem; font-size: .94rem; font-weight: 600; }
.auth-intro__features i { margin-right: .55rem; color: #8fe291; }
.auth-intro__footer { position: absolute; z-index: 1; bottom: 2.25rem; left: 3rem; color: rgba(255,255,255,.64); font-size: .8rem; }
.auth-intro__footer span { padding: 0 .5rem; }
.auth-signin { display: flex; flex: 1 1 48%; align-items: center; justify-content: center; padding: 2rem; background: #fff; }
.signin-card { width: 100%; max-width: 27rem; }
.signin-card__brand { display: none; width: 17rem; max-width: 100%; height: auto; margin-bottom: 2.75rem; }
.signin-card__heading { margin-bottom: 2rem; }
.signin-card__eyebrow { margin: 0 0 .65rem; color: var(--la-green); }
.signin-card h2 { margin: 0; font-size: 1.8rem; font-weight: 800; letter-spacing: -.025em; }
.signin-card__heading > p:last-child { margin: .55rem 0 0; color: var(--la-muted); font-size: .92rem; line-height: 1.55; }
.signin-form .form-group { margin-bottom: 1.35rem; }
.signin-form label { display: block; margin-bottom: .5rem; color: #3e4550; font-size: .85rem; font-weight: 700; }
.signin-input { display: flex; align-items: center; height: 3.35rem; border: 1px solid #dce0e5; border-radius: .55rem; background: #fff; transition: border-color .2s, box-shadow .2s; }
.signin-input:focus-within { border-color: var(--la-green); box-shadow: 0 0 0 .2rem rgba(36, 157, 39, .12); }
.signin-input i { width: 3.15rem; color: #969da7; text-align: center; }
.signin-input input { width: 100%; height: 100%; padding: 0 1rem 0 0; border: 0; outline: 0; background: transparent; color: var(--la-ink); font-size: .95rem; }
.signin-input input::placeholder { color: #aeb4bd; }
.signin-form .text-danger { display: block; padding: .35rem .15rem 0; font-size: .78rem; }
.signin-button { display: flex; width: 100%; align-items: center; justify-content: center; gap: .7rem; min-height: 3.35rem; margin-top: .4rem; border: 0; border-radius: .55rem; color: #fff; background: var(--la-green); box-shadow: 0 .5rem 1.2rem rgba(36, 157, 39, .2); font-weight: 800; transition: background .2s, transform .2s; }
.signin-button:hover, .signin-button:focus { color: #fff; background: #1c8520; transform: translateY(-1px); }
.signin-card .alert { margin-bottom: 1.25rem; border-radius: .55rem; font-size: .87rem; }
.signin-card__help { margin: 1.65rem 0 0; color: #9298a1; font-size: .77rem; text-align: center; }
.signin-card__help i { margin-right: .35rem; color: var(--la-green); }
@media (max-width: 767.98px) { .auth-intro { display: none; } .auth-signin { min-height: 100vh; padding: 2rem 1.5rem; } .signin-card__brand { display: block; } }
@media (max-width: 374.98px) { .auth-signin { padding: 1.5rem 1.15rem; } .signin-card__brand { width: 14.5rem; margin-bottom: 2rem; } .signin-card h2 { font-size: 1.55rem; } }