/* styles/customize-modal/customize-modal.css
   SpinChoice — Settings Modal (Big Sites / Sidebar Layout) — POLISHED v2
   - Same structure, fixed close button, better spacing/readability
   - Respects dark + light themes
   - NO JS changes needed
*/

/* =========================
   Theme tokens
   ========================= */
#customizeModal{

  --sc-accent: #4f8cff;

  /* dark theme */
  --sc-bg: #1D1D1D; /* required */
  --sc-fg: rgba(255,255,255,.92);
  --sc-muted: rgba(255,255,255,.64);

  --sc-surface: rgba(255,255,255,.06);
  --sc-surface2: rgba(255,255,255,.04);

  --sc-line: rgba(255,255,255,.12);
  --sc-line2: rgba(255,255,255,.09);

  --sc-shadow: 0 30px 90px rgba(0,0,0,.55);

  --sc-radius: 18px;
  --sc-radius2: 14px;

  --sc-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Inter, Arial, sans-serif;
}

html[data-theme="light"] #customizeModal{

  --sc-bg: #FFFFFF;
  --sc-fg: rgba(16,24,40,.92);
  --sc-muted: rgba(16,24,40,.62);

  --sc-surface: rgba(0,0,0,.05);
  --sc-surface2: rgba(0,0,0,.035);

  --sc-line: rgba(0,0,0,.12);
  --sc-line2: rgba(0,0,0,.09);

  --sc-shadow: 0 18px 60px rgba(0,0,0,.18);
}

/* =========================
   Modal shell
   ========================= */
.scmodal{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  pointer-events: none;
    overflow: hidden;
}
.scmodal.is-open{
  display: block;
  pointer-events: auto;
}

.scmodal__backdrop{
  position: absolute;
  inset: 0;
 background: rgba(0,0,0,0.09);
  backdrop-filter: blur(3px);
}
html[data-theme="light"] .scmodal__backdrop{
  background: rgba(0,0,0,.14);
}

/* Panel */
.scmodal__panel{
  position: absolute;
  left: 50%;
  top: 52%;
  transform: translate(-50%, -50%);
width: min(960px, calc(100% - 24px));
  max-height: min(86vh, 860px);
  overflow: hidden;
  box-sizing: border-box;
  border-radius: var(--sc-radius);
  border: 1px solid var(--sc-line);
  background: var(--sc-bg);
  color: var(--sc-fg);
  box-shadow: var(--sc-shadow);

  font-family: var(--sc-font);
  font-size: 14.5px;     /* ✅ slightly more readable */
  font-weight: 400;
  line-height: 1.45;     /* ✅ more readable */

  position: relative; /* anchor pinned close btn */
}

/* open pop */
.scmodal.is-open .scmodal__panel{
  animation: scModalPop 170ms ease-out;
}
@keyframes scModalPop{
  from { transform: translate(-50%, -48%) scale(.99); opacity: 0; }
  to   { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

/* =========================
   Sidebar Tabs (settings nav)
   ========================= */
.sctabsbar{
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;

  width: 248px;
  padding: 14px 12px;

  background: var(--sc-surface2);
  border-right: 1px solid var(--sc-line2);
}

/* Optional “settings” label feel (if you don't have any element, it does nothing) */
.sctabsbar::before{
  content: "Settings";
  display: block;
  padding: 8px 10px 10px;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 500;
  color: var(--sc-muted);
  letter-spacing: .2px;
}

/* Tabs list */
.sctabs{
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0;
  margin: 0;
  position: relative;
}

/* kill underline systems */
.sctabs__indicator,
.sctab-indicator{
  display: none !important;
}

/* tab item */
.sctab{
  border: 1px solid transparent !important;
  background: transparent !important;
  color: inherit;

  width: 100%;
  text-align: left;

  padding: 10px 10px;
  border-radius: 12px;

  cursor: pointer;
  user-select: none;

  font-size: 13.2px;
  font-weight: 500;
  opacity: .88;

  display: flex;
  align-items: center;
  gap: 10px;

  transition: background-color 140ms ease, border-color 140ms ease, opacity 140ms ease, transform 90ms ease;
}

.sctab:hover{
  background: var(--sc-surface);
  border-color: var(--sc-line2) !important;
  opacity: 1;
}
.sctab:active{
  transform: translateY(1px);
}

.sctab.is-active{
  background: rgba(79,140,255,.16);
  border-color: rgba(79,140,255,.30) !important;
  opacity: 1;
}

.sctab__label{
  display: inline-block;
  white-space: nowrap;
}

/* =========================
   Right side offset
   ========================= */
.scmodal__top,
.scpanels,
.scmodal__bottom{
  margin-left: 248px;
}

/* =========================
   Top header (right side)
   ========================= */
.scmodal__top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  padding: 16px 18px;
  border-bottom: 1px solid var(--sc-line2);
  background: var(--sc-bg);
}

.scmodal__titlewrap{
  display: grid;
  gap: 3px;
  min-width: 0;
}
.scmodal__title{
  font-size: 15.5px;
  font-weight: 500;
  letter-spacing: 0;
}
.scmodal__subtitle{
  font-size: 12.8px;
  color: var(--sc-muted);
}

/* =========================
   ✅ HARD FIX: Close button always top-right
   (works whether it's in header or elsewhere)
   ========================= */
#customizeModal .scmodal__close{
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  z-index: 50 !important;

  width: 40px;
  height: 40px;
  border-radius: 12px;

  border: 1px solid var(--sc-line);
  background: rgba(255,255,255,.03);
  color: inherit;

  cursor: pointer;
  display: grid;
  place-items: center;

  transition: background-color 140ms ease, transform 90ms ease, border-color 140ms ease;
}

html[data-theme="light"] #customizeModal .scmodal__close{
  background: rgba(0,0,0,.03);
}

#customizeModal .scmodal__close:hover{
  background: var(--sc-surface);
  border-color: var(--sc-line2);
}
#customizeModal .scmodal__close:active{
  transform: translateY(1px);
}

#customizeModal .scmodal__close svg{
  width: 18px;
  height: 18px;
}

/* Give header right padding so title never collides with X */
#customizeModal .scmodal__top{
  padding-right: 58px;
}

/* =========================
   Content area
   ========================= */
.scpanels{
  padding: 16px 18px 18px;

  /* ✅ keep vertical scrolling, kill horizontal scrollbar */
  overflow-y: auto;
  overflow-x: hidden;

  max-height: calc(86vh - 150px);
}

.scpanel__inner{
  padding: 16px;
  border-radius: var(--sc-radius2);
  background: var(--sc-surface2);
  border: 1px solid var(--sc-line);
}

/* placeholder */
.scplaceholder__title{
  font-weight: 500;
  font-size: 14px;
}
.scplaceholder__text{
  margin-top: 8px;
  color: var(--sc-muted);
  font-size: 13px;
  line-height: 1.5;
}

/* =========================
   Bottom bar
   ========================= */
.scmodal__bottom{
  display: flex;
  justify-content: flex-end;
  gap: 10px;

  padding: 12px 18px 16px;
  border-top: 1px solid var(--sc-line2);
  background: var(--sc-bg);
}

