/*==== PAGE ====*/
.movie-page{
    max-width:1200px;
    margin:auto;
}

/*==== HEADER ====*/
.library-header{
    display:flex;
    align-items:center;
    gap:18px;
    margin-bottom:24px;
    padding:24px;
    border-radius:22px;
    background:rgba(30,41,59,.35);
    -webkit-backdrop-filter:blur(10px);
    backdrop-filter:blur(10px);
    border:1px solid rgba(255,255,255,.08);
}

.library-icon{
    width:74px;
    height:74px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:20px;
    background:linear-gradient(135deg,#2563eb,#38bdf8);
}

.library-icon img{
    width:42px;
    height:42px;
}

.library-header h2{
    font-size:28px;
    color:#fff;
    margin-bottom:6px;
}

.library-header p{
    color:#94a3b8;
}

/*==== CATEGORY GRID ====*/
.category-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:20px;
}

/*==== CATEGORY CARD ====*/
.movie-category{
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:12px;
    overflow:hidden;
    padding:28px 22px;
    text-decoration:none;
    color:#fff;
    border-radius:22px;
    border:2px solid transparent;
    background:
        linear-gradient(rgba(15,23,42,.78),rgba(15,23,42,.78)) padding-box,
        linear-gradient(90deg,#2563eb,#38bdf8,#06b6d4,#8b5cf6,#2563eb) border-box;
    background-size:100% 100%,300% 100%;
    animation:borderFlow 6s linear infinite;
    transition:.35s;
}
/*==== CARD EFFECT ====*/
.movie-category::before{
    content:"";
    position:absolute;
    inset:-120%;
    background:conic-gradient(
        from 0deg,
        transparent,
        #38bdf8,
        #2563eb,
        #8b5cf6,
        transparent
    );
    animation:spin 5s linear infinite;
}

.movie-category::after{
    content:"";
    position:absolute;
    inset:2px;
    border-radius:20px;
    background:rgba(30,41,59,.62);
}

/*==== CONTENT ====*/
.movie-category>*{
    position:relative;
    z-index:2;
}

.movie-category:hover{
    transform:translateY(-8px) scale(1.02);
    box-shadow:
        0 0 18px rgba(56,189,248,.35),
        0 0 45px rgba(37,99,235,.30);
}

.movie-category img{
    width:60px;
    height:60px;
    transition:.35s;
}

.movie-category:hover img{
    transform:scale(1.1) rotate(-6deg);
}

.movie-category h3{
    font-size:22px;
    color:#fff;
    text-align:center;
}

.movie-category p{
    color:#94a3b8;
    text-align:center;
    line-height:1.5;
}

.movie-category span{
    margin-top:8px;
    padding:8px 18px;
    border-radius:30px;
    background:rgba(37,99,235,.18);
    color:#7dd3fc;
    font-size:13px;
    font-weight:bold;
}

@keyframes spin{
    from{
        transform:rotate(0deg);
    }
    to{
        transform:rotate(360deg);
    }
}
/*==== CATEGORY HEADER ====*/
.category-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    margin-bottom:24px;
    padding:22px;
    border-radius:22px;
    background:rgba(30,41,59,.35);
    -webkit-backdrop-filter:blur(14px);
    backdrop-filter:blur(14px);
    border:1px solid rgba(255,255,255,.08);
}

.category-title{
    display:flex;
    align-items:center;
    gap:18px;
}

.category-icon{
    width:74px;
    height:74px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:20px;
    background:linear-gradient(135deg,#2563eb,#38bdf8);
}

.category-icon img{
    width:46px;
    height:46px;
}

.category-title h2{
    color:#fff;
    font-size:28px;
    margin-bottom:6px;
}

.category-title p{
    color:#94a3b8;
}

.category-back{
    padding:12px 22px;
    border:none;
    border-radius:12px;
    background:#2563eb;
    color:#fff;
    cursor:pointer;
    transition:.3s;
}

.category-back:hover{
    background:#1d4ed8;
    transform:translateY(-2px);
}

/*==== SEARCH ====*/
.search{
    width:100%;
    margin-bottom:22px;
    padding:14px 18px;
    border-radius:14px;
    border:1px solid rgba(255,255,255,.08);
    background:rgba(30,41,59,.55);
    color:#fff;
    outline:none;
    transition:.3s;
}

.search::placeholder{
    color:#94a3b8;
}

.search:focus{
    border-color:#38bdf8;
    box-shadow:0 0 20px rgba(56,189,248,.2);
}

/*==== PLAYER ====*/
video{
    width:100%;
    margin:20px 0;
    border-radius:18px;
    background:#000;
    border:1px solid rgba(255,255,255,.08);
}

.controls{
    display:flex;
    justify-content:center;
    gap:12px;
    flex-wrap:wrap;
    margin-bottom:18px;
}

.controls button{
    min-width:150px;
    padding:12px 18px;
    border:none;
    border-radius:12px;
    background:#2563eb;
    color:#fff;
    cursor:pointer;
    transition:.3s;
}

.controls button:hover{
    background:#1d4ed8;
    transform:translateY(-2px);
}

.current-title{
    margin:18px 0;
    text-align:center;
    color:#fff;
    font-size:18px;
    font-weight:bold;
    overflow:hidden;
    white-space:nowrap;
}
/*==== PLAYLIST ====*/
#playlist{
    list-style:none;
    margin-top:20px;
    padding:0;
}

#playlist li{
    display:flex;
    align-items:center;
    gap:12px;
    padding:16px 18px;
    margin-bottom:10px;
    border-radius:16px;
    background:rgba(30,41,59,.55);
    border:1px solid rgba(255,255,255,.08);
    color:#fff;
    cursor:pointer;
    transition:.3s;
}

#playlist li::before{
    content:"🎬";
    font-size:20px;
}

#playlist li:hover{
    transform:translateX(6px);
    border-color:#38bdf8;
    background:rgba(37,99,235,.18);
    box-shadow:0 10px 24px rgba(37,99,235,.18);
}

#playlist li.active{
    background:linear-gradient(135deg,#2563eb,#1d4ed8);
    border-color:#60a5fa;
    box-shadow:0 0 20px rgba(37,99,235,.35);
}

/*==== ADS ====*/
#ads-webm{
    position:fixed;
    right:12px;
    bottom:12px;
    width:150px;
    border-radius:14px;
    overflow:hidden;
    z-index:9999;
}

/*==== SCROLL ====*/
#playlist::-webkit-scrollbar{
    width:8px;
}

#playlist::-webkit-scrollbar-thumb{
    background:#2563eb;
    border-radius:20px;
}

#playlist::-webkit-scrollbar-track{
    background:rgba(255,255,255,.05);
}

/*==== ANIMATION ====*/
@keyframes borderFlow{
    from{
        background-position:0 0,0 0;
    }
    to{
        background-position:0 0,300% 0;
    }
}

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

.library-header,
.category-header,
.movie-category,
#playlist li,
.card{
    animation:fadeUp .4s ease;
}

/*==== MOBILE ====*/
@media(max-width:768px){
    .category-grid{
        grid-template-columns:1fr;
    }

    .category-header{
        flex-direction:column;
        text-align:center;
    }

    .category-title{
        flex-direction:column;
    }

    .category-back,
    .controls button{
        width:100%;
    }

    .controls{
        flex-direction:column;
    }

    .movie-category{
        padding:22px 18px;
    }

    .movie-category img{
        width:50px;
        height:50px;
    }

    .category-icon{
        width:64px;
        height:64px;
    }

    .category-icon img{
        width:40px;
        height:40px;
    }

    #ads-webm{
        width:110px;
    }
}