:root {
	--bg: #f4f1ea;
	--panel: #fffdf8;
	--ink: #1f2a30;
	--muted: #6a7276;
	--line: #d9d1c3;
	--accent: #0b6e4f;
	--warn: #8c4a2f;
}

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	font-family: "M PLUS 1p", "Yu Gothic", sans-serif;
	color: var(--ink);
	background: radial-gradient(circle at 20% 10%, #f8f5ee, var(--bg) 60%);
	min-height: 100vh;
}

.login-page {
	min-height: 100vh;
	display: grid;
	place-items: center;
	padding: 20px;
}

.login-card {
	width: min(560px, 100%);
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: 16px;
	padding: 22px;
	box-shadow: 0 8px 20px rgba(61, 54, 33, 0.08);
}

h1 {
	margin: 0 0 8px;
}

.lead {
	margin: 0 0 14px;
	color: var(--muted);
	font-size: 0.95rem;
}

.auth-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
}

.auth-grid label {
	display: grid;
	gap: 4px;
	font-size: 0.9rem;
}

input,
button {
	border: 1px solid var(--line);
	background: #fff;
	padding: 10px;
	border-radius: 8px;
}

.auth-actions {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin-top: 12px;
}

button {
	cursor: pointer;
}

button:hover {
	border-color: var(--accent);
}

.auth-status {
	margin-top: 12px;
	font-size: 0.9rem;
	color: var(--muted);
}

.auth-note {
	margin: 10px 0 0;
	color: var(--muted);
	font-size: 0.9rem;
}

.feedback {
	min-height: 1.3em;
	margin-top: 8px;
	font-size: 0.9rem;
	color: var(--warn);
}

@media (max-width: 620px) {
	.auth-grid {
		grid-template-columns: 1fr;
	}
}