/* UltraMAX DEV • Collections Manager workspace v1
   Shared compact geometry for Classic + Refined. Styling only: no new
   storage, mutations or replacing the existing collection handlers.
 */
#step-3 .s3-editor-zone {
  --cm-border:var(--border2,#3a334f);
  --cm-paper:var(--card,#171325);
  --cm-soft:var(--surface-soft,#241c36);
  --cm-ink:var(--text,#f6f1ff);
  --cm-muted:var(--muted,#b3a9c5);
  --cm-accent:var(--violet2,#bb9af7);
}
#step-3 .s3-editor-zone .coll-sticky-bar {
  position:relative !important;
  top:auto !important;
  margin:8px 0 13px !important;
  padding:0 !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}
#step-3 .s3-editor-zone #collSearch {
  display:block;
  width:100%;
  min-width:0;
  min-height:46px !important;
  padding:10px 12px !important;
  border:1px solid var(--cm-border) !important;
  border-radius:12px !important;
  background:var(--cm-soft) !important;
  color:var(--cm-ink) !important;
  box-shadow:none !important;
  font-size:13px !important;
}
#step-3 .s3-editor-zone #collections-list {
  display:flex;
  flex-direction:column;
  gap:8px !important;
}
#step-3 .s3-editor-zone .collection-card {
  margin:0 !important;
  border:1px solid var(--cm-border) !important;
  border-radius:14px !important;
  background:var(--cm-paper) !important;
  background-image:none !important;
  box-shadow:none !important;
  overflow:hidden !important;
}
#step-3 .s3-editor-zone .collection-summary {
  min-height:66px !important;
  padding:9px 12px !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  background-image:none !important;
  box-shadow:none !important;
}
#step-3 .s3-editor-zone .collection-thumbnail,
#step-3 .s3-editor-zone .folder-thumbnail {
  width:44px !important;
  min-width:44px !important;
  height:44px !important;
  border-radius:10px !important;
  object-fit:cover !important;
}
#step-3 .s3-editor-zone .collection-title,
#step-3 .s3-editor-zone .folder-title {
  color:var(--cm-ink) !important;
  -webkit-text-fill-color:var(--cm-ink) !important;
  line-height:1.3 !important;
  font-size:14px !important;
  font-weight:750 !important;
}
#step-3 .s3-editor-zone :is(.collection-meta,.folder-meta) {
  color:var(--cm-muted) !important;
  -webkit-text-fill-color:var(--cm-muted) !important;
  font-size:11px !important;
  line-height:1.3 !important;
}
#step-3 .s3-editor-zone .collection-card.is-expanded .collection-body {
  padding:10px !important;
  background:transparent !important;
  border-top:1px solid var(--cm-border) !important;
}
#step-3 .s3-editor-zone :is(.collection-action-toolbar,.folder-action-toolbar) {
  display:flex !important;
  flex-wrap:wrap !important;
  align-items:center !important;
  gap:6px !important;
  margin:0 0 10px !important;
}
#step-3 .s3-editor-zone :is(.collection-action-toolbar,.folder-action-toolbar) > button {
  min-height:37px !important;
  padding:7px 10px !important;
  font-size:11px !important;
  border-radius:9px !important;
  background:var(--cm-soft) !important;
  color:var(--cm-ink) !important;
  box-shadow:none !important;
  border:1px solid var(--cm-border) !important;
}
#step-3 .s3-editor-zone .folder-action-toolbar > .um-folder-move {
  min-width:37px;
  padding:6px 9px !important;
  font-size:15px !important;
}
#step-3 .s3-editor-zone .folder-action-toolbar > button:disabled {
  opacity:.3 !important;
  pointer-events:none !important;
}
#step-3 .s3-editor-zone .folder-action-toolbar > .um-folder-artwork-quick {
  color:var(--cm-accent) !important;
}
#step-3 .s3-editor-zone .folder-card {
  border:1px solid var(--cm-border) !important;
  background:var(--cm-soft) !important;
  border-radius:11px !important;
  margin:0 0 7px !important;
  overflow:hidden;
  box-shadow:none !important;
}
#step-3 .s3-editor-zone .folder-summary {
  min-height:59px !important;
  padding:7px 10px !important;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
}
#step-3 .s3-editor-zone .folder-body {
  padding:10px !important;
  border-top:1px solid var(--cm-border) !important;
  background:var(--cm-paper) !important;
}
#step-3 .s3-editor-zone .collection-visuals {
  margin:0 0 11px !important;
  padding:0 !important;
  border:1px solid var(--cm-border) !important;
  background:var(--cm-paper) !important;
  border-radius:10px !important;
  box-shadow:none !important;
}
#step-3 .s3-editor-zone .collection-subsection-header {
  min-height:48px !important;
  padding:10px !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  color:var(--cm-ink) !important;
}
#step-3 .s3-editor-zone .collection-rows {
  padding:0 !important;
  margin:0 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}
