.upload_btns{background-color: #F6F8FA;}
.upload_option .label_upload {
  width: 154px;
  height: 30px;
  font-size: 16px;
  background-color: #000 !important;
}
.input_section .upload_option{
  top: 40px;
  left: 0px;
  right: 0px;
  position: absolute;
}
.input_section .drag_drop{height: 355px;}
.img_formats span{
  font-size: 12px;
  height: 24px;
  min-width: 40px;
}
.img_formats span.s1{
  color: #3A2D7C;
  background-color: #E9E5FD;
}
.img_formats span.s2{
  color: #C43C3C;
  background-color: #FDE5E5;
}
.img_formats span.s3{
  color: #0C3F9F;
  background-color: #D3E8FD;
}
.img_formats span.s4{
  color: #000;
  background-color: #E0E0E0;
}
.img_formats span.s5{
  color: #4364A2;
  background-color: #E3E7F0;
}
.img_formats span.s6{
  color: #588D72;
  background-color: #D8EBE1;
}
.img_formats span.s7{
  color: #FAE2DF;
  background-color: #C7746A;
}
.upload_option p.d2{
  font-size: 14px;
  color: #000;
}
.top_uploading{position: relative;}
.opt_setting{
	width: 134px;
	height: 30px;
	font-size: 12px;
	color: #222;
	background-color: #E3E7ED;
	background-image: url(../webimages/jpg_converter1.svg);
	background-repeat: no-repeat;
  background-position: 94% 50%;
  padding: 0px 10px;
  position: absolute;
  right: 0px;
}
.opt_setting1{
	width: 20px;
	background-image: url(../webimages/jpg_converter2.svg);
  background-position: center;
  top: 10px;
}
.setting_area{border: 7px solid #E3E7ED;}
.setting_area .head1{
	font-size: 12px;
	color: #222
}
.setting_area .head2{font-size: 14px}
.custom_sep {
	height: 36px;
	font-size: 13px;
}
.setting_area input{
  height: 36px;
  font-size: 13px;
}
.setting_area input::placeholder {
    font-weight: 600;
    color: #222;
}
@media only screen and (max-width: 767px) {
  .upload_option .label_upload span {display: block;}
  .upload_btns.img_gdrive{width: 30px;background-position: center;}
  .upload_btns.img_gdrive span{display: none;}
  .top_uploading .mmt{margin-top: 35px !important}
}
#zip_name[contenteditable]{
  border: 1px solid;
  padding: 0px 5px;
}
#preview .img_box1{position:relative}
#preview .img_box .del_preview{
  position: absolute;
  background-color: #2022237d;
  top: 0px;
  display: block;
  width: 100%;
  height: 100%;
  padding: 3px;
  text-align: right;
  display: none;
  left:0px
}
#preview .img_box:hover .del_preview{display:block}
#preview .img_box .del_preview span{
  background-image: url('../webimages/image-cros.svg');
  background-repeat: no-repeat;
  background-position: top right;
  height: 20px;
  width: 20px;
  display: inline-block;
  cursor: pointer;
}

