/* Magazine Step2 */
.instaui .instaui-mag-dots{
  display:flex; gap:8px; justify-content:center; align-items:center;
  padding: 6px 0 10px;
}
.instaui .instaui-mag-dots .dot{
  width: 7px; height: 7px; border-radius: 999px;
  background: rgba(0,0,0,.18);
  transition: transform .18s ease, background .18s ease;
}
.instaui .instaui-mag-dots .dot.is-on{
  background: rgba(0,0,0,.55);
  transform: scale(1.25);
}

/* Reader modal */
.instaui .instaui-mag-reader[hidden]{ display:none !important; }
.instaui .instaui-mag-reader{
  position: fixed;
  inset: 0;
  z-index: 10060;
}
.instaui .instaui-mag-reader-backdrop{
  position: absolute; inset: 0;
  background: rgba(0,0,0,.28);
}
.instaui .instaui-mag-reader-card{
  position: absolute;
  left: 12px; right: 12px;
  top: calc(env(safe-area-inset-top, 0px) + 10px);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 10px);
  background: #fff;
  border-radius: 22px;
  box-shadow: 0 18px 40px rgba(0,0,0,.25);
  overflow: hidden;
  display:flex;
  flex-direction: column;
}
.instaui .instaui-mag-reader-top{
  display:flex;
  justify-content: space-between;
  align-items:center;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.92);
  position: sticky;
  top: 0;
  z-index: 2;
}
.instaui .instaui-mag-reader-top .instaui-iconbtn{
  width: 44px; height: 44px;
  border-radius: 16px;
  display:inline-flex;
  align-items:center; justify-content:center;
  background: rgba(0,0,0,.04);
  border: 1px solid rgba(0,0,0,.06);
}
.instaui .instaui-mag-reader-body{
  padding: 14px 14px 18px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.instaui .instaui-mag-reader-content img{
  max-width: 100%;
  height: auto;
  border-radius: 16px;
}
.instaui .instaui-mag-reader-content iframe{
  width: 100%;
  border-radius: 16px;
}

.instaui .instaui-mag-reader-skel .sk-title{
  height: 20px; border-radius: 10px;
  background: rgba(0,0,0,.08);
  margin: 8px 0 12px;
}
.instaui .instaui-mag-reader-skel .sk-meta{
  height: 12px; width: 55%;
  border-radius: 10px;
  background: rgba(0,0,0,.06);
  margin-bottom: 18px;
}
.instaui .instaui-mag-reader-skel .sk-line{
  height: 12px; border-radius: 10px;
  background: rgba(0,0,0,.06);
  margin-bottom: 10px;
}




/* Single Article UI (Step2) */
.instaui .instaui-mag-article{
  display:flex;
  flex-direction: column;
  gap: 12px;
}
.instaui .instaui-mag-article-head{
  padding: 4px 2px 0;
}
.instaui .instaui-mag-article-title{
  font-weight: 950;
  font-size: 18px;
  line-height: 1.7;
  margin-bottom: 4px;
}
.instaui .instaui-mag-article-meta{
  color: rgba(0,0,0,.55);
  font-weight: 800;
  font-size: 12px;
}

.instaui .instaui-mag-article-player{
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  background: #111;
  box-shadow: 0 12px 26px rgba(0,0,0,.18);
}
.instaui .instaui-mag-article-player video,
.instaui .instaui-mag-article-player iframe{
  display:block;
  width: 100%;
  height: 240px;
  border: 0;
}
.instaui .instaui-mag-article-player.is-thumb{
  height: 240px;
  background-size: cover;
  background-position: center;
}
.instaui .instaui-mag-article-play{
  position:absolute;
  inset: 0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 44px;
  color: rgba(255,255,255,.95);
  text-shadow: 0 10px 22px rgba(0,0,0,.45);
}

.instaui .instaui-mag-article-box{
  background: #fff;
  border-radius: 22px;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 10px 22px rgba(0,0,0,.08);
  padding: 12px 12px 10px;
}
.instaui .instaui-mag-article-box-title{
  font-weight: 950;
  font-size: 14px;
  margin-bottom: 10px;
}

.instaui .instaui-mag-article-toc{
  display:flex;
  flex-direction: column;
  gap: 8px;
}
.instaui .instaui-mag-article-tocitem{
  text-decoration: none;
  color: rgba(0,0,0,.86);
  font-weight: 900;
  font-size: 13px;
  background: rgba(0,0,0,.03);
  border: 1px solid rgba(0,0,0,.06);
  padding: 10px 12px;
  border-radius: 16px;
}
.instaui .instaui-mag-article-tocitem.is-l2{
  margin-right: 10px;
  font-weight: 800;
  opacity: .95;
}

.instaui .instaui-mag-article-content{
  color: rgba(0,0,0,.86);
  font-size: 14px;
  line-height: 1.95;
}
.instaui .instaui-mag-article-content p{ margin: 0 0 10px; }
.instaui .instaui-mag-article-content h2,
.instaui .instaui-mag-article-content h3{ margin: 18px 0 10px; scroll-margin-top: calc(var(--instaui-topbar-h, 60px) + 14px); }

.instaui .instaui-mag-article-prods{
  display:flex;
  gap: 12px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 2px 2px 6px;
}
.instaui .instaui-mag-article-prods::-webkit-scrollbar{ display:none; }
.instaui .instaui-mag-prod{
  min-width: 160px;
  max-width: 160px;
  text-decoration: none;
  color: inherit;
  background: rgba(255,255,255,.98);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 10px 22px rgba(0,0,0,.08);
}
.instaui .instaui-mag-prod-thumb{
  height: 96px;
  background: #f0f0f0;
  background-size: cover;
  background-position: center;
}
.instaui .instaui-mag-prod-title{
  padding: 10px 10px 6px;
  font-weight: 950;
  font-size: 12px;
  line-height: 1.6;
}
.instaui .instaui-mag-prod-price{
  padding: 0 10px 10px;
  color: rgba(0,0,0,.65);
  font-weight: 900;
  font-size: 12px;
}

.instaui .instaui-mag-article-cta{
  position: sticky;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 8px);
  padding: 10px 2px 0;
}
.instaui .instaui-mag-article-ctabtn{
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration: none;
  color: #fff;
  font-weight: 950;
  font-size: 15px;
  border-radius: 22px;
  padding: 14px 16px;
  background: #22c55e;
  box-shadow: 0 12px 24px rgba(34,197,94,.28);
}
.instaui .instaui-mag-article-ctabtn:active{ transform: scale(.99); }


