/* ========================================================
 *  登录页 - 浅色官方账号中心风格（1:1 参考巨人网络截图）
 * ====================================================== */

body.page-full { background: #f6f2e9; }

/* 首屏：插画作为整页背景，铺满登录卡片下方区域 */
.gp-login-page {
    position: relative;
    min-height: 560px;
    background: #fdf3d3;
    padding: 48px 0 64px;
    overflow: hidden;
}
.gp-login {
    position: relative;
    z-index: 2;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

/* ---------- 背景插画：绝对定位铺满整个首屏 ---------- */
.gp-login__hero {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    background: #fdf3d3;
}
.gp-login__hero-img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center;
}

/* ---------- 右侧登录卡片（浮在插画背景上层） ---------- */
.gp-login__panel {
    position: relative;
    z-index: 3;
    width: 400px;
    max-width: 100%;
    background: #ffffff;
    border-radius: 10px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .18);
    padding: 30px 28px 22px;
    display: flex; flex-direction: column; gap: 14px;
}
@media (max-width: 880px) {
    .gp-login { justify-content: center; }
    .gp-login__panel { width: 100%; }
}
.gp-login__panel h1 {
    margin: 0 0 8px;
    font-size: 20px;
    font-weight: 600;
    color: #333;
}

/* 输入框 */
.gp-field { position: relative; }
.gp-login .gp-input {
    height: 42px;
    background: #f7f7f7;
    border: 1px solid #e3e3e3;
    border-radius: 4px;
    font-size: 14px;
    color: #333;
    transition: border-color .15s ease, background .15s ease;
}
.gp-login .gp-input::placeholder { color: #aaa; }
.gp-login .gp-input:focus {
    outline: none;
    background: #fff;
    border-color: #4a90d9;
    box-shadow: 0 0 0 1px #4a90d9 inset;
}

/* 密码眼睛 */
.gp-field--pwd .gp-input { padding-right: 40px; }
.gp-eye {
    position: absolute; right: 12px; top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: #bbb;
    font-size: 15px;
    user-select: none;
}
.gp-eye:hover { color: #888; }

/* 密码强度（保留功能、弱化视觉） */
.gp-strength {
    display: flex; gap: 6px; align-items: center;
    margin: -6px 0 0;
    min-height: 8px;
}
.gp-strength__bar {
    flex: 1; height: 4px; background: #efefef; border-radius: 2px;
    position: relative; overflow: hidden;
}
.gp-strength__bar::after {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0;
    width: 0%; transition: width .2s ease, background .2s ease;
}
.gp-strength__bar.s1::after { width: 33%; background: #ff5b3a; }
.gp-strength__bar.s2::after { width: 66%; background: #ffb02a; }
.gp-strength__bar.s3::after { width: 100%; background: #1abc9c; }
.gp-strength__label { font-size: 12px; min-width: 24px; text-align: right; color: #aaa; }
.gp-strength__label.l1 { color: #ff5b3a; }
.gp-strength__label.l2 { color: #ffb02a; }
.gp-strength__label.l3 { color: #1abc9c; }

/* 验证码行：输入框与图片同一行对齐 */
.gp-captcha-row { display: flex; gap: 10px; align-items: center; }
.gp-captcha-row .gp-input { flex: 1; }
.gp-captcha-img {
    width: 140px; height: 50px;
    border: 1px solid #e3e3e3;
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
    overflow: hidden;
    flex-shrink: 0;
}
.gp-captcha-img img { width: 100%; height: 100%; object-fit: contain; }
.gp-captcha-tip {
    margin-top: -8px;
    font-size: 12px;
    color: #999;
    text-align: right;
}
.gp-captcha-tip a { color: #4a90d9; }

/* 协议勾选 */
.gp-check {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12px; color: #888;
    cursor: pointer;
}
.gp-check input[type="checkbox"] {
    width: 14px; height: 14px;
    accent-color: #ff7a45;
    cursor: pointer;
}
.gp-check a { color: #4a90d9; }

/* 橙色登录按钮 */
.gp-btn--login {
    height: 44px;
    background: #ff7a45;
    border: none;
    border-radius: 6px;
    box-shadow: none;
    color: #fff;
    font-size: 16px;
    letter-spacing: 6px;
    font-weight: 500;
}
.gp-btn--login:hover {
    background: #ff6a2e;
    transform: none;
    box-shadow: none;
    color: #fff;
}
.gp-btn--login:active { background: #f15a1d; transform: none; box-shadow: none; }
.gp-btn--login:disabled { background: #ffb590; color: #fff; box-shadow: none; }

/* 表单提示 */
.gp-login .gp-form-msg { text-align: center; min-height: 16px; margin: -4px 0 0; }

/* 忘记密码 */
.gp-login__actions {
    display: flex; justify-content: flex-end;
    font-size: 12px;
}
.gp-login__actions a { color: #999; }
.gp-login__actions a:hover { color: #ff7a45; }

/* ---------- 下方 5 个功能模块 ---------- */
.gp-login__features-wrap {
    background: #ffffff;
    border-top: 1px solid #eee;
    padding: 46px 20px 54px;
}
.gp-login__features {
    max-width: 1180px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
}
@media (max-width: 880px) { .gp-login__features { grid-template-columns: repeat(2, 1fr); } }

.gp-feature {
    text-align: center;
    padding: 0 8px;
    background: none;
    border: none;
    box-shadow: none;
    border-radius: 0;
    cursor: pointer;
}
.gp-feature__icon {
    width: 58px; height: 58px;
    margin: 0 auto 12px;
    border-radius: 50%;
    border: 2px solid;
    background: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 24px;
    box-shadow: none;
}
.gp-feature__icon--green  { border-color: #37b58f; color: #37b58f; }
.gp-feature__icon--orange { border-color: #f5a623; color: #f5a623; }
.gp-feature__icon--purple { border-color: #8e6fc8; color: #8e6fc8; }
.gp-feature__icon--blue   { border-color: #4a90d9; color: #4a90d9; }
.gp-feature__icon--red    { border-color: #e05a4e; color: #e05a4e; }
.gp-feature__title { font-weight: 600; font-size: 14px; color: #333; margin-bottom: 5px; }
.gp-feature__desc  { font-size: 12px; color: #999; }