:root {
	--brand: #0b214a;
	--brand-2: #1f3d73;
	--accent: #6d5efc;
	--success: #0c8b4b;
	--warn: #c27a00;
	--bg: #f7f9fc;
	--panel: #ffffff;
	--border: #d8dfea;
	--text: #1d2433;
	--muted: #5f6b80;
}

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	font-family: "Segoe UI", Tahoma, Arial, sans-serif;
	background: var(--bg);
	color: var(--text);
}

.shell {
	max-width: 1200px;
	margin: 0 auto;
	padding: 20px;
}

.topbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 12px 16px;
	background: var(--panel);
	border: 1px solid var(--border);
	border-radius: 12px;
}

.brand {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 2px 5px;
	/* background: var(--brand); */
	color: #fff;
	font-weight: 600;
	border-radius: 8px;
	text-decoration: none;
}

.brand-logo {
	height: 52px;
	width: 52px;
	object-fit: contain;
	background: #fff !important;
	border-radius: 6px;
	padding: 2px;
}

.brand-text {
	line-height: 1;
}

.nav {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
}

.nav a {
	color: var(--brand-2);
	text-decoration: none;
	font-weight: 500;
	padding: 6px 8px;
	border-radius: 6px;
}

.nav a.active {
	background: #e9eef8;
	font-weight: 700;
}

.notice {
	margin-top: 14px;
	padding: 10px 12px;
	background: #fff7da;
	border: 1px solid #ecdca0;
	border-radius: 8px;
	color: #664d03;
}

.hero {
	margin: 28px auto 18px;
	max-width: 900px;
	text-align: center;
}

.hero h1 {
	font-size: 44px;
	margin: 0 0 10px;
}

.hero p {
	margin: 0;
	color: var(--muted);
	font-size: 22px;
}

.search-row {
	margin: 26px auto;
	max-width: 900px;
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 8px;
}

input[type="text"],
textarea {
	width: 100%;
	padding: 12px;
	border-radius: 8px;
	border: 1px solid var(--border);
	font: inherit;
}

button {
	border: none;
	padding: 11px 16px;
	border-radius: 8px;
	background: var(--brand);
	color: white;
	font-weight: 600;
	cursor: pointer;
}

button.secondary {
	background: #465677;
}

.quick-actions {
	display: grid;
	grid-template-columns: repeat(3, minmax(200px, 1fr));
	gap: 14px;
	max-width: 900px;
	margin: 0 auto;
}

.card {
	background: var(--panel);
	border: 1px solid var(--border);
	border-radius: 10px;
	padding: 16px;
}

.card h3 {
	margin: 0 0 6px;
	font-size: 18px;
}

.card p {
	margin: 0;
	color: var(--muted);
}

.page-link {
	margin-top: 24px;
	text-align: center;
}

.page-link a {
	color: var(--brand-2);
	font-weight: 600;
}

.grid-2 {
	display: grid;
	grid-template-columns: 1.2fr 0.8fr;
	gap: 14px;
	margin-top: 16px;
}

.badges {
	display: flex;
	gap: 10px;
	margin: 12px 0;
	flex-wrap: wrap;
}

.badge {
	padding: 8px 10px;
	border-radius: 8px;
	border: 1px solid var(--border);
	background: var(--panel);
	font-size: 14px;
}

.badge.success {
	background: #e8f8ef;
	border-color: #b8e5ca;
	color: var(--success);
}

.badge.warn {
	background: #fff6e8;
	border-color: #f5d8a5;
	color: var(--warn);
}

.log {
	display: flex;
	flex-direction: column;
	gap: 8px;
	max-height: 460px;
	overflow: auto;
}

.msg {
	padding: 10px 12px;
	border-radius: 12px;
	max-width: 92%;
	line-height: 1.4;
}

.msg.with-avatar {
	display: flex;
	gap: 8px;
	align-items: flex-start;
}

.msg-avatar {
	width: 26px;
	height: 26px;
	object-fit: contain;
	background: #fff;
	border: 1px solid #d6def4;
	border-radius: 999px;
	padding: 3px;
	flex-shrink: 0;
	margin-top: 1px;
}

.msg-text {
	display: inline-block;
	white-space: pre-wrap;
}

.msg.user {
	align-self: flex-end;
	background: #f3e8ff;
	border: 1px solid #d8befa;
}

.msg.assistant {
	align-self: flex-start;
	background: #e9f3ff;
	border: 1px solid #bfdaff;
}

.progress-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: 8px;
}

.progress-list li {
	padding: 9px 10px;
	border: 1px solid var(--border);
	border-radius: 8px;
	background: var(--panel);
}

.progress-list li.done {
	border-color: #b8e5ca;
	background: #f1fbf5;
}

.section-title {
	margin: 0 0 8px;
	font-size: 20px;
}

.results {
	white-space: pre-wrap;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 13px;
	background: #0e1730;
	color: #d9e4ff;
	padding: 12px;
	border-radius: 8px;
	min-height: 160px;
}

.progress-console {
	white-space: pre-wrap;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 13px;
	background: #0e1730;
	color: #d9e4ff;
	padding: 12px;
	border-radius: 8px;
	min-height: 120px;
	max-height: 320px;
	overflow: auto;
	line-height: 1.45;
	overflow-wrap: anywhere;
	word-break: break-word;
	width: 100%;
}

/* Scoped max height and scrolling for the catalog sweeper progress card */
.card.sweeper-card {
	max-height: 560px;
	overflow: auto;
}

@media (max-width: 800px) {
	.card.sweeper-card {
		max-height: 420px;
	}
}

.citations {
	margin-top: 10px;
	display: grid;
	gap: 8px;
}

.citation {
	padding: 8px 10px;
	background: #f6f8fc;
	border: 1px solid var(--border);
	border-radius: 8px;
	font-size: 13px;
}

@media (max-width: 980px) {
	.hero h1 {
		font-size: 34px;
	}

	.hero p {
		font-size: 18px;
	}

	.grid-2,
	.quick-actions {
		grid-template-columns: 1fr;
	}

	.progress-console {
		font-size: 12px;
		min-height: 100px;
		max-height: 260px;
		padding: 10px;
	}
}

@media (max-width: 600px) {
	.progress-console {
		font-size: 11px;
		min-height: 80px;
		max-height: 180px;
		padding: 8px;
	}
}

/* Loading modal styles */
.loading-modal {
	position: fixed;
	inset: 0;
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 9999;
}
.loading-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(10,12,16,0.45);
}
.loading-dialog {
	position: relative;
	background: var(--panel);
	padding: 14px 18px;
	border-radius: 10px;
	box-shadow: 0 8px 24px rgba(0,0,0,0.18);
	display: flex;
	gap: 12px;
	align-items: center;
	z-index: 10000;
}
.spinner {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	border: 4px solid rgba(0,0,0,0.08);
	border-top-color: var(--brand);
	animation: spin 1s linear infinite;
}
@keyframes spin {
	to { transform: rotate(360deg); }
}
.loading-text { font-weight: 600; color: var(--text); }