Add bead separator support to Rosary Builder

- Bead Markers section in library panel with Small, Large, Crucifix cards
- Bead steps render as amber-tinted cards in the sequence (no attribution)
- migrate_v5.php: adds step_type/bead_type columns, makes prayer_id nullable
- Bead steps produce slides with proper bead+bead_index so the ring advances
  during presentation — allows participants to follow along on physical beads
- Prayer steps between beads still show bead_index=null (ring stays on last bead)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

assets/css/builder.css

@@ -439,6 +439,97 @@
     margin-top: 2px;
 }
 
+/* ── Bead markers section ────────────────────────────────────── */
+
+.bead-markers-section {
+    padding: 10px 16px 8px;
+    border-bottom: 1px solid var(--border);
+    background: var(--bg-card);
+    flex-shrink: 0;
+}
+
+.bead-markers-label {
+    font-size: 10px;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: .06em;
+    color: var(--muted);
+    margin-bottom: 8px;
+}
+
+.bead-marker-cards {
+    display: flex;
+    gap: 8px;
+}
+
+.bead-marker-card {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 10px;
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    background: var(--bg);
+    cursor: pointer;
+    font-family: var(--font);
+    font-size: 12px;
+    text-align: left;
+    transition: border-color .15s, background .15s;
+}
+
+.bead-marker-card:hover {
+    border-color: var(--primary);
+    background: #eff6ff;
+}
+
+.bead-icon-sm { font-size: 18px; color: #6b7280; flex-shrink: 0; line-height: 1; }
+.bead-icon-lg { font-size: 20px; color: #374151; flex-shrink: 0; line-height: 1; }
+.bead-icon-cx { font-size: 18px; color: var(--gold); flex-shrink: 0; line-height: 1; }
+
+.bead-card-text {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    min-width: 0;
+}
+
+.bead-card-text strong { font-size: 12px; font-weight: 600; color: var(--text); }
+.bead-card-text small  { font-size: 10px; color: var(--muted); }
+
+.bead-add-label {
+    font-size: 11px;
+    color: var(--primary);
+    font-weight: 600;
+    flex-shrink: 0;
+}
+
+/* ── Bead step card (in sequence list) ───────────────────────── */
+
+.step-card.bead-step {
+    background: #fefce8;
+    border-color: #fde68a;
+}
+
+.step-card.bead-step:hover {
+    border-color: #f59e0b;
+}
+
+.bead-step-name {
+    font-size: 13px;
+    font-weight: 600;
+    color: #92400e;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+}
+
+.bead-step-sub {
+    font-size: 11px;
+    color: #b45309;
+    margin-top: 2px;
+}
+
 /* ── Library footer ──────────────────────────────────────────── */
 
 .library-footer {