/* ============================================================================
 * SakuraPanel · 登录 / 注册 / 找回密码 三页共用样式
 *
 * 为什么单独一个文件：
 *   这三页是「未登录」页面，不加载 panel.css；原来每页各自把一大段 minified
 *   CSS 内联在 <head> 里，三份重复，还夹着 border:32px solid transparent 这种
 *   当 padding 用的 hack。现在统一到这里，页面里只留结构，改外观只改本文件。
 *
 * 加载顺序（改页面时别弄反）：
 *   1) 本文件
 *   2) Utils::loginBgStyle() 注入的 <style id="sp-login-bg">
 *      背景图那一段必须最后加载，否则盖不住这里的渐变兜底
 *   3) assets/login/dist/js/auth.js —— 显示密码 / 提交锁按钮
 *
 * 二次元主题：body 上加 .sp-auth-anime 即可（见文件末尾），不再加载 login-anime.css。
 * ========================================================================= */

:root {
	/* 品牌色与面板 panel.css 的 --sp-primary 保持一致 */
	--auth-brand:      #e8547c;
	--auth-brand-dark: #c0479a;
	--auth-brand-2:    #a86ee0;

	--auth-card:       rgba(255, 255, 255, 0.94);
	--auth-card-line:  rgba(255, 255, 255, 0.60);
	--auth-field-bg:   #fbfaff;
	--auth-text:       #2c2740;
	--auth-label:      #4a4360;
	--auth-muted:      #7a7392;
	--auth-border:     #e8e4f0;

	--auth-radius:     20px;
	--auth-control-h:  46px;
	--auth-shadow:     0 24px 60px rgba(28, 12, 48, 0.32);
	--auth-ring:       0 0 0 4px rgba(232, 84, 124, 0.16);
}

/* ------------------------------------------------------------------ 基础 */
* {
	box-sizing: border-box;
}

