.wrapper {
  min-width: 320px;
  position: relative;
  padding-top: 0;
  padding-bottom: 10px
}
.wrapper-container {
  max-width: var(--max-width);
  margin: 0 auto;
  position: relative;
  z-index: 20
}
.wrapper-main {
  min-height: 100vh;
  background-color: var(--bg-2);
  box-shadow: 0 0 10px 0 rgba(0,0,0,.2);
  border-radius: 10px
}
.header {
  padding: 0 var(--indent);
  background-color: var(--bg);
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 5px solid var(--accent);
  box-shadow: var(--bsh-block);
  transition: transform .3s ease-in-out
}
.header--hidden {
  transform: translateY(-100%)
}
.content {
  padding: 20px var(--indent);
  padding-bottom: 60px;
  min-height: 80vh
}
.cols {
  display: grid;
  gap: 40px;
  grid-template-columns: minmax(0,1fr) 360px
}
.footer {
  padding: 25px var(--indent);
  background-color: var(--bg-dark);
  color: var(--tt-dark);
  border-radius: 0 0 10px 10px
}
.footer__bottom {
  margin-top: 16px;
  gap: 20px
}
#scrolltop {
  position: fixed;
  width: 60px;
  height: 60px;
  line-height: 60px;
  right: 10px;
  bottom: 67px;
  z-index: 990;
  display: none;
  background-color: var(--bg);
  color: var(--tt-2);
  cursor: pointer;
  font-size: 24px;
  border-radius: 50%;
  text-align: center;
  box-shadow: 0 5px 10px rgba(0,0,0,.1)
}

/* Скрываем по умолчанию на больших экранах */
.mbtn-login {
  display: none;
  position: fixed;
  width: 40px;
  height: 40px;
  left: 10px;   
  bottom: 67px;
  z-index: 990;
  background-color: var(--bg);
  color: var(--tt-2);
  cursor: pointer;
  font-size: 24px;
  border-radius: 50%;
  text-align: center;
  box-shadow: 0 5px 10px rgba(0,0,0,.1);
  transition: all 0.3s ease;
}
.mbtn-login i {
  margin-left: -10px; 
}

.mbtn-login-fix {
  display: none;
  position: fixed;
  width: 40px;
  height: 40px;
  line-height: 40px;
  left: 5px;
  bottom: 75px;
  z-index: 990
}
.mbtn-login-fix .header__login-panel {
  display: none !important;
}
@media (max-width: 1220px) {
  .mbtn-login, .mbtn-login-fix {
    display: block;
  }
}

.logo {
  display: flex;
  align-items: center;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 40px;
  margin-right: 40px;
}

.logo-apk {
  color: var(--accent);
}

.logo-off {
  position: relative;
  color: var(--accent-gray);
  font-size: 27px;
  margin-top: 8px;
}

/* Бейдж */
.logo-off::before {
  content: ".com";
  position: absolute;
  top: -6px;
  left: 25px;
  font-size: 10px;
  font-weight: 500;
  color: #aaa;
  white-space: nowrap;
}
.header__btn-login {
  height: 30px;
  border-radius: 4px;
  font-size: 12px;
  margin-left: 10px;
  font-weight: 500;
      background-color: var(--bg);
    color: var(--tt-3);
    box-shadow: 0 0 0 1px var(--bdc);
  padding: 0 10px
}
.header-search {
  margin-left: 10px;
  font-size: 16px;
  display: grid;
  place-items: center;
  height: 30px;
  width: 30px;
  border-radius: 4px;
  box-shadow: 0 0 0 1px var(--bdc);
  padding: 0;
  color: var(--tt);
  background-color: var(--bg)
}
@media screen and (max-width:470px) {
  .header-search {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    background: 0 0;
    color: var(--tt-3);
    font-size: 14px;
    padding: 0
  }
  .header__search form {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
    height: 73px;
    padding: 0 12px;
    background: var(--bg);
    box-shadow: 0 2px 12px rgba(0,0,0,.12);
    align-items: center
  }
  .header__search form .header__search-box {
    position: relative;
    width: 100%
  }
  .header__search form input[type=text] {
    width: 100%;
    padding: 0 40px 0 15px!important;
    height: 38px;
    line-height: 38px;
    font-size: 14px;
    box-sizing: border-box
  }
  .header__search form .search-btn {
    position: absolute;
    right: 0;
    top: 0;
    width: 38px;
    height: 38px;
    background: var(--accent);
    color: #fff;
    border-radius: 0 4px 4px 0;
    font-size: 14px;
    padding: 0
  }
}
@media screen and (min-width:471px) {
  .header-search {
    display: none
  }
}
.theme-toggle {
  margin-left: 10px;
  font-size: 16px;
  display: grid;
  place-items: center;
  height: 30px;
  width: 30px;
  border-radius: 4px;
  box-shadow: 0 0 0 1px var(--bdc);
  padding: 0;
  color: var(--tt);
  background-color: var(--bg)
}
.dt-is-active .theme-toggle .fal::before {
  content: "\f186"
}
.header__menu {
  gap: 20px;
  position: relative
}
.header__menu > li > a {
  font-weight: 600;
  color: var(--tt-3);
  height: 70px;
  display: flex;
  align-items: center
}
.header__menu > li.header__menu--fw400 > a {
  font-weight: 400
}
.header__menu-hidden {
  position: absolute;
  top: 80%;
  left: 0;
  z-index: 100;
  border-radius: 6px;
  background-color: var(--bg);
  box-shadow: 0 30px 60px rgba(0,0,0,.2);
  width: 100%;
  padding: 15px 20px;
  gap: 5px 20px;
  grid-template-columns: repeat(auto-fill,minmax(140px,1fr));
  display: none
}
.header__menu-hidden a {
  display: block;
  padding: 5px 10px;
  border-radius: 4px
}
.header__menu > li:hover .header__menu-hidden {
  display: grid
}
.header__menu > li:hover > a {
  color: var(--accent-red)
}
.header__menu-hidden a:hover,
.theme-toggle:hover {
  background-color: var(--accent-red);
  color: #fff
}
.header__search {
  width: 410px;
  position: relative
}
.header__search input,
.header__search input:focus {
  padding: 0 30px 0 10px;
  border-radius: 4px;
  background: var(--bg);
  box-shadow: 0 0 0 1px var(--bdc);
  color: var(--tt);
  height: 30px;
  line-height: 30px
}
.header__search input:not(:focus)::placeholder {
  color: var(--tt-3);
  opacity: 1;
  font-size: 12px
}
.header__search button {
  position: absolute;
  right: 0;
  top: 0;
  padding: 0;
  width: 30px;
  height: 30px;
  background: 0 0;
  color: var(--tt-3);
  font-size: 12px
}
.login {
  position: fixed;
  z-index: 999;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  overflow: hidden;
  background-color: var(--ui-bg);
  border-radius: 4px;
  width: 400px;
  box-shadow: 0 0 0 10px rgba(255,255,255,.2),0 15px 45px #000
}
.login__header {
  padding: 20px 40px;
  background-color: var(--ui-bg-darker)
}
.login__title {
  font-size: 17px;
  font-weight: 600;
  padding: 1px 0;
  text-transform: capitalize
}
.login__title i {color:var(--red);}
  
