:root {
	--bg: #f5f5f5;
	--card: #ffffff;
	--text: #333333;
	--muted: #666666;
	--brand: #2c5f2d;
	--brand-hover: #1e4620;
	--ok-bg: #e8f5e9;
	--ok-text: #1b5e20;
	--ok-border: #2c5f2d;
	--err-bg: #ffebee;
	--err-text: #b71c1c;
	--err-border: #c62828;
}

* {
	box-sizing: border-box;
}

body.login-page {
	margin: 0;
	font-family: Arial, sans-serif;
	font-size: 14px;
	line-height: 1.45;
	color: var(--text);
	background: var(--bg);
}

.login-wrap {
	min-height: 100vh;
	display: grid;
	place-items: center;
	padding: 20px;
	transform: translateY(-50px);
}

.login-card {
	width: 100%;
	max-width: 420px;
	background: var(--card);
	border-radius: 0;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	padding: 24px 34px 34px;
}

.login-content {
	margin: 0;
}

.login-content h2 {
	margin: 0 0 10px;
	padding: 0;
	margin-block-start: 0;
	margin-block-end: 10px;
	font-size: 20px;
	color: var(--brand);
}

.form-grid {
	display: grid;
	gap: 9px;
}

input {
	width: 100%;
	height: 36px;
	padding: 8px 10px;
	border: 1px solid #cccccc;
	border-radius: 0;
	font-size: 13px;
}

input:focus {
	outline: none;
	border-color: var(--brand);
	box-shadow: 0 0 0 3px rgba(44, 95, 45, 0.1);
}

button {
	margin-top: 8px;
	padding: 8px 14px;
	border: 0;
	border-radius: 0;
	background: var(--brand);
	color: #ffffff;
	font-size: 13px;
	cursor: pointer;
	width: auto;
	justify-self: start;
}

button:hover {
	background: var(--brand-hover);
}

.alert {
	padding: 12px;
	border-radius: 0;
	margin-bottom: 12px;
	border-left: 4px solid transparent;
	font-size: 13px;
}

.alert-success {
	background: var(--ok-bg);
	color: var(--ok-text);
	border-left-color: var(--ok-border);
}

.alert-error {
	background: var(--err-bg);
	color: var(--err-text);
	border-left-color: var(--err-border);
}