/* SERP preview: Google-like result cards (always light, as on google.com) */
.sp-desc { min-height: 96px; }
.sp-meter { display: grid; gap: 6px; }
.sp-bar { height: 6px; border-radius: 6px; background: var(--paper); border: 1px solid var(--line); overflow: hidden; }
.sp-bar span { display: block; height: 100%; width: 0; background: var(--ok); border-radius: 6px; transition: width .15s; }
.sp-meter.is-warn .sp-bar span { background: #D08A00; }
.sp-meter.is-over .sp-bar span { background: var(--err); }
.sp-meter .hint b { color: var(--ink); }
.sp-warnings { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.sp-warnings li { display: grid; grid-template-columns: 18px 1fr; gap: 8px; font-size: 14px; color: var(--ink-2); }
.sp-warnings .icon { width: 18px; height: 18px; margin-top: 2px; }
.sp-warnings .is-warn .icon { color: var(--warn); }
.sp-warnings .is-err .icon { color: var(--err); }
.sp-warnings .is-ok .icon { color: var(--ok); }

.sp-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); background: #fff; }
.sp-result { font-family: Arial, sans-serif; color: #4d5156; background: #fff; }
.sp-desktop { width: 652px; padding: 20px 26px; }
.sp-head { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; min-width: 0; }
.sp-fav { width: 28px; height: 28px; flex: none; border-radius: 50%; background: #f1f3f4; border: 1px solid #dadce0; display: grid; place-items: center; font: 700 13px Arial, sans-serif; color: #5f6368; }
.sp-site { min-width: 0; line-height: 1.3; }
.sp-site-name { font-size: 14px; color: #202124; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-cite { font-size: 12px; color: #4d5156; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-title { font-family: Arial, sans-serif; letter-spacing: 0; font-size: 20px; line-height: 26px; color: #1a0dab; margin: 0 0 4px; font-weight: 400; white-space: nowrap; }
.sp-text { font-size: 14px; line-height: 22px; color: #4d5156; overflow-wrap: anywhere; }
.sp-text b { color: #5f6368; font-weight: 700; }
.sp-desktop .sp-text { max-width: 600px; }
.sp-placeholder { color: #9aa0a6; }

.sp-phone { max-width: 404px; overflow-x: auto; background: #f1f3f4; border-radius: 22px; padding: 14px 10px; }
.sp-mobile { width: 382px; border-radius: 16px; padding: 16px; box-shadow: 0 1px 6px rgba(32, 33, 36, .18); }
.sp-mobile .sp-title { font-size: 18px; line-height: 24px; white-space: normal; margin-bottom: 8px; }
.sp-mobile .sp-line { display: block; white-space: nowrap; }
.sp-mobile .sp-text { line-height: 21px; }