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

a {
    text-decoration: none;
}

img {
    pointer-events: none;
}

p {
    overflow: hidden;
}

li {
    list-style: none;
}

main::-webkit-scrollbar {
    width: 0px; /* Узкий скроллбар */
}

main::-webkit-scrollbar-thumb {
    background-color: var(--Secondary); /* Цвет ползунка */
    border-radius: 15px; /* Радиус углов */
}

main::-webkit-scrollbar-track {
    background: transparent; /* Прозрачный фон */
}

.notification-content-main::-webkit-scrollbar {
    width: 2px;
    background-color: transparent;
}

.episodes-list .preview {
    width: 420px !important;
    height: 240px !important;
    object-fit: cover;
    border-radius: 15px;
}

.notification-content-main::-webkit-scrollbar-thumb {
    background-color: var(--Secondary);
    border-radius: 10px; /* Радиус углов */
}

.no-notify {
    width: 100%;
    margin: 30px 0;
    text-align: center;   
}

.no-notify p {
    color: var(--Secondary);
}

.calatog-side-second::-webkit-scrollbar {
    width: 2px;
    background-color: transparent;
}

.calatog-side-second::-webkit-scrollbar-thumb {
    background-color: var(--Secondary);
    border-radius: 10px; /* Радиус углов */
}

.premium-main::-webkit-scrollbar {
    width: 2px;
    background-color: transparent;
}

.premium-main::-webkit-scrollbar-thumb {
    background-color: var(--Secondary);
    border-radius: 10px; /* Радиус углов */
}

.dropdown-content::-webkit-scrollbar {
    width: 2px;
    background-color: transparent;
}

.dropdown-content::-webkit-scrollbar-thumb {
    background-color: var(--Secondary);
    border-radius: 10px; /* Радиус углов */
}

button {
    border: none;
    outline: none;
    cursor: pointer;
    background: none;
}

.mt-50 {
    margin-top: 50px;
}

section {
    padding: 10px 0px 10px 20px;
    width: 100%;
}

h2 {
    color: var(--Primary);
    font-size: clamp(1rem, 1.8vw, 1.45rem);
    line-height: 1.23;
    letter-spacing: 0.02em;
}

h3 {
    color: var(--Primary);
    font-size: clamp(0.9rem, 1.5vw, 1.25rem);
    line-height: 1.23;
    letter-spacing: 0.015em;
}

h1 {
    color: var(--Primary);
    line-height: 1.23;
    letter-spacing: 0.02em;
}

.empty-library {
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 100%;
    position: absolute;
    left: 0;
    right: 0;
    margin-top: 55px;
}

.empty-library p {
    color: var(--Secondary);
    font-size: clamp(0.7rem, 1.1vw, 0.85rem);
}

.empty-library-text {
    width: 40%;
}

.empty-library-text p {
    color: var(--Secondary);
}

.empty-library-text a {
    padding: 13px 25px;
    border-radius: 8px;
    color: var(--Primary);
    background: var(--Blue);
    margin-top: 10px;
    display: inline-block;
}

h2 svg {
    fill: var(--MainIconColor);
    width: 10px;
    height: 10px;
    margin-right: 2px;

}

body {
    background: var(--Navbar);
    padding-right: 10px;
    font-family: 'WATASHI', sans-serif;
    user-select: none;
    -ms-user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    overflow: hidden;
}

nav {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    z-index: 110;
    background: var(--Navbar);
}

.s-nav .end-section {
    margin-top: auto;
}

.l-nav .end-section {
    margin-top: auto;
}

.l-nav {
    width: 275px;
    display: grid;
    height: calc(100vh - 15px);
}

.l-nav .nav-btn {
    display: flex;
    gap: 15px;
    align-items: center;
    padding: 7px 10px;
    color: var(--White);
    font-size: 14px;
    font-family: 'WATASHIMedium', sans-serif;
    letter-spacing: 0.6px;
}

.l-nav h5 {
    color: var(--White);
    font-size: 12px;
}

.l-nav li img {
    width: 17px;
    height: 17px;
    object-fit: contain;
    border-radius: 4px;
    margin: 10px 11px;
}

.l-nav li {
    width: 95%;
    margin: 8px auto;
}

.l-nav .nav-btn:hover {
    background-color: var(--Navbar-hover);
    border-radius: 8px;
    transition: background-color 0.15s ease-in-out;
    position: relative;
}

.s-nav {
    width: 52px;
    display: grid;
    height: calc(100vh - 15px);
}

main {
    flex-grow: 1;
    margin-left: 52px;
    margin-top: 31px;
    position: relative;
    overflow-y: auto;
    overflow-x: hidden;
    height: calc(89vh - 45px);
    background: var(--Background);
    border: 1px solid var(--Outline-color-primary-disabled);
    scrollbar-gutter: stable;
    border-radius: 15px;
}

.history-img {
    width: 300px;
    height: 180px;
}

.background-video__wrapper {
    width: 100%;
    height: 68.5vh;
    overflow: hidden;
    background: var(--Navbar);
    position: relative;
}

.profile-container {
    width: 100%;
    height: 45.6vh;
    overflow: hidden;
    background: var(--Navbar);
    position: relative;
}

.profile-banner {
    object-fit: cover;
    width: 100%;
    height: 100%;
    border-top-left-radius: 15px;
}

.profile-avatar {
    width: 200px;
    height: 200px;
    object-fit: cover;
    border-radius: 50%;
    z-index: 10;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.profile-information {
    position: absolute;
    bottom: 0;
    padding: 20px 40px;
    width: 100%;
    z-index: 10;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.profile-content {
    width: 100%;
    height: 100%;
}

.background-video-containerinfo {
    display: flex;
    justify-content: space-between;
    position: absolute;
    bottom: 0;
    padding: 10px 30px 15px 30px;
    z-index: 10;
    width: 100%;
}

.background-video-information div {
    font-size: clamp(0.85rem, 1.2vw, 0.95rem);
    color: var(--Secondary-onDark);
    line-height: 1.23077;
    font-weight: 600;
    letter-spacing: 0;
}

.background-video-information p {
    font-size: clamp(0.95rem, 1.3vw, 1.1rem);
    color: var(--Primary-onDark);
    line-height: 1.23077;
    font-weight: 500;
    letter-spacing: 0;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    margin: 8px 0 2px;
}

.background-video-information {
    max-width: 35%;
}

.background-video-containerinfo img {
    width: 90%;
}

.background-video__content {
    width: 100%;
    height: 100%;
    position: relative;
}

.background-video__content video, .background-video-image{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-top-left-radius: 15px;
}

.titlebar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 31px;
    background: var(--Navbar);
    -webkit-app-region: drag;
    z-index: 100 !important;
}

.s-nav li {
    display: flex;
    justify-content: center;
    margin-top: 7px;
    position: relative;
}

.s-nav li .tooltiptext {
    visibility: hidden;
    width: max-content;
    background-color: rgba(34, 34, 36, 0.80);
    backdrop-filter: blur(20px) saturate(120%);
    color: var(--White);
    text-align: center;
    border-radius: 6px;
    padding: 6px 12px;
    position: absolute;
    z-index: 1;
    font-size: 15px;
    bottom: 120%;
    left: 50%;
    margin-left: -20px;
    opacity: 0;
    transition: opacity 0.3s;
    box-shadow: rgba(0, 0, 0, 0.55) 5px 10px 20px;
}

.s-nav li:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}

.background-video-btn .background-video-tooltiptext {
    visibility: hidden;
    width: max-content;
    background-color: rgba(34, 34, 36, 0.80);
    color: var(--White);
    text-align: center;
    border-radius: 6px;
    padding: 6px 12px;
    position: absolute;
    z-index: 100 !important;
    font-size: 15px;
    bottom: 120%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, 0%);
    opacity: 0;
    transition: opacity 0.3s;
    box-shadow: rgba(0, 0, 0, 0.55) 5px 10px 20px;
}

.background-video-btn:hover .background-video-tooltiptext {
    visibility: visible;
    opacity: 1 !important;
}

