diff --git a/web/app.ts b/web/app.ts
index 54beb1a..4388d18 100644
--- a/web/app.ts
+++ b/web/app.ts
@@ -4,20 +4,51 @@ import { writePsdBlob, initPsdWriter } from "./platform/psd-writer.js";
 import { convertSvg } from "../src/core/converter-core.js";
 import { buildTextLayer } from "../src/psd/text-layer.js";
 
+// ── State ──
+let downloadUrl: string | null = null;
+let downloadFilename = "output.psd";
+let pendingSvgText: string | null = null;
+let pendingFile: File | null = null;
+let isConverting = false;
+
+interface HistoryEntry {
+  name: string;
+  size: string;
+  url: string;
+  filename: string;
+}
+const history: HistoryEntry[] = [];
+
+// ── DOM ──
 const dropZone = document.getElementById("dropZone")!;
 const fileInput = document.getElementById("fileInput") as HTMLInputElement;
 const browseLink = document.getElementById("browseLink")!;
 const scaleInput = document.getElementById("scaleInput") as HTMLInputElement;
-const status = document.getElementById("status")!;
-const progressFill = document.getElementById("progressFill")!;
-const statusText = document.getElementById("statusText")!;
+const centerPanel = document.getElementById("centerPanel")!;
+const previewArea = document.getElementById("previewArea")!;
+const fileNameEl = document.getElementById("fileName")!;
+const fileDimsEl = document.getElementById("fileDims")!;
+const fileSizeEl = document.getElementById("fileSize")!;
+const previewCanvas = document.getElementById("previewCanvas")!;
+const dimBadge = document.getElementById("dimBadge")!;
+const changeFileBtn = document.getElementById("changeFileBtn")!;
+const convertBtn = document.getElementById("convertBtn")!;
+const conversionStatus = document.getElementById("conversionStatus")!;
+const progressBar = document.getElementById("progressBar")!;
+const statusMsg = document.getElementById("statusMsg")!;
+const statusTime = document.getElementById("statusTime")!;
+const resultArea = document.getElementById("resultArea")!;
+const resultName = document.getElementById("resultName")!;
+const resultMeta = document.getElementById("resultMeta")!;
 const downloadBtn = document.getElementById("downloadBtn")!;
