/* assets/css/auth.css —— 登录 / 注册 / 找回密码 共用样式
 *
 * 左侧品牌宣传 (.auth-hero) + 右侧表单 (.auth-form)
 * 依赖 style.css 的按钮 / 输入框基础样式，本文件只做认证页覆盖与增强。
 */

body.auth-body {
    background: #eef0f6;
}

.auth-split {
    display: grid;
    grid-template-columns: 1.02fr .98fr;
    min-height: 100vh;
}

/* ============================== 左侧品牌区 ============================== */

.auth-hero {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 52px 56px 40px;
    color: #fff;
    background: linear-gradient(152deg, #141d3f 0%, #1d2b58 40%, #33429c 78%, #4b3c8f 100%);
}
.auth-hero::before {
    content: '';
    position: absolute; inset: 0;
    opacity: .5;
    background-image:
        linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
    background-size: 32px 32px;
}
.auth-hero::after {
    content: '';
    position: absolute; inset: 0;
    background:
        radial-gradient(560px 260px at 92% -18%, rgba(201, 162, 94, .32), transparent 70%),
        radial-gradient(520px 300px at -14% 108%, rgba(96, 128, 255, .34), transparent 70%);
    pointer-events: none;
}
.auth-hero > * { position: relative; z-index: 1; }

.hero-inner { max-width: 520px; }

.hero-inner .brand {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: .22em;
    color: #fff;
    display: inline-block;
}
.hero-inner .brand:hover { color: #fff; }
.hero-inner .brand b { color: #c9a25e; }

.hero-tag {
    margin-top: 10px;
    font-size: 11px;
    letter-spacing: .34em;
    color: rgba(255, 255, 255, .42);
}

.auth-hero h1 {
    margin: 44px 0 16px;
    font: 800 40px/1.3 Georgia, "Noto Serif SC", "Songti SC", "SimSun", serif;
    letter-spacing: .01em;
    text-shadow: 0 3px 22px rgba(0, 0, 0, .35);
}
.auth-hero h1 .hl {
    background: linear-gradient(96deg, #ffe6b8, #c9a25e 58%, #ffd9a0);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    padding-right: .04em;
}
.auth-hero p {
    margin: 0;
    max-width: 470px;
    font-size: 14.5px;
    line-height: 2;
    color: rgba(255, 255, 255, .74);
}

.hero-list {
    list-style: none;
    padding: 0;
    margin: 34px 0 0;
    display: grid;
    gap: 17px;
    max-width: 500px;
}
.hero-list li { position: relative; padding-left: 22px; font-size: 14px; color: rgba(255, 255, 255, .82); line-height: 1.6; }
.hero-list li::before {
    content: '';
    position: absolute;
    left: 0; top: 7px;
    width: 8px; height: 8px;
    border-radius: 3px;
    background: linear-gradient(135deg, #ffd9a0, #c9a25e);
}

.hero-foot {
    margin-top: auto;
    padding-top: 30px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12.5px;
    color: rgba(255, 255, 255, .55);
}

/* ============================== 右侧表单区 ============================== */

.auth-form {
    /* column：让 .auth-card 与 .auth-foot 纵向排列（版权条在卡片下方，
       之前没写方向导致默认 row，版权被挤到卡片右侧） */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 26px;
    background: #f4f6fc;
    background-image:
        radial-gradient(620px 320px at 88% -10%, rgba(77, 94, 190, .14), transparent 70%),
        radial-gradient(520px 280px at -6% 104%, rgba(185, 138, 62, .1), transparent 70%);
}

.auth-card {
    width: 100%;
    max-width: 418px;
    background: #fff;
    border-radius: 24px;
    padding: 32px 34px 26px;
    box-shadow: 0 30px 66px -30px rgba(23, 32, 68, .45);
    border: 1px solid rgba(255, 255, 255, .7);
}

.auth-head { margin-bottom: 22px; }
.auth-head h1 {
    margin: 0 0 7px;
    font-size: 24px;
    font-weight: 800;
    letter-spacing: .01em;
    color: #232c4d;
}
.auth-head h1::before { display: none; }
.auth-head .hint,
.auth-head p { margin: 0; font-size: 13px; color: #8b93a8; }

/* ---- 表单 ---- */

.auth-card .field,
.auth-card label { display: block; margin-bottom: 16px; font-size: 13px; color: #4e5561; }
.auth-card .field span { display: block; margin-bottom: 6px; font-size: 13px; color: #4e5561; }
.auth-card label small { display: block; margin-top: 5px; font-size: 11.5px; color: #9aa2b5; }

.auth-card input[type=text],
.auth-card input[type=email],
.auth-card input[type=password] {
    height: 47px;
    padding: 0 15px;
    border-radius: 12px;
    font-size: 15px;
    background: #f8f9fe;
}
.auth-card .field input[type=text],
.auth-card .field input[type=email],
.auth-card .field input[type=password] { width: 100%; }
.auth-card input:focus { background: #fff; }

.auth-card .captcha-row { display: flex; align-items: center; gap: 9px; margin-top: 4px; }
/* 修复：field 下 100% 宽规则会把输入框撑满整行，把验证码图挤到容器外 */
.auth-card label.field .captcha-row input[type=text],
.auth-card .captcha-row input { width: 118px !important; height: 44px; flex: 0 0 auto; }
.auth-card .captcha-row img { height: 44px; border-radius: 8px; cursor: pointer; flex: 0 0 auto; }
.auth-card .captcha-refresh { font-size: 12.5px; color: #8b93a8; text-decoration: none; }
.auth-card .captcha-refresh:hover { color: #3d51b0; text-decoration: underline; }

.auth-card label.captcha { display: block; margin-bottom: 16px; }
.auth-card label.captcha > span,
.auth-card label.captcha { font-size: 13px; color: #4e5561; }

.auth-card button[type=submit] {
    width: 100%;
    height: 49px;
    border-radius: 12px;
    font-size: 15.5px;
    letter-spacing: .12em;
    margin-top: 4px;
    cursor: pointer;
}

.auth-card .flash { font-size: 13px; padding: 11px 14px; margin-bottom: 18px; border-radius: 10px; }

.auth-foot { margin-top: 20px; font-size: 13px; color: #8b93a8; text-align: center; }
.auth-foot a { font-weight: 600; }

/* 页脚版权条（auth_layout_footer 渲染）：宽度与登录卡片对齐 */
.auth-form > .auth-foot:last-child {
    width: 100%;
    max-width: 418px;
    margin-top: 22px;
    padding-top: 16px;
    border-top: 1px solid #eef0f6;
    text-align: center;
    font-size: 12px;
    line-height: 1.9;
    color: #b6bcc9;
}

/* ============================== 响应式 ============================== */

@media (max-width: 980px) {
    .auth-split { grid-template-columns: 1fr; }
    .auth-hero { padding: 34px 30px 30px; }
    .auth-hero h1 { margin: 26px 0 12px; font-size: 30px; }
    .hero-list { display: none; }
    .hero-foot { padding-top: 22px; }
    .auth-form { padding: 34px 20px 48px; }
}

@media (max-width: 560px) {
    .auth-hero { padding: 26px 22px 24px; }
    .auth-hero h1 { font-size: 25px; }
    .auth-hero p { font-size: 13.5px; }
    .auth-card { padding: 26px 22px 22px; border-radius: 20px; }
}