*{

box-sizing:border-box;

}


body{

margin:0;

min-height:100vh;

overflow-x:hidden;


font-family:
"Segoe UI",
sans-serif;


background:

radial-gradient(
circle at top,
#5845a5,
#171b3d 55%,
#080b18
);


color:white;

}



/* Луна */


.moon{


position:fixed;


right:170px;

top:70px;


width:230px;

height:230px;


border-radius:50%;


background:

linear-gradient(
135deg,
#fffbdc,
#ffd580
);



box-shadow:

0 0 40px #fff0a8,
0 0 120px rgba(255,220,120,.6);



animation:

moonFloat 5s infinite alternate;


}



@keyframes moonFloat{


from{

transform:
translateY(0);

}


to{

transform:
translateY(15px);

}


}





/* котик */


.cat{


position:fixed;


right:50px;

bottom:35px;


font-size:90px;


z-index:5;


filter:

drop-shadow(
0 15px 20px rgba(0,0,0,.5)
);



animation:

catWalk 4s infinite alternate;


}



@keyframes catWalk{


from{

transform:
translateX(0)
rotate(-5deg);

}


to{

transform:
translateX(-35px)
rotate(5deg);

}


}





/* следы */


.paws span{


position:fixed;


font-size:45px;


opacity:.25;


animation:
pawMove 7s infinite;



}



.paws span:nth-child(1){

left:70px;
bottom:160px;

}


.paws span:nth-child(2){

left:150px;
bottom:260px;

}


.paws span:nth-child(3){

left:240px;
bottom:360px;

}


.paws span:nth-child(4){

left:330px;
bottom:460px;

}




@keyframes pawMove{


50%{

transform:
translateY(-20px);


opacity:.5;

}


}






.app{


position:relative;


width:600px;


margin:
70px auto;


z-index:2;


}





.logo{

text-align:center;

}



.logo h1{


font-size:60px;

margin:0;


letter-spacing:2px;


}



.logo span{


color:#ffd980;


}



.logo p{


font-size:20px;

color:#ded9ff;


}




.card{


margin-top:35px;


padding:35px;


border-radius:35px;



background:

rgba(255,255,255,.12);



backdrop-filter:

blur(25px);



box-shadow:

0 20px 60px rgba(0,0,0,.45);



}





.input-box{


display:flex;


gap:15px;


align-items:center;


padding:18px;



background:

rgba(10,10,35,.45);



border:

1px solid rgba(255,255,255,.25);



border-radius:25px;



}




.link-icon{


font-size:28px;

}





.input-wrapper{


width:100%;

}




input{


width:100%;


height:55px;


padding:

0 18px;



border-radius:18px;



border:

1px solid rgba(255,255,255,.4);



background:

rgba(255,255,255,.18);



color:white;



font-size:18px;


outline:none;


}




input::placeholder{


color:

rgba(255,255,255,.8);


}






.platform-info{


margin-top:12px;


color:#ffd980;


font-size:16px;


}





.hint{


margin-top:18px;


padding:18px;


border-radius:25px;


background:

rgba(255,255,255,.08);



font-size:14px;


line-height:1.5;


color:

rgba(255,255,255,.8);


}




button{


width:100%;


margin-top:22px;


padding:18px;


border:0;


border-radius:22px;



font-size:18px;


color:white;



cursor:pointer;



background:

linear-gradient(
135deg,
#9475ff,
#d28cff
);



transition:.3s;


}




button:hover{


transform:

translateY(-3px);



box-shadow:

0 10px 30px #a56cff;


}





.loading{


display:none;


text-align:center;


margin-top:20px;


font-size:18px;


color:#ffe39a;


animation:

pulse 1.5s infinite;


}



@keyframes pulse{


50%{

opacity:.4;

}


}




.platforms{


display:flex;


gap:10px;


margin-top:25px;


flex-wrap:wrap;


}



.platforms span{


padding:

8px 15px;


border-radius:20px;


background:

rgba(255,255,255,.12);


}





.video-card{


display:none;


margin-top:30px;


padding:25px;


border-radius:30px;



background:

rgba(255,255,255,.12);



}




.video-card img{


width:100%;


border-radius:20px;


}



select{


width:100%;


padding:15px;


border-radius:15px;


font-size:16px;


}

.download-status {
    display: none;
    margin-top: 20px;
}

.progress-bar {
    width: 100%;
    height: 14px;

    background: rgba(255,255,255,.12);

    border-radius: 20px;

    overflow: hidden;
}

.progress-fill {
    width: 0%;

    height: 100%;

    border-radius: 20px;

    background: linear-gradient(
        90deg,
        #ffd980,
        #ff9de1
    );

    transition: width .3s;
}

#progressText {
    text-align: center;
    margin-top: 10px;
    color: #ffeab5;
}