refactor: major architecture improvements

Security:
- Remove exposed NocoDB token from client code
- Add .env.example for environment variables

Shared Components:
- Carousel: touch/keyboard navigation, accessibility
- ChartCard: reusable chart container
- EmptyState: for no-data scenarios
- FilterControls: collapsible filter panel with reset button
- StatCard: metric display with change indicator
- ToggleSwitch: accessible radio-style toggle

Architecture:
- Create src/config/chartConfig.js for shared chart options
- Extract ChartJS registration to single location
- Reduce code duplication in Dashboard and Comparison

UX Improvements:
- Add empty state when filters return no data
- Add Reset Filters button to filter controls
- Add skeleton loader CSS utilities
- Improve focus states for accessibility
- Use shared components in Dashboard and Comparison

src/App.css

@@ -72,6 +72,78 @@ body {
   font-size: 0.875rem;
 }
 
+.error-container button:hover {
+  background: var(--text-secondary);
+}
+
+/* Empty State */
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 48px 24px;
+  text-align: center;
+  color: var(--text-secondary);
+}
+
+.empty-state-icon {
+  font-size: 3rem;
+  margin-bottom: 16px;
+  opacity: 0.5;
+}
+
+.empty-state-title {
+  font-size: 1.125rem;
+  font-weight: 600;
+  color: var(--text-primary);
+  margin-bottom: 8px;
+}
+
+.empty-state-message {
+  font-size: 0.875rem;
+  color: var(--text-muted);
+  max-width: 300px;
+  margin-bottom: 20px;
+}
+
+.empty-state-action {
+  padding: 10px 20px;
+  background: var(--primary);
+  color: white;
+  border: none;
+  border-radius: 8px;
+  font-weight: 500;
+  font-size: 0.875rem;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.empty-state-action:hover {
+  background: #1d4ed8;
+}
+
+/* Skeleton Loader */
+.skeleton {
+  background: linear-gradient(90deg, var(--border) 25%, var(--bg) 50%, var(--border) 75%);
+  background-size: 200% 100%;
+  animation: skeleton-loading 1.5s infinite;
+  border-radius: 4px;
+}
+
+@keyframes skeleton-loading {
+  0% { background-position: 200% 0; }
+  100% { background-position: -200% 0; }
+}
+
+.skeleton-text {
+  height: 1em;
+  margin-bottom: 0.5em;
+}
+
+.skeleton-text.lg { height: 2em; width: 60%; }
+.skeleton-text.sm { height: 0.75em; width: 40%; }
+
 /* Navigation */
 .nav-bar {
   background: var(--surface);
@@ -280,6 +352,25 @@ body {
   margin-bottom: 20px;
 }
 
+.chart-card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+
+.chart-card-header h2 {
+  margin: 0;
+}
+
+.chart-card-actions {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
 .chart-container {
   height: 280px;
   position: relative;
@@ -349,6 +440,12 @@ table tbody tr:hover {
   margin: 0;
 }
 
+.controls-header-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
 .controls h3 {
   font-size: 0.75rem;
   font-weight: 500;
@@ -357,6 +454,23 @@ table tbody tr:hover {
   letter-spacing: 0.05em;
 }
 
+.controls-reset {
+  background: transparent;
+  border: 1px solid var(--border);
+  color: var(--text-muted);
+  padding: 4px 12px;
+  border-radius: 6px;
+  font-size: 0.75rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.controls-reset:hover {
+  border-color: var(--danger);
+  color: var(--danger);
+}
+
 .controls-toggle {
   display: none;
   background: none;
@@ -661,6 +775,16 @@ table tbody tr:hover {
 }
 
 /* Carousel - elegant card slider */
+.carousel {
+  outline: none;
+}
+
+.carousel:focus-visible {
+  outline: 2px solid var(--primary);
+  outline-offset: 4px;
+  border-radius: 8px;
+}
+
 .carousel-container {
   position: relative;
   margin: 0 -6px;