body {
	margin: 0;
	min-height: 100vh;
	color: var(--auth-text);
	background-color: #120c26;
	background-image: linear-gradient(135deg, #1b1035 0%, #3c1e63 40%, #7b2d6b 72%, #c2557f 100%);
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
	background-repeat: no-repeat;
	font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei",
		-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size: 15px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* 背景图层：固定铺满视口，z-index 负值保证永远在内容下面 */
body::before {
	content: "";
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: -10;
	background-color: inherit;
	background-image: inherit;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

/* 小屏上 iOS Safari 的 background-attachment: fixed 会错位，改成随页面滚动；
   真正铺满视口的是上面那个 position: fixed 的 body::before，所以观感不变 */
@media (max-width: 768px) {
	body {
		background-attachment: scroll;
	}
}

/* ------------------------------------------------------------ 居中容器 */
.sp-auth {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 16px;
	min-height: 100vh;
	padding: 40px 18px 26px;
}

.sp-auth-wrap {
	width: 100%;
	max-width: 432px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* ---------------------------------------------------------------- 卡片 */
.main-box {
	position: relative;
	width: 100%;
	background: var(--auth-card);
	border: 1px solid var(--auth-card-line);
	border-radius: var(--auth-radius);
	box-shadow: var(--auth-shadow);
	padding: 30px 30px 26px;
	backdrop-filter: blur(16px) saturate(160%);
	-webkit-backdrop-filter: blur(16px) saturate(160%);
	overflow: hidden;
	animation: sp-auth-in 420ms cubic-bezier(0.22, 0.9, 0.3, 1) both;
}

/* 顶部品牌色带 */
.main-box::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 4px;
	background: linear-gradient(90deg, #ff9fc6 0%, var(--auth-brand) 45%, var(--auth-brand-2) 100%);
}

@keyframes sp-auth-in {
	from {
		opacity: 0;
		transform: translateY(12px) scale(0.99);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.main-box {
		animation: none;
	}
}

/* ------------------------------------------------------------ 品牌区 */
.sp-auth-head {
	text-align: center;
	margin-bottom: 20px;
}

.sp-auth-mark {
	width: 58px;
	height: 58px;
	margin: 0 auto 14px;
	border-radius: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	background: linear-gradient(135deg, #ff9fc6 0%, var(--auth-brand) 55%, var(--auth-brand-2) 100%);
	box-shadow: 0 12px 26px rgba(232, 84, 124, 0.34);
}

.sp-auth-mark svg {
	width: 34px;
	height: 34px;
	display: block;
}

.main-box .logo {
	margin: 0 0 6px;
	font-size: 1.42rem;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.01em;
	color: var(--auth-text);
	word-break: break-word;
}

.sp-auth-sub {
	margin: 0;
	font-size: 0.86rem;
	color: var(--auth-muted);
}

/* ------------------------------------------------------------- 表单 */
.sp-auth-field {
	margin-bottom: 14px;
}

.sp-auth-label {
	display: block;
	margin-bottom: 6px;
	font-size: 0.83rem;
	font-weight: 600;
	color: var(--auth-label);
}

.sp-auth-label .sp-auth-opt {
	font-weight: 400;
	font-size: 0.78rem;
	color: var(--auth-muted);
}

.sp-auth .form-control {
	height: var(--auth-control-h);
	padding: 0 14px;
	font-size: 0.95rem;
	color: var(--auth-text);
	background: var(--auth-field-bg);
	border: 1px solid var(--auth-border);
	border-radius: 12px;
	box-shadow: none;
	transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

.sp-auth .form-control:focus {
	background: #fff;
	border-color: var(--auth-brand);
	box-shadow: var(--auth-ring);
}

.sp-auth .form-control::placeholder {
	color: #b5aecb;
}

/* 邮箱验证码那一行：输入框 + 发送按钮 */
.sp-auth .input-group {
	display: flex;
	gap: 8px;
	width: 100%;
}

/* Bootstrap 会给相邻子元素加 margin-left:-1px 把边框拼在一起，
   这里用 gap 拉开距离，所以要把那个负边距抵消掉（只针对本页用到的两种子元素） */
.sp-auth .input-group > .form-control,
.sp-auth .input-group > .btn {
	margin-left: 0;
}

.sp-auth .input-group .form-control {
	flex: 1 1 auto;
	width: auto;
	min-width: 0;
}

.sp-auth .input-group .btn {
	flex: 0 0 auto;
	height: var(--auth-control-h);
	padding: 0 15px;
	font-size: 0.88rem;
	font-weight: 600;
	white-space: nowrap;
	color: var(--auth-brand);
	background: #fff;
	border: 1px solid var(--auth-brand);
	border-radius: 12px;
	box-shadow: none;
}

.sp-auth .input-group .btn:hover {
	color: var(--auth-brand-dark);
	background: rgba(232, 84, 124, 0.08);
	border-color: var(--auth-brand-dark);
}

.sp-auth .input-group .btn:disabled,
.sp-auth .input-group .btn.disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

/* -------------------------------------------------------- 显示密码按钮 */
.sp-pass-wrap {
	position: relative;
}

.sp-pass-wrap .form-control {
	padding-right: 46px;
}

.sp-pass-toggle {
	position: absolute;
	right: 6px;
	top: 50%;
	transform: translateY(-50%);
	width: 34px;
	height: 34px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	color: #8d86a3;
	background: transparent;
	border: 0;
	border-radius: 9px;
	cursor: pointer;
	opacity: 0.8;
	transition: background-color 140ms ease, color 140ms ease, opacity 140ms ease;
}

.sp-pass-toggle:hover {
	color: var(--auth-brand);
	background: rgba(232, 84, 124, 0.10);
	opacity: 1;
}

.sp-pass-toggle:focus-visible {
	outline: 2px solid var(--auth-brand);
	outline-offset: 1px;
}

.sp-pass-toggle svg {
	width: 19px;
	height: 19px;
	display: block;
}

.sp-pass-toggle svg + svg {
	display: none;
}

.sp-pass-toggle.is-on svg {
	display: none;
}

.sp-pass-toggle.is-on svg + svg {
	display: block;
}

/* ------------------------------------------------------------- 按钮 */
.main-box .btn-primary,
.sp-auth-submit {
	display: block;
	width: 100%;
	height: var(--auth-control-h);
	padding: 0 16px;
	font-size: 0.98rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: #fff;
	background: linear-gradient(135deg, #ff8fb1 0%, var(--auth-brand) 55%, var(--auth-brand-dark) 100%);
	border: 0;
	border-radius: 12px;
	box-shadow: 0 10px 22px rgba(232, 84, 124, 0.32);
	transition: transform 160ms ease, box-shadow 160ms ease, opacity 160ms ease;
}

.main-box .btn-primary:hover,
.sp-auth-submit:hover {
	color: #fff;
	transform: translateY(-1px);
	box-shadow: 0 14px 28px rgba(232, 84, 124, 0.42);
}

.main-box .btn-primary:active,
.sp-auth-submit:active {
	transform: translateY(0);
	box-shadow: 0 8px 18px rgba(232, 84, 124, 0.36);
}

.main-box .btn-primary:focus-visible,
.sp-auth-submit:focus-visible {
	outline: 2px solid var(--auth-brand-2);
	outline-offset: 2px;
}

/* 提交中：按钮锁住（auth.js 负责加 disabled） */
.main-box .btn-primary[disabled],
.sp-auth-submit[disabled] {
	opacity: 0.72;
	cursor: progress;
	transform: none;
	box-shadow: 0 8px 18px rgba(232, 84, 124, 0.26);
}

.sp-auth-submit {
	margin-top: 4px;
}

/* ------------------------------------------------------------ 提示条 */
.sp-auth .alert {
	margin-bottom: 16px;
	padding: 11px 14px;
	font-size: 0.87rem;
	border: 0;
	border-left: 4px solid var(--auth-brand);
	border-radius: 12px;
	box-shadow: 0 6px 16px rgba(60, 30, 90, 0.08);
}

.sp-auth .alert-danger {
	color: #8f2430;
	background: #fff1f3;
	border-left-color: #ff7a8a;
}

.sp-auth .alert-success {
	color: #1c6b4d;
	background: #eefaf4;
	border-left-color: #3fbf8f;
}

.sp-auth .alert-info {
	color: #1c5a8a;
	background: #eff6ff;
	border-left-color: #6ec6ff;
}

.sp-auth .alert-warning {
	color: #8a5411;
	background: #fff8ec;
	border-left-color: #ffb865;
}

.sp-auth .alert .btn-close {
	opacity: 0.5;
}

.sp-auth .alert .btn-close:hover {
	opacity: 0.9;
}

/* -------------------------------------------------------- 底部链接行 */
.sp-auth-alt {
	margin: 18px 0 0;
	font-size: 0.86rem;
	text-align: center;
	color: var(--auth-muted);
}

.sp-auth-alt a {
	color: var(--auth-brand);
	font-weight: 600;
	text-decoration: none;
	transition: color 140ms ease;
}

.sp-auth-alt a:hover {
	color: var(--auth-brand-dark);
	text-decoration: underline;
}

.sp-auth-sep {
	margin: 0 9px;
	color: #cfc8dd;
}

.sp-auth-note {
	margin: 14px 0 0;
	font-size: 0.79rem;
	line-height: 1.6;
	text-align: center;
	color: var(--auth-muted);
}

.sp-auth-note code {
	font-size: 0.78rem;
	color: var(--auth-brand-dark);
	background: rgba(232, 84, 124, 0.08);
	border-radius: 5px;
	padding: 1px 5px;
}

.copyright {
	margin: 0;
	font-size: 13px;
	text-align: center;
	color: rgba(255, 255, 255, 0.86);
	text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

/* ---------------------------------------------------------------- 窄屏 */
@media (max-width: 480px) {
	.sp-auth {
		padding: 24px 14px 20px;
	}

	.main-box {
		padding: 24px 20px 22px;
		border-radius: 16px;
	}

	.sp-auth-mark {
		width: 52px;
		height: 52px;
		border-radius: 16px;
	}

	.sp-auth-mark svg {
		width: 30px;
		height: 30px;
	}

	.main-box .logo {
		font-size: 1.28rem;
	}
}

/* ============================================================================
 * 二次元主题变体：body.sp-auth-anime
 * 花瓣 / 毛玻璃 / 渐变标题这些「皮肤级」的东西放这里，默认（modern）不生效。
 * ========================================================================= */
body.sp-auth-anime {
	--auth-brand: #ff7eb6;
	--auth-brand-dark: #e85fa0;
	--auth-brand-2: #b98bff;
	--auth-card: rgba(255, 255, 255, 0.92);
	--auth-field-bg: rgba(255, 255, 255, 0.90);
}

body.sp-auth-anime .main-box {
	box-shadow: 0 18px 60px rgba(60, 20, 80, 0.35), 0 0 0 6px rgba(255, 255, 255, 0.06);
}

body.sp-auth-anime .main-box .logo {
	background: linear-gradient(120deg, #ff6dab 0%, #ff7eb6 45%, #a97bff 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

/* 右上角一枚淡淡的樱花（纯字形，不用图片） */
body.sp-auth-anime .main-box::after {
	content: "桜";
	position: absolute;
	right: 10px;
	top: -8px;
	font-size: 74px;
	line-height: 1;
	color: rgba(255, 126, 182, 0.10);
	pointer-events: none;
	user-select: none;
}

/* 飘落的花瓣：纯 CSS，尊重「减少动态效果」设置 */
body.sp-auth-anime::after {
	content: "";
	position: fixed;
	left: -10vw;
	top: -120vh;
	width: 120vw;
	height: 120vh;
	pointer-events: none;
	z-index: -9;
	opacity: 0.5;
	background-image:
		radial-gradient(ellipse 6px 4px at 12% 0%, rgba(255, 168, 205, 0.9), transparent 70%),
		radial-gradient(ellipse 5px 3px at 34% 0%, rgba(255, 126, 182, 0.8), transparent 70%),
		radial-gradient(ellipse 7px 4px at 52% 0%, rgba(255, 200, 224, 0.85), transparent 70%),
		radial-gradient(ellipse 4px 3px at 71% 0%, rgba(201, 167, 255, 0.8), transparent 70%),
		radial-gradient(ellipse 6px 4px at 88% 0%, rgba(255, 168, 205, 0.8), transparent 70%);
	background-repeat: repeat-y;
	background-size: 100% 200px;
	animation: sp-auth-fall 18s linear infinite;
}

@keyframes sp-auth-fall {
	from {
		transform: translate3d(0, 0, 0) rotate(0deg);
	}
	to {
		transform: translate3d(-4vw, 240vh, 0) rotate(40deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	body.sp-auth-anime::after {
		animation: none;
		display: none;
	}
}

@media (max-width: 480px) {
	body.sp-auth-anime .main-box::after {
		font-size: 56px;
	}
}