/* ============================================================
 * 登录页样式 login.css
 *
 * 设计要点：
 *   1. 左右分栏：左侧品牌视觉区（配图 + 一层主题色遮罩），右侧登录卡片；
 *   2. 主色固定为「极客青 #1ab394」，只由本文件 :root 的变量决定：
 *      登录页不引 kxd-theme.css、不读 localStorage，后台切换色彩风格不影响登录页；
 *   3. 移动端 < 992px 收起左侧视觉区，登录卡片占满一屏。
 *
 * 加载顺序：bootstrap → font-awesome → style.css → ry-ui → login.css
 *   本文件选择器权重均高于 ry-ui / style.css 的通用规则（.form-control / .btn 等）。
 * ============================================================ */

/* --- 登录页固定主色：极客青（与后台默认主题同色，但不随主题切换） --- */
:root {
    --kxd-primary: #1ab394;
    --kxd-primary-dark: #169b80;
    --kxd-primary-text: #2fd0b0;
    --kxd-primary-rgb: 26, 179, 148;
    --kxd-primary-deep: #0f7a66;
    /* 实心按钮承载白字的更深一档，保证对比度 ≥ 4.5:1 */
    --kxd-primary-darker: #0a5b4d;
    --kxd-primary-ring: rgba(26, 179, 148, .15);
}

/* ---------- 整页基底 ---------- */
html { height: 100%; }

body.signin {
    margin: 0;
    /* 纵向 flex：上部分栏区撑满，页脚自然落在整页底部 */
    display: flex;
    flex-direction: column;
    min-height: 100%;
    height: auto;
    background: #10151f;
    color: #303133;
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
}

/* ---------- 分栏容器 ---------- */
.login-wrap {
    position: relative;
    z-index: 1;
    display: flex;
    /* 占满页脚以上的剩余高度（页脚高度由自身内容决定） */
    flex: 1 1 auto;
}

/* ---------- 左侧 · 品牌视觉区 ---------- */
.login-visual {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 48px 56px;
    background-color: #16323a;
}

/* 配图铺满容器：悬停时缓慢放大，放大本身不会露边，故基准不预留缩放余量 */
.login-visual-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    transform: scale(1);
    transition: transform 1.2s cubic-bezier(.16, 1, .3, 1);
    /* 配图转存阿里云 OSS（源文件仍在 static/img/login-bg.jpg 作为备份）
     * 换图：上传新图覆盖 OSS 上的 static/login-bg.jpg，并刷新 CDN 缓存 */
    background-image: url(https://oss.kxdtest.com/static/login-bg.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

/* 悬停左侧视觉区：配图缓慢放大一次（1.2s 缓出，移开后原路缓回） */
.login-visual:hover .login-visual-bg {
    transform: scale(1.06);
}

/* 主题色渐变遮罩：兼顾配图质感与文字可读性（压在配图层之上） */
.login-visual::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    background: linear-gradient(160deg,
        rgba(var(--kxd-primary-rgb), .55) 0%,
        rgba(11, 16, 24, .66) 52%,
        rgba(11, 16, 24, .9) 100%);
}

/* 底部压暗层：背景配图下半部较亮，压暗以保证左下角品牌文字可读性（对比度 ≥ 4.5:1） */
.login-visual::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    height: 62%;
    pointer-events: none;
    background: linear-gradient(to top, rgba(11, 16, 24, .62) 0%, rgba(11, 16, 24, 0) 100%);
}

.login-brand {
    position: relative;
    z-index: 2;
    max-width: 560px;
    color: #fff;
}

.login-brand .login-logo {
    display: block;
    width: 64px;
    height: 64px;
    padding: 3px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .28);
}

.login-brand h1 {
    margin: 24px 0 8px;
    font-size: 34px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: 1px;
    color: #fff;
}

.login-brand .login-brand-sub {
    margin: 0;
    font-size: 14px;
    letter-spacing: .5px;
    color: rgba(255, 255, 255, .72);
}

.login-points {
    list-style: none;
    margin: 32px 0 0;
    padding: 0;
}

.login-points li {
    display: flex;
    align-items: flex-start;
    margin-bottom: 16px;
    font-size: 14px;
    line-height: 20px;
    color: rgba(255, 255, 255, .88);
}

.login-points li .fa {
    flex: 0 0 20px;
    width: 20px;
    line-height: 20px;
    text-align: left;
    font-size: 15px;
    color: var(--kxd-primary-text);
}

.login-visual-foot {
    position: relative;
    z-index: 2;
    margin-top: 32px;
    font-size: 12px;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, .55);
}

/* ---------- 右侧 · 登录区 ---------- */
/* 注意：style.css 第 773 行有 INSPINIA 遗留的 .login-panel { margin-top:25% }，
 * 会把这个面板整体顶下去，必须用 .login-wrap 提权清零 */
