Replace tab icons with custom PNG images

- Replace Template tab SVG icon with template.png
- Replace Disc Designer tab SVG icon with disk_designer.png
- Update CSS to style image icons with proper spacing and opacity
- Add vertical alignment and margin spacing to image icons

Co-Authored-By: Claude Sonnet 4.6 <[email protected]>

src/index.html

@@ -348,13 +348,15 @@
       color: #fff;
     }
 
-    .appModeTab svg {
+    .appModeTab svg, .appModeTab img {
       width: 26px;
       height: 26px;
       opacity: .85;
+      margin-right: 6px;
+      vertical-align: middle;
     }
 
-    .appModeTab.active svg {
+    .appModeTab.active svg, .appModeTab.active img {
       opacity: 1;
     }
 
@@ -1404,8 +1406,8 @@
       </div>
 
       <div class="appModeTabs">
-        <button type="button" class="appModeTab active" id="modeTabTemplate"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8l-5-5z"/><polyline points="14 3 14 8 19 8"/><line x1="8" y1="13" x2="16" y2="13"/><line x1="8" y1="17" x2="16" y2="17"/></svg>Template</button>
-        <button type="button" class="appModeTab" id="modeTabDesigner"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="3"/><line x1="12" y1="3" x2="12" y2="5"/><line x1="12" y1="19" x2="12" y2="21"/><line x1="3" y1="12" x2="5" y2="12"/><line x1="19" y1="12" x2="21" y2="12"/></svg>Disc Designer</button>
+        <button type="button" class="appModeTab active" id="modeTabTemplate"><img src="template.png" alt="Template" style="height: 24px; width: auto;" />Template</button>
+        <button type="button" class="appModeTab" id="modeTabDesigner"><img src="disk_designer.png" alt="Disc Designer" style="height: 24px; width: auto;" />Disc Designer</button>
       </div>