Upload 6 files

Dockerfile

@@ -0,0 +1,30 @@
+FROM python:3.11-slim
+
+# System deps for WeasyPrint + fonts
+RUN apt-get update && apt-get install -y --no-install-recommends \
+    libpango-1.0-0 libpangocairo-1.0-0 libpangoft2-1.0-0 \
+    libgdk-pixbuf2.0-0 libffi-dev shared-mime-info \
+    libcairo2 libglib2.0-0 libxml2 libxslt1.1 \
+    fonts-noto fonts-noto-core fonts-noto-extra fonts-noto-cjk \
+    fonts-indic fonts-lohit-deva fonts-lohit-beng fonts-lohit-gujr \
+    fonts-lohit-taml fonts-lohit-telu fonts-lohit-knda fonts-lohit-mlym \
+    fonts-lohit-guru fonts-lohit-orya \
+    && fc-cache -f \
+    && rm -rf /var/lib/apt/lists/*
+
+# Create non-root user for HuggingFace Spaces
+RUN useradd -m -u 1000 user
+WORKDIR /app
+
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+
+COPY . .
+
+RUN mkdir -p /tmp/mdtodoc && chown -R user:user /tmp/mdtodoc /app
+
+USER user
+
+EXPOSE 7860
+
+CMD ["uvicorn", "app.main:app", "--host", "0.0.0.0", "--port", "7860"]

app/converter.py

@@ -0,0 +1,1039 @@
+"""
+Universal Markdown -> PDF / DOCX Converter (Web Edition)
+Adapted from testing_script.py for FastAPI web app usage.
+"""
+
+import logging
+logging.getLogger("fontTools").setLevel(logging.WARNING)
+logging.getLogger("weasyprint").setLevel(logging.ERROR)
+
+import os, re, base64, time, zlib, json
+import urllib.request, urllib.error
+from pathlib import Path
+from io import BytesIO
+import threading
+
+# ── Unicode script ranges ──
+SCRIPT_RANGES = {
+    "devanagari": (0x0900, 0x097F),
+    "bengali":    (0x0980, 0x09FF),
+    "gujarati":   (0x0A80, 0x0AFF),
+    "tamil":      (0x0B80, 0x0BFF),
+    "telugu":     (0x0C00, 0x0C7F),
+    "kannada":    (0x0C80, 0x0CFF),
+    "malayalam":  (0x0D00, 0x0D7F),
+    "arabic":     (0x0600, 0x06FF),
+    "cjk":        (0x4E00, 0x9FFF),
+    "gurmukhi":   (0x0A00, 0x0A7F),
+    "odia":       (0x0B00, 0x0B7F),
+}
+
+FONT_CSS_MAP = {
+    "devanagari": "'Noto Sans Devanagari', 'Lohit Devanagari'",
+    "bengali":    "'Noto Sans Bengali', 'Lohit Bengali'",
+    "gujarati":   "'Noto Sans Gujarati', 'Lohit Gujarati'",
+    "tamil":      "'Noto Sans Tamil', 'Lohit Tamil'",
+    "telugu":     "'Noto Sans Telugu', 'Lohit Telugu'",
+    "kannada":    "'Noto Sans Kannada', 'Lohit Kannada'",
+    "malayalam":  "'Noto Sans Malayalam', 'Lohit Malayalam'",
+    "arabic":     "'Noto Sans Arabic'",
+    "cjk":        "'Noto Sans CJK SC'",
+    "gurmukhi":   "'Noto Sans Gurmukhi'",
+    "odia":       "'Noto Sans Oriya'",
+}
+
+EMOJI_REPLACEMENTS = {
+    '\u2705': '**\u2713**',  '\u274c': '**\u2717**',
+    '\u26a0\ufe0f': '**!**',  '\u26a0':  '**!**',
+    '\u2b50': '\u2605',      '\u2714\ufe0f': '**\u2713**',  '\u2714': '**\u2713**',
+    '\u2718':  '**\u2717**',  '\u2753': '?',
+    '\U0001f4ca': '', '\U0001f4c4': '', '\U0001f4e6': '', '\U0001f50d': '', '\U0001f4dd': '',
+    '\U0001f6e0\ufe0f': '', '\U0001f6e0': '', '\u23f3': '', '\U0001f4e5': '', '\U0001f5bc\ufe0f': '',
+    '\U0001f5bc': '', '\U0001f333': '', '\u2699\ufe0f': '', '\u2699': '', '\U0001f504': '',
+    '\U0001f4a1': '', '\U0001f680': '', '\U0001f3af': '', '\U0001f512': '', '\U0001f511': '',
+    '\U0001f4c8': '', '\U0001f4c9': '', '\U0001f5c2\ufe0f': '', '\U0001f5c2': '', '\U0001f4cb': '',
+    '\U0001f527': '', '\U0001f4be': '', '\U0001f310': '', '\U0001f4e1': '', '\U0001f3d7\ufe0f': '',
+    '\U0001f3d7': '', '\U0001f3a8': '', '\U0001f4bb': '', '\U0001f5a5\ufe0f': '', '\U0001f5a5': '',
+}
+
+
+def detect_scripts(text):
+    found = set()
+    for char in text:
+        cp = ord(char)
+        for script, (lo, hi) in SCRIPT_RANGES.items():
+            if lo <= cp <= hi:
+                found.add(script)
+    return found
+
+
+def build_font_stack(scripts):
+    parts = ["'Noto Sans'"]
+    for s in scripts:
+        if s in FONT_CSS_MAP:
+            parts.append(FONT_CSS_MAP[s])
+    parts.extend(["'Segoe UI'", "Arial", "sans-serif"])
+    return ", ".join(parts)
+
+
+def process_emoji(md_text):
+    count = 0
+    for emoji, replacement in EMOJI_REPLACEMENTS.items():
+        n = md_text.count(emoji)
+        if n > 0:
+            md_text = md_text.replace(emoji, replacement)
+            count += n
+    return md_text, count
+
+
+def convert_tree_to_mermaid(tree_code):
+    lines = tree_code.strip().split('\n')
+    graph_lines = ["graph TD"]
+    parent_at_indent = {}
+    for line in lines:
+        stripped = line.strip()
+        if not stripped or stripped == "tree":
+            continue
+        indent = len(line) - len(line.lstrip())
+        content = stripped
+        if content.startswith("-->"):
+            content = content[3:].strip()
+        node_match = re.match(r'(\w+)\["(.+?)"\]', content)
+        if node_match:
+            node_id = node_match.group(1)
+            label   = node_match.group(2)
+        else:
+            node_id = re.sub(r'[^a-zA-Z0-9_]', '_', content)[:30]
+            label   = content
+        parent_at_indent[indent] = node_id
+        parent_id = None
+        best_indent = -1
+        for lvl, nid in parent_at_indent.items():
+            if lvl < indent and lvl > best_indent:
+                best_indent = lvl
+                parent_id = nid
+        if parent_id:
+            graph_lines.append(f'    {parent_id} --> {node_id}["{label}"]')
+        else:
+            graph_lines.append(f'    {node_id}["{label}"]')
+    return '\n'.join(graph_lines)
+
+
+def normalize_mermaid(code):
+    stripped = code.strip()
+    if stripped.startswith("tree"):
+        return convert_tree_to_mermaid(stripped)
+    if stripped.lower().startswith("mermaid"):
+        stripped = stripped[len("mermaid"):].strip()
+    return stripped
+
+
+def render_mermaid_png(code, idx):
+    code = code.strip()
+    encoded = base64.urlsafe_b64encode(code.encode("utf-8")).decode("utf-8")
+    url = f"https://mermaid.ink/img/{encoded}?bgColor=white&width=1100"
+    try:
+        req = urllib.request.Request(url, headers={"User-Agent": "Md2Doc/1.0"})
+        with urllib.request.urlopen(req, timeout=45) as resp:
+            png = resp.read()
+            return base64.b64encode(png).decode("utf-8")
+    except Exception:
+        return None
+
+
+def render_plantuml_png(code, idx):
+    try:
+        compressed = zlib.compress(code.encode('utf-8'), 9)
+        encoded = base64.urlsafe_b64encode(compressed).decode('utf-8')
+        url = f"https://kroki.io/plantuml/png/{encoded}"
+        req = urllib.request.Request(url, headers={"User-Agent": "Md2Doc/1.0"})
+        with urllib.request.urlopen(req, timeout=45) as resp:
+            png = resp.read()
+            return base64.b64encode(png).decode("utf-8")
+    except Exception:
+        return None
+
+
+def is_ascii_art(code_text):
+    art_chars = set('\u2500\u2502\u250c\u2510\u2514\u2518\u251c\u2524\u252c\u2534\u253c\u2501\u2503\u250f\u2513\u2517\u251b\u2523\u252b\u2533\u253b\u254b\u2550\u2551\u2554\u2557\u255a\u255d\u2560\u2563\u2566\u2569\u256c\u25b2\u25bc\u25c4\u25ba\u2190\u2192\u2191\u2193')
+    total = len(code_text.replace(' ', '').replace('\n', ''))
+    if total == 0:
+        return False
+    art_count = sum(1 for c in code_text if c in art_chars)
+    return art_count / max(total, 1) > 0.05
+
+
+def process_diagrams(md_text):
+    diagram_map = {}
+    diagram_count = [0]
+    def replace_block(match):
+        lang = match.group(1).strip().lower()
+        code = match.group(2)
+        diagram_count[0] += 1
+        idx = diagram_count[0]
+        placeholder = f"DIAGRAM_PLACEHOLDER_{idx}"
+        b64 = None
+        if lang == "mermaid":
+            normalized = normalize_mermaid(code)
+            b64 = render_mermaid_png(normalized, idx)
+            time.sleep(0.5)
+        elif lang == "plantuml":
+            b64 = render_plantuml_png(code, idx)
+            time.sleep(0.5)
+        diagram_map[placeholder] = {"lang": lang, "code": code.strip(), "b64": b64}
+        return f"\n{placeholder}\n"
+    pattern = re.compile(r'```(mermaid|plantuml)\s*\n(.*?)```', re.DOTALL)
+    md_text = pattern.sub(replace_block, md_text)
+    return md_text, diagram_map, diagram_count[0]
+
+
+def process_math(md_text):
+    math_count = [0]
+    def replace_block_math(m):
+        math_count[0] += 1
+        content = m.group(1).strip()
+        escaped = content.replace('<', '&lt;').replace('>', '&gt;')
+        return f'\n<div class="math-block">{escaped}</div>\n'
+    def replace_inline_math(m):
+        math_count[0] += 1
+        content = m.group(1).strip()
+        escaped = content.replace('<', '&lt;').replace('>', '&gt;')
+        return f'<span class="math-inline">{escaped}</span>'
+    md_text = re.sub(r'\$\$(.+?)\$\$', replace_block_math, md_text, flags=re.DOTALL)
+    md_text = re.sub(r'(?<!\$)\$([^\$\n]+?)\$(?!\$)', replace_inline_math, md_text)
+    return md_text, math_count[0]
+
+
+def strip_yaml_frontmatter(md_text):
+    pattern = re.compile(r'\A---\s*\n.*?\n---\s*\n', re.DOTALL)
+    m = pattern.match(md_text)
+    if m:
+        return md_text[m.end():], True
+    return md_text, False
+
+
+def process_task_lists(md_text):
+    md_text = re.sub(r'- \[x\]', '- **\u2611**', md_text)
+    md_text = re.sub(r'- \[ \]', '- **\u2610**', md_text)
+    return md_text
+
+
+def parse_markdown(md_text):
+    import markdown
+    html = markdown.markdown(
+        md_text,
+        extensions=[
+            "tables", "toc", "fenced_code", "codehilite",
+            "attr_list", "md_in_html", "sane_lists",
+        ],
+        extension_configs={
+            "codehilite": {"guess_lang": False, "css_class": "codehilite"},
+        },
+    )
+    return html
+
+
+# ── HTML post-processing ──
+from bs4 import BeautifulSoup, NavigableString
+
+
+def inject_diagrams(soup, diagram_map):
+    for p_tag in soup.find_all("p"):
+        text = p_tag.get_text(strip=True)
+        if not text.startswith("DIAGRAM_PLACEHOLDER_"):
+            continue
+        info = diagram_map.get(text.strip())
+        if info is None:
+            continue
+        idx = text.split("_")[-1]
+        if info["b64"]:
+            img = soup.new_tag("img", src=f"data:image/png;base64,{info['b64']}", alt=f"Diagram {idx}")
+            wrapper = soup.new_tag("div", **{"class": "diagram-wrapper"})
+            wrapper.append(img)
+            p_tag.replace_with(wrapper)
+        else:
+            escaped = (info["code"].replace("&","&amp;").replace("<","&lt;").replace(">","&gt;"))
+            html = f'''<div class="diagram-fallback">
+                <div class="diagram-label">{info["lang"].title()} Diagram {idx}</div>
+                <pre class="diagram-code">{escaped}</pre>
+            </div>'''
+            p_tag.replace_with(BeautifulSoup(html, "html.parser"))
+
+
+def style_status_indicators(soup):
+    for td in soup.find_all("td"):
+        cell_text = td.get_text(strip=True)
+        mapping = {'\u2713': 'status-yes', '\u2717': 'status-no', '!': 'status-warn',
+                   '\u2611': 'status-yes', '\u2610': 'status-no'}
+        if cell_text in mapping:
+            td.clear()
+            span = soup.new_tag("span", **{"class": mapping[cell_text]})
+            span.string = cell_text
+            td.append(span)
+        elif cell_text.startswith('\u2713') and len(cell_text) > 1:
+            td.clear()
+            span = soup.new_tag("span", **{"class": "status-yes"})
+            span.string = "\u2713"
+            td.append(span)
+            td.append(f" {cell_text[1:].strip()}")
+
+
+def fix_anchor_links(soup):
+    heading_map = {}
+    for tag in soup.find_all(["h1","h2","h3","h4","h5","h6"]):
+        if tag.get("id"):
+            slug = re.sub(r'[^a-z0-9]+', '-', tag.get_text().strip().lower()).strip('-')
+            heading_map[slug] = tag["id"]
+    for a in soup.find_all("a", href=True):
+        href = a["href"]
+        if href.startswith("#") and not soup.find(id=href[1:]):
+            clean = re.sub(r'[^a-z0-9]+', '-', href[1:].lower()).strip('-')
+            for ts, rid in heading_map.items():
+                if clean in ts or ts in clean:
+                    a["href"] = f"#{rid}"
+                    break
+
+
+def classify_tables(soup):
+    tier_map = {(2, 3): None, (4, 4): "table-wide", (5, 6): "table-xwide",
+                (7, 8): "table-xxwide", (9, 99): "table-xxxwide"}
+    for table in soup.find_all("table"):
+        row = table.find("tr")
+        if not row:
+            continue
+        cols = len(row.find_all(["th", "td"]))
+        for (lo, hi), cls in tier_map.items():
+            if lo <= cols <= hi and cls:
+                table["class"] = table.get("class", []) + [cls]
+                break
+
+
+def detect_signoff_tables(soup):
+    for table in soup.find_all("table"):
+        headers = [th.get_text(strip=True).lower() for th in table.find_all("th")]
+        if "signature" in headers:
+            table["class"] = table.get("class", []) + ["signoff-table"]
+
+
+def remove_empty_elements(soup):
+    for p in soup.find_all("p"):
+        if not p.get_text(strip=True):
+            p.decompose()
+    for br in soup.find_all("br"):
+        nxt = br.next_sibling
+        if nxt and isinstance(nxt, NavigableString) and not nxt.strip():
+            nxt2 = nxt.next_sibling
+            if nxt2 and nxt2.name == "br":
+                br.decompose()
+
+
+def get_heading_level(tag):
+    if tag and tag.name and re.match(r'h[1-6]$', tag.name):
+        return int(tag.name[1])
+    return 0
+
+
+def protect_orphan_headings(soup):
+    for h_tag in soup.find_all(["h3", "h4", "h5"]):
+        if h_tag.find_parent(class_="keep-group"):
+            continue
+        if h_tag.find_parent(class_="cover-page"):
+            continue
+        h_level = get_heading_level(h_tag)
+        siblings = []
+        n = 0
+        nxt = h_tag.next_sibling
+        while nxt and n < 3:
+            if isinstance(nxt, NavigableString):
+                if nxt.strip():
+                    break
+                nxt = nxt.next_sibling
+                continue
+            if get_heading_level(nxt) and get_heading_level(nxt) <= h_level:
+                break
+            siblings.append(nxt)
+            n += 1
+            nxt = nxt.next_sibling
+        if siblings:
+            wrapper = soup.new_tag("div", **{"class": "keep-group"})
+            h_tag.wrap(wrapper)
+            for sib in siblings:
+                wrapper.append(sib)
+
+
+def detect_ascii_diagrams(soup):
+    for pre in soup.find_all("pre"):
+        code = pre.find("code")
+        text = (code or pre).get_text()
+        if is_ascii_art(text):
+            pre["class"] = pre.get("class", []) + ["ascii-diagram"]
+
+
+def extract_section_table(soup, keyword):
+    for h3 in soup.find_all("h3"):
+        if keyword in h3.get_text():
+            parent = h3.parent
+            tbl = None
+            if parent and "keep-group" in (parent.get("class") or []):
+                tbl = parent.find("table")
+                if tbl:
+                    tbl = tbl.extract()
+                parent.extract()
+            else:
+                nxt = h3.find_next_sibling()
+                if nxt and nxt.name == "table":
+                    tbl = nxt.extract()
+                h3.extract()
+            return tbl
+    return None
+
+
+def auto_detect_metadata(soup):
+    meta = {"doc_title": "", "doc_id": "", "org_name": "", "confidential": True}
+    h1 = soup.find("h1")
+    if h1:
+        meta["doc_title"] = h1.get_text(strip=True)
+    for table in soup.find_all("table"):
+        for row in table.find_all("tr"):
+            cells = row.find_all(["td", "th"])
+            if len(cells) >= 2:
+                key = cells[0].get_text(strip=True).lower()
+                val = cells[1].get_text(strip=True)
+                if "document id" in key:
+                    meta["doc_id"] = val
+                elif "document title" in key and not meta["doc_title"]:
+                    meta["doc_title"] = val
+    return meta
+
+
+def build_cover_page(soup, metadata):
+    cover_parts = []
+    first_h1 = soup.find("h1")
+    if first_h1:
+        cover_parts.append(first_h1.extract())
+    first_h2 = soup.find("h2")
+    if first_h2:
+        text = first_h2.get_text(strip=True)
+        if len(text) > 40 or text.startswith("Preparation"):
+            cover_parts.append(first_h2.extract())
+    for el in list(soup.children):
+        if isinstance(el, NavigableString) and not el.strip():
+            continue
+        if el.name == "hr":
+            el.extract()
+        elif el.name in ["h1","h2","h3","h4"]:
+            break
+    doc_ctrl  = extract_section_table(soup, "Document Control")
+    rev_hist  = extract_section_table(soup, "Revision History")
+    dist_list = extract_section_table(soup, "Distribution List")
+    for el in soup.find_all(["h2","h3"]):
+        if "Table of Contents" in el.get_text():
+            parent = el.parent
+            if parent and "keep-group" in (parent.get("class") or []):
+                parent.extract()
+            else:
+                el.extract()
+            break
+    if not cover_parts:
+        return False
+    cover = soup.new_tag("div", **{"class": "cover-page"})
+    bar = soup.new_tag("div", **{"class": "cover-bar"})
+    cover.append(bar)
+    org_name = metadata.get("org_name", "")
+    if org_name:
+        org = soup.new_tag("p", **{"class": "cover-org"})
+        org.string = org_name
+        cover.append(org)
+    for part in cover_parts:
+        part["class"] = part.get("class", []) + ["cover-title"]
+        cover.append(part)
+    meta_tables = [("Document Control", doc_ctrl), ("Revision History", rev_hist), ("Distribution List", dist_list)]
+    for label, tbl in meta_tables:
+        if tbl:
+            lbl = soup.new_tag("h3", **{"class": "cover-section-label"})
+            lbl.string = label
+            w = soup.new_tag("div", **{"class": "cover-meta"})
+            w.append(lbl)
+            w.append(tbl)
+            cover.append(w)
+    if metadata.get("confidential"):
+        stamp = soup.new_tag("p", **{"class": "cover-confidential"})
+        stamp.string = "CONFIDENTIAL \u2014 For authorized personnel only"
+        cover.append(stamp)
+    if soup.contents:
+        soup.contents[0].insert_before(cover)
+    else:
+        soup.append(cover)
+    return True
+
+
+def add_page_breaks(soup, has_cover):
+    h2_list = [h2 for h2 in soup.find_all("h2") if not h2.find_parent(class_="cover-page")]
+    for i, h2 in enumerate(h2_list):
+        if i == 0 and has_cover:
+            continue
+        h2["class"] = h2.get("class", []) + ["page-break-before"]
+    for el in list(soup.children):
+        if isinstance(el, NavigableString) and not el.strip():
+            continue
+        if el.name == "hr":
+            el.extract()
+        elif hasattr(el, "get") and "cover-page" in (el.get("class") or []):
+            break
+        else:
+            break
+
+
+# ── CSS ──
+def build_css(font_stack, metadata):
+    header = metadata.get("header_text", metadata.get("doc_title", ""))
+    doc_id = metadata.get("doc_id", "")
+    conf = "Confidential" if metadata.get("confidential") else ""
+    return f"""
+@page {{ size: A4 portrait; margin: 18mm 16mm 20mm 16mm;
+  @top-center {{ content: "{header}"; font-size: 7pt; color: #6b7280;
+    font-family: {font_stack}; border-bottom: 0.4pt solid #d1d5db; padding-bottom: 3pt; }}
+  @bottom-center {{ content: "Page " counter(page) " of " counter(pages);
+    font-size: 7pt; color: #6b7280; font-family: {font_stack}; }}
+  @bottom-left {{ content: "{conf}"; font-size: 6.5pt; color: #9ca3af; }}
+  @bottom-right {{ content: "Document ID: {doc_id}"; font-size: 6.5pt; color: #9ca3af; }}
+}}
+@page :first {{ margin-top: 12mm;
+  @top-center {{ content: none; }} @bottom-left {{ content: none; }}
+  @bottom-right {{ content: none; }} @bottom-center {{ content: none; }}
+}}
+body {{ font-family: {font_stack}; font-size: 9.5pt; line-height: 1.5; color: #1f2937; orphans: 3; widows: 3; }}
+.status-yes {{ color:#16a34a; font-weight:700; font-size:11pt; }}
+.status-no {{ color:#dc2626; font-weight:700; font-size:11pt; }}
+.status-warn {{ color:#d97706; font-weight:700; font-size:11pt;
+  background:#fef3c7; border-radius:50%; width:14pt; height:14pt; line-height:14pt; text-align:center; }}
+.cover-page {{ page-break-after:always; text-align:center; padding-top:18pt; }}
+.cover-bar {{ width:60%; height:4px; margin:0 auto 14px; border-radius:2px;
+  background:linear-gradient(90deg,#1e3a5f,#2563eb,#1e3a5f); }}
+.cover-org {{ font-size:11pt; color:#1e3a5f; font-weight:600; letter-spacing:0.8px;
+  text-transform:uppercase; margin-bottom:14px; border-bottom:1.5px solid #2563eb;
+  padding-bottom:6px; display:inline-block; }}
+.cover-page .cover-title {{ page-break-before:avoid!important; page-break-after:avoid!important;
+  border-bottom:none!important; margin-top:2px; margin-bottom:2px; }}
+.cover-page h1.cover-title {{ font-size:20pt; color:#1e3a5f; line-height:1.25; margin-bottom:4px; padding-bottom:0; }}
+.cover-page h2.cover-title {{ font-size:9.5pt; font-weight:400; color:#374151;
+  line-height:1.45; max-width:85%; margin:0 auto 10px; padding-bottom:0; }}
+.cover-meta {{ margin-top:6px; width:88%; margin-left:auto; margin-right:auto; text-align:left; }}
+.cover-section-label {{ font-size:8.5pt; color:#1e3a5f; font-weight:600;
+  margin-bottom:2px; margin-top:6px; text-align:left; border-bottom:none!important; page-break-after:avoid; }}
+.cover-meta table {{ font-size:7.5pt!important; table-layout:auto!important; margin:0 auto 2px; }}
+.cover-meta table th {{ background:#1e3a5f; color:#fff; font-size:7pt; padding:3px 4px; }}
+.cover-meta table td {{ font-size:7.5pt; padding:3px 4px; }}
+.cover-confidential {{ margin-top:12px; font-size:7.5pt; color:#dc2626; font-weight:600;
+  letter-spacing:0.4px; border:1.2px solid #dc2626; padding:4px 14px; border-radius:3px; display:inline-block; }}
+h1 {{ font-size:18pt; color:#1e3a5f; border-bottom:2.5px solid #2563eb; padding-bottom:5px;
+  margin-top:16px; margin-bottom:8px; page-break-after:avoid; }}
+h2 {{ font-size:14pt; color:#1e3a5f; border-bottom:1.5px solid #3b82f6; padding-bottom:4px;
+  margin-top:10px; margin-bottom:6px; page-break-after:avoid; }}
+h3 {{ font-size:12pt; color:#1e40af; margin-top:10px; margin-bottom:4px; page-break-after:avoid; }}
+h4 {{ font-size:10.5pt; color:#1d4ed8; margin-top:8px; margin-bottom:3px; page-break-after:avoid; }}
+h5 {{ font-size:9.5pt; color:#1e40af; margin-top:6px; margin-bottom:2px; page-break-after:avoid; }}
+h6 {{ font-size:9pt; color:#374151; margin-top:5px; margin-bottom:2px; page-break-after:avoid; }}
+.page-break-before {{ page-break-before:always; }}
+.keep-group {{ page-break-inside:avoid; }}
+p {{ margin:3px 0; text-align:justify; }}
+strong {{ color:#111827; }}
+a {{ color:#2563eb; text-decoration:none; }}
+ul, ol {{ margin:3px 0 3px 18px; padding-left:8px; }}
+li {{ margin-bottom:1.5px; }}
+li > ul, li > ol {{ margin-top:1px; margin-bottom:1px; }}
+blockquote {{ border-left:3px solid #f59e0b; background:#fffbeb; padding:5px 10px;
+  margin:5px 0; font-style:italic; color:#92400e; font-size:9pt; }}
+hr {{ border:none; height:1.5px; margin:10px 0; background:linear-gradient(to right,#2563eb,#93c5fd,#2563eb); }}
+table {{ width:100%; border-collapse:collapse; margin:6px 0 8px; font-size:8pt;
+  line-height:1.35; table-layout:fixed; word-wrap:break-word; overflow-wrap:break-word; page-break-inside:auto; }}
+thead {{ display:table-header-group; }}
+tr {{ page-break-inside:avoid; }}
+th {{ background:#1e3a5f; color:#fff; font-weight:600; text-align:left; padding:5px;
+  border:1px solid #1e3a5f; font-size:7.5pt; letter-spacing:0.2px; }}
+td {{ padding:4px 5px; border:1px solid #d1d5db; vertical-align:top; }}
+tbody tr:nth-child(even) {{ background:#f0f4ff; }}
+tbody tr:nth-child(odd) {{ background:#fff; }}
+table.table-wide {{ font-size:7.5pt; }}
+table.table-wide th, table.table-wide td {{ padding:3px 4px; }}
+table.table-xwide {{ font-size:7pt; }}
+table.table-xwide th, table.table-xwide td {{ padding:2.5px 3px; }}
+table.table-xxwide {{ font-size:6.5pt; }}
+table.table-xxwide th, table.table-xxwide td {{ padding:2px 2.5px; }}
+table.table-xxxwide {{ font-size:6pt; }}
+table.table-xxxwide th, table.table-xxxwide td {{ padding:1.5px 2px; }}
+table.signoff-table td {{ min-height:30pt; height:30pt; }}
+pre {{ background:#f8fafc; border:1px solid #cbd5e1; border-left:3px solid #2563eb;
+  border-radius:3px; padding:6px 10px; font-family:'Consolas','Courier New',monospace;
+  font-size:6.5pt; line-height:1.25; overflow-wrap:break-word; white-space:pre-wrap;
+  page-break-inside:avoid; margin:4px 0; }}
+code {{ font-family:'Consolas','Courier New',monospace; font-size:7.5pt;
+  background:#eef2ff; padding:0.5px 3px; border-radius:2px; color:#4338ca; }}
+pre code {{ background:none; padding:0; color:#334155; font-size:6.5pt; }}
+pre.ascii-diagram {{ border-left:3px solid #6366f1; background:#faf5ff; }}
+.diagram-wrapper {{ margin:8px auto; text-align:center; page-break-inside:avoid; }}
+.diagram-wrapper img {{ max-width:100%; max-height:580pt; width:auto; height:auto;
+  display:block; margin:0 auto; border:1px solid #e2e8f0; border-radius:4px;
+  box-shadow:0 1px 3px rgba(0,0,0,0.06); }}
+.diagram-fallback {{ margin:6px 0; border:1.2px solid #3b82f6; border-radius:4px;
+  overflow:hidden; page-break-inside:avoid; }}
+.diagram-label {{ background:#1e3a5f; color:#fff; font-size:7.5pt; font-weight:600; padding:3px 8px; }}
+.diagram-code {{ background:#f8fafc; border:none; border-left:none; border-radius:0;
+  margin:0; font-size:6pt; line-height:1.25; padding:5px 8px; color:#1e293b; }}
+.math-inline {{ font-family:'Cambria Math','Times New Roman',serif; font-style:italic;
+  color:#7c3aed; background:#f5f3ff; padding:1px 4px; border-radius:2px; }}
+.math-block {{ font-family:'Cambria Math','Times New Roman',serif; font-style:italic;
+  color:#7c3aed; background:#f5f3ff; padding:8px 16px; margin:6px 0; border-radius:4px;
+  text-align:center; font-size:11pt; page-break-inside:avoid; }}
+p > strong:first-child {{ color:#1e40af; }}
+.cover-page + * {{ page-break-before:avoid!important; }}
+"""
+
+
+def generate_pdf(soup, metadata, font_stack, output_path):
+    from weasyprint import HTML as WeasyHTML
+    css = build_css(font_stack, metadata)
+    title = metadata.get("doc_title", "Document")
+    full_html = f"""<!DOCTYPE html>
+<html lang="en"><head><meta charset="UTF-8"><title>{title}</title>
+<style>{css}</style></head><body>{str(soup)}</body></html>"""
+    full_html = re.sub(r'\n{4,}', '\n\n', full_html)
+    WeasyHTML(string=full_html).write_pdf(output_path)
+    return output_path
+
+
+# ── DOCX generation ──
+def generate_docx(soup, metadata, output_path):
+    from docx import Document
+    from docx.shared import Pt, Inches, Cm, RGBColor
+    from docx.enum.text import WD_ALIGN_PARAGRAPH
+    from docx.oxml.ns import qn
+    from docx.oxml import OxmlElement
+
+    doc = Document()
+    section = doc.sections[0]
+    section.page_width = Cm(21.0)
+    section.page_height = Cm(29.7)
+    section.top_margin = Cm(1.8)
+    section.bottom_margin = Cm(2.0)
+    section.left_margin = Cm(1.6)
+    section.right_margin = Cm(1.6)
+
+    header = section.header
+    header.is_linked_to_previous = False
+    hp = header.paragraphs[0]
+    hp.alignment = WD_ALIGN_PARAGRAPH.CENTER
+    hr = hp.add_run(metadata.get("header_text", metadata.get("doc_title", "")))
+    hr.font.size = Pt(7)
+    hr.font.color.rgb = RGBColor(0x6B, 0x72, 0x80)
+    pPr = hp._p.get_or_add_pPr()
+    pBdr = OxmlElement('w:pBdr')
+    bot = OxmlElement('w:bottom')
+    bot.set(qn('w:val'), 'single')
+    bot.set(qn('w:sz'), '2')
+    bot.set(qn('w:color'), 'D1D5DB')
+    pBdr.append(bot)
+    pPr.append(pBdr)
+
+    footer = section.footer
+    footer.is_linked_to_previous = False
+    fp = footer.paragraphs[0]
+    fp.alignment = WD_ALIGN_PARAGRAPH.CENTER
+    fr = fp.add_run("Page ")
+    fr.font.size = Pt(7)
+    fr.font.color.rgb = RGBColor(0x6B, 0x72, 0x80)
+    run = fp.add_run()
+    fld1 = OxmlElement('w:fldChar')
+    fld1.set(qn('w:fldCharType'), 'begin')
+    run._r.append(fld1)
+    instr = OxmlElement('w:instrText')
+    instr.set(qn('xml:space'), 'preserve')
+    instr.text = ' PAGE '
+    run._r.append(instr)
+    fld2 = OxmlElement('w:fldChar')
+    fld2.set(qn('w:fldCharType'), 'end')
+    run._r.append(fld2)
+    run.font.size = Pt(7)
+    run.font.color.rgb = RGBColor(0x6B, 0x72, 0x80)
+
+    def shade_cell(cell, color_hex):
+        shd = OxmlElement('w:shd')
+        shd.set(qn('w:fill'), color_hex)
+        shd.set(qn('w:val'), 'clear')
+        cell._tc.get_or_add_tcPr().append(shd)
+
+    def add_runs(paragraph, element):
+        for child in element.children:
+            if isinstance(child, NavigableString):
+                text = str(child)
+                if text.strip() or text == ' ':
+                    paragraph.add_run(text)
+            elif child.name in ('strong', 'b'):
+                r = paragraph.add_run(child.get_text())
+                r.bold = True
+            elif child.name in ('em', 'i'):
+                r = paragraph.add_run(child.get_text())
+                r.italic = True
+            elif child.name == 'code':
+                r = paragraph.add_run(child.get_text())
+                r.font.name = 'Consolas'
+                r.font.size = Pt(8)
+                r.font.color.rgb = RGBColor(0x43, 0x38, 0xCA)
+            elif child.name == 'a':
+                r = paragraph.add_run(child.get_text())
+                r.font.color.rgb = RGBColor(0x25, 0x63, 0xEB)
+            elif child.name == 'span':
+                cls = child.get('class', [])
+                r = paragraph.add_run(child.get_text())
+                if 'status-yes' in cls:
+                    r.font.color.rgb = RGBColor(0x16, 0xA3, 0x4A); r.bold = True
+                elif 'status-no' in cls:
+                    r.font.color.rgb = RGBColor(0xDC, 0x26, 0x26); r.bold = True
+                elif 'status-warn' in cls:
+                    r.font.color.rgb = RGBColor(0xD9, 0x77, 0x06); r.bold = True
+                elif 'math-inline' in cls:
+                    r.font.name = 'Cambria Math'; r.italic = True
+            elif child.name == 'br':
+                paragraph.add_run('\n')
+            else:
+                text = child.get_text()
+                if text.strip():
+                    paragraph.add_run(text)
+
+    def add_table(element):
+        rows = element.find_all('tr')
+        if not rows:
+            return
+        first_cells = rows[0].find_all(['th', 'td'])
+        ncols = len(first_cells)
+        if ncols == 0:
+            return
+        tbl = doc.add_table(rows=0, cols=ncols)
+        tbl.style = 'Table Grid'
+        tbl.autofit = True
+        for ri, row in enumerate(rows):
+            cells = row.find_all(['th', 'td'])
+            docx_row = tbl.add_row()
+            for ci, cell in enumerate(cells):
+                if ci >= ncols:
+                    break
+                docx_cell = docx_row.cells[ci]
+                docx_cell.paragraphs[0].clear()
+                para = docx_cell.paragraphs[0]
+                para.paragraph_format.space_after = Pt(0)
+                para.paragraph_format.space_before = Pt(0)
+                add_runs(para, cell)
+                if cell.name == 'th':
+                    shade_cell(docx_cell, '1E3A5F')
+                    for r in para.runs:
+                        r.font.color.rgb = RGBColor(0xFF, 0xFF, 0xFF)
+                        r.bold = True; r.font.size = Pt(8)
+                elif ri % 2 == 0 and ri > 0:
+                    shade_cell(docx_cell, 'F0F4FF')
+                for r in para.runs:
+                    if r.font.size is None:
+                        r.font.size = Pt(8)
+        doc.add_paragraph()
+
+    def add_list(element, ordered=False, level=0):
+        style = 'List Number' if ordered else 'List Bullet'
+        for li in element.find_all('li', recursive=False):
+            para = doc.add_paragraph(style=style)
+            para.paragraph_format.left_indent = Cm(1.0 + level * 0.6)
+            para.paragraph_format.space_after = Pt(1)
+            add_runs(para, li)
+            for sub in li.find_all(['ul', 'ol'], recursive=False):
+                add_list(sub, ordered=(sub.name == 'ol'), level=level+1)
+
+    def add_image(img_tag):
+        src = img_tag.get('src', '')
+        if src.startswith('data:image'):
+            try:
+                b64_data = src.split(',', 1)[1]
+                img_bytes = base64.b64decode(b64_data)
+                stream = BytesIO(img_bytes)
+                doc.add_picture(stream, width=Inches(5.5))
+                doc.paragraphs[-1].alignment = WD_ALIGN_PARAGRAPH.CENTER
+            except Exception:
+                doc.add_paragraph("[Image could not be embedded]")
+
+    h2_count = 0
+
+    def walk(parent):
+        nonlocal h2_count
+        for el in parent.children:
+            if isinstance(el, NavigableString):
+                text = str(el).strip()
+                if text:
+                    doc.add_paragraph(text)
+                continue
+            classes = el.get('class', [])
+            if 'cover-page' in classes:
+                for part in el.find_all(class_='cover-title'):
+                    if part.name == 'h1':
+                        h = doc.add_heading(level=0)
+                        h.alignment = WD_ALIGN_PARAGRAPH.CENTER
+                        r = h.add_run(part.get_text())
+                        r.font.size = Pt(20)
+                        r.font.color.rgb = RGBColor(0x1E, 0x3A, 0x5F)
+                    elif part.name == 'h2':
+                        p = doc.add_paragraph()
+                        p.alignment = WD_ALIGN_PARAGRAPH.CENTER
+                        r = p.add_run(part.get_text())
+                        r.font.size = Pt(10)
+                        r.font.color.rgb = RGBColor(0x37, 0x41, 0x51)
+                org_el = el.find(class_='cover-org')
+                if org_el:
+                    p = doc.add_paragraph()
+                    p.alignment = WD_ALIGN_PARAGRAPH.CENTER
+                    r = p.add_run(org_el.get_text())
+                    r.bold = True; r.font.size = Pt(11)
+                    r.font.color.rgb = RGBColor(0x1E, 0x3A, 0x5F)
+                for meta_div in el.find_all(class_='cover-meta'):
+                    tbl_el = meta_div.find('table')
+                    lbl = meta_div.find(class_='cover-section-label')
+                    if lbl:
+                        p = doc.add_paragraph()
+                        r = p.add_run(lbl.get_text())
+                        r.bold = True; r.font.size = Pt(9)
+                    if tbl_el:
+                        add_table(tbl_el)
+                conf = el.find(class_='cover-confidential')
+                if conf:
+                    p = doc.add_paragraph()
+                    p.alignment = WD_ALIGN_PARAGRAPH.CENTER
+                    r = p.add_run(conf.get_text())
+                    r.bold = True; r.font.size = Pt(8)
+                    r.font.color.rgb = RGBColor(0xDC, 0x26, 0x26)
+                doc.add_page_break()
+                continue
+            if el.name and re.match(r'h[1-6]$', el.name):
+                level = int(el.name[1])
+                if level == 2:
+                    h2_count += 1
+                    if h2_count > 1:
+                        doc.add_page_break()
+                h = doc.add_heading(level=min(level, 9))
+                add_runs(h, el)
+                continue
+            if el.name == 'p':
+                para = doc.add_paragraph()
+                add_runs(para, el)
+                continue
+            if el.name == 'table':
+                add_table(el)
+                continue
+            if el.name == 'pre':
+                code_text = el.get_text()
+                para = doc.add_paragraph()
+                r = para.add_run(code_text)
+                r.font.name = 'Consolas'; r.font.size = Pt(7)
+                pPr = para._p.get_or_add_pPr()
+                shd = OxmlElement('w:shd')
+                shd.set(qn('w:fill'), 'F8FAFC')
+                shd.set(qn('w:val'), 'clear')
+                pPr.append(shd)
+                continue
+            if el.name == 'ul':
+                add_list(el, ordered=False); continue
+            if el.name == 'ol':
+                add_list(el, ordered=True); continue
+            if el.name == 'blockquote':
+                para = doc.add_paragraph()
+                para.paragraph_format.left_indent = Cm(1.0)
+                r = para.add_run(el.get_text())
+                r.italic = True
+                r.font.color.rgb = RGBColor(0x92, 0x40, 0x0E)
+                r.font.size = Pt(9)
+                continue
+            if el.name == 'hr':
+                para = doc.add_paragraph()
+                pPr = para._p.get_or_add_pPr()
+                pBdr = OxmlElement('w:pBdr')
+                b = OxmlElement('w:bottom')
+                b.set(qn('w:val'), 'single')
+                b.set(qn('w:sz'), '4')
+                b.set(qn('w:color'), '3B82F6')
+                pBdr.append(b)
+                pPr.append(pBdr)
+                continue
+            if el.name == 'div' and 'math-block' in classes:
+                para = doc.add_paragraph()
+                para.alignment = WD_ALIGN_PARAGRAPH.CENTER
+                r = para.add_run(el.get_text())
+                r.font.name = 'Cambria Math'; r.italic = True; r.font.size = Pt(11)
+                continue
+            if 'diagram-wrapper' in classes:
+                img = el.find('img')
+                if img:
+                    add_image(img)
+                continue
+            if 'diagram-fallback' in classes:
+                pre = el.find('pre')
+                if pre:
+                    para = doc.add_paragraph()
+                    r = para.add_run(pre.get_text())
+                    r.font.name = 'Consolas'; r.font.size = Pt(6.5)
+                continue
+            if el.name in ['div', 'section', 'article', 'main']:
+                walk(el); continue
+            if el.name:
+                text = el.get_text(strip=True)
+                if text:
+                    doc.add_paragraph(text)
+
+    walk(soup)
+    doc.save(output_path)
+    return output_path
+
+
+# ══════════════════════════════════════════════════════════════
+#  Main convert function with progress callback
+# ══════════════════════════════════════════════════════════════
+
+class ConversionJob:
+    def __init__(self):
+        self.status = "pending"
+        self.percent = 0
+        self.steps = []
+        self.results = []
+        self.error = None
+        self._lock = threading.Lock()
+
+    def update(self, percent, step, detail=""):
+        with self._lock:
+            self.percent = percent
+            self.steps.append({"step": step, "detail": detail})
+
+    def get_state(self):
+        with self._lock:
+            return {
+                "status": self.status,
+                "percent": self.percent,
+                "steps": list(self.steps),
+                "results": list(self.results),
+                "error": self.error,
+            }
+
+    def complete(self, results):
+        with self._lock:
+            self.status = "complete"
+            self.percent = 100
+            self.results = results
+
+    def fail(self, error):
+        with self._lock:
+            self.status = "error"
+            self.error = str(error)
+
+
+def run_conversion(job: ConversionJob, input_path: str, output_format: str,
+                   org_name: str, confidential: bool):
+    try:
+        job.status = "running"
+        stem = Path(input_path).stem
+        parent = str(Path(input_path).parent)
+        want_pdf = output_format in ("pdf", "both")
+        want_docx = output_format in ("docx", "both")
+        pdf_path = os.path.join(parent, f"{stem}.pdf")
+        docx_path = os.path.join(parent, f"{stem}.docx")
+
+        # Step 1: Read file
+        job.update(5, "Reading markdown file...")
+        with open(input_path, "r", encoding="utf-8") as f:
+            md_text = f.read()
+        job.update(10, "File loaded", f"{len(md_text):,} characters")
+
+        # Step 2: Detect scripts
+        job.update(12, "Detecting languages...")
+        scripts = detect_scripts(md_text)
+        if scripts:
+            job.update(15, "Scripts detected", ", ".join(sorted(scripts)))
+        else:
+            job.update(15, "Language detection complete", "Latin only")
+        font_stack = build_font_stack(scripts)
+
+        # Step 3: Pre-process
+        job.update(18, "Stripping YAML frontmatter...")
+        md_text, had_yaml = strip_yaml_frontmatter(md_text)
+
+        job.update(22, "Processing emoji...")
+        md_text, emoji_count = process_emoji(md_text)
+        if emoji_count:
+            job.update(25, "Emoji processed", f"{emoji_count} replacements")
+
+        job.update(28, "Processing task lists...")
+        md_text = process_task_lists(md_text)
+
+        job.update(30, "Processing math expressions...")
+        md_text, math_count = process_math(md_text)
+        if math_count:
+            job.update(33, "Math processed", f"{math_count} expressions")
+
+        job.update(35, "Rendering diagrams...")
+        md_text, diagram_map, diag_count = process_diagrams(md_text)
+        if diag_count:
+            job.update(42, "Diagrams rendered", f"{diag_count} diagram(s)")
+        else:
+            job.update(42, "No diagrams found")
+
+        # Step 4: Parse markdown
+        job.update(45, "Parsing markdown to HTML...")
+        html_body = parse_markdown(md_text)
+        job.update(50, "HTML generated")
+
+        # Step 5: Metadata
+        job.update(52, "Detecting document metadata...")
+        temp_soup = BeautifulSoup(html_body, "html.parser")
+        metadata = auto_detect_metadata(temp_soup)
+        if org_name:
+            metadata["org_name"] = org_name
+        elif not metadata.get("org_name"):
+            metadata["org_name"] = ""
+        metadata["confidential"] = confidential
+        metadata["header_text"] = metadata.get("doc_title", stem)
+        job.update(55, "Metadata ready",
+                   f"Title: {metadata.get('doc_title', 'N/A')[:50]}")
+
+        # Step 6: Post-process HTML
+        job.update(58, "Post-processing HTML...")
+        soup = BeautifulSoup(html_body, "html.parser")
+        inject_diagrams(soup, diagram_map)
+        job.update(60, "Diagrams injected")
+        style_status_indicators(soup)
+        fix_anchor_links(soup)
+        classify_tables(soup)
+        detect_signoff_tables(soup)
+        detect_ascii_diagrams(soup)
+        remove_empty_elements(soup)
+        protect_orphan_headings(soup)
+        job.update(65, "HTML post-processing complete")
+
+        has_cover = build_cover_page(soup, metadata)
+        add_page_breaks(soup, has_cover)
+        job.update(68, "Cover page built" if has_cover else "No cover page needed")
+
+        # Step 7: Generate outputs
+        results = []
+        if want_pdf:
+            job.update(70, "Generating PDF...", "This may take a moment")
+            generate_pdf(soup, metadata, font_stack, pdf_path)
+            size = os.path.getsize(pdf_path)
+            results.append({"name": f"{stem}.pdf", "path": pdf_path,
+                            "size": f"{size/1024:.0f} KB", "type": "pdf"})
+            job.update(85, "PDF generated", f"{size/1024:.0f} KB")
+
+        if want_docx:
+            job.update(87, "Generating DOCX...", "Building document structure")
+            generate_docx(soup, metadata, docx_path)
+            size = os.path.getsize(docx_path)
+            results.append({"name": f"{stem}.docx", "path": docx_path,
+                            "size": f"{size/1024:.0f} KB", "type": "docx"})
+            job.update(97, "DOCX generated", f"{size/1024:.0f} KB")
+
+        job.complete(results)
+
+    except Exception as e:
+        import traceback
+        traceback.print_exc()
+        job.fail(str(e))

app/main.py

@@ -0,0 +1,159 @@
+import uuid
+import os
+import asyncio
+import json
+import threading
+import shutil
+from pathlib import Path
+
+from fastapi import FastAPI, UploadFile, File, Form, Request
+from fastapi.responses import HTMLResponse, FileResponse, StreamingResponse
+from fastapi.templating import Jinja2Templates
+
+from app.converter import ConversionJob, run_conversion
+
+app = FastAPI(title="MD to Doc", description="Universal Markdown to PDF/DOCX Converter")
+
+BASE_DIR = Path(__file__).resolve().parent
+templates = Jinja2Templates(directory=str(BASE_DIR / "templates"))
+
+UPLOAD_DIR = Path("/tmp/mdtodoc")
+UPLOAD_DIR.mkdir(parents=True, exist_ok=True)
+
+# In-memory stores
+uploaded_files: dict = {}  # file_id -> {filename, path, size, job_dir}
+conversion_jobs: dict = {}  # job_id -> ConversionJob
+
+
+@app.get("/", response_class=HTMLResponse)
+async def index(request: Request):
+    return templates.TemplateResponse("index.html", {"request": request})
+
+
+@app.post("/api/upload")
+async def upload_file(file: UploadFile = File(...)):
+    if not file.filename.endswith(".md"):
+        return {"error": "Only .md files are supported"}
+
+    file_id = str(uuid.uuid4())[:8]
+    job_dir = UPLOAD_DIR / file_id
+    job_dir.mkdir(parents=True, exist_ok=True)
+
+    file_path = job_dir / file.filename
+    content = await file.read()
+    with open(file_path, "wb") as f:
+        f.write(content)
+
+    size = len(content)
+    uploaded_files[file_id] = {
+        "filename": file.filename,
+        "path": str(file_path),
+        "size": size,
+        "job_dir": str(job_dir),
+    }
+
+    size_str = f"{size / 1024:.1f} KB" if size < 1024 * 1024 else f"{size / (1024*1024):.1f} MB"
+    return {"id": file_id, "filename": file.filename, "size": size_str}
+
+
+@app.delete("/api/files/{file_id}")
+async def delete_file(file_id: str):
+    info = uploaded_files.pop(file_id, None)
+    if info:
+        job_dir = info.get("job_dir")
+        if job_dir and os.path.exists(job_dir):
+            shutil.rmtree(job_dir, ignore_errors=True)
+    return {"ok": True}
+
+
+@app.post("/api/convert")
+async def start_conversion(
+    file_id: str = Form(...),
+    format: str = Form("both"),
+    org_name: str = Form(""),
+    confidential: bool = Form(True),
+):
+    info = uploaded_files.get(file_id)
+    if not info:
+        return {"error": "File not found. Please re-upload."}
+
+    job_id = file_id
+    job = ConversionJob()
+    conversion_jobs[job_id] = job
+
+    thread = threading.Thread(
+        target=run_conversion,
+        args=(job, info["path"], format, org_name, confidential),
+        daemon=True,
+    )
+    thread.start()
+
+    return {"job_id": job_id}
+
+
+@app.get("/api/progress/{job_id}")
+async def progress_stream(job_id: str):
+    job = conversion_jobs.get(job_id)
+    if not job:
+        return StreamingResponse(
+            iter([f"data: {json.dumps({'error': 'Job not found'})}\n\n"]),
+            media_type="text/event-stream",
+        )
+
+    async def event_generator():
+        last_step_count = 0
+        while True:
+            state = job.get_state()
+            current_steps = state["steps"]
+
+            # Send any new steps
+            if len(current_steps) > last_step_count:
+                for step in current_steps[last_step_count:]:
+                    event = {
+                        "type": "progress",
+                        "percent": state["percent"],
+                        "step": step["step"],
+                        "detail": step.get("detail", ""),
+                    }
+                    yield f"data: {json.dumps(event)}\n\n"
+                last_step_count = len(current_steps)
+
+            if state["status"] == "complete":
+                event = {
+                    "type": "complete",
+                    "percent": 100,
+                    "results": state["results"],
+                }
+                yield f"data: {json.dumps(event)}\n\n"
+                break
+            elif state["status"] == "error":
+                event = {
+                    "type": "error",
+                    "message": state["error"],
+                }
+                yield f"data: {json.dumps(event)}\n\n"
+                break
+
+            await asyncio.sleep(0.3)
+
+    return StreamingResponse(event_generator(), media_type="text/event-stream")
+
+
+@app.get("/api/download/{job_id}/{filename}")
+async def download_file(job_id: str, filename: str):
+    info = uploaded_files.get(job_id)
+    if not info:
+        return {"error": "File not found"}
+
+    file_path = os.path.join(info["job_dir"], filename)
+    if not os.path.exists(file_path):
+        return {"error": "Output file not found"}
+
+    media_type = "application/pdf" if filename.endswith(".pdf") else \
+                 "application/vnd.openxmlformats-officedocument.wordprocessingml.document"
+
+    return FileResponse(
+        path=file_path,
+        filename=filename,
+        media_type=media_type,
+    )

app/templates/index.html

@@ -0,0 +1,709 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>MD to Doc - Markdown Converter</title>
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Google+Sans:wght@400;500;700&display=swap" rel="stylesheet">
+<script src="https://cdn.tailwindcss.com"></script>
+<script>
+tailwind.config = {
+  theme: {
+    extend: {
+      fontFamily: { sans: ['Inter', 'system-ui', 'sans-serif'] },
+      colors: {
+        m3: {
+          primary: '#1a73e8',
+          'on-primary': '#ffffff',
+          'primary-container': '#d3e3fd',
+          'on-primary-container': '#041e49',
+          secondary: '#5f6368',
+          surface: '#f8fafb',
+          'surface-container': '#ffffff',
+          'surface-container-high': '#f1f3f4',
+          'on-surface': '#1f1f1f',
+          'on-surface-variant': '#5f6368',
+          outline: '#c4c7c5',
+          'outline-variant': '#e1e3e1',
+          error: '#b3261e',
+          'error-container': '#f9dedc',
+          success: '#0d652d',
+          'success-container': '#c4eed0',
+        }
+      },
+      borderRadius: { 'xl': '16px', '2xl': '28px' },
+      boxShadow: {
+        'm3-1': '0 1px 2px rgba(0,0,0,0.1), 0 1px 3px rgba(0,0,0,0.08)',
+        'm3-2': '0 1px 3px rgba(0,0,0,0.12), 0 4px 8px rgba(0,0,0,0.08)',
+        'm3-3': '0 4px 8px rgba(0,0,0,0.12), 0 8px 16px rgba(0,0,0,0.08)',
+      }
+    }
+  }
+}
+</script>
+<style>
+  * { box-sizing: border-box; }
+  body { background: #f0f2f5; min-height: 100vh; }
+
+  /* M3 Animations */
+  @keyframes fadeInUp {
+    from { opacity: 0; transform: translateY(16px); }
+    to { opacity: 1; transform: translateY(0); }
+  }
+  @keyframes fadeIn {
+    from { opacity: 0; }
+    to { opacity: 1; }
+  }
+  @keyframes scaleIn {
+    from { opacity: 0; transform: scale(0.92); }
+    to { opacity: 1; transform: scale(1); }
+  }
+  @keyframes slideInRight {
+    from { opacity: 0; transform: translateX(20px); }
+    to { opacity: 1; transform: translateX(0); }
+  }
+  @keyframes shimmer {
+    0% { background-position: -200% 0; }
+    100% { background-position: 200% 0; }
+  }
+  @keyframes pulseRing {
+    0% { box-shadow: 0 0 0 0 rgba(26, 115, 232, 0.3); }
+    70% { box-shadow: 0 0 0 12px rgba(26, 115, 232, 0); }
+    100% { box-shadow: 0 0 0 0 rgba(26, 115, 232, 0); }
+  }
+  @keyframes checkmark {
+    0% { stroke-dashoffset: 24; }
+    100% { stroke-dashoffset: 0; }
+  }
+  @keyframes progressPulse {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.7; }
+  }
+
+  .animate-fade-in-up { animation: fadeInUp 0.4s cubic-bezier(0.2, 0, 0, 1) forwards; }
+  .animate-fade-in { animation: fadeIn 0.3s ease forwards; }
+  .animate-scale-in { animation: scaleIn 0.3s cubic-bezier(0.2, 0, 0, 1) forwards; }
+  .animate-slide-right { animation: slideInRight 0.35s cubic-bezier(0.2, 0, 0, 1) forwards; }
+
+  .skeleton {
+    background: linear-gradient(90deg, #e1e3e1 25%, #f1f3f4 50%, #e1e3e1 75%);
+    background-size: 200% 100%;
+    animation: shimmer 1.5s infinite;
+  }
+
+  /* Drop zone */
+  .drop-zone { transition: all 0.25s cubic-bezier(0.2, 0, 0, 1); }
+  .drop-zone.drag-over {
+    border-color: #1a73e8 !important;
+    background: #e8f0fe !important;
+    transform: scale(1.01);
+  }
+  .drop-zone.drag-over .drop-icon { transform: translateY(-4px); }
+  .drop-icon { transition: transform 0.3s cubic-bezier(0.2, 0, 0, 1); }
+
+  /* Progress bar */
+  .progress-bar {
+    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+    background: linear-gradient(90deg, #1a73e8, #4285f4, #1a73e8);
+    background-size: 200% 100%;
+    animation: shimmer 2s infinite;
+  }
+
+  /* Step items */
+  .step-item { transition: all 0.3s cubic-bezier(0.2, 0, 0, 1); }
+
+  /* Button ripple */
+  .btn-primary {
+    position: relative; overflow: hidden;
+    transition: all 0.2s cubic-bezier(0.2, 0, 0, 1);
+  }
+  .btn-primary:hover { box-shadow: 0 2px 8px rgba(26, 115, 232, 0.4); transform: translateY(-1px); }
+  .btn-primary:active { transform: translateY(0) scale(0.98); }
+  .btn-primary:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }
+
+  /* File item hover */
+  .file-item { transition: all 0.2s ease; }
+  .file-item:hover { background: #f1f3f4; }
+
+  /* Download card */
+  .download-card {
+    transition: all 0.2s cubic-bezier(0.2, 0, 0, 1);
+  }
+  .download-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.12); }
+
+  /* Section transitions */
+  .section-enter {
+    max-height: 0; opacity: 0; overflow: hidden;
+    transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
+  }
+  .section-enter.visible {
+    max-height: 800px; opacity: 1;
+  }
+
+  /* Format toggle */
+  .format-btn {
+    transition: all 0.2s cubic-bezier(0.2, 0, 0, 1);
+  }
+  .format-btn.active {
+    background: #1a73e8; color: white; box-shadow: 0 2px 6px rgba(26, 115, 232, 0.3);
+  }
+
+  /* Custom checkbox */
+  .m3-checkbox {
+    appearance: none; width: 20px; height: 20px; border: 2px solid #5f6368;
+    border-radius: 4px; cursor: pointer; position: relative;
+    transition: all 0.15s ease;
+  }
+  .m3-checkbox:checked {
+    background: #1a73e8; border-color: #1a73e8;
+  }
+  .m3-checkbox:checked::after {
+    content: ''; position: absolute; left: 5px; top: 1px;
+    width: 6px; height: 11px; border: solid white; border-width: 0 2px 2px 0;
+    transform: rotate(45deg);
+  }
+
+  /* Toast */
+  .toast {
+    animation: fadeInUp 0.3s cubic-bezier(0.2, 0, 0, 1) forwards;
+  }
+  .toast.exit {
+    animation: fadeIn 0.2s ease reverse forwards;
+  }
+</style>
+</head>
+<body class="font-sans text-m3-on-surface antialiased">
+
+<!-- Header -->
+<header class="bg-white/80 backdrop-blur-md border-b border-m3-outline-variant sticky top-0 z-50">
+  <div class="max-w-5xl mx-auto px-6 py-4 flex items-center gap-3">
+    <div class="w-10 h-10 rounded-xl bg-m3-primary flex items-center justify-center shadow-m3-1">
+      <svg class="w-5 h-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"/>
+      </svg>
+    </div>
+    <div>
+      <h1 class="text-lg font-semibold text-m3-on-surface leading-tight">MD to Doc</h1>
+      <p class="text-xs text-m3-on-surface-variant">Universal Markdown to PDF & DOCX converter</p>
+    </div>
+  </div>
+</header>
+
+<!-- Main Content -->
+<main class="max-w-5xl mx-auto px-4 sm:px-6 py-8">
+
+  <!-- Upload Card -->
+  <div class="bg-white rounded-2xl shadow-m3-2 overflow-hidden animate-fade-in-up">
+    <div class="grid grid-cols-1 md:grid-cols-2 divide-y md:divide-y-0 md:divide-x divide-m3-outline-variant">
+
+      <!-- Drop Zone (Left) -->
+      <div class="p-6 sm:p-8 flex items-center justify-center">
+        <div id="dropZone" class="drop-zone w-full border-2 border-dashed border-m3-outline rounded-2xl p-8 sm:p-10 text-center cursor-pointer hover:border-m3-primary/50 hover:bg-m3-primary/[0.02]"
+             onclick="document.getElementById('fileInput').click()">
+          <div class="drop-icon flex justify-center mb-4">
+            <div class="w-14 h-14 rounded-full bg-m3-primary-container flex items-center justify-center">
+              <svg class="w-7 h-7 text-m3-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"/>
+              </svg>
+            </div>
+          </div>
+          <p class="text-base font-medium text-m3-on-surface mb-1">Drag & Drop files to upload</p>
+          <p class="text-sm text-m3-on-surface-variant mb-4">or</p>
+          <button type="button" class="inline-flex items-center gap-2 px-6 py-2.5 bg-m3-primary text-white text-sm font-medium rounded-full shadow-m3-1 hover:shadow-m3-2 transition-all duration-200 hover:-translate-y-0.5 active:scale-95">
+            <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"/>
+            </svg>
+            Browse
+          </button>
+          <p class="text-xs text-m3-on-surface-variant mt-4">Supported files: .md (Markdown)</p>
+          <input type="file" id="fileInput" accept=".md" class="hidden" multiple>
+        </div>
+      </div>
+
+      <!-- File List (Right) -->
+      <div class="p-6 sm:p-8 min-h-[300px] flex flex-col">
+        <h2 class="text-base font-semibold text-m3-on-surface mb-4">Uploaded files</h2>
+
+        <!-- Empty State -->
+        <div id="emptyState" class="flex-1 flex flex-col items-center justify-center text-center py-6">
+          <div class="w-16 h-16 rounded-full bg-m3-surface-container-high flex items-center justify-center mb-3">
+            <svg class="w-8 h-8 text-m3-outline" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z"/>
+            </svg>
+          </div>
+          <p class="text-sm text-m3-on-surface-variant">No files uploaded yet</p>
+          <p class="text-xs text-m3-outline mt-1">Drop a .md file to get started</p>
+        </div>
+
+        <!-- File List -->
+        <div id="fileList" class="space-y-2 flex-1 hidden"></div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Options Card -->
+  <div id="optionsCard" class="section-enter mt-6">
+    <div class="bg-white rounded-2xl shadow-m3-1 p-6 sm:p-8 animate-fade-in-up">
+      <h2 class="text-base font-semibold text-m3-on-surface mb-5">Conversion Options</h2>
+
+      <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
+        <!-- Format Selection -->
+        <div>
+          <label class="text-sm font-medium text-m3-on-surface-variant mb-2.5 block">Output Format</label>
+          <div class="flex gap-2">
+            <button type="button" class="format-btn px-5 py-2.5 rounded-full text-sm font-medium border border-m3-outline text-m3-on-surface-variant hover:bg-m3-surface-container-high" data-format="pdf">PDF</button>
+            <button type="button" class="format-btn px-5 py-2.5 rounded-full text-sm font-medium border border-m3-outline text-m3-on-surface-variant hover:bg-m3-surface-container-high" data-format="docx">DOCX</button>
+            <button type="button" class="format-btn active px-5 py-2.5 rounded-full text-sm font-medium border border-transparent" data-format="both">Both</button>
+          </div>
+        </div>
+
+        <!-- Organization -->
+        <div>
+          <label for="orgName" class="text-sm font-medium text-m3-on-surface-variant mb-2.5 block">Organization Name</label>
+          <input type="text" id="orgName" placeholder="Optional - for cover page"
+                 class="w-full px-4 py-2.5 rounded-xl border border-m3-outline text-sm bg-m3-surface focus:outline-none focus:border-m3-primary focus:ring-2 focus:ring-m3-primary/20 transition-all duration-200 placeholder:text-m3-outline">
+        </div>
+      </div>
+
+      <!-- Confidential Toggle -->
+      <div class="flex items-center gap-3 mt-5">
+        <input type="checkbox" id="confidential" checked class="m3-checkbox">
+        <label for="confidential" class="text-sm text-m3-on-surface cursor-pointer select-none">Mark as Confidential</label>
+      </div>
+
+      <!-- Convert Button -->
+      <div class="mt-6 flex justify-center">
+        <button id="convertBtn" onclick="startConversion()" class="btn-primary inline-flex items-center gap-2.5 px-10 py-3 bg-m3-primary text-white text-sm font-semibold rounded-full shadow-m3-1">
+          <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 12c0-1.232-.046-2.453-.138-3.662a4.006 4.006 0 00-3.7-3.7 48.678 48.678 0 00-7.324 0 4.006 4.006 0 00-3.7 3.7c-.017.22-.032.441-.046.662M19.5 12l3-3m-3 3l-3-3m-12 3c0 1.232.046 2.453.138 3.662a4.006 4.006 0 003.7 3.7 48.656 48.656 0 007.324 0 4.006 4.006 0 003.7-3.7c.017-.22.032-.441.046-.662M4.5 12l3 3m-3-3l-3 3"/>
+          </svg>
+          Convert
+        </button>
+      </div>
+    </div>
+  </div>
+
+  <!-- Progress Card -->
+  <div id="progressCard" class="section-enter mt-6">
+    <div class="bg-white rounded-2xl shadow-m3-2 p-6 sm:p-8">
+
+      <!-- Progress Header -->
+      <div class="flex items-center justify-between mb-4">
+        <h2 class="text-base font-semibold text-m3-on-surface">Converting...</h2>
+        <span id="progressPercent" class="text-sm font-semibold text-m3-primary">0%</span>
+      </div>
+
+      <!-- Progress Bar -->
+      <div class="w-full h-2 bg-m3-surface-container-high rounded-full overflow-hidden mb-6">
+        <div id="progressBar" class="progress-bar h-full rounded-full" style="width: 0%"></div>
+      </div>
+
+      <!-- Steps -->
+      <div id="stepsList" class="space-y-2 max-h-[280px] overflow-y-auto pr-2"></div>
+    </div>
+  </div>
+
+  <!-- Results Card -->
+  <div id="resultsCard" class="section-enter mt-6">
+    <div class="bg-white rounded-2xl shadow-m3-2 p-6 sm:p-8">
+      <div class="flex items-center gap-3 mb-6">
+        <div class="w-10 h-10 rounded-full bg-m3-success-container flex items-center justify-center">
+          <svg class="w-5 h-5 text-m3-success" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/>
+          </svg>
+        </div>
+        <div>
+          <h2 class="text-base font-semibold text-m3-on-surface">Conversion Complete</h2>
+          <p class="text-sm text-m3-on-surface-variant">Your files are ready to download</p>
+        </div>
+      </div>
+
+      <div id="downloadList" class="grid grid-cols-1 sm:grid-cols-2 gap-3"></div>
+
+      <!-- Convert Another -->
+      <div class="mt-6 pt-5 border-t border-m3-outline-variant flex justify-center">
+        <button onclick="resetAll()" class="inline-flex items-center gap-2 px-6 py-2.5 text-m3-primary text-sm font-medium rounded-full border border-m3-primary/30 hover:bg-m3-primary/5 transition-all duration-200">
+          <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"/>
+          </svg>
+          Convert Another File
+        </button>
+      </div>
+    </div>
+  </div>
+
+  <!-- Error Card -->
+  <div id="errorCard" class="section-enter mt-6">
+    <div class="bg-white rounded-2xl shadow-m3-2 p-6 sm:p-8 border-l-4 border-m3-error">
+      <div class="flex items-start gap-3">
+        <div class="w-10 h-10 rounded-full bg-m3-error-container flex items-center justify-center flex-shrink-0">
+          <svg class="w-5 h-5 text-m3-error" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z"/>
+          </svg>
+        </div>
+        <div>
+          <h2 class="text-base font-semibold text-m3-error">Conversion Failed</h2>
+          <p id="errorMessage" class="text-sm text-m3-on-surface-variant mt-1"></p>
+          <button onclick="resetToUpload()" class="mt-4 inline-flex items-center gap-2 px-5 py-2 text-m3-error text-sm font-medium rounded-full border border-m3-error/30 hover:bg-m3-error/5 transition-all duration-200">
+            Try Again
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+
+</main>
+
+<!-- Footer -->
+<footer class="text-center py-6 text-xs text-m3-on-surface-variant">
+  MD to Doc v1.0 &mdash; Universal Markdown Converter
+</footer>
+
+<script>
+// ─── State ───
+let files = {};
+let selectedFormat = 'both';
+let currentJobId = null;
+
+// ─── Elements ───
+const dropZone = document.getElementById('dropZone');
+const fileInput = document.getElementById('fileInput');
+const fileList = document.getElementById('fileList');
+const emptyState = document.getElementById('emptyState');
+const optionsCard = document.getElementById('optionsCard');
+const progressCard = document.getElementById('progressCard');
+const resultsCard = document.getElementById('resultsCard');
+const errorCard = document.getElementById('errorCard');
+const progressBar = document.getElementById('progressBar');
+const progressPercent = document.getElementById('progressPercent');
+const stepsList = document.getElementById('stepsList');
+const downloadList = document.getElementById('downloadList');
+const convertBtn = document.getElementById('convertBtn');
+
+// ─── Drag & Drop ───
+['dragenter', 'dragover'].forEach(ev => {
+  dropZone.addEventListener(ev, e => { e.preventDefault(); dropZone.classList.add('drag-over'); });
+});
+['dragleave', 'drop'].forEach(ev => {
+  dropZone.addEventListener(ev, e => { e.preventDefault(); dropZone.classList.remove('drag-over'); });
+});
+dropZone.addEventListener('drop', e => {
+  const dt = e.dataTransfer;
+  if (dt.files.length) handleFiles(dt.files);
+});
+fileInput.addEventListener('change', e => {
+  if (e.target.files.length) handleFiles(e.target.files);
+  e.target.value = '';
+});
+
+// ─── File Upload ───
+async function handleFiles(filesList) {
+  for (const file of filesList) {
+    if (!file.name.endsWith('.md')) {
+      showToast('Only .md files are supported', 'error');
+      continue;
+    }
+    await uploadFile(file);
+  }
+}
+
+async function uploadFile(file) {
+  const formData = new FormData();
+  formData.append('file', file);
+
+  // Show uploading state
+  const tempId = 'temp-' + Date.now();
+  addFileToList(tempId, file.name, 'Uploading...', true);
+
+  try {
+    const resp = await fetch('/api/upload', { method: 'POST', body: formData });
+    const data = await resp.json();
+
+    if (data.error) {
+      removeFileFromList(tempId);
+      showToast(data.error, 'error');
+      return;
+    }
+
+    removeFileFromList(tempId);
+    files[data.id] = { filename: data.filename, size: data.size };
+    addFileToList(data.id, data.filename, data.size, false);
+    updateUI();
+  } catch (err) {
+    removeFileFromList(tempId);
+    showToast('Upload failed: ' + err.message, 'error');
+  }
+}
+
+function addFileToList(id, name, size, uploading) {
+  emptyState.classList.add('hidden');
+  fileList.classList.remove('hidden');
+
+  const ext = name.split('.').pop().toLowerCase();
+  const colors = { md: { bg: 'bg-blue-50', text: 'text-blue-600', label: 'MD' } };
+  const c = colors[ext] || { bg: 'bg-gray-50', text: 'text-gray-600', label: ext.toUpperCase() };
+
+  const el = document.createElement('div');
+  el.id = 'file-' + id;
+  el.className = 'file-item flex items-center gap-3 p-3 rounded-xl animate-slide-right';
+  el.innerHTML = `
+    <div class="w-10 h-10 ${c.bg} rounded-xl flex items-center justify-center flex-shrink-0">
+      <span class="text-xs font-bold ${c.text}">${c.label}</span>
+    </div>
+    <div class="flex-1 min-w-0">
+      <p class="text-sm font-medium text-m3-on-surface truncate">${name}</p>
+      ${uploading
+        ? `<div class="mt-1.5 h-1 bg-m3-surface-container-high rounded-full overflow-hidden">
+             <div class="h-full bg-m3-primary rounded-full" style="width:60%;animation:shimmer 1s infinite;background:linear-gradient(90deg,#1a73e8 25%,#4285f4 50%,#1a73e8 75%);background-size:200% 100%"></div>
+           </div>`
+        : `<p class="text-xs text-m3-on-surface-variant">${size}</p>`
+      }
+    </div>
+    ${!uploading ? `
+    <button onclick="deleteFile('${id}')" class="w-8 h-8 rounded-full flex items-center justify-center text-m3-error/60 hover:text-m3-error hover:bg-m3-error-container/50 transition-all duration-200 flex-shrink-0" title="Remove">
+      <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"/>
+      </svg>
+    </button>` : `
+    <div class="w-8 h-8 flex items-center justify-center flex-shrink-0">
+      <svg class="w-4 h-4 text-m3-outline animate-spin" fill="none" viewBox="0 0 24 24">
+        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+      </svg>
+    </div>`}
+  `;
+  fileList.appendChild(el);
+}
+
+function removeFileFromList(id) {
+  const el = document.getElementById('file-' + id);
+  if (el) {
+    el.style.opacity = '0';
+    el.style.transform = 'translateX(20px)';
+    el.style.transition = 'all 0.25s ease';
+    setTimeout(() => el.remove(), 250);
+  }
+}
+
+async function deleteFile(id) {
+  await fetch(`/api/files/${id}`, { method: 'DELETE' });
+  delete files[id];
+  removeFileFromList(id);
+  setTimeout(updateUI, 300);
+}
+
+// ─── UI State ───
+function updateUI() {
+  const hasFiles = Object.keys(files).length > 0;
+  if (!hasFiles) {
+    emptyState.classList.remove('hidden');
+    fileList.classList.add('hidden');
+    optionsCard.classList.remove('visible');
+  } else {
+    optionsCard.classList.add('visible');
+  }
+}
+
+// ─── Format Toggle ───
+document.querySelectorAll('.format-btn').forEach(btn => {
+  btn.addEventListener('click', () => {
+    document.querySelectorAll('.format-btn').forEach(b => {
+      b.classList.remove('active');
+      b.classList.add('border-m3-outline', 'text-m3-on-surface-variant');
+      b.classList.remove('border-transparent');
+    });
+    btn.classList.add('active');
+    btn.classList.remove('border-m3-outline', 'text-m3-on-surface-variant');
+    btn.classList.add('border-transparent');
+    selectedFormat = btn.dataset.format;
+  });
+});
+
+// ─── Conversion ───
+async function startConversion() {
+  const fileIds = Object.keys(files);
+  if (fileIds.length === 0) {
+    showToast('Please upload a markdown file first', 'error');
+    return;
+  }
+
+  const fileId = fileIds[0]; // Convert first file
+  const orgName = document.getElementById('orgName').value;
+  const confidential = document.getElementById('confidential').checked;
+
+  // Show progress
+  convertBtn.disabled = true;
+  progressCard.classList.add('visible');
+  resultsCard.classList.remove('visible');
+  errorCard.classList.remove('visible');
+  stepsList.innerHTML = '';
+  progressBar.style.width = '0%';
+  progressPercent.textContent = '0%';
+
+  try {
+    const formData = new FormData();
+    formData.append('file_id', fileId);
+    formData.append('format', selectedFormat);
+    formData.append('org_name', orgName);
+    formData.append('confidential', confidential);
+
+    const resp = await fetch('/api/convert', { method: 'POST', body: formData });
+    const data = await resp.json();
+
+    if (data.error) {
+      showError(data.error);
+      return;
+    }
+
+    currentJobId = data.job_id;
+    listenProgress(data.job_id);
+  } catch (err) {
+    showError(err.message);
+  }
+}
+
+function listenProgress(jobId) {
+  const eventSource = new EventSource(`/api/progress/${jobId}`);
+  let stepIndex = 0;
+
+  eventSource.onmessage = (event) => {
+    const data = JSON.parse(event.data);
+
+    if (data.type === 'progress') {
+      progressBar.style.width = data.percent + '%';
+      progressPercent.textContent = data.percent + '%';
+      addStep(data.step, data.detail, stepIndex++);
+    } else if (data.type === 'complete') {
+      eventSource.close();
+      progressBar.style.width = '100%';
+      progressPercent.textContent = '100%';
+      addStep('Conversion complete!', '', stepIndex++, true);
+
+      setTimeout(() => {
+        showResults(data.results, jobId);
+        convertBtn.disabled = false;
+      }, 600);
+    } else if (data.type === 'error') {
+      eventSource.close();
+      showError(data.message);
+      convertBtn.disabled = false;
+    }
+  };
+
+  eventSource.onerror = () => {
+    eventSource.close();
+    showError('Connection to server lost. Please try again.');
+    convertBtn.disabled = false;
+  };
+}
+
+function addStep(text, detail, index, isComplete = false) {
+  const el = document.createElement('div');
+  el.className = 'step-item flex items-start gap-3 animate-fade-in';
+  el.style.animationDelay = '0.05s';
+
+  const iconClass = isComplete
+    ? 'bg-m3-success-container text-m3-success'
+    : 'bg-m3-primary-container text-m3-primary';
+  const icon = isComplete
+    ? '<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/>'
+    : '<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/>';
+
+  el.innerHTML = `
+    <div class="w-6 h-6 rounded-full ${iconClass} flex items-center justify-center flex-shrink-0 mt-0.5">
+      <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
+        ${icon}
+      </svg>
+    </div>
+    <div class="flex-1 min-w-0">
+      <p class="text-sm font-medium text-m3-on-surface">${text}</p>
+      ${detail ? `<p class="text-xs text-m3-on-surface-variant mt-0.5">${detail}</p>` : ''}
+    </div>
+  `;
+  stepsList.appendChild(el);
+  stepsList.scrollTop = stepsList.scrollHeight;
+}
+
+function showResults(results, jobId) {
+  resultsCard.classList.add('visible');
+  downloadList.innerHTML = '';
+
+  results.forEach((file, i) => {
+    const isPdf = file.type === 'pdf';
+    const bgColor = isPdf ? 'bg-red-50' : 'bg-blue-50';
+    const textColor = isPdf ? 'text-red-600' : 'text-blue-600';
+    const borderColor = isPdf ? 'border-red-100' : 'border-blue-100';
+    const label = isPdf ? 'PDF' : 'DOCX';
+    const icon = isPdf
+      ? '<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z"/>'
+      : '<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z"/>';
+
+    const card = document.createElement('a');
+    card.href = `/api/download/${jobId}/${file.name}`;
+    card.className = `download-card flex items-center gap-4 p-4 rounded-xl border ${borderColor} ${bgColor}/30 cursor-pointer animate-scale-in`;
+    card.style.animationDelay = `${i * 0.1}s`;
+    card.innerHTML = `
+      <div class="w-12 h-12 ${bgColor} rounded-xl flex items-center justify-center flex-shrink-0">
+        <span class="text-xs font-bold ${textColor}">${label}</span>
+      </div>
+      <div class="flex-1 min-w-0">
+        <p class="text-sm font-medium text-m3-on-surface truncate">${file.name}</p>
+        <p class="text-xs text-m3-on-surface-variant">${file.size}</p>
+      </div>
+      <div class="w-10 h-10 rounded-full bg-white shadow-m3-1 flex items-center justify-center flex-shrink-0">
+        <svg class="w-5 h-5 ${textColor}" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+          <path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3"/>
+        </svg>
+      </div>
+    `;
+    downloadList.appendChild(card);
+  });
+}
+
+function showError(message) {
+  progressCard.classList.remove('visible');
+  errorCard.classList.add('visible');
+  document.getElementById('errorMessage').textContent = message;
+  convertBtn.disabled = false;
+}
+
+// ─── Reset ───
+function resetAll() {
+  // Clean up server files
+  Object.keys(files).forEach(id => {
+    fetch(`/api/files/${id}`, { method: 'DELETE' });
+  });
+  files = {};
+  fileList.innerHTML = '';
+  emptyState.classList.remove('hidden');
+  fileList.classList.add('hidden');
+  optionsCard.classList.remove('visible');
+  progressCard.classList.remove('visible');
+  resultsCard.classList.remove('visible');
+  errorCard.classList.remove('visible');
+  convertBtn.disabled = false;
+}
+
+function resetToUpload() {
+  progressCard.classList.remove('visible');
+  resultsCard.classList.remove('visible');
+  errorCard.classList.remove('visible');
+  convertBtn.disabled = false;
+}
+
+// ─── Toast ───
+function showToast(message, type = 'info') {
+  const toast = document.createElement('div');
+  const bgColor = type === 'error' ? 'bg-m3-error' : 'bg-m3-primary';
+  toast.className = `toast fixed bottom-6 left-1/2 -translate-x-1/2 ${bgColor} text-white px-6 py-3 rounded-full shadow-m3-3 text-sm font-medium z-50`;
+  toast.textContent = message;
+  document.body.appendChild(toast);
+  setTimeout(() => {
+    toast.classList.add('exit');
+    setTimeout(() => toast.remove(), 200);
+  }, 3000);
+}
+</script>
+</body>
+</html>

requirements.txt

@@ -0,0 +1,9 @@
+fastapi==0.115.6
+uvicorn[standard]==0.34.0
+jinja2==3.1.5
+python-multipart==0.0.20
+markdown==3.7
+weasyprint==63.1
+beautifulsoup4==4.13.3
+Pillow==11.1.0
+python-docx==1.1.2