/*
Theme Name:ZStream
Theme URI:https://web.facebook.com/sofyan423
Description:Theme for Anime Stream
Author:Sofyan R.
Author URI:https://web.facebook.com/sofyan423
Version:2.7.1
Tags:two-columns,fixed-width,custom-header,custom-menu
*/
@import url('https://fonts.googleapis.com/css?family=Nunito:400,600,700,900&display=swap');

html {
  scroll-behavior: smooth
}

body {
  font-family: 'Nunito', sans-serif;
  background: #fff;
  color: #444;
  margin: 0
}

ul {
  margin: 5px;
  padding-inline-start: 20px
}

a {
  text-decoration: none;
  color: inherit;
  transition: .2s
}

p {
  margin: 0
}

:focus {
  outline: 0
}

button {
  font-family: 'Nunito', sans-serif
}

img {
  max-width: 100%
}

.container {
  margin: 0 auto;
  max-width: 1080px;
  margin: 0 auto
}

.header {
  width: 100%;
  display: inline-block;
  position: relative;
  background: #fff;
  box-shadow: 0 5px 4px rgba(0, 0, 0, 0.1);
  z-index: 100
}

.header .container {
  max-width: 1100px
}

.header-logo {
  color: #444;
  font-size: 27px;
  font-weight: 900;
  float: left;
  align-items: center;
  padding: 12px;
  transition: .2s
}

.header-logo .icon {
  color: #6e6dfb
}

.header-logo:hover {
  color: #6e6dfb
}

.header-logo img {
  height: 38px
}

.header-navigation {
  list-style: none;
  padding: 0;
  margin: 0;
  display: inline-block
}

.header-navigation .menu-item {
  display: inline-flex
}

.header-navigation .menu-item a {
  align-items: center;
  display: inline-flex;
  padding: 20px 15px;
  font-weight: 600;
  transition: .2s
}

.header-navigation .menu-item a:hover,
.header-navigation .current-menu-item {
  box-shadow: inset 0 -5px 0 #6e6dfb;
  color: #111
}

.header-navigation .menu-item.menu-item-has-children {
  position: relative
}

.header-navigation .menu-item.menu-item-has-children .icon {
  padding-left: 7px
}

.header-navigation .menu-item .sub-menu {
  display: none;
  position: absolute;
  top: 55px;
  min-width: 110px;
  background: #fff;
  box-shadow: 0 5px 30px rgba(0, 0, 0, .5);
  border-radius: 3px;
  font-size: 13px;
  list-style: none;
  padding: 10px;
  line-height: 30px;
  margin: 0;
  left: 0;
  z-index: 3
}

.header-navigation .menu-item.menu-item-has-children:hover .sub-menu {
  display: block
}

.header-navigation .menu-item.menu-item-has-children .sub-menu li a {
  display: block;
  padding: 2px 8px
}

.header-navigation .menu-item.menu-item-has-children .sub-menu .menu-item {
  padding: 0;
  width: 100%;
  box-shadow: none;
  border-radius: 3px;
  transition: .2s
}

.header-navigation .menu-item.menu-item-has-children .sub-menu .menu-item:hover {
  background: #6e6dfb;
  color: #eee
}

.header-navigation .menu-item.menu-item-has-children .sub-menu .menu-item a:hover {
  color: #fff;
  box-shadow: none
}

.header-right {
  float: right;
  display: flex;
  align-items: center;
  padding: 10px
}

.header-searchbar form {
  margin: 0;
  position: relative;
  overflow: hidden
}

.header-searchbar form button {
  display: contents;
  cursor: pointer
}

.header-searchbar #search {
  background: #f7fafc;
  color: #777;
  font-family: inherit;
  width: 180px;
  padding: 12px;
  border: none;
  border-radius: 5px;
  transition: ease-in-out, width .35s ease-in-out
}

.header-searchbar #search:focus {
  width: 230px
}

.header-searchbar .icon {
  position: absolute;
  right: 10px;
  top: 10px;
  font-size: 20px;
  color: #72759e;
  padding-left: 8px;
  border-left: solid 2px #72759e
}

.header-menu input[type=checkbox] {
  display: none
}

.showmenu {
  display: none;
  float: left;
  padding: 15px;
  font-size: 31px;
  color: #444;
  background: #f7fafc
}

.showsearch {
  display: none;
  float: right;
  padding: 15px;
  font-size: 31px;
  color: #444;
  background: #f7fafc
}

.notif {
  background: #6e6dfb;
  text-align: center;
  color: #fff;
  padding: 5px
}

.content {
  overflow: hidden
}

.content h2 {
  margin: 0;
  margin-left: 10px;
  padding: 15px 0;
  color: #444
}

.content h2 span {
  font-weight: 800;
  color: #6e6dfb
}

.content h2 span.rightz {
  float: right;
  font-size: 14px;
  color: #eee !important;
  font-weight: 600
}

.pagecontent {
  margin: 15px;
  font-size: 15px
}

.pagecontent h2 {
  margin: 0;
  padding: 5px 0
}

.pagecontent h2 span {
  line-height: 50px
}

.pagecontent p {
  text-align: justify;
  margin-bottom: 8px
}

a.otherz {
  background: #6e6dfb;
  padding: 5px 10px;
  border-radius: 4px;
  margin: 0 5px
}

button.simplefavorites-clear {
  background: #6e6dfb;
  color: #eee;
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
  margin: 0 5px;
  border: none;
  cursor: pointer;
  font-family: inherit
}

.popular {
  background: #f7fafc;
  background: #f7fafc url(https://cdn.staticaly.com/img/4.bp.blogspot.com/-alPKtyxQxTg/W4Zg9GsK5rI/AAAAAAAAAM4/0GbDlvV_7S4l6zF4PAFXGCjCMRWOMSHPgCLcBGAs/s1600/heleh+maling+sia.png);
  -webkit-animation: loopnavbg-data-v-c423aec0 350s linear infinite;
  animation: loopnavbg-data-v-c423aec0 350s linear infinite;
  -webkit-animation: loopnavbg-data-v-c423aec0 350s linear infinite;
  animation: loopnavbg-data-v-c423aec0 350s linear infinite;
  animation: loopingbackg 350s linear infinite;
  padding-top: 10px;
  padding-bottom: 15px
}

.flexbox {
  display: flex;
  flex-wrap: wrap;
  text-align: center
}

.flexbox-item {
  flex: 0 0 16.66667%;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 16.66667%;
  flex: 0 0 16.66667%;
  max-width: 16.66667%;
  position: relative;
  width: 100%;
  z-index: 1
}

.flexbox-thumb {
  overflow: hidden;
  position: relative;
  box-shadow: 0 5px 20px rgba(0, 0, 0, .5);
  border-radius: 5px;
  margin: 0 10px
}

.flexbox-thumb img {
  width: 100%;
  height: auto
}

.flexbox-thumb:before {
  -webkit-transition: all .1s ease-in-out 0;
  -khtml-transition: all .1s ease-in-out 0;
  -moz-transition: all .1s ease-in-out 0;
  -ms-transition: all .1s ease-in-out 0;
  -o-transition: all .1s ease-in-out 0;
  transition: all .1s ease-in-out 0;
  content: "";
  position: absolute;
  display: block;
  width: 50px;
  height: 50px;
  top: 50%;
  left: 50%;
  margin-top: -25px;
  margin-left: -25px;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAH0AAAB9BAMAAAB9rnEWAAAAJ1BMVEUAAAD///////////////////////////////////////////////+uPUo5AAAADHRSTlMA6teXxGOtDXw1IUzALqFxAAAE8UlEQVR4AaWVy28cRRDG27Ed2+uLbWQ5hzlYIebpw4YQgsAHIysg5D1EGKQAPlhgDsAc1rykwB6MAopEfDCKEAdyWCkoQooPjiKBhHJgdmc3GNcfxY67eqYfVd29cp3s2f51V9f3dZXg47eb2+dnZ+cufHz7VzF01DbegDKytQ+GxB81wIyn/xqCnroITmSfR+NfN1x8EM+14/B7CYkD9A9j8DvARh6xwT0ej9lg0ocDdJuByjf8PMz78TSAA6z7+L0gDlDn8W+spXNvXrr0ykeWnJ19NntjZefVv+Xnb395ydigx/Gb2qLsE91tDy5G3ECX7in7uTzScusHi7fkyjyuKbsVOH6J+n264U9gL+SR6WVfAtXx/3IeHU88CZTH91l9xZd8ApNhewzivlqV279sRtjTs2wqaC6sYVkk8/uO+n7Nz4uHaqF5TaXtcQAXNSXiAlm9/RAvvqAkPMCPR0G8SlVvhWn08UKcwbWLbvWPI3AxkThKnYksvnnZyuZ7Udrb2a6qD7Uo61Xx2LrtWWxZkbgYtdYfxIsnwypXat0nGFivGfP67Wh+xKg3XqcbjSsFOvK/lvzvn3heeVjaFXvC7hD8gd7Flkn17lz28Kj4E+0yPeeKV3m+pjWhUUMMFcWTeJHfYKXKeYS8/snXz0IFKAp4135NJ7Hjr+lYdegKOVEkn3EverzqIctk68Bb5YwpJ0oBqr8o3u7zZaTq1GndCi7PibCpPD9Kt66SZ0SQAuRlJdssD7coHltmExc6vUfjSREw7X2Uv+/hobPLCngNm2HPx0PfnSv4aurYi468PHSbjAG20H7/MfVRMe8kIG23ikZYCPCwbi+Q3CK2osUQD69ZC2Tei2UeId5+i7JuM8hvhfl8n+STWN56SpsGX4/gzUWPh+ePTnn+8Sn5BYqPrj9kbZ6P0B+ukPrF+s9uZMp/aSRvN1LFyX2ehPi+3eDUvZn3b/H5ob1A+VbWsefn3RaIE7iO/a/r5TO3BWP/2xUtmZ+Xv+LgVf/F/m83uDENf9vFq/6PGx3yPDnBZNqd8iJ1lqcnaDn/sJAzHN+lJ3haypaQBlB87o6OIrD9F21/hRRQ8dTsE+XUL2wvG1FG8/TwFuJsVbUWKYDk1xkcx/8JhFutEvw8h+OlM+0qVgELWyw1ORzLJ4uWKCvoMZD1HHu6Mp2cunvKykbcX2vzfEu/c6vSIjZSveZYwF48jp5FzaeAdIAnxsyX0aCfEB/ScmXTvGv+G47EPBB7QT8WnwSz50z534oTB3ZjQDmO4/BaYgs+AqSFmNhxVuMTMAc0Gw3d/DLkMIJOMwJHuxkdDwWN8rB8usXoqALfE+ThBNRS871iSeGFII9a4dtVgZJCFpLgKyDNglOEGORmTGClnX69Qu9rx8/AVFqpAl1fCcs0syYni6/tjavs4VnntzIBet4WUUv54yth6Hlf1K5MkTR6lQB8SuLfl793yNacejeoVThx+yLKkT+Iq/YJ32m7Z4xE1f0GL+En4/CNRPvtLaa+k9oagGfeV8fc2GjoP3RZfR8aG8Dc2o/vfXj95nZifuYdOpGaK8l4nsV1g7HhsadTAiK6gQ7zux/vBFv0Oz482w3h3g2yW2FciHdPhwvxJ43nsfNR/EHJeK4diw8m8g9O4V8XQ8WDl3XXdi63h8MHceP69vnZQcxdWLvN0/8Dpj1ulfDcMG0AAAAASUVORK5CYII=) no-repeat;
  background-size: cover;
  z-index: 2;
  opacity: 0;
  -webkit-transition: opacity .5s ease-out;
  -khtml-transition: opacity .5s ease-out;
  -moz-transition: opacity .5s ease-out;
  -ms-transition: opacity .5s ease-out;
  -o-transition: opacity .5s ease-out;
  transition: opacity .5s ease-out
}

.flexbox-thumb:after {
  content: "";
  background: rgba(0, 0, 0, .5);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  -webkit-transition: opacity .3s ease-out;
  -khtml-transition: opacity .3s ease-out;
  -moz-transition: opacity .3s ease-out;
  -ms-transition: opacity .3s ease-out;
  -o-transition: opacity .3s ease-out;
  transition: opacity .3s ease-out
}

.flexbox-thumb:hover:after,
.flexbox-thumb:hover:before {
  opacity: 1
}

.popular .flexbox-thumb:hover:after,
.popular .flexbox-thumb:hover:before {
  opacity: 0
}

.flexbox-title {
  margin: 10px;
  font-size: 14px;
  font-weight: 600;
  transition: .2s;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden
}

.flexbox-number {
  background: #6e6dfb;
  border-top: solid 5px #605fe0;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  padding: 8px 10px;
  position: absolute;
  top: -5px;
  left: 6px;
  border-radius: 0 0 5px 5px;
  transition: .2s
}

.flexbox-type {
  background: #45475a;
  font-size: 12px;
  font-weight: 600;
  color: #ff9afa;
  padding: 5px;
  position: absolute;
  top: 4px;
  left: -40px;
  border-radius: 3px;
  transition: .2s
}

.flexbox-type.TV {
  color: #ff5a5a
}

.flexbox-type.Movie {
  color: #5ab0ff
}

.flexbox-type.OVA {
  color: #ff5ac1
}

.flexbox-type.ONA {
  color: #ff8b5a
}

.flexbox-type.Special {
  color: #ccc552
}

.flexbox-status {
  background: #45475a;
  font-size: 12px;
  color: #fff;
  padding: 5px;
  position: absolute;
  bottom: 4px;
  right: 4px;
  border-radius: 3px
}

.flexbox-status.Ongoing {
  color: #6cc174
}

.flexbox-status.Completed {
  color: #ae6cc1
}

.flexbox-episode {
  background: #6e6dfb;
  font-size: 14px;
  color: #fff;
  padding: 5px 0;
  position: absolute;
  top: 4px;
  right: 4px;
  border-radius: 3px
}

.flexbox-episode span {
  background: #605fe0;
  font-weight: 600;
  padding: 5px 8px;
  border-radius: 3px
}

.flexbox-episode span.eps {
  background: #6e6dfb;
  font-weight: 400;
  padding: 5px 7px
}

.flexbox-item:hover .flexbox-title {
  color: #6e6dfb
}

.flexbox-item:hover .flexbox-number {
  top: 0
}

.flexbox-item:hover .flexbox-type {
  left: 4px
}

.flexbox-item:hover .bookmark {
  left: 0
}

.flexbox2 {
  display: flex;
  flex-wrap: wrap;
  text-align: center
}

.flexbox2-item {
  flex: 0 0 33.33333%;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 33.33333%;
  flex: 0 0 33.33333%;
  max-width: 33.33333%;
  position: relative;
  width: 100%;
  overflow: hidden
}

.flexbox2-content {
  background: #fff;
  border: solid 3px #edf2f7;
  border-radius: 5px;
  margin: 0 10px;
  margin-bottom: 10px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 50% auto
}

.flexbox2-thumb {
  overflow: hidden;
  position: relative
}

.flexbox2-thumb img {
  width: 100%;
  height: auto
}

.flexbox2-thumb .adult {
  position: absolute;
  top: 0;
  left: 0;
  line-height: normal;
  color: #FFF;
  padding: 5px 8px;
  font-size: 12px;
  background: #fa5e5e;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.5);
  z-index: 100;
  border-radius: 0 0 12px 0
}

.flexbox2-title {
  position: absolute;
  bottom: -25px;
  text-align: left;
  background: rgba(0, 0, 0, .48);
  color: #eee;
  width: 100%;
  font-size: 14px;
  transition: .2s
}

.flexbox2-title span {
  padding: 8px;
  display: block
}

.flexbox2-title span.studio {
  margin-top: -10px;
  padding-bottom: 15px;
  color: #54ff94;
  font-size: 13px;
  display: -webkit-box;
  line-height: 25px;
  -webkit-line-clamp: 1;
  max-height: 13px;
  -webkit-box-orient: vertical;
  overflow: hidden
}

.flexbox2-side {
  position: relative;
  overflow: hidden
}

.flexbox2-side .type {
  padding: 10px;
  background: #f9f9f9;
  color: #ff5a5a;
  font-weight: 900
}

.flexbox2-side .type.TV {
  color: #ff5a5a
}

.flexbox2-side .type.Movie {
  color: #5ab0ff
}

.flexbox2-side .type.OVA {
  color: #ff5ac1
}

.flexbox2-side .type.ONA {
  color: #ff8b5a
}

.flexbox2-side .type.Special {
  color: #ccc552
}

.flexbox2-side .info {
  padding: 8px 5px;
  overflow: hidden;
  background: #f3f3f3;
  font-size: 12px
}

.flexbox2-side .info .score {
  width: 50%;
  float: left
}

.flexbox2-side .info .score.full {
  width: 100%
}

.flexbox2-side .info .score i {
  color: #ffdd73;
  font-size: 13px
}

.flexbox2-side .info .season {
  width: 50%;
  float: left
}

.flexbox2-side .synops {
  max-height: 85px;
  font-size: 12px;
  padding: 10px;
  text-align: left;
  display: -webkit-box;
  -webkit-line-clamp: 6;
  margin-bottom: 10px;
  -webkit-box-orient: vertical;
  overflow: hidden
}

.flexbox2-side .synops:hover {
  overflow-y: scroll
}

.flexbox2-side .synops::-webkit-scrollbar-thumb {
  background-color: #605FE0;
  border-radius: 2px
}

.flexbox2-side .synops::-webkit-scrollbar {
  width: 5px;
  background-color: #f9f9f9
}

.flexbox2-side .genres {
  position: absolute;
  bottom: 0;
  width: 100%;
  background: #f3f3f3;
  font-size: 13px
}

.flexbox2-side .genres span {
  padding: 10px;
  display: block
}

.flexbox2-side .genres a:hover {
  color: #6e6dfb
}

.flexbox2-thumb:hover .flexbox2-title {
  bottom: 0
}

.flexbox2 .bookmark {
  background: #c15656;
  color: #fff;
  padding: 5px;
  cursor: pointer;
  display: block;
  width: 100%;
  border: none;
  position: absolute;
  transition: .2s;
  z-index: 100;
  left: -200px
}

.flexbox2 .simplefavorite-button.active {
  opacity: .9
}

.flexbox2-side .bookmark {
  position: relative;
  left: 0
}

.flexbox3 {
  display: flex;
  flex-wrap: wrap
}

.flexbox3-item {
  flex: 0 0 50%;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 50%;
  flex: 0 0 50%;
  max-width: 50%;
  position: relative;
  width: 100%
}

.flexbox3-content {
  margin: 0 10px;
  margin-bottom: 15px;
  background: #f9f9f9;
  border-radius: 5px;
  overflow: hidden
}

.flexbox3-thumb {
  overflow: hidden;
  float: left;
  position: relative;
  width: 105px;
  height: 140px;
  border-radius: 5px;
  border: solid 2px #edf2f7
}

.flexbox3-thumb img {
  width: 100%;
  height: auto;
  transition: .2s linear
}

.flexbox3-thumb:hover img {
  transform: scale(1.2)
}

.flexbox3-side {
  position: relative;
  overflow: hidden;
  padding: 0 10px;
  margin-top: 5px
}

.flexbox3-side .title {
  overflow: hidden;
  font-weight: 700;
  margin: 8px 0;
  white-space: nowrap;
  text-overflow: ellipsis
}

.flexbox3-side .title a:hover {
  color: #6e6dfb
}

.flexbox3-side .episode {
  background: #6e6dfb;
  color: #fff;
  font-size: 13px;
  display: inline-block;
  padding: 5px 0;
  border-radius: 5px;
  margin-top: 5px
}

.flexbox3-side .episode span {
  background: #605fe0;
  font-weight: 600;
  padding: 5px 8px;
  border-radius: 5px
}

.flexbox3-side .episode span.eps {
  background: #6e6dfb;
  font-weight: 400;
  padding: 5px 7px
}

.flexbox3-side .type {
  background: #f9f9f9;
  color: #fff;
  font-size: 13px;
  display: inline-block;
  padding: 5px 7px;
  border-radius: 5px;
  margin-right: 5px
}

.flexbox3-side .type.TV {
  background: #ff5a5a
}

.flexbox3-side .type.Movie {
  background: #5ab0ff
}

.flexbox3-side .type.OVA {
  background: #ff5ac1
}

.flexbox3-side .type.ONA {
  background: #ff8b5a
}

.flexbox3-side .type.Special {
  background: #ccc552
}

.flexbox3-side .status {
  background: #45475a;
  color: #fff;
  font-size: 13px;
  display: inline-block;
  padding: 5px 7px;
  border-radius: 5px;
  margin-right: 5px
}

.flexbox3-side .status.Ongoing {
  background: #6cc174
}

.flexbox3-side .status.Completed {
  background: #ae6cc1
}

.flexbox3-side .date {
  font-size: 14px;
  margin: 5px 0;
  color: #777
}

.pagination {
  overflow: hidden;
  text-align: center;
  margin: 10px 0;
  line-height: 30px;
  font-size: 15px
}

.pagination a {
  background: #f7fafc;
  display: inline-block;
  padding: 1px 15px;
  margin-bottom: 5px;
  border-radius: 5px;
  transition: .2s
}

.pagination a:hover,
.pagination .page-numbers.current {
  background: #6e6dfb;
  display: inline-block;
  color: #eee;
  padding: 1px 15px;
  border-radius: 5px
}

.pagination .page-numbers.current {
  font-weight: 600
}

.animelist-nav {
  text-align: center;
  border-bottom: solid 4px #6e6dfb;
  margin: 10px
}

.animelist-nav a {
  display: inline-block;
  padding: 8px 12px;
  min-width: 10px;
  transition: .2s
}

.animelist-nav a:hover,
.animelist-nav a.is-active {
  background: #6e6dfb;
  color: #fff;
  border-radius: 5px
}

.animelist-blc {
  margin: 10px;
  display: flex;
  padding-bottom: 10px;
  border-bottom: dashed 3px #f7fafc
}

.animelist-blc span {
  display: block;
  width: 20px;
  margin-left: 10px;
  font-size: 20px;
  text-align: center
}

.animelist-blc span a {
  background: #f7fafc;
  padding: 10px;
  color: #444;
  display: block;
  width: 20px
}

.animelist-blc ul {
  margin: 3px;
  margin-left: 50px;
  width: 100%;
  padding: 0;
  list-style: square;
  color: #6e6dfb;
  font-size: 15px
}

.animelist-blc ul li {
  width: 46%;
  float: left;
  padding-right: 30px
}

.animelist-blc ul li.TV {
  color: #ff5a5a
}

.animelist-blc ul li.Movie {
  color: #5ab0ff
}

.animelist-blc ul li.OVA {
  color: #ff5ac1
}

.animelist-blc ul li.ONA {
  color: #ff8b5a
}

.animelist-blc ul li.Special {
  color: #ccc552
}

.animelist-blc ul li a.series {
  color: #444;
  transition: .2s;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 58px
}

.animelist-thumb {
  width: 46px;
  height: 62px;
  min-width: 46px;
  display: block;
  overflow: hidden;
  border-radius: 8px;
  background: rgba(255,255,255,.06);
  box-shadow: 0 6px 20px rgba(0,0,0,.18)
}

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

.animelist-title {
  display: block;
  line-height: 1.35
}

.animelist-blc ul li a.series:hover {
  color: #6e6dfb
}


/* Anime List card grid */
.animelist-cards .animelist-nav {
  margin-bottom: 18px
}

.animelist-card-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 24px 14px;
  padding: 0 10px 16px
}

.animelist-card {
  min-width: 0;
  scroll-margin-top: 90px
}

.animelist-card__thumb-link {
  display: block;
  color: inherit
}

.animelist-card__thumb {
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 3 / 4.25;
  border-radius: 7px;
  background: #252633;
  box-shadow: 0 6px 18px rgba(0,0,0,.18)
}

.animelist-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .25s ease, filter .25s ease
}

.animelist-card__thumb-link:hover img {
  transform: scale(1.035);
  filter: brightness(.9)
}

.animelist-card__shade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 42%;
  pointer-events: none;
  background: linear-gradient(to top, rgba(10,10,14,.9) 0%, rgba(10,10,14,.36) 50%, rgba(10,10,14,0) 100%)
}

.animelist-card__meta {
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: 6px;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 6px
}

.animelist-card__badges {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0
}

.animelist-card__badge {
  height: 22px;
  padding: 0 6px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  line-height: 1;
  font-weight: 700;
  color: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.2)
}

.animelist-card__badge svg {
  width: 13px;
  height: 13px;
  fill: currentColor;
  flex: 0 0 auto
}

.animelist-card__badge--sub {
  background: #a8e3b5;
  color: #111
}

.animelist-card__badge--dub {
  background: #d6b4cd;
  color: #111
}

.animelist-card__type {
  flex: 0 0 auto;
  color: #fff;
  font-size: 11px;
  font-weight: 500;
  text-shadow: 0 1px 3px rgba(0,0,0,.95)
}

.animelist-card__title {
  margin: 9px 1px 0;
  padding: 0;
  font-size: 15px;
  line-height: 1.35;
  font-weight: 500
}

.animelist-card__title a {
  color: #444;
  transition: color .2s ease
}

.animelist-card__title a:hover {
  color: #6e6dfb
}

.dark .animelist-card__title a {
  color: #d7d9e4
}

.dark .animelist-card__title a:hover {
  color: #8e8dff
}

@media (max-width: 1100px) {
  .animelist-card-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr))
  }
}

@media (max-width: 820px) {
  .animelist-card-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px 10px
  }
}

@media (max-width: 560px) {
  .animelist-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 10px;
    padding-left: 8px;
    padding-right: 8px
  }

  .animelist-card__title {
    font-size: 14px
  }

  .animelist-card__badge {
    height: 20px;
    padding: 0 5px;
    font-size: 10px
  }

  .animelist-card__type {
    font-size: 10px
  }
}

.advancedsearch {
  overflow: hidden;
  margin: 10px;
  margin-top: 0;
  font-size: 15px
}

.advancedsearch table {
  background: #f7fafc;
  padding: 15px;
  border-radius: 5px
}

.advancedsearch td.lbl {
  width: 130px
}

.advancedsearch td.lbx {
  padding: 5px 15px;
  overflow: hidden
}

.advancedsearch .form-control {
  background: #edf2f7;
  color: #777;
  border: none;
  padding: 8px;
  border-radius: 5px;
  width: 100%
}

.advancedsearch .custom-control {
  display: inline-block
}

.advancedsearch .custom-control.custom-checkbox {
  width: 20%
}

.advancedsearch .btn {
  background: #6e6dfb;
  border: none;
  color: #eee;
  padding: 10px;
  width: 300px;
  border-radius: 5px;
  float: right;
  margin: 10px 0;
  font-family: inherit;
  font-size: 15px;
  cursor: pointer
}

