/* ==========================================================================
   auth.css —— 登录 / 注册页
   这两个页面 Layout = null，只从 site.css 取设计令牌（颜色、字体变量）。
   版式固定为「单列居中」：品牌标识 → 表单卡片 → 页脚，任何宽度下都不分栏。
   ========================================================================== */

/* site.css 把根字号压到 14px（列表页信息密度需要）。认证页是独立页面，
   恢复 16px 基准，下面所有 rem 才能按常规比例排版。 */
.auth-html { font-size: 16px; }

.auth-html *,
.auth-html *::before,
.auth-html *::after { box-sizing: border-box; }

.auth-page {
    --auth-card-w: 27rem;
    --auth-radius: 1.125rem;
    --auth-radius-sm: 0.625rem;
    --auth-field-h: 2.875rem;
    --auth-border: #e2e9f2;
    --auth-border-input: #d2dde9;

    position: relative;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    margin: 0;
    padding: 2.5rem 1.25rem;
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--ink);
    background-color: #e9eff7;
    /* 中心一团柔光把卡片托起来，四周留给品牌色的冷暖两块渐变 */
    background-image:
        radial-gradient(36rem 28rem at 50% 44%, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0) 72%),
        radial-gradient(52rem 26rem at 50% -8rem, rgba(15, 76, 129, 0.16), transparent 68%),
        radial-gradient(40rem 26rem at 110% 104%, rgba(13, 148, 136, 0.16), transparent 64%),
        radial-gradient(36rem 24rem at -12% 92%, rgba(15, 76, 129, 0.12), transparent 62%);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* 极淡的坐标网格：中心留白、四周浮现，作为「实验记录纸」的暗示。
   不用具体的分子图形，避免装饰喧宾夺主。 */
.auth-page::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(15, 76, 129, 0.042) 1px, transparent 1px),
        linear-gradient(90deg, rgba(15, 76, 129, 0.042) 1px, transparent 1px);
    background-size: 4rem 4rem;
    -webkit-mask-image: radial-gradient(58rem 44rem at 50% 46%, transparent 24%, #000 100%);
    mask-image: radial-gradient(58rem 44rem at 50% 46%, transparent 24%, #000 100%);
}

::selection { background: rgba(15, 76, 129, 0.18); }

@keyframes authIn {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}

/* margin:auto 而不是 justify-content:center —— 内容超过一屏时仍可完整滚动，不会被裁掉顶部 */
.auth-shell {
    position: relative;
    z-index: 1;
    width: 100%;
    /* 外框比卡片略宽：页脚的资助声明才排得下一行，卡片本身仍按 --auth-card-w 居中 */
    max-width: 30rem;
    margin: auto;
    animation: authIn 0.5s cubic-bezier(0.22, 0.7, 0.32, 1) both;
}

.auth-masthead,
.auth-card,
.auth-metrics {
    max-width: var(--auth-card-w);
    margin-left: auto;
    margin-right: auto;
}

/* ───────────────────────── 品牌标识 ───────────────────────── */
.auth-masthead {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 1.5rem;
}

.auth-masthead__mark {
    width: 3.75rem;
    height: 3.75rem;
    margin-bottom: 0.9rem;
    object-fit: contain;
}

.auth-masthead__name {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: 0.01em;
    color: var(--brand-strong);
}

/* 英文全称较长，允许折行，绝不截断 */
.auth-masthead__en {
    margin: 0.4rem 0 0;
    max-width: 24rem;
    font-size: 0.72rem;
    line-height: 1.55;
    letter-spacing: 0.03em;
    color: var(--muted);
    text-wrap: balance;
}

/* ───────────────────────── 卡片 ───────────────────────── */
.auth-card {
    padding: 1.5rem 1.75rem 1.75rem;
    border: 1px solid var(--auth-border);
    border-radius: var(--auth-radius);
    background: #fff;
    box-shadow:
        0 1px 2px rgba(16, 35, 58, 0.04),
        0 12px 28px -12px rgba(16, 35, 58, 0.16),
        0 32px 60px -30px rgba(16, 35, 58, 0.22);
}

/* 登录 / 注册切换：两个页面的入口始终并排可见，位置固定在卡片顶部 */
.auth-switch {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.25rem;
    padding: 0.25rem;
    margin-bottom: 1.5rem;
    border-radius: 0.75rem;
    background: #f1f5fa;
}

.auth-switch__item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 2.25rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-indent: 0.08em;
    color: var(--muted);
    text-decoration: none;
    transition: color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.auth-switch__item:hover { color: var(--ink-soft); text-decoration: none; }

.auth-switch__item.is-active {
    color: var(--brand-strong);
    background: #fff;
    box-shadow: 0 1px 2px rgba(16, 35, 58, 0.1), 0 3px 8px -4px rgba(16, 35, 58, 0.18);
}

.auth-switch__item.is-active:hover { color: var(--brand-strong); }

/* ───────────────────────── 提示条 ───────────────────────── */
.auth-alert {
    display: none;
    margin: 0 0 1.1rem;
    padding: 0.7rem 0.9rem;
    border-radius: var(--auth-radius-sm);
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.6;
}

/* asp-validation-summary 只在 <div> 上生效（ValidationSummaryTagHelper 只匹配 div），
   渲染结果是 <div class="… validation-summary-errors"><ul><li>…</li></ul></div>。
   写成 <ul> 的话标签助手不会执行，错误信息会被整条吞掉。 */
.auth-alert.validation-summary-errors {
    display: block;
    background: var(--danger-soft);
    border: 1px solid #f4cac6;
    color: var(--danger);
}

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

.auth-alert li + li { margin-top: 0.2rem; }

.auth-alert--warn {
    display: block;
    background: #fffbeb;
    border: 1px solid #fde68a;
    color: #92400e;
    font-weight: 500;
}

/* ───────────────────────── 表单 ───────────────────────── */
.auth-field { margin-bottom: 1.05rem; }

.auth-label {
    display: block;
    margin-bottom: 0.4rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--ink-soft);
}