#step-3 .s3-editor-zone .collection-rows-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin:0 0 7px !important;
  color:var(--cm-muted) !important;
  font-size:11px !important;
}
#step-3 .s3-editor-zone .um-folder-row-toolbar {
  display:flex;
  align-items:center;
  gap:8px;
  margin:0 0 9px;
}
#step-3 .s3-editor-zone .um-folder-row-search {
  display:block;
  flex:1 1 auto;
  min-width:0;
  min-height:42px;
  border:1px solid var(--cm-border);
  border-radius:10px;
  color:var(--cm-ink);
  background:var(--cm-soft);
  font:inherit;
  font-size:12px;
  padding:8px 10px;
}
#step-3 .s3-editor-zone .um-folder-row-count {
  flex:0 0 auto;
  font-size:10px;
  color:var(--cm-muted);
}
#step-3 .s3-editor-zone .collection-row-list {
  display:flex;
  flex-direction:column;
  gap:0 !important;
  padding:0 !important;
  margin:0 0 10px !important;
  background:var(--cm-paper);
  border:1px solid var(--cm-border);
  border-radius:11px;
  overflow:hidden;
}
#step-3 .s3-editor-zone .collection-row-item {
  min-height:43px !important;
  margin:0 !important;
  padding:6px 8px 6px 12px !important;
  display:flex !important;
  align-items:center !important;
  background:transparent !important;
  background-image:none !important;
  border:0 !important;
  border-bottom:1px solid var(--cm-border) !important;
  border-radius:0 !important;
  box-shadow:none !important;
  gap:7px !important;
}
#step-3 .s3-editor-zone .collection-row-item:last-child {
  border-bottom:0 !important;
}
#step-3 .s3-editor-zone .folder-row-label {
  min-width:0 !important;
  flex:1 1 auto !important;
  color:var(--cm-ink) !important;
  -webkit-text-fill-color:var(--cm-ink) !important;
  text-overflow:ellipsis;
  white-space:nowrap !important;
  overflow:hidden;
  font-size:11px !important;
}
#step-3 .s3-editor-zone .folder-row-remove {
  flex:0 0 34px !important;
  width:34px !important;
  height:34px !important;
  min-width:34px !important;
  padding:0 !important;
  border-radius:9px !important;
}
#step-3 .s3-editor-zone .um-folder-more {
  width:100%;
  min-height:42px !important;
  background:var(--cm-soft) !important;
  border:0 !important;
  border-radius:0 !important;
  color:var(--cm-accent) !important;
  font-size:12px !important;
}
#step-3 .s3-editor-zone .um-folder-more:hover {
  filter:brightness(1.08);
}
#step-3 .s3-editor-zone .collection-add-row {
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto !important;
  gap:7px !important;
  padding:10px 0 0 !important;
  background:transparent !important;
}
#step-3 .s3-editor-zone .collection-add-row > :is(.collection-row-search,select) {
  grid-column:1 / -1;
  width:100% !important;
  min-width:0 !important;
  min-height:42px !important;
  border:1px solid var(--cm-border) !important;
  border-radius:10px !important;
  background:var(--cm-soft) !important;
  color:var(--cm-ink) !important;
  font-size:12px !important;
}
#step-3 .s3-editor-zone .collection-add-row > button {
  grid-column:2;
  justify-self:end;
  min-height:42px;
}
#step-3 .s3-editor-zone :is(.um-folder-row-search,.collection-row-search,#collSearch):focus-visible {
  outline:2px solid var(--cm-accent) !important;
  outline-offset:2px !important;
}
/* Theme vars must be set on the same subtree where the controls live. */
html.um-refined[data-um-appearance="refined-light"] body #step-3 .s3-editor-zone,
html.um-refined[data-um-appearance="system"] body.light-mode #step-3 .s3-editor-zone {
  --cm-border:#dce3ed;--cm-paper:#fff;--cm-soft:#f5f7fa;
  --cm-ink:#202b3b;--cm-muted:#57667a;--cm-accent:#6255be;
}
html.um-refined[data-um-appearance="refined-dark"] body #step-3 .s3-editor-zone,
html.um-refined[data-um-appearance="system"] body:not(.light-mode) #step-3 .s3-editor-zone {
  --cm-border:#364153;--cm-paper:#202632;--cm-soft:#2a3140;
  --cm-ink:#eef1f7;--cm-muted:#b2bdce;--cm-accent:#b5a4f4;
}
@media(max-width:600px) {
  #step-3 .s3-editor-zone .collection-card.is-expanded .collection-body {padding:8px !important;}
  #step-3 .s3-editor-zone .folder-body {padding:8px !important;}
  #step-3 .s3-editor-zone .um-folder-row-count {font-size:9px;}
  #step-3 .s3-editor-zone .folder-action-toolbar {gap:5px !important;}
}

