:root {
	color-scheme: light dark;
	--bg: #fbfaf8;
	--fg: #1d1d1f;
	--muted: #6b6b70;
	--line: #dcd9d3;
	--card: #ffffff;
	--accent: #2f5d8c;
	--danger: #b3261e;
}

@media (prefers-color-scheme: dark) {
	:root {
		--bg: #17181a;
		--fg: #e8e6e3;
		--muted: #9a9a9f;
		--line: #34363a;
		--card: #1f2124;
		--accent: #7fb0e0;
		--danger: #f2857c;
	}
}

body.ui {
	margin: 0;
	background: var(--bg);
	color: var(--fg);
	font: 16px/1.55 system-ui, -apple-system, "Segoe UI", sans-serif;
}

body.ui main {
	max-width: 46rem;
	margin: 0 auto;
	padding: 2rem 1.25rem 4rem;
}

body.ui.wide main { max-width: 68rem; }

.topbar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	padding: .7rem 1.25rem;
	background: var(--card);
	border-bottom: 1px solid var(--line);
}

.topbar .who { font-weight: 600; }
.topbar nav a { margin-left: 1rem; color: var(--accent); text-decoration: none; }
.topbar nav a:hover { text-decoration: underline; }

h1 { font-size: 1.6rem; margin: 0 0 .3rem; }
h2 { font-size: 1.15rem; margin: 2rem 0 .6rem; }
p.sub { color: var(--muted); margin: 0 0 1.4rem; }
p.empty { color: var(--muted); font-style: italic; }

.card {
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: 12px;
	padding: 1.6rem;
}

.card.narrow { max-width: 26rem; margin: 3rem auto; }

label {
	display: block;
	margin: 0 0 1rem;
	font-size: .88rem;
	color: var(--muted);
}

input {
	display: block;
	width: 100%;
	box-sizing: border-box;
	margin-top: .3rem;
	padding: .55rem .7rem;
	font: inherit;
	color: var(--fg);
	background: var(--bg);
	border: 1px solid var(--line);
	border-radius: 8px;
}

input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

button, .btn {
	display: inline-block;
	padding: .55rem 1.1rem;
	font: inherit;
	color: #fff;
	background: var(--accent);
	border: 0;
	border-radius: 8px;
	cursor: pointer;
	text-decoration: none;
}

button:hover, .btn:hover { filter: brightness(1.08); }
button.danger { background: var(--danger); }

form.inline { display: inline-block; margin-top: 2rem; }

.error {
	padding: .6rem .8rem;
	margin-bottom: 1rem;
	color: var(--danger);
	background: color-mix(in srgb, var(--danger) 10%, transparent);
	border-radius: 8px;
}

.ok {
	padding: .8rem 1rem;
	margin-bottom: 1.4rem;
	background: color-mix(in srgb, var(--accent) 10%, transparent);
	border-radius: 8px;
}

.mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
.mono.big { font-size: 1.15rem; font-weight: 600; }

table.grid {
	width: 100%;
	border-collapse: collapse;
	margin: 1rem 0;
}

table.grid th, table.grid td {
	padding: .55rem .7rem;
	text-align: left;
	border-bottom: 1px solid var(--line);
}

table.grid th { font-size: .82rem; color: var(--muted); font-weight: 600; }
table.grid td.num { text-align: right; font-variant-numeric: tabular-nums; }
table.grid a { color: var(--accent); }

.flag {
	display: inline-block;
	min-width: 1.5em;
	padding: .1rem .45rem;
	font-size: .82rem;
	font-weight: 600;
	color: #fff;
	background: #c8641e;
	border-radius: 999px;
	text-align: center;
}

ul.log { list-style: none; padding: 0; font-size: .9rem; color: var(--muted); }
ul.log li { padding: .2rem 0; border-bottom: 1px solid var(--line); }