.login-wrap .login-panel {
    margin-top: 0;
}
.login-panel {
    position: relative;
    overflow: hidden;
    flex: 0 0 46%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 32px;
    background-color: #f5f7fa;
    /* 科技感底纹：右上角主色光晕 + 48px 主色细网格 */
    background-image:
        radial-gradient(520px 520px at 100% 0%, rgba(var(--kxd-primary-rgb), .08), rgba(var(--kxd-primary-rgb), 0) 70%),
        linear-gradient(rgba(var(--kxd-primary-rgb), .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(var(--kxd-primary-rgb), .035) 1px, transparent 1px);
    background-size: auto, 48px 48px, 48px 48px;
    background-repeat: no-repeat, repeat, repeat;
}

/* ---------- 右侧 · 科技感几何线条装饰层 ---------- */
/* 容器只负责铺满与隔离；节点网络的绘制与动效全部由 canvas 完成（见 /js/login-geo.js），
 * 因此这里没有任何 @keyframes，动画开销不落在 CSS 合成层上 */
.login-geo {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.login-geo-canvas {
    display: block;
    width: 100%;
    height: 100%;
}

.login-card {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 400px;
    padding: 40px 36px 26px;
    background: #fff;
    border: 1px solid #eef0f3;
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(16, 21, 31, .08), 0 2px 8px rgba(16, 21, 31, .05);
}

.login-title {
    margin: 0 0 8px;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 1px;
    color: #1f2430;
}

.login-desc {
    margin: 0 0 28px;
    font-size: 13px;
    line-height: 1.6;
    color: #6b7280;
}

/* ---------- 输入框（图标前缀 + 主色聚焦态） ---------- */
.login-field {
    position: relative;
    margin-bottom: 16px;
}

.login-field > .fa {
    position: absolute;
    left: 13px;
    top: 50%;
    margin-top: -7px;
    font-size: 14px;
    line-height: 14px;
    color: #c0c4cc;
    pointer-events: none;
    transition: color .2s;
}

/* 权重 0,2,0 > 主题层 .form-control（0,1,0），保证高度/圆角不被覆盖 */
.login-field .form-control {
    height: 44px;
    line-height: 22px;
    padding: 0 14px 0 38px;
    background: #fbfcfd;
    border: 1px solid #dcdfe6;
    border-radius: 8px;
    box-shadow: none;
    font-size: 14px;
    color: #303133;
    transition: border-color .2s, box-shadow .2s, background-color .2s;
}

.login-field .form-control:focus {
    background: #fff;
    border-color: var(--kxd-primary);
    box-shadow: 0 0 0 3px var(--kxd-primary-ring);
}

.login-field:focus-within > .fa { color: var(--kxd-primary); }

/* 占位文字颜色：#6b7280，在浅色输入框底上满足 WCAG AA 4.5:1 对比度 */
.login-field .form-control::-webkit-input-placeholder { color: #6b7280; }
.login-field .form-control::placeholder { color: #6b7280; }

/* 浏览器自动填充：抹掉黄色底，保持与手输一致 */
.login-field .form-control:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #fff inset;
    -webkit-text-fill-color: #303133;
}

/* 密码明文切换按钮：与密码框等高，压在右侧内边距里 */
.login-field .login-eye {
    position: absolute;
    top: 0;
    right: 0;
    width: 44px;
    height: 44px;
    line-height: 44px;
    text-align: center;
    font-size: 14px;
    color: #c0c4cc;
    transition: color .2s;
}

.login-field .login-eye:hover,
.login-field .login-eye.active { color: var(--kxd-primary); }

/* 密码框给右侧按钮让出位置 */
.login-field .form-control.pword { padding-right: 44px; }

/* 校验失败提示（jquery.validate 生成 label.error）
 * ry-ui.min.css 里 label.error 是绝对定位到输入框右侧的，此处改回流式排布，
 * 显示在输入框下方，避免与占位文字挤在同一行 */
.login-field label.error {
    position: static;
    right: auto;
    top: auto;
    display: block;
    margin: 6px 0 0;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.5;
    /* 错误提示色：#d93025，在白底上满足 WCAG AA 4.5:1 对比度 */
    color: #d93025;
}

/* 校验失败时输入框描边转红（覆盖 ry-ui 的 input.error 粉底） */
.login-field .form-control.error {
    background: #fff;
    border-color: #d93025;
    box-shadow: none;
}

/* ---------- 验证码行 ---------- */
.login-code-row {
    display: flex;
    align-items: flex-start;
    margin-bottom: 22px;
}

.login-code-row .login-field {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0 12px 0 0;
}

.login-code-row .form-control.code { letter-spacing: 3px; }

.login-code-img {
    display: block;
    flex: 0 0 116px;
    height: 44px;
    overflow: hidden;
    background: #f5f7fa;
    border: 1px solid #dcdfe6;
    border-radius: 8px;
    transition: border-color .2s;
}

.login-code-img:hover { border-color: var(--kxd-primary); }

.login-code-img .imgcode {
    display: block;
    width: 100%;
    height: 100%;
}

/* ---------- 登录按钮 ---------- */
/* 权重 0,2,0 并保留 !important，确保主题层 .btn-primary 后加载也不变色 */
.login-btn {
    height: 46px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--kxd-primary-deep), var(--kxd-primary-darker)) !important;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 2px;
    box-shadow: 0 6px 16px rgba(var(--kxd-primary-rgb), .28);
    transition: box-shadow .2s, transform .15s, opacity .2s;
}

.login-btn:hover,
.login-btn:focus {
    background: linear-gradient(135deg, var(--kxd-primary-darker), var(--kxd-primary-darker)) !important;
    color: #fff !important;
    box-shadow: 0 9px 22px rgba(var(--kxd-primary-rgb), .36);
}

.login-btn:active { transform: translateY(1px); }

/* 键盘聚焦：可见焦点环（焦点环继续用亮阶主色，不动按钮实心底色） */
.login-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .55), 0 6px 16px rgba(var(--kxd-primary-rgb), .32);
}

