/*
 * 账号页（登录 / 注册）的独立样式 —— 不跟主题走。
 *
 * 这两页是**完整 HTML 文档**：不套主题 header/footer，也不加载主题 style.css，
 * 所以这里的一切都要自给自足。
 *
 * 版式参照 bs.ihehe.cc 登录页（components/auth/AuthShell.tsx + tones.ts 的 user 色系）：
 *   整屏「入口色洗底 + 网格」→ 左侧品牌面（窄屏隐藏）→ 右侧白卡放表单 → 卡片下方一行链接。
 * 色值全部走 CSS 变量，换色系只改 :root 这几行。
 */

:root {
    --auth-accent: #2563eb;
    --auth-accent-2: #1d4ed8;
    /* 压在淡底上的彩色小字（比 accent 深一档才够对比度） */
    --auth-ink: #1d4ed8;
    /* 整屏洗底 + 网格线（网格必须很淡，重了整页显脏） */
    --auth-tint: rgba(37, 99, 235, .10);
    --auth-grid-line: rgba(37, 99, 235, .065);
    --auth-grid: 56px;

    --auth-bg: #f4f6fa;
    --auth-surface: #fff;
    --auth-border: #e8ebf1;
    --auth-border-strong: #d8dde7;
    --auth-field: #f7f9fc;
    --auth-text: #1f2937;
    --auth-muted: #6b7280;
}

* { box-sizing: border-box; }
body { margin: 0; }

.auth-screen {
    position: relative;
    min-height: 100dvh;
    color: var(--auth-text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    font-size: 14px;
    line-height: 1.6;
    background-color: var(--auth-bg);
    /* 网格在上、洗底在下：网格线只当纹理，整屏那层淡色才是「走哪个入口」的信号 */
    background-image:
        repeating-linear-gradient(to right, var(--auth-grid-line) 0 1px, transparent 1px var(--auth-grid)),
        repeating-linear-gradient(to bottom, var(--auth-grid-line) 0 1px, transparent 1px var(--auth-grid)),
        linear-gradient(var(--auth-tint), var(--auth-tint));
    animation: auth-grid-drift 32s linear infinite;
}
@keyframes auth-grid-drift {
    from { background-position: 0 0, 0 0, 0 0; }
    to   { background-position: var(--auth-grid) var(--auth-grid), var(--auth-grid) var(--auth-grid), 0 0; }
}
@media (prefers-reduced-motion: reduce) { .auth-screen { animation: none; } }

/* 左上角「返回首页」：属于页面边角，不占内容流 */
.auth-back {
    position: absolute; top: 24px; left: 24px; z-index: 10;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 8px; border-radius: 8px;
    color: var(--auth-muted); font-size: 14px; text-decoration: none;
    transition: color .2s, background .2s;
}
.auth-back:hover { color: var(--auth-text); background: rgba(15, 23, 42, .06); }

.auth-wrap {
    display: flex; align-items: center;
    width: 100%; max-width: 72rem; min-height: 100dvh;
    margin: 0 auto; padding: 48px 24px;
}
.auth-grid { display: grid; width: 100%; gap: 48px; align-items: center; grid-template-columns: 1fr; }

/* —— 左：品牌面（窄屏隐藏，卡片里有紧凑版）—— */
.auth-brand { display: none; }
.auth-brand-logo, .auth-card-logo { display: flex; align-items: center; gap: 12px; }
.auth-brand-logo img, .auth-card-logo img { display: block; height: 44px; width: auto; }
.auth-card-logo img { height: 36px; }
.auth-brand-name { font-size: 20px; font-weight: 700; }
.auth-eyebrow {
    margin: 40px 0 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--auth-muted);
}
.auth-headline { margin: 16px 0 0; font-size: 36px; line-height: 1.15; font-weight: 600; letter-spacing: -.02em; }
.auth-bar {
    margin-top: 24px; height: 4px; width: 80px; border-radius: 999px;
    background-image: linear-gradient(90deg, var(--auth-accent), var(--auth-accent-2));
}
.auth-blurb { margin: 24px 0 0; max-width: 24rem; font-size: 14px; line-height: 1.7; color: var(--auth-muted); }
.auth-motif { margin-top: 56px; opacity: .7; }