.scmodal__btn{
  border-radius: 12px;
  padding: 10px 14px;

  font-size: 13px;
  font-weight: 500;

  border: 1px solid var(--sc-line);
  background: transparent;
  color: inherit;

  cursor: pointer;
  user-select: none;

  transition: background-color 140ms ease, transform 90ms ease, border-color 140ms ease;
}
.scmodal__btn:hover{
  background: var(--sc-surface);
  border-color: var(--sc-line2);
}
.scmodal__btn:active{
  transform: translateY(1px);
}

.scmodal__btn--primary{
  border-color: rgba(79,140,255,.55);
  background: rgba(79,140,255,.18);
}
.scmodal__btn--primary:hover{
  background: rgba(79,140,255,.26);
}

.scmodal__btn:disabled{
  opacity: .45;
  cursor: not-allowed;
}

/* =========================
   Appearance tab (settings feel)
   ========================= */
.scapp{
  display: grid;
  gap: 14px;
}

#scpanel-appearance .scpanel__inner{
  display: block;
}
#scpanel-appearance .scapp{
  max-width: 760px;
  width: 100%;
  margin: 0 auto;   /* ✅ centers the entire Appearance column */
  text-align: left;
}


/* ✅ Center the toggle row within the right content area */
#customizeModal #scpanel-appearance .scapp__mode{
  display: flex;
  align-items: center;
  justify-content: center;   /* ✅ center */
  gap: 14px;

  padding-bottom: 12px;
  border-bottom: 1px solid var(--sc-line2);
}

/* ✅ Remove the "Appearance" label beside the toggle */
#customizeModal #scpanel-appearance .scapp__modeTitle{
  display: none !important;
}


/* ✅ Center toggle cluster (remove "push to right" behavior) */
#customizeModal #scpanel-appearance .scapp .scapptoggle{
  margin-left: 0 !important;          /* ✅ remove auto push */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}


.scapp .scapptoggle__label{
  font-size: 12.8px;
  font-weight: 500;
  color: var(--sc-muted);
}
.scapp .scapptoggle__label.is-active{
  color: var(--sc-fg);
}

/* ✅ Force BOTH toggle images to identical visual size
   - Works even if one PNG has transparent padding
   - Uses object-fit: contain so both “icons” read same size
*/
#customizeModal #scpanel-appearance .scapptoggle__label--withImg{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-direction: row;
}

/* the icon wrapper (same size for BOTH) */
#customizeModal #scpanel-appearance .scapptoggle__label--withImg .scWheelColorsTopImg,
#customizeModal #scpanel-appearance .scapptoggle__label--withImg .scWheelBgTopImg{
  width: 42px !important;
  height: 42px !important;
  border-radius: 12px;
  overflow: hidden;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  background: transparent;
}

/* the image itself */
#customizeModal #scpanel-appearance .scapptoggle__label--withImg .scWheelColorsTopImg__img,
#customizeModal #scpanel-appearance .scapptoggle__label--withImg .scWheelBgTopImg__img{
  width: 100% !important;
  height: 100% !important;
  display: block;
  object-fit: contain !important;   /* ✅ key difference */
  object-position: center;
}

/* if one of them is a plain <img> without the __img class, force it too */
#customizeModal #scpanel-appearance .scapptoggle__label--withImg img{
  width: 100% !important;
  height: 100% !important;
  display: block;
  object-fit: contain !important;
  object-position: center;
}

/* inactive state keeps the “dim” look */
#customizeModal #scpanel-appearance .scapptoggle__label--withImg:not(.is-active) img{
  filter: saturate(.55) brightness(.92);
  opacity: .72;
}


/* switch */
.scapp .scapptoggle__switch{
  position: relative;
  width: 52px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid var(--sc-line);
  background: var(--sc-surface);
  cursor: pointer;
}
.scapp .scapptoggle__switch input{
  position: absolute;
  inset: 0;
  opacity: 0;
}
.scapp .scapptoggle__track{
  position: absolute;
  inset: 0;
  border-radius: 999px;
  overflow: hidden;
}
.scapp .scapptoggle__glow{ display: none; }

.scapp .scapptoggle__thumb{
  position: absolute;
  top: 50%;
  left: 4px;
  transform: translateY(-50%);

  width: 20px;
  height: 20px;
  border-radius: 999px;

  background: rgba(255,255,255,.92);
  box-shadow: 0 10px 20px rgba(0,0,0,.25);
  transition: transform 170ms ease;
}
html[data-theme="light"] .scapp .scapptoggle__thumb{
  background: rgba(16,24,40,.92);
  box-shadow: 0 10px 20px rgba(0,0,0,.14);
}
.scapp .scapptoggle__switch input:checked ~ .scapptoggle__track .scapptoggle__thumb{
  transform: translate(22px, -50%);
}

/* Titles / hints */
.scview__head{
  display: grid;
  gap: 5px;
  margin-top: 6px;
}
/* ✅ Hide the big in-panel "Appearance" title (keep other panels normal if needed) */
#customizeModal #scpanel-appearance .scview__title{
  display: none !important;
}

.scview__hint{
  font-size: 12.8px;
  color: var(--sc-muted);
  line-height: 1.45;
}

/* help icon */
#customizeModal .scHelp{
  width: 20px !important;
  height: 20px !important;
  padding: 0 !important;
  display: inline-grid !important;
  place-items: center !important;
  border-radius: 8px;
  border: 1px solid transparent;
}
#customizeModal .scHelp:hover{
  background: var(--sc-surface);
  border-color: var(--sc-line2);
}
#customizeModal .scHelp svg{
  width: 12px !important;
  height: 12px !important;
}
/* =========================
   Appearance tab sections (title OUTSIDE the card)
   ========================= */

#customizeModal #scpanel-appearance .scAppSection{
  display: grid;
  gap: 8px;                 /* space between title and card */
  margin-top: 10px;         /* spacing between sections */
}

#customizeModal #scpanel-appearance .scAppSection__head{
  padding: 0 2px;           /* slight inset like a label */
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--sc-muted);
}

#customizeModal #scpanel-appearance .scAppSection__card{
  border: 1px solid var(--sc-line);
  background: var(--sc-surface2);
  border-radius: 14px;
  overflow: visible;
  padding: 12px;

  /* ✅ NEW: center cards by default (safe for all sections) */
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 720px;
}

/* remove extra top margin from first item inside a card */
#customizeModal #scpanel-appearance .scAppSection__card > :first-child{
  margin-top: 0 !important;
}

/* palettes section: your grid already has margin-top; kill it inside the card */
#customizeModal #scpanel-appearance .scAppSection--palettes .scColorRow{
  margin-top: 0;
}



/* =========================
   ✅ Wheel palette grid: compact + centered
   ========================= */
#customizeModal #scpanel-appearance .scAppSection--palettes .scColorRow{
  margin-top: 0;
  display: grid;
  gap: 10px;

  /* ✅ make tiles compact (not full-width 1fr) */
  grid-template-columns: repeat(4, minmax(140px, 160px));

  /* ✅ center the whole grid inside the card */
  justify-content: center;
}

@media (max-width: 720px){
  #customizeModal #scpanel-appearance .scAppSection--palettes .scColorRow{
    grid-template-columns: repeat(2, minmax(140px, 160px));
    justify-content: center;
  }
}

.scColorItem{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;

  padding: 12px;
  border-radius: 14px;
  border: 1px solid var(--sc-line);
  background: var(--sc-surface2);
}

.scColorCheck{
  width: 16px;
  height: 16px;
  accent-color: var(--sc-accent);
}

