fix(settings): contrast the variables count badge, scope the tab overrides to the split

The count badge sat on a bg-secondary button, where every neutral surface token
is within 1.08–1.23 contrast of it: secondary painted the pill invisible and
outline drew its border in --border, at 1.18. Only --primary separates (2.76), so
the badge is default.

The tab overrides exist because the desktop panel sits on its own surface. Below
the split they fought the shadcn defaults, so they are xl:-scoped now — the same
1280 the layout branches on. Stacked widths get bg-muted with a bg-background
active tab again; 1280+ keeps bg-background with a bg-card active tab.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

frontend/src/pages/settings/settings-prompt.tsx

@@ -831,16 +831,16 @@ function SettingsPrompt() {
                 </p>
             </div>
 
-            <TabsList className="dark:bg-background w-full">
+            <TabsList className="xl:dark:bg-background w-full">
                 <TabsTrigger
-                    className="dark:data-[state=active]:bg-card flex-1"
+                    className="xl:dark:data-[state=active]:bg-card flex-1"
                     value="system"
                 >
                     <Code className="size-4" />
                     System Prompt
                 </TabsTrigger>
                 <TabsTrigger
-                    className="dark:data-[state=active]:bg-card flex-1"
+                    className="xl:dark:data-[state=active]:bg-card flex-1"
                     disabled={!hasHumanPrompt}
                     value="human"
                 >
@@ -1081,7 +1081,7 @@ function Variables({ currentTemplate, onEditorFocus, onVariableClick, variables
                     {VARIABLES_TITLE}
                     <Badge
                         className="ml-auto font-normal tabular-nums"
-                        variant="outline"
+                        variant="default"
                     >
                         {variables.length}
                     </Badge>