/* ============================================================
   易渡官网 · 注册 / 邀请注册表单样式
   约束（与 download.css 同纪律）：
   - 只引用 style.css :root 已声明的变量，不自造色值
   - 新增类全部 fm- 前缀，避免与 style.css / download.css 撞名
   - 错误提示不用红色（:root 没有 error 色变量）：
     「⚠ 图标 + 正文色加粗 + aria-invalid/role=alert」传达错误语义
   ============================================================ */

/* 表单卡片：白底浮在浅灰 section 上 */
.fm-form {
    max-width: 520px;
    margin: 0 auto;
    padding: 32px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    display: flex;
    flex-direction: column;
    gap: 18px;
    text-align: left;
}

.fm-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.fm-field label {
    font-size: var(--fs-small);
    font-weight: 500;
    color: var(--text);
}

/* 必填星号：用 --accent 而非红色，位置紧跟标签已足够表意 */
.fm-req {
    color: var(--accent);
}

.fm-field input,
.fm-field textarea {
    padding: 12px 16px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    font-size: var(--fs-body);
    font-family: inherit;
    background: var(--bg);
    color: var(--text);
    transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}

.fm-field input:focus,
.fm-field textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-glow);
}

.fm-field textarea {
    resize: vertical;
    min-height: 96px;
}

.fm-field input::placeholder,
.fm-field textarea::placeholder {
    color: var(--text-dim);
}

/* 邀请码输入框：等宽字体 + 大写 + 字距，INV-XXXX-XXXX-XXXX 一眼可辨 */
.fm-field input.fm-invite-code {
    font-family: 'Geist Mono', ui-monospace, monospace;
    letter-spacing: .08em;
    text-transform: uppercase;
}

/* 从 URL 带入邀请码时的确认条：告诉用户「链接里的码已自动填好」 */
.fm-invite-banner {
    padding: 10px 16px;
    background: var(--accent-dim);
    border-radius: var(--radius-sm);
    font-size: var(--fs-small);
    color: var(--text);
}

/* 字段级错误文案：⚠ 图标 + 加粗传达错误，不靠颜色 */
.fm-field-err {
    margin: 0;
    font-size: var(--fs-small);
    font-weight: 500;
    color: var(--text);
}

.fm-field-err::before {
    content: "⚠ ";
}

/* 表单级消息条：后端 msg（参数不合法 / 邀请码无效 / 限流）与网络错误统一落这里 */
.fm-form-msg {
    margin: 0;
    padding: 10px 16px;
    background: var(--bg-soft);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    font-size: var(--fs-small);
    color: var(--text);
}

/* pending 态：提交中禁用，压掉 .btn-primary:hover 的位移与阴影 */
.fm-form .btn:disabled {
    opacity: .6;
    cursor: not-allowed;
}

.fm-form .btn:disabled:hover {
    transform: none;
    box-shadow: none;
}

.fm-note {
    margin: 0;
    font-size: var(--fs-micro);
    color: var(--text-dim);
    text-align: center;
}

/* 表单下方的交叉引导：注册 ↔ 邀请注册 ↔ 登录后台 */
.fm-cross {
    max-width: 520px;
    margin: 20px auto 0;
    text-align: center;
    font-size: var(--fs-small);
    color: var(--text-mute);
}

.fm-cross a {
    color: var(--accent);
    text-decoration: none;
}

.fm-cross a:hover {
    text-decoration: underline;
}

/* 成功态卡片：与表单同宽同底，替换后不引起布局跳动 */
.fm-success {
    max-width: 520px;
    margin: 0 auto;
    padding: 48px 32px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    text-align: center;
}

.fm-success-icon {
    font-size: 40px;
    line-height: 1;
    margin-bottom: 12px;
}

.fm-success-title {
    font-size: var(--fs-h3);
    font-weight: 600;
    margin-bottom: 8px;
}

.fm-success-sub {
    font-size: var(--fs-small);
    color: var(--text-mute);
    margin-bottom: 24px;
}

@media (max-width: 560px) {
    .fm-form,
    .fm-success {
        /* 小屏收窄卡片内边距，给输入框留足可点宽度 */
        padding-left: 20px;
        padding-right: 20px;
    }
}