.search-hud {
  --scan-cyan: #5ce1ff;
  --scan-muted: #a7bbd1;
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  margin: 0 0 16px;
  padding: 18px;
  border: 1px solid #285064;
  border-radius: 14px;
  background: radial-gradient(ellipse at top left, #122937, #0c1521 70%);
  color: #e5f2ff;
}
.search-hud p, .search-hud h3 { margin: 0; }
.search-hud-heading, .search-hud-bottom, .search-hud-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 14px;
}
.search-hud-heading h3 { font-size: clamp(19px, 3vw, 25px); line-height: 1.2; color: inherit; }
.search-hud .search-hud-kicker {
  margin-bottom: 4px;
  color: var(--scan-cyan);
  font: 600 11px/1.4 ui-monospace, monospace;
  letter-spacing: .12em;
}
.search-hud-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 9px;
  border: 1px solid #34586a;
  border-radius: 999px;
  background: #102430;
  color: var(--scan-cyan);
  font-size: 12px;
}
.search-hud-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.search-hud:is([data-state="paused"], [data-state="stopped"], [data-state="error"]) .search-hud-badge,
.search-hud[data-state="complete"]:not([data-method="exact"]) .search-hud-badge {
  color: #ffc26a;
}
.search-radar {
  position: relative;
  isolation: isolate;
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid #34697d;
  border-radius: 50%;
  background:
    repeating-radial-gradient(circle, transparent 0 10px, #245065 11px 12px),
    linear-gradient(90deg, transparent 49%, #245065 49% 51%, transparent 51%),
    linear-gradient(transparent 49%, #245065 49% 51%, transparent 51%),
    #081923;
}
.search-radar span {
  position: absolute;
  inset: 0;
  background: conic-gradient(transparent 270deg, #5ce1ff70 356deg, #5ce1ff 359deg, transparent 360deg);
  animation: search-radar-turn 3s linear infinite paused;
}
.search-hud[data-state="running"] .search-radar span { animation-play-state: running; }
.search-hud:is([data-state="complete"], [data-state="stopped"], [data-state="error"]) .search-radar span {
  display: none;
}
.search-radar::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  width: 5px;
  height: 5px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--scan-cyan);
}
@keyframes search-radar-turn { to { transform: rotate(1turn); } }
.search-hud .search-hud-progress-text { margin-top: 11px; font-size: 13px; font-weight: 600; }
.search-hud-meter {
  --search-segments: 1;
  --search-segment-width: calc(100% / var(--search-segments));
  display: block;
  appearance: none;
  width: 100%;
  height: 7px;
  margin: 6px 0;
  border: 0;
  border-radius: 2px;
  background: #263949;
  color: var(--scan-cyan);
  mask-image: repeating-linear-gradient(90deg, #000 0 calc(var(--search-segment-width) - 3px), transparent 0 var(--search-segment-width));
}
.search-hud-meter::-webkit-progress-bar { background: #263949; }
.search-hud-meter::-webkit-progress-value { background: var(--scan-cyan); }
.search-hud-meter::-moz-progress-bar { background: var(--scan-cyan); }
.search-hud-meta { font-size: 12px; color: var(--scan-muted); font-variant-numeric: tabular-nums; }
.search-hud-bottom { margin-top: 10px; }
.search-hud .search-hud-leader { font-size: 13px; color: var(--scan-cyan); }
.search-hud-leader span:first-child { color: var(--scan-muted); }
.search-hud-actions { justify-content: flex-start; gap: 8px; }
@media (max-width: 480px) {
  .search-hud { grid-template-columns: 48px minmax(0, 1fr); gap: 10px; padding: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .search-radar span { animation: none; }
}