feat: add Usage Limits Panel component with usage tracking and visual indicators for limits

style: implement custom color schemes and gradients for account section, enhancing visual hierarchy

frontend/src/services/billing.api.ts

@@ -865,6 +865,48 @@ export interface Plan {
   features?: string[];
   limits?: Record<string, any>;
   display_order?: number;
+  // Hard Limits
+  max_sites?: number;
+  max_users?: number;
+  max_keywords?: number;
+  max_clusters?: number;
+  // Monthly Limits
+  max_content_ideas?: number;
+  max_content_words?: number;
+  max_images_basic?: number;
+  max_images_premium?: number;
+  max_image_prompts?: number;
+  included_credits?: number;
+}
+
+export interface LimitUsage {
+  display_name: string;
+  current: number;
+  limit: number;
+  remaining: number;
+  percentage_used: number;
+}
+
+export interface UsageSummary {
+  account_id: number;
+  account_name: string;
+  plan_name: string;
+  period_start: string;
+  period_end: string;
+  days_until_reset: number;
+  hard_limits: {
+    sites?: LimitUsage;
+    users?: LimitUsage;
+    keywords?: LimitUsage;
+    clusters?: LimitUsage;
+  };
+  monthly_limits: {
+    content_ideas?: LimitUsage;
+    content_words?: LimitUsage;
+    images_basic?: LimitUsage;
+    images_premium?: LimitUsage;
+    image_prompts?: LimitUsage;
+  };
 }
 
 export interface Subscription {
@@ -942,3 +984,11 @@ export async function cancelSubscription(subscriptionId: number): Promise<{ mess
     method: 'POST',
   });
 }
+
+// ============================================================================
+// USAGE SUMMARY (PLAN LIMITS)
+// ============================================================================
+
+export async function getUsageSummary(): Promise<UsageSummary> {
+  return fetchAPI('/v1/billing/usage-summary/');
+}