.connection-recovery {
  max-width: 42rem;
  margin: var(--space-4) 0;
  padding: clamp(1rem, 4vw, 2rem);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  color: var(--color-ink);
}

.connection-recovery h2 { margin: 0 0 1rem; font-family: var(--font-display); }
.connection-recovery p { margin: 0 0 1rem; }
.connection-recovery__intro .app-eyebrow { margin-bottom: 0.75rem; }
.connection-recovery__recommendation { padding: 1.25rem; margin: 1.25rem 0; border-radius: var(--radius-md); background: var(--color-brand-soft); }
.connection-recovery__recommendation p:last-child { margin-bottom: 0; }
.connection-recovery__label { color: var(--color-link); font-size: 0.85rem; font-weight: 600; }
.connection-recovery__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 1rem 0; }
.connection-recovery__actions .btn { white-space: normal; text-align: center; }
.connection-recovery__guide, .connection-recovery__alternatives { margin: 1rem 0; }
.connection-recovery summary { padding: 0.75rem 0; min-height: 44px; cursor: pointer; font-weight: 600; }
.connection-recovery__guide > summary { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 0.85rem 1rem; }
.connection-recovery__steps { padding-left: 1.5rem; margin: 1.5rem 0; }
.connection-recovery__steps li { padding-left: 0.4rem; margin-bottom: 1.5rem; }
.connection-recovery__steps li::marker { color: var(--color-link); font-weight: 600; }
.connection-recovery__steps h3 { font-size: 1rem; margin: 0 0 0.4rem; }
.connection-recovery__steps p { margin-bottom: 0.5rem; }
.connection-recovery__restriction { color: var(--color-ink-muted); font-size: 0.9rem; }
.connection-recovery__alternatives { border-top: 1px solid var(--color-border); padding-top: 0.5rem; }
.connection-recovery__skip { color: var(--color-link); background: transparent; border: 0; padding: 0.75rem 0; min-height: 44px; font: inherit; cursor: pointer; }
.connection-recovery .rowitem { flex-wrap: wrap; }

@media (max-width: 540px) {
  .connection-recovery__actions { flex-direction: column; }
  .connection-recovery__actions .btn, .connection-recovery__actions form { width: 100%; }
}