.s-nav .nav-btn {
    padding: 7px 10px;
    display: flex;
    align-items: center;
}

nav path{
    fill: var(--Primary) !important;
}

.profile-information h2 {
    color: var(--Primary-onDark) !important;
}

  .profile-information .title-name {
      color: var(--Primary-onDark);
  }

.s-nav li img {
    width: 17px;
    height: 17px;
    object-fit: contain;
    border-radius: 4px;
    margin: 8px 0;
}

.nav-profile {
    width: 20px !important;
    height: 20px !important;
    margin: 0 !important;
    border-radius: 100% !important;
    object-fit: cover !important;
}

.s-nav .nav-btn:hover {
    background-color: var(--Navbar-hover);
    border-radius: 5px;
    transition: background-color 0.15s ease-in-out;
}

.nav-btn.nav-active { /* <--- Добавили стили для активного состояния */
    background-color: var(--Navbar-hover);
    border-radius: 5px;
    position: relative; /*  Это может быть не нужно, если уже есть в .nav-btn */
}

.nav-btn.nav-active::after { /* <--- Добавили .s-nav .nav-btn */
    content: '';
    border-left: 3px solid var(--Blue);
    position: absolute;
    height: 50%;
    left: 0;
    top: 25%;
    border-radius: 100px;
    transition: border-left-color 0.15s ease-in-out;
}

.background-video-blure {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(40, 40, 40, .5);
    -webkit-backdrop-filter: saturate(180%) blur(10px);
    backdrop-filter: saturate(180%) blur(10px);
    mask-image: linear-gradient(to bottom, transparent, rgba(0, 0, 0, .068) 3.3%, rgba(0, 0, 0, .145) 5.9%, rgba(0, 0, 0, .227) 8.1%, rgba(0, 0, 0, .313) 10.1%, rgba(0, 0, 0, .401) 12.1%, rgba(0, 0, 0, .49) 14.6%, rgba(0, 0, 0, .578) 17.7%, rgba(0, 0, 0, .661) 21.8%, rgba(0, 0, 0, .74) 27.1%, rgba(0, 0, 0, .812) 33.9%, rgba(0, 0, 0, .875) 42.4%, rgba(0, 0, 0, .927) 53%, rgba(0, 0, 0, .966) 66%, rgba(0, 0, 0, .991) 81.5%, rgba(0, 0, 0, .991) 100%);
    z-index: -1;
}

.animepage-preview-blure {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 35%;
    border-radius: 0 0 10px 10px;
    background-color: rgba(40, 40, 40, .5);
    -webkit-backdrop-filter: saturate(180%) blur(10px);
    backdrop-filter: saturate(180%) blur(10px);
    mask-image: linear-gradient(to bottom, transparent, rgba(0, 0, 0, .068) 3.3%, rgba(0, 0, 0, .145) 5.9%, rgba(0, 0, 0, .227) 8.1%, rgba(0, 0, 0, .313) 10.1%, rgba(0, 0, 0, .401) 12.1%, rgba(0, 0, 0, .49) 14.6%, rgba(0, 0, 0, .578) 17.7%, rgba(0, 0, 0, .661) 21.8%, rgba(0, 0, 0, .74) 27.1%, rgba(0, 0, 0, .812) 33.9%, rgba(0, 0, 0, .875) 42.4%, rgba(0, 0, 0, .927) 53%, rgba(0, 0, 0, .966) 66%, rgba(0, 0, 0, .991) 81.5%, rgba(0, 0, 0, .991) 100%);
    z-index: 0;
}

.background-video-button .btn-icon {
    width: 32px;
    height: 32px;
    fill: white;
}

.background-video-btn svg {
    width: 12px;
    height: 12px;
    fill: black;
}

.background-video-button {
    bottom: 0;
    right: 0;
    padding: 10px 30px 15px 30px;
    position: absolute;
    display: flex;
    gap: 5px;
}

.background-video-information-btn {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}

.background-video-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    gap: 5px;
    padding: 0.6vw 1vw;
    backdrop-filter: blur(20px) saturate(120%);
    background-color: var(--White);
    color: black;
    border-radius: 8px;
    font-weight: bold;
    font-size: clamp(0.8rem, 1.2vw, 0.93rem);
}

.video-player {
    overflow: hidden;
    position: absolute;
    z-index: 1000;
    inset: 0;
    height: -webkit-fill-available;
    width: 100%;
    background: black;
}

.video-player-content {
    height: 100%;
    width: 100%;
}

.video-player-content video{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
}

.video-player-titlebar {
    position: absolute;
    right: 0;
    left: 0;
    top: 0;
    width: 100%;
    height: 31px;
    -webkit-app-region: drag;
    z-index: 10000 !important;
    background: rgba(28, 28, 30, 1);
}


.video-player-header {
    position: absolute;
    top: 40px;
    left: 0;
    right: 0;
    padding: 5px 35px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.video-player-main {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.video-player-footer {
    position: absolute;
    bottom: 25px;
    left: 0;
    right: 0;
    padding: 5px 25px;
}

.video-player-main-section {
    display: flex;
    gap: 65px;
    align-items: center;

}

.video-player-header-section {
    display: flex;
    gap: 15px;
    align-items: center;
    width: 100%;
}

.video-player-header-section div {
    width: 35%;
}

.video-player-header-section .video-player-titlename {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: clamp(1rem, 1.9vw, 1.3rem);
    color: var(--Primary);
}

.video-player-header-section p {
    color: var(--Secondary);
    font-size: clamp(0.87rem, 1.7vw, 1.1rem);
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}


.video-player-header-section button {
    background: rgba(28, 28, 30, 0.65);
    backdrop-filter: blur(20px) saturate(120%);
    padding: 6px;
    border-radius: 100%;
    display: flex;
    align-items: center;
}

button:hover, a:hover {
    opacity: 0.85;
    transition: opacity 0.15s ease-in-out;
}

.volume-unified__wave-disabled {
    fill: var(--Tertiary);
}

.volume-unified__icon {
    fill: white;
}

.video-player-header-section-second input[type=range] {
    -webkit-appearance: none;
    width: 130px;
    height: 5px;
    border-radius: 10px;
    background: linear-gradient(to right, var(--Primary) 50%, var(--Tertiary) 50%);
    outline: none;
    margin: 0;
    cursor: pointer;
    appearance: none;
}

.video-player-header-section-second input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 12px;
    height: 12px;
    background: white;
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    z-index: 2;
}



.video-player-header-section-second input[type=range]::-moz-range-thumb {
    width: 12px;
    height: 12px;
    background: white;
    border-radius: 50%;
    cursor: pointer;
}

.video-player-footer input[type=range] {
    -webkit-appearance: none;
    width: 100%;
    height: 6.7px;
    border-radius: 10px;
    background: linear-gradient(to right, var(--Primary) 50%, var(--Tertiary) 50%);
    outline: none;
    margin: 0;
    cursor: pointer;
    box-sizing: content-box;
    position: relative;
}

.video-player-footer input[type=range]::-webkit-slider-thumb:hover {
    content: "";
    position: relative;
    width: 12px;
    height: 12px;
    background: white;
    border-radius: 50%;
    cursor: pointer;
}

.video-player-footer input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 12px;
    height: 12px;
    background: white;
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    z-index: 2;
}

.video-player-footer input[type=range]::-moz-range-thumb {
    width: 12px;
    height: 12px;
    background: white;
    border-radius: 50%;
    cursor: pointer;
}

.ps-row-button {
  cursor: pointer;
}

.ps-submenu {
  display: none;
  position: absolute;
  bottom: calc(85% + 15px);  
  padding: 8px;
  z-index: 10000 !important;
  right: calc(0% + 25px);;
  border-radius: 14px;
}

.ps-submenu.open {
  display: block;
}

.ps-submenu-header {
  display: flex
;
    align-items: center;
    padding: var(--space-8) var(--space-12);
    height: 26px;
    min-height: 26px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    position: relative;
    transition: background-color var(--duration-fast) var(--ease-standard);
    color: var(--color-text);
}

