Vertice restyle: fullscreen layout, lime/gray palette, mini-canvas project cards

- Token swap to near-black grays + lime accent + yellow secondary across
  index.css, all shared chart/card components, and every feature page
- PlatformShell: 62px icon rail, 46px telemetry ticker topbar, containr
  wordmark, env pill; mobile header preserved
- ProjectsPage rebuilt: cursor heading, host stat row (CPU sparkline,
  MEM/DISK meters, DEPLOYS), Railway-style mini-canvas project cards,
  mono deployment feed table
- All layout-level max-w-[1400px] caps removed -> w-full px-8
- New lime containr.svg synced to public/, root, and dist
- Auth glow, chart series colors, service-type colors retuned to palette
- Demo mode now seeds representative host telemetry
- Smoke test updated for new heading/copy

Generated with [Devin](https://devin.ai)

Co-Authored-By: Devin <158243242+devin-ai-integration[bot]@users.noreply.github.com>

app/frontend/src/shared/components/Button.tsx

@@ -13,7 +13,7 @@ type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
 };
 
 const variantStyles: Record<ButtonVariant, string> = {
-  primary: 'text-white shadow-lg hover:shadow-xl hover:scale-[1.02] active:scale-[0.98]',
+  primary: 'text-[var(--accent-on)] shadow-lg hover:shadow-xl hover:scale-[1.02] active:scale-[0.98]',
   secondary: 'border border-[var(--border-subtle)] bg-[var(--surface-card)] text-[var(--text-primary)] hover:border-[var(--border-default)] hover:bg-[var(--surface-card-hover)] active:scale-[0.98]',
   ghost: 'text-[var(--text-secondary)] hover:text-[var(--text-primary)] hover:bg-[var(--surface-muted)] active:scale-[0.98]',
   danger: 'border border-[var(--error-soft)] text-[var(--error)] hover:bg-[var(--error-soft)] hover:shadow-lg hover:shadow-[var(--error-glow)] active:scale-[0.98]',
@@ -56,7 +56,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
           ${sizeStyles[size]}
           ${className}
         `}
-        style={variant === 'primary' ? { background: '#e8316a' } : undefined}
+        style={variant === 'primary' ? { background: 'var(--accent-primary)' } : undefined}
         {...props}
       >
         {loading ? (

app/frontend/src/shared/components/Charts.tsx

@@ -68,7 +68,7 @@ function gradientId(prefix: string, color: string, index = 0) {
 
 export function LineChart({
   data,
-  color = '#ff7043',
+  color = '#b4e34a',
   fillColor = 'transparent',
   height = 76,
   showDots = true,
@@ -96,7 +96,7 @@ export function LineChart({
 
 export function LineAreaChart({
   data,
-  color = '#e8316a',
+  color = 'var(--accent-primary)',
   fillOpacity = 0.15,
   height = 130,
 }: LineAreaChartProps) {
@@ -181,7 +181,7 @@ export function MultiLineChart({
 
 export function LineMetricChart({
   data,
-  color = '#ff7043',
+  color = '#b4e34a',
   fillOpacity = 0.15,
   height = 76,
   showArea = false,
@@ -204,8 +204,8 @@ export function DualLineChart({
   data1,
   data2,
   height = 58,
-  color1 = '#6c8ef0',
-  color2 = '#9c7ef0',
+  color1 = '#7ab8ff',
+  color2 = '#f2c94c',
   fillOpacity1 = 0.15,
   fillOpacity2 = 0.15,
 }: DualLineChartProps) {
@@ -222,7 +222,7 @@ export function DualLineChart({
 
 export function BarChart({
   data,
-  color = '#3dd68c',
+  color = '#5ee6a0',
   height = 128,
   gap = 4,
 }: BarChartProps) {

app/frontend/src/shared/components/DonutChart.tsx

@@ -17,7 +17,7 @@ export function DonutChart({
   percentage,
   size = 160,
   thickness = 16,
-  color = '#9c7ef0',
+  color = '#b4e34a',
   trackColor = 'rgba(255, 255, 255, 0.07)',
   segments = 28,
   gap = 0.048,

app/frontend/src/shared/components/EnhancedMetricCard.tsx

@@ -30,9 +30,9 @@ export function EnhancedMetricCard({
   horizontal = false,
 }: EnhancedMetricCardProps) {
   const statusColors: Record<string, string> = {
-    good: '#3dd68c',
-    average: '#f0a040',
-    warning: '#ff7043',
+    good: '#5ee6a0',
+    average: '#f2c94c',
+    warning: '#f2c94c',
   };
 
   // Horizontal layout for cards like Active User
@@ -216,7 +216,7 @@ export function CacheMetricCard({
       </div>
 
       <div style={{ fontSize: 12, color: '#6b6e7d', marginTop: 4 }}>
-        <span style={{ color: '#f0a040', fontWeight: 700 }}>{Math.round(totalMB * 0.625)}MB Average</span> cached images and files
+        <span style={{ color: '#f2c94c', fontWeight: 700 }}>{Math.round(totalMB * 0.625)}MB Average</span> cached images and files
       </div>
 
       {/* Segmented Bar */}
@@ -319,7 +319,7 @@ export function PerformanceMetricCard({
   animationDelay = 0,
 }: PerformanceMetricCardProps) {
   const status = percentage >= 85 ? 'Good' : percentage >= 70 ? 'Average' : 'Warning';
-  const statusColor = percentage >= 85 ? '#3dd68c' : percentage >= 70 ? '#f0a040' : '#ff7043';
+  const statusColor = percentage >= 85 ? '#5ee6a0' : percentage >= 70 ? '#f2c94c' : '#ff6f5c';
 
   return (
     <div
@@ -363,14 +363,14 @@ export function PerformanceMetricCard({
           <div style={{ width: 134, height: 58, background: 'rgba(255,255,255,0.03)', borderRadius: 8 }} />
           
           <div style={{ display: 'flex', flexDirection: 'column', gap: 4, alignItems: 'flex-end' }}>
-            <div className="speed-row" style={{ color: '#6c8ef0' }}>
+            <div className="speed-row" style={{ color: '#7ab8ff' }}>
               <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round">
                 <line x1="12" y1="19" x2="12" y2="5"/>
                 <polyline points="5 12 12 19 19 12"/>
               </svg>
               <span>{upSpeed}</span> Mbps
             </div>
-            <div className="speed-row" style={{ color: '#e8316a' }}>
+            <div className="speed-row" style={{ color: 'var(--accent-primary)' }}>
               <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round">
                 <line x1="12" y1="5" x2="12" y2="19"/>
                 <polyline points="19 12 12 5 5 12"/>

app/frontend/src/shared/components/MetricCard.tsx

@@ -50,9 +50,9 @@ export function MetricCard({
   }, [animationDelay]);
 
   const statusColors: Record<string, string> = {
-    good: '#3dd68c',
-    average: '#f0a040',
-    warning: '#ff7043',
+    good: '#5ee6a0',
+    average: '#f2c94c',
+    warning: '#f2c94c',
   };
 
   // Horizontal layout for cards like Active User