body {
	font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
	margin: 24px;
}

/* Center everything and keep a sensible max width */
.wrap {
	width: max(500px, 100%);
	/* at least 500px, but can shrink if window is smaller */
	max-width: 1200px;
	/* optional: prevents getting too wide on huge screens */
	margin: 0 auto;
	/* center horizontally */
}

/* If the window is smaller than 500px, allow the wrap to shrink */
@media (max-width: 520px) {
	.wrap {
		width: 100%;
	}
}

.toolbar {
	display: flex;
	justify-content: center;
	/* center search + button */
	gap: 10px;
	margin-bottom: 14px;
}

/* ~30 characters wide */
#searchInput {
	width: 30ch;
	padding: 10px 12px;
	border: 1px solid #ccc;
	border-radius: 8px;
}

button {
	padding: 10px 14px;
	border: 1px solid #ccc;
	border-radius: 8px;
	background: #f6f6f6;
	cursor: pointer;
	white-space: nowrap;
}

button:hover {
	background: #eee;
}

table {
	width: 100%;
	border-collapse: collapse;
	margin: 0 auto;
}

th,
td {
	padding: 10px 12px;
	border-bottom: 1px solid #e5e5e5;
	text-align: left;
	vertical-align: middle;
}

th {
	background: #fafafa;
}

/* Let text columns size naturally; keep buttons static */
td.actions,
th.actions {
	width: 1%;
	white-space: nowrap;
}

.status {
	color: #666;
	font-size: 0.9rem;
	margin-top: 10px;
	text-align: center;
}