/* ════════════════════════════════════════════
   校园图书馆 - 登录页共享样式
   学生登录 & 管理员登录 共用
   通过 :root 变量实现主题切换
   ════════════════════════════════════════════ */

/* 基础重置 */
.login-page, .login-page * { margin: 0; padding: 0; box-sizing: border-box; }

.login-page {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--login-bg, #0f172a);
    overflow: hidden;
    padding: 1rem;
}

/* ── 动态背景 ── */
.login-bg {
    position: fixed; inset: 0; z-index: 0;
    background: var(--login-bg-gradient, linear-gradient(135deg, #1e1b4b 0%, #312e81 30%, #1e3a8a 60%, #0f172a 100%));
}
.login-bg::before {
    content: '';
    position: absolute;
    width: 600px; height: 600px;
    border-radius: 50%;
    background: var(--login-glow1, radial-gradient(circle, rgba(99,102,241,.25), transparent 70%));
    top: -200px; right: -150px;
    animation: loginFloat1 8s ease-in-out infinite;
}
.login-bg::after {
    content: '';
    position: absolute;
    width: 500px; height: 500px;
    border-radius: 50%;
    background: var(--login-glow2, radial-gradient(circle, rgba(59,130,246,.2), transparent 70%));
    bottom: -180px; left: -120px;
    animation: loginFloat2 10s ease-in-out infinite;
}
@@keyframes loginFloat1 {
    0%,100% { transform: translate(0,0) scale(1); }
    50% { transform: translate(-40px,30px) scale(1.08); }
}
@@keyframes loginFloat2 {
    0%,100% { transform: translate(0,0) scale(1); }
    50% { transform: translate(50px,-30px) scale(1.1); }
}

/* 网格线装饰（管理员页用） */
.login-grid {
    position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background-image:
        linear-gradient(rgba(255,255,255,.015) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.015) 1px, transparent 1px);
    background-size: 60px 60px;
}

/* 粒子 */
.login-particles { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.login-particle {
    position: absolute;
    background: rgba(255,255,255,.06);
    border-radius: 50%;
    animation: loginParticleFloat linear infinite;
}
@@keyframes loginParticleFloat {
    0% { transform: translateY(100vh) scale(0); opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { transform: translateY(-100px) scale(1); opacity: 0; }
}

/* ── 登录容器 ── */
.login-wrap {
    position: relative; z-index: 1;
    width: 100%; max-width: 420px;
}

/* ── 头部 ── */
.login-header {
    text-align: center; color: #fff; margin-bottom: 1.8rem;
}
.login-header .logo-icon {
    width: 76px; height: 76px;
    background: var(--logo-bg, rgba(255,255,255,.1));
    backdrop-filter: blur(12px);
    border: 1.5px solid rgba(255,255,255,.15);
    border-radius: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    margin-bottom: .85rem;
    box-shadow: 0 8px 32px rgba(0,0,0,.25);
    transition: transform .3s;
}
.login-header .logo-icon:hover { transform: scale(1.05) rotate(-3deg); }
.login-header h1 {
    font-size: 1.5rem; font-weight: 700;
    letter-spacing: .02em;
    text-shadow: 0 2px 8px rgba(0,0,0,.3);
}
.login-header .sub-desc {
    font-size: .85rem; opacity: .75; margin-top: .35rem;
    letter-spacing: .04em;
}
.login-header .role-tag {
    display: inline-block;
    padding: .2rem .85rem;
    border-radius: 20px;
    font-size: .75rem;
    font-weight: 600;
    margin-top: .55rem;
    backdrop-filter: blur(4px);
}

/* ── 卡片 ── */
.login-card {
    background: rgba(255,255,255,.97);
    backdrop-filter: blur(20px);
    border-radius: 20px;
    padding: 2.2rem 2rem 1.8rem;
    box-shadow: 0 24px 64px rgba(0,0,0,.35), 0 1px 0 rgba(255,255,255,.1) inset;
    border: 1px solid rgba(255,255,255,.2);
}
.login-card .card-title {
    text-align: center;
    font-size: .88rem;
    color: #64748b;
    margin-bottom: 1.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
}

/* ── 错误提示 ── */
.login-error {
    background: #fef2f2; color: #dc2626;
    padding: .6rem .85rem; border-radius: 10px;
    font-size: .8rem; margin-bottom: 1rem;
    display: none; align-items: center; gap: .4rem;
    border: 1px solid #fecaca;
    animation: loginShake .4s ease;
}
@@keyframes loginShake {
    0%,100% { transform: translateX(0); }
    25% { transform: translateX(-6px); }
    75% { transform: translateX(6px); }
}

/* ── 表单 ── */
.login-form .form-group { margin-bottom: 1rem; position: relative; }
.login-form .form-group label {
    display: block; font-size: .78rem; font-weight: 600;
    margin-bottom: .35rem; color: #475569;
}
.login-form .form-group .label-hint {
    font-size: .7rem; color: #94a3b8; font-weight: 400; margin-left: .2rem;
}
.login-form .input-wrapper {
    position: relative; display: flex; align-items: center;
}
.login-form .input-wrapper .input-icon {
    position: absolute; left: .85rem; z-index: 2;
    color: #94a3b8; font-size: .9rem;
    transition: color .2s;
    pointer-events: none;
}
.login-form .input-wrapper:focus-within .input-icon { color: var(--login-primary, #4f46e5); }
.login-form .form-control {
    width: 100%; padding: .65rem .85rem .65rem 2.5rem;
    border: 1.5px solid #e2e8f0;
    border-radius: 11px;
    font-size: .9rem;
    background: #f8fafc;
    transition: all .2s;
    color: #1e293b;
}
.login-form .form-control::placeholder { color: #cbd5e1; }
.login-form .form-control:focus {
    outline: none;
    border-color: var(--login-primary-light, #818cf8);
    box-shadow: 0 0 0 3.5px rgba(99,102,241,.1);
    background: #fff;
}

/* ── 密码切换 ── */
.login-toggle-pwd {
    position: absolute; right: .7rem; z-index: 2;
    background: none; border: none;
    color: #94a3b8; cursor: pointer;
    font-size: .9rem; padding: .25rem .35rem;
    transition: color .2s;
}
.login-toggle-pwd:hover { color: #64748b; }

/* ── 登录按钮 ── */
.login-btn {
    width: 100%; padding: .72rem;
    background: var(--login-btn-grad, linear-gradient(135deg, #4f46e5, #6366f1));
    color: #fff; border: none;
    border-radius: 11px;
    font-size: .95rem; font-weight: 600;
    cursor: pointer; transition: all .25s;
    margin-top: .6rem;
    letter-spacing: .04em;
    position: relative; overflow: hidden;
}
.login-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--login-btn-shadow, 0 6px 20px rgba(79,70,229,.4));
    background: var(--login-btn-hover, linear-gradient(135deg, #4338ca, #4f46e5));
}
.login-btn:active { transform: translateY(0); }
.login-btn i { margin-right: .4rem; }
.login-btn.loading { pointer-events: none; opacity: .8; }
.login-btn.loading .btn-text { visibility: hidden; }
.login-btn.loading::after {
    content: '';
    position: absolute;
    width: 18px; height: 18px;
    border: 2px solid rgba(255,255,255,.3);
    border-top-color: #fff;
    border-radius: 50%;
    top: calc(50% - 9px); left: calc(50% - 9px);
    animation: loginSpin .6s linear infinite;
}
@@keyframes loginSpin { to { transform: rotate(360deg); } }

/* ── 底部链接 ── */
.login-link-bar {
    text-align: center; margin-top: 1.1rem; font-size: .82rem;
    color: #94a3b8;
    display: flex; justify-content: center; align-items: center; gap: .35rem;
}
.login-link-bar a {
    color: var(--login-primary, #4f46e5); text-decoration: none; font-weight: 500;
    transition: color .2s;
}
.login-link-bar a:hover { color: var(--login-primary-dark, #3730a3); text-decoration: underline; }

/* ── 页脚 ── */
.login-footer {
    text-align: center; color: rgba(255,255,255,.55);
    margin-top: 1.6rem; font-size: .8rem;
    letter-spacing: .02em;
}

/* ── 提示文字块（管理员默认密码） ── */
.login-hint {
    text-align: center; font-size: .75rem; color: #94a3b8;
    margin-top: .85rem; padding: .4rem .6rem;
    background: #f1f5f9; border-radius: 8px;
}

/* ── 响应式 ── */
@@media (max-width: 480px) {
    .login-card { padding: 1.6rem 1.3rem 1.4rem; border-radius: 16px; }
    .login-header { margin-bottom: 1.3rem; }
    .login-header .logo-icon { width: 60px; height: 60px; font-size: 1.6rem; border-radius: 16px; }
    .login-header h1 { font-size: 1.3rem; }
}