
/* MeloTools SaaS theme - clean scoped rebuild
   Keeps Retro/XP isolated while giving the default theme a modern product UI. */

/* Hard isolation: SaaS header never appears in Retro. */
html[data-ui-theme="xp"] .saas-header-spacer,
html[data-ui-theme="xp"] .saas-brand{
  display:none !important;
}
html[data-ui-theme="xp"] .logo-saas{
  display:none !important;
}
html[data-ui-theme="xp"] .logo-xp{
  display:block !important;
}

html[data-ui-theme="saas"]{
  --brand:#2f6fe8;
  --brand-strong:#1f5bd7;
  --brand-ink:#123f86;
  --brand-soft:#eef5ff;
  --accent:#f4a51c;
  --bg:#eef4fa;
  --fg:#17324a;
  --muted:#60758a;
  --stroke:#cfddeb;
  --stroke-strong:#b8c9db;
  --surface:#fff;
  --surface-soft:#f7fafd;
  --panel:rgba(255,255,255,.88);
  --panel-soft:rgba(248,251,254,.96);
  --shadow:0 22px 60px rgba(23,50,74,.09);
  --shadow-soft:0 10px 28px rgba(23,50,74,.07);
  --focus-ring:0 0 0 4px rgba(47,111,232,.18);
  background:var(--bg) !important;
  color-scheme:light;
  scrollbar-color:#b7c8da #edf3f8;
  scrollbar-width:thin;
}
html[data-ui-theme="saas"],
html[data-ui-theme="saas"] body,
html[data-ui-theme="saas"] button,
html[data-ui-theme="saas"] input,
html[data-ui-theme="saas"] select,
html[data-ui-theme="saas"] textarea{
  font-family:"Aptos","Segoe UI Variable","Segoe UI",ui-sans-serif,sans-serif !important;
  letter-spacing:0 !important;
  -webkit-font-smoothing:antialiased !important;
  cursor:auto !important;
}
html[data-ui-theme="saas"] button,
html[data-ui-theme="saas"] .btn,
html[data-ui-theme="saas"] .tabbtn,
html[data-ui-theme="saas"] a,
html[data-ui-theme="saas"] [role="button"]{
  cursor:pointer !important;
}
html[data-ui-theme="saas"] body{
  margin:0 !important;
  color:var(--fg) !important;
  background:transparent !important;
  overflow-x:hidden !important;
  position:relative !important;
}
html[data-ui-theme="saas"] body::before{
  content:"" !important;
  position:fixed !important;
  inset:0 !important;
  z-index:-2 !important;
  pointer-events:none !important;
  background:
    radial-gradient(720px 320px at 18% 0%, rgba(47,111,232,.15), transparent 66%),
    radial-gradient(560px 280px at 86% 10%, rgba(244,165,28,.09), transparent 70%),
    linear-gradient(180deg,#fbfdff 0%,#f0f5fa 50%,#e9f1f8 100%) !important;
}
html[data-ui-theme="saas"] body::after{
  content:"" !important;
  position:fixed !important;
  inset:0 !important;
  z-index:-1 !important;
  pointer-events:none !important;
  background:
    radial-gradient(680px 260px at 12% 12%, rgba(255,255,255,.58), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0)) !important;
}
html[data-ui-theme="saas"] ::-webkit-scrollbar{ width:12px !important; height:12px !important; }
html[data-ui-theme="saas"] ::-webkit-scrollbar-track{ background:#edf3f8 !important; }
html[data-ui-theme="saas"] ::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,#c7d6e7,#9fb4ca) !important;
  border:3px solid #edf3f8 !important;
  border-radius:999px !important;
}

.skip-link{
  position:fixed !important;
  left:18px !important;
  top:14px !important;
  z-index:20000 !important;
  transform:translateY(-180%) !important;
  padding:10px 14px !important;
  border-radius:999px !important;
  background:#2f6fe8 !important;
  color:#fff !important;
  font-weight:800 !important;
  text-decoration:none !important;
  box-shadow:0 14px 28px rgba(47,111,232,.24) !important;
  transition:transform .18s ease !important;
}
.skip-link:focus,
.skip-link:focus-visible{ transform:translateY(0) !important; outline:none !important; }

