/* ==========================================================================
   登录模块样式
   - 登录页专属样式：全部用 body.login-page 限定作用域，绝不污染主页面
   - 主页面顶栏用户信息区：复用主站 CSS 变量，自动跟随明暗主题
   ========================================================================== */

/* ============ 登录页专属（仅作用于 body.login-page） ============ */
body.login-page {
    margin: 0;
    min-height: 100vh;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(160deg, #f7f9fc 0%, #edf1f7 100%);
    position: relative;
    overflow: hidden;
    color: #0f172a;
}

body.login-page * { box-sizing: border-box; }

/* 背景淡彩光晕（蓝 / 紫），让玻璃卡片有层次可透 */
.blob { position: absolute; border-radius: 50%; filter: blur(90px); }
.blob-1 { width: 460px; height: 460px; background: #bfdbfe; top: -140px; left: -90px; opacity: .6; }
.blob-2 { width: 420px; height: 420px; background: #ddd6fe; bottom: -140px; right: -80px; opacity: .55; }
.blob-3 { width: 320px; height: 320px; background: #c7d2fe; top: 46%; right: 16%; opacity: .4; }

.login-wrap {
    position: relative;
    z-index: 1;
    width: 100%;
    padding: 24px;
    display: flex;
    justify-content: center;
}

.login-card {
    width: 100%;
    max-width: 400px;
    padding: 46px 42px 40px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.52);
    backdrop-filter: blur(24px) saturate(170%);
    -webkit-backdrop-filter: blur(24px) saturate(170%);
    border: 1px solid rgba(255, 255, 255, 0.7);
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.10), 0 4px 16px rgba(15, 23, 42, 0.05);
}

.login-brand {
    text-align: center;
    font-size: 21px;
    font-weight: 800;
    letter-spacing: 0.5px;
    color: #0f172a;
}

.login-sub {
    text-align: center;
    font-size: 12.5px;
    color: #94a3b8;
    margin-top: 7px;
    margin-bottom: 34px;
    letter-spacing: 0.3px;
}

.field { margin-bottom: 18px; }

.field label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #64748b;
    margin-bottom: 7px;
}

.field input {
    width: 100%;
    padding: 12px 15px;
    font-size: 14px;
    color: #0f172a;
    background: rgba(255, 255, 255, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 12px;
    outline: none;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.04);
    transition: border-color 0.18s, box-shadow 0.18s, background 0.18s;
}

.field input:focus {
    border-color: #3b82f6;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.12);
}

.login-error {
    min-height: 20px;
    font-size: 13px;
    color: #ef4444;
    margin: 2px 0 12px;
    text-align: center;
}

.login-btn {
    width: 100%;
    padding: 13px;
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    border: none;
    border-radius: 12px;
    cursor: pointer;
    box-shadow: 0 10px 24px rgba(37, 99, 235, 0.28);
    transition: transform 0.12s, box-shadow 0.18s;
}

.login-btn:hover { transform: translateY(-1px); box-shadow: 0 14px 28px rgba(37, 99, 235, 0.34); }
.login-btn:active { transform: translateY(0); }

.login-foot { margin-top: 22px; text-align: center; }

.login-foot a {
    font-size: 13px;
    color: #94a3b8;
    text-decoration: none;
    transition: color 0.15s;
}

.login-foot a:hover { color: #3b82f6; }

/* ============ 主页面顶栏用户信息区（复用主站主题变量，跟随明暗切换） ============ */
.user-box { display: flex; align-items: center; gap: 10px; margin-left: 4px; flex-shrink: 0; }

/* 登录头像（玻璃拟态通用用户图标） */
.user-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
}

.user-email {
    font-size: 13px;
    color: var(--text-light);
    white-space: nowrap;
}

.btn-logout {
    padding: 5px 12px;
    font-size: 13px;
    color: var(--text-muted);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}

.btn-logout:hover {
    border-color: var(--color-rose);
    color: var(--color-rose);
}