.scColorPill{
  width: 56px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid var(--sc-line2);
  position: relative;
  overflow: hidden;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.scColorPill::before{
  content:"";
  position: absolute;
  inset: 6px;
  border-radius: 8px;
  background: var(--swatch, #000);
}
.scColorIcon{
  position: relative;
  z-index: 1;
  width: 16px;
  height: 16px;
  opacity: .85;
}

.scColorPicker{
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* Buttons */
.scrow{
  margin-top: 14px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;

  /* ✅ NEW: center reset/randomize row */
  justify-content: center;
}

.scminiBtn{
  border-radius: 12px;
  padding: 10px 12px;
  border: 1px solid var(--sc-line);
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-weight: 500;

  transition: background-color 140ms ease, border-color 140ms ease, transform 90ms ease;
}
.scminiBtn:hover{
  background: var(--sc-surface);
  border-color: var(--sc-line2);
}
.scminiBtn:active{ transform: translateY(1px); }
.scminiBtn--icon{ display: inline-flex; align-items: center; gap: 8px; }
.scminiBtn__icon{ width: 16px; height: 16px; opacity: .9; }

/* Upload */
.scupload{
  margin-top: 12px;
  padding: 16px;
  border-radius: 14px;
  border: 1px dashed rgba(255,255,255,.22);
  background: var(--sc-surface2);
  cursor: pointer;
}
html[data-theme="light"] .scupload{
  border: 1px dashed rgba(0,0,0,.22);
}
.scupload:hover{
  background: var(--sc-surface);
}
.scupload__big{
  font-weight: 500;
  font-size: 13.4px;
}
.scupload__small{
  font-size: 12.8px;
  color: var(--sc-muted);
}
.scupload__preview{
  width: 100%;
  max-height: 260px;
  object-fit: cover;
  border-radius: 14px;
  border: 1px solid var(--sc-line);
  margin-top: 12px;
}

/* Settings rows */
.scCenterRow,
.scPageBgRow{
  margin-top: 12px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  padding: 12px;
  border-radius: 14px;
  border: 1px solid var(--sc-line);
  background: var(--sc-surface2);
}
.scCenterRow__title,
.scPageBgRow__title{
  font-size: 13.2px;
  font-weight: 500;
  color: var(--sc-fg);
}
.scPageBgRow__right{
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

/* center image button */
#customizeModal button[data-center-image-btn]{
  width: 40px !important;
  height: 40px !important;
  padding: 0 !important;

  border-radius: 12px !important;
  border: 1px solid rgba(79,140,255,.55) !important;
  background: rgba(79,140,255,.18) !important;
  color: #fff !important;

  display: inline-grid !important;
  place-items: center !important;

  transition: background-color 140ms ease, transform 90ms ease;
}
#customizeModal button[data-center-image-btn]:hover{
  background: rgba(79,140,255,.26) !important;
}
#customizeModal button[data-center-image-btn]:active{
  transform: translateY(1px);
}
#customizeModal button[data-center-image-btn] .scCenterBtn__icon{
  width: 18px !important;
  height: 18px !important;
}

/* page bg pick */
.scPageBgBtn{
  border-radius: 12px;
  padding: 9px 12px;
  border: 1px solid var(--sc-line);
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-weight: 500;

  display: inline-flex;
  align-items: center;
  gap: 10px;

  transition: background-color 140ms ease, border-color 140ms ease, transform 90ms ease;
}
.scPageBgBtn:hover{
  background: var(--sc-surface);
  border-color: var(--sc-line2);
}
.scPageBgBtn:active{ transform: translateY(1px); }

.scPageBgBtn__sw{
  width: 14px;
  height: 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.30);
}
html[data-theme="light"] .scPageBgBtn__sw{
  border: 1px solid rgba(0,0,0,.25);
}

.scPageBgReset{
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid var(--sc-line);
  background: transparent;
  color: inherit;
  cursor: pointer;

  display: inline-grid;
  place-items: center;

  transition: background-color 140ms ease, border-color 140ms ease, transform 90ms ease;
}
.scPageBgReset:hover{
  background: var(--sc-surface);
  border-color: var(--sc-line2);
}
.scPageBgReset:active{ transform: translateY(1px); }
.scPageBgReset__icon{ width: 16px; height: 16px; opacity: .9; }

/* Toggles as switches */
.scGradientRow{
  margin-top: 10px;
}
.scGradientToggle{
  width: 100%;
  position: relative;

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 12px 12px;
  border-radius: 14px;

  border: 1px solid var(--sc-line);
  background: var(--sc-surface2);
  color: inherit;

  cursor: pointer;
  user-select: none;

  transition: background-color 140ms ease, border-color 140ms ease;
}
.scGradientToggle:hover{
  background: var(--sc-surface);
  border-color: var(--sc-line2);
}

.scGradientToggle__text{
  font-size: 13.2px;
  font-weight: 500;
}

/* hide old tick UI */
.scGradientToggle__tick{ display: none !important; }

/* track */
.scGradientToggle::after{
  content: "";
  width: 46px;
  height: 26px;
  border-radius: 999px;
  border: 1px solid var(--sc-line);
  background: rgba(255,255,255,.06);
  flex: 0 0 auto;
  transition: background-color 160ms ease, border-color 160ms ease;
}
html[data-theme="light"] .scGradientToggle::after{
  background: rgba(0,0,0,.05);
}

/* thumb */
.scGradientToggle::before{
  content: "";
  position: absolute;
  right: 12px;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 10px 18px rgba(0,0,0,.25);
  transform: translateX(-22px);
  transition: transform 160ms ease;
}
html[data-theme="light"] .scGradientToggle::before{
  background: rgba(16,24,40,.92);
  box-shadow: 0 10px 18px rgba(0,0,0,.12);
}

.scGradientToggle.is-on::after{
  border-color: rgba(79,140,255,.55);
  background: rgba(79,140,255,.18);
}
.scGradientToggle.is-on::before{
  transform: translateX(0);
}

.scGradientToggle:focus-visible{
  outline: 2px solid rgba(79,140,255,.55);
  outline-offset: 3px;
}



/* =========================
   ✅ HARD FIX: Remove neon/glow from Themes button
   (kills box-shadow / filter glow / pseudo glow layers)
   ========================= */

#customizeModal .scThemeBtn,
#customizeModal .scTheme button,
#customizeModal .scThemeSection button,
#customizeModal #scpanel-appearance .scTheme button,
#customizeModal #scpanel-appearance .scThemeSection button{
  box-shadow: none !important;
  filter: none !important;
  text-shadow: none !important;
}

/* Kill any glow overlays (some buttons use these for neon effects) */
#customizeModal .scThemeBtn::before,
#customizeModal .scThemeBtn::after,
#customizeModal .scTheme button::before,
#customizeModal .scTheme button::after,
#customizeModal .scThemeSection button::before,
#customizeModal .scThemeSection button::after{
  box-shadow: none !important;
  filter: none !important;
  opacity: 1 !important;
}

/* Keep focus accessible, but NOT neon */
#customizeModal .scThemeBtn:focus,
#customizeModal .scThemeBtn:focus-visible,
#customizeModal .scTheme button:focus,
#customizeModal .scTheme button:focus-visible,
#customizeModal .scThemeSection button:focus,
#customizeModal .scThemeSection button:focus-visible{
  box-shadow: none !important;
  filter: none !important;
  outline: 2px solid rgba(255,255,255,0.18) !important;
  outline-offset: 3px !important;
}

