/* MZUR.Net portal. Colors come from mzur-net/brand/tokens.json. */
:root {
	--paper: #FFFFFF;
	--mist: #F2F7F1;
	--ink: #13261A;
	--ink-soft: #4A5E51;
	--line: #D5E2D7;
	--green: #0E4726;
	--orange: #EE6A1C;
	--orange-ink: #B94A08;
	--error-bg: #FDF0E8;
	--info-bg: #E6F2E9;
	--radius: 10px;
	--f-body: "Archivo", "Helvetica Neue", Arial, sans-serif;
	color-scheme: light;
}
@media (prefers-color-scheme: dark) {
	:root {
		--paper: #121F17;
		--mist: #0D1611;
		--ink: #E9F1EA;
		--ink-soft: #A5B8AA;
		--line: #253629;
		--green: #4CB06F;
		--orange-ink: #FF9A5C;
		--error-bg: #3A2416;
		--info-bg: #18301F;
		color-scheme: dark;
	}
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	min-height: 100vh;
	min-height: 100dvh;
	background: var(--mist);
	color: var(--ink);
	font-family: var(--f-body);
	font-size: 1.0625rem;
	line-height: 1.5;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: 48px max(16px, env(safe-area-inset-left)) 32px max(16px, env(safe-area-inset-right));
}
.card {
	width: 100%;
	max-width: 400px;
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 28px 24px 24px;
}
@media (max-width: 480px) {
	body { padding-top: 24px; }
	.card { padding: 24px 20px 20px; }
}
.brand { display: inline-block; margin-bottom: 20px; }
.brand img { display: block; width: 150px; height: auto; }
h1 { font-size: 1.5rem; line-height: 1.2; margin: 0 0 16px; }
.lede, .aside { margin: 0 0 16px; color: var(--ink-soft); }
.aside { margin: 20px 0 0; font-size: .95rem; }
a { color: var(--green); }
label { display: block; font-weight: 600; margin: 14px 0 6px; }
input[type="email"], input[type="password"] {
	display: block;
	width: 100%;
	min-height: 48px;
	padding: 10px 12px;
	font: inherit;
	color: var(--ink);
	background: var(--paper);
	border: 1px solid var(--ink-soft);
	border-radius: 8px;
}
input:focus-visible, button:focus-visible, a:focus-visible {
	outline: 3px solid var(--orange);
	outline-offset: 2px;
}
button {
	display: block;
	width: 100%;
	min-height: 48px;
	margin-top: 22px;
	padding: 10px 16px;
	font: inherit;
	font-weight: 700;
	color: #13261A;
	background: var(--orange);
	border: 0;
	border-radius: 8px;
	cursor: pointer;
	touch-action: manipulation;
}
button:hover { filter: brightness(1.05); }
.choices button.choice {
	margin-top: 10px;
	text-align: left;
	color: var(--ink);
	background: var(--mist);
	border: 1px solid var(--line);
}
.notice {
	margin: 0 0 8px;
	padding: 10px 12px;
	border-radius: 8px;
	font-size: .95rem;
}
.notice-error { background: var(--error-bg); color: var(--orange-ink); }
.notice-info { background: var(--info-bg); color: var(--ink); }