/** layuiAdmin.pro-v1.4.0 LPPL License By https://www.layui.com/admin/ */
@charset "utf-8";

/* 基础样式 */
.btn_login,a{cursor:pointer}
body,html{font-size:14px;height:100%;position:relative;overflow-x:hidden!important;font-family:PingFangSC,helvetica neue,hiragino sans gb,arial,microsoft yahei ui,microsoft yahei,simsun,sans-serif!important}
body,input[type=text],li{padding:0;margin:0}
dd,dl,font,img,p,ul{padding:0;margin:0;border:0}
li{list-style-type:none;border:0}
a{color:#666;text-decoration:none}
.clear:after{content:".";display:block;height:0;clear:both;visibility:hidden}
*html .clear{height:1%}
.clear{display:block}
*+html .clear{min-height:1%}

/* 容器 */
.login_container{
    position:fixed;top:0;bottom:0;left:0;right:0;display:table;width:100%;height:100%;
    background:linear-gradient(135deg, #e8f0f9 0%, #f5f8fc 100%);
    overflow:hidden
}

/* 持续流动的背景渐变 */
.login_container::before{
    content:'';
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:linear-gradient(135deg, rgba(31,117,254,0.02) 0%, rgba(22,119,255,0.03) 50%, rgba(31,117,254,0.02) 100%);
    background-size:400% 400%;
    z-index:0;
    animation:gradientFlow 15s ease infinite
}

@keyframes gradientFlow{
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}

/* 右侧斜向背景 */
.login_container::after{
    content:'';
    position:absolute;
    top:0;
    right:0;
    width:55%;
    height:100%;
    background:linear-gradient(135deg, rgba(31,117,254,0.12) 0%, rgba(22,119,255,0.06) 100%);
    clip-path:polygon(0 0,100% 0,100% 100%,10% 100%);
    z-index:1
}

/* 动态圆点装饰 - 仅PC端显示 */
.login_container .dots{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    overflow:hidden;
    pointer-events:none;
    z-index:2
}

.login_container .dot{
    position:absolute;
    width:6px;
    height:6px;
    background:#1F75FE;
    border-radius:50%;
    opacity:0.3;
    animation:dotFloat 4s ease-in-out infinite
}

.dot:nth-child(1){top:20%;left:10%;animation-delay:0s}
.dot:nth-child(2){top:40%;left:80%;animation-delay:0.8s}
.dot:nth-child(3){top:70%;left:30%;animation-delay:1.6s}
.dot:nth-child(4){top:30%;left:60%;animation-delay:2.4s}
.dot:nth-child(5){top:80%;left:70%;animation-delay:3.2s}

@keyframes dotFloat{
    0%,100%{opacity:0.2;transform:translateY(0)}
    50%{opacity:0.5;transform:translateY(-15px)}
}

/* 缓慢浮动气泡 */
.float-bubbles{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    overflow:hidden;
    pointer-events:none;
    z-index:3
}

.bubble{
    position:absolute;
    border-radius:50%;
    background:radial-gradient(circle at 30% 30%, rgba(31,117,254,0.15), rgba(22,119,255,0.05));
    animation:bubbleRise linear infinite
}

.bubble:nth-child(1){
    width:80px;height:80px;
    left:5%;bottom:-80px;
    animation-duration:12s;
    animation-delay:0s
}

.bubble:nth-child(2){
    width:60px;height:60px;
    left:15%;bottom:-60px;
    animation-duration:10s;
    animation-delay:2s
}

.bubble:nth-child(3){
    width:100px;height:100px;
    left:75%;bottom:-100px;
    animation-duration:14s;
    animation-delay:1s
}

.bubble:nth-child(4){
    width:70px;height:70px;
    left:85%;bottom:-70px;
    animation-duration:11s;
    animation-delay:3s
}

.bubble:nth-child(5){
    width:50px;height:50px;
    left:50%;bottom:-50px;
    animation-duration:13s;
    animation-delay:4s
}

@keyframes bubbleRise{
    0%{
        transform:translateY(0) rotate(0deg);
        opacity:0
    }
    10%{opacity:0.6}
    90%{opacity:0.6}
    100%{
        transform:translateY(-120vh) rotate(360deg);
        opacity:0
    }
}

/* 缓慢旋转的光环 */
.rings{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    width:100%;
    height:100%;
    pointer-events:none;
    z-index:2
}

.ring{
    position:absolute;
    border-radius:50%;
    border:1px solid rgba(31,117,254,0.08);
    left:50%;
    top:50%;
    transform:translate(-50%, -50%);
    animation:ringRotate linear infinite
}

.ring:nth-child(1){
    width:500px;height:500px;
    animation-duration:30s;
    animation-direction:normal
}

.ring:nth-child(2){
    width:600px;height:600px;
    animation-duration:35s;
    animation-direction:reverse
}

.ring:nth-child(3){
    width:700px;height:700px;
    animation-duration:40s;
    animation-direction:normal
}

@keyframes ringRotate{
    from{transform:translate(-50%, -50%) rotate(0deg)}
    to{transform:translate(-50%, -50%) rotate(360deg)}
}

/* 光点涟漪效果 */
.ripple-spots{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    overflow:hidden;
    pointer-events:none;
    z-index:3
}

.ripple{
    position:absolute;
    border-radius:50%;
    background:radial-gradient(circle, rgba(31,117,254,0.12), transparent 70%);
    animation:rippleExpand 6s ease-out infinite
}

.ripple:nth-child(1){
    width:200px;height:200px;
    top:20%;left:20%;
    animation-delay:0s
}

.ripple:nth-child(2){
    width:180px;height:180px;
    top:60%;right:20%;
    animation-delay:2s
}

.ripple:nth-child(3){
    width:220px;height:220px;
    bottom:20%;left:40%;
    animation-delay:4s
}

@keyframes rippleExpand{
    0%,100%{
        transform:scale(1);
        opacity:0
    }
    50%{
        transform:scale(1.5);
        opacity:0.6
    }
}

.login_main{display:table-cell;vertical-align:middle;text-align:center;position:relative;z-index:10}
.login_form_container{padding:70px 60px;text-align:left}

.login_title{
    text-align:center;font-size:26px;font-weight:600;letter-spacing:3px;color:#1F75FE;
    margin-bottom:40px;
    animation:fadeInDown 0.8s ease-out;
    position:relative
}

.login_title::after{
    content:'';
    position:absolute;
    bottom:-12px;
    left:50%;
    transform:translateX(-50%);
    width:50px;
    height:3px;
    background:#1F75FE;
    border-radius:2px
}

@keyframes fadeInDown{
    from{opacity:0;transform:translateY(-25px)}
    to{opacity:1;transform:translateY(0)}
}

.login_fields{padding:20px 0}
.login_fields li{padding:14px 0;color:#333;font-size:14px;font-weight:500}
.login_fields input{
    display:block;width:100%;border:2px solid #e1e8ed;height:44px;line-height:44px;border-radius:8px;text-indent:18px;font-size:15px;
    transition:all 0.3s ease;
    background:#fff
}

.login_fields input:focus{
    outline:none;
    border-color:#1F75FE;
    box-shadow:0 0 0 4px rgba(31,117,254,0.08)
}

.login_fields input::placeholder{color:#aaa}

.btn_login{
    color:#fff;background:linear-gradient(135deg, #1F75FE 0%, #0056b3 100%);display:block;width:100%;border:0;height:46px;line-height:46px;border-radius:8px;font-size:16px;font-weight:600;
    transition:all 0.3s ease;
    position:relative;overflow:hidden;
    margin-top:15px;
    letter-spacing:2px
}

.btn_login:hover{
    transform:translateY(-2px);
    box-shadow:0 8px 20px rgba(31,117,254,0.35)
}

.btn_login:active{transform:translateY(0)}

/* 按钮光泽效果 */
.btn_login::before{
    content:'';
    position:absolute;
    top:0;
    left:-100%;
    width:100%;
    height:100%;
    background:linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
    transition:left 0.6s
}

.btn_login:hover::before{left:100%}

/* 移动端背景文字 - 基础样式（默认隐藏） */
.login-bg-text-mobile{
    position:fixed;
    font-size:100px;
    font-weight:900;
    color:rgba(255,255,255,0.06);
    pointer-events:none;
    user-select:none;
    z-index:0;
    display:none
}

/* ========== PC端样式 (≥1024px) ========== */
@media(min-width:1024px){
    .left{float:left}
    .right{float:right}

    /* 隐藏移动端背景文字 */
    .login-bg-text-mobile{
        display:none
    }

    .login_box{
        width:900px;
        height:540px;
        margin:0 auto;
        border-radius:16px;
        overflow:hidden;
        box-shadow:0 20px 60px rgba(0,0,0,0.12);
        background:#fff;
        animation:slideUp 0.9s ease-out
    }

    @keyframes slideUp{
        from{opacity:0;transform:translateY(40px)}
        to{opacity:1;transform:translateY(0)}
    }

    .login_box .login_banner{
        height:100%;
        width:50%;
        background:linear-gradient(135deg, #1F75FE 0%, #0056b3 100%);
        position:relative;
        overflow:hidden;
        animation:fadeInLeft 0.8s ease-out 0.2s both;
        z-index:1
    }

    /* 横幅内容 */
    .login_box .login-banner-content{
        position:absolute;
        top:50%;
        left:50%;
        transform:translate(-50%, -50%);
        text-align:center;
        color:#fff;
        width:90%;
        padding:0 25px;
        animation:zoomIn 0.8s ease-out 0.4s both;
        z-index:3
    }

    /* Logo区域 */
    .login-logo-area{
        font-size:68px;
        margin-bottom:40px;
        animation:fadeIn 1.2s ease-out 0.2s both;
        filter:drop-shadow(0 6px 16px rgba(0,0,0,0.15))
    }

    /* 系统名称 */
    .login-system-name{
        font-size:34px;
        font-weight:700;
        margin-bottom:45px;
        letter-spacing:8px;
        text-shadow:0 2px 10px rgba(0,0,0,0.25);
        animation:fadeIn 1.2s ease-out 0.4s both;
        background:linear-gradient(135deg, #fff 0%, rgba(255,255,255,0.85) 100%);
        -webkit-background-clip:text;
        -webkit-text-fill-color:transparent;
        background-clip:text;
        line-height:1.4
    }

    /* 系统描述 */
    .login-system-desc{
        font-size:15px;
        opacity:0.95;
        line-height:2.4;
        letter-spacing:4px;
        font-weight:300;
        animation:fadeIn 1.2s ease-out 0.6s both
    }

    .login-system-desc .feature-item{
        display:inline-block;
        margin:0 10px;
        padding:8px 18px;
        background:rgba(255,255,255,0.2);
        border-radius:22px;
        font-weight:500;
        font-size:14px;
        letter-spacing:3px;
        backdrop-filter:blur(10px);
        border:1px solid rgba(255,255,255,0.25)
    }

    /* 背景文字装饰 */
    .login_box .login_banner .login-bg-text{
        position:absolute;
        font-size:130px;
        font-weight:900;
        color:rgba(255,255,255,0.04);
        pointer-events:none;
        user-select:none;
        line-height:1;
        z-index:1
    }

    .login_box .login_banner .login-bg-text.top-left{
        top:20px;
        left:20px
    }

    .login_box .login_banner .login-bg-text.bottom-right{
        bottom:20px;
        right:20px
    }

    @keyframes fadeInLeft{
        from{opacity:0;transform:translateX(-35px)}
        to{opacity:1;transform:translateX(0)}
    }

    @keyframes zoomIn{
        from{opacity:0;transform:translate(-50%, -50%) scale(0.85)}
        to{opacity:1;transform:translate(-50%, -50%) scale(1)}
    }

    .login_box .login_form{
        height:100%;
        width:50%;
        background-color:#fff;
        animation:fadeInRight 0.8s ease-out 0.2s both
    }

    @keyframes fadeInRight{
        from{opacity:0;transform:translateX(35px)}
        to{opacity:1;transform:translateX(0)}
    }
}

/* ========== 平板端样式 (768px - 1023px) ========== */
@media (max-width:1023px) and (min-width:768px){
    .left{float:left}
    .right{float:right}

    /* 隐藏移动端背景文字 */
    .login-bg-text-mobile{
        display:none
    }

    .login_box{
        width:90%;
        height:auto;
        min-height:520px;
        margin:0 auto;
        border-radius:16px;
        overflow:hidden;
        box-shadow:0 20px 50px rgba(0,0,0,0.12);
        background:#fff;
        animation:slideUp 0.9s ease-out
    }

    .login_box .login_banner{
        display:none
    }

    .login_box .login_form{
        width:100%;
        background-color:#fff;
        padding:50px 50px;
        box-sizing:border-box
    }

    .login_form_container{
        padding:0
    }

    /* 中等屏幕优化 */
    @media (max-width:850px){
        .login_box{
            width:95%
        }

        .login_box .login_form{
            padding:40px 40px
        }
    }
}

/* ========== 手机端样式 (≤767px) ========== */
@media (max-width:767px){
    /* 隐藏PC端动态背景元素 */
    .login_container::before,
    .login_container::after,
    .login_container .dots,
    .float-bubbles,
    .rings,
    .ripple-spots{
        display:none
    }

    /* 显示移动端背景文字 */
    .login-bg-text-mobile{
        display:block
    }

    /* 手机端背景 */
    .login_container{
        background:linear-gradient(135deg, #1F75FE 0%, #1677ff 100%);
        position:fixed;
        top:0;
        left:0;
        right:0;
        bottom:0;
        width:100%;
        height:100%;
        overflow:hidden
    }

    .login_main{
        display:flex;
        flex-direction:column;
        justify-content:center;
        align-items:center;
        padding:0;
        width:100%;
        height:100%;
        max-height:100vh;
        box-sizing:border-box;
        overflow-y:auto;
        overflow-x:hidden
    }

    .login_box{
        width:100%;
        max-width:380px;
        height:auto;
        max-height:100%;
        margin:0 auto;
        border-radius:16px;
        overflow:hidden;
        box-shadow:0 20px 50px rgba(0,0,0,0.25);
        background:rgba(255,255,255,0.97);
        backdrop-filter:blur(10px);
        animation:slideUp 0.8s ease-out;
        box-sizing:border-box;
        margin-top:auto;
        margin-bottom:auto
    }

    .login_box{
        width:100%;
        max-width:380px;
        height:auto;
        max-height:100%;
        margin:0;
        border-radius:16px;
        overflow:hidden;
        box-shadow:0 20px 50px rgba(0,0,0,0.25);
        background:rgba(255,255,255,0.97);
        backdrop-filter:blur(10px);
        animation:slideUp 0.8s ease-out;
        box-sizing:border-box
    }

    @keyframes slideUp{
        from{opacity:0;transform:translateY(30px)}
        to{opacity:1;transform:translateY(0)}
    }

    /* 隐藏左侧横幅 */
    .login_box .login_banner{
        display:none
    }

    .login_box .login_form{
        width:100%;
        background-color:#fff;
        padding:40px 25px;
        border-radius:16px;
        animation:fadeIn 0.6s ease-out;
        box-sizing:border-box
    }

    @keyframes fadeIn{
        from{opacity:0}
        to{opacity:1}
    }

    .login_form_container{
        padding:0;
        text-align:left
    }

    .login_title{
        font-size:24px;
        letter-spacing:2px;
        margin-bottom:30px;
        text-align:center
    }

    .login_fields{
        padding:10px 0
    }

    .login_fields li{
        padding:10px 0;
        font-size:13px
    }

    .login_fields input{
        height:42px;
        line-height:42px;
        font-size:14px;
        border-radius:6px
    }

    .btn_login{
        height:44px;
        line-height:44px;
        font-size:15px;
        margin-top:12px;
        margin-bottom:20px
    }

    /* 移动端背景文字位置 */
    .login-bg-text-mobile.top{
        top:40px;
        left:30px
    }

    .login-bg-text-mobile.bottom{
        bottom:40px;
        right:30px
    }
}

/* ========== 小屏手机 (≤375px) ========== */
@media (max-width:375px){
    .login_main{
        padding:0;
        justify-content:center;
        overflow-y:auto
    }

    .login_box{
        max-width:100%;
        border-radius:12px;
        max-height:calc(100vh - 40px);
        margin:0 auto;
        margin-top:auto;
        margin-bottom:auto
    }

    .login_box .login_form{
        padding:25px 15px
    }

    .login_title{
        font-size:20px;
        margin-bottom:20px
    }

    .login_fields{
        padding:6px 0
    }

    .login_fields li{
        padding:6px 0;
        font-size:12px
    }

    .login_fields input{
        height:38px;
        line-height:38px;
        font-size:13px
    }

    .btn_login{
        height:40px;
        line-height:40px;
        font-size:14px;
        margin-top:10px;
        margin-bottom:15px
    }

    /* 小屏手机调整背景文字大小 */
    .login-bg-text-mobile{
        font-size:70px
    }

    .login-bg-text-mobile.top{
        top:30px;
        left:20px
    }

    .login-bg-text-mobile.bottom{
        bottom:30px;
        right:20px
    }
}

/* ========== 通用动画 ========== */
@keyframes fadeIn{
    from{opacity:0}
    to{opacity:1}
}

/* ========== 加载动画 ========== */
.btn_loading{
    opacity:0.8;
    cursor:not-allowed
}

.btn_loading::after{
    content:'';position:absolute;top:50%;left:50%;
    width:18px;height:18px;margin:-9px 0 0 -9px;
    border:2px solid rgba(255,255,255,0.3);
    border-top-color:#fff;
    border-radius:50%;
    animation:spin 0.8s linear infinite
}

@keyframes spin{
    to{transform:rotate(360deg)}
}

/* ========== 输入框标签动画 ========== */
.login_fields li:nth-child(1),
.login_fields li:nth-child(2){
    animation:fadeInUp 0.6s ease-out 0.3s both
}

.login_fields li:nth-child(3),
.login_fields li:nth-child(4){
    animation:fadeInUp 0.6s ease-out 0.5s both
}

@keyframes fadeInUp{
    from{opacity:0;transform:translateY(18px)}
    to{opacity:1;transform:translateY(0)}
}