.aiarch-tldr {
	/* Edit these three variables (e.g. via Appearance > Customize > Additional CSS,
	   targeting ".aiarch-tldr { ... }") to match your site's color scheme without
	   touching plugin files. */
	--aiarch-border: #d8d8d8;
	--aiarch-bg: #f7f7f5;
	--aiarch-text: #222222;

	border: 1px solid var(--aiarch-border);
	background: var(--aiarch-bg);
	color: var(--aiarch-text);
	border-radius: 8px;
	margin: 0 0 24px 0;
	overflow: hidden;
}
.aiarch-tldr-toggle {
	width: 100%;
	text-align: left;
	background: transparent;
	color: var(--aiarch-text);
	border: none;
	padding: 14px 16px;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.3;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 8px;
	-webkit-appearance: none;
	appearance: none;
}
.aiarch-tldr-toggle:hover {
	background: rgba(0, 0, 0, 0.06);
}
.aiarch-tldr-icon {
	font-size: 1.1em;
}
.aiarch-tldr-body {
	padding: 0 16px 16px 16px;
	color: var(--aiarch-text);
}
.aiarch-tldr-body p {
	margin: 0 0 12px 0;
	line-height: 1.6;
}
.aiarch-tldr-body ul {
	margin: 0 0 8px 20px;
}
.aiarch-tldr-body li {
	margin-bottom: 6px;
	line-height: 1.5;
}
.aiarch-tldr-disclaimer {
	font-size: 0.8rem;
	color: #777;
	margin: 8px 0 0 0;
}