diff --git a/frontend/src/app.css b/frontend/src/app.css
index 510e65c..16634fe 100644
--- a/frontend/src/app.css
+++ b/frontend/src/app.css
@@ -4,7 +4,35 @@
     box-sizing: border-box;
 }
 
+/* Global scrollbar styling */
+* {
+    scrollbar-width: thin;
+    scrollbar-color: #444 transparent;
+}
+
+*::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+}
+
+*::-webkit-scrollbar-track {
+    background: transparent;
+}
+
+*::-webkit-scrollbar-thumb {
+    background: #444;
+    border-radius: 3px;
+}
+
+*::-webkit-scrollbar-thumb:hover {
+    background: #555;
+}
+
 :root {
+    /* Fonts */
+    --font-main: Tahoma, sans-serif;
+    --font-mono: monospace;
+
     /* Primary */
     --primary: #561d5e;
     --primary-light: #8b3a92;
@@ -69,7 +97,7 @@ html {
 }
 
 body {
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    font-family: var(--font-main);
     background: var(--black) !important;
     color: var(--white);
     line-height: 1.6;
@@ -245,7 +273,7 @@ button:disabled {
 }
 
 .pgp-key {
-    font-family: monospace;
+    font-family: var(--font-mono);
     font-size: 0.8rem;
     background: rgba(255, 255, 255, 0.05);
     padding: 1rem;
@@ -255,7 +283,7 @@ button:disabled {
 }
 
 .fingerprint {
-    font-family: monospace;
+    font-family: var(--font-mono);
     font-size: 0.9rem;
 }
 
diff --git a/frontend/src/lib/components/AudioPlayer.svelte b/frontend/src/lib/components/AudioPlayer.svelte
index 7b4d232..4dcc040 100644
--- a/frontend/src/lib/components/AudioPlayer.svelte
+++ b/frontend/src/lib/components/AudioPlayer.svelte
@@ -510,7 +510,7 @@
     .time {
         color: #8b949e;
         font-size: 0.7rem;
-        font-family: monospace;
+        font-family: var(--font-mono);
         min-width: 32px;
     }
 
diff --git a/frontend/src/lib/components/ChessGameOverlay.svelte b/frontend/src/lib/components/ChessGameOverlay.svelte
index cfc455d..9db027a 100644
--- a/frontend/src/lib/components/ChessGameOverlay.svelte
+++ b/frontend/src/lib/components/ChessGameOverlay.svelte
@@ -670,7 +670,7 @@
         display: flex;
         flex-direction: column;
         overflow: hidden;
-        font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+        font-family: var(--font-mono);
         min-width: 400px;
         min-height: 450px;
         max-width: calc(100vw - 2rem);
diff --git a/frontend/src/lib/components/EbookReaderOverlay.svelte b/frontend/src/lib/components/EbookReaderOverlay.svelte
index 501b70d..d347c2a 100644
--- a/frontend/src/lib/components/EbookReaderOverlay.svelte
+++ b/frontend/src/lib/components/EbookReaderOverlay.svelte
@@ -735,7 +735,7 @@
         display: flex;
         flex-direction: column;
         overflow: hidden;
-        font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+        font-family: var(--font-mono);
         min-width: 350px;
         min-height: 200px;
         max-width: calc(100vw - 2rem);
@@ -987,19 +987,6 @@
         padding: 0.25rem 0;
     }
 
-    .toc-list::-webkit-scrollbar {
-        width: 4px;
-    }
-
-    .toc-list::-webkit-scrollbar-track {
-        background: #0d1117;
-    }
-
-    .toc-list::-webkit-scrollbar-thumb {
-        background: #30363d;
-        border-radius: 2px;
-    }
-
     .toc-item {
         display: block;
         width: 100%;
diff --git a/frontend/src/lib/components/chat/ChatMessage.svelte b/frontend/src/lib/components/chat/ChatMessage.svelte
index 5e7f56e..5a696fe 100644
--- a/frontend/src/lib/components/chat/ChatMessage.svelte
+++ b/frontend/src/lib/components/chat/ChatMessage.svelte
@@ -651,7 +651,7 @@
 	.epoch {
 		color: var(--text-faint);
 		font-size: 0.65rem;
-		font-family: monospace;
+		font-family: var(--font-mono);
 	}
 
 	.self-destruct-indicator {
diff --git a/frontend/src/lib/components/chat/ChatPanel.svelte b/frontend/src/lib/components/chat/ChatPanel.svelte
index 98049f9..c0d2d38 100644
--- a/frontend/src/lib/components/chat/ChatPanel.svelte
+++ b/frontend/src/lib/components/chat/ChatPanel.svelte
@@ -825,12 +825,6 @@
 		min-height: 0; /* Allow flex shrinking */
 		max-height: 100%; /* Don't exceed container */
 		width: 100%; /* Ensure full width */
-		scrollbar-width: none; /* Firefox */
-		-ms-overflow-style: none; /* IE/Edge */
-	}
-
-	.messages-container::-webkit-scrollbar {
-		display: none; /* Chrome/Safari/Opera */
 	}
 
 	.empty-state {
@@ -889,7 +883,7 @@
 		overflow-y: auto;
 		overflow-x: hidden;
 		z-index: 200;
-		font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+		font-family: var(--font-mono);
 		font-size: 0.75rem;
 	}
 
diff --git a/frontend/src/lib/components/chat/ChatTerminal.svelte b/frontend/src/lib/components/chat/ChatTerminal.svelte
index 9c16e05..565f024 100644
--- a/frontend/src/lib/components/chat/ChatTerminal.svelte
+++ b/frontend/src/lib/components/chat/ChatTerminal.svelte
@@ -409,7 +409,7 @@
         background: transparent;
         display: flex;
         flex-direction: column;
-        font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+        font-family: var(--font-mono);
         z-index: 9999;
     }
 
@@ -630,7 +630,7 @@
         color: #7ee787;
         font-size: 0.75rem;
         font-weight: 600;
-        font-family: 'Consolas', 'Monaco', monospace;
+        font-family: var(--font-mono);
     }
 
     .calendar-header {
diff --git a/frontend/src/lib/components/chat/StickerBrowser.svelte b/frontend/src/lib/components/chat/StickerBrowser.svelte
index fed9ba4..814d986 100644
--- a/frontend/src/lib/components/chat/StickerBrowser.svelte
+++ b/frontend/src/lib/components/chat/StickerBrowser.svelte
@@ -313,19 +313,6 @@
 		padding-bottom: 0.25rem;
 	}
 
-	.favorites-grid::-webkit-scrollbar {
-		height: 4px;
-	}
-
-	.favorites-grid::-webkit-scrollbar-track {
-		background: transparent;
-	}
-
-	.favorites-grid::-webkit-scrollbar-thumb {
-		background: #30363d;
-		border-radius: 2px;
-	}
-
 	.favorite-sticker {
 		flex-shrink: 0;
 		width: 40px;
@@ -394,23 +381,6 @@
 		align-content: start;
 	}
 
-	.sticker-grid::-webkit-scrollbar {
-		width: 8px;
-	}
-
-	.sticker-grid::-webkit-scrollbar-track {
-		background: #0d1117;
-	}
-
-	.sticker-grid::-webkit-scrollbar-thumb {
-		background: #30363d;
-		border-radius: 4px;
-	}
-
-	.sticker-grid::-webkit-scrollbar-thumb:hover {
-		background: #484f58;
-	}
-
 	.sticker-item {
 		display: flex;
 		flex-direction: column;
diff --git a/frontend/src/lib/components/terminal/AudioBrowser.svelte b/frontend/src/lib/components/terminal/AudioBrowser.svelte
index 65ea43d..4d6eaf4 100644
--- a/frontend/src/lib/components/terminal/AudioBrowser.svelte
+++ b/frontend/src/lib/components/terminal/AudioBrowser.svelte
@@ -146,7 +146,7 @@
         flex-direction: column;
         overflow: hidden;
         background: #0d1117;
-        font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+        font-family: var(--font-mono);
     }
 
     /* Player section (terminal style) */
@@ -513,18 +513,6 @@
         overflow-y: auto;
     }
 
