/**
 * 高级登录页主题 — 替换图片请改 :root 中的变量
 * 推荐顶图：深色科技/数据中心/抽象几何光效（1920×600+，WebP/JPG < 400KB）
 */
:root {
	--hero-image: url('../images/loginbg.png');
	--hero-fallback:
		linear-gradient(145deg, #0a0c12 0%, #12151c 40%, #1a1510 72%, #0d0e14 100%);
	--accent: #d4af6a;
	--accent-bright: #f0d78c;
	--accent-glow: rgba(212, 175, 106, 0.35);
	--card-bg: rgba(12, 14, 20, 0.82);
	--card-border: rgba(255, 255, 255, 0.12);
	--text-primary: #f4f0e6;
	--text-muted: rgba(200, 210, 230, 0.55);
	--input-bg: rgba(255, 255, 255, 0.04);
	--radius-card: 22px;
	--radius-pill: 999px;
	--font-ui: "SF Pro Text", system-ui, -apple-system, "Segoe UI", "Microsoft YaHei", sans-serif;
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html, body {
	min-height: 100%;
}

body.premium-login-page {
	font-family: var(--font-ui);
	font-size: 14px;
	color: var(--text-primary);
	background: #08090d;
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
}

/* 登录页输入框允许选择与复制粘贴 */
body.premium-login-page input,
body.premium-login-page textarea {
	-webkit-user-select: text;
	user-select: text;
}

a {
	text-decoration: none;
	color: var(--accent-bright);
}

input {
	outline: none;
	border: none;
	background: transparent;
	font-family: inherit;
}

.page-shell {
	position: relative;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

/* 顶部英雄区（默认纯 CSS，大图 idle 后加载） */
.hero-banner {
	position: relative;
	width: 100%;
	height: clamp(200px, 32vh, 300px);
	flex-shrink: 0;
	background: var(--hero-fallback);
	background-size: cover;
	background-position: center 30%;
	overflow: hidden;
}

.hero-banner.has-photo {
	background-image: var(--hero-image);
	transition: background-image 0.6s ease;
}

.hero-banner::after {
	content: '';
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, rgba(4, 6, 12, 0.1) 0%, rgba(4, 6, 12, 0.5) 55%, #08090d 100%),
		linear-gradient(90deg, rgba(8, 9, 13, 0.35) 0%, transparent 42%, transparent 58%, rgba(8, 9, 13, 0.35) 100%);
	pointer-events: none;
	z-index: 1;
}

/* 动态：极光流线 + 星点网格 */
.hero-ambient {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	overflow: hidden;
}

.hero-ambient .aurora {
	position: absolute;
	width: 140%;
	height: 55%;
	left: -20%;
	filter: blur(48px);
	opacity: 0.5;
	mix-blend-mode: screen;
}

.hero-ambient .aurora-a {
	top: -10%;
	background: linear-gradient(100deg, transparent 10%, rgba(212, 175, 106, 0.45) 40%, rgba(120, 160, 255, 0.25) 70%, transparent 90%);
	animation: auroraDriftA 14s ease-in-out infinite;
}

.hero-ambient .aurora-b {
	top: 15%;
	background: linear-gradient(75deg, transparent 5%, rgba(240, 200, 120, 0.3) 35%, rgba(180, 120, 255, 0.2) 65%, transparent 95%);
	animation: auroraDriftB 18s ease-in-out infinite reverse;
}

.hero-ambient .grid-mesh {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(212, 175, 106, 0.06) 1px, transparent 1px),
		linear-gradient(90deg, rgba(212, 175, 106, 0.06) 1px, transparent 1px);
	background-size: 36px 36px;
	mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.7) 0%, transparent 85%);
	animation: gridPan 20s linear infinite;
}

.hero-ambient .star {
	position: absolute;
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: #f0d78c;
	box-shadow: 0 0 8px rgba(240, 215, 140, 0.9);
	animation: starTwinkle 3s ease-in-out infinite;
}

.hero-ambient .s1 { left: 18%; top: 22%; animation-delay: 0s; }
.hero-ambient .s2 { left: 72%; top: 18%; animation-delay: 0.6s; }
.hero-ambient .s3 { left: 55%; top: 38%; animation-delay: 1.2s; }
.hero-ambient .s4 { left: 32%; top: 48%; animation-delay: 0.3s; }
.hero-ambient .s5 { left: 85%; top: 42%; animation-delay: 1.8s; }

