/* 认证页版式（Story 1.6，对齐 Figma 帧 登陆 41:2977 / 注册 41:55）
   居中白卡左右分栏：左品牌图板（图片+暗罩+白字），右表单面板。
   登录卡 r12 / 注册卡 r16；登录遮罩 30% 黑，注册渐变 20%→50%。 */

.auth-section {
    padding: 64px 24px 100px;
    background: #F8FAFC;
}

.auth-card {
    display: grid;
    grid-template-columns: 426px 1fr;
    max-width: 1024px;
    margin: 0 auto;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 12px 32px rgba(20, 30, 26, 0.08);
}

.auth-card--register { border-radius: 16px; }
.auth-card--blank {
    max-width: 1100px;
    grid-template-columns: 300px 1fr;
}

/* ---------------------------------------------------------- 左品牌图板 */
.auth-brand {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 64px 64px 48px;
    color: #fff;
    background: #141E1A url("../img/case-study/hero.e85c7862bf5c.jpg") center / cover no-repeat;
}

.auth-brand::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
}

.auth-card--register .auth-brand::before {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.5));
}

.auth-brand > * { position: relative; }

.auth-brand h2 {
    margin: 0 0 20px;
    font-size: 48px;
    font-weight: 700;
    line-height: 1.2;
}

.auth-card--register .auth-brand h2 { font-size: 36px; }

.auth-brand__sub {
    margin: 0;
    font-size: 20px;
    line-height: 1.5;
    opacity: 0.9;
}

.auth-card--register .auth-brand__sub { font-size: 18px; }

.auth-brand__tagline {
    margin: auto 0 0;
    padding-top: 48px;
    font-size: 14px;
    letter-spacing: 1.5px;
    line-height: 1.6;
    text-transform: uppercase;
    opacity: 0.8;
}

/* ---------------------------------------------------------- 右表单面板 */
.auth-form { padding: 64px; }

.auth-form h1 {
    margin: 0 0 12px;
    font-size: 30px;
    font-weight: 700;
    color: #111827;
}

.auth-card--register .auth-form h1 { font-size: 24px; }

.auth-form__sub {
    margin: 0 0 36px;
    font-size: 16px;
    line-height: 1.5;
    color: #6B7280;
}

.auth-card--register .auth-form__sub { font-size: 14px; margin-bottom: 28px; }

/* 字段：登录帧为 14px 常规标签 + 50px 输入框；注册帧为 12px 大写标签 + 46px 输入框 */
.auth-field { margin-bottom: 24px; }

.auth-field label {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    color: #374151;
}

.auth-field--caps label {
    font-size: 12px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #4A4A4A;
}

.auth-field input,
.auth-field select {
    width: 100%;
    height: 50px;
    padding: 0 16px;
    font-size: 16px;
    font-family: inherit;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    box-sizing: border-box;
}

