/* MiKO Ads Clean v23 — default/demo state only.
   Real campaign image/video/custom-code branches are intentionally untouched. */

.miko-ad-dialog.is-demo-empty-dialog{
  width:min(760px,calc(100vw - 32px))!important;
  max-width:760px!important;
  max-height:calc(100dvh - 24px)!important;
  overflow:visible!important;
  border:0!important;
  border-radius:26px!important;
  background:transparent!important;
  box-shadow:0 28px 80px rgba(0,0,0,.46)!important;
}

.miko-ad-dialog.is-demo-empty-dialog .miko-ad-content{
  padding:0!important;
  background:transparent!important;
}

.miko-ad-placeholder.is-demo-empty{
  position:relative!important;
  width:100%!important;
  height:min(620px,calc(100dvh - 24px))!important;
  min-height:0!important;
  aspect-ratio:auto!important;
  margin:0!important;
  overflow:hidden!important;
  border:1px solid rgba(155,200,242,.22)!important;
  border-radius:26px!important;
  background:#07192f!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 22px 60px rgba(0,0,0,.34)!important;
}

.miko-ad-placeholder.is-demo-empty .miko-ad-placeholder__eyebrow,
.miko-ad-placeholder.is-demo-empty .miko-ad-demo-badge,
.miko-ad-placeholder.is-demo-empty .miko-ad-orb,
.miko-ad-placeholder.is-demo-empty .miko-ad-mascots,
.miko-ad-placeholder.is-demo-empty .miko-ad-speech,
.miko-ad-placeholder.is-demo-empty .miko-ad-generated-hero{
  display:none!important;
}

.miko-ad-placeholder.is-demo-empty .miko-ad-demo-creative,
.miko-ad-placeholder.is-demo-empty .miko-ad-demo-visual,
.miko-ad-placeholder.is-demo-empty .miko-ad-mascot-stage{
  position:absolute!important;
  inset:0!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  max-width:none!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:inherit!important;
  background:transparent!important;
  box-shadow:none!important;
  overflow:hidden!important;
  transform:none!important;
}

.miko-ad-placeholder.is-demo-empty .miko-ad-mascot-stage:before{
  content:""!important;
  position:absolute!important;
  inset:18px!important;
  z-index:0!important;
  width:auto!important;
  height:auto!important;
  border:1px solid rgba(116,174,226,.16)!important;
  border-radius:20px!important;
  background:#0a203b!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.025)!important;
}

.miko-ad-placeholder.is-demo-empty .miko-ad-empty-state{
  position:absolute!important;
  z-index:4!important;
  left:50%!important;
  top:42%!important;
  transform:translate(-50%,-50%)!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  width:min(82%,420px)!important;
  text-align:center!important;
  color:#fff!important;
  pointer-events:none!important;
}

.miko-ad-placeholder.is-demo-empty .miko-ad-empty-state__icon{
  display:grid!important;
  place-items:center!important;
  width:58px!important;
  height:58px!important;
  margin-bottom:14px!important;
  border:1px solid rgba(154,211,255,.28)!important;
  border-radius:17px!important;
  background:#102e50!important;
  color:#8dceff!important;
  box-shadow:0 10px 28px rgba(0,0,0,.18)!important;
}
.miko-ad-placeholder.is-demo-empty .miko-ad-empty-state__icon svg{
  width:29px!important;
  height:29px!important;
  fill:none!important;
  stroke:currentColor!important;
  stroke-width:1.8!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
}
.miko-ad-placeholder.is-demo-empty .miko-ad-empty-state strong{
  display:block!important;
  color:#f7fbff!important;
  font-size:clamp(24px,4vw,34px)!important;
  line-height:1!important;
  font-weight:950!important;
  letter-spacing:.08em!important;
}
.miko-ad-placeholder.is-demo-empty .miko-ad-empty-state small{
  display:block!important;
  margin-top:8px!important;
  color:#9db6cf!important;
  font-size:12px!important;
  font-weight:750!important;
  letter-spacing:.06em!important;
}

