html:has(.photo-step-preview) { scrollbar-gutter: stable; }
.photo-step-preview { min-height: 100dvh; }
.photo-step-preview #combined-upload-wrapper,
.photo-step-preview #plus-upload-btn-standalone,
.photo-step-preview #photo-gallery-container { display: none !important; }
.photo-step-preview .upload-generate-row { justify-content: flex-end; }
.photo-step-preview:not(.photo-step-original-arrow) #submit-btn { width: 44px; padding: 10px; border-radius: 50%; }
.photo-step-preview:not(.photo-step-original-arrow) #submit-btn svg { width: 18px; transform: rotate(90deg); }
.photo-step-preview .form-container { position: relative; }
.photo-step-stage { position: relative; }
.photo-step-open .photo-step-stage > .textarea-container { opacity: 0; pointer-events: none; }
.photo-step-preview .top-banner { transition: background 320ms ease, box-shadow 320ms ease, border-color 320ms ease; }
.photo-step-open .top-banner { background: transparent !important; box-shadow: none !important; border-color: transparent !important; backdrop-filter: none !important; }
#landing-photo-step { position: absolute; inset: 0; color: #353039; }
#landing-photo-step[hidden] { display: none !important; }
#photo-step-title {
    position: absolute; inset-inline: 0;
    bottom: calc(100% + var(--photo-frame-inset, 32px) + var(--photo-summary-height, 60px) + 40px);
    margin: 0; font-size: clamp(25px, 3.2vw, 36px); line-height: 1.18; font-weight: 600;
    letter-spacing: -.035em; text-align: center;
}
.photo-step-summary {
    position: absolute; inset-inline: 0; bottom: calc(100% + var(--photo-frame-inset, 32px) + 20px);
    display: flex; align-items: center; gap: 12px;
}
.photo-step-back {
    display: grid; place-items: center; flex: 0 0 36px; height: 36px; padding: 0;
    border-radius: 50%; border: 1px solid #dfdce1; background: #ffffff70;
    color: #79717d; cursor: pointer;
}
[dir="rtl"] .photo-step-back svg { transform: rotate(180deg); }
.photo-step-description-card {
    display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0;
    position: relative; padding: 14px 18px; border: 1px solid transparent; border-radius: 16px;
}
.photo-step-summary-surface {
    position: absolute; inset: -1px; border: 1px solid #ffffffb8; border-radius: inherit;
    background: #ffffff9c; box-shadow: 0 2px 10px #3c324505; pointer-events: none;
}
.photo-step-description-card > :not(.photo-step-summary-surface) {
    position: relative;
}
.photo-step-check, .photo-step-lock { flex-shrink: 0; }
.photo-step-lock { color: #a59da9; }
#photo-step-description {
    flex: 1; min-width: 0; max-height: min(112px, 14vh); margin: 0; overflow: auto;
    font-size: 15px; line-height: 1.55; color: #665f6c; white-space: pre-wrap;
    overflow-wrap: anywhere; text-align: start;
}
.photo-step-content { width: 100%; }
#photo-step-pick {
    font: inherit; color: inherit; width: 100%; height: var(--photo-step-height, 220px);
    padding: 24px clamp(24px, 5vw, 72px); border: 1.5px dashed #cdbfcf; border-radius: 22px;
    background: #ffffffc9; display: grid; grid-template-columns: 72px minmax(0, 1fr);
    grid-template-rows: auto auto; column-gap: 26px; row-gap: 8px; align-content: center;
    text-align: start; cursor: pointer; transition: border-color 160ms ease, background 160ms ease;
}
#photo-step-pick:hover, #photo-step-pick.is-dragging { border-color: #c75b90; background: #fffafd; }
#photo-step-pick:focus-visible, .photo-step-back:focus-visible { outline: 3px solid #cb6288; outline-offset: 5px; }
#photo-step-pick:disabled { cursor: wait; opacity: 1; }
.photo-step-art { width: 72px; height: 72px; grid-column: 1; grid-row: 1 / 3; align-self: center; }
.photo-step-art svg { width: 100%; height: 100%; stroke: #bc7897; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.photo-art-back { fill: #f4e8f0; transform: rotate(9deg); transform-origin: center; }
.photo-art-front { fill: #fffafc; }
.photo-step-art circle { fill: #eccfdf; }
.photo-step-art .photo-art-plus { fill: #c65b8d; stroke: #fffafc; stroke-width: 4; }
.photo-step-art .photo-art-plus-mark { stroke: white; }
#photo-step-pick-label { grid-column: 2; align-self: end; font-size: 23px; font-weight: 600; letter-spacing: -.025em; line-height: 1.25; }
#photo-step-hint { grid-column: 2; max-width: 500px; font-size: 15px; line-height: 1.6; color: #8b8190; }
.photo-step-progress { display: none; grid-column: 2; width: 20px; height: 20px; border: 2px solid #ecdce7; border-top-color: #c65b8d; border-radius: 50%; animation: photo-step-spin 700ms linear infinite; }
[aria-busy="true"] .photo-step-progress { display: block; }
#photo-step-previews { grid-column: 2; display: flex; gap: 6px; max-height: 64px; overflow: auto; }
#photo-step-previews:empty { display: none; }
#photo-step-previews img { width: 40px; height: 48px; object-fit: cover; border-radius: 6px; flex-shrink: 0; }
#photo-step-error { color: #a63351; font-size: 14px; margin: 12px 0 0; }
#photo-step-retry { border: 0; border-radius: 24px; padding: 10px 22px; background: #c65b8d; color: white; font: inherit; margin-top: 10px; cursor: pointer; }
@keyframes photo-step-spin { to { transform: rotate(360deg); } }
@media (max-width: 540px) {
    #photo-step-pick { grid-template-columns: 52px minmax(0, 1fr); column-gap: 16px; padding: 20px; }
    .photo-step-art { width: 52px; height: 52px; }
    #photo-step-pick-label { font-size: 19px; }
    #photo-step-hint { font-size: 13px; line-height: 1.5; }
    .photo-step-summary { gap: 8px; }
    .photo-step-back { flex-basis: 30px; height: 30px; }
    .photo-step-description-card { gap: 8px; padding: 12px; }
    #photo-step-description { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
    .photo-step-preview .top-banner, #photo-step-pick { transition: none; }
}