:root { 
  --text: #1e293b; 
  --muted: #64748b; 
  --border: #cbd5e1; 
  --card: #f8fafc; 
  --bg: #e2e8f0; 
  --text-secondary: #334155;
  --muted-strong: #475569;
}
@media (prefers-color-scheme: dark) {
  :root { 
    --text: #f8fafc; 
    --muted: #cbd5e1; 
    --border: #475569; 
    --card: #1e293b; 
    --bg: #0f172a; 
    --text-secondary: #e2e8f0;
    --muted-strong: #94a3b8;
  }
}
:root[data-theme="dark"]  { 
  --text: #f8fafc; 
  --muted: #cbd5e1; 
  --border: #475569; 
  --card: #1e293b; 
  --bg: #0f172a; 
  --text-secondary: #e2e8f0;
  --muted-strong: #94a3b8;
}
:root[data-theme="light"] { 
  --text: #1e293b; 
  --muted: #64748b; 
  --border: #cbd5e1; 
  --card: #f8fafc; 
  --bg: #e2e8f0; 
  --text-secondary: #334155;
  --muted-strong: #475569;
}

/* Force card background in light mode */
:root[data-theme="light"] .card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

:root[data-theme="light"] .header-description {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--text); font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial; }
header { padding:24px 16px; max-width:1100px; margin:0 auto; }
.header-description { 
  background: var(--card); 
  color: var(--text); 
  padding: 20px; 
  border-radius: 8px; 
  margin: 16px 0; 
  text-align: center; 
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
h1 { 
  margin: 0 0 12px 0; 
  font-size: 48px; 
  font-weight: 800; 
  text-align: center;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: white;
  text-shadow: 0 3px 6px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.2);
  position: relative;
}
.muted{ color:var(--muted); }
.csp-health-style { font-size: 12px; margin-top: 8px; }

/* Header controls - Compact Tab Bar Style */
.header-controls-wrapper {
  display: flex; 
  justify-content: center;
  margin-top: 16px;
}

.header-controls { 
  background: rgba(255, 255, 255, 0.1);
  padding: 6px;
  border-radius: 30px;
  backdrop-filter: blur(10px);
  display: inline-flex;
  align-items: center; 
  gap: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Dark mode adjustment */
:root[data-theme="dark"] .header-controls {
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Light mode adjustment */
:root[data-theme="light"] .header-controls {
  background: rgba(255, 255, 255, 0.3);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Debug toggle button */
.debug-toggle {
  background: var(--muted) !important;
  color: var(--card) !important;
  border: 1px solid var(--muted) !important;
  font-size: 12px !important;
  padding: 6px 12px !important;
  min-width: auto !important;
  border-radius: 6px !important;
  transition: all 0.2s ease !important;
}

/* Force Save button to be visible */
#dl.force-visible {
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Force note message to be visible */
#out-note.force-visible {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.debug-toggle:hover:not(:disabled) {
  background: var(--text) !important;
  border-color: var(--text) !important;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.debug-toggle.active {
  background: #3b82f6 !important;
  border-color: #3b82f6 !important;
  color: white !important;
}

.debug-toggle.active:hover:not(:disabled) {
  background: #2563eb !important;
  border-color: #2563eb !important;
}

.container { max-width:1100px; margin: 0 auto 32px; padding: 0 16px; }
.row { display:flex; gap:16px; flex-wrap:wrap; align-items:flex-start; min-width:0; }
.top-controls { 
  display: grid !important; 
  grid-template-rows: auto auto auto !important; 
  grid-template-columns: 1fr !important;
  gap: 4px !important; 
  align-items: start !important; 
  width: 100% !important;
}

/* Firefox-specific grid override */
@supports (-moz-appearance: none) {
  .top-controls {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }
  
  .buttons-row {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    order: 2 !important;
  }
}

.hint-row {
  grid-row: 1 !important;
  grid-column: 1 !important;
}

.buttons-row {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  grid-row: 2 !important;
  grid-column: 1 !important;
}


.scaling-controls-row {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  grid-row: 3 !important;
  grid-column: 1 !important;
}

.card { background:var(--card); border:1px solid var(--border); border-radius:14px; padding:16px; }
label { font-size:12px; color:var(--muted-strong); display:block; margin-bottom:4px; font-weight:500; }

/* Convert to label styling */

select, button, a.btn { 
  border:1px solid var(--border); 
  border-radius:10px; 
  padding:10px 12px; 
  font-size:14px; 
  background:var(--card); 
  color:var(--text);
  transition: all 0.2s ease;
}

select:hover {
  border-color:#94a3b8;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

select:focus {
  outline: none;
  border-color:#3b82f6;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
  transform: translateY(-1px);
}

/* Dropdown white background with dark text */

button { 
  background:#111827; 
  color:#fff; 
  cursor:pointer; 
  min-width: 80px;
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
  border: 1px solid #111827;
}
button:hover:not(:disabled) { 
  background:#1f2937; 
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(17, 24, 39, 0.3);
}

/* Dropdown and Convert button group - Stacked layout for all screen sizes */

/* Convert section - center in the card */

/* Hide dropdown group initially */


/* Convert button styling */

button:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(17, 24, 39, 0.2);
}
button:disabled { 
  background:#9ca3af; 
  cursor:not-allowed; 
  transform: none;
  box-shadow: none;
}


a.btn { 
  text-decoration:none; 
  color:#111827 !important; 
  background:#ffffff !important;
  min-width: 80px;
  text-align: center;
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
}
a.btn:hover {
  background:#f3f4f6 !important;
  color:#111827 !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
a.btn:active {
  background:#ffffff !important;
  color:#111827 !important;
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}
.actions-row { display:flex; gap:8px; align-items:center; flex-wrap:nowrap; }
/* Put the select + button on one line */


/* Keep the label inline with the select */

/* Ensure scaling-row keeps its flexbox settings */

/* Ensure scaling-option stays as flex column */

/* Make the select reasonably wide but flexible */


/* Clear button should align to the right on the same row */

/* Show clear button when file is uploaded */

#clear:hover {
  background: #c82333 !important;
  border-color: #c82333 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 8px rgba(220, 53, 69, 0.3) !important;
}

#clear:active {
  transform: translateY(0) !important;
  box-shadow: 0 1px 4px rgba(220, 53, 69, 0.4) !important;
}


/* Scaling controls - centered under dropdown */
.scaling-row { 
  display:flex; 
  gap:8px; 
  align-items:flex-end; 
  flex-wrap:nowrap; 
  justify-content: center !important; 
}
.scaling-option { display:flex; flex-direction:column; }

#scaling-controls {
  text-align: center !important;
  width: 100% !important;
}

/* Mobile override for scaling controls - COMPREHENSIVE VIEWPORT APPROACH */
@media screen and (max-width: 768px) {
  /* Mobile scaling controls - now inside dropdown group */
  #scaling-controls {
    width: 95% !important;
    max-width: 280px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
    padding: 0 10px !important;
  }
  
  #scaling-controls .scaling-row {
    justify-content: center !important;
    display: flex !important;
    gap: 6px !important;
    flex-wrap: nowrap !important;
  }
  
  .dropdown-convert-group #scaling-controls .scaling-option input {
    width: 50px !important;
    font-size: 0.85em !important;
    text-align: center !important;
    flex-shrink: 0 !important;
  }
  
  /* Center ALL buttons and controls with consistent alignment */
  .convert-section.visible {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
  }
  
  .dropdown-convert-group {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
  }
  
  .dropdown-convert-group > div {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
  }
  
  /* Force ALL buttons to exact same width and centering */
  #target,
  #go,
  #clear {
    width: 250px !important;
    min-width: 250px !important;
    max-width: 250px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: block !important;
  }
  
  /* Ensure Clear button is perfectly centered like the others */
  .convert-section #clear {
    align-self: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  
  .scaling-row { 
    justify-content: center !important; 
    flex-wrap: nowrap !important;
    gap: 8px !important;
    display: flex !important;
    flex-direction: row !important; /* Force horizontal layout */
    align-items: flex-end !important;
  }
  
  /* Force all scaling options to be visible and horizontal */
  .scaling-row .scaling-option {
    display: flex !important;
    flex-direction: column !important;
    flex-shrink: 0 !important;
    min-width: 60px !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  
  /* Specifically target all three scaling options by ID */
  #scale-percent, #scale-width, #scale-height {
    display: block !important;
    visibility: visible !important;
  }
  
  /* Target the parent divs of the inputs */
  .scaling-option:nth-child(1),
  .scaling-option:nth-child(2), 
  .scaling-option:nth-child(3) {
    display: flex !important;
    visibility: visible !important;
  }
  
  .scaling-row .scaling-option input {
    width: 50px !important;
    font-size: 0.8em !important;
  }
  
  .scaling-row .scaling-option label {
    font-size: 0.7em !important;
    white-space: nowrap !important;
  }
  
  /* Override any conflicting styles */
  .scaling-controls-row > #scaling-controls {
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: center !important;
  }
}

/* Additional mobile-specific rules for very small screens */
/* Large buttons for screens above 280px */
@media screen and (min-width: 281px) {
  #target,
  #go,
  #clear {
    width: 250px !important;
    min-width: 250px !important;
    max-width: 250px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: block !important;
    font-size: 1em !important;
    padding: 8px 16px !important;
  }
}

