html {
	height: 100%;
}

/* 登录页：纯蓝系背景 + 全屏流光 + 左右分栏垂直居中（无背景图） */
body.signin {
	position: relative;
	min-height: 100vh;
	height: auto;
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 32px 20px 48px;
	box-sizing: border-box;
	color: #e8f4ff;
	overflow-x: hidden;
	/* 主背景：深蓝到中蓝的纵向渐变，偏冷色 */
	background:
		radial-gradient(ellipse 120% 80% at 50% -20%, rgba(56, 189, 248, 0.22), transparent 55%),
		radial-gradient(ellipse 90% 60% at 100% 50%, rgba(14, 165, 233, 0.18), transparent 50%),
		radial-gradient(ellipse 80% 50% at 0% 80%, rgba(59, 130, 246, 0.2), transparent 45%),
		linear-gradient(180deg, #020617 0%, #0c4a6e 38%, #075985 72%, #0369a1 100%);
	background-attachment: fixed;
}

/* 氛围层：固定铺满，流光与网格仅做 transform/opacity，利于合成层性能 */
.login-page-atmos {
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	overflow: hidden;
}

/* 不规则「块状」流光：clip-path 多边形 + 中等模糊，在全屏大背景内缓慢漂移、旋转（mesh 感） */
.login-blox {
	position: absolute;
	pointer-events: none;
	will-change: transform, opacity;
	mix-blend-mode: screen;
	filter: blur(36px);
	opacity: 0.11;
}

.login-blox--1 {
	width: min(52vw, 560px);
	height: min(42vh, 420px);
	left: -8%;
	top: 6%;
	clip-path: polygon(0% 32%, 42% 0%, 100% 28%, 92% 100%, 18% 88%);
	background: linear-gradient(128deg, rgba(56, 189, 248, 0.55), rgba(14, 165, 233, 0.12));
	animation: loginBlox1 32s ease-in-out infinite;
}

.login-blox--2 {
	width: min(48vw, 520px);
	height: min(38vh, 400px);
	right: -6%;
	top: 2%;
	clip-path: polygon(12% 0%, 100% 8%, 88% 100%, 0% 72%);
	background: linear-gradient(210deg, rgba(125, 211, 252, 0.45), rgba(8, 145, 178, 0.1));
	animation: loginBlox2 38s ease-in-out infinite;
	opacity: 0.09;
}

.login-blox--3 {
	width: min(70vw, 720px);
	height: min(28vh, 300px);
	left: 8%;
	bottom: -4%;
	clip-path: polygon(0% 55%, 22% 0%, 100% 18%, 96% 100%, 0% 92%);
	background: linear-gradient(12deg, rgba(14, 165, 233, 0.5), rgba(59, 130, 246, 0.08));
	animation: loginBlox3 44s ease-in-out infinite;
	opacity: 0.085;
}

.login-blox--4 {
	width: min(36vw, 380px);
	height: min(52vh, 520px);
	left: 38%;
	top: 18%;
	clip-path: polygon(0% 8%, 100% 0%, 85% 100%, 0% 92%);
	background: linear-gradient(168deg, rgba(186, 230, 253, 0.4), rgba(56, 189, 248, 0.06));
	animation: loginBlox4 29s ease-in-out infinite;
	opacity: 0.075;
}

.login-blox--5 {
	width: min(44vw, 440px);
	height: min(34vh, 340px);
	right: 12%;
	bottom: 18%;
	clip-path: polygon(20% 0%, 100% 35%, 78% 100%, 0% 62%);
	background: linear-gradient(265deg, rgba(96, 165, 250, 0.42), rgba(125, 211, 252, 0.1));
	animation: loginBlox5 35s ease-in-out infinite;
	opacity: 0.08;
}

.login-blox--6 {
	width: min(58vw, 600px);
	height: min(22vh, 240px);
	left: -4%;
	top: 48%;
	clip-path: polygon(0% 0%, 88% 12%, 100% 88%, 14% 100%);
	background: linear-gradient(95deg, rgba(34, 211, 238, 0.35), rgba(14, 116, 144, 0.12));
	animation: loginBlox6 41s ease-in-out infinite;
	opacity: 0.07;
}

.login-blox--7 {
	width: min(40vw, 400px);
	height: min(36vh, 360px);
	right: -2%;
	top: 42%;
	clip-path: polygon(30% 0%, 100% 22%, 70% 100%, 0% 78%);
	background: linear-gradient(320deg, rgba(224, 242, 254, 0.38), rgba(56, 189, 248, 0.08));
	animation: loginBlox7 27s ease-in-out infinite;
	opacity: 0.065;
}

/* 一层超大柔光，把块状边缘融进整体背景（常见 aurora 做法） */
.login-aurora {
	position: absolute;
	pointer-events: none;
	will-change: transform, opacity;
	mix-blend-mode: screen;
	filter: blur(88px);
	opacity: 0.06;
}

.login-aurora--soft {
	width: 150vmin;
	height: 150vmin;
	left: 50%;
	top: 50%;
	margin-left: -75vmin;
	margin-top: -75vmin;
	border-radius: 44% 56% 52% 48% / 54% 46% 58% 42%;
	background: radial-gradient(ellipse at 45% 40%, rgba(125, 211, 252, 0.35), transparent 62%);
	animation: loginAuroraSoft 60s ease-in-out infinite;
}

/* 极淡网格，避免抢戏 */
.login-grid-mesh {
	position: absolute;
	inset: 0;
	opacity: 0.055;
	background-image:
		linear-gradient(rgba(125, 211, 252, 0.22) 1px, transparent 1px),
		linear-gradient(90deg, rgba(125, 211, 252, 0.22) 1px, transparent 1px);
	background-size: 56px 56px;
	mask-image: radial-gradient(ellipse 90% 75% at 50% 48%, black 5%, transparent 72%);
}

.signinpanel {
	position: relative;
	z-index: 1;
	width: min(920px, calc(100vw - 40px));
	margin: 0 auto;
	color: rgba(255, 255, 255, 0.96);
}

.modern-login {
	position: relative;
}

/* 左品牌 + 右登录：强制横向 flex，避免子项数量与 grid 列数不一致时换行成上下结构 */
.tech-login-grid {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: stretch;
	justify-content: center;
	gap: 20px;
	width: 100%;
	min-width: 0;
}

.tech-login-grid > .login-panel-card {
	flex: 1 1 0;
	min-width: 0;
	max-width: 100%;
}

/* 左右卡片共用底框样式，保证视觉宽度一致 */
.login-panel-card {
	position: relative;
	min-height: 360px;
	padding: 40px 32px 48px;
	border: 1px solid rgba(125, 211, 252, 0.32);
	border-radius: 20px;
	background: linear-gradient(165deg, rgba(15, 23, 42, 0.78) 0%, rgba(8, 47, 73, 0.58) 100%);
	box-shadow:
		0 0 0 1px rgba(56, 189, 248, 0.1) inset,
		0 24px 48px rgba(2, 6, 23, 0.5),
		0 0 60px rgba(14, 165, 233, 0.1);
	backdrop-filter: blur(10px);
}

.form-panel {
	display: flex;
	align-items: center;
	justify-content: center;
}
.brand-combined-logo {
	display: block;
	width: min(100%, 430px);
	max-width: 430px;
	height: auto;
	margin: 2px auto 8px;
	object-fit: contain;
	filter:
		drop-shadow(0 12px 24px rgba(2, 6, 23, 0.34))
		drop-shadow(0 0 16px rgba(0, 136, 255, 0.12));
}
.brand-subtitle {
	margin-top: 18px;
	line-height: 1.8;
	font-size: 17px;
	color: rgba(221, 243, 255, .92);
	max-width: 460px;
}
.brand-lines {
	position: absolute;
	left: 40px;
	right: 40px;
	bottom: 26px;
	display: grid;
	gap: 8px;
}
.brand-lines span {
	height: 2px;
	background: linear-gradient(90deg, rgba(83, 230, 255, .82), transparent);
	animation: lineFlow 2.8s linear infinite;
}
.brand-lines span:nth-child(2) { animation-delay: .4s; opacity: .75; }
.brand-lines span:nth-child(3) { animation-delay: .8s; opacity: .5; }
.brand-lines span:first-child {
	background: linear-gradient(90deg, rgba(255, 138, 0, .9), rgba(255, 201, 40, .58), transparent);
}
.signinpanel .logopanel {
	float:none;
	width:auto;
	padding:0;
	background:0 0
}
.signinpanel .signin-info ul {
	list-style:none;
	padding:0;
	margin:20px 0
}
.signinpanel .form-control {
	display:block;
	margin-top:15px;
	background: rgba(7, 30, 68, .72);
	border: 1px solid rgba(118, 217, 255, .3);
	color: #f5fbff;
	height: 42px !important;
	border-radius: 10px !important;
}
.form-panel form .login-helper {
	margin-top: 8px;
	margin-bottom: 8px;
	color: rgba(199, 234, 255, .82);
	font-size: 13px;
}
/* 输入框不再使用背景图，保持纯蓝玻璃质感 */
.signinpanel .uname,
.signinpanel .pword {
	background: rgba(15, 23, 42, 0.65);
	color: #f0f9ff;
}
.signinpanel .code {
	background: rgba(15, 23, 42, 0.65);
	color: #f0f9ff;
	margin: 0 0 15px 0;
}
.signinpanel .btn {
	margin-top: 15px;
	height: 44px;
	border: 0;
	border-radius: 12px;
	background: linear-gradient(90deg, #22d3ee, #0ea5e9, #0284c7);
	color: #020617;
	font-weight: 700;
	letter-spacing: 2px;
	box-shadow: 0 8px 28px rgba(14, 165, 233, 0.45);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.signinpanel .btn:hover {
	transform: translateY(-1px);
	box-shadow: 0 12px 36px rgba(14, 165, 233, 0.55);
}
/* 表单不再单独缩窄，与左侧卡片同宽，由 .login-panel-card 统一外框 */
.signinpanel .form-panel form {
	width: 100%;
	max-width: none;
	margin: 0;
	background: transparent;
	border: none;
	box-shadow: none;
	border-radius: 0;
	padding: 0;
	backdrop-filter: none;
}
.signup-footer {
	border-top:solid 1px rgba(137, 223, 255, .25);
	margin:20px 0;
	padding-top:15px;
	color: rgba(196, 230, 255, .85);
}
.login-compliance-footer {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 6px 16px;
	text-align: center;
}
.login-compliance-footer a {
	color: rgba(196, 230, 255, .85);
	text-decoration: none;
}
.login-compliance-footer a:hover {
	color: #ffffff;
	text-decoration: underline;
}
.signinpanel .imgcode {
	border: 1px solid rgba(124, 222, 255, .35);
	border-radius: 10px;
}
/*
 * 窄屏：上下堆叠 + 安全区 + 验证码行全宽（避免两列挤爆）+ 品牌装饰条脱离绝对定位（避免叠字）。
 * 注意：不要再在更小断点把 .signinpanel 设为 width:auto + 左右 margin，会覆盖本段的 100% 导致「错乱」。
 *
 * 重要（H5 叠字）：桌面端子卡片为 flex:1 1 0 与父级 column 组合时，部分内核会给两块「均分主轴高度」，
 * 再叠加本段原先的 min-height:0，卡片盒被压扁而内容 overflow:visible，品牌区与表单会画在同一视觉区域。
 * 窄屏必须改为 flex:0 0 auto + min-height:auto，让每块高度随内容撑开。
 */
@media screen and (max-width: 640px) {
	body.signin {
		align-items: stretch;
		justify-content: flex-start;
		padding:
			calc(12px + env(safe-area-inset-top, 0px))
			max(10px, env(safe-area-inset-right, 0px))
			calc(24px + env(safe-area-inset-bottom, 0px))
			max(10px, env(safe-area-inset-left, 0px));
	}

	.signinpanel,
	.signuppanel {
		margin: 0 auto;
		width: 100% !important;
		max-width: 100%;
		padding: 0 4px;
		box-sizing: border-box;
	}

	/* 柔光层在窄屏略缩小，减轻 150vmin 带来的横向溢出风险 */
	.login-aurora--soft {
		width: 120vmin;
		height: 120vmin;
		margin-left: -60vmin;
		margin-top: -60vmin;
		opacity: 0.045;
	}

	.tech-login-grid {
		flex-direction: column;
		flex-wrap: nowrap;
		align-items: stretch;
		gap: 16px;
	}

	/* 见文件头注释：取消 grow/shrink，避免两卡被压成条后内容互叠 */
	.tech-login-grid > .login-panel-card {
		flex: 0 0 auto;
		width: 100%;
		max-width: 100%;
		align-self: stretch;
	}

	/* 表单区勿再垂直居中到「被压扁的盒」里，顶对齐避免与上卡视觉穿插 */
	.form-panel {
		align-items: stretch;
		justify-content: flex-start;
	}

	.brand-combined-logo {
		width: min(100%, 390px);
		max-width: 390px;
		margin: 0 auto 6px;
	}

	.brand-subtitle {
		font-size: 15px;
		max-width: none;
	}

	/* 装饰线改为文档流，避免盖住副标题或底部按钮区 */
	.brand-lines {
		position: relative;
		left: auto;
		right: auto;
		bottom: auto;
		margin-top: 20px;
	}

	.login-panel-card {
		min-height: auto;
		padding: 22px 16px 28px;
	}

	.signinpanel .form-panel form {
		margin-top: 0;
	}

	/* Bootstrap .row 负 margin 在窄容器易出横向滚动，登录表单仅此一行 */
	.signinpanel #signupForm .row.m-t {
		margin-left: 0;
		margin-right: 0;
	}

	.signinpanel #signupForm .row.m-t > .col-xs-6 {
		width: 100%;
		float: none;
		padding-left: 0;
		padding-right: 0;
	}

	.signinpanel #signupForm .row.m-t > .col-xs-6 + .col-xs-6 {
		margin-top: 10px;
	}

	.signinpanel .imgcode {
		display: block;
		width: 100%;
		max-width: 100%;
		height: auto;
	}

	.signup-footer,
	.signuppanel .form-control {
		margin-bottom: 10px;
	}

	.signup-footer .pull-left,
	.signup-footer .pull-right {
		float: none !important;
		text-align: center;
	}

	.signinpanel .signin-info ul {
		display: none;
	}

	/* 「记住我」文案在深色底上保证对比度 */
	body.signin .checkbox-custom label {
		color: rgba(221, 243, 255, 0.95);
	}
}

