diff --git a/index.html b/index.html
index f01f050..d1e6ba1 100644
--- a/index.html
+++ b/index.html
@@ -1,448 +1,453 @@
-import { useState, useRef, useCallback } from "react";
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>MTG Proxy Maker</title>
+<style>
+  * { box-sizing: border-box; margin: 0; padding: 0; }
+  body {
+    min-height: 100vh;
+    background: #0e0b07;
+    font-family: 'Palatino Linotype', Palatino, 'Book Antiqua', serif;
+    color: #e8dfc8;
+  }
+  header {
+    background: linear-gradient(90deg,#1a0f00,#2e1a00,#1a0f00);
+    border-bottom: 2px solid #5a3a10;
+    padding: 16px 24px;
+    display: flex;
+    align-items: center;
+    gap: 14px;
+  }
+  header .logo { font-size: 28px; }
+  header h1 { font-size: 20px; font-weight: 700; color: #d4af37; letter-spacing: 1px; }
+  header p { font-size: 12px; color: #8a7060; }
+  #printBtn {
+    margin-left: auto;
+    background: linear-gradient(135deg,#8b6010,#d4af37,#8b6010);
+    color: #1a0f00;
+    border: none;
+    border-radius: 8px;
+    padding: 9px 22px;
+    font-weight: 700;
+    font-size: 14px;
+    cursor: pointer;
+    font-family: inherit;
+    box-shadow: 0 2px 8px #d4af3744;
+  }
+  .main {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 32px;
+    padding: 24px;
+  }
+  .editor {
+    flex: 1 1 360px;
+    max-width: 480px;
+    display: flex;
+    flex-direction: column;
+    gap: 14px;
+  }
+  .tabs {
+    display: flex;
+    gap: 4px;
+    border-bottom: 1px solid #3a3020;
+    padding-bottom: 4px;
+  }
+  .tab {
+    background: transparent;
+    border: 1px solid transparent;
+    color: #8a7060;
+    border-radius: 6px;
+    padding: 5px 14px;
+    cursor: pointer;
+    font-size: 13px;
+    font-family: inherit;
+    text-transform: capitalize;
+  }
+  .tab.active { background: #3a2a10; border-color: #d4af37; color: #d4af37; font-weight: 700; }
+  .tab-panel { display: none; flex-direction: column; gap: 12px; }
+  .tab-panel.active { display: flex; }
+  .field { display: flex; flex-direction: column; gap: 4px; }
+  .field label { font-size: 11px; font-weight: 600; color: #8a7a6a; letter-spacing: 0.5px; text-transform: uppercase; }
+  input, textarea, select {
+    background: #1e1a14; border: 1px solid #3a3020; border-radius: 6px;
+    color: #e8dfc8; padding: 7px 10px; font-size: 13px; font-family: inherit;
+    outline: none; width: 100%;
+  }
+  input:focus, textarea:focus, select:focus { border-color: #d4af37; box-shadow: 0 0 0 2px #d4af3733; }
+  select option { background: #1e1a14; color: #e8dfc8; }
+  textarea { resize: vertical; }
+  .row { display: flex; gap: 10px; }
+  .row .field { flex: 1; }
+  .color-btns { display: flex; gap: 6px; flex-wrap: wrap; }
+  .color-btn {
+    width: 36px; height: 36px; border-radius: 50%; border: 2px solid transparent;
+    cursor: pointer; font-size: 16px; display: flex; align-items: center; justify-content: center;
+  }
+  .color-btn.active { border: 3px solid #d4af37 !important; box-shadow: 0 0 8px #d4af37; }
+  .upload-btn {
+    background: #2a1e0e; border: 2px dashed #5a3a10; border-radius: 6px;
+    color: #e8dfc8; padding: 20px; font-size: 14px; font-family: inherit;
+    cursor: pointer; width: 100%; text-align: center;
+  }
+  .url-row { display: flex; gap: 6px; }
+  .url-row input { flex: 1; }
+  .set-btn {
+    background: #3a2a10; border: 1px solid #d4af37; color: #d4af37;
+    border-radius: 6px; padding: 0 12px; cursor: pointer; font-family: inherit; font-size: 13px;
+  }
+  #artPreview { display: none; flex-direction: column; gap: 6px; }
+  #artPreview img { width: 100%; border-radius: 8px; border: 1px solid #3a3020; max-height: 180px; object-fit: cover; }
+  .remove-btn {
+    background: transparent; border: 1px solid #5a3020; color: #c06040;
+    border-radius: 6px; padding: 4px 12px; cursor: pointer; font-size: 12px; font-family: inherit; width: 100%;
+  }
+  .reset-btn {
+    background: #2a1e0e; border: 1px solid #5a3a10; color: #c8a060;
+    border-radius: 6px; padding: 7px 16px; cursor: pointer; font-family: inherit; font-size: 13px;
+  }
+  .divider { border-top: 1px solid #3a3020; padding-top: 12px; }
+  .divider-label { font-size: 12px; color: #8a7060; margin-bottom: 8px; }
+  .no-stats { font-size: 13px; color: #8a7060; font-style: italic; padding: 12px 0; }
+  .or-divider { color: #8a7060; font-size: 12px; text-align: center; }
+  .preview-col { flex: 1 1 300px; display: flex; flex-direction: column; align-items: center; gap: 20px; }
+  .preview-label { font-size: 12px; color: #8a7060; letter-spacing: 1px; text-transform: uppercase; }
+  .preview-hint { font-size: 11px; color: #5a4a30; text-align: center; max-width: 280px; line-height: 1.6; }
 
-const CARD_TYPES = ["Creature", "Instant", "Sorcery", "Enchantment", "Artifact", "Land", "Planeswalker", "Battle"];
-const COLORS = [
-  { id: "W", label: "White", symbol: "☀", bg: "#f9f6d5", border: "#c8b87a", text: "#333" },
-  { id: "U", label: "Blue", symbol: "💧", bg: "#c6d9e8", border: "#3a6b9c", text: "#fff" },
-  { id: "B", label: "Black", symbol: "💀", bg: "#1a1a1a", border: "#5a4a6e", text: "#d0c8e0" },
-  { id: "R", label: "Red", symbol: "🔥", bg: "#e87040", border: "#8b2500", text: "#fff" },
-  { id: "G", label: "Green", symbol: "🌲", bg: "#3a7a48", border: "#1a4025", text: "#d4f5d0" },
-  { id: "C", label: "Colorless", symbol: "◇", bg: "#c0bdb5", border: "#7a7068", text: "#333" },
-  { id: "M", label: "Multi", symbol: "★", bg: "linear-gradient(135deg,#f9f6d5,#c6d9e8,#1a1a1a,#e87040,#3a7a48)", border: "#b8960c", text: "#fff" },
-];
+  /* Card styles */
+  #card {
+    width: 280px; min-height: 390px; border-radius: 16px; border: 4px solid #c8b87a;
+    background: #f9f6d5; box-shadow: 0 0 0 2px #111, 0 8px 32px #0008;
+    display: flex; flex-direction: column; overflow: hidden; position: relative;
+    color: #333;
+  }
+  #cardHeader {
+    display: flex; justify-content: space-between; align-items: center;
+    padding: 7px 10px 4px; border-bottom: 2px solid #c8b87a; background: #c8b87acc;
+  }
+  #cardName { font-weight: 700; font-size: 15px; letter-spacing: 0.3px; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  #cardMana { font-size: 13px; font-family: monospace; margin-left: 8px; white-space: nowrap; letter-spacing: 1px; }
+  #artFrame {
+    margin: 6px 8px; height: 140px; border-radius: 8px; border: 2px solid #c8b87a;
+    overflow: hidden; display: flex; align-items: center; justify-content: center;
+    position: relative; background: linear-gradient(135deg,#c8b87a44,#c8b87a99);
+  }
+  #artFrame img { width: 100%; height: 100%; object-fit: cover; }
+  #artPlaceholder { opacity: 0.4; font-size: 48px; }
+  #setRarity { position: absolute; bottom: 4px; right: 6px; font-size: 11px; font-weight: 700; text-shadow: 0 1px 3px #000a; }
+  #typeLine {
+    display: flex; justify-content: space-between; align-items: center;
+    padding: 3px 10px; font-size: 12px; font-style: italic;
+    border-top: 1px solid #c8b87a66; border-bottom: 1px solid #c8b87a66; background: #c8b87a99;
+  }
+  #textBox {
+    flex: 1; margin: 5px 8px; background: #f5f0e044; border-radius: 6px;
+    border: 1px solid #c8b87a55; padding: 7px 9px; min-height: 80px;
+    display: flex; flex-direction: column; gap: 6px;
+  }
+  #rulesDisplay { font-size: 12px; line-height: 1.45; white-space: pre-wrap; }
+  #flavorDisplay {
+    font-size: 11px; font-style: italic; opacity: 0.75;
+    border-top: 1px solid #c8b87a44; padding-top: 5px; line-height: 1.35; display: none;
+  }
+  #cardFooter {
+    display: flex; justify-content: space-between; align-items: center;
+    padding: 4px 10px 6px; font-size: 10px; opacity: 0.7; border-top: 1px solid #c8b87a44;
+  }
+  #ptBox {
+    background: #c8b87a; color: #fff; border-radius: 4px; padding: 1px 7px;
+    font-weight: 700; font-size: 13px; box-shadow: 0 1px 4px #0006; display: none;
+  }
+  #loyaltyBox {
+    background: #1a5ab8; color: #fff; border-radius: 50%; width: 26px; height: 26px;
+    display: none; align-items: center; justify-content: center;
+    font-weight: 700; font-size: 14px; box-shadow: 0 1px 4px #0006;
+  }
 
-const RARITY_COLORS = { Common: "#aaa", Uncommon: "#a0c0d0", Rare: "#d4af37", "Mythic Rare": "#e07020" };
+  @media print {
+    body * { visibility: hidden; }
+    #card, #card * { visibility: visible; }
+    #card { position: fixed; left: 50%; top: 50%; transform: translate(-50%,-50%) scale(2.5); }
+  }
+</style>
+</head>
+<body>
 
-const DEFAULT_CARD = {
-  name: "Blazing Champion",
-  manaCost: "{2}{R}{R}",
-  type: "Creature",
-  subtype: "Human Warrior",
-  color: "R",
-  rarity: "Rare",
-  power: "4",
-  toughness: "3",
-  rulesText: "Haste\nWhen Blazing Champion enters the battlefield, it deals 2 damage to any target.",
-  flavorText: "\"No retreat. No mercy. Only fire.\"",
-  artist: "Proxy Artist",
-  setSymbol: "★",
-  loyalty: "",
+<header>
+  <div class="logo">🃏</div>
+  <div>
+    <h1>MTG Proxy Maker</h1>
+    <p>Design · Print · Play</p>
+  </div>
+  <button id="printBtn" onclick="window.print()">🖨 Print</button>
+</header>
+
+<div class="main">
+  <div class="editor">
+    <div class="tabs">
+      <button class="tab active" onclick="switchTab('basic',this)">Basic</button>
+      <button class="tab" onclick="switchTab('art',this)">Art</button>
+      <button class="tab" onclick="switchTab('stats',this)">Stats</button>
+    </div>
+
+    <div class="tab-panel active" id="tab-basic">
+      <div class="field"><label>Card Name</label><input id="f-name" value="Blazing Champion" oninput="update()"></div>
+      <div class="field"><label>Mana Cost</label><input id="f-mana" value="{2}{R}{R}" oninput="update()"></div>
+      <div class="row">
+        <div class="field"><label>Type</label>
+          <select id="f-type" onchange="update()">
+            <option>Creature</option><option>Instant</option><option>Sorcery</option>
+            <option>Enchantment</option><option>Artifact</option><option>Land</option>
+            <option>Planeswalker</option><option>Battle</option>
+          </select>
+        </div>
+        <div class="field"><label>Subtype</label><input id="f-subtype" value="Human Warrior" oninput="update()"></div>
+      </div>
+      <div class="field">
+        <label>Color</label>
+        <div class="color-btns">
+          <button class="color-btn" data-color="W" style="background:#f9f6d5" onclick="setColor('W')" title="White">☀</button>
+          <button class="color-btn" data-color="U" style="background:#c6d9e8" onclick="setColor('U')" title="Blue">💧</button>
+          <button class="color-btn" data-color="B" style="background:#1a1a1a;color:#d0c8e0" onclick="setColor('B')" title="Black">💀</button>
+          <button class="color-btn active" data-color="R" style="background:#e87040" onclick="setColor('R')" title="Red">🔥</button>
+          <button class="color-btn" data-color="G" style="background:#3a7a48;color:#d4f5d0" onclick="setColor('G')" title="Green">🌲</button>
+          <button class="color-btn" data-color="C" style="background:#c0bdb5" onclick="setColor('C')" title="Colorless">◇</button>
+          <button class="color-btn" data-color="M" style="background:linear-gradient(135deg,gold,blue,black)" onclick="setColor('M')" title="Multi">★</button>
+        </div>
+      </div>
+      <div class="field"><label>Rarity</label>
+        <select id="f-rarity" onchange="update()">
+          <option>Common</option><option>Uncommon</option><option selected>Rare</option><option>Mythic Rare</option>
+        </select>
+      </div>
+      <div class="field"><label>Rules Text</label>
+        <textarea id="f-rules" rows="4" oninput="update()">Haste
+When Blazing Champion enters the battlefield, it deals 2 damage to any target.</textarea>
+      </div>
+      <div class="field"><label>Flavor Text</label>
+        <textarea id="f-flavor" rows="2" oninput="update()" style="font-style:italic">"No retreat. No mercy. Only fire."</textarea>
+      </div>
+      <div class="field"><label>Artist</label><input id="f-artist" value="Proxy Artist" oninput="update()"></div>
+    </div>
+
+    <div class="tab-panel" id="tab-art">
+      <div class="field">
+        <label>Upload Card Art</label>
+        <input type="file" id="fileInput" accept="image/*" style="display:none" onchange="handleFile(event)">
+        <button class="upload-btn" onclick="document.getElementById('fileInput').click()">📁 Click to upload image</button>
+      </div>
+      <div class="or-divider">— or paste an image URL —</div>
+      <div class="field">
+        <label>Image URL</label>
+        <div class="url-row">
+          <input id="urlInput" placeholder="https://...">
+          <button class="set-btn" onclick="setImageUrl()">Set</button>
+        </div>
+      </div>
+      <div id="artPreview">
+        <img id="artThumb" src="" alt="preview">
+        <button class="remove-btn" onclick="removeImage()">Remove Image</button>
+      </div>
+      <div class="field"><label>Set Symbol</label><input id="f-set" value="★" oninput="update()" maxlength="4"></div>
+    </div>
+
+    <div class="tab-panel" id="tab-stats">
+      <div id="creatureStats">
+        <div class="row">
+          <div class="field"><label>Power</label><input id="f-power" value="4" oninput="update()"></div>
+          <div class="field"><label>Toughness</label><input id="f-toughness" value="3" oninput="update()"></div>
+        </div>
+      </div>
+      <div id="pwStats" style="display:none">
+        <div class="field"><label>Starting Loyalty</label><input id="f-loyalty" value="4" oninput="update()"></div>
+      </div>
+      <div id="noStats" class="no-stats" style="display:none">No stats for this card type.</div>
+      <div class="divider">
+        <div class="divider-label">Quick Reset</div>
+        <button class="reset-btn" onclick="resetCard()">↩ Reset to Default</button>
+      </div>
+    </div>
+  </div>
+
+  <div class="preview-col">
+    <div class="preview-label">Preview</div>
+    <div id="card">
+      <div id="cardHeader">
+        <div id="cardName">Blazing Champion</div>
+        <div id="cardMana">{2}{R}{R}</div>
+      </div>
+      <div id="artFrame">
+        <div id="artPlaceholder">🔥</div>
+        <img id="cardArt" src="" alt="art" style="display:none;width:100%;height:100%;object-fit:cover">
+        <div id="setRarity" style="color:#d4af37">★ R</div>
+      </div>
+      <div id="typeLine">
+        <span id="typeDisplay">Creature — Human Warrior</span>
+        <span id="setDisplay">★</span>
+      </div>
+      <div id="textBox">
+        <div id="rulesDisplay"></div>
+        <div id="flavorDisplay"></div>
+      </div>
+      <div id="cardFooter">
+        <span id="artistDisplay">✦ Proxy Artist</span>
+        <div id="ptBox">4/3</div>
+        <div id="loyaltyBox" style="display:none">4</div>
+      </div>
+    </div>
+    <div class="preview-hint">Use the Print button to print on card stock.<br>Cut to 2.5" × 3.5" for standard size.</div>
+  </div>
+</div>
+
+<script>
+const COLORS = {
+  W: { bg:'#f9f6d5', border:'#c8b87a', text:'#333', symbol:'☀' },
+  U: { bg:'#c6d9e8', border:'#3a6b9c', text:'#fff', symbol:'💧' },
+  B: { bg:'#1a1a1a', border:'#5a4a6e', text:'#d0c8e0', symbol:'💀' },
+  R: { bg:'#e87040', border:'#8b2500', text:'#fff', symbol:'🔥' },
+  G: { bg:'#3a7a48', border:'#1a4025', text:'#d4f5d0', symbol:'🌲' },
+  C: { bg:'#c0bdb5', border:'#7a7068', text:'#333', symbol:'◇' },
+  M: { bg:'linear-gradient(160deg,#f9f6d5,#c6d9e8,#1a1a1a,#e87040,#3a7a48)', border:'#b8960c', text:'#fff', symbol:'★' },
 };
+const RARITY_COLORS = { Common:'#aaa', Uncommon:'#a0c0d0', Rare:'#d4af37', 'Mythic Rare':'#e07020' };
+let currentColor = 'R';
+let currentImageUrl = '';
 
-function CardPreview({ card, imageUrl }) {
-  const colorObj = COLORS.find(c => c.id === card.color) || COLORS[5];
-  const isMulti = card.color === "M";
-  const isLand = card.type === "Land";
-  const isPW = card.type === "Planeswalker";
-
-  const frameBg = isMulti
-    ? "linear-gradient(160deg,#f9f6d5 0%,#c6d9e8 25%,#1a1a1a 50%,#e87040 75%,#3a7a48 100%)"
-    : colorObj.bg;
-
-  const rarityColor = RARITY_COLORS[card.rarity] || "#aaa";
-
-  return (
-    <div style={{
-      width: 280,
-      minHeight: 390,
-      borderRadius: 16,
-      border: `4px solid ${colorObj.border}`,
-      background: frameBg,
-      boxShadow: `0 0 0 2px #111, 0 0 30px ${colorObj.border}55, 0 8px 32px #0008`,
-      fontFamily: "'Palatino Linotype', Palatino, 'Book Antiqua', serif",
-      color: colorObj.text,
-      display: "flex",
-      flexDirection: "column",
-      overflow: "hidden",
-      position: "relative",
-      userSelect: "none",
-    }}>
-      {/* Header */}
-      <div style={{
-        display: "flex",
-        justifyContent: "space-between",
-        alignItems: "center",
-        padding: "7px 10px 4px",
-        background: `${colorObj.border}cc`,
-        borderBottom: `2px solid ${colorObj.border}`,
-      }}>
-        <div style={{ fontWeight: 700, fontSize: 15, letterSpacing: 0.3, textShadow: "0 1px 2px #0005", flex: 1, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
-          {card.name || "Card Name"}
-        </div>
-        <div style={{ fontSize: 13, fontFamily: "monospace", marginLeft: 8, whiteSpace: "nowrap", opacity: 0.95, letterSpacing: 1 }}>
-          {card.manaCost || ""}
-        </div>
-      </div>
-
-      {/* Art Frame */}
-      <div style={{
-        margin: "6px 8px",
-        height: 140,
-        borderRadius: 8,
-        border: `2px solid ${colorObj.border}`,
-        overflow: "hidden",
-        background: imageUrl ? "transparent" : `linear-gradient(135deg, ${colorObj.border}44, ${colorObj.border}99)`,
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        position: "relative",
-      }}>
-        {imageUrl ? (
-          <img src={imageUrl} alt="card art" style={{ width: "100%", height: "100%", objectFit: "cover" }} />
-        ) : (
-          <div style={{ opacity: 0.4, fontSize: 48, textAlign: "center" }}>
-            {colorObj.symbol}
-          </div>
-        )}
-        {/* Set & rarity */}
-        <div style={{
-          position: "absolute", bottom: 4, right: 6,
-          fontSize: 11, color: rarityColor, textShadow: "0 1px 3px #000a",
-          fontWeight: 700,
-        }}>
-          {card.setSymbol || "★"} {card.rarity ? card.rarity[0] : ""}
-        </div>
-      </div>
-
-      {/* Type Line */}
-      <div style={{
-        display: "flex",
-        justifyContent: "space-between",
-        alignItems: "center",
-        padding: "3px 10px",
-        background: `${colorObj.border}99`,
-        fontSize: 12,
-        fontStyle: "italic",
-        borderTop: `1px solid ${colorObj.border}66`,
-        borderBottom: `1px solid ${colorObj.border}66`,
-      }}>
-        <span>{[card.type, card.subtype].filter(Boolean).join(" — ") || "Type"}</span>
-        <span style={{ fontSize: 14 }}>{card.setSymbol || "★"}</span>
-      </div>
-
-      {/* Text Box */}
-      <div style={{
-        flex: 1,
-        margin: "5px 8px 5px",
-        background: "#f5f0e044",
-        borderRadius: 6,
-        border: `1px solid ${colorObj.border}55`,
-        padding: "7px 9px",
-        minHeight: 80,
-        display: "flex",
-        flexDirection: "column",
-        gap: 6,
-      }}>
-        <div style={{ fontSize: 12, lineHeight: 1.45, whiteSpace: "pre-wrap" }}>
-          {card.rulesText || ""}
-        </div>
-        {card.flavorText && (
-          <div style={{ fontSize: 11, fontStyle: "italic", opacity: 0.75, borderTop: `1px solid ${colorObj.border}44`, paddingTop: 5, lineHeight: 1.35 }}>
-            {card.flavorText}
-          </div>
-        )}
-      </div>
-
-      {/* Footer */}
-      <div style={{
-        display: "flex",
-        justifyContent: "space-between",
-        alignItems: "center",
-        padding: "4px 10px 6px",
-        fontSize: 10,
-        opacity: 0.7,
-        borderTop: `1px solid ${colorObj.border}44`,
-      }}>
-        <span>✦ {card.artist || "Unknown"}</span>
-        {(card.type === "Creature" || card.type === "Battle") && (
-          <div style={{
-            background: colorObj.border,
-            color: "#fff",
-            borderRadius: 4,
-            padding: "1px 7px",
-            fontWeight: 700,
-            fontSize: 13,
-            boxShadow: "0 1px 4px #0006",
-          }}>
-            {card.power}/{card.toughness}
-          </div>
-        )}
-        {isPW && card.loyalty && (
-          <div style={{
-            background: "#1a5ab8",
-            color: "#fff",
-            borderRadius: "50%",
-            width: 26, height: 26,
-            display: "flex", alignItems: "center", justifyContent: "center",
-            fontWeight: 700, fontSize: 14,
-            boxShadow: "0 1px 4px #0006",
-          }}>
-            {card.loyalty}
-          </div>
-        )}
-      </div>
-    </div>
-  );
+function setColor(c) {
+  currentColor = c;
+  document.querySelectorAll('.color-btn').forEach(b => b.classList.remove('active'));
+  document.querySelector('[data-color="'+c+'"]').classList.add('active');
+  update();
 }
 
-function Field({ label, children }) {
-  return (
-    <div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
-      <label style={{ fontSize: 11, fontWeight: 600, color: "#8a7a6a", letterSpacing: 0.5, textTransform: "uppercase" }}>{label}</label>
-      {children}
-    </div>
-  );
+function update() {
+  const col = COLORS[currentColor];
+  const type = document.getElementById('f-type').value;
+  const rarity = document.getElementById('f-rarity').value;
+  const sym = document.getElementById('f-set').value || '★';
+
+  const card = document.getElementById('card');
+  card.style.borderColor = col.border;
+  card.style.background = col.bg;
+  card.style.color = col.text;
+  card.style.boxShadow = '0 0 0 2px #111, 0 0 30px '+col.border+'55, 0 8px 32px #0008';
+
+  const hdr = document.getElementById('cardHeader');
+  hdr.style.background = col.border+'cc';
+  hdr.style.borderBottomColor = col.border;
+  document.getElementById('cardName').textContent = document.getElementById('f-name').value || 'Card Name';
+  document.getElementById('cardMana').textContent = document.getElementById('f-mana').value;
+
+  const af = document.getElementById('artFrame');
+  af.style.borderColor = col.border;
+  af.style.background = currentImageUrl ? 'transparent' : 'linear-gradient(135deg,'+col.border+'44,'+col.border+'99)';
+  document.getElementById('artPlaceholder').textContent = col.symbol;
+  const rc = RARITY_COLORS[rarity]||'#aaa';
+  document.getElementById('setRarity').style.color = rc;
+  document.getElementById('setRarity').textContent = sym+' '+(rarity?rarity[0]:'C');
+
+  const tl = document.getElementById('typeLine');
+  tl.style.background = col.border+'99';
+  const sub = document.getElementById('f-subtype').value;
+  document.getElementById('typeDisplay').textContent = [type,sub].filter(Boolean).join(' — ');
+  document.getElementById('setDisplay').textContent = sym;
+
+  document.getElementById('textBox').style.borderColor = col.border+'55';
+  document.getElementById('rulesDisplay').textContent = document.getElementById('f-rules').value;
+  const flavor = document.getElementById('f-flavor').value;
+  const fd = document.getElementById('flavorDisplay');
+  if (flavor) { fd.textContent = flavor; fd.style.display='block'; } else { fd.style.display='none'; }
+
+  document.getElementById('cardFooter').style.borderTopColor = col.border+'44';
+  document.getElementById('artistDisplay').textContent = '✦ '+(document.getElementById('f-artist').value||'Unknown');
+
+  const ptBox = document.getElementById('ptBox');
+  const loyBox = document.getElementById('loyaltyBox');
+  ptBox.style.background = col.border;
+
+  const isCreature = type==='Creature'||type==='Battle';
+  const isPW = type==='Planeswalker';
+
+  if (isCreature) {
+    ptBox.style.display='inline-block';
+    ptBox.textContent = document.getElementById('f-power').value+'/'+document.getElementById('f-toughness').value;
+    loyBox.style.display='none';
+  } else if (isPW) {
+    loyBox.style.display='flex';
+    loyBox.textContent = document.getElementById('f-loyalty').value;
+    ptBox.style.display='none';
+  } else {
+    ptBox.style.display='none';
+    loyBox.style.display='none';
+  }
+
+  document.getElementById('creatureStats').style.display = isCreature?'block':'none';
+  document.getElementById('pwStats').style.display = isPW?'block':'none';
+  document.getElementById('noStats').style.display = (!isCreature&&!isPW)?'block':'none';
 }
 
-const inputStyle = {
-  background: "#1e1a14",
-  border: "1px solid #3a3020",
-  borderRadius: 6,
-  color: "#e8dfc8",
-  padding: "7px 10px",
-  fontSize: 13,
-  fontFamily: "inherit",
-  outline: "none",
-  width: "100%",
-  boxSizing: "border-box",
-  transition: "border-color 0.2s",
-};
-
-export default function App() {
-  const [card, setCard] = useState(DEFAULT_CARD);
-  const [imageUrl, setImageUrl] = useState("");
-  const [imageInput, setImageInput] = useState("");
-  const [tab, setTab] = useState("basic");
-  const previewRef = useRef();
-  const fileInputRef = useRef();
-
-  const update = useCallback((field, val) => setCard(c => ({ ...c, [field]: val })), []);
-
-  const handleImageFile = (e) => {
-    const file = e.target.files?.[0];
-    if (!file) return;
-    const reader = new FileReader();
-    reader.onload = (ev) => setImageUrl(ev.target.result);
-    reader.readAsDataURL(file);
-  };
-
-  const handleImageUrl = () => {
-    setImageUrl(imageInput.trim());
-  };
-
-  const handlePrint = () => window.print();
-
-  const isPW = card.type === "Planeswalker";
-  const isCreature = card.type === "Creature" || card.type === "Battle";
-
-  return (
-    <div style={{
-      minHeight: "100vh",
-      background: "#0e0b07",
-      fontFamily: "'Palatino Linotype', Palatino, 'Book Antiqua', serif",
-      color: "#e8dfc8",
-      display: "flex",
-      flexDirection: "column",
-    }}>
-      {/* Header */}
-      <div style={{
-        background: "linear-gradient(90deg,#1a0f00,#2e1a00,#1a0f00)",
-        borderBottom: "2px solid #5a3a10",
-        padding: "18px 28px",
-        display: "flex",
-        alignItems: "center",
-        gap: 14,
-      }}>
-        <div style={{ fontSize: 30 }}>🃏</div>
-        <div>
-          <div style={{ fontSize: 22, fontWeight: 700, letterSpacing: 1, color: "#d4af37" }}>MTG Proxy Maker</div>
-          <div style={{ fontSize: 12, color: "#8a7060", letterSpacing: 0.3 }}>Design · Print · Play</div>
-        </div>
-        <button onClick={handlePrint} style={{
-          marginLeft: "auto",
-          background: "linear-gradient(135deg,#8b6010,#d4af37,#8b6010)",
-          color: "#1a0f00",
-          border: "none",
-          borderRadius: 8,
-          padding: "9px 22px",
-          fontWeight: 700,
-          fontSize: 14,
-          cursor: "pointer",
-          letterSpacing: 0.5,
-          fontFamily: "inherit",
-          boxShadow: "0 2px 8px #d4af3744",
-        }}>
-          🖨 Print
-        </button>
-      </div>
-
-      <div style={{ display: "flex", flex: 1, padding: "24px 28px", gap: 32, flexWrap: "wrap" }}>
-        {/* Editor Panel */}
-        <div style={{ flex: "1 1 360px", minWidth: 300, maxWidth: 480, display: "flex", flexDirection: "column", gap: 16 }}>
-          {/* Tabs */}
-          <div style={{ display: "flex", gap: 4, borderBottom: "1px solid #3a3020", paddingBottom: 4 }}>
-            {["basic", "art", "stats"].map(t => (
-              <button key={t} onClick={() => setTab(t)} style={{
-                background: tab === t ? "#3a2a10" : "transparent",
-                border: tab === t ? "1px solid #d4af37" : "1px solid transparent",
-                color: tab === t ? "#d4af37" : "#8a7060",
-                borderRadius: 6,
-                padding: "5px 14px",
-                cursor: "pointer",
-                fontSize: 13,
-                fontFamily: "inherit",
-                fontWeight: tab === t ? 700 : 400,
-                textTransform: "capitalize",
-                letterSpacing: 0.3,
-              }}>{t}</button>
-            ))}
-          </div>
-
-          <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
-            {tab === "basic" && <>
-              <Field label="Card Name">
-                <input style={inputStyle} value={card.name} onChange={e => update("name", e.target.value)} placeholder="e.g. Blazing Champion" />
-              </Field>
-              <Field label="Mana Cost">
-                <input style={inputStyle} value={card.manaCost} onChange={e => update("manaCost", e.target.value)} placeholder="{2}{R}{R}" />
-              </Field>
-              <div style={{ display: "flex", gap: 10 }}>
-                <Field label="Type">
-                  <select style={{ ...inputStyle }} value={card.type} onChange={e => update("type", e.target.value)}>
-                    {CARD_TYPES.map(t => <option key={t} value={t}>{t}</option>)}
-                  </select>
-                </Field>
-                <Field label="Subtype">
-                  <input style={inputStyle} value={card.subtype} onChange={e => update("subtype", e.target.value)} placeholder="e.g. Wizard" />
-                </Field>
-              </div>
-              <Field label="Color">
-                <div style={{ display: "flex", gap: 6, flexWrap: "wrap" }}>
-                  {COLORS.map(c => (
-                    <button key={c.id} onClick={() => update("color", c.id)} style={{
-                      width: 36, height: 36, borderRadius: "50%",
-                      background: c.id === "M" ? "linear-gradient(135deg,gold,blue,black)" : c.bg,
-                      border: card.color === c.id ? "3px solid #d4af37" : `2px solid ${c.border}`,
-                      cursor: "pointer",
-                      fontWeight: 700, fontSize: 15,
-                      boxShadow: card.color === c.id ? "0 0 8px #d4af37" : "none",
-                      transition: "all 0.15s",
-                    }} title={c.label}>{c.symbol}</button>
-                  ))}
-                </div>
-              </Field>
-              <Field label="Rarity">
-                <select style={{ ...inputStyle }} value={card.rarity} onChange={e => update("rarity", e.target.value)}>
-                  {Object.keys(RARITY_COLORS).map(r => <option key={r} value={r}>{r}</option>)}
-                </select>
-              </Field>
-              <Field label="Rules Text">
-                <textarea style={{ ...inputStyle, minHeight: 80, resize: "vertical" }} value={card.rulesText} onChange={e => update("rulesText", e.target.value)} placeholder="Card abilities..." />
-              </Field>
-              <Field label="Flavor Text">
-                <textarea style={{ ...inputStyle, minHeight: 50, resize: "vertical", fontStyle: "italic" }} value={card.flavorText} onChange={e => update("flavorText", e.target.value)} placeholder='"A whisper in the dark..."' />
-              </Field>
-              <Field label="Artist">
-                <input style={inputStyle} value={card.artist} onChange={e => update("artist", e.target.value)} placeholder="Artist name" />
-              </Field>
-            </>}
-
-            {tab === "art" && <>
-              <Field label="Upload Card Art">
-                <input ref={fileInputRef} type="file" accept="image/*" onChange={handleImageFile} style={{ display: "none" }} />
-                <button onClick={() => fileInputRef.current?.click()} style={{
-                  ...inputStyle, cursor: "pointer", textAlign: "center", background: "#2a1e0e",
-                  border: "2px dashed #5a3a10", padding: "20px", fontSize: 14,
-                }}>
-                  📁 Click to upload image
-                </button>
-              </Field>
-              <div style={{ color: "#8a7060", fontSize: 12, textAlign: "center" }}>— or paste an image URL —</div>
-              <Field label="Image URL">
-                <div style={{ display: "flex", gap: 6 }}>
-                  <input style={{ ...inputStyle, flex: 1 }} value={imageInput} onChange={e => setImageInput(e.target.value)} placeholder="https://..." />
-                  <button onClick={handleImageUrl} style={{
-                    background: "#3a2a10", border: "1px solid #d4af37", color: "#d4af37",
-                    borderRadius: 6, padding: "0 12px", cursor: "pointer", fontFamily: "inherit", fontSize: 13,
-                  }}>Set</button>
-                </div>
-              </Field>
-              {imageUrl && (
-                <div>
-                  <img src={imageUrl} alt="preview" style={{ width: "100%", borderRadius: 8, border: "1px solid #3a3020", maxHeight: 180, objectFit: "cover" }} />
-                  <button onClick={() => { setImageUrl(""); setImageInput(""); }} style={{
-                    marginTop: 6, background: "transparent", border: "1px solid #5a3020", color: "#c06040",
-                    borderRadius: 6, padding: "4px 12px", cursor: "pointer", fontSize: 12, fontFamily: "inherit", width: "100%",
-                  }}>Remove Image</button>
-                </div>
-              )}
-              <Field label="Set Symbol">
-                <input style={inputStyle} value={card.setSymbol} onChange={e => update("setSymbol", e.target.value)} placeholder="★ or set code" maxLength={4} />
-              </Field>
-            </>}
-
-            {tab === "stats" && <>
-              {isCreature && <>
-                <div style={{ display: "flex", gap: 10 }}>
-                  <Field label="Power">
-                    <input style={inputStyle} value={card.power} onChange={e => update("power", e.target.value)} placeholder="4" />
-                  </Field>
-                  <Field label="Toughness">
-                    <input style={inputStyle} value={card.toughness} onChange={e => update("toughness", e.target.value)} placeholder="3" />
-                  </Field>
-                </div>
-              </>}
-              {isPW && (
-                <Field label="Starting Loyalty">
-                  <input style={inputStyle} value={card.loyalty} onChange={e => update("loyalty", e.target.value)} placeholder="4" />
-                </Field>
-              )}
-              {!isCreature && !isPW && (
-                <div style={{ color: "#8a7060", fontSize: 13, fontStyle: "italic", padding: "12px 0" }}>
-                  No stats for this card type. Switch to Creature or Planeswalker to edit stats.
-                </div>
-              )}
-              <div style={{ borderTop: "1px solid #3a3020", paddingTop: 12 }}>
-                <div style={{ fontSize: 12, color: "#8a7060", marginBottom: 8 }}>Quick Reset</div>
-                <button onClick={() => setCard(DEFAULT_CARD)} style={{
-                  background: "#2a1e0e", border: "1px solid #5a3a10", color: "#c8a060",
-                  borderRadius: 6, padding: "7px 16px", cursor: "pointer", fontFamily: "inherit", fontSize: 13,
-                }}>↩ Reset to Default</button>
-              </div>
-            </>}
-          </div>
-        </div>
-
-        {/* Preview */}
-        <div style={{ flex: "1 1 300px", display: "flex", flexDirection: "column", alignItems: "center", gap: 20 }}>
-          <div style={{ fontSize: 12, color: "#8a7060", letterSpacing: 1, textTransform: "uppercase" }}>Preview</div>
-          <div ref={previewRef} id="card-preview" style={{ transform: "scale(1)", transformOrigin: "top center" }}>
-            <CardPreview card={card} imageUrl={imageUrl} />
-          </div>
-          <div style={{ fontSize: 11, color: "#5a4a30", textAlign: "center", maxWidth: 280 }}>
-            Use the Print button to print on card stock.<br />
-            Cut to 2.5" × 3.5" for standard size.
-          </div>
-        </div>
-      </div>
-
-      <style>{`
-        @media print {
-          body * { visibility: hidden; }
-          #card-preview, #card-preview * { visibility: visible; }
-          #card-preview {
-            position: fixed; left: 50%; top: 50%;
-            transform: translate(-50%,-50%) scale(2.5);
-            transform-origin: center center;
-          }
-        }
-        input:focus, textarea:focus, select:focus {
-          border-color: #d4af37 !important;
-          box-shadow: 0 0 0 2px #d4af3733;
-        }
-        select option { background: #1e1a14; color: #e8dfc8; }
-        * { box-sizing: border-box; }
-      `}</style>
-    </div>
-  );
+function switchTab(name, btn) {
+  document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
+  btn.classList.add('active');
+  document.querySelectorAll('.tab-panel').forEach(p => {
+    p.classList.toggle('active', p.id==='tab-'+name);
+  });
 }
+
+function handleFile(e) {
+  const file = e.target.files[0];
+  if (!file) return;
+  const reader = new FileReader();
+  reader.onload = ev => applyImage(ev.target.result);
+  reader.readAsDataURL(file);
+}
+
+function setImageUrl() {
+  const url = document.getElementById('urlInput').value.trim();
+  if (url) applyImage(url);
+}
+
+function applyImage(url) {
+  currentImageUrl = url;
+  const img = document.getElementById('cardArt');
+  img.src = url; img.style.display='block';
+  document.getElementById('artPlaceholder').style.display='none';
+  document.getElementById('artThumb').src = url;
+  document.getElementById('artPreview').style.display='flex';
+  update();
+}
+
+function removeImage() {
+  currentImageUrl = '';
+  const img = document.getElementById('cardArt');
+  img.src=''; img.style.display='none';
+  document.getElementById('artPlaceholder').style.display='block';
+  document.getElementById('artPreview').style.display='none';
+  document.getElementById('urlInput').value='';
+  document.getElementById('fileInput').value='';
+  update();
+}
+
+function resetCard() {
+  document.getElementById('f-name').value='Blazing Champion';
+  document.getElementById('f-mana').value='{2}{R}{R}';
+  document.getElementById('f-type').value='Creature';
+  document.getElementById('f-subtype').value='Human Warrior';
+  document.getElementById('f-rarity').value='Rare';
+  document.getElementById('f-rules').value='Haste\nWhen Blazing Champion enters the battlefield, it deals 2 damage to any target.';
+  document.getElementById('f-flavor').value='"No retreat. No mercy. Only fire."';
+  document.getElementById('f-artist').value='Proxy Artist';
+  document.getElementById('f-power').value='4';
+  document.getElementById('f-toughness').value='3';
+  document.getElementById('f-loyalty').value='4';
+  document.getElementById('f-set').value='★';
+  setColor('R');
+  removeImage();
+}
+
+update();
+</script>
+</body>
+</html>