.advancedsearch .gnr {
  float: left;
  background: #edf2f7;
  border-radius: 5px;
  font-size: 13px;
  padding: 10px;
  margin: 10px 0;
  cursor: pointer
}

.advancedsearch tr.gnrx {
  display: none
}

.advancedsearch tr.gnrx.shwgx {
  display: table-row
}

.achlist {
  list-style: none;
  margin: 0 5px;
  padding: 0
}

.achlist li {
  width: 25%;
  float: left;
  display: inline-block
}

.achlist li a {
  display: block;
  padding: 10px;
  margin: 5px;
  background: #f7fafc
}

.achlist li a span {
  font-size: 25px;
  float: right;
  color: #bbb;
  line-height: 20px
}

.genre-color-list .genre-color-name {
  font-weight: 600;
  transition: filter .2s, opacity .2s;
  text-shadow: 0 1px 2px rgba(0,0,0,.28)
}

.genre-color-list li a:hover .genre-color-name {
  filter: brightness(1.22);
  opacity: 1
}

.achlist li a:hover {
  background: #6e6dfb;
  color: #eee
}

.achlist li a:hover span {
  color: #ddd
}

.series-cover {
  overflow: hidden;
  background: #2f303e
}

.series-bg {
  padding-top: 20%;
  border-radius: 3px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: blur(15px) brightness(.5) contrast(1)
}

.series-flex {
  margin-top: -120px;
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 280px auto;
  z-index: 1
}

.series-thumb {
  overflow: hidden;
  position: relative;
  box-shadow: 0 2px 15px rgba(0, 0, 0, .5);
  border-radius: 5px;
  margin: 15px
}

.series-thumb img {
  width: 100%;
  height: auto
}

.series-flexright {
  overflow: hidden;
  margin: 10px;
  margin-top: 50px;
  margin-right: 20px
}

.series-title {
  margin-bottom: 30px;
  color: #eee
}

.series-title h2 {
  margin: 0;
  padding: 0;
  color: #eee;
  max-width: 70%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.series-title span {
  max-width: 70%;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.series-titlex {
  display: none;
  margin-bottom: 30px;
  text-align: center
}

.series-titlex h2 {
  margin: 0;
  padding: 0
}

.series-synops p {
  padding: 5px 0;
  text-align: justify
}

.series-info {
  margin: 15px
}

.series-infoz {
  background: #f7fafc;
  text-align: center;
  font-size: 15px;
  padding: 10px;
  margin: 10px 0;
  border-radius: 20px;
  overflow: hidden
}

.series-infoz.block {
  padding: 0
}

.series-infoz.block span {
  display: block;
  width: 50%;
  padding: 10px 0;
  float: left
}

.series-infoz.block span.type,
.series-infoz.block span.status {
  background: #38394a;
  color: #eee
}

.series-infoz.block span.type.TV {
  background: #ff5a5a
}

.series-infoz.block span.type.Movie {
  background: #5ab0ff
}

.series-infoz.block span.type.OVA {
  background: #ff5ac1
}

.series-infoz.block span.type.ONA {
  background: #ff8b5a
}

.series-infoz.block span.type.Special {
  background: #ccc552
}

.series-infoz.block span.status.Ongoing {
  background: #6cc174
}

.series-infoz.block span.status.Completed {
  background: #ae6cc1
}

.series-infoz.score {
  background: #f7fafc
}

.series-infoz.score i {
  color: #ffdd73;
  font-size: 17px
}

.series-infoz.bookmark {
  background: #c15656;
  color: #fff;
  cursor: pointer;
  display: block;
  width: 100%;
  border: none;
  transition: .2s
}

.favcount {
  text-align: center;
  margin-bottom: 10px;
  font-size: 14px
}

.series-infolist {
  list-style: none;
  background: #f7fafc;
  padding: 20px;
  font-size: 16px;
  color: #777
}

.series-infolist a {
  color: #6e6dfb
}

.series-infolist li {
  margin-bottom: 10px
}

.series-infolist li b {
  display: block
}

.series-infolist li span {
  font-size: 13px
}

.series-genres {
  padding-top: 10px;
  padding-bottom: 20px
}

.series-genres a {
  background: #edf2f7;
  color: #777;
  padding: 10px;
  margin-right: 5px;
  margin-bottom: 5px;
  border-radius: 8px;
  display: inline-block;
  font-size: 15px;
  transition: .2s
}

.series-genres a:hover {
  background: #6e6dfb;
  color: #fff
}

.series-episode h2 {
  margin-left: 0
}

.series-episodelist {
  list-style: none;
  padding: 0;
  font-size: 15px;
  max-height: 570px;
  overflow-y: scroll
}

.series-episodelist::-webkit-scrollbar-thumb {
  background-color: #605FE0;
  border-radius: 2px
}

.series-episodelist::-webkit-scrollbar {
  width: 5px;
  background-color: #edf2f7
}

.series-episodelist li {
  background: #f7fafc;
  border-bottom: solid 1px #edf2f7
}

.flexeps {
  display: grid;
  grid-template-columns: 50px auto 50px;
  align-items: center
}

.flexeps-play {
  position: relative;
  padding: 10px;
  background: #edf2f7;
  font-size: 25px;
  color: #777;
  text-align: center
}

.flexeps-infoz {
  padding: 5px
}

.series-episodelist li span {
  display: block
}

.series-episodelist li span.date {
  font-size: 12px
}

.series-episodelist li a:visited {
  color: #6e6dfb
}

.series-episodelist li:hover {
  background: #6e6dfb;
  color: #fff
}

.series-episodelist li:hover a {
  color: #fff !important
}

.series-episodelist li:hover .flexeps-play {
  background: #605fe0;
  color: #fff
}

/* ── Compact episode number list ───────────────────────────── */
.episode-number-section {
  margin-top: 22px
}

.episode-number-section h2 {
  margin-bottom: 12px
}

.episode-number-toolbar {
  position: relative;
  z-index: 25;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px
}

.episode-filter-dropdown {
  position: relative;
  flex: 0 0 112px;
  min-width: 0
}

.episode-filter-dropdown--range {
  flex-basis: 116px
}

.episode-filter-trigger {
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
  padding: 0 11px;
  box-sizing: border-box;
  background: #f7fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  color: #777;
  font-family: inherit;
  font-size: 13px;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color .2s, background .2s, color .2s
}

.episode-filter-trigger:focus {
  outline: 0
}

.episode-filter-arrow {
  flex: 0 0 auto;
  font-size: 13px;
  line-height: 1;
  transition: transform .18s ease
}

.episode-filter-dropdown.is-open .episode-filter-arrow {
  transform: rotate(180deg)
}

.episode-filter-menu {
  position: absolute;
  top: calc(100% + 5px);
  left: 0;
  z-index: 140;
  min-width: 100%;
  width: max-content;
  max-width: 220px;
  max-height: 460px;
  overflow-y: auto;
  padding: 4px;
  box-sizing: border-box;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .16)
}

.episode-filter-menu[hidden] {
  display: none !important
}

.episode-filter-option {
  display: block;
  width: 100%;
  padding: 9px 11px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: #777;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.25;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
  transition: background .16s, color .16s
}

.episode-filter-option:hover,
.episode-filter-option.is-selected {
  background: #edf2f7
}

.episode-range-menu {
  min-width: 126px
}

.episode-filter-menu::-webkit-scrollbar {
  width: 5px
}

.episode-filter-menu::-webkit-scrollbar-thumb {
  background: #cbd5e0;
  border-radius: 3px
}

.episode-number-search {
  min-width: 160px;
  height: 40px;
  flex: 1 1 190px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  background: #f7fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  color: #777;
  box-sizing: border-box;
  transition: border-color .2s, box-shadow .2s, background .2s
}

.episode-number-search .icon {
  flex: 0 0 auto;
  font-size: 18px
}

.episode-number-search input {
  min-width: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: inherit;
  font-family: inherit;
  font-size: 13px
}

.episode-number-search input::placeholder {
  color: #9ca3af
}

.episode-number-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(48px, 1fr));
  gap: 6px;
  max-height: 420px;
  overflow-y: auto;
  margin: 0;
  padding: 0 4px 0 0
}

.episode-number-grid::-webkit-scrollbar {
  width: 5px;
  background-color: #edf2f7
}

.episode-number-grid::-webkit-scrollbar-thumb {
  background-color: #605fe0;
  border-radius: 3px
}

.episode-number-item {
  min-width: 0;
  margin: 0;
  padding: 0
}

.episode-number-link {
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 5px 4px;
  background: #f7fafc;
  border: 1px solid #edf2f7;
  border-radius: 4px;
  color: #777 !important;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  transition: background .18s, color .18s, border-color .18s, transform .18s
}

.episode-number-link:visited {
  color: #777 !important
}

.episode-number-link:hover,
.episode-number-link.is-current {
  background: #6e6dfb;
  border-color: #6e6dfb;
  color: #fff !important
}

.episode-number-link:hover {
  transform: translateY(-1px)
}

.episode-number-empty {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 5px;
  background: #f7fafc;
  color: #777;
  font-size: 13px;
  text-align: center
}

.episodeflex-sidebar .episode-number-section {
  margin-top: 12px
}

.episodeflex-sidebar .episode-number-section h2 {
  font-size: 19px
}

.episodeflex-sidebar .episode-number-toolbar {
  gap: 6px;
  margin-bottom: 8px
}

.episodeflex-sidebar .episode-filter-dropdown {
  flex: 1 1 calc(50% - 3px)
}

.episodeflex-sidebar .episode-filter-trigger {
  height: 36px;
  padding: 0 9px;
  font-size: 12px
}

.episodeflex-sidebar .episode-number-search {
  min-width: 100%;
  width: 100%;
  height: 36px;
  flex-basis: 100%
}

.episodeflex-sidebar .episode-number-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 5px;
  max-height: 205px
}

.episodeflex-sidebar .episode-number-link {
  min-height: 34px;
  font-size: 12px
}

.dark .episode-number-search,
.dark .episode-filter-trigger,
.dark .episode-filter-menu,
.dark .episode-number-link,
.dark .episode-number-empty {
  background: #3b3c4c;
  border-color: #48495b;
  color: #c4cad4
}

.dark .episode-filter-option {
  color: #c4cad4
}

.dark .episode-filter-option:hover,
.dark .episode-filter-option.is-selected {
  background: #464758
}

.dark .episode-filter-menu::-webkit-scrollbar-thumb {
  background: #5b5d70
}

.dark .episode-number-search input::placeholder {
  color: #8993a4
}

.dark .episode-number-link,
.dark .episode-number-link:visited {
  color: #c4cad4 !important
}

.dark .episode-number-grid::-webkit-scrollbar {
  background-color: #343543
}

.dark .episode-number-link:hover,
.dark .episode-number-link.is-current {
  background: #6e6dfb;
  border-color: #6e6dfb;
  color: #fff !important
}

@media (max-width:768px) {
  .episode-number-section {
    margin-top: 20px
  }

  .episode-number-toolbar {
    justify-content: flex-start;
    gap: 6px
  }

  .episode-filter-dropdown,
  .episodeflex-sidebar .episode-filter-dropdown {
    flex: 0 0 94px
  }

  .episode-filter-trigger,
  .episodeflex-sidebar .episode-filter-trigger {
    height: 38px;
    padding: 0 8px;
    font-size: 12px
  }

  .episode-number-search,
  .episodeflex-sidebar .episode-number-search {
    min-width: 120px;
    width: auto;
    height: 38px;
    flex: 1 1 120px
  }

  .episode-number-grid,
  .episodeflex-sidebar .episode-number-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 5px;
    max-height: 420px
  }

  .episode-number-link,
  .episodeflex-sidebar .episode-number-link {
    min-height: 36px;
    padding: 4px 2px;
    font-size: 12px
  }
}

@media (max-width:360px) {
  .episode-filter-dropdown,
  .episodeflex-sidebar .episode-filter-dropdown {
    flex: 1 1 calc(50% - 3px)
  }

  .episode-number-search,
  .episodeflex-sidebar .episode-number-search {
    min-width: 100%;
    flex-basis: 100%
  }

  .episode-filter-menu {
    max-height: 55vh
  }

  .episode-number-grid,
  .episodeflex-sidebar .episode-number-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr))
  }
}

.episodeflex {
  display: grid;
  grid-template-columns: auto 300px;
  overflow: hidden
}

.episodeflex-content {
  margin: 15px
}

.episodeflex-streaming {
  box-shadow: 0 2px 10px rgba(0, 0, 0, .5)
}

.episodeflex-sidebar {
  margin: 15px
}

.mirror {
  display: grid;
  grid-template-columns: 110px auto auto auto auto auto;
  background: #fff;
  padding: 5px;
  text-transform: uppercase
}
.episodeflex-streaming hr{
  border: 1px solid #f3f3f3;
  margin: 0;
}

.mirror .the-button {
  background: #edf2f7;
  color: #777;
  width: 100%;
  border: none;
  font-family: inherit;
  padding: 10px 0;
  transition: .2s;
  cursor: pointer
}

.mirror .the-button.active,
.mirror .the-button:hover {
  background: #6e6dfb;
  color: #eee
}

.embed-stream {
  position: relative;
  overflow: hidden;
  background: #000;
  width: 100%;
  padding-top: 60%;
  z-index: 98
}

div#pframe {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 99
}

@keyframes playerload {
  0% {
    transform: rotate(0deg)
  }

  100% {
    transform: rotate(360deg)
  }
}

@-webkit-keyframes playerload {
  0% {
    -webkit-transform: rotate(0deg)
  }

  100% {
    -webkit-transform: rotate(360deg)
  }
}

.playerload {
  width: 80px;
  height: 80px;
  border-radius: 150px;
  border: 15px solid #fff;
  border-top-color: rgba(0, 0, 0, .3);
  box-sizing: border-box;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -38px;
  margin-left: -38px;
  animation: playerload 1.2s linear infinite;
  -webkit-animation: playerload 1.2s linear infinite
}

.beforeload {
  position: absolute;
  background: #3b3c4c;
  width: 100%;
  height: 100%;
  align-items: center;
  align-content: center;
  display: grid;
  text-align: center;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: blur(5px) brightness(.5) contrast(1)
}

.beforeload-text {
  position: absolute;
  color: #9ca9b9;
  width: 100%;
  height: 100%;
  align-items: center;
  align-content: center;
  display: grid;
  text-align: center;
  font-size: 20px
}

.nav-stream {
  padding: 12px 10px;
  padding-bottom: 10px;
  background: #fff;
  overflow: hidden;
  font-weight: 600;
  font-size: 15px;
  z-index: 98
}

.nextplay {
  display: inline-block;
  overflow: hidden
}

.nextplaybtn {
  display: inline-block;
  min-height: 1px
}

.nextplaybtn a {
  padding: 0 15px;
  line-height: 35px;
  background: #edf2f7;
  transition: .2s
}

.nextplaybtn.prev a {
  border-radius: 20px 0 0 20px;
  display: inline-block
}

.nextplaybtn.next a {
  border-radius: 0 20px 20px 0;
  display: inline-block
}

.nextplaybtn.all a {
  padding: 15px
}

.nextplaybtn a:hover {
  background: #6e6dfb;
  color: #eee
}

.btnx {
  display: inline-block;
  line-height: 35px;
  background: #3b3c4c;
  overflow: hidden;
  border-radius: 20px;
  padding: 0 15px
}

.btnx.lamp {
  background: #7c4040;
  color: #ccc;
  cursor: pointer;
  padding: 10px 15px
}

.btnx.bookmark {
  background: #4d6188;
  cursor: pointer;
  display: inline-block;
  position: absolute;
  border: none;
  color: #eee;
  margin-left: 4px;
  transition: .2s
}

.btnx.dbox {
  background: #4a7672;
  color: #ccc
}

.nav-stream-right {
  float: right
}

#shadow {
  display: none;
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.93);
  width: 100%;
  height: 100%;
  z-index: 90
}

.sidebar-title span.now {
  font-size: 14px
}

.sidebar-title span.infoz {
  font-size: 12px
}

.sidebar-title h2 {
  margin: 0;
  padding: 0;
  font-size: 20px
}

.episodeflex-sidebar .series-episodelist {
  max-height: 190px
}

.episodeflex-sidebar .series-episodelist li span {
  font-size: 13px
}

.episodeflex-sidebar .series-episodelist li span.date {
  font-size: 10px
}

.episodeflex-sidebar .series-episode h2 {
  font-size: 19px
}

.episodeflex-sidebar .series-thumb {
  margin: 13px 70px;
  margin-bottom: 0
}

.download {
  margin: 15px;
  margin-top: 0;
  padding: 0 15px;
  padding-bottom: 15px;
  font-size: 13px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .5)
}

.download.batch {
  margin: 0;
  padding: 0;
  font-size: 14px;
  box-shadow: none
}

.download ul {
  list-style: none;
  background: #edf2f7;
  padding: 10px;
  margin: 5px
}

.download ul li {
  margin-bottom: 5px;
  overflow: hidden
}

.download ul li b {
  display: inline-block;
  background: #605fe0;
  color: #fff;
  padding: 5px 10px;
  width: 50px;
  border-radius: 5px
}

.download ul li a {
  display: inline-block;
  background: #f7fafc;
  padding: 5px 10px;
  border-radius: 5px
}

.download ul li a:hover {
  background: #6e6dfb;
  color: #fff
}

.download .dlbox2 {
  display: grid;
  grid-template-columns: auto auto auto auto;
  background: #edf2f7;
  padding: 10px;
  margin: 5px;
  text-align: center
}

.download .dlbox2 .dllink2 {
  background: #f7fafc;
  width: 100%;
  padding: 10px 0
}

.download .dlbox2 .dllink2:hover {
  background: #6e6dfb;
  color: #fff
}

.comments {
  margin: 15px;
  padding: 5px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .5)
}

#commentform {
  overflow: hidden;
  padding: 10px;
  font-size: 13px
}

#commentform input {
  width: 100%;
  font-family: inherit;
  margin-top: 5px;
  padding: 5px 10px;
  font-weight: 400;
  border: 0;
  text-shadow: none;
  background: #f7fafc;
  color: #777
}

#commentform input#submit {
  background: #6e6dfb;
  color: #eee;
  padding: 8px;
  font-weight: 600;
  border-radius: 5px;
  cursor: pointer
}

#commentform p {
  overflow: hidden;
  margin-bottom: 10px
}

#commentform p.logged-in-as {
  margin-bottom: 0
}

#commentform p.comment-form-comment {
  margin: 0;
  padding-bottom: 10px
}

#respond #commentform p.form-submit {
  margin: 0;
  padding: 0;
  border-top: 0;
  width: 200px;
  float: right;
  border: none
}

input#wp-comment-cookies-consent {
  width: auto
}

h3#reply-title {
  margin: 0 10px;
  margin-bottom: 0
}

h3#comments {
  margin: 0 10px
}

#commentform #comment {
  width: 100%;
  max-width: 100%;
  padding: 5px 10px;
  display: block;
  border: 0;
  margin-top: 10px;
  background: #f7fafc;
  height: 120px;
  color: #777
}

.commentlist li .avatar {
  float: left;
  margin-right: 10px;
  border: 3px solid #f7fafc;
  border-radius: 5px;
  width: 42px;
  height: 42px
}

.commentlist cite,
.commentlist cite a {
  font-weight: 700;
  margin-top: 12px;
  margin-left: 55px;
  position: absolute;
  font-style: normal;
  font-size: 15px;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis
}

.commentlist p {
  font-weight: 400;
  line-height: 1.5em;
  text-transform: none;
  text-align: initial
}

.commentmetadata {
  padding: 2px;
  font-weight: 400;
  float: right;
  font-size: 11px
}

.commentlist {
  padding: 0;
  text-align: justify;
  margin: 0 10px
}

.commentlist li {
  background: #fff;
  margin: 0 0 10px;
  padding: 10px 10px 0;
  list-style: outside none none
}

.commentlist li ul li {
  margin-left: 13px;
  border: none !important;
  box-shadow: none !important
}

.comment-author {
  min-height: 52px
}

.comment-body p {
  margin: 0;
  border-left: 3px solid #edf2f7;
  padding: 15px;
  border-top: 2px dashed #edf2f7
}

.comment-body {
  margin-bottom: 10px
}

.children {
  padding: 0;
  border-left: 3px solid #edf2f7
}

.nocomments {
  display: none
}

.commentmetadata {
  margin: -30px 0;
  display: inline-block
}

.reply {
  background: #6e6dfb;
  border-radius: 3px;
  font-size: 12px;
  width: 50px;
  padding: 2px;
  margin-left: 10px;
  text-align: center
}

.reply a {
  color: #fff
}

.says {
  display: none
}

.komentar {
  margin-top: 30px;
  padding: 10px
}

.pagenon {
  text-align: center;
  margin: 100px
}

.pagenon h2 {
  padding: 0;
  font-size: 35px
}

.pagenon span {
  font-size: 20px;
  border-bottom: solid 3px #6e6dfb;
  margin-bottom: 7px;
  padding: 5px;
  display: inline-block
}

.pagenon a {
  padding: 0 10px;
  margin-bottom: 5px;
  display: inline-block;
  color: #eee;
  border-radius: 4px;
  background: #6e6dfb;
  line-height: 32px
}

.ads {
  text-align: center;
  margin: 10px;
  max-width: 100%;
  overflow: hidden
}

.ads img {
  max-width: 100%;
  height: auto
}

footer {
  margin-top: 20px;
  background: #2f303e;
  color: #ccc
}

.footertop {
  overflow: hidden;
  background: #3b3c4c;
  padding: 10px
}

.footertop-left {
  float: left;
  font-size: 25px;
  font-weight: 900
}

.footertop-left img {
  height: 38px
}

.footertop-right {
  float: right;
  align-items: center;
  display: flex
}

.footertop-right a {
  color: #444;
  background: #fff;
  padding: 7px 0;
  width: 30px;
  margin-right: 5px;
  text-align: center;
  border-radius: 99%;
  border: solid 2px #444;
  transition: .2s
}

.footertop-right a:hover {
  color: #fff;
  background: #6e6dfb
}

.footertop-right .social-discord {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  color: #5865f2;
  border-color: #5865f2
}

.footertop-right .social-discord:hover {
  color: #fff;
  border-color: #5865f2;
  background: #5865f2
}

.discord-logo {
  width: 19px;
  height: 19px;
  display: block;
  fill: currentColor
}

.footerbody {
  margin: 0;
  padding: 18px 10px 12px;
  min-height: 120px;
  overflow: hidden;
  position: relative;
  isolation: isolate
}

.footerbody::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: url("assets/img/footer-kakashi.jpg") center 43% / cover no-repeat;
  opacity: .22;
  filter: brightness(1.16) saturate(.92) contrast(1.06)
}

.footerbody::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(47,48,62,.92) 0%, rgba(47,48,62,.68) 48%, rgba(47,48,62,.92) 100%);
  pointer-events: none
}

.footerbody>.container {
  position: relative;
  z-index: 1
}

.footerbody a:hover {
  color: #eee
}

.footerbody-widget {
  width: 33.33333%;
  float: left
}

.footerbody-widget h3 {
  margin: 10px 0;
  font-size: 17px
}

.footerbody-widget h3 span {
  border-bottom: solid 4px #6e6dfb
}

.footerbody-widget ul {
  list-style: none;
  margin: 0;
  padding-left: 0;
  line-height: 30px;
  font-size: 14px
}

.copyright {
  text-align: center;
  padding: 20px;
  font-weight: 600;
  color: #999;
  font-size: 15px
}

.scrollToTop {
  position: fixed;
  bottom: 0;
  right: 0;
  font-size: 20px;
  padding: 15px 18px;
  background: #6e6dfb;
  border-radius: 32px;
  margin: 12px;
  color: #eee;
  box-shadow: 0 5px 20px rgba(0, 0, 0, .5);
  z-index: 89;
  display: none
}

.scrollToTop:hover {
  z-index: 9999999999
}

#datafetch {
  position: absolute;
  width: 250px;
  background: #fff;
  box-shadow: 0 5px 4px rgba(0, 0, 0, .1)
}

#datafetch span {
  padding: 10px;
  display: block
}

.searchbox {
  padding: 10px;
  overflow: hidden;
  border-bottom: solid 1px #edf2f7
}

.searchbox-thumb {
  width: 40px;
  height: 40px;
  overflow: hidden;
  border-radius: 3px;
  float: left
}

.searchbox-thumb img {
  width: 100%;
  height: auto
}

.searchbox-side {
  float: left;
  margin-left: 5px;
  font-size: 10px
}

.searchbox-title {
  font-size: 13px;
  font-weight: 600;
  max-width: 185px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: .2s
}

.searchbox-side .type,
.searchbox-side .status {
  display: inline-block;
  background: #f7fafc;
  padding: 3px 5px;
  border-radius: 3px
}

.searchbox:hover .searchbox-title {
  color: #6e6dfb
}

.theme-mode {
  display: initial
}

.theme-mode .switch {
  float: right;
  padding: 10px;
  margin: 10px 0;
  margin-right: 10px;
  font-size: 20px;
  color: #fff;
  border-radius: 5px;
  background: #6e6dfa;
  cursor: pointer
}

.dark {
  background: #2f303e;
  color: #9ca9b9
}

.dark .header {
  background: #3b3c4c
}

.dark .header-logo {
  color: #eee
}

.dark .header-logo:hover {
  color: #6e6dfb
}

.dark .header-navigation .menu-item a:hover,
.dark .header-navigation .current-menu-item {
  color: #eee
}

.dark .header-navigation .menu-item .sub-menu {
  background: #3b3c4c
}

.dark .header-searchbar #search {
  background: #2f303e;
  color: #aaa
}

.dark .showmenu {
  background: #45475a;
  color: #eee
}

.dark .showsearch {
  background: #45475a;
  color: #eee
}

.dark .content h2 {
  color: #eee
}

.dark .popular {
  background: #45475a;
  background: #45475a url(https://cdn.staticaly.com/img/4.bp.blogspot.com/-alPKtyxQxTg/W4Zg9GsK5rI/AAAAAAAAAM4/0GbDlvV_7S4l6zF4PAFXGCjCMRWOMSHPgCLcBGAs/s1600/heleh+maling+sia.png)
}

.dark .flexbox2-content {
  background: #1d1e23;
  border: solid 3px #21222d
}

.dark .flexbox2-side .type {
  background: #101013
}

.dark .flexbox2-side .info {
  background: #21222d
}

.dark .flexbox2-side .synops::-webkit-scrollbar {
  background-color: #343543
}

.dark .flexbox2-side .genres {
  background: #101013
}

.dark .flexbox3-content {
  background: #3b3c4c
}