@media screen and (max-width: 480px) and (min-width: 281px) {
  /* Override for 281px-480px range - keep large buttons */
  #target,
  #go,
  #clear {
    width: 250px !important;
    min-width: 250px !important;
    max-width: 250px !important;
    font-size: 1em !important;
    padding: 8px 16px !important;
  }
  
  /* Shrink scaling controls container to match buttons */
  #scaling-controls {
    width: 200px !important;
  }
  
  .scaling-row { 
    justify-content: center !important; 
    flex-wrap: nowrap !important;
    gap: 4px !important;
    display: flex !important;
  }
  
  /* Make scaling inputs even smaller for tiny screens */
  .scaling-row .scaling-option input {
    width: 40px !important;
    font-size: 0.75em !important;
    padding: 4px !important;
  }
  
  .scaling-row .scaling-option label {
    font-size: 0.65em !important;
  }
  
  /* Reduce container padding for small screens */
  .container {
    padding: 0 8px !important;
  }
  
  .card {
    padding: 12px !important;
  }
}

/* Extra small screens (< 360px) - like older iPhones */
@media screen and (max-width: 360px) and (min-width: 281px) {
  /* Large buttons for 281px-360px range */
  #target,
  #go,
  #clear {
    width: 250px !important;
    min-width: 250px !important;
    max-width: 250px !important;
    font-size: 1em !important;
    padding: 8px 16px !important;
  }
  
  #scaling-controls {
    width: 90% !important;
    max-width: 280px !important;
    margin: 0 auto !important;
  }
  
  .scaling-row .scaling-option input {
    width: 45px !important;
    font-size: 0.8em !important;
    padding: 4px !important;
  }
  
  .scaling-row .scaling-option label {
    font-size: 0.75em !important;
  }
  
  .scaling-row {
    gap: 6px !important;
    justify-content: center !important;
  }
}

/* Ultra small screens (< 320px) - very old phones */
@media screen and (max-width: 320px) and (min-width: 281px) {
  /* Large buttons for 281px-320px range */
  #target,
  #go,
  #clear {
    width: 250px !important;
    min-width: 250px !important;
    max-width: 250px !important;
    font-size: 1em !important;
    padding: 8px 16px !important;
  }
  
  #scaling-controls {
    width: 90% !important;
    max-width: 140px !important;
  }
  
  .scaling-row .scaling-option input {
    width: 18px !important;
    font-size: 0.5em !important;
    padding: 1px !important;
  }
  
  .scaling-row .scaling-option label {
    font-size: 0.4em !important;
    white-space: nowrap !important;
  }
  
  .scaling-row {
    gap: 1px !important;
  }
  
  /* Force scaling options to be ultra-compact */
  .scaling-row .scaling-option {
    min-width: 20px !important;
    flex-shrink: 1 !important;
  }
  
  .container {
    padding: 0 2px !important;
  }
  
  .card {
    padding: 6px !important;
  }
}

/* Larger buttons for screens 281px and above - handled by other breakpoints */
/* Minimum supported viewport: 320px (iPhone 5/SE) */

.scaling-option input { 
  width: 80px; 
  border:1px solid var(--border); 
  border-radius:6px; 
  padding:6px 8px; 
  font-size:13px; 
  background:#ffffff;
  color:#000000;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease;
}
.scaling-option input:focus { 
  outline:none; 
  border-color:#3b82f6; 
  box-shadow:0 0 0 2px rgba(59, 130, 246, 0.1);
  transform: translateY(-1px);
}
.scaling-option input:hover {
  border-color:#94a3b8;
  transform: translateY(-1px);
}

/* Smooth scaling controls animation */
#scaling-controls {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.3s ease-out, opacity 0.3s ease-out, margin 0.3s ease-out;
  margin-top: 0;
  text-align: right;
  width: 100%;
  display: block;
}

#scaling-controls.visible {
  max-height: 100px;
  opacity: 1;
  margin-top: 8px;
}



.error { background:#fef2f2; border:1px solid #fecaca; color:#991b1b; padding:10px; border-radius:10px; font-size:13px; display:none; margin-top:10px;}
.note { background:#eef2ff; border:1px solid #c7d2fe; color:#1e3a8a; padding:10px; border-radius:10px; font-size:13px; display:none; margin-top:10px;}
.status { margin-top: 8px; color:var(--text-secondary); white-space:pre-wrap; font-weight:500; }

.hint-col { min-width:200px; max-width:480px; margin-right: 30px; word-wrap: break-word; overflow-wrap: break-word; }

/* Reduce margin when convert section is hidden */
.top-controls.convert-hidden .hint-col {
  margin-right: 0;
}
.hint-line { margin:0 0 8px 0; }
.hint-caption { margin:0 0 8px 0; color:var(--text-secondary); font-size:13px; font-weight:500; }
.hint-size { margin:8px 0 0 0; font-size:12px; color:var(--muted-strong); }

/* Specific spacing for file size limits */
.hint-size.muted {
  margin: 8px 0 0 0 !important;
}

.grid { display:grid; grid-template-columns: 1fr 1fr; gap:16px; }

/* Stack preview cards on medium screens and below */
@media (max-width: 900px) {
  .grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
}

.meta-row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin:6px 0 10px; }
.meta-label { font-size:12px; color:var(--muted-strong); font-weight:500; }
.chip{ font-size:12px; color:var(--muted-strong); border:1px solid var(--border); padding:3px 8px; border-radius:999px; background:var(--card); font-weight:500; }

/* Previews */
.preview { 
  border:1px solid var(--border); 
  border-radius:12px; 
  height:420px; 
  display:flex; 
  align-items:center; 
  justify-content:center; 
  overflow:hidden; /* Keep images contained when not zoomed */
  background: #e0e2e5; 
  transition: all 0.3s ease;
  opacity: 1;
  transform: translateY(0);
}

/* Allow overflow only when an image is zoomed */
.preview:has(img.zoomed) {
  overflow: visible;
  z-index: 9998;
}
.preview iframe, .preview object { width:100%; height:100%; border:0; object-fit:contain; background: #e0e2e5; }
.preview img { 
  max-width: 100%; 
  max-height: 100%; 
  width: auto; 
  height: auto; 
  border: 0; 
  object-fit: contain; 
  background: #e0e2e5; 
} /* Allow images to scale properly and grow when zoomed */

/* HTML preview iframe content styling */
.preview iframe {
  background: #ffffff !important;
  /* Force light background for HTML content */
}

/* HTML previews use the same size as other preview types */
.preview#in-embed, .preview#out-embed {
  height: 420px !important;
  min-height: 420px !important;
  max-height: 420px !important;
}

/* Ensure both input and output HTML previews are exactly the same size */
#in-embed, #out-embed {
  height: 420px !important;
  min-height: 420px !important;
  max-height: 420px !important;
}

/* Ensure both input and output PDF previews are exactly the same size */
#in-pdf, #out-pdf {
  height: 420px !important;
  min-height: 420px !important;
  max-height: 420px !important;
}
.preview-text { 
  width:100%; 
  height:420px; 
  border:1px solid var(--border); 
  border-radius:12px; 
  padding:10px; 
  background: #e0e2e5 !important; 
  color: #1a202c !important; 
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace; 
  white-space: pre; 
  overflow: auto; 
}

/* Ensure text previews are always readable - FORCE override all theme variables */
textarea#in-text,
textarea#out-text {
  background: #e0e2e5 !important;
  color: #1a202c !important;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace !important;
  -webkit-text-fill-color: #1a202c !important; /* Safari/Chrome fix */
}

/* Also ensure dark mode doesn't override text preview colors */
:root[data-theme="dark"] textarea#in-text,
:root[data-theme="dark"] textarea#out-text {
  background: #e0e2e5 !important;
  color: #1a202c !important;
  -webkit-text-fill-color: #1a202c !important;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) textarea#in-text,
  :root:not([data-theme="light"]) textarea#out-text {
    background: #e0e2e5 !important;
    color: #1a202c !important;
    -webkit-text-fill-color: #1a202c !important;
  }
}

.placeholder { 
  border:1px dashed var(--border); 
  border-radius:12px; 
  min-height:420px; 
  display:flex; 
  align-items:center; 
  justify-content:center; 
  background: #f7f8f9; 
  color:var(--muted); 
  position:relative; 
  cursor:pointer; 
  transition: all 0.3s ease;
  opacity: 1;
  transform: translateY(0);
}

/* Output placeholder should not be clickable */
#out-ph.placeholder { cursor: default; }

/* Ensure placeholder doesn't take up space when hidden */
.placeholder[style*="display: none"] {
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}

/* When placeholder is hidden, make it completely invisible and take no space */
.placeholder.hidden {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}

