.content {
     display: flex;
     gap: 20px;
     padding: 20px;
 }

 .left {
     width: 30%;
 }

 .right {
     width: 70%;
 }

 .section {
     background: #fafafa;
     padding: 15px;
     border-radius: 10px;
     border: 1px solid #eee;
 }

 label {
     font-size: 13px;
     font-weight: bold;
 }

 input {
     width: 100%;
     padding: 10px;
     margin-top: 8px;
     border: 1px solid #ccc;
     border-radius: 6px;
     box-sizing: border-box;
 }

 .btns {
     display: flex;
     gap: 10px;
     margin-top: 15px;
     flex-wrap: wrap;
 }

 .app {
     /* flex:1; */
     width: 100%;
     padding: 12px;
     border: none;
     border-radius: 4px;
     cursor: pointer;
     color: #fff;
     background: linear-gradient(135deg, #0a3d62, #07517d);
 }

 .page {
     border: 2px solid #ddd;
     border-radius: 6px;
     padding: 5px;
     background: #fff;
     cursor: grab;
     text-align: center;
 }

 .page img {
     width: 100%;
     display: block;
 }

 .page-number {
     font-size: 12px;
     margin-top: 5px;
 }

 /* drag style */
 .dragging {
     opacity: 0.5;
 }

 #pages {
     border: 1px solid #ddd;
     border-radius: 8px;
     background: #fff;
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 10px;
     max-height: 75vh;
     min-height: 30vh;
     overflow: auto;
     padding: 10px;
 }