:root {
  color-scheme: light dark;
  --bg: #0f1115;
  --card: #171a21;
  --card-2: #1d2129;
  --border: #2a2e38;
  --text: #e8eaed;
  --muted: #9aa0ab;
  --accent: #6c8cff;
  --accent-2: #8f6cff;
  --success: #4ade80;
  --danger: #ff6b6b;
}

@media (prefers-color-scheme: light) {
  :root {
    --bg: #f4f5f7;
    --card: #ffffff;
    --card-2: #eef0f3;
    --border: #dde1e7;
    --text: #16181d;
    --muted: #656b78;
    --accent: #4361ee;
    --accent-2: #7c3aed;
    --success: #16a34a;
    --danger: #dc2626;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  /* Filet de sécurité pour les navigateurs qui comprennent "safe center" (Chrome/Firefox
     récents) : sur une fenêtre large mais peu haute, la carte peut devenir plus grande que
     le viewport (plus de contenu visible qu'avant : 4 onglets de mode, deux dropzones en
     Comparateur...). "align-items: center" pur pousse alors le haut de la carte hors
     champ à parts égales avec le bas — la carte apparaît "collée" en haut avec tout
     l'espace en trop en dessous, sans pouvoir scroller vers le haut au-delà.
     "safe center" retombe sur un alignement au début (haut) dès que ça déborde, donc la
     carte reste entièrement visible dès le chargement. Les navigateurs qui ne
     reconnaissent pas cette valeur ignorent la ligne et gardent le "center" ci-dessus. */
  align-items: safe center;
  justify-content: center;
  padding: 24px 16px;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.card {
  /* S'adapte à la fenêtre plutôt que de rester coincée à 480px sur un grand écran :
     clamp() recalcule en continu au redimensionnement (pas besoin de JS ni de media
     query par palier), avec un plancher pour rester lisible sur mobile et un plafond
     pour ne pas étirer les champs/dropzones à l'infini sur un très large écran. */
  width: clamp(340px, 90vw, 880px);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 32px;
  box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.5);
  animation: card-in 0.35s ease both;
}

@keyframes card-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .card { animation: none; }
}

.app-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
}

.logo {
  flex: none;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: white;
}

.logo svg { width: 22px; height: 22px; }

.lang-switch {
  flex: none;
  margin-left: auto;
  display: flex;
  gap: 2px;
  padding: 2px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg);
}

.lang-btn {
  padding: 4px 8px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.lang-btn:hover { color: var(--text); }
.lang-btn[aria-pressed="true"] { background: var(--accent); color: white; }

h1 { margin: 0; font-size: 1.35rem; line-height: 1.2; }
.subtitle { margin: 2px 0 0; color: var(--muted); font-size: 0.82rem; }

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 18px;
}

.field[hidden] { display: none; }

.field-label, .field label {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.tabs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(64px, 1fr));
  gap: 6px;
}

.tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 10px 4px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--muted);
  font-size: 0.72rem;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease, transform 0.1s ease;
}

.tab svg { width: 18px; height: 18px; }

.tab:hover:not(:disabled) { border-color: var(--accent); color: var(--text); }
.tab:active:not(:disabled) { transform: scale(0.96); }

.tab.is-active {
  border-color: var(--accent);
  background: rgba(108, 140, 255, 0.12);
  color: var(--text);
}

.tab:disabled { opacity: 0.5; cursor: not-allowed; }
.tab[hidden] { display: none; }

.mode-tabs { grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); }

.format-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  gap: 10px;
}

.format-row[hidden] { display: none; }

.format-arrow {
  color: var(--muted);
  padding-bottom: 10px;
}

.format-arrow svg { width: 16px; height: 16px; }

label { color: var(--muted); font-size: 0.85rem; }

select {
  width: 100%;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
}

select:disabled { opacity: 0.5; cursor: not-allowed; }

.dropzone {
  margin-top: 18px;
  border: 2px dashed var(--border);
  border-radius: 12px;
  padding: 32px 16px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}

.dropzone-icon {
  width: 30px;
  height: 30px;
  color: var(--muted);
  margin-bottom: 8px;
  transition: color 0.15s ease, transform 0.15s ease;
}

.dropzone-text { margin: 0; font-size: 0.88rem; }

.dropzone:hover:not(.is-disabled), .dropzone.dragover {
  border-color: var(--accent);
  background: rgba(108, 140, 255, 0.06);
}

.dropzone:hover:not(.is-disabled) .dropzone-icon,
.dropzone.dragover .dropzone-icon {
  color: var(--accent);
}

.dropzone.dragover {
  transform: scale(1.015);
}

.dropzone.dragover .dropzone-icon {
  transform: translateY(-3px);
}

.dropzone.is-disabled { cursor: not-allowed; opacity: 0.6; }

.filename { margin-top: 8px; color: var(--accent); font-size: 0.85rem; word-break: break-all; }

.convert-btn {
  width: 100%;
  margin-top: 20px;
  padding: 12px 20px;
  border-radius: 8px;
  border: none;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: white;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: filter 0.15s ease, transform 0.1s ease;
}

.convert-btn:hover:not(:disabled) { filter: brightness(1.08); }
.convert-btn:active:not(:disabled) { transform: scale(0.98); }
.convert-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-spinner {
  display: none;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: white;
  animation: spin 0.7s linear infinite;
}

.convert-btn.is-loading .btn-spinner { display: inline-block; }

@keyframes spin {
  to { transform: rotate(360deg); }
}

.progress-wrap { margin-top: 14px; }

.progress-track {
  height: 6px;
  border-radius: 999px;
  background: var(--border);
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  width: 0%;
  transition: width 0.25s ease;
}

.progress-fill.indeterminate {
  animation: progress-indeterminate 1.1s ease-in-out infinite;
}

@keyframes progress-indeterminate {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(280%); }
}

.progress-label {
  margin: 6px 0 0;
  font-size: 0.78rem;
  color: var(--muted);
  text-align: center;
}

.status { margin-top: 12px; font-size: 0.85rem; color: var(--muted); min-height: 1.2em; }
.status.error { color: var(--danger); }
.status.success { color: var(--success); }

.result-card {
  margin-top: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(74, 222, 128, 0.06);
  animation: result-in 0.25s ease both;
}

.result-card[hidden] { display: none; }

@keyframes result-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.result-icon { flex: none; width: 26px; height: 26px; color: var(--success); }

.result-info { flex: 1; min-width: 0; }
.result-name { margin: 0; font-size: 0.85rem; word-break: break-all; }
.result-meta { margin: 2px 0 0; font-size: 0.75rem; color: var(--muted); }

.result-actions {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.btn-secondary, .btn-ghost {
  border: none;
  border-radius: 7px;
  padding: 7px 12px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  transition: filter 0.15s ease;
}

.btn-secondary svg { width: 13px; height: 13px; }

.btn-secondary {
  background: var(--success);
  color: #0b1f14;
}

.btn-ghost {
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--border);
}

.btn-secondary:hover, .btn-ghost:hover { filter: brightness(1.1); }

.batch-results { margin-top: 18px; }
.batch-results[hidden] { display: none; }

.batch-results-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  gap: 10px;
}

.batch-results-header .btn-secondary { padding: 6px 12px; font-size: 0.74rem; }

.batch-results-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 320px;
  overflow-y: auto;
}

.batch-result-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 9px;
  border: 1px solid var(--border);
  background: var(--card-2);
}

.batch-result-item.is-error { border-color: var(--danger); background: rgba(255, 107, 107, 0.06); }

.batch-result-info { flex: 1; min-width: 0; }
.batch-result-name { margin: 0; font-size: 0.78rem; word-break: break-all; }
.batch-result-meta { margin: 2px 0 0; font-size: 0.7rem; color: var(--muted); }
.batch-result-item.is-error .batch-result-meta { color: var(--danger); }

.history-section { margin-top: 18px; }
.history-section[hidden] { display: none; }

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

.btn-small { padding: 4px 9px; font-size: 0.7rem; }

.history-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.history-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 9px;
  border: 1px solid var(--border);
  background: var(--card-2);
}

.history-info { flex: 1; min-width: 0; }
.history-name { margin: 0; font-size: 0.78rem; word-break: break-all; }
.history-meta { margin: 2px 0 0; font-size: 0.7rem; color: var(--muted); }

.compare-dropzones {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 18px;
}

.compare-dropzones[hidden] { display: none; }
.compare-dropzones .dropzone { margin-top: 0; }

.inspect-result { margin-top: 14px; }
.inspect-result[hidden] { display: none; }

.inspect-list {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 14px;
  padding: 14px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--card-2);
}

.inspect-list dt { color: var(--muted); font-size: 0.78rem; }
.inspect-list dd { margin: 0; font-size: 0.85rem; word-break: break-word; }

.compare-result { margin-top: 14px; }
.compare-result[hidden] { display: none; }

.compare-summary { margin: 0 0 8px; font-size: 0.9rem; font-weight: 600; }
.compare-note { margin: 0 0 8px; font-size: 0.78rem; color: var(--muted); }

.compare-diff-image {
  display: block;
  max-width: 100%;
  border-radius: 10px;
  border: 1px solid var(--border);
  margin-bottom: 10px;
}

.compare-diff-lines {
  max-height: 260px;
  overflow-y: auto;
  border-radius: 10px;
  border: 1px solid var(--border);
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: 0.76rem;
}

.compare-diff-line {
  padding: 3px 10px;
  white-space: pre-wrap;
  word-break: break-all;
}

.compare-diff-line--added { background: rgba(74, 222, 128, 0.12); color: var(--success); }
.compare-diff-line--removed { background: rgba(255, 107, 107, 0.12); color: var(--danger); }

.footer { margin-top: 24px; font-size: 0.72rem; color: var(--muted); text-align: center; opacity: 0.7; }
.footer a { color: inherit; text-decoration: underline; }

.preview-row[hidden] {
  display: none;
}

.preview-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
}

.preview-box {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px;
  min-height: 120px;
  justify-content: center;
}

.preview-box img {
  max-width: 100%;
  max-height: 110px;
  border-radius: 4px;
}

.preview-label { font-size: 0.75rem; color: var(--muted); }
.preview-arrow { color: var(--muted); font-size: 1.2rem; }

@media (max-width: 420px) {
  .card { padding: 24px 20px; }
  .tabs { gap: 4px; }
  .tab { font-size: 0.66rem; padding: 8px 2px; }
  .result-card { flex-wrap: wrap; }
  .result-actions { flex-direction: row; width: 100%; }
  .btn-secondary, .btn-ghost { flex: 1; justify-content: center; }
  .compare-dropzones { grid-template-columns: 1fr; }
}