refactor: move inline styles to CSS modules

Extract inline fontSize/color styles from LogTab, LayoutShell,
UsersTab, GroupsTab, RolesTab, and LevelFilterBar into CSS modules.
Follows project convention of CSS modules over inline styles.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

ui/src/pages/Admin/GroupsTab.tsx

@@ -239,7 +239,7 @@ export default function GroupsTab({ highlightId, onHighlightConsumed }: { highli
                   onChange={(e) => setNewName(e.target.value)}
                 />
                 {duplicateGroupName && (
-                  <span style={{ color: 'var(--error)', fontSize: 12 }}>
+                  <span className={styles.errorText}>
                     Group name already exists
                   </span>
                 )}

ui/src/pages/Admin/RolesTab.tsx

@@ -130,7 +130,7 @@ export default function RolesTab({ highlightId, onHighlightConsumed }: { highlig
                   onChange={(e) => setNewName(e.target.value)}
                 />
                 {duplicateRoleName && (
-                  <span style={{ color: 'var(--error)', fontSize: 12 }}>
+                  <span className={styles.errorText}>
                     Role name already exists
                   </span>
                 )}

ui/src/pages/Admin/UserManagement.module.css

@@ -151,3 +151,8 @@
 .resetInput {
   width: 200px;
 }
+
+.errorText {
+  color: var(--error);
+  font-size: 12px;
+}

ui/src/pages/Admin/UsersTab.tsx

@@ -228,7 +228,7 @@ export default function UsersTab({ highlightId, onHighlightConsumed }: { highlig
                   />
                 </div>
                 {duplicateUsername && (
-                  <span style={{ color: 'var(--error)', fontSize: 12 }}>
+                  <span className={styles.errorText}>
                     Username already exists
                   </span>
                 )}

ui/src/pages/LogsTab/LevelFilterBar.module.css

@@ -0,0 +1,14 @@
+.wrapper {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.clearButton {
+  background: none;
+  border: none;
+  color: var(--text-muted);
+  cursor: pointer;
+  font-size: 12px;
+  font-family: var(--font-body);
+}

ui/src/pages/LogsTab/LevelFilterBar.tsx

@@ -1,5 +1,6 @@
 import { ButtonGroup } from '@cameleer/design-system';
 import type { ButtonGroupItem } from '@cameleer/design-system';
+import styles from './LevelFilterBar.module.css';
 
 function formatCount(n: number): string {
   if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1)}M`;
@@ -28,19 +29,12 @@ export function LevelFilterBar({ activeLevels, onChange, levelCounts }: LevelFil
   }));
 
   return (
-    <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+    <div className={styles.wrapper}>
       <ButtonGroup items={items} value={activeLevels} onChange={onChange} />
       {activeLevels.size > 0 && (
         <button
           onClick={() => onChange(new Set())}
-          style={{
-            background: 'none',
-            border: 'none',
-            color: 'var(--text-muted)',
-            cursor: 'pointer',
-            fontSize: '12px',
-            fontFamily: 'var(--font-body)',
-          }}
+          className={styles.clearButton}
         >
           Clear
         </button>