fix(ui): restore card borders in usage statistics panels

Restore proper card styling for ModelTestConfigPanel and PricingConfigPanel by adding back border and rounded-lg classes. The transparent background styling was causing visual inconsistency.

Changes:
- Replace border-none bg-transparent shadow-none with border rounded-lg
- Apply to both loading and error states for consistency
- Format TypeScript code for better readability
- Break long function signatures across multiple lines

This ensures the usage statistics panels have consistent visual appearance with proper borders and rounded corners.

src/components/usage/PricingConfigPanel.tsx

@@ -61,7 +61,7 @@ export function PricingConfigPanel() {
 
   if (isLoading) {
     return (
-      <Card className="border-none bg-transparent p-0 shadow-none">
+      <Card className="border rounded-lg">
         <CardHeader
           className="cursor-pointer"
           onClick={() => setIsExpanded(!isExpanded)}
@@ -79,7 +79,7 @@ export function PricingConfigPanel() {
 
   if (error) {
     return (
-      <Card className="border-none bg-transparent p-0 shadow-none">
+      <Card className="border rounded-lg">
         <CardHeader
           className="cursor-pointer"
           onClick={() => setIsExpanded(!isExpanded)}
@@ -110,7 +110,7 @@ export function PricingConfigPanel() {
   }
 
   return (
-    <Card className="border-none bg-transparent shadow-none">
+    <Card className="border rounded-lg">
       <CardHeader
         className="cursor-pointer select-none"
         onClick={() => setIsExpanded(!isExpanded)}