-    .queue-list::-webkit-scrollbar {
-        width: 6px;
-    }
-
-    .queue-list::-webkit-scrollbar-track {
-        background: #0d1117;
-    }
-
-    .queue-list::-webkit-scrollbar-thumb {
-        background: #30363d;
-    }
-
     .queue-item {
         display: flex;
         align-items: center;
diff --git a/frontend/src/lib/components/terminal/EbookBrowser.svelte b/frontend/src/lib/components/terminal/EbookBrowser.svelte
index 3c48adf..76c030c 100644
--- a/frontend/src/lib/components/terminal/EbookBrowser.svelte
+++ b/frontend/src/lib/components/terminal/EbookBrowser.svelte
@@ -173,7 +173,7 @@
         flex-direction: column;
         overflow: hidden;
         background: #0d1117;
-        font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+        font-family: var(--font-mono);
     }
 
     .ebooks-header {
@@ -202,19 +202,6 @@
         padding: 0.5rem;
     }
 
-    .ebooks-list::-webkit-scrollbar {
-        width: 6px;
-    }
-
-    .ebooks-list::-webkit-scrollbar-track {
-        background: #0d1117;
-    }
-
-    .ebooks-list::-webkit-scrollbar-thumb {
-        background: #30363d;
-        border-radius: 3px;
-    }
-
     .ebooks-loading,
     .loading-more {
         color: #8b949e;
diff --git a/frontend/src/lib/components/terminal/GamesBrowser.svelte b/frontend/src/lib/components/terminal/GamesBrowser.svelte
index 8b4c6d2..725203a 100644
--- a/frontend/src/lib/components/terminal/GamesBrowser.svelte
+++ b/frontend/src/lib/components/terminal/GamesBrowser.svelte
@@ -264,7 +264,7 @@
         flex-direction: column;
         overflow: hidden;
         background: #0d1117;
-        font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+        font-family: var(--font-mono);
     }
 
     .games-header {
@@ -324,19 +324,6 @@
         padding: 0.5rem;
     }
 
