/* UltraMAX DEV – Refined Dark mobile polish v3
   Dark surfaces should be charcoal, not a patchwork of purple gradients.
   Classic and Refined Light are intentionally not matched.
   Cosmetic only: original click / save / generation handlers remain.
*/
html.um-refined:not([data-um-appearance="refined-light"]) body:not(.light-mode) {
  --rx-bg:#11171e;--rx-surface:#202832;--rx-soft:#283340;
  --rx-ink:#f0f4f8;--rx-secondary:#b6c1cf;--rx-border:#394654;
  --rx-accent:#b8c5d2;--rx-accent-soft:#303d4a;--rx-focus:#8eaac3;
  --violet2:#b8c5d2;--card:#202832;--border:#394654;--border2:#394654;
  --text:#f0f4f8;--muted:#b6c1cf;--hover:#283340;
  background:#11171e !important;
}
html.um-refined:not([data-um-appearance="refined-light"]) body:not(.light-mode) :is(#step-2,#step-3,#step-4) {
  --flow-bg:#11171e;--flow-panel:#202832;--flow-soft:#283340;
  --flow-border:#394654;--flow-secondary:#b6c1cf;--flow-ink:#f0f4f8;
  --flow-accent:#b8c5d2;--flow-tint:#303d4a;
  --cm-border:#394654;--cm-paper:#202832;--cm-soft:#283340;
  --cm-ink:#f0f4f8;--cm-muted:#b6c1cf;--cm-accent:#b8c5d2;
  padding-bottom:calc(152px + env(safe-area-inset-bottom)) !important;
}
html.um-refined:not([data-um-appearance="refined-light"]) body:not(.light-mode) #step-1{
 padding-bottom:calc(152px + env(safe-area-inset-bottom)) !important;
}
/* Shared dark layout: neutral surfaces and borders, subtle accent text. */
html.um-refined:not([data-um-appearance="refined-light"]) body:not(.light-mode)
 :is(#step-1,#step-2,#step-3,#step-4) :is(
 .um-step-header,.s2-play-stage,.s2-review-zone,.s2-manage-zone,
 .s3-play-stage,.s3-v2-layout-section,.s3-v2-drawer,.s3-v2-home-layout,
 .s3-hero-master,.s3-import-utility,.s3-manage-zone,.s3-v2-layout-collection,
 .s3-v2-layout-row,.collection-bottom-area,.collection-compare-panel,
 .collection-card,.folder-card,.collection-visuals,
 .s4-nuvio-primary-card,.install-status-card,.result-section,
 .step3-export-section,.s2-nav-card,.s2-final-check,
 .s3-v2-layout-collection,.s3-blank-collection-action
 ) {
  background-color:var(--flow-panel,#202832) !important;
  background-image:none !important;
  border-color:var(--flow-border,#394654) !important;
  box-shadow:none !important;
}
html.um-refined:not([data-um-appearance="refined-light"]) body:not(.light-mode)
 :is(#step-1,#step-2,#step-3,#step-4) :is(
 .s2-review-zone,.s3-editor-zone,.s3-play-stage,.s3-workspace-panel,
 .s2-play-stage,.s2-manage-zone,.s3-presets-experience
 ) {
  background:transparent !important;
  border:0 !important;box-shadow:none !important;
}
html.um-refined:not([data-um-appearance="refined-light"]) body:not(.light-mode)
 :is(#step-1,#step-2,#step-3,#step-4) :is(
 .um-step-eyebrow,.s2-play-stage-kicker,.s2-quick-kicker,
 .s2-review-eyebrow,.s3-workspace-kicker,.s3-quick-kicker,
 .s3-v2-layout-label,.s3-quick-label,.s3-v2-drawer-kicker,
 .s3-v2-layout-kicker,.s4-nuvio-kicker,.result-label,.step3-export-heading
 ) {
  color:#b3c4d6 !important;
  -webkit-text-fill-color:#b3c4d6 !important;
}
html.um-refined:not([data-um-appearance="refined-light"]) body:not(.light-mode)
 :is(#step-1,#step-2,#step-3,#step-4) :is(
 .s3-v2-drawer-icon,.s3-v2-drawer-chev,.collection-pin-toggle,
 .collection-order-menu > summary,.s3-quick-action,.s3-blank-collection-action,
 .s2-tool-icon,.s2-utility-icon,.s2-preset-icon,
 .s2-phase-break,.s3-v2-layout-chip,.s3-v2-layout-summary span,
 .s2-preset-count,.summary-stat,.count-display
 ) {
  background:#293542 !important;
  background-image:none !important;
  border-color:#394654 !important;
  box-shadow:none !important;
  color:#becbd8 !important;-webkit-text-fill-color:#becbd8 !important;
}
/* Step 2: consistent 96px poster rail, no oversized strips. */
html.um-refined:not([data-um-appearance="refined-light"]) body:not(.light-mode)
 #step-2 #s2PresetsGrid.s2-presets-experience .s2-preset {
  min-height:90px !important;
  grid-template-columns:92px minmax(0,1fr) !important;
  border-color:#394654 !important;
  background:#202832 !important;
}
html.um-refined:not([data-um-appearance="refined-light"]) body:not(.light-mode)
 #step-2 #s2PresetsGrid.s2-presets-experience .s2-preset-strip {
  min-height:90px !important;max-height:118px !important;width:92px !important;
}
html.um-refined:not([data-um-appearance="refined-light"]) body:not(.light-mode)
 #step-2 #s2PresetsGrid.s2-presets-experience .s2-preset-body {
  min-height:90px !important;padding:9px 11px !important;
}
html.um-refined:not([data-um-appearance="refined-light"]) body:not(.light-mode)
 #step-2 :is(.s2-manage-zone,.s2-review-zone,.s2-final-check) :is(
 .s2-utility-cta,.s2-tool-panel,.s2-preset-drawer,.s2-final-count,.s2-nav-card
 ) {
  background:#202832 !important;border-color:#394654 !important;
  box-shadow:none !important;
}
html.um-refined:not([data-um-appearance="refined-light"]) body:not(.light-mode)
 #step-2 .s2-review-actions > button:not(.primary),
