/* Branded status/health page for the API root. Separate file = easy to restyle. */
:root {
	--bg: #eef1f6;
	--card: #ffffff;
	--ink: #1f2430;
	--muted: #6b7280;
	--border: #e2e5ea;
	--accent: #2563eb;
	--ok: #059669;
	--fail: #c0392b;
}

* { box-sizing: border-box; }

body {
	margin: 0;
	min-height: 100vh;
	font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
	color: var(--ink);
	background:
		radial-gradient(1200px 500px at 50% -10%, #dbe6ff 0%, rgba(219,230,255,0) 60%),
		var(--bg);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
}

.wrap { width: 100%; max-width: 440px; }

.card {
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: 16px;
	padding: 28px;
	box-shadow: 0 10px 30px rgba(31, 36, 48, 0.08);
}

.brand {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 22px;
}
.logo { width: 56px; height: 56px; border-radius: 12px; flex: none; }
.brand h1 { font-size: 22px; margin: 0; letter-spacing: -0.01em; }
.brand .sub { margin: 2px 0 0; color: var(--muted); font-size: 13px; }

.status {
	border: 1px solid var(--border);
	border-radius: 12px;
	overflow: hidden;
}
.status-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 16px;
	border-bottom: 1px solid var(--border);
}
.status-row:last-child { border-bottom: 0; }
.status-row .label { color: var(--muted); font-size: 14px; }
.status-row .value { font-variant-numeric: tabular-nums; font-size: 14px; }

.badge {
	font-size: 12px;
	font-weight: 600;
	padding: 4px 10px;
	border-radius: 999px;
}
.badge.ok { color: var(--ok); background: rgba(5, 150, 105, 0.12); }
.badge.fail { color: var(--fail); background: rgba(192, 57, 43, 0.12); }

.hint {
	margin: 18px 2px 0;
	color: var(--muted);
	font-size: 12.5px;
	line-height: 1.5;
}

.foot {
	text-align: center;
	color: var(--muted);
	font-size: 12px;
	margin-top: 16px;
}