style: align UI with mobile productivity template and remove Google/Gemini references

2026-10-24 18:59:00 +02:00
1 parent 31aa43c460
commit c99b6c3a49
@@ -3,39 +3,41 @@
 ---
-## 🎨 1. Design-Tokens & Gemini-Dark-Theme (Copy & Paste)
+## 🎨 1. Design-Tokens & Template-Aesthetic (Copy & Paste)
-### Farbpalette (Strict Hex Values - Google Gemini Material 3 Dark)
+### Farbpalette (Deep Dark Theme & Squircles)
 ```css
-/* Backgrounds (Material 3 Dark Theme) */
+/* Backgrounds (Canvas & Surfaces) */
--bg-canvas:     #131314;  /* Google Gemini Canvas */
+--bg-canvas:     #16171a;  /* Deep Charcoal Canvas */
--bg-surface:    #1e1f20;  /* Surface Container (Karten, Dialoge, Panels) */
+--bg-surface:    #222428;  /* Card & Capsule Surface */
--bg-elevated:   #282a2c;  /* Elevated Container / Tonal Chips / Hover */
+--bg-elevated:   #282a2f;  /* Elevated Container / Hover */
--bg-field:      #131314;  /* Input Field Fill */
+--bg-field:      #1a1b1e;  /* Input Field Fill */
 /* Borders & Dividers */
 --border-subtle: rgba(255, 255, 255, 0.08); /* 1px Hairline Kante */
--border-focus:  rgba(168, 199, 250, 0.40); /* Gemini Primary Blue Hairline */
+--border-focus:  rgba(29, 140, 248, 0.50);  /* Electric Blue Hairline */
-/* Akzente & Status (Material 3 Soft Pastels - KEINE grellen AI-Farbverläufe) */
+/* Akzente & Status */
--color-primary: #a8c7fa;  /* Google Gemini Primary Blue */
+--color-primary: #1d8cf8;  /* Electric Blue Primary */
--color-on-pri:  #041e49;  /* Text on Primary Container */
+--color-on-pri:  #ffffff;  /* Text on Primary */
--color-success: #a8dab5;  /* Soft Green (Check / Kept) */
+--color-success: #22c55e;  /* Vivid Green (Kept / Check / Done) */
--color-danger:  #f28b82;  /* Soft Coral Red (Discard / Delete) */
+--color-danger:  #ef4444;  /* Vibrant Red (Discard / Delete) */
--color-warning: #fdd663;  /* Warm Amber */
+--color-warning: #f97316;  /* Vivid Orange (High Priority) */
 --color-purple:  #a855f7;  /* Accent Purple */
 /* Typografie */
--text-primary:   #e3e3e3;  /* High Emphasis */
+--text-primary:   #ffffff;  /* High Emphasis */
--text-secondary: #c4c7c5;  /* Medium Emphasis */
+--text-secondary: #d1d5db;  /* Medium Emphasis */
--text-muted:     #8e918f;  /* Low Emphasis / Subtle */
+--text-muted:     #9ca3af;  /* Low Emphasis / Subtle */
 ```
 ### UI-Regeln & Radien
-* **Keine grellen Farbverläufe:** Niemals Blau-zu-Lila-Gradienten wie billige AI-Templates. Strikte neutrale Anthrazit-Flächen mit sanften Pastell-Akzenten.
+* **Keine grellen Farbverläufe:** Niemals Blau-zu-Lila-Gradienten wie billige AI-Templates. Strikte neutrale Anthrazit-Flächen mit satten Einzelfarben (`#1d8cf8`, `#22c55e`, `#f97316`).
-* **Keine grellen Glow-Schatten:** Keine starken farbigen Drop-Shadows oder Neon-Glows. Feine `border: 1px solid rgba(255,255,255,0.08)` Hairlines nutzen.
+* **Squircles für Icons:** `w-10 h-10` oder `w-9 h-9` mit `rounded-xl` in soliden Farben.
-* **Buttons / Pills:** `rounded-full` (`border-radius: 9999px`) für Filter, Actions und Navigation.
+* **Pill-Buttons:** `rounded-full` (`border-radius: 9999px`) mit reinweißem Text auf `#1d8cf8`.
-* **Karten:** `rounded-2xl` (`16px`) oder `rounded-3xl` (`24px`), Padding `p-5` bis `p-6`, Border `1px solid rgba(255, 255, 255, 0.08)`.
+* **Karten:** `rounded-2xl` (`16px`) oder `rounded-3xl` (`24px`), `bg-[#222428]`, feine Hairline-Border `1px solid rgba(255, 255, 255, 0.08)`.
-* **Input-Feld (Instant Capture):** Prompt-Box-Stil wie Google Gemini, Höhe `h-14` (56px) für mobile Daumenbedienung, Autofokus bei Mount.
+* **Fokus/Active Outline:** `border border-[#22c55e]/70` mit dezentem Glow für aktive Elemente.
 * **Floating Bottom Dock:** Feste Daumenleiste mit zentriertem runden `+` Button in `#1d8cf8`.
 * **Gesten-Physik (Framer Motion):**
  * Swipe-Schwellenwert: `dragConstraints={{ left: -150, right: 150 }}`
  * Spring-Config: `{ type: "spring", stiffness: 350, damping: 25 }`
@@ -117,7 +119,7 @@ mindsift/
 │   │   │   ├── workspace/  # Tiptap Block Editor
 │   │   │   └── lists/      # Realtime Shopping / Todo Lists
 │   │   ├── lib/            # WS Client, API Client, Sound/Haptics
-│   │   └── index.css       # Tailwind v4 & Gemini CSS Variablen
+│   │   └── index.css       # Tailwind v4 & Design-Tokens / CSS Variablen
 ├── .gitea/workflows/       # Gitea Actions CI/CD
 ├── Dockerfile              # Multi-Stage Build (< 35 MB)
 ├── docker-compose.yml
