/* === СТИЛИ ДЛЯ ЗАГРУЗЧИКА === */
    #loader-wrapper {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #0b0b0b;
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 99999;
        transition: opacity 0.8s ease-out;
    }

    #loader-wrapper.hidden {
        opacity: 0;
        pointer-events: none;
    }

    #loader-container {
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
    }

    #loading-text {
        color: white;
        font-family: 'Rubik', sans-serif;
        font-size: 1em;
        position: absolute;
        width: 250px;
        text-align: center;
    }
    
    .loader-ring {
        width: 190px;
        height: 190px;
        border: 1px solid transparent;
        border-radius: 50%;
        position: absolute;
    }

    .loader-ring:nth-child(1) {
        border-bottom: 8px solid rgb(255, 141, 249);
        animation: rotate1 2s linear infinite;
    }

    @keyframes rotate1 {
        from { transform: rotateX(50deg) rotateZ(110deg); }
        to { transform: rotateX(50deg) rotateZ(470deg); }
    }

    .loader-ring:nth-child(2) {
        border-bottom: 8px solid rgb(255,65,106);
        animation: rotate2 2s linear infinite;
    }

    @keyframes rotate2 {
        from { transform: rotateX(20deg) rotateY(50deg) rotateZ(20deg); }
        to { transform: rotateX(20deg) rotateY(50deg) rotateZ(380deg); }
    }

    .loader-ring:nth-child(3) {
        border-bottom: 8px solid rgb(0,255,255);
        animation: rotate3 2s linear infinite;
    }

    @keyframes rotate3 {
        from { transform: rotateX(40deg) rotateY(130deg) rotateZ(450deg); }
        to { transform: rotateX(40deg) rotateY(130deg) rotateZ(90deg); }
    }

    .loader-ring:nth-child(4) {
        border-bottom: 8px solid rgb(252, 183, 55);
        animation: rotate4 2s linear infinite;
    }

    @keyframes rotate4 {
        from { transform: rotateX(70deg) rotateZ(270deg); }
        to { transform: rotateX(70deg) rotateZ(630deg); }
    }
    
    /* === НОВЫЕ СТИЛИ ДЛЯ ИКОНОК В HEADER === */
    .header-content .nav-icons {
        display: flex;
        align-items: center;
        gap: 12px; /* Расстояние между иконками */
    }

    .header-content .nav-icon {
        position: relative;
        background-color: rgb(134 134 134 / 32%); /* Полупрозрачный фон */
        border-radius: 50%; /* Делает иконки круглыми */
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: background-color 0.2s ease;
    }
    
    .header-content .nav-icon svg {
        width: 22px;
        height: 22px;
        stroke: white; /* Цвет иконки */
        fill: none;
    }

    .header-content .nav-icon.search svg circle,
    .header-content .nav-icon.search svg path {
        stroke: white;
        stroke-width: 2;
    }

    .header-content .nav-icon.notification svg path {
        stroke: white;
        stroke-width: 1.5;
    }

    /* Стили для иконки профиля */
    .header-content .nav-icon.profile {
        width: 48px;  /* Чуть больше остальных */
        height: 48px; /* Чуть больше остальных */
        background: none; /* Убираем фон, так как будет картинка */
        padding: 0;
        border: 1.5px solid rgba(255, 255, 255, 0.3); /* Небольшая обводка */
    }

    .header-content .nav-icon.profile .profile-avatar-img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        object-fit: cover; /* Изображение полностью заполняет круг */
    }
    
    /* Бейдж с уведомлением на иконке профиля */
    .header-content .nav-icon.profile .profile-notification-badge {
        position: absolute;
        bottom: -2px;
        right: -2px;
        background-color: #ffffff;
        color: #000000;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        font-weight: 700;
        border: 2px solid #0e0e0e; /* Обводка для отделения от фона */
    }

    /* === ОПТИМИЗАЦИЯ ДЛЯ ТЕЛЕФОНОВ === */
    @media (max-width: 768px) {
        .header-content .nav-icons {
            gap: 8px; /* Уменьшаем расстояние */
        }
        .header-content .nav-icon {
            width: 38px;
            height: 38px;
        }
        .header-content .nav-icon svg {
            width: 20px;
            height: 20px;
        }
        .header-content .nav-icon.profile {
            width: 44px; /* Пропорционально уменьшаем аватар */
            height: 44px;
        }
        .header-content .nav-icon.profile .profile-notification-badge {
            width: 18px;
            height: 18px;
            font-size: 11px;
            bottom: -1px;
            right: -1px;
        }
    }
    
    /*
    ============================================
    == НОВЫЕ СТИЛИ ДЛЯ ПОИСКА (КАК НА ФОТО)
    ============================================
    */
    body.search-active {
        overflow: hidden;
    }

    #search-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(10, 10, 10, 0.7);
        backdrop-filter: blur(12px) saturate(150%);
        -webkit-backdrop-filter: blur(12px) saturate(150%);
        z-index: 9999;
        display: flex;
        justify-content: center;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1);
        padding: 20px;
    }

    #search-overlay.visible {
        opacity: 1;
        pointer-events: all;
    }

    #search-container {
        width: 100%;
        max-width: 680px;
        margin-top: 12vh;
        transform: scale(0.95) translateY(-10px);
        opacity: 0;
        transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    #search-overlay.visible #search-container {
        transform: scale(1) translateY(0);
        opacity: 1;
    }

    #search-input-wrapper {
        position: relative;
        display: flex;
        align-items: center;
        background-color: #2c2c2e;
        border-radius: 12px;
        border: 1px solid transparent;
        transition: border-color 0.2s, box-shadow 0.2s;
        box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    }

    #search-input-wrapper:focus-within {
        border-color: #4a4a4e;
        box-shadow: 0 0 0 4px rgba(90, 90, 94, 0.4);
    }

    #search-input {
        width: 100%;
        height: 56px;
        padding: 0 50px 0 55px;
        border: none;
        background-color: transparent;
        color: #f2f2f2;
        font-size: 17px;
        font-weight: 500;
        outline: none;
        font-family: 'Rubik', sans-serif;
    }

    #search-input::placeholder {
        color: #8e8e93;
    }

    #search-input-wrapper .search-icon,
    #search-input-wrapper #search-close-btn {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        color: #8e8e93;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #search-input-wrapper .search-icon {
        left: 20px;
        width: 22px;
        height: 22px;
    }

    #search-input-wrapper #search-close-btn {
        right: 12px;
        background: none;
        border: none;
        cursor: pointer;
        padding: 6px;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        transition: background-color 0.2s, color 0.2s;
    }
    
    #search-input-wrapper #search-close-btn:hover {
        background-color: #3a3a3c;
        color: #fff;
    }

    #search-close-btn svg {
        width: 18px;
        height: 18px;
    }

    #search-results-info {
        padding: 16px 8px 4px 8px;
        color: #b1b1b3;
        font-size: 14px;
        font-weight: 500;
        opacity: 0;
        transition: opacity 0.2s;
    }
    
    #search-results-info.visible {
        opacity: 1;
    }

    #search-results {
        margin-top: 4px;
        max-height: calc(75vh - 100px);
        overflow-y: auto;
        padding-right: 8px;
    }
    
    #search-results::-webkit-scrollbar { width: 6px; }
    #search-results::-webkit-scrollbar-track { background: transparent; }
    #search-results::-webkit-scrollbar-thumb { background: #48484a; border-radius: 3px; }
    #search-results::-webkit-scrollbar-thumb:hover { background: #5c5c5e; }

    .search-result-item {
        display: flex;
        align-items: center;
        padding: 8px;
        border-radius: 10px;
        margin-bottom: 8px;
        background-color: rgba(44, 44, 46, 0.7);
        text-decoration: none;
        transition: background-color 0.2s ease-in-out, transform 0.2s ease-in-out;
    }

    .search-result-item:hover {
        background-color: #3a3a3c;
        transform: scale(1.01);
    }

    .search-result-poster {
        width: 48px;
        height: 68px;
        border-radius: 6px;
        object-fit: cover;
        margin-right: 16px;
        flex-shrink: 0;
        background-color: #3a3a3c;
    }

    .search-result-info {
        display: flex;
        flex-direction: column;
        color: #f2f2f2;
        overflow: hidden;
        gap: 6px;
    }

    .search-result-title {
        font-size: 16px;
        font-weight: 600;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .search-result-meta {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 13px;
        color: #f2f2f2;
        font-weight: 500;
    }
    
    .meta-tag {
        display: flex;
        align-items: center;
        gap: 4px;
        padding: 3px 8px;
        border-radius: 50px;
    }
    .meta-tag.rating {
        background-color: #30D158;
        color: #000;
        font-weight: 600;
    }
    .meta-tag.episodes, .meta-tag.year {
        background-color: #48484a;
    }

    .meta-tag .star-icon {
        width: 14px;
        height: 14px;
        fill: #000;
    }

    @media (max-width: 768px) {
        #search-container { margin-top: 5vh; }
        #search-input { height: 50px; font-size: 16px; }
        .search-result-title { font-size: 15px; }
        .search-result-meta { font-size: 12px; }
    }        /* ОБЩИЕ СТИЛИ ДЛЯ СЕКЦИЙ И КАРТОЧЕК АНИМЕ/ПЛЕЙЛИСТОВ */

/* Стиль для заголовка секции (если он используется в секции плейлистов) */
.section-title {
    font-size: 2em;
    color: #ffffff;
    margin-bottom: 20px;
    text-align: left;
    padding-left: 10px;
}

/* СЕТКА для плейлистов (и других секций, если используется класс anime-grid) */
.anime-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); /* Адаптивная сетка, можно настроить minmax */
    gap: 20px; /* Отступы между карточками */
    justify-content: left; /* Центрирование карточек в сетке */
}

    .bottom-nav {
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      background: #111;
      display: flex;
      justify-content: space-around;
      align-items: center;
      padding: 8px 0;
      border-top: 1px solid #222;
      z-index: 10;
    }

    .bottom-nav a {
      text-decoration: none;
      color: #aaa;
      font-size: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      flex: 1;
      transition: 0.3s;
    }

