/*!
 * login.css —— 后台登录页浅色皮肤（左右分栏版）
 *
 * 布局（参考设计稿）：
 *   桌面端 ≥992px：左侧品牌区（Logo/标题/副标题/特性列表） + 右侧白色登录卡片
 *   平板/手机 <992px：上下堆叠，品牌区在上；<576px 隐藏特性列表，只留 Logo+标题
 *
 * 加载顺序：bootstrap.css → fastadmin.css → backend.css → skins/*.css → custom-theme.css → 本文件
 * 同 class 名等优先级时，本文件后加载，自然覆盖 custom-theme.css §3 中的深色规则，
 * 不使用 !important，不修改任何核心 CSS。
 *
 * 设计原则
 *   1. 仅作用于登录页专属 class（fa-login-* / fa-field-* / fa-pwdtoggle 等），
 *      不影响后台任何其它页面。
 *   2. 全部背景纹理由内联 SVG data-uri 生成，不引入外网资源（CDN/图片），内网可用。
 *   3. 移动端输入高度 ≥44px、字号 ≥14px，满足现场手机登录。
 *   4. 支持 prefers-reduced-motion，自动关闭装饰动画。
 *
 * 章节
 *   1. 设计令牌 Design Tokens
 *   2. 页面背景（浅青蓝渐变 + 网格纹理 + 光晕）
 *   3. 布局：左右分栏 / 上下堆叠
 *   4. 左侧品牌区（Logo / 标题 / 副标题 / 特性列表）
 *   5. 登录卡片
 *   6. 输入项（图标 / 聚焦 / 验证码 / 密码眼睛）
 *   7. 保持会话（自定义 checkbox）
 *   8. 登录按钮（青绿渐变 / hover / loading）
 *   9. 错误提示条
 *  10. 底部备案
 *  11. 响应式
 */

/* ==========================================================================
   1. 设计令牌 Design Tokens
   ========================================================================== */
.fa-login-shell {
    /* 主色：青绿（参考设计稿的登录按钮）+ 蓝色点缀 */
    --login-primary: #0ea5a4;
    --login-primary-end: #34d399;
    --login-primary-soft: rgba(14, 165, 164, .12);
    --login-primary-shadow: rgba(14, 165, 164, .28);
    --login-accent: #3b82f6;

    /* 中性色 */
    --login-text: #1f2937;
    --login-text-strong: #0f172a;
    --login-text-muted: #64748b;
    --login-text-sub: #94a3b8;
    --login-border: #e2e8f0;
    --login-border-strong: #cbd5e1;
    --login-card-bg: #ffffff;

    /* 语义色 */
    --login-danger-bg: #fef2f2;
    --login-danger-border: #fecaca;
    --login-danger-text: #b91c1c;

    /* 动效 */
    --login-ease: cubic-bezier(.4, 0, .2, 1);
    --login-dur: .22s;
}

/* ==========================================================================
   2. 页面背景：极浅青蓝渐变 + 网格纹理 + 柔和光晕
   ========================================================================== */
body.fa-login-page {
    min-height: 100vh;
    color: var(--login-text);
    background-color: #f3f9fb;
    background-image:
        radial-gradient(760px 460px at 0% 0%, rgba(59, 130, 246, .10), transparent 60%),
        radial-gradient(720px 460px at 100% 0%, rgba(14, 165, 164, .10), transparent 60%),
        linear-gradient(155deg, #fbfdfe 0%, #f0f7fa 50%, #e6f2f6 100%);
    background-attachment: fixed;
    background-size: cover;
}

/* 极淡网格纹理：内联 SVG，零网络请求 */
body.fa-login-page::before {
    content: '';
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    pointer-events: none;
    z-index: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'><path d='M44 0H0v44' fill='none' stroke='%2394a3b8' stroke-opacity='0.08' stroke-width='1'/></svg>");
    background-size: 44px 44px;
}

/* 左下角青色光晕：纯装饰 */
body.fa-login-page::after {
    content: '';
    position: fixed;
    left: -140px;
    bottom: -140px;
    width: 460px;
    height: 460px;
    pointer-events: none;
    z-index: 0;
    background: radial-gradient(circle, rgba(14, 165, 164, .16), transparent 62%);
    filter: blur(46px);
    animation: fa-login-float 18s ease-in-out infinite alternate;
}

@keyframes fa-login-float {
    0%   { transform: translate(0, 0) scale(1); }
    100% { transform: translate(60px, -50px) scale(1.1); }
}

@media (prefers-reduced-motion: reduce) {
    body.fa-login-page::after { animation: none; }
}

/* 系统配置的登录背景图：浅色主题下调低存在感 */
.fa-login-bgimg { opacity: .18; }

/* ==========================================================================
   3. 布局：左右分栏
   ========================================================================== */
.fa-login-shell {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px 28px;
}

.fa-login-layout {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 96px;
    width: 100%;
    max-width: 1080px;
}

/* ==========================================================================
   4. 左侧品牌区
   ========================================================================== */
.fa-login-hero {
    flex: 1 1 auto;
    max-width: 460px;
}

.fa-login-logo {
    width: 88px;
    height: 88px;
    margin-bottom: 20px;
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--login-primary) 0%, var(--login-primary-end) 100%);
    box-shadow: 0 12px 28px var(--login-primary-shadow);
}

