/* ============================================================
 *  登录 / 注册 页面样式（严格按 Figma 1:1 还原）
 *  画布固定宽度 393px（移动端设计稿宽度），配合 viewport 缩放
 * ============================================================ */

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { min-height: 100%; }

body {
    font-family: "PingFang SC", "Microsoft YaHei", -apple-system,
                 BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
    color: #333;
    background: #cfe0f2;
    display: flex;
    justify-content: center;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a { text-decoration: none; color: inherit; }
img { display: block; }

/* ---------------- 画布（手机屏） ---------------- */
.stage {
    position: relative;
    width: 393px;
    overflow: hidden;
    background-color: #ddebf9;                       /* 中部纯色底 */
    /* 背景图版本号请与 includes/functions.php 的 ASSET_VERSION 保持一致 */
    background-image: url(../img/top.png?v=2026090102), url(../img/bottom.png?v=2026090102);
    background-repeat: no-repeat, no-repeat;
    background-position: top center, bottom center;
    background-size: 393px 301px, 393px 139px;
}
.page-login    .stage { height: 866px; }
.page-register .stage { height: 871px; }

/* ---------------- 顶部：国徽 / 标题 / 副标题 ---------------- */
.emblem {
    position: absolute; top: 49px; left: 50%;
    transform: translateX(-50%);
    width: 99px; height: 102px;
}
.title {
    position: absolute; top: 151px; left: 0; right: 0;
    height: 39px; line-height: 39px; text-align: center;
    font-size: 25.7px; font-weight: 500; letter-spacing: .64px;
    color: #2f4c7e;
}
.subtitle {
    position: absolute; top: 195px; left: 0; right: 0;
    height: 25px; line-height: 25px; text-align: center;
    font-size: 16.7px; font-weight: 500; color: #8a939f;
}

/* ---------------- 白色卡片 ---------------- */
.card {
    position: absolute; top: 241px;
    background: rgba(255, 255, 255, .96);
}
.page-login .card {
    left: 24px; width: 345px; min-height: 363px;
    padding: 0 20px 14px;
    border-radius: 22px 22px 11px 11px;
    box-shadow: 0 10px 26px rgba(130, 48, 20, .05);
}
.page-register .card {
    left: 26px; width: 341px; min-height: 388px;
    padding: 0 20px 16px;
    border-radius: 27px 27px 10px 10px;
    box-shadow: 0 10px 26px rgba(128, 50, 21, .08);
}

/* 卡片标题 + 红色下划线 */
.card-title {
    text-align: center; font-weight: 500; position: relative;
}
.page-login .card-title {
    padding-top: 22px; font-size: 22px; color: #242424; line-height: 30px;
}
.page-register .card-title {
    padding-top: 19px; font-size: 18px; color: #1f1f1f; line-height: 27px;
}
.card-title::after {
    content: ""; display: block; margin: 7px auto 0;
    height: 3px; border-radius: 3px;
}
.page-login    .card-title::after { width: 25px; background: #df101a; }
.page-register .card-title::after { width: 24px; background: #d40b1a; margin-top: 5px; }

/* ---------------- 输入框 ---------------- */
.form { display: flex; flex-direction: column; }
.page-login    .form { padding-top: 20px; gap: 10px; }
.page-register .form { padding-top: 13px; gap: 9px; }

.field {
    display: flex; align-items: center; background: #fff;
}
.page-login .field {
    height: 48px; border: 1px solid #dedede; border-radius: 7px; padding: 0 14px;
}
.page-register .field {
    height: 39px; border: 1px solid #e4e0dc; border-radius: 6px; padding: 0 14px;
}
.field-icon { flex-shrink: 0; margin-right: 10px; }
.page-login    .field-icon { width: 23px; height: 23px; }
.page-register .field-icon { width: 20px; height: 20px; }

.field input {
    flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
    font-family: inherit; color: #333;
}
.page-login    .field input { font-size: 15px; }
.page-register .field input { font-size: 14px; }
.page-login    .field input::placeholder { color: #9a9a9a; }
.page-register .field input::placeholder { color: #aaa5a1; }
.field input::-webkit-outer-spin-button,
.field input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* 验证码：右侧“获取验证码”区域 */
.code-area {
    flex-shrink: 0; margin-left: 8px; cursor: pointer; user-select: none;
    display: flex; align-items: center; justify-content: center;
}
/* 登录页：浅红底按钮 */
.page-login .code-area {
    width: 82px; height: 34px; border-radius: 3px;
    background: #f3eded; color: #bd1b1f; font-size: 13px;
}
/* 注册页：纯文字 */
.page-register .code-area {
    color: #cf2028; font-size: 13px; padding-left: 6px;
}
/* 点击后显示的 4 位验证码 */
.code-area.is-code { color: #bd1b1f; font-weight: 600; letter-spacing: 3px; }
.page-register .code-area.is-code { color: #cf2028; }

/* 主按钮：立即登录 / 立即注册 */
.btn-primary {
    width: 100%; border: 0; cursor: pointer; color: #fff;
    font-family: inherit; text-align: center;
}
.page-login .btn-primary {
    height: 48px; border-radius: 6px;
    font-size: 21px; letter-spacing: 1px;
    background: linear-gradient(#eb101a, #d80711);
}
.page-register .btn-primary {
    height: 38px; border-radius: 5px; font-size: 17px;
    background: linear-gradient(#ed0816, #d80714);
    box-shadow: 0 3px 4px rgba(207, 0, 14, .18);
}

/* 登录页：注册账号 / 忘记密码 两个蓝色按钮 */
.card-links {
    display: flex; justify-content: space-between; margin-top: 8px;
}
.link-btn {
    width: 106px; height: 36px; border-radius: 10px; background: #637fef;
    color: #fff; font-size: 14px; display: flex;
    align-items: center; justify-content: center;
}

/* 注册页：已有账号？立即登录 */
.have-account {
    text-align: center; margin-top: 13px; font-size: 15px;
    font-weight: 500; color: #8a939f;
}
.have-account a { color: #0766ee; }

/* ---------------- 卡片下方公共区域 ---------------- */
.contact, .agree, .app-btn {
    position: absolute; left: 0; right: 0;
    display: flex; align-items: center; justify-content: center;
}
.contact { gap: 7px; color: #222; font-size: 16px; }
.contact img { width: 20px; height: 20px; }

.agree { gap: 7px; }
.agree .box {
    width: 15px; height: 15px; border: 4px solid #df101a;
    border-radius: 50%; background: #fff; box-sizing: border-box;
    position: relative; cursor: pointer; flex-shrink: 0;
}
.agree input { display: none; }
.agree input:checked + .box::after {
    content: ""; position: absolute; inset: 1px;
    border-radius: 50%; background: #df101a;
}
.agree .agree-txt { font-size: 12px; color: #999; }
.agree .agree-txt label { cursor: pointer; }
.agree .agreement-link { color: #c62125; cursor: pointer; }

.app-btn {
    gap: 7px; width: 130px; height: 34px; left: 50%; right: auto;
    transform: translateX(-50%); border-radius: 18px;
    background: linear-gradient(#e90716, #c90a13);
    color: #fff; font-size: 14px;
}
.app-btn img { width: 15px; height: 15px; }

/* 各页面下方元素的纵向定位 */
.page-login    .contact { top: 614px; }
.page-login    .agree   { top: 646px; }
.page-login    .app-btn { top: 675px; }
.page-register .contact { top: 640px; }
.page-register .agree   { top: 667px; }
.page-register .app-btn { top: 693px; }

/* ---------------- 底部备案文字 ---------------- */
.footer {
    position: absolute; left: 0; right: 0; text-align: center;
    font-size: 11px; line-height: 20px;
}
.page-login    .footer { top: 764px; }
.page-register .footer { top: 769px; }
.footer .c1 { color: #2f4c7e; }
.footer .c2 { color: #8a939f; }

/* ---------------- 顶部轻提示（验证码/错误信息） ---------------- */
.toast {
    position: fixed; left: 50%; top: 40px; transform: translateX(-50%);
    max-width: 320px; padding: 10px 18px; border-radius: 8px;
    background: rgba(0, 0, 0, .8); color: #fff; font-size: 14px;
    z-index: 999; opacity: 0; transition: opacity .25s; pointer-events: none;
    text-align: center;
}
.toast.show { opacity: 1; }

/* ---------------- 用户服务协议 弹窗 ---------------- */
.agreement-mask {
    position: fixed; inset: 0; z-index: 1000;
    background: rgba(0, 0, 0, .5);
    display: none; align-items: center; justify-content: center;
    padding: 24px 16px;
}
.agreement-mask.show { display: flex; }
.agreement-dialog {
    width: 100%; max-width: 340px; max-height: 78vh;
    background: #fff; border-radius: 14px; overflow: hidden;
    display: flex; flex-direction: column;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .28);
    animation: agreement-pop .2s ease-out;
}
@keyframes agreement-pop {
    from { transform: scale(.9); opacity: 0; }
    to   { transform: scale(1);  opacity: 1; }
}
.agreement-head {
    position: relative; flex-shrink: 0;
    padding: 15px 40px; text-align: center;
    font-size: 17px; font-weight: 600; color: #242424;
    border-bottom: 1px solid #f0f0f0;
}
.agreement-x {
    position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
    width: 28px; height: 28px; line-height: 26px; text-align: center;
    font-size: 22px; color: #999; cursor: pointer; border-radius: 50%;
}
.agreement-x:active { background: #f2f2f2; }
.agreement-body {
    flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
    padding: 16px 18px; font-size: 13px; line-height: 22px; color: #555;
}
.agreement-body .agreement-intro { margin-bottom: 10px; text-align: justify; }
.agreement-body h4 { margin: 14px 0 6px; font-size: 14px; color: #c62125; }
.agreement-body p { margin-bottom: 7px; text-align: justify; }
.agreement-foot { flex-shrink: 0; padding: 12px 16px 16px; border-top: 1px solid #f0f0f0; }
.agreement-btn {
    width: 100%; height: 44px; border: 0; border-radius: 8px;
    color: #fff; font-size: 16px; font-family: inherit; cursor: pointer;
    background: linear-gradient(#eb101a, #d80711);
}
.agreement-btn:active { opacity: .92; }