.qwerty-bottom-999 {
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      background: #111;
      display: flex;
      justify-content: space-around;
      align-items: center;
      padding: 8px 0;
      border-top: 1px solid #222;
      z-index: 10;
    }

    .qwerty-bottom-999 a {
      text-decoration: none;
      color: #aaa;
      font-size: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      flex: 1;
      transition: 0.3s;
    }

    /* === СТИЛИ ДЛЯ ПРИЖАТОГО ФУТЕРА === */
    html {
        height: 100%;
    }
    body {
        margin: 0;
        background: #0b0b0b;
        font-family: Arial, sans-serif;
        color: #fff;
        display: flex;
        flex-direction: column;
        min-height: 100%;
    }
    .main-content {
        flex-grow: 1; /* Заставляет основной контент занимать всё доступное пространство */
    }
    /* ==================================== */

    /* нижняя панель */
    .xx11zz88 {
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      background: #111;
      display: flex;
      justify-content: space-around;
      align-items: center;
      padding: 10px 0;
      border-top: 1px solid #222;
      z-index: 10;
    }

    .xx11zz88 .a9b2c3 {
      text-decoration: none;
      color: #aaa;
      font-size: 13px;
      display: flex;
      flex-direction: column;
      align-items: center;
      flex: 1;
      transition: 0.3s;
    }

    .xx11zz88 .a9b2c3 i {
      font-size: 22px;
      margin-bottom: 3px;
    }

    .xx11zz88 .a9b2c3:hover,
    .xx11zz88 .a9b2c3.pppp9999 {
      color: #fff;
    }

    /* логотип */
    .qq00ww77 {
      position: fixed;
      bottom: 28px;
      left: 50%;
      transform: translateX(-50%);
      width: 70px;
      height: 70px;
      border-radius: 50%;
      overflow: hidden;
      box-shadow: 0 4px 12px rgba(0,0,0,0.6);
      z-index: 20;
      pointer-events: none; /* нельзя нажать */
    }

    .qq00ww77 img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 50%;
    }

    /* 📱 только мобильные */
    @media (max-width: 768px) {
      .xx11zz88,
      .qq00ww77 {
        display: flex;
      }
    }

    /* 💻 скрыть на ПК */
    @media (min-width: 769px) {
      .xx11zz88,
      .qq00ww77 {
        display: none;
      }
    }

    .qwerty-bottom-999 a i {
      font-size: 22px;
      margin-bottom: 3px;
    }

    .qwerty-bottom-999 a.active,
    .qwerty-bottom-999 a:hover {
      color: #fff;
    }

    /* Центральное фото */
    .crazy-center-logo-777 {
      position: fixed;
      bottom: 25px;
      left: 50%;
      transform: translateX(-50%);
      width: 65px;
      height: 65px;
      border-radius: 50%;
      overflow: hidden;
      box-shadow: 0 4px 12px rgba(0,0,0,0.5);
      z-index: 20;
      pointer-events: none;
    }

    .crazy-center-logo-777 img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 50%;
    }

    /* 📱 Адаптив для мобильных */
    @media (max-width: 768px) {
      .qwerty-bottom-999,
      .crazy-center-logo-777 {
        display: flex;
      }

      .crazy-center-logo-777 {
        width: 60px;
        height: 60px;
        bottom: 30px;
      }
    }

    /* 💻 На ПК скрываем */
    @media (min-width: 769px) {
      .qwerty-bottom-999,
      .crazy-center-logo-777 {
        display: none;
      }
    }

.footer-left,.nav-button {
    align-items:center;
    display:flex
}
.nav-arrow,.nav-button,.toggle-button {
    transform:translateY(-50%);
    cursor:pointer
}
.header-logo,.nav-button {
    position:absolute;
    transition:.3s
}
#anime-container,#series-container,.sound-button .icon-muted,.sound-button.muted .icon-unmuted,.sound-button.muted svg:last-child {
    display:none
}
.nav-button,.nav-icon,.profile-menu,.read-more-btn,.superDragonNotify {
    backdrop-filter:blur(10px)
}
* {
    margin:0;
    padding:0;
    box-sizing:border-box
}


body::-webkit-scrollbar {
    display:none
}
.nav-button {
    top:50%;
    background:rgba(0,0,0,.8);
    border:2px solid rgba(255,255,255,.2);
    color:#fff;
    width:48px;
    height:48px;
    border-radius:50%;
    z-index:10;
    opacity:0;
    overflow-x:none;
    justify-content:center
}
.featured-card,.featured-poster {
    overflow:hidden;
    border-radius:11px
}
.nav-button:hover {
    background:rgba(0,0,0,.95);
    border-color:rgba(255,255,255,.4);
    transform:translateY(-50%) scale(1.1);
    overflow-x:none
}
.nav-button:active {
    transform:translateY(-50%) scale(.95)
}
.nav-button.prev {
    left:-24px
}
.nav-button.next {
    right:4px
}

 

