/* ============================================================
   auth.css — 登录注册页样式（1:1 复刻 chortle.asia/login）
   ============================================================ */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }

.auth-page {
	position: relative;
	min-height: 100vh;
	display: flex; align-items: center; justify-content: center;
	font-family: "Nunito", "PingFang SC", "Microsoft YaHei", -apple-system, "Segoe UI", sans-serif;
	color: #333;
}

/* ===== 背景 ===== */
.auth-bg {
	position: fixed; inset: 0; z-index: 0;
	overflow: hidden;
}
.bg-cover {
	position: absolute; inset: 0;
	background-image: url("../images/auth-bg.png");
	background-size: cover;
	background-position: center;
}
/* 如果本地没下载，用参考站在线图（但可能有防盗链） */
.bg-cover-fallback {
	position: absolute; inset: 0;
	background:
		radial-gradient(ellipse at 25% 35%, rgba(85,130,150,.55) 0%, transparent 55%),
		radial-gradient(ellipse at 75% 65%, rgba(55,90,110,.65) 0%, transparent 55%),
		linear-gradient(160deg, #1b3a46 0%, #2a5a6a 40%, #3d7a8a 70%, #1f4252 100%);
}
.bg-overlay {
	position: absolute; inset: 0;
	background: rgba(0, 0, 0, .42);
}

/* ===== 卡片 ===== */
.auth-card {
	position: relative; z-index: 1;
	width: 420px; max-width: 100%;
	background: rgba(255, 255, 255, .97);
	border-radius: 16px;
	padding: 32px 36px 26px;
	box-shadow: rgba(0, 0, 0, .5) 0 30px 60px -15px;
	animation: cardIn .45s cubic-bezier(.2,.8,.2,1);
}
@keyframes cardIn {
	from { opacity: 0; transform: translateY(20px); }
	to { opacity: 1; transform: translateY(0); }
}

/* ===== Logo（SVG + 文字，1:1 复刻参考站 brand-mark） ===== */
.brand-mark {
	display: flex; align-items: center; justify-content: center; gap: 10px;
	margin-bottom: 22px;
	text-decoration: none;
	color: rgb(37, 99, 235);  /* #2563eb 纯蓝 */
}
.brand-mark svg { color: rgb(37, 99, 235); }
.brand-mark .brand-name {
	font-size: 16px;
	font-weight: 600;
	color: rgb(37, 99, 235);
	letter-spacing: 1px;
}

/* ===== Tab ===== */
.tabs {
	display: flex;
	background: #f2f4f7;
	border-radius: 10px;
	padding: 4px;
	margin-bottom: 20px;
}
.tabs a {
	flex: 1; text-align: center;
	padding: 9px 0;
	font-size: 14px;
	font-weight: 500;
	color: #888;
	text-decoration: none;
	border-radius: 7px;
	transition: all .2s;
}
.tabs a.active {
	background: #fff;
	color: rgb(37, 99, 235);
	font-weight: 600;
	box-shadow: 0 1px 3px rgba(0,0,0,.06);
}

/* ===== 表单 ===== */
.auth-form .field { margin-bottom: 14px; }
.auth-form input[type="email"],
.auth-form input[type="password"],
.auth-form input[type="text"] {
	width: 100%;
	height: 42px;
	padding: 0 14px;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	background: #fff;
	font-size: 14px;
	color: #333;
	outline: none;
	transition: border-color .2s, box-shadow .2s;
}
.auth-form input:focus {
	border-color: rgb(37, 99, 235);
	box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}
.auth-form input::placeholder { color: #bbb; }

/* 验证码行 */
.code-row {
	display: flex; gap: 10px;
}
.code-row input { flex: 1; }
.code-btn {
	flex-shrink: 0;
	height: 42px;
	padding: 0 14px;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	background: #f2f4f7;
	color: rgb(37, 99, 235);
	font-size: 13px;
	cursor: pointer;
	transition: background .2s;
}
.code-btn:hover:not(:disabled):not(.disabled) { background: #e8ecf2; }
.code-btn:disabled,
.code-btn.disabled {
	color: #aaa;
	cursor: not-allowed;
}

/* ===== 昵称行 ===== */
.nickname-row {
	display: flex; align-items: center; gap: 8px;
}
.nickname-row input { flex: 1; }
.nick-refresh {
	flex-shrink: 0;
	width: 42px; height: 42px;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	background: #f2f4f7;
	color: rgb(37, 99, 235);
	cursor: pointer;
	display: flex; align-items: center; justify-content: center;
	transition: background .2s, transform .2s;
}
.nick-refresh:hover { background: #e8ecf2; }
.nick-refresh:hover svg { transform: rotate(180deg); transition: transform .4s ease; }

/* ===== 提交按钮 ===== */
.auth-btn {
	width: 100%;
	height: 44px;
	border: none;
	border-radius: 8px;
	margin-top: 8px;
	background: rgb(37, 99, 235);  /* 纯蓝 */
	color: #fff;
	font-size: 15px;
	font-weight: 500;
	letter-spacing: 2px;
	cursor: pointer;
	transition: filter .15s;
}
.auth-btn:hover { filter: brightness(1.08); }
.auth-btn:active { filter: brightness(.95); }

/* ===== 返回首页 ===== */
.auth-back {
	display: block; text-align: center;
	margin-top: 16px;
	font-size: 13px;
	color: #aaa;
	text-decoration: none;
	transition: color .2s;
}
.auth-back:hover { color: rgb(37, 99, 235); }

/* ===== 响应式 ===== */
@media (max-width: 480px) {
	.auth-card { padding: 24px 20px 20px; border-radius: 14px; }
	.auth-form input, .code-btn, .auth-btn { height: 40px; }
}