/* ---------- 整页页脚（版权 + 备案，横跨页面底部） ---------- */
.login-foot {
    flex: 0 0 auto;
    /* 版权与备案排在同一行；窄屏放不下时自动换行 */
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    column-gap: 14px;
    row-gap: 2px;
    padding: 16px 20px;
    text-align: center;
    font-size: 12px;
    line-height: 1.9;
    color: rgba(255, 255, 255, .62);
    border-top: 1px solid rgba(255, 255, 255, .06);
}

.login-foot-links a {
    color: rgba(255, 255, 255, .72);
    text-decoration: none;
    transition: color .2s;
}

.login-foot-links a:hover,
.login-foot-links a:focus {
    color: var(--kxd-primary-text);
    text-decoration: underline;
}

/* 公网安备链接前的公安部官方徽标（原图 62x67，按高度等比缩放，与 12px 文字行对齐） */
.login-foot-links a .login-foot-icon {
    width: auto;
    height: 16px;
    margin-right: 4px;
    vertical-align: -4px;
}

/* 两个备案号之间留间距 */
.login-foot-links a + a { margin-left: 14px; }

/* ---------- 移动端品牌块（桌面端隐藏，仅在 < 992px 展示） ---------- */
/* relative + z-index：压住几何线条装饰层 */
.login-mobile-brand { display: none; position: relative; z-index: 1; }

.login-mobile-logo {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    padding: 2px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 4px 12px rgba(16, 21, 31, .12);
}

.login-mobile-brand-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.login-mobile-brand-name {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: .5px;
    color: #1f2430;
    line-height: 1.3;
}

.login-mobile-brand-sub {
    font-size: 12px;
    color: #6b7280;
    line-height: 1.4;
}

/* ---------- 响应式 ---------- */
@media (max-width: 1440px) {
    .login-visual { padding: 40px 44px; }
    .login-brand h1 { font-size: 30px; }
}

@media (max-width: 1200px) {
    .login-panel { flex: 0 0 50%; padding: 32px 24px; }
    .login-card { padding: 32px 28px 22px; }
    .login-brand h1 { font-size: 26px; }
}

/* 窄屏：收起品牌视觉区，登录区占满一屏（浅渐变叠在网格之上，保留科技底纹） */
@media (max-width: 992px) {
    .login-visual { display: none; }
    .login-panel {
        flex: 1 1 auto;
        /* 品牌块与登录卡片垂直堆叠居中 */
        flex-direction: column;
        justify-content: center;
        padding: 24px 16px;
        background-image:
            linear-gradient(155deg, rgba(var(--kxd-primary-rgb), .16) 0%, rgba(238, 241, 246, .92) 62%, #f5f7fa 100%),
            linear-gradient(rgba(var(--kxd-primary-rgb), .035) 1px, transparent 1px),
            linear-gradient(90deg, rgba(var(--kxd-primary-rgb), .035) 1px, transparent 1px);
        background-size: auto, 48px 48px, 48px 48px;
        background-repeat: no-repeat, repeat, repeat;
    }
    /* 移动端品牌块：与登录卡片同宽、垂直堆叠居中 */
    .login-mobile-brand {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 20px;
        width: 100%;
        max-width: 400px;
    }
}

@media (max-width: 480px) {
    .login-card { padding: 28px 20px 18px; border-radius: 10px; }
    .login-title { font-size: 21px; }
    .login-code-img { flex: 0 0 100px; }
    .login-code-row .login-field { margin-right: 8px; }
}

/* ---------- 入场动效 ---------- */
/* 入场：一次性淡入上移，不做无限循环 */
@keyframes kxd-login-enter {
    from { opacity: 0; transform: translate3d(0, 8px, 0); }
    to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

.login-brand { animation: kxd-login-enter .5s cubic-bezier(.16, 1, .3, 1) both; }
.login-card  { animation: kxd-login-enter .5s cubic-bezier(.16, 1, .3, 1) .12s both; }

/* 用户系统开启「减少动态效果」时不播放入场动画，配图悬停放大也一并关闭；
 * 右侧 canvas 装饰层同样会退化为静态一帧，由 /js/login-geo.js 判断 */
@media (prefers-reduced-motion: reduce) {
    .login-brand,
    .login-card {
        animation: none;
    }

    .login-visual-bg {
        transition: none;
    }

    .login-visual:hover .login-visual-bg {
        transform: scale(1);
    }
}