.nav-button.hidden {
    opacity:0!important;
    pointer-events:none
}
.nav-button svg {
    width:20px;
    height:20px;
    fill:currentColor;
    transition:transform .2s
}
.nav-panel a {
    transition:color .3s;
    text-decoration:none
}
.nav-button:hover svg {
    transform:scale(1.1)
}
.anime-card:hover .anime-poster::after,.hero-video.active,.nav-wrapper:hover .toggle-button,.section:hover .nav-button {
    opacity:1
}
.subtitle {
    font-size:14px;
    color:#888;
    margin-top:-23px;
    font-weight:400;
    margin-left:12px
}
.header-logo {
    left:81px;
    top:12px;
    color:#d1d1d1;
    font-size:28px;
    font-weight:800;
    text-decoration:none;
    z-index:994;
    text-shadow:0 0 10px rgba(255,255,255,.5),2px 2px 4px rgba(0,0,0,.5);
    letter-spacing:-1px;
    font-family:Montserrat,Arial,sans-serif
}

.scroll-top,.social-link {
    width:32px;
    height:32px;
    background:#333;
    border-radius:6px;
    color:#999;
    transition:.3s;
    text-decoration:none
}
.search-bar,.search-item,.social-links {
    display:flex;
    align-items:center
}

.scroll-top:hover {
    background:#f36;
    color:#fff;
    transform:translateY(-2px)
}

.scroll-top {
    display:flex;
    align-items:center;
    justify-content:center;
    margin-left:.5rem
}
.hero-section,.sidebar-icon {
    display:flex;
    border-radius:11px
}
.scroll-top svg {
    width:14px;
    height:14px
}

.header-logo:hover {
    text-shadow:0 0 15px rgba(255,255,255,.8),3px 3px 6px rgba(0,0,0,.7);
    transform:scale(1.05)
}
.container {
    max-width:1200px;
    margin:8px auto 0 580px;
    padding:0 10px
}
header {
    background-color:#00000000;
    padding:2px 0;
    border-bottom:1px solid #33333300
}
.header-content {
    display:flex;
    justify-content:flex-end;
    align-items:center;
    margin-bottom:11px
}
.nav-icons {
    display:flex;
    gap:20px
}
.nav-icon {
    background-color:#fff
}
.sidebar {
    position:fixed;
    left:0;
    top:0;
    height:100vh;
    width:60px;
    background-color:#111;
    display:flex;
    flex-direction:column;
    align-items:center;
    padding:20px 0;
    z-index:100
}
.sidebar-icon {
    width:32px;
    height:32px;
    background-color:#333;
    margin-bottom:20px;
    cursor:pointer;
    transition:background-color .3s;
    align-items:center;
    justify-content:center
}
.sidebar-icon:hover {
    background-color:#8b5cf6
}
.main-content {
    margin-left:60px;
    padding-left:0
}
.featured-section,.hero-section {
    margin-left:10px;
    margin-right:10px
}
.hero-section {
    position:relative;
    height:70vh;
    background-size:cover;
    background-position:center;
    align-items:center;
    margin-bottom:40px;
    overflow:hidden
}
.hero-meta,.meta-item {
    align-items:center;
    display:flex
}
.hero-overlay,.hero-video {
    width:100%;
    height:100%;
    position:absolute;
    left:0;
    z-index:1;
    top:0
}
.hero-video {
    object-fit:cover;
    opacity:0;
    transition:opacity 1s ease-in-out
}
.hero-overlay {
    background:linear-gradient(135deg,rgba(20,20,20,.8),rgba(40,40,40,.6))
}

