feat(web/ui): replace inline font-size violations and use new primitives in components

apps/web/src/components/features/config-profiles/ConfigProfileEditorPanel.tsx

@@ -197,7 +197,7 @@ export const ConfigProfileEditorPanel = ({
                       >
                         <span style={{ cursor: "grab", color: "var(--muted)" }}><Icon name="drag" size="sm" /></span>
                         <span style={{ flex: 1, fontWeight: 500 }}>{profile.name}</span>
-                        <span style={{ fontSize: "0.75rem", padding: "0.125rem 0.375rem", background: "var(--badge-bg, #f3f4f6)", color: "var(--muted)", borderRadius: "0.25rem", textTransform: "uppercase", letterSpacing: "0.025em" }}>{getScopeLabel(profile)}</span>
+                        <span className="badge">{getScopeLabel(profile)}</span>
                         <button type="button" onClick={() => onRemoveInclude(index)} style={{ background: "none", border: "none", color: "var(--danger)", cursor: "pointer", padding: "0.25rem", borderRadius: "0.25rem" }} title="Remove include"><Icon name="delete" size="sm" /></button>
                       </div>
                     );

apps/web/src/components/features/config-profiles/ConfigProfileListSidebar.tsx

@@ -77,30 +77,19 @@ export const ConfigProfileListSidebar = ({
               >
                 {profile.name}
                 {profile.is_default && (
-                  <span
+                  <span className="badge badge-secondary" style={{ marginLeft: "0.5rem" }}>
-                    style={{
-                      fontSize: "0.7rem",
-                      marginLeft: "0.5rem",
-                      opacity: 0.8,
-                      textTransform: "uppercase",
-                      letterSpacing: "0.025em",
-                    }}
-                  >
                     default
                   </span>
                 )}
                 {profile.includes?.length > 0 && (
                   <span
+                    className="badge"
                     style={{
-                      fontSize: "0.7rem",
                       marginLeft: "0.5rem",
-                      opacity: 0.7,
                       background:
                         selectedProfileId === profile.id
                           ? "rgba(255,255,255,0.2)"
-                          : "var(--badge-bg, #f3f4f6)",
+                          : undefined,
-                      padding: "0.0625rem 0.375rem",
-                      borderRadius: "0.25rem",
                     }}
                   >
                     {profile.includes.length} include{profile.includes.length !== 1 ? "s" : ""}

apps/web/src/components/features/tool/instance-list.tsx

@@ -342,13 +342,7 @@ export const InstanceList = ({
 													{sshKeys.map((key) => (
 														<label
 															key={key.id}
-															className="checkbox-label"
+															className="checkbox-label checkbox-label-compact"
-															style={{
-																fontSize: "0.75rem",
-																display: "flex",
-																alignItems: "center",
-																gap: "0.25rem",
-															}}
 														>
 															<input
 																type="checkbox"
@@ -487,13 +481,7 @@ export const InstanceList = ({
 													{sshKeys.map((key) => (
 														<label
 															key={key.id}
-															className="checkbox-label"
+															className="checkbox-label checkbox-label-compact"
-															style={{
-																fontSize: "0.75rem",
-																display: "flex",
-																alignItems: "center",
-																gap: "0.25rem",
-															}}
 														>
 															<input
 																type="checkbox"