@keyframes auroraDriftA {
	0%, 100% { transform: translateX(-6%) skewY(-3deg); opacity: 0.35; }
	50% { transform: translateX(8%) skewY(2deg); opacity: 0.65; }
}

@keyframes auroraDriftB {
	0%, 100% { transform: translateX(5%) skewY(2deg); opacity: 0.3; }
	50% { transform: translateX(-7%) skewY(-2deg); opacity: 0.55; }
}

@keyframes gridPan {
	0% { background-position: 0 0; }
	100% { background-position: 36px 36px; }
}

@keyframes starTwinkle {
	0%, 100% { opacity: 0.25; transform: scale(0.8); }
	50% { opacity: 1; transform: scale(1.3); }
}

.hero-brand {
	position: absolute;
	left: 50%;
	bottom: 28px;
	transform: translateX(-50%);
	z-index: 2;
	text-align: center;
	width: 90%;
	max-width: 420px;
	animation: brandReveal 0.85s cubic-bezier(0.34, 1.2, 0.64, 1) both;
}

@keyframes brandReveal {
	from { opacity: 0; transform: translateX(-50%) scale(0.88); filter: blur(4px); }
	to { opacity: 1; transform: translateX(-50%) scale(1); filter: blur(0); }
}

/* CSS 品牌徽标：双轨卫星 */
.hero-emblem {
	position: relative;
	width: 56px;
	height: 56px;
	margin: 0 auto 12px;
}

.hero-emblem-orbit {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: 1px solid rgba(212, 175, 106, 0.2);
}

.hero-emblem-orbit {
	animation: orbitSpinA 4s linear infinite;
}

.hero-emblem-orbit::after {
	content: '';
	position: absolute;
	top: -3px;
	left: 50%;
	width: 6px;
	height: 6px;
	margin-left: -3px;
	border-radius: 50%;
	background: var(--accent-bright);
	box-shadow: 0 0 10px var(--accent-glow);
}

.hero-emblem-orbit.orbit-b {
	inset: 8px;
	animation: orbitSpinB 6s linear infinite reverse;
}

.hero-emblem-orbit.orbit-b::after {
	width: 4px;
	height: 4px;
	margin-left: -2px;
	top: -2px;
	opacity: 0.85;
}

.hero-emblem-core {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 18px;
	height: 18px;
	margin: -9px 0 0 -9px;
	clip-path: polygon(50% 0%, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%);
	background: linear-gradient(160deg, #fff3c4, #c9a227);
	box-shadow: 0 0 20px rgba(212, 175, 106, 0.75);
	animation: hexBreath 3s ease-in-out infinite;
}

@keyframes orbitSpinA {
	to { transform: rotate(360deg); }
}

@keyframes orbitSpinB {
	to { transform: rotate(-360deg); }
}

@keyframes hexBreath {
	0%, 100% { transform: scale(1); filter: brightness(1); }
	50% { transform: scale(1.08); filter: brightness(1.15); }
}

.hero-tagline {
	font-size: 11px;
	letter-spacing: 0.35em;
	text-transform: uppercase;
	color: rgba(240, 215, 140, 0.75);
	font-weight: 500;
	animation: taglineTrack 5s ease-in-out infinite;
}

@keyframes taglineTrack {
	0%, 100% { letter-spacing: 0.32em; opacity: 0.65; }
	50% { letter-spacing: 0.42em; opacity: 1; }
}

/* 背景：慢速流光 */
.page-shell::before {
	content: '';
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background:
		radial-gradient(ellipse 80% 50% at 30% -10%, rgba(212, 175, 106, 0.1), transparent 55%),
		radial-gradient(circle 400px at 90% 85%, rgba(100, 130, 220, 0.08), transparent 60%),
		radial-gradient(circle 300px at 10% 90%, rgba(212, 175, 106, 0.05), transparent 55%);
	animation: bgShift 16s ease-in-out infinite alternate;
}

@keyframes bgShift {
	0% { filter: hue-rotate(0deg); opacity: 0.9; }
	100% { filter: hue-rotate(12deg); opacity: 1; }
}

.auth-stage {
	position: relative;
	z-index: 5;
	flex: 1;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: 0 16px 48px;
	margin-top: -72px;
	animation: stageSlide 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both;
}

@keyframes stageSlide {
	from { opacity: 0; transform: translateX(-24px); }
	to { opacity: 1; transform: translateX(0); }
}

.login_bg {
	width: 100%;
	display: flex;
	justify-content: center;
}

/* 卡片 */
.form,
.login100-form {
	width: 100%;
	max-width: 400px;
	background: var(--card-bg);
	border: 1px solid var(--card-border);
	border-radius: var(--radius-card);
	box-shadow:
		0 24px 80px rgba(0, 0, 0, 0.55),
		0 0 0 1px rgba(255, 255, 255, 0.04) inset,
		0 0 60px var(--accent-glow);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	overflow: hidden;
	animation: cardFloat 0.65s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both,
		cardGlow 4s ease-in-out 0.8s infinite;
}

@keyframes cardFloat {
	from { opacity: 0; transform: perspective(800px) rotateX(8deg) translateY(24px); }
	to { opacity: 1; transform: perspective(800px) rotateX(0) translateY(0); }
}

@keyframes cardGlow {
	0%, 100% { box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55), 0 0 40px rgba(212, 175, 106, 0.12); }
	50% { box-shadow: 0 28px 90px rgba(0, 0, 0, 0.6), 0 0 55px rgba(212, 175, 106, 0.22); }
}

