From 80992ca97546d46310f7b8db32c9806de7b29a7c Mon Sep 17 00:00:00 2001
From: sean-eskerium <sean@eskerium.com>
Date: Thu, 9 Oct 2025 09:31:47 -0400
Subject: [PATCH] Epgrade to Tailwind 4

---
 .../archon/archon-ui-consistency-review.md    |  464 ++----
 .../TAILWIND_RESPONSIVE_BEST_PRACTICES.md     |  489 ------
 PRPs/ai_docs/UI_STANDARDS.md                  |  935 +++++++++++
 archon-ui-main/package-lock.json              | 1427 ++++++-----------
 archon-ui-main/package.json                   |    4 +-
 archon-ui-main/postcss.config.js              |    2 +-
 .../layouts/KnowledgeLayoutExample.tsx        |    2 +-
 .../layouts/ProjectsLayoutExample.tsx         |   29 +-
 .../layouts/SettingsLayoutExample.tsx         |    2 +-
 .../features/style-guide/tabs/LayoutsTab.tsx  |    2 +-
 .../src/features/ui/primitives/data-card.tsx  |    2 +-
 archon-ui-main/src/index.css                  |  178 +-
 archon-ui-main/tailwind.config.js             |   83 +-
 archon-ui-main/vite.config.ts                 |    2 +
 14 files changed, 1711 insertions(+), 1910 deletions(-)
 delete mode 100644 PRPs/ai_docs/TAILWIND_RESPONSIVE_BEST_PRACTICES.md
 create mode 100644 PRPs/ai_docs/UI_STANDARDS.md

diff --git a/.claude/commands/archon/archon-ui-consistency-review.md b/.claude/commands/archon/archon-ui-consistency-review.md
index b0625f01..c5c2fcf5 100644
--- a/.claude/commands/archon/archon-ui-consistency-review.md
+++ b/.claude/commands/archon/archon-ui-consistency-review.md
@@ -11,139 +11,51 @@ thinking: auto
 
 I'll analyze the UI components and generate a detailed report on consistency, reusability, and adherence to the Archon design system.
 