/* Сильный градиент для плавного перехода */
.hero-overlay {
    background: linear-gradient(to top, rgb(0 0 0) 0%, rgba(20, 20, 20, 0.85) 40%, rgba(30, 30, 30, 0.5) 70%, #060606 100%);
}
.anime-poster,.featured-card,.featured-poster {
    background-size:cover;
    background-position:center
}
.hero-content {
    position:relative;
    z-index:2;
    max-width:600px;
    padding-left:20px;
    transition:opacity .5s ease-in-out
}
.trending-badge {
    display:inline-block;
    background-color:#e91e63;
    color:#fff;
    padding:6px 12px;
    border-radius:15px;
    font-size:14px;
    font-weight:700;
    margin-bottom:15px
}
.hero-title {
    font-size:48px;
    font-weight:800;
    margin-bottom:20px;
    line-height:1.2;
    text-shadow:2px 2px 4px rgba(0,0,0,.5)
}
.hero-meta {
    gap:20px;
    margin-bottom:20px;
    font-size:14px;
    color:#ccc;
    font-weight:600
}
.meta-item {
    gap:5px
}
.hero-description {
    font-size:16px;
    line-height:1.6;
    margin-bottom:30px;
    color:#ddd;
    font-weight:500
}
.hero-buttons {
    display:flex;
    gap:15px
}
.sound-button,.watch-button {
    display:inline-flex;
    align-items:center;
    transition:.3s;
    cursor:pointer
}
.watch-button {
    gap: 10px;
    background-color: rgb(255 255 255 / 10%);
    color: rgb(255 255 255);
    padding: 12px 25px;
    border-radius: 58px;
    text-decoration: none;
    font-weight: 700;
    border: 1px solid rgba(255, 255, 255, .1);
    font-size: 16px;
}
.watch-button:hover {
    background-color:#353535;
    transform:translateY(-2px)
}
.sound-button {
    justify-content:center;
    width:45px;
    height:45px;
    background-color:rgb(87 87 87 / 20%);
    border:2px solid rgba(255,255,255,.3);
    border-radius:50%;
    color:#fff
}
.sound-button:hover {
    background-color:rgba(255,255,255,.3)
}
.featured-section {
    margin-bottom:50px
}
.section-title {
    font-size:28px;
    font-weight:700;
    margin-bottom:25px;
    color:#fff;
    border-left:4px solid #fff;
    padding-left:10px;
    text-align:left;
    margin-left:0;
    border-radius:2px
}
.featured-card {
    padding:20px;
    display:flex;
    align-items:center;
    gap:20px;
    position:relative;
    min-height:250px
}
.featured-card::before {
    content:"";
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background:linear-gradient(178deg, rgb(4 4 4) 2%, rgb(0 0 0 / 70%) 100%);
    backdrop-filter:blur(5px);
    z-index:1
}
.featured-poster {
    width:160px;
    height:230px;
    flex-shrink:0;
    position:relative;
    box-shadow:0 10px 30px rgba(0,0,0,.3);
    z-index:2;
    transition:.3s
}
.featured-poster:hover {
    transform:scale(1.05);
    filter:brightness(.8)
}
.featured-info {
    flex:1;
    z-index:2
}
.featured-title {
    font-size:28px;
    font-weight:800;
    margin-bottom:10px;
    color:#fff
}
.featured-description {
    font-size:14px;
    line-height:1.6;
    margin-bottom:20px;
    color:#e0e0e0;
    max-width:600px;
    font-weight:500
}
.featured-meta {
    display:flex;
    gap:15px;
    margin-bottom:15px;
    font-size:14px;
    color:#ccc;
    font-weight:600
}
.play-button {
    display:inline-flex;
    align-items:center;
    gap:10px;
    background-color:#8b5cf6;
    color:#fff;
    padding:10px 20px;
    border-radius:11px;
    text-decoration:none;
    font-weight:700;
    transition:.3s;
    border:none;
    cursor:pointer;
    font-size:14px
}
.play-button:hover {
    background-color:#7c3aed;
    transform:translateY(-2px)
}
.play-icon {
    width:0;
    height:0;
    border-left:6px solid #fff;
    border-top:4px solid transparent;
    border-bottom:4px solid transparent
}
.section {
    margin-bottom:40px;
    position:relative;
    margin-left:10px;
    margin-right:10px
}
.anime-grid {
    display:flex;
    flex-direction:row;
    flex-wrap:nowrap;
    overflow-x:auto;
    gap:15px;
    transition:transform .4s cubic-bezier(.25, .46, .45, .94);
    padding:10px 15px;
    -webkit-overflow-scrolling:touch;
    scroll-behavior:smooth;
    flex:0 0 auto
}
.nav-arrow,.toggle-button {
    align-items:center;
    display:flex
}
.anime-grid::-webkit-scrollbar {
    display:none
}
.nav-arrow {
    position:absolute;
    top:50%;
    background-color:rgba(0,0,0,.8);
    color:#fff;
    border:none;
    width:40px;
    height:40px;
    border-radius:50%;
    font-size:16px;
    justify-content:center;
    z-index:10;
    opacity:1;
    transition:opacity .3s,background-color .3s
}
.anime-card,.anime-poster {
    position:relative;
    transition:.3s
}
.nav-arrow:hover {
    background-color:rgba(139,92,246,.9)
}
.nav-arrow.prev {
    left:-15px
}
.nav-arrow.next {
    right:-15px
}
.anime-card {
    flex:0 0 auto;
    cursor:pointer;
    flex:0 0 160px;
    margin-left:0;
    text-decoration:none
}
.anime-card:hover {
    transform:translateY(-5px);
    box-shadow:0 10px 20px transparent
}
.anime-poster {
    width: 99%;
    height: 250px;
    border-radius: 14px;
    overflow: hidden;
}
.anime-poster::after {
    content:"";
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background:rgba(0,0,0,.3);
    opacity:0;
    transition:opacity .3s
}
.sound-button.muted .icon-muted {
    display:inline
}
.episode-badge {
    position:absolute;
    top:6px;
    right:6px;
    background-color:rgba(255,255,255,.9);
    color:#e91e63;
    padding:3px 6px;
    border-radius:10px;
    font-size:10px;
    font-weight:700;
    border:1px solid rgba(0,0,0,.1);
    z-index:2
}
.anime-title {
    margin-top:8px;
    font-size:13px;
    font-weight:600;
    color:#fff;
    text-align:left;
    line-height:1.3;
    padding:0
}
.nav-wrapper {
    position:fixed;
    left:0;
    top:0;
    bottom:0;
    z-index:999;
    transition:.3s
}
.nav-panel {
    position:relative;
    width:60px;
    height:100%;
    background-color:#0d0d0d;
    display:flex;
    flex-direction:column;
    align-items:center;
    padding:15px 0;
    transition:transform .3s
}
.toggle-button,.url-display {
    position:absolute;
    background-color:#333
}
.nav-panel.closed {
    transform:translateX(-60px)
}
.toggle-button {
    right:-20px;
    top:50%;
    width:20px;
    height:50px;
    border-radius:0 5px 5px 0;
    justify-content:center;
    opacity:0;
    transition:opacity .3s
}
.toggle-button:after {
    content:"◀";
    color:#fff;
    font-size:12px
}
.nav-panel.closed+.toggle-button:after {
    content:"▶"
}
.nav-panel a {
    margin:15px 0;
    font-size:20px;
    display:flex;
    align-items:center;
    justify-content:center;
    width:40px;
    height:40px;
    color:gray
}
.nav-panel a:hover {
    opacity:.8
}
.top-icons {
    flex:1;
    display:flex;
    flex-direction:column;
    align-items:center
}
.bottom-icons {
    display:flex;
    flex-direction:column;
    align-items:center
}
.url-display {
    bottom:0;
    left:0;
    width:100%;
    color:#fff;
    font-size:10px;
    padding:2px 0;
    text-align:center
}
.nav-panel a.active {
    color:#fff
}
.nav-panel a.active svg {
    stroke:white
}
.conta {
    width:100%;
    padding:0 15px
}
.search-bar {
    padding:15px 0;
    background-color:#000
}
.back-arrow {
    color:#fff;
    margin-right:15px;
    cursor:pointer;
    margin-top:5px
}
.search-input-container {
    flex:1;
    position:relative
}
.search-input {
    width:100%;
    border:none;
    background:#1a1a1a;
    color:#fff;
    padding:12px 15px;
    font-size:15px;
    border-radius:16px;
    outline:0
}
.category-tabs {
    display:flex;
    padding:15px 0
}
.tab {
    padding:8px 15px;
    border-radius:15px;
    margin-right:10px;
    font-size:14px;
    cursor:pointer;
    transition:.3s
}
.tab.active {
    background-color:#fff;
    color:#000
}
.tab.inactive {
    background-color:#333;
    color:#fff
}
.popular-searches {
    padding:20px 0
}
.popular-title {
    font-size:16px;
    font-weight:500;
    margin-bottom:15px;
    color:#aaa
}
.search-items {
    display:flex;
    flex-direction:column
}
.search-item {
    padding:12px 0;
    border-bottom:1px solid #222
}
.nav-icon,.nav-icons {
    align-items:center;
    display:flex
}
.history-icon {
    margin-right:15px;
    color:#777
}
.content-message {
    margin-top:20px;
    padding:15px;
    background-color:rgba(255,255,255,.05);
    border-radius:8px;
    text-align:center;
    color:#aaa;
    font-size:14px;
    display:none
}
@media (min-width:768px) {
    .conta {
        max-width:800px;
        margin:0 auto;
        padding:20px
    }
    .search-input {
        font-size:15px;
        padding:15px 20px
    }
    .tab {
        padding:10px 14px;
        font-size:15px
    }
    .popular-title {
        font-size:18px;
        margin-bottom:20px
    }
    .search-item {
        padding:15px 0;
        font-size:16px
    }
    .search-item:hover {
        background-color:#111;
        cursor:pointer
    }
    .tab:hover {
        transform:translateY(-2px)
    }
}
@media (max-width:767px) {
    .conta {
        padding:10px
    }
    .search-bar {
        padding:10px 0
    }
}
.search-results {
    display:none;
    margin-top:20px
}
.content-card {
    display:flex;
    margin-bottom:15px;
    background-color:#111;
    border-radius:8px;
    overflow:hidden;
    transition:transform .3s
}
.nav-icons {
    gap:15px
}
.nav-icon {
    width:40px;
    height:40px;
    background:rgb(255 255 255 / 20%);
    border-radius:31%;
    justify-content:center;
    border:1px solid rgba(0,0,0,.2);
    cursor:pointer;
    transition:.3s;
    box-shadow:0 8px 32px rgba(0,0,0,.2);
    position:relative
}
.nav-icon:hover {
    background:rgba(0,0,0,.5);
    transform:translateY(-2px);
    box-shadow:0 12px 40px rgba(0,0,0,.3)
}
.nav-icon svg {
    width:20px;
    height:20px;
    stroke:rgba(255,255,255,0.9);
    fill:none;
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round
}
.nav-icon.profile svg {
    fill:rgba(255,255,255,0.9);
    stroke:none
}
.nav-icon.notification svg {
    stroke:rgba(255,255,255,0.9);
    fill:none;
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round
}
.nav-icon .notification-dot {
    position:absolute;
    top:6px;
    right:6px;
    width:8px;
    height:8px;
    background:#ff4757;
    border-radius:50%;
    border:2px solid rgba(255,255,255,.9);
    animation:2s infinite pulse-dot
}
.profile-menu {
    position:absolute;
    right:25px;
    top:65px;
    background:#161617;
    border-radius:14px;
    box-shadow:0 10px 25px rgba(0,0,0,.3),0 4px 12px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.05);
    width:300px;
    z-index:1000;
    display:none;
    font-family:Inter,"Segoe UI",sans-serif;
    overflow:hidden;
    border:1px solid #33415500;
    -webkit-backdrop-filter:blur(10px)
}
.profile-header {
    display:flex;
    align-items:center;
    padding:20px;
    border-bottom:1px solid #8989892d;
    background:linear-gradient(135deg,#252525 0,#000 100%)
}
.profile-pic {
    width:52px;
    height:52px;
    border-radius:30%;
    object-fit:cover;
    margin-right:15px;
    border:2px solid #c3cfdf30;
    box-shadow:0 2px 8px rgba(0,0,0,.3)
}
.notification-box {
    position: fixed;
    top: 70px;
    right: 20px;
    width: 509px;
    background: #101010;
    border-radius: 10px;
    box-shadow: 0 5px 20px rgb(177 177 177 / 10%);
    z-index: 1000;
    display: none;
    opacity: 0;
    transform: translateY(-20px);
    transition: opacity 0.3s, transform 0.3s;
    border: 1px solid #ffffff33;
}

.notification-box.show {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

.notification-header {
    padding: 14px;
    border-bottom: 1px solid #eeeeee57;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.notification-title {
    font-weight: 700;
    font-size: 16px;
}

/* Прокручиваемый контент + скрытие скроллбара */
#notificationContent {
    max-height: 400px;
    overflow-y: auto;

    /* Скрытие скроллбаров */
    scrollbar-width: none;           /* Firefox */
    -ms-overflow-style: none;        /* IE 10+ */
}
#notificationContent::-webkit-scrollbar {
    display: none;                   /* Chrome, Safari, Opera */
}