-    .games-list::-webkit-scrollbar {
-        width: 6px;
-    }
-
-    .games-list::-webkit-scrollbar-track {
-        background: #0d1117;
-    }
-
-    .games-list::-webkit-scrollbar-thumb {
-        background: #30363d;
-        border-radius: 3px;
-    }
-
     .games-loading {
         color: #8b949e;
         font-size: 0.75rem;
diff --git a/frontend/src/lib/components/terminal/StreamsBrowser.svelte b/frontend/src/lib/components/terminal/StreamsBrowser.svelte
index e208f4d..3faeb10 100644
--- a/frontend/src/lib/components/terminal/StreamsBrowser.svelte
+++ b/frontend/src/lib/components/terminal/StreamsBrowser.svelte
@@ -236,19 +236,6 @@
         padding: 0.5rem;
     }
 
-    .streams-list::-webkit-scrollbar {
-        width: 6px;
-    }
-
-    .streams-list::-webkit-scrollbar-track {
-        background: #0d1117;
-    }
-
-    .streams-list::-webkit-scrollbar-thumb {
-        background: #30363d;
-        border-radius: 3px;
-    }
-
     .streams-loading,
     .streams-empty {
         color: #8b949e;
diff --git a/frontend/src/lib/components/terminal/TerminalCore.svelte b/frontend/src/lib/components/terminal/TerminalCore.svelte
index 84b8c06..e8a1474 100644
--- a/frontend/src/lib/components/terminal/TerminalCore.svelte
+++ b/frontend/src/lib/components/terminal/TerminalCore.svelte
@@ -265,20 +265,6 @@
         padding: 0.5rem;
         color: #c9d1d9;
         background: transparent;
-        scrollbar-width: thin;
-        scrollbar-color: #30363d transparent;
-    }
-
-    .terminal-messages::-webkit-scrollbar {
-        width: 1px;
-    }
-
-    .terminal-messages::-webkit-scrollbar-track {
-        background: transparent;
-    }
-
-    .terminal-messages::-webkit-scrollbar-thumb {
-        background: #30363d;
     }
 
     /* Inline command input - appears at end of messages */
diff --git a/frontend/src/lib/components/terminal/TerminalTabBar.svelte b/frontend/src/lib/components/terminal/TerminalTabBar.svelte
index d8f1549..8b0c036 100644
--- a/frontend/src/lib/components/terminal/TerminalTabBar.svelte
+++ b/frontend/src/lib/components/terminal/TerminalTabBar.svelte
@@ -102,16 +102,10 @@
         display: flex;
         gap: 0.375rem;
         overflow-x: auto;
-        scrollbar-width: none;
-        -ms-overflow-style: none;
         min-width: 0;
         flex: 1;
     }
 
-    .tab-bar::-webkit-scrollbar {
-        display: none;
-    }
-
     .scroll-arrow {
         display: flex;
         align-items: center;
diff --git a/frontend/src/lib/components/terminal/TreasuryBrowser.svelte b/frontend/src/lib/components/terminal/TreasuryBrowser.svelte
index c28a8d4..bc2b80b 100644
--- a/frontend/src/lib/components/terminal/TreasuryBrowser.svelte
+++ b/frontend/src/lib/components/terminal/TreasuryBrowser.svelte
@@ -134,7 +134,7 @@
         font-size: 1.5rem;
         font-weight: 600;
         color: #ffd700;
-        font-family: 'Consolas', 'Monaco', monospace;
+        font-family: var(--font-mono);
     }
 
     .stat-value.destroyed {
@@ -175,7 +175,7 @@
         font-size: 1.75rem;
         font-weight: 600;
         color: #58a6ff;
-        font-family: 'Consolas', 'Monaco', monospace;
+        font-family: var(--font-mono);
     }
 
     .info-section {
@@ -235,7 +235,7 @@
         font-size: 1.25rem;
         font-weight: 600;
         color: #7ee787;
-        font-family: 'Consolas', 'Monaco', monospace;
+        font-family: var(--font-mono);
     }
 
     .your-share-note {
@@ -267,23 +267,6 @@
         border-color: #8b949e;
     }
 
-    /* Minimal 1px grey scrollbar */
-    .treasury-container::-webkit-scrollbar {
-        width: 1px;
-    }
-
-    .treasury-container::-webkit-scrollbar-track {
-        background: transparent;
-    }
-
-    .treasury-container::-webkit-scrollbar-thumb {
-        background: #30363d;
-    }
-
-    .treasury-container {
-        scrollbar-width: thin;
-        scrollbar-color: #30363d transparent;
-    }
 </style>
 
 <div class="treasury-container">
