* { box-sizing: border-box; }
body {
	margin: 0;
	font-family: -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
	background: #f4f5f7;
	color: #1a1a1a;
	display: flex;
	justify-content: center;
	padding: 40px 16px;
}
.card {
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 1px 4px rgba(0,0,0,0.1);
	padding: 32px;
	max-width: 720px;
	width: 100%;
}
h1 { font-size: 1.4rem; margin-top: 0; }
h2 { font-size: 1.1rem; margin-top: 28px; }
.muted { color: #666; font-size: 0.9rem; }
.dropzone {
	border: 2px dashed #b9c0cc;
	border-radius: 8px;
	padding: 40px 20px;
	text-align: center;
	color: #555;
	cursor: pointer;
	margin: 20px 0;
}
.dropzone.dragover { border-color: #2563eb; background: #eef4ff; }
.file-list { list-style: none; padding: 0; margin: 0; }
.file-list li {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	padding: 10px 0;
	border-bottom: 1px solid #eee;
	font-size: 0.9rem;
}
.file-list .status { font-size: 0.8rem; color: #666; min-width: 90px; text-align: right; }
.file-list .status.done { color: #1a8a3b; }
.file-list .status.error { color: #c0392b; }
.progress {
	flex: 1;
	height: 6px;
	background: #eee;
	border-radius: 3px;
	overflow: hidden;
	margin: 0 12px;
}
.progress-bar { height: 100%; background: #2563eb; width: 0%; transition: width 0.15s; }

form.stack { display: flex; flex-direction: column; gap: 12px; max-width: 360px; }
input, button {
	font-size: 0.95rem;
	padding: 10px 12px;
	border-radius: 6px;
	border: 1px solid #ccc;
}
button {
	background: #2563eb;
	color: #fff;
	border: none;
	cursor: pointer;
}
button:hover { background: #1d4ed8; }
button.secondary { background: #6b7280; }
button.danger { background: #c0392b; }
.error-text { color: #c0392b; font-size: 0.9rem; min-height: 1.2em; }

table { width: 100%; border-collapse: collapse; margin-top: 16px; font-size: 0.9rem; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid #eee; }
th { color: #555; font-weight: 600; }
.pill { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 0.75rem; }
.pill.active { background: #e6f6ea; color: #1a8a3b; }
.pill.inactive { background: #fbe9e7; color: #c0392b; }
.row { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
.link-copy { display: flex; gap: 6px; align-items: center; }
.link-copy input { width: 280px; font-size: 0.8rem; color: #555; }
nav.top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
nav.top span { color: #666; font-size: 0.9rem; }