.login__close {
  cursor: pointer;
  font-size: 24px;
  opacity: .6;
  margin-left: 20px
}
.login__title a {
  border-bottom: 1px dotted var(--red);
  margin-left: 10px;
  font-weight: 400;
  text-transform: uppercase;
  color: var(--tt-2)
}
.login__content {
  padding: 20px 40px
}
.login__row {
  margin-bottom: 20px;
  position: relative;
  display: block;
  font-size: 14px;
  color: var(--tt-2)
}
.login__caption {
  font-size: 14px;
  color: var(--tt);
  margin-bottom: 10px
}
.login__caption a {
  text-decoration: underline;
  margin-left: 6px;
  color: var(--tt-accent)
}
.login__input input {
  padding-left: 40px
}
.login__row .fal {
  opacity: .5;
  position: absolute;
  left: 0;
  bottom: 0;
  line-height: 40px;
  width: 40px;
  text-align: center
}
.login__row button {
  width: 100%
}
.login__social {
  background-color: var(--ui-bg-darker);
  padding: 20px 40px;
  text-align: center
}
.login__social-caption {
  font-size: 11px;
  text-transform: uppercase;
  margin-bottom: 10px
}
.login__social-btns a {
  display: inline-block;
  margin: 0 3px;
  vertical-align: top
}
.login__social-btns img {
  display: block;
  width: 30px;
  height: 30px;
  border-radius: 50%
}
.login__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 10px
}
.login__menu {
  padding-left: 35px;
  padding-right: 35px;
  margin-bottom: -10px
}
.login__menu li {
  flex: 1 1 0;
  min-width: auto;
  max-width: 100%;
  margin: 0 5px 10px 5px
}
.login__menu a {
  display: block;
  border-radius: 6px;
  padding: 10px;
  text-align: center;
  white-space: nowrap;
  background-color: var(--ui-bg-darker);
  box-shadow: inset 0 0 10px rgba(0,0,0,.1);
  font-size: 13px
}
.login__menu .fal {
  display: block;
  height: 30px;
  font-size: 24px;
  opacity: .3
}
.tg-actions {
  display: flex;
  gap: 12px;
  width: 100%;
  margin-top: -15px;
  margin-bottom: 15px
}
.tg-actions .btn-secondary .tg-icon {
  color: #1dcc67
}
.btntg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 37px;
  padding: 0 16px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  flex: 1;
  flex-shrink: 0;
  transition: background .2s ease,transform .1s ease;
  border: none;
  background: 0 0;
  cursor: pointer;
  font-family: inherit
}
.btn-primary {
  background: var(--tt-accent);
  color: #fff;
  max-width: 280px
}
.btn-secondary {
  background: var(--urank);
  color: var(--secondary-col);
  border: 1px solid var(--secondary-bor)
}
.btn-group {
  display: flex;
  flex: 1;
  gap: 0;
  position: relative
}
.btn-group .btntg {
  flex: 1;
  border-radius: 0
}
.btn-group .btn-main {
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
  flex: 2
}
.btn-group .btn-icon {
  border-left: none;
  min-width: 37px;
  padding: 0 12px
}
.btn-group .btn-icon:nth-child(2) {
  flex: 1.3;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0
}
.btn-group .btn-icon:nth-child(3) {
  flex: 0.7;
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px
}
.tg-icon {
  margin-right: 6px;
  font-size: 14px;
  line-height: 1
}
.btn-icon i {
  margin: 0;
  font-size: 14px
}
.btn-icon .tg-icon {
  margin-right: 6px;
  margin-left: 0
}
.btn-primary:hover {
  transform: translateY(-1px);
  color: #fff
}
.btn-secondary:hover {
  transform: translateY(-1px);
  color: var(--secondary-col)
}
.btn-primary,
.btn-primary:active,
.btn-primary:focus,
.btn-primary:visited {
  color: #fff;
  text-decoration: none
}
.btn-secondary:active,
.btn-secondary:focus,
.btn-secondary:hover {
  background: var(--secondary-bg)
}
@media (min-width:591px) and (max-width:760px) {
  .btn-group .btn-main {
    flex: 3!important
  }
  .btn-group .btn-icon:nth-child(2) {
    flex: 1!important
  }
}
@media (max-width:950px) {
  .btn-primary {
    max-width: none
  }
  .btn-group .btn-icon .btn-text {
    display: none
  }
  .btn-group .btn-icon {
    min-width: 37px;
    padding: 0
  }
  .btn-group .btn-icon:nth-child(3) {
    display: inline-flex;
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px
  }
  .btn-group .btn-icon:nth-child(2) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0
  }
}
@media (max-width:590px) {
  .tg-actions {
    flex-direction: column
  }
  .btn-group .btn-icon .btn-text {
    display: none
  }
  .btn-group .btn-icon {
    min-width: 37px;
    padding: 0;
    flex: 1!important
  }
}
.share-popup {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  width: 180px;
  flex-direction: column;
  background: var(--bg);
  box-shadow: 0 2px 6px rgba(0,0,0,.2);
  border-radius: 6px;
  padding: 4px 0;
  z-index: 1000;
  font-size: 13px
}
.share-popup.visible {
  display: flex
}
.share-popup__item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 6px 12px;
  cursor: pointer;
  transition: background .2s
}
.share-popup__item:focus,
.share-popup__item:hover {
  outline: 0
}
.share-popup__item + .share-popup__item {
  margin-top: -5px
}
.share-popup__item:hover {
  background: var(--bg-2)
}
.share-popup__item .icon {
  display: inline-block;
  width: 30px;
  height: 30px;
  background-size: contain;
  background-repeat: no-repeat
}
.share-vk .icon {
  background-image: url(../images/vk.svg)
}
.share-telegram .icon {
  background-image: url(../images/telegram.svg)
}
.share-twitter .icon {
  background-image: url(../images/x.svg)
}
.share-facebook .icon {
  background-image: url(../images/facebook.svg)
}
.poster__label {
  position: absolute;
  left: 5px;
  top: 30px;
  border-radius: 3px;
  height: 20px;
  display: flex;
  align-items: center;
  padding: 0 6px;
  font-size: 10px;
  z-index: 10;
  pointer-events: none
}
.poster__label-1 {
  position: absolute;
  left: 5px;
  top: 54px;
  border-radius: 3px;
  height: 20px;
  display: flex;
  align-items: center;
  padding: 0 6px;
  font-size: 10px;
  z-index: 10;
  pointer-events: none
}
.poster__label-2 {
  position: absolute;
  left: 5px;
  top: 5px;
  border-radius: 3px;
  height: 20px;
  display: flex;
  align-items: center;
  padding: 0 6px;
  font-size: 10px;
  z-index: 10;
  pointer-events: none
}
.poster__label--red {
  background-color: var(--red);
  color: #fff;
}
.poster__label--blue {
  background-color: var(--tt-accent);
  color: #fff;
}
.poster__label--orange {
  background-color: var(--accent-gold);
  color: #fff;
}
.main-set {
  margin-top: 40px
}
.grid-collectons {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 20px 10px
}
.coll {
  display: block;
  padding-top: 0;
  height: 160px;
  text-align: center
}
.coll__title {
  position: absolute;
  inset: 0;
  color: #fff;
  background-color: rgba(0,0,0,.25);
  padding: 20px;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 15px;
  z-index: 5
}
.coll__title:hover {
  background: rgba(0,0,0,.15);
  color: #fff
}
.coll__title span {
  transition: transform .25s ease,opacity .25s ease
}
.coll__title:hover span {
  transform: scale(1.05);
  opacity: .95
}
#dle-content > .coll,
.grid-items > .coll {
  grid-column: span 2
}
.collection-link,
.collection-link:visited {
  color: #fff
}
.collection-link:active,
.collection-link:focus,
.collection-link:hover {
  color: #fff
}
.sect:not(:last-child) {
  margin-bottom: 40px
}
.sect__header {
  margin-bottom: 20px;
  gap: 10px
}
.sect__title {
  font-size: 24px;
  font-weight: 700
}
.sect__ctrl {
  margin-top: -6px;
  margin-bottom: -20px;
  gap: 10px
}
.sect__ctrl-menu {
  gap: 20px 20px;
  font-size: 13px
}
.sect__ctrl-menu--main {
  font-weight: 600
}
.sect__ctrl-menu i {
  margin-left: 4px
}
.sect__ctrl-menu label {
  position: relative;
  display: block
}
.sect__ctrl-menu label input {
  display: block;
  appearance: none;
  -webkit-appearance: none;
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer
}
.sect__ctrl-menu a,
.sect__ctrl-menu label div {
  height: 30px;
  display: flex;
  align-items: center;
  background-color: var(--bg);
  color: var(--tt);
  border-radius: 4px;
  padding: 0 10px
}
.sect__ctrl-menu button.is-active,
.sect__ctrl-menu label input:checked + div {
  background-color: var(--accent-red);
  color: var(--tt-dark);
  border-radius: 4px;
  padding: 0 10px
}
.sect__ctrl-menu a:not(.is-active):hover,
.sect__ctrl-menu label div:hover {
  color: var(--accent-red)
}
.sect__link {
  display: flex;
  align-items: center;
  height: 30px;
  border-radius: 4px;
  padding: 0 10px;
  font-size: 12px;
  background-color: var(--accent-red);
  color: var(--tt-2);
  gap: 10px
}

.sect__content {
  margin-bottom: 100px;
}
.sect__content.stop {
  margin-bottom: 0;
}
.descr {
  display: grid;
  grid-gap: 20px;
  line-height: 1.7;
  color: var(--tt);
  padding-top: 60px
}
.descr h1,
.descr h2,
.descr h3 {
  font-weight: 500;
  font-size: 18px;
  color: var(--tt);
  line-height: 1.3
}
.descr a {
  text-decoration: underline;
  color: var(--tt-accent)
}
.descr ul li {
  position: relative;
  padding-left: 25px;
  margin-left: 25px
}
.descr ul li::before {
  content: "\f00c";
  font-weight: 300;
  font-family: 'Font Awesome 5 Pro';
  color: var(--tt-accent);
  position: absolute;
  left: 0;
  top: 0
}
.speedbar {
  font-size: 13px;
  color: var(--tt-2);
  margin-top: 30px;
  margin-bottom: -50px;
}
.pmovie {
  background-color: var(--bg);
  border-radius: 5px;
  padding: 20px;
  margin-bottom: -150px;
}
.speedbar .fal {
  margin-right: 8px;
  color: var(--accent)
}
.speedbar a:hover {
  text-decoration: underline
}
.short-in {
  background: var(--bg);
  text-align: center;
  padding: 0 15px 45px 15px;
  border-radius: 6px;
  overflow: hidden;
  position: relative;

  box-shadow: 0 2px 10px rgba(0,0,0,.08);
  transition: transform .25s ease,box-shadow .25s ease
}
.short-in:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 26px rgba(0,0,0,.16)
}
 .fix-wid .short-in {width: 185px;}
.short-link {
  display: block
}
.short-img-holder {
  padding: 75px 0 0 0;
  margin: 0 -15px;
  position: relative;
  background-color: #333;
  height: 145px
}
.short-img {
  width: 120px;
  height: 120px;
  margin: 0 auto;
  position: relative;
  top: 15px;
  z-index: 5;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,.25);
  overflow: hidden;
  border: 4px solid #fff
}
.short-title {
  margin: 75px 0 8px 0;
  height: 20px;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center
}
.short-desc {
  line-height: 20px;
  height: 60px;
  overflow: hidden;
  opacity: .5
}
.short-img-bg {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.4);
  z-index: 2
}
.short-link:hover .short-img {
  box-shadow: 2px 2px 10px rgba(0,0,0,.3)
}
.info-row {
  display: flex;
  align-items: center;
  padding-top: 10px;
  margin-bottom: -35px;
  border-top: 1px dashed #b5b5b5
}
.info-item-short:first-child i {
  margin-top: -2px;
  font-size: 15px;
  color: #4caf50
}
.info-item-short {
  font-size: 13px;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 4px
}
.info-item-short:first-child {
  flex-grow: 1
}
.info-item-short:last-child i {
  margin-top: -2px;
  font-size: 15px;
  color: #ffc107
}
.game-card {
  background: var(--bg-2);
  text-align: center;
  padding: 15px 15px 10px;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 2px 10px rgba(0,0,0,.08);
  transition: transform .25s ease,box-shadow .25s ease;
  width: 144px
}
.game-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 26px rgba(0,0,0,.16)
}
.game-card__link {
  display: block
}
.game-card__header {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 10px
}
.game-card__icon {
  width: 120px;
  height: 120px;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,.25);
  overflow: hidden;
  border: 4px solid #fff;
  transition: box-shadow .3s ease
}
.game-card__icon img {
  width: 100%;
  height: 100%;
  object-fit: cover
}
.game-card__link:hover .game-card__icon {
  box-shadow: 0 6px 20px rgba(0,0,0,.35)
}
.game-card__title {
  margin: 0 0 10px 0;
  font-size: 12px;
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center
}
.game-card__info {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  padding-top: 10px;
  border-top: 1px dashed #e0e0e0
}
.game-card__info-item {
  font-size: 11px;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 4px
}
.game-card__info-item:first-child i {
  font-size: 14px;
  color: #4caf50
}
.game-card__info-item:last-child i {
  font-size: 14px;
  color: #ffc107
}
.card {
  padding: 20px;
  border-radius: 5px;
  background-color: var(--bg);
  display: grid;
  text-decoration: none;
  color: inherit;
  gap: 15px 20px;
  grid-template-columns: 200px minmax(0,1fr);
  grid-template-rows: min-content 1fr min-content;
  grid-template-areas: "cimg ctitle" "cimg cdesc" "cimg cbtm";
  position: relative
}

