/* ================================================================
   注册模块共享样式
   使用方：signup.php / student/register.php（两页内联副本已抽取，禁止重复定义）
   维护约定：改本文件 = 同时改两个页面；页面独有选择器仍保留在各页内联。
   抽取基准：以 signup.php 文本为准，并合并 register.php 的补充属性。
   注意：.badge 为多页通用类，本文件一律使用 .signup-left .badge 限定写法。
   版本：signup-shared.css?v=2026101302
   ================================================================ */

/* ===== 容器与左栏 ===== */
.signup-container {
    display: flex;
    min-height: calc(100vh - 72px - 100px);
    max-width: 1280px;
    margin: 0 auto;
    padding: var(--space-40) var(--space-24);
    gap: var(--space-40);
    align-items: stretch;
    width: 100%;
    box-sizing: border-box;
}
.signup-left {
    flex: 2 1 66%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: var(--space-40);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--paper);
    box-shadow: var(--shadow-soft);
    text-align: center;
    box-sizing: border-box;
}
.signup-left .badge {
    display: inline-block;
    background: var(--ink-strong);
    color: var(--paper);
    padding: var(--space-4) var(--space-16);
    border-radius: var(--radius-pill);
    font-size: var(--fs-400);
    font-weight: var(--fw-600);
    margin: 0 auto var(--space-16);
    width: fit-content;
}
.signup-left h1 {
    font-size: var(--fs-1200);
    font-weight: var(--fw-800);
    letter-spacing: -1px;
    margin-bottom: var(--space-8);
}
.signup-left .subtitle {
    color: var(--muted);
    font-size: var(--fs-800);
    margin-bottom: var(--space-32);
    margin-top: 0;
}
.signup-left form {
    display: flex;
    flex-direction: column;
    gap: var(--space-20);
    text-align: left;
}

/* ===== 表单控件与按钮 ===== */
.field-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}
.field-group label {
    font-weight: var(--fw-600);
    font-size: var(--fs-600);
    color: var(--ink);
}
/* 文本类输入框统一基础样式：
覆盖 email / password / text / tel 以及未来可能新增的 number / url / search / date。
注意：不要改成 .field-group input 通配写法，避免未来在 field-group 内
新增 checkbox / radio / file 等非文本控件时被误套边框与内边距。 */
.field-group input[type="email"],
.field-group input[type="password"],
.field-group input[type="text"],
.field-group input[type="tel"],
.field-group input[type="number"],
.field-group input[type="url"],
.field-group input[type="search"],
.field-group input[type="date"] {
    padding: var(--space-12) var(--space-16);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    font-size: var(--fs-700);
    background: var(--paper);
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
    outline: none;
    width: 100%;
    box-sizing: border-box;
}
.field-group input:focus {
    border-color: var(--brand);
    box-shadow: var(--focus-ring-brand);
}
.field-group input.input-error {
    border: 2px dashed var(--danger) !important;
    background: #fffff0 !important;
    box-shadow: none !important;
}
.field-error {
    color: var(--danger);
    font-size: var(--fs-500);
    margin-top: var(--space-2);
    display: none;
}
.field-error.visible {
    display: block;
}
.captcha-row {
    display: flex;
    gap: var(--space-12);
    align-items: center;
}
.captcha-row input {
    flex: 1;
    border-radius: var(--radius-lg);
}
.captcha-row .btn-captcha {
    background: var(--bg);
    border: 1px solid var(--border);
    padding: var(--space-12) var(--space-20);
    border-radius: var(--radius-lg);
    font-weight: var(--fw-600);
    font-size: var(--fs-600);
    color: var(--ink);
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s, border-color 0.2s;
}
.captcha-row .btn-captcha:hover {
    background: var(--border);
    border-color: var(--muted);
}
.captcha-row .btn-captcha:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}
.field-hint {
    font-size: var(--fs-400);
    color: var(--muted);
    margin-top: var(--space-4);
}
#codeSentHint {
    display: none;
    color: var(--success);
    font-size: var(--fs-600);
    margin-top: var(--space-6);
    align-items: center;
    gap: var(--space-6);
}
#codeSentHint i {
    font-size: var(--fs-800);
}
.btn-create-account {
    background: var(--ink-strong);
    color: var(--paper);
    border: none;
    border-radius: var(--radius-pill);
    padding: var(--space-14) var(--space-32);
    font-weight: var(--fw-500);
    font-size: var(--fs-800);
    cursor: pointer;
    width: 100%;
    margin-top: var(--space-8);
    transition: background 0.2s;
}
.btn-create-account:hover {
    background: var(--ink-hover);
}
.btn-create-account:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}
.login-link {
    text-align: center;
    margin-top: var(--space-16);
    font-size: var(--fs-700);
    color: var(--muted);
}
.login-link a {
    color: var(--ink);
    font-weight: var(--fw-600);
}
.login-link a:hover {
    color: var(--brand);
}
.terms {
    text-align: center;
    font-size: var(--fs-400);
    color: var(--muted);
    margin-top: var(--space-8);
}
.terms a {
    color: var(--ink);
    font-weight: var(--fw-500);
}
.terms a:hover {
    color: var(--brand);
}

