/** 登录页面样式（玻璃拟态） */

body {
    background-image: none;
    background-color: #F2F2F7;
}

.login-wrapper, body, html {
    height: 100%
}

.login-wrapper {
    overflow: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.login-body {
    padding: 0;
}

/* 旧的"单卡片居中"规则已由下方 .login-card 取代（max-width:400 + margin:auto 会让
   分栏里的登录卡缩窄并偏移），这里只保留表单控件相关，卡片外观统一在 .login-card 里定义。 */
.login-body .layui-form-pane .layui-form-label {
    width: 78px;
    overflow: visible;
}

.login-body .layui-form-pane .layui-input-block {
    margin-left: 78px;
}

.login-body .login-captcha {
    width: 100%;
    cursor: pointer;
    height: 42px;
    border: 1px solid rgba(60,60,67,.18);
    border-radius: 8px;
    box-sizing: border-box;
}

.login-body .layui-input {
    border-color: rgba(60,60,67,.18) !important;
    border-radius: 8px !important;
    height: 40px;
    line-height: 40px;
    background: #FFFFFF;
}

.login-body .layui-input:focus {
    border-color: #007AFF !important;
    box-shadow: 0 0 0 3.5px rgba(0,122,255,.20) !important;
}

.login-body .layui-btn {
    border-radius: 8px;
    height: 44px;
    line-height: 44px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 2px;
    background: #007AFF;
    box-shadow: 0 1px 2px rgba(0,0,0,.08);
}

.login-body .layui-btn:hover {
    background: #0A84FF;
    box-shadow: 0 3px 10px rgba(0,122,255,.30);
}

.login-body .login-other > * {
    display: inline-block;
    vertical-align: middle;
    margin-right: 10px;
    font-size: 14px;
}

.login-body .login-other .layui-icon {
    position: relative;
    top: 2px;
    font-size: 26px;
}

.login-body .login-other a:hover {
    opacity: .8;
}

.layui-icon-login-qq {
    color: #3492ED
}

.layui-icon-login-wechat {
    color: #4DAF29
}

.layui-icon-login-weibo {
    color: #CF1900
}

/** 底部样式 */
.login-footer {
    text-align: center;
    line-height: 30px;
    color: rgba(38,49,75,0.55) !important;
    padding-bottom: 20px;
}

.login-footer span {
    padding: 0 5px
}

.login-footer a {
    padding: 0 5px;
    color: rgba(38,49,75,0.55) !important;
}

.login-footer a:hover {
    color: rgba(27,71,210,0.8) !important;
}

/* ============================================================================
   左右分栏改版（原来只有一个居中卡片，页面太空）
   结构：.login-wrapper > .login-stage > [.login-hero 品牌面板] + [.login-body 登录卡]
   纯展示层：不改动任何表单字段/属性/JS，窄屏自动收成"顶部品牌条 + 下方登录卡"。
   ============================================================================ */
.login-wrapper {
    background:
        radial-gradient(900px 600px at 12% 8%, rgba(10,132,255,.10), transparent 62%),
        radial-gradient(760px 520px at 88% 92%, rgba(94,92,230,.10), transparent 60%),
        linear-gradient(180deg, #F7F9FC 0%, #EEF3FA 100%);
    position: absolute;
}

/* 角落装饰环：只做氛围，不抢内容（纯 CSS，无图片依赖） */
.login-wrapper::before,
.login-wrapper::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}
.login-wrapper::before {
    width: 520px; height: 520px;
    right: -180px; top: -200px;
    border: 1px solid rgba(10,132,255,.16);
    background: radial-gradient(circle at 50% 50%, rgba(10,132,255,.07), transparent 66%);
}
.login-wrapper::after {
    width: 380px; height: 380px;
    left: -140px; bottom: -170px;
    border: 1px solid rgba(94,92,230,.14);
    background: radial-gradient(circle at 50% 50%, rgba(94,92,230,.06), transparent 68%);
}

.login-stage {
    max-width: 1080px;
    margin: 0 auto;
    min-height: 100%;
    padding: 40px 24px;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 1fr 396px;
    align-items: center;
    gap: clamp(24px, 4vw, 64px);
    position: relative;
    z-index: 1;
}

/* ---------- 左侧：只放系统名，其余全部交给装饰 ---------- */
.login-hero { position: relative; min-width: 0; }

.login-hero-glow {
    position: absolute;
    left: -150px; top: 50%;
    width: 300px; height: 300px;
    margin-top: -150px;
    border-radius: 50%;
    background: radial-gradient(circle at 42% 40%, rgba(10,132,255,.13), rgba(94,92,230,.07) 58%, transparent 72%);
    filter: blur(10px);
    pointer-events: none;
}

.login-hero-inner { position: relative; z-index: 1; }

.login-hero-title {
    margin: 0;
    font-size: clamp(34px, 4.4vw, 58px);
    line-height: 1.18;
    font-weight: 750;
    letter-spacing: 1px;
    color: #14203A;
    background: linear-gradient(120deg, #17274A 6%, #1B47D2 52%, #0A84FF 96%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 12px 34px rgba(27,71,210,.16);
}

/* 标题下方一条渐隐装饰线，避免"只有一行字"显得空 */
.login-hero-title::after {
    content: "";
    display: block;
    width: 118px;
    height: 5px;
    margin-top: 22px;
    border-radius: 999px;
    background: linear-gradient(90deg, #0A84FF, rgba(94,92,230,.55) 55%, rgba(10,132,255,0));
}

/* ---------- 右侧登录卡 ---------- */
.login-body { padding: 0; }

.login-card {
    margin: 0;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,.9);
    background: rgba(255,255,255,.92);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    backdrop-filter: blur(18px) saturate(150%);
    box-shadow: 0 2px 6px rgba(16,24,40,.05), 0 28px 64px rgba(31,63,120,.16);
    overflow: hidden;
}

.login-card .layui-card-header {
    height: auto;
    line-height: 1.4;
    padding: 22px 26px 18px;
    background: linear-gradient(180deg, #FFFFFF, #F7FAFE);
    border-bottom: 1px solid rgba(60,60,67,.10);
}

/* 行高必须显式给：login.css 里旧的 .login-body .layui-card-header{line-height:52px}
   会被两个 span 继承（52px 行高 > 卡片头高度 → 副标题被裁、并压到下方表单上）。 */
.login-card-title { display: block; font-size: 19px; line-height: 1.4; font-weight: 700; color: #1D1D1F; letter-spacing: .2px; }
.login-card-sub { display: block; margin-top: 5px; font-size: 12.5px; line-height: 1.5; font-weight: 400; color: #8A94A6; }

.login-card .layui-card-body { padding: 22px 26px 26px; }

.login-submit { margin-bottom: 0; }

/* 窄屏：标题收到登录卡上方，登录卡居中铺满 */
@media screen and (max-width: 900px) {
    .login-stage {
        grid-template-columns: 1fr;
        align-content: start;
        gap: 22px;
        padding: 34px 18px 40px;
    }
    .login-hero { text-align: center; }
    .login-hero-glow { display: none; }
    .login-hero-title { font-size: 30px; letter-spacing: .5px; }
    .login-hero-title::after { margin: 16px auto 0; width: 96px; height: 4px; }
    .login-card { max-width: 460px; margin: 0 auto; }
}

@media screen and (max-width: 480px) {
    .login-stage { padding: 24px 14px 32px; }
    .login-hero-title { font-size: 26px; }
    .login-card .layui-card-header { padding: 18px 18px 14px; }
    .login-card .layui-card-body { padding: 18px 18px 22px; }
}

/** 头部样式 */
.login-header {
    font-family: Myriad Pro, Helvetica Neue, Arial, Helvetica, sans-serif;
    font-size: 20px;
    font-weight: 600;
    color: rgba(38,49,75,0.85) !important;
    padding: 10px;
}

.login-header img {
    height: 35px;
}

/** 移动设备样式 */
@media screen and (min-height: 590px) {
    .login-footer {
        position: absolute;
        bottom: 0;
        width: 100%;
    }
}

@media screen and (min-height: 670px) {
    .login-body {
        padding: 110px 10px 40px 10px;
    }
}

/** 辅助样式 */
.layui-link {
    color: #007AFF !important;
}

.layui-link:hover {
    opacity: .8;
}

.pull-right {
    float: right;
}

.inline-block {
    display: inline-block;
}

.login-header {
    color: rgba(38,49,75,0.85) !important;
}

.login-footer {
    color: rgba(38,49,75,0.55) !important;
}

.login-footer a {
    color: rgba(38,49,75,0.55) !important;
}

.login-footer a:hover {
    color: rgba(27,71,210,0.8) !important;
}