Extract UsageLimitsSection as vue-facing-decorator component and integrate into AccountViewView

- Created UsageLimitsSection.vue using vue-facing-decorator (class-based, TypeScript, @Component, @Prop, @Emit).
- Moved 'Usage Limits' UI and logic (status, spinner, message, recheck button) into the new component.
- Replaced original usage limits section markup in AccountViewView.vue with <UsageLimitsSection />.
- Passed loadingLimits and limitsMessage props, and wired up @recheck-limits event to call checkLimits().
- Ensured all linter errors are resolved and code is consistent with project conventions.

src/components/UsageLimitsSection.vue

@@ -0,0 +1,28 @@
+<template>
+  <section class="mt-4">
+    <h2 class="text-lg font-semibold mb-2">Usage Limits</h2>
+    <div class="mb-2">
+      <span v-if="loadingLimits" class="text-slate-700">Checking... <span class="animate-spin">⏳</span></span>
+      <span v-else class="text-slate-700">{{ limitsMessage }}</span>
+    </div>
+    <button
+      class="w-full text-md bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-4 py-2 rounded-md"
+      @click="recheckLimits"
+    >
+      Recheck Limits
+    </button>
+  </section>
+</template>
+
+<script lang="ts">
+import { Component, Vue, Prop, Emit } from 'vue-facing-decorator';
+
+@Component({ name: 'UsageLimitsSection' })
+export default class UsageLimitsSection extends Vue {
+  @Prop({ required: true }) loadingLimits!: boolean;
+  @Prop({ required: true }) limitsMessage!: string;
+
+  @Emit('recheck-limits')
+  recheckLimits() {}
+}
+</script>