@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: 0.34rem;
    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;
}

.icp {
    position: absolute;
    left: 0;
    bottom: 0.05rem;
    width: 100%;
    height: 0.949rem;
    line-height: 0.949rem;
    text-align: center;
    font-size: 0.317rem;
    color: #fde3b4;
    white-space: nowrap;
}

/* ==========================================================
 * 注册页专属坐标
 * ========================================================== */
.p-reg .top-btn--service {
    left: 0.31rem;
}

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

.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;
}

.p-reg .switch-link {
    top: 16.565rem;
}

/* ==========================================================
 * 登录页专属坐标
 * ========================================================== */
.p-login .top-btn--service {
    left: 0.43rem;
}

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

.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;
}

.p-login .switch-link {
    top: 15.59rem;
}

/* ==========================================================
 * 轻提示 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;
}