/* ================= COMPRESS & CONVERT TOOL ================= */
#ccBackdrop{
  position:fixed;inset:0;z-index:900;display:none;
  background:rgba(0,0,0,0.55);backdrop-filter:blur(3px);
  align-items:flex-end;justify-content:center;
}
#ccBackdrop.active{display:flex;}
#ccCard{
  width:100%;max-width:520px;max-height:92vh;overflow-y:auto;
  background:var(--surface);border-top-left-radius:var(--radius-lg);border-top-right-radius:var(--radius-lg);
  border:1px solid var(--border);border-bottom:none;
  padding:18px 18px calc(18px + env(safe-area-inset-bottom));
  animation:ccSlideUp .22s ease;
}
@media(min-width:560px){
  #ccBackdrop{align-items:center;}
  #ccCard{border-radius:var(--radius-lg);border-bottom:1px solid var(--border);max-height:88vh;}
}
@keyframes ccSlideUp{from{transform:translateY(24px);opacity:0;}to{transform:translateY(0);opacity:1;}}

.cc-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px;}
.cc-head h3{margin:0;font-size:17px;font-weight:800;color:var(--text);}
.cc-head p{margin:2px 0 0;font-size:12px;color:var(--text-dim);}

.cc-dropzone{
  margin-top:14px;border:1.5px dashed var(--border-strong);border-radius:var(--radius-md);
  padding:22px 14px;text-align:center;cursor:pointer;transition:border-color .15s,background .15s;
  background:var(--surface-2);
}
.cc-dropzone:hover,.cc-dropzone.drag{border-color:var(--accent);background:var(--accent-dim);}
.cc-dropzone i{font-size:26px;color:var(--accent);margin-bottom:8px;display:block;}
.cc-dropzone b{display:block;font-size:13.5px;color:var(--text);}
.cc-dropzone span{display:block;font-size:11.5px;color:var(--text-dim);margin-top:2px;}

.cc-preview{
  display:none;margin-top:14px;border-radius:var(--radius-md);overflow:hidden;
  background:var(--surface-2);border:1px solid var(--border);position:relative;
}
.cc-preview.active{display:block;}
.cc-preview img,.cc-preview video{width:100%;max-height:220px;object-fit:contain;display:block;background:#000;}
.cc-preview .cc-file-meta{
  display:flex;justify-content:space-between;align-items:center;padding:8px 12px;
  font-family:var(--font-mono);font-size:11px;color:var(--text-dim);
}
.cc-preview .cc-file-meta b{color:var(--text);font-weight:600;}
.cc-clear-btn{
  position:absolute;top:8px;right:8px;width:28px;height:28px;border-radius:50%;
  background:rgba(0,0,0,0.55);color:#fff;border:none;display:flex;align-items:center;justify-content:center;
  cursor:pointer;font-size:13px;
}

.cc-section{display:none;margin-top:16px;}
.cc-section.active{display:block;}
.cc-section h4{margin:0 0 8px;font-size:11.5px;font-weight:700;color:var(--text-dim);text-transform:uppercase;letter-spacing:.04em;}

.cc-chip-row{display:flex;flex-wrap:wrap;gap:8px;}
.cc-chip{
  padding:8px 13px;border-radius:999px;border:1px solid var(--border);background:var(--surface-2);
  color:var(--text);font-size:12.5px;font-weight:600;cursor:pointer;transition:all .12s;
}
.cc-chip.active{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);}
.cc-chip:active{transform:scale(0.96);}

.cc-row{margin-top:14px;}
.cc-row-label{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;}
.cc-row-label b{font-size:13px;color:var(--text);}
.cc-row-label span{font-size:12px;color:var(--accent);font-family:var(--font-mono);font-weight:700;}
.cc-row input[type=range]{width:100%;accent-color:var(--accent);}

.cc-custom-w{
  margin-top:10px;display:flex;align-items:center;gap:8px;
}
.cc-custom-w input[type=number]{
  flex:1;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:9px 10px;color:var(--text);font-size:13px;font-family:var(--font-mono);
}
.cc-custom-w span{font-size:12px;color:var(--text-dim);}

.cc-ultra-btn{
  width:100%;margin-top:16px;padding:12px;border-radius:var(--radius-md);border:1.5px solid var(--accent-2);
  background:rgba(45,212,191,0.1);color:var(--accent-2);font-weight:700;font-size:13px;
  display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;
}
.cc-ultra-btn:active{transform:scale(0.98);}

.cc-est{
  margin-top:14px;padding:11px 13px;border-radius:var(--radius-sm);background:var(--surface-2);
  border:1px solid var(--border);font-size:12px;color:var(--text-dim);display:flex;justify-content:space-between;
}
.cc-est b{color:var(--accent);}

.cc-go-btn{
  width:100%;margin-top:16px;padding:14px;border-radius:var(--radius-md);border:none;
  background:linear-gradient(135deg,var(--accent),#ffd166);color:var(--accent-ink);font-weight:800;font-size:14.5px;
  display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;
}
.cc-go-btn:disabled{opacity:.5;pointer-events:none;}
.cc-go-btn:active{transform:scale(0.98);}

.cc-progress-wrap{display:none;margin-top:14px;}
.cc-progress-wrap.active{display:block;}
.cc-progress-track{height:8px;border-radius:99px;background:var(--surface-2);overflow:hidden;border:1px solid var(--border);}
.cc-progress-fill{height:100%;width:0%;background:linear-gradient(90deg,var(--accent),var(--accent-2));transition:width .15s;}
.cc-progress-text{margin-top:7px;font-size:12px;color:var(--text-dim);text-align:center;font-family:var(--font-mono);}

.cc-trigger-btn{ }

#ccResultCard{
  display:none;margin-top:14px;border-radius:var(--radius-md);border:1px solid var(--accent-2);
  background:rgba(45,212,191,0.08);padding:14px;text-align:center;
}
#ccResultCard.active{display:block;}
#ccResultCard i{font-size:24px;color:var(--accent-2);margin-bottom:6px;display:block;}
#ccResultCard b{display:block;font-size:13.5px;color:var(--text);margin-bottom:2px;}
#ccResultCard span{font-size:11.5px;color:var(--text-dim);}
.cc-download-btn{
  margin-top:12px;width:100%;padding:12px;border-radius:var(--radius-md);border:none;
  background:var(--accent-2);color:#04211d;font-weight:800;font-size:13.5px;cursor:pointer;
}