/* Start your Magoo: the first window of the creation flow (magoo-create.blade.php).
   One ask, the photo; starting from a video is a secondary row.
   Look of 2026-10-24 (Javier): the title leads, 24 px between blocks. */
.custom-modal #add-target-modal .modal-content,
#add-target-modal .modal-content { border-radius: 28px; }
.custom-modal .modal-body.create-start { border-radius: 28px; padding: 24px; display: flex; flex-direction: column; gap: 24px; text-align: left; }
.create-start-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.create-start-title { margin: 0; font-size: 32px; line-height: 1.1; font-weight: 800; letter-spacing: -0.02em; color: #0F133A; }
.create-start-brand { color: #CC0000; }
.create-start-close { flex: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: #F2F2F2; color: #0F133A; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.create-start-intro { display: flex; flex-direction: column; gap: 6px; }
.create-start-name { margin: 0; font-size: 20px; font-weight: 700; color: #0F133A; }
.custom-modal .create-start-text { margin: 0; padding: 0; font-size: 15px; line-height: 1.45; color: #5E6070; text-align: left; }
/* Camera and Gallery: Studio's phone "Get files from..." circles
   (.modal-select-target-source, .modal-source-container,
   .modal-target-source-container in style.css), two equal columns. The
   picture carries its own grey circle (#F5F5F5); the span around it draws
   the same grey at 112 px, so the icon is about 52 px. */
.create-start .create-start-sources { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; height: auto; margin: 0; }
.create-start-source { margin: 0; padding: 4px 0; border-radius: 16px; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; }
.create-start-circle { width: 112px; height: 112px; margin-bottom: 10px; border-radius: 50%; background: #F5F5F5; display: flex; align-items: center; justify-content: center; transition: transform .12s ease; }
.create-start-circle .modal-target-source-container { width: 90px; height: 90px; margin: 0; display: block; }
.create-start-source:active .create-start-circle { transform: scale(.94); }
.create-start-source-name { font-size: 18px; font-weight: 700; color: #0F133A; }
/* From a video: a full-width row under a thin line. */
.create-start-alt { margin: 0; padding-top: 24px; border-top: 1px solid #ECECEC; }
.create-start-link { margin: 0; width: 100%; min-height: 56px; display: flex; align-items: center; gap: 14px; color: #0F133A; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; border-radius: 16px; }
.create-start-link-icon { flex: none; width: 52px; height: 52px; border-radius: 16px; background: #FCECEC; color: #CC0000; display: flex; align-items: center; justify-content: center; }
.create-start-link-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.create-start-link-title { font-size: 16px; font-weight: 700; line-height: 1.3; color: #0F133A; }
.create-start-hint { font-size: 13px; line-height: 1.35; color: #5E6070; }
.create-start-chevron { flex: none; color: #9A9CA8; }
.create-start-link:active .create-start-link-icon { transform: scale(.96); }
.create-start-source:focus-visible, .create-start-link:focus-visible { outline: 2px solid #0F133A; outline-offset: 2px; }
@media (max-width: 360px) { .create-start-title { font-size: 28px; } .create-start-circle { width: 100px; height: 100px; } .create-start-circle .modal-target-source-container { width: 80px; height: 80px; } }