html.um-refined:not([data-um-appearance="refined-light"]) body:not(.light-mode)
 #step-2 .s2-nav-card-back {
  background:#283340 !important;border-color:#394654 !important;
  color:#f0f4f8 !important;box-shadow:none !important;
}
/* Step 3: one compact collection row with no free-floating pin/menu blocks. */
html.um-refined:not([data-um-appearance="refined-light"]) body:not(.light-mode)
 #step-3 .s3-editor-zone #collections-list {
  overflow:visible !important;
  border:1px solid #394654 !important;
  border-radius:14px !important;
  background:#202832 !important;
}
html.um-refined:not([data-um-appearance="refined-light"]) body:not(.light-mode)
 #step-3 .s3-editor-zone #collections-list > article.collection-card {
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto !important;
  grid-template-rows:auto auto !important;
  align-items:center !important;
  position:relative !important;
  width:100% !important;
  min-height:70px !important;
  margin:0 !important;padding:0 !important;
  border:0 !important;
  border-bottom:1px solid #394654 !important;
  border-radius:0 !important;
  overflow:visible !important;
  background:#202832 !important;
  box-shadow:none !important;
}
html.um-refined:not([data-um-appearance="refined-light"]) body:not(.light-mode)
 #step-3 .s3-editor-zone #collections-list > article.collection-card:last-child {
  border-bottom:0 !important;
}
html.um-refined:not([data-um-appearance="refined-light"]) body:not(.light-mode)
 #step-3 .s3-editor-zone .collection-drag-handle {
  top:50% !important;left:9px !important;
  transform:translateY(-50%) !important;
  height:36px !important;width:18px !important;
  display:flex !important;align-items:center !important;
  z-index:2 !important;
}
html.um-refined:not([data-um-appearance="refined-light"]) body:not(.light-mode)
 #step-3 .s3-editor-zone .collection-card.is-expanded > .collection-drag-handle {
  top:35px !important;
}
html.um-refined:not([data-um-appearance="refined-light"]) body:not(.light-mode)
 #step-3 .s3-editor-zone .collection-card > button.collection-summary {
  grid-column:1 !important;grid-row:1 !important;
  display:grid !important;
  grid-template-columns:18px 44px minmax(0,1fr) 14px !important;
  align-items:center !important;gap:8px !important;
  width:100% !important;min-width:0 !important;
  min-height:69px !important;height:auto !important;
  padding:9px 2px 9px 10px !important;
  background:transparent !important;border:0 !important;
  box-shadow:none !important;
}
html.um-refined:not([data-um-appearance="refined-light"]) body:not(.light-mode)
 #step-3 .s3-editor-zone .collection-drag-spacer {
  width:18px !important;
}
html.um-refined:not([data-um-appearance="refined-light"]) body:not(.light-mode)
 #step-3 .s3-editor-zone .collection-card .collection-summary-content{
  min-width:0 !important;
  overflow:hidden !important;
}
html.um-refined:not([data-um-appearance="refined-light"]) body:not(.light-mode)
 #step-3 .s3-editor-zone .collection-card .collection-title{
  line-height:1.25 !important;font-size:13px !important;
}
html.um-refined:not([data-um-appearance="refined-light"]) body:not(.light-mode)
 #step-3 .s3-editor-zone .collection-card .collection-meta{
  line-height:1.3 !important;font-size:10px !important;
}
html.um-refined:not([data-um-appearance="refined-light"]) body:not(.light-mode)
 #step-3 .s3-editor-zone .collection-card .collection-thumbnail{
  width:44px !important;height:44px !important;min-width:44px !important;
  object-fit:cover !important;object-position:center !important;
  border-radius:10px !important;
}
html.um-refined:not([data-um-appearance="refined-light"]) body:not(.light-mode)
 #step-3 .s3-editor-zone .collection-card .collection-chevron{
  width:14px !important;height:30px !important;font-size:17px !important;
}
html.um-refined:not([data-um-appearance="refined-light"]) body:not(.light-mode)
 #step-3 .s3-editor-zone .collection-card > .collection-quick-actions {
  grid-column:2 !important;grid-row:1 !important;
  display:flex !important;align-items:center !important;
  gap:4px !important;
  margin:0 !important;padding:0 9px 0 3px !important;
  width:auto !important;min-width:0 !important;
  position:relative !important;
  z-index:4 !important;
  background:transparent !important;
}
html.um-refined:not([data-um-appearance="refined-light"]) body:not(.light-mode)
 #step-3 .s3-editor-zone .collection-card .collection-quick-actions :is(
 .collection-pin-toggle,.collection-order-menu > summary
 ) {
  display:grid !important;place-items:center !important;
  flex:0 0 35px !important;
  width:35px !important;height:35px !important;min-width:35px !important;
  min-height:35px !important;max-height:35px !important;
  padding:0 !important;margin:0 !important;
  border:1px solid #394654 !important;
  border-radius:10px !important;
  background:#293542 !important;
  color:#bfcbd8 !important;
  box-shadow:none !important;font-size:16px !important;
}
html.um-refined:not([data-um-appearance="refined-light"]) body:not(.light-mode)
 #step-3 .s3-editor-zone .collection-card .collection-quick-actions .collection-pin-toggle.is-pinned {
  border-color:#537d72 !important;color:#7bd4b3 !important;
  background:#263d3a !important;
}
html.um-refined:not([data-um-appearance="refined-light"]) body:not(.light-mode)
 #step-3 .s3-editor-zone .collection-card .collection-order-menu{
  position:relative !important;
}
html.um-refined:not([data-um-appearance="refined-light"]) body:not(.light-mode)
 #step-3 .s3-editor-zone .collection-card .collection-order-menu-popover {
  position:absolute !important;right:0 !important;
  min-width:175px !important;z-index:20 !important;
  background:#283340 !important;border:1px solid #394654 !important;
  border-radius:10px !important;box-shadow:0 6px 20px rgba(0,0,0,.25) !important;
}
html.um-refined:not([data-um-appearance="refined-light"]) body:not(.light-mode)
 #step-3 .s3-editor-zone .collection-card > .collection-body {
  grid-column:1 / -1 !important;grid-row:2 !important;
  margin:0 !important;padding:10px !important;
  background:#202832 !important;
  border-top:1px solid #394654 !important;
}
html.um-refined:not([data-um-appearance="refined-light"]) body:not(.light-mode)
 #step-3 :is(.s3-v2-layout-section,.s3-v2-layout-collection,.s3-v2-layout-row) {
  background:#202832 !important;border-color:#394654 !important;
  box-shadow:none !important;
}
/* Secondary work flows are flat, not outlined purple feature tiles. */
html.um-refined:not([data-um-appearance="refined-light"]) body:not(.light-mode)
 #step-3 :is(.s3-v2-drawer,.s3-v2-drawer > summary,.s3-v2-home-layout,
 .s3-v2-layout-section,.s3-import-utility,.s3-hero-master,
 .collection-bottom-area,.s3-v2-layout-collection){
  border-color:#394654 !important;
  background:#202832 !important;background-image:none !important;
  box-shadow:none !important;
}
html.um-refined:not([data-um-appearance="refined-light"]) body:not(.light-mode)
 #step-3 :is(.s3-v2-drawer-copy strong,.s3-v2-home-layout-head h2){
  color:#f0f4f8 !important;-webkit-text-fill-color:#f0f4f8 !important;
}
html.um-refined:not([data-um-appearance="refined-light"]) body:not(.light-mode)
 #step-3 :is(.s3-v2-drawer-copy small,.s3-v2-home-layout-head p) {
  color:#b6c1cf !important;-webkit-text-fill-color:#b6c1cf !important;
}
/* Step 3 Finish / Step 4 Generate / Install use one professional blue CTA. */
html.um-refined:not([data-um-appearance="refined-light"]) body:not(.light-mode)
 :is(#step-1,#step-2,#step-3,#step-4) :is(
 .step4-action-primary,.s2-nav-card-next,
 .nav-btn.primary,.rbtn.primary,.guided-next,.next-btn,
 #nuvio-confirm-btn
 ) {
  background:#47749b !important;background-image:none !important;
  border:1px solid #5c83a6 !important;color:#fff !important;
  -webkit-text-fill-color:#fff !important;box-shadow:none !important;
  text-shadow:none !important;
}
html.um-refined:not([data-um-appearance="refined-light"]) body:not(.light-mode)
 #step-4 #genBtn {
  display:flex !important;align-items:center !important;justify-content:center !important;
  min-height:54px !important;height:auto !important;
  padding:11px 51px 11px 16px !important;
  margin:10px 0 14px !important;
  border-radius:12px !important;
  font-family:Inter,system-ui,sans-serif !important;
  font-weight:750 !important;font-size:14px !important;letter-spacing:0 !important;
  background:#47749b !important;background-image:none !important;
  border:1px solid #5c83a6 !important;
  color:#fff !important;-webkit-text-fill-color:#fff !important;
  box-shadow:none !important;
}
html.um-refined:not([data-um-appearance="refined-light"]) body:not(.light-mode)
 #step-4 #genBtn::after {
  right:11px !important;width:29px !important;height:29px !important;
  border:0 !important;border-radius:8px !important;
  background:rgba(255,255,255,.12) !important;
  font-size:16px !important;
}
html.um-refined:not([data-um-appearance="refined-light"]) body:not(.light-mode)
 #step-4 #genBtn:is(:hover,:focus-visible) {
  background:#5685ae !important;filter:none !important;transform:none !important;
  box-shadow:none !important;
}
html.um-refined:not([data-um-appearance="refined-light"]) body:not(.light-mode)
 #step-4 #cacheWarmIndicator{
  background:#202e3b !important;border:1px solid #344b5b !important;
  color:#b9c8d7 !important;border-radius:11px !important;
  box-shadow:none !important;
}
html.um-refined:not([data-um-appearance="refined-light"]) body:not(.light-mode)
 #step-4 #cacheWarmIndicator .spinner{
  border-color:#465768 !important;border-top-color:#8aa9c8 !important;
}
html.um-refined:not([data-um-appearance="refined-light"]) body:not(.light-mode)
 #step-4 #pushToNuvioCard{
  background:#202832 !important;background-image:none !important;
  border:0 !important;box-shadow:none !important;
  padding:14px 10px !important;
}
html.um-refined:not([data-um-appearance="refined-light"]) body:not(.light-mode)
 #step-4 #s4NuvioConnectionState[data-state="connected"]{
  background:#243a37 !important;
  border-color:#38695d !important;
  color:#a9dfcd !important;
}
html.um-refined:not([data-um-appearance="refined-light"]) body:not(.light-mode)
 #step-4 :is(.s4-nuvio-profile-toggle,#s4NuvioCollectionManagerMount) {
  box-shadow:none !important;
}
html.um-refined:not([data-um-appearance="refined-light"]) body:not(.light-mode)
 #step-4 :is(.s4-nuvio-install-actions,.s4-nuvio-profile-summary){
  margin:10px 0 !important;
}
html.um-refined:not([data-um-appearance="refined-light"]) body:not(.light-mode)
 #step-4 #nuvio-confirm-btn {
  min-height:46px !important;border-radius:10px !important;
}
html.um-refined:not([data-um-appearance="refined-light"]) body:not(.light-mode)
 #step-4 #resultBox .url-display {
  border:1px solid #394654 !important;background:#151d27 !important;
  color:#d1dde9 !important;
}
/* Save purple ONLY for selected navigation. No glowing surround. */
html.um-app-mode.um-refined:not([data-um-appearance="refined-light"]) body:not(.light-mode)
 .um-build-bottom-nav {
  height:64px !important;padding:6px 8px !important;
  background:#202832 !important;background-image:none !important;
  border:1px solid #394654 !important;
  box-shadow:0 4px 17px rgba(0,0,0,.17) !important;
  backdrop-filter:none !important;-webkit-backdrop-filter:none !important;
}
html.um-app-mode.um-refined:not([data-um-appearance="refined-light"]) body:not(.light-mode)
 .um-build-bottom-nav a {
  color:#aebaca !important;-webkit-text-fill-color:#aebaca !important;
  background:transparent !important;box-shadow:none !important;
}
html.um-app-mode.um-refined:not([data-um-appearance="refined-light"]) body:not(.light-mode)
 .um-build-bottom-nav a.active {
  color:#c1b6ee !important;-webkit-text-fill-color:#c1b6ee !important;
  background:#37364e !important;background-image:none !important;
  border-color:transparent !important;box-shadow:none !important;
}
/* Compact appearance menu; keep choice visible without becoming a full-screen card. */
html.um-refined:not([data-um-appearance="refined-light"]) body:not(.light-mode)
 #umAppearanceChoices.um-appearance-choices{
  width:min(278px,calc(100vw - 30px)) !important;
  padding:5px !important;
  background:#202832 !important;background-image:none !important;
  border:1px solid #394654 !important;border-radius:13px !important;
  box-shadow:0 10px 24px rgba(0,0,0,.18) !important;
}
html.um-refined:not([data-um-appearance="refined-light"]) body:not(.light-mode)
 #umAppearanceChoices.um-appearance-choices > button{
  min-height:50px !important;
  padding:8px 11px !important;
  gap:2px !important;border:0 !important;
  border-radius:9px !important;
  color:#eef2f7 !important;
  background:transparent !important;
}
html.um-refined:not([data-um-appearance="refined-light"]) body:not(.light-mode)
 #umAppearanceChoices.um-appearance-choices > button :is(strong,small){
  line-height:1.3 !important;
  color:inherit !important;-webkit-text-fill-color:currentColor !important;
}
html.um-refined:not([data-um-appearance="refined-light"]) body:not(.light-mode)
 #umAppearanceChoices.um-appearance-choices > button small{
  color:#aebdca !important;-webkit-text-fill-color:#aebdca !important;
}
html.um-refined:not([data-um-appearance="refined-light"]) body:not(.light-mode)
 #umAppearanceChoices.um-appearance-choices > button.is-selected {
  background:#303c4b !important;border:0 !important;
}
@media(max-width:480px){
  html.um-refined:not([data-um-appearance="refined-light"]) body:not(.light-mode)
  #step-3 .s3-editor-zone .collection-card > button.collection-summary {
    grid-template-columns:14px 40px minmax(0,1fr) 11px !important;
    padding-left:8px !important;gap:7px !important;
  }
  html.um-refined:not([data-um-appearance="refined-light"]) body:not(.light-mode)
  #step-3 .s3-editor-zone .collection-card .collection-thumbnail {
    width:40px !important;height:40px !important;min-width:40px !important;
  }
  html.um-refined:not([data-um-appearance="refined-light"]) body:not(.light-mode)
  #step-3 .s3-editor-zone .collection-card > .collection-quick-actions {
    padding-right:6px !important;gap:3px !important;
  }
  html.um-refined:not([data-um-appearance="refined-light"]) body:not(.light-mode)
  #step-3 .s3-editor-zone .collection-card .collection-quick-actions :is(
  .collection-pin-toggle,.collection-order-menu > summary) {
    width:31px !important;height:34px !important;
    min-width:31px !important;min-height:34px !important;
    flex-basis:31px !important;
  }
}