/* Top controls */
.miko-ad-placeholder.is-demo-empty .miko-ad-square-countdown{
  position:absolute!important;
  z-index:20!important;
  top:18px!important;
  left:18px!important;
  right:auto!important;
  bottom:auto!important;
  display:flex!important;
  align-items:center!important;
  min-height:42px!important;
  max-width:calc(55% - 18px)!important;
  padding:7px 10px!important;
  border:1px solid rgba(255,255,255,.16)!important;
  border-radius:999px!important;
  background:rgba(5,20,39,.92)!important;
  color:#edf7ff!important;
  box-shadow:0 8px 24px rgba(0,0,0,.18)!important;
  backdrop-filter:blur(10px)!important;
}
.miko-ad-placeholder.is-demo-empty .miko-ad-square-countdown__progress{
  background:rgba(255,255,255,.12)!important;
}
.miko-ad-placeholder.is-demo-empty .miko-ad-square-close{
  position:absolute!important;
  z-index:21!important;
  top:18px!important;
  right:18px!important;
  left:auto!important;
  bottom:auto!important;
  min-width:82px!important;
  width:auto!important;
  height:42px!important;
  padding:0 12px!important;
  border:1px solid rgba(255,255,255,.16)!important;
  border-radius:999px!important;
  background:rgba(5,20,39,.92)!important;
  color:#fff!important;
  box-shadow:0 8px 24px rgba(0,0,0,.18)!important;
  backdrop-filter:blur(10px)!important;
}
.miko-ad-placeholder.is-demo-empty .miko-ad-square-close:hover:not(:disabled){
  transform:translateY(-1px)!important;
  background:#102e50!important;
}

/* CTA */
.miko-ad-placeholder.is-demo-empty .miko-ad-square-cta{
  position:absolute!important;
  z-index:15!important;
  left:50%!important;
  right:auto!important;
  bottom:102px!important;
  width:min(82%,560px)!important;
  height:auto!important;
  min-height:62px!important;
  margin:0!important;
  padding:10px 12px 10px 15px!important;
  transform:translateX(-50%)!important;
  border:1px solid rgba(255,255,255,.18)!important;
  border-radius:18px!important;
  background:#136fd8!important;
  color:#fff!important;
  box-shadow:0 12px 28px rgba(10,76,151,.28)!important;
}
.miko-ad-placeholder.is-demo-empty .miko-ad-square-cta:before{display:none!important}
.miko-ad-placeholder.is-demo-empty .miko-ad-square-cta:hover{
  transform:translateX(-50%) translateY(-2px)!important;
  background:#0d63c5!important;
  box-shadow:0 16px 34px rgba(10,76,151,.34)!important;
}
.miko-ad-placeholder.is-demo-empty .miko-ad-square-cta__icon{
  flex:0 0 42px!important;
  width:42px!important;
  height:42px!important;
  border-radius:13px!important;
  background:rgba(255,255,255,.12)!important;
}
.miko-ad-placeholder.is-demo-empty .miko-ad-square-cta__icon svg{
  width:22px!important;
  height:22px!important;
}
.miko-ad-placeholder.is-demo-empty .miko-ad-square-cta__copy{
  min-width:0!important;
  align-items:flex-start!important;
}
.miko-ad-placeholder.is-demo-empty .miko-ad-square-cta__copy strong{
  font-size:16px!important;
  line-height:1.15!important;
}
.miko-ad-placeholder.is-demo-empty .miko-ad-square-cta__copy small{
  margin-top:2px!important;
  color:rgba(255,255,255,.76)!important;
  font-size:9px!important;
  line-height:1.25!important;
}
.miko-ad-placeholder.is-demo-empty .miko-ad-square-cta__arrow{
  flex:0 0 38px!important;
  width:38px!important;
  height:38px!important;
  border-radius:50%!important;
  background:#fff!important;
  color:#136fd8!important;
}