.form::before,
.login100-form::before {
	display: none;
}

/* 标题区 */
.form-header,
.login100-form-title {
	padding: 20px 20px 18px;
	text-align: center;
	background: linear-gradient(135deg, rgba(212, 175, 106, 0.22) 0%, rgba(212, 175, 106, 0.06) 100%);
	border-bottom: 1px solid rgba(212, 175, 106, 0.2);
	position: relative;
}

.form-header::before,
.login100-form-title::before {
	display: none;
}

.form-header-title,
.login100-form-title {
	font-size: 20px;
	font-weight: 700;
	letter-spacing: 0.2em;
}

.form-header-title,
#regDiv .form-header-title,
.login100-form-title {
	background: linear-gradient(90deg, #c9a227, #fff8e1, #f0d78c, #c9a227);
	background-size: 300% 100%;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	animation: titleShimmer 5s linear infinite;
}

.form-header-title span {
	display: inline-block;
}

@keyframes titleShimmer {
	0% { background-position: 0% 50%; }
	100% { background-position: 300% 50%; }
}

.header-side-copy {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	font-size: 10px;
	letter-spacing: 0.12em;
	color: var(--text-muted);
	white-space: nowrap;
}

.header-side-copy.left { left: 14px; }
.header-side-copy.right { right: 14px; }

#regDiv2 .login100-form-title {
	font-size: 18px;
	letter-spacing: 0.15em;
}

.form-content-wrapper,
.login100-form .form-content-wrapper {
	padding: 22px 22px 24px;
}

/* 输入框 */
.form div.userName,
.form div.passWord,
.wrap-input100 {
	border: 1px solid rgba(255, 255, 255, 0.1);
	background: var(--input-bg);
	border-radius: 14px;
	margin-bottom: 14px;
	min-height: 50px;
	display: flex;
	align-items: center;
	padding: 0 14px;
	transition: border-color 0.2s, box-shadow 0.2s;
}

.form div.userName:focus-within,
.form div.passWord:focus-within,
.wrap-input100:focus-within {
	border-color: rgba(212, 175, 106, 0.55);
	box-shadow: 0 0 0 3px rgba(212, 175, 106, 0.12);
	animation: inputPulse 2s ease-in-out infinite;
}

@keyframes inputPulse {
	0%, 100% { box-shadow: 0 0 0 3px rgba(212, 175, 106, 0.1); }
	50% { box-shadow: 0 0 0 3px rgba(212, 175, 106, 0.22), 0 0 16px rgba(212, 175, 106, 0.15); }
}

.form div.userName lable,
.form div.passWord lable,
.label-input100 {
	color: var(--text-muted);
	font-size: 13px;
	margin-right: 8px;
	white-space: nowrap;
	flex-shrink: 0;
}

.form div.userName input,
.form div.passWord input,
.input100,
.input60 {
	flex: 1;
	font-size: 15px;
	color: var(--text-primary);
	min-width: 0;
}

.form div.userName input::placeholder,
.form div.passWord input::placeholder,
.input100::placeholder {
	color: rgba(160, 170, 190, 0.45);
}

.wrap-input100 {
	position: relative;
	flex-wrap: wrap;
	padding-top: 8px;
	padding-bottom: 8px;
}