-const layerList = document.getElementById("layerList")!;
-const layerItems = document.getElementById("layerItems")!;
-
-let downloadUrl: string | null = null;
-let downloadFilename = "output.psd";
-
+const placeholder = document.getElementById("placeholder")!;
+const layerTree = document.getElementById("layerTree")!;
+const layerCount = document.getElementById("layerCount")!;
+const historyHead = document.getElementById("historyHead")!;
+const historyChevron = document.getElementById("historyChevron")!;
+const historyItems = document.getElementById("historyItems")!;
+
+// ── Init ──
 async function initialize(): Promise<void> {
   showStatus("初始化 WASM 渲染器...");
   try {
@@ -29,6 +60,7 @@ async function initialize(): Promise<void> {
   }
 }
 
+// ── Drag & Drop ──
 dropZone.addEventListener("dragover", (e) => {
   e.preventDefault();
   dropZone.classList.add("dragover");
@@ -42,10 +74,15 @@ dropZone.addEventListener("drop", (e) => {
   e.preventDefault();
   dropZone.classList.remove("dragover");
   const file = e.dataTransfer?.files[0];
-  if (file) handleFile(file);
+  if (file) loadFile(file);
+});
+
+browseLink.addEventListener("click", (e) => {
+  e.preventDefault();
+  e.stopPropagation();
+  fileInput.click();
 });
 
-browseLink.addEventListener("click", () => fileInput.click());
 dropZone.addEventListener("click", (e) => {
   if (e.target === browseLink) return;
   fileInput.click();
@@ -53,10 +90,18 @@ dropZone.addEventListener("click", (e) => {
 
 fileInput.addEventListener("change", () => {
   const file = fileInput.files?.[0];
-  if (file) handleFile(file);
+  if (file) loadFile(file);
   fileInput.value = "";
 });
 
+changeFileBtn.addEventListener("click", () => fileInput.click());
+
+convertBtn.addEventListener("click", () => {
+  if (pendingSvgText && pendingFile) {
+    handleConvert(pendingFile, pendingSvgText);
+  }
+});
+
 downloadBtn.addEventListener("click", () => {
   if (!downloadUrl) return;
   const a = document.createElement("a");
@@ -65,124 +110,290 @@ downloadBtn.addEventListener("click", () => {
   a.click();
 });
 
-async function handleFile(file: File): Promise<void> {
+// ── History Toggle ──
+let historyOpen = false;
+historyHead.addEventListener("click", () => {
+  historyOpen = !historyOpen;
+  historyChevron.classList.toggle("open", historyOpen);
+  historyItems.classList.toggle("visible", historyOpen);
+});
+
+// ── Load File → Preview ──
+async function loadFile(file: File): Promise<void> {
   if (!file.name.toLowerCase().endsWith(".svg")) {
     showError("请选择 .svg 文件");
     return;
   }
 
+  pendingFile = file;
+  const text = await file.text();
+  pendingSvgText = text;
+
+  // Parse dimensions
+  const parser = new DOMParser();
+  const doc = parser.parseFromString(text, "image/svg+xml");
+  const svgEl = doc.querySelector("svg");
+  let w = 0, h = 0;
+  if (svgEl) {
+    const vb = svgEl.getAttribute("viewBox");
+    if (vb) {
+      const parts = vb.split(/[\s,]+/).map(Number);
+      w = parts[2] || 0;
+      h = parts[3] || 0;
+    }
+    if (!w) w = parseFloat(svgEl.getAttribute("width") || "0");
+    if (!h) h = parseFloat(svgEl.getAttribute("height") || "0");
+  }
+
+  fileNameEl.textContent = file.name;
+  fileDimsEl.textContent = w && h ? `${Math.round(w)} × ${Math.round(h)}` : "—";
+  fileSizeEl.textContent = formatBytes(file.size);
+  dimBadge.textContent = w && h ? `${Math.round(w)}×${Math.round(h)}` : "";
+
+  // SVG preview image
+  const old = previewCanvas.querySelector(".svg-img");
+  if (old) old.remove();
+  const blob = new Blob([text], { type: "image/svg+xml" });
+  const url = URL.createObjectURL(blob);
+  const img = document.createElement("img");
+  img.className = "svg-img";
+  img.src = url;
+  img.alt = file.name;
+  previewCanvas.appendChild(img);
+
+  // Show preview, hide drop zone
+  dropZone.style.display = "none";
+  previewArea.classList.add("visible");
+  centerPanel.classList.add("has-preview");
+  resultArea.classList.remove("visible");
+  hideStatus();
+}
+
+// ── Convert ──
+async function handleConvert(file: File, text: string): Promise<void> {
+  if (isConverting) return;
+  isConverting = true;
+  convertBtn.textContent = "转换中...";
+  convertBtn.style.pointerEvents = "none";
   downloadFilename = file.name.replace(/\.svg$/i, ".psd");
-  hideDownload();
-  hideLayerList();
+
+  resultArea.classList.remove("visible");
+  clearLayers();
 
   try {
-    showStatus("读取文件...");
-    const text = await file.text();
+    const scale = parseFloat(scaleInput.value) || 1;
+    const t0 = performance.now();
 
     showStatus("解析 SVG...");
     const { svg, width, height, viewBox } = parseSvgString(text);
 
-    const scale = parseFloat(scaleInput.value) || 1;
-
-    showStatus("转换中...");
-    const { psd, layerCount } = await convertSvg(svg, width, height, viewBox, {
+    showStatus("转换图层...");
+    const { psd, layerCount: count } = await convertSvg(svg, width, height, viewBox, {
       scale,
       renderElement,
       buildTextLayer: (desc, svgRoot, w, h, s) => buildTextLayer(desc, svgRoot, w, h, s),
       onProgress: (current, total) => {
         const pct = Math.round((current / total) * 100);
         setProgress(pct);
-        setStatusText(`渲染图层: ${current}/${total}`);
+        statusMsg.textContent = `渲染图层 ${current}/${total}`;
       },
     });
 
-    showStatus("生成 PSD 文件...");
+    showStatus("生成 PSD...");
     setProgress(100);
 
-    const blob = writePsdBlob(psd as Parameters<typeof writePsdBlob>[0]);
+    const psdBlob = writePsdBlob(psd as Parameters<typeof writePsdBlob>[0]);
 
     if (downloadUrl) URL.revokeObjectURL(downloadUrl);
-    downloadUrl = URL.createObjectURL(blob);
+    downloadUrl = URL.createObjectURL(psdBlob);
 
+    const elapsed = (performance.now() - t0).toFixed(0);
     const psdObj = psd as { width: number; height: number };
-    const sizeMB = (blob.size / 1024 / 1024).toFixed(2);
-    setStatusText(`完成! ${psdObj.width}×${psdObj.height}, ${layerCount} 个图层, ${sizeMB} MB`);
-    showDownload();
+    const sizeMB = (psdBlob.size / 1024 / 1024).toFixed(2);
+
+    progressBar.style.width = "100%";
+    progressBar.classList.add("done");
+    statusMsg.textContent = `${psdObj.width}×${psdObj.height} · ${count} 图层`;
+    statusTime.textContent = `${elapsed}ms`;
+
+    showResult(downloadFilename, `${sizeMB} MB · ${count} 图层`);
     showLayerPreview((psd as { children?: PsdChild[] }).children || []);
+    addHistory(downloadFilename, sizeMB);
   } catch (e) {
     showError((e as Error).message);
+  } finally {
+    isConverting = false;
+    convertBtn.textContent = "转换";
+    convertBtn.style.pointerEvents = "";
   }
 }
 
+// ── Layer Tree ──
 interface PsdChild {
   name?: string;
   children?: PsdChild[];
   text?: unknown;
 }
 
-function showLayerPreview(children: PsdChild[], indent = 0): void {
-  if (indent === 0) layerItems.innerHTML = "";
-  for (const child of children) {
-    const div = document.createElement("div");
-    div.className = "layer-item";
-    div.style.paddingLeft = `${0.75 + indent * 1.2}rem`;
+function showLayerPreview(children: PsdChild[]): void {
+  layerTree.innerHTML = "";
+  placeholder.style.display = "none";
+
+  let total = 0;
+  function count(items: PsdChild[]) {
+    for (const c of items) { total++; if (c.children) count(c.children); }
+  }
+  count(children);
+  layerCount.textContent = String(total);
+
+  buildNodes(children, layerTree, 0);
+}
 
-    const type = child.children ? "group" : child.text ? "text" : "graphic";
-    div.innerHTML = `<span class="layer-type ${type}">${type}</span> ${escapeHtml(child.name || "unnamed")}`;
-    layerItems.appendChild(div);
+function buildNodes(children: PsdChild[], container: HTMLElement, depth: number): void {
+  for (const child of children) {
+    const isGroup = !!child.children;
+    const isText = !!child.text;
+    const type = isGroup ? "group" : isText ? "text" : "graphic";
+
+    const row = document.createElement("div");
+    row.className = "layer-row";
+
+    if (depth > 0) {
+      const indent = document.createElement("span");
+      indent.className = "layer-indent";
+      indent.style.width = `${depth * 14}px`;
+      row.appendChild(indent);
+    }
 
-    if (child.children) {
-      showLayerPreview(child.children, indent + 1);
+    if (isGroup) {
+      const toggle = document.createElement("span");
+      toggle.className = "layer-toggle";
+      toggle.innerHTML = `<svg viewBox="0 0 24 24"><polyline points="6 9 12 15 18 9"/></svg>`;
+      row.appendChild(toggle);
+
+      const childBox = document.createElement("div");
+      childBox.className = "layer-children";
+
+      toggle.addEventListener("click", (e) => {
+        e.stopPropagation();
+        toggle.classList.toggle("collapsed");
+        childBox.classList.toggle("collapsed");
+      });
+
+      row.appendChild(layerIcon(type));
+      row.appendChild(layerName(child.name || "Group"));
+
+      const node = document.createElement("div");
+      node.appendChild(row);
+      node.appendChild(childBox);
+      container.appendChild(node);
+      buildNodes(child.children!, childBox, depth + 1);
+    } else {
+      const spacer = document.createElement("span");
+      spacer.className = "layer-spacer";
+      row.appendChild(spacer);
+      row.appendChild(layerIcon(type));
+      row.appendChild(layerName(child.name || "unnamed"));
+      container.appendChild(row);
     }
   }
-  if (indent === 0) {
-    layerList.classList.add("visible");
+}
+
+function layerIcon(type: string): HTMLElement {
+  const el = document.createElement("span");
+  el.className = `layer-icon ${type}`;
+  if (type === "group") {
+    el.innerHTML = `<svg viewBox="0 0 24 24"><path d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2z"/></svg>`;
+  } else if (type === "text") {
+    el.innerHTML = `<svg viewBox="0 0 24 24"><polyline points="4 7 4 4 20 4 20 7"/><line x1="9.5" y1="20" x2="14.5" y2="20"/><line x1="12" y1="4" x2="12" y2="20"/></svg>`;
+  } else {
+    el.innerHTML = `<svg viewBox="0 0 24 24"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>`;
   }
+  return el;
+}
+
+function layerName(name: string): HTMLElement {
+  const el = document.createElement("span");
+  el.className = "layer-name";
+  el.textContent = name;
+  return el;
+}
+
+function clearLayers(): void {
+  layerTree.innerHTML = "";
+  placeholder.style.display = "";
+  layerCount.textContent = "0";
+}
+
+// ── History ──
+function addHistory(name: string, size: string): void {
+  if (!downloadUrl) return;
+  history.unshift({ name, size: `${size} MB`, url: downloadUrl, filename: downloadFilename });
+  renderHistory();
 }
 
-function escapeHtml(str: string): string {
-  const div = document.createElement("div");
-  div.textContent = str;
-  return div.innerHTML;
+function renderHistory(): void {
+  historyItems.innerHTML = "";
+  for (const entry of history) {
+    const row = document.createElement("div");
+    row.className = "history-row";
+    row.innerHTML = `
+      <span class="history-dot"></span>
+      <span class="history-name">${esc(entry.name)}</span>
+      <span class="history-size">${esc(entry.size)}</span>
+    `;
+    row.addEventListener("click", () => {
+      const a = document.createElement("a");
+      a.href = entry.url;
+      a.download = entry.filename;
+      a.click();
+    });
+    historyItems.appendChild(row);
+  }
 }
 
+// ── Status Helpers ──
 function showStatus(msg: string): void {
-  status.classList.add("visible");
-  statusText.classList.remove("error");
-  statusText.textContent = msg;
-  progressFill.style.width = "0%";
+  conversionStatus.classList.add("visible");
+  statusMsg.classList.remove("error");
+  statusMsg.textContent = msg;
+  progressBar.style.width = "0%";
+  progressBar.classList.remove("done");
 }
 
 function hideStatus(): void {
-  status.classList.remove("visible");
+  conversionStatus.classList.remove("visible");
 }
 
 function showError(msg: string): void {
-  status.classList.add("visible");
-  statusText.classList.add("error");
-  statusText.textContent = msg;
-  progressFill.style.width = "0%";
+  conversionStatus.classList.add("visible");
+  statusMsg.classList.add("error");
+  statusMsg.textContent = msg;
+  progressBar.style.width = "0%";
+  progressBar.classList.remove("done");
 }
 
 function setProgress(pct: number): void {
-  progressFill.style.width = `${pct}%`;
-}
-
-function setStatusText(msg: string): void {
-  statusText.classList.remove("error");
-  statusText.textContent = msg;
+  progressBar.style.width = `${pct}%`;
 }
 
-function showDownload(): void {
-  downloadBtn.classList.add("visible");
+function showResult(name: string, meta: string): void {
+  resultArea.classList.add("visible");
+  resultName.textContent = name;
+  resultMeta.textContent = meta;
 }
 
-function hideDownload(): void {
-  downloadBtn.classList.remove("visible");
+// ── Utils ──
+function esc(s: string): string {
+  const d = document.createElement("div");
+  d.textContent = s;
+  return d.innerHTML;
 }
 
-function hideLayerList(): void {
-  layerList.classList.remove("visible");
+function formatBytes(b: number): string {
+  if (b < 1024) return `${b} B`;
+  if (b < 1048576) return `${(b / 1024).toFixed(1)} KB`;
+  return `${(b / 1048576).toFixed(2)} MB`;
 }
 
 initialize();
diff --git a/web/index.html b/web/index.html
index 3e65093..57688d4 100644
--- a/web/index.html
+++ b/web/index.html
@@ -3,216 +3,928 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>SVG → PSD 转换器</title>
+  <title>SVG → PSD</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Instrument+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
   <style>
+    :root {
+      --bg-primary: #0c0b0a;
+      --bg-secondary: #15140f;
+      --bg-tertiary: #1e1c16;
+      --bg-hover: #28261e;
+      --border: #302d24;
+      --border-active: #4d4835;
+      --text-primary: #ece8df;
+      --text-secondary: #a09882;
+      --text-muted: #6b6451;
+      --accent: #e8a44a;
+      --accent-light: #f0c078;
+      --accent-glow: rgba(232, 164, 74, 0.2);
+      --accent-dim: rgba(232, 164, 74, 0.06);
+      --success: #7ec97a;
+      --success-glow: rgba(126, 201, 122, 0.15);
+      --error: #d9645a;
+      --font-display: 'Instrument Sans', -apple-system, sans-serif;
+      --font-mono: 'DM Mono', 'SF Mono', 'Fira Code', monospace;
+      --radius-s: 6px;
+      --radius-m: 10px;
+      --radius-l: 16px;
+    }
+
     * { margin: 0; padding: 0; box-sizing: border-box; }
 
     body {
-      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-      background: #f5f5f7;
-      color: #1d1d1f;
+      font-family: var(--font-display);
+      background: var(--bg-primary);
+      color: var(--text-primary);
       min-height: 100vh;
+      overflow-x: hidden;
+    }
+
+    /* ── Subtle grain ── */
+    body::before {
+      content: "";
+      position: fixed;
+      inset: 0;
+      opacity: 0.03;
+      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
+      background-size: 256px 256px;
+      pointer-events: none;
+      z-index: 9999;
+    }
+
+    .app {
+      display: grid;
+      grid-template-rows: auto 1fr;
+      min-height: 100vh;
+    }
+
+    /* ── Header ── */
+    header {
+      border-bottom: 1px solid var(--border);
+      padding: 0.85rem 1.5rem;
       display: flex;
-      flex-direction: column;
       align-items: center;
-      justify-content: center;
-      padding: 2rem;
+      justify-content: space-between;
+      background: var(--bg-secondary);
+      position: sticky;
+      top: 0;
+      z-index: 100;
     }
 
-    h1 {
-      font-size: 2rem;
-      font-weight: 600;
-      margin-bottom: 0.5rem;
+    .logo {
+      display: flex;
+      align-items: center;
+      gap: 0.65rem;
+    }
+
+    .logo-icon {
+      width: 30px;
+      height: 30px;
+      background: linear-gradient(135deg, var(--accent), var(--accent-light));
+      border-radius: var(--radius-s);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 0.65rem;
+      font-weight: 700;
+      font-family: var(--font-mono);
+      color: var(--bg-primary);
+      letter-spacing: -0.5px;
     }
 
-    .subtitle {
-      color: #86868b;
-      margin-bottom: 2rem;
+    .logo-text {
       font-size: 0.95rem;
+      font-weight: 700;
+      letter-spacing: -0.02em;
+    }
+
+    .logo-text .arrow { color: var(--text-muted); font-weight: 400; margin: 0 0.3rem; }
+    .logo-text .psd { color: var(--accent); }
+
+    .header-right {
+      display: flex;
+      align-items: center;
+      gap: 1rem;
+    }
+
+    .scale-control {
+      display: flex;
+      align-items: center;
+      gap: 0.4rem;
+    }
+
+    .scale-control .label {
+      color: var(--text-muted);
+      font-size: 0.6rem;
+      font-family: var(--font-mono);
+      text-transform: uppercase;
+      letter-spacing: 0.08em;
+    }
+
+    .scale-control input {
+      width: 3.2rem;
+      padding: 0.25rem 0.35rem;
+      background: var(--bg-primary);
+      border: 1px solid var(--border);
+      border-radius: var(--radius-s);
+      color: var(--text-primary);
+      font-size: 0.8rem;
+      font-family: var(--font-mono);
+      text-align: center;
+      outline: none;
+      transition: border-color 0.2s;
     }
 
+    .scale-control input:focus { border-color: var(--accent); }
+
+    .scale-control .unit {
+      color: var(--text-muted);
+      font-size: 0.75rem;
+      font-family: var(--font-mono);
+    }
+
+    /* ── Main Layout ── */
+    .main {
+      display: grid;
+      grid-template-columns: 1fr 320px;
+      gap: 0;
+      height: calc(100vh - 53px);
+    }
+
+    /* ── Center Panel ── */
+    .center-panel {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      padding: 2rem;
+      position: relative;
+      overflow-y: auto;
+    }
+
+    .center-panel.has-preview {
+      justify-content: center;
+    }
+
+    /* ── Drop Zone ── */
     .drop-zone {
       width: 100%;
-      max-width: 500px;
-      padding: 3rem 2rem;
-      border: 2px dashed #d2d2d7;
-      border-radius: 16px;
-      background: #fff;
-      text-align: center;
+      max-width: 560px;
+      min-height: 300px;
+      border: 1.5px dashed var(--border);
+      border-radius: var(--radius-l);
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
       cursor: pointer;
-      transition: all 0.2s;
+      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+      background: var(--bg-secondary);
+      position: relative;
     }
 
-    .drop-zone:hover,
+    .drop-zone::before {
+      content: "";
+      position: absolute;
+      inset: -1px;
+      border-radius: var(--radius-l);
+      background: linear-gradient(135deg, var(--accent-dim), transparent 50%);
+      opacity: 0;
+      transition: opacity 0.3s;
+      pointer-events: none;
+    }
+
+    .drop-zone:hover { border-color: var(--border-active); }
+    .drop-zone:hover::before { opacity: 1; }
+
     .drop-zone.dragover {
-      border-color: #0071e3;
-      background: #f0f7ff;
+      border-color: var(--accent);
+      background: var(--accent-dim);
+      transform: scale(1.005);
+    }
+
+    .drop-zone.dragover::before {
+      opacity: 1;
+      background: linear-gradient(135deg, var(--accent-glow), transparent 60%);
+    }
+
+    input[type="file"] { display: none; }
+
+    .drop-content { text-align: center; position: relative; z-index: 1; }
+
+    .drop-icon {
+      width: 60px;
+      height: 60px;
+      margin: 0 auto 1.25rem;
+      border-radius: var(--radius-m);
+      background: var(--bg-tertiary);
+      border: 1px solid var(--border);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      transition: all 0.3s;
+    }
+
+    .drop-zone:hover .drop-icon {
+      border-color: var(--accent);
+      box-shadow: 0 0 20px var(--accent-glow);
     }
 
-    .drop-zone-icon {
-      font-size: 3rem;
-      margin-bottom: 1rem;
-      opacity: 0.6;
+    .drop-icon svg {
+      width: 26px;
+      height: 26px;
+      stroke: var(--text-muted);
+      stroke-width: 1.5;
+      fill: none;
+      transition: stroke 0.3s;
     }
 
-    .drop-zone-text {
-      color: #86868b;
+    .drop-zone:hover .drop-icon svg { stroke: var(--accent); }
+
+    .drop-title {
       font-size: 0.95rem;
-      line-height: 1.6;
+      font-weight: 600;
+      color: var(--text-primary);
+      margin-bottom: 0.35rem;
     }
 
-    .drop-zone-text .link {
-      color: #0071e3;
-      text-decoration: underline;
+    .drop-subtitle {
+      font-size: 0.8rem;
+      color: var(--text-muted);
+    }
+
+    .drop-subtitle .browse {
+      color: var(--accent);
       cursor: pointer;
+      text-decoration: none;
+      transition: color 0.15s;
     }
 
-    input[type="file"] { display: none; }
+    .drop-subtitle .browse:hover { color: var(--accent-light); }
 
-    .options {
-      width: 100%;
-      max-width: 500px;
+    .drop-hints {
       margin-top: 1rem;
       display: flex;
-      align-items: center;
+      gap: 0.4rem;
+      flex-wrap: wrap;
+      justify-content: center;
+    }
+
+    .hint-tag {
+      font-size: 0.6rem;
+      font-family: var(--font-mono);
+      padding: 0.15rem 0.45rem;
+      border-radius: var(--radius-s);
+      background: var(--bg-tertiary);
+      color: var(--text-muted);
+    }
+
+    /* ── Preview Area ── */
+    .preview-area {
+      display: none;
+      width: 100%;
+      max-width: 560px;
+      flex-direction: column;
       gap: 0.75rem;
+    }
+
+    .preview-area.visible { display: flex; }
+
+    .preview-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+
+    .file-info {
+      display: flex;
+      align-items: center;
+      gap: 0.65rem;
+    }
+
+    .file-badge {
+      width: 34px;
+      height: 34px;
+      background: var(--bg-tertiary);
+      border: 1px solid var(--border);
+      border-radius: var(--radius-s);
+      display: flex;
+      align-items: center;
       justify-content: center;
+      font-size: 0.55rem;
+      font-family: var(--font-mono);
+      font-weight: 600;
+      color: var(--accent);
+      text-transform: uppercase;
+    }
+
+    .file-details { display: flex; flex-direction: column; gap: 0.1rem; }
+
+    .file-name {
+      font-size: 0.85rem;
+      font-weight: 600;
+      max-width: 280px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
     }
 
-    .options label {
-      font-size: 0.9rem;
-      color: #6e6e73;
+    .file-meta {
+      display: flex;
+      gap: 0.5rem;
+      font-size: 0.65rem;
+      font-family: var(--font-mono);
+      color: var(--text-muted);
     }
 
-    .options input[type="number"] {
-      width: 4rem;
-      padding: 0.3rem 0.5rem;
-      border: 1px solid #d2d2d7;
-      border-radius: 8px;
-      font-size: 0.9rem;
-      text-align: center;
+    .file-meta .sep { color: var(--border); }
+
+    .preview-btns { display: flex; gap: 0.4rem; }
+
+    .btn {
+      padding: 0.45rem 1.1rem;
+      border-radius: var(--radius-s);
+      font-size: 0.78rem;
+      font-weight: 600;
+      font-family: var(--font-display);
+      cursor: pointer;
+      transition: all 0.2s;
+      border: none;
+      outline: none;
+    }
+
+    .btn-primary {
+      background: var(--accent);
+      color: var(--bg-primary);
+      box-shadow: 0 2px 10px var(--accent-glow);
+    }
+
+    .btn-primary:hover {
+      background: var(--accent-light);
+      transform: translateY(-1px);
+      box-shadow: 0 4px 18px var(--accent-glow);
     }
 
-    .status {
+    .btn-primary:active { transform: translateY(0); }
+
+    .btn-ghost {
+      background: transparent;
+      color: var(--text-secondary);
+      border: 1px solid var(--border);
+    }
+
+    .btn-ghost:hover {
+      border-color: var(--border-active);
+      color: var(--text-primary);
+      background: var(--bg-tertiary);
+    }
+
+    .preview-canvas {
       width: 100%;
-      max-width: 500px;
-      margin-top: 1.5rem;
-      text-align: center;
+      aspect-ratio: 16 / 10;
+      max-height: 340px;
+      background: var(--bg-secondary);
+      border: 1px solid var(--border);
+      border-radius: var(--radius-m);
+      overflow: hidden;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      position: relative;
+    }
+
+    .checkerboard {
+      position: absolute;
+      inset: 0;
+      background-image:
+        linear-gradient(45deg, var(--bg-tertiary) 25%, transparent 25%),
+        linear-gradient(-45deg, var(--bg-tertiary) 25%, transparent 25%),
+        linear-gradient(45deg, transparent 75%, var(--bg-tertiary) 75%),
+        linear-gradient(-45deg, transparent 75%, var(--bg-tertiary) 75%);
+      background-size: 14px 14px;
+      background-position: 0 0, 0 7px, 7px -7px, -7px 0px;
+      opacity: 0.45;
+    }
+
+    .preview-canvas img {
+      max-width: 90%;
+      max-height: 90%;
+      position: relative;
+      z-index: 1;
+    }
+
+    .dim-badge {
+      position: absolute;
+      bottom: 0.4rem;
+      right: 0.6rem;
+      font-size: 0.6rem;
+      font-family: var(--font-mono);
+      color: var(--text-muted);
+      background: rgba(12, 11, 10, 0.8);
+      padding: 0.1rem 0.35rem;
+      border-radius: var(--radius-s);
+      z-index: 2;
+    }
+
+    /* ── Progress ── */
+    .conversion-status {
+      width: 100%;
+      max-width: 560px;
+      margin-top: 0.75rem;
       display: none;
     }
 
-    .status.visible { display: block; }
+    .conversion-status.visible { display: block; }
 
-    .progress-bar {
+    .progress-track {
       width: 100%;
-      height: 6px;
-      background: #e8e8ed;
-      border-radius: 3px;
+      height: 3px;
+      background: var(--bg-tertiary);
+      border-radius: 2px;
       overflow: hidden;
-      margin-bottom: 0.75rem;
+      margin-bottom: 0.6rem;
     }
 
-    .progress-fill {
+    .progress-bar {
       height: 100%;
-      background: #0071e3;
-      border-radius: 3px;
+      background: linear-gradient(90deg, var(--accent), var(--accent-light));
+      border-radius: 2px;
       width: 0%;
-      transition: width 0.15s;
+      transition: width 0.2s ease-out;
+      position: relative;
+    }
+
+    .progress-bar::after {
+      content: "";
+      position: absolute;
+      right: 0;
+      top: -1px;
+      width: 5px;
+      height: 5px;
+      background: white;
+      border-radius: 50%;
+      opacity: 0.7;
+      box-shadow: 0 0 6px var(--accent);
     }
 
-    .status-text {
-      font-size: 0.9rem;
-      color: #6e6e73;
+    .progress-bar.done {
+      background: linear-gradient(90deg, var(--success), #a0dba0);
     }
 
-    .status-text.error { color: #ff3b30; }
+    .progress-bar.done::after { display: none; }
+
+    .status-row {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+
+    .status-msg {
+      font-size: 0.78rem;
+      color: var(--text-secondary);
+      font-family: var(--font-mono);
+    }
+
+    .status-msg.error { color: var(--error); }
+
+    .status-time {
+      font-size: 0.7rem;
+      font-family: var(--font-mono);
+      color: var(--text-muted);
+    }
 
-    .download-btn {
+    /* ── Result Card ── */
+    .result-area {
       display: none;
-      margin-top: 1.5rem;
-      padding: 0.75rem 2rem;
-      background: #0071e3;
-      color: #fff;
+      width: 100%;
+      max-width: 560px;
+      margin-top: 0.75rem;
+    }
+
+    .result-area.visible { display: block; }
+
+    .result-card {
+      background: var(--bg-secondary);
+      border: 1px solid var(--border);
+      border-radius: var(--radius-m);
+      padding: 0.85rem 1.1rem;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      animation: fadeInUp 0.3s ease-out;
+    }
+
+    .result-left {
+      display: flex;
+      align-items: center;
+      gap: 0.65rem;
+    }
+
+    .result-icon {
+      width: 36px;
+      height: 36px;
+      border-radius: var(--radius-s);
+      background: linear-gradient(135deg, var(--success-glow), var(--bg-tertiary));
+      border: 1px solid rgba(126, 201, 122, 0.12);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .result-icon svg {
+      width: 18px;
+      height: 18px;
+      stroke: var(--success);
+      stroke-width: 2.5;
+      fill: none;
+    }
+
+    .result-name { font-size: 0.82rem; font-weight: 600; }
+    .result-meta { font-size: 0.65rem; font-family: var(--font-mono); color: var(--text-muted); margin-top: 0.1rem; }
+
+    .btn-download {
+      padding: 0.45rem 1.1rem;
+      background: var(--accent);
+      color: var(--bg-primary);
       border: none;
-      border-radius: 12px;
-      font-size: 1rem;
-      font-weight: 500;
+      border-radius: var(--radius-s);
+      font-size: 0.78rem;
+      font-weight: 700;
+      font-family: var(--font-display);
       cursor: pointer;
-      transition: background 0.2s;
+      transition: all 0.2s;
+      display: flex;
+      align-items: center;
+      gap: 0.35rem;
     }
 
-    .download-btn:hover { background: #0077ed; }
-    .download-btn.visible { display: inline-block; }
+    .btn-download:hover {
+      background: var(--accent-light);
+      transform: translateY(-1px);
+      box-shadow: 0 4px 14px var(--accent-glow);
+    }
 
-    .layer-list {
-      width: 100%;
-      max-width: 500px;
-      margin-top: 1.5rem;
-      display: none;
+    .btn-download svg {
+      width: 13px;
+      height: 13px;
+      stroke: currentColor;
+      stroke-width: 2.5;
+      fill: none;
     }
 
-    .layer-list.visible { display: block; }
+    /* ── Sidebar ── */
+    .sidebar {
+      border-left: 1px solid var(--border);
+      background: var(--bg-secondary);
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+    }
 
-    .layer-list h3 {
-      font-size: 0.85rem;
-      color: #86868b;
+    .sidebar-head {
+      padding: 0.65rem 0.85rem;
+      border-bottom: 1px solid var(--border);
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+
+    .sidebar-label {
+      font-size: 0.65rem;
+      font-family: var(--font-mono);
       text-transform: uppercase;
-      letter-spacing: 0.05em;
-      margin-bottom: 0.5rem;
+      letter-spacing: 0.08em;
+      color: var(--text-muted);
     }
 
-    .layer-item {
-      padding: 0.4rem 0.75rem;
-      background: #fff;
-      border-radius: 8px;
-      margin-bottom: 4px;
-      font-size: 0.85rem;
+    .count-badge {
+      font-size: 0.6rem;
+      font-family: var(--font-mono);
+      padding: 0.05rem 0.4rem;
+      border-radius: 99px;
+      background: var(--bg-tertiary);
+      color: var(--text-muted);
+      border: 1px solid var(--border);
+    }
+
+    .sidebar-body {
+      flex: 1;
+      overflow-y: auto;
+      padding: 0.4rem 0;
+    }
+
+    .sidebar-body::-webkit-scrollbar { width: 3px; }
+    .sidebar-body::-webkit-scrollbar-track { background: transparent; }
+    .sidebar-body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
+
+    .sidebar-placeholder {
       display: flex;
+      flex-direction: column;
       align-items: center;
-      gap: 0.5rem;
+      justify-content: center;
+      height: 100%;
+      gap: 0.4rem;
+      color: var(--text-muted);
+      font-size: 0.78rem;
+      padding: 2rem;
+      text-align: center;
     }
 
-    .layer-type {
-      font-size: 0.7rem;
-      padding: 2px 6px;
-      border-radius: 4px;
-      font-weight: 500;
+    .sidebar-placeholder svg {
+      width: 28px;
+      height: 28px;
+      stroke: var(--border);
+      stroke-width: 1.5;
+      fill: none;
+      margin-bottom: 0.15rem;
     }
 
-    .layer-type.group { background: #e8e8ed; color: #6e6e73; }
-    .layer-type.text { background: #e3f2fd; color: #0071e3; }
-    .layer-type.graphic { background: #fce4ec; color: #c62828; }
-  </style>
-</head>
-<body>
-  <h1>SVG → PSD</h1>
+    /* ── Layer Items ── */
+    .layer-row {
+      display: flex;
+      align-items: center;
+      gap: 0.3rem;
+      padding: 0.25rem 0.7rem;
+      font-size: 0.75rem;
+      cursor: default;
+      transition: background 0.1s;
+      white-space: nowrap;
+      overflow: hidden;
+    }
 
-  <div class="drop-zone" id="dropZone">
-    <div class="drop-zone-icon">📁</div>
-    <div class="drop-zone-text">
-      拖放 SVG 文件到此处<br>
-      或 <span class="link" id="browseLink">选择文件</span>
-    </div>
-  </div>
-  <input type="file" id="fileInput" accept=".svg">
+    .layer-row:hover { background: var(--bg-hover); }
 
-  <div class="options">
-    <label for="scaleInput">缩放倍数:</label>
-    <input type="number" id="scaleInput" value="1" min="0.1" max="10" step="0.5">
-  </div>
+    .layer-indent { flex-shrink: 0; }
 
-  <div class="status" id="status">
-    <div class="progress-bar">
-      <div class="progress-fill" id="progressFill"></div>
-    </div>
-    <div class="status-text" id="statusText">准备中...</div>
-  </div>
+    .layer-toggle {
+      width: 15px;
+      height: 15px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+      flex-shrink: 0;
+      border-radius: 3px;
+      transition: background 0.15s;
+    }
+
+    .layer-toggle:hover { background: var(--bg-tertiary); }
+
+    .layer-toggle svg {
+      width: 9px;
+      height: 9px;
+      stroke: var(--text-muted);
+      stroke-width: 2;
+      fill: none;
+      transition: transform 0.15s;
+    }
+
+    .layer-toggle.collapsed svg { transform: rotate(-90deg); }
+
+    .layer-spacer { width: 15px; flex-shrink: 0; }
+
+    .layer-icon {
+      width: 15px;
+      height: 15px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+    }
+
+    .layer-icon svg { width: 12px; height: 12px; stroke-width: 1.8; fill: none; }
+    .layer-icon.group svg { stroke: var(--text-muted); }
+    .layer-icon.text svg { stroke: #6aafe6; }
+    .layer-icon.graphic svg { stroke: #d98aa0; }
+
+    .layer-name {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      color: var(--text-secondary);
+    }
+
+    .layer-row:hover .layer-name { color: var(--text-primary); }
+    .layer-children.collapsed { display: none; }
+
+    /* ── History ── */
+    .sidebar-foot { border-top: 1px solid var(--border); }
+
+    .history-head {
+      padding: 0.5rem 0.85rem;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      cursor: pointer;
+      transition: background 0.15s;
+    }
+
+    .history-head:hover { background: var(--bg-hover); }
+
+    .history-label {
+      font-size: 0.6rem;
+      font-family: var(--font-mono);
+      text-transform: uppercase;
+      letter-spacing: 0.08em;
+      color: var(--text-muted);
+    }
+
+    .history-chevron svg {
+      width: 9px;
+      height: 9px;
+      stroke: var(--text-muted);
+      stroke-width: 2;
+      fill: none;
+      transition: transform 0.2s;
+    }
+
+    .history-chevron.open svg { transform: rotate(180deg); }
+
+    .history-items {
+      display: none;
+      max-height: 180px;
+      overflow-y: auto;
+      padding: 0 0 0.4rem;
+    }
+
+    .history-items.visible { display: block; }
+
+    .history-row {
+      display: flex;
+      align-items: center;
+      gap: 0.45rem;
+      padding: 0.3rem 0.85rem;
+      font-size: 0.72rem;
+      cursor: pointer;
+      transition: background 0.1s;
+    }
 
-  <button class="download-btn" id="downloadBtn">下载 PSD</button>
+    .history-row:hover { background: var(--bg-hover); }
+
+    .history-dot {
+      width: 5px;
+      height: 5px;
+      border-radius: 50%;
+      background: var(--accent);
+      flex-shrink: 0;
+      opacity: 0.7;
+    }
 
-  <div class="layer-list" id="layerList">
-    <h3>图层预览</h3>
-    <div id="layerItems"></div>
+    .history-name {
+      flex: 1;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      color: var(--text-secondary);
+    }
+
+    .history-size {
+      font-family: var(--font-mono);
+      font-size: 0.6rem;
+      color: var(--text-muted);
+      flex-shrink: 0;
+    }
+
+    /* ── Animations ── */
+    @keyframes fadeInUp {
+      from { opacity: 0; transform: translateY(6px); }
+      to { opacity: 1; transform: translateY(0); }
+    }
+
+    /* ── Responsive ── */
+    @media (max-width: 820px) {
+      .main {
+        grid-template-columns: 1fr;
+        grid-template-rows: 1fr auto;
+      }
+
+      .sidebar {
+        border-left: none;
+        border-top: 1px solid var(--border);
+        max-height: 38vh;
+      }
+
+      .center-panel { padding: 1.25rem; }
+      .drop-zone { min-height: 220px; }
+    }
+  </style>
+</head>
+<body>
+  <div class="app">
+    <header>
+      <div class="logo">
+        <div class="logo-icon">S→P</div>
+        <div class="logo-text">SVG <span class="arrow">→</span> <span class="psd">PSD</span></div>
+      </div>
+      <div class="header-right">
+        <div class="scale-control">
+          <span class="label">Scale</span>
+          <input type="number" id="scaleInput" value="1" min="0.1" max="10" step="0.5">
+          <span class="unit">×</span>
+        </div>
+      </div>
+    </header>
+
+    <div class="main">
+      <div class="center-panel" id="centerPanel">
+        <!-- Drop Zone -->
+        <div class="drop-zone" id="dropZone">
+          <div class="drop-content">
+            <div class="drop-icon">
+              <svg viewBox="0 0 24 24"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>
+            </div>
+            <div class="drop-title">拖放 SVG 文件到此处</div>
+            <div class="drop-subtitle">或 <a class="browse" id="browseLink">浏览文件</a></div>
+            <div class="drop-hints">
+              <span class="hint-tag">.svg</span>
+              <span class="hint-tag">图层分组</span>
+              <span class="hint-tag">文字图层</span>
+            </div>
+          </div>
+        </div>
+        <input type="file" id="fileInput" accept=".svg">
+
+        <!-- Preview -->
+        <div class="preview-area" id="previewArea">
+          <div class="preview-header">
+            <div class="file-info">
+              <div class="file-badge">SVG</div>
+              <div class="file-details">
+                <div class="file-name" id="fileName"></div>
+                <div class="file-meta">
+                  <span id="fileDims"></span>
+                  <span class="sep">·</span>
+                  <span id="fileSize"></span>
+                </div>
+              </div>
+            </div>
+            <div class="preview-btns">
+              <button class="btn btn-ghost" id="changeFileBtn">更换</button>
+              <button class="btn btn-primary" id="convertBtn">转换</button>
+            </div>
+          </div>
+          <div class="preview-canvas" id="previewCanvas">
+            <div class="checkerboard"></div>
+            <span class="dim-badge" id="dimBadge"></span>
+          </div>
+        </div>
+
+        <!-- Status -->
+        <div class="conversion-status" id="conversionStatus">
+          <div class="progress-track">
+            <div class="progress-bar" id="progressBar"></div>
+          </div>
+          <div class="status-row">
+            <span class="status-msg" id="statusMsg">准备中...</span>
+            <span class="status-time" id="statusTime"></span>
+          </div>
+        </div>
+
+        <!-- Result -->
+        <div class="result-area" id="resultArea">
+          <div class="result-card">
+            <div class="result-left">
+              <div class="result-icon">
+                <svg viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg>
+              </div>
+              <div>
+                <div class="result-name" id="resultName"></div>
+                <div class="result-meta" id="resultMeta"></div>
+              </div>
+            </div>
+            <button class="btn-download" id="downloadBtn">
+              <svg viewBox="0 0 24 24"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
+              下载
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <!-- Sidebar -->
+      <div class="sidebar">
+        <div class="sidebar-head">
+          <span class="sidebar-label">Layers</span>
+          <span class="count-badge" id="layerCount">0</span>
+        </div>
+        <div class="sidebar-body" id="sidebarBody">
+          <div class="sidebar-placeholder" id="placeholder">
+            <svg viewBox="0 0 24 24"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18"/><path d="M9 3v18"/></svg>
+            <span>转换后图层结构<br>将显示在此处</span>
+          </div>
+          <div id="layerTree"></div>
+        </div>
+        <div class="sidebar-foot">
+          <div class="history-head" id="historyHead">
+            <span class="history-label">History</span>
+            <span class="history-chevron" id="historyChevron">
+              <svg viewBox="0 0 24 24"><polyline points="6 9 12 15 18 9"/></svg>
+            </span>
+          </div>
+          <div class="history-items" id="historyItems"></div>
+        </div>
+      </div>
+    </div>
   </div>
 
   <script type="module" src="./app.ts"></script>