/* SERP snippet preview: generic search result card in desktop and mobile widths. */
.sp-meter.good > span { background: var(--ok); }
.sp-meter.over > span { background: var(--err); }
.sp-label-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 10px; }
.sp-label-row .hint { font-variant-numeric: tabular-nums; }
.sp-stage { overflow: hidden; padding: 18px; border-radius: var(--r); background: #fff; border: 1px solid var(--line); }
.sp-serp { margin: 0; color: #202124; font-family: Arial, 'Liberation Sans', Helvetica, sans-serif; }
.sp-serp.desktop { width: max-content; }
.sp-serp.mobile { width: max-content; padding: 14px 16px; border-radius: 16px; box-shadow: 0 1px 6px rgba(32, 33, 36, 0.18); }
.sp-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.sp-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; }
.sp-site { display: block; font-size: 14px; line-height: 20px; color: #202124; }
.sp-url { display: block; font-size: 12px; line-height: 18px; color: #4d5156; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-inner .sp-head > span:last-child { min-width: 0; }
.sp-title { display: block; font-size: 20px; line-height: 26px; color: #1a0dab; margin: 2px 0 4px; }
.sp-serp.desktop .sp-title { white-space: nowrap; }
.sp-desc { font-size: 14px; line-height: 22px; color: #4d5156; margin: 0; }
.sp-date { color: #70757a; }
:root[data-theme='dark'] .sp-stage { background: #202124; }
:root[data-theme='dark'] .sp-serp { color: #e8eaed; }
:root[data-theme='dark'] .sp-serp.mobile { background: #303134; box-shadow: none; }
:root[data-theme='dark'] .sp-site { color: #dadce0; }
:root[data-theme='dark'] .sp-url, :root[data-theme='dark'] .sp-desc, :root[data-theme='dark'] .sp-date { color: #bdc1c6; }
:root[data-theme='dark'] .sp-title { color: #8ab4f8; }
:root[data-theme='dark'] .sp-fav { background: #3c4043; color: #e8eaed; }
.sp-fit { margin: 0 auto; width: max-content; }
#sp-card { transform-origin: top left; }
@media (max-width: 560px) { .sp-stage, .mt-serp { padding: 10px; } }