/* —— 右：表单卡片 —— */
.auth-card {
    padding: 32px 28px;
    background: var(--auth-surface);
    border: 1px solid var(--auth-border);
    border-radius: 24px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, .08);
}
.auth-card-logo { margin-bottom: 28px; }
.auth-pill {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 4px 12px; border-radius: 999px;
    border: 1px solid rgba(37, 99, 235, .35);
    background: rgba(37, 99, 235, .10);
    color: var(--auth-ink); font-size: 12px; font-weight: 500;
}
.auth-pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--auth-accent); }
.auth-title { margin: 16px 0 0; font-size: 24px; font-weight: 600; }
.auth-desc { margin: 8px 0 0; font-size: 14px; line-height: 1.7; color: var(--auth-muted); }

/* —— 表单零件 —— */
.auth-form { display: flex; flex-direction: column; gap: 18px; margin-top: 28px; }
.auth-label { display: block; margin-bottom: 8px; font-size: 14px; font-weight: 500; }
.auth-input-wrap { position: relative; }
.auth-input {
    width: 100%; padding: 12px 16px;
    border: 1px solid var(--auth-border-strong); border-radius: 12px;
    background: var(--auth-field); color: var(--auth-text);
    font-size: 14px; font-family: inherit; outline: none;
    transition: border-color .2s, box-shadow .2s;
}
.auth-input::placeholder { color: #9aa3af; }
.auth-input:focus { border-color: var(--auth-accent); box-shadow: 0 0 0 2px rgba(37, 99, 235, .35); }
.auth-input-wrap .auth-input { padding-right: 44px; }
.auth-eye {
    position: absolute; top: 50%; right: 8px; transform: translateY(-50%);
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border: 0; border-radius: 8px;
    background: transparent; color: #9aa3af; cursor: pointer;
    transition: color .2s, background .2s;
}
.auth-eye:hover { color: var(--auth-text); background: rgba(15, 23, 42, .06); }

.auth-row { display: flex; justify-content: flex-end; }

/* 验证码行（找回密码）：算式 + 输入 + 换一题，与输入框同一套观感 */
.auth-captcha {
    display: flex; align-items: center; gap: 10px;
    height: 46px; padding: 0 14px;
    border: 1px solid var(--auth-border-strong); border-radius: 12px;
    background: var(--auth-field);
    transition: border-color .2s, box-shadow .2s;
}
.auth-captcha:focus-within { border-color: var(--auth-accent); box-shadow: 0 0 0 2px rgba(37, 99, 235, .35); background: #fff; }
.auth-captcha__expr { flex-shrink: 0; font-size: 15px; font-weight: 600; color: var(--auth-text); user-select: none; }
.auth-captcha__input {
    flex: 1; min-width: 0; border: 0; background: transparent;
    color: var(--auth-text); font-size: 15px; font-family: inherit; outline: none;
}
.auth-captcha__refresh {
    flex-shrink: 0; padding: 4px; border: 0; background: none;
    color: #9aa3af; font-size: 14px; cursor: pointer; transition: color .2s;
}
.auth-captcha__refresh:hover { color: var(--auth-accent); }

/* 重置密码：链接失效那行提示 */
.auth-desc--danger { color: #dc2626; }
.auth-link { color: var(--auth-ink); font-size: 13px; text-decoration: none; }
.auth-link:hover { text-decoration: underline; }

.auth-submit {
    width: 100%; margin-top: 6px; padding: 13px 24px;
    border: 0; border-radius: 12px;
    background-image: linear-gradient(180deg, var(--auth-accent), var(--auth-accent-2));
    color: #fff; font-size: 14px; font-weight: 600; font-family: inherit;
    cursor: pointer; transition: filter .2s, opacity .2s;
}
.auth-submit:hover { filter: brightness(1.07); }
.auth-submit:disabled, .auth-submit.is-loading { opacity: .6; cursor: default; }

.auth-foot { margin-top: 22px; text-align: center; font-size: 14px; color: var(--auth-muted); }
.auth-foot a { color: var(--auth-ink); font-weight: 500; text-decoration: none; }
.auth-foot a:hover { text-decoration: underline; }

/* 窄屏：卡片铺满、边距收紧 */
@media (max-width: 480px) {
    .auth-wrap { padding: 32px 16px; }
    .auth-card { padding: 26px 20px; border-radius: 18px; }
    .auth-title { font-size: 21px; }
}

/* 宽屏：两栏（左品牌面 + 右卡片），卡片里的紧凑品牌头隐藏 */
@media (min-width: 1024px) {
    .auth-grid { grid-template-columns: 1fr minmax(22rem, 26rem); }
    .auth-brand { display: block; }
    .auth-card-logo { display: none; }
    .auth-card { padding: 40px; }
}