html[data-theme="light"] #customizeModal .scThemeBtn:focus,
html[data-theme="light"] #customizeModal .scThemeBtn:focus-visible,
html[data-theme="light"] #customizeModal .scTheme button:focus,
html[data-theme="light"] #customizeModal .scTheme button:focus-visible,
html[data-theme="light"] #customizeModal .scThemeSection button:focus,
html[data-theme="light"] #customizeModal .scThemeSection button:focus-visible{
  outline: 2px solid rgba(0,0,0,0.18) !important;
}






/* =========================
   Responsive: collapse sidebar
   ========================= */
@media (max-width: 820px){
  .sctabsbar{
    position: sticky;
    width: auto;
    height: auto;
    border-right: 0;
    border-bottom: 1px solid var(--sc-line2);
    padding: 10px 12px;
  }

  .sctabsbar::before{ display: none; }

  .sctabs{
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
  }

  .sctab{
    width: auto;
    padding: 8px 10px;
  }

  .scmodal__top,
  .scpanels,
  .scmodal__bottom{
    margin-left: 0;
  }

  /* keep close pinned */
  #customizeModal .scmodal__close{
    top: 10px !important;
    right: 10px !important;
  }
  #customizeModal .scmodal__top{
    padding-right: 58px;
  }
}
/* =========================================================
   ✅ Ultra-small screens (<= 420px)
   Fix: modal becomes full-screen sheet + everything stacks
   so NOTHING goes off-screen.
   ========================================================= */
@media (max-width: 420px){

  /* 1) Modal panel becomes full-screen (no translate centering) */
#customizeModal .scmodal__panel{
  display: flex;
  flex-direction: column;

  /* ✅ CRITICAL: give the flex container a REAL height
     so footer is always visible and only .scpanels scrolls */
  height: min(86vh, 860px);
  height: min(86dvh, 860px); /* modern mobile fix (address bar) */

  /* keep your existing cap too (harmless) */
  max-height: min(86vh, 860px);
  max-height: min(86dvh, 860px);

  overflow: hidden; /* panel itself never scrolls */
}

  /* Slightly smaller base text everywhere inside the modal */
  #customizeModal .scmodal__panel{
    font-size: 13px;
    line-height: 1.35;
  }

  /* Close button: smaller + safer spacing */
  #customizeModal .scmodal__close{
    top: 8px !important;
    right: 8px !important;
    width: 36px;
    height: 36px;
    border-radius: 10px;
  }

  /* 2) Tabs bar: horizontal scroll (no wrapping / no overflow) */
  .sctabsbar{
    padding: 8px 10px;
  }
  .sctabsbar::before{
    display: none;
  }
  .sctabs{
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 6px;
  }
  .sctab{
    width: auto;
    padding: 7px 9px;
    font-size: 12px;
    border-radius: 11px;
    white-space: nowrap;
  }

  /* 3) Right side spacing: reduce padding so content fits */
  .scpanels{
    padding: 10px 12px 12px;
    max-height: calc(100vh - 118px);
  }

  .scpanel__inner{
    padding: 12px;
  }

  /* Bottom action bar: stack buttons (never off-screen) */
  .scmodal__bottom{
    padding: 10px 12px 12px;
    gap: 8px;
    flex-wrap: wrap;
  }
  .scmodal__bottom .scmodal__btn{
    font-size: 12px;
    padding: 9px 12px;
  }
  .scmodal__bottomRight{
    width: 100%;
    display: flex;
    justify-content: flex-end;
  }

  /* 4) During/After spin rows: STACK label + controls */
  #customizeModal #scpanel-beforespin .scspinRow,
  #customizeModal #scpanel-afterspin .scspinRow{
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 8px;
  }

  #customizeModal #scpanel-beforespin .scspinRow__controls,
  #customizeModal #scpanel-afterspin .scspinRow__controls{
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 8px;
  }

  /* “wide” controls must not enforce widths */
  #customizeModal #scpanel-beforespin .scspinRow__controls--wide,
  #customizeModal #scpanel-afterspin .scspinRow__controls--wide{
    width: 100%;
  }

  /* Dropdowns MUST be allowed to shrink */
  #customizeModal #scpanel-beforespin .scSoundSelect,
  #customizeModal #scpanel-afterspin .scSoundSelect{
    min-width: 0;
    width: 100%;
  }

  /* 5) Appearance: palette grid becomes 1 column (no overflow) */
  #customizeModal #scpanel-appearance .scAppSection--palettes .scColorRow{
    grid-template-columns: 1fr;
    justify-content: stretch;
  }

  /* Themes button: remove min-width so it never pushes off-screen */
  #customizeModal #scpanel-appearance .scThemeSection .scThemeBtn,
  #customizeModal #scpanel-appearance .scThemeSection .scTheme button:not(.scHelp){
    min-width: 0;
    width: 100%;
  }

  /* Theme menu: fit tiny screens */
  .scThemeMenu{
    width: calc(100vw - 16px);
    max-height: 70vh;
    padding: 12px;
    border-radius: 14px;
  }
}


/* =========================================================
   ✅ Extra-tight screens (<= 360px): slightly smaller text/padding
   ========================================================= */
@media (max-width: 360px){

  #customizeModal .scmodal__panel{
    font-size: 12.5px;
  }

  .scpanels{
    padding: 9px 10px 10px;
    max-height: calc(100vh - 112px);
  }

  .scpanel__inner{
    padding: 10px;
  }

  .scmodal__bottom .scmodal__btn{
    font-size: 12px;
    padding: 8px 10px;
  }
}

/* =========================================================
   ✅ Micro screens (<= 310px)
   Goal: remove gaps + shrink everything so nothing overflows
   ========================================================= */