.fa-login-logo img {
    max-width: 100%;
    max-height: 100%;
    display: block;
    background: #fff; /* 透明底 Logo 在渐变上更清晰 */
}

.fa-login-logo-fallback {
    color: #fff;
    font-size: 30px;
    font-weight: 700;
    letter-spacing: 2px;
}

.fa-login-title {
    margin: 0 0 10px;
    font-size: 34px;
    font-weight: 700;
    color: var(--login-text-strong);
    letter-spacing: 1px;
}

.fa-login-sub {
    margin: 0 0 26px;
    font-size: 15px;
    color: var(--login-text-muted);
    letter-spacing: .5px;
}

/* 特性列表：青绿对勾 + 深灰文字 */
.fa-login-features {
    list-style: none;
    margin: 0;
    padding: 0;
}

.fa-login-features li {
    display: flex;
    align-items: flex-start;
    margin-bottom: 14px;
    font-size: 14px;
    line-height: 1.6;
    color: #475569;
}

.fa-login-features li:last-child { margin-bottom: 0; }

.fa-login-features i {
    color: var(--login-primary);
    font-size: 15px;
    margin: 3px 10px 0 0;
    flex: 0 0 auto;
}

/* ==========================================================================
   5. 登录卡片
   ========================================================================== */
.fa-login-card {
    position: relative;
    flex: 0 0 400px;
    max-width: 400px;
    padding: 34px 30px 28px;
    border-radius: 12px;
    background: var(--login-card-bg);
    border: 1px solid var(--login-border);
    box-shadow:
        0 1px 2px rgba(15, 23, 42, .04),
        0 18px 44px rgba(15, 23, 42, .08);
    animation: fa-login-rise .5s var(--login-ease) both;
}

/* 卡片顶部主色细线（参考设计稿） */
.fa-login-card::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 24px;
    right: 24px;
    height: 3px;
    border-radius: 0 0 3px 3px;
    background: linear-gradient(90deg, var(--login-primary) 0%, var(--login-accent) 100%);
}

@keyframes fa-login-rise {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .fa-login-card { animation: none; }
}

/* ==========================================================================
   6. 输入项
   ========================================================================== */
.fa-field {
    position: relative;
    margin-bottom: 14px;
}

.fa-field-icon {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    color: var(--login-text-sub);
    pointer-events: none;
    z-index: 2;
    transition: color var(--login-dur) var(--login-ease);
}

.fa-field .form-control {
    height: 46px;
    padding: 0 44px 0 40px;
    color: var(--login-text);
    background: var(--login-card-bg);
    border: 1px solid var(--login-border-strong);
    border-radius: 8px;
    box-shadow: none;
    font-size: 14px;
    transition: border-color var(--login-dur) var(--login-ease),
                box-shadow var(--login-dur) var(--login-ease);
}

.fa-field .form-control::placeholder {
    color: #b8c2cf;
}

/* 聚焦：青绿边 + 柔光，前置图标同步变色 */
.fa-field .form-control:focus {
    border-color: var(--login-primary);
    box-shadow: 0 0 0 4px var(--login-primary-soft);
    outline: none;
}

.fa-field .form-control:focus ~ .fa-field-icon {
    color: var(--login-primary);
}

/* 6.1 验证码 */
.fa-field-has-addon .form-control {
    padding-right: 118px;
}

.fa-field-addon {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    z-index: 3;
    line-height: 0;
}

.fa-field-addon img {
    height: 34px;
    border-radius: 6px;
    cursor: pointer;
    display: block;
    border: 1px solid var(--login-border);
    transition: border-color var(--login-dur) ease, transform var(--login-dur) ease;
}

.fa-field-addon img:hover {
    border-color: var(--login-primary);
    transform: scale(1.02);
}

/* 6.2 密码显示切换：眼睛按钮（login.js 注入） */
.fa-pwdtoggle {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    color: var(--login-text-sub);
    cursor: pointer;
    padding: 4px;
    line-height: 1;
    user-select: none;
    transition: color var(--login-dur) ease;
}

.fa-pwdtoggle:hover { color: var(--login-primary); }
.fa-pwdtoggle i { pointer-events: none; }

.fa-field-with-toggle .form-control { padding-right: 42px; }

/* ==========================================================================
   7. 保持会话：自定义 checkbox
   ========================================================================== */
