*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Dark theme (default) ────────────────────────── */
:root,
[data-theme="dark"] {
  --bg:              #0f1117;
  --bg-panel:        #161b27;
  --bg-editor:       #13171f;
  --bg-input:        #1c2233;
  --border:          #252d3d;
  --border-active:   #3d4f6e;
  --text:            #d4dae8;
  --text-dim:        #818ba7;
  --text-muted:      #818ba7;
  --accent:          #7c9ef5;
  --accent2:         #5be7c4;
  --accent2-dim:     rgba(91,231,196,0.25);
  --btn-hover-bg:    rgba(255,255,255,0.04);
  --output-p:        #b8c0d4;
  --output-pre-bg:   #0d1117;
  --output-bq-bg:    rgba(124,158,245,0.04);
  --output-th-bg:    rgba(255,255,255,0.04);
  --output-tr-bg:    rgba(255,255,255,0.02);
  --output-strong:   #e2e8f8;
  --output-em:       #c4b5fd;
  --output-del:      #4a5270;
  --output-code-col: #5be7c4;
  --output-code-bg:  rgba(91,231,196,0.08);
  --output-code-brd: rgba(91,231,196,0.12);
  --output-a:        #7c9ef5;

  --md-heading:      #7c9ef5;
  --md-bold:         #e2e8f8;
  --md-italic:       #c4b5fd;
  --md-code:         #5be7c4;
  --md-code-bg:      rgba(91,231,196,0.08);
  --md-link:         #7c9ef5;
  --md-blockquote:   #8892aa;
  --md-list:         #5be7c4;
  --md-img:          #f5c46e;
  --md-strike:       #666e88;

  --hljs-comment:    #5c6370;
  --hljs-kw:         #c678dd;
  --hljs-str:        #98c379;
  --hljs-num:        #d19a66;
  --hljs-fn:         #61afef;
  --hljs-type:       #e5c07b;
  --hljs-builtin:    #56b6c2;
  --hljs-tag:        #e06c75;
  --hljs-del-bg:     rgba(245,110,110,0.15);
  --hljs-add-bg:     rgba(91,231,196,0.10);
}

/* ── Light theme ─────────────────────────────────── */
[data-theme="light"] {
  --bg:              #f5f6fa;
  --bg-panel:        #ffffff;
  --bg-editor:       #fafbfc;
  --bg-input:        #f0f1f5;
  --border:          #dde1ec;
  --border-active:   #9aaad4;
  --text:            #1e2333;
  --text-dim:        #7a86a8;
  --text-muted:      #7a86a8;
  --accent:          #3d6ce7;
  --accent2:         #0c9e7b;
  --accent2-dim:     rgba(12,158,123,0.2);
  --btn-hover-bg:    rgba(0,0,0,0.04);
  --output-p:        #3a4060;
  --output-pre-bg:   #f0f2f8;
  --output-bq-bg:    rgba(61,108,231,0.04);
  --output-th-bg:    rgba(0,0,0,0.03);
  --output-tr-bg:    rgba(0,0,0,0.015);
  --output-strong:   #12182b;
  --output-em:       #6443c0;
  --output-del:      #aab2cc;
  --output-code-col: #0c7c5e;
  --output-code-bg:  rgba(12,126,94,0.08);
  --output-code-brd: rgba(12,126,94,0.15);
  --output-a:        #3d6ce7;

  --md-heading:      #3d6ce7;
  --md-bold:         #0d1526;
  --md-italic:       #6443c0;
  --md-code:         #0c7c5e;
  --md-code-bg:      rgba(12,124,94,0.08);
  --md-link:         #3d6ce7;
  --md-blockquote:   #6a738f;
  --md-list:         #0c7c5e;
  --md-img:          #b85c00;
  --md-strike:       #aab2cc;

  --hljs-comment:    #969faf;
  --hljs-kw:         #7c3aed;
  --hljs-str:        #16a34a;
  --hljs-num:        #b45309;
  --hljs-fn:         #1d4ed8;
  --hljs-type:       #b45309;
  --hljs-builtin:    #0369a1;
  --hljs-tag:        #dc2626;
  --hljs-del-bg:     rgba(220,38,38,0.08);
  --hljs-add-bg:     rgba(22,163,74,0.08);
}

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  line-height: 1.6;
  overflow: hidden;
  transition: background 0.2s, color 0.2s;
}