.ps-back {
  border: none;
  background: transparent;
  color: #cfd3dc;
  font-size: 18px;
  cursor: pointer;
  padding: 0;
}

/* пункты аудио */

.ps-audio-item {
    display: flex;
    width: 100%;
    gap: 8px;
    align-items: center;
    padding: var(--space-8) var(--space-12);
    height: 26px;
    min-height: 26px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    position: relative;
    transition: background-color var(--duration-fast) var(--ease-standard);
    color: var(--color-text);
}

.ps-audio-item:hover {
  background: rgba(255,255,255,0.06);
}

.ps-audio-item--active {
  color: var(--Blue);
}

.ps-audio-check {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid transparent;
}

.ps-audio-item--active .ps-audio-check {
  border-color: var(--Blue);
}

.video-player-container {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: clamp(0.8rem, 1.2vw, 0.93rem);
    color: var(--Secondary-onDark);
    margin: 8px 0;
}

.video-player-header-section-second {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px;
     border-radius: 20px;
     background: rgba(255, 255, 255, 0.1);
     -webkit-backdrop-filter: blur(15px) saturate(120%);
      backdrop-filter: blur(15px) saturate(120%);
     border: 1px solid rgba(255, 255, 255, 0.2);
      border-right: 1px solid rgba(255, 255, 255, 0.1);
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
}

.progress-range {
    position: relative;
    width: 100%;
    cursor: pointer;
    box-sizing: border-box;
}

.video-player-controls select {
    background: transparent;
    color: transparent;
    border: none;
    position: absolute;
    z-index: 100 !important;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
}

.video-player-controls select:focus-visible {
    outline: none !important;
}

.video-player-controls option, optgroup {
    color: var(--Primary);
    background: var(--Background);
    backdrop-filter: blur(20px) saturate(120%);
    text-align: start;
}

optgroup {
    font-size: clamp(0.85rem, 1.3vw, 0.99rem);
}

.preview-image__fake-scrub-thumb {
    top: 5px;
    position: absolute;
    left: 0;
    width: 12px;
    height: 12px;
    background-color: white;
    border-radius: 50%;
    pointer-events: none;
    display: none;
}

.preview-image {
    --progress-track-color-elapsed-active: white;
    --progress-track-max-height: 5px;
    --progress-track-height: 5px;
    --progress-thumb-height: 11px;
    --range-padding-vertical: 10px;
    --calc-half-of-thumb-height: calc(.5* var(--progress-thumb-height, 9px));
    --calc-half-of-track-height: calc(.5* var(--progress-track-height, 3px));
    --calc-bottom-position: calc(var(--range-padding-vertical) + var(--calc-half-of-track-height) - var(--calc-half-of-thumb-height));
    bottom: var(--calc-bottom-position);
    transform: translate(calc(-0.5* var(--progress-thumb-height, 9px)), 0);
    position: absolute;
    object-fit: cover;
    width: 22.6666666667;
    min-width: 200px;
    margin-bottom: 5px;
    min-height: 110px;
    display: none;
    border-radius: 10px;
}

 .preview-image::after {
     content: "";
     width: 100%;
     height: 100%;
     display: block;
     position: absolute;
     top: 0;
     left: 0;
     box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
 }

 .apm-icon {
     height: 18px;
 }

  .video-player-controls button {
     width: 50px;
     height: 35px;
     border-radius: 20px;
     background: transparent;
       transition: all 0.1s ease-in-out;
 }


 .video-player-controls button:hover {
      background: rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.25);
  backdrop-filter: blur(20px) saturate(150%);

 }

 .video-player-controls {
     display: flex;
     align-items: center;     
     padding: 3px;
     border-radius: 20px;
     background: rgba(255, 255, 255, 0.1);
     -webkit-backdrop-filter: blur(15px) saturate(120%);
      backdrop-filter: blur(15px) saturate(120%);

     gap: 3px;
     border: 1px solid rgba(255, 255, 255, 0.2);
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
 }

 .video-player-footer-time {
    color: var(--Primary-onDark);
    border-radius: 20px;
    padding: 3px 10px;
 }

 .pbtnskip {
    height: 55px;
    width: 55px;
    border-radius: 50%;
 }

 .pbtnPause {
    height: 100px;
    width: 100px;
        display: flex
;
    align-items: anchor-center;
    justify-content: center;
    border-radius: 50%;
 }

 .glass {
    background: rgba(255, 255, 255, 0.1);
     -webkit-backdrop-filter: blur(15px) saturate(120%);
      backdrop-filter: blur(15px) saturate(120%);
     gap: 3px;
     border: 1px solid rgba(255, 255, 255, 0.2);
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
 }

 .video-player-skipend {
     display: flex;
     justify-content: space-between;
     padding-bottom: 10px;
     position: absolute;
    bottom: 160px;
    padding: 5px 25px;
 }

 .video-player-skipend button {
  position: relative;
 }

 .video-player-skipend button::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0;
  background-color: rgba(0, 0, 0, 0.2); /* Цвет заливки поверх */
  border-radius: 8px;
  z-index: 1;
  animation: fillEffect 3s ease forwards;
  animation-delay: 1s; /* Задержка 3 секунды перед началом анимации */
}

@keyframes fillEffect {
  to {
    width: 100%;
  }
}

.background-video-btn > * {
  position: relative;
  z-index: 2; /* Чтобы текст и иконки были поверх заливки */
}

swiper-container {
    width: 100%;
    height: 100%;
    margin-top: 10px;
}

swiper-slide {
    width: max-content;
    text-align: center;
    font-size: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
}

swiper-slide a {
    width: min-content;
}

swiper-slide img {
    display: block;
    width: 200px;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
}