html[data-ui-theme="saas"] .header{
  width:min(1160px, calc(100% - 32px)) !important;
  margin:20px auto 0 !important;
  padding:0 !important;
  position:sticky !important;
  top:14px !important;
  z-index:12000 !important;
  background:transparent !important;
  overflow:visible !important;
}
html[data-ui-theme="saas"] .header-top{
  display:grid !important;
  grid-template-columns:1fr auto 1fr !important;
  align-items:center !important;
  gap:16px !important;
  min-height:108px !important;
  padding:14px 22px !important;
  border:1px solid rgba(207,221,235,.88) !important;
  border-radius:30px !important;
  background:rgba(255,255,255,.72) !important;
  box-shadow:0 18px 52px rgba(23,50,74,.08) !important;
  backdrop-filter:blur(18px) saturate(145%) !important;
  -webkit-backdrop-filter:blur(18px) saturate(145%) !important;
  overflow:visible !important;
  position:relative !important;
}
html[data-ui-theme="saas"] .saas-header-spacer{ display:block !important; min-height:1px !important; }
html[data-ui-theme="saas"] .saas-brand{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-width:0 !important;
  cursor:pointer !important;
  position:relative !important;
  z-index:1 !important;
}
html[data-ui-theme="saas"] .saas-brand-logo{
  display:block !important;
  height:88px !important;
  width:auto !important;
  max-width:370px !important;
  object-fit:contain !important;
  filter:drop-shadow(0 10px 16px rgba(23,50,74,.09)) !important;
  cursor:pointer !important;
}
html[data-ui-theme="saas"] .theme-switcher{
  grid-column:3 !important;
  grid-row:1 !important;
  justify-self:end !important;
  margin-right:58px !important;
  display:inline-flex !important;
  align-items:center !important;
  gap:4px !important;
  padding:5px !important;
  border:1px solid rgba(207,221,235,.92) !important;
  border-radius:16px !important;
  background:rgba(247,250,253,.92) !important;
  position:relative !important;
  z-index:1 !important;
}
html[data-ui-theme="saas"] .theme-option{
  min-height:36px !important;
  padding:0 14px !important;
  border:0 !important;
  border-radius:12px !important;
  background:transparent !important;
  color:var(--fg) !important;
  font-size:12px !important;
  font-weight:760 !important;
  box-shadow:none !important;
  text-shadow:none !important;
}
html[data-ui-theme="saas"] .theme-option.active{
  color:#fff !important;
  background:linear-gradient(180deg,#3f7df0,#2865df) !important;
  box-shadow:0 8px 18px rgba(47,111,232,.22) !important;
}
html[data-ui-theme="saas"] #installAppBtn{ display:none !important; }
html[data-ui-theme="saas"] .lang-picker{
  grid-column:3 !important;
  grid-row:1 !important;
  justify-self:end !important;
  position:relative !important;
  z-index:12100 !important;
}
html[data-ui-theme="saas"] .lang-current{
  width:44px !important;
  height:44px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  border:1px solid var(--stroke) !important;
  border-radius:15px !important;
  background:rgba(247,250,253,.94) !important;
  box-shadow:none !important;
}
html[data-ui-theme="saas"] .lang-menu{
  position:absolute !important;
  right:0 !important;
  left:auto !important;
  top:calc(100% + 10px) !important;
  display:grid !important;
  grid-template-columns:repeat(4, minmax(42px, 1fr)) !important;
  gap:8px !important;
  min-width:220px !important;
  padding:10px !important;
  border:1px solid var(--stroke) !important;
  border-radius:18px !important;
  background:rgba(255,255,255,.98) !important;
  box-shadow:0 20px 46px rgba(23,50,74,.16) !important;
  z-index:12200 !important;
}
html[data-ui-theme="saas"] .lang-menu.hidden{ display:none !important; }
html[data-ui-theme="saas"] .lang-option{
  width:44px !important;
  height:44px !important;
  display:grid !important;
  place-items:center !important;
  border:0 !important;
  border-radius:12px !important;
  background:#f7fafd !important;
}

html[data-ui-theme="saas"] .wrap{
  width:min(1160px, calc(100% - 32px)) !important;
  margin:34px auto 48px !important;
  padding:0 !important;
  max-width:none !important;
}
html[data-ui-theme="saas"] .card{
  position:relative !important;
  padding:30px !important;
  border:1px solid rgba(207,221,235,.9) !important;
  border-radius:30px !important;
  background:rgba(255,255,255,.88) !important;
  box-shadow:0 24px 70px rgba(23,50,74,.10) !important;
  overflow:visible !important;
}
html[data-ui-theme="saas"] .xp-window-titlebar,
html[data-ui-theme="saas"] .xp-mute-btn,
html[data-ui-theme="saas"] .logo-wrap{
  display:none !important;
}
html[data-ui-theme="saas"] .nav-shell{
  display:grid !important;
  gap:12px !important;
  width:100% !important;
  margin:0 auto 26px !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  position:relative !important;
  z-index:1 !important;
  overflow:visible !important;
}
html[data-ui-theme="saas"] .main-tabs{
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  justify-content:center !important;
  width:max-content !important;
  max-width:100% !important;
  min-height:48px !important;
  gap:4px !important;
  padding:4px !important;
  margin:0 auto 12px !important;
  overflow:visible !important;
  border:1px solid rgba(207,221,235,.9) !important;
  border-radius:18px !important;
  background:#f3f7fb !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9) !important;
}
html[data-ui-theme="saas"] .tool-tabs{
  display:flex !important;
  flex-wrap:wrap !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  margin:0 auto !important;
  padding:0 !important;
  max-width:100% !important;
  border:0 !important;
  background:transparent !important;
}
html[data-ui-theme="saas"] .tool-tab.is-hidden{ display:none !important; }
html[data-ui-theme="saas"] .main-tab,
html[data-ui-theme="saas"] .tool-tab,
html[data-ui-theme="saas"] .tabbtn{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  flex:0 0 auto !important;
  width:auto !important;
  min-width:0 !important;
  white-space:nowrap !important;
  text-shadow:none !important;
}
html[data-ui-theme="saas"] .main-tabs .tabbtn{
  min-height:38px !important;
  padding:10px 17px !important;
  border:1px solid transparent !important;
  border-radius:14px !important;
  background:transparent !important;
  color:#41586f !important;
  font-size:13px !important;
  font-weight:760 !important;
  box-shadow:none !important;
}
html[data-ui-theme="saas"] .main-tabs .tabbtn.active{
  background:#fff !important;
  color:var(--brand-ink) !important;
  border-color:rgba(207,221,235,.7) !important;
  box-shadow:0 8px 20px rgba(23,50,74,.08) !important;
}
html[data-ui-theme="saas"] .tool-tabs .tabbtn{
  min-height:36px !important;
  padding:9px 14px !important;
  border:1px solid rgba(207,221,235,.92) !important;
  border-radius:13px !important;
  background:#fff !important;
  color:#29435c !important;
  font-size:12.5px !important;
  font-weight:760 !important;
  box-shadow:0 6px 16px rgba(23,50,74,.04) !important;
}
html[data-ui-theme="saas"] .tool-tabs .tabbtn.active{
  background:var(--brand-soft) !important;
  color:var(--brand-ink) !important;
  border-color:rgba(47,111,232,.34) !important;
  box-shadow:0 8px 18px rgba(47,111,232,.10) !important;
}

html[data-ui-theme="saas"] .section{ display:none; opacity:0; position:relative !important; z-index:1 !important; text-align:center !important; }
html[data-ui-theme="saas"] .section.show{ display:block !important; opacity:1 !important; animation:saas-section-in .24s ease both !important; }
html[data-ui-theme="saas"] .title{
  margin:0 0 10px !important;
  color:var(--fg) !important;
  font-size:clamp(1.35rem,1.05rem + .75vw,1.82rem) !important;
  line-height:1.18 !important;
  letter-spacing:-.025em !important;
  font-weight:800 !important;
  text-align:center !important;
  text-shadow:none !important;
}
html[data-ui-theme="saas"] .sub{ margin:0 auto 20px !important; max-width:760px !important; color:var(--muted) !important; text-align:center !important; font-size:14.5px !important; line-height:1.55 !important; }
html[data-ui-theme="saas"] .media-tool-shell,
html[data-ui-theme="saas"] .media-tool-shell-narrow,
html[data-ui-theme="saas"] .youtube-panel,
html[data-ui-theme="saas"] .media-download-card,
html[data-ui-theme="saas"] .instagram-card{
  width:100% !important;
  max-width:920px !important;
  margin:0 auto !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}
html[data-ui-theme="saas"] .media-tool-title,
html[data-ui-theme="saas"] .youtube-batch-hint{ display:none !important; }

html[data-ui-theme="saas"] textarea,
html[data-ui-theme="saas"] input[type="text"],
html[data-ui-theme="saas"] input[type="url"],
html[data-ui-theme="saas"] input[type="number"],
html[data-ui-theme="saas"] input[type="password"],
html[data-ui-theme="saas"] select{
  border:1px solid var(--stroke) !important;
  border-radius:16px !important;
  background:#fff !important;
  color:var(--fg) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 1px 0 rgba(23,50,74,.02) !important;
  font-size:14px !important;
  outline:none !important;
}
html[data-ui-theme="saas"] textarea,
html[data-ui-theme="saas"] .youtube-url-textarea,
html[data-ui-theme="saas"] #youtubeUrls{
  min-height:104px !important;
  height:104px !important;
  max-height:180px !important;
  padding:16px !important;
  line-height:1.5 !important;
  resize:vertical !important;
}
html[data-ui-theme="saas"] #youtubeClipUrl,
html[data-ui-theme="saas"] #instagramUrl{
  min-height:48px !important;
  height:48px !important;
  max-height:80px !important;
  padding:0 16px !important;
}
html[data-ui-theme="saas"] textarea::placeholder,
html[data-ui-theme="saas"] input::placeholder{ color:#7c8fa3 !important; opacity:.95 !important; }

html[data-ui-theme="saas"] .drop{
  position:relative !important;
  margin:18px auto 12px !important;
  min-height:132px !important;
  padding:22px !important;
  border:1px dashed #b9cadd !important;
  border-radius:24px !important;
  background:#fbfdff !important;
  text-align:center !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.96) !important;
}
html[data-ui-theme="saas"] .drop:hover,
html[data-ui-theme="saas"] .drop.dragover{ background:#f7fbff !important; border-color:#8fb0d5 !important; box-shadow:0 0 0 4px rgba(47,111,232,.08) !important; }
html[data-ui-theme="saas"] .drop .icon,
html[data-ui-theme="saas"] .icon{ width:42px !important; height:42px !important; padding:9px !important; border-radius:14px !important; color:var(--brand) !important; background:#edf5ff !important; }
html[data-ui-theme="saas"] .inline{ display:flex !important; justify-content:center !important; }

html[data-ui-theme="saas"] .btn,
html[data-ui-theme="saas"] button.btn,
html[data-ui-theme="saas"] a.btn{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  width:auto !important;
  min-height:42px !important;
  padding:0 18px !important;
  border:1px solid #285fd0 !important;
  border-radius:14px !important;
  background:#2f6fe8 !important;
  color:#fff !important;
  box-shadow:0 9px 20px rgba(47,111,232,.18) !important;
  font-size:13.5px !important;
  font-weight:780 !important;
  text-decoration:none !important;
  text-align:center !important;
  text-shadow:none !important;
}
html[data-ui-theme="saas"] .btn:hover{ background:#245fd5 !important; transform:translateY(-1px) !important; box-shadow:0 13px 26px rgba(47,111,232,.22) !important; }
html[data-ui-theme="saas"] .btn.alt,
html[data-ui-theme="saas"] .btn.secondary,
html[data-ui-theme="saas"] .controls .btn{ background:#fff !important; color:#29435c !important; border:1px solid var(--stroke) !important; box-shadow:0 5px 14px rgba(23,50,74,.05) !important; }
html[data-ui-theme="saas"] .controls .btn{ min-height:34px !important; padding:6px 10px !important; }

html[data-ui-theme="saas"] .inputs,
html[data-ui-theme="saas"] .media-action-strip,
html[data-ui-theme="saas"] .media-command-row,
html[data-ui-theme="saas"] .clip-control-grid{ gap:10px !important; }
html[data-ui-theme="saas"] .media-command-row,
html[data-ui-theme="saas"] .media-action-strip{
  width:min(920px,100%) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  flex-wrap:wrap !important;
  margin-left:auto !important;
  margin-right:auto !important;
  padding:14px !important;
  border:1px solid rgba(207,221,235,.9) !important;
  border-radius:20px !important;
  background:#f8fbfe !important;
}
html[data-ui-theme="saas"] .media-command-row .btn,
html[data-ui-theme="saas"] .media-action-strip .btn{ width:auto !important; min-width:136px !important; max-width:220px !important; flex:0 0 auto !important; }
html[data-ui-theme="saas"] .row,
html[data-ui-theme="saas"] .item,
html[data-ui-theme="saas"] .youtube-batch-item,
html[data-ui-theme="saas"] .removebg-strength,
html[data-ui-theme="saas"] .removebg-preview-card,
html[data-ui-theme="saas"] .youtube-options,
html[data-ui-theme="saas"] .media-options-panel{
  border:1px solid rgba(207,221,235,.9) !important;
  border-radius:20px !important;
  background:#fff !important;
  box-shadow:0 8px 22px rgba(23,50,74,.055) !important;
}
html[data-ui-theme="saas"] .row,
html[data-ui-theme="saas"] .item{ display:flex !important; align-items:center !important; gap:14px !important; padding:12px !important; margin-top:10px !important; }
html[data-ui-theme="saas"] .name,
html[data-ui-theme="saas"] .iname{ min-width:0 !important; overflow:hidden !important; text-overflow:ellipsis !important; white-space:nowrap !important; }
html[data-ui-theme="saas"] .thumb{ width:76px !important; height:102px !important; flex:0 0 auto !important; border:1px solid var(--stroke) !important; border-radius:16px !important; overflow:hidden !important; background:#edf3f8 !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; }
html[data-ui-theme="saas"] .thumb img{ width:100% !important; height:100% !important; object-fit:cover !important; }

html[data-ui-theme="saas"] .youtube-meta{
  display:grid !important;
  grid-template-columns:minmax(128px,180px) minmax(0,1fr) !important;
  align-items:center !important;
  gap:16px !important;
  width:min(760px,100%) !important;
  max-width:100% !important;
  margin:14px auto 0 !important;
  padding:14px !important;
  text-align:left !important;
  overflow:hidden !important;
  border:1px solid rgba(207,221,235,.9) !important;
  border-radius:20px !important;
  background:#fff !important;
  box-shadow:0 8px 22px rgba(23,50,74,.055) !important;
}
html[data-ui-theme="saas"] .youtube-meta.hidden{ display:none !important; }
html[data-ui-theme="saas"] .youtube-meta.simple{ display:block !important; width:min(680px,100%) !important; }
html[data-ui-theme="saas"] .youtube-meta-thumb{ display:block !important; width:100% !important; max-width:180px !important; height:auto !important; aspect-ratio:16/9 !important; object-fit:cover !important; justify-self:center !important; border-radius:16px !important; border:1px solid var(--stroke) !important; background:#e2e8f0 !important; }
html[data-ui-theme="saas"] .youtube-meta-copy{ min-width:0 !important; max-width:100% !important; text-align:left !important; }
html[data-ui-theme="saas"] .youtube-meta-copy strong{ display:block !important; margin-bottom:7px !important; color:var(--fg) !important; font-size:15px !important; line-height:1.35 !important; overflow-wrap:anywhere !important; }
html[data-ui-theme="saas"] .youtube-meta-copy span{ display:block !important; color:var(--muted) !important; font-size:12px !important; line-height:1.4 !important; overflow-wrap:anywhere !important; }

html[data-ui-theme="saas"] .slider-wrap{ border:1px solid var(--stroke) !important; border-radius:18px !important; background:#f8fbfe !important; }
html[data-ui-theme="saas"] .footer{ width:max-content !important; max-width:calc(100% - 28px) !important; margin:18px auto 0 !important; padding:9px 14px !important; border:1px solid rgba(204,218,232,.78) !important; border-radius:999px !important; background:rgba(255,255,255,.62) !important; color:var(--muted) !important; text-align:center !important; font-size:12px !important; }
html[data-ui-theme="saas"] .cookie-footer-link{ z-index:1000 !important; }
html[data-ui-theme="saas"] .cookie-notice,
html[data-ui-theme="saas"] .cookie-panel-card{ border:1px solid var(--stroke) !important; border-radius:24px !important; background:#fff !important; box-shadow:0 24px 70px rgba(23,50,74,.15) !important; }
html[data-ui-theme="saas"] .hidden{ display:none !important; }
html[data-ui-theme="saas"] .privacy-status{
  width:min(760px,100%) !important;
  margin:10px auto 16px !important;
  padding:10px 14px !important;
  border:1px solid #cfe0f2 !important;
  border-radius:14px !important;
  background:#f4f9ff !important;
  color:#48647e !important;
  font-size:13px !important;
  line-height:1.45 !important;
  text-align:center !important;
}
html[data-ui-theme="saas"] .tool-shortcuts{ width:min(900px,100%) !important; margin:0 auto 14px !important; text-align:center !important; }
html[data-ui-theme="saas"] .tool-favorite-toggle,
html[data-ui-theme="saas"] .tool-shortcut-chip{
  min-height:34px !important;
  padding:6px 12px !important;
  border:1px solid #cfdeed !important;
  border-radius:999px !important;
  background:#fff !important;
  color:#38546d !important;
  font-size:12.5px !important;
  font-weight:700 !important;
}
html[data-ui-theme="saas"] .tool-favorite-toggle[aria-pressed="true"]{ background:#fff7d6 !important; border-color:#f0cf62 !important; }
html[data-ui-theme="saas"] .tool-shortcut-row{ display:flex !important; flex-wrap:wrap !important; justify-content:center !important; gap:7px !important; margin-top:8px !important; }
html[data-ui-theme="saas"] .tool-shortcut-row::before{ width:100% !important; color:#6b8094 !important; font-size:11px !important; font-weight:800 !important; text-transform:uppercase !important; letter-spacing:.06em !important; }
html[data-ui-theme="saas"] #favoriteTools::before{ content:"Favoritos"; }
html[data-ui-theme="saas"] #recentTools::before{ content:"Recentes"; }
html[data-ui-theme="saas"] .tool-shortcut-row.hidden{ display:none !important; }
html[data-ui-theme="saas"] .section{ content-visibility:auto; contain-intrinsic-size:700px; }
html[data-ui-theme="saas"] :where(button,a,input,select,textarea,[role="button"]):focus-visible{ outline:none !important; box-shadow:var(--focus-ring),0 0 0 1px rgba(47,111,232,.32) !important; }

html[data-ui-theme="saas"] .xp-dialog{ border:1px solid var(--stroke) !important; border-radius:24px !important; background:#fff !important; box-shadow:0 28px 90px rgba(24,50,74,.22) !important; overflow:hidden !important; color:var(--fg) !important; }
html[data-ui-theme="saas"] .xp-dialog-titlebar{ min-height:50px !important; padding:0 14px 0 18px !important; border:0 !important; background:linear-gradient(135deg,var(--brand),var(--brand-strong)) !important; color:#fff !important; }
html[data-ui-theme="saas"] .saas-share-link{ border:1px solid var(--stroke) !important; border-radius:14px !important; background:#f8fbff !important; color:var(--fg) !important; padding:10px 12px !important; text-align:center !important; text-decoration:none !important; font-weight:700 !important; }

@keyframes saas-section-in{ from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:translateY(0);} }
@media (prefers-reduced-motion:reduce){ html[data-ui-theme="saas"] *, html[data-ui-theme="saas"] *::before, html[data-ui-theme="saas"] *::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; } }

@media (max-width:760px){
  html[data-ui-theme="saas"] body{ font-size:14px !important; }
  html[data-ui-theme="saas"] .header,
  html[data-ui-theme="saas"] .wrap{ width:calc(100% - 20px) !important; }
  html[data-ui-theme="saas"] .header{ position:relative !important; top:auto !important; margin-top:10px !important; }
  html[data-ui-theme="saas"] .header-top{ grid-template-columns:1fr auto !important; min-height:auto !important; padding:12px !important; border-radius:24px !important; gap:10px !important; }
  html[data-ui-theme="saas"] .saas-header-spacer{ display:none !important; }
  html[data-ui-theme="saas"] .saas-brand{ justify-content:flex-start !important; }
  html[data-ui-theme="saas"] .saas-brand-logo{ height:64px !important; max-width:min(230px,62vw) !important; }
  html[data-ui-theme="saas"] .theme-switcher{ grid-column:1 / -1 !important; grid-row:auto !important; width:100% !important; justify-self:center !important; justify-content:center !important; margin:8px 0 0 !important; }
  html[data-ui-theme="saas"] .theme-option{ flex:1 1 0 !important; }
  html[data-ui-theme="saas"] .lang-picker{ grid-column:2 !important; grid-row:1 !important; justify-self:end !important; }
  html[data-ui-theme="saas"] .lang-menu{ min-width:196px !important; grid-template-columns:repeat(4,minmax(38px,1fr)) !important; }
  html[data-ui-theme="saas"] .wrap{ margin-top:20px !important; }
  html[data-ui-theme="saas"] .card{ padding:16px 12px !important; border-radius:24px !important; }
  html[data-ui-theme="saas"] .main-tabs,
  html[data-ui-theme="saas"] .tool-tabs{ justify-content:flex-start !important; flex-wrap:nowrap !important; overflow-x:auto !important; -webkit-overflow-scrolling:touch !important; scrollbar-width:none !important; }
  html[data-ui-theme="saas"] .main-tabs{ width:100% !important; }
  html[data-ui-theme="saas"] .main-tabs .tabbtn{ flex:0 0 auto !important; width:auto !important; min-width:128px !important; }
  html[data-ui-theme="saas"] .tool-tabs .tabbtn{ flex:0 0 auto !important; min-width:150px !important; font-size:13.5px !important; }
  html[data-ui-theme="saas"] .main-tabs::-webkit-scrollbar,
  html[data-ui-theme="saas"] .tool-tabs::-webkit-scrollbar{ display:none !important; }
  html[data-ui-theme="saas"] textarea,
  html[data-ui-theme="saas"] .youtube-url-textarea,
  html[data-ui-theme="saas"] #youtubeUrls{ min-height:96px !important; height:96px !important; }
  html[data-ui-theme="saas"] .media-command-row,
  html[data-ui-theme="saas"] .media-action-strip{ align-items:stretch !important; }
  html[data-ui-theme="saas"] .media-command-row .btn,
  html[data-ui-theme="saas"] .media-action-strip .btn{ width:100% !important; max-width:none !important; }
  html[data-ui-theme="saas"] .youtube-meta{ grid-template-columns:1fr !important; width:100% !important; text-align:center !important; }
  html[data-ui-theme="saas"] .youtube-meta-thumb{ max-width:220px !important; margin:0 auto !important; }
  html[data-ui-theme="saas"] .youtube-meta-copy{ text-align:center !important; }
  html[data-ui-theme="saas"] .row,
  html[data-ui-theme="saas"] .item{ align-items:flex-start !important; flex-wrap:wrap !important; }
  html[data-ui-theme="saas"] .btn,
  html[data-ui-theme="saas"] button.btn,
  html[data-ui-theme="saas"] a.btn{ min-height:44px !important; }
}


/* SaaS footer: restore the cleaner older style */
html[data-ui-theme="saas"] .footer{
  width:min(1180px, calc(100vw - 28px)) !important;
  max-width:min(1180px, calc(100vw - 28px)) !important;
  margin:22px auto 0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  color:#64748b !important;
  text-align:center !important;
  font-size:12px !important;
  line-height:1.5 !important;
}
html[data-ui-theme="saas"] .footer a,
html[data-ui-theme="saas"] .footer-link,
html[data-ui-theme="saas"] .cookie-policy-link,
html[data-ui-theme="saas"] .cookie-footer-link{
  color:#2563eb !important;
}


/* SaaS small alignment fixes: media icons, cookie link, submenu buttons */
html[data-ui-theme="saas"] .media-brand-title{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  width:max-content !important;
  margin:4px auto 14px !important;
  padding:0 !important;
  line-height:1 !important;
  min-height:0 !important;
}
html[data-ui-theme="saas"] .media-brand-title svg{
  display:block !important;
  width:22px !important;
  height:22px !important;
  flex:0 0 auto !important;
  margin:0 !important;
  padding:0 !important;
  background:transparent !important;
  border-radius:0 !important;
  box-shadow:none !important;
  transform:none !important;
}
html[data-ui-theme="saas"] .tool-tabs .tabbtn,
html[data-ui-theme="saas"] .tool-tab{
  min-height:40px !important;
  height:auto !important;
  padding:10px 15px !important;
  line-height:1.2 !important;
  overflow:visible !important;
  align-items:center !important;
}
html[data-ui-theme="saas"] .cookie-footer-link{
  position:fixed !important;
  left:16px !important;
  right:auto !important;
  bottom:14px !important;
  z-index:3000 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:38px !important;
  padding:0 14px !important;
  border:1px solid rgba(207,221,235,.9) !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.88) !important;
  color:#2563eb !important;
  font-family:"Aptos","Segoe UI Variable","Segoe UI",ui-sans-serif,sans-serif !important;
  font-size:12px !important;
  font-weight:760 !important;
  line-height:1 !important;
  text-decoration:underline !important;
  box-shadow:0 10px 24px rgba(23,50,74,.08) !important;
  backdrop-filter:blur(12px) !important;
  -webkit-backdrop-filter:blur(12px) !important;
}
html[data-ui-theme="saas"] .cookie-footer-link:hover{
  background:#fff !important;
  border-color:#b8c9db !important;
}
@media (max-width:760px){
  html[data-ui-theme="saas"] .media-brand-title{
    margin-top:2px !important;
  }
  html[data-ui-theme="saas"] .media-brand-title svg{
    width:20px !important;
    height:20px !important;
  }
  html[data-ui-theme="saas"] .tool-tabs .tabbtn,
  html[data-ui-theme="saas"] .tool-tab{
    min-height:40px !important;
    padding:10px 14px !important;
  }
  html[data-ui-theme="saas"] .cookie-footer-link{
    left:12px !important;
    bottom:12px !important;
    max-width:calc(100vw - 24px) !important;
  }
}


/* SaaS submenu button clipping fix */
html[data-ui-theme="saas"] .tool-tabs{
  align-items:center !important;
  overflow:visible !important;
  padding:2px 0 4px !important;
}
html[data-ui-theme="saas"] .tool-tabs .tabbtn,
html[data-ui-theme="saas"] .tool-tabs .tool-tab,
html[data-ui-theme="saas"] .tool-tab{
  min-height:42px !important;
  height:42px !important;
  padding:0 16px !important;
  line-height:42px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:visible !important;
  white-space:nowrap !important;
  vertical-align:middle !important;
}
html[data-ui-theme="saas"] .tool-tabs .tabbtn *{
  line-height:1.2 !important;
}
@media (max-width:760px){
  html[data-ui-theme="saas"] .tool-tabs{
    overflow-x:auto !important;
    overflow-y:visible !important;
    padding:2px 0 8px !important;
  }
  html[data-ui-theme="saas"] .tool-tabs .tabbtn,
  html[data-ui-theme="saas"] .tool-tabs .tool-tab,
  html[data-ui-theme="saas"] .tool-tab{
    min-height:42px !important;
    height:42px !important;
    padding:0 15px !important;
    line-height:42px !important;
  }
}


html[data-ui-theme="saas"] .card{
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