.card__img {
  display: block;
  height: 300px;
  border-radius: 5px;
  grid-area: cimg;
  border: 1px solid var(--bdc)
}
.card .has-overlay__icon {
  padding: 0
}
.card .poster__fav {
  left: auto;
  right: 20px;
  top: 20px;
  opacity: 1;
  visibility: visible;
  transform: none
}
.card .poster__fav a:not(:hover) {
  background-color: var(--bg-2)
}
.card__title {
  display: block;
  grid-area: ctitle;
  margin-right: 130px
}
a.card__title:hover {
  text-decoration: underline
}
.card__title h3 {
  font-size: 18px;
  font-weight: 600
}
.card__desc {
  grid-area: cdesc
}
.card__list {
  display: grid;
  grid-gap: 6px 0;
  font-size: 13px
}
.card__list li > span:first-child {
  font-weight: 500;
  margin-right: 3px
}
.card__list a {
  text-decoration: underline;
  color: var(--tt-accent)
}
.card__text {
  margin-top: 15px;
  -webkit-line-clamp: 4;
  line-height: 1.5
}
.card__bottom {
  font-size: 12px;
  grid-area: cbtm;
  gap: 10px 20px
}
.card__meta .fal {
  margin-right: 5px;
  opacity: .66
}
.card__btn {
  height: 30px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: all .2s ease;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

.card__fav {
  position: absolute;
  right: 0;
  top: 0;
  width: 60px;
  height: 60px;
  cursor: pointer;
  font-size: 18px;
  overflow: hidden;
  color: var(--tt-lighter)
}
.card__fav .fas {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  cursor: pointer;
  display: flex!important;
  justify-content: center;
  align-items: center;
  padding: 0 0 25px 25px
}
.card__fav .fas::after {
  content: '';
  background: var(--gradient);
  box-shadow: var(--bsh-2);
  z-index: -1;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transform: skew(45deg);
  transform-origin: 0 0
}
.card__fav .fas.added::after {
  background: var(--gradient-accent)
}
.card__rating-ext {
  font-size: 14px;
  font-weight: 500;
  color: var(--tt);
  gap: 3px;
  position: relative;
  display: flex;
  align-items: center;
  line-height: 1;
  white-space: nowrap;
  margin-top: -3px
}
.card__rating-ext b {
  font-size: 13px;
  font-weight: 400
}

.card__rating-ext:nth-child(1) i {
  color: #f5c518;
  font-size: 13px;
}

.card__rating-ext:nth-child(2) i {
  color: #1dcc67;
  font-size: 13px;
}
.card__rating-ext:nth-child(3) i {
  color: #ff6600;
  font-size: 13px;
}

.card__meta.flex-grow-1 {
  align-self: center;
  text-align: right;
  margin-right: -10px
}
.linek {
  background-color: var(--bg);
  border-radius: 5px;
  padding: 10px 20px;
  gap: 0!important;
  margin-bottom: 10px;
  position: relative;
  overflow: hidden;
  display: flex!important
}
.linek__img {
  width: 125px;
  height: 125px;
  margin: -10px -20px;
  margin-right: 20px
}
.linek__title {
  color: var(--tt-accent);
  font-weight: 500;
  font-size: 15px;
  padding-right: 120px
}
.linek__meta {
  margin-top: 10px;
  color: var(--tt-2);
  font-size: 12px
}
.linek__meta i {
  margin-right: 5px;
}
.linek .card__bottom {
  margin-top: 10px
}
.linek .poster__fav {
  right: 5px;
  top: 5px
}
.count-items {
  counter-reset: num
}
.count-items .linek::before {
  content: counter(num);
  counter-increment: num;
  color: var(--tt-2);
  opacity: .3;
  position: absolute;
  right: 20px;
  top: 50%;
  margin-top: -10px;
  transform: translateY(-50%);
  font-size: 40px;
  font-weight: 700
}
.sb {
  background-color: var(--bg);
  margin-top: -80px
}
.sb-full {
  background-color: var(--bg)
}
.sb__title {
  font-weight: 600;
  font-size: 16px;
  padding: 15px 20px
}
.sb__title i {
  color: var(--accent)
}
.sb__nav {
  background-color: var(--bg-dark-lighter);
  padding: 16px 20px;
  border-top: 1px solid var(--bdc);
  display: grid;
  gap: 0 20px;
  grid-template-columns: repeat(2,minmax(0,1fr))
}
.sb__nav a {
  display: block;
  padding: 4px 0;
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}
.sb__nav a:hover {
  text-decoration: underline;
  color: var(--accent-red)
}
.upd__date {
  background-color: var(--bg-dark);
  color: var(--tt-dark);
  padding: 10px 20px;
  font-weight: 500;
  font-size: 13px;
  cursor: pointer
}
.updli {
  position: relative
}
.updli__link {
  padding: 10px 20px;
  border-bottom: 1px solid var(--bdc)
}


.updli__img {
  width: 50px;
  height: 50px;
  border-radius: 3px;
  margin-right: 10px
}
.updli__title {
  font-weight: 500;
  font-size: 13px
}
.updli__season {
  margin-top: 6px;
  border-radius: 3px;
  background-color: var(--bg-2);
  padding: 3px 6px;
  font-size: 11px;
  display: inline-block
}
.updli__meta {
  border-radius: 3px;
  background-color: var(--bg-2);
  margin-left: 10px;
  padding: 6px 10px;
  font-size: 11px;
  text-align: center;
  width: 80px;
  font-weight: 500
}
.updli__voice {
  font-weight: 400;
  color: var(--tt-2);
  margin-top: 3px
}
.updli:hover .updli__meta {
  background-color: var(--accent-red);
  color: #fff;
}

.updli:hover .updli__voice {
  color: #fff;
}
.upd.is-active .upd__items {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(280px,1fr))
}
.upd:not(.is-active) + .upd {
  margin-top: 5px
}

.upd__date:hover,
.updli:hover .updli__meta,
.updli:hover .updli__voice {
  background-color: var(--accent-red);
  color: #fff
}
.upd__items {
  max-height: 460px;
  overflow-x: hidden;
  overflow-y: auto
}
.sb + .sb {
  border-top: 1px solid var(--bdc)
}
.sb-full + .sb-full {
  border-top: 1px solid var(--bdc)
}

.sblogin + .sb-full {
  border-top: 5px solid var(--bdc)
}
.sblogin {
  padding: 20px;
  background-color: var(--bg)
}
.sblogin__img {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  margin-right: 10px;
  background-color: #000
}
.sblogin__name {
  font-weight: 600
}
.sblogin__guest {
  font-weight: 500;
  color: var(--tt-2);
  font-size: 14px;
  margin-left: 10px;
}
  
.sblogin__name div:last-child {
  font-weight: 400;
  color: var(--tt-2);
  font-size: 11px;
  margin-top: 2px
}
.sblogin__ctrl {
  gap: 10px;
  font-weight: 500;
  font-size: 11px;
  margin-left: 10px
}
.sblogin__desc-btm {
  gap: 6px;
  margin-top: 6px
}
.sblogin__desc-btm i {
  margin-right: 5px
}
.sblogin__desc-btm a,
.sblogin__desc-btm a span {
  border-radius: 3px;
  background-color: var(--bg-2);
  display: flex;
  align-items: center;
  padding: 0 6px;
  font-size: 11px;
  height: 20px;
  overflow: hidden
}
.sblogin__desc-btm a span {
  margin-right: -6px;
  margin-left: 6px;
  background-color: var(--red);
  color: #fff;
  border-radius: 0;
  font-size: 10px
}
.sblogin a:hover {
  text-decoration: none
}
.footer__menu {
  gap: 20px 40px;
  font-weight: 400
}
.footer__menu a {
  color: var(--tt-dark)
}
.footer__menu--fw600 {
  font-weight: 600
}
.footer__copyright,
.footer__text {
  font-size: 13px
}
.footer__soc {
  gap: 20px 15px
}
.footer__soc img {
  display: block;
  height: 16px;
  opacity: .5
}
.footer__menu a:hover {
  text-decoration: underline
}
.footer__soc a:hover img {
  opacity: 1
}
.pagination {
  display: flex;
  justify-content: center;
  gap: 20px 10px;
  padding-top: 10px
}
.pagination__pages {
  display: flex;
  justify-content: center;
  gap: 10px;
  font-size: 14px
}
.pagination__pages > a,
.pagination__pages > span,
.pagination__pages-btn > a,
.pagination__pages-btn > span {
  display: grid;
  place-items: center;
  color: var(--tt-fade);
  height: 36px;
  min-width: 36px;
  padding: 0 10px;
  border-radius: 3px;
  background-color: var(--bg);
  font-weight: 600;
  font-size: 14px
}
.pagination__pages > span:not(.nav_ext) {
  background-color: var(--accent);
  color: #fff
}
.pagination__btns,
.pagination__pages-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  border-radius: 4px;
  overflow: hidden;
  background-color: var(--bg);
  box-shadow: var(--bsh);
  font-size: 18px;
  color: var(--accent)
}
.pagination__btns > span {
  color: var(--tt-fade)
}