-## Analysis Framework
-
-### Design System Standards
-
-**Archon uses:**
-- **Primitives**: `/src/features/ui/primitives/` - Reusable Radix components with glassmorphism styling
-- **Card Variants**:
-  - Base glass card
-  - Edge-lit cards: `<Card edgePosition="top" edgeColor="cyan|pink|blue|...">`
-  - Outer glow cards
-  - Inner glow cards
-- **Navigation**: PillNavigation component for all pill-style navigation
-- **Glassmorphism**: `backdrop-blur-sm` (minimal), frosted glass backgrounds
-- **Colors**: Semantic colors (Primary blue #3b82f6, Success, Warning, Error) + accents
-
-### Scoring Criteria
-
-**1. Reusability (1-10)**
-- 10: Uses shared primitives, no hardcoded styles
-- 7-9: Mostly reusable, minor hardcoding
-- 4-6: Mix of primitives and custom code
-- 1-3: Completely custom, duplicates existing patterns
-
-**2. Radix Component Usage (1-10)**
-- 10: Uses Radix primitives for ALL interactive elements (Select, Checkbox, Switch, Tabs, Dialog, etc.)
-- 7-9: Mostly Radix, few native HTML elements
-- 4-6: Mix of Radix and native elements
-- 1-3: Primarily native HTML elements
-
-**3. Primitives Usage (1-10)**
-- 10: Uses Card, Button, Input primitives with proper props
-- 7-9: Uses most primitives, some custom styling
-- 4-6: Mix of primitives and manual styling
-- 1-3: Hardcoded styling, doesn't use primitives
-
-**4. Styling Consistency (1-10)**
-- 10: Matches design system exactly (colors, blur, edge-lit patterns)
-- 7-9: Close match, minor deviations
-- 4-6: Significant inconsistencies
-- 1-3: Completely different styling approach
-
 ## Review Process
 
-### Step 1: Identify Components
+### Step 1: Load UI Standards
+
+**CRITICAL: First, read the UI standards document:**
+
+```
+/Users/sean/Software/Archon/Archon/PRPs/ai_docs/UI_STANDARDS.md
+```
+
+This document contains ALL rules, patterns, anti-patterns, and examples. Use it as the single source of truth for the review.
+
+### Step 2: Scan Components
 
 Scan the provided path for:
 - React components (`.tsx` files)
 - Component usage patterns
 - Imports from primitives vs manual styling
 
-### Step 2: Analyze Each Component
+### Step 3: Compare Against Standards
 
-For each component, check:
+For each component, compare against UI_STANDARDS.md:
+- Check all rules from each section (0-7)
+- Identify violations of anti-patterns
+- Score based on adherence to standards
+- Note missing patterns that should be used
 
-**Primitives Usage:**
-```tsx
-// GOOD - Uses Card primitive with props
-<Card edgePosition="top" edgeColor="cyan">...</Card>
+### Step 4: Automated Scans
 
-// BAD - Hardcoded edge glow
-<div className="relative overflow-hidden rounded-xl">
-  <div className="absolute inset-x-0 top-0 h-[2px] bg-cyan-500..." />
-  <div className="absolute inset-x-0 top-0 h-8 bg-gradient-to-b..." />
-  ...
-</div>
+Run automated pattern detection to find common violations:
+
+```bash
+# Scan for violations (grep patterns will be in UI_STANDARDS.md)
+# Examples: dynamic class construction, unconstrained scroll, non-responsive grids, etc.
 ```
 
-**Radix Usage:**
-```tsx
-// GOOD - Radix Select primitive
-import { Select, SelectTrigger, SelectContent, SelectItem } from '@/features/ui/primitives/select';
+Use the patterns and anti-patterns documented in UI_STANDARDS.md to guide the automated scans.
 
-// BAD - Native HTML
-<select><option>...</option></select>
-```
+### Step 5: Generate Report
 
-**Reusable Patterns:**
-```tsx
-// GOOD - Shared PillNavigation component
-<PillNavigation items={...} colorVariant="orange" />
-
-// BAD - Custom hardcoded pill navigation
-<div className="backdrop-blur-sm bg-white/40...">
-  {items.map(item => <button className="px-6 py-3...">...)}
-</div>
-```
-
-### Step 3: Generate Scores
-
-Calculate scores for each component based on:
-- Count of primitive vs hardcoded elements
-- Radix usage vs native HTML
-- Styling duplication vs reuse
-- Pattern consistency
-
-### Step 4: Identify Issues
-
-Common anti-patterns to flag:
-
-**Hardcoded Edge-Lit Cards:**
-```tsx
-// BAD - Manual implementation (like KnowledgeCard currently)
-<div className="pointer-events-none absolute inset-x-0 top-0">
-  <div className="h-[2px] bg-cyan-500..." />
-  <div className="h-8 bg-gradient-to-b..." />
-</div>
-
-// GOOD - Use Card primitive
-<Card edgePosition="top" edgeColor="cyan">
-```
-
-**Native HTML Form Elements:**
-```tsx
-// BAD
-<select>, <input type="checkbox">, <input type="radio">
-
-// GOOD
-<Select />, <Checkbox />, <RadioGroup />
-```
-
-**Duplicated Pill Navigation:**
-```tsx
-// BAD - Creating custom pill nav each time
-// GOOD - Use PillNavigation component
-```
-
-### Step 5: Write Resolution Steps
-
-For each issue, provide:
-- What to change
-- Why it matters
-- Specific code example of the fix
-- Impact on consistency
+Create a detailed report showing:
+- Overall compliance scores
+- Component-by-component analysis
+- Specific violations with references to UI_STANDARDS.md sections
+- Recommended fixes with examples from UI_STANDARDS.md
 
 ## Report Format
 
@@ -155,6 +67,7 @@ Generate `ui-consistency-review-[feature].md`:
 **Date**: [Today's date]
 **Scope**: [Path reviewed]
 **Components Analyzed**: [Count]
+**Standards Reference**: PRPs/ai_docs/UI_STANDARDS.md
 
 ---
 
@@ -162,10 +75,11 @@ Generate `ui-consistency-review-[feature].md`:
 
 | Category | Score | Assessment |
 |----------|-------|------------|
-| Reusability | X/10 | [Good/Needs Work/Poor] |
-| Radix Usage | X/10 | [Good/Needs Work/Poor] |
-| Primitives Usage | X/10 | [Good/Needs Work/Poor] |
-| Styling Consistency | X/10 | [Good/Needs Work/Poor] |
+| Tailwind v4 Compliance | X/10 | [Good/Needs Work/Poor] |
+| Responsive Layout | X/10 | [Good/Needs Work/Poor] |
+| Component Reusability | X/10 | [Good/Needs Work/Poor] |
+| Radix Primitives Usage | X/10 | [Good/Needs Work/Poor] |
+| Dark Mode Support | X/10 | [Good/Needs Work/Poor] |
 
 **Overall Grade**: [A-F] - [Summary]
 
@@ -175,102 +89,76 @@ Generate `ui-consistency-review-[feature].md`:
 
 ### [ComponentName.tsx]
 
-**Scores:**
-- Reusability: X/10
-- Radix Usage: X/10
-- Primitives Usage: X/10
-- Styling Consistency: X/10
+**Scores:** [Individual scores]
 
-**Issues Found:**
+**Violations Found:**
 
-1. **[Issue Type]** - [Description]
-   - Location: `[file:line]`
-   - Current: `[code snippet]`
-   - Should be: `[corrected code]`
-   - Impact: [Why this matters]
-
-**Standalone vs Primitive:**
-[This component SHOULD/SHOULD NOT be standalone because...]
+1. **[Violation Type]** - [Description]
+   - **Standards Reference**: UI_STANDARDS.md Section [X]
+   - **Location**: `[file:line]`
+   - **Current Code**: `[snippet]`
+   - **Required Fix**: `[corrected code from UI_STANDARDS.md]`
+   - **Why**: [Reference reason from UI_STANDARDS.md]
 
 ---
 
-## Critical Issues (Must Fix)
+## Critical Violations (Must Fix)
 
-### 1. [Issue Title]
+### 1. [Violation Title]
 - **File**: `[path:line]`
-- **Problem**: [Description]
-- **Why**: [Impact on consistency/maintainability]
-- **Fix**:
-  ```tsx
-  // Current
-  [bad code]
-
-  // Should be
-  [good code]
-  ```
+- **Standards Section**: UI_STANDARDS.md Section [X]
+- **Rule Violated**: [Exact rule from standards]
+- **Fix**: [Example from UI_STANDARDS.md Good Examples]
 
 ---
 
 ## Recommendations
 
-### Immediate Actions
+All recommendations are based on PRPs/ai_docs/UI_STANDARDS.md Section 7 (Pre-Flight Checklist).
 
-1. **[Action]** - [Why]
-2. **[Action]** - [Why]
+### High Priority
+[List items failing critical checklist items]
 
-### Pattern Improvements
+### Medium Priority
+[List items failing non-critical checklist items]
 
-1. **[Pattern]** - [Benefit]
-2. **[Pattern]** - [Benefit]
-
-### Refactoring Priorities
-
-1. **High Priority**: [Components that break consistency]
-2. **Medium Priority**: [Components that could use primitives]
-3. **Low Priority**: [Minor inconsistencies]
+### Low Priority
+[List minor deviations]
 
 ---
 
 ## Design System Compliance
 
-**Primitives Used Correctly:**
-- [List of components using primitives properly]
-
-**Missing Primitive Usage:**
-- [List of components that should use primitives]
-
-**Radix Compliance:**
-- [List of components using Radix properly]
-- [List of components using native HTML instead of Radix]
-
-**Styling Patterns:**
-- Edge-lit cards: [X using primitive, Y hardcoded]
-- Pill navigation: [X using component, Y custom]
-- Glass effects: [X using blur tokens, Y custom values]
+**Standards Adherence Summary:**
+- Tailwind v4 Rules: [X/Y passing]
+- Responsive Layout Rules: [X/Y passing]
+- Component Reusability Rules: [X/Y passing]
+- Radix Primitives Rules: [X/Y passing]
+- Dark Mode Rules: [X/Y passing]
 
 ---
 
 ## Next Steps
 
-1. [Most important fix]
-2. [Second priority]
-3. [Third priority]
+1. [Most important fix - reference UI_STANDARDS.md section]
+2. [Second priority - reference UI_STANDARDS.md section]
+3. [Third priority - reference UI_STANDARDS.md section]
 
 **Estimated Effort**: [X hours for full refactor]
 ```
 
-## What to Scan
+## Scanning Strategy
 
 Based on the argument:
 
 **If directory path** (e.g., `src/features/knowledge`):
 - Scan all `.tsx` files recursively
-- Analyze each component
+- Analyze each component against UI_STANDARDS.md
 - Aggregate scores
 
 **If single file** (e.g., `KnowledgeCard.tsx`):
 - Deep analysis of that component
-- Check all its dependencies
+- Check all sections of UI_STANDARDS.md
 - Compare to similar components
 
 **If feature name** (e.g., `projects`):
@@ -278,208 +166,40 @@ Based on the argument:
 - Scan all components
 - Check consistency within feature
 
-## Red Flags to Auto-Detect
-
-Use grep/glob to find:
-
-```bash
-# CRITICAL: Dynamic Tailwind class construction (WILL NOT WORK)
-grep -r "bg-\${.*}\|text-\${.*}\|border-\${.*}\|shadow-\${.*}" [path] --include="*.tsx"
-grep -r "\`bg-.*-.*\`\|\`text-.*-.*\`\|\`border-.*-.*\`" [path] --include="*.tsx"
-
-# CRITICAL: Unconstrained horizontal scroll (BREAKS LAYOUT)
-grep -r "overflow-x-auto" [path] --include="*.tsx" | grep -v "w-full"
-
-# CRITICAL: min-w-max without parent width constraint
-grep -r "min-w-max" [path] --include="*.tsx"
-
-# Non-responsive grids (BREAKS MOBILE)
-grep -r "grid-cols-[2-9]" [path] --include="*.tsx" | grep -v "md:\|lg:\|sm:\|xl:"
-
-# Fixed widths without max-width constraints
-grep -r "w-\[0-9\]\|w-96\|w-80\|w-72" [path] --include="*.tsx" | grep -v "max-w-"
-
-# Hardcoded edge-lit implementations (should use Card primitive)
-grep -r "absolute inset-x-0 top-0.*bg-gradient-to-b" [path] --include="*.tsx"
-
-# Native HTML form elements (should use Radix)
-grep -r "<select>\|<option>\|<input type=\"checkbox\"\|<input type=\"radio\"" [path] --include="*.tsx"
-
-# Hardcoded pill navigation (should use PillNavigation component)
-grep -r "backdrop-blur-sm bg-white/40.*rounded-full.*flex gap-1" [path] --include="*.tsx"
-
-# Missing text truncation on titles/headings
-grep -r "<h[1-6].*className.*{" [path] --include="*.tsx" | grep -v "truncate\|line-clamp"
-
-# Not using pre-defined classes from styles.ts
-grep -r "glassCard\.variants\|glassmorphism\." [path] --files-without-match --include="*.tsx"
-```
-
-## Critical Anti-Patterns
-
-**IMPORTANT:** Read `PRPs/ai_docs/TAILWIND_RESPONSIVE_BEST_PRACTICES.md` for complete anti-pattern reference before starting review.
-
-### 🔴 **BREAKING: Dynamic Tailwind Class Construction**
-
-**Problem:**
-```tsx
-// BROKEN - Tailwind processes at BUILD time, not runtime
-const color = "cyan";
-className={`bg-${color}-500`}  // CSS won't be generated
-
-// BROKEN - String interpolation
-const glow = `shadow-[0_0_30px_rgba(${rgba},0.4)]`;
-
-// BROKEN - Template literals with variables
-<div className={`text-${textColor}-700`} />
-```
-
-**Why it fails:**
-- Tailwind scans code as plain text at BUILD time
-- Dynamic strings aren't scanned - no CSS generated
-- Results in missing styles at runtime
-
-**Solution:**
-```tsx
-// CORRECT - Static class lookup
-const colorClasses = {
-  cyan: "bg-cyan-500 text-cyan-700",
-  purple: "bg-purple-500 text-purple-700",
-};
-className={colorClasses[color]}
-
-// CORRECT - Use pre-defined classes from styles.ts
-const glowVariant = glassCard.variants[glowColor];
-className={cn(glowVariant.glow, glowVariant.border)}
-
-// CORRECT - Inline arbitrary values (scanned by Tailwind)
-className="shadow-[0_0_30px_rgba(34,211,238,0.4)]"
-```
-
-### 🔴 **BREAKING: Unconstrained Horizontal Scroll**
-
-**Problem:**
-```tsx
-// BROKEN - Forces entire page width to expand
-<div className="overflow-x-auto">
-  <div className="flex gap-4 min-w-max">
-    {/* Wide content */}
-  </div>
-</div>
-```
-
-**Why it fails:**
-- `min-w-max` forces container to expand beyond viewport
-- Parent has no width constraint
-- Entire page becomes horizontally scrollable
-- UI controls shift off-screen
-
-**Solution:**
-```tsx
-// CORRECT - Constrain parent, scroll child only
-<div className="w-full">
-  <div className="overflow-x-auto -mx-6 px-6">
-    <div className="flex gap-4 min-w-max">
-      {/* Scrolls within container only */}
-    </div>
-  </div>
-</div>
-```
-
-### 🔴 **Not Using styles.ts Pre-Defined Classes**
-
-**Problem:**
-```tsx
-// WRONG - Hardcoding glassmorphism
-<div className="backdrop-blur-md bg-white/10 border border-gray-200 rounded-lg">
-
-// WRONG - Not using existing glassCard.variants
-const myCustomGlow = "shadow-[0_0_40px_rgba(34,211,238,0.4)]";
-```
-
-**Solution:**
-```tsx
-// CORRECT - Use glassCard from styles.ts
-import { glassCard } from '@/features/ui/primitives/styles';
-className={cn(glassCard.base, glassCard.variants.cyan.glow)}
-
-// CORRECT - Use Card primitive with props
-<Card glowColor="cyan" edgePosition="top" edgeColor="purple" />
-```
-
-### 🔴 **Non-Responsive Grid Layouts**
-
-**Problem:**
-```tsx
-// BROKEN - Fixed columns break on mobile
-<div className="grid grid-cols-4 gap-4">
-```
-
-**Solution:**
-```tsx
-// CORRECT - Responsive columns
-<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
-```
-
-### 🔴 **Missing Text Truncation**
-
-**Problem:**
-```tsx
-// WRONG - Long text breaks layout
-<h3 className="font-medium">{longTitle}</h3>
-```
-
-**Solution:**
-```tsx
-// CORRECT - Truncate or clamp
-<h3 className="font-medium truncate">{longTitle}</h3>
-<h3 className="font-medium line-clamp-2">{longTitle}</h3>
-```
-
----
-
-## Key Questions to Answer
-
-1. **Does this component duplicate existing primitives?**
-2. **Are there any dynamic Tailwind class constructions? (BREAKING)**
-3. **Is horizontal scroll properly constrained with w-full parent?**
-4. **Are grids responsive with breakpoint variants?**
-5. **Should this be refactored to use Card with edgePosition/edgeColor?**
-6. **Are there native HTML elements that should be Radix?**
-7. **Is text truncation in place for dynamic content?**
-8. **Is the glassmorphism consistent with the design system?**
-9. **Can multiple components be consolidated into one reusable primitive?**
-10. **Does the layout work at 375px, 768px, 1024px, and 1440px widths?**
-
 ---
 
 ## Execution Flow
 
-### Step 1: Perform Review
+### Step 1: Read UI Standards
 
-Start the review and save the report to `ui-consistency-review-[feature].md` in the project root.
+Load `/Users/sean/Software/Archon/Archon/PRPs/ai_docs/UI_STANDARDS.md` completely.
 
-### Step 2: Generate PRP for Fixes
+### Step 2: Scan Target
 
-After completing the review report, automatically kick off PRP creation for the identified fixes:
+Find all `.tsx` files in the target path.
 
-```
-/prp-claude-code:prp-claude-code-create UI Consistency Fixes - [feature-name]
-```
+### Step 3: Analyze Each File
 
-**Context to provide to PRP:**
-- Reference the generated `ui-consistency-review-[feature].md` report
-- List all critical issues that need fixing
-- Specify exact files that need refactoring
-- Include anti-patterns found and their correct implementations
-- Reference `PRPs/ai_docs/TAILWIND_RESPONSIVE_BEST_PRACTICES.md` for patterns
+For each file, check against ALL sections of UI_STANDARDS.md:
+- Section 0: Project-wide Conventions
+- Section 1: Radix Primitives
+- Section 2: Tailwind CSS (v4)
+- Section 3: Responsive Layout
+- Section 4: Light/Dark Themes
+- Section 5: Component Reusability
+- Section 6: Tailwind Tokens
+- Section 7: Pre-Flight Checklist
 
-**PRP should include:**
-- Task for each critical issue (dynamic classes, unconstrained scroll, etc.)
-- Task for each component needing primitive refactor
-- Task for responsive breakpoint additions
-- Task for text truncation additions
-- Validation task to run UI consistency review again to verify fixes
+### Step 4: Generate Report
+
+Create detailed report with:
+- Violations mapped to UI_STANDARDS.md sections
+- Examples from UI_STANDARDS.md Good Examples
+- References to specific rules violated
+
+### Step 5: Save Report
+
+Save to `ui-consistency-review-[feature].md` in project root.
 
 ---
 
diff --git a/PRPs/ai_docs/TAILWIND_RESPONSIVE_BEST_PRACTICES.md b/PRPs/ai_docs/TAILWIND_RESPONSIVE_BEST_PRACTICES.md
deleted file mode 100644
index c2ba5444..00000000
--- a/PRPs/ai_docs/TAILWIND_RESPONSIVE_BEST_PRACTICES.md
+++ /dev/null
@@ -1,489 +0,0 @@
-# Tailwind CSS & Responsive Design Best Practices
-
-## Critical Tailwind CSS Rules
-
-### Rule 1: NO Dynamic Class Name Construction
-
-Tailwind processes your source code as **plain text at BUILD time**, NOT at runtime. It cannot understand variables, string concatenation, or template literals.
-
-#### BROKEN Patterns (Will Not Work)
-
-```tsx
-// BROKEN - Tailwind won't generate these classes
-const color = "cyan";
-<div className={`bg-${color}-500`} />  // CSS NOT GENERATED
-
-// BROKEN - Template literal concatenation
-<div className={`text-${textColor}-700 border-${borderColor}-500`} />
-
-// BROKEN - String interpolation
-const glow = `shadow-[0_0_30px_rgba(${rgba},0.4)]`;
-
-// BROKEN - Computed class names
-className={isActive ? `bg-${activeColor}-500` : `bg-${inactiveColor}-500`}
-```
-
-**Why These Fail:**
-- Tailwind scans code as text looking for class tokens
-- `bg-cyan-500` exists as a token → CSS generated
-- `bg-${color}-500` does NOT exist as a token → NO CSS generated
-- At runtime, browser receives class name with no matching CSS
-
-#### CORRECT Patterns (Use These)
-
-```tsx
-// CORRECT - Static class lookup object
-const colorClasses = {
-  cyan: "bg-cyan-500 text-cyan-700 border-cyan-500/50",
-  purple: "bg-purple-500 text-purple-700 border-purple-500/50",
-  blue: "bg-blue-500 text-blue-700 border-blue-500/50",
-};
-<div className={colorClasses[color]} />
-
-// CORRECT - Conditional with complete class names
-<div className={isActive ? "bg-cyan-500 text-white" : "bg-gray-500 text-gray-300"} />
-
-// CORRECT - Use cn() helper with complete class strings
-<div className={cn(
-  "base-classes",
-  isActive && "bg-cyan-500 text-white",
-  isPinned && "border-purple-500 shadow-lg"
-)} />
-
-// CORRECT - Static arbitrary values (scanned at build time)
-<div className="shadow-[0_0_30px_rgba(34,211,238,0.4)]" />
-
-// CORRECT - Pre-defined classes from styles.ts
-import { glassCard } from '@/features/ui/primitives/styles';
-className={cn(glassCard.base, glassCard.variants.cyan.glow)}
-```
-
-### Rule 2: Use Static Class Mappings
-
-When you need variant styling based on props or state:
-
-```tsx
-// CORRECT Pattern
-interface ButtonProps {
-  variant: "primary" | "secondary" | "danger";
-}
-
-const Button = ({ variant }: ButtonProps) => {
-  const variantClasses = {
-    primary: "bg-blue-500 hover:bg-blue-600 text-white",
-    secondary: "bg-gray-200 hover:bg-gray-300 text-gray-900",
-    danger: "bg-red-500 hover:bg-red-600 text-white",
-  };
-
-  return <button className={variantClasses[variant]}>Click me</button>;
-};
-```
-
-### Rule 3: Arbitrary Values for One-Off Styles
-
-When you need a specific value not in your theme:
-
-```tsx
-// CORRECT - Arbitrary values are scanned at build time
-<div className="w-[347px]" />
-<div className="shadow-[0_0_30px_rgba(34,211,238,0.4)]" />
-<div className="bg-[#316ff6]" />
-
-// These work because the complete string exists in source code
-```
-
-## Responsive Design Best Practices
-
-### Rule 1: Mobile-First Approach
-
-Always design for mobile first, then layer styles for larger screens.
-
-```tsx
-// CORRECT - Mobile first, then larger screens
-<div className="w-full md:w-1/2 lg:w-1/3">
-
-// WRONG - Desktop first (harder to override)
-<div className="w-1/3 sm:w-full">
-```
-
-### Rule 2: Responsive Grid Columns
-
-Never use fixed grid columns without responsive breakpoints.
-
-```tsx
-// WRONG - Fixed 4 columns breaks on mobile
-<div className="grid grid-cols-4 gap-4">
-
-// CORRECT - Responsive columns
-<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
-```
-
-### Rule 3: Constrain Horizontal Scroll Containers
-
-**CRITICAL:** When creating horizontally scrollable content, you MUST constrain the parent container.
-
-```tsx
-// WRONG - Entire page becomes scrollable
-<div className="overflow-x-auto">
-  <div className="flex gap-4 min-w-max">
-    {/* Wide cards */}
-  </div>
-</div>
-
-// CORRECT - Scroll isolated to specific container
-<div className="w-full">
-  <div className="overflow-x-auto -mx-6 px-6">
-    <div className="flex gap-4 min-w-max">
-      {/* Only cards scroll, page stays within viewport */}
-    </div>
-  </div>
-</div>
-```
-
-**Why This Matters:**
-- Without `w-full` parent, `min-w-max` forces entire page width to expand
-- UI controls shift off-screen
-- Layout breaks at all viewport sizes
-- User cannot access navigation or buttons
-
-### Rule 4: Responsive Flexbox
-
-Use flex-wrap and responsive flex directions:
-
-```tsx
-// WRONG - Overflows on small screens
-<div className="flex gap-4">
-  <div className="w-64">Sidebar</div>
-  <div className="w-96">Content</div>
-</div>
-
-// CORRECT - Wraps on mobile, horizontal on desktop
-<div className="flex flex-col md:flex-row gap-4">
-  <div className="w-full md:w-64">Sidebar</div>
-  <div className="flex-1">Content</div>
-</div>
-```
-
-### Rule 5: Text Truncation & Overflow
-
-Always handle long text content:
-
-```tsx
-// WRONG - Long titles break layout
-<h3 className="font-medium">{veryLongTitle}</h3>
-
-// CORRECT - Single line truncate
-<h3 className="font-medium truncate">{veryLongTitle}</h3>
-
-// CORRECT - Multi-line clamp
-<h3 className="font-medium line-clamp-2">{veryLongTitle}</h3>
-
-// CORRECT - Wrap with proper width constraint
-<h3 className="font-medium break-words max-w-full">{veryLongTitle}</h3>
-```
-
-## Common Layout Anti-Patterns
-
-### Anti-Pattern 1: Fixed Widths Without Constraints
-
-```tsx
-// WRONG - Fixed width can overflow viewport
-<div className="w-96 p-8">
-
-// CORRECT - Max width with full width fallback
-<div className="w-full max-w-96 p-8">
-```
-
-### Anti-Pattern 2: Absolute Positioning for UI Controls
-
-```tsx
-// WRONG - Controls shift off-screen when content overflows
-<div className="absolute top-8 right-8">
-  <Button>Toggle View</Button>
-</div>
-
-// CORRECT - Use flexbox layout
-<div className="flex justify-end mb-4">
-  <Button>Toggle View</Button>
-</div>
-```
-
-### Anti-Pattern 3: Non-Responsive Tables
-
-```tsx
-// WRONG - Table breaks on mobile
-<table className="w-full">
-  <thead>
-    <tr>
-      <th>Column 1</th>
-      <th>Column 2</th>
-      <th>Column 3</th>
-      <th>Column 4</th>
-      <th>Column 5</th>
-    </tr>
-  </thead>
-</table>
-
-// CORRECT - Wrap in overflow container
-<div className="overflow-x-auto w-full">
-  <table className="w-full">
-    {/* Table can scroll horizontally on mobile */}
-  </table>
-</div>
-```
-
-### Anti-Pattern 4: Padding on Scroll Container
-
-```tsx
-// WRONG - Padding prevents content from reaching edge
-<div className="overflow-x-auto px-8 py-8">
-  <div className="flex gap-4 min-w-max">
-
-// CORRECT - Use negative margin to compensate
-<div className="w-full">
-  <div className="overflow-x-auto -mx-6 px-6">
-    <div className="flex gap-4 min-w-max">
-```
-
-### Anti-Pattern 5: Missing Width Constraints on Scrollable Parents
-
-```tsx
-// WRONG - Parent has no width, child forces expansion
-<div>
-  <div className="overflow-x-auto">
-    <div className="flex gap-4 min-w-max">
-      {/* Forces parent to expand beyond viewport */}
-    </div>
-  </div>
-</div>
-
-// CORRECT - Explicit width constraint
-<div className="w-full max-w-7xl mx-auto">
-  <div className="overflow-x-auto">
-    <div className="flex gap-4 min-w-max">
-      {/* Scrolls within constrained parent */}
-    </div>
-  </div>
-</div>
-```
-
-## Radix UI Integration Best Practices
-
-### Use Radix Primitives for All Interactive Elements
-
-```tsx
-// WRONG - Native HTML elements
-<select>
-  <option value="1">Option 1</option>
-</select>
-<input type="checkbox" />
-<input type="radio" />
-
-// CORRECT - Radix primitives
-import { Select, SelectTrigger, SelectContent, SelectItem } from '@/features/ui/primitives/select';
-import { Checkbox } from '@/features/ui/primitives/checkbox';
-import { RadioGroup, RadioGroupItem } from '@/features/ui/primitives/radio-group';
-```
-
-### Modal/Dialog Responsive Patterns
-
-```tsx
-// CORRECT - Responsive dialog sizes
-<DialogContent className="w-full max-w-md md:max-w-2xl lg:max-w-4xl">
-  {/* Adapts to screen size */}
-</DialogContent>
-```
-
-## Component Reusability Patterns
-
-### Pattern 1: Card Primitives Over Hardcoded Styles
-
-```tsx
-// WRONG - Hardcoding glassmorphism and edge-lit effects
-<div className="relative rounded-xl overflow-hidden">
-  <div className="absolute inset-x-0 top-0 h-[2px] bg-cyan-500" />
-  <div className="absolute inset-x-0 top-0 h-16 bg-gradient-to-b from-cyan-500/40 to-transparent blur-lg" />
-  <div className="backdrop-blur-md bg-white/10 border border-gray-200 p-4">
-    {children}
-  </div>
-</div>
-
-// CORRECT - Use Card primitive with props
-<Card edgePosition="top" edgeColor="cyan" blur="lg" transparency="light">
-  {children}
-</Card>
-```
-
-### Pattern 2: Static Class Objects from styles.ts
-
-```tsx
-// WRONG - Hardcoding repeated glass effects
-<div className="backdrop-blur-md bg-white/10 border border-gray-200 rounded-lg">
-
-// CORRECT - Use pre-defined classes
-import { glassCard } from '@/features/ui/primitives/styles';
-<div className={cn(glassCard.base, glassCard.blur.md, glassCard.transparency.light)}>
-```
-
-### Pattern 3: Shared Navigation Components
-
-```tsx
-// WRONG - Custom pill navigation each time
-<div className="backdrop-blur-sm bg-white/40 dark:bg-white/5 border rounded-full p-1">
-  <div className="flex gap-1">
-    {items.map(item => (
-      <button className="px-6 py-2.5 rounded-full text-sm font-medium">
-        {item.label}
-      </button>
-    ))}
-  </div>
-</div>
-
-// CORRECT - Use PillNavigation component
-<PillNavigation
-  items={items}
-  activeSection={activeSection}
-  onSectionClick={setActiveSection}
-  colorVariant="orange"
-  size="small"
-/>
-```
-
-## Testing Responsive Layouts
-
-### Required Viewport Tests
-
-Test every layout at these breakpoints:
-- **375px** - iPhone SE (smallest modern phone)
-- **768px** - Tablet portrait
-- **1024px** - Tablet landscape / small laptop
-- **1440px** - Desktop
-- **1920px** - Large desktop
-
-### Responsive Checklist
-
-For every component:
-- [ ] All UI controls visible at all breakpoints
-- [ ] No horizontal page scroll (only intentional container scroll)
-- [ ] Text truncates or wraps appropriately
-- [ ] Images scale responsively
-- [ ] Grid adapts to screen size
-- [ ] Flexbox wraps or changes direction on mobile
-- [ ] Modals/dialogs fit within viewport
-- [ ] Touch targets are minimum 44x44px on mobile
-
-## Common Mistakes Summary
-
-### 1. Dynamic Tailwind Classes
-**Problem:** String interpolation like `bg-${color}-500`
-**Solution:** Static class object lookup
-
-### 2. Unconstrained Scroll Containers
-**Problem:** `min-w-max` without `w-full` parent
-**Solution:** Always constrain parent width
-
-### 3. Fixed Grid Columns
-**Problem:** `grid-cols-4` on all screen sizes
-**Solution:** `grid-cols-1 md:grid-cols-2 lg:grid-cols-4`
-
-### 4. Missing Text Truncation
-**Problem:** Long text breaks layout
-**Solution:** Add `truncate` or `line-clamp-*`
-
-### 5. Hardcoded Component Styles
-**Problem:** Duplicating glassmorphism/edge-lit patterns
-**Solution:** Use Card/DataCard primitives
-
-### 6. Absolute Positioned Controls
-**Problem:** Fixed position elements shift off-screen
-**Solution:** Use flexbox for layout positioning
-
-### 7. Native HTML Form Elements
-**Problem:** Using `<select>`, `<input type="checkbox">`, etc.
-**Solution:** Use Radix UI primitives
-
-## Archon-Specific Patterns
-
-### Overflow Scroll Pattern
-
-```tsx
-// Standard pattern for horizontally scrollable cards
-<div className="w-full">
-  <div className="overflow-x-auto -mx-6 px-6 py-8">
-    <div className="flex gap-4 min-w-max">
-      {items.map(item => <Card key={item.id} />)}
-    </div>
-  </div>
-</div>
-```
-
-### Responsive Grid Pattern
-
-```tsx
-// Standard grid for card layouts
-<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
-  {items.map(item => <Card key={item.id} />)}
-</div>
-```
-
-### Responsive Flex Layout
-
-```tsx
-// Sidebar + main content pattern
-<div className="flex flex-col lg:flex-row gap-6">
-  <aside className="w-full lg:w-64 flex-shrink-0">
-    {/* Sidebar */}
-  </aside>
-  <main className="flex-1 min-w-0">
-    {/* Main content - min-w-0 allows truncation */}
-  </main>
-</div>
-```
-
-### Card Primitive Usage
-
-```tsx
-// Use Card primitive props instead of hardcoding
-<Card
-  blur="lg"                    // sm, md, lg, xl, 2xl, 3xl
-  transparency="light"         // clear, light, medium, frosted, solid
-  edgePosition="top"           // none, top, left, right, bottom
-  edgeColor="cyan"             // purple, blue, cyan, green, orange, pink, red
-  glowColor="cyan"             // For glow effects
-  glowType="outer"             // inner or outer
->
-  {children}
-</Card>
-```
-
-## Pre-Flight Checklist
-
-Before committing any UI component:
-
-### Tailwind Rules
-- [ ] No dynamic class name construction (`bg-${var}-500`)
-- [ ] No template literal class building
-- [ ] All variant classes defined in static objects
-- [ ] Arbitrary values written as complete static strings
-
-### Responsive Rules
-- [ ] Horizontal scroll containers have `w-full` parent wrapper
-- [ ] Grids use responsive column breakpoints
-- [ ] Flex layouts adapt at appropriate breakpoints
-- [ ] Text content has truncation or wrapping
-- [ ] Fixed widths have `max-w-*` constraints
-- [ ] Layout toggle buttons always visible
-
-### Component Rules
-- [ ] Using Card primitive for glassmorphism
-- [ ] Using Radix primitives for all interactive elements
-- [ ] Using shared components (PillNavigation, etc.)
-- [ ] No duplicated styling patterns
-
-### Testing
-- [ ] Tested at 375px width (mobile)
-- [ ] Tested at 768px width (tablet)
-- [ ] Tested at 1024px width (laptop)
-- [ ] Tested at 1440px+ width (desktop)
-- [ ] All UI controls accessible at all sizes
-- [ ] No unintended horizontal page scroll
diff --git a/PRPs/ai_docs/UI_STANDARDS.md b/PRPs/ai_docs/UI_STANDARDS.md
new file mode 100644
index 00000000..f7685041
--- /dev/null
+++ b/PRPs/ai_docs/UI_STANDARDS.md
@@ -0,0 +1,935 @@
+# UI_STANDARDS.md
+
+**Audience**: AI agents performing automated UI audits and refactors.
+**Scope**: Radix Primitives + Tailwind CSS (v4) + Responsive (Flexbox-first) with **Light** and **Dark** themes.
+
+**How to use**: Treat **Rules** as MUST, **Anti‑Patterns** as MUST NOT. Prefer the **Good Examples** verbatim unless there's a documented exception.
+
+---
+
+## 0) Project‑wide Conventions (applies to all sections)
+
+**Rules**
+- Use **no inline styles** (`style=""`) except when setting CSS variables (e.g., `style={{ "--accent": token }}`). Everything else must use Tailwind utilities or predeclared component classes.
+- Use a **single source of truth** for design tokens via Tailwind v4 `@theme` variables (colors, spacing, radii, shadows, breakpoints). Never invent ad‑hoc hex values or pixel sizes.
+- Keep markup **semantic and accessible**. Preserve focus outlines and keyboard navigation.
+- Prefer **wrapper components** (e.g., `<Button variant="primary" />`) that centralize class lists over duplicating long utility strings across the app.
+- Maintain a **z‑index scale** (e.g., base=0, dropdown=30, overlay=40, modal=50, toast=60) and stick to it.
+- **Desktop-primary with responsive adaptations**: Optimize for desktop by default and add breakpoint rules for tablets/phones.
+- Use **Radix UI primitives** for all interactive elements (Select, Checkbox, RadioGroup, Dialog, etc.) - never native HTML form elements.
+- Use **shared component primitives** (Card, PillNavigation, etc.) from `@/features/ui/primitives/` instead of hardcoding repeated patterns.
+
+**Anti‑Patterns**
+- Arbitrary values like `bg-[#12abef]`, `text-[17px]`, `w-[913px]` in markup (unless promoted to tokens or used as static one-offs).
+- Global layout hacks (e.g., `body { overflow: hidden }`) to "fix" scroll; fix the root cause instead.
+- Competing styles on the same element (e.g., `w-full w-1/2`, `px-4 px-8`).
+- Native HTML form elements (`<select>`, `<input type="checkbox">`, `<input type="radio">`) - use Radix primitives.
+- Hardcoding glassmorphism, edge-lit effects, or pill navigation - use shared primitives.
+
+---
+
+## 1) Radix Primitives
+
+**Rules**
+- **Compose, don’t wrap**: use `asChild` to attach Radix behavior to your button/link components.  
+- **Use the documented structure** for each primitive (e.g., `Root/Trigger/Portal/Overlay/Content/Close` for Dialog).  
+- **Style via your classes and Radix data attributes** (e.g., `[data-state="open"]`, `[data-disabled]`) instead of targeting internal DOM.  
+- **Layering**: use `Portal` and your z‑index scale for overlays/popovers; avoid random `z-[9999]`.  
+- **A11y**: never remove focus rings or ARIA attributes that primitives rely on.
+
+**Anti‑Patterns**
+- Deep styling of internal nodes (e.g., selecting Radix’s internal class names or structure).
+- Manually toggling open/close state without Radix APIs.
+- Mixing multiple portaled surfaces with arbitrary z‑indices (dialogs behind popovers, etc.).
+
+**Good Examples**
+```tsx
+// Compose a Trigger with your Button using asChild
+<Dialog.Root>
+  <Dialog.Trigger asChild>
+    <Button variant="primary">Open</Button>
+  </Dialog.Trigger>
+  <Dialog.Portal>
+    <Dialog.Overlay className="fixed inset-0 bg-black/40 backdrop-blur-sm z-40" />
+    <Dialog.Content
+      className="fixed left-1/2 top-1/2 z-50 w-[min(90vw,38rem)] -translate-x-1/2 -translate-y-1/2 rounded-lg
+                 bg-surface/95 dark:bg-surface-dark/95 shadow-xl p-6 focus:outline-none">
+      <Dialog.Title className="text-lg font-semibold">Title</Dialog.Title>
+      <Dialog.Description className="mt-1 text-muted-foreground">
+        Description
+      </Dialog.Description>
+      <div className="mt-6 flex justify-end gap-2">
+        <Dialog.Close asChild><Button variant="ghost">Cancel</Button></Dialog.Close>
+        <Button variant="primary">Confirm</Button>
+      </div>
+    </Dialog.Content>
+  </Dialog.Portal>
+</Dialog.Root>
+```
+
+```css
+/* State-driven styling via data attributes */
+.popover-content[data-state="open"] { /* animations, borders, etc. */ }
+```
+
+---
+
+## 2) Tailwind CSS (v4)
+
+**Rules**
+- **Define tokens properly**: Variables in `:root` and `.dark`, then map to Tailwind with `@theme inline`.
+```css
+@import "tailwindcss";
+
+:root {
+  --background: hsl(0 0% 98%);
+  --foreground: hsl(240 10% 3.9%);
+  --border: hsl(240 5.9% 90%);
+  --radius: 0.5rem;
+  color-scheme: light;
+}
+
+.dark {
+  --background: hsl(0 0% 0%);
+  --foreground: hsl(0 0% 100%);
+  --border: hsl(240 3.7% 15.9%);
+  color-scheme: dark;
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-border: var(--border);
+  --radius-lg: var(--radius);
+  --radius-md: calc(var(--radius) - 2px);
+}
+```
+
+- **CRITICAL: NO dynamic class name construction**. Tailwind processes source code as **plain text at BUILD time**, not runtime. It cannot understand variables, string concatenation, or template literals.
+- **CSS variables ARE allowed in arbitrary values** as long as the utility name is static (e.g., `bg-[var(--accent)]`, `border-[color:var(--accent)]`).
+- **Use static class lookup objects** for discrete variants (e.g., `const colorClasses = { cyan: "bg-cyan-500 text-cyan-700", ... }`).
+- **Use CSS variables pattern** for flexible/continuous values (colors, alphas, glows, gradients).
+- **Conditional classes must be complete strings** (use `cn()` helper with full class names, not interpolated fragments).
+- **Arbitrary values are allowed** if written as complete static strings in source code (e.g., `shadow-[0_0_30px_rgba(34,211,238,0.4)]`).
+- **Inline style allowed ONLY for CSS variables** (e.g., `style={{ "--accent": token }}`), never for direct visual CSS.
+- **`@layer` and `@apply` are still valid** in v4 - use them for base styles and component classes. For custom utilities, register with `@utility` first.
+- **Dark mode**: use `dark:` variants consistently for colors, borders, shadows (and add `.dark` on `<html>`).
+- **No arbitrary values** unless promoted to tokens or used as static one-offs; if you need a value repeatedly, add it to `@theme`.
+- **Reference tokens** for any custom CSS (e.g., `border-radius: var(--radius-md)`).
+- **If referencing vars inside vars**, use `@theme inline` to avoid resolution pitfalls.
+
+**Anti‑Patterns**
+- **Dynamic class construction**: `bg-${color}-500`, `` `text-${textColor}-700` ``, `className={isActive ? \`bg-${activeColor}-500\` : ...}` - CSS WILL NOT BE GENERATED.
+- **String interpolation for class names**: Template literals with variables, computed class names.
+- `style="..."` for visual styling (except setting local CSS vars).
+- Mixing utility classes that conflict or duplicate a property.
+- Introducing new colors/sizes ad‑hoc instead of defining in `:root`/`.dark` and mapping via `@theme inline`.
+
+**Good Examples**
+
+### Pattern A: Lookup Map (discrete variants)
+```tsx
+// ✅ CORRECT - Static class lookup object for finite set of variants
+const colorClasses = {
+  cyan: "bg-cyan-500 text-cyan-700 border-cyan-500/50",
+  purple: "bg-purple-500 text-purple-700 border-purple-500/50",
+  blue: "bg-blue-500 text-blue-700 border-blue-500/50",
+};
+<div className={colorClasses[color]} />
+
+// ✅ CORRECT - Conditional with complete class names
+<div className={isActive ? "bg-cyan-500 text-white" : "bg-gray-500 text-gray-300"} />
+
+// ✅ CORRECT - Use cn() helper with complete class strings
+<div className={cn(
+  "base-classes",
+  isActive && "bg-cyan-500 text-white",
+  isPinned && "border-purple-500 shadow-lg"
+)} />
+```
+
+### Pattern B: CSS Variables (flexible values)
+```tsx
+// ✅ CORRECT - CSS variables in arbitrary values (utility name is static)
+// In CSS: :root { --accent: oklch(0.75 0.12 210); }
+<div className="bg-[var(--accent)] border-[color:var(--accent)]" />
+
+// ✅ CORRECT - Set variable via inline style, use in static utilities
+<div
+  className="bg-[var(--glass-bg)] border-[color:var(--accent)] shadow-[0_0_24px_color-mix(in_oklab,var(--accent)_35%,transparent)]"
+  style={{ "--accent": "oklch(0.75 0.12 210)" } as React.CSSProperties}
+/>
+
+// ✅ CORRECT - Named accent classes that set CSS variables
+// In CSS: .accent-cyan { --accent: var(--color-cyan-500); }
+const accentClass = {
+  cyan: "accent-cyan",
+  orange: "accent-orange",
+} as const;
+<div className={cn("bg-[var(--accent)]", accentClass[color])} />
+```
+
+### Anti-Patterns
+```tsx
+// ❌ BROKEN - Dynamic class construction (CSS NOT GENERATED)
+const color = "cyan";
+<div className={`bg-${color}-500`} />  // NO CSS OUTPUT
+<div className={`text-${textColor}-700 border-${borderColor}-500`} />  // NO CSS OUTPUT
+
+// ❌ BROKEN - Inline style for visual CSS (use variables instead)
+<div style={{ backgroundColor: "#12abef" }} />  // Should be className or CSS variable
+
+// ✅ CORRECT alternative - Use CSS variable
+<div className="bg-[var(--accent)]" style={{ "--accent": "#12abef" } as React.CSSProperties} />
+```
+
+```tsx
+// Centralized Button component (preferred over scattered long class strings)
+export function Button({ variant = "primary", className = "", ...props }) {
+  const base =
+    "inline-flex items-center gap-2 rounded-[var(--radius-md)] px-3 py-2 text-sm font-medium " +
+    "focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 " +
+    "transition-colors";
+  const variants = {
+    primary:
+      "bg-brand-500 text-white hover:brightness-110 dark:text-white " +
+      "focus-visible:outline-brand-500",
+    ghost:
+      "bg-transparent text-fg dark:text-fg-dark hover:bg-black/5 dark:hover:bg-white/10"
+  };
+  return <button className={[base, variants[variant], className].join(' ')} {...props} />;
+}
+```
+
+```css
+/* Local component CSS using tokens (no arbitrary values) */
+.card {
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-card);
+  background: color-mix(in oklab, var(--color-bg) 92%, transparent);
+}
+.dark .card {
+  background: color-mix(in oklab, var(--color-bg-dark) 92%, transparent);
+}
+```
+
+---
+
+## 3) Responsive Layout (Flexbox‑first)
+
+**Rules**
+- **Desktop-primary with responsive adaptations**: Optimize for desktop by default and add breakpoint rules (`md:`, `lg:`, `xl:`) for tablets/phones.
+- Prefer **fluid sizing**: `w-full`, percentages, or flex fractions; constrain with `max-w-*` where needed.
+- Use **Flexbox** for 1‑D layouts; enable `flex-wrap` or responsive `flex-col md:flex-row` when layouts must adapt.
+- Use **`min-w-0` (or `min-h-0` for column layouts)** on flex children that contain text/images to allow proper shrinking without overflow.
+- **CRITICAL: Constrain horizontal scroll containers**. When using `overflow-x-auto`, parent MUST have `w-full` or `max-w-*` to prevent forcing entire page width expansion.
+- Use **`overflow-x-auto`** only on intended horizontal scroll regions; give scroll items `shrink-0`.
+- **Hide scrollbars on horizontal scroll**: Add `scrollbar-hide` class to `overflow-x-auto` containers for cleaner UI (scrollbar-hide utility defined in index.css).
+- **Responsive grid columns**: NEVER use fixed grid columns (e.g., `grid-cols-4`) without responsive breakpoints. Use `grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4`.
+- **Text truncation**: Always handle long text with `truncate` (single line), `line-clamp-N` (multi-line), or `break-words max-w-full` (wrap).
+- For full‑height sections, prefer **`min-h-[100dvh]`** (or allow page scroll) instead of rigid `h-screen` on mobile.
+- Keep **spacing with gaps** (`gap-*`) rather than ad‑hoc margins between siblings.
+- **Breakpoint reference**: `sm`=640px, `md`=768px, `lg`=1024px, `xl`=1280px, `2xl`=1536px.
+- **Test at**: 375px (mobile), 768px (tablet), 1024px (laptop), 1440px+ (desktop).
+
+**Anti‑Patterns**
+- Fixed pixel widths on layout containers (e.g., `w-[500px]`) without `max-w-*` constraint.
+- Blanket `overflow-hidden` on large containers/pages (clips popovers, toasts, dialogs).
+- **Unconstrained scroll containers**: Using `min-w-max` inside `overflow-x-auto` without parent `w-full` - forces entire page to expand horizontally.
+- **CRITICAL: Flex parent without min-w-0 containing scroll container**. **SYMPTOM**: Scroll container forces ENTIRE PAGE to expand horizontally, UI controls (toggles, buttons) shift off-screen. The flex child refuses to shrink below its content's natural width, causing page-wide horizontal scroll.
+- **Fixed grid columns**: `grid-cols-4` on all screen sizes breaks mobile. **SYMPTOM**: Page scrolls horizontally, UI controls (grid/list toggles, buttons) shift off-screen and become inaccessible.
+- **Missing text truncation**: Long text that breaks layout without `truncate` or `line-clamp-*`.
+- **Absolute positioning for UI controls**: Fixed position elements shift off-screen when content overflows.
+- 100vh "traps" on mobile that hide content behind browser UI; avoid locking scroll inside view‑height panels.
+- Mixing contradictory sizing on a single element (e.g., `flex-1` with `w-64`).
+
+**Good Examples**
+```tsx
+// ✅ CORRECT - Responsive two-column layout
+<div className="mx-auto max-w-6xl px-4">
+  <div className="flex flex-col md:flex-row gap-6">
+    <aside className="w-full md:w-64 shrink-0">…sidebar…</aside>
+    <main className="flex-1 min-w-0">…content that can shrink without overflow…</main>
+  </div>
+</div>
+
+// ✅ CORRECT - Responsive grid with proper breakpoints
+<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
+  {items.map(item => <Card key={item.id} />)}
+</div>
+
+// ✅ CORRECT - Constrained horizontal scroll (Archon pattern)
+<div className="w-full">
+  <div className="overflow-x-auto -mx-6 px-6 py-8 scrollbar-hide">
+    <div className="flex gap-4 min-w-max">
+      {items.map(item => <Card key={item.id} className="w-72 shrink-0" />)}
+    </div>
+  </div>
+</div>
+
+// ✅ CORRECT - Flex parent containing scroll container MUST have min-w-0
+<div className="flex gap-6">
+  <aside className="w-64 shrink-0">Sidebar</aside>
+  <main className="flex-1 min-w-0">  {/* min-w-0 is CRITICAL here */}
+    {/* This content includes horizontal scroll containers */}
+    <div className="w-full">
+      <div className="overflow-x-auto scrollbar-hide">
+        <div className="flex gap-4 min-w-max">
+          {items.map(item => <Card key={item.id} className="w-72 shrink-0" />)}
+        </div>
+      </div>
+    </div>
+  </main>
+</div>
+
+// ✅ CORRECT - Text truncation patterns
+<h3 className="font-medium truncate">{veryLongTitle}</h3>  {/* Single line */}
+<h3 className="font-medium line-clamp-2">{description}</h3>  {/* Multi-line */}
+<p className="break-words max-w-full">{wrappableContent}</p>  {/* Wrap */}
+
+// ✅ CORRECT - Responsive flexbox with wrapping
+<div className="flex flex-col md:flex-row gap-4 flex-wrap">
+  <div className="w-full md:w-64">Sidebar</div>
+  <div className="flex-1 min-w-0">Content</div>
+</div>
+
+// ❌ BROKEN - Unconstrained scroll (entire page becomes horizontally scrollable)
+<div className="overflow-x-auto">
+  <div className="flex gap-4 min-w-max">
+    {/* Page width forced beyond viewport */}
+  </div>
+</div>
+
+// ❌ CRITICAL BROKEN - Flex parent without min-w-0 containing scroll container
+// SYMPTOM: Scroll container forces ENTIRE PAGE to expand, UI controls shift off-screen
+<div className="flex gap-6">
+  <aside className="w-64 shrink-0">Sidebar</aside>
+  <main className="flex-1 max-w-6xl">  {/* MISSING min-w-0! */}
+    <div className="w-full">
+      <div className="overflow-x-auto">
+        <div className="flex gap-4 min-w-max">
+          <Card className="w-72 shrink-0" />  {/* Forces flex parent to expand */}
+        </div>
+      </div>
+    </div>
+    {/* Grid/list toggle buttons are now OFF-SCREEN → */}
+  </main>
+</div>
+
+// ❌ BROKEN - Fixed grid columns (breaks mobile, forces page-width expansion)
+// SYMPTOM: UI controls (toggles, buttons) shift off-screen, page scrolls horizontally
+<div className="grid grid-cols-4 gap-4">
+  <Card className="w-72" />  {/* Fixed width × 4 cols = 1152px minimum */}
+  {/* User cannot access grid/list toggle buttons - they're off-screen */}
+</div>
+
+// ❌ ALSO BROKEN - Responsive grid BUT fixed-width children
+<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+  <Card className="w-72" />  {/* w-72 prevents cards from adapting to grid cell */}
+  {/* On md breakpoint: 2 × 288px = 576px + gaps → can still overflow */}
+</div>
+
+// ❌ BROKEN - No text truncation
+<h3 className="font-medium">{veryLongTitle}</h3>  {/* Overflows layout */}
+```
+
+```css
+/* Full-height panel that still works on mobile */
+.section {
+  min-height: 100dvh; /* allows for dynamic mobile toolbars */
+}
+```
+
+---
+
+## 4) Light/Dark Themes
+
+**Rules**
+- Implement dark mode with the **`dark:` variant** and an `.dark` class on `<html>`.  
+- Keep structure identical; only colors/opacity/shadows change between themes.  
+- Use tokens for both themes (e.g., `--color-bg` and `--color-bg-dark`) and switch via `.dark`.
+
+**Anti‑Patterns**
+- Hard‑coding light colors without a dark counterpart.
+- Completely different component visuals between themes (beyond color/contrast).
+- Using global filters/invert to “fake” dark mode.
+
+**Good Example**
+```html
+<article class="bg-[var(--color-bg)] text-[var(--color-fg)]
+               dark:bg-[var(--color-bg-dark)] dark:text-[var(--color-fg-dark)]">
+  …
+</article>
+```
+
+---
+
+## 5) Component Reusability & Shared Primitives
+
+**Rules**
+- **Use Card primitives** from `@/features/ui/primitives/` for all glassmorphism, edge-lit, and card effects - NEVER hardcode these patterns.
+- **Use PillNavigation component** for tab navigation - NEVER create custom pill navigation.
+- **Use Radix UI primitives** for all interactive elements (Select, Checkbox, RadioGroup, Dialog, Popover, etc.).
+- **Import from styles.ts** when you need pre-defined class objects - this is the design system's foundation.
+- **Centralize repeated patterns** - if you find yourself copying the same class strings 3+ times, create a wrapper component.
+
+### The styles.ts Design System
+
+**Location**: `archon-ui-main/src/features/ui/primitives/styles.ts`
+
+This file is the **single source of truth** for Archon's Tron-inspired glassmorphism design system. It provides pre-built static class strings that ensure consistency across the entire application.
+
+**What styles.ts Provides:**
+
+1. **`glassmorphism`** - Core glass effect utilities
+   - `background.*` - Transparency levels (subtle, strong, card, colored)
+   - `border.*` - Border styles (default, colored, focus, hover)
+   - `interactive.*` - Interaction states (base, hover, active, selected, disabled)
+   - `animation.*` - Animation presets (fadeIn, slideIn, etc.)
+   - `shadow.*` - Shadow effects including neon glows
+   - `priority.*` - Task priority colors (critical, high, medium, low)
+
+2. **`glassCard`** - Complete card system
+   - `base` - Base card structure
+   - `blur.*` - Blur intensity levels (none, sm, md, lg, xl, 2xl, 3xl)
+   - `transparency.*` - Glass opacity levels (clear, light, medium, frosted, solid)
+   - `tints.*` - Colored glass tints (purple, blue, cyan, green, orange, pink, red)
+   - `variants.*` - Pre-built color variants with border + glow
+   - `edgeLit.*` - Edge-lit effects (position + color + glow)
+   - `sizes.*` - Padding variants (none, sm, md, lg, xl)
+   - `outerGlowSizes.*` - Outer glow by size and color
+   - `innerGlowSizes.*` - Inner glow by size and color
+
+3. **`compoundStyles`** - Common composition patterns
+   - `interactiveElement` - Standard button/menu item styling
+   - `floatingPanel` - Dropdown/popover/tooltip styling
+   - `formControl` - Input/select styling
+   - `card` - Basic card styling
+
+4. **`cn()`** - Utility function to combine class strings
+
+**When to Use styles.ts:**
+
+✅ **ALWAYS use for:**
+- Glassmorphism backgrounds (`glassmorphism.background.*`)
+- Card variants (`glassCard.variants.*`)
+- Edge-lit effects (`glassCard.edgeLit.*`)
+- Glow effects (`glassCard.outerGlowSizes.*`, `glassCard.innerGlowSizes.*`)
+- Interactive states (`glassmorphism.interactive.*`)
+- Animations (`glassmorphism.animation.*`)
+
+❌ **DON'T use for:**
+- Layout (use Tailwind utilities: `flex`, `grid`, `w-full`, etc.)
+- Spacing (use Tailwind: `p-4`, `m-2`, `gap-4`, etc.)
+- Typography (use Tailwind: `text-lg`, `font-medium`, etc.)
+- One-off custom styling (use inline Tailwind classes)
+
+**How to Use:**
+
+```tsx
+import { glassmorphism, glassCard, cn } from '@/features/ui/primitives/styles';
+
+// Example 1: Using glassmorphism utilities
+<div className={cn(
+  glassmorphism.background.strong,
+  glassmorphism.border.default,
+  glassmorphism.shadow.lg,
+  "p-6 rounded-lg" // Layout/spacing from Tailwind
+)}>
+  Content
+</div>
+
+// Example 2: Using glassCard with variants
+<div className={cn(
+  glassCard.base,
+  glassCard.blur.lg,
+  glassCard.transparency.light,
+  glassCard.variants.cyan.border,
+  glassCard.variants.cyan.glow,
+  "p-6" // Padding from Tailwind
+)}>
+  Card content
+</div>
+
+// Example 3: Using edge-lit effects
+<div className={cn(
+  glassCard.base,
+  glassCard.blur.xl,
+  glassCard.transparency.medium,
+  glassCard.edgeLit.position.top,
+  glassCard.edgeLit.color.purple.line,
+  glassCard.edgeLit.color.purple.glow,
+  "p-8"
+)}>
+  Edge-lit card
+</div>
+```
+
+**Why styles.ts Matters:**
+
+1. **Consistency** - Same glass effects across all components
+2. **Maintainability** - Change design system in one place
+3. **Performance** - Static class strings, no runtime computation
+4. **Type Safety** - TypeScript autocomplete for all variants
+5. **Design Tokens** - All values reference @theme tokens
+6. **DRY Principle** - No duplication of complex class strings
+
+**Anti‑Patterns**
+- Hardcoding glassmorphism effects: `backdrop-blur-md bg-white/10 border border-gray-200`.
+- Creating custom pill navigation each time instead of using `<PillNavigation />`.
+- Using native HTML form elements (`<select>`, `<input type="checkbox">`, `<input type="radio">`) instead of Radix primitives.
+- Duplicating edge-lit glow effects across multiple components.
+
+**Good Examples**
+```tsx
+// ✅ CORRECT - Use Card primitive with props
+import { Card } from '@/features/ui/primitives/card';
+
+<Card
+  blur="lg"                    // sm, md, lg, xl, 2xl, 3xl
+  transparency="light"         // clear, light, medium, frosted, solid
+  edgePosition="top"           // none, top, left, right, bottom
+  edgeColor="cyan"             // purple, blue, cyan, green, orange, pink, red
+  glowColor="cyan"             // For glow effects
+  glowType="outer"             // inner or outer
+>
+  {children}
+</Card>
+
+// ✅ CORRECT - Use PillNavigation component
+import { PillNavigation } from '@/features/ui/primitives/pill-navigation';
+
+<PillNavigation
+  items={[
+    { id: 'overview', label: 'Overview' },
+    { id: 'tasks', label: 'Tasks' },
+  ]}
+  activeSection={activeSection}
+  onSectionClick={setActiveSection}
+  colorVariant="orange"
+  size="small"
+/>
+
+// ✅ CORRECT - Use Radix primitives
+import { Select, SelectTrigger, SelectContent, SelectItem } from '@/features/ui/primitives/select';
+import { Checkbox } from '@/features/ui/primitives/checkbox';
+import { RadioGroup, RadioGroupItem } from '@/features/ui/primitives/radio-group';
+
+<Select value={value} onValueChange={setValue}>
+  <SelectTrigger>Choose option</SelectTrigger>
+  <SelectContent>
+    <SelectItem value="1">Option 1</SelectItem>
+  </SelectContent>
+</Select>
+
+// ✅ CORRECT - Use styles.ts for shared class objects
+import { glassCard } from '@/features/ui/primitives/styles';
+<div className={cn(glassCard.base, glassCard.blur.md, glassCard.transparency.light)}>
+  {children}
+</div>
+
+// ❌ BROKEN - Hardcoding glassmorphism
+<div className="backdrop-blur-md bg-white/10 border border-gray-200 rounded-lg">
+  {children}
+</div>
+
+// ❌ BROKEN - Custom pill navigation
+<div className="backdrop-blur-sm bg-white/40 dark:bg-white/5 border rounded-full p-1">
+  <div className="flex gap-1">
+    {items.map(item => (
+      <button className="px-6 py-2.5 rounded-full text-sm font-medium">
+        {item.label}
+      </button>
+    ))}
+  </div>
+</div>
+
+// ❌ BROKEN - Native HTML elements
+<select>
+  <option value="1">Option 1</option>
+</select>
+```
+
+---
+
+## 6) Tailwind Tokens Quickstart (promote values to tokens)
+
+```css
+@import "tailwindcss";
+
+:root {
+  --background: hsl(0 0% 98%);
+  --foreground: hsl(240 10% 3.9%);
+  --border: hsl(240 5.9% 90%);
+  --brand-500: oklch(0.70 0.15 220);
+  --radius: 0.5rem;
+  color-scheme: light;
+}
+
+.dark {
+  --background: hsl(0 0% 0%);
+  --foreground: hsl(0 0% 100%);
+  --border: hsl(240 3.7% 15.9%);
+  color-scheme: dark;
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-border: var(--border);
+  --color-brand-500: var(--brand-500);
+  --radius-lg: var(--radius);
+  --radius-md: calc(var(--radius) - 2px);
+}
+```
+
+Then use generated utilities (e.g., `bg-brand-500`, `border-border`) or token references (`bg-[var(--accent)]`).
+
+---
+
+## 7) UI Review Pre-Flight Checklist
+
+Before committing any UI component, verify ALL of these:
+
+### Tailwind v4 Rules
+- [ ] **No dynamic class construction** (`bg-${color}-500`, template literals with variables)
+- [ ] **CSS variables allowed in arbitrary values** (static utility names: `bg-[var(--accent)]`)
+- [ ] **Static class lookup objects** for discrete variants (e.g., `const colorClasses = { cyan: "...", ... }`)
+- [ ] **CSS variables pattern** for flexible/continuous values (colors, alphas, glows)
+- [ ] **Conditional classes are complete strings** (use `cn()` with full class names)
+- [ ] **Arbitrary values are static** (written as complete strings in source code)
+- [ ] **Inline style ONLY for CSS variables** (`style={{ "--accent": token }}`), never direct visual CSS
+- [ ] **Variables in `:root` and `.dark`**, mapped with `@theme inline`
+- [ ] **`@layer` and `@apply` used properly** (base styles and component classes)
+
+### Responsive Layout Rules
+- [ ] **Desktop-primary with responsive adaptations** (optimize for desktop, add breakpoints for smaller screens)
+- [ ] **Horizontal scroll containers have `w-full` parent** (CRITICAL - prevents page-width expansion)
+- [ ] **Horizontal scroll containers use `scrollbar-hide`** (cleaner UI without visible scrollbar)
+- [ ] **Flex parent containing scroll container has `min-w-0`** (CRITICAL - prevents page expansion)
+- [ ] **Responsive grid columns** (`grid-cols-1 md:grid-cols-2 lg:grid-cols-3` etc.)
+- [ ] **Flexbox adapts at breakpoints** (`flex-col md:flex-row`)
+- [ ] **Text has truncation/wrapping** (`truncate`, `line-clamp-N`, or `break-words max-w-full`)
+- [ ] **Fixed widths have `max-w-*` constraints** (no bare `w-[500px]`)
+- [ ] **Add `min-w-0` to flex children** that contain text/images (allows shrinking)
+- [ ] **Layout toggle buttons always visible** (not absolutely positioned off-screen)
+- [ ] **Use `min-h-[100dvh]`** instead of rigid `h-screen` on mobile
+- [ ] **Remove layout-level `overflow-hidden`** (clips popovers/toasts/dialogs)
+
+### Component Reusability Rules
+- [ ] **Use Card primitive** for glassmorphism/edge-lit effects (no hardcoded patterns)
+- [ ] **Use PillNavigation component** for tab navigation (no custom implementations)
+- [ ] **Use Radix UI primitives** for all interactive elements (Select, Checkbox, RadioGroup, Dialog, etc.)
+- [ ] **Import from styles.ts** for shared class objects when appropriate
+- [ ] **No duplicated styling patterns** (DRY - create wrapper components if repeated 3+ times)
+
+### Radix Primitives Rules
+- [ ] **Use `asChild` for custom triggers** (compose, don't wrap)
+- [ ] **Follow documented structure** (Root/Trigger/Portal/Overlay/Content/Close)
+- [ ] **Style via data attributes** (`[data-state="open"]`, `[data-disabled]`)
+- [ ] **Use Portal and z-index scale** for overlays (no random `z-[9999]`)
+- [ ] **Never remove focus rings or ARIA** attributes
+
+### Light/Dark Theme Rules
+- [ ] **Every color/border/shadow has `dark:` variant** where visible
+- [ ] **Structure identical between themes** (only colors/opacity/shadows change)
+- [ ] **Use tokens for both themes** (`--color-bg` and `--color-bg-dark`)
+
+### Testing Requirements
+- [ ] **Tested at 375px width** (mobile - iPhone SE)
+- [ ] **Tested at 768px width** (tablet)
+- [ ] **Tested at 1024px width** (laptop)
+- [ ] **Tested at 1440px+ width** (desktop)
+- [ ] **All UI controls accessible** at all sizes
+- [ ] **No unintended horizontal page scroll** (only intentional container scroll)
+- [ ] **Images scale responsively**
+- [ ] **Modals/dialogs fit within viewport**
+- [ ] **Touch targets minimum 44x44px** on mobile
+
+### Common Violations to Fix Immediately
+- ❌ `bg-${color}-500` → ✅ `colorClasses[color]`
+- ❌ `grid-cols-4` → ✅ `grid-cols-1 md:grid-cols-2 lg:grid-cols-4` (Symptom: page scrolls horizontally, controls off-screen)
+- ❌ Hardcoded glassmorphism → ✅ `<Card blur="lg" transparency="light">`
+- ❌ `<select>` → ✅ `<Select>` from Radix
+- ❌ Custom pill navigation → ✅ `<PillNavigation>`
+- ❌ `overflow-x-auto` without `w-full` parent → ✅ Wrap in `<div className="w-full">`
+- ❌ Long text with no truncation → ✅ Add `truncate` or `line-clamp-N`
+- ❌ Fixed `w-[500px]` → ✅ `w-full max-w-[500px]`
+- ❌ Absolute positioned controls → ✅ Use flexbox layout
+- ❌ No dark mode variant → ✅ Add `dark:` classes
+
+---
+
+## 8) Automated Scanning Patterns
+
+Use these patterns to programmatically detect violations in `.tsx` files.
+
+### Critical Violations (Breaking Changes)
+
+**Dynamic Tailwind Class Construction (NO CSS GENERATED)**
+```bash
+grep -rn "className={\`.*\${.*}.*\`}" [path] --include="*.tsx"
+grep -rn "bg-\${.*}\|text-\${.*}\|border-\${.*}\|shadow-\${.*}" [path] --include="*.tsx"
+```
+**Rule**: Section 2 - NO dynamic class name construction
+**Fix**: Use static class lookup objects (Pattern A from Section 2)
+
+**Unconstrained Horizontal Scroll (BREAKS LAYOUT)**
+```bash
+# Find overflow-x-auto without w-full parent
+grep -rn "overflow-x-auto" [path] --include="*.tsx"
+# Then manually verify parent has w-full or max-w-*
+```
+**Rule**: Section 3 - Constrain horizontal scroll containers
+**Fix**: Wrap in `<div className="w-full">` (Example in Section 3)
+
+**Non-Responsive Grid Columns (BREAKS MOBILE)**
+```bash
+grep -rn "grid-cols-[2-9]" [path] --include="*.tsx" | grep -v "md:\|lg:\|sm:\|xl:"
+```
+**Rule**: Section 3 - Responsive grid columns mandatory
+**Symptom**: Page scrolls horizontally, UI controls (grid/list toggles, navigation buttons) shift off-screen and become inaccessible
+**Fix**: Add responsive breakpoints: `grid-cols-1 md:grid-cols-2 lg:grid-cols-4` (Section 3)
+
+**Min-w-max Without Constraint**
+```bash
+grep -rn "min-w-max" [path] --include="*.tsx"
+```
+**Rule**: Section 3 - min-w-max must have constrained parent
+**Fix**: Ensure parent has `w-full` or `max-w-*`
+
+### High Priority Violations
+
+**Native HTML Form Elements (Should Use Radix)**
+```bash
+grep -rn "<select>" [path] --include="*.tsx"
+grep -rn "<option>" [path] --include="*.tsx"
+grep -rn "type=\"checkbox\"" [path] --include="*.tsx"
+grep -rn "type=\"radio\"" [path] --include="*.tsx"
+```
+**Rule**: Section 0, Section 1 - Use Radix UI primitives
+**Fix**: Import from `@/features/ui/primitives/` (Section 5)
+
+**Hardcoded Glassmorphism (Should Use Card Primitive)**
+```bash
+grep -rn "backdrop-blur.*bg-white/.*border.*rounded" [path] --include="*.tsx"
+grep -rn "absolute inset-x-0 top-0.*bg-gradient-to-b" [path] --include="*.tsx"
+```
+**Rule**: Section 5 - Use Card primitive for glassmorphism
+**Fix**: `<Card blur="lg" transparency="light">` (Section 5)
+
+**Hardcoded Pill Navigation (Should Use Component)**
+```bash
+grep -rn "rounded-full.*flex gap-" [path] --include="*.tsx"
+grep -rn "backdrop-blur.*rounded-full.*px-6 py-2" [path] --include="*.tsx"
+```
+**Rule**: Section 5 - Use PillNavigation component
+**Fix**: `<PillNavigation items={...} />` (Section 5)
+
+**Missing Text Truncation**
+```bash
+grep -rn "<h[1-6].*className" [path] --include="*.tsx" | grep -v "truncate\|line-clamp"
+```
+**Rule**: Section 3 - Always handle long text
+**Fix**: Add `truncate` or `line-clamp-N` (Section 3)
+
+**Fixed Widths Without Constraints**
+```bash
+grep -rn "w-\[0-9\]" [path] --include="*.tsx" | grep -v "max-w-"
+grep -rn "w-96\|w-80\|w-72\|w-64" [path] --include="*.tsx" | grep -v "max-w-"
+```
+**Rule**: Section 3 - Fixed widths need max-w-* constraints
+**Fix**: Change to `w-full max-w-[value]`
+
+**Inline Style for Visual CSS (Not Variables)**
+```bash
+grep -rn "style={{.*backgroundColor\|color:\|padding:\|margin:" [path] --include="*.tsx"
+```
+**Rule**: Section 0, Section 2 - Inline style ONLY for CSS variables
+**Fix**: Use className or CSS variables (Section 2 Pattern B)
+
+**Missing Dark Mode Variants**
+```bash
+# Find colors without dark: variant (manual review needed)
+grep -rn "bg-.*-[0-9]" [path] --include="*.tsx" | grep -v "dark:"
+```
+**Rule**: Section 4 - Every visible color needs dark: variant
+**Fix**: Add `dark:` classes (Section 4)
+
+### Medium Priority Violations
+
+**Not Using Shared Primitives**
+```bash
+# Manually check imports - should import from @/features/ui/primitives/
+grep -rn "import.*from.*primitives" [path] --include="*.tsx" -L
+```
+**Rule**: Section 0, Section 5 - Use shared component primitives
+**Fix**: Import and use Card, PillNavigation, Radix primitives
+
+**Missing min-w-0 on Flex Children (CRITICAL for scroll containers)**
+```bash
+# Find flex-1 without min-w-0 (manual review for children containing scroll containers)
+grep -rn "flex-1" [path] --include="*.tsx" | grep -v "min-w-0"
+```
+**Rule**: Section 3 - Flex parent containing scroll container MUST have min-w-0
+**Symptom**: Scroll container forces ENTIRE PAGE to expand, UI controls shift off-screen
+**Fix**: Add `min-w-0` to flex parent: `className="flex-1 min-w-0"` (Section 3)
+
+### Scoring Guide
+
+For each component, calculate violation score:
+- **0 critical violations**: 9-10/10
+- **1 critical violation**: 7-8/10
+- **2-3 critical violations**: 5-6/10
+- **4+ critical violations**: 1-4/10
+
+Adjust based on high/medium priority violations.
+
+---
+
+## 9) Quick Reference
+
+### Archon-Specific Component Patterns
+
+```tsx
+// Horizontal Scroll Pattern (constrained, hidden scrollbar)
+<div className="w-full">
+  <div className="overflow-x-auto -mx-6 px-6 py-8 scrollbar-hide">
+    <div className="flex gap-4 min-w-max">
+      {items.map(item => <Card key={item.id} className="w-72 shrink-0" />)}
+    </div>
+  </div>
+</div>
+
+// Note: scrollbar-hide utility defined in index.css:
+// .scrollbar-hide {
+//   -ms-overflow-style: none;
+//   scrollbar-width: none;
+// }
+// .scrollbar-hide::-webkit-scrollbar {
+//   display: none;
+// }
+
+// Responsive Grid Pattern
+<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
+  {items.map(item => <Card key={item.id} />)}
+</div>
+
+// Sidebar + Main Content Pattern
+<div className="flex flex-col lg:flex-row gap-6">
+  <aside className="w-full lg:w-64 flex-shrink-0">
+    {/* Sidebar content */}
+  </aside>
+  <main className="flex-1 min-w-0">
+    {/* Main content - min-w-0 allows truncation */}
+  </main>
+</div>
+
+// Card Primitive Usage
+<Card
+  blur="lg"
+  transparency="light"
+  edgePosition="top"
+  edgeColor="cyan"
+  glowColor="cyan"
+  glowType="outer"
+>
+  {children}
+</Card>
+
+// Radix Dialog Pattern
+<Dialog.Root>
+  <Dialog.Trigger asChild>
+    <Button variant="primary">Open</Button>
+  </Dialog.Trigger>
+  <Dialog.Portal>
+    <Dialog.Overlay className="fixed inset-0 bg-black/40 backdrop-blur-sm z-40" />
+    <Dialog.Content className="fixed left-1/2 top-1/2 z-50 w-full max-w-md md:max-w-2xl
+                               -translate-x-1/2 -translate-y-1/2 rounded-lg
+                               bg-surface/95 dark:bg-surface-dark/95 shadow-xl p-6">
+      <Dialog.Title>Title</Dialog.Title>
+      <Dialog.Description>Description</Dialog.Description>
+      {/* Content */}
+    </Dialog.Content>
+  </Dialog.Portal>
+</Dialog.Root>
+```
+
+### Color Variant Patterns
+
+**Pattern A: Lookup Map (discrete variants)**
+```tsx
+// Static class object for finite set of brand colors
+const colorClasses = {
+  cyan: "bg-cyan-500 text-cyan-900 border-cyan-500/50 shadow-cyan-500/20",
+  purple: "bg-purple-500 text-purple-900 border-purple-500/50 shadow-purple-500/20",
+  blue: "bg-blue-500 text-blue-900 border-blue-500/50 shadow-blue-500/20",
+  orange: "bg-orange-500 text-orange-900 border-orange-500/50 shadow-orange-500/20",
+};
+
+<div className={cn("base-styles", colorClasses[colorVariant])} />
+```
+
+**Pattern B: CSS Variables (flexible values)**
+```css
+/* In index.css */
+:root {
+  --cyan-500: oklch(0.75 0.12 210);
+  --orange-500: oklch(0.75 0.16 70);
+  --accent: var(--cyan-500);
+}
+
+@theme inline {
+  --color-cyan-500: var(--cyan-500);
+  --color-orange-500: var(--orange-500);
+}
+
+/* Named accent classes */
+.accent-cyan { --accent: var(--cyan-500); }
+.accent-orange { --accent: var(--orange-500); }
+```
+
+```tsx
+// Component using CSS variables
+const accentClass = {
+  cyan: "accent-cyan",
+  orange: "accent-orange",
+} as const;
+
+export function GlassCard({ color = "cyan", customAccent }: Props) {
+  return (
+    <div
+      className={cn(
+        "rounded-lg backdrop-blur-md",
+        "bg-[var(--glass-bg)] border-[color:var(--accent)]",
+        "shadow-[0_0_24px_color-mix(in_oklab,var(--accent)_35%,transparent)]",
+        accentClass[color]
+      )}
+      // Optional: set custom accent dynamically via variable
+      style={customAccent ? ({ "--accent": customAccent } as React.CSSProperties) : undefined}
+    />
+  );
+}
+```
+
+### Breakpoint Reference
+
+- **sm**: 640px (small tablets)
+- **md**: 768px (tablets)
+- **lg**: 1024px (laptops)
+- **xl**: 1280px (desktops)
+- **2xl**: 1536px (large desktops)
+
+### Critical Reminders
+
+1. **NO dynamic class construction** - `bg-${color}-500` will NOT generate CSS
+2. **CSS variables ARE allowed** - `bg-[var(--accent)]` works (utility name is static)
+3. **Inline style ONLY for CSS variables** - `style={{ "--accent": token }}`, never direct visual CSS
+4. **Proper @theme pattern** - Variables in `:root`/`.dark`, map with `@theme inline`
+5. **`@layer` and `@apply` still work** - Valid in v4 for base/component styles
+6. **Constrain scroll containers** - `overflow-x-auto` parent needs `w-full`
+7. **Responsive grids always** - Never fixed `grid-cols-4` without breakpoints
+8. **Use primitives** - Card, PillNavigation, Radix UI components
+9. **Desktop-primary** - Optimize for desktop, add responsive breakpoints for smaller screens
+10. **Text truncation** - Always handle long text explicitly
+11. **Dark mode** - Every visible color needs `dark:` variant
diff --git a/archon-ui-main/package-lock.json b/archon-ui-main/package-lock.json
index 42386980..d37567a0 100644
--- a/archon-ui-main/package-lock.json
+++ b/archon-ui-main/package-lock.json
@@ -41,6 +41,8 @@
       },
       "devDependencies": {
         "@biomejs/biome": "2.2.2",
+        "@tailwindcss/postcss": "4.1.2",
+        "@tailwindcss/vite": "4.1.2",
         "@testing-library/jest-dom": "^6.4.6",
         "@testing-library/react": "^14.3.1",
         "@testing-library/user-event": "^14.5.2",
@@ -58,7 +60,7 @@
         "eslint-plugin-react-refresh": "^0.4.1",
         "jsdom": "^24.1.0",
         "postcss": "latest",
-        "tailwindcss": "3.4.17",
+        "tailwindcss": "4.1.2",
         "ts-node": "^10.9.1",
         "typescript": "^5.5.4",
         "vite": "^5.2.0",
@@ -1743,53 +1745,6 @@
       "dev": true,
       "license": "BSD-3-Clause"
     },
-    "node_modules/@isaacs/cliui": {
-      "version": "8.0.2",
-      "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
-      "integrity": "sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "string-width": "^5.1.2",
-        "string-width-cjs": "npm:string-width@^4.2.0",
-        "strip-ansi": "^7.0.1",
-        "strip-ansi-cjs": "npm:strip-ansi@^6.0.1",
-        "wrap-ansi": "^8.1.0",
-        "wrap-ansi-cjs": "npm:wrap-ansi@^7.0.0"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@isaacs/cliui/node_modules/ansi-regex": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.1.0.tgz",
-      "integrity": "sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
-      }
-    },
-    "node_modules/@isaacs/cliui/node_modules/strip-ansi": {
-      "version": "7.1.0",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
-      "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "ansi-regex": "^6.0.1"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
-      }
-    },
     "node_modules/@istanbuljs/schema": {
       "version": "0.1.3",
       "resolved": "https://registry.npmjs.org/@istanbuljs/schema/-/schema-0.1.3.tgz",
@@ -2432,17 +2387,6 @@
       "integrity": "sha512-CecwLWx3rhxVQF6V4bAgPS5t+So2sTbPgAzafKkVizyi7tlwpcFpdFqq+wqF2OwNBmqFuu6tOyouTuxgpMfzmA==",
       "license": "MIT"
     },