.notification-item {
    transition: background 0.2s;
    animation: 0.3s forwards fadeIn;
    opacity: 0;
    padding: 15px;
    border-bottom: 1px solid #333;
}
.notification-item:last-child {
    border-bottom: none;
}

.notification-item:hover {
    background: #2b2b2b;
    border-radius: 15px;
    border: 1px solid #ffffff33;
}

.notification-dot {
    position: absolute;
    background: #ff4757;
    color: #fff;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    display: none;
    width: 16px;
    height: 16px;
    font-size: 9px;
    top: -3px;
    right: -3px;
}

.nav-icon.notification {
    position: relative;
    cursor: pointer;
}

.content-rating,
.nav-panel,
.poisk,
.top-icons {
    display: flex;
}

/* Анимация появления */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.profile-email {
    font-size:14px;
    color:#94a3b8;
    font-weight:400
}
.logout-btn,.menu-option {
    font-size:15px;
    position:relative;
    display:flex
}
.menu-options {
    padding:10px 0
}
.menu-option {
    align-items:center;
    padding:14px 20px;
    text-decoration:none;
    color:#e2e8f0;
    font-weight:500;
    transition:.25s cubic-bezier(.4, 0, .2, 1)
}
.menu-option:hover {
    background:rgba(255,255,255,.05);
    color:#fff;
    padding-left:22px
}
.menu-option:hover::before {
    content:"";
    position:absolute;
    left:0;
    top:0;
    bottom:0;
    width:4px;
    background:#6366f1;
    border-radius:0 4px 4px 0
}
.menu-option svg {
    margin-right:15px;
    color:#94a3b8;
    width:20px;
    height:20px;
    transition:.25s
}
.menu-option:hover svg {
    color:#818cf8;
    transform:scale(1.05)
}
.logout-btn {
    width:100%;
    align-items:center;
    justify-content:center;
    padding:15px;
    background:linear-gradient(135deg,rgba(239,68,68,.1) 0,rgba(220,38,38,.1) 100%);
    border:none;
    border-top:1px solid #535353;
    color:#f87171;
    font-weight:600;
    cursor:pointer;
    transition:.3s;
    overflow:hidden
}
.logout-btn:hover {
    background:linear-gradient(135deg,rgba(239,68,68,.2) 0,rgba(220,38,38,.2) 100%);
    color:#ef4444
}
.logout-btn::after {
    content:"";
    position:absolute;
    top:0;
    left:-100%;
    width:100%;
    height:100%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent);
    transition:.5s
}
.logout-btn:hover::after {
    left:100%
}
.logout-btn svg {
    margin-right:12px;
    transition:transform .3s
}
.logout-btn:hover svg {
    transform:translateX(3px)
}
.nav-icon.profile:hover {
    background:linear-gradient(135deg,#475569 0,#334155 100%);
    transform:translateY(-2px);
    box-shadow:0 4px 12px rgba(0,0,0,.3)
}
.nav-icon.profile svg {
    width:18px;
    height:18px;
    color:#cbd5e1;
    transition:.3s
}
.nav-icon.profile:hover svg {
    color:#fff;
    transform:scale(1.1)
}
@keyframes fadeIn {
    from {
        transform:translateX(10px);
        opacity:0;
        transform:translateY(-15px)
    }
    to {
        transform:translateX(0);
        opacity:1;
        transform:translateY(0)
    }
}
.profile-menu[style*="display: block"] {
    animation:.35s cubic-bezier(.4,0,.2,1) forwards fadeIn
}
.logout-btn:active,.menu-option:active {
    transform:scale(.98)
}
.content-card:hover {
    transform:translateY(-2px)
}
.content-image {
    width:145px;
    height:200px;
    background-color:#00000000;
    object-fit:cover;
    border-radius:9px
}
.content-info {
    padding:10px;
    flex:1
}
.content-title {
    font-weight:500;
    margin-bottom:5px
}
.content-meta {
    color:#aaa;
    font-size:14px;
    margin-bottom:8px
}
.content-rating {
    align-items:center;
    color:gold;
    font-size:14px
}
#anime-container.active,#series-container.active {
    display:block
}
.nav-panel {
    justify-content:space-between;
    align-items:center
}
.poisk {
    align-items:center;
    justify-content:center;
    text-decoration:none
}
#search-menu {
    display:none;
    position:fixed
}
.read-more-btn {
    background:rgba(255,255,255,.2);
    color:#fff;
    border:1px solid rgba(255,255,255,.3);
    padding:3px 9px;
    border-radius:15px;
    font-size:.9rem;
    cursor:pointer;
    margin-left:10px;
    transition:.3s
}
.read-more-btn:hover {
    background:rgba(255,255,255,.3);
    transform:translateY(-1px)
}
.input {
    padding:10px 15px;
    border-radius:25px;
    border:none;
    background-color:#1a1a1a;
    color:#fff;
    font-size:15px;
    outline:0;
    width:328px;
    margin-left:108px
}
#search-menu {
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-color:#000;
    z-index:2900;
    overflow-y:auto
}
@media (max-width:768px) {
    .nav-arrow,.nav-button,.nav-icons .input,.nav-wrapper,.sidebar {
        display:none
    }

    .header-logo {
        font-size:22px;
        left:15px;
        top:15px;
        text-shadow:0 0 8px rgba(255,255,255,.5),1px 1px 3px rgba(0,0,0,.5)
    }
    .section-title {
        font-size:22px;
        margin-bottom:20px
    }
    .main-content {
        margin-left:0
    }
    .featured-card {
        flex-direction:column;
        text-align:center
    }
    .featured-title {
        font-size:22px
    }
    .notification-item,.notification-title {
        font-size:14px;
        color:#fff
    }
    .notification-box {
        position:fixed;
        top:60px;
        left:10px;
        right:10px;
        width:auto;
        max-width:calc(100vw - 20px);
        border-radius:8px;
        box-shadow:0 8px 25px rgba(0,0,0,.15);
        transform:translateY(-10px)
    }
    .notification-header {
        padding:12px 15px;
        border-bottom:1px solid #333
    }
    #notificationContent {
        max-height:60vh;
        overflow-y:auto
    }
    .anime-grid {
        grid-template-columns:repeat(auto-fill,minmax(118px, 1fr))!important;
    }
    .profile-menu {
        width:280px;
        right:15px;
        top:60px
    }
    .profile-header {
        padding:16px
    }
    .menu-option {
        padding:12px 16px
    }
    .featured-section,.hero-section,.section {
        margin-left:0!important;
        margin-right:-29px!important
    }
    .container {
        margin-left:0!important;
        padding:0 15px;
        width:100%
    }
    .hero-section {
        height:62vh!important;
        border-radius:3!important
    }
    .hero-content {
        padding:0 15px!important;
        max-width:100%!important
    }
    .hero-title {
        font-size:1.8rem!important;
        line-height:1.3!important
    }
    .hero-meta {
        flex-wrap:wrap;
        gap:10px!important
    }
    .featured-card {
        flex-direction:column;
        padding:15px!important
    }
    .featured-poster {
        width:130px!important;
        height:180px!important;
        margin:0 auto 15px
    }
    .anime-card {
        flex:0 0 140px!important
    }
    .anime-poster {
        height:190px!important
    }
}
@media (min-width:769px) and (max-width:1024px) {
    .header-logo {
        font-size:25px;
        left:20px;
        top:18px
    }
    .container {
        margin-left:180px!important;
        padding:0 20px
    }
    .hero-section {
        height:60vh!important
    }
    .hero-title {
        font-size:2.2rem!important
    }
    .featured-poster {
        width:140px!important;
        height:200px!important
    }
    .anime-card {
        flex:0 0 150px!important
    }
}
@media (max-width:768px) and (orientation:landscape) {
    .hero-section {
        height:70vh!important
    }
}
.superDragonNotify {
    position:fixed;
    bottom:20px;
    right:20px;
    transform:translateX(100px);
    background:rgb(25 24 24 / 66%);
    border-radius:12px;
    padding:16px 20px;
    max-width:350px;
    width:395px;
    color:#fff;
    font-size:14px;
    line-height:1.4;
    box-shadow:0 10px 30px rgba(0,0,0,.3);
    z-index:1000;
    opacity:0;
    animation:.5s ease-out forwards slideInMagic;
    border:1px solid rgba(255,255,255,.1)
}
.superDragonNotify.vanishNow {
    animation:.5s ease-in forwards slideOutMagic
}
.headerOfMysticBox {
    display:flex;
    align-items:center;
    margin-bottom:8px
}
.titleOfTheAncients {
    font-weight:600;
    font-size:13px;
    opacity:.9
}
.textWisdomLine {
    color:rgba(255,255,255,.9)
}
.linkToTheBotUniverse {
    color:#75baff;
    text-decoration:none;
    font-weight:600
}
.linkToTheBotUniverse:hover {
    text-decoration:underline;
    color:#0d6efd
}
@keyframes slideInMagic {
    from {
        transform:translateX(100px);
        opacity:0
    }
    to {
        transform:translateX(0);
        opacity:1
    }
}
@keyframes slideOutMagic {
    from {
        transform:translateX(0);
        opacity:1
    }
    to {
        transform:translateX(100px);
        opacity:0
    }
}
@media (max-width:480px) {
    .section-title {
        font-size:18px;
        margin-bottom:15px;
        padding-left:8px;
        border-left:3px solid #fff
    }
    .notification-box {
        top:55px;
        left:5px;
        right:5px;
        max-width:calc(100vw - 10px);
        border-radius:6px
    }
    .notification-header {
        padding:10px 12px
    }
    .notification-title {
        font-size:13px
    }
    #notificationContent {
        max-height:50vh
    }
    .notification-item {
        padding:12px;
        font-size:13px;
        line-height:1.4
    }
    .notification-dot {
        width:14px;
        height:14px;
        font-size:8px
    }
    .hero-title {
        font-size:1.5rem!important
    }
    .hero-description {
        font-size:.9rem!important
    }
    .anime-card {
        flex:0 0 110px!important
    }
    .anime-poster {
        height: 164px !important;
        width: 118px;
    }
    .watch-button {
        padding:10px 20px!important
    }
    .superDragonNotify {
        bottom:15px;
        right:15px;
        width:calc(100% - 30px);
        max-width:300px;
        font-size:13px
    }
}

    .bottom-nav a i {
      font-size: 22px;
      margin-bottom: 3px;
    }

    .bottom-nav a.active,
    .bottom-nav a:hover {
      color: #fff;
    }

    /* Центральное фото */
    .center-logo {
      position: fixed;
      bottom: 25px; /* чуть выше панели */
      left: 50%;
      transform: translateX(-50%);
      width: 65px;
      height: 65px;
      border-radius: 50%;
      overflow: hidden;
      box-shadow: 0 4px 12px rgba(0,0,0,0.5);
      z-index: 20;
      pointer-events: none; /* нельзя нажать */
    }

    .center-logo img {
      width: 100%;
      height: 100%;
      object-fit: cover; /* картинка заполняет круг полностью */
      border-radius: 50%;
    }

    /* 📱 Адаптив для мобильных */
    @media (max-width: 768px) {
      .bottom-nav,
      .center-logo {
        display: flex;
      }

      .center-logo {
        width: 60px;
        height: 60px;
        bottom: 30px;
      }
    }

    /* 💻 На ПК скрываем */
    @media (min-width: 769px) {
      .bottom-nav,
      .center-logo {
        display: none;
      }
    }