@media (max-width: 310px){

  /* tighten global spacing */
  #customizeModal .scmodal__panel{
    font-size: 12px;
    line-height: 1.25;
  }

  .scpanels{
    padding: 8px 8px 10px;
    max-height: calc(100vh - 108px);
  }

  .scpanel__inner{
    padding: 10px;
    border-radius: 12px;
  }

  /* less “air” between sections */
  #customizeModal #scpanel-beforespin .scspin,
  #customizeModal #scpanel-afterspin .scspin{
    gap: 12px;
  }

  /* headlines tighter + smaller */
  #customizeModal .scspinHeadline{
    margin: 0 0 6px !important;
    font-size: 11.5px !important;
    line-height: 1.15 !important;
  }

  /* section cards tighter */
  #customizeModal #scpanel-beforespin .scspinSection,
  #customizeModal #scpanel-afterspin .scspinSection{
    border-radius: 12px;
  }

  #customizeModal #scpanel-beforespin .scspinRow--inSection,
  #customizeModal #scpanel-afterspin .scspinRow--inSection{
    padding: 10px;
  }

  /* labels smaller + allow wrap safely */
  #customizeModal #scpanel-beforespin .scspinRow__label,
  #customizeModal #scpanel-afterspin .scspinRow__label{
    font-size: 12px;
    line-height: 1.2;
    word-break: break-word;
  }

  /* controls must never force width */
  #customizeModal #scpanel-beforespin .scspinRow__controls,
  #customizeModal #scpanel-afterspin .scspinRow__controls{
    min-width: 0;
  }

  /* dropdowns shrink + shorter */
  #customizeModal #scpanel-beforespin .scSoundSelect,
  #customizeModal #scpanel-afterspin .scSoundSelect{
    height: 36px;
    min-width: 0;
    width: 100%;
    font-size: 12px;
    padding: 0 32px 0 10px;
    border-radius: 10px;
  }

  /* play/stop buttons smaller */
  #customizeModal #scpanel-beforespin .scSoundBtn,
  #customizeModal #scpanel-afterspin .scSoundBtn{
    width: 34px;
    height: 34px;
    border-radius: 10px;
  }
  #customizeModal #scpanel-beforespin .scSoundBtn svg,
  #customizeModal #scpanel-afterspin .scSoundBtn svg{
    width: 16px;
    height: 16px;
  }

  /* sliders tighter */
  #customizeModal #scpanel-beforespin .scVol,
  #customizeModal #scpanel-afterspin .scVol,
  #customizeModal #scpanel-beforespin .scDur,
  #customizeModal #scpanel-beforespin .scEntries{
    gap: 6px;
    --thumb-size: 18px;
  }

  /* spin duration reset smaller */
  #customizeModal #scpanel-beforespin .scDur__reset{
    width: 30px;
    height: 30px;
    border-radius: 9px;
  }
  #customizeModal #scpanel-beforespin .scDur__reset svg{
    width: 16px;
    height: 16px;
  }

  /* bottom buttons tighter */
  .scmodal__bottom{
    padding: 8px 10px 10px;
    gap: 6px;
  }
  .scmodal__btn{
    padding: 8px 10px;
    font-size: 12px;
    border-radius: 10px;
  }

  /* inside-panel reset bar tighter */
  .scpanel__actions{
    padding: 10px 12px 12px;
  }

  /* Appearance tab: remove extra gaps */
  #customizeModal #scpanel-appearance .scapp{
    gap: 10px;
  }
  #customizeModal #scpanel-appearance .scAppSection{
    gap: 6px;
    margin-top: 8px;
  }
  #customizeModal #scpanel-appearance .scAppSection__card{
    padding: 10px;
    border-radius: 12px;
  }
  #customizeModal #scpanel-appearance .scGradientRow--check{
    margin-top: 8px;
    padding: 10px;
    border-radius: 12px;
  }
  .scCenterRow,
  .scPageBgRow{
    margin-top: 10px;
    padding: 10px;
    border-radius: 12px;
  }
  .scPageBgBtn{
    padding: 8px 10px;
    font-size: 12px;
    border-radius: 10px;
  }
  .scPageBgReset{
    width: 34px;
    height: 34px;
    border-radius: 10px;
  }

  /* theme menu smaller */
  .scThemeMenu{
    padding: 10px;
    border-radius: 12px;
    max-height: 66vh;
  }
}


/* =========================================================
   ✅ Ultra-micro (<= 220px)
   Tabs become 2-letter labels + even tighter
   ========================================================= */
@media (max-width: 220px){

  #customizeModal .scmodal__panel{
    font-size: 11.5px;
    line-height: 1.2;
  }

  .scpanels{
    padding: 6px 6px 8px;
    max-height: calc(100vh - 102px);
  }

  .scpanel__inner{
    padding: 8px;
    border-radius: 10px;
  }

  /* Tabs: hide long text, use short labels from data-sctab */
  .sctab{
    font-size: 0;
    padding: 6px 8px;
  }
  .sctab::before{
    font-size: 11px;
    font-weight: 650;
    letter-spacing: 0.02em;
  }
  .sctab[data-sctab="appearance"]::before{ content: "AP"; }
  .sctab[data-sctab="beforespin"]::before{ content: "DU"; }  /* During */
  .sctab[data-sctab="afterspin"]::before{ content: "AF"; }   /* After */

  /* controls even smaller */
  #customizeModal #scpanel-beforespin .scSoundBtn,
  #customizeModal #scpanel-afterspin .scSoundBtn{
    width: 30px;
    height: 30px;
    border-radius: 9px;
  }

  #customizeModal #scpanel-beforespin .scSoundSelect,
  #customizeModal #scpanel-afterspin .scSoundSelect{
    height: 34px;
    font-size: 11.5px;
  }

  #customizeModal #scpanel-beforespin .scDur__reset{
    width: 28px;
    height: 28px;
  }

  .scmodal__btn{
    padding: 7px 9px;
    font-size: 11.5px;
    border-radius: 9px;
  }
}


/* =========================================================
   ✅ Extreme widths (<= 140px)
   Hide non-essential helpers/ticks that force layout
   ========================================================= */
@media (max-width: 140px){

  /* remove “extras” that steal width */
  #customizeModal .scHelp{ display: none !important; }

  /* ticks often wrap/overflow on tiny widths */
  #customizeModal .scVol__ticks,
  #customizeModal .scDur__ticks,
  #customizeModal .scEntries__ticks{
    display: none !important;
  }

  /* make bottom actions stack full-width */
  .scmodal__bottom{
    flex-direction: column;
    align-items: stretch;
  }
  .scmodal__bottom .scmodal__btn{
    width: 100%;
  }
  .scmodal__bottomRight{
    width: 100%;
    justify-content: stretch;
  }
}


/* =========================================================
   ✅ Absurd widths (<= 100px)
   Keep everything inside viewport — super compact
   ========================================================= */
@media (max-width: 100px){

  #customizeModal .scmodal__close{
    width: 26px;
    height: 26px;
    border-radius: 8px;
  }
  #customizeModal .scmodal__close svg{
    width: 14px;
    height: 14px;
  }

  #customizeModal .scmodal__panel{
    font-size: 10.5px;
    line-height: 1.15;
  }

  .scpanels{
    padding: 4px 4px 6px;
    max-height: calc(100vh - 96px);
  }

  .scpanel__inner{
    padding: 6px;
    border-radius: 8px;
  }

  .scmodal__btn{
    padding: 6px 7px;
    font-size: 10.5px;
    border-radius: 8px;
  }

  /* make sure nothing forces horizontal overflow */
  #customizeModal .scmodal__panel,
  #customizeModal .scpanels,
  #customizeModal .scpanel__inner{
    overflow-x: hidden;
  }

  /* last-resort: allow long labels to break */
  #customizeModal .scspinRow__label,
  #customizeModal .scGradientCheck__text,
  #customizeModal .scAppSection__head{
    word-break: break-word;
  }
}



/* Reduced transparency support */
@media (prefers-reduced-transparency: reduce){
  .scmodal__backdrop{ backdrop-filter: none; }
}
/* =========================
   ✅ Themes section inside Appearance (now a titled card)
   ========================= */

#customizeModal #scpanel-appearance .scThemeSection{
  margin: 10px 0 14px;
}

/* center the actual theme UI inside the card body */
#customizeModal #scpanel-appearance .scThemeSection .scAppSection__card{

  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

/* If the injected .scTheme is a full-width block, shrink it to content */
#customizeModal #scpanel-appearance .scThemeSection .scTheme{
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: auto;
}

/* ✅ widen ONLY the theme/apply button(s), not the ? help button */
#customizeModal #scpanel-appearance .scThemeSection .scThemeBtn,
#customizeModal #scpanel-appearance .scThemeSection .scTheme button:not(.scHelp){
  margin-left: auto;
  margin-right: auto;
  padding-left: 18px;
  padding-right: 18px;
  min-width: 220px;
}

/* ✅ safety: if a help button lives inside the theme section, keep it tiny */
#customizeModal #scpanel-appearance .scThemeSection button.scHelp{
  min-width: 0;
  padding-left: 0;
  padding-right: 0;
}