-    "node_modules/@pkgjs/parseargs": {
-      "version": "0.11.0",
-      "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
-      "integrity": "sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==",
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "engines": {
-        "node": ">=14"
-      }
-    },
     "node_modules/@polka/url": {
       "version": "1.0.0-next.29",
       "resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.29.tgz",
@@ -3853,6 +3797,258 @@
       "integrity": "sha512-Gfkvwk9o9kE9r9XNBmJRfV8zONvXThnm1tcuojL04Uy5uRyqg93DC83lDebl0rocZCfKSjUv+fWYtMQmEDJldg==",
       "license": "MIT"
     },
+    "node_modules/@tailwindcss/node": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.1.2.tgz",
+      "integrity": "sha512-ZwFnxH+1z8Ehh8bNTMX3YFrYdzAv7JLY5X5X7XSFY+G9QGJVce/P9xb2mh+j5hKt8NceuHmdtllJvAHWKtsNrQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "enhanced-resolve": "^5.18.1",
+        "jiti": "^2.4.2",
+        "lightningcss": "1.29.2",
+        "tailwindcss": "4.1.2"
+      }
+    },
+    "node_modules/@tailwindcss/oxide": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide/-/oxide-4.1.2.tgz",
+      "integrity": "sha512-Zwz//1QKo6+KqnCKMT7lA4bspGfwEgcPAHlSthmahtgrpKDfwRGk8PKQrW8Zg/ofCDIlg6EtjSTKSxxSufC+CQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 10"
+      },
+      "optionalDependencies": {
+        "@tailwindcss/oxide-android-arm64": "4.1.2",
+        "@tailwindcss/oxide-darwin-arm64": "4.1.2",
+        "@tailwindcss/oxide-darwin-x64": "4.1.2",
+        "@tailwindcss/oxide-freebsd-x64": "4.1.2",
+        "@tailwindcss/oxide-linux-arm-gnueabihf": "4.1.2",
+        "@tailwindcss/oxide-linux-arm64-gnu": "4.1.2",
+        "@tailwindcss/oxide-linux-arm64-musl": "4.1.2",
+        "@tailwindcss/oxide-linux-x64-gnu": "4.1.2",
+        "@tailwindcss/oxide-linux-x64-musl": "4.1.2",
+        "@tailwindcss/oxide-win32-arm64-msvc": "4.1.2",
+        "@tailwindcss/oxide-win32-x64-msvc": "4.1.2"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-android-arm64": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-android-arm64/-/oxide-android-arm64-4.1.2.tgz",
+      "integrity": "sha512-IxkXbntHX8lwGmwURUj4xTr6nezHhLYqeiJeqa179eihGv99pRlKV1W69WByPJDQgSf4qfmwx904H6MkQqTA8w==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-darwin-arm64": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-arm64/-/oxide-darwin-arm64-4.1.2.tgz",
+      "integrity": "sha512-ZRtiHSnFYHb4jHKIdzxlFm6EDfijTCOT4qwUhJ3GWxfDoW2yT3z/y8xg0nE7e72unsmSj6dtfZ9Y5r75FIrlpA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-darwin-x64": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-x64/-/oxide-darwin-x64-4.1.2.tgz",
+      "integrity": "sha512-BiKUNZf1A0pBNzndBvnPnBxonCY49mgbOsPfILhcCE5RM7pQlRoOgN7QnwNhY284bDbfQSEOWnFR0zbPo6IDTw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-freebsd-x64": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-freebsd-x64/-/oxide-freebsd-x64-4.1.2.tgz",
+      "integrity": "sha512-Z30VcpUfRGkiddj4l5NRCpzbSGjhmmklVoqkVQdkEC0MOelpY+fJrVhzSaXHmWrmSvnX8yiaEqAbdDScjVujYQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-arm-gnueabihf": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm-gnueabihf/-/oxide-linux-arm-gnueabihf-4.1.2.tgz",
+      "integrity": "sha512-w3wsK1ChOLeQ3gFOiwabtWU5e8fY3P1Ss8jR3IFIn/V0va3ir//hZ8AwURveS4oK1Pu6b8i+yxesT4qWnLVUow==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-arm64-gnu": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-gnu/-/oxide-linux-arm64-gnu-4.1.2.tgz",
+      "integrity": "sha512-oY/u+xJHpndTj7B5XwtmXGk8mQ1KALMfhjWMMpE8pdVAznjJsF5KkCceJ4Fmn5lS1nHMCwZum5M3/KzdmwDMdw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-arm64-musl": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-musl/-/oxide-linux-arm64-musl-4.1.2.tgz",
+      "integrity": "sha512-k7G6vcRK/D+JOWqnKzKN/yQq1q4dCkI49fMoLcfs2pVcaUAXEqCP9NmA8Jv+XahBv5DtDjSAY3HJbjosEdKczg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-x64-gnu": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-gnu/-/oxide-linux-x64-gnu-4.1.2.tgz",
+      "integrity": "sha512-fLL+c678TkYKgkDLLNxSjPPK/SzTec7q/E5pTwvpTqrth867dftV4ezRyhPM5PaiCqX651Y8Yk0wRQMcWUGnmQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-x64-musl": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-musl/-/oxide-linux-x64-musl-4.1.2.tgz",
+      "integrity": "sha512-0tU1Vjd1WucZ2ooq6y4nI9xyTSaH2g338bhrqk+2yzkMHskBm+pMsOCfY7nEIvALkA1PKPOycR4YVdlV7Czo+A==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-win32-arm64-msvc": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-arm64-msvc/-/oxide-win32-arm64-msvc-4.1.2.tgz",
+      "integrity": "sha512-r8QaMo3QKiHqUcn+vXYCypCEha+R0sfYxmaZSgZshx9NfkY+CHz91aS2xwNV/E4dmUDkTPUag7sSdiCHPzFVTg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-win32-x64-msvc": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-x64-msvc/-/oxide-win32-x64-msvc-4.1.2.tgz",
+      "integrity": "sha512-lYCdkPxh9JRHXoBsPE8Pu/mppUsC2xihYArNAESub41PKhHTnvn6++5RpmFM+GLSt3ewyS8fwCVvht7ulWm6cw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/postcss": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/postcss/-/postcss-4.1.2.tgz",
+      "integrity": "sha512-vgkMo6QRhG6uv97im6Y4ExDdq71y9v2IGZc+0wn7lauQFYJM/1KdUVhrOkexbUso8tUsMOWALxyHVkQEbsM7gw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@alloc/quick-lru": "^5.2.0",
+        "@tailwindcss/node": "4.1.2",
+        "@tailwindcss/oxide": "4.1.2",
+        "postcss": "^8.4.41",
+        "tailwindcss": "4.1.2"
+      }
+    },
+    "node_modules/@tailwindcss/vite": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/vite/-/vite-4.1.2.tgz",
+      "integrity": "sha512-3r/ZdMW0gxY8uOx1To0lpYa4coq4CzINcCX4laM1rS340Kcn0ac4A/MMFfHN8qba51aorZMYwMcOxYk4wJ9FYg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@tailwindcss/node": "4.1.2",
+        "@tailwindcss/oxide": "4.1.2",
+        "tailwindcss": "4.1.2"
+      },
+      "peerDependencies": {
+        "vite": "^5.2.0 || ^6"
+      }
+    },
     "node_modules/@tanstack/query-core": {
       "version": "5.87.0",
       "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.87.0.tgz",
@@ -4783,34 +4979,6 @@
         "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
-    "node_modules/any-promise": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz",
-      "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/anymatch": {
-      "version": "3.1.3",
-      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
-      "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "normalize-path": "^3.0.0",
-        "picomatch": "^2.0.4"
-      },
-      "engines": {
-        "node": ">= 8"
-      }
-    },
-    "node_modules/arg": {
-      "version": "5.0.2",
-      "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
-      "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/argparse": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
@@ -4974,19 +5142,6 @@
       ],
       "license": "MIT"
     },