/* Стили для КАРТОЧКИ ПЛЕЙЛИСТА (также применяется к "Добавить плейлист") */
.playlist-card {
    background-color: #1a1a1a;
    border-radius: 8px;
    overflow: hidden;
    text-decoration: none;
    color: #ffffff;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    display: flex;
    flex-direction: column;
    position: relative; /* Для наложения оверлея */
}

.playlist-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
}

.playlist-poster {
    width: 100%;
    /* Высота постера: 150% от ширины - это примерно 270px при ширине 180px */
    padding-bottom: 150%;
    background-size: cover;
    background-position: center;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    position: relative; /* Для дочерних элементов позиционирования */
}

        .scrolling-wrapper {
            display: flex;
            overflow-x: auto;
            overflow-y: hidden;
            -webkit-overflow-scrolling: touch;
            padding-bottom: 20px;
            gap: 15px;
            scrollbar-width: thin;
            scrollbar-color: #555 #1a1a1a;
        }

        .scrolling-wrapper::-webkit-scrollbar {
            height: 8px;
        }

        .scrolling-wrapper::-webkit-scrollbar-thumb {
            background-color: #555;
            border-radius: 10px;
        }

        .card-component {
            flex: 0 0 160px;
            position: relative;
            background-color: #222;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
            transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.5s ease;
        }

        .card-component.fading-out {
            opacity: 0;
            transform: scale(0.8) translateY(-20px);
        }

    .qwerty-bottom-999 {
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      background: #111;
      display: flex;
      justify-content: space-around;
      align-items: center;
      padding: 8px 0;
      border-top: 1px solid #222;
      z-index: 10;
    }

    .qwerty-bottom-999 a {
      text-decoration: none;
      color: #aaa;
      font-size: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      flex: 1;
      transition: 0.3s;
    }

    .qwerty-bottom-999 a i {
      font-size: 22px;
      margin-bottom: 3px;
    }

    .qwerty-bottom-999 a.active,
    .qwerty-bottom-999 a:hover {
      color: #fff;
    }

    /* Центральное фото */
    .crazy-center-logo-777 {
      position: fixed;
      bottom: 25px;
      left: 50%;
      transform: translateX(-50%);
      width: 65px;
      height: 65px;
      border-radius: 50%;
      overflow: hidden;
      box-shadow: 0 4px 12px rgba(0,0,0,0.5);
      z-index: 20;
      pointer-events: none;
    }

    .crazy-center-logo-777 img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 50%;
    }

    /* 📱 Адаптив для мобильных */
    @media (max-width: 768px) {
      .qwerty-bottom-999,
      .crazy-center-logo-777 {
        display: flex;
      }

      .crazy-center-logo-777 {
        width: 60px;
        height: 60px;
        bottom: 30px;
      }
    }

    /* 💻 На ПК скрываем */
    @media (min-width: 769px) {
      .qwerty-bottom-999,
      .crazy-center-logo-777 {
        display: none;
      }
    }

        .card-component:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6);
        }

        .card-poster {
            width: 100%;
            height: 240px;
            object-fit: cover;
            display: block;
            transition: transform 0.3s ease;
        }

        .card-component:hover .card-poster {
            transform: scale(1.05);
        }

        .card-title-text {
            color: #fff;
            padding: 10px;
            font-size: 14px;
            text-align: center;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            font-weight: 600;
        }

        #recently-watched .card-component {
            background-color: transparent;
            box-shadow: none;
            flex: 0 0 263px;
            height: 153px;
            margin-left: 10px;
        }
        
        #recently-watched .card-poster {
            height: 260px;
            border-radius: 12px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
        }

        .link-media-poster {
            display: block;
            position: relative;
            border-radius: 8px;
            overflow: hidden;
        }

        .link-media-poster::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 40%);
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .card-component:hover .link-media-poster::after {
            opacity: 1;
        }

        .progress-bar-container {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 4px;
            background-color: rgba(255, 255, 255, 0.3);
            z-index: 2;
        }

        .progress-bar {
            height: 100%;
            background-color: #e50914;
            width: 0%;
            transition: width 0.5s ease-in-out;
        }

        .episode-label {
            position: absolute;
            bottom: 8px;
            right: 8px;
            background-color: rgba(0, 0, 0, 0.8);
            color: white;
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 12px;
            font-weight: bold;
            z-index: 2;
            box-shadow: 0 2px 5px rgba(0,0,0,0.3);
        }
        
        .remove-history-btn {
            position: absolute;
            top: 10px;
            right: 10px;
            width: 24px;
            height: 24px;
            background-color: rgba(0, 0, 0, 0.7);
            border: none;
            color: #fff;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            z-index: 10;
            opacity: 0;
            transition: opacity 0.2s ease, background-color 0.2s ease;
            backdrop-filter: blur(5px);
            box-shadow: 0 2px 5px rgba(0,0,0,0.3);
        }

        .card-component:hover .remove-history-btn {
            opacity: 1;
        }

        .remove-history-btn:hover {
            background-color: #e50914;
        }
        
        .remove-history-btn svg {
            width: 14px;
            height: 14px;
        }

        @media (max-width: 768px) {
            .remove-history-btn {
                opacity: 1;
            }
        }

