@charset "UTF-8";

/* =====================================================================
   登录页样式：企业数字化管理平台 · 左侧品牌区 / 右侧登录卡片
   - 主色为沉稳商务深蓝（背景 #14314D，渐变 #14314D → #1B3F63 → #22547F），
     不使用亮蓝，避免"科技感过强"。
   - 核心布局只用 float / margin:auto（IE9+ 可用）；垂直居中与左栏内容下贴
     由 @supports (display:flex) 作为现代浏览器增强，IE 全系不支持 @supports，
     会自动退化为顶部留白 / 固定间距布局，不会破版。
   - 其余为「渐进增强」：transition / transform / :focus-within / 多层背景 /
     calc / 百分比圆角等，在老内核上表现为单条规则被丢弃，不参与布局计算，
     不会造成破版（IE9 无渐变 → 退化为 background-color 纯色）。
   - 不引入 CSS 变量（--x）、CSS Grid、flex gap：这些会让整段声明失效或无法回退。
   - 后台主题隔离由 login/index.html 的脚本完成（剥离 skin-oosite-active /
     oos-accent / oos-style-*），本文件不依赖任何 --oos-* 变量。
   - 钩子（data-login-form / #pwd_type / #normal_type / #vcode_type /
     #forget_password_button / #change_login_type_button / .send_vcode_login /
     layui-disabled + data-form-loaded）由 admin.js 的 vali 与登录脚本驱动，勿改。
   ===================================================================== */

html,
body {
    height: 100%;
}

body {
    margin: 0;
    padding: 0;
    color: #1F2A37;
    font-size: 14px;
    line-height: 1.5;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
    background-color: #F4F6F9;
    -webkit-font-smoothing: antialiased;
}

.login-container {
    position: relative;
    box-sizing: border-box;
    min-height: 100%;
    min-height: 100vh;
}

.login-container:after {
    content: "";
    display: block;
    clear: both;
}

/* =====================================================================
   左侧：品牌区——Logo 标识 / 品牌名 / 口号 / 服务理念 / 服务理念卡片 / 底部信息条
   ===================================================================== */
.login-aside {
    float: left;
    width: 52%;
    min-height: 100vh;
    box-sizing: border-box;
    padding: 56px 56px 44px;
    color: #FFFFFF;
    /* 底层纯色：IE9 不支持渐变，退化为沉稳深蓝也不会破版 */
    background-color: #14314D;
    /* 细网格 + 两处柔光 + 主渐变：光源集中在左上，右下压暗形成纵深 */
    background-image:
        linear-gradient(rgba(255, 255, 255, .024) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .024) 1px, transparent 1px),
        radial-gradient(circle at 8% 4%, rgba(84, 152, 224, .40) 0%, rgba(84, 152, 224, 0) 46%),
        radial-gradient(circle at 92% 100%, rgba(46, 108, 162, .46) 0%, rgba(46, 108, 162, 0) 54%),
        linear-gradient(150deg, #14314D 0%, #1B3F63 52%, #22547F 100%);
    /* 前两层网格需平铺（配 34px 尺寸），后三层渐变铺满即可 */
    background-repeat: repeat, repeat, no-repeat, no-repeat, no-repeat;
    background-size: 34px 34px, 34px 34px, cover, cover, cover;
}

.login-aside-inner {
    max-width: 520px;
}

/* 超宽屏（≥1440px）：左栏可达 750px 以上，520px 内容贴左会留下大片空白，
   故把内容块居中并适度加宽，形成居中栏的构图；≤1439px 维持贴左的原有版式 */
@media screen and (min-width: 1440px) {
    .login-aside-inner {
        max-width: 560px;
        margin-right: auto;
        margin-left: auto;
    }
}

/* ---------- 品牌标识 ---------- */
.login-brand {
    font-size: 0;
    /* 消除 inline-block 间隙 */
}

.login-brand-mark {
    display: inline-block;
    margin-right: 12px;
    line-height: 0;
    vertical-align: middle;
}

.login-brand-mark svg {
    display: block;
    width: 40px;
    height: 40px;
}

.login-brand-name {
    display: inline-block;
    margin: 0;
    font-size: 19px;
    font-weight: 600;
    line-height: 24px;
    letter-spacing: .6px;
    vertical-align: middle;
}

/* ---------- 口号 / 服务理念 ---------- */
.login-aside-slogan {
    margin: 32px 0 0;
    font-size: 32px;
    font-weight: 600;
    line-height: 1.34;
    letter-spacing: .5px;
}