/* 超窄屏仅补充安全区内边距，勿改面板宽度 */
@media screen and (max-width: 320px) {
	body.signin {
		padding-left: max(8px, env(safe-area-inset-left, 0px));
		padding-right: max(8px, env(safe-area-inset-right, 0px));
	}
}
/*
登录界面check样式
*/
.checkbox-custom {
    position: relative;
    padding: 0 15px 0 25px;
    margin-bottom: 7px;
    display: inline-block;
}
/*
将初始的checkbox的样式改变
*/
.checkbox-custom input[type="checkbox"] {
    opacity: 0; /*将初始的checkbox隐藏起来*/
    position: absolute;
    cursor: pointer;
    z-index: 2;
    margin: -6px 0 0 0;
    top: 50%;
    left: 3px;
}
/*
设计新的checkbox，位置
*/
.checkbox-custom label:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    margin-top: -9px;
    width: 18px;
    height: 17px;
    display: inline-block;
    border-radius: 2px;
    border: 1px solid #bbb;
    background: #fff;
}
/*
点击初始的checkbox，将新的checkbox关联起来
*/
.checkbox-custom input[type="checkbox"]:checked +label:after {
    position: absolute;
    display: inline-block;
    font-family: 'Glyphicons Halflings';
    content: "\e013";
    top: 42%;
    left: 3px;
    margin-top: -5px;
    font-size: 11px;
    line-height: 1;
    width: 16px;
    height: 16px;
    color: #333;
}
.checkbox-custom label {
    cursor: pointer;
    line-height: 1.2;
    font-weight: normal; /*改变了rememberme的字体*/
    margin-bottom: 0;
    text-align: left;
}

