/* UI-fixed CSS */
.sic-wrapper{max-width:1100px;margin:18px auto;font-family:Inter,Arial,Helvetica,sans-serif}
.sic-dropzone{background:linear-gradient(180deg,#fafafa,#fff);padding:28px;border-radius:12px;border:2px dashed #e6e6e6;position:relative}
.sic-controls{display:flex;align-items:center;gap:12px;margin-top:12px}
.sic-format{margin-left:auto}
.sic-list{margin-top:16px}
.sic-item{display:grid;grid-template-columns:10% 40% 50%;gap:16px;align-items:center;background:#fff;padding:12px;border-radius:10px;margin-bottom:10px;box-shadow:0 6px 18px rgba(0,0,0,0.04)}
.sic-thumb img{width:100%;height:70px;object-fit:cover;border-radius:6px}
.sic-info-col .sic-primary-name{font-weight:800;color:#222}
.sic-info-col .sic-primary-sub{color:#666;margin-top:6px}
/* RIGHT column inline layout: percent | size | badge (inline, aligned right) */
.sic-actions-col{display:flex;flex-direction:row;align-items:center;justify-content:flex-end;gap:20px}
.sic-alt-format{display:flex;align-items:center;gap:8px;min-width:120px;justify-content:flex-end}
.sic-alt-percent{font-weight:800;white-space:nowrap}
.sic-alt-size{color:#666;white-space:nowrap;font-size:13px}
.sic-badge{padding:6px 10px;border-radius:8px;color:#fff;font-weight:800;display:inline-block}
.sic-badge-png{background:#007bff}
.sic-badge-webp{background:#28a745}
.sic-badge-jpg{background:#ff8c00}
.sic-tick{display:inline-block;margin-left:6px;color:#0a8f3b;font-weight:800}
/* ensure small screens behave */
@media(max-width:720px){ .sic-item{grid-template-columns:18% 52% 30%} .sic-thumb img{height:56px} }
/* make the label act clickable and look like control */
.sic-toggle-label{ cursor:pointer; user-select:none; display:inline-flex; align-items:center; gap:8px; }
#sic-format-panel{ transition: opacity .18s, visibility .18s; }


/* ----- Toggle switch styling (makes checkbox look like a sliding toggle) ----- */
.sic-toggle{display:inline-block;vertical-align:middle;position:relative;width:52px;height:30px;border-radius:20px;background:#ddd;padding:3px;box-sizing:content-box;cursor:pointer}
.sic-toggle input[type="checkbox"]{position:absolute;opacity:0;pointer-events:none;width:0;height:0;margin:0}
.sic-toggle-slider{display:block;width:100%;height:100%;border-radius:20px;background:#e6e6e6;transition:background .18s ease}
.sic-toggle-slider:before{content:'';position:absolute;left:4px;top:4px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,0.12);transition:transform .18s ease}
.sic-toggle input[type="checkbox"]:checked + .sic-toggle-slider{background:#4caf50}
.sic-toggle input[type="checkbox"]:checked + .sic-toggle-slider:before{transform:translateX(22px)}

/* label text spacing */
.sic-toggle-label{margin-left:10px;cursor:pointer;display:inline-block;vertical-align:middle}

/* Format panel hidden by default */
.sic-format{display:none;margin-left:auto;transition:all .18s ease}