.full-image {
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.vertical-full-image {
    aspect-ratio: 9 / 13;
    object-fit: cover;
}

.content-text {
    text-align: start;
    margin-top: 5px;
}

.title-name {
    color: var(--Primary);
    font-size: clamp(0.85rem, 1.38vw, 1rem);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    letter-spacing: 0.2px;
    overflow: hidden;
}

.title-subtitle {
    color: var(--Secondary);
    font-size: clamp(0.7rem, 1.1vw, 0.85rem);
    padding: 3px 0;
}

.episodes-menu {
            position: fixed;
            bottom: -500px;
            left: 0;
            right: 0;
            padding: 25px;
            z-index: 1000 !important;
            transition: bottom 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            overflow-y: auto;
        }

        .episodes-menu.visible {
            bottom: 0;
        }

        .episodes-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 16px;
            padding-bottom: 12px;
        }
        .close-btn:hover {
            color: var(--color-primary);
        }

        .episodes-list {
            display: flex;
            gap: 12px;
            overflow-x: auto;
            overflow-y: hidden;
            padding-right: 8px;
            scroll-behavior: smooth;
            padding-bottom: 15px;
        }

        .episodes-list::-webkit-scrollbar {
            height: 7px;
        }

              .episodes-list::-webkit-scrollbar-thumb {
            background: var(--Blue);
            border-radius: 3px;
        }

        .episodes-list::-webkit-scrollbar-thumb:hover {
            background: var(--Blue-deepPressed);

        }

        .episodes-list::-webkit-scrollbar-track {
            background: transparent;
        }

        .episode-btn {
            min-width: 120px;
            width: 120px;
            aspect-ratio: 16 / 9;
            background: rgba(0, 180, 216, 0.1);
            border-radius: 8px;
            color: var(--color-text);
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            flex-shrink: 0;
        }

        .hide {
            opacity: 0 !important;
        }

        .episode-btn:hover {
            background: rgba(0, 180, 216, 0.3);
            border-color: var(--color-primary);
            transform: translateY(-2px);
        }

        .episode-btn.active {
            background: var(--color-primary);
            color: #000;
            border-color: var(--color-primary);
        }

        /* Scroll indicator */
        .scroll-indicator {
            position: fixed;
            bottom: 20px;
            opacity: 1;
            left: 50%;
            transform: translateX(-50%);
            color: white;
            padding: 8px 16px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 600;
            transition: opacity 0.3s;
            pointer-events: none;
        }
        @media (max-width: 768px) {
            .anime-title {
                font-size: 20px;
            }

            .episodes-list {
                grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
            }
        }

        .carousel-controls {
            display: flex;
            gap: 8px;
            justify-content: center;
            position: absolute;
            top: 0;
            left: 0;
            height: 240px;
            width: 100%;
            z-index: -1;
            margin-top: 24px;
            justify-content: space-between;
        }

        .carousel-btn {
            width: 25px;
            background: transparent;
            color: var(--color-primary);
            cursor: pointer;
            transition: all 0.3s;
            font-weight: 600;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .carousel-btn:hover:not(:disabled) {
            background: transparent;
        }

        .carousel-btn:disabled {
            opacity: 0.3;
            cursor: not-allowed;
            background: transparent;
        }

.title-header {
    font-size: clamp(0.65rem, 1vw, 0.75rem);
    color: var(--Secondary);
    padding: 3px 0;
    font-weight: 600;
}

.divider {
    border-bottom: 1px solid var(--labelDivider);
    width: 100%;
    margin: 10px 0;
}

.animepage-information {
    width: 100%;
    background: var(--SecondaryBackground);
    padding: 32px 0;
}

.animepage-information-container {
    display: grid;
    grid-gap: 50px;
    grid-template-columns: repeat(2, 1fr);
    padding: 0px 40px;
}

.rating {
    position: absolute;
    left: 5px;
    top: 5px;
    padding: 4px 11px;
    background: var(--SecondaryBackground-vibrant);
    backdrop-filter: saturate(120%) blur(3px);
    color: var(--Primary);
    font-size: clamp(0.7rem, 0.87vw, 0.8rem);
    border-radius: 5px;
}

.info-message {
    font-size: clamp(1rem, 1.8vw, 1.45rem);
    color: var(--Primary);
}

.current-time {
    position: absolute;
    width: 100%;
    padding: 10px 0px 0px;
    bottom: 0;
    text-align: start;
}

.current-time-content {
    padding: 0 7px 3px;
    z-index: 100;
}


.current-time-content p {
    font-size: clamp(0.96rem, 1vw, 1.04rem);
    color: var(--Secondary);
    padding-bottom: 2px;
}

.animepage-information-content ul {
    margin-top: 15px;
}

.animepage-information-content li {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 3px;
}

.animepage-title-name {
    color: var(--Primary);
    font-size: clamp(0.95rem, 1.3vw, 1.1rem);
}

.animepage-title-subtitle {
    color: var(--Secondary);
    font-size: clamp(0.9rem, 1.2vw, 1rem);
}

progress {
    width: 100%;
    height: 6px;
    display: flex;
    align-items: center;
    accent-color: rgba(255, 255, 255);
}

.rating-options {
    display: none; /* Изначально скрываем */
    position: relative;
    padding: 0.6vw 1vw;
    backdrop-filter: blur(20px) saturate(120%);
    background-color: var(--White);
    color: black;
    border-radius: 8px;
}

.rating-content {
    display: flex;
    align-items: center;
    gap: 6px;
}

.switch-button-container {
    display: flex;
    background: var(--Navbar);
    width: max-content;
    border-radius: 8px;
    padding: 5px;
}

.switch-button, .switch-button-s {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    font-size: clamp(0.83rem, 1.3vw, 1.0rem);
    color: var(--Secondary);

}

.title-text-limitation {
    width: 100%;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    font-size: clamp(0.8rem, 1.25vw, 1rem) !important;
}


.animapage-preview {
    width: 280px !important;
    height: 160px !important;
    object-fit: cover;
}

.timetable-img {
    width: 75px;
    border-radius: 6px;
    height: 100px;
    object-fit: cover;
    display: flex;
    align-items: center;
}

.profile-edit-content h2 {
    color: var(--Primary);
}

.profile-edit-content p {
    color: var(--Secondary);
    font-size: clamp(0.75rem, 1.12vw, 0.95rem);
}

.timetable-content {
    display: flex;
    align-items: center;
    gap: 10px;
}

.timetable-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr; /* Key line */
    gap: 10px;
    padding-right: 20px;
}

.timetable-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    background: var(--SecondaryBackground);
    border-radius: 8px;
    gap: 10px;
}

.timetable-time {
    padding: 10px;
    background: var(--Blue);
    color: var(--Primary);
    border-radius: 8px;
    font-size: clamp(0.8rem, 1.3vw, 1rem);
}

.animepage-search {
    background: var(--SecondaryBackground);
    width: 300px;
    height: 38px;
    border-radius: 8px;
    margin: 5px 0;
    padding-left: 30px;
    color: var(--Secondary);
}

input::placeholder {
    color: var(--Secondary);
    font-size: 14px;
}

input {
    outline: none;
    border: none;
}

.catalog-img {
    width: 120px;
    border-radius: 8px;
}

.catalog-side {
    background: var(--SecondaryBackground);
    padding: 10px !important;
    border-radius: 8px;
}

.calatog-side-second {
    flex: 0 0 33.3333333333%;
    max-width: 33.3333333333%;
    background: var(--SecondaryBackground);
    border-radius: 8px;
    padding: 10px !important;
    max-height: fit-content;
    overflow-y: auto;
    position: sticky;
    top: 10px;
}

.library-title {
    color: var(--Primary);
}

.catalog-container {
    display: flex;
    gap: 10px;
}

section-c {
    padding: 20px;
    width: 100%;
}

.catalog-item {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 10px 0;
}

.select-button {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 5px;
}

.select-button button {
    padding: 6px 8px;
    border-radius: 8px;
    background: var(--Background-hover);
    color: var(--Secondary);
}

.switch-button-active {
    background: var(--Blue) !important;
    color: var(--Primary-onDark) !important;
    border-radius: 8px;
}

.dropdown {
    position: relative;
    width: 100%;
    margin: 5px 0;
}

.selected-items {
    width: 100%;
    padding: 10px;
    background-color: var(--Background-hover);
    color: var(--Secondary);
    cursor: pointer;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    border-radius: 8px;
}


.selected-items input {
    border: none;
    background-color: transparent;
    color: white;
    flex-grow: 1;
    outline: none;
}

.selected-items button {}
.selected-items div {
    background-color: #555;
    padding: 5px 10px;
    border-radius: 12px;
    display: inline-block;
    margin-right: 5px;
    position: relative;
    font-size: clamp(0.8rem, 1vw, 1rem);
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: var(--Background-hover);
    backdrop-filter: blur(20px) saturate(120%);
    box-shadow: rgba(0, 0, 0, 0.55) 5px 10px 20px;
    width: 100%;
    z-index: 1;
    padding: 5px;
    max-height: 240px;
    overflow-y: auto;
    margin-top: 5px;
    border-radius: 8px;
}

.dropdown-content label {
    display: block;
    padding: 8px;
    cursor: pointer;
    font-size: clamp(0.9rem, 1vw, 1.2rem);
    color: var(--Secondary);
}

.dropdown-content label:hover {
    background-color: var(--labelDivider);
    border-radius: 8px;
}

.dropdown-content input[type="checkbox"] {
    margin-right: 10px;
}

.search {
    width: 100%;
    height: 38px;
    border-radius: 8px;
    padding-left: 35px;
    color: var(--Secondary);
    margin: 5px 0;
    background: var(--SecondaryBackground);
}

table {
    width: 100%;
    border-collapse: collapse; /* Collapse borders for a cleaner look */
    color: white; /* Text color */
}

th, td {
    padding: 10px;
    text-align: left; /* Align text to the left */
    color: var(--Primary);
}

thead {
    position: sticky;
    top: 0px;
    background: var(--SecondaryBackground);
    backdrop-filter: blur(20px) saturate(240%);
}

tr:nth-child(even) td {
    background: var(--SecondaryBackground);
}

.profile-menu-header-banner {
    width: 100% !important;
    position: absolute;
    height: 90px !important;
    top: 0;
    object-fit: cover !important;
    left: 0;
    right: 0;
    margin: 0 !important;
}