@@ -8,7 +8,7 @@
 [![Backend](https://img.shields.io/badge/Backend-Go%201.24-00ADD8?logo=go&logoColor=white)](https://go.dev)
 [![Frontend](https://img.shields.io/badge/Frontend-React%2019%20%2F%20Vite-61DAFB?logo=react&logoColor=black)](https://react.dev)
 [![Database](https://img.shields.io/badge/Database-SQLite%20(WAL)%20%2F%20Postgres-003B57?logo=sqlite&logoColor=white)](https://sqlite.org)
-[![Styling](https://img.shields.io/badge/Theme-Google%20Gemini%20Dark-8ab4f8)](#-designsystem--ästhetik-google-gemini-dna)
+[![Styling](https://img.shields.io/badge/Theme-Deep%20Dark-1d8cf8)](#-designsystem--ästhetik)
 [![License](https://img.shields.io/badge/License-MIT-blue.svg)](LICENSE)
 **MindSift** verbindet den schnellsten Brain-Dump der Welt mit der Eleganz eines modernen Workspaces, spielerischer Tinder-Style-Triage und kollaborativen Echtzeit-Listen für Familien und Teams — 100 % Self-Hosted & Open Source.
@@ -69,16 +69,19 @@ Wenn dir an der Supermarktkasse eine Idee kommt, du im Auto über einen Geistesb
 ---
-## 🎨 Designsystem & Ästhetik: Google Gemini DNA
+## 🎨 Designsystem & Ästhetik
-MindSift setzt konsequent auf die Ästhetik von Google Gemini – organisch, hochmodern und beruhigend:
+MindSift setzt konsequent auf eine ultramoderne, dunkle Productivity-Suite-Ästhetik — fokussiert, augenschonend und schnell:
-* **Dark Mode First (OLED Deep Obsidian):**
+* **Dark Mode First (Deep Charcoal Canvas):**
-  * Hintergrund primär: `#0b0f19` / `#131314`
+  * Hintergrund primär: `#16171a`
-  * Oberflächen/Karten: `#1e1f20` mit feinen `1px` Konturen (`rgba(255, 255, 255, 0.08)`)
+  * Oberflächen/Karten: `#222428` mit feinen `1px` Konturen (`rgba(255, 255, 255, 0.08)`)
-  * Akzente & Glows: Gemini Blue (`#8ab4f8`) und sanftes Violett (`#c58af9`)
+  * Elevated & Hover: `#282a2f` / `#2b2d33`
-* **Pill-Shapes & Soft Curves:** Stark abgerundete Eingabefelder (`rounded-full`), fließende Kapselbuttons und weiche Kanten.
+  * Primär-Brand: Electric Blue (`#1d8cf8`)
-* **Zurückhaltende Eleganz:** Großzügiger Weißraum (*Spreading*), subtile Ambient-Glows bei Fokus und flüssige 60fps-Gestenphysik für die Karten-Triage.
+  * Status-Akzente: Vivid Green (`#22c55e`), Coral Red (`#ef4444`), Vivid Orange (`#f97316`)
 * **Squircles & Solid Color Badges:** Quadratisch abgerundete Icons (`rounded-xl`) mit satten Einzelfarben ohne grelle AI-Farbverläufe.
 * **Pill-Buttons & Active Highlighting:** Filter-Chips (`All`, `Favorite`) und Action-Buttons in Pillenform (`rounded-full`); aktive Aufgaben erhalten eine scharfe grüne Kontur (`border border-[#22c55e]/70`).
 * **Floating Bottom Dock:** Zentrale Daumenleiste mit markantem blauem `+` Action-Button zum blitzschnellen Gedanken-Erfassen von überall.
 * **Haptik & Touch-Optimierung:** Große Interaktionsradien (mind. 48px Touch-Targets), Vibrations-Feedback via Web Vibration API bei Karten-Swipes.
 ---
@@ -123,7 +126,7 @@ Als Lead-Architektur wurde ein **Single-Binary / Single-Container** Paradigma ge
 | :--- | :--- | :--- |
 | **Backend** | **Go 1.24+ (Chi Router)** | Extrem geringer Speicherverbrauch (~15–25 MB RAM idle), Kaltstart in < 5 ms, überlegene Concurrency für WebSockets, erzeugt ein statisches Binary. |
 | **Frontend** | **React 19 + TypeScript + Vite** | Bietet mit **Framer Motion** die beste Gesten- und Physik-Engine für flüssige Tinder-Swipes und mit **Tiptap** den industrieweit führenden blockbasierten Rich-Text-Editor. |
-| **Styling** | **Tailwind CSS v4** | Höchste Performance, null CSS-Runtime-Overhead, perfekte Abbildung des Gemini Dark-Themas mit Design-Tokens. |
+| **Styling** | **Tailwind CSS v4** | Höchste Performance, null CSS-Runtime-Overhead, perfekte Abbildung des Deep Dark Themes mit Design-Tokens. |
 | **Realtime** | **Go WebSockets (`nhooyr/websocket`)** | Schlanke, native WebSocket-Rooms für kollaborative Einkaufslisten mit Sub-10ms-Latenz und automatischem Reconnect. |
 | **Datenbank** | **SQLite (WAL-Modus) / sqlc** | Standardmäßig Zero-Config mit Write-Ahead-Logging, ACID-sicher und als einzelne Datei einfachst per Backup sicherbar. Optional umschaltbar auf PostgreSQL per `DATABASE_URL`. |
 | **PWA / Offline** | **Workbox / IndexedDB** | App startet auch im Funkloch sofort; Gedanken werden lokal vorgehalten und beim nächsten Verbindungsaufbau transparent synchronisiert. |
@@ -552,7 +555,7 @@ Phase 6: Hardening  ◄──── Phase 5: Webhooks    ◄──── Phase 4
 - [x] Go Backend-Grundgerüst (Chi Router, Konfigurations-Management, Healthcheck)
 - [x] SQLite Storage-Layer mit WAL-Modus und automatischer Migration
 - [x] JWT-Authentifizierung & User-Management
- [x] Mobile-First PWA Setup (Vite, React, Tailwind CSS, Gemini Dark Theme)
+- [x] Mobile-First PWA Setup (Vite, React, Tailwind CSS, Deep Dark Theme)
 - [x] **Instant-Capture-Interface:** Autofokus-Eingabemaske, Sprachaufnahme (Web Speech API), Latenz < 300 ms
 ### Phase 2: Tinder-Style Triage & Task Engine (Sprint 2)
@@ -8,9 +8,14 @@ import {
  Brain,
  LogOut,
  User as UserIcon,
  Plus,
  Bell,
  Shield,
  ChevronRight,
  Sparkles,
 } from 'lucide-react';
 import { DashboardStats, SharedList, Thought, User } from './lib/types';
-import { api, clearToken, getToken } from './lib/api';
+import { api, clearToken, getToken, triggerHaptic } from './lib/api';
 import { InstantCaptureBar } from './features/capture/InstantCaptureBar';
 import { TriageDeck } from './features/triage/TriageDeck';
 import { TasksView } from './features/triage/TasksView';
@@ -36,13 +41,14 @@ export const App: React.FC = () => {
  const [selectedDocId, setSelectedDocId] = useState<string | null>(null);
  const [captureFocusCount, setCaptureFocusCount] = useState(0);
-  // Auth Modal State for switching or registering additional family members
+  // Profile & Auth Modal State (aligned with Template Screen 2)
-  const [showAuthModal, setShowAuthModal] = useState(false);
+  const [showProfileModal, setShowProfileModal] = useState(false);
  const [authMode, setAuthMode] = useState<'login' | 'register'>('login');
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [displayName, setDisplayName] = useState('');
  const [authError, setAuthError] = useState('');
  const [notificationsEnabled, setNotificationsEnabled] = useState(true);
  const refreshAll = async () => {
    try {
@@ -107,16 +113,24 @@ export const App: React.FC = () => {
    setActiveTab('workspace');
  };
  const handleTriggerAddButton = () => {
    triggerHaptic(20);
    // Scroll smoothly to top and focus capture bar
    window.scrollTo({ top: 0, behavior: 'smooth' });
    setCaptureFocusCount((c) => c + 1);
  };
  const handleAuthSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setAuthError('');
    triggerHaptic(15);
    try {
      if (authMode === 'login') {
        await api.login(email, password);
      } else {
        await api.register(email, password, displayName);
      }
-      setShowAuthModal(false);
+      setShowProfileModal(false);
      setEmail('');
      setPassword('');
      setDisplayName('');
@@ -126,49 +140,62 @@ export const App: React.FC = () => {
    }
  };
  const handleLogout = async () => {
    triggerHaptic(20);
    clearToken();
    await api.quickStart();
    await refreshAll();
    setShowProfileModal(false);
  };
  return (
-    <div className="min-h-screen bg-[#131314] text-[#e3e3e3] flex flex-col font-sans">
+    <div className="min-h-screen bg-[#16171a] text-white flex flex-col font-sans selection:bg-[#1d8cf8]/30">
-      {/* Header Bar */}
+      {/* Top Header Bar */}
-      <header className="sticky top-0 z-30 bg-[#131314]/95 backdrop-blur-md border-b border-white/[0.08]">
+      <header className="sticky top-0 z-30 bg-[#16171a]/95 backdrop-blur-md border-b border-white/[0.08]">
        <div className="max-w-6xl mx-auto px-4 sm:px-6 h-16 flex items-center justify-between gap-4">
-          {/* Brand Logo */}
+          {/* Logo & Headline */}
          <div
            onClick={() => {
              setActiveTab('triage');
-              setCaptureFocusCount((c) => c + 1);
+              handleTriggerAddButton();
            }}
-            className="flex items-center gap-2.5 cursor-pointer group select-none"
+            className="flex items-center gap-3 cursor-pointer group select-none"
          >
-            <div className="w-8 h-8 rounded-full bg-[#1e1f20] border border-white/[0.08] flex items-center justify-center group-hover:border-[#a8c7fa]/50 transition-colors">
+            <div className="w-9 h-9 rounded-xl bg-[#1d8cf8] text-white flex items-center justify-center shadow-sm group-hover:scale-105 transition-transform">
-              <Brain className="w-4 h-4 text-[#a8c7fa]" />
+              <Brain className="w-5 h-5" />
            </div>
-            <div className="flex items-baseline gap-2">
+            <div className="flex flex-col">
-              <span className="font-semibold text-base sm:text-lg text-[#e3e3e3] tracking-tight">
+              <span className="font-bold text-base sm:text-lg text-white tracking-tight leading-none">
                MindSift
              </span>
-              <span className="hidden md:inline-block text-xs text-[#8e918f]">
+              <span className="text-[11px] text-zinc-400 mt-0.5 hidden sm:inline-block">
                Der Kopf frei in drei Sekunden
              </span>
            </div>
          </div>
-          {/* Right User Pill */}
+          {/* User Profile Pill matching Template Screen 2 */}
          <div className="flex items-center gap-2">
            <button
-              onClick={() => setShowAuthModal(true)}
+              onClick={() => {
-              className="h-8 px-3 rounded-full bg-[#1e1f20] hover:bg-[#282a2c] border border-white/[0.08] text-xs font-normal text-[#c4c7c5] hover:text-[#e3e3e3] flex items-center gap-2 transition-colors"
+                triggerHaptic(10);
-              title="Benutzer wechseln oder Profil anpassen"
+                setShowProfileModal(true);
              }}
              className="h-9 px-3.5 rounded-full bg-[#222428] hover:bg-[#282a2f] border border-white/[0.08] text-xs font-medium text-white flex items-center gap-2.5 transition-colors shadow-sm"
              title="Profil & Einstellungen"
            >
-              <UserIcon className="w-3.5 h-3.5 text-[#a8c7fa]" />
+              <div className="w-5 h-5 rounded-full bg-[#1d8cf8] text-white text-[10px] font-bold flex items-center justify-center">
-              <span>{user?.displayName || 'Lokal'}</span>
+                {user?.displayName ? user.displayName.slice(0, 1).toUpperCase() : 'U'}
              </div>
              <span className="max-w-[120px] truncate">{user?.displayName || 'Konto'}</span>
            </button>
          </div>
        </div>
      </header>
-      {/* Main Content Container */}
+      {/* Main Container */}
-      <main className="flex-1 max-w-6xl w-full mx-auto px-4 sm:px-6 pt-6 pb-20">
+      <main className="flex-1 max-w-6xl w-full mx-auto px-4 sm:px-6 pt-5 pb-28">
-        {/* Global Instant Capture Section */}
+        {/* Instant Capture Section */}
        <section className="mb-6">
          <InstantCaptureBar
            onCaptured={handleCaptured}
@@ -176,83 +203,116 @@ export const App: React.FC = () => {
          />
        </section>
-        {/* Google Material 3 Navigation Chips */}
+        {/* Top Filter / Tab Pills matching Template Screen 3 */}
-        <nav className="flex items-center justify-start sm:justify-center gap-1.5 overflow-x-auto pb-2 mb-8 no-scrollbar">
+        <nav className="flex items-center justify-start sm:justify-center gap-2 overflow-x-auto pb-2 mb-8 no-scrollbar">
          <button
-            onClick={() => setActiveTab('triage')}
+            onClick={() => {
-            className={`h-9 px-4 rounded-full text-xs sm:text-sm flex items-center gap-2 flex-shrink-0 transition-colors ${
+              triggerHaptic(10);
              setActiveTab('triage');
            }}
            className={`h-9 px-4 rounded-full text-xs sm:text-sm flex items-center gap-2 flex-shrink-0 transition-all ${
              activeTab === 'triage'
-                ? 'bg-[#282a2c] text-[#e3e3e3] font-medium border border-white/[0.12]'
+                ? 'bg-[#1d8cf8] text-white font-semibold shadow-sm'
-                : 'text-[#c4c7c5] hover:text-[#e3e3e3] hover:bg-[#1e1f20]'
+                : 'bg-[#222428] text-zinc-400 hover:text-white hover:bg-[#282a2f] border border-white/[0.06]'
            }`}
          >
-            <Layers className="w-4 h-4 text-[#a8c7fa]" />
+            <Layers className="w-4 h-4" />
-            <span>Triage-Deck</span>
+            <span>Triage</span>
            {stats.inboxCount > 0 && (
-              <span className="px-1.5 py-0.2 rounded-full text-[11px] bg-[#1e1f20] text-[#a8c7fa] border border-white/[0.06]">
+              <span
                className={`px-1.5 py-0.5 rounded-full text-[10px] font-bold ${
                  activeTab === 'triage'
                    ? 'bg-white text-[#1d8cf8]'
                    : 'bg-[#16171a] text-[#1d8cf8]'
                }`}
              >
                {stats.inboxCount}
              </span>
            )}
          </button>
          <button
-            onClick={() => setActiveTab('tasks')}
+            onClick={() => {
-            className={`h-9 px-4 rounded-full text-xs sm:text-sm flex items-center gap-2 flex-shrink-0 transition-colors ${
+              triggerHaptic(10);
              setActiveTab('tasks');
            }}
            className={`h-9 px-4 rounded-full text-xs sm:text-sm flex items-center gap-2 flex-shrink-0 transition-all ${
              activeTab === 'tasks'
-                ? 'bg-[#282a2c] text-[#e3e3e3] font-medium border border-white/[0.12]'
+                ? 'bg-[#1d8cf8] text-white font-semibold shadow-sm'
-                : 'text-[#c4c7c5] hover:text-[#e3e3e3] hover:bg-[#1e1f20]'
+                : 'bg-[#222428] text-zinc-400 hover:text-white hover:bg-[#282a2f] border border-white/[0.06]'
            }`}
          >
-            <CheckSquare className="w-4 h-4 text-[#a8dab5]" />
+            <CheckSquare className="w-4 h-4" />
            <span>Aufgaben</span>
            {stats.tasksOpenCount > 0 && (
-              <span className="px-1.5 py-0.2 rounded-full text-[11px] bg-[#1e1f20] text-[#a8dab5] border border-white/[0.06]">
+              <span
                className={`px-1.5 py-0.5 rounded-full text-[10px] font-bold ${
                  activeTab === 'tasks'
                    ? 'bg-white text-[#1d8cf8]'
                    : 'bg-[#16171a] text-[#22c55e]'
                }`}
              >
                {stats.tasksOpenCount}
              </span>
            )}
          </button>
          <button
-            onClick={() => setActiveTab('workspace')}
+            onClick={() => {
-            className={`h-9 px-4 rounded-full text-xs sm:text-sm flex items-center gap-2 flex-shrink-0 transition-colors ${
+              triggerHaptic(10);
              setActiveTab('workspace');
            }}
            className={`h-9 px-4 rounded-full text-xs sm:text-sm flex items-center gap-2 flex-shrink-0 transition-all ${
              activeTab === 'workspace'
-                ? 'bg-[#282a2c] text-[#e3e3e3] font-medium border border-white/[0.12]'
+                ? 'bg-[#1d8cf8] text-white font-semibold shadow-sm'
-                : 'text-[#c4c7c5] hover:text-[#e3e3e3] hover:bg-[#1e1f20]'
+                : 'bg-[#222428] text-zinc-400 hover:text-white hover:bg-[#282a2f] border border-white/[0.06]'
            }`}
          >
-            <FileText className="w-4 h-4 text-[#a8c7fa]" />
+            <FileText className="w-4 h-4" />
            <span>Workspace</span>
-            <span className="px-1.5 py-0.2 rounded-full text-[11px] bg-[#1e1f20] text-[#8e918f] border border-white/[0.06]">
+            <span
              className={`px-1.5 py-0.5 rounded-full text-[10px] font-bold ${
                activeTab === 'workspace'
                  ? 'bg-white text-[#1d8cf8]'
                  : 'bg-[#16171a] text-zinc-400'
              }`}
            >
              {stats.docsCount}
            </span>
          </button>
          <button
-            onClick={() => setActiveTab('lists')}
+            onClick={() => {
-            className={`h-9 px-4 rounded-full text-xs sm:text-sm flex items-center gap-2 flex-shrink-0 transition-colors ${
+              triggerHaptic(10);
              setActiveTab('lists');
            }}
            className={`h-9 px-4 rounded-full text-xs sm:text-sm flex items-center gap-2 flex-shrink-0 transition-all ${
              activeTab === 'lists'
-                ? 'bg-[#282a2c] text-[#e3e3e3] font-medium border border-white/[0.12]'
+                ? 'bg-[#1d8cf8] text-white font-semibold shadow-sm'
-                : 'text-[#c4c7c5] hover:text-[#e3e3e3] hover:bg-[#1e1f20]'
+                : 'bg-[#222428] text-zinc-400 hover:text-white hover:bg-[#282a2f] border border-white/[0.06]'
            }`}
          >
-            <ShoppingCart className="w-4 h-4 text-[#a8dab5]" />
+            <ShoppingCart className="w-4 h-4" />
            <span>Geteilte Listen</span>
          </button>
          <button
-            onClick={() => setActiveTab('ecosystem')}
+            onClick={() => {
-            className={`h-9 px-4 rounded-full text-xs sm:text-sm flex items-center gap-2 flex-shrink-0 transition-colors ${
+              triggerHaptic(10);
              setActiveTab('ecosystem');
            }}
            className={`h-9 px-4 rounded-full text-xs sm:text-sm flex items-center gap-2 flex-shrink-0 transition-all ${
              activeTab === 'ecosystem'
-                ? 'bg-[#282a2c] text-[#e3e3e3] font-medium border border-white/[0.12]'
+                ? 'bg-[#1d8cf8] text-white font-semibold shadow-sm'
-                : 'text-[#c4c7c5] hover:text-[#e3e3e3] hover:bg-[#1e1f20]'
+                : 'bg-[#222428] text-zinc-400 hover:text-white hover:bg-[#282a2f] border border-white/[0.06]'
            }`}
          >
-            <Webhook className="w-4 h-4 text-[#fdd663]" />
+            <Webhook className="w-4 h-4" />
            <span>Webhooks & Export</span>
          </button>
        </nav>
-        {/* Active View Content */}
+        {/* Tab View Content */}
        <section>
          {activeTab === 'triage' && (
            <TriageDeck
@@ -260,7 +320,7 @@ export const App: React.FC = () => {
              lists={lists}
              onDeckChange={refreshAll}
              onOpenDocument={handleOpenDocument}
-              onFocusCapture={() => setCaptureFocusCount((c) => c + 1)}
+              onFocusCapture={handleTriggerAddButton}
            />
          )}
@@ -288,77 +348,157 @@ export const App: React.FC = () => {
        </section>
      </main>
-      {/* Account Switcher / Registration Modal */}
+      {/* Floating Bottom Navigation Dock matching Template Screen 3 */}
-      {showAuthModal && (
+      <footer className="fixed bottom-0 left-0 right-0 z-40 bg-[#1c1e22]/95 backdrop-blur-lg border-t border-white/[0.08] px-4 py-2 sm:py-3 shadow-2xl">
-        <div className="fixed inset-0 z-50 bg-black/60 backdrop-blur-sm flex items-center justify-center p-4">
+        <div className="max-w-md mx-auto flex items-center justify-between relative px-2">
-          <div className="w-full max-w-md p-6 rounded-3xl bg-[#1e1f20] border border-[#3c4043] shadow-card">
+          {/* Triage / Inbox */}
-            <div className="flex items-center justify-between mb-5">
+          <button
-              <h3 className="text-base font-semibold text-[#e3e3e3]">
+            onClick={() => {
-                {authMode === 'login' ? 'Konto wechseln' : 'Neues Familien-Konto anlegen'}
+              triggerHaptic(10);
-              </h3>
+              setActiveTab('triage');
            }}
            className={`flex flex-col items-center justify-center p-2 rounded-xl transition-colors ${
              activeTab === 'triage' ? 'text-[#1d8cf8]' : 'text-zinc-400 hover:text-white'
            }`}
            title="Triage Deck"
          >
            <Layers className="w-5 h-5" />
            <span className="text-[10px] mt-1 font-medium">Triage</span>
          </button>
          {/* Tasks */}
          <button
            onClick={() => {
              triggerHaptic(10);
              setActiveTab('tasks');
            }}
            className={`flex flex-col items-center justify-center p-2 rounded-xl transition-colors ${
              activeTab === 'tasks' ? 'text-[#1d8cf8]' : 'text-zinc-400 hover:text-white'
            }`}
            title="Aufgaben"
          >
            <CheckSquare className="w-5 h-5" />
            <span className="text-[10px] mt-1 font-medium">Aufgaben</span>
          </button>
          {/* Center Floating Action Button matching Template + Button */}
          <div className="relative -top-5 flex flex-col items-center">
            <button
              onClick={handleTriggerAddButton}
              className="w-13 h-13 sm:w-14 sm:h-14 rounded-full bg-[#1d8cf8] hover:bg-[#1877d5] active:scale-95 text-white flex items-center justify-center shadow-lg shadow-blue-500/30 border-4 border-[#16171a] transition-all"
              title="Gedanke erfassen"
            >
              <Plus className="w-6 h-6 stroke-[2.5]" />
            </button>
            <span className="text-[10px] font-medium text-zinc-300 mt-1">Erfassen</span>
          </div>
          {/* Lists */}
          <button
            onClick={() => {
              triggerHaptic(10);
              setActiveTab('lists');
            }}
            className={`flex flex-col items-center justify-center p-2 rounded-xl transition-colors ${
              activeTab === 'lists' ? 'text-[#1d8cf8]' : 'text-zinc-400 hover:text-white'
            }`}
            title="Listen"
          >
            <ShoppingCart className="w-5 h-5" />
            <span className="text-[10px] mt-1 font-medium">Listen</span>
          </button>
          {/* Workspace */}
          <button
            onClick={() => {
              triggerHaptic(10);
              setActiveTab('workspace');
            }}
            className={`flex flex-col items-center justify-center p-2 rounded-xl transition-colors ${
              activeTab === 'workspace' ? 'text-[#1d8cf8]' : 'text-zinc-400 hover:text-white'
            }`}
            title="Workspace"
          >
            <FileText className="w-5 h-5" />
            <span className="text-[10px] mt-1 font-medium">Workspace</span>
          </button>
        </div>
      </footer>
      {/* Profile & Settings Modal styled identically to Template Screen 2 */}
      {showProfileModal && (
        <div className="fixed inset-0 z-50 bg-black/70 backdrop-blur-sm flex items-center justify-center p-4">
          <div className="w-full max-w-sm rounded-3xl bg-[#222428] border border-white/[0.08] shadow-2xl p-6 overflow-hidden">
            {/* Screen 2: Top Profile Card */}
            <div className="flex flex-col items-center text-center mb-6">
              <div className="w-20 h-20 rounded-full bg-[#1d8cf8] text-white text-2xl font-bold flex items-center justify-center shadow-lg mb-3 ring-4 ring-white/[0.05]">
                {user?.displayName ? user.displayName.slice(0, 1).toUpperCase() : 'U'}
              </div>
              <h2 className="text-xl font-bold text-white tracking-tight">
                {user?.displayName || 'Standard Benutzer'}
              </h2>
              <p className="text-xs text-zinc-400 mt-0.5">
                {user?.email || 'lokal@mindsift.local'}
              </p>
              {/* Template Screen 2: Blue Pill Edit Button */}
              <button
-                onClick={() => setShowAuthModal(false)}
+                onClick={() => setAuthMode(authMode === 'login' ? 'register' : 'login')}
-                className="px-2.5 py-1 rounded-full bg-[#282a2c] text-xs text-[#c4c7c5] hover:text-[#e3e3e3]"
+                className="mt-3 px-5 py-1.5 rounded-full bg-[#1d8cf8] hover:bg-[#167ad6] text-white text-xs font-semibold shadow-sm transition-all"
              >
-                Schließen
+                {authMode === 'login' ? 'Konto wechseln' : 'Neues Konto anlegen'}
              </button>
            </div>
-            {user && (
+            {/* Template Screen 2: Capsule Settings Sections */}
-              <div className="mb-4 p-3 rounded-2xl bg-[#131314] border border-white/[0.08] flex items-center justify-between">
+            <div className="space-y-3 mb-6">
-                <div className="text-xs">
+              {/* Notification toggle capsule */}
-                  <span className="text-[#8e918f]">Aktiv: </span>
+              <div className="p-3.5 rounded-2xl bg-[#282a2f] border border-white/[0.04] flex items-center justify-between">
-                  <strong className="text-[#e3e3e3]">{user.displayName}</strong>
+                <div className="flex items-center gap-3">
-                  <span className="text-[#8e918f] ml-1">({user.email})</span>
+                  <div className="w-8 h-8 rounded-lg bg-[#22c55e]/20 text-[#22c55e] flex items-center justify-center">
                    <Bell className="w-4 h-4" />
                  </div>
                  <span className="text-xs font-medium text-white">Benachrichtigungen</span>
                </div>
                <button
                  type="button"
-                  onClick={async () => {
+                  onClick={() => setNotificationsEnabled(!notificationsEnabled)}
-                    clearToken();
+                  className={`w-11 h-6 rounded-full transition-colors relative p-0.5 ${
-                    await api.quickStart();
+                    notificationsEnabled ? 'bg-[#1d8cf8]' : 'bg-zinc-600'
-                    await refreshAll();
+                  }`}
                    setShowAuthModal(false);
                  }}
                  className="text-xs text-[#a8c7fa] hover:underline flex items-center gap-1"
                >
-                  <LogOut className="w-3 h-3" /> Standard
+                  <div
                    className={`w-5 h-5 rounded-full bg-white transition-transform ${
                      notificationsEnabled ? 'translate-x-5' : 'translate-x-0'
                    }`}
                  />
                </button>
              </div>
            )}
-            <div className="flex gap-2 mb-4">
+              {/* Security info capsule */}
-              <button
+              <div className="p-3.5 rounded-2xl bg-[#282a2f] border border-white/[0.04] flex items-center justify-between">
-                type="button"
+                <div className="flex items-center gap-3">
-                onClick={() => setAuthMode('login')}
+                  <div className="w-8 h-8 rounded-lg bg-[#1d8cf8]/20 text-[#1d8cf8] flex items-center justify-center">
-                className={`flex-1 h-8 rounded-full text-xs font-medium ${
+                    <Shield className="w-4 h-4" />
-                  authMode === 'login'
+                  </div>
-                    ? 'bg-[#282a2c] text-[#e3e3e3] border border-white/[0.12]'
+                  <div>
-                    : 'text-[#8e918f] hover:text-[#e3e3e3]'
+                    <span className="text-xs font-medium text-white block">Sicherheit</span>
-                }`}
+                    <span className="text-[10px] text-zinc-400">Lokale SQLite Verschlüsselung</span>
-              >
+                  </div>
-                Anmelden
+                </div>
-              </button>
+                <ChevronRight className="w-4 h-4 text-zinc-500" />
-              <button
+              </div>
                type="button"
                onClick={() => setAuthMode('register')}
                className={`flex-1 h-8 rounded-full text-xs font-medium ${
                  authMode === 'register'
                    ? 'bg-[#282a2c] text-[#e3e3e3] border border-white/[0.12]'
                    : 'text-[#8e918f] hover:text-[#e3e3e3]'
                }`}
              >
                Registrieren
              </button>
            </div>
-            <form onSubmit={handleAuthSubmit} className="space-y-3">
+            {/* Auth Switcher Form if switching accounts */}
            <form onSubmit={handleAuthSubmit} className="space-y-2.5 mb-4">
              {authMode === 'register' && (
                <input
                  type="text"
                  value={displayName}
                  onChange={(e) => setDisplayName(e.target.value)}
-                  placeholder="Anzeigename (z. B. Lisa)"
+                  placeholder="Anzeigename"
-                  className="w-full h-10 px-4 rounded-full bg-[#131314] text-sm text-[#e3e3e3] placeholder-[#8e918f] border border-[#3c4043] focus:border-[#a8c7fa] focus:outline-none"
+                  className="w-full h-10 px-4 rounded-xl bg-[#16171a] text-xs text-white placeholder-zinc-500 border border-white/[0.08] focus:border-[#1d8cf8] focus:outline-none"
                  required
                />
              )}
@@ -366,28 +506,47 @@ export const App: React.FC = () => {
                type="email"
                value={email}
                onChange={(e) => setEmail(e.target.value)}
-                placeholder="E-Mail-Adresse"
+                placeholder="E-Mail"
-                className="w-full h-10 px-4 rounded-full bg-[#131314] text-sm text-[#e3e3e3] placeholder-[#8e918f] border border-[#3c4043] focus:border-[#a8c7fa] focus:outline-none"
+                className="w-full h-10 px-4 rounded-xl bg-[#16171a] text-xs text-white placeholder-zinc-500 border border-white/[0.08] focus:border-[#1d8cf8] focus:outline-none"
                required
              />
              <input
                type="password"
                value={password}
                onChange={(e) => setPassword(e.target.value)}
-                placeholder="Passwort (mind. 4 Zeichen)"
+                placeholder="Passwort"
-                className="w-full h-10 px-4 rounded-full bg-[#131314] text-sm text-[#e3e3e3] placeholder-[#8e918f] border border-[#3c4043] focus:border-[#a8c7fa] focus:outline-none"
+                className="w-full h-10 px-4 rounded-xl bg-[#16171a] text-xs text-white placeholder-zinc-500 border border-white/[0.08] focus:border-[#1d8cf8] focus:outline-none"
                required
              />
-              {authError && <p className="text-xs text-[#f28b82] px-2">{authError}</p>}
+              {authError && <p className="text-xs text-[#ef4444] px-1">{authError}</p>}
              <button
                type="submit"
-                className="w-full h-10 rounded-full bg-[#a8c7fa] text-[#041e49] font-medium text-sm hover:bg-[#b8d4ff] transition-colors"
+                className="w-full h-10 rounded-full bg-[#1d8cf8] hover:bg-[#167ad6] text-white font-semibold text-xs transition-colors shadow-sm"
              >
-                {authMode === 'login' ? 'Einloggen' : 'Konto erstellen'}
+                {authMode === 'login' ? 'Anmelden' : 'Registrieren'}
              </button>
            </form>
            {/* Log Out Row matching Template Screen 2 */}
            <div className="pt-2 border-t border-white/[0.06] flex items-center justify-between">
              <button
                type="button"
                onClick={handleLogout}
                className="text-xs text-[#ef4444] hover:underline flex items-center gap-1.5 font-medium py-1"
              >
                <LogOut className="w-3.5 h-3.5" />
                <span>Abmelden</span>
              </button>
              <button
                type="button"
                onClick={() => setShowProfileModal(false)}
                className="px-4 py-1.5 rounded-full bg-[#282a2f] hover:bg-[#32353a] text-xs text-zinc-300 font-medium transition-colors"
              >
                Fertig
              </button>
            </div>
          </div>
        </div>
      )}
@@ -133,15 +133,17 @@ export const InstantCaptureBar: React.FC<InstantCaptureBarProps> = ({
  return (
    <div className="w-full max-w-3xl mx-auto">
      <form onSubmit={handleSubmit} className="relative">
-        {/* Google Gemini Style Input Capsule */}
+        {/* Capsule Input Bar */}
        <div
-          className={`flex items-center h-14 px-4 sm:px-5 rounded-full bg-[#1e1f20] border transition-colors duration-150 ${
+          className={`flex items-center h-14 px-3.5 sm:px-4 rounded-2xl bg-[#222428] border transition-colors duration-150 ${
            isListening
-              ? 'border-[#a8c7fa] bg-[#1e1f20]'
+              ? 'border-[#1d8cf8] bg-[#222428]'
-              : 'border-[#3c4043] focus-within:border-[#a8c7fa]'
+              : 'border-white/[0.08] focus-within:border-[#1d8cf8]/80'
          }`}
        >
-          <Sparkles className="w-4 h-4 mr-3 flex-shrink-0 text-[#a8c7fa]" />
+          <div className="w-8 h-8 rounded-xl bg-[#1d8cf8] text-white flex items-center justify-center mr-3 flex-shrink-0">
            <Sparkles className="w-4 h-4" />
          </div>
          <input
            ref={inputRef}
@@ -153,7 +155,7 @@ export const InstantCaptureBar: React.FC<InstantCaptureBarProps> = ({
                ? 'Ich höre zu…'
                : 'Gedanke, Idee oder Zutat sofort festhalten… (Taste C oder /)'
            }
-            className="w-full bg-transparent text-[#e3e3e3] placeholder-[#8e918f] text-sm sm:text-base focus:outline-none"
+            className="w-full bg-transparent text-white placeholder-zinc-500 text-sm sm:text-base focus:outline-none"
            autoComplete="off"
          />
@@ -165,8 +167,8 @@ export const InstantCaptureBar: React.FC<InstantCaptureBarProps> = ({
              title="Priorität & Fälligkeit"
              className={`h-8 px-2.5 rounded-full text-xs flex items-center gap-1.5 transition-colors ${
                showOptions || priority !== 'normal' || dueDate
-                  ? 'bg-[#282a2c] text-[#a8c7fa] border border-[#a8c7fa]/30'
+                  ? 'bg-[#1d8cf8]/20 text-[#1d8cf8] border border-[#1d8cf8]/40'
-                  : 'text-[#8e918f] hover:text-[#e3e3e3] hover:bg-[#282a2c]'
+                  : 'text-zinc-400 hover:text-white hover:bg-[#2b2d33]'
              }`}
            >
              <Calendar className="w-3.5 h-3.5" />
@@ -182,8 +184,8 @@ export const InstantCaptureBar: React.FC<InstantCaptureBarProps> = ({
              title="Spracheingabe"
              className={`w-8 h-8 rounded-full flex items-center justify-center transition-colors ${
                isListening
-                  ? 'bg-[#004a77]/50 text-[#a8c7fa]'
+                  ? 'bg-[#1d8cf8]/20 text-[#1d8cf8]'
-                  : 'text-[#8e918f] hover:text-[#e3e3e3] hover:bg-[#282a2c]'
+                  : 'text-zinc-400 hover:text-white hover:bg-[#2b2d33]'
              }`}
            >
              {isListening ? <MicOff className="w-4 h-4" /> : <Mic className="w-4 h-4" />}
@@ -193,10 +195,10 @@ export const InstantCaptureBar: React.FC<InstantCaptureBarProps> = ({
            <button
              type="submit"
              disabled={!content.trim() || isSubmitting}
-              className={`h-8 px-3.5 rounded-full font-medium text-xs flex items-center gap-1.5 transition-colors ${
+              className={`h-9 px-4 rounded-full font-medium text-xs flex items-center gap-1.5 transition-all ${
                content.trim()
-                  ? 'bg-[#a8c7fa] text-[#041e49] hover:bg-[#b8d4ff] cursor-pointer'
+                  ? 'bg-[#1d8cf8] hover:bg-[#3b9cfc] text-white cursor-pointer shadow-sm'
-                  : 'bg-[#282a2c] text-[#8e918f] cursor-not-allowed'
+                  : 'bg-[#2b2d33] text-zinc-500 cursor-not-allowed'
              }`}
            >
              {justSaved ? (
@@ -216,9 +218,9 @@ export const InstantCaptureBar: React.FC<InstantCaptureBarProps> = ({
        {/* Expandable Quick Metadata Pills */}
        {showOptions && (
-          <div className="mt-2 px-4 py-2.5 rounded-2xl bg-[#1e1f20] border border-[#3c4043] flex flex-wrap items-center justify-between gap-2 text-xs">
+          <div className="mt-2.5 px-4 py-3 rounded-2xl bg-[#222428] border border-white/[0.08] flex flex-wrap items-center justify-between gap-2 text-xs">
            <div className="flex items-center gap-1.5">
-              <span className="text-[#8e918f] mr-1">Priorität:</span>
+              <span className="text-zinc-400 mr-1">Priorität:</span>
              {(['low', 'normal', 'high', 'urgent'] as PriorityLevel[]).map((p) => {
                const labels: Record<PriorityLevel, string> = {
                  low: 'Niedrig',
@@ -235,9 +237,9 @@ export const InstantCaptureBar: React.FC<InstantCaptureBarProps> = ({
                    className={`px-3 py-1 rounded-full transition-colors ${
                      active
                        ? p === 'urgent'
-                          ? 'bg-[#f28b82]/20 text-[#f28b82] border border-[#f28b82]/40 font-medium'
+                          ? 'bg-[#ef4444] text-white font-medium'
-                          : 'bg-[#282a2c] text-[#a8c7fa] border border-[#a8c7fa]/30 font-medium'
+                          : 'bg-[#1d8cf8] text-white font-medium'
-                        : 'bg-[#131314] text-[#8e918f] hover:text-[#e3e3e3]'
+                        : 'bg-[#16171a] text-zinc-400 hover:text-white border border-white/[0.06]'
                    }`}
                  >
                    {labels[p]}
@@ -247,12 +249,12 @@ export const InstantCaptureBar: React.FC<InstantCaptureBarProps> = ({
            </div>
            <div className="flex items-center gap-2">
-              <span className="text-[#8e918f]">Fällig am:</span>
+              <span className="text-zinc-400">Fällig am:</span>
              <input
                type="date"
                value={dueDate}
                onChange={(e) => setDueDate(e.target.value)}
-                className="bg-[#131314] text-[#e3e3e3] px-3 py-1 rounded-full border border-[#3c4043] text-xs focus:outline-none focus:border-[#a8c7fa]"
+                className="bg-[#16171a] text-white px-3 py-1 rounded-full border border-white/[0.08] text-xs focus:outline-none focus:border-[#1d8cf8]"
              />
            </div>
          </div>
@@ -266,7 +266,7 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
  return (
    <div className="max-w-4xl mx-auto space-y-6">
      {/* Top Space Bar & Realtime Indicator */}
-      <div className="p-4 sm:p-5 rounded-2xl bg-[#1e1f20] border border-white/[0.08] flex flex-wrap items-center justify-between gap-3">
+      <div className="p-4 sm:p-5 rounded-2xl bg-[#222428] border border-white/[0.08] flex flex-wrap items-center justify-between gap-3">
        <div className="flex flex-wrap items-center gap-2">
          {spaces.map((sp) => (
            <button
@@ -274,8 +274,8 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
              onClick={() => setActiveSpace(sp)}
              className={`h-9 px-4 rounded-full text-xs sm:text-sm font-medium flex items-center gap-2 transition-colors ${
                activeSpace?.id === sp.id
-                  ? 'bg-[#282a2c] text-[#a8c7fa] border border-[#a8c7fa]/30'
+                  ? 'bg-[#1d8cf8] text-white shadow-sm'
-                  : 'bg-[#131314] text-[#c4c7c5] hover:text-[#e3e3e3] border border-white/[0.08]'
+                  : 'bg-[#16171a] text-zinc-300 hover:text-white border border-white/[0.06]'
              }`}
            >
              <span>{sp.icon}</span>
@@ -285,16 +285,16 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
          <button
            onClick={() => setShowNewSpaceModal((prev) => !prev)}
-            className="h-9 px-3.5 rounded-full bg-[#131314] hover:bg-[#282a2c] border border-white/[0.08] text-xs text-[#c4c7c5] hover:text-[#e3e3e3] flex items-center gap-1.5 transition-colors"
+            className="h-9 px-3.5 rounded-full bg-[#16171a] hover:bg-[#2b2d33] border border-white/[0.06] text-xs text-zinc-300 hover:text-white flex items-center gap-1.5 transition-colors"
          >
-            <Plus className="w-3.5 h-3.5 text-[#a8c7fa]" /> Space
+            <Plus className="w-3.5 h-3.5 text-[#1d8cf8]" /> Space
          </button>
          <button
            onClick={() => setShowJoinModal((prev) => !prev)}
-            className="h-9 px-3.5 rounded-full bg-[#131314] hover:bg-[#282a2c] border border-white/[0.08] text-xs text-[#c4c7c5] hover:text-[#e3e3e3] flex items-center gap-1.5 transition-colors"
+            className="h-9 px-3.5 rounded-full bg-[#16171a] hover:bg-[#2b2d33] border border-white/[0.06] text-xs text-zinc-300 hover:text-white flex items-center gap-1.5 transition-colors"
          >
-            <UserPlus className="w-3.5 h-3.5 text-[#a8c7fa]" /> Code einlösen
+            <UserPlus className="w-3.5 h-3.5 text-[#1d8cf8]" /> Code einlösen
          </button>
        </div>
@@ -304,8 +304,8 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
            <div
              className={`h-8 px-3 rounded-full text-xs flex items-center gap-1.5 ${
                wsConnected
-                  ? 'bg-[#a8dab5]/10 text-[#a8dab5] border border-[#a8dab5]/25'
+                  ? 'bg-[#22c55e]/15 text-[#22c55e] border border-[#22c55e]/30'
-                  : 'bg-[#282a2c] text-[#8e918f] border border-white/[0.08]'
+                  : 'bg-[#2b2d33] text-zinc-400 border border-white/[0.06]'
              }`}
            >
              <Radio className={`w-3.5 h-3.5 ${wsConnected ? 'animate-pulse' : ''}`} />
@@ -315,14 +315,14 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
            <button
              onClick={copyInviteCode}
              title="Einladungscode für Partner oder Familie kopieren"
-              className="h-8 px-3 rounded-full bg-[#131314] hover:bg-[#282a2c] border border-white/[0.08] text-xs text-[#c4c7c5] hover:text-[#e3e3e3] flex items-center gap-1.5 transition-colors"
+              className="h-8 px-3 rounded-full bg-[#16171a] hover:bg-[#2b2d33] border border-white/[0.06] text-xs text-zinc-300 hover:text-white flex items-center gap-1.5 transition-colors"
            >
-              <Users className="w-3.5 h-3.5 text-[#a8c7fa]" />
+              <Users className="w-3.5 h-3.5 text-[#1d8cf8]" />
              <span>Code: {activeSpace.inviteCode}</span>
              {copiedInvite ? (
-                <Check className="w-3.5 h-3.5 text-[#a8dab5]" />
+                <Check className="w-3.5 h-3.5 text-[#22c55e]" />
              ) : (
-                <Copy className="w-3 h-3 text-[#8e918f]" />
+                <Copy className="w-3 h-3 text-zinc-400" />
              )}
            </button>
          </div>
@@ -333,19 +333,19 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
      {showNewSpaceModal && (
        <form
          onSubmit={handleCreateSpace}
-          className="p-4 rounded-2xl bg-[#1e1f20] border border-white/[0.08] flex items-center gap-3"
+          className="p-4 rounded-2xl bg-[#222428] border border-white/[0.08] flex items-center gap-3"
        >
          <input
            type="text"
            value={newSpaceName}
            onChange={(e) => setNewSpaceName(e.target.value)}
            placeholder="Name des neuen Familien-/Team-Spaces (z. B. Urlaub 2026)…"
-            className="flex-1 h-10 px-4 rounded-full bg-[#131314] text-sm text-[#e3e3e3] placeholder-[#8e918f] border border-white/[0.08] focus:outline-none focus:border-[#a8c7fa] transition-colors"
+            className="flex-1 h-10 px-4 rounded-full bg-[#16171a] text-sm text-white placeholder-zinc-500 border border-white/[0.08] focus:outline-none focus:border-[#1d8cf8] transition-colors"
            autoFocus
          />
          <button
            type="submit"
-            className="h-10 px-5 rounded-full bg-[#a8c7fa] text-[#041e49] font-medium text-xs sm:text-sm hover:bg-[#c2e7ff] transition-colors"
+            className="h-10 px-5 rounded-full bg-[#1d8cf8] hover:bg-[#3b9cfc] text-white font-medium text-xs sm:text-sm transition-colors shadow-sm"
          >
            Space anlegen
          </button>
@@ -355,19 +355,19 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
      {showJoinModal && (
        <form
          onSubmit={handleJoinSpace}
-          className="p-4 rounded-2xl bg-[#1e1f20] border border-white/[0.08] flex items-center gap-3"
+          className="p-4 rounded-2xl bg-[#222428] border border-white/[0.08] flex items-center gap-3"
        >
          <input
            type="text"
            value={joinCode}
            onChange={(e) => setJoinCode(e.target.value)}
            placeholder="Invite-Code des Partners eingeben…"
-            className="flex-1 h-10 px-4 rounded-full bg-[#131314] text-sm text-[#e3e3e3] placeholder-[#8e918f] border border-white/[0.08] focus:outline-none focus:border-[#a8c7fa] uppercase transition-colors"
+            className="flex-1 h-10 px-4 rounded-full bg-[#16171a] text-sm text-white placeholder-zinc-500 border border-white/[0.08] focus:outline-none focus:border-[#1d8cf8] uppercase transition-colors"
            autoFocus
          />
          <button
            type="submit"
-            className="h-10 px-5 rounded-full bg-[#a8c7fa] text-[#041e49] font-medium text-xs sm:text-sm hover:bg-[#c2e7ff] transition-colors"
+            className="h-10 px-5 rounded-full bg-[#1d8cf8] hover:bg-[#3b9cfc] text-white font-medium text-xs sm:text-sm transition-colors shadow-sm"
          >
            Beitreten
          </button>
@@ -383,15 +383,17 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
            <button
              key={lst.id}
              onClick={() => setActiveListId(lst.id)}
-              className={`h-10 px-4 rounded-full text-xs sm:text-sm font-medium flex items-center gap-2 transition-colors ${
+              className={`h-10 px-4 rounded-full text-xs sm:text-sm font-medium flex items-center gap-2 transition-all ${
                isSelected
-                  ? 'bg-[#282a2c] text-[#e3e3e3] border border-white/[0.12]'
+                  ? 'bg-[#1d8cf8] text-white shadow-sm'
-                  : 'bg-[#131314] text-[#c4c7c5] hover:text-[#e3e3e3] border border-white/[0.08]'
+                  : 'bg-[#222428] text-zinc-300 hover:text-white border border-white/[0.06]'
              }`}
            >
              <span>{lst.icon}</span>
              <span>{lst.title}</span>
-              <span className="px-2 py-0.2 rounded-full bg-[#131314] text-xs text-[#a8c7fa] border border-white/[0.06]">
+              <span className={`px-2 py-0.2 rounded-full text-xs ${
                isSelected ? 'bg-white/20 text-white' : 'bg-[#16171a] text-zinc-400'
              }`}>
                {openCount}
              </span>
            </button>
@@ -400,9 +402,9 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
        <button
          onClick={() => setShowNewListModal((prev) => !prev)}
-          className="h-10 px-4 rounded-full bg-[#131314] hover:bg-[#1e1f20] border border-white/[0.08] text-xs sm:text-sm text-[#c4c7c5] hover:text-[#e3e3e3] flex items-center gap-1.5 transition-colors"
+          className="h-10 px-4 rounded-full bg-[#222428] hover:bg-[#2b2d33] border border-white/[0.06] text-xs sm:text-sm text-zinc-300 hover:text-white flex items-center gap-1.5 transition-colors"
        >
-          <Plus className="w-4 h-4 text-[#a8c7fa]" />
+          <Plus className="w-4 h-4 text-[#1d8cf8]" />
          <span>Neue Liste</span>
        </button>
      </div>
@@ -410,7 +412,7 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
      {showNewListModal && (
        <form
          onSubmit={handleCreateList}
-          className="p-4 rounded-2xl bg-[#1e1f20] border border-white/[0.08] flex flex-wrap items-center gap-3"
+          className="p-4 rounded-2xl bg-[#222428] border border-white/[0.08] flex flex-wrap items-center gap-3"
        >
          <div className="flex items-center gap-1.5">
            {['🛒', '🏔️', '🍕', '🎉', '🧰', '🎁'].map((ic) => (
@@ -420,8 +422,8 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
                onClick={() => setNewListIcon(ic)}
                className={`w-9 h-9 rounded-full flex items-center justify-center transition-colors ${
                  newListIcon === ic
-                    ? 'bg-[#a8c7fa]/20 border border-[#a8c7fa]/40 text-[#a8c7fa]'
+                    ? 'bg-[#1d8cf8]/20 border border-[#1d8cf8] text-[#1d8cf8]'
-                    : 'bg-[#131314] hover:bg-[#282a2c] border border-white/[0.08]'
+                    : 'bg-[#16171a] hover:bg-[#2b2d33] border border-white/[0.06]'
                }`}
              >
                {ic}
@@ -433,12 +435,12 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
            value={newListTitle}
            onChange={(e) => setNewListTitle(e.target.value)}
            placeholder="Titel der Liste (z. B. Baumarkt, Drogerie, Camping)…"
-            className="flex-1 h-10 px-4 rounded-full bg-[#131314] text-sm text-[#e3e3e3] placeholder-[#8e918f] border border-white/[0.08] focus:outline-none focus:border-[#a8c7fa] transition-colors"
+            className="flex-1 h-10 px-4 rounded-full bg-[#16171a] text-sm text-white placeholder-zinc-500 border border-white/[0.08] focus:outline-none focus:border-[#1d8cf8] transition-colors"
            autoFocus
          />
          <button
            type="submit"
-            className="h-10 px-5 rounded-full bg-[#a8c7fa] text-[#041e49] font-medium text-xs sm:text-sm hover:bg-[#c2e7ff] transition-colors"
+            className="h-10 px-5 rounded-full bg-[#1d8cf8] hover:bg-[#3b9cfc] text-white font-medium text-xs sm:text-sm transition-colors shadow-sm"
          >
            Liste erstellen
          </button>
@@ -447,7 +449,7 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
      {/* Active Shared List Card */}
      {activeList ? (
-        <div className="p-6 sm:p-8 rounded-2xl bg-[#1e1f20] border border-white/[0.08]">
+        <div className="p-6 sm:p-8 rounded-3xl bg-[#222428] border border-white/[0.08]">
          {/* Quick-Add Pill Form */}
          <form onSubmit={handleAddItem} className="space-y-3 mb-6">
            <div className="flex flex-col sm:flex-row gap-2.5">
@@ -456,7 +458,7 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
                value={newItemText}
                onChange={(e) => setNewItemText(e.target.value)}
                placeholder={`Eintrag zu "${activeList.title}" hinzufügen (z. B. Hafermilch)…`}
-                className="flex-1 h-11 px-5 rounded-full bg-[#131314] text-sm sm:text-base text-[#e3e3e3] placeholder-[#8e918f] border border-white/[0.08] focus:outline-none focus:border-[#a8c7fa] transition-colors"
+                className="flex-1 h-11 px-5 rounded-full bg-[#16171a] text-sm sm:text-base text-white placeholder-zinc-500 border border-white/[0.08] focus:outline-none focus:border-[#1d8cf8] transition-colors"
              />
              <div className="flex gap-2">
                <input
@@ -464,12 +466,12 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
                  value={newItemQty}
                  onChange={(e) => setNewItemQty(e.target.value)}
                  placeholder="Menge (z.B. 2x)"
-                  className="w-32 h-11 px-4 rounded-full bg-[#131314] text-sm text-[#e3e3e3] placeholder-[#8e918f] border border-white/[0.08] focus:outline-none focus:border-[#a8c7fa] transition-colors"
+                  className="w-32 h-11 px-4 rounded-full bg-[#16171a] text-sm text-white placeholder-zinc-500 border border-white/[0.08] focus:outline-none focus:border-[#1d8cf8] transition-colors"
                />
                <button
                  type="submit"
                  disabled={!newItemText.trim()}
-                  className="h-11 px-5 rounded-full bg-[#a8c7fa] disabled:bg-[#282a2c] text-[#041e49] disabled:text-[#8e918f] font-medium text-sm flex items-center gap-1.5 hover:bg-[#c2e7ff] transition-colors"
+                  className="h-11 px-5 rounded-full bg-[#1d8cf8] disabled:bg-[#2b2d33] text-white disabled:text-zinc-500 font-medium text-sm flex items-center gap-1.5 hover:bg-[#3b9cfc] transition-colors shadow-sm"
                >
                  <Plus className="w-4 h-4" />
                  <span>Hinzufügen</span>
@@ -479,7 +481,7 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
            {/* Category Quick-Select Pills */}
            <div className="flex flex-wrap items-center gap-1.5">
-              <span className="text-xs text-[#8e918f] mr-1">Kategorie:</span>
+              <span className="text-xs text-zinc-400 mr-1">Kategorie:</span>
              {CATEGORIES.map((cat) => (
                <button
                  key={cat}
@@ -487,8 +489,8 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
                  onClick={() => setNewItemCategory((prev) => (prev === cat ? '' : cat))}
                  className={`px-3 py-1 rounded-full text-xs transition-colors ${
                    newItemCategory === cat
-                      ? 'bg-[#a8c7fa]/15 text-[#a8c7fa] border border-[#a8c7fa]/25 font-medium'
+                      ? 'bg-[#1d8cf8] text-white font-medium'
-                      : 'bg-[#131314] text-[#8e918f] hover:text-[#c4c7c5] border border-white/[0.08]'
+                      : 'bg-[#16171a] text-zinc-400 hover:text-white border border-white/[0.06]'
                  }`}
                >
                  {cat}
@@ -500,8 +502,8 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
          {/* Open Items */}
          <div className="space-y-2">
            {openItems.length === 0 ? (
-              <div className="py-8 text-center text-[#8e918f] text-sm flex flex-col items-center gap-2">
+              <div className="py-8 text-center text-zinc-400 text-sm flex flex-col items-center gap-2">
-                <Sparkles className="w-5 h-5 text-[#a8dab5]" />
+                <Sparkles className="w-5 h-5 text-[#22c55e]" />
                <span>Alles erledigt. Keine offenen Punkte auf dieser Liste.</span>
              </div>
            ) : (
@@ -509,20 +511,20 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
                <div
                  key={item.id}
                  onClick={() => handleToggleItem(item)}
-                  className="p-3.5 sm:p-4 rounded-2xl bg-[#131314] hover:bg-[#282a2c]/60 border border-white/[0.08] flex items-center justify-between gap-3 cursor-pointer transition-colors group"
+                  className="p-3.5 sm:p-4 rounded-2xl bg-[#16171a] hover:bg-[#282a2f] border border-white/[0.06] flex items-center justify-between gap-3 cursor-pointer transition-colors group"
                >
                  <div className="flex items-center gap-3.5 min-w-0">
-                    <Circle className="w-5 h-5 text-[#8e918f] group-hover:text-[#a8c7fa] flex-shrink-0 transition-colors" />
+                    <Circle className="w-5 h-5 text-zinc-500 group-hover:text-[#1d8cf8] flex-shrink-0 transition-colors" />
-                    <span className="text-sm sm:text-base font-normal text-[#e3e3e3] truncate">
+                    <span className="text-sm sm:text-base font-normal text-white truncate">
                      {item.content}
                    </span>
                    {item.quantity && (
-                      <span className="px-2.5 py-0.5 rounded-full bg-[#1e1f20] text-[#a8c7fa] border border-white/[0.06] text-xs font-medium">
+                      <span className="px-2.5 py-0.5 rounded-full bg-[#222428] text-[#1d8cf8] border border-white/[0.06] text-xs font-semibold">
                        {item.quantity}
                      </span>
                    )}
                    {item.category && (
-                      <span className="hidden sm:inline px-2.5 py-0.5 rounded-full bg-[#1e1f20] text-[#8e918f] text-xs">
+                      <span className="hidden sm:inline px-2.5 py-0.5 rounded-full bg-[#222428] text-zinc-400 text-xs">
                        {item.category}
                      </span>
                    )}
@@ -534,7 +536,7 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
                      e.stopPropagation();
                      handleDeleteItem(item.id);
                    }}
-                    className="w-8 h-8 rounded-full hover:bg-[#f28b82]/20 text-[#8e918f] hover:text-[#f28b82] flex items-center justify-center transition-colors"
+                    className="w-8 h-8 rounded-full hover:bg-[#ef4444]/20 text-zinc-500 hover:text-[#ef4444] flex items-center justify-center transition-colors"
                  >
                    <Trash2 className="w-3.5 h-3.5" />
                  </button>
@@ -547,12 +549,12 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
          {completedItems.length > 0 && (
            <div className="mt-8 pt-6 border-t border-white/[0.06]">
              <div className="flex items-center justify-between mb-3">
-                <span className="text-xs font-medium uppercase tracking-wider text-[#8e918f]">
+                <span className="text-xs font-medium uppercase tracking-wider text-zinc-400">
                  Bereits im Einkaufswagen / Erledigt ({completedItems.length})
                </span>
                <button
                  onClick={handleClearCompleted}
-                  className="px-3.5 py-1 rounded-full bg-[#131314] hover:bg-[#f28b82]/15 border border-white/[0.08] text-xs text-[#8e918f] hover:text-[#f28b82] transition-colors"
+                  className="px-3.5 py-1 rounded-full bg-[#16171a] hover:bg-[#ef4444]/15 border border-white/[0.06] text-xs text-zinc-400 hover:text-[#ef4444] transition-colors"
                >
                  Erledigte aufräumen
                </button>
@@ -563,19 +565,19 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
                  <div
                    key={item.id}
                    onClick={() => handleToggleItem(item)}
-                    className="p-3 rounded-2xl bg-[#131314]/50 border border-white/[0.04] hover:bg-[#131314]/80 flex items-center justify-between gap-3 cursor-pointer transition-colors"
+                    className="p-3 rounded-2xl bg-[#16171a]/50 border border-white/[0.04] hover:bg-[#16171a]/80 flex items-center justify-between gap-3 cursor-pointer transition-colors"
                  >
                    <div className="flex items-center gap-3 min-w-0">
-                      <CheckCircle2 className="w-5 h-5 text-[#a8dab5] flex-shrink-0" />
+                      <CheckCircle2 className="w-5 h-5 text-[#22c55e] flex-shrink-0" />
-                      <span className="text-sm text-[#8e918f] line-through truncate">
+                      <span className="text-sm text-zinc-400 line-through truncate">
                        {item.content}
                      </span>
                      {item.quantity && (
-                        <span className="text-xs text-[#8e918f]">({item.quantity})</span>
+                        <span className="text-xs text-zinc-500">({item.quantity})</span>
                      )}
                    </div>
                    {item.completedByName && (
-                      <span className="text-xs text-[#8e918f]">✓ {item.completedByName}</span>
+                      <span className="text-xs text-zinc-500">✓ {item.completedByName}</span>
                    )}
                  </div>
                ))}
@@ -94,16 +94,16 @@ export const EcosystemView: React.FC<EcosystemViewProps> = ({ onIngested }) => {
  return (
    <div className="max-w-4xl mx-auto space-y-6">
      {/* Section 1: API Keys for Smarthome & Automation */}
-      <div className="p-6 sm:p-8 rounded-2xl bg-[#1e1f20] border border-white/[0.08]">
+      <div className="p-6 sm:p-8 rounded-3xl bg-[#222428] border border-white/[0.08]">
        <div className="flex items-center gap-3 mb-2">
-          <div className="w-10 h-10 rounded-full bg-[#a8c7fa]/15 flex items-center justify-center">
+          <div className="w-10 h-10 rounded-xl bg-[#1d8cf8] text-white flex items-center justify-center shadow-sm">
-            <Key className="w-5 h-5 text-[#a8c7fa]" />
+            <Key className="w-5 h-5" />
          </div>
          <div>
-            <h3 className="text-lg font-medium text-[#e3e3e3]">
+            <h3 className="text-lg font-bold text-white">
              Webhooks & Ingestion API-Schlüssel
            </h3>
-            <p className="text-xs sm:text-sm text-[#8e918f]">
+            <p className="text-xs sm:text-sm text-zinc-400">
              Verbinde Home Assistant, Zigbee2MQTT, n8n oder eigene Cronjobs direkt mit deiner MindSift Inbox.
            </p>
          </div>
@@ -115,11 +115,11 @@ export const EcosystemView: React.FC<EcosystemViewProps> = ({ onIngested }) => {
            value={newKeyName}
            onChange={(e) => setNewKeyName(e.target.value)}
            placeholder="Bezeichnung (z. B. Home Assistant, Proxmox Backup, Rauchmelder)…"
-            className="flex-1 h-11 px-4 rounded-full bg-[#131314] text-sm text-[#e3e3e3] placeholder-[#8e918f] border border-white/[0.08] focus:outline-none focus:border-[#a8c7fa] transition-colors"
+            className="flex-1 h-11 px-4 rounded-full bg-[#16171a] text-sm text-white placeholder-zinc-500 border border-white/[0.08] focus:outline-none focus:border-[#1d8cf8] transition-colors"
          />
          <button
            type="submit"
-            className="h-11 px-6 rounded-full bg-[#a8c7fa] text-[#041e49] font-medium text-sm flex items-center justify-center gap-1.5 hover:bg-[#c2e7ff] transition-colors"
+            className="h-11 px-6 rounded-full bg-[#1d8cf8] hover:bg-[#3b9cfc] text-white font-medium text-sm flex items-center justify-center gap-1.5 transition-colors shadow-sm"
          >
            <Plus className="w-4 h-4" />
            <span>API-Key erzeugen</span>
@@ -127,18 +127,18 @@ export const EcosystemView: React.FC<EcosystemViewProps> = ({ onIngested }) => {
        </form>
        {newlyCreatedKey && (
-          <div className="mt-4 p-4 rounded-2xl bg-[#a8dab5]/10 border border-[#a8dab5]/30 flex flex-wrap items-center justify-between gap-3">
+          <div className="mt-4 p-4 rounded-2xl bg-[#22c55e]/15 border border-[#22c55e]/30 flex flex-wrap items-center justify-between gap-3">
            <div className="min-w-0">
-              <p className="text-xs font-medium text-[#a8dab5] mb-1">
+              <p className="text-xs font-semibold text-[#22c55e] mb-1">
                Neuer API-Schlüssel erstellt (bitte jetzt kopieren):
              </p>
-              <code className="text-xs sm:text-sm font-mono text-[#e3e3e3] break-all">
+              <code className="text-xs sm:text-sm font-mono text-white break-all">
                {newlyCreatedKey}
              </code>
            </div>
            <button
              onClick={() => handleCopy(newlyCreatedKey)}
-              className="h-9 px-4 rounded-full bg-[#a8dab5] text-[#041e49] font-medium text-xs flex items-center gap-1.5 hover:bg-[#c2e7ff] transition-colors"
+              className="h-9 px-4 rounded-full bg-[#22c55e] text-white font-medium text-xs flex items-center gap-1.5 hover:bg-[#16a34a] transition-colors shadow-sm"
            >
              {copiedKey ? <Check className="w-3.5 h-3.5" /> : <Copy className="w-3.5 h-3.5" />}
              <span>{copiedKey ? 'Kopiert!' : 'Key kopieren'}</span>
@@ -149,27 +149,27 @@ export const EcosystemView: React.FC<EcosystemViewProps> = ({ onIngested }) => {
        {/* Active Keys List */}
        <div className="mt-5 space-y-2">
          {keys.length === 0 ? (
-            <p className="text-xs text-[#8e918f] py-2">
+            <p className="text-xs text-zinc-500 py-2">
              Noch keine dedizierten API-Schlüssel hinterlegt.
            </p>
          ) : (
            keys.map((k) => (
              <div
                key={k.id}
-                className="p-3.5 rounded-2xl bg-[#131314] border border-white/[0.08] flex items-center justify-between gap-3"
+                className="p-3.5 rounded-2xl bg-[#16171a] border border-white/[0.06] flex items-center justify-between gap-3"
              >
                <div>
-                  <span className="text-sm font-medium text-[#e3e3e3]">{k.name}</span>
+                  <span className="text-sm font-medium text-white">{k.name}</span>
-                  <span className="ml-3 text-xs font-mono text-[#a8c7fa]">{k.keyPrefix}</span>
+                  <span className="ml-3 text-xs font-mono text-[#1d8cf8]">{k.keyPrefix}</span>
                  {k.lastUsedAt && (
-                    <span className="ml-3 text-xs text-[#8e918f]">
+                    <span className="ml-3 text-xs text-zinc-500">
                      Zuletzt genutzt: {new Date(k.lastUsedAt).toLocaleDateString('de-DE')}
                    </span>
                  )}
                </div>
                <button
                  onClick={() => handleDeleteKey(k.id)}
-                  className="w-8 h-8 rounded-full hover:bg-[#f28b82]/20 text-[#8e918f] hover:text-[#f28b82] flex items-center justify-center transition-colors"
+                  className="w-8 h-8 rounded-full hover:bg-[#ef4444]/20 text-zinc-500 hover:text-[#ef4444] flex items-center justify-center transition-colors"
                >
                  <Trash2 className="w-3.5 h-3.5" />
                </button>
@@ -180,16 +180,16 @@ export const EcosystemView: React.FC<EcosystemViewProps> = ({ onIngested }) => {
      </div>
      {/* Section 2: Interactive Smarthome Webhook Simulator */}
-      <div className="p-6 sm:p-8 rounded-2xl bg-[#1e1f20] border border-white/[0.08]">
+      <div className="p-6 sm:p-8 rounded-3xl bg-[#222428] border border-white/[0.08]">
        <div className="flex items-center gap-3 mb-4">
-          <div className="w-10 h-10 rounded-full bg-[#a8c7fa]/15 flex items-center justify-center">
+          <div className="w-10 h-10 rounded-xl bg-[#a855f7] text-white flex items-center justify-center shadow-sm">
-            <Webhook className="w-5 h-5 text-[#a8c7fa]" />
+            <Webhook className="w-5 h-5" />
          </div>
          <div>
-            <h3 className="text-lg font-medium text-[#e3e3e3]">
+            <h3 className="text-lg font-bold text-white">
              Live Smarthome Webhook-Simulator
            </h3>
-            <p className="text-xs sm:text-sm text-[#8e918f]">
+            <p className="text-xs sm:text-sm text-zinc-400">
              Teste den Webhook-Endpunkt direkt hier – das Event landet sofort als Karte im Triage-Deck.
            </p>
          </div>
@@ -208,7 +208,7 @@ export const EcosystemView: React.FC<EcosystemViewProps> = ({ onIngested }) => {
                setSimTitle(preset.text);
                setSimPriority(preset.prio);
              }}
-              className="px-3.5 py-1.5 rounded-full bg-[#131314] hover:bg-[#282a2c] border border-white/[0.08] text-xs text-[#c4c7c5] hover:text-[#e3e3e3] transition-colors"
+              className="px-3.5 py-1.5 rounded-full bg-[#16171a] hover:bg-[#2b2d33] border border-white/[0.06] text-xs text-zinc-300 hover:text-white transition-colors"
            >
              {preset.label}
            </button>
@@ -220,12 +220,12 @@ export const EcosystemView: React.FC<EcosystemViewProps> = ({ onIngested }) => {
            type="text"
            value={simTitle}
            onChange={(e) => setSimTitle(e.target.value)}
-            className="flex-1 h-11 px-4 rounded-full bg-[#131314] text-sm text-[#e3e3e3] border border-white/[0.08] focus:outline-none focus:border-[#a8c7fa] transition-colors"
+            className="flex-1 h-11 px-4 rounded-full bg-[#16171a] text-sm text-white placeholder-zinc-500 border border-white/[0.08] focus:outline-none focus:border-[#1d8cf8] transition-colors"
          />
          <button
            type="button"
            onClick={handleSimulateWebhook}
-            className="h-11 px-6 rounded-full bg-[#a8c7fa] text-[#041e49] font-medium text-sm flex items-center justify-center gap-1.5 hover:bg-[#c2e7ff] transition-colors"
+            className="h-11 px-6 rounded-full bg-[#1d8cf8] hover:bg-[#3b9cfc] text-white font-medium text-sm flex items-center justify-center gap-1.5 transition-colors shadow-sm"
          >
            <Zap className="w-4 h-4" />
            <span>Webhook jetzt abfeuern</span>
@@ -233,16 +233,16 @@ export const EcosystemView: React.FC<EcosystemViewProps> = ({ onIngested }) => {
        </div>
        {simStatus && (
-          <p className="mt-3 text-xs font-medium text-[#a8dab5]">{simStatus}</p>
+          <p className="mt-3 text-xs font-medium text-[#22c55e]">{simStatus}</p>
        )}
        {/* Code Example Snippets */}
        <div className="mt-6 space-y-3">
-          <div className="flex items-center gap-2 text-xs font-medium text-[#8e918f]">
+          <div className="flex items-center gap-2 text-xs font-medium text-zinc-400">
-            <Terminal className="w-3.5 h-3.5 text-[#a8c7fa]" />
+            <Terminal className="w-3.5 h-3.5 text-[#1d8cf8]" />
            <span>cURL / Home Assistant REST Command:</span>
          </div>
-          <pre className="p-4 rounded-2xl bg-[#131314] border border-white/[0.08] font-mono text-xs text-[#a8dab5] overflow-x-auto">
+          <pre className="p-4 rounded-2xl bg-[#16171a] border border-white/[0.06] font-mono text-xs text-[#22c55e] overflow-x-auto">
 {`curl -X POST "${baseUrl}/api/v1/webhooks/ingest?token=${exampleToken}" \\
  -H "Content-Type: application/json" \\
  -d '{
@@ -255,16 +255,16 @@ export const EcosystemView: React.FC<EcosystemViewProps> = ({ onIngested }) => {
      </div>
      {/* Section 3: Data Sovereignty & Export */}
-      <div className="p-6 sm:p-8 rounded-2xl bg-[#1e1f20] border border-white/[0.08] flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
+      <div className="p-6 sm:p-8 rounded-3xl bg-[#222428] border border-white/[0.08] flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
        <div className="flex items-center gap-3">
-          <div className="w-10 h-10 rounded-full bg-[#a8dab5]/15 flex items-center justify-center flex-shrink-0">
+          <div className="w-10 h-10 rounded-xl bg-[#22c55e] text-white flex items-center justify-center flex-shrink-0 shadow-sm">
-            <ShieldCheck className="w-5 h-5 text-[#a8dab5]" />
+            <ShieldCheck className="w-5 h-5" />
          </div>
          <div>
-            <h3 className="text-base font-medium text-[#e3e3e3]">
+            <h3 className="text-base font-bold text-white">
              100 % Datensouveränität & Komplett-Export
            </h3>
-            <p className="text-xs sm:text-sm text-[#8e918f]">
+            <p className="text-xs sm:text-sm text-zinc-400">
              Exportiere jederzeit alle Gedanken, Aufgaben, Dokumente und geteilten Listen als portables JSON-Archiv.
            </p>
          </div>
@@ -272,7 +272,7 @@ export const EcosystemView: React.FC<EcosystemViewProps> = ({ onIngested }) => {
        <button
          onClick={handleFullExport}
-          className="h-11 px-6 rounded-full bg-[#a8dab5] text-[#041e49] font-medium text-sm flex items-center gap-2 hover:bg-[#c2e7ff] transition-colors flex-shrink-0"
+          className="h-11 px-6 rounded-full bg-[#22c55e] hover:bg-[#16a34a] text-white font-medium text-sm flex items-center gap-2 transition-colors flex-shrink-0 shadow-sm"
        >
          <Download className="w-4 h-4" />
          <span>Komplett-Backup (.json)</span>
@@ -91,27 +91,27 @@ export const TasksView: React.FC<TasksViewProps> = ({ onRefreshStats, onOpenDocu
  const doneTasks = tasks.filter((t) => t.isCompleted);
  return (
-    <div className="max-w-3xl mx-auto">
+    <div className="max-w-3xl mx-auto space-y-4">
      {/* Filter Pills */}
-      <div className="flex flex-wrap items-center justify-between gap-3 mb-6">
+      <div className="flex flex-wrap items-center justify-between gap-3 mb-2">
-        <div className="flex items-center gap-2">
+        <div className="flex items-center gap-1.5">
          <button
            onClick={() => setFilter('open')}
-            className={`h-9 px-4 rounded-full text-xs sm:text-sm font-medium transition-colors ${
+            className={`h-9 px-4 rounded-full text-xs sm:text-sm font-medium transition-all ${
              filter === 'open'
-                ? 'bg-[#282a2c] text-[#a8c7fa] border border-[#a8c7fa]/30'
+                ? 'bg-[#1d8cf8] text-white shadow-sm'
-                : 'text-[#c4c7c5] hover:text-[#e3e3e3] hover:bg-[#1e1f20] border border-transparent'
+                : 'text-zinc-400 hover:text-white hover:bg-[#222428]'
            }`}
          >
-            Offene Aufgaben ({openTasks.length})
+            Alle Offenen ({openTasks.length})
          </button>
          <button
            onClick={() => setFilter('done')}
-            className={`h-9 px-4 rounded-full text-xs sm:text-sm font-medium transition-colors ${
+            className={`h-9 px-4 rounded-full text-xs sm:text-sm font-medium transition-all ${
              filter === 'done'
-                ? 'bg-[#282a2c] text-[#a8dab5] border border-[#a8dab5]/30'
+                ? 'bg-[#1d8cf8] text-white shadow-sm'
-                : 'text-[#c4c7c5] hover:text-[#e3e3e3] hover:bg-[#1e1f20] border border-transparent'
+                : 'text-zinc-400 hover:text-white hover:bg-[#222428]'
            }`}
          >
            Erledigt ({doneTasks.length})
@@ -119,10 +119,10 @@ export const TasksView: React.FC<TasksViewProps> = ({ onRefreshStats, onOpenDocu
          <button
            onClick={() => setFilter('discarded')}
-            className={`h-9 px-4 rounded-full text-xs sm:text-sm font-medium transition-colors ${
+            className={`h-9 px-4 rounded-full text-xs sm:text-sm font-medium transition-all ${
              filter === 'discarded'
-                ? 'bg-[#282a2c] text-[#f28b82] border border-[#f28b82]/30'
+                ? 'bg-[#1d8cf8] text-white shadow-sm'
-                : 'text-[#c4c7c5] hover:text-[#e3e3e3] hover:bg-[#1e1f20] border border-transparent'
+                : 'text-zinc-400 hover:text-white hover:bg-[#222428]'
            }`}
          >
            Verworfen ({discarded.length})
@@ -132,7 +132,7 @@ export const TasksView: React.FC<TasksViewProps> = ({ onRefreshStats, onOpenDocu
        {filter === 'discarded' && discarded.length > 0 && (
          <button
            onClick={handlePurgeAllDiscarded}
-            className="h-8 px-3.5 rounded-full bg-[#f28b82]/10 hover:bg-[#f28b82]/20 border border-[#f28b82]/25 text-[#f28b82] text-xs font-medium flex items-center gap-1.5 transition-colors"
+            className="h-8 px-3.5 rounded-full bg-[#ef4444]/15 hover:bg-[#ef4444]/25 text-[#ef4444] text-xs font-medium flex items-center gap-1.5 transition-colors"
          >
            <Trash2 className="w-3.5 h-3.5" />
            Papierkorb leeren
@@ -141,32 +141,35 @@ export const TasksView: React.FC<TasksViewProps> = ({ onRefreshStats, onOpenDocu
      </div>
      {loading ? (
-        <div className="p-8 text-center text-[#8e918f] text-sm">Lade Aufgaben…</div>
+        <div className="p-8 text-center text-zinc-500 text-sm">Lade Aufgaben…</div>
      ) : filter === 'discarded' ? (
        <div className="space-y-2.5">
          {discarded.length === 0 ? (
-            <div className="p-10 rounded-2xl bg-[#1e1f20] border border-white/[0.08] text-center text-[#8e918f] text-sm">
+            <div className="p-10 rounded-2xl bg-[#222428] border border-white/[0.06] text-center text-zinc-400 text-sm">
              Keine verworfenen Gedanken im Papierkorb.
            </div>
          ) : (
            discarded.map((item) => (
              <div
                key={item.id}
-                className="p-4 rounded-2xl bg-[#1e1f20] border border-white/[0.08] flex items-center justify-between gap-4"
+                className="p-3.5 sm:p-4 rounded-2xl bg-[#222428] border border-white/[0.06] flex items-center justify-between gap-4"
              >
-                <div className="min-w-0 flex-1">
+                <div className="flex items-center gap-3 min-w-0 flex-1">
-                  <p className="text-sm text-[#8e918f] line-through truncate">{item.content}</p>
+                  <div className="w-9 h-9 rounded-xl bg-zinc-700 text-zinc-300 flex items-center justify-center flex-shrink-0">
                    <Trash2 className="w-4 h-4" />
                  </div>
                  <p className="text-sm text-zinc-400 line-through truncate">{item.content}</p>
                </div>
                <div className="flex items-center gap-2 flex-shrink-0">
                  <button
                    onClick={() => handleRestore(item)}
-                    className="h-8 px-3 rounded-full bg-[#282a2c] hover:bg-[#323639] border border-white/[0.08] text-xs text-[#a8c7fa] flex items-center gap-1.5 transition-colors"
+                    className="h-8 px-3 rounded-full bg-[#2b2d33] hover:bg-[#32353b] text-xs text-[#1d8cf8] flex items-center gap-1.5 transition-colors"
                  >
-                    <RotateCcw className="w-3.5 h-3.5" /> Zurück in Inbox
+                    <RotateCcw className="w-3.5 h-3.5" /> Zurück
                  </button>
                  <button
                    onClick={() => handleDeletePermanent(item.id)}
-                    className="w-8 h-8 rounded-full bg-[#282a2c] hover:bg-[#f28b82]/20 border border-white/[0.08] text-[#8e918f] hover:text-[#f28b82] flex items-center justify-center transition-colors"
+                    className="w-8 h-8 rounded-full bg-[#2b2d33] hover:bg-[#ef4444]/20 text-zinc-400 hover:text-[#ef4444] flex items-center justify-center transition-colors"
                  >
                    <Trash2 className="w-3.5 h-3.5" />
                  </button>
@@ -178,92 +181,119 @@ export const TasksView: React.FC<TasksViewProps> = ({ onRefreshStats, onOpenDocu
      ) : (
        <div className="space-y-2.5">
          {(filter === 'open' ? openTasks : doneTasks).length === 0 ? (
-            <div className="p-10 rounded-2xl bg-[#1e1f20] border border-white/[0.08] text-center text-[#8e918f] text-sm">
+            <div className="p-10 rounded-2xl bg-[#222428] border border-white/[0.06] text-center text-zinc-400 text-sm">
              {filter === 'open'
-                ? 'Keine offenen Aufgaben. Wische Gedanken in der Triage nach rechts, um Aufgaben anzulegen.'
+                ? 'Keine offenen Aufgaben vorhanden.'
                : 'Noch keine erledigten Aufgaben.'}
            </div>
          ) : (
-            (filter === 'open' ? openTasks : doneTasks).map((task) => (
+            (filter === 'open' ? openTasks : doneTasks).map((task, idx) => {
-              <div
+              // Alternate squircle colors matching template: blue, green, purple, orange, violet
-                key={task.id}
+              const squircleColors = [
-                className="p-4 sm:p-5 rounded-2xl bg-[#1e1f20] hover:bg-[#282a2c]/60 border border-white/[0.08] flex flex-col sm:flex-row sm:items-center justify-between gap-3 transition-colors"
+                'bg-[#1d8cf8]', // electric blue
-              >
+                'bg-[#22c55e]', // vibrant green
-                <div className="flex items-start gap-3.5 min-w-0 flex-1">
+                'bg-[#a855f7]', // purple
-                  <button
+                'bg-[#f97316]', // orange
-                    onClick={() => handleToggleDone(task)}
+                'bg-[#8b5cf6]', // violet
-                    className="mt-0.5 flex-shrink-0 text-[#8e918f] hover:text-[#a8c7fa] transition-colors"
+              ];
-                  >
+              const squircleBg = task.priority === 'urgent'
-                    {task.isCompleted ? (
+                ? 'bg-[#ef4444]'
-                      <CheckCircle2 className="w-5 h-5 text-[#a8dab5]" />
+                : task.isCompleted
-                    ) : (
+                ? 'bg-[#a855f7]'
-                      <Circle className="w-5 h-5" />
+                : squircleColors[idx % squircleColors.length];
                    )}
                  </button>
-                  <div className="min-w-0 flex-1">
+              // In template: active/top items have a thin bright green outline
-                    <p
+              const isHighlightGreen = !task.isCompleted && idx < 3;
-                      className={`text-sm sm:text-base font-normal break-words ${
+
-                        task.isCompleted ? 'line-through text-[#8e918f]' : 'text-[#e3e3e3]'
+              return (
-                      }`}
+                <div
                  key={task.id}
                  className={`p-3.5 sm:p-4 rounded-2xl bg-[#222428] flex flex-col sm:flex-row sm:items-center justify-between gap-3 transition-colors ${
                    isHighlightGreen
                      ? 'border border-[#22c55e]/80 shadow-[0_0_12px_-4px_rgba(34,197,94,0.3)]'
                      : 'border border-white/[0.06]'
                  } ${task.isCompleted ? 'opacity-75' : ''}`}
                >
                  <div className="flex items-center gap-3.5 min-w-0 flex-1">
                    {/* Template Squircle Icon */}
                    <button
                      onClick={() => handleToggleDone(task)}
                      className={`w-10 h-10 rounded-xl ${squircleBg} text-white flex items-center justify-center flex-shrink-0 shadow-sm transition-transform active:scale-95`}
                      title={task.isCompleted ? 'Als offen markieren' : 'Als erledigt abhaken'}
                    >
-                      {task.content}
+                      {task.isCompleted ? (
-                    </p>
+                        <Check className="w-5 h-5 stroke-[2.5]" />
                      ) : task.priority === 'urgent' ? (
                        <AlertCircle className="w-5 h-5" />
                      ) : (
                        <CheckCircle2 className="w-5 h-5" />
                      )}
                    </button>
-                    <div className="flex flex-wrap items-center gap-2 mt-2">
+                    <div className="min-w-0 flex-1">
-                      {task.priority === 'urgent' && (
+                      <p
-                        <span className="px-2.5 py-0.5 rounded-full bg-[#f28b82]/15 text-[#f28b82] border border-[#f28b82]/25 text-xs flex items-center gap-1 font-medium">
+                        className={`text-sm sm:text-base font-medium break-words leading-snug ${
-                          <AlertCircle className="w-3 h-3" /> Dringend
+                          task.isCompleted ? 'line-through text-zinc-500' : 'text-white'
-                        </span>
+                        }`}
-                      )}
+                      >
-                      {task.priority === 'high' && (
+                        {task.content}
-                        <span className="px-2.5 py-0.5 rounded-full bg-[#a8c7fa]/15 text-[#a8c7fa] border border-[#a8c7fa]/25 text-xs font-medium">
+                      </p>
-                          Hoch
+
-                        </span>
+                      <div className="flex flex-wrap items-center gap-2 mt-1">
-                      )}
+                        {task.priority === 'urgent' && (
-                      {task.tags?.map((tag) => (
+                          <span className="px-2 py-0.5 rounded-full bg-[#ef4444]/20 text-[#ef4444] text-[11px] font-semibold">
-                        <span
+                            Dringend
-                          key={tag}
+                          </span>
-                          className="px-2.5 py-0.5 rounded-full bg-[#131314] text-[#c4c7c5] border border-white/[0.08] text-xs flex items-center gap-1"
+                        )}
-                        >
+                        {task.priority === 'high' && (
-                          <Tag className="w-2.5 h-2.5 text-[#8e918f]" />#{tag}
+                          <span className="px-2 py-0.5 rounded-full bg-[#f97316]/20 text-[#f97316] text-[11px] font-semibold">
-                        </span>
+                            Wichtig
-                      ))}
+                          </span>
                        )}
                        {task.tags?.map((tag) => (
                          <span
                            key={tag}
                            className="px-2 py-0.5 rounded-full bg-[#16171a] text-zinc-400 text-[11px] flex items-center gap-1"
                          >
                            #{tag}
                          </span>
                        ))}
                      </div>
                    </div>
                  </div>
                </div>
-                {/* Action Controls */}
+                  {/* Action Controls */}
-                <div className="flex items-center gap-2 self-end sm:self-center flex-shrink-0">
+                  <div className="flex items-center gap-2 self-end sm:self-center flex-shrink-0">
-                  <div className="relative flex items-center">
+                    <div className="relative flex items-center">
-                    <Calendar className="w-3.5 h-3.5 text-[#a8c7fa] absolute left-3 pointer-events-none" />
+                      <Calendar className="w-3.5 h-3.5 text-zinc-400 absolute left-3 pointer-events-none" />
-                    <input
+                      <input
-                      type="date"
+                        type="date"
-                      value={task.dueDate || ''}
+                        value={task.dueDate || ''}
-                      onChange={(e) => handleDueDateChange(task, e.target.value)}
+                        onChange={(e) => handleDueDateChange(task, e.target.value)}
-                      className="pl-8 pr-3 py-1 rounded-full bg-[#131314] text-[#e3e3e3] text-xs border border-white/[0.08] focus:outline-none focus:border-[#a8c7fa] transition-colors"
+                        className="pl-8 pr-3 py-1 rounded-full bg-[#16171a] text-white text-xs border border-white/[0.08] focus:outline-none focus:border-[#1d8cf8] transition-colors"
-                    />
+                      />
                    </div>
                    <button
                      onClick={() => handleConvertToDoc(task)}
                      title="Als Notiz / Projekt vertiefen"
                      className="h-8 px-3 rounded-full bg-[#2b2d33] hover:bg-[#32353b] text-xs text-zinc-300 hover:text-white flex items-center gap-1.5 transition-colors"
                    >
                      <FileText className="w-3.5 h-3.5 text-[#1d8cf8]" />
                      <span className="hidden md:inline">Vertiefen</span>
                    </button>
                    <button
                      onClick={() => handleDeletePermanent(task.id)}
                      title="Löschen"
                      className="w-8 h-8 rounded-full bg-[#2b2d33] hover:bg-[#ef4444]/20 text-zinc-400 hover:text-[#ef4444] flex items-center justify-center transition-colors"
                    >
                      <Trash2 className="w-3.5 h-3.5" />
                    </button>
                  </div>
                  <button
                    onClick={() => handleConvertToDoc(task)}
                    title="Im Workspace als Dokument vertiefen"
                    className="h-8 px-3 rounded-full bg-[#282a2c] hover:bg-[#323639] border border-white/[0.08] text-xs text-[#c4c7c5] hover:text-[#e3e3e3] flex items-center gap-1.5 transition-colors"
                  >
                    <FileText className="w-3.5 h-3.5 text-[#a8c7fa]" />
                    <span className="hidden md:inline">Vertiefen</span>
                  </button>
                  <button
                    onClick={() => handleDeletePermanent(task.id)}
                    title="Löschen"
                    className="w-8 h-8 rounded-full bg-[#282a2c] hover:bg-[#f28b82]/20 border border-white/[0.08] text-[#8e918f] hover:text-[#f28b82] flex items-center justify-center transition-colors"
                  >
                    <Trash2 className="w-3.5 h-3.5" />
                  </button>
                </div>
-              </div>
+              );
-            ))
+            })
          )}
        </div>
      )}
@@ -55,7 +55,7 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
  const cardBorderColor = useTransform(
    x,
    [-140, 0, 140],
-    ['rgba(242, 139, 130, 0.6)', '#3c4043', 'rgba(168, 218, 181, 0.6)']
+    ['rgba(239, 68, 68, 0.7)', 'rgba(255, 255, 255, 0.08)', 'rgba(34, 197, 94, 0.7)']
  );
  const handleAction = async (
@@ -98,7 +98,7 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
    onDeckChange();
  };
-  // Keyboard shortcuts for desktop power users (BRAIN.md Section 5)
+  // Keyboard shortcuts for desktop power users
  useEffect(() => {
    const onKeyDown = (e: KeyboardEvent) => {
      const target = e.target as HTMLElement;
@@ -134,19 +134,19 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
    switch (priority) {
      case 'urgent':
        return (
-          <span className="px-2.5 py-0.5 rounded-full text-xs font-normal bg-[#f28b82]/15 text-[#f28b82] border border-[#f28b82]/30">
+          <span className="px-2.5 py-0.5 rounded-full text-xs font-medium bg-[#ef4444] text-white">
            Dringend
          </span>
        );
      case 'high':
        return (
-          <span className="px-2.5 py-0.5 rounded-full text-xs font-normal bg-[#fdd663]/15 text-[#fdd663] border border-[#fdd663]/30">
+          <span className="px-2.5 py-0.5 rounded-full text-xs font-medium bg-[#f97316] text-white">
-            Hoch
+            Wichtig
          </span>
        );
      default:
        return (
-          <span className="px-2.5 py-0.5 rounded-full text-xs font-normal bg-[#282a2c] text-[#8e918f] border border-white/[0.06]">
+          <span className="px-2.5 py-0.5 rounded-full text-xs font-medium bg-[#2b2d33] text-zinc-400">
            Gedanke
          </span>
        );
@@ -156,14 +156,14 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
  const sourceBadge = (source: string) => {
    if (source === 'voice') {
      return (
-        <span className="px-2.5 py-0.5 rounded-full text-xs bg-[#131314] text-[#a8c7fa] border border-white/[0.06] flex items-center gap-1">
+        <span className="px-2.5 py-0.5 rounded-full text-xs bg-[#16171a] text-[#1d8cf8] border border-white/[0.06] flex items-center gap-1">
          <Mic className="w-3 h-3" /> Diktat
        </span>
      );
    }
    if (source === 'webhook') {
      return (
-        <span className="px-2.5 py-0.5 rounded-full text-xs bg-[#131314] text-[#a8dab5] border border-white/[0.06] flex items-center gap-1">
+        <span className="px-2.5 py-0.5 rounded-full text-xs bg-[#16171a] text-[#22c55e] border border-white/[0.06] flex items-center gap-1">
          <Webhook className="w-3 h-3" /> Webhook
        </span>
      );
@@ -173,19 +173,19 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
  if (!activeCard) {
    return (
-      <div className="max-w-xl mx-auto mt-8 p-8 sm:p-10 rounded-3xl bg-[#1e1f20] border border-[#3c4043] text-center shadow-card">
+      <div className="max-w-xl mx-auto mt-8 p-8 sm:p-10 rounded-3xl bg-[#222428] border border-white/[0.08] text-center shadow-card">
-        <div className="w-12 h-12 rounded-full bg-[#a8dab5]/15 flex items-center justify-center mx-auto mb-4">
+        <div className="w-12 h-12 rounded-2xl bg-[#1d8cf8] text-white flex items-center justify-center mx-auto mb-4 shadow-sm">
-          <Sparkles className="w-6 h-6 text-[#a8dab5]" />
+          <Sparkles className="w-6 h-6" />
        </div>
-        <h2 className="text-xl font-medium text-[#e3e3e3] mb-1.5">Inbox Zero</h2>
+        <h2 className="text-xl font-bold text-white mb-1.5">Inbox Zero</h2>
-        <p className="text-[#8e918f] text-sm max-w-sm mx-auto mb-6">
+        <p className="text-zinc-400 text-sm max-w-sm mx-auto mb-6">
          Alle Gedanken sind gesichtet. Dein Kopf ist wieder frei.
        </p>
        <div className="flex flex-wrap items-center justify-center gap-2.5">
          <button
            onClick={onFocusCapture}
-            className="h-9 px-5 rounded-full bg-[#a8c7fa] text-[#041e49] font-medium text-xs sm:text-sm hover:bg-[#b8d4ff] transition-colors"
+            className="h-10 px-5 rounded-full bg-[#1d8cf8] hover:bg-[#3b9cfc] text-white font-medium text-xs sm:text-sm shadow-sm transition-colors"
          >
            + Neuer Gedanke
          </button>
@@ -193,9 +193,9 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
          {lastTriaged && (
            <button
              onClick={handleUndo}
-              className="h-9 px-4 rounded-full bg-[#282a2c] text-[#c4c7c5] hover:text-[#e3e3e3] hover:bg-[#333537] border border-white/[0.08] text-xs flex items-center gap-1.5 transition-colors"
+              className="h-10 px-4 rounded-full bg-[#2b2d33] hover:bg-[#32353b] text-zinc-300 hover:text-white border border-white/[0.08] text-xs flex items-center gap-1.5 transition-colors"
            >
-              <RotateCcw className="w-3.5 h-3.5" />
+              <RotateCcw className="w-3.5 h-3.5 text-[#1d8cf8]" />
              Rückgängig
            </button>
          )}
@@ -209,11 +209,11 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
      {/* Top Deck Status & Undo Bar */}
      <div className="flex items-center justify-between mb-3 px-1">
        <div className="flex items-center gap-2">
-          <span className="text-xs text-[#8e918f]">
+          <span className="text-xs text-zinc-400">
            {cards.length} {cards.length === 1 ? 'Gedanke' : 'Gedanken'} verbleibend
          </span>
-          <span className="hidden sm:inline text-xs text-[#8e918f]">•</span>
+          <span className="hidden sm:inline text-xs text-zinc-600">•</span>
-          <span className="hidden sm:flex items-center gap-1 text-xs text-[#8e918f]">
+          <span className="hidden sm:flex items-center gap-1 text-xs text-zinc-400">
            <Keyboard className="w-3 h-3" /> H / L oder ← / →
          </span>
        </div>
@@ -221,9 +221,9 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
        {lastTriaged && (
          <button
            onClick={handleUndo}
-            className="h-7 px-2.5 rounded-full bg-[#1e1f20] hover:bg-[#282a2c] border border-white/[0.08] text-xs text-[#c4c7c5] hover:text-[#e3e3e3] flex items-center gap-1.5 transition-colors"
+            className="h-7 px-2.5 rounded-full bg-[#222428] hover:bg-[#2b2d33] border border-white/[0.08] text-xs text-zinc-300 hover:text-white flex items-center gap-1.5 transition-colors"
          >
-            <RotateCcw className="w-3 h-3 text-[#a8c7fa]" />
+            <RotateCcw className="w-3 h-3 text-[#1d8cf8]" />
            Rückgängig
          </button>
        )}
@@ -235,11 +235,11 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
        {nextCard && (
          <div
            key={nextCard.id + '-preview'}
-            className="absolute inset-x-3 top-4 bottom-0 rounded-3xl bg-[#1e1f20]/60 border border-[#3c4043]/40 p-6 opacity-40 scale-[0.96] pointer-events-none flex flex-col justify-between"
+            className="absolute inset-x-3 top-4 bottom-0 rounded-3xl bg-[#222428]/60 border border-white/[0.06] p-6 opacity-40 scale-[0.96] pointer-events-none flex flex-col justify-between"
          >
            <div className="flex items-center gap-2">{priorityBadge(nextCard.priority)}</div>
-            <p className="text-base text-[#8e918f] line-clamp-3">{nextCard.content}</p>
+            <p className="text-base text-zinc-400 line-clamp-3">{nextCard.content}</p>
-            <div className="text-xs text-[#8e918f]">Nächste Karte…</div>
+            <div className="text-xs text-zinc-500">Nächste Karte…</div>
          </div>
        )}
@@ -262,19 +262,19 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
            initial={{ scale: 0.96, opacity: 0, y: 12 }}
            animate={{ scale: 1, opacity: 1, y: 0 }}
            exit={{ scale: 0.92, opacity: 0 }}
-            className="relative w-full h-full rounded-3xl bg-[#1e1f20] border p-6 sm:p-7 shadow-card cursor-grab active:cursor-grabbing flex flex-col justify-between overflow-hidden"
+            className="relative w-full h-full rounded-3xl bg-[#222428] border p-6 sm:p-7 shadow-card cursor-grab active:cursor-grabbing flex flex-col justify-between overflow-hidden"
          >
            {/* Dynamic Swipe Overlays */}
            <motion.div
              style={{ opacity: keepOpacity }}
-              className="pointer-events-none absolute top-5 right-5 px-3 py-1 rounded-full bg-[#a8dab5]/15 border border-[#a8dab5]/50 text-[#a8dab5] font-medium text-xs tracking-wide uppercase"
+              className="pointer-events-none absolute top-5 right-5 px-3 py-1 rounded-full bg-[#22c55e]/20 border border-[#22c55e] text-[#22c55e] font-semibold text-xs tracking-wide uppercase"
            >
              Behalten 👉
            </motion.div>
            <motion.div
              style={{ opacity: discardOpacity }}
-              className="pointer-events-none absolute top-5 left-5 px-3 py-1 rounded-full bg-[#f28b82]/15 border border-[#f28b82]/50 text-[#f28b82] font-medium text-xs tracking-wide uppercase"
+              className="pointer-events-none absolute top-5 left-5 px-3 py-1 rounded-full bg-[#ef4444]/20 border border-[#ef4444] text-[#ef4444] font-semibold text-xs tracking-wide uppercase"
            >
              👈 Weg damit
            </motion.div>
@@ -285,7 +285,7 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
                {priorityBadge(activeCard.priority)}
                {sourceBadge(activeCard.source)}
              </div>
-              <span className="text-xs text-[#8e918f] flex items-center gap-1">
+              <span className="text-xs text-zinc-400 flex items-center gap-1">
                <Clock className="w-3.5 h-3.5" />
                {new Date(activeCard.createdAt).toLocaleString('de-DE', {
                  day: '2-digit',
@@ -298,7 +298,7 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
            {/* Card Body */}
            <div className="my-auto py-3">
-              <p className="text-lg sm:text-xl font-normal text-[#e3e3e3] leading-relaxed break-words">
+              <p className="text-lg sm:text-xl font-medium text-white leading-relaxed break-words">
                {activeCard.content}
              </p>
            </div>
@@ -310,18 +310,18 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
                  activeCard.tags.map((tag) => (
                    <span
                      key={tag}
-                      className="px-2.5 py-0.5 rounded-full bg-[#131314] text-[#a8c7fa] border border-white/[0.06] text-xs flex items-center gap-1"
+                      className="px-2.5 py-0.5 rounded-full bg-[#16171a] text-[#1d8cf8] border border-white/[0.06] text-xs flex items-center gap-1 font-medium"
                    >
                      <Tag className="w-2.5 h-2.5" />#{tag}
                    </span>
                  ))
                ) : (
-                  <span className="text-xs text-[#8e918f]">Wische links oder rechts</span>
+                  <span className="text-xs text-zinc-400">Wische links oder rechts</span>
                )}
              </div>
              {activeCard.dueDate && (
-                <span className="px-2.5 py-0.5 rounded-full bg-[#131314] text-[#c4c7c5] border border-white/[0.06] text-xs">
+                <span className="px-2.5 py-0.5 rounded-full bg-[#16171a] text-zinc-300 border border-white/[0.06] text-xs">
                  📅 {activeCard.dueDate}
                </span>
              )}
@@ -332,9 +332,9 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
      {/* Convert to Task Date Picker Popover */}
      {showDateModal && (
-        <div className="mt-3 p-3.5 rounded-2xl bg-[#1e1f20] border border-[#3c4043] flex flex-wrap items-center justify-between gap-3">
+        <div className="mt-3 p-3.5 rounded-2xl bg-[#222428] border border-white/[0.08] flex flex-wrap items-center justify-between gap-3">
-          <div className="flex items-center gap-2 text-xs text-[#c4c7c5]">
+          <div className="flex items-center gap-2 text-xs text-zinc-300">
-            <Calendar className="w-4 h-4 text-[#a8c7fa]" />
+            <Calendar className="w-4 h-4 text-[#1d8cf8]" />
            <span>Fälligkeitsdatum für Aufgabe:</span>
          </div>
          <div className="flex items-center gap-2">
@@ -342,11 +342,11 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
              type="date"
              value={taskDueDate}
              onChange={(e) => setTaskDueDate(e.target.value)}
-              className="bg-[#131314] text-[#e3e3e3] px-3 py-1 rounded-full border border-[#3c4043] text-xs focus:outline-none"
+              className="bg-[#16171a] text-white px-3 py-1 rounded-full border border-white/[0.08] text-xs focus:outline-none focus:border-[#1d8cf8]"
            />
            <button
              onClick={() => handleAction('keep', { convertTo: 'task', dueDate: taskDueDate })}
-              className="px-3.5 py-1 rounded-full bg-[#a8dab5] text-[#072711] font-medium text-xs hover:bg-[#b8e3c3]"
+              className="px-3.5 py-1 rounded-full bg-[#22c55e] text-white font-medium text-xs hover:bg-[#16a34a] transition-colors"
            >
              Speichern
            </button>
@@ -356,8 +356,8 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
      {/* Convert to Shopping List Item Popover */}
      {showListSelector && (
-        <div className="mt-3 p-3.5 rounded-2xl bg-[#1e1f20] border border-[#3c4043]">
+        <div className="mt-3 p-3.5 rounded-2xl bg-[#222428] border border-white/[0.08]">
-          <p className="text-xs text-[#8e918f] mb-2">
+          <p className="text-xs text-zinc-400 mb-2">
            In welche Liste verschieben?
          </p>
          <div className="flex flex-wrap gap-1.5">
@@ -368,26 +368,26 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
                  onClick={() =>
                    handleAction('keep', { convertTo: 'list_item', targetListId: lst.id })
                  }
-                  className="px-3 py-1.5 rounded-full bg-[#282a2c] hover:bg-[#333537] border border-white/[0.06] text-xs text-[#e3e3e3] flex items-center gap-1.5 transition-colors"
+                  className="px-3 py-1.5 rounded-full bg-[#2b2d33] hover:bg-[#32353b] border border-white/[0.06] text-xs text-zinc-200 flex items-center gap-1.5 transition-colors"
                >
                  <span>{lst.icon}</span>
                  <span>{lst.title}</span>
                </button>
              ))
            ) : (
-              <span className="text-xs text-[#8e918f]">Keine Listen vorhanden.</span>
+              <span className="text-xs text-zinc-400">Keine Listen vorhanden.</span>
            )}
          </div>
        </div>
      )}
-      {/* Primary Triage Action Pills (Material 3 Tonal & Outlined) */}
+      {/* Primary Triage Action Pills */}
      <div className="mt-5 flex flex-wrap items-center justify-center gap-2 sm:gap-2.5">
        {/* Swipe Left: Discard */}
        <button
          onClick={() => handleAction('discard')}
          title="Verwerfen (Taste H oder Pfeil links)"
-          className="h-10 px-4 rounded-full border border-[#f28b82]/30 text-[#f28b82] hover:bg-[#f28b82]/10 font-normal text-xs sm:text-sm flex items-center gap-1.5 transition-colors active:scale-95"
+          className="h-10 px-4 rounded-full border border-[#ef4444]/40 text-[#ef4444] hover:bg-[#ef4444]/15 font-medium text-xs sm:text-sm flex items-center gap-1.5 transition-colors active:scale-95"
        >
          <X className="w-4 h-4" />
          <span>Weg damit</span>
@@ -402,21 +402,21 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
          title="Als Aufgabe mit Datum (Taste T)"
          className={`h-10 px-3.5 rounded-full border text-xs sm:text-sm flex items-center gap-1.5 transition-colors ${
            showDateModal
-              ? 'bg-[#282a2c] text-[#a8c7fa] border-[#a8c7fa]/40 font-medium'
+              ? 'bg-[#1d8cf8]/20 text-[#1d8cf8] border-[#1d8cf8]/40 font-medium'
-              : 'bg-[#282a2c] hover:bg-[#333537] text-[#c4c7c5] hover:text-[#e3e3e3] border-white/[0.08]'
+              : 'bg-[#2b2d33] hover:bg-[#32353b] text-zinc-300 hover:text-white border-white/[0.06]'
          }`}
        >
-          <Calendar className="w-3.5 h-3.5 text-[#a8c7fa]" />
+          <Calendar className="w-3.5 h-3.5 text-[#1d8cf8]" />
          <span>Termin-To-Do</span>
        </button>
        {/* Convert to Workspace Document */}
        <button
          onClick={() => handleAction('keep', { convertTo: 'document' })}
-          title="In Workspace-Notiz umwandeln (Taste D)"
+          title="In Notiz / Projekt umwandeln (Taste D)"
-          className="h-10 px-3.5 rounded-full bg-[#282a2c] hover:bg-[#333537] border border-white/[0.08] text-[#c4c7c5] hover:text-[#e3e3e3] text-xs sm:text-sm flex items-center gap-1.5 transition-colors"
+          className="h-10 px-3.5 rounded-full bg-[#2b2d33] hover:bg-[#32353b] border border-white/[0.06] text-zinc-300 hover:text-white text-xs sm:text-sm flex items-center gap-1.5 transition-colors"
        >
-          <FileText className="w-3.5 h-3.5 text-[#a8c7fa]" />
+          <FileText className="w-3.5 h-3.5 text-[#1d8cf8]" />
          <span>Als Notiz</span>
        </button>
@@ -429,11 +429,11 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
          title="Auf eine geteilte Liste setzen"
          className={`h-10 px-3.5 rounded-full border text-xs sm:text-sm flex items-center gap-1.5 transition-colors ${
            showListSelector
-              ? 'bg-[#282a2c] text-[#a8dab5] border-[#a8dab5]/40 font-medium'
+              ? 'bg-[#22c55e]/20 text-[#22c55e] border-[#22c55e]/40 font-medium'
-              : 'bg-[#282a2c] hover:bg-[#333537] text-[#c4c7c5] hover:text-[#e3e3e3] border-white/[0.08]'
+              : 'bg-[#2b2d33] hover:bg-[#32353b] text-zinc-300 hover:text-white border-white/[0.06]'
          }`}
        >
-          <ShoppingCart className="w-3.5 h-3.5 text-[#a8dab5]" />
+          <ShoppingCart className="w-3.5 h-3.5 text-[#22c55e]" />
          <span>Auf Liste</span>
        </button>
@@ -441,7 +441,7 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
        <button
          onClick={() => handleAction('keep')}
          title="Behalten & sichern (Taste L oder Pfeil rechts)"
-          className="h-10 px-4 rounded-full bg-[#a8dab5] hover:bg-[#b8e3c3] text-[#072711] font-medium text-xs sm:text-sm flex items-center gap-1.5 transition-colors active:scale-95"
+          className="h-10 px-5 rounded-full bg-[#22c55e] hover:bg-[#16a34a] text-white font-medium text-xs sm:text-sm flex items-center gap-1.5 shadow-sm transition-colors active:scale-95"
        >
          <Check className="w-4 h-4" />
          <span>Behalten</span>
@@ -209,19 +209,19 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
      <div className="lg:col-span-4 space-y-3">
        <div className="flex items-center gap-2">
          <div className="relative flex-1">
-            <Search className="w-4 h-4 text-[#8e918f] absolute left-3.5 top-1/2 -translate-y-1/2" />
+            <Search className="w-4 h-4 text-zinc-400 absolute left-3.5 top-1/2 -translate-y-1/2" />
            <input
              type="text"
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
              placeholder="Notizen durchsuchen…"
-              className="w-full h-10 pl-9 pr-4 rounded-full bg-[#1e1f20] text-xs sm:text-sm text-[#e3e3e3] placeholder-[#8e918f] border border-white/[0.08] focus:outline-none focus:border-[#a8c7fa] transition-colors"
+              className="w-full h-11 pl-9 pr-4 rounded-2xl bg-[#222428] text-xs sm:text-sm text-white placeholder-zinc-500 border border-white/[0.06] focus:outline-none focus:border-[#1d8cf8] transition-colors"
            />
          </div>
          <button
            onClick={handleCreateDoc}
-            className="h-10 px-4 rounded-full bg-[#a8c7fa] text-[#041e49] font-medium text-xs sm:text-sm flex items-center gap-1.5 hover:bg-[#c2e7ff] transition-colors flex-shrink-0"
+            className="h-11 px-4 rounded-full bg-[#1d8cf8] text-white font-medium text-xs sm:text-sm flex items-center gap-1.5 hover:bg-[#3b9cfc] transition-colors flex-shrink-0 shadow-sm"
          >
            <Plus className="w-4 h-4" />
            <span>Neu</span>
@@ -235,36 +235,36 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
              <button
                key={doc.id}
                onClick={() => setSelectedDoc(doc)}
-                className={`w-full text-left p-3.5 sm:p-4 rounded-2xl transition-colors flex items-start justify-between gap-3 ${
+                className={`w-full text-left p-3.5 sm:p-4 rounded-2xl transition-all flex items-start justify-between gap-3 ${
                  active
-                    ? 'bg-[#282a2c] border border-white/[0.12]'
+                    ? 'bg-[#282a2f] border border-[#1d8cf8]/70 shadow-sm'
-                    : 'bg-[#1e1f20] hover:bg-[#282a2c]/60 border border-transparent'
+                    : 'bg-[#222428] hover:bg-[#282a2f] border border-white/[0.06]'
                }`}
              >
                <div className="flex items-start gap-3 min-w-0">
                  <span className="text-2xl flex-shrink-0">{doc.icon}</span>
                  <div className="min-w-0">
-                    <h4 className="font-medium text-sm text-[#e3e3e3] truncate">{doc.title}</h4>
+                    <h4 className="font-medium text-sm text-white truncate">{doc.title}</h4>
-                    <p className="text-xs text-[#8e918f] truncate mt-0.5">
+                    <p className="text-xs text-zinc-400 truncate mt-0.5">
                      {doc.blocks?.[0]?.content || 'Leeres Dokument'}
                    </p>
                  </div>
                </div>
-                {doc.isPinned && <Pin className="w-3.5 h-3.5 text-[#a8c7fa] flex-shrink-0 mt-1" />}
+                {doc.isPinned && <Pin className="w-3.5 h-3.5 text-[#1d8cf8] flex-shrink-0 mt-1" />}
              </button>
            );
          })}
        </div>
      </div>
-      {/* Right Notion-Flair Block Editor */}
+      {/* Right Block Editor */}
      <div className="lg:col-span-8">
        {selectedDoc ? (
-          <div className="p-6 sm:p-8 rounded-2xl bg-[#1e1f20] border border-white/[0.08]">
+          <div className="p-6 sm:p-8 rounded-3xl bg-[#222428] border border-white/[0.08]">
            {/* Document Top Action Bar */}
            <div className="flex flex-wrap items-center justify-between gap-3 pb-4 mb-6 border-b border-white/[0.06]">
-              <div className="flex items-center gap-2 text-xs text-[#8e918f]">
+              <div className="flex items-center gap-2 text-xs text-zinc-400">
-                <span className="px-3 py-1 rounded-full bg-[#131314] text-[#a8dab5] border border-white/[0.06] flex items-center gap-1 font-medium">
+                <span className="px-3 py-1 rounded-full bg-[#16171a] text-[#22c55e] border border-white/[0.06] flex items-center gap-1 font-medium">
                  <Check className="w-3 h-3" />
                  {saveState === 'saving' ? 'Speichert…' : 'Automatisch gespeichert'}
                </span>
@@ -278,8 +278,8 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
                  }
                  className={`h-8 px-3 rounded-full text-xs flex items-center gap-1.5 transition-colors ${
                    selectedDoc.isPinned
-                      ? 'bg-[#a8c7fa]/15 text-[#a8c7fa] border border-[#a8c7fa]/25'
+                      ? 'bg-[#1d8cf8]/20 text-[#1d8cf8] border border-[#1d8cf8]/40'
-                      : 'bg-[#282a2c] hover:bg-[#323639] border border-white/[0.08] text-[#c4c7c5] hover:text-[#e3e3e3]'
+                      : 'bg-[#2b2d33] hover:bg-[#32353b] border border-white/[0.06] text-zinc-300 hover:text-white'
                  }`}
                >
                  <Pin className="w-3.5 h-3.5" />
@@ -288,15 +288,15 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
                <button
                  onClick={handleExportMarkdown}
-                  className="h-8 px-3 rounded-full bg-[#282a2c] hover:bg-[#323639] border border-white/[0.08] text-xs text-[#c4c7c5] hover:text-[#e3e3e3] flex items-center gap-1.5 transition-colors"
+                  className="h-8 px-3 rounded-full bg-[#2b2d33] hover:bg-[#32353b] border border-white/[0.06] text-xs text-zinc-200 hover:text-white flex items-center gap-1.5 transition-colors"
                >
-                  <Download className="w-3.5 h-3.5 text-[#a8c7fa]" />
+                  <Download className="w-3.5 h-3.5 text-[#1d8cf8]" />
                  <span>Markdown (.md)</span>
                </button>
                <button
                  onClick={() => handleDeleteDoc(selectedDoc.id)}
-                  className="w-8 h-8 rounded-full bg-[#282a2c] hover:bg-[#f28b82]/20 border border-white/[0.08] text-[#8e918f] hover:text-[#f28b82] flex items-center justify-center transition-colors"
+                  className="w-8 h-8 rounded-full bg-[#2b2d33] hover:bg-[#ef4444]/20 border border-white/[0.06] text-zinc-400 hover:text-[#ef4444] flex items-center justify-center transition-colors"
                >
                  <Trash2 className="w-3.5 h-3.5" />
                </button>
@@ -308,14 +308,14 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
              <button
                type="button"
                onClick={() => setShowIconPicker((prev) => !prev)}
-                className="w-12 h-12 rounded-2xl bg-[#131314] hover:bg-[#282a2c] border border-white/[0.08] text-2xl flex items-center justify-center flex-shrink-0 transition-colors"
+                className="w-12 h-12 rounded-2xl bg-[#16171a] hover:bg-[#2b2d33] border border-white/[0.08] text-2xl flex items-center justify-center flex-shrink-0 transition-colors"
                title="Icon ändern"
              >
                {selectedDoc.icon}
              </button>
              {showIconPicker && (
-                <div className="absolute top-14 left-0 z-20 p-2.5 rounded-2xl bg-[#1e1f20] border border-white/[0.12] shadow-lg flex flex-wrap gap-1.5 w-64">
+                <div className="absolute top-14 left-0 z-20 p-2.5 rounded-2xl bg-[#222428] border border-white/[0.12] shadow-card flex flex-wrap gap-1.5 w-64">
                  {ICONS.map((ic) => (
                    <button
                      key={ic}
@@ -324,7 +324,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
                        persistDocument({ ...selectedDoc, icon: ic });
                        setShowIconPicker(false);
                      }}
-                      className="w-9 h-9 rounded-full hover:bg-[#282a2c] text-lg flex items-center justify-center transition-colors"
+                      className="w-9 h-9 rounded-full hover:bg-[#2b2d33] text-lg flex items-center justify-center transition-colors"
                    >
                      {ic}
                    </button>
@@ -337,7 +337,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
                value={selectedDoc.title}
                onChange={(e) => persistDocument({ ...selectedDoc, title: e.target.value })}
                placeholder="Dokument-Titel…"
-                className="w-full bg-transparent text-2xl sm:text-3xl font-semibold text-[#e3e3e3] focus:outline-none"
+                className="w-full bg-transparent text-2xl sm:text-3xl font-bold text-white focus:outline-none"
              />
            </div>
@@ -353,7 +353,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
                        value={block.content}
                        onChange={(e) => updateBlock(block.id, { content: e.target.value })}
                        placeholder="Überschrift 1…"
-                        className="w-full bg-transparent text-2xl font-semibold text-[#e3e3e3] focus:outline-none py-1"
+                        className="w-full bg-transparent text-2xl font-bold text-white focus:outline-none py-1"
                      />
                    )}
@@ -363,7 +363,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
                        value={block.content}
                        onChange={(e) => updateBlock(block.id, { content: e.target.value })}
                        placeholder="Abschnitts-Überschrift…"
-                        className="w-full bg-transparent text-lg font-medium text-[#a8c7fa] focus:outline-none pt-2 pb-1"
+                        className="w-full bg-transparent text-lg font-semibold text-[#1d8cf8] focus:outline-none pt-2 pb-1"
                      />
                    )}
@@ -373,7 +373,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
                        value={block.content}
                        onChange={(e) => updateBlock(block.id, { content: e.target.value })}
                        placeholder="Text schreiben…"
-                        className="w-full bg-transparent text-sm sm:text-base text-[#e3e3e3] leading-relaxed focus:outline-none resize-none font-normal"
+                        className="w-full bg-transparent text-sm sm:text-base text-zinc-200 leading-relaxed focus:outline-none resize-none font-normal"
                      />
                    )}
@@ -383,7 +383,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
                          type="checkbox"
                          checked={!!block.checked}
                          onChange={(e) => updateBlock(block.id, { checked: e.target.checked })}
-                          className="w-4 h-4 rounded accent-[#a8dab5] cursor-pointer"
+                          className="w-4 h-4 rounded accent-[#22c55e] cursor-pointer"
                        />
                        <input
                          type="text"
@@ -391,7 +391,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
                          onChange={(e) => updateBlock(block.id, { content: e.target.value })}
                          placeholder="To-Do Punkt…"
                          className={`w-full bg-transparent text-sm sm:text-base focus:outline-none ${
-                            block.checked ? 'line-through text-[#8e918f]' : 'text-[#e3e3e3]'
+                            block.checked ? 'line-through text-zinc-500' : 'text-white'
                          }`}
                        />
                      </div>
@@ -399,32 +399,32 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
                    {block.type === 'bullet' && (
                      <div className="flex items-center gap-3 py-0.5">
-                        <span className="w-1.5 h-1.5 rounded-full bg-[#a8c7fa] flex-shrink-0" />
+                        <span className="w-1.5 h-1.5 rounded-full bg-[#1d8cf8] flex-shrink-0" />
                        <input
                          type="text"
                          value={block.content}
                          onChange={(e) => updateBlock(block.id, { content: e.target.value })}
                          placeholder="Listenpunkt…"
-                          className="w-full bg-transparent text-sm sm:text-base text-[#e3e3e3] focus:outline-none"
+                          className="w-full bg-transparent text-sm sm:text-base text-zinc-200 focus:outline-none"
                        />
                      </div>
                    )}
                    {block.type === 'callout' && (
-                      <div className="p-4 rounded-2xl bg-[#131314] border border-[#a8c7fa]/25 flex items-start gap-3">
+                      <div className="p-4 rounded-2xl bg-[#16171a] border border-[#1d8cf8]/30 flex items-start gap-3">
-                        <Sparkles className="w-4 h-4 text-[#a8c7fa] flex-shrink-0 mt-1" />
+                        <Sparkles className="w-4 h-4 text-[#1d8cf8] flex-shrink-0 mt-1" />
                        <textarea
                          rows={2}
                          value={block.content}
                          onChange={(e) => updateBlock(block.id, { content: e.target.value })}
                          placeholder="Wichtiger Hinweis oder Zusammenfassung…"
-                          className="w-full bg-transparent text-sm text-[#e3e3e3] focus:outline-none resize-none"
+                          className="w-full bg-transparent text-sm text-zinc-200 focus:outline-none resize-none"
                        />
                      </div>
                    )}
                    {block.type === 'code' && (
-                      <div className="p-4 rounded-2xl bg-[#131314] border border-white/[0.08] font-mono text-xs sm:text-sm text-[#a8dab5]">
+                      <div className="p-4 rounded-2xl bg-[#16171a] border border-white/[0.08] font-mono text-xs sm:text-sm text-[#22c55e]">
                        <textarea
                          rows={Math.max(2, block.content.split('\n').length)}
                          value={block.content}
@@ -441,7 +441,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
                    <button
                      type="button"
                      onClick={() => moveBlock(idx, -1)}
-                      className="p-1 rounded-full hover:bg-[#282a2c] text-[#8e918f] hover:text-[#e3e3e3] transition-colors"
+                      className="p-1 rounded-full hover:bg-[#2b2d33] text-zinc-400 hover:text-white transition-colors"
                      title="Nach oben"
                    >
                      <ArrowUp className="w-3.5 h-3.5" />
@@ -449,7 +449,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
                    <button
                      type="button"
                      onClick={() => moveBlock(idx, 1)}
-                      className="p-1 rounded-full hover:bg-[#282a2c] text-[#8e918f] hover:text-[#e3e3e3] transition-colors"
+                      className="p-1 rounded-full hover:bg-[#2b2d33] text-zinc-400 hover:text-white transition-colors"
                      title="Nach unten"
                    >
                      <ArrowDown className="w-3.5 h-3.5" />
@@ -457,7 +457,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
                    <button
                      type="button"
                      onClick={() => removeBlock(block.id)}
-                      className="p-1 rounded-full hover:bg-[#f28b82]/20 text-[#8e918f] hover:text-[#f28b82] transition-colors"
+                      className="p-1 rounded-full hover:bg-[#ef4444]/20 text-zinc-400 hover:text-[#ef4444] transition-colors"
                      title="Block entfernen"
                    >
                      <Trash2 className="w-3.5 h-3.5" />
@@ -469,67 +469,67 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
            {/* Add Block Pill Toolbar */}
            <div className="mt-8 pt-4 border-t border-white/[0.06] flex flex-wrap items-center gap-2">
-              <span className="text-xs text-[#8e918f] mr-1">+ Block einfügen:</span>
+              <span className="text-xs text-zinc-400 mr-1">+ Block einfügen:</span>
              <button
                type="button"
                onClick={() => addBlock('paragraph')}
-                className="h-8 px-3 rounded-full bg-[#131314] hover:bg-[#282a2c] border border-white/[0.08] text-xs text-[#c4c7c5] hover:text-[#e3e3e3] flex items-center gap-1.5 transition-colors"
+                className="h-8 px-3 rounded-full bg-[#16171a] hover:bg-[#2b2d33] border border-white/[0.08] text-xs text-zinc-300 hover:text-white flex items-center gap-1.5 transition-colors"
              >
-                <AlignLeft className="w-3.5 h-3.5 text-[#a8c7fa]" /> Text
+                <AlignLeft className="w-3.5 h-3.5 text-[#1d8cf8]" /> Text
              </button>
              <button
                type="button"
                onClick={() => addBlock('h2')}
-                className="h-8 px-3 rounded-full bg-[#131314] hover:bg-[#282a2c] border border-white/[0.08] text-xs text-[#c4c7c5] hover:text-[#e3e3e3] flex items-center gap-1.5 transition-colors"
+                className="h-8 px-3 rounded-full bg-[#16171a] hover:bg-[#2b2d33] border border-white/[0.08] text-xs text-zinc-300 hover:text-white flex items-center gap-1.5 transition-colors"
              >
-                <Heading2 className="w-3.5 h-3.5 text-[#a8c7fa]" /> Überschrift
+                <Heading2 className="w-3.5 h-3.5 text-[#1d8cf8]" /> Überschrift
              </button>
              <button
                type="button"
                onClick={() => addBlock('todo')}
-                className="h-8 px-3 rounded-full bg-[#131314] hover:bg-[#282a2c] border border-white/[0.08] text-xs text-[#c4c7c5] hover:text-[#e3e3e3] flex items-center gap-1.5 transition-colors"
+                className="h-8 px-3 rounded-full bg-[#16171a] hover:bg-[#2b2d33] border border-white/[0.08] text-xs text-zinc-300 hover:text-white flex items-center gap-1.5 transition-colors"
              >
-                <CheckSquare className="w-3.5 h-3.5 text-[#a8dab5]" /> Checkliste
+                <CheckSquare className="w-3.5 h-3.5 text-[#22c55e]" /> Checkliste
              </button>
              <button
                type="button"
                onClick={() => addBlock('bullet')}
-                className="h-8 px-3 rounded-full bg-[#131314] hover:bg-[#282a2c] border border-white/[0.08] text-xs text-[#c4c7c5] hover:text-[#e3e3e3] flex items-center gap-1.5 transition-colors"
+                className="h-8 px-3 rounded-full bg-[#16171a] hover:bg-[#2b2d33] border border-white/[0.08] text-xs text-zinc-300 hover:text-white flex items-center gap-1.5 transition-colors"
              >
-                <List className="w-3.5 h-3.5 text-[#a8c7fa]" /> Aufzählung
+                <List className="w-3.5 h-3.5 text-[#1d8cf8]" /> Aufzählung
              </button>
              <button
                type="button"
                onClick={() => addBlock('callout')}
-                className="h-8 px-3 rounded-full bg-[#131314] hover:bg-[#282a2c] border border-white/[0.08] text-xs text-[#c4c7c5] hover:text-[#e3e3e3] flex items-center gap-1.5 transition-colors"
+                className="h-8 px-3 rounded-full bg-[#16171a] hover:bg-[#2b2d33] border border-white/[0.08] text-xs text-zinc-300 hover:text-white flex items-center gap-1.5 transition-colors"
              >
-                <Sparkles className="w-3.5 h-3.5 text-[#a8c7fa]" /> Callout
+                <Sparkles className="w-3.5 h-3.5 text-[#a855f7]" /> Callout
              </button>
              <button
                type="button"
                onClick={() => addBlock('code')}
-                className="h-8 px-3 rounded-full bg-[#131314] hover:bg-[#282a2c] border border-white/[0.08] text-xs text-[#c4c7c5] hover:text-[#e3e3e3] flex items-center gap-1.5 transition-colors"
+                className="h-8 px-3 rounded-full bg-[#16171a] hover:bg-[#2b2d33] border border-white/[0.08] text-xs text-zinc-300 hover:text-white flex items-center gap-1.5 transition-colors"
              >
-                <Code className="w-3.5 h-3.5 text-[#a8dab5]" /> Codeblock
+                <Code className="w-3.5 h-3.5 text-[#22c55e]" /> Codeblock
              </button>
              <button
                type="button"
                onClick={() => addBlock('h1')}
-                className="h-8 px-3 rounded-full bg-[#131314] hover:bg-[#282a2c] border border-white/[0.08] text-xs text-[#c4c7c5] hover:text-[#e3e3e3] flex items-center gap-1.5 transition-colors"
+                className="h-8 px-3 rounded-full bg-[#16171a] hover:bg-[#2b2d33] border border-white/[0.08] text-xs text-zinc-300 hover:text-white flex items-center gap-1.5 transition-colors"
              >
-                <Heading1 className="w-3.5 h-3.5 text-[#a8c7fa]" /> H1
+                <Heading1 className="w-3.5 h-3.5 text-[#1d8cf8]" /> H1
              </button>
            </div>
          </div>
        ) : (
-          <div className="p-12 rounded-2xl bg-[#1e1f20] border border-white/[0.08] text-center text-[#8e918f]">
+          <div className="p-12 rounded-3xl bg-[#222428] border border-white/[0.08] text-center text-zinc-400">
            Wähle links ein Dokument aus oder erstelle ein neues Projekt.
          </div>
        )}
@@ -3,27 +3,28 @@
@tailwind utilities;
 :root {
-  /* Google Gemini / Material 3 Dark Palette */
+  /* Template Dark Palette */
-  --bg-canvas: #131314;
+  --bg-canvas: #16171a;
-  --bg-surface: #1e1f20;
+  --bg-surface: #222428;
-  --bg-surface-elevated: #282a2c;
+  --bg-surface-elevated: #282a2f;
-  --bg-surface-hover: #333537;
+  --bg-surface-hover: #32353b;
-  --border-subtle: rgba(255, 255, 255, 0.08);
+  --border-subtle: rgba(255, 255, 255, 0.07);
-  --border-medium: #3c4043;
+  --border-active-green: rgba(34, 197, 94, 0.65);
-  --border-focus: #a8c7fa;
+  --border-focus: #1d8cf8;
-  --color-primary: #a8c7fa;
+  --color-primary: #1d8cf8;
-  --color-primary-container: #004a77;
+  --color-primary-hover: #3b9cfc;
-  --color-on-primary-container: #d3e3fd;
+  --color-on-primary: #ffffff;
-  --color-success: #a8dab5;
+  --color-success: #22c55e;
-  --color-danger: #f28b82;
+  --color-danger: #ef4444;
-  --color-warning: #fdd663;
+  --color-warning: #f97316;
  --color-purple: #a855f7;
-  --text-primary: #e3e3e3;
+  --text-primary: #ffffff;
-  --text-secondary: #c4c7c5;
+  --text-secondary: #a1a1aa;
-  --text-tertiary: #8e918f;
+  --text-tertiary: #71717a;
 }
 * {
@@ -38,7 +39,7 @@ body {
  overflow-x: hidden;
 }
-/* Subtle Material scrollbar */
+/* Subtle clean scrollbar */
 ::-webkit-scrollbar {
  width: 6px;
  height: 6px;
@@ -57,10 +58,11 @@ body {
  background: rgba(255, 255, 255, 0.22);
 }
-.gemini-border {
+.border-subtle {
  border: 1px solid var(--border-subtle);
 }
-.gemini-border-medium {
+.card-surface {
-  border: 1px solid var(--border-medium);
+  background-color: var(--bg-surface);
  border: 1px solid var(--border-subtle);
 }
@@ -5,22 +5,24 @@ export default {
  theme: {
    extend: {
      colors: {
-        gemini: {
+        canvas: '#16171a',
-          canvas: '#131314',
+        surface: {
-          surface: '#1e1f20',
+          DEFAULT: '#222428',
-          elevated: '#282a2c',
+          elevated: '#282a2f',
-          hover: '#333537',
+          hover: '#32353b',
-          border: '#3c4043',
+          border: 'rgba(255, 255, 255, 0.07)',
-          subtle: 'rgba(255, 255, 255, 0.08)',
+        },
-          blue: '#a8c7fa',
+        brand: {
-          blueContainer: '#004a77',
+          DEFAULT: '#1d8cf8',
-          blueOnContainer: '#d3e3fd',
+          hover: '#3b9cfc',
-          green: '#a8dab5',
+          dark: '#0066cc',
-          red: '#f28b82',
+        },
-          yellow: '#fdd663',
+        accent: {
-          text: '#e3e3e3',
+          green: '#22c55e',
-          secondary: '#c4c7c5',
+          orange: '#f97316',
-          tertiary: '#8e918f',
+          purple: '#a855f7',
          red: '#ef4444',
          yellow: '#eab308',
        },
      },
      fontFamily: {
@@ -30,6 +32,7 @@ export default {
      boxShadow: {
        soft: '0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 1px 2px -1px rgba(0, 0, 0, 0.2)',
        card: '0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.2)',
        glowBlue: '0 0 20px -3px rgba(29, 140, 248, 0.35)',
      },
    },
  },