/* /var/www/sites/panel-serial.ru/generate_site/shared/css/style.dev.css
 * Последнее изменение: 2026-01-28 03:16
 * Причина: добавлены стили для светлой темы
 * Автор изменений: AndyBrok
 */

            img:is([sizes="auto" i]) {
                contain-intrinsic-size: 3000px 1500px
            }

            @media screen and (max-width: 690px) {
                :not(.kinobalancer-films)>.btn {
                    padding:0 15px;
                    height: 34px
                }
            }

            :root {
                --swiper-theme-color: #007aff
            }

            @keyframes swiper-preloader-spin {
                0% {
                    transform: rotate(0deg)
                }

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

            :root {
                --swiper-navigation-size: 44px
            }

            @font-face {
                font-display: swap;
                font-family: 'Oswald';
                font-style: normal;
                font-weight: 700;
                src: url(https://fonts.gstatic.com/s/oswald/v53/TK3_WkUHHAIjg75cFRf3bXL8LICs1xZosUtiZTaR.woff2) format("woff2");
                unicode-range: U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F
            }

            @font-face {
                font-display: swap;
                font-family: 'Oswald';
                font-style: normal;
                font-weight: 700;
                src: url(https://fonts.gstatic.com/s/oswald/v53/TK3_WkUHHAIjg75cFRf3bXL8LICs1xZosUJiZTaR.woff2) format("woff2");
                unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116
            }

            @font-face {
                font-display: swap;
                font-family: 'Oswald';
                font-style: normal;
                font-weight: 700;
                src: url(https://fonts.gstatic.com/s/oswald/v53/TK3_WkUHHAIjg75cFRf3bXL8LICs1xZosUliZTaR.woff2) format("woff2");
                unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB
            }

            @font-face {
                font-display: swap;
                font-family: 'Oswald';
                font-style: normal;
                font-weight: 700;
                src: url(https://fonts.gstatic.com/s/oswald/v53/TK3_WkUHHAIjg75cFRf3bXL8LICs1xZosUhiZTaR.woff2) format("woff2");
                unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF
            }

            @font-face {
                font-display: swap;
                font-family: 'Oswald';
                font-style: normal;
                font-weight: 700;
                src: url(https://fonts.gstatic.com/s/oswald/v53/TK3_WkUHHAIjg75cFRf3bXL8LICs1xZosUZiZQ.woff2) format("woff2");
                unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD
            }

            @font-face {
                font-display: swap;
                font-family: 'Bebas Neue';
                font-style: normal;
                font-weight: 400;
                src: url(https://fonts.gstatic.com/s/bebasneue/v16/JTUSjIg69CK48gW7PXoo9Wlhyw.woff2) format("woff2");
                unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD
            }

            @font-face {
                font-display: swap;
                font-family: 'PT Sans';
                font-style: normal;
                font-weight: 400;
                src: url(https://fonts.gstatic.com/s/ptsans/v17/jizaRExUiTo99u79D0KExQ.woff2) format("woff2");
                unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD
            }

            body {
                --player-btn-background: #f2f2f2;
                --main-color: #79c142;
                --main-color-darker: #6a3;
                --main-color-hover: #82de3b;
                --light-background: #fff;
                --grey-background: #ededed;
                --comments-background: #ededed;
                --comments-input-background: #fff;
                --dark-background: #111;
                --nav-color: #444;
                --search-background: #fff;
                --search-box-shadow: inset 0 0 0 1px #e3e3e3,inset 1px 2px 5px rgba(0,0,0,.2);
                --placeholder: #000;
                --text-color: #888;
                --heading-color: #444;
                --description-link-color: #79c142;
                --poster-box-shadow: 0 0 0 1px #ccc,2px 3px 3px 0 rgba(0,0,0,.1);
                --poster-background: #fff;
                --poster-rating-color: #111;
                --poster-rating-background: #e1e1e1;
                --poster-rating-border: #ddd;
                --subheader-border: #e3e3e3;
                --footer-background: #1e1e1e;
                --color-font-gray-32: #444;
                --color-border-gray-E: #e3e3e3;
                --color-bg-player: #f5f5f5;
                --color-player-gray-16: #ededed;
                --color-font-active-player: #fff;
                --gradient-main: linear-gradient(135deg, #79c142, #2c8246)
            }

            body.dark {
                --player-btn-background: #4f4f4f;
                --main-color: #79C142;
                --main-color-darker: #025c02;
                --main-color-hover: #82de3b;
                --light-background: #222;
                --grey-background: #111;
                --comments-background: #111;
                --comments-input-background: #222;
                --dark-background: #111;
                --nav-color: #eee;
                --search-background: #111;
                --search-box-shadow: inset 0 0 0 1px #111,inset 1px 2px 5px rgba(0,0,0,.2);
                --placeholder: #fff;
                --text-color: #ccc;
                --heading-color: #eee;
                --description-link-color: #79c142;
                --poster-box-shadow: 0 0 0 1px #050505,2px 3px 3px 0 rgba(0,0,0,.5);
                --poster-background: #111;
                --poster-rating-color: #ccc;
                --poster-rating-background: #050505;
                --poster-rating-border: #333;
                --subheader-border: #111;
                --footer-background: #222;
                --color-font-gray-32: #ccc;
                --color-border-gray-E: #333;
                --color-bg-player: #222;
                --color-player-gray-16: #161616;
                --color-font-active-player: #fff;
                --gradient-main: linear-gradient(135deg, #0bf02296, #0cd30029);
            }

            body {
                --wrap-width: 1200px
            }

            * {
                padding: 0;
                margin: 0;
                outline: none;
                box-sizing: border-box
            }

            a {
                text-decoration: none
            }

            input::placeholder,textarea::placeholder {
                color: var(--placeholder);
                opacity: .5;
                font-size: 13px
            }

            input:focus::placeholder,textarea:focus::placeholder {
                color: transparent
            }

            svg.icon {
                max-width: 100%;
                max-height: 100%
            }

            html,body {
                font: 14px -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
                line-height: normal;
                padding: 0;
                margin: 0;
                color: #444;
                min-height: 100%;
                width: 100%;
                font-weight: 400
            }

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

            button {
                font: 14px -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif
            }

            .top-holder {
                height: 250px
            }

            .wrap {
                max-width: var(--wrap-width);
                margin: 0 auto
            }

            .main-content-wrap {
                box-shadow: 0 0 60px rgba(0,0,0,.9);
            }

            @media screen and (max-width: 1200px) {
                #video-description .entries .right {
                    display: none!important;
                }
                
                #video-description .entries .left {
                    width: 100%;
                }
            }

            @media screen and (min-width: 760px) and (max-width: 1200px) {
                .mark-scale-kp, .mark-scale-imdb, .mark-scale-shiki, .mark-scale-wordart, .mark-scale-lordserial {
                    width: 31.5%;
                }
            }

            @media screen and (max-width: 1120px) {
                .wrap {
                    margin:0 10px
                }
            }

            @media screen and (max-width: 760px) {
                .wrap {
                    margin:0
                }
            }

            .site-background {
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                z-index: -1;
                overflow: hidden;
                height: 100vh;
                pointer-events: none
            }

            .site-background:before {
                content: '';
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background: #111
            }

            .site-background div {
                position: absolute;
                display: flex;
                width: 100%;
                height: 100%;
                left: 0;
                top: 0;
                overflow: hidden;
                justify-content: center;
                align-items: center
            }

            .site-background div span {
                position: absolute
            }

            .site-background div span:nth-of-type(1) {
                height: 50%;
                bottom: 0;
                left: 0;
                right: 0;
                background: linear-gradient(to top,#111,transparent)
            }

            .site-background div span:nth-of-type(2) {
                width: 30%;
                height: 100%;
                bottom: 0;
                left: 0;
                background: linear-gradient(90deg,#111,transparent)
            }

            .site-background div span:nth-of-type(3) {
                width: 30%;
                height: 100%;
                bottom: 0;
                right: 0;
                background: linear-gradient(-90deg,#111,transparent)
            }

            .site-background img {
                display: block
            }

            @media screen and (max-width: 760px) {
                .top-holder,.site-background {
                    display:none
                }
            }

            #header {
                z-index: 99;
                position: relative
            }

            #header .wrap {
                padding: 0 20px;
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
                align-items: center;
                background: var(--light-background);
                box-shadow: 0 1px 5px 0 rgb(0 0 0 / 37%);
                border-radius: 4px 4px 0 0;
                position: relative
            }

            #header .logo {
                margin: 0 auto 0 0;
                display: block
            }

            #header .logo img {
                width: 180px;
                height: 70px;
                display: block;
                object-fit: contain
            }

            #header .logo img~img {
                display: none
            }

            #header nav {
                margin: 0 auto;
                width: calc(100% - 598px)
            }

            #header nav>ul {
                display: flex;
                justify-content: flex-start;
                align-items: center;
                gap: 20px;
                margin-left: 20px;
                list-style: none
            }

            #header nav>ul>li {
                height: 100%;
                position: relative
            }

            #header nav>ul>li>a {
                font-family: 'Oswald',sans-serif;
                font-weight: 700;
                text-transform: uppercase;
                color: var(--nav-color);
                text-decoration: none;
                display: block;
                height: 100%;
                line-height: 70px;
                opacity: .7;
                font-size: 16px;
                white-space: nowrap
            }

            #header nav>ul>li:hover>a {
                opacity: 1;
                box-shadow: inset 0 -3px var(--main-color);
                color: var(--main-color)
            }

            #header nav>ul>li>ul {
                background: #fff;
                box-shadow: 0 10px 20px rgba(0,0,0,.1);
                position: absolute;
                left: 0;
                top: 95%;
                padding: 10px;
                border-top: 3px solid var(--main-color);
                pointer-events: none;
                opacity: 0;
                transform: translateY(30px);
                transition: all .2s ease;
                list-style: none;
                display: flex;
                flex-wrap: wrap
            }

            #header nav>ul>li:hover>ul {
                pointer-events: auto;
                opacity: 1;
                transform: translateY(0px)
            }

            #header nav>ul>li>ul>li {
                width: 100%;
                height: 26px;
                line-height: 26px
            }

            #header nav>ul>li>ul>li>a {
                font-family: "Open Sans",sans-serif;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                font-weight: 400;
                opacity: .8;
                padding: 0 10px;
                font-size: 13px;
                display: block;
                color: #444;
                text-decoration: none
            }

            #header nav>ul>li>ul>li.bold>a {
                font-weight: 600;
                opacity: 1;
                font-size: 14px;
                cursor: default
            }

            #header nav>ul>li>ul>li:not(.bold)>a:hover {
                background-color: var(--main-color);
                color: #fff;
                opacity: 1
            }

            #header form {
                margin: 0 0 0 auto;
                position: relative;
                display: flex;
                justify-content: center;
                align-items: center;
                width: 270px
            }

            #header form input {
                padding: 0 45px 0 10px;
                border-radius: 3px;
                height: 34px;
                width: 100%;
                background-color: var(--search-background);
                color: var(--placeholder);
                border: 0;
                box-shadow: var(--search-box-shadow)
            }

            #header form input:focus {
                box-shadow: inset 0 0 0 1px var(--main-color),inset 1px 2px 5px rgba(0,0,0,.1)
            }

            #header form button[type=submit] {
                position: absolute;
                right: 0;
                top: -3px;
                z-index: 10;
                padding: 0;
                background: 0 0;
                color: var(--main-color);
                width: 40px;
                border: 0;
                height: 40px;
                cursor: pointer
            }

            #header form button[type=submit] svg {
                width: 18px;
                height: 18px;
                fill: var(--main-color);
                stroke-width: .4px!important;
                stroke: var(--main-color);
                position: relative;
                top: 2px
            }

            #header form button[type=submit]:hover svg {
                fill: #82de3b
            }

            #header form button.close-burger {
                content: '';
                position: absolute;
                top: 0;
                right: 0;
                width: 45px;
                height: 45px;
                background: #e84e36;
                border: 0;
                display: none
            }

            #header form button.close-burger:after,#header form button.close-burger:before {
                content: '';
                position: absolute;
                top: 0;
                right: 0;
                left: 0;
                bottom: 0;
                margin: auto;
                width: 18px;
                height: 4px;
                background: #fff;
                transform: rotate(45deg);
                transition: all .2s ease
            }

            #header form button.close-burger:before {
                transform: rotate(-45deg)
            }

            #header form button.close-burger:hover:after {
                transform: rotate(135deg)
            }

            #header form button.close-burger:hover:before {
                transform: rotate(-135deg)
            }

            #header .burger-menu {
                display: none
            }

            /* Переключение логотипов по теме */
            #header .logo .logo-light {
                display: block;
            }
            
            #header .logo .logo-dark {
                display: none;
            }
            
            body.dark #header .logo .logo-light {
                display: none;
            }
            
            body.dark #header .logo .logo-dark {
                display: block;
            }

            .burger-overlay {
                position: fixed;
                opacity: 0;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background: rgba(0,0,0,.5);
                width: 100%;
                height: 100%;
                transition: all .2s ease;
                pointer-events: none;
                z-index: 99
            }

            body .light_dark {
                width: 88px;
                height: 44px;
                margin: 0 0 0 20px;
                border-radius: 24px;
                border: 6px solid var(--grey-background);
                cursor: pointer;
                overflow: hidden;
                position: relative;
                background: var(--grey-background);
                display: flex;
                justify-content: space-between;
                align-items: center
            }

            body .light_dark .icon {
                width: 34px;
                height: 34px;
                position: relative;
                z-index: 2;
                padding: 6px;
                transition: all .45s ease
            }

            body .light_dark .icon:first-of-type {
                fill: #fff400;
                stroke: #fff300;
                transform: rotate(180deg)
            }

            body .light_dark .icon:last-of-type {
                fill: #939393;
                stroke: #939393;
                transform: rotate(-360deg)
            }

            body .light_dark:after {
                position: absolute;
                content: '';
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background: var(--main-color);
                transform: translateX(calc(-50% - 4px));
                border-radius: 20px;
                transition: all .45s ease;
                z-index: 1
            }

            body.dark .light_dark:after {
                transform: translateX(calc(50% + 4px))
            }

            body.dark .light_dark .icon:first-of-type {
                fill: #939393;
                stroke: #939393;
                transform: rotate(0deg)
            }

            body.dark .light_dark .icon:last-of-type {
                fill: #d2b403;
                stroke: #776565;
                transform: rotate(0deg)
            }

            @media screen and (max-width: 1000px) {
                #header nav {
                    max-width:none;
                    position: fixed;
                    top: 85px;
                    left: 0;
                    bottom: 0;
                    width: 300px;
                    transform: translateX(-100%);
                    overflow: hidden;
                    transition: all .2s ease;
                    background: var(--light-background);
                    padding: 0;
                    z-index: 100;
                    overflow: auto
                }

                #header nav>ul {
                    gap: 0;
                    padding: 0 0 50px;
                    flex-direction: column
                }

                #header nav>ul>li {
                    padding: 0 10px;
                    width: 100%;
                    text-align: center
                }

                #header nav>ul>li>a {
                    line-height: 50px
                }

                #header nav>ul>li>ul {
                    box-shadow: none;
                    position: static;
                    border-bottom: 3px solid var(--main-color);
                    pointer-events: all;
                    opacity: 1;
                    transform: translateY(0);
                    margin: 0 -10px;
                    padding: 10px;
                    background: #ededed;
                    width: 300px!important
                }

                #header nav>ul>li>ul>li {
                    width: 140px;
                    height: 26px;
                    line-height: 26px
                }

                #header form {
                    position: fixed;
                    top: 0;
                    left: 0;
                    background: var(--light-background);
                    transform: translateX(-100%);
                    transition: all .2s ease;
                    z-index: 101;
                    height: 85px;
                    width: 300px;
                    padding: 0 10px;
                    align-items: flex-end
                }

                #header form button[type=submit] {
                    right: 10px;
                    bottom: -3px;
                    top: auto
                }

                #header form button.close-burger {
                    display: block
                }

                #header .burger-menu {
                    display: block;
                    width: 45px;
                    height: 45px;
                    border: 0;
                    background: 0 0;
                    position: relative;
                    cursor: pointer;
                    margin: 0 0 0 10px
                }

                body .light_dark {
                    margin: 0 0 0 10px
                }

                #header .burger-menu span {
                    position: absolute;
                    top: 0;
                    bottom: 0;
                    left: 0;
                    right: 0;
                    width: 35px;
                    height: 5px;
                    border-radius: 3px;
                    background: var(--heading-color);
                    margin: auto
                }

                #header .burger-menu span:first-of-type {
                    margin: 8px auto auto
                }

                #header .burger-menu span:last-of-type {
                    margin: auto auto 8px
                }
            }

            @media screen and (max-width: 375px) {
                body .light_dark {
                    display:none
                }
            }

            #breadcrumbs {
                z-index: 1;
                position: relative
            }

            #breadcrumbs .wrap {
                color: var(--placeholder);
                background-color: var(--grey-background);
                padding: 10px 20px
            }

            #breadcrumbs a,#breadcrumbs span {
                color: var(--placeholder);
                font-size: 12px;
                opacity: 1
            }

            #breadcrumbs a:hover span {
                color: var(--placeholder);
                opacity: .7
            }

            #video-description {
                background-color: var(--light-background);
                padding: 20px;
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
                align-items: flex-start;
                position: relative;
                z-index: 1
            }

            #video-description .right_section {
                width: 200px;
                order: -1;
                box-shadow: var(--poster-box-shadow);
                border-radius: 3px
            }

            #video-description .poster {
                position: relative;
                border-radius: 3px 3px 0 0;
                overflow: hidden
            }

            #video-description .poster img {
                display: block;
                aspect-ratio: 100/145;
                object-fit: cover
            }

            #video-description .poster .tags {
                position: absolute;
                top: 10px;
                left: 10px;
                display: flex;
                flex-wrap: wrap;
                gap: 3px;
                z-index: 2
            }

            #video-description .poster .tags .tag {
                padding: 3px 5px;
                border-radius: 3px;
                background: var(--main-color);
                color: #fff;
                font-weight: 600;
                font-size: 13px
            }

            #video-description .poster .rating {
                height: 45px;
                position: relative;
                z-index: 20;
                white-space: nowrap;
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 0 1px;
                background: var(--poster-background)
            }

            #video-description .poster .rating button {
                width: 45px;
                height: 100%;
                border: 0;
                background: 0 0;
                display: flex;
                justify-content: center;
                align-items: center;
                cursor: pointer;
                position: relative
            }

            #video-description .poster .rating button svg {
                width: 30px;
                height: 30px;
                padding: 6px;
                fill: #fff;
                border-radius: 50%;
                background: #33a42d
            }

            #video-description .poster .rating button+button svg {
                background: #dd4d1b
            }

            #video-description .poster .rating button:after {
                content: attr(data-value);
                position: absolute;
                top: 0;
                bottom: 0;
                left: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
                color: var(--heading-color)
            }

            #video-description .poster .rating button+button:after {
                left: auto;
                right: 100%
            }

            #video-description .poster .rating .circle-value {
                position: absolute;
                bottom: 15px;
                left: 0;
                right: 0;
                margin: auto;
                width: 60px;
                height: 60px;
                border-radius: 50%;
                background: conic-gradient(#fcc030 var(--progress),gray 0deg);
                box-shadow: 0 0 7px 0 rgba(0,0,0,.3);
                border: 5px solid var(--light-background)
            }

            #video-description .poster .rating .circle-value:after {
                content: attr(data-progress);
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                width: 42px;
                height: 42px;
                margin: auto;
                background: var(--poster-rating-background);
                border-radius: 50%;
                font-size: 20px;
                font-weight: 600;
                line-height: 41px;
                text-align: center;
                color: var(--poster-rating-color)
            }

            #video-description .right_section .add_to_favorite {
                color: var(--heading-color);
                background: 0 0;
                border: 0;
                fill: var(--heading-color);
                cursor: pointer;
                display: flex;
                align-items: center;
                width: 100%;
                border-radius: 0 0 3px 3px;
                padding: 10px 0 10px 15px;
                opacity: .85;
                z-index: 1;
                position: relative;
                border-top: 1px solid var(--poster-rating-border);
                background: var(--poster-background)
            }

            #video-description .right_section .add_to_favorite:hover {
                opacity: 1;
                background: rgba(0,0,0,.05)
            }

            #video-description .right_section .add_to_favorite:after {
                content: attr(data-add);
                margin: 0 0 0 7px
            }

            #video-description .right_section .add_to_favorite.active:after {
                content: attr(data-remove)
            }

            #video-description .right_section .add_to_favorite.active {
                fill: #fff;
                stroke: #fff;
                stroke-width: 2px;
                background: var(--main-color);
                color: #fff;
                border-top: 1px solid transparent
            }

            #video-description .right_section .add_to_favorite svg {
                width: 17px;
                height: 17px;
                position: relative;
                top: 1px;
                margin: 0 5px 0 0
            }

            #video-description .text {
                width: calc(100% - 220px)
            }

            #video-description h1 {
                font-size: 18px;
                font-weight: 600;
                margin-bottom: 15px;
                color: var(--heading-color)
            }

            #video-description #collapsible-checkbox {
                display: none
            }

            #video-description .collapsible-text {
                color: var(--text-color);
                font-size: 13px;
                overflow: hidden;
                position: relative;
                transition: max-height .2s;
                padding: 0 0 20px;
                max-height: 125px;
                --max-height: 1000px
            }

            #video-description #collapsible-checkbox:not(:checked)~.collapsible-text:before {
                content: '';
                position: absolute;
                z-index: 1;
                bottom: 0;
                left: 0;
                right: 0;
                height: 120px;
                pointer-events: none;
                background: linear-gradient(to bottom,rgba(255,255,255,0) 0%,var(--light-background) 100%)
            }

            #video-description #collapsible-checkbox:checked~.collapsible-text {
                max-height: var(--max-height)
            }

            #video-description .collapsible-text~label {
                margin: 1px 0 15px;
                display: block;
                cursor: pointer;
                text-decoration: none;
                box-shadow: 0 0 0 1px #cccccc38, 2px 3px 3px 0 rgba(0, 0, 0, .1);
                text-align: center;
                padding: 8px 10px;
                font-weight: 600;
                border-radius: 3px;
                color: var(--heading-color);
                background: #11111194;
            }

            body:not(.dark) #video-description .collapsible-text~label {
                box-shadow: 0 0 0 1px #00000038, 2px 3px 3px 0 rgba(0, 0, 0, .1);
                color: #313131;
                background: #efefef94;
            }

            #video-description .collapsible-text~label:after {
                content: attr(data-more)
            }

            #video-description #collapsible-checkbox:checked~.collapsible-text~label:after {
                content: attr(data-less)
            }

            #video-description .collapsible-text p+p {
                margin-top: 15px
            }

            #video-description .entries {
                display: flex;
                justify-content: space-between;
                gap: 0 20px;
                flex-wrap: wrap;
                line-height: 1.7;
                font-size: 13px
            }

            #video-description .entries .left {
                width: calc(50% - 10px)
            }

            #video-description .entries .right {
                width: 37%;
                flex-direction: column;
                align-items: center;
                /* gap: 10px; */
                display: flex;
                flex-wrap: wrap;
                align-content: space-between;
            }

            #video-description .entries .bottom {
                width: 100%
            }

            #video-description .entries ul {
                list-style: none
            }

            #video-description .entries ul li {
                color: var(--text-color)
            }

            #video-description .entries ul li span {
                font-weight: 600;
                color: var(--heading-color)
            }

            #video-description .entries .rating {
                line-height: 30px;
                border-radius: 3px;
                text-align: center;
                width: 48%;
                margin-top: 7px;
                margin-bottom: 4px;
                font-size: 14px;
                font-weight: 600;
                display: inline-block;
                margin-right: 2%
            }

            #video-description .entries .rating+.rating {
                margin-right: 0
            }

            #video-description .entries .rating.kp {
                box-shadow: inset 0 0 0 2px #f60
            }

            #video-description .entries .rating.kp:before {
                content: 'KP';
                margin: 0 3px 0 0
            }
            #video-description .entries .rating.user {
                box-shadow: inset 0 0 0 2px #c74676;
            }
            
            #video-description .entries .rating.user:before {
                content: 'LF';
                margin: 0 3px 0 0
            }

            #video-description .entries .rating.imdb {
                box-shadow: inset 0 0 0 2px #fc0
            }

            #video-description .entries .rating.imdb:before {
                content: 'IMDB';
                margin: 0 3px 0 0
            }

            #video-description .entries a {
                color: var(--description-link-color);
                border-bottom: 1px dotted var(--description-link-color)
            }

            .subheader {
                text-align: center;
                padding: 10px 20px;
                font-weight: 600;
                font-size: 16px;
                color: var(--heading-color);
                background: var(--light-background)
            }

            #video-description+.subheader {
                border-top: 1px solid var(--subheader-border)
            }

            @media screen and (max-width: 760px) {
                #video-description {
                    flex-direction:column;
                    align-items: center;
                    padding: 20px
                }

                #video-description .text {
                    width: 100%
                }

                #video-description .right_section {
                    margin: 0 0 20px
                }

                #video-description .entries {
                    flex-direction: column
                }

                #video-description .entries .rating {
                    margin-bottom: 7px
                }

                #video-description .entries .left {
                    width: 100%
                }
                
                #video-description .entries .right {
                    display: none;
                }
                
                .rating-plugin-container {
                    width: 100%;
                    flex-direction: column;
                    border-top: 1px solid #121212;
                    margin-top: 5px;
                }
                
                .mark-scale-kp, .mark-scale-imdb, .mark-scale-shiki, .mark-scale-wordart, .mark-scale-lordserial {
                    width: 100% !important;
                }
            }

            @media screen and (max-width: 420px) {
                #video-description {
                    padding:20px 10px
                }
            }

            #main-text-content {
                padding: 40px;
                background: var(--light-background);
                font-size: 16px;
                line-height: 1.6;
                display: flex;
                justify-content: space-between
            }

            #main-text-content>* {
                width: 100%
            }

            #main-text-content>.content {
                max-width: 1000px;
                margin: auto
            }

            #main-text-content>.content:last-child {
                margin: 0 auto
            }

            #main-text-content:has(.video-list) {
                padding: 20px
            }

            #main-text-content .content>*:not(:last-child) {
                margin-bottom: 2rem
            }

            #main-text-content .content iframe,#main-text-content img {
                max-width: 100%
            }

            #main-text-content img {
                margin-top: 20px
            }

            #main-text-content .content p:has(iframe) {
                padding: 56.25% 0 0;
                position: relative;
                width: 100%;
                height: 0
            }

            #main-text-content .content iframe {
                width: 100%;
                position: absolute;
                top: 0;
                left: 0;
                height: 100%
            }

            #main-text-content .content h1 {
                font-size: 2rem;
                line-height: normal
            }

            #main-text-content .content h2 {
                font-size: 1.6rem;
                line-height: normal
            }

            #main-text-content .content h3 {
                font-size: 1.4rem;
                line-height: normal
            }

            #main-text-content .content * {
                color: var(--text-color)
            }

            body:not(.dark) #main-text-content .content * {
                color: #5b5b5b;
            }

            #main-text-content .content h1,#main-text-content .content h2,#main-text-content .content h3 {
                color: var(--heading-color)
            }

            #main-text-content .content a {
                font-weight: 400
            }

            #main-text-content .content ul li {
                position: relative;
                padding-left: 1.5rem;
                list-style: none
            }

            #main-text-content .content ul li:not(:last-child) {
                margin-bottom: 1rem
            }

            #main-text-content .content ol li:not(:last-child) {
                margin-bottom: 1.5rem
            }

            #main-text-content .content ul li:before {
                content: '';
                display: block;
                width: .4rem;
                height: .4rem;
                border-radius: 50%;
                background-color: var(--main-color);
                position: absolute;
                left: 0;
                top: .9rem
            }

            #main-text-content .content ol {
                counter-reset: myCounter;
                list-style: none
            }

            #main-text-content .content ol li {
                position: relative;
                padding-left: 4rem
            }

            #main-text-content .content ol>li:before {
                counter-increment: myCounter;
                content: counter(myCounter,decimal-leading-zero) " / ";
                position: absolute;
                left: 0;
                top: 0;
                color: var(--main-color);
                font-weight: 700
            }

            #main-text-content .content ol li li {
                padding-left: 1.4rem
            }

            #main-text-content .content p:empty {
                display: none
            }

            #main-text-content .content blockquote {
                position: relative;
                font-size: 1.6rem;
                z-index: 0;
                color: rgba(15,4,50,.7);
                font-style: italic;
                padding-left: 3rem
            }

            #main-text-content .video-list {
                padding: 0;
                background: 0 0;
                box-shadow: none
            }

            @media screen and (max-width: 760px) {

                #main-text-content {
                    padding: 20px
                }

                #main-text-content>.content {
                    width: 100%
                }
            }

            @media screen and (max-width: 420px) {
                #main-text-content {
                    padding:20px 10px
                }
            }

            .player-container {
                background: #1e1e1e;
                position: relative
            }

            .emojis {
                display: flex;
                flex-wrap: wrap;
                justify-content: center;
                align-items: center;
                gap: 20px;
                background: var(--grey-background);
                padding: 10px 10px 30px
            }

            .emojis button {
                border: 0;
                background: 0 0;
                width: 60px;
                height: 60px;
                cursor: pointer;
                position: relative;
                flex: 1
            }

            .emojis button svg {
                transform: scale(.8);
                transition: all .2s ease;
                position: relative;
                z-index: 2
            }

            .emojis button:hover svg {
                transform: scale(.95)
            }

            .emojis button:before {
                content: attr(data-value);
                position: absolute;
                top: 87%;
                left: 0;
                right: 0;
                z-index: 1;
                font-size: 20px;
                font-weight: 900;
                font-family: 'Oswald',sans-serif;
                color: #666
            }

            @media screen and (max-width: 460px) {
                .emojis {
                    padding-left:0;
                    padding-right: 0
                }

                .emojis button {
                    height: 40px
                }

                .emojis button:before {
                    font-size: 16px
                }
            }

            @media screen and (max-width: 380px) {
                .emojis {
                    gap:10px
                }
            }

            .social {
                text-align: center;
                box-shadow: 0 1px 5px 0 rgba(0,0,0,.15);
                background: var(--light-background);
                position: relative
            }

            .social .ya-share2__list.ya-share2__list_direction_horizontal {
                display: flex;
                justify-content: center;
                align-items: center;
                width: 100%;
                margin-top: 0!important
            }

            .social .ya-share2__list.ya-share2__list_direction_horizontal>.ya-share2__item {
                flex: 1;
                margin: 0
            }

            .social .ya-share2__link {
                display: block;
                width: 100%;
                height: 44px
            }

            .social .ya-share2__badge {
                border-radius: 0;
                height: 100%;
                display: block
            }

            .social .ya-share2__container_size_l .ya-share2__badge .ya-share2__icon {
                height: 100%;
                width: 100%;
                display: block;
                background-position: center;
                background-repeat: no-repeat;
                background-size: auto 70%
            }

            .social .ya-share2__container_mobile .ya-share2__badge {
                border-radius: 0!important
            }

            @media screen and (max-width: 460px) {
                .social {
                    padding:0
                }
            }

            #comments {
                background: var(--comments-background);
                padding: 20px;
                position: relative;
                z-index: 8;
                margin: 0!important
            }

            #comments .title {
                font-size: 18px;
                font-weight: 600;
                padding-bottom: 10px
            }

            #comments p {
                color: var(--heading-color)
            }

            #comments .commentpro-sort_count,#comments .commentpro-date {
                color: var(--text-color)
            }

            #comments .commentpro-form_group [type=text] {
                background: var(--comments-input-background);
                color: var(--placeholder);
                border: 1px solid var(--poster-rating-border);
            }

            #comments .commentpro-standalone-container {
                background: var(--comments-input-background);
                color: var(--placeholder);
                border: 1px solid var(--poster-rating-border);
            }

            #comments .commentpro-text img {
                vertical-align: middle;
                max-height: 40px;
                margin: 0 1px;
                position: relative;
                top: -1px
            }

            #comments .commentpro-text {
                font-size: 16px
            }

            #comments .commentpro-text,#comments .commentpro-karma,#comments .ql-editor.ql-blank:before,#comments .ql-snow button:before,#comments .commentpro-sort_btn {
                color: var(--text-color)
            }

            #comments .ql-editor {
                padding-top: 2px
            }

            #comments .ql-snow button.ql-spoiler:hover:before,#comments .commentpro-name,#comments .commentpro-sort_btn.active {
                color: var(--main-color)
            }

            #comments .ql-snow .ql-stroke {
                stroke: var(--text-color)
            }

            #comments .ql-snow .ql-fill,#comments .ql-snow .ql-stroke.ql-fill {
                fill: var(--text-color)
            }

            #comments .commentpro-reply button,#comments .commentpro-likes button,#comments .commentpro-abuse button {
                fill: var(--heading-color);
                color: var(--heading-color)
            }

            #comments .commentpro-likes button.active,#comments .commentpro-reply button:hover,#comments .commentpro-likes button:hover,#comments .commentpro-abuse button:hover {
                fill: var(--main-color);
                opacity: 1;
                color: var(--main-color)
            }

            .commentpro-standalone-container:has(textarea:focus),.commentpro-standalone-container:has(.ql-editor:focus),body.dark #comments .commentpro-form_group [type=text]:focus {
                box-shadow: inset 0 0 0 1px var(--main-color),inset 1px 2px 5px rgba(0,0,0,.1)!important
            }

            #comments .commentpro-form_group [type=text]:disabled {
                opacity: 1
            }

            #comments .ql-snow.ql-toolbar button:hover,#comments .ql-snow .ql-toolbar button:hover,#comments .ql-snow.ql-toolbar button:focus,#comments .ql-snow .ql-toolbar button:focus {
                color: var(--main-color)
            }

            #comments .ql-snow.ql-toolbar button:hover .ql-fill,#comments .ql-snow .ql-toolbar button:hover .ql-fill,#comments .ql-snow.ql-toolbar button:focus .ql-fill,#comments .ql-snow .ql-toolbar button:focus .ql-fill,#comments .ql-snow.ql-toolbar button:hover .ql-stroke.ql-fill,#comments .ql-snow .ql-toolbar button:hover .ql-stroke.ql-fill,#comments .ql-snow.ql-toolbar button:focus .ql-stroke.ql-fill,#comments .ql-snow .ql-toolbar button:focus .ql-stroke.ql-fill {
                fill: var(--main-color)
            }

            #comments .ql-snow.ql-toolbar button:hover .ql-stroke,#comments .ql-snow .ql-toolbar button:hover .ql-stroke,#comments .ql-snow.ql-toolbar button:focus .ql-stroke,#comments .ql-snow .ql-toolbar button:focus .ql-stroke {
                stroke: var(--main-color)
            }

            #comments .commentpro-form_btn button,#comments .commentpro-form_change button,#comments .commentpro-form_reply button {
                box-shadow: inset 0 -3px var(--main-color-darker);
                color: var(--search-background);
                background-color: var(--main-color)
            }

            #comments .commentpro-form_btn button:hover,#comments .commentpro-form_change button:hover,#comments .commentpro-form_reply button:hover {
                background-color: var(--main-color-hover);
                color: var(--search-background);
                box-shadow: 0 10px 20px 0 transparent
            }

            #comments .commentpro-form_change,#comments .commentpro-form_reply {
                color: var(--text-color);
                display: none
            }

            #comments .commentpro-karma.red {
                color: #dd4d1b
            }

            #comments .commentpro-karma.green {
                color: #79c142
            }

            #comments .commentpro-text ul,#comments .commentpro-text ol {
                margin: 2px 0 2px 20px
            }

            #comments .ql-toolbar.ql-snow {
                border-bottom: 0
            }

            @media screen and (max-width: 1030px) {
                #comments .commentpro-form_btn button {
                    font-size:12px
                }
            }

            @media screen and (max-width: 960px) {
                #comments .commentpro-form_btn button {
                    font-size:14px
                }
            }

            .video-list {
                display: flex;
                flex-wrap: wrap;
                align-items: flex-start;
                justify-content: flex-start;
                gap: 10px;
                padding: 20px;
                background: var(--grey-background)
            }

            .video-list+.video-list {
                box-shadow: none
            }

            .video-list .heading {
                width: 100%;
                font-size: 18px;
                font-weight: 600
            }

            .video-list .item {
                position: relative;
                width: calc(100%/6 - 10px*5/6)
            }

            .video-list .item:after {
                content: '';
                position: absolute;
                left: 0;
                right: 0;
                bottom: 0;
                z-index: 1;
                background: linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%);
                height: 50%
            }

            .video-list .item img {
                width: 100%;
                height: 100%;
                position: absolute;
                top: 0;
                left: 0;
                object-fit: cover;
                pointer-events: none
            }

            .video-list .item .title {
                position: absolute;
                bottom: 33px;
                left: 10px;
                right: 10px;
                text-align: center;
                font-weight: 600;
                color: #fff;
                z-index: 2
            }

            .video-list .item .rating {
                padding: 145% 0 0
            }

            .video-list .item .rating>div {
                position: absolute;
                bottom: 10px;
                color: #fff;
                z-index: 2
            }

            .video-list .item .rating>div:before {
                text-transform: uppercase;
                font-weight: 600
            }

            .video-list .item .rating .kp {
                left: 10px
            }

            .video-list .item .rating .kp:before {
                content: 'kp';
                color: #f60
            }

            .video-list .item .rating .imdb {
                right: 10px
            }

            .video-list .item .rating .imdb:before {
                content: 'imdb';
                color: #fc0
            }

            .video-list .item .tags {
                position: absolute;
                top: 10px;
                left: 10px;
                display: flex;
                flex-wrap: wrap;
                gap: 3px;
                z-index: 2
            }

            .video-list .item .tags>* {
                padding: 3px 5px;
                border-radius: 3px;
                background: var(--main-color);
                color: #fff;
                font-weight: 600;
                font-size: 13px
            }

            .video-list .item.visible {
                display: block!important
            }

            .video-list .order {
                width: 100%;
                white-space: nowrap;
                overflow: auto
            }

            .video-list .order h1,.video-list .order h2 {
                background-color: var(--main-color);
                color: var(--light-background);
                margin-right: 20px;
                height: 40px;
                line-height: 40px!important;
                padding: 0 20px;
                border-radius: 3px;
                display: inline-block;
                vertical-align: top;
                font-size: 18px!important;
                font-weight: 600
            }

            .video-list .order button {
                height: 40px;
                line-height: 40px;
                padding: 0 20px;
                cursor: pointer;
                border-radius: 3px;
                display: inline-block;
                vertical-align: top;
                border: 0;
                background: 0 0;
                font: 14px -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
                color: var(--heading-color)
            }

            .video-list .order button.active {
                background: var(--light-background);
                color: var(--nav-color)
            }

            .video-list .order button:not(.active):hover {
                background: var(--light-background);
                cursor: pointer
            }

            @keyframes shine-lines {
                0% {
                    background-position: -100px
                }

                40%,100% {
                    background-position: 240px
                }
            }

            @media screen and (max-width: 1020px) {
                .video-list .item {
                    width:calc(100%/4 - 10px*3/4)
                }
            }

            @media screen and (max-width: 760px) {
                .video-list {
                    padding:10px
                }

                .video-list .item {
                    width: calc(100%/3 - 10px*2/3)
                }
            }

            @media screen and (max-width: 470px) {
                .video-list .item {
                    width:calc(100%/2 - 10px*1/2)
                }
            }

            @keyframes spin {
                from {
                    transform: rotate(0deg)
                }

                to {
                    transform: rotate(-360deg)
                }
            }

            #footer .wrap {
                background-color: var(--footer-background);
                color: var(--text-color);
                padding: 20px 20px 30px
            }

            body.dark #footer .wrap {
                border-top: 2px solid var(--subheader-border);
            }

            body:not(.dark) #footer .wrap {
                background-color: #ededed;
                color: #1f1e1e;
            }

            #footer .copyright {
                max-width: 100%
            }

            #footer .copyright a {
                color: var(--main-color);
                font-weight: 600
            }

            #footer .logo {
                display: inline-block
            }

            #footer .logo img {
                display: block
            }

            #footer .logo img~img {
                display: none
            }

            body.dark #footer .logo img {
                display: none
            }

            body.dark #footer .logo img~img {
                display: block
            }

            @media screen and (max-width: 760px) {
                #footer .wrap {
                    text-align:center
                }

                #footer .copyright {
                    margin: 0 auto
                }
            }

            .fixed-light-dark,.to-top {
                position: fixed;
                bottom: 70px;
                left: calc(50% + 600px + 10px);
                width: 40px;
                height: 40px;
                background: #fff;
                border-radius: 5px;
                padding: 8px;
                fill: var(--main-color);
                stroke: var(--main-color);
                cursor: pointer;
                transition: all .2s ease;
                opacity: 0;
                pointer-events: none;
                border: 0;
                transition: all .2s ease;
                z-index: 999
            }

            .fixed-light-dark.visible,.to-top.visible {
                pointer-events: all;
                opacity: 1
            }

            .fixed-light-dark {
                bottom: 20px
            }

            .fixed-light-dark svg {
                position: absolute;
                top: 10px;
                left: 10px;
                width: 20px;
                height: 20px;
                opacity: 0;
                pointer-events: none;
                transition: transform .2s ease,opacity .2s ease;
                transform: rotate(0)
            }

            body:not(.dark) .fixed-light-dark svg:first-of-type,body.dark .fixed-light-dark svg:last-of-type {
                opacity: 1;
                pointer-events: all;
                transform: rotate(360deg)
            }

            .fixed-light-dark:hover,.to-top:hover {
                background: var(--main-color);
                fill: #fff;
                stroke: #fff
            }

            @media screen and (max-width: 1270px) {
                .fixed-light-dark,.to-top {
                    left:auto;
                    right: 10px
                }
            }

            @media screen and (max-width: 420px) {
                .fixed-light-dark,.to-top {
                    width:35px;
                    height: 35px;
                    padding: 8px
                }

                .to-top {
                    bottom: 60px
                }

                .fixed-light-dark svg {
                    top: 8px;
                    left: 8px;
                    width: 18px;
                    height: 18px
                }
            }

            .lds-roller {
                display: inline-block;
                position: relative;
                width: 80px;
                height: 80px
            }

            .lds-roller div {
                animation: lds-roller 1.2s cubic-bezier(.5,0,.5,1) infinite;
                transform-origin: 40px 40px
            }

            .lds-roller div:after {
                content: " ";
                display: block;
                position: absolute;
                width: 7px;
                height: 7px;
                border-radius: 50%;
                background: var(--main-color);
                margin: -4px 0 0 -4px
            }

            .lds-roller div:nth-child(1) {
                animation-delay: -.036s
            }

            .lds-roller div:nth-child(1):after {
                top: 63px;
                left: 63px
            }

            .lds-roller div:nth-child(2) {
                animation-delay: -.072s
            }

            .lds-roller div:nth-child(2):after {
                top: 68px;
                left: 56px
            }

            .lds-roller div:nth-child(3) {
                animation-delay: -.108s
            }

            .lds-roller div:nth-child(3):after {
                top: 71px;
                left: 48px
            }

            .lds-roller div:nth-child(4) {
                animation-delay: -.144s
            }

            .lds-roller div:nth-child(4):after {
                top: 72px;
                left: 40px
            }

            .lds-roller div:nth-child(5) {
                animation-delay: -.18s
            }

            .lds-roller div:nth-child(5):after {
                top: 71px;
                left: 32px
            }

            .lds-roller div:nth-child(6) {
                animation-delay: -.216s
            }

            .lds-roller div:nth-child(6):after {
                top: 68px;
                left: 24px
            }

            .lds-roller div:nth-child(7) {
                animation-delay: -.252s
            }

            .lds-roller div:nth-child(7):after {
                top: 63px;
                left: 17px
            }

            .lds-roller div:nth-child(8) {
                animation-delay: -.288s
            }

            .lds-roller div:nth-child(8):after {
                top: 56px;
                left: 12px
            }

            @keyframes lds-roller {
                0% {
                    transform: rotate(0deg)
                }

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

            .search-result {
                opacity: 0;
                pointer-events: none;
                transition: all .2s ease;
                transform: translateY(10px);
                display: flex;
                position: absolute;
                top: 100%;
                right: 0;
                width: 400px;
                background: var(--light-background);
                box-shadow: 0 30px 60px -12px rgba(50,50,93,.25),0 18px 36px -18px rgba(0,0,0,.3),0 -12px 36px -8px rgba(0,0,0,.025);
                padding: 10px;
                flex-direction: column;
                gap: 5px;
                max-height: 300px;
                overflow: auto;
                scrollbar-color: #777 #ccc;
                scrollbar-width: thin
            }

            .search-result::-webkit-scrollbar {
                height: 5px
            }

            .search-result::-webkit-scrollbar-thumb {
                border-radius: 0!important;
                background-color: var(--main-color)!important
            }

            .search-result::-webkit-scrollbar {
                background: #fff!important
            }

            body.dark .search-result {
                box-shadow: 0 30px 60px -12px rgba(50,50,93,.35),0 18px 36px -18px rgba(0,0,0,.9),0 -12px 36px -8px rgba(0,0,0,.155)
            }

            .search-result .lds-roller {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                opacity: 0;
                pointer-events: none;
                transition: all .2s ease;
                margin: auto;
                flex-shrink: 0
            }

            .search-result.active {
                opacity: 1;
                pointer-events: all;
                transform: translateY(0)
            }

            .search-result .item {
                display: flex;
                gap: 10px;
                align-items: center;
                cursor: pointer;
                transition: all .2s ease;
                border-radius: 3px;
                overflow: hidden;
                flex-shrink: 0;
                opacity: 1
            }

            .search-result .item:hover {
                background: rgba(0,0,0,.05)
            }

            body.dark .search-result .item:hover {
                background: rgba(0,0,0,.3)
            }

            .search-result .item img {
                width: 34px;
                aspect-ratio: 17/25;
                object-fit: cover;
                border-radius: 3px
            }

            .search-result .item .right {
                display: flex;
                gap: 5px;
                flex-direction: column;
                max-width: calc(100% - 44px)
            }

            .search-result .item .title {
                color: var(--heading-color);
                font-weight: 600;
                flex-shrink: 1;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap
            }

            .search-result .item .rating {
                display: flex;
                gap: 4px
            }

            .search-result .item .rating span {
                color: var(--heading-color);
                line-height: 20px;
                border-radius: 3px;
                font-size: 10px;
                font-weight: 600;
                padding: 0;
                text-align: center
            }

            .search-result .item .rating span.kp {
                width: 55px;
                box-shadow: inset 0 0 0 2px #f60
            }

            .search-result .item .rating span.kp:before {
                content: 'KP '
            }

            .search-result .item .rating span.imdb {
                width: 65px;
                box-shadow: inset 0 0 0 2px #fc0
            }

            .search-result .item .rating span.imdb:before {
                content: 'IMDB '
            }

            .search-result.loading {
                opacity: 1;
                pointer-events: all;
                transform: translateY(0);
                height: 150px
            }

            .search-result.loading .lds-roller {
                opacity: 1
            }

            .search-result.loading .item {
                opacity: 0
            }

            @media screen and (max-width: 1000px) {
                .search-result {
                    position:fixed;
                    z-index: 9999;
                    top: 100px;
                    left: 0;
                    width: 300px;
                    max-height: calc(100vh - 100px)
                }
            }

            /*! This file is auto-generated */

            .commentpro {
                --avatar-height: 40px;
                --emoji-height: 40px
            }

            .commentpro.two-columns {
                display: flex;
                justify-content: space-between;
                align-items: stretch;
                flex-wrap: wrap
            }

            .commentpro.two-columns .commentpro-form-wrapper {
                order: 1;
                width: 48%
            }

            .commentpro.two-columns .commentpro-comments {
                width: 48%
            }

            .commentpro:not(.two-columns) .commentpro-comments {
                margin: 30px 0 0
            }

            .commentpro-form {
                position: sticky;
                top: 90px;
                display: flex;
                flex-direction: column;
                gap: 15px
            }

            .commentpro-item .commentpro-form {
                position: static;
                margin: 0 0 20px
            }

            .commentpro-standalone-container {
                background: #fff;
                box-shadow: 3px 3px 6px rgba(0,0,0,.1);
                border-radius: 4px;
                overflow: hidden
            }

            .commentpro-standalone-container:has(textarea:focus),.commentpro-standalone-container:has(.ql-editor:focus) {
                box-shadow: inset 0 0 0 1px #79c142,inset 1px 2px 5px rgba(0,0,0,.1)
            }

            .commentpro-standalone-container .editor-container {
                height: 100px;
                min-height: 100px;
                max-height: calc(100vh - 400px);
                resize: vertical;
                overflow: auto
            }

            .commentpro-standalone-container .editor-container~textarea {
                display: none
            }

            .commentpro-standalone-container textarea {
                height: 100px;
                min-height: 100px;
                max-height: calc(100vh - 400px);
                resize: vertical;
                overflow: auto;
                width: 100%;
                display: block;
                border: 0;
                padding: 12px 15px;
                background: 0 0
            }

            .commentpro-standalone-container textarea::-webkit-input-placeholder {
                font-size: 13px;
                font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif
            }

            .commentpro-standalone-container textarea::-moz-placeholder {
                font-size: 13px;
                font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif
            }

            .commentpro-standalone-container textarea::-ms-placeholder {
                font-size: 13px;
                font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif
            }

            .commentpro-standalone-container textarea::placeholder {
                font-size: 13px;
                font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif
            }

            .commentpro-form_group [type=text] {
                box-shadow: 3px 3px 6px rgba(0,0,0,.1);
                width: 48.5%;
                height: 40px;
                line-height: 40px;
                border-radius: 4px;
                border: 0;
                padding: 0 15px;
                background: #fff
            }

            .commentpro-form_group [type=text]:focus {
                box-shadow: inset 0 0 0 1px #79c142,inset 1px 2px 5px rgba(0,0,0,.1)
            }

            .commentpro-form_group [type=text]:disabled {
                color: #888;
                cursor: not-allowed;
                opacity: .65
            }

            .commentpro-form_btn button {
                display: inline-block;
                text-align: center;
                padding: 0 20px;
                height: 40px;
                line-height: 40px;
                border-radius: 3px;
                cursor: pointer;
                text-transform: uppercase;
                box-shadow: inset 0 -3px #6a3;
                color: #fff;
                background-color: #79c142;
                font-size: 14px;
                font-weight: 600;
                border: 0
            }

            .commentpro-form_btn button:hover {
                background-color: #82de3b;
                color: #fff;
                box-shadow: 0 10px 20px 0 transparent
            }

            .commentpro-heading {
                font-size: 18px;
                font-weight: 600;
                padding-bottom: 10px
            }

            .commentpro-emoji {
                display: flex;
                margin: 5px 0 -5px;
                list-style: none;
                user-select: none;
                overflow: auto;
                padding: 0 0 5px;
                scrollbar-color: #777 #ccc;
                scrollbar-width: thin
            }

            .commentpro-emoji li {
                margin: 9px .6% 6px;
                cursor: pointer;
                transition: transform .1s;
                font-size: 16px
            }

            .commentpro-emoji li img {
                max-width: none;
                height: var(--emoji-height);
                margin: 0 1px;
                position: relative;
                top: -1px;
                width: auto
            }

            .commentpro-emoji li img:not([data-ll-status=loaded]) {
                max-width: var(--emoji-height)
            }

            .commentpro-emoji li:hover {
                transform: scale(1.5)
            }

            .commentpro-sort_btn {
                background: 0 0;
                margin: 0 2px;
                border: 0;
                border-bottom: 1px dashed;
                cursor: pointer;
                color: #000;
                opacity: .8
            }

            .commentpro-sort_btn.active {
                opacity: 1
            }

            .commentpro-items {
                list-style: none
            }

            .commentpro-items_father {
                list-style: none;
                margin: 30px 0 0
            }

            .commentpro-items_father>li {
                margin: 0 0 20px
            }

            .commentpro-avatar {
                background: var(--avatar-background);
                width: var(--avatar-height);
                height: var(--avatar-height);
                display: flex;
                justify-content: center;
                text-transform: uppercase;
                font-weight: 600;
                border-radius: 50%;
                line-height: var(--avatar-height);
                color: #fff
            }

            .commentpro-avatar img {
                border-radius: 50%
            }

            .commentpro-body {
                width: calc(100% - 50px);
                margin: 0 0 20px
            }

            .commentpro-inner {
                display: flex;
                justify-content: space-between;
                align-items: flex-start;
                gap: 10px
            }

            .commentpro-author {
                display: flex;
                justify-content: flex-start;
                align-items: center;
                font-size: 13px
            }

            .commentpro-name {
                font-weight: 600;
                color: #79c142;
                margin: 0 15px 0 0;
                max-width: calc(100% - 120px);
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden
            }

            .commentpro-date {
                opacity: .7
            }

            .commentpro-text {
                margin: 8px 0 15px;
                word-wrap: break-word
            }

            .commentpro-controls {
                display: flex;
                gap: 6px 20px;
                justify-content: flex-start;
                align-items: center;
                flex-wrap: wrap
            }

            .commentpro-likes {
                display: flex;
                justify-content: center;
                align-items: center;
                gap: 7px
            }

            .commentpro-reply button,.commentpro-abuse button,.commentpro-likes button {
                border: 0;
                background: 0 0;
                width: 18px;
                height: 18px;
                cursor: pointer;
                fill: #444;
                opacity: .6;
                transition: all .2s ease
            }

            .commentpro-likes button.active,.commentpro-reply button:hover,.commentpro-abuse button:hover,.commentpro-likes button:hover {
                fill: #79c142;
                color: #79c142
            }

            .commentpro-reply,.commentpro-abuse {
                display: flex;
                justify-content: center;
                align-items: center
            }

            .commentpro-reply button,.commentpro-abuse button {
                width: min-content;
                display: flex;
                gap: 3px;
                align-items: flex-end
            }

            .commentpro-reply button svg,.commentpro-abuse button svg {
                padding: 3px;
                min-width: 20px;
                height: 100%
            }

            .commentpro-reply button:after,.commentpro-abuse button:after {
                content: attr(data-text);
                font-size: 15px
            }

            .commentpro-karma {
                font-weight: 600
            }

            .commentpro-karma.green {
                color: #79c142
            }

            .commentpro-karma.green:before {
                content: '+'
            }

            .commentpro-karma.red {
                color: red
            }

            .commentpro-form_change,.commentpro-form_reply {
                margin: -10px 0 0;
                color: var(--text-color);
                display: none
            }

            .commentpro-form_change button,.commentpro-form_reply button {
                display: inline-flex;
                width: 20px;
                height: 20px;
                line-height: 16px;
                justify-content: center;
                background: var(--main-color);
                border: 0;
                border-radius: 3px;
                cursor: pointer;
                position: relative;
                top: -1px;
                margin: 0 10px 0 0;
                box-shadow: inset 0 -3px var(--main-color-darker);
                color: #fff;
                background-color: var(--main-color)
            }

            .ql-spoiler {
                padding: 2px 5px 4px!important
            }

            .commentpro *::-webkit-scrollbar {
                width: 5px;
                height: 5px
            }

            .commentpro *::-webkit-scrollbar-track {
                background: #ccc;
                border-radius: 10px
            }

            .commentpro *::-webkit-scrollbar-thumb {
                background: #777;
                border-radius: 10px
            }

            .commentpro *::-webkit-scrollbar-thumb:hover {
                background: #999
            }

            .commentpro .editor-container[data-text-limit]:not([data-text-limit="-1"]):after {
                content: attr(data-text-length)' / 'attr(data-text-limit);
                position: absolute;
                bottom: 5px;
                right: 12px;
                font-size: 11px;
                color: #999
            }

            @media screen and (max-width: 960px) {
                .commentpro.two-columns .commentpro-form-wrapper,.commentpro.two-columns .commentpro-comments {
                    width:100%;
                    order: initial
                }

                .commentpro-comments {
                    margin: 30px 0 0
                }
            }

            @media screen and (max-width: 520px) {
                .commentpro-form_group [type=text],.commentpro-form_btn button {
                    width:100%
                }
            }

            body {
                --main-color: #79c142;
                --light-background: #fff;
                --grey-background: #ededed;
                --dark-background: #111;
                --nav-color: #444;
                --search-background: #fff;
                --search-box-shadow: inset 0 0 0 1px #e3e3e3,inset 1px 2px 5px rgba(0,0,0,.2);
                --placeholder: #000;
                --text-color: #888;
                --heading-color: #444;
                --description-link-color: #79c142;
                --poster-box-shadow: 0 0 0 1px #ccc,2px 3px 3px 0 rgba(0,0,0,.1);
                --poster-background: #fff;
                --poster-rating-color: #111;
                --poster-rating-background: #e1e1e1;
                --poster-rating-border: #ddd;
                --subheader-border: #e3e3e3;
                --footer-background: #1e1e1e
            }

            body.dark {
                --main-color: #79C142;
                --light-background: #222;
                --grey-background: #111;
                --dark-background: #111;
                --nav-color: #eee;
                --search-background: #111;
                --search-box-shadow: inset 0 0 0 1px #111,inset 1px 2px 5px rgba(0,0,0,.2);
                --placeholder: #fff;
                --text-color: #ccc;
                --heading-color: #eee;
                --description-link-color: #79c142;
                --poster-box-shadow: 0 0 0 1px #050505,2px 3px 3px 0 rgba(0,0,0,.5);
                --poster-background: #111;
                --poster-rating-color: #ccc;
                --poster-rating-background: #050505;
                --poster-rating-border: #333;
                --subheader-border: #111;
                --footer-background: #222
            }

                html {
                    max-width: 100vw
                }

                @keyframes timeline-hover {
                }

                @keyframes timeline {
                    0% {
                        width: 0
                    }

                    100% {
                        width: 100%
                    }
                }

                svg:has([d*="M10.485"]) {
                    display: none!important;
                }
/* =================================================================
   ПОЛЬЗОВАТЕЛЬСКИЕ РЕЙТИНГИ - ДОБАВЛЕНО ДЛЯ СИСТЕМЫ RATING API
   ================================================================= */


/* Стили для разных диапазонов рейтинга */

/* Адаптивность для мобильных устройств */
@media (max-width: 768px) {
    .rating.user {
        font-size: 11px;
        padding: 1px 6px;
    }
}

/* Конец пользовательских стилей рейтингов */

/* ===============================================
   🎬 УЛУЧШЕННЫЕ СТИЛИ ДЛЯ СПИСКА СЕРИЙ
   =============================================== */

/* Переопределяем основные стили video-list для красивых кнопок серий */
.video-list {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 15px;
    padding: 20px;
    margin: 0px 0 1px 0;
    background: var(--light-background);
}

.video-list .heading {
    grid-column: 1 / -1;
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 25px;
    color: var(--heading-color);
    text-align: center;
    position: relative;
    width: 100%;
}

.video-list .heading::before {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: var(--main-color);
    border-radius: 2px;
}

/* Стили для кнопок серий */
.video-list .item {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60px;
    padding: 15px 10px;
    background: linear-gradient(135deg, var(--light-background), var(--grey-background));
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    text-decoration: none;
    color: var(--heading-color);
    font-weight: 600;
    font-size: 16px;
    text-align: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    width: auto;
}

/* Убираем старые стили после content */
.video-list .item:after {
    display: none;
}

/* Эффект hover для кнопок серий */
.video-list .item:hover {
    transform: translateY(-3px) scale(1.02);
    background: linear-gradient(135deg, var(--main-color), var(--main-color-hover, #ff8c00));
    color: #ffffff;
    border-color: var(--main-color);
    box-shadow: 0 8px 25px rgba(255, 165, 0, 0.3);
}

/* Активное состояние кнопки */
.video-list .item:active {
    transform: translateY(-1px) scale(1.01);
    box-shadow: 0 4px 15px rgba(255, 165, 0, 0.2);
}

/* Темная тема для кнопок серий */
body.dark .video-list .item {
    background: linear-gradient(135deg, var(--grey-background), var(--dark-background));
    border-color: rgba(255, 255, 255, 0.2);
    color: var(--text-color);
}

body.dark .video-list .item:hover {
    background: linear-gradient(135deg, var(--main-color), var(--main-color-hover, #d35400));
    color: #000000;
    border-color: var(--main-color);
}

body.dark .video-list .item:hover .rating,
body.dark .video-list .item:hover .rating div {
    color: #000000 !important;
}

/* Убираем старые элементы, которые не нужны для кнопок */
.video-list .item img {
    display: none;
}

/* Переопределяем .rating как номер серии */
.video-list .item .rating {
    position: static;
    background: none;
    padding: 0;
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
    border-radius: 0;
    display: block;
    width: auto;
    height: auto;
}

.video-list .item .rating > div {
    position: static;
    font-size: 16px;
    font-weight: 600;
    color: inherit;
    bottom: auto;
    left: auto;
    right: auto;
    z-index: auto;
}

.video-list .item .rating > div:before {
    display: none;
}

/* Убираем теги и заголовки */
.video-list .item .title,
.video-list .item .tags {
    display: none;
}

/* Стили для блока порядка/арок */
.video-list .order {
    grid-column: 1 / -1;
    width: 100%;
    margin: 20px 0 10px 0;
    text-align: center;
}

.video-list .order h2 {
    background: var(--main-color);
    color: white;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 18px;
    font-weight: 600;
    margin: 0;
    display: inline-block;
}

/* Адаптивные стили для планшетов */
@media screen and (max-width: 1024px) {
    .video-list {
        grid-template-columns: repeat(4, 1fr); /* 4 серии в ряд на планшетах */
        gap: 12px;
        padding: 15px;
    }
    
    .video-list .item {
        min-height: 55px;
        padding: 12px 8px;
        font-size: 15px;
    }
}

/* Адаптивные стили для мобильных устройств */
@media screen and (max-width: 768px) {
    .video-list {
        grid-template-columns: repeat(3, 1fr); /* 3 серии в ряд на мобильных */
        gap: 10px;
        padding: 10px;
    }
    
    .video-list .item {
        min-height: 50px;
        padding: 10px 6px;
        font-size: 14px;
        border-radius: 10px;
    }
    
    .video-list .heading {
        font-size: 20px;
        margin-bottom: 20px;
    }
}

/* Дополнительные стили для очень маленьких экранов */
@media screen and (max-width: 480px) {
    .video-list {
        grid-template-columns: repeat(3, 1fr); /* Остается 3 в ряд */
        gap: 8px;
        padding: 8px;
    }
    
    .video-list .item {
        min-height: 45px;
        padding: 8px 4px;
        font-size: 13px;
        border-radius: 8px;
    }
    
    .video-list .heading {
        font-size: 18px;
        margin-bottom: 15px;
    }
    
    .video-list .heading::before {
        width: 40px;
        height: 2px;
    }
}

/* Анимация появления серий */
.video-list .item.visible {
    animation: slideInUp 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    display: flex;
    box-shadow: inset 0 0 0 1px #11111159;
}

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Эффект волны при загрузке */
.video-list .item:nth-child(even) {
    animation-delay: 0.1s;
}

.video-list .item:nth-child(3n) {
    animation-delay: 0.2s;
}

.video-list .item:nth-child(4n) {
    animation-delay: 0.3s;
}

.video-list .item:nth-child(5n) {
    animation-delay: 0.4s;
}

/* Специальные стили для особых серий (финалы, спецвыпуски) */
.video-list .item.special {
    background: linear-gradient(135deg, #ff6b6b, #ee5a24);
    border-color: #ff6b6b;
}

.video-list .item.special:hover {
    background: linear-gradient(135deg, #ee5a24, #d63031);
    box-shadow: 0 8px 25px rgba(238, 90, 36, 0.4);
}

/* Основной контейнер плеера */
.player-wrapper {
    background: #1e1e1e;
    border-radius: 8px;
    padding: 10px 10px 0;
    margin: 20px 0;
    position: relative;
}

/* Контейнер для вкладок */
.tabs-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

/* Навигация с кнопками плееров */
.tabs-container nav {
    display: flex;
    align-items: center;
    overflow: auto;
    gap: 12px;
    min-width: 300px;
    max-width: calc(100% - 300px);
    order: 1;
}

/* Кнопки плееров */
.tab-btn {
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #f2f2f2;
    font-size: 14px;
    font-weight: 700;
    background: #4f4f4f;
    transition: all .2s ease;
    border: 2px solid transparent;
    border-radius: 6px;
    padding: 0 20px;
    cursor: pointer;
    gap: 10px;
    text-transform: uppercase;
    flex-shrink: 0;
    border: none;
    outline: none;
}

/* Активная кнопка плеера */
.tab-btn.active {
    background: var(--main-color, #007bff);
    color: #f2f2f2;
}

/* Ховер эффект для кнопок */
.tab-btn:hover {
    background: var(--main-color, #007bff);
    transform: translateY(-1px);
}

/* Контейнер для плеера */
.player-container {
    width: calc(100% + 20px);
    margin: 10px -10px 0;
    background: #0f0f0f;
    transition: all .2s ease;
    border-radius: 4px;
    overflow: hidden;
}

/* Скрытый плеер */
.player-container.hidden {
    display: none;
}

/* Контейнер для видео */
.video-container {
    width: 100%;
    aspect-ratio: 16/9;
    position: relative;
    background: #000;
}

/* Iframe плеера */
.video-container iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

/* Адаптивность для мобильных устройств */
@media (max-width: 768px) {
    .tabs-container {
        flex-direction: column;
        align-items: stretch;
    }
    
    .tabs-container nav {
        max-width: 100%;
        min-width: auto;
        order: 1;
        margin-bottom: 10px;
    }
    
    .tab-btn {
        font-size: 12px;
        padding: 0 15px;
        height: 36px;
    }
}

/* Дополнительные стили для темной темы */
/* Контейнер для навигации по эпизодам */
.episode-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    margin: 0;
    padding: 15px;
    background: #1e1e1e;
    flex-wrap: wrap;
}

body:not(.dark) .episode-controls {
    background: #ededed;
    border: 1px solid var(--poster-rating-border);
    border-radius: 0;
    flex-wrap: wrap;
}

/* Кнопки навигации */
.watch-button {
    height: 45px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #f2f2f2;
    font-size: 14px;
    font-weight: 600;
    background: #4f4f4f;
    transition: all .3s ease;
    border: 2px solid transparent;
    border-radius: 8px;
    padding: 0 25px;
    cursor: pointer;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    position: relative;
    overflow: hidden;
    min-width: 140px;
    flex: 1;
    max-width: 300px;
}

/* Центральная кнопка (К списку серий) */

.watch-button.center {
    background: #116918 !important;
    font-weight: 700;
    box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3);
}

/* Эффекты при наведении */
.watch-button:hover {
    background: var(--main-color, #007bff);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 123, 255, 0.4);
    color: #ffffff;
}

/* Специальный ховер для центральной кнопки */

.watch-button.center:hover {
    background: #0056b3 !important;
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 86, 179, 0.5);
}

/* Эффект активного нажатия */
.watch-button:active {
    transform: translateY(0);
    transition: all .1s ease;
}

/* Отключенная кнопка */

/* Анимация появления */
.episode-controls {
    /* animation: fadeInUp 0.6s ease-out; */
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Стрелки в кнопках */
.watch-button::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
    transition: all 0.5s ease;
}

.watch-button:hover::before {
    width: 100%;
    left: 100%;
}

/* Адаптивность для планшетов */
@media (max-width: 768px) {
    .episode-controls {
        /* flex-direction: row; */
        /* gap: 10px; */
        /* padding: 10px; */
        /* justify-content: center; */
    }
    
    .watch-button {
        width: auto;
        min-width: 50px;
        padding: 0;
        font-size: 0;
        height: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .watch-button::after {
        content: '';
        display: block;
        width: 0;
        height: 0;
        border-style: solid;
        font-size: 16px;
    }
    
    .watch-button[href*="episode-"]:first-of-type::after {
        border-width: 8px 12px 8px 0;
        border-color: transparent #fff transparent transparent;
        margin-left: -3px;
    }
    
    .watch-button.center::after {
        content: '▶';
        font-size: 20px;
        color: #fff;
        border: none;
        line-height: 40px;
    }
    
    .watch-button[href*="episode-"]:last-of-type::after {
        border-width: 8px 0 8px 12px;
        border-color: transparent transparent transparent #fff;
        margin-right: -3px;
    }
    
    .watch-button[href="/"]:not([href*="episode-"])::after {
        content: '';
        width: 24px;
        height: 24px;
        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="%23FFF"><path stroke-linecap="round" stroke-linejoin="round" d="M8.25 6.75h12M8.25 12h12m-12 5.25h12M3.75 6.75h.007v.008H3.75V6.75Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0ZM3.75 12h.007v.008H3.75V12Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm-.375 5.25h.007v.008H3.75v-.008Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z"/></svg>');
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        border: none;
    }
}

/* Адаптивность для мобильных */
@media (max-width: 480px) {
    .episode-controls {
        /* padding: 10px; */
        /* gap: 10px; */
        /* margin: 15px 0; */
    }
}

/* Темная тема */

/* Дополнительные состояния для лучшего UX */
.watch-button:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.3);
}

.watch-button:focus:not(:hover) {
    transform: none;
}
/* Блок с сериями в плеере */

/* Кнопки серий */

/* Активная серия */

/* Ховер для неактивных серий */

/* Кнопка скрытия/показа списка серий */

/* Адаптивность для мобильных */

/* ============================================
   Блок плеера #Player
   ============================================ */

#PlayerBlock {
    display: flex;
    flex-direction: column;
    padding-top: 0;
}

#PlayerBlock > h2 {
    font-size: 18px;
    padding: 10px 0 10px 20px;
    font-weight: bold;
    color: var(--color-font-gray-32);
    background: #111111;
}

body:not(.dark) #PlayerBlock > h2 {
    padding: 10px 0 10px 20px;
    font-size: 18px;
    font-weight: 700;
    background: #ededed;
}

#Player {
    width: 100%;
    display: flex;
    flex-direction: row;
    user-select: none;
}

#VideoBlock {
    width: 65%;
    display: flex;
    flex-grow: 1;
    flex-direction: column;
}

#SelectVideo {
    width: 100%;
    height: 40px;
    display: flex;
    flex-direction: row;
    border-top: solid 1px var(--color-border-gray-E);
    background: var(--color-bg-player);
}