/* ------------------------------------------------------------------
   DEV refined-dark v4: correct the cause of the blank second rows.
   Collapsed collection-body uses [hidden], which legacy display:flex
   overrides. Fix that first, then align all three header controls.
------------------------------------------------------------------ */
html.um-refined:not([data-um-appearance="refined-light"]) body:not(.light-mode)
 #step-3 .collection-card > .collection-body[hidden],
html.um-refined:not([data-um-appearance="refined-light"]) body:not(.light-mode)
 #step-3 .folder-card > .folder-body[hidden] {
  display:none !important;
  height:0 !important; min-height:0 !important;
  margin:0 !important;padding:0 !important;border:0 !important;
}
html.um-refined:not([data-um-appearance="refined-light"]) body:not(.light-mode)
 #step-3 .s3-editor-zone #collections-list > article.collection-card {
  display:flex !important;
  flex-flow:row wrap !important;
  align-items:center !important;align-content:flex-start !important;
  justify-content:space-between !important;
  min-height:72px !important;height:auto !important;
  gap:0 !important;
}
html.um-refined:not([data-um-appearance="refined-light"]) body:not(.light-mode)
 #step-3 .s3-editor-zone #collections-list > article.collection-card.coll-collapsed {
  min-height:72px !important;
}
html.um-refined:not([data-um-appearance="refined-light"]) body:not(.light-mode)
 #step-3 .s3-editor-zone .collection-card > button.collection-summary {
  display:grid !important;
  flex:1 1 0 !important;
  width:auto !important;min-width:0 !important;max-width:calc(100% - 79px) !important;
  height:72px !important;min-height:72px !important;
  align-self:center !important;
  padding:9px 0 9px 10px !important;
  grid-template-columns:17px 44px minmax(0,1fr) 12px !important;
  gap:7px !important;
}
html.um-refined:not([data-um-appearance="refined-light"]) body:not(.light-mode)
 #step-3 .s3-editor-zone .collection-card > .collection-quick-actions {
  display:flex !important;flex:0 0 79px !important;
  align-items:center !important;justify-content:center !important;
  align-self:center !important;
  gap:4px !important;
  width:79px !important;height:72px !important;min-height:0 !important;
  padding:0 7px 0 0 !important;margin:0 !important;
  position:relative !important;
  border:0 !important;
}
html.um-refined:not([data-um-appearance="refined-light"]) body:not(.light-mode)
 #step-3 .s3-editor-zone .collection-card .collection-quick-actions .collection-order-menu {
  display:block !important;
  height:35px !important;max-height:35px !important;
  width:35px !important;min-width:35px !important;
  flex:0 0 35px !important;
  padding:0 !important;margin:0 !important;
}
html.um-refined:not([data-um-appearance="refined-light"]) body:not(.light-mode)
 #step-3 .s3-editor-zone .collection-card > .collection-body:not([hidden]){
  display:flex !important; flex:0 0 100% !important;
  width:100% !important;
}
html.um-refined:not([data-um-appearance="refined-light"]) body:not(.light-mode)
 #step-3 .s3-editor-zone .collection-card > .collection-drag-handle {
  top:36px !important;
  transform:translateY(-50%) !important;
}
html.um-refined:not([data-um-appearance="refined-light"]) body:not(.light-mode)
 #step-3 .s3-editor-zone #collections-list {
  border-radius:13px !important;
  overflow:visible !important;
}
html.um-refined:not([data-um-appearance="refined-light"]) body:not(.light-mode)
 #step-3 .s3-editor-zone .collection-card .collection-thumbnail {
  box-shadow:none !important;
}
html.um-refined:not([data-um-appearance="refined-light"]) body:not(.light-mode)
 #step-3 .s3-editor-zone .collection-card .collection-meta {
  white-space:normal !important;
}
/* The dark wizard header must never become a raised rectangle. */
html.um-refined:not([data-um-appearance="refined-light"]) body:not(.light-mode)
 :is(#step-2,#step-3,#step-4) > .um-step-header {
  background:transparent !important;
  background-image:none !important;
  border:0 !important;
  border-bottom:1px solid #394654 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  margin:4px 0 18px !important;
  padding:9px 2px 17px !important;
}
/* Step 3 home-layout preview: compact native-style lines, not tall pseudo-cards. */
html.um-refined:not([data-um-appearance="refined-light"]) body:not(.light-mode)
 #step-3 :is(.s3-v2-layout-row,.s3-v2-layout-collection) {
  min-height:35px !important;
  padding:7px 8px !important;
  margin:0 !important;
  border:0 !important;
  border-bottom:1px solid #394654 !important;
  border-radius:0 !important;
  box-shadow:none !important;
}
html.um-refined:not([data-um-appearance="refined-light"]) body:not(.light-mode)
 #step-3 :is(.s3-v2-layout-rows,.s3-v2-layout-collections,.s3-v2-layout-chips) {
  gap:0 !important;
}
html.um-refined:not([data-um-appearance="refined-light"]) body:not(.light-mode)
 #step-3 :is(.s3-v2-home-layout,.s3-v2-layout-section) {
  background:transparent !important;
  border-color:#394654 !important;
  box-shadow:none !important;
}
html.um-refined:not([data-um-appearance="refined-light"]) body:not(.light-mode)
 #step-3 :is(.s3-v2-layout-summary span,.s3-v2-layout-chip) {
  background:#263240 !important;border-color:#394654 !important;
  color:#bccad8 !important;
}
/* Strip the final legacy violet outlines from Step 1 and Step 2. */
html.um-refined:not([data-um-appearance="refined-light"]) body:not(.light-mode)
 #step-1 :is(.rx-step-actions,.rx-actions,.step1-final-actions,.step1-footer,.step1-bottom-actions,.nav-btns),
