works, lol

app/src/assets/dev/index.html

@@ -39,7 +39,7 @@
                     </button>
                 </div>
             </div>
-            <button class="btn theme-toggle" onclick="toggleTheme()">🌙</button>
+            <button class="btn theme-toggle" onclick="toggleTheme()"></button>
         </div>
     </div>
 
@@ -71,7 +71,6 @@
         function initTheme() {
             const savedTheme = localStorage.getItem('theme') || 'dark';
             document.documentElement.setAttribute('data-theme', savedTheme);
-            updateThemeButton();
         }
 
         function toggleTheme() {
@@ -79,13 +78,6 @@
             const newTheme = current === 'dark' ? 'light' : 'dark';
             document.documentElement.setAttribute('data-theme', newTheme);
             localStorage.setItem('theme', newTheme);
-            updateThemeButton();
-        }
-
-        function updateThemeButton() {
-            const theme = document.documentElement.getAttribute('data-theme');
-            const btn = document.querySelector('.theme-toggle');
-            btn.textContent = theme === 'dark' ? '☀️' : '🌙';
         }
 
         function getIcon(type, name) {

app/src/assets/style/style.css

@@ -4,7 +4,6 @@
     box-sizing: border-box;
 }
 
-/* Light Mode (Cloudflare Dashboard Style) */
 :root[data-theme="light"] {
     --bg-primary: #ffffff;
     --bg-secondary: #f5f7fb;
@@ -15,9 +14,9 @@
     --accent: #0051ba;
     --accent-hover: #003e8f;
     --file-hover: #f0f2f5;
+    --icon: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjRweCIgdmlld0JveD0iMCAtOTYwIDk2MCA5NjAiIHdpZHRoPSIyNHB4IiBmaWxsPSJpbmhlcml0Ij48cGF0aCBkPSJNNjAwLTY0MCA0ODAtNzYwbDEyMC0xMjAgMTIwIDEyMC0xMjAgMTIwWm0yMDAgMTIwLTgwLTgwIDgwLTgwIDgwIDgwLTgwIDgwWk00ODMtODBxLTg0IDAtMTU3LjUtMzJ0LTEyOC04Ni41UTE0My0yNTMgMTExLTMyNi41VDc5LTQ4NHEwLTE0NiA5My0yNTcuNVQ0MDktODgwcS0xOCA5OSAxMSAxOTMuNVQ1MjAtNTIxcTcxIDcxIDE2NS41IDEwMFQ4NzktNDEwcS0yNiAxNDQtMTM4IDIzN1Q0ODMtODBabTAtODBxODggMCAxNjMtNDR0MTE4LTEyMXEtODYtOC0xNjMtNDMuNVQ0NjMtNDY1cS02MS02MS05Ny0xMzh0LTQzLTE2M3EtNzcgNDMtMTIwLjUgMTE4LjVUMTU5LTQ4NHEwIDEzNSA5NC41IDIyOS41VDQ4My0xNjBabS0yMC0zMDVaIi8+PC9zdmc+')
 }
 
-/* Dark Mode (GitHub Style) */
 :root[data-theme="dark"] {
     --bg-primary: #0d1117;
     --bg-secondary: #161b22;
@@ -28,6 +27,7 @@
     --accent: #58a6ff;
     --accent-hover: #79c0ff;
     --file-hover: #1c2128;
+    --icon: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjRweCIgdmlld0JveD0iMCAtOTYwIDk2MCA5NjAiIHdpZHRoPSIyNHB4IiBmaWxsPSIjZTNlM2UzIj48cGF0aCBkPSJNNDQwLTgwMHYtMTIwaDgwdjEyMGgtODBabTAgNzYwdi0xMjBoODB2MTIwaC04MFptMzYwLTQwMHYtODBoMTIwdjgwSDgwMFptLTc2MCAwdi04MGgxMjB2ODBINDBabTcwOC0yNTItNTYtNTYgNzAtNzIgNTggNTgtNzIgNzBaTTE5OC0xNDBsLTU4LTU4IDcyLTcwIDU2IDU2LTcwIDcyWm01NjQgMC03MC03MiA1Ni01NiA3MiA3MC01OCA1OFpNMjEyLTY5MmwtNzItNzAgNTgtNTggNzAgNzItNTYgNTZabTI2OCA0NTJxLTEwMCAwLTE3MC03MHQtNzAtMTcwcTAtMTAwIDcwLTE3MHQxNzAtNzBxMTAwIDAgMTcwIDcwdDcwIDE3MHEwIDEwMC03MCAxNzB0LTE3MCA3MFptMC04MHE2NyAwIDExMy41LTQ2LjVUNjQwLTQ4MHEwLTY3LTQ2LjUtMTEzLjVUNDgwLTY0MHEtNjcgMC0xMTMuNSA0Ni41VDMyMC00ODBxMCA2NyA0Ni41IDExMy41VDQ4MC0zMjBabTAtMTYwWiIvPjwvc3ZnPg==')
 }
 
 /* Default to dark mode */
@@ -53,7 +53,7 @@ body {
 
 .container {
     max-width: 1200px;
-    margin: 0 auto;
+    margin: 2vh auto;
     padding: 0;
     min-height: 100vh;
     display: flex;
@@ -63,7 +63,7 @@ body {
 .header {
     background-color: var(--bg-secondary);
     border-bottom: 1px solid var(--border-color);
-    padding: 1.5rem;
+    padding: 3rem;
     position: sticky;
     top: 0;
     z-index: 10;
@@ -131,6 +131,12 @@ body {
     white-space: nowrap;
 }
 
+.theme-toggle {
+    background: var(--text-secondary);
+    -webkit-mask: var(--icon) center/60% no-repeat;
+    mask: var(--icon) center/60% no-repeat;
+}
+
 .btn:hover {
     background-color: var(--accent);
     border-color: var(--accent);
@@ -150,6 +156,7 @@ body {
     gap: 1rem;
     border-bottom: 1px solid var(--border-color);
     background-color: var(--bg-secondary);
+    transition: background-color 0.3s ease, border-color 0.3s ease;
 }
 
 .meta {
@@ -157,6 +164,8 @@ body {
     gap: 2rem;
     font-size: 0.875rem;
     flex-wrap: wrap;
+    justify-content: space-between;
+    width: 100%;
 }
 
 #summary {
@@ -224,6 +233,7 @@ body {
     top: 0;
     background-color: var(--bg-secondary);
     z-index: 5;
+    transition: background-color 0.3s ease, border-color 0.3s ease;
 }
 
 .file-table th {