*{
box-sizing:border-box;
margin:0;
padding:0;
font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;
}

body{
background:#F1F5F8;
color:#1C2B33;
}


/* header */

header{
display:flex;
justify-content:space-between;
align-items:center;
padding:20px 40px;
background:white;
box-shadow:0 5px 15px rgba(0,0,0,0.05);
}

.logo{
font-size:20px;
font-weight:600;
color:#0064E0;
display:flex;
gap:8px;
align-items:center;
}

.uploadTop{
background:#0082FB;
border:none;
color:white;
padding:10px 16px;
border-radius:10px;
cursor:pointer;
transition:0.2s;
}

.uploadTop:hover{
background:#0064E0;
}


/* hero */

.hero{
display:flex;
align-items:center;
justify-content:space-between;
padding:60px;
}

.hero-text h1{
font-size:42px;
margin-bottom:10px;
}

.hero-text p{
opacity:0.7;
margin-bottom:25px;
}

.cloud{
width:300px;
filter:drop-shadow(0 25px 40px rgba(0,0,0,0.15));
}


/* storage */

.storage-bar{
width:220px;
height:8px;
background:#ddd;
border-radius:20px;
margin-bottom:6px;
}

.storage-used{
height:100%;
width:32%;
background:#0082FB;
border-radius:20px;
}


/* upload */

.upload{
background:white;
max-width:500px;
margin:auto;
padding:30px;
border-radius:20px;
box-shadow:0 20px 40px rgba(0,0,0,0.06);
}

.drop-area{
border:2px dashed #0082FB;
border-radius:15px;
padding:40px;
text-align:center;
cursor:pointer;
transition:0.2s;
}

.drop-area:hover{
background:#F7FBFF;
}

.drop-area i{
font-size:40px;
color:#0082FB;
}

.upload-options{
margin-top:15px;
display:flex;
gap:10px;
}

.upload-options input{
flex:1;
padding:10px;
border-radius:10px;
border:1px solid #ddd;
}

.upload-options button{
background:#0082FB;
border:none;
color:white;
padding:10px 20px;
border-radius:10px;
cursor:pointer;
transition:0.2s;
}

.upload-options button:hover{
background:#0064E0;
}


/* files */

.files{
padding:60px;
}

.file-grid{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
gap:20px;
margin-top:25px;
}

.file{
background:white;
border-radius:15px;
padding:15px;
display:flex;
align-items:center;
justify-content:space-between;
box-shadow:0 10px 25px rgba(0,0,0,0.05);
transition:0.2s;
gap:10px;
}

.file:hover{
transform:translateY(-3px);
}

.file-icon{
font-size:30px;
color:#0064E0;
}

.file-info{
flex:1;
margin-left:10px;
min-width:0; /* важно для ellipsis */
}

.file-info p{
font-size:14px;
font-weight:500;

/* защита от длинных имен */

white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
max-width:140px;

}

.file-info span{
font-size:12px;
opacity:0.6;
}


/* file buttons */

.file-actions{
display:flex;
gap:6px;
}

.file-actions button{
border:none;
background:#F1F5F8;
padding:8px;
border-radius:8px;
cursor:pointer;
transition:0.2s;
}

.file-actions button:hover{
background:#E6EEF5;
}


/* footer */

footer{
text-align:center;
padding:40px;
opacity:0.5;
}

/* POP UP */

.popup{

position:fixed;

bottom:30px;

left:50%;

transform:translateX(-50%) translateY(20px);

background:#1C2B33;

color:white;

padding:10px 18px;

border-radius:12px;

font-size:14px;

opacity:0;

transition:0.25s;

z-index:999;

}

.popup.show{

opacity:1;

transform:translateX(-50%) translateY(0);

}


/* mobile */

@media (max-width:800px){

.hero{
flex-direction:column;
text-align:center;
gap:30px;
}

.cloud{
width:200px;
}

header{
padding:15px 20px;
}

.upload{
margin:20px;
}

.files{
padding:30px;
}

.file-grid{
grid-template-columns:1fr;
}

.file-info p{
max-width:180px;
}

}