.app {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

/* ── Header ─────────────────────────────────────── */
header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  height: 52px;
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  gap: 12px;
  transition: background 0.2s, border-color 0.2s;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.logo {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.logo-icon {
  width: 28px; height: 28px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

.logo-name {
  font-family: 'DM Mono', monospace;
  font-size: 14px; font-weight: 500;
  color: var(--text);
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.logo-name span { color: var(--accent); }

.header-sep { width: 1px; height: 20px; background: var(--border); flex-shrink: 0; }

.header-sub {
  font-size: 12px; color: var(--text-dim); font-weight: 300;
  letter-spacing: 0.02em; white-space: nowrap;
}

.header-actions {
  display: flex; align-items: center; gap: 6px; flex-shrink: 0;
}

/* ── Buttons ─────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px;
  font-family: 'DM Sans', sans-serif;
  font-size: 12px; font-weight: 500;
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s;
  text-decoration: none;
  letter-spacing: 0.01em;
  white-space: nowrap;
  background: transparent;
}

.btn-ghost { color: var(--text-dim); }
.btn-ghost:hover {
  background: var(--btn-hover-bg);
  color: var(--text);
  border-color: var(--border-active);
}

.btn-accent {
  background: rgba(91,231,196,0.1);
  color: var(--accent2);
  border-color: var(--accent2-dim);
}
[data-theme="light"] .btn-accent {
  background: rgba(12,158,123,0.08);
}
.btn-accent:hover {
  background: rgba(91,231,196,0.18);
  border-color: var(--accent2);
}
[data-theme="light"] .btn-accent:hover {
  background: rgba(12,158,123,0.15);
  border-color: var(--accent2);
}

/* Theme toggle button — icon-only, square */
.btn-icon {
  padding: 5px 8px;
  color: var(--text-dim);
}
.btn-icon:hover {
  background: var(--btn-hover-bg);
  color: var(--text);
  border-color: var(--border-active);
}

/* icon visibility by theme */
.icon-sun  { display: none; }
.icon-moon { display: block; }
[data-theme="light"] .icon-sun  { display: block; }
[data-theme="light"] .icon-moon { display: none; }

#file-input { display: none; }

/* ── Width control widget ────────────────────────── */
.width-control {
  display: flex;
  align-items: center;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  height: 30px;
  background: var(--bg-input);
  transition: border-color 0.15s;
}
.width-control:focus-within { border-color: var(--border-active); }

.width-label {
  display: flex; align-items: center;
  padding: 0 8px;
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  color: var(--text-muted);
  letter-spacing: 0.06em;
  border-right: 1px solid var(--border);
  height: 100%;
  white-space: nowrap;
  user-select: none;
}

.width-input {
  width: 52px;
  height: 100%;
  border: none;
  outline: none;
  background: transparent;
  color: var(--text);
  font-family: 'DM Mono', monospace;
  font-size: 12px;
  text-align: right;
  padding: 0 4px 0 6px;
}

/* remove number spinners */
.width-input::-webkit-inner-spin-button,
.width-input::-webkit-outer-spin-button { -webkit-appearance: none; }
.width-input[type=number] { -moz-appearance: textfield; }

.width-unit-toggle {
  display: flex;
  height: 100%;
  border-left: 1px solid var(--border);
}

.unit-btn {
  padding: 0 7px;
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  font-weight: 500;
  color: var(--text-muted);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.12s;
  letter-spacing: 0.05em;
  border-right: 1px solid var(--border);
}
.unit-btn:last-child { border-right: none; }
.unit-btn:hover { color: var(--text); background: var(--btn-hover-bg); }
.unit-btn.active {
  color: var(--accent);
  background: rgba(124,158,245,0.08);
}
[data-theme="light"] .unit-btn.active {
  background: rgba(61,108,231,0.08);
}

/* ── Panels ──────────────────────────────────────── */
.panels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  flex: 1;
  overflow: hidden;
}

.panel-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 16px; height: 36px;
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  transition: background 0.2s, border-color 0.2s;
}

.panel-title {
  font-family: 'DM Mono', monospace;
  font-size: 10px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--text-muted);
}

.panel-badge {
  font-family: 'DM Mono', monospace;
  font-size: 10px; padding: 2px 8px;
  border-radius: 10px;
}

.badge-md {
  background: rgba(124,158,245,0.1);
  color: var(--accent);
  border: 1px solid rgba(124,158,245,0.2);
}
[data-theme="light"] .badge-md {
  background: rgba(61,108,231,0.08);
  border-color: rgba(61,108,231,0.2);
}

.badge-html {
  background: rgba(91,231,196,0.1);
  color: var(--accent2);
  border: 1px solid rgba(91,231,196,0.2);
}
[data-theme="light"] .badge-html {
  background: rgba(12,158,123,0.08);
  border-color: rgba(12,158,123,0.2);
}

/* ── Editor ──────────────────────────────────────── */
.editor-panel {
  display: flex; flex-direction: column;
  border-right: 1px solid var(--border);
  overflow: hidden;
  transition: border-color 0.2s;
}

.editor-wrap { position: relative; flex: 1; overflow: hidden; }

#md-highlight {
  position: absolute; inset: 0;
  padding: 20px;
  font-family: 'DM Mono', monospace;
  font-size: 13px; line-height: 1.75;
  white-space: pre-wrap; word-wrap: break-word;
  overflow: auto; pointer-events: none;
  color: transparent;
  background: var(--bg-editor);
  tab-size: 2;
  transition: background 0.2s;
}

