.tui-card {
	border: 1px solid var(--terminal-border);
	border-radius: 6px;
	background: color-mix(in srgb, var(--terminal-bg) 80%, var(--card-accent) 5%);
	margin: 0.5rem 0;
	overflow: hidden;
	transition: border-color 0.2s ease;
}

.tui-card:hover {
	border-color: var(--card-accent);
}

.card-header {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.6rem 0.75rem;
	border-bottom: 1px solid var(--terminal-border);
	background: rgba(0, 0, 0, 0.1);
}

:global(.card-icon) {
	color: var(--card-accent);
}

.card-title {
	font-weight: 600;
	color: var(--terminal-text);
	font-size: 0.85rem;
}

.card-body {
	padding: 0.75rem;
}

.card-image {
	width: 100%;
	max-height: 200px;
	object-fit: cover;
	border-radius: 4px;
	margin-bottom: 0.5rem;
}

.card-content {
	color: var(--terminal-muted);
	font-size: 0.85rem;
	line-height: 1.5;
	white-space: pre-wrap;
}

.card-footer {
	padding: 0.5rem 0.75rem;
	border-top: 1px solid var(--terminal-border);
	font-size: 0.75rem;
	color: var(--terminal-muted);
	background: rgba(0, 0, 0, 0.05);
}