/* ===== 雄安 公共样式 =====
 * 设计稿原尺寸: 750 x 1624 (2x)  对应逻辑尺寸: 375 x 812
 * 基准字号: 1rem = 100vw / 37.5  (即 375px 宽时 1rem = 10px)
 * 所有尺寸均以 rem 表达，保证在不同手机尺寸上等比缩放
 * ============================ */

*, *::before, *::after {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

html {
    font-size: calc(100vw / 37.5);
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}
/* 小屏不至于过小，超大屏不至于过大 */
@media (min-width: 480px) {
    html { font-size: 12.8px; } /* 对应 480px */
}
@media (min-width: 600px) {
    html { font-size: 14px; }
}

html, body {
    margin: 0;
    padding: 0;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #fff;
    background-color: #0d1a5a;
    min-height: 100vh;
    min-height: 100dvh;
    overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
input, button { font-family: inherit; }

.page {
    position: relative;
    width: 100%;
    max-width: 48rem;
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0 auto;
    padding: 0 1.4rem;
    /* 预留底部 bottom-nav(fixed) 的高度，避免被遮挡 */
    padding-bottom: calc(13rem + env(safe-area-inset-bottom));
    background-image: url('../images/bg.jpg');
    background-size: 100% auto;
    background-position: top center;
    background-repeat: no-repeat;
    background-color: #0d1a5a;
}

/* ===== 顶部 Logo ===== */
.hero {
    padding-top: 7.1rem;
    display: flex;
    justify-content: center;
}
.hero-logo {
    display: block;
    width: 28rem;
    height: auto;
    max-width: 80%;
}

/* ===== 卡片外壳 ===== */
.card-wrap {
    position: relative;
    margin: 13.8rem auto 0;
    width: 34.7rem;
    max-width: 100%;
}

/* 顶部 tab 栏：SVG 背景 + 文字覆盖
 * 设计稿 fLgzk: 367.1 x 89，主体 347 宽 + 右下 swoosh 延伸 20
 * 我们按 viewBox 694 x 89 绘制整条 bar（含两个 tab 50/50 + 右下 swoosh）
 * 注册页通过 scaleX(-1) 得到镜像，保证"主体 + 耳朵"方向正确 */
.card-header {
    position: relative;
    width: 100%;
    /* 以 card 宽 347 : 高 44.5 比例，取稍高于完美比例便于放字 */
    aspect-ratio: 694 / 89;
    filter: drop-shadow(0 0.2rem 0.4rem rgba(0, 0, 0, 0.12));
}
.tab-bar-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}
.tabs {
    position: absolute;
    inset: 0;
    display: flex;
    z-index: 2;
}
.tab {
    flex: 1 1 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.8rem;
    letter-spacing: 0.08em;
    cursor: pointer;
    /* 主体占 80/89 ≈ 89.9% 高度，文字向上偏移一点点居于主体中央 */
    padding-bottom: 1rem;
    box-sizing: border-box;
}
.tab--active {
    color: #111;
}

.card {
    position: relative;
    background: #fff;
    padding: 2.4rem 1.8rem 2.6rem;
    border-radius: 0 0 1rem 1rem;
    margin-top: -0.1rem; /* 与 tab 主体底边无缝衔接 */
    z-index: 1;
}
.card--login {
    min-height: 27rem;
}
.card--register {
    min-height: 37.5rem;
}

/* ===== 表单通用 ===== */
.form {
    margin: 0;
    padding: 0;
}
.field {
    display: flex;
    align-items: center;
    height: 4rem;
    padding: 0 1.6rem;
    margin-bottom: 1.2rem;
    background: #eee9e9;
    border-radius: 99rem;
    gap: 0.8rem;
    position: relative;
}
.field__icon {
    flex: 0 0 auto;
    width: 1.8rem;
    height: 1.8rem;
    color: #6f6e6e;
    display: flex;
    align-items: center;
    justify-content: center;
}
.field__icon svg,
.field__icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
.field input {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    border: 0;
    background: transparent;
    outline: none;
    font-size: 1.4rem;
    color: #333;
}
.field input::placeholder {
    color: #8e8d8d;
}

/* 尾部带验证码图 */
.field--with-suffix {
    padding-right: 0.4rem;
}
.field__captcha {
    flex: 0 0 auto;
    height: 2.8rem;
    width: 8.5rem;
    object-fit: cover;
    border-radius: 0.4rem;
    cursor: pointer;
    background: #d9d9d9;
    user-select: none;
}

/* 表单错误提示 */
.form-msg {
    min-height: 1.6rem;
    font-size: 1.2rem;
    color: #e53935;
    padding: 0 1rem;
    margin: -0.4rem 0 0.6rem;
    line-height: 1.4;
}
.form-msg.is-success { color: #2e7d32; }

/* ===== 主按钮 ===== */
.btn-primary {
    display: block;
    width: 100%;
    height: 4rem;
    border: 0;
    margin-top: 0.6rem;
    border-radius: 99rem;
    background: linear-gradient(180deg, #325df9 0%, #1e3897 100%);
    color: #fff;
    font-size: 1.8rem;
    letter-spacing: 0.4em;
    box-shadow: 0 0.4rem 0.7rem rgba(0, 0, 0, 0.25);
    cursor: pointer;
    transition: opacity .15s, transform .1s;
}
.btn-primary:active {
    transform: translateY(1px);
    opacity: 0.95;
}
.btn-primary[disabled] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ===== 底部三圆入口 ===== */
.bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: 48rem;
    margin: 0 auto;
    display: flex;
    justify-content: space-around;
    padding: 1.6rem 3rem;
    padding-bottom: calc(1.6rem + env(safe-area-inset-bottom));
    z-index: 10;
    pointer-events: none;
}
.bottom-nav .nav-item {
    pointer-events: auto;
}
.nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.8rem;
    flex: 0 0 auto;
}
.nav-icon {
    width: 6rem;
    height: 6rem;
    border-radius: 50%;
    background: linear-gradient(180deg, #325df9 0%, #1e3897 100%);
    border: 0.25rem solid #fff;
    box-shadow: 0 0.4rem 0.7rem rgba(0, 0, 0, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
}
.nav-icon img {
    width: 56%;
    height: 56%;
    object-fit: contain;
}
.nav-item span {
    font-size: 1.3rem;
    color: #fff;
    letter-spacing: 0.05em;
}

/* ===== 窄高度屏幕（例如老机型） ===== */
@media (max-height: 680px) {
    .hero { padding-top: 3.6rem; }
    .card-wrap { margin-top: 3rem; }
}
/* 对非常小的屏幕再收紧 */
@media (max-width: 320px) {
    .tab { font-size: 1.6rem; }
    .field input { font-size: 1.3rem; }
    .btn-primary { font-size: 1.6rem; }
}