@charset "utf-8";
/* ==========================================================
 * 登录 / 注册页样式
 *
 * 还原方式：设计稿 1080 x 1920（Figma）
 *   1rem = 100 设计像素，html 的 font-size 由 js/rem.js 动态计算
 *   （= 页面宽度 / 10.8），因此所有元素与设计稿等比例，
 *   从 320px 的小屏到 430px 的大屏手机、折叠屏、平板都是 1:1 版式。
 *   写法：设计稿像素 ÷ 100 = rem 值（如 790px -> 7.9rem）
 *
 * 兼容：纯绝对定位，不依赖 flex / grid；配 -webkit- 前缀；
 *       背景大图与按钮均使用 <img>，不依赖 background-size。
 * ========================================================== */

/* JS 未执行时的兜底（支持 vw 的内核）：100 / 10.8 = 9.2593vw */
html {
    font-size: 9.2593vw;
}

html, body {
    height: 100%;
}

body {
    background-color: #800301;
}

/* ---------------------------------------------------------
 * 舞台：宽度恒等于 10.8rem（即设计稿 1080），水平居中
 * ------------------------------------------------------- */
.stage {
    position: relative;
    width: 10.8rem;
    margin: 0 auto;
    min-height: 100%;
    background-color: #800301;
    overflow: hidden;
}

/* 整屏背景图（在文档流内，用于撑开舞台高度 1918/100 = 19.18rem） */
.stage-bg {
    display: block;
    width: 10.8rem;
    height: 19.18rem;
}

/* ---------------------------------------------------------
 * 顶部：在线客服 / 下载APP
 * ------------------------------------------------------- */
.top-btn {
    position: absolute;
    /* top 由 .p-login / .p-reg 指定 —— 这两个按钮已从页面顶部移到
       「立即注册 / 立即登录」那行的上方，两页的纵向位置不同。 */
    width: 2.52rem;
    height: 0.82rem;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    background-color: #fbf1e3;
    border: 0.02rem solid #f0cfae;
    -webkit-border-radius: 0.495rem;
    border-radius: 0.495rem;
}

.top-btn__ico {
    position: absolute;
    top: 0.19rem;
    display: block;
}

.top-btn__txt {
    position: absolute;
    top: 0;
    height: 0.82rem;
    line-height: 0.82rem;
    font-size: 0.317rem;
    font-weight: 600;
    color: #b10000;
    white-space: nowrap;
}

.top-btn--service .top-btn__ico {
    left: 0.31rem;
    width: 0.42rem;
    height: 0.45rem;
}

.top-btn--service .top-btn__txt {
    left: 0.89rem;
}

.top-btn--app .top-btn__ico {
    left: 0.4rem;
    width: 0.28rem;
    height: 0.45rem;
}

.top-btn--app .top-btn__txt {
    left: 0.9rem;
}

/* ---------------------------------------------------------
 * 输入框
 * ------------------------------------------------------- */
.field {
    position: absolute;
    width: 7.9rem;
    height: 0.99rem;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    background-color: #fbf1e3;
    border: 0.02rem solid #f0cfae;
    -webkit-border-radius: 0.14rem;
    border-radius: 0.14rem;
}

.field.is-focus {
    border-color: #e2b389;
}

.field__ico {
    position: absolute;
    top: 50%;
    display: block;
}

.ico-phone {
    width: 0.32rem;
    height: 0.5rem;
    margin-top: -0.25rem;
}

.ico-lock {
    width: 0.4rem;
    height: 0.45rem;
    margin-top: -0.225rem;
}

.ico-invite {
    width: 0.46rem;
    height: 0.35rem;
    margin-top: -0.175rem;
}

.ico-shield {
    width: 0.48rem;
    height: 0.56rem;
    margin-top: -0.28rem;
}

.field__input {
    display: block;
    width: 100%;
    height: 0.99rem;
    line-height: 0.99rem\9;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border: 0;
    background: transparent;
    font-size: 0.404rem;
    color: #5c3410;
}

.field__input::-webkit-input-placeholder {
    color: #976c45;
}

.field__input:-moz-placeholder {
    color: #976c45;
}

.field__input::-moz-placeholder {
    color: #976c45;
}

.field__input:-ms-input-placeholder {
    color: #976c45;
}

/* 密码显示 / 隐藏 */
.field__eye {
    position: absolute;
    top: 0;
    right: 0;
    height: 0.99rem;
    background: none;
    border: 0;
}

.field__eye img {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0.44rem;
    height: 0.25rem;
    margin: -0.125rem 0 0 -0.22rem;
}

/* 默认：密码隐藏（闭眼图标）；点击后显示密码（睁眼图标） */
.field__eye .eye-on {
    display: none;
}

