.dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: var(--space-2);
}
.dot-ok { background: var(--color-success); }
.dot-error { background: var(--color-error); }

code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--color-card);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
}

.muted { color: var(--color-muted); }
.small { font-size: var(--text-sm); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  font-weight: 600;
  font-family: inherit;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: opacity 0.1s;
}
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-primary {
  background: var(--color-accent);
  color: var(--color-accent-fg);
  width: 100%;
}
.btn-primary:hover { opacity: 0.92; }
.btn-secondary {
  background: var(--color-fg);
  color: var(--color-bg);
  margin-top: var(--space-2);
}

.error {
  color: var(--color-error);
  background: rgba(220, 38, 38, 0.08);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  margin-top: var(--space-3);
}