.auth-field select {
    padding-right: 40px;
    color: #111827;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239CA3AF' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}

.auth-field--caps input,
.auth-field--caps select { height: 46px; font-size: 14px; }

.auth-field input::placeholder { color: #9CA3AF; }
.auth-field--caps input::placeholder { color: #D1D5DB; }
.auth-field select.auth-select--empty { color: #9CA3AF; }
.auth-field--caps select.auth-select--empty { color: #D1D5DB; }
.auth-field select option { color: #111827; }

.auth-field input:focus,
.auth-field select:focus {
    outline: none;
    border-color: var(--bess-green);
    box-shadow: 0 0 0 3px rgba(92, 148, 52, 0.15);
}

.auth-field .errorlist {
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
    font-size: 13px;
    color: #B3261E;
}

.auth-field.has-error input,
.auth-field.has-error select { border-color: #B3261E; }
.auth-field__req { color: #B3261E; margin-left: 2px; }

/* 密码显隐（auth.js）：输入框右侧内嵌眼睛按钮 */
.auth-password { position: relative; }
.auth-password input { padding-right: 48px; }
.auth-password__toggle {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    background: none;
    color: #9CA3AF;
    cursor: pointer;
    border-radius: 6px;
}
.auth-password__toggle:hover { color: var(--bess-green); }
.auth-password__toggle:focus-visible {
    outline: 2px solid var(--bess-green);
    outline-offset: -2px;
}
/* SVG 非 HTML 元素，UA 样式表 [hidden] 规则对其不一定生效（flex 子项场景），作者样式强制兜底 */
.auth-password__toggle svg[hidden] { display: none !important; }

/* 图形验证码（auth.js）：输入框 + 图片并排，图片点击刷新 */
.auth-captcha { display: flex; gap: 12px; align-items: stretch; }
.auth-captcha input { flex: 1; min-width: 0; }
.auth-captcha__img {
    width: 132px;
    height: 50px;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    cursor: pointer;
    flex-shrink: 0;
    background: #F4F6F0;
}
.auth-field--caps .auth-captcha__img { height: 46px; }

.auth-code-send { display: flex; gap: 12px; align-items: stretch; }
.auth-code-send input { flex: 1; min-width: 0; }
.auth-code-send__btn {
    flex: none;
    min-width: 112px;
    height: 50px;
    padding: 0 16px;
    border: 1px solid var(--bess-green);
    border-radius: 8px;
    background: #fff;
    color: var(--bess-green);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}
.auth-code-send__btn:hover { background: #f5f9f3; }
.auth-code-send__btn:disabled { opacity: 0.55; cursor: not-allowed; }
.auth-blank .auth-code-send input { height: 50px; padding: 0 16px; border: 1px solid #E5E7EB; border-radius: 8px; }
.auth-blank .auth-code-send input:focus {
    outline: 2px solid var(--bess-green);
    outline-offset: -2px;
}

/* 表单级错误（登录失败等 non_field_errors） */
.auth-errors {
    margin: 0 0 24px;
    padding: 12px 16px;
    font-size: 14px;
    color: #B3261E;
    background: #FDF2F2;
    border: 1px solid #F3D4D2;
    border-radius: 8px;
}

.auth-errors ul { margin: 0; padding: 0; list-style: none; }

/* Forgot password 行 */
.auth-form__meta {
    display: flex;
    justify-content: flex-end;
    margin: -8px 0 24px;
}

.auth-link { font-size: 14px; color: var(--bess-green); }
.auth-link:hover { text-decoration: underline; }

/* 提交：全宽绿钮（登录 56 / 注册 52） */
.auth-submit {
    width: 100%;
    height: 56px;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    background: var(--bess-green);
    border: none;
    border-radius: 8px;
    cursor: pointer;
}

.auth-card--register .auth-submit { height: 52px; }
.auth-submit:hover { filter: brightness(1.08); }

/* 分隔线 + 登录/注册互链（引导页二选一，需求 #9/#72） */
.auth-divider {
    margin: 32px 0 24px;
    border-top: 1px solid #E5E7EB;
}

.auth-switch {
    margin: 0;
    font-size: 14px;
    text-align: center;
    color: #6B7280;
}

.auth-switch a { color: var(--bess-green); font-weight: 600; }

.auth-legal {
    margin: 0 0 16px;
    font-size: 13px;
    line-height: 1.5;
    color: #6B7280;
}
.auth-legal a { color: var(--bess-green); }

/* 报名填空：下划线输入 + 单语言标签（随站点语言切换） */
.auth-blank {
    margin-bottom: 28px;
}
.auth-blank label,
.auth-blank legend {
    display: block;
    margin: 0 0 8px;
    padding: 0;
    border: 0;
    font-size: 15px;
    font-weight: 600;
    color: #111827;
}
fieldset.auth-blank {
    margin: 0 0 28px;
    padding: 0;
    border: 0;
    min-width: 0;
}
.auth-blank__hint { margin: 0 0 6px; font-size: 13px; line-height: 1.5; color: #6B7280; }
.auth-blank__hint--ex { margin-bottom: 10px; color: #9CA3AF; }
.auth-blank input[type="text"],
.auth-blank input[type="email"],
.auth-blank input[type="password"],
.auth-blank select {
    width: 100%;
    height: 40px;
    padding: 6px 0;
    font-size: 16px;
    font-family: inherit;
    color: #111827;
    background: transparent;
    border: none;
    border-bottom: 1px solid #E5E7EB;
    border-radius: 0;
    box-sizing: border-box;
}
.auth-blank textarea {
    display: block;
    width: 100%;
    min-height: 122px;
    height: 122px;
    padding: 12px 14px;
    font-size: 16px;
    font-family: inherit;
    line-height: 1.5;
    color: #111827;
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    box-sizing: border-box;
    resize: vertical;
}
.auth-blank [hidden] { display: none !important; }
.auth-blank select {
    padding-right: 28px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239CA3AF' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0 center;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}
.auth-blank input:focus,
.auth-blank select:focus {
    outline: none;
    border-bottom-color: var(--bess-green);
    box-shadow: none;
}
.auth-blank textarea:focus {
    outline: none;
    border-color: var(--bess-green);
    box-shadow: 0 0 0 3px rgba(92, 148, 52, 0.15);
}
.auth-blank select.auth-select--empty { color: #9CA3AF; }
.auth-blank select option { color: #111827; }
.auth-blank.has-error input[type="text"],
.auth-blank.has-error input[type="email"],
.auth-blank.has-error input[type="password"],
.auth-blank.has-error select { border-bottom-color: #B3261E; }
.auth-blank.has-error textarea { border-color: #B3261E; }
.auth-blank .errorlist {
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
    font-size: 13px;
    color: #B3261E;
}
.auth-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 10px 0;
    cursor: pointer;
    font-weight: 400;
}
.auth-blank .auth-check { font-weight: 400; }
.auth-check input[type="checkbox"],
.auth-check input[type="radio"] {
    width: 16px;
    height: 16px;
    margin: 3px 0 0;
    flex-shrink: 0;
    accent-color: var(--bess-green);
}
.auth-blank__other { margin: 0 0 8px 26px; }
.auth-blank .auth-password input { padding-right: 48px; }
.auth-blank .auth-captcha input { height: 50px; padding: 0 16px; border: 1px solid #E5E7EB; border-radius: 8px; }
.auth-blank .auth-captcha input:focus {
    border-color: var(--bess-green);
    box-shadow: 0 0 0 3px rgba(92, 148, 52, 0.15);
}
.auth-switch a:hover { text-decoration: underline; }

/* 重置流提示文本（done/complete/logged_out） */
.auth-note {
    margin: 0 0 24px;
    font-size: 15px;
    line-height: 1.7;
    color: #4F5550;
}

/* ---------------------------------------------------------- 响应式 */
@media (max-width: 1024px) {
    .auth-card { grid-template-columns: 360px 1fr; }
    .auth-card--blank { grid-template-columns: 240px 1fr; }
    .auth-brand { padding: 48px 40px 40px; }
    .auth-form { padding: 48px 40px; }
}

@media (max-width: 760px) {
    .auth-section { padding: 40px 16px 64px; }
    .auth-card { grid-template-columns: 1fr; }
    .auth-brand { min-height: 220px; padding: 40px 32px 32px; }
    .auth-brand h2 { font-size: 32px; }
    .auth-card--register .auth-brand h2 { font-size: 28px; }
    .auth-brand__sub { font-size: 16px; }
    .auth-brand__tagline { display: none; }
    .auth-form { padding: 40px 32px; }
    .auth-form h1 { font-size: 24px; }
}