/* Magazine Home UI (v1) */
.instaui .instaui-mag-home[hidden],
.instaui .instaui-mag-results[hidden]{ display:none !important; }

.instaui .instaui-mag-hero{
  display:flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 6px 2px 8px;
  -webkit-overflow-scrolling: touch;
}
.instaui .instaui-mag-hero::-webkit-scrollbar{ display:none; }

.instaui .instaui-mag-hero-slide{
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  min-width: 86%;
  max-width: 86%;
  scroll-snap-align: start;
  text-decoration: none;
  color: inherit;
}
.instaui .instaui-mag-hero-bg{
  position: relative;
  height: 210px;
  border-radius: 22px;
  background: #eee;
  background-size: cover;
  background-position: center;
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(0,0,0,.12);
}
.instaui .instaui-mag-hero-bg::after{
  content:'';
  position:absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,.05) 55%, rgba(0,0,0,0));
}
.instaui .instaui-mag-hero-badge{
  position:absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  color: #fff;
  background: rgba(0, 170, 90, .92);
  border: 1px solid rgba(255,255,255,.25);
  backdrop-filter: blur(6px);
}
.instaui .instaui-mag-hero-cta{
  position:absolute;
  left: 10px;
  bottom: 10px;
  z-index: 2;
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  color: rgba(0,0,0,.92);
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(255,255,255,.35);
  backdrop-filter: blur(8px);
}
.instaui .instaui-mag-hero-text{
  padding: 10px 6px 0;
}
.instaui .instaui-mag-hero-title{
  font-weight: 950;
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 2px;
}
.instaui .instaui-mag-hero-meta{
  color: rgba(0,0,0,.55);
  font-weight: 800;
  font-size: 12px;
}