.pmovie__main {
  display: grid;
  gap: 20px;
  grid-template-columns: 120px minmax(0,1fr);
  grid-template-areas: "pimg pheader" "pimg plist";
  margin-bottom: 20px;
  grid-template-rows: min-content 1fr
}
.pmovie__img {
  height: 120px;
  width: 120px;
  border-radius: 5px;
  border: 1px solid var(--bdc)
}
.pmovie__poster {
  grid-area: pimg;
  position: relative
}
.pmovie__header {
  position: relative;
  grid-area: pheader
}
.pmovieh1 {
  font-size: 22px;
  margin-bottom: 15px;
  overflow: hidden
}
.pmovie__list {
  grid-area: plist
}
.pmovie__header h1 {
  font-weight: 600;
  font-size: 22px
}
.pmovie__header h1 a {
  font-size: 14px;
  margin-left: 10px;
  color: var(--tt-2)
}
.pmovie__main-info {
  font-weight: 500;
  font-size: 12px;
  color: var(--tt-2);
  margin-top: 4px
}
.pmovie__header .poster__fav {
  left: auto;
  right: 0;
  top: 0;
  opacity: 1;
  visibility: visible;
  transform: none
}
.pmovie__header .poster__fav a:not(:hover) {
  background-color: var(--bg-2)
}
.pmovie__subtitle {
  font-weight: 600;
  font-size: 18px;
  margin-bottom: 10px
}
.pmovie__descr + .pmovie__subtitle {
  margin-bottom: 20px;
  margin-top: 20px
}
.page__list {
  display: grid;
  grid-gap: 15px
}
.page__list li {
  color: var(--tt-2);
  display: flex;
  justify-content: space-between
}
.page__list li > span:first-child {
  color: var(--tt-2);
  display: inline-flex;
  align-items: center;
  flex: 1 1 0;
  min-width: 100px;
  max-width: 100%;
  margin-right: 10px;
  white-space: nowrap
}
.page__list li > span:first-child::after {
  content: '';
  border-top: 1px dashed var(--pagelist);
  flex: 1 1 0;
  min-width: 10px;
  max-width: 100%;
  margin-left: 10px
}
.page__list li a {
  color: var(--accent);
  text-decoration: underline
}
.page__list i {
  margin-right: 6px;
  font-size: 1em;
  vertical-align: middle;
  color: #2ecc71
}
.pmovie__rating {
  position: relative;
  margin-top: 8px;
  font-size: 13px
}
.pmovie__rating-score {
  position: absolute;
  right: 0;
  top: 3px;
  height: 29px;
  width: 29px;
  border-radius: 3px;
  font-size: 12px;
  font-weight: 500;
  background-color: var(--bg-dark);
  color: #fff;
  display: grid;
  place-items: center
}
.pmovie__related {
  padding: 0!important;
  background: 0 0
}
@media screen and (min-width:760px) {
  .pmovie__related .grid-items {
    grid-template-columns: repeat(6,minmax(0,1fr));
    gap: 16px
  }
  .pmovie__related .poster__img {
    margin-bottom: 8px
  }
  .pmovie__related .has-overlay__icon {
    padding-bottom: 0;
    padding-top: 55px
  }
  .pmovie__related .poster__btn-info {
    top: 32px;
    padding: 0 7px
  }
}
.pactor .pmovie__header .poster__fav {
  position: static
}
.pactor .pmovie__header .pmovie__btn-scroll {
  margin: 0;
  height: 40px;
  padding: 0 20px;
  margin-top: 20px;
  font-size: 16px;
  gap: 20px
}
.pactor .poster .poster__fav,
.pactor .poster .poster__ratings {
  display: none
}
.pactor .card,
.pactor .linek {
  padding: 0;
  background: 0 0
}
.full-text {
  line-height: 1.7;
  font-size: 14px;
  word-wrap: break-word
}
.full-text a {
  text-decoration: underline;
  color: #5278b1
}
.full-text > ol,
.full-text > ul,
.full-text h1,
.full-text h2,
.full-text h3,
.full-text h4,
.full-text h5,
.full-text img:not(.emoji),
.full-text p,
.full-text table,
.page__title {
  margin-bottom: 20px
}
.full-text > .highslide img[style*=left],
.full-text > img[style*=left] {
  margin: 0 10px 10px 0
}
.full-text > .highslide img[style*=right],
.full-text > img[style*=right] {
  margin: 0 0 10px 10px
}
.full-text ul li {
  position: relative;
  padding-left: 20px;
  margin-left: 5px;
  font-weight: 400;
  line-height: 1.6;
  font-size: 13.5px
}
.full-text ul li::before {
  font-family: "Font Awesome 5 Pro";
  content: "\f00c";
  color: #3bb33b;
  position: absolute;
  left: 0;
  top: 0
}
.full-text > ol li + li,
.full-text > ul li + li {
  margin-top: 10px
}
.full-text table,
.video-inside > * {
  width: 100%
}
.full-text table tr td {
  padding: 10px;
  border: 2px solid #fff
}
.full-text table tr:nth-child(odd) {
  background-color: #f2f6f9
}
.full-text table tr:first-child {
  background-color: #cee0ed
}
.full-text table img:not(.emoji) {
  margin: 0;
  max-width: 350px
}
.full-text > :last-child {
  margin-bottom: 0
}
.video-responsive {
  padding-top: 60%;
  position: relative;
  background-color: #000
}
.video-responsive > iframe,
.video-responsive > video {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%
}
.full-text h1,
.full-text h2,
.full-text h3,
.full-text h4,
.full-text h5 {
  font-size: 17px
}
.full-text iframe {
  width: 100%;
  height: 400px;
  margin-bottom: 20px
}
.descr-p {
  margin-bottom: 20px
}
.full-text img {
  display: block;
  border: 4px solid var(--bg);
  border-radius: 8px;
  overflow: hidden;
  background: var(--ui-bg-darker);
  box-shadow: 0 -2px 6px rgba(0,0,0,.08)
}
.page__comments-psform {
  padding: 15px;
  background-color: var(--urank);
  margin-top: 40px
}

.page__comments-psform-form {
  background-color: var(--bg);
  cursor: pointer;
  color: var(--tt-2);
  font-size: 13px;
  display: flex;
  align-items: center;
  padding: 15px
}

.page__comments-psform-form span {
  font-weight: 600;
  font-size: 15px;
  flex: 1;
}
.page__comments-psform-form .fal.fa-pencil {
    font-size: 21px;
    color: var(--accent);
}
.page__comments-psform-form img {
 width:40px;border-radius:6px;
 margin-right: 10px
}

.ava-guest img {
 width:60px;
 margin-right: 5px
}

.page__comments-title {
  font-size: 13px;
  color: var(--tt-2);
  padding: 15px
}
.page__comments-title span {
  font-weight: 600;
  color: var(--tt-3)
}
#dle-comments-list #comment:first-child + .comments-tree-list,
#dle-comments-list .comments-tree-list:first-child {
  margin-top: -15px
}
.page__comments-list {
  padding: 0
}
.page__comments-list--not-comments {
  padding: 0;
  border: 0
}
.add-comments-form.form {
  padding: 0;
  margin-bottom: 0
}
.add-comments-form .form__input,
.add-comments-form .form__textarea-inside textarea,
.add-comments-form__input,
.mass_comments_action select {
  box-shadow: inset 0 0 0 1px #e3e3e3;
  border-radius: 0
}
.comment-item__reply a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  color: var(--bg-btn-hover);
  border: 1px solid var(--comment-device-line);
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,.05)
}
.comment-item__reply i {
  margin-right: 4px;
  font-size: 12px
}

