body{
  margin:0;
  font-family:Arial, sans-serif;
  background:#f4f6f8;
}

.ravionce-container{
  display:flex;
  gap:16px;
  padding:16px;
  flex-wrap:wrap; /* allows wrapping */
}

.ravionce-panel{
  width:460px;
  max-width:100%; /* prevents overflow */
  background:#fff;
  padding:16px;
  border-radius:12px;
  height:95vh;
  overflow:auto;
  box-sizing:border-box;
}

.ravionce-preview{
  flex:1;
  min-width:300px; /* prevents squishing */
  background:#fff;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
  box-sizing:border-box;
}

.ravionce-qr-border{
  display:inline-flex;
  padding:0;
  transition:.2s;
}

.ravionce-section{
  margin-bottom:18px;
}

.ravionce-section h4{
  margin:6px 0 10px;
  font-size:14px;
  border-bottom:1px solid #eee;
}

.ravionce-controls{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}

.ravionce-full{
  grid-column:span 2;
}

input,select,textarea,button{
  padding:8px;
  font-size:14px;
  width:100%;
  box-sizing:border-box;
}

textarea{
  resize:vertical;
}

button{
  cursor:pointer;
}


/* ========================= */
/* 📱 Mobile Responsive Part */
/* ========================= */

@media (max-width: 768px){

  .ravionce-container{
    flex-direction:column;
    padding:12px;
  }

  .ravionce-panel{
    width:100%;
    height:auto;
    max-height: 400px;
  }

  .ravionce-preview{
    width:100%;
    min-height:300px;
  }

  .ravionce-controls{
    grid-template-columns:1fr; /* single column */
  }

  .ravionce-full{
    grid-column:span 1;
  }

}