* { box-sizing: border-box; }

html, body { min-height: 100%; }

body.signin {
    min-height: 100vh;
    margin: 0;
    overflow-x: hidden;
    background: #08285b url(../img/login-background-v2.png) no-repeat center center fixed;
    background-size: cover;
    color: #fff;
    font-family: "Microsoft YaHei", "PingFang SC", "Helvetica Neue", Arial, sans-serif;
}

body.signin::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(3, 24, 58, .12) 0%, rgba(3, 24, 58, .03) 48%, rgba(3, 19, 48, .28) 100%);
}

.login-shell {
    position: relative;
    z-index: 1;
    width: min(1180px, calc(100% - 64px));
    min-height: 100vh;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 420px;
    align-items: center;
    gap: 88px;
    padding: 72px 0 94px;
}

.login-intro { max-width: 610px; text-shadow: 0 2px 18px rgba(1, 17, 48, .3); }
.brand-mark {
    width: 58px;
    height: 58px;
    margin-bottom: 28px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .42);
    border-radius: 17px;
    background: rgba(255, 255, 255, .12);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 16px 34px rgba(0, 18, 56, .18);
    backdrop-filter: blur(12px);
}
.brand-mark i { font-size: 25px; }
.brand-eyebrow { margin: 0 0 14px; color: #b9dcff; font-size: 12px; font-weight: 700; letter-spacing: 2.6px; }
.login-intro h1 { margin: 0; font-size: clamp(36px, 4vw, 54px); line-height: 1.18; font-weight: 700; letter-spacing: 2px; }
.brand-summary { max-width: 560px; margin: 23px 0 30px; color: rgba(236, 246, 255, .86); font-size: 16px; line-height: 1.9; }
.intro-points { display: flex; flex-wrap: wrap; gap: 12px; }
.intro-points span { padding: 8px 13px; border: 1px solid rgba(255, 255, 255, .22); border-radius: 999px; background: rgba(4, 40, 91, .28); color: #e9f5ff; font-size: 12px; backdrop-filter: blur(8px); }
.intro-points i { margin-right: 6px; color: #75caff; }

.login-card {
    padding: 38px 38px 26px;
    border: 1px solid rgba(255, 255, 255, .72);
    border-radius: 22px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 28px 70px rgba(0, 18, 53, .3);
    color: #16243a;
    backdrop-filter: blur(18px);
}
.login-card-head { display: flex; align-items: center; gap: 14px; margin-bottom: 27px; }
.login-badge { width: 46px; height: 46px; flex: 0 0 46px; display: grid; place-items: center; border-radius: 14px; color: #fff; background: linear-gradient(135deg, #1684ff, #245de8); box-shadow: 0 10px 22px rgba(29, 105, 237, .24); }
.login-badge i { font-size: 18px; }
.login-card-head h2 { margin: 0 0 5px; color: #10233f; font-size: 23px; font-weight: 700; }
.login-card-head p { margin: 0; color: #8390a3; font-size: 12px; }
.field-label { display: block; margin: 0 0 8px; color: #3b4960; font-size: 13px; font-weight: 600; }
.login-field { position: relative; margin-bottom: 19px; }
.login-field > i { position: absolute; z-index: 2; left: 16px; top: 50%; transform: translateY(-50%); color: #7890ad; font-size: 15px; }
.signinpanel .form-control,
.login-card .form-control {
    width: 100%;
    height: 48px !important;
    margin: 0;
    padding: 10px 42px !important;
    border: 1px solid #d9e2ee;
    border-radius: 11px !important;
    background: #f8fafc !important;
    color: #17243a;
    font-size: 14px;
    transition: border-color .2s, background .2s, box-shadow .2s;
}
.login-card .form-control:focus { border-color: #2b7cff !important; background: #fff !important; box-shadow: 0 0 0 4px rgba(43, 124, 255, .11) !important; }
.login-card .form-control::placeholder { color: #a5afbd; }
.captcha-row { display: grid; grid-template-columns: minmax(0, 1fr) 122px; gap: 10px; }
.captcha-input { margin-bottom: 0; }
.captcha-refresh { height: 48px; padding: 0; overflow: hidden; border: 1px solid #d9e2ee; border-radius: 11px; background: #f7f9fc; cursor: pointer; }
.captcha-refresh:focus { outline: none; border-color: #2b7cff; box-shadow: 0 0 0 4px rgba(43, 124, 255, .11); }
.captcha-refresh img { display: block; width: 100%; height: 100%; object-fit: cover; }
.captcha-block { margin-bottom: 16px; }
.login-options { min-height: 25px; margin: 4px 0 10px; }
.login-options .checkbox-custom { margin: 0; color: #5b687a; font-size: 13px; }
.login-submit { height: 49px; margin-top: 7px !important; display: flex; align-items: center; justify-content: center; gap: 13px; border: 0; border-radius: 11px; background: linear-gradient(100deg, #147eff, #2459e9); box-shadow: 0 12px 24px rgba(30, 101, 234, .24); font-size: 15px; font-weight: 600; letter-spacing: 1px; transition: transform .2s, box-shadow .2s; }
.login-submit:hover, .login-submit:focus { background: linear-gradient(100deg, #0f73ef, #1d51dc); transform: translateY(-1px); box-shadow: 0 15px 28px rgba(30, 101, 234, .31); }
.login-security { margin: 22px 0 0; padding-top: 18px; border-top: 1px solid #edf1f6; color: #8a96a7; font-size: 11px; text-align: center; }
.login-security i { margin-right: 5px; color: #55a5f7; }
.login-footer { position: absolute; left: 0; right: 0; bottom: 30px; margin: 0; color: rgba(226, 240, 255, .62); font-size: 11px; text-align: center; }
.login-card label.error { display: block; margin: 6px 0 0; color: #e84b55; font-size: 11px; font-weight: 400; }

@media (max-width: 900px) {
    body.signin { background-position: 34% center; }
    body.signin::before { background: rgba(3, 25, 61, .42); }
    .login-shell { width: min(440px, calc(100% - 32px)); grid-template-columns: 1fr; gap: 24px; padding: 40px 0 76px; }
    .login-intro { text-align: center; }
    .brand-mark { width: 50px; height: 50px; margin: 0 auto 18px; }
    .brand-eyebrow, .brand-summary, .intro-points { display: none; }
    .login-intro h1 { font-size: 26px; }
}

@media (max-width: 480px) {
    .login-shell { width: calc(100% - 24px); padding-top: 26px; align-items: start; }
    .login-card { padding: 28px 22px 23px; border-radius: 18px; }
    .login-card-head { margin-bottom: 23px; }
    .login-footer { bottom: 18px; }
}

@media (max-height: 690px) and (min-width: 901px) {
    .login-shell { padding-top: 34px; padding-bottom: 54px; }
    .login-card { padding-top: 28px; padding-bottom: 20px; }
    .login-card-head { margin-bottom: 20px; }
    .login-field { margin-bottom: 14px; }
    .login-footer { bottom: 14px; }
}

@media (prefers-reduced-motion: reduce) {
    .login-card .form-control, .login-submit { transition: none; }
}