.form-control, .form-control:focus, .has-error .form-control:focus,  .has-success .form-control:focus, .has-warning .form-control:focus,  .navbar-collapse, .navbar-form, .navbar-form-custom .form-control:focus,  .navbar-form-custom .form-control:hover, .open .btn.dropdown-toggle,  .panel, .popover, .progress, .progress-bar {
    box-shadow: none;
}

.form-control {
	border-radius: 1px !important;
	padding: 6px 12px !important;
	height: 34px !important;
}

/* 登录页内输入框尺寸与圆角覆盖全局 .form-control，避免被 34px 规则压扁 */
body.signin .signinpanel .form-control {
	height: 42px !important;
	border-radius: 10px !important;
}

.form-control:focus {
	border-color: #38bdf8 !important;
	background: rgba(15, 23, 42, 0.92) !important;
	color: #fff;
}

/* 「记住我」在深色背景下的可读性 */
body.signin .checkbox-custom label:before {
	border: 1px solid rgba(125, 211, 252, 0.55);
	background: rgba(15, 23, 42, 0.75);
}
body.signin .checkbox-custom input[type="checkbox"]:checked + label:after {
	color: #38bdf8;
}

/* 品牌装饰线条只做透明度和位移变化，提升性能稳定性。 */
@keyframes lineFlow {
	0% { transform: translateX(0); opacity: .5; }
	50% { opacity: .95; }
	100% { transform: translateX(24px); opacity: .3; }
}