.comment-device {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 12px;
  color: var(--comment-device);
  margin-bottom: 10px;
  margin-top: -5px
}
.comment-device__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  opacity: .85
}
.comment-device__item i {
  font-size: 13px;
  color: #1dcc67
}
.add-comments-form__input {
  margin-bottom: 20px
}
.add-comments-form .d-none,
.comments_subscribe + br {
  display: none
}
.mass_comments_action {
  display: none;
  align-items: center;
  max-width: 800px;
  white-space: nowrap;
  padding: 15px
}
.mass_comments_action select {
  flex: 1 1 0;
  margin: 0 -8px 0 20px
}
.mass_comments_action .bbcodes {
  border-radius: 0;
  padding: 0 10px
}
.show-comms {
  margin-top: 15px
}
.show-comms a {
  padding: 15px;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--bg-2);
  color: var(--tt-3);
  font-size: 13px
}
.has-overlay:hover .has-overlay__icon {
  opacity: 1
}
.comment-item__title {
  font-weight: 500;
  font-size: 18px;
  margin-bottom: 20px
}
.comment-item {
  border-bottom: 1px dashed var(--bg-4);
  padding: 15px
}
.author-rank {
  display: flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  margin-left: 0
}
.author-rank__bar {
  width: 70px;
  height: 3px;
  background-color: #e9ecef;
  border-radius: 2px;
  overflow: hidden;
  flex-shrink: 0
}
.author-rank__fill {
  height: 100%;
  border-radius: 2px;
  transition: width .3s ease
}
.author-rank__label {
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
  line-height: 1
}
.author-rank .rank-level {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--bg-btn-hover)
}
.rank-level i {
  margin-right: 3px
}
.comment-item__header,
.comment-item__main {
  position: relative;
  padding-left: 60px
}
.comment-item__img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  position: absolute;
  left: 0;
  top: -6px
}
.comment-item__letter {
  width: 100%;
  height: 100%;
  text-transform: uppercase;
  font-weight: 500;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 5;
  color: #fff;
  font-size: 18px
}
.comment-item__author,
.comment-item__author a {
  font-weight: 600;
  font-size: 14px;
  color: var(--tt-3);
  display: flex!important;
  align-items: center;
  justify-content: space-between;
  width: 100%
}
.comment-item__date {
  color: var(--tt-2);
  font-size: 12px
}
.comment-item__main {
  margin: 6px 0 13px 0;
  font-size: 13px
}
.comment-item__controls,
.comment-item__footer {
  gap: 10px;
  font-size: 12px
}
.comment-item__rating a {
  color: var(--tt-3);
  display: inline-flex;
  align-items: center;
  gap: 5px
}
.comment-item__rating a > span {
  font-weight: 600
}
.comment-item__rating a::before {
  content: '';
  background: url(../images/heart.svg) 0 0/contain no-repeat;
  width: 17px;
  height: 17px;
  display: inline-block
}
.comment-item__author {
  display: flex;
  flex-direction: column;
  width: 100%
}
.author-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%
}
.author-name {
  font-weight: 600;
  font-size: 14px
}
.author-points {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  font-size: 12px;
  font-weight: 600;
  color: #1dcc67
}
.author-points i {
  font-size: 11px
}
.login-points {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  font-size: 12px;
  font-weight: 600;
  color: #1dcc67;
  margin-left: -8px;
}
.login-points i {
  font-size: 11px
}
.comment-item__controls a {
  color: var(--tt-2)
}
.comment-item__controls a:hover,
.comment-item__footer a:hover,
.page__comments-psform-form:hover,
.show-comms a:hover {
  text-decoration: underline
}
.comment-item__controls .checkbox {
  transform: scale(.8,.8);
  margin-right: -10px
}
.comments-tree-list {
  display: block;
  margin: 0;
  padding: 0;
  list-style: none
}
.comments-tree-list .comments-tree-list {
  padding-left: 50px;
  position: relative
}
.comments-tree-item {
  display: block;
  margin: 0;
  padding: 0
}
.overlay {
  position: fixed;
  z-index: 998;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: .6;
  background-color: #000;
  cursor: pointer;
  display: none
}
@media screen and (max-width:1220px) {
  body {
    background-image: none;
    padding-top: 79px
  }


  .wrapper {
    padding: 0;
    background-image: none;
    overflow: hidden
  }
  .footer {
  padding-bottom: 80px;
}
  .footer,
  .wrapper-container {
    border-radius: 0;
  }
  .cols__right .js-this-in-mobile-menu,
  .has-overlay__icon,
  .header .header__menu,
  .poster .poster__fav,
  .poster__btn-info {
    display: none
  }
  .header {
    padding-top: 15px;
    padding-bottom: 15px;
    position: fixed;
    width: 100%;
    left: 0;
    right: 0;
    border-radius: 0
  }
  .header--hidden {
    transform: translateY(-100%)
  }
  .header__btn-menu {
    display: flex;
    margin-left: 10px;
    padding: 0;
    width: 40px;
    font-size: 18px
  }

  .header__search {
    flex: 1 1 0
  }
  #scrolltop {
    width: 40px;
    height: 40px;
    line-height: 40px;
    font-size: 18px
  }
  .sect__ctrl-menu {
    min-width: 100%
  }
  .sb {
    margin-top: -80px
  }
}
@media screen and (max-width:1130px) {
  .cols {
    display: block
  }
  .fix-margin {
    padding-bottom: 40px
  }
  .fix-margin-full {
    padding-top: 100px
  }
  .cols__right {
    margin: 0 var(--indent-negative);
    margin-top: 60px
  }
}
@media screen and (min-width:345px) and (max-width:1129px) {
  #dle-content,
  .sect .grid-items:not(.sect__content) {
    display: flex;
    overflow-y: hidden;
    overflow-x: auto;
    padding-bottom: 3px;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch
  }
  #dle-content > .grid-item,
  .sect .grid-items:not(.sect__content) > .grid-item {
    flex-shrink: 0;
  }
  #dle-content::-webkit-scrollbar,
  .sect .grid-items:not(.sect__content)::-webkit-scrollbar {
    height: 4px
  }
  #dle-content::-webkit-scrollbar-track,
  .sect .grid-items:not(.sect__content)::-webkit-scrollbar-track {
    background: rgba(0,0,0,.05);
    border-radius: 4px
  }
  #dle-content::-webkit-scrollbar-thumb,
  .sect .grid-items:not(.sect__content)::-webkit-scrollbar-thumb {
    background: var(--accent);
    border-radius: 4px
  }
  #dle-content::-webkit-scrollbar-thumb:hover,
  .sect .grid-items:not(.sect__content)::-webkit-scrollbar-thumb:hover {
    opacity: .8
  }
    .pmovie {
    border-radius: 0;
    margin: 0 var(--indent-negative);
    margin-top: -20px
  }
    .speedbar {
  font-size: 13px;
  color: var(--tt-2);
  margin-bottom: -50px;
  margin-top: 10px
}
.mrg-bottom{margin-bottom: -180px;}
.mrg-bottom-pm{margin-bottom: -70px;}

}
@media screen and (max-width:950px) {
  .card__bottom .btn {
    width: 100%
  }
  .card__meta.flex-grow-1 {
    margin: 0
  }
  .card__text {
    -webkit-line-clamp: 3
  }
  .linek__img {
    margin: 0;
    margin-right: 10px
  }
  .linek {
    padding: 10px
  }
  .count-items .linek::before {
    right: 10px;
    margin-top: -20px
  }
  .sb-full {
    margin-top: 60px
  }
  .sblogin {
    margin-bottom: -60px
  }
}
@media screen and (max-width:760px) {
  .linek__img {
    width: 80px;
    height: 80px
  }
  .logo {
    flex: 1 1 0;
    min-width: 50px;
    max-width: 100%;
    margin-right: 20px
  }
  .sect__ctrl-menu label,
  .sect__ctrl-menu label div,
  .sect__ctrl-menu li,
  .sect__ctrl-menu li a {
    justify-content: center;
    flex-grow: 1;
    text-align: center
  }
  .footer__bottom,
  .footer__menu,
  .footer__text,
  .footer__top {
    justify-content: center;
    min-width: 100%;
    text-align: center
  }
  .footer__menu {
    gap: 20px;
    margin-bottom: 20px
  }
  .sect__ctrl-menu {
    gap: 10px
  }
  .card {
    grid-template-columns: 120px minmax(0,1fr);
    grid-template-rows: min-content min-content 1fr;
    grid-template-areas: "cimg ctitle" "cimg cbtm" "cdesc cdesc";
    gap: 15px 10px
  }
  
  .card__img {
    height: 180px
  }
  .card__bottom {
    align-self: flex-end
  }
  .card .poster__fav {
    right: auto;
    top: 100px;
    left: 150px
  }
  .card__rating-ext span {
    display: none
  }
  .card__title {
    padding: 0;
    margin: 0
  }
  .linek {
    align-items: flex-start
  }
  .linek .poster__fav {
    position: static;
    margin-top: 10px
  }
  .linek__title {
    padding: 0
  }
  .linek__meta {
    margin-top: 5px
  }
  .linek .card__btn {
    margin-left: -90px;
    width: calc(100% + 90px)
  }
  .count-items .linek::before {
    right: 10px;
    margin-top: -5px;
    top: 10px;
    transform: none
  }

  .pmovie__main {
    grid-template-areas: "pimg pheader" "plist plist";
    grid-template-columns: 120px minmax(0,1fr);
    gap: 15px 10px
  }
  .pmovieh1 {
    font-size: 17px;
    margin-bottom: 15px;
    overflow: hidden
  }
  .pmovie__list li {
    padding-left: 130px
  }
  .pmovie__img {
    width: 120px;
    height: 120px
  }
  .pmovie__header {
    padding: 0
  }
  .pmovie__header .poster__fav {
    position: static;
    margin-top: 20px;
    display: inline-flex
  }
  .tabs-block__select button {
    flex-grow: 1
  }
  .page__text .quote {
    margin-left: var(--indent-negative);
    margin-right: var(--indent-negative);
    padding-right: var(--indent)
  }
  .full-text h1,
  .full-text h2,
  .full-text h3,
  .full-text h4,
  .full-text h5 {
    font-size: 18px
  }
  .comments-tree-list .comments-tree-list {
    padding-left: 15px
  }
  .show-comms a {
    margin: 0 var(--indent);
    margin-top: 15px;
    margin-bottom: -5px
  }
  .page__comments {
    border: 0;
    margin-left: var(--indent-negative);
    margin-right: var(--indent-negative)
  }
  .comment-item,
  .page__comments-psform,
  .page__comments-title {
    padding-left: var(--indent);
    padding-right: var(--indent)
  }
  .add-comments-form__input {
    min-width: 100%;
    margin: 0 0 10px 0
  }
  .add-comments-form__btn {
    width: 100%;
    order: 10
  }
  .add-comments-form .form__row--protect .form__caption {
    width: 100%;
    margin: 0 0 10px 0
  }
}
@media screen and (max-width:590px) {
  .login {
    max-width: 90%;
    max-height: 90%;
    overflow-x: hidden;
    overflow-y: auto
  }
  .login__content,
  .login__header,
  .login__social,
  .pages-bg {
    padding-left: 20px;
    padding-right: 20px
  }
  #dle-content,
  .grid-items {
    grid-template-columns: repeat(auto-fill,minmax(120px,1fr));
    gap: 20px;
  }
  .sect--carou .sect__title {
    min-width: calc(100% + 80px);
    margin-right: -80px
  }
  .pmovie__subtitle {
    font-size: 16px
  }
  .pmovie__share-caption {
    display: none
  }
  .pmovie__player-bottom,
  .tabs-block__content {
    margin-left: var(--indent-negative);
    margin-right: var(--indent-negative)
  }
}
@media screen and (max-width:470px) {
  .header__search {
    flex: none;
    width: auto;
    min-width: auto
  }
  .linek__img {
    width: 80px;
    height: 80px
  }
  .coll {
    height: 140px
  }
  .descr {
    padding-top: 40px
  }
  .pagination__pages {
    padding-top: 20px
  }
  .card__meta.flex-grow-1 {
    display: none
  }
  .card__title h3 {
    font-size: 16px;
    padding: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden
  }
  .comment-item__date {
    width: 100%
  }
}
@media screen and (min-width:1220px) {
  .cols--no-cols {
    display: block
  }
  .cols--no-cols .cols__right {
    margin-top: 60px
  }
  .cols--no-cols .sb__grid,
  .cols--no-cols .upd.is-active .upd__items {
    grid-template-columns: repeat(auto-fill,minmax(360px,1fr))
  }
}
.sb__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(280px,1fr));
  counter-reset: num
}
.sb__nogrid{
  counter-reset: num
}

