body{

    margin:0;

    font-family:Arial,sans-serif;

    background:#181818;

    color:#f5f5f5;

}

.login{
width:300px;
margin:100px auto;
display:flex;
flex-direction:column;
gap:15px;
}

input,button{
padding:10px;
}

button{cursor:pointer;}

#files{
margin-top:30px;
display:grid;
grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
gap:20px;
}

.file{
height:180px;
background:#242424;
border:1px solid #353535;
border-radius:12px;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
cursor:pointer;
transition:.15s;
padding:10px;
}

.file:hover{

    background:#303030;

    transform:translateY(-2px);

}

.icon{
font-size:58px;
margin-bottom:18px;
}

.title{
text-align:center;
word-break:break-word;
}

.thumb{width:100%;height:110px;object-fit:cover;border-radius:8px;display:block;}
.icon{width:100%;height:110px;display:flex;align-items:center;justify-content:center;font-size:52px;overflow:hidden;}

.viewer{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.9);

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:9999;

}

.viewer img{

    max-width:95%;

    max-height:95%;

    border-radius:10px;

}

.hidden{

    display:none;

}

#closeViewer{

    position:absolute;

    top:20px;

    right:30px;

    font-size:48px;

    color:white;

    cursor:pointer;

    user-select:none;

}

.thumb{

    width:100%;

    height:100%;

    object-fit:cover;

    border-radius:10px;

}

.icon{

    width:120px;

    height:120px;

    display:flex;

    justify-content:center;

    align-items:center;

    overflow:hidden;

    font-size:60px;

}

.viewer-toolbar{

    position:absolute;

    top:0;

    left:0;

    right:0;

    height:60px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:0 25px;

    background:rgba(0,0,0,.65);

    color:white;

    font-size:18px;

    box-sizing:border-box;

}

#downloadButton{

    color:white;

    text-decoration:none;

    margin-right:25px;

    font-weight:bold;

}

#downloadButton:hover{

    opacity:.8;

}

#backButton{

    padding:8px 16px;

    background:#2f6fed;

    color:white;

    border:none;

    border-radius:8px;

    cursor:pointer;

    margin-right:15px;

}

#backButton:hover{

    background:#4d84f0;

}

.topbar{

    display:flex;

    align-items:center;

    gap:15px;

    margin:20px;

}

#backButton{

    background:#2b5278;

    color:white;

    border:none;

    border-radius:8px;

    padding:8px 16px;

    cursor:pointer;

    font-size:15px;

}

#backButton:hover{

    background:#3d6f9d;

}

#path{

    font-size:18px;

    color:#ddd;

}

/* ---------- THEME ---------- */

body{

    margin:0;

    background:#18191d;

    color:#ececec;

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

}

/* ---------- HEADER ---------- */

.header{

    height:70px;

    background:#202226;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:0 25px;

    box-shadow:0 1px 10px rgba(0,0,0,.35);

}

.logo{

    font-size:24px;

    font-weight:700;

}

/* ---------- BUTTONS ---------- */

button{

    cursor:pointer;

    transition:.18s;

}

#uploadButton{

    background:#2b5278;

    color:white;

    border:none;

    border-radius:10px;

    padding:10px 18px;

    font-size:15px;

}

#uploadButton:hover{

    background:#3d6f9d;

}

#backButton{

    background:#2d2f34;

    color:white;

    border:none;

    border-radius:10px;

    padding:8px 15px;

}

#backButton:hover{

    background:#3d3f45;

}

/* ---------- TOPBAR ---------- */

.topbar{

    display:flex;

    align-items:center;

    gap:15px;

    padding:18px 24px;

    background:#1d1f23;

    border-bottom:1px solid #2b2d31;

}

/* ---------- FILE GRID ---------- */

#files{

    display:grid;

    grid-template-columns:repeat(auto-fill,minmax(170px,1fr));

    gap:18px;

    padding:24px;

}

/* ---------- CARD ---------- */

.file{

    background:#24262b;

    border-radius:16px;

    border:1px solid #31343a;

    transition:.18s;

    cursor:pointer;

    overflow:hidden;

}

.file:hover{

    transform:translateY(-4px);

    background:#2c2f35;

    box-shadow:0 10px 25px rgba(0,0,0,.3);

}

.icon{

    height:150px;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:52px;

}

.thumb{

    width:100%;

    height:100%;

    object-fit:cover;

}

.title{

    padding:14px;

    text-align:center;

    font-size:14px;

    word-break:break-word;

}
#dropOverlay{

    position:fixed;

    inset:0;

    background:rgba(24,25,29,.9);

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:9999;

}

#dropOverlay.hidden{

    display:none;

}

.dropMessage{

    border:3px dashed #4d8cff;

    border-radius:18px;

    padding:70px 120px;

    font-size:34px;

    text-align:center;

    color:white;

}
.deleteButton{

    position:absolute;

    top:10px;

    right:10px;

    border:none;

    border-radius:8px;

    background:#b93030;

    color:white;

    cursor:pointer;

    width:34px;

    height:34px;

    display:none;

}

.file{

    position:relative;

}

.file:hover .deleteButton{

    display:block;

}
.deleteButton{
    z-index:20;
}
#newFolderButton{

    background:#3a7a3a;

    color:white;

    border:none;

    border-radius:10px;

    padding:10px 18px;

    font-size:15px;

    cursor:pointer;

    margin-right:10px;

}

#newFolderButton:hover{

    background:#4b964b;

}
/* ===========================
   Модальное окно перемещения
   =========================== */

.modal{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.65);

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:9999;

}

.modal.hidden{

    display:none;

}

.modal-content{

    width:420px;

    background:#232428;

    border:1px solid #3a3a3a;

    border-radius:14px;

    padding:20px;

    color:white;

    box-shadow:0 0 30px rgba(0,0,0,.5);

}

.modal-content h2{

    margin:0 0 20px 0;

    font-size:22px;

}

#moveFolderList{

    display:flex;

    flex-direction:column;

    gap:10px;

    margin-bottom:20px;

}

.move-folder{

    background:#2e3138;

    border:1px solid #444;

    border-radius:10px;

    padding:12px 15px;

    cursor:pointer;

    transition:.15s;

}

.move-folder:hover{

    background:#3a404a;

}

#closeMoveModal{

    width:100%;

    padding:12px;

    border:none;

    border-radius:10px;

    background:#444;

    color:white;

    cursor:pointer;

    font-size:15px;

}

#closeMoveModal:hover{

    background:#555;

}
/* ===========================
   Контекстное меню
   =========================== */

.context-menu{

    position:fixed;

    width:220px;

    background:#26282d;

    border:1px solid #3d4148;

    border-radius:12px;

    overflow:hidden;

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

    z-index:10000;

}

.context-menu.hidden{

    display:none;

}

.context-menu div{

    padding:14px 18px;

    cursor:pointer;

    color:white;

    font-size:15px;

    transition:.15s;

    user-select:none;

}

.context-menu div:hover{

    background:#3a404a;

}

#deleteAction{

    color:#ff6666;

}

#deleteAction:hover{

    background:#662d2d;

}
.file.dragging{

    opacity:.35;

    transform:scale(.96);

}

.file.drop-target{

    border:2px solid #5ea8ff;

    background:#2f3d52;

}
.file.selected{

    border:2px solid #4fa7ff;

    background:#243549;

}