.login-aside-desc {
    max-width: 440px;
    margin: 18px 0 0;
    color: rgba(255, 255, 255, .72);
    font-size: 14px;
    line-height: 1.9;
}

/* ---------- 服务理念卡片（2×2 网格，float + 百分比，IE9+ 可用） ---------- */
.login-aside-lower {
    margin-top: 52px;
}

.login-services:after {
    content: "";
    display: block;
    clear: both;
    /* 用 clearfix 而非 overflow:hidden，避免裁掉卡片 hover 的上浮位移 */
}

.login-service {
    float: left;
    width: 48%;
    min-height: 128px;
    box-sizing: border-box;
    padding: 18px 16px 16px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 12px;
    background: rgba(255, 255, 255, .06);
    -webkit-transition: background-color .22s, border-color .22s, -webkit-transform .22s;
    transition: background-color .22s, border-color .22s, transform .22s;
}

.login-service:nth-child(odd) {
    margin-right: 4%;
}

.login-service:nth-child(n+3) {
    margin-top: 16px;
}

/* 现代内核：用 calc 把卡片间隙固定为 16px，避免百分比舍入导致换行 */
@supports (width: calc(50% - 8px)) {
    .login-service {
        width: calc(50% - 8px);
    }

    .login-service:nth-child(odd) {
        margin-right: 16px;
    }
}

.login-service:hover {
    border-color: rgba(255, 255, 255, .3);
    background: rgba(255, 255, 255, .1);
    transform: translateY(-2px);
    /* IE9 不支持 transform，忽略即可 */
}

.login-service .layui-icon {
    display: block;
    width: 34px;
    height: 34px;
    color: #FFFFFF;
    font-size: 16px;
    line-height: 34px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 10px;
    background: rgba(255, 255, 255, .08);
}

.login-service b {
    display: block;
    margin-top: 12px;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
}

.login-service span {
    display: block;
    margin-top: 4px;
    color: rgba(255, 255, 255, .66);
    font-size: 12px;
    line-height: 20px;
}

/* ---------- 底部信息条（分隔线收口，避免内容悬空） ---------- */
.login-aside-meta {
    margin-top: 36px;
    padding-top: 16px;
    color: rgba(255, 255, 255, .6);
    font-size: 12px;
    line-height: 20px;
    overflow: hidden;
    /* 容纳右侧浮动的版本号 */
    border-top: 1px solid rgba(255, 255, 255, .14);
}

.login-aside-meta-ver {
    float: right;
    color: rgba(255, 255, 255, .48);
    letter-spacing: .5px;
}

.login-aside-dev {
    display: inline-block;
    margin-top: 14px;
    color: rgba(255, 255, 255, .5);
    font-size: 12px;
    text-decoration: none;
    transition: color .22s;
}

.login-aside-dev:hover {
    color: #FFFFFF;
}

/* =====================================================================
   右侧：登录区
   ===================================================================== */
.login-main {
    float: right;
    width: 48%;
    min-height: 100vh;
    box-sizing: border-box;
    padding: 64px 40px 40px;
    background-color: #F4F6F9;
    background-image:
        radial-gradient(circle at 80% 14%, rgba(31, 78, 121, .07) 0%, rgba(31, 78, 121, 0) 42%),
        radial-gradient(circle at 8% 90%, rgba(31, 78, 121, .05) 0%, rgba(31, 78, 121, 0) 46%);
    background-repeat: no-repeat;
    background-size: cover, cover;
}

.login-card {
    display: block;
    position: relative;
    width: 392px;
    max-width: 100%;
    margin: 0 auto;
    padding: 38px 34px 34px;
    box-sizing: border-box;
    overflow: hidden;
    text-align: left;
    background: #FFFFFF;
    border: 1px solid #E6EBF1;
    border-radius: 14px;
    box-shadow: 0 24px 48px -18px rgba(23, 43, 77, .16), 0 8px 20px -10px rgba(23, 43, 77, .08);
}

/* 卡片顶部品牌色细条：克制的一处点睛 */
.login-card:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background-image: linear-gradient(90deg, #16324F 0%, #2A6198 100%);
}

