/* Meta tag generator: length meters and a generic search-result preview. */
.mt-meter.good > span { background: var(--ok); }
.mt-meter.short > span { background: #d68c14; }
.mt-meter.over > span { background: var(--err); }
.mt-serp { overflow: hidden; padding: 18px; border-radius: var(--r); background: #fff; border: 1px solid var(--line); color: #202124; }
.mt-serp-inner { width: 600px; max-width: none; text-align: left; font-family: Arial, 'Liberation Sans', Helvetica, sans-serif; }
.mt-serp-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.mt-serp-fav { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: #e8eaed; color: #4d5156; font-size: 13px; font-weight: 700; flex-shrink: 0; }
.mt-serp-site { display: block; font-size: 14px; color: #202124; line-height: 20px; }
.mt-serp-url { display: block; font-size: 12px; color: #4d5156; line-height: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 540px; }
.mt-serp-title { display: block; font-size: 20px; line-height: 26px; color: #1a0dab; margin: 2px 0 4px; white-space: nowrap; }
.mt-serp-desc { font-size: 14px; line-height: 22px; color: #4d5156; margin: 0; }
:root[data-theme='dark'] .mt-serp { background: #202124; color: #e8eaed; }
:root[data-theme='dark'] .mt-serp-site { color: #dadce0; }
:root[data-theme='dark'] .mt-serp-url, :root[data-theme='dark'] .mt-serp-desc { color: #bdc1c6; }
:root[data-theme='dark'] .mt-serp-title { color: #8ab4f8; }
:root[data-theme='dark'] .mt-serp-fav { background: #3c4043; color: #e8eaed; }
.mt-label-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 10px; }
.mt-label-row .hint { font-variant-numeric: tabular-nums; }
.mt-fit { margin: 0 auto; width: max-content; }
#mt-card { transform-origin: top left; }
@media (max-width: 560px) { .mt-serp { padding: 10px; } }