/* ============================================================
   ZY 工作室 · 成员登录页（居中单卡 · 深蓝玻璃风）
   ------------------------------------------------------------
   原则：
     1) 只负责本页的「骨架 + 背景 + 标题」，不覆盖 v4.css 已有控件样式；
     2) 所有选择器都用 `body.login-page` 提高权重，压过 v4.css 的
        `body.login-page{background:#fff}`，避免背景被抢走；
     3) 内容超高时改为「顶部对齐 + 可滚动」，绝不用 justify-content:center
        把标题顶出屏幕（那正是之前顶部被裁的根因）；
     4) 验证码 / 表单控件样式完全沿用 v4.css，一行不改。
   ============================================================ */

/* ---------- 整屏背景（权重高于 v4.css 的 body.login-page） ---------- */
body.login-page {
    background: #060d24 !important;
    background-image:
        radial-gradient(900px 520px at 50% 8%, rgba(34, 211, 238, .16), transparent 62%),
        radial-gradient(760px 480px at 14% 88%, rgba(124, 92, 255, .18), transparent 66%),
        radial-gradient(720px 460px at 88% 78%, rgba(249, 115, 22, .10), transparent 68%) !important;
    background-attachment: fixed;
    color: #eaf6ff;
    overflow-x: hidden;
}

/* 校园实景底图 + 深蓝压暗
   注意：v4.css / v5.css 给 body::before 加了 !important，
   这里必须同样用 !important 才能压过它们，否则背景图出不来。 */
body.login-page::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    background-image: url('../images/hdr-02-lake.jpg') !important;
    background-size: cover !important;
    background-position: center !important;
    filter: saturate(1.05) brightness(.58) !important;
    mix-blend-mode: normal !important;
}

/* 渐层：保证中央卡片区域足够暗、四周有光晕 */
body.login-page::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(168deg, rgba(5, 12, 32, .90) 0%, rgba(8, 26, 60, .86) 52%, rgba(5, 20, 42, .92) 100%);
}

/* ---------- 居中舞台：顶部对齐 + 空间富余时居中 ---------- */
body.login-page .login-stage {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    min-height: 100vh;
    padding: 46px 20px 40px;
    text-align: center;
}

/* 左上角返回 */
body.login-page .login-back {
    position: fixed;
    top: 24px;
    left: 28px;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 999px;
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .5px;
    text-decoration: none;
    color: rgba(226, 236, 255, .88);
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .16);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: background .2s ease, color .2s ease, transform .2s ease;
}

body.login-page .login-back::before {
    content: '‹';
    font-size: 1.1rem;
    line-height: 1;
}

body.login-page .login-back:hover {
    background: rgba(255, 255, 255, .16);
    color: #fff;
    transform: translateX(-3px);
}

/* ---------- 标题区 ---------- */
body.login-page .login-stage-title {
    max-width: 560px;
    margin-bottom: 26px;
}

body.login-page .login-badge {
    display: inline-block;
    padding: 5px 15px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: 1.6px;
    color: #a5e8ff;
    background: rgba(34, 211, 238, .12);
    border: 1px solid rgba(34, 211, 238, .34);
}

body.login-page .login-title {
    margin: 16px 0 0;
    font-size: 2.35rem;
    font-weight: 800;
    letter-spacing: 3px;
    line-height: 1.3;
    color: #fff;
    text-shadow: 0 4px 30px rgba(4, 12, 32, .55);
}

/* ---------- 登录卡片 ---------- */
body.login-page .login-card {
    width: 100%;
    max-width: 424px;
    padding: 30px 34px 28px;
    border-radius: 18px;
    text-align: left;
    background: rgba(255, 255, 255, .97);
    border: 1px solid rgba(255, 255, 255, .7);
    box-shadow:
        0 2px 6px rgba(4, 12, 32, .16),
        0 26px 64px rgba(4, 12, 32, .38);
}