.scmodal__bottomRight{
  margin-left: 0;              /* ✅ was auto — this was pushing Done to far right */
  display: inline-flex;
  align-items: center;
  gap: 10px;
}


.scmodal__btn--reset{
  white-space: nowrap;
}
/* =========================
   Reset button INSIDE panels (not footer)
   ========================= */

.scpanel__actions{
  display: flex;
  justify-content: flex-end;
  padding: 14px 18px 18px;
  border-top: 1px solid rgba(255,255,255,.10);
}

/* light theme */
html[data-theme="light"] .scpanel__actions{
  border-top-color: rgba(0,0,0,.10);
}
/* =========================
   Appearance tab: checkbox rows (replaces toggle buttons)
   ========================= */

/* =========================
   Appearance tab: checkbox rows (match During Spin style)
   ========================= */

/* Make each checkbox row a proper “card row” like scspinRow */
#customizeModal #scpanel-appearance .scGradientRow--check{
  margin-top: 10px;
  padding: 12px;

  border-radius: 14px;
  border: 1px solid var(--sc-line);
  background: var(--sc-surface2);

  transition: background-color 140ms ease, border-color 140ms ease, transform 90ms ease;
}

#customizeModal #scpanel-appearance .scGradientRow--check:hover{
  background: var(--sc-surface);
  border-color: var(--sc-line2);
}

#customizeModal #scpanel-appearance .scGradientRow--check:active{
  transform: translateY(1px);
}

/* The label becomes the full-width row layout */
#customizeModal #scpanel-appearance .scGradientCheck{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  cursor: pointer;
  user-select: none;
}

#customizeModal #scpanel-appearance .scGradientCheck__text{
  font-size: 13.2px;
  font-weight: 500;
  color: var(--sc-fg);
  line-height: 1.2;
}

/* Checkbox style like During Spin */
#customizeModal #scpanel-appearance .scAppCheck{
  width: 18px;
  height: 18px;
  accent-color: var(--sc-accent);
  cursor: pointer;
}

/* Optional: subtle “on” emphasis like your playing/active states */
#customizeModal #scpanel-appearance .scGradientRow--check.is-on{
  border-color: rgba(79,140,255,.35);
}

/* Nice focus ring when tabbing to the checkbox */
#customizeModal #scpanel-appearance .scAppCheck:focus-visible{
  outline: 2px solid rgba(79,140,255,.55);
  outline-offset: 3px;
  border-radius: 6px;
}
/* =========================================================
   ✅ FINAL OVERRIDES (must be LAST in file)
   Fix late rules that re-introduce min-width / gaps.
   Then FLUID shrink below 330px (same layout, smaller UI).
   ========================================================= */

/* 1) IMPORTANT: kill late min-widths / nowrap that cause overflow */
@media (max-width: 420px){

  /* Theme button late rule was forcing min-width:220 (breaks small screens) */
  #customizeModal #scpanel-appearance .scThemeSection .scThemeBtn,
  #customizeModal #scpanel-appearance .scThemeSection .scTheme button:not(.scHelp){
    min-width: 0;
    width: 100%;
  }

  /* allow long reset labels to wrap instead of overflowing */
  #customizeModal .scmodal__btn--reset,
  #customizeModal .scpanel__actions .scmodal__btn{
    white-space: normal;
  }

  /* safety: anything inside modal may shrink */
  #customizeModal button,
  #customizeModal select,
  #customizeModal input{
    max-width: 100%;
  }
}


/* =========================================================
   2) FLUID SHRINK (<= 330px)
   Keep the SAME layout as 331px (your <=420 layout),
   but scale fonts/paddings/gaps/buttons smoothly down.
   ========================================================= */
@media (max-width: 330px){

  /* ---- Fluid tokens (upper bounds match your 420px look) ---- */
  #customizeModal{
    --scF:  clamp(10.25px, 4vw, 13px);          /* base font (330≈13) */
    --scP0: clamp(4px,   2vw, 8px);
    --scP1: clamp(6px,   3vw, 10px);            /* panels top padding */
    --scP2: clamp(7px, 3.6vw, 12px);            /* panels side padding */
    --scCard: clamp(8px, 3.7vw, 12px);          /* card/panel inner padding */
    --scGap: clamp(6px, 2.4vw, 8px);            /* generic gaps */
    --scRad: clamp(10px, 3.8vw, 14px);          /* rounded corners */
    --scBtnFs: clamp(10.5px, 3.6vw, 12px);
    --scBtnPy: clamp(7px, 2.7vw, 9px);
    --scBtnPx: clamp(9px, 3.6vw, 12px);

    --scCtlH: clamp(32px, 12vw, 40px);          /* dropdown/buttons height */
    --scCtlW: clamp(32px, 12vw, 40px);          /* icon button size */
    --scThumb: clamp(16px, 5.6vw, 22px);        /* slider thumb */
  }

  /* base type */
  #customizeModal .scmodal__panel{
    font-size: var(--scF);
    line-height: 1.28;
  }

  /* close button scales */
  #customizeModal .scmodal__close{
    width: clamp(28px, 11vw, 36px);
    height: clamp(28px, 11vw, 36px);
    border-radius: clamp(9px, 3vw, 10px);
  }
  #customizeModal .scmodal__close svg{
    width: clamp(14px, 5vw, 18px);
    height: clamp(14px, 5vw, 18px);
  }

  /* tabs: same behavior, smaller */
  #customizeModal .sctabsbar{
    padding: var(--scP0) var(--scP2);
  }
  #customizeModal .sctabs{
    gap: clamp(4px, 1.8vw, 6px);
  }
  #customizeModal .sctab{
    font-size: var(--scBtnFs);
    padding: clamp(6px, 2.6vw, 7px) clamp(8px, 3.2vw, 9px);
    border-radius: clamp(9px, 3.4vw, 11px);
  }

