/* ================= 注册页独立样式（register.html 专用） ================= */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: "Microsoft YaHei", "PingFang SC", "Helvetica Neue", Arial, sans-serif;
    background-color: #f5f7fa;
    color: #333;
    min-height: 100vh;
}

/* ===== 顶部：左侧品牌展示（不可点）+ 右侧对称的"返回首页"链接 ===== */
/* 背景与首页一致（#f5f7fa 微灰），不做白色通栏，保持整页色调统一 */
.reg-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1320px;
    margin: 0 auto;
    padding: 20px 32px;
    background: transparent;
}

/* 品牌区：纯展示，不是链接，点击无跳转 */
.reg-brand {
    display: flex;
    align-items: center;
}

.reg-logo-img {
    width: 44px;
    height: 44px;
    object-fit: contain;
    margin-right: 12px;
    flex-shrink: 0;
}

.reg-brand-name {
    font-size: 32px;
    font-weight: 700;
    color: #1677ff;
    letter-spacing: 2px;
}

/* 右侧"返回首页"链接：与左侧品牌区垂直居中对齐 */
.reg-back {
    font-size: 15px;
    color: #333;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.2s;
}

.reg-back:hover {
    color: #1677ff;
}

/* ===== 注册卡片：页面居中 ===== */
.reg-main {
    display: flex;
    justify-content: center;
    padding: 48px 16px 64px;
}

.reg-card {
    width: 100%;
    max-width: 440px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(15, 35, 95, 0.06);
    padding: 40px 44px 44px;
}

/* 标题行：左"免费注册"，右侧同行小字"已注册?点我登录" */
.reg-title-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 34px;
}

.reg-title {
    font-size: 26px;
    font-weight: 700;
    color: #1a2233;
}

/* 右侧小字提示：小一号灰字，链接为主题蓝 */
.reg-title-tip {
    font-size: 13px;
    color: #9aa4b2;
}

.reg-title-tip a {
    color: #1677ff;
    text-decoration: none;
}

.reg-title-tip a:hover {
    text-decoration: underline;
}

/* ===== 浮动标签输入框（轮廓式，Material 风格）=====
   未聚焦且无内容：灰色标签浮在输入框内部（占位符效果）
   聚焦或已输入内容：标签上移，横骑在输入框上边框线上（白底垫片遮住线条）
   实现要点：input 的 placeholder 设为一个空格，配合 :placeholder-shown
   纯 CSS 判断"框里是否已有内容"，无需 JS 管理标签状态 */
.float-field {
    position: relative;
    margin-bottom: 26px;
}

.float-input {
    width: 100%;
    height: 50px;
    padding: 0 14px;
    font-size: 15px;
    font-family: inherit;
    color: #333;
    background: #fff;
    border: 1px solid #cfd8e3;
    border-radius: 6px;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.float-input:focus {
    border-color: #1677ff;
    box-shadow: 0 0 0 3px rgba(22, 119, 255, 0.12);
}

.float-label {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    padding: 0 4px;               /* 左右垫片：上浮后遮住标签下面的边框线 */
    font-size: 15px;
    color: #9aa4b2;
    background: #fff;
    pointer-events: none;         /* 点击标签时事件穿透给输入框 */
    cursor: text;
    transition: top 0.18s ease, font-size 0.18s ease, color 0.18s ease;
}

/* 聚焦 或 已有内容 → 标签上浮，坐到输入框上边框线上 */
.float-field:focus-within .float-label,
.float-input:not(:placeholder-shown) + .float-label {
    top: 0;
    font-size: 12px;
}

/* 聚焦时标签变主题蓝 */
.float-field:focus-within .float-label {
    color: #1677ff;
}

/* 必填红星 */
.req-star {
    color: #ff4d4f;
    margin-left: 2px;
}

/* ===== 称谓单选组（先生/女士） ===== */
.gender-field {
    display: flex;
    align-items: center;
    gap: 20px;
    height: 50px;
    margin-bottom: 26px;
}

/* 左侧标签：与浮动标签未上浮时同字号同色，视觉对齐输入框 */
.gender-label {
    font-size: 15px;
    color: #9aa4b2;
    flex-shrink: 0;
}

.gender-option {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

/* 隐藏原生圆点，用自定义圆圈样式（选中为主题蓝） */
.gender-option input {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    margin: 0;
    border: 1.5px solid #cfd8e3;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.gender-option input:checked {
    border-color: #1677ff;
    box-shadow: 0 0 0 3px rgba(22, 119, 255, 0.12);
}

/* 选中后的内圆点 */
.gender-option input:checked::after {
    content: "";
    display: block;
    width: 9px;
    height: 9px;
    margin: 2.7px auto;
    border-radius: 50%;
    background: #1677ff;
}

.gender-text {
    font-size: 15px;
    color: #333;
}

/* ===== 提示信息（校验错误红 / 成功绿） ===== */
.reg-msg {
    min-height: 20px;
    font-size: 13px;
    color: #ff4d4f;
    text-align: center;
    margin-bottom: 8px;
}

.reg-msg.ok {
    color: #22c55e;
}

/* ===== 提交按钮 ===== */
.reg-submit {
    width: 100%;
    height: 46px;
    border: none;
    border-radius: 6px;
    background: #1677ff;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    font-family: inherit;
    letter-spacing: 6px;   /* 四字按钮的均匀字距 */
    text-indent: 6px;      /* 抵消末字后的字距，保证视觉居中 */
    cursor: pointer;
    transition: background 0.2s;
}

.reg-submit:hover {
    background: #3c8dff;
}

.reg-submit:active {
    background: #0e5fd8;
}

.reg-submit:disabled {
    background: #9ec4ff;
    cursor: not-allowed;
}

/* ===== 登录页底部"去注册"切换 ===== */
.login-switch {
    margin-top: 18px;
    font-size: 14px;
    color: #666;
    text-align: center;
}

.login-switch a {
    color: #1677ff;
    text-decoration: none;
}

.login-switch a:hover {
    text-decoration: underline;
}

/* ===== 手机端适配 ===== */
@media (max-width: 480px) {
    .reg-header {
        padding: 14px 16px;
    }

    .reg-logo-img {
        width: 34px;
        height: 34px;
    }

    .reg-brand-name {
        font-size: 24px;
    }

    .reg-main {
        padding: 24px 12px 40px;
    }

    .reg-card {
        padding: 28px 20px 32px;
        border-radius: 10px;
    }

    .reg-title {
        font-size: 22px;
        margin-bottom: 26px;
    }
}