diff --git a/frontend/src/lib/components/terminal/WatchRoomsBrowser.svelte b/frontend/src/lib/components/terminal/WatchRoomsBrowser.svelte
index 660cc98..4333037 100644
--- a/frontend/src/lib/components/terminal/WatchRoomsBrowser.svelte
+++ b/frontend/src/lib/components/terminal/WatchRoomsBrowser.svelte
@@ -143,19 +143,6 @@
         padding: 0.5rem;
     }
 
-    .watch-list::-webkit-scrollbar {
-        width: 6px;
-    }
-
-    .watch-list::-webkit-scrollbar-track {
-        background: #0d1117;
-    }
-
-    .watch-list::-webkit-scrollbar-thumb {
-        background: #30363d;
-        border-radius: 3px;
-    }
-
     .watch-loading,
     .watch-empty {
         color: #8b949e;
diff --git a/frontend/src/lib/components/terminal/terminalStyles.css b/frontend/src/lib/components/terminal/terminalStyles.css
index 410eb30..49483aa 100644
--- a/frontend/src/lib/components/terminal/terminalStyles.css
+++ b/frontend/src/lib/components/terminal/terminalStyles.css
@@ -49,7 +49,7 @@
 	border-radius: 4px;
 	color: var(--terminal-text-muted);
 	font-size: 0.875rem;
-	font-family: 'Consolas', 'Monaco', monospace;
+	font-family: var(--font-mono);
 	cursor: pointer;
 	transition: all 0.15s ease;
 }
@@ -162,23 +162,6 @@
 	background: var(--terminal-bg);
 }
 
-.terminal-messages::-webkit-scrollbar {
-	width: 8px;
-}
-
-.terminal-messages::-webkit-scrollbar-track {
-	background: var(--terminal-bg);
-}
-
-.terminal-messages::-webkit-scrollbar-thumb {
-	background: var(--terminal-border);
-	border-radius: 4px;
-}
-
-.terminal-messages::-webkit-scrollbar-thumb:hover {
-	background: var(--border-hover);
-}
-
 /* ============================================
    TERMINAL INPUT
    ============================================ */
@@ -353,19 +336,6 @@
 	padding: 0.5rem;
 }
 
-.streams-list::-webkit-scrollbar {
-	width: 6px;
-}
-
-.streams-list::-webkit-scrollbar-track {
-	background: var(--terminal-bg);
-}
-
-.streams-list::-webkit-scrollbar-thumb {
-	background: var(--terminal-border);
-	border-radius: 3px;
-}
-
 .streams-loading,
 .streams-empty {
 	color: var(--terminal-text-muted);
@@ -625,7 +595,7 @@
 	justify-content: space-between;
 	font-size: 0.65rem;
 	color: var(--terminal-text-muted);
-	font-family: monospace;
+	font-family: var(--font-mono);
 	margin-bottom: 0.5rem;
 }
 
@@ -818,7 +788,7 @@
 
 .queue-duration {
 	font-size: 0.65rem;
-	font-family: monospace;
+	font-family: var(--font-mono);
 }
 
 .remove-btn {
@@ -862,19 +832,6 @@
 	padding: 0.5rem;
 }
 