.playlist-overlay { /* Оверлей для текста на обложке плейлиста */
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%);
    padding: 10px;
    box-sizing: border-box;
    display: flex;
    justify-content: flex-end; /* Перемещаем счетчик аниме вправо */
    align-items: flex-end;
}

.playlist-anime-count {
    background-color: #e50914; /* Акцентный цвет */
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.8em;
    font-weight: bold;
}

.playlist-title {
    font-size: 1em; /* Меньше для названий карточек */
    font-weight: 600;
    padding: 10px; /* Отступы для текста */
    text-align: center;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Ограничение до 2 строк */
    -webkit-box-orient: vertical;
    flex-grow: 1; /* Позволяет названию занимать доступное пространство */
    display: flex; /* Для центрирования текста по вертикали */
    align-items: center; /* Центрирование текста по вертикали */
    justify-content: center; /* Центрирование текста по горизонтали */
}

/* Стили для КАРТОЧКИ "Добавить новый плейлист" */
.add-playlist-card {
    background-color: #2a2a2a; /* Темный фон */
    border: 2px dashed #444; /* Пунктирная граница */
    color: #b3b3b3;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex-direction: column;
    cursor: pointer;
    padding: 10px; /* Уменьшаем внутренний отступ */
    box-sizing: border-box; /* Учитываем padding в размере */
}

.header-content .nav-icon {
    /* Плавность анимации для трансформации, фона и тени. 
       cubic-bezier создает красивый эффект "упругости" */
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    
    /* Сообщаем браузеру, что эти свойства будут меняться, для лучшей производительности */
    will-change: transform, box-shadow, background-color, border-color;
}

/* Добавляем плавность и для SVG-иконок внутри */
.header-content .nav-icon svg {
    transition: transform 0.3s ease;
}


/* 2. Анимация для стандартных иконок (Поиск и Уведомления) */

.header-content .nav-icon.search:hover,
.header-content .nav-icon.notification:hover {
    /* Увеличиваем иконку на 15% */
    transform: scale(1.15) translateY(-2px);
    
    /* Делаем фон светлее для эффекта подсветки */
    background-color: rgba(255, 255, 255, 0.15);
    
    /* Добавляем мягкую тень для создания ощущения глубины */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

/* Также немного увеличиваем саму SVG-картинку внутри для динамики */
.header-content .nav-icon.search:hover svg,
.header-content .nav-icon.notification:hover svg {
    transform: scale(1.1);
}


/* 3. Анимация для иконки Профиля (с аватаром) */

.header-content .nav-icon.profile:hover {
    /* Увеличиваем аватар чуть меньше, чтобы он выглядел "увесистее" */
    transform: scale(1.1);

    /* Главный эффект - красивое белое свечение вокруг аватара */
    box-shadow: 0 0 18px rgba(255, 255, 255, 0.6);
    
    /* Делаем существующую рамку более заметной и яркой */
    border-color: rgba(255, 255, 255, 0.7);
}

/* Дополнительный эффект: при наведении на аватар, бейдж с уведомлением "подпрыгивает" */
.header-content .nav-icon.profile .profile-notification-badge {
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.header-content .nav-icon.profile:hover .profile-notification-badge {
    transform: scale(1.2) translate(2px, -2px);
}

.add-playlist-card:hover {
    background-color: #3a3a3a;
    border-color: #c5c5c5;
    color: #ffffff;
}

.add-playlist-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%; /* Занимает всю высоту родителя */
    width: 100%; /* Занимает всю ширину родителя */
}

.add-playlist-icon svg {
    color: #b3b3b3;
    transition: color 0.2s ease;
    margin-bottom: 10px; /* Отступ между иконкой и текстом */
}

.add-playlist-card:hover .add-playlist-icon svg {
    color: #e50914;
}

.add-playlist-text {
    font-size: 1em; /* Немного уменьшаем размер текста */
    font-weight: 600;
}


/* =========== START: СТИЛИ ДЛЯ ФУТЕРА (ОТКРЕПЛЕННОГО) =========== */

.site-dock {
    margin-top: auto; /* Главное изменение для прижатия футера */
    background-color: #101010;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 25px 0;
    color: #a0a0a0;
    font-family: 'Rubik', sans-serif;
}

.dock-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.dock-brand-sector {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: #e0e0e0;
}

.dock-brand-logo {
    width: 40px;
    height: 40px;
}

.dock-brand-logo .logo-shape {
    fill: rgba(255, 255, 255, 0.1);
    stroke: #8b5cf6;
    stroke-width: 2;
    transition: fill 0.3s ease;
}

.dock-brand-logo .logo-text {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 20px;
    fill: #e0e0e0;
    transition: fill 0.3s ease;
}

.dock-brand-sector:hover .logo-shape {
    fill: rgba(139, 92, 246, 0.3);
}
.dock-brand-sector:hover .logo-text {
    fill: #fff;
}

.dock-brand-name {
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1;
}

.dock-brand-name span {
    font-size: 0.8rem;
    font-weight: 500;
    display: block;
    color: #a0a0a0;
    margin-top: 2px;
}

.dock-navigation-links {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    justify-content: center;
}

.dock-navigation-links a {
    color: #a0a0a0;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    position: relative;
    padding-bottom: 4px;
    transition: color 0.3s ease;
}

.dock-navigation-links a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #8b5cf6;
    transform: scaleX(0);
    transform-origin: bottom right;
    transition: transform 0.3s ease-out;
}

