*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Inter',sans-serif;
}

body{

background:#0f172a;
color:white;

height:100vh;

}

.app{

display:flex;
height:100vh;

}

/* SIDEBAR */

.sidebar{

width:240px;
background:#020617;

padding:25px;

display:flex;
flex-direction:column;

border-right:1px solid #1e293b;

}

.logo{

font-size:22px;
font-weight:600;

margin-bottom:30px;

color:#6366f1;

}

nav button{

width:100%;

padding:12px;

margin-bottom:10px;

background:#1e293b;
border:none;

color:white;

cursor:pointer;

border-radius:6px;

transition:0.2s;

}

nav button:hover{

background:#334155;
transform:translateX(3px);

}

/* HISTORY */

.history{

margin-top:auto;

font-size:12px;

}

#historyList div{

padding:6px;
border-bottom:1px solid #1e293b;

}

/* MAIN WORKSPACE */

.main{

flex:1;

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

}

.workspace{

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

padding:40px;

}

.workspace h1{

font-size:28px;

margin-bottom:20px;

}

/* PROMPT BOX */

textarea{

width:100%;

height:180px;

background:#020617;

border:1px solid #1e293b;

border-radius:10px;

padding:15px;

color:white;

resize:none;

font-size:15px;

transition:0.2s;

}

textarea:focus{

outline:none;
border-color:#6366f1;

}

/* BUTTON */

.generateBtn{

margin-top:20px;

padding:14px 30px;

background:#6366f1;

border:none;

color:white;

font-size:15px;

border-radius:8px;

cursor:pointer;

transition:0.2s;

}

.generateBtn:hover{

transform:translateY(-2px);

box-shadow:0 10px 30px rgba(99,102,241,0.4);

}

/* OUTPUT PANEL */

.outputPanel{

width:380px;

background:#020617;

border-left:1px solid #1e293b;

padding:25px;

overflow-y:auto;

}

#result{

white-space:pre-wrap;

line-height:1.6;

font-size:14px;

}

/* LOADING */

.loading{

display:none;

opacity:0.6;

margin-top:10px;

}

/* MOBILE */

@media(max-width:900px){

.sidebar{
display:none;
}

.outputPanel{
display:none;
}

.workspace{
padding:20px;
}

}