.serp .tl-label label { cursor: pointer; }
.serp__url { font: 400 14.5px/1 var(--tl-mono) !important; letter-spacing: 0 !important; }
.serp__desc { min-height: 118px; }

.serp__count { font-variant-numeric: tabular-nums; }
.serp__count[data-s="warn"] { color: #a37a06; }
.serp__count[data-s="bad"] { color: var(--tl-neg); }
.serp__count[data-s="ok"] { color: var(--tl-pos); }
.serp__note { display: flex; align-items: baseline; gap: 8px; }
.serp__note::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: #c9ccd3; translate: 0 -1px; }
.serp__note[data-s="warn"]::before { background: var(--tl-okay); }
.serp__note[data-s="bad"] { color: var(--tl-neg); }
.serp__note[data-s="bad"]::before { background: var(--tl-poor); }
.serp__note[data-s="ok"]::before { background: var(--tl-good); }

.serp__out { display: flex; flex-direction: column; }
.serp__page {
  flex: 1; display: flex; flex-direction: column; gap: 26px;
  padding: 18px 22px 24px;
  border-radius: 12px; border: 1px solid var(--gk-line); background: #fff;
}
.serp__bar {
  display: flex; align-items: center; gap: 12px;
  height: 42px; padding: 0 16px;
  border-radius: 999px; border: 1px solid var(--gk-line);
}
.serp__bar svg { flex: none; width: 17px; height: 17px; fill: none; stroke: #9aa0ab; stroke-width: 1.8; stroke-linecap: round; }
.serp__bar i { width: 42%; height: 8px; border-radius: 4px; background: #eef0f3; }

.serp__result { max-width: 600px; font-family: Arial, Helvetica, sans-serif; }
.serp__link { display: block; color: inherit; text-decoration: none; }
.serp__link:focus-visible { outline: 2px solid var(--brand); outline-offset: 4px; border-radius: 4px; }
.serp__top { display: flex; align-items: center; gap: 12px; min-width: 0; }
.serp__fav {
  flex: none; display: grid; place-items: center;
  width: 28px; height: 28px; border-radius: 50%;
  background: #f1f2f4; border: 1px solid #e3e5e8;
  font: 700 13px/1 Arial, Helvetica, sans-serif; color: #5c616b;
}
.serp__id { display: grid; min-width: 0; }
.serp__site { font-size: 14px; line-height: 20px; color: #202124; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.serp__path { font-size: 12px; line-height: 18px; color: #5f6368; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.serp__title {
  display: block; margin-top: 8px;
  font-size: 20px; line-height: 26px; font-weight: 400; color: #2a3fb8;
  overflow-wrap: anywhere;
}
.serp__link:hover .serp__title { text-decoration: underline; text-underline-offset: 2px; }
.serp__text { margin: 4px 0 0; font-size: 14px; line-height: 22px; color: #4d5156; overflow-wrap: anywhere; }
.serp__title.is-empty, .serp__text.is-empty { opacity: .55; }

.serp__ghost { display: grid; gap: 9px; max-width: 600px; opacity: .7; }
.serp__ghost + .serp__ghost { opacity: .4; }
.serp__ghost i { display: block; height: 9px; border-radius: 4px; background: #f0f1f3; }
.serp__ghost .serp__fav { width: 28px; height: 28px; border-radius: 50%; background: #f0f1f3; border: 0; }
.serp__ghost .serp__id { gap: 7px; width: 34%; }
.serp__ghost .serp__id i:last-child { width: 70%; }
.serp__ghost > i:nth-of-type(1) { width: 62%; height: 13px; margin-top: 4px; background: #e9ebf2; }
.serp__ghost > i:nth-of-type(2) { width: 96%; }
.serp__ghost > i:nth-of-type(3) { width: 74%; }

@media (max-width: 760px) {
  .serp__page { padding: 14px 14px 18px; }
  .serp__title { font-size: 18px; line-height: 24px; }
}