@keyframes loginBlox1 {
	0% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); opacity: 0.1; }
	30% { transform: translate3d(8%, 4%, 0) rotate(10deg) scale(1.05); opacity: 0.13; }
	55% { transform: translate3d(-3%, 9%, 0) rotate(-6deg) scale(0.96); opacity: 0.08; }
	100% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); opacity: 0.1; }
}

@keyframes loginBlox2 {
	0% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); opacity: 0.085; }
	28% { transform: translate3d(-6%, 8%, 0) rotate(-12deg) scale(1.08); opacity: 0.11; }
	62% { transform: translate3d(5%, -5%, 0) rotate(8deg) scale(0.94); opacity: 0.07; }
	100% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); opacity: 0.085; }
}

@keyframes loginBlox3 {
	0% { transform: translate3d(0, 0, 0) rotate(0deg); opacity: 0.08; }
	40% { transform: translate3d(10%, -6%, 0) rotate(14deg); opacity: 0.11; }
	100% { transform: translate3d(0, 0, 0) rotate(0deg); opacity: 0.08; }
}

@keyframes loginBlox4 {
	0% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); opacity: 0.07; }
	35% { transform: translate3d(-8%, 6%, 0) rotate(-10deg) scale(1.1); opacity: 0.095; }
	70% { transform: translate3d(6%, -8%, 0) rotate(12deg) scale(0.92); opacity: 0.055; }
	100% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); opacity: 0.07; }
}

