refactor: enhance routing and state management in CoopBuilder, add migration checks on startup, and update Tailwind configuration for improved component styling

components/advanced/ScenariosPanel.vue

@@ -0,0 +1,49 @@
+<template>
+  <UCard>
+    <template #header>
+      <h4 class="font-medium">Scenarios</h4>
+    </template>
+    
+    <div class="space-y-3">
+      <USelect
+        :model-value="scenario"
+        :options="scenarioOptions"
+        @update:model-value="setScenario"
+      />
+      
+      <div v-if="scenario !== 'current'" class="p-3 bg-blue-50 border border-blue-200 rounded text-sm">
+        <div class="flex items-center gap-2 text-blue-800">
+          <UIcon name="i-heroicons-information-circle" class="w-4 h-4" />
+          <span class="font-medium">Scenario Active</span>
+        </div>
+        <p class="text-blue-700 mt-1">
+          {{ getScenarioDescription(scenario) }}
+        </p>
+      </div>
+    </div>
+  </UCard>
+</template>
+
+<script setup lang="ts">
+const { scenario, setScenario } = useCoopBuilder()
+
+const scenarioOptions = [
+  { label: 'Current', value: 'current' },
+  { label: 'Quit Day Jobs', value: 'quit-jobs' },
+  { label: 'Start Production', value: 'start-production' },
+  { label: 'Custom', value: 'custom', disabled: true }
+]
+
+function getScenarioDescription(scenario: string): string {
+  switch (scenario) {
+    case 'quit-jobs':
+      return 'All external income removed. Shows runway if everyone works full-time for the co-op.'
+    case 'start-production':
+      return 'Service revenue reduced by 30%. Models transition from services to product development.'
+    case 'custom':
+      return 'Custom scenario configuration coming soon.'
+    default:
+      return ''
+  }
+}
+</script>