/* Firefox-specific fixes for placeholder spacing and button layout */
@-moz-document url-prefix() {
  /* Fix placeholder spacing in Firefox */
  .placeholder[style*="display: none"] {
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    overflow: hidden !important;
    visibility: hidden !important;
  }
  
  .placeholder.hidden {
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    overflow: hidden !important;
    visibility: hidden !important;
  }
  
  /* Firefox-specific input area spacing fixes */
  .placeholder {
    min-height: 0 !important;
    height: auto !important;
  }
  
  .placeholder:not([style*="display: none"]):not(.hidden) {
    min-height: 420px !important;
  }
  
  /* Fix Firefox flexbox spacing issues */
  .row {
    align-items: flex-start !important;
    min-height: 0 !important;
  }
  
  .top-controls {
    align-items: flex-start !important;
    min-height: 0 !important;
  }
  
  .hint-col {
    min-height: 0 !important;
    height: auto !important;
  }
  
  
  
  /* Firefox-specific input preview area fixes */
  .preview {
    min-height: 0 !important;
    height: auto !important;
  }
  
  /* Minimal Firefox image fixes - only essential rules */
  .preview img {
    vertical-align: top !important;
  }
  
  /* Fix Firefox flexbox height calculation */
  .card {
    min-height: 0 !important;
  }
  
  /* Firefox placeholder hiding - minimal approach */
  .placeholder[style*="display: none"],
  .placeholder.hidden {
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    overflow: hidden !important;
  }
  
  /* Fix button bunching in Firefox */
  .convert-section {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    flex-wrap: nowrap !important;
  }
  
  /* Firefox-specific fix for button positioning - use user agent detection */
  .convert-section {
    -moz-box-pack: center !important;
    -moz-box-align: center !important;
  }
  
  /* Alternative Firefox fix using CSS that Firefox handles differently */
  @supports (-moz-appearance: none) {
    .buttons-row {
      justify-content: center !important;
      align-items: center !important;
    }
    
    .buttons-row .convert-section {
      margin-left: 0 !important;
      margin-right: 0 !important;
      justify-content: center !important;
      align-self: center !important;
      width: auto !important;
      flex: none !important;
      max-width: none !important;
    }
    
    .dropdown-convert-group {
      display: flex !important;
      flex-direction: row !important;
      align-items: center !important;
      justify-content: center !important;
      width: auto !important;
      margin: 0 auto !important;
      gap: 10px !important;
      flex-wrap: wrap !important;
    }
    
    .dropdown-convert-group > div {
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      gap: 8px !important;
    }
    
    .dropdown-convert-group button {
      width: auto !important;
      min-width: 100px !important;
      margin: 0 !important;
      vertical-align: middle !important;
    }
    
    .dropdown-convert-group #go,
    .dropdown-convert-group #clear {
      display: inline-block !important;
      margin: 0 5px !important;
    }
  }
  
  .dropdown-convert-group {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    flex-shrink: 0 !important;
    order: 1 !important;
  }
  
  #clear {
    margin-left: 0 !important;
    align-self: flex-end !important;
    flex-shrink: 0 !important;
    order: 2 !important;
    height: fit-content !important;
  }
  
  /* Ensure proper spacing in Firefox */
  .hint-col {
    margin-right: 30px !important;
  }
  
  .top-controls.convert-hidden .hint-col {
    margin-right: 0 !important;
  }
  
  /* Smart Presets Info Icon - Enhanced for top right position */
  

  /* Firefox mobile responsive fixes */
  @media (max-width: 768px) {
    .convert-section.visible {
      display: flex !important;
      flex-direction: column !important;
      align-items: stretch !important;
      justify-content: flex-start !important;
      gap: 8px !important;
    }
    
    .dropdown-convert-group {
      flex-direction: column !important;
      align-items: stretch !important;
      gap: 8px !important;
      width: 100% !important;
    }
    
    #clear {
      margin-left: 0 !important;
      width: 100% !important;
      order: 1 !important;
      align-self: stretch !important;
    }
  }
  
  @media (max-width: 480px) {
    .convert-section.visible {
      display: flex !important;
      flex-direction: column !important;
      align-items: stretch !important;
      gap: 8px !important;
    }
    
    .dropdown-convert-group {
      flex-direction: column !important;
      align-items: stretch !important;
      gap: 8px !important;
      width: 100% !important;
    }
    
    #clear {
      margin-left: 0 !important;
      width: 100% !important;
      order: 1 !important;
      align-self: stretch !important;
    }
    
    /* Extra small mobile scaling controls - even more compact */
    #scaling-controls .scaling-row {
      gap: 6px !important;
    }
    
    #scaling-controls .scaling-option input {
      width: 55px !important;
      font-size: 0.85em !important;
    }
    
    #scaling-controls .scaling-option label {
      font-size: 0.75em !important;
    }
    
    .hint-col {
      margin-right: 0 !important;
    }
  }
}
.placeholder .ph-inner { text-align:center; pointer-events:none; }
.placeholder .ph-inner p { margin:10px 0 0; font-size:14px; }
#in-ph:focus { outline:2px solid var(--border); outline-offset:3px; }

:root[data-theme="dark"] .placeholder svg { color:#94a3b8; }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .placeholder svg { color:#94a3b8; } }

/* Spinner injected by JS uses .spinner class */
.spinner {
  width: 20px;
  height: 20px;
  border: 2px solid var(--border);
  border-top: 2px solid #3b82f6;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

 

/* Converting Animation within placeholder */
.ph-converting {
  text-align: center;
  padding: 40px 20px;
}

.ph-converting .spinner {
  width: 64px;
  height: 64px;
  border: 4px solid var(--border);
  border-top: 4px solid #3b82f6;
  border-radius: 50%;
  margin: 0 auto 24px;
  animation: spin 1s linear infinite;
}

.converting-text {
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 8px;
  animation: fadeInOut 2s ease-in-out infinite;
}

.converting-subtext {
  font-size: 14px;
  color: var(--muted);
  margin: 0;
  opacity: 0.7;
}

@keyframes fadeInOut {
  0%, 100% {
    opacity: 0.6;
  }
  50% {
    opacity: 1;
  }
}

/* Dark mode for converting animation */
body.dark-mode .ph-converting .spinner {
  border-color: var(--border);
  border-top-color: #60a5fa;
}

/* ===== Completion Modal Styles ===== */

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.completion-modal-backdrop {
  animation: fadeIn 0.3s ease !important;
}

.completion-modal {
  animation: slideUp 0.4s ease !important;
}

/* ===== Initial Upload Area Styles ===== */

.upload-drop-zone {
  border: 3px dashed var(--border);
  border-radius: 16px;
  padding: 60px 40px;
  transition: all 0.3s ease;
  cursor: pointer;
}

.upload-drop-zone:hover {
  border-color: #10b981;
  background: var(--bg);
  transform: translateY(-2px);
}

.upload-drop-zone.drag-over {
  border-color: #10b981;
  background: rgba(16, 185, 129, 0.1);
  transform: scale(1.02);
}

.upload-drop-zone svg {
  color: var(--muted);
  transition: color 0.3s;
}

.upload-drop-zone:hover svg {
  color: #10b981;
}

/* ===== Batch Processing Styles ===== */

.batch-section {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.batch-header {
  margin-bottom: 24px;
  text-align: center;
}

.batch-header h2 {
  margin: 0 0 8px 0;
  font-size: 1.8em;
  color: var(--text);
}

.batch-subtitle {
  margin: 0;
  font-size: 1em;
  color: var(--muted);
}

.batch-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding: 16px;
  background: var(--bg);
  border-radius: 8px;
  flex-wrap: wrap;
  gap: 16px;
}

.batch-control-info {
  flex: 1;
  min-width: 200px;
}

.batch-file-count {
  font-size: 1.1em;
  color: var(--text);
}

.batch-global-format {
  margin-bottom: 24px;
  padding: 16px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.batch-global-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 1em;
  font-weight: 500;
  color: var(--text);
  user-select: none;
}

.batch-global-checkbox input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

.batch-global-selector {
  margin-top: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.batch-global-selector label {
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}

.batch-global-selector select {
  flex: 1;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--card);
  color: var(--text);
  font-size: 1em;
  cursor: pointer;
  transition: border-color 0.2s;
}

.batch-global-selector select:focus {
  outline: none;
  border-color: #10b981;
}

.batch-item-controls {
  display: flex;
  gap: 8px;
  align-items: center;
  flex: 0 0 auto;
}

.batch-item-scaling {
  flex: 0 0 auto;
}

.batch-item-scaling-details {
  display: inline-block;
  position: relative;
}

.batch-item-scaling-details summary {
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 6px;
  transition: all 0.2s;
  user-select: none;
  list-style: none;
  border: 1px solid var(--border);
  background: var(--bg);
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.85em;
}

.batch-item-scaling-details summary::-webkit-details-marker {
  display: none;
}

.batch-item-scaling-details summary:hover {
  background: var(--card);
  border-color: #10b981;
}

.batch-item-metadata,
.batch-item-preview {
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 6px;
  transition: all 0.2s;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.85em;
}

/* Light mode button contrast improvements */
body:not(.dark-mode) .batch-item-metadata,
body:not(.dark-mode) .batch-item-preview {
  background: #ffffff;
  color: #1f2937;
  border-color: #d1d5db;
}

body:not(.dark-mode) .batch-item-metadata:hover {
  background: #eff6ff;
  border-color: #3b82f6;
  color: #1e40af;
}

body:not(.dark-mode) .batch-item-preview:hover {
  background: #ecfdf5;
  border-color: #10b981;
  color: #047857;
}

.batch-item-metadata:hover {
  background: var(--card);
  border-color: #3b82f6;
}

.batch-item-preview:hover {
  background: var(--card);
  border-color: #10b981;
}

.control-icon {
  font-size: 1.1em;
}

.control-label {
  font-weight: 500;
}

.batch-item-scaling-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: white;
  border-radius: 4px;
  font-size: 0.75em;
  font-weight: 600;
  margin-left: 8px;
  white-space: nowrap;
}

.batch-item-scaling-options {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 100;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  display: flex;
  gap: 8px;
  margin-top: 4px;
  min-width: 200px;
}

.batch-item-scaling-options input {
  width: 80px;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg);
  color: var(--text);
  font-size: 0.85em;
}