.wrap-input100 .label-input100 {
	width: 100%;
	font-size: 11px;
	margin-bottom: 4px;
}

.wrap-input100 .input100 {
	padding: 4px 0;
}

.focus-input100 {
	display: none;
}

.choose_box {
	padding: 4px 0 8px;
}

.choose_box lable {
	font-size: 12px;
	color: var(--text-muted);
}

.choose_box input[type="checkbox"] {
	accent-color: var(--accent);
	width: 15px;
	height: 15px;
}

/* 按钮 */
.login_btn,
.login100-form-btn {
	width: 100%;
	padding: 14px;
	margin-top: 8px;
	border: none;
	border-radius: var(--radius-pill);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.2em;
	color: #1a1408;
	cursor: pointer;
	background: linear-gradient(135deg, #f0d78c 0%, #c9a227 50%, #e8c96a 100%);
	background-size: 200% 100%;
	box-shadow: 0 12px 32px rgba(212, 175, 106, 0.35);
	transition: transform 0.15s, box-shadow 0.15s;
	animation: btnGlow 2.5s ease-in-out infinite;
}

@keyframes btnGlow {
	0%, 100% {
		box-shadow: 0 12px 32px rgba(212, 175, 106, 0.35), 0 0 0 0 rgba(240, 215, 140, 0);
	}
	50% {
		box-shadow: 0 14px 36px rgba(212, 175, 106, 0.5), 0 0 0 6px rgba(240, 215, 140, 0.12);
	}
}

.login_btn:hover,
.login100-form-btn:hover {
	transform: translateY(-1px);
	box-shadow: 0 16px 40px rgba(212, 175, 106, 0.45);
}

.login_btn:active,
.login100-form-btn:active {
	transform: translateY(0);
}

.login-link,
.txt2 {
	margin-top: 16px;
	text-align: center;
	font-size: 12px;
	color: var(--text-muted);
}

.login-link a,
.txt2 {
	cursor: pointer;
	color: var(--accent-bright);
}

.token-brand {
	margin-top: 18px;
	text-align: center;
	font-size: 9px;
	letter-spacing: 0.28em;
	color: var(--text-muted);
	opacity: 0.65;
}

.container-login100-form-btn {
	margin-top: 8px;
}

.wrap-login100-form-btn {
	border-radius: var(--radius-pill);
	overflow: hidden;
}

.login100-form-bgbtn {
	background: linear-gradient(135deg, #f0d78c, #c9a227);
}

.sendSms {
	background: rgba(212, 175, 106, 0.15);
	color: var(--accent-bright);
	border: 1px solid rgba(212, 175, 106, 0.35);
	border-radius: 8px;
	padding: 6px 10px;
	font-size: 12px;
	cursor: pointer;
}

.flex-col-c { margin-top: 16px; text-align: center; }

.p-b-30 { padding-bottom: 0; }
.m-b-10 { margin-bottom: 12px; }
.p-b-5 { padding-bottom: 8px; }
.p-t-32 { padding-top: 16px; }

.validate-form .wrap-input100[data-validate] {
	margin-bottom: 12px;
}

#regDiv .passWord[style*="display:flex"] {
	border: none;
	background: transparent;
	padding: 0;
	margin-bottom: 14px;
}

#regDiv .passWord[style*="display:flex"] > div:first-child {
	flex: 1;
	display: flex;
	align-items: center;
	border: 1px solid rgba(255, 255, 255, 0.1);
	background: var(--input-bg);
	border-radius: 14px;
	padding: 0 14px;
	min-height: 50px;
}

.logo { display: none; }

.login-top-bg { display: none; }

/* 水印层 */
#tk-watermark {
	position: fixed;
	inset: 0;
	z-index: 9990;
	pointer-events: none;
	opacity: 0.04;
	background-repeat: repeat;
	background-size: 280px 140px;
}

