.dw-speedtest {
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 100%;
  min-height: 0;
  color: var(--text);
  font-size: 12px;
}

.dw-speedtest-gauge-wrap {
  position: relative;
  display: grid;
  flex: 1 1 auto;
  min-height: 0;
  place-items: center;
}

.dw-speedtest-gauge {
  width: 100%;
  height: 100%;
  max-height: 170px;
}

.dw-speedtest-arc {
  stroke: var(--surface-muted);
}

.dw-speedtest-arc-fill {
  stroke: var(--w-accent, var(--accent));
  transition: stroke-dasharray 360ms ease;
}

.dw-speedtest-tick {
  fill: var(--text-faint);
  font-size: 8px;
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
}

.dw-speedtest-needle line {
  stroke: var(--text);
}

.dw-speedtest-needle circle {
  fill: var(--text);
}

.dw-speedtest-needle {
  transform-origin: 100px 100px;
  transition: transform 360ms cubic-bezier(0.34, 1.3, 0.64, 1);
}

.dw-speedtest-readout {
  position: absolute;
  bottom: 4px;
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.dw-speedtest-mbps {
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 22px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

.dw-speedtest.is-running .dw-speedtest-mbps {
  color: var(--w-accent, var(--accent));
}

.dw-speedtest-unit {
  color: var(--text-muted);
  font-size: 11px;
}

.dw-speedtest-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.dw-speedtest-stat {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 5px 9px;
  border-radius: 6px;
  background: var(--surface-muted);
}

.dw-speedtest-stat-label {
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.dw-speedtest-stat-value {
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-variant-numeric: tabular-nums;
}

.dw-speedtest-target {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}

.dw-speedtest-target span {
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.dw-speedtest-target select {
  min-width: 0;
  height: 27px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface-muted);
  color: var(--text);
  font: inherit;
  font-size: 11px;
}

.dw-speedtest-target select:disabled {
  opacity: 0.6;
}

.dw-speedtest-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.dw-speedtest-note,
.dw-speedtest-phase {
  color: var(--text-muted);
  font-size: 10px;
  line-height: 1.3;
}

.dw-speedtest-phase {
  color: var(--w-accent, var(--accent));
  animation: dw-speedtest-pulse 1.4s ease-in-out infinite;
}

.dw-speedtest-error {
  color: var(--red);
  font-size: 10px;
}

.dw-speedtest-start {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 5px;
  font-size: 11px;
}

.dw-speedtest-start:disabled {
  opacity: 0.5;
  pointer-events: none;
}

.dw-speedtest-spin {
  animation: dw-speedtest-rotate 900ms linear infinite;
}

@keyframes dw-speedtest-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.45;
  }
}

@keyframes dw-speedtest-rotate {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .dw-speedtest-needle,
  .dw-speedtest-arc-fill {
    transition: none;
  }

  .dw-speedtest-phase,
  .dw-speedtest-spin {
    animation: none;
  }
}