@keyframes loginBlox5 {
	0% { transform: translate3d(0, 0, 0) rotate(0deg); opacity: 0.075; }
	50% { transform: translate3d(-5%, -10%, 0) rotate(16deg); opacity: 0.1; }
	100% { transform: translate3d(0, 0, 0) rotate(0deg); opacity: 0.075; }
}

@keyframes loginBlox6 {
	0% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); opacity: 0.065; }
	45% { transform: translate3d(12%, 3%, 0) rotate(-8deg) scale(1.06); opacity: 0.09; }
	100% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); opacity: 0.065; }
}

@keyframes loginBlox7 {
	0% { transform: translate3d(0, 0, 0) rotate(0deg); opacity: 0.06; }
	25% { transform: translate3d(4%, 10%, 0) rotate(11deg); opacity: 0.085; }
	75% { transform: translate3d(-10%, -4%, 0) rotate(-14deg); opacity: 0.07; }
	100% { transform: translate3d(0, 0, 0) rotate(0deg); opacity: 0.06; }
}

@keyframes loginAuroraSoft {
	0% { transform: rotate(0deg) scale(1); opacity: 0.05; }
	50% { transform: rotate(18deg) scale(1.08); opacity: 0.08; }
	100% { transform: rotate(0deg) scale(1); opacity: 0.05; }
}

/* 动效降级：减少系统层动画，保障可访问性与低性能设备体验。 */
@media (prefers-reduced-motion: reduce) {
	.brand-lines span,
	.login-page-atmos .login-aurora,
	.login-page-atmos .login-blox {
		animation: none !important;
	}
}