.st-page { display: grid; gap: 30px; max-width: 820px; margin: 0 auto; }
.st-section { display: grid; gap: 12px; }
.st-section-head h2, .st-card h3, .st-appearance h3 { margin: 0; font-family: var(--serif); }
.st-section-head p, .st-copy p, .st-appearance p { margin: 4px 0 0; }
.st-card { padding: 0; overflow: hidden; }
.st-integration { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 20px; }
.st-icon { width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--rose-soft); }
.st-icon svg { width: 28px; height: 28px; }
.st-copy { min-width: 0; }
.st-title-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.st-status { display: inline-flex; align-items: center; min-height: 24px; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; line-height: 1; }
.st-status--connected { color: var(--sage); background: var(--sage-soft); }
.st-status--not-connected { color: var(--rose-deep); background: var(--rose-soft); }
.st-status--offline { color: var(--muted); background: var(--card); border: 1px solid var(--line); }
.st-connect { min-width: 92px; }
.st-help { margin: 0; padding: 14px 20px; border-top: 1px solid var(--line); }
.st-error { min-height: 0; margin: 0; padding: 0 20px; color: var(--rose-deep); }
.st-error:not(:empty) { padding-bottom: 14px; }
.st-appearance { display: flex; gap: 14px; align-items: center; padding: 20px; box-shadow: var(--shadow-sm); }
.st-swatch { flex: 0 0 48px; width: 48px; height: 48px; border: 1px solid var(--line); border-radius: var(--r-md); background: linear-gradient(145deg, var(--rose-soft), var(--rose)); }

@media (max-width: 380px) {
  .st-page { gap: 24px; }
  .st-integration { grid-template-columns: 44px 1fr; padding: 16px; }
  .st-icon, .st-swatch { width: 42px; height: 42px; }
  .st-connect { grid-column: 1 / -1; width: 100%; }
  .st-help { padding: 12px 16px; }
  .st-error { padding-inline: 16px; }
  .st-appearance { align-items: flex-start; padding: 16px; }
}