@import "../../css/common.css";

/* ====== 页面容器 - 保持背景不变 ====== */
.user-wrapper{background:url('../img/login-bg.png') no-repeat center center;width: 100%;height: 100%;background-size:cover;display:flex;align-items:center;justify-content:center;}

.user-wrapper .header{height: 4.2vw;line-height: 4.2vw;padding-left: 1.6vw;position:absolute;top:0;left:0;z-index:10;}

.user-wrapper .header img{width:5.4vw;max-width: 105px}

/* ====== 主内容区 - 垂直居中，标题与卡片对齐 ====== */
.user-main{padding-top: 0;width:100%;display:flex;flex-direction:column;align-items:center;}

.user-reg-main{padding-top: 3vw}

/* ====== 主标题 - 居中对齐卡片，深色适配浅色背景 ====== */
.user-main .user-crumb{
    font-size: 1.35vw;
    text-align: center;
    margin-bottom:1.2vw;
    color: #1a365d;
    letter-spacing:3px;
    font-weight:400;
}

/* ====== 登录卡片主体 - 美化 ====== */
.user-form{
    width: 23.4vw;
    min-width:360px;
    margin:0 auto;
    padding:2.2vw 2.5vw 1.8vw 2.5vw;
    background-color: rgba(255,255,255,0.97);
    box-shadow:
        0 20px 60px rgba(44,110,229,0.12),
        0 8px 25px rgba(0,18,36,0.08);
    border-radius:16px;
    border:1px solid rgba(255,255,255,0.8);
    backdrop-filter: blur(10px);
    transition:transform 0.3s ease,box-shadow 0.3s ease;
}

.user-form:hover{
    transform:translateY(-3px);
    box-shadow:
        0 25px 70px rgba(44,110,229,0.18),
        0 10px 30px rgba(0,18,36,0.12);
}

/* ====== 登录选项卡Tab - 在卡片内部 ====== */
.user-form .login-tabs{
    display:flex;
    justify-content:center;
    gap:2vw;
    margin-bottom:1.4vw;
    padding:0 0 .4vw 0;
    border-bottom:1px solid #eef2f7;
}

.user-form .login-tab-item{
    text-align:center;
    padding:.4vw 1.1vw;
    font-size:.82vw;
    color:#94a3b8;
    cursor:pointer;
    position:relative;
    transition:color .3s ease;
    font-weight:400;
    letter-spacing:1px;
    border:none;
    background:none;
}

.user-form .login-tab-item.active{
    color:#2c6ee5;
    font-weight:500;
}

