/* ============================================================
   SCAT-EXTREME.ORG — styles.css (FINAL)
   Единственный CSS файл темы. Заменяет common.css ПОЛНОСТЬЮ.
   В main.tpl подключать только этот файл.

   ИСПРАВЛЕНО:
   - Убран резиновый грид #dle-content из common.css (он ломал 4 колонки)
   - Убран #dle-content > *:not(.grid-item) {grid-column:1/-1} (склеивал карточки)
   - video-responsive: padding-top правильный 56.25% (было 2% - опечатка)
   - ::selection: акцент вместо красного
   - .img-mask: исправлен transpatent → transparent
   - .page__cols: minmax(0,1fr) + min-width:0 на колонках
   - Всё через специфичность, БЕЗ !important
   ============================================================ */


/* ============================================================
   THEME VARIABLES
   ============================================================ */
:root{
  /* Dark surfaces */
  --bg:   #222;
  --bg-2: #333;
  --bg-3: #111;
  --bg-4: #1a1a1a;
  --bg-5: #101010;

  /* Text / borders */
  --tt:   #eee;
  --tt-2: #ccc;
  --bdc:  #111;
  --bsh:  -1px 2px 4px rgba(0,0,0,0.2);

  /* Accent (золото) */
  --accent:        #d6a23a;
  --accent-darker: #a9791b;
  --gradient:      linear-gradient(90deg,#d6a23a 0%,#7a4d2a 100%);

  /* UI */
  --ui-bg:         #333;
  --ui-bg-darker:  #222;
  --ui-bg-darkest: #111;
  --ui-bg-accent:  #111;
  --ui-text-color-on-accent: #fff;
  --ui-bdc:        #111;

  /* Layout */
  --indent: 20px;
  --indent-negative: -20px;
  --maximum-width: 1500px;

  /* Helpers */
  --link:   var(--accent);
  --link-h: #f0bb3c;
  --chip-bg:  rgba(214,162,58,.12);
  --chip-brd: rgba(214,162,58,.35);
  --label-bg: rgba(214,162,58,.15);
  --label-brd:rgba(214,162,58,.45);
  --star:    #f0bb3c;
}


/* ============================================================
   RESET
   ============================================================ */
*{background:transparent;margin:0;padding:0;outline:none;border:0;box-sizing:border-box}
ol,ul{list-style:none}
table{border-collapse:collapse;border-spacing:0}
img,table,iframe,video,frame,embed,object{max-width:100%}
body{font:14px 'Montserrat',sans-serif;line-height:normal;color:var(--tt);background:var(--bg);min-height:100%;width:100%;font-weight:400;overflow-x:hidden}
a{color:var(--tt);text-decoration:none}
a:hover,a:focus{color:var(--tt);text-decoration:none}
h1,h2,h3,h4,h5{font-weight:700;font-size:24px}
::selection{background:var(--accent);color:#000}
b,strong,.bolder{font-weight:700}


/* ============================================================
   FORMS (общие стили для input/button/textarea/select)
   Кнопки тут глобальные. Если в каком-то блоке нужны свои —
   используем специфичные селекторы (.layout .something button)
   ============================================================ */
button,select,textarea,input[type="text"],input[type="password"],input[type="button"],input[type="submit"]{
  appearance:none;-webkit-appearance:none;font-size:16px;font-family:inherit
}
button,.btn,input[type="button"],input[type="reset"],input[type="submit"],
.form__btn,.self_delete_link,.qq-upload-button,.pm__links a,.usp__btn a{
  display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;text-align:center;padding:0 20px;height:40px;
  font-size:15px;font-weight:400;white-space:nowrap;
  background-color:var(--accent);color:#fff;border-radius:3px;box-shadow:none
}
button:hover,.btn:hover,input[type="button"]:hover,input[type="reset"]:hover,input[type="submit"]:hover,
.form__btn:hover,.qq-upload-button:hover,.pm__links a:hover,.usp__btn a:hover,.self_delete_link:hover{
  background-color:var(--accent-darker);color:#fff
}
button:active,input[type="button"]:active,input[type="submit"]:active{
  box-shadow:inset 0 1px 4px 0 rgba(0,0,0,0.1)
}

input[type="text"],input[type="password"]{height:40px;line-height:40px;border-radius:4px;padding:0 15px}
select{height:40px;padding:0 15px;display:block}
select:not([multiple]){background-image:url(../dleimages/chevron.svg);padding-right:30px;background-repeat:no-repeat;background-position:right 15px top 50%;background-size:.6em auto}
select option{padding:6px 10px}
select[multiple]{padding:0 5px}
textarea{padding:15px;overflow:auto;vertical-align:top;resize:vertical}
input[type="text"],input[type="password"],select,textarea{
  width:100%;background-color:#fff;color:#000;
  box-shadow:inset 0 0 0 1px #e3e3e3,inset 1px 2px 5px rgba(0,0,0,0.1)
}
input[type="text"]:focus,input[type="password"]:focus,textarea:focus{
  box-shadow:inset 0 0 0 1px var(--accent),inset 1px 2px 5px rgba(0,0,0,0.1)
}
input::placeholder,textarea::placeholder{color:#000;opacity:.4;font-size:13px}
input:focus::placeholder,textarea:focus::placeholder{color:transparent}


/* ============================================================
   UTILITY (хелперы — нужны для DLE классов и шаблона)
   ============================================================ */
.img-box,.img-wide,.img-responsive,.img-fit-cover{overflow:hidden;position:relative}
.img-responsive{padding-top:60%}
.img-responsive--portrait{padding-top:150%}
.img-box > img,.img-responsive > img{width:100%;min-height:100%;display:block}
.img-responsive > img{position:absolute;left:0;top:0}
.img-wide img,.img-wide > a{width:100%;display:block}
.img-fit-cover img{width:100%;height:100%;object-fit:cover}
.clr{clear:both}
.clearfix::after{content:"";display:table;clear:both}
.ws-nowrap{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.line-clamp{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.vw100{margin:0 calc((100% - 100vw)/2);padding:0 calc((100vw - 100%)/2)}
.img-mask::before{content:'';position:absolute;z-index:1;left:0;right:0;bottom:0;height:70%;background:linear-gradient(to top,#000 0%,transparent 100%);opacity:.6}

/* Flex helpers (используются в шаблоне через классы d-flex, fd-column и т.д.) */
.d-flex,.fx-row{display:flex;flex-wrap:wrap;flex-direction:row}
.fd-column,.fx-col{flex-direction:column;flex-wrap:nowrap}
.jc-space-between,.fx-row{justify-content:space-between}
.jc-flex-start,.fx-start{justify-content:flex-start}
.jc-center,.fx-center{justify-content:center}
.jc-flex-end{justify-content:flex-end}
.ai-flex-start{align-items:flex-start}
.ai-center,.fx-middle{align-items:center}
.ai-flex-end{align-items:flex-end}
.order-first{order:-1}
.order-last{order:10}
.flex-grow-1,.fx-1,.stretch-free-width{flex:1 1 0;max-width:100%;min-width:50px}
.btn-icon,.centered-content{display:inline-flex;justify-content:center;align-items:center}
.icon-at-left [class*="fa-"],.icon-left .icon{margin-right:.5em}
.icon-at-right [class*="fa-"],.icon-right .icon{margin-left:10px}
.hidden,#dofullsearch,.form__header .form__btn,.comment-item__main .quote + br,.d-none{display:none}
.animated-element,button,.btn,.page__rating-bar-progress,.header__menu > li:hover .header__menu-hidden{transition:all .3s}

/* Lazy load */
[data-src]{opacity:0;transition:opacity .3s}
[data-src].lazy-loaded{opacity:1}


/* ============================================================
   FONTS (Montserrat)
   ============================================================ */
@font-face{font-family:'Montserrat';src:url('../webfonts/montserrat-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Montserrat';src:url('../webfonts/montserrat-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Montserrat';src:url('../webfonts/montserrat-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Montserrat';src:url('../webfonts/montserrat-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}


/* ============================================================
   BASE LAYOUT (шаблон wrapper/header/footer)
   ============================================================ */
.wrapper{min-width:320px;position:relative}
.wrapper-container{max-width:var(--maximum-width);margin:0 auto;position:relative;z-index:20}
.wrapper-main{padding:0 var(--indent);min-height:100vh}
.header{background-color:var(--bg);position:relative;z-index:100;padding-top:20px}
.content{padding:40px 0}
.footer{padding:40px 0}
#scrolltop{position:fixed;width:60px;height:60px;line-height:60px;right:10px;bottom:10px;z-index:990;display:none;background-color:var(--bg-2);color:var(--tt-2);cursor:pointer;font-size:24px;border-radius:50%;text-align:center;box-shadow:0 5px 10px rgba(0,0,0,.2)}


/* ============================================================
   HEADER, NAV
   ============================================================ */
.logo{display:inline-flex;align-items:center;font-weight:700;font-size:20px;margin-right:60px;height:40px;text-transform:uppercase;background:url(../images/logo.svg) 0 center / 30px no-repeat;padding-left:40px}
.logo span{color:var(--accent);margin:0 3px;text-transform:uppercase;display:inline-block}
.header__menu>li{margin-right:30px}
.header__menu>li>a{height:40px;text-transform:uppercase;font-size:14px;padding:0 20px;display:flex;align-items:center;font-weight:600;position:relative;z-index:5}
.header__menu-hidden{background-color:var(--bg-2);box-shadow:0 20px 20px rgba(0,0,0,.1);position:absolute;left:0;top:48px;padding:40px;padding-bottom:15px;z-index:50;width:100%;visibility:hidden;opacity:0;transform:translateY(30px)}
.header__menu>li:hover .header__menu-hidden{visibility:visible;opacity:1;transform:translateY(0)}
.submenu>a:after{content:"\f107";font-weight:300;font-family:'Font Awesome 5 Pro';margin-left:10px;display:inline-block;font-size:24px}
li.submenu:hover>a:after{transform:rotate(-180deg)}
.menu{column-width:220px;column-gap:40px}
.menu li{margin-bottom:15px;break-inside:avoid;position:relative}
.menu li a{display:block;padding-right:30px}
.menu li span{position:absolute;right:0;top:0;color:var(--tt-2);font-size:13px;pointer-events:none}
.menu li a:hover{text-decoration:underline}

.header__search{position:relative;z-index:5;margin-right:10px}
.header__search input,.header__search input:focus{padding:0 60px 0 20px;border-radius:0;background:none;box-shadow:none;color:#fff}
.header__search input:not(:focus)::placeholder{color:#999;opacity:1;font-size:14px}
.header__search button{position:absolute;z-index:5;right:0;top:0;width:60px;padding:0;background:none;color:#fff;font-size:18px}
.header__search::before,.header__search button::before,
.header .header__menu>li>a.is-active::before,
.header .header__menu>li:hover>a::before{
  content:'';position:absolute;left:0;top:0;right:0;bottom:0;
  background-color:var(--bg-3);z-index:-1;transform:skew(-15deg);box-shadow:var(--bsh)
}
.header__search button::before,.header .header__menu>li>a.is-active::before{background:var(--gradient)}
.header__login,.header__fav{font-size:20px;cursor:pointer;margin-left:20px}
.header__login:hover,.header__fav:hover{color:var(--accent)}
.header .header__menu>li>a.is-active,.header .header__menu>li:hover>a{color:#fff}


/* ============================================================
   ОТКЛЮЧЕНИЕ дефолтного DLE mobile menu (свой бургер)
   ============================================================ */
.mobile-menu,.mobile-menu-close,.overlay{display:none}


/* ============================================================
   LAYOUT: SIDEBAR + CONTENT
   ============================================================ */
.layout{display:flex;align-items:flex-start;gap:24px;padding:30px 0}
.layout > .sidebar{width:210px;flex-shrink:0}
.layout > .content{min-width:0;padding:0;flex:1}


/* ============================================================
   SIDEBAR ПАНЕЛИ (Categories / Genres / Best Sites / Actresses)
   ============================================================ */
.layout .sidebar > div,
.layout .sidebar > section,
.scat-sidebar__body > div,
.scat-sidebar__body > section{
  background:var(--bg-2);
  border-radius:8px;
  padding:14px;
  margin-bottom:18px;
  box-shadow:0 10px 20px rgba(0,0,0,.15)
}

.layout .sidebar .usp-panel__header,
.layout .sidebar .genre-block__title,
.scat-sidebar__body .usp-panel__header,
.scat-sidebar__body .genre-block__title{
  font-size:15px;font-weight:700;color:var(--tt);
  margin:0 0 12px;padding-bottom:8px;
  border-bottom:2px solid var(--bg-3);
  position:relative
}
.layout .sidebar .usp-panel__header::after,
.layout .sidebar .genre-block__title::after,
.scat-sidebar__body .usp-panel__header::after,
.scat-sidebar__body .genre-block__title::after{
  content:'';position:absolute;left:0;bottom:-2px;
  width:36px;height:2px;background:var(--accent)
}

/* Main Categories */
.custom-categories{display:flex;flex-direction:column;gap:6px}
.custom-category{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:6px;background:var(--bg-3);color:var(--tt);font-weight:600;font-size:13px;transition:background .2s,color .2s}
.custom-category:hover{background:var(--accent);color:#000}
.custom-category__icon{width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;font-size:15px}
img.custom-category__icon{border-radius:3px;object-fit:contain}

/* Genres */
.genre-block__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.genre-block__header .genre-block__title{margin:0;border:0;padding:0}
.genre-block__count{font-size:10px;color:var(--tt-2);background:var(--bg-3);padding:3px 7px;border-radius:10px}
.genre-block__grid{display:flex;flex-direction:column;gap:6px}
.genre-block__item{margin:0}
.genre-block__link{display:block;padding:8px 10px;border-radius:6px;background:var(--bg-3);color:var(--tt);font-size:13px;font-weight:600;transition:background .2s,color .2s}
.genre-block__link:hover{background:var(--accent);color:#000}
.genre-block__name{display:flex;align-items:center;gap:9px}
.genre-block__icon{font-size:14px;width:18px;text-align:center}

/* Best Sites — переопределяем глобальные .usp__btn a (которые делают кнопкой) */
.layout .sidebar .usp-panel__body,
.scat-sidebar__body .usp-panel__body{display:flex;flex-direction:column;gap:5px}
.layout .sidebar .usp-panel__body a,
.scat-sidebar__body .usp-panel__body a{
  display:flex;align-items:center;justify-content:flex-start;
  width:auto;height:auto;padding:8px 10px;
  border-radius:6px;background:var(--bg-3);color:var(--tt);
  font-weight:600;font-size:13px;text-transform:none;letter-spacing:normal;
  transition:background .2s,color .2s
}
.layout .sidebar .usp-panel__body a:hover,
.scat-sidebar__body .usp-panel__body a:hover{background:var(--accent);color:#000}

/* Actress block (.ab2) */
.ab2 *,.ab2 *::before,.ab2 *::after{box-sizing:border-box}
.ab2__header{display:flex;align-items:center;margin-bottom:10px;padding-bottom:8px;border-bottom:2px solid var(--bg-3)}
.ab2__title{font-size:15px;font-weight:700;color:var(--tt);margin:0;display:flex;align-items:center;gap:6px}
.ab2__title-icon{font-size:16px;color:var(--accent)}
.ab2__search-row{display:flex;gap:6px;align-items:center;margin-bottom:10px}
.ab2__search{position:relative;flex:1;min-width:0}
.ab2__search-input{width:100%;padding:7px 8px 7px 28px;border-radius:8px;border:1.5px solid var(--bg-3);background:var(--bg-3);color:var(--tt);font-size:12px;font-family:inherit;height:auto;line-height:normal;box-shadow:none}
.ab2__search-input:focus{outline:none;border-color:var(--accent);box-shadow:none}
.ab2__search-input::placeholder{color:var(--tt-2);opacity:.7}
.ab2__search-icon{position:absolute;left:9px;top:50%;transform:translateY(-50%);font-size:12px;pointer-events:none;opacity:.7}
.ab2__count{background:var(--accent);color:#000;font-size:11px;font-weight:700;padding:5px 9px;border-radius:999px;white-space:nowrap;flex-shrink:0}
.ab2__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.ab2__item{position:relative;margin:0;min-width:0}
.ab2__link{display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px 4px 6px;background:var(--bg-3);border-radius:10px;border:1.5px solid transparent;color:var(--tt);transition:all .2s;position:relative;overflow:hidden}
.ab2__link:hover{background:var(--bg);border-color:var(--accent);transform:translateY(-2px)}
.ab2__avatar{position:relative;display:flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;overflow:visible;background:rgba(0,0,0,.3);border:2.5px solid var(--accent);transition:border-color .2s,transform .2s;flex-shrink:0}
.ab2__avatar img{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%}
.ab2__link:hover .ab2__avatar{border-color:#fff;transform:scale(1.05)}
.ab2__avatar::after{content:'';position:absolute;bottom:-2px;right:-2px;width:18px;height:18px;border-radius:50%;border:2px solid var(--bg-2);background-color:#1d9bf0;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E");background-size:11px;background-position:center;background-repeat:no-repeat;z-index:2}
.ab2__name{font-size:11px;font-weight:600;color:var(--tt);text-align:center;line-height:1.2;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word;min-height:26px;max-width:100%;padding:0 2px}
.ab2__link:hover .ab2__name{color:var(--accent)}
.ab2__name mark{background:var(--accent);color:#000;padding:0 2px;border-radius:3px}
.ab2__videos-count{position:absolute;top:4px;left:4px;background:rgba(0,0,0,.7);color:#fff;font-size:9px;font-weight:700;padding:2px 6px;border-radius:999px;pointer-events:none;z-index:3}
.ab2__loadmore{width:100%;margin-top:10px;padding:9px;height:auto;background:var(--accent);color:#000;border:none;border-radius:10px;font-size:11px;font-weight:700;cursor:pointer;text-transform:uppercase;letter-spacing:.3px;font-family:inherit;white-space:nowrap}
.ab2__loadmore:hover:not(:disabled){background:var(--accent);filter:brightness(1.1)}
.ab2__loadmore:disabled{opacity:.65}
.ab2__empty{text-align:center;padding:16px 8px;color:var(--tt-2);font-size:12px}
.ab2__empty-icon{font-size:24px;display:block;margin-bottom:6px}


/* ============================================================
   ГОРИЗОНТАЛЬНАЯ ЛЕНТА АКТРИС (ds-trending)
   ============================================================ */
.ds-trending-block{margin:0 0 24px;padding:1rem;background:var(--bg-2);border-radius:12px;box-shadow:0 10px 20px rgba(0,0,0,.15);position:relative;contain:layout style}
.ds-trending-header{display:flex;align-items:center;gap:10px;margin-bottom:1rem}
.ds-trending-icon{font-size:1.25rem;color:var(--accent);display:flex;align-items:center;justify-content:center;width:34px;height:34px;background:var(--bg-3);border-radius:8px}
.ds-geo-title{font-size:15px;font-weight:700;color:var(--tt);margin:0}
.ds-trending-subtitle{font-size:.76rem;color:var(--tt-2);margin:2px 0 0}
.ds-trending-scroll{position:relative;overflow-x:auto;white-space:nowrap;padding:6px 4px 10px;scroll-behavior:smooth;scrollbar-width:thin;scrollbar-color:var(--accent) var(--bg-3)}
.ds-trending-scroll::-webkit-scrollbar{height:8px;background:var(--bg-3);border-radius:5px}
.ds-trending-scroll::-webkit-scrollbar-thumb{background:var(--accent);border-radius:5px}
.ds-trending-tags{display:inline-flex;gap:8px}
.ds-pill{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;padding:6px 20px 6px 6px;gap:12px;background:var(--bg-3);border-radius:999px;font-size:15px;color:var(--tt);min-height:108px;border:1px solid transparent;font-weight:500;transition:all .2s;position:relative}
.ds-pill:hover{background:var(--accent);color:#000;transform:translateY(-1px)}
.ds-pill-avatar{position:relative;display:inline-flex;align-items:center;justify-content:center;width:96px;height:96px;border-radius:50%;overflow:visible;background:rgba(0,0,0,.3);border:2.5px solid var(--accent);flex-shrink:0;transition:border-color .25s,transform .25s}
.ds-pill-avatar img{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%}
.ds-pill:hover .ds-pill-avatar{border-color:#fff;transform:scale(1.03)}
.ds-pill-avatar::after{content:'';position:absolute;bottom:2px;right:2px;width:28px;height:28px;border-radius:50%;border:3px solid var(--bg-2);background-color:#1d9bf0;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E");background-size:16px;background-position:center;background-repeat:no-repeat;box-shadow:0 3px 8px rgba(0,0,0,.5);z-index:2}
.ds-pill-name{font-weight:700;white-space:nowrap;line-height:1.2;letter-spacing:.2px;font-size:15px}
.ds-scroll-arrow{position:absolute;top:50%;transform:translateY(-50%);width:42px;height:42px;height:42px;border-radius:50%;background:var(--accent);border:3px solid var(--bg-2);color:#000;font-size:24px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:10;box-shadow:0 4px 14px rgba(0,0,0,.4);line-height:1;padding:0;transition:transform .2s,box-shadow .2s}
.ds-scroll-arrow:hover{transform:translateY(-50%) scale(1.12);background:var(--accent)}
.ds-scroll-arrow:active{transform:translateY(-50%) scale(.92)}
.ds-scroll-arrow--prev{left:-6px}
.ds-scroll-arrow--next{right:-6px}
.ds-scroll-arrow[hidden]{display:none}
.ds-swipe-hint{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;color:#000;background:var(--accent);padding:5px 12px;border-radius:999px;margin-left:auto;white-space:nowrap;text-transform:uppercase;letter-spacing:.5px;height:auto}
.ds-swipe-hint::before{content:"\f0a4";font-family:'Font Awesome 5 Pro';font-weight:900;font-size:12px}
.ds-trending-block.user-scrolled .ds-swipe-hint{opacity:0;pointer-events:none;transform:scale(.7);transition:all .35s}
.ds-trending-block::before,.ds-trending-block::after{content:'';position:absolute;top:0;bottom:0;width:50px;pointer-events:none;z-index:5;transition:opacity .25s}
.ds-trending-block::before{left:0;background:linear-gradient(90deg,var(--bg-2),transparent);opacity:0}
.ds-trending-block::after{right:0;background:linear-gradient(-90deg,var(--bg-2),transparent);opacity:0}
.ds-trending-block.scroll-can-prev::before{opacity:1}
.ds-trending-block.scroll-can-next::after{opacity:1}


/* ============================================================
   БУРГЕР (наш кастомный мобильный)
   ============================================================ */
.scat-burger{display:none;background:none;border:0;cursor:pointer;color:var(--tt);font-size:30px;padding:0;margin-left:20px;height:auto;width:auto;align-items:center;justify-content:center}
.scat-burger:hover{background:none;color:var(--accent)}
.scat-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:9998;opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
.scat-backdrop.is-visible{opacity:1;visibility:visible}
.scat-sidebar{position:fixed;left:-340px;top:0;width:320px;height:100%;background:var(--bg);z-index:9999;overflow-y:auto;transition:left .3s;padding:16px}
.scat-sidebar.is-open{left:0}
.scat-sidebar__header{display:flex;align-items:center;margin-bottom:16px;padding-bottom:12px;border-bottom:2px solid var(--bg-3)}
.scat-sidebar__title{font-size:18px;font-weight:700;color:var(--tt)}
body.scat-no-scroll{overflow:hidden}


/* ============================================================
   BREADCRUMBS (наш кастом — заменяет .speedbar)
   ============================================================ */
nav.breadcrumbs{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin:0 0 24px;padding:12px 16px;background:var(--bg-2);border-radius:8px;box-shadow:0 10px 20px rgba(0,0,0,.15);font-size:13px;line-height:1.4;color:var(--tt-2)}
nav.breadcrumbs a{display:inline-flex;align-items:center;color:var(--tt);font-weight:600;padding:7px 14px;border-radius:6px;background:var(--bg-3);transition:background .2s,color .2s}
nav.breadcrumbs a:hover{background:var(--accent);color:#000}
nav.breadcrumbs a:first-child{padding-left:32px;position:relative}
nav.breadcrumbs a:first-child::after{content:"\f015";font-family:'Font Awesome 5 Pro';font-weight:300;position:absolute;left:13px;top:50%;transform:translateY(-50%);font-size:13px;color:var(--accent)}
nav.breadcrumbs a:first-child:hover::after{color:#000}
nav.breadcrumbs :where(span,strong){color:var(--tt);font-weight:700;padding:7px 12px;border-radius:6px;background:var(--bg-3)}

/* Старый speedbar (если где-то остался) */
.speedbar{font-size:12px;color:var(--tt-2);margin-bottom:20px}
.speedbar a:after{color:var(--tt);display:inline;content:'/';margin:0 5px}
.speedbar a:hover{text-decoration:underline}


/* ============================================================
   SECTION (sect / sect__title / sect__header)
   ============================================================ */
.sect{margin-bottom:50px}
.sect__header{margin-bottom:20px}
.sect__title{font-size:24px;font-weight:700}
.sect__sort *{display:inline-block;vertical-align:middle}
.sect__sort a{text-transform:uppercase;font-weight:600;margin-left:20px;color:var(--tt-2);font-size:12px}
.sect__sort a::after{content:"\f107";font-weight:300;font-family:'Font Awesome 5 Pro';margin-left:10px;display:inline-block;position:relative;top:4px;font-size:24px}
.sect__sort .desc a::after{content:"\f106"}
.sect__sort li[class] a{color:var(--tt)}
.sect__subtitle{font-size:24px;margin-bottom:40px}
.sect:last-child{margin-bottom:0}


/* ============================================================
   ГРИД КАРТОЧЕК (#dle-content) — ГЛАВНОЕ
   Грид строится ТОЛЬКО внутри .content. Если #dle-content
   используется где-то ещё (например в сайдбаре поста) — там
   будет обычный flow, что нам и нужно
   ============================================================ */
.layout .content #dle-content.dle-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:20px;
  grid-auto-rows:auto;
  align-items:start;
  justify-content:start;
  width:100%
}
.layout .content #dle-content.dle-grid > *{
  min-width:0;
  max-width:100%;
  grid-column:auto;
  width:auto
}
/* Брейки и навигация занимают всю строку грида */
.layout .content #dle-content.dle-grid > br,
.layout .content #dle-content.dle-grid > .navigation,
.layout .content #dle-content.dle-grid > .pagination{grid-column:1 / -1}


/* ============================================================
   КАРТОЧКА .thumb (через .content для специфичности)
   ============================================================ */
.content .thumb{display:flex;flex-direction:column;background:var(--bg-2);position:relative;box-shadow:0 10px 20px rgba(0,0,0,.15)}
.content .thumb__img{position:relative;overflow:hidden;width:100%;height:0;padding-bottom:56.25%;background:#000;order:-1}
.content .thumb__img-link{position:absolute;inset:0;display:block;z-index:1}
.content .thumb__img-link img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:50% 50%;display:block;min-height:0}
.content .thumb__desc{padding:10px;padding-bottom:10px}
.content .thumb__title{font-weight:500;font-size:13px;line-height:1.4}
.content .thumb__title-link{display:block;color:inherit}
.content .thumb:hover{background:var(--bg-3)}
.content .thumb:hover .thumb__title{color:#fff}

/* Play - круглый полупрозрачный */
.thumb__play,.thumb-play-button{position:absolute;z-index:3;pointer-events:none;top:50%;left:50%;transform:translate(-50%,-50%) scale(.9);width:48px;height:48px;border-radius:50%;border:0;background:rgba(0,0,0,.35);color:rgba(255,255,255,.92);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s,transform .2s}
.thumb__play svg{margin-left:2px}
.thumb-play-icon{width:0;height:0;border-style:solid;border-width:8px 0 8px 13px;border-color:transparent transparent transparent #fff;margin-left:2px}
.thumb:hover .thumb__play,.thumb:hover .thumb-play-button{opacity:1;transform:translate(-50%,-50%) scale(1)}
@media (hover:none){.thumb__play,.thumb-play-button{opacity:.4}}

/* Качество - правый верх */
.content .thumb__label{position:absolute;z-index:5;padding:4px 9px;background:rgba(0,0,0,.7);color:#fff;border-radius:4px}
.content .thumb__label::before{display:none;content:none}
.content .thumb__label.thumb__label--hd{top:8px;right:8px;left:auto;bottom:auto;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;line-height:1}
.content .thumb__label a{color:#fff;text-decoration:none}

/* Продолжительность - левый низ */
.thumb__duration{position:absolute;bottom:8px;left:8px;z-index:4;padding:3px 8px;border-radius:4px;background:rgba(0,0,0,.7);color:#fff;font-size:11px;font-weight:600;line-height:1}


/* ============================================================
   POPULAR (сайдбар поста, маленькие горизонтальные карточки)
   ============================================================ */
.page__col-right .popular{display:flex;margin-bottom:12px;background:var(--bg-2);box-shadow:0 10px 20px rgba(0,0,0,.15)}
.page__col-right .popular__img-link{display:block;flex-shrink:0}
.page__col-right .popular__img{position:relative;width:165px;height:100px;overflow:hidden;background:#000}
.page__col-right .popular__img img{width:100%;height:100%;object-fit:contain;object-position:50% 50%;display:block}
.page__col-right .popular__desc{padding:10px;position:relative;min-width:0}
.page__col-right .popular__title-link{display:block;color:inherit}
.page__col-right .popular__title{-webkit-line-clamp:3;font-size:13px;font-weight:500;line-height:1.3;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}
.page__col-right .popular__duration{position:absolute;bottom:5px;left:5px;z-index:3;padding:2px 6px;border-radius:3px;background:rgba(0,0,0,.7);color:#fff;font-size:10px;font-weight:600;line-height:1}
.page__col-right .popular:hover{background:var(--bg-3)}
.page__col-right .popular:hover .popular__title{color:#fff}


/* ============================================================
   PAGINATION (наш кастом — flex с плашками)
   ============================================================ */
.layout .content .pagination{margin:30px 0;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;text-align:center;font-weight:600}
.layout .content .pagination__pages{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;margin:0}
.layout .content .pagination__pages a,
.layout .content .pagination__pages span{
  display:inline-flex;align-items:center;justify-content:center;
  margin:0;height:40px;min-width:40px;padding:0 12px;line-height:1;
  font-size:14px;border-radius:6px;
  background:var(--bg-3);color:var(--tt-2);
  transition:background .2s,color .2s;position:relative
}
.layout .content .pagination__pages a::before,
.layout .content .pagination__pages span::before{display:none;content:none}
.layout .content .pagination__pages a:hover{background:var(--accent);color:#000}
.layout .content .pagination__pages span:not(.nav_ext){background:var(--accent);color:#000}
.layout .content .pagination__pages .nav_ext{background:none;color:var(--tt-2);padding:0 4px;min-width:auto}


/* ============================================================
   FOOTER
   ============================================================ */
.footer__menu a{font-size:12px;text-transform:uppercase;margin-right:30px;margin-bottom:20px;display:inline-block}
.footer__text{color:var(--tt-2);font-size:12px;line-height:1.4}


/* ============================================================
   TYPOGRAPHY, FULL-TEXT
   ============================================================ */
.full-text{line-height:1.7;font-size:15px;word-wrap:break-word}
.full-text a{text-decoration:underline;color:var(--accent)}
.full-text img:not(.emoji),.full-text p,.full-text h1,.full-text h2,.full-text h3,.full-text h4,.full-text h5,
.full-text>ul,.full-text>ol,.full-text table,.page__title{margin-bottom:20px}
.full-text>img[style*="left"],.full-text>.highslide img[style*="left"]{margin:0 10px 10px 0}
.full-text>img[style*="right"],.full-text>.highslide img[style*="right"]{margin:0 0 10px 10px}
.full-text>ul li,.full-text>ol li{padding-left:60px;position:relative}
.full-text>ul li:before{content:'';width:8px;height:8px;border-radius:50%;border:3px solid var(--accent);position:absolute;top:4px;left:34px}
.full-text>ol{counter-reset:num}
.full-text>ol li:before{content:counter(num);counter-increment:num;background-color:var(--accent);color:#000;position:absolute;top:-2px;left:17px;width:24px;height:30px;font-size:14px;font-weight:600;display:flex;justify-content:flex-end;align-items:center;padding-right:6px;box-sizing:border-box}
.full-text>ol li:after{content:'';border:10px solid transparent;border-left-color:var(--accent);position:absolute;left:41px;top:-2px;transform:scale(.66,1.5);transform-origin:0 0}
.full-text>ul li+li,.full-text>ol li+li{margin-top:10px}
.full-text table,.video-inside>*{width:100%}
.full-text table tr td{padding:10px;border:2px solid var(--bg-3)}
.full-text table tr:nth-child(2n+1){background-color:var(--bg-2)}
.full-text table tr:nth-child(1){background-color:var(--bg-3)}
.full-text table img:not(.emoji){margin:0;max-width:350px}
.full-text>*:last-child{margin-bottom:0}
.full-text h1,.full-text h2,.full-text h3,.full-text h4,.full-text h5{font-size:22px}

/* Video responsive (16:9) */
.video-responsive{padding-top:56.25%;position:relative;background:#000}
.video-responsive>iframe,.video-responsive>video{position:absolute;left:0;top:0;width:100%;height:100%;border:0}


/* ============================================================
   FULLSTORY — главная сетка поста (2 колонки)
   ============================================================ */
.page__cols{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:20px;align-items:start;margin-bottom:50px}
.page__col-left{min-width:0;display:flex;flex-direction:column}
.page__col-right{min-width:0}
.page__col-left > *{max-width:100%;min-width:0}

/* H1 поста */
.page__col-left > h1{font-size:26px;font-weight:700;margin-bottom:10px}
.page__col-left > h1 a{margin-left:10px;font-size:14px}

/* Player */
.page__player{background-color:#000}


/* ============================================================
   FULLSTORY — H2 секций
   ============================================================ */
.vidoser-h2{font-size:20px;font-weight:700;color:var(--tt);margin:28px 0 16px;padding-bottom:10px;border-bottom:2px solid var(--bg-3);position:relative}
.vidoser-h2::after{content:'';position:absolute;left:0;bottom:-2px;width:60px;height:2px;background:var(--accent)}
.vidoser-h2--plain{border:0;padding:0;margin:0;font-size:16px}
.vidoser-h2--plain::after{display:none}


/* ============================================================
   FULLSTORY — Кнопка скачать (золото → зелёный hover)
   ============================================================ */
.vf-dl-wrap{margin:16px 0 4px}
a.vipfile-dl-btn{display:block;width:100%;box-sizing:border-box;padding:14px 24px;border-radius:10px;border:0;cursor:pointer;background:var(--gradient);color:#000;text-decoration:none;text-align:center;box-shadow:var(--bsh);transition:transform .12s,background .2s,box-shadow .2s}
a.vipfile-dl-btn:hover{transform:translateY(-2px);background:linear-gradient(135deg,#28a745 0%,#1e7e34 100%);box-shadow:0 8px 20px rgba(40,167,69,.35)}
a.vipfile-dl-btn:hover .vf-dl-main,a.vipfile-dl-btn:hover .vf-dl-main .fal{color:#fff}
a.vipfile-dl-btn .vf-dl-main{display:block;font:700 16px/1.2 inherit;text-transform:uppercase;letter-spacing:.5px;color:#000;transition:color .2s}
a.vipfile-dl-btn .vf-dl-main .fal{margin-right:6px;color:#000;transition:color .2s}


/* ============================================================
   FULLSTORY — Блок описания
   ============================================================ */
.video-desc-box{background:var(--bg-2);border-radius:8px;padding:18px 20px;margin:0 0 8px;box-shadow:0 10px 20px rgba(0,0,0,.15);border-left:3px solid var(--accent)}
.video-desc-box .full-text{font-size:14px;line-height:1.75;color:var(--tt-2)}
.video-desc-box .full-text a{color:var(--accent)}
.video-desc-box .full-text strong,.video-desc-box .full-text b{color:var(--tt)}
.video-desc-box .full-text p{margin:0 0 12px}
.video-desc-box .full-text p:last-child{margin-bottom:0}
.video-desc-box ::selection,.vf-dl-wrap ::selection{background:var(--accent);color:#000}


/* ============================================================
   FULLSTORY — Блок информации (xfields бейджи)
   ============================================================ */
.video-meta{background:var(--bg-2);border-radius:8px;padding:6px 18px;margin:0 0 8px;box-shadow:0 10px 20px rgba(0,0,0,.15)}
.video-meta .meta-line{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px dashed var(--bg-3);font-size:14px;flex-wrap:wrap}
.video-meta .meta-line:last-child{border-bottom:0}
.video-meta .meta-key{display:inline-flex;align-items:center;gap:7px;color:var(--tt-2);font-weight:600;min-width:130px;flex-shrink:0}
.video-meta .meta-key .fal{color:var(--accent);font-size:16px;width:18px;text-align:center}
.video-meta .meta-val{color:var(--tt);font-weight:600;display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}
.video-meta .meta-val--link a{display:inline-flex;align-items:center;gap:5px;padding:5px 12px;border-radius:6px;background:var(--bg-3);color:var(--accent);font-weight:600;font-size:13px;transition:background .2s,color .2s}
.video-meta .meta-val--link a::after{content:"\f08e";font-family:'Font Awesome 5 Pro';font-weight:300;font-size:11px;opacity:.7}
.video-meta .meta-val--link a:hover{background:var(--accent);color:#000}
.video-meta .meta-val--link a:hover::after{opacity:1}


/* ============================================================
   FULLSTORY — Галерея + лайтбокс
   ============================================================ */
.vidoser-gallery{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 20px}
.vidoser-gallery .vg-item{display:block;position:relative;width:140px;height:140px;flex:0 0 140px;overflow:hidden;border-radius:6px;background:#000;cursor:pointer;border:0;padding:0;font:inherit}
.vidoser-gallery .vg-item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .25s}
.vidoser-gallery .vg-item:hover img{transform:scale(1.06)}
.vidoser-gallery .vg-item::after{content:"\f00e";font-family:'Font Awesome 5 Pro';font-weight:300;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;font-size:24px;opacity:0;transition:opacity .2s;text-shadow:0 2px 8px rgba(0,0,0,.6)}
.vidoser-gallery .vg-item:hover::after{opacity:.9}
.vlb-overlay{position:fixed;inset:0;z-index:99999;background:rgba(0,0,0,.92);display:none;align-items:center;justify-content:center;opacity:0;transition:opacity .25s}
.vlb-overlay.is-open{display:flex;opacity:1}
.vlb-img{max-width:92vw;max-height:88vh;object-fit:contain;border-radius:6px;box-shadow:0 10px 50px rgba(0,0,0,.7);transform:scale(.96);transition:transform .25s}
.vlb-overlay.is-open .vlb-img{transform:scale(1)}
.vlb-btn{position:absolute;background:rgba(255,255,255,.12);color:#fff;border:0;cursor:pointer;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;font-size:22px;transition:background .2s;z-index:2;padding:0}
.vlb-btn:hover{background:rgba(255,255,255,.25)}
.vlb-close{top:18px;right:18px}
.vlb-prev{left:18px;top:50%;transform:translateY(-50%)}
.vlb-next{right:18px;top:50%;transform:translateY(-50%)}
.vlb-counter{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);color:#fff;font-size:13px;background:rgba(0,0,0,.5);padding:5px 14px;border-radius:20px}


/* ============================================================
   FULLSTORY — Share
   ============================================================ */
.video-share-box{margin:24px 0;padding:16px 20px;border-radius:10px;background:var(--bg-2);box-shadow:0 10px 20px rgba(0,0,0,.15);display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px;text-align:center}
.share-emoji-wrapper{width:100%}
.share-icon{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;color:#fff;transition:.25s;padding:0}
.share-icon.tg{background:#0088cc}.share-icon.tg:hover{background:#006f9c}
.share-icon.wa{background:#25d366}.share-icon.wa:hover{background:#1da851}
.share-icon.vb{background:#665cac}.share-icon.vb:hover{background:#574c91}
.share-icon.x{background:#000}.share-icon.x:hover{background:#1a1a1a}


/* ============================================================
   FULLSTORY — Mini-player
   ============================================================ */
.mini-stick{position:fixed;right:max(12px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom));z-index:10000;width:clamp(260px,42vw,520px);aspect-ratio:16/9;max-height:50vh;background:#000;border:1px solid rgba(255,255,255,.12);border-radius:12px;box-shadow:0 12px 40px rgba(0,0,0,.55);overflow:hidden}
.mini-stick iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;background:#000}
.mini-stick__close{position:absolute;top:6px;right:6px;width:26px;height:26px;display:grid;place-items:center;border-radius:8px;cursor:pointer;font:700 16px/1 system-ui;color:#fff;background:rgba(0,0,0,.65);border:1px solid rgba(255,255,255,.18);z-index:2;padding:0;height:26px}
.mini-stick__close:hover{background:rgba(0,0,0,.82)}


/* ============================================================
   FULLSTORY — Мета-бар (рейтинг/просмотры/дата/избранное)
   ============================================================ */
.page__col-left .page__meta{background:var(--bg-2);padding:14px 18px;margin:14px 0;border-radius:8px;box-shadow:0 10px 20px rgba(0,0,0,.15);display:flex;align-items:center;gap:16px;flex-wrap:wrap;color:var(--tt-2)}
.page__col-left .page__meta a,
.page__col-left .page__meta span,
.page__col-left .page__meta b,
.page__col-left .page__meta i{color:var(--tt-2)}
.page__col-left .page__rating{display:flex;align-items:center;gap:8px;margin:0;padding:0;position:static}
.page__col-left .page__rating a{color:var(--tt-2);font-size:22px;display:inline-flex;margin:0}
.page__col-left .page__rating a:hover{color:var(--accent)}
.page__col-left .page__rating .ratig_lim,
.page__col-left .page__rating-data{display:none}
.page__col-left .page__meta-item{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:500;margin:0;height:auto;color:var(--tt-2)}
.page__col-left .page__meta-item .fal{font-size:16px;color:var(--accent);opacity:1;margin:0}
.page__col-left .page__meta-item--fav{cursor:pointer}
.page__col-left .page__meta-item--fav:hover,
.page__col-left .page__meta-item--fav:hover *{color:var(--accent)}
.page__col-left .page__meta .rating,
.page__col-left .page__meta .ratingtypeplusminus{color:var(--tt-2);font-style:normal}


/* ============================================================
   FULLSTORY — Теги поста (плашки)
   ============================================================ */
.page__col-left .page__tags{border:2px solid var(--bg-3);border-left:0;border-right:0;padding:15px 0 10px;font-size:0}
.page__col-left .page__tags-item + .page__tags-item{margin-top:5px}
.page__col-left .page__tags-caption{display:inline-block;color:var(--tt);font-size:16px;font-weight:600;padding:8px 12px 8px 0;margin:2px;margin-left:0}
.page__col-left .page__tags .tags-list a,
.page__col-left .page__tags-item a{
  position:relative;display:inline-block;
  font-size:13px;color:var(--tt-2);
  padding:8px 14px;margin:3px;
  font-weight:600;border-radius:6px;
  background:var(--bg-3);
  transition:background .2s,color .2s
}
.page__col-left .page__tags .tags-list a::before,
.page__col-left .page__tags-item a::before{display:none;content:none}
.page__col-left .page__tags .tags-list a:hover,
.page__col-left .page__tags-item a:hover{background:var(--accent);color:#000}


/* ============================================================
   COMMENTS
   ============================================================ */
.page__comments{margin-top:15px}
.add-comments-form.form{padding:0;background:none;margin-top:20px;display:none}
.add-comments-form .form__input,.add-comments-form__input,.add-comments-form .form__textarea-inside textarea,.mass_comments_action select{box-shadow:inset 0 0 0 1px #e3e3e3;border-radius:0}
.add-comments-form__input{margin-left: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;margin-bottom:20px}
.mass_comments_action select{flex:1 1 0;margin:0 -8px 0 20px}
.mass_comments_action .bbcodes{border-radius:0;padding:0 10px}
.page__comments-btn{cursor:pointer;position:relative;height:40px;line-height:40px;font-weight:600;padding:0 20px;text-transform:uppercase;color:var(--tt-2);font-size:12px;display:inline-block}
.page__comments-btn::before{content:'';position:absolute;left:0;top:0;right:0;bottom:0;background-color:var(--bg-2);z-index:-1;transform:skew(-15deg);box-shadow:var(--bsh)}
.page__comments-btn:hover::before,.page__comments-btn.is-active::before{background:var(--gradient)}
.page__comments-btn:hover,.page__comments-btn.is-active{color:#fff}
.page__comments-btn.is-active + .add-comments-form.form,
.add-comments-form.form.is-active{display:block}
.show-comms a{color:var(--accent);text-decoration:underline;margin-top:10px;display:inline-block}

.comment-item__title{font-weight:700;font-size:18px;margin-top:20px}
.comment-item{margin-top:20px}
.comment-item__img{width:40px;height:40px;border-radius:50%;margin-right:10px}
.comment-item__letter{width:100%;height:100%;text-transform:uppercase;font-weight:700;position:absolute;left:0;top:0;z-index:5;color:#fff;font-size:18px}
.comment-item__author{font-weight:600;font-size:14px}
.comment-item__date{color:var(--tt-2);margin-top:4px;font-size:12px}
.comment-item__main{margin:8px 0 0}
.comment-item__rating{white-space:nowrap;font-size:12px}
.comment-item__rating a{margin-left:6px}
.comment-item__rating a > span:first-child{color:#6ab04c;text-decoration:underline;font-weight:400;margin-right:2px}
.comment-item__rating a:last-child > span:first-child{color:#eb4d4b}


/* ============================================================
   LOGIN
   ============================================================ */
.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 rgba(0,0,0,1)}
.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__close{cursor:pointer;font-size:24px;opacity:.6;margin-left:20px}
.login__title a{border-bottom:1px dotted var(--tt-2);margin-left:10px;font-weight:400;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(--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}
.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;height:auto}
.login__menu .fal{display:block;height:30px;font-size:24px;opacity:.3}


/* ============================================================
   MAIN-SEO-TOP (H1 + спойлер)
   ============================================================ */
.desc{margin:0;display:block}
.desc .desc-spoiler{margin-top:8px}
.desc-head{display:flex;align-items:center;gap:10px;flex-wrap:nowrap}
.desc-head h1{color:var(--tt);font-weight:800;line-height:1.25;margin:0;font-size:clamp(17px,2.2vw,26px);word-wrap:break-word;overflow-wrap:break-word;flex:1;min-width:0}
.desc-toggle{flex-shrink:0;display:inline-flex;align-items:center;gap:6px;padding:7px 16px;height:auto;cursor:pointer;font-weight:700;font-size:13px;text-transform:uppercase;white-space:nowrap;border:0;border-radius:6px;outline:none;color:var(--tt-2);background:var(--bg-2);box-shadow:none;transition:background-color .2s,color .2s}
.desc-toggle:hover{background:var(--accent);color:#000}
.desc-toggle .more{display:inline}
.desc-toggle .less{display:none}
.desc-toggle[aria-expanded="true"] .more{display:none}
.desc-toggle[aria-expanded="true"] .less{display:inline}
.desc-spoiler{position:relative;margin:0}
.desc-content{overflow:hidden;max-height:0;transition:max-height .28s ease}
.desc-content p{margin:12px 0 6px;font-size:13px;line-height:1.7;color:var(--tt-2)}
.desc-content a{color:var(--accent);text-decoration:underline}
.desc-content strong,.desc-content b{color:var(--tt)}
@media (prefers-reduced-motion:reduce){.desc-content{transition:none}}

/* SEO-блок снизу (section.desc) */
section.desc{margin:30px 0 0;color:var(--tt-2);font-size:14px;line-height:1.8;display:block}
section.desc > h2{font-size:22px;font-weight:700;color:var(--tt);line-height:1.3;margin:0 0 14px;padding-bottom:10px;border-bottom:2px solid var(--bg-3);position:relative}
section.desc > h2::after{content:'';position:absolute;left:0;bottom:-2px;width:50px;height:2px;background:var(--accent)}
section.desc > p{margin:0 0 12px}
section.desc > p:last-child{margin-bottom:0}
section.desc strong,section.desc > p strong{color:var(--tt);font-weight:700}
section.desc a,section.desc > p a{color:var(--accent);text-decoration:underline}


/* ============================================================
   АДАПТИВ
   ============================================================ */

@media screen and (max-width:1220px){
  body{background-image:none}
  .wrapper{padding:0;overflow:hidden}
  .wrapper-container{max-width:1000px}
  .header__menu,.sect__sort,.header__fav{display:none}
  .header__btn-menu{cursor:pointer;display:block;font-size:30px;margin-left:20px}
  .header__login{font-size:16px;margin-left:20px}
  .page__cols{grid-template-columns:minmax(0,1fr)}
  .page__col-left,.page__col-right{min-width:0;max-width:100%}
  .page__col-right .popular__img{width:130px}
}

@media screen and (max-width:1100px){
  .layout{display:block;padding:20px 0}
  .layout > .sidebar{display:none}
  .scat-burger{display:flex}
}

@media screen and (max-width:1024px){
  .layout .content #dle-content.dle-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media screen and (max-width:950px){
  .wrapper-container{max-width:768px}
  .footer{display:block;text-align:center}
  .footer__logo{margin:0 0 20px}
  .footer__menu{justify-content:center}
  .footer__menu a{display:inline-block;margin:0 10px 20px}
  #scrolltop{width:40px;height:40px;line-height:40px;font-size:18px}
  .page__col-left .page__meta-item{font-size:12px}
  .page__col-left .page__meta-item .fal{font-size:14px}
}

@media screen and (max-width:760px){
  .wrapper-container{max-width:640px}
  .layout .content #dle-content.dle-grid{grid-template-columns:1fr}
  .header__search{order:10;min-width:100%;margin:10px 0 0}
  .header__logo{flex:1 1 0;min-width:100px;max-width:100%;margin-right:0}
  .header{padding-bottom:10px}
  .page__col-left .page__meta-item--views,
  .page__col-left .page__meta-item--date{display:none}
  .full-text h1,.full-text h2,.full-text h3,.full-text h4,.full-text h5{font-size:18px}
  .add-comments-form__input{min-width:100%;margin:0 0 10px}
  .add-comments-form__btn{width:100%;order:10}
  .add-comments-form .form__row--protect .form__caption{width:100%;margin:0 0 10px}
  .mass_comments_action,.comment-item__controls,.comment-item__rating-caption{display:none}
  h1{font-size:clamp(18px,5vw,22px);margin:14px 0 12px;text-align:left}
  .vidoser-h2{font-size:18px}
  .video-meta .meta-key{min-width:100px;font-size:13px}
  nav.breadcrumbs{font-size:12px;padding:8px 10px;gap:4px;white-space:nowrap;overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  nav.breadcrumbs::-webkit-scrollbar{display:none}
  nav.breadcrumbs a{padding:4px 10px;flex-shrink:0}
}

@media screen and (max-width:600px){
  .vlb-btn{width:40px;height:40px;font-size:18px}
  .vlb-prev{left:8px}
  .vlb-next{right:8px}
  .vlb-close{top:10px;right:10px}
  .page__col-left .page__meta{gap:12px;padding:12px 14px}
  .page__col-left .page__meta-item{font-size:13px}
}

@media screen and (max-width:590px){
  .wrapper-container{max-width:480px}
  .login{max-width:90%;max-height:90%;overflow-x:hidden;overflow-y:auto}
  .login__header,.login__content,.login__social{padding-left:20px;padding-right:20px}
}

@media screen and (max-width:470px){
  .page__col-left > h1{font-size:18px}
  .page__col-left .page__meta{padding:10px}
  .page__col-left .page__meta-item{margin:0}
  .page__col-left .page__meta-item--fav{font-size:0}
  .page__col-left .page__meta-item--fav .fal{font-size:18px;margin:0}
}
.fs-h1{
  display:block;
  font-size:clamp(18px,2.4vw,26px);
  font-weight:700;
  line-height:1.3;
  color:var(--tt);
  margin:20px 0 18px;
  padding:0;
  word-wrap:break-word;
  overflow-wrap:break-word
}
@media (max-width:760px){
  .fs-h1{font-size:18px;margin:14px 0 14px}
}