table img { /* Style for album covers */
    width: 60px; /* Adjust as needed */
    vertical-align: middle;  /* Align image with text */
    margin-right: 5px;
    border-radius: 8px;
    object-fit: cover;
}

.profile-menu {
    position: absolute;
    bottom: 35px;
    width: 250px;
    left: 100%;
    border-radius: 8px;
    background: var(--Background);
    border: 1px solid var(--Outline-color-primary-disabled);
    backdrop-filter: blur(20px) saturate(240%);
    box-shadow: rgba(0, 0, 0, 0.55) 5px 10px 20px;
}

.sidebar {
    position: absolute;
    inset: 0;
    z-index: 1000;
    display: none;
}

.sidebar-btn {
    display: flex;
    gap: 15px;
    align-items: center;
    padding: 7px 11px;
    color: var(--White);
    font-size: 14px;
    font-family: 'WATASHIMedium', sans-serif;
    letter-spacing: 0.6px;
    margin-top: 5px;
}

.sidebar-hover:hover {
    background-color: var(--Navbar-hover);
    border-radius: 8px;
    transition: background-color 0.15s ease-in-out;
    position: relative;
}

.sidebar-container li {
    padding: 0 7px;
}

.sidebar-container {
    height: 100%;
    display: grid;
    width: 280px;
    z-index: 10000;
    background: var(--Navbar-hover);
    backdrop-filter: blur(20px) saturate(240%);
    box-shadow: rgba(0, 0, 0, 0.55) 5px 10px 20px;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
}

.end-section {
    margin-top: auto;
}

.profile-menu-container {
    padding: 10px;
}

.profile-menu-header {
    text-align: center;
}

.profile-menu-header .profile-menu-header-user {
    width: 64px !important;
    height: 64px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    z-index: 10000 !important;
    position: relative;
}

h5 {
    color: var(--Primary);
}

.profile-view {
    padding: 10px 20px;
    border-radius: 8px;
    background: var(--Navbar);
    margin-top: 10px;
    display: inline-block;
}

.sidebar-btn:hover {
    background-color: var(--Navbar-hover);
    border-radius: 8px;
    transition: background-color 0.15s ease-in-out;
}


.profile-menu-main a {
    color: var(--Secondary);
    padding: 4px;
    width: 100%;
    display: block;
    font-size: clamp(0.9rem, 1vw, 1.2rem);
}

.profile-menu-main a:hover {
    background-color: var(--labelDivider);
    border-radius: 4px;
}

.profile-menu-main button:hover {
    background-color: var(--labelDivider);
    border-radius: 4px;
}

.profile-menu-main button{
    text-align: start;
    color: var(--Secondary);
    padding: 4px;
    width: 100%;
    display: block;
    font-size: clamp(0.9rem, 1vw, 1.2rem);
}

.search-icon {
    position: relative;
}

.search-icon svg {
    margin-left: 10px;
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
}

.profile-graph {
    height: 18px;
    width: 100%;
    display: inline-flex;
    margin: 10px 0;
}

.graph {
    display: inline-block;
    height: 18px;
}

.watching {
    background-color: var(--Indigo-vibrant_IC);
}

.list {
    background-color: var(--Indigo);
}

.onhold {
    background-color: var(--Gray);
}

.profile-graph-info {
    display: flex;
    width: 100%;
}

.profile-graph-info-container {
    max-width: 50%;
    flex: 0 0 50%;
    -webkit-box-flex: 0;
}

.profile-graph-info-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: start;
    color: var(--Primary);
    padding: 5px 0;
}

.indicator-profile-text {
    width: 33.3333333%;
    flex: 0 0 33.33333%;
}

.indicator-profile::before {
    content: '';
    border-radius: 50%;
    display: inline-block;
    vertical-align: middle;
    width: 1rem;
    height: 1rem;
    margin-right: 8px;
    background: var(--Indigo);
}

.indicator-profile2::before {
    content: '';
    border-radius: 50%;
    display: inline-block;
    vertical-align: middle;
    width: 1rem;
    height: 1rem;
    margin-right: 8px;
    background: var(--Indigo-vibrant_IC);
}

.indicator-profile3::before {
    content: '';
    border-radius: 50%;
    display: inline-block;
    vertical-align: middle;
    width: 1rem;
    height: 1rem;
    margin-right: 8px;
    background: var(--Gray);
}

.profile-graph-info-content a {
    color: var(--Secondary);
}

.footerbar {
    margin-top: 7px;
    margin-left: 52px;
    border-radius: 15px;
    height: 11vh;
    background: var(--Background);
    z-index: 100 !important;
    border: 1px solid var(--Outline-color-primary-disabled);
}

.footer-side-poster {
    height: 100%;
    width: 50px;
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
    object-fit: cover;
}

.footer-side-controls {
    height: 70%;
    align-items: center;
    display: flex;
    width: max-content;
    padding-right: 20px;
    gap: 5px;
    border-radius: 6px;
}

.footer-logo {
    width: 30px;
    height: 30px;
    border-radius: 7px;
}

.footer-text {
    overflow: hidden;
}

.footer-side {
    display: flex;
    gap: 10px;
    align-items: center;
    height: 100%;
}

.footer-button {
    background: var(--Blue);
    color: var(--Primary-onDark);
    padding: 9px 17px;
    font-weight: bold;
    text-transform: uppercase;
    border-radius: 7px;
}

.footer-content {
    display: flex;
    align-items: center;
    height: 100%;
    gap: 30px;
    justify-content: space-between;
    padding: 0 20px 0 20px;
}

.heatmap-container {
    display: grid;
    grid-template-columns: repeat(7, 30px);
    gap: 2px;
    margin-top: 10px;
}
.day-label {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(0.85rem, 1.2vw, 1rem);
    color: var(--Primary);}
.day-cell {
    cursor: pointer;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--Primary);
    border-radius: 4px;
    font-size: 0;
}
.legend {
    display: flex;
    gap: 10px;
    margin-top: 15px;
    color: var(--Primary);
    font-size: clamp(0.85rem, 1.2vw, 1rem);
}
.legend div {
    width: 15px;
    height: 15px;
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
}
.low { background-color: var(--Gray); }
.medium { background-color: var(--Indigo-vibrant_IC); }
.high { background-color: var(--Indigo); }
.very-high { background-color: var(--Purple); }

.profile-tooltip {
    display: none;
    position: absolute;
    background-color: white;
    color: black;
    padding: 5px;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    font-size: 12px;
    z-index: 1;
}

.profile-edit {
    position: absolute;
    inset: 0;
    backdrop-filter: brightness(30%);
    height: -webkit-fill-available;
    width: 100%;
    z-index: 1000 !important;
}

.profile-edit-container {
    width: 480px;
    background: var(--Navbar);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: fit-content;
    border-radius: 10px;
    margin-bottom: -20px;
}

.profile-edit-content {
    padding: 30px 20px;
    height: fit-content;
}

.profile-edit-form {
    display: flex;
    position: absolute;
    left: 12px;
    bottom: -32px;
    gap: 20px;
}

.img-profile-edit img{
    width: 96px;
    height: 96px;
    border-radius: 50%;
    object-fit: cover;
    border: 5px solid var(--Navbar);
}


.img-profile-edit img:hover {
    backdrop-filter: brightness(20%);
}

.profile-hover-avatar {
    position: absolute;
    top: 135px;
    left: 70px;
}

.change-avatar {
    color: transparent;
    position: absolute;
    border-radius: 50%;
    inset: 0;
    margin-top: 0.5px;
}

.change-avatar:hover {
    backdrop-filter: brightness(60%);
}

.change-banner:hover {
    backdrop-filter: brightness(60%);

}

.change-banner:hover ~ .overlay-text,
.change-avatar:hover ~ .overlay-text {
    opacity: 1;
}

.overlay-text {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    fill: #ffff;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 17px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.1s;
}

.main-edit-form {
    width: 100%;
}

::-webkit-file-upload-button {
    color: transparent;
    outline: none;
    border: none;
    background: transparent;
}