.dark .flexbox3-thumb {
  border: solid 2px #3b3c4c
}

.dark .flexbox3-side .date {
  color: #9ca9b9
}

.dark .series-infoz.score {
  background: #38394a
}

.dark .series-infolist {
  background: #3b3c4c;
  color: #9ca9b9
}

.dark .series-genres a {
  background: #3b3c4c;
  color: #fff
}

.dark .series-genres a:hover {
  background: #6e6dfb
}

.dark .series-episodelist li {
  background: #3b3c4c;
  border-bottom: solid 1px #2f303e
}

.dark .flexeps-play {
  background: #48495b;
  color: #eee
}

.dark .series-episodelist li:hover {
  background: #6e6dfb;
  color: #fff
}

.dark .series-episodelist::-webkit-scrollbar {
  background-color: #343543
}

.dark .mirror {
  background: #3b3c4c
}

.dark .mirror .the-button {
  background: #343543
}

.dark .mirror .the-button.active,
.dark .mirror .the-button:hover {
  background: #6e6dfb
}

.dark .nav-stream {
  background: #343543
}

.dark .nextplaybtn a {
  background: #3b3c4c
}

.dark .nextplaybtn a:hover {
  background: #6e6dfb
}

.dark .download ul {
  background: #3b3c4c
}

.dark .download ul li a {
  background: #48495b
}

.dark .download ul li a:hover {
  background: #6e6dfb
}

.dark .download .dlbox2 {
  background: #3b3c4c
}

.dark .download .dlbox2 .dllink2 {
  background: #48495b
}

.dark .download .dlbox2 .dllink2:hover {
  background: #6e6dfb
}

.dark .animelist-blc {
  border-bottom: dashed 3px #3b3c4c
}

.dark .animelist-blc span a {
  background: #45475a;
  color: #eee
}

.dark .animelist-blc ul li a.series {
  color: #9ca9b9
}

.dark .animelist-thumb {
  background: rgba(255,255,255,.04)
}

.dark .animelist-blc ul li a.series:hover {
  color: #eee
}

.dark .advancedsearch table {
  background: #3b3c4c
}

.dark .advancedsearch .form-control {
  background: #2f303e;
  color: #9ca9b9
}

.dark .advancedsearch .gnr {
  background: #45475a
}

.dark .achlist li a {
  background: #3b3c4c
}

.dark .achlist li a span {
  color: #5a5f6f
}

.dark .achlist li a:hover span {
  color: #ddd
}

.dark .achlist li a:hover {
  background: #6e6dfb
}

.dark .pagination a {
  background: #3b3c4c
}

.dark .pagination a:hover {
  background: #6e6dfb
}

.dark #commentform input {
  background: #3b3c4c;
  color: #72759e
}

.dark #commentform #comment {
  background: #3b3c4c;
  color: #72759e
}

.dark .commentlist li .avatar {
  border: 3px solid #3b3c4c
}

.dark .commentlist li {
  background: #2f303e
}

.dark .comment-body p {
  border-left: 3px solid #3b3c4c;
  border-top: 2px dashed #3b3c4c
}

.dark .children {
  border-left: 3px solid #3b3c4c
}

.dark #datafetch {
  background: #3b3c4c
}

.dark .searchbox {
  padding: 10px;
  overflow: hidden;
  border-bottom: solid 1px #2f303e
}

.dark .searchbox-side .type,
.dark .searchbox-side .status {
  background: #45475a
}

@-webkit-keyframes loopingbackg {
  to {
    background-position: 0 -3000px
  }
}

@keyframes loopingbackg {
  to {
    background-position: 0 -3000px
  }
}

@media (max-width:768px) {
  #navigation {
    display: block;
    position: absolute;
    left: -1000px;
    margin-top: 58px;
    width: 100%;
    background: #fff;
    border-top: solid 4px #6e6dfb;
    z-index: 4;
    transition: .2s
  }

  .header-navigation .menu-item,
  .header-navigation .menu-item a {
    display: block
  }

  .header-right {
    float: none;
    width: 100%;
    padding: 0;
    position: absolute;
    background: #fff;
    border-top: solid 4px #6e6dfb;
    margin-top: 58px;
    left: -1000px;
    transition: .2s
  }

  .header-searchbar {
    margin: 10px;
    width: 100%
  }

  .header-searchbar #search {
    width: 100%;
    border-radius: 0
  }

  .header-searchbar #search:focus {
    width: 100%
  }

  .header-navigation .menu-item a:hover,
  .header-navigation .current-menu-item {
    box-shadow: inset 5px 0 0 0 #6e6dfb
  }

  .header-navigation .menu-item .sub-menu {
    position: relative;
    top: 0;
    box-shadow: none;
    overflow: hidden
  }

  .showmenu {
    display: inline-block
  }

  .showsearch {
    display: inline-block
  }

  .header-menu #showmenu:checked~#navigation {
    box-shadow: 0 5px 20px rgba(0, 0, 0, .5);
    left: 0
  }

  .header-menu #showsearch:checked~.header-right {
    box-shadow: 0 5px 20px rgba(0, 0, 0, .5);
    left: 0
  }

  .flexbox-item {
    flex: 0 0 50%;
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%
  }

  .flexbox-episode span.eps {
    display: none
  }

  .flexbox2-item {
    flex: 0 0 100%;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%
  }

  .flexbox3-item {
    flex: 0 0 100%;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%
  }

  .animelist-blc ul li {
    width: 100%
  }

  .animelist-blc ul {
    margin-left: 20px
  }

  .animelist-blc ul li a.series {
    gap: 10px;
    min-height: 54px
  }

  .animelist-thumb {
    width: 42px;
    height: 58px;
    min-width: 42px
  }

  .advancedsearch td.lbl {
    width: 50px
  }

  .advancedsearch .custom-control.custom-checkbox {
    width: 50%
  }

  .advancedsearch .btn {
    width: 150px
  }

  .achlist li {
    width: 50%
  }

  .series-bg {
    padding-top: 60%
  }

  .series-flex {
    display: block
  }

  .series-thumb {
    margin: 0 100px
  }

  .series-flexright {
    margin: 20px;
    margin-top: 0
  }

  .series-title {
    display: none
  }

  .series-titlex {
    display: block
  }

  .episodeflex {
    display: block;
    margin: 0
  }

  .episodeflex-content {
    margin: 0;
    margin-top: 10px
  }

  .embed-stream {
    padding-top: 78%
  }

  .episodeflex-sidebar .series-thumb {
    margin: 13px 100px
  }

  .mirror {
    display: grid;
    grid-template-columns: auto auto
  }

  .nav-stream {
    padding-bottom: 15px
  }

  .nextplay {
    display: block;
    margin-bottom: 10px;
    text-align: center;
    background: #edf2f7;
    border-radius: 20px
  }

  .nextplaybtn {
    width: 40%;
    float: left
  }

  .nextplaybtn.all {
    width: 20%
  }

  .nextplaybtn a {
    display: block;
    padding: 0
  }

  .nextplaybtn.next a,
  .nextplaybtn.prev a {
    display: block
  }

  .nextplaybtn.all a {
    display: block;
    padding: 10px
  }

  .download {
    margin: 0
  }

  .download ul li b {
    width: 100%;
    display: block;
    overflow: hidden;
    border-radius: 0;
    margin-bottom: 5px
  }

  .download .dlbox2 {
    grid-template-columns: auto auto
  }

  .comments {
    margin: 0;
    box-shadow: none
  }

  .footerbody {
    padding: 18px 18px 14px
  }

  .footerbody::before {
    background-position: 60% center;
    opacity: .18
  }

  .footerbody-widget {
    width: 100%
  }

  #datafetch {
    width: 100%;
    left: 0
  }

  .dark #navigation {
    background: #3b3c4c
  }

  .dark .header-right {
    background: #3b3c4c
  }

  .dark .nextplay {
    background: #3b3c4c
  }
}

.skip__intro,
.next__video {
  background: rgb(233, 233, 233);

  color: black;
  /* width: 80px; */
  padding: 10px 15px;
  border-radius: 8px;
  position: absolute;
  bottom: 65px;
  right: 20px;
  cursor: pointer;
  text-transform: uppercase;
  z-index: 999;
  color: black;
  font-weight: 800;
  border: none;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.322);
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}


.next__video svg {
  margin-left: 10px;
}


.next__video .loading_to_next {
  background-color: white;
  width: 10%;
  height: 100%;
  display: inline-block;
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 8px;
  z-index: -1;
  animation: expand 2s linear forwards;
}

.hide_element {
  display: none !important;
}

.sub_dub_title {
  display: flex;
  align-items: center;
  padding-left: 20px;
  font-weight: 800;
  font-size: 12px;
}

.sub_dub_title svg {
  margin-right: 10px;
}

@keyframes expand {
  from {
    width: 0;
  }

  to {
    width: 100%;
  }
}

/* ── Sub Mirror Dropdown (mobile only) ──────────────────────── */
/* Hidden on desktop; the raw .sub-mirror-btn divs show normally */
.sub-mirror-dropdown {
  display: none!important;
}
#sub-mirrors .sub-mirror-btn { display: block; /* visible on desktop */ }

@media (max-width: 768px) {
  /* Hide the raw mirror-button grid items for sub type */
  #sub-mirrors .sub-mirror-btn {
    display: none!important;
  }

  /* Show the custom dropdown wrapper */
  .sub-mirror-dropdown {
    display: block!important;
    position: relative;
    /* grid-column: 1 / -1; span all grid columns */
    margin: 4px 0;
  }

  /* Trigger button – matches .the-button styling */
  .sub-mirror-dropdown__trigger {
    display: flex!important;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: #edf2f7;
    color: #777;
    border: none;
    font-family: inherit;
    font-size: inherit;
    padding: 10px 14px!important;
    cursor: pointer;
    transition: background .2s, color .2s;
    /* text-transform: uppercase; */
    font-weight: 600;
    letter-spacing: .03em;
    /* border-radius: 3px; */
  }

  .sub-mirror-dropdown__trigger:hover,
  .sub-mirror-dropdown__trigger.active {
    background: #6e6dfb;
    color: #eee;
  }

  .sub-mirror-dropdown__arrow {
    font-size: 11px;
    margin-left: 8px;
    transition: transform .2s;
    display: inline-block;
  }

  /* Rotate arrow when menu is open */
  .sub-mirror-dropdown__trigger[aria-expanded="true"] .sub-mirror-dropdown__arrow {
    transform: rotate(180deg);
  }

  /* Dropdown menu panel */
  .sub-mirror-dropdown__menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 200;
    background: #fff;
    box-shadow: 0 4px 16px rgba(0,0,0,.18);
    /* border-top: 2px solid #6e6dfb; */
    max-height: 0;
    overflow: hidden;
    transition: max-height .25s ease;
    border-radius: 0 0 3px 3px;
  }

  .sub-mirror-dropdown__menu.open {
    max-height: 320px;
    overflow-y: auto;
  }

  /* Individual dropdown items – inherit exact .the-button appearance */
  .sub-mirror-dropdown__item {
    display: block;
    width: 100%;
    background: #edf2f7;
    color: #777;
    border-radius: 0 !important;
    border-bottom: 1px solid rgba(0,0,0,0.05) !important;
    font-family: inherit;
    font-size: inherit;
    padding: 10px 14px!important;
    text-align: left;
    cursor: pointer;
    transition: background .15s, color .15s;
    /* text-transform: uppercase; */
    font-weight: 500;
  }

  .sub-mirror-dropdown__item:last-child {
    border-bottom: none!important;
  }

  .sub-mirror-dropdown__item:hover,
  .sub-mirror-dropdown__item.active {
    background: #6e6dfb;
    color: #eee;
  }

  /* Scrollbar styling for the dropdown menu */
  .sub-mirror-dropdown__menu::-webkit-scrollbar {
    width: 4px;
    background: #edf2f7;
  }

  .sub-mirror-dropdown__menu::-webkit-scrollbar-thumb {
    background: #605FE0;
    border-radius: 2px;
  }

    .dark .sub-mirror-dropdown__menu {
        background: #2f303e;
        box-shadow: 0 4px 16px rgba(0,0,0,.5);
    }
    .dark .sub-mirror-dropdown__item {
        border-bottom: 1px solid rgba(255,255,255,0.05) !important;
    }
}
/* ── Dub Mirror Dropdown (mobile only) ──────────────────────── */
/* Hidden on desktop; the raw .dub-mirror-btn divs show normally */
.dub-mirror-dropdown {
  display: none!important;
}
#dub-mirrors .dub-mirror-btn { display: block; /* visible on desktop */ }

@media (max-width: 768px) {
  /* Hide the raw mirror-button grid items for sub type */
  #dub-mirrors .dub-mirror-btn {
    display: none!important;
  }

  /* Show the custom dropdown wrapper */
  .dub-mirror-dropdown {
    display: block!important;
    position: relative;
    /* grid-column: 1 / -1; span all grid columns */
    margin: 4px 0;
  }

  /* Trigger button – matches .the-button styling */
  .dub-mirror-dropdown__trigger {
    display: flex!important;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: #edf2f7;
    color: #777;
    border: none;
    font-family: inherit;
    font-size: inherit;
    padding: 10px 14px!important;
    cursor: pointer;
    transition: background .2s, color .2s;
    /* text-transform: uppercase; */
    font-weight: 600;
    letter-spacing: .03em;
    /* border-radius: 3px; */
  }

  .dub-mirror-dropdown__trigger:hover,
  .dub-mirror-dropdown__trigger.active {
    background: #6e6dfb;
    color: #eee;
  }

  .dub-mirror-dropdown__arrow {
    font-size: 11px;
    margin-left: 8px;
    transition: transform .2s;
    display: inline-block;
  }

  /* Rotate arrow when menu is open */
  .dub-mirror-dropdown__trigger[aria-expanded="true"] .dub-mirror-dropdown__arrow {
    transform: rotate(180deg);
  }

  /* Dropdown menu panel */
  .dub-mirror-dropdown__menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 200;
    background: #fff;
    box-shadow: 0 4px 16px rgba(0,0,0,.18);
    /* border-top: 2px solid #6e6dfb; */
    max-height: 0;
    overflow: hidden;
    transition: max-height .25s ease;
    border-radius: 0 0 3px 3px;
  }

  .dub-mirror-dropdown__menu.open {
    max-height: 320px;
    overflow-y: auto;
  }

  /* Individual dropdown items – inherit exact .the-button appearance */
  .dub-mirror-dropdown__item {
    display: block;
    width: 100%;
    background: #edf2f7;
    color: #777;
    border-radius: 0 !important;
    border-bottom: 1px solid rgba(0,0,0,0.05) !important;
    font-family: inherit;
    font-size: inherit;
    padding: 10px 14px!important;
    text-align: left;
    cursor: pointer;
    transition: background .15s, color .15s;
    /* text-transform: uppercase; */
    font-weight: 500;
  }

  .dub-mirror-dropdown__item:last-child {
    border-bottom: none!important;
  }

  .dub-mirror-dropdown__item:hover,
  .dub-mirror-dropdown__item.active {
    background: #6e6dfb;
    color: #eee;
  }

  /* Scrollbar styling for the dropdown menu */
  .dub-mirror-dropdown__menu::-webkit-scrollbar {
    width: 4px;
    background: #edf2f7;
  }

  .dub-mirror-dropdown__menu::-webkit-scrollbar-thumb {
    background: #605FE0;
    border-radius: 2px;
  }

    .dark .dub-mirror-dropdown__menu {
        background: #2f303e;
        box-shadow: 0 4px 16px rgba(0,0,0,.5);
    }
    .dark .dub-mirror-dropdown__item {
        border-bottom: 1px solid rgba(255,255,255,0.05) !important;
    }
}

/* Series flexbox badges */
/* Main container holding everything together */
.badge-group {
    position: absolute;
    bottom: 10px;
    left: 10px;
    display: inline-flex;
    align-items: stretch;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 14px;
    font-weight: 600;
    border-radius: 6px;
    overflow: hidden;
    /* This clips the inner items to the border radius */
    box-shadow: 0 2px 4px 4px rgba(0, 0, 0, 0.2);
    color: #000;
}

/* Shared styles for both the CC and Mic sections */
.badge-item {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
}

/* Specific background colors */
.badge-cc {
    background-color: #a8e3b5;
}

.badge-mic {
    background-color: #d6b4cd;
}

/* The subtle line between the two badges */
.badge-divider {
    width: 1px;
    background-color: rgba(0, 0, 0, 0.15);
}

/* Standardizing the SVG icons */
.badge-icon {
    width: 16px;
    height: 16px;
    display: block;
    fill: currentColor;
}

.badge-item span {
  margin-top: -2px;
}

.home-share-section {
  padding: 2px 0 4px
}

.home-share-section .home-share-friends-bar {
  margin: 14px 0 12px
}

/* ── Share to your Friends Bar ─────────────────────────────── */
.share-friends-bar {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  /* background: #2b2c3a; */
  border-radius: 0px;
  margin: 15px;
  padding: 12px 18px;
  gap: 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .5);
  /* box-shadow: 0 4px 18px rgba(0,0,0,0.35); */
}

.share-friends-left {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 160px;
}

.share-friends-avatar {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  overflow: hidden;
  background: #3b3c4c;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(255,255,255,0.1);
}

.share-friends-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.share-friends-icon {
  font-size: 22px;
  color: #6e6dfb;
}

.share-friends-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.share-friends-title {
  font-size: 15px;
  font-weight: 800;
  color: #6e6dfb;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.share-friends-sub {
  font-size: 12px;
  /* color: #444; */
  font-weight: 500;
}

.share-friends-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  /* flex-shrink: 0; */
}

/* Dark mode support */
/* .dark .share-friends-bar {
  background: #1e1f2b;
  box-shadow: 0 4px 18px rgba(0,0,0,0.55);
} */

/* Responsive */
@media (max-width: 600px) {
  .share-friends-bar {
    padding: 12px;
  }
  .share-friends-right {
    width: 100%;
    justify-content: flex-end;
  }
  .sharethis-modal-box {
    padding: 22px 12px 16px;
  }
}

/* ── Recommended for You Section ───────────────────────────── */
.recommended-section {
  padding: 10px 0 20px;
  margin-top: 10px;
}

.recommended-section > h2 {
  margin: 0 10px 12px;
  padding: 12px 0 8px;
  color: #444;
  border-bottom: 2px solid #edf2f7;
}

.recommended-section > h2 span {
  font-weight: 800;
  color: #6e6dfb;
}

/* 2-column grid */
.recommended-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  padding: 0 10px;
}

/* Individual card */
.recommended-card {
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 2px 20px 3px rgb(0 0 0 / 23%);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
  position: relative;
  max-width: 200px;
}

.recommended-card:hover {
  box-shadow: 0px 9px 24px 0px rgb(0 0 0 / 35%);
}

/* Thumbnail wrapper — portrait aspect ratio */
.recommended-card__thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  display: block;
}

.recommended-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

.recommended-card:hover .recommended-card__thumb img {
  transform: scale(1.15);
}

/* Badge group — reuses existing .badge-group, .badge-item, etc.
   Override position so it anchors to the card thumb */
.recommended-card__thumb .badge-group {
  position: absolute;
  bottom: 8px;
  left: 8px;
  font-size: 12px;
}

/* Text body below the image */
.recommended-card__body {
  padding: 10px 10px 12px;
  background: #fff;
  text-align: center;
}

.recommended-card__title {
  font-size: 14px;
  font-weight: 700;
  color: #333;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 5px;
  transition: color 0.2s;
}

.recommended-card:hover .recommended-card__title {
  color: #6e6dfb;
}

.recommended-card__meta {
  font-size: 12px;
  color: #888;
  font-weight: 600;
}

/* ── Dark mode overrides ─────────────────────────────────────── */
.dark .recommended-section > h2 {
  color: #eee;
  border-bottom-color: #45475a;
}

.dark .recommended-card {
  background: #3b3c4c;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}

.dark .recommended-card:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55);
}

.dark .recommended-card__body {
  background: #3b3c4c;
}

.dark .recommended-card__title {
  color: #dde3ee;
}

.dark .recommended-card:hover .recommended-card__title {
  color: #6e6dfb;
}

.dark .recommended-card__meta {
  color: #7a85a0;
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 600px) {
  .recommended-grid {
    gap: 8px;
    padding: 0 6px;
  }

  .recommended-card__title {
    font-size: 13px;
  }

  .recommended-card__meta {
    font-size: 11px;
  }
}

/* ── Spotlight Carousel ─────────────────────────────────────── */
.spotlight-section {
  position: relative;
  overflow: hidden;
  background: #000;
  width: min(calc(100% - 32px), 1100px);
  margin: 18px auto 24px;
  border-radius: 28px;
  box-shadow: 0 18px 44px rgba(17, 22, 41, 0.18);
  height: min(65vh, 560px);
}

.spotlight-swiper {
  width: 100%;
}

.spotlight-slide {
  display: block;
  position: relative;
  min-height: 500px;
}

.spotlight-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  /* filter: blur(2px) brightness(0.4); */
}

/* Landscape bg shown by default, hidden on mobile */
.spotlight-bg--landscape {
  display: block;
}

.spotlight-bg--portrait {
  display: none;
}

/* Mobile: swap to portrait bg, hide landscape */
@media (max-width: 768px) {
  .spotlight-bg--landscape {
    display: none;
  }

  .spotlight-bg--portrait {
    display: block;
  }
}

.spotlight-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.3) 50%, transparent 100%);
  z-index: 1;
}

.spotlight-content {
  position: absolute;
  z-index: 2;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 60px max(5vw, 32px);
  padding-bottom: 80px;
}

.spotlight-title {
  font-size: 3rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 8px;
  line-height: 1.1;
  text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}

.spotlight-season {
  display: block;
  color: rgba(255,255,255,0.9);
  font-size: 1.25rem;
  margin-bottom: 24px;
  text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}

.spotlight-actions {
  display: flex;
  gap: 12px;
}

.btn-watch,
.btn-detail {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  border-radius: 50px;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  transition: all 0.2s;
}

.btn-watch {
  background: #d4af37;
  color: #1a1a1a;
}

.btn-watch:hover {
  background: #e5c34a;
  transform: translateY(-1px);
}

.btn-watch i {
  font-size: 1.1rem;
}

.btn-detail {
  background: rgba(255,255,255,0.15);
  color: #fff;
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,0.25);
}

.btn-detail:hover {
  background: rgba(255,255,255,0.25);
  transform: translateY(-1px);
}

.btn-detail i {
  font-size: 0.9rem;
}

.spotlight-pagination {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.spotlight-swiper .swiper-pagination-bullet {
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,0.5) !important;
  margin: 0 !important;
  cursor: pointer;
  opacity: 1 !important;
  display: block !important;
  flex-shrink: 0;
}

.spotlight-swiper .swiper-pagination-bullet-active {
  background: #fff !important;
  opacity: 1 !important;
}

.spotlight-swiper .swiper-pagination {
  display: flex !important;
  align-items: center !important;
  gap: 8px;
  bottom: 20px!important;
}

@media (max-width: 768px) {
  .spotlight-section {
    width: calc(100% - 16px);
    margin: 8px auto 18px;
    border-radius: 20px;
    height: auto;
  }

  .spotlight-content {
    padding: 30px 20px;
    padding-bottom: 60px;
  }

  .spotlight-title {
    font-size: 1.8rem;
  }

  .spotlight-slide {
    min-height: 420px;
  }
}
/* ── More Seasons ──────────────────────────────────────────── */
.more-seasons-section {
  margin: 15px;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.12);
  box-sizing: border-box;
}

.more-seasons-section > .more-seasons-title {
  margin: 0 0 12px;
  padding: 0;
  border: 0;
  font-size: 18px;
  line-height: 1.2;
  font-weight: 500;
  color: inherit;
}

.more-seasons-section > .more-seasons-title span {
  font-weight: 500;
}

.more-seasons-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(185px, 1fr));
  gap: 10px;
}

.more-season-card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  height: 76px;
  padding: 10px 14px;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: #17181d;
  color: #fff !important;
  text-decoration: none !important;
  box-sizing: border-box;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.more-season-card:hover {
  transform: translateY(-1px);
  color: #fff !important;
}

.more-season-card__bg {
  position: absolute;
  z-index: -2;
  top: -8px;
  left: -8px;
  width: calc(100% + 16px);
  height: calc(100% + 16px);
  object-fit: cover;
  object-position: center;
  filter: blur(2.2px);
  transform: scale(1.04);
  opacity: .72;
  pointer-events: none;
}

.more-season-card::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(90deg, rgba(8, 9, 12, .52), rgba(8, 9, 12, .42), rgba(8, 9, 12, .58));
  pointer-events: none;
}

.more-season-card__title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  max-width: 100%;
  color: #fff;
  font-size: 13px;
  line-height: 1.25;
  font-weight: 500;
  text-align: center;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .85);
}

.more-season-card.is-current {
  border-width: 2px;
}

.dark .more-seasons-section {
  background: rgba(0, 0, 0, 0.16);
  border-color: rgba(255, 255, 255, 0.08);
}

@media (max-width: 700px) {
  .more-seasons-section {
    margin: 12px 10px;
    padding: 12px;
  }

  .more-seasons-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .more-season-card {
    height: 68px;
    padding: 8px 10px;
  }

  .more-season-card__title {
    font-size: 12px;
  }
}

@media (max-width: 360px) {
  .more-seasons-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Characters & Voice Actors ─────────────────────────────── */
.characters-voice-section {
  margin: 15px;
  padding: 18px 20px 20px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.18);
  box-sizing: border-box;
}

.characters-voice-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 8px;
}

.characters-voice-section .characters-voice-title {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 22px;
  line-height: 1.25;
  font-weight: 500;
}

.characters-voice-more {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  margin: 0;
  padding: 6px 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}

.characters-voice-more__arrow {
  display: inline-block;
  font-size: 25px;
  line-height: .8;
  transform: translateY(-1px);
  transition: transform .2s ease;
}

.characters-voice-more[aria-expanded="true"] .characters-voice-more__arrow {
  transform: rotate(90deg) translateX(-1px);
}

.characters-voice-list {
  display: grid;
}

.characters-voice-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 28px;
  min-height: 92px;
  padding: 14px 10px;
  box-sizing: border-box;
}

.characters-voice-row.is-extra {
  display: none;
}

.characters-voice-list.is-expanded .characters-voice-row.is-extra {
  display: grid;
}

.characters-voice-person {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 15px;
}

.characters-voice-person--voice {
  justify-content: flex-end;
  text-align: right;
}

.characters-voice-person__text {
  min-width: 0;
}

.characters-voice-name {
  overflow: hidden;
  color: inherit;
  font-size: 16px;
  line-height: 1.3;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.characters-voice-role {
  margin-top: 5px;
  opacity: .7;
  font-size: 12px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: .03em;
}

.characters-voice-avatar {
  display: block;
  flex: 0 0 64px;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center;
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .1);
}