#SelectVideo > button.active {
    background: var(--gradient-main);
    cursor: default;
    color: var(--color-font-active-player);
}

body:not(.dark) #SelectVideo > button.active {
    color: #1a1a1a;
    background: var(--main-color);
}

#SelectVideo > button {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0 20px;
    border: none;
    outline: none;
    font-size: 15px;
    font-weight: 500;
    color: #FFF;
    background: var(--color-player-gray-16);
    transition: 0.2s;
    cursor: pointer;
}

body:not(.dark) #SelectVideo > button {
    color: #ffffff;
    background: #a8a8a8;
}

#SelectVideo > button:hover:not(.active) {
    background: var(--color-player-gray-20, #333);
}

#Video {
    position: relative;
    width: 100%;
    height: 360px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--color-player-gray-16);
}

body.dark #Video {
    border-left: solid 1px #121212;
}

#Video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

#SelectFilmBlock {
    width: 35%;
    display: flex;
    flex-direction: column;
}

#SelectFilmBlock > .header {
    height: 40px;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0 20px;
    font-size: 15px;
    font-weight: 500;
    border-top: solid 1px var(--color-border-gray-E);
    color: var(--color-font-gray-32);
    background: var(--color-bg-player);
}

#SelectFilmBlock > .content {
    width: 100%;
    height: 360px;
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: auto;
    background: var(--color-player-gray-16);
}