.sb--mt {
  margin-top: 20px
}
.sb,
.sb-full,
.sb__title {
  border-bottom: 1px solid var(--bdc)
}
.poster__title {
  font-size: 14px;
  font-weight: 600
}
.poster__subtitle {
  color: var(--tt-2);
  font-size: 11px;
  font-weight: 500;
  margin-top: 6px
}
.ftop-item .has-overlay__icon {
  padding: 0
}
.ftop-item {
  border-bottom: 1px solid var(--bdc);
  padding: 15px
}
.ftop-item,
.ftop-item__desc {
  position: relative;
  z-index: 5
}
.ftop-item__img {
  width: 60px;
  height: 60px;
  border-radius: 4px;
  margin-right: 15px;
  z-index: 5
}
.ftop-item::before {
  content: counter(num);
  counter-increment: num;
  color: var(--tt-2);
  opacity: .3;
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 40px;
  font-weight: 700
}
.ftop-item__desc {
  min-width: 0;
  overflow: hidden;
  padding-right: 45px
}
.lcomm {
  font-size: 13px;
  border-bottom: 1px solid var(--bdc);
  padding: 15px
}
.lcomm__link {
  display: block;
  font-size: 12px;
  color: var(--tt-3);
  padding-left: 1px;
  font-weight: 500
}
.lcomm__date {
  font-size: 12px;
  color: var(--tt-2);
  margin-left: 10px
}
.lcomm__text {
  margin: 8px 0 10px 0;
  opacity: .66;
  -webkit-line-clamp: 3
}
.lcomm__author {
  font-weight: 500
}
.lcomm__av {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  margin-right: 10px
}
.header__login-img {
  width: 47px;
  height: 47px;
  border-radius: 50%;
  cursor: pointer;
  margin-left: 20px;
  border: 3px solid #fff;              
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
}
.header__favlink {
  font-size: 24px;
  display: block;
  position: relative;
  margin-left: 20px
}
.header__favlink span {
  border-radius: 3px;
  background-color: var(--accent-red);
  color: #fff;
  font-size: 10px;
  position: absolute;
  right: -10px;
  top: -1px;
  min-width: 20px;
  text-align: center
}
.header__login-panel {
  position: absolute;
  right: 0;
  top: 100%;
  width: 240px;
  padding-bottom: 10px;
  background-color: var(--bg);
  box-shadow: 0 10px 20px rgba(0,0,0,.3);
  border-radius: 6px;
  margin-top: 15px
}
.header__login-header {
  padding: 20px;
  color: var(--tt);
  font-weight: 600;
  gap: 20px;
  border-bottom: 1px solid var(--bdc);
  background-color: var(--ui-bg-darker);
  margin-bottom: 10px;
  border-radius: 6px 6px 0 0
}
.header__login-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%
}
.header__login-group span {
  font-size: 12px;
  font-weight: 400;
  margin-top: 2px;
  display: block;
  color: var(--ui-tt-fade)!important
}
.header__login-menu a {
  display: flex;
  align-items: center;
  min-height: 30px;
  padding: 0 20px 0 0
}
.header__login-menu a i {
  width: 40px;
  text-align: center;
  color: var(--accent-red)
}
.header__login-menu-border {
  border-top: 1px solid var(--bdc);
  margin-top: 10px;
  padding-top: 10px
}
.header__login-menu a span {
  font-size: 12px;
  margin-left: auto
}
.header__login-menu a:hover {
  color: var(--accent-green)
}
.header__login-img:hover {
  opacity: .8
}
.pmovie__franchise .sect__title {
  font-size: 18px;
  font-weight: 600
}
.fr-list {
  counter-reset: num;
  display: flex;
  flex-direction: column-reverse;
  margin-bottom: -30px
}
.fr::before {
  content: counter(num);
  counter-increment: num;
  width: 40px;
  text-align: center;
  margin-top: -1px;
  color: var(--tt-accent);
  font-weight: 600;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%)
}
.fr {
  cursor: pointer;
  position: relative;
  padding: 6px 10px;
  padding-left: 40px;
  border-radius: 4px
}
.fr:nth-child(2n) {
  background-color: var(--bg-2)
}
.fr__title {
  display: inline-block;
  max-width: 100%;
  line-height: 20px;
  height: 20px;
  font-weight: 400
}
.fr:hover {
  box-shadow: 0 0 0 1px var(--bdc);
  z-index: 3
}
.fr__year {
  color: var(--tt-2);
  margin: 0 10px;
  font-size: 13px
}
.fr__rating {
  background: var(--accent-gray);
  color: #fff;
  font-weight: 700;
  font-size: 12px;
  width: 30px;
  height: 30px;
  border-radius: 15px
}
.clrrating-1,
.clrrating-2,
.clrrating-3,
.clrrating-4 {
  background-color: var(--accent-red)
}
.clrrating-7,
.clrrating-8 {
  background-color: var(--accent-green)
}
.clrrating-10,
.clrrating-9 {
  background-color: var(--accent-gold)
}
.is-active .fr__title {
  font-weight: 600;
  color: var(--tt-3)
}
.fr.is-active::before {
  content: "";
  display: block;
  left: 13px;
  background-size: 13px 15px;
  background-repeat: no-repeat;
  width: 13px;
  height: 15px;
  background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg width='13px' height='15px' viewBox='0 0 13 15' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='sprite' transform='translate(-170.000000, -111.000000)' fill='%23000000' fill-rule='nonzero'%3E%3Cg id='play_black' transform='translate(170.000000, 111.000000)'%3E%3Cpath d='M12.508581,8.36085 L1.50873,14.86076 C1.033253,15.14173 0.420037,14.98404 0.139074,14.50857 C0.048028,14.35449 0,14.1788 0,13.99984 L0,1 C0,0.44772 0.447715,0 1,0 C1.178966,0 1.354653,0.04803 1.50873,0.13908 L12.508581,6.63899 C12.984057,6.91996 13.141741,7.53317 12.860778,8.00865 C12.774963,8.15388 12.653806,8.27503 12.508581,8.36085 Z' id='Triangle'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E")
}
.dt-is-active .fr.is-active::before {
  filter: invert(.8)
}
.pmovie__btn-scroll {
  width: 130px;
  height: 30px;
  font-size: 12px;
  border-radius: 3px
}
.pmovie__rating-likes {
  gap: 10px;
  padding-top: 2px
}
.pmovie__rating-likes > * {
  display: flex;
  align-items: center;
  height: 30px;
  border-radius: 4px;
  background-color: var(--bg-2);
  color: var(--tt-3);
  padding: 0 10px 0 0;
  overflow: hidden
}
.pmovie__rating-likes > * .fal {
  font-size: 16px;
  margin-right: 10px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  background-color: var(--accent-green);
  color: #fff
}
.pmovie__rating-likes > * + * .fal {
  background-color: var(--red)
}
.pmovie__rating-likes > a:hover {
  background-color: var(--bg-dark);
  color: #fff
}
[data-actorimg] {
  position: relative;
  z-index: 999
}
.actor-preview {
  position: absolute;
  left: 50%;
  bottom: 100%;
  margin-left: -100px;
  width: 200px;
  background-color: var(--bg);
  border-radius: 6px;
  padding: 10px;
  box-shadow: 0 0 20px rgba(0,0,0,.2)
}
.bottom .actor-preview {
  top: 100%;
  bottom: auto
}
@media screen and (max-width:760px) {
  .pmovie .poster__fav {
    display: flex;
    justify-content: space-between;
    gap: 10px
  }
  .pmovie__btn-scroll {
    margin: 0;
    flex-grow: 1;
    padding: 0
  }
  .pmovie__btn-scroll span {
    display: none
  }
  .pmovie__btn-scroll::before {
    content: attr(data-mobtext);
    display: inline
  }
}
@media screen and (max-width:590px) {
  .fr {
    margin: 0 var(--indent-negative);
    padding-right: 20px
  }
  .header__favlink {
    margin-left: 10px
  }
  .header__login-img {
    margin-left: 10px
  }
}
.download-container {
  background: var(--ui-bg-darker);
  box-shadow: 0 -2px 6px rgba(0,0,0,.08);
  border: 5px solid var(--bg);
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  border-bottom: 2px solid var(--bg);
  padding: 5px;
  position: relative;
  margin: 0 -10px;
  margin-top: 15px
}
.content-wrapper {
  display: flex;
  align-items: flex-start;
  gap: 20px
}
.game-icon {
  width: 90px;
  height: 90px;
  flex-shrink: 0;
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px
}
.game-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover
}
.info-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0
}
.meta-info {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 2px
}
.meta-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 14px
}

.meta-item i {
  transform: translateY(1px)
}
.rating-section {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 5px
}

.info-section i {
  font-size: 15px;
  color: var(--accent)
}
.info-section span {
  font-size: 13px;
  color: var(--accent-gray)
}
.meta-title {
  margin-top: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}
.rating-count {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px
}
.button-wrapper {
  margin-top: 12px
}
.download-button {
  background: var(--accent);
  color: #fff;
  border: none;
  padding: 14px 32px;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
  width: 100%
}
a.download-container {
  text-decoration: none;
  color: inherit;
  display: block;
  cursor: pointer
}
a.download-container:hover {
  opacity: .95;
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0,0,0,.08)
}
@media (min-width:590px) {
  .content-wrapper {
    align-items: center
  }
  .button-wrapper {
    margin-top: 0;
    margin-left: auto;
    flex-shrink: 0
  }
  .download-button {
    width: auto;
    min-width: 200px
  }
  .main-content {
    display: flex;
    align-items: center;
    gap: 20px;
    flex: 1
  }
}
@media (max-width:589px) {
  .content-wrapper {
    flex-direction: column;
    gap: 0
  }
  .main-content {
    display: flex;
    gap: 16px;
    width: 100%;
    align-items: flex-start
  }
  .info-section {
    flex: 1;
    gap: 10px
  }
  .meta-info {
    gap: 10px;
    margin-top: 7px
  }
  .button-wrapper {
    width: 100%;
    margin-top: 16px
  }
  .download-button {
    padding: 14px 24px;
    font-size: 15px
  }
}
.rating-ext {
  font-size: 14px;
  font-weight: 500;
  gap: 3px;
  position: relative;
  display: flex;
  align-items: center;
  line-height: 1;
  white-space: nowrap
}
.stars {
  height: 17px;
  width: 85px;
  position: relative;
  left: 0;
  top: 0;
  pointer-events: none;
  background: url(../dleimages/rating.svg);
  transform: scale(1,1);
  transform-origin: left top
}
.stars__rating-fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  z-index: 1;
  background: url(../dleimages/rating.svg) 0 -34px repeat-x
}
.rating-section-b {
  display: inline-flex;
  align-items: center;
  padding: 3px 7px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .4px
}
.rating-section span {
  font-size: 11px
}