/* Layer 弹层 */
.layui-m-layer { position: relative; z-index: 19891014; }
.layui-m-layer * { box-sizing: content-box; }
.layui-m-layermain, .layui-m-layershade {
	position: fixed; left: 0; top: 0; width: 100%; height: 100%;
}
.layui-m-layershade { background-color: rgba(0, 0, 0, 0.65); pointer-events: auto; }
.layui-m-layermain {
	display: table; font-family: var(--font-ui); pointer-events: none;
}
.layui-m-layermain .layui-m-layersection {
	display: table-cell; vertical-align: middle; text-align: center;
}
.layui-m-layerchild {
	position: relative; display: inline-block; text-align: left;
	background-color: #fff; font-size: 14px; border-radius: 12px;
	box-shadow: 0 22px 70px rgba(0, 0, 0, 0.35); pointer-events: auto;
	animation: layui-m-anim-scale 0.2s both;
}
@keyframes layui-m-anim-scale {
	0% { opacity: 0; transform: scale(0.92); }
	100% { opacity: 1; transform: scale(1); }
}
.layui-m-layer2 .layui-m-layerchild {
	width: auto; max-width: 260px; background: transparent; box-shadow: none; color: #fff;
}
.layui-m-layer2 .layui-m-layercont { text-align: center; padding: 0; line-height: 0; }
.layui-m-layer2 .layui-m-layercont i {
	width: 25px; height: 25px; margin-left: 8px; display: inline-block;
	background-color: var(--accent-bright); border-radius: 100%;
	animation: layui-m-anim-loading 1.4s infinite ease-in-out both;
}
@keyframes layui-m-anim-loading {
	0%, 100%, 80% { transform: scale(0); }
	40% { transform: scale(1); }
}
/* 轻提示 toast：置顶显示（不影响居中 loading） */
body .layui-m-layer.toast-at-top .layui-m-layermain,
body .layui-m-layer .layui-m-layermain:has(.layui-m-layer-msg) {
	display: block;
	height: auto;
	min-height: 0;
	pointer-events: none;
}

body .layui-m-layer.toast-at-top .layui-m-layersection,
body .layui-m-layer .layui-m-layermain .layui-m-layersection:has(.layui-m-layer-msg) {
	display: block;
	vertical-align: top;
	text-align: center;
	padding: calc(12px + env(safe-area-inset-top, 0px)) 16px 0;
}

.layui-m-layer-msg .layui-m-layercont {
	padding: 12px 22px;
	line-height: 1.5;
	font-size: 14px;
	white-space: normal;
	word-break: break-word;
}

body .layui-m-layer .layui-m-layer-msg {
	position: relative;
	top: 0;
	bottom: auto;
	left: auto;
	right: auto;
	margin: 0 auto;
	max-width: min(92%, 420px);
	background-color: rgba(18, 20, 28, 0.94);
	color: var(--text-primary);
	border: 1px solid rgba(212, 175, 106, 0.35);
	border-radius: 12px;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
	animation: toastTopIn 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes toastTopIn {
	from {
		opacity: 0;
		transform: translateY(-14px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}
body .layui-m-layer .my-confirm-rect .layui-m-layerchild {
	border-radius: 14px; box-shadow: 0 18px 60px rgba(0, 0, 0, 0.3);
}
body .layui-m-layer .my-confirm-rect .layui-m-layercont {
	padding: 22px 20px 14px; font-weight: 600;
}
body .layui-m-layer .my-confirm-rect .layui-m-layerbtn span[yes] {
	min-width: 104px; height: 36px; line-height: 36px; border-radius: 18px;
	background: linear-gradient(135deg, #c9a227, #f0d78c); color: #1a1408;
}

@media (max-width: 480px) {
	.header-side-copy { display: none; }
	.auth-stage { margin-top: -56px; }
	.hero-banner { height: clamp(180px, 28vh, 240px); }
}

@media (min-width: 768px) {
	.auth-stage { margin-top: -88px; }
	.form, .login100-form { max-width: 420px; }
}

/* 性能：弱设备减少动效与模糊 */
@media (prefers-reduced-motion: reduce) {
	.hero-ambient .aurora,
	.hero-ambient .grid-mesh,
	.hero-ambient .star,
	.hero-emblem-orbit,
	.hero-emblem-core,
	.hero-tagline,
	.page-shell::before,
	.form-header-title,
	.login_btn,
	.login100-form-btn,
	.form div.userName:focus-within,
	.form div.passWord:focus-within {
		animation: none !important;
	}
	.auth-stage,
	.form,
	.login100-form {
		transition: none;
		animation: none;
		opacity: 1;
		transform: none;
	}
	.form-header-title {
		-webkit-text-fill-color: var(--accent-bright);
		color: var(--accent-bright);
	}
}

@media (max-width: 480px) {
	.form,
	.login100-form {
		backdrop-filter: blur(8px);
		-webkit-backdrop-filter: blur(8px);
	}
}