.batch-item-scaling-options input:focus {
  outline: none;
  border-color: #10b981;
}

.batch-progress {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 24px;
}

/* Overall status - just pulsing text, no bar */
.batch-overall-status {
  text-align: center;
  padding: 24px 0;
  margin-bottom: 16px;
}

.batch-overall-text {
  font-size: 1.4em;
  font-weight: 600;
  color: #3b82f6;
  animation: overallTextPulse 2.5s ease-in-out infinite;
  display: inline-block;
}

@keyframes overallTextPulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.25;
    transform: scale(0.97);
  }
}

@keyframes celebrationBounce {
  0% {
    transform: scale(0.3) rotate(-5deg);
    opacity: 0;
  }
  50% {
    transform: scale(1.15) rotate(2deg);
  }
  65% {
    transform: scale(0.95) rotate(-1deg);
  }
  80% {
    transform: scale(1.05) rotate(0.5deg);
  }
  100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}

.batch-stats {
  display: flex;
  gap: 24px;
  font-size: 0.95em;
  color: var(--muted);
}

.batch-stats strong {
  color: var(--text);
  font-weight: 700;
}

.batch-queue {
  max-height: 500px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  background: var(--bg);
  margin-bottom: 20px;
  position: relative; /* enable overlay positioning */
}

.batch-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: var(--card);
  border: 2px solid var(--border);
  border-radius: 8px;
  margin-bottom: 12px;
  transition: all 0.3s ease;
}

.batch-item:last-child {
  margin-bottom: 0;
}

.batch-item.converting {
  border-color: #3b82f6;
  background: rgba(59, 130, 246, 0.05);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.batch-item.completed {
  border-color: #10b981;
  background: rgba(16, 185, 129, 0.05);
}

.batch-item.skipped {
  border-color: #f59e0b;
  background: rgba(245, 158, 11, 0.05);
}

.batch-item.failed {
  border-color: #ef4444;
  background: rgba(239, 68, 68, 0.05);
}

.batch-item-icon {
  font-size: 28px;
  flex-shrink: 0;
  width: 40px;
  text-align: center;
}

.batch-item-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.batch-item-name {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text);
}

.batch-item-size {
  font-size: 0.85em;
  color: var(--muted);
}

/* Light mode - darker muted text for better contrast */
body:not(.dark-mode) .batch-item-size {
  color: #6b7280;
}

.batch-item-format-selector {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 140px;
}

.batch-item-format-selector label {
  font-size: 0.75em;
  color: var(--muted);
  font-weight: 500;
}

.batch-item-format-select {
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg);
  color: var(--text);
  font-size: 0.9em;
  cursor: pointer;
  transition: border-color 0.2s;
}

.batch-item-format-select:focus {
  outline: none;
  border-color: #3b82f6;
}

.batch-item-format-select:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.batch-item-progress {
  width: 150px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Activity indicator - animated dots instead of progress bar */
.batch-item-activity {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
}

.batch-item-activity-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--border);
  transition: all 0.3s ease;
}

/* Pending state - subtle dots */
.batch-item.pending .batch-item-activity-dot {
  background: var(--border);
  opacity: 0.4;
}

/* Converting state - wave animation */
.batch-item.converting .batch-item-activity-dot:nth-child(1) {
  background: #3b82f6;
  animation: dotWave 1.4s ease-in-out infinite;
}

.batch-item.converting .batch-item-activity-dot:nth-child(2) {
  background: #3b82f6;
  animation: dotWave 1.4s ease-in-out 0.2s infinite;
}

.batch-item.converting .batch-item-activity-dot:nth-child(3) {
  background: #3b82f6;
  animation: dotWave 1.4s ease-in-out 0.4s infinite;
}

.batch-item.converting .batch-item-activity-dot:nth-child(4) {
  background: #3b82f6;
  animation: dotWave 1.4s ease-in-out 0.6s infinite;
}

@keyframes dotWave {
  0%, 100% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
  50% {
    transform: translateY(-8px) scale(1.3);
    opacity: 0.7;
  }
}

/* Completed state - green dots */
.batch-item.completed .batch-item-activity-dot {
  background: #10b981;
  opacity: 1;
}

/* Failed state - red dots */
.batch-item.failed .batch-item-activity-dot {
  background: #ef4444;
  opacity: 1;
}

/* Skipped state - orange dots */
.batch-item.skipped .batch-item-activity-dot {
  background: #f59e0b;
  opacity: 1;
}

.batch-item-status {
  font-size: 0.8em;
  color: var(--muted);
  font-weight: 500;
}

/* Light mode status text - darker for better contrast */
body:not(.dark-mode) .batch-item-status {
  color: #6b7280;
}

.batch-item.converting .batch-item-status {
  color: #3b82f6;
  font-weight: 600;
}

body:not(.dark-mode) .batch-item.converting .batch-item-status {
  color: #2563eb;
}

.batch-item.completed .batch-item-status {
  color: #10b981;
  font-weight: 600;
}

body:not(.dark-mode) .batch-item.completed .batch-item-status {
  color: #059669;
}

.batch-item.failed .batch-item-status {
  color: #ef4444;
  font-weight: 600;
}

body:not(.dark-mode) .batch-item.failed .batch-item-status {
  color: #dc2626;
}

.batch-item.skipped .batch-item-status {
  color: #f59e0b;
  font-weight: 600;
}

body:not(.dark-mode) .batch-item.skipped .batch-item-status {
  color: #d97706;
}

.batch-item-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.batch-item-download,
.batch-item-remove {
  padding: 8px 14px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 16px;
}

/* Light mode button contrast */
body:not(.dark-mode) .batch-item-download,
body:not(.dark-mode) .batch-item-remove {
  background: #ffffff;
  color: #1f2937;
  border-color: #d1d5db;
}

.batch-item-download:hover {
  background: #10b981;
  color: white;
  border-color: #10b981;
  transform: translateY(-1px);
}

.batch-item-remove:hover,
body:not(.dark-mode) .batch-item-remove:hover,
body.dark-mode .batch-item-remove:hover {
  background: #ef4444 !important;
  color: white !important;
  border-color: #ef4444 !important;
  transform: translateY(-1px);
}

.batch-actions {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
  align-items: center;
  justify-content: center;
  padding-top: 20px;
  border-top: 2px solid var(--border);
}

.batch-help-text {
  flex-basis: 100%;
  margin: 0;
  font-size: 0.85em;
  color: var(--muted);
  text-align: center;
}

/* Dark mode adjustments for batch */
body.dark-mode .batch-panel {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

body.dark-mode .batch-item.converting {
  background: rgba(59, 130, 246, 0.1);
}

body.dark-mode .batch-item.completed {
  background: rgba(16, 185, 129, 0.1);
}

body.dark-mode .batch-item.failed {
  background: rgba(239, 68, 68, 0.1);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .batch-panel {
    padding: 20px;
    margin: 20px 10px;
  }
  
  .batch-controls {
    flex-direction: column;
    align-items: stretch;
  }
  
  .batch-item {
    flex-wrap: wrap;
    gap: 12px;
  }
  
  .batch-item-format-selector {
    width: 100%;
    order: 2;
  }
  
  .batch-item-progress {
    width: 100%;
    order: 3;
  }
  
  .batch-item-actions {
    order: 4;
    width: 100%;
    justify-content: flex-end;
  }
  
  .batch-stats {
    flex-direction: column;
    gap: 8px;
  }
}

/* Loading states */
.loading {
  position: relative;
  pointer-events: none;
}

.loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border: 2px solid var(--border);
  border-top: 2px solid #3b82f6;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

/* Micro-interactions */
button:hover:not(:disabled) {
  background: #1f2937;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

button:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

a.btn:hover {
  background: #f3f4f6;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

a.btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

/* Smooth transitions for all interactive elements */
button, a.btn, select, input, .card, .placeholder {
  transition: all 0.2s ease;
}

/* Focus states for accessibility */
button:focus-visible, a.btn:focus-visible, select:focus-visible, input:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}

/* Card hover effects */
.card:hover {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}

/* File input area improvements */
.placeholder:hover {
  border-color: #b0b3b8;
  background: #e5e7ea;
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

/* Light mode specific hover override */
:root[data-theme="light"] .placeholder:hover {
  background: #e5e7ea !important;
  border-color: #b0b3b8 !important;
}

.placeholder:focus-within {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Textarea readability (works in light & dark UIs) */
#in-text,
#out-text {
  background: #ffffff;      /* solid white so text never "disappears" */
  color: #0f172a;           /* dark readable text */
  caret-color: #0f172a;
}

/* Drag and drop visual feedback */
.placeholder.drag {
  border: 2px dashed #3b82f6 !important;
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%) !important;
  transform: scale(1.02);
  box-shadow: 0 8px 25px rgba(59, 130, 246, 0.25), 0 0 0 4px rgba(59, 130, 246, 0.1);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  animation: dragPulse 1.5s ease-in-out infinite;
}

@keyframes dragPulse {
  0%, 100% { 
    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.25), 0 0 0 4px rgba(59, 130, 246, 0.1);
  }
  50% { 
    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.35), 0 0 0 8px rgba(59, 130, 246, 0.15);
  }
}

