.login-page::before {
	background: radial-gradient(circle at 20% 20%, rgba(135, 206, 250, 0.08), transparent 28%), radial-gradient(circle at 80% 18%, rgba(176, 224, 230, 0.08), transparent 26%);
}

.login-topbar {
	border-bottom: 1px solid rgba(135, 206, 250, 0.20);
}

.login-brand::after {
	background: #87CEFA;
}

.login-card {
	border: 1px solid rgba(135, 206, 250, 0.30);
	box-shadow: 0 8px 30px rgba(100, 150, 200, 0.08), inset 0 1px 0 rgba(255,255,255,0.95);
}

.login-logo {
	box-shadow: 0 6px 16px rgba(135, 206, 250, 0.30);
}

.login-title-line {
	background: linear-gradient(90deg, transparent, #b0e0e6, #87CEFA, #b0e0e6, transparent);
}

	.login-title-line::after {
		background: #87CEFA;
		box-shadow: 0 0 10px rgba(135, 206, 250, 0.60);
	}

.input-icon {
	color: #007bff;
	background: rgba(135, 206, 250, 0.15);
}

.login-input {
	border: 1px solid rgba(135, 206, 250, 0.40);
	font-size: 24px;
}

	.login-input:focus {
		border-color: #87CEFA;
		box-shadow: 0 0 0 4px rgba(135, 206, 250, 0.20), 0 4px 12px rgba(135, 206, 250, 0.10);
	}

.password-toggle:hover {
	color: #007bff;
}

.login-check-row input[type="checkbox"] {
	accent-color: #007bff;
}

.login-button {
	background: linear-gradient(135deg, #4da3ff, #007bff 55%, #0056b3);
	/* ปรับลดเงาตรงนี้ให้ปุ่มไม่ลอยมากไป */
	box-shadow: 0 4px 12px rgba(0, 123, 255, 0.25);
}

	.login-button:hover {
		box-shadow: 0 6px 16px rgba(0, 123, 255, 0.35), inset 0 1px 0 rgba(255,255,255,0.35);
	}

.login-footer {
	border-top: 1px solid rgba(135, 206, 250, 0.20);
}

.register-link:hover {
	color: #007bff;
}

.footer-line {
	background: linear-gradient( 90deg, transparent, rgba(135, 206, 250, 0.40), transparent );
}

@media (max-width: 768px) {
	.login-button:disabled,
	.login-button.is-loading {
		box-shadow: 0 4px 10px rgba(0, 123, 255, 0.15), inset 0 1px 0 rgba(255,255,255,0.22);
	}
}