#SelectSeason {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
    box-sizing: border-box;
    background: var(--color-player-gray-16);
    list-style: none;
    margin: 0;
}

#SelectSeason > li {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#SelectSeason > li > a {
    display: flex;
    text-decoration: none;
    font-size: 15px;
    font-weight: 700;
    color: #969696;
    cursor: pointer;
    transition: color 0.2s;
}

#SelectSeason > li > a:hover {
    color: #fff;
}

#SelectSeason > li.active > a {
    color: var(--main-color, #e91e63);
}

/* Список серий внутри сезона */
#SelectSeason > li > ul {
    display: none;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    padding: 0;
    margin: 0;
}

#SelectSeason > li > ul > li {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    min-width: 87px;
}

#SelectSeason > li > ul li a {
    display: block;
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    color: #969696;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.2s ease;
    text-align: center;
}

body:not(.dark) #SelectSeason > li > ul li a {
    background: rgb(255 255 255);
    color: #494949;
}

body:not(.dark) #SelectSeason > li > ul li a.active {
    color: #fff !important;
    background: var(--main-color);
}

#SelectSeason > li > ul li a:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

#SelectSeason > li > ul li a.active {
    background: var(--gradient-main, linear-gradient(135deg, #e91e63, #9c27b0));
    color: #fff;
}

/* Блок описания collapsible */
.description-block {
    margin: 0px 0;
    padding: 10px 20px;
    background: rgb(17 17 17);
}

body.dark .description-block {
    border-top: 1px solid var(--poster-rating-border);
}

body:not(.dark) .description-block {
    background: rgb(237 237 237);
}

@media (max-width: 768px) {
    .description-block {
        margin: 1px 0;
    }
}

.description-block .description-title {
    margin: 0 0 10px;
    font-size: 16px;
    font-weight: bold;
    color: var(--color-font-gray-32, #f2f2f2);
}

.description-block .description-content {
    color: var(--text-muted, #969696);
    line-height: 1.6;
    text-align: justify;
}

body:not(.dark) .description-block .description-content {
    color: #373737;
}

.description-block .description-content p {
    margin: 0 0 10px;
}

/* Стили для description блока */
.description {
    background-color: var(--card-bg-color);
    padding: 25px;
    border-radius: 8px;
    margin-top: 30px;
}

.description .prose {
    line-height: 1.7;
    color: var(--text-color);
}

.description h2 {
    font-size: 24px;
    text-align: center;
    margin-bottom: 20px;
    color: var(--accent-color);
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 10px;
}

.description h3 {
    font-size: 20px;
    margin: 25px 0 15px;
    color: var(--text-color);
}

.description p {
    margin-bottom: 18px;
    font-size: 16px;
    text-align: justify;
}

.description img {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
    width: 455px;
    margin: 8px 0px 5px 20px;
    float: right;
    display: block;
}

.description ul, 
.description ol {
    margin-left: 20px;
    margin-bottom: 20px;
}

.description li {
    margin-bottom: 12px;
}

.description strong {
    color: var(--accent-color);
    font-weight: 600;
}

/* Блок устройств и качества */
.device-block {
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    width: 100%;
    margin-bottom: 15px;
}

.dev-advantages {
    text-align: center;
    color: #c3b3a3;
    margin-bottom: 10px;
}

body:not(.dark) .dev-advantages {
    color: #373737;
}

.dev-row {
    display: flex;
    margin-top: 10px;
    justify-content: center;
    gap: 10px;
}

.device-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 79.25px;
    height: 72px;
}

.device-box img {
    width: 48px;
    height: 48px;
}

.dev-title {
    margin-top: 5px;
    font-weight: 500;
    font-family: "Bebas Neue", "PT Sans", sans-serif;
    letter-spacing: 0.05em;
    color: #fff;
}

body:not(.dark) .dev-title {
    color: #0000009c;
}

.quality-block {
    display: grid;
    grid-template-columns: 160px 1fr 1fr;
    grid-template-areas: "quality-cond qu-container-720-wr qu-container-1080-wr";
    margin: 10px 0;
    padding-bottom: 10px;
    width: 97%;
}

.quality-cond {
    display: flex;
    color: #c3b3a3;
    align-items: center;
    grid-area: quality-cond;
    font-weight: 500;
    font-size: 16px;
}

body:not(.dark) .quality-cond {
    color: #373737;
}

body:not(.dark) .quality-block {
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}

.qu-container-720-wr {
    display: flex;
    justify-content: end;
    grid-area: qu-container-720-wr;
}

.qu-container-720, .qu-container-1080 {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 65px;
    height: 40px;
    margin-left: 7px;
    background: linear-gradient(110.74deg, #FEF680 0%, #D77B13 100%);
    /* border-radius: 4px; */
}

.qu-container-1080-wr {
    display: flex;
    justify-content: end;
    grid-area: qu-container-1080-wr;
}

.qu-value {
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(95.92deg, #2B2B2B 0%, #000000 100%);
    width: 59px;
    height: 20px;
    margin-top: 5px;
    /* border-radius: 3px; */
}

.qu-value span {
    background-image: linear-gradient(104.04deg, #FDF981 0%, #D88210 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 700;
    font-size: 12px;
}

.qu-type {
    color: #000;
    font-size: 14px;
    font-weight: 700;
    margin-top: -3px;
}

.rating-plugin-container {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 10px;
}

/* Общие стили для всех рейтингов */
.mark-scale-kp, .mark-scale-imdb, .mark-scale-shiki, .mark-scale-wordart, .mark-scale-lordserial {
    display: grid;
    grid-template-columns: max-content 1fr;
    grid-template-areas:
        "sc-title sc-mark"
        "sc-graph sc-graph";
    width: 32.4%;
    height: 36px;
}

.sc-title, .sc-mark {
    color: #fff;
    font-weight: 100;
    font-size: 16px;
}

body:not(.dark) .sc-title, body:not(.dark) .sc-mark {
    color: #000000;
}

.sc-title {
    grid-area: sc-title;
}

.sc-mark {
    display: flex;
    grid-area: sc-mark;
    justify-content: flex-end;
}

.sc-graph {
    display: flex;
    padding: 2px;
    grid-area: sc-graph;
    background: #fff;
    border-radius: 2px;
}

body:not(.dark) .sc-graph {
    background: #d0d0d0;
}

.sc-graph div:not(:last-child) {
    margin-right: 2px;
}

/* Стили для КиноПоиска */
.graph-part-kp {
    width: 10%;
    height: 9px;
    background: #5B5B5B;
}

.gp-active-kp {
    background: #FF6600;
}

.st-last-kp {
    background-image: linear-gradient(to right, #FF7A00 60%, #5B5B5B 60%, #5B5B5B 100%);
}

/* Стили для IMDB */
.graph-part-imdb {
    width: 10%;
    height: 9px;
    background: #5B5B5B;
}

.gp-active-imdb {
    background: #F5C518;
}

.st-last-imdb {
    background-image: linear-gradient(to right, #F5C518 90%, #5B5B5B 90%, #5B5B5B 100%);
}

/* Стили для Shikimori */
.graph-part-shiki {
    width: 10%;
    height: 9px;
    background: #5B5B5B;
}

.gp-active-shiki {
    background: #7CFC00;
}

.st-last-shiki {
    background-image: linear-gradient(to right, #7CFC00 70%, #5B5B5B 70%, #5B5B5B 100%);
}

/* Стили для Word-Art */
.graph-part-wordart {
    width: 10%;
    height: 9px;
    background: #5B5B5B;
}

.gp-active-wordart {
    background: #FF4500;
}

.st-last-wordart {
    background-image: linear-gradient(to right, #FF4500 50%, #5B5B5B 50%, #5B5B5B 100%);
}

/* Стили для LordSerial */
.graph-part-lordserial {
    width: 10%;
    height: 9px;
    background: #5B5B5B;
}

.gp-active-lordserial {
    background: #79C142;
}

.st-last-lordserial {
    background-image: linear-gradient(to right, #79C142 50%, #5B5B5B 50%, #5B5B5B 100%);
}

@media (max-width: 768px) {
    .quality-block {
        grid-template-columns: 1fr;
        grid-template-areas: 
            "quality-cond"
            "qu-container-720-wr"
            "qu-container-1080-wr";
        gap: 10px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    }
    
    body:not(.dark) .quality-block {
        border-bottom: 1px solid rgba(0, 0, 0, 0.2);
    }
    
    .quality-cond {
        justify-content: center;
    }
    
    .qu-container-720-wr, .qu-container-1080-wr {
        justify-content: center;
    }
    
    .dev-row {
        flex-wrap: wrap;
    }
    
    .rating-plugin-container {
        flex-direction: column;
    }
}

/* Scrollbar для списка серий */
#SelectFilmBlock > .content::-webkit-scrollbar {
    width: 6px;
}

#SelectFilmBlock > .content::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
}

#SelectFilmBlock > .content::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
}

#SelectFilmBlock > .content::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* Адаптив для мобильных */
@media (max-width: 768px) {
    #Player {
        flex-direction: column;
    }
    
    #VideoBlock {
        width: 100%;
    }
    
    #Video {
        height: auto;
        aspect-ratio: 16 / 9;
    }
    
    #SelectFilmBlock {
        display: none;
    }
    
    #SelectVideo > button {
        padding: 0 12px;
        font-size: 13px;
    }
    
    #SelectSeason > li > ul li a {
        padding: 5px 10px;
        font-size: 12px;
    }
}


/* Дополнительные стили для комментариев */
#comments {
    background: var(--comments-background);
    padding: 20px;
    position: relative;
    z-index: 8;
    border-top: 1px solid var(--poster-rating-border);
    border-bottom: 1px solid var(--poster-rating-border);
    margin: 0 !important;
}