.auth-control { position: relative; }

.auth-input {
    width: 100%;
    height: var(--auth-field-h);
    padding: 0 0.875rem;
    font-family: var(--font-body);
    font-size: 0.9375rem;
    color: var(--ink);
    background: #fff;
    border: 1px solid var(--auth-border-input);
    border-radius: var(--auth-radius-sm);
    outline: none;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.auth-input::placeholder { color: #a9b8c9; }

.auth-input:hover { border-color: #b9c8d9; }

.auth-input:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(15, 76, 129, 0.12);
}

.auth-input.input-validation-error { border-color: var(--danger); }

.auth-input.input-validation-error:focus { box-shadow: 0 0 0 3px rgba(180, 35, 24, 0.12); }

.auth-input--secret { padding-right: 2.75rem; }

/* 密码可见切换 */
.auth-reveal {
    position: absolute;
    top: 50%;
    right: 0.375rem;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 0;
    border-radius: 0.5rem;
    background: transparent;
    color: #94a6ba;
    cursor: pointer;
    transition: color 0.18s ease, background 0.18s ease;
}

.auth-reveal:hover { color: var(--brand); background: var(--brand-soft); }

.auth-reveal svg { width: 1.0625rem; height: 1.0625rem; }

.auth-reveal__off { display: none; }
.auth-reveal.is-on .auth-reveal__on  { display: none; }
.auth-reveal.is-on .auth-reveal__off { display: block; }

/* 字段级错误：仅在校验失败时出现 */
.auth-error {
    display: none;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.375rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--danger);
}

.auth-error.field-validation-error { display: flex; }

.auth-error::before {
    content: "!";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 0.875rem;
    height: 0.875rem;
    border-radius: 50%;
    background: var(--danger);
    color: #fff;
    font-size: 0.625rem;
    font-weight: 800;
    line-height: 1;
}

/* 记住我 / 辅助说明 */
.auth-meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin: 0.25rem 0 1.25rem;
    font-size: 0.8125rem;
}

.auth-check {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--ink-soft);
    cursor: pointer;
    user-select: none;
}

.auth-check input {
    width: 0.9375rem;
    height: 0.9375rem;
    accent-color: var(--brand);
    cursor: pointer;
}

.auth-note { color: var(--muted); }

/* 密码强度 */
.auth-strength { margin-top: 0.5rem; }

/* 空密码时不显示色块，只留提示文案；开始输入后再淡入（高度已占位，不会跳动） */
.auth-strength__track {
    display: flex;
    gap: 0.25rem;
    opacity: 1;
    transition: opacity 0.25s ease;
}

