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

.container{
max-width:900px;
margin:auto;
padding:20px;
}

h1{
text-align:center;
margin-bottom:30px;
}

.form{
background:white;
padding:20px;
border-radius:8px;
box-shadow:0 2px 6px rgba(0,0,0,0.1);
}

input, textarea{

width:100%;
padding:10px;
margin-top:6px;
margin-bottom:12px;

border:1px solid #ccc;
border-radius:6px;

}

button{

padding:12px;
background:#4f46e5;
color:white;
border:none;
border-radius:6px;
cursor:pointer;
width:100%;

}

button:hover{
background:#4338ca;
}

small{
color:#666;
display:block;
margin-bottom:10px;
}

.results{
margin-top:30px;
}

.tabs{

display:flex;
flex-wrap:wrap;
gap:10px;
margin-bottom:10px;

}

.tabs button{

flex:1;
background:#e5e7eb;
color:black;
border:none;
padding:10px;
border-radius:6px;
cursor:pointer;

}

.tabs button.active{
background:#4f46e5;
color:white;
}

.options{
margin-bottom:10px;
}

.content{

background:white;
padding:20px;
border-radius:8px;
box-shadow:0 2px 6px rgba(0,0,0,0.1);

white-space:pre-wrap;

}

select{
padding:8px;
border-radius:6px;
border:1px solid #ccc;
}

@media (max-width:600px){

.tabs{
flex-direction:column;
}

}

#login-box{
max-width:400px;
margin:auto;
margin-bottom:30px;
}

button{
transition:all 0.2s ease;
}

button:active{
transform:scale(0.97);
}

#loading{
margin-top:10px;
font-weight:600;
color:#4f46e5;
}

.content{

background:white;
padding:20px;
border-radius:8px;
box-shadow:0 2px 6px rgba(0,0,0,0.1);

white-space:pre-wrap;

max-height:500px;
overflow:auto;

line-height:1.6;

}

#login-box{

max-width:400px;
margin:auto;
margin-bottom:30px;

animation:fadeIn 0.3s ease;

}

#login-box{

max-width:400px;
margin:auto;
margin-bottom:30px;

animation:fadeIn 0.3s ease;

}