/* ================= 登录页（居中卡片布局） ================= */
html {
    height: 100%;
}

body.signin {
    min-height: 100%;
    margin: 0;
    background: url("../img/login-bg.png") no-repeat center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    color: #16425b;
    position: relative;
}

/* 轻微的白色面纱，柔化背景工业图案，让卡片更突出 */
body.signin::before {
    content: "";
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, .3);
    pointer-events: none;
    z-index: 0;
}

.signinpanel {
    position: relative;
    z-index: 1;
    width: 400px;
    max-width: 92%;
    min-height: 100vh;
    /* 老浏览器兜底：固定百分比右边距 */
    margin: 0 6% 0 auto;
    /* 现代浏览器：让卡片左缘始终对齐背景留白区（约屏宽 64% 处），
       分辨率越高右边距越大，避免卡片与背景图案之间留大片空白 */
    margin: 0 max(6vw, calc(36vw - 400px)) 0 auto;
    padding: 40px 0 24px;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-justify-content: center;
    justify-content: center;
}

/* ---------- 登录卡片 ---------- */
.signinpanel .login-card {
    background: rgba(255, 255, 255, .95);
    border: none;
    border-radius: 16px;
    padding: 36px 34px 32px;
    box-shadow: 0 24px 48px rgba(22, 66, 91, .2), 0 2px 6px rgba(22, 66, 91, .08);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    -webkit-animation: fadeUp .5s ease-out both;
    animation: fadeUp .5s ease-out both;
}

@-webkit-keyframes fadeUp {
    from {
        opacity: 0;
        -webkit-transform: translateY(18px);
        transform: translateY(18px);
    }
    to {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(18px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ---------- 品牌区 ---------- */
.signinpanel .login-brand {
    text-align: center;
    margin-bottom: 26px;
}

.signinpanel .logo-img {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    border: 3px solid rgba(255, 255, 255, .9);
    box-shadow: 0 8px 20px rgba(22, 66, 91, .22);
}

.signinpanel .login-brand h1 {
    margin: 14px 0 6px;
    font-size: 22px;
    font-weight: 700;
    color: #103a52;
    letter-spacing: 2px;
}

.signinpanel .login-slogan {
    margin: 0;
    font-size: 12px;
    letter-spacing: 3px;
    color: #93b7c9;
}

/* ---------- 提示信息，无内容时自动隐藏 ---------- */
.signinpanel .login-tip {
    display: none;
    margin: 0 0 16px;
    padding: 8px 14px;
    border-radius: 8px;
    background: #fdeceb;
    border: 1px solid #f5c6c0;
    color: #c0392b;
    font-size: 13px;
}

.signinpanel .login-tip:not(:empty) {
    display: block;
}

/* ---------- 输入框 ---------- */
.signinpanel .field {
    position: relative;
    margin-bottom: 16px;
}

.signinpanel .field > .fa {
    position: absolute;
    left: 15px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    color: #93b7c9;
    font-size: 15px;
    z-index: 2;
}

.signinpanel .field .form-control {
    height: 46px;
    padding: 10px 14px 10px 42px;
    border-radius: 10px;
    border: 1px solid #d8e5ec;
    background: #f4f9fb;
    color: #16425b;
    box-shadow: none;
    font-size: 14px;
    -webkit-transition: border-color .2s, box-shadow .2s, background .2s;
    transition: border-color .2s, box-shadow .2s, background .2s;
}

.signinpanel .field .form-control::-webkit-input-placeholder {
    color: #a5c2d1;
}

.signinpanel .field .form-control:-moz-placeholder {
    color: #a5c2d1;
}

.signinpanel .field .form-control::-moz-placeholder {
    color: #a5c2d1;
}

.signinpanel .field .form-control:-ms-input-placeholder {
    color: #a5c2d1;
}

.signinpanel .field .form-control:focus {
    border-color: #12a5b0;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(18, 165, 176, .15);
    outline: none;
}

/* ---------- 验证码 ---------- */
.signinpanel .kaptcha-field {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: stretch;
    align-items: stretch;
    margin-bottom: 16px;
}

.signinpanel .kaptcha-field .field {
    -webkit-flex: 1;
    flex: 1;
    margin-bottom: 0;
}

.signinpanel .kaptcha-img {
    width: 118px;
    height: 46px;
    margin-left: 12px;
    border-radius: 10px;
    border: 1px solid #d8e5ec;
    background: #fff;
    cursor: pointer;
    -o-object-fit: cover;
    object-fit: cover;
    -webkit-transition: opacity .2s;
    transition: opacity .2s;
}

.signinpanel .kaptcha-img:hover {
    opacity: .82;
}

/* ---------- 登录按钮 ---------- */
.signinpanel .btn-login {
    height: 46px;
    margin-top: 6px;
    border: none;
    border-radius: 10px;
    background: linear-gradient(135deg, #0e8ca0 0%, #17b3bd 100%);
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: .4em;
    padding-left: .4em;
    box-shadow: 0 10px 20px rgba(14, 140, 160, .32);
    -webkit-transition: -webkit-transform .2s, box-shadow .2s, filter .2s;
    transition: transform .2s, box-shadow .2s, filter .2s;
}

.signinpanel .btn-login:hover,
.signinpanel .btn-login:focus {
    color: #fff;
    -webkit-filter: brightness(1.06);
    filter: brightness(1.06);
    -webkit-transform: translateY(-2px);
    transform: translateY(-2px);
    box-shadow: 0 13px 26px rgba(14, 140, 160, .42);
}

.signinpanel .btn-login:active {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    box-shadow: 0 6px 14px rgba(14, 140, 160, .3);
}

/* ---------- 页脚 ---------- */
.signup-footer {
    margin-top: 18px;
    text-align: center;
    color: rgba(22, 66, 91, .78);
    font-size: 13px;
    letter-spacing: .5px;
}

/* ---------- 响应式 ---------- */
@media screen and (max-width: 768px) {
    .signinpanel {
        width: 92%;
        margin: 0 auto;
        padding: 28px 0 20px;
    }

    .signinpanel .login-card {
        padding: 30px 24px 26px;
    }
}

@media screen and (max-width: 320px) {
    .signinpanel {
        width: auto;
        margin: 0 16px;
    }
}