-    "node_modules/binary-extensions": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
-      "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -5138,16 +5293,6 @@
         "node": ">=6"
       }
     },
-    "node_modules/camelcase-css": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
-      "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 6"
-      }
-    },
     "node_modules/caniuse-lite": {
       "version": "1.0.30001720",
       "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001720.tgz",
@@ -5268,44 +5413,6 @@
         "node": "*"
       }
     },
-    "node_modules/chokidar": {
-      "version": "3.6.0",
-      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
-      "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "anymatch": "~3.1.2",
-        "braces": "~3.0.2",
-        "glob-parent": "~5.1.2",
-        "is-binary-path": "~2.1.0",
-        "is-glob": "~4.0.1",
-        "normalize-path": "~3.0.0",
-        "readdirp": "~3.6.0"
-      },
-      "engines": {
-        "node": ">= 8.10.0"
-      },
-      "funding": {
-        "url": "https://paulmillr.com/funding/"
-      },
-      "optionalDependencies": {
-        "fsevents": "~2.3.2"
-      }
-    },
-    "node_modules/chokidar/node_modules/glob-parent": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
-      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "is-glob": "^4.0.1"
-      },
-      "engines": {
-        "node": ">= 6"
-      }
-    },
     "node_modules/classnames": {
       "version": "2.5.1",
       "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz",
@@ -5397,16 +5504,6 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
-    "node_modules/commander": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
-      "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 6"
-      }
-    },
     "node_modules/compute-scroll-into-view": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/compute-scroll-into-view/-/compute-scroll-into-view-2.0.4.tgz",
