:root {
    /* 基础颜色 */
    --color-primary: #E8F0FF;
    --color-secondary: #FFFFFF;
    --color-blue: rgba(57, 146, 255, 1);
    --color-purple: rgba(153, 0, 255, 1);
    --color-pink: rgba(255, 76, 132, 1);

    /* 可复用的渐变 */
    --bg-gradient: linear-gradient(0deg, #E8F0FF 0%, #FFFFFF 30%);
    --border-gradient: linear-gradient(135deg, var(--color-blue), var(--color-purple), var(--color-pink));
}


body{
    margin:0; padding:0; font-size:14px; font-family: 微软雅黑;
}

a{
    text-decoration: none;
}

i.fas, i.far{
    margin-right:5px;
}

.content-container {
    /* 添加过渡动画 */
    transition: all 0.4s ease;
}

.blur{
    filter: blur(30px);
    pointer-events: none; 
}

.site-top{
    display: flex; align-items: center; padding:20px;
    justify-content: space-between;
}
.site-top .site-logo{
    width:260px; height:40px; display:block;
    background-image: url(../img/logo.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
}

.btn-login{
    color:#333;
    padding: 4px 10px; background:#fff; border-radius: 5px; border:1px solid #eee;
}

.btn-login:hover{
    border-color: #666;
}


.login-container{
    position:fixed; left:0; top:0; right:0; bottom: 0; display: none; justify-content: center; align-items: center;
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.login-container.show {
    display: flex; justify-content: center; align-items: center;
    opacity: 1;
    transform: translateY(0);
}

.login-parent{width:740px; display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}
.login-parent .login-logo{
    width: 399px; height:81px; 
    background-image: url(../img/logo_399_81.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
}
.login-parent .login-box{
    width:100%; height:460px; background: #fff; border-radius: 20px; margin-top:40px;
    box-shadow: 0px 12px 48px 0px rgba(0,0,0,0.05); border: 1px solid rgba(0,0,0,0.12);
    display: flex; justify-content: center; align-items: center;
}
.login-left{
    width:400px; height:410px;  padding:30px; padding-top:20px; position: relative;
}
.login-tab{ display: flex; justify-content: center; align-items: center;}
.login-tab .tab-item{
    font-size: 15px; color: #939393; margin:15px; border-bottom: 3px solid #fff; line-height: 30px;
}
.login-tab .tab-item.active{
    border-bottom: 3px solid; font-weight: bold; color: #000;
    border-image: linear-gradient(135deg, rgba(57, 146, 255, 1), rgba(153, 0, 255, 1), rgba(255, 76, 132, 1)) 2 2;
}
.login-left .remark{
    color:#939393; font-size: 12px; margin:0 30px;
}
.input-node{
    overflow: hidden; padding:1px; background: #eee; border-radius: 10px; position: relative; margin-top:10px;
    font-size:15px;
}
.input-node.active{
    background: var(--border-gradient); padding:2px;
}
.input-node span{
    position:absolute; left:0; height:44px; line-height: 44px;
    padding:0 10px; color:#000; font-weight: bold;
}
.input-node span i.fas{color:#999; line-height: 44px;}
.input-node input{
    width:100%; height:44px; line-height: 44px; border:none; outline: none;
    padding:0 10px; border-radius: 9px;
}
.input-node.icon input{padding-left:30px;}
.input-node.icon-text input{padding-left:65px;}
.code-row{display: flex; justify-content: space-between; align-items: flex-end;}
.code-row .input-node{width:60%;}
.code-row a{
    width:35%; line-height: 44px; padding:0; height: 44px; margin:0;
    background:#fff; border-radius:10px; border:1px solid #eee;
    display: block; text-align: center; color:#333;
}
.code-row a:hover{
    border-color: #333;
}
.login-lisence{
    padding:20px 0; color: #939393; font-size: 12px;
}
.login-lisence a{
    color:#333; font-weight: bold;
}
.login-submit{
    display: block; line-height: 44px; border-radius: 10px;
    background: var(--border-gradient); text-align: center;
    font-size: 16px; color: #fff; font-weight: bold;
    position:absolute; bottom: 30px; left:30px; right:30px; 
}

.login-right{width:300px;}
.login-right-node{ 
    background:#FBFBFB; border-radius: 12px; margin-right:20px; height:420px; display: flex;
    flex-direction: column; justify-content: flex-start; align-items: center;
}
.login-right .you-ju{
    width:96px; height:41px;
    background-image: url(../img/login_you_ju.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    margin-top:60px;
}
.login-right .code-node{
    width: 120px;
    height: 120px;
    background: #FFFFFF;
    box-shadow: 0px 4px 24px 0px rgba(0,0,0,0.05);
    border-radius: 8px 8px 8px 8px;
    border: 1px solid rgba(0,0,0,0.12);
    display: flex; justify-content: center; align-items: center; position:relative;
}
.login-right .code-node .node-text{
    position: absolute; top:10px; left:10px; right:10px; bottom:10px; background:rgba(255,255,255,0.95);
    display: flex; flex-direction: column; justify-content: center; align-items: center;
}
.login-right .code-node .node-text span{
    color:#999; font-weight: bold; margin:2px 0;
}
.login-right .code-node .node-img{
    width:100px; height:100px;
    background-image: url(../img/wechat_gj.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
}
.login-right .wechat-remark{
    background-image: url(../img/ic_wechat.png);
    background-repeat: no-repeat;
    background-position: left center;
    background-size: contain;
    line-height: 21px;
    padding-left:25px;
    margin-top: 20px;
}

.login-close{
    position:absolute; right:10px; top:10px; padding:20px; font-size:18px; color: #666;
}
.login-close:hover{
    color:#333;
}

.toast{
    position:fixed; top:100px; background:#333; border-radius: 6px;
    background: #404045; color:#fff; z-index:9999; padding:10px 14px;
    box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.08); font-size:14px;
    left: 50%;
    opacity: 0;
    transform: translateX(-50%) translateY(-100px);
    transition: opacity 0.3s ease;
}

.toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55), opacity 0.3s ease;
}

.toast .fa-check-circle{
    color:#30FF7C;
}
.toast .fa-times-circle{
    color:#ff3030;
}
.toast .fa-exclamation-triangle{
    color:#ff8d30;
}
.toast .fa-info-circle{
    color:#fff130;
}

.login-body{
    font-size:12px; color:#333;
}

.login-body span{
    color:#6051AA; font-weight: bold; padding:0 6px;
}

.confirm-box{
    position:fixed; top:100px; background:#333; border-radius: 6px;
    min-width:400px; max-width:600px;
    background: #fff;  z-index:9999; padding:20px;
    box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.08); font-size:14px;
    left: 50%;
    opacity: 0;
    transform: translateX(-50%) translateY(-100px);
    transition: opacity 0.3s ease;
}

.confirm-box .confirm-top{
    color:#333; font-size:14px;
}

.confirm-box .confirm-bot{
    display:flex; justify-content: flex-end; align-items: center;
    margin-top:10px;
}

.confirm-box .confirm-bot .confirm-ok{
    margin-left:12px; border-radius: 5px;
    background:#6051AA; border:1px solid #6051AA; font-weight: bold; padding:6px 10px;
    color:#fff; font-size:12px;
}

.confirm-box .confirm-bot .confirm-no{
    border-radius: 5px;
    background:#fff; border:1px solid #eee; font-weight: bold; padding:6px 10px;
    color:#333; font-size:12px;
}

.confirm-box .confirm-bot .confirm-ok:hover{background:#4b3e8f; border:1px solid #4b3e8f;}
.confirm-box .confirm-bot .confirm-no:hover{border:1px solid #ccc; }
    

.confirm-box .confirm-bot .confirm-ok i{
    color:#a1f7c0;
}
.confirm-box .confirm-bot .confirm-no i{
    color:#f57474;
}

.confirm-box.show{
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55), opacity 0.3s ease;
}

.content-node{
    position:fixed; top:60px; left:0; right:0; bottom:0; overflow-y: auto;
    padding:2% 20%; color:#333;
}

.content-node h1{
    text-align: center;
}

.content-node .update-node{
    display:flex; justify-content: center; align-items: center; padding:10px;
}

.content-node .update-node p{color:#999; margin:0 10px;}
.content-node .update-node p b{color:#333; font-weight: bold;}
.content-node h3{margin-top:60px;}

.frame-top {
    position: fixed; left:0; right:0; top:0;
    height:62px; background: #fff; display: flex; align-items: center; justify-content: space-between;
    border-bottom: 1px solid #eee; padding:0 14px;
}
  .frame-top .left {
    display: flex; align-items: center;
  }
    .frame-top .left .frame-logo {
        width:215px; height:30px; display:block;
        background-image: url(../img/logo.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: 100% 100%;
    }
    .frame-top .left .frame-tap {
        height:62px; display:flex; align-items: flex-end;
        margin-left:245px;
    }
      .frame-top .left .frame-tap .tab-item {
        height:40px; line-height: 40px; display: flex; margin-right:16px; font-size:15px; color:#939393;
        border-bottom: 2px solid #fff; align-items: flex-end;
      }
        .frame-top .left .frame-tap .tab-item.you i {
            width:51px; height:40px;
            background-image: url(../img/ai_you.png);
            background-repeat: no-repeat;
            background-position: center;
            background-size: 100% 100%;
            display:none;
        }
        .frame-top .left .frame-tap .tab-item span{
            padding-left:6px;
        }
        .frame-top .left .frame-tap .tab-item.active{
            border-bottom: 3px solid; 
            border-image: linear-gradient(135deg, rgba(57, 146, 255, 1), rgba(153, 0, 255, 1), rgba(255, 76, 132, 1)) 2 2;
        }
        .frame-top .left .frame-tap .tab-item.active span{
            background:var(--border-gradient);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            font-weight: bold;
        }
          .frame-top .left .frame-tap .tab-item.active i {
               display:block !important;
          }
        .frame-top .left .frame-tap .tab-item.ju i {
            width:51px; height:40px;
            background-image: url(../img/ai_ju.png);
            background-repeat: no-repeat;
            background-position: center;
            background-size: 100% 100%;
            display:none;
        }
        
  .frame-top .right {
  }