.first-run {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  background: var(--surface-page);
  color: var(--text-primary);
}

.first-run__progress { display: flex; gap: var(--space-1-5); }

.first-run__segment {
  flex: 1;
  height: var(--space-1);
  border-radius: var(--radius-full);
  background: var(--border-default);
}

.first-run__segment--done,
.first-run__segment--current { background: var(--accent-primary); }

.first-run__body { display: flex; flex: 1; flex-direction: column; }

.first-run__main {
  display: flex;
  flex: 1;
  justify-content: center;
  padding: var(--space-10) var(--space-6);
}

.first-run__screen {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  width: 100%;
  max-width: var(--feed-max-width);
}

.first-run__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--space-16);
  height: var(--space-16);
  border-radius: var(--radius-xl);
  background: var(--accent-subtle);
  color: var(--accent-primary);
}

.first-run__icon .material-symbols-rounded { font-size: var(--text-3xl); }

.first-run__heading { display: flex; flex-direction: column; gap: var(--space-3); }

.first-run__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tighter);
  line-height: var(--leading-tight);
  text-wrap: balance;
}

.first-run__text {
  margin: 0;
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
}

.first-run__bar {
  position: sticky;
  bottom: 0;
  display: flex;
  justify-content: center;
  padding: var(--space-4) var(--space-6) calc(var(--space-4) + env(safe-area-inset-bottom));
  border-top: 1px solid var(--border-subtle);
  background: var(--surface-page);
}

.first-run__actions {
  display: flex;
  gap: var(--space-3);
  width: 100%;
  max-width: var(--feed-max-width);
}

.first-run__actions .btn--primary { margin-left: auto; }

@media (max-width: 767px) {
  .first-run__main { padding: var(--space-8) var(--space-4); }
  .first-run__bar { padding-inline: var(--space-4); }
  .first-run__actions .btn--primary { flex: 1; }
}