.rating-section-b--updated {
  background: rgba(29, 204, 103, 0.12);
  color: #1dcc67;
  border: 1px solid rgba(29, 204, 103, 0.35);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.rating-section-b--mod {
  background: rgba(255,80,80,.15);
  color: #ff5050;
  border: 1px solid rgba(255,80,80,.35)
}
.bmenu-container * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Arial,sans-serif
}
.bmenu-container {
  background-color: #f5f5f5;
  position: relative;
}
.custom-bottom-menu {
  position: fixed;
  bottom: 5px;
  left: 10px;
  right: 10px;
  width: calc(100% - 20px);
  max-width: 600px;
  margin: 0 auto;
  height: 55px;
  background-color: var(--bg);
  display: flex;
  justify-content: space-around;
  align-items: center;
  box-shadow: 0 -2px 20px rgba(0,0,0,.15);
  z-index: 1000;
  border-radius: 20px
}
.custom-menu-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 25%;
  height: 100%;
  text-decoration: none;
  color: var(--ttm);
  transition: all .3s ease;
  position: relative
}
.custom-menu-item:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 0;
  top: 15px;
  bottom: 15px;
  width: 1px;
  background-color: var(--mm-ico-h)
}
.custom-menu-item:hover {
  color: #2ecc71
}
.custom-menu-item i {
  color: var(--mm-accent);
  font-size: 18px;
  margin-top: 5px
}
.custom-menu-item span {
  font-size: 12px;
  text-align: center
}
.custom-menu-item,
.custom-menu-item * {
  outline: 0!important;
  -webkit-tap-highlight-color: transparent
}
.custom-menu-item::before {
  content: "";
  position: absolute;
  bottom: 5px;
  left: 50%;
  transform: translateX(-50%) scaleX(0);
  width: 30px;
  height: 2px;
  background-color: var(--accent);
  border-radius: 2px;
  transition: transform .3s ease
}
.custom-menu-item.active::before {
  transform: translateX(-50%) scaleX(1)
}
.custom-menu-item.active {
  color: var(--mm-accent)
}
@media (max-width:380px) {
  .custom-bottom-menu {
    bottom: 5px;
    left: 5px;
    right: 5px;
    width: calc(100% - 10px);
    border-radius: 15px
  }
}
@media (min-width:768px) and (max-width:1219px) {
  .custom-bottom-menu {
    max-width: 500px
  }
}
@media (min-width:1220px) {
  .custom-bottom-menu {
    display: none
  }
  .bmenu-container {
    padding-bottom: 0
  }
}
.app-scroll-horizontal {
  scroll-behavior: smooth;
  display: flex;
  gap: 10px;
  padding: 5px;
  margin: 10px 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch
}
.app-scroll-horizontal > :last-child {
  margin-right: -10px
}
.app-scroll-horizontal::-webkit-scrollbar {
  display: none
}
.app-scroll-horizontal > * {
  flex: 0 0 auto;
  scroll-snap-align: start
}
.app-margin{margin-bottom: -80px}
.topnews-slider-wrapper {
  position: relative;
}
.rlt {
  margin-left: -20px;
  margin-right: -20px
}
.topnews-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;               /* диаметр кнопки */
  height: 32px;
  border-radius: 50%;        /* всегда круг */
  background: color-mix(in srgb, var(--mm-accent) 80%, transparent);
  border: none;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  font-size: 16px;           /* размер стрелки */
  line-height: 32px;         /* выравнивание стрелки по центру */
  text-align: center;
  color: #fff;
  transition: all 0.2s ease;
  z-index: 10;
  display: none;
  padding: 0;
}
.topnews-nav:hover {
  background: var(--mm-accent);
  box-shadow: 0 4px 15px rgba(0,0,0,.25);
  transform: translateY(-50%) scale(1.1)
}
.topnews-nav--prev {
  left: 15px
}
.topnews-nav--next {
  right: 15px
}
@media (min-width:1025px) {
  .topnews-nav {
    display: flex;
    align-items: center;
    justify-content: center
  }
}
.topnews-card {
  background: var(--bg);
  border-radius: 7px;
  overflow: hidden;
  height: 180px;
  box-shadow: 0 2px 10px rgba(0,0,0,.08);
  transition: transform .25s ease,box-shadow .25s ease
}
.topnews-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 26px rgba(0,0,0,.16)
}
.topnews-link {
  width: 100%;
  height: 100%;
  color: inherit;
  text-decoration: none
}
.topnews-media {
  position: relative;
  width: 45%;
  min-width: 236px;
  height: 100%;
  background-color: #333;
  overflow: hidden
}
.topnews-media-bg {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.4);
  z-index: 1
}
.topnews-icon {
  position: absolute;
  left: 15px;
  top: 15px;
  width: 90px;
  height: 90px;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,.25);
  overflow: hidden;
  border: 4px solid #fff;
  z-index: 2
}
.topnews-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover
}
.topnews-title {
  position: absolute;
  left: 15px;
  top: 115px;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  padding-right: 15px;
  z-index: 2;
  max-width: calc(100% - 30px);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden
}
.topnews-badges {
  position: absolute;
  margin-right: auto;
  margin-left: 15px;
  bottom: 12px;
  display: flex;
  gap: 6px;
  z-index: 3
}
.topnews-badge {
  font-size: 11px;
  padding: 4px 7px;
  border-radius: 4px;
  color: #fff;
  font-weight: 600
}
.topnews-badge--red {
  background: var(--accent)
}
.topnews-badge--blue {
  background: var(--red);
  margin-left: 35px
}
.btn-timer {
  position: relative;
  overflow: hidden;
  background-color: #2ecc71;
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  width: 100%;
  height: 50px;
  pointer-events: auto;
  font-weight: 700;
  --progress: 0%;
  transition: background-color .3s ease;
  margin-bottom: 20px
}
.btn-timer:hover {
  background-color: #27ae60
}
.btn-timer.timer-active {
  background-color: #bbc2c7;
  cursor: not-allowed;
  pointer-events: none
}
.btn-timer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: var(--progress);
  background: #2ecc71;
  z-index: 0;
  transition: width 1s linear
}
.btn-timer span {
  position: relative;
  z-index: 1
}
.btn-real.is-loading {
  pointer-events: none;
  opacity: .95
}
.apk-btn,
.apk-btn:active,
.apk-btn:focus,
.apk-btn:hover,
.apk-btn:visited {
  color: #fff;
  text-decoration: none
}
.buttons-container {
  display: flex;
  flex-direction: column
}
.apk-link {
  background: var(--ui-bg-darker);
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
  border: 4px solid var(--bg);
  padding: 10px;
  position: relative;
  width: 100%;
  margin-bottom: 20px
}
.apk-wrapper {
  display: flex;
  flex-direction: column;
  gap: 10px
}
.apk-meta {
  display: flex;
  gap: 8px
}
.apk-meta-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
  color: var(--accent-gray);
  border: 1.5px solid var(--ui-bg-darkest);
  background: 0 0;
  transition: border-color .2s,color .2s,box-shadow .2s;
  box-shadow: 0 2px 6px rgba(0,0,0,.08)
}
.apk-meta-btn:hover {
  border-color: #f5f5f5;
  box-shadow: 0 3px 10px rgba(0,0,0,.13)
}
.apk-meta-btn,
.apk-meta-btn:active,
.apk-meta-btn:focus,
.apk-meta-btn:focus-visible {
  background: inherit;
  color: inherit
}
.apk-buttons {
  display: flex;
  gap: 10px
}
.apk-btn {
  background: var(--accent-red);
  color: #fff;
  text-decoration: none;
  padding: 14px 32px;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
  flex: 1
}
.apk-btn:hover {
  opacity: .9
}
@media (max-width:590px) {
  .apk-meta-btn {
    flex: 1;
    justify-content: center
  }
  .apk-buttons {
    flex-direction: column
  }
  .apk-btn {
    width: 100%;
    padding: 14px 24px;
    font-size: 15px
  }
}
.custom-spoiler-box {
  background: var(--ui-bg-darker);
  border-radius: 4px;
  padding: 12px 15px;
  position: relative;
  margin: 15px 0 10px 0;
  transform: translateY(-10px);
  overflow: hidden;
  border: 2px solid var(--ui-bg-darkest);
  box-shadow: 0 1px 4px rgba(200,40,40,.12);
  transition: max-height .3s ease;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  max-height: 48px
}
.custom-spoiler-box.active {
  cursor: default
}
@media (hover:none) {
  .custom-spoiler-box {
    cursor: pointer!important
  }
}
.custom-spoiler-box .spoiler-btn {
  all: unset;
  position: absolute;
  right: 8px;
  bottom: 2px;
  background: #757b85;
  color: #fff;
  width: 28px;
  height: 28px;
  border-radius: 4px;
  cursor: pointer;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  backdrop-filter: blur(4px);
  transition: background .2s,transform .2s
}
.custom-spoiler-box.active .spoiler-btn {
  background: rgba(235,77,75,.95)
}
.custom-spoiler-box.active .spoiler-btn:hover {
  background: #757b85
}
.custom-spoiler-box .spoiler-btn:hover {
  background: rgba(235,77,75,.95)
}
.custom-spoiler-box ul li {
  position: relative;
  padding-left: 20px;
  margin-left: 5px;
  font-weight: 400;
  line-height: 1.6;
  font-size: 13.5px
}
.custom-spoiler-box ul li::before {
  font-family: "Font Awesome 5 Pro";
  content: "\f054";
  color: #eb4d4b;
  position: absolute;
  left: 0;
  top: 0
}
.custom-spoiler-box ul li:not(:last-child) {
  margin-bottom: 6px
}
.custom-spoiler-box .spoiler-title {
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 7px;
  letter-spacing: .5px
}
.custom-spoiler-box .spoiler-title::before {
  font-family: "Font Awesome 5 Pro";
  content: "\f071";
  font-size: 14px;
  font-weight: 900;
  color: #f0932b;
  flex-shrink: 0
}
.custom-spoiler-box::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 20px;
  background: linear-gradient(to bottom,transparent,var(--ui-bg-darker));
  pointer-events: none;
  transition: opacity .3s ease
}
.custom-spoiler-box.active::after {
  opacity: 0
}
#report-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.7);
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center
}
#report-modal[style*="display: block"],
#report-modal[style*="display:block"] {
  display: flex!important
}
.report-modal-content {
  background: #fff;
  padding: 30px;
  border-radius: 8px;
  max-width: 400px;
  width: 90%;
  box-shadow: 0 4px 20px rgba(0,0,0,.3)
}
.report-modal-content h3 {
  margin-top: 0;
  color: #333;
  font-size: 19px;
  margin-bottom: 20px
}
.report-options {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-bottom: 25px
}
.report-option {
  display: flex;
  align-items: center;
  padding: 15px;
  border: 2px solid #e0e0e0;
  border-radius: 6px;
  cursor: pointer;
  transition: all .3s
}
.report-option:hover {
  border-color: #4caf50;
  background: #f9f9f9
}
.report-option input[type=radio] {
  margin-right: 15px;
  cursor: pointer
}
.report-text {
  font-size: 16px;
  color: #333
}
.report-option input[type=radio]:checked ~ .report-text {
  font-weight: 700
}
.report-option:has(input[type=radio]:checked) {
  border-color: #57bb8a
}
.report-buttons {
  display: flex;
  gap: 10px;
  justify-content: flex-end
}
.btn-cancel,
.btn-submit {
  padding: 10px 25px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  transition: all .3s
}
.btn-submit {
  background: #57bb8a;
  color: #fff
}
.btn-submit:hover {
  background: #54cc91
}
.btn-cancel {
  background: #f44336;
  color: #fff
}
.btn-cancel:hover {
  background: #da190b
}
.btn-report {
  background: #f0932b;
  width: 300px;
  text-align: center
}
.btn-report:hover {
  background: #f0932b
}
.btn-report i {
  margin-right: -5px
}
@media screen and (max-width:760px) {
  .btn-report {
    order: 1;
    width: 100%
  }
  .rlt-com {
  margin-left: -20px;
  margin-right: -20px
}
}
.top-user {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--bg-2)
}
.sb__grid {
  counter-reset: num
}
.top-user::before {
  color: var(--tt-3);
  opacity: .15;
  position: absolute;
  right: 10px;
  top: 28%;
  transform: translateY(-50%);
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
  pointer-events: none;
  z-index: 0
}
.ifitem__separator {
  margin-left: -5px;
  margin-right: 5px;
  border-bottom: 1px solid rgba(29, 204, 103, 0.2);
  opacity: .5
}
.top-user__avatar {
  background: #fff;
  box-shadow: 0 0 0 2px var(--top-ava),0 4px 12px rgba(0,0,0,.25);
  margin-left: 10px;
  flex-shrink: 0;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  overflow: hidden;
  display: block
}
.top-user__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover
}
.top-user__letter {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  color: #fff;
  font-size: 20px;
  font-weight: 700
}
.top-user__info {
  flex: 1;
  min-width: 0
}
.top-user__name {
  display: block;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  color: var(--accent-gray);
  text-overflow: ellipsis
}
.top-user__name:hover {
  color: #45aaf2
}
.top-user__nameline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 8px;
}
.top-user__nameline .top-user__name {
  margin-bottom: 0;
  flex: 1;
  min-width: 0;
}
.top-user__points-badge {
  flex-shrink: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--tt-2);
  background: rgba(0, 180, 90, 0.04);
  border: 1px solid rgba(29, 204, 103, 0.2);
  border-radius: 20px;
  padding: 2px 8px;
  white-space: nowrap;
  margin-right: 5px;
}
.top-user__points-badge i {
  font-size: 15px;
  color: var(--accent);
}
.top-user__stats {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 7px;
  padding-top: 5px
}
.top-user__stat {
  margin-left: -10px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  flex: 1;
  justify-content: center;
  min-width: 0
}
.top-user__stat i {
  color: var(--accent);
  font-size: 13px
}

.urank {
  margin: 15px;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--urank)
}

.urank__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.urank__left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.urank__meta {
  display: flex;
  align-items: center;
  gap: 6px;
}

.urank__badge {
  padding: 4px 14px;
  border-radius: 30px;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .4px;
  box-shadow: 0 3px 10px rgba(0,0,0,.2);
  white-space: nowrap;
}
.urank__next {
  display: flex;
  align-items: center;
  gap: 5px;
}
.urank__next-pts {
  font-size: 11px;
  opacity: .65
}
.urank__next-badge {
  padding: 3px 10px;
  border-radius: 30px;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  opacity: .75;
  white-space: nowrap;
}
.urank__level {
  font-size: 12px;
  opacity: .7;
}
.urank__pct {
  font-size: 13px;
  font-weight: 700;
  opacity: .9;
  letter-spacing: .3px;
}