html.um-refined:not([data-um-appearance="refined-light"]) body:not(.light-mode)
 #step-2 :is(.s2-bottom-nav,.s2-review-actions) {
  background:transparent !important;
  background-image:none !important;
  border:0 !important;
  box-shadow:none !important;
}
html.um-refined:not([data-um-appearance="refined-light"]) body:not(.light-mode)
 #step-2 :is(.s2-step-summary-btn,.s2-step-preview-btn,.s2-nav-card-back) {
  background:#26313d !important;background-image:none !important;
  color:#e7eef6 !important;
  border:1px solid #394654 !important;
  box-shadow:none !important;
}
html.um-refined:not([data-um-appearance="refined-light"]) body:not(.light-mode)
 #step-2 :is(.s2-step-preview-btn,.s2-nav-card-next,.s2-nav-card-back) {
  border-radius:12px !important;
}
html.um-refined:not([data-um-appearance="refined-light"]) body:not(.light-mode)
 #step-2 :is(.s2-utility-cta,.s2-tool-panel-head,.s2-manage-item,.s2-tool-panel) {
  background:#202832 !important;background-image:none !important;
  border-color:#394654 !important;box-shadow:none !important;
}
html.um-refined:not([data-um-appearance="refined-light"]) body:not(.light-mode)
 #step-2 :is(.s2-utility-cta,.s2-manage-item,.s2-tool-panel):hover {
  border-color:#516174 !important;box-shadow:none !important;
}
/* Important notices belong below the fixed navigation's reading area,
   with safe-area-aware top offset and a width that doesn't cover fields. */
html.um-refined:not([data-um-appearance="refined-light"]) body:not(.light-mode) .banner-msg {
  top:calc(18px + env(safe-area-inset-top)) !important;
  width:min(340px,calc(100vw - 32px)) !important;
  min-width:0 !important;
  max-width:calc(100vw - 32px) !important;
  padding:10px 13px !important;
  background:#23313e !important;
  color:#f0f4f8 !important;
  border:1px solid #446779 !important;
  box-shadow:0 6px 22px rgba(0,0,0,.23) !important;
}
/* Keep the dock from covering last editable controls when reaching page bottom. */
html.um-app-mode.um-refined:not([data-um-appearance="refined-light"]) body:not(.light-mode)
 .um-main{
  padding-bottom:calc(116px + env(safe-area-inset-bottom)) !important;
}
@media(max-width:480px){
  html.um-refined:not([data-um-appearance="refined-light"]) body:not(.light-mode)
   #step-3 .s3-editor-zone .collection-card > button.collection-summary{
    grid-template-columns:13px 40px minmax(0,1fr) 10px !important;
    gap:6px !important;
    padding-left:8px !important;
  }
  html.um-refined:not([data-um-appearance="refined-light"]) body:not(.light-mode)
   #step-3 .s3-editor-zone .collection-card > .collection-quick-actions {
    width:75px !important;flex-basis:75px !important;
  }
  html.um-refined:not([data-um-appearance="refined-light"]) body:not(.light-mode)
   #step-3 .s3-editor-zone .collection-card > button.collection-summary{
    max-width:calc(100% - 75px) !important;
  }
  html.um-refined:not([data-um-appearance="refined-light"]) body:not(.light-mode)
   #step-3 .s3-editor-zone .collection-card .collection-quick-actions .collection-order-menu{
    width:31px !important;min-width:31px !important;
    flex-basis:31px !important;
  }
}