body.login-page .login-card-head {
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(29, 78, 216, .12);
}

body.login-page .login-card-head h2 {
    margin: 0 0 7px;
    font-size: 1.34rem;
    font-weight: 750;
    letter-spacing: 1.4px;
    color: var(--color-dark);
}

body.login-page .login-card-head h2::after {
    content: '';
    display: block;
    width: 40px;
    height: 3px;
    margin-top: 10px;
    border-radius: 2px;
    background: linear-gradient(90deg, #22d3ee, #7c5cff);
}

body.login-page .login-card-head p {
    margin: 11px 0 0;
    font-size: .83rem;
    color: var(--color-gray);
}

/* ---------- 表单控件：加宽 + 加高，接近正方形 ---------- */
/* 只调整账号 / 密码两个输入框的宽高，验证码相关样式完全不动 */
body.login-page .login-input-wrap {
    display: flex;
    align-items: center;
    width: 100%;
}

body.login-page .login-input-wrap input {
    width: 100%;
    height: 52px;
    padding: 0 46px 0 42px;
    font-size: .96rem;
}

/* 验证码输入框：加宽加高，与验证码图片框同高 */
body.login-page .captcha-input {
    height: 60px;
    padding: 0 14px;
    font-size: .96rem;
}

/* 验证码图片框：做成更方正的比例
   注意：SVG 原生尺寸是 120×44，若容器变高再用 object-fit:cover，
   图片会等比放大后把两侧字符裁掉（表现为右侧拖出半截字符），
   所以这里必须用 contain，保证 4 个字符完整可见。 */
body.login-page .captcha-box {
    width: 108px;
    height: 60px;
}

body.login-page .captcha-box img {
    object-fit: contain;
    background: #f1f5fb;
}

/* v4.css 里 .captcha-loading 是普通流元素，而 .captcha-box 是 flex 容器，
   导致「加载中」提示被当成 flex 子项挤到图片右侧（表现为字符右边拖出竖排文字）。
   这里按 v4.css 中 .gate-captcha-* 的正确写法改成绝对定位覆盖层：
   图片有 src 时提示自动透明，图片永远在最上层。 */
body.login-page .captcha-box {
    position: relative;
}

body.login-page .captcha-box img {
    position: relative;
    z-index: 1;
}

body.login-page .captcha-loading,
body.login-page .captcha-fail {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

body.login-page .captcha-box img[src] ~ .captcha-loading {
    opacity: 0;
}

body.login-page .login-copyright {
    margin: 18px 0 0;
    font-size: .75rem;
    letter-spacing: .8px;
    color: rgba(190, 208, 240, .45);
}

/* ---------- 矮屏（笔记本 768 高）：压缩留白，保证首屏可见 ---------- */
@media (max-height: 820px) {
    body.login-page .login-stage {
        padding: 30px 20px 28px;
    }

    body.login-page .login-stage-title {
        margin-bottom: 16px;
    }

    body.login-page .login-title {
        margin: 12px 0 0;
        font-size: 1.95rem;
    }

    body.login-page .login-card {
        padding: 24px 28px 22px;
    }

    body.login-page .login-card-head {
        margin-bottom: 16px;
        padding-bottom: 13px;
    }

    body.login-page .login-copyright {
        margin-top: 12px;
    }
}

/* ---------- 响应式 ---------- */
@media (max-width: 900px) {
    body.login-page .login-stage {
        padding: 74px 18px 32px;
    }

    body.login-page .login-title {
        font-size: 1.8rem;
        letter-spacing: 2px;
    }

    body.login-page .login-card {
        padding: 26px 22px 24px;
    }
}

@media (max-width: 560px) {
    body.login-page .login-back {
        top: 14px;
        left: 14px;
    }

    body.login-page .login-input-wrap input,
    body.login-page .captcha-input {
        height: 52px;
    }

    body.login-page .captcha-box {
        height: 52px;
        width: 96px;
    }
}