-.audio-list::-webkit-scrollbar {
-	width: 6px;
-}
-
-.audio-list::-webkit-scrollbar-track {
-	background: var(--terminal-bg);
-}
-
-.audio-list::-webkit-scrollbar-thumb {
-	background: var(--terminal-border);
-	border-radius: 3px;
-}
-
 .audio-loading,
 .audio-empty {
 	color: var(--terminal-text-muted);
diff --git a/frontend/src/lib/components/watch/WatchPlaylist.svelte b/frontend/src/lib/components/watch/WatchPlaylist.svelte
index 9efa02a..5c139d9 100644
--- a/frontend/src/lib/components/watch/WatchPlaylist.svelte
+++ b/frontend/src/lib/components/watch/WatchPlaylist.svelte
@@ -322,9 +322,7 @@
 
 <style>
     .playlist-container {
-        background: #111;
-        border: 1px solid var(--border);
-        border-radius: 8px;
+        background: #1a1a1a;
         display: flex;
         flex-direction: column;
         height: 100%;
@@ -435,25 +433,6 @@
     .playlist-items {
         flex: 1;
         overflow-y: auto;
-        scrollbar-width: thin;
-        scrollbar-color: #444 transparent;
-    }
-
-    .playlist-items::-webkit-scrollbar {
-        width: 6px;
-    }
-
-    .playlist-items::-webkit-scrollbar-track {
-        background: transparent;
-    }
-
-    .playlist-items::-webkit-scrollbar-thumb {
-        background: #444;
-        border-radius: 3px;
-    }
-
-    .playlist-items::-webkit-scrollbar-thumb:hover {
-        background: #555;
     }
 
     .playlist-item {
@@ -638,20 +617,6 @@
         padding: 1rem;
         overflow-y: auto;
         flex: 1;
-        scrollbar-width: thin;
-        scrollbar-color: #555 transparent;
-    }
-
-    .settings-panel::-webkit-scrollbar {
-        width: 1px;
-    }
-
-    .settings-panel::-webkit-scrollbar-track {
-        background: transparent;
-    }
-
-    .settings-panel::-webkit-scrollbar-thumb {
-        background: #555;
     }
 
     .settings-section h3 {
diff --git a/frontend/src/lib/components/watch/YouTubePlayer.svelte b/frontend/src/lib/components/watch/YouTubePlayer.svelte
index a17ec2d..ebe8b11 100644
--- a/frontend/src/lib/components/watch/YouTubePlayer.svelte
+++ b/frontend/src/lib/components/watch/YouTubePlayer.svelte
@@ -185,6 +185,13 @@
         const currentTime = player.getCurrentTime();
         const drift = Math.abs(currentTime - expectedTime);
 
+        // Skip drift detection when video has ended - the player is stuck at end time
+        // and expected time keeps advancing, causing infinite "Controller seek detected" loop
+        if (hasVideoEnded) {
+            // Video ended - don't try to sync, wait for skip/next
+            return;
+        }
+
         // Check if we need to sync (tight 2-second threshold like CyTube)
         if (drift > DRIFT_THRESHOLD) {
             if ($canControl) {
diff --git a/frontend/src/routes/+layout.svelte b/frontend/src/routes/+layout.svelte
index df4c41e..57be7ae 100644
--- a/frontend/src/routes/+layout.svelte
+++ b/frontend/src/routes/+layout.svelte
@@ -90,9 +90,9 @@
 
 <style>
     :global(:root) {
-        --nav-padding-y: 0.3rem;
+        --nav-padding-y: 2px;
         --nav-margin-bottom: 0.33rem;
-        --nav-height: 2.66rem; /* content(32px/2rem) + padding(0.6rem) + border(1px) */
+        --nav-height: 36px; /* content(32px) + padding(4px) */
     }
 
     .nav {
@@ -100,7 +100,7 @@
     }
 
     .nav-container {
-        padding: 0 2rem;
+        padding: 2px 2rem;
         display: flex;
         align-items: center;
     }
diff --git a/frontend/src/routes/+page.svelte b/frontend/src/routes/+page.svelte
index a87d821..2041544 100644
--- a/frontend/src/routes/+page.svelte
+++ b/frontend/src/routes/+page.svelte
@@ -614,7 +614,7 @@
     }
 
     .audio-duration {
-        font-family: monospace;
+        font-family: var(--font-mono);
         color: var(--gray);
         font-size: 0.85rem;
         min-width: 45px;
diff --git a/frontend/src/routes/admin/+page.svelte b/frontend/src/routes/admin/+page.svelte
index 0836134..c42d0cd 100644
--- a/frontend/src/routes/admin/+page.svelte
+++ b/frontend/src/routes/admin/+page.svelte
@@ -1951,7 +1951,7 @@
     }
     
     .stream-key-cell {
-        font-family: monospace;
+        font-family: var(--font-mono);
         font-size: 0.9rem;
         max-width: 200px;
         overflow: hidden;
@@ -3463,7 +3463,7 @@
                         bind:value={censoredWords}
                         placeholder="word1, word2, phrase to censor, another word"
                         rows="6"
-                        style="margin-top: 0.5rem; width: 100%; resize: vertical; font-family: monospace; border-color: {censoredWordsValid ? 'var(--border)' : '#ef4444'};"
+                        style="margin-top: 0.5rem; width: 100%; resize: vertical; font-family: var(--font-mono); border-color: {censoredWordsValid ? 'var(--border)' : '#ef4444'};"
                     ></textarea>
 
                     <!-- Validation Stats -->
@@ -3788,7 +3788,7 @@
                             {#each uberbannedFingerprints as fingerprint}
                                 <tr>
                                     <td>
-                                        <code style="background: rgba(239, 68, 68, 0.2); padding: 0.25rem 0.5rem; border-radius: 4px; font-family: monospace; font-size: 0.85rem;">
+                                        <code style="background: rgba(239, 68, 68, 0.2); padding: 0.25rem 0.5rem; border-radius: 4px; font-family: var(--font-mono); font-size: 0.85rem;">
                                             {fingerprint.substring(0, 16)}...{fingerprint.substring(fingerprint.length - 8)}
                                         </code>
                                         <button
diff --git a/frontend/src/routes/audio/+page.svelte b/frontend/src/routes/audio/+page.svelte
index 7003fa2..25fe8fb 100644
--- a/frontend/src/routes/audio/+page.svelte
+++ b/frontend/src/routes/audio/+page.svelte
@@ -270,7 +270,7 @@
     }
 
     .audio-duration {
-        font-family: monospace;
+        font-family: var(--font-mono);
         color: var(--gray);
         font-size: 0.85rem;
         min-width: 45px;
diff --git a/frontend/src/routes/audio/[name]/+page.svelte b/frontend/src/routes/audio/[name]/+page.svelte
index 81084d2..ad672ae 100644
--- a/frontend/src/routes/audio/[name]/+page.svelte
+++ b/frontend/src/routes/audio/[name]/+page.svelte
@@ -306,7 +306,7 @@
     }
 
     .audio-duration {
-        font-family: monospace;
+        font-family: var(--font-mono);
         color: var(--gray);
         font-size: 0.9rem;
         min-width: 50px;
diff --git a/frontend/src/routes/audio/realm/[id]/+page.svelte b/frontend/src/routes/audio/realm/[id]/+page.svelte
index 7102d7f..fab4760 100644
--- a/frontend/src/routes/audio/realm/[id]/+page.svelte
+++ b/frontend/src/routes/audio/realm/[id]/+page.svelte
@@ -306,7 +306,7 @@
     }
 
     .audio-duration {
-        font-family: monospace;
+        font-family: var(--font-mono);
         color: var(--gray);
         font-size: 0.9rem;
         min-width: 50px;
diff --git a/frontend/src/routes/chat/terminal/+page.svelte b/frontend/src/routes/chat/terminal/+page.svelte
index c276439..7325f55 100644
--- a/frontend/src/routes/chat/terminal/+page.svelte
+++ b/frontend/src/routes/chat/terminal/+page.svelte
@@ -306,7 +306,7 @@
         background: #111;
         display: flex;
         flex-direction: column;
-        font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+        font-family: var(--font-mono);
         overflow: hidden;
     }
 
@@ -463,7 +463,7 @@
         color: #4caf50;
         font-size: 0.75rem;
         font-weight: 600;
-        font-family: 'Consolas', 'Monaco', monospace;
+        font-family: var(--font-mono);
     }
 
     .calendar-header {
@@ -543,22 +543,4 @@
         opacity: 0.9;
     }
 
-    /* Minimal 1px grey scrollbar */
-    .terminal-popout :global(*::-webkit-scrollbar) {
-        width: 1px;
-        height: 1px;
-    }
-
-    .terminal-popout :global(*::-webkit-scrollbar-track) {
-        background: transparent;
-    }
-
-    .terminal-popout :global(*::-webkit-scrollbar-thumb) {
-        background: #333;
-    }
-
-    .terminal-popout :global(*) {
-        scrollbar-width: thin;
-        scrollbar-color: #333 transparent;
-    }
 </style>
diff --git a/frontend/src/routes/forums/+page.svelte b/frontend/src/routes/forums/+page.svelte
index 62fafca..913fab8 100644
--- a/frontend/src/routes/forums/+page.svelte
+++ b/frontend/src/routes/forums/+page.svelte
@@ -300,11 +300,6 @@
         gap: 0.5rem;
         padding: 0.75rem 1rem;
         overflow-x: auto;
-        scrollbar-width: none;
-    }
-
-    .realm-nav::-webkit-scrollbar {
-        display: none;
     }
 
     .nav-link {
@@ -709,7 +704,7 @@
 
     .color-text-input {
         width: 90px;
-        font-family: monospace;
+        font-family: var(--font-mono);
         text-transform: uppercase;
     }
 
diff --git a/frontend/src/routes/forums/[slug]/+page.svelte b/frontend/src/routes/forums/[slug]/+page.svelte
index 94ebbe1..f26db06 100644
--- a/frontend/src/routes/forums/[slug]/+page.svelte
+++ b/frontend/src/routes/forums/[slug]/+page.svelte
@@ -1026,7 +1026,7 @@
 
     .color-text-input {
         width: 90px;
-        font-family: monospace;
+        font-family: var(--font-mono);
         text-transform: uppercase;
     }
 
diff --git a/frontend/src/routes/forums/[slug]/thread/[threadId]/+page.svelte b/frontend/src/routes/forums/[slug]/thread/[threadId]/+page.svelte
index b4d66c7..db13253 100644
--- a/frontend/src/routes/forums/[slug]/thread/[threadId]/+page.svelte
+++ b/frontend/src/routes/forums/[slug]/thread/[threadId]/+page.svelte
@@ -415,7 +415,7 @@
         background: rgba(255, 255, 255, 0.1);
         padding: 0.2rem 0.4rem;
         border-radius: 3px;
-        font-family: monospace;
+        font-family: var(--font-mono);
     }
 
     .thread-content :global(pre) {
diff --git a/frontend/src/routes/games/chess/+page.svelte b/frontend/src/routes/games/chess/+page.svelte
index b47f45c..64a1f28 100644
--- a/frontend/src/routes/games/chess/+page.svelte
+++ b/frontend/src/routes/games/chess/+page.svelte
@@ -819,7 +819,7 @@
 
     .elo {
         color: #8b949e;
-        font-family: monospace;
+        font-family: var(--font-mono);
         font-size: 0.9rem;
     }
 
diff --git a/frontend/src/routes/login/+page.svelte b/frontend/src/routes/login/+page.svelte
index 3fe4890..e18c0bf 100644
--- a/frontend/src/routes/login/+page.svelte
+++ b/frontend/src/routes/login/+page.svelte
@@ -389,7 +389,7 @@
                 readonly 
                 rows="10" 
                 value={generatedPublicKey}
-                style="font-family: monospace; font-size: 0.8rem;"
+                style="font-family: var(--font-mono); font-size: 0.8rem;"
             />
             <div style="display: flex; gap: 0.5rem; margin-top: 0.5rem;">
                 <button type="button" on:click={() => copyToClipboard(generatedPublicKey)}>
@@ -407,7 +407,7 @@
                 readonly 
                 rows="10" 
                 value={generatedPrivateKey}
-                style="font-family: monospace; font-size: 0.8rem;"
+                style="font-family: var(--font-mono); font-size: 0.8rem;"
             />
             <div style="display: flex; gap: 0.5rem; margin-top: 0.5rem;">
                 <button type="button" on:click={() => copyToClipboard(generatedPrivateKey)}>
@@ -626,7 +626,7 @@ iQEcBAABCAAGBQJe...
                         id="referral-code"
                         bind:value={referralCode}
                         placeholder="Enter code (e.g., ABC123DEF456)"
-                        style="font-family: monospace; text-transform: uppercase; letter-spacing: 2px;"
+                        style="font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 2px;"
                         disabled={referralValidating}
                     />
                 </div>
@@ -654,7 +654,7 @@ iQEcBAABCAAGBQJe...
                 {#if referralValid}
                     <div class="referral-badge" style="background: rgba(40, 167, 69, 0.1); border: 1px solid rgba(40, 167, 69, 0.3); border-radius: 8px; padding: 0.75rem 1rem; margin-bottom: 1.5rem; display: flex; align-items: center; gap: 0.5rem;">
                         <span style="color: #28a745;">Registering with code:</span>
-                        <code style="font-family: monospace; letter-spacing: 2px; background: var(--black); padding: 0.25rem 0.5rem; border-radius: 4px;">{referralCode.toUpperCase()}</code>
+                        <code style="font-family: var(--font-mono); letter-spacing: 2px; background: var(--black); padding: 0.25rem 0.5rem; border-radius: 4px;">{referralCode.toUpperCase()}</code>
                     </div>
                 {/if}
                 <div class="form-group">
@@ -816,7 +816,7 @@ iQEcBAABCAAGBQJe...
         border: 1px solid var(--border);
         border-radius: 4px;
         padding: 1rem;
-        font-family: monospace;
+        font-family: var(--font-mono);
         font-size: 0.8rem;
         overflow-x: auto;
         white-space: pre;
@@ -832,7 +832,7 @@ iQEcBAABCAAGBQJe...
     }
     
     .pgp-key {
-        font-family: monospace;
+        font-family: var(--font-mono);
         font-size: 0.8rem;
         background: rgba(255, 255, 255, 0.05);
         padding: 1rem;
diff --git a/frontend/src/routes/my-realms/+page.svelte b/frontend/src/routes/my-realms/+page.svelte
index 286d928..63aac88 100644
--- a/frontend/src/routes/my-realms/+page.svelte
+++ b/frontend/src/routes/my-realms/+page.svelte
@@ -1884,7 +1884,7 @@
     }
     
     .stream-key {
-        font-family: monospace;
+        font-family: var(--font-mono);
         background: rgba(0, 0, 0, 0.3);
         padding: 0.25rem 0.5rem;
         border-radius: 4px;
@@ -3840,7 +3840,7 @@
                         bind:value={titleColor}
                         placeholder="#ffffff"
                         maxlength="7"
-                        style="width: 100px; font-family: monospace; text-transform: uppercase; padding: 0.5rem; background: #000; border: 1px solid var(--border); border-radius: 4px; color: var(--white);"
+                        style="width: 100px; font-family: var(--font-mono); text-transform: uppercase; padding: 0.5rem; background: #000; border: 1px solid var(--border); border-radius: 4px; color: var(--white);"
                     />
                     <span style="color: {titleColor}; font-size: 1.1rem; font-weight: 600;">
                         {realms.find(r => r.id === titleColorRealmId)?.name || 'Preview'}
diff --git a/frontend/src/routes/profile/[username]/+page.svelte b/frontend/src/routes/profile/[username]/+page.svelte
index 9c07ba1..6eda5b1 100644
--- a/frontend/src/routes/profile/[username]/+page.svelte
+++ b/frontend/src/routes/profile/[username]/+page.svelte
@@ -403,7 +403,7 @@
     }
 
     .fingerprint-display {
-        font-family: monospace;
+        font-family: var(--font-mono);
         font-size: 0.9rem;
     }
 
@@ -450,7 +450,7 @@
     }
     
     .pgp-key {
-        font-family: monospace;
+        font-family: var(--font-mono);
         font-size: 0.8rem;
         background: rgba(255, 255, 255, 0.05);
         padding: 1rem;
@@ -677,7 +677,7 @@
                 <div class="badges-row">
                     <div class="color-badge">
                         <span class="color-dot" style="background: {profile.colorCode || '#561D5E'}"></span>
-                        <span style="font-family: monospace;">{profile.colorCode || '#561D5E'}</span>
+                        <span style="font-family: var(--font-mono);">{profile.colorCode || '#561D5E'}</span>
                     </div>
                     <div class="ubercoin-badge">
                         <span class="coin-icon">Ü</span>
diff --git a/frontend/src/routes/settings/+page.svelte b/frontend/src/routes/settings/+page.svelte
index f5cf034..b7f4af1 100644
--- a/frontend/src/routes/settings/+page.svelte
+++ b/frontend/src/routes/settings/+page.svelte
@@ -1618,7 +1618,7 @@
     
     .color-input {
         padding: 0.75rem;
-        font-family: monospace;
+        font-family: var(--font-mono);
         text-transform: uppercase;
     }
     
@@ -1873,7 +1873,7 @@
     }
 
     .zoom-value {
-        font-family: monospace;
+        font-family: var(--font-mono);
         color: var(--primary);
     }
 
@@ -1934,7 +1934,7 @@
     }
 
     .position-display span {
-        font-family: monospace;
+        font-family: var(--font-mono);
     }
 
     .banner-editor-help {
@@ -2154,7 +2154,7 @@
     }
 
     .referral-code {
-        font-family: monospace;
+        font-family: var(--font-mono);
         font-size: 1.1rem;
         padding: 0.5rem 1rem;
         background: var(--black);
@@ -2489,7 +2489,7 @@
                         title="Current color"
                     ></div>
                     <div>
-                        <div style="font-family: monospace; font-size: 1.1rem;">
+                        <div style="font-family: var(--font-mono); font-size: 1.1rem;">
                             {userColor}
                         </div>
                         <div style="font-size: 0.85rem; color: var(--gray);">
@@ -2564,7 +2564,7 @@
                                 ></div>
                                 <div>
                                     <div style="font-size: 0.85rem; color: var(--gray);">Preview</div>
-                                    <div style="font-family: monospace;">{newColor}</div>
+                                    <div style="font-family: var(--font-mono);">{newColor}</div>
                                 </div>
                             </div>
                         </div>
@@ -2630,7 +2630,7 @@
                             setTimeout(() => message = '', 3000);
                         }
                     }}