/* Correct actual Step 1 footer selector (legacy .nav-btns shell). */
html.um-refined:not([data-um-appearance="refined-light"]) body:not(.light-mode)
 #step-1 .s1-final-nav{
  background:transparent !important;background-image:none !important;
  border:0 !important;border-radius:0 !important;
  box-shadow:none !important;padding:10px 0 !important;
}
/* Preserve meaningful focus but remove decorative purple borders. */
html.um-refined:not([data-um-appearance="refined-light"]) body:not(.light-mode)
 #step-1 .s1-final-nav > .nav-btn:not(.primary),
html.um-refined:not([data-um-appearance="refined-light"]) body:not(.light-mode)
 #step-3 .collection-bottom-actions > .step4-action:not(.step4-action-primary),
html.um-refined:not([data-um-appearance="refined-light"]) body:not(.light-mode)
 #step-3 .collection-bottom-area :is(.count-display,#collCount,#folderCount) {
  background:#283340 !important;background-image:none !important;
  border-color:#394654 !important;color:#c6d1df !important;
  -webkit-text-fill-color:#c6d1df !important;
  box-shadow:none !important;
}
html.um-refined:not([data-um-appearance="refined-light"]) body:not(.light-mode)
 #step-3 .collection-bottom-area :is(#collCount,#folderCount){
  border-radius:9px !important;
}
html.um-refined:not([data-um-appearance="refined-light"]) body:not(.light-mode)
 #step-2 :is(.s2-nav-card-next,.s2-nav-card-next *) {
  box-shadow:none !important;
}
/* UltraMAX DEV • Refined Dark layout correctness patch v5
 * Fixes conflicting legacy absolute offsets on the collection header.
 * Keeps the existing handlers, collection data, and drag handle unchanged.
 */
html.um-refined:not([data-um-appearance="refined-light"]) body:not(.light-mode)
#step-3 .s3-editor-zone #collections-list > article.collection-card {
  display:flex !important;
  flex-flow:row wrap !important;
  align-items:center !important;
  justify-content:flex-start !important;
  align-content:flex-start !important;
  gap:0 !important;
  min-height:72px !important;
  height:auto !important;
  position:relative !important;
}
html.um-refined:not([data-um-appearance="refined-light"]) body:not(.light-mode)
#step-3 .s3-editor-zone #collections-list > article.collection-card > .collection-drag-handle {
  position:absolute !important;
  left:8px !important;
  right:auto !important;
  top:36px !important;
  bottom:auto !important;
  transform:translateY(-50%) !important;
  margin:0 !important;
}
html.um-refined:not([data-um-appearance="refined-light"]) body:not(.light-mode)
#step-3 .s3-editor-zone #collections-list > article.collection-card > button.collection-summary {
  position:relative !important;
  flex:1 1 0 !important;
  width:auto !important;
  max-width:none !important;
  min-width:0 !important;
  min-height:72px !important;
  height:72px !important;
  padding:8px 1px 8px 8px !important;
  margin:0 !important;
  display:grid !important;
  grid-template-columns:17px 44px minmax(0,1fr) 12px !important;
  align-items:center !important;
  gap:8px !important;
  box-shadow:none !important;
}
html.um-refined:not([data-um-appearance="refined-light"]) body:not(.light-mode)
#step-3 .s3-editor-zone #collections-list > article.collection-card > .collection-quick-actions {
  position:relative !important;
  flex:0 0 80px !important;
  width:80px !important;
  min-width:80px !important;
  height:72px !important;
  min-height:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  align-self:center !important;
  gap:5px !important;
  padding:0 7px 0 0 !important;
  margin:0 !important;
  /* These legacy offsets caused the displaced buttons. */
  top:auto !important;
  right:auto !important;
  bottom:auto !important;
  left:auto !important;
  transform:none !important;
  background:transparent !important;
}
html.um-refined:not([data-um-appearance="refined-light"]) body:not(.light-mode)
#step-3 .s3-editor-zone #collections-list > article.collection-card > .collection-quick-actions :is(.collection-pin-toggle,.collection-order-menu > summary){
  flex:0 0 32px !important;
  width:32px !important;
  min-width:32px !important;
  height:36px !important;
  min-height:36px !important;
  max-height:36px !important;
  margin:0 !important;
  padding:0 !important;
  line-height:1 !important;
  display:grid !important;
  place-items:center !important;
  box-sizing:border-box !important;
  background:#2b3744 !important;
  border:1px solid #435161 !important;
  border-radius:9px !important;
  box-shadow:none !important;
}
html.um-refined:not([data-um-appearance="refined-light"]) body:not(.light-mode)
#step-3 .s3-editor-zone #collections-list > article.collection-card > .collection-quick-actions .collection-order-menu {
  position:relative !important;
  flex:0 0 32px !important;
  width:32px !important;
  min-width:32px !important;
  height:36px !important;
  margin:0 !important;
  padding:0 !important;
  top:auto !important;
  right:auto !important;
  bottom:auto !important;
  left:auto !important;
}
html.um-refined:not([data-um-appearance="refined-light"]) body:not(.light-mode)
#step-3 .s3-editor-zone #collections-list > article.collection-card > .collection-body[hidden],
html.um-refined:not([data-um-appearance="refined-light"]) body:not(.light-mode)
#step-3 .s3-editor-zone #collections-list > article.collection-card .folder-body[hidden]{
  display:none !important;
  padding:0 !important;
  margin:0 !important;
  height:0 !important;
  border:0 !important;
}
html.um-refined:not([data-um-appearance="refined-light"]) body:not(.light-mode)
#step-3 .s3-editor-zone #collections-list > article.collection-card > .collection-body:not([hidden]){
  flex:0 0 100% !important;
  width:100% !important;
  height:auto !important;
  min-height:0 !important;
}
html.um-refined:not([data-um-appearance="refined-light"]) body:not(.light-mode)
#step-3 .s3-editor-zone #collections-list > article.collection-card:has(.collection-order-menu[open]){
  z-index:10010 !important;
}
/* Desktop and tablet: simple right-anchored popover. Reset every inherited
   offset because the older mobile CSS had left / bottom rules. */
