/* ===========================
   RESET
=========================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;
}

body{
    background:linear-gradient(135deg,#0f172a,#111827,#1e293b);
    min-height:100vh;

    display:flex;
    flex-direction:column;

    justify-content:flex-start;
    align-items:center;

    padding:30px 15px;
    color:#fff;
}

/* ===========================
   CONTAINER
=========================== */

.container{

    width:950px;
    max-width:100%;

    background:rgba(255,255,255,.05);
    backdrop-filter:blur(15px);

    border-radius:18px;
    padding:30px;

    box-shadow:0 15px 40px rgba(0,0,0,.45);

    margin-bottom:40px;
}
/* ===========================
   LOGO
=========================== */

.logo{

    text-align:center;

    font-size:34px;

    font-weight:bold;

    color:#39ff14;

    margin-bottom:30px;

}

/* ===========================
   SEARCH
=========================== */

.search-box{

    display:flex;

    gap:12px;

}

.search-box input{

    flex:1;

    padding:15px;

    border:none;

    outline:none;

    border-radius:10px;

    font-size:16px;

}

.search-box input:focus{

    box-shadow:0 0 10px #39ff14;

}

.search-box button{

    width:150px;

    border:none;

    border-radius:10px;

    background:#00c853;

    color:#fff;

    font-size:17px;

    cursor:pointer;

    transition:.3s;

}

.search-box button:hover{

    background:#00a844;

}

.search-box button:disabled{

    background:gray;

    cursor:not-allowed;

}

/* ===========================
   LOADING
=========================== */

.loading{

    display:none;

    text-align:center;

    margin-top:30px;

}

.spinner{

    width:60px;

    height:60px;

    border:6px solid rgba(255,255,255,.15);

    border-top:6px solid #39ff14;

    border-radius:50%;

    margin:auto;

    animation:spin 1s linear infinite;

}

.loading h3{

    margin-top:18px;

    color:#39ff14;

}

.loading p{

    margin-top:8px;

    color:#ddd;

}

@keyframes spin{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

.error{

    margin-top:20px;

    color:#ff5252;

    text-align:center;

}/* ===========================
   VIDEO CARD
=========================== */

.video-card{

    margin-top:30px;

    background:#161b22;

    border-radius:18px;

    padding:25px;

    display:flex;

    gap:25px;

    align-items:flex-start;

    animation:fadeIn .5s ease;

}

.video-left{

    width:320px;

    flex-shrink:0;

}

.video-left img{

    width:100%;

    border-radius:15px;

    box-shadow:0 8px 20px rgba(0,0,0,.4);

}

.video-right{

    flex:1;

}

.video-right h2{

    font-size:24px;

    margin-bottom:15px;

    line-height:1.5;

}

.info{

    margin-bottom:20px;

}

.info p{

    margin:10px 0;

    font-size:17px;

    color:#ddd;

}

/* ===========================
   QUALITY
=========================== */

.quality-box{

    margin:20px 0;

}

.quality-box label{

    display:block;

    margin-bottom:8px;

    font-size:16px;

    font-weight:bold;

    color:#39ff14;

}

.quality-box select{

    width:100%;

    height:45px;

    border:none;

    border-radius:10px;

    outline:none;

    padding:0 12px;

    font-size:16px;

    background:white;

    color:#111;

}

/* ===========================
   DOWNLOAD BUTTON
=========================== */

.download-btn{

    width:100%;

    height:50px;

    border:none;

    border-radius:10px;

    background:#00c853;

    color:white;

    font-size:18px;

    cursor:pointer;

    transition:.3s;

    margin-top:15px;

}

.download-btn:hover{

    background:#00a844;

    transform:translateY(-2px);

}

.download-btn:disabled{

    background:gray;

    cursor:not-allowed;

}

/* ===========================
   ANIMATION
=========================== */

@keyframes fadeIn{

    from{

        opacity:0;

        transform:translateY(20px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}/* ===========================
   PROGRESS
=========================== */

#progressContainer{

    margin-top:25px;

    background:#0f172a;

    border-radius:15px;

    padding:20px;

    border:1px solid rgba(255,255,255,.08);

}

#progressContainer h3{

    margin-bottom:15px;

    color:#39ff14;

}

.progress{

    width:100%;

    height:18px;

    background:#2d3748;

    border-radius:20px;

    overflow:hidden;

    margin:15px 0;

}

#progressBar{

    width:0%;

    height:100%;

    background:linear-gradient(90deg,#39ff14,#00c853);

    border-radius:20px;

    transition:width .4s ease;

}

#percentage{

    margin-top:12px;

    font-size:26px;

    font-weight:bold;

    color:#39ff14;

}

#progressContainer p{

    margin-top:10px;

    color:#ddd;

    font-size:16px;

}

#speed,
#eta,
#status{

    color:#39ff14;

    font-weight:bold;

}

/* ===========================
   MOBILE
=========================== */

@media(max-width:768px){

    .container{

        padding:20px;

    }

    .logo{

        font-size:26px;

    }

    .search-box{

        flex-direction:column;

    }

    .search-box input{

        width:100%;

    }

    .search-box button{

        width:100%;

        height:50px;

    }

    .video-card{

        flex-direction:column;

    }

    .video-left{

        width:100%;

    }

    .video-right{

        width:100%;

    }

    .video-right h2{

        font-size:20px;

    }

    .download-btn{

        width:100%;

    }

}

/* ===========================
   TABLET
=========================== */

@media(min-width:769px) and (max-width:1024px){

    .container{

        width:95%;

    }

}

/* ===========================
   SCROLLBAR
=========================== */

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-thumb{

    background:#39ff14;

    border-radius:10px;

}

::-webkit-scrollbar-track{

    background:#111827;

}

/* ===========================
   TEXT SELECTION
=========================== */

::selection{

    background:#39ff14;

    color:black;

}.footer{
    width:100%;
    text-align:center;
    padding:20px;
    color:white;
    font-size:15px;
}

.footer strong{
    color:#00e5ff;
}