.cmp-page{ font-family:'Roboto', sans-serif; color:#12151C; }
  :root{
    --cmp-primary:#4F46E5; --cmp-primary-dark:#3730A3; --cmp-border:#E5E7F0;
    --cmp-muted:#5B6472; --cmp-bg-alt:#F3F4FB;
    --cmp-safe:#10B981; --cmp-safe-bg:#E6F9F0;
    --cmp-warn:#D97706; --cmp-warn-bg:#FEF3E2;
    --cmp-error:#DC2626; --cmp-error-bg:#FDEAEA;
  }

  .cmp-hero{ padding:44px 0 16px; text-align:center; }
  .cmp-hero h1{ font-weight:700; font-size:clamp(1.5rem,4vw,2.2rem); margin-bottom:8px; }
  .cmp-hero p{ color:var(--cmp-muted); max-width:60ch; margin:0 auto; font-size:0.98rem; }

  .cmp-format-pills{ display:flex; justify-content:center; gap:8px; margin-top:14px; flex-wrap:wrap; }
  .cmp-format-pill{
    background:#EDEBFC; color:var(--cmp-primary); font-size:0.75rem; font-weight:700;
    padding:4px 12px; border-radius:100px;
  }

  .cmp-tool-wrap{
    background:#fff; border:1px solid var(--cmp-border); border-radius:18px;
    padding:24px; margin:24px 0; box-shadow:0 4px 24px rgba(79,70,229,0.06);
  }
  @media (min-width:768px){ .cmp-tool-wrap{ padding:32px; } }

  /* ---------- Dropzone ---------- */
  .cmp-dropzone{
    border:2px dashed #C7CCE8; border-radius:14px; padding:34px 16px;
    text-align:center; cursor:pointer; transition:border-color .15s ease, background .15s ease;
    position:relative;
  }
  .cmp-dropzone *{ pointer-events:none; }
  .cmp-dropzone.dragover{ border-color:var(--cmp-primary); background:#F5F5FF; }
  .cmp-dropzone .cmp-icon-circle{
    width:56px; height:56px; border-radius:50%; background:#EDEBFC; color:var(--cmp-primary);
    display:flex; align-items:center; justify-content:center; margin:0 auto 12px; font-size:1.4rem;
  }
  .cmp-dropzone .cmp-title-text{ font-weight:600; font-size:1rem; margin-bottom:4px; }
  .cmp-dropzone .cmp-browse{ color:var(--cmp-primary); text-decoration:underline; }
  .cmp-dropzone small{ display:block; margin-top:6px; color:var(--cmp-muted); font-size:0.82rem; }
  @media (max-width:576px){
    .cmp-dropzone .cmp-desktop-only{ display:none; }
  }

  /* ---------- Target size selector ---------- */
  .cmp-target-section{ margin-top:24px; }

  /* ---------- Mode selector (shown only for small targets) ---------- */
  .cmp-mode-section{
    margin-top:18px; border:1px solid var(--cmp-border); border-radius:12px;
    padding:14px; background:var(--cmp-bg-alt); display:none;
  }
  .cmp-mode-section.visible{ display:block; }
  .cmp-mode-title{ font-weight:600; font-size:0.86rem; margin-bottom:10px; display:flex; align-items:center; gap:6px; }
  .cmp-mode-title i{ color:var(--cmp-primary); }
  .cmp-mode-options{
    display:grid;
    grid-template-columns: 1fr;
    gap:10px;
  }
  @media (min-width:576px){
    .cmp-mode-options{ grid-template-columns: 1fr 1fr; }
  }
  .cmp-mode-btn{
    box-sizing:border-box;
    width:100%;
    display:block;
    text-align:left;
    background:#fff;
    border:2px solid var(--cmp-border);
    border-radius:10px;
    padding:12px 14px;
    cursor:pointer;
    font-family:inherit;
    line-height:1.4;
  }
  .cmp-mode-btn.active{ border-color:var(--cmp-primary); background:#F5F5FF; }
  .cmp-mode-btn .cmp-mode-label{
    display:flex; align-items:center; gap:8px;
    font-weight:600; font-size:0.85rem; color:#12151C; margin-bottom:4px;
  }
  .cmp-mode-btn .cmp-mode-radio{
    width:16px; height:16px; min-width:16px; border-radius:50%; border:2px solid var(--cmp-border);
    display:inline-block; position:relative; flex-shrink:0;
  }
  .cmp-mode-btn.active .cmp-mode-radio{ border-color:var(--cmp-primary); }
  .cmp-mode-btn.active .cmp-mode-radio::after{
    content:""; position:absolute; top:2px; left:2px; width:8px; height:8px;
    border-radius:50%; background:var(--cmp-primary);
  }
  .cmp-mode-btn .cmp-mode-desc{
    font-size:0.76rem; color:var(--cmp-muted); margin:0; font-weight:400;
  }
  .cmp-target-label{ font-weight:600; font-size:0.9rem; margin-bottom:10px; display:block; }
  .cmp-preset-row{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
  .cmp-preset-btn{
    border:1px solid var(--cmp-border); background:#fff; border-radius:9px; padding:9px 15px;
    font-size:0.85rem; font-weight:600; color:#12151C; cursor:pointer; transition:all .12s ease;
    min-height:40px;
  }
  .cmp-preset-btn:hover{ border-color:var(--cmp-primary); }
  .cmp-preset-btn.active{ background:var(--cmp-primary); color:#fff; border-color:var(--cmp-primary); }
  .cmp-custom-input{ display:flex; align-items:center; gap:8px; max-width:280px; }
  .cmp-custom-input input{
    border:1px solid var(--cmp-border); border-radius:9px; padding:9px 12px; width:110px;
    font-size:0.9rem; min-height:40px;
  }
  .cmp-custom-input input:focus{ outline:none; border-color:var(--cmp-primary); }
  .cmp-custom-input span{ font-size:0.85rem; color:var(--cmp-muted); }

  .cmp-compress-btn{
    background:var(--cmp-primary); color:#fff; border:none; border-radius:10px;
    padding:14px 28px; font-weight:700; margin-top:22px; width:100%; font-size:1rem;
    transition:background .12s ease; min-height:50px;
  }
  .cmp-compress-btn:hover:not(:disabled){ background:var(--cmp-primary-dark); }
  .cmp-compress-btn:disabled{ opacity:0.45; cursor:not-allowed; }

  /* ---------- Queue / results ---------- */
  .cmp-queue{ margin-top:26px; display:flex; flex-direction:column; gap:12px; }
  .cmp-item{
    display:flex; align-items:center; gap:14px; border:1px solid var(--cmp-border);
    border-radius:14px; padding:14px; flex-wrap:wrap;
  }
  .cmp-item img{
    width:56px; height:56px; object-fit:cover; border-radius:10px; border:1px solid var(--cmp-border);
    flex-shrink:0;
  }
  .cmp-item .cmp-item-info{ flex:1 1 160px; min-width:0; }
  .cmp-item .cmp-filename{
    font-weight:600; font-size:0.88rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .cmp-item .cmp-sizes{ font-size:0.78rem; color:var(--cmp-muted); margin-top:2px; }
  .cmp-item .cmp-sizes .reduced{ color:var(--cmp-safe); font-weight:600; }
  .cmp-item .cmp-status{
    font-size:0.74rem; padding:4px 10px; border-radius:100px; background:var(--cmp-bg-alt);
    font-weight:600; white-space:nowrap;
  }
  .cmp-item .cmp-status.status-safe{ background:var(--cmp-safe-bg); color:var(--cmp-safe); }
  .cmp-item .cmp-status.status-warn{ background:var(--cmp-warn-bg); color:var(--cmp-warn); }
  .cmp-item .cmp-status.status-error{ background:var(--cmp-error-bg); color:var(--cmp-error); }
  .cmp-item .cmp-download{
    background:var(--cmp-primary); color:#fff; text-decoration:none; font-size:0.82rem;
    font-weight:600; padding:9px 16px; border-radius:9px; min-height:38px;
    display:inline-flex; align-items:center;
  }
  .cmp-item .cmp-download.disabled{ background:#C9CCE0; pointer-events:none; }

  .cmp-progress-bar{ width:100%; height:6px; background:var(--cmp-bg-alt); border-radius:100px; overflow:hidden; margin-top:8px; }
  .cmp-progress-fill{ height:100%; background:var(--cmp-primary); width:0%; transition:width .2s ease; border-radius:100px; }

  .cmp-privacy-note{
    display:flex; align-items:flex-start; gap:10px; background:var(--cmp-bg-alt);
    border-radius:12px; padding:12px 16px; margin-top:20px; font-size:0.84rem; color:var(--cmp-muted);
  }
  .cmp-privacy-note i{ color:var(--cmp-primary); margin-top:2px; }

  .cmp-download-all{ text-align:center; margin-top:16px; }

  @media (max-width:576px){
    .cmp-item .cmp-status{ order:3; }
    .cmp-item .cmp-download{ order:4; width:100%; justify-content:center; margin-top:8px; }
    .cmp-preset-btn{ flex:1 1 auto; text-align:center; }
    .cmp-compress-btn{ position:sticky; bottom:10px; z-index:5; }
  }