@charset "utf-8";
/* ============================================================
 * newtemplate 登录页现代皮肤 login.css
 * 层叠于 newloginmain.css 之后, 只改视觉不改结构/ID,
 * 保证 newlogo.js 的 TAB 切换/验证码/提示逻辑不受影响
 * ============================================================ */

/* ---------- 背景 ---------- */
#bg {
	background: linear-gradient(135deg, #0b1220 0%, #101c3a 45%, #0e2440 100%);
	position: relative;
}
#bg::before, #bg::after {
	content: ""; position: fixed; border-radius: 50%; filter: blur(130px); pointer-events: none; z-index: 0;
}
#bg::before { width: 560px; height: 560px; background: rgba(37, 99, 235, .30); top: -160px; left: -140px; }
#bg::after { width: 480px; height: 480px; background: rgba(6, 182, 212, .24); bottom: -180px; right: -120px; }

/* ---------- 主卡片 ---------- */
#login_wrap {
	width: 1020px;
	min-height: 540px;
	border-radius: 22px;
	margin-top: -270px;
	margin-right: -510px;
	border: 1px solid rgba(255, 255, 255, .08);
	box-shadow: 0 30px 80px rgba(2, 8, 23, .65);
	z-index: 1;
}

/* 左侧品牌/下载面板 */
#login_img {
	min-height: 540px;
	background: linear-gradient(160deg, #12213f 0%, #0f2c44 60%, #0d3448 100%);
	position: relative;
	overflow: hidden;
}
#login_img .circle {
	background: linear-gradient(45deg, #1d4ed8, #0891b2);
	box-shadow: 0 12px 40px rgba(37, 99, 235, .45);
}
#login_img .circle span:nth-child(1) { background: #3b82f6; opacity: .5; }
#login_img .circle span:nth-child(2) { background: #06b6d4; opacity: .5; }
#login_img .container { position: relative; z-index: 2; }
#login_img .star span {
	background: radial-gradient(#a5f3fc 10%, #fff 20%, rgba(72, 34, 64, 0));
	box-shadow: 0 0 8px #67e8f9;
}
#login_img .fly_star span {
	background: linear-gradient(to right, rgba(103, 232, 249, .8), rgba(103, 232, 249, 0));
}

/* 右侧登录面板 */
#login {
	min-height: 540px;
	background: linear-gradient(165deg, rgba(16, 28, 52, .96) 0%, rgba(11, 21, 38, .98) 100%);
}
#login #status {
	width: 200px; height: 38px; margin: 34px auto 26px;
	font-size: 21px; letter-spacing: 1px;
}
#login #status i {
	width: 100%; text-align: center; left: 0;
	background: linear-gradient(90deg, #60a5fa, #22d3ee);
	-webkit-background-clip: text; background-clip: text; color: transparent;
}
#login .login_windows { margin-top: -160px; }
#login .login_windows a { color: #e2e8f0; }

/* ---------- 表单控件 ---------- */
.form input {
	width: 300px; height: 44px; line-height: normal;
	box-sizing: border-box;
	background: rgba(255, 255, 255, .06);
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: 12px;
	padding: 0 14px; margin-bottom: 16px;
	font-size: 15px; color: #eaf1ff;
	transition: border-color .2s, background .2s, box-shadow .2s;
	appearance: none; -webkit-appearance: none;
}
.form input::placeholder { color: #6b7ea3; font-size: 14px; font-family: inherit; }
.form input:focus {
	border-color: rgba(56, 152, 236, .9); background: rgba(255, 255, 255, .1);
	box-shadow: 0 0 0 3px rgba(37, 99, 235, .25);
}
/* 验证码输入框右侧留白, 避免文字被按钮/图片遮挡 */
#imgcode { padding-right: 118px; }
#mobilecode { padding-right: 128px; }

/* 图形验证码 */
#refreshcode { top: 0; right: 0; height: 44px; display: inline-block; }
#refreshcode img { height: 44px; width: 106px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .15); display: block; }

/* 手机验证码按钮 */
#btnCode {
	width: 116px; height: 44px; line-height: 44px; top: 0; right: 0;
	border-radius: 10px; font-size: 13px; letter-spacing: 1px;
	background: linear-gradient(90deg, #2563eb, #06b6d4);
	box-shadow: 0 6px 16px rgba(37, 99, 235, .35);
	transition: opacity .2s;
}
#btnCode:hover { background: linear-gradient(90deg, #2563eb, #06b6d4); opacity: .88; }
#btnCode.disabled { opacity: .45; cursor: not-allowed; }

/* 登录/注册按钮 */
.btn {
	width: 140px; height: 44px; margin-top: 20px;
	border: 0; border-radius: 12px; font-size: 16px; font-weight: 600; letter-spacing: 4px;
	background: linear-gradient(90deg, #2563eb, #06b6d4); color: #fff;
	box-shadow: 0 10px 22px rgba(37, 99, 235, .38);
	transition: transform .15s, box-shadow .2s, filter .2s;
	font-family: inherit;
}
.btn:hover { background: linear-gradient(90deg, #2563eb, #06b6d4); filter: brightness(1.1); transform: translateY(-1px); box-shadow: 0 12px 26px rgba(6, 182, 212, .42); }
.btn:active { transform: translateY(0); }
#btn { background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .22); box-shadow: none; letter-spacing: 4px; }
#btn:hover { background: rgba(255, 255, 255, .14); border-color: rgba(103, 232, 249, .6); color: #a5f3fc; }

/* ---------- 提示条(toast) ---------- */
#hint {
	line-height: 56px; font-size: 16px; letter-spacing: 1px;
	background: linear-gradient(90deg, #1d4ed8, #0891b2);
	box-shadow: 0 8px 30px rgba(2, 8, 23, .5);
	border-radius: 0 0 16px 16px;
	width: 480px; left: 50%; margin-left: -240px;
}
#hint p { margin: 0; }

/* ---------- 版权 ---------- */
.copyright {
	margin-top: 396px; color: #55688c; font-size: 12px; letter-spacing: .5px;
}

/* ---------- 加载动画/遮罩 ---------- */
.sk-spinner-wave div {
	background: linear-gradient(180deg, #60a5fa, #22d3ee);
	border-radius: 3px; width: 5px; margin-right: 5px;
}
.loginmask { height: 540px; background: rgba(4, 10, 22, .55); backdrop-filter: blur(2px); border-radius: 0 22px 22px 0; }

/* ---------- 下载区(右侧面板) ---------- */
.p-down { margin-top: 300px; }
/* 下载按钮为内联样式, 用 !important 统一为品牌渐变风格 */
.p-down a[style] {
	background: linear-gradient(90deg, #2563eb, #06b6d4) !important;
	border-radius: 10px !important;
	padding: 10px 14px !important;
	box-shadow: 0 6px 16px rgba(37, 99, 235, .35);
	transition: filter .2s, transform .15s;
}
.p-down a[style]:hover { filter: brightness(1.12); transform: translateY(-1px); }

/* ---------- 响应式补充 ---------- */
@media screen and (max-width: 1060px) {
	#login_wrap { width: 520px; margin-right: -260px; }
	#login { width: 100%; }
	.copyright { margin-top: 400px; }
	.loginmask { border-radius: 22px; }
}
@media screen and (max-width: 560px) {
	#login_wrap { width: 340px; margin-right: -170px; border-radius: 18px; }
	#login .login_windows { margin-left: -140px; }
	.form input, #imgcode, #mobilecode { width: 260px; }
	.btn { width: 122px; letter-spacing: 2px; }
	#hint { width: 320px; margin-left: -160px; }
}