#customizeModal .scpanels{
  flex: 1 1 auto;
  min-height: 0;          /* ✅ required for flex scrolling */
  max-height: none;       /* ✅ don't fight the panel height */

  overflow-y: auto;       /* ✅ ONLY this scrolls */
  overflow-x: hidden;     /* ✅ no horizontal scroll */
}
  #customizeModal .scpanel__inner{
    padding: var(--scCard);
    border-radius: var(--scRad);
  }

  /* bottom bar + buttons shrink */
  #customizeModal .scmodal__bottom{
    padding: var(--scP0) var(--scP2) var(--scP2);
    gap: clamp(6px, 2.2vw, 8px);
    margin-top: auto; /* ✅ pushes footer to bottom INSIDE the panel */
  }
  #customizeModal .scmodal__btn{
    font-size: var(--scBtnFs);
    padding: var(--scBtnPy) var(--scBtnPx);
    border-radius: clamp(9px, 3.4vw, 12px);
  }

  /* panel reset area: remove the “air” */
  #customizeModal .scpanel__actions{
    padding: var(--scP0) var(--scP2) var(--scP2);
  }

  /* ===== During/After spin: keep stacked layout, just tighter ===== */
  #customizeModal #scpanel-beforespin .scspin,
  #customizeModal #scpanel-afterspin .scspin{
    gap: clamp(10px, 3.2vw, 12px);
  }

  #customizeModal #scpanel-beforespin .scspinSection,
  #customizeModal #scpanel-afterspin .scspinSection{
    border-radius: var(--scRad);
  }

  #customizeModal #scpanel-beforespin .scspinRow--inSection,
  #customizeModal #scpanel-afterspin .scspinRow--inSection{
    padding: clamp(8px, 3.7vw, 12px);
  }

  #customizeModal #scpanel-beforespin .scspinRow,
  #customizeModal #scpanel-afterspin .scspinRow{
    gap: var(--scGap);
  }

  #customizeModal #scpanel-beforespin .scspinRow__label,
  #customizeModal #scpanel-afterspin .scspinRow__label{
    font-size: clamp(11px, 3.7vw, 13.2px);
    line-height: 1.2;
  }

  /* dropdown full-width + fluid height */
  #customizeModal #scpanel-beforespin .scSoundSelect,
  #customizeModal #scpanel-afterspin .scSoundSelect{
    height: var(--scCtlH);
    min-width: 0;
    width: 100%;
    font-size: clamp(10.5px, 3.6vw, 13px);
    border-radius: clamp(10px, 3.6vw, 12px);
  }

  /* play/stop smaller */
  #customizeModal #scpanel-beforespin .scSoundBtn,
  #customizeModal #scpanel-afterspin .scSoundBtn{
    width: var(--scCtlW);
    height: var(--scCtlW);
    border-radius: clamp(9px, 3.2vw, 12px);
  }

  /* sliders thumb size shrinks (your JS already reads --thumb-size) */
  #customizeModal #scpanel-beforespin .scVol,
  #customizeModal #scpanel-afterspin .scVol,
  #customizeModal #scpanel-beforespin .scDur,
  #customizeModal #scpanel-beforespin .scEntries{
    --thumb-size: var(--scThumb);
    gap: clamp(5px, 2vw, 8px);
  }

  /* duration reset button shrinks */
  #customizeModal #scpanel-beforespin .scDur__reset{
    width: clamp(26px, 10vw, 34px);
    height: clamp(26px, 10vw, 34px);
    border-radius: clamp(8px, 3vw, 10px);
  }

  /* ===== Appearance: tighten gaps/paddings smoothly ===== */
  #customizeModal #scpanel-appearance .scapp{
    gap: clamp(8px, 3vw, 14px);
  }

  #customizeModal #scpanel-appearance .scAppSection{
    gap: clamp(5px, 2.2vw, 8px);
    margin-top: clamp(6px, 3vw, 10px);
  }

  #customizeModal #scpanel-appearance .scAppSection__card{
    padding: var(--scCard);
    border-radius: var(--scRad);
  }

  /* checkbox rows */
  #customizeModal #scpanel-appearance .scGradientRow--check{
    margin-top: clamp(6px, 2.6vw, 10px);
    padding: clamp(8px, 3.7vw, 12px);
    border-radius: var(--scRad);
  }

  /* center/page bg rows */
  #customizeModal .scCenterRow,
  #customizeModal .scPageBgRow{
    margin-top: clamp(8px, 3vw, 12px);
    padding: clamp(8px, 3.7vw, 12px);
    border-radius: var(--scRad);
    gap: clamp(8px, 3vw, 12px);
  }

  #customizeModal button[data-center-image-btn]{
    width: clamp(30px, 12vw, 40px) !important;
    height: clamp(30px, 12vw, 40px) !important;
    border-radius: clamp(9px, 3.2vw, 12px) !important;
  }

  #customizeModal .scPageBgReset{
    width: clamp(30px, 12vw, 40px);
    height: clamp(30px, 12vw, 40px);
    border-radius: clamp(9px, 3.2vw, 12px);
  }

  /* theme menu tighter */
  #customizeModal .scThemeMenu{
    padding: clamp(8px, 3.2vw, 12px);
    border-radius: clamp(12px, 4vw, 14px);
  }
}


/* =========================================================
   3) Ultra-tiny safety (<= 140px)
   If you REALLY test absurd widths, remove extras that force wrap.
   ========================================================= */
@media (max-width: 140px){
  #customizeModal .scHelp{ display: none !important; }
  #customizeModal .scVol__ticks,
  #customizeModal .scDur__ticks,
  #customizeModal .scEntries__ticks{ display: none !important; }
}/* =========================================================
   ✅ ULTRA FIX: <= 330px horizontal overflow (root cause)
   The Appearance mode toggle row is too wide.
   We shrink icons/switch + replace long label text with short text.
   MUST BE LAST in file.
   ========================================================= */
@media (max-width: 330px){

  /* safety: never allow horizontal overflow inside modal */
  #customizeModal .scmodal__panel,
  #customizeModal .scpanels,
  #customizeModal .scpanel__inner{
    overflow-x: hidden !important;
  }

  /* =========
     APPEARANCE TOP TOGGLE (Wheel Colors / BG Image)
     ========= */

  /* allow the whole top row to wrap instead of forcing overflow */
  #customizeModal #scpanel-appearance .scapp__mode{
    flex-wrap: wrap;
    gap: 8px;
    padding-bottom: 8px;
  }

  /* allow the toggle cluster to wrap */
  #customizeModal #scpanel-appearance .scapptoggle{
    flex-wrap: wrap;
    gap: 8px;
  }

  /* shrink the icon tiles from 42px -> 30px */
  #customizeModal #scpanel-appearance .scapptoggle__label--withImg .scWheelColorsTopImg,
  #customizeModal #scpanel-appearance .scapptoggle__label--withImg .scWheelBgTopImg{
    width: 30px !important;
    height: 30px !important;
    border-radius: 10px;
  }

  /* shrink the switch from 52x28 -> 44x24 */
  #customizeModal #scpanel-appearance .scapptoggle__switch{
    width: 44px;
    height: 24px;
  }

  #customizeModal #scpanel-appearance .scapptoggle__thumb{
    width: 16px;
    height: 16px;
    left: 3px;
  }

  /* thumb travel distance for 44px switch */
  #customizeModal #scpanel-appearance
  .scapptoggle__switch input:checked ~ .scapptoggle__track .scapptoggle__thumb{
    transform: translate(20px, -50%);
  }

  /* ---- CRITICAL: replace long label text with short text ----
     Your labels are:
       <span ... data-mode-label="colors"> ... Wheel Colors </span>
       <span ... data-mode-label="bg"> ... Background Image </span>
     We keep the icon, but hide original text and inject shorter text.
  */
  #customizeModal #scpanel-appearance [data-mode-label="colors"],
  #customizeModal #scpanel-appearance [data-mode-label="bg"]{
    /* hide original text nodes without breaking layout */
    font-size: 0;
    line-height: 0;
    gap: 6px;
  }

  #customizeModal #scpanel-appearance [data-mode-label="colors"]::after{
    content: "Colors";
    font-size: 11px;
    line-height: 1;
    font-weight: 600;
    color: inherit;
  }

  #customizeModal #scpanel-appearance [data-mode-label="bg"]::after{
    content: "BG";
    font-size: 11px;
    line-height: 1;
    font-weight: 600;
    color: inherit;
  }

  /* also shrink checkbox-row gaps a bit more (removes “unnecessary air”) */
  #customizeModal #scpanel-appearance .scGradientRow--check{
    padding: 9px;
    margin-top: 7px;
  }

  /* general text wrapping safety inside modal */
  #customizeModal .scspinRow__label,
  #customizeModal .scGradientCheck__text,
  #customizeModal .scAppSection__head{
    overflow-wrap: anywhere;
    word-break: break-word;
  }
}