html.um-refined:not([data-um-appearance="refined-light"]) body:not(.light-mode)
#step-3.s3-experience-v2 .collection-order-menu-popover {
  position:absolute !important;
  top:calc(100% + 6px) !important;
  right:0 !important;
  bottom:auto !important;
  left:auto !important;
  width:185px !important;
  max-width:calc(100vw - 30px) !important;
  min-width:0 !important;
  padding:5px !important;
  margin:0 !important;
  background:#273340 !important;
  color:#edf3f9 !important;
  border:1px solid #435161 !important;
  border-radius:11px !important;
  box-shadow:0 9px 25px rgba(0,0,0,.30) !important;
  z-index:100020 !important;
}
html.um-refined:not([data-um-appearance="refined-light"]) body:not(.light-mode)
#step-3.s3-experience-v2 .collection-order-menu-popover > button{
  display:block !important;
  width:100% !important;
  min-height:41px !important;
  padding:9px 12px !important;
  text-align:left !important;
  font-size:12px !important;
  color:#ebf1f8 !important;
  -webkit-text-fill-color:#ebf1f8 !important;
  border:0 !important;
  border-radius:7px !important;
  background:transparent !important;
}
/* Mobile: make the actions a proper bottom sheet sitting above the app dock.
   This avoids a menu that can overflow the right edge of a 360px phone. */
@media(max-width:700px){
  html.um-refined:not([data-um-appearance="refined-light"]) body:not(.light-mode)
  #step-3.s3-experience-v2 .collection-order-menu-popover{
    position:fixed !important;
    top:auto !important;
    right:14px !important;
    bottom:calc(102px + env(safe-area-inset-bottom)) !important;
    left:14px !important;
    width:auto !important;
    min-width:0 !important;
    max-width:none !important;
    padding:7px !important;
    margin:0 !important;
    border-radius:14px !important;
  }
}
@media(max-width:480px){
  html.um-refined:not([data-um-appearance="refined-light"]) body:not(.light-mode)
  #step-3 .s3-editor-zone #collections-list > article.collection-card > button.collection-summary{
    grid-template-columns:14px 40px minmax(0,1fr) 10px !important;
    gap:6px !important;
    padding-left:8px !important;
  }
  html.um-refined:not([data-um-appearance="refined-light"]) body:not(.light-mode)
  #step-3 .s3-editor-zone #collections-list > article.collection-card > .collection-quick-actions{
    flex-basis:75px !important;
    width:75px !important;
    min-width:75px !important;
    gap:4px !important;
  }
}
/* Step 2: remove the last decorative nested borders. The blue Collections
   button is the single primary action; Back should simply be neutral. */
html.um-refined:not([data-um-appearance="refined-light"]) body:not(.light-mode)
#step-2 .s2-bottom-nav,
html.um-refined:not([data-um-appearance="refined-light"]) body:not(.light-mode)
#step-2 .s2-bottom-nav-compact,
html.um-refined:not([data-um-appearance="refined-light"]) body:not(.light-mode)
#step-2 #s2ReviewActions{
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
  background:transparent !important;
  background-image:none !important;
}
html.um-refined:not([data-um-appearance="refined-light"]) body:not(.light-mode)
#step-2 .s2-bottom-nav :is(.s2-nav-card,.s2-nav-card::before,.s2-nav-card::after){
  outline:0 !important;
  box-shadow:none !important;
}
html.um-refined:not([data-um-appearance="refined-light"]) body:not(.light-mode)
#step-2 .s2-bottom-nav > .s2-nav-card-back{
  background:#25313e !important;
  border:1px solid #394654 !important;
  color:#ecf1f7 !important;
  background-image:none !important;
  box-shadow:none !important;
}
html.um-refined:not([data-um-appearance="refined-light"]) body:not(.light-mode)
#step-2 .s2-bottom-nav > .s2-nav-card-next{
  background:#47749b !important;
  border:1px solid #5c83a6 !important;
  color:#fff !important;
  background-image:none !important;
  box-shadow:none !important;
}
html.um-refined:not([data-um-appearance="refined-light"]) body:not(.light-mode)
#step-2 .s2-bottom-nav .s2-nav-card-icon {
  background:transparent !important;
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
}
/* UltraMAX DEV — Refined builder accent cleanup, 13 Oct 2026
   One final consistent colour language for Refined Dark / Light.
   Classic is explicitly unaffected. No structure or handlers changed. */
html.um-app-mode.um-refined[data-um-appearance] body {
  --um-clean-action:#47749b;
  --um-clean-action-border:#5d83a5;
  --um-clean-ink:#e9f0f7;
  --um-clean-muted:#b4c2d0;
  --um-clean-border:#394654;
  --um-clean-surface:#202832;
  --um-clean-raised:#283542;
  --um-clean-select:#304153;
  --um-clean-accent:#a9bdce;
}
html.um-app-mode.um-refined[data-um-appearance] body.light-mode {
  --um-clean-action:#436f97;
  --um-clean-action-border:#436f97;
  --um-clean-ink:#202c3d;
  --um-clean-muted:#57667b;
  --um-clean-border:#d8e0e9;
  --um-clean-surface:#fff;
  --um-clean-raised:#f3f6f9;
  --um-clean-select:#e8eef4;
  --um-clean-accent:#526c86;
}
/* Step labels and minor section headings are metadata, not bright artwork. */
html.um-app-mode.um-refined[data-um-appearance] body :is(#step-1,#step-2,#step-3,#step-4)
 :is(.um-step-eyebrow,.s2-manage-zone-kicker,.s2-play-stage-kicker,.s2-review-kicker,
 .s2-preset-mode-label,.s2-phase-label,.s3-workspace-kicker,.s3-editor-zone-kicker,
 .s3-quick-kicker,.s3-v2-layout-label) {
  color:var(--um-clean-accent) !important;
  -webkit-text-fill-color:var(--um-clean-accent) !important;
}
/* Selected quick-start is a soft slate selection, not a purple pill. */
html.um-app-mode.um-refined[data-um-appearance] body #step-2
 .s2-preset-mode-option.is-selected,
html.um-app-mode.um-refined[data-um-appearance] body #step-2
 .s2-preset-mode-option:has(input:checked) {
  background:var(--um-clean-select) !important;
  background-image:none !important;
  color:var(--um-clean-ink) !important;
  -webkit-text-fill-color:var(--um-clean-ink) !important;
  border-color:var(--um-clean-border) !important;
  box-shadow:none !important;
}
html.um-app-mode.um-refined[data-um-appearance] body #step-2 .s2-preset-mode-option:not(.is-selected):not(:has(input:checked)) {
  border-color:var(--um-clean-border) !important;
  background:var(--um-clean-surface) !important;
  background-image:none !important;
  color:var(--um-clean-muted) !important;
  box-shadow:none !important;
}
/* Advanced row tools / Add specific rows / phase separators. */
html.um-app-mode.um-refined[data-um-appearance] body #step-2
 :is(.s2-specific-rows-cta,.s2-utility-drawer,.s2-manage-zone .s2-utility-drawer) {
  background:var(--um-clean-surface) !important;
  background-image:none !important;
  border:1px solid var(--um-clean-border) !important;
  box-shadow:none !important;
  color:var(--um-clean-ink) !important;
}
html.um-app-mode.um-refined[data-um-appearance] body #step-2
 :is(.s2-specific-rows-icon,.s2-utility-icon,.s2-manage-zone .s2-utility-icon,.s2-utility-chev) {
  background:var(--um-clean-raised) !important;
  background-image:none !important;
  color:var(--um-clean-muted) !important;
  -webkit-text-fill-color:var(--um-clean-muted) !important;
  border-color:var(--um-clean-border) !important;
  box-shadow:none !important;
}
html.um-app-mode.um-refined[data-um-appearance] body #step-2
 :is(.s2-specific-rows-arrow,.s2-utility-count,.s2-phase-label,.s2-ready-break .s2-phase-label) {
  color:var(--um-clean-accent) !important;
  -webkit-text-fill-color:var(--um-clean-accent) !important;
}
html.um-app-mode.um-refined[data-um-appearance] body #step-2
 :is(.s2-phase-break,.s2-ready-break) {
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}
html.um-app-mode.um-refined[data-um-appearance] body #step-2
 :is(.s2-phase-line,.s2-ready-break .s2-phase-line,.s2-ready-break .s2-phase-line:last-child) {
  background:var(--um-clean-border) !important;
  box-shadow:none !important;
}
html.um-app-mode.um-refined[data-um-appearance] body #step-2
 :is(.s2-phase-icon,.s2-utility-count) {
  background:var(--um-clean-raised) !important;
  background-image:none !important;
  border-color:var(--um-clean-border) !important;
  box-shadow:none !important;
}
html.um-app-mode.um-refined[data-um-appearance] body #step-2
 :is(.s2-specific-rows-cta,.s2-utility-drawer) > summary:hover {
  background:var(--um-clean-raised) !important;
}
/* Step 2 review and navigation: one blue action; Back is subdued.
   Clear nested card outlines and old icon glow. */
