/* ============================================================
   认证页面统一样式 (auth.css)
   设计：全屏沉浸渐变背景 + 深色遮罩保证可读性 + 白色登录框浮层
   主色：浅蓝/淡蓝（sky 色系）
   适配：PC 与手机端（背景固定铺满，卡片居中自适应）
   适用于：管理登录 / 用户登录 / 注册 / 找回密码 / 重置密码 / 临时密钥
   ============================================================ */

:root {
    --brand: #0ea5e9;            /* sky-500 浅蓝 */
    --brand-hover: #0284c7;      /* sky-600 */
    --brand-soft: #e0f2fe;       /* sky-100 */
    --ink: #0f172a;
    --text: #334155;
    --muted: #64748b;
    --faint: #94a3b8;
    --line: #e2e8f0;
    --line-strong: #cbd5e1;
    --surface: #ffffff;
    --danger: #b91c1c;
    --danger-bg: #fef2f2;
    --danger-line: #fecaca;
    --success: #166534;
    --success-bg: #f0fdf4;
    --success-line: #bbf7d0;
    --warning: #92400e;
    --warning-bg: #fffbeb;
    --warning-line: #fde68a;
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* ---------- 全屏沉浸背景 ---------- */
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
    min-height: 100vh;
    display: flex; align-items: center; justify-content: center;
    padding: 24px 16px;
    /* 沉浸式浅蓝→深蓝渐变背景 */
    background:
        radial-gradient(1100px 620px at 15% -10%, rgba(125, 211, 252, .38), transparent 60%),
        radial-gradient(900px 560px at 95% 5%, rgba(56, 189, 248, .30), transparent 60%),
        radial-gradient(1200px 800px at 50% 130%, rgba(2, 6, 23, .55), transparent 72%),
        linear-gradient(165deg, #0369a1 0%, #0c4a6e 42%, #082f49 100%);
    background-attachment: fixed;
    background-size: cover;
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

/* 深色遮罩：覆盖整个背景，保证登录框可读性 */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(2, 6, 23, .42);
    pointer-events: none;
    z-index: 0;
}

.auth-wrap { width: 100%; max-width: 408px; position: relative; z-index: 1; }

/* ---------- 登录框浮层 ---------- */
.auth-card {
    background: var(--surface);
    border: 1px solid rgba(226, 232, 240, .9);
    border-radius: 14px;
    padding: 40px 36px 32px;
    box-shadow: 0 24px 64px rgba(2, 6, 23, .35), 0 4px 14px rgba(2, 6, 23, .18);
}
@media (max-width: 480px) {
    body { padding: 16px 12px; }
    .auth-card { padding: 30px 20px 26px; border-radius: 12px; }
}

/* ---------- 品牌区 ---------- */
.auth-brand { margin-bottom: 26px; }
.auth-logo {
    width: 42px; height: 42px;
    border-radius: 11px;
    background: var(--brand); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem; font-weight: 700;
    margin-bottom: 14px;
    box-shadow: 0 4px 12px rgba(14, 165, 233, .30);
}
.auth-brand h1 { font-size: 1.3rem; font-weight: 700; color: var(--ink); letter-spacing: -.01em; line-height: 1.3; }
.auth-brand p { font-size: .85rem; color: var(--muted); margin-top: 4px; }
.auth-brand::after {
    content: '';
    display: block;
    width: 36px; height: 2px;
    background: var(--brand);
    margin-top: 16px;
    border-radius: 2px;
}

/* ---------- 提示条（左描边，低饱和） ---------- */
.auth-alert { display: none; padding: 10px 14px; margin-bottom: 18px; border-radius: 8px; font-size: .84rem; line-height: 1.55; border: 1px solid transparent; }
.auth-alert.show { display: block; animation: authIn .25s ease; }
.auth-alert.error   { background: var(--danger-bg);  color: var(--danger);  border-color: var(--danger-line);  border-left-width: 3px; }
.auth-alert.success { background: var(--success-bg); color: var(--success); border-color: var(--success-line); border-left-width: 3px; }
.auth-alert.warning { background: var(--warning-bg); color: var(--warning); border-color: var(--warning-line); border-left-width: 3px; }
@keyframes authIn { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }

/* ---------- 表单 ---------- */
.auth-field { margin-bottom: 18px; }
.auth-label { display: block; font-size: .83rem; font-weight: 600; color: var(--text); margin-bottom: 7px; }
.auth-label-row { display: flex; justify-content: space-between; align-items: baseline; }
.auth-label-row .link { font-size: .8rem; color: var(--brand-hover); text-decoration: none; font-weight: 500; }
.auth-label-row .link:hover { text-decoration: underline; }

.auth-input {
    width: 100%; height: 46px; padding: 0 14px;
    background: #fff;
    border: 1px solid var(--line-strong);
    border-radius: 10px;
    font-size: .95rem; color: var(--ink);
    font-family: inherit;
    transition: border-color .18s, box-shadow .18s;
}
.auth-input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(14, 165, 233, .12); }
.auth-input::placeholder { color: var(--faint); }

.auth-captcha { display: flex; gap: 10px; align-items: center; }
.auth-captcha .auth-input { flex: 1; }
.captcha-box {
    height: 46px; min-width: 112px;
    border: 1px solid var(--line-strong);
    border-radius: 10px;
    cursor: pointer;
    background: #f0f9ff;
    display: flex; align-items: center; justify-content: center;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 1.05rem; font-weight: 600; letter-spacing: 5px;
    color: var(--ink); user-select: none;
    transition: border-color .18s;
}
.captcha-box:hover { border-color: var(--brand); }

/* ---------- 按钮：纯浅蓝、无重渐变、无辉光 ---------- */
.auth-btn {
    position: relative; overflow: hidden;
    width: 100%; height: 46px; margin-top: 6px;
    background: var(--brand);
    color: #fff;
    border: none; border-radius: 10px;
    font-size: .95rem; font-weight: 600; font-family: inherit;
    letter-spacing: .14em;
    cursor: pointer;
    transition: background-color .18s, box-shadow .18s, transform .18s;
}
.auth-btn:hover  { background: var(--brand-hover); box-shadow: 0 8px 20px rgba(14, 165, 233, .28); }
.auth-btn:active { transform: translateY(0) scale(.99); }
.auth-btn:disabled { opacity: .6; cursor: not-allowed; box-shadow: none; transform: none; }
.auth-btn.loading .btn-text { visibility: hidden; }
.auth-btn.loading::after {
    content: '';
    position: absolute; left: 50%; top: 50%;
    width: 16px; height: 16px; margin: -8px 0 0 -8px;
    border: 2px solid rgba(255, 255, 255, .4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: authSpin .7s linear infinite;
}
@keyframes authSpin { to { transform: rotate(360deg); } }

/* ---------- 底部链接 ---------- */
.auth-foot { text-align: center; margin-top: 22px; font-size: .86rem; color: var(--muted); }
.auth-foot a { color: var(--brand-hover); font-weight: 600; text-decoration: none; }
.auth-foot a:hover { text-decoration: underline; }

.auth-back {
    display: block; text-align: center; margin-top: 18px;
    font-size: .82rem; color: var(--faint); text-decoration: none;
}
.auth-back:hover { color: var(--brand-hover); }
.auth-back svg { width: 12px; height: 12px; vertical-align: -1px; margin-right: 4px; }

/* 兼容旧页面中的背景网格 div（置空，不产生任何视觉噪音） */
.bg-grid { display: none; }