#markdown-input {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  padding: 20px;
  font-family: 'DM Mono', monospace;
  font-size: 13px; line-height: 1.75;
  color: var(--text);
  background: transparent;
  border: none; resize: none; outline: none;
  tab-size: 2;
  caret-color: var(--accent);
  white-space: pre-wrap; word-wrap: break-word;
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
  z-index: 1;
}
#markdown-input::selection { background: rgba(124,158,245,0.2); }
[data-theme="light"] #markdown-input::selection { background: rgba(61,108,231,0.15); }

#markdown-input::-webkit-scrollbar { width: 6px; }
#markdown-input::-webkit-scrollbar-track { background: transparent; }
#markdown-input::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

/* ── Markdown syntax highlight spans ─────────────── */
.md-h1    { color: var(--md-heading); font-weight: 600; }
.md-h2    { color: var(--md-heading); font-weight: 600; opacity: 0.88; }
.md-h3    { color: var(--md-heading); opacity: 0.76; }
.md-h4    { color: var(--md-heading); opacity: 0.64; }
.md-punct { color: var(--text-muted); }
.md-bold  { color: var(--md-bold); font-weight: 700; }
.md-italic { color: var(--md-italic); font-style: italic; }
.md-code  { color: var(--md-code); background: var(--md-code-bg); border-radius: 3px; }
.md-fence { color: var(--md-code); }
.md-fence-lang { color: var(--md-img); }
.md-link  { color: var(--md-link); }
.md-url   { color: var(--text-muted); }
.md-img   { color: var(--md-img); }
.md-blockquote { color: var(--md-blockquote); font-style: italic; }
.md-bq-punct   { color: var(--text-muted); }
.md-hr    { color: var(--text-muted); }
.md-list  { color: var(--md-list); }
.md-strike { color: var(--md-strike); text-decoration: line-through; }
.md-entity { color: var(--md-img); }

/* ── Output panel ─────────────────────────────────── */
.output-panel {
  display: flex; flex-direction: column; overflow: hidden;
}

#html-output {
  flex: 1;
  overflow-y: auto;
  padding: 28px 32px;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
#html-output::-webkit-scrollbar { width: 6px; }
#html-output::-webkit-scrollbar-track { background: transparent; }
#html-output::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

/* ── Rendered markdown ───────────────────────────── */
#html-output h1,#html-output h2,#html-output h3,
#html-output h4,#html-output h5,#html-output h6 {
  color: var(--text);
  font-weight: 600; margin-top: 1.6em; margin-bottom: 0.5em; line-height: 1.3;
}
#html-output h1 { font-size: 1.9em; border-bottom: 1px solid var(--border); padding-bottom: 0.3em; }
#html-output h2 { font-size: 1.45em; border-bottom: 1px solid var(--border); padding-bottom: 0.25em; }
#html-output h3 { font-size: 1.15em; }
#html-output h4 { font-size: 1em; color: var(--text-dim); }
#html-output p  { margin: 0.8em 0; color: var(--output-p); }
#html-output a  { color: var(--output-a); text-decoration: none; border-bottom: 1px solid rgba(124,158,245,0.25); transition: border-color 0.15s; }
[data-theme="light"] #html-output a { border-bottom-color: rgba(61,108,231,0.25); }
#html-output a:hover { border-bottom-color: var(--output-a); }
#html-output a.anchor { display: none; }
#html-output strong { color: var(--output-strong); font-weight: 600; }
#html-output em { color: var(--output-em); font-style: italic; }
#html-output del { color: var(--output-del); }
#html-output code {
  font-family: 'DM Mono', monospace;
  font-size: 0.875em;
  color: var(--output-code-col);
  background: var(--output-code-bg);
  padding: 0.15em 0.45em;
  border-radius: 4px;
  border: 1px solid var(--output-code-brd);
}
#html-output pre {
  background: var(--output-pre-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px 18px;
  overflow-x: auto; margin: 1.2em 0;
}
#html-output pre code {
  background: none; border: none; padding: 0;
  color: #abb2bf; font-size: 0.82em; line-height: 1.65;
}
[data-theme="light"] #html-output pre code { color: #383a42; }
#html-output blockquote {
  margin: 1em 0; padding: 12px 18px;
  border-left: 3px solid var(--accent);
  background: var(--output-bq-bg);
  border-radius: 0 6px 6px 0;
  color: var(--text-dim); font-style: italic;
}
#html-output table { border-collapse: collapse; width: 100%; margin: 1.2em 0; font-size: 0.9em; }
#html-output th {
  background: var(--output-th-bg); color: var(--text);
  font-weight: 600; padding: 8px 14px;
  border: 1px solid var(--border); text-align: left;
}
#html-output td { padding: 7px 14px; border: 1px solid var(--border); color: var(--output-p); }
#html-output tr:nth-child(even) td { background: var(--output-tr-bg); }
#html-output img { max-width: 100%; border-radius: 6px; border: 1px solid var(--border); }
#html-output ul,#html-output ol { padding-left: 1.6em; margin: 0.5em 0; color: var(--output-p); }
#html-output li { margin: 0.25em 0; }
#html-output li input[type=checkbox] { margin-right: 6px; accent-color: var(--accent); }
#html-output hr { border: none; border-top: 1px solid var(--border); margin: 1.8em 0; }

