/* DEV Step 3 UX. Presentation-only except the optional Home Layout disclosure in JS. */
#step-3.s3-experience-v2 .s3-play-header{
 padding:8px 0 11px!important;margin:0 0 10px!important;
}
#step-3.s3-experience-v2 .s3-play-header h1{
 font-size:clamp(23px,3vw,31px)!important;line-height:1.18!important;margin:4px 0!important;
}
#step-3.s3-experience-v2 .s3-play-header .um-step-sub{
 font-size:12px!important;line-height:1.45!important;margin:5px 0!important;
}
#step-3 .s3-editor-zone-head{gap:10px!important;padding-bottom:9px!important}
#step-3 .s3-editor-zone-head h2{font-size:clamp(17px,2vw,20px)!important;margin:2px 0!important}
#step-3 .s3-editor-zone-head p{font-size:11px!important;line-height:1.42!important;margin:4px 0 0!important}
#step-3 #empty-state .s3-empty-arrow{display:none!important}
#step-3 #empty-state{
 min-height:95px!important;margin:8px 0!important;padding:17px 12px!important;
}
#step-3 #empty-state .s3-empty-icon{font-size:27px!important;margin:0 0 6px!important}
#step-3 #empty-state .s3-empty-text{line-height:1.5!important;font-size:12px!important}
#step-3 .s3-v2-drawer{margin:10px 0!important}
#step-3 #s3AddCollectionDrawer>summary{min-height:56px!important;padding:8px 11px!important}
#step-3 .s3-kaptain-launch{margin:10px 0!important;padding:11px 12px!important}
#step-3 .s3-v2-drawer-copy small{line-height:1.4!important;font-size:11px!important}
#step-3 .s3-ux-home-disclosure{
 margin:11px 0!important;padding:0!important;overflow:hidden!important;
 border:1px solid var(--border2,var(--flow-border,#435269))!important;
 border-radius:13px!important;
 background:var(--card,var(--flow-panel,#212a35))!important;color:var(--text,#eef4f9)!important;
 box-shadow:none!important;
}
#step-3 .s3-ux-home-disclosure>summary{
 display:grid;grid-template-columns:40px minmax(0,1fr) 25px;
 align-items:center;gap:10px;min-height:62px;padding:10px 12px;
 cursor:pointer;list-style:none;
}
#step-3 .s3-ux-home-disclosure>summary::-webkit-details-marker{display:none}
#step-3 .s3-ux-home-disclosure>summary .s3-ux-home-icon{
 width:37px;height:37px;display:grid;place-items:center;
 border:1px solid var(--border2,var(--flow-border,#435269));border-radius:10px;
 background:var(--input-bg,var(--flow-tint,#303c4b));color:var(--text,#eef4f9);
 font-size:18px;
}
#step-3 .s3-ux-home-copy{display:grid;gap:3px;min-width:0}
#step-3 .s3-ux-home-copy strong{color:var(--text,#edf3fa);font-size:14px;font-weight:750}
#step-3 .s3-ux-home-copy small{color:var(--text2,var(--muted,#b3bdca));font-size:11px;line-height:1.35}
#step-3 .s3-ux-home-chevron{transition:transform .18s ease;color:var(--text2,var(--muted,#b3bdca))}
#step-3 .s3-ux-home-disclosure[open] .s3-ux-home-chevron{transform:rotate(180deg)}
#step-3 .s3-ux-home-disclosure>#s3HomeLayoutPanel{
 border:0!important;border-top:1px solid var(--border2,var(--flow-border,#435269))!important;
 border-radius:0!important;margin:0!important;box-shadow:none!important;
}
#step-3 .s3-v2-home-layout-head{gap:8px!important}
#step-3 .s3-v2-home-layout-head h2{font-size:15px!important}
#step-3 .s3-v2-home-layout-head p{font-size:11px!important}
#step-3 .s3-v2-layout-section{padding:9px 10px!important}
#step-3 .collection-bottom-area>.count-display{display:none!important}
#step-3 .collection-bottom-area{
 position:relative!important;bottom:auto!important;top:auto!important;z-index:1!important;
 display:block!important;margin:13px 0 0!important;padding:0!important;
 background:transparent!important;background-image:none!important;border:0!important;
 box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
 min-height:0!important;height:auto!important;
}
#step-3 .collection-bottom-actions{
 display:grid!important;grid-template-columns:minmax(0,.75fr) minmax(0,1.55fr)!important;
 align-items:stretch!important;gap:9px!important;width:100%!important;
 min-height:0!important;margin:0!important;padding:0!important;
 background:transparent!important;border:0!important;box-shadow:none!important;
}
#step-3 .collection-bottom-actions > button:not(#nuvioPreviewBtn){
 display:inline-flex!important;min-width:0!important;min-height:49px!important;
 width:100%!important;height:auto!important;align-items:center!important;justify-content:center!important;
 padding:9px 11px!important;margin:0!important;border-radius:11px!important;
 line-height:1.4!important;font-size:12px!important;font-weight:750!important;
 box-shadow:none!important;white-space:normal!important;
}
#step-3 .collection-bottom-actions>#nuvioPreviewBtn{display:none!important}
#step-3 .collection-bottom-actions>.step4-action-primary{
 background:#47749b!important;background-image:none!important;color:#fff!important;
 border:1px solid #47749b!important;-webkit-text-fill-color:#fff!important;
}
#step-3 .collection-bottom-actions>.step4-action-secondary{
 background:var(--card,var(--flow-panel,#283343))!important;
 color:var(--text,#eef3fa)!important;-webkit-text-fill-color:var(--text,#eef3fa)!important;
 border:1px solid var(--border2,var(--flow-border,#485569))!important;
}
html.um-refined[data-um-appearance="refined-light"] body #step-3 .collection-bottom-actions>.step4-action-primary{
 background:#47749b!important;border-color:#47749b!important;color:#fff!important;
 -webkit-text-fill-color:#fff!important;
}
@media(max-width:899px){
 html:is(.um-app-mode,.native-app) body #step-3.active{
  padding-bottom:calc(135px + env(safe-area-inset-bottom))!important;
 }
 #step-3 .s3-v2-home-layout-head{flex-wrap:wrap!important}
}
@media(min-width:900px){
 #step-3 .collection-bottom-actions{
  max-width:760px!important;margin-inline:auto!important;
 }
 #step-3 .s3-ux-home-disclosure{max-width:100%!important}
}
/* Native app detail view must stay focused when editing an individual collection. */
.um-app-mode.s3-app-detail-mode #step-3 > .s3-ux-home-disclosure{
 display:none!important;
}
/* Accessibility: Refined Light inherited white disclosure titles from legacy CSS. */
html.um-refined[data-um-appearance="refined-light"] body #step-3 .um-workspace-disclosure>summary .um-workspace-disclosure-copy strong,
html.um-refined[data-um-appearance="refined-light"] body #step-3 #s3UxHomeDetails>summary .s3-ux-home-copy strong,
html.um-refined[data-um-appearance="refined-light"] body #step-3 #s3AddCollectionDrawer .s3-v2-drawer-copy strong{
 color:#26384d!important;-webkit-text-fill-color:#26384d!important;
}
html.um-refined[data-um-appearance="refined-light"] body #step-3 .um-workspace-disclosure>summary .um-workspace-disclosure-copy small,
html.um-refined[data-um-appearance="refined-light"] body #step-3 #s3UxHomeDetails>summary .s3-ux-home-copy small,
html.um-refined[data-um-appearance="refined-light"] body #step-3 #s3AddCollectionDrawer .s3-v2-drawer-copy small{
 color:#53677d!important;-webkit-text-fill-color:#53677d!important;
}
html.um-refined body #step-3 .collection-bottom-actions>.step4-action::before,
html.um-refined body #step-3 .collection-bottom-actions>.step4-action::after,
html[data-um-appearance="classic"] body #step-3 .collection-bottom-actions>.step4-action::before,
html[data-um-appearance="classic"] body #step-3 .collection-bottom-actions>.step4-action::after{
 content:none!important;display:none!important;
}
/* Override earlier refined wizard footers with higher specificity. */
html.um-refined body #step-3.s3-experience-v2 .collection-bottom-area{
 display:block!important;flex-direction:initial!important;gap:0!important;
 margin:13px 0 0!important;padding:0!important;
 background:transparent!important;background-image:none!important;border:0!important;
 box-shadow:none!important;min-height:0!important;
}
html.um-refined body #step-3.s3-experience-v2 .collection-bottom-actions,
html[data-um-appearance="classic"] body #step-3.s3-experience-v2 .collection-bottom-actions{
 display:grid!important;grid-template-columns:minmax(0,.75fr) minmax(0,1.55fr)!important;
 gap:9px!important;width:100%!important;max-width:760px!important;
 min-height:0!important;height:auto!important;align-items:stretch!important;
 margin:0 auto!important;padding:0!important;flex-direction:initial!important;
}
html.um-refined body #step-3.s3-experience-v2 .collection-bottom-actions>.step4-action,
html[data-um-appearance="classic"] body #step-3.s3-experience-v2 .collection-bottom-actions>.step4-action{
 grid-column:auto!important;grid-row:auto!important;justify-self:stretch!important;
 width:100%!important;max-width:none!important;min-width:0!important;
 min-height:49px!important;height:auto!important;margin:0!important;padding:9px 11px!important;
}
@media(prefers-reduced-motion:reduce){#step-3 .s3-ux-home-chevron{transition:none}}
/* Fix actual mobile overlap: a legacy app rule still applies bottom:86px
   to a position:relative footer, which lifts it over Advanced Collections.
   Keep the actions AFTER the last drawer in document flow, never floating. */
#step-3.s3-experience-v2 > .collection-bottom-area{
 position:static!important;top:auto!important;right:auto!important;
 bottom:auto!important;left:auto!important;inset:auto!important;
 transform:none!important;float:none!important;clear:both!important;
 z-index:auto!important;
}
@media(max-width:899px){
 /* The fixed four-tab app dock needs ONE consistent scroll clearance,
    regardless of which appearance stylesheet was loaded earlier. */
 html:is(.um-app-mode,.native-app) body #step-3.s3-experience-v2.active,
 html:is(.um-app-mode,.native-app) body #step-3.active{
  padding-bottom:calc(105px + env(safe-area-inset-bottom))!important;
 }
 html:is(.um-app-mode,.native-app) body #step-3.active > .collection-bottom-area{
  position:static!important;inset:auto!important;bottom:auto!important;
  margin:11px 0 0!important;
 }
}
@media(min-width:900px){
 /* Laptop web needs normal page rhythm, not phone-dock clearance. */
 html:not(.um-app-mode):not(.native-app) body #step-3.s3-experience-v2.active{
  padding-bottom:28px!important;
 }
 /* Only the app's large-screen Build view: undo THREE stacked legacy
    dock paddings while leaving other steps and the public website alone. */
 html:is(.um-app-mode,.native-app) body:has(#step-3.active){
  padding-bottom:20px!important;
 }
 html:is(.um-app-mode,.native-app) body:has(#step-3.active) .um-main{
  padding-bottom:0!important;
 }
 html:is(.um-app-mode,.native-app) body #step-3.s3-experience-v2.active{
  padding-bottom:85px!important;
 }
}
/* Advanced collections stay themed when the original v2 CSS uses hardcoded purple. */
html.um-refined body #step-3 #s3AdvancedCollectionDrawer{
 --s3ux-panel:#202a35;--s3ux-soft:#2a3746;--s3ux-edge:#445469;
 --s3ux-ink:#edf4fa;--s3ux-muted:#b9c6d5;--s3ux-action:#47749b;
}
html.um-refined[data-um-appearance="refined-light"] body #step-3 #s3AdvancedCollectionDrawer{
 --s3ux-panel:#fff;--s3ux-soft:#f2f6fa;--s3ux-edge:#d5e0eb;
 --s3ux-ink:#26384d;--s3ux-muted:#586b7f;--s3ux-action:#47749b;
}
html.um-refined body #step-3 #s3AdvancedCollectionDrawer :is(
 .s3-v2-drawer-body,.s3-hero-master,.s3-display-panel,
 .s3-hero-master-status,.s3-viewmode-card,.s3-import-utility
){
 background:var(--s3ux-panel)!important;background-image:none!important;
 border-color:var(--s3ux-edge)!important;
 color:var(--s3ux-ink)!important;box-shadow:none!important;
}
html.um-refined body #step-3 #s3AdvancedCollectionDrawer :is(
 .s3-hero-master-head strong,.s3-workspace-heading strong,
 .s3-viewmode-name,.s3-hero-master-grid label>span
){
 color:var(--s3ux-ink)!important;-webkit-text-fill-color:var(--s3ux-ink)!important;
}
html.um-refined body #step-3 #s3AdvancedCollectionDrawer :is(
 .s3-hero-master-head small,.s3-hero-master-note,.s3-workspace-heading p,
 .s3-viewmode-desc
){
 color:var(--s3ux-muted)!important;-webkit-text-fill-color:var(--s3ux-muted)!important;
}
html.um-refined body #step-3 #s3AdvancedCollectionDrawer :is(
 .s3-hero-master-grid select,.s3-hero-master-count,.s3-v2-drawer-meta
){
 background:var(--s3ux-soft)!important;background-image:none!important;
 border:1px solid var(--s3ux-edge)!important;color:var(--s3ux-ink)!important;
 -webkit-text-fill-color:var(--s3ux-ink)!important;box-shadow:none!important;
}
html.um-refined body #step-3 #s3AdvancedCollectionDrawer .s3-hero-master-apply{
 background:var(--s3ux-action)!important;background-image:none!important;
 color:#fff!important;-webkit-text-fill-color:#fff!important;
 border-color:var(--s3ux-action)!important;box-shadow:none!important;
}
html.um-refined body #step-3 #s3AdvancedCollectionDrawer .s3-hero-master-apply:disabled{
 opacity:.46!important;cursor:default!important;
}
html.um-refined body #step-3 #s3AdvancedCollectionDrawer .s3-hero-master-disable{
 background:var(--s3ux-soft)!important;border-color:var(--s3ux-edge)!important;
 color:var(--s3ux-ink)!important;-webkit-text-fill-color:var(--s3ux-ink)!important;
}