.instaui .instaui-mag-rowhead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin: 14px 2px 10px;
}
.instaui .instaui-mag-rowtitle{
  font-weight: 950;
  font-size: 15px;
}
.instaui .instaui-mag-rowmore{
  font-weight: 900;
  font-size: 12px;
  text-decoration: none;
  color: rgba(0,0,0,.55);
  background: transparent;
  border: 0;
  padding: 6px 10px;
  border-radius: 999px;
}
.instaui .instaui-mag-rowmore:active{ transform: scale(.98); }

.instaui .instaui-mag-chips{
  display:flex;
  gap: 10px;
  overflow-x:auto;
  -webkit-overflow-scrolling: touch;
  padding: 2px 2px 8px;
}
.instaui .instaui-mag-chips::-webkit-scrollbar{ display:none; }
.instaui .instaui-mag-chipbtn{
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.9);
  color: rgba(0,0,0,.78);
  border-radius: 999px;
  padding: 10px 14px;
  font-weight: 900;
  font-size: 12px;
  white-space: nowrap;
  box-shadow: 0 6px 14px rgba(0,0,0,.06);
}
.instaui .instaui-mag-chipbtn.is-on{
  background: rgba(255, 170, 180, .26);
  border-color: rgba(255, 170, 180, .55);
  color: rgba(0,0,0,.88);
}

.instaui .instaui-mag-cards{
  display:flex;
  gap: 12px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 2px 2px 10px;
}
.instaui .instaui-mag-cards::-webkit-scrollbar{ display:none; }
.instaui .instaui-mag-card{
  min-width: 210px;
  max-width: 210px;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 10px 22px rgba(0,0,0,.10);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.06);
}
.instaui .instaui-mag-card-thumb{
  height: 92px;
  background: #eee;
  background-size: cover;
  background-position: center;
  position: relative;
}
.instaui .instaui-mag-card-badge{
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 950;
  color: #fff;
  background: rgba(0,0,0,.60);
  border: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(6px);
}
.instaui .instaui-mag-card-body{
  padding: 10px 12px 12px;
}
.instaui .instaui-mag-card-title{
  font-weight: 950;
  font-size: 13px;
  line-height: 1.6;
  margin-bottom: 6px;
}
.instaui .instaui-mag-card-meta{
  color: rgba(0,0,0,.55);
  font-weight: 800;
  font-size: 12px;
}

.instaui .instaui-mag-videos{
  display:flex;
  gap: 12px;
  overflow-x:auto;
  -webkit-overflow-scrolling: touch;
  padding: 2px 2px 10px;
}
.instaui .instaui-mag-videos::-webkit-scrollbar{ display:none; }
.instaui .instaui-mag-vcard{
  min-width: 185px;
  max-width: 185px;
  background:#fff;
  border-radius: 20px;
  box-shadow: 0 10px 22px rgba(0,0,0,.10);
  border: 1px solid rgba(0,0,0,.06);
  overflow:hidden;
}
.instaui .instaui-mag-vthumb{
  position: relative;
  height: 170px;
  background:#eee;
  background-size: cover;
  background-position:center;
  cursor: pointer;
}
.instaui .instaui-mag-vplay{
  position:absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 52px;
  height: 52px;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  color: rgba(0,0,0,.90);
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(255,255,255,.35);
  backdrop-filter: blur(8px);
  font-size: 18px;
  font-weight: 900;
}

.instaui-mag-vplay svg{
  width: 20px;
  height: 20px;
  display: block;
  fill: currentColor;
}
.instaui .instaui-mag-vdur{
  position:absolute;
  left: 10px;
  bottom: 10px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 950;
  color: #fff;
  background: rgba(0,0,0,.65);
  border: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(6px);
}
.instaui .instaui-mag-vbtn{
  display:block;
  margin: 10px;
  padding: 12px 10px;
  text-align:center;
  border-radius: 14px;
  font-weight: 950;
  font-size: 13px;
  text-decoration: none;
  color: rgba(0,0,0,.88);
  background: rgba(0,0,0,.05);
  border: 1px solid rgba(0,0,0,.06);
}
.instaui .instaui-mag-vbtn:active{ transform: scale(.99); }


