:root {
		--page-bg: #f7f9fc;
		--panel-bg: #ffffff;
		--field-bg: #f2f5f8;
		--field-border: #d9e1ea;
		--text-main: #35465a;
		--text-muted: #5b6b7d;
		--accent: #2f8fff;
		--accent-hover: #1d7ff5;
		--shadow: 0 18px 40px rgba(36, 63, 96, 0.12);
	}

	* {
		box-sizing: border-box;
	}

	.loginholder {
		margin: 0;
		min-height: 70vh;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 24px;
		font-family: Arial, Helvetica, sans-serif;
		color: var(--text-main);
	}

	.loginForm {
		width: min(100%, 560px);
		padding: 36px;
		border-radius: 24px;
		background: var(--panel-bg);
		box-shadow: var(--shadow);
	}

	.loginLoginForm,
	.loginLoginFieldset {
		margin: 0;
		padding: 0;
		border: 0;
	}

	.loginLegend {
		margin-bottom: 28px;
		font-size: 2rem;
		font-weight: 700;
		color: var(--text-main);
	}

	.loginUsernameLabel,
	.loginPasswordLabel {
		display: block;
		margin-bottom: 20px;
		font-size: 0.98rem;
		font-weight: 700;
		color: var(--text-muted);
	}

	.loginUsername,
	.loginPassword {
		width: 100%;
		margin-top: 10px;
		padding: 16px 18px;
		border: 1px solid var(--field-border);
		border-radius: 10px;
		background: var(--field-bg);
		font-size: 1rem;
		color: var(--text-main);
		outline: none;
		transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
	}

	.loginUsername:focus,
	.loginPassword:focus {
		border-color: rgba(47, 143, 255, 0.65);
		background: #ffffff;
		box-shadow: 0 0 0 4px rgba(47, 143, 255, 0.12);
	}

	.loginLoginButton {
		display: block;
		margin-top: 28px;
	}
    
	.loginLoginButton input[type="submit"],.loginRegister > a {
		width: 100%;
		padding: 16px 20px;
		border: 0;
		border-radius: 12px;
		background: linear-gradient(180deg, #49a0ff 0%, var(--accent) 100%);
		color: #ffffff;
		font-size: 1rem;
		font-weight: 700;
		cursor: pointer;
		box-shadow: 0 12px 24px rgba(47, 143, 255, 0.28);
		transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
	}

	.loginLoginButton input[type="submit"]:hover, .loginRegister > a:hover {
		background: linear-gradient(180deg, #3998ff 0%, var(--accent-hover) 100%);
		box-shadow: 0 14px 28px rgba(47, 143, 255, 0.34);
		transform: translateY(-1px);
	}

	.loginLoginButton input[type="submit"]:active {
		transform: translateY(0);
	}
        .loginRegister > a {
                text-decoration: none;
                margin: 20px;
        }
	@media (max-width: 640px) {
		.loginForm {
			padding: 28px 20px;
			border-radius: 18px;
		}

		.loginLegend {
			font-size: 1.7rem;
		}
	}