Fix overlay server mode routing

Author: steveseguin

popup.html

@@ -888,7 +888,7 @@
 .chat-overlay-design-note {
     margin: 10px 0;
     padding: 10px;
-    background: rgba(255,255,255,0.05);
+    background: var(--options-group-background-color);
     border-radius: 8px;
     overflow: hidden;
 }
@@ -4710,7 +4710,7 @@ <h2 class="chat_overlay_template_title">
 					<label for="overlay-preset-select" style="display: inline-block; margin-right: 10px;">
 						<span>🎨 Select chat overlay template:</span>
 					</label>
-					<select id="overlay-preset-select" data-optionsetting="overlayPreset" style="padding: 5px 10px; border-radius: 4px; background: #333; color: #fff; border: 1px solid #555;">
+					<select id="overlay-preset-select" data-optionsetting="overlayPreset" style="padding: 5px 10px; border-radius: 4px; background: var(--color-accent-subtle); color: var(--default-text-color); border: 1px solid var(--collapsible-border-color);">
 						<option value="sampleoverlay.html">📄 Sample Overlay - Basic chat overlay</option>
 						<option value="themes/compact-classic.html">💬 Compact Classic - Dense Twitch/IRC-style chat</option>
 						<option value="themes/compact-classic.html?ultra">⚡ Compact Ultra - Super dense minimum-height chat</option>
@@ -4764,11 +4764,11 @@ <h2 class="featured_chat_title">
 				</div>
 
                 <!-- Featured Overlay Preset Selector -->
-                <div class="preset-selector" style="margin: 10px 0; padding: 10px; background: rgba(255,255,255,0.05); border-radius: 8px;">
+                <div class="preset-selector" style="margin: 10px 0; padding: 10px; background: var(--options-group-background-color); border-radius: 8px;">
                     <label for="featured-preset-select" style="display: inline-block; margin-right: 10px;">
                         <span data-translate="preset-style">🎨 Preset Style:</span>
                     </label>
-                    <select id="featured-preset-select" data-optionsetting="featuredOverlayStyle" style="padding: 5px 10px; border-radius: 4px; background: #333; color: #fff; border: 1px solid #555;">
+                    <select id="featured-preset-select" data-optionsetting="featuredOverlayStyle" style="padding: 5px 10px; border-radius: 4px; background: var(--color-accent-subtle); color: var(--default-text-color); border: 1px solid var(--collapsible-border-color);">
                         <option value="">Classic (Full Customization)</option>
                         <option value="themes/featured-styles/featured-modern.html?style=glass">Modern Glass</option>
                         <option value="themes/featured-styles/featured-modern.html?style=neon">Neon Glow</option>
@@ -13234,7 +13234,7 @@ <h3>🎛️ <span data-translate="common-overlay-options">Common Options</span><
 								</div>
 								<div style="margin-top:6px;">
 									<label for="common-font-family" style="display:block; margin-bottom:4px;"><span data-translate="common-font-family">🔤 Font family</span></label>
-									<select id="common-font-family" data-optionparam30="fontfamily" style="padding: 5px 10px; border-radius: 4px; background: #333; color: #fff; border: 1px solid #555;">
+									<select id="common-font-family" data-optionparam30="fontfamily" style="padding: 5px 10px; border-radius: 4px; background: var(--color-accent-subtle); color: var(--default-text-color); border: 1px solid var(--collapsible-border-color);">
 										<option value="">Theme default</option>
 										<option value="Roboto">Roboto</option>
 										<option value="Open Sans">Open Sans</option>
@@ -13320,7 +13320,7 @@ <h3>💬 <span data-translate="compact-overlay-options">Compact Chat Options</sp
 								</div>
 								<div style="margin-top:6px;">
 									<label for="compact-font-family" style="display:block; margin-bottom:4px;"><span data-translate="compact-font-family">🔤 Font family</span></label>
-									<select id="compact-font-family" data-optionparam30="fontfamily" style="padding: 5px 10px; border-radius: 4px; background: #333; color: #fff; border: 1px solid #555;">
+									<select id="compact-font-family" data-optionparam30="fontfamily" style="padding: 5px 10px; border-radius: 4px; background: var(--color-accent-subtle); color: var(--default-text-color); border: 1px solid var(--collapsible-border-color);">
 										<option value="">Default (Inter)</option>
 										<option value="Roboto">Roboto</option>
 										<option value="Open Sans">Open Sans</option>
@@ -13543,7 +13543,7 @@ <h3>🎯 <span data-translate="danmaku-options">Danmaku Bullet Chat Options</spa
 								</div>
 								<div style="margin-top:6px;">
 									<label for="danmaku-region" style="display:block; margin-bottom:4px;"><span data-translate="danmaku-region">🖥️ Screen region</span></label>
-									<select id="danmaku-region" data-optionparam30="region" style="padding: 5px 10px; border-radius: 4px; background: #333; color: #fff; border: 1px solid #555;">
+									<select id="danmaku-region" data-optionparam30="region" style="padding: 5px 10px; border-radius: 4px; background: var(--color-accent-subtle); color: var(--default-text-color); border: 1px solid var(--collapsible-border-color);">
 										<option value="">Full screen</option>
 										<option value="top">Top half</option>
 										<option value="bottom">Bottom half</option>
@@ -13620,11 +13620,11 @@ <h3>
 				<div id="games" data-raw="" class="streaming_chat"><a href="" id="gameslink"></a></div>
 
 				<!-- Games Preset Selector -->
-				<div class="games-selector" style="margin: 10px 0; padding: 10px; background: rgba(255,255,255,0.05); border-radius: 8px;">
+				<div class="games-selector" style="margin: 10px 0; padding: 10px; background: var(--options-group-background-color); border-radius: 8px;">
 					<label for="games-preset-select" style="display: inline-block; margin-right: 10px;">
 						<span data-translate="select-game">🎯 Select Game:</span>
 					</label>
-					<select id="games-preset-select" style="padding: 5px 10px; border-radius: 4px; background: #333; color: #fff; border: 1px solid #555;">
+					<select id="games-preset-select" style="padding: 5px 10px; border-radius: 4px; background: var(--color-accent-subtle); color: var(--default-text-color); border: 1px solid var(--collapsible-border-color);">
 						<option value="">Choose a game...</option>
 						<option value="games.html">⚡ Spam Power - Chat activity powered</option>
 						<option value="battle.html">⚔️ Battlefield Mayhem - Automated chat combat</option>