/* Step 3 unified five-card navigation: one size, rhythm, icon and chevron. */
#step-3.s3-experience-v2[data-um-s3-cards-unified]{
  --s3card-bg:var(--card,var(--flow-panel,#202a35));
  --s3card-soft:var(--input-bg,var(--flow-tint,#2b3746));
  --s3card-border:var(--border2,var(--flow-border,#445368));
  --s3card-title:var(--text,var(--flow-ink,#edf4fa));
  --s3card-desc:var(--text2,var(--muted,var(--flow-secondary,#b8c5d3)));
}
#step-3.s3-experience-v2[data-um-s3-cards-unified] > :is(
  .um-workspace-disclosure,#s3AddCollectionDrawer,#s3UxHomeDetails,#s3AdvancedCollectionDrawer
){
  display:block;
  width:100%!important;max-width:none!important;box-sizing:border-box!important;
  margin:9px 0!important;padding:0!important;border:1px solid var(--s3card-border)!important;
  border-radius:14px!important;background:var(--s3card-bg)!important;
  background-image:none!important;box-shadow:none!important;overflow:hidden!important;
  color:var(--s3card-title)!important;
}
#step-3.s3-experience-v2[data-um-s3-cards-unified] > :is(
  .um-workspace-disclosure,#s3AddCollectionDrawer,#s3UxHomeDetails,#s3AdvancedCollectionDrawer
) > summary{
  display:grid!important;grid-template-columns:42px minmax(0,1fr) 32px!important;
  gap:12px!important;align-items:center!important;min-height:76px!important;
  width:100%!important;box-sizing:border-box!important;margin:0!important;
  padding:12px 14px!important;text-align:left!important;cursor:pointer!important;
  background:transparent!important;background-image:none!important;
  border:0!important;box-shadow:none!important;list-style:none!important;
}
#step-3.s3-experience-v2[data-um-s3-cards-unified] > :is(
  .um-workspace-disclosure,#s3AddCollectionDrawer,#s3UxHomeDetails,#s3AdvancedCollectionDrawer
) > summary::-webkit-details-marker{display:none!important}
#step-3.s3-experience-v2[data-um-s3-cards-unified] > :is(
  .um-workspace-disclosure,#s3AddCollectionDrawer,#s3UxHomeDetails,#s3AdvancedCollectionDrawer
)[open] > summary{
  background:var(--s3card-soft)!important;
  border-bottom:1px solid var(--s3card-border)!important;
}
#step-3.s3-experience-v2[data-um-s3-cards-unified] > :is(
  .um-workspace-disclosure,#s3AddCollectionDrawer,#s3UxHomeDetails,#s3AdvancedCollectionDrawer
) > summary:is(:hover,:focus-visible){
  background:var(--s3card-soft)!important;
}
#step-3.s3-experience-v2[data-um-s3-cards-unified] .um-s3-card-icon{
  grid-column:1!important;display:grid!important;place-items:center!important;flex:0 0 auto!important;
  width:42px!important;height:42px!important;box-sizing:border-box!important;
  padding:0!important;border:1px solid var(--s3card-border)!important;
  border-radius:12px!important;background:var(--s3card-soft)!important;
  background-image:none!important;color:var(--s3card-title)!important;
  font-size:0!important;line-height:1!important;box-shadow:none!important;
}
#step-3.s3-experience-v2[data-um-s3-cards-unified] .um-s3-card-icon svg{
  width:21px!important;height:21px!important;display:block!important;
  stroke:currentColor!important;fill:none!important;
}
#step-3.s3-experience-v2[data-um-s3-cards-unified] > :is(
  .um-workspace-disclosure,#s3AddCollectionDrawer,#s3UxHomeDetails,#s3AdvancedCollectionDrawer
) > summary :is(.um-workspace-disclosure-copy,.s3-v2-drawer-copy,.s3-ux-home-copy){
  grid-column:2!important;display:flex!important;flex-direction:column!important;
  gap:4px!important;min-width:0!important;margin:0!important;align-items:flex-start!important;
}
#step-3.s3-experience-v2[data-um-s3-cards-unified] > :is(
  .um-workspace-disclosure,#s3AddCollectionDrawer,#s3UxHomeDetails,#s3AdvancedCollectionDrawer
) > summary :is(.um-workspace-disclosure-copy,.s3-v2-drawer-copy,.s3-ux-home-copy) strong{
  font-size:15px!important;font-weight:750!important;line-height:1.24!important;letter-spacing:-.015em!important;
  color:var(--s3card-title)!important;-webkit-text-fill-color:var(--s3card-title)!important;
}
#step-3.s3-experience-v2[data-um-s3-cards-unified] > :is(
  .um-workspace-disclosure,#s3AddCollectionDrawer,#s3UxHomeDetails,#s3AdvancedCollectionDrawer
) > summary :is(.um-workspace-disclosure-copy,.s3-v2-drawer-copy,.s3-ux-home-copy) small{
  font-size:12px!important;font-weight:400!important;line-height:1.4!important;
  color:var(--s3card-desc)!important;-webkit-text-fill-color:var(--s3card-desc)!important;
  white-space:normal!important;text-align:left!important;
}
#step-3.s3-experience-v2[data-um-s3-cards-unified] > :is(
  .um-workspace-disclosure,#s3AddCollectionDrawer,#s3UxHomeDetails,#s3AdvancedCollectionDrawer
) > summary :is(.um-workspace-chevron,.s3-v2-drawer-chev,.s3-ux-home-chevron){
  grid-column:3!important;display:grid!important;place-items:center!important;
  width:32px!important;height:32px!important;box-sizing:border-box!important;
  margin:0!important;padding:0!important;
  background:var(--s3card-soft)!important;
  border:1px solid var(--s3card-border)!important;
  border-radius:9px!important;color:var(--s3card-desc)!important;
  font-size:20px!important;font-weight:500!important;line-height:1!important;
  transition:transform .18s ease!important;
}
#step-3.s3-experience-v2[data-um-s3-cards-unified] > :is(
  .um-workspace-disclosure,#s3AddCollectionDrawer,#s3UxHomeDetails,#s3AdvancedCollectionDrawer
)[open] > summary :is(.um-workspace-chevron,.s3-v2-drawer-chev,.s3-ux-home-chevron){
  transform:rotate(180deg)!important;
}
#step-3.s3-experience-v2[data-um-s3-cards-unified] #s3AddCollectionMeta{display:none!important}
#step-3.s3-experience-v2[data-um-s3-cards-unified] #presetsPanel>.s3-kaptain-launch{
  display:flex!important;min-height:60px!important;margin:0 0 14px!important;
  padding:9px 12px!important;gap:10px!important;border-radius:11px!important;
  border:1px solid var(--s3card-border)!important;
  background:var(--s3card-soft)!important;color:var(--s3card-title)!important;
}
#step-3.s3-experience-v2[data-um-s3-cards-unified] #presetsPanel>.s3-kaptain-launch .s3-kaptain-launch-mark{
  width:34px!important;height:34px!important;border-radius:9px!important;
  font-size:18px!important;
}
#step-3.s3-experience-v2[data-um-s3-cards-unified] #presetsPanel>.s3-kaptain-launch strong{font-size:13px!important}
#step-3.s3-experience-v2[data-um-s3-cards-unified] #presetsPanel>.s3-kaptain-launch small{font-size:11px!important}
@media(max-width:380px){
  #step-3.s3-experience-v2[data-um-s3-cards-unified] > :is(
    .um-workspace-disclosure,#s3AddCollectionDrawer,#s3UxHomeDetails,#s3AdvancedCollectionDrawer
  ) > summary{
    grid-template-columns:38px minmax(0,1fr) 28px!important;
    min-height:96px!important;gap:9px!important;padding:10px 11px!important;
  }
  #step-3.s3-experience-v2[data-um-s3-cards-unified] .um-s3-card-icon{width:38px!important;height:38px!important}
  #step-3.s3-experience-v2[data-um-s3-cards-unified] > :is(
    .um-workspace-disclosure,#s3AddCollectionDrawer,#s3UxHomeDetails,#s3AdvancedCollectionDrawer
  ) > summary :is(.um-workspace-chevron,.s3-v2-drawer-chev,.s3-ux-home-chevron){width:28px!important;height:28px!important}
}
@media(prefers-reduced-motion:reduce){
  #step-3.s3-experience-v2[data-um-s3-cards-unified] > :is(.um-workspace-disclosure,#s3AddCollectionDrawer,#s3UxHomeDetails,#s3AdvancedCollectionDrawer) > summary :is(.um-workspace-chevron,.s3-v2-drawer-chev,.s3-ux-home-chevron){transition:none!important}
}