body{
margin:0;
font-family:Arial;
background:#f4f6fb;
}

/* HEADER */
header{
text-align:center;
padding:20px;
background:linear-gradient(135deg,#1e1e2f,#4a6cf7);
color:white;
}

/* LAYOUT */
.explorer{
display:flex;
height:90vh;
}

/* SIDEBAR */
.sidebar{
width:230px;
background:#2c2f4a;
color:white;
padding:15px;
}

.folder{
padding:12px;
cursor:pointer;
border-radius:10px;
margin-bottom:10px;
transition:0.3s;
}

.folder:hover,
.folder.active{
background:#4a6cf7;
transform:translateX(5px);
}

/* CONTENT */
.content{
flex:1;
padding:25px;
overflow-y:auto;
}

/* FADE ANIMATION */
.fade{
opacity:0;
transform:translateY(10px);
transition:0.5s;
}

.fade.show{
opacity:1;
transform:translateY(0);
}

/* BUTTONS */
.buttons-area{
display:flex;
flex-wrap:wrap;
gap:10px;
margin-bottom:20px;
}

.buttons-area button{
padding:10px 15px;
border:none;
border-radius:8px;
background:#4a6cf7;
color:white;
cursor:pointer;
transition:0.3s;
}

.buttons-area button:hover{
background:#2f4de0;
transform:scale(1.05);
}

/* OUTPUT */
.output-box,.code-box{
margin-top:10px;
padding:15px;
border-radius:10px;
background:white;
box-shadow:0 3px 10px rgba(0,0,0,0.1);
white-space:pre-wrap;
animation:fadeIn 0.4s ease;
}

.code-box{
background:#1e1e1e;
color:#00ff88;
font-family:monospace;
}

/* ANIMATION */
@keyframes fadeIn{
from{opacity:0; transform:translateY(10px);}
to{opacity:1; transform:translateY(0);}
}