.placeholder.drag .ph-inner {
  transform: scale(1.05);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.placeholder.drag .ph-inner p {
  color: #1d4ed8;
  font-weight: 600;
}

/* Success Animation Styles */

.placeholder.success {
  border: 2px dashed #10b981 !important;
  background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%) !important;
  animation: successPulse 0.6s ease-in-out;
}

.placeholder.success .ph-inner p {
  color: #059669;
  font-weight: 600;
}

.success-animation {
  animation: successPulse 0.6s ease-in-out;
}

/* Success completion animation for progress container */
.progress-container.success-completed {
  background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
  border: 2px solid #10b981;
  animation: successPulse 1s ease-in-out;
}

.progress-container.success-completed .progress-header {
  color: #059669;
  font-weight: 600;
}

.progress-container.success-completed .progress-fill {
  background: linear-gradient(90deg, #10b981 0%, #059669 100%);
}

/* Enhanced success pulse animation */
@keyframes successPulse {
  0%, 100% { 
    transform: scale(1); 
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4);
  }
  50% { 
    transform: scale(1.02); 
    box-shadow: 0 0 0 10px rgba(16, 185, 129, 0);
  }
}

 

/* File Upload Progress Styles */
.upload-progress {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  z-index: 1000;
  min-width: 300px;
  text-align: center;
}

.upload-progress h3 {
  margin: 0 0 16px 0;
  color: var(--text);
  font-size: 18px;
  font-weight: 600;
}

.upload-progress p {
  margin: 0 0 20px 0;
  color: var(--text-muted);
  font-size: 14px;
}

.upload-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid var(--border);
  border-top: 4px solid #3b82f6;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto 16px auto;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.upload-progress-bar {
  width: 100%;
  height: 6px;
  background: var(--border);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 12px;
}

.upload-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #3b82f6, #1d4ed8);
  border-radius: 3px;
  transition: width 0.3s ease;
  width: 0%;
}

.upload-progress-text {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 500;
}

/* Image Zoom Modal Styles */
.image-zoom-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.9);
  z-index: 2000;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: zoom-out;
}

.image-zoom-modal.active {
  display: flex;
}

.zoom-container {
  position: relative;
  max-width: 90vw;
  max-height: 90vh;
  overflow: hidden;
  cursor: grab;
}

.zoom-container:active {
  cursor: grabbing;
}

.zoom-image {
  max-width: 100%;
  max-height: 100%;
  transition: transform 0.1s ease-out;
  user-select: none;
  -webkit-user-drag: none;
}

.zoom-controls {
  position: absolute;
  top: 20px;
  right: 20px;
  display: flex;
  gap: 10px;
  z-index: 2001;
}

.zoom-btn {
  background: rgba(0, 0, 0, 0.7);
  color: white;
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 18px;
  transition: background-color 0.2s ease;
}

.zoom-btn:hover {
  background: rgba(0, 0, 0, 0.9);
}

.zoom-info {
  position: absolute;
  bottom: 20px;
  left: 20px;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 14px;
  z-index: 2001;
}

.image-preview-container {
  position: relative;
  cursor: zoom-in;
  overflow: visible; /* Allow zoomed images to extend beyond container */
}

.image-preview-container:hover {
  opacity: 0.9;
}

/* Disable hover effect when image is zoomed to prevent stacking issues */
.image-preview-container:hover img.zoomed {
  opacity: 1;
}

.image-preview-container:has(img.zoomed):hover {
  opacity: 1;
}

/* Force disable hover effect for zoomed containers */
.image-preview-container.zoomed-container:hover {
  opacity: 1 !important;
}

.image-preview-container img {
  position: relative;
  z-index: 1;
  transform-origin: center center;
  user-select: none; /* Prevent text selection during drag */
}

.image-preview-container img.zoomed {
  z-index: 9999;
  position: relative;
  cursor: grab !important;
}

.image-preview-container img.zoomed:active {
  cursor: grabbing !important;
}

.zoom-hint {
  display: none; /* Hide zoom hints to prevent unwanted overlays */
}

/* PDF Preview Controls */
.pdf-container {
  position: relative;
  width: 100%;
  height: 100%;
}

.pdf-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--card);
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  font-size: 14px;
}

.pdf-btn {
  background: var(--button);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 4px 8px;
  cursor: pointer;
  font-size: 14px;
  min-width: 32px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.pdf-btn:hover {
  background: var(--button-hover);
  border-color: var(--border-hover);
}

.pdf-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.pdf-page-info, .pdf-zoom-info {
  color: var(--text-muted);
  font-size: 12px;
  min-width: 80px;
  text-align: center;
}

.pdf-container object {
  width: 100%;
  height: calc(420px - 40px); /* Subtract controls height */
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 8px 8px;
}

/* Enhanced File Info Grid */
.file-info {
  display: none; /* Hidden by default */
}

.file-info.visible {
  display: block; /* Show when file is loaded */
}

.file-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  margin-top: 8px;
}

.info-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.info-label {
  font-weight: 600;
  color: var(--text-muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.info-value {
  color: var(--text);
  font-size: 13px;
  font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
  word-break: break-all;
}

/* Responsive adjustments for file info */
@media (max-width: 768px) {
  .file-info-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  
  .info-item {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  
  .info-label {
    font-size: 12px;
    min-width: 80px;
  }
  
  .info-value {
    font-size: 12px;
    text-align: right;
  }
}

/* Progress Bar Styles */
.progress-container {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px;
  margin-top: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  position: relative;
}

.progress-container.loading::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.1), transparent);
  animation: progressContainerShimmer 2s ease-in-out infinite;
  border-radius: 14px;
  pointer-events: none;
}

@keyframes progressContainerShimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.progress-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.progress-header span:first-child {
  font-weight: 600;
  color: var(--text);
}

.progress-header span:last-child {
  font-weight: 700;
  color: #3b82f6;
  font-size: 16px;
}

.progress-bar {
  width: 100%;
  height: 8px;
  background: var(--border);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 12px;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #3b82f6, #1d4ed8);
  border-radius: 4px;
  width: 0%;
  transition: width 0.3s ease;
  position: relative;
  background-size: 200% 100%;
  animation: progressShimmer 2s ease-in-out infinite;
}

@keyframes progressShimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.progress-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  animation: shimmer 2s infinite;
}

@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.progress-message {
  font-size: 14px;
  color: var(--muted);
  margin-bottom: 8px;
}

.progress-time {
  font-size: 12px;
  color: var(--muted);
  font-family: monospace;
}

.progress-support-message {
  margin-top: 16px;
  padding: 12px 16px;
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  border-radius: 8px;
  font-size: 14px;
  color: #92400e;
  text-align: center;
  border: 2px solid #fbbf24;
  box-shadow: 0 2px 4px rgba(251, 191, 36, 0.2);
}

.progress-support-message strong {
  color: #78350f;
  font-size: 15px;
}

.progress-support-message a {
  color: #ef4444 !important;
  font-weight: 600;
  text-decoration: underline;
  transition: opacity 0.2s;
}

.progress-support-message a:hover {
  opacity: 0.8;
}

/* Dark mode support */
body.dark-mode .progress-support-message {
  background: linear-gradient(135deg, #78350f 0%, #92400e 100%);
  color: #fde68a;
  border-color: #b45309;
}

body.dark-mode .progress-support-message strong {
  color: #fef3c7;
}

/* Batch support message */
.batch-support-message {
  margin: 20px 0;
  padding: 16px 20px;
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  border-radius: 8px;
  font-size: 14px;
  color: #92400e;
  text-align: center;
  border: 2px solid #fbbf24;
  box-shadow: 0 2px 4px rgba(251, 191, 36, 0.2);
}

.batch-support-message strong {
  color: #78350f;
  font-size: 15px;
}

.batch-support-message a {
  color: #ef4444 !important;
  font-weight: 600;
  text-decoration: underline;
  transition: opacity 0.2s;
}

.batch-support-message a:hover {
  opacity: 0.8;
}

body.dark-mode .batch-support-message {
  background: linear-gradient(135deg, #78350f 0%, #92400e 100%);
  color: #fde68a;
  border-color: #b45309;
}

body.dark-mode .batch-support-message strong {
  color: #fef3c7;
}

/* Progress states */
.progress-container.error .progress-fill {
  background: linear-gradient(90deg, #ef4444, #dc2626);
}

.progress-container.completed .progress-fill {
  background: linear-gradient(90deg, #10b981, #059669);
}

.progress-container.error .progress-header span:last-child {
  color: #ef4444;
}

.progress-container.completed .progress-header span:last-child {
  color: #10b981;
}

/* Conversion Details Section */
#conversion-details {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 8px;
  margin: 8px 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

#conversion-details h2 {
  margin: 0 0 8px 0;
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
}

/* Conversion Info Box */
.conversion-info {
  margin-top: 15px;
  padding: 12px;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.6;
  background: #f3f4f6;
  color: #1f2937;
  border-left: 4px solid #3b82f6;
}

:root[data-theme="dark"] .conversion-info {
  background: #1e293b;
  color: #e2e8f0;
  border-left-color: #60a5fa;
}

.conversion-info strong {
  color: #111827;
}

:root[data-theme="dark"] .conversion-info strong {
  color: #f1f5f9;
}

.details-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
  margin-top: 16px;
}

.detail-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px;
  background: var(--bg);
  border-radius: 6px;
  border: 1px solid var(--border);
}

.detail-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.detail-item span:last-child {
  font-size: 12px;
  color: var(--text);
  font-weight: 500;
}

#size-change {
  font-weight: 600;
}