:root{
    --bg:#F5F7FA;
    --card:#FFFFFF;
    --border:#E3E7ED;
    --border-strong:#CBD2DC;
    --text:#161A22;
    --text-2:#667085;
    --text-3:#98A2B3;
    --accent:#3457D5;
    --accent-dark:#25409E;
    --accent-tint:#EDF1FE;
    --success:#0F9D58;
    --success-tint:#E7F7EE;
    --radius:14px;
    --radius-sm:8px;
  }
  .wrap{max-width:600px; margin:0 auto;}
  .eyebrow{
    display:flex; align-items:center; gap:8px;
    font-family:'JetBrains Mono', monospace;
    font-size:12px; letter-spacing:0.04em; text-transform:uppercase;
    color:var(--text-3); margin-bottom:10px;
  }
  .eyebrow .dot{width:6px; height:6px; border-radius:50%; background:var(--accent);}
  h1{
    font-family:'Space Grotesk', sans-serif;
    font-weight:600;
    font-size:30px;
    letter-spacing:-0.01em;
    margin-bottom:8px;
  }
  .sub{color:var(--text-2); font-size:15px; margin-bottom:36px; max-width:440px;}

  .card{
    background:var(--card);
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:28px;
  }

  /* dropzone */
  .dropzone{
    border:1.5px dashed var(--border-strong);
    border-radius:var(--radius-sm);
    padding:40px 20px;
    text-align:center;
    cursor:pointer;
    transition:border-color .15s ease, background .15s ease;
    position:relative;
    background-color: #fff;
  }
  .dropzone:hover, .dropzone.drag{
    border-color:var(--accent);
    background:var(--accent-tint);
  }
  .dropzone input{position:absolute; inset:0; opacity:0; cursor:pointer;}
  .dz-icon{
    width:44px; height:44px; margin:0 auto 14px;
    border-radius:50%;
    background:var(--accent-tint);
    display:flex; align-items:center; justify-content:center;
    color:var(--accent);
  }
  .dz-title{font-size:15px; font-weight:500; margin-bottom:4px;}
  .dz-sub{font-size:13px; color:var(--text-3);}
  .dz-sub b{color:var(--text-2); font-weight:500;}

  /* file row (shown after upload) */
  .filerow{
    display:none;
    align-items:center;
    gap:14px;
    padding:14px;
    background:var(--bg);
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
  }
  .filerow.show{display:flex;}
  .thumb{
    width:52px; height:52px; border-radius:8px;
    object-fit:cover; border:1px solid var(--border); flex-shrink:0;
    background:#eee;
  }
  .finfo{flex:1; min-width:0;}
  .fname{
    font-family:'JetBrains Mono', monospace;
    font-size:13px; font-weight:500;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .fmeta{font-size:12px; color:var(--text-3); margin-top:2px; display:flex; gap:8px; align-items:center;}
  .fmt-badge{
    font-family:'JetBrains Mono', monospace;
    font-size:10.5px; font-weight:500;
    padding:2px 6px; border-radius:5px;
    background:var(--accent-tint); color:var(--accent-dark);
  }
  .remove-btn{
    width:28px; height:28px; border-radius:50%;
    border:none; background:transparent; color:var(--text-3);
    cursor:pointer; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    transition:background .15s ease, color .15s ease;
  }
  .remove-btn:hover{background:#FBEAEA; color:#C0392B;}

  /* format picker */
  .section-label{
    font-size:12.5px; font-weight:500; color:var(--text-2);
    margin:26px 0 12px;
    display:flex; align-items:center; gap:8px;
  }
  .convert-visual{
    display:flex; align-items:center; gap:10px; margin-bottom:14px;
  }
  .from-badge{
    font-family:'JetBrains Mono', monospace;
    font-size:12.5px; font-weight:500;
    padding:6px 12px; border-radius:8px;
    background:var(--bg); border:1px solid var(--border); color:var(--text-2);
  }
  .arrow{color:var(--text-3);}
  .to-preview{
    font-family:'JetBrains Mono', monospace;
    font-size:12.5px; font-weight:600;
    padding:6px 12px; border-radius:8px;
    background:var(--accent-tint); color:var(--accent-dark);
    border:1px solid transparent;
  }

  .chip-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(96px, 1fr));
    gap:8px;
  }
  .chip{
    border:1px solid var(--border);
    background:var(--card);
    border-radius:10px;
    padding:11px 10px;
    display:flex; flex-direction:column; align-items:flex-start; gap:6px;
    cursor:pointer;
    font-family:'Inter', sans-serif;
    transition:border-color .12s ease, background .12s ease, transform .08s ease;
  }
  .chip:hover{border-color:var(--border-strong); transform:translateY(-1px);}
  .chip.active{
    border-color:var(--accent);
    background:var(--accent-tint);
    box-shadow:0 0 0 1px var(--accent);
  }
  .chip-ext{
    font-family:'JetBrains Mono', monospace;
    font-size:12px; font-weight:600;
    padding:2px 6px; border-radius:5px;
  }
  .chip-label{font-size:11px; color:var(--text-2);}
  .chip.active .chip-label{color:var(--accent-dark);}

  .ext-jpg{background:#FEF2E7; color:#B5590A;}
  .ext-png{background:#E9F0FE; color:#2A5AC7;}
  .ext-webp{background:#F3EBFB; color:#7B3FC4;}
  .ext-gif{background:#FFF4F0; color:#D35400;}
  .ext-heic{background:#E6F7F3; color:#0E8C6E;}
  .ext-avif{background:#FDEAF0; color:#C13D71;}

  .more-toggle{
    background:none; border:none; color:var(--accent);
    font-size:13px; font-weight:500; cursor:pointer;
    margin-top:12px; padding:0;
  }
  .hidden-chips{display:none;}
  .hidden-chips.show{display:contents;}

  /* action area */
  .action{margin-top:28px;}
  .convert-btn{
    width:100%;
    background:var(--accent);
    color:#fff;
    border:none;
    border-radius:var(--radius-sm);
    padding:14px;
    font-family:'Inter', sans-serif;
    font-size:15px; font-weight:600;
    cursor:pointer;
    display:flex; align-items:center; justify-content:center; gap:8px;
    transition:background .15s ease;
  }
  .convert-btn:hover{background:var(--accent-dark);}
  .convert-btn:disabled{background:#C7CEDB; cursor:not-allowed;}

  .progress-wrap{display:none; margin-top:12px;}
  .progress-wrap.show{display:block;}
  .progress-track{
    height:6px; background:var(--border); border-radius:3px; overflow:hidden;
  }
  .progress-bar{
    height:100%; width:0%; background:var(--accent); border-radius:3px;
    transition:width .25s ease;
  }
  .progress-label{font-size:12px; color:var(--text-3); margin-top:8px; text-align:center;}

  .result{
    display:none;
    margin-top:12px;
    align-items:center; gap:14px;
    padding:14px;
    background:var(--success-tint);
    border:1px solid #BFE8D2;
    border-radius:var(--radius-sm);
  }
  .result.show{display:flex;}
  .result-icon{
    width:36px; height:36px; border-radius:50%;
    background:#fff; color:var(--success);
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
  }
  .result-text{flex:1; min-width:0;}
  .result-title{font-size:13.5px; font-weight:500; color:#0B6B3D;}
  .result-sub{font-size:12px; color:#3F8F68; font-family:'JetBrains Mono', monospace; margin-top:1px;}
  .download-btn{
    background:#fff; border:1px solid #BFE8D2; color:#0B6B3D;
    border-radius:8px; padding:8px 14px;
    font-size:13px; font-weight:500; cursor:pointer;
    display:flex; align-items:center; gap:6px;text-decoration:none !important;
  }

  svg{display:block;}

  /* download button loader */
  .download-btn.disabled{opacity:0.7; cursor:not-allowed;}
  .spin{
    animation: spin 0.8s linear infinite;
  }
  @keyframes spin{
    from{transform:rotate(0deg);}
    to{transform:rotate(360deg);}
  }

  /* responsive result/download section */
  @media only screen and (max-width: 767px) {
    .result{
      flex-direction: column;
      text-align: center;
      gap: 10px;
      padding: 16px 12px;
    }
    .result-icon{
      margin: 0 auto;
    }
    .result-text{
      width: 100%;
      text-align: center;
    }
    .result-title{
      font-size: 14px;
    }
    .result-sub{
      font-size: 12px;
      margin-top: 4px;
    }
    .download-btn{
      width: 100%;
      justify-content: center;
      padding: 12px 14px;
      font-size: 14px;
    }
    .download-btn #downloadBtnLoader{
      justify-content: center;
    }
  }