.auth-strength[data-level="0"] .auth-strength__track { opacity: 0; }

.auth-strength__seg {
    flex: 1;
    height: 3px;
    border-radius: 999px;
    background: #e4eaf2;
    transition: background 0.25s ease;
}

.auth-strength[data-level="1"] .auth-strength__seg:nth-child(-n+1) { background: #dc2626; }
.auth-strength[data-level="2"] .auth-strength__seg:nth-child(-n+2) { background: #f59e0b; }
.auth-strength[data-level="3"] .auth-strength__seg:nth-child(-n+3) { background: #65a30d; }
.auth-strength[data-level="4"] .auth-strength__seg:nth-child(-n+4) { background: var(--accent); }

.auth-strength__text {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.75rem;
    line-height: 1.55;
    color: var(--muted);
}

/* 主按钮 */
.auth-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: var(--auth-field-h);
    border: 0;
    border-radius: var(--auth-radius-sm);
    font-family: var(--font-body);
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-indent: 0.16em;
    color: #fff;
    background: var(--brand);
    cursor: pointer;
    transition: background 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.auth-submit:hover {
    background: var(--brand-strong);
    box-shadow: 0 8px 20px -8px rgba(15, 76, 129, 0.6);
    transform: translateY(-1px);
}

.auth-submit:active { transform: none; box-shadow: none; }

.auth-submit[disabled] {
    cursor: progress;
    opacity: 0.6;
    transform: none;
    box-shadow: none;
}

/* 分隔线 */
.auth-divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 1.25rem 0;
    font-size: 0.75rem;
    color: #9aabbd;
}

.auth-divider::before,
.auth-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--auth-border);
}

/* 科技云通行证 */
.auth-sso {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    height: var(--auth-field-h);
    border: 1px solid var(--auth-border-input);
    border-radius: var(--auth-radius-sm);
    background: #fff;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ink-soft);
    text-decoration: none;
    transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.auth-sso:hover {
    border-color: rgba(13, 148, 136, 0.55);
    background: var(--accent-soft);
    color: #0f766e;
    text-decoration: none;
}

.auth-sso svg {
    width: 1.0625rem;
    height: 1.0625rem;
    flex-shrink: 0;
    color: var(--accent);
}

.auth-sso:hover svg { color: #0f766e; }

.auth-submit:focus-visible,
.auth-sso:focus-visible,
.auth-reveal:focus-visible,
.auth-switch__item:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

/* ───────────────────────── 数据规模 ───────────────────────── */
.auth-metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-top: 1.25rem;
    text-align: center;
}

.auth-metric + .auth-metric { border-left: 1px solid rgba(15, 76, 129, 0.12); }

.auth-metric__value {
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--brand-strong);
}

.auth-metric__label {
    margin-top: 0.1rem;
    font-size: 0.6875rem;
    letter-spacing: 0.04em;
    color: var(--muted);
}

/* ───────────────────────── 页脚 ───────────────────────── */
.auth-foot {
    margin-top: 1.5rem;
    text-align: center;
}

/* 资助声明必须完整可见：窄屏折行，绝不截断。
   结构与站内其它位置共用 site.css 里的 .fund-note，这里只调字号和颜色。 */
.auth-foot__fund {
    margin: 0;
    font-size: 0.6875rem;
    line-height: 1.7;
    color: #7f92a6;
}

/* 登录卡片宽度有限，两项基金各占一行居中排 */
.fund-note--auth {
    align-items: center;
    gap: 0.1rem;
}

.auth-foot__org {
    margin: 0.35rem 0 0;
    font-size: 0.6875rem;
    letter-spacing: 0.02em;
    color: #93a4b6;
}

/* 版权行跟页脚其它两行同一字号，基础样式见 site.css 的 .cnzz-link */
.auth-foot .cnzz-link {
    margin-top: 0.5rem;
    font-size: 0.6875rem;
    color: #93a4b6;
}

/* ───────────────────────── 响应式 ───────────────────────── */
@media (max-width: 30rem) {
    .auth-page { padding: 1.75rem 1rem; }

    .auth-masthead__mark { width: 3.25rem; height: 3.25rem; }

    .auth-masthead__name { font-size: 1.15rem; }

    .auth-card { padding: 1.25rem 1.15rem 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
    .auth-html *,
    .auth-html *::before,
    .auth-html *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}