/* =========================================================
   ✅ ULTRA-MICRO SHRINK (<= 270px)
   Fix remaining overflow sources (Center/PageBg rows + tighter UI)
   MUST BE AFTER your <=330 block.
   ========================================================= */
@media (max-width: 270px){

  /* hard safety: nothing inside modal can force horizontal overflow */
  #customizeModal *{ min-width: 0 !important; }
  #customizeModal .scmodal__panel{ font-size: 11px; line-height: 1.18; }

  /* stack these rows (they were title-left + buttons-right overflow) */
  #customizeModal .scCenterRow,
  #customizeModal .scPageBgRow{
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 7px;
    padding: 9px;
    border-radius: 12px;
  }

  #customizeModal .scPageBgRow__right{
    width: 100%;
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 6px;
  }

  /* make the main bg button take full width (no squeeze) */
  #customizeModal .scPageBgBtn{
    flex: 1 1 100%;
    justify-content: center;
    padding: 7px 8px;
    font-size: 10.8px;
    border-radius: 10px;
    gap: 7px;
  }

  /* shrink the small icon buttons */
  #customizeModal .scPageBgReset{
    width: 28px;
    height: 28px;
    border-radius: 9px;
  }
  #customizeModal .scPageBgReset__icon{
    width: 14px;
    height: 14px;
  }

  #customizeModal button[data-center-image-btn]{
    width: 28px !important;
    height: 28px !important;
    border-radius: 9px !important;
    align-self: flex-end;
  }
  #customizeModal button[data-center-image-btn] .scCenterBtn__icon{
    width: 14px !important;
    height: 14px !important;
  }

  /* tighten appearance checkbox rows a bit */
  #customizeModal #scpanel-appearance .scAppCheck{
    width: 15px;
    height: 15px;
  }
  #customizeModal #scpanel-appearance .scGradientCheck__text{
    font-size: 11px;
  }
}

/* =========================================================
   ✅ EXTREME SHRINK (<= 220px)
   Make the Appearance top toggle smaller + guaranteed no overflow.
   ========================================================= */
@media (max-width: 220px){

  /* stack the top toggle vertically (prevents any possible overflow) */
  #customizeModal #scpanel-appearance .scapptoggle{
    flex-direction: column;
    align-items: center;
    gap: 6px;
  }

  /* smaller icon tiles */
  #customizeModal #scpanel-appearance .scapptoggle__label--withImg .scWheelColorsTopImg,
  #customizeModal #scpanel-appearance .scapptoggle__label--withImg .scWheelBgTopImg{
    width: 20px !important;
    height: 20px !important;
    border-radius: 7px;
  }

  /* smaller switch */
  #customizeModal #scpanel-appearance .scapptoggle__switch{
    width: 34px;
    height: 18px;
  }
  #customizeModal #scpanel-appearance .scapptoggle__thumb{
    width: 12px;
    height: 12px;
    left: 3px;
  }
  #customizeModal #scpanel-appearance
  .scapptoggle__switch input:checked ~ .scapptoggle__track .scapptoggle__thumb{
    transform: translate(16px, -50%);
  }

  /* shorten injected labels further */
  #customizeModal #scpanel-appearance [data-mode-label="colors"]::after{
    content: "C";
    font-size: 10px;
  }
  #customizeModal #scpanel-appearance [data-mode-label="bg"]::after{
    content: "B";
    font-size: 10px;
  }
}

/* =========================================================
   ✅ ABSURD (<= 140px) — icons-only for the top toggle
   ========================================================= */
@media (max-width: 140px){

  /* remove label text entirely */
  #customizeModal #scpanel-appearance [data-mode-label="colors"]::after,
  #customizeModal #scpanel-appearance [data-mode-label="bg"]::after{
    content: "";
    display: none;
  }

  #customizeModal #scpanel-appearance .scapptoggle__label--withImg{
    gap: 0;
  }

  #customizeModal #scpanel-appearance .scapptoggle__label--withImg .scWheelColorsTopImg,
  #customizeModal #scpanel-appearance .scapptoggle__label--withImg .scWheelBgTopImg{
    width: 16px !important;
    height: 16px !important;
    border-radius: 6px;
  }

  #customizeModal #scpanel-appearance .scapptoggle__switch{
    width: 28px;
    height: 16px;
  }
  #customizeModal #scpanel-appearance .scapptoggle__thumb{
    width: 10px;
    height: 10px;
    left: 3px;
  }
  #customizeModal #scpanel-appearance
  .scapptoggle__switch input:checked ~ .scapptoggle__track .scapptoggle__thumb{
    transform: translate(12px, -50%);
  }
}

/* =========================================================
   ✅ <= 100px — final clamp
   ========================================================= */
@media (max-width: 100px){
  #customizeModal .scmodal__panel{ font-size: 9.5px; line-height: 1.12; }
  #customizeModal .scmodal__btn{ padding: 5px 6px; font-size: 9.5px; }
  #customizeModal .scpanels{ padding: 3px 3px 4px; }
  #customizeModal .scpanel__inner{ padding: 5px; }
}
/* =========================================================
   ✅ Stop modal scroll from scrolling the background page
   (CSS-only: prevents scroll chaining)
   ========================================================= */

/* The overlay should “contain” scroll so it never bubbles to <body> */
#customizeModal .scmodal.is-open{
  overscroll-behavior: contain;
}

/* Also contain scroll at the panel level (extra safety) */
#customizeModal .scmodal.is-open .scmodal__panel{
  overscroll-behavior: contain;
}

/* The actual scroll container: contain vertical scroll + allow smooth touch scroll */
#customizeModal .scmodal.is-open .scpanels{
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}

/* Areas that should NOT start page scrolling if you swipe/wheel over them */
#customizeModal .scmodal.is-open .scmodal__backdrop,
#customizeModal .scmodal.is-open .scmodal__top,
#customizeModal .scmodal.is-open .scmodal__bottom,
#customizeModal .scmodal.is-open .sctabsbar{
  overscroll-behavior: contain;
}


/* =========================================================
   ✅ Mobile: footer (Cancel/Done) always visible
   - Only .scpanels scrolls
   - Footer stays pinned at bottom of the modal
   ========================================================= */
@media (max-width: 600px), (max-height: 520px){

  /* make the panel a vertical layout so footer can stay visible */
  #customizeModal .scmodal__panel{
    display: flex;
    flex-direction: column;
  }

  /* the scrolling area becomes ONLY the panels area */
#customizeModal .scpanels{
  flex: 1 1 auto;
  min-height: 0;      /* CRITICAL for flex scroll */
  max-height: none;   /* override old calc(...) */

  overflow-y: auto;
  overflow-x: hidden; /* ✅ kills horizontal scroll inside modal */
}

#customizeModal .scmodal__bottom{
  flex: 0 0 auto;

  /* ✅ IMPORTANT: keep it inside the modal (NOT sticky to page) */
  position: static;

  /* iPhone safe-area so buttons never hide behind home bar */
  padding-bottom: calc(12px + env(safe-area-inset-bottom));

  /* ✅ Cancel + Done always side-by-side on the right */
  flex-wrap: nowrap;
  justify-content: flex-end;
  align-items: center;
}
  /* ✅ prevent the "Done" container from taking full width (fixes split) */
  #customizeModal .scmodal__bottomRight{
    width: auto !important;
    margin-left: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    flex: 0 0 auto !important;
  }


  
}