/*
 * 辉南县智慧疾控平台 - 登录页样式
 * 视觉：浅色疾控插画背景 + 右侧白色登录卡片
 */
html,
body {
    height: 100%;
}

body {
    margin: 0;
    font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* ---------- 页面容器：整体背景插画（左上角已有 branding，右侧留白放登录卡片） ----------
 * 背景图完整显示、任何屏幕比例都不裁切（contain）：
 * - 屏幕比图更宽（如带鱼屏）：图片靠左上显示，右侧空白由后备渐变补足，与图右缘浅色自然衔接
 * - 屏幕比图更高（如 4:3）：底部空白同理补足，露出的是山景下方的淡蓝色
 */
.login-page {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: #eef7fe;
    background-image:
        url("../images/loginbg.png"),
        linear-gradient(102deg, #e7f3fd 0%, #f4faff 48%, #fdfeff 100%);
    background-repeat: no-repeat, no-repeat;
    background-position: left top, center center;
    background-size: contain, cover;
}

/* ---------- 主内容区 ---------- */
.login-main {
    position: relative;
    z-index: 2;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 40px 8vw 24px;
}

/* ---------- 登录卡片容器 ---------- */
.login-box {
    position: relative;
    width: 412px;
    flex-shrink: 0;
}

/* 卡片背后的柔和蓝色光晕 */
.login-box::before {
    content: "";
    position: absolute;
    top: -60px;
    right: -70px;
    bottom: -60px;
    left: -70px;
    background: radial-gradient(50% 50% at 50% 50%, rgba(41, 152, 255, .18) 0%, rgba(41, 152, 255, 0) 100%);
    pointer-events: none;
}

.login-card {
    position: relative;
    overflow: hidden;
    padding: 42px 40px 36px;
    border-radius: 16px;
    background: #ffffff;
    border: 1px solid rgba(151, 190, 240, .5);
    box-shadow: 0 24px 60px rgba(21, 77, 160, .18), 0 4px 14px rgba(21, 77, 160, .08);
    -webkit-animation: cardIn .6s ease-out .1s both;
    animation: cardIn .6s ease-out .1s both;
}

.login-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: linear-gradient(90deg, #0b57d0 0%, #2f8bff 55%, #1cc5e6 100%);
}

.login-card-head {
    margin-bottom: 28px;
}

.login-card-head h2 {
    position: relative;
    margin: 0;
    padding-left: 15px;
    font-size: 25px;
    font-weight: 700;
    letter-spacing: 3px;
    color: #16233c;
}

.login-card-head h2::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    display: block;
    width: 5px;
    height: 22px;
    margin-top: -11px;
    border-radius: 3px;
    background: linear-gradient(180deg, #0b57d0, #1cc5e6);
}

.login-card-head p {
    margin: 10px 0 0;
    font-size: 13px;
    letter-spacing: 1px;
    color: #93a1b8;
}

/* ---------- 表单 ---------- */
.login-form .form-group {
    position: relative;
    margin-bottom: 18px;
}

.login-form .form-control.login-input {
    height: 48px;
    padding: 6px 44px;
    border: 1px solid #d9e3f2;
    border-radius: 10px;
    background-color: #f6f9fe;
    font-size: 15px;
    color: #1c2b46;
    box-shadow: none;
    -webkit-transition: border-color .2s, box-shadow .2s, background-color .2s;
    transition: border-color .2s, box-shadow .2s, background-color .2s;
}

.login-form .form-control.login-input::-webkit-input-placeholder {
    color: #a6b4cb;
}

.login-form .form-control.login-input:-ms-input-placeholder {
    color: #a6b4cb;
}

.login-form .form-control.login-input::placeholder {
    color: #a6b4cb;
}

.login-form .form-control.login-input:focus {
    border-color: #1e6fe8;
    background-color: #ffffff;
    box-shadow: 0 0 0 3px rgba(30, 111, 232, .13);
    outline: none;
}

/* 浏览器自动填充时保持白底 */
.login-form .form-control.login-input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #ffffff inset;
    -webkit-text-fill-color: #1c2b46;
}

/* 输入框图标 */
.icon-box > i {
    position: absolute;
    left: 17px;
    top: 50%;
    margin-top: -8px;
    font-size: 16px;
    color: #9aaac6;
    pointer-events: none;
    -webkit-transition: color .2s;
    transition: color .2s;
}

.icon-box .login-input:focus ~ i {
    color: #1e6fe8;
}

/* ---------- 点击验证码 ---------- */
.code-box {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    border: 1px dashed #b8cbe9;
    border-radius: 10px;
    background-color: #f6f9fe;
    color: #46618c;
    font-size: 14px;
    letter-spacing: 1px;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    -webkit-transition: border-color .2s, background-color .2s, color .2s, box-shadow .2s;
    transition: border-color .2s, background-color .2s, color .2s, box-shadow .2s;
}

.code-box:hover {
    border-color: #1e6fe8;
    background-color: #eef5ff;
    color: #1e6fe8;
    box-shadow: 0 0 0 3px rgba(30, 111, 232, .1);
}

.code-box .unverified,
.code-box .verified {
    display: flex;
    align-items: center;
}

.code-box .unverified i {
    margin-right: 9px;
    font-size: 17px;
    color: #5a7db1;
}

.code-box .verified {
    color: #14a05a;
}

.code-box .verified i {
    margin-right: 9px;
    font-size: 18px;
    color: #14a05a;
}

/* ---------- 登录按钮 ---------- */
.login-form .btn-box {
    margin-top: 26px;
    margin-bottom: 0;
}

.login-form .login-btn {
    display: block;
    width: 100%;
    height: 48px;
    padding: 0;
    border: none;
    border-radius: 10px;
    background: linear-gradient(90deg, #0b57d0 0%, #1e7ff2 100%);
    color: #ffffff;
    font-size: 17px;
    font-weight: 600;
    line-height: 48px;
    letter-spacing: 6px;
    text-indent: 6px;
    box-shadow: 0 10px 22px rgba(17, 94, 214, .32);
    -webkit-transition: box-shadow .2s, background .2s;
    transition: box-shadow .2s, background .2s;
}

.login-form .login-btn:hover {
    background: linear-gradient(90deg, #0f63e6 0%, #2f8bff 100%);
    box-shadow: 0 12px 26px rgba(17, 94, 214, .42);
}

.login-form .login-btn:active,
.login-form .login-btn:focus {
    outline: none;
    box-shadow: 0 6px 14px rgba(17, 94, 214, .38);
}

/* ---------- 页脚 ---------- */
.login-footer {
    position: relative;
    z-index: 2;
    padding: 16px 20px 22px;
    text-align: center;
    font-size: 13px;
    letter-spacing: 1px;
    line-height: 22px;
    color: #5b7599;
}

/* 页脚文字压在底部山景线稿上，加半透明胶囊底保证可读性 */
.login-footer > div {
    display: inline-block;
    padding: 5px 22px;
    border-radius: 20px;
    background: rgba(255, 255, 255, .55);
}

.login-footer .footer-sep {
    margin: 0 12px;
    opacity: .5;
}

/* ---------- 入场动画 ---------- */
@-webkit-keyframes cardIn {
    from {
        opacity: 0;
        -webkit-transform: translateY(20px);
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes cardIn {
    from {
        opacity: 0;
        -webkit-transform: translateY(20px);
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

/* ---------- 响应式 ---------- */
@media (max-width: 1180px) {
    .login-main {
        padding: 36px 5vw 20px;
    }

    .login-box {
        width: 400px;
    }
}

@media (max-width: 960px) {
    .login-main {
        align-items: flex-start;
        justify-content: center;
        padding: 46px 5vw 20px;
    }

    .login-box {
        width: auto;
    }

    .login-card {
        width: 400px;
        max-width: 92vw;
    }
}

@media (max-height: 720px) {
    .login-main {
        padding-top: 26px;
    }

    .login-card {
        padding: 32px 34px 28px;
    }

    .login-card-head {
        margin-bottom: 22px;
    }

    .login-form .form-control.login-input,
    .code-box {
        height: 44px;
    }

    .login-form .login-btn {
        height: 44px;
        line-height: 44px;
    }
}