/* Magazine video posts (regular posts flagged as video) */
.instaui .instaui-mag-vposts{
  display:flex;
  gap: 12px;
  overflow-x:auto;
  -webkit-overflow-scrolling: touch;
  padding: 2px 2px 10px;
}
.instaui .instaui-mag-vposts::-webkit-scrollbar{ display:none; }
.instaui .instaui-mag-vpost{
  min-width: 240px;
  max-width: 240px;
  background:#fff;
  border-radius: 22px;
  box-shadow: 0 10px 22px rgba(0,0,0,.10);
  border: 1px solid rgba(0,0,0,.06);
  overflow:hidden;
  text-decoration:none;
  color: inherit;
}
.instaui .instaui-mag-vpost-thumb{
  position: relative;
  height: 128px;
  background:#eee;
  background-size: cover;
  background-position:center;
}
.instaui .instaui-mag-vpost-play{
  position:absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 52px;
  height: 52px;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  color: rgba(0,0,0,.90);
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(255,255,255,.35);
  backdrop-filter: blur(8px);
}
.instaui .instaui-mag-vpost-play svg{
  width: 20px;
  height: 20px;
  display:block;
  fill: currentColor;
}
.instaui .instaui-mag-vpost-dur{
  position:absolute;
  left: 10px;
  bottom: 10px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 950;
  color: #fff;
  background: rgba(0,0,0,.65);
  border: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(6px);
}
.instaui .instaui-mag-vpost-body{
  padding: 10px 12px 12px;
}
.instaui .instaui-mag-vpost-title{
  font-weight: 950;
  font-size: 13px;
  line-height: 1.6;
  margin-bottom: 6px;
}
.instaui .instaui-mag-vpost-meta{
  color: rgba(0,0,0,.55);
  font-weight: 800;
  font-size: 12px;
}

.instaui .instaui-mag-guide{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.instaui .instaui-mag-guidecard{
  background:#fff;
  border-radius: 18px;
  box-shadow: 0 10px 22px rgba(0,0,0,.10);
  border: 1px solid rgba(0,0,0,.06);
  padding: 14px 12px;
  text-decoration:none;
  color:inherit;
  min-height: 88px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.instaui .instaui-mag-guide-title{
  font-weight: 950;
  font-size: 13px;
  line-height: 1.6;
  margin-bottom: 8px;
}
.instaui .instaui-mag-guide-meta{
  color: rgba(0,0,0,.55);
  font-weight: 850;
  font-size: 12px;
}

/* Results list */
.instaui .instaui-mag-results{
  padding-top: 6px;
}
.instaui .instaui-mag-res-loading{
  padding: 12px 6px;
  color: rgba(0,0,0,.55);
  font-weight: 900;
  font-size: 12px;
}
.instaui .instaui-mag-list{
  display:flex;
  flex-direction:column;
  gap: 10px;
  padding: 2px 2px 8px;
}
.instaui .instaui-mag-res-item{
  display:flex;
  gap: 12px;
  align-items: stretch;
  background:#fff;
  border-radius: 18px;
  box-shadow: 0 10px 22px rgba(0,0,0,.08);
  border: 1px solid rgba(0,0,0,.06);
  text-decoration:none;
  color: inherit;
  overflow:hidden;
}
.instaui .instaui-mag-res-thumb{
  width: 92px;
  min-width: 92px;
  background:#eee;
  background-size: cover;
  background-position:center;
}
.instaui .instaui-mag-res-body{
  padding: 10px 12px;
  flex: 1;
}
.instaui .instaui-mag-res-meta{
  color: rgba(0,0,0,.55);
  font-weight: 850;
  font-size: 12px;
  margin-bottom: 6px;
}
.instaui .instaui-mag-res-title{
  font-weight: 950;
  font-size: 13px;
  line-height: 1.6;
}