#size-change.positive {
  color: #ef4444;
}

#size-change.negative {
  color: #10b981;
}

#size-change.neutral {
  color: var(--muted);
}

/* Responsive Design Improvements */
@media (max-width: 768px) {
  .container {
    padding: 0 12px;
  }
  
  .row {
    flex-direction: column;
    gap: 12px;
  }
  
  .top-controls {
    align-items: stretch;
    justify-content: space-between;
  }
  
  .convert-section.visible {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  
  .dropdown-convert-group {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    width: 100%;
  }
  
  .dropdown-convert-group > div {
    flex-shrink: 1 !important;
    width: 100%;
  }
  
  .dropdown-convert-group button {
    width: 100%;
  }
  
  .convert-section button {
    flex: 1;
    min-width: 0;
    max-width: none;
  }

  /* Mobile scaling controls - center horizontally, no wrapping - HIGH SPECIFICITY */
  .scaling-controls-row {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
    align-items: center !important;
  }
  
  .scaling-controls-row #scaling-controls {
    margin-left: 0 !important;
    text-align: center !important;
    width: auto !important;
    display: block !important;
  }
  
  .scaling-controls-row #scaling-controls .scaling-row {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    width: 100% !important;
  }
  
  .scaling-controls-row #scaling-controls .scaling-option {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
  }
  
}

/* Override for small screens that clip scaling inputs - use larger viewport settings */
@media screen and (max-width: 350px) {
  .dropdown-convert-group #scaling-controls .scaling-option input {
    width: 50px !important;
    font-size: 0.85em !important;
    text-align: center !important;
    flex-shrink: 0 !important;
  }
  
  .dropdown-convert-group #scaling-controls {
    width: 90% !important;
    max-width: 250px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
    padding: 0 8px !important;
  }
  
  .dropdown-convert-group #scaling-controls .scaling-row {
    justify-content: center !important;
    display: flex !important;
    gap: 5px !important;
    flex-wrap: nowrap !important;
  }
}

/* Override for tiny screens - WORKING SOLUTION FROM EARLIER */
@media screen and (max-width: 320px) {
  .dropdown-convert-group #scaling-controls .scaling-option input {
    width: 45px !important;
    font-size: 0.8em !important;
    text-align: center !important;
    flex-shrink: 0 !important;
    margin: 0 6px !important;
  }
  
  .dropdown-convert-group #scaling-controls {
    width: 85% !important;
    max-width: 220px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 8px !important;
  }
  
  .dropdown-convert-group #scaling-controls .scaling-row {
    gap: 4px !important;
    justify-content: space-around !important;
    display: flex !important;
    flex-wrap: nowrap !important;
  }
}

@media screen and (max-width: 280px) {
  .dropdown-convert-group #scaling-controls .scaling-option input {
    width: 45px !important;
    font-size: 0.8em !important;
    margin: 0 6px !important;
  }
  
  .dropdown-convert-group #scaling-controls {
    width: 85% !important;
    max-width: 220px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 8px !important;
  }
  
  .dropdown-convert-group #scaling-controls .scaling-row {
    gap: 4px !important;
    justify-content: space-around !important;
    display: flex !important;
    flex-wrap: nowrap !important;
  }
  
  
  /* Clear button should stack under convert button in mobile */
  #clear {
    margin-left: 0;
    width: 100%;
    order: 1;
    flex-shrink: 1;
  }
  
  .actions-row {
    flex-direction: column;
    gap: 8px;
  }
  
  .grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  
  .hint-col {
    min-width: auto;
    max-width: none;
  }
  
  .scaling-row {
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
  }
  
  .scaling-option {
    flex-direction: row;
    align-items: center;
    gap: 8px;
  }
  
  .scaling-option input {
    width: 100px;
  }
  
  .preview, .placeholder {
    height: 300px;
  }
  
  /* HTML previews use the same size as other preview types on tablets */
  .preview#in-embed, .preview#out-embed {
    height: 300px !important;
    min-height: 300px !important;
    max-height: 300px !important;
  }
  
  /* Ensure both input and output HTML previews are exactly the same size on tablets */
  #in-embed, #out-embed {
    height: 300px !important;
    min-height: 300px !important;
    max-height: 300px !important;
  }
  
  /* Ensure both input and output PDF previews are exactly the same size on tablets */
  #in-pdf, #out-pdf {
    height: 300px !important;
    min-height: 300px !important;
    max-height: 300px !important;
  }
  
  /* PDF previews use the same size as other preview types on tablets */
  .pdf-container object {
    height: calc(300px - 40px) !important; /* Subtract controls height */
  }
  
  .preview-text {
    height: 300px;
  }
  
  .progress-container {
    padding: 16px;
  }
  
  .details-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  
  header {
    padding: 16px 12px;
  }
  
  h1 {
    font-size: 24px;
  }
}

@media (max-width: 480px) {
  .container {
    padding: 0 8px;
  }
  
  .convert-section.visible {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  
  .dropdown-convert-group {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    width: 100%;
  }
  
  .convert-section button {
    width: 100%;
    min-width: 0;
    max-width: none;
  }
  
  /* Clear button should stack under convert button in extra small screens */
  #clear {
    margin-left: 0;
    width: 100%;
    order: 1;
  }
  
  .hint-col {
    margin-right: 0;
  }
  
  header {
    padding: 12px 8px;
  }
  
  h1 {
    font-size: 20px;
  }
  
  .card {
    padding: 12px;
  }
  
  .preview, .placeholder {
    height: 250px;
  }
  
  /* HTML previews use the same size as other preview types on mobile */
  .preview#in-embed, .preview#out-embed {
    height: 250px !important;
    min-height: 250px !important;
    max-height: 250px !important;
  }
  
  /* Ensure both input and output HTML previews are exactly the same size on mobile */
  #in-embed, #out-embed {
    height: 250px !important;
    min-height: 250px !important;
    max-height: 250px !important;
  }
  
  /* Ensure both input and output PDF previews are exactly the same size on mobile */
  #in-pdf, #out-pdf {
    height: 250px !important;
    min-height: 250px !important;
    max-height: 250px !important;
  }
  
  /* PDF previews use the same size as other preview types on mobile */
  .pdf-container object {
    height: calc(250px - 40px) !important; /* Subtract controls height */
  }
  
  .preview-text {
    height: 250px;
  }
  
  .progress-container {
    padding: 12px;
  }
  
  button, a.btn {
    padding: 8px 10px;
    font-size: 13px;
  }
  
  select, input {
    padding: 8px 10px;
    font-size: 13px;
  }
}