.profile-edit-input {
    width: 100%;
    margin-top: 5px;
    margin-bottom: 20px;
    border-radius: 5px;
    border-bottom: 2px solid var(--White);
    padding: 6px;
    background: var(--SecondaryBackground);
    border-top: 0.5px solid transparent;
    border-left: 0.5px solid transparent;
    border-right: 0.5px solid transparent;
    color: var(--Primary);
    font-size: clamp(0.95rem, 1.1vw, 1.2rem);
}

.profile-edit-input:focus-within {
    border-bottom: 2px solid var(--Blue);
    background: var(--Navbar-hover);
    border-top: 0.5px solid var(--Tertiary);
    border-left: 0.5px solid var(--Tertiary);
    border-right: 0.5px solid var(--Tertiary);
}

.profile-edit-1 {
    width: 33.333333333333333%;
    flex: 0 0 33.33333333333%;
}

.profile-edit-2 {
    width: 66.6666666666666%;
    flex: 0 0 66.6666666666;
}

.profile-close {
    position: absolute;
    right: 0;
    top: 0;
    margin: 1em;
    aspect-ratio: 1/1;
    background: var(--Background-hover);
    border-radius: 50%;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.profile-close svg {
    aspect-ratio: 1/1;
    fill: var(--Primary);
}

.change-banner {
    color: transparent;
    height: 130px;
    width: 100%;
    position: absolute;
    left: 0;
    border-radius: 8px;
}

.main-edit-form img {
    width: 100%;
    height: 130px;
    object-fit: cover;
    border-radius: 8px;
    position: relative;
}

.profile-edit-button {
    width: 100%;
    height: 70px;
    background: var(--SecondaryBackground);
    border-radius: 0 0 8px 8px;
}

.profile-edit-button-content {
    display: flex;
    width: 100%;
    padding: 10px 20px;
    gap: 10px;
    align-items: center;
    height: 100%;
}

.notification-content-footer button {
    width: 80%;
    height: 30px;
    border-radius: 7px;
    background: var(--Blue);
    color: var(--Primary);
    border: 1px solid var(--labelDivider);
    font-size: clamp(0.9rem, 1vw, 1rem);
}

.profile-edit-button-content button:last-child {
    background: var(--Navbar);
    color: var(--Primary);
}

button:disabled {
    background: var(--Blue-disabled);
    color: var(--Tertiary);
    cursor: not-allowed;
}

.notification-on--active::after {
    content: "";
    position: absolute;
    top: 5px;
    right: 9px;
    width: 8px;
    height: 8px;
    background-color: var(--Red);
    border-radius: 50%;
}

.notification-content-header ul {
    display: flex;
    align-items: center;
    gap: 20px;
}

.notification-content-header li {
    display: flex;
    align-items: center;
    gap: 20px;
}

.notification-content-header li button {
    color: var(--Secondary);
    padding: 10px 0 10px 0px;
    border-bottom: 1px solid var(--Blue);
    font-weight: bold;
}

.notification-content-header li button:active {
    color: var(--Primary);
    padding: 10px 0 10px 0px;
    border-bottom: 1px solid var(--Blue);
    font-weight: bold;
}

.notification-container {
    display: none;
    position: absolute;
    bottom: 35px;
    left: 100%;
    border-radius: 8px;
    max-width: 400px;
    width: 330px;
    overflow-y: auto;
    background: var(--Background);
    backdrop-filter: blur(20px) saturate(240%);
    box-shadow: rgba(9, 9, 9, 0.55) 10px 10px 20px;
    z-index: 200;
}

.notif-list {
    padding: 0 24px;
}
.notif-item {
    display: flex;
    align-items: flex-start;
    background: var(--Background1);
    border-radius: 12px;
    margin-bottom: 12px;
    box-shadow: 0 1px 4px rgba(0,0,0,.03);
    padding: 14px 16px;
    position: relative;
}
.notif-item:not(:last-child) { margin-bottom: 12px; }

.notif-content {
    flex: 1;
    font-size: 15px;
}
.notif-title {
    font-weight: 600;
    margin-bottom: 2px;
    font-size: 16px;
    color: var(--Primary);
}
.notif-details {
    color: var(--Secondary);
    font-size: 14px;
    margin-top: 4px;
}

.notif-icon {
    margin-right: 16px;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    position: relative;
    border-radius: 50%;
    background: var(--Background-hover);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
}

.notif-time {
    color: var(--Tertiary);
    font-size: 12px;
}

.notif-icon img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
}

.notify-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 500;
    padding: 20px 24px 12px 24px;
    font-size: 20px;
    color: var(--Primary);
}

.notify-header .mark-read {
    text-decoration: none;
    color: var(--Blue);
    font-size: 15px;
    font-weight: 400;
    transition: color 0.2s;
}

.notification-content-header {
    font-weight: bold;
    background: var(--Background);
    color: white;
    padding: 10px;
    border-bottom: 1px solid #333;
}

.notification-content-main {
    max-height: 240px;
    overflow-y: auto;
    width: 100%;
}

.notification-push {
    margin: 0 !important;
    padding: 4px 8px;
    border-radius: 8px;
    transition: background 0.2s, transform 0.2s;
    justify-content: start !important;
}

.notification-push:hover {
    background: var(--labelDivider);
    transform: scale(1.02);
}

.notification-push .notification-push-content {
    display: flex;
    align-items: center;
    gap: 10px;
}

.notification-push img {
    height: 80px !important;
    width: 50px !important;
    border-radius: 10px !important;
    margin: 0 !important;

}

.icon-path {
    fill: var(--Orange-vibrant_IC) !important;
}

.notification-title {
    font-size: clamp(0.9rem, 1vw, 1rem);
    color: var(--Primary)
}

.notification-subtitle {
    font-size: clamp(0.8rem, 0.9vw, 0.95rem);
    color: var(--Secondary);
    margin: 2px 0;
}

.notification-content-footer {
    width: 100%;
    height: 40px;
    background: var(--Background);
    border-radius: 0 0 8px 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}


.profile-edit-button-content button {
    width: 100%;
    height: 34px;
    border-radius: 5px;
    border: 1px solid var(--labelDivider);
    background: var(--Blue);
    color: var(--Primary);
    font-weight: bold;
}

.premium {
    position: absolute;
    inset: 0;
    backdrop-filter: brightness(30%);
    top: 31px;
    left: 51px;
    display: none;
    height: -webkit-fill-available;
    z-index: 100;
    border-top-left-radius: 15px;;
}

.premium-container {
    width: 470px;
    background: var(--Navbar);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 10px;
    background: linear-gradient(90deg, #9e2277 0%, var(--Pink) 100%);
    padding: 30px;
    overflow: hidden;
}

.premium-container img {
    width: 220px;
    object-fit: cover;
}

.premium-price {
    color: var(--Primary-onDark);
    margin-top: 10px;
}
.premium-content {
    color: var(--White);
    margin-top: 20px;
    font-size: 17px;
}

.premium-content ul {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.premium-header img {
    width: 100%;
    height: 125px;
    object-fit: cover;
    border-radius: 10px;
    position: relative;
}

.premium-header {
    position: relative;
}

.premium-sale {
    height: 25px;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    width: 183px;
    position: absolute;
    z-index: 1;
    left: -30px;
    top: -30px;
    background: linear-gradient(230.31deg, #FF5733, #FFC300);
    font-weight: 900;
    font-size: 9px;
    line-height: 11px;
    text-transform: uppercase;
    color: rgb(55, 46, 41);
    transform: rotate(-45deg) translateX(-30%);
}

.premium-header-text {
    position: absolute !important;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--Primary);
    width: 75% !important;
    object-fit: contain !important;
}

.premium-footer {
    width: 100%;
    height: 62px;
    padding: 10px 15px;
    background: var(--Background);
    border-radius: 0 0 8px 8px;
    position: fixed;
    bottom: 0;
    left: 0;
    display: flex;
    gap: 10px;
    right: 0;
}

.premium-footer button {
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, #E69A28, #A0522D);
    transition: background 0.1s ease;
    font-size: clamp(0.95rem, 1.1vw, 1rem);
    color: var(--Primary);
    font-weight: 500;
    border-radius: 8px;
}

.premium-gift {
    background: #A0522D !important;
}

.premium-main {
    height: 500px;
    max-height: 300px;
    overflow-y: scroll;
    width: 100%;
}

.premium-main-content img{
    width: 200px;
}

.premium-main-content {
    display: flex;
    align-items: center;
    width: 100%;
    height: 125px;
}

.premium-list-svg {
    border-radius: 8px;
    align-items: center;
    width: fit-content;
    justify-content: center;
    margin: 0 auto;
}

.premium-icon {
}


.premium-title {
    color: var(--Primary);
    font-weight: bold;
}

.premium-subtitle {
    color: var(--Secondary);
    font-size: clamp(0.8rem, 1vw, 0.9rem);
}

.search-clear {
    align-items: center;
    text-align: center;
    justify-content: space-between;
}

.search-clear button {
    color: var(--Blue);
}

.seek-bar {
    -webkit-appearance: none;
    width: 100%;
    height: 6px;
    border-radius: 10px;
    background: linear-gradient(to right, var(--Primary) 50%, var(--Tertiary) 50%);
    outline: none;
    margin: 0;
    cursor: pointer;
    box-sizing: content-box;
    position: relative;
}

.footer-controls-buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-bottom: 5px;
}

.footer-icon-btn svg {
    width: 20px;
    height: 20px;
    fill: var(--Primary);
}

.seek-bar::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 0;
    height: 0;
    position: relative;
    z-index: 2;
}