@@ -5469,19 +5566,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/cssesc": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
-      "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
-      "dev": true,
-      "license": "MIT",
-      "bin": {
-        "cssesc": "bin/cssesc"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
     "node_modules/cssstyle": {
       "version": "4.3.1",
       "resolved": "https://registry.npmjs.org/cssstyle/-/cssstyle-4.3.1.tgz",
@@ -5691,6 +5775,16 @@
         "node": ">=6"
       }
     },
+    "node_modules/detect-libc": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz",
+      "integrity": "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/detect-node-es": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/detect-node-es/-/detect-node-es-1.1.0.tgz",
@@ -5710,13 +5804,6 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
-    "node_modules/didyoumean": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
-      "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==",
-      "dev": true,
-      "license": "Apache-2.0"
-    },
     "node_modules/diff": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/diff/-/diff-4.0.2.tgz",
@@ -5750,13 +5837,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/dlv": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
-      "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/dnd-core": {
       "version": "16.0.1",
       "resolved": "https://registry.npmjs.org/dnd-core/-/dnd-core-16.0.1.tgz",
@@ -5831,13 +5911,6 @@
         "node": ">= 0.4"
       }
     },
-    "node_modules/eastasianwidth": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
-      "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/electron-to-chromium": {
       "version": "1.5.161",
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.161.tgz",
@@ -5845,12 +5918,19 @@
       "dev": true,
       "license": "ISC"
     },