/* Dark mode improvements */
@media (prefers-color-scheme: dark) {
  .card:hover {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  }
  
  .placeholder:hover {
    background: #283548;
    border-color: #52606d;
  }
  
  button:hover:not(:disabled) {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  }
  
  a.btn:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  :root {
    --border: #000000;
    --text: #000000;
    --muted: #333333;
  }
  
  @media (prefers-color-scheme: dark) {
    :root {
      --border: #ffffff;
      --text: #ffffff;
      --muted: #cccccc;
    }
  }
  
  button, a.btn, select, input {
    border-width: 2px;
  }
  
  .card {
    border-width: 2px;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  
  .spinner {
    animation: none;
  }
  
  .loading::after {
    animation: none;
  }
}

/* Output card header styling */
.card h2 + .btn {
  margin-left: auto;
}

/* Responsive adjustments for output card header */
@media (max-width: 768px) {
  .card div[style*="justify-content: space-between"] {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  
  .card div[style*="justify-content: space-between"] .btn {
    align-self: flex-end;
  }
}

/* File Validation Styles */
.validation-error {
  background: #fef2f2 !important;
  border: 1px solid #fecaca !important;
  color: #991b1b !important;
  padding: 12px !important;
  border-radius: 8px !important;
  margin: 8px 0 !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
  animation: slideIn 0.3s ease-out;
}

.validation-success {
  background: #f0fdf4 !important;
  border: 1px solid #bbf7d0 !important;
  color: #166534 !important;
  padding: 12px !important;
  border-radius: 8px !important;
  margin: 8px 0 !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
  animation: slideIn 0.3s ease-out;
}

.validation-warning {
  background: #fffbeb !important;
  border: 1px solid #fed7aa !important;
  color: #92400e !important;
  padding: 12px !important;
  border-radius: 8px !important;
  margin: 8px 0 !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
  animation: slideIn 0.3s ease-out;
}

/* Dark mode validation styles */
@media (prefers-color-scheme: dark) {
  .validation-error {
    background: #1f1415 !important;
    border: 1px solid #7f1d1d !important;
    color: #fca5a5 !important;
  }
  
  .validation-success {
    background: #0f1f0f !important;
    border: 1px solid #166534 !important;
    color: #86efac !important;
  }
  
  .validation-warning {
    background: #1f1b0f !important;
    border: 1px solid #92400e !important;
    color: #fbbf24 !important;
  }
}

/* Drag and drop validation feedback */
.placeholder.drag-valid {
  border-color: #22c55e !important;
  background: rgba(34, 197, 94, 0.05) !important;
}

.placeholder.drag-invalid {
  border-color: #ef4444 !important;
  background: rgba(239, 68, 68, 0.05) !important;
}

.placeholder.drag-warning {
  border-color: #f59e0b !important;
  background: rgba(245, 158, 11, 0.05) !important;
}

/* Animation for validation messages */
@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* File type indicator styles */
.file-type-indicator {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.file-type-indicator.image {
  background: #dbeafe;
  color: #1e40af;
}

.file-type-indicator.audio {
  background: #f3e8ff;
  color: #7c3aed;
}

.file-type-indicator.document {
  background: #fef3c7;
  color: #d97706;
}

.file-type-indicator.text {
  background: #dcfce7;
  color: #16a34a;
}

/* Dark mode file type indicators */
@media (prefers-color-scheme: dark) {
  .file-type-indicator.image {
    background: #1e3a8a;
    color: #93c5fd;
  }
  
  .file-type-indicator.audio {
    background: #6b21a8;
    color: #c4b5fd;
  }
  
  .file-type-indicator.document {
    background: #92400e;
    color: #fcd34d;
  }
  
  .file-type-indicator.text {
    background: #166534;
    color: #86efac;
  }
}

/* Formats Toggle Button - Compact Tab Bar Style */
.formats-toggle {
  background: transparent !important;
  color: white !important;
  border: none !important;
  font-size: 14px !important;
  padding: 10px 20px !important;
  font-weight: 500 !important;
  min-width: auto !important;
  border-radius: 25px !important;
  transition: all 0.3s ease !important;
  margin-right: 0 !important;
  cursor: pointer !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  white-space: nowrap !important;
}

.formats-toggle:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.2) !important;
  transform: scale(1.02);
  box-shadow: none;
}

.formats-toggle:active:not(:disabled) {
  transform: scale(0.98);
  box-shadow: none;
}

/* Dark mode button colors */
:root[data-theme="dark"] .formats-toggle {
  color: white !important;
}

:root[data-theme="dark"] .formats-toggle:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.15) !important;
}

/* Light mode button colors */
:root[data-theme="light"] .formats-toggle {
  color: #1e293b !important;
}

:root[data-theme="light"] .formats-toggle:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.5) !important;
}

/* Formats Modal */
.formats-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 3000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
}

.formats-modal.active {
  display: flex;
}

.formats-modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  cursor: pointer;
}

.formats-modal-container {
  position: relative;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  max-width: 800px;
  width: 100%;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: modalSlideIn 0.3s ease-out;
}

@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(-20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.formats-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
  background: var(--card);
}

.formats-modal-header h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: var(--text);
}

