@charset "utf-8";
body{
    width:100%;
    height:100%;
    min-height:100vh;
    background:#eef2ff;
    background-image:
        radial-gradient(ellipse 80% 60% at 10% 20%, rgba(37,99,235,0.12) 0%, transparent 60%),
        radial-gradient(ellipse 70% 50% at 90% 80%, rgba(6,182,212,0.10) 0%, transparent 55%),
        radial-gradient(ellipse 50% 40% at 70% 10%, rgba(139,92,246,0.08) 0%, transparent 50%),
        linear-gradient(160deg, #f0f4ff 0%, #e8f4fd 40%, #f5f3ff 100%);
    overflow-x:hidden;
}
body::before{
    content:'';
    position:fixed;
    top:-120px;
    right:-80px;
    width:420px;
    height:420px;
    border-radius:50%;
    background:radial-gradient(circle, rgba(37,99,235,0.08) 0%, transparent 70%);
    pointer-events:none;
    z-index:0;
}
body::after{
    content:'';
    position:fixed;
    bottom:-100px;
    left:10%;
    width:320px;
    height:320px;
    border-radius:50%;
    background:radial-gradient(circle, rgba(6,182,212,0.10) 0%, transparent 70%);
    pointer-events:none;
    z-index:0;
}
.container{position:relative;padding:50px 0;height:100vh;overflow:hidden;z-index:1;}
.container::before{content:'';position:absolute;left:0;right:0;bottom:0;top:0;background:transparent;}

.container .logo{display:block;position:absolute;left:64px;top:45px;-webkit-user-select:none;z-index:2;}
.container .logo img{height:50px;}
.container .left-text-container{position:absolute;left: 16.6%;top:36%;z-index: 2;}
.container .left-text-container h2{font-size:38px;color:#1d4ed8;font-weight:bold;line-height:1.3;margin-bottom:30px;background:linear-gradient(135deg,#1e40af,#2563eb,#0891b2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.container .left-text-container p{color:#475569;font-size:17px;line-height:2;margin:14px 0 0;}
.container .left-text-container p i{font-size:28px;margin-right:12px;color:#2563eb;vertical-align:middle;}
.container .left-text-container p:hover{color:#1e40af;}
.container .left-bottom-container{position:absolute;bottom:24px;left:64px;z-index:2;}
.container .left-bottom-container p{line-height:18px;color:rgba(51,51,51,0.5);font-size:15px;margin:0 0 4px;}
.container .left-bottom-container .links a{display:inline-block;margin-right:8px;font-size:15px;color:rgba(51,51,51,0.7);line-height:18px;transition: 0.3s;}
.container .left-bottom-container .links a:hover{color:#f30;}

.container .right-container{z-index:2;right:16.667%;position:absolute;background:rgba(255,255,255,0.95);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,0.8);border-radius:20px;box-shadow:0 20px 60px rgba(15,23,42,0.10),0 4px 16px rgba(37,99,235,0.06);top:50%;transform:translateY(-50%);padding:32px 48px 0 48px;width:92%;max-width:488px;margin:0 auto;}

.login-title{font-size:36px;font-weight:bold;margin-bottom:30px;}
.right-container form{padding:20px 0;}


.form-group{position:relative;margin-bottom:30px;}
.form-group label{position:absolute;left:15px;top:15px;transition:all 0.5s ease;padding:0 10px;height:20px;line-height:20px;font-size:16px;color:#B2BAC2;border-radius:0px;overflow:hidden;}
.form-group .input{border:1px solid #e8e8e8;border-radius:4px;padding:0 20px;height:50px;line-height:50px;outline:none;width:100%;-webkit-box-shadow:0 0 0px 1000px #fff inset;}
.form-group .input:hover{border-color:#2563eb;}
.form-group .input:focus~label,.form-group label:hover{transform:translateY(-27px);color:#2563eb;background:#fff;}
.form-group .input.active~label,.form-group .input:valid~label{color:#B2BAC2;transform:translateY(-27px);background:#fff;}
.form-group label:hover,.form-group .input:focus~label{color:#2563eb;}
.form-group .button{border:0;background:linear-gradient(135deg,#2563eb,#0891b2);color:#fff;width:100%;padding:12px 0;font-size:16px;border-radius:8px;box-shadow:0 4px 14px rgba(37,99,235,0.35);cursor:pointer;transition:box-shadow 0.25s,transform 0.25s;}
.form-group .button:hover{box-shadow:0 6px 20px rgba(37,99,235,0.45);transform:translateY(-1px);}

.form-group a,.form-group img{position:absolute;top:50%;right:15px;background:#fff;transform:translateY(-50%);display:block;line-height:40px;cursor:pointer;}
.form-group .send{position:absolute;top:50%;right:5px;background:#fff;transform:translateY(-50%);display:block;cursor:pointer;}
.form-text{color:#8c8889;display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;}

.form-text a{color:#2563eb;position:relative;transition:all 0.5s ease;display:inline-block;line-height:30px;}
.form-text a:hover{color:#1d4ed8;}
.form-text a:after{width:0;height:1px;content:'';transition:0.3s;position:absolute;bottom:0;left:50%;transform:translateX(-50%);background:#2563eb;}
.form-text a:hover:after{width:100%;}

.other{border-top:1px solid #f0f0f0;padding-top:20px;display:flex;justify-content:space-between;align-items:center;margin-bottom:30px;}
.other-left{color:#8c8889;}
.other-right a{display:inline-block;width:50px;height:50px;line-height:40px;margin-left:10px;background:#fff;border:1px solid #f3f3f3;border-radius:50%;text-align:center;}
.other-right a i{font-size:28px;}
.other-right a i.red{color:#ff4837;}
.other-right a i.green{color:#19BE6B;}
.other-right a i.yellow{color:#ff8037;}
.other-right a:hover{border-color:#eaeaea;}