/* 现代浏览器增强：登录区垂直居中、左栏内容下贴；老内核自动退化为固定间距 */
@supports (display: flex) {
    .login-main {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .login-card,
    .login-footer {
        flex: 0 0 auto;
    }

    .login-aside {
        display: flex;
        flex-direction: column;
    }

    .login-aside-inner {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
    }

    .login-aside-lower {
        margin-top: auto;
        /* 高屏下把卡片与底部信息条贴到左栏底部 */
        padding-top: 52px;
    }
}

.login-card-head {
    margin-bottom: 26px;
}

.login-title {
    margin: 0 0 8px;
    color: #1F2A37;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: .5px;
}

.login-subtitle {
    margin: 0;
    color: #8A94A6;
    font-size: 13px;
}

/* ---------- 表单字段 ---------- */
.login-fields {
    margin: 0;
    padding: 0;
}

.login-field {
    position: relative;
    margin-top: 18px;
    text-shadow: none;
}

.login-fields label {
    display: block;
    position: relative;
    margin: 0;
}

/* 用后代选择器而非 .login-field > label：验证码字段的 label 外层还有
   .layui-row > .layui-col-xs7，直接子选择器匹配不到，会导致图标留在文档流中
   挤出一行高度、并使“发送验证码”按钮与输入框错位 */
.login-field label > i.layui-icon {
    position: absolute;
    top: 50%;
    left: 15px;
    z-index: 1;
    margin-top: -9px;
    padding: 0;
    color: #9AA5B1;
    font-size: 18px;
    line-height: 18px;
    transition: color .18s;
}

.login-field input.layui-input {
    width: 100%;
    height: 46px;
    padding: 0 42px 0 44px;
    box-sizing: border-box;
    color: #1F2A37;
    font-size: 14px;
    line-height: 46px;
    letter-spacing: .3px;
    text-indent: 0;
    text-shadow: none;
    background-color: #FFFFFF;
    border: 1px solid #DDE3EA;
    border-radius: 9px;
    box-shadow: none;
    transition: border-color .18s, box-shadow .18s;
}

.login-field input.layui-input::-webkit-input-placeholder {
    color: #9AA5B1;
}

.login-field input.layui-input::-moz-placeholder {
    color: #9AA5B1;
}

.login-field input.layui-input:-ms-input-placeholder {
    color: #9AA5B1;
}

.login-field input.layui-input::placeholder {
    color: #9AA5B1;
}

.login-field input.layui-input:hover {
    border-color: #C3CCD8;
}

.login-field input.layui-input:focus,
.login-field input.layui-input:active {
    border-color: #1F4E79;
    box-shadow: 0 0 0 3px rgba(31, 78, 121, .13);
}

/* 聚焦时左侧图标同步变主色，形成一处小反馈（老内核不支持 :focus-within，仅不生效） */
.login-field label:focus-within > i.layui-icon {
    color: #1F4E79;
}

/* Chrome / Edge 自动填充：去掉黄色底 */
.login-field input.layui-input:-webkit-autofill,
.login-field input.layui-input:-webkit-autofill:hover,
.login-field input.layui-input:-webkit-autofill:focus,
.login-field input.layui-input:-webkit-autofill:active {
    -webkit-text-fill-color: #1F2A37 !important;
    box-shadow: 0 0 0 1000px #FFFFFF inset !important;
    transition: background-color 9999s ease-out 0s !important;
}

/* ---------- vali 动态插入的错误提示 ----------
   原始内联样式：position:absolute;right:0;width:34px;line-height:输入框高，
   会被挤在输入框内右侧并截断。此处统一改为「输入框下方右对齐的浅红小字」：
   - 全部用 !important 覆盖内联值（内联优先级最高）；
   - 定位基于 label（label 为 position:relative，高度=输入框高），
     利用字段之间 18px 的间隙（.login-help 为 20px）放置，不遮挡、不跳动；
   - 同样用后代选择器，兼顾验证码字段的 .layui-col-xs7 > label 结构。 */
.login-field label > span {
    position: absolute !important;
    /* 兜底：原本依赖 admin.js 的内联 position:absolute */
    top: auto !important;
    bottom: -16px !important;
    right: 2px !important;
    left: auto !important;
    width: auto !important;
    max-width: 100%;
    overflow: hidden;
    padding-right: 0 !important;
    padding-bottom: 0 !important;
    color: #D93026 !important;
    font-size: 12px !important;
    line-height: 16px !important;
    letter-spacing: 0;
    text-align: right !important;
    white-space: nowrap;
    text-overflow: ellipsis;
    /* 提示文案过长时在字段宽度内省略号收尾：既不与下一字段重叠，也不会被卡片 overflow:hidden 裁切 */
}

/* ---------- 忘记密码 / 切换登录方式（float 左右分布） ---------- */
.login-fields .login-help {
    margin-top: 20px;
}

.login-fields .login-help:after {
    content: "";
    display: block;
    clear: both;
}

.login-fields .login-help > a {
    float: left;
    height: auto;
    min-width: 0;
    padding: 0;
    color: #6B7280;
    font-size: 13px;
    line-height: 20px;
    background: transparent;
    border: 0;
    cursor: pointer;
    transition: color .18s;
}

.login-fields .login-help > a + a {
    float: right;
}

.login-fields .login-help > a:hover {
    color: #1F4E79;
    background: transparent;
}

/* ---------- 验证码行 ---------- */
.login-field.vcode .layui-row {
    margin: 0;
}

.login-field.vcode .layui-col-xs5 {
    padding-left: 10px;
}

.login-field .send_vcode_login {
    display: block;
    width: 100%;
    height: 46px;
    min-width: 0;
    padding: 0 8px;
    color: #1F4E79;
    font-size: 13px;
    line-height: 44px;
    white-space: nowrap;
    text-align: center;
    background: #FFFFFF;
    border: 1px solid #DDE3EA;
    border-radius: 9px;
    box-shadow: none;
    cursor: pointer;
    transition: border-color .18s, background-color .18s, color .18s;
}

.login-field .send_vcode_login:hover {
    color: #1F4E79;
    background: #F3F7FB;
    border-color: #B9C9D8;
}

/* ---------- 提交按钮 ---------- */
.login-fields .login-submit {
    margin-top: 26px;
}

.login-field .login-btn {
    display: block;
    width: 100%;
    height: 46px;
    padding: 0;
    color: #FFFFFF !important;
    font-size: 15px;
    font-weight: 600;
    line-height: 46px;
    letter-spacing: 3px;
    background-color: #1F4E79 !important;
    border: 0;
    border-radius: 9px;
    box-shadow: 0 10px 22px -8px rgba(31, 78, 121, .5);
    cursor: pointer;
    transition: background-color .18s, box-shadow .18s, transform .18s;
}

.login-field .login-btn:hover {
    background-color: #2A6198 !important;
    box-shadow: 0 14px 26px -8px rgba(31, 78, 121, .55);
    transform: translateY(-1px);
}

.login-field .login-btn.layui-disabled {
    opacity: .7;
    box-shadow: none;
    cursor: not-allowed;
    transform: none;
}

/* ---------- 底部版权 ---------- */
.login-footer {
    width: 392px;
    max-width: 100%;
    margin: 34px auto 0;
    color: #8A94A6;
    font-size: 12px;
    line-height: 20px;
    text-align: center;
}

.login-tip {
    margin: 0 0 4px;
}

.login-footer a {
    color: #8A94A6;
    text-decoration: none;
    transition: color .18s;
}

.login-footer a:hover {
    color: #1F4E79;
}

.login-sep {
    padding: 0 6px;
    color: #C3CCD8;
}

/* =====================================================================
   响应式：窄屏收为单列，品牌区压缩为顶部条
   ===================================================================== */
@media screen and (max-width: 899px) {
    .login-aside {
        float: none;
        width: 100%;
        min-height: 0;
        padding: 26px 20px 24px;
    }

    .login-aside-inner {
        max-width: none;
    }

    .login-brand-mark svg {
        width: 34px;
        height: 34px;
    }

    .login-brand-name {
        font-size: 17px;
    }

    .login-aside-slogan {
        margin-top: 14px;
        font-size: 20px;
    }

    .login-aside-slogan br {
        display: none;
        /* 顶部条不强制换行 */
    }

    .login-aside-desc,
    .login-aside-lower,
    .login-services,
    .login-aside-meta,
    .login-aside-dev {
        display: none;
    }

    .login-main {
        float: none;
        width: 100%;
        min-height: 0;
        padding: 22px 16px 30px;
    }

    .login-card {
        padding: 26px 20px 24px;
        border-radius: 12px;
    }

    .login-title {
        font-size: 20px;
    }

    .login-footer {
        margin-top: 22px;
    }
}

/* 矮屏（如横屏手机）顶部对齐，避免卡片被裁切 */
@media screen and (max-height: 640px) {
    .login-main {
        justify-content: flex-start;
        padding-top: 40px;
    }
}