.seek-bar::-moz-range-thumb {
    width: 0;
    height: 0;
    cursor: pointer;
}

.footer-progress-bar {
    display: flex;
    align-items: center;
    gap: 10px;
}

.footer-progress-bar span {
    color: var(--Secondary);
    font-size: clamp(0.7rem, 1.1vw, 0.85rem);
}

   :root {
  /* Primitive Color Tokens */
  --color-white: rgba(255, 255, 255, 1);
  --color-black: rgba(0, 0, 0, 1);
  --color-cream-50: rgba(252, 252, 249, 1);
  --color-cream-100: rgba(255, 255, 253, 1);
  --color-gray-200: rgba(245, 245, 245, 1);
  --color-gray-300: rgba(167, 169, 169, 1);
  --color-gray-400: rgba(119, 124, 124, 1);
  --color-slate-500: rgba(98, 108, 113, 1);
  --color-brown-600: rgba(94, 82, 64, 1);
  --color-charcoal-700: rgba(31, 33, 33, 1);
  --color-charcoal-800: rgba(38, 40, 40, 1);
  --color-slate-900: rgba(19, 52, 59, 1);
  --color-teal-300: rgba(50, 184, 198, 1);
  --color-teal-400: rgba(45, 166, 178, 1);
  --color-teal-500: rgba(33, 128, 141, 1);
  --color-teal-600: rgba(29, 116, 128, 1);
  --color-teal-700: rgba(26, 104, 115, 1);
  --color-teal-800: rgba(41, 150, 161, 1);
  --color-red-400: rgba(255, 84, 89, 1);
  --color-red-500: rgba(192, 21, 47, 1);
  --color-orange-400: rgba(230, 129, 97, 1);
  --color-orange-500: rgba(168, 75, 47, 1);

  /* RGB versions for opacity control */
  --color-brown-600-rgb: 94, 82, 64;
  --color-teal-500-rgb: 33, 128, 141;
  --color-slate-900-rgb: 19, 52, 59;
  --color-slate-500-rgb: 98, 108, 113;
  --color-red-500-rgb: 192, 21, 47;
  --color-red-400-rgb: 255, 84, 89;
  --color-orange-500-rgb: 168, 75, 47;
  --color-orange-400-rgb: 230, 129, 97;

  /* Background color tokens (Light Mode) */
  --color-bg-1: rgba(59, 130, 246, 0.08);
  --color-bg-2: rgba(245, 158, 11, 0.08);
  --color-bg-3: rgba(34, 197, 94, 0.08);
  --color-bg-4: rgba(239, 68, 68, 0.08);
  --color-bg-5: rgba(147, 51, 234, 0.08);
  --color-bg-6: rgba(249, 115, 22, 0.08);
  --color-bg-7: rgba(236, 72, 153, 0.08);
  --color-bg-8: rgba(6, 182, 212, 0.08);

  /* Semantic Color Tokens (Light Mode) */
  --color-background: var(--color-cream-50);
  --color-surface: var(--color-cream-100);
  --color-text: var(--color-slate-900);
  --color-text-secondary: var(--color-slate-500);
  --color-primary: var(--color-teal-500);
  --color-primary-hover: var(--color-teal-600);
  --color-primary-active: var(--color-teal-700);
  --color-secondary: rgba(var(--color-brown-600-rgb), 0.12);
  --color-secondary-hover: rgba(var(--color-brown-600-rgb), 0.2);
  --color-secondary-active: rgba(var(--color-brown-600-rgb), 0.25);
  --color-border: rgba(var(--color-brown-600-rgb), 0.2);
  --color-btn-primary-text: var(--color-cream-50);
  --color-card-border: rgba(var(--color-brown-600-rgb), 0.12);
  --color-card-border-inner: rgba(var(--color-brown-600-rgb), 0.12);
  --color-error: var(--color-red-500);
  --color-success: var(--color-teal-500);
  --color-warning: var(--color-orange-500);
  --color-info: var(--color-slate-500);
  --color-focus-ring: rgba(var(--color-teal-500-rgb), 0.4);
  --color-select-caret: rgba(var(--color-slate-900-rgb), 0.8);

  /* Common style patterns */
  --focus-ring: 0 0 0 3px var(--color-focus-ring);
  --focus-outline: 2px solid var(--color-primary);
  --status-bg-opacity: 0.15;
  --status-border-opacity: 0.25;

  /* RGB versions for opacity control */
  --color-success-rgb: 33, 128, 141;
  --color-error-rgb: 192, 21, 47;
  --color-warning-rgb: 168, 75, 47;
  --color-info-rgb: 98, 108, 113;

  /* Typography */
  --font-family-base: "FKGroteskNeue", "Geist", "Inter", -apple-system,
    BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-family-mono: "Berkeley Mono", ui-monospace, SFMono-Regular, Menlo,
    Monaco, Consolas, monospace;
  --font-size-xs: 11px;
  --font-size-sm: 12px;
  --font-size-base: 14px;
  --font-size-md: 14px;
  --font-size-lg: 16px;
  --font-size-xl: 18px;
  --font-size-2xl: 20px;
  --font-size-3xl: 24px;
  --font-size-4xl: 30px;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 550;
  --font-weight-bold: 600;
  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --letter-spacing-tight: -0.01em;

  /* Spacing */
  --space-0: 0;
  --space-1: 1px;
  --space-2: 2px;
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;

  /* Border Radius */
  --radius-sm: 6px;
  --radius-base: 8px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.02);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.04),
    0 2px 4px -1px rgba(0, 0, 0, 0.02);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.04),
    0 4px 6px -2px rgba(0, 0, 0, 0.02);
  --shadow-inset-sm: inset 0 1px 0 rgba(255, 255, 255, 0.15),
    inset 0 -1px 0 rgba(0, 0, 0, 0.03);

  /* Animation */
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --ease-standard: cubic-bezier(0.16, 1, 0.3, 1);

  /* Layout */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;

  /* RGB versions for opacity control (Dark Mode) */
  --color-gray-400-rgb: 119, 124, 124;
  --color-teal-300-rgb: 50, 184, 198;
  --color-gray-300-rgb: 167, 169, 169;
  --color-gray-200-rgb: 245, 245, 245;

  /* Background color tokens (Dark Mode) */
  --color-bg-1: rgba(29, 78, 216, 0.15);
  --color-bg-2: rgba(180, 83, 9, 0.15);
  --color-bg-3: rgba(21, 128, 61, 0.15);
  --color-bg-4: rgba(185, 28, 28, 0.15);
  --color-bg-5: rgba(107, 33, 168, 0.15);
  --color-bg-6: rgba(194, 65, 12, 0.15);
  --color-bg-7: rgba(190, 24, 93, 0.15);
  --color-bg-8: rgba(8, 145, 178, 0.15);

  /* Semantic Color Tokens (Dark Mode) */
  --color-background: var(--color-charcoal-700);
  --color-surface: var(--color-charcoal-800);
  --color-text: var(--color-gray-200);
  --color-text-secondary: rgba(var(--color-gray-300-rgb), 0.7);
  --color-primary: var(--color-teal-300);
  --color-primary-hover: var(--color-teal-400);
  --color-primary-active: var(--color-teal-800);
  --color-secondary: rgba(var(--color-gray-400-rgb), 0.15);
  --color-secondary-hover: rgba(var(--color-gray-400-rgb), 0.25);
  --color-secondary-active: rgba(var(--color-gray-400-rgb), 0.3);
  --color-border: rgba(var(--color-gray-400-rgb), 0.3);
  --color-error: var(--color-red-400);
  --color-success: var(--color-teal-300);
  --color-warning: var(--color-orange-400);
  --color-info: var(--color-gray-300);
  --color-focus-ring: rgba(var(--color-teal-300-rgb), 0.4);
  --color-btn-primary-text: var(--color-slate-900);
  --color-card-border: rgba(var(--color-gray-400-rgb), 0.2);
  --color-card-border-inner: rgba(var(--color-gray-400-rgb), 0.15);
  --shadow-inset-sm: inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -1px 0 rgba(0, 0, 0, 0.15);
  --button-border-secondary: rgba(var(--color-gray-400-rgb), 0.2);
  --color-border-secondary: rgba(var(--color-gray-400-rgb), 0.2);
  --color-select-caret: rgba(var(--color-gray-200-rgb), 0.8);

  /* RGB versions for dark mode */
  --color-success-rgb: var(--color-teal-300-rgb);
  --color-error-rgb: var(--color-red-400-rgb);
  --color-warning-rgb: var(--color-orange-400-rgb);
  --color-info-rgb: var(--color-gray-300-rgb);
}