-    "node_modules/emoji-regex": {
-      "version": "9.2.2",
-      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
-      "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
+    "node_modules/enhanced-resolve": {
+      "version": "5.18.3",
+      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.18.3.tgz",
+      "integrity": "sha512-d4lC8xfavMeBjzGr2vECC3fsGXziXZQyJxD868h2M/mBI3PwAuODxAkLkq5HYuvrPYcUtiLzsTo8U3PgX3Ocww==",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "dependencies": {
+        "graceful-fs": "^4.2.4",
+        "tapable": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
     },
     "node_modules/entities": {
       "version": "6.0.0",
@@ -6512,23 +6592,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/foreground-child": {
-      "version": "3.3.1",
-      "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.3.1.tgz",
-      "integrity": "sha512-gIXjKqtFuWEgzFRJA9WCQeSJLZDjgJUOMCMzxtvFq/37KojM1BFGufqsCy0r4qSQmYLsZYMeyRqzIWOMup03sw==",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "cross-spawn": "^7.0.6",
-        "signal-exit": "^4.0.1"
-      },
-      "engines": {
-        "node": ">=14"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
     "node_modules/form-data": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.2.tgz",
@@ -6805,6 +6868,13 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/graceful-fs": {
+      "version": "4.2.11",
+      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
+      "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
+      "dev": true,
+      "license": "ISC"
+    },
     "node_modules/graphemer": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/graphemer/-/graphemer-1.4.0.tgz",
@@ -7214,19 +7284,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/is-binary-path": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
-      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "binary-extensions": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/is-boolean-object": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/is-boolean-object/-/is-boolean-object-1.2.2.tgz",
@@ -7257,22 +7314,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/is-core-module": {
-      "version": "2.16.1",
-      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.16.1.tgz",
-      "integrity": "sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "hasown": "^2.0.2"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
     "node_modules/is-date-object": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/is-date-object/-/is-date-object-1.1.0.tgz",
@@ -7310,16 +7351,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/is-fullwidth-code-point": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
-      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/is-glob": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
@@ -7617,30 +7648,14 @@
         "node": ">=8"
       }
     },
-    "node_modules/jackspeak": {
-      "version": "3.4.3",
-      "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-3.4.3.tgz",
-      "integrity": "sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==",
-      "dev": true,
-      "license": "BlueOak-1.0.0",
-      "dependencies": {
-        "@isaacs/cliui": "^8.0.2"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      },
-      "optionalDependencies": {
-        "@pkgjs/parseargs": "^0.11.0"
-      }
-    },
     "node_modules/jiti": {
-      "version": "1.21.7",
-      "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.7.tgz",
-      "integrity": "sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==",
+      "version": "2.6.1",
+      "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.6.1.tgz",
+      "integrity": "sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ==",
       "dev": true,
       "license": "MIT",
       "bin": {
-        "jiti": "bin/jiti.js"
+        "jiti": "lib/jiti-cli.mjs"
       }
     },
     "node_modules/js-tokens": {
@@ -7810,25 +7825,244 @@
         "url": "https://github.com/sponsors/dmonad"
       }
     },
