/* MOBILE */

@media (max-width:767px){

.tool-wrapper{
width:100%;
max-width:100%;
margin:8px 0;
padding:12px;
border-radius:20px;
box-shadow:var(--ust-shadow);
border:1px solid var(--ust-border);
}

#input{
font-size:16px;
padding:14px 12px;
text-align:center;
width:100%;
min-height:88px;
top:0;
border-radius:16px;
}

.item{
padding:14px 12px;
font-size:15px;
border-radius:12px;
}

#output{
gap:12px;
}

.output-section{
padding:10px 5px;
border-radius:16px;
}

.output-section-list{
gap:8px;
}

.preview-wrapper{
display:flex;
flex-direction:column;
padding:10px 5px;
gap:10px;
top:96px;
}

.output-section-title{
font-size:14px;
}

.load-more-btn{
width:100%;
max-width:none;
min-width:0;
}

.tool-action-row{
display:grid;
grid-template-columns:1fr;
gap:8px;
}

.tool-action-row .preview-toggle,
.preview-toggle{
width:100%;
margin-top:0;
}

}

/* TABLET */

@media (min-width:768px) and (max-width:1024px){

.tool-wrapper{
max-width:700px;
}

.preview-wrapper{
display:flex;
flex-direction:column;
}

}

/* DESKTOP */

@media (min-width:1025px){

.tool-wrapper{
max-width:900px;
}

.preview-wrapper{
display:flex;
}

}

/* ===== MOBILE STICKY FIX ===== */

@media (max-width:767px){

#input{
position:sticky;
top:60px; /* header height ke hisab se adjust */
z-index:50;
background:rgba(11,26,43,0.96);
}

.preview-wrapper{
position:sticky;
top:110px;
z-index:40;
background:transparent;
}

}