.formats-modal-close {
  background: none;
  border: none;
  font-size: 24px;
  color: var(--muted);
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  transition: all 0.2s ease;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.formats-modal-close:hover {
  background: var(--border);
  color: var(--text);
}

.formats-modal-content {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.formats-search {
  padding: 16px 24px;
  border-bottom: 1px solid var(--border);
}

.formats-search input {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  background: var(--card);
  color: var(--text);
  transition: all 0.2s ease;
}

.formats-search input:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.formats-search input::placeholder {
  color: var(--muted);
}

.formats-categories {
  flex: 1;
  overflow-y: auto;
  padding: 16px 24px;
}

.format-category {
  margin-bottom: 24px;
}

.format-category:last-child {
  margin-bottom: 0;
}

.format-category-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

.format-category-icon {
  font-size: 18px;
}

.format-category-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  margin: 0;
}

.format-category-limit {
  font-size: 12px;
  color: var(--muted);
  background: var(--border);
  padding: 2px 8px;
  border-radius: 12px;
  margin-left: auto;
}

.format-extensions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.format-extension {
  background: var(--bg);
  border: 1px solid var(--border);
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
  font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
}

.format-conversions {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.4;
}

.format-conversions strong {
  color: var(--text);
}

.formats-modal-footer {
  padding: 16px 24px;
  border-top: 1px solid var(--border);
  background: var(--card);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.btn-secondary {
  background: var(--border);
  color: var(--text);
  border: 1px solid var(--border);
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-secondary:hover {
  background: var(--muted);
  border-color: var(--muted);
  color: var(--card);
}

/* Dark mode hover contrast fixes to prevent text disappearing */
:root[data-theme="dark"] .btn-secondary:hover,
body.dark-mode .btn-secondary:hover {
  color: #0f172a !important; /* ensure dark text on light hover bg */
}

/* Ensure batch clear button keeps readable text in dark mode */
:root[data-theme="dark"] #batch-clear,
body.dark-mode #batch-clear {
  color: var(--text) !important;
}

/* Ensure single-item download button remains visible in dark mode */
:root[data-theme="dark"] .batch-item-download,
body.dark-mode .batch-item-download {
  background: #1e293b !important;
  border-color: #475569 !important;
  color: #f8fafc !important;
}

:root[data-theme="dark"] .batch-item-download:hover,
body.dark-mode .batch-item-download:hover {
  background: #10b981 !important;
  border-color: #10b981 !important;
  color: #ffffff !important;
}

/* Ensure per-item remove (✕) button also defaults to dark styling */
:root[data-theme="dark"] .batch-item-remove,
body.dark-mode .batch-item-remove {
  background: #1e293b !important;
  border-color: #475569 !important;
  color: #f8fafc !important;
}

/* Light mode button improvements */
:root[data-theme="light"] .btn-secondary {
  background: #f1f5f9;
  color: #334155;
  border-color: #cbd5e1;
}

:root[data-theme="light"] .btn-secondary:hover {
  background: #e2e8f0;
  border-color: #94a3b8;
  color: #1e293b;
}

.btn-primary {
  background: #10b981;
  color: white;
  border: 1px solid #10b981;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-primary:hover {
  background: #059669;
  border-color: #059669;
}

/* Search highlighting */
.format-extension.highlighted {
  background: #fef3c7;
  border-color: #f59e0b;
  color: #92400e;
}

.format-category.hidden {
  display: none;
}

/* Responsive modal */
@media (max-width: 768px) {
  .formats-modal {
    padding: 10px;
  }
  
  .formats-modal-container {
    max-height: 95vh;
  }
  
  .formats-modal-header {
    padding: 16px 20px;
  }
  
  .formats-modal-header h2 {
    font-size: 18px;
  }
  
  .formats-search {
    padding: 12px 20px;
  }
  
  .formats-categories {
    padding: 12px 20px;
  }
  
  .formats-modal-footer {
    padding: 12px 20px;
    flex-direction: column;
    gap: 8px;
  }
  
  .formats-modal-footer button {
    width: 100%;
  }
  
  .format-extensions {
    gap: 6px;
  }
  
  .format-extension {
    font-size: 11px;
    padding: 3px 6px;
  }
}

@media (max-width: 480px) {
  .formats-modal {
    padding: 5px;
  }
  
  .formats-modal-header {
    padding: 12px 16px;
  }
  
  .formats-modal-header h2 {
    font-size: 16px;
  }
  
  .formats-search {
    padding: 8px 16px;
  }
  
  .formats-categories {
    padding: 8px 16px;
  }
  
  .formats-modal-footer {
    padding: 8px 16px;
  }
  
  .format-category-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  
  .format-category-limit {
    margin-left: 0;
  }
}

/* Error Modal Styles */
.error-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.error-modal.active {
  display: flex;
}

.error-modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
}

.error-modal-container {
  position: relative;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  max-width: 500px;
  width: 100%;
  max-height: 80vh;
  overflow: hidden;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
  animation: modalSlideIn 0.3s ease-out;
}

.error-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
  background: var(--warning-bg, #fef3c7);
}

.error-modal-header h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: var(--warning-text, #92400e);
}

.error-modal-close {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: var(--text-secondary);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: background-color 0.2s ease;
}

.error-modal-close:hover {
  background: var(--border);
  color: var(--text);
}

.error-modal-content {
  flex: 1;
  padding: 24px;
  overflow-y: auto;
}

.error-modal-content p {
  margin: 0 0 16px 0;
  line-height: 1.6;
  color: var(--text);
}

.error-modal-content ul {
  margin: 16px 0;
  padding-left: 20px;
}

.error-modal-content li {
  margin: 8px 0;
  line-height: 1.5;
}

.error-modal-content .help-link {
  color: var(--primary);
  text-decoration: none;
  font-weight: 500;
}

.error-modal-content .help-link:hover {
  text-decoration: underline;
}

.error-modal-footer {
  padding: 16px 24px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

/* Responsive error modal */
@media (max-width: 768px) {
  .error-modal {
    padding: 10px;
  }
  
  .error-modal-container {
    max-height: 95vh;
  }
  
  .error-modal-header {
    padding: 16px 20px;
  }
  
  .error-modal-header h2 {
    font-size: 18px;
  }
  
  .error-modal-content {
    padding: 20px;
  }
  
  .error-modal-footer {
    padding: 12px 20px;
    flex-direction: column;
  }
  
  .error-modal-footer button {
    width: 100%;
  }
}

/* Dark mode modal styles */
@media (prefers-color-scheme: dark) {
  .formats-modal-overlay {
    background: rgba(0, 0, 0, 0.8);
  }
  
  .error-modal-overlay {
    background: rgba(0, 0, 0, 0.8);
  }
  
  .error-modal-header {
    background: var(--warning-bg-dark, #451a03);
  }
  
  .error-modal-header h2 {
    color: var(--warning-text-dark, #fbbf24);
  }
  
  .format-extension.highlighted {
    background: #451a03;
    border-color: #f59e0b;
    color: #fbbf24;
  }
}

/* Animation for search results */
.format-category {
  transition: opacity 0.2s ease;
}

.format-category.fade-out {
  opacity: 0.3;
}

/* Smart Presets Styles */
 

.preset-title {
  margin: 0 0 12px 0;
  font-size: 0.95em;
  color: #555;
  font-weight: 500;
}

.preset-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

.preset-btn {
  padding: 12px 16px;
  border: 2px solid #e9ecef;
  border-radius: 8px;
  background: white;
  color: #333;
  font-size: 0.85em;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 60px;
  justify-content: center;
}

.preset-btn:hover {
  border-color: #667eea;
  background: #f0f4ff;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.15);
}

.preset-btn.selected {
  border-color: #667eea;
  background: #667eea;
  color: white;
  font-weight: 600;
}

.preset-btn small {
  font-size: 0.75em;
  opacity: 0.8;
  line-height: 1.2;
}

.preset-btn.selected small {
  opacity: 0.9;
}

.preset-hint {
  margin: 0;
  font-size: 0.8em;
  color: #888;
  text-align: center;
  font-style: italic;
}

/* Responsive preset layout */
@media (max-width: 768px) {
  .preset-grid {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  
  .preset-btn {
    min-height: 50px;
    padding: 10px 12px;
  }
}

/* Footer Styles for Blog Pages */
.footer {
  background: #1a1a1a;
  color: #ffffff;
  padding: 40px 0 20px;
  margin-top: 60px;
}

.footer-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
}

.footer-logo h3 {
  color: #667eea;
  font-size: 1.4em;
  margin-bottom: 10px;
  font-weight: 600;
}

.footer-logo p {
  color: #cccccc;
  line-height: 1.6;
  margin: 0;
}

.footer-links h4,
.footer-legal h4,
.footer-social h4 {
  color: #ffffff;
  font-size: 1.1em;
  margin-bottom: 15px;
  font-weight: 600;
}

.footer-links ul,
.footer-legal ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links li,
.footer-legal li {
  margin-bottom: 8px;
}

.footer-links a,
.footer-legal a {
  color: #cccccc;
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer-links a:hover,
.footer-legal a:hover {
  color: #667eea;
}

.social-icons {
  display: flex;
  gap: 15px;
  align-items: center;
  flex-wrap: wrap;
}

.social-icons img {
  width: 24px;
  height: 24px;
  transition: opacity 0.3s ease;
}

.social-icons img:hover {
  opacity: 0.7;
}

.social-icons .coming-soon {
  color: #888888;
  font-size: 0.9em;
  padding: 4px 8px;
  background: #333333;
  border-radius: 4px;
  font-style: italic;
}

.footer-bottom {
  border-top: 1px solid #333333;
  margin-top: 30px;
  padding-top: 20px;
  text-align: center;
}

.footer-bottom p {
  color: #888888;
  font-size: 0.9em;
  margin: 0;
}

/* Responsive Footer */
@media (max-width: 768px) {
  .footer-container {
    grid-template-columns: 1fr;
    gap: 30px;
    text-align: center;
  }
  
  .social-icons {
    justify-content: center;
  }
}

/* Dark Mode Footer Styles */
@media (prefers-color-scheme: dark) {
  footer {
    background: #0f172a;
    color: #f8fafc;
  }
  
  footer h3,
  footer h4 {
    color: #f8fafc !important;
  }
  
  footer p {
    color: #cbd5e1 !important;
  }
  
  footer a {
    color: #818cf8 !important;
  }
  
  footer a:hover {
    color: #a5b4fc !important;
  }
}

:root[data-theme="dark"] footer {
  background: #0f172a;
  color: #f8fafc;
}

:root[data-theme="dark"] footer h3,
:root[data-theme="dark"] footer h4 {
  color: #f8fafc !important;
}

:root[data-theme="dark"] footer p {
  color: #cbd5e1 !important;
}

:root[data-theme="dark"] footer a {
  color: #818cf8 !important;
}

:root[data-theme="dark"] footer a:hover {
  color: #a5b4fc !important;
}

/* Dark mode preview areas */
:root[data-theme="dark"] .preview,
:root[data-theme="dark"] .placeholder,
:root[data-theme="dark"] .preview iframe,
:root[data-theme="dark"] .preview img,
:root[data-theme="dark"] .preview object {
  background: #1e293b !important;
}

:root[data-theme="dark"] .placeholder:hover {
  background: #283548 !important;
  border-color: #52606d !important;
}

/* Dark mode preview areas - but NOT text preview textareas (those stay light) */
:root[data-theme="dark"] .preview-text:not(textarea) {
  background: #1e293b !important;
  color: #f8fafc !important;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .preview,
  :root:not([data-theme="light"]) .placeholder,
  :root:not([data-theme="light"]) .preview iframe,
  :root:not([data-theme="light"]) .preview img,
  :root:not([data-theme="light"]) .preview object {
    background: #1e293b !important;
  }
  
  :root:not([data-theme="light"]) .placeholder:hover {
    background: #283548 !important;
    border-color: #52606d !important;
  }
  
  /* Dark mode text preview - but NOT textareas (those stay light) */
  :root:not([data-theme="light"]) .preview-text:not(textarea) {
    background: #1e293b !important;
    color: #f8fafc !important;
  }
}

/* Conversion animations */
@keyframes pulse {
  0%, 100% { 
    opacity: 1; 
    transform: scale(1); 
  }
  50% { 
    opacity: 0.7; 
    transform: scale(1.05); 
  }
}

@keyframes bounce {
  0%, 100% { 
    transform: translateY(0); 
  }
  25% { 
    transform: translateY(-20px); 
  }
  50% { 
    transform: translateY(-10px); 
  }
  75% { 
    transform: translateY(-5px); 
  }
}

/* Highlight animation for files needing attention */
.needs-attention {
  animation: needsAttention 0.6s ease-in-out;
  border: 2px solid #3b82f6 !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
  background: rgba(59, 130, 246, 0.05) !important;
}

@keyframes needsAttention {
  0% { 
    transform: scale(1);
    border-color: transparent;
  }
  50% { 
    transform: scale(1.02);
    border-color: #3b82f6;
  }
  100% { 
    transform: scale(1);
    border-color: #3b82f6;
  }
}

/* Glowing dropdown for files needing format selection */
.needs-attention-dropdown,
select.needs-attention-dropdown,
.batch-item-format-select.needs-attention-dropdown {
  animation: dropdownGlow 1s ease-in-out infinite alternate !important;
  border: 2px solid #10b981 !important;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2), 
              0 0 10px rgba(16, 185, 129, 0.3) !important;
  background: rgba(16, 185, 129, 0.05) !important;
  outline: none !important;
  color: var(--text) !important;
}

/* Ensure dropdown options are visible with proper contrast */
.needs-attention-dropdown option,
select.needs-attention-dropdown option,
.batch-item-format-select.needs-attention-dropdown option {
  background: var(--background) !important;
  color: var(--text) !important;
  padding: 8px 12px !important;
}

/* Dark mode dropdown options */
body.dark-mode .needs-attention-dropdown option,
body.dark-mode select.needs-attention-dropdown option,
body.dark-mode .batch-item-format-select.needs-attention-dropdown option {
  background: #1f2937 !important;
  color: #f9fafb !important;
}

/* Light mode dropdown options */
body:not(.dark-mode) .needs-attention-dropdown option,
body:not(.dark-mode) select.needs-attention-dropdown option,
body:not(.dark-mode) .batch-item-format-select.needs-attention-dropdown option {
  background: #ffffff !important;
  color: #1f2937 !important;
}

@keyframes dropdownGlow {
  0% { 
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2), 
                0 0 10px rgba(16, 185, 129, 0.3);
  }
  100% { 
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.4), 
                0 0 15px rgba(16, 185, 129, 0.5);
  }
}