.urank__track {
  position: relative;
  height: 8px;
  background: var(--border-color, #e5e5e5);
  border-radius: 20px;
  overflow: hidden;
}
.urank__fill {
  height: 100%;
  border-radius: 20px;
  animation: rank-grow 1s ease-out both;
  box-shadow: 0 0 10px rgba(0,0,0,.2);
}
.urank__fill::after {
  content: "";
  position: absolute;
  top: 0;
  left: -40%;
  width: 40%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.4), transparent);
  animation: shine 2.5s infinite;
}

@keyframes shine {
  0%   { left: -40%; }
  100% { left: 120%; }
}
@keyframes rank-grow {
  from { width: 0; }
}

@media (max-width: 480px) {

  .urank__badge {
    flex-shrink: 0;
  }

  .urank__next {
    flex: 1;                
    display: flex;
    align-items: center;
    justify-content: flex-end; 
    gap: 6px;
    min-width: 0;
  }

  .urank__head {
    flex-direction: column;
    flex-wrap: nowrap; 
  }

  .urank__left {
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: nowrap; 
  }

}

.custom-attach-btn {
  width: 60px;
  display: flex;
  margin-left: 5px;
  align-items: center;
  justify-content: center;
  color: var(--spo-t);
  background-color: var(--comm-img-bg);
  border-radius: 4px;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
  transition: box-shadow .2s ease,transform 50ms ease;
  flex-shrink: 0
}
@media (max-width:767px) {
  .custom-submit-btn {
    flex-grow: 1;
    width: auto
  }
}
.clrfixcom {
  border-bottom: 1px solid var(--comment-device-line);
  padding-top: 10px;
  padding-bottom: 8px;
  margin-bottom: 15px
}
.clrfixcom img {
  border-radius: 6px
}
.comm__text-fix {
  background-color: var(--comment-device-line);
  border-radius: 6px;
  padding: 15px 20px;
  font-size: 14px;
  margin-top: 15px;
  margin-bottom: 15px
}
.comm__text-fix::before {
  content: '';
  border: 10px solid transparent;
  border-bottom-color: var(--comment-device-line);
  position: absolute;
  left: 35px;
  bottom: 100%
}
.app-links-bar {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 10px 16px;
  margin: 25px -7px 12px;
  background: var(--comment-text);
  border: 1px solid var(--comment-device-line);
  box-shadow: 0 0 16px rgba(0, 0, 0, 0.15);
  border-radius: 4px
}
.add-favorites,
.app-link,
.del-favorites {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  color: var(--comment-device);
  cursor: pointer;
  transition: color .2s ease,opacity .2s ease
}
.add-favorites:hover,
.app-link:hover,
.del-favorites:hover {
  color: #1dcc67
}
.add-favorites span,
.app-link i,
.del-favorites span {
  font-size: 14px;
  opacity: .8
}
.fav-added {
  color: #e74c3c!important;
  opacity: 1!important
}
.app-link:has(.fav-added):hover {
  color: #e74c3c
}
@media (max-width:480px) {
  .app-links-bar {
    gap: 12px
  }
  .add-favorites,
  .app-link,
  .del-favorites {
    flex: 1;
    font-size: 12px;
    justify-content: center;
    text-align: center
  }
  .app-link-rating {
    flex: 0 0 auto;
    min-width: 60px
  }
}
.message-info-rkn {line-height:1.5;border-radius: 8px 8px 0 0;background-color:var(--bg);position:relative;padding:15px 20px 15px 64px;}
.title-rkn {font-weight:500}
.message-info-rkn::before {content:"\f071";font-family:'Font Awesome 5 Pro';border-radius: 8px 0 0 8px;font-size:22px;color:#fff;background-color:var(--red);position:absolute;left:0;top:0;width:44px;height:100%;display:grid;place-items:center}

.form__row--protect {
    background: var(--bg);
    padding: 10px 15px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.form__label--important {
    font-weight: 600;
}


.form__question {
    white-space: nowrap;
    margin: 0;
}

.form__input {
    flex: 1;
}

/* Поиск и сортировка */
.tu-controls {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    margin-bottom: 5px;
    background-color: var(--bg);
    padding: 20px;
    border-radius: 12px;
}

.tu-controls-top {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.tu-search {
    display: flex;
    border: 1px solid var(--top-b);
    border-radius: 20px;
    overflow: hidden;
    width: 220px;
}
.tu-search input {
    flex: 1;
    border: none;
    padding: 7px 14px;
    font-size: 13px;
    background: transparent;
    outline: none !important;
    box-shadow: none !important;
    color: var(--text, #333);
    min-width: 0;
}
.tu-search button {
    border: none;
    background: none;
    padding: 7px 12px;
    cursor: pointer;
    color: var(--accent, #57bb8a);
    font-size: 14px;
    flex-shrink: 0;
}
.tu-search input:focus {
    outline: none !important;
    box-shadow: none !important;
}
.tu-sort {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    align-items: center;
    flex: 1;
}
.tu-sort::-webkit-scrollbar { display: none; }

.tu-sort-btn {
    font-size: 12px;
    font-weight: 600;
    padding: 5px 11px;
    border-radius: 20px;
    text-decoration: none;
    color: var(--top-color);
    background: var(--urank);
    transition: all .2s;
    white-space: nowrap;
    flex-shrink: 0;
}
.tu-sort-btn:hover { color: var(--accent, #57bb8a); }
.tu-sort-btn.tu-sort--active { background: var(--accent, #57bb8a); color: #fff; }

/* Мобильные — колонка */
@media (max-width: 479px) {
    .tu-controls {
        flex-direction: column;
        align-items: stretch;
        padding: 12px;
    }
    .tu-search {
        width: 100%;
    }
        .tu-sort {margin-top: 5px;}
}


/* ═══════════════════════════════════════
   TOP USERS — карточки (мобильный дизайн)
   ═══════════════════════════════════════ */

.tu-card {
    background: var(--bg);
    border: 0.5px solid rgba(0,0,0,0.1);
    border-radius: 12px;
    padding: 12px;
    font-size: 13px;
}

.tu-card:last-child:not(.tu-card--me) {
    margin-bottom: -80px;
}

.tu-card.rank-me { outline: 2px solid var(--accent, #45aaf2); }

/* ── Шапка ── */
.tu-head {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* ── Аватар ── */
.tu-avatar {
    position: relative;
    flex-shrink: 0;
}
.tu-avatar img {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    border: 1.5px solid rgba(0,0,0,0.08);
}
.tu-rank-badge {
    position: static;
    min-width: 24px;
    height: 24px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
    background: #57bb8a;
    align-self: flex-start;
    flex-shrink: 0;
}
.rank-1 .tu-rank-badge { background: #E6C200; }
.rank-2 .tu-rank-badge { background: #B0B0B0; }
.rank-3 .tu-rank-badge { background: #B87333; }

/* ── Имя и бейджи ── */
.tu-main {
    flex: 1;
    min-width: 0;
}
.tu-name {
    font-size: 14px;
    font-weight: 600;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-decoration: none;
    display: block;
}
.tu-name:hover { opacity: 0.8; }

.tu-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
}
.tu-pill {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 20px;
    font-weight: 600;
    color: #fff;
    display: inline-block;
}
.tu-pill--group {
    color: var(--comment-device);
    border: 0.5px solid rgba(0,0,0,0.15);
}

/* ── 3 быстрых стата ── */
.tu-quick {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin-top: 10px;
}
.tu-stat {
    background: var(--top-b);
    border-radius: 8px;
    padding: 6px 8px;
    text-align: center;
}
.tu-stat-val {
    font-size: 15px;
    font-weight: 600;
    color: #57bb8a;
}
.tu-stat-lbl {
    font-size: 10px;
    color: #999;
    margin-top: 1px;
}

/* ── Последний визит ── */
.tu-last {
    font-size: 11px;
    color: #aaa;
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 5px;
}
.tu-last-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ccc;
    flex-shrink: 0;
}
.tu-last-dot.tu-online  { background: #57bb8a; }
.tu-last-dot.tu-week    { background: #45aaf2; }
.tu-last-dot.tu-month   { background: #f7b731; }
.tu-last-dot.tu-offline { background: #ccc;    }

/* ── Кнопка раскрытия ── */
.tu-expand-btn {
    width: 100%;
    margin-top: 10px;
    background: var(--urank);
    border: 0.5px solid rgba(0,0,0,0.1);
    opacity: 0.7;
    border-radius: 8px;
    padding: 6px;
    font-size: 12px;
    color: var(--top-color);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    transition: background 0.15s;
    font-family: inherit;
}
.tu-expand-btn:hover { background: var(--urank); color: var(--top-color); opacity: 0.9;}
.tu-expand-btn span { color: var(--top-color);}
.tu-expand-btn svg { transition: transform 0.2s; }
.tu-expand-btn.is-open svg { transform: rotate(180deg); }

/* ── Детали (скрытый блок) ── */
.tu-detail {
    display: none;
    margin-top: 8px;
    border-top: 0.5px solid rgba(0,0,0,0.08);
    padding-top: 8px;
}
.tu-detail.is-open { display: block; }

/* ── Строки деталей с пунктирной линией по центру ── */
.tu-detail-row {
    display: flex;
    align-items: center;
    padding: 5px 0;
    font-size: 12px;
    gap: 6px;
}
.tu-detail-row span:first-child {
    color: #888;
    white-space: nowrap;
    flex-shrink: 0;
}
.tu-detail-row .tu-dots {
    flex: 1;
    border-top: 1px dashed rgba(0,0,0,0.15);
    margin: 0 4px;
    align-self: center;
}
.tu-detail-row span:last-child {
    font-weight: 600;
    color: #57bb8a;
    white-space: nowrap;
    flex-shrink: 0;
}

/* ── Кнопка профиля ── */
.tu-profile-btn {
    display: block;
    margin-top: 10px;
    text-align: center;
    background: #57bb8a;
    color: #fff !important;
    font-size: 12px;
    font-weight: 600;
    padding: 8px;
    border-radius: 8px;
    text-decoration: none !important;
    transition: background 0.15s;
}
.tu-profile-btn:hover { background: #4aa679; }

/* ── Адаптив карточек ── */
@media (max-width: 360px) {
    .tu-quick { gap: 4px; }
    .tu-stat-val { font-size: 13px; }
    .tu-avatar img { width: 46px; height: 46px; }
}


/* ═══════════════════════════════
   "Вы в топе" — блок tu-me-wrap
   ═══════════════════════════════ */

.tu-me-wrap {
    margin-bottom: 16px;
}

.tu-me-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--red);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.tu-me-label i {
    font-size: 15px;
}
.tu-me-label strong {
    color: var(--accent, #45aaf2);
}

/* Карточка "я" — акцентная рамка */
.tu-card--me {
    outline: 2px solid var(--accent, #45aaf2);
    outline-offset: 0px;
}

.tu-card--me .tu-detail.is-open {
    border-top: 0.5px solid rgba(0,0,0,0.08);
}

/* Разделитель после блока */
.tu-divider {
    border: none;
    border-top: 2px dashed rgba(0,0,0,0.1);
    margin: 0 0 16px;
}