/*  
Property by JadiPDF/SafarWeb/Safar Corporation
(C) 2025.09 SafarWeb/Safar Corporation, Fathur Maeza
Do not copying this styles, this styles and/or of all its contents is
copyrighted, and protected by law. 
*/

/* L */
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: #f4f6f8;
  margin: 0;
  padding: 20px;
  transition: ease-in 0.3s;
}



/*=====================*/
.branding-logo {
  width: 40px;
  height: 40px;
}

.dark-mode-toggle {
  display: block;
  margin: 10px 0 20px;
  color:black;
}

.container {
  max-width: 920px;
  min-width: 480px;
  margin: 45px auto 0 auto;
  background: #fff;
  padding: 18px;
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(15,23,42,0.06);
  transition: ease-in 0.3s;
}

h1 {   transition: ease-in 0.3s;margin: 0 0 12px; font-size: 20px; }
.version {   transition: ease-in 0.3s;font-size: 12px; color: #666; margin-left: 6px;  transition: ease-in 0.3s;}

.drop-area {
  border: 2px dashed #cbd5e1;
  padding: 28px;
  text-align: center;
  border-radius: 8px;
  margin-bottom: 14px;
  cursor: pointer;
  background: #fcfcfc;
  color: black;
  transition: ease-in 0.3s;
}
.drop-area.highlight { border-color:#10b981; background:#f0fff7; }
.upload-icon {
  font-size: 48px;
  color: #2b2b2b;
  margin-bottom: 12px;
  transition: ease-in 0.3s;
}
.global-settings { margin-bottom: 12px; }
.global-settings label {   transition: ease-in 0.3s; display:block; margin-top:10px; }

#customSize label {   transition: ease-in 0.3s; margin-right: 10px; }

.preview-list { display:flex; flex-direction:column; gap:10px; margin-top: 8px; }

.preview-item {
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px;
  background:#fafafa;
  border:1px solid #e6eef6;
  border-radius:8px;
  cursor: grab;
  transition: ease-in 0.3s;
}
.preview-item:active { cursor: grabbing; }
.preview-item img { width:110px; height:auto; object-fit:cover; border-radius:6px; border:1px solid #ddd; }

.preview-controls { flex: 1; display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.preview-controls label {   transition: ease-in 0.3s;display:flex; gap:6px; align-items:center; }

.btn {
  padding: 10px 14px;
  background: #760f0f;
  color: white;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  transition: ease-in 0.3s;
}
.btn.secondary {   transition: ease-in 0.3s; background:#fce6e6; color:#760f0f; border:1px solid rgba(118, 15, 15, 0.12); }
.btn:active { transform: translateY(1px); }

/* dark mode */
body.dark {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: #1e1e1e;
  margin: 0;
  padding: 20px;
  transition: ease-in 0.3s;
}

body.dark .dark-mode-toggle {
  display: block;
  margin: 10px 0 20px;
  color:white;
  transition: ease-in 0.3s;
}

body.dark .container {
  max-width: 920px;
  min-width: 480px;
  margin: 45px auto 0 auto;
  background: #383838;
  padding: 18px;
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(15,23,42,0.06);
  transition: ease-in 0.3s;
}

body.dark h1 {  transition: ease-in 0.3s; margin: 0 0 12px; font-size: 20px; color: #ffffff;}
body.dark .version {   transition: ease-in 0.3s; font-size: 12px; color: #c4c4c4; margin-left: 6px; }

body.dark .drop-area {
  border: 2px dashed #cbd5e1;
  padding: 28px;
  text-align: center;
  border-radius: 8px;
  margin-bottom: 14px;
  cursor: pointer;
  background: #757575;
  color: white;
  transition: ease-in 0.3s;
}
body.dark .drop-area.highlight {  transition: ease-in 0.3s;  border-color:#10b981; background:#85d3a9; }
body.dark .upload-icon {
  font-size: 48px;
  color: #ffffff;
  margin-bottom: 12px;
  transition: ease-in 0.3s;
}
body.dark .global-settings { margin-bottom: 12px; }
body.dark .global-settings label {  transition: ease-in 0.3s; color: #ffffff; display:block; margin-top:10px; }

#customSize label { margin-right: 10px; }

body.dark .preview-list { display:flex; flex-direction:column; gap:10px; margin-top: 8px; }

body.dark .preview-item {
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px;
  background:#757575;
  border:1px solid #969696;
  border-radius:8px;
  cursor: grab;
  transition: ease-in 0.3s;
}
body.dark .preview-item:active { cursor: grabbing; }
body.dark .preview-item img { width:110px; height:auto; object-fit:cover; border-radius:6px; border:1px solid #ddd; }

body.dark .preview-controls { flex: 1; display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
body.dark .preview-controls label {   transition: ease-in 0.3s; color: white; display:flex; gap:6px; align-items:center; }

body.dark .btn {
  padding: 10px 14px;
  background: #760f0f;
  color: white;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  transition: ease-in 0.3s;
}
body.dark .btn.secondary {   transition: ease-in 0.3s; background:#fce6e6; color:#760f0f; border:1px solid rgba(118, 15, 15, 0.12); }
body.dark .btn:active { transform: translateY(1px); }