:root{
  --ad-bg: var(--bg, #f4f5ef);
  --ad-bg-2: var(--bg2, #eef2f6);
  --ad-surface: color-mix(in srgb, var(--card, #ffffff) 94%, var(--bg, #f4f5ef) 6%);
  --ad-surface-soft: color-mix(in srgb, var(--card, #ffffff) 72%, var(--bg2, #eef2f6) 28%);
  --ad-ink: var(--text, #0c0d0f);
  --ad-muted: var(--muted, #62676f);
  --ad-line: color-mix(in srgb, var(--border, rgba(12, 13, 15, 0.14)) 45%, var(--text, #0c0d0f) 55%);
  --ad-line-strong: color-mix(in srgb, var(--border, rgba(12, 13, 15, 0.28)) 22%, var(--text, #0c0d0f) 78%);
  --ad-panel-line: color-mix(in srgb, var(--text, #0c0d0f) 42%, transparent);
  --ad-panel-divider: color-mix(in srgb, var(--text, #0c0d0f) 30%, transparent);
  --ad-accent: var(--brand1, #5aa2ff);
  --ad-accent-2: var(--brand2, #7c5cff);
  --ad-accent-fill: linear-gradient(135deg, var(--ad-accent), var(--ad-accent-2));
  --ad-accent-soft: color-mix(in srgb, var(--ad-accent) 18%, var(--ad-surface) 82%);
  --ad-on-accent: var(--ink, #0c0d0f);
  --ad-panel: color-mix(in srgb, var(--card, #ffffff) 78%, var(--bg, #f4f5ef) 22%);
  --ad-top-banner-height: 42px;
}

*{
  box-sizing: border-box;
}

html{
  height: 100%;
  background: var(--ad-bg);
  overflow: hidden;
}

body{
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--ad-bg);
  color: var(--ad-ink);
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: 0;
}

button,
input,
select,
textarea{
  font: inherit;
  letter-spacing: 0;
}

button{
  cursor: pointer;
  transition:
    border-color 240ms cubic-bezier(0.22, 1, 0.36, 1),
    background-color 240ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 240ms cubic-bezier(0.22, 1, 0.36, 1),
    color 240ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
}

button:disabled,
input:disabled,
textarea:disabled,
select:disabled{
  cursor: not-allowed;
  opacity: 0.58;
}

.adStudioTopBanner{
  width: 100%;
  min-height: var(--ad-top-banner-height);
  margin: 0;
  padding: 8px clamp(18px, 3vw, 42px);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ad-accent-fill);
  color: #ffffff;
}

.adStudioTopBanner span{
  color: #ffffff;
  font-size: clamp(20px, 2.4vw, 42px);
  font-weight: 900;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
}

.adStudio{
  height: calc(100dvh - var(--nav-height, 68px) - var(--ad-top-banner-height));
  overflow: hidden;
  display: grid;
  align-items: start;
  justify-items: center;
  padding: clamp(14px, 2.2vw, 28px);
}

.adStudioHero{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 28px;
  align-items: end;
  max-width: 1580px;
  margin: 0 auto clamp(24px, 3vw, 42px);
  padding-bottom: clamp(18px, 2vw, 28px);
  border-bottom: 1px solid var(--ad-line);
}

.adStudioEyebrow,
.adPaneLabel,
.adBriefLabel{
  margin: 0;
  color: var(--ad-muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
}

#adProductMenuMode{
  color: var(--ad-ink);
  font-size: clamp(24px, 2.7vw, 42px);
  font-weight: 950;
  line-height: 0.95;
}

.adStudioHero h1{
  max-width: 960px;
  margin: 10px 0 0;
  color: var(--ad-ink);
  font-size: clamp(42px, 5.7vw, 86px);
  font-weight: 900;
  line-height: 0.94;
}

.adStudioLead{
  max-width: 760px;
  margin: 18px 0 0;
  color: var(--ad-muted);
  font-size: clamp(16px, 1.45vw, 21px);
  line-height: 1.45;
}

.adStudioHeroMeta{
  min-width: min(100%, 360px);
  display: grid;
  gap: 0;
  border-top: 1px solid var(--ad-line-strong);
}

.adStudioHeroMeta span{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 46px;
  border-bottom: 1px solid var(--ad-line);
  color: var(--ad-ink);
  font-size: 13px;
  font-weight: 800;
}

.adStudioHeroMeta span::after{
  content: "";
  width: 8px;
  height: 8px;
  background: var(--ad-accent-fill);
}

.adStudioWorkspace{
  width: 100%;
  max-width: 1580px;
  height: 100%;
  min-height: 0;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(260px, 0.95fr) minmax(440px, 1.35fr);
  border: 2px solid var(--ad-panel-line);
  background: var(--ad-panel);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--ad-surface) 74%, transparent),
    0 18px 42px color-mix(in srgb, #000000 12%, transparent);
}

.adProductsPane,
.adProductPane,
.adGeneratePane{
  min-width: 0;
  min-height: 0;
  padding: clamp(18px, 1.7vw, 28px);
}

.adProductsPane,
.adGeneratePane{
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--ad-accent) transparent;
}

.adProductsPane::-webkit-scrollbar,
.adGeneratePane::-webkit-scrollbar,
.adProductMenu::-webkit-scrollbar,
.adUrlFillMenu::-webkit-scrollbar{
  width: 8px;
}

.adProductsPane::-webkit-scrollbar-track,
.adGeneratePane::-webkit-scrollbar-track,
.adProductMenu::-webkit-scrollbar-track,
.adUrlFillMenu::-webkit-scrollbar-track{
  background: color-mix(in srgb, var(--ad-panel-divider) 18%, transparent);
}

.adProductsPane::-webkit-scrollbar-thumb,
.adGeneratePane::-webkit-scrollbar-thumb,
.adProductMenu::-webkit-scrollbar-thumb,
.adUrlFillMenu::-webkit-scrollbar-thumb{
  border-radius: 999px;
  background: var(--ad-accent-fill);
}

.adProductsPane::-webkit-scrollbar-thumb:hover,
.adGeneratePane::-webkit-scrollbar-thumb:hover,
.adProductMenu::-webkit-scrollbar-thumb:hover,
.adUrlFillMenu::-webkit-scrollbar-thumb:hover{
  background: linear-gradient(135deg, var(--ad-accent-2), var(--ad-accent));
}

.adProductsPane,
.adProductPane{
  border-right: 2px solid var(--ad-panel-divider);
}

.adPaneTitleRow,
.adPaneHeader,
.adSectionTitleRow{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.adPaneTitleRow h2,
.adPaneHeader h2,
.adSectionTitleRow h3{
  margin: 7px 0 0;
  color: var(--ad-ink);
  font-size: 18px;
  font-weight: 900;
  line-height: 1.1;
}

.adSectionTitleRow h3{
  margin-top: 0;
  font-size: 15px;
}

.adIconButton{
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 8px;
  background: var(--ad-accent-fill);
  color: var(--ad-on-accent);
}

.adIconButton svg,
.adUploadIcon svg{
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.adProductList{
  display: grid;
  gap: 12px;
  margin-top: 22px;
  padding-top: 16px;
  border-top: 2px solid var(--ad-panel-divider);
}

.adProductItem{
  width: 100%;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 0;
  border-radius: 8px;
  background: color-mix(in srgb, var(--ad-surface) 86%, var(--ad-bg) 14%);
  color: inherit;
  text-align: left;
  transition: border-color 180ms ease, background-color 180ms ease, transform 180ms ease;
}

.adProductItem:hover,
.adProductItem:focus-visible{
  border-color: color-mix(in srgb, var(--ad-accent) 70%, var(--ad-line) 30%);
  background: var(--ad-surface);
  transform: translateY(-1px);
  outline: none;
}

.adProductItemActive{
  border-color: var(--ad-line-strong);
  background: var(--ad-surface);
  box-shadow: inset 0 0 0 1px var(--ad-line-strong);
}

.adProductItemActive .adProductThumb{
  border-color: var(--ad-ink);
}

.adProductThumb{
  width: 38px;
  height: 38px;
  overflow: hidden;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 6px;
  background: var(--ad-accent-soft);
  color: var(--ad-ink);
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
}

.adProductThumb img,
.adProductThumb video{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.adProductName{
  display: block;
  overflow: hidden;
  color: var(--ad-ink);
  font-size: 14px;
  font-weight: 850;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.adProductMeta{
  display: block;
  margin-top: 4px;
  overflow: hidden;
  color: var(--ad-muted);
  font-size: 12px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.adMutedStatus{
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid var(--ad-line);
  border-radius: 999px;
  color: var(--ad-muted);
  font-size: 12px;
  font-weight: 800;
}

.adSelectedProductSummary{
  display: grid;
  grid-template-columns: 165px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  min-height: 190px;
  padding: 14px 0;
  border: 0;
  border-radius: 14px;
  background: transparent;
  cursor: pointer;
  user-select: none;
  transition:
    border-color 240ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 240ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
}

.adGeneratePaneNoProduct > :not(.adSelectedProductSummary){
  display: none !important;
}

.adGeneratePaneNoProduct .adSelectedProductSummary{
  min-height: 100%;
  display: grid;
  grid-template-columns: 1fr;
  place-items: center;
  padding: 0;
}

.adNoProductSelectedMessage{
  max-width: 360px;
  margin: 0;
  color: var(--ad-ink);
  font-size: clamp(22px, 2.2vw, 34px);
  font-weight: 950;
  line-height: 1.08;
  text-align: center;
}

.adSelectedProductThumb{
  width: 165px;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: var(--ad-accent-fill);
  color: #ffffff;
  font-size: 22px;
  font-weight: 950;
  text-transform: uppercase;
}

.adSelectedProductThumb img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.adSelectedProductCopy{
  min-width: 0;
}

.adSelectedProductCopy h2{
  margin: 7px 0 0;
  overflow: hidden;
  color: #ffffff;
  font-size: clamp(24px, 2.5vw, 40px);
  font-weight: 950;
  line-height: 0.98;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.adSelectedProductCopy p:not(.adPaneLabel){
  margin: 10px 0 0;
  display: -webkit-box;
  overflow: hidden;
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.adSelectedProductMeta{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.adSelectedProductMeta span{
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  padding: 0 11px;
  border-radius: 999px;
  background: #000000;
  color: #ffffff;
  font-size: 11px;
  font-weight: 900;
}

.adSelectedProductSummary .adPaneLabel{
  color: rgba(255, 255, 255, 0.72);
}

.adInputTabs,
.adOutputSwitch{
  display: flex;
  gap: 8px;
  margin-top: 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--ad-line);
}

.adInputTab,
.adOutputButton{
  min-height: 34px;
  padding: 0 13px;
  border: 1px solid var(--ad-line);
  border-radius: 999px;
  background: transparent;
  color: var(--ad-muted);
  font-size: 13px;
  font-weight: 850;
}

.adInputTabActive,
.adOutputButtonActive{
  border-color: transparent;
  background: var(--ad-accent-fill);
  color: var(--ad-on-accent);
}

.adProductForm{
  display: grid;
  gap: 18px;
  margin-top: 22px;
}

.adField{
  display: grid;
  gap: 8px;
  min-width: 0;
}

.adField span{
  color: var(--ad-ink);
  font-size: 12px;
  font-weight: 850;
}

.adField input,
.adField select,
.adField textarea{
  width: 100%;
  min-width: 0;
  border: 1px solid var(--ad-line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--ad-surface) 88%, var(--ad-bg) 12%);
  color: var(--ad-ink);
  outline: none;
  transition: border-color 180ms ease, background-color 180ms ease;
}

.adField input,
.adField select{
  min-height: 44px;
  padding: 0 13px;
}

.adField textarea{
  min-height: 128px;
  resize: vertical;
  padding: 12px 13px;
  line-height: 1.45;
}

.adField input:focus,
.adField select:focus,
.adField textarea:focus{
  border-color: color-mix(in srgb, var(--ad-accent) 72%, var(--ad-line) 28%);
  background: var(--ad-surface);
}

.adField input::placeholder,
.adField textarea::placeholder{
  color: color-mix(in srgb, var(--ad-muted) 76%, transparent);
}

.adSourcePanel{
  display: none;
}

.adSourcePanelActive{
  display: block;
}

.adCreativeOptions{
  position: relative;
  margin-top: 22px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

.adCreativeOptions::before{
  content: none;
}

.adCreativeBlock,
.adFootagePanel{
  position: relative;
  z-index: 1;
  min-width: 0;
}

.adFootagePanelHeader{
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 12px;
}

.adFootagePanelHeader{
  margin-bottom: 14px;
}

.adFootagePanelHeader h3{
  margin: 3px 0 0;
  color: var(--ad-ink);
  font-size: 18px;
  font-weight: 950;
  line-height: 1;
}

.adBuilderHeaderIcon{
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 0;
  background: transparent;
  color: var(--ad-accent);
  box-shadow: none;
}

.adBuilderHeaderIcon svg{
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.adCreativeOptions .adSectionTitleRow h3{
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

.adCreativeOptions .adSectionTitleRow h3 span{
  width: 28px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: var(--ad-accent-fill);
  color: #ffffff;
  font-size: 11px;
  font-weight: 950;
}

.adChoiceGrid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.adImageCreativeTypeGrid{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.adFootageTypeGrid{
  grid-template-columns: repeat(3, minmax(150px, 1fr));
}

.adCommercialModeGrid{
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 0;
}

.adGenderGrid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.adChoiceCard{
  position: relative;
  min-width: 0;
  display: block;
}

.adChoiceCard input{
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}

.adChoiceSurface{
  position: relative;
  min-height: 98px;
  height: 100%;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 11px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--ad-line);
  border-radius: 18px;
  background:
    linear-gradient(color-mix(in srgb, var(--ad-surface) 90%, var(--ad-bg) 10%), color-mix(in srgb, var(--ad-surface) 90%, var(--ad-bg) 10%)) padding-box,
    linear-gradient(135deg, transparent, transparent) border-box;
  color: var(--ad-ink);
  cursor: pointer;
  overflow: hidden;
  transform: translateY(0) scale(1);
  transition:
    border-color 260ms cubic-bezier(0.22, 1, 0.36, 1),
    background 260ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 260ms cubic-bezier(0.22, 1, 0.36, 1),
    color 260ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

.adChoiceSurface::after{
  content: "";
  position: absolute;
  top: 12px;
  right: 12px;
  width: 17px;
  height: 17px;
  border: 1px solid color-mix(in srgb, var(--ad-line-strong) 72%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--ad-surface) 82%, transparent);
  box-shadow: inset 0 0 0 4px transparent;
  opacity: 0.72;
  transition:
    border-color 240ms cubic-bezier(0.22, 1, 0.36, 1),
    background 240ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 240ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 240ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
}

.adChoiceSurface::before{
  content: "";
  position: absolute;
  inset: 0;
  display: none;
  opacity: 0;
  background: transparent;
  transition: opacity 260ms cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}

.adChoiceCard:hover .adChoiceSurface,
.adChoiceCard:focus-within .adChoiceSurface{
  border-color: color-mix(in srgb, var(--ad-accent) 54%, var(--ad-line) 46%);
  box-shadow: none;
  transform: translateY(-2px) scale(1.012);
}

.adChoiceCard:hover .adChoiceSurface::before,
.adChoiceCard:focus-within .adChoiceSurface::before{
  opacity: 1;
}

.adChoiceCard input:checked + .adChoiceSurface{
  border-color: transparent;
  background:
    linear-gradient(var(--ad-surface), var(--ad-surface)) padding-box,
    var(--ad-accent-fill) border-box;
  box-shadow: none;
  transform: translateY(-2px) scale(1.018);
}

.adChoiceCard input:checked + .adChoiceSurface::before{
  opacity: 1;
}

.adChoiceCard input:checked + .adChoiceSurface::after{
  border-color: transparent;
  background: var(--ad-accent-fill);
  box-shadow: inset 0 0 0 4px var(--ad-surface);
  opacity: 1;
  transform: scale(1.08);
}

.adChoiceIcon{
  position: relative;
  z-index: 1;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 0;
  background: transparent;
  color: var(--ad-accent);
  transition:
    background-color 260ms cubic-bezier(0.22, 1, 0.36, 1),
    color 260ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

.adChoiceIcon svg,
.adFieldLabel svg{
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.adChoiceCard:hover .adChoiceIcon,
.adChoiceCard:focus-within .adChoiceIcon,
.adChoiceCard input:checked + .adChoiceSurface .adChoiceIcon{
  background: transparent;
  color: var(--ad-accent-2);
  transform: scale(1.08);
}

.adChoiceSurface strong,
.adChoiceSurface small{
  position: relative;
  z-index: 1;
  display: block;
  min-width: 0;
}

.adChoiceSurface strong{
  color: var(--ad-ink);
  font-size: 13px;
  font-weight: 950;
  line-height: 1.08;
}

.adChoiceSurface small{
  margin-top: 5px;
  color: var(--ad-muted);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.25;
}

.adGenderMale .adChoiceIcon{
  color: #2676ff;
  background: transparent;
}

.adGenderFemale .adChoiceIcon{
  color: #ff4fa3;
  background: transparent;
}

.adGenderMale input:checked + .adChoiceSurface{
  background:
    linear-gradient(var(--ad-surface), var(--ad-surface)) padding-box,
    linear-gradient(135deg, #68b7ff, #2676ff) border-box;
}

.adGenderFemale input:checked + .adChoiceSurface{
  background:
    linear-gradient(var(--ad-surface), var(--ad-surface)) padding-box,
    linear-gradient(135deg, #ff8cc9, #ff3f91) border-box;
}

.adGenderMale input:checked + .adChoiceSurface .adChoiceIcon{
  background: transparent;
  color: #2676ff;
}

.adGenderFemale input:checked + .adChoiceSurface .adChoiceIcon{
  background: transparent;
  color: #ff4fa3;
}

.adFootagePanel,
.adCommercialModePanel,
.adImageStylePanel{
  margin-top: 14px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--ad-line) 72%, transparent);
  border-radius: 18px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--ad-surface-soft) 92%, transparent), color-mix(in srgb, var(--ad-surface) 82%, transparent));
  animation: adOptionPanelEnter 260ms cubic-bezier(0.22, 1, 0.36, 1);
  transition:
    border-color 260ms cubic-bezier(0.22, 1, 0.36, 1),
    background 260ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 260ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

.adFootagePanel:hover,
.adCommercialModePanel:hover,
.adImageStylePanel:hover{
  border-color: color-mix(in srgb, var(--ad-accent) 36%, var(--ad-line) 64%);
  box-shadow: none;
}

.adFootagePanel[hidden],
.adCommercialModePanel[hidden],
.adImageStylePanel[hidden]{
  display: none;
}

.adCreativeBlock[hidden],
body.adGenerationModeVideo .adImageCreativeBlock,
body.adGenerationModeImage .adVideoCreativeBlock,
body.adGenerationModeVideo .adImageStylePanel,
body.adGenerationModeImage .adCreativeOptions .adReferenceSection{
  display: none !important;
}

.adImageStyleGrid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.adImageStyleCard{
  position: relative;
  display: block;
  min-width: 0;
}

.adImageStyleCard input{
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}

.adImageStyleSurface{
  position: relative;
  display: block;
  min-height: 132px;
  aspect-ratio: 4 / 3;
  border: 1px solid color-mix(in srgb, var(--ad-line) 78%, transparent);
  border-radius: 18px;
  background: var(--ad-surface-soft);
  color: #ffffff;
  cursor: pointer;
  overflow: hidden;
  transform: translateY(0) scale(1);
  transition:
    border-color 260ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 260ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

.adImageStyleSurface img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform 360ms cubic-bezier(0.22, 1, 0.36, 1);
}

.adImageStyleSurface::before{
  content: "";
  position: absolute;
  inset: auto 0 0;
  z-index: 1;
  height: 68%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.82), rgba(0, 0, 0, 0.42) 46%, transparent);
  pointer-events: none;
}

.adImageStyleSurface::after{
  content: none;
}

.adImageStyleSurface span{
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 11px;
  z-index: 3;
  color: #ffffff;
  font-size: 12px;
  font-weight: 950;
  line-height: 1.15;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.72);
}

.adImageStyleCard:hover .adImageStyleSurface,
.adImageStyleCard:focus-within .adImageStyleSurface{
  border-color: color-mix(in srgb, var(--ad-accent) 56%, var(--ad-line) 44%);
  transform: translateY(-2px) scale(1.012);
}

.adImageStyleCard:hover .adImageStyleSurface img,
.adImageStyleCard:focus-within .adImageStyleSurface img{
  transform: scale(1.08);
}

.adImageStyleCard input:checked + .adImageStyleSurface{
  border-color: color-mix(in srgb, var(--ad-accent) 82%, #ffffff 18%);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ad-accent) 60%, transparent);
  transform: translateY(-2px) scale(1.018);
}

.adFieldWithIcon .adFieldLabel{
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.adFieldLabel svg{
  width: 17px;
  height: 17px;
  color: var(--ad-accent);
  transition:
    color 220ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.adFieldWithIcon:hover .adFieldLabel svg,
.adFieldWithIcon:focus-within .adFieldLabel svg{
  color: var(--ad-accent-2);
  transform: scale(1.12);
}

.adCreativeOptions .adField select,
.adGenerationSection .adField select{
  appearance: none;
  -webkit-appearance: none;
  border-color: color-mix(in srgb, var(--ad-line) 82%, transparent);
  background:
    linear-gradient(45deg, transparent 50%, color-mix(in srgb, var(--ad-ink) 72%, transparent) 50%) right 18px center / 7px 7px no-repeat,
    linear-gradient(135deg, color-mix(in srgb, var(--ad-ink) 72%, transparent) 50%, transparent 50%) right 13px center / 7px 7px no-repeat,
    linear-gradient(color-mix(in srgb, var(--ad-surface) 92%, var(--ad-bg) 8%), color-mix(in srgb, var(--ad-surface) 92%, var(--ad-bg) 8%)) padding-box,
    linear-gradient(135deg, transparent, transparent) border-box;
  padding-right: 34px;
  transition:
    border-color 220ms cubic-bezier(0.22, 1, 0.36, 1),
    background 220ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 220ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.adField select.adNativeSelectHidden{
  display: none;
}

.adCustomSelect{
  position: relative;
  width: 100%;
  min-width: 0;
}

.adCustomSelectButton{
  width: 100%;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 0 13px;
  border: 1px solid color-mix(in srgb, var(--ad-line) 82%, transparent);
  border-radius: 8px;
  background:
    linear-gradient(color-mix(in srgb, var(--ad-surface) 92%, var(--ad-bg) 8%), color-mix(in srgb, var(--ad-surface) 92%, var(--ad-bg) 8%)) padding-box,
    linear-gradient(135deg, transparent, transparent) border-box;
  color: var(--ad-ink);
  text-align: left;
  font-size: 13px;
  font-weight: 820;
  outline: none;
  transition:
    border-color 220ms cubic-bezier(0.22, 1, 0.36, 1),
    background 220ms cubic-bezier(0.22, 1, 0.36, 1),
    color 220ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.adCustomSelectButton span{
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.adCustomSelectChevron{
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.78;
  transition:
    color 220ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.adCustomSelectLeadingIcon{
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  display: grid;
  place-items: center;
  color: var(--ad-accent);
  transition:
    color 220ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.adCustomSelectLeadingIcon svg{
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.adCustomSelect:hover .adCustomSelectButton,
.adCustomSelectOpen .adCustomSelectButton,
.adCustomSelectButton:focus-visible{
  border-color: transparent;
  background:
    linear-gradient(var(--ad-surface), var(--ad-surface)) padding-box,
    var(--ad-accent-fill) border-box;
  transform: translateY(-1px);
}

.adCustomSelectOpen .adCustomSelectChevron{
  color: var(--ad-accent);
  transform: rotate(180deg);
}

.adCustomSelect:hover .adCustomSelectLeadingIcon,
.adCustomSelectOpen .adCustomSelectLeadingIcon,
.adCustomSelectButton:focus-visible .adCustomSelectLeadingIcon{
  color: var(--ad-accent-2);
  transform: scale(1.08);
}

.adCustomSelectMenu{
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 50;
  max-height: 248px;
  overflow: auto;
  padding: 6px;
  border: 1px solid color-mix(in srgb, var(--ad-line-strong) 40%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--ad-surface) 96%, var(--ad-bg) 4%);
  box-shadow: none;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px) scale(0.985);
  transform-origin: top center;
  transition:
    opacity 180ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 180ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 180ms cubic-bezier(0.22, 1, 0.36, 1);
}

.adCustomSelectOpen .adCustomSelectMenu{
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.adCustomSelectMenu::-webkit-scrollbar{
  width: 7px;
}

.adCustomSelectMenu::-webkit-scrollbar-track{
  background: transparent;
}

.adCustomSelectMenu::-webkit-scrollbar-thumb{
  border-radius: 999px;
  background: color-mix(in srgb, var(--ad-line-strong) 62%, transparent);
}

.adCustomSelectOption{
  width: 100%;
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ad-ink);
  text-align: left;
  font-size: 12px;
  font-weight: 820;
  line-height: 1.2;
  transition:
    background-color 180ms cubic-bezier(0.22, 1, 0.36, 1),
    color 180ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
}

.adCustomSelectOption:hover,
.adCustomSelectOption:focus-visible{
  background: color-mix(in srgb, var(--ad-ink) 7%, transparent);
  color: var(--ad-ink);
  outline: none;
  transform: translateX(2px);
}

.adCustomSelectOptionActive{
  background: color-mix(in srgb, var(--ad-ink) 10%, transparent);
  color: var(--ad-ink);
}

.adCustomSelectOptionActive::after{
  content: "";
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--ad-ink);
}

.adCustomSelectOptionDisabled{
  display: none !important;
}

.adCreativeOptions .adField textarea{
  border-color: color-mix(in srgb, var(--ad-line) 82%, transparent);
  background:
    linear-gradient(color-mix(in srgb, var(--ad-surface) 92%, var(--ad-bg) 8%), color-mix(in srgb, var(--ad-surface) 92%, var(--ad-bg) 8%)) padding-box,
    linear-gradient(135deg, transparent, transparent) border-box;
  transition:
    border-color 220ms cubic-bezier(0.22, 1, 0.36, 1),
    background 220ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 220ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.adCreativeOptions .adField:hover select,
.adGenerationSection .adField:hover select,
.adCreativeOptions .adField select:focus,
.adGenerationSection .adField select:focus{
  border-color: transparent;
  background:
    linear-gradient(45deg, transparent 50%, var(--ad-accent) 50%) right 18px center / 7px 7px no-repeat,
    linear-gradient(135deg, var(--ad-accent-2) 50%, transparent 50%) right 13px center / 7px 7px no-repeat,
    linear-gradient(var(--ad-surface), var(--ad-surface)) padding-box,
    var(--ad-accent-fill) border-box;
  box-shadow: none;
  transform: translateY(-1px);
}

.adCreativeOptions .adField:hover textarea,
.adCreativeOptions .adField textarea:focus{
  border-color: transparent;
  background:
    linear-gradient(var(--ad-surface), var(--ad-surface)) padding-box,
    var(--ad-accent-fill) border-box;
  box-shadow: none;
  transform: translateY(-1px);
}

.adCommercialModePanel{
  margin-top: 12px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.adCommercialModePanel:hover{
  box-shadow: none;
}

.adReferenceSection{
  position: relative;
  z-index: 1;
  margin-top: 16px;
}

.adReferenceGrid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.adReferenceDrop{
  position: relative;
  min-width: 0;
  min-height: 92px;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 13px;
  border: 1px dashed color-mix(in srgb, var(--ad-line-strong) 72%, transparent);
  border-radius: 14px;
  background:
    linear-gradient(color-mix(in srgb, var(--ad-surface) 92%, var(--ad-bg) 8%), color-mix(in srgb, var(--ad-surface) 92%, var(--ad-bg) 8%)) padding-box,
    linear-gradient(135deg, transparent, transparent) border-box;
  cursor: pointer;
  transition:
    border-color 220ms cubic-bezier(0.22, 1, 0.36, 1),
    background 220ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.adReferenceDrop:hover,
.adReferenceDrop:focus-within,
.adReferenceDropActive{
  border-style: solid;
  border-color: transparent;
  background:
    linear-gradient(var(--ad-surface), var(--ad-surface)) padding-box,
    var(--ad-accent-fill) border-box;
  transform: translateY(-1px);
}

.adReferenceDrop input{
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.adReferenceIcon{
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--ad-line) 82%, transparent);
  border-radius: 10px;
  background: transparent;
  color: var(--ad-accent);
  transition:
    border-color 220ms cubic-bezier(0.22, 1, 0.36, 1),
    color 220ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.adReferenceIcon svg{
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.adReferenceIcon img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.adReferenceDrop:hover .adReferenceIcon,
.adReferenceDrop:focus-within .adReferenceIcon,
.adReferenceDropActive .adReferenceIcon{
  border-color: color-mix(in srgb, var(--ad-accent) 64%, transparent);
  color: var(--ad-accent-2);
  transform: scale(1.04);
}

.adReferenceDrop strong,
.adReferenceDrop small{
  display: block;
  min-width: 0;
}

.adReferenceDrop strong{
  color: var(--ad-ink);
  font-size: 13px;
  font-weight: 950;
  line-height: 1.15;
}

.adReferenceDrop small{
  margin-top: 5px;
  color: var(--ad-muted);
  font-size: 11px;
  font-weight: 780;
  line-height: 1.3;
}

@keyframes adOptionPanelEnter{
  from{
    opacity: 0;
    transform: translateY(8px) scale(0.99);
  }
  to{
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.adHelpText{
  margin: 9px 0 0;
  color: var(--ad-muted);
  font-size: 12px;
  line-height: 1.45;
}

.adUploadDrop{
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 13px;
  align-items: center;
  min-height: 88px;
  padding: 16px;
  border: 2px dashed var(--ad-line-strong);
  border-radius: 8px;
  background:
    linear-gradient(var(--ad-surface-soft), var(--ad-surface-soft)) padding-box,
    linear-gradient(135deg, transparent, transparent) border-box;
  color: var(--ad-ink);
  cursor: pointer;
  transition:
    border-color 180ms ease,
    background-color 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
}

.adUploadDrop *{
  cursor: pointer;
}

.adUploadDrop:hover,
.adUploadDrop:focus-within{
  border-style: solid;
  border-color: transparent;
  background:
    linear-gradient(#ffffff, #ffffff) padding-box,
    var(--ad-accent-fill) border-box;
  box-shadow: 0 12px 28px color-mix(in srgb, var(--ad-accent) 14%, transparent);
  transform: translateY(-1px);
}

.adUploadDrop:hover .adUploadIcon,
.adUploadDrop:focus-within .adUploadIcon{
  border-color: transparent;
  background:
    linear-gradient(#ffffff, #ffffff) padding-box,
    var(--ad-accent-fill) border-box;
  color: var(--ad-accent);
  transform: scale(1.04);
}

.adUploadDrop:hover strong,
.adUploadDrop:hover small,
.adUploadDrop:focus-within strong,
.adUploadDrop:focus-within small{
  background: var(--ad-accent-fill);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.adUploadDropHasImages{
  grid-template-columns: minmax(0, 1fr);
  min-height: 132px;
  padding: 10px;
  border-style: solid;
}

.adUploadDropHasImages .adUploadIcon,
.adUploadDropHasImages .adUploadCopy{
  display: none;
}

.adUploadDropHasImages:hover,
.adUploadDropHasImages:focus-within{
  background:
    linear-gradient(var(--ad-surface-soft), var(--ad-surface-soft)) padding-box,
    var(--ad-accent-fill) border-box;
}

.adUploadDrop input{
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.adUploadIcon{
  width: 44px;
  height: 44px;
  overflow: hidden;
  display: grid;
  place-items: center;
  border: 1px solid var(--ad-line);
  border-radius: 8px;
  background: var(--ad-surface);
  transition: border-color 180ms ease, background 180ms ease, color 180ms ease, transform 180ms ease;
}

.adUploadIcon img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.adUploadIconHasPreview{
  border-color: transparent;
  background: #000000;
}

.adUploadDrop strong{
  display: block;
  color: var(--ad-ink);
  font-size: 14px;
  line-height: 1.25;
}

.adUploadDrop small{
  display: block;
  margin-top: 5px;
  color: var(--ad-muted);
  font-size: 12px;
  line-height: 1.35;
}

.adImagePreviewGrid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
}

.adImagePreviewGrid:empty{
  display: none;
}

.adImagePreviewTile{
  position: relative;
  aspect-ratio: 1 / 1;
  display: block;
  overflow: hidden;
  border: 1px solid var(--ad-line);
  border-radius: 8px;
  background: var(--ad-surface-soft);
  color: #ffffff;
}

.adImagePreviewTile img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition:
    filter 180ms ease,
    transform 180ms ease;
}

.adProductMenu .adUploadDropHasImages{
  min-height: 82px;
  align-items: start;
}

.adProductMenu .adImagePreviewGrid{
  width: auto;
  grid-template-columns: repeat(3, 100px);
  justify-content: start;
}

.adProductMenu .adImagePreviewTile{
  width: 100px;
}

.adProductImageRemoveButton{
  padding: 0;
  cursor: pointer;
  outline: none;
}

.adProductImageRemoveButton::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--ad-accent-fill);
  opacity: 0;
  mix-blend-mode: screen;
  pointer-events: none;
  transition: opacity 180ms ease;
}

.adProductImageRemoveIcon{
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  color: #ffffff;
  opacity: 0;
  pointer-events: none;
  transform: translateY(4px) scale(0.94);
  transition:
    opacity 180ms ease,
    transform 180ms ease;
}

.adProductImageRemoveIcon svg{
  width: 28px;
  height: 28px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.3;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.42));
}

.adProductImageRemoveButton:hover,
.adProductImageRemoveButton:focus-visible{
  border-color: transparent;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ad-accent) 38%, transparent);
}

.adProductImageRemoveButton:hover::before,
.adProductImageRemoveButton:focus-visible::before{
  opacity: 0.68;
}

.adProductImageRemoveButton:hover img,
.adProductImageRemoveButton:focus-visible img{
  filter: saturate(1.25) contrast(1.08) brightness(0.78);
  transform: scale(1.035);
}

.adProductImageRemoveButton:hover .adProductImageRemoveIcon,
.adProductImageRemoveButton:focus-visible .adProductImageRemoveIcon{
  opacity: 1;
  transform: translateY(0) scale(1);
}

.adUrlFillToggleButton{
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  border: 1px solid var(--ad-line);
  border-radius: 8px;
  background: transparent;
  color: var(--ad-ink);
  font-size: 13px;
  font-weight: 900;
  transition: border-color 180ms ease, background-color 180ms ease, color 180ms ease;
}

.adUrlFillToggleButton:hover,
.adUrlFillToggleButton:focus-visible,
.adUrlFillToggleButtonActive{
  border-color: transparent;
  background: var(--ad-accent-fill);
  color: var(--ad-on-accent);
  outline: none;
}

.adUrlFillPanel{
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--ad-line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--ad-surface-soft) 88%, var(--ad-accent) 12%);
}

.adUrlFillPanel[hidden]{
  display: none;
}

.adUrlFillOptions{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.adUrlFillOption{
  min-height: 38px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  border: 1px solid var(--ad-line);
  border-radius: 8px;
  background: var(--ad-surface);
  color: var(--ad-ink);
  font-size: 12px;
  font-weight: 850;
}

.adUrlFillOption input{
  width: 16px;
  height: 16px;
  accent-color: var(--ad-accent);
}

.adUrlFillRunButton{
  justify-self: start;
}

.adUrlFillMenuOverlay{
  position: fixed;
  inset: 0;
  z-index: 96;
  display: grid;
  place-items: center;
  padding: calc(var(--nav-height, 68px) + 24px) clamp(14px, 4vw, 44px) 28px;
  background: color-mix(in srgb, #000000 24%, transparent);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}

.adUrlFillMenuOverlay[hidden]{
  display: none;
}

.adUrlFillMenuOverlayOpen{
  opacity: 1;
  pointer-events: auto;
}

.adUrlFillMenu{
  width: min(560px, 100%);
  max-height: min(680px, calc(100dvh - var(--nav-height, 68px) - 52px));
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.82) transparent;
  padding: clamp(20px, 2.4vw, 30px);
  border: 0;
  background: var(--ad-accent-fill);
  color: #ffffff;
  box-shadow: 0 22px 70px color-mix(in srgb, #000000 28%, transparent);
  transform: translateY(12px) scale(0.985);
  transition: transform 180ms ease;
}

.adUrlFillMenu::-webkit-scrollbar-track{
  background: rgba(255, 255, 255, 0.14);
}

.adUrlFillMenu::-webkit-scrollbar-thumb,
.adUrlFillMenu::-webkit-scrollbar-thumb:hover{
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.62));
}

.adUrlFillMenu .adPaneLabel,
.adUrlFillMenu .adPaneHeader h2,
.adUrlFillMenu .adField span{
  color: #ffffff;
}

.adUrlFillMenu .adMenuCloseButton{
  color: #ffffff;
}

.adUrlFillMenu .adMenuCloseButton:hover,
.adUrlFillMenu .adMenuCloseButton:focus-visible{
  color: var(--ad-ink);
}

.adUrlFillMenu .adField input{
  border-color: rgba(255, 255, 255, 0.58);
  background: rgba(255, 255, 255, 0.94);
  color: #000000;
  -webkit-text-fill-color: #000000;
}

.adUrlFillMenu .adField input:focus{
  border-color: #ffffff;
  background: #ffffff;
  color: #000000;
  -webkit-text-fill-color: #000000;
}

.adUrlFillMenu .adField input::placeholder{
  color: color-mix(in srgb, var(--ad-muted) 78%, transparent);
}

.adUrlFillMenu .adUrlFillOption{
  position: relative;
  border-color: rgba(255, 255, 255, 0.46);
  background: rgba(255, 255, 255, 0.16);
  color: #ffffff;
  cursor: pointer;
  transition: background-color 220ms ease, border-color 220ms ease, transform 220ms ease;
}

.adUrlFillMenu .adUrlFillOption input{
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  margin: 0;
  border: 2px solid rgba(255, 255, 255, 0.78);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  cursor: pointer;
  transition:
    background-color 220ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 220ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 220ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.adUrlFillMenu .adUrlFillOption input::after{
  content: "";
  position: absolute;
  left: 5px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid #000000;
  border-width: 0 2px 2px 0;
  opacity: 0;
  transform: rotate(45deg) scale(0.45);
  transition:
    opacity 180ms ease,
    transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.adUrlFillMenu .adUrlFillOption input:checked{
  border-color: #ffffff;
  background: #ffffff;
  box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.16);
  transform: scale(1.04);
}

.adUrlFillMenu .adUrlFillOption input:checked::after{
  opacity: 1;
  transform: rotate(45deg) scale(1);
}

.adUrlFillMenu .adUrlFillOption:hover{
  background: rgba(255, 255, 255, 0.24);
  border-color: rgba(255, 255, 255, 0.7);
}

.adUrlFillMenu .adPrimaryButton{
  background: #ffffff;
  color: var(--ad-ink);
}

.adUrlFillMenu .adPrimaryButton:hover,
.adUrlFillMenu .adPrimaryButton:focus-visible{
  border-color: #ffffff;
  background: var(--ad-ink);
  color: #ffffff;
}

.adUrlFillMenu .adTextButton{
  color: #ffffff;
}

.adUrlFillMenuOverlayOpen .adUrlFillMenu{
  transform: translateY(0) scale(1);
}

.adProductActions{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.adPrimaryButton,
.adGenerateButton,
.adTextButton{
  min-height: 42px;
  border-radius: 8px;
  font-weight: 900;
  transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease;
}

.adPrimaryButton,
.adGenerateButton{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border: 1px solid transparent;
  background: var(--ad-accent-fill);
  color: var(--ad-on-accent);
}

.adButtonSpinner{
  width: 15px;
  height: 15px;
  display: none;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: adButtonSpin 760ms linear infinite;
}

.adPrimaryButton[aria-busy="true"] .adButtonSpinner{
  display: inline-block;
}

.adPrimaryButton[aria-busy="true"]{
  cursor: wait;
}

@keyframes adButtonSpin{
  to{
    transform: rotate(360deg);
  }
}

.adPrimaryButton{
  padding: 0 18px;
}

.adPrimaryButton:hover,
.adPrimaryButton:focus-visible,
.adGenerateButton:hover,
.adGenerateButton:focus-visible{
  border-color: var(--ad-ink);
  background: var(--ad-ink);
  color: var(--ad-bg);
}

.adTextButton{
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ad-ink);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.adProductBrief{
  margin-top: 32px;
  padding-top: 22px;
  border-top: 2px solid var(--ad-panel-divider);
}

.adProductPane .adProductBrief{
  margin-top: 24px;
}

.adBriefGrid{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 0.8fr);
  gap: 28px;
  margin-top: 18px;
}

.adBriefGrid p{
  margin: 8px 0 0;
  color: var(--ad-ink);
  font-size: 14px;
  line-height: 1.55;
}

.adBriefGrid ul{
  display: grid;
  gap: 8px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.adBriefGrid li{
  color: var(--ad-ink);
  font-size: 13px;
  line-height: 1.4;
}

.adBriefGrid li::before{
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 8px;
  background: var(--ad-accent-fill);
  vertical-align: 1px;
}

.adSourceLinks{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.adSourceLinks a{
  max-width: 100%;
  overflow: hidden;
  padding: 6px 9px;
  border: 1px solid var(--ad-line);
  border-radius: 999px;
  color: var(--ad-muted);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.adInlineFields{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.adGenerationCommonFields{
  grid-template-columns: minmax(0, 1fr);
}

.adGenerationSettings{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
  padding: 14px;
  border: 2px solid var(--ad-panel-divider);
  border-radius: 14px;
  background: color-mix(in srgb, var(--ad-surface) 72%, transparent);
}

.adGenerationSettings[hidden]{
  display: none !important;
}

.adGenerationCommonFields .adField,
.adGenerationSettings .adField{
  margin-top: 0;
}

#adVideoModelField{
  grid-column: 1 / -1;
}

.adOutputSwitch{
  margin-top: 24px;
}

.adGeneratePane .adField{
  margin-top: 18px;
}

.adGenerationSection{
  margin-top: 22px;
  padding-top: 18px;
  border-top: 2px solid var(--ad-panel-divider);
}

.adGenerationSection .adSectionTitleRow h3{
  margin: 0;
  color: var(--ad-ink);
  font-size: 18px;
  font-weight: 950;
}

.adGenerationModeToggle{
  width: min(360px, 100%);
  min-height: 48px;
  margin: 14px auto 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ad-surface) 92%, var(--ad-bg) 8%);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--ad-line-strong) 36%, transparent),
    0 12px 28px color-mix(in srgb, #000000 8%, transparent);
}

.adGenerationModeOption{
  position: relative;
  min-width: 0;
  display: block;
}

.adGenerationModeOption input{
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}

.adGenerationModeOption span{
  min-height: 48px;
  display: grid;
  place-items: center;
  padding: 0 22px;
  background: #ffffff;
  color: #000000;
  font-size: 14px;
  font-weight: 950;
  line-height: 1;
  cursor: pointer;
  user-select: none;
  transition:
    background 240ms cubic-bezier(0.22, 1, 0.36, 1),
    color 240ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
}

.adGenerationModeImage span{
  border-radius: 999px 0 0 999px;
}

.adGenerationModeVideo span{
  border-radius: 0 999px 999px 0;
}

.adGenerationModeImage span{
  box-shadow: inset -1px 0 0 color-mix(in srgb, var(--ad-line-strong) 20%, transparent);
}

.adGenerationModeOption input:checked + span{
  background: var(--ad-accent-fill);
  color: #ffffff;
}

.adGenerationModeOption:hover span,
.adGenerationModeOption:focus-within span{
  transform: none;
}

.adGeneratedImagePicker{
  margin-top: 16px;
  padding: 14px;
  border-radius: 18px;
  background: color-mix(in srgb, var(--ad-surface-soft) 86%, transparent);
  animation: adOptionPanelEnter 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

.adGeneratedImagePicker[hidden]{
  display: none;
}

.adGeneratedImagePickerHeader{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  color: var(--ad-ink);
}

.adGeneratedImagePickerHeader strong{
  font-size: 13px;
  font-weight: 950;
}

.adGeneratedImagePickerHeader span{
  color: var(--ad-muted);
  font-size: 11px;
  font-weight: 800;
}

.adGeneratedImageList{
  margin-top: 12px;
}

.adGeneratedSourceDropdown{
  position: relative;
  width: 100%;
}

.adGeneratedSourceButton{
  width: 100%;
  min-height: 54px;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(35, 37, 42, 0.94), rgba(24, 26, 30, 0.96));
  color: #ffffff;
  text-align: left;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transition:
    border-color 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
}

.adGeneratedSourceButton:hover,
.adGeneratedSourceButton:focus-visible,
.adGeneratedSourceDropdownOpen .adGeneratedSourceButton{
  border-color: color-mix(in srgb, var(--ad-accent) 48%, rgba(255, 255, 255, 0.16));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 0 0 3px color-mix(in srgb, var(--ad-accent) 16%, transparent);
  outline: none;
}

.adGeneratedSourceButtonThumb,
.adGeneratedSourceOptionThumb{
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
}

.adGeneratedSourceButtonThumb img,
.adGeneratedSourceOptionThumb img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.adGeneratedSourceButtonThumbNone,
.adGeneratedSourceOptionThumbNone{
  background: var(--ad-accent-fill);
  color: #000000;
}

.adGeneratedSourceNoneIcon,
.adGeneratedSourceNoneIcon svg,
.adGeneratedSourceButtonThumbNone svg,
.adGeneratedSourceOptionThumbNone svg{
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.adGeneratedSourceButtonText,
.adGeneratedSourceOptionText{
  min-width: 0;
  display: grid;
  gap: 2px;
}

.adGeneratedSourceButtonText strong,
.adGeneratedSourceOptionText strong{
  overflow: hidden;
  color: #ffffff;
  font-size: 12px;
  font-weight: 950;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.adGeneratedSourceButtonText small,
.adGeneratedSourceOptionText small{
  overflow: hidden;
  color: rgba(255, 255, 255, 0.58);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.adGeneratedSourceMenu{
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + 8px);
  z-index: 160;
  max-height: 270px;
  overflow: auto;
  padding: 7px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(24, 25, 30, 0.98), rgba(12, 13, 16, 0.98));
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.42);
  opacity: 0;
  transform: translateY(6px) scale(0.985);
  transform-origin: bottom center;
  transition:
    opacity 180ms ease,
    transform 180ms ease;
}

.adGeneratedSourceDropdownOpen .adGeneratedSourceMenu{
  opacity: 1;
  transform: translateY(0) scale(1);
}

.adGeneratedSourceOption{
  width: 100%;
  min-height: 50px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 7px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: #ffffff;
  text-align: left;
  cursor: pointer;
  transition:
    background 160ms ease,
    transform 160ms ease;
}

.adGeneratedSourceOption:hover,
.adGeneratedSourceOption:focus-visible,
.adGeneratedSourceOptionActive{
  background: color-mix(in srgb, var(--ad-accent) 18%, rgba(255, 255, 255, 0.08));
  outline: none;
}

.adGeneratedSourceOptionActive{
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ad-accent) 52%, transparent);
}

.adGeneratedImageCarousel{
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 34px;
  align-items: center;
  gap: 8px;
}

.adGeneratedImageRail{
  min-width: 0;
  display: flex;
  gap: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  scrollbar-width: none;
}

.adGeneratedImageRail::-webkit-scrollbar{
  display: none;
}

.adGeneratedImageCard{
  flex: 0 0 84px;
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 14px;
  background:
    linear-gradient(var(--ad-surface), var(--ad-surface)) padding-box,
    linear-gradient(135deg, transparent, transparent) border-box;
  transform: translateY(0) scale(1);
  transition:
    background 240ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
}

.adGeneratedImageNone{
  display: grid;
  place-items: center;
  align-content: center;
  gap: 7px;
  background:
    linear-gradient(color-mix(in srgb, #09090d 88%, transparent), color-mix(in srgb, #09090d 88%, transparent)) padding-box,
    linear-gradient(135deg, #ff335f, #ff61b8) border-box;
  color: #ffffff;
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.adGeneratedImageNoneMark{
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: linear-gradient(135deg, #ff335f, #ff61b8);
}

.adGeneratedImageNoneMark svg,
.adGeneratedImageNav svg{
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.adGeneratedImageCard img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.adGeneratedImageCard:hover,
.adGeneratedImageCard:focus-visible,
.adGeneratedImageCardActive{
  background:
    linear-gradient(var(--ad-surface), var(--ad-surface)) padding-box,
    var(--ad-accent-fill) border-box;
  transform: translateY(-2px) scale(1.02);
  outline: none;
}

.adGeneratedImageCardActive::after{
  content: "";
  position: absolute;
  right: 8px;
  top: 8px;
  width: 12px;
  height: 12px;
  border: 2px solid #ffffff;
  border-radius: 999px;
  background: var(--ad-accent-fill);
}

.adGeneratedImageNone:hover,
.adGeneratedImageNone:focus-visible,
.adGeneratedImageNone.adGeneratedImageCardActive{
  background:
    linear-gradient(color-mix(in srgb, #09090d 88%, transparent), color-mix(in srgb, #09090d 88%, transparent)) padding-box,
    linear-gradient(135deg, #ff335f, #ff61b8) border-box;
}

.adGeneratedImageNone.adGeneratedImageCardActive::after{
  background: linear-gradient(135deg, #ff335f, #ff61b8);
}

.adGeneratedImageNav{
  width: 34px;
  height: 84px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #ffffff;
  cursor: pointer;
  transition:
    color 220ms ease,
    transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 220ms ease;
}

.adGeneratedImageNav:hover:not(:disabled),
.adGeneratedImageNav:focus-visible:not(:disabled){
  color: var(--ad-accent-2);
  transform: scale(1.12);
  outline: none;
}

.adGeneratedImageNav:disabled{
  opacity: 0.28;
  cursor: default;
}

.adGeneratedImageEmpty{
  margin: 0;
  min-width: 190px;
  padding: 16px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--ad-ink) 5%, transparent);
  color: var(--ad-muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.4;
}

.adGenerateButton{
  width: 100%;
  min-height: 58px;
  flex-direction: column;
  align-items: flex-start;
  margin-top: 22px;
  padding: 10px 14px;
  text-align: left;
}

.adGenerateButton small{
  color: currentColor;
  font-size: 11px;
  font-weight: 800;
  opacity: 0.72;
}

.adResults{
  margin-top: 28px;
  padding-top: 22px;
  border-top: 2px solid var(--ad-panel-divider);
}

.adResultStage{
  width: min(100%, clamp(500px, 58vw, 760px));
  aspect-ratio: 1 / 1;
  min-height: 0;
  margin: 16px auto 20px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 8px;
  background: transparent;
  overflow: visible;
}

.adResultStage p{
  margin: 0;
  color: var(--ad-muted);
  font-size: 13px;
  font-weight: 700;
}

.adResultStage img,
.adResultStage video{
  width: 100%;
  height: 100%;
  min-height: 260px;
  display: block;
  object-fit: contain;
  background: transparent;
}

.adResultStage video{
  object-fit: contain;
}

.adResultStage[data-ratio="1:1"]{
  aspect-ratio: 1 / 1;
}

.adResultStage[data-ratio="4:5"]{
  aspect-ratio: 4 / 5;
}

.adResultStage[data-ratio="9:16"]{
  aspect-ratio: 9 / 16;
}

.adResultStage[data-ratio="16:9"]{
  aspect-ratio: 16 / 9;
}

.adResultStage[data-ratio="3:4"]{
  aspect-ratio: 3 / 4;
}

.adOutputCarousel{
  width: 100%;
  height: 100%;
  min-height: 0;
  --ad-output-media-height: calc(100% - 24px);
  position: relative;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 42px;
  align-items: center;
  gap: 10px;
  padding: 12px 6px 8px;
}

.adOutputViewport{
  height: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.adOutputStack{
  height: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.adOutputMediaShell{
  --ad-output-download-offset: 10px;
  height: var(--ad-output-media-height);
  max-width: 100%;
  overflow: hidden;
  position: relative;
  display: block;
  border-radius: 14px;
  background: transparent;
  box-shadow: 0 18px 42px color-mix(in srgb, #000000 18%, transparent);
  animation: adOutputMediaIn 300ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.adOutputCarouselPrev .adOutputMediaShell{
  animation-name: adOutputMediaInPrev;
}

.adOutputCarouselNext .adOutputMediaShell{
  animation-name: adOutputMediaInNext;
}

.adOutputMediaShell[data-ratio="1:1"]{
  width: min(100%, calc(var(--ad-output-media-height) * 1));
}

.adOutputMediaShell[data-ratio="4:5"]{
  width: min(100%, calc(var(--ad-output-media-height) * 0.8));
}

.adOutputMediaShell[data-ratio="9:16"]{
  width: clamp(220px, 28vh, 380px);
  max-width: calc(100vw - 190px);
  height: var(--ad-output-media-height);
  max-height: none;
  aspect-ratio: auto;
}

.adOutputMediaShell[data-ratio="16:9"]{
  width: min(100%, calc(var(--ad-output-media-height) * 1.7778));
}

.adOutputMediaShell[data-ratio="3:4"]{
  width: min(100%, calc(var(--ad-output-media-height) * 0.75));
}

.adOutputMediaShell img,
.adOutputMediaShell video{
  width: 100%;
  height: 100%;
  min-height: 0;
  display: block;
  object-fit: contain;
  background: transparent;
}

.adOutputMediaShell[data-ratio="9:16"] img,
.adOutputMediaShell[data-ratio="9:16"] video{
  object-fit: cover;
}

.adOutputNavButton,
.adOutputNavButton:hover,
.adOutputNavButton:focus,
.adOutputNavButton:focus-visible{
  width: 42px;
  height: var(--ad-output-media-height);
  display: grid;
  place-items: center;
  padding: 0;
  border: 0 !important;
  outline: 0 !important;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--ad-ink) !important;
  transform: translateX(0) scale(1);
}

.adOutputNavButton::before{
  content: none !important;
}

.adOutputNavButton svg{
  width: 34px;
  height: 34px;
  fill: none;
  stroke: currentColor;
  stroke-width: 3.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 9px 16px color-mix(in srgb, #000000 16%, transparent));
  transition:
    stroke 240ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 240ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 240ms cubic-bezier(0.22, 1, 0.36, 1);
}

.adOutputNavButton:hover:not(:disabled) svg,
.adOutputNavButton:focus-visible:not(:disabled) svg{
  stroke: var(--ad-accent);
  filter: drop-shadow(0 12px 18px color-mix(in srgb, var(--ad-accent) 28%, transparent));
}

.adOutputNavButtonPrev:hover:not(:disabled) svg,
.adOutputNavButtonPrev:focus-visible:not(:disabled) svg{
  transform: translateX(-5px) scale(1.18);
}

.adOutputNavButtonNext:hover:not(:disabled) svg,
.adOutputNavButtonNext:focus-visible:not(:disabled) svg{
  transform: translateX(5px) scale(1.18);
}

.adOutputNavButton:active:not(:disabled) svg{
  transform: scale(0.98);
}

.adOutputNavButton:disabled{
  opacity: 0.18;
  cursor: default;
}

.adOutputCounter{
  position: absolute;
  left: 50%;
  top: 10px;
  z-index: 2;
  transform: translateX(-50%);
  color: #ffffff;
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 8px 18px color-mix(in srgb, #000000 48%, transparent);
}

.adOutputDownloadButton{
  position: absolute;
  top: var(--ad-output-download-offset);
  right: var(--ad-output-download-offset);
  z-index: 3;
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: #050505;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0;
  text-transform: uppercase;
  box-shadow: 0 12px 28px color-mix(in srgb, #000000 28%, transparent);
  backdrop-filter: blur(12px);
  transform: scale(1);
  cursor: pointer;
  transition:
    background 220ms cubic-bezier(0.22, 1, 0.36, 1),
    color 220ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.adOutputDownloadButton svg{
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.adOutputDownloadButton:hover,
.adOutputDownloadButton:focus-visible{
  background: #000000;
  color: #ffffff;
  outline: 0;
  transform: scale(1.05);
  box-shadow: 0 20px 40px color-mix(in srgb, #000000 26%, transparent);
}

.adOutputDownloadButton:active{
  transform: scale(0.98);
}

.adOutputBusy{
  min-height: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--ad-muted);
  font-size: 13px;
  font-weight: 850;
}

.adOutputBusyDots{
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.adOutputBusyDots span{
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--ad-accent);
  animation: adOutputBusyPulse 900ms ease-in-out infinite;
}

.adOutputBusyDots span:nth-child(2){
  animation-delay: 0.16s;
}

@keyframes adOutputMediaIn{
  from{
    opacity: 0;
    transform: translateY(10px) scale(0.985);
  }
  to{
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes adOutputMediaInNext{
  from{
    opacity: 0;
    transform: translateX(28px) scale(0.985);
  }
  to{
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@keyframes adOutputMediaInPrev{
  from{
    opacity: 0;
    transform: translateX(-28px) scale(0.985);
  }
  to{
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@keyframes adOutputBusyPulse{
  0%,
  100%{
    opacity: 0.35;
    transform: scale(0.72);
  }
  45%{
    opacity: 1;
    transform: scale(1.22);
  }
}

.adNotice{
  width: 100%;
  padding: 12px 0 0;
  color: var(--ad-muted);
  font-size: 12px;
  line-height: 1.45;
}

.adNotice strong{
  color: var(--ad-ink);
}

.adProductMenuOverlay{
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: calc(var(--nav-height, 68px) + 22px) clamp(14px, 4vw, 44px) 28px;
  background: color-mix(in srgb, #000000 44%, transparent);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}

.adProductMenuOverlay[hidden]{
  display: none;
}

.adProductMenuOverlayOpen{
  opacity: 1;
  pointer-events: auto;
}

.adProductMenu{
  width: min(720px, 100%);
  max-height: min(780px, calc(100dvh - var(--nav-height, 68px) - 52px));
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--ad-accent) transparent;
  padding: clamp(20px, 2.4vw, 30px);
  border: 2px solid var(--ad-line-strong);
  border-radius: 10px;
  background: var(--ad-panel);
  box-shadow: 0 24px 80px color-mix(in srgb, #000000 28%, transparent);
  transform: translateY(12px) scale(0.985);
  transition: transform 180ms ease;
}

.adProductMenuOverlayOpen .adProductMenu{
  transform: translateY(0) scale(1);
}

.adDeleteConfirmOverlay{
  position: fixed;
  inset: 0;
  z-index: 98;
  display: grid;
  place-items: center;
  padding: calc(var(--nav-height, 68px) + 22px) clamp(14px, 4vw, 44px) 28px;
  background: color-mix(in srgb, #000000 42%, transparent);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}

.adDeleteConfirmOverlay[hidden]{
  display: none;
}

.adDeleteConfirmOverlayOpen{
  opacity: 1;
  pointer-events: auto;
}

.adDeleteConfirmMenu{
  width: min(430px, 100%);
  padding: clamp(20px, 2.4vw, 30px);
  border-radius: 16px;
  background: #ffffff;
  color: #000000;
  box-shadow: 0 24px 80px color-mix(in srgb, #000000 30%, transparent);
  transform: translateY(12px) scale(0.985);
  transition: transform 180ms ease;
}

.adDeleteConfirmOverlayOpen .adDeleteConfirmMenu{
  transform: translateY(0) scale(1);
}

.adDeleteConfirmMenu h2{
  margin: 0;
  color: #000000;
  font-size: 28px;
  font-weight: 950;
  line-height: 1;
}

.adDeleteConfirmText{
  margin: 18px 0 22px;
  color: #000000;
  font-size: 14px;
  font-weight: 750;
  line-height: 1.45;
}

.adDangerButton{
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, #ff375f, #ff4fa3);
  color: #ffffff;
  font-weight: 950;
  outline: none;
  transition:
    background-color 220ms ease,
    color 220ms ease,
    transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.adDangerButton:hover,
.adDangerButton:focus-visible{
  background: #000000;
  color: #ffffff;
  transform: translateY(-1px);
}

.adMenuCloseButton{
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ad-ink);
  transition: color 180ms ease, transform 180ms ease;
}

.adMenuCloseButton:hover,
.adMenuCloseButton:focus-visible{
  color: var(--ad-accent);
  transform: scale(1.08);
  outline: none;
}

.adMenuCloseButton svg{
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.adIconButton,
.adProductItem,
.adInputTab,
.adOutputButton,
.adUrlFillToggleButton,
.adPrimaryButton,
.adGenerateButton,
.adTextButton,
.adMenuCloseButton{
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-radius: 999px;
  background: #ffffff;
  transition:
    border-color 240ms cubic-bezier(0.22, 1, 0.36, 1),
    background-color 240ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 240ms cubic-bezier(0.22, 1, 0.36, 1),
    color 240ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
}

.adIconButton::before,
.adProductItem::before,
.adInputTab::before,
.adOutputButton::before,
.adUrlFillToggleButton::before,
.adPrimaryButton::before,
.adGenerateButton::before,
.adTextButton::before,
.adMenuCloseButton::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background: var(--ad-accent-fill);
  opacity: 0;
  pointer-events: none;
  transition: opacity 240ms cubic-bezier(0.22, 1, 0.36, 1);
}

.adIconButton > *,
.adProductItem > *,
.adInputTab > *,
.adOutputButton > *,
.adUrlFillToggleButton > *,
.adPrimaryButton > *,
.adGenerateButton > *,
.adTextButton > *,
.adMenuCloseButton > *{
  position: relative;
  z-index: 1;
}

.adIconButton,
.adInputTabActive,
.adOutputButtonActive,
.adUrlFillToggleButtonActive,
.adPrimaryButton,
.adGenerateButton{
  border-color: transparent;
  color: #ffffff;
}

.adIconButton::before,
.adInputTabActive::before,
.adOutputButtonActive::before,
.adUrlFillToggleButtonActive::before,
.adPrimaryButton::before,
.adGenerateButton::before{
  opacity: 1;
}

.adProductItem,
.adInputTab:not(.adInputTabActive),
.adOutputButton:not(.adOutputButtonActive),
.adUrlFillToggleButton:not(.adUrlFillToggleButtonActive),
.adTextButton,
.adMenuCloseButton{
  border-color: color-mix(in srgb, var(--ad-accent) 30%, transparent);
  background: #ffffff;
  color: var(--ad-accent);
  box-shadow: 0 8px 20px color-mix(in srgb, #000000 5%, transparent);
}

.adOutputButton:not(.adOutputButtonActive) > span,
.adUrlFillToggleButton:not(.adUrlFillToggleButtonActive) > span,
.adTextButton > span,
.adProductItem .adProductName,
.adProductItem .adProductMeta{
  background: var(--ad-accent-fill);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.adProductItem:hover,
.adProductItem:focus-visible,
.adInputTab:not(.adInputTabActive):hover,
.adInputTab:not(.adInputTabActive):focus-visible,
.adOutputButton:not(.adOutputButtonActive):hover,
.adOutputButton:not(.adOutputButtonActive):focus-visible,
.adUrlFillToggleButton:not(.adUrlFillToggleButtonActive):hover,
.adUrlFillToggleButton:not(.adUrlFillToggleButtonActive):focus-visible,
.adTextButton:hover,
.adTextButton:focus-visible,
.adMenuCloseButton:hover,
.adMenuCloseButton:focus-visible{
  border-color: transparent;
  color: #ffffff;
  box-shadow: 0 12px 28px color-mix(in srgb, var(--ad-accent) 22%, transparent);
  transform: translateY(-1px);
  outline: none;
}

.adProductItem:hover::before,
.adProductItem:focus-visible::before,
.adInputTab:not(.adInputTabActive):hover::before,
.adInputTab:not(.adInputTabActive):focus-visible::before,
.adOutputButton:not(.adOutputButtonActive):hover::before,
.adOutputButton:not(.adOutputButtonActive):focus-visible::before,
.adUrlFillToggleButton:not(.adUrlFillToggleButtonActive):hover::before,
.adUrlFillToggleButton:not(.adUrlFillToggleButtonActive):focus-visible::before,
.adTextButton:hover::before,
.adTextButton:focus-visible::before,
.adMenuCloseButton:hover::before,
.adMenuCloseButton:focus-visible::before{
  opacity: 1;
}

.adProductItem:hover .adProductName,
.adProductItem:focus-visible .adProductName,
.adProductItem:hover .adProductMeta,
.adProductItem:focus-visible .adProductMeta,
.adOutputButton:not(.adOutputButtonActive):hover > span,
.adOutputButton:not(.adOutputButtonActive):focus-visible > span,
.adUrlFillToggleButton:not(.adUrlFillToggleButtonActive):hover > span,
.adUrlFillToggleButton:not(.adUrlFillToggleButtonActive):focus-visible > span,
.adTextButton:hover > span,
.adTextButton:focus-visible > span{
  background: none;
  color: #ffffff;
  -webkit-text-fill-color: #ffffff;
}

.adIconButton:hover,
.adIconButton:focus-visible,
.adInputTabActive:hover,
.adInputTabActive:focus-visible,
.adOutputButtonActive:hover,
.adOutputButtonActive:focus-visible,
.adUrlFillToggleButtonActive:hover,
.adUrlFillToggleButtonActive:focus-visible,
.adPrimaryButton:hover,
.adPrimaryButton:focus-visible,
.adGenerateButton:hover,
.adGenerateButton:focus-visible{
  border-color: color-mix(in srgb, var(--ad-accent) 30%, transparent);
  background: #ffffff;
  color: var(--ad-accent);
  box-shadow: 0 12px 28px color-mix(in srgb, var(--ad-accent) 18%, transparent);
  transform: translateY(-1px);
  outline: none;
}

.adIconButton:hover::before,
.adIconButton:focus-visible::before,
.adInputTabActive:hover::before,
.adInputTabActive:focus-visible::before,
.adOutputButtonActive:hover::before,
.adOutputButtonActive:focus-visible::before,
.adUrlFillToggleButtonActive:hover::before,
.adUrlFillToggleButtonActive:focus-visible::before,
.adPrimaryButton:hover::before,
.adPrimaryButton:focus-visible::before,
.adGenerateButton:hover::before,
.adGenerateButton:focus-visible::before{
  opacity: 0;
}

.adInputTabActive:hover > span,
.adInputTabActive:focus-visible > span,
.adOutputButtonActive:hover > span,
.adOutputButtonActive:focus-visible > span,
.adUrlFillToggleButtonActive:hover > span,
.adUrlFillToggleButtonActive:focus-visible > span,
.adPrimaryButton:hover > span:not(.adButtonSpinner),
.adPrimaryButton:focus-visible > span:not(.adButtonSpinner),
.adGenerateButton:hover > span,
.adGenerateButton:focus-visible > span{
  background: var(--ad-accent-fill);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.adTextButton{
  min-width: 42px;
  padding: 0 16px;
  border: 1px solid color-mix(in srgb, var(--ad-accent) 30%, transparent);
  text-decoration: none;
}

.adProductThumb{
  border-radius: 999px;
}

.adIconButton,
.adProductItem,
.adInputTab,
.adOutputButton,
.adUrlFillToggleButton,
.adPrimaryButton,
.adGenerateButton,
.adTextButton,
.adMenuCloseButton{
  border-color: transparent;
  outline: none;
}

.adIconButton:hover,
.adIconButton:focus,
.adIconButton:focus-visible,
.adProductItem:hover,
.adProductItem:focus,
.adProductItem:focus-visible,
.adInputTab:hover,
.adInputTab:focus,
.adInputTab:focus-visible,
.adOutputButton:hover,
.adOutputButton:focus,
.adOutputButton:focus-visible,
.adUrlFillToggleButton:hover,
.adUrlFillToggleButton:focus,
.adUrlFillToggleButton:focus-visible,
.adPrimaryButton:hover,
.adPrimaryButton:focus,
.adPrimaryButton:focus-visible,
.adGenerateButton:hover,
.adGenerateButton:focus,
.adGenerateButton:focus-visible,
.adTextButton:hover,
.adTextButton:focus,
.adTextButton:focus-visible,
.adMenuCloseButton:hover,
.adMenuCloseButton:focus,
.adMenuCloseButton:focus-visible{
  border-color: transparent;
  outline: none;
}

.adProductItemActive{
  border-color: transparent;
  background: #ffffff;
  box-shadow:
    inset 0 0 0 2px color-mix(in srgb, var(--ad-accent) 54%, transparent),
    0 8px 20px color-mix(in srgb, #000000 5%, transparent);
}

.adUrlFillMenu .adPrimaryButton{
  border-color: color-mix(in srgb, var(--ad-accent) 30%, transparent);
  background: #ffffff;
  color: var(--ad-accent);
}

.adUrlFillMenu .adPrimaryButton::before{
  opacity: 0;
}

.adUrlFillMenu .adPrimaryButton > span:not(.adButtonSpinner){
  background: var(--ad-accent-fill);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.adUrlFillMenu .adPrimaryButton:hover,
.adUrlFillMenu .adPrimaryButton:focus-visible,
.adUrlFillMenu .adMenuCloseButton:hover,
.adUrlFillMenu .adMenuCloseButton:focus-visible{
  border-color: transparent;
  background: #ffffff;
  color: #ffffff;
  box-shadow: 0 12px 28px color-mix(in srgb, #000000 18%, transparent);
  transform: translateY(-1px);
}

.adUrlFillMenu .adPrimaryButton:hover::before,
.adUrlFillMenu .adPrimaryButton:focus-visible::before,
.adUrlFillMenu .adMenuCloseButton:hover::before,
.adUrlFillMenu .adMenuCloseButton:focus-visible::before{
  opacity: 1;
}

.adUrlFillMenu .adPrimaryButton:hover > span:not(.adButtonSpinner),
.adUrlFillMenu .adPrimaryButton:focus-visible > span:not(.adButtonSpinner){
  background: none;
  color: #ffffff;
  -webkit-text-fill-color: #ffffff;
}

.adUrlFillMenu .adMenuCloseButton{
  background: #ffffff;
  color: var(--ad-accent);
}

.adIconButton,
.adProductItem,
.adInputTab,
.adOutputButton,
.adUrlFillToggleButton,
.adPrimaryButton,
.adGenerateButton,
.adTextButton,
.adMenuCloseButton,
.adIconButton:hover,
.adIconButton:focus,
.adIconButton:focus-visible,
.adProductItem:hover,
.adProductItem:focus,
.adProductItem:focus-visible,
.adProductItemActive,
.adInputTab:hover,
.adInputTab:focus,
.adInputTab:focus-visible,
.adOutputButton:hover,
.adOutputButton:focus,
.adOutputButton:focus-visible,
.adUrlFillToggleButton:hover,
.adUrlFillToggleButton:focus,
.adUrlFillToggleButton:focus-visible,
.adPrimaryButton:hover,
.adPrimaryButton:focus,
.adPrimaryButton:focus-visible,
.adGenerateButton:hover,
.adGenerateButton:focus,
.adGenerateButton:focus-visible,
.adTextButton:hover,
.adTextButton:focus,
.adTextButton:focus-visible,
.adMenuCloseButton:hover,
.adMenuCloseButton:focus,
.adMenuCloseButton:focus-visible,
.adUrlFillMenu .adPrimaryButton,
.adUrlFillMenu .adPrimaryButton:hover,
.adUrlFillMenu .adPrimaryButton:focus-visible,
.adUrlFillMenu .adMenuCloseButton,
.adUrlFillMenu .adMenuCloseButton:hover,
.adUrlFillMenu .adMenuCloseButton:focus-visible{
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

.adProductItem,
.adInputTab:not(.adInputTabActive),
.adOutputButton:not(.adOutputButtonActive),
.adUrlFillToggleButton:not(.adUrlFillToggleButtonActive),
.adTextButton,
.adMenuCloseButton,
.adUrlFillMenu .adPrimaryButton,
.adUrlFillMenu .adMenuCloseButton{
  color: #000000 !important;
}

.adProductItem .adProductName,
.adProductItem .adProductMeta,
.adInputTab:not(.adInputTabActive) > span,
.adOutputButton:not(.adOutputButtonActive) > span,
.adUrlFillToggleButton:not(.adUrlFillToggleButtonActive) > span,
.adTextButton > span,
.adUrlFillMenu .adPrimaryButton > span:not(.adButtonSpinner){
  background: none !important;
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
}

.adProductItem:hover,
.adProductItem:focus-visible,
.adInputTab:not(.adInputTabActive):hover,
.adInputTab:not(.adInputTabActive):focus-visible,
.adOutputButton:not(.adOutputButtonActive):hover,
.adOutputButton:not(.adOutputButtonActive):focus-visible,
.adUrlFillToggleButton:not(.adUrlFillToggleButtonActive):hover,
.adUrlFillToggleButton:not(.adUrlFillToggleButtonActive):focus-visible,
.adTextButton:hover,
.adTextButton:focus-visible,
.adMenuCloseButton:hover,
.adMenuCloseButton:focus-visible,
.adUrlFillMenu .adPrimaryButton:hover,
.adUrlFillMenu .adPrimaryButton:focus-visible,
.adUrlFillMenu .adMenuCloseButton:hover,
.adUrlFillMenu .adMenuCloseButton:focus-visible{
  background: #000000 !important;
  color: #ffffff !important;
}

.adProductItem:hover::before,
.adProductItem:focus-visible::before,
.adInputTab:not(.adInputTabActive):hover::before,
.adInputTab:not(.adInputTabActive):focus-visible::before,
.adOutputButton:not(.adOutputButtonActive):hover::before,
.adOutputButton:not(.adOutputButtonActive):focus-visible::before,
.adUrlFillToggleButton:not(.adUrlFillToggleButtonActive):hover::before,
.adUrlFillToggleButton:not(.adUrlFillToggleButtonActive):focus-visible::before,
.adTextButton:hover::before,
.adTextButton:focus-visible::before,
.adMenuCloseButton:hover::before,
.adMenuCloseButton:focus-visible::before,
.adUrlFillMenu .adPrimaryButton:hover::before,
.adUrlFillMenu .adPrimaryButton:focus-visible::before,
.adUrlFillMenu .adMenuCloseButton:hover::before,
.adUrlFillMenu .adMenuCloseButton:focus-visible::before{
  opacity: 0 !important;
}

.adProductItem:hover .adProductName,
.adProductItem:focus-visible .adProductName,
.adProductItem:hover .adProductMeta,
.adProductItem:focus-visible .adProductMeta,
.adInputTab:not(.adInputTabActive):hover > span,
.adInputTab:not(.adInputTabActive):focus-visible > span,
.adOutputButton:not(.adOutputButtonActive):hover > span,
.adOutputButton:not(.adOutputButtonActive):focus-visible > span,
.adUrlFillToggleButton:not(.adUrlFillToggleButtonActive):hover > span,
.adUrlFillToggleButton:not(.adUrlFillToggleButtonActive):focus-visible > span,
.adTextButton:hover > span,
.adTextButton:focus-visible > span,
.adUrlFillMenu .adPrimaryButton:hover > span:not(.adButtonSpinner),
.adUrlFillMenu .adPrimaryButton:focus-visible > span:not(.adButtonSpinner){
  background: none !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

.adProductsPane .adPaneTitleRow h2{
  margin: 0;
  font-size: clamp(34px, 3.6vw, 58px);
  font-weight: 950;
  line-height: 0.92;
}

.adProductsPane .adProductItem:not(.adNewProductListItem),
.adProductsPane .adProductItemActive:not(.adNewProductListItem){
  position: relative;
  display: block;
  min-height: 124px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.92) !important;
  border-radius: 14px;
  background: #ffffff !important;
  color: #000000 !important;
  box-shadow:
    0 24px 56px rgba(0, 0, 0, 0.28),
    0 8px 18px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.94) !important;
  transform: translateY(0);
}

.adProductsPane .adProductItem:not(.adNewProductListItem):hover,
.adProductsPane .adProductItem:not(.adNewProductListItem):focus-visible,
.adProductsPane .adProductItem:not(.adNewProductListItem):focus-within{
  border-color: #ffffff !important;
  background: #ffffff !important;
  color: #000000 !important;
  box-shadow:
    0 30px 70px rgba(0, 0, 0, 0.34),
    0 12px 24px rgba(0, 0, 0, 0.22),
    0 0 0 1px color-mix(in srgb, var(--ad-accent) 18%, transparent) !important;
  transform: translateY(-2px);
}

.adProductSelectButton{
  width: 100%;
  min-height: 124px;
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  padding: 18px 92px 18px 18px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: inherit;
  text-align: left;
  outline: none;
}

.adProductTextBlock{
  min-width: 0;
}

.adProductCardActions{
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 6px;
}

.adProductCardAction{
  width: 30px;
  height: 30px;
  display: inline-grid;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #000000;
  outline: none;
  padding: 0;
}

.adProductCardAction svg{
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.35;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.adProductCardAction:hover,
.adProductCardAction:focus-visible{
  transform: scale(1.14);
}

.adProductDeleteAction{
  color: #ff3f7f;
}

.adProductsPane .adProductItem::before{
  opacity: 0 !important;
}

.adProductsPane .adProductThumb{
  width: 82px;
  height: 82px;
  border: 0;
  border-radius: 10px;
  background: #000000;
  color: #ffffff;
  font-size: 18px;
  box-shadow:
    0 18px 38px rgba(0, 0, 0, 0.34),
    0 6px 14px rgba(0, 0, 0, 0.24);
}

.adProductThumbNoImage{
  background: #000000 !important;
  color: #ff3f7f !important;
}

.adNoProductImageIcon{
  width: 38px;
  height: 38px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.35;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.adProductsPane .adProductName,
.adProductsPane .adProductMeta,
.adProductsPane .adProductItem:hover .adProductName,
.adProductsPane .adProductItem:focus-visible .adProductName,
.adProductsPane .adProductItem:hover .adProductMeta,
.adProductsPane .adProductItem:focus-visible .adProductMeta{
  background: none !important;
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
}

.adProductsPane .adProductName{
  font-size: 18px;
  line-height: 1.1;
}

.adProductsPane .adProductMeta{
  margin-top: 10px;
  display: -webkit-box;
  overflow: hidden;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
  opacity: 0.72;
  white-space: normal;
  text-overflow: initial;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.adGenerateButton,
.adGenerateButton:hover,
.adGenerateButton:focus,
.adGenerateButton:focus-visible{
  min-height: 62px;
  width: 100%;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  margin-top: 22px;
  padding: 0 22px;
  border: 0 !important;
  border-radius: 16px;
  background: var(--ad-accent-fill) !important;
  color: #ffffff !important;
  text-align: center;
  box-shadow: 0 12px 28px color-mix(in srgb, var(--ad-accent) 22%, transparent) !important;
  transform: translateY(0);
}

.adGenerateButton::before,
.adGenerateButton:hover::before,
.adGenerateButton:focus-visible::before{
  opacity: 0 !important;
}

.adGenerateButton:hover:not(:disabled),
.adGenerateButton:focus-visible:not(:disabled){
  background: var(--ad-accent-fill) !important;
  color: #ffffff !important;
  box-shadow: 0 16px 34px color-mix(in srgb, var(--ad-accent) 28%, transparent) !important;
  transform: translateY(-2px);
}

.adGenerateButton:active:not(:disabled){
  transform: translateY(0);
}

.adGenerateButton:disabled{
  opacity: 0.54;
  cursor: not-allowed;
}

.adGenerateButton > .adGenerateButtonContent,
.adGenerateButton:hover > .adGenerateButtonContent,
.adGenerateButton:focus-visible > .adGenerateButtonContent{
  width: 100%;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: none !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

.adGenerateButtonLabel{
  flex: 0 0 auto;
  color: inherit;
  font-size: 16px;
  font-weight: 950;
  line-height: 1;
}

.adGenerateButtonMeta{
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: inherit;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  opacity: 0.88;
}

.adGenerateCreditIcon{
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  display: inline-grid;
  place-items: center;
  color: currentColor;
}

.adGenerateCreditIcon svg{
  width: 15px;
  height: 15px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.adGenerateButtonDots{
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.adGenerateButtonDots[hidden]{
  display: none;
}

.adGenerateButtonDots span{
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.38);
  animation: adGenerateDotsPulse 1.05s ease-in-out infinite;
}

.adGenerateButtonDots span:nth-child(2){
  animation-delay: 0.16s;
}

@keyframes adGenerateDotsPulse{
  0%,
  100%{
    transform: scale(0.68);
    background: rgba(255, 255, 255, 0.34);
  }
  40%{
    transform: scale(1.22);
    background: rgba(255, 255, 255, 0.98);
  }
}

.adStudioTopBanner{
  display: none;
}

.adStudio{
  position: relative;
  isolation: isolate;
  height: calc(100dvh - var(--nav-height, 68px));
  padding: 0;
  overflow: hidden;
  background:
    radial-gradient(52vw 36vw at 50% 28%, color-mix(in srgb, var(--ad-accent) 19%, transparent), transparent 58%),
    radial-gradient(34vw 26vw at 56% 30%, color-mix(in srgb, var(--ad-accent-2) 16%, transparent), transparent 64%),
    linear-gradient(180deg, #0d0f12 0%, #07080a 100%);
}

.adStudio::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(34vw 26vw at 50% 26%, color-mix(in srgb, var(--ad-accent) 15%, transparent), transparent 64%),
    radial-gradient(28vw 22vw at 53% 28%, color-mix(in srgb, var(--ad-accent-2) 12%, transparent), transparent 70%);
  filter: blur(28px);
  opacity: 0.9;
  pointer-events: none;
}

.adStudioWorkspace{
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: none;
  height: 100%;
  display: block;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.adGeneratePane{
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  overflow: hidden;
}

.adResults{
  --ad-stage-arrow-size: clamp(52px, 4.2vw, 62px);
  order: 1;
  position: relative;
  z-index: 3;
  min-height: 0;
  height: 100%;
  margin: 0;
  padding: 0 clamp(14px, 2.4vw, 24px);
  border: 0;
  display: grid;
  grid-template-columns: auto auto auto;
  align-items: stretch;
  justify-content: center;
  gap: clamp(8px, 1vw, 12px);
}

.adResultStage{
  width: min(980px, calc(100vw - 176px));
  height: 100%;
  aspect-ratio: auto;
  min-height: 0;
  margin: 0 auto;
  border-radius: 28px;
  border: 0;
  background: transparent;
  box-shadow: none;
  overflow: hidden;
}

.adResultStage p{
  max-width: 320px;
  color: rgba(255, 255, 255, 0.64);
  text-align: center;
}

.adStudioStageArrow{
  position: relative;
  z-index: 2;
  align-self: center;
  width: var(--ad-stage-arrow-size);
  height: var(--ad-stage-arrow-size);
  margin-top: 0;
  display: inline-grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--ad-accent) 24%, rgba(255, 255, 255, 0.1) 76%);
  border-radius: 999px;
  background: #000000;
  color: transparent;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 14px 26px rgba(0, 0, 0, 0.34);
  backdrop-filter: blur(14px);
  overflow: hidden;
  transition:
    background 300ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 300ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 300ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 300ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 300ms ease;
}

.adStudioStageArrow:hover:not(:disabled),
.adStudioStageArrow:focus-visible:not(:disabled){
  transform: translateY(-1px) scale(1.02);
  border-color: color-mix(in srgb, var(--ad-accent) 42%, rgba(255, 255, 255, 0.12) 58%);
  background: var(--ad-accent-fill);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 0 0 5px color-mix(in srgb, var(--ad-accent) 12%, transparent),
    0 16px 30px color-mix(in srgb, var(--ad-accent) 32%, rgba(0, 0, 0, 0.24));
  outline: none;
}

.adStudioStageArrow:disabled{
  opacity: 0.34;
  cursor: default;
  border-color: color-mix(in srgb, var(--ad-accent) 24%, rgba(255, 255, 255, 0.1) 76%);
  background: #000000;
  transform: none;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.18);
}

.adStudioStageArrow svg{
  position: absolute;
  left: 50%;
  top: 50%;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: transparent;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.adStudioStageArrow::before{
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 22px;
  height: 22px;
  display: block;
  background: var(--ad-accent-fill);
  -webkit-mask: var(--ad-stage-arrow-icon) center / contain no-repeat;
  mask: var(--ad-stage-arrow-icon) center / contain no-repeat;
  transform: translate(-50%, -50%);
  transition:
    background 300ms cubic-bezier(0.22, 1, 0.36, 1);
}

.adStudioStageArrowPrev{
  --ad-stage-arrow-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15 18 9 12l6-6' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.adStudioStageArrowNext{
  --ad-stage-arrow-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m9 18 6-6-6-6' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.adStudioStageArrow:hover:not(:disabled)::before,
.adStudioStageArrow:focus-visible:not(:disabled)::before{
  background: #000000;
}

.adStudioStageArrowPrev:hover:not(:disabled)::before,
.adStudioStageArrowPrev:focus-visible:not(:disabled)::before{
  transform: translate(-50%, -50%);
}

.adStudioStageArrowNext:hover:not(:disabled)::before,
.adStudioStageArrowNext:focus-visible:not(:disabled)::before{
  transform: translate(-50%, -50%);
}

.adOutputCarousel{
  --ad-output-media-height: 100%;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  padding: 0;
}

.adOutputNavButton{
  display: none;
}

.adOutputMediaShell{
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.34);
}

.adStudioDockCard{
  order: 2;
  position: relative;
  z-index: 4;
  width: min(1180px, calc(100vw - 28px));
  min-height: 138px;
  margin: 0 auto clamp(18px, 3vh, 36px);
  padding: 14px 16px 12px;
  display: grid;
  gap: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(28, 29, 33, 0.94), rgba(22, 23, 27, 0.94));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 18px 32px rgba(0, 0, 0, 0.34);
}

.adProductDockRow{
  display: grid;
  grid-template-columns: minmax(0, 1fr) 58px;
  gap: 10px;
  align-items: stretch;
}

.adSelectedProductSummary{
  margin: 0;
  min-height: 70px;
  padding: 10px 12px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(35, 37, 42, 0.94), rgba(24, 26, 30, 0.96));
  color: rgba(255, 255, 255, 0.9);
}

.adSelectedProductSummary:hover,
.adSelectedProductSummary:focus-visible{
  border-color: color-mix(in srgb, var(--ad-accent) 42%, rgba(255, 255, 255, 0.14));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ad-accent) 12%, transparent);
  transform: translateY(-1px);
  outline: none;
}

.adSelectedProductSummary .adPaneLabel{
  color: color-mix(in srgb, var(--ad-accent) 66%, var(--ad-accent-2) 34%);
}

.adSelectedProductSummary h2{
  color: #ffffff;
}

.adSelectedProductSummary p,
.adNoProductSelectedMessage{
  color: rgba(255, 255, 255, 0.62);
}

.adGeneratePane.adGeneratePaneNoProduct > .adStudioDockCard,
.adGeneratePane.adGeneratePaneNoProduct > .adResults{
  display: grid !important;
  opacity: 1;
  pointer-events: auto;
}

.adGeneratePaneNoProduct .adStudioDockCard .adSelectedProductSummary{
  min-height: 70px;
  padding: 10px 12px;
  grid-template-columns: 1fr;
  place-items: center;
}

.adStudioDockCard .adNoProductSelectedMessage{
  max-width: none;
  font-size: 14px;
  line-height: 1.25;
  font-weight: 900;
}

.adProductsTrigger,
.adCreativeOptionsTrigger{
  border: 0;
  background: linear-gradient(180deg, rgba(35, 37, 42, 0.94), rgba(24, 26, 30, 0.96));
  color: rgba(255, 255, 255, 0.92);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.adProductsTrigger{
  min-height: 70px;
  display: grid;
  place-items: center;
  border-radius: 14px;
}

.adProductsTrigger svg{
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
}

.adCreativeOptionsTrigger{
  min-height: 54px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  border-radius: 14px;
  text-align: left;
}

.adCreativeOptionsTriggerKicker{
  color: color-mix(in srgb, var(--ad-accent) 68%, white 32%);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.adCreativeOptionsTriggerLabel{
  min-width: 0;
  color: #ffffff;
  font-size: 14px;
  font-weight: 900;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.adCreativeOptionsTrigger svg{
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
}

.adGenerationSection > .adCreativeOptionsTrigger{
  flex: 0 0 154px;
  width: 154px;
  min-height: 54px;
  margin-left: auto;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: 1fr;
  align-content: center;
  column-gap: 8px;
  row-gap: 0;
  padding: 0 12px;
}

.adGenerationSection > .adCreativeOptionsTrigger .adCreativeOptionsTriggerKicker{
  display: none;
}

.adGenerationSection > .adCreativeOptionsTrigger .adCreativeOptionsTriggerLabel{
  font-size: 13px;
}

.adGenerationSection:has(#adVideoGenerationSettings:not([hidden])) > .adCreativeOptionsTrigger{
  flex: 0 0 136px;
  width: 136px;
  margin-left: 0;
  padding-inline: 10px;
}

.adProductsTrigger:hover,
.adProductsTrigger:focus-visible,
.adCreativeOptionsTrigger:hover,
.adCreativeOptionsTrigger:focus-visible{
  transform: translateY(-1px);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ad-accent) 12%, transparent);
  outline: none;
}

.adGenerationStatus{
  min-height: 18px;
  margin: -2px 2px 0;
  color: rgba(255, 255, 255, 0.62);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
}

.adGenerationStatus:empty{
  display: none;
}

.adGenerationSection{
  margin: 0;
  padding: 0;
  border: 0;
  display: flex;
  align-items: end;
  column-gap: 6px;
  row-gap: 10px;
  flex-wrap: wrap;
}

.adGenerationSection .adSectionTitleRow{
  display: none;
}

.adGenerationModeToggle{
  flex: 0 0 180px;
  width: 180px;
  min-height: 54px;
  margin: 0;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(35, 37, 42, 0.94), rgba(24, 26, 30, 0.96));
}

.adGenerationModeOption span{
  min-height: 54px;
  background: transparent;
  color: rgba(255, 255, 255, 0.62);
}

.adGenerationModeImage span,
.adGenerationModeVideo span{
  border-radius: 14px;
  box-shadow: none;
}

.adGenerationModeOption input:checked + span{
  background: var(--ad-accent-fill);
  color: #ffffff;
}

.adGenerationCommonFields,
.adGenerationSettings{
  flex: 0 1 auto;
  display: flex;
  align-items: end;
  column-gap: 6px;
  row-gap: 10px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.adGenerationSettings[hidden],
.adGeneratedImagePicker[hidden]{
  display: none !important;
}

.adGenerationCommonFields .adField,
.adGenerationSettings .adField,
.adGeneratePane .adField{
  min-width: 128px;
  margin: 0;
}

.adGenerationCommonFields .adField:has(#adAspectRatio){
  min-width: 82px;
  max-width: 92px;
}

#adVideoResolutionField{
  min-width: 94px;
  max-width: 104px;
}

#adVideoDurationField{
  min-width: 76px;
  max-width: 84px;
}

#adVideoModelField{
  min-width: 188px;
  max-width: 210px;
}

.adGenerationSection .adFieldLabel{
  display: none;
  color: rgba(255, 255, 255, 0.58);
}

.adGenerationSection .adField select,
.adGenerationSection .adCustomSelectButton{
  min-height: 54px;
  border: 0;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(35, 37, 42, 0.94), rgba(24, 26, 30, 0.96));
  color: #ffffff;
}

.adGenerationSection .adCustomSelectButton{
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.adGenerationSection .adCustomSelectButtonWithIcon{
  justify-content: flex-start;
  gap: 10px;
  padding: 0 14px;
}

.adGenerationSection .adCustomSelectButtonWithIcon .adCustomSelectValue{
  flex: 1 1 auto;
}

.adGenerationSection .adCustomSelectLeadingIcon{
  background: var(--ad-accent-fill);
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
}

.adGenerationSection .adCustomSelectLeadingIcon svg{
  color: transparent;
  stroke: #000000;
}

.adGenerationSection .adCustomSelectLeadingIcon svg path,
.adGenerationSection .adCustomSelectLeadingIcon svg circle,
.adGenerationSection .adCustomSelectLeadingIcon svg rect,
.adGenerationSection .adCustomSelectLeadingIcon svg line,
.adGenerationSection .adCustomSelectLeadingIcon svg polyline,
.adGenerationSection .adCustomSelectLeadingIcon svg polygon{
  stroke: transparent;
}

.adGenerationSection .adCustomSelectLeadingIcon svg{
  background: var(--ad-accent-fill);
  -webkit-mask: var(--ad-generation-select-icon) center / contain no-repeat;
  mask: var(--ad-generation-select-icon) center / contain no-repeat;
}

.adGenerationSection .adField:has(#adAspectRatio) .adCustomSelectLeadingIcon{
  --ad-generation-select-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 4h16v16H4Z' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M9 4v16' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M15 4v16' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}

.adGenerationSection .adField:has(#adImageResolution) .adCustomSelectLeadingIcon,
.adGenerationSection .adField:has(#adVideoResolution) .adCustomSelectLeadingIcon{
  --ad-generation-select-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 7h16' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M4 17h16' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M7 4v16' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M17 4v16' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}

.adGenerationSection .adField:has(#adVideoModel) .adCustomSelectLeadingIcon{
  --ad-generation-select-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 3l8 4.5v9L12 21l-8-4.5v-9L12 3Z' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M12 12l8-4.5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M12 12v9' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M12 12 4 7.5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}

.adGenerationSection .adField:has(#adVideoDuration) .adCustomSelectLeadingIcon{
  --ad-generation-select-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 8v5l3 2' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M21 12a9 9 0 1 1-9-9' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M18 3v5h-5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.adGenerationSection .adCustomSelectMenu{
  top: auto;
  bottom: calc(100% + 8px);
  transform: translateY(6px) scale(0.985);
  transform-origin: bottom center;
}

.adGenerationSection .adCustomSelectOpen .adCustomSelectMenu{
  transform: translateY(0) scale(1);
}

.adGenerationSection .adGeneratedImagePicker{
  flex: 0 1 138px;
  width: min(138px, 100%);
  max-width: 100%;
  margin: 0;
  padding: 0;
  background: transparent;
  position: relative;
  z-index: 54;
}

.adGenerationSection .adGeneratedImagePickerHeader{
  display: none;
}

.adGenerationSection .adGeneratedImagePickerHeader strong{
  color: rgba(255, 255, 255, 0.74);
  font-size: 10px;
  letter-spacing: 0;
  text-transform: uppercase;
}

.adGenerationSection .adGeneratedImagePickerHeader span{
  display: none;
}

.adGenerationSection .adGeneratedImageList{
  margin-top: 0;
}

.adGenerateButton,
.adGenerateButton:hover,
.adGenerateButton:focus,
.adGenerateButton:focus-visible{
  flex: 1 1 210px;
  min-width: min(230px, 100%);
  min-height: 78px;
  margin: 0 0 0 auto;
  border-radius: 14px;
  box-shadow: 0 18px 32px color-mix(in srgb, var(--ad-accent) 24%, transparent) !important;
}

.adGenerationSection:has(#adVideoGenerationSettings:not([hidden])) .adGenerateButton,
.adGenerationSection:has(#adVideoGenerationSettings:not([hidden])) .adGenerateButton:hover,
.adGenerationSection:has(#adVideoGenerationSettings:not([hidden])) .adGenerateButton:focus,
.adGenerationSection:has(#adVideoGenerationSettings:not([hidden])) .adGenerateButton:focus-visible{
  flex: 1 1 132px;
  min-width: min(132px, 100%);
  padding-inline: 12px;
}

.adGenerationSection:has(#adVideoGenerationSettings:not([hidden])) .adGenerateButton > .adGenerateButtonContent{
  gap: 8px;
}

.adGenerateButton:disabled{
  opacity: 0.44;
  cursor: not-allowed;
  box-shadow: 0 14px 24px rgba(0, 0, 0, 0.22) !important;
  transform: none !important;
}

.adGenerationSection > .adCreativeOptionsTrigger + .adGenerateButton,
.adGenerationSection > .adCreativeOptionsTrigger + .adGenerateButton:hover,
.adGenerationSection > .adCreativeOptionsTrigger + .adGenerateButton:focus,
.adGenerationSection > .adCreativeOptionsTrigger + .adGenerateButton:focus-visible{
  margin-left: 0;
}

.adProductsPane{
  position: fixed;
  top: var(--nav-height, 68px);
  right: 0;
  bottom: 0;
  z-index: 80;
  width: min(470px, 100vw);
  padding: clamp(18px, 1.7vw, 28px);
  border: 0;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0;
  background: linear-gradient(180deg, rgba(28, 29, 33, 0.98), rgba(18, 19, 23, 0.98));
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.42);
  transform: translateX(100%);
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
  transition:
    transform .42s cubic-bezier(.16, 1, .3, 1),
    opacity .3s ease;
}

body.adProductsMenuOpen .adProductsPane{
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
}

.adProductsPane .adPaneTitleRow{
  align-items: center;
}

.adProductsPane .adPaneTitleRow h2{
  color: #ffffff;
}

.adProductsMenuClose{
  display: inline-grid;
}

.adCreativeOptions{
  position: fixed;
  top: var(--nav-height, 68px);
  right: 0;
  bottom: 0;
  z-index: 86;
  width: min(760px, 100vw);
  margin: 0;
  padding: 20px;
  overflow-x: hidden;
  overflow-y: auto;
  border: 0;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0;
  background: linear-gradient(180deg, rgba(28, 29, 33, 0.98), rgba(18, 19, 23, 0.98));
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.42);
  transform: translateX(100%);
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
  transition:
    transform .42s cubic-bezier(.16, 1, .3, 1),
    opacity .3s ease;
}

body.adCreativeOptionsOpen .adCreativeOptions{
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
}

.adOptionsPanelHeader{
  position: sticky;
  top: -20px;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: -20px -20px 18px;
  padding: 20px;
  background: linear-gradient(180deg, rgba(28, 29, 33, 0.98), rgba(28, 29, 33, 0.92));
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.adOptionsPanelHeader h2{
  margin: 6px 0 0;
  color: #ffffff;
  font-size: 24px;
  font-weight: 950;
  line-height: 1;
}

.adCreativeOptions .adSectionTitleRow h3,
.adFootagePanelHeader h3,
.adChoiceSurface strong,
.adField span{
  color: #ffffff;
}

.adChoiceSurface small,
.adCreativeOptions .adFieldLabel,
.adCreativeOptions .adField textarea,
.adCreativeOptions .adField input,
.adCreativeOptions .adField select{
  color: rgba(255, 255, 255, 0.72);
}

.adCreativeOptions .adField select,
.adCreativeOptions .adField textarea,
.adCreativeOptions .adCustomSelectButton{
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}

.adCreativeOptions .adCustomSelect{
  z-index: 1;
}

.adCreativeOptions .adCustomSelectOpen{
  z-index: 120;
}

.adCreativeOptions .adCustomSelectMenu{
  z-index: 140;
}

.adCreativeOptions .adField:has(.adCustomSelectOpen){
  position: relative;
  z-index: 120;
}

.adReferenceSection{
  border-color: rgba(255, 255, 255, 0.08);
}

.adResultStage .adOutputCarousel{
  --ad-output-media-height: calc(100% - clamp(20px, 3vh, 34px));
  padding-block: clamp(10px, 1.5vh, 17px);
}

.adGenerateButton,
.adGenerateButton:focus{
  background: var(--ad-accent-fill) !important;
  color: #ffffff !important;
}

.adGenerateButton > .adGenerateButtonContent,
.adGenerateButton .adGenerateButtonLabel,
.adGenerateButton .adGenerateButtonMeta{
  background: none !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

.adGenerateButton:hover:not(:disabled),
.adGenerateButton:focus-visible:not(:disabled){
  background: #ffffff !important;
  color: var(--ad-accent) !important;
  box-shadow: 0 16px 34px color-mix(in srgb, var(--ad-accent) 24%, transparent) !important;
  transform: translateY(-2px);
}

.adGenerateButton:hover:not(:disabled) > .adGenerateButtonContent,
.adGenerateButton:focus-visible:not(:disabled) > .adGenerateButtonContent,
.adGenerateButton:hover:not(:disabled) .adGenerateButtonLabel,
.adGenerateButton:focus-visible:not(:disabled) .adGenerateButtonLabel,
.adGenerateButton:hover:not(:disabled) .adGenerateButtonMeta,
.adGenerateButton:focus-visible:not(:disabled) .adGenerateButtonMeta{
  background: var(--ad-accent-fill) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}

.adGenerateButton:hover:not(:disabled) .adGenerateButtonDots span,
.adGenerateButton:focus-visible:not(:disabled) .adGenerateButtonDots span{
  background: var(--ad-accent-fill);
}

.adCreativeOptions .adMenuCloseButton,
.adProductMenu .adMenuCloseButton{
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: var(--ad-accent-fill) !important;
  color: #000000 !important;
  transform: translateY(0);
}

.adCreativeOptions .adMenuCloseButton svg,
.adProductMenu .adMenuCloseButton svg{
  opacity: 0;
}

.adCreativeOptions .adMenuCloseButton::before,
.adCreativeOptions .adMenuCloseButton::after,
.adProductMenu .adMenuCloseButton::before,
.adProductMenu .adMenuCloseButton::after{
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  width: 18px;
  height: 2.5px;
  border-radius: 999px;
  background: #000000 !important;
  opacity: 1 !important;
  pointer-events: none;
  transform: translate(-50%, -50%) rotate(45deg);
  transition:
    background 220ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.adCreativeOptions .adMenuCloseButton::after,
.adProductMenu .adMenuCloseButton::after{
  transform: translate(-50%, -50%) rotate(-45deg);
}

.adCreativeOptions .adMenuCloseButton:hover,
.adCreativeOptions .adMenuCloseButton:focus-visible,
.adProductMenu .adMenuCloseButton:hover,
.adProductMenu .adMenuCloseButton:focus-visible{
  background: #000000 !important;
  color: var(--ad-accent) !important;
  transform: translateY(-1px);
}

.adCreativeOptions .adMenuCloseButton:hover::before,
.adCreativeOptions .adMenuCloseButton:focus-visible::before,
.adCreativeOptions .adMenuCloseButton:hover::after,
.adCreativeOptions .adMenuCloseButton:focus-visible::after,
.adProductMenu .adMenuCloseButton:hover::before,
.adProductMenu .adMenuCloseButton:focus-visible::before,
.adProductMenu .adMenuCloseButton:hover::after,
.adProductMenu .adMenuCloseButton:focus-visible::after{
  background: var(--ad-accent-fill) !important;
}

.adCreativeOptions .adCreativeBlock{
  display: grid;
  gap: clamp(24px, 2.8vh, 36px);
}

.adCreativeOptions .adImageCreativeBlock{
  gap: 2px;
}

.adCreativeOptions .adCreativeBlock .adChoiceGrid,
.adCreativeOptions .adReferenceGrid{
  margin-top: 0;
}

.adCreativeOptions .adFootagePanel:not([hidden]),
.adCreativeOptions .adCommercialModePanel:not([hidden]),
.adCreativeOptions .adImageStylePanel:not([hidden]),
.adCreativeOptions .adReferenceSection{
  display: grid;
  gap: clamp(28px, 3vh, 42px);
}

.adCreativeOptions .adFootagePanel:not([hidden]),
.adCreativeOptions .adImageStylePanel:not([hidden]),
.adCreativeOptions .adReferenceSection{
  margin-top: clamp(34px, 3.6vh, 48px);
}

.adCreativeOptions .adImageCreativeBlock .adImageStylePanel:not([hidden]){
  margin-top: 2px;
  padding: 10px;
  gap: 10px;
}

.adCreativeOptions .adImageCreativeBlock .adImageStylePanel .adSectionTitleRow{
  margin-bottom: -2px;
}

.adCreativeOptions .adCommercialModePanel:not([hidden]){
  margin-top: clamp(24px, 2.8vh, 36px);
}

.adCreativeOptions .adFootagePanelHeader{
  margin-bottom: 0;
}

.adCreativeOptions .adInlineFields,
.adCreativeOptions .adChoiceGrid,
.adCreativeOptions .adImageStyleGrid,
.adCreativeOptions .adGenderGrid,
.adCreativeOptions .adReferenceGrid{
  column-gap: clamp(18px, 1.8vw, 26px);
  row-gap: clamp(28px, 3vh, 40px);
}

.adCreativeOptions .adInlineFields,
.adCreativeOptions .adChoiceGrid,
.adCreativeOptions .adImageStyleGrid,
.adCreativeOptions .adGenderGrid{
  margin-top: 0;
}

.adCreativeOptions .adField{
  gap: 14px;
}

.adProductsTrigger{
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--ad-accent-fill) !important;
  color: #000000 !important;
}

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

.adProductsTrigger::before{
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  width: 25px;
  height: 25px;
  display: block;
  background: #000000;
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 7h16M4 12h16M4 17h16' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 7h16M4 12h16M4 17h16' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  transform: translate(-50%, -50%);
  transition: background 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.adProductsTrigger,
.adProductsTrigger::before,
.adGenerateButton,
.adGenerateButton::before,
.adGenerateButton > .adGenerateButtonContent,
.adGenerateButton .adGenerateButtonLabel,
.adGenerateButton .adGenerateButtonMeta,
.adGenerateButton .adGenerateButtonDots span{
  transition-duration: 0.35s !important;
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.adProductsTrigger:hover,
.adProductsTrigger:focus-visible{
  background: #000000 !important;
  color: var(--ad-accent) !important;
}

.adProductsTrigger:hover::before,
.adProductsTrigger:focus-visible::before{
  background: var(--ad-accent-fill);
}

.adProductsPane .adNewProductListItem{
  position: sticky;
  top: 0;
  z-index: 6;
  width: 100%;
  display: block !important;
  grid-template-columns: none !important;
  min-height: 96px;
  padding: 0 !important;
  border: 1px solid rgba(255, 255, 255, 0.84) !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, 0.03) !important;
  color: #ffffff !important;
  box-shadow: none !important;
  overflow: hidden;
}

.adProductsPane .adNewProductListItem::before{
  content: none !important;
}

.adProductsPane .adNewProductListItem .adProductSelectButton{
  width: 100%;
  min-height: 96px;
  padding: 16px 18px;
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  gap: 18px;
  border: 0 !important;
  border-radius: 14px !important;
  background: transparent !important;
  color: #ffffff !important;
  box-shadow: none !important;
  cursor: pointer;
}

.adProductsPane .adNewProductListItem .adProductSelectButton::before{
  content: none !important;
}

.adProductsPane .adNewProductListItem .adProductName,
.adProductsPane .adNewProductListItem .adProductMeta,
.adProductsPane .adNewProductListItem:hover .adProductName,
.adProductsPane .adNewProductListItem:focus-within .adProductName,
.adProductsPane .adNewProductListItem:hover .adProductMeta,
.adProductsPane .adNewProductListItem:focus-within .adProductMeta{
  background: none !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

.adProductsPane .adNewProductThumb{
  position: relative;
  background: transparent !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

.adNewProductThumb svg{
  position: absolute;
  width: 34px;
  height: 34px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.45;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  pointer-events: none;
}

.adNewProductThumb::before,
.adNewProductThumb::after{
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 32px;
  height: 3px;
  border-radius: 999px;
  background: #ffffff;
  transform: translate(-50%, -50%);
  transition: background 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.adNewProductThumb::after{
  transform: translate(-50%, -50%) rotate(90deg);
}

.adProductsPane .adNewProductListItem:hover .adNewProductThumb,
.adProductsPane .adNewProductListItem:focus-within .adNewProductThumb{
  background: var(--ad-accent-fill) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}

.adProductsPane .adNewProductListItem:hover .adNewProductThumb::before,
.adProductsPane .adNewProductListItem:focus-within .adNewProductThumb::before,
.adProductsPane .adNewProductListItem:hover .adNewProductThumb::after,
.adProductsPane .adNewProductListItem:focus-within .adNewProductThumb::after{
  background: var(--ad-accent-fill);
}

.adProductsPane .adNewProductListItem:hover,
.adProductsPane .adNewProductListItem:focus-within{
  border-color: transparent !important;
  background:
    linear-gradient(180deg, rgba(28, 29, 33, 0.98), rgba(18, 19, 23, 0.98)) padding-box,
    var(--ad-accent-fill) border-box !important;
  box-shadow: none !important;
}

.adProductsPane .adNewProductListItem:hover .adProductName,
.adProductsPane .adNewProductListItem:focus-within .adProductName,
.adProductsPane .adNewProductListItem:hover .adProductMeta,
.adProductsPane .adNewProductListItem:focus-within .adProductMeta{
  background: none !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

.adStudio :is(
  button,
  [role="button"],
  input,
  select,
  textarea,
  .adField,
  .adChoiceSurface,
  .adChoiceIcon,
  .adFootagePanel,
  .adCommercialModePanel,
  .adImageStylePanel,
  .adImageStyleSurface,
  .adCustomSelect,
  .adCustomSelectButton,
  .adCustomSelectLeadingIcon,
  .adCustomSelectOption,
  .adReferenceDrop,
  .adReferenceIcon,
  .adUploadDrop,
  .adUploadIcon,
  .adImagePreviewTile,
  .adProductImageRemoveIcon,
  .adGeneratedSourceButton,
  .adGeneratedSourceOption,
  .adGeneratedImageCard,
  .adGeneratedImageNone,
  .adGeneratedImageNav,
  .adOutputNavButton,
  .adOutputDownloadButton,
  .adStudioStageArrow,
  .adSelectedProductSummary,
  .adProductsTrigger,
  .adCreativeOptionsTrigger,
  .adProductItem,
  .adProductThumb,
  .adProductCardAction,
  .adNewProductThumb,
  .adGenerateButton,
  .adGenerateButtonContent,
  .adGenerateButtonLabel,
  .adGenerateButtonMeta,
  .adGenerationModeOption span,
  .adUrlFillOption,
  .adInputTab,
  .adOutputButton,
  .adTextButton,
  .adPrimaryButton,
  .adDangerButton,
  .adIconButton,
  .adMenuCloseButton
),
.adProductMenu :is(
  button,
  input,
  textarea,
  .adField,
  .adUploadDrop,
  .adUploadIcon,
  .adImagePreviewTile,
  .adProductImageRemoveIcon,
  .adPrimaryButton,
  .adTextButton,
  .adMenuCloseButton
),
.adUrlFillMenu :is(
  button,
  input,
  .adUrlFillOption,
  .adPrimaryButton,
  .adTextButton,
  .adMenuCloseButton
),
.adCreativeOptions :is(
  button,
  input,
  select,
  textarea,
  .adField,
  .adChoiceSurface,
  .adChoiceIcon,
  .adCustomSelectButton,
  .adCustomSelectOption,
  .adPrimaryButton,
  .adTextButton,
  .adMenuCloseButton
),
.adDeleteConfirmMenu :is(button, .adDangerButton, .adTextButton, .adMenuCloseButton){
  transition-property: background, background-color, color, border-color, box-shadow, transform, opacity, filter;
  transition-duration: 260ms;
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

.adStudio :is(
  button,
  [role="button"],
  .adChoiceSurface,
  .adReferenceDrop,
  .adUploadDrop,
  .adProductItem,
  .adProductsTrigger,
  .adCreativeOptionsTrigger,
  .adProductImageRemoveButton,
  .adGeneratedImageCard,
  .adGeneratedImageNone,
  .adOutputNavButton,
  .adOutputDownloadButton,
  .adStudioStageArrow,
  .adMenuCloseButton
)::before,
.adStudio :is(
  button,
  [role="button"],
  .adChoiceSurface,
  .adReferenceDrop,
  .adUploadDrop,
  .adProductItem,
  .adProductsTrigger,
  .adCreativeOptionsTrigger,
  .adProductImageRemoveButton,
  .adGeneratedImageCard,
  .adGeneratedImageNone,
  .adOutputNavButton,
  .adOutputDownloadButton,
  .adStudioStageArrow,
  .adMenuCloseButton
)::after,
.adProductMenu :is(button, .adUploadDrop, .adImagePreviewTile, .adMenuCloseButton)::before,
.adProductMenu :is(button, .adUploadDrop, .adImagePreviewTile, .adMenuCloseButton)::after,
.adCreativeOptions :is(button, .adChoiceSurface, .adMenuCloseButton)::before,
.adCreativeOptions :is(button, .adChoiceSurface, .adMenuCloseButton)::after,
.adUrlFillMenu :is(button, .adUrlFillOption, .adMenuCloseButton)::before,
.adUrlFillMenu :is(button, .adUrlFillOption, .adMenuCloseButton)::after{
  transition-property: background, background-color, color, border-color, box-shadow, transform, opacity, filter;
  transition-duration: 260ms;
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

.adStudio :is(
  .adProductImageRemoveButton img,
  .adGeneratedImageCard img,
  .adGeneratedSourceButton img,
  .adGeneratedSourceOption img,
  .adSelectedProductThumb img,
  .adProductThumb img,
  .adUploadIcon img,
  .adReferenceIcon img
),
.adProductMenu :is(
  .adProductImageRemoveButton img,
  .adUploadIcon img
){
  transition-property: transform, opacity, filter;
  transition-duration: 260ms;
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

@media (max-width: 1220px){
  .adStudioWorkspace{
    display: block;
  }
}

@media (max-width: 980px){
  .adGenerationSection::after{
    content: "";
    flex: 0 0 100%;
    order: 20;
    height: 0;
  }

  .adGenerationSection > .adCreativeOptionsTrigger{
    order: 21;
  }

  .adGenerationSection > .adCreativeOptionsTrigger + .adGenerateButton{
    order: 22;
  }
}

@media (max-width: 860px){
  .adStudio{
    padding: 14px;
  }

  .adStudioHero{
    grid-template-columns: 1fr;
  }

  .adStudioHero h1{
    font-size: clamp(38px, 12vw, 64px);
  }

  .adStudioWorkspace{
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 0.42fr) minmax(0, 0.58fr);
  }

  .adProductsPane,
  .adProductPane{
    border-right: 0;
    border-bottom: 1px solid var(--ad-line);
  }

  .adBriefGrid,
  .adInlineFields,
  .adGenerationSettings,
  .adUrlFillOptions,
  .adChoiceGrid,
  .adFootageTypeGrid,
  .adCommercialModeGrid,
  .adImageCreativeTypeGrid,
  .adImageStyleGrid,
  .adGenderGrid,
  .adReferenceGrid{
    grid-template-columns: 1fr;
  }

  .adImagePreviewGrid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce){
  *,
  *::before,
  *::after{
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}