.dock-navigation-links a:hover {
    color: #ffffff;
}

.dock-navigation-links a:hover::after {
    transform: scaleX(1);
    transform-origin: bottom left;
}

.dock-utility-sector {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.dock-social-group {
    display: flex;
    gap: 0.75rem;
}

.dock-social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    color: #a0a0a0;
    transition: all 0.3s ease;
}

.dock-social-link:hover {
    background-color: #8b5cf6;
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 4px 10px rgba(139, 92, 246, 0.4);
}

.dock-social-link svg {
    width: 18px;
    height: 18px;
}

.dock-copyright-notice {
    text-align: center;
    width: 100%;
    font-size: 12px;
    color: #666;
    padding-top: 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    margin-top: 15px;
}

@media (max-width: 1024px) {
    .dock-container {
        flex-direction: column;
        text-align: center;
        gap: 1.5rem;
        padding: 0 1.5rem;
    }
    .dock-navigation-links {
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .dock-navigation-links {
        flex-direction: column;
        gap: 1rem;
    }
     .dock-container {
        padding: 0 1rem;
    }
}

/* =========== END: СТИЛИ ДЛЯ ФУТЕРА =========== */

/* =========== START: СТИЛИ ДЛЯ СЕКЦИИ РЕКОМЕНДАЦИЙ =========== */
.section-header-with-tooltip {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: -5px; /* Компенсируем отступ у .section-title */
}

.tooltip-container {
    position: relative;
    display: inline-block;
    margin-top: -18px;
}

.tooltip-icon {
    width: 22px;
    height: 22px;
    background-color: #333;
    color: #aaa;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 14px;
    cursor: help;
    transition: all 0.2s ease-in-out;
}

.tooltip-icon:hover {
    background-color: #8b5cf6;
    color: white;
    transform: scale(1.1);
}

.tooltip-text {
    visibility: hidden;
    opacity: 0;
    width: 280px;
    background-color: #1c1c1e;
    color: #fff;
    text-align: center;
    border-radius: 8px;
    padding: 12px;
    position: absolute;
    z-index: 1;
    bottom: 125%; 
    left: 50%;
    margin-left: -140px; /* Половина ширины для центрирования */
    transition: opacity 0.3s, transform 0.3s;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.5;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    border: 1px solid rgba(255,255,255,0.1);
    transform: translateY(10px);
}

.tooltip-text::after { /* Стрелочка внизу */
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #1c1c1e transparent transparent transparent;
}

.tooltip-container:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}

.anime-grid.placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 250px;
    background-color: rgba(255,255,255,0.03);
    border-radius: 14px;
    border: 2px dashed #333;
    padding: 20px;
    overflow: hidden; /* Убираем скролл для этого блока */
}

.placeholder-message {
    color: #888;
    font-size: 15px;
    text-align: center;
}

@media (max-width: 480px) {
    .tooltip-text {
        width: 90vw;
        max-width: 250px;
        left: 50%;
        margin-left: -45vw; /* calc(-90vw / 2) */
    }
    .placeholder-message {
        font-size: 14px;
    }
}
/* =========== END: СТИЛИ ДЛЯ СЕКЦИИ РЕКОМЕНДАЦИЙ =========== */


/* =========== НОВЫЕ СТИЛИ: ТОП ПО ПРОСМОТРАМ (УЛУЧШЕННЫЕ) =========== */
.leaderboard-section {
    margin-bottom: 50px;
}
.leaderboard-title-icon {
    display: inline-block;
    color: #ffffff; /* Белый цвет иконки */
    margin-right: 12px;
    vertical-align: middle;
    transform: translateY(-2px);
}
.leaderboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 15px;
}
.leaderboard-item {
    background-color: #21212100;
    border: 1px solid #333;
    border-radius: 16px;
    padding: 10px 15px;
    display: flex;
    align-items: center;
    gap: 15px;
    transition: transform 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}
.leaderboard-item:hover {
    transform: translateY(-5px);
    background-color: #2d2d2d;
    box-shadow: 0 8px 20px rgba(0,0,0,0.3);
}
.leaderboard-rank {
    font-family: 'Montserrat', sans-serif;
    font-size: 18px;
    font-weight: 800;
    color: #777;
    width: 32px;
    text-align: center;
    flex-shrink: 0;
}
.leaderboard-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid #444;
}
.leaderboard-username {
    font-size: 16px;
    font-weight: 600;
    color: #e0e0e0;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.leaderboard-crown {
    color: #ffd700;
    filter: drop-shadow(0 0 5px #ffc107);
}
.leaderboard-time {
    margin-left: auto;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #b0b0b0;
    white-space: nowrap;
    background-color: rgba(0,0,0,0.2);
    padding: 4px 10px;
    border-radius: 20px;
}
.leaderboard-item.rank-1 {
    background-color: rgba(200, 155, 60, 0.1);
    border-color: rgba(200, 155, 60, 0.3);
}
.leaderboard-item.rank-1 .leaderboard-rank { color: #c89b3c; }
.leaderboard-item.rank-1 .leaderboard-avatar { border-color: #c89b3c; }

.leaderboard-item.rank-2 {
    background-color: rgba(160, 173, 182, 0.1);
    border-color: rgba(160, 173, 182, 0.2);
}
.leaderboard-item.rank-2 .leaderboard-rank { color: #a0adb6; }

.leaderboard-item.rank-3 {
    background-color: rgba(176, 112, 64, 0.1);
    border-color: rgba(176, 112, 64, 0.2);
}
.leaderboard-item.rank-3 .leaderboard-rank { color: #b07040; }

/* === НОВЫЕ СТИЛИ ДЛЯ КАРТОЧКИ АКТИВНОСТИ ДРУЗЕЙ === */
.anime-card.friend-activity-card .anime-poster {
    position: relative; /* Необходимо для позиционирования оверлея */
}

.friend-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0) 80%);
    padding: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    opacity: 0;
    transition: opacity 0.3s ease;
    border-bottom-left-radius: 14px;
    border-bottom-right-radius: 14px;
}

.anime-card.friend-activity-card:hover .friend-overlay {
    opacity: 1;
}

.friend-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.5);
    object-fit: cover;
    flex-shrink: 0;
}

.friend-name {
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-grow: 1;
}

/* Медиа-запросы для адаптивности */
@media (max-width: 768px) {
    .anime-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); /* Меньшие карточки на узких экранах */
    }
    .leaderboard-grid {
        grid-template-columns: 1fr; /* Одна колонка на мобильных */
    }

    .section-title {
        font-size: 1.8em;
    }
}

@media (max-width: 480px) {
    .anime-grid {
        grid-template-columns: repeat(auto-fill, minmax(113px, 1fr)); /* Еще меньше на очень маленьких */
    }

    .section-title {
        font-size: 1.5em;
    }
}