.tst-serp-preview {
  --tst-serp-accent: var(--tst-tool-control-primary, #c8f65c);
  --tst-serp-on-accent: var(--tst-tool-control-on-primary, #101827);
  --tst-serp-border: #475569;
  --tst-serp-field: #1e293b;
  --tst-serp-ink: #f8fafc;
  --tst-serp-muted: #cbd5e1;
  color: var(--tst-serp-ink);
  display: grid;
  gap: 1.25rem;
}

.tst-serp-preview h2,
.tst-serp-preview p {
  margin: 0;
}

.tst-serp-preview h2 {
  color: var(--tst-serp-ink);
}

.tst-serp-preview__privacy,
.tst-serp-preview__note,
.tst-serp-preview__metric,
.tst-serp-preview__source small {
  color: var(--tst-serp-muted);
}

.tst-serp-preview__fields {
  display: grid;
  gap: 1rem;
}

.tst-serp-preview label,
.tst-serp-preview legend {
  display: block;
  margin-bottom: 0.45rem;
  font-size: 0.82rem;
  font-weight: 800;
}

.tst-serp-preview textarea,
.tst-serp-preview input[type="url"] {
  box-sizing: border-box;
  width: 100%;
  border: 1px solid var(--tst-serp-border);
  border-radius: 0.8rem;
  padding: 0.8rem 0.9rem;
  color: var(--tst-serp-ink);
  background: var(--tst-serp-field);
  font: inherit;
  resize: vertical;
}

.tst-serp-preview textarea:focus,
.tst-serp-preview input:focus,
.tst-serp-preview button:focus-visible {
  outline: 3px solid var(--tst-tool-control-focus, #8ab1ff);
  outline-offset: 2px;
}

.tst-serp-preview__metric {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
  margin-top: 0.45rem !important;
  font-size: 0.76rem;
}

.tst-serp-preview__metric [data-status="good"] { color: var(--tst-serp-accent); }
.tst-serp-preview__metric [data-status="long"] { color: #ff9b8f; }

.tst-serp-preview__meter {
  display: block;
  height: 0.55rem;
  margin-top: 0.45rem;
  max-width: 24rem;
  width: 100%;
}

.tst-serp-preview__meter::-webkit-meter-bar { background: var(--tst-serp-field); border: 0; border-radius: 999px; }
.tst-serp-preview__meter::-webkit-meter-optimum-value { background: var(--tst-serp-accent); border-radius: 999px; }

.tst-serp-preview__device {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem 1.25rem;
  border: 0;
  padding: 0;
}

.tst-serp-preview__device legend { width: 100%; }
.tst-serp-preview__device label { margin: 0; font-weight: 700; }

.tst-serp-preview__review {
  border: 1px solid var(--tst-serp-border);
  border-radius: 0.8rem;
  display: grid;
  gap: 0.65rem;
  margin: 0;
  padding: 1rem;
}
.tst-serp-preview__review legend { padding: 0 0.35rem; }
.tst-serp-preview__review label { align-items: flex-start; display: flex; gap: 0.55rem; margin: 0; }
.tst-serp-preview__review input { flex: 0 0 auto; margin-top: 0.15rem; }

.tst-serp-preview__result {
  box-sizing: border-box;
  width: min(100%, 660px);
  min-height: 190px;
  border-radius: 1rem;
  padding: 1.25rem;
  background: #fff;
  color: #202124;
  transition: max-width 160ms ease;
}

.tst-serp-preview__result[data-device="mobile"] { max-width: 390px; }

.tst-serp-preview__source {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.55rem;
  font: 14px/1.3 Arial, sans-serif;
}

.tst-serp-preview__source span:last-child { display: grid; }

.tst-serp-preview__favicon {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 50%;
  background: #e8f0fe;
  color: #1a73e8;
  font-weight: 800;
}

.tst-serp-preview__title {
  overflow: hidden;
  color: #1a0dab;
  font: 20px/1.3 Arial, sans-serif;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.tst-serp-preview__description {
  display: -webkit-box;
  overflow: hidden;
  margin-top: 0.35rem !important;
  color: #4d5156;
  font: 14px/1.58 Arial, sans-serif;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.tst-serp-preview__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.tst-serp-preview button {
  border: 1px solid var(--tst-serp-accent);
  border-radius: 0.8rem;
  padding: 0.75rem 1rem;
  background: var(--tst-serp-accent);
  color: var(--tst-serp-on-accent);
  font: inherit;
  font-weight: 850;
  cursor: pointer;
}

.tst-serp-preview button.tst-serp-preview__secondary {
  border-color: var(--tst-serp-border);
  background: transparent;
  color: var(--tst-serp-ink);
}

.tst-serp-preview__actions [role="status"] { min-height: 1.5em; }

[data-tst-site-shell][data-theme='dark'] .tst-serp-preview {
  --tst-serp-border: #475569;
  --tst-serp-field: #1e293b;
  --tst-serp-ink: #f8fafc;
  --tst-serp-muted: #cbd5e1;
}

[data-tst-site-shell][data-theme='light'] .tst-serp-preview {
  --tst-serp-border: #cbd5e1;
  --tst-serp-field: #f8fafc;
  --tst-serp-ink: #0f172a;
  --tst-serp-muted: #526071;
}

@media (prefers-reduced-motion: reduce) {
  .tst-serp-preview__result { transition: none; }
}