-    "node_modules/lilconfig": {
-      "version": "3.1.3",
-      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.3.tgz",
-      "integrity": "sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==",
+    "node_modules/lightningcss": {
+      "version": "1.29.2",
+      "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.29.2.tgz",
+      "integrity": "sha512-6b6gd/RUXKaw5keVdSEtqFVdzWnU5jMxTUjA2bVcMNPLwSQ08Sv/UodBVtETLCn7k4S1Ibxwh7k68IwLZPgKaA==",
       "dev": true,
-      "license": "MIT",
+      "license": "MPL-2.0",
+      "dependencies": {
+        "detect-libc": "^2.0.3"
+      },
       "engines": {
-        "node": ">=14"
+        "node": ">= 12.0.0"
       },
       "funding": {
-        "url": "https://github.com/sponsors/antonk52"
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      },
+      "optionalDependencies": {
+        "lightningcss-darwin-arm64": "1.29.2",
+        "lightningcss-darwin-x64": "1.29.2",
+        "lightningcss-freebsd-x64": "1.29.2",
+        "lightningcss-linux-arm-gnueabihf": "1.29.2",
+        "lightningcss-linux-arm64-gnu": "1.29.2",
+        "lightningcss-linux-arm64-musl": "1.29.2",
+        "lightningcss-linux-x64-gnu": "1.29.2",
+        "lightningcss-linux-x64-musl": "1.29.2",
+        "lightningcss-win32-arm64-msvc": "1.29.2",
+        "lightningcss-win32-x64-msvc": "1.29.2"
       }
     },
-    "node_modules/lines-and-columns": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
-      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
+    "node_modules/lightningcss-darwin-arm64": {
+      "version": "1.29.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.29.2.tgz",
+      "integrity": "sha512-cK/eMabSViKn/PG8U/a7aCorpeKLMlK0bQeNHmdb7qUnBkNPnL+oV5DjJUo0kqWsJUapZsM4jCfYItbqBDvlcA==",
+      "cpu": [
+        "arm64"
+      ],
       "dev": true,
-      "license": "MIT"
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-darwin-x64": {
+      "version": "1.29.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.29.2.tgz",
+      "integrity": "sha512-j5qYxamyQw4kDXX5hnnCKMf3mLlHvG44f24Qyi2965/Ycz829MYqjrVg2H8BidybHBp9kom4D7DR5VqCKDXS0w==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-freebsd-x64": {
+      "version": "1.29.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.29.2.tgz",
+      "integrity": "sha512-wDk7M2tM78Ii8ek9YjnY8MjV5f5JN2qNVO+/0BAGZRvXKtQrBC4/cn4ssQIpKIPP44YXw6gFdpUF+Ps+RGsCwg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm-gnueabihf": {
+      "version": "1.29.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.29.2.tgz",
+      "integrity": "sha512-IRUrOrAF2Z+KExdExe3Rz7NSTuuJ2HvCGlMKoquK5pjvo2JY4Rybr+NrKnq0U0hZnx5AnGsuFHjGnNT14w26sg==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm64-gnu": {
+      "version": "1.29.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.29.2.tgz",
+      "integrity": "sha512-KKCpOlmhdjvUTX/mBuaKemp0oeDIBBLFiU5Fnqxh1/DZ4JPZi4evEH7TKoSBFOSOV3J7iEmmBaw/8dpiUvRKlQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm64-musl": {
+      "version": "1.29.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.29.2.tgz",
+      "integrity": "sha512-Q64eM1bPlOOUgxFmoPUefqzY1yV3ctFPE6d/Vt7WzLW4rKTv7MyYNky+FWxRpLkNASTnKQUaiMJ87zNODIrrKQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-x64-gnu": {
+      "version": "1.29.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.29.2.tgz",
+      "integrity": "sha512-0v6idDCPG6epLXtBH/RPkHvYx74CVziHo6TMYga8O2EiQApnUPZsbR9nFNrg2cgBzk1AYqEd95TlrsL7nYABQg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-x64-musl": {
+      "version": "1.29.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.29.2.tgz",
+      "integrity": "sha512-rMpz2yawkgGT8RULc5S4WiZopVMOFWjiItBT7aSfDX4NQav6M44rhn5hjtkKzB+wMTRlLLqxkeYEtQ3dd9696w==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-win32-arm64-msvc": {
+      "version": "1.29.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.29.2.tgz",
+      "integrity": "sha512-nL7zRW6evGQqYVu/bKGK+zShyz8OVzsCotFgc7judbt6wnB2KbiKKJwBE4SGoDBQ1O94RjW4asrCjQL4i8Fhbw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-win32-x64-msvc": {
+      "version": "1.29.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.29.2.tgz",
+      "integrity": "sha512-EdIUW3B2vLuHmv7urfzMI/h2fmlnOQBk1xlsDxkN1tCWKjNFjfLhGxYk8C8mzpSfr+A6jFFIi8fU6LbQGsRWjA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
     },
     "node_modules/local-pkg": {
       "version": "0.5.1",
@@ -9066,16 +9300,6 @@
         "node": "*"
       }
     },
-    "node_modules/minipass": {
-      "version": "7.1.2",
-      "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz",
-      "integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==",
-      "dev": true,
-      "license": "ISC",
-      "engines": {
-        "node": ">=16 || 14 >=14.17"
-      }
-    },
     "node_modules/mlly": {
       "version": "1.7.4",
       "resolved": "https://registry.npmjs.org/mlly/-/mlly-1.7.4.tgz",
@@ -9136,18 +9360,6 @@
       "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
       "license": "MIT"
     },
-    "node_modules/mz": {
-      "version": "2.7.0",
-      "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
-      "integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "any-promise": "^1.0.0",
-        "object-assign": "^4.0.1",
-        "thenify-all": "^1.0.0"
-      }
-    },
     "node_modules/nanoid": {
       "version": "5.1.5",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-5.1.5.tgz",
@@ -9186,16 +9398,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/normalize-path": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
-      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/normalize-range": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
@@ -9251,16 +9453,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/object-hash": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz",
-      "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 6"
-      }
-    },
     "node_modules/object-inspect": {
       "version": "1.13.4",
       "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.4.tgz",
@@ -9404,13 +9596,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/package-json-from-dist": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/package-json-from-dist/-/package-json-from-dist-1.0.1.tgz",
-      "integrity": "sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==",
-      "dev": true,
-      "license": "BlueOak-1.0.0"
-    },
     "node_modules/parent-module": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
@@ -9492,37 +9677,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/path-parse": {
-      "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
-      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/path-scurry": {
-      "version": "1.11.1",
-      "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-1.11.1.tgz",
-      "integrity": "sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==",
-      "dev": true,
-      "license": "BlueOak-1.0.0",
-      "dependencies": {
-        "lru-cache": "^10.2.0",
-        "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0"
-      },
-      "engines": {
-        "node": ">=16 || 14 >=14.18"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
-    "node_modules/path-scurry/node_modules/lru-cache": {
-      "version": "10.4.3",
-      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.3.tgz",
-      "integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==",
-      "dev": true,
-      "license": "ISC"
-    },
     "node_modules/path-type": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
@@ -9570,26 +9724,6 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
-    "node_modules/pify": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
-      "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/pirates": {
-      "version": "4.0.7",
-      "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.7.tgz",
-      "integrity": "sha512-TfySrs/5nm8fQJDcBDuUng3VOUKsd7S+zqvbOTiGXHfxX4wK31ard+hoNuvkicM/2YFzlpDgABOevKSsB4G/FA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 6"
-      }
-    },
     "node_modules/pkg-types": {
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/pkg-types/-/pkg-types-1.3.1.tgz",
@@ -9648,120 +9782,6 @@
         "node": "^10 || ^12 || >=14"
       }
     },
-    "node_modules/postcss-import": {
-      "version": "15.1.0",
-      "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz",
-      "integrity": "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "postcss-value-parser": "^4.0.0",
-        "read-cache": "^1.0.0",
-        "resolve": "^1.1.7"
-      },
-      "engines": {
-        "node": ">=14.0.0"
-      },
-      "peerDependencies": {
-        "postcss": "^8.0.0"
-      }
-    },
-    "node_modules/postcss-js": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.1.tgz",
-      "integrity": "sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "camelcase-css": "^2.0.1"
-      },
-      "engines": {
-        "node": "^12 || ^14 || >= 16"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/postcss/"
-      },
-      "peerDependencies": {
-        "postcss": "^8.4.21"
-      }
-    },
-    "node_modules/postcss-load-config": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-4.0.2.tgz",
-      "integrity": "sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/postcss/"
-        },
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ],
-      "license": "MIT",
-      "dependencies": {
-        "lilconfig": "^3.0.0",
-        "yaml": "^2.3.4"
-      },
-      "engines": {
-        "node": ">= 14"
-      },
-      "peerDependencies": {
-        "postcss": ">=8.0.9",
-        "ts-node": ">=9.0.0"
-      },
-      "peerDependenciesMeta": {
-        "postcss": {
-          "optional": true
-        },
-        "ts-node": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/postcss-nested": {
-      "version": "6.2.0",
-      "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.2.0.tgz",
-      "integrity": "sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/postcss/"
-        },
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ],
-      "license": "MIT",
-      "dependencies": {
-        "postcss-selector-parser": "^6.1.1"
-      },
-      "engines": {
-        "node": ">=12.0"
-      },
-      "peerDependencies": {
-        "postcss": "^8.2.14"
-      }
-    },
-    "node_modules/postcss-selector-parser": {
-      "version": "6.1.2",
-      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz",
-      "integrity": "sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "cssesc": "^3.0.0",
-        "util-deprecate": "^1.0.2"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
     "node_modules/postcss-value-parser": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
@@ -10162,29 +10182,6 @@
         }
       }
     },
-    "node_modules/read-cache": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
-      "integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "pify": "^2.3.0"
-      }
-    },
-    "node_modules/readdirp": {
-      "version": "3.6.0",
-      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
-      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "picomatch": "^2.2.1"
-      },
-      "engines": {
-        "node": ">=8.10.0"
-      }
-    },
     "node_modules/redent": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/redent/-/redent-3.0.0.tgz",
@@ -10269,27 +10266,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/resolve": {
-      "version": "1.22.10",
-      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.10.tgz",
-      "integrity": "sha512-NPRy+/ncIMeDlTAsuqwKIiferiawhefFJtkNSW0qZJEqMEb+qBt/77B/jGeeek+F0uOeN05CDa6HXbbIgtVX4w==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "is-core-module": "^2.16.0",
-        "path-parse": "^1.0.7",
-        "supports-preserve-symlinks-flag": "^1.0.0"
-      },
-      "bin": {
-        "resolve": "bin/resolve"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
     "node_modules/resolve-from": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
@@ -10715,76 +10691,6 @@
       "integrity": "sha512-12KWeb+wixJohmnwNFerbyiBrAlq5qJLwIt38etRtKtmmHyDSoGlIqFE9wx+4IwG0aDjI7GV8tc8ZccjWZZtTg==",
       "license": "MIT"
     },
-    "node_modules/string-width": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
-      "integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "eastasianwidth": "^0.2.0",
-        "emoji-regex": "^9.2.2",
-        "strip-ansi": "^7.0.1"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/string-width-cjs": {
-      "name": "string-width",
-      "version": "4.2.3",
-      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
-      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "emoji-regex": "^8.0.0",
-        "is-fullwidth-code-point": "^3.0.0",
-        "strip-ansi": "^6.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/string-width-cjs/node_modules/emoji-regex": {
-      "version": "8.0.0",
-      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
-      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/string-width/node_modules/ansi-regex": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.1.0.tgz",
-      "integrity": "sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
-      }
-    },
-    "node_modules/string-width/node_modules/strip-ansi": {
-      "version": "7.1.0",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
-      "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "ansi-regex": "^6.0.1"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
-      }
-    },
     "node_modules/stringify-entities": {
       "version": "4.0.4",
       "resolved": "https://registry.npmjs.org/stringify-entities/-/stringify-entities-4.0.4.tgz",
@@ -10812,20 +10718,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/strip-ansi-cjs": {
-      "name": "strip-ansi",
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
-      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "ansi-regex": "^5.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/strip-final-newline": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/strip-final-newline/-/strip-final-newline-3.0.0.tgz",
@@ -10909,76 +10801,6 @@
         "inline-style-parser": "0.2.4"
       }
     },
-    "node_modules/sucrase": {
-      "version": "3.35.0",
-      "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.0.tgz",
-      "integrity": "sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@jridgewell/gen-mapping": "^0.3.2",
-        "commander": "^4.0.0",
-        "glob": "^10.3.10",
-        "lines-and-columns": "^1.1.6",
-        "mz": "^2.7.0",
-        "pirates": "^4.0.1",
-        "ts-interface-checker": "^0.1.9"
-      },
-      "bin": {
-        "sucrase": "bin/sucrase",
-        "sucrase-node": "bin/sucrase-node"
-      },
-      "engines": {
-        "node": ">=16 || 14 >=14.17"
-      }
-    },
-    "node_modules/sucrase/node_modules/brace-expansion": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
-      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "balanced-match": "^1.0.0"
-      }
-    },
-    "node_modules/sucrase/node_modules/glob": {
-      "version": "10.4.5",
-      "resolved": "https://registry.npmjs.org/glob/-/glob-10.4.5.tgz",
-      "integrity": "sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "foreground-child": "^3.1.0",
-        "jackspeak": "^3.1.2",
-        "minimatch": "^9.0.4",
-        "minipass": "^7.1.2",
-        "package-json-from-dist": "^1.0.0",
-        "path-scurry": "^1.11.1"
-      },
-      "bin": {
-        "glob": "dist/esm/bin.mjs"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
-    "node_modules/sucrase/node_modules/minimatch": {
-      "version": "9.0.5",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
-      "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "brace-expansion": "^2.0.1"
-      },
-      "engines": {
-        "node": ">=16 || 14 >=14.17"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
     "node_modules/supports-color": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -10992,19 +10814,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/supports-preserve-symlinks-flag": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
-      "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
     "node_modules/symbol-tree": {
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
@@ -11029,41 +10838,24 @@
       }
     },
     "node_modules/tailwindcss": {
-      "version": "3.4.17",
-      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.17.tgz",
-      "integrity": "sha512-w33E2aCvSDP0tW9RZuNXadXlkHXqFzSkQew/aIa2i/Sj8fThxwovwlXHSPXTbAHwEIhBFXAedUhP2tueAKP8Og==",
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.2.tgz",
+      "integrity": "sha512-VCsK+fitIbQF7JlxXaibFhxrPq4E2hDcG8apzHUdWFMCQWD8uLdlHg4iSkZ53cgLCCcZ+FZK7vG8VjvLcnBgKw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/tapable": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.3.0.tgz",
+      "integrity": "sha512-g9ljZiwki/LfxmQADO3dEY1CbpmXT5Hm2fJ+QaGKwSXUylMybePR7/67YW7jOrrvjEgL1Fmz5kzyAjWVWLlucg==",
       "dev": true,
       "license": "MIT",
-      "dependencies": {
-        "@alloc/quick-lru": "^5.2.0",
-        "arg": "^5.0.2",
-        "chokidar": "^3.6.0",
-        "didyoumean": "^1.2.2",
-        "dlv": "^1.1.3",
-        "fast-glob": "^3.3.2",
-        "glob-parent": "^6.0.2",
-        "is-glob": "^4.0.3",
-        "jiti": "^1.21.6",
-        "lilconfig": "^3.1.3",
-        "micromatch": "^4.0.8",
-        "normalize-path": "^3.0.0",
-        "object-hash": "^3.0.0",
-        "picocolors": "^1.1.1",
-        "postcss": "^8.4.47",
-        "postcss-import": "^15.1.0",
-        "postcss-js": "^4.0.1",
-        "postcss-load-config": "^4.0.2",
-        "postcss-nested": "^6.2.0",
-        "postcss-selector-parser": "^6.1.2",
-        "resolve": "^1.22.8",
-        "sucrase": "^3.35.0"
-      },
-      "bin": {
-        "tailwind": "lib/cli.js",
-        "tailwindcss": "lib/cli.js"
-      },
       "engines": {
-        "node": ">=14.0.0"
+        "node": ">=6"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
       }
     },
     "node_modules/test-exclude": {
@@ -11088,29 +10880,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/thenify": {
-      "version": "3.3.1",
-      "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
-      "integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "any-promise": "^1.0.0"
-      }
-    },
-    "node_modules/thenify-all": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz",
-      "integrity": "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "thenify": ">= 3.1.0 < 4"
-      },
-      "engines": {
-        "node": ">=0.8"
-      }
-    },
     "node_modules/tinybench": {
       "version": "2.9.0",
       "resolved": "https://registry.npmjs.org/tinybench/-/tinybench-2.9.0.tgz",
@@ -11223,13 +10992,6 @@
         "typescript": ">=4.2.0"
       }
     },
-    "node_modules/ts-interface-checker": {
-      "version": "0.1.13",
-      "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
-      "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==",
-      "dev": true,
-      "license": "Apache-2.0"
-    },
     "node_modules/ts-node": {
       "version": "10.9.2",
       "resolved": "https://registry.npmjs.org/ts-node/-/ts-node-10.9.2.tgz",
@@ -11580,13 +11342,6 @@
         }
       }
     },
-    "node_modules/util-deprecate": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
-      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/uvu": {
       "version": "0.5.6",
       "resolved": "https://registry.npmjs.org/uvu/-/uvu-0.5.6.tgz",
@@ -11968,107 +11723,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/wrap-ansi": {
-      "version": "8.1.0",
-      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz",
-      "integrity": "sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "ansi-styles": "^6.1.0",
-        "string-width": "^5.0.1",
-        "strip-ansi": "^7.0.1"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
-      }
-    },
-    "node_modules/wrap-ansi-cjs": {
-      "name": "wrap-ansi",
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
-      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "ansi-styles": "^4.0.0",
-        "string-width": "^4.1.0",
-        "strip-ansi": "^6.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
-      }
-    },
-    "node_modules/wrap-ansi-cjs/node_modules/emoji-regex": {
-      "version": "8.0.0",
-      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
-      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/wrap-ansi-cjs/node_modules/string-width": {
-      "version": "4.2.3",
-      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
-      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "emoji-regex": "^8.0.0",
-        "is-fullwidth-code-point": "^3.0.0",
-        "strip-ansi": "^6.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/wrap-ansi/node_modules/ansi-regex": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.1.0.tgz",
-      "integrity": "sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
-      }
-    },
-    "node_modules/wrap-ansi/node_modules/ansi-styles": {
-      "version": "6.2.1",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.1.tgz",
-      "integrity": "sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
-      }
-    },
-    "node_modules/wrap-ansi/node_modules/strip-ansi": {
-      "version": "7.1.0",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
-      "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "ansi-regex": "^6.0.1"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
-      }
-    },
     "node_modules/wrappy": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
@@ -12122,19 +11776,6 @@
       "dev": true,
       "license": "ISC"
     },