.fa-login-keeplogin {
    margin: 2px 0 18px;
    font-size: 13px;
    color: var(--login-text-muted);
}

.fa-login-keeplogin label {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
}

/* 原生 checkbox 视觉隐藏，保留可访问性 */
.fa-login-keeplogin input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.fa-login-keeplogin .check-box {
    width: 16px;
    height: 16px;
    border: 1.5px solid var(--login-border-strong);
    border-radius: 4px;
    margin-right: 8px;
    background: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background var(--login-dur) ease, border-color var(--login-dur) ease, box-shadow var(--login-dur) ease;
    flex: 0 0 16px;
}

.fa-login-keeplogin input[type="checkbox"]:checked + .check-box {
    background: var(--login-primary);
    border-color: var(--login-primary);
}

/* 选中白对勾：border 手绘，无图片 */
.fa-login-keeplogin input[type="checkbox"]:checked + .check-box::after {
    content: '';
    width: 5px;
    height: 9px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) translate(-1px, -1px);
}

.fa-login-keeplogin input[type="checkbox"]:focus-visible + .check-box {
    box-shadow: 0 0 0 3px var(--login-primary-soft);
}

/* ==========================================================================
   8. 登录按钮：青绿渐变（参考设计稿）
   ========================================================================== */
.fa-login-submit {
    width: 100%;
    height: 48px;
    border: none;
    border-radius: 8px;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 6px;
    background: linear-gradient(135deg, var(--login-primary) 0%, var(--login-primary-end) 100%);
    box-shadow: 0 8px 20px var(--login-primary-shadow);
    transition: transform var(--login-dur) var(--login-ease),
                box-shadow var(--login-dur) var(--login-ease),
                filter var(--login-dur) var(--login-ease);
    cursor: pointer;
}

.fa-login-submit:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(14, 165, 164, .38);
    filter: brightness(1.05);
    color: #fff;
}

.fa-login-submit:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: 0 5px 14px var(--login-primary-shadow);
}

.fa-login-submit:disabled {
    cursor: not-allowed;
    opacity: .85;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .fa-login-submit:hover:not(:disabled) { transform: none; }
}

/* loading 态旋转图标（login.js 注入） */
.fa-login-submit .fa-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 8px;
    border: 2px solid rgba(255, 255, 255, .4);
    border-top-color: #fff;
    border-radius: 50%;
    vertical-align: -2px;
    animation: fa-login-spin .8s linear infinite;
}

@keyframes fa-login-spin { to { transform: rotate(360deg); } }

/* ==========================================================================
   9. 错误提示条
   ========================================================================== */
#errtips {
    margin-bottom: 14px;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 13px;
    background: var(--login-danger-bg);
    border: 1px solid var(--login-danger-border);
    color: var(--login-danger-text);
}

#errtips:empty,
#errtips.hide { display: none; }

/* ==========================================================================
   10. 底部备案信息
   ========================================================================== */
.fa-login-foot {
    margin-top: 36px;
    text-align: center;
    font-size: 12px;
    color: var(--login-text-sub);
}

.fa-login-foot a {
    color: var(--login-text-muted);
    text-decoration: none;
    transition: color var(--login-dur) ease;
}

.fa-login-foot a:hover { color: var(--login-primary); }

/* ==========================================================================
   11. 响应式
   ========================================================================== */

/* 平板 <992px：上下堆叠，品牌区居中在上 */
@media (max-width: 991px) {
    .fa-login-shell { padding: 36px 20px 24px; }

    .fa-login-layout {
        flex-direction: column;
        gap: 32px;
        max-width: 440px;
    }

    .fa-login-hero {
        max-width: none;
        text-align: center;
        flex: none;
    }

    .fa-login-logo { margin: 0 auto 16px; }

    .fa-login-features {
        display: inline-flex;
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
        margin: 0 auto;
    }

    .fa-login-card {
        flex: none;
        width: 100%;
        max-width: 440px;
    }
}

/* 手机 <576px：隐藏特性列表，聚焦登录本身 */
@media (max-width: 575px) {
    .fa-login-shell { padding: 28px 16px 20px; }

    .fa-login-features { display: none; }

    .fa-login-sub { margin-bottom: 0; }

    .fa-login-title { font-size: 26px; }

    .fa-login-logo { width: 68px; height: 68px; }

    .fa-login-card {
        padding: 26px 20px 22px;
        border-radius: 10px;
    }

    .fa-field .form-control {
        height: 48px;    /* ≥44px 触控 */
        font-size: 14px; /* ≥14px 字号 */
    }

    .fa-login-submit { height: 50px; }

    .fa-login-foot { margin-top: 24px; }
}

/* 极窄屏 ≤360px */
@media (max-width: 360px) {
    .fa-login-card { padding: 22px 16px 18px; }
}