diff --git a/src/components/AIConfigPanel.tsx b/src/components/AIConfigPanel.tsx
index 859cfde..42a6d6f 100644
--- a/src/components/AIConfigPanel.tsx
+++ b/src/components/AIConfigPanel.tsx
@@ -136,7 +136,7 @@ export function AIConfigPanel({
             value={title}
             onChange={(e) => onTitleChange(e.target.value)}
             maxLength={50}
-            className="text-base font-semibold text-gray-900 dark:text-gray-100 bg-transparent border-b border-gray-300 dark:border-gray-600 focus:border-indigo-500 focus:outline-none w-full"
+            className="text-base font-semibold text-gray-900 dark:text-gray-100 bg-transparent border-b border-gray-300 dark:border-white/10 focus:border-indigo-500 focus:outline-none w-full"
             placeholder="Bot name"
           />
         </div>
@@ -193,7 +193,7 @@ export function AIConfigPanel({
         {showVersions && (
           <div
             ref={versionPanelRef}
-            className="mb-2 border border-gray-200 dark:border-gray-600 rounded-lg overflow-hidden bg-white dark:bg-gray-900 shadow-md"
+            className="mb-2 border border-gray-200 dark:border-white/10 rounded-lg overflow-hidden bg-white dark:bg-[#0c1830] shadow-md"
           >
             {versions.length === 0 ? (
               <p className="text-xs text-gray-400 dark:text-gray-500 px-3 py-3 text-center">
@@ -202,7 +202,7 @@ export function AIConfigPanel({
             ) : (
               <div className="divide-y divide-gray-100 dark:divide-gray-700 max-h-48 overflow-y-auto">
                 {versions.map((v) => (
-                  <div key={v.id} className="flex items-start gap-2 px-3 py-2 hover:bg-gray-50 dark:hover:bg-gray-800 group">
+                  <div key={v.id} className="flex items-start gap-2 px-3 py-2 hover:bg-gray-50 dark:hover:bg-[#16294a] group">
                     <div className="flex-1 min-w-0">
                       <p className="text-[10px] text-gray-400 dark:text-gray-500 mb-0.5">{formatDate(v.created_at)}</p>
                       <p className="text-xs text-gray-700 dark:text-gray-300 line-clamp-2">{v.content}</p>
@@ -223,13 +223,13 @@ export function AIConfigPanel({
         <textarea
           value={systemPrompt}
           onChange={(e) => onSystemPromptChange(e.target.value)}
-          className="w-full p-3 border border-lab-border dark:border-gray-600 rounded-lab-btn min-h-[160px] text-sm font-mono focus:ring-2 focus:ring-lab-primary focus:border-transparent bg-lab-bg dark:bg-gray-700 text-lab-heading dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 resize-y"
+          className="w-full p-3 border border-lab-border dark:border-white/10 rounded-lab-btn min-h-[160px] text-sm font-mono focus:ring-2 focus:ring-lab-primary focus:border-transparent bg-lab-bg dark:bg-[#16294a] text-lab-heading dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 resize-y"
           placeholder="Enter system prompt…"
         />
       </div>
 
       {/* Message appearance */}
-      <div className="mt-4 pt-4 border-t border-gray-100 dark:border-gray-700">
+      <div className="mt-4 pt-4 border-t border-gray-100 dark:border-white/10">
         <p className="text-sm font-medium text-gray-700 dark:text-gray-200 mb-3">Message Appearance</p>
         <div className="flex gap-6">
           <label className="flex flex-col gap-1.5 text-xs text-gray-600 dark:text-gray-400">
@@ -239,7 +239,7 @@ export function AIConfigPanel({
                 type="color"
                 value={bubbleColor}
                 onChange={(e) => onBubbleColorChange(e.target.value)}
-                className="w-8 h-8 rounded cursor-pointer border border-gray-200 dark:border-gray-600"
+                className="w-8 h-8 rounded cursor-pointer border border-gray-200 dark:border-white/10"
                 title="Bubble background color"
               />
               <span className="font-mono text-gray-400 dark:text-gray-500">{bubbleColor}</span>
@@ -252,7 +252,7 @@ export function AIConfigPanel({
                 type="color"
                 value={textColor}
                 onChange={(e) => onTextColorChange(e.target.value)}
-                className="w-8 h-8 rounded cursor-pointer border border-gray-200 dark:border-gray-600"
+                className="w-8 h-8 rounded cursor-pointer border border-gray-200 dark:border-white/10"
                 title="Message text color"
               />
               <span className="font-mono text-gray-400 dark:text-gray-500">{textColor}</span>
diff --git a/src/components/ChatPanel.tsx b/src/components/ChatPanel.tsx
index 98a9e6a..61d221a 100644
--- a/src/components/ChatPanel.tsx
+++ b/src/components/ChatPanel.tsx
@@ -187,7 +187,7 @@ export function ChatPanel({
   const hasMessages = onExportTxt != null;
 
   return (
-    <div className="flex-1 min-h-0 bg-white dark:bg-gray-800 rounded-lg shadow-sm overflow-hidden flex flex-col">
+    <div className="flex-1 min-h-0 bg-white dark:bg-[#0f1e38] rounded-lg shadow-sm overflow-hidden flex flex-col">
 
       {/* SPEC-02: participant / condition banner */}
       {(sessionId || conditionLabel) && (
@@ -199,15 +199,15 @@ export function ChatPanel({
       )}
 
       {/* Header bar */}
-      <div data-tour="chat-tabs" className="flex items-center justify-between px-4 py-3 border-b dark:border-gray-700 bg-gray-50 dark:bg-gray-900">
+      <div data-tour="chat-tabs" className="flex items-center justify-between px-4 py-3 border-b dark:border-white/10 bg-gray-50 dark:bg-[#0c1830]">
         <div className="flex items-center gap-3">
           {/* Tab switcher */}
-          <div className="flex gap-0.5 border border-gray-200 dark:border-gray-600 rounded-lg p-0.5 bg-gray-100 dark:bg-gray-800">
+          <div className="flex gap-0.5 border border-gray-200 dark:border-white/10 rounded-lg p-0.5 bg-gray-100 dark:bg-[#0f1e38]">
             <button
               onClick={() => setActiveTab('chat')}
               className={`flex items-center gap-1.5 px-2.5 py-1 text-xs rounded-md transition-colors ${
                 activeTab === 'chat'
-                  ? 'bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 shadow-sm font-medium'
+                  ? 'bg-white dark:bg-[#16294a] text-gray-900 dark:text-gray-100 shadow-sm font-medium'
                   : 'text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200'
               }`}
             >
@@ -218,7 +218,7 @@ export function ChatPanel({
               onClick={() => setActiveTab('data')}
               className={`flex items-center gap-1.5 px-2.5 py-1 text-xs rounded-md transition-colors ${
                 activeTab === 'data'
-                  ? 'bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 shadow-sm font-medium'
+                  ? 'bg-white dark:bg-[#16294a] text-gray-900 dark:text-gray-100 shadow-sm font-medium'
                   : 'text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200'
               }`}
             >
@@ -234,7 +234,7 @@ export function ChatPanel({
               onClick={() => setActiveTab('stats')}
               className={`flex items-center gap-1.5 px-2.5 py-1 text-xs rounded-md transition-colors ${
                 activeTab === 'stats'
-                  ? 'bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 shadow-sm font-medium'
+                  ? 'bg-white dark:bg-[#16294a] text-gray-900 dark:text-gray-100 shadow-sm font-medium'
                   : 'text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200'
               }`}
             >
@@ -262,7 +262,7 @@ export function ChatPanel({
           {onResetChat && (
             <button
               onClick={onResetChat}
-              className="flex items-center gap-1.5 px-3 py-1.5 text-xs text-gray-600 dark:text-gray-400 hover:text-red-600 dark:hover:text-red-400 border border-gray-300 dark:border-gray-600 hover:border-red-300 dark:hover:border-red-500 rounded-lg hover:bg-red-50 dark:hover:bg-red-900/20 transition-colors"
+              className="flex items-center gap-1.5 px-3 py-1.5 text-xs text-gray-600 dark:text-gray-400 hover:text-red-600 dark:hover:text-red-400 border border-gray-300 dark:border-white/10 hover:border-red-300 dark:hover:border-red-500 rounded-lg hover:bg-red-50 dark:hover:bg-red-900/20 transition-colors"
               title="Clear chat display (data kept in history)"
             >
               <RotateCcw className="w-3.5 h-3.5" />
@@ -275,24 +275,24 @@ export function ChatPanel({
             <div className="relative" ref={exportMenuRef}>
               <button
                 onClick={() => setShowExportMenu(v => !v)}
-                className="flex items-center gap-1.5 px-3 py-1.5 text-xs text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"
+                className="flex items-center gap-1.5 px-3 py-1.5 text-xs text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 border border-gray-300 dark:border-white/10 rounded-lg hover:bg-gray-100 dark:hover:bg-[#16294a] transition-colors"
               >
                 <Download className="w-3.5 h-3.5" />
                 Export
                 <ChevronDown className="w-3 h-3" />
               </button>
               {showExportMenu && (
-                <div className="absolute right-0 top-full mt-1 w-44 bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-600 z-10 overflow-hidden">
+                <div className="absolute right-0 top-full mt-1 w-44 bg-white dark:bg-[#0f1e38] rounded-lg shadow-lg border border-gray-200 dark:border-white/10 z-10 overflow-hidden">
                   <button
                     onClick={() => { onExportTxt?.(); setShowExportMenu(false); }}
-                    className="w-full flex items-center gap-2 px-3 py-2 text-xs text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700"
+                    className="w-full flex items-center gap-2 px-3 py-2 text-xs text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-[#16294a]"
                   >
                     <FileText className="w-3.5 h-3.5 text-gray-400 dark:text-gray-500" />
                     Download .txt
                   </button>
                   <button
                     onClick={() => { onExportCsv?.(); setShowExportMenu(false); }}
-                    className="w-full flex items-center gap-2 px-3 py-2 text-xs text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700"
+                    className="w-full flex items-center gap-2 px-3 py-2 text-xs text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-[#16294a]"
                   >
                     <FileSpreadsheet className="w-3.5 h-3.5 text-gray-400 dark:text-gray-500" />
                     Download .csv
@@ -300,7 +300,7 @@ export function ChatPanel({
                   <button
                     onClick={handleScreenshot}
                     disabled={screenshotting}
-                    className="w-full flex items-center gap-2 px-3 py-2 text-xs text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 disabled:opacity-50"
+                    className="w-full flex items-center gap-2 px-3 py-2 text-xs text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-[#16294a] disabled:opacity-50"
                   >
                     <Camera className="w-3.5 h-3.5 text-gray-400 dark:text-gray-500" />
                     {screenshotting ? 'Capturing…' : 'Screenshot (.png)'}
@@ -354,7 +354,7 @@ export function ChatPanel({
 
       {/* SPEC-02: run token display after conversation ends */}
       {runTokens && runTokens.length > 0 && (
-        <div className="px-4 py-2 border-t dark:border-gray-700 bg-indigo-50 dark:bg-indigo-900/20">
+        <div className="px-4 py-2 border-t dark:border-white/10 bg-indigo-50 dark:bg-indigo-900/20">
           <p className="text-[11px] text-indigo-600 dark:text-indigo-400 font-medium mb-1">
             Run token{runTokens.length > 1 ? 's' : ''} — copy into your survey for record linkage
           </p>
@@ -364,7 +364,7 @@ export function ChatPanel({
                 {runTokens.length > 1 && (
                   <span className="text-[10px] text-indigo-400 w-8">Run {i + 1}</span>
                 )}
-                <code className="flex-1 text-[11px] font-mono bg-white dark:bg-gray-800 border border-indigo-200 dark:border-indigo-700 rounded px-2 py-0.5 text-indigo-700 dark:text-indigo-300 truncate">
+                <code className="flex-1 text-[11px] font-mono bg-white dark:bg-[#0f1e38] border border-indigo-200 dark:border-indigo-700 rounded px-2 py-0.5 text-indigo-700 dark:text-indigo-300 truncate">
                   {token}
                 </code>
                 <button
@@ -384,7 +384,7 @@ export function ChatPanel({
       )}
 
       {/* Input area */}
-      <div className="p-3 border-t dark:border-gray-700 space-y-2">
+      <div className="p-3 border-t dark:border-white/10 space-y-2">
 
         {/* Scenario prompt — hidden in asymmetric mode when an opening message is configured */}
         {!(botMode === 'asymmetric' && openingMessage.trim()) && (
@@ -411,7 +411,7 @@ export function ChatPanel({
                   ? 'Scenario prompt (optional — sets the scene for both bots before they start)'
                   : 'Scenario prompt (optional — sets the scene for the conversation, e.g. a question or topic)'
               }
-              className="flex-1 p-2.5 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent text-sm disabled:opacity-50 disabled:cursor-not-allowed bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 resize-y min-h-[100px]"
+              className="flex-1 p-2.5 border border-gray-300 dark:border-white/10 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent text-sm disabled:opacity-50 disabled:cursor-not-allowed bg-white dark:bg-[#16294a] text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 resize-y min-h-[100px]"
             />
             {isLoading && onStop ? (
               <button
@@ -478,7 +478,7 @@ export function ChatPanel({
               type="checkbox"
               checked={autoInteract}
               onChange={(e) => onAutoInteractChange(e.target.checked)}
-              className="rounded border-gray-300 dark:border-gray-600 text-indigo-600 focus:ring-indigo-500"
+              className="rounded border-gray-300 dark:border-white/10 text-indigo-600 focus:ring-indigo-500"
             />
             Auto-interact
             <InfoTooltip text="When enabled, the two AIs automatically take turns responding to each other up to the messages-per-bot limit. Disable to trigger each response manually." />
@@ -495,7 +495,7 @@ export function ChatPanel({
                   step="1"
                   value={Math.ceil(maxInteractions / 2)}
                   onChange={(e) => onMaxInteractionsChange(Math.max(2, Number(e.target.value)) * 2)}
-                  className="w-14 px-2 py-1 border border-gray-300 dark:border-gray-600 rounded text-sm focus:ring-2 focus:ring-indigo-500 focus:border-transparent bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100"
+                  className="w-14 px-2 py-1 border border-gray-300 dark:border-white/10 rounded text-sm focus:ring-2 focus:ring-indigo-500 focus:border-transparent bg-white dark:bg-[#16294a] text-gray-900 dark:text-gray-100"
                 />
                 <InfoTooltip text="How many times each bot responds per run (min 2). Set to 5 → Bot A speaks 5 times, Bot B speaks 5 times (10 total AI responses)." />
               </label>
@@ -520,7 +520,7 @@ export function ChatPanel({
                   type="checkbox"
                   checked={delayVariance}
                   onChange={(e) => onDelayVarianceChange(e.target.checked)}
-                  className="rounded border-gray-300 dark:border-gray-600 text-indigo-600 focus:ring-indigo-500"
+                  className="rounded border-gray-300 dark:border-white/10 text-indigo-600 focus:ring-indigo-500"
                 />
                 <span className="text-gray-500 dark:text-gray-400">Length-based delay</span>
                 <InfoTooltip text="Adds extra delay proportional to the length of each message (approx. 0.05 s per word), simulating the time a human would take to read it." />
@@ -535,7 +535,7 @@ export function ChatPanel({
                   step="1"
                   value={repetitionCount}
                   onChange={(e) => onRepetitionCountChange(Math.max(1, Number(e.target.value)))}
-                  className="w-14 px-2 py-1 border border-gray-300 dark:border-gray-600 rounded text-sm focus:ring-2 focus:ring-indigo-500 focus:border-transparent bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100"
+                  className="w-14 px-2 py-1 border border-gray-300 dark:border-white/10 rounded text-sm focus:ring-2 focus:ring-indigo-500 focus:border-transparent bg-white dark:bg-[#16294a] text-gray-900 dark:text-gray-100"
                 />
                 <span className="text-gray-500 dark:text-gray-400">conversations</span>
                 <InfoTooltip text="Run the same conversation from scratch this many times. Useful for generating multiple varied responses to the same opening prompt." />
@@ -548,7 +548,7 @@ export function ChatPanel({
               type="checkbox"
               checked={chatMode}
               onChange={(e) => onChatModeChange(e.target.checked)}
-              className="rounded border-gray-300 dark:border-gray-600 text-indigo-600 focus:ring-indigo-500"
+              className="rounded border-gray-300 dark:border-white/10 text-indigo-600 focus:ring-indigo-500"
             />
             <span className="text-gray-500 dark:text-gray-400">Chat mode</span>
             <InfoTooltip text="When enabled, appends an instruction to both bots asking them to reply in short, conversational sentences (1–2 sentences max). Your own prompts are always preserved." />
@@ -559,7 +559,7 @@ export function ChatPanel({
               type="checkbox"
               checked={saveHistory}
               onChange={(e) => onSaveHistoryChange(e.target.checked)}
-              className="rounded border-gray-300 dark:border-gray-600 text-indigo-600 focus:ring-indigo-500"
+              className="rounded border-gray-300 dark:border-white/10 text-indigo-600 focus:ring-indigo-500"
             />
             <span className="text-gray-500 dark:text-gray-400">Save to history</span>
             <InfoTooltip text="When disabled, this conversation is not written to the database. Nothing is stored server-side — useful for sensitive research data or private experiments." align="right" />
@@ -567,27 +567,27 @@ export function ChatPanel({
         </div>
 
         {/* Research controls row */}
-        <div className="flex flex-wrap items-start gap-x-5 gap-y-2.5 text-sm pt-2 border-t border-gray-100 dark:border-gray-700">
+        <div className="flex flex-wrap items-start gap-x-5 gap-y-2.5 text-sm pt-2 border-t border-gray-100 dark:border-white/10">
           {/* SPEC-03: bot role mode toggle */}
           <div className="flex items-center gap-2">
             <span className="text-xs text-gray-500 dark:text-gray-400">Bot roles</span>
-            <div className="flex rounded-md border border-gray-300 dark:border-gray-600 overflow-hidden text-[11px]">
+            <div className="flex rounded-md border border-gray-300 dark:border-white/10 overflow-hidden text-[11px]">
               <button
                 onClick={() => onBotModeChange('symmetric')}
                 className={`px-2.5 py-1 transition-colors ${
                   botMode === 'symmetric'
                     ? 'bg-indigo-600 text-white'
-                    : 'bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600'
+                    : 'bg-white dark:bg-[#16294a] text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-[#16294a]'
                 }`}
               >
                 Symmetric
               </button>
               <button
                 onClick={() => onBotModeChange('asymmetric')}
-                className={`px-2.5 py-1 transition-colors border-l border-gray-300 dark:border-gray-600 ${
+                className={`px-2.5 py-1 transition-colors border-l border-gray-300 dark:border-white/10 ${
                   botMode === 'asymmetric'
                     ? 'bg-indigo-600 text-white'
-                    : 'bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600'
+                    : 'bg-white dark:bg-[#16294a] text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-[#16294a]'
                 }`}
               >
                 Asymmetric
@@ -605,7 +605,7 @@ export function ChatPanel({
                 value={openingMessage}
                 onChange={(e) => onOpeningMessageChange(e.target.value)}
                 placeholder="Scripted first line (blank = AI generates)"
-                className="flex-1 min-w-0 px-2 py-1 text-xs border border-gray-300 dark:border-gray-600 rounded focus:ring-1 focus:ring-indigo-500 focus:border-transparent bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500"
+                className="flex-1 min-w-0 px-2 py-1 text-xs border border-gray-300 dark:border-white/10 rounded focus:ring-1 focus:ring-indigo-500 focus:border-transparent bg-white dark:bg-[#16294a] text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500"
               />
               <InfoTooltip text="Fixed first message from Bot A that does NOT count against the turn limit. Leave blank to let Bot A's AI generate its opening line from its system prompt." />
             </label>
@@ -619,7 +619,7 @@ export function ChatPanel({
               value={stopKeywords}
               onChange={(e) => onStopKeywordsChange(e.target.value)}
               placeholder="agreed, deal, accept"
-              className="w-44 px-2 py-1 text-xs border border-gray-300 dark:border-gray-600 rounded focus:ring-1 focus:ring-indigo-500 focus:border-transparent bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500"
+              className="w-44 px-2 py-1 text-xs border border-gray-300 dark:border-white/10 rounded focus:ring-1 focus:ring-indigo-500 focus:border-transparent bg-white dark:bg-[#16294a] text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500"
             />
             <InfoTooltip text="Comma-separated keywords. If any bot's response contains one, the conversation stops immediately. The trigger is recorded in CSV exports as a dependent variable." />
           </label>
@@ -648,7 +648,7 @@ export function ChatPanel({
               <ChevronDown className="w-3 h-3" />
             </button>
             {showShareMenu && (
-              <div className="absolute right-0 bottom-full mb-1 w-52 bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-600 z-10 overflow-hidden">
+              <div className="absolute right-0 bottom-full mb-1 w-52 bg-white dark:bg-[#0f1e38] rounded-lg shadow-lg border border-gray-200 dark:border-white/10 z-10 overflow-hidden">
                 <button
                   onClick={() => { onSaveExperiment(); setShowShareMenu(false); }}
                   className="w-full flex items-center gap-2 px-3 py-2.5 text-xs text-gray-700 dark:text-gray-300 hover:bg-indigo-50 dark:hover:bg-indigo-900/20 text-left"
@@ -659,17 +659,17 @@ export function ChatPanel({
                     <div className="text-gray-400 dark:text-gray-500 text-[10px]">Save config to your account</div>
                   </div>
                 </button>
-                <div className="border-t border-gray-100 dark:border-gray-700" />
+                <div className="border-t border-gray-100 dark:border-white/10" />
                 <button
                   onClick={() => { onShareConfig(); setShowShareMenu(false); }}
-                  className="w-full flex items-center gap-2 px-3 py-2 text-xs text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 text-left"
+                  className="w-full flex items-center gap-2 px-3 py-2 text-xs text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-[#16294a] text-left"
                 >
                   <Link className="w-3.5 h-3.5 text-gray-400" />
                   {shareCopied ? 'URL copied!' : 'Copy share URL'}
                 </button>
                 <button
                   onClick={() => { onDownloadConfigJson(); setShowShareMenu(false); }}
-                  className="w-full flex items-center gap-2 px-3 py-2 text-xs text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 text-left"
+                  className="w-full flex items-center gap-2 px-3 py-2 text-xs text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-[#16294a] text-left"
                 >
                   <FileText className="w-3.5 h-3.5 text-gray-400" />
                   Download as JSON
diff --git a/src/components/ConversationAnalytics.tsx b/src/components/ConversationAnalytics.tsx
index 4aa3140..9954534 100644
--- a/src/components/ConversationAnalytics.tsx
+++ b/src/components/ConversationAnalytics.tsx
@@ -66,7 +66,7 @@ function buildTextReport(
 
 function StatRow({ label, icon, v1, v2 }: { label: string; icon?: React.ReactNode; v1: string; v2: string }) {
   return (
-    <div className="grid grid-cols-[1fr_auto_auto] gap-3 items-center py-1.5 border-b border-gray-100 dark:border-gray-700/60 last:border-0">
+    <div className="grid grid-cols-[1fr_auto_auto] gap-3 items-center py-1.5 border-b border-gray-100 dark:border-white/10/60 last:border-0">
       <span className="text-xs text-gray-600 dark:text-gray-400 flex items-center gap-1.5">{icon}{label}</span>
       <span className="text-sm font-semibold tabular-nums text-right w-24" style={{ color: COLOR1 }}>{v1}</span>
       <span className="text-sm font-semibold tabular-nums text-right w-24" style={{ color: COLOR2 }}>{v2}</span>
@@ -119,7 +119,7 @@ export function ConversationAnalytics({ messages, botName1, botName2, textColor1
         </div>
         <button
           onClick={handleDownload}
-          className="flex items-center gap-1.5 px-3 py-1.5 text-xs text-gray-600 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors flex-shrink-0"
+          className="flex items-center gap-1.5 px-3 py-1.5 text-xs text-gray-600 dark:text-gray-300 border border-gray-300 dark:border-white/10 rounded-lg hover:bg-gray-100 dark:hover:bg-[#16294a] transition-colors flex-shrink-0"
         >
           <Download className="w-3.5 h-3.5" />
           Report (.txt)
@@ -128,15 +128,15 @@ export function ConversationAnalytics({ messages, botName1, botName2, textColor1
 
       {/* Headline takeaway */}
       {spokeMore && (
-        <div className="rounded-xl bg-gradient-to-r from-indigo-50 to-emerald-50 dark:from-indigo-900/20 dark:to-emerald-900/20 border border-gray-200 dark:border-gray-700 px-4 py-3 text-sm text-gray-700 dark:text-gray-300">
+        <div className="rounded-xl bg-gradient-to-r from-indigo-50 to-emerald-50 dark:from-indigo-900/20 dark:to-emerald-900/20 border border-gray-200 dark:border-white/10 px-4 py-3 text-sm text-gray-700 dark:text-gray-300">
           <span className="font-semibold" style={{ color: spokeMore === botName1 ? c1 : c2 }}>{spokeMore}</span>
           {' '}produced more total words ({fmtInt(Math.max(bot1.totalWords, bot2.totalWords))} vs {fmtInt(Math.min(bot1.totalWords, bot2.totalWords))}).
         </div>
       )}
 
       {/* Descriptives */}
-      <section className="rounded-xl border border-gray-200 dark:border-gray-700 p-4">
-        <div className="grid grid-cols-[1fr_auto_auto] gap-3 items-center pb-2 mb-1 border-b border-gray-200 dark:border-gray-600">
+      <section className="rounded-xl border border-gray-200 dark:border-white/10 p-4">
+        <div className="grid grid-cols-[1fr_auto_auto] gap-3 items-center pb-2 mb-1 border-b border-gray-200 dark:border-white/10">
           <span className="text-[11px] uppercase tracking-wide text-gray-400 dark:text-gray-500">Metric</span>
           <span className="text-xs font-semibold text-right w-24 truncate" style={{ color: c1 }} title={botName1}>{botName1}</span>
           <span className="text-xs font-semibold text-right w-24 truncate" style={{ color: c2 }} title={botName2}>{botName2}</span>
@@ -160,7 +160,7 @@ export function ConversationAnalytics({ messages, botName1, botName2, textColor1
       </section>
 
       {/* Significance tests */}
-      <section className="rounded-xl border border-gray-200 dark:border-gray-700 p-4">
+      <section className="rounded-xl border border-gray-200 dark:border-white/10 p-4">
         <h4 className="text-sm font-semibold text-gray-800 dark:text-gray-200 mb-2">Are the differences significant?</h4>
         {insufficient ? (
           <p className="text-xs text-gray-500 dark:text-gray-400">
@@ -194,7 +194,7 @@ export function ConversationAnalytics({ messages, botName1, botName2, textColor1
 
       {/* Distinctive words */}
       {(distinctive.botA.length > 0 || distinctive.botB.length > 0) && (
-        <section className="rounded-xl border border-gray-200 dark:border-gray-700 p-4">
+        <section className="rounded-xl border border-gray-200 dark:border-white/10 p-4">
           <h4 className="text-sm font-semibold text-gray-800 dark:text-gray-200 mb-3 flex items-center gap-1.5">
             <Sparkles className="w-3.5 h-3.5 text-amber-500" />
             Distinctive words
@@ -210,7 +210,7 @@ export function ConversationAnalytics({ messages, botName1, botName2, textColor1
                     col.words.map((w) => (
                       <span
                         key={w.word}
-                        className="px-2 py-0.5 rounded-full text-xs bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300"
+                        className="px-2 py-0.5 rounded-full text-xs bg-gray-100 dark:bg-[#16294a] text-gray-700 dark:text-gray-300"
                         title={`used ${col.name === botName1 ? w.countA : w.countB}× here vs ${col.name === botName1 ? w.countB : w.countA}× by the other`}
                       >
                         {w.word}
diff --git a/src/components/ConversationDisplay.tsx b/src/components/ConversationDisplay.tsx
index ccce8fd..99a27e4 100644
--- a/src/components/ConversationDisplay.tsx
+++ b/src/components/ConversationDisplay.tsx
@@ -99,9 +99,9 @@ export function ConversationDisplay({
 
         const repDivider = showRepDivider ? (
           <div key={`rep-${message.id}`} className="flex items-center gap-3 py-1">
-            <div className="flex-1 h-px bg-gray-200 dark:bg-gray-600" />
+            <div className="flex-1 h-px bg-gray-200 dark:bg-[#16294a]" />
             <span className="text-xs text-gray-400 dark:text-gray-500 font-medium px-2">Run {repNum}</span>
-            <div className="flex-1 h-px bg-gray-200 dark:bg-gray-600" />
+            <div className="flex-1 h-px bg-gray-200 dark:bg-[#16294a]" />
           </div>
         ) : null;
 
@@ -111,7 +111,7 @@ export function ConversationDisplay({
               {repDivider}
               <motion.div
                 {...messageEntrance}
-                className="flex flex-col gap-1 px-3 py-2 rounded-xl shadow-sm bg-white dark:bg-gray-700 border border-gray-200 dark:border-gray-600 mr-12"
+                className="flex flex-col gap-1 px-3 py-2 rounded-xl shadow-sm bg-white dark:bg-[#16294a] border border-gray-200 dark:border-white/10 mr-12"
               >
                 <div className="flex items-center justify-between">
                   <div className="flex items-center gap-2">
diff --git a/src/components/DataTable.tsx b/src/components/DataTable.tsx
index dec8694..bcf403f 100644
--- a/src/components/DataTable.tsx
+++ b/src/components/DataTable.tsx
@@ -21,12 +21,12 @@ export function DataTable({ messages, botName1, botName2 }: DataTableProps) {
   return (
     <div className="overflow-auto h-full">
       <table className="min-w-full text-xs border-collapse">
-        <thead className="sticky top-0 bg-gray-50 dark:bg-gray-900 z-10">
+        <thead className="sticky top-0 bg-gray-50 dark:bg-[#0c1830] z-10">
           <tr>
             {['Conv. ID', 'Time', 'Sender', 'Model', 'Temp', 'Words', 'ms', 'Message'].map(col => (
               <th
                 key={col}
-                className="px-2 py-2 text-left font-semibold text-gray-600 dark:text-gray-400 border-b border-gray-200 dark:border-gray-700 whitespace-nowrap"
+                className="px-2 py-2 text-left font-semibold text-gray-600 dark:text-gray-400 border-b border-gray-200 dark:border-white/10 whitespace-nowrap"
               >
                 {col}
               </th>
@@ -38,7 +38,7 @@ export function DataTable({ messages, botName1, botName2 }: DataTableProps) {
             const sender = m.role === 'user' ? 'You' : (m.botIndex === 1 ? botName1 : botName2);
             const isUser = m.role === 'user';
             return (
-              <tr key={m.id} className={`border-b border-gray-100 dark:border-gray-700 ${i % 2 === 0 ? '' : 'bg-gray-50 dark:bg-gray-700/40'}`}>
+              <tr key={m.id} className={`border-b border-gray-100 dark:border-white/10 ${i % 2 === 0 ? '' : 'bg-gray-50 dark:bg-[#16294a]/40'}`}>
                 <td className="px-2 py-1.5 font-mono text-gray-400 dark:text-gray-500 whitespace-nowrap">
                   {m.conversationId ? m.conversationId.slice(0, 8) : '—'}
                 </td>
diff --git a/src/components/ModelConfig.tsx b/src/components/ModelConfig.tsx
index 8964559..6d784c6 100644
--- a/src/components/ModelConfig.tsx
+++ b/src/components/ModelConfig.tsx
@@ -125,7 +125,7 @@ export function ModelConfig({
         <select
           value={model}
           onChange={(e) => handleProviderChange(e.target.value as AIModel)}
-          className="w-full p-2 bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-xl text-sm text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all"
+          className="w-full p-2 bg-gray-50 dark:bg-[#16294a] border border-gray-200 dark:border-white/10 rounded-xl text-sm text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all"
           disabled={disabled}
         >
           {(Object.keys(PROVIDER_LABELS) as AIModel[]).map((m) => (
@@ -151,7 +151,7 @@ export function ModelConfig({
           type="password"
           value={apiKey}
           onChange={(e) => onApiKeyChange(e.target.value)}
-          className="w-full p-2 bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-xl text-sm text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all"
+          className="w-full p-2 bg-gray-50 dark:bg-[#16294a] border border-gray-200 dark:border-white/10 rounded-xl text-sm text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all"
           placeholder={API_KEY_PLACEHOLDERS[model]}
           disabled={disabled}
         />
@@ -169,7 +169,7 @@ export function ModelConfig({
             const v = versions.find(v => v.id === e.target.value);
             if (v) onMaxTokensChange(Math.min(maxTokens, v.maxTokens));
           }}
-          className="w-full p-2 bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-xl text-sm text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all"
+          className="w-full p-2 bg-gray-50 dark:bg-[#16294a] border border-gray-200 dark:border-white/10 rounded-xl text-sm text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all"
           disabled={disabled}
         >
           {versions.map((v) => (
@@ -191,7 +191,7 @@ export function ModelConfig({
           value={temperature}
           onChange={(e) => onTemperatureChange(Number(e.target.value))}
           aria-label={`Temperature: ${temperature}`}
-          className="w-full h-2 bg-gray-200 dark:bg-gray-600 rounded-lg appearance-none cursor-pointer accent-indigo-600"
+          className="w-full h-2 bg-gray-200 dark:bg-[#16294a] rounded-lg appearance-none cursor-pointer accent-indigo-600"
           disabled={disabled}
         />
         <div className="flex justify-between text-xs text-gray-400 dark:text-gray-500">
@@ -214,7 +214,7 @@ export function ModelConfig({
             const v = Number(e.target.value);
             onMaxTokensChange(Math.max(1, Math.min(v, currentMax)));
           }}
-          className="w-full p-2 bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-xl text-sm text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all"
+          className="w-full p-2 bg-gray-50 dark:bg-[#16294a] border border-gray-200 dark:border-white/10 rounded-xl text-sm text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all"
           disabled={disabled}
         />
       </div>
diff --git a/src/components/SetupPage.tsx b/src/components/SetupPage.tsx
index 193f786..e962e9e 100644
--- a/src/components/SetupPage.tsx
+++ b/src/components/SetupPage.tsx
@@ -125,7 +125,7 @@ export function SetupPage(props: SetupPageProps) {
             value={props.userInput}
             onChange={(e) => props.onUserInputChange(e.target.value)}
             placeholder="Describe a scenario, pose a question, or leave blank to let the system prompts guide the conversation..."
-            className="w-full p-3 border border-lab-border dark:border-gray-600 rounded-lab-btn text-sm font-mono bg-lab-bg dark:bg-gray-700 text-lab-heading dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 resize-y min-h-[120px] focus:ring-2 focus:ring-lab-primary focus:border-transparent"
+            className="w-full p-3 border border-lab-border dark:border-white/10 rounded-lab-btn text-sm font-mono bg-lab-bg dark:bg-[#16294a] text-lab-heading dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 resize-y min-h-[120px] focus:ring-2 focus:ring-lab-primary focus:border-transparent"
           />
         </div>
 
@@ -145,7 +145,7 @@ export function SetupPage(props: SetupPageProps) {
                 {/* Auto-interact */}
                 <label className="flex items-center gap-2 cursor-pointer">
                   <input type="checkbox" checked={props.autoInteract} onChange={e => props.onAutoInteractChange(e.target.checked)}
-                    className="rounded border-gray-300 dark:border-gray-600 text-indigo-600 focus:ring-indigo-500" />
+                    className="rounded border-gray-300 dark:border-white/10 text-indigo-600 focus:ring-indigo-500" />
                   Auto-interact
                   <InfoTooltip text="When enabled, the two AIs automatically take turns responding to each other." />
                 </label>
@@ -153,7 +153,7 @@ export function SetupPage(props: SetupPageProps) {
                 {/* Chat mode */}
                 <label className="flex items-center gap-2 cursor-pointer">
                   <input type="checkbox" checked={props.chatMode} onChange={e => props.onChatModeChange(e.target.checked)}
-                    className="rounded border-gray-300 dark:border-gray-600 text-indigo-600 focus:ring-indigo-500" />
+                    className="rounded border-gray-300 dark:border-white/10 text-indigo-600 focus:ring-indigo-500" />
                   Chat mode
                   <InfoTooltip text="Appends an instruction to both bots asking them to reply in short, conversational sentences (1–2 sentences max)." />
                 </label>
@@ -161,7 +161,7 @@ export function SetupPage(props: SetupPageProps) {
                 {/* Save to history */}
                 <label className="flex items-center gap-2 cursor-pointer">
                   <input type="checkbox" checked={props.saveHistory} onChange={e => props.onSaveHistoryChange(e.target.checked)}
-                    className="rounded border-gray-300 dark:border-gray-600 text-indigo-600 focus:ring-indigo-500" />
+                    className="rounded border-gray-300 dark:border-white/10 text-indigo-600 focus:ring-indigo-500" />
                   Save to history
                   <InfoTooltip text="When disabled, this conversation is not written to the database." />
                 </label>
@@ -175,7 +175,7 @@ export function SetupPage(props: SetupPageProps) {
                     <input type="number" min="2" max="25" step="1"
                       value={Math.ceil(props.maxInteractions / 2)}
                       onChange={e => props.onMaxInteractionsChange(Math.max(2, Number(e.target.value)) * 2)}
-                      className="w-14 px-2 py-1 border border-gray-300 dark:border-gray-600 rounded text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100" />
+                      className="w-14 px-2 py-1 border border-gray-300 dark:border-white/10 rounded text-sm bg-white dark:bg-[#16294a] text-gray-900 dark:text-gray-100" />
                   </label>
 
                   {/* Delay */}
@@ -191,7 +191,7 @@ export function SetupPage(props: SetupPageProps) {
                   {/* Length-based delay */}
                   <label className="flex items-center gap-2 cursor-pointer">
                     <input type="checkbox" checked={props.delayVariance} onChange={e => props.onDelayVarianceChange(e.target.checked)}
-                      className="rounded border-gray-300 dark:border-gray-600 text-indigo-600 focus:ring-indigo-500" />
+                      className="rounded border-gray-300 dark:border-white/10 text-indigo-600 focus:ring-indigo-500" />
                     <span className="text-gray-500 dark:text-gray-400">Length-based delay</span>
                   </label>
 
@@ -201,7 +201,7 @@ export function SetupPage(props: SetupPageProps) {
                     <input type="number" min="1" max="100" step="1"
                       value={props.repetitionCount}
                       onChange={e => props.onRepetitionCountChange(Math.max(1, Number(e.target.value)))}
-                      className="w-14 px-2 py-1 border border-gray-300 dark:border-gray-600 rounded text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100" />
+                      className="w-14 px-2 py-1 border border-gray-300 dark:border-white/10 rounded text-sm bg-white dark:bg-[#16294a] text-gray-900 dark:text-gray-100" />
                     <span className="text-gray-500 dark:text-gray-400">runs</span>
                   </label>
                 </div>
@@ -211,13 +211,13 @@ export function SetupPage(props: SetupPageProps) {
               <div className="flex flex-wrap gap-x-6 gap-y-3 text-sm items-center">
                 <div className="flex items-center gap-2">
                   <span className="text-xs text-gray-500 dark:text-gray-400">Bot roles</span>
-                  <div className="flex rounded-md border border-gray-300 dark:border-gray-600 overflow-hidden text-[11px]">
+                  <div className="flex rounded-md border border-gray-300 dark:border-white/10 overflow-hidden text-[11px]">
                     <button onClick={() => props.onBotModeChange('symmetric')}
-                      className={`px-2.5 py-1 transition-colors ${props.botMode === 'symmetric' ? 'bg-indigo-600 text-white' : 'bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-300'}`}>
+                      className={`px-2.5 py-1 transition-colors ${props.botMode === 'symmetric' ? 'bg-indigo-600 text-white' : 'bg-white dark:bg-[#16294a] text-gray-700 dark:text-gray-300'}`}>
                       Symmetric
                     </button>
                     <button onClick={() => props.onBotModeChange('asymmetric')}
-                      className={`px-2.5 py-1 transition-colors border-l border-gray-300 dark:border-gray-600 ${props.botMode === 'asymmetric' ? 'bg-indigo-600 text-white' : 'bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-300'}`}>
+                      className={`px-2.5 py-1 transition-colors border-l border-gray-300 dark:border-white/10 ${props.botMode === 'asymmetric' ? 'bg-indigo-600 text-white' : 'bg-white dark:bg-[#16294a] text-gray-700 dark:text-gray-300'}`}>
                       Asymmetric
                     </button>
                   </div>
@@ -229,7 +229,7 @@ export function SetupPage(props: SetupPageProps) {
                     <span className="text-xs text-gray-500 dark:text-gray-400 flex-shrink-0">Bot A opener</span>
                     <input type="text" value={props.openingMessage} onChange={e => props.onOpeningMessageChange(e.target.value)}
                       placeholder="Scripted first line (blank = AI generates)"
-                      className="flex-1 min-w-0 px-2 py-1 text-xs border border-gray-300 dark:border-gray-600 rounded bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500" />
+                      className="flex-1 min-w-0 px-2 py-1 text-xs border border-gray-300 dark:border-white/10 rounded bg-white dark:bg-[#16294a] text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500" />
                   </label>
                 )}
 
@@ -237,7 +237,7 @@ export function SetupPage(props: SetupPageProps) {
                   <span className="text-xs text-gray-500 dark:text-gray-400 flex-shrink-0">Stop words</span>
                   <input type="text" value={props.stopKeywords} onChange={e => props.onStopKeywordsChange(e.target.value)}
                     placeholder="agreed, deal, accept"
-                    className="w-44 px-2 py-1 text-xs border border-gray-300 dark:border-gray-600 rounded bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500" />
+                    className="w-44 px-2 py-1 text-xs border border-gray-300 dark:border-white/10 rounded bg-white dark:bg-[#16294a] text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500" />
                   <InfoTooltip text="Comma-separated keywords. If any bot's response contains one, the conversation stops." />
                 </label>
               </div>