:root {
	--blue: #2563eb;
	--ink: #111827;
	--muted: #6b7280;
	--line: #e5e7eb;
	--bg: #f8fafc;
}

* { box-sizing: border-box; }

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

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

.brand {
	font-weight: 600;
	font-size: 1.05rem;
	color: var(--ink);
	text-decoration: none;
}

.langs {
	display: flex;
	gap: .4rem;
}

/* Vlaječka: neaktivní jazyk je zesvětlený, aktivní má rámeček. */
.lang {
	display: inline-flex;
	padding: 2px;
	border: 2px solid transparent;
	border-radius: 4px;
	line-height: 0;
	opacity: .55;
	transition: opacity .15s;
}

.lang:hover { opacity: 1; }

.lang.is-active {
	opacity: 1;
	border-color: var(--blue);
}

.content {
	max-width: 60rem;
	margin: 0 auto;
	padding: 1.5rem 1.25rem;
}

h1 {
	margin: 0 0 .5rem;
	font-size: 1.5rem;
}

.muted { color: var(--muted); }

.flash {
	padding: .7rem .9rem;
	border-radius: 8px;
	margin-bottom: 1rem;
}

.flash.success { background: #ecfdf5; color: #065f46; }
.flash.error   { background: #fef2f2; color: #991b1b; }