.characters-voice-avatar--voice {
  filter: grayscale(1);
}

.dark .characters-voice-section {
  background: rgba(0, 0, 0, 0.22);
  border-color: rgba(255, 255, 255, 0.07);
}

@media (max-width: 700px) {
  .characters-voice-section {
    margin: 12px 10px;
    padding: 16px 12px 18px;
  }

  .characters-voice-heading {
    margin-bottom: 9px;
  }

  .characters-voice-section .characters-voice-title {
    font-size: 19px;
  }

  .characters-voice-more {
    font-size: 13px;
  }

  .characters-voice-row {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
    gap: 10px;
    min-height: 100px;
    padding: 14px 4px;
  }

  .characters-voice-person {
    gap: 10px;
  }

  .characters-voice-avatar {
    flex-basis: 58px;
    width: 58px;
    height: 58px;
  }

  .characters-voice-name {
    font-size: 14px;
  }

  .characters-voice-role {
    margin-top: 4px;
    font-size: 10px;
  }
}

@media (max-width: 430px) {
  .characters-voice-section {
    padding-left: 9px;
    padding-right: 9px;
  }

  .characters-voice-heading {
    gap: 8px;
  }

  .characters-voice-section .characters-voice-title {
    font-size: 17px;
  }

  .characters-voice-more {
    gap: 4px;
    font-size: 12px;
  }

  .characters-voice-row {
    gap: 7px;
    min-height: 92px;
    padding-left: 0;
    padding-right: 0;
  }

  .characters-voice-avatar {
    flex-basis: 52px;
    width: 52px;
    height: 52px;
  }

  .characters-voice-person {
    gap: 8px;
  }

  .characters-voice-name {
    font-size: 13px;
  }

  .characters-voice-role {
    font-size: 9px;
  }
}

/* =========================================================
   Front-end Login / Registration
   ========================================================= */
.zstream-auth-page {
  padding: 46px 0 54px
}

.zstream-auth-page .content {
  overflow: visible
}

.zstream-auth-shell {
  max-width: 1060px;
  min-height: 590px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  overflow: hidden;
  position: relative;
  border: 1px solid rgba(110,109,251,.22);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 25px 70px rgba(20,22,36,.18)
}

.zstream-auth-form-panel {
  padding: 64px 64px 54px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  z-index: 2
}

.zstream-auth-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: max-content;
  margin-bottom: 14px;
  color: #6e6dfb;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .04em
}

.zstream-auth-kicker .icon {
  font-size: 21px
}

.zstream-auth-form-panel h1 {
  margin: 0 0 8px;
  color: #2f303e;
  font-size: 35px;
  line-height: 1.15
}

.zstream-auth-subtitle {
  margin: 0 0 30px;
  color: #8b91a5;
  font-size: 15px
}

.zstream-auth-form {
  display: grid;
  gap: 18px
}

.zstream-auth-field {
  display: grid;
  gap: 8px;
  color: #5d6274;
  font-size: 13px;
  font-weight: 700
}

.zstream-auth-input-wrap {
  position: relative;
  display: block
}

.zstream-auth-input-wrap .icon {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: #8d91b3;
  font-size: 19px;
  pointer-events: none
}

.zstream-auth-input-wrap input {
  width: 100%;
  box-sizing: border-box;
  min-height: 49px;
  padding: 12px 15px 12px 45px;
  border: 1px solid #e2e4ee;
  border-radius: 10px;
  outline: none;
  background: #f7f8fc;
  color: #313445;
  font-family: inherit;
  font-size: 14px;
  transition: .2s
}

.zstream-auth-input-wrap input:focus {
  border-color: #6e6dfb;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(110,109,251,.11)
}

.zstream-auth-password-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px
}

.zstream-auth-remember {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: max-content;
  color: #757b91;
  font-size: 13px;
  cursor: pointer
}

.zstream-auth-remember input {
  accent-color: #6e6dfb
}

.zstream-auth-password-note {
  margin: -6px 0 0;
  color: #8b91a5;
  font-size: 12px
}

.zstream-auth-submit {
  min-height: 50px;
  border: 0;
  border-radius: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: linear-gradient(135deg,#6e6dfb,#7e66ff);
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(110,109,251,.28);
  transition: transform .2s, box-shadow .2s, filter .2s
}

.zstream-auth-submit:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
  box-shadow: 0 14px 30px rgba(110,109,251,.34)
}

.zstream-auth-switch {
  margin: 25px 0 0;
  text-align: center;
  color: #8b91a5;
  font-size: 13px
}

.zstream-auth-switch a {
  color: #6e6dfb;
  font-weight: 800
}

.zstream-auth-message {
  margin: 0 0 20px;
  padding: 12px 14px;
  border-radius: 9px;
  font-size: 13px;
  line-height: 1.45
}

.zstream-auth-message--error {
  background: rgba(239,83,80,.1);
  border: 1px solid rgba(239,83,80,.25);
  color: #d74444
}

.zstream-auth-message--success {
  background: rgba(76,175,80,.1);
  border: 1px solid rgba(76,175,80,.25);
  color: #399b42
}

.zstream-auth-art {
  min-height: 590px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 50% 38%,rgba(110,109,251,.34),transparent 37%),
    linear-gradient(145deg,#252637 0%,#333548 56%,#242535 100%)
}

.zstream-auth-art::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size: 32px 32px
}

.zstream-auth-art__glow {
  position: absolute;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  left: 50%;
  top: 42%;
  transform: translate(-50%,-50%);
  background: rgba(110,109,251,.18);
  filter: blur(45px)
}

.zstream-auth-art img {
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: -2%;
  transform: translateX(-50%);
  width: 100%;
  height: 94%;
  object-fit: contain;
  object-position: center bottom;
  user-select: none;
  pointer-events: none
}

.zstream-auth-art--login img {
  width: 118%;
  height: 100%;
  opacity: .64;
  mix-blend-mode: multiply;
  filter: saturate(1.12) contrast(1.08) brightness(1.18)
}

.zstream-auth-art--register img {
  width: 108%;
  height: 96%;
  opacity: .78;
  mix-blend-mode: multiply;
  filter: saturate(1.08) contrast(1.04) brightness(1.12)
}

.zstream-auth-art__caption {
  position: absolute;
  z-index: 3;
  left: 34px;
  right: 34px;
  bottom: 30px;
  padding: 18px 20px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 14px;
  background: rgba(25,26,39,.55);
  backdrop-filter: blur(10px);
  color: #d6d8e6
}

.zstream-auth-art__caption span,
.zstream-auth-art__caption strong {
  display: block
}

.zstream-auth-art__caption span {
  font-size: 13px;
  color: #aaaec4
}

.zstream-auth-art__caption strong {
  margin-top: 2px;
  color: #fff;
  font-size: 23px
}

.zstream-register-menu-item a {
  color: #6e6dfb!important
}

.zstream-member-name .icon {
  margin-right: 5px
}

.dark .zstream-auth-shell {
  background: #303241;
  border-color: rgba(110,109,251,.24);
  box-shadow: 0 25px 70px rgba(0,0,0,.24)
}

.dark .zstream-auth-form-panel h1 {
  color: #fff
}

.dark .zstream-auth-subtitle,
.dark .zstream-auth-switch,
.dark .zstream-auth-password-note {
  color: #a8adc2
}

.dark .zstream-auth-field {
  color: #c8cada
}

.dark .zstream-auth-input-wrap input {
  border-color: #4a4c5e;
  background: #3b3d4e;
  color: #f5f5fa
}

.dark .zstream-auth-input-wrap input:focus {
  border-color: #6e6dfb;
  background: #414354
}

.dark .zstream-auth-remember {
  color: #b2b5c8
}

@media (max-width: 900px) {
  .zstream-auth-form-panel {
    padding: 48px 38px 42px
  }

  .zstream-auth-shell {
    grid-template-columns: minmax(260px,.8fr) minmax(0,1.2fr)
  }

  .zstream-auth-shell--register {
    grid-template-columns: minmax(0,1.2fr) minmax(260px,.8fr)
  }

  .zstream-auth-password-grid {
    grid-template-columns: 1fr
  }
}

@media (max-width: 680px) {
  .zstream-auth-page {
    padding: 22px 0 34px
  }

  .zstream-auth-shell,
  .zstream-auth-shell--register {
    display: flex;
    flex-direction: column;
    min-height: 0;
    border-radius: 16px
  }

  .zstream-auth-form-panel {
    order: 2;
    padding: 34px 22px 30px
  }

  .zstream-auth-shell--register .zstream-auth-form-panel {
    order: 2
  }

  .zstream-auth-art,
  .zstream-auth-shell--register .zstream-auth-art {
    order: 1;
    min-height: 230px;
    height: 230px
  }

  .zstream-auth-art img {
    height: 130%;
    bottom: -34%
  }

  .zstream-auth-art--login img {
    width: 100%;
    height: 145%;
    bottom: -49%
  }

  .zstream-auth-art--register img {
    width: 88%;
    height: 140%;
    bottom: -52%
  }

  .zstream-auth-art__caption {
    left: 14px;
    right: 14px;
    bottom: 12px;
    padding: 11px 13px
  }

  .zstream-auth-art__caption strong {
    font-size: 18px
  }

  .zstream-auth-form-panel h1 {
    font-size: 29px
  }
}

/* =========================================================
   Member profile / private messages / rich comments
   ========================================================= */
.zstream-member-page {
  padding: 38px 0 50px
}

.zstream-member-shell {
  max-width: 1040px;
  margin: 0 auto;
  padding: 30px;
  border: 1px solid rgba(110,109,251,.16);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 16px 45px rgba(28,30,48,.12)
}

.zstream-member-heading {
  margin-bottom: 24px
}

.zstream-member-heading h1 {
  margin: 4px 0 8px;
  color: #303241;
  font-size: 30px
}

.zstream-member-heading p {
  margin: 0;
  color: #8b91a5;
  line-height: 1.55
}

.zstream-member-kicker {
  color: #6e6dfb;
  font-weight: 800;
  font-size: 13px
}

.zstream-member-kicker .icon {
  margin-right: 5px
}

.zstream-member-notice {
  margin: 0 0 18px;
  padding: 12px 14px;
  border-radius: 9px;
  font-size: 13px
}

.zstream-member-notice--success {
  background: rgba(61,183,112,.12);
  border: 1px solid rgba(61,183,112,.25);
  color: #31915b
}

.zstream-member-notice--error {
  background: rgba(239,83,80,.1);
  border: 1px solid rgba(239,83,80,.24);
  color: #d74444
}

.zstream-profile-avatar-panel {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 20px;
  border-radius: 14px;
  background: #f7f8fc
}

.zstream-profile-avatar-preview img {
  width: 132px;
  height: 132px;
  display: block;
  object-fit: cover;
  border-radius: 50%;
  border: 4px solid #fff;
  box-shadow: 0 8px 26px rgba(30,32,50,.15)
}

.zstream-profile-avatar-copy {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: 7px;
  color: #777d91
}

.zstream-profile-avatar-copy strong {
  color: #343647;
  font-size: 18px
}

.zstream-profile-avatar-copy span {
  font-size: 12px
}

.zstream-upload-button {
  margin-top: 4px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 14px;
  border-radius: 9px;
  background: #6e6dfb;
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer
}

.zstream-upload-button input {
  display: none
}

.zstream-remove-avatar {
  font-size: 12px;
  cursor: pointer
}

.zstream-remove-avatar input {
  margin-right: 5px;
  accent-color: #6e6dfb
}

.zstream-profile-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 20px
}

.zstream-profile-fields label,
.zstream-message-compose label {
  display: grid;
  gap: 7px;
  color: #656b7f;
  font-size: 13px;
  font-weight: 700
}

.zstream-profile-fields input,
.zstream-message-compose input,
.zstream-message-compose textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #e1e4ed;
  border-radius: 9px;
  background: #f7f8fc;
  color: #343647;
  padding: 12px 13px;
  font: inherit;
  outline: none
}

.zstream-profile-fields input:focus,
.zstream-message-compose input:focus,
.zstream-message-compose textarea:focus {
  border-color: #6e6dfb;
  box-shadow: 0 0 0 3px rgba(110,109,251,.1)
}

.zstream-profile-fields input:disabled {
  opacity: .65;
  cursor: not-allowed
}

.zstream-profile-field-wide {
  grid-column: 1 / -1
}

.zstream-member-submit {
  margin-top: 20px;
  min-height: 44px;
  padding: 0 18px;
  border: 0;
  border-radius: 9px;
  background: #6e6dfb;
  color: #fff;
  font: inherit;
  font-weight: 800;
  cursor: pointer
}

.zstream-member-submit .icon {
  margin-right: 6px
}

.zstream-nav-avatar {
  width: 24px!important;
  height: 24px!important;
  object-fit: cover;
  border-radius: 50%;
  vertical-align: middle;
  margin-right: 6px
}

.zstream-member-name a {
  display: flex!important;
  align-items: center
}

.zstream-unread-badge {
  display: inline-flex;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  box-sizing: border-box;
  margin-left: 5px;
  align-items: center;
  justify-content: center;
  border-radius: 99px;
  background: #ff5a67;
  color: #fff;
  font-size: 10px;
  font-weight: 800
}

.zstream-messages-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px
}

.zstream-message-unread-large {
  flex: 0 0 auto;
  padding: 8px 12px;
  border-radius: 99px;
  background: rgba(110,109,251,.1);
  color: #6e6dfb;
  font-size: 12px;
  font-weight: 800
}

.zstream-message-compose,
.zstream-message-reader,
.zstream-message-list-panel {
  border: 1px solid #e8e9f0;
  border-radius: 13px;
  background: #fafbfe
}

.zstream-message-compose {
  padding: 20px;
  margin-bottom: 22px
}

.zstream-message-compose h2,
.zstream-message-list-panel h2 {
  margin: 0 0 15px;
  font-size: 18px;
  color: #343647
}

.zstream-message-compose h2 span,
.zstream-message-list-panel h2 span {
  color: #6e6dfb
}

.zstream-message-compose-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px
}

.zstream-message-body-field {
  margin-top: 14px
}

.zstream-message-compose textarea {
  resize: vertical;
  min-height: 110px
}

.zstream-message-reader {
  padding: 20px;
  margin-bottom: 22px
}

.zstream-message-reader-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px
}

.zstream-message-reader-user {
  display: flex;
  align-items: center;
  gap: 11px
}

.zstream-message-reader-user img,
.zstream-message-row img {
  object-fit: cover;
  border-radius: 50%
}

.zstream-message-reader-user span {
  display: block;
  color: #8a8fa2;
  font-size: 11px
}

.zstream-message-reader-user strong {
  color: #343647
}

.zstream-message-reader-head time,
.zstream-message-row time {
  color: #999eb0;
  font-size: 11px
}

.zstream-message-reader h3 {
  margin: 18px 0 10px;
  color: #343647
}

.zstream-message-reader-body {
  padding: 15px;
  border-radius: 9px;
  background: #fff;
  color: #616679;
  line-height: 1.65;
  word-break: break-word
}

.zstream-message-reader-body a {
  color: #6e6dfb
}

.zstream-message-reply-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  padding: 8px 12px;
  border-radius: 8px;
  background: #6e6dfb;
  color: #fff!important;
  font-size: 12px;
  font-weight: 800
}

.zstream-message-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px
}

.zstream-message-list-panel {
  padding: 18px
}

.zstream-message-list {
  display: grid;
  gap: 7px
}

.zstream-message-row {
  display: grid;
  grid-template-columns: 42px minmax(0,1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: 9px;
  background: #fff;
  color: inherit;
  transition: .2s
}

.zstream-message-row:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(30,32,50,.08)
}

.zstream-message-row.is-unread {
  box-shadow: inset 3px 0 0 #6e6dfb;
  background: rgba(110,109,251,.06)
}

.zstream-message-row-copy {
  min-width: 0
}

.zstream-message-row-copy strong,
.zstream-message-row-copy span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.zstream-message-row-copy strong {
  color: #3b3d4c;
  font-size: 13px
}

.zstream-message-row-copy span {
  margin-top: 3px;
  color: #858a9c;
  font-size: 12px
}

.zstream-message-empty {
  color: #969bad;
  font-size: 13px
}

/* Modern comments with member avatars */
.zstream-comments-area {
  padding: 8px 10px 14px
}

.zstream-comments-heading h3 {
  margin: 5px 0 14px;
  color: #353746
}

.zstream-comment-list,
.zstream-comment-list .children {
  list-style: none;
  margin: 0;
  padding: 0
}

.zstream-comment-list .children {
  margin-left: 42px
}

.zstream-comment-item {
  margin-bottom: 11px
}

.zstream-comment-card {
  display: grid;
  grid-template-columns: 56px minmax(0,1fr);
  gap: 12px;
  padding: 13px;
  border-radius: 11px;
  background: #fff;
  border: 1px solid #eaebf1
}

.zstream-comment-avatar img {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 50%;
  display: block;
  border: 3px solid #f1f2f7
}

.zstream-comment-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px
}

.zstream-comment-author {
  color: #3d4050;
  font-size: 14px
}

.zstream-comment-head time {
  color: #9a9eaf;
  font-size: 11px
}

.zstream-comment-content {
  margin-top: 8px;
  color: #656a7d;
  line-height: 1.6;
  word-break: break-word
}

.zstream-comment-content a {
  color: #6e6dfb;
  word-break: break-all
}

.zstream-comment-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px
}

.zstream-comment-actions .comment-reply-link,
.zstream-private-message-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 9px;
  border-radius: 7px;
  background: rgba(110,109,251,.1);
  color: #6e6dfb!important;
  font-size: 11px;
  font-weight: 800
}

.zstream-comment-awaiting {
  color: #d49a27;
  font-size: 12px
}

.zstream-comment-media-link {
  display: inline-block;
  max-width: 100%;
  margin: 7px 0
}

.zstream-comment-media {
  display: block;
  max-width: min(100%,560px);
  max-height: 420px;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 10px;
  background: #171821;
  box-shadow: 0 8px 24px rgba(0,0,0,.16)
}

.zstream-comment-editor {
  margin-top: 7px
}

.zstream-comment-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 7px
}

.zstream-comment-tool,
.zstream-emoji-choice {
  border: 1px solid #e1e3ec;
  border-radius: 7px;
  background: #f7f8fc;
  color: #64697c;
  font: inherit;
  cursor: pointer
}

.zstream-comment-tool {
  padding: 7px 10px;
  font-size: 11px;
  font-weight: 700
}

.zstream-comment-tool:hover,
.zstream-emoji-choice:hover {
  border-color: #6e6dfb;
  color: #6e6dfb
}

.zstream-emoji-panel {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 8px;
  padding: 8px;
  border-radius: 8px;
  background: #f7f8fc
}

.zstream-emoji-panel[hidden] {
  display: none
}

.zstream-emoji-choice {
  width: 34px;
  height: 34px;
  padding: 0;
  font-size: 18px
}

.zstream-comment-editor label {
  display: block;
  color: #707589;
  font-size: 12px;
  font-weight: 700
}

.zstream-comment-help {
  margin: 6px 0 0!important;
  color: #9599aa;
  font-size: 11px
}

.zstream-comment-navigation {
  display: flex;
  justify-content: space-between;
  margin: 12px 0
}


/* =========================================================
   User badges / achievements
   ========================================================= */
.zstream-badges-section {
  margin-top: 30px;
  padding-top: 28px;
  border-top: 1px solid #eceef4
}

.zstream-badges-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 18px
}

.zstream-badges-heading h2 {
  margin: 4px 0 6px;
  color: #303241;
  font-size: 24px
}

.zstream-badges-heading p {
  margin: 0;
  color: #8b91a5;
  line-height: 1.5
}

.zstream-badges-heading > strong {
  flex: 0 0 auto;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(110,109,251,.1);
  color: #6e6dfb;
  font-size: 12px
}

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

.zstream-badge-card {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  min-height: 112px;
  padding: 15px;
  box-sizing: border-box;
  border: 1px solid #e8eaf1;
  border-radius: 12px;
  background: #fafbfe;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease
}

.zstream-badge-card.is-earned:hover {
  transform: translateY(-2px);
  border-color: rgba(110,109,251,.3);
  box-shadow: 0 9px 24px rgba(32,34,54,.09)
}

.zstream-badge-card.is-locked {
  opacity: .54;
  filter: grayscale(.75)
}

.zstream-badge-icon,
.zstream-badge-toast-icon {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  color: #fff;
  font-size: 26px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), 0 8px 18px rgba(25,27,44,.12)
}