-    "node_modules/yaml": {
-      "version": "2.8.0",
-      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.8.0.tgz",
-      "integrity": "sha512-4lLa/EcQCB0cJkyts+FpIRx5G/llPxfP6VQU5KByHEhLxY3IJCH0f0Hy1MHI8sClTvsIb8qwRJ6R/ZdlDJ/leQ==",
-      "dev": true,
-      "license": "ISC",
-      "bin": {
-        "yaml": "bin.mjs"
-      },
-      "engines": {
-        "node": ">= 14.6"
-      }
-    },
     "node_modules/yjs": {
       "version": "13.6.27",
       "resolved": "https://registry.npmjs.org/yjs/-/yjs-13.6.27.tgz",
diff --git a/archon-ui-main/package.json b/archon-ui-main/package.json
index c2cd7be3..9856d9d0 100644
--- a/archon-ui-main/package.json
+++ b/archon-ui-main/package.json
@@ -77,8 +77,10 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.1",
     "jsdom": "^24.1.0",
+    "@tailwindcss/postcss": "4.1.2",
+    "@tailwindcss/vite": "4.1.2",
     "postcss": "latest",
-    "tailwindcss": "3.4.17",
+    "tailwindcss": "4.1.2",
     "ts-node": "^10.9.1",
     "typescript": "^5.5.4",
     "vite": "^5.2.0",
diff --git a/archon-ui-main/postcss.config.js b/archon-ui-main/postcss.config.js
index 2e7af2b7..1c878468 100644
--- a/archon-ui-main/postcss.config.js
+++ b/archon-ui-main/postcss.config.js
@@ -1,6 +1,6 @@
 export default {
   plugins: {
-    tailwindcss: {},
+    '@tailwindcss/postcss': {},
     autoprefixer: {},
   },
 }
diff --git a/archon-ui-main/src/features/style-guide/layouts/KnowledgeLayoutExample.tsx b/archon-ui-main/src/features/style-guide/layouts/KnowledgeLayoutExample.tsx
index bc26125d..7594ee65 100644
--- a/archon-ui-main/src/features/style-guide/layouts/KnowledgeLayoutExample.tsx
+++ b/archon-ui-main/src/features/style-guide/layouts/KnowledgeLayoutExample.tsx
@@ -205,7 +205,7 @@ const KnowledgeCard = ({ item }: { item: typeof MOCK_KNOWLEDGE_ITEMS[0] }) => {
     <DataCard
       edgePosition="top"
       edgeColor={getEdgeColor()}
-      blur="lg"
+      blur="md"
       className="cursor-pointer hover:shadow-[0_0_30px_rgba(6,182,212,0.2)] transition-shadow"
     >
       <DataCardHeader>
diff --git a/archon-ui-main/src/features/style-guide/layouts/ProjectsLayoutExample.tsx b/archon-ui-main/src/features/style-guide/layouts/ProjectsLayoutExample.tsx
index b54d25db..9d83d9b3 100644
--- a/archon-ui-main/src/features/style-guide/layouts/ProjectsLayoutExample.tsx
+++ b/archon-ui-main/src/features/style-guide/layouts/ProjectsLayoutExample.tsx
@@ -97,7 +97,7 @@ export const ProjectsLayoutExample = () => {
         <>
           {/* Horizontal Project Cards - ONLY cards scroll, not whole page */}
           <div className="w-full">
-            <div className="overflow-x-auto overflow-y-visible py-8 -mx-6 px-6">
+            <div className="overflow-x-auto overflow-y-visible py-8 -mx-6 px-6 scrollbar-hide">
               <div className="flex gap-4 min-w-max">
                 {MOCK_PROJECTS.map((project) => (
                   <ProjectCardExample
@@ -255,17 +255,24 @@ const SidebarProjectCard = ({
   isSelected: boolean;
   onSelect: () => void;
 }) => {
+  const getBackgroundClass = () => {
+    if (project.pinned) return "bg-gradient-to-b from-purple-100/80 via-purple-50/30 to-purple-100/50 dark:from-purple-900/30 dark:via-purple-900/20 dark:to-purple-900/10";
+    if (isSelected) return "bg-gradient-to-b from-white/70 via-purple-50/20 to-white/50 dark:from-white/5 dark:via-purple-900/5 dark:to-black/20";
+    return "bg-gradient-to-b from-white/80 to-white/60 dark:from-white/10 dark:to-black/30";
+  };
+
   return (
-    <Card
+    <SelectableCard
+      isSelected={isSelected}
+      isPinned={project.pinned}
+      showAuroraGlow={isSelected}
+      onSelect={onSelect}
+      size="none"
       blur="md"
-      transparency="light"
       className={cn(
-        "cursor-pointer transition-all duration-200 p-3",
-        isSelected
-          ? "border-purple-500/60 shadow-[0_0_12px_rgba(168,85,247,0.4)]"
-          : "border-gray-300/20 dark:border-white/10 hover:border-purple-400/40 hover:shadow-[0_0_8px_rgba(168,85,247,0.2)]",
+        "p-2",
+        getBackgroundClass(),
       )}
-      onClick={onSelect}
     >
       <div className="space-y-2">
         {/* Title */}
@@ -305,7 +312,7 @@ const SidebarProjectCard = ({
           />
         </div>
       </div>
-    </Card>
+    </SelectableCard>
   );
 };
 
@@ -335,7 +342,7 @@ const ProjectCardExample = ({
       size="none"
       blur="xl"
       className={cn(
-        "w-72 min-h-[180px] flex flex-col",
+        "w-72 min-h-[180px] flex flex-col shrink-0",
         getBackgroundClass(),
       )}
     >
@@ -497,7 +504,7 @@ const KanbanBoardView = () => {
 
   return (
     <DndProvider backend={HTML5Backend}>
-      <div className="grid grid-cols-4 gap-2 min-h-[500px]">
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-2 min-h-[500px]">
         {columns.map(({ status, title, color, glow }) => (
           <div key={status} className="flex flex-col">
             {/* Column Header - transparent */}
diff --git a/archon-ui-main/src/features/style-guide/layouts/SettingsLayoutExample.tsx b/archon-ui-main/src/features/style-guide/layouts/SettingsLayoutExample.tsx
index 4b9ebfde..5970aaba 100644
--- a/archon-ui-main/src/features/style-guide/layouts/SettingsLayoutExample.tsx
+++ b/archon-ui-main/src/features/style-guide/layouts/SettingsLayoutExample.tsx
@@ -23,7 +23,7 @@ export const SettingsLayoutExample = () => {
           accentColor="purple"
           defaultExpanded={true}
         >
-          <div className="grid grid-cols-2 gap-4">
+          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
             {/* Dark Mode */}
             <div className="flex items-center gap-4 p-4 rounded-xl bg-gradient-to-br from-purple-500/10 to-purple-600/5 backdrop-blur-sm border border-purple-500/20 shadow-lg">
               <div className="flex-1 min-w-0">
diff --git a/archon-ui-main/src/features/style-guide/tabs/LayoutsTab.tsx b/archon-ui-main/src/features/style-guide/tabs/LayoutsTab.tsx
index 31db2de6..fd5e77df 100644
--- a/archon-ui-main/src/features/style-guide/tabs/LayoutsTab.tsx
+++ b/archon-ui-main/src/features/style-guide/tabs/LayoutsTab.tsx
@@ -100,7 +100,7 @@ export const LayoutsTab = () => {
       />
 
       {/* Main Content */}
-      <div className="flex-1 max-w-6xl">{renderContent()}</div>
+      <div className="flex-1 min-w-0 max-w-6xl">{renderContent()}</div>
     </div>
   );
 };
diff --git a/archon-ui-main/src/features/ui/primitives/data-card.tsx b/archon-ui-main/src/features/ui/primitives/data-card.tsx
index fbe4f464..b52e6a0d 100644
--- a/archon-ui-main/src/features/ui/primitives/data-card.tsx
+++ b/archon-ui-main/src/features/ui/primitives/data-card.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { cn } from "./styles";
+import { cn, glassCard } from "./styles";
 
 interface DataCardProps extends React.HTMLAttributes<HTMLDivElement> {
   // Edge-lit properties
diff --git a/archon-ui-main/src/index.css b/archon-ui-main/src/index.css
index 0dde10c9..be3ca9dd 100644
--- a/archon-ui-main/src/index.css
+++ b/archon-ui-main/src/index.css
@@ -1,62 +1,109 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-@layer base {
-  :root {
-    /* Light mode variables */
-    --background: 0 0% 98%;
-    --foreground: 240 10% 3.9%;
-    --muted: 240 4.8% 95.9%;
-    --muted-foreground: 240 3.8% 46.1%;
-    --popover: 0 0% 100%;
-    --popover-foreground: 240 10% 3.9%;
-    --border: 240 5.9% 90%;
-    --input: 240 5.9% 90%;
-    --card: 0 0% 100%;
-    --card-foreground: 240 10% 3.9%;
-    --primary: 271 91% 65%;
-    --primary-foreground: 0 0% 100%;
-    --secondary: 240 4.8% 95.9%;
-    --secondary-foreground: 240 5.9% 10%;
-    --accent: 271 91% 65%;
-    --accent-foreground: 0 0% 100%;
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 0 0% 98%;
-    --ring: 240 5.9% 10%;
-    --radius: 0.5rem;
-    --purple-accent: 271 91% 65%;
-    --green-accent: 160 84% 39%;
-    --pink-accent: 330 90% 65%;
-    --blue-accent: 217 91% 60%;
-  }
-  .dark {
-    /* Dark mode variables */
-    --background: 0 0% 0%;
-    --foreground: 0 0% 100%;
-    --muted: 240 4% 16%;
-    --muted-foreground: 240 5% 65%;
-    --popover: 0 0% 0%;
-    --popover-foreground: 0 0% 100%;
-    --border: 240 3.7% 15.9%;
-    --input: 240 3.7% 15.9%;
-    --card: 0 0% 0%;
-    --card-foreground: 0 0% 100%;
-    --primary: 271 91% 65%;
-    --primary-foreground: 0 0% 100%;
-    --secondary: 240 3.7% 15.9%;
-    --secondary-foreground: 0 0% 98%;
-    --accent: 271 91% 65%;
-    --accent-foreground: 0 0% 100%;
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 0 0% 98%;
-    --ring: 240 3.7% 15.9%;
-    --radius: 0.5rem;
-    --purple-accent: 271 91% 65%;
-    --green-accent: 160 84% 39%;
-    --pink-accent: 330 90% 65%;
-    --blue-accent: 217 91% 60%;
-  }
+@import "tailwindcss";
+
+:root {
+  /* Light mode variables */
+  --background: hsl(0 0% 98%);
+  --foreground: hsl(240 10% 3.9%);
+  --muted: hsl(240 4.8% 95.9%);
+  --muted-foreground: hsl(240 3.8% 46.1%);
+  --popover: hsl(0 0% 100%);
+  --popover-foreground: hsl(240 10% 3.9%);
+  --border: hsl(240 5.9% 90%);
+  --input: hsl(240 5.9% 90%);
+  --card: hsl(0 0% 100%);
+  --card-foreground: hsl(240 10% 3.9%);
+  --primary: hsl(271 91% 65%);
+  --primary-foreground: hsl(0 0% 100%);
+  --secondary: hsl(240 4.8% 95.9%);
+  --secondary-foreground: hsl(240 5.9% 10%);
+  --accent: hsl(271 91% 65%);
+  --accent-foreground: hsl(0 0% 100%);
+  --destructive: hsl(0 84.2% 60.2%);
+  --destructive-foreground: hsl(0 0% 98%);
+  --ring: hsl(240 5.9% 10%);
+  --radius: 0.5rem;
+
+  /* Tron accent colors */
+  --purple-accent: hsl(271 91% 65%);
+  --green-accent: hsl(160 84% 39%);
+  --pink-accent: hsl(330 90% 65%);
+  --blue-accent: hsl(217 91% 60%);
+
+  color-scheme: light;
 }
+
+.dark {
+  /* Dark mode variables */
+  --background: hsl(0 0% 0%);
+  --foreground: hsl(0 0% 100%);
+  --muted: hsl(240 4% 16%);
+  --muted-foreground: hsl(240 5% 65%);
+  --popover: hsl(0 0% 0%);
+  --popover-foreground: hsl(0 0% 100%);
+  --border: hsl(240 3.7% 15.9%);
+  --input: hsl(240 3.7% 15.9%);
+  --card: hsl(0 0% 0%);
+  --card-foreground: hsl(0 0% 100%);
+  --primary: hsl(271 91% 65%);
+  --primary-foreground: hsl(0 0% 100%);
+  --secondary: hsl(240 3.7% 15.9%);
+  --secondary-foreground: hsl(0 0% 98%);
+  --accent: hsl(271 91% 65%);
+  --accent-foreground: hsl(0 0% 100%);
+  --destructive: hsl(0 84.2% 60.2%);
+  --destructive-foreground: hsl(0 0% 98%);
+  --ring: hsl(240 3.7% 15.9%);
+
+  color-scheme: dark;
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+
+  /* Border radius */
+  --radius-lg: var(--radius);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-sm: calc(var(--radius) - 4px);
+}
+
+/* Animations - defined outside @theme */
+@keyframes caret-blink {
+  0%, 70%, 100% { opacity: 1; }
+  20%, 50% { opacity: 0; }
+}
+
+@keyframes accordion-down {
+  from { height: 0; }
+  to { height: var(--radix-accordion-content-height); }
+}
+
+@keyframes accordion-up {
+  from { height: var(--radix-accordion-content-height); }
+  to { height: 0; }
+}
+
+@keyframes shimmer {
+  100% { transform: translateX(100%); }
+}
+
 @layer base {
   * {
     @apply border-border;
@@ -66,15 +113,16 @@
     font-feature-settings: "rlig" 1, "calt" 1;
   }
 }
+
 @layer components {
-  /* Grid pattern for background (actually used in MainLayout) */
+  /* Grid pattern for background (used in MainLayout) */
   .neon-grid {
     background-image:
       linear-gradient(to right, #a855f720 1px, transparent 1px),
       linear-gradient(to bottom, #a855f720 1px, transparent 1px);
     background-size: 40px 40px;
   }
-  
+
   .dark .neon-grid {
     background-image:
       linear-gradient(to right, #a855f730 1px, transparent 1px),
@@ -82,6 +130,16 @@
   }
 }
 
+/* Hide scrollbar but keep scroll functionality */
+.scrollbar-hide {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+
+.scrollbar-hide::-webkit-scrollbar {
+  display: none;
+}
+
 /* Animation delays (checked for usage) */
 .animation-delay-150 {
   animation-delay: 150ms;
diff --git a/archon-ui-main/tailwind.config.js b/archon-ui-main/tailwind.config.js
index d658626d..7c403ca3 100644
--- a/archon-ui-main/tailwind.config.js
+++ b/archon-ui-main/tailwind.config.js
@@ -1,80 +1,5 @@
-module.exports = {content: [
-  './index.html',
-  './src/**/*.{js,ts,jsx,tsx}'
-],
-  darkMode: "selector",
-  theme: {
-    container: {
-      center: true,
-      padding: "2rem",
-      screens: {
-        "2xl": "1400px",
-      },
-    },
-    extend: {
-      colors: {
-        border: "hsl(var(--border))",
-        input: "hsl(var(--input))",
-        ring: "hsl(var(--ring))",
-        background: "hsl(var(--background))",
-        foreground: "hsl(var(--foreground))",
-        primary: {
-          DEFAULT: "hsl(var(--primary))",
-          foreground: "hsl(var(--primary-foreground))",
-        },
-        secondary: {
-          DEFAULT: "hsl(var(--secondary))",
-          foreground: "hsl(var(--secondary-foreground))",
-        },
-        destructive: {
-          DEFAULT: "hsl(var(--destructive))",
-          foreground: "hsl(var(--destructive-foreground))",
-        },
-        muted: {
-          DEFAULT: "hsl(var(--muted))",
-          foreground: "hsl(var(--muted-foreground))",
-        },
-        accent: {
-          DEFAULT: "hsl(var(--accent))",
-          foreground: "hsl(var(--accent-foreground))",
-        },
-        popover: {
-          DEFAULT: "hsl(var(--popover))",
-          foreground: "hsl(var(--popover-foreground))",
-        },
-        card: {
-          DEFAULT: "hsl(var(--card))",
-          foreground: "hsl(var(--card-foreground))",
-        },
-      },
-      borderRadius: {
-        lg: "var(--radius)",
-        md: "calc(var(--radius) - 2px)",
-        sm: "calc(var(--radius) - 4px)",
-      },
-      keyframes: {
-        "caret-blink": {
-          "0%,70%,100%": { opacity: "1" },
-          "20%,50%": { opacity: "0" },
-        },
-        "accordion-down": {
-          from: { height: 0 },
-          to: { height: "var(--radix-accordion-content-height)" },
-        },
-        "accordion-up": {
-          from: { height: "var(--radix-accordion-content-height)" },
-          to: { height: 0 },
-        },
-        "shimmer": {
-          "100%": { transform: "translateX(100%)" },
-        },
-      },
-      animation: {
-        "accordion-down": "accordion-down 0.2s ease-out",
-        "accordion-up": "accordion-up 0.2s ease-out",
-        "caret-blink": "caret-blink 1.25s ease-out infinite",
-        "shimmer": "shimmer 2s infinite",
-      },
-    },
-  },
+export default {
+  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
+  // Tailwind v4 uses @theme in CSS for most configuration
+  // This config is minimal and only for content scanning
 }
\ No newline at end of file
diff --git a/archon-ui-main/vite.config.ts b/archon-ui-main/vite.config.ts
index 464f3cfb..536e56d1 100644
--- a/archon-ui-main/vite.config.ts
+++ b/archon-ui-main/vite.config.ts
@@ -2,6 +2,7 @@
 import path from "path";
 import { defineConfig, loadEnv } from "vite";
 import react from "@vitejs/plugin-react";
+import tailwindcss from "@tailwindcss/vite";
 import { exec } from 'child_process';
 import { readFile } from 'fs/promises';
 import { existsSync, mkdirSync } from 'fs';
@@ -25,6 +26,7 @@ export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
   
   return {
     plugins: [
+      tailwindcss(),
       react(),
       // Custom plugin to add test endpoint
       {