/* ===== 会员登录 / 注册 页面 ===== */

.auth-section {

    padding: 64px 0;

    background:

        radial-gradient(1200px 480px at 50% -120px, rgba(25,118,210,0.10), transparent 60%),

        var(--bg-light);

    min-height: calc(100vh - 320px);

    display: flex;

    align-items: center;

}

.auth-section > .container {

    width: 100%;

}



.auth-wrap {

    display: grid;

    grid-template-columns: 1fr 1.2fr;

    gap: 0;

    max-width: 1360px;

    margin: 0 auto;

    background: #fff;

    border-radius: var(--radius-lg);

    overflow: hidden;

    box-shadow: var(--shadow-lg);

    border: 1px solid var(--border-color);

}



/* 左侧品牌区：呼应全站蓝色科技风格 */

.auth-aside {

    position: relative;

    padding: 48px 40px;

    color: #fff;

    background: linear-gradient(150deg, #0a3d8a 0%, #0d47a1 45%, #1976d2 100%);

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    overflow: hidden;

}

.auth-aside::after {

    content: '';

    position: absolute;

    right: -60px;

    top: -60px;

    width: 220px;

    height: 220px;

    background: radial-gradient(circle, rgba(255,255,255,0.18), transparent 70%);

    border-radius: 50%;

}

.auth-aside-head { position: relative; z-index: 1; margin: auto 0; }

.auth-aside-head h2 {

    font-size: 26px;

    font-weight: 700;

    line-height: 1.4;

    margin-bottom: 14px;

}

.auth-aside-head p {

    font-size: 14px;

    line-height: 1.9;

    color: rgba(255,255,255,0.82);

}

.auth-aside-list {

    list-style: none;

    position: relative;

    z-index: 1;

    display: grid;

    gap: 12px;

}

.auth-aside-list li {

    display: flex;

    align-items: center;

    gap: 10px;

    font-size: 14px;

    color: rgba(255,255,255,0.92);

}

.auth-aside-list li svg { flex: none; }



/* 右侧表单区 */

.auth-main {

    padding: 44px 56px 40px;

}

.auth-tabs {

    display: flex;

    gap: 28px;

    border-bottom: 1px solid var(--border-color);

    margin-bottom: 26px;

}

.auth-tab {

    padding: 0 0 14px;

    font-size: 18px;

    font-weight: 600;

    color: var(--text-muted);

    position: relative;

    cursor: pointer;

    background: none;

    border: none;

    transition: var(--transition);

}

.auth-tab.active { color: var(--primary-blue); }

.auth-tab.active::after {

    content: '';

    position: absolute;

    left: 0; right: 0; bottom: -1px;

    height: 3px;

    background: var(--primary-blue);

    border-radius: 3px 3px 0 0;

}



.auth-form { display: grid; gap: 18px; }

.auth-form.hidden { display: none; }



.section-sub {

    font-size: 14px;

    font-weight: 700;

    color: var(--primary-blue);

    margin: 6px 0 -2px;

    padding-left: 12px;

    position: relative;

}

.section-sub::before {

    content: '';

    position: absolute;

    left: 0; top: 0.2em;

    width: 4px; height: 0.85em;

    background: var(--primary-blue);

    border-radius: 2px;

}



.field { display: grid; gap: 7px; }

.field label {

    font-size: 13px;

    font-weight: 600;

    color: var(--text-secondary);

}

.field .req { color: #e53935; margin-left: 2px; }

.field input,

.field select {

    height: 46px;

    padding: 0 16px;

    font-size: 15px;

    color: var(--text-primary);

    background: #fff;

    border: 1px solid var(--border-color);

    border-radius: var(--radius-sm);

    transition: var(--transition);

    width: 100%;

    appearance: none;

}

.field select {

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");

    background-repeat: no-repeat;

    background-position: right 14px center;

    padding-right: 36px;

}

.field input:focus,

.field select:focus {

    outline: none;

    border-color: var(--accent-blue);

    box-shadow: 0 0 0 3px rgba(25,118,210,0.12);

}

.field .hint { font-size: 12px; color: var(--text-muted); }

.field.invalid input,

.field.invalid select { border-color: #e53935; }

.field .err-msg { font-size: 12px; color: #e53935; display: none; }

.field.invalid .err-msg { display: block; }



/* 验证码行：输入框 + 图形验证码 */

.field-captcha { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: end; }

.captcha-box {

    height: 46px;

    border: 1px solid var(--border-color);

    border-radius: var(--radius-sm);

    overflow: hidden;

    cursor: pointer;

    background: var(--bg-gray);

    display: flex;

    align-items: center;

    justify-content: center;

    user-select: none;

}

.captcha-box svg { display: block; }

.captcha-box .captcha-refresh {

    font-size: 12px;

    color: var(--text-secondary);

    padding: 0 8px;

}



/* 两列布局（企业信息） */

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }



.auth-options {

    display: flex;

    align-items: center;

    justify-content: space-between;

    font-size: 13px;

    color: var(--text-secondary);

}

.auth-options label { display: flex; align-items: center; gap: 7px; cursor: pointer; }

.auth-options input { width: 15px; height: 15px; accent-color: var(--primary-blue); }

.auth-options a { color: var(--accent-blue); text-decoration: none; }

.auth-options a:hover { text-decoration: underline; }



.auth-agree {

    font-size: 13px;

    color: var(--text-secondary);

    line-height: 1.7;

}

.auth-agree a { color: var(--accent-blue); text-decoration: none; }

.auth-agree a:hover { text-decoration: underline; }



.btn-auth {

    height: 46px;

    border: none;

    border-radius: var(--radius-sm);

    background: linear-gradient(135deg, #0d47a1, #1976d2);

    color: #fff;

    font-size: 16px;

    font-weight: 600;

    cursor: pointer;

    transition: var(--transition);

    letter-spacing: 1px;

}

.btn-auth:hover { box-shadow: 0 8px 22px rgba(25,118,210,0.32); transform: translateY(-1px); }

.btn-auth:active { transform: translateY(0); }



.auth-switch {

    text-align: center;

    font-size: 13px;

    color: var(--text-secondary);

}

.auth-switch a { color: var(--primary-blue); font-weight: 600; text-decoration: none; margin-left: 4px; }

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



.auth-tip {

    font-size: 12px;

    color: var(--text-muted);

    text-align: center;

    line-height: 1.7;

}



/* 提示条 */

.auth-alert {

    display: none;

    padding: 11px 14px;

    border-radius: var(--radius-sm);

    font-size: 13px;

    line-height: 1.6;

}

.auth-alert.show { display: block; }

.auth-alert.error { background: #fdecea; color: #c0392b; border: 1px solid #f5c6c0; }

.auth-alert.success { background: #e8f5e9; color: #2e7d32; border: 1px solid #c8e6c9; }



/* 移动端 */

@media (max-width: 760px) {

    .auth-wrap { grid-template-columns: 1fr; margin: 0 16px; }

    .auth-aside { display: none; }

    .auth-main { padding: 32px 22px 30px; }

    .field-row { grid-template-columns: 1fr; gap: 18px; }

}

        /* ===== 手机验证码行（登录/注册一体） ===== */
        .field-code {
            display: grid;
            grid-template-columns: 1fr auto;
            gap: 12px;
            align-items: stretch;
        }
        .field-code input {
            height: 46px;
        }
        .btn-code {
            height: 46px;
            padding: 0 18px;
            white-space: nowrap;
            font-size: 14px;
            font-weight: 600;
            color: #fff;
            background: linear-gradient(135deg, #0d47a1, #1976d2);
            border: none;
            border-radius: var(--radius-sm);
            cursor: pointer;
            transition: var(--transition);
        }
        .btn-code:hover:not(:disabled) {
            box-shadow: 0 8px 22px rgba(25, 118, 210, 0.32);
        }
        .btn-code:disabled {
            background: #b8c4d6;
            cursor: not-allowed;
            box-shadow: none;
        }