:root {
	color-scheme: light dark;
	font-family:
		Inter,
		ui-sans-serif,
		system-ui,
		-apple-system,
		BlinkMacSystemFont,
		"Segoe UI",
		sans-serif;
	background: #f7f5ef;
	color: #17211d;
}

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	min-height: 100vh;
	background: linear-gradient(145deg, #f7f5ef 0%, #e9f0ec 48%, #edf1f6 100%);
}

.shell {
	display: grid;
	min-height: 100vh;
	padding: 24px;
	place-items: center;
}

.panel {
	width: min(100%, 420px);
	padding: 28px;
	border: 1px solid rgb(23 33 29 / 12%);
	border-radius: 8px;
	background: rgb(255 255 255 / 88%);
	box-shadow: 0 18px 50px rgb(23 33 29 / 10%);
}

h1 {
	margin: 0 0 24px;
	font-size: 1.75rem;
	font-weight: 700;
	letter-spacing: 0;
}

.stack {
	display: grid;
	gap: 18px;
}

.field {
	display: grid;
	gap: 8px;
	font-weight: 650;
}

input {
	width: 100%;
	min-height: 44px;
	padding: 10px 12px;
	border: 1px solid rgb(23 33 29 / 22%);
	border-radius: 6px;
	font: inherit;
}

.actions {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 10px;
}

button {
	min-height: 44px;
	padding: 10px 14px;
	border: 0;
	border-radius: 6px;
	background: #1f6f5b;
	color: #fff;
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}

button:disabled {
	cursor: not-allowed;
	opacity: .55;
}

.secondary {
	border: 1px solid rgb(23 33 29 / 18%);
	background: #fff;
	color: #17211d;
}

.status {
	min-height: 22px;
	margin: 20px 0 0;
	color: #43514b;
}

@media (prefers-color-scheme: dark) {
	:root {
		background: #111816;
		color: #eef4f1;
	}

	body {
		background: #111816;
	}

	.panel {
		border-color: rgb(238 244 241 / 14%);
		background: #17211d;
		box-shadow: none;
	}

	input {
		border-color: rgb(238 244 241 / 20%);
		background: #101614;
		color: #eef4f1;
	}

	.secondary {
		border-color: rgb(238 244 241 / 20%);
		background: #101614;
		color: #eef4f1;
	}

	.status {
		color: #b7c5bf;
	}
}