.field__eye.is-on .eye-off {
    display: none;
}

.field__eye.is-on .eye-on {
    display: block;
}

/* ---------------------------------------------------------
 * 图形验证码
 * ------------------------------------------------------- */
.captcha-box {
    position: absolute;
    width: 2.6rem;
    height: 1.02rem;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    background-color: #fffdf8;
    border: 0.02rem solid #f0cfae;
    -webkit-border-radius: 0.12rem;
    border-radius: 0.12rem;
    overflow: hidden;
}

.captcha-box img {
    display: block;
    width: 100%;
    height: 100%;
}

/* ---------------------------------------------------------
 * 提交按钮（文字已在图片中，1:1 使用设计稿素材）
 * ------------------------------------------------------- */
.btn-submit {
    position: absolute;
    display: block;
    padding: 0;
    border: 0;
    background: none;
}

.btn-submit img {
    display: block;
    width: 100%;
    height: 100%;
}

.btn-submit.is-active img,
.btn-submit:active img {
    opacity: 0.82;
    filter: alpha(opacity=82);
}

.btn-submit.is-loading {
    opacity: 0.7;
    filter: alpha(opacity=70);
}

/* ---------------------------------------------------------
 * 底部切换链接 / 备案号
 * ------------------------------------------------------- */
.switch-link {
    position: absolute;
    left: 0;
    width: 100%;
    height: 1.159rem;
    line-height: 1.159rem;
    text-align: center;
    font-size: 0.387rem;
    font-weight: 600;
    color: #744621;
    white-space: nowrap;
}

.switch-link a {
    color: #d70000;
    text-decoration: underline;
}

/* 底部备案信息：4 行，一行一个 <span class="icp__ln">（见 includes/functions.php 的 icp_html()）
 *
 * ⚠ 真正的瓶颈是纵向空间，不是行宽。
 *   设计稿给页脚只留了 1.456rem（原本就一行字）：
 *     注册页「已有账号？立即登录」底边 17.724，背景图底边 19.18。
 *   最紧的机型是 iPhone SE（375x667 -> 视口 19.21rem，正好等于背景图高度，
 *   .stage 的 min-height:100% 撑不出额外空间）：可用 1.436rem。
 *   塞 4 行 -> 行高上限 0.359rem。取 0.34rem，共 1.36rem，余 0.076rem。
 *   —— 所以怎么拆行都救不了字号，只能让"能读的中文行"尽量大、
 *      "没人逐字读的编号行"单独缩小。
 */
.icp {
    position: absolute;
    left: 0;
    bottom: 0.05rem;
    width: 100%;
    padding: 0 0.1rem;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    text-align: center;
    color: #fde3b4;
}

.icp__ln {
    display: block;
    line-height: 0.34rem;
    font-size: 0.3rem;      /* 三行中文，10.8px，接近原来的 11.4px */
    white-space: nowrap;
}

/* 备案编号那行 58 字（含 35 个半角字符），横向才是它的瓶颈：
 * 在实测最宽的中文字体下，0.225rem 排出来约 991px，可用 1060px，留 4.7% 余量。
 * CJK 部分字宽是确定的（恒为 1em），机型差异只来自那 35 个半角字符，所以余量够。
 * 保持 nowrap 是为了锁死 4 行版式 —— 一旦折行变 5 行，
 * 在 iPhone SE 上就会顶到「已有账号？立即登录」那行。 */
.icp__ln--long {
    font-size: 0.225rem;
}

/* ==========================================================
 * 注册页专属坐标
 * ========================================================== */
/* 背景图重做：把米色卡片内部 y920~1527 那段纯色区纵向拉伸了 0.94rem，
 * 1918 -> 2012。目的是把卡片下边界从 17.66 推到 18.60，
 * 好让下移后的「已有账号？立即登录」文字（中心 18.08）仍落在米色卡片上 ——
 * 只加长底部红绸是没用的，卡片下边界不会动。
 * 代价：矮屏（iPhone SE 视口 19.21rem）上页面会多出约 0.9rem 滑动。 */
.p-reg .stage-bg {
    height: 20.12rem;
}

/* 两个按钮：提交按钮底 16.59 -> 留 0.05 -> 按钮 16.64~17.46 */
.p-reg .top-btn {
    top: 16.64rem;
}

/* 居中成组，与登录页同一组坐标（原来是最左 0.31 / 最右 7.89） */
.p-reg .top-btn--service {
    left: 2.66rem;
}

.p-reg .top-btn--app {
    left: 5.62rem;
}

.p-reg .field {
    left: 1.44rem;
}

.p-reg .field__input {
    padding: 0 0.45rem 0 1.1rem;
}