.zstream-badge--purple { background: linear-gradient(135deg,#7968ff,#9d67e8) }
.zstream-badge--blue { background: linear-gradient(135deg,#4c9cff,#6377f7) }
.zstream-badge--green { background: linear-gradient(135deg,#43bf78,#68cba0) }
.zstream-badge--gold { background: linear-gradient(135deg,#e2a628,#f0c65c) }
.zstream-badge--orange { background: linear-gradient(135deg,#f06a3a,#f39a45) }
.zstream-badge--pink { background: linear-gradient(135deg,#e45e9c,#bd69da) }

.zstream-badge-copy {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column
}

.zstream-badge-copy strong {
  color: #373a4a;
  font-size: 14px;
  line-height: 1.25
}

.zstream-badge-copy > span {
  margin-top: 4px;
  color: #858a9e;
  font-size: 11px;
  line-height: 1.4
}

.zstream-badge-copy small {
  margin-top: 7px;
  color: #9196a8;
  font-size: 10px
}

.zstream-badge-card.is-earned .zstream-badge-copy small {
  color: #42a96d;
  font-weight: 700
}

.zstream-badge-progress {
  width: 100%;
  height: 5px;
  margin-top: 9px;
  overflow: hidden;
  border-radius: 99px;
  background: #e7e9f0
}

.zstream-badge-progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #6e6dfb
}

.zstream-comment-author-wrap {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px
}

.zstream-comment-badges {
  display: inline-flex;
  align-items: center;
  gap: 4px
}

.zstream-mini-badge {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #fff;
  font-size: 10px;
  box-shadow: 0 2px 7px rgba(0,0,0,.16)
}

.zstream-badge-toast {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 99999;
  width: min(360px,calc(100vw - 30px));
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 14px 16px;
  border: 1px solid rgba(110,109,251,.24);
  border-radius: 14px;
  background: rgba(48,50,65,.97);
  box-shadow: 0 16px 45px rgba(0,0,0,.28);
  color: #fff;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: opacity .28s ease, transform .28s ease, visibility .28s ease
}

.zstream-badge-toast.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0)
}

.zstream-badge-toast-icon {
  width: 46px;
  height: 46px;
  font-size: 24px
}

.zstream-badge-toast > span:last-child {
  display: flex;
  min-width: 0;
  flex-direction: column
}

.zstream-badge-toast small {
  color: #b7baff;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em
}

.zstream-badge-toast strong {
  margin-top: 2px;
  font-size: 14px
}

.zstream-badge-toast em {
  margin-top: 2px;
  color: #bfc3d4;
  font-size: 11px;
  font-style: normal;
  line-height: 1.35
}

.dark .zstream-badges-section {
  border-color: #424456
}

.dark .zstream-badges-heading h2,
.dark .zstream-badge-copy strong {
  color: #f0f1f7
}

.dark .zstream-badges-heading p,
.dark .zstream-badge-copy > span {
  color: #adb1c3
}

.dark .zstream-badge-card {
  background: #363847;
  border-color: #484a5b
}

.dark .zstream-badge-progress {
  background: #4a4c5d
}

@media (max-width: 860px) {
  .zstream-badges-grid {
    grid-template-columns: repeat(2,minmax(0,1fr))
  }
}

@media (max-width: 560px) {
  .zstream-badges-heading {
    flex-direction: column
  }

  .zstream-badges-grid {
    grid-template-columns: 1fr
  }

  .zstream-badge-card {
    min-height: 98px
  }

  .zstream-badge-toast {
    right: 15px;
    bottom: 15px
  }
}

/* Dark mode */
.dark .zstream-member-shell,
.dark .zstream-comment-card {
  background: #303241;
  border-color: #424456
}

.dark .zstream-member-heading h1,
.dark .zstream-profile-avatar-copy strong,
.dark .zstream-message-compose h2,
.dark .zstream-message-list-panel h2,
.dark .zstream-message-reader h3,
.dark .zstream-message-reader-user strong,
.dark .zstream-message-row-copy strong,
.dark .zstream-comments-heading h3,
.dark .zstream-comment-author {
  color: #f0f1f7
}

.dark .zstream-member-heading p,
.dark .zstream-profile-avatar-copy,
.dark .zstream-profile-fields label,
.dark .zstream-message-compose label,
.dark .zstream-comment-content,
.dark .zstream-comment-editor label {
  color: #adb1c3
}

.dark .zstream-profile-avatar-panel,
.dark .zstream-message-compose,
.dark .zstream-message-reader,
.dark .zstream-message-list-panel,
.dark .zstream-emoji-panel {
  background: #363847;
  border-color: #484a5b
}

.dark .zstream-profile-avatar-preview img {
  border-color: #404252
}

.dark .zstream-profile-fields input,
.dark .zstream-message-compose input,
.dark .zstream-message-compose textarea,
.dark .zstream-comment-tool,
.dark .zstream-emoji-choice {
  background: #3b3d4e;
  border-color: #4a4c5d;
  color: #e9eaf2
}

.dark .zstream-message-reader-body,
.dark .zstream-message-row {
  background: #2f303e;
  color: #b9bdcc
}

.dark .zstream-message-row.is-unread {
  background: rgba(110,109,251,.11)
}

.dark .zstream-message-row-copy span,
.dark .zstream-comment-head time,
.dark .zstream-comment-help {
  color: #9297aa
}

.dark .zstream-comment-avatar img {
  border-color: #414353
}

@media (max-width: 760px) {
  .zstream-member-page {
    padding: 20px 0 32px
  }

  .zstream-member-shell {
    padding: 18px;
    border-radius: 12px
  }

  .zstream-member-heading h1 {
    font-size: 25px
  }

  .zstream-profile-avatar-panel {
    align-items: flex-start;
    flex-direction: column
  }

  .zstream-profile-avatar-preview img {
    width: 108px;
    height: 108px
  }

  .zstream-profile-fields,
  .zstream-message-compose-grid,
  .zstream-message-columns {
    grid-template-columns: 1fr
  }

  .zstream-messages-heading {
    align-items: flex-start;
    flex-direction: column
  }

  .zstream-comment-card {
    grid-template-columns: 44px minmax(0,1fr);
    gap: 9px;
    padding: 10px
  }

  .zstream-comment-avatar img {
    width: 44px;
    height: 44px
  }

  .zstream-comment-list .children {
    margin-left: 18px
  }

  .zstream-comment-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 2px
  }

  .zstream-comment-media {
    max-height: 300px
  }

  .zstream-comment-actions {
    flex-wrap: wrap
  }
}
.zstream-comment-upload-status {
  display: block;
  min-height: 16px;
  margin: 0 0 6px;
  color: #5aa36c;
  font-size: 11px
}

.zstream-comment-upload-status.is-error {
  color: #e05b63
}

/* =========================================================
 * Compact header navigation
 * ========================================================= */
.header-navigation .zstream-catalog-menu > a,
.header-navigation .zstream-member-menu > a {
  gap: 6px;
  cursor: pointer
}

.header-navigation .zstream-catalog-menu > .sub-menu {
  min-width: 210px
}

.header-navigation .zstream-member-menu > .sub-menu {
  min-width: 205px;
  left: auto;
  right: 0
}

.header-navigation .zstream-member-menu {
  position: relative
}

.header-navigation .zstream-member-menu > a {
  max-width: 190px
}

.header-navigation .zstream-member-menu > a > span:not(.zstream-unread-badge) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 105px
}

.header-navigation .zstream-catalog-menu .sub-menu a,
.header-navigation .zstream-member-menu .sub-menu a {
  display: flex!important;
  align-items: center;
  gap: 8px;
  white-space: nowrap
}

.header-navigation .zstream-catalog-menu .sub-menu .icon,
.header-navigation .zstream-member-menu .sub-menu .icon {
  width: 18px;
  padding: 0;
  text-align: center;
  opacity: .8
}

.header-navigation .menu-item.menu-item-has-children.is-open > .sub-menu {
  display: block
}

.zstream-member-arrow {
  padding-left: 0!important
}

.zstream-login-menu-item .icon,
.zstream-logout-menu-item .icon {
  margin-right: 5px
}

.dark .header-navigation .zstream-catalog-menu > .sub-menu,
.dark .header-navigation .zstream-member-menu > .sub-menu {
  background: #343645
}

@media (max-width: 768px) {
  .header-navigation .zstream-catalog-menu > .sub-menu,
  .header-navigation .zstream-member-menu > .sub-menu {
    position: relative;
    top: 0;
    left: 0;
    right: auto;
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 0 10px 8px 22px;
    border-radius: 0;
    box-shadow: none
  }

  .header-navigation .menu-item.menu-item-has-children:not(.is-open) > .sub-menu {
    display: none!important
  }

  .header-navigation .menu-item.menu-item-has-children.is-open > .sub-menu {
    display: block!important
  }

  .header-navigation .zstream-member-menu > a {
    max-width: none
  }

  .header-navigation .zstream-member-menu > a > span:not(.zstream-unread-badge) {
    max-width: none
  }

  .header-navigation .zstream-catalog-menu .sub-menu a,
  .header-navigation .zstream-member-menu .sub-menu a {
    padding: 10px 12px
  }
}


/* =========================================================
 * Member profile stats + private message notifications
 * ========================================================= */
.zstream-public-profile-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px
}

.zstream-profile-message-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 16px;
  border-radius: 9px;
  background: #6e6dfb;
  color: #fff!important;
  font-weight: 700;
  white-space: nowrap
}

.zstream-profile-overview {
  margin: 22px 0;
  padding: 20px;
  border: 1px solid #e5e8f0;
  border-radius: 14px;
  background: #fff
}

.zstream-profile-overview-user {
  display: flex;
  align-items: center;
  gap: 15px;
  padding-bottom: 18px;
  border-bottom: 1px solid #edf0f5
}

.zstream-profile-overview-avatar img {
  width: 78px;
  height: 78px;
  border-radius: 50%;
  object-fit: cover;
  display: block
}

.zstream-profile-overview-user > div:last-child {
  min-width: 0
}

.zstream-profile-overview-user strong {
  display: block;
  font-size: 21px;
  color: #2c3142;
  line-height: 1.2
}

.zstream-profile-overview-user > div:last-child > span:not(.zstream-comment-badges) {
  display: block;
  margin-top: 4px;
  color: #8992a5;
  font-size: 13px
}

.zstream-profile-overview-user .zstream-comment-badges {
  margin-top: 9px
}

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

.zstream-profile-stat {
  position: relative;
  min-height: 84px;
  padding: 14px 14px 14px 45px;
  border-radius: 11px;
  background: #f7f8fb
}

.zstream-profile-stat > .icon {
  position: absolute;
  left: 15px;
  top: 16px;
  color: #6e6dfb;
  font-size: 21px
}

.zstream-profile-stat span,
.zstream-profile-favorites span {
  display: block;
  font-size: 12px;
  color: #8d96a8;
  margin-bottom: 5px
}

.zstream-profile-stat strong,
.zstream-profile-favorites strong {
  display: block;
  color: #303548;
  font-size: 15px;
  line-height: 1.35
}

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

.zstream-profile-favorites > div {
  padding: 14px 16px;
  border-radius: 11px;
  background: linear-gradient(135deg,rgba(110,109,251,.09),rgba(110,109,251,.03));
  border: 1px solid rgba(110,109,251,.14)
}

.zstream-comment-author a {
  color: inherit
}

.zstream-comment-avatar a {
  display: block
}

.zstream-message-notification-toast {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 99999;
  min-width: 280px;
  max-width: 360px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(30,31,43,.97);
  color: #fff!important;
  border: 1px solid rgba(110,109,251,.42);
  box-shadow: 0 18px 45px rgba(0,0,0,.32);
  opacity: 0;
  transform: translateY(18px);
  transition: .25s ease
}

.zstream-message-notification-toast.is-visible {
  opacity: 1;
  transform: translateY(0)
}

.zstream-message-notification-toast > .icon {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 42px;
  border-radius: 50%;
  background: #6e6dfb;
  font-size: 21px
}

.zstream-message-notification-toast span {
  min-width: 0;
  display: block
}

.zstream-message-notification-toast small,
.zstream-message-notification-toast strong,
.zstream-message-notification-toast em {
  display: block;
  font-style: normal
}

.zstream-message-notification-toast small {
  color: #aeb6ca;
  font-size: 11px
}

.zstream-message-notification-toast strong {
  margin-top: 2px;
  font-size: 14px
}

.zstream-message-notification-toast em {
  margin-top: 2px;
  color: #cdd2de;
  font-size: 12px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis
}

.dark .zstream-profile-overview {
  background: #343646;
  border-color: #45485b
}

.dark .zstream-profile-overview-user {
  border-bottom-color: #46495b
}

.dark .zstream-profile-overview-user strong,
.dark .zstream-profile-stat strong,
.dark .zstream-profile-favorites strong {
  color: #f4f5fa
}

.dark .zstream-profile-stat {
  background: #3b3d4e
}

.dark .zstream-profile-favorites > div {
  background: linear-gradient(135deg,rgba(110,109,251,.15),rgba(110,109,251,.05));
  border-color: rgba(110,109,251,.22)
}

@media (max-width: 768px) {
  .zstream-public-profile-heading {
    display: block
  }
  .zstream-profile-message-button {
    margin-top: 14px
  }
  .zstream-profile-overview {
    padding: 15px
  }
  .zstream-profile-stat-grid,
  .zstream-profile-favorites {
    grid-template-columns: 1fr
  }
  .zstream-message-notification-toast {
    left: 12px;
    right: 12px;
    bottom: 14px;
    min-width: 0;
    max-width: none
  }
}


/* === Personal anime list / Add to list === */
.zstream-add-list{position:relative;margin:10px 0 12px;z-index:20}
.zstream-add-list__trigger{width:100%;min-height:44px;border:0;border-radius:24px;padding:0 16px;display:flex;align-items:center;justify-content:center;gap:10px;background:#eef1f5;color:#242631;font-size:15px;font-weight:700;cursor:pointer;transition:.2s;box-shadow:0 5px 18px rgba(0,0,0,.08)}
.zstream-add-list__trigger:hover{transform:translateY(-1px);background:#fff}
.zstream-add-list.has-status .zstream-add-list__trigger{background:#6e6dfb;color:#fff}
.zstream-add-list__plus{font-size:23px;line-height:1;font-weight:800}.zstream-add-list__plus i{font-size:18px}.zstream-add-list__arrow{margin-left:auto;font-size:18px}
.zstream-add-list__menu{position:absolute;left:0;right:0;top:calc(100% + 8px);padding:7px;background:#fff;border-radius:14px;box-shadow:0 16px 45px rgba(0,0,0,.25);display:none;overflow:hidden}
.zstream-add-list.is-open .zstream-add-list__menu{display:block;animation:zstreamListIn .16s ease-out}
@keyframes zstreamListIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.zstream-add-list__option{width:100%;border:0;background:transparent;color:#292b35;padding:11px 12px;border-radius:9px;display:flex;align-items:center;justify-content:space-between;text-align:left;font-size:14px;cursor:pointer;transition:.16s}
.zstream-add-list__option:hover{background:#f0f0ff;color:#5d5cf0}.zstream-add-list__option i{opacity:0}.zstream-add-list__option.is-selected{background:#eeeeff;color:#5d5cf0;font-weight:700}.zstream-add-list__option.is-selected i{opacity:1}.zstream-add-list__remove{margin-top:4px;border-top:1px solid #eee;color:#d95757}
.zstream-add-list.is-loading{pointer-events:none;opacity:.65}
.dark .zstream-add-list__trigger{background:#45475a;color:#eee}.dark .zstream-add-list.has-status .zstream-add-list__trigger{background:#6e6dfb;color:#fff}.dark .zstream-add-list__menu{background:#343645}.dark .zstream-add-list__option{color:#dfe4ed}.dark .zstream-add-list__option:hover,.dark .zstream-add-list__option.is-selected{background:#41435a;color:#9da7ff}.dark .zstream-add-list__remove{border-top-color:#4a4c5c;color:#ff8c8c}
.zstream-list-toast{position:fixed;right:22px;bottom:24px;z-index:999999;max-width:min(420px,calc(100vw - 32px));padding:13px 18px;border-radius:10px;color:#fff;font-size:14px;font-weight:700;box-shadow:0 14px 42px rgba(0,0,0,.28);opacity:0;transform:translateY(12px);transition:.22s}.zstream-list-toast.is-visible{opacity:1;transform:none}.zstream-list-toast--success{background:#39a76a}.zstream-list-toast--error{background:#d94b54}

.zstream-profile-anime-list{margin-top:28px;padding-top:8px}.zstream-profile-list-groups{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}.zstream-profile-list-group{background:#f7f8fb;border-radius:13px;padding:12px;min-width:0}.zstream-profile-list-group h3{margin:0 0 10px;font-size:14px;display:flex;align-items:center;justify-content:space-between}.zstream-profile-list-group h3 span{display:inline-flex;min-width:24px;height:24px;border-radius:99px;align-items:center;justify-content:center;background:#e6e7ee;font-size:12px}.zstream-profile-list-items{display:grid;gap:8px}.zstream-profile-list-item{display:flex;align-items:center;gap:8px;color:#555;font-size:12px;line-height:1.3}.zstream-profile-list-item img{width:34px;height:47px;object-fit:cover;border-radius:5px;flex:none}.zstream-profile-list-item:hover{color:#6e6dfb}.zstream-profile-list-empty{margin:0;color:#9aa0ac;font-size:12px}.dark .zstream-profile-list-group{background:#343645}.dark .zstream-profile-list-group h3 span{background:#45475a}.dark .zstream-profile-list-item{color:#c9d1dd}.dark .zstream-profile-list-item:hover{color:#9da7ff}
@media(max-width:1000px){.zstream-profile-list-groups{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.zstream-profile-list-groups{grid-template-columns:1fr}.zstream-list-toast{left:16px;right:16px;bottom:18px;max-width:none}}


/* ZSTREAM LEGACY FAVORITES REMOVED */
.simplefavorite-button,
.simplefavorites-clear,
.favbutton .simplefavorite-button {
  display: none !important
}

/* YumeTV episode resume playback notification */
.zstream-resume-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  z-index: 999999;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  max-width: calc(100vw - 32px);
  transform: translate(-50%, 18px);
  opacity: 0;
  pointer-events: none;
  border: 1px solid rgba(110,109,251,.42);
  border-radius: 12px;
  background: rgba(31,32,44,.96);
  color: #fff;
  box-shadow: 0 12px 36px rgba(0,0,0,.32);
  transition: opacity .28s ease, transform .28s ease;
}

.zstream-resume-toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

.zstream-resume-toast i {
  color: #6e6dfb;
  font-size: 19px;
}

.zstream-resume-toast b {
  color: #8d8cff;
}

@media (max-width: 600px) {
  .zstream-resume-toast {
    bottom: 18px;
    padding: 11px 14px;
    font-size: 14px;
  }
}


/* =========================================================
 * Supporter membership
 * ========================================================= */
.header-navigation .zstream-supporter-menu-item > a {
  margin: 7px 4px;
  padding: 7px 13px!important;
  min-height: 34px;
  display: inline-flex!important;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  color: #2d2637!important;
  font-weight: 800;
  background: linear-gradient(135deg,#f6d878,#d9b6ff);
  box-shadow: 0 7px 18px rgba(180,137,255,.18)
}
.header-navigation .zstream-supporter-menu-item > a:hover,
.header-navigation .zstream-supporter-menu-item.is-supporter > a {
  color: #fff!important;
  background: linear-gradient(135deg,#6e6dfb,#a35cff)
}
.zstream-supporter-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  width: max-content;
  margin-top: 7px;
  padding: 4px 8px;
  border-radius: 999px;
  background: linear-gradient(135deg,#f6d878,#d9b6ff);
  color: #342b3d!important;
  font-size: 10px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: .02em;
  box-shadow: 0 4px 14px rgba(164,112,255,.17)
}
.zstream-comment-author-wrap > .zstream-supporter-chip {
  margin: 0 0 0 6px;
  vertical-align: middle
}
.zstream-profile-overview.is-supporter .zstream-profile-overview-avatar img {
  box-shadow: 0 0 0 3px #f1cf72,0 0 0 6px rgba(163,92,255,.22)
}
.zstream-profile-overview-user .zstream-supporter-chip {
  display: inline-flex!important;
  color: #342b3d!important;
  margin-top: 8px!important
}
.zstream-supporter-page {padding:32px 0 50px}
.zstream-supporter-hero {
  position: relative;
  overflow: hidden;
  min-height: 300px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px;
  padding: 42px;
  border-radius: 24px;
  color: #fff;
  background: linear-gradient(135deg,#252739 0%,#3b3560 50%,#241f38 100%);
  box-shadow: 0 25px 70px rgba(18,18,29,.2)
}
.zstream-supporter-glow {position:absolute;inset:auto -80px -140px auto;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(180,104,255,.38),rgba(180,104,255,0) 70%);pointer-events:none}
.zstream-supporter-hero-copy {position:relative;z-index:2;max-width:680px}
.zstream-supporter-eyebrow {display:inline-flex;align-items:center;gap:7px;padding:7px 11px;border-radius:999px;background:rgba(255,255,255,.09);color:#f8df8b;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}
.zstream-supporter-hero h1 {margin:16px 0 10px;color:#fff;font-size:38px;line-height:1.08}
.zstream-supporter-hero h1 strong {color:#f4d878}
.zstream-supporter-hero p {max-width:620px;margin:0;color:#cbd0df;font-size:15px;line-height:1.7}
.zstream-supporter-price {display:flex;align-items:baseline;gap:7px;margin-top:20px}.zstream-supporter-price strong{font-size:44px;color:#fff}.zstream-supporter-price span{color:#bdc4d8;font-weight:700}
.zstream-supporter-diamond {position:relative;z-index:1;width:150px;height:150px;flex:0 0 150px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:linear-gradient(135deg,rgba(246,216,120,.18),rgba(163,92,255,.22));border:1px solid rgba(255,255,255,.12);font-size:72px;color:#efd073;box-shadow:inset 0 0 50px rgba(255,255,255,.04)}
.zstream-supporter-active-pill {display:inline-flex;align-items:center;gap:7px;margin-top:20px;padding:9px 13px;border-radius:999px;background:rgba(71,201,137,.14);border:1px solid rgba(71,201,137,.28);color:#86e5b6;font-weight:800;font-size:12px}
.zstream-supporter-benefits {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:18px}
.zstream-supporter-benefits article {display:flex;gap:13px;align-items:flex-start;padding:20px;border-radius:16px;background:#fff;border:1px solid #e7e9f0;box-shadow:0 10px 28px rgba(31,36,55,.06)}
.zstream-supporter-benefits article > i {width:42px;height:42px;flex:0 0 42px;display:flex;align-items:center;justify-content:center;border-radius:12px;background:rgba(110,109,251,.1);color:#6e6dfb;font-size:21px}
.zstream-supporter-benefits strong,.zstream-supporter-benefits span{display:block}.zstream-supporter-benefits strong{color:#303548;font-size:14px}.zstream-supporter-benefits span{margin-top:5px;color:#8790a2;font-size:12px;line-height:1.55}
.zstream-supporter-checkout {margin-top:18px;padding:24px;border-radius:18px;background:#fff;border:1px solid #e7e9f0;box-shadow:0 10px 28px rgba(31,36,55,.06)}
.zstream-supporter-checkout h2 {margin:5px 0 5px;color:#303548}.zstream-supporter-checkout p{color:#818a9d;line-height:1.6}
.zstream-supporter-actions {display:flex;flex-wrap:wrap;gap:10px;margin-top:17px}.zstream-supporter-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 18px;border-radius:11px;font-weight:800}.zstream-supporter-btn.is-primary{background:#6e6dfb;color:#fff}.zstream-supporter-btn.is-patreon{background:#ff5a5f;color:#fff}.zstream-supporter-btn.is-disabled{background:#eceef3;color:#9aa1ae;cursor:not-allowed}.zstream-supporter-note{margin:15px 0 0!important;padding:12px 14px;border-radius:10px;background:#f5f6fa;font-size:11px!important}
.dark .zstream-supporter-benefits article,.dark .zstream-supporter-checkout{background:#343646;border-color:#45485b}.dark .zstream-supporter-benefits strong,.dark .zstream-supporter-checkout h2{color:#f4f5fa}.dark .zstream-supporter-benefits span,.dark .zstream-supporter-checkout p{color:#aeb6c8}.dark .zstream-supporter-note{background:#3b3d4e}
@media(max-width:850px){.zstream-supporter-hero{padding:28px;min-height:260px}.zstream-supporter-diamond{width:105px;height:105px;flex-basis:105px;font-size:50px}.zstream-supporter-hero h1{font-size:30px}.zstream-supporter-benefits{grid-template-columns:1fr}}
@media(max-width:600px){.zstream-supporter-page{padding-top:18px}.zstream-supporter-hero{display:block;padding:24px;border-radius:18px}.zstream-supporter-diamond{position:absolute;right:14px;top:14px;width:72px;height:72px;font-size:34px;opacity:.65}.zstream-supporter-hero-copy{padding-right:18px}.zstream-supporter-hero h1{font-size:27px;max-width:85%}.header-navigation .zstream-supporter-menu-item > a{display:flex!important;margin:0;padding:11px 14px!important;border-radius:8px}}


/* =========================================================
 * Supporter downloads
 * ========================================================= */
.zstream-supporter-downloads-page{padding:32px 0 55px}
.zstream-supporter-downloads-head{padding:28px;border-radius:20px;background:#fff;border:1px solid #e7e9f0;box-shadow:0 10px 28px rgba(31,36,55,.06)}
.zstream-supporter-downloads-head h1{margin:13px 0 8px;color:#303548;font-size:32px}.zstream-supporter-downloads-head p{margin:0 0 14px;color:#818a9d;line-height:1.65}
.zstream-supporter-download-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px;margin-top:18px}
.zstream-supporter-download-card{display:flex;gap:15px;padding:14px;border-radius:16px;background:#fff;border:1px solid #e7e9f0;box-shadow:0 10px 28px rgba(31,36,55,.06)}
.zstream-supporter-download-cover{width:88px;height:122px;flex:0 0 88px;overflow:hidden;border-radius:11px;background:#eceef3}.zstream-supporter-download-cover img{width:100%;height:100%;object-fit:cover;display:block}
.zstream-supporter-download-info{min-width:0;display:flex;flex-direction:column;justify-content:center}.zstream-supporter-download-info h2{margin:0;color:#303548;font-size:15px;line-height:1.35}.zstream-supporter-download-info p{margin:5px 0 12px;color:#8a92a4;font-size:12px}
.zstream-supporter-download-actions{display:flex;flex-wrap:wrap;gap:8px}.zstream-supporter-download-btn{display:inline-flex;align-items:center;gap:6px;padding:9px 11px;border-radius:9px;font-size:11px;font-weight:800}.zstream-supporter-download-btn.is-mkv{background:#6e6dfb;color:#fff}.zstream-supporter-download-btn.is-subs{background:#e7e9f0;color:#4f5668}
.zstream-supporter-download-empty{margin-top:18px;padding:42px 24px;text-align:center;border-radius:18px;background:#fff;border:1px dashed #d9dce5;color:#8b93a3}.zstream-supporter-download-empty i{font-size:42px;color:#6e6dfb}.zstream-supporter-download-empty h2{margin:12px 0 6px;color:#303548}.zstream-supporter-download-empty p{margin:0}
.dark .zstream-supporter-downloads-head,.dark .zstream-supporter-download-card,.dark .zstream-supporter-download-empty{background:#343646;border-color:#45485b}.dark .zstream-supporter-downloads-head h1,.dark .zstream-supporter-download-info h2,.dark .zstream-supporter-download-empty h2{color:#f4f5fa}.dark .zstream-supporter-downloads-head p,.dark .zstream-supporter-download-info p,.dark .zstream-supporter-download-empty{color:#aeb6c8}.dark .zstream-supporter-download-btn.is-subs{background:#45485b;color:#eef0f7}
@media(max-width:760px){.zstream-supporter-download-grid{grid-template-columns:1fr}.zstream-supporter-downloads-head{padding:22px}.zstream-supporter-download-card{gap:12px}.zstream-supporter-download-cover{width:72px;height:100px;flex-basis:72px}}

/* -------------------------------------------------------------------------
 * Episode video reactions
 * ------------------------------------------------------------------------- */
.zstream-video-reactions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 46px;
  padding: 4px 6px;
  border-radius: 999px;
  background: rgba(237,242,247,.92);
  transition: opacity .2s ease, box-shadow .2s ease
}
.zstream-video-reactions.is-loading { opacity: .72; pointer-events: none }
.zstream-video-reactions.has-error { box-shadow: 0 0 0 2px rgba(239,68,68,.7) }
.zstream-video-reaction {
  position: relative;
  border: 0;
  outline: 0;
  min-width: 44px;
  height: 38px;
  padding: 0 7px;
  border-radius: 999px;
  background: transparent;
  color: #5d6473;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  cursor: pointer;
  transition: transform .18s ease, background .18s ease, box-shadow .18s ease
}
.zstream-video-reaction:hover,
.zstream-video-reaction:focus-visible { transform: translateY(-2px); background: rgba(255,255,255,.85) }
.zstream-video-reaction.is-active {
  background: #fff;
  color: #444;
  box-shadow: 0 5px 15px rgba(40,45,70,.14), 0 0 0 2px rgba(110,109,251,.35)
}
.zstream-video-reaction__emoji {
  display: inline-block;
  font-size: 23px;
  line-height: 1;
  transform-origin: 50% 80%;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.08))
}
.zstream-video-reaction__count {
  min-width: 8px;
  font-size: 10px;
  line-height: 1;
  font-weight: 800;
  color: #7b8291
}
.zstream-video-reaction.is-active .zstream-video-reaction__count { color: #6e6dfb }
.zstream-video-reaction.is-burst .zstream-video-reaction__emoji { animation: zstreamReactionPop .55s cubic-bezier(.2,.9,.2,1.25) }
.zstream-video-reaction__float {
  position: absolute;
  left: 50%;
  top: 0;
  z-index: 10;
  pointer-events: none;
  font-size: 23px;
  animation: zstreamReactionFloat .85s ease-out forwards
}
@keyframes zstreamReactionPop {
  0% { transform: scale(.8) rotate(0deg) }
  38% { transform: scale(1.5) rotate(-9deg) }
  68% { transform: scale(.95) rotate(7deg) }
  100% { transform: scale(1) rotate(0deg) }
}
@keyframes zstreamReactionFloat {
  0% { opacity: 0; transform: translate(-50%, 2px) scale(.65) rotate(-8deg) }
  18% { opacity: 1 }
  100% { opacity: 0; transform: translate(-50%, -54px) scale(1.35) rotate(10deg) }
}
.dark .zstream-video-reactions { background: rgba(42,44,58,.94) }
.dark .zstream-video-reaction { color: #adb5c7 }
.dark .zstream-video-reaction:hover,
.dark .zstream-video-reaction:focus-visible { background: rgba(255,255,255,.07) }
.dark .zstream-video-reaction.is-active { background: #3b3d50; color: #fff; box-shadow: 0 5px 16px rgba(0,0,0,.24), 0 0 0 2px rgba(110,109,251,.55) }
.dark .zstream-video-reaction__count { color: #a8b0c2 }
.dark .zstream-video-reaction.is-active .zstream-video-reaction__count { color: #aeadff }

@media (max-width: 760px) {
  .nav-stream-right { float: right; max-width: calc(100% - 70px) }
  .zstream-video-reactions { gap: 2px; padding: 3px 4px; min-height: 44px }
  .zstream-video-reaction { min-width: 40px; height: 38px; padding: 0 4px; gap: 2px }
  .zstream-video-reaction__emoji { font-size: 21px }
  .zstream-video-reaction__count { font-size: 9px }
}
@media (max-width: 390px) {
  .zstream-video-reaction { min-width: 36px; padding: 0 3px }
  .zstream-video-reaction__emoji { font-size: 19px }
}

/* ============================================================
   User levels / XP
   ============================================================ */
.zstream-level-panel {
  margin-top: 18px;
  padding: 18px;
  border-radius: 14px;
  background: rgba(110,109,251,.08);
  border: 1px solid rgba(110,109,251,.18)
}
.zstream-level-top,
.zstream-level-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px
}
.zstream-level-top > div:first-child {
  display: flex;
  align-items: center;
  gap: 10px
}
.zstream-level-label {
  color: #9ca9b9;
  font-weight: 700
}
.zstream-level-label i { color: #6e6dfb }
.zstream-level-top > div:first-child > strong {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #6e6dfb;
  color: #fff;
  font-size: 20px;
  box-shadow: 0 8px 24px rgba(110,109,251,.28)
}
.zstream-level-xp {
  text-align: right
}
.zstream-level-xp strong {
  display: block;
  color: #fff;
  font-size: 18px
}
.zstream-level-xp span {
  display: block;
  margin-top: 3px;
  color: #9ca9b9;
  font-size: 12px
}
.zstream-level-progress {
  height: 9px;
  margin: 15px 0 9px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255,255,255,.07)
}
.zstream-level-progress i {
  display: block;
  height: 100%;
  min-width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg,#6e6dfb,#9b6dfb)
}
.zstream-level-bottom {
  color: #9ca9b9;
  font-size: 12px
}
.zstream-level-bottom strong { color: #c7c9ff }
.zstream-level-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  margin-left: 6px;
  border-radius: 999px;
  background: rgba(110,109,251,.16);
  color: #9d9cff;
  border: 1px solid rgba(110,109,251,.28);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.5
}
.zstream-levelup-toast {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 999999;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 340px;
  padding: 14px 18px;
  border-radius: 14px;
  color: #fff;
  background: #252737;
  border: 1px solid rgba(110,109,251,.35);
  box-shadow: 0 15px 45px rgba(0,0,0,.35);
  opacity: 0;
  transform: translateY(18px);
  pointer-events: none;
  transition: .25s ease
}
.zstream-levelup-toast.is-visible { opacity: 1; transform: translateY(0) }
.zstream-levelup-toast-icon {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 42px;
  border-radius: 50%;
  background: #6e6dfb;
  font-size: 22px
}
.zstream-levelup-toast small,
.zstream-levelup-toast strong { display: block }
.zstream-levelup-toast small { color: #aeb5c5; margin-bottom: 2px }

/* ============================================================
   Anime translation guide
   ============================================================ */
.zstream-guide-page {
  padding: 44px 0 65px
}
.zstream-guide-shell {
  max-width: 1040px;
  margin: 0 auto
}
.zstream-guide-hero,
.zstream-guide-section {
  padding: 26px;
  margin-bottom: 20px;
  border-radius: 16px;
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.06)
}
.zstream-guide-hero h1 {
  margin: 8px 0 8px;
  font-size: 34px
}
.zstream-guide-hero > p,
.zstream-guide-section > p,
.zstream-guide-section li {
  color: #aab3c2;
  line-height: 1.75
}
.zstream-guide-section h2 {
  margin: 0 0 16px;
  color: #fff;
  font-size: 23px
}
.zstream-guide-tools,
.zstream-guide-columns {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 12px
}
.zstream-guide-tools a,
.zstream-guide-columns > div {
  display: block;
  padding: 18px;
  border-radius: 12px;
  background: rgba(110,109,251,.08);
  border: 1px solid rgba(110,109,251,.18)
}
.zstream-guide-tools a:hover { transform: translateY(-2px); border-color: rgba(110,109,251,.55) }
.zstream-guide-tools strong,
.zstream-guide-columns strong {
  display: block;
  margin-bottom: 6px;
  color: #fff
}
.zstream-guide-tools span,
.zstream-guide-columns p {
  color: #9ca9b9;
  line-height: 1.55
}
.zstream-guide-section pre {
  overflow-x: auto;
  padding: 16px 18px;
  border-radius: 10px;
  background: #171923;
  border: 1px solid rgba(255,255,255,.07);
  color: #d8dcff;
  white-space: pre;
  -webkit-overflow-scrolling: touch
}
.zstream-guide-section code {
  font-family: Consolas, Monaco, monospace
}
.zstream-guide-section p code,
.zstream-guide-section li code {
  padding: 2px 5px;
  border-radius: 5px;
  background: rgba(110,109,251,.1);
  color: #b9b8ff
}
.zstream-guide-note {
  margin: 14px 0;
  padding: 13px 15px;
  border-left: 3px solid #6e6dfb;
  background: rgba(110,109,251,.08);
  color: #c3c8d2;
  line-height: 1.6
}
.zstream-guide-note--warning {
  border-left-color: #f5b942;
  background: rgba(245,185,66,.07)
}
.zstream-guide-video-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px
}
.zstream-guide-video-links a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  background: #ff0033;
  color: #fff;
  font-weight: 700
}
.zstream-guide-steps {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 15px 0
}
.zstream-guide-steps span {
  padding: 9px 12px;
  border-radius: 9px;
  background: rgba(110,109,251,.1);
  color: #d6d8e5
}
.zstream-guide-steps b { color: #8e8cff; margin-right: 5px }
.zstream-guide-steps i { color: #6e6dfb }

@media (max-width: 700px) {
  .zstream-level-top,
  .zstream-level-bottom { align-items: flex-start; flex-direction: column; gap: 8px }
  .zstream-level-xp { text-align: left }
  .zstream-levelup-toast { left: 14px; right: 14px; bottom: 14px; max-width: none }
  .zstream-guide-page { padding: 25px 0 45px }
  .zstream-guide-hero,
  .zstream-guide-section { padding: 20px 16px; border-radius: 12px }
  .zstream-guide-hero h1 { font-size: 29px }
  .zstream-guide-tools,
  .zstream-guide-columns { grid-template-columns: 1fr }
  .zstream-guide-section pre { font-size: 12px }
}

/* Light/dark compatibility for the new XP and guide blocks. */
.zstream-level-xp strong { color: #444 }
.zstream-guide-hero,
.zstream-guide-section { background: #fff; border-color: #ececf2 }
.zstream-guide-hero h1,
.zstream-guide-section h2,
.zstream-guide-tools strong,
.zstream-guide-columns strong { color: #333 }
.zstream-guide-hero > p,
.zstream-guide-section > p,
.zstream-guide-section li,
.zstream-guide-tools span,
.zstream-guide-columns p { color: #6f7785 }
.dark .zstream-level-xp strong { color: #fff }
.dark .zstream-guide-hero,
.dark .zstream-guide-section { background: rgba(255,255,255,.035); border-color: rgba(255,255,255,.06) }
.dark .zstream-guide-hero h1,
.dark .zstream-guide-section h2,
.dark .zstream-guide-tools strong,
.dark .zstream-guide-columns strong { color: #fff }
.dark .zstream-guide-hero > p,
.dark .zstream-guide-section > p,
.dark .zstream-guide-section li,
.dark .zstream-guide-tools span,
.dark .zstream-guide-columns p { color: #aab3c2 }


/* =========================================================
   Kontakti + Anime ziņas
   ========================================================= */
.zstream-contact-page,.zstream-news-page{padding:54px 0 70px;min-height:60vh}.zstream-contact-hero,.zstream-news-header{max-width:850px;margin:0 0 32px}.zstream-eyebrow{display:inline-flex;align-items:center;gap:8px;color:#6d63ff;font-weight:800;font-size:14px;margin-bottom:10px}.zstream-contact-hero h1,.zstream-news-header h1{font-size:34px;line-height:1.15;margin:0 0 12px;color:#fff}.zstream-news-header h1 span{color:#6d63ff}.zstream-contact-hero p,.zstream-news-header p,.zstream-news-header small{color:#aeb6ce;line-height:1.7}.zstream-contact-grid{display:grid;grid-template-columns:minmax(0,850px);gap:22px}.zstream-contact-card{background:#353748;border:1px solid rgba(255,255,255,.07);border-radius:18px;padding:26px;box-shadow:0 12px 32px rgba(0,0,0,.12)}.zstream-contact-card h2{margin:0 0 20px;color:#fff}.zstream-contact-line{display:flex;align-items:center;gap:14px;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.07);color:#fff}.zstream-contact-line:hover{color:#7d73ff}.zstream-contact-line small{display:block;color:#929bb6;margin-bottom:3px}.zstream-contact-line strong{font-weight:700}.zstream-contact-icon{display:flex;width:42px;height:42px;border-radius:12px;align-items:center;justify-content:center;background:rgba(109,99,255,.14);color:#8178ff;font-size:21px}.zstream-contact-socials{padding-top:24px}.zstream-contact-socials h3{color:#fff;margin:0 0 14px}.zstream-contact-socials a{display:inline-flex;align-items:center;gap:8px;margin:0 8px 8px 0;padding:10px 13px;border-radius:10px;background:#414457;color:#fff}.zstream-contact-socials a:hover{background:#5551a5}.zstream-tiktok-icon{font-size:18px;font-weight:900}.zstream-contact-muted{color:#929bb6}.zstream-contact-form{display:grid;gap:15px}.zstream-contact-form label{display:grid;gap:7px;color:#cfd5e7;font-weight:600}.zstream-contact-form input,.zstream-contact-form textarea{width:100%;box-sizing:border-box;border:1px solid #515468;background:#3e4153;color:#fff;border-radius:10px;padding:12px 13px;outline:none}.zstream-contact-form input:focus,.zstream-contact-form textarea:focus{border-color:#6d63ff;box-shadow:0 0 0 3px rgba(109,99,255,.13)}.zstream-contact-submit{border:0;border-radius:10px;padding:13px 18px;background:linear-gradient(135deg,#625bff,#8065ff);color:#fff;font-weight:800;cursor:pointer}.zstream-form-notice{padding:12px 14px;border-radius:10px;margin-bottom:16px}.zstream-form-notice.success{background:rgba(57,196,112,.14);color:#86e7aa;border:1px solid rgba(57,196,112,.26)}.zstream-form-notice.error{background:rgba(255,76,91,.13);color:#ff9ba3;border:1px solid rgba(255,76,91,.25)}.zstream-honeypot{position:absolute!important;left:-9999px!important;opacity:0!important}
.zstream-news-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}.zstream-news-card{overflow:hidden;border-radius:16px;background:#353748;border:1px solid rgba(255,255,255,.07);display:grid;grid-template-columns:190px minmax(0,1fr);min-height:190px}.zstream-news-image{display:block;background:#282a37;min-height:190px}.zstream-news-image img{width:100%;height:100%;object-fit:cover;display:block}.zstream-news-body{padding:19px;display:flex;flex-direction:column}.zstream-news-meta{display:flex;justify-content:space-between;gap:10px;align-items:center;color:#8f98b5;font-size:12px;margin-bottom:10px}.zstream-news-meta span{color:#8178ff;font-weight:800}.zstream-news-card h2{font-size:18px;line-height:1.35;margin:0 0 9px}.zstream-news-card h2 a{color:#fff}.zstream-news-card h2 a:hover{color:#8178ff}.zstream-news-card p{color:#aeb6ce;line-height:1.55;margin:0 0 14px;font-size:14px}.zstream-news-read{margin-top:auto;color:#8e87ff;font-weight:700;font-size:13px}.zstream-news-empty{text-align:center;padding:60px 20px;background:#353748;border-radius:16px;color:#aeb6ce}.zstream-news-empty i{font-size:42px;color:#6d63ff}.zstream-news-empty h2{color:#fff}.zstream-news-disclaimer{margin-top:28px;color:#848da8;font-size:12px;line-height:1.6}
body:not(.dark) .zstream-contact-card,body:not(.dark) .zstream-news-card,body:not(.dark) .zstream-news-empty{background:#fff;border-color:#e7e9f1}body:not(.dark) .zstream-contact-hero h1,body:not(.dark) .zstream-news-header h1,body:not(.dark) .zstream-contact-card h2,body:not(.dark) .zstream-contact-socials h3,body:not(.dark) .zstream-news-card h2 a,body:not(.dark) .zstream-news-empty h2{color:#25283a}body:not(.dark) .zstream-contact-line{color:#25283a;border-bottom-color:#eceef5}body:not(.dark) .zstream-contact-form input,body:not(.dark) .zstream-contact-form textarea{background:#f5f6fa;border-color:#dedfeb;color:#25283a}
@media(max-width:900px){.zstream-contact-grid{grid-template-columns:1fr}.zstream-news-grid{grid-template-columns:1fr}.zstream-news-card{grid-template-columns:160px minmax(0,1fr)}}@media(max-width:600px){.zstream-contact-page,.zstream-news-page{padding:35px 0 52px}.zstream-contact-hero h1,.zstream-news-header h1{font-size:29px}.zstream-contact-card{padding:19px}.zstream-news-card{grid-template-columns:1fr}.zstream-news-image{height:190px;min-height:0}.zstream-news-meta{align-items:flex-start;flex-direction:column}.zstream-contact-socials a{display:flex;margin-right:0}}


/* ============================================================
   ZStream — Par mums
   ============================================================ */
.zstream-about-page {
    padding: 42px 0 58px;
}
.zstream-about-shell {
    overflow: hidden;
    border-radius: 24px;
    border: 1px solid rgba(120, 105, 255, .24);
    background:
        radial-gradient(circle at 82% 20%, rgba(98, 81, 255, .12), transparent 34%),
        linear-gradient(135deg, rgba(30, 31, 49, .98), rgba(22, 23, 37, .98));
    box-shadow: 0 24px 70px rgba(0,0,0,.18);
}
.zstream-about-hero {
    position: relative;
    min-height: 660px;
    display: grid;
    grid-template-columns: minmax(0, .88fr) minmax(420px, 1.12fr);
    align-items: stretch;
}
.zstream-about-copy {
    position: relative;
    z-index: 3;
    padding: 54px 24px 46px 48px;
}
.zstream-about-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #7469ff;
    font-weight: 800;
    font-size: 15px;
    margin-bottom: 14px;
}
.zstream-about-copy h1 {
    margin: 0 0 18px;
    font-size: clamp(36px, 4vw, 58px);
    line-height: 1.02;
    color: #fff;
    letter-spacing: -.8px;
}
.zstream-about-copy h1 span {
    display: block;
    margin-top: 7px;
    color: #7d71ff;
}
.zstream-about-lead {
    max-width: 650px;
    margin: 0 0 22px;
    color: #e6e7ef;
    font-size: 18px;
    line-height: 1.7;
}
.zstream-about-text {
    max-width: 690px;
}
.zstream-about-text p {
    margin: 0 0 15px;
    color: #c6c9d8;
    line-height: 1.72;
    font-size: 15px;
}
.zstream-about-callout {
    margin-top: 28px;
    max-width: 690px;
    display: flex;
    align-items: center;
    gap: 17px;
    padding: 18px 20px;
    border: 1px solid rgba(125,113,255,.22);
    border-radius: 16px;
    background: rgba(77, 67, 139, .16);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}
.zstream-about-heart {
    flex: 0 0 auto;
    color: #8a78ff;
    font-size: 48px;
    line-height: 1;
}
.zstream-about-callout strong {
    display: block;
    color: #fff;
    font-size: 19px;
    line-height: 1.25;
}
.zstream-about-callout small {
    display: block;
    margin-top: 5px;
    color: #9f94ff;
    font-size: 14px;
}
.zstream-about-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 11px;
    margin-top: 22px;
}
.zstream-about-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 17px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.05);
    color: #eef0f7 !important;
    font-weight: 700;
    transition: transform .18s ease, background .18s ease;
}
.zstream-about-btn:hover {
    transform: translateY(-2px);
    background: rgba(255,255,255,.09);
}
.zstream-about-btn--primary {
    border-color: transparent;
    background: linear-gradient(135deg, #655dff, #865fff);
}
.zstream-about-visual {
    position: relative;
    min-width: 0;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
.zstream-about-visual::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(90deg, rgba(24,25,40,1) 0%, rgba(24,25,40,.53) 10%, rgba(24,25,40,.05) 34%, rgba(24,25,40,0) 64%),
        linear-gradient(0deg, rgba(21,22,35,.72) 0%, transparent 26%);
    pointer-events: none;
}
.zstream-about-glow {
    position: absolute;
    z-index: 0;
    width: 62%;
    height: 72%;
    left: 26%;
    bottom: 4%;
    border-radius: 50%;
    background: rgba(96, 73, 255, .22);
    filter: blur(70px);
}
.zstream-about-visual img {
    position: absolute;
    z-index: 0;
    inset: 0 0 0 auto;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    filter: drop-shadow(0 10px 28px rgba(0,0,0,.35));
}
.zstream-about-help {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    border-top: 1px solid rgba(255,255,255,.07);
    background: rgba(255,255,255,.05);
}
.zstream-about-help > div {
    padding: 28px 30px 30px;
    background: rgba(20,21,34,.9);
}
.zstream-about-help i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: rgba(116,105,255,.13);
    color: #7c71ff;
    font-size: 22px;
}
.zstream-about-help h2 {
    margin: 13px 0 8px;
    color: #fff;
    font-size: 19px;
}
.zstream-about-help p {
    margin: 0;
    color: #aeb2c3;
    line-height: 1.6;
    font-size: 14px;
}

body:not(.dark) .zstream-about-shell {
    background: linear-gradient(135deg, #f5f5fb, #ececf6);
}
body:not(.dark) .zstream-about-copy h1,
body:not(.dark) .zstream-about-callout strong,
body:not(.dark) .zstream-about-help h2 {
    color: #282a38;
}
body:not(.dark) .zstream-about-lead { color: #505466; }
body:not(.dark) .zstream-about-text p { color: #626679; }
body:not(.dark) .zstream-about-help > div { background: #f8f8fc; }
body:not(.dark) .zstream-about-help p { color: #676b7b; }

@media (max-width: 980px) {
    .zstream-about-page { padding-top: 28px; }
    .zstream-about-hero {
        display: flex;
        flex-direction: column;
        min-height: auto;
    }
    .zstream-about-copy {
        padding: 34px 28px 12px;
    }
    .zstream-about-visual {
        min-height: 430px;
        order: 2;
    }
    .zstream-about-visual::before {
        background:
            linear-gradient(180deg, rgba(24,25,40,.95) 0%, rgba(24,25,40,.32) 18%, transparent 40%),
            linear-gradient(0deg, rgba(21,22,35,.7) 0%, transparent 30%);
    }
    .zstream-about-help {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 600px) {
    .zstream-about-page { padding: 18px 0 34px; }
    .zstream-about-shell { border-radius: 18px; }
    .zstream-about-copy { padding: 28px 20px 8px; }
    .zstream-about-copy h1 { font-size: 38px; }
    .zstream-about-lead { font-size: 16px; }
    .zstream-about-text p { font-size: 14px; }
    .zstream-about-callout { padding: 15px; }
    .zstream-about-heart { font-size: 40px; }
    .zstream-about-callout strong { font-size: 17px; }
    .zstream-about-visual {
        min-height: 330px;
    }
    .zstream-about-visual img {
        object-position: 53% center;
    }
    .zstream-about-help > div { padding: 24px 22px; }
}


/* ============================================================
   2026-09 mobile episode filters + alphabet filter + season colors
   ============================================================ */
.animelist-card[hidden] {
  display: none !important;
}

.season-color-list .season-color-name {
  font-weight: 600;
  transition: filter .2s, opacity .2s;
  text-shadow: 0 1px 2px rgba(0,0,0,.28);
}
.season-color-list li a:hover .season-color-name {
  filter: brightness(1.22);
  opacity: 1;
}

@media (max-width: 600px) {
  .episode-number-toolbar,
  .episodeflex-sidebar .episode-number-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    align-items: start;
    gap: 8px;
  }

  .episode-filter-dropdown,
  .episodeflex-sidebar .episode-filter-dropdown {
    width: 100%;
    min-width: 0;
    flex: none;
  }

  .episode-filter-dropdown--type,
  .episodeflex-sidebar .episode-filter-dropdown--type {
    grid-column: 1;
  }

  .episode-filter-dropdown--range,
  .episodeflex-sidebar .episode-filter-dropdown--range {
    grid-column: 2;
  }

  .episode-number-search,
  .episodeflex-sidebar .episode-number-search {
    grid-column: 1 / -1;
    min-width: 0;
    width: 100%;
    flex: none;
  }

  /* On phones the SUB/DUB menu participates in layout instead of
     floating over the share block, so all three choices stay visible. */
  .episode-filter-dropdown--type .episode-filter-menu,
  .episodeflex-sidebar .episode-filter-dropdown--type .episode-filter-menu {
    position: static;
    width: 100%;
    min-width: 0;
    max-width: none;
    margin-top: 6px;
    max-height: none;
  }

  .episode-filter-dropdown--type .episode-filter-option,
  .episodeflex-sidebar .episode-filter-dropdown--type .episode-filter-option {
    min-height: 42px;
    padding: 10px 12px;
    font-size: 13px;
  }

  body.single-post .share-friends-bar {
    margin-top: 34px;
  }
}


/* ============================================================
   2026-09-01 light/dark + guest/member visual audit fixes
   ============================================================ */

/* Catalog cards: keep the light theme white, but add enough contrast that
   the cards remain visible on phones. Applies equally to guests/members. */
body:not(.dark) .achlist li a {
  background: #eef2f6;
  border: 1px solid #e0e6ed;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85), 0 1px 2px rgba(30,41,59,.04);
  border-radius: 2px;
}
body:not(.dark) .achlist li a:hover {
  background: #e5eaf1;
  border-color: #d4dbe5;
}
body:not(.dark) .achlist li a span {
  color: #a7adb7;
}

/* Keep genre + season text colours visible in both login states and themes. */
.genre-color-list .genre-color-name,
.season-color-list .season-color-name {
  opacity: 1 !important;
  font-weight: 700;
}
body:not(.dark) .genre-color-list .genre-color-name,
body:not(.dark) .season-color-list .season-color-name {
  filter: saturate(1.28) brightness(.82);
  text-shadow: 0 1px 1px rgba(255,255,255,.6), 0 1px 2px rgba(15,23,42,.08);
}
.dark .genre-color-list .genre-color-name,
.dark .season-color-list .season-color-name {
  filter: saturate(1.05) brightness(1.04);
}

/* Spotlight title must stay readable even in the light site theme. The old
   generic .content h2 rule was overriding the white slider title. */
.content .spotlight-title,
body:not(.dark) .content .spotlight-title,
.dark .content .spotlight-title {
  color: #fff !important;
  text-shadow: 0 2px 5px rgba(0,0,0,.92), 0 4px 16px rgba(0,0,0,.68) !important;
}
.content .spotlight-season,
body:not(.dark) .content .spotlight-season {
  color: rgba(255,255,255,.96) !important;
  text-shadow: 0 2px 7px rgba(0,0,0,.9);
}
body:not(.dark) .spotlight-gradient {
  background: linear-gradient(to top, rgba(0,0,0,.92) 0%, rgba(0,0,0,.40) 48%, rgba(0,0,0,.08) 100%);
}

/* Light player/server controls: slightly darker surfaces to avoid controls
   blending into the white page. */
body:not(.dark) .sub-mirror-dropdown__trigger,
body:not(.dark) .dub-mirror-dropdown__trigger,
body:not(.dark) .sub-mirror-dropdown__item,
body:not(.dark) .dub-mirror-dropdown__item,
body:not(.dark) .episode-filter-trigger,
body:not(.dark) .episode-number-search {
  background: #e9eef4;
  border-color: #dbe2ea;
  color: #5f6670;
}
body:not(.dark) .sub-mirror-dropdown__menu,
body:not(.dark) .dub-mirror-dropdown__menu,
body:not(.dark) .episode-filter-menu {
  background: #f4f6f9;
  border-color: #dbe2ea;
}
body:not(.dark) .episode-filter-option:hover,
body:not(.dark) .episode-filter-option.is-selected {
  background: #e4e9f0;
  color: #655cf0;
}

@media (max-width: 600px) {
  /* On phones use a predictable overlay for the type filter, then reserve
     matching space in the toolbar while it is open. This prevents the menu
     from touching/being covered by the share block in either theme. */
  .episode-number-toolbar,
  .episodeflex-sidebar .episode-number-toolbar {
    overflow: visible;
  }

  .episode-filter-dropdown--type .episode-filter-menu,
  .episodeflex-sidebar .episode-filter-dropdown--type .episode-filter-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    width: 190px;
    min-width: 190px;
    max-width: min(230px, calc(100vw - 64px));
    margin-top: 0;
    max-height: 180px;
    z-index: 260;
  }

  .episode-number-toolbar.has-open-type-filter,
  .episodeflex-sidebar .episode-number-toolbar.has-open-type-filter {
    margin-bottom: 142px;
  }

  body.single-post .share-friends-bar {
    position: relative;
    z-index: 1;
    clear: both;
    margin-top: 26px;
  }

  /* Streaming SUB/DUB language menus get visible borders and room in light
     mode as well, without changing their dark-theme layout. */
  .sub-mirror-dropdown,
  .dub-mirror-dropdown {
    width: 100%;
    min-width: 0;
  }
  .sub-mirror-dropdown__menu,
  .dub-mirror-dropdown__menu {
    border: 1px solid rgba(99,102,241,.16);
  }
}


/* =========================================================
 * 2026-09-01 — comment/message composer polish + light/dark audit
 * ========================================================= */
#commentform .logged-in-as { display: none !important; }

.zstream-comment-editor textarea,
.zstream-message-editor textarea {
  width: 100%;
  box-sizing: border-box;
  min-height: 150px;
  padding: 14px 15px;
  border: 1px solid #dfe2ec;
  border-radius: 11px;
  background: #f7f9fc;
  color: #404352;
  font: inherit;
  line-height: 1.55;
  outline: none;
  resize: vertical;
}
.zstream-comment-editor textarea:focus,
.zstream-message-editor textarea:focus {
  border-color: #7169ff;
  box-shadow: 0 0 0 3px rgba(113,105,255,.12);
}

.zstream-comment-compose-actions,
.zstream-message-compose-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid #e4e6ee;
}
.zstream-comment-compose-actions .zstream-comment-tools,
.zstream-message-compose-actions .zstream-comment-tools {
  flex: 1 1 auto;
  margin: 0;
}
.zstream-comment-tool {
  min-height: 39px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 10px;
  border: 1px solid #dfe2ec;
  border-radius: 9px;
  background: #f5f7fb;
  color: #64697c;
  box-shadow: none;
}
.zstream-tool-icon { font-size: 16px; line-height: 1; }
.zstream-tool-icon--text { font-size: 11px; font-weight: 900; letter-spacing: .2px; }

#respond #commentform .zstream-comment-compose-actions p.form-submit {
  width: auto;
  float: none;
  margin: 0;
  padding: 0;
  flex: 0 0 auto;
}
#respond #commentform .zstream-comment-compose-actions input#submit {
  width: auto;
  min-width: 165px;
  margin: 0;
  padding: 11px 16px;
  border: 0;
  border-radius: 9px;
  background: linear-gradient(135deg,#625bff,#7866ff);
  color: #fff;
  box-shadow: 0 7px 18px rgba(98,91,255,.18);
}

.zstream-message-compose-actions .zstream-member-submit {
  flex: 0 0 auto;
  margin: 0;
  min-width: 120px;
}

/* Comment action buttons must never inherit the global site footer background. */
.zstream-comment-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 11px;
  padding: 0;
  background: transparent !important;
  color: inherit;
}
.zstream-comment-actions .comment-reply-link,
.zstream-private-message-link {
  border: 1px solid #dedff0;
  background: #f2f2fb;
  color: #625ff1 !important;
  box-shadow: none;
  transition: background .18s ease,border-color .18s ease,transform .18s ease;
}
.zstream-comment-actions .comment-reply-link:hover,
.zstream-private-message-link:hover {
  transform: translateY(-1px);
  border-color: #bdbafc;
  background: #e9e8ff;
}

.zstream-message-reader-body .zstream-comment-media {
  max-width: min(100%,520px);
}

.dark .zstream-comment-editor textarea,
.dark .zstream-message-editor textarea {
  border-color: #4b4e61;
  background: #343746;
  color: #eef0f7;
}
.dark .zstream-comment-compose-actions,
.dark .zstream-message-compose-actions {
  border-top-color: #484b5d;
}
.dark .zstream-comment-tool {
  border-color: #4b4e61;
  background: #3a3d4d;
  color: #d5d8e4;
}
.dark .zstream-comment-tool:hover {
  border-color: #7770ff;
  background: #424558;
  color: #fff;
}
.dark .zstream-comment-actions .comment-reply-link,
.dark .zstream-private-message-link {
  border-color: #4a4d61;
  background: #3a3d50;
  color: #938cff !important;
}
.dark .zstream-comment-actions .comment-reply-link:hover,
.dark .zstream-private-message-link:hover {
  border-color: #6f69d9;
  background: #42455a;
}

@media (max-width: 620px) {
  .zstream-comment-compose-actions,
  .zstream-message-compose-actions {
    gap: 8px;
  }
  .zstream-comment-compose-actions .zstream-comment-tools,
  .zstream-message-compose-actions .zstream-comment-tools {
    flex-wrap: nowrap;
    gap: 5px;
  }
  .zstream-comment-tool {
    width: 40px;
    min-width: 40px;
    height: 40px;
    min-height: 40px;
    padding: 0;
  }
  .zstream-comment-tool .zstream-tool-label { display: none; }
  .zstream-tool-icon { font-size: 18px; }
  .zstream-tool-icon--text { font-size: 10px; }
  #respond #commentform .zstream-comment-compose-actions input#submit {
    min-width: 138px;
    padding: 11px 12px;
    font-size: 12px;
  }
  .zstream-message-compose-actions .zstream-member-submit {
    min-width: 108px;
    padding-left: 12px;
    padding-right: 12px;
  }
}

@media (max-width: 390px) {
  .zstream-comment-compose-actions,
  .zstream-message-compose-actions { align-items: stretch; }
  .zstream-comment-tool { width: 37px; min-width: 37px; height: 38px; min-height: 38px; }
  #respond #commentform .zstream-comment-compose-actions input#submit { min-width: 118px; font-size: 11px; }
}


/* =========================================================
 * 2026-09-01 — mobile Sub/Dub spacing + anonymous guest form
 * ========================================================= */

/* Defensive fallback: if WordPress or a plugin re-injects the stock identity
   fields, keep the public guest form intentionally anonymous. */
#respond .zstream-comment-form .comment-form-author,
#respond .zstream-comment-form .comment-form-email,
#respond .zstream-comment-form .comment-form-url,
#respond .zstream-comment-form .comment-form-cookies-consent,
#respond .zstream-comment-form .comment-notes {
  display: none !important;
}

@media (max-width: 600px) {
  /* The type menu is 3 rows tall. Reserve extra space below it so the next
     section (Vairāk sezonu / characters / share) never visually touches it. */
  .episode-number-toolbar.has-open-type-filter,
  .episodeflex-sidebar .episode-number-toolbar.has-open-type-filter {
    margin-bottom: 184px;
  }

  /* Add a little breathing room after the episode filter section regardless
     of login state and in both light/dark themes. */
  .episode-number-section {
    padding-bottom: 8px;
  }
  .episode-number-section + .more-seasons-section {
    margin-top: 22px;
  }
}

/* ============================================================
   2026-09-01 — final guest comments + mobile filter flow fix
   ============================================================ */

/* The public comment form is intentionally anonymous. These selectors are a
   final fallback in case a plugin injects WordPress' stock identity fields. */
#respond .comment-form-author,
#respond .comment-form-email,
#respond .comment-form-url,
#respond .comment-form-cookies-consent,
#respond .comment-notes,
#respond .logged-in-as {
  display: none !important;
}

/* Never let a semantic/global footer rule paint the comment action row dark. */
.zstream-comment-card .zstream-comment-actions,
.zstream-comment-card footer.zstream-comment-actions,
body:not(.dark) .zstream-comment-card .zstream-comment-actions,
body:not(.dark) .zstream-comment-card footer.zstream-comment-actions {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  min-height: 0 !important;
}
body:not(.dark) .zstream-comment-actions .comment-reply-link,
body:not(.dark) .zstream-private-message-link {
  background: #f1f1fb !important;
  border-color: #dedff0 !important;
  color: #625ff1 !important;
}

@media (max-width: 600px) {
  /* Let the opened Sub/Dub menu become part of the grid flow. This makes the
     toolbar grow naturally and pushes Vairāk sezonu / share / characters down. */
  .episode-filter-dropdown--type .episode-filter-menu,
  .episodeflex-sidebar .episode-filter-dropdown--type .episode-filter-menu {
    position: static !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    max-height: none !important;
    margin: 7px 0 0 !important;
    z-index: auto !important;
  }

  .episode-number-toolbar.has-open-type-filter,
  .episodeflex-sidebar .episode-number-toolbar.has-open-type-filter {
    margin-bottom: 22px !important;
  }

  .episode-number-section + .more-seasons-section,
  .episode-number-section + .characters-voice-section,
  body.single-post .share-friends-bar {
    margin-top: 28px !important;
  }

  /* Keep the submit row compact and usable for both guest/member, light/dark. */
  .zstream-comment-compose-actions {
    margin-top: 14px;
    padding-top: 12px;
    flex-wrap: nowrap;
  }
}


/* ============================================================
   2026-09-01 — guest-cache-safe mobile episode layout
   ============================================================ */
/* Strong logged-out fallback. The test host had been serving an older cached
   stylesheet/page to guests while members bypassed that cache. Keep these
   rules deliberately explicit and extend the breakpoint so phone browser zoom
   cannot fall just outside the earlier 600px query. */
@media (max-width: 900px) {
  body:not(.logged-in) .episode-number-toolbar,
  body:not(.logged-in) .episodeflex-sidebar .episode-number-toolbar {
    display: grid !important;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr) !important;
    align-items: start !important;
    gap: 8px !important;
    overflow: visible !important;
  }

  body:not(.logged-in) .episode-filter-dropdown,
  body:not(.logged-in) .episodeflex-sidebar .episode-filter-dropdown {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    flex: none !important;
  }

  body:not(.logged-in) .episode-filter-dropdown--type,
  body:not(.logged-in) .episodeflex-sidebar .episode-filter-dropdown--type {
    grid-column: 1 !important;
    align-self: start !important;
  }

  body:not(.logged-in) .episode-filter-dropdown--range,
  body:not(.logged-in) .episodeflex-sidebar .episode-filter-dropdown--range {
    grid-column: 2 !important;
    align-self: start !important;
  }

  body:not(.logged-in) .episode-number-search,
  body:not(.logged-in) .episodeflex-sidebar .episode-number-search {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    flex: none !important;
  }

  body:not(.logged-in) .episode-filter-dropdown--type .episode-filter-menu,
  body:not(.logged-in) .episodeflex-sidebar .episode-filter-dropdown--type .episode-filter-menu {
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    max-height: none !important;
    margin: 8px 0 0 !important;
    z-index: auto !important;
    box-sizing: border-box !important;
  }

  body:not(.logged-in) .episode-number-toolbar.has-open-type-filter,
  body:not(.logged-in) .episodeflex-sidebar .episode-number-toolbar.has-open-type-filter {
    margin-bottom: 30px !important;
  }

  body:not(.logged-in) .episode-number-section + .more-seasons-section,
  body:not(.logged-in) .episode-number-section + .characters-voice-section,
  body:not(.logged-in).single-post .share-friends-bar {
    margin-top: 34px !important;
    clear: both !important;
  }
}

/* Guest identity fields must remain absent even if a cached/plugin fallback
   tries to inject core comment-form markup. */
body:not(.logged-in) #respond .comment-form-author,
body:not(.logged-in) #respond .comment-form-email,
body:not(.logged-in) #respond .comment-form-url,
body:not(.logged-in) #respond .comment-form-cookies-consent,
body:not(.logged-in) #respond .comment-notes,
body:not(.logged-in) #respond .logged-in-as {
  display: none !important;
}

/* ============================================================
   2026-09-01 — desktop short-page footer fill
   Keep the footer attached to the bottom of the viewport on short desktop
   pages (genres / seasons / advanced search) without changing the mobile
   layout. The footer itself grows into any spare viewport space, so the
   light theme never leaves a white strip below it. Logged-in and guest views
   share the same rule; dark mode keeps the existing footer palette.
   ============================================================ */
@media (min-width: 769px) {
  html {
    min-height: 100%;
  }

  body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
  }

  body > .header,
  body > main,
  body > .ads {
    flex: 0 0 auto;
    width: 100%;
  }

  body > footer {
    flex: 1 0 auto;
    width: 100%;
    box-sizing: border-box;
  }
}


/* ============================================================
   2026-09-01 — balanced desktop footer on Genre / Season lists
   The previous short-page fix correctly filled the viewport, but the footer
   widgets stayed pinned to the top of the expanded area. On these two catalog
   pages only, distribute the expanded footer vertically and centre the link
   widgets in the available footer body. Mobile and all other pages stay as-is.
   ============================================================ */
@media (min-width: 769px) {
  body.zstream-genre-list-page > footer,
  body.zstream-season-list-page > footer {
    display: flex;
    flex-direction: column;
  }

  body.zstream-genre-list-page > footer > .footertop,
  body.zstream-season-list-page > footer > .footertop,
  body.zstream-genre-list-page > footer > .copyright,
  body.zstream-season-list-page > footer > .copyright {
    flex: 0 0 auto;
  }

  body.zstream-genre-list-page > footer > .footerbody,
  body.zstream-season-list-page > footer > .footerbody {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    padding-top: 34px;
    padding-bottom: 34px;
    box-sizing: border-box;
  }

  body.zstream-genre-list-page > footer > .footerbody > .container,
  body.zstream-season-list-page > footer > .footerbody > .container {
    width: 100%;
  }
}

/* ============================================================
   2026-09-01 — Genre / Season footer: match Anime List desktop
   Keep the footer itself at its normal compact height, exactly like the
   Anime List page. Any spare viewport height belongs to the page content
   above the footer, not to the dark footer body.
   ============================================================ */
@media (min-width: 769px) {
  body.zstream-genre-list-page > main,
  body.zstream-season-list-page > main {
    flex: 1 0 auto !important;
    width: 100% !important;
  }

  body.zstream-genre-list-page > footer,
  body.zstream-season-list-page > footer {
    flex: 0 0 auto !important;
    display: block !important;
    width: 100% !important;
    margin-top: 20px !important;
  }

  body.zstream-genre-list-page > footer > .footertop,
  body.zstream-season-list-page > footer > .footertop,
  body.zstream-genre-list-page > footer > .footerbody,
  body.zstream-season-list-page > footer > .footerbody,
  body.zstream-genre-list-page > footer > .copyright,
  body.zstream-season-list-page > footer > .copyright {
    flex: none !important;
  }

  body.zstream-genre-list-page > footer > .footerbody,
  body.zstream-season-list-page > footer > .footerbody {
    display: block !important;
    min-height: 120px !important;
    padding: 18px 10px 12px !important;
    box-sizing: content-box !important;
  }

  body.zstream-genre-list-page > footer > .footerbody > .container,
  body.zstream-season-list-page > footer > .footerbody > .container {
    width: auto !important;
  }
}

/* Security hardening: off-screen honeypot fields for bot detection. */
.zstream-security-honeypot {
  position: absolute !important;
  left: -10000px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Personal profile banners */
.zstream-profile-banner{margin:22px 0 0;overflow:hidden;border-radius:14px;background:#1b2030;aspect-ratio: 15 / 4;max-height:360px}
.zstream-profile-banner-image{display:block;width:100%;height:100%;object-fit:cover}
.zstream-profile-banner-editor{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:20px 0;padding:18px;border:1px solid #e5e8f0;border-radius:14px}
.zstream-profile-banner-editor>strong{width:100%;font-size:16px}
.zstream-profile-banner-editor>span{width:100%;font-size:13px}
.dark .zstream-profile-banner-editor{border-color:#373d4c}


/* Content / age rating badges */
.zstream-content-rating-badge{display:inline-flex;align-items:center;justify-content:center;min-width:54px;min-height:28px;padding:5px 10px;border-radius:999px;background:rgba(7,11,25,.88);border:1px solid rgba(255,255,255,.14);box-shadow:0 10px 26px rgba(0,0,0,.22);color:#8fd0ff;font-weight:900;font-size:12px;line-height:1;letter-spacing:.03em}
.zstream-content-rating-badge__code{display:block}
.zstream-content-rating-badge.is-overlay{position:absolute;left:4px;bottom:4px;z-index:2}
.flexbox-thumb .zstream-content-rating-badge.is-overlay{left:4px;bottom:4px}
.flexbox2-rating,.flexbox3-rating{margin:10px 0 0}
.series-content-rating{display:flex;align-items:center;justify-content:center;gap:10px;margin:10px 0 12px;padding:10px 12px;border-radius:18px;background:#f7fafc}
.series-content-rating__text{font-size:13px;font-weight:700;color:#667085;line-height:1.4}
.flexbox2-side .type,.flexbox3-side .type,.series-infoz.block span.type{position:relative}
.flexbox2-side .type + .flexbox2-rating{margin-top:10px;padding:0 10px}
.flexbox3-rating .zstream-content-rating-badge{min-height:24px;font-size:11px;padding:4px 9px}
.dark .series-content-rating{background:#343646}
.dark .series-content-rating__text{color:#c6cede}
.dark .zstream-content-rating-badge{background:rgba(10,13,24,.92);border-color:rgba(255,255,255,.12)}

/* Add color support for newer content types and statuses */
.flexbox-type.Anime,.flexbox2-side .type.Anime,.series-infoz.block span.type.Anime{color:#8b7cff;background:#f0eeff}
.flexbox-type.Animation,.flexbox2-side .type.Animation,.series-infoz.block span.type.Animation{color:#3bb6cc;background:#e8fbff}
.flexbox-type.Live\ Action,.flexbox2-side .type.Live\ Action,.series-infoz.block span.type.Live\ Action{color:#57a96b;background:#ebfff0}
.flexbox-status.Upcoming,.series-infoz.block span.status.Upcoming{color:#f5c85d;background:#5b4a1c}
.dark .flexbox2-side .type.Anime,.dark .series-infoz.block span.type.Anime{background:#5346a9;color:#fff}
.dark .flexbox2-side .type.Animation,.dark .series-infoz.block span.type.Animation{background:#1f7080;color:#fff}
.dark .flexbox2-side .type.Live\ Action,.dark .series-infoz.block span.type.Live\ Action{background:#28553a;color:#fff}

/* Support page payment options */
.zstream-supporter-method-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:18px}
.zstream-supporter-method-card{display:flex;flex-direction:column;justify-content:space-between;padding:18px;border-radius:16px;border:1px solid #e7e9f0;background:#f9fafc;box-shadow:0 8px 22px rgba(31,36,55,.04)}
.zstream-supporter-method-head h3{margin:12px 0 8px;color:#303548;font-size:20px}.zstream-supporter-method-head p{margin:0;color:#818a9d;line-height:1.65}
.zstream-supporter-method-badge{display:inline-flex;align-items:center;gap:7px;padding:7px 11px;border-radius:999px;font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
.zstream-supporter-method-badge.is-card{background:rgba(110,109,251,.11);color:#6e6dfb}
.zstream-supporter-method-badge.is-patreon{background:rgba(255,90,95,.12);color:#ff5a5f}
.dark .zstream-supporter-method-card{background:#343646;border-color:#45485b}.dark .zstream-supporter-method-head h3{color:#f4f5fa}.dark .zstream-supporter-method-head p{color:#aeb6c8}
@media(max-width:760px){.zstream-supporter-method-grid{grid-template-columns:1fr}}

/* Unified age and upcoming labels across ALL cards */
.soraplay-card-badges{position:absolute;z-index:6;display:flex;flex-wrap:wrap;gap:4px;align-items:center;pointer-events:none;left:6px;bottom:6px;right:6px}
.soraplay-card-badges span{display:inline-flex;align-items:center;justify-content:center;border-radius:8px;padding:5px 8px;font-size:11px;font-weight:800;line-height:1.2;box-shadow:0 2px 8px #0007}
.soraplay-card-rating{color:#94d9ff;background:rgba(13,18,35,.93);border:1px solid #82cbff44}
.soraplay-card-upcoming{background:#9b7924;color:#fff5c5;border:1px solid #f0c86255}
.flexbox-thumb,.flexbox2-thumb,.animelist-card__thumb{position:relative}
.soraplay-card-badges.is-recent{bottom:6px;right:55px}
.soraplay-card-badges.is-recent:has(.soraplay-card-upcoming){right:6px}
.flexbox-status.Upcoming{display:none!important}
.soraplay-card-badges.is-info{bottom:6px;right:6px}
.soraplay-card-badges.is-catalog{bottom:6px;right:6px}
.soraplay-top-page{padding:28px 0 60px}.soraplay-top-page h1{color:inherit;font-size:32px;margin:0 0 22px}
.soraplay-top-filters{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:26px}
.soraplay-top-filters a{color:#a7aabd;background:#1c1d2a;border:1px solid #575866;border-radius:12px;padding:11px 15px;font-weight:750;text-decoration:none}
.soraplay-top-filters a.is-active{border-color:#8b79ff;background:#6154c5;color:#fff}
.soraplay-top-list{display:grid;gap:12px;max-width:850px}.soraplay-top-item{display:grid;grid-template-columns:32px 80px minmax(0,1fr) auto;gap:14px;align-items:center;padding:10px;border-radius:12px;background:rgba(135,137,170,.10)}
.soraplay-top-rank{color:#a29cff;font-size:21px;font-weight:800;text-align:center}.soraplay-top-item img{width:80px;height:108px;object-fit:cover;border-radius:8px}
.soraplay-top-detail{min-width:0}.soraplay-top-detail a{color:inherit;font-size:17px;font-weight:800}.soraplay-top-detail small{display:block;margin-top:8px;color:#a3a6b7}.soraplay-top-score{color:#ffca4d;font-size:19px;font-weight:800;white-space:nowrap}
@media(max-width:550px){.soraplay-top-item{grid-template-columns:24px 60px minmax(0,1fr) auto;gap:9px}.soraplay-top-item img{width:60px;height:85px}.soraplay-top-detail a{font-size:14px}.soraplay-top-score{font-size:15px}.soraplay-top-page h1{font-size:26px}}
.soraplay-top-detail .soraplay-card-badges{position:static;margin-top:7px;display:flex;max-width:100%}

.flexbox3-rating .soraplay-card-badges{position:static;display:flex;right:auto;left:auto;bottom:auto;flex-wrap:wrap;max-width:100%}

/* Independent metadata row: age and upcoming labels must never overlap cards. */
.soraplay-card-badges,.soraplay-card-badges.is-recent,.soraplay-card-badges.is-popular,.soraplay-card-badges.is-catalog,.soraplay-card-badges.is-info,.soraplay-card-badges.is-alt,.soraplay-card-badges.is-top,.soraplay-top-detail .soraplay-card-badges,.flexbox3-rating .soraplay-card-badges{position:static!important;inset:auto!important;display:flex!important;flex-wrap:wrap;align-items:center;gap:5px;width:100%;max-width:100%;height:auto;margin:7px 0 4px;padding:0 2px;box-sizing:border-box;z-index:auto;}
.soraplay-card-badges:empty{display:none!important}.soraplay-card-badges span{position:static!important;max-width:100%;box-sizing:border-box}.flexbox-item>a>.soraplay-card-badges{padding:0 10px;margin:7px 0 2px}.animelist-card>.soraplay-card-badges{padding:0 2px;margin:8px 0 5px}.flexbox2-side>.soraplay-card-badges{padding:0 10px;margin:8px 0}.flexbox3-rating .soraplay-card-badges{margin:0}.flexbox-thumb .badge-group,.animelist-card__meta{z-index:3}


/* --- SoraPlay badge placement refresh: keep PG-13 / Drīzumā near poster, not over text or sub/dub --- */
.flexbox-item > a,
.animelist-card,
.flexbox2-thumb,
.flexbox-thumb,
.animelist-card__thumb { position: relative; }

/* Base chip style */
.soraplay-card-badges {
  position: absolute !important;
  left: 10px !important;
  right: auto !important;
  bottom: 10px !important;
  display: flex !important;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  width: auto !important;
  max-width: calc(100% - 20px);
  height: auto;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box;
  z-index: 7;
  pointer-events: none;
}
.soraplay-card-badges span {
  position: static !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  box-sizing: border-box;
}
/* Grid cards: place chip at poster lower-left but ABOVE existing bottom overlays */
.flexbox-thumb > .soraplay-card-badges.is-popular { bottom: 44px !important; }
.flexbox-thumb > .soraplay-card-badges.is-recent { bottom: 46px !important; }
.animelist-card__thumb > .soraplay-card-badges.is-catalog { bottom: 40px !important; left: 8px !important; }

/* Horizontal cards: chip sits on poster, above title overlay */
.flexbox2-thumb > .soraplay-card-badges.is-info { bottom: 52px !important; left: 10px !important; }

/* Alternate recent-updated cards keep badges in the info column */
.flexbox3-rating .soraplay-card-badges,
.soraplay-top-detail .soraplay-card-badges {
  position: static !important;
  inset: auto !important;
  display: flex !important;
  width: auto !important;
  max-width: 100%;
  margin: 8px 0 0 !important;
  padding: 0 !important;
  z-index: auto;
}

/* Prevent old generic rules from forcing catalog / grid chips into normal flow */
.flexbox-item > a > .soraplay-card-badges,
.animelist-card > .soraplay-card-badges,
.flexbox2-side > .soraplay-card-badges { padding: 0 !important; margin: 0 !important; }

/* keep title spacing natural */
.flexbox-title { margin-top: 10px; }
.animelist-card__title { margin-top: 10px; }

@media (max-width: 640px) {
  .flexbox-thumb > .soraplay-card-badges.is-popular,
  .flexbox-thumb > .soraplay-card-badges.is-recent { bottom: 42px !important; }
  .animelist-card__thumb > .soraplay-card-badges.is-catalog { bottom: 38px !important; }
  .flexbox2-thumb > .soraplay-card-badges.is-info { bottom: 48px !important; }
}

/* The age classification feature has been removed; keep scores and show status in their normal UI. */
.zstream-content-rating-badge,.series-content-rating,.soraplay-card-rating{display:none!important}


/* SoraPlay home redesign 2026-10: independent labels / clean consistent responsive cards. */
.soraplay-info-badges { display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin:8px 10px 0; padding:0; position:static!important; height:auto; line-height:1.3; }
.soraplay-info-badges span {display:inline-flex; align-items:center; justify-content:center; padding:5px 9px; border-radius:7px; font-size:11px; font-weight:800; letter-spacing:.02em; white-space:nowrap; box-sizing:border-box;}
.soraplay-info-badges .soraplay-age {color:#8cd8ff; border:1px solid rgba(146,207,255,.53); background:#101725;}
.soraplay-info-badges .soraplay-upcoming {color:#ffdf89; border:1px solid rgba(249,210,99,.4); background:#41351e;}
.soraplay-info-badges.is-info,.soraplay-info-badges.is-alt,.soraplay-info-badges.is-detail {margin:8px 10px;}
.soraplay-info-badges.is-catalog {margin:8px 1px 0;}
.flexbox-item > a {display:flex; flex-direction:column; min-height:100%;}
.flexbox-item .flexbox-thumb {width:calc(100% - 20px);box-sizing:border-box;}
.popular .flexbox-item,.flexbox .flexbox-item {padding-bottom:12px;}
.popular .flexbox-thumb,.flexbox .flexbox-thumb {border-radius:12px; box-shadow:0 7px 24px rgba(0,0,0,.23);}
.popular .flexbox-thumb img,.flexbox .flexbox-thumb img {display:block;aspect-ratio:2/3;object-fit:cover;}
.flexbox-item .flexbox-title {font-size:14px;line-height:1.42;font-weight:700; margin:9px 10px 3px; min-height:38px; text-wrap:pretty;}
.popular .flexbox-item:hover,.flexbox .flexbox-item:hover {transform:translateY(-2px); transition:transform .2s ease;}
.flexbox2 .flexbox2-item {border-radius:13px;overflow:hidden;box-shadow:0 5px 24px rgba(0,0,0,.15);}
.flexbox2 .flexbox2-content {min-height:100%;}
.flexbox2 .flexbox2-side {min-width:0;}
.flexbox2 .flexbox2-side .type {text-align:center;}
.flexbox2 .flexbox2-side .soraplay-info-badges{padding:0 4px; justify-content:center;}
.flexbox3 .soraplay-info-badges {margin:8px 0;}
.series-info .soraplay-info-badges {justify-content:center; margin:9px 0;}
@media(max-width:720px){
 .flexbox-item .flexbox-title {font-size:13px;min-height:35px;}
 .soraplay-info-badges {margin:6px 9px 0;gap:4px;}
 .soraplay-info-badges span {font-size:10px;padding:4px 7px;}
 .flexbox2 .flexbox2-side .soraplay-info-badges{padding:0 2px;}
}

/* SoraPlay homepage — portrait streaming cards inspired by user's reference. */
.sp-home-section {padding:30px 0 34px;background:#292b39;color:#f5f5fb;}
.sp-home-section.popular{background:#404255;}
.sp-home-section h2{margin:0 0 20px;font-size:23px;line-height:1.35;font-weight:900;color:#f3f3fa;}
.sp-home-section h2 span{color:#7771ff;}
.sp-home-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:18px;align-items:stretch;}
.sp-home-card{min-width:0;background:#171820;border:1px solid rgba(255,255,255,.085);border-radius:15px;overflow:hidden;box-shadow:0 8px 22px rgba(0,0,0,.19);transition:transform .2s ease,border-color .2s ease;}
.sp-home-card:hover{transform:translateY(-3px);border-color:rgba(126,119,255,.4)}
.sp-home-card__link{display:flex;flex-direction:column;height:100%;color:#ececf5;text-decoration:none;}
.sp-home-card__poster{position:relative;aspect-ratio:2/3;overflow:hidden;background:#171821;}
.sp-home-card__poster img{width:100%;height:100%;display:block;object-fit:cover;}
.sp-home-card__poster:after{content:"";position:absolute;inset:50% 0 0;pointer-events:none;background:linear-gradient(transparent,rgba(0,0,0,.45));}
.sp-home-card__rank,.sp-home-card__score,.sp-home-card__episode{position:absolute;z-index:2;font-weight:900;box-shadow:0 2px 10px rgba(0,0,0,.3)}
.sp-home-card__rank{top:9px;left:9px;color:#fff;background:#7065f4;padding:6px 10px;border-radius:9px;font-size:13px;}
.sp-home-card__score{top:9px;right:9px;color:#ffdc66;background:rgba(12,13,21,.88);padding:5px 8px;border-radius:10px;font-size:12px;}
.sp-home-card__episode{bottom:10px;left:8px;right:8px;width:max-content;max-width:calc(100% - 16px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:6px 9px;background:rgba(12,13,21,.88);border-radius:9px;font-size:11px;color:#fff;}
.sp-home-card__details{flex:1;display:flex;flex-direction:column;gap:8px;padding:13px 12px 14px;min-width:0;}
.sp-home-card__title{font-size:14px;line-height:1.4;color:#f6f6fc;font-weight:900;margin:0;min-height:2.8em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.sp-home-card__meta{display:flex;flex-wrap:wrap;align-items:center;gap:5px 9px;font-size:12px;color:#a6a7be;line-height:1.4;}
.sp-home-card__stars{color:#ffcc45;font-weight:900;white-space:nowrap;}
.sp-home-card__type{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
.sp-home-card__chips{display:flex;flex-wrap:wrap;align-items:center;gap:5px;margin-top:auto;padding-top:2px;}
.sp-home-card__chips span{display:inline-flex;align-items:center;font-size:10px;font-weight:800;border-radius:6px;padding:4px 6px;line-height:1.15;white-space:nowrap;}
.sp-home-card__age{color:#79cdff;border:1px solid #89cefa;background:transparent;}
.sp-home-card__upcoming{color:#f5d47c;border:1px solid #93722c;background:rgba(138,106,29,.3);}
.sp-home-card__sub{background:#a6e9b8;color:#111c17;}
.sp-home-card__dub{background:#e5c5e1;color:#302433;}
@media(max-width:1100px){.sp-home-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;}}
@media(max-width:650px){.sp-home-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:13px;}.sp-home-section{padding:24px 0 26px;}.sp-home-section h2{font-size:21px;margin-bottom:15px;}.sp-home-card__details{padding:10px 9px 12px;gap:7px}.sp-home-card__title{font-size:13px}.sp-home-card__meta{font-size:11px}.sp-home-card__chips span{font-size:10px;padding:4px 5px;}}


/* --- SoraPlay archive/catalog cards aligned with homepage poster design --- */
.sp-home-section--catalog { padding-top: 28px; }
.sp-home-grid--archive,
.sp-home-grid--catalog { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px 14px; }
.animelist-card-grid.sp-home-grid { padding: 0 10px 16px; }
.animelist-card.sp-home-card { min-width: 0; scroll-margin-top: 90px; }
.animelist-card.sp-home-card .sp-home-card__title { min-height: 2.8em; }
.animelist-card.sp-home-card .sp-home-card__chips { min-height: 24px; }
.animelist-card.sp-home-card .sp-home-card__poster { border-bottom: 1px solid rgba(255,255,255,.06); }
.animelist-card.sp-home-card .sp-home-card__poster:after { inset: auto 0 0; height: 36%; background: linear-gradient(to top, rgba(7,8,12,.58) 0%, rgba(7,8,12,.18) 65%, rgba(7,8,12,0) 100%); }
.animelist-card.sp-home-card .sp-home-card__counter,
.sp-home-grid--archive .sp-home-card__counter { position: absolute; z-index: 2; bottom: 10px; display: inline-flex; align-items: center; box-shadow: 0 3px 10px rgba(0,0,0,.35); }
.animelist-card.sp-home-card .sp-home-card__sub,
.sp-home-grid--archive .sp-home-card__sub { left: 8px; }
.animelist-card.sp-home-card .sp-home-card__dub,
.sp-home-grid--archive .sp-home-card__dub { left: 58px; }
.animelist-card.sp-home-card .sp-home-card__type-overlay,
.sp-home-grid--archive .sp-home-card__type-overlay { position: absolute; right: 9px; bottom: 10px; z-index: 2; color: #fff; font-size: 11px; font-weight: 600; text-shadow: 0 1px 3px rgba(0,0,0,.9); }
.animelist-card.sp-home-card .sp-home-card__chips .sp-home-card__sub,
.animelist-card.sp-home-card .sp-home-card__chips .sp-home-card__dub,
.sp-home-grid--archive .sp-home-card__chips .sp-home-card__sub,
.sp-home-grid--archive .sp-home-card__chips .sp-home-card__dub { position: static; left: auto; bottom: auto; box-shadow: none; }
@media(max-width:1100px){
  .sp-home-grid--archive,
  .sp-home-grid--catalog { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media(max-width:650px){
  .sp-home-grid--archive,
  .sp-home-grid--catalog { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
  .animelist-card-grid.sp-home-grid { padding: 0 0 16px; }
}


/* Series studio, genre and synopsis restored in the modern poster layout. */
.sp-home-card__extras{display:flex;flex-direction:column;gap:5px;min-width:0;margin:2px 0 4px;color:#b4b6ca;font-size:11px;line-height:1.5;}
.sp-home-card__extras strong{color:#dfe0ef;font-weight:750;}
.sp-home-card__studio,.sp-home-card__genres{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow-wrap:anywhere;}
.sp-home-card__description{color:#a7a9bb;margin:2px 0 0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden;overflow-wrap:anywhere;}
.sp-home-card__chips{margin-top:auto;}
@media(max-width:650px){.sp-home-card__extras{font-size:10px;gap:4px}.sp-home-card__description{-webkit-line-clamp:2;line-clamp:2}.sp-home-card__extras strong{font-weight:700}}


/* SoraPlay — light mode card palette sampled from the user's fourth screenshot.
   Keep dark mode completely unchanged. */
body:not(.dark) .sp-home-section {
  background: #fff;
  color: #263448;
}
body:not(.dark) .sp-home-section.popular {
  background: #f8fafc;
}
body:not(.dark) .sp-home-section h2 {
  color: #293346;
}
body:not(.dark) .sp-home-card {
  background: #eef2f6;
  border: 1px solid #dfe6ed;
  box-shadow: 0 5px 17px rgba(32, 48, 68, .09);
}
body:not(.dark) .sp-home-card:hover {
  border-color: #b9c3e3;
  box-shadow: 0 10px 25px rgba(44, 56, 83, .14);
}
body:not(.dark) .sp-home-card__link {
  color: #243148;
}
body:not(.dark) .sp-home-card__title {
  color: #1c293c;
}
body:not(.dark) .sp-home-card__meta,
body:not(.dark) .sp-home-card__type {
  color: #53647b;
}
body:not(.dark) .sp-home-card__stars {
  color: #a46909;
}
body:not(.dark) .sp-home-card__extras,
body:not(.dark) .sp-home-card__description {
  color: #506078;
}
body:not(.dark) .sp-home-card__extras strong {
  color: #263650;
}
body:not(.dark) .sp-home-card__age {
  background: #e7f5ff;
  color: #16649a;
  border-color: #90c2df;
}
body:not(.dark) .sp-home-card__upcoming {
  background: #fff1cf;
  color: #805600;
  border-color: #e4c775;
}
/* The catalog and upcoming listings share these cards. */
body:not(.dark) .animelist-card.sp-home-card {
  background: #eef2f6;
}


/* SoraPlay — mobile home/card spacing refinement.
   Adds safe horizontal gutters so cards and the hero slider do not sit flush to phone edges. */
@media (max-width: 768px) {
  .spotlight-section {
    width: calc(100% - 24px);
    margin: 12px auto 20px;
    border-radius: 22px;
  }

  .spotlight-content {
    padding-left: 18px;
    padding-right: 18px;
  }

  .home-share-section > .container,
  .sp-home-section > .container,
  .sp-home-section.popular > .container {
    padding-left: 12px;
    padding-right: 12px;
    box-sizing: border-box;
  }

  .sp-home-grid,
  .sp-home-grid--archive,
  .sp-home-grid--catalog {
    gap: 12px;
  }
}

@media (max-width: 650px) {
  .home-share-section > .container,
  .sp-home-section > .container,
  .sp-home-section.popular > .container {
    padding-left: 14px;
    padding-right: 14px;
  }

  .sp-home-section {
    padding-top: 22px;
    padding-bottom: 24px;
  }

  .sp-home-grid,
  .sp-home-grid--archive,
  .sp-home-grid--catalog {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .animelist-card-grid.sp-home-grid {
    padding: 0 0 12px;
  }

  .sp-home-card {
    border-radius: 16px;
  }

  .sp-home-card__poster {
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
  }

  .sp-home-card__details {
    padding: 11px 10px 13px;
  }
}

/* Advanced search: same responsive card grid as SoraPlay homepage. */
.advancedsearch + .sp-search-results{margin-top:18px;margin-bottom:20px}
.sp-search-results .sp-home-card{min-width:0}
@media(max-width:650px){.advancedsearch + .sp-search-results{margin-top:16px}.sp-search-results{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}}


/* SoraPlay: consistent recommendations & more readable DUB counters. */
.sp-home-card__chips .sp-home-card__dub {
  min-width: 39px;
  padding: 5px 9px;
  justify-content: center;
  box-sizing: border-box;
}
.recommended-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  padding: 0 10px;
  align-items: stretch;
}
.recommended-grid > .sp-home-card {
  width: 100%;
  max-width: none;
  min-width: 0;
}
.recommended-grid .sp-home-card__details {
  padding: 12px 12px 14px;
}
.recommended-grid .sp-home-card__poster { aspect-ratio: 2 / 3; }
.recommended-grid .sp-home-card__description { -webkit-line-clamp: 2; line-clamp: 2; }
@media (max-width: 650px) {
  .recommended-grid { gap: 12px; padding: 0 12px; }
  .recommended-grid .sp-home-card__details { padding: 10px 9px 12px; }
  .sp-home-card__chips .sp-home-card__dub { min-width: 36px; padding: 5px 8px; }
}


/* SoraPlay universal compact card layout: homepage, search, genre/year archives,
   catalogue, upcoming, favorites and recommendations. Desktop: six compact cards.
   Tablet: four cards. Phone: two cards with comfortable side gutters. */
.sp-home-grid,
.sp-home-grid--archive,
.sp-home-grid--catalog,
.sp-global-archive-grid,
.animelist-card-grid.sp-home-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  column-gap: 15px;
  row-gap: 20px;
  align-items: stretch;
}
.sp-home-card, .animelist-card.sp-home-card {
  width: 100%;
  min-width: 0;
  max-width: 210px;
  justify-self: center;
}
.sp-home-card__details {
  padding: 11px 10px 12px;
  gap: 6px;
}
.sp-home-card__title {font-size: 13px; line-height: 1.42;}
.sp-home-card__extras {font-size: 10.5px; line-height: 1.45;}
.sp-home-card__description { -webkit-line-clamp: 2; line-clamp: 2; }
.sp-home-card__chips { gap: 5px; }
.sp-home-card__chips span {font-size:10px;}
.sp-global-archive-grid {margin: 18px 0 24px;}
.recommended-grid {grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;padding:0;}
.recommended-grid > .sp-home-card {max-width:210px;}
/* Older episode thumbnails retain their behavior but cannot exceed reasonable widths. */
.content > .container > .flexbox .flexbox-item {max-width: 205px;}
@media (max-width: 1100px) {
  .sp-home-grid,
  .sp-home-grid--archive,
  .sp-home-grid--catalog,
  .sp-global-archive-grid,
  .animelist-card-grid.sp-home-grid {grid-template-columns:repeat(5,minmax(0,1fr));gap:15px;}
  .recommended-grid {grid-template-columns: repeat(3,minmax(0,1fr));}
}
@media (max-width: 850px) {
  .sp-home-grid,
  .sp-home-grid--archive,
  .sp-home-grid--catalog,
  .sp-global-archive-grid,
  .animelist-card-grid.sp-home-grid {grid-template-columns:repeat(4,minmax(0,1fr));gap:13px;}
}
@media (max-width: 650px) {
  /* Header has separate layout; target page content only. */
  main > .content > .container,
  main .content > .container,
  .sp-home-section > .container,
  .sp-home-section.popular > .container {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding-left: 16px;
    padding-right: 16px;
  }
  .sp-home-grid,
  .sp-home-grid--archive,
  .sp-home-grid--catalog,
  .sp-global-archive-grid,
  .animelist-card-grid.sp-home-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:12px;
    row-gap:16px;
    padding-left:0;
    padding-right:0;
  }
  .sp-home-card, .animelist-card.sp-home-card {
    max-width:100%;
    border-radius:14px;
  }
  .sp-home-card__details {padding:9px 9px 11px;gap:6px;}
  .sp-home-card__title {font-size:12px;min-height:2.7em;}
  .sp-home-card__extras {font-size:10px;gap:3px;}
  .sp-home-card__description {-webkit-line-clamp:2;line-clamp:2;}
  .sp-home-card__meta {font-size:10.5px;}
  .sp-home-card__chips span {font-size:9.5px;padding:4px 5px;}
  .sp-home-card__rank {font-size:11px;padding:5px 8px;}
  .sp-home-card__score {font-size:11px;padding:4px 6px;}
  .recommended-grid {grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:0;}
  .recommended-grid > .sp-home-card {max-width:100%;}
  .content > .container > .flexbox .flexbox-item {max-width:100%;}
}
@media (max-width:360px) {
  main .content > .container, .sp-home-section > .container {padding-left:12px;padding-right:12px;}
  .sp-home-grid,.sp-home-grid--archive,.sp-home-grid--catalog,.sp-global-archive-grid,.animelist-card-grid.sp-home-grid {gap:10px;}
}


/* SoraPlay 2026-11: tighter, Yomi-inspired cards without changing poster/card markup.
   Applies to homepage, archives, catalogue, search, upcoming and recommendations. */
.sp-home-grid,
.sp-home-grid--archive,
.sp-home-grid--catalog,
.sp-global-archive-grid,
.animelist-card-grid.sp-home-grid {
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 15px 12px;
}
.sp-home-card,
.animelist-card.sp-home-card,
.recommended-grid > .sp-home-card {
  max-width: 174px;
  min-width: 0;
  width: 100%;
  justify-self: center;
}
.sp-home-card__details {padding: 9px 9px 11px; gap: 5px;}
.sp-home-card__title {font-size: 12px; line-height: 1.35; min-height: 2.7em;}
.sp-home-card__meta {font-size: 11px; gap: 4px 7px;}
.sp-home-card__extras {font-size: 10px; gap: 3px; line-height: 1.4;}
.sp-home-card__studio,.sp-home-card__genres {-webkit-line-clamp: 2; line-clamp: 2;}
.sp-home-card__description {-webkit-line-clamp: 2; line-clamp: 2;}
.sp-home-card__chips {gap: 4px;}
.sp-home-card__chips span {font-size: 9px; padding: 3px 5px;}
.sp-home-card__rank {top: 6px; left: 6px; padding: 4px 7px; font-size: 11px;}
.sp-home-card__score {top: 6px; right: 6px; padding: 4px 6px; font-size: 11px;}
.sp-home-card__episode {bottom: 6px; left: 6px; right: 6px; max-width: calc(100% - 12px); font-size: 10px; padding: 4px 6px;}
.sp-home-card__chips .sp-home-card__dub {min-width: 33px; padding: 4px 6px;}
.recommended-grid {grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px;}
@media (min-width: 1450px) {
  .sp-home-grid,.sp-home-grid--archive,.sp-home-grid--catalog,
  .sp-global-archive-grid,.animelist-card-grid.sp-home-grid {
    grid-template-columns: repeat(8,minmax(0,1fr));
  }
}
@media (min-width: 1101px) and (max-width: 1250px) {
  .sp-home-grid,.sp-home-grid--archive,.sp-home-grid--catalog,
  .sp-global-archive-grid,.animelist-card-grid.sp-home-grid {
    grid-template-columns: repeat(6,minmax(0,1fr));
  }
}
@media (min-width: 851px) and (max-width: 1100px) {
  .sp-home-grid,.sp-home-grid--archive,.sp-home-grid--catalog,
  .sp-global-archive-grid,.animelist-card-grid.sp-home-grid {
    grid-template-columns: repeat(5,minmax(0,1fr));
  }
}
@media (min-width: 651px) and (max-width: 850px) {
  .sp-home-grid,.sp-home-grid--archive,.sp-home-grid--catalog,
  .sp-global-archive-grid,.animelist-card-grid.sp-home-grid {
    grid-template-columns: repeat(4,minmax(0,1fr));
  }
  .recommended-grid {grid-template-columns: repeat(3,minmax(0,1fr));}
}
@media (max-width: 650px) {
  /* Keep the page gutters, reduce card footprint within them. */
  main > .content > .container,
  main .content > .container,
  .sp-home-section > .container,
  .sp-home-section.popular > .container {
    padding-left: 14px;
    padding-right: 14px;
  }
  .sp-home-grid,.sp-home-grid--archive,.sp-home-grid--catalog,
  .sp-global-archive-grid,.animelist-card-grid.sp-home-grid,
  .sp-search-results,.recommended-grid {
    grid-template-columns: repeat(3, minmax(0,1fr));
    column-gap: 9px;
    row-gap: 13px;
  }
  .recommended-grid {padding: 0;}
  .sp-home-card,.animelist-card.sp-home-card,.recommended-grid > .sp-home-card {
    max-width: 100%; border-radius: 11px;
  }
  .sp-home-card__poster {border-radius: 0;}
  .sp-home-card__details,.recommended-grid .sp-home-card__details {
    padding: 7px 6px 9px; gap: 4px;
  }
  .sp-home-card__title {font-size: 10.5px; line-height: 1.35; min-height: 2.7em;}
  .sp-home-card__meta {font-size: 9.5px; gap: 3px 5px;}
  .sp-home-card__extras {font-size: 9px; line-height: 1.35; gap: 2px;}
  .sp-home-card__studio,.sp-home-card__genres {-webkit-line-clamp: 1; line-clamp: 1;}
  .sp-home-card__description {-webkit-line-clamp: 2; line-clamp: 2;}
  .sp-home-card__chips {gap: 3px; align-content: end;}
  .sp-home-card__chips span {font-size: 8.5px; padding: 3px 4px; border-radius: 5px;}
  .sp-home-card__chips .sp-home-card__dub {min-width: 30px; padding: 3px 5px;}
  .sp-home-card__rank {top: 5px; left: 5px; padding: 4px 6px; font-size: 10px;}
  .sp-home-card__score {top: 5px; right: 5px; padding: 3px 5px; font-size: 10px;}
  .sp-home-card__episode {bottom: 5px; left: 5px; font-size: 8.5px; padding: 4px 5px; max-width: calc(100% - 10px);}
  .sp-home-section h2 {font-size: 19px;}
}
@media (max-width: 374px) {
  /* Smaller phones retain readable card labels. */
  .sp-home-grid,.sp-home-grid--archive,.sp-home-grid--catalog,
  .sp-global-archive-grid,.animelist-card-grid.sp-home-grid,
  .sp-search-results,.recommended-grid {grid-template-columns: repeat(2,minmax(0,1fr)); gap: 11px;}
  .sp-home-card__title {font-size: 12px;}
  .sp-home-card__meta {font-size: 10.5px;}
  .sp-home-card__extras {font-size: 10px;}
}

/* SoraPlay 2026-11: compact home-only horizontal carousels and section controls. */
.sp-home-carousel-section .sp-home-section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.sp-home-carousel-section .sp-home-section-head h2{margin:0;min-width:0}
.sp-home-section-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}
.sp-home-show-all{font-size:13px;font-weight:600;color:#b5b1d0;text-decoration:none;white-space:nowrap;margin-right:3px}
.sp-home-show-all:hover,.sp-home-show-all:focus-visible{color:#8178ff}
.sp-home-show-all span{font-size:19px;margin-left:2px}
.sp-home-nav{appearance:none;border:1px solid rgba(150,143,235,.28);background:#302e42;color:#c7c2e7;display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;font-size:25px;line-height:1;cursor:pointer;padding:0;transition:background .2s,color .2s}
.sp-home-nav:hover:not(:disabled),.sp-home-nav:focus-visible{background:#6c63f4;color:#fff}
.sp-home-nav:disabled{opacity:.35;cursor:default}
.sp-home-carousel-section .sp-home-grid.sp-home-carousel{display:flex!important;grid-template-columns:none!important;gap:12px;overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;align-items:stretch;padding:0 1px 8px}
.sp-home-carousel-section .sp-home-grid.sp-home-carousel::-webkit-scrollbar{display:none}
.sp-home-carousel-section .sp-home-carousel > .sp-home-card{flex:0 0 150px;width:150px;max-width:150px;margin:0;scroll-snap-align:start;align-self:stretch}
@media(max-width:650px){
 .sp-home-carousel-section .sp-home-section-head{gap:6px;margin-bottom:12px}
 .sp-home-carousel-section .sp-home-section-head h2{font-size:17px;line-height:1.25}
 .sp-home-section-actions{gap:5px}
 .sp-home-show-all{font-size:11px;margin-right:2px}
 .sp-home-nav{width:29px;height:29px;font-size:22px}
 .sp-home-carousel-section .sp-home-grid.sp-home-carousel{gap:9px}
 .sp-home-carousel-section .sp-home-carousel > .sp-home-card{flex-basis:calc((100% - 18px)/3);width:calc((100% - 18px)/3);max-width:140px}
}
@media(max-width:374px){
 .sp-home-carousel-section .sp-home-carousel > .sp-home-card{flex-basis:calc((100% - 9px)/2);width:calc((100% - 9px)/2)}
 .sp-home-carousel-section .sp-home-section-head h2{font-size:16px}
 .sp-home-show-all{font-size:10px}
 .sp-home-nav{width:27px;height:27px}
}
body:not(.dark) .sp-home-nav{background:#eeecf9;color:#5c549c}
body:not(.dark) .sp-home-show-all{color:#655e86}


.sp-archive-subtitle {
  margin: -6px 0 22px;
  color: rgba(255,255,255,.72);
  font-size: 15px;
  font-weight: 600;
}

/* SoraPlay 2026-11: functional archive filters + clearly recognizable dubbed microphone. */
.sp-dub-mic {width:13px;height:13px;flex:0 0 13px;vertical-align:middle;margin-right:3px;stroke-width:2.5;}
.sp-home-card__chips .sp-home-card__dub {gap:1px;}
.sp-archive-heading {margin-bottom:8px;}
.sp-archive-toolbar {display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 17px;}
.sp-archive-count {margin:0;color:#a9a9bd;font-size:13px;}
.sp-filter-toggle {display:inline-flex;align-items:center;gap:8px;background:#181923;color:#a8a0ff;border:1px solid #7a72bd;border-radius:11px;padding:9px 14px;font-size:13px;font-weight:750;cursor:pointer;}
.sp-filter-toggle:hover,.sp-filter-toggle[aria-expanded=true] {background:#292541;}
.sp-filter-dot {color:#9c87fd;font-size:9px;}
.sp-archive-filter-panel {border:1px solid #34334b;border-radius:15px;background:#191a25;padding:18px;margin:0 0 20px;color:#eae8f6;}
.sp-archive-filter-panel[hidden] {display:none!important;}
.sp-archive-filter-fields {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;}
.sp-archive-filter-fields label {font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:#b6b0d3;font-weight:800;display:flex;flex-direction:column;gap:7px;min-width:0;}
.sp-archive-filter-fields select {width:100%;min-width:0;padding:11px 9px;background:#11121c;border:1px solid #34354b;border-radius:9px;color:#f1f0fa;font-size:13px;text-transform:none;letter-spacing:normal;box-sizing:border-box;}
.sp-archive-filter-actions {display:flex;align-items:center;gap:18px;margin-top:18px;flex-wrap:wrap;}
.sp-filter-apply {border:0;border-radius:9px;background:#7367ef;color:white;padding:10px 18px;font-size:13px;font-weight:750;cursor:pointer;}
.sp-archive-filter-actions a {color:#ae9dff;text-decoration:none;font-size:13px;}
@media(max-width:650px) {
 .sp-archive-filter-panel {padding:12px;}
 .sp-archive-filter-fields {grid-template-columns:repeat(2,minmax(0,1fr));gap:11px;}
 .sp-archive-filter-fields select {font-size:12px;padding:10px 6px;}
 .sp-dub-mic {width:11px;height:11px;flex-basis:11px;margin-right:1px;}
}

/* Year-long donor achievement, visually distinct from monthly Supporter. */
.zstream-supporter-year-chip{display:inline-flex;align-items:center;gap:6px;border:1px solid #e9bb57;border-radius:999px;padding:5px 10px;background:linear-gradient(120deg,#6d3f1b,#ae772c);color:#fff3c0;font-size:12px;font-weight:800;white-space:nowrap;margin-top:5px}
.zstream-supporter-year-chip .icon{font-size:15px;color:#ffe49b}


/* SoraPlay: high-contrast text while writing comments and private messages.
   The base theme uses `body.dark` for the dark color scheme. */
body.dark #respond #commentform textarea#comment,
body.dark .zstream-message-compose input[type="text"],
body.dark .zstream-message-compose textarea[name="message_body"],
body.dark .zstream-message-editor textarea {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff;
  caret-color: #ffffff;
  background-color: #343647;
}
body.dark #respond #commentform textarea#comment::placeholder,
body.dark .zstream-message-compose input::placeholder,
body.dark .zstream-message-compose textarea::placeholder {
  color: #c0c4d3 !important;
  opacity: 1;
}
body:not(.dark) #respond #commentform textarea#comment,
body:not(.dark) .zstream-message-compose input[type="text"],
body:not(.dark) .zstream-message-compose textarea[name="message_body"],
body:not(.dark) .zstream-message-editor textarea {
  color: #151725 !important;
  -webkit-text-fill-color: #151725;
  caret-color: #151725;
  background-color: #f5f7fc;
}
body:not(.dark) #respond #commentform textarea#comment::placeholder,
body:not(.dark) .zstream-message-compose input::placeholder,
body:not(.dark) .zstream-message-compose textarea::placeholder {
  color: #62697b !important;
  opacity: 1;
}

/* Community mentions and built-in share button */
.soraplay-user-mention {color:#8471ff;font-weight:700;text-decoration:none;}
.soraplay-user-mention:hover {text-decoration:underline;}
.soraplay-native-share {display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:9px 14px;background:#7461f8;color:#fff;border:0;border-radius:12px;font-weight:700;cursor:pointer;margin:8px 0;}
.soraplay-native-share:hover {filter:brightness(1.07);}