/* ===== 注册成功视图 / 完善信息页面样式 ===== */
#profileComplete {
    display: none;
    text-align: left;
}
#profileComplete .success-icon {
    font-size: 3rem;
    color: var(--success);
    margin-bottom: var(--space-12);
}
#profileComplete .subtitle {
    color: var(--muted);
    font-size: var(--fs-800);
    margin-bottom: var(--space-24);
    text-align: center;
}
.info-grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
    margin: var(--space-16) 0 var(--space-24);
}
.info-row {
    display: flex;
    align-items: baseline;
    gap: var(--space-8);
    border-bottom: 1px solid var(--border);
    padding-bottom: var(--space-8);
}
.info-row .label {
    font-weight: var(--fw-600);
    min-width: 80px;
    color: var(--ink);
}
.info-row .value {
    color: var(--ink);
    font-family: monospace;
    font-size: var(--fs-700);
}
.info-row .hint {
    font-size: var(--fs-400);
    color: var(--muted);
    margin-left: var(--space-8);
}
.btn-login-redirect {
    background: var(--ink-strong);
    color: var(--paper);
    border: none;
    border-radius: var(--radius-pill);
    padding: var(--space-14) var(--space-32);
    font-weight: var(--fw-500);
    font-size: var(--fs-800);
    cursor: pointer;
    text-decoration: none;
    width: 100%;
    margin-top: var(--space-8);
    transition: background 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.btn-login-redirect:hover {
    background: var(--ink-hover);
}

/* ===== 右栏与右侧信息卡 ===== */
.signup-right {
    flex: 1 1 33%;
    display: flex;
    flex-direction: column;
    gap: var(--space-24);
    padding: 0;
}
.signup-right .info-block {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-24);
    background: var(--paper);
    box-shadow: var(--shadow-soft);
}
.signup-right .info-block h3 {
    font-size: var(--fs-900);
    font-weight: var(--fw-700);
    color: var(--ink);
    margin-bottom: var(--space-16);
}
.signup-right .info-block ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
}
.signup-right .info-block ul li {
    display: flex;
    align-items: center;
    gap: var(--space-12);
    font-size: var(--fs-700);
    color: var(--ink);
}
.signup-right .info-block ul li i {
    color: var(--ink-strong) !important;
    font-size: var(--fs-900);
    width: 20px;
    text-align: center;
}
.signup-right .info-box {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-12) var(--space-16);
    background: transparent;
    margin-bottom: var(--space-12);
}
.signup-right .info-box:last-child {
    margin-bottom: 0;
}
.signup-right .info-box p {
    font-size: var(--fs-700);
    color: var(--ink);
    margin: 0;
}

/* ===== 响应式 ===== */
@media (max-width: 768px) {
    .signup-container {
        flex-direction: column;
        padding: var(--space-24) var(--space-16);
        min-height: auto;
        gap: var(--space-32);
    }

    .signup-left {
        flex: 1 1 auto;
        padding: var(--space-24) var(--space-16);
    }

    .signup-left h1 {
        font-size: 1.8rem;
    }

    .signup-right {
        flex: 1 1 auto;
        padding: 0;
    }

    .captcha-row {
        flex-direction: column;
        align-items: stretch;
    }

    .captcha-row .btn-captcha {
        text-align: center;
    }

    .info-row {
        flex-wrap: wrap;
    }

    .info-row .label {
        min-width: 60px;
    }

    .signup-right .info-block {
        padding: var(--space-16);
    }

    .signup-right .info-block h3 {
        margin-bottom: var(--space-12);
    }

    .signup-right .info-block ul {
        gap: var(--space-8);
    }

    .signup-right .info-box {
        padding: var(--space-8) var(--space-12);
        margin-bottom: var(--space-8);
    }
}

/* 小屏紧凑：来自 signup.php，register.php 原先缺失，抽到共享后自动补齐 */
@media (max-width: 480px) {
    .signup-left {
        padding: var(--space-16) var(--space-12);
    }
}