feat: design system overhaul — sidebar, AI chats, settings, brainstorm, color cleanup

- Sidebar: dynamic brand-accent colors, brainstorm section restyled
- AI chat general: popup panel with expand/collapse, hides when contextual AI open
- AI chat contextual: tabs reordered (Actions first), X close button, height fix
- Settings: all tabs restyled, 6 new color presets (sage, terracotta, iron, etc.)
- Global color cleanup: emerald/orange hardcoded → brand-accent dynamic
- Brainstorm page: orange → brand-accent throughout
- PageEntry animation component added to key pages
- Floating AI button: bg-brand-accent instead of hardcoded black
- i18n: all 15 locales updated with new AI/billing keys
- Billing: freemium quota tracking, BYOK, stripe subscription scaffolding
- Admin: integrated into new design
- AGENTS.md + CLAUDE.md project rules added

memento-note/components/demo-mode-toggle.tsx

@@ -1,8 +1,6 @@
 'use client'
 
 import { useState } from 'react'
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
-import { Switch } from '@/components/ui/switch'
 import { FlaskConical, Zap, Target, Lightbulb } from 'lucide-react'
 import { toast } from 'sonner'
 import { useLanguage } from '@/lib/i18n'
@@ -34,68 +32,54 @@ export function DemoModeToggle({ demoMode, onToggle }: DemoModeToggleProps) {
   }
 
   return (
-    <Card className={`border-2 transition-all ${
+    <div className={`border rounded-2xl p-8 flex items-center justify-between group transition-all duration-300 ${
       demoMode
-        ? 'border-amber-300 bg-gradient-to-br from-amber-50 to-white dark:from-amber-950/30 dark:to-background'
-        : 'border-amber-100 dark:border-amber-900/30'
+        ? 'bg-ochre/10 dark:bg-ochre/10 border-ochre/30'
+        : 'bg-ochre/5 dark:bg-ochre/10 border-ochre/20 hover:bg-ochre/10'
     }`}>
-      <CardHeader className="pb-3">
-        <div className="flex items-center justify-between">
-          <div className="flex items-center gap-2">
-            <div className={`p-2 rounded-full transition-colors ${
-              demoMode
-                ? 'bg-amber-200 dark:bg-amber-900/50'
-                : 'bg-gray-100 dark:bg-gray-800'
-            }`}>
-              <FlaskConical className={`h-5 w-5 ${
-                demoMode ? 'text-amber-600 dark:text-amber-400' : 'text-gray-500'
-              }`} />
-            </div>
-            <div>
-              <CardTitle className="text-base flex items-center gap-2">
-                🧪 {t('demoMode.title')}
-                {demoMode && <Zap className="h-4 w-4 text-amber-500 animate-pulse" />}
-              </CardTitle>
-              <CardDescription className="text-xs mt-1">
-                {t('demoMode.description')}
-              </CardDescription>
-            </div>
-          </div>
-          <Switch
-            checked={demoMode}
-            onCheckedChange={handleToggle}
-            disabled={isPending}
-            className="data-[state=checked]:bg-amber-600"
-          />
+      <div className="flex items-center gap-6">
+        <div className="p-3 bg-paper dark:bg-ochre/20 rounded-2xl text-ochre border border-ochre/30">
+          <FlaskConical size={20} />
         </div>
-      </CardHeader>
-
-      {demoMode && (
-        <CardContent className="pt-0 space-y-2">
-          <div className="rounded-lg bg-white dark:bg-zinc-900 border border-amber-200 dark:border-amber-900/30 p-3">
-            <p className="text-xs font-semibold text-gray-700 dark:text-gray-300 mb-2">
-              {t('demoMode.parametersActive')}
-            </p>
-            <div className="space-y-1.5 text-xs text-gray-600 dark:text-gray-400">
-              <div className="flex items-start gap-2">
-                <Target className="h-3.5 w-3.5 mt-0.5 text-amber-600 flex-shrink-0" />
-                <span>{t('demoMode.similarityThreshold')}</span>
-              </div>
-              <div className="flex items-start gap-2">
-                <Zap className="h-3.5 w-3.5 mt-0.5 text-amber-600 flex-shrink-0" />
-                <span>{t('demoMode.delayBetweenNotes')}</span>
-              </div>
-              <div className="flex items-start gap-2">
-                <Lightbulb className="h-3.5 w-3.5 mt-0.5 text-amber-600 flex-shrink-0" />
-                <span>{t('demoMode.unlimitedInsights')}</span>
+        <div className="space-y-1.5 text-left">
+          <h4 className="text-sm font-bold text-ink flex items-center gap-3">
+            🧪 {t('demoMode.title')}
+            {demoMode && <Zap className="h-4 w-4 text-ochre animate-pulse" />}
+          </h4>
+          <p className="text-[11px] text-concrete leading-relaxed font-medium">
+            {t('demoMode.description')}
+          </p>
+          {demoMode && (
+            <div className="mt-3 rounded-lg bg-white/60 dark:bg-black/20 border border-ochre/20 p-3 space-y-1.5">
+              <p className="text-[10px] font-bold text-ink uppercase tracking-wider">{t('demoMode.parametersActive')}</p>
+              <div className="space-y-1 text-[10px] text-concrete">
+                <div className="flex items-start gap-2">
+                  <Target className="h-3 w-3 mt-0.5 text-ochre shrink-0" />
+                  <span>{t('demoMode.similarityThreshold')}</span>
+                </div>
+                <div className="flex items-start gap-2">
+                  <Zap className="h-3 w-3 mt-0.5 text-ochre shrink-0" />
+                  <span>{t('demoMode.delayBetweenNotes')}</span>
+                </div>
+                <div className="flex items-start gap-2">
+                  <Lightbulb className="h-3 w-3 mt-0.5 text-ochre shrink-0" />
+                  <span>{t('demoMode.unlimitedInsights')}</span>
+                </div>
               </div>
             </div>
-          </div>
-          <p className="text-xs text-amber-700 dark:text-amber-400 text-center">
-            💡 {t('demoMode.createNotesTip')}
-          </p>
-        </CardContent>
-      )}
-    </Card>
+          )}
+        </div>
+      </div>
+      <label className="relative inline-flex items-center cursor-pointer shrink-0 ml-4">
+        <input
+          type="checkbox"
+          className="sr-only peer"
+          checked={demoMode}
+          onChange={(e) => handleToggle(e.target.checked)}
+          disabled={isPending}
+        />
+        <div className="w-11 h-6 bg-gray-200 dark:bg-white/10 rounded-full peer peer-checked:after:translate-x-[20px] peer-checked:after:border-white after:content-[''] after:absolute after:top-[4px] after:left-[4px] after:bg-white after:rounded-full after:h-4 after:w-4 after:transition-all duration-300 ease-in-out peer-checked:bg-ochre" />
+      </label>
+    </div>
   )
 }