-                    style="font-family: monospace; text-align: center; cursor: pointer; background: rgba(255, 255, 255, 0.05);"
+                    style="font-family: var(--font-mono); text-align: center; cursor: pointer; background: rgba(255, 255, 255, 0.05);"
                     placeholder="Press a key..."
                 />
                 <p style="font-size: 0.75rem; color: var(--gray); margin-top: 0.5rem;">
@@ -2865,7 +2865,7 @@
                                 readonly 
                                 rows="8" 
                                 value={generatedPublicKey}
-                                style="font-family: monospace; font-size: 0.8rem;"
+                                style="font-family: var(--font-mono); font-size: 0.8rem;"
                             />
                             <div style="display: flex; gap: 0.5rem; margin-top: 0.5rem;">
                                 <button type="button" on:click={() => copyToClipboard(generatedPublicKey)}>
@@ -2883,7 +2883,7 @@
                                 readonly 
                                 rows="8" 
                                 value={generatedPrivateKey}
-                                style="font-family: monospace; font-size: 0.8rem;"
+                                style="font-family: var(--font-mono); font-size: 0.8rem;"
                             />
                             <div style="display: flex; gap: 0.5rem; margin-top: 0.5rem;">
                                 <button type="button" on:click={() => copyPrivateKeyToClipboard(generatedPrivateKey)}>
@@ -2942,7 +2942,7 @@
                             bind:value={newPublicKey}
                             rows="10"
                             placeholder="-----BEGIN PGP PUBLIC KEY BLOCK-----"
-                            style="font-family: monospace; font-size: 0.9rem;"
+                            style="font-family: var(--font-mono); font-size: 0.9rem;"
                         />
                     </div>
                     <button on:click={addPublicKey} disabled={loading || !newPublicKey}>
@@ -2986,7 +2986,7 @@
                                 type="text"
                                 value={createdKey.apiKey}
                                 readonly
-                                style="font-family: monospace; flex: 1;"
+                                style="font-family: var(--font-mono); flex: 1;"
                             />
                             <button on:click={() => copyApiKey(createdKey.apiKey)}>
                                 Copy
diff --git a/frontend/src/routes/stats/+page.svelte b/frontend/src/routes/stats/+page.svelte
index d7fcf2d..a47476d 100644
--- a/frontend/src/routes/stats/+page.svelte
+++ b/frontend/src/routes/stats/+page.svelte
@@ -177,7 +177,7 @@
     .sticker-name {
         flex: 1;
         color: #ccc;
-        font-family: monospace;
+        font-family: var(--font-mono);
         z-index: 1;
         font-size: 0.95rem;
     }