html:has(body.erp-login-page) { background: #172330; }
body.erp-login-page {
    margin: 0; min-width: 0; background: #172330; color: #243b59;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Malgun Gothic', sans-serif;
}
.erp-login-page * { box-sizing: border-box; }
.erp-login-shell {
    position: relative; isolation: isolate; display: grid; place-items: center;
    min-height: 100vh; min-height: 100svh; padding: 40px 24px;
}
.erp-login-visual { position: fixed; z-index: -1; inset: 0; overflow: hidden; background: #172330; pointer-events: none; }
.erp-login-visual::after { content: ''; position: absolute; inset: 0; background: rgba(9, 20, 33, .32); }
.erp-login-visual img, .erp-login-visual video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.erp-login-visual video { opacity: 0; }
.erp-login-visual.has-video video { opacity: 1; }
.erp-login-video-toggle { position: fixed; right: 24px; bottom: 24px; display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; border: 1px solid rgba(255,255,255,.4); border-radius: 50%; background: rgba(10,20,30,.35); color: #fff; cursor: pointer; }
.erp-login-video-toggle[hidden] { display: none; }
.erp-login-video-toggle:hover { background: rgba(10,20,30,.65); }
.erp-login-video-toggle:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.erp-login-video-toggle svg { width: 18px; height: 18px; }
.erp-video-play, .is-paused .erp-video-pause { display: none; }
.is-paused .erp-video-play { display: block; }
.erp-login-panel {
    width: 100%; max-width: 448px; padding: 48px 44px 28px;
    border: 1px solid rgba(255,255,255,.42); border-radius: 10px;
    background: rgba(240,244,247,.82);
    -webkit-backdrop-filter: blur(18px) saturate(.8);
    backdrop-filter: blur(18px) saturate(.8);
    box-shadow: 0 24px 72px rgba(3,12,23,.28), inset 0 1px 0 rgba(255,255,255,.5);
}
.erp-login-content { width: 100%; }
.erp-login-logo { display: block; width: 100%; max-width: 332px; height: auto; max-height: 44px; margin: 0 auto 42px; object-fit: contain; object-position: center; }
.erp-login-field { margin-bottom: 22px; }
.erp-login-field label { display: block; margin-bottom: 9px; color: #35495f; font-size: 13px; font-weight: 500; letter-spacing: .03em; }
.erp-login-input { position: relative; }
.erp-login-field input { display: block; width: 100%; height: 52px; margin: 0; padding: 0 16px; border: 1px solid rgba(60,80,102,.18); border-radius: 5px; background: rgba(255,255,255,.48); color: #243b59; font: inherit; font-size: 14px; box-shadow: inset 0 1px 2px rgba(28,43,61,.025); transition: background .15s, border-color .15s, box-shadow .15s; }
.erp-login-field input::placeholder { color: #65758a; font-size: 13px; }
.erp-login-field input:hover { border-color: rgba(49,82,122,.4); background: rgba(255,255,255,.78); }
.erp-login-field input:focus { outline: 0; background: rgba(255,255,255,.94); border-color: #31527a; box-shadow: 0 0 0 3px rgba(49,82,122,.1); }
.erp-login-input-icon { display: none; }
.erp-login-password input { padding-right: 52px; }
.erp-password-toggle { position: absolute; top: 4px; right: 4px; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 5px; background: transparent; color: #7a8a9e; cursor: pointer; }
.erp-password-toggle:hover { background: #eff3f8; color: #31527a; }
.erp-password-toggle svg { width: 20px; height: 20px; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.erp-eye-slash { display: none; }
.erp-password-toggle[aria-pressed="true"] .erp-eye-slash { display: block; }
.erp-password-toggle:focus-visible { outline: 2px solid #31527a; outline-offset: -2px; }
.erp-login-remember { display: flex; align-items: center; gap: 9px; width: fit-content; min-height: 28px; margin: -2px 0 28px; color: #43566d; font-size: 13px; cursor: pointer; }
.erp-login-remember input { appearance: none; position: relative; flex: 0 0 18px; width: 18px; height: 18px; margin: 0; border: 1px solid rgba(66,87,111,.35); border-radius: 4px; background: rgba(255,255,255,.64); cursor: pointer; }
.erp-login-remember:hover input { border-color: #31527a; }
.erp-login-remember input:checked { border-color: #31527a; background: #31527a; }
.erp-login-remember input:checked::after { content: ''; position: absolute; left: 5px; top: 2px; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.erp-login-page #loginBtn { display: flex; align-items: center; justify-content: center; width: 100%; height: 52px; margin: 0; padding: 0 20px; border: 1px solid rgba(24,50,78,.45); border-radius: 5px; background: #294765; color: #fff; font: inherit; font-size: 14px; font-weight: 500; letter-spacing: .12em; text-indent: .12em; box-shadow: 0 3px 8px rgba(21,44,70,.12), inset 0 1px 0 rgba(255,255,255,.12); cursor: pointer; transition: background .15s, box-shadow .15s; }
.erp-login-page #loginBtn:active { box-shadow: none; background: #1f3f66; }
.erp-login-page #loginBtn:hover { background: #223563; border-color: #223563; }
.erp-login-page #loginBtn:focus-visible, .erp-login-remember input:focus-visible { outline: 2px solid #3d768f; outline-offset: 4px; }
.erp-login-footer { margin-top: 30px; color: #52657a; text-align: center; font-size: 10px; letter-spacing: .02em; }
@media (max-width: 640px) {
    .erp-login-shell { padding: 24px 20px; }
    .erp-login-panel { max-width: 420px; padding: 36px 28px 24px; }
    .erp-login-logo { margin-bottom: 34px; }
    .erp-login-video-toggle { display: none; }
}
@media (prefers-reduced-motion: reduce) { .erp-login-visual video, .erp-login-video-toggle { display: none; } }

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .erp-login-panel { background: rgba(244,247,250,.96); }
}
@media (prefers-reduced-transparency: reduce) {
    .erp-login-panel { background: #f4f7fa; -webkit-backdrop-filter: none; backdrop-filter: none; }
}