.tool-box,
.content-box{
background:#ffffff;
border:1px solid #e9ecef;
border-radius:8px;
padding:30px;
}

.mode-buttons{
display:flex;
flex-wrap:wrap;
gap:8px;
}

.mode-buttons .btn{
margin:0;
}

.qr-box{
text-align:center;
padding:25px;
border:1px solid #e9ecef;
border-radius:8px;
background:#ffffff;
height:100%;
}

.qr-preview{
display:flex;
align-items:center;
justify-content:center;
min-height:250px;
padding:15px;
border:1px dashed #ced4da;
border-radius:8px;
background-color:#ffffff;
background-image:linear-gradient(45deg,#f1f3f5 25%,transparent 25%),linear-gradient(-45deg,#f1f3f5 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#f1f3f5 75%),linear-gradient(-45deg,transparent 75%,#f1f3f5 75%);
background-size:16px 16px;
background-position:0 0,0 8px,8px -8px,-8px 0;
}

.qr-preview img{
display:block;
width:220px;
height:220px;
max-width:100%;
object-fit:contain;
}

.field-group[hidden]{
display:none !important;
}

.status-message{
min-height:24px;
margin-top:12px;
font-weight:600;
}

.related-card{
border:1px solid #e9ecef;
border-radius:8px;
padding:20px;
background:#ffffff;
height:100%;
}

textarea{
resize:vertical;
}

@media(max-width:767.98px){
.tool-box,
.content-box{
padding:20px 15px;
}

.mode-buttons .btn{
flex:1 1 calc(50% - 8px);
}
}
.tool-icon-card{height:100%;border:1px solid #e4e8ed;border-radius:8px;padding:20px;background:#fff}
.tool-icon-card img{width:70px;height:70px;object-fit:contain;margin-bottom:12px}