/* Advertiser profile card */
.miko-ad-placeholder.is-demo-empty .miko-ad-square-advertiser{
  position:absolute!important;
  z-index:16!important;
  left:50%!important;
  right:auto!important;
  bottom:18px!important;
  display:grid!important;
  grid-template-columns:44px minmax(0,1fr) auto auto!important;
  grid-template-rows:auto!important;
  align-items:center!important;
  column-gap:10px!important;
  row-gap:0!important;
  width:min(92%,640px)!important;
  max-width:640px!important;
  min-width:0!important;
  height:auto!important;
  min-height:66px!important;
  margin:0!important;
  padding:9px 11px!important;
  transform:translateX(-50%)!important;
  border:1px solid rgba(255,255,255,.72)!important;
  border-radius:16px!important;
  background:rgba(255,255,255,.97)!important;
  color:#173c64!important;
  box-shadow:0 12px 26px rgba(0,0,0,.18)!important;
  overflow:hidden!important;
  backdrop-filter:blur(10px)!important;
}
.miko-ad-placeholder.is-demo-empty .miko-ad-square-advertiser__avatar{
  position:relative!important;
  display:block!important;
  width:42px!important;
  height:42px!important;
  min-width:42px!important;
  flex:0 0 42px!important;
  border-radius:50%!important;
  overflow:visible!important;
}
.miko-ad-placeholder.is-demo-empty .miko-ad-square-advertiser__avatar img{
  display:block!important;
  width:42px!important;
  height:42px!important;
  object-fit:cover!important;
  border-radius:50%!important;
}
.miko-ad-placeholder.is-demo-empty .miko-ad-square-advertiser__identity{
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  justify-content:center!important;
  min-width:0!important;
  max-width:none!important;
  width:auto!important;
  overflow:hidden!important;
}
.miko-ad-placeholder.is-demo-empty .miko-ad-square-advertiser__name{
  display:flex!important;
  align-items:center!important;
  gap:4px!important;
  width:100%!important;
  height:auto!important;
  min-width:0!important;
}
.miko-ad-placeholder.is-demo-empty .miko-ad-square-advertiser__name strong{
  max-width:100%!important;
  overflow:hidden!important;
  color:#163b63!important;
  font-size:10px!important;
  font-weight:950!important;
  line-height:1.2!important;
  white-space:nowrap!important;
  text-overflow:ellipsis!important;
}
.miko-ad-placeholder.is-demo-empty .miko-ad-square-advertiser__rank{
  display:block!important;
  margin-top:2px!important;
  color:#52708e!important;
  font-size:7px!important;
  line-height:1.2!important;
  white-space:nowrap!important;
}
.miko-ad-placeholder.is-demo-empty .miko-ad-square-advertiser__identity>small{
  display:block!important;
  width:100%!important;
  height:auto!important;
  margin-top:2px!important;
  overflow:hidden!important;
  color:#72889d!important;
  font-size:6.5px!important;
  line-height:1.2!important;
  white-space:nowrap!important;
  text-overflow:ellipsis!important;
}
.miko-ad-placeholder.is-demo-empty .miko-ad-square-advertiser__badges{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  flex-wrap:nowrap!important;
  gap:4px!important;
  width:auto!important;
  min-width:0!important;
  max-width:210px!important;
  height:auto!important;
  overflow:hidden!important;
}
.miko-ad-placeholder.is-demo-empty .miko-ad-square-advertiser__badges>span{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:3px!important;
  width:auto!important;
  min-width:22px!important;
  height:24px!important;
  min-height:24px!important;
  padding:0 6px!important;
  border-radius:999px!important;
}
.miko-ad-placeholder.is-demo-empty .miko-ad-square-advertiser__badges>span svg{
  width:11px!important;
  height:11px!important;
}
.miko-ad-placeholder.is-demo-empty .miko-ad-square-advertiser__badges>span b{
  display:block!important;
  max-width:62px!important;
  overflow:hidden!important;
  font-size:6px!important;
  line-height:1!important;
  white-space:nowrap!important;
  text-overflow:ellipsis!important;
}
.miko-ad-placeholder.is-demo-empty .miko-ad-pro-controls{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:4px!important;
  min-width:0!important;
}

/* Tablet */
@media(max-width:1024px){
  .miko-ad-dialog.is-demo-empty-dialog{
    width:min(700px,calc(100vw - 24px))!important;
  }
  .miko-ad-placeholder.is-demo-empty{
    height:min(590px,calc(100dvh - 24px))!important;
  }
  .miko-ad-placeholder.is-demo-empty .miko-ad-empty-state{top:40%!important}
}