html.um-app-mode.um-refined[data-um-appearance] body #step-2
 :is(.s2-bottom-nav,.s2-bottom-nav-compact,.s2-review-actions) {
  border:0 !important;
  outline:0 !important;
  background:transparent !important;
  background-image:none !important;
  box-shadow:none !important;
}
html.um-app-mode.um-refined[data-um-appearance] body #step-2
 .s2-bottom-nav-compact .s2-nav-card {
  border-radius:12px !important;
  box-shadow:none !important;
  outline:0 !important;
}
html.um-app-mode.um-refined[data-um-appearance] body #step-2
 .s2-bottom-nav-compact .s2-nav-card-back {
  background:var(--um-clean-raised) !important;
  background-image:none !important;
  border:1px solid var(--um-clean-border) !important;
  color:var(--um-clean-ink) !important;
}
html.um-app-mode.um-refined[data-um-appearance] body #step-2
 .s2-bottom-nav-compact .s2-nav-card-next {
  background:var(--um-clean-action) !important;
  background-image:none !important;
  border:1px solid var(--um-clean-action-border) !important;
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
}
html.um-app-mode.um-refined[data-um-appearance] body #step-2
 .s2-bottom-nav-compact .s2-nav-card-next :is(.s2-nav-card-title,.s2-nav-card-sub,.s2-nav-card-icon) {
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
}
html.um-app-mode.um-refined[data-um-appearance] body #step-2
 .s2-bottom-nav-compact .s2-nav-card-back :is(.s2-nav-card-title,.s2-nav-card-sub,.s2-nav-card-icon){
  color:var(--um-clean-ink) !important;
  -webkit-text-fill-color:var(--um-clean-ink) !important;
}
html.um-app-mode.um-refined[data-um-appearance] body #step-2
 .s2-bottom-nav-compact .s2-nav-card-icon {
  background:transparent !important;
  background-image:none !important;
  border:0 !important;
  box-shadow:none !important;
}
html.um-app-mode.um-refined[data-um-appearance] body #step-2
 :is(.s2-final-count,.s2-final-count-number,.s2-review-zone,.s2-review-actions > button) {
  border-color:var(--um-clean-border) !important;
  box-shadow:none !important;
}
html.um-app-mode.um-refined[data-um-appearance] body #step-2 .s2-final-count-number{
  background:var(--um-clean-raised) !important;
  color:var(--um-clean-ink) !important;
  -webkit-text-fill-color:var(--um-clean-ink) !important;
}
/* Step 3 footer, including Refined Light, must match the same blue CTA.
   Preserve original click handlers, button states, and layout. */
html.um-app-mode.um-refined[data-um-appearance] body #step-3
 .collection-bottom-area {
  border-color:var(--um-clean-border) !important;
  box-shadow:none !important;
}
html.um-app-mode.um-refined[data-um-appearance] body #step-3
 .collection-bottom-area > .count-display {
  background:var(--um-clean-raised) !important;
  background-image:none !important;
  border:0 !important;
  box-shadow:none !important;
}
html.um-app-mode.um-refined[data-um-appearance] body #step-3
 .collection-bottom-area :is(#collCount,#folderCount) {
  background:transparent !important;
  color:var(--um-clean-ink) !important;
  -webkit-text-fill-color:var(--um-clean-ink) !important;
}
html.um-app-mode.um-refined[data-um-appearance] body #step-3
 .collection-bottom-actions > .step4-action-primary {
  background:var(--um-clean-action) !important;
  background-image:none !important;
  border:1px solid var(--um-clean-action-border) !important;
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  box-shadow:none !important;
}
html.um-app-mode.um-refined[data-um-appearance] body #step-3
 .collection-bottom-actions > .step4-action-primary::before {
  background:transparent !important;
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  box-shadow:none !important;
}
html.um-app-mode.um-refined[data-um-appearance] body #step-3
 .collection-bottom-actions > .step4-action:not(.step4-action-primary) {
  background:var(--um-clean-raised) !important;
  background-image:none !important;
  border:1px solid var(--um-clean-border) !important;
  color:var(--um-clean-ink) !important;
  -webkit-text-fill-color:var(--um-clean-ink) !important;
  box-shadow:none !important;
}
/* Collection overview labels, chips and extra tools use slate, not violet. */
html.um-app-mode.um-refined[data-um-appearance] body #step-3
 :is(.s3-editor-zone-head .s3-editor-zone-actions,.s3-editor-zone .s3-editor-zone-actions) .collection-add-action,
html.um-app-mode.um-refined[data-um-appearance] body #step-3
 :is(.s3-v2-drawer-icon,.s3-v2-drawer-chev) {
  background:var(--um-clean-raised) !important;
  background-image:none !important;
  color:var(--um-clean-ink) !important;
  -webkit-text-fill-color:var(--um-clean-ink) !important;
  border-color:var(--um-clean-border) !important;
  box-shadow:none !important;
}
html.um-app-mode.um-refined[data-um-appearance] body #step-3
 :is(.s3-v2-layout-chip,.s3-v2-layout-summary span,.s3-v2-layout-label) {
  color:var(--um-clean-accent) !important;
  -webkit-text-fill-color:var(--um-clean-accent) !important;
  border-color:var(--um-clean-border) !important;
}
/* The Build tab is an active navigation state, not purple decoration. */
html.um-app-mode.um-refined[data-um-appearance] body .um-build-bottom-nav a.active {
  background:var(--um-clean-select) !important;
  background-image:none !important;
  border-color:transparent !important;
  color:var(--um-clean-action) !important;
  -webkit-text-fill-color:var(--um-clean-action) !important;
  box-shadow:none !important;
}
html.um-app-mode.um-refined[data-um-appearance] body .um-build-bottom-nav a.active :is(svg,svg *,span){
  color:var(--um-clean-action) !important;
  stroke:currentColor !important;
}
/* No change to logo gradients or Classic appearance. */
/* Final low-emphasis labels omitted by the older theme's defaults.
   These are informative, not primary purple actions. */