/* Step 3: searchable batch row picker. Works in app, mobile and light/dark themes. */
#step-3 .collection-add-row.collection-add-row-multi {
  display:flex;
  flex-direction:column;
  gap:10px;
}
#step-3 .collection-add-row-multi .collection-row-search {
  width:100%;
  grid-column:auto;
}
#step-3 .collection-row-picker-toolbar {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
}
#step-3 .collection-row-picker-status {
  flex:1 1 150px;
  color:var(--cm-muted, var(--muted));
  font-size:.82rem;
}
#step-3 .collection-row-picker-toolbar .global-btn {
  min-height:40px;
  padding:8px 12px;
}
#step-3 .collection-row-picker-toolbar button:disabled,
#step-3 .collection-row-add-selected:disabled {
  opacity:.5;
  cursor:default;
}
#step-3 .collection-row-picker-results {
  display:flex;
  flex-direction:column;
  gap:4px;
  max-height:270px;
  overflow-y:auto;
  padding:7px;
  border:1px solid var(--cm-border, var(--border));
  border-radius:12px;
  background:var(--cm-paper, var(--card));
}
#step-3 .collection-row-choice {
  display:flex;
  align-items:center;
  gap:12px;
  min-height:48px;
  padding:10px 12px;
  border:1px solid transparent;
  border-radius:9px;
  color:var(--cm-ink, var(--text));
  font-size:.9rem;
  line-height:1.35;
  cursor:pointer;
}
#step-3 .collection-row-choice:hover,
#step-3 .collection-row-choice:focus-within {
  background:rgba(138,113,206,.10);
}
#step-3 .collection-row-choice.is-selected {
  background:rgba(138,113,206,.15);
  border-color:var(--cm-border, var(--border2));
}
#step-3 .collection-row-choice span {
  min-width:0;
  overflow-wrap:anywhere;
}
#step-3 .collection-add-row-multi .collection-row-choice input[type="checkbox"] {
  flex:0 0 20px;
  width:20px;
  height:20px;
  min-height:20px;
  margin:0;
  padding:0;
  border-radius:4px;
  background:transparent;
  box-shadow:none;
  accent-color:var(--cm-accent, var(--violet2));
  cursor:pointer;
}
#step-3 .collection-row-picker-empty {
  padding:14px 12px;
  color:var(--cm-muted, var(--muted));
  font-size:.85rem;
}
#step-3 .collection-row-add-selected {
  align-self:flex-end;
  min-width:170px;
}
body.light-mode #step-3 .collection-row-picker-results {
  background:var(--input-bg) !important;
  border-color:var(--cm-border, var(--border2)) !important;
}
body.light-mode #step-3 .collection-row-choice {
  color:var(--cm-ink, var(--text)) !important;
}
body.light-mode #step-3 .collection-row-choice.is-selected {
  background:rgba(111,83,185,.12) !important;
}
/* Batch picker mobile layout: override older grid-based Step 3 styles. */
#step-3 .s3-editor-zone .collection-add-row.collection-add-row-multi {
  display:flex !important;
  flex-direction:column !important;
  grid-template-columns:none !important;
  align-items:stretch !important;
  width:100% !important;
  min-width:0 !important;
  gap:9px !important;
  padding:12px 0 0 !important;
  box-sizing:border-box;
}
#step-3 .s3-editor-zone .collection-add-row-multi > * {
  grid-column:auto !important;
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
  box-sizing:border-box;
}
#step-3 .s3-editor-zone .collection-add-row-multi > .collection-row-search {
  min-height:46px !important;
  padding:10px 12px !important;
  font-size:14px !important;
}
#step-3 .s3-editor-zone .collection-add-row-multi .collection-row-picker-toolbar {
  display:flex !important;
  align-items:center !important;
  flex-wrap:wrap !important;
  gap:7px !important;
  padding:0 !important;
}
#step-3 .s3-editor-zone .collection-add-row-multi .collection-row-picker-status {
  flex:1 1 90px !important;
  min-width:78px !important;
  color:var(--cm-muted) !important;
  font-size:12px !important;
  line-height:1.3 !important;
  overflow-wrap:anywhere;
}
#step-3 .s3-editor-zone .collection-add-row-multi .collection-row-picker-toolbar > button {
  flex:0 0 auto !important;
  grid-column:auto !important;
  justify-self:auto !important;
  width:auto !important;
  min-width:0 !important;
  min-height:34px !important;
  margin:0 !important;
  padding:6px 10px !important;
  border:1px solid var(--cm-border) !important;
  border-radius:8px !important;
  background:var(--cm-soft) !important;
  color:var(--cm-ink) !important;
  -webkit-text-fill-color:var(--cm-ink) !important;
  font-size:11px !important;
  font-weight:600 !important;
  white-space:nowrap !important;
  box-shadow:none !important;
}
#step-3 .s3-editor-zone .collection-add-row-multi .collection-row-picker-results {
  width:100% !important;
  min-height:0 !important;
  max-height:268px !important;
  overflow-x:hidden !important;
  overflow-y:auto !important;
  padding:5px !important;
  border:1px solid var(--cm-border) !important;
  border-radius:10px !important;
  background:var(--cm-paper) !important;
}
#step-3 .s3-editor-zone .collection-add-row-multi .collection-row-picker-toolbar[hidden],
#step-3 .s3-editor-zone .collection-add-row-multi .collection-row-picker-results[hidden],
#step-3 .s3-editor-zone .collection-add-row-multi .collection-row-picker-toolbar > button[hidden],
#step-3 .s3-editor-zone .collection-add-row-multi > .collection-row-add-selected[hidden] {
  display:none !important;
}
#step-3 .s3-editor-zone .collection-add-row-multi .collection-row-choice {
  display:flex !important;
  align-items:center !important;
  width:100% !important;
  min-height:45px !important;
  padding:10px 11px !important;
  gap:12px !important;
  border-radius:8px !important;
  font-size:13px !important;
  line-height:1.35 !important;
  color:var(--cm-ink) !important;
  box-sizing:border-box;
}
#step-3 .s3-editor-zone .collection-add-row-multi .collection-row-choice > input[type="checkbox"] {
  flex:0 0 20px !important;
  width:20px !important;
  height:20px !important;
  min-width:20px !important;
  min-height:20px !important;
  padding:0 !important;
  margin:0 !important;
  accent-color:var(--cm-accent) !important;
}
#step-3 .s3-editor-zone .collection-add-row-multi .collection-row-choice > span {
  flex:1 1 auto;
  min-width:0;
  overflow-wrap:anywhere;
}
#step-3 .s3-editor-zone .collection-add-row-multi > .collection-row-add-selected {
  align-self:stretch !important;
  justify-self:stretch !important;
  grid-column:auto !important;
  min-height:44px !important;
  margin:0 !important;
  padding:9px 12px !important;
  border-radius:10px !important;
  background:var(--cm-accent) !important;
  color:var(--cm-paper) !important;
  -webkit-text-fill-color:var(--cm-paper) !important;
  font-size:13px !important;
  font-weight:700 !important;
  text-align:center !important;
  box-shadow:none !important;
}