:root { color-scheme: light; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif; color: #121638; background: #f3f7f9; }
* { box-sizing: border-box; }
html, body { margin: 0; min-width: 320px; min-height: 100%; }
body { -webkit-font-smoothing: antialiased; }
[v-cloak] { visibility: hidden; }
.login-container { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; background: radial-gradient(ellipse at 50% 12%, #f5f9ff 0, #eef3fa 52%, #edf2f7 100%); }
.header { display: flex; align-items: center; flex: 0 0 67px; height: 67px; background: #fff; border-bottom: 1px solid #e8edf4; }
.header-logo-wrap { display: flex; align-items: center; gap: 12px; width: 1000px; max-width: calc(100% - 32px); min-width: 0; height: 66px; margin: 0 auto; }
.header-logo { display: block; flex: 0 0 48px; width: 48px; height: 48px; object-fit: contain; }
.header-site-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 24px; font-weight: 600; line-height: 1.4; color: #14233f; }
.login-main { display: flex; flex: 1; align-items: center; justify-content: center; padding: 32px 16px; }
.box.loginBox { display: grid; grid-template-columns: 422px 578px; width: 1000px; height: 600px; max-width: 100%; overflow: hidden; border: 1px solid #e5ebf3; border-radius: 16px; box-shadow: 0 20px 60px #193b6d14, 0 4px 16px #193b6d0a; }
.login-visual { display: flex; align-items: center; justify-content: center; overflow: hidden; background: #eaf4ff; }
.loginBg { display: block; width: 100%; height: 100%; object-fit: cover; }
.loginPage { display: flex; justify-content: center; align-items: center; padding: 32px; min-width: 0; background: #fff; }
.login-form { width: 100%; max-width: 332px; }
.login-heading { margin-bottom: 28px; }
.welcome { margin: 0; font-size: 30px; font-weight: 700; line-height: 1.3; letter-spacing: .02em; color: #14233f; }
.login-subtitle { margin: 9px 0 0; color: #7b899e; font-size: 13px; line-height: 1.5; }
.login-container .el-form-item { margin: 0 0 22px; }
.login-container .el-form-item__content { width: 100%; min-width: 0; line-height: normal; }
.inputItem { display: flex; align-items: center; width: 100%; height: 52px; padding-left: 18px; border: 1px solid #e1e8f1; border-radius: 10px; background: #fafcff; transition: border-color .2s, box-shadow .2s, background .2s; }
.inputItem:focus-within { border-color: #4b83e9; background: #fafcff; box-shadow: 0 0 0 3px #2674ff16; }
.inputItem > img { flex: 0 0 auto; width: 17px; height: 17px; object-fit: contain; opacity: .8; }
.inputItem .el-input, .password-input, .verification-input { flex: 1; min-width: 0; height: 100%; }
.login-container .el-input__wrapper { padding: 0 12px; background: transparent; box-shadow: none !important; border-radius: inherit; }
.login-container .el-input__inner { height: 100%; font-family: inherit; font-size: 14px; color: #343951; }
.login-container .el-input__inner::placeholder { color: #a6a9b8; }
.login-container .el-form-item__error { top: calc(100% + 4px); left: 0; font-size: 12px; line-height: 16px; }
.password-toggle { flex-shrink: 0; width: 20px; height: 20px; padding: 0; margin: 0 16px 0 8px; border: 0; background: transparent center / contain no-repeat; cursor: pointer; }
.password-show { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a2a6b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); }
.password-hide { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a2a6b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 3 18 18M10.6 5.1 12 5c6.5 0 10 7 10 7a20 20 0 0 1-3.1 4M6.3 6.3C3.5 8.5 2 12 2 12s3.5 7 10 7a12 12 0 0 0 5.7-1.5M9.9 9.9a3 3 0 0 0 4.2 4.2'/%3E%3C/svg%3E"); }
.captcha-button { display: flex; align-items: center; justify-content: center; flex: 0 0 44%; align-self: stretch; padding: 0; border: 0; border-left: 1px solid #edf0f6; border-radius: 0 9px 9px 0; background: transparent; cursor: pointer; overflow: hidden; }
.captcha-button img { display: block; width: 100%; height: 100%; object-fit: contain; }
.password-toggle:focus-visible, .captcha-button:focus-visible { outline: 2px solid #2674ff; outline-offset: 3px; }
.remember-me { display: flex; align-items: center; gap: 8px; margin: 6px 0 24px; color: #66758c; font-size: 13px; }
.remember-me input { width: 16px; height: 16px; margin: 0; accent-color: #1e6dff; cursor: pointer; }
.remember-me label { cursor: pointer; }
.login-container .login-btn { display: flex; width: 100%; height: 52px; margin: 0; border: 0; border-radius: 10px; background: #2468e8; box-shadow: 0 8px 18px #2468e82e; font-size: 16px; font-weight: 600; letter-spacing: 1px; transition: background .2s; }
.login-container .login-btn:hover, .login-container .login-btn:focus-visible { background: #145be0; }
.login-container .login-btn.is-disabled { opacity: .7; }
.login-arrow { margin-left: 18px; font-size: 22px; line-height: 1; font-weight: 400; }
.footer { flex-shrink: 0; width: 100%; min-height: 55px; padding: 16px 20px; background: transparent; border-top: 1px solid #e4eaf2; }
.vab-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 14px; font-size: 12px; line-height: 1.6; color: #999eae; text-align: center; }
.vab-footer a { color: inherit; text-decoration: none; }
.vab-footer a:hover { color: #1e6dff; }
.vab-footer p { margin: 0; }
input:-webkit-autofill { transition: background-color 50000s ease-in-out 0s; }
@media (max-width: 1400px) { .box.loginBox { grid-template-columns: 351px 450px; width: 801px; } }
@media (max-height: 800px) { .box.loginBox { height: 500px; } }
@media (max-width: 991px) {
    .box.loginBox { display: block; width: 450px; }
    .login-visual { display: none; }
    .loginPage { width: 100%; height: 100%; }
}
@media (max-width: 420px) { .loginPage { padding: 28px 20px; } .welcome { font-size: 28px; } .inputItem { padding-left: 14px; } .captcha-button { flex-basis: 42%; } }