/* =========================
Compression Controls
========================= */

.controls{
max-width:700px;
margin:2rem auto 1rem;
padding:1.5rem;
background:#ffffff;
border:1px solid #e2e8f0;
border-radius:16px;
box-shadow:0 4px 20px rgba(15,23,42,.06);
}

.slider-container{
width:100%;
}

.slider-header{
display:flex;
align-items:center;
justify-content:space-between;
gap:1rem;
margin-bottom:1rem;
}

.slider-header label{
font-size:1rem;
font-weight:600;
color:#1e293b;
}

.slider-value{
min-width:80px;
text-align:center;
font-size:.9rem;
font-weight:700;
color:#0C7CA8;
background:#e0f2fe;
padding:.35rem .8rem;
border-radius:999px;
}

/* =========================
Slider
========================= */

.slider{
-webkit-appearance:none;
appearance:none;
width:100%;
height:6px;
border-radius:999px;
background:#dbeafe;
outline:none;
cursor:pointer;
transition:.2s ease;
}

.slider:hover{
opacity:.95;
}

.slider::-webkit-slider-thumb{
-webkit-appearance:none;
appearance:none;
width:18px;
height:18px;
border-radius:50%;
background:#ffffff;
border:3px solid #0C7CA8;
box-shadow:0 2px 8px rgba(12,124,168,.25);
cursor:pointer;
transition:.2s;
}

.slider::-webkit-slider-thumb:hover{
transform:scale(1.1);
}

.slider::-moz-range-thumb{
width:18px;
height:18px;
border-radius:50%;
background:#ffffff;
border:3px solid #0C7CA8;
box-shadow:0 2px 8px rgba(12,124,168,.25);
cursor:pointer;
}

/* =========================
Compression Button
========================= */

.btn[data-role="compress-btn"]{
display:flex;
align-items:center;
justify-content:center;
gap:.5rem;
min-width:240px;
margin:1rem auto 0;
background:linear-gradient(135deg,#0C7CA8,#0284c7);
color:#ffffff;
border:none;
border-radius:999px;
padding:14px 28px;
font-size:16px;
font-weight:700;
cursor:pointer;
box-shadow:0 10px 25px rgba(12,124,168,.25);
transition:all .25s ease;
}

.btn[data-role="compress-btn"]:hover:not(:disabled){
background:linear-gradient(135deg,#0a6c92,#0369a1);
transform:translateY(-2px);
box-shadow:0 14px 30px rgba(12,124,168,.35);
}

.btn[data-role="compress-btn"]:active{
transform:translateY(0);
}

.btn[data-role="compress-btn"]:disabled{
opacity:.55;
cursor:not-allowed;
transform:none;
}

.btn[data-role="compress-btn"]::before{
content:"🚀";
}

/* إذا كان الزر خارج controls */

.controls + .btn[data-role="compress-btn"]{
display:flex;
margin:15px auto 0;
}

/* =========================
Loading Spinner
========================= */

.spinner{
width:42px;
height:42px;
border:4px solid rgba(12,124,168,.15);
border-top-color:#0C7CA8;
border-radius:50%;
animation:spin .8s linear infinite;
margin:1rem auto;
}

@keyframes spin{
to{
transform:rotate(360deg);
}
}

/* =========================
Results
========================= */

.results{
display:none;
max-width:700px;
margin:2rem auto 0;
padding:1.5rem;
background:#ffffff;
border:1px solid #e2e8f0;
border-radius:16px;
box-shadow:0 4px 20px rgba(15,23,42,.06);
}

.result-item{
display:flex;
justify-content:space-between;
align-items:center;
gap:1rem;
padding:.9rem 0;
border-bottom:1px solid #e2e8f0;
}

.result-item:last-child{
border-bottom:none;
}

.result-item span:first-child{
color:#64748b;
font-weight:500;
}

.result-item span:last-child{
color:#0f172a;
font-weight:700;
}

.compression-ratio{
color:#16a34a !important;
font-size:1.05rem;
font-weight:700 !important;
}

/* =========================
Mobile
========================= */

@media (max-width:768px){

```
.controls,
.results{
    max-width:100%;
    padding:1rem;
}

.slider-header{
    flex-direction:column;
    align-items:flex-start;
}

.result-item{
    flex-direction:column;
    align-items:flex-start;
    gap:.35rem;
}

.btn[data-role="compress-btn"]{
    width:100%;
    min-width:auto;
}
```

}