/* DFX Cinema View V103 — reference-aligned full-width layout */
.dfxCinemaHeader{
  width:100%!important;
  max-width:none!important;
  min-height:72px!important;
  padding:0 clamp(18px,2vw,38px)!important;
  grid-template-columns:auto minmax(250px,360px) minmax(560px,1fr) auto!important;
  gap:clamp(16px,1.5vw,28px)!important;
}
.dfxCinemaSearch{height:40px!important}
.dfxCinemaProducts{gap:clamp(10px,1vw,18px)!important}
.dfxCinemaAccount{gap:9px!important}
.dfxCinemaPage{
  width:calc(100% - clamp(32px,3vw,64px))!important;
  max-width:none!important;
  margin:0 auto!important;
  padding:24px 0 64px!important;
  grid-template-columns:minmax(0,1fr) clamp(350px,21vw,410px)!important;
  gap:clamp(20px,1.5vw,30px)!important;
}
.dfxCinemaMain{width:100%!important;min-width:0!important}
.dfxCinemaSide{
  width:100%!important;
  min-width:0!important;
  gap:18px!important;
  align-self:start;
  position:sticky!important;
  top:92px!important;
}
.dfxCinemaPlayer{
  width:100%!important;
  padding:0!important;
  border:1px solid rgba(25,34,52,.52)!important;
  border-radius:16px!important;
  overflow:hidden!important;
  background:#030507!important;
  box-shadow:0 24px 58px rgba(18,30,58,.16)!important;
}
.dfxCinemaPlayer .video{
  width:100%!important;
  aspect-ratio:16/9!important;
  border-radius:15px!important;
}
.dfxCinemaEmbedPoster{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  overflow:hidden;
  cursor:pointer;
  background:#030507;
}
.dfxCinemaEmbedPoster>img{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  opacity:.96;
}
.dfxCinemaEmbedPoster:after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.03),rgba(0,0,0,.30));
}
.dfxCinemaPlay{
  width:72px;
  height:72px;
  padding:0;
  position:relative;
  z-index:2;
  border:1px solid rgba(255,255,255,.64);
  border-radius:50%;
  display:grid;
  place-items:center;
  color:#fff;
  background:rgba(0,0,0,.34);
  box-shadow:0 14px 45px rgba(0,0,0,.28);
  backdrop-filter:blur(8px);
  cursor:pointer;
  transition:transform .18s ease,background .18s ease;
}
.dfxCinemaPlay:hover{transform:scale(1.06);background:rgba(0,0,0,.50)}
.dfxCinemaPlay svg{width:28px;height:28px;fill:currentColor;margin-left:4px}
.dfxCinemaLoading{
  width:42px;
  height:42px;
  position:relative;
  z-index:3;
  display:none;
  border:4px solid rgba(255,255,255,.28);
  border-top-color:#fff;
  border-radius:50%;
  animation:dfxCinemaSpin .7s linear infinite;
}
@keyframes dfxCinemaSpin{to{transform:rotate(360deg)}}
.dfxWatchInfo{padding:14px 0 5px!important}
.dfxTitleLine{align-items:center!important}
.dfxTitleLine .title{
  font-size:clamp(22px,1.55vw,30px)!important;
  line-height:1.22!important;
  letter-spacing:-.025em!important;
}
.dfxCategoryPill{flex:0 0 auto!important}
.dfxWatchMeta{margin-top:7px!important}
.dfxCreatorStrip{
  min-height:72px;
  margin-top:11px!important;
  padding:13px 10px!important;
}
.dfxCreatorStrip .avatar{width:48px!important;height:48px!important}
.dfxCinemaActions{
  width:100%;
  margin:5px 0 14px!important;
  display:grid!important;
  grid-template-columns:minmax(112px,auto) minmax(145px,auto) minmax(112px,auto) minmax(105px,auto) minmax(165px,1fr)!important;
  gap:clamp(8px,.8vw,14px)!important;
}
.dfxCinemaActions form{min-width:0!important}
.dfxCinemaActions .act{
  width:100%!important;
  height:43px!important;
  justify-content:center!important;
  padding:0 14px!important;
  font-size:12px!important;
  border-radius:11px!important;
  box-shadow:none!important;
}
.dfxCinemaActions .dfxRewardBtn{justify-self:end!important}
.dfxCinemaPage .card,.dfxCinemaPage .widget{
  border-radius:15px!important;
  box-shadow:0 13px 35px rgba(25,42,80,.065)!important;
}
html[data-theme="dark"] .dfxCinemaPage .card,
html[data-theme="dark"] .dfxCinemaPage .widget{
  box-shadow:0 15px 42px rgba(0,0,0,.18)!important;
}
.dfxOverviewCard{padding:0 20px 17px!important}
.dfxInfoTabs{gap:28px!important}
.dfxInfoTabs button{height:48px!important;font-size:11px!important}
.dfxInfoPanel{padding-top:14px!important}
.dfxClampDesc{font-size:12px!important;line-height:1.65!important}
.dfxShowMore{font-size:11px!important}
.dfxTags{margin-top:12px!important;padding-top:12px!important}
.dfxTags span{padding:6px 11px!important;font-size:10px!important}
.dfxRelatedSection{padding:14px 18px!important;margin-top:12px!important}
.dfxRelatedSection .sectionHead{margin-bottom:10px!important}
.dfxRelatedSection .sectionHead h2{font-size:16px!important}
.dfxRelatedSection .videoGrid{gap:12px!important}
.dfxRelatedSection .videoCard{border-radius:10px!important}
.dfxRelatedSection .videoCard img{height:auto!important;aspect-ratio:16/9!important}
.dfxRelatedSection .videoCard div{padding:7px 4px 3px!important}
.dfxRelatedSection .videoCard b{font-size:11px!important}
.dfxRelatedSection .videoCard small{font-size:10px!important}
.dfxMoreCreator{padding:13px 18px!important;margin-top:10px!important}
.dfxCinemaPage .comments{padding:14px 18px!important;margin-top:10px!important}
.dfxCurrentCreator{padding:20px!important}
.dfxCurrentCreator h2{font-size:16px!important}
.dfxCreatorBig{width:58px!important;height:58px!important}
.dfxCreatorStrip .avatar,
.dfxCurrentCreator .dfxCreatorBig,
.dfxCinemaPage .comments .avatar{
  overflow:hidden!important;
  display:grid!important;
  place-items:center!important;
  padding:0!important;
  color:transparent!important;
  line-height:0!important;
}
.dfxCreatorDefaultAvatar{
  width:100%;
  height:100%;
  min-width:100%;
  min-height:100%;
  display:grid;
  place-items:center;
  border-radius:inherit;
  color:#fff;
  background:
    radial-gradient(circle at 28% 22%,rgba(255,255,255,.42),transparent 22%),
    linear-gradient(145deg,#168cff 0%,#6d4aff 48%,#e832a3 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.24);
}
.dfxCreatorDefaultAvatar svg{
  width:53%;
  height:53%;
  display:block;
  fill:currentColor;
  filter:drop-shadow(0 3px 5px rgba(40,20,100,.23));
}
.dfxCreatorDefaultAvatar .spark{fill:#ffdd61}
.dfxSideFollow{height:42px!important}
.dfxCinemaList{padding:17px!important}
.dfxCinemaList .widgetHead{margin-bottom:5px!important}
.dfxCinemaSideItem{
  grid-template-columns:clamp(118px,7.5vw,145px) minmax(0,1fr)!important;
  gap:11px!important;
  padding:9px 0!important;
}
.dfxCinemaSideItem img{
  width:100%!important;
  height:auto!important;
  aspect-ratio:16/9!important;
}
.dfxCinemaSideItem b{
  display:-webkit-box!important;
  overflow:hidden!important;
  font-size:11.5px!important;
  line-height:1.35!important;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
}
.dfxCinemaSideItem small{font-size:9.5px!important}
.dfxCinemaAvatar{
  overflow:hidden!important;
  position:relative!important;
  border:2px solid rgba(124,58,237,.17);
}
.dfxCinemaAvatar img{width:100%;height:100%;display:block;object-fit:cover;border-radius:50%}
.dfxCinemaAvatarFallback{
  width:100%;
  height:100%;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:linear-gradient(145deg,#2f7bff,#7c3aed 53%,#ec4899);
}
.dfxCinemaAvatarFallback svg{width:24px;height:24px;fill:#fff}
.dfxCinemaAvatarFallback .spark{fill:#ffd85b}
.dfxCinemaMobileMenu{display:none}
@media(max-width:1380px){
  .dfxCinemaHeader{
    grid-template-columns:auto minmax(250px,1fr) auto!important;
    grid-template-rows:auto auto!important;
    padding-top:9px!important;
  }
  .dfxCinemaProducts{
    grid-column:1/-1!important;
    grid-row:2!important;
    padding-bottom:9px!important;
    justify-content:center!important;
    overflow-x:auto!important;
    scrollbar-width:none;
  }
  .dfxCinemaProducts::-webkit-scrollbar{display:none}
  .dfxCinemaAccount{grid-column:3!important;grid-row:1!important}
  .dfxCinemaPage{grid-template-columns:minmax(0,1fr) 340px!important}
  .dfxCinemaActions{grid-template-columns:repeat(5,minmax(0,1fr))!important}
}
@media(max-width:1040px){
  .dfxCinemaPage{
    width:calc(100% - 28px)!important;
    grid-template-columns:1fr!important;
  }
  .dfxCinemaSide{
    position:static!important;
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  .dfxCurrentCreator{grid-column:1/-1}
  .dfxCinemaActions{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .dfxCinemaActions .dfxRewardBtn{justify-self:stretch!important}
}
@media(max-width:720px){
  .dfxCinemaHeader{
    position:relative!important;
    padding:9px 11px!important;
    grid-template-columns:auto 1fr auto!important;
    grid-template-rows:auto auto auto!important;
    gap:9px!important;
  }
  .dfxCinemaBrand{
    grid-column:1!important;
    grid-row:1!important;
    align-self:center!important;
    font-size:22px!important;
  }
  .dfxCinemaMobileMenu{
    width:42px;
    height:40px;
    padding:8px 10px;
    grid-column:2!important;
    grid-row:1!important;
    justify-self:start;
    align-self:center;
    border:1px solid rgba(124,58,237,.18);
    border-radius:12px;
    display:grid;
    grid-template-columns:1fr;
    align-content:center;
    gap:4px;
    color:#6d42e8;
    background:
      linear-gradient(var(--surface,#fff),var(--surface,#fff)) padding-box,
      linear-gradient(135deg,rgba(47,123,255,.30),rgba(124,58,237,.42),rgba(236,72,153,.28)) border-box;
    box-shadow:0 8px 22px rgba(77,60,170,.10);
    cursor:pointer;
  }
  .dfxCinemaMobileMenu span{
    width:20px;
    height:2px;
    margin:auto;
    display:block;
    border-radius:999px;
    background:currentColor;
    transform-origin:center;
    transition:transform .18s ease,opacity .18s ease;
  }
  .dfxCinemaMobileMenu b{display:none}
  .dfxCinemaHeader.mobile-menu-open .dfxCinemaMobileMenu span:nth-child(1){
    transform:translateY(6px) rotate(45deg);
  }
  .dfxCinemaHeader.mobile-menu-open .dfxCinemaMobileMenu span:nth-child(2){opacity:0}
  .dfxCinemaHeader.mobile-menu-open .dfxCinemaMobileMenu span:nth-child(3){
    transform:translateY(-6px) rotate(-45deg);
  }
  .dfxCinemaAccount{
    grid-column:3!important;
    grid-row:1!important;
    justify-self:end!important;
    gap:6px!important;
  }
  .dfxCinemaSearch{
    width:100%!important;
    grid-column:1/-1!important;
    grid-row:2!important;
  }
  .dfxCinemaProducts{
    width:100%!important;
    grid-column:1/-1!important;
    grid-row:3!important;
    padding:10px!important;
    border:1px solid rgba(124,58,237,.15);
    border-radius:15px;
    display:none!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:7px!important;
    overflow:visible!important;
    background:var(--surface,#fff);
    box-shadow:0 16px 36px rgba(36,45,78,.12);
  }
  html[data-theme="dark"] .dfxCinemaProducts{
    background:#111d2d;
    box-shadow:0 18px 42px rgba(0,0,0,.30);
  }
  .dfxCinemaHeader.mobile-menu-open .dfxCinemaProducts{
    display:grid!important;
    animation:dfxCinemaMobileMenuIn .18s ease-out;
  }
  @keyframes dfxCinemaMobileMenuIn{
    from{opacity:0;transform:translateY(-5px)}
    to{opacity:1;transform:none}
  }
  .dfxCinemaProducts a{
    min-width:0!important;
    height:42px!important;
    padding:0 9px!important;
    border:1px solid rgba(124,58,237,.10)!important;
    border-radius:11px!important;
    justify-content:flex-start!important;
    background:rgba(124,58,237,.045)!important;
  }
  .dfxCinemaProducts a span{
    display:inline!important;
    overflow:hidden;
    font-size:10px!important;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .dfxCinemaProducts i{width:30px!important;height:30px!important}
  .dfxCinemaPage{width:calc(100% - 18px)!important;padding-top:10px!important}
  .dfxCinemaSide{display:block!important}
  .dfxCinemaSide .widget{margin-top:12px!important}
  .dfxCinemaActions{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .dfxCinemaActions .dfxRewardBtn{grid-column:1/-1!important}
  .dfxTitleLine{align-items:flex-start!important}
  .dfxTitleLine .title{font-size:20px!important}
  .dfxCinemaPlay{width:58px;height:58px}
}
@media(max-width:520px){
  .dfxCinemaSign{display:none!important}
  .dfxCinemaJoin{height:38px!important;padding:0 10px!important;font-size:11px!important}
  .dfxCinemaPage{width:100%!important;padding-left:0!important;padding-right:0!important}
  .dfxCinemaPlayer{border-left:0!important;border-right:0!important;border-radius:0!important}
  .dfxCinemaPlayer .video{border-radius:0!important}
  .dfxWatchInfo,.dfxCinemaMain>.card,.dfxCinemaActions{
    margin-left:10px!important;
    margin-right:10px!important;
    width:auto!important;
  }
  .dfxCinemaSide{padding:0 10px!important}
  .dfxCreatorStrip{padding-left:0!important;padding-right:0!important}
}

/* DFX Content Header & Icon Polish V108 */
.dfxCinemaHeader{
  background:rgba(8,17,31,.9)!important;
  border-bottom:1px solid rgba(148,163,184,.14)!important;
  box-shadow:0 8px 30px rgba(2,8,23,.12)!important;
  backdrop-filter:blur(20px)!important;
}
html[data-theme="light"] .dfxCinemaHeader{
  background:rgba(255,255,255,.91)!important;
  border-color:#e4e9f2!important;
  box-shadow:0 7px 26px rgba(31,48,88,.055)!important;
}
.dfxCinemaBrand{font-size:27px!important;letter-spacing:-1.6px!important}
.dfxCinemaProducts{gap:9px!important}
.dfxCinemaProducts a{
  min-height:38px!important;
  padding:5px 9px 5px 6px!important;
  gap:7px!important;
  border:1px solid transparent!important;
  border-radius:11px!important;
  transition:transform .18s ease,background .18s ease,border-color .18s ease,box-shadow .18s ease!important;
}
.dfxCinemaProducts a:hover{
  transform:translateY(-2px)!important;
  background:rgba(255,255,255,.055)!important;
  border-color:rgba(148,163,184,.12)!important;
  box-shadow:0 8px 18px rgba(0,0,0,.11)!important;
}
html[data-theme="light"] .dfxCinemaProducts a:hover{
  background:#f7f9fd!important;
  border-color:#e3e9f3!important;
  box-shadow:0 8px 18px rgba(40,55,90,.065)!important;
}
.dfxCinemaProducts i{
  position:relative!important;
  width:28px!important;
  height:28px!important;
  overflow:hidden!important;
  border-radius:9px!important;
  box-shadow:0 6px 13px rgba(25,38,85,.16)!important;
}
.dfxCinemaProducts i:after{
  content:"";
  position:absolute;
  inset:3px;
  border:1px solid rgba(255,255,255,.2);
  border-radius:6px;
}
.dfxCinemaProducts i svg{
  position:relative;
  z-index:1;
  width:16px!important;
  height:16px!important;
  fill:none!important;
  stroke:#fff!important;
  stroke-width:1.9!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
}
.dfxCinemaProducts .pMeet{background:linear-gradient(145deg,#9c54ff,#7040e8)!important}
.dfxCinemaProducts .pStore{background:linear-gradient(145deg,#21c48a,#079b6d)!important}
.dfxCinemaProducts .pApp{background:linear-gradient(145deg,#438dff,#1769df)!important}
.dfxCinemaProducts .pMail{background:linear-gradient(145deg,#ff5c88,#e83068)!important}
.dfxCinemaProducts .pBank{background:linear-gradient(145deg,#ffad27,#f07c00)!important}
.dfxCinemaProducts .pExplore{background:linear-gradient(145deg,#3e8cff,#2069db)!important}
.dfxCinemaIcon#themeToggle{
  position:relative!important;
  width:42px!important;
  height:42px!important;
  padding:0!important;
  overflow:hidden!important;
  color:#e6ecff!important;
  background:radial-gradient(circle at 30% 20%,rgba(255,255,255,.12),transparent 33%),linear-gradient(145deg,#18263d,#0d1728)!important;
  border:1px solid rgba(148,163,184,.2)!important;
  border-radius:13px!important;
  box-shadow:0 8px 20px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.07)!important;
  transition:transform .18s ease,box-shadow .18s ease!important;
}
html[data-theme="light"] .dfxCinemaIcon#themeToggle{
  color:#27334c!important;
  background:radial-gradient(circle at 30% 20%,rgba(255,255,255,.9),transparent 36%),linear-gradient(145deg,#fff,#eef3fb)!important;
  border-color:#dce4f0!important;
  box-shadow:0 8px 20px rgba(38,52,88,.07),inset 0 1px 0 #fff!important;
}
.dfxCinemaIcon#themeToggle:hover{transform:translateY(-2px) rotate(-5deg)!important;box-shadow:0 12px 27px rgba(76,60,180,.16)!important}
.dfxCinemaIcon#themeToggle svg{
  width:20px!important;
  height:20px!important;
  fill:none!important;
  stroke:currentColor!important;
  stroke-width:1.9!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
}
.dfxCinemaIcon#themeToggle.is-dark-theme{color:#ffd05a!important}
.dfxCinemaMobileMenu{
  width:42px!important;
  height:42px!important;
  background:linear-gradient(145deg,#6e4aef,#3b6df2)!important;
  border:0!important;
  box-shadow:0 9px 21px rgba(91,68,228,.25)!important;
}
.dfxCinemaMobileMenu span{background:#fff!important}
@media(max-width:720px){
  .dfxCinemaHeader{
    grid-template-columns:auto auto minmax(0,1fr)!important;
    gap:8px!important;
    padding:9px 10px!important;
  }
  .dfxCinemaBrand{font-size:23px!important}
  .dfxCinemaAccount{gap:6px!important}
  .dfxCinemaProducts{
    padding:10px!important;
    gap:8px!important;
    background:rgba(9,18,32,.97)!important;
    border:1px solid rgba(148,163,184,.17)!important;
    border-radius:15px!important;
    box-shadow:0 20px 55px rgba(0,0,0,.28)!important;
  }
  html[data-theme="light"] .dfxCinemaProducts{
    background:rgba(255,255,255,.98)!important;
    border-color:#e2e8f1!important;
    box-shadow:0 20px 55px rgba(34,48,83,.16)!important;
  }
  .dfxCinemaProducts a{
    min-height:48px!important;
    height:auto!important;
    padding:7px 8px!important;
    background:rgba(255,255,255,.035)!important;
    border-color:rgba(148,163,184,.11)!important;
  }
  html[data-theme="light"] .dfxCinemaProducts a{background:#f7f9fc!important;border-color:#e5eaf2!important}
  .dfxCinemaProducts a span{display:inline!important;font-size:10px!important}
  .dfxCinemaProducts i{width:31px!important;height:31px!important}
}
@media(max-width:430px){
  .dfxCinemaBrand{font-size:21px!important}
  .dfxCinemaIcon#themeToggle,.dfxCinemaMobileMenu{width:38px!important;height:38px!important;border-radius:11px!important}
  .dfxCinemaProducts{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}