/* Mobile */
@media(max-width:640px){
  .miko-ad-overlay{padding:6px!important}
  .miko-ad-dialog.is-demo-empty-dialog{
    width:calc(100vw - 12px)!important;
    max-width:none!important;
    border-radius:20px!important;
  }
  .miko-ad-placeholder.is-demo-empty{
    height:min(560px,calc(100dvh - 12px))!important;
    border-radius:20px!important;
  }
  .miko-ad-placeholder.is-demo-empty .miko-ad-mascot-stage:before{
    inset:10px!important;
    border-radius:15px!important;
  }
  .miko-ad-placeholder.is-demo-empty .miko-ad-square-countdown{
    top:10px!important;
    left:10px!important;
    min-height:36px!important;
    max-width:58%!important;
    padding:5px 8px!important;
    font-size:9px!important;
  }
  .miko-ad-placeholder.is-demo-empty .miko-ad-square-close{
    top:10px!important;
    right:10px!important;
    min-width:64px!important;
    height:36px!important;
    padding:0 9px!important;
  }
  .miko-ad-placeholder.is-demo-empty .miko-ad-empty-state{
    top:37%!important;
    width:78%!important;
  }
  .miko-ad-placeholder.is-demo-empty .miko-ad-empty-state__icon{
    width:50px!important;
    height:50px!important;
    margin-bottom:10px!important;
    border-radius:15px!important;
  }
  .miko-ad-placeholder.is-demo-empty .miko-ad-empty-state strong{font-size:24px!important}
  .miko-ad-placeholder.is-demo-empty .miko-ad-empty-state small{font-size:10px!important}
  .miko-ad-placeholder.is-demo-empty .miko-ad-square-cta{
    bottom:86px!important;
    width:calc(100% - 28px)!important;
    min-height:56px!important;
    padding:8px 9px 8px 11px!important;
    border-radius:15px!important;
  }
  .miko-ad-placeholder.is-demo-empty .miko-ad-square-cta__icon{
    flex-basis:36px!important;
    width:36px!important;
    height:36px!important;
  }
  .miko-ad-placeholder.is-demo-empty .miko-ad-square-cta__copy strong{font-size:13px!important}
  .miko-ad-placeholder.is-demo-empty .miko-ad-square-cta__copy small{font-size:7.5px!important}
  .miko-ad-placeholder.is-demo-empty .miko-ad-square-cta__arrow{
    flex-basis:34px!important;
    width:34px!important;
    height:34px!important;
  }
  .miko-ad-placeholder.is-demo-empty .miko-ad-square-advertiser{
    bottom:10px!important;
    grid-template-columns:36px minmax(0,1fr) auto!important;
    width:calc(100% - 20px)!important;
    max-width:none!important;
    min-height:64px!important;
    padding:7px 8px!important;
    gap:7px!important;
    border-radius:14px!important;
  }
  .miko-ad-placeholder.is-demo-empty .miko-ad-square-advertiser__avatar,
  .miko-ad-placeholder.is-demo-empty .miko-ad-square-advertiser__avatar img{
    width:34px!important;
    height:34px!important;
    min-width:34px!important;
    flex-basis:34px!important;
  }
  .miko-ad-placeholder.is-demo-empty .miko-ad-square-advertiser__name strong{font-size:8.5px!important}
  .miko-ad-placeholder.is-demo-empty .miko-ad-square-advertiser__rank{font-size:6px!important}
  .miko-ad-placeholder.is-demo-empty .miko-ad-square-advertiser__identity>small{font-size:5.5px!important}
  .miko-ad-placeholder.is-demo-empty .miko-ad-square-advertiser__badges{
    max-width:86px!important;
  }
  .miko-ad-placeholder.is-demo-empty .miko-ad-square-advertiser__badges>span{
    width:20px!important;
    min-width:20px!important;
    height:20px!important;
    min-height:20px!important;
    padding:0 4px!important;
  }
  .miko-ad-placeholder.is-demo-empty .miko-ad-square-advertiser__badges>span b{display:none!important}
  .miko-ad-placeholder.is-demo-empty .miko-ad-pro-controls{display:none!important}
}

@media(max-width:430px){
  .miko-ad-placeholder.is-demo-empty{
    height:min(530px,calc(100dvh - 10px))!important;
  }
  .miko-ad-placeholder.is-demo-empty .miko-ad-empty-state{top:35%!important}
  .miko-ad-placeholder.is-demo-empty .miko-ad-square-cta{bottom:80px!important}
  .miko-ad-placeholder.is-demo-empty .miko-ad-square-advertiser{
    grid-template-columns:32px minmax(0,1fr) auto!important;
    width:calc(100% - 16px)!important;
    min-height:60px!important;
    padding:6px 7px!important;
  }
  .miko-ad-placeholder.is-demo-empty .miko-ad-square-advertiser__avatar,
  .miko-ad-placeholder.is-demo-empty .miko-ad-square-advertiser__avatar img{
    width:30px!important;
    height:30px!important;
    min-width:30px!important;
    flex-basis:30px!important;
  }
}
@media(max-width:390px){
  .miko-ad-placeholder.is-demo-empty .miko-ad-square-countdown{max-width:56%!important}
  .miko-ad-placeholder.is-demo-empty .miko-ad-square-cta{width:calc(100% - 20px)!important}
  .miko-ad-placeholder.is-demo-empty .miko-ad-square-advertiser__badges{max-width:68px!important}
}
@media(max-width:360px){
  .miko-ad-placeholder.is-demo-empty{
    height:min(500px,calc(100dvh - 8px))!important;
  }
  .miko-ad-placeholder.is-demo-empty .miko-ad-empty-state{top:33%!important}
  .miko-ad-placeholder.is-demo-empty .miko-ad-empty-state strong{font-size:21px!important}
  .miko-ad-placeholder.is-demo-empty .miko-ad-square-cta{bottom:76px!important}
  .miko-ad-placeholder.is-demo-empty .miko-ad-square-advertiser__badges{max-width:56px!important}
}

@media(prefers-reduced-motion:reduce){
  .miko-ad-placeholder.is-demo-empty *,
  .miko-ad-placeholder.is-demo-empty *:before,
  .miko-ad-placeholder.is-demo-empty *:after{
    animation:none!important;
    transition:none!important;
  }
}