/* Title Tag Length Checker – Google-style SERP preview card. */
.te-ttlc-serp {
	max-width: 600px;
	margin-top: 8px;
	padding: 16px 18px;
	border: 1px solid var(--te-color-border);
	border-radius: 10px;
	background: var(--te-color-surface);
	color: inherit;
	font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}

.te-ttlc-serp__head {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 6px;
}

.te-ttlc-serp__favicon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: color-mix(in srgb, currentColor 8%, transparent);
	font-size: 0.85rem;
}

.te-ttlc-serp__site {
	display: flex;
	flex-direction: column;
	line-height: 1.2;
	min-width: 0;
}

.te-ttlc-serp__name {
	font-size: 0.875rem;
}

.te-ttlc-serp__url {
	font-size: 0.75rem;
	opacity: 0.7;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.te-ttlc-serp__title {
	color: #1a0dab;
	font-size: 1.25rem;
	line-height: 1.3;
	margin: 2px 0 4px;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.te-ttlc-serp__desc {
	font-size: 0.875rem;
	line-height: 1.5;
	opacity: 0.82;
}

@media (prefers-color-scheme: dark) {
	.te-ttlc-serp__title {
		color: #8ab4f8;
	}
}

:root[data-theme="dark"] .te-ttlc-serp__title {
	color: #8ab4f8;
}

:root[data-theme="light"] .te-ttlc-serp__title {
	color: #1a0dab;
}