.upload-section{
display:flex;
justify-content:center;
margin-bottom:30px;
}

.upload-box{
width:800px;
height:180px;
background:white;
border:3px dashed #ccc;
border-radius:12px;
text-align:center;

display:flex;
flex-direction:column;
justify-content:center;
align-items:center;

cursor:pointer;
transition:.3s;
}

.workspace{
display:flex;
height:calc(100vh - 170px);
overflow:hidden;
}

.preview-panel{
flex:1;
padding:0 20px 20px 20px;
overflow-y:auto;
height:100%;
}

#preview{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
gap:20px;
}

.pdf-page{
height:auto;
background:white;
padding:10px;
border-radius:10px;
box-shadow:0 2px 8px rgba(0,0,0,.1);
cursor:pointer;
position:relative;
}

.pdf-page.selected{
border:3px solid #e5322d;
background:#fff5f5;
}

.pdf-page canvas{
width:100%;
border-radius:6px;
}

.pdf-page div{
text-align:center;
font-size:26px;
font-weight:bold;
margin-top:8px;
}

.range-panel{
width:420px;
background:#fff;
border-left:1px solid #ddd;
padding:25px;
height:100%;
overflow-y:auto;
box-shadow:-4px 0 15px rgba(0,0,0,0.08);
flex-shrink:0;
}
.range-panel h2{
margin-top:0;
text-align:center;
font-size:40px;
}

#ranges{
display:flex;
flex-direction:column;
gap:15px;
}

.range-row{
background:#fafafa;
padding:15px;
border:1px solid #ddd;
border-radius:10px;
}

.range-title{
display:flex;
justify-content:space-between;
font-size:18px;
font-weight:bold;
margin-bottom:10px;
}

.remove-btn{
cursor:pointer;
color:#e5322d;
font-size:24px;
}

.range-inputs{
display:flex;
align-items:center;
gap:10px;
}

.range-inputs input{
width:70px;
height:38px;
font-size:18px;
text-align:center;
}

.add-range-btn{
width:100%;
margin-top:15px;
padding:12px;
font-size:18px;
cursor:pointer;
}

.split-btn{
width:100%;
margin-top:15px;
background:#e5322d;
color:white;
border:none;
padding:18px;
font-size:24px;
border-radius:10px;
cursor:pointer;
}

.split-btn:hover{
background:#c62828;
}
.range1{
border:4px solid #4caf50 !important;
}

.range2{
border:4px solid #2196f3 !important;
}

.range3{
border:4px solid #ff9800 !important;
}

.range4{
border:4px solid #9c27b0 !important;
}
.range-badge{
position:absolute;
top:8px;
left:8px;
background:#e5322d;
color:white;
padding:4px 8px;
border-radius:6px;
font-size:12px;
font-weight:bold;
z-index:999;
}

.pdf-info{
background:#fafafa;
border:1px solid #ddd;
padding:15px;
border-radius:10px;
margin-bottom:20px;
text-align:left;
}

.pdf-info h3{
margin-top:0;
margin-bottom:10px;
font-size:20px;
}

.pdf-info p{
margin:8px 0;
font-size:16px;
}

.pdf-info span{
font-weight:bold;
color:#e5322d;
}
.range-error{
color:#e5322d;
font-size:14px;
margin-top:8px;
font-weight:bold;
}
.range-invalid{
border:2px solid #e5322d !important;
background:#fff3f3;
}
.upload-box:hover{
border-color:#e5322d;
background:#fff8f8;
}


.clear-btn{
width:100%;
margin-top:10px;
padding:12px;
font-size:18px;
cursor:pointer;
background:#666;
color:white;
border:none;
border-radius:8px;
}

.clear-btn:hover{
background:#444;
}