html.attendance-login-page { height: auto; min-height: 100%; overflow-y: auto; }
body.attendance-login { padding: 0 !important; margin: 0; height: auto; min-height: 100vh; min-height: 100dvh; overflow-x: hidden; overflow-y: auto; position: static; touch-action: auto; display: flex; flex-direction: column; background: #f3f8f4; color: #153b2c; font-family: 'Arimo', Arial, sans-serif; }
.attendance-login a { color: #207a46; text-decoration: none; }
.attendance-login a:hover { color: #186038; text-decoration: underline; }
.login-main { flex: 1 0 auto; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 80px; align-items: center; padding-top: 64px; padding-bottom: 64px; }
.login-eyebrow { display: flex; align-items: center; gap: 12px; font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: #207a46; margin-bottom: 24px; }
.login-eyebrow::before { content: ''; width: 32px; height: 2px; background: #207a46; }
.login-intro h1 { font-family: inherit !important; font-size: clamp(36px, 4.5vw, 60px); font-weight: 800; line-height: 1.1; letter-spacing: -.045em; color: #153b2c; margin-bottom: 24px; }
.login-intro h1 span { color: #207a46; }
.login-description { max-width: 480px; font-size: 18px; line-height: 1.8; color: #506c5e; }
.login-intro-detail { display: flex; align-items: center; gap: 16px; margin-top: 36px; padding-top: 24px; border-top: 1px solid #dbe8de; max-width: 480px; }
.login-intro-detail > i { font-size: 32px; color: #207a46; }
.login-intro-detail strong { font-size: 14px; }
.login-intro-detail p { margin: 4px 0 0; font-size: 13px; color: #587466; }
.login-card { padding: 36px; border: 1px solid #dbe8de; border-radius: 14px; background: #fff; box-shadow: 0 12px 36px #153b2c08; }
.login-card-logo { object-fit: contain; margin-bottom: 20px; }
.login-card h2 { font-family: inherit !important; font-size: 28px; font-weight: 700; color: #153b2c; margin-bottom: 8px; }
.login-card-description { color: #587466; font-size: 14px; margin-bottom: 28px; }
.login-field { margin-bottom: 20px; }
.login-field label { display: block; font-size: 14px; font-weight: 600; color: #153b2c; margin-bottom: 8px; }
.attendance-login .form-control { min-height: 50px; border: 1px solid #dbe8de; border-radius: 6px; color: #153b2c; background: #fff; padding: 12px 14px; font-size: 16px; }
.attendance-login .form-control:focus { border-color: #207a46; box-shadow: 0 0 0 3px #207a461a; }
.login-password-wrap { position: relative; }
.login-password-wrap .form-control { padding-right: 52px; }
.login-password-toggle { position: absolute; right: 3px; top: 3px; width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 4px; background: transparent; color: #587466; font-size: 22px; cursor: pointer; }
.login-password-toggle:hover { color: #207a46; background: #eaf5ed; }
.login-options { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 24px; font-size: 13px; }
.login-options label { display: flex; align-items: center; gap: 8px; color: #587466; }
.login-options input { accent-color: #207a46; }
.login-btn { width: 100%; min-height: 50px; border: 1px solid #153b2c; border-radius: 6px; background: #153b2c; color: #fff; font-size: 15px; font-weight: 700; }
.login-btn:hover { background: #24563f; }
.login-home { border-top: 1px solid #dbe8de; margin: 24px 0 0; padding-top: 24px; text-align: center; font-size: 14px; color: #587466; }
.login-home a { font-weight: 600; gap: 8px; }
.attendance-login a:focus-visible, .attendance-login button:focus-visible { outline: 3px solid #207a46; outline-offset: 3px; }
.login-page-footer { flex-shrink: 0; overflow-wrap: anywhere; padding: 22px 0; border-top: 1px solid #dbe8de; font-size: 12px; color: #587466; }
.attendance-login .error-message { color: #a32929; font-size: 13px; margin-top: 6px; }
@media (max-width: 991.98px) { .login-main { gap: 32px; } .login-card { padding: 28px; } }
@media (max-width: 991.98px) { .login-main { grid-template-columns: 1fr; max-width: 520px; padding-top: 32px; padding-bottom: 32px; gap: 28px; } .login-intro h1 { font-size: 36px; } .login-description { font-size: 16px; margin-bottom: 0; } .login-intro-detail { display: none; } .login-eyebrow { margin-bottom: 16px; font-size: 10px; } .login-card { padding: 24px; } }
@media (max-width: 399.98px) { }

.login-options a, .login-home a { display: inline-flex; align-items: center; min-height: 44px; }
@media (max-width: 399.98px) { .login-card { padding: 20px; } .login-intro h1 { font-size: 32px; } }