.commentpro-items_father > li {
    margin: 0 0 10px;
    box-shadow: 0 0 0 1px #cccccc38, 2px 3px 3px 0 rgba(0, 0, 0, .1);
    background: #ffffff;
    padding: 10px 10px 0 10px;
    border-radius: 4px;
    border: 1px solid var(--poster-rating-border);
}

.commentpro-items_child > li {
    margin: 0 0 10px;
    box-shadow: 0 0 0 1px #cccccc38, 2px 3px 3px 0 rgba(0, 0, 0, .1);
    background: #ffffff;
    padding: 10px 10px 0 10px;
    border-radius: 4px;
    border: 1px solid var(--poster-rating-border);
}

.description-block {
    margin: 0px 0;
    padding: 10px 20px;
    background: rgb(17 17 17);
}

/* Темная тема для комментариев */
body.dark .commentpro-items_father > li {
    background: #222222;
}

body.dark .commentpro-items_child > li {
    background: #191818;
}

/* Красивые стили для списка информации в мобильной версии */
@media (max-width: 760px) {
    #video-description .entries .left li {
        background: linear-gradient(90deg, rgba(121, 193, 66, 0.1) 0%, transparent 100%);
        padding: 1px 10px;
        margin-bottom: 8px;
        border-radius: 8px;
        border: 1px solid var(--main-color, #79c142);
        transition: all 0.3s ease;
    }
    
    #video-description .entries .left li span {
        display: inline-block;
        font-weight: 700;
        color: var(--main-color, #79c142);
        min-width: 80px;
    }
}


/* Активная кнопка сезона в навигации */
#header nav>ul>li>a.active {
    opacity: 1;
    box-shadow: inset 0 -3px var(--main-color);
    color: var(--main-color);
}

/* Открытие nav в мобильной версии */
@media screen and (max-width: 1000px) {
    #header nav.active {
        transform: translateX(0);
    }
    
    .burger-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 99;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease;
    }
    
    .burger-overlay.active {
        opacity: 1;
        pointer-events: auto;
    }
}

/* Hover эффект для серий в светлой теме */
body:not(.dark) #SelectSeason > li > ul li a:hover {
    background: var(--main-color);
    color: #fff;
}