.p-reg .field--pwd .field__input {
    padding-right: 1.25rem;
}

.p-reg .field--phone {
    top: 9.45rem;
}

.p-reg .field--pwd1 {
    top: 10.67rem;
}

.p-reg .field--pwd2 {
    top: 11.89rem;
}

.p-reg .field--invite {
    top: 13.07rem;
}

.p-reg .field--captcha {
    top: 14.27rem;
    width: 5.13rem;
}

.p-reg .ico-phone {
    left: 0.36rem;
}

.p-reg .ico-lock {
    left: 0.32rem;
}

.p-reg .ico-invite {
    left: 0.29rem;
}

.p-reg .ico-shield {
    left: 0.28rem;
}

.p-reg .field__eye {
    width: 1.14rem;
}

.p-reg .captcha-box {
    left: 6.74rem;
    top: 14.26rem;
}

.p-reg .btn-submit {
    left: 1.45rem;
    top: 15.52rem;
    width: 7.86rem;
    height: 1.07rem;
}

/* 原 16.565，为上方的两个按钮让位后下移到 17.50（文字中心 18.08，
   米色卡片已拉伸到 18.60，仍在卡片内） */
.p-reg .switch-link {
    top: 17.5rem;
}

/* ==========================================================
 * 登录页专属坐标
 * ========================================================== */
/* 背景图同样重做：米色卡片内部 y928~1439 那段纵向拉伸 0.50rem，1918 -> 1968，
 * 卡片下边界 16.73 -> 17.23。
 * ⚠ 只按"行盒中心"算是不够的：switch-link 字号 0.387，字形墨迹上下各约 0.165rem，
 *   不拉伸时文字下沿会压到 16.80，越过卡片边界 16.73 落在红绸上，深棕字看不清。 */
.p-login .stage-bg {
    height: 19.68rem;
}

/* 两个按钮：提交按钮底 15.17 -> 留 0.05 -> 按钮 15.22~16.04 */
.p-login .top-btn {
    top: 15.22rem;
}

/* 两个按钮居中成组：2.52 x2 + 间隙 0.44 = 5.48，两侧各留 2.66
   （原来分别贴在最左 0.43 / 最右 8.01，移到「立即注册」上方后改为居中） */
.p-login .top-btn--service {
    left: 2.66rem;
}

.p-login .top-btn--app {
    left: 5.62rem;
}

.p-login .field {
    left: 1.5rem;
}

.p-login .field__input {
    padding: 0 0.45rem 0 1.13rem;
}

.p-login .field--pwd .field__input {
    padding-right: 1.35rem;
}

.p-login .field--phone {
    top: 9.53rem;
}

.p-login .field--pwd1 {
    top: 11.03rem;
}

.p-login .field--captcha {
    top: 12.53rem;
    width: 5.12rem;
}

.p-login .ico-phone {
    left: 0.39rem;
}

.p-login .ico-lock {
    left: 0.35rem;
}

.p-login .ico-shield {
    left: 0.31rem;
}

.p-login .field__eye {
    width: 1.26rem;
}

.p-login .captcha-box {
    left: 6.8rem;
    top: 12.51rem;
}

.p-login .btn-submit {
    left: 1.52rem;
    top: 14.01rem;
    width: 7.85rem;
    height: 1.16rem;
}

/* 原 15.59，为上方的两个按钮让位后下移到 16.08
   （文字中心 16.66，墨迹下沿 16.83，米色卡片已拉伸到 17.23，余 0.40） */
.p-login .switch-link {
    top: 16.08rem;
}

/* ==========================================================
 * 轻提示 Toast
 * ========================================================== */
/* 外层满宽 + 内层 inline-block：无论文案多长都精准居中，
   不用 transform，旧内核同样生效 */
.toast {
    position: fixed;
    left: 0;
    top: 45%;
    z-index: 9999;
    width: 100%;
    text-align: center;
    display: none;
    pointer-events: none;
}

.toast.is-show {
    display: block;
}

.toast__box {
    display: inline-block;
    *display: inline;
    *zoom: 1;
    max-width: 7.6rem;
    padding: 0.28rem 0.44rem;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    text-align: center;
    font-size: 0.34rem;
    line-height: 1.5;
    color: #fff6e0;
    background-color: rgba(74, 8, 8, 0.92);
    background-color: #4a0808\9;
    -webkit-border-radius: 0.16rem;
    border-radius: 0.16rem;
    -webkit-box-shadow: 0 0.04rem 0.2rem rgba(0, 0, 0, 0.3);
    box-shadow: 0 0.04rem 0.2rem rgba(0, 0, 0, 0.3);
    word-break: break-all;
}