.settings-button svg {
  width: 24px;
  height: 24px;
  fill: var(--color-text);
}

/* Overlay */
/* Overlay */
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-normal) var(--ease-standard);
  z-index: 999;
}

.overlay.active {
  opacity: 1;
  pointer-events: all;
}

.skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
}

@keyframes skeleton-loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Контейнер swiper */
.mySwiperAnime.skeleton .swiper-container-content {
    pointer-events: none;
    opacity: 0.7;
}

/* Скелетон постера */
.skeleton-poster {
    width: 100%;
    height: 150px; /* или ваша высота постера */
    border-radius: 8px;
    background: #e0e0e0;
    position: relative;
    overflow: hidden;
}

.skeleton-poster::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
    0% { left: -100%; }
    100% { left: 100%; }
}

/* Скелетон рейтинга */
.skeleton-rating {
    width: 40px;
    height: 20px;
    border-radius: 4px;
    top: 8px;
    right: 8px;
}

/* Скелетон заголовка */
.skeleton-title {
    width: 80%;
    height: 20px;
    border-radius: 4px;
    margin-bottom: 8px;
}

/* Скелетон подзаголовка */
.skeleton-subtitle {
    width: 60%;
    height: 16px;
    border-radius: 3px;
}

/* Убираем скелетон при загрузке данных */
.mySwiperAnime:not(.skeleton) .skeleton,
.mySwiperAnime.loaded .skeleton {
    display: none !important;
}

.menu-container {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  position: absolute;
  bottom: calc(85% + 15px);
  right: 60px;
  transform: translateY(20px);
  opacity: 0;
  pointer-events: none;
  transition: all var(--duration-normal) var(--ease-standard);
  z-index: 1001;
}

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

.video-player-header-section .tip {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.menu-wrapper {
  position: relative;
  overflow: hidden;
  transition: height 0.3s var(--ease-standard);
}

.menu-panel {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  transition: transform 0.3s var(--ease-standard);
  padding: var(--space-8);
}

.menu-panel.main {
  position: relative;
  transform: translateX(0);
}

.menu-panel.main.slide-left {
  transform: translateX(-100%);
}

.menu-panel.submenu {
  transform: translateX(100%);
}

.menu-panel.submenu.active {
  transform: translateX(0);
}

.fz-70 {
  font-size: clamp(0.65rem, 1.01vw, 0.8rem);
}

.fz-75 {
  font-size: clamp(0.7rem, 1.1vw, 0.85rem);
}

.ff-body {
  font-family: var(--font-family-base);
}

.text-grey {
  color: var(--color-text-secondary);
}

.text-grey-darken-1 {
  color: rgba(var(--color-gray-300-rgb), 0.6);
}

.text-unselect {
  user-select: none;
}

.v-list-item {
  display: flex;
  align-items: center;
  padding: var(--space-8) var(--space-12);
  height: 26px;
  min-height: 26px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  position: relative;
  transition: background-color var(--duration-fast) var(--ease-standard);
  color: var(--color-text);
}

.v-list-item:hover {
  background-color: var(--color-secondary);
}

.v-list-item__content {
  display: flex;
  align-items: center;
  width: 100%;
  position: relative;
  z-index: 900;
  overflow: hidden;
}

.v-list-item-title {
  flex: 0 0 auto;
}

.v-spacer {
  flex: 1 1 auto;
}

.v-list-item-subtitle {
  margin-left: var(--space-24);
}

.v-divider {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: var(--space-8) 0;
}

.my-2 {
  margin-top: var(--space-8);
  margin-bottom: var(--space-8);
}

.v-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  height: 20px;
  width: 12px;
  min-width: 12px;
  color: var(--color-text);
}

.mr-2 {
  margin-right: var(--space-8);
}

.ml-6 {
  margin-left: var(--space-24);
}

.v-icon svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

.pt-4 {
  padding-top: var(--space-16);
}

.pb-1 {
  padding-bottom: var(--space-4);
}

.px-2 {
  padding-left: var(--space-8);
  padding-right: var(--space-8);
}

.v-switch {
  display: inline-flex;
  align-items: center;
  margin-left: var(--space-24);
}

.v-selection-control__wrapper {
  position: relative;
  width: 38px;
  height: 20px;
}

.v-switch__track {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: var(--color-secondary);
  border-radius: var(--radius-full);
  transition: background-color var(--duration-fast) var(--ease-standard);
}

.v-switch input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  z-index: 1;
  margin: 0;
}

.v-switch__thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background-color: var(--color-white);
  border-radius: var(--radius-full);
  transition: transform var(--duration-fast) var(--ease-standard);
  pointer-events: none;
}

.v-switch input:checked ~ .v-switch__thumb {
  transform: translateX(18px);
}

.v-switch input:checked ~ .v-switch__track {
  background-color: var(--Blue);
}

.v-selection-control__input {
  position: relative;
  width: 100%;
  height: 100%;
}

.submenu-item {
  padding: var(--space-8) var(--space-12);
}

.submenu-item.selected {
  background-color: var(--color-secondary-hover);
  color: var(--Blue);
}

.back-icon {
  width: 16px;
  min-width: 16px;
}

@keyframes skeleton-loading {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

/* Базовый класс скелетона */
.skeleton {
background: linear-gradient(90deg, 
                rgba(190, 190, 190, 0.2) 25%, 
                rgba(129, 129, 129, 0.24) 37%, 
                rgba(190, 190, 190, 0.2) 63%
            );
            background-size: 400% 100%;
            animation: skeleton-loading 1.4s ease infinite;
            border-radius: 4px;
    
    color: transparent !important;
    pointer-events: none; 
}

div.skeleton, p.skeleton {
    background-color: rgba(0,0,0,0.3); /* Подложка */
}

#videoIndexDesc.skeleton {
    min-height: 85px;
    width: 110%;
    margin-top: 3px;
}

#videoIndexText.skeleton {
    min-height: 20px;
    width: 60%;
    margin: 8px 0;
    display: inline-block;
}