html.um-app-mode.um-refined[data-um-appearance] body #step-3 .s3-workspace-count {
  color:var(--um-clean-ink) !important;
  -webkit-text-fill-color:var(--um-clean-ink) !important;
  background:var(--um-clean-raised) !important;
  background-image:none !important;
  border-color:var(--um-clean-border) !important;
  box-shadow:none !important;
}
html.um-app-mode.um-refined[data-um-appearance] body #step-3 .s3-v2-layout-summary strong {
  color:var(--um-clean-ink) !important;
  -webkit-text-fill-color:var(--um-clean-ink) !important;
  background:transparent !important;
  box-shadow:none !important;
}
html.um-app-mode.um-refined[data-um-appearance] body #step-3
 .collection-quick-actions :is(.collection-pin-toggle,.collection-order-menu > summary) {
  color:var(--um-clean-muted) !important;
  -webkit-text-fill-color:var(--um-clean-muted) !important;
  background:var(--um-clean-raised) !important;
  border-color:var(--um-clean-border) !important;
  box-shadow:none !important;
}
html.um-app-mode.um-refined[data-um-appearance] body #step-3
 .collection-pin-toggle.is-pinned {
  color:#4d9c83 !important;
  -webkit-text-fill-color:#4d9c83 !important;
}
html.um-app-mode.um-refined[data-um-appearance] body #step-3
 :is(.s3-v2-layout-label,.s3-v2-drawer-copy strong) {
  text-shadow:none !important;
}
/* Finish and selected navigation must retain accessible contrast. */
html.um-app-mode.um-refined[data-um-appearance] body #step-3
 .collection-bottom-actions > .step4-action-primary:is(:focus-visible,:hover){
  background:#527fa6 !important;
  border-color:#527fa6 !important;
  box-shadow:none !important;
}
html.um-app-mode.um-refined[data-um-appearance] body .um-build-bottom-nav a.active svg * {
  stroke:currentColor !important;
}
/* DEV Refined builder: Everything preset and final Step 4 neutrals.
   Scoped to Refined modes; Classic does not change. */
html.um-refined[data-um-appearance] body #step-2 #s2PresetsGrid.s2-presets-experience .s2-preset-advanced-grid{
 display:block !important;width:100% !important;max-width:100% !important;
 padding:0 !important;margin:0 !important;overflow:visible !important;
}
html.um-refined[data-um-appearance] body #step-2 #s2PresetsGrid.s2-presets-experience #s2pre-everything{
 display:grid !important;
 grid-template-columns:100px minmax(0,1fr) !important;
 grid-template-rows:minmax(108px,auto) !important;
 width:100% !important;max-width:100% !important;min-width:0 !important;
 min-height:108px !important;height:auto !important;
 margin:0 !important;padding:0 !important;
 align-items:stretch !important;justify-items:stretch !important;align-content:stretch !important;
 gap:0 !important;overflow:hidden !important;
 border-radius:12px !important;
}
html.um-refined[data-um-appearance] body #step-2 #s2PresetsGrid.s2-presets-experience #s2pre-everything .s2-preset-strip{
 display:grid !important;grid-template-columns:repeat(4,minmax(0,1fr)) !important;
 grid-column:1 !important;grid-row:1 !important;
 width:100px !important;min-width:0 !important;
 height:100% !important;max-height:none !important;min-height:108px !important;
 margin:0 !important;padding:0 !important;overflow:hidden !important;
 align-self:stretch !important;
}
html.um-refined[data-um-appearance] body #step-2 #s2PresetsGrid.s2-presets-experience #s2pre-everything .s2-preset-body{
 display:flex !important;flex-direction:column !important;justify-content:center !important;
 grid-column:2 !important;grid-row:1 !important;
 width:100% !important;max-width:100% !important;min-width:0 !important;
 margin:0 !important;padding:10px 12px !important;
 min-height:108px !important;height:auto !important;
 align-self:stretch !important;gap:7px !important;
}
html.um-refined[data-um-appearance] body #step-2 #s2PresetsGrid.s2-presets-experience #s2pre-everything
 :is(.s2-preset-heading,.s2-preset-meta,.s2-preset-desc){
 width:auto !important;max-width:100% !important;min-width:0 !important;
 align-self:stretch !important;overflow-wrap:anywhere !important;
}
html.um-refined[data-um-appearance] body #step-2 #s2PresetsGrid.s2-presets-experience #s2pre-everything .s2-preset-count{
 width:max-content !important;max-width:100% !important;
}
html.um-refined[data-um-appearance] body #step-2 #s2PresetsGrid.s2-presets-experience #s2pre-everything .s2-preset-tick{
 z-index:1 !important;
}
/* Neutral installation and advanced-options surfaces with readable status. */
html.um-app-mode.um-refined[data-um-appearance] body #step-4
 :is(.s4-extra-options,.s4-more-options,.s4-extra-tools,#s4ExtraOptions,.step4-advanced-drawer){
 background:var(--um-clean-surface,#202832) !important;
 background-image:none !important;
 border-color:var(--um-clean-border,#394654) !important;
 box-shadow:none !important;
}
html.um-app-mode.um-refined[data-um-appearance] body #step-4
 :is(.s4-extra-options,.s4-more-options,.s4-extra-tools) :is(summary,.s4-card-header){
 color:var(--um-clean-ink,#edf2f6) !important;
}
html.um-app-mode.um-refined[data-um-appearance] body #step-4
 :is(.s4-more-options-icon,.s4-extra-icon,.step4-more-options-icon){
 background:var(--um-clean-raised,#283542) !important;
 border-color:var(--um-clean-border,#394654) !important;
 box-shadow:none !important;
}
html.um-app-mode.um-refined[data-um-appearance] body #step-4
 :is(.token-copy-btn,.copy-token-btn,#copyTokenBtn){
 background:var(--um-clean-action,#47749b) !important;
 background-image:none !important;
 border-color:var(--um-clean-action-border,#5d83a5) !important;
 color:#fff !important;-webkit-text-fill-color:#fff !important;
 box-shadow:none !important;
}
@media(max-width:480px){
 html.um-refined[data-um-appearance] body #step-2 #s2PresetsGrid.s2-presets-experience #s2pre-everything{
 grid-template-columns:94px minmax(0,1fr) !important;
 }
 html.um-refined[data-um-appearance] body #step-2 #s2PresetsGrid.s2-presets-experience #s2pre-everything .s2-preset-strip{
 width:94px !important;
 }
}
/* Refined modes: exact Step 4 copy-token and options colours. */
html.um-app-mode.um-refined[data-um-appearance] body #step-4 button[onclick="copyToken()"]{
 background:var(--um-clean-action,#47749b) !important;
 background-image:none !important;
 border:1px solid var(--um-clean-action-border,#5d83a5) !important;
 color:#fff !important;-webkit-text-fill-color:#fff !important;
 box-shadow:none !important;
}
html.um-app-mode.um-refined[data-um-appearance] body #step-4
 [data-i18n="setup.step4.token.saveHint"]{
 color:var(--um-clean-accent,#a9bdce) !important;
 -webkit-text-fill-color:var(--um-clean-accent,#a9bdce) !important;
}
html.um-app-mode.um-refined[data-um-appearance] body #step-4
 :is(.um-workspace-disclosure,.um-step4-branding-disclosure){
 background:var(--um-clean-surface,#202832) !important;
 background-image:none !important;
 border:1px solid var(--um-clean-border,#394654) !important;
 box-shadow:none !important;
}
html.um-app-mode.um-refined[data-um-appearance] body #step-4
 :is(.um-workspace-disclosure,.um-step4-branding-disclosure) > summary {
 color:var(--um-clean-ink,#edf2f7) !important;
}
html.um-app-mode.um-refined[data-um-appearance] body #step-4
 :is(.um-workspace-disclosure,.um-step4-branding-disclosure) > summary :is(svg,.um-workspace-chevron) {
 color:var(--um-clean-muted,#b4c2d0) !important;
}