.user-form .login-tab-item::after{
    content:'';
    position:absolute;
    bottom:-1px;
    left:0;
    width:100%;
    height:2.5px;
    background:linear-gradient(90deg,#2c6ee5,#5a9bff);
    border-radius:2px 2px 0 0;
    opacity:0;
    transition:opacity .3s ease;
}

.user-form .login-tab-item.active::after{opacity:1;}

.user-form .login-tab-item:hover:not(.active){color:#2c6ee5;}

/* ====== 表单项基础样式 ====== */
.user-form .user-form-item:first-child{margin-top: 0}
.user-form .user-form-item{position:relative;margin-top:1.2vw;}

/* Layui复选框样式 - 大小与文字协调 */
.user-form .user-form-item.layui-form{margin-top:.6vw !important;display:flex;align-items:center;}
.user-form .user-form-item .layui-form-checkbox[lay-skin=primary]{padding-left:24px !important;font-size:.75vw !important;margin:0 !important;display:inline-flex !important;align-items:center !important;line-height:1.4 !important;}
.user-form .user-form-item .layui-form-checkbox[lay-skin=primary] i{width:16px !important;height:16px !important;top:0 !important;font-size:12px !important;border-radius:3px !important;line-height:14px !important;}
.user-form .user-form-item .layui-form-checkbox[lay-skin=primary] span{font-size:.75vw !important;color:#64748b !important;}
.user-form .user-form-item .layui-form-checkbox[lay-skin=primary]:hover i{border-color: #2c6ee5 !important;background-color: #f0f6ff !important;}
.user-form .user-form-item .layui-form-checked[lay-skin=primary] i{border-color: #2c6ee5 !important;background-color: #2c6ee5 !important;color: #fff !important;line-height: 16px !important;}

/* ====== 输入框图标美化 ====== */
.user-form .user-form-item i.iconfont{
    position: absolute;
    top:50%;
    transform:translateY(-50%);
    left: 1vw;
    color:#a0aec0;
    font-size: 1vw;
    z-index:2;
    transition:color .3s ease;
}

/* ====== 输入框美化 ====== */
.user-form .user-form-item input{
    width:100%;
    height: 2.3vw;
    min-height:36px;
    line-height:2.3vw;
    border: 1.5px solid #e2e8f0;
    border-radius:8px;
    padding-left: 2.4vw;
    padding-right: 1vw;
    font-size:.75vw;
    font-weight:300;
    color:#4a5568;
    background-color:#f7fafc;
    transition:all .3s ease;
    outline:none;
}

.user-form .user-form-item input::placeholder{color:#a0aec0;}

.user-form .user-form-item input:hover{border-color:#93b9f5;background-color:#fff;}
.user-form .user-form-item input:focus{
    border-color:#2c6ee5;
    box-shadow: 0 0 0 4px rgba(44,110,229,0.1),0 2px 8px rgba(44,110,229,0.08);
    background-color:#fff;
    -moz-box-shadow: 0 0 0 4px rgba(44,110,229,0.1),0 2px 8px rgba(44,110,229,0.08);
    -webkit-box-shadow: 0 0 0 4px rgba(44,110,229,0.1),0 2px 8px rgba(44,110,229,0.08);
}

/* 输入框有内容时图标点亮（配合JS添加.has-value类） */
.user-form .user-form-item.has-value > i.iconfont{color:#2c6ee5;}
.user-form .user-form-item > input:focus + i.iconfont{color:#2c6ee5;}

/* ====== 验证码按钮美化 ====== */
.user-form .user-form-item.sms-code-item input{padding-right:6.5vw;}

.user-form .user-form-item .verify-btn{
    position: absolute;
    right:.3vw;
    top:50%;
    transform:translateY(-50%);
    width:auto;
    min-width:5.2vw;
    height: 1.85vw;
    min-height:30px;
    line-height:1.85vw;
    padding:0 .7vw;
    color:#fff;
    background:linear-gradient(135deg,#2c6ee5 0%,#5a9bff 100%);
    text-align: center;
    font-size: .68vw;
    border-radius:7px;
    border:none;
    cursor:pointer;
    transition:all .3s ease;
    box-shadow:0 2px 8px rgba(44,110,229,0.25);
}

.user-form .user-form-item .verify-btn:hover,
.user-form .user-form-item .verify-btn:focus{
    opacity:.9;
    box-shadow:0 4px 14px rgba(44,110,229,0.35);
    -moz-box-shadow:0 4px 14px rgba(44,110,229,0.35);
    -webkit-box-shadow:0 4px 14px rgba(44,110,229,0.35);
}

.user-form .user-form-item .verify-btn:active{opacity:.7;}

/* ====== 登录按钮美化 ====== */
.user-form .user-form-item .submit-btn{
    display:inline-block;
    width:100%;
    height: 2.3vw;
    min-height:38px;
    line-height:2.3vw;
    background:linear-gradient(135deg,#2c6ee5 0%,#4a8ef5 100%);
    color:#fff;
    text-align: center;
    border-radius:8px;
    font-size: .82vw;
    font-weight:400;
    letter-spacing:3px;
    cursor:pointer;
    transition:all .3s ease;
    box-shadow:0 4px 15px rgba(44,110,229,0.35);
    border:none;
    outline:none;
    position:relative;
    overflow:hidden;
}

.user-form .user-form-item .submit-btn::before{
    content:'';
    position:absolute;
    top:0;
    left:-100%;
    width:100%;
    height:100%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,0.2),transparent);
    transition:left .5s ease;
}

.user-form .user-form-item .submit-btn:hover::before{left:100%;}
.user-form .user-form-item .submit-btn:hover{
    transform:translateY(-2px);
    box-shadow:0 6px 25px rgba(44,110,229,0.45);
    background:linear-gradient(135deg,#3a7de8 0%,#5a9bff 100%);
}
.user-form .user-form-item .submit-btn:active{
    transform:translateY(0);
    box-shadow:0 2px 10px rgba(44,110,229,0.35);
}

/* ====== 链接样式 ====== */
.user-form .user-form-item:last-child a{font-size: .72vw;color:#718096;transition:color .3s ease;}
.user-form .user-form-item:last-child a:hover{color:#2c6ee5;}

.user-form .go-btn-item{text-align: center;margin-top: 1vw;}
.user-form .user-form-item a.go-btn{color:#2c6ee5;font-weight:500;}
.user-form .user-form-item a.go-btn span{color:#999}
.user-form .user-form-item .language>a{color:#2c6ee5;height: 40px;}

.user-form .user-form-item .language .lang-panel{
    position: absolute;left:-1vw;top: 1.5vw;min-width: 4.5vw;border: solid 1px #2c6ee5;
    background-color: #fff;border-radius: 8px;padding:0.6vw;display: none;
    box-shadow:0 4px 20px rgba(44,110,229,0.15);
}
.user-form .user-form-item .language .lang-panel a{display: block;color:#999;text-align: center;width:100%;padding-bottom:.9vw}
.user-form .user-form-item .language .lang-panel a:last-child{padding-bottom:0}
.user-form .user-form-item .language .lang-panel a:hover{color:#2c6ee5;background-color:#f7fafc;}

/* ====== 提示信息 ====== */
.login-tips .layui-layer-content{box-shadow:none !important;line-height: 5px !important;color:#f56c6c !important;;padding:0 !important;background-color: transparent !important;}
.login-tips i.layui-layer-TipsB{border-right-color: transparent !important;}

/* 滑动验证 - 高度、边框、圆角、背景与输入框完全一致 */
.slide-verify{height:2.3vw !important;min-height:36px !important;border:1.5px solid #e2e8f0 !important;border-radius:8px !important;background-color:#f7fafc !important;overflow:hidden !important;}
.slide-verify .drag-btn{width:2.3vw !important;min-width:36px !important;height:2.3vw !important;min-height:36px !important;line-height:2.3vw !important;border-radius:8px !important;}
/* OK按钮保持白色背景 */
.slide-verify .suc-drag-btn{height:2.3vw !important;min-height:36px !important;line-height:2.3vw !important;border-radius:8px !important;background:#fff !important;}
.slide-verify .suc-drag-btn::before{font-size:.75vw !important;font-weight:700 !important;}
/* 请滑动验证 - 默认文字（灰色）*/
.slide-verify .fix-tips{height:2.3vw !important;min-height:36px !important;line-height:2.3vw !important;font-size:.75vw !important;color:#718096 !important;}
/* 验证通过 - 不覆盖color，让JS内联CSS的白色生效，只控制尺寸 */
.slide-verify .verify-msg{height:2.3vw !important;min-height:36px !important;line-height:2.3vw !important;font-size:.75vw !important;}
.slide-verify .drag-progress{height:2.3vw !important;min-height:36px !important;line-height:2.3vw !important;font-size:.75vw !important;border-radius:8px 0 0 8px !important;}



/* 重置密码 - 背景与登录页一致 */
.reset-wrapper{width: 100%;height: 100%;background:url('../img/login-bg.png') no-repeat center center;background-size:cover;display:flex;align-items:flex-start;justify-content:center;position:relative;padding-top:8vh;}

/* 确保重置密码页面body背景透明 */
.reset-wrapper body,
body.reset-page{background:transparent !important;}

.reset-wrapper .header{
    height: 4.2vw;
    line-height: 4.2vw;
    padding:0 1.6vw;
    position:absolute;
    top:0;
    left:0;
    right:0;
    z-index:10;
    background:transparent !important;
    background-color:transparent !important;
    display:flex;
    justify-content:space-between;
    align-items:center;
}
.reset-wrapper .header img{width:5.4vw;max-width: 105px}
.reset-wrapper .header a{color:#2c6ee5;font-size:.72vw;font-weight:400;transition:color .3s ease;margin-left:auto;}
.reset-wrapper .header a:hover{color:#1e5bb8;}
.reset-wrapper .header a span{color:#718096;font-size:.72vw;}

.user-reset-main{width: 54.7vw;margin:0 auto;padding-top: 2vw}

.user-reset-tab{position:relative;font-size: 0;margin-bottom:8vw}
.user-reset-tab .line{display:inline-block;height: .1vw;background-color: #bad0f7;width:27vw}
.user-reset-tab .line.current{background-color: #2c6ee5}
.user-reset-tab .tab-item{position:absolute;text-align: center;}
.user-reset-tab .tab-item span{display: inline-block;font-size: 1vw;background-color:#a2bbe8;color:#fff;width:1.6vw;height: 1.6vw;border-radius: 1.6vw;line-height: 1.6vw;}
.user-reset-tab .tab-item p{font-size: .7vw;color:#a2bbe8;margin-top: .6vw;}
.user-reset-tab .tab-item.current span{background-color:#2c6ee5;}
.user-reset-tab .tab-item.current p{color:#2c6ee5;}
.user-reset-tab .tab-item:nth-child(1){left: -2.9vw;top:-.8vw;}
.user-reset-tab .tab-item:nth-child(3){left: 25.5vw;top:-.7vw;}
.user-reset-tab .tab-item:nth-child(5){right: -2.9vw;top:-.7vw;}

/* 重置密码 - 设置 */
.user-reset-way{padding: 0 14.1vw 11.2vw 14.1vw;}
.user-reset-way .way-item{display: block;height: 6.3vw;line-height: 6.3vw;border-radius: 8px;font-size: .9vw;padding: 0 0 0 4.2vw;background:linear-gradient(135deg,#f7fafc 0%,#edf2f7 100%);color:#2c6ee5;letter-spacing: 1px;width: 23.5vw;border:1.5px solid #e2e8f0;transition:all .3s ease;}
.user-reset-way .way-item i{color:#ffbf25;font-size: 1.5vw;margin-right: .5vw;}
.user-reset-way .way-item:nth-child(1){margin-bottom:2.7vw}
.user-reset-way .way-item:nth-child(2) i{color:#00cea0}
.user-reset-way .way-item:hover{background:linear-gradient(135deg,#2c6ee5 0%,#4a8ef5 100%);color:#fff;box-shadow:0 4px 15px rgba(44,110,229,0.3);}
.user-reset-form .faq-form .faq-form-item:first-child{margin:0}

/* 重置密码表单提交按钮 - 与登录按钮一致 */
.user-reset-way .submit-btn,
.user-reset-form button[type="submit"],
.reset-wrapper .user-form .submit-btn,
.faq-form input[type="submit"],
.faq-form button,
.user-reset-main button[type="submit"]{
    background:linear-gradient(135deg,#2c6ee5 0%,#4a8ef5 100%) !important;
    color:#fff !important;
    border-radius:8px !important;
    font-weight:400 !important;
    letter-spacing:2px !important;
    box-shadow:0 4px 15px rgba(44,110,229,0.35) !important;
    border:none !important;
}

/* 重置密码 - 成功 */
.user-reset-success{text-align: center}
.user-reset-success img{width: 5.7vw;}
.user-reset-success p{font-size: 0.8vw;margin:1.6vw 0}
.user-reset-success a{
    display: block;
    width: 13vw;
    height: 2.3vw;
    min-height:38px;
    line-height:2.3vw;
    background:linear-gradient(135deg,#2c6ee5 0%,#4a8ef5 100%);
    border-radius:8px;
    font-size: .82vw;
    font-weight:400;
    text-align: center;
    margin: 0 auto;
    color:#fff;
    letter-spacing:2px;
    box-shadow:0 4px 15px rgba(44,110,229,0.35);
}

@media only screen and (max-width: 1400px){
	.user-form .user-form-item i.iconfont{top: .5vw;font-size: 1.2vw;}
	.user-form .user-form-item input{height: 36px;line-height:36px;padding-left: 2.4vw;font-size: 12px;font-weight:300;border-radius:8px;color:#4a5568;}
	.user-form .user-form-item .verify-btn{height: 30px;line-height:30px;width:auto;min-width:72px;border-radius:6px;font-size:11px;}
	.user-form .user-form-item{margin-top: 14px}
	.user-form .user-form-item.layui-form{margin-top:8px !important;display:flex;align-items:center;}
	.user-form .user-form-item .layui-form-checkbox[lay-skin=primary]{font-size:12px !important;padding-left:24px !important;display:inline-flex !important;align-items:center;line-height:1.4 !important;}
	.user-form .user-form-item .layui-form-checkbox[lay-skin=primary] i{width:16px !important;height:16px !important;top:0 !important;line-height:14px !important;border-radius:3px !important;}
	.user-form .user-form-item .layui-form-checkbox[lay-skin=primary] span{font-size:12px !important;color:#64748b !important;}
	.slide-verify{height:36px !important;border:1.5px solid #e2e8f0 !important;border-radius:8px !important;background-color:#f7fafc !important;overflow:hidden !important;}
	/* 请滑动验证 - 默认文字（灰色）*/
	.slide-verify .fix-tips{height:36px !important;line-height:36px !important;font-size:12px !important;color:#718096 !important;}
	/* 验证通过 - 不覆盖color，让JS内联CSS的白色生效，只控制尺寸 */
	.slide-verify .verify-msg{height:36px !important;line-height:36px !important;font-size:12px !important;}
	.slide-verify .drag-progress{height:36px !important;line-height:36px !important;font-size:12px !important;border-radius:8px 0 0 8px !important;}
	.slide-verify .drag-btn{width:36px !important;height:36px !important;line-height:36px !important;border-radius:8px !important;}
	/* OK按钮保持白色背景 */
	.slide-verify .suc-drag-btn{height:36px !important;border-radius:8px !important;background:#fff !important;}
	.slide-verify .suc-drag-btn::before{font-size:12px !important;font-weight:700 !important;}
	.user-form .user-form-item .submit-btn{height: 38px;line-height: 38px;border-radius:8px;font-size:13px;}
	.user-form .user-form-item:last-child a{font-size:11px;}
	.user-form .user-form-item .language .lang-panel{left:-.3vw;top: 2vw;}
	.user-form .login-tabs{margin-bottom:12px;padding-bottom:6px;gap:16px;}
	.user-form .login-tab-item{padding:4px 10px;font-size:13px;}
	.user-main .user-crumb{font-size:20px;margin-bottom:16px;letter-spacing:2px;}
	.user-form{border-radius:12px;padding:20px 24px 16px 24px;}
	.reset-wrapper .header a,.reset-wrapper .header a span{font-size:11px;}
}