/* =====================================================
   ADDED FROM DESIGN 1 (Missing in Design 2)
===================================================== */


/* ===============================
   2. CARD SECTIONS
================================*/
.tool-section{
background:#fff;
border:1px solid var(--border);
border-radius:12px;
padding:20px;
margin-top:20px;
box-shadow:var(--card-shadow);
}

/* ===============================
   3. CONTROLS HEADER
================================*/
.controls-header{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:20px;
}

.controls-title{
font-size:18px;
font-weight:600;
color:var(--primary);
}

.file-info{
display:flex;
align-items:center;
gap:10px;
background:var(--bg-light);
padding:6px 10px;
border-radius:6px;
}

.file-name{
font-weight:500;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
max-width:200px;
}

.change-file{
color:var(--primary);
cursor:pointer;
font-size:13px;
}



/* ===============================
   4. PAGE TAGS
================================*/
.selected-pages{
display:flex;
flex-wrap:wrap;
gap:8px;
margin-top:10px;
}

.page-tag{
background:var(--primary);
color:white;
padding:6px 12px;
border-radius:20px;
font-size:13px;
display:flex;
gap:6px;
align-items:center;
}

.remove-page{
cursor:pointer;
}


/* ===============================
   5. RADIO GROUP
================================*/
.radio-group{
display:flex;
flex-direction:column;
gap:6px;
}

.radio-option{
display:flex;
align-items:center;
gap:6px;
}


/* ===============================
   6. RANGE VALUES
================================*/
.range-values{
display:flex;
justify-content:space-between;
font-size:12px;
color:var(--text-light);
margin-top:5px;
}


/* ===============================
   7. RANGE / CUSTOM CONTROLS
================================*/
.range-controls{
display:none;
margin-top:10px;
}

.custom-controls{
display:none;
margin-top:10px;
}


/* ===============================
   8. TOAST STATES
================================*/
.toast.success{
background:var(--success);
}

.toast.error{
background:var(--error);
}


/* ===============================
   9. FADE ANIMATION
================================*/
.fade-in{
animation:fadeIn .3s ease-out forwards;
}

@keyframes fadeIn{
from{
opacity:0;
transform:translateY(10px);
}
to{
opacity:1;
transform:translateY(0);
}
}


/* ===============================
   10. UPLOAD ACTIVE STATE
================================*/
.upload-area.active{
border-color:var(--primary);
background:rgba(79,70,229,0.05);
}


/* ===============================
   11. RESULTS BOX
================================*/
.results-section{
display:none;
margin-top:24px;
background:white;
border-radius:12px;
padding:20px;
box-shadow:var(--card-shadow);
}

.results-header{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:15px;
}

.results-title{
font-size:18px;
font-weight:600;
color:var(--primary);
}