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

html, body {
	width: 100%;
	height: 100%;
	font-family: "Microsoft YaHei", Arial, sans-serif;
	font-size: 14px;
	color: #1f1f1f;
	background-color: #f7f7f7;
	background-image:
		repeating-linear-gradient(
			-45deg,
			transparent,
			transparent 8px,
			rgba(0, 0, 0, 0.015) 8px,
			rgba(0, 0, 0, 0.015) 9px
		),
		linear-gradient(180deg, #fafafa 0%, #f0f0f0 100%);
}

input { outline: none; font-family: inherit; }
input:-webkit-autofill,
input:-webkit-autofill:focus {
	-webkit-box-shadow: 0 0 0 1000px #fff inset !important;
	box-shadow: 0 0 0 1000px #fff inset !important;
}

.login-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	padding: 16px;
}

.login-card {
	width: 100%;
	max-width: 360px;
	background: #fff;
	border: 1px solid #e0e0e0;
	border-radius: 2px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.07);
	padding: 28px 28px 24px;
}

.card-title {
	font-size: 20px;
	font-weight: 400;
	color: #1f1f1f;
	text-align: center;
	margin-bottom: 22px;
	padding-bottom: 16px;
	border-bottom: 1px solid #eee;
}

.field {
	margin-bottom: 14px;
}

.field label {
	display: block;
	font-size: 13px;
	color: #666;
	margin-bottom: 6px;
}

.field input[type="text"],
.field input[type="password"] {
	width: 100%;
	height: 38px;
	padding: 0 12px;
	font-size: 14px;
	color: #333;
	background: #fafafa;
	border: 1px solid #ddd;
	border-radius: 2px;
	transition: border-color 0.2s, background 0.2s;
}

.field input:focus {
	background: #fff;
	border-color: #7c3aed;
}

.field-captcha {
	display: flex;
	gap: 8px;
}

.field-captcha input {
	flex: 1;
	min-width: 0;
}

.captcha-img {
	flex-shrink: 0;
	height: 38px;
	border: 1px solid #5b21b6;
	border-radius: 2px;
	cursor: pointer;
	background: #5b21b6;
}

.btn-login {
	display: block;
	width: 100%;
	height: 42px;
	margin-top: 6px;
	font-size: 16px;
	color: #fff;
	background: linear-gradient(180deg, #6d28d9 0%, #5b21b6 100%);
	border: none;
	border-radius: 2px;
	cursor: pointer;
	letter-spacing: 4px;
}

.btn-login:hover {
	background: linear-gradient(180deg, #5b21b6 0%, #4c1d95 100%);
}

@media screen and (max-width: 420px) {
	.login-card { padding: 24px 20px 20px; }
	.field-captcha { flex-direction: column; }
	.captcha-img { width: 100%; object-fit: contain; }
}