/* ── hljs ────────────────────────────────────────── */
.hljs { background: transparent !important; }
.hljs-comment,.hljs-quote { color: var(--hljs-comment); font-style: italic; }
.hljs-keyword,.hljs-selector-tag { color: var(--hljs-kw); }
.hljs-string,.hljs-doctag { color: var(--hljs-str); }
.hljs-number,.hljs-literal { color: var(--hljs-num); }
.hljs-title,.hljs-section { color: var(--hljs-fn); }
.hljs-type,.hljs-class .hljs-title { color: var(--hljs-type); }
.hljs-built_in { color: var(--hljs-builtin); }
.hljs-attr,.hljs-tag { color: var(--hljs-tag); }
.hljs-meta { color: var(--text-muted); }
.hljs-deletion { background: var(--hljs-del-bg); }
.hljs-addition { background: var(--hljs-add-bg); }
.hljs-emphasis { font-style: italic; }
.hljs-strong { font-weight: 700; }

/* ── Status bar ──────────────────────────────────── */
.statusbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 16px; height: 26px;
  background: var(--bg-panel);
  border-top: 1px solid var(--border);
  flex-shrink: 0;
  transition: background 0.2s, border-color 0.2s;
}
.status-item {
  font-family: 'DM Mono', monospace;
  font-size: 10px; color: var(--text-muted); letter-spacing: 0.05em;
}
.status-item b { color: var(--text-dim); font-weight: 400; }

/* ── Drag-over ────────────────────────────────────── */
.editor-panel.drag-over .editor-wrap::after {
  content: 'Déposer le fichier .md ici';
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: 'DM Sans', sans-serif; font-size: 14px;
  color: var(--accent);
  background: rgba(15,17,23,0.88);
  border: 2px dashed var(--accent);
  z-index: 10; pointer-events: none; border-radius: 4px;
}
[data-theme="light"] .editor-panel.drag-over .editor-wrap::after {
  background: rgba(245,246,250,0.9);
}

/* ── Width preview indicator on output ───────────── */
#output-inner {
  margin: 0 auto;
  transition: max-width 0.25s ease;
}

/* ── Embed images toggle ─────────────────────────── */
.embed-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  user-select: none;
  padding: 0 2px;
}

.embed-checkbox-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.embed-checkbox-wrap input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0; height: 0;
  pointer-events: none;
}

.embed-checkmark {
  width: 16px; height: 16px;
  border: 1.5px solid var(--border);
  border-radius: 4px;
  background: var(--bg-input);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
  color: transparent;
  flex-shrink: 0;
}

.embed-toggle:hover .embed-checkmark {
  border-color: var(--border-active);
}

.embed-checkbox-wrap input:checked ~ .embed-checkmark {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

[data-theme="light"] .embed-checkbox-wrap input:checked ~ .embed-checkmark {
  background: var(--accent);
  border-color: var(--accent);
}

.embed-text {
  font-family: "DM Sans", sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-dim);
  letter-spacing: 0.01em;
  transition: color 0.15s;
  white-space: nowrap;
}

.embed-toggle:hover .embed-text { color: var(--text); }

#embed-images:checked ~ * ,
.embed-toggle:has(input:checked) .embed-text {
  color: #fff;
}

/* Spinner overlay during export */
.export-spinner {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 1000;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 14px;
  backdrop-filter: blur(3px);
}
.export-spinner.visible { display: flex; }
.export-spinner-box {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 28px 36px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  min-width: 220px;
}
.export-spinner-ring {
  width: 36px; height: 36px;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.export-spinner-label {
  font-family: "DM Mono", monospace;
  font-size: 11px;
  color: var(--text-dim);
  letter-spacing: 0.